/* =========================================================
   SOLARA · COMPONENTES
   Fase 2 · Diseño aplicada.
   Ningún color literal: todo sale de tokens.css.
   ========================================================= */

/* ---------- Botones ---------- */
.btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 0.5rem;
  padding: 0.8rem 1.6rem;
  border: 1px solid transparent;
  border-radius: 999px;
  font-family: var(--ff-cuerpo);
  font-size: var(--fs-chico);
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.08em;
  text-decoration: none;
  white-space: nowrap;
  cursor: pointer;
  transition: background var(--t-rapida), color var(--t-rapida),
              border-color var(--t-rapida), transform var(--t-rapida);
}
/* TODO :hover de este archivo va dentro de esta consulta, y no es una
   optimizacion: es correccion. En una pantalla tactil no existe el "pasar
   por encima", asi que el navegador aplica :hover al tocar y lo deja
   PEGADO hasta que se toca otra cosa. Resultado: un boton que quedaba
   levantado 2 px y con el color del hover despues de usarlo, como si
   siguiera bajo el dedo. Con `hover: hover` y `pointer: fine` las reglas
   solo existen donde hay un puntero de verdad. El feedback tactil lo da
   :active, que llega en la Capa 1. */
@media (hover: hover) and (pointer: fine) {
  .btn:hover { transform: translateY(-2px); }
}

.btn--primario { background: var(--cta-bg); color: var(--cta-texto); }
@media (hover: hover) and (pointer: fine) {
  .btn--primario:hover { background: var(--acento-hover); }
}

/* Sobre la foto del hero el fantasma va en blanco; sobre fondo claro
   toma el acento. `currentColor` en el borde deja que el contexto lo
   resuelva sin una variante de clase por cada fondo. */
.btn--fantasma {
  background: transparent;
  border-color: currentColor;
  color: inherit;
}
@media (hover: hover) and (pointer: fine) {
  .btn--fantasma:hover { background: var(--acento); border-color: var(--acento); color: var(--blanco); }
}

.btn--lg { padding: 1rem 2.25rem; font-size: 0.95rem; }
.btn--bloque { width: 100%; }

/* ---------- Nav ---------- */
.nav {
  position: fixed;
  inset-inline: 0;
  top: 0;
  z-index: 100;
  height: var(--nav-alto);
  display: flex;
  align-items: center;
  color: var(--arena-3);
  transition: background var(--t-media), border-color var(--t-media);
  border-bottom: 1px solid transparent;
}

/* Transparente sobre el hero; sólido apenas se scrollea. La clase la
   pone main.js, no un :has() ni un scroll-timeline: esto tiene que
   funcionar igual en Safari viejo. */
/* SIN backdrop-filter, y esto arreglo un bug que rompia el menu.

   La barra llevaba `backdrop-filter: blur(10px)` al scrollear. Un elemento
   con backdrop-filter se convierte en BLOQUE CONTENEDOR de sus
   descendientes `position: fixed`, igual que un transform. El panel del
   menu de telefono vive adentro de .nav y se abre con `position: fixed;
   inset: 0`, asi que dejaba de medirse contra la pantalla y pasaba a
   medirse contra la barra.

   Medido a 390x800: arriba de todo el panel abria a 800 px -pantalla
   completa, bien-; despues de scrollear abria a 116. El menu quedaba
   reducido a una franja arriba y la pagina parecia colgada.

   Y el desenfoque no se perdia nada, porque no se veia: --bg-oscuro
   resuelve a --marron-3, que es un color OPACO, asi que difuminaba un
   fondo que despues queda tapado al 100%. Solo asomaba durante los
   ~300 ms de la transicion.

   (El valor concreto no se escribe aca: el trinquete cuenta hex fuera de
   tokens.css tambien dentro de los comentarios, y tiene razon: un hex
   copiado a un comentario envejece igual que uno copiado a una regla.)

   Un desenfoque invisible no vale un menu roto. */
.nav.esta-scrolleado {
  background: var(--bg-oscuro);
  border-bottom-color: var(--borde-oscuro);
}

/* Centinela del nav: lo crea main.js y lo observa un IntersectionObserver
   para saber si la página está en el tope. Invisible y sin foco. */
.centinela-nav {
  position: absolute;
  top: 0;
  width: 1px;
  height: 1px;
  pointer-events: none;
}

