@font-face { font-family: "DM Sans"; src: url("../fonts/DMSans-Variable.woff2") format("woff2"); font-weight: 100 1000; font-style: normal; font-display: swap; }
@font-face { font-family: "Fraunces"; src: url("../fonts/Fraunces-Italic-Variable.woff2") format("woff2"); font-weight: 100 900; font-style: italic; font-display: swap; }
/* Tokens del design system Mariana Boscán. Claro por defecto; oscuro si el dispositivo lo pide o si se elige con el botón. */
:root {
  color-scheme: light;
  --fondo:#fff; --fondo-elevado:#fff; --texto:#14141e; --texto-suave:#5a5a62; --linea:#e3e3e4; --linea-control:#8a8a8e;
  --acento:#afb5e7; --sobre-acento:#14141e; --lavanda-suave:#ebecf9; --nude-suave:#faedec; --rosa-suave:#ffeffb; --foco:#14141e;
  --glow-1:rgba(175,181,231,.55); --glow-2:rgba(255,191,239,.40);
  --ver-claro:block; --ver-oscuro:none;
  --e1:4px; --e2:8px; --e3:12px; --e4:16px; --e6:24px; --e8:32px; --e12:48px; --e16:64px; --e24:96px;
  --r-sm:8px; --r-md:16px; --r-lg:24px; --r-pill:999px;
  --sans:"DM Sans",system-ui,-apple-system,"Segoe UI",sans-serif; --display:"Fraunces",Georgia,"Times New Roman",serif;
}
@media (prefers-color-scheme: dark) { :root:not([data-theme="light"]) {
  color-scheme: dark;
  --fondo:#14141e; --fondo-elevado:#22222c; --texto:#fff; --texto-suave:#b8b8bc; --linea:#3a3a42; --linea-control:#72727a;
  --lavanda-suave:#333446; --nude-suave:#3f353b; --rosa-suave:#433648; --foco:#afb5e7; --glow-1:rgba(175,181,231,.20); --glow-2:rgba(255,191,239,.14);
  --ver-claro:none; --ver-oscuro:block;
}}
:root[data-theme="dark"] {
  color-scheme: dark;
  --fondo:#14141e; --fondo-elevado:#22222c; --texto:#fff; --texto-suave:#b8b8bc; --linea:#3a3a42; --linea-control:#72727a;
  --lavanda-suave:#333446; --nude-suave:#3f353b; --rosa-suave:#433648; --foco:#afb5e7; --glow-1:rgba(175,181,231,.20); --glow-2:rgba(255,191,239,.14);
  --ver-claro:none; --ver-oscuro:block;
}
*{box-sizing:border-box} html{-webkit-text-size-adjust:100%;scroll-behavior:smooth}
@media(prefers-reduced-motion:reduce){html{scroll-behavior:auto}}
body{margin:0;min-height:100vh;display:flex;flex-direction:column;font-family:var(--sans);font-size:16px;line-height:26px;color:var(--texto);background-color:var(--fondo);
 background-image:radial-gradient(ellipse 65% 42% at 100% 0%,var(--glow-1),transparent 70%),radial-gradient(ellipse 60% 36% at 0% 100%,var(--glow-2),transparent 70%);background-repeat:no-repeat;background-attachment:fixed}
main{flex:1}
a{color:inherit} img{max-width:100%}
:focus-visible{outline:2px solid var(--foco);outline-offset:2px}
.wrap{width:100%;max-width:1240px;margin:0 auto;padding-left:var(--e4);padding-right:var(--e4)} @media(min-width:768px){.wrap{padding-left:var(--e8);padding-right:var(--e8)}}
.skip{position:absolute;left:-9999px} .skip:focus{left:var(--e4);top:var(--e4);background:var(--fondo);padding:var(--e2) var(--e4);border-radius:var(--r-sm);z-index:30}

