/* =============================================================
   Selva Adentro — Sitio general · Editorial Dark Warm
   Paleta: negro cálido #0D0C0B · verde selva #053005 · dorado #C9975F
           oliva #9AA35A · crema #F5F3EE
   Mismo lenguaje visual que la landing del retiro, estructura propia.
   ============================================================= */

/* =============================================================
   1. Tokens
   ============================================================= */
@property --mesh-angle { syntax: "<angle>"; inherits: false; initial-value: 0deg; }
@property --mesh-x     { syntax: "<percentage>"; inherits: false; initial-value: 50%; }
@property --mesh-y     { syntax: "<percentage>"; inherits: false; initial-value: 50%; }

:root {
  /* fondo negro cálido, nunca #000 */
  --bg:        #0D0C0B;
  --bg-2:      #14110E;
  --bg-3:      #1C1712;   /* tarjeta */
  --bg-4:      #241D16;

  /* verde selva de marca */
  --jungle:      #053005;
  --jungle-soft: #0B4A16;

  /* texto crema, nunca #fff */
  --cream:     #F5F3EE;
  --cream-2:   #DDD6C9;
  --tenue:     #C9C4BA;
  --tenue-2:   #8B8375;

  /* acentos de marca */
  --gold:      #C9975F;
  --gold-soft: #D8B487;
  --olive:     #9AA35A;
  --olive-soft:#B4BB7E;

  --line:      rgba(245, 243, 238, .12);
  --line-2:    rgba(245, 243, 238, .07);

  /* fijo, siempre claro: texto sobre media */
  --on-media:   #F5F3EE;
  --on-media-2: #DDD6C9;
  --nav-bg:     rgba(13, 12, 11, .72);

  --serif: "Cormorant Garamond", "Cormorant", Georgia, "Times New Roman", serif;
  --sans:  -apple-system, BlinkMacSystemFont, "Segoe UI", system-ui, "Helvetica Neue", Arial, sans-serif;

  --ease-out:   cubic-bezier(0.16, 1, 0.3, 1);
  --ease-in:    cubic-bezier(0.7, 0, 0.84, 0);
  --ease-soft:  cubic-bezier(0.25, 0.46, 0.45, 0.94);
  --ease-bounce:cubic-bezier(0.34, 1.56, 0.64, 1);

  --maxw: 1240px;
  --gutter: clamp(1.25rem, 5vw, 4.5rem);
  --radius: 14px;
}

/* =============================================================
   2. Reset & base
   ============================================================= */
*, *::before, *::after { box-sizing: border-box; margin: 0; }
html {
  -webkit-text-size-adjust: 100%;
  tab-size: 2;
  overflow-x: clip;
  scroll-behavior: smooth;
}
@media (prefers-reduced-motion: reduce) { html { scroll-behavior: auto; } }

body {
  font-family: var(--sans);
  font-size: 16px;
  line-height: 1.65;
  color: var(--cream);
  background: var(--bg);
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  text-rendering: optimizeLegibility;
  overflow-x: clip;
  overscroll-behavior-y: none;
}
img, svg, video { display: block; max-width: 100%; }
img { height: auto; }
button { font: inherit; color: inherit; cursor: pointer; border: 0; background: none; }
a { color: inherit; text-decoration: none; }
p { text-wrap: pretty; }
ul { padding: 0; }

h1, h2, h3, h4 {
  font-family: var(--serif);
  font-weight: 500;
  line-height: 1.04;
  letter-spacing: -0.01em;
  text-wrap: balance;
  color: var(--cream);
}

