/**
 * ==========================================================================
 * SONKO AYAHUASCA — HOJA DE ESTILOS PRINCIPAL (PRODUCTION-READY)
 * Layout parallax de dos capas (fondo / texto), CSS Custom Properties,
 * Flexbox + Grid, tipografia fluida y respeto de preferencias de usuario.
 *
 * Indice:
 *   1. TOKENS        - paleta, tipografia, espaciado, motion
 *   2. UTILIDADES     - helpers reutilizables (sr-only, skip-link, container)
 *   3. BASE           - elementos globales (body, headings, links)
 *   4. NAV-PRINCIPAL  - cabecera de navegacion y menu movil
 *   5. HERO           - primer viewport con logo y marca
 *   6. MEDIA-BAND     - bandas de imagen puramente decorativas
 *   7. CONTENT-SECTION - bloques de texto sobre fondo negro
 *   8. RETREAT-LIST   - listado de proximos retiros
 *   9. BTN            - boton "Reservar"
 *   10. SITE-FOOTER   - pie de contacto sobre imagen de raices
 *   11. PARALLAX      - mecanica de capas (fondo vs. contenido)
 *   12. REVEAL        - animacion de aparicion al hacer scroll
 *   13. ACCESIBILIDAD - focus-visible y prefers-reduced-motion
 * ==========================================================================
 */

/*------------------------------------*\
  #TOKENS
\*------------------------------------*/

:root {
  /* Color: la marca es intencionadamente oscura (selva nocturna + dorado),
     por lo que no se ofrece variante clara: invertir a fondo blanco
     rompería la identidad visual. Sí se respeta prefers-reduced-motion
     (ver #ACCESIBILIDAD), que es la preferencia relevante en este layout. */
  --color-bg: #000000;
  --color-bg-elevated: #0a0906;
  --color-accent: #f8efd6;
  --color-accent-soft: rgb(248 239 214 / 82%);
  --color-accent-dim: rgb(248 239 214 / 60%);
  --color-accent-faint: rgb(248 239 214 / 28%);
  --color-scrim-supastrong: rgb(0 0 0 / 88%);
  --color-scrim-strong: rgb(0 0 0 / 55%);
  --color-scrim-soft: rgb(0 0 0 / 30%);

  /* Tipografia */
  --font-display: "Cormorant Garamond", "Iowan Old Style", Georgia, serif;
  --font-body: "Jost", "Segoe UI", system-ui, sans-serif;

  --fs-nav: clamp(1rem, 0.6rem + 0.6vw, 1.1rem);
  --fs-brand: clamp(2.75rem, 1.9rem + 4vw, 5.5rem);
  --fs-h2: clamp(2.4rem, 1.5rem + 1.8vw, 3.1rem);
  --fs-h3: clamp(1.5rem, 1.05rem + 0.5vw, 1.5rem);
  --fs-body: clamp(1.2rem, 0.94rem + 0.3vw, 1.15rem);
  --fs-small: clamp(0.82rem, 0.78rem + 0.2vw, 0.95rem);

  --lh-tight: 1.1;
  --lh-body: 1.7;
  --ls-caps: 0.14em;

  /* Espaciado (escala fluida) */
  --space-3xs: 0.375rem;
  --space-2xs: 0.75rem;
  --space-xs: 1.25rem;
  --space-sm: clamp(1.5rem, 1.2rem + 1.2vw, 2.5rem);
  --space-md: clamp(2.5rem, 1.8rem + 2.5vw, 4.5rem);
  --space-lg: clamp(6rem, 2.8rem + 4vw, 7rem);
  --space-xl: clamp(6rem, 4rem + 6vw, 10rem);

  /* Layout */
  --content-max-width: 38rem;
  --page-max-width: 60rem;
  --container-padding: clamp(1.25rem, 4vw, 6rem);
  --media-band-height: clamp(14rem, 10rem + 22vw, 34rem);

  /* Motion */
  --ease-standard: cubic-bezier(0.16, 0.84, 0.44, 1);
  --transition-fast: 0.2s ease;
  --transition-normal: 0.45s var(--ease-standard);
  --reveal-distance: 1.4rem;

  /* Intensidad de la mecanica parallax (ver #PARALLAX): proporciones SIN
     unidad (no px/rem) a proposito. script.js las multiplica por la
     altura real de cada seccion para obtener el desplazamiento en px, asi
     que el recorrido escala solo con cada breakpoint en vez de depender
     de un valor fijo que puede quedarse corto (o sobrar) segun la altura
     de la seccion. Al no llevar unidad tampoco hay riesgo de que una
     herramienta de formateo las reescriba de px a rem y rompa la lectura
     numerica en JS (le paso ya a script.js, en su dia, con --parallax-*
     -amplitude en px). --parallax-bg-scale fija el scale() de la capa de
     imagen: su sangrado ((escala - 1) / 2) es el limite real que
     script.js respeta para el fondo, pase lo que pase con el ratio. */
  --parallax-bg-scale: 1.1;
  --parallax-bg-ratio: 10.03;
  --parallax-content-ratio: .218;
}

