/* =========================================================
   MANUEL PARADELA
   Sistema de dos tonos: papel y tinta, en alternancia
   deliberada (mismo recurso que sus piezas de marca).
   La identidad es tipográfica y en blanco y negro.
   El color entra solo por la fotografía y por un halo
   granulado puntual, nunca como color de marca.
   ========================================================= */

@font-face{
  font-family:"Nexa";src:url("fonts/NexaBold.woff2") format("woff2");
  font-weight:700;font-style:normal;font-display:swap;
}
@font-face{
  font-family:"Nexa";src:url("fonts/NexaLight.woff2") format("woff2");
  font-weight:300;font-style:normal;font-display:swap;
}
@font-face{
  font-family:"InterVar";src:url("fonts/Inter.woff2") format("woff2");
  font-weight:100 900;font-style:normal;font-display:swap;
}

:root{
  --ease-out:    cubic-bezier(.23,1,.32,1);
  --ease-in-out: cubic-bezier(.77,0,.175,1);

  --t-press: 120ms;
  --t-ui:    200ms;
  --t-hover: 240ms;
  --t-enter: 720ms;

  /* Los dos únicos valores de la marca. Neutros puros, sin tinte. */
  --paper:  #FAFAFA;
  --ink:    #0A0A0A;

  --wrap: 1300px;
  --pad: clamp(20px,5vw,72px);
  --nav-h: 74px;

  --z-base:1; --z-sticky:100; --z-overlay:200;
  --r: 0px;
}

/* ---------- Los dos tonos ---------- */
.tone-light{
  --bg:    var(--paper);
  --bg-2:  #F0F0F0;
  --bg-3:  #E7E7E7;
  --fg:    var(--ink);
  --fg-2:  rgba(10,10,10,.74);
  --fg-3:  rgba(10,10,10,.66);
  --line:  rgba(10,10,10,.16);
  --line-2:rgba(10,10,10,.09);
  --field: rgba(10,10,10,.045);
  background:var(--bg);color:var(--fg);
}
.tone-dark{
  --bg:    var(--ink);
  --bg-2:  #141414;
  --bg-3:  #1C1C1C;
  --fg:    var(--paper);
  --fg-2:  rgba(250,250,250,.72);
  --fg-3:  rgba(250,250,250,.58);
  --line:  rgba(250,250,250,.18);
  --line-2:rgba(250,250,250,.10);
  --field: rgba(250,250,250,.05);
  background:var(--bg);color:var(--fg);
}

*,*::before,*::after{box-sizing:border-box;margin:0;padding:0}

html{-webkit-text-size-adjust:100%;background:var(--paper)}
html.lenis,html.lenis body{height:auto}
.lenis.lenis-smooth{scroll-behavior:auto!important}

body{
  background:var(--paper);color:var(--ink);
  font-family:"InterVar",-apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,sans-serif;
  font-weight:390;
  font-size:clamp(1rem,.97rem + .18vw,1.06rem);
  line-height:1.62;
  -webkit-font-smoothing:antialiased;-moz-osx-font-smoothing:grayscale;
  overflow-x:hidden;
}
body.is-locked{overflow:hidden}

img{display:block;max-width:100%}
a{color:inherit;text-decoration:none}
button{font:inherit;color:inherit;background:none;border:0;cursor:pointer}
ul{list-style:none}
::selection{background:var(--ink);color:var(--paper)}
.tone-dark ::selection{background:var(--paper);color:var(--ink)}

.wrap{width:100%;max-width:var(--wrap);margin-inline:auto;padding-inline:var(--pad)}

/* =========================================================
   TIPOGRAFÍA
   ========================================================= */
.display{
  font-family:"Nexa","InterVar",sans-serif;font-weight:700;
  text-transform:uppercase;line-height:.98;letter-spacing:-.02em;
  text-wrap:balance;
}
h1{font-size:clamp(2.5rem,7vw,5.6rem)}
h2{font-size:clamp(1.9rem,4.4vw,3.4rem)}
h3{font-size:clamp(1.05rem,1.5vw,1.24rem);letter-spacing:-.01em;line-height:1.24}
p{text-wrap:pretty}

