/* ==========================================================================
   Base: reset, escenario, artboard, tipografía y piezas de texto partido
   ========================================================================== */
*{box-sizing:border-box}
html,body{background:var(--c-margen);margin:0}
html.lenis,html.lenis body{height:auto}
.lenis.lenis-smooth{scroll-behavior:auto!important}
body{color:var(--c-ink);font-family:var(--f-ui);-webkit-font-smoothing:antialiased}
img{display:block;max-width:none}

/* escenario: la home ocupa toda la ventana; aparece cuando fuentes e imágenes están listas */
/* tc-espera lo pone un script del <head>: sin JS la home no se oculta; con JS, se oculta hasta 'listo' (o 8 s como mucho) */
main{width:var(--W);margin:0 auto;position:relative;background:var(--c-invert);overflow:clip;transition:opacity var(--t-media) var(--e-expo)}
html.tc-espera main{opacity:0}
html.listo main{opacity:1}

/* artboard de Figma (1440 × 900) escalado al escenario. Las posiciones inline left/top son las de Figma */
.ab{position:absolute;left:0;top:0;width:var(--AW);height:var(--AH);transform-origin:0 0;transform:translate(var(--ox),var(--oy)) scale(var(--k))}
/* a sangre desde dentro del artboard: una capa que, viviendo en .ab, cubre todo el escenario (en px de artboard) */
.sangre,.capa-brocha,.ph,.g07{position:absolute;left:calc(var(--ox)/var(--k)*-1);top:calc(var(--oy)/var(--k)*-1);width:calc(var(--W)/var(--k));height:calc(var(--S)/var(--k))}
.abs{position:absolute;margin:0}
.fill{position:absolute;inset:0;width:100%;height:100%;object-fit:cover}
.center{text-align:center}
.nw{white-space:nowrap}

/* estructura de una sección fija: .pin (sticky, una pantalla) > .pin-in (lo que se mueve) + .velo (oscurece al quedar debajo) */
.pin{position:sticky;top:0;height:var(--S)}
.pin-in{position:absolute;inset:0;will-change:transform}
.velo{position:absolute;inset:0;background:var(--c-invert-fuerte);opacity:0;pointer-events:none}
/* fondo propio de un panel, separado del contenido para el parallax con desventaja */
/* sobresale --borde px por arriba: esa franja es la que recorta el borde roto (TC.borde) */
.pbg{position:absolute;left:0;right:0;top:calc(var(--borde)*var(--k)*-1);height:calc(var(--S) + 2px + var(--borde)*var(--k));background-color:var(--c-papel);will-change:transform}
.pbg--oscuro{background-color:var(--c-invert)}

/* ---- escala tipográfica v4 (nombres de estilo de Figma) ---- */
.dxxl{font:600 104px/.9 var(--f-display);letter-spacing:-.02em}   /* Display/XXL */
.dxl{font:600 60px/.92 var(--f-display);letter-spacing:-.02em}    /* Display/XL */
.cifra{font:600 210px/.86 var(--f-display);letter-spacing:-.025em;font-variant-numeric:tabular-nums}  /* Display/Cifra */
.tl{font:700 46px/.96 var(--f-display);letter-spacing:-.015em}    /* Titular/L */
.tm{font:700 30px/1 var(--f-display);letter-spacing:-.01em}       /* Titular/M */
.ts{font:700 21px/1.1 var(--f-display);letter-spacing:-.005em}    /* Titular/S */
.cl{font:400 20px/1.5 var(--f-ui)}                                /* Cuerpo/L */
.cm{font:400 16px/1.6 var(--f-ui)}                                /* Cuerpo/M */
.cs{font:400 14px/1.55 var(--f-ui)}                               /* Cuerpo/S */
.ets{font:500 14px/1.3 var(--f-ui)}                               /* UI/Etiqueta S */
.btn{font:500 14px/1.2 var(--f-ui)}                               /* UI/Botón */
.cap{display:flex;align-items:baseline;gap:12px}

/* ---- texto partido (lo genera TC.split): línea enmascarada > línea > palabra ---- */
.line{display:block;overflow:hidden;padding:.08em 0;margin:-.08em 0}   /* el margen protege tildes y descendentes */
.li{display:block}
.wd{display:inline-block}                                               /* palabra de un párrafo de lectura (TC.text.palabras) */

/* ---- grano: losas generadas en TC.grano(), pegadas a los fondos y quietas ---- */
.grano-oscuro{background-image:var(--granoD),var(--luz-oscuro);background-blend-mode:screen,screen;background-size:256px 256px,100% 100%;background-repeat:repeat,no-repeat}
.grano-papel{background-image:var(--granoL);background-blend-mode:multiply;background-size:256px 256px}
.grano-foto::after{content:'';position:absolute;inset:0;background-image:var(--granoN);background-size:256px 256px;mix-blend-mode:overlay;pointer-events:none;z-index:3}