/*------------------------------------*\
  #UTILIDADES
\*------------------------------------*/

.sr-only {
  position: absolute;
  width: 0.0625rem;
  height: 0.0625rem;
  padding: 0;
  margin: -0.0625rem;
  overflow: hidden;
  clip: rect(0, 0, 0, 0);
  white-space: nowrap;
  border: 0;
}

.skip-link {
  position: fixed;
  z-index: 100;
  inset-block-start: -3.5rem;
  inset-inline-start: var(--space-2xs);
  padding: var(--space-3xs) var(--space-xs);
  background: var(--color-accent);
  color: #0a0906;
  font-family: var(--font-body);
  font-size: var(--fs-small);
  border-radius: 0.2rem;
  transition: inset-block-start var(--transition-fast);
}

.skip-link:focus {
  inset-block-start: var(--space-2xs);
}

.container {
  width: 100%;
  max-width: var(--page-max-width);
}

/*------------------------------------*\
  #BASE
\*------------------------------------*/

html {
  background-color: var(--color-bg);
  color-scheme: dark;
}

body {
  background-color: var(--color-bg);
  color: var(--color-accent-soft);
  font-family: var(--font-body);
  font-weight: 300;
}

h1,
h2,
h3 {
  font-family: var(--font-display);
  font-weight: 500;
  line-height: var(--lh-tight);
  color: var(--color-accent);
}

p {
  max-width: var(--content-max-width);
}

/*------------------------------------*\
  #NAV-PRINCIPAL
\*------------------------------------*/
.primary-nav {
  z-index: 1000;
  width: 100%;
  display: flex;
  justify-content: center;
  position: relative;
}

.primary-nav__bar {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--space-sm);
  padding-block-start: var(--space-sm);
}

.primary-nav__list {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  column-gap: clamp(1.25rem, 2vw + 1.5rem, 2.75rem);
  row-gap: var(--space-2xs);
}

.primary-nav__link {
  font-family: var(--font-display);
  font-size: var(--fs-nav);
  letter-spacing: var(--ls-caps);
  text-transform: uppercase;
  color: var(--color-accent-soft);
  white-space: nowrap;
}

.primary-nav__link:hover,
.primary-nav__link:focus-visible {
  color: var(--color-accent);
}

.primary-nav__toggle {
  position: absolute;
  z-index: 10000;
  top: 1.3rem;
  right: 1.3rem;
  display: none;
  width: 2.8rem;
  height: 2.8rem;
  align-items: center;
  justify-content: center;
  background: transparent;
  border: 0.0625rem solid var(--color-accent-faint);
  border-radius: 0.2rem;
  cursor: pointer;
}

.primary-nav__toggle-bar {
  position: relative;
  display: block;
  width: 1.1rem;
  height: 0.0625rem;
  background: var(--color-accent);
}

.primary-nav__toggle-bar::before,
.primary-nav__toggle-bar::after {
  content: "";
  position: absolute;
  inset-inline-start: 0;
  width: 100%;
  height: 0.0625rem;
  background: var(--color-accent);
  transition: transform var(--transition-fast);
}