.lead{font-size:clamp(1.06rem,1.35vw,1.2rem);line-height:1.66;color:var(--fg-2);max-width:62ch}
.eyebrow{
  display:inline-block;font-size:.76rem;letter-spacing:.2em;text-transform:uppercase;
  font-weight:500;color:var(--fg-2);
}

/* =========================================================
   CONTROLES
   ========================================================= */
.btn{
  position:relative;display:inline-flex;align-items:center;gap:12px;
  padding:18px 30px;border-radius:var(--r);
  background:var(--fg);color:var(--bg);
  font-size:.88rem;font-weight:500;white-space:nowrap;
  transition:opacity var(--t-hover) var(--ease-out),
             box-shadow var(--t-hover) var(--ease-out),
             background var(--t-hover) var(--ease-out),
             color var(--t-hover) var(--ease-out),
             transform var(--t-press) var(--ease-out);
}
.btn .arrow{transition:transform var(--t-hover) var(--ease-out)}
@media (hover:hover) and (pointer:fine){
  .btn:hover{opacity:.86}
  .btn:hover .arrow{transform:translateX(5px)}
}
.btn:active{transform:scale(.97)}

.btn--ghost{
  background:transparent;color:var(--fg);
  box-shadow:inset 0 0 0 1px var(--line);
}
@media (hover:hover) and (pointer:fine){
  .btn--ghost:hover{opacity:1;background:var(--field);box-shadow:inset 0 0 0 1px var(--fg-3)}
}

.ulink{position:relative;display:inline-block;color:var(--fg-2);transition:color var(--t-hover) var(--ease-out)}
.ulink::after{
  content:"";position:absolute;left:0;bottom:-2px;width:100%;height:1px;background:currentColor;
  transform:scaleX(0);transform-origin:left;transition:transform var(--t-hover) var(--ease-out);
}
@media (hover:hover) and (pointer:fine){
  .ulink:hover{color:var(--fg)}
  .ulink:hover::after{transform:scaleX(1)}
}

/* =========================================================
   NAV  (se adapta al tono de la sección que tiene debajo)
   ========================================================= */
.nav{
  position:fixed;top:0;left:0;right:0;z-index:var(--z-sticky);height:var(--nav-h);
  display:flex;align-items:center;justify-content:space-between;gap:24px;
  padding-inline:var(--pad);
  color:var(--ink);
  border-bottom:1px solid transparent;
  transition:height 320ms var(--ease-out),background 320ms var(--ease-out),
             border-color 320ms var(--ease-out),color 320ms var(--ease-out);
}
/* Franja de protección: garantiza que la navegación siempre se lea,
   aunque el grano del halo pase por detrás. Se desvanece hacia abajo
   para no cortar el halo con una línea dura. */
.nav::before{
  content:"";position:absolute;inset:-1px 0 auto 0;height:150%;z-index:-1;
  pointer-events:none;
  background:linear-gradient(180deg,var(--paper) 42%,rgba(250,250,250,0) 100%);
  transition:opacity 320ms var(--ease-out);
}
.nav.on-dark::before{background:linear-gradient(180deg,var(--ink) 42%,rgba(10,10,10,0) 100%)}
.nav.is-stuck::before{opacity:0}
.nav.on-dark{color:var(--paper)}
.nav.is-stuck{height:62px;border-bottom-color:rgba(128,128,128,.22);
  background:rgba(250,250,250,.86);backdrop-filter:blur(14px);-webkit-backdrop-filter:blur(14px)}
.nav.is-stuck.on-dark{background:rgba(10,10,10,.84)}

/* Logotipo NEGRO como base, sin ningún filtro: es el estado por defecto
   y el hero es claro, así que siempre se ve aunque falle todo lo demás.
   Solo se invierte a blanco cuando el nav pasa sobre una sección oscura. */
