/* Base shared by every hero variant: a trimmed copy of the site's tokens, fonts and
   hero rules (sitio-web/public/css, revision-diseno@6fd0811). Variants override on top. */
@font-face{font-family:'Instrument Sans';font-style:normal;font-weight:400 600;font-display:swap;
  src:url('fonts/instrument-sans-latin.woff2') format('woff2')}
@font-face{font-family:'JetBrains Mono';font-style:normal;font-weight:400 500;font-display:swap;
  src:url('fonts/jetbrains-mono-latin.woff2') format('woff2')}

:root{
  color-scheme:dark;
  --void:#08080A; --accent:#A78BFA; --accent-soft:#C4AEFF;
  --text:#F4F4F6; --text-2:#9A93A6; --text-3:#7B7587; --on-accent:#1B1235;
  --ease:cubic-bezier(.16,1,.3,1);
  --dur-micro:250ms;
  --radius-pill:100px;
  --shadow-text-media:0 1px 3px rgba(0,0,0,.85),0 2px 14px rgba(0,0,0,.55);
  --img-grano:url("grano.svg");
  --img-cielo:url("hero-cielo.webp");
  --img-t3:url("tex-3.webp");
}
*{box-sizing:border-box}
body{margin:0;background:var(--void);color:var(--text);
  font-family:'Instrument Sans',system-ui,sans-serif;-webkit-font-smoothing:antialiased}
.wrap{max-width:1080px;margin:0 auto;padding:0 28px}
:focus-visible{outline:2px solid var(--accent);outline-offset:3px}
.grano{position:absolute;inset:0;opacity:.2;pointer-events:none;
  background-image:var(--img-grano);background-size:180px}

.eyebrow{font-family:'JetBrains Mono',monospace;font-size:11px;letter-spacing:.26em;
  color:var(--accent-soft);margin:0 0 24px}
.identidad{font-size:15px;color:var(--text-2);margin:0 0 16px}
.identidad .nombre{color:var(--text);font-weight:600}
.identidad .sep{color:var(--text-3)}
.titular{margin:0;font-weight:500;letter-spacing:-.045em;line-height:1.02;
  font-size:clamp(2.4rem,7vw,4.7rem)}
.bajada{margin:24px auto 0;max-width:430px;font-size:16px;line-height:1.7;color:var(--text-2)}

.presentacion{position:relative;min-height:92svh;display:flex;align-items:center;
  overflow:hidden;text-align:center;border-top:1px solid rgba(255,255,255,.06)}
.presentacion .cielo{position:absolute;inset:-8% 0 0 0;height:116%;background-image:var(--img-cielo);
  background-size:cover;background-position:center 30%}
.presentacion .velo{position:absolute;inset:0;background:
  radial-gradient(ellipse 72% 58% at 50% 45%, rgba(8,8,10,.05) 0%, rgba(8,8,10,.6) 55%, rgba(8,8,10,.95) 100%),
  linear-gradient(180deg, rgba(8,8,10,.8) 0%, rgba(8,8,10,.3) 40%, rgba(8,8,10,.96) 100%)}
.foto-presentacion{position:absolute;inset:6% 12%;background-image:var(--img-t3);
  background-size:cover;background-position:center;opacity:.6}
.foto-presentacion::after{content:'';position:absolute;inset:-1px;
  background:radial-gradient(ellipse closest-side,rgba(8,8,10,0) 40%,var(--void) 100%)}
@media(max-width:700px){ .foto-presentacion{inset:18% 0 22%} }
.presentacion .bajada{color:var(--text);text-shadow:var(--shadow-text-media)}
.presentacion .wrap{position:relative;padding-top:96px;padding-bottom:64px}
@media(max-width:700px){
  .presentacion{min-height:auto}
  .presentacion .wrap{padding-top:144px}
}
.acciones{display:flex;gap:12px;justify-content:center;flex-wrap:wrap;margin-top:32px}
.btn{font-size:14px;border-radius:var(--radius-pill);padding:13px 26px;text-decoration:none;display:inline-block;
  transition:transform var(--dur-micro) var(--ease),background var(--dur-micro) var(--ease),
  border-color var(--dur-micro) var(--ease)}
.btn-1{background:var(--accent);color:var(--on-accent);font-weight:500}
.btn-1:hover{transform:translateY(-2px);background:var(--accent-soft)}
.btn-2{border:1px solid rgba(255,255,255,.16);color:var(--text)}
.btn-2:hover{transform:translateY(-2px);border-color:var(--accent)}
.nota-evolucion{margin:28px 0 0;font-family:'JetBrains Mono',monospace;
  font-size:11px;letter-spacing:.14em;color:var(--text-2);text-transform:uppercase}

/* Lab-only filler below the hero so scroll-linked effects have room to play */
.despues{min-height:120svh;padding:120px 0;border-top:1px solid rgba(255,255,255,.06)}
.despues p{font-family:'JetBrains Mono',monospace;font-size:11px;letter-spacing:.2em;
  color:var(--text-3);text-transform:uppercase;text-align:center}

@media (prefers-reduced-motion: reduce){
  *,*::before,*::after{animation-duration:.01ms !important;transition-duration:.01ms !important}
}

/* hero-v3: the photo covers the whole hero (as hero-v1/c-linterna did) instead of sitting in an
   inset box, so the effects read against the full picture. Marco's request, 2026-09-26. */
.foto-presentacion{inset:-3%}
.foto-presentacion::after{background:radial-gradient(ellipse closest-side,rgba(8,8,10,0) 35%,var(--void) 100%)}
@media(max-width:700px){ .foto-presentacion{inset:-3%} }