/* ---------- cabecera ---------- */
.top{position:relative;z-index:20;display:grid;grid-template-columns:auto 1fr auto;align-items:center;gap:var(--e3) var(--e6);padding-top:var(--e4);padding-bottom:var(--e4)}
.logo img{height:46px;width:auto}
.logo .l-claro{display:var(--ver-claro)} .logo .l-oscuro{display:var(--ver-oscuro)}
.nav{display:flex;justify-content:flex-end;gap:var(--e1)}
.nav a{text-decoration:none;padding:var(--e2) var(--e4);border-radius:var(--r-pill);font-weight:500}
.nav a:hover,.nav a[aria-current="page"]{background:var(--lavanda-suave)}
.ctl{display:flex;align-items:center;gap:var(--e2)}
.ctl button,.ctl summary{font:inherit;font-weight:500;font-size:14px;line-height:20px;color:var(--texto);background:transparent;border:1px solid var(--linea-control);border-radius:var(--r-pill);cursor:pointer;height:40px;display:inline-flex;align-items:center;gap:var(--e2);padding:0 var(--e4);list-style:none}
.ctl summary::-webkit-details-marker{display:none}
.ctl button:hover,.ctl summary:hover{background:var(--lavanda-suave)}
.ctl svg{width:18px;height:18px;flex:none;stroke:currentColor;fill:none;stroke-width:1.6;stroke-linecap:round;stroke-linejoin:round}
.idioma{position:relative}
.idioma .chev{width:14px;height:14px;transition:transform .2s} .idioma[open] .chev{transform:rotate(180deg)}
.idioma ul{position:absolute;right:0;top:calc(100% + var(--e2));min-width:176px;margin:0;padding:var(--e2);list-style:none;background:var(--fondo-elevado);border:1px solid var(--linea);border-radius:var(--r-md)}
.idioma li a{display:flex;align-items:center;justify-content:space-between;gap:var(--e4);padding:var(--e2) var(--e3);border-radius:var(--r-sm);text-decoration:none;font-weight:500}
.idioma li a:hover,.idioma li a[aria-current="true"]{background:var(--lavanda-suave)}
.idioma li a small{font-size:12px;letter-spacing:.1em;color:var(--texto-suave)}
.tema .i-sol{display:var(--ver-oscuro)} .tema .i-luna{display:var(--ver-claro)}
.ctl button.tema{width:40px;padding:0;justify-content:center}
@media(max-width:820px){
 .top{grid-template-columns:1fr auto}
 .nav{grid-column:1/-1;grid-row:2;justify-content:flex-start;overflow-x:auto;margin:0 calc(var(--e4)*-1);padding:0 var(--e4);scrollbar-width:none}
 .nav a{white-space:nowrap}
}

/* ---------- tipografía ---------- */
h1,h2,h3{margin:0;font-weight:500}
h1{font-size:44px;line-height:1.02;letter-spacing:-.02em} @media(min-width:768px){h1{font-size:84px;letter-spacing:-.03em}}
h1 .serif,h2 .serif{font-family:var(--display);font-style:italic;font-weight:300;font-variation-settings:"opsz" 144;font-size:1.08em}
h2{font-size:30px;line-height:1.1;letter-spacing:-.015em} @media(min-width:768px){h2{font-size:44px}}
h3{font-size:20px;line-height:28px}
.lead{font-size:20px;line-height:30px;font-weight:500;color:var(--texto-suave);margin:var(--e6) 0 0;max-width:560px}
.btns{display:flex;gap:var(--e3);flex-wrap:wrap;margin-top:var(--e8)}
.btn{display:inline-flex;align-items:center;justify-content:center;gap:var(--e2);font:inherit;font-weight:500;text-decoration:none;cursor:pointer;padding:var(--e3) var(--e6);border-radius:var(--r-pill);border:1px solid var(--linea-control);background:transparent;color:var(--texto)}
.btn:hover{background:var(--lavanda-suave)}
.btn.primario{background:var(--acento);border-color:var(--acento);color:var(--sobre-acento)} .btn.primario:hover{filter:brightness(.95)}
.btn[disabled]{opacity:.6;cursor:wait}
.enlace{font-weight:500}