.nav__brand{display:block;line-height:0}
.nav__brand img{height:18px;width:auto;display:block;transition:filter 320ms var(--ease-out)}
.nav.on-dark .nav__brand img{filter:invert(1)}

.nav__links{display:flex;gap:30px}
.nav__links a{font-size:.9rem;opacity:.68;transition:opacity var(--t-hover) var(--ease-out)}
@media (hover:hover) and (pointer:fine){.nav__links a:hover{opacity:1}}
.nav__right{display:flex;align-items:center;gap:16px}
.nav__cta{
  padding:10px 20px;font-size:.84rem;font-weight:500;
  box-shadow:inset 0 0 0 1px currentColor;
  transition:background var(--t-hover) var(--ease-out),color var(--t-hover) var(--ease-out),
             transform var(--t-press) var(--ease-out);
}
@media (hover:hover) and (pointer:fine){
  .nav__cta:hover{background:var(--ink);color:var(--paper)}
  .nav.on-dark .nav__cta:hover{background:var(--paper);color:var(--ink)}
}
.nav__cta:active{transform:scale(.97)}

.burger{display:none;width:30px;height:30px;position:relative}
.burger i{position:absolute;left:5px;width:20px;height:1.5px;background:currentColor;transition:transform var(--t-ui) var(--ease-out)}
.burger i:first-child{transform:translateY(-4px)}
.burger i:last-child{transform:translateY(4px)}
.burger.is-open i:first-child{transform:rotate(45deg)}
.burger.is-open i:last-child{transform:rotate(-45deg)}

.mobilemenu{
  position:fixed;inset:0;z-index:var(--z-overlay);
  display:flex;flex-direction:column;justify-content:center;
  padding:var(--nav-h) var(--pad) 36px;
  opacity:0;visibility:hidden;
  transition:opacity var(--t-ui) var(--ease-out),visibility var(--t-ui);
}
.mobilemenu.is-open{opacity:1;visibility:visible}
.mobilemenu nav{display:flex;flex-direction:column}
.mobilemenu nav a{
  font-family:"Nexa",sans-serif;font-weight:700;text-transform:uppercase;
  font-size:clamp(1.7rem,8vw,2.6rem);letter-spacing:-.02em;
  padding:13px 0;border-bottom:1px solid var(--line-2);
  opacity:0;transform:translateY(14px);
  transition:opacity 300ms var(--ease-out),transform 300ms var(--ease-out);
}
.mobilemenu.is-open nav a{opacity:1;transform:none}
.mobilemenu.is-open nav a:nth-child(1){transition-delay:60ms}
.mobilemenu.is-open nav a:nth-child(2){transition-delay:100ms}
.mobilemenu.is-open nav a:nth-child(3){transition-delay:140ms}
.mobilemenu.is-open nav a:nth-child(4){transition-delay:180ms}
.mobilemenu.is-open nav a:nth-child(5){transition-delay:220ms}
.mobilemenu__foot{margin-top:34px;font-size:.9rem;color:var(--fg-2)}

/* =========================================================
   ENTRADAS
   ========================================================= */
.reveal{opacity:0;transform:translateY(18px);transition:opacity var(--t-enter) var(--ease-out),transform var(--t-enter) var(--ease-out)}
.reveal.is-in{opacity:1;transform:none}
/* Entrada de titulares sin recorte: nada de overflow hidden, que
   cortaba el borde inferior de las letras. */
.line{display:block}
.line i{
  display:block;font-style:normal;
  opacity:0;transform:translateY(14px);
  transition:opacity 720ms var(--ease-out),transform 720ms var(--ease-out);
}
.line.is-in i{opacity:1;transform:none}

/* =========================================================
   HERO (papel, con el halo granulado)
   ========================================================= */
.hero{
  position:relative;min-height:100svh;display:flex;align-items:center;
  padding:calc(var(--nav-h) + 60px) 0 80px;overflow:hidden;
}