.primary-nav__toggle-bar::before { transform: translateY(-0.375rem); }
.primary-nav__toggle-bar::after  { transform: translateY(0.375rem); }

.primary-nav__toggle[aria-expanded="true"] .primary-nav__toggle-bar::before { transform: translateY(0) rotate(45deg); }
.primary-nav__toggle[aria-expanded="true"] .primary-nav__toggle-bar::after   { transform: translateY(0) rotate(-45deg); }
.primary-nav__toggle[aria-expanded="true"] .primary-nav__toggle-bar { background: transparent; }

/*------------------------------------*\
  #NAV-MOVIL
\*------------------------------------*/
/* Panel independiente del menu de escritorio: permanece oculto y solo se
   muestra al activar el boton burger (ver NavController en script.js), sin
   tocar en ningun momento el `.primary-nav__list` de escritorio. */
.mobile-nav {
  position: fixed;
  top: 0;
  left:0;
  right:0;
  z-index: 9998;
  display: none;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: var(--space-md);
  padding: var(--space-md);
  background-color: var(--color-scrim-supastrong);
}

.mobile-nav--open {
  display: flex;
}

.mobile-nav__list {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: var(--space-md);
  list-style: none;
  
}

.mobile-nav__link {
  font-family: var(--font-display);
  font-size: 1.3rem;
  letter-spacing: var(--ls-caps);
  text-transform: uppercase;
  color: var(--color-accent-soft);
  text-decoration: none;
}

.mobile-nav__link:hover,
.mobile-nav__link:focus-visible {
  color: var(--color-accent);
}

/*------------------------------------*\
  #HERO
\*------------------------------------*/

.hero.home {
  position: relative;
  background-color: var(--color-bg);
  width: 100%;
}

.home .hero__media {
  width: auto;
  height: 100%;
  aspect-ratio: 16/9;
  background-size: cover;
  background-position: center top;
  /* background-image:  linear-gradient(180deg, #000 0%, transparent 25%), url("../img/hero-jungle.png"); */
}



.hero__scrim {
  position: absolute;
  inset: 0;
  background:
    linear-gradient(180deg, var(--color-scrim-soft) 0%, transparent 22%),
    linear-gradient(180deg, var(--color-bg) 0%, transparent 25%);
}

.hero__content {
  position: relative;
  z-index: 1;
  display: flex;
  flex-direction: column;
  align-items: center;
  flex: 1;
  width: 100%;
}

.hero__brand {

  gap: var(--space-2xs);
  padding-block: var(--space-lg);
  text-align: center;
}

.hero__logo {
  width: min(20vw, 32vw);
  height: auto;
}

.hero__brand-name {
  display: flex;
  flex-direction: column;
  align-items: center;
  margin-block-start: var(--space-sm);
  font-family: var(--font-display);
  font-size: var(--fs-brand);
  font-weight: 500;
  line-height: 1;
  letter-spacing: 0.06em;
  color: var(--color-accent);
  text-transform: uppercase;
}
.hero__brand-name p{
  text-align: center;
}

.hero__brand-name small {
  display: block;
  font-size: 0.42em;
  font-weight: 400;
  letter-spacing: 0.5em;
  margin-block-start: var(--space-3xs);
}

/*------------------------------------*\
  #MEDIA-BAND
\*------------------------------------*/

.media-band {
  position: relative;
  overflow: clip;
  background-color: var(--color-bg);
  /* Banda 100% imagen, sin texto encima: sin riesgo de invadir contenido,
     asi que aqui el fondo puede recorrer mas que en #HERO/#SITE-FOOTER
     para que el parallax se note con claridad (queda igualmente acotado
     por el sangrado de --parallax-bg-scale, ver #PARALLAX). */
  --parallax-bg-ratio: 0.045;
}


.media-band__img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}

/*------------------------------------*\
  #CONTENT-SECTION
\*------------------------------------*/

.content-section {
  position: relative;

  padding-block: var(--space-xl) var(--space-lg);
}