::selection { background: var(--gold); color: #201509; }

:focus-visible {
  outline: 2px solid var(--gold);
  outline-offset: 3px;
  border-radius: 4px;
}

/* =============================================================
   3. Utilidades
   ============================================================= */
.container {
  width: 100%;
  max-width: var(--maxw);
  margin-inline: auto;
  padding-inline: var(--gutter);
}
.sr-only {
  position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px;
  overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; border: 0;
}
.skip-link {
  position: fixed; top: -100px; left: 1rem;
  padding: .6rem 1rem; background: var(--cream); color: var(--bg);
  z-index: 10001; border-radius: 8px; font-weight: 600;
}
.skip-link:focus { top: 1rem; }

.kicker {
  font-family: var(--sans);
  font-size: .74rem;
  letter-spacing: .28em;
  text-transform: uppercase;
  color: var(--gold);
  font-weight: 600;
  display: inline-flex;
  align-items: center;
  gap: .7rem;
}
.kicker::before {
  content: "";
  width: 26px; height: 1px;
  background: var(--gold);
  opacity: .7;
}

.section {
  position: relative;
  padding-block: clamp(4.5rem, 11vw, 9rem);
}
.section-head { max-width: 46ch; margin-bottom: clamp(2.2rem, 5vw, 3.6rem); }
.section-title {
  font-size: clamp(2.1rem, 5.4vw, 3.9rem);
  margin-top: 1.1rem;
  line-height: 1.03;
}
.section-title em { font-style: italic; color: var(--gold-soft); }
.lede {
  font-size: clamp(1.05rem, 1.7vw, 1.28rem);
  color: var(--cream-2);
  margin-top: 1.4rem;
  max-width: 58ch;
  line-height: 1.75;
}
.prose p { color: var(--cream-2); max-width: 62ch; line-height: 1.85; }
.prose p + p { margin-top: 1.1rem; }
.note-small { font-size: .86rem; color: var(--tenue-2); line-height: 1.65; max-width: 66ch; }

/* =============================================================
   4. Reveals (gated a html.js para que sin JS todo se vea)
   ============================================================= */
html.js [data-reveal] {
  opacity: 0;
  transform: translateY(34px);
  transition: opacity .9s var(--ease-soft), transform .9s var(--ease-soft);
  transition-delay: var(--reveal-delay, 0s);
}
html.js [data-reveal].is-revealed { opacity: 1; transform: none; }

/* =============================================================
   5. Botones
   ============================================================= */
.btn {
  display: inline-flex; align-items: center; justify-content: center; gap: .6rem;
  padding: .95rem 1.7rem;
  border-radius: 999px;
  font-family: var(--sans);
  font-weight: 600;
  font-size: .95rem;
  letter-spacing: .01em;
  transition: transform .45s var(--ease-soft), box-shadow .45s var(--ease-soft),
              background-color .4s var(--ease-out), color .4s var(--ease-out),
              border-color .4s var(--ease-out);
  will-change: transform;
}
.btn svg { width: 1.05em; height: 1.05em; }
.btn-primary {
  background: var(--gold);
  color: #201509;
  box-shadow: 0 10px 30px -12px rgba(201,151,95,.55);
}
.btn-primary:hover {
  transform: translateY(-3px);
  background: var(--gold-soft);
  box-shadow: 0 22px 46px -16px rgba(201,151,95,.65);
}
.btn-primary:active { transform: translateY(-1px); transition-duration: .12s; }
.btn-ghost {
  border: 1px solid var(--line);
  color: var(--cream);
  background: rgba(245,243,238,.02);
}
.btn-ghost:hover {
  transform: translateY(-3px);
  border-color: var(--gold);
  color: var(--gold-soft);
}
.btn-lg { padding: 1.1rem 2.1rem; font-size: 1rem; }

/* Enlace con subrayado fino (usado en enlaces de sección) */
.link-quiet {
  display: inline-flex; align-items: center; gap: .5rem;
  color: var(--gold-soft); font-weight: 600; font-size: .95rem;
  padding-bottom: .25rem;
  border-bottom: 1px solid rgba(201,151,95,.42);
  transition: color .3s var(--ease-out), border-color .3s var(--ease-out), gap .3s var(--ease-out);
}
.link-quiet:hover { color: var(--cream); border-color: var(--gold); gap: .8rem; }
.link-quiet svg { width: 1em; height: 1em; }

/* =============================================================
   6. Cursor propio
   ============================================================= */
.cursor { position: fixed; top: 0; left: 0; z-index: 9999; pointer-events: none; display: none; mix-blend-mode: difference; opacity: 0; transition: opacity .25s var(--ease-out); }
.cursor.is-ready { opacity: 1; }
@media (hover: hover) and (pointer: fine) { .cursor { display: block; } }
.cursor-dot, .cursor-ring { position: fixed; top: 0; left: 0; pointer-events: none; will-change: transform; }
.cursor-dot { width: 6px; height: 6px; margin: -3px; background: var(--cream); border-radius: 50%; }
.cursor-ring {
  width: 34px; height: 34px; margin: -17px;
  border: 1px solid var(--cream); border-radius: 50%;
  transition: width .35s var(--ease-out), height .35s var(--ease-out), margin .35s var(--ease-out), background-color .35s;
}
.cursor.is-interactive .cursor-ring { width: 54px; height: 54px; margin: -27px; background: rgba(245,243,238,.06); }
.has-cursor, .has-cursor a, .has-cursor button { cursor: none; }

/* =============================================================
   7. Splash (doble red de seguridad: CSS + JS)
   ============================================================= */
.splash {
  position: fixed; inset: 0; z-index: 10000;
  background: var(--bg);
  display: grid; place-items: center;
  pointer-events: auto;
  transition: opacity .9s var(--ease-out), clip-path 1.1s var(--ease-out);
  animation: splashSafety .01s 4.5s forwards; /* seguridad obligatoria si falla JS */
}
.splash.is-out { opacity: 0; pointer-events: none; clip-path: inset(0 0 100% 0); }
@keyframes splashSafety { to { opacity: 0; pointer-events: none; clip-path: inset(0 0 100% 0); } }
.splash-inner { display: grid; place-items: center; gap: 1.2rem; }
.splash-mark { position: relative; display: grid; place-items: center; width: 132px; height: 132px; }
.splash-mark::before {
  content: ""; position: absolute; inset: -6%; border-radius: 50%;
  background: radial-gradient(circle, rgba(201,151,95,.20), transparent 62%);
  animation: splashAura 3.4s ease-in-out infinite;
}
.splash-mark::after {
  content: ""; position: absolute; inset: 0; border-radius: 50%;
  border: 2px solid rgba(245,243,238,.08);
  border-top-color: var(--gold); border-right-color: rgba(201,151,95,.45);
  animation: splashSpin 1.7s linear infinite;
}
.splash-logo {
  position: relative; z-index: 1; width: 74px; height: auto;
  animation: splashLogoIn 1.4s var(--ease-out) both, splashGlow 3.4s ease-in-out 1.4s infinite;
}
.splash-word {
  height: 26px; width: auto; opacity: .9;
  animation: splashWordIn 1.5s var(--ease-out) .7s both;
}
@keyframes splashLogoIn { from { opacity: 0; transform: scale(.72) translateY(6px); } to { opacity: 1; transform: scale(1) translateY(0); } }
@keyframes splashGlow { 0%,100% { filter: drop-shadow(0 0 6px rgba(201,151,95,.20)); } 50% { filter: drop-shadow(0 0 20px rgba(201,151,95,.50)); } }
@keyframes splashSpin { to { transform: rotate(360deg); } }
@keyframes splashAura { 0%,100% { opacity: .45; transform: scale(.92); } 50% { opacity: 1; transform: scale(1.06); } }
@keyframes splashWordIn { from { opacity: 0; letter-spacing: .2em; } to { opacity: .9; letter-spacing: .5em; } }
@media (prefers-reduced-motion: reduce) {
  .splash-mark::after, .splash-mark::before { animation: none; }
  .splash-logo { animation: splashLogoIn .6s ease both; }
}

/* =============================================================
   8. Navegación
   ============================================================= */
.nav {
  position: fixed; top: 0; inset-inline: 0; z-index: 200;
  transition: background-color .45s var(--ease-out), backdrop-filter .45s var(--ease-out),
              box-shadow .45s var(--ease-out), border-color .45s var(--ease-out);
  border-bottom: 1px solid transparent;
}
.nav.is-scrolled {
  background: var(--nav-bg);
  backdrop-filter: blur(14px) saturate(120%);
  -webkit-backdrop-filter: blur(14px) saturate(120%);
  border-bottom: 1px solid var(--line-2);
}
.nav-inner {
  display: flex; align-items: center; justify-content: space-between;
  gap: 1rem; height: 74px;
}
.brand { display: inline-flex; align-items: center; gap: .7rem; }
.brand-mark { width: 170px; height: 30px; }
@media (max-width: 430px) { .brand-mark { width: 132px; height: 23px; } }
.nav-links { display: none; align-items: center; gap: 1.6rem; }
.nav-link { position: relative; font-size: .88rem; color: var(--cream-2); padding: .3rem 0; letter-spacing: .01em; }
.nav-link::after {
  content: ""; position: absolute; left: 0; right: 0; bottom: -2px; height: 1px;
  background: var(--gold);
  transform: scaleX(0); transform-origin: right;
  transition: transform .45s var(--ease-soft);
}
.nav-link:hover { color: var(--cream); }
.nav-link:hover::after { transform: scaleX(1); transform-origin: left; }
.nav-cta { display: none; }
.nav-burger {
  display: inline-flex; flex-direction: column; gap: 5px; padding: 10px; margin-right: -10px;
}
.nav-burger span { width: 26px; height: 1.5px; background: var(--cream); transition: transform .4s var(--ease-out), opacity .3s; }
.nav-burger[aria-expanded="true"] span:nth-child(1) { transform: translateY(6.5px) rotate(45deg); }
.nav-burger[aria-expanded="true"] span:nth-child(2) { opacity: 0; }
.nav-burger[aria-expanded="true"] span:nth-child(3) { transform: translateY(-6.5px) rotate(-45deg); }

@media (min-width: 1040px) {
  .nav-links { display: flex; }
  .nav-cta { display: inline-flex; }
  .nav-burger { display: none; }
}
/* El enlace de la guía solo cuando hay sitio de sobra */
.nav-link-guia { display: none; }
@media (min-width: 1360px) { .nav-link-guia { display: inline-flex; } }

/* Menú móvil a pantalla completa */
.nav-mobile {
  position: fixed; inset: 0; z-index: 190;
  background: var(--bg-2);
  display: grid; align-content: center; gap: .1rem;
  padding: var(--gutter);
  overflow-y: auto;
  clip-path: inset(0 0 100% 0);
  transition: clip-path .6s var(--ease-soft);
}
.nav-mobile[aria-hidden="false"] { clip-path: inset(0); }
.nav-mobile a {
  font-family: var(--serif);
  font-size: clamp(1.65rem, 7.2vw, 2.4rem);
  color: var(--cream);
  padding: .3rem 0;
  border-bottom: 1px solid var(--line-2);
}
.nav-mobile a:last-of-type { border-bottom: 0; }
.nav-mobile .btn { margin-top: 1.4rem; width: fit-content; max-width: 100%; font-family: var(--sans); font-size: 1rem; font-weight: 600; padding: .95rem 1.9rem; border-bottom: 0; white-space: nowrap; }
@media (min-width: 1040px) { .nav-mobile { display: none; } }

/* Controles de tema / idioma */
.nav-controls { display: flex; align-items: center; gap: .5rem; }
.nav-ctl {
  display: inline-flex; align-items: center; justify-content: center;
  min-width: 40px; height: 40px; padding: 0 .75rem;
  border: 1px solid var(--line); border-radius: 999px;
  font-family: var(--sans); font-size: .78rem; font-weight: 700; letter-spacing: .1em;
  transition: color .3s var(--ease-out), border-color .3s var(--ease-out),
              background-color .3s var(--ease-out), transform .35s var(--ease-soft);
}
.nav-ctl:hover { transform: translateY(-2px); border-color: var(--gold); color: var(--gold-soft); }
.nav-ctl svg { width: 18px; height: 18px; }
.theme-toggle .i-moon { display: none; }
:root[data-theme="light"] .theme-toggle .i-sun { display: none; }
:root[data-theme="light"] .theme-toggle .i-moon { display: inline-block; }

.nav-mobile-controls { display: flex; gap: .7rem; margin-top: 1.8rem; }
.nav-mobile-controls .nav-ctl { color: var(--cream); border-color: var(--line); }
.nav-mobile-controls .nav-ctl:hover { color: var(--gold-soft); border-color: var(--gold); }
@media (min-width: 1040px) { .nav-mobile-controls { display: none; } }

/* =============================================================
   9. Hero
   ============================================================= */
.hero {
  position: relative;
  min-height: 100vh;
  min-height: 100svh;
  display: grid;
  align-items: end;
  overflow: hidden;
  isolation: isolate;
}
.hero-bg { position: absolute; inset: 0; z-index: -3; overflow: hidden; }
.hero-bg img {
  position: absolute; inset: 0;
  width: 100%; height: 100%; object-fit: cover;
  filter: saturate(1.03) contrast(1.03) brightness(.8);
  transform: scale(1.06);
  animation: kenBurns 30s ease-in-out infinite alternate;
  will-change: transform;
}
@keyframes kenBurns {
  from { transform: scale(1.06) translate3d(0,0,0); }
  to   { transform: scale(1.14) translate3d(-1.6%,-1.4%,0); }
}
.hero-tint {
  position: absolute; inset: 0; z-index: -2;
  background:
    linear-gradient(180deg, rgba(13,12,11,.66) 0%, rgba(13,12,11,.38) 38%, rgba(13,12,11,.76) 76%, rgba(13,12,11,.97) 100%),
    radial-gradient(120% 90% at 50% 8%, transparent 38%, rgba(13,12,11,.66) 100%);
}
.hero-mesh {
  position: absolute; inset: -12%; z-index: -2; pointer-events: none;
  background:
    radial-gradient(48% 40% at var(--mesh-x) var(--mesh-y), rgba(201,151,95,.26), transparent 62%),
    conic-gradient(from var(--mesh-angle), rgba(201,151,95,.16), rgba(154,163,90,.07), rgba(201,151,95,.14), rgba(5,48,5,.10));
  filter: blur(90px) saturate(120%);
  opacity: .8;
  mix-blend-mode: screen;
  animation: meshShift 26s linear infinite;
}
@keyframes meshShift {
  0%   { --mesh-angle: 0deg;   --mesh-x: 32%; --mesh-y: 38%; }
  50%  { --mesh-angle: 180deg; --mesh-x: 68%; --mesh-y: 60%; }
  100% { --mesh-angle: 360deg; --mesh-x: 32%; --mesh-y: 38%; }
}
.hero-grain {
  position: absolute; inset: 0; z-index: -1; pointer-events: none;
  opacity: .16; mix-blend-mode: overlay;
  background-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 200 200'><filter id='n'><feTurbulence type='fractalNoise' baseFrequency='0.9' numOctaves='3' stitchTiles='stitch'/><feColorMatrix values='0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0.5 0'/></filter><rect width='100%25' height='100%25' filter='url(%23n)'/></svg>");
  background-size: 200px 200px;
}
.hero-inner {
  padding-block: clamp(4.5rem, 10vh, 7rem) clamp(2.2rem, 6vh, 3.4rem);
  max-width: min(94vw, 46rem);
}
.hero-title {
  font-size: clamp(2.5rem, 6vw, 4.9rem);
  line-height: 1.03;
  margin-top: 1.3rem;
  letter-spacing: -0.02em;
  max-width: 17ch;
}
.hero-title em { font-style: italic; color: var(--gold-soft); }

/* Entrada del hero: visible por defecto, anima cuando JS marca listo */
html.is-ready .hero [data-hero-in] { animation: heroIn 1s var(--ease-out) both; }
.hero [data-hero-in]:nth-child(1) { animation-delay: .45s; }
.hero [data-hero-in]:nth-child(2) { animation-delay: .58s; }
.hero [data-hero-in]:nth-child(3) { animation-delay: .72s; }
.hero [data-hero-in]:nth-child(4) { animation-delay: .86s; }
.hero [data-hero-in]:nth-child(5) { animation-delay: 1s; }
@keyframes heroIn { from { opacity: 0; transform: translateY(26px); } to { opacity: 1; transform: none; } }
.hero-sub {
  margin-top: 1.7rem;
  font-size: clamp(1.03rem, 1.8vw, 1.3rem);
  color: var(--cream-2);
  max-width: 50ch;
  line-height: 1.72;
}
.hero-actions { margin-top: 2.1rem; display: flex; flex-wrap: wrap; gap: .9rem; }
.hero-place {
  margin-top: 2.2rem;
  display: inline-flex; align-items: center; gap: .6rem;
  font-size: .78rem; letter-spacing: .17em; text-transform: uppercase; color: var(--tenue);
}
.hero-place .dot { width: 7px; height: 7px; border-radius: 50%; background: var(--olive); box-shadow: 0 0 0 4px rgba(154,163,90,.18); flex: 0 0 auto; }
.hero-scroll {
  position: absolute; left: 50%; bottom: 1.4rem; transform: translateX(-50%);
  z-index: 1; display: flex; flex-direction: column; align-items: center; gap: .55rem;
  font-size: .66rem; letter-spacing: .24em; text-transform: uppercase; color: var(--tenue);
}
.hero-scroll .line { width: 1px; height: 40px; background: linear-gradient(var(--gold), transparent); animation: scrollLine 2.4s var(--ease-soft) infinite; transform-origin: top; }
@keyframes scrollLine { 0% { transform: scaleY(0); opacity: 0; } 40% { transform: scaleY(1); opacity: 1; } 100% { transform: scaleY(1) translateY(40px); opacity: 0; } }
@media (prefers-reduced-motion: reduce) { .hero-scroll .line { animation: none; } }

/* polvo dorado */
.dust { position: fixed; inset: 0; z-index: 0; pointer-events: none; mix-blend-mode: screen; }

/* =============================================================
   10. Puertas (navegación editorial bajo el hero) — propio de este sitio
   ============================================================= */
.puertas { background: var(--bg-2); border-bottom: 1px solid var(--line-2); }
.puertas-grid {
  display: grid; grid-template-columns: 1fr;
  border-top: 1px solid var(--line-2);
}
.puerta {
  position: relative; isolation: isolate;
  display: flex; flex-direction: column; gap: .55rem;
  padding: clamp(1.7rem, 3.6vw, 2.6rem) 0;
  border-bottom: 1px solid var(--line-2);
  transition: color .4s var(--ease-out);
}
.puerta::before {
  content: ""; position: absolute; inset: 0 calc(var(--gutter) * -0.5); z-index: -1;
  background: linear-gradient(180deg, rgba(201,151,95,.08), transparent);
  opacity: 0; transition: opacity .45s var(--ease-out);
}
.puerta:hover::before { opacity: 1; }
.puerta-n {
  font-family: var(--sans); font-size: .7rem; letter-spacing: .24em;
  text-transform: uppercase; color: var(--gold);
}
.puerta h2 {
  font-size: clamp(1.7rem, 3.4vw, 2.35rem);
  transition: color .4s var(--ease-out);
}
.puerta:hover h2 { color: var(--gold-soft); }
.puerta p { color: var(--cream-2); font-size: .97rem; max-width: 42ch; }
.puerta-go {
  margin-top: .5rem; display: inline-flex; align-items: center; gap: .5rem;
  font-size: .82rem; letter-spacing: .12em; text-transform: uppercase; color: var(--tenue);
  transition: gap .35s var(--ease-out), color .35s var(--ease-out);
}
.puerta:hover .puerta-go { gap: .85rem; color: var(--gold-soft); }
.puerta-go svg { width: 15px; height: 15px; }
@media (min-width: 860px) {
  .puertas-grid { grid-template-columns: repeat(3, 1fr); gap: 0; }
  .puerta { padding: clamp(2rem, 4vw, 3rem) clamp(1.2rem, 2.4vw, 2rem); border-bottom: 0; border-right: 1px solid var(--line-2); }
  .puerta:first-child { padding-left: 0; }
  .puerta:last-child { border-right: 0; padding-right: 0; }
  .puerta::before { inset: 0; }
}

/* =============================================================
   11. Marquee
   ============================================================= */
.marquee {
  overflow: hidden; position: relative;
  display: flex; flex-wrap: nowrap; align-items: center; width: 100%;
  border-block: 1px solid var(--line-2);
  padding-block: 1.4rem;
  background: var(--bg);
}
.marquee::before, .marquee::after {
  content: ""; position: absolute; top: 0; bottom: 0; width: 120px; z-index: 2; pointer-events: none;
}
.marquee::before { left: 0;  background: linear-gradient(90deg, var(--bg), transparent); }
.marquee::after  { right: 0; background: linear-gradient(270deg, var(--bg), transparent); }
.marquee-track {
  display: inline-flex; flex: 0 0 auto; align-items: center;
  gap: 2.6rem; padding-right: 2.6rem; white-space: nowrap; will-change: transform;
  animation: marqueeMove 38s linear infinite;
}
.marquee:hover .marquee-track { animation-play-state: paused; }
@keyframes marqueeMove { from { transform: translateX(0); } to { transform: translateX(-100%); } }
.marquee-track span {
  font-family: var(--serif);
  font-size: clamp(1.4rem, 3vw, 2.3rem);
  font-style: italic;
  color: var(--cream-2);
}
.marquee-track .sep { color: var(--gold); font-style: normal; }

/* =============================================================
   12. Quiénes somos
   ============================================================= */
.nosotros { background: var(--bg); }
.nosotros-grid {
  display: grid; gap: clamp(2.4rem, 5vw, 4.5rem);
  grid-template-columns: 1fr;
  align-items: center;
}
.nosotros-figure {
  position: relative; border-radius: var(--radius); overflow: hidden;
  aspect-ratio: 4 / 3;
  margin: 0;
}
.nosotros-figure img { width: 100%; height: 100%; object-fit: cover; }
.nosotros-figure::after {
  content: ""; position: absolute; inset: 0;
  box-shadow: inset 0 0 120px 10px rgba(13,12,11,.45);
  pointer-events: none;
}
.nosotros-cap {
  margin-top: .9rem; font-size: .82rem; color: var(--tenue); line-height: 1.6; max-width: 44ch;
}
.nosotros-stat {
  position: absolute; left: 1.1rem; bottom: 1.1rem;
  background: rgba(13,12,11,.74);
  backdrop-filter: blur(8px); -webkit-backdrop-filter: blur(8px);
  border: 1px solid var(--line);
  border-radius: 12px; padding: .9rem 1.2rem;
}
.nosotros-stat .num { font-family: var(--serif); font-size: 2.4rem; color: var(--gold-soft); line-height: 1; }
.nosotros-stat .lbl { font-size: .7rem; letter-spacing: .16em; text-transform: uppercase; color: var(--tenue); margin-top: .3rem; }
.pull-quote {
  margin-top: 2rem;
  font-family: var(--serif);
  font-style: italic;
  font-size: clamp(1.35rem, 2.9vw, 1.95rem);
  line-height: 1.32;
  color: var(--cream);
  padding-left: 1.4rem;
  border-left: 2px solid var(--gold);
}
.byline { margin-top: 1rem; font-size: .85rem; letter-spacing: .04em; color: var(--tenue); }
@media (min-width: 960px) {
  .nosotros-grid { grid-template-columns: .95fr 1.05fr; }
}

/* =============================================================
   13. El Yagé — editorial partido
   ============================================================= */
.yage { background: var(--bg-2); }
.yage-grid { display: grid; grid-template-columns: 1fr; gap: clamp(2.2rem, 5vw, 4rem); align-items: start; }
.yage-figure {
  position: relative; border-radius: var(--radius); overflow: hidden;
  aspect-ratio: 3 / 4; margin: 0;
}
.yage-figure img { width: 100%; height: 100%; object-fit: cover; filter: saturate(1.02) brightness(.94); }
.yage-figure::after { content: ""; position: absolute; inset: 0; background: linear-gradient(180deg, transparent 58%, rgba(13,12,11,.5)); pointer-events: none; }
.yage-first::first-letter {
  font-family: var(--serif);
  font-size: 3.4em;
  line-height: .8;
  float: left;
  padding: .1em .12em 0 0;
  color: var(--gold-soft);
}
.yage-marks {
  list-style: none; margin: 2.2rem 0 0; padding: 0;
  display: grid; gap: 1px; background: var(--line-2);
  border: 1px solid var(--line-2); border-radius: var(--radius); overflow: hidden;
}
.yage-marks li { background: var(--bg); padding: 1.1rem 1.3rem; list-style: none; }
.yage-marks .ym-t {
  font-family: var(--sans); font-size: .7rem; letter-spacing: .2em;
  text-transform: uppercase; color: var(--gold);
}
.yage-marks .ym-d { margin: .35rem 0 0; color: var(--cream-2); font-size: .95rem; line-height: 1.6; }
@media (min-width: 880px) {
  .yage-grid { grid-template-columns: 1.15fr .85fr; gap: clamp(3rem, 6vw, 5rem); }
  .yage-figure { position: sticky; top: 14vh; aspect-ratio: auto; height: 66vh; }
  .yage-marks { grid-template-columns: repeat(3, 1fr); }
}

/* =============================================================
   14. Ceremonias — horario + dos modalidades
   ============================================================= */
.ceremonias { background: var(--bg); }
.cer-intro { display: grid; grid-template-columns: 1fr; gap: clamp(2rem, 4vw, 3.4rem); align-items: center; }
.cer-intro .section-head { margin-bottom: clamp(1.6rem, 3vw, 2.2rem); }
.cer-figure {
  position: relative; margin: 0; border-radius: var(--radius); overflow: hidden;
  aspect-ratio: 4 / 5; max-height: 60vh;
}
.cer-figure img { width: 100%; height: 100%; object-fit: cover; }
.cer-figure::after { content: ""; position: absolute; inset: 0; background: linear-gradient(180deg, transparent 60%, rgba(13,12,11,.45)); pointer-events: none; }
@media (min-width: 960px) {
  .cer-intro { grid-template-columns: 1.2fr .8fr; gap: clamp(2.5rem, 5vw, 4.5rem); }
  .cer-figure { max-height: none; }
}
.horario {
  display: flex; flex-wrap: wrap; align-items: center; gap: 1rem 1.6rem;
  margin-bottom: clamp(2rem, 4vw, 3rem);
  padding: 1.2rem 1.5rem;
  border: 1px solid var(--line);
  border-left: 3px solid var(--gold);
  border-radius: 12px;
  background: rgba(201,151,95,.05);
}
.horario-h {
  font-family: var(--serif); font-size: clamp(1.5rem, 3.4vw, 2.1rem);
  color: var(--gold-soft); line-height: 1; letter-spacing: .01em;
}
.horario-t { font-size: .7rem; letter-spacing: .2em; text-transform: uppercase; color: var(--tenue); }
.horario p { color: var(--cream-2); font-size: .95rem; max-width: 52ch; }

.modalidades { display: grid; gap: 1.2rem; grid-template-columns: 1fr; margin-top: clamp(2rem, 4vw, 3rem); }
.modalidad {
  position: relative; isolation: isolate;
  border: 1px solid var(--line-2);
  border-radius: var(--radius);
  padding: clamp(1.6rem, 3vw, 2.3rem);
  background: linear-gradient(180deg, var(--bg-3), var(--bg-2));
  overflow: hidden;
  transition: border-color .5s var(--ease-out), box-shadow .5s var(--ease-out);
}
.modalidad::before {
  content: ""; position: absolute; inset: 0; z-index: -1; pointer-events: none;
  background: radial-gradient(260px circle at var(--mx, 50%) var(--my, 50%), rgba(201,151,95,.16), transparent 62%);
  opacity: 0; transition: opacity .4s var(--ease-out);
}
.modalidad:hover { border-color: var(--line); box-shadow: 0 30px 60px -30px rgba(0,0,0,.6); }
.modalidad:hover::before { opacity: 1; }
.modalidad-top { display: flex; align-items: center; gap: .8rem; margin-bottom: 1rem; }
.modalidad-ic {
  width: 44px; height: 44px; flex: 0 0 auto; border-radius: 12px;
  display: grid; place-items: center;
  border: 1px solid var(--line); color: var(--gold-soft);
}
.modalidad-ic svg { width: 21px; height: 21px; }
.modalidad h3 { font-size: clamp(1.4rem, 2.8vw, 1.85rem); }
.modalidad > p { color: var(--cream-2); margin-top: .2rem; }
.incluye-t {
  margin-top: 1.6rem; padding-top: 1rem;
  border-top: 1px solid var(--line-2);
  font-size: .68rem; letter-spacing: .22em;
  text-transform: uppercase; color: var(--tenue);
}
.incluye {
  list-style: none; margin: .7rem 0 0; padding: 0; display: grid; gap: .5rem;
}
.incluye li {
  position: relative; padding-left: 1.6rem;
  color: var(--cream-2); font-size: .96rem; line-height: 1.55;
}
.incluye li::before {
  content: ""; position: absolute; left: 0; top: .58em;
  width: 8px; height: 8px; border-radius: 50%;
  border: 1.5px solid var(--gold); opacity: .85;
}
.has-tilt {
  --rx: 0deg; --ry: 0deg;
  transform: perspective(1000px) rotateX(var(--rx)) rotateY(var(--ry));
  transform-style: preserve-3d;
  transition: transform .55s var(--ease-soft), border-color .5s, box-shadow .5s;
}
.has-tilt:hover { transition-duration: .16s, .5s, .5s; }
@media (min-width: 820px) { .modalidades { grid-template-columns: repeat(2, 1fr); } }

/* =============================================================
   15. Retiros — bloques alternos
   ============================================================= */
.retiros { background: var(--bg-2); }
.retiro {
  display: grid; grid-template-columns: 1fr; gap: clamp(1.8rem, 4vw, 3.4rem);
  align-items: center;
  padding-block: clamp(2rem, 4vw, 3rem);
}
.retiro + .retiro { border-top: 1px solid var(--line-2); }
.retiro-figure { position: relative; border-radius: var(--radius); overflow: hidden; aspect-ratio: 4 / 3; margin: 0; }
.retiro-figure img,
.retiro-figure video { width: 100%; height: 100%; object-fit: cover; transition: transform 1.2s var(--ease-soft); }
.retiro:hover .retiro-figure img,
.retiro:hover .retiro-figure video { transform: scale(1.04); }
.retiro-figure::after { content: ""; position: absolute; inset: 0; box-shadow: inset 0 0 90px 6px rgba(13,12,11,.4); pointer-events: none; }
.retiro-meta {
  display: flex; align-items: flex-start; gap: .55rem;
  font-size: .7rem; letter-spacing: .2em; line-height: 1.6;
  text-transform: uppercase; color: var(--olive-soft);
}
.retiro-meta .dot { width: 6px; height: 6px; margin-top: .55em; border-radius: 50%; background: var(--olive); flex: 0 0 auto; }
.retiro h3 { font-size: clamp(1.7rem, 3.6vw, 2.6rem); margin-top: .8rem; }
.retiro > div > p { color: var(--cream-2); margin-top: 1rem; max-width: 54ch; line-height: 1.75; }
.retiro .incluye { margin-top: 1.2rem; }
.retiro .link-quiet { margin-top: 1.5rem; }
@media (min-width: 900px) {
  .retiro { grid-template-columns: 1fr 1fr; gap: clamp(2.5rem, 5vw, 4.5rem); }
  .retiro-alt .retiro-figure { order: 2; }
}

/* =============================================================
   16. Dónde — tres lugares
   ============================================================= */
.donde { background: var(--bg); }
.lugares { display: grid; gap: 1.4rem; grid-template-columns: 1fr; }
.lugar {
  display: flex; flex-direction: column;
  border: 1px solid var(--line-2); border-radius: var(--radius);
  overflow: hidden; background: var(--bg-3);
  transition: border-color .5s var(--ease-out), transform .5s var(--ease-out), box-shadow .5s var(--ease-out);
}
.lugar:hover { border-color: var(--line); transform: translateY(-4px); box-shadow: 0 30px 60px -32px rgba(0,0,0,.65); }
.lugar-figure { position: relative; margin: 0; aspect-ratio: 3 / 2; overflow: hidden; }
.lugar-figure img { width: 100%; height: 100%; object-fit: cover; transition: transform 1.2s var(--ease-soft); }
.lugar:hover .lugar-figure img { transform: scale(1.05); }
.lugar-badge {
  position: absolute; left: .9rem; top: .9rem;
  font-size: .64rem; letter-spacing: .18em; text-transform: uppercase; font-weight: 700;
  padding: .38rem .8rem; border-radius: 999px;
  background: rgba(13,12,11,.78); color: var(--olive-soft);
  border: 1px solid rgba(154,163,90,.5);
  backdrop-filter: blur(6px); -webkit-backdrop-filter: blur(6px);
}
.lugar-body { padding: clamp(1.3rem, 2.6vw, 1.8rem); display: flex; flex-direction: column; gap: .55rem; flex: 1 1 auto; }
.lugar-where { font-size: .69rem; letter-spacing: .2em; text-transform: uppercase; color: var(--gold); }
.lugar h3 { font-size: clamp(1.35rem, 2.6vw, 1.7rem); }
.lugar p { color: var(--cream-2); font-size: .96rem; line-height: 1.65; }
.lugar-lema {
  margin-top: .3rem; font-family: var(--serif); font-style: italic;
  font-size: 1.12rem; line-height: 1.4; color: var(--cream);
  padding-left: .9rem; border-left: 2px solid var(--olive);
}
.lugar-nota { font-size: .82rem; color: var(--tenue-2); line-height: 1.6; margin-top: auto; padding-top: .6rem; }
@media (min-width: 720px) { .lugares { grid-template-columns: repeat(2, 1fr); } }
@media (min-width: 1080px) { .lugares { grid-template-columns: repeat(3, 1fr); } }

/* =============================================================
   17. Cuidado — requerimientos y recomendaciones
   ============================================================= */
.cuidado { background: var(--bg-2); }
.cuidado-grid { display: grid; gap: 1.2rem; grid-template-columns: 1fr; align-items: start; }
.panel {
  border: 1px solid var(--line-2); border-radius: var(--radius);
  padding: clamp(1.5rem, 3vw, 2.1rem);
  background: rgba(245,243,238,.015);
}
.panel-t {
  font-family: var(--sans); font-size: .7rem; letter-spacing: .22em;
  text-transform: uppercase; color: var(--gold); margin-bottom: .9rem;
  display: flex; align-items: center; gap: .6rem;
}
.panel-t svg { width: 17px; height: 17px; flex: 0 0 auto; }
.panel h3 { font-size: clamp(1.3rem, 2.5vw, 1.6rem); margin-bottom: .7rem; }
.panel p { color: var(--cream-2); font-size: .97rem; line-height: 1.7; }
.panel-list { list-style: none; margin: .3rem 0 0; padding: 0; display: grid; gap: .6rem; }
.panel-list li {
  position: relative; padding-left: 1.5rem;
  color: var(--cream-2); font-size: .96rem; line-height: 1.6;
}
.panel-list li::before {
  content: ""; position: absolute; left: 0; top: .62em;
  width: 7px; height: 7px; border-radius: 50%; background: var(--gold); opacity: .7;
}
/* variante de cuidado: no asisten */
.panel-guard { border-left: 3px solid var(--olive); background: rgba(154,163,90,.05); }
.panel-guard .panel-t { color: var(--olive-soft); }
.panel-guard .panel-list li::before {
  background: transparent; border: 1.5px solid var(--olive-soft);
  width: 8px; height: 8px; top: .58em;
}
.panel-wide { grid-column: 1 / -1; }
@media (min-width: 900px) { .cuidado-grid { grid-template-columns: repeat(2, 1fr); gap: 1.4rem; } }

/* =============================================================
   18. Alimentación — línea de tiempo
   ============================================================= */
.alimentacion { background: var(--bg); }
.dieta { list-style: none; margin: 0; padding: 0; display: grid; gap: 0; position: relative; }
.dieta::before {
  content: ""; position: absolute; left: 9px; top: .8rem; bottom: 1.2rem; width: 1px;
  background: linear-gradient(var(--gold), rgba(201,151,95,.12));
}
.dieta li { position: relative; padding: 0 0 1.9rem 2.6rem; }
.dieta li:last-child { padding-bottom: 0; }
.dieta li::before {
  content: ""; position: absolute; left: 3px; top: .7rem;
  width: 13px; height: 13px; border-radius: 50%;
  background: var(--bg); border: 2px solid var(--gold);
}
.dieta-t {
  font-family: var(--sans); font-size: .7rem; letter-spacing: .22em;
  text-transform: uppercase; color: var(--gold);
}
.dieta h3 { font-size: clamp(1.25rem, 2.4vw, 1.55rem); margin-top: .35rem; }
.dieta p { color: var(--cream-2); margin-top: .5rem; max-width: 58ch; line-height: 1.75; }

/* =============================================================
   19. Valores
   ============================================================= */
.valores { background: var(--bg-2); }
.tarifas { display: grid; gap: 1.4rem; grid-template-columns: 1fr; }
.tarifa-grupo {
  border: 1px solid var(--line-2); border-radius: var(--radius);
  background: var(--bg-3); overflow: hidden;
  display: flex; flex-direction: column;
}
.tarifa-head {
  padding: 1.2rem clamp(1.2rem, 2.4vw, 1.7rem);
  border-bottom: 1px solid var(--line-2);
  background: rgba(245,243,238,.02);
}
.tarifa-head h3 { font-size: clamp(1.25rem, 2.4vw, 1.55rem); }
.tarifa-head span { display: block; margin-top: .3rem; font-size: .74rem; letter-spacing: .16em; text-transform: uppercase; color: var(--tenue); }
.tarifa-filas { list-style: none; margin: 0; padding: 0; flex: 1 1 auto; }
.tarifa-filas li {
  display: flex; flex-wrap: wrap; align-items: baseline; justify-content: space-between; gap: .6rem 1.8rem;
  padding: 1.15rem clamp(1.2rem, 2.4vw, 1.7rem);
  border-bottom: 1px solid var(--line-2);
}
.tarifa-filas li:last-child { border-bottom: 0; }
.tarifa-q { flex: 1 1 11rem; color: var(--cream-2); font-size: .96rem; line-height: 1.5; max-width: 30ch; }
.tarifa-q small { display: block; color: var(--tenue-2); font-size: .82rem; margin-top: .15rem; }
.tarifa-v {
  flex: 0 1 auto; margin-left: auto; text-align: right;
  font-family: var(--serif); font-size: clamp(1.25rem, 2.4vw, 1.6rem);
  color: var(--gold-soft); line-height: 1.15; white-space: nowrap;
}
.tarifa-v small { display: block; font-family: var(--sans); font-size: .72rem; letter-spacing: .1em; color: var(--tenue); white-space: normal; margin-top: .2rem; }
.tarifa-v.is-text { font-size: 1.02rem; color: var(--cream-2); white-space: normal; font-family: var(--sans); max-width: 26ch; }
@media (min-width: 900px) { .tarifas { grid-template-columns: repeat(2, 1fr); } .tarifa-ancho { grid-column: 1 / -1; } }

/* =============================================================
   20. Reservas — tres pasos
   ============================================================= */
.reservas { background: var(--bg); }
.pasos { display: grid; gap: 1.2rem; grid-template-columns: 1fr; counter-reset: paso; }
.paso {
  border: 1px solid var(--line-2); border-radius: var(--radius);
  padding: clamp(1.5rem, 3vw, 2.1rem);
  background: linear-gradient(180deg, var(--bg-3), var(--bg-2));
  transition: border-color .5s var(--ease-out), transform .5s var(--ease-out);
}
.paso:hover { border-color: var(--line); transform: translateY(-3px); }
.paso-n {
  font-family: var(--serif); font-size: 2.4rem; line-height: 1;
  color: var(--gold); opacity: .72;
}
.paso h3 { font-size: clamp(1.25rem, 2.4vw, 1.5rem); margin-top: .5rem; }
.paso p { color: var(--cream-2); margin-top: .55rem; font-size: .97rem; line-height: 1.7; }
.paso-dato {
  margin-top: .9rem; display: grid; gap: .35rem;
  padding-top: .9rem; border-top: 1px solid var(--line-2);
}
.paso-dato b { font-family: var(--sans); font-weight: 600; color: var(--cream); font-size: .95rem; letter-spacing: .01em; }
.paso-dato span { font-size: .82rem; color: var(--tenue); }
.aviso {
  margin-top: 1.8rem;
  display: flex; gap: 1rem; align-items: flex-start;
  border: 1px solid var(--line);
  border-left: 3px solid var(--olive);
  border-radius: 12px;
  padding: 1.3rem 1.5rem;
  background: rgba(154,163,90,.05);
}
.aviso svg { flex: 0 0 auto; width: 22px; height: 22px; color: var(--olive-soft); margin-top: .15rem; }
.aviso p { color: var(--cream-2); font-size: .96rem; line-height: 1.7; }
.aviso strong { color: var(--cream); font-weight: 600; }
@media (min-width: 860px) { .pasos { grid-template-columns: repeat(3, 1fr); } }

/* =============================================================
   21. Banda de cita (parallax)
   ============================================================= */
.quoteband {
  position: relative; overflow: hidden; isolation: isolate;
  min-height: 58vh; display: grid; align-items: center;
  padding-block: clamp(4rem, 10vw, 7rem);
}
.quoteband-bg { position: absolute; inset: -12% 0; z-index: -2; }
.quoteband-bg img { width: 100%; height: 100%; object-fit: cover; filter: brightness(.5) saturate(1.02); will-change: transform; }
.quoteband-tint {
  position: absolute; inset: 0; z-index: -1;
  background: linear-gradient(90deg, rgba(13,12,11,.92) 0%, rgba(13,12,11,.64) 55%, rgba(13,12,11,.4) 100%);
}
.quoteband-text {
  font-family: var(--serif);
  font-style: italic;
  font-size: clamp(1.55rem, 3.7vw, 2.8rem);
  line-height: 1.3;
  color: var(--cream);
  max-width: 23ch;
}
.quoteband-by {
  margin-top: 1.4rem;
  font-size: .78rem; letter-spacing: .2em; text-transform: uppercase; color: var(--gold);
}

/* =============================================================
   22. La guía (descarga del PDF)
   ============================================================= */
.guia { background: var(--bg-2); padding-block: clamp(3.4rem, 7vw, 6rem); }
.guia-grid { display: grid; grid-template-columns: 1fr; gap: clamp(1.6rem, 4vw, 3rem); align-items: start; }
.guia-cover { position: relative; margin: 0 auto; max-width: 300px; width: 100%; }
.guia-cover img {
  width: 100%; height: auto; display: block;
  border-radius: 10px;
  border: 1px solid var(--line);
  box-shadow: 0 30px 60px -24px rgba(0,0,0,.65), 0 0 0 1px rgba(201,151,95,.14);
  transform: rotate(-1.4deg);
  transition: transform .6s var(--ease-soft), box-shadow .6s var(--ease-soft);
}
.guia-cover:hover img { transform: rotate(0deg) translateY(-4px); box-shadow: 0 38px 74px -26px rgba(0,0,0,.7), 0 0 0 1px rgba(201,151,95,.28); }
.guia-list {
  columns: 2; column-gap: 2rem;
  list-style: none; padding: 0; margin: 1.8rem 0 0;
  display: grid; gap: .5rem;
}
.guia-list li {
  break-inside: avoid; -webkit-column-break-inside: avoid;
  position: relative; padding-left: 1.5rem;
  color: var(--cream-2); font-size: .97rem; line-height: 1.5;
}
.guia-list li::before {
  content: ""; position: absolute; left: 0; top: .62em;
  width: 7px; height: 7px; border-radius: 50%;
  background: var(--gold); opacity: .75;
}
.guia-form { margin-top: 1.4rem; max-width: 460px; }
.guia-dl {
  justify-self: start; display: inline-flex; align-items: center; gap: .5rem;
  margin-top: .2rem; padding: .55rem 0;
  color: var(--gold-soft); font-weight: 600; font-size: .95rem;
  border-bottom: 1px solid rgba(201,151,95,.45);
  transition: color .3s var(--ease-out), border-color .3s var(--ease-out);
}
.guia-dl:hover { color: var(--cream); border-color: var(--gold); }
.guia-dl[hidden] { display: none; }
.guia-note { margin-top: .4rem; font-size: .82rem; color: var(--tenue-2); line-height: 1.6; max-width: 46ch; }

/* Puente hacia el retiro a la selva (siempre visible) */
.guia-bridge {
  margin-top: 2.2rem; max-width: 56ch;
  border: 1px solid var(--line-2);
  border-left: 3px solid var(--olive);
  border-radius: 12px;
  padding: 1.4rem 1.6rem;
  background: rgba(154,163,90,.05);
}
.guia-bridge-t {
  font-family: var(--sans); font-size: .7rem; letter-spacing: .22em;
  text-transform: uppercase; color: var(--olive-soft); margin-bottom: .7rem;
}
.guia-bridge p + a { margin-top: 1rem; }
.guia-bridge p { color: var(--cream-2); font-size: .97rem; line-height: 1.75; }

/* Puente que aparece tras la descarga */
.guia-after {
  margin-top: 1.4rem; max-width: 52ch;
  display: grid; gap: .8rem; justify-items: start;
  padding: 1.1rem 1.3rem;
  border: 1px dashed rgba(201,151,95,.45);
  border-radius: 12px;
  background: rgba(201,151,95,.05);
  animation: guiaAfterIn .7s var(--ease-out) both;
}
.guia-after[hidden] { display: none; }
/* Tras la descarga, el puente contextual sustituye al permanente */
.guia-form.is-sent ~ .guia-bridge { display: none; }
.guia-after p { color: var(--cream-2); font-size: .97rem; line-height: 1.7; }
@keyframes guiaAfterIn { from { opacity: 0; transform: translateY(10px); } to { opacity: 1; transform: none; } }
@media (prefers-reduced-motion: reduce) { .guia-after { animation: none; } }
@media (min-width: 960px) {
  .guia-grid { grid-template-columns: minmax(240px, .85fr) 1.15fr; gap: clamp(2.4rem, 4.5vw, 3.6rem); }
  .guia-cover { max-width: 330px; }
  .guia-cover { max-width: 340px; }
}
@media (prefers-reduced-motion: reduce) {
  .guia-cover img { transform: none; }
  .guia-cover:hover img { transform: translateY(-3px); }
}

/* =============================================================
   23. Donaciones
   ============================================================= */
.donaciones { background: var(--bg); border-block: 1px solid var(--line-2); padding-block: clamp(3.4rem, 8vw, 6rem); }
.donaciones-inner {
  display: grid; gap: 1.6rem; align-items: center;
  grid-template-columns: 1fr;
}
.donaciones h2 { font-size: clamp(1.7rem, 3.4vw, 2.4rem); margin-top: .9rem; }
.donaciones p { color: var(--cream-2); margin-top: .9rem; max-width: 56ch; line-height: 1.75; }
.donaciones-side { display: flex; flex-direction: column; gap: .8rem; align-items: flex-start; }
@media (min-width: 900px) {
  .donaciones-inner { grid-template-columns: 1.4fr auto; gap: 3rem; }
  .donaciones-side { align-items: flex-end; }
}

/* =============================================================
   24. Contacto
   ============================================================= */
.contacto {
  position: relative; overflow: hidden; isolation: isolate;
  background: var(--bg-2);
}
.contacto-bg { position: absolute; inset: 0; z-index: -2; }
.contacto-bg img { width: 100%; height: 100%; object-fit: cover; filter: brightness(.42) saturate(1.02); }
.contacto-tint {
  position: absolute; inset: 0; z-index: -1;
  background: linear-gradient(180deg, rgba(13,12,11,.84), rgba(13,12,11,.93));
}
.contacto-inner { text-align: center; max-width: 62ch; margin-inline: auto; }
.contacto .section-title { margin-inline: auto; }
.contacto .lede { margin-inline: auto; }
.contacto-actions { margin-top: 2rem; display: flex; flex-wrap: wrap; gap: .9rem; justify-content: center; }
.contacto-vias {
  margin-top: 2rem; display: flex; flex-wrap: wrap; gap: .6rem 1.6rem; justify-content: center;
  font-size: .92rem; color: var(--cream-2);
}
.contacto-vias a { color: var(--gold-soft); border-bottom: 1px solid rgba(201,151,95,.4); transition: color .3s, border-color .3s; }
.contacto-vias a:hover { color: var(--cream); border-color: var(--gold); }
.contacto-mini { margin-top: 1.4rem; font-size: .84rem; color: var(--tenue); }

/* Formulario */
.contact-alt { max-width: 620px; margin: 2.6rem auto 0; text-align: left; }
.contact-or { text-align: center; margin-bottom: 1.6rem; color: var(--cream-2); font-size: .95rem; }
.lead-form { display: grid; gap: 1rem; }
.lead-form .field { display: flex; flex-direction: column; gap: .4rem; }
.lead-form label { font-size: .74rem; letter-spacing: .12em; text-transform: uppercase; color: var(--tenue); }
.lead-form input, .lead-form textarea {
  width: 100%; font: inherit; color: var(--cream);
  background: rgba(245,243,238,.05);
  border: 1px solid var(--line); border-radius: 12px;
  padding: .85rem 1rem;
  transition: border-color .3s var(--ease-out), background-color .3s var(--ease-out);
}
.lead-form textarea { resize: vertical; min-height: 96px; }
.lead-form input::placeholder, .lead-form textarea::placeholder { color: var(--tenue-2); }
.lead-form input:focus, .lead-form textarea:focus { outline: none; border-color: var(--gold); background: rgba(245,243,238,.08); }
.lead-submit { position: relative; justify-self: start; margin-top: .2rem; }
.lead-submit-spin { display: none; }
.lead-form.is-sending .lead-submit-label { opacity: .55; }
.lead-form.is-sending .lead-submit-spin {
  display: inline-block; width: 15px; height: 15px; margin-left: .1rem; vertical-align: -2px;
  border: 2px solid rgba(32,21,9,.35); border-top-color: #201509; border-radius: 50%;
  animation: leadSpin .8s linear infinite;
}
@keyframes leadSpin { to { transform: rotate(360deg); } }
.lead-status { min-height: 1.2em; font-size: .92rem; margin: .1rem 0 0; }
.lead-status.is-ok  { color: var(--olive-soft); }
.lead-status.is-err { color: #E8A08A; }
.lead-form.is-sent { opacity: .9; }
@media (prefers-reduced-motion: reduce) { .lead-form.is-sending .lead-submit-spin { animation: none; } }

/* =============================================================
   25. Footer
   ============================================================= */
.footer {
  background: var(--bg);
  border-top: 1px solid var(--line-2);
  padding-block: clamp(3rem, 6vw, 4.5rem) 2.5rem;
}
.footer-grid { display: grid; gap: 2.2rem; grid-template-columns: 1fr; }
.footer-brand { display: inline-flex; align-items: center; gap: .8rem; }
.footer-brand img { width: 203px; height: 36px; }
.footer p { color: var(--tenue); max-width: 46ch; margin-top: 1rem; font-size: .95rem; }
.footer-col h4 { font-family: var(--sans); font-size: .74rem; letter-spacing: .2em; text-transform: uppercase; color: var(--gold); margin-bottom: 1rem; }
.footer-col a { display: block; color: var(--cream-2); padding: .3rem 0; font-size: .95rem; transition: color .3s; }
.footer-col a:hover { color: var(--gold-soft); }
.footer-note {
  margin-top: 2.4rem; padding-top: 1.6rem; border-top: 1px solid var(--line-2);
  display: flex; flex-wrap: wrap; gap: 1rem; justify-content: space-between; align-items: center;
  font-size: .82rem; color: var(--tenue-2);
}
.footer-note a { color: var(--tenue); }
.footer-note a:hover { color: var(--gold-soft); }
.footer-medical { font-size: .82rem; color: var(--tenue-2); max-width: 72ch; margin-top: 1.6rem; line-height: 1.65; }
@media (min-width: 760px) {
  .footer-grid { grid-template-columns: 1.6fr 1fr 1fr; gap: 3rem; }
}

/* =============================================================
   26. Chatbot flotante
   ============================================================= */
.chat-launcher {
  position: fixed; right: clamp(1rem, 3vw, 1.6rem); bottom: clamp(1rem, 3vw, 1.6rem);
  z-index: 400; width: 58px; height: 58px; border-radius: 50%;
  display: grid; place-items: center;
  background: var(--gold); color: #201509;
  box-shadow: 0 14px 34px -10px rgba(0,0,0,.5), 0 0 0 1px rgba(201,151,95,.4);
  transition: transform .35s var(--ease-soft), background-color .3s var(--ease-out);
}
.chat-launcher:hover { transform: translateY(-3px); background: var(--gold-soft); }
.chat-launcher svg { width: 26px; height: 26px; }
.chat-ic-close { display: none; }
.chat-launcher[aria-expanded="true"] .chat-ic-open { display: none; }
.chat-launcher[aria-expanded="true"] .chat-ic-close { display: block; }

.chat-panel {
  position: fixed; right: clamp(1rem, 3vw, 1.6rem);
  bottom: calc(clamp(1rem, 3vw, 1.6rem) + 70px);
  z-index: 401; width: min(380px, calc(100vw - 2rem));
  height: min(72vh, 600px);
  display: flex; flex-direction: column;
  background: var(--bg-3); color: var(--cream);
  border: 1px solid var(--line); border-radius: 18px; overflow: hidden;
  box-shadow: 0 30px 70px -20px rgba(0,0,0,.6);
  opacity: 0; transform: translateY(12px) scale(.98); pointer-events: none;
  transition: opacity .3s var(--ease-out), transform .3s var(--ease-out);
}
.chat-panel.is-open { opacity: 1; transform: none; pointer-events: auto; }
.chat-head { display: flex; align-items: center; gap: .7rem; padding: .85rem 1rem; border-bottom: 1px solid var(--line-2); background: var(--bg-2); }
.chat-head-mark { width: 34px; height: 34px; flex: 0 0 auto; border-radius: 50%; display: grid; place-items: center; background: rgba(201,151,95,.16); }
.chat-head-mark img { width: 22px; height: 22px; }
:root[data-theme="light"] .chat-head-mark img { filter: invert(1); }
.chat-head-txt { display: flex; flex-direction: column; line-height: 1.2; }
.chat-head-txt strong { font-family: var(--serif); font-size: 1.15rem; font-weight: 600; }
.chat-head-txt span { font-size: .74rem; color: var(--tenue); }
.chat-close { margin-left: auto; width: 34px; height: 34px; flex: 0 0 auto; display: grid; place-items: center; border-radius: 50%; color: var(--cream-2); }
.chat-close:hover { color: var(--gold-soft); }
.chat-close svg { width: 18px; height: 18px; }

.chat-body { flex: 1 1 auto; overflow-y: auto; padding: 1rem; display: flex; flex-direction: column; gap: .55rem; }
.chat-msg { max-width: 85%; padding: .7rem .9rem; border-radius: 14px; font-size: .95rem; line-height: 1.5; }
.chat-bot { align-self: flex-start; background: var(--bg-4); color: var(--cream); border-bottom-left-radius: 4px; }
.chat-user { align-self: flex-end; background: var(--gold); color: #201509; border-bottom-right-radius: 4px; }
.chat-quick { display: flex; flex-wrap: wrap; gap: .5rem; align-self: flex-start; }
.chat-chip {
  font: inherit; font-size: .88rem; padding: .5rem .9rem;
  border: 1px solid var(--gold); color: var(--gold-soft); border-radius: 999px;
  background: transparent; transition: background-color .25s var(--ease-out), color .25s var(--ease-out), transform .25s var(--ease-soft);
}
.chat-chip:hover { background: var(--gold); color: #201509; transform: translateY(-1px); }
.chat-wa {
  align-self: flex-start; display: inline-flex; align-items: center; gap: .4rem;
  padding: .6rem 1.05rem; border-radius: 999px; background: var(--olive); color: #14140c;
  font-weight: 600; font-size: .9rem; transition: transform .25s var(--ease-soft), background-color .25s var(--ease-out);
}
.chat-wa:hover { transform: translateY(-2px); background: var(--olive-soft); }

.chat-input { display: flex; gap: .5rem; padding: .7rem; border-top: 1px solid var(--line-2); background: var(--bg-2); }
.chat-input[hidden] { display: none; }
.chat-input input {
  flex: 1 1 auto; min-width: 0; font: inherit; color: var(--cream);
  background: var(--bg-3); border: 1px solid var(--line); border-radius: 999px; padding: .7rem 1rem;
}
.chat-input input::placeholder { color: var(--tenue-2); }
.chat-input input:focus { outline: none; border-color: var(--gold); }
.chat-send { width: 42px; height: 42px; flex: 0 0 auto; border-radius: 50%; display: grid; place-items: center; background: var(--gold); color: #201509; transition: transform .25s var(--ease-soft), background-color .25s var(--ease-out); }
.chat-send:hover { transform: translateY(-2px); background: var(--gold-soft); }
.chat-send svg { width: 18px; height: 18px; }

@media (max-width: 560px) {
  .chat-panel { right: 0; left: 0; bottom: 0; width: 100%; height: 88vh; max-height: 88vh; border-radius: 18px 18px 0 0; }
  html.chat-open .chat-launcher { display: none; }
}

/* =============================================================
   27. Página de créditos
   ============================================================= */
.page-credits { padding-top: 74px; }
.credits-head { padding-block: clamp(3rem,7vw,5rem) 1rem; }
.credits-back { display: inline-flex; align-items: center; gap: .5rem; color: var(--tenue); font-size: .9rem; }
.credits-back:hover { color: var(--gold-soft); }
.credits-list { list-style: none; display: grid; gap: 1rem; max-width: 820px; margin-top: 2rem; padding: 0; }
.credits-list li { padding-bottom: 1rem; border-bottom: 1px solid var(--line-2); color: var(--cream-2); font-size: .95rem; line-height: 1.6; }
.credits-list a { color: var(--gold-soft); }
.credits-list strong { color: var(--cream); font-weight: 600; }

/* =============================================================
   28. Movimiento reducido — solo lo intrusivo
   ============================================================= */
@media (prefers-reduced-motion: reduce) {
  .hero-mesh { animation: none; }
  .dust { display: none; }
  .hero-bg img { animation: none; transform: none; }
  .splash-logo { animation: none; }
  /* NO desactivar: hover, tilt, fade/reveal, marquee, count-up, subrayados */
}

/* =============================================================
   29. Tema claro (Light Editorial Cream) — el oscuro es el default
   ============================================================= */
:root[data-theme="light"] {
  --bg:        #F4EEE2;
  --bg-2:      #EBE3D2;
  --bg-3:      #FCFAF3;
  --bg-4:      #F3ECDC;

  --cream:     #2A231C;
  --cream-2:   #4C4238;
  --tenue:     #665C4D;
  --tenue-2:   #6E6455;

  --gold:      #C9975F;
  --gold-soft: #A9762F;
  --olive:     #9AA35A;
  --olive-soft:#6E7A38;

  --line:      rgba(42, 35, 28, .16);
  --line-2:    rgba(42, 35, 28, .08);

  --nav-bg:    rgba(244, 238, 226, .85);
}

/* Transición suave al cambiar de tema */
body, .section, .footer, .marquee, .quoteband, .puertas, .donaciones {
  transition: background-color .5s var(--ease-out), color .45s var(--ease-out);
}

/* Secciones "media" (foto con velo oscuro): texto SIEMPRE claro en ambos temas */
.hero, .quoteband, .contacto {
  --cream:     #F5F3EE;
  --cream-2:   #DDD6C9;
  --tenue:     #C9C4BA;
  --tenue-2:   #8B8375;
  --gold-soft: #D8B487;
  --line:      rgba(245, 243, 238, .14);
}
/* La ficha oscura sobre la foto mantiene texto claro en ambos temas */
.nosotros-stat { --tenue: #C9C4BA; --gold-soft: #D8B487; }
/* La insignia sobre la foto del lugar también */
.lugar-badge { --olive-soft: #B4BB7E; color: #B4BB7E; }

/* Navegación: texto claro mientras es transparente (sobre el hero) */
.nav .nav-link { color: rgba(245, 243, 238, .82); }
.nav .nav-link:hover { color: var(--on-media); }
.nav .nav-burger span { background: var(--on-media); }
.nav .nav-ctl { color: var(--on-media); border-color: rgba(245, 243, 238, .3); }
.nav .btn-ghost { color: var(--on-media); border-color: rgba(245, 243, 238, .3); background: rgba(245, 243, 238, .05); }

.nav.is-scrolled .nav-link { color: var(--cream-2); }
.nav.is-scrolled .nav-link:hover { color: var(--cream); }
.nav.is-scrolled .nav-burger span { background: var(--cream); }
.nav.is-scrolled .nav-ctl { color: var(--cream); border-color: var(--line); }
.nav.is-scrolled .btn-ghost { color: var(--cream); border-color: var(--line); background: transparent; }

/* El jaguar y el logotipo son de una sola tinta clara: sobre fondos crema se invierten */
:root[data-theme="light"] .nav.is-scrolled .brand-mark,
:root[data-theme="light"] .splash-logo,
:root[data-theme="light"] .splash-word,
:root[data-theme="light"] .footer-brand img { filter: invert(1); }

/* =============================================================
   30. Ajustes responsivos finales
   ============================================================= */
@media (min-width: 720px) { .hero-inner { max-width: min(88vw, 44rem); } }
@media (min-width: 1280px) { .hero-inner { max-width: 48rem; } }


/* Donaciones: foto real de las comunidades a un lado */
.donaciones-foto { margin: 0; }
.donaciones-foto img {
  width: 100%; height: auto; border-radius: var(--radius);
  border: 1px solid var(--line);
  box-shadow: 0 26px 60px -30px rgba(0,0,0,.65);
  filter: saturate(.94) contrast(1.02);
}
.donaciones-foto figcaption {
  margin-top: .7rem; font-size: .82rem; color: var(--tenue-2); line-height: 1.6;
}
@media (min-width: 900px) {
  .donaciones-inner { grid-template-columns: minmax(230px, .75fr) 1.25fr auto; align-items: center; }
  .donaciones-foto { max-width: 330px; }
}
@media (max-width: 899px) {
  .donaciones-foto { max-width: 320px; margin-inline: auto; }
}


/* El bloque "Del papel al territorio" vive bajo la portada (columna izquierda):
   equilibra las dos columnas y acorta mucho la seccion. */
.guia-grid > .guia-bridge { margin-top: 2.9rem; align-self: start; }
@media (min-width: 960px) {
  /* izquierda: portada (fila 1) y recuadro (fila 2). derecha: el texto ocupa las dos filas */
  .guia-grid { grid-template-rows: auto 1fr; }
  .guia-grid > .guia-cover  { grid-column: 1; grid-row: 1; }
  .guia-grid > .guia-bridge { grid-column: 1; grid-row: 2; max-width: 330px; margin-top: 2.9rem; }
  .guia-grid > .guia-text   { grid-column: 2; grid-row: 1 / span 2; }
}


/* WhatsApp flotante: al lado del chatbot, fondo transparente (solo borde e icono) */
.wa-fab {
  position: fixed; right: clamp(1rem, 3vw, 1.6rem); top: 50%; transform: translateY(-50%); bottom: auto;
  z-index: 400; width: 58px; height: 58px; border-radius: 50%;
  display: grid; place-items: center;
  background: transparent;
  color: var(--gold);
  border: 1px solid rgba(201,151,95,.45);
  backdrop-filter: blur(6px);
  transition: transform .35s var(--ease-soft), border-color .3s var(--ease-out), color .3s var(--ease-out);
}
.wa-fab:hover { transform: translateY(-50%) scale(1.06); border-color: var(--gold); color: var(--gold-soft); }
.wa-fab svg { width: 27px; height: 27px; }
html.chat-open .wa-fab { display: none; }




/* Video dentro de una seccion: se comporta como la foto que reemplaza */
.figura-video { width: 100%; height: auto; display: block; border-radius: inherit; object-fit: cover; }
.retiro-figure .figura-video { height: 100%; }


/* =============================================================
   Banner con video controlado por el scroll (patron kit-web-scrolling)
   La seccion mide 500vh y dentro un contenedor sticky de 100vh:
   mientras recorres esa altura el video avanza fotograma a fotograma.
   ============================================================= */
/* IMPORTANTE: el .hero original era grid con align-items:end y overflow:hidden.
   El overflow ANULA el position:sticky del hijo (lo convierte en su propio
   contenedor de scroll) y el align-items:end lo mandaba al fondo. Se anulan los tres. */
.hero {
  height: 250vh;            /* 250vh: 150vh de recorrido. Calibrado con dos pruebas reales de
                                Andrea: 50vh de recorrido = 2 toques, 100vh = 3 toques (una recta,
                                no una simple proporcion desde cero: cada 50vh de recorrido suma un
                                toque). Extrapolando esa misma recta, 150vh de recorrido = 4 toques. */
  min-height: 0;
  display: block;
  align-items: initial;
  overflow: visible;
  position: relative;
  padding: 0;
}
.hero-sticky {
  position: sticky; top: 0; height: 100vh; height: 100svh; width: 100%;
  overflow: hidden; display: flex; align-items: center;
}
.hero-bg { position: absolute; inset: 0; overflow: hidden; z-index: 0; }
.hero-poster, .hero-video {
  position: absolute; top: 0; left: 0; width: 100%; height: 100%; object-fit: cover;
}
.hero-video { opacity: 0; transition: opacity .8s var(--ease-out); }
.hero-video.is-on { opacity: 1; }
.hero-sticky > .container { position: relative; z-index: 2; width: 100%; }

/* barra de avance del video, en dorado de marca */
.hero-progress {
  position: absolute; left: 0; bottom: 0; width: 100%; height: 3px;
  background: rgba(245,243,238,.14); z-index: 3;
}
.hero-progress i {
  display: block; height: 100%; width: 0%;
  background: linear-gradient(90deg, var(--gold), var(--gold-soft));
  transition: width .06s linear;
}

/* Movil y reduced-motion: banner normal de 100vh y video en bucle */
@media (max-width: 860px) {
  .hero { height: 100vh; }
  .hero-sticky { position: relative; height: 100vh; }
  .hero-progress { display: none; }
}
@media (prefers-reduced-motion: reduce) {
  .hero { height: 100vh; }
  .hero-sticky { position: relative; }
  .hero-video { display: none; }
  .hero-progress { display: none; }
}


/* Los velos van SOBRE el video del banner: sin esto el texto se pierde contra las nubes */
.hero-sticky > .hero-tint  { z-index: 1; }
.hero-sticky > .hero-mesh  { z-index: 1; }
.hero-sticky > .hero-grain { z-index: 1; }
.hero-sticky > .hero-tint {
  background:
    linear-gradient(100deg, rgba(13,12,11,.62) 0%, rgba(13,12,11,.48) 38%, rgba(13,12,11,.12) 72%, rgba(13,12,11,.18) 100%),
    linear-gradient(180deg, rgba(13,12,11,.30) 0%, rgba(13,12,11,.06) 32%, rgba(13,12,11,.30) 72%, rgba(13,12,11,.88) 100%);
}
.hero-sticky > .hero-mesh { opacity: .55; }
.hero-sticky .hero-title,
.hero-sticky .hero-sub,
.hero-sticky .kicker { text-shadow: 0 2px 18px rgba(9,8,7,.55); }
@media (max-width: 860px) {
  .hero-sticky > .hero-tint {
    background:
      linear-gradient(180deg, rgba(13,12,11,.72) 0%, rgba(13,12,11,.48) 30%, rgba(13,12,11,.80) 74%, rgba(13,12,11,.97) 100%);
  }
}

/* Video de la dieta previa */
.alim-figure {
  margin: 0 0 clamp(2rem, 4vw, 3rem);
  border-radius: var(--r-lg, 18px);
  overflow: hidden;
  border: 1px solid rgba(201,151,95,.18);
  max-height: 340px;
}
.alim-figure .figura-video { height: 100%; max-height: 340px; object-fit: cover; }

/* ---- Coste de pintado durante el banner con scroll ----
   .hero-mesh animaba --mesh-angle/--mesh-x/--mesh-y DENTRO de un conic-gradient y despues les
   aplicaba blur(90px) + mix-blend-mode: screen. Animar variables dentro de un degradado no se
   puede componer en la GPU: obliga a rasterizar y desenfocar el degradado entero en CADA cuadro,
   en el mismo hilo al que le estamos pidiendo los saltos del video. Se conserva el aspecto,
   pero quieto. Igual con kenBurns: con el video encendido, el poster de debajo ni se ve. */
.hero-sticky > .hero-mesh {
  animation: none;
  --mesh-angle: 42deg; --mesh-x: 38%; --mesh-y: 46%;
  filter: blur(72px) saturate(115%);
}
.hero-bg.video-encendido img { animation: none; will-change: auto; }
.hero-sticky .hero-video { backface-visibility: hidden; }

/* El boton flotante esta FIJO encima del video del banner. Con backdrop-filter el navegador
   tiene que rehacer el desenfoque del fondo en cada salto del video mientras se hace scroll.
   El fondo del boton ya es transparente, asi que el desenfoque no aportaba casi nada. */
.wa-fab { backdrop-filter: none; -webkit-backdrop-filter: none; }
/* El marquee se detiene cuando no esta a la vista: animar fuera de pantalla es gasto puro.
   Por defecto anda; solo se pausa cuando el observador CONFIRMA que salio de pantalla, para
   que un fallo del observador nunca deje el marquee congelado. */
.marquee.fuera-de-vista .marquee-track { animation-play-state: paused; }

/* La barra de avance se reescribe en CADA cuadro desde el JS: una transicion CSS encima
   encola una animacion nueva 60 veces por segundo y ademas repinta todo el ancho sobre el video. */
.hero-progress i { transition: none; }

/* ---- Testimonios: video propio (assets/video/testimonios/), ya no depende de Drive ---- */
.testi-grid {
  display: grid; grid-template-columns: repeat(auto-fit, minmax(300px, 1fr));
  gap: clamp(1.6rem, 4vw, 2.4rem); margin: 0 0 clamp(1.6rem, 3vw, 2.2rem);
}
.testi-card { margin: 0 }
.testi-frame {
  position: relative; aspect-ratio: 16 / 9; border-radius: var(--radius);
  overflow: hidden; background: var(--bg-3); border: 1px solid var(--linea-2);
}
.testi-frame iframe { position: absolute; inset: 0; width: 100%; height: 100%; border: 0; }
.testi-frame video { position: absolute; inset: 0; width: 100%; height: 100%; border: 0; object-fit: contain; background: #000; }
.testi-card figcaption { display: flex; align-items: baseline; gap: .6rem; margin-top: .9rem; flex-wrap: wrap; }
.testi-n { font-family: var(--serif); font-size: 1.15rem; color: var(--cream); }
.testi-c { font-size: .85rem; color: var(--tenue-2); }

/* ---- Diario: vista previa de articulos en el home ---- */
.diario-grid {
  display: grid; grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));
  gap: clamp(1.4rem, 3.5vw, 2.2rem);
}
.diario-card { display: block; text-decoration: none; color: inherit; transition: transform .3s var(--ease-out); }
.diario-card:hover { transform: translateY(-3px); }
.diario-frame {
  position: relative; aspect-ratio: 16 / 9; border-radius: var(--radius);
  overflow: hidden; background: var(--bg-3); border: 1px solid var(--line-2); margin-bottom: 1rem;
}
.diario-frame img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; transition: transform .5s var(--ease-out); }
.diario-card:hover .diario-frame img { transform: scale(1.04); }
.diario-t { display: block; font-family: var(--serif); font-size: 1.2rem; line-height: 1.35; color: var(--cream); margin-bottom: .5rem; }
.diario-d { display: block; font-size: .92rem; line-height: 1.6; color: var(--tenue-2); }

/* ---- Preguntas frecuentes (AEO): acordeon nativo, sin JS ---- */
.faq-list { display: flex; flex-direction: column; gap: .7rem; max-width: 74ch; margin: 0 auto; }
.faq-item {
  border: 1px solid var(--line-2); border-radius: var(--radius); background: var(--bg-3);
  padding: 1.3rem 1.5rem;
}
.faq-item summary {
  cursor: pointer; list-style: none; font-family: var(--serif); font-size: clamp(1.2rem, 2vw, 1.45rem);
  line-height: 1.4; color: var(--cream); display: flex; align-items: center; justify-content: space-between; gap: 1rem;
}
.faq-item summary::-webkit-details-marker { display: none; }
.faq-item summary::after {
  content: "+"; flex-shrink: 0; font-family: var(--sans); font-size: 1.5rem; color: var(--gold);
  transition: transform .3s var(--ease-out);
}
.faq-item[open] summary::after { transform: rotate(45deg); }
.faq-item p { margin: 1rem 0 0; font-size: clamp(1.02rem, 1.6vw, 1.18rem); line-height: 1.75; color: var(--tenue-2); }
.testi-nota { text-align: center; color: var(--tenue-2); font-size: .88rem; max-width: 52ch; margin: 0 auto; }

/* fix scroll 17-sep: el menu movil CERRADO (clip-path) seguia capturando scroll/clics como overlay fixed; ocultarlo cuando aria-hidden=true. Abre bien via .nav-burger (aria-hidden=false). */
.nav-mobile[aria-hidden="true"]{display:none !important}


/* Safari/WebKit de escritorio 17-sep: el banner con video scrubbeado por scroll pinta fotogramas negros; se cae al poster fijo (banner simple), como en reduced-motion */
html.hero-simple .hero { height: 100vh; }
html.hero-simple .hero-sticky { position: relative; height: 100vh; height: 100svh; }
html.hero-simple .hero-video { display: none; }
html.hero-simple .hero-progress { display: none; }