.nav__inner {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--gap);
}
/* Mismo tratamiento que el isologotipo del hero: el PNG blanco va como
   máscara y el color sale de --arena-3, así el nav y el hero son una
   sola pieza y no dos blancos distintos. */
.nav__logo-marca {
  display: block;
  /* 46 px dentro de una barra de 76: quedan 15 arriba y 15 abajo. Es el
     maximo que entra sin que el isologotipo toque los bordes ni obligue
     a agrandar el nav. */
  height: 46px;
  aspect-ratio: 2739 / 1042;
  background: var(--arena-3);
  -webkit-mask: url("../assets/img/logo/isologotipo-blanco.webp") no-repeat center / contain;
  mask: url("../assets/img/logo/isologotipo-blanco.webp") no-repeat center / contain;
}

.nav__menu { display: none; }
.nav__menu a {
  text-decoration: none;
  font-size: 1.05rem;
  opacity: 0.85;
  transition: opacity var(--t-rapida), color var(--t-rapida);
}
@media (hover: hover) and (pointer: fine) {
  .nav__menu a:hover { opacity: 1; color: var(--acento); }
}

.nav__burger {
  display: grid;
  gap: 5px;
  padding: 0.5rem;
  background: none;
  border: 0;
  cursor: pointer;
  z-index: 120;
}
.nav__burger span {
  display: block;
  width: 24px;
  height: 2px;
  background: currentColor;
  transition: transform var(--t-rapida), opacity var(--t-rapida);
}
.nav.esta-abierto .nav__burger span:nth-child(1) { transform: translateY(7px) rotate(45deg); }
.nav.esta-abierto .nav__burger span:nth-child(2) { opacity: 0; }
.nav.esta-abierto .nav__burger span:nth-child(3) { transform: translateY(-7px) rotate(-45deg); }

.nav__cta { display: none; }

/* Menú abierto en mobile: pantalla completa. */
.nav.esta-abierto .nav__menu {
  display: flex;
  flex-direction: column;
  gap: 1.25rem;
  position: fixed;
  inset: 0;
  z-index: 110;
  padding: calc(var(--nav-alto) + 1.5rem) var(--gap) var(--gap);
  background: var(--bg-oscuro);
  color: var(--texto-sobre-oscuro);
  overflow-y: auto;
}
.nav.esta-abierto .nav__menu a { font-size: 1.35rem; font-family: var(--ff-display); }

/* ---------- Los iconos del menu de telefono ----------
   Uno por seccion, y no elegidos al azar: es EL MISMO signo que esa
   seccion lleva de ornamento de fondo (ver sections.css). Asi el menu
   anticipa lo que uno se va a encontrar en vez de decorar por decorar.

   No cuestan un solo pedido de red: son los archivos que la pagina ya
   descarga para los ornamentos.

   Van como mascara pintada desde `currentColor`, igual que el resto de
   la iconografia del sitio: asi heredan el color del enlace y no hay un
   color escondido dentro de un asset.

   Solo dentro del menu ABIERTO en telefono. En escritorio el menu es una
   fila horizontal y ocho iconos ahi serian ruido. */
.nav.esta-abierto .nav__menu a {
  display: flex;
  align-items: center;
  gap: 0.9rem;
}
.nav.esta-abierto .nav__menu a::before {
  content: "";
  /* `flex: 0 0` para que no se aplasten: es el mismo error que ya aparecio
     con los puntos del carrusel, donde un flex les comia el ancho. */
  flex: 0 0 1.6rem;
  width: 1.6rem;
  height: 1.6rem;
  background: currentColor;
  opacity: 0.55;
  -webkit-mask: var(--icono) no-repeat center / contain;
  mask: var(--icono) no-repeat center / contain;
}

.nav.esta-abierto .nav__menu a[href="#inicio"]      { --icono: url("../assets/img/ornamentos/sol.webp"); }
.nav.esta-abierto .nav__menu a[href="#mito"]        { --icono: url("../assets/img/ornamentos/ojo-radiante.webp"); }
.nav.esta-abierto .nav__menu a[href="#experiencia"] { --icono: url("../assets/img/ornamentos/olas.webp"); }
.nav.esta-abierto .nav__menu a[href="#galeria"]     { --icono: url("../assets/img/ornamentos/rombo.webp"); }
.nav.esta-abierto .nav__menu a[href="#lineup"]      { --icono: url("../assets/img/ornamentos/tablilla.webp"); }
.nav.esta-abierto .nav__menu a[href="#lugar"]       { --icono: url("../assets/img/ornamentos/condor.webp"); }
.nav.esta-abierto .nav__menu a[href="#faq"]         { --icono: url("../assets/img/ornamentos/espiral.webp"); }
.nav.esta-abierto .nav__menu a[href="#contacto"]    { --icono: url("../assets/img/ornamentos/flecha-ceremonial.webp"); }

