/* Eternal Studio · eternal-studio.es · 2026-09
   Dos salas: «Lo que se ve» (blanca fría) y «Lo que trabaja» (negra).
   Formas: botones en píldora, medios a 14px, tarjetas a 18px. */

@font-face{font-family:"Archivo";src:url("../fonts/archivo-var-latin.woff2") format("woff2");
  font-weight:100 900;font-stretch:62% 125%;font-display:swap;
  unicode-range:U+0000-00FF,U+0131,U+0152-0153,U+02BB-02BC,U+02C6,U+02DA,U+02DC,U+0304,U+0308,U+0329,U+2000-206F,U+20AC,U+2122,U+2191,U+2193,U+2212,U+2215,U+FEFF,U+FFFD}
@font-face{font-family:"Archivo";src:url("../fonts/archivo-var-latin-ext.woff2") format("woff2");
  font-weight:100 900;font-stretch:62% 125%;font-display:swap;
  unicode-range:U+0100-02BA,U+02BD-02C5,U+02C7-02CC,U+02CE-02D7,U+02DD-02FF,U+1E00-1E9F,U+1EF2-1EFF,U+2020,U+20A0-20AB,U+20AD-20C0,U+2113,U+2C60-2C7F,U+A720-A7FF}
@font-face{font-family:"JetBrains Mono";src:url("../fonts/jetbrains-mono-latin.woff2") format("woff2");
  font-weight:100 800;font-display:swap}

:root{
  --claro:#E4E7EB; --claro-2:#D7DBE0; --tinta:#121418; --tinta-2:#4A5059;
  --oscuro:#08090B; --oscuro-2:#14161B; --hueso:#E9EBEE; --hueso-2:#A0A6AF;
  --oro:#C9A24B;
  --fondo:var(--claro); --fondo-2:var(--claro-2); --texto:var(--tinta); --texto-2:var(--tinta-2);
  --linea:rgba(11,12,15,.16);
  --letra:"Archivo",system-ui,-apple-system,"Segoe UI",Roboto,Arial,sans-serif;
  --mono:"JetBrains Mono",ui-monospace,Consolas,monospace;
  --margen:clamp(1.25rem,5.5vw,6rem);
  --curva:cubic-bezier(.16,1,.3,1);
  --nav:64px;
  color-scheme:light;
}
html.apagada{
  --fondo:var(--oscuro); --fondo-2:var(--oscuro-2); --texto:var(--hueso); --texto-2:var(--hueso-2);
  --linea:rgba(233,235,238,.16); color-scheme:dark;
}
/* Sin motor (movimiento reducido o sin JavaScript): cada sala pinta su fondo */
html:not(.motor) .oscuro{
  --fondo:var(--oscuro); --fondo-2:var(--oscuro-2); --texto:var(--hueso); --texto-2:var(--hueso-2);
  --linea:rgba(233,235,238,.16);
  background:var(--fondo); color:var(--texto);
}

*,*::before,*::after{box-sizing:border-box}
html{scroll-padding-top:var(--nav);-webkit-text-size-adjust:100%}
body{margin:0;background:var(--fondo);color:var(--texto);font-family:var(--letra);
  font-size:1.0625rem;line-height:1.6;overflow-x:clip;-webkit-font-smoothing:antialiased;text-rendering:optimizeLegibility}
