/* ==========================================================================
   Chile Adventure Pro — Portada dinámica y captura de leads (13-08-2026)
   Se carga solo donde hace falta: portada, cuestionario y páginas con
   formularios de captura.
   ========================================================================== */

/* --- Titular rotativo -----------------------------------------------------
   El verbo va en la misma grotesca que el resto del titular: como serif se
   leia como un elemento ajeno pegado encima.

   Se resuelve con animaciones, no con transiciones por clase. Una animacion
   arranca sola en cuanto el elemento entra al DOM y `both` garantiza el
   estado final: no depende de requestAnimationFrame ni de reflows forzados,
   que era lo que dejaba la palabra invisible cuando la pestana no estaba
   compositando. Dos capas cruzadas aseguran que la linea nunca quede vacia.
   -------------------------------------------------------------------------- */
.verbo {
  display: inline-block;
  position: relative;
  color: var(--lava-hero);
  min-width: 7ch;
}
.verbo-capa { display: inline-block; white-space: nowrap; }
.verbo-capa.es-saliente {
  position: absolute; left: 0; top: 0;
  pointer-events: none;
}
.verbo-l {
  display: inline-block;
  animation: verboEntra 0.5s var(--ease) both;
  animation-delay: calc(var(--i) * 20ms);
  will-change: opacity, transform, filter;
}
.verbo-capa.es-saliente .verbo-l {
  animation: verboSale 0.42s var(--ease) both;
  animation-delay: calc(var(--i) * 12ms);
}
@keyframes verboEntra {
  from { opacity: 0; transform: translateY(0.42em); filter: blur(9px); }
  to   { opacity: 1; transform: none;               filter: blur(0); }
}
@keyframes verboSale {
  from { opacity: 1; transform: none;                filter: blur(0); }
  to   { opacity: 0; transform: translateY(-0.34em); filter: blur(9px); }
}
/* El desenfoque por caracter es caro en gama media: en pantalla chica se
   resuelve solo con desplazamiento y opacidad. */
@media (max-width: 860px) {
  @keyframes verboEntra {
    from { opacity: 0; transform: translateY(0.42em); }
    to   { opacity: 1; transform: none; }
  }
  @keyframes verboSale {
    from { opacity: 1; transform: none; }
    to   { opacity: 0; transform: translateY(-0.34em); }
  }
}
@media (prefers-reduced-motion: reduce) {
  .verbo-l, .verbo-capa.es-saliente .verbo-l { animation: none; opacity: 1; transform: none; filter: none; }
}

/* --- Explorador por elemento ---------------------------------------------- */
/* Medallones en vez de pastillas: un disco con el icono, el nombre debajo y
   el conteo en mono. El relleno de marca y el aro son pseudoelementos que
   escalan, no un `background-color` que cambia: asi el color entra creciendo
   desde el centro y la animacion se queda en transform y opacity.          */
.elem-tabs {
  display: flex; flex-wrap: wrap; gap: 0.4rem 1.1rem;
  margin-bottom: 1.8rem; padding-block: 0.4rem 0.6rem;
}
.elem-med {
  display: grid; justify-items: center; gap: 0.55rem;
  width: 92px; flex: 0 0 auto;
  background: none; border: 0; padding: 0; text-align: center; cursor: pointer;
}
.elem-disco {
  position: relative; display: grid; place-items: center;
  width: 66px; height: 66px; border-radius: 50%;
  background: var(--surface); border: 1px solid var(--line);
  transition: transform 0.25s var(--ease), border-color 0.2s var(--ease);
}
.elem-disco::before, .elem-disco::after {
  content: ""; position: absolute; border-radius: 50%; pointer-events: none;
}
/* Relleno de marca: crece desde el centro al seleccionar. */
.elem-disco::before {
  inset: -1px; background: var(--brand);
  opacity: 0; transform: scale(0.55);
  transition: transform 0.2s var(--ease), opacity 0.16s linear;
}
/* Aro exterior, como una curva de nivel: el eco que confirma la eleccion. */
.elem-disco::after {
  inset: -6px; border: 1px solid color-mix(in srgb, var(--brand) 42%, transparent);
  opacity: 0; transform: scale(0.82);
  transition: transform 0.24s var(--ease), opacity 0.18s ease-out;
}
.elem-ico {
  position: relative; z-index: 1; width: 27px; height: 27px;
  /* El grosor lo aportan .icon / .icon-sm, y aqui no se usa ninguna de las
     dos: hay que repetirlo o el trazo cae al 1 por defecto del SVG.       */
  stroke-width: 1.5;
  color: var(--text-2); transition: color 0.18s var(--ease);
}
.elem-nombre {
  font-size: 0.8rem; font-weight: 500; line-height: 1.15; color: var(--text-2);
  transition: color 0.2s var(--ease);
}
.elem-n {
  font-style: normal; font-family: var(--font-label); font-variant-numeric: tabular-nums; font-size: 0.62rem;
  letter-spacing: 0.07em; color: var(--text-3);
  font-variant-numeric: tabular-nums; margin-top: -0.3rem;
  transition: color 0.2s var(--ease);
}