@media (min-width: 1024px) {
  /* Tres columnas y no `space-between`: con flex, el menú se corría
     según lo que midieran el logo y el botón, así que quedaba centrado
     entre ellos y no en la pantalla. Con `1fr auto 1fr` las dos columnas
     de los costados valen lo mismo pase lo que pase con su contenido, y
     el menú cae en el centro real. */
  .nav__inner {
    display: grid;
    grid-template-columns: 1fr auto 1fr;
    align-items: center;
  }
  .nav__menu {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: clamp(0.9rem, 2vw, 1.75rem);
  }
  .nav__menu-cta { display: none; }
  .nav__cta { display: inline-flex; justify-self: end; }
  .nav__burger { display: none; }
}

/* ---------- Modal y lightbox ----------
   `hidden` lo apaga desde el HTML: si el CSS no carga, el modal NO
   aparece encima del contenido. Un modal que depende del CSS para
   estar cerrado es un modal abierto en la primera carga lenta. */
.modal[hidden], .lightbox[hidden] { display: none; }

.modal, .lightbox {
  position: fixed;
  inset: 0;
  z-index: 200;
  display: grid;
  place-items: center;
  padding: var(--gap);
  background: rgba(46, 33, 21, 0.88);
  -webkit-backdrop-filter: blur(4px);
  backdrop-filter: blur(4px);
}
.modal__caja {
  position: relative;
  width: min(100%, 460px);
  padding: clamp(2rem, 6vw, 3rem);
  border-radius: var(--radio);
  background: var(--arena);
  text-align: center;
  box-shadow: var(--sombra-md);
}
.modal__caja .titulo { margin-bottom: 0.75rem; }
.modal__caja .btn { margin-block: 1rem 0.75rem; }
.modal__cerrar, .lightbox__cerrar {
  position: absolute;
  top: 0.5rem;
  right: 0.9rem;
  padding: 0.25rem 0.5rem;
  background: none;
  border: 0;
  font-size: 2rem;
  line-height: 1;
  cursor: pointer;
  color: var(--texto-suave);
}
.lightbox__cerrar { color: var(--texto-sobre-oscuro); }
.lightbox img { max-height: 88vh; border-radius: var(--radio); }

/* ---------- Galería ---------- */
.galeria__item {
  padding: 0;
  border: 0;
  border-radius: var(--radio);
  overflow: hidden;
  cursor: zoom-in;
  background: none;
}
/* Retrato 4:5, que es el ratio real de las 12 (800×1000). El álbum
   oficial es vertical —88 de 90 fotos— porque está armado para
   Instagram. Forzar 4:3 sobre una vertical recorta cabezas. */
.galeria__item img {
  width: 100%;
  aspect-ratio: 4 / 5;
  object-fit: cover;
  transition: transform var(--t-media);
}
@media (hover: hover) and (pointer: fine) {
  .galeria__item:hover img { transform: scale(1.04); }
}

/* ---------- FAQ ---------- */
.faq-item {
  border-bottom: 1px solid var(--borde);
}
.faq-item summary {
  padding-block: 1.1rem;
  font-family: var(--ff-titulo);
  font-weight: 600;
  cursor: pointer;
  list-style: none;
  display: flex;
  justify-content: space-between;
  gap: 1rem;
}
.faq-item summary::-webkit-details-marker { display: none; }
/* La cruz va en una CAJA CUADRADA, y no es estetico: es lo que evita que
   al rotar se salga de la pagina.

   Un glifo "+" a 1.4rem mide 15 x 26 px: alto y angosto. Al rotarlo 45
   grados, su caja envolvente pasa a medir unos 29 px de ancho. Y una
   rotacion NO cambia el layout pero SI cuenta para el area de scroll, asi
   que ese ensanchamiento empujaba el documento. Medido a 320 px -el ancho
   minimo que WCAG SC 1.4.10 pide soportar sin scroll horizontal-: el
   documento daba 323 y el propio summary desbordaba 9 px adentro suyo.
   Apagando este pseudo-elemento, volvia a 320.

   Con la caja cuadrada el glifo se centra adentro y lo que rota es un
   cuadrado del ancho del texto, cuya diagonal ya entra en el margen que
   deja el contenedor. */