/* Halo granulado. Puntos, no degradado: la densidad de grano cae con
   la distancia al centro y el borde se disuelve. Va como imagen porque
   el dithering no se reproduce con degradados CSS.
   Aparece dos veces en toda la página. */
.halo{
  position:absolute;pointer-events:none;z-index:0;
  background-repeat:no-repeat;background-size:100% 100%;
  will-change:transform;
}
/* El centro denso se mantiene pegado al borde derecho: dentro del
   viewport entra sobre todo la zona disuelta, que no bloquea la lectura.
   El ancho crece más despacio que la pantalla para que en portátiles
   no se coma el titular. */
.halo--hero{
  top:-4%;right:-26%;
  width:min(760px,calc(52vw + 180px));aspect-ratio:1040/1140;opacity:.95;
  background-image:url("img/halo-ink.webp");
  animation:breathe 17s var(--ease-in-out) infinite alternate;
}
@keyframes breathe{
  from{transform:translate3d(0,0,0) scale(1)}
  to{transform:translate3d(-4%,3%,0) scale(1.1)}
}

.hero .wrap{position:relative;z-index:var(--z-base)}
.hero__title{margin:20px 0 24px;max-width:14ch}
.hero__title .thin{font-weight:300}
.hero__lead{margin-bottom:36px;max-width:46ch}
.hero__actions{display:flex;flex-wrap:wrap;gap:14px}

/* =========================================================
   MARQUEE (franja de tinta, una sola en la página)
   ========================================================= */
.marquee{padding:17px 0;overflow:hidden}
.marquee__track{display:flex;align-items:center;gap:34px;width:max-content;animation:slide 54s linear infinite}
.marquee__track span{font-size:.86rem;color:var(--fg);white-space:nowrap}
.marquee__track img{height:9px;width:auto;opacity:.72}
@keyframes slide{to{transform:translateX(-50%)}}

/* =========================================================
   SECCIONES
   ========================================================= */
.section{position:relative;padding:clamp(76px,10vw,148px) 0}
.sec-title{margin-bottom:clamp(14px,2vw,22px)}
.sec-intro{margin-bottom:clamp(38px,5vw,66px);max-width:56ch}

/* --------- PERFIL --------- */
.bio__grid{display:grid;grid-template-columns:minmax(0,.74fr) minmax(0,1fr);gap:clamp(28px,5vw,80px);align-items:center}
.bio__portrait{position:relative;overflow:hidden;background:var(--bg-2)}
.bio__portrait img{width:100%;height:auto;filter:grayscale(1) contrast(1.05);transition:transform 620ms var(--ease-out)}
@media (hover:hover) and (pointer:fine){.bio__portrait:hover img{transform:scale(1.025)}}
.bio__name{margin-bottom:4px}
.bio__handle{display:inline-block;font-size:.95rem;color:var(--fg-3);margin-bottom:22px}
.bio__claim{
  font-family:"Nexa",sans-serif;font-weight:700;text-transform:uppercase;
  font-size:clamp(1.2rem,2.1vw,1.7rem);letter-spacing:-.015em;line-height:1.12;margin-bottom:20px;
}
.bio__text{display:flex;flex-direction:column;gap:14px;margin-bottom:30px;max-width:52ch}
.bio__text p{color:var(--fg-2)}
.bio__text strong{color:var(--fg);font-weight:500}

.social{display:flex;flex-wrap:wrap;gap:8px}
.social a{
  padding:9px 15px;border-radius:var(--r);
  box-shadow:inset 0 0 0 1px var(--line);
  font-size:.84rem;color:var(--fg-2);
  transition:color var(--t-hover) var(--ease-out),background var(--t-hover) var(--ease-out),
             box-shadow var(--t-hover) var(--ease-out),transform var(--t-press) var(--ease-out);
}
@media (hover:hover) and (pointer:fine){
  .social a:hover{color:var(--bg);background:var(--fg);box-shadow:inset 0 0 0 1px var(--fg)}
}
.social a:active{transform:scale(.97)}

