/* ══════════════════════════════════════════════════════════════════════════
   Bioboros · sistema visual compartido
   ─────────────────────────────────────────────────────────────────────────
   Lo usan las 15 páginas del sitio. La portada (index.html) añade encima su
   CSS propio del héroe con recorrido, que no se comparte porque no se repite
   en ninguna otra parte.

   El acento (--accent) es el índigo del isotipo y aparece en DOSIS RARAS: el
   CTA, el foco, y las cotas que anotan una cifra medida. Un acento que está en
   todas partes deja de ser un acento.
   ══════════════════════════════════════════════════════════════════════════ */

/* ── Fuentes, servidas desde el propio dominio ─────────────────────────── */
@font-face{font-family:'Bricolage Grotesque';font-style:normal;font-weight:700 800;font-display:swap;src:url('fonts/bricolage-grotesque-700800.woff2') format('woff2');unicode-range:U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD}
@font-face{font-family:'IBM Plex Sans';font-style:normal;font-weight:400;font-display:swap;src:url('fonts/ibm-plex-sans-400.woff2') format('woff2');unicode-range:U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD}
@font-face{font-family:'IBM Plex Sans';font-style:normal;font-weight:500;font-display:swap;src:url('fonts/ibm-plex-sans-500.woff2') format('woff2');unicode-range:U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD}
@font-face{font-family:'IBM Plex Mono';font-style:normal;font-weight:400;font-display:swap;src:url('fonts/ibm-plex-mono-400.woff2') format('woff2');unicode-range:U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD}
@font-face{font-family:'IBM Plex Mono';font-style:normal;font-weight:500;font-display:swap;src:url('fonts/ibm-plex-mono-500.woff2') format('woff2');unicode-range:U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD}

/* ── Tokens ────────────────────────────────────────────────────────────── */
:root{
  --canvas:#0E1220;
  --panel:#161C2E;
  --panel-2:#1B2237;
  --accent:#5B4BF0;
  --accent-hover:#7466FF;
  --accent-muted:rgba(91,75,240,.28);
  --text-secondary:#9BA3BE;
  --text-primary:#ECEEF6;
  --line:rgba(155,163,190,.20);
  --line-strong:rgba(155,163,190,.42);

  --display:'Bricolage Grotesque',ui-sans-serif,system-ui,sans-serif;
  --body:'IBM Plex Sans',ui-sans-serif,system-ui,sans-serif;
  --mono:'IBM Plex Mono',ui-monospace,monospace;

  --ease:cubic-bezier(.22,.61,.36,1);
  --ease-out:cubic-bezier(.16,1,.3,1);
  --gut:clamp(1.25rem,4vw,4rem);
  --max:1180px;
}

*,*::before,*::after{box-sizing:border-box}
html,body{overflow-x:hidden;overflow-x:clip}
html{-webkit-text-size-adjust:100%;scroll-behavior:smooth}
body{
  margin:0;background:var(--canvas);color:var(--text-primary);
  font-family:var(--body);font-size:clamp(1rem,.95rem + .25vw,1.0625rem);line-height:1.65;
  -webkit-font-smoothing:antialiased;
}
img,svg,video{display:block;max-width:100%}
a{color:inherit}
:focus-visible{outline:2px solid var(--accent-hover);outline-offset:3px;border-radius:4px}
.sr{position:absolute;width:1px;height:1px;padding:0;margin:-1px;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap;border:0}

/* ── El ambiente: una sola capa fija detrás de todo ────────────────────── */
.env{position:fixed;inset:0;z-index:0;pointer-events:none;overflow:hidden}
.env::before{
  content:"";position:absolute;inset:-20%;
  background:
    radial-gradient(50% 40% at 22% 18%,rgba(91,75,240,.16),transparent 70%),
    radial-gradient(45% 38% at 82% 74%,rgba(91,75,240,.10),transparent 72%);
  animation:envDrift 96s var(--ease) -22s infinite alternate;
}
.env::after{
  content:"";position:absolute;inset:0;opacity:.5;
  background-image:radial-gradient(circle at 50% 50%,rgba(236,238,246,.55) .6px,transparent .7px);
  background-size:120px 120px;
  animation:envMotes 120s linear -30s infinite;
}
@keyframes envDrift{from{transform:translate3d(-2.5%,-1.5%,0) scale(1.02)}to{transform:translate3d(2.5%,2%,0) scale(1.06)}}
@keyframes envMotes{from{background-position:0 0}to{background-position:120px -720px}}
.page{position:relative;z-index:1}