/* Con puntero el medallon se levanta y asoma el aro a media opacidad: es un
   ensayo de la seleccion, no un adorno. En tactil no aplica y no se queda
   ningun medallon "pegado" en estado hover tras el toque.                  */
@media (hover: hover) {
  .elem-med:hover .elem-disco { transform: translateY(-3px); border-color: var(--line-strong); }
  .elem-med:hover .elem-disco::after { opacity: 0.5; transform: scale(1); }
  .elem-med:hover .elem-ico,
  .elem-med:hover .elem-nombre { color: var(--text); }
}

/* El foco va sobre el disco, no sobre la caja del boton, para que el contorno
   siga la forma redonda. Mismo token que el resto del sitio.               */
.elem-med:focus-visible { outline: 0; }
.elem-med:focus-visible .elem-disco { outline: 2px solid var(--lava); outline-offset: 3px; }

.elem-med.is-on .elem-disco { border-color: var(--brand); }
.elem-med.is-on .elem-disco::before {
  opacity: 1; transform: scale(1);
  transition: transform 0.34s var(--ease), opacity 0.18s linear;
}
.elem-med.is-on .elem-disco::after {
  opacity: 1; transform: scale(1);
  transition: transform 0.44s var(--ease) 0.06s, opacity 0.3s ease-out 0.06s;
}
.elem-med.is-on .elem-ico {
  color: var(--bone);
  animation: elemAsienta 0.38s cubic-bezier(0.34, 1.56, 0.64, 1) both;
}
.elem-med.is-on .elem-nombre { color: var(--text); font-weight: 600; }
.elem-med.is-on .elem-n { color: var(--text-2); }

/* El rebote se reserva al icono, que es la pieza mas chica: en una superficie
   grande el sobrepaso se ve barato.                                        */
@keyframes elemAsienta {
  0%   { transform: scale(0.82); }
  55%  { transform: scale(1.08); }
  100% { transform: scale(1); }
}

/* "Destacadas" se probo pintada con el rojo de marca para avisar que cambia de
   modo y no de terreno. Se descarto: es el filtro activo al cargar, asi que la
   pagina abria con un disco rojo que se lee como alerta —en este sistema el
   rojo es accion y cupo escaso— y era el objeto mas saturado de la pantalla.
   Que no es un terreno ya lo dicen el icono (una medalla entre paisajes) y el
   rotulo; el verde deja un solo lenguaje: disco lleno = filtro puesto.      */

/* La regla global de styles.css ya aplasta las duraciones, pero el `both` del
   keyframe dejaria el icono congelado en el fotograma de scale(.82). */
@media (prefers-reduced-motion: reduce) {
  .elem-disco, .elem-disco::before, .elem-disco::after,
  .elem-ico, .elem-nombre, .elem-n { transition: none; animation: none; }
  .elem-disco::before, .elem-disco::after { transform: none; }
  .elem-med:hover .elem-disco { transform: none; }
}
#elem-grid { transition: opacity 0.18s var(--ease); }
.elem-pie { display: flex; align-items: center; justify-content: space-between; gap: 1rem; flex-wrap: wrap; margin-top: 1.6rem; }
.elem-pie span { font-family: var(--font-label); font-variant-numeric: tabular-nums; font-size: 0.7rem; letter-spacing: 0.06em; color: var(--text-3); text-transform: uppercase; }

