/* Efectos de interacción (js/efectos.js y js/main.js): barra de lectura,
   sección activa, entrada de bloques, capas del hero, luz del parque,
   indicador de pestañas, galería arrastrable y preguntas que se despliegan.
   Todo lo que se mueve se apaga con "reducir movimiento" (tokens.css). */

/* ── Nav ─────────────────────────────────────────────────────────────── */
.nav__progreso {
  position: absolute; left: 0; right: 0; bottom: -1px; height: 2px;
  background: var(--canopia); transform-origin: 0 50%; transform: scaleX(0);
  opacity: 0; transition: opacity .3s; pointer-events: none;
}
.nav.is-solid .nav__progreso { opacity: 1; }
.nav__links a { position: relative; transition: opacity .2s; }
.nav__links a::after {
  content: ""; position: absolute; left: 0; right: 0; bottom: -6px; height: 2px; border-radius: 1px;
  background: currentColor; transform: scaleX(0); transform-origin: 0 50%; transition: transform .3s var(--ease);
}
.nav__links a:hover { text-decoration: none; }
.nav__links a:hover::after, .nav__links a[aria-current]::after { transform: scaleX(1); }
.nav__links a[aria-current] { opacity: 1; }
.nav.is-solid .nav__links a[aria-current] { color: var(--canopia); }
@media (max-width: 1100px) { .nav__links { gap: 20px; font-size: .9rem; } }
@media (max-width: 1000px) { .nav__links a[href="#preguntas"] { display: none; } }

/* ── Entrada de bloques ──────────────────────────────────────────────── */
.revelar {
  opacity: 0; transform: translateY(28px);
  transition: opacity .8s var(--ease), transform .8s var(--ease);
  transition-delay: calc(var(--i, 0) * 90ms);
}
.revelar.is-visto { opacity: 1; transform: none; }

/* ── Hero en capas: cada plano se corre distinto con el mouse ────────── */
.hero__escena { --px: 0; --py: 0; }
.hero__escena .phone, .hero__escena .flota { transition: translate .7s cubic-bezier(.2, .7, .2, 1); }
.phone--frente { translate: calc(var(--px) * 16px) calc(var(--py) * 12px); }
.phone--atras-izq, .phone--atras-der { translate: calc(var(--px) * -26px) calc(var(--py) * -16px); }
.hero__escena .flota { translate: calc(var(--px) * 40px) calc(var(--py) * 28px); }
.hero__escena .f3 { translate: calc(var(--px) * 28px) calc(var(--py) * 40px); }

/* brillo que cruza los botones claros al pasar el mouse */
.btn--claro { position: relative; overflow: hidden; isolation: isolate; }
.btn--claro::after {
  content: ""; position: absolute; inset: 0; z-index: -1; pointer-events: none;
  background: linear-gradient(110deg, transparent 25%, rgb(200 230 207 / .9) 50%, transparent 75%);
  transform: translateX(-120%);
}
.btn--claro:hover::after { transform: translateX(120%); transition: transform .9s var(--ease); }

/* ── Parque: luz que sigue al puntero ────────────────────────────────── */
.parque { position: relative; }
.parque::before {
  content: ""; position: absolute; inset: 0; pointer-events: none;
  background: radial-gradient(520px circle at var(--mx, 80%) var(--my, 30%), rgb(200 230 207 / .11), transparent 65%);
}
.parque > .wrap { position: relative; }
.parque__cels .phone { transition: transform .5s var(--ease); }
.parque__cels:hover .phone:first-child { transform: rotate(-6deg) translate(-12px, 16px); }
.parque__cels:hover .phone:last-child { transform: rotate(6deg) translateX(-12%); }

/* ── Pestañas de tipo de ruta: indicador que se desliza ──────────────── */
.tabs { position: relative; isolation: isolate; }
.tabs__ind {
  position: absolute; z-index: -1; left: 0; top: 0;
  width: var(--w, 0); height: var(--h, 0); transform: translate(var(--x, 0), var(--y, 0));
  border-radius: 10px; background: var(--canopia);
  transition: transform .4s var(--ease), width .4s var(--ease), height .4s var(--ease);
}
.tabs.con-ind button[aria-selected="true"] { background: transparent; }
.tabs.con-ind button:not([aria-selected="true"]):hover { background: rgb(242 237 228 / .7); }
.panel:not([hidden]) { animation: panel-in .45s var(--ease); }
@keyframes panel-in { from { opacity: 0; transform: translateY(8px); } }
.f4.is-cambio .flota__ico { animation: pop .5s var(--ease); }
@keyframes pop { 0% { transform: scale(.6) rotate(-12deg); } 60% { transform: scale(1.12); } }

/* ── Galería: arrastrable con el mouse y con barra de avance ─────────── */
.riel { cursor: grab; }
.riel.is-arrastrando { cursor: grabbing; scroll-snap-type: none; user-select: none; }
.riel.is-arrastrando img { pointer-events: none; }
.riel .phone { transition: transform .4s var(--ease); }
.riel figure:hover .phone { transform: translateY(-8px) rotate(-1deg); }
.riel__avance {
  max-width: var(--ancho); margin: -24px auto 0; padding-inline: var(--gutter);
}
.riel__avance div { height: 3px; border-radius: 2px; background: var(--filete); overflow: hidden; }
.riel__avance i { display: block; height: 100%; width: 100%; background: var(--canopia); transform-origin: 0 50%; transform: scaleX(var(--f, 0)); transition: transform .15s linear; }
.redondo:disabled { opacity: .35; cursor: default; }
.redondo:disabled:hover { border-color: var(--filete); }

/* ── Pasos: el número late al pasar ──────────────────────────────────── */
.paso__n { transition: transform .3s var(--ease), background-color .3s; }
.paso:hover .paso__n { transform: scale(1.12); background: var(--canopia-prof); }

/* ── Preguntas: se abren con altura animada donde el navegador lo permite ── */
@supports (interpolate-size: allow-keywords) {
  .faq { interpolate-size: allow-keywords; }
  .faq details::details-content {
    block-size: 0; overflow: hidden;
    transition: block-size .35s var(--ease), content-visibility .35s allow-discrete;
  }
  .faq details[open]::details-content { block-size: auto; }
}
.faq details { transition: border-color .2s, box-shadow .2s; }
.faq details:hover { border-color: #D3CABB; }
.faq details[open] { box-shadow: var(--sombra-flot); }