/* Cifras, galería, panel del parque, preguntas, cierre, pie y responsive. */

/* ── Cifras (cuentan desde cero al aparecer: js/efectos.js) ──────────── */
.cifras { padding-top: clamp(40px, 5vw, 64px); }
.cifras__in { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 28px; }
.cifra { display: grid; gap: 10px; align-content: start; padding: 4px 0 4px 20px; border-left: 2px solid var(--brote); }
.cifra b { font: 400 clamp(2.7rem, 1.9rem + 2.6vw, 4.2rem)/.95 var(--f-display); letter-spacing: -.02em; color: var(--canopia-prof); }
.cifra span { font-size: var(--t-small); line-height: 1.5; color: var(--tinta-2); max-width: 22em; }

/* ── Galería ─────────────────────────────────────────────────────────── */
.galeria { padding-bottom: clamp(64px, 8vw, 110px); background: var(--superficie); border-block: 1px solid var(--filete); }
.galeria__head { display: flex; align-items: flex-end; justify-content: space-between; gap: 24px; margin-bottom: 40px; }
.galeria__head > div:first-child { display: grid; gap: 16px; }
.galeria__btns { display: flex; gap: 8px; }
.redondo {
  width: 52px; height: 52px; border-radius: 50%; display: grid; place-items: center;
  border: 1.5px solid var(--filete); background: var(--superficie); color: var(--tinta); cursor: pointer;
  transition: background-color .2s, border-color .2s;
}
.redondo:hover { border-color: var(--tinta); }
.redondo svg { width: 22px; height: 22px; }
.riel {
  display: flex; gap: 28px; overflow-x: auto; overscroll-behavior-x: contain;
  scroll-snap-type: x mandatory; scrollbar-width: none;
  padding: 12px max(var(--gutter), calc((100vw - var(--ancho)) / 2 + var(--gutter))) 56px;
  scroll-padding-inline: max(var(--gutter), calc((100vw - var(--ancho)) / 2 + var(--gutter)));
}
.riel::-webkit-scrollbar { display: none; }
.riel figure { margin: 0; scroll-snap-align: start; display: grid; gap: 18px; justify-items: center; flex: none; }
.riel .phone { --w: 236px; --sombra-cel: 0 30px 40px -24px rgb(13 42 27 / .4); }
.riel figcaption { font-weight: 600; font-size: .95rem; text-align: center; }
.riel figcaption span { display: block; font-weight: 400; color: var(--tinta-2); font-size: var(--t-small); }

/* ── Para el parque (bloque verde profundo) ──────────────────────────── */
.parque {
  color: #fff; overflow: clip;
  padding-block: clamp(80px, 10vw, 140px);
  background:
    radial-gradient(60% 80% at 85% 30%, rgb(91 181 224 / .14), rgb(91 181 224 / 0) 70%),
    var(--canopia-prof);
}
.parque__grid { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: 56px; align-items: center; }
.parque__txt { display: grid; gap: 20px; }
.parque .h2 em { color: var(--brote); }
.parque .lead { color: rgb(255 255 255 / .8); }
.parque__lista { list-style: none; margin: 12px 0 0; padding: 0; display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 24px 28px; }
.parque__lista li { display: grid; grid-template-columns: 40px minmax(0, 1fr); gap: 14px; }
.parque__lista svg {
  width: 40px; height: 40px; padding: 9px; border-radius: 12px;
  background: rgb(200 230 207 / .14); color: var(--brote);
}
.parque__lista b { display: block; font-weight: 600; }
.parque__lista span { display: block; font-size: var(--t-small); color: rgb(255 255 255 / .72); line-height: 1.5; margin-top: 2px; }
.parque__cels { display: flex; justify-content: center; gap: 0; }
.parque__cels .phone { --sombra-cel: 0 40px 70px -30px rgb(0 0 0 / .6); }
.parque__cels .phone:first-child { transform: rotate(-4deg) translateY(24px); z-index: 1; }
.parque__cels .phone:last-child { transform: rotate(4deg) translateX(-18%); }

/* ── Preguntas ───────────────────────────────────────────────────────── */
.faq { display: grid; grid-template-columns: minmax(0, .8fr) minmax(0, 1.2fr); gap: 48px; align-items: start; }
.faq .sec-head { position: sticky; top: calc(96px + env(safe-area-inset-top, 0px)); }
.faq__lista { display: grid; gap: 12px; }
.faq details {
  border-radius: var(--r-card); background: var(--superficie); border: 1px solid var(--filete);
  box-shadow: var(--sombra-card);
}
.faq summary {
  list-style: none; cursor: pointer;
  display: flex; justify-content: space-between; align-items: center; gap: 16px;
  min-height: 64px; padding: 16px 20px;
  font: 600 1.06rem/1.35 var(--f-ui);
}
.faq summary::-webkit-details-marker { display: none; }
.faq summary::after {
  content: ""; flex: none; width: 10px; height: 10px; margin-right: 4px;
  border: solid var(--canopia); border-width: 0 2px 2px 0;
  transform: rotate(45deg) translateY(-3px); transition: transform .25s var(--ease);
}
.faq details[open] summary::after { transform: rotate(-135deg) translateY(-3px); }
.faq details p { padding: 0 20px 20px; color: var(--tinta-2); max-width: 40em; }

