/* =========================================================
   TED & Graves' Support Community Alliance
   =========================================================
   El sistema de temas está en dos capas:

   1. Tokens de marca (--ink, --teal…) — no cambian nunca.
   2. Tokens de superficie (--s-*) — los redefine cada sección.

   Así, poner una sección en oscuro es añadirle `.is-dark`: todos los
   componentes de dentro (tarjetas, iconos, inputs, líneas) se adaptan
   solos. Nada de duplicar reglas por variante.
   ========================================================= */

:root{
  /* ---------- Marca ---------- */
  --ink:        #0B2E33;
  --ink-2:      #0F3D42;
  --ink-soft:   #15464C;
  --teal:       #12736E;
  --teal-bright:#1FA89D;
  --accent:     #E8804F;
  --accent-soft:#F6B98F;

  --cream:      #FBF7F1;
  --sand:       #F4ECE3;
  --white:      #FFFFFF;

  --text:       #16323A;
  --text-muted: #5C7178;
  --text-onDark:#E8F1F0;
  --text-onDark-muted: rgba(232,241,240,.72);

  --line:       rgba(11,46,51,.10);
  --line-dark:  rgba(232,241,240,.14);

  --glass-light:    linear-gradient(148deg, rgba(255,255,255,.88), rgba(255,255,255,.50));
  --glass-light-bd: rgba(255,255,255,.78);
  --glass-dark:     linear-gradient(148deg, rgba(255,255,255,.11), rgba(255,255,255,.035));
  --glass-dark-bd:  rgba(232,241,240,.16);

  --blur:      blur(16px) saturate(150%);
  --blur-soft: blur(10px) saturate(130%);

  --shadow-soft: 0 26px 60px -36px rgba(11,46,51,.42);
  --shadow-lift: 0 40px 80px -44px rgba(11,46,51,.55);
  --hi-light:    inset 0 1px 0 rgba(255,255,255,.9);
  --hi-dark:     inset 0 1px 0 rgba(255,255,255,.12);

  /* ---------- Tipografía ---------- */
  --font-display:"Fraunces", ui-serif, Georgia, "Times New Roman", serif;
  --font-body:"Inter", -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif;

  /* ---------- Layout ---------- */
  /* Las rejillas y las imágenes se estiran hasta 1560px; los párrafos
     se frenan solos en ~68 caracteres por línea (ver .prose p), que es
     donde la lectura deja de cansar por mucho monitor que haya. */
  --shell:      1560px;
  --shell-wide: 1560px;
  --shell-text: 920px;
  --gutter: clamp(20px, 4.5vw, 64px);
  --radius: 20px;
  --radius-lg: 30px;

  --ease: cubic-bezier(.22,.61,.36,1);

  /* ---------- Superficie: claro (por defecto) ---------- */
  --s-text:        var(--text);
  --s-muted:       var(--text-muted);
  --s-head:        var(--ink);
  --s-line:        var(--line);
  --s-eyebrow:     var(--teal);
  --s-glass:       var(--glass-light);
  --s-glass-bd:    var(--glass-light-bd);
  --s-hi:          var(--hi-light);
  --s-shadow:      var(--shadow-soft);
  --s-shadow-lift: var(--shadow-lift);
  --s-icon:        var(--teal);
  --s-icon-bg:     linear-gradient(150deg, rgba(31,168,157,.20), rgba(31,168,157,.06));
  --s-icon-bd:     rgba(255,255,255,.7);
  --s-input-bg:    rgba(255,255,255,.72);
  --s-input-focus: var(--white);
  --s-placeholder: rgba(92,113,120,.65);
  --s-link:        var(--teal);
  --s-error:       #B03A22;
  --s-error-bg:    rgba(200,85,61,.10);
  --s-error-bd:    rgba(200,85,61,.32);
}

/* ---------- Superficie: oscuro ---------- */
.is-dark{
  background-color: var(--ink);
  color: var(--text-onDark);

  --s-text:        var(--text-onDark);
  --s-muted:       var(--text-onDark-muted);
  --s-head:        var(--white);
  --s-line:        var(--line-dark);
  --s-eyebrow:     var(--accent-soft);
  --s-glass:       var(--glass-dark);
  --s-glass-bd:    var(--glass-dark-bd);
  --s-hi:          var(--hi-dark);
  --s-shadow:      0 26px 60px -40px rgba(0,0,0,.7);
  --s-shadow-lift: 0 40px 80px -44px rgba(0,0,0,.8);
  --s-icon:        var(--accent-soft);
  --s-icon-bg:     linear-gradient(150deg, rgba(246,185,143,.22), rgba(246,185,143,.05));
  --s-icon-bd:     var(--glass-dark-bd);
  --s-input-bg:    rgba(0,0,0,.22);
  --s-input-focus: rgba(0,0,0,.34);
  --s-placeholder: rgba(232,241,240,.42);
  --s-link:        var(--accent-soft);
  --s-error:       #FFB4A5;
  --s-error-bg:    rgba(255,120,100,.13);
  --s-error-bd:    rgba(255,120,100,.35);
}

/* =========================================================
   Reset / base
   ========================================================= */