/* --------- ENFOQUE (tinta, con fotografía a color debajo) --------- */
.tesis{position:relative;overflow:hidden;isolation:isolate;padding-block:clamp(92px,13vw,180px)}
.tesis__bg{position:absolute;inset:0;z-index:-2}
.tesis__bg img{width:100%;height:100%;object-fit:cover;object-position:center 40%}
.tesis__bg::after{
  content:"";position:absolute;inset:0;
  background:linear-gradient(180deg,rgba(10,10,10,.90) 0%,rgba(10,10,10,.83) 48%,rgba(10,10,10,.95) 100%);
}
.tesis__quote{max-width:17ch;margin-bottom:clamp(38px,5vw,60px)}
.tesis__quote .thin{font-weight:300;color:var(--fg-2)}
.tesis__body{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:clamp(24px,3vw,44px) clamp(32px,5vw,72px);max-width:1020px}
.tesis__item h3{margin-bottom:9px}
.tesis__item p{color:var(--fg-2);font-size:.97rem}
.tesis__item:first-child{grid-column:1 / -1;max-width:64ch}

/* --------- SERVICIOS --------- */
.svc{border-top:1px solid var(--line)}
.svc__row{
  position:relative;display:grid;
  grid-template-columns:minmax(0,.6fr) minmax(0,1fr) 30px;
  gap:clamp(16px,3vw,44px);align-items:start;
  padding:clamp(24px,3vw,38px) clamp(10px,1.6vw,22px);
  border-bottom:1px solid var(--line-2);
  transition:padding-left var(--t-hover) var(--ease-out);
}
.svc__row::before{content:"";position:absolute;inset:0;background:var(--field);opacity:0;transition:opacity var(--t-hover) var(--ease-out)}
.svc__row > *{position:relative}
@media (hover:hover) and (pointer:fine){
  .svc__row:hover::before{opacity:1}
  .svc__row:hover{padding-left:clamp(18px,2.2vw,32px)}
  .svc__row:hover .svc__arrow{opacity:1;transform:none}
}
.svc__t{font-family:"Nexa",sans-serif;font-weight:700;text-transform:uppercase;font-size:clamp(1.08rem,1.65vw,1.36rem);letter-spacing:-.015em;line-height:1.14}
.svc__d{color:var(--fg-2);font-size:.97rem;max-width:52ch}
.svc__arrow{justify-self:end;color:var(--fg-3);font-size:1.05rem;line-height:1.4;opacity:0;transform:translate(-6px,6px);transition:opacity var(--t-hover) var(--ease-out),transform var(--t-hover) var(--ease-out)}

/* --------- VENTURES (tinta, rejilla asimétrica) --------- */
.vgrid{display:grid;grid-template-columns:repeat(6,1fr);gap:1px;background:var(--line-2);border:1px solid var(--line-2)}
.vcard{position:relative;background:var(--bg);padding:clamp(26px,3vw,44px);display:flex;flex-direction:column;min-height:236px;transition:background var(--t-hover) var(--ease-out)}
@media (hover:hover) and (pointer:fine){
  .vcard:hover{background:var(--bg-3)}
  .vcard:hover .vcard__go{opacity:1;transform:none}
  .vcard:hover .vcard__name{text-decoration:underline;text-underline-offset:6px;text-decoration-thickness:1px}
}
a.vcard:active{transform:scale(.995)}
.vcard--lead{grid-column:span 4}
.vcard--half{grid-column:span 2}
.vcard--third{grid-column:span 3}
.vcard__top{display:flex;align-items:flex-start;justify-content:space-between;gap:14px;margin-bottom:auto}
.vcard__kind{font-size:.76rem;letter-spacing:.14em;text-transform:uppercase;color:var(--fg-3)}
.vcard__state{
  display:inline-block;margin-top:9px;
  font-size:.68rem;letter-spacing:.12em;text-transform:uppercase;
  color:var(--fg-2);box-shadow:inset 0 0 0 1px var(--line);padding:4px 9px;
}
.vcard__go{
  flex:none;font-size:1.05rem;line-height:1;color:var(--fg-3);
  opacity:0;transform:translate(-5px,5px);
  transition:opacity var(--t-hover) var(--ease-out),transform var(--t-hover) var(--ease-out);
}
.vcard__url{margin-top:16px;font-size:.82rem;color:var(--fg-3)}
.vcard__name{font-family:"Nexa",sans-serif;font-weight:700;text-transform:uppercase;font-size:clamp(1.4rem,2.3vw,2rem);letter-spacing:-.02em;line-height:1;margin:32px 0 12px}
.vcard__desc{color:var(--fg-2);font-size:.95rem;max-width:46ch}