/* --- Carrusel de reseñas ---------------------------------------------------- */
.carrusel { overflow: hidden; }
.carrusel-pista { display: flex; gap: 20px; transition: transform 0.55s var(--ease); }
.carrusel-pista > * { flex: 0 0 calc((100% - 40px) / 3); }
.carrusel-ctrl { display: flex; gap: 0.5rem; }
.carrusel-ctrl button {
  width: 40px; height: 40px; border-radius: 50%;
  border: 1px solid var(--line-strong); background: var(--surface);
  display: grid; place-items: center; color: var(--text-2);
  transition: background 0.2s var(--ease), color 0.2s var(--ease), border-color 0.2s var(--ease);
}
.carrusel-ctrl button:hover { background: var(--brand); border-color: var(--brand); color: var(--bone); }

/* --- Próximas salidas --------------------------------------------------------
   Riel horizontal con scroll nativo y anclaje: funciona con dedo, rueda y
   teclado (el riel recibe foco), y las flechas solo llaman a scrollBy. */
.salidas[hidden] { display: none; }
.salidas-riel {
  display: flex; gap: 20px; overflow-x: auto; overscroll-behavior-x: contain;
  scroll-snap-type: x mandatory; scrollbar-width: none;
  /* Respiro arriba y abajo para que el levante del hover y la sombra no se corten. */
  padding: 0.5rem 0 1.4rem;
}
.salidas-riel::-webkit-scrollbar { display: none; }
.salidas-riel:focus-visible { outline: 2px solid var(--brand); outline-offset: 4px; border-radius: var(--r); }
.carrusel-ctrl button:disabled { opacity: 0.35; cursor: default; pointer-events: none; }

.salida {
  flex: 0 0 calc((100% - 60px) / 4); min-width: 230px; scroll-snap-align: start;
  display: flex; flex-direction: column; text-decoration: none; color: inherit;
  background: var(--surface); border-radius: var(--r-lg); overflow: hidden;
  box-shadow: var(--shadow-sm);
  transition: transform 0.4s var(--ease), box-shadow 0.4s var(--ease);
}
.salida:hover { transform: translateY(-4px); box-shadow: var(--shadow-lg); }
.salida-media { position: relative; display: block; aspect-ratio: 4 / 3; overflow: hidden; background: var(--forest-800); }
.salida-media img { width: 100%; height: 100%; object-fit: cover; transition: transform 0.7s var(--ease); }
.salida:hover .salida-media img { transform: scale(1.06); }
.salida-fecha {
  position: absolute; top: 0.85rem; left: 0.85rem;
  background: var(--lava); color: #fff;
  font-family: var(--font-label); font-variant-numeric: tabular-nums; font-weight: 600;
  font-size: 0.68rem; letter-spacing: 0.1em; text-transform: uppercase;
  padding: 0.38rem 0.75rem; border-radius: 999px;
}
.salida-body { display: flex; flex-direction: column; padding: 1.05rem 1.2rem 1.25rem; flex: 1; }
.salida-loc { display: flex; align-items: center; gap: 0.3rem; font-size: 0.76rem; color: var(--text-3); margin-bottom: 0.45rem; }
.salida h3 { font-size: 1.08rem; line-height: 1.25; margin-bottom: 0; }
.salida .post-ir { margin-top: auto; padding-top: 0.9rem; }
.salida:hover .post-ir { gap: 0.6rem; }