.content-section__inner {
  max-width: var(--page-max-width);
  margin-inline: auto;
  padding-inline: var(--container-padding);
}

.content-section__heading {
  font-size: var(--fs-h2);
  text-transform: uppercase;
  letter-spacing: 0.02em;
  margin-block-end: var(--space-sm);
}

.content-section__text {
  font-size: var(--fs-body);
  line-height: var(--lh-body);
  color: var(--color-accent-soft);
}

.content-section__text p {
  margin-block-end: var(--space-2xs);
}

/*------------------------------------*\
  #RETREAT-LIST
\*------------------------------------*/

.retreat-list {
  display: flex;
  flex-direction: column;
  gap: var(--space-md);
  margin-block-start: var(--space-sm);
}

.retreat-list__item {
  display: grid;
  grid-template-columns: auto 1fr;
  column-gap: var(--space-xs);
  align-items: start;
  max-width: 34rem;
}

.retreat-list__icon {
  width: clamp(2.25rem, 1.5rem + 1vw, 3rem);
  height: auto;
  margin-block-start: 0.3em;
}

.retreat-list__title {
  font-size: var(--fs-h3);
  font-weight: 500;
  margin-block-end: var(--space-3xs);
}

.retreat-list__meta {
  font-size: var(--fs-small);
  color: var(--color-accent-dim);
  margin-block-end: var(--space-2xs);
}

.retreat-list__meta-divider {
  margin-inline: 0.5em;
  color: var(--color-accent-faint);
}

.contacto {
  background-image: linear-gradient(180deg, #000 0%, transparent 25%), url("../img/hero-contact.png");
  background-size: 100%;
  background-position: top;
}

.contacto .content-section__inner,
.reserva .content-section__inner {
  text-shadow:rgba(0, 0, 0, 0.9) 0px 0px 0.4rem, rgba(0, 0, 0, 0.9) 0px 0px 0.8rem, rgba(0, 0, 0, 0.9) 0px 0px 1.6rem;
  min-height: calc(100svh - 400px);
}

/*------------------------------------*\
  #RESERVA
\*------------------------------------*/

.reserva-form {
  display: flex;
  flex-direction: column;
  gap: var(--space-sm);
  margin-top: var(--space-sm);
}

.reserva-field {
  display: flex;
  flex-direction: column;
  gap: var(--space-3xs);
  font-family: var(--font-body);
  color: var(--color-accent-soft);
}

.reserva-field span {
  font-size: var(--fs-small);
  letter-spacing: var(--ls-caps);
  text-transform: uppercase;
}

.reserva-field input,
.reserva-field textarea {
  background-color: var(--color-bg-elevated);
  border: 0.0625rem solid var(--color-accent-faint);
  color: var(--color-accent);
  font-family: var(--font-body);
  font-size: var(--fs-body);
  padding: 0.65em 0.9em;
}

.reserva-field input:focus-visible,
.reserva-field textarea:focus-visible {
  outline: 0.0625rem solid var(--color-accent);
}

.reserva-form .btn {
  align-self: flex-start;
}

.reserva-error {
  color: #e8a0a0;
  font-family: var(--font-body);
  margin-top: var(--space-2xs);
}

/*------------------------------------*\
  #BTN
\*------------------------------------*/

.btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  padding: 0.65em 1.6em;
  border: 0.0625rem solid var(--color-accent-dim);
  border-radius: 0;
  background-color: transparent;
  color: var(--color-accent);
  font-family: var(--font-body);
  font-size: var(--fs-small);
  font-weight: 400;
  letter-spacing: var(--ls-caps);
  text-transform: uppercase;
  text-decoration: none;
  cursor: pointer;
  transition: background-color var(--transition-fast),
              color var(--transition-fast),
              border-color var(--transition-fast);
}

.btn:hover,
.btn:focus-visible {
  background-color: var(--color-accent);
  border-color: var(--color-accent);
  color: #0a0906;
}

/*------------------------------------*\
  #SITE-FOOTER
\*------------------------------------*/