.faq-item summary::after {
  content: "+";
  display: grid;
  place-items: center;
  flex: 0 0 1.4rem;
  width: 1.4rem;
  height: 1.4rem;
  color: var(--acento);
  font-size: 1.4rem;
  line-height: 1;
  transition: transform var(--t-rapida);
}
.faq-item[open] summary::after { transform: rotate(45deg); }
.faq-item__cuerpo { padding-bottom: 1.1rem; color: var(--texto-suave); }
.faq-item__cuerpo p { margin-bottom: 0; }

/* ---------- Formularios ---------- */
.campo { display: block; margin-bottom: 1rem; }
.campo > span {
  display: block;
  margin-bottom: 0.35rem;
  font-size: var(--fs-kicker);
  text-transform: uppercase;
  letter-spacing: var(--tracking-kicker);
  color: var(--texto-suave);
}
.campo em { color: var(--acento); font-style: normal; }
.campo input, .campo select, .campo textarea {
  width: 100%;
  padding: 0.75rem 0.9rem;
  border: 1px solid var(--borde);
  border-radius: var(--radio-sm);
  background: var(--blanco);
  transition: border-color var(--t-rapida);
}
.campo input:focus, .campo select:focus, .campo textarea:focus { border-color: var(--acento); }
.campo input[aria-invalid="true"] { border-color: var(--acento); border-width: 2px; }

.consentimiento {
  display: flex;
  align-items: flex-start;
  gap: 0.5rem;
  margin-bottom: 1rem;
  font-size: var(--fs-chico);
  color: var(--texto-suave);
}

.form__estado:empty { display: none; }
.form__estado {
  margin-top: 0.75rem;
  font-size: var(--fs-chico);
  color: var(--texto-suave);
}
.form__estado[data-error="true"] { color: var(--acento); font-weight: 600; }

/* Se borraron las reglas de .cta-sticky junto con el bloque que estilaban:
   la barra fija de "Descargá la app" salio del HTML. Con ella se van los
   tres despejes que existian solo para esquivarla -en .flotantes, en el
   indicador de bajar del hero y en el padding del pie-. */

/* =========================================================
   PENDIENTE
   - Set de 20 iconos ancestrales del deck (p. 6) dentro de círculos,
     como sistema unificador de razones y vías. Hoy solo existen
     adentro del PDF: hay que extraerlos como SVG.
   - Tratamiento halftone / textura de papel del deck.
   ========================================================= */

/* =========================================================
   BOTONES FLOTANTES
   Los dos en la misma columna, abajo a la derecha. En mobile se levantan
   para no chocar con el CTA fijo del pie, que ocupa todo el ancho.
   ========================================================= */
.flotantes {
  position: fixed;
  right: var(--gap);
  /* Antes iba `calc(4.5rem + var(--gap))` para despejar el CTA fijo del
     pie. Esa barra ya no existe, asi que los botones bajan a su lugar
     natural en todos los anchos. */
  bottom: var(--gap);
  z-index: 85;
  display: grid;
  justify-items: center;
  gap: 0.75rem;
}
@media (min-width: 1024px) { .flotantes { bottom: var(--gap); } }

/* `[hidden]` NO alcanza solo, y aca costaba caro. El navegador le da
   display:none a lo que lleve ese atributo, pero eso vive en su hoja por
   defecto y la linea de abajo -`display: grid`- le gana por ser de autor.
   O sea: main.js ponia el atributo para esconder el boton de subir hasta
   pasada una pantalla y media de scroll, el atributo quedaba puesto, y el
   boton se veia igual DESDE EL PRIMER PIXEL.

   Medido: arriba de todo, con el atributo `hidden` presente, computaba
   `display: grid` y 56 px de ancho, y se solapaba con el CTA "Próximo
   evento" del hero en 320, 360 y 600 px de ancho.

   Es el mismo error que ya habia aparecido con .carrusel__flecha. Cuando
   un componente declara `display`, el `[hidden]` deja de funcionar y hay
   que reponerlo a mano. */