/* ---------- hero ---------- */
.hero{display:grid;gap:var(--e6);align-items:end;padding-top:var(--e12);padding-bottom:var(--e8)}
@media(min-width:900px){.hero{grid-template-columns:1.25fr .75fr;gap:var(--e12);padding-top:var(--e16);padding-bottom:var(--e12)}}
.hero .lead{margin-top:0}
.hero .btns{margin-top:var(--e6)}
.banner{padding-bottom:var(--e16)}
.banner .marco{border-radius:var(--r-lg);overflow:hidden;background:linear-gradient(135deg,#afb5e7,#ffbfef 65%,#e9b8b1)}
.banner img{display:block;width:100%;height:auto}
.banner .vacio{aspect-ratio:16/8}

/* ---------- franja de servicios ---------- */
.ico{width:22px;height:22px;flex:none;stroke:currentColor;fill:none;stroke-width:1.6;stroke-linecap:round;stroke-linejoin:round}
.franja{border-top:1px solid var(--linea);border-bottom:1px solid var(--linea);padding:var(--e6) 0}
.franja ul{display:flex;flex-wrap:wrap;justify-content:center;gap:var(--e2) var(--e8);margin:0;padding:0;list-style:none;font-size:22px;line-height:32px;font-weight:500;letter-spacing:-.01em}
.franja li:nth-child(even){font-family:var(--display);font-style:italic;font-weight:300;font-size:1.08em}
@media(min-width:768px){.franja ul{font-size:28px}}

/* ---------- proyectos ---------- */
.seccion{padding-top:var(--e16);padding-bottom:var(--e8)}
.seccion-cab{display:flex;align-items:flex-end;justify-content:space-between;gap:var(--e4);margin-bottom:var(--e12);flex-wrap:wrap}
.rejilla{display:grid;gap:var(--e12) var(--e8);grid-template-columns:1fr;list-style:none;margin:0;padding:0}
@media(min-width:700px){.rejilla{grid-template-columns:repeat(2,1fr)} .rejilla:not(.filtrada) li:nth-child(even){margin-top:var(--e16)}}
.tarjeta{display:block;text-decoration:none}
.tarjeta .img{aspect-ratio:4/3;overflow:hidden;border-radius:var(--r-lg);background:var(--lavanda-suave);border:1px solid var(--linea)}
.tarjeta img{display:block;width:100%;height:100%;object-fit:cover;transition:transform .5s}
.tarjeta:hover img{transform:scale(1.04)}
@media(prefers-reduced-motion:reduce){.tarjeta img{transition:none}.tarjeta:hover img{transform:none}}
.tarjeta .meta{display:flex;gap:var(--e4);align-items:baseline;padding:var(--e4) var(--e1) 0}
.tarjeta .num{font-family:var(--display);font-style:italic;font-weight:300;font-size:22px;color:var(--texto-suave);min-width:34px}
.tarjeta h3{font-size:22px;line-height:28px;letter-spacing:-.01em} .tarjeta p{margin:0;color:var(--texto-suave);font-size:14px;line-height:22px}
.tarjeta:hover h3{opacity:.7}
.filtros{display:flex;gap:var(--e2);flex-wrap:wrap;margin:0 0 var(--e12)}
.filtros button{font:inherit;font-weight:500;font-size:14px;cursor:pointer;padding:var(--e2) var(--e4);border-radius:var(--r-pill);border:1px solid var(--linea-control);background:transparent;color:var(--texto)}
.filtros button[aria-pressed="true"]{background:var(--acento);border-color:var(--acento);color:var(--sobre-acento)}
[hidden]{display:none!important}
.cab-pagina{padding-top:var(--e12);padding-bottom:var(--e12)}
.cab-pagina h1{font-size:48px} @media(min-width:768px){.cab-pagina h1{font-size:96px}}

/* ---------- página de proyecto ---------- */
.pila{display:flex;flex-direction:column;gap:var(--e4)} @media(min-width:768px){.pila{gap:var(--e6)}}
.pieza{width:100%;border-radius:var(--r-md);overflow:hidden;background:var(--lavanda-suave);position:relative}
.pieza img,.pieza iframe{position:absolute;inset:0;width:100%;height:100%;border:0;display:block}
.pager{display:flex;justify-content:space-between;gap:var(--e4);flex-wrap:wrap;padding:var(--e12) 0}

/* ---------- paneles, sobre mí, contacto ---------- */
.panel{background:var(--fondo-elevado);border:1px solid var(--linea);border-radius:var(--r-lg);padding:var(--e6)} @media(min-width:640px){.panel{padding:var(--e8)}}
.panel.suave{background:var(--lavanda-suave);border-color:transparent}
.dos{display:grid;gap:var(--e8)} @media(min-width:860px){.dos{grid-template-columns:1fr 1fr;gap:var(--e12)}}
.sobre p{font-size:18px;line-height:30px;margin:0 0 var(--e4)}
.retrato{width:100%;max-width:380px;aspect-ratio:1;border-radius:50%;overflow:hidden;background:linear-gradient(145deg,#afb5e7,#ffbfef 60%,#e9b8b1);margin-bottom:var(--e8)}
.retrato img{width:100%;height:100%;object-fit:cover;display:block}
.datos{list-style:none;margin:0;padding:0;display:grid;gap:var(--e3)}
.datos li{display:flex;gap:var(--e4);align-items:flex-start;padding-bottom:var(--e3);border-bottom:1px solid var(--linea)}
.datos li .ico{margin-top:2px;color:var(--texto-suave)}
.datos strong{display:block;font-size:12px;line-height:16px;letter-spacing:.12em;text-transform:uppercase;color:var(--texto-suave);font-weight:500}
.campo{margin-bottom:var(--e6)} .campo label{display:block;font-weight:500;margin-bottom:var(--e2)}
input[type=text],input[type=email],textarea{display:block;width:100%;font:inherit;color:var(--texto);padding:var(--e3) var(--e4);background:var(--fondo);border:1px solid var(--linea-control);border-radius:var(--r-sm)}
textarea{min-height:160px;resize:vertical} input:focus,textarea:focus{border-color:var(--texto)}
.trampa{position:absolute;left:-9999px;height:0;overflow:hidden}
.aviso{margin:var(--e4) 0 0;padding:var(--e3) var(--e4);border-radius:var(--r-sm);background:var(--lavanda-suave)} .aviso.error{background:var(--rosa-suave)}
.nota{font-size:14px;line-height:22px;color:var(--texto-suave)}

/* ---------- pie ---------- */
.pie{margin-top:var(--e16);border-top:1px solid var(--linea);padding-top:var(--e8);padding-bottom:var(--e8)}
.pie .fila{display:flex;justify-content:space-between;gap:var(--e6);flex-wrap:wrap;align-items:center}
.redes{display:flex;gap:var(--e3);flex-wrap:wrap;list-style:none;margin:0;padding:0}
.redes .red{display:grid;place-items:center;width:44px;height:44px;border-radius:50%;border:1px solid var(--linea-control);text-decoration:none}
.redes .red:hover{background:var(--lavanda-suave)}
.pie small{color:var(--texto-suave)}

/* =====================================================================
   Home interactiva: secciones a pantalla completa, scroll con efectos
   ===================================================================== */
.barra{position:sticky;top:0;z-index:40;background:color-mix(in srgb,var(--fondo) 72%,transparent);-webkit-backdrop-filter:saturate(1.4) blur(16px);backdrop-filter:saturate(1.4) blur(16px)}
html{scroll-padding-top:72px}
body.home{scroll-snap-type:none}
@media(min-width:900px) and (prefers-reduced-motion:no-preference){html:has(body.home){scroll-snap-type:y proximity}}
.pantalla{min-height:calc(100svh - 72px);position:relative;scroll-snap-align:start;display:flex;flex-direction:column;justify-content:center;max-width:100%}
.pantalla.centrada{align-items:center;text-align:center;padding:var(--e16) var(--e4);max-width:1240px;margin:0 auto}
@media(min-width:768px){.pantalla.centrada{padding-left:var(--e8);padding-right:var(--e8)}}
.btns.centro{justify-content:center}
.gigante{font-size:clamp(40px,8vw,112px);line-height:1;letter-spacing:-.03em;margin-bottom:var(--e8)}

/* entrada al cargar y revelado al hacer scroll */
.entra{animation:sube .9s cubic-bezier(.2,.7,.2,1) both;animation-delay:var(--d,0s)}
@keyframes sube{from{opacity:0;transform:translateY(28px)}to{opacity:1;transform:none}}
.rev{opacity:0;transform:translateY(32px);transition:opacity .9s cubic-bezier(.2,.7,.2,1),transform .9s cubic-bezier(.2,.7,.2,1);transition-delay:var(--d,0s)}
.rev.in{opacity:1;transform:none}

/* ---- hero 2 ---- */
.hero2{position:relative;height:calc(100svh - 72px + 170vh);scroll-snap-align:start}
.hero2-pin{position:sticky;top:72px;height:calc(100svh - 72px);min-height:0;overflow:hidden;align-items:center;justify-content:flex-start;padding-top:var(--e8);isolation:isolate}
.hero2-texto{text-align:center;max-width:1100px;margin:0 auto;padding:0 var(--e4);position:relative;z-index:3}
.hero2 h1{font-size:clamp(34px,5.6vw,84px);line-height:1.02;letter-spacing:-.035em}
.hero2 h1 .serif{font-size:1.08em}
.lead2{margin:var(--e6) auto 0;max-width:600px;font-size:18px;line-height:28px;color:var(--texto-suave)}
.hero2 .btns{margin-top:var(--e6)}
.btn .ico{width:18px;height:18px}
.escena2{position:relative;width:min(760px,94vw);flex:1;min-height:300px;margin:var(--e4) auto 0;z-index:1}
.retrato2{position:absolute;left:50%;bottom:0;transform:translateX(-50%) scale(var(--z,1));transform-origin:50% 100%;height:118%;aspect-ratio:1/1.1;display:flex;align-items:flex-end;justify-content:center}
.retrato2 img{height:100%;width:auto;max-width:none;display:block;object-fit:contain}
.retrato2 img.redonda{height:78%;aspect-ratio:1;border-radius:50%;object-fit:cover;background:linear-gradient(145deg,#afb5e7,#ffbfef 60%,#e9b8b1);margin-bottom:-2%}
.rueda{position:absolute;right:max(var(--e6),4vw);top:var(--e6);width:112px;height:112px;z-index:2;fill:var(--texto)}
.rueda text{font-size:9.5px;letter-spacing:.14em;font-weight:500}
.rueda .gira{transform-origin:60px 60px;animation:gira 26s linear infinite}
.rueda .estrella{fill:var(--texto)}
@keyframes gira{to{transform:rotate(360deg)}}

/* ---- enunciado: las palabras se encienden al bajar ---- */
.enunciado{height:230vh;position:relative}
.enunciado .pin{position:sticky;top:72px;height:calc(100svh - 72px);display:grid;place-items:center;padding:0 var(--e4)}
.grande{margin:0;max-width:1100px;font-size:clamp(30px,5.6vw,76px);line-height:1.08;font-weight:500;letter-spacing:-.025em;text-align:center}
.grande .pal{opacity:var(--o,.16);transition:opacity .25s}
.grande .pal:last-child{font-family:var(--display);font-style:italic;font-weight:300;font-size:1.08em}

/* ---- galería fijada con avance horizontal ---- */
.galeria{height:calc(var(--n) * 62vh + 100vh);position:relative}
.galeria .pin{position:sticky;top:72px;height:calc(100svh - 72px);overflow:hidden;display:flex;flex-direction:column;justify-content:center;gap:var(--e8)}
.gtitulo{padding:0 max(var(--e4),calc((100vw - 1240px)/2 + var(--e8)))}
.pista{display:flex;gap:var(--e6);padding:0 max(var(--e4),calc((100vw - 1240px)/2 + var(--e8)));width:max-content;will-change:transform;transform:translate3d(var(--tx,0),0,0)}
.gcard{display:block;width:min(66vw,640px);flex:none;text-decoration:none}
.gcard .img{aspect-ratio:4/3;border-radius:var(--r-lg);overflow:hidden;background:var(--lavanda-suave);border:1px solid var(--linea)}
.gcard .img img{display:block;width:100%;height:100%;object-fit:cover;transition:transform .6s}
.gcard:hover .img img{transform:scale(1.04)}
.gcard .meta{display:flex;gap:var(--e4);align-items:baseline;padding:var(--e4) var(--e1) 0}
.gcard .num{font-family:var(--display);font-style:italic;font-weight:300;font-size:22px;color:var(--texto-suave);min-width:34px}
.gcard h3{font-size:22px;line-height:28px} .gcard p{margin:0;color:var(--texto-suave);font-size:14px;line-height:22px}
.gcard.final{display:flex;align-items:center;justify-content:center;gap:var(--e3);aspect-ratio:4/3;width:min(40vw,380px);border-radius:var(--r-lg);border:1px dashed var(--linea-control);font-size:24px;font-weight:500;text-align:center;padding:var(--e6)}
.gcard.final:hover{background:var(--lavanda-suave)} .gcard.final .ico{width:28px;height:28px}
@media(max-width:699px){
 .galeria{height:auto;padding:var(--e12) 0}.galeria .pin{position:static;height:auto;overflow:visible}
 .pista{width:auto;overflow-x:auto;scroll-snap-type:x mandatory;transform:none;padding-bottom:var(--e4)}
 .gcard{width:82vw;scroll-snap-align:center}.gcard.final{width:60vw}
}

/* ---- sobre mí cinematográfico (siempre oscuro, con tu paleta) ---- */
.cine{overflow:hidden;background:#14141e;color:#fff;justify-content:flex-end;min-height:max(calc(100svh - 72px),640px);isolation:isolate}
.cine-luz{position:absolute;inset:0;z-index:0;background:radial-gradient(ellipse 70% 55% at 50% 100%,rgba(175,181,231,.75),rgba(175,181,231,0) 70%),radial-gradient(ellipse 50% 40% at 15% 20%,rgba(255,191,239,.18),transparent 70%),radial-gradient(ellipse 45% 40% at 90% 30%,rgba(175,181,231,.16),transparent 70%)}
.cine::after{content:"";position:absolute;inset:0;z-index:1;pointer-events:none;opacity:.10;background-image:url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='160' height='160'><filter id='n'><feTurbulence type='fractalNoise' baseFrequency='.9' numOctaves='2'/></filter><rect width='100%' height='100%' filter='url(%23n)'/></svg>")}
.cine-retrato{position:absolute;inset:0;transform:scale(var(--z,1));transform-origin:50% 60%;z-index:1;display:block}
.cine-retrato img{width:100%;height:100%;object-fit:cover;object-position:50% 24%;display:block}
.cine-retrato img.redonda{display:none}
.cine-retrato img.recorte{filter:none}
.cine-logo{position:absolute;left:50%;top:61%;transform:translateX(-50%);z-index:3;margin:0;width:min(320px,62vw)}
.cine-logo.rev{transform:translate(-50%,32px)} .cine-logo.rev.in{transform:translateX(-50%)}
.cine-logo img{display:block;width:100%;height:auto}
.cine-textos{position:relative;z-index:3;display:grid;gap:var(--e4);padding:0 max(var(--e4),4vw) var(--e8);margin-top:auto}
@media(min-width:800px){.cine-textos{grid-template-columns:1fr 1fr 1fr;gap:var(--e12);align-items:end;padding-bottom:var(--e12)}.cine-textos p:nth-child(2){text-align:center}.cine-textos p:nth-child(3){text-align:right}.cine-textos p{max-width:280px}.cine-textos p:nth-child(2){justify-self:center}.cine-textos p:nth-child(3){justify-self:end}}
.cine-textos p{margin:0;font-size:15px;line-height:23px;color:rgba(255,255,255,.78)}
body.home .cine + section{margin-top:0}

/* ---- puntos de navegación entre pantallas ---- */
.puntos{position:fixed;right:var(--e4);top:50%;transform:translateY(-50%);z-index:35;display:none;flex-direction:column;gap:var(--e3);margin:0;padding:0;list-style:none}
@media(min-width:1100px){.puntos{display:flex}}
.puntos a{display:block;width:10px;height:10px;border-radius:50%;border:1.5px solid var(--texto);opacity:.35;transition:all .3s;position:relative}
.puntos a.on{background:var(--texto);opacity:1;transform:scale(1.2)}
.puntos a span{position:absolute;right:20px;top:50%;transform:translateY(-50%);white-space:nowrap;font-size:12px;letter-spacing:.06em;background:var(--fondo-elevado);border:1px solid var(--linea);padding:2px 10px;border-radius:999px;opacity:0;pointer-events:none;transition:opacity .2s}
.puntos a:hover span{opacity:1}

/* ---- sin animación: todo en flujo normal ---- */
@media(prefers-reduced-motion:reduce){
 .entra{animation:none}.rev{opacity:1;transform:none;transition:none}.rueda .gira{animation:none}
 .enunciado{height:auto;padding:var(--e16) 0}.enunciado .pin{position:static;height:auto}.grande .pal{opacity:1}
 .galeria{height:auto;padding:var(--e12) 0}.galeria .pin{position:static;height:auto;overflow:visible}
 .pista{width:auto;overflow-x:auto;transform:none}
}

/* ---- experiencia, formación, herramientas ---- */
.tiempo{list-style:none;margin:0;padding:0;border-top:1px solid var(--linea)}
.tiempo li{display:grid;gap:var(--e2) var(--e8);padding:var(--e6) 0;border-bottom:1px solid var(--linea)}
@media(min-width:760px){.tiempo li{grid-template-columns:200px 1fr}}
.tiempo .anos{font-family:var(--display);font-style:italic;font-weight:300;font-size:22px;color:var(--texto-suave)}
.tiempo h3{font-size:24px;line-height:30px;letter-spacing:-.01em}
.tiempo p{margin:0;color:var(--texto-suave)} .tiempo .emp{color:var(--texto);font-weight:500;margin:var(--e1) 0 var(--e2)}
.panel .emp{font-weight:500;margin:var(--e1) 0 var(--e2)}
.pildoras{list-style:none;margin:0;padding:0;display:flex;flex-wrap:wrap;gap:var(--e2)}
.pildoras li{padding:var(--e2) var(--e4);border:1px solid var(--linea-control);border-radius:var(--r-pill);font-weight:500}

/* ---- landing: secciones a pantalla completa (bio, experiencia, formación, contacto) ---- */
html{scroll-behavior:smooth}
@media(prefers-reduced-motion:reduce){html{scroll-behavior:auto}}
.solo-lector{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap}
.pantalla>.wrap{width:100%;padding-top:var(--e8);padding-bottom:var(--e8)}
.fondo-suave{background:radial-gradient(ellipse 60% 70% at 85% 10%,color-mix(in srgb,var(--lavanda) 16%,transparent),transparent 70%),radial-gradient(ellipse 55% 60% at 5% 95%,color-mix(in srgb,var(--rosa) 14%,transparent),transparent 70%)}
.nav a[aria-current="true"]{background:var(--lavanda-suave)}
.pantalla h2{font-size:clamp(30px,4.4vw,60px);line-height:1.05;letter-spacing:-.03em}
.pantalla .sobre p{font-size:18px;line-height:28px}

/* experiencia: fijada, las filas se encienden al bajar */
.exp{height:calc(var(--n) * 44vh + 100vh);position:relative;scroll-snap-align:start}
.exp .pin{position:sticky;top:72px;height:calc(100svh - 72px);display:flex;align-items:center}
.exp-grid{display:grid;gap:var(--e8);width:100%}
@media(min-width:860px){.exp-grid{grid-template-columns:minmax(0,.8fr) minmax(0,1.6fr);gap:var(--e12);align-items:center}}
.exp .tiempo li{padding:var(--e4) 0;opacity:var(--o,.18);transition:opacity .3s}
.exp .tiempo h3{font-size:22px;line-height:28px}
.exp .tiempo p:last-child{font-size:15px;line-height:22px}
@media(max-width:859px){.exp{height:auto;padding:var(--e12) 0}.exp .pin{position:static;height:auto}.exp .tiempo li{opacity:1}}
@media(prefers-reduced-motion:reduce){.exp{height:auto;padding:var(--e12) 0}.exp .pin{position:static;height:auto}.exp .tiempo li{opacity:1}}

/* contacto */
.contacto-grid{align-items:center}
.gigante-m{font-size:clamp(36px,5.6vw,80px)!important;line-height:1!important;margin-bottom:var(--e6)}
.contacto-grid .lead{margin:0 0 var(--e8);color:var(--texto-suave);font-size:18px;line-height:28px}
.contacto-grid .campo{margin-bottom:var(--e4)}
.contacto-grid .panel{padding:var(--e6)}

/* enlaces sin subrayado: se distinguen por peso y color al pasar el cursor */
.datos a{text-decoration:none;font-weight:500;transition:color .2s}
.datos a:hover{color:var(--lavanda-fuerte,#6c72c4)}

.ico.fill{fill:currentColor;stroke:none}
/* el retrato se funde hacia abajo con el fondo de la siguiente sección */
.retrato2 img.recorte{-webkit-mask-image:linear-gradient(to bottom,#000 0,#000 68%,transparent 100%);mask-image:linear-gradient(to bottom,#000 0,#000 68%,transparent 100%)}

/* ---- servicios (SEO) ---- */
.serv-cab{max-width:760px;margin-bottom:var(--e8)} .serv-cab .lead{margin:var(--e3) 0 0;color:var(--texto-suave);font-size:18px;line-height:28px}
.serv-grid{display:grid;gap:var(--e4)} @media(min-width:700px){.serv-grid{grid-template-columns:1fr 1fr}} @media(min-width:1100px){.serv-grid{grid-template-columns:repeat(4,1fr)}}
.serv-card{display:flex;flex-direction:column;gap:var(--e3);padding:var(--e6);border:1px solid var(--linea);border-radius:var(--r-lg);background:var(--fondo-elevado);text-decoration:none;transition:transform .35s,border-color .35s}
.serv-card:hover{transform:translateY(-4px);border-color:var(--linea-control)}
.serv-card>.ico{width:28px;height:28px;color:var(--texto)} .serv-card h3{font-size:22px;line-height:28px;margin-top:var(--e4)}
.serv-card p{margin:0;color:var(--texto-suave);font-size:15px;line-height:23px;flex:1} .serv-card .mas{display:inline-flex;align-items:center;gap:var(--e2);font-weight:500;margin-top:var(--e3)} .serv-card .mas .ico{width:18px;height:18px}
.migas{display:flex;flex-wrap:wrap;gap:var(--e2);font-size:14px;color:var(--texto-suave);margin-bottom:var(--e6)} .migas a{text-decoration:none} .migas a:hover{color:var(--texto)}
.h3{font-size:22px;line-height:28px;margin-bottom:var(--e4)}
.check{list-style:none;margin:0;padding:0;display:grid;gap:var(--e3)} .check li{position:relative;padding-left:30px} .check li::before{content:"";position:absolute;left:0;top:8px;width:16px;height:9px;border-left:2px solid var(--texto);border-bottom:2px solid var(--texto);transform:rotate(-45deg) scale(.8)}
.pasos{list-style:none;margin:0;padding:0;display:grid;gap:var(--e4)} @media(min-width:860px){.pasos{grid-template-columns:repeat(4,1fr)}}
.pasos li{padding:var(--e6);border:1px solid var(--linea);border-radius:var(--r-lg)} .pasos .n{font-family:var(--display);font-style:italic;font-weight:300;font-size:28px;color:var(--texto-suave)} .pasos h3{font-size:20px;line-height:26px;margin:var(--e3) 0 var(--e2)} .pasos p{margin:0;color:var(--texto-suave);font-size:15px;line-height:23px}
.faq details{border-bottom:1px solid var(--linea);padding:var(--e4) 0} .faq summary{cursor:pointer;font-weight:500;font-size:18px;list-style:none;display:flex;justify-content:space-between;gap:var(--e4)} .faq summary::-webkit-details-marker{display:none}
.faq summary::after{content:"+";font-size:24px;line-height:1} .faq details[open] summary::after{content:"–"} .faq p{margin:var(--e3) 0 0;color:var(--texto-suave)}
.cta-final{text-align:center;display:grid;gap:var(--e6);justify-items:center} .cta-final .btns{justify-content:center}
.otros-t{margin:var(--e4) 0 0;color:var(--texto-suave);font-size:14px} .otros{list-style:none;margin:0;padding:0;display:flex;flex-wrap:wrap;gap:var(--e2);justify-content:center}
.pie-serv{padding-top:var(--e6)} .pie-serv ul{list-style:none;margin:0;padding:var(--e6) 0 0;border-top:1px solid var(--linea);display:flex;flex-wrap:wrap;gap:var(--e2) var(--e6)} .pie-serv a{text-decoration:none;color:var(--texto-suave);font-size:14px} .pie-serv a:hover{color:var(--texto)}

@media(min-width:1100px){.serv-grid{grid-template-columns:repeat(3,1fr)}.serv-card{padding:var(--e5,20px) var(--e6)}.serv-card h3{margin-top:var(--e2)}}

/* ---- cartas del banner: aparecen una a una al hacer scroll, pegadas a la silueta ---- */
.carta{position:absolute;z-index:2;width:236px;display:grid;grid-template-columns:auto 1fr;gap:0 var(--e3);align-items:center;padding:var(--e3) var(--e4) var(--e3) var(--e3);
 background:color-mix(in srgb,var(--fondo-elevado) 72%,transparent);-webkit-backdrop-filter:blur(14px);backdrop-filter:blur(14px);border:1px solid color-mix(in srgb,var(--linea-control) 55%,transparent);border-radius:18px;
 --a:1;opacity:var(--a);transform:translate(calc((1 - var(--a)) * var(--dx,0px)),calc((1 - var(--a)) * 18px)) scale(calc(.94 + .06 * var(--a)));will-change:transform,opacity}
.carta .vi{grid-row:span 2;width:38px;height:38px;border-radius:11px;display:grid;place-items:center;background:var(--lavanda-suave)}
.carta:nth-of-type(3n+2) .vi{background:var(--nude-suave)} .carta:nth-of-type(3n) .vi{background:var(--rosa-suave)}
.carta b{font-weight:500;line-height:20px;font-size:15px} .carta small{color:var(--texto-suave);font-size:12.5px;line-height:17px}
.carta::after{content:"";position:absolute;top:50%;width:18px;height:1px;background:color-mix(in srgb,var(--texto) 35%,transparent)}
.carta::before{content:"";position:absolute;top:50%;width:7px;height:7px;margin-top:-3px;border-radius:50%;background:var(--acento)}
.carta.izq{right:calc(50% + var(--off));--dx:-56px} .carta.izq::after{right:-19px} .carta.izq::before{right:-27px}
.carta.der{left:calc(50% + var(--off));--dx:56px} .carta.der::after{left:-19px} .carta.der::before{left:-27px}
.carta.f0{top:6%;--off:122px} .carta.f1{top:36%;--off:172px} .carta.f2{top:auto;bottom:5%;--off:208px}
@media(max-width:899px){
 .hero2{height:auto}.hero2-pin{position:relative;top:0;height:calc(100svh - 72px);min-height:560px}
 .escena2{min-height:260px}
 .carta{display:none}
 .rueda{display:none}
}
@media(prefers-reduced-motion:reduce){.hero2{height:auto}.hero2-pin{position:relative;top:0}.carta{--a:1!important;transform:none!important;opacity:1!important}}