/* --------- CHARLAS (papel) --------- */
.talks__grid{display:grid;grid-template-columns:minmax(0,.7fr) minmax(0,1fr);gap:clamp(28px,5vw,72px);align-items:start}
.talks__list{display:flex;flex-direction:column}
.talks__item{display:flex;align-items:baseline;gap:16px;padding:17px 0;border-bottom:1px solid var(--line-2)}
.talks__item:first-child{border-top:1px solid var(--line)}
.talks__item b{font-weight:500;font-size:1.02rem}
.talks__item span{color:var(--fg-3);font-size:.86rem;margin-left:auto;text-align:right;flex:none}
.talks__specs{display:flex;flex-wrap:wrap;gap:8px;margin:26px 0 30px}
.talks__specs li{
  font-size:.78rem;letter-spacing:.06em;color:var(--fg-2);
  box-shadow:inset 0 0 0 1px var(--line);padding:8px 13px;
}
.talks__note{margin-top:20px;font-size:.9rem;color:var(--fg-3);max-width:50ch}

/* --------- LECTURAS ---------
   Comparte tono con Charlas, así que se separa con un fondo un punto
   más gris y una línea. Las portadas llevan borde para no fundirse. */
.reads-sec{background:var(--bg-2);border-top:1px solid var(--line-2)}
.reads{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:clamp(20px,2.6vw,38px)}
.read{
  display:flex;flex-direction:column;
  transition:transform var(--t-press) var(--ease-out);
}
.read__cover{
  display:block;overflow:hidden;margin-bottom:20px;
  box-shadow:inset 0 0 0 1px var(--line);
}
.read__cover img{
  width:100%;height:auto;
  transition:transform 520ms var(--ease-out);
}
@media (hover:hover) and (pointer:fine){
  .read:hover .read__cover img{transform:scale(1.035)}
  .read:hover .read__go{color:var(--fg)}
  .read:hover .read__go span{transform:translate(3px,-3px)}
}
.read:active{transform:scale(.995)}
.read__meta{font-size:.72rem;letter-spacing:.16em;text-transform:uppercase;color:var(--fg-3);margin-bottom:10px}
.read__title{
  font-family:"Nexa",sans-serif;font-weight:700;text-transform:uppercase;
  font-size:clamp(1.02rem,1.4vw,1.2rem);letter-spacing:-.015em;line-height:1.16;
  margin-bottom:12px;
}
.read__claim{font-size:.95rem;color:var(--fg);margin-bottom:10px;max-width:34ch}
.read__desc{font-size:.92rem;color:var(--fg-2);margin-bottom:18px;max-width:38ch}
.read__go{
  margin-top:auto;font-size:.82rem;letter-spacing:.06em;color:var(--fg-2);
  transition:color var(--t-hover) var(--ease-out);
}
.read__go span{display:inline-block;transition:transform var(--t-hover) var(--ease-out)}