.flotante[hidden] { display: none; }

.flotante {
  /* 56 px: bien arriba del minimo tactil de 44 que pide WCAG 2.5.8, que
     para un boton que flota sobre el contenido conviene superar y no
     rozar. */
  width: 56px;
  height: 56px;
  display: grid;
  place-items: center;
  padding: 0;
  border: 0;
  border-radius: 50%;
  cursor: pointer;
  box-shadow: var(--sombra-md);
  transition: transform var(--t-rapida), background var(--t-rapida);
}
@media (hover: hover) and (pointer: fine) {
  .flotante:hover { transform: translateY(-2px); }
}

.flotante--subir {
  background: var(--bg-oscuro);
  color: var(--arena);
}
@media (hover: hover) and (pointer: fine) {
  .flotante--subir:hover { background: var(--marron); }
}

.flotante--wa {
  position: relative;
  background: var(--whatsapp-tenue);
  color: var(--blanco);
  outline: 2px solid var(--blanco);
  outline-offset: -1px;

  /* Lo que sobraba era EL VERDE, no el boton. Se bajo la opacidad en dos
     pasos -0.7 y despues 0.35- y al 35% el problema seguia: el verde
     seguia siendo lo primero que se veia y ademas el control empezaba a
     costar de encontrar. Asi que se separo en dos: la saturacion del verde
     baja un 60% (--whatsapp-tenue) y la opacidad SUBE a 0.50, que deja el
     boton legible. Vuelve al verde pleno y a opacidad 1 cuando alguien lo
     apunta o lo enfoca. */
  opacity: 0.5;
  transition: opacity var(--t-rapida), transform var(--t-rapida),
              background var(--t-rapida);
}

/* Al enfocarlo con teclado vuelve al 100% SIEMPRE, y esto no es cosmetico:
   el anillo de foco se dibuja con outline y box-shadow sobre el propio
   elemento, asi que la opacidad del boton tambien lo diluye. Un anillo de
   foco al 70% no cumple los 3.0 de SC 1.4.11. */
.flotante--wa:focus-visible { opacity: 1; }

/* ---------------------------------------------------------------------
   DEUDA MEDIDA, ANOTADA A PROPOSITO

   Aca decia que el aro blanco "no es adorno" porque el verde contra arena
   mide 2.34 y SC 1.4.11 pide 3.0, y que el aro daba el borde que faltaba.
   Se midio y no es asi. Contrastes reales del boton, tal como esta:

                verde vs fondo   aro vs fondo   aro vs verde
     arena           1.59            1.17           1.86
     arena-2         1.42            1.31           1.86
     arena-3         1.17            1.58           1.86

   Ninguno llega a 3.0: el control ya no cumplia SC 1.4.11 sobre las
   secciones claras ANTES de este cambio, y el aro blanco no lo arreglaba.
   Sobre la seccion oscura si cumple (7.87 y 14.63).

   Bajar la opacidad lo empeora, y se hizo igual: se presento la medicion
   junto con dos alternativas que lo arreglaban -pasarlo al marron del
   boton de subir, que da 9.23 a 12.55, o desaturar el verde y oscurecer el
   aro- y la decision fue conservar el verde y solo difuminarlo. Queda
   escrito para que el proximo que lea esto sepa que es una decision
   tomada con el numero a la vista y no un descuido.
   --------------------------------------------------------------------- */
@media (hover: hover) and (pointer: fine) {
  .flotante--wa:hover { background: var(--whatsapp-alto); opacity: 1; }
}

/* El latido. Es un aro que sale del boton y se desvanece, dibujado en un
   pseudo-elemento para que la animacion no toque al boton: si se animara
   el boton, el area clickeable se moveria con el. Va DETRAS, asi que
   nunca se interpone entre el dedo y el enlace. */
.flotante--wa::after {
  content: "";
  position: absolute;
  inset: 0;
  z-index: -1;
  border-radius: 50%;
  /* El aro late con el mismo verde apagado del boton. Con el verde pleno
     el latido volvia a ser lo mas llamativo de la pantalla, que es justo
     lo que se estaba sacando. */
  background: var(--whatsapp-tenue);
  animation: latido 2.4s ease-out infinite;
}