img,video{max-width:100%;display:block}
a{color:inherit}
:focus-visible{outline:2px solid var(--texto);outline-offset:3px;border-radius:4px}
html.sobre-foto :focus-visible{outline-color:#fff}
.oculto{position:absolute!important;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap}
.salto{position:fixed;left:1rem;top:-4rem;z-index:40;padding:.7rem 1rem;border-radius:999px;background:var(--texto);color:var(--fondo);text-decoration:none;font-weight:600}
.salto:focus{top:1rem}

/* El apagón: dos parpadeos, por debajo del umbral de destellos */
html.parpadeo body{animation:parpadeo .6s steps(1,end)}
@keyframes parpadeo{0%{background-color:var(--oscuro)}14%{background-color:var(--claro)}28%{background-color:var(--oscuro)}}

/* ───────── Navegación ───────── */
.nav{position:fixed;inset:0 0 auto;height:var(--nav);z-index:20;display:flex;align-items:center;gap:2rem;
  padding-inline:var(--margen);color:var(--texto);transition:color .3s}
.nav::before{content:"";position:absolute;inset:0;z-index:-1;
  background:color-mix(in srgb,var(--fondo) 82%,transparent);-webkit-backdrop-filter:blur(12px);backdrop-filter:blur(12px);
  border-bottom:1px solid var(--linea);transition:opacity .3s}
html.sobre-foto .nav{color:#fff}
html.sobre-foto .nav::before{opacity:0}
.marca{font-weight:600;font-stretch:120%;font-size:.76rem;letter-spacing:.3em;text-transform:uppercase;text-decoration:none;white-space:nowrap}
.nav-enlaces{display:flex;gap:1.75rem;margin-left:auto;list-style:none;padding:0}
.nav-enlaces a{text-decoration:none;font-size:.92rem;font-weight:500;padding:.4rem 0}
.nav-enlaces a:hover{text-decoration:underline;text-underline-offset:.3em}
@media (max-width:899px){.nav{gap:1rem}.nav>nav{display:none}.nav .boton{margin-left:auto}.marca{letter-spacing:.22em}}

/* ───────── Botones y enlaces ───────── */
.boton{display:inline-flex;align-items:center;justify-content:center;gap:.6em;min-height:48px;padding:.8em 1.4em;
  border-radius:999px;border:0;font:600 1rem/1.1 var(--letra);font-stretch:106%;text-decoration:none;white-space:nowrap;
  background:var(--texto);color:var(--fondo);cursor:pointer;
  transition:transform .14s var(--curva),background-color .18s,color .18s}
.boton:hover{transform:translateY(-1px)}
.boton:active{transform:scale(.98)}
.boton svg{width:1.2em;height:1.2em;flex:none;fill:currentColor}
.boton-nav{min-height:44px;padding:.55em 1.05em;font-size:.9rem}
.boton-foto,html.sobre-foto .boton-nav{background:#fff;color:#0B0C0F}
.enlace{display:inline-flex;align-items:center;gap:.45em;min-height:44px;font-weight:600;text-decoration:underline;text-underline-offset:.3em;text-decoration-thickness:1px}
.enlace::after{content:"→";text-decoration:none;display:inline-block;transition:transform .18s var(--curva)}
.enlace:hover::after{transform:translateX(3px)}

/* ───────── Portada ───────── */
.portada{position:relative;color:#fff;background:#0B0C0F}
.portada-foto{position:absolute;inset:0;margin:0;overflow:hidden}
.portada-foto img{width:100%;height:100%;object-fit:cover;object-position:44% 38%}
@media (max-width:899px){.portada-foto img{object-position:50% 30%}}
.portada-fija{position:relative;min-height:100svh;display:flex;align-items:flex-end;
  padding:calc(var(--nav) + 2rem) var(--margen) clamp(2.2rem,8svh,5.5rem)}
.portada-fija::before{content:"";position:absolute;inset:0;pointer-events:none;opacity:var(--ver,1);
  background:linear-gradient(to top,rgba(4,5,7,.84),rgba(4,5,7,.42) 40%,rgba(4,5,7,0) 68%),
             linear-gradient(to right,rgba(4,5,7,.5),rgba(4,5,7,0) 58%)}
.portada-texto{position:relative;max-width:64rem;opacity:var(--ver,1);transform:translateY(calc((1 - var(--ver,1)) * -5svh))}
.portada h1{margin:0;font-weight:760;font-stretch:114%;font-size:clamp(2.45rem,5.4vw,5.5rem);line-height:.98;letter-spacing:-.028em}
.portada h1 span{display:block}
.portada-sub{margin:1.1rem 0 1.7rem;max-width:33rem;font-size:clamp(1.05rem,1.35vw,1.25rem);line-height:1.5;color:rgba(255,255,255,.88)}
html.motor .portada{height:calc(100svh + 95svh);background:transparent}
html.motor .portada-fija{position:sticky;top:0;height:100svh}
@media (max-width:899px){html.motor .portada{height:calc(100svh + 80svh)}}

/* ───────── Bloques de texto ───────── */
.sector,.cierre{position:relative}
.bloque{position:relative;display:flex;align-items:center;padding:clamp(4rem,12vh,8rem) var(--margen)}
.bloque-caja{max-width:38rem}
.titulo-sector{margin:0 0 1.3rem;font-weight:840;font-stretch:125%;font-size:clamp(3rem,7.6vw,8rem);line-height:.88;letter-spacing:-.04em}
.titulo-sector span{display:block}
.titulo{margin:0 0 1rem;font-weight:720;font-stretch:108%;font-size:clamp(1.9rem,3.3vw,3.2rem);line-height:1.02;letter-spacing:-.022em;text-wrap:balance}
.entrada{margin:0 0 1.4rem;max-width:36rem;font-size:clamp(1.08rem,1.45vw,1.28rem);line-height:1.52;color:var(--texto-2)}
.bloque-caja p{margin-top:0}
.chips{list-style:none;margin:0;padding:0;display:flex;flex-wrap:wrap;gap:.5rem}
.chips li{padding:.42em .9em;border:1px solid var(--linea);border-radius:999px;font-size:.93rem;line-height:1.3}
.ejemplos{list-style:none;padding:0;margin:0 0 1.2rem;display:grid;gap:.65rem}
.ejemplos li{position:relative;padding-left:1.15rem}
.ejemplos li::before{content:"";position:absolute;left:0;top:.66em;width:.42rem;height:.42rem;border-radius:50%;background:var(--oro)}
.planes{list-style:none;margin:0 0 1rem;padding:0;border-top:1px solid var(--linea)}
.plan{display:grid;grid-template-columns:1fr auto;column-gap:1rem;align-items:center;padding:.95rem 0;border-bottom:1px solid var(--linea)}
.plan b{font-weight:700;font-stretch:108%;font-size:1.12rem}
.plan span{grid-column:1;color:var(--texto-2);font-size:.95rem;line-height:1.4}
.plan .precio{grid-column:2;grid-row:1 / span 2;font-weight:800;font-stretch:112%;font-size:clamp(1.6rem,2.5vw,2.25rem);letter-spacing:-.02em;white-space:nowrap}
.plan .precio small{font-size:.44em;font-weight:500;letter-spacing:0;color:var(--texto-2);margin-left:.15em}
.nota{margin:0 0 .6rem;font-size:.97rem;color:var(--texto-2)}

@media (min-width:900px){
  html.motor .bloque{min-height:100svh}
  html.motor .sector-a .bloque-caja{max-width:min(40rem,48vw)}
  html.motor .sector-b .bloque-caja{margin-left:48vw;max-width:min(38rem,42vw)}
  html.motor .cierre .bloque-caja{max-width:min(38rem,46vw)}
}
@media (max-width:899px){
  html.motor .bloque{min-height:100svh;align-items:flex-end;padding:0 .9rem 1rem}
  html.motor .bloque-caja{width:100%;padding:1.2rem 1.15rem 1.3rem;border-radius:18px;background:var(--fondo);
    box-shadow:0 0 0 1px var(--linea),0 24px 48px -24px rgba(0,0,0,.45)}
  html.motor .titulo-sector{font-size:clamp(2.6rem,12vw,3.6rem);margin-bottom:.8rem}
  html.motor .titulo{font-size:clamp(1.6rem,7vw,2.1rem)}
  html.motor .entrada{font-size:1.02rem;margin-bottom:1rem}
  html.motor .chips li{font-size:.86rem}
  html.motor .plan{padding:.6rem 0}
  html.motor .plan .precio{font-size:1.5rem}
  html.motor .plan span{font-size:.88rem}
}

/* ───────── Piezas: el carril ───────── */
.piezas{position:relative}
.piezas-fija{padding-block:clamp(4rem,10vh,7rem)}
.piezas-cab{padding-inline:var(--margen);margin-bottom:clamp(1rem,3vh,2rem);display:flex;align-items:baseline;justify-content:space-between;gap:1rem;flex-wrap:wrap}
.piezas-cab .titulo{margin:0}
.piezas-cab p{margin:0;color:var(--texto-2);max-width:26rem}
.piezas-pista{display:flex;gap:clamp(1rem,2.2vw,2.4rem);padding-inline:var(--margen);overflow-x:auto;scroll-snap-type:x mandatory;scrollbar-width:thin}
.pieza{flex:none;margin:0;scroll-snap-align:start;position:relative}
.pieza-media{height:clamp(15rem,56svh,40rem);aspect-ratio:var(--ar);border-radius:14px;overflow:hidden;background:var(--fondo-2);position:relative}
.pieza-media img,.pieza-media video{width:100%;height:100%;object-fit:cover}
.pieza figcaption{margin-top:.7rem;display:flex;flex-wrap:wrap;align-items:center;gap:.35rem .6rem;font-size:.95rem;line-height:1.35}
.etiqueta{font-family:var(--mono);font-size:.72rem;letter-spacing:.02em;padding:.25em .6em;border:1px solid var(--linea);border-radius:999px;color:var(--texto-2);white-space:nowrap}
.pausa{position:absolute;right:.6rem;bottom:.6rem;width:44px;height:44px;border-radius:50%;border:0;display:grid;place-items:center;
  background:rgba(8,9,11,.62);color:#fff;cursor:pointer;-webkit-backdrop-filter:blur(6px);backdrop-filter:blur(6px)}
.pausa svg{width:16px;height:16px;fill:currentColor}
.pausa[aria-pressed="true"] .i-pausa,.pausa[aria-pressed="false"] .i-play{display:none}
html.motor .piezas-fija{position:sticky;top:0;height:100svh;overflow:hidden;display:flex;flex-direction:column;justify-content:center;padding-block:calc(var(--nav) + 1rem) 1.5rem}
html.motor .piezas-pista{overflow:visible;scroll-snap-type:none}
@media (max-width:899px){.pieza-media{height:clamp(14rem,50svh,30rem)}}

/* ───────── El cambio de sala ───────── */
.cambio{position:relative}
.cambio-fija{min-height:70svh;display:flex;flex-direction:column;justify-content:space-between;gap:2rem;padding:calc(var(--nav) + 3svh) var(--margen) 7svh}
.cambio h2{margin:0;font-weight:880;font-size:clamp(3.6rem,10.5vw,11.5rem);line-height:.84;letter-spacing:-.035em;font-stretch:125%;transition:font-stretch .9s var(--curva)}
.cambio h2 span{display:block}
.cambio-pre{display:block;font-family:var(--mono);font-size:.8rem;letter-spacing:.08em;text-transform:uppercase;color:var(--texto-2);margin-bottom:1rem;font-weight:500}
.cambio p{margin:0;max-width:26rem;font-size:clamp(1.05rem,1.4vw,1.25rem);color:var(--texto-2)}
html.apagada .cambio h2,html:not(.motor) .cambio h2{font-stretch:62%}
html.motor .cambio{height:220svh}
html.motor .cambio-fija{position:sticky;top:0;height:100svh}

/* ───────── Cierre y pie ───────── */
.titulo-cierre{margin:0 0 1rem;font-weight:780;font-stretch:100%;font-size:clamp(2.4rem,5.2vw,5.2rem);line-height:.96;letter-spacing:-.03em;text-wrap:balance}
.pie{position:relative;z-index:2;background:var(--fondo);color:var(--texto);border-top:1px solid var(--linea);
  padding:clamp(3rem,8vh,5rem) var(--margen) 2.2rem;display:grid;gap:2.2rem;grid-template-columns:1.2fr 1fr 1fr}
.pie p{margin:.6rem 0 0;color:var(--texto-2);font-size:.95rem;max-width:22rem}
.pie h2{margin:0 0 .7rem;font-family:var(--mono);font-size:.75rem;font-weight:500;letter-spacing:.08em;text-transform:uppercase;color:var(--texto-2)}
.pie ul{list-style:none;margin:0;padding:0;display:grid;gap:.15rem}
.pie ul a{display:inline-block;padding:.3rem 0;text-decoration:none}
.pie ul a:hover{text-decoration:underline;text-underline-offset:.3em}
.pie-legal{grid-column:1 / -1;display:flex;flex-wrap:wrap;justify-content:space-between;gap:.6rem 2rem;padding-top:1.4rem;border-top:1px solid var(--linea);font-size:.86rem;color:var(--texto-2)}
@media (max-width:899px){.pie{grid-template-columns:1fr 1fr}.pie>div:first-child{grid-column:1 / -1}}

/* ───────── El móvil ───────── */
.movil-escena{display:none}
html.motor .movil-escena{display:block;position:fixed;inset:0;z-index:1;pointer-events:none;overflow:hidden;perspective:2200px}
main{position:relative;z-index:2}
.movil{position:absolute;inset:0;transform-style:preserve-3d;--sx:1;--sy:1;--marco:0;
  --cw:calc(var(--w) / 2 + var(--b));--ch:calc(var(--h) / 2 + var(--b));--cr:calc(var(--r) + var(--b));--zt:calc(var(--d) * -1.05);
  --is:calc(var(--cw) * .92);--ir:calc(var(--is) * .26);--ib:calc(var(--w) * .024);
  --ix:calc(var(--cw) * .89 - var(--is) / 2);--iy:calc(var(--cw) * .11 + var(--is) / 2 - var(--ch))}
.movil.animando{will-change:transform}
.m-rect,.m-lamina,.m-trasera,.m-marco{position:absolute;left:50%;top:50%}
.m-rect{width:var(--w);height:var(--h);margin:calc(var(--h) / -2) 0 0 calc(var(--w) / -2);border-radius:var(--r)}
.m-lamina,.m-trasera,.m-marco{width:calc(var(--w) + 2 * var(--b));height:calc(var(--h) + 2 * var(--b));
  margin:calc((var(--h) + 2 * var(--b)) / -2) 0 0 calc((var(--w) + 2 * var(--b)) / -2);border-radius:calc(var(--r) + var(--b))}
.m-lamina{background:#1a1a1d;opacity:var(--marco);transform:translateZ(calc(var(--d) * var(--k) * -.125)) scale(var(--sx),var(--sy))}
.m-lamina.m-sombra{box-shadow:0 50px 90px -30px rgba(0,0,0,.5)}
/* Como un iPhone 16 Pro Max en titanio negro (Josep, 16/09), con «Eternal Studio» donde iría la manzana.
   El grosor ya no son láminas apiladas: son paredes finas alrededor del contorno (las pone estudio.js),
   así al girar se ve macizo, con sus cantos y botones. */
.m-trasera{opacity:var(--marco);backface-visibility:hidden;overflow:hidden;
  transform:translateZ(var(--zt)) rotateY(180deg) scale(var(--sx),var(--sy));
  background:radial-gradient(120% 85% at 28% 18%,#3a3a3e 0%,#2a2a2d 46%,#1d1d20 100%);
  box-shadow:inset 0 0 0 calc(var(--w) * .012) #2f2f33,inset 0 0 0 calc(var(--w) * .012 + 1px) rgba(255,255,255,.07)}
.m-trasera::after{content:"";position:absolute;inset:0;background:linear-gradient(112deg,rgba(255,255,255,0) 40%,rgba(255,255,255,.06) 50%,rgba(255,255,255,0) 60%);
  background-size:300% 100%;background-position:var(--brillo,50%) 0}
/* La isla de la cámara: sobresale de la trasera y lleva tres lentes grandes, flash, sensor y micro. */
.t-isla{position:absolute;left:50%;top:50%;width:var(--is);height:var(--is);margin:calc(var(--is) / -2) 0 0 calc(var(--is) / -2);
  border-radius:var(--ir);opacity:var(--marco);backface-visibility:hidden;
  transform:scale(var(--sx),var(--sy)) translate3d(var(--ix),var(--iy),calc(var(--zt) - var(--ib))) rotateY(180deg);
  background:radial-gradient(130% 130% at 22% 16%,#47474b 0%,#2e2e31 55%,#242427 100%);
  box-shadow:inset 0 0 0 1px rgba(255,255,255,.13),inset 0 1px 3px rgba(255,255,255,.08)}
.t-isla i{position:absolute;border-radius:50%;aspect-ratio:1;transform:translate(-50%,-50%)}
.t-lente{width:42.5%;
  background:radial-gradient(circle at 37% 33%,rgba(255,255,255,.6) 0 2.5%,rgba(255,255,255,0) 6%),
    radial-gradient(circle at 62% 66%,rgba(96,120,255,.3) 0,rgba(96,120,255,0) 26%),
    radial-gradient(circle,#050609 0 29%,#161821 30% 43%,#040507 44% 57%,#1b1b1f 58% 62%,rgba(0,0,0,0) 63%),
    conic-gradient(from 210deg,#3c3c40,#8c8c92 12%,#38383c 30%,#5e5e64 55%,#2e2e32 75%,#7a7a80 90%,#3c3c40);
  box-shadow:0 0 0 calc(var(--w) * .004) #0c0c0e,0 calc(var(--w) * .005) calc(var(--w) * .014) rgba(0,0,0,.6)}
.t-lente:nth-child(1){left:27.5%;top:27.5%}
.t-lente:nth-child(2){left:27.5%;top:72.5%}
.t-lente:nth-child(3){left:72%;top:50%}
.t-flash{left:73.5%;top:16.5%;width:15%;background:radial-gradient(circle at 45% 40%,#fff9ea 0 20%,#dccfb2 42%,#8e8778 64%,#2b2b2e 68%);box-shadow:0 0 0 1px rgba(0,0,0,.5)}
.t-lidar{left:73.5%;top:83.5%;width:14%;background:radial-gradient(circle,#0a0a0c 0 52%,#26262a 55% 70%,#151517 73%)}
.t-micro{left:52%;top:13.5%;width:3.4%;background:#09090a;box-shadow:inset 0 1px 1px rgba(255,255,255,.18)}
.m-cantos{position:absolute;left:50%;top:50%;width:0;height:0;transform-style:preserve-3d;transform:scale3d(var(--sx),var(--sy),1)}
.m-canto{position:absolute;left:0;top:0;width:var(--l);height:var(--a);margin:calc(var(--a) / -2) 0 0 calc(var(--l) / -2);
  opacity:var(--marco);transform:translate3d(var(--x),var(--y),var(--z)) rotateZ(var(--g)) rotateX(90deg)}
.m-canto.m-boton{border-radius:999px;box-shadow:inset 0 0 0 .5px rgba(0,0,0,.55)}
.t-marca{position:absolute;left:0;right:0;top:50%;text-align:center;color:var(--oro);font-weight:600;font-stretch:120%;letter-spacing:.34em;font-size:calc(var(--w) * .048);text-transform:uppercase;padding-left:.34em}
.t-marca::after{content:"";display:block;width:18%;height:1px;margin:.9em auto 0;background:var(--oro);opacity:.6}
.m-pantalla{position:absolute;inset:0;backface-visibility:hidden;transform:translateZ(.6px)}
.m-marco{opacity:var(--marco);backface-visibility:hidden;transform:translateZ(1.4px) scale(var(--sx),var(--sy));
  box-shadow:inset 0 0 0 var(--b) #0b0c0f,inset 0 0 0 calc(var(--b) + 1px) rgba(255,255,255,.06),0 0 0 calc(var(--w) * .007) #3b3b3f,0 0 0 calc(var(--w) * .007 + 1px) rgba(255,255,255,.1)}
.m-marco::after{content:"";position:absolute;left:50%;top:calc(var(--b) + var(--h) * .016);width:calc(var(--w) * .3);height:calc(var(--w) * .088);transform:translateX(-50%);border-radius:999px;background:#040405}
.m-brillo{opacity:calc(var(--marco) * .85);backface-visibility:hidden;transform:translateZ(2px) scale(var(--sx),var(--sy));
  background:linear-gradient(112deg,rgba(255,255,255,0) 38%,rgba(255,255,255,.12) 50%,rgba(255,255,255,0) 62%);background-size:300% 100%;background-position:var(--brillo,50%) 0}

.pant-portada{position:absolute;inset:0;transition:opacity .5s var(--curva)}
.pant-portada .portada-foto{transform-origin:0 0}
.m-pantalla:not([data-modo="portada"]) .pant-portada{opacity:0}
.pant-app{overflow:hidden;background:transparent;color:#e9edef;font-family:var(--letra);font-stretch:100%;font-size:calc(var(--w) * .046);line-height:1.3;transform:scale(var(--sx),var(--sy))}
.capa{position:absolute;inset:0;opacity:0;transition:opacity .45s var(--curva)}
.m-pantalla[data-modo="feed"] .capa-feed,.m-pantalla[data-modo="chat"] .capa-chat,.m-pantalla[data-modo="cta"] .capa-cta{opacity:1}
.barra{position:absolute;inset:0 0 auto;height:2.9em;z-index:5;display:flex;align-items:center;justify-content:space-between;padding:0 2em 0 2.2em;font-weight:650;font-size:.9em;color:#fff}
.barra i{font-style:normal;letter-spacing:.1em;font-size:.8em}

.capa-feed{background:#000}
.feed-pista{position:absolute;inset:0;transform:translateY(calc(var(--i,0) * -100%));transition:transform .75s var(--curva)}
.feed-item{position:relative;height:100%;margin:0;overflow:hidden;background:#111}
.feed-item img,.feed-item video{width:100%;height:100%;object-fit:cover}
.feed-item figcaption{position:absolute;left:0;right:0;bottom:0;padding:4em 1.1em 1.5em;display:grid;gap:.3em;background:linear-gradient(to top,rgba(0,0,0,.78),rgba(0,0,0,0))}
.feed-cuenta{display:flex;align-items:center;gap:.5em;font-weight:650}
.feed-cuenta i{width:1.9em;height:1.9em;border-radius:50%;background:#fff;color:#000;display:grid;place-items:center;font-style:normal;font-weight:800;font-size:.8em}
.feed-chip{justify-self:start;margin-top:.3em;padding:.4em .75em;border-radius:999px;background:rgba(255,255,255,.18);font-size:.82em;font-weight:550}
.feed-chip::before{content:"";display:inline-block;width:.55em;height:.55em;border-radius:50%;background:#7fe0a4;margin-right:.45em;vertical-align:.05em}

.capa-chat,.capa-cta{display:flex;flex-direction:column;background:#0b141a}
.chat-cab{margin-top:2.9em;display:flex;align-items:center;gap:.65em;padding:.55em 1em .65em;background:#1f2c34}
.chat-avatar{width:2.3em;height:2.3em;border-radius:50%;flex:none;background:#6a7b84;display:grid;place-items:center;font-weight:700;font-size:.95em}
.chat-avatar.oro{background:var(--oro);color:#16130a}
.chat-cab b{display:block;font-weight:650}
.chat-cab small{display:block;font-size:.76em;color:#8696a0}
.chat-nota{align-self:center;margin:.7em 0 0;padding:.3em .8em;border-radius:.6em;background:#182229;color:#8fa3ad;font-size:.76em;text-align:center}
.chat-cuerpo{flex:1;display:flex;flex-direction:column;justify-content:flex-end;gap:.42em;padding:.6em .75em;overflow:hidden}
.msg{max-width:84%;margin:0;padding:.42em .65em .32em;border-radius:.8em;font-size:.94em;line-height:1.32}
.msg time{display:block;text-align:right;font-size:.66em;color:rgba(233,237,239,.6);margin-top:.12em}
.msg.in{align-self:flex-start;background:#202c33;border-top-left-radius:.2em}
.msg.out{align-self:flex-end;background:#005c4b;border-top-right-radius:.2em}
.capa-chat .msg:not(.ver){display:none}
.capa-chat .msg.ver,.escribiendo.ver{animation:burbuja .45s var(--curva) both}
@keyframes burbuja{from{opacity:0;transform:translateY(.7em) scale(.96)}}
.escribiendo{display:none;align-self:flex-end;gap:.25em;padding:.6em .75em;border-radius:.8em;background:#005c4b}
.escribiendo.ver{display:flex}
.escribiendo i{width:.42em;height:.42em;border-radius:50%;background:rgba(233,237,239,.7);animation:punto 1s infinite}
.escribiendo i:nth-child(2){animation-delay:.15s}.escribiendo i:nth-child(3){animation-delay:.3s}
@keyframes punto{50%{opacity:.25}}
.aviso{position:absolute;top:3.2em;left:.55em;right:.55em;z-index:6;display:grid;gap:.12em;padding:.7em .9em;border-radius:1.1em;
  background:rgba(238,240,242,.96);color:#0b0c0f;box-shadow:0 .7em 1.8em rgba(0,0,0,.4);transform:translateY(calc(-100% - 6em));transition:transform .6s var(--curva)}
/* (25/09: escondido del todo, sombra incluida; con -170 % asomaba una franja blanca arriba de la pantalla, más visible con el móvil grande) */
.aviso.ver{transform:none}
.aviso b{font-size:.92em}.aviso span{font-size:.84em;color:#3c424a}
.chat-pie{display:flex;align-items:center;gap:.5em;margin:.35em .6em 1.3em}
.chat-pie span{flex:1;padding:.7em 1em;border-radius:999px;background:#202c33;color:#8696a0;font-size:.9em}
.chat-pie i{width:2.5em;height:2.5em;border-radius:50%;background:#00a884;flex:none}
.cta-boton{margin:.3em .75em 1.4em;padding:1em;border-radius:999px;background:#25D366;color:#05260f;font-weight:750;text-align:center}

/* ───────── Páginas de sector ───────── */
.nav-enlaces a[aria-current="page"]{text-decoration:underline;text-underline-offset:.3em}
.cabecera{position:relative;padding:calc(var(--nav) + clamp(3rem,10vh,7rem)) var(--margen) clamp(2.5rem,7vh,4.5rem)}
.cabecera .titulo-sector{animation:ensancha 1.2s var(--curva) .1s both}
html.apagada .cabecera .titulo-sector{font-stretch:62%;animation-name:estrecha}
@keyframes ensancha{from{font-stretch:62%}to{font-stretch:125%}}
@keyframes estrecha{from{font-stretch:125%}to{font-stretch:62%}}
.cabecera h1{margin:0 0 1.1rem;max-width:20ch;font-weight:720;font-stretch:108%;font-size:clamp(2rem,4vw,3.9rem);line-height:1.03;letter-spacing:-.025em;text-wrap:balance}
.acciones{display:flex;flex-wrap:wrap;gap:.8rem 1.6rem;align-items:center;margin-top:1.8rem}
.dividido{display:grid;grid-template-columns:minmax(0,1.1fr) minmax(0,.9fr);gap:clamp(2rem,6vw,6rem);align-items:center}
@media (max-width:899px){.dividido{grid-template-columns:1fr}}
.foto-grande{margin:0 var(--margen);border-radius:14px;overflow:hidden;aspect-ratio:16/8;
  clip-path:inset(calc((1 - var(--p,1)) * 8%) calc((1 - var(--p,1)) * 12%) round 14px)}
.foto-grande img{width:100%;height:100%;object-fit:cover;transform:scale(calc(1.14 - var(--p,1) * .14))}
@media (max-width:899px){.foto-grande{aspect-ratio:4/5}}
.seccion{padding:clamp(4rem,12vh,8rem) var(--margen)}
.seccion+.seccion{border-top:1px solid var(--linea)}
.seccion-cab{display:grid;gap:.8rem;max-width:46rem;margin-bottom:clamp(2rem,5vh,3.5rem)}
.seccion-cab .titulo{margin:0}
.seccion-cab p{margin:0;color:var(--texto-2);font-size:1.12rem}
.rejilla{display:grid;gap:clamp(1.2rem,2.2vw,2.2rem);grid-template-columns:repeat(3,minmax(0,1fr))}
@media (max-width:899px){.rejilla{grid-template-columns:1fr}}
.tarjeta{margin:0;display:grid;align-content:start;gap:.55rem}
.tarjeta-media{position:relative;border-radius:14px;overflow:hidden;aspect-ratio:4/5;background:var(--fondo-2)}
.tarjeta-media img,.tarjeta-media video{width:100%;height:100%;object-fit:cover;transition:transform .6s var(--curva)}
.tarjeta:hover .tarjeta-media img{transform:scale(1.03)}
.tarjeta h3{margin:.45rem 0 0;font-weight:700;font-stretch:108%;font-size:1.35rem;line-height:1.15}
.tarjeta p,.tarjeta figcaption{margin:0;color:var(--texto-2)}
.tarjeta figcaption{display:flex;flex-wrap:wrap;gap:.35rem .6rem;align-items:center;color:var(--texto)}
.pasos{list-style:none;margin:0;padding:0;display:grid;grid-template-columns:repeat(3,minmax(0,1fr));counter-reset:paso;border-top:1px solid var(--linea)}
.pasos li{counter-increment:paso;padding:1.6rem 1.6rem 1.8rem 0;border-right:1px solid var(--linea)}
.pasos li+li{padding-left:1.6rem}
.pasos li:last-child{border-right:0}
.pasos li::before{content:counter(paso,decimal-leading-zero);display:block;font-family:var(--mono);font-size:.8rem;color:var(--texto-2);margin-bottom:1.1rem}
.pasos b{display:block;font-weight:700;font-stretch:108%;font-size:1.3rem;line-height:1.2;margin-bottom:.4rem}
.pasos span{color:var(--texto-2)}
@media (max-width:899px){.pasos{grid-template-columns:1fr}.pasos li,.pasos li+li{padding:1.3rem 0;border-right:0;border-bottom:1px solid var(--linea)}}
.lineas{border-top:1px solid var(--linea)}
.linea{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1.3fr);gap:.8rem 3rem;padding:clamp(1.6rem,4vh,2.6rem) 0;border-bottom:1px solid var(--linea)}
.linea h3{margin:0;font-weight:760;font-stretch:112%;font-size:clamp(1.6rem,2.6vw,2.4rem);line-height:1.05;letter-spacing:-.02em}
.linea p{margin:0 0 .7rem;color:var(--texto-2);font-size:1.08rem}
@media (max-width:899px){.linea{grid-template-columns:1fr}}
.preguntas{max-width:52rem;border-top:1px solid var(--linea)}
.preguntas details{border-bottom:1px solid var(--linea)}
.preguntas summary{list-style:none;cursor:pointer;display:flex;justify-content:space-between;align-items:center;gap:1rem;min-height:44px;padding:1.15rem 0;font-weight:650;font-stretch:104%;font-size:1.15rem;line-height:1.3}
.preguntas summary::-webkit-details-marker{display:none}
.preguntas summary::after{content:"+";flex:none;font-weight:400;font-size:1.6rem;line-height:1;transition:transform .25s var(--curva)}
.preguntas details[open] summary::after{transform:rotate(45deg)}
.preguntas details p{margin:0 0 1.3rem;max-width:44rem;color:var(--texto-2)}
.cierre-pagina{padding:clamp(5rem,14vh,9rem) var(--margen);border-top:1px solid var(--linea)}
.cierre-pagina .titulo-cierre{max-width:18ch}

/* El móvil quieto de las páginas de sector */
.escaparate{display:grid;place-items:center;perspective:1600px;padding-block:1rem}
.movil-quieto{--w:300px;--h:650px;position:relative;width:var(--w);height:var(--h);border-radius:48px;border:11px solid #0b0c0f;overflow:hidden;
  background:#0b141a;color:#e9edef;font-size:calc(var(--w) * .046);line-height:1.3;
  box-shadow:0 0 0 1px #3a3f47,0 50px 90px -30px rgba(0,0,0,.5);
  transform:rotateY(calc((1 - var(--p,1)) * -24deg)) rotateX(calc((1 - var(--p,1)) * 8deg))}
.movil-quieto::after{content:"";position:absolute;left:50%;top:9px;width:30%;height:26px;transform:translateX(-50%);border-radius:999px;background:#040405;z-index:9}
.movil-quieto .capa{opacity:1}
.movil-quieto .capa-chat .msg{display:block}
.movil-quieto .aviso{transform:none}
@media (max-width:899px){.movil-quieto{--w:250px;--h:540px;border-radius:40px;border-width:9px}}

/* Legal y error */
.legal{max-width:50rem;margin:0 auto;padding:calc(var(--nav) + clamp(3rem,8vh,5rem)) var(--margen) 5rem}
.legal h1{margin:0;font-weight:800;font-stretch:112%;font-size:clamp(2.4rem,5vw,4.2rem);line-height:1;letter-spacing:-.03em}
.legal-nav{display:flex;flex-wrap:wrap;gap:.5rem;margin:1.6rem 0 1rem}
.legal-nav a{display:inline-flex;align-items:center;min-height:44px;padding:0 1rem;border:1px solid var(--linea);border-radius:999px;text-decoration:none;font-size:.92rem}
.legal-sec{margin-top:3rem;padding-top:2.6rem;border-top:1px solid var(--linea)}
.legal-sec h2{margin:0 0 1rem;font-weight:780;font-stretch:112%;font-size:clamp(1.8rem,3vw,2.5rem);line-height:1.05;letter-spacing:-.02em}
.legal-sec h3{margin:2.1rem 0 .6rem;font-weight:700;font-stretch:104%;font-size:1.15rem}
.legal-sec p,.legal-sec li,.legal-sec dd{color:var(--texto-2)}
.legal-sec strong{color:var(--texto);font-weight:650}
.legal-datos{margin:1rem 0;border-top:1px solid var(--linea)}
.legal-datos div{display:grid;grid-template-columns:11rem 1fr;gap:1rem;padding:.7rem 0;border-bottom:1px solid var(--linea)}
.legal-datos dt{font-weight:600}
.legal-datos dd{margin:0}
@media (max-width:640px){.legal-datos div{grid-template-columns:1fr;gap:.15rem}}
.legal-lista{padding-left:1.2rem;display:grid;gap:.55rem}
.legal-fecha{margin-top:3rem;font-family:var(--mono);font-size:.8rem;color:var(--texto-2)}
.error{min-height:100svh;display:grid;align-content:center;justify-items:start;gap:1.2rem;padding:calc(var(--nav) + 2rem) var(--margen) 3rem}
.error-num{margin:0;font-weight:880;font-stretch:62%;font-size:clamp(6rem,24vw,20rem);line-height:.78;letter-spacing:-.03em;animation:estrecha 1.2s var(--curva) both}
.error h1{margin:0;font-weight:720;font-stretch:108%;font-size:clamp(1.8rem,3.4vw,3rem);line-height:1.05}
.error p{margin:0;color:var(--texto-2);max-width:32rem}

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

/* ───────── Menú de tres líneas en el móvil (Josep, 16/09: js/menu.js) ───────── */
.menu-boton{display:none}
@media (max-width:899px){
  .menu-boton{display:inline-flex;flex-direction:column;justify-content:center;gap:5px;width:44px;height:44px;margin-right:-8px;
    padding:0 10px;background:none;border:0;color:inherit;cursor:pointer;flex:none}
  .menu-boton span{display:block;height:2px;border-radius:2px;background:currentColor}
}
/* En pantallas estrechas «Escríbenos» se queda en su icono (dentro del menú va entero): si no, las tres líneas no caben. */
@media (max-width:480px){.nav{gap:.6rem}.nav .boton-nav{font-size:0;gap:0;width:44px;min-height:44px;padding:0}.nav .boton-nav svg{width:22px;height:22px}}
.menu-movil{position:fixed;inset:0;z-index:40}
.menu-fondo{position:absolute;inset:0;background:rgba(8,9,11,.55);opacity:0;transition:opacity .3s var(--curva)}
.menu-panel{position:absolute;top:0;right:0;bottom:0;width:min(84vw,360px);display:flex;flex-direction:column;gap:1.75rem;
  padding:calc(var(--nav) + .5rem) 1.75rem calc(2rem + env(safe-area-inset-bottom));background:var(--oscuro);color:var(--hueso);
  border-left:1px solid rgba(233,235,238,.12);transform:translateX(100%);transition:transform .35s var(--curva);overflow-y:auto}
.menu-movil.abierto .menu-fondo{opacity:1}
.menu-movil.abierto .menu-panel{transform:none}
.menu-cerrar{position:absolute;top:10px;right:14px;width:44px;height:44px;background:none;border:0;color:inherit;cursor:pointer}
.menu-cerrar span{position:absolute;left:11px;right:11px;top:21px;height:2px;border-radius:2px;background:currentColor}
.menu-cerrar span:first-child{transform:rotate(45deg)}
.menu-cerrar span:last-child{transform:rotate(-45deg)}
.menu-lista{list-style:none;margin:0;padding:0;display:flex;flex-direction:column}
.menu-lista a{display:block;padding:1rem 0;color:var(--hueso);font-size:1.45rem;font-weight:600;font-stretch:110%;letter-spacing:-.01em;
  text-decoration:none;border-bottom:1px solid rgba(233,235,238,.1)}
.menu-lista a[aria-current="page"]{color:var(--oro)}
.menu-panel .menu-whatsapp{align-self:flex-start;background:var(--hueso);color:var(--oscuro)}
html.menu-abierto{overflow:hidden}
@media (prefers-reduced-motion:reduce){.menu-fondo,.menu-panel{transition:none}}
.menu-panel:focus{outline:none}

/* ───────── «Lo que trabaja», las cuatro (24/09): webs, sistemas, automatizaciones y asistentes ───────── */
.antetitulo{margin:0 0 .9rem;font-family:var(--mono);font-size:.78rem;font-weight:500;letter-spacing:.08em;text-transform:uppercase;color:var(--texto-2)}
.antetitulo b{font-weight:500;color:var(--oro)}
.hecho{position:relative;margin:0 0 1.1rem;padding-left:1.15rem;font-size:1rem;line-height:1.5;color:var(--texto-2)}
.hecho::before{content:"";position:absolute;left:0;top:.62em;width:.42rem;height:.42rem;border-radius:50%;background:var(--oro)}
.hecho b{font-weight:600;color:var(--texto)}
.condiciones{margin:0 0 .4rem;font-size:.95rem;color:var(--texto-2)}
@media (max-width:899px){html.motor .hecho{font-size:.92rem;margin-bottom:.8rem}html.motor .condiciones{font-size:.88rem}}

/* Las pantallas nuevas del móvil */
.m-pantalla[data-modo="web"] .capa-web,.m-pantalla[data-modo="sistema"] .capa-sistema,
.m-pantalla[data-modo="auto"] .capa-auto,.m-pantalla[data-modo="avisos"] .capa-avisos{opacity:1}
.capa [data-paso]:not(.aviso){transition:opacity .45s var(--curva),transform .55s var(--curva)}
.capa [data-paso]:not(.aviso):not(.ver){opacity:0;transform:translateY(.7em)}
.movil-quieto [data-paso]:not(.aviso){opacity:1;transform:none}

/* Web: esta misma web, en el móvil */
.capa-web{background:#0b0c0f}
.web-pagina{position:absolute;inset:0;overflow:hidden}
.web-pagina img{width:100%;height:100%;object-fit:cover;object-position:50% 30%}
.web-pagina::after{content:"";position:absolute;inset:0;background:linear-gradient(to top,rgba(4,5,7,.9),rgba(4,5,7,.4) 46%,rgba(4,5,7,0) 72%),linear-gradient(to bottom,rgba(4,5,7,.55),rgba(4,5,7,0) 22%)}
.web-url{position:absolute;left:1em;right:1em;top:3.1em;z-index:3;display:flex;align-items:center;justify-content:center;gap:.45em;padding:.5em .8em;border-radius:999px;
  background:rgba(38,40,46,.82);color:#e9ebee;font-size:.78em;font-weight:550}
.web-url i{position:relative;width:.62em;height:.5em;margin-top:.25em;border-radius:.12em;background:currentColor}
.web-url i::before{content:"";position:absolute;left:.1em;right:.1em;bottom:.42em;height:.38em;border:.12em solid currentColor;border-bottom:0;border-radius:.3em .3em 0 0}
.web-marca{position:absolute;left:0;right:0;top:5.9em;z-index:2;text-align:center;font-weight:600;font-stretch:120%;font-size:.62em;letter-spacing:.3em;text-transform:uppercase;color:#fff}
.web-texto{position:absolute;left:1.15em;right:1.15em;bottom:1.7em;z-index:2;color:#fff}
.web-h1{margin:0 0 .75em;font-weight:760;font-stretch:114%;font-size:1.75em;line-height:.98;letter-spacing:-.025em}
.web-h1 span{display:block}
.web-boton{display:inline-block;padding:.72em 1.15em;border-radius:999px;background:#fff;color:#0b0c0f;font-weight:650;font-size:.8em}

/* Sistema: el panel de un negocio */
.capa-sistema{display:flex;flex-direction:column;background:#0e1014;color:#e9ebee}
.sis-cab{margin-top:2.9em;padding:.7em 1.1em .45em}
.sis-cab b{display:block;font-weight:720;font-stretch:108%;font-size:1.15em;line-height:1.15}
.sis-cab small{display:block;margin-top:.15em;font-size:.76em;color:#8a919b}
.sis-pestanas{display:flex;gap:.35em;padding:.35em 1.1em .75em;border-bottom:1px solid rgba(233,235,238,.1)}
.sis-pestanas span{padding:.35em .7em;border-radius:999px;border:1px solid rgba(233,235,238,.16);font-size:.72em;color:#a0a6af;white-space:nowrap}
.sis-pestanas .on{background:#e9ebee;border-color:#e9ebee;color:#0e1014;font-weight:650}
.sis-agenda{list-style:none;margin:0;padding:.3em 1.1em;display:grid}
.sis-agenda li{display:grid;grid-template-columns:3.2em 1fr;column-gap:.6em;padding:.62em 0;border-bottom:1px solid rgba(233,235,238,.08)}
.sis-agenda time{grid-row:1 / span 2;padding-top:.12em;font-family:var(--mono);font-size:.8em;color:#a0a6af}
.sis-agenda b{font-weight:650;font-size:.95em}
.sis-agenda span{font-size:.78em;color:#8a919b}
.sis-agenda .nueva b{color:var(--oro)}
.sis-agenda .nueva span::before{content:"";display:inline-block;width:.5em;height:.5em;margin-right:.4em;border-radius:50%;background:var(--oro)}
.sis-resumen{margin:auto 1em 1.3em;padding:.85em .95em;border-radius:1em;background:#171a20;font-size:.8em;line-height:1.4;color:#c9ced5}
.sis-resumen b{font-size:1.3em;font-weight:760;color:#fff}

/* Automatizaciones: lo que se ha hecho solo hoy */
.capa-auto{display:flex;flex-direction:column;background:#0b0c0f;color:#e9ebee}
.auto-titulo{margin:3.7em 1.1em .35em;font-weight:740;font-stretch:110%;font-size:1.55em;line-height:1.02;letter-spacing:-.015em}
.auto-sub{margin:0 1.3em 1em;font-size:.76em;color:#8a919b}
.auto-lista{list-style:none;margin:0;padding:0 .9em;display:grid;gap:.5em}
.auto-lista li{display:grid;grid-template-columns:auto 1fr;column-gap:.7em;align-items:center;padding:.75em .8em;border-radius:1em;background:#15181d}
.auto-lista li::before{content:"\2713";grid-row:1 / span 2;display:grid;place-items:center;width:1.6em;height:1.6em;border-radius:50%;background:#7fe0a4;color:#07260f;font-weight:800;font-size:.85em}
.auto-lista time{font-family:var(--mono);font-size:.7em;color:#8a919b}
.auto-lista b{font-weight:600;font-size:.88em;line-height:1.25}

/* Avisos: la pantalla bloqueada, con un aviso de cada una */
.capa-avisos{background:radial-gradient(120% 70% at 30% 8%,#30333a 0%,#17191d 52%,#0b0c0f 100%);color:#fff}
.capa-avisos .bloqueo-hora{position:absolute;left:0;right:0;top:3.7em;text-align:center}
.capa-avisos .bloqueo-hora small{display:block;font-size:.8em;font-weight:550;color:rgba(255,255,255,.72)}
.capa-avisos .bloqueo-hora b{display:block;font-weight:600;font-stretch:112%;font-size:3.7em;line-height:1;letter-spacing:-.02em}
.bloqueo-avisos{position:absolute;left:.6em;right:.6em;bottom:1.3em;list-style:none;margin:0;padding:0;display:grid;gap:.45em}
.bloqueo-avisos li{display:grid;grid-template-columns:auto 1fr auto;column-gap:.6em;align-items:start;padding:.7em .75em;border-radius:1.15em;background:rgba(255,255,255,.13)}
.bloqueo-avisos i{display:grid;place-items:center;width:2.1em;height:2.1em;border-radius:.55em;font-style:normal;font-weight:800;font-size:.8em;background:#e9ebee;color:#0b0c0f}
.bloqueo-avisos .i-panel{background:var(--oro);color:#16130a}
.bloqueo-avisos .i-auto{background:#7fe0a4;color:#07260f}
.bloqueo-avisos .i-wa{background:#25D366;color:#05260f}
.bloqueo-avisos b{display:block;font-size:.8em;font-weight:650}
.bloqueo-avisos span{display:block;font-size:.8em;line-height:1.25;color:rgba(255,255,255,.84)}
.bloqueo-avisos time{font-size:.66em;color:rgba(255,255,255,.6)}

/* ── La película de las cuatro (la sección se queda fija y pasan los capítulos) ── */
.indice ol{list-style:none;margin:0;padding:0;display:flex;flex-wrap:wrap;gap:.2rem 1.5rem}
.indice a{position:relative;display:inline-flex;align-items:baseline;gap:.5em;min-height:44px;padding-top:.6rem;text-decoration:none;font-weight:600;font-size:.98rem;color:var(--texto-2);transition:color .3s}
.indice a span:not(.nombre){font-family:var(--mono);font-size:.74rem;font-weight:500}
.indice a:hover,.indice a.activo{color:var(--texto)}
html:not(.motor) .pelicula .indice{padding:2.5rem var(--margen) 0}
html:not(.motor) .capitulo{padding:clamp(3rem,9vh,6rem) var(--margen)}
html.motor .pelicula{height:calc(100svh * 4 + 40svh)}
html.motor .pelicula-fija{position:sticky;top:0;height:100svh;overflow:hidden}
html.motor .pelicula .indice{position:absolute;z-index:3;top:calc(var(--nav) + 2.5vh);left:48vw;right:var(--margen)}
html.motor .pelicula .indice a::after{content:"";position:absolute;left:0;right:0;bottom:.3rem;height:1px;background:var(--oro);transform:scaleX(0);transform-origin:0 50%;transition:transform .5s var(--curva)}
html.motor .pelicula .indice a.activo::after{transform:scaleX(1)}
/* Cada capítulo entra y sale con el scroll (fase 2, más abajo): solo se puede pulsar el que se ve (.visible) */
html.motor .capitulo{position:absolute;inset:0;display:flex;align-items:center;padding:calc(var(--nav) + 4rem) var(--margen) 2rem;pointer-events:none}
/* El capítulo recibe el foco al elegirlo en el índice: sin marco, el foco visible va en sus enlaces */
.capitulo:focus{outline:none}
.pelicula-avance{display:none}
html.motor .pelicula-avance{display:block;position:absolute;z-index:3;left:48vw;right:var(--margen);bottom:5vh;height:1px;background:var(--linea)}
html.motor .pelicula-avance::after{content:"";position:absolute;inset:0;background:var(--oro);transform:scaleX(var(--avance,0));transform-origin:0 50%}
@media (min-width:900px){html.motor .capitulo .bloque-caja{margin-left:48vw;max-width:min(38rem,42vw)}}
@media (max-width:899px){
  html.motor .pelicula .indice{left:0;right:0;top:calc(var(--nav) + .35rem);padding:0 .9rem}
  html.motor .pelicula .indice ol{flex-wrap:nowrap;gap:.4rem;overflow-x:auto;scrollbar-width:none}
  html.motor .pelicula .indice a{min-height:44px;padding:0 .85rem;align-items:center;border:1px solid var(--linea);border-radius:999px;background:var(--fondo);font-size:.82rem;white-space:nowrap}
  html.motor .pelicula .indice a::after{display:none}
  html.motor .pelicula .indice a.activo{background:var(--texto);color:var(--fondo);border-color:var(--texto)}
  html.motor .capitulo{align-items:flex-end;padding:0 .9rem 1rem}
  html.motor .pelicula-avance{display:none}
}

/* Los tres planes en columnas, para que el asistente quepa como las otras tres */
.planes-tres{list-style:none;margin:0 0 .9rem;padding:0;display:grid;grid-template-columns:repeat(3,minmax(0,1fr));border-top:1px solid var(--linea);border-bottom:1px solid var(--linea)}
.planes-tres li{display:grid;align-content:start;gap:.12rem;padding:.8rem .9rem .9rem 0}
.planes-tres li+li{padding-left:.9rem;border-left:1px solid var(--linea)}
.planes-tres b{font-weight:700;font-stretch:108%;font-size:1rem}
.planes-tres strong{font-weight:800;font-stretch:112%;font-size:clamp(1.4rem,2.1vw,1.85rem);line-height:1.1;letter-spacing:-.02em;white-space:nowrap}
.planes-tres strong small{margin-left:.1em;font-size:.45em;font-weight:500;letter-spacing:0;color:var(--texto-2)}
.planes-tres span{font-size:.82rem;line-height:1.35;color:var(--texto-2)}
@media (max-width:899px){.planes-tres li{padding:.6rem .45rem .7rem 0}.planes-tres li+li{padding-left:.55rem}.planes-tres strong{font-size:1.25rem}.planes-tres span{font-size:.72rem}}
/* Película en el móvil: el índice son cuatro números y el nombre sale solo en el que está delante */
@media (max-width:899px){
  html.motor .pelicula .indice ol{justify-content:space-between;overflow:visible}
  html.motor .pelicula .indice a:not(.activo) .nombre{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap}
  html.motor .pelicula .indice a span:not(.nombre){font-size:.8rem}
}


/* /automatizacion: una sección por cada una, con su móvil al lado (a un lado y al otro) */
.seccion-cuatro .parrafo{margin:0 0 1rem;max-width:36rem;color:var(--texto-2)}
.seccion-cuatro .ejemplos{margin-bottom:1.2rem}
.seccion-cuatro .ejemplos li{color:var(--texto-2)}
@media (min-width:900px){.dividido.al-reves>:first-child{order:2}}
.indice-pagina{margin-top:clamp(2rem,6vh,3.5rem);padding-top:.4rem;border-top:1px solid var(--linea)}
.lineas-garantia{margin-top:clamp(2rem,5vh,3rem)}
@media (max-width:899px){
  .seccion-cuatro .movil-quieto{--w:230px;--h:498px;border-radius:38px;border-width:8px}
  .indice-pagina ol{display:grid;grid-template-columns:1fr 1fr;gap:0 1rem}
}

/* La pantalla bloqueada: el aviso más nuevo, arriba; salen de abajo arriba */
.bloqueo-avisos{display:flex;flex-direction:column-reverse;gap:.45em}

/* ── Tras el crítico (24/09): el texto a la izquierda y el móvil a la derecha en todo «Lo que trabaja»,
   para que el móvil no cruce nunca el título ni el texto (a la entrada y en el cierre ya está a la derecha) ── */
.solo-movil{display:none}
@media (max-width:899px){.solo-movil{display:block}.solo-escritorio{display:none}}
@media (min-width:900px){
  html.motor .sector-b .bloque-caja,html.motor .capitulo .bloque-caja{margin-left:0;max-width:min(38rem,44vw)}
  html.motor .pelicula .indice{left:var(--margen);right:auto}
  /* Los cuatro capítulos arrancan a la misma altura, aunque el del asistente sea más largo */
  html.motor .capitulo{align-items:flex-start;padding-top:calc(var(--nav) + 9vh + 44px)}
  html.motor .pelicula-avance{top:calc(var(--nav) + 2.5vh + 50px);bottom:auto;left:var(--margen);right:52vw}
}
/* El índice responde al pasar por encima: el subrayado aparece a medias y se va */
html.motor .pelicula .indice a::after{transition:transform .5s var(--curva),opacity .3s}
html.motor .pelicula .indice a:not(.activo):hover::after{transform:scaleX(1);opacity:.45}
/* Película en el móvil: tarjetas cortas para que el teléfono se vea grande */
@media (max-width:899px){
  html.motor .pelicula{height:calc(100svh * 5 + 20svh)}
  html.motor .pelicula .indice a{min-height:40px}
  html.motor .capitulo .titulo{font-size:clamp(1.45rem,6.4vw,1.9rem);margin-bottom:.55rem}
  html.motor .capitulo .antetitulo{margin-bottom:.5rem}
  html.motor .capitulo .entrada{margin-bottom:.7rem}
  html.motor .capitulo .hecho{margin-bottom:.6rem}
  /* En el cambio de sala, el título y la frase se van antes de que suba el teléfono */
  html.motor .cambio-fija>*{opacity:calc(1 - var(--salida,0))}
}
@media (min-width:900px){html.motor .pelicula{height:calc(100svh * 5 + 20svh)}}
/* Película en el móvil: el índice, una columna de números en el borde derecho (deja arriba sitio al teléfono) */
@media (max-width:899px){
  html.motor .pelicula .indice{top:calc(var(--nav) + 1rem);left:auto;right:.55rem;padding:0}
  html.motor .pelicula .indice ol{flex-direction:column;gap:.45rem;overflow:visible}
  html.motor .pelicula .indice a{width:36px;min-height:36px;padding:0;justify-content:center;border-radius:50%}
  html.motor .pelicula .indice a .nombre,html.motor .pelicula .indice a:not(.activo) .nombre{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap}
  html.motor .capitulo .bloque-caja{padding:1rem 1.05rem 1.1rem}
  html.motor .capitulo .hecho,html.motor .capitulo .condiciones{font-size:.84rem;line-height:1.42}
}
/* Móviles bajos (un iPhone con las barras de Safari, ~700 px): la tarjeta pierde la línea del plazo
   (está en «Cómo va» y en /automatizacion) para que el teléfono se siga leyendo */
@media (max-width:899px) and (max-height:760px){
  html.motor .capitulo .condiciones.plazo{display:none}
  html.motor .capitulo .bloque-caja{padding:.85rem .95rem .95rem}
  html.motor .capitulo .antetitulo{margin-bottom:.35rem}
  html.motor .capitulo .titulo{font-size:clamp(1.35rem,6vw,1.7rem)}
  html.motor .capitulo .entrada{margin-bottom:.5rem;font-size:.95rem}
  html.motor .capitulo .hecho{margin-bottom:.45rem}
  html.motor .capitulo .enlace{min-height:40px}
}
@media (max-width:899px) and (max-height:760px){html.motor #asistentes .hecho{display:none}}
/* El cerebro de IA, en el capítulo de Sistemas (Josep, 24/09 18:05) */
.cerebro{margin:-.3rem 0 1.1rem;font-size:1rem;line-height:1.5;color:var(--texto-2)}
.cerebro b{font-weight:600;color:var(--texto)}
@media (max-width:899px){html.motor .cerebro{margin:-.2rem 0 .6rem;font-size:.86rem;line-height:1.42}}
/* Móvil: las cuatro tarjetas de la película, a la altura de la más alta (la mide estudio.js) */
@media (max-width:899px){html.motor .capitulo .bloque-caja{min-height:var(--caja-min,0px)}}
/* Y en móviles bajos, sin la línea «Hecho aquí» (la pantalla del móvil ya lo enseña), para que el teléfono se lea */
@media (max-width:899px) and (max-height:760px){html.motor .capitulo .hecho{display:none}}

/* ── Fase 2 (Josep, 24/09): cada capítulo entra y sale con el scroll. estudio.js pone en cada uno --v (0 fuera,
   1 quieto) y, en el ordenador, data-lado (zigzag: izquierda, derecha…); en la película, data-lado y --vc para
   el índice y la línea de avance, que van en la columna del texto. En el paso, el móvil se queda solo en el centro.
   El alto de la sección lo pone estudio.js (lo que suman sus pasos y ratos quietos); este es el de partida. ── */
html.motor .pelicula{--col:min(38rem,44vw);--desliza:clamp(2rem,4vw,3.5rem);height:calc(100svh * 7.45)}
html.motor .capitulo.visible{pointer-events:auto}
html.motor .pelicula.sin-indice .indice{pointer-events:none}
/* Sin palabras sueltas en la última línea (los precios y la nota de los planes, a 1280 px) */
html.motor .capitulo .bloque-caja p,html.motor .capitulo .planes-tres span{text-wrap:pretty}
/* Las pantallas de «Lo que trabaja» cambian de golpe: el cambio pasa con el móvil de espaldas (o con todo fundido, en
   el salto del índice), y el fundido de 0,45 s dejaba ver la de antes debajo de la nueva con scroll rápido (el crítico,
   25/09). El feed de «Lo que se ve» sigue apareciendo con su fundido, pero se va de golpe al apagarse la sala. */
html.motor .capa-avisos,html.motor .capa-web,html.motor .capa-sistema,html.motor .capa-auto,html.motor .capa-chat,html.motor .capa-cta,
html.motor .m-pantalla:not([data-modo="portada"]):not([data-modo="feed"]) .capa-feed{transition:none}
/* El salto del índice: la película y el móvil se funden un momento, en vez de un corte seco (estudio.js, saltar) */
html.motor .pelicula-fija,html.motor .movil-escena{transition:opacity .11s}
html.motor.saltando .pelicula-fija,html.motor.saltando .movil-escena{opacity:0}
/* El texto llega a su color entero con el primer 40 % de su entrada y lo pierde en el último 40 % de su salida; el
   resto lo hace deslizándose. Así, si alguien para el scroll a mitad, el texto que se ve se lee con todo su contraste. */
html.motor .capitulo .bloque-caja{opacity:min(1,calc(var(--v,0) * 2.5))}
/* Con el teclado, el capítulo al que lleva el índice se marca (con el ratón, no) */
html.motor .capitulo:focus-visible .bloque-caja{outline:1px solid var(--oro);outline-offset:14px}
@media (min-width:900px){
  html.motor .capitulo{padding-top:var(--cap-top,calc(var(--nav) + 9vh + 44px))}
  html.motor .capitulo[data-lado="der"]{justify-content:flex-end}
  /* El texto se va hacia su borde y el nuevo entra desde el suyo; si no cabe en alto, se encoge (--cap-escala) */
  html.motor .capitulo .bloque-caja{transform-origin:0 0;transform:translate3d(calc((var(--v,0) - 1) * var(--desliza)),0,0) scale(var(--cap-escala,1))}
  html.motor .capitulo[data-lado="der"] .bloque-caja{transform-origin:100% 0;transform:translate3d(calc((1 - var(--v,0)) * var(--desliza)),0,0) scale(var(--cap-escala,1))}
  html.motor .pelicula .indice,html.motor .pelicula-avance{opacity:min(1,calc(var(--vc,1) * 2.5));transform:translate3d(calc((var(--vc,1) - 1) * var(--desliza)),0,0)}
  html.motor .pelicula-avance{right:auto;width:var(--col)}
  html.motor .pelicula[data-lado="der"] .indice,html.motor .pelicula[data-lado="der"] .pelicula-avance{left:calc(100% - var(--margen) - var(--col));transform:translate3d(calc((1 - var(--vc,1)) * var(--desliza)),0,0)}
}
/* En el móvil, la tarjeta baja mientras el teléfono crece y sube mientras encoge; el índice se va con la última */
@media (max-width:899px){
  html.motor .capitulo .bloque-caja{opacity:1;transform:translate3d(0,calc((1 - var(--v,0)) * (100% + 2.5rem)),0)}
  html.motor .capitulo:focus-visible .bloque-caja{outline-offset:3px}
  html.motor .pelicula .indice{opacity:min(1,calc(var(--vc,1) * 2.5))}
}
/* Ordenador estrecho (900-1099 px): la fila del índice no cabe en la columna del texto; como en el móvil, solo
   el capítulo que está delante enseña su nombre (los demás lo conservan para los lectores de pantalla) */
@media (min-width:900px) and (max-width:1099px){
  html.motor .pelicula .indice ol{gap:.2rem 1.1rem}
  html.motor .pelicula .indice a:not(.activo) .nombre{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap}
}
/* Ordenador bajo (un portátil con la barra del navegador): los capítulos más apretados, para que el del
   asistente quepa entero sin encogerse (estudio.js sube el arranque y, si aun así no cabe, lo encoge) */
@media (min-width:900px) and (max-height:820px){
  html.motor .capitulo .antetitulo{margin-bottom:.6rem}
  html.motor .capitulo .titulo{font-size:clamp(1.7rem,2.7vw,2.5rem);margin-bottom:.7rem}
  html.motor .capitulo .entrada{font-size:1.02rem;margin-bottom:.9rem}
  html.motor .capitulo .hecho,html.motor .capitulo .cerebro{margin-bottom:.75rem}
  html.motor .capitulo .planes-tres{margin-bottom:.6rem}
  html.motor .capitulo .planes-tres li{padding-top:.55rem;padding-bottom:.6rem}
  html.motor .capitulo .nota{margin-bottom:.3rem}
}