/* ── Cierre ──────────────────────────────────────────────────────────── */
.cta { padding-bottom: clamp(72px, 9vw, 120px); }
.cta__grid {
  position: relative; overflow: clip;
  display: grid; grid-template-columns: minmax(0, 1.3fr) auto; gap: 40px; align-items: end;
  padding: clamp(36px, 6vw, 72px) clamp(24px, 6vw, 80px) 0;
  border-radius: 32px; color: #fff;
  background:
    linear-gradient(110deg, rgb(13 42 27 / .95) 30%, rgb(20 61 39 / .55)),
    url("../assets/iguazu.webp") center 60% / cover no-repeat,
    var(--canopia-prof);
}
.cta__grid > div { display: grid; gap: 18px; padding-bottom: clamp(36px, 6vw, 72px); }
.cta .h2 { font-size: clamp(2.4rem, 1.6rem + 3.4vw, 4.4rem); }
.cta .h2 em { color: var(--brote); }
.cta .lead { color: rgb(255 255 255 / .82); }
.cta .hero__ctas { margin-top: 6px; }
.cta .phone { transform: rotate(5deg) translateY(26%); }

/* ── Pie ─────────────────────────────────────────────────────────────── */
.pie { padding-block: 40px calc(40px + env(safe-area-inset-bottom, 0px)); border-top: 1px solid var(--filete); }
.pie__in { display: flex; flex-wrap: wrap; align-items: center; gap: 12px 32px; color: var(--tinta-2); font-size: var(--t-small); }
.pie .marca { color: var(--tinta); }
.pie .marca b { font-size: 1.35rem; }
.pie__copy { margin-left: auto; }
.pie__legal { display: flex; flex-wrap: wrap; gap: 4px 20px; }
.pie__legal a {
  position: relative; color: var(--tinta-2); text-decoration: none; padding-block: 12px;
  transition: color .25s ease;
}
.pie__legal a::after {
  content: ""; position: absolute; left: 0; right: 0; bottom: 8px; height: 1px;
  background: var(--canopia); transform: scaleX(0); transform-origin: left;
  transition: transform .35s cubic-bezier(.22, 1, .36, 1);
}
.pie__legal a:hover, .pie__legal a:focus-visible { color: var(--canopia); }
.pie__legal a:hover::after, .pie__legal a:focus-visible::after { transform: scaleX(1); }
@media (prefers-reduced-motion: reduce) { .pie__legal a, .pie__legal a::after { transition: none; } }

/* ── Responsive ──────────────────────────────────────────────────────── */
@media (max-width: 1080px) {
  .circuitos__lista, .cifras__in { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .parque__lista { grid-template-columns: minmax(0, 1fr); }
}
@media (max-width: 900px) {
  .hero__grid, .modos__grid, .fila, .parque__grid, .faq, .cta__grid { grid-template-columns: minmax(0, 1fr); }
  .hero__txt { padding-bottom: 0; }
  .hero__escena { height: 600px; max-width: 520px; width: 100%; margin-inline: auto; }
  .pasos { grid-template-columns: minmax(0, 1fr); max-width: 460px; margin-inline: auto; }
  .fila--inv .fila__cels { order: 0; }
  .modos__cel { order: -1; }
  .faq .sec-head { position: static; }
  .cta__grid { justify-items: center; }
  .cta__grid > div { padding-bottom: 0; }
  .cta .phone { --w: 220px !important; transform: rotate(5deg) translateY(40%); }
}
@media (max-width: 560px) {
  .hero { padding-top: calc(100px + env(safe-area-inset-top, 0px)); }
  .hero__escena { height: 500px; }
  .phone--frente { --w: 220px; bottom: 30px; }
  .phone--atras-izq, .phone--atras-der { --w: 170px; bottom: 70px; }
  .phone--atras-izq { left: -6%; }
  .phone--atras-der { right: -6%; }
  .f1 { left: 0; bottom: 150px; }
  .f2 { right: 0; bottom: 250px; }
  .f3 { right: 0; top: 0; }
  .circuitos__lista { grid-template-columns: minmax(0, 1fr); }
  .paso__vis { height: 330px; }
  .tabs { width: 100%; display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .tabs button { justify-content: center; }
  .fila__cels .phone { --w: 230px !important; }
  .fila__cels .phone--chico { --w: 170px !important; right: 0; }
  .parque__cels .phone { --w: 190px !important; }
  .galeria__head { flex-direction: column; align-items: flex-start; }
  .riel .phone { --w: 210px; }
  .pie__copy { margin-left: 0; }
  .cifras__in { gap: 24px 16px; }
  .cifra { padding-left: 14px; }
}