/* --- Guía descargable ------------------------------------------------------- */
.guia {
  display: grid; grid-template-columns: 1.1fr 1fr; gap: 2.6rem; align-items: center;
  background: var(--surface-2); border: 1px solid var(--line);
  border-radius: var(--r-xl); padding: 2.6rem 2.8rem;
}
.guia h2 { font-size: var(--step-2); margin: 0.5rem 0 0.7rem; }
.guia-texto p { color: var(--text-2); }
.guia-lista { list-style: none; margin: 1.2rem 0 0; padding: 0; display: grid; gap: 0.5rem; }
.guia-lista li { display: flex; align-items: center; gap: 0.5rem; font-size: 0.88rem; color: var(--text-2); }
.guia-lista svg { color: #1B6B46; flex: 0 0 auto; }

/* ==========================================================================
   FORMULARIOS DE CAPTURA
   ========================================================================== */
.lead {
  background: var(--surface); border: 1px solid var(--line);
  border-radius: var(--r-lg); padding: 1.5rem; box-shadow: var(--shadow-sm);
}
.lead-cabeza { display: flex; gap: 0.85rem; align-items: flex-start; margin-bottom: 1.2rem; }
.lead-icono {
  width: 40px; height: 40px; border-radius: 50%; flex: 0 0 auto;
  background: rgba(216, 48, 24, 0.09); color: var(--lava);
  display: grid; place-items: center;
}
.lead-cabeza b { display: block; font-size: 1rem; letter-spacing: -0.014em; margin-bottom: 0.2rem; }
.lead-cabeza span { font-size: 0.85rem; color: var(--text-2); line-height: 1.5; }
.lead-campos { display: grid; gap: 0.7rem; margin-bottom: 1rem; }
.lead-campo label {
  display: block; font-family: var(--font-label); font-variant-numeric: tabular-nums; font-size: 0.62rem;
  letter-spacing: 0.1em; text-transform: uppercase; color: var(--text-3); margin-bottom: 0.3rem;
}
.lead-campo label em { font-style: normal; text-transform: none; letter-spacing: 0; opacity: 0.75; }
.lead-campo input {
  width: 100%; padding: 0.7rem 0.95rem; font-size: 0.9rem; font-family: var(--font-sans);
  border: 1px solid var(--line); border-radius: var(--r-sm);
  background: var(--surface-2); color: var(--text);
  transition: border-color 0.2s var(--ease), background 0.2s var(--ease);
}
.lead-campo input:focus { outline: none; border-color: var(--brand); background: var(--surface); }
.lead-legal { font-size: 0.68rem; color: var(--text-3); margin: 0.8rem 0 0; line-height: 1.5; text-align: center; }
.lead-legal a { color: var(--text-2); text-decoration: underline; text-underline-offset: 2px; }

/* Variante compacta, para el planificador */
.lead-compacto { padding: 1.1rem; margin-top: 1.2rem; box-shadow: none; background: var(--surface-2); }
.lead-compacto .lead-cabeza { margin-bottom: 0.9rem; }
.lead-compacto .lead-icono { width: 32px; height: 32px; }
.lead-compacto .lead-cabeza b { font-size: 0.9rem; }
.lead-compacto .lead-cabeza span { font-size: 0.79rem; }

/* Variante en línea, para el boletín sobre fondo oscuro */
.lead-inline { background: none; border: 0; box-shadow: none; padding: 0; }
.lead-inline .lead-cabeza { display: none; }
.lead-inline .lead-campos { margin-bottom: 0.7rem; }
.lead-inline .lead-campo label { color: rgba(246, 243, 236, 0.6); }
.lead-inline .lead-campo input {
  background: rgba(246, 243, 236, 0.08); border-color: rgba(246, 243, 236, 0.28);
  color: var(--bone); min-width: 260px;
}
.lead-inline .lead-campo input::placeholder { color: rgba(246, 243, 236, 0.45); }
.lead-inline .lead-legal { color: rgba(246, 243, 236, 0.5); text-align: left; }
.lead-inline .lead-legal a { color: rgba(246, 243, 236, 0.75); }
.lead-inline .lead-ok b { color: var(--bone); }
.lead-inline .lead-ok-detalle, .lead-inline .lead-ok-contador { color: rgba(246, 243, 236, 0.6); }
.lead-inline .lead-ok-detalle code { background: rgba(246, 243, 236, 0.14); color: var(--bone); }

/* Confirmación */
.lead-ok { text-align: center; padding: 0.6rem 0; animation: fadeUp 0.4s var(--ease); }
.lead-ok-icono {
  width: 46px; height: 46px; border-radius: 50%; margin: 0 auto 0.8rem;
  background: rgba(27, 107, 70, 0.12); color: #1B6B46; display: grid; place-items: center;
}
.lead-ok b { display: block; font-size: 1rem; margin-bottom: 0.5rem; }
.lead-ok-detalle { display: block; font-size: 0.78rem; color: var(--text-2); line-height: 1.55; max-width: 44ch; margin: 0 auto; }
.lead-ok-detalle code { font-family: var(--font-label); font-variant-numeric: tabular-nums; font-size: 0.72rem; background: var(--sand); padding: 0.1rem 0.35rem; border-radius: 4px; }
.lead-ok-contador {
  display: block; margin-top: 0.9rem;
  font-family: var(--font-label); font-variant-numeric: tabular-nums; font-size: 0.62rem; letter-spacing: 0.1em;
  text-transform: uppercase; color: var(--text-3);
}

/* Modal */
.lead-modal { position: fixed; inset: 0; z-index: 200; display: grid; place-items: center; padding: 1.5rem; }
.lead-modal-fondo {
  position: absolute; inset: 0; background: rgba(4, 18, 11, 0.6);
  backdrop-filter: blur(4px); opacity: 0; transition: opacity 0.26s var(--ease);
}
.lead-modal.is-in .lead-modal-fondo { opacity: 1; }
.lead-modal-caja {
  position: relative; width: min(440px, 100%);
  opacity: 0; transform: scale(0.95) translateY(12px);
  transition: opacity 0.26s var(--ease), transform 0.26s var(--ease);
}
.lead-modal.is-in .lead-modal-caja { opacity: 1; transform: none; }
.lead-modal-x {
  position: absolute; top: -12px; right: -12px; z-index: 2;
  width: 34px; height: 34px; border-radius: 50%;
  background: var(--surface); border: 1px solid var(--line);
  display: grid; place-items: center; color: var(--text-2); box-shadow: var(--shadow-sm);
}
.lead-modal-x:hover { color: var(--lava); }

/* --- Responsive ------------------------------------------------------------- */
@media (max-width: 1080px) {
  .carrusel-pista > * { flex: 0 0 calc((100% - 20px) / 2); }
  .salida { flex-basis: calc((100% - 40px) / 3); }
  .guia { grid-template-columns: 1fr; gap: 1.8rem; padding: 2rem; }
}
@media (max-width: 860px) {
  .carrusel-pista > * { flex: 0 0 100%; }
  .salida { flex-basis: calc((100% - 20px) / 2); }
  .lead-inline .lead-campo input { min-width: 0; }
}
@media (max-width: 620px) {
  /* Una tarjeta y un borde de la siguiente: la señal de que hay más. */
  .salida { flex-basis: 78%; }
  /* Seis medallones envolviendo dejarian tres filas de bolas en 375 px. Se
     convierten en riel horizontal, igual que la franja de proximas salidas.
     El margen negativo sangra hasta el borde de la pantalla y el padding lo
     compensa, para que el primero siga alineado con el titulo; el medallon
     cortado a la derecha es la senal de que hay mas.                       */
  .elem-tabs {
    flex-wrap: nowrap; overflow-x: auto; overscroll-behavior-x: contain;
    scroll-snap-type: x proximity; gap: 0.85rem;
    margin-inline: -1.25rem; padding-inline: 1.25rem;
    /* `overflow-x: auto` obliga a `overflow-y: auto`, asi que el riel recorta
       arriba. El respiro tiene que cubrir el aro (6 px) mas el levante del
       hover (3 px), o el anillo del medallon activo sale cortado.          */
    padding-block: 0.75rem 0.7rem;
    scrollbar-width: none;
  }
  .elem-tabs::-webkit-scrollbar { display: none; }
  .elem-med { width: 74px; gap: 0.45rem; scroll-snap-align: start; }
  .elem-disco { width: 56px; height: 56px; }
  .elem-ico { width: 23px; height: 23px; }
  .elem-nombre { font-size: 0.72rem; }
  .elem-pie { flex-direction: column; align-items: stretch; }
  .guia { padding: 1.5rem; }
  .lead { padding: 1.2rem; }
  .lead-modal-x { top: 6px; right: 6px; }
}