.site-footer {
  position: relative;
  display: flex;
  align-items: flex-end;
  overflow: clip;
  background: url("../img/roots.png") center bottom / cover no-repeat;
  aspect-ratio: 16/9;
}



.site-footer__scrim {
  position: absolute;
  inset: 0;
  background: linear-gradient(0deg, var(--color-scrim-strong) 0%, transparent 55%);
}

.site-footer__content {
  position: relative;
  z-index: 1;
  width: 100%;
  padding: var(--container-padding);
}

.site-footer__inner {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: var(--space-2xs);
}

.site-footer__note {
  font-size: var(--fs-small);
  color: var(--color-accent-dim);
}

.site-footer__contact-link {
  font-family: var(--font-display);
  color: var(--color-accent-soft);
  font-size: var(--fs-h4);
  letter-spacing: 0.08em;
  text-transform: uppercase;
  text-decoration: none;
  border-bottom: 0.0625rem solid transparent;
  transition: border-color var(--transition-fast);
}



.site-footer__contact-link:hover,
.site-footer__contact-link:focus-visible {
  color: var(--color-accent);
  text-decoration: none;
}

/*------------------------------------*\
  #PARALLAX
  Dos capas por seccion: [data-parallax-bg] (imagenes) y
  [data-parallax-content] (texto/botones). script.js calcula, por cada
  seccion visible, un desplazamiento en translateY() proporcional a su
  posicion respecto al centro del viewport y a la altura de la propia
  seccion (--parallax-bg-ratio / --parallax-content-ratio, ver #TOKENS),
  aplicando un recorrido mayor al fondo y uno pequeño al contenido para
  lograr profundidad sin desalinear el texto de los espacios negros que
  lo enmarcan. El scale() de esta regla (debe coincidir con
  --parallax-bg-scale) da a la capa de imagen el sangrado extra que
  necesita para que translateY() nunca destape un borde sin imagen.
\*------------------------------------*/

/* [data-parallax-bg],
[data-parallax-content] {
  will-change: transform;
}

[data-parallax-bg] {
  transform: translate3d(0, 0, 0) scale(1.1);
}

[data-parallax-content] {
  transform: translate3d(0, 0, 0);
} */

/*------------------------------------*\
  #REVEAL
  El estado oculto NUNCA se define en `.js-reveal` a secas: si lo
  estuviera, un fallo o bloqueo del script (JS deshabilitado, CORS de
  modulos en file://, ad-blocker, error) dejaria el texto invisible para
  siempre. En su lugar RevealController añade la clase modificadora
  `.js-reveal--pending` por JS justo antes de observar cada elemento, asi
  que sin JS el contenido es visible desde el primer render (mejora
  progresiva real, no un requisito).
\*------------------------------------*/

.js-reveal--pending {
  opacity: 0;
  transform: translateY(var(--reveal-distance));
  transition: opacity 0.8s var(--ease-standard),
              transform 0.8s var(--ease-standard);
}

.js-reveal--pending.is-visible {
  opacity: 1;
  transform: translateY(0);
}


:focus-visible {
  outline: 0.0625rem solid var(--color-accent);
  outline-offset: 0.2rem;
}
.hero__video {
  width:100%;
  position: absolute;
  top:0;
  left:0;
  right:0
}


/*------------------------------------*\
  #MEDIA QUERIES
\*------------------------------------*/

@media (width <= 48rem) {
  .home .hero {
    min-height: 100svw;
  }
  .hero__logo {
    width: min(50vw, 62vw);
    height: auto;
}
  .primary-nav__toggle {
    display: inline-flex;
  }

  .primary-nav__list {
    display: none;
  }

  .content-section {
    padding-block: var(--space-md) var(--space-lg);
  }

  .site-footer__content {
    font-size: 130%;
  }
}

@media (prefers-reduced-motion: reduce) {
  html {
    scroll-behavior: auto;
  }

  [data-parallax-bg],
  [data-parallax-content] {
    transform: none !important;
  }

  .js-reveal--pending {
    opacity: 1;
    transform: none;
    transition: none;
  }

  *,
  *::before,
  *::after {
    animation-duration: 0.01ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.01ms !important;
  }
}