/* --------- CONTACTO (tinta, fotografía a color y halo) --------- */
.contact{position:relative;overflow:hidden;isolation:isolate;padding-block:clamp(90px,12vw,170px)}
.contact__bg{position:absolute;inset:0;z-index:-2}
.contact__bg img{width:100%;height:100%;object-fit:cover;object-position:center 35%}
.contact__bg::after{
  content:"";position:absolute;inset:0;
  background:linear-gradient(180deg,rgba(10,10,10,.92) 0%,rgba(10,10,10,.84) 42%,rgba(10,10,10,.96) 100%);
}
.halo--contact{
  bottom:-42%;left:-24%;width:min(700px,78vw);aspect-ratio:1040/1140;opacity:.55;z-index:-1;
  background-image:url("img/halo-paper.webp");
  animation:breathe 23s var(--ease-in-out) infinite alternate-reverse;
}
.contact .wrap{position:relative;z-index:var(--z-base)}
.contact__title{max-width:14ch;margin-bottom:22px}
.contact__lead{margin-bottom:38px}
.contact__actions{display:flex;flex-wrap:wrap;align-items:center;gap:22px}

/* --------- FOOTER --------- */
.footer{padding:26px 0;border-top:1px solid var(--line-2)}
.footer__in{display:flex;align-items:center;justify-content:space-between;gap:18px;flex-wrap:wrap;font-size:.86rem;color:var(--fg-3)}
.footer__in a{transition:color var(--t-hover) var(--ease-out)}
@media (hover:hover) and (pointer:fine){.footer__in a:hover{color:var(--fg)}}

/* =========================================================
   RESPONSIVE
   ========================================================= */
@media (max-width:1180px){
  /* En portátiles hay menos aire a la derecha: el halo se retira más */
  .halo--hero{top:-2%;right:-32%;width:min(600px,62vw);opacity:.88}
}
@media (max-width:1080px){
  .bio__grid{grid-template-columns:1fr;gap:34px}
  .bio__portrait{max-width:430px}
  .talks__grid{grid-template-columns:1fr;gap:30px}
  .tesis__body{grid-template-columns:1fr}
  .tesis__item:first-child{grid-column:auto}
  .vcard--lead,.vcard--half,.vcard--third{grid-column:span 3}
  .reads{grid-template-columns:repeat(2,minmax(0,1fr))}
  .read:last-child{grid-column:1 / -1;max-width:none}
}
@media (max-width:860px){
  :root{--nav-h:62px}
  .nav__links,.nav__cta{display:none}
  .burger{display:grid}
  .hero{min-height:auto;padding-top:calc(var(--nav-h) + 76px);padding-bottom:76px}
  /* Apilado: el texto ocupa todo el ancho, así que el halo se retira
     hacia arriba y solo asoma el grano difuso en la esquina. */
  .halo--hero{top:-55%;right:-34%;width:min(460px,76vw);opacity:.8}
  .svc__row{grid-template-columns:1fr 26px;grid-template-areas:"t a" "d d"}
  .svc__t{grid-area:t}.svc__d{grid-area:d;margin-top:9px}.svc__arrow{grid-area:a}
  .vcard--lead,.vcard--half,.vcard--third{grid-column:span 6}
  .talks__item{flex-wrap:wrap;gap:4px 16px}
  .talks__item span{margin-left:0;text-align:left;flex-basis:100%}
  .reads{grid-template-columns:1fr;gap:38px}
  .read__claim,.read__desc{max-width:52ch}
}
@media (max-width:520px){
  .marquee__track{animation-duration:36s}
  .footer__in{justify-content:center;text-align:center}
  .btn{width:100%;justify-content:space-between}
  .hero__actions{width:100%}
}

@media (prefers-reduced-motion:reduce){
  *,*::before,*::after{animation-duration:.01ms!important;animation-iteration-count:1!important;transition-duration:.01ms!important}
  .reveal{opacity:1!important;transform:none!important}
  .line i{opacity:1!important;transform:none!important}
}

:focus-visible{outline:2px solid currentColor;outline-offset:3px}