/* ── Barra superior ────────────────────────────────────────────────────── */
.skip{position:absolute;left:-9999px;top:0;background:var(--accent);color:#fff;padding:.7rem 1rem;z-index:99}
.skip:focus{left:.5rem;top:.5rem}

.nav{
  position:sticky;top:0;z-index:40;
  display:flex;align-items:center;justify-content:space-between;gap:1rem;
  padding:.85rem var(--gut);
  background:rgba(14,18,32,.82);backdrop-filter:blur(10px);
  border-bottom:1px solid var(--line);
}
.nav.over{position:fixed;top:0;left:0;right:0;background:linear-gradient(to bottom,rgba(14,18,32,.86),rgba(14,18,32,0));backdrop-filter:blur(6px);border-bottom:0}
.brand{display:flex;align-items:center;gap:.6rem;text-decoration:none;font-family:var(--display);font-weight:800;letter-spacing:-.02em;font-size:1.05rem;flex:none}
.brand svg{width:26px;height:26px;flex:none}
/* La marca de la barra es solo el nombre. Sin el isotipo al lado, el nombre
   puede crecer un punto y sostener la esquina él solo. */
.brand-text{font-size:1.18rem;letter-spacing:-.03em}
.nav-links{display:none;gap:1.4rem;font-family:var(--mono);font-size:.74rem;letter-spacing:.08em;text-transform:uppercase}
.nav-links a{text-decoration:none;color:var(--text-secondary);transition:color .2s var(--ease)}
.nav-links a:hover,.nav-links a[aria-current="page"]{color:var(--text-primary)}
@media (min-width:900px){.nav-links{display:flex}}
.nav-cta{
  font-family:var(--mono);font-size:.74rem;letter-spacing:.1em;text-transform:uppercase;
  text-decoration:none;padding:.55rem .95rem;border:1px solid var(--line-strong);border-radius:999px;flex:none;
  transition:border-color .22s var(--ease),background-color .22s var(--ease),color .22s var(--ease);
}
.nav-cta:hover{border-color:var(--accent-hover);background:var(--accent);color:#fff}

/* ── Botones ───────────────────────────────────────────────────────────── */
.btn{
  display:inline-flex;align-items:center;justify-content:center;gap:.5rem;
  font-family:var(--body);font-weight:500;font-size:1rem;text-decoration:none;
  padding:.85rem 1.5rem;border-radius:999px;border:1px solid transparent;
  background:var(--accent);color:#fff;text-shadow:none;cursor:pointer;
  transition:background-color .22s var(--ease),transform .22s var(--ease-out),box-shadow .22s var(--ease);
  box-shadow:0 6px 24px rgba(91,75,240,.28);
}
.btn:hover{background:var(--accent-hover);transform:translateY(-2px);box-shadow:0 10px 32px rgba(91,75,240,.36)}
.btn-ghost{background:transparent;border-color:var(--line-strong);color:var(--text-primary);box-shadow:none}
.btn-ghost:hover{background:rgba(236,238,246,.06);border-color:var(--text-secondary);transform:translateY(-2px);box-shadow:none}
.row{display:flex;flex-wrap:wrap;gap:.75rem;align-items:center;margin-top:1.6rem}
.micro{font-family:var(--mono);font-size:.74rem;letter-spacing:.08em;color:var(--text-secondary);margin:.9rem 0 0}
@media (pointer:coarse){.btn,.nav-cta{min-height:44px;display:inline-flex;align-items:center;justify-content:center}}

/* ── Cabecera de página interior ───────────────────────────────────────── */
.phead{padding:clamp(3.5rem,9vh,6.5rem) var(--gut) clamp(2rem,5vh,3.5rem);max-width:var(--max);margin-inline:auto}
.eyebrow{font-family:var(--mono);font-size:.74rem;letter-spacing:.16em;text-transform:uppercase;color:var(--accent);margin:0 0 1.2rem;display:block}
.phead h1{font-family:var(--display);font-weight:800;letter-spacing:-.035em;line-height:1;
  font-size:clamp(2.4rem,1.4rem + 4.4vw,4.6rem);margin:0;text-wrap:balance;max-width:18ch}
.phead .lead{font-size:clamp(1.05rem,1rem + .35vw,1.3rem);color:var(--text-secondary);max-width:60ch;margin:1.4rem 0 0;text-wrap:pretty}

/* ── Secciones ─────────────────────────────────────────────────────────── */
.sec{padding:clamp(3.5rem,9vh,7rem) var(--gut);max-width:var(--max);margin-inline:auto}
.sec-tight{padding-top:clamp(1.5rem,4vh,3rem)}
.kick{font-family:var(--mono);font-size:.74rem;letter-spacing:.16em;text-transform:uppercase;color:var(--text-secondary);margin:0 0 1.4rem;display:flex;align-items:center;gap:.8rem}
.kick::after{content:"";flex:1;height:1px;background:var(--line)}
h2.t{font-family:var(--display);font-weight:800;letter-spacing:-.03em;line-height:1.03;
  font-size:clamp(1.9rem,1.3rem + 2.6vw,3.2rem);margin:0 0 1.2rem;text-wrap:balance;max-width:22ch}
h3.st{font-family:var(--display);font-weight:700;letter-spacing:-.02em;font-size:clamp(1.15rem,1rem + .5vw,1.45rem);margin:0 0 .55rem;line-height:1.2}
.lede{font-size:clamp(1.02rem,.98rem + .28vw,1.18rem);color:var(--text-secondary);max-width:64ch;margin:0;text-wrap:pretty}
.lede strong{color:var(--text-primary);font-weight:500}
.dim{color:var(--text-secondary)}

/* ── Entradas coreografiadas ───────────────────────────────────────────── */
.rise{opacity:0;transform:translateY(24px);transition:opacity .7s var(--ease-out),transform .7s var(--ease-out)}
.in .rise{opacity:1;transform:none}
.in .rise:nth-child(2){transition-delay:.07s}
.in .rise:nth-child(3){transition-delay:.14s}
.in .rise:nth-child(4){transition-delay:.21s}
.in .rise:nth-child(5){transition-delay:.28s}
.in.done .rise,.in.done .rise:nth-child(2),.in.done .rise:nth-child(3),
.in.done .rise:nth-child(4),.in.done .rise:nth-child(5){transition-delay:0s!important}

/* ── La cota: el elemento firma ────────────────────────────────────────── */
.cota{width:100%;max-width:340px;height:26px;overflow:visible;color:var(--accent)}
.cota path{fill:none;stroke:currentColor;stroke-width:1.4;stroke-linecap:round;
  stroke-dasharray:var(--len,400);stroke-dashoffset:var(--len,400);
  transition:stroke-dashoffset 1.15s var(--ease-out)}
.in .cota path{stroke-dashoffset:0}
.in .cota path:nth-child(2){transition-delay:.5s}
.in .cota path:nth-child(3){transition-delay:.68s}

/* ── Cifras con cota ───────────────────────────────────────────────────── */
.figs{display:grid;gap:2.4rem;grid-template-columns:repeat(auto-fit,minmax(210px,1fr));margin-top:3rem}
.fig .num{font-family:var(--display);font-weight:800;letter-spacing:-.04em;font-size:clamp(2.6rem,1.8rem + 3.6vw,4.4rem);line-height:1;color:var(--accent);margin:0}
.fig .cap{font-family:var(--mono);font-size:.75rem;letter-spacing:.05em;color:var(--text-secondary);margin:.85rem 0 0;line-height:1.6}

/* ── Tarjetas ──────────────────────────────────────────────────────────── */
.cards{display:grid;gap:1.1rem;margin-top:2.6rem}
.cards-2{grid-template-columns:repeat(auto-fit,minmax(300px,1fr))}
.cards-3{grid-template-columns:repeat(auto-fit,minmax(250px,1fr))}
.card{background:var(--panel);border:1px solid var(--line);border-radius:18px;padding:1.5rem 1.4rem;
  transition:border-color .3s var(--ease),transform .3s var(--ease-out)}
.card:hover{border-color:var(--accent-muted);transform:translateY(-3px)}
.card .n{font-family:var(--mono);font-size:.72rem;letter-spacing:.14em;color:var(--accent);margin:0 0 .7rem}
.card h3{font-family:var(--display);font-weight:700;letter-spacing:-.02em;font-size:1.2rem;margin:0 0 .55rem;line-height:1.22}
.card p{margin:0;color:var(--text-secondary);font-size:.97rem}
.card img{width:100%;height:auto;aspect-ratio:16/10;object-fit:cover;border-radius:12px;margin:0 0 1.1rem}

/* ── Bloques con figura al lado ────────────────────────────────────────── */
.stage{display:grid;gap:2rem;padding:2.4rem 0;border-top:1px solid var(--line)}
@media (min-width:860px){.stage{grid-template-columns:1.35fr .9fr;gap:3.4rem;align-items:start}}
.stage .kicker{font-family:var(--mono);font-size:.72rem;letter-spacing:.14em;text-transform:uppercase;color:var(--accent);margin:0 0 .8rem}
.stage .sub{font-family:var(--mono);font-size:.78rem;letter-spacing:.05em;color:var(--text-secondary);margin:0 0 1rem}
.stage p{color:var(--text-secondary);margin:0 0 1.2rem}
.bullets{list-style:none;margin:0;padding:0;display:grid;gap:.7rem}
.bullets li{display:grid;grid-template-columns:14px 1fr;gap:.75rem;align-items:start;font-size:.97rem;color:var(--text-secondary)}
.bullets li::before{content:"";width:8px;height:8px;margin-top:.55em;border-radius:2px;background:var(--accent-muted);border:1px solid var(--accent)}
.bullets strong{color:var(--text-primary);font-weight:500}
.tags{display:flex;flex-wrap:wrap;gap:.45rem;margin-top:1.3rem}
.tag{font-family:var(--mono);font-size:.7rem;letter-spacing:.06em;color:var(--text-secondary);
  border:1px solid var(--line);border-radius:99px;padding:.32rem .7rem}
.figbox{background:var(--panel);border:1px solid var(--line);border-radius:18px;padding:1.4rem;
  background-image:linear-gradient(rgba(155,163,190,.055) 1px,transparent 1px),linear-gradient(90deg,rgba(155,163,190,.055) 1px,transparent 1px);
  background-size:22px 22px}
.figbox svg{width:100%;height:auto}
.figbox figcaption,.figcap{font-family:var(--mono);font-size:.72rem;letter-spacing:.05em;color:var(--text-secondary);margin-top:1rem;line-height:1.6}
/* line-art de las figuras */
.f-line{fill:none;stroke:var(--line-strong);stroke-width:1.2}
.f-dash{fill:none;stroke:var(--line-strong);stroke-width:1;stroke-dasharray:3 4}
.f-mute{fill:none;stroke:var(--line);stroke-width:1}
.f-acc{fill:none;stroke:var(--accent);stroke-width:1.8;stroke-linecap:round;stroke-linejoin:round}
.f-dot{fill:var(--line-strong)}
.f-dota{fill:var(--accent)}
.f-fill{fill:var(--accent-muted);stroke:var(--accent);stroke-width:1.4}

/* ── Pasos numerados ───────────────────────────────────────────────────── */
.steps{display:grid;gap:0;margin-top:2.6rem}
.step{display:grid;grid-template-columns:auto 1fr;gap:1.4rem;padding-bottom:2rem}
.step-rail{display:flex;flex-direction:column;align-items:center;gap:.6rem}
.step-dot{width:34px;height:34px;border-radius:50%;border:1px solid var(--accent);color:var(--accent);
  display:grid;place-items:center;font-family:var(--mono);font-size:.82rem;flex:none;background:var(--canvas)}
.step-line{flex:1;width:1px;background:var(--line)}
.step:last-child .step-line{display:none}
.step h3{font-family:var(--display);font-weight:700;font-size:1.1rem;margin:.35rem 0 .4rem;letter-spacing:-.015em}
.step p{margin:0;color:var(--text-secondary);font-size:.97rem}

/* ── Tablas ────────────────────────────────────────────────────────────── */
.tbl-wrap{overflow-x:auto;margin-top:2.4rem}
.tbl{width:100%;border-collapse:collapse;font-variant-numeric:tabular-nums;min-width:min(100%,520px)}
.tbl caption{text-align:left;font-family:var(--mono);font-size:.74rem;letter-spacing:.05em;color:var(--text-secondary);padding-bottom:1rem;line-height:1.6}
.tbl th,.tbl td{padding:.95rem .8rem;border-bottom:1px solid var(--line);text-align:right}
.tbl th:first-child,.tbl td:first-child{text-align:left}
.tbl thead th{font-family:var(--mono);font-size:.72rem;letter-spacing:.12em;text-transform:uppercase;color:var(--text-secondary);font-weight:400}
.tbl tbody td{font-size:1.02rem}
.tbl .on{color:var(--text-primary);font-weight:500}
.tbl .off{color:var(--text-secondary)}
.yes{color:var(--accent)}
.no{color:var(--text-secondary)}

/* ── Barras por macro ──────────────────────────────────────────────────── */
.bars{display:grid;gap:1rem;margin-top:2.4rem}
.bar{display:grid;grid-template-columns:10ch 1fr 8ch;gap:1rem;align-items:center}
.bar .lbl{font-family:var(--mono);font-size:.78rem;color:var(--text-secondary)}
.bar .track{position:relative;height:8px;border-radius:99px;background:rgba(155,163,190,.14);overflow:hidden}
.bar .fill{position:absolute;inset:0 auto 0 0;width:var(--w,0%);background:var(--accent);border-radius:99px;
  transform:scaleX(0);transform-origin:left;transition:transform 1.1s var(--ease-out)}
.in .bar .fill{transform:scaleX(1)}
.bar .val{font-family:var(--mono);font-size:.85rem;text-align:right}

/* ── Preguntas ─────────────────────────────────────────────────────────── */
.faq{margin-top:2.4rem;border-top:1px solid var(--line)}
.qa{border-bottom:1px solid var(--line)}
.qa summary{cursor:pointer;list-style:none;padding:1.35rem 2.6rem 1.35rem 0;position:relative;
  font-family:var(--display);font-weight:700;letter-spacing:-.02em;font-size:clamp(1.05rem,1rem + .45vw,1.32rem);line-height:1.28}
.qa summary::-webkit-details-marker{display:none}
.qa summary::after{content:"";position:absolute;right:.4rem;top:50%;width:11px;height:11px;
  border-right:1.6px solid var(--text-secondary);border-bottom:1.6px solid var(--text-secondary);
  transform:translateY(-70%) rotate(45deg);transition:transform .3s var(--ease)}
.qa[open] summary::after{transform:translateY(-30%) rotate(225deg)}
.qa .a{padding:0 0 1.5rem;color:var(--text-secondary);max-width:66ch;margin:0}
.qa .a + .a{padding-top:0;margin-top:-.6rem}

/* ── Cierre ────────────────────────────────────────────────────────────── */
/* Los huecos de esta banda expresan la JERARQUÍA, y por eso se declaran aquí en
   vez de heredar los de una sección normal. Medido antes: 22 / 26 / 14 px, o sea
   los dos huecos importantes casi iguales, que es como nada respira y nada
   parece una pausa.
     rótulo → titular  ~30px  el rótulo etiqueta al titular, va pegado a él
     titular → botón   ~54px  ESTE es el silencio antes de pedir el clic
     botón → letra chica ~18px la nota es del botón, va cosida a él
   La relación 1:2 entre los dos primeros es lo que hace el trabajo; los números
   exactos son secundarios. */
.close{text-align:center;padding-top:clamp(5rem,12vh,9rem);padding-bottom:clamp(5rem,12vh,9rem)}
.close h2{margin-inline:auto;margin-bottom:0}
.close .kick{margin-bottom:1.9rem;justify-content:center}
/* Sin la regla horizontal: con un pseudo-elemento a `flex:1` el
   `justify-content` no puede centrar nada, y el rótulo se quedaba a la
   izquierda peleándose con un titular centrado. */
.close .kick::after{display:none}
.close .row{justify-content:center;margin-top:3.4rem}
.close .micro{margin-top:1.1rem}
.note{display:grid;grid-template-columns:auto 1fr;gap:1rem;align-items:start;margin-top:3rem;
  background:var(--panel);border:1px solid var(--line);border-radius:16px;padding:1.3rem 1.4rem;
  color:var(--text-secondary);font-size:.95rem}
.note b{color:var(--text-primary);font-weight:500}
.note a{color:var(--text-primary);text-decoration:underline;text-underline-offset:3px;text-decoration-color:var(--accent-muted)}
.note a:hover{text-decoration-color:var(--accent)}
.note .mark{width:26px;height:26px;border-radius:8px;border:1px solid var(--accent);color:var(--accent);
  display:grid;place-items:center;font-family:var(--mono);font-size:.85rem;flex:none}

/* ── Prosa larga: legales ──────────────────────────────────────────────── */
.prose{max-width:72ch;margin-inline:auto}
.prose h2{font-family:var(--display);font-weight:700;letter-spacing:-.02em;font-size:clamp(1.3rem,1.1rem + .8vw,1.75rem);
  margin:3rem 0 .9rem;line-height:1.25;scroll-margin-top:5rem}
.prose h3{font-family:var(--display);font-weight:700;font-size:1.1rem;margin:2rem 0 .6rem;letter-spacing:-.015em}
.prose p{color:var(--text-secondary);margin:0 0 1.1rem}
.prose ul,.prose ol{color:var(--text-secondary);margin:0 0 1.3rem;padding-left:1.3rem}
.prose li{margin:0 0 .55rem}
.prose strong{color:var(--text-primary);font-weight:500}
.prose a{color:var(--text-primary);text-decoration:underline;text-underline-offset:3px;text-decoration-color:var(--accent-muted)}
.prose a:hover{text-decoration-color:var(--accent)}
.prose .updated{font-family:var(--mono);font-size:.75rem;letter-spacing:.06em;color:var(--text-secondary);
  border:1px solid var(--line);border-radius:99px;padding:.4rem .9rem;display:inline-block;margin-bottom:2rem}
/* Los textos legales citan nombres de tablas y campos. Van en mono, discretos:
   son una precisión técnica dentro de la prosa, no un bloque de código. */
.prose code{font-family:var(--mono);font-size:.86em;background:rgba(155,163,190,.10);
  border:1px solid var(--line);border-radius:5px;padding:.08em .38em;color:var(--text-primary);
  overflow-wrap:anywhere}
.prose h2:first-of-type{margin-top:1.5rem}
.prose em{color:var(--text-primary);font-style:italic}
.toc{background:var(--panel);border:1px solid var(--line);border-radius:16px;padding:1.3rem 1.5rem;margin:0 0 2.5rem}
.toc p{font-family:var(--mono);font-size:.72rem;letter-spacing:.14em;text-transform:uppercase;color:var(--text-secondary);margin:0 0 .9rem}
.toc ol{margin:0;padding-left:1.2rem;color:var(--text-secondary);font-size:.95rem}
.toc li{margin:0 0 .4rem}
.toc a{color:var(--text-secondary);text-decoration:none}
.toc a:hover{color:var(--text-primary)}

/* ── Pie ───────────────────────────────────────────────────────────────── */
/* Dos zonas con jerarquía distinta: arriba la navegación de verdad, abajo una
   franja fina con lo legal. Las nueve páginas legales en columnas propias se
   comían media rejilla siendo los enlaces que menos gente usa. */
footer{border-top:1px solid var(--line);background:#0B0E1A;position:relative;z-index:1}

/* Marca con descripción y redes a la izquierda, columnas de enlaces a la
   derecha, barra de copyright abajo. Es la forma que ya tenía el pie de React y
   la que usan Anthropic y OpenAI: el lado izquierdo ancla, el derecho navega. */
.foot{max-width:var(--max);margin-inline:auto;padding:3.5rem var(--gut) 3rem;
  display:grid;gap:3rem}
@media (min-width:820px){.foot{grid-template-columns:minmax(0,1fr) minmax(0,2.5fr);gap:3.5rem;align-items:start}}

.foot-name{font-family:var(--display);font-weight:800;letter-spacing:-.03em;font-size:1.35rem;margin:0}
.foot-desc{color:var(--text-secondary);font-size:.93rem;line-height:1.6;margin:.9rem 0 0;max-width:34ch}

.foot-social{display:flex;gap:.35rem;margin:1.5rem 0 0}
.foot-social a{display:grid;place-items:center;width:38px;height:38px;border-radius:10px;
  color:var(--text-secondary);transition:color .2s var(--ease),background-color .2s var(--ease)}
.foot-social a:hover{color:var(--text-primary);background:rgba(236,238,246,.07)}
.foot-social svg{width:19px;height:19px}

.foot-mail{display:inline-block;margin:1.6rem 0 0;font-size:.92rem;color:var(--text-primary);
  text-decoration:none;border-bottom:1px solid var(--line-strong);padding-bottom:1px;
  transition:color .2s var(--ease),border-color .2s var(--ease)}
.foot-mail:hover{color:var(--accent-hover);border-color:var(--accent-hover)}
.foot-hours{font-family:var(--mono);font-size:.72rem;letter-spacing:.05em;color:var(--text-secondary);margin:.6rem 0 0}

/* Cuatro columnas EXPLÍCITAS a partir de 980 px, no `auto-fit`. Con auto-fit,
   «Términos y servicios» ensancha su columna por sus etiquetas largas y empuja a
   «Privacidad y datos» a una segunda fila, dejando un hueco enorme al lado. Un
   número fijo reparte el ancho por igual y las etiquetas largas parten dentro de
   su propia columna, que es donde deben partir. */
.foot-cols{display:grid;gap:2.4rem 1.6rem;grid-template-columns:repeat(auto-fit,minmax(150px,1fr))}
@media (min-width:980px){.foot-cols{grid-template-columns:repeat(4,minmax(0,1fr))}}
.foot-col h2{font-family:var(--mono);font-size:.7rem;letter-spacing:.14em;text-transform:uppercase;
  color:var(--text-secondary);margin:0 0 1.1rem;font-weight:400}
.foot-col ul{list-style:none;margin:0;padding:0;display:grid;gap:.65rem}
.foot-col a{font-size:.93rem;color:var(--text-primary);text-decoration:none;transition:color .2s var(--ease);line-height:1.4;display:inline-block}
.foot-col a:hover{color:var(--accent-hover)}

/* La barra de cierre: copyright a un lado, procedencia al otro, separadas por
   un filete de la zona de enlaces. En el teléfono se apilan solas. */
.foot-base{max-width:var(--max);margin-inline:auto;padding:1.6rem var(--gut) 2.8rem;
  border-top:1px solid var(--line)}
.foot-copy,.foot-place{font-family:var(--mono);font-size:.73rem;letter-spacing:.05em;color:var(--text-secondary);margin:0}
@media (min-width:640px){
  .foot-base{display:flex;flex-wrap:wrap;gap:.6rem 2rem;justify-content:space-between;align-items:baseline}
}
@media (max-width:639px){.foot-place{margin-top:.5rem}}

/* ── Movimiento reducido, honrado entero ───────────────────────────────── */
@media (prefers-reduced-motion:reduce){
  html{scroll-behavior:auto}
  *,*::before,*::after{animation:none!important;transition:none!important;transition-delay:0s!important}
  .rise{opacity:1;transform:none}
  .cota path{stroke-dashoffset:0}
  .bar .fill{transform:scaleX(1)}
}
.pinned .rise{opacity:1;transform:none}
.pinned .cota path{stroke-dashoffset:0}
.pinned .bar .fill{transform:scaleX(1)}
body.paused *,body.paused *::before,body.paused *::after{animation-play-state:paused!important}