*,*::before,*::after{ box-sizing:border-box; }
html{ -webkit-text-size-adjust:100%; scroll-behavior:smooth; scroll-padding-top:88px; }
body{
  margin:0;
  background:var(--cream);
  color:var(--text);
  font-family:var(--font-body);
  font-size:clamp(16px,.42vw + 15.1px,18px);
  line-height:1.65;
  -webkit-font-smoothing:antialiased;
  overflow-x:hidden;
}
img{ max-width:100%; display:block; }
a{ color:inherit; }
h1,h2,h3,h4{ margin:0; font-family:var(--font-display); font-weight:400; line-height:1.1; letter-spacing:-.015em; color:var(--s-head); }
p{ margin:0 0 1.1em; }
ul,ol{ margin:0; padding:0; list-style:none; }
button{ font:inherit; }
figure{ margin:0; }
code{
  font-family:ui-monospace,SFMono-Regular,Menlo,monospace; font-size:.88em;
  background:rgba(11,46,51,.07); padding:.15em .45em; border-radius:6px;
}
[hidden]{ display:none !important; }
::selection{ background:var(--accent); color:#fff; }

.skip-link{ position:absolute; left:-9999px; top:0; z-index:200;
  background:var(--ink); color:#fff; padding:12px 18px; border-radius:0 0 12px 0; }
.skip-link:focus{ left:0; }
:focus-visible{ outline:2.5px solid var(--teal-bright); outline-offset:3px; border-radius:6px; }

.shell{ width:100%; max-width:var(--shell); margin-inline:auto; padding-inline:var(--gutter); }
.shell-wide{ max-width:var(--shell-wide); }
.shell-text{ max-width:var(--shell-text); }

/* Grano de película sobre toda la página */
body::after{
  content:""; position:fixed; inset:0; z-index:1; pointer-events:none;
  opacity:.2; mix-blend-mode:multiply;
  background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='140' height='140'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.85' numOctaves='3'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)' opacity='.3'/%3E%3C/svg%3E");
}

.sprite{ position:absolute; width:0; height:0; overflow:hidden; }
.ic{ width:1.25em; height:1.25em; flex:none; fill:none; stroke:currentColor; }
.ic-arrow{ width:1.05em; height:1.05em; transition:transform .35s var(--ease); }

/* =========================================================
   Auras
   ========================================================= */
.aura{ position:relative; isolation:isolate; }
.aura-layer{ position:absolute; inset:0; overflow:hidden; z-index:-1; pointer-events:none; }
.orb{ position:absolute; border-radius:50%; filter:blur(72px); }
.orb-a{
  width:min(46vw,620px); aspect-ratio:1; left:-12%; top:-14%;
  background:radial-gradient(circle at 35% 35%, #9FE3DC, #12736E 72%); opacity:.24;
}
.orb-b{
  width:min(40vw,520px); aspect-ratio:1; right:-10%; bottom:-18%;
  background:radial-gradient(circle at 60% 40%, #F8C79E, #E8804F 74%); opacity:.20;
}
.is-dark .orb-a{ opacity:.30; }
.is-dark .orb-b{ opacity:.24; }

/* claras */
.aura-1{ background-image:
  radial-gradient(44% 38% at 6% 2%,    rgba(31,168,157,.20), transparent 66%),
  radial-gradient(40% 36% at 99% 24%,  rgba(232,128,79,.15), transparent 66%),
  radial-gradient(46% 34% at 62% 104%, rgba(159,227,220,.20), transparent 66%); }

.aura-2{ background-image:
  radial-gradient(46% 40% at 96% 4%,   rgba(31,168,157,.18), transparent 66%),
  radial-gradient(40% 34% at 4% 46%,   rgba(232,128,79,.13), transparent 66%),
  radial-gradient(50% 40% at 46% 106%, rgba(255,255,255,.55), transparent 64%); }

.aura-3{ background-image:
  radial-gradient(38% 34% at 50% -4%,  rgba(232,128,79,.13), transparent 64%),
  radial-gradient(44% 40% at 2% 62%,   rgba(31,168,157,.17), transparent 66%),
  radial-gradient(44% 40% at 100% 78%, rgba(159,227,220,.20), transparent 66%); }

.aura-4{ background-image:
  radial-gradient(50% 44% at 50% -8%,  rgba(31,168,157,.18), transparent 66%),
  radial-gradient(38% 34% at 4% 96%,   rgba(232,128,79,.14), transparent 66%),
  radial-gradient(38% 34% at 98% 92%,  rgba(255,255,255,.6),  transparent 64%); }

.aura-5{ background-image:
  radial-gradient(46% 40% at 4% 6%,    rgba(31,168,157,.18), transparent 66%),
  radial-gradient(46% 42% at 96% 84%,  rgba(232,128,79,.16), transparent 66%),
  radial-gradient(40% 34% at 56% 0%,   rgba(255,255,255,.5),  transparent 62%); }

/* oscuras */
.aura-d1{ background-image:
  radial-gradient(46% 40% at 4% 4%,    rgba(31,168,157,.24), transparent 66%),
  radial-gradient(42% 38% at 98% 74%,  rgba(232,128,79,.16), transparent 66%); }

.aura-d2{ background-image:
  radial-gradient(44% 40% at 96% 6%,   rgba(31,168,157,.22), transparent 66%),
  radial-gradient(40% 36% at 2% 82%,   rgba(232,128,79,.15), transparent 66%); }

.aura-d3{ background-image:
  radial-gradient(50% 42% at 50% -6%,  rgba(31,168,157,.22), transparent 66%),
  radial-gradient(38% 34% at 6% 96%,   rgba(232,128,79,.14), transparent 66%),
  radial-gradient(38% 34% at 94% 96%,  rgba(31,168,157,.14), transparent 66%); }

.aura-d4{ background-image:
  radial-gradient(44% 46% at 2% 0%,    rgba(31,168,157,.16), transparent 66%),
  radial-gradient(40% 44% at 98% 100%, rgba(232,128,79,.12), transparent 66%); }

.aura-d5{ background-image:
  radial-gradient(42% 38% at 98% 8%,   rgba(31,168,157,.20), transparent 66%),
  radial-gradient(44% 40% at 0% 88%,   rgba(232,128,79,.15), transparent 66%); }

/* =========================================================
   Tipografía
   ========================================================= */
.h2{ font-size:clamp(31px,3.3vw,54px); color:var(--s-head); }
.eyebrow{
  font-family:var(--font-body);
  font-size:12.5px; font-weight:600; letter-spacing:.16em; text-transform:uppercase;
  color:var(--s-eyebrow); margin:0 0 18px;
}
.lede{ font-size:clamp(17px,1.15vw,21px); color:var(--s-muted); }
.measure{ max-width:22ch; }
.center-block{ margin-inline:auto; }
.center{ text-align:center; }
.center .measure{ max-width:24ch; }
.small{ font-size:14.5px; color:var(--s-muted); }
.small a{ color:var(--s-link); text-underline-offset:3px; }
.prose p{ font-size:clamp(16.5px,.9vw,19px); color:var(--s-muted); max-width:68ch; }
.pull{
  font-family:var(--font-display);
  font-size:clamp(21px,2vw,32px); line-height:1.35; color:var(--s-head);
  max-width:32ch; margin-top:.6em;
}
.diagnosis .pull{ text-align:center; max-width:46ch; }

/* =========================================================
   Botones
   ========================================================= */
.btn{
  --btn-bg:var(--ink); --btn-fg:#fff; --btn-bd:var(--ink);
  display:inline-flex; align-items:center; justify-content:center; gap:.55em;
  padding:14px 26px; border:1px solid var(--btn-bd); border-radius:999px;
  background:var(--btn-bg); color:var(--btn-fg) !important;
  font-family:var(--font-body); font-size:15px; font-weight:600; letter-spacing:.01em;
  text-decoration:none; cursor:pointer;
  transition:transform .35s var(--ease), background .3s, border-color .3s, box-shadow .35s var(--ease);
}
.btn:hover{ transform:translateY(-2px); box-shadow:0 16px 34px -16px rgba(11,46,51,.55); }
.btn:hover .ic-arrow{ transform:translateX(3px); }
.btn:active{ transform:translateY(0); }
.btn-primary{ --btn-bg:var(--ink); --btn-bd:var(--ink); }
.is-dark .btn-primary{ --btn-bg:var(--white); --btn-fg:var(--ink); --btn-bd:var(--white); }
.btn-accent{ --btn-bg:var(--accent); --btn-bd:var(--accent); --btn-fg:#3B1503; }
.btn-ghost{
  --btn-bg:rgba(255,255,255,.5); --btn-fg:var(--ink); --btn-bd:rgba(255,255,255,.8);
  backdrop-filter:var(--blur-soft); -webkit-backdrop-filter:var(--blur-soft);
  box-shadow:var(--hi-light);
}
.btn-ghost:hover{ --btn-bg:rgba(255,255,255,.78); }
.is-dark .btn-ghost{
  --btn-bg:rgba(255,255,255,.07); --btn-fg:var(--text-onDark); --btn-bd:var(--glass-dark-bd);
  box-shadow:var(--hi-dark);
}
.is-dark .btn-ghost:hover{ --btn-bg:rgba(255,255,255,.14); --btn-bd:var(--accent-soft); }
.btn-ghost-dark{
  --btn-bg:rgba(255,255,255,.07); --btn-fg:var(--text-onDark); --btn-bd:var(--glass-dark-bd);
  backdrop-filter:var(--blur-soft); -webkit-backdrop-filter:var(--blur-soft);
}
.btn-ghost-dark:hover{ --btn-bg:rgba(255,255,255,.14); --btn-bd:var(--accent-soft); }
.btn-lg{ padding:17px 34px; font-size:16px; }
.btn-sm{ padding:11px 20px; font-size:14px; }

.link-arrow{
  display:inline-flex; align-items:center; gap:.5em;
  font-weight:600; font-size:15px; color:var(--s-link);
  text-decoration:none; margin-top:auto; word-break:break-word;
}
.link-arrow:hover{ text-decoration:underline; text-underline-offset:4px; }
.link-arrow:hover .ic-arrow{ transform:translateX(3px); }

/* =========================================================
   Cabecera
   ========================================================= */
.site-header{
  position:fixed; inset:0 0 auto 0; z-index:100;
  transition:background .4s var(--ease), box-shadow .4s var(--ease), transform .4s var(--ease);
}
.site-header.is-stuck{
  background:rgba(251,247,241,.72);
  backdrop-filter:blur(18px) saturate(180%);
  -webkit-backdrop-filter:blur(18px) saturate(180%);
  box-shadow:0 1px 0 rgba(255,255,255,.6), 0 10px 30px -22px rgba(11,46,51,.4);
}
.header-inner{ display:flex; align-items:center; justify-content:space-between; gap:24px; padding-block:18px; }

.brand{ display:flex; align-items:center; gap:12px; text-decoration:none; color:var(--ink); }
.brand-mark{ display:grid; place-items:center; width:34px; height:34px; color:var(--teal); flex:none; }
.brand-mark svg{ width:100%; height:100%; display:block; }
.brand-text{ display:flex; flex-direction:column; line-height:1.15; }
.brand-text strong{ font-family:var(--font-display); font-weight:500; font-size:17px; letter-spacing:-.01em; }
.brand-text em{ font-style:normal; font-size:11px; letter-spacing:.1em; text-transform:uppercase; color:var(--text-muted); }

.nav{ display:flex; align-items:center; gap:30px; }
.nav a{ text-decoration:none; font-size:15px; font-weight:500; color:var(--ink); position:relative; }
.nav a:not(.btn)::after{
  content:""; position:absolute; left:0; right:0; bottom:-5px; height:1.5px;
  background:currentColor; transform:scaleX(0); transform-origin:right;
  transition:transform .4s var(--ease);
}
.nav a:not(.btn):hover::after{ transform:scaleX(1); transform-origin:left; }
.nav a:not(.btn).is-active{ color:var(--teal); }
.nav a:not(.btn).is-active::after{ transform:scaleX(1); transform-origin:left; background:var(--teal); }

.nav-toggle{
  display:none; width:46px; height:46px; border:1px solid rgba(255,255,255,.75); border-radius:15px;
  background:rgba(255,255,255,.6); position:relative; cursor:pointer;
  backdrop-filter:var(--blur-soft); -webkit-backdrop-filter:var(--blur-soft);
  box-shadow:var(--hi-light), var(--shadow-soft);
}
.nav-toggle span{
  position:absolute; left:13px; right:13px; height:1.8px; background:var(--ink); border-radius:2px;
  transition:transform .35s var(--ease), opacity .25s;
}
.nav-toggle span:nth-child(1){ top:19px; }
.nav-toggle span:nth-child(2){ top:25px; }
.nav-toggle[aria-expanded="true"] span:nth-child(1){ transform:translateY(3px) rotate(45deg); }
.nav-toggle[aria-expanded="true"] span:nth-child(2){ transform:translateY(-3px) rotate(-45deg); }

.scroll-progress{
  position:fixed; left:0; top:0; height:3px; width:100%; z-index:101;
  transform:scaleX(0); transform-origin:0 50%; pointer-events:none;
  background:linear-gradient(90deg, var(--teal-bright), var(--accent));
  box-shadow:0 0 18px rgba(31,168,157,.6);
}

/* ---------- Selector de idioma ---------- */
.lang{
  display:flex; align-items:center; gap:2px; padding:3px;
  border-radius:999px; border:1px solid var(--line);
  background:rgba(255,255,255,.5);
  backdrop-filter:var(--blur-soft); -webkit-backdrop-filter:var(--blur-soft);
  box-shadow:var(--hi-light);
}
.lang-btn{
  display:inline-flex; align-items:center; gap:7px;
  padding:6px 13px 6px 9px; border-radius:999px;
  font-size:12.5px; font-weight:600; letter-spacing:.04em;
  color:var(--text-muted); text-decoration:none;
  transition:background .3s, color .3s;
}
.lang-btn:hover{ color:var(--ink); background:rgba(255,255,255,.7); }
.lang-btn[aria-current="true"]{ color:var(--ink); background:var(--white); box-shadow:var(--hi-light); }
.lang-btn .flag{ display:block; width:20px; height:14px; border-radius:3px; overflow:hidden; flex:none;
  box-shadow:0 0 0 1px rgba(11,46,51,.12); }
.lang-btn .flag svg{ display:block; width:100%; height:100%; }
.lang-btn::after{ display:none; }

/* =========================================================
   Hero
   ========================================================= */
.hero{
  position:relative; isolation:isolate; overflow:hidden;
  padding-block:clamp(130px,16vh,200px) clamp(80px,10vh,130px);
}
.hero-bg{ position:absolute; inset:0; z-index:-1; }
.blob{ position:absolute; border-radius:50%; filter:blur(70px); }
.blob-1{ width:52vw; height:52vw; max-width:780px; max-height:780px; left:-14vw; top:-12vw;
  background:radial-gradient(circle at 30% 30%, #9FE3DC, #12736E 70%); opacity:.32; }
.blob-2{ width:46vw; height:46vw; max-width:680px; max-height:680px; right:-12vw; top:4vh;
  background:radial-gradient(circle at 60% 40%, #F8C79E, #E8804F 72%); opacity:.28; }
.blob-3{ width:38vw; height:38vw; max-width:560px; max-height:560px; left:30vw; bottom:-20vw;
  background:radial-gradient(circle at 50% 50%, #CDE8E4, #7FC3BC 75%); opacity:.28; }
.grain{ display:none; }

.hero-inner{
  position:relative; display:grid; align-items:center;
  grid-template-columns:minmax(0,1.06fr) minmax(0,.8fr);
  gap:clamp(36px,5vw,88px);
}
.hero-title{
  font-size:clamp(38px,5vw,80px);
  line-height:1.02; letter-spacing:-.032em;
  max-width:15ch; margin:0 0 .5em; font-weight:300;
}
.hero-lede{ font-size:clamp(16.5px,1vw,20px); color:var(--text-muted); max-width:58ch; }
.hero-actions{ display:flex; flex-wrap:wrap; gap:14px; margin-top:34px; }
.hero-pills{ display:flex; flex-direction:column; gap:9px; margin-top:40px; align-items:flex-start; }
.hero-pills li{
  display:flex; align-items:center; gap:10px;
  font-size:14px; font-weight:500; color:var(--ink-soft);
  padding:9px 18px 9px 14px; border-radius:999px;
  background:rgba(255,255,255,.5); border:1px solid rgba(255,255,255,.7);
  backdrop-filter:var(--blur-soft); -webkit-backdrop-filter:var(--blur-soft);
  box-shadow:var(--hi-light);
}
.hero-pills .ic{ color:var(--teal); width:19px; height:19px; }

.hero-visual{ position:relative; display:grid; place-items:center; min-height:clamp(380px,42vw,600px); }
.iris{ position:absolute; inset:0; margin:auto; width:min(118%,640px); height:auto; overflow:visible; }
.iris-ring{ transform-origin:220px 220px; }
.hero-photo{
  position:relative; z-index:1;
  width:min(100%,460px); aspect-ratio:4/5;
  border-radius:250px 250px 30px 30px; overflow:hidden;
  box-shadow:var(--shadow-lift);
  border:1px solid rgba(255,255,255,.75);
}
.hero-photo img{ width:100%; height:100%; object-fit:cover; object-position:52% 40%; }
.hero-chip{
  position:absolute; z-index:2; left:-14%; bottom:-1%;
  display:flex; align-items:flex-start; gap:12px; max-width:300px;
  padding:16px 20px; border-radius:22px;
  background:var(--glass-light); border:1px solid var(--glass-light-bd);
  backdrop-filter:var(--blur); -webkit-backdrop-filter:var(--blur);
  box-shadow:var(--shadow-soft), var(--hi-light);
}
.hero-chip .ic{ color:var(--teal); width:22px; height:22px; margin-top:2px; }
.hero-chip p{ margin:0; font-size:13.5px; line-height:1.45; }
.hero-chip strong{ display:block; color:var(--ink); font-size:14px; }
.hero-chip span{ color:var(--text-muted); }

.scroll-hint{
  position:absolute; left:50%; bottom:22px; translate:-50% 0;
  width:22px; height:36px; border:1.5px solid rgba(255,255,255,.8); border-radius:12px;
  background:rgba(255,255,255,.35);
  backdrop-filter:var(--blur-soft); -webkit-backdrop-filter:var(--blur-soft);
}
.scroll-hint span{
  position:absolute; left:50%; top:8px; translate:-50% 0;
  width:3px; height:7px; border-radius:2px; background:var(--teal);
  animation:scrollDot 1.9s var(--ease) infinite;
}
@keyframes scrollDot{ 0%{opacity:0;transform:translateY(0)} 30%{opacity:1} 70%{opacity:1;transform:translateY(11px)} 100%{opacity:0;transform:translateY(14px)} }

/* La máscara necesita algo de aire abajo o recorta los trazos descendentes
   (g, y, p) con un line-height tan ajustado. El margen negativo lo compensa
   para que no altere el interlineado. */
[data-split] .word{
  display:inline-block; overflow:hidden; vertical-align:top;
  padding-bottom:.14em; margin-bottom:-.14em;
}
[data-split] .word > span{ display:inline-block; will-change:transform; }

/* =========================================================
   Marquee
   ========================================================= */
.marquee{
  overflow:hidden; padding-block:18px;
  background:linear-gradient(90deg, rgba(255,255,255,.5), rgba(244,236,227,.75), rgba(255,255,255,.5));
  border-block:1px solid rgba(255,255,255,.7);
  backdrop-filter:var(--blur-soft); -webkit-backdrop-filter:var(--blur-soft);
}
.marquee-track{
  display:flex; align-items:center; gap:32px; width:max-content;
  animation:slide 34s linear infinite;
  font-family:var(--font-display); font-size:clamp(16px,1.5vw,24px); color:var(--ink-soft);
}
.marquee-track i{ color:var(--accent); font-style:normal; }
@keyframes slide{ to{ transform:translateX(-50%); } }

/* =========================================================
   Secciones
   ========================================================= */
.section{ padding-block:clamp(80px,9.5vw,150px); }
.section-tint{ background-color:var(--sand); }

.section-head{ margin-bottom:clamp(44px,4.4vw,74px); }
.section-head.center{ text-align:center; max-width:900px; margin-inline:auto; }

.grid-2{
  display:grid; gap:clamp(34px,4.4vw,88px);
  grid-template-columns:minmax(0,.82fr) minmax(0,1fr);
  align-items:start;
}
.col-sticky{ position:sticky; top:108px; }
.col-sticky .btn{ margin-top:10px; }
.col-sticky .h2 + .small,
.col-sticky .h2 + p{ margin-top:20px; }

/* =========================================================
   Figuras
   ========================================================= */
.figure{
  position:relative; overflow:hidden; border-radius:var(--radius-lg);
  background:rgba(11,46,51,.06);
  border:1px solid var(--s-glass-bd);
  box-shadow:var(--s-shadow);
}
.figure picture{ display:block; width:100%; height:100%; }
.figure img{ width:100%; height:100%; object-fit:cover; transition:transform 1.2s var(--ease); }
.figure:hover img{ transform:scale(1.035); }
.figure-tall{ margin-top:36px; aspect-ratio:4/3.2; }
.figure-wide{ aspect-ratio:4/3.4; position:sticky; top:108px; }
.figure-why{ margin-top:38px; aspect-ratio:5/4; }
.figure-research{ margin-top:34px; aspect-ratio:4/3; }
.figure-banner{ aspect-ratio:21/9; margin-bottom:clamp(44px,4.6vw,66px); }
.figure figcaption{
  position:absolute; left:0; right:0; bottom:0;
  padding:38px 26px 20px; font-size:14px; color:#fff;
  background:linear-gradient(transparent, rgba(11,46,51,.85));
}

/* Lista numerada */
.need-list{ margin:36px 0 8px; border-top:1px solid var(--s-line); }
.need-list li{
  display:flex; align-items:baseline; gap:20px;
  padding:17px 0; border-bottom:1px solid var(--s-line);
  font-family:var(--font-display); font-size:clamp(18px,1.5vw,25px); color:var(--s-head);
}
.need-list li span{
  font-family:var(--font-body); font-size:11.5px; font-weight:600; letter-spacing:.14em;
  color:var(--s-eyebrow); flex:none; padding-top:.35em;
}

/* =========================================================
   Tarjetas de cristal
   ========================================================= */
.who-grid{
  display:grid; gap:clamp(24px,3.2vw,56px);
  grid-template-columns:minmax(0,.9fr) minmax(0,1fr); align-items:start;
}
.cards-stack{ display:grid; gap:20px; }
.card{
  background:var(--s-glass); border:1px solid var(--s-glass-bd);
  border-radius:var(--radius-lg); padding:30px 30px 32px;
  backdrop-filter:var(--blur); -webkit-backdrop-filter:var(--blur);
  box-shadow:var(--s-shadow), var(--s-hi);
  transition:transform .45s var(--ease), box-shadow .45s var(--ease), border-color .4s;
}
.card:hover{ transform:translateY(-5px); box-shadow:var(--s-shadow-lift), var(--s-hi); }
.card-icon{
  display:grid; place-items:center; width:52px; height:52px; border-radius:17px;
  background:var(--s-icon-bg); border:1px solid var(--s-icon-bd);
  color:var(--s-icon); margin-bottom:20px;
}
.card-icon .ic{ width:26px; height:26px; }
.card h3{ font-size:21px; margin-bottom:11px; line-height:1.25; color:var(--s-head); }
.card p{ margin:0; font-size:16px; color:var(--s-muted); }

/* Compromisos */
.commit-grid{ display:grid; gap:18px; grid-template-columns:repeat(4,minmax(0,1fr)); }
.commit-grid li{
  display:flex; flex-direction:column; gap:9px;
  padding:28px 26px 32px; border-radius:24px;
  background:var(--s-glass); border:1px solid var(--s-glass-bd);
  backdrop-filter:var(--blur); -webkit-backdrop-filter:var(--blur);
  box-shadow:var(--s-shadow), var(--s-hi);
  transition:transform .4s var(--ease), box-shadow .4s var(--ease);
}
.commit-grid li:hover{ transform:translateY(-4px); box-shadow:var(--s-shadow-lift), var(--s-hi); }
.commit-grid .ic{ width:27px; height:27px; color:var(--s-icon); margin-bottom:8px; }
.commit-grid b{ font-family:var(--font-display); font-weight:500; font-size:19px; color:var(--s-head); line-height:1.2; }
.commit-grid span{ font-size:15px; color:var(--s-muted); line-height:1.55; }

/* Pasos */
.steps{ margin-top:36px; display:grid; gap:15px; }
.steps li{ display:grid; grid-template-columns:27px minmax(0,1fr); gap:15px; align-items:start; }
.steps li span{
  display:grid; place-items:center; width:27px; height:27px; border-radius:50%;
  border:1px solid rgba(232,128,79,.6); background:rgba(232,128,79,.12);
  color:var(--accent); font-size:12px; font-weight:600; transform:translateY(2px);
}
.is-dark .steps li span{ color:var(--accent-soft); }
.steps li p{ margin:0; font-size:16px; line-height:1.55; color:var(--s-muted); }
.steps li b{ color:var(--s-head); font-weight:600; }

/* =========================================================
   "A community that…"
   ========================================================= */
.why-copy p{ color:var(--s-muted); max-width:54ch; }
.why-copy .h2{ margin-bottom:26px; max-width:20ch; }
.why-inner{
  display:grid; gap:clamp(38px,4.8vw,90px);
  grid-template-columns:minmax(0,1fr) minmax(0,1fr); align-items:start;
}
.why-stack{
  display:flex; flex-direction:column; gap:15px; position:sticky; top:124px;
  padding:36px 38px; border-radius:var(--radius-lg);
  background:var(--s-glass); border:1px solid var(--s-glass-bd);
  backdrop-filter:var(--blur); -webkit-backdrop-filter:var(--blur);
  box-shadow:var(--s-hi);
}
.why-line{
  margin:0; font-family:var(--font-display); font-weight:300;
  font-size:clamp(23px,2.5vw,42px); line-height:1.12; letter-spacing:-.02em;
  color:rgba(232,241,240,.3);
}
.why-line.is-static{ color:var(--accent-soft); font-size:clamp(19px,1.7vw,26px); margin-bottom:6px; }
.why-line b{ font-weight:500; color:var(--white); }

/* =========================================================
   Aviso destacado
   ========================================================= */
.notice{
  margin-top:34px; padding:26px 28px;
  border:1px solid var(--s-glass-bd); border-left:3px solid var(--accent);
  border-radius:20px;
  background:linear-gradient(148deg, rgba(232,128,79,.14), rgba(255,255,255,.03));
  backdrop-filter:var(--blur-soft); -webkit-backdrop-filter:var(--blur-soft);
  box-shadow:var(--s-hi);
}
.notice strong{
  display:block; font-size:12px; letter-spacing:.16em; text-transform:uppercase;
  color:var(--accent); margin-bottom:10px;
}
.is-dark .notice strong{ color:var(--accent-soft); }
.notice p{ margin:0; font-size:15.5px; color:var(--s-muted); }

/* =========================================================
   Chips
   ========================================================= */
.chip-cloud{
  display:flex; flex-wrap:wrap; justify-content:center; gap:13px;
  max-width:900px; margin:0 auto clamp(44px,4.6vw,66px);
}
.chip-cloud li{
  font-family:var(--font-display); font-size:clamp(17px,1.55vw,27px);
  padding:12px 28px; border-radius:999px;
  border:1px solid var(--s-glass-bd); background:var(--s-glass); color:var(--s-head);
  backdrop-filter:var(--blur-soft); -webkit-backdrop-filter:var(--blur-soft);
  box-shadow:var(--s-hi);
  transition:transform .4s var(--ease), border-color .4s, color .4s, box-shadow .4s;
}
.chip-cloud li:hover{
  transform:translateY(-4px) rotate(-1.2deg);
  border-color:rgba(232,128,79,.6); color:var(--accent);
  box-shadow:var(--s-shadow), var(--s-hi);
}
.is-dark .chip-cloud li:hover{ color:var(--accent-soft); }

/* =========================================================
   Visión
   ========================================================= */
.vision-inner{
  max-width:960px; margin-inline:auto; text-align:center;
  padding:clamp(38px,4.6vw,70px) clamp(24px,3.6vw,60px);
  border-radius:var(--radius-lg);
  background:var(--s-glass); border:1px solid var(--s-glass-bd);
  backdrop-filter:var(--blur); -webkit-backdrop-filter:var(--blur);
  box-shadow:var(--s-shadow), var(--s-hi);
}
.vision-quote{
  margin:0 0 28px; font-family:var(--font-display); font-weight:300;
  font-size:clamp(22px,2.5vw,41px); line-height:1.22; letter-spacing:-.02em; color:var(--s-head);
}
.vision-tail{ font-size:clamp(17px,1.15vw,21px); color:var(--s-muted); max-width:54ch; margin-inline:auto; }
.vision-tail em{ color:var(--s-link); font-style:italic; }

/* =========================================================
   FAQ
   ========================================================= */
.faq{
  border-radius:var(--radius-lg); padding:6px clamp(20px,2.6vw,36px);
  background:var(--s-glass); border:1px solid var(--s-glass-bd);
  backdrop-filter:var(--blur); -webkit-backdrop-filter:var(--blur);
  box-shadow:var(--s-shadow), var(--s-hi);
}
.faq-item + .faq-item{ border-top:1px solid var(--s-line); }
.faq-item summary{
  list-style:none; cursor:pointer; position:relative;
  padding:24px 46px 24px 0;
  font-family:var(--font-display); font-size:clamp(18px,1.35vw,23px); color:var(--s-head);
  transition:color .3s;
}
.faq-item summary::-webkit-details-marker{ display:none; }
.faq-item summary:hover{ color:var(--s-eyebrow); }
.faq-item summary::after,
.faq-item summary::before{
  content:""; position:absolute; right:6px; top:50%; background:var(--s-eyebrow); border-radius:2px;
  transition:transform .4s var(--ease), opacity .3s;
}
.faq-item summary::before{ width:16px; height:1.8px; translate:0 -50%; }
.faq-item summary::after{ width:1.8px; height:16px; right:13px; translate:0 -50%; }
.faq-item[open] summary::after{ transform:rotate(90deg); opacity:0; }
.faq-body{ overflow:hidden; }
.faq-body p{ margin:0 0 24px; font-size:16.5px; color:var(--s-muted); max-width:60ch; }
.faq-body a{ color:var(--s-link); }

/* =========================================================
   Alta en la comunidad
   ========================================================= */
.join-inner{
  display:grid; gap:clamp(34px,4.4vw,80px);
  grid-template-columns:minmax(0,.82fr) minmax(0,1fr); align-items:start;
}
.join-copy p{ color:var(--s-muted); max-width:50ch; }
.join-copy .h2{ margin-bottom:22px; max-width:16ch; }
.tick-list{ display:flex; flex-direction:column; gap:12px; margin:28px 0 26px; }
.tick-list li{ position:relative; padding-left:31px; font-size:16px; color:var(--s-text); }
.tick-list li::before{
  content:""; position:absolute; left:2px; top:.45em; width:14px; height:8px;
  border-left:2px solid var(--s-eyebrow); border-bottom:2px solid var(--s-eyebrow);
  transform:rotate(-45deg);
}
.join-form{
  background:var(--s-glass); border:1px solid var(--s-glass-bd);
  border-radius:var(--radius-lg); padding:clamp(20px,2.4vw,36px);
  backdrop-filter:var(--blur); -webkit-backdrop-filter:var(--blur);
  box-shadow:var(--s-shadow-lift), var(--s-hi);
}

/* =========================================================
   Contacto
   ========================================================= */
.contact-grid{ display:grid; gap:20px; grid-template-columns:repeat(3,minmax(0,1fr)); }
.contact-card{
  display:flex; flex-direction:column; gap:10px;
  padding:32px 30px 34px; border-radius:var(--radius-lg);
  border:1px solid var(--s-glass-bd); background:var(--s-glass);
  backdrop-filter:var(--blur); -webkit-backdrop-filter:var(--blur);
  box-shadow:var(--s-hi);
  transition:transform .45s var(--ease), border-color .4s, background .4s;
}
.contact-card:hover{ transform:translateY(-5px); border-color:rgba(246,185,143,.5); }
.contact-card h3{ font-size:22px; color:var(--s-head); }
.contact-card p{ margin:0 0 14px; font-size:15.5px; color:var(--s-muted); }
.contact-card .btn{ align-self:flex-start; margin-top:auto; }

.contact-note{
  display:flex; align-items:flex-start; gap:15px;
  margin-top:30px; padding:22px 26px; border-radius:22px;
  border:1px solid var(--s-glass-bd);
  background:linear-gradient(148deg, rgba(232,128,79,.16), rgba(255,255,255,.03));
  backdrop-filter:var(--blur-soft); -webkit-backdrop-filter:var(--blur-soft);
  box-shadow:var(--s-hi);
}
.contact-note .ic{ width:24px; height:24px; color:var(--accent-soft); margin-top:2px; }
.contact-note p{ margin:0; font-size:15px; color:var(--s-muted); }
.contact-note strong{ color:var(--s-head); }

/* =========================================================
   Cierre
   ========================================================= */
.closing{
  position:relative; isolation:isolate; overflow:hidden;
  color:var(--white); text-align:center;
  padding-block:clamp(96px,11vw,170px);
  background-color:var(--ink);
}
.closing-bg{ position:absolute; inset:0; z-index:-1; }
.closing-bg img{ width:100%; height:100%; object-fit:cover; opacity:.24; }
.closing-bg::after{
  content:""; position:absolute; inset:0;
  background:
    radial-gradient(50% 46% at 50% 0%, rgba(31,168,157,.30), transparent 66%),
    radial-gradient(46% 42% at 96% 100%, rgba(232,128,79,.24), transparent 66%),
    linear-gradient(160deg, rgba(11,46,51,.92) 0%, rgba(15,61,66,.88) 55%, rgba(19,80,85,.86) 100%);
}
.closing-title{
  font-weight:300; font-size:clamp(29px,4vw,62px); line-height:1.1; letter-spacing:-.025em;
  max-width:18ch; margin:0 auto 40px; color:var(--white);
}

/* =========================================================
   Pie
   ========================================================= */
.site-footer{ background-color:var(--ink); color:var(--text-onDark); padding-block:70px 34px; }
.footer-grid{
  display:grid; gap:44px; grid-template-columns:1.6fr 1fr 1.2fr 1.2fr;
  padding-bottom:48px; border-bottom:1px solid var(--line-dark);
}
.brand-footer{ color:var(--white); margin-bottom:16px; }
.brand-footer .brand-mark{ color:var(--accent-soft); }
.brand-footer .brand-text em{ color:var(--text-onDark-muted); }
.footer-tag{
  font-family:var(--font-display); font-size:19px; color:var(--accent-soft); margin:0; max-width:24ch;
}
.site-footer h4{
  font-family:var(--font-body); font-size:12px; font-weight:600; letter-spacing:.16em;
  text-transform:uppercase; color:var(--text-onDark-muted); margin-bottom:16px;
}
.footer-nav a, .footer-contact a{
  display:block; text-decoration:none; color:var(--text-onDark); font-size:15.5px;
  padding-block:5px; transition:color .3s, transform .3s var(--ease);
}
.footer-nav a:hover, .footer-contact a:hover{ color:var(--accent-soft); transform:translateX(3px); }
.footer-contact .small, .footer-news .small{ color:var(--text-onDark-muted); margin:10px 0 14px; }

.footer-legal{ padding-top:28px; }
.footer-legal p{ font-size:12.5px; line-height:1.6; color:rgba(232,241,240,.5); max-width:100ch; }
.footer-legal strong{ color:rgba(232,241,240,.72); }
.footer-legal a{ color:rgba(232,241,240,.62); }
.copyright{ margin:0; }

/* =========================================================
   Estados iniciales de las animaciones
   ========================================================= */
.js [data-anim]{ opacity:0; }
.js [data-anim="fade"]{ transform:translateY(22px); }
.js [data-anim="rise"]{ transform:translateY(38px); }
.js [data-anim="pop"]{ transform:scale(.9); }
.js .reveal-fade{ opacity:0; transform:translateY(20px); }

/* Scroll suave (Lenis) */
html.lenis, html.lenis body{ height:auto; }
.lenis.lenis-smooth{ scroll-behavior:auto !important; }
.lenis.lenis-stopped{ overflow:hidden; }

/* =========================================================
   Formularios
   ========================================================= */
.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;
}
.hp{ position:absolute; left:-9999px; width:1px; height:1px; overflow:hidden; }

.site-form{ display:grid; gap:19px; }
.site-form .f-field{ margin:0; display:grid; gap:7px; }
.f-row{ display:grid; gap:19px; grid-template-columns:repeat(2,minmax(0,1fr)); }

.site-form label{ font-size:13.5px; font-weight:600; color:var(--s-head); letter-spacing:.01em; }
.site-form .req{ color:var(--accent); }

.site-form input[type=text],
.site-form input[type=email],
.site-form select,
.site-form textarea{
  width:100%; padding:14px 17px; font:inherit; font-size:16px; color:var(--s-text);
  background:var(--s-input-bg); border:1px solid var(--s-line); border-radius:14px;
  outline:none; transition:border-color .25s, background .25s, box-shadow .25s;
  -webkit-appearance:none; appearance:none;
}
.site-form textarea{ resize:vertical; min-height:118px; line-height:1.55; }
.site-form select{
  background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='14' height='9' viewBox='0 0 14 9' fill='none'%3E%3Cpath d='M1 1l6 6 6-6' stroke='%2312736E' stroke-width='1.8' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E");
  background-repeat:no-repeat; background-position:right 17px center; padding-right:44px;
}
.is-dark .site-form select{
  background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='14' height='9' viewBox='0 0 14 9' fill='none'%3E%3Cpath d='M1 1l6 6 6-6' stroke='%23F6B98F' stroke-width='1.8' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E");
}
.site-form input::placeholder,
.site-form textarea::placeholder{ color:var(--s-placeholder); }

.site-form input:focus,
.site-form select:focus,
.site-form textarea:focus{
  border-color:var(--teal-bright); background:var(--s-input-focus);
  box-shadow:0 0 0 4px rgba(31,168,157,.16);
}
.site-form .has-error{ border-color:#C8553D; box-shadow:0 0 0 4px rgba(200,85,61,.12); }

.f-error{ font-size:13px; color:var(--s-error); font-weight:500; }
.f-error:empty{ display:none; }
.f-summary{
  margin:0; padding:14px 17px; border-radius:14px; font-size:14.5px;
  background:var(--s-error-bg); border:1px solid var(--s-error-bd); color:var(--s-error);
}

.f-group{ border:0; padding:0; margin:0; display:grid; gap:10px; }
.f-group legend{ font-size:13.5px; font-weight:600; color:var(--s-head); padding:0; margin-bottom:3px; }
.f-check{
  display:flex; align-items:center; gap:12px; font-weight:400; font-size:15.5px;
  color:var(--s-muted); cursor:pointer;
}
.f-check input,
.f-consent input{ flex:none; width:20px; height:20px; margin:0; cursor:pointer; accent-color:var(--teal); }
.f-consent{
  display:flex; align-items:flex-start; gap:13px;
  font-size:14px; font-weight:400; line-height:1.5; color:var(--s-muted);
  padding:17px 19px; border-radius:16px;
  background:var(--s-input-bg); border:1px solid var(--s-line); cursor:pointer;
}
.f-consent input{ margin-top:2px; }
.f-consent a{ color:var(--s-link); }
.f-consent-sm{ padding:0; background:transparent; border:0; font-size:13px; }

.f-submit{ justify-self:start; }
.f-submit.is-busy{ opacity:.75; cursor:progress; }

.f-note{ display:flex; align-items:center; gap:9px; margin:0; font-size:13px; color:var(--s-muted); }
.f-note .ic{ width:17px; height:17px; color:var(--s-icon); }

.f-success{ text-align:center; padding:clamp(30px,3.6vw,52px) 10px; }
.f-success .ic{ width:40px; height:40px; color:var(--s-icon); margin:0 auto 18px; }
.f-success h3{ font-size:23px; margin-bottom:11px; color:var(--s-head); }
.f-success p{ margin:0; font-size:16px; color:var(--s-muted); max-width:44ch; margin-inline:auto; }
.f-success:focus{ outline:none; }

.contact-form-wrap{
  margin-top:24px; padding:clamp(26px,3.2vw,48px);
  border-radius:var(--radius-lg);
  background:var(--s-glass); border:1px solid var(--s-glass-bd);
  backdrop-filter:var(--blur); -webkit-backdrop-filter:var(--blur);
  box-shadow:var(--s-hi);
  scroll-margin-top:110px;
}
.contact-form-wrap > h3{ font-size:23px; color:var(--s-head); margin-bottom:24px; }

.news-form{ gap:12px; }
.news-row{ display:flex; gap:9px; flex-wrap:wrap; }
.news-row input[type=email]{
  flex:1 1 170px; min-width:0; padding:11px 16px; font-size:15px;
  background:rgba(255,255,255,.07); border:1px solid var(--line-dark); color:var(--text-onDark);
  border-radius:999px;
}
.news-row input::placeholder{ color:rgba(232,241,240,.42); }
.news-row input:focus{
  background:rgba(255,255,255,.12); border-color:var(--accent-soft);
  box-shadow:0 0 0 4px rgba(232,128,79,.16);
}
.news-form .f-consent{ color:var(--text-onDark-muted); background:transparent; border:0; padding:0; }
.news-form .f-error{ color:#FFB4A5; }
.footer-news .f-success{ padding:14px 0; text-align:left; }
.footer-news .f-success p{ color:var(--accent-soft); font-size:15px; }

@supports not ((backdrop-filter: blur(2px)) or (-webkit-backdrop-filter: blur(2px))){
  .card,.commit-grid li,.chip-cloud li,.join-form,.vision-inner,.faq,.hero-chip,.hero-pills li{
    background:rgba(255,255,255,.93);
  }
  .is-dark .card,.is-dark .commit-grid li,.is-dark .chip-cloud li,
  .is-dark .faq,.is-dark .vision-inner,.contact-card,.why-stack{ background:rgba(255,255,255,.09); }
  .site-header.is-stuck{ background:rgba(251,247,241,.97); }
  .nav-toggle,.btn-ghost{ background:rgba(255,255,255,.9); }
}

/* =========================================================
   Responsive
   ========================================================= */
@media (max-width:1200px){
  :root{ --shell:1080px; }
  .commit-grid{ grid-template-columns:repeat(2,minmax(0,1fr)); }
}

@media (max-width:1100px){
  .nav{ gap:22px; }
  .nav a{ font-size:14.5px; }
  .hero-inner{ grid-template-columns:1fr; gap:52px; }
  .hero-title{ max-width:18ch; }
  .hero-visual{ min-height:auto; }
  .hero-photo{ width:min(100%,400px); }
  .hero-chip{ left:auto; right:0; bottom:-4%; }
  .contact-grid{ grid-template-columns:1fr 1fr; }
  .footer-grid{ grid-template-columns:1fr 1fr; }
}

@media (max-width:1024px){
  .grid-2, .why-inner, .join-inner, .who-grid{ grid-template-columns:1fr; }
  .col-sticky, .why-stack, .figure-wide{ position:relative; top:auto; }
  .figure-banner{ aspect-ratio:16/9; }
}

@media (max-width:1000px){
  :root{ --radius-lg:26px; }

  .nav-toggle{ display:block; }
  .nav{
    position:fixed; inset:0 0 auto 0; top:0;
    flex-direction:column; align-items:stretch; gap:0;
    background:rgba(251,247,241,.94);
    backdrop-filter:blur(20px) saturate(180%); -webkit-backdrop-filter:blur(20px) saturate(180%);
    padding:96px var(--gutter) 30px;
    box-shadow:0 30px 60px -34px rgba(11,46,51,.55);
    transform:translateY(-102%); transition:transform .5s var(--ease);
    border-bottom:1px solid rgba(255,255,255,.7);
    border-radius:0 0 30px 30px;
    z-index:1;
  }
  .nav.is-open{ transform:translateY(0); }
  .brand{ position:relative; z-index:2; }
  .nav-toggle{ position:relative; z-index:2; }
  .nav a{ font-size:19px; padding-block:13px; border-bottom:1px solid var(--line); }
  .nav a:last-child{ border-bottom:0; }
  .nav-cta{ margin-top:18px; align-self:flex-start; }
  .lang{ margin-right:10px; }
  .lang-btn{ padding:6px 10px 6px 7px; font-size:12px; }
  .nav a:not(.btn)::after{ display:none; }

  .commit-grid{ grid-template-columns:1fr; gap:12px; }
  .contact-grid{ grid-template-columns:1fr; }
  .footer-grid{ grid-template-columns:1fr; gap:34px; }
  .scroll-hint{ display:none; }
  .hero{ padding-block:118px 70px; }
  .hero-actions{ gap:12px; }
  .hero-actions .btn{ flex:1 1 100%; }
  .hero-chip{ position:static; margin:24px auto 0; max-width:none; }
  .figure-banner{ aspect-ratio:4/3; }
  .figure-tall,.figure-why,.figure-research{ aspect-ratio:4/3; }
  .why-stack{ padding:28px 24px; }
  .faq{ padding-inline:20px; }
  .card,.commit-grid li{ padding:26px 22px 28px; }
  .contact-card{ padding:28px 24px 30px; }
  .need-list li{ gap:15px; }
  .chip-cloud{ gap:9px; }
  .chip-cloud li{ padding:10px 20px; }
  .marquee-track{ gap:22px; }
  .f-row{ grid-template-columns:1fr; }
  .f-submit{ justify-self:stretch; width:100%; }
}

@media (max-width:520px){
  /* Con el selector de idioma y el botón de menú no cabe el nombre completo:
     dejamos la marca en una línea y el subtítulo se va al pie. */
  .brand-text em{ display:none; }
  .brand-text strong{ font-size:16px; white-space:nowrap; }
  .lang-btn{ padding:6px 9px 6px 6px; font-size:11.5px; gap:5px; }
  .lang-btn .flag{ width:18px; height:12.6px; }
}

@media (max-width:400px){
  :root{ --gutter:18px; }
  .brand-text strong{ font-size:15px; }
  .brand-mark{ width:30px; height:30px; }
  .hero-title{ font-size:clamp(31px,8.6vw,38px); }
  .vision-inner{ padding-inline:20px; }
}

/* =========================================================
   Movimiento reducido
   ========================================================= */
@media (prefers-reduced-motion:reduce){
  html{ scroll-behavior:auto; }
  *,*::before,*::after{
    animation-duration:.001ms !important; animation-iteration-count:1 !important;
    transition-duration:.001ms !important;
  }
  .js [data-anim], .js .reveal-fade{ opacity:1 !important; transform:none !important; }
  .marquee-track{ animation:none; }
}

/* Impresión */
@media print{
  .site-header,.scroll-hint,.marquee,.join-form,.closing-bg,.aura-layer,.scroll-progress{ display:none; }
  body::after{ display:none; }
  body{ background:#fff; color:#000; }
  .is-dark,.site-footer,.closing{ background:#fff !important; color:#000 !important; background-image:none !important; }
}