/* PAOSBrain · Inteligencia simbiótica (2-nov-2026). Presentación pública en blanco y
   negro, con transiciones cinematográficas y la naturaleza como metáfora (raíces y
   micelio: la simbiosis más antigua). Todo el texto es HTML real: lo leen buscadores
   y motores de IA sin ejecutar JavaScript. */
:root{
  --blanco:#FFFFFF; --hueso:#F6F6F4; --tinta:#0B0B0C; --sub:#55565B; --tenue:#8C8D92;
  --linea:rgba(11,11,12,.12); --tarjeta:rgba(255,255,255,.82);
  --f-titulo:'Outfit','DM Sans',system-ui,-apple-system,sans-serif;
  --f-texto:'DM Sans','Outfit',system-ui,-apple-system,sans-serif;
  --f-mono:'DM Mono',ui-monospace,SFMono-Regular,Menlo,monospace;
  --suave:cubic-bezier(.16,1,.3,1);
  color-scheme:light;
}
*{box-sizing:border-box}
html{scroll-behavior:smooth;-webkit-text-size-adjust:100%}
@media (min-width:900px) and (min-height:620px){html{scroll-snap-type:y proximity}}
body{margin:0;background:var(--blanco);color:var(--tinta);font:17px/1.6 var(--f-texto);-webkit-font-smoothing:antialiased;overflow-x:hidden}
a{color:inherit}
::selection{background:var(--tinta);color:var(--blanco)}
.salto{position:absolute;left:-999px;top:8px;z-index:60;background:var(--tinta);color:var(--blanco);padding:8px 12px;border-radius:8px}
.salto:focus{left:12px}
#fondo{position:fixed;inset:0;width:100%;height:100%;z-index:0;pointer-events:none}

/* Telón de apertura (lo crea app.js; sin JavaScript no existe) */
.telon{position:fixed;inset:0;z-index:100;pointer-events:none;display:grid;place-items:center}
.telon::before,.telon::after{content:"";position:absolute;left:0;right:0;height:50.5%;background:var(--tinta);transition:transform 1.25s var(--suave)}
.telon::before{top:0}.telon::after{bottom:0}
.telon i{position:relative;z-index:1;display:block;width:0;height:1px;background:var(--blanco);transition:width .9s var(--suave),opacity .4s}
.telon.linea i{width:min(60vw,520px)}
.telon.abre::before{transform:translateY(-100%)}
.telon.abre::after{transform:translateY(100%)}
.telon.abre i{opacity:0}

/* Barra superior */
.barra{position:fixed;top:0;left:0;right:0;z-index:30;display:flex;align-items:center;justify-content:space-between;gap:12px;padding:14px max(16px,env(safe-area-inset-right)) 14px max(16px,env(safe-area-inset-left));color:var(--tinta);transition:color .5s}
.barra::before{content:"";position:absolute;inset:0;background:linear-gradient(180deg,rgba(255,255,255,.94),rgba(255,255,255,0));transition:opacity .5s;z-index:-1}
body.sobre-negro .barra{color:var(--blanco)}
body.sobre-negro .barra::before{background:linear-gradient(180deg,rgba(11,11,12,.7),rgba(11,11,12,0))}
.marca{display:inline-flex;align-items:center;gap:10px;text-decoration:none;color:inherit;font:600 1.02rem var(--f-titulo);letter-spacing:.02em;text-transform:uppercase}
.barra-acc{display:flex;gap:8px;align-items:center}
.b-luz,.b-ghost{display:inline-flex;align-items:center;gap:8px;border-radius:999px;padding:11px 20px;font:500 .92rem var(--f-titulo);letter-spacing:.01em;text-decoration:none;cursor:pointer;border:0;transition:transform .35s var(--suave),background .3s,color .3s,box-shadow .3s}
.b-luz{background:var(--tinta);color:var(--blanco)}
.b-luz:hover{transform:translateY(-2px);box-shadow:0 14px 30px -14px rgba(0,0,0,.55)}
.b-ghost{background:transparent;color:inherit;box-shadow:inset 0 0 0 1px currentColor}
.b-ghost:hover{background:var(--tinta);color:var(--blanco);box-shadow:inset 0 0 0 1px var(--tinta)}
body.sobre-negro .barra .b-luz,.negro .b-luz{background:var(--blanco);color:var(--tinta)}
body.sobre-negro .barra .b-ghost:hover,.negro .b-ghost:hover{background:var(--blanco);color:var(--tinta)}
.b-luz:focus-visible,.b-ghost:focus-visible,.puntos button:focus-visible,a:focus-visible{outline:2px solid currentColor;outline-offset:3px}
@media (max-width:560px){.pista .tec{display:none}#modo span{display:none}#modo{padding:9px 10px}.barra .b-luz{padding:9px 14px;font-size:.84rem}.marca{font-size:.92rem}}
.marca,.b-luz,.b-ghost{white-space:nowrap}
html.quieto{scroll-behavior:auto;scroll-snap-type:none}

/* Navegación por capítulos */
.puntos{position:fixed;right:max(16px,env(safe-area-inset-right));top:50%;transform:translateY(-50%);z-index:30;display:flex;flex-direction:column;gap:12px;color:var(--tinta);transition:color .5s}
body.sobre-negro .puntos{color:var(--blanco)}
.puntos button{width:7px;height:7px;border-radius:50%;border:0;padding:0;background:currentColor;opacity:.25;cursor:pointer;position:relative;transition:transform .4s var(--suave),opacity .3s}
.puntos button[aria-current="true"]{opacity:1;transform:scale(1.6)}
.puntos button span{position:absolute;right:18px;top:50%;transform:translateY(-50%);white-space:nowrap;font:500 .72rem var(--f-mono);letter-spacing:.08em;text-transform:uppercase;color:currentColor;opacity:0;pointer-events:none;transition:opacity .2s}
.puntos button:hover span,.puntos button:focus-visible span{opacity:1}
@media (max-width:700px){.puntos{display:none}}
.progreso{position:fixed;left:0;right:0;bottom:0;height:2px;z-index:30;mix-blend-mode:difference}
.progreso i{display:block;height:100%;width:0;background:#fff}

/* Capítulos */
main{position:relative;z-index:1}
.cap{min-height:100vh;min-height:100svh;display:flex;flex-direction:column;justify-content:center;padding:120px 16px 96px;scroll-snap-align:start;position:relative}
.cap::before{content:"";position:absolute;top:0;left:16px;right:16px;max-width:1120px;margin:0 auto;height:1px;background:var(--linea);transform:scaleX(0);transform-origin:left;transition:transform 1.6s var(--suave)}
.cap.en-escena::before{transform:scaleX(1)}
.portada::before,.negro::before{display:none}
.negro{background:var(--tinta);color:var(--blanco);--linea:rgba(255,255,255,.14);--sub:#B4B5BA;--tenue:#7D7E84;--tarjeta:rgba(255,255,255,.04)}
.in{width:100%;max-width:1120px;margin:0 auto}
.in + .in{margin-top:56px}
.dos{display:grid;grid-template-columns:1.1fr .9fr;gap:64px;align-items:center}
@media (max-width:900px){.dos{grid-template-columns:1fr;gap:40px}}
.kicker{font:400 .76rem var(--f-mono);letter-spacing:.2em;text-transform:uppercase;color:var(--sub);margin:0 0 22px}
h1,h2,h3{font-family:var(--f-titulo);margin:0}
h1{font-size:clamp(3.1rem,10.5vw,9rem);line-height:.92;font-weight:300;letter-spacing:-.045em;max-width:9.5ch}
h2{font-size:clamp(2rem,5vw,4rem);line-height:1.04;font-weight:400;letter-spacing:-.035em;max-width:20ch}
h2 em,h1 em{font-style:normal;color:var(--sub)}
h3{font-size:1.14rem;font-weight:500;letter-spacing:-.01em}
.grande{font-size:clamp(3rem,10vw,8.4rem);line-height:.95;font-weight:300;letter-spacing:-.045em;max-width:none}
.lead{font-size:clamp(1.1rem,1.9vw,1.38rem);line-height:1.55;font-weight:400;max-width:46ch;margin:28px 0 0}
.sub{color:var(--sub);max-width:58ch;margin:20px 0 0}
.sub strong{color:var(--tinta);font-weight:500}
.negro .sub strong{color:var(--blanco)}
.acciones{display:flex;flex-wrap:wrap;gap:10px;margin:36px 0 0}
.pista{position:absolute;bottom:34px;left:50%;transform:translateX(-50%);margin:0;font:400 .72rem var(--f-mono);letter-spacing:.14em;text-transform:uppercase;color:var(--tenue);text-align:center;width:calc(100% - 32px)}
.pista::after{content:"";display:block;width:1px;height:38px;margin:14px auto 0;background:linear-gradient(var(--tinta),transparent);animation:baja 2.4s var(--suave) infinite}
@keyframes baja{0%{transform:scaleY(0);transform-origin:top}50%{transform:scaleY(1);transform-origin:top}51%{transform-origin:bottom}100%{transform:scaleY(0);transform-origin:bottom}}

/* Titulares que se revelan palabra a palabra (app.js divide en .w > span) */
.t .w{display:inline-block;overflow:hidden;vertical-align:top;padding:0 .02em .22em;margin:0 -.02em -.22em}
.t .w > span{display:inline-block;transform:translateY(135%);transition:transform 1.15s var(--suave)}
.t.visto .w > span{transform:none}

/* Tarjetas */
.tres{display:grid;grid-template-columns:repeat(3,1fr);gap:1px;margin-top:52px;background:var(--linea);border:1px solid var(--linea)}
@media (max-width:900px){.tres{grid-template-columns:1fr}}
.tres > article{background:var(--blanco);padding:30px 28px}
.negro .tres > article{background:var(--tinta)}
.dato .num{display:block;font:200 clamp(2.8rem,5vw,4rem)/1 var(--f-titulo);letter-spacing:-.05em;margin-bottom:16px}
.tres p,.rejilla p,.sellos p{color:var(--sub);margin:10px 0 0;font-size:.97rem}
.eti{display:block;font:400 .72rem var(--f-mono);letter-spacing:.16em;text-transform:uppercase;color:var(--tenue);margin-bottom:14px}
.naturaleza h3{font-size:1.6rem;font-weight:300;letter-spacing:-.03em}
.principios .n{display:inline-grid;place-items:center;width:30px;height:30px;border-radius:50%;box-shadow:inset 0 0 0 1px var(--tinta);font:400 .85rem var(--f-mono);margin-bottom:18px}
.rejilla{display:grid;grid-template-columns:repeat(2,1fr);gap:1px;margin-top:48px;background:var(--linea);border:1px solid var(--linea)}
@media (max-width:760px){.rejilla{grid-template-columns:1fr}}
.rejilla article{background:var(--blanco);padding:30px 28px}

/* 1960 */
.ano{overflow:hidden}
.ano .gigante{font:200 clamp(7rem,27vw,22rem)/.8 var(--f-titulo);letter-spacing:-.07em;margin:0 0 18px;color:transparent;-webkit-text-stroke:1px rgba(255,255,255,.55);user-select:none;will-change:transform}
.ano cite{font-style:normal;border-bottom:1px solid currentColor}

/* Venn */
.venn{margin:0;color:var(--tinta)}
.venn svg{width:100%;height:auto;overflow:visible}
.vc{transform-box:fill-box;transform-origin:center;transition:transform 1.8s var(--suave)}
.vu{transition:opacity 1.2s .9s}
.venn:not(.visto) .vp{transform:translateX(-60px)}
.venn:not(.visto) .vi{transform:translateX(60px)}
.venn:not(.visto) .vu{opacity:0}
.vt{font:500 19px var(--f-titulo);fill:var(--tinta)}
.vs{font:400 14px var(--f-texto);fill:var(--sub)}
.vm{font:500 17px var(--f-mono);fill:var(--blanco);letter-spacing:.18em}

/* Línea del día */
.linea{list-style:none;margin:56px 0 0;padding:0;display:grid;grid-template-columns:repeat(3,1fr);gap:1px;background:var(--linea);border:1px solid var(--linea)}
@media (max-width:980px){.linea{grid-template-columns:repeat(2,1fr)}}
@media (max-width:620px){.linea{grid-template-columns:1fr}}
.linea li{position:relative;padding:26px;min-height:220px;background:var(--blanco);display:flex;flex-direction:column;gap:14px;overflow:hidden}
.linea li.foto{min-height:300px;color:var(--blanco);background:var(--tinta)}
.linea li.foto::before{content:"";position:absolute;inset:0;background:linear-gradient(180deg,rgba(11,11,12,.05),rgba(11,11,12,.92) 60%),var(--f) center/cover no-repeat;filter:grayscale(1) contrast(1.08);transform:scale(1.1);transition:transform 2.6s var(--suave)}
.linea li.foto.visto::before{transform:scale(1)}
.linea li.foto > *{position:relative}
.linea time{font:400 .8rem var(--f-mono);letter-spacing:.14em;color:var(--tenue)}
.linea li.foto time{color:rgba(255,255,255,.8)}
.linea li.foto div{margin-top:auto}
.linea p{color:var(--sub);margin:8px 0 0;font-size:.96rem}
.linea li.foto p{color:rgba(255,255,255,.82)}

/* Ondas (voz) */
.ondas{display:flex;align-items:center;justify-content:center;gap:8px;height:260px}
.ondas span{display:block;width:3px;border-radius:3px;background:var(--blanco);height:30%;animation:onda 1.8s ease-in-out infinite}
.ondas span:nth-child(2n){animation-delay:-.4s}.ondas span:nth-child(3n){animation-delay:-.9s}.ondas span:nth-child(5n){animation-delay:-1.2s}.ondas span:nth-child(7n){animation-delay:-.2s}
@keyframes onda{0%,100%{height:14%}50%{height:90%}}

/* Fondo con foto (blanco y negro) */
.fondo-foto{overflow:hidden}
.fondo-foto::after{content:"";position:absolute;inset:0;z-index:-1;background:linear-gradient(90deg,rgba(255,255,255,.98) 42%,rgba(255,255,255,.84) 66%,rgba(255,255,255,.55)),var(--f) center/cover no-repeat;filter:grayscale(1)}
@media (max-width:760px){.fondo-foto::after{background:linear-gradient(180deg,rgba(255,255,255,.9),rgba(255,255,255,.97)),var(--f) center/cover no-repeat}}

/* Cifras */
.cifras{display:grid;grid-template-columns:repeat(4,1fr);gap:24px;margin-top:52px}
@media (max-width:900px){.cifras{grid-template-columns:repeat(2,1fr)}}
@media (max-width:420px){.cifras{grid-template-columns:1fr}}
.cifras div{border-top:1px solid var(--tinta);padding-top:20px}
.cifra{display:block;font:200 clamp(2.4rem,4.8vw,3.8rem)/1 var(--f-titulo);letter-spacing:-.05em;font-variant-numeric:tabular-nums}
.cifras p{color:var(--sub);margin:12px 0 0;font-size:.95rem}
.nota{font:400 .76rem var(--f-mono);letter-spacing:.06em;color:var(--tenue);margin-top:28px}

/* Sellos */
.sellos{list-style:none;padding:0;margin:52px 0 0;display:grid;grid-template-columns:repeat(5,1fr);gap:1px;background:var(--linea);border:1px solid var(--linea)}
@media (max-width:1050px){.sellos{grid-template-columns:repeat(2,1fr)}}
@media (max-width:560px){.sellos{grid-template-columns:1fr}}
.sellos li{background:var(--blanco);padding:26px 24px}
.sellos h3{font-size:1.02rem}

/* Manifiesto */
.manifiesto .m{font:300 clamp(1.45rem,3.4vw,2.7rem)/1.22 var(--f-titulo);letter-spacing:-.03em;margin:0 0 26px;max-width:30ch}
.manifiesto .m.fuerte{font-weight:400}

/* Cierre */
.cierre{text-align:center}
.cierre .in{display:flex;flex-direction:column;align-items:center}
.cierre .lead{margin-left:auto;margin-right:auto}
.cierre .acciones{justify-content:center}
.enlaces{display:flex;flex-wrap:wrap;justify-content:center;gap:8px 24px;margin-top:44px}
.enlaces a{color:var(--sub);text-decoration:none;font-size:.92rem;border-bottom:1px solid transparent;transition:color .3s,border-color .3s}
.enlaces a:hover{color:var(--tinta);border-bottom-color:var(--tinta)}
.pie{color:var(--tenue);font:400 .74rem var(--f-mono);letter-spacing:.04em;margin-top:48px}

/* Aparición cinematográfica: sube, se enfoca y aparece */
.js .r{transition:opacity 1.2s var(--suave),transform 1.2s var(--suave),filter 1.2s var(--suave)}
.js .r:not(.visto){opacity:0;transform:translateY(34px);filter:blur(10px)}
.js .r.visto{opacity:1;transform:none;filter:none}

/* Modo presentación */
body.modo .barra .b-luz{display:none}

@media (prefers-reduced-motion:reduce){
  html{scroll-behavior:auto}
  .js .r:not(.visto){opacity:1;transform:none;filter:none;transition:none}
  .t .w > span{transform:none;transition:none}
  .ondas span,.pista::after{animation:none}
  .vc,.vu{transition:none}.venn:not(.visto) .vp,.venn:not(.visto) .vi{transform:none}.venn:not(.visto) .vu{opacity:1}
  .cap::before{transform:none;transition:none}
  .telon{display:none}
}

/* ---- Accesos claros (Kevin, 2-nov): Acceder, Descargar el programa y Extensión de Chrome ---- */
.b-luz svg,.b-ghost svg{flex:none}
@media (max-width:860px){.barra .solo-ancho{display:none}}
.tres-accesos{display:flex;flex-wrap:wrap;gap:10px;margin:36px 0 0}
.tres-accesos .b-luz,.tres-accesos .b-ghost{padding:13px 22px;font-size:.98rem}
.ver-mas{margin:22px 0 0}
.ver-mas a{display:inline-flex;align-items:center;gap:8px;font:400 .76rem var(--f-mono);letter-spacing:.16em;text-transform:uppercase;color:var(--sub);text-decoration:none;border-bottom:1px solid transparent;transition:color .3s,border-color .3s}
.ver-mas a:hover{color:var(--tinta);border-bottom-color:var(--tinta)}
@media (max-width:560px){.tres-accesos a{flex:1 1 100%;justify-content:center}}

.empieza{display:grid;grid-template-columns:repeat(3,1fr);gap:1px;width:100%;margin:48px 0 8px;background:var(--linea);border:1px solid var(--linea);text-align:left}
@media (max-width:860px){.empieza{grid-template-columns:1fr}}
.acceso{position:relative;display:flex;flex-direction:column;gap:10px;min-height:230px;padding:30px 28px;background:var(--blanco);color:var(--tinta);text-decoration:none;overflow:hidden;isolation:isolate}
.acceso::before{content:"";position:absolute;inset:0;z-index:-1;background:var(--tinta);transform:scaleY(0);transform-origin:bottom;transition:transform .7s var(--suave)}
.acceso:hover::before,.acceso:focus-visible::before{transform:scaleY(1)}
.acceso:hover,.acceso:focus-visible{color:var(--blanco)}
.acceso h3{font:300 1.9rem/1.05 var(--f-titulo);letter-spacing:-.035em}
.acceso p{margin:0;color:inherit;opacity:.7;max-width:34ch}
.acceso .eti{display:block;font:400 .72rem var(--f-mono);letter-spacing:.16em;text-transform:uppercase;opacity:.6}
.acceso .flecha{margin-top:auto;display:inline-grid;place-items:center;width:44px;height:44px;border-radius:50%;box-shadow:inset 0 0 0 1px currentColor;transition:transform .5s var(--suave)}
.acceso:hover .flecha{transform:translateY(-4px) rotate(-8deg)}
.acceso.oscuro{background:var(--tinta);color:var(--blanco)}
.acceso.oscuro::before{background:var(--blanco)}
.acceso.oscuro:hover,.acceso.oscuro:focus-visible{color:var(--tinta)}

/* ---- Más cine ---- */
/* la portada se aleja, se desenfoca y se apaga al bajar (app.js pone --salida de 0 a 1) */
.portada .in{transform:scale(calc(1 - var(--salida,0) * .06)) translateY(calc(var(--salida,0) * -40px));opacity:calc(1 - var(--salida,0) * .9);filter:blur(calc(var(--salida,0) * 6px));will-change:transform,opacity}
/* las fotos se descubren como un telón que sube */
.js .linea li.foto{transition:clip-path 1.5s var(--suave),opacity 1.2s var(--suave),transform 1.2s var(--suave),filter 1.2s var(--suave)}
.js .linea li.foto:not(.visto){clip-path:inset(100% 0 0 0)}
.js .linea li.foto.visto{clip-path:inset(0 0 0 0)}
/* botones magnéticos (solo con ratón) */
.iman{transition:transform .35s var(--suave),background .3s,color .3s,box-shadow .3s}
@media (prefers-reduced-motion:reduce){
  .portada .in{transform:none;opacity:1;filter:none}
  .js .linea li.foto:not(.visto){clip-path:none}
  .acceso::before{transition:none}
}

/* ======================= Escenas cinematográficas (2-nov, «que la gente diga wow») ======================= */
/* Grano de película */
.grano{position:fixed;inset:-50%;z-index:90;pointer-events:none;opacity:.07;mix-blend-mode:multiply;
  background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='160' height='160'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.9' numOctaves='2' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E");
  animation:grano 1s steps(6) infinite}
@keyframes grano{0%{transform:translate(0,0)}20%{transform:translate(-4%,3%)}40%{transform:translate(3%,-2%)}60%{transform:translate(-2%,-4%)}80%{transform:translate(4%,2%)}100%{transform:translate(0,0)}}
/* Cursor que acompaña (solo con ratón; se invierte sobre negro) */
.cursor{position:fixed;left:0;top:0;z-index:150;pointer-events:none;mix-blend-mode:difference;display:none}
.cursor i{position:absolute;width:38px;height:38px;margin:-19px 0 0 -19px;border-radius:50%;border:1px solid #fff;transition:width .35s var(--suave),height .35s var(--suave),margin .35s var(--suave),background .35s}
.cursor::after{content:"";position:absolute;width:6px;height:6px;margin:-3px 0 0 -3px;border-radius:50%;background:#fff}
html.con-cursor .cursor{display:block}
.cursor.sobre i{width:72px;height:72px;margin:-36px 0 0 -36px;background:#fff}

/* Portada: partículas que forman «Persona» e «IA» y se funden */
.portada{overflow:hidden}
.particulas{position:absolute;inset:0;width:100%;height:100%;z-index:0}
.portada .in{position:relative;z-index:1}
.rotulo{position:absolute;z-index:1;margin:0;font:400 .72rem var(--f-mono);letter-spacing:.22em;text-transform:uppercase;color:var(--sub);opacity:0;transition:opacity 1s var(--suave);pointer-events:none}
.rotulo.ver{opacity:1}
body.intro .portada .in .t .w>span{transform:translateY(135%)}
body.intro .portada .in .t{visibility:hidden}
body.intro .portada .in .r{opacity:0;transform:translateY(34px);filter:blur(10px)}
body.intro .puntos{opacity:0}
.barra,.puntos{transition:opacity 1.2s var(--suave),color .5s}

/* Naturaleza: raíces blancas que crecen al llegar */
.naturaleza-cap{overflow:hidden}
.raices{position:absolute;inset:0;width:100%;height:100%;z-index:0;opacity:.55}
.naturaleza-cap .in{position:relative;z-index:1}
.naturaleza-cap .tres > article{background:rgba(11,11,12,.82);backdrop-filter:blur(3px);-webkit-backdrop-filter:blur(3px)}

/* Juntos: la palabra deja ver el vídeo y, al bajar, se atraviesa */
.juntos{padding:0;height:280vh;display:block;background:var(--tinta)}
.juntos::before{display:none}
.juntos .fijo{position:sticky;top:0;height:100vh;height:100svh;overflow:hidden;background:var(--tinta)}
.juntos-video{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;filter:grayscale(1) contrast(1.12) brightness(.95)}
.juntos-mascara{position:absolute;inset:0;display:grid;place-items:center;background:#0B0B0C;color:#fff;mix-blend-mode:multiply;transform:scale(var(--z,1));transform-origin:var(--ox,50%) 50%;opacity:var(--m,1);will-change:transform}
.juntos-mascara span{font:800 clamp(5rem,23vw,24rem)/.8 var(--f-titulo);letter-spacing:-.06em}
.juntos-texto{position:absolute;left:0;right:0;bottom:0;padding:120px max(16px,6vw) 72px;color:#fff;background:linear-gradient(180deg,transparent,rgba(11,11,12,.85));opacity:var(--t,0);transform:translateY(calc((1 - var(--t,0)) * 30px))}
.juntos-texto .kicker{color:rgba(255,255,255,.7)}
.juntos-texto h2{max-width:22ch}

/* Un día: travelling horizontal en pantallas anchas */
@media (min-width:900px){
  .dia.travelling{padding:0;display:block}
  .dia.travelling::before{display:none}
  .dia.travelling .fijo{position:sticky;top:0;height:100vh;overflow:hidden;display:flex;align-items:center}
  .dia.travelling .in{max-width:none;padding:0 0 0 max(16px,7vw)}
  .dia.travelling .linea{display:flex;width:max-content;gap:20px;background:none;border:0;margin-top:44px;transform:translateX(var(--x,0));will-change:transform}
  .dia.travelling .linea li{width:min(30vw,440px);min-height:46vh;border:1px solid var(--linea)}
  .dia.travelling .linea li.foto{width:min(40vw,580px)}
}

@media (prefers-reduced-motion:reduce){
  .grano{animation:none}
  body.intro .portada .in .r{opacity:1;transform:none;filter:none}
  body.intro .portada .in .t .w>span{transform:none}
  .juntos{height:auto}.juntos .fijo{position:relative;height:80vh}
  .juntos-mascara{transform:none}
}