/* Avantia · landing — negro, cristal violeta y papel con grano.
   Componentes de la librería en assets/ui/* (se adaptan sólo con --lui-*). */

@font-face{font-family:"Inter Tight";src:url(../assets/fuentes/intertight.woff2) format("woff2");font-weight:500 800;font-display:swap}
@font-face{font-family:"Inter";src:url(../assets/fuentes/inter.woff2) format("woff2");font-weight:400 600;font-display:swap}
@font-face{font-family:"Mono";src:url(../assets/fuentes/mono.woff2) format("woff2");font-weight:400 500;font-display:swap}

:root{
  --negro:#000;
  --superficie:#0b0b0e;
  --superficie-2:#111116;
  --linea:#1d1d24;
  --linea-2:#2a2a33;
  --texto:#f3f2f7;
  --atenuado:#8a8a93;
  --papel:#efeee9;
  --tinta:#0c0c10;
  --tinta-atenuada:#5c5c66;

  --acento:#9d7bff;          /* texto y trazos sobre negro    6,7:1 */
  --acento-relleno:#6b2bff;  /* fondo de botón con blanco     6,2:1 */
  --acento-texto:#5b21d6;    /* texto sobre el papel claro    6,9:1 */

  --lui-acento:var(--acento);
  --lui-texto:var(--texto);
  --lui-superficie:var(--superficie);
  --lui-linea:var(--linea);
  --lui-atenuado:var(--atenuado);

  --ancho:1240px;
  --lado:clamp(16px,4vw,40px);
  --radio:18px;
  --suave:cubic-bezier(.76,0,.24,1);
  --mono:"Mono",ui-monospace,SFMono-Regular,Menlo,monospace;
  --titular:"Inter Tight","Inter",system-ui,sans-serif;
}

*{box-sizing:border-box}
html{scroll-behavior:smooth;-webkit-text-size-adjust:100%}
body{margin:0;background:var(--negro);color:var(--texto);font:400 16px/1.6 "Inter",system-ui,sans-serif;
  -webkit-font-smoothing:antialiased;overflow-x:clip}
img{max-width:100%;display:block}
a{color:inherit;text-decoration:none}
h1,h2,h3{font-family:var(--titular);font-weight:700;letter-spacing:-.035em;line-height:1;margin:0;text-wrap:balance}
p{margin:0;text-wrap:pretty}
:focus-visible{outline:2px solid var(--acento);outline-offset:3px;border-radius:6px}
.saltar{position:absolute;left:-999px;top:8px;z-index:100;background:var(--texto);color:var(--negro);padding:10px 14px;border-radius:8px}
.saltar:focus{left:8px}
.env{max-width:var(--ancho);margin:0 auto;padding:0 var(--lado)}

/* rótulo en mono, como los de la Cabina */
.rotulo{font:500 12px/1 var(--mono);letter-spacing:.14em;text-transform:uppercase;color:var(--acento);display:inline-flex;align-items:center;gap:10px}
.rotulo::before{content:"";width:6px;height:6px;border-radius:50%;background:currentColor;box-shadow:0 0 12px currentColor}

/* botones */
.boton{display:inline-flex;align-items:center;gap:10px;min-height:48px;padding:0 22px;border-radius:999px;font:600 15px/1 "Inter",sans-serif;
  transition:transform .3s var(--suave),background .3s,border-color .3s,color .3s;white-space:nowrap}
.boton svg{width:15px;height:15px;transition:transform .3s var(--suave)}
.boton:hover svg{transform:translateX(3px)}
.boton.primario{background:var(--acento-relleno);color:#fff;box-shadow:0 10px 40px -10px rgb(107 43 255 / .7),inset 0 1px 0 rgb(255 255 255 / .25)}
.boton.primario:hover{background:#7a3dff}
.boton.borde{border:1px solid var(--linea-2);color:var(--texto)}
.boton.borde:hover{border-color:var(--acento)}

/* ---------- cabecera (barra-reactiva) ---------- */
[data-lui="barra"]{--lui-fondo:rgb(0 0 0 / .72);--lui-alto:84px;--lui-alto-min:64px}
.cab{display:flex;align-items:center;gap:28px;padding-inline:max(var(--lado),calc((100vw - var(--ancho))/2 + var(--lado)))}
.cab .lui-logo img{height:30px;width:auto}

/* ---------- 1 · hero ---------- */
.hero > .env{width:100%}
.hero{position:relative;min-height:min(100svh,980px);display:flex;align-items:center;padding:130px 0 90px;isolation:isolate;overflow:hidden}
.hero .cinta{position:absolute;inset:0;z-index:-1}
.hero .cinta video{width:100%;height:100%;object-fit:cover;object-position:70% 50%;background:#000}
.hero .cinta::after{content:"";position:absolute;inset:0;background:linear-gradient(90deg,#000 22%,rgb(0 0 0 / .55) 50%,transparent 75%),linear-gradient(0deg,#000 0,transparent 30%)}
.grano{position:absolute;inset:0;pointer-events:none;opacity:.14;mix-blend-mode:overlay;
  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='3' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E")}
.hero h1{font-size:clamp(46px,7.4vw,108px);max-width:14ch;margin:0 0 28px}
.hero h1 [data-lui="rotan"]{color:var(--acento)}
.hero h1 [data-lui~="rotan"]{padding-bottom:.2em;vertical-align:-.03em}
.hero .entradilla{font-size:clamp(17px,1.5vw,20px);color:#c4c3cd;max-width:34rem}
.hero .acciones{display:flex;flex-wrap:wrap;gap:12px;margin-top:38px}
.hero .estado{display:flex;flex-wrap:wrap;gap:10px 28px;margin-top:64px;padding-top:24px;border-top:1px solid var(--linea);max-width:36rem;
  font:500 12px/1.4 var(--mono);letter-spacing:.08em;text-transform:uppercase;color:var(--atenuado)}
.hero .estado b{color:var(--texto);font-weight:500}

/* ---------- 2 · marcas (carrusel-infinito) ---------- */
.marcas{border-block:1px solid var(--linea);padding:26px 0;background:var(--negro)}
.marcas .env{display:flex;align-items:center;gap:40px}
.marcas .rotulo{color:var(--atenuado);flex:none}
.marcas .rotulo::before{display:none}
.marcas [data-lui="carrusel"]{--lui-hueco:64px;--lui-vel:40s;flex:1;min-width:0;mask:linear-gradient(90deg,transparent,#000 12%,#000 88%,transparent)}
.marca{display:inline-flex;align-items:center;gap:9px;font:600 20px/1 var(--titular);color:#6e6e78;white-space:nowrap;transition:color .3s}
.marca:hover{color:#fff}
.marca svg{fill:currentColor;flex:none;width:24px;height:24px}

/* ---------- secciones genéricas ---------- */
.seccion{padding:clamp(90px,12vw,160px) 0;position:relative}
.cabeza{display:grid;grid-template-columns:1.1fr 1fr;gap:40px 64px;align-items:end;margin-bottom:56px}
.cabeza h2{font-size:clamp(38px,5.4vw,72px);margin-top:20px}
.cabeza p{color:var(--atenuado);font-size:17px;max-width:30rem}

/* ---------- 3 · servicios (tarjeta-spotlight + objeto de cristal) ---------- */
.servicios{display:grid;grid-template-columns:repeat(4,1fr);gap:14px}
.servicio{position:relative;display:flex;flex-direction:column;min-height:420px;padding:26px;border:1px solid var(--linea);border-radius:var(--radio);
  background:linear-gradient(180deg,var(--superficie-2),var(--superficie));overflow:hidden;transition:border-color .4s,transform .5s var(--suave)}
.servicio:hover{transform:translateY(-4px)}
.servicio .num{font:500 12px/1 var(--mono);color:var(--atenuado);letter-spacing:.1em}
.servicio .objeto{mix-blend-mode:screen;flex:1;display:flex;align-items:center;justify-content:center;margin:8px -10px;min-height:0}
.servicio .objeto img{width:min(240px,92%);height:auto;aspect-ratio:1;object-fit:contain;-webkit-mask:radial-gradient(closest-side,#000 70%,transparent);mask:radial-gradient(closest-side,#000 70%,transparent);transition:transform .8s var(--suave),filter .6s}
.servicio:hover .objeto img{transform:scale(1.08) rotate(-4deg);filter:brightness(1.25) saturate(1.15)}
.servicio h3{font-size:23px;letter-spacing:-.02em;margin-bottom:10px}
.servicio p{color:var(--atenuado);font-size:15px;line-height:1.55}
.servicio .ir{position:absolute;top:20px;right:20px;width:36px;height:36px;border-radius:50%;border:1px solid var(--linea-2);display:grid;place-items:center;transition:background .3s,border-color .3s}
.servicio .ir svg{width:14px;height:14px;transform:rotate(-45deg)}
.servicio:hover .ir{background:var(--acento-relleno);border-color:var(--acento-relleno)}

/* ---------- 4 · marquesina gigante (efecto de las plantillas Agentix / Rayo) ---------- */
.marquesina{overflow:hidden;padding:30px 0;border-block:1px solid var(--linea)}
.marquesina .pista{display:flex;width:max-content;animation:desliza 46s linear infinite}
.marquesina span{font:800 clamp(64px,11vw,170px)/1 var(--titular);letter-spacing:-.04em;padding-right:.35em;white-space:nowrap;
  color:transparent;-webkit-text-stroke:1.5px #7a6aa8}
.marquesina span:nth-child(even){color:var(--texto);-webkit-text-stroke:0}
.marquesina span i{font-style:normal;color:var(--acento);-webkit-text-stroke:0}
.marquesina:hover .pista{animation-play-state:paused}
@keyframes desliza{to{transform:translateX(-50%)}}

/* ---------- 5 · qué hacemos (calco de la referencia: blanco, cristal, 1 grande + 7) ---------- */
@font-face{font-family:"Serif";src:url(../assets/fuentes/serif-cursiva.woff2) format("woff2");font-style:italic;font-weight:400;font-display:swap}
.qh{background:#f7f6fb;color:var(--tinta);overflow:hidden;isolation:isolate}
.qh::before{content:"";position:absolute;top:-25%;right:-15%;width:65%;height:80%;z-index:-1;background:radial-gradient(closest-side,rgb(107 43 255 / .16),transparent)}
.qh::after{content:"";position:absolute;left:-10%;bottom:-20%;width:60%;height:60%;z-index:-1;background:radial-gradient(closest-side,rgb(124 77 255 / .14),transparent)}
.qh .env{max-width:1440px}
.qh-rejilla{display:grid;grid-template-columns:minmax(0,.95fr) minmax(0,1.15fr);gap:20px;align-items:stretch}
.qh-izq{display:flex;flex-direction:column;gap:30px}
.qh-rotulo{font:500 12px/1 var(--mono);letter-spacing:.2em;text-transform:uppercase;color:var(--acento-texto)}
.qh h2{font-size:clamp(40px,4.4vw,66px);letter-spacing:-.045em;line-height:.98;margin:18px 0 22px}
.qh h2 em,.qh-grande h3 em{font:italic 400 1.12em/1 "Serif",Georgia,serif;letter-spacing:-.01em;color:#5b21f5}
.qh-cabeza p{color:var(--tinta-atenuada);font-size:16px;max-width:27rem;margin-bottom:26px}
.boton.negro{background:#0c0c10;color:#fff}
.boton.negro:hover{background:#26262e}
.qh-ir{width:38px;height:38px;border-radius:50%;border:1px solid rgb(12 12 16 / .25);display:grid;place-items:center;flex:none;transition:background .3s,border-color .3s,color .3s;position:relative;z-index:2;background:#fff}
.qh-ir svg{width:15px;height:15px}
.qh-num{font:500 12px/1 var(--mono);color:var(--tinta-atenuada)}
/* tarjeta grande oscura */
.qh-grande{position:relative;flex:1;min-height:360px;border-radius:20px;overflow:hidden;background:#050507;color:#fff;padding:30px;display:flex;flex-direction:column;justify-content:flex-end;gap:12px;
  box-shadow:0 30px 60px -30px rgb(40 10 120 / .5)}
.qh-grande img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;transition:transform 1.2s var(--suave)}
.qh-grande::after{content:"";position:absolute;inset:0;background:linear-gradient(90deg,rgb(5 5 7 / .85) 25%,rgb(5 5 7 / 0) 70%)}
.qh-grande > :not(img){position:relative;z-index:2}
.qh-grande .qh-num{color:#c4c3cd;position:absolute;top:30px;left:30px;font-size:15px}
.qh-grande .qh-etq{font:500 12px/1 var(--mono);letter-spacing:.2em;text-transform:uppercase;color:var(--acento);margin-top:auto}
.qh-grande h3{font-size:clamp(30px,3vw,44px);letter-spacing:-.04em;line-height:1.05;color:#fff}
.qh-grande h3 em{color:#9d7bff}
.qh-grande p{color:#c4c3cd;max-width:24rem;font-size:15px}
.qh-grande .qh-ir{border-color:rgb(255 255 255 / .5);background:transparent;margin-top:10px}
.qh-grande:hover img{transform:scale(1.05)}
.qh-grande:hover .qh-ir{background:#fff;color:#000}
/* las siete blancas: texto y dibujo en columnas propias, nunca se pisan */
.qh-der{display:grid;grid-template-columns:repeat(6,minmax(0,1fr));grid-auto-rows:minmax(220px,auto);gap:14px}
.qh-pieza{position:relative;overflow:hidden;border-radius:18px;background:#fff;border:1px solid rgb(12 12 16 / .06);
  box-shadow:0 18px 40px -28px rgb(40 10 120 / .35);padding:22px;display:grid;column-gap:10px;
  transition:transform .5s var(--suave),box-shadow .5s}
.qh-pieza h3{font-size:clamp(19px,1.6vw,23px);letter-spacing:-.035em;line-height:1.1;margin:12px 0 8px}
.qh-pieza p{font-size:13.5px;line-height:1.5;color:var(--tinta-atenuada)}
.qh-pieza .qh-ir{align-self:end;margin-top:16px}
.qh-img{filter:drop-shadow(0 18px 24px rgb(60 20 160 / .18));transition:transform .9s var(--suave);pointer-events:none}
.qh-pieza.media{grid-column:span 3;grid-template-columns:minmax(0,1fr) 50%;grid-template-rows:auto auto auto 1fr}
.qh-pieza.media > :not(.qh-img){grid-column:1}
.qh-pieza.media .qh-img{grid-column:2;grid-row:1 / -1;width:calc(100% + 22px);height:calc(100% + 44px);margin:-22px -22px -22px 0;object-fit:contain;object-position:50% center;transform:scale(1.32)}
.qh-pieza.tercio{grid-column:span 2;grid-template-columns:auto minmax(0,1fr);grid-template-rows:auto auto auto 1fr}
.qh-pieza.tercio > .qh-num,.qh-pieza.tercio > h3,.qh-pieza.tercio > p{grid-column:1 / -1}
.qh-pieza.tercio .qh-ir{grid-column:1;grid-row:4}
.qh-pieza.tercio .qh-img{grid-column:2;grid-row:4;justify-self:end;align-self:end;width:100%;max-width:200px;height:150px;object-fit:contain;object-position:right bottom;margin:-20px -8px -10px 0;transform:scale(1.15);transform-origin:right bottom}
.qh-pieza:hover{transform:translateY(-4px);box-shadow:0 26px 50px -26px rgb(40 10 120 / .45)}
.qh-pieza.media:hover .qh-img{transform:scale(1.4)}
.qh-pieza.tercio:hover .qh-img{transform:scale(1.22)}
.qh-pieza:hover .qh-ir{background:#0c0c10;border-color:#0c0c10;color:#fff}
@media (max-width:1180px){
  .qh-rejilla{grid-template-columns:1fr}
  .qh-grande{min-height:380px}
}
@media (max-width:640px){
  .qh-der{grid-template-columns:1fr;grid-auto-rows:auto;gap:10px}
  .qh-pieza.media,.qh-pieza.tercio{grid-column:auto;min-height:170px;padding:18px;grid-template-columns:minmax(0,1fr) 40%;grid-template-rows:auto auto auto 1fr}
  .qh-pieza.tercio > .qh-num,.qh-pieza.tercio > h3,.qh-pieza.tercio > p{grid-column:1}
  .qh-pieza.tercio .qh-ir{grid-column:1;grid-row:4}
  .qh-pieza.media .qh-img,.qh-pieza.tercio .qh-img,.qh-pieza.media .qh-img[src*="b-seo"]{grid-column:2;grid-row:1 / -1;width:100%;max-width:none;height:100%;max-height:170px;margin:0;align-self:center;justify-self:end;object-fit:contain;object-position:center;transform:none!important}
  .qh-pieza h3{font-size:19px}
  .qh-grande{padding:22px;min-height:340px}
}

/* ---------- 6 · cifras (contador) ---------- */
.cifras{padding:0}
.cifras [data-lui="cifras"]{display:grid;grid-template-columns:repeat(4,1fr);border-block:1px solid var(--linea)}
.cifras [data-lui="cifras"] > div{padding:44px 28px;border-left:1px solid var(--linea);display:flex;flex-direction:column;gap:12px}
.cifras [data-lui="cifras"] > div:first-child{border-left:0}
.cifras .lui-num{font:700 clamp(48px,6vw,84px)/1 var(--titular);letter-spacing:-.04em}
.cifras > .env > div > div:first-child .lui-num{color:var(--acento)}
.cifras .lui-eti{font:500 12px/1.4 var(--mono);letter-spacing:.1em;text-transform:uppercase;color:var(--atenuado)}

/* ---------- 7 · caso (sticky-relato con paneles estilo Cabina) ---------- */
.panel{border:1px solid var(--linea);border-radius:var(--radio);background:var(--superficie);padding:26px;width:100%}
.panel .p-cab{display:flex;justify-content:space-between;align-items:center;margin-bottom:20px}
.panel .p-cab span{font:500 11px/1 var(--mono);letter-spacing:.12em;text-transform:uppercase;color:var(--atenuado)}
.panel .p-cab b{font:500 12px/1 var(--mono);color:#4ade80;background:rgb(74 222 128 / .1);padding:6px 9px;border-radius:999px}
.panel .grande{font:700 clamp(54px,6vw,78px)/1 var(--titular);letter-spacing:-.04em;color:var(--acento);margin-bottom:6px}
.panel .bajo{color:var(--atenuado);font-size:14px;margin-bottom:22px}
.panel svg{width:100%;height:auto}
.barritas{display:flex;gap:4px;height:44px;align-items:stretch}
.barritas i{flex:1;border-radius:3px;background:#22c55e;opacity:.9}
.barritas i.m{background:#f59e0b}
.ind{margin-top:16px}
.ind .f{display:flex;justify-content:space-between;font-size:14px;color:var(--atenuado);margin-bottom:8px}
.ind .f b{font:700 22px/1 var(--titular);color:var(--texto)}
.ind .barra{height:6px;border-radius:9px;background:var(--linea)}
.ind .barra i{display:block;height:100%;border-radius:9px;background:var(--acento);width:var(--w)}
[data-lui="relato"] h3{font-size:clamp(26px,2.6vw,36px);letter-spacing:-.03em;margin:14px 0 14px}
[data-lui="relato"] p{color:var(--atenuado);font-size:17px;max-width:30rem}
[data-lui="relato"] .rotulo{font-size:11px}

/* ---------- 8 · cómo trabajamos (linea-tiempo sobre papel) ---------- */
.proceso{display:grid;grid-template-columns:1fr 1.1fr;gap:64px;align-items:start}
.proceso .fijo{position:sticky;top:120px}
.proceso h2{font-size:clamp(38px,5vw,66px);margin:20px 0 22px}
.proceso .fijo p{color:var(--tinta-atenuada);font-size:17px;max-width:26rem;margin-bottom:30px}
[data-lui="linea"] h3{font-size:24px;letter-spacing:-.02em;margin:8px 0 8px}
[data-lui="linea"] p{color:var(--tinta-atenuada)}
#proceso [data-lui="linea"]{background:rgb(255 255 255 / .72);backdrop-filter:blur(10px);border-radius:var(--radio);padding:34px 34px 34px 18px;border:1px solid rgb(12 12 16 / .08)}
.clara [data-lui="linea"] .lui-cuando{color:var(--acento-texto);font-family:var(--mono);font-size:12px;letter-spacing:.12em;text-transform:uppercase}

/* ---------- 10 · diary ---------- */
.diary{display:grid;grid-template-columns:1fr 1.25fr;gap:64px;align-items:start}
.diary h2{font-size:clamp(38px,5vw,66px);margin:20px 0 22px}
.diary .intro p{color:var(--atenuado);font-size:17px;max-width:26rem;margin-bottom:30px}
.entradas{border-top:1px solid var(--linea)}
.entrada{display:grid;grid-template-columns:90px 1fr 120px;gap:22px;align-items:center;padding:22px 0;border-bottom:1px solid var(--linea);transition:padding .4s var(--suave)}
.entrada:hover{padding-left:12px}
.entrada time{font:500 12px/1.4 var(--mono);letter-spacing:.1em;color:var(--atenuado);text-transform:uppercase}
.entrada time b{display:block;font:700 34px/1 var(--titular);letter-spacing:-.03em;color:var(--texto)}
.entrada .etq{font:500 11px/1 var(--mono);letter-spacing:.12em;color:var(--acento)}
.entrada h3{font-size:20px;letter-spacing:-.02em;line-height:1.25;margin-top:8px}
.entrada img{width:120px;height:80px;object-fit:cover;border-radius:10px;filter:grayscale(.3)}

/* ---------- 11 · cierre sobre las cintas de cristal ---------- */
.cierre{position:relative;overflow:hidden;isolation:isolate;padding:clamp(110px,12vw,170px) 0 clamp(260px,26vw,380px);text-align:center;border-top:1px solid var(--linea)}
.cierre .fondo{position:absolute;inset:0;z-index:-1}
.cierre .fondo video{width:100%;height:100%;object-fit:cover;object-position:50% 85%;background:#000}
.cierre .fondo::after{content:"";position:absolute;inset:0;background:linear-gradient(180deg,#000 0,rgb(0 0 0 / .85) 35%,rgb(0 0 0 / .1) 75%,rgb(0 0 0 / .5))}
.cierre h2{font-size:clamp(42px,6.6vw,96px);max-width:13ch;margin:24px auto 24px}
.cierre h2 em{font-style:normal;color:var(--acento)}
.cierre p{color:#c4c3cd;font-size:18px;max-width:32rem;margin:0 auto 40px}
.cierre .acciones{display:flex;justify-content:center;flex-wrap:wrap;gap:12px}
[data-lui="bordelux"].envoltura{--lui-grosor:1.5px;--lui-fondo:#000;border-radius:999px;display:inline-flex}
[data-lui="bordelux"].envoltura .boton.primario{box-shadow:none}
.cierre .lema{position:absolute;left:0;right:0;bottom:clamp(40px,5vw,70px);font:500 12px/1 var(--mono);letter-spacing:.3em;text-transform:uppercase;color:rgb(255 255 255 / .75)}

/* ---------- pie ---------- */
.pie{padding:80px 0 30px;background:#000;border-top:1px solid var(--linea)}
.pie .rejilla{display:grid;grid-template-columns:1.4fr 1fr 1fr 1fr;gap:40px}
.pie .marca-pie img{height:34px;width:auto;margin-bottom:20px}
.pie .marca-pie p{color:var(--atenuado);font-size:15px;max-width:22rem}
.pie h3{font:500 11px/1 var(--mono);letter-spacing:.14em;text-transform:uppercase;color:var(--acento);margin-bottom:18px}
.pie ul{list-style:none;margin:0;padding:0;display:grid;gap:10px;font-size:15px;color:#c4c3cd}
.pie ul a:hover{color:#fff}
.pie .legal{display:flex;justify-content:space-between;flex-wrap:wrap;gap:12px;margin-top:64px;padding-top:24px;border-top:1px solid var(--linea);font:500 12px/1 var(--mono);color:var(--atenuado);letter-spacing:.08em}
.marca-gigante{display:block;width:100%;height:auto;margin-top:56px;opacity:.07}

/* ---------- responsive ---------- */
@media (max-width:1080px){
      .servicios{grid-template-columns:repeat(2,1fr)}
  .cabeza,.proceso,.diary{grid-template-columns:1fr}
  .pie .rejilla{grid-template-columns:1fr 1fr}
  .proceso .fijo{position:static}
  .cifras [data-lui="cifras"]{grid-template-columns:repeat(2,1fr)}
  .cifras [data-lui="cifras"] > div:nth-child(3){border-left:0}
  .cifras [data-lui="cifras"] > div:nth-child(n+3){border-top:1px solid var(--linea)}
}
@media (max-width:640px){
  .cab .lui-logo img{height:24px}
    .hero{padding-top:110px}
  .hero .cinta video{object-position:80% 50%;opacity:.5}
  .hero .cinta::after{background:linear-gradient(0deg,#000 20%,rgb(0 0 0 / .4) 70%,rgb(0 0 0 / .2))}
  .servicios{grid-template-columns:1fr}
  .servicio{min-height:360px}
  .marcas .env{flex-direction:column;align-items:flex-start;gap:18px}
  .marcas [data-lui="carrusel"]{width:100%}
  .entrada{grid-template-columns:64px 1fr}
  .entrada img{display:none}
  .cifras [data-lui="cifras"] > div{padding:30px 18px}
  /* hero compacto: sin hueco negro debajo */
  .hero{min-height:auto;padding:120px 0 64px}
  .hero h1{font-size:clamp(40px,11vw,56px)}
  .hero .estado{margin-top:40px;gap:8px 18px}
  /* servicios en fila: objeto pequeño a la izquierda, texto a la derecha */
  .servicio{min-height:0;display:grid;grid-template-columns:92px 1fr;grid-template-rows:auto auto;column-gap:16px;padding:18px 18px 20px;align-items:start}
  .servicio .num{display:none}
  .servicio .ir{top:16px;right:16px;width:30px;height:30px}
  .servicio .objeto{grid-row:1 / span 2;margin:0;width:92px;height:92px}
  .servicio .objeto img{width:92px}
  .servicio h3{font-size:19px;margin:6px 34px 6px 0}
  .servicio p{font-size:14px;grid-column:2}
  .marquesina{padding:18px 0}
  /* bento: piezas a la medida de su texto */
  [data-lui~="bento"]{grid-auto-rows:auto}
  [data-lui~="bento"] > *{padding:20px}
  [data-lui="bento"] .etq{margin-bottom:14px}
  .pieza-grande{min-height:300px}
  /* línea de tiempo: que los puntos no se corten */
  #proceso [data-lui="linea"]{padding:26px 20px 26px 30px}
  .proceso{gap:36px}
  .cierre{padding:96px 0 200px}
  .pie .rejilla{grid-template-columns:1fr 1fr;gap:32px 20px}
  .pie .marca-pie{grid-column:1 / -1}
}

@media (prefers-reduced-motion:reduce){
  html{scroll-behavior:auto}
  .marquesina .pista{animation:none}
  .servicio,.servicio .objeto img,.boton,.boton svg,.entrada{transition:none}
}


/* SEO: el objeto llega al borde de la imagen, se encoge para que no se salga */
.qh-pieza.media .qh-img[src*="b-seo"]{transform:scale(1.05) translateX(-8%)}
.qh-pieza.media:hover .qh-img[src*="b-seo"]{transform:scale(1.1) translateX(-8%)}

/* =========== calcos de las referencias de Ruben: caso, proceso y diary =========== */
.caso{position:relative;overflow:hidden;isolation:isolate;padding:40px 0 clamp(80px,9vw,120px);background:#000}
.caso-fondo{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;object-position:right center;z-index:-1;opacity:.9}
.cifras4{display:grid;grid-template-columns:repeat(4,1fr);border-bottom:1px solid var(--linea);margin-bottom:24px}
.cifras4 > div{display:flex;flex-direction:column;align-items:center;gap:10px;padding:26px 10px 30px;border-left:1px solid var(--linea)}
.cifras4 > div:first-child{border-left:0}
.cifras4 .lui-num{font:700 clamp(46px,5.4vw,78px)/1 var(--titular);letter-spacing:-.045em;color:#fff}
.cifras4 .lui-num.v{color:#9d7bff}
.cifras4 .lui-eti{font:500 11px/1.3 var(--mono);letter-spacing:.24em;text-transform:uppercase;color:#c4c3cd;text-align:center}
.fila{display:grid;grid-template-columns:minmax(0,.82fr) minmax(0,1.18fr);gap:40px;align-items:center;padding:22px 0;border-bottom:1px solid var(--linea)}
.fila:last-child{border-bottom:0}
.fila-txt{display:grid;grid-template-columns:96px 1fr;column-gap:4px}
.fila-txt > :not(.fila-num){grid-column:2}
.fila-num{grid-row:1 / span 2;display:flex;align-items:center;gap:14px;align-self:start;margin-top:-2px}
.fila-num b{font:400 18px/1 var(--mono);color:#9d7bff;letter-spacing:.08em}
.fila-num i{width:32px;height:1px;background:#3a3a46}
.fila-etq{font:500 11px/1 var(--mono);letter-spacing:.24em;text-transform:uppercase;color:#a9a8b3;display:flex;align-items:center;gap:8px}
.fila-etq::before{content:"";width:4px;height:4px;border-radius:50%;background:currentColor}
.fila h3{font-size:clamp(28px,2.6vw,38px);letter-spacing:-.035em;line-height:1.08;margin:16px 0 14px;color:#fff}
.fila h3 em,.intro2 h2 em{font:italic 400 1.08em/1 "Serif",Georgia,serif;letter-spacing:-.01em;color:#8f63ff}
.fila p{color:#bdbcc6;font-size:15px;line-height:1.6;max-width:25rem;margin-bottom:22px}
.boton.linea{min-height:40px;padding:0 18px;font-size:14px;border:1px solid #4a4a55;color:#fff;justify-self:start}
.boton.linea svg{width:12px;height:12px}
.boton.linea:hover{border-color:#9d7bff}
.panel2{display:grid;grid-template-columns:minmax(0,1.15fr) minmax(0,.85fr);min-height:270px;border:1px solid #23232c;border-radius:18px;
  background:linear-gradient(180deg,rgb(20 19 28 / .94),rgb(10 10 14 / .94));overflow:hidden}
.panel2 > *{padding:24px}
.panel2 > :first-child{border-right:1px solid #23232c}
.buscador{display:flex;flex-direction:column;gap:12px}
.g-barra{display:flex;align-items:center;gap:14px;margin-bottom:4px}
.g-logo{font:600 22px/1 "Inter",sans-serif;letter-spacing:-.02em}
.g-caja{flex:1;display:flex;justify-content:space-between;align-items:center;border:1px solid #3a3a46;border-radius:999px;padding:9px 14px;font-size:13px;color:#e8e7ee}
.g-caja svg{width:15px;height:15px;color:#bdbcc6}
.g-res{display:flex;gap:12px;align-items:center;padding:10px;border-radius:12px}
.g-res.activo{background:#1d1b2a}
.g-res:not(.activo){opacity:.35}
.g-res img{width:84px;height:58px;object-fit:cover;border-radius:8px}
.g-res .mini{width:84px;height:40px;border-radius:8px;background:#22222b}
.g-res > div{flex:1;display:flex;flex-direction:column;gap:7px}
.g-res i{display:block;height:7px;border-radius:9px;background:#3a3a46}
.g-res .l1{width:80%}.g-res .l2{width:60%;opacity:.6}
.estrellas{font-size:12px;color:#fbbc05;letter-spacing:.05em}
.estrellas em{font-style:normal;color:#bdbcc6;letter-spacing:0;margin-left:4px}
.dato{display:flex;flex-direction:column}
.dato-cab{display:flex;justify-content:space-between;align-items:center;margin-bottom:auto}
.dato-cab span,.dato-eti{font:500 11px/1.5 var(--mono);letter-spacing:.2em;text-transform:uppercase;color:#bdbcc6}
.dato-cab b{font:500 13px/1 var(--mono);color:#4ade80;background:rgb(74 222 128 / .1);border:1px solid rgb(74 222 128 / .2);padding:8px 12px;border-radius:999px}
.barras6{display:flex;align-items:flex-end;gap:12px;height:120px;margin-top:22px}
.barras6 i{flex:1;height:var(--h);border-radius:5px 5px 2px 2px;background:linear-gradient(180deg,#9d7bff,#5b21f5);box-shadow:0 0 18px rgb(124 77 255 / .35)}
.meses{display:flex;justify-content:space-between;margin-top:10px;font:500 10px/1 var(--mono);letter-spacing:.12em;color:#8a8a93}
.meses span{flex:1;text-align:center}
.foto{position:relative;padding:0!important}
.foto img{width:100%;height:100%;object-fit:cover}
.x6{font:800 clamp(64px,6vw,92px)/.9 var(--titular);letter-spacing:-.05em;color:#8f63ff;margin:26px 0 12px}
.barras12{display:flex;gap:6px;height:30px;margin-top:22px}
.barras12 i{flex:1;border-radius:5px;background:#7c4dff}
.barras12 i.g{background:#3a3a46}
.mapa .pin-chip{position:absolute;left:34%;top:30%;display:flex;gap:12px;align-items:center;padding:10px 16px 10px 10px;border-radius:12px;background:rgb(20 19 28 / .85);border:1px solid #3a3a46;backdrop-filter:blur(8px);font-size:12px;color:#bdbcc6}
.mapa .pin-chip span{display:flex;flex-direction:column;gap:2px}
.mapa .pin-chip span b{font-size:14px;color:#fff;font-weight:600}
.g-g{display:grid;place-items:center;width:30px;height:30px;border-radius:8px;background:#fff;color:#4285f4;font:700 16px/1 "Inter"}
.chips3{display:flex;flex-direction:column;justify-content:center;gap:12px}
.chip3{display:flex;align-items:center;gap:14px;padding:14px 16px;border-radius:12px;border:1px solid #2a2a33;background:rgb(255 255 255 / .02)}
.chip3 svg{width:22px;height:22px;color:#8f63ff;flex:none}
.chip3 div{display:flex;flex-direction:column;gap:2px}
.chip3 b{font:700 18px/1 var(--titular);color:#9d7bff;letter-spacing:-.02em}
.chip3 span{font-size:13px;color:#bdbcc6}

/* proceso y diary: negro con planeta */
.oscura-planeta{position:relative;overflow:hidden;isolation:isolate;background:#000;padding:clamp(90px,10vw,140px) 0}
.oscura-planeta .planeta{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;z-index:-1}
.diary2 .planeta{transform:scaleX(-1)}
.dos{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1.1fr);gap:48px;align-items:center}
.intro2 h2{font-size:clamp(40px,4.3vw,64px);letter-spacing:-.045em;line-height:1;margin:22px 0 22px;color:#fff}
.intro2 p{color:#bdbcc6;font-size:18px;line-height:1.5;max-width:27rem;margin-bottom:34px}
.boton.pastilla{min-height:56px;padding:0 6px 0 26px;gap:22px;font-size:16px}
.boton.pastilla .circ{width:44px;height:44px;border-radius:50%;display:grid;place-items:center}
.boton.pastilla .circ svg{width:17px;height:17px}
.boton.pastilla.blanca{background:#fff;color:#0c0c10}
.boton.pastilla.blanca .circ{background:#0c0c10;color:#fff}
.boton.pastilla.oscura{border:1px solid #3a3a46;color:#fff}
.boton.pastilla.oscura .circ{background:#8f63ff;color:#fff}
.pasos{list-style:none;margin:0;padding:0 0 0 46px;position:relative;display:grid;gap:18px}
.pasos::before{content:"";position:absolute;left:10px;top:40px;bottom:40px;width:2px;background:linear-gradient(#8f63ff,#5b21f5)}
.pasos li{position:relative;display:grid;grid-template-columns:110px 1fr 130px;align-items:center;gap:22px;padding:20px 22px;border:1px solid #2a2a36;border-radius:16px;
  background:linear-gradient(135deg,rgb(40 30 70 / .6),rgb(14 13 20 / .9))}
.pasos li::before{content:"";position:absolute;left:-44px;top:50%;width:22px;height:22px;margin-top:-11px;border-radius:50%;background:#a98bff;box-shadow:0 0 0 5px rgb(143 99 255 / .25),0 0 18px #8f63ff}
.p-num{display:flex;flex-direction:column;gap:8px;padding-right:18px;border-right:1px solid #3a3a46;align-self:stretch;justify-content:center}
.p-num b{font:400 36px/1 var(--mono);color:#a98bff}
.p-num span{font:500 10px/1 var(--mono);letter-spacing:.14em;text-transform:uppercase;color:#bdbcc6}
.p-txt h3{font-size:22px;letter-spacing:-.025em;color:#fff;margin-bottom:8px}
.p-txt p{font-size:14.5px;line-height:1.55;color:#bdbcc6}
.pasos img{width:130px;height:110px;object-fit:contain;mix-blend-mode:screen;-webkit-mask:radial-gradient(closest-side,#000 62%,transparent);mask:radial-gradient(closest-side,#000 62%,transparent)}
.entradas2{display:grid;gap:18px}
.entrada2{display:grid;grid-template-columns:92px 1fr 52px 210px;align-items:center;min-height:128px;border:1px solid #23232c;border-radius:16px;overflow:hidden;
  background:linear-gradient(180deg,rgb(20 19 28 / .92),rgb(10 10 14 / .92));transition:border-color .3s,transform .4s var(--suave)}
.entrada2:hover{border-color:#5b4a8a;transform:translateX(4px)}
.entrada2 time{padding-left:26px;font:500 13px/1 var(--mono);letter-spacing:.18em;text-transform:uppercase;color:#bdbcc6;display:flex;flex-direction:column;gap:8px}
.entrada2 time b{font:600 40px/1 var(--titular);letter-spacing:-.03em;color:#fff}
.e-txt{border-left:1px solid #3a3a46;padding:6px 20px;margin-left:8px}
.e-txt span{font:500 11px/1 var(--mono);letter-spacing:.2em;text-transform:uppercase;color:#a98bff}
.e-txt h3{font-size:18px;line-height:1.3;letter-spacing:-.02em;color:#fff;margin-top:12px}
.e-ir{width:46px;height:46px;border-radius:50%;border:1px solid #8a8a93;display:grid;place-items:center;color:#fff}
.e-ir svg{width:16px;height:16px}
.entrada2 img{width:100%;height:100%;object-fit:cover;border-radius:14px 0 0 14px;margin-left:16px}

@media (max-width:1080px){
  .fila,.dos{grid-template-columns:1fr}
  .cifras4{grid-template-columns:repeat(2,1fr)}
  .cifras4 > div:nth-child(3){border-left:0}
  .cifras4 > div:nth-child(n+3){border-top:1px solid var(--linea)}
}
@media (max-width:640px){
  .fila-txt{grid-template-columns:1fr}
  .fila-txt > :not(.fila-num){grid-column:1}
  .fila-num{grid-row:auto;margin-bottom:12px}
  .panel2{grid-template-columns:1fr}
  .panel2 > :first-child{border-right:0;border-bottom:1px solid #23232c}
  .foto{height:200px}
  .pasos{padding-left:34px}
  .pasos::before{left:6px}
  .pasos li::before{left:-36px;width:16px;height:16px;margin-top:-8px}
  .pasos li{grid-template-columns:1fr 74px;gap:12px;padding:16px}
  .p-num{flex-direction:row;align-items:baseline;border-right:0;padding:0;grid-column:1 / -1}
  .p-num b{font-size:26px}
  .pasos img{width:74px;height:74px}
  .entrada2{grid-template-columns:70px 1fr 40px;min-height:110px}
  .entrada2 img{display:none}
  .entrada2 time{padding-left:16px}
  .entrada2 time b{font-size:30px}
  .e-txt{padding:4px 12px}
  .e-txt h3{font-size:16px}
  .e-ir{width:36px;height:36px;margin-right:10px}
  .intro2 p{font-size:16px}
}

.oscura-planeta::after{content:"";position:absolute;inset:0;z-index:-1;pointer-events:none;background:linear-gradient(#000,transparent 16%,transparent 84%,#000)}

/* --- fondo continuo y más aire (Ruben: «se notan los cambios de fondo» y «todo muy comprimido») --- */
.caso,.oscura-planeta{background:#000}
.caso-fondo,.oscura-planeta .planeta{opacity:.75;
  -webkit-mask:radial-gradient(ellipse 60% 55% at 50% 50%,#000 30%,transparent 78%);mask:radial-gradient(ellipse 60% 55% at 50% 50%,#000 30%,transparent 78%)}
.caso-fondo{width:70%;left:auto;right:-10%;opacity:.6}
.oscura-planeta::after{display:none}
.caso{padding:clamp(110px,11vw,170px) 0 clamp(100px,10vw,150px)}
.cifras4{margin-bottom:clamp(60px,6vw,90px)}
.cifras4 > div{padding:44px 10px 48px}
.fila{gap:clamp(48px,5vw,90px);padding:clamp(56px,5vw,80px) 0}
.fila h3{margin:20px 0 18px}
.fila p{margin-bottom:28px}
.panel2{min-height:320px}
.panel2 > *{padding:32px}
.oscura-planeta{padding:clamp(130px,13vw,200px) 0}
.dos{gap:clamp(56px,7vw,110px)}
.intro2 h2{margin:26px 0 26px}
.intro2 p{margin-bottom:40px}
.pasos{gap:24px}
.pasos li{padding:28px 30px;gap:28px}
.entradas2{gap:24px}
.entrada2{min-height:150px}
@media (max-width:640px){
  .caso{padding:90px 0 80px}
  .fila{padding:44px 0;gap:30px}
  .panel2 > *{padding:22px}
  .oscura-planeta{padding:96px 0}
  .pasos li{padding:20px}
}

.proceso2 .dos,.diary2 .dos{grid-template-columns:minmax(0,.8fr) minmax(0,1.2fr)}
.pasos li{grid-template-columns:96px minmax(0,1fr) 104px}
.pasos img{width:104px;height:96px}
@media (max-width:1080px){.proceso2 .dos,.diary2 .dos{grid-template-columns:1fr}}

.proceso2 .dos{grid-template-columns:minmax(0,.9fr) minmax(0,1.2fr);gap:56px}
.proceso2 .intro2 h2{font-size:clamp(36px,3.6vw,52px)}
@media (max-width:1080px){.proceso2 .dos{grid-template-columns:1fr}}

/* ---------- navbar: calco de la referencia (pastilla de cristal flotante) ---------- */
.cab{--lui-fondo:transparent;background:transparent!important;box-shadow:none!important;display:block!important;padding:18px var(--lado) 0!important;height:auto!important;border:0!important}
.cab-pill{position:relative;max-width:1320px;margin:0 auto;display:flex;align-items:center;gap:22px;height:78px;padding:0 14px 0 34px;border-radius:999px;overflow:hidden;isolation:isolate;
  background:linear-gradient(180deg,rgb(22 20 32 / .82),rgb(8 8 12 / .82));border:1px solid rgb(157 123 255 / .22);
  box-shadow:inset 0 1px 0 rgb(255 255 255 / .06),0 20px 50px -20px rgb(0 0 0 / .8);backdrop-filter:blur(16px) saturate(1.3);-webkit-backdrop-filter:blur(16px) saturate(1.3)}
.cab-pill::after{content:"";position:absolute;right:0;top:0;bottom:0;width:34%;z-index:-1;background:url(../img/planeta.jpg) 95% 8%/180% auto;opacity:1;
  -webkit-mask:linear-gradient(90deg,transparent,#000 70%);mask:linear-gradient(90deg,transparent,#000 70%)}
.cab .lui-logo img{height:30px;width:auto;display:block}
.cab-nav{display:flex;gap:4px;margin-left:auto;padding:5px;border-radius:999px;border:1px solid rgb(157 123 255 / .2);background:rgb(255 255 255 / .02)}
.cab-nav a{position:relative;padding:11px 20px;border-radius:999px;font-size:15px;color:#c9c8d2;transition:color .25s,background .25s}
.cab-nav a:hover{color:#fff}
.cab-nav a.activo{color:#fff;font-weight:600;background:linear-gradient(180deg,#3b1f8f,#24135e);box-shadow:inset 0 0 0 1px rgb(157 123 255 / .45),0 0 22px -4px rgb(124 77 255 / .7)}
.cab-nav a.activo::after{content:"";position:absolute;left:50%;bottom:-9px;width:7px;height:7px;margin-left:-3.5px;border-radius:50%;background:#8f63ff;box-shadow:0 0 10px #8f63ff}
.cab-sep{width:1px;height:38px;background:rgb(255 255 255 / .14);margin:0 4px}
.cab-cta{display:inline-flex;align-items:center;gap:16px;height:52px;padding:0 5px 0 24px;border-radius:999px;font-weight:600;font-size:15.5px;color:#fff;
  background:linear-gradient(90deg,#6b2bff,#5a24e0);box-shadow:0 0 0 1px rgb(157 123 255 / .4),0 10px 30px -10px rgb(107 43 255 / .9)}
.cab-cta .circ{width:42px;height:42px;border-radius:50%;background:#14102a;display:grid;place-items:center}
.cab-cta .circ svg{width:16px;height:16px;transition:transform .3s var(--suave)}
.cab-cta:hover .circ svg{transform:translateX(3px)}
.cab-menu{width:52px;height:52px;border-radius:50%;border:1px solid rgb(255 255 255 / .16);background:rgb(10 8 20 / .55);display:grid;place-content:center;gap:5px;cursor:pointer;flex:none}
.cab-menu i{display:block;width:20px;height:1.6px;background:#fff;border-radius:2px;transition:transform .3s,opacity .3s}
.cab.abierto .cab-menu i:nth-child(1){transform:translateY(6.6px) rotate(45deg)}
.cab.abierto .cab-menu i:nth-child(2){opacity:0}
.cab.abierto .cab-menu i:nth-child(3){transform:translateY(-6.6px) rotate(-45deg)}
.menu-movil{max-width:1320px;margin:10px auto 0;display:grid;grid-template-columns:repeat(3,1fr);gap:6px;padding:10px;border-radius:24px;
  background:rgb(12 10 20 / .92);border:1px solid rgb(157 123 255 / .22);backdrop-filter:blur(16px);-webkit-backdrop-filter:blur(16px)}
.menu-movil[hidden]{display:none}
.menu-movil a{padding:14px 18px;border-radius:14px;color:#e8e7ee;font-size:15px}
.menu-movil a:hover{background:rgb(157 123 255 / .14)}
@media (max-width:1180px){ .cab-nav{display:none} .cab-sep{display:none} .cab-cta{margin-left:auto;margin-right:0} }
@media (max-width:640px){
  .cab{padding:10px 10px 0!important}
  .cab-pill{height:62px;padding:0 7px 0 18px;gap:8px}
  .cab .lui-logo img{height:22px}
  .cab-cta{height:46px;padding:0 4px 0 14px;gap:8px;font-size:13.5px}
  .cab-cta .circ{width:38px;height:38px}
  .cab-menu{width:46px;height:46px}
  .menu-movil{grid-template-columns:1fr 1fr}
}

/* navbar a la escala de la referencia */
.cab-pill{height:92px;padding:0 16px 0 44px;gap:26px;max-width:1360px}
.cab .lui-logo img{height:40px}
.cab-nav{padding:6px}
.cab-nav a{font-size:16.5px;padding:13px 26px}
.cab-cta{height:60px;font-size:17px;padding:0 6px 0 28px;gap:22px}
.cab-cta .circ{width:48px;height:48px}
.cab-menu{width:60px;height:60px}
.cab-pill::after{width:38%;background:url(../img/nav-planeta-900.jpg?v=1) 100% 46%/auto 380% no-repeat;opacity:1;-webkit-mask:linear-gradient(90deg,transparent,#000 45%);mask:linear-gradient(90deg,transparent,#000 45%)}
.hero{padding-top:170px}
@media (max-width:640px){
  .cab-pill{height:64px;padding:0 7px 0 18px;gap:8px}
  .cab .lui-logo img{height:24px}
  .cab-cta{height:48px;font-size:14px;padding:0 4px 0 16px;gap:10px}
  .cab-cta .circ{width:40px;height:40px}
  .cab-menu{width:48px;height:48px}
  .hero{padding-top:120px}
}

.cab-pill::after{background-position:100% 14%;background-size:auto 300%;filter:brightness(1.7) saturate(1.2)}

/* ---------- navbar en movimiento ---------- */
@property --ang{syntax:"<angle>";inherits:false;initial-value:0deg}
.cab-nav{position:relative}
.cab-ind{position:absolute;left:0;top:6px;bottom:6px;width:0;border-radius:999px;pointer-events:none;opacity:0;
  background:linear-gradient(180deg,#3b1f8f,#24135e);box-shadow:inset 0 0 0 1px rgb(157 123 255 / .45),0 0 22px -4px rgb(124 77 255 / .7);
  transition:transform .55s cubic-bezier(.65,0,.2,1.2),width .55s cubic-bezier(.65,0,.2,1.2),opacity .3s}
.cab-ind::after{content:"";position:absolute;left:50%;bottom:-9px;width:7px;height:7px;margin-left:-3.5px;border-radius:50%;background:#8f63ff;box-shadow:0 0 10px #8f63ff}
.cab-nav.con-ind .cab-ind{opacity:1}
.cab-nav.con-ind a.activo{background:none;box-shadow:none}
.cab-nav.con-ind a.activo::after{display:none}
.cab-nav a{z-index:1}
/* destello que recorre el borde */
.cab-pill::before{content:"";position:absolute;inset:0;border-radius:inherit;padding:1.2px;pointer-events:none;z-index:2;
  background:conic-gradient(from var(--ang),transparent 0 62%,rgb(157 123 255 / .9) 72%,#fff 75%,rgb(157 123 255 / .9) 78%,transparent 88%);
  -webkit-mask:linear-gradient(#000 0 0) content-box,linear-gradient(#000 0 0);-webkit-mask-composite:xor;mask:linear-gradient(#000 0 0) content-box exclude,linear-gradient(#000 0 0);
  animation:borde 7s linear infinite}
@keyframes borde{to{--ang:360deg}}
/* planeta que flota y entrada de la barra */
.cab-pill::after{animation:flota 10s ease-in-out infinite alternate}
@keyframes flota{from{background-position:100% 14%;transform:scale(1)}to{background-position:96% 24%;transform:scale(1.04)}}
.cab-pill{animation:baja .9s cubic-bezier(.2,.8,.2,1) both}
@keyframes baja{from{transform:translateY(-130%)}to{transform:none}}
.cab-cta{position:relative;overflow:hidden}
.cab-cta::before{content:"";position:absolute;top:0;bottom:0;left:-60%;width:40%;background:linear-gradient(100deg,transparent,rgb(255 255 255 / .35),transparent);transform:skewX(-20deg);animation:brillo 4.5s ease-in-out infinite}
@keyframes brillo{0%,70%{left:-60%}100%{left:130%}}
@media (prefers-reduced-motion:reduce){
  .cab-pill,.cab-pill::before,.cab-pill::after,.cab-cta::before{animation:none}
  .cab-ind{transition:none}
}

.cab-menu{margin-left:14px}
@media (max-width:1180px){.cab-menu{margin-left:auto}}

/* navbar centrada: logo | menú en el centro | ☰ */
.cab-pill{display:grid;grid-template-columns:1fr auto 1fr;gap:20px}
.cab-pill .lui-logo{justify-self:start}
.cab-nav{margin:0}
.cab-menu{justify-self:end;margin:0}
.cab-pill::after{width:24%}
@media (max-width:1180px){.cab-pill{grid-template-columns:1fr auto}}

.cab-pill{padding:0 18px}
.cab-pill .lui-logo{padding-left:22px}
/* planetas en movimiento: giran y se acercan muy despacio */
.oscura-planeta .planeta{animation:orbita 26s ease-in-out infinite alternate;transform-origin:30% 40%}
.diary2 .planeta{animation-name:orbita-espejo;transform-origin:70% 40%}
@keyframes orbita{from{transform:scale(1) rotate(0deg) translate(0,0)}to{transform:scale(1.12) rotate(4deg) translate(-2%,2%)}}
@keyframes orbita-espejo{from{transform:scaleX(-1) scale(1) rotate(0deg)}to{transform:scaleX(-1) scale(1.12) rotate(4deg) translate(2%,2%)}}
.cab-pill::after{animation:flota 7s ease-in-out infinite alternate}
@keyframes flota{from{background-position:100% 10%;transform:scale(1) rotate(0deg)}to{background-position:94% 28%;transform:scale(1.08) rotate(-3deg)}}
@media (prefers-reduced-motion:reduce){.oscura-planeta .planeta,.cab-pill::after{animation:none}}

/* planeta de la barra: menos ampliado para que no pierda nitidez */
.cab-pill::after{background-size:auto 210%}

/* planeta de la barra sin cortes: siempre más ancho que su caja, fundido a la izquierda, sin giro */
.cab-pill::after{width:26%;background-size:150% auto;background-repeat:no-repeat;
  -webkit-mask:linear-gradient(90deg,transparent 0,#000 55%);mask:linear-gradient(90deg,transparent 0,#000 55%);
  animation:flota2 8s ease-in-out infinite alternate}
@keyframes flota2{from{background-position:80% 18%}to{background-position:100% 32%}}
@media (prefers-reduced-motion:reduce){.cab-pill::after{animation:none}}

/* hero interactivo: profundidad + luz que sigue al cursor */
.hero .cinta video{transform:translate3d(var(--px,0),var(--py,0),0) scale(1.06);transition:filter .6s}
.hero-luz{position:absolute;inset:0;z-index:-1;pointer-events:none;opacity:0;transition:opacity .6s;mix-blend-mode:screen;
  background:radial-gradient(circle 280px at var(--mx,50%) var(--my,50%),rgb(143 99 255 / .55),rgb(107 43 255 / .18) 45%,transparent 70%)}
.hero.encima .hero-luz{opacity:1}
.hero.encima .cinta video{filter:brightness(1.15) saturate(1.15)}

/* globo 3D del hero (assets/globo.js); si no hay WebGL se queda el vídeo */
.hero .globo{position:absolute;inset:0;width:100%;height:100%;display:block;transform:translate3d(var(--px,0),var(--py,0),0) scale(1.04)}
.hero.globo-ok .cinta video{display:none}
.hero:not(.globo-ok) .globo{display:none}
.hero.globo-ok .cinta::after{background:linear-gradient(90deg,#000 18%,rgb(0 0 0 / .35) 42%,transparent 60%),linear-gradient(0deg,#000 0,transparent 22%)}
.hero.sobre-globo{cursor:grab}
@media (max-width:640px){.hero.globo-ok .cinta::after{background:linear-gradient(0deg,#000 30%,rgb(0 0 0 / .55) 60%,transparent 85%)}}

/* ---------- el espacio: fondo 3D fijo detrás de toda la página (assets/espacio.js) ---------- */
.espacio{position:fixed;inset:0;width:100vw;height:100vh;z-index:-1;display:block;pointer-events:none}
html.con-espacio body{background:#000}
html.con-espacio .marcas,html.con-espacio .seccion:not(.qh),html.con-espacio .caso,html.con-espacio .oscura-planeta,html.con-espacio .cierre,html.con-espacio .pie{background:transparent}
html.con-espacio .caso-fondo,html.con-espacio .oscura-planeta .planeta{display:none}
html.con-espacio .cierre .fondo video{mix-blend-mode:screen}
html.con-espacio .cierre .fondo::after{background:linear-gradient(180deg,transparent 0,rgb(0 0 0 / .4) 40%,transparent 80%)}

/* hero transparente: el espacio sigue por detrás sin corte */
html.con-espacio .hero{background:transparent}
html.con-espacio .hero.globo-ok .cinta::after{background:radial-gradient(ellipse 55% 60% at 22% 50%,rgb(0 0 0 / .55),transparent 75%)}
html.con-espacio .hero .grano{display:none}
@media (max-width:640px){html.con-espacio .hero.globo-ok .cinta::after{background:linear-gradient(0deg,rgb(0 0 0 / .6) 20%,transparent 70%)}}

.hero .globo{mix-blend-mode:screen}

/* sin planeta en la barra (pedido) */
.cab-pill::after{display:none!important}

/* el hero no aísla: su lienzo se funde con el espacio y no hay corte */
html.con-espacio .hero{isolation:auto}
html.con-espacio .hero .cinta{mix-blend-mode:screen}
html.con-espacio .hero .globo{mix-blend-mode:normal}

/* ===== arreglos móvil (1-oct, 03:15) ===== */
@media (max-width:640px){
  /* titular: palabra fija en móvil (la rotación se perdía y en iOS dejaba hueco) */
  .hero h1 [data-lui~="rotan"]{display:inline;padding:0;vertical-align:baseline;width:auto!important}
  .hero h1 [data-lui~="rotan"] > *{display:none}
  .hero h1 [data-lui~="rotan"] > :first-child{display:inline;opacity:1;transform:none;position:static}
  .hero{padding-top:300px!important;padding-bottom:56px}
  .hero h1{font-size:44px;line-height:1.02}
  .hero .globo{opacity:.9}
  /* servicios: objeto grande arriba, texto debajo */
  .servicio{display:flex;flex-direction:column;align-items:flex-start;padding:22px;min-height:0}
  .servicio .objeto{width:100%;height:190px;margin:0 0 6px}
  .servicio .objeto img{width:190px;height:190px}
  .servicio h3{margin:4px 40px 8px 0;font-size:22px}
  .servicio p{font-size:15px}
  /* qué hacemos: imágenes más grandes */
  .qh-pieza.media,.qh-pieza.tercio{grid-template-columns:minmax(0,1fr) 46%;min-height:200px}
  .qh-pieza.media .qh-img,.qh-pieza.tercio .qh-img,.qh-pieza.media .qh-img[src*="b-seo"]{max-height:200px}
}

/* ---------- pie de agencia ---------- */
.pie2{position:relative;padding:clamp(100px,11vw,160px) 0 28px;border-top:1px solid var(--linea)}
.pie2-top{display:flex;flex-direction:column;align-items:flex-start;gap:28px;padding-bottom:clamp(70px,8vw,110px);border-bottom:1px solid var(--linea)}
.pie2-eti{display:flex;align-items:center;gap:10px;font:500 12px/1 var(--mono);letter-spacing:.2em;text-transform:uppercase;color:#bdbcc6}
.vivo{width:8px;height:8px;border-radius:50%;background:#4ade80;box-shadow:0 0 0 0 rgb(74 222 128 / .6);animation:latido 2s infinite}
@keyframes latido{70%{box-shadow:0 0 0 10px rgb(74 222 128 / 0)}100%{box-shadow:0 0 0 0 rgb(74 222 128 / 0)}}
.pie2-top h2{font-size:clamp(48px,8vw,124px);letter-spacing:-.05em;line-height:.95;color:#fff}
.pie2-top h2 em{font:italic 400 1.05em/1 "Serif",Georgia,serif;color:#8f63ff;letter-spacing:-.02em}
.pie2-mail{display:inline-flex;align-items:center;gap:18px;font:500 clamp(22px,2.6vw,36px)/1.2 var(--titular);letter-spacing:-.02em;color:#fff;
  background:linear-gradient(#8f63ff,#8f63ff) left bottom/0 2px no-repeat;padding-bottom:8px;transition:background-size .6s var(--suave)}
.pie2-mail:hover{background-size:100% 2px}
.pie2-mail .circ{width:52px;height:52px;border-radius:50%;background:#6b2bff;display:grid;place-items:center;transition:transform .5s var(--suave)}
.pie2-mail .circ svg{width:18px;height:18px}
.pie2-mail:hover .circ{transform:rotate(-45deg)}
.pie2-cols{display:grid;grid-template-columns:1.5fr 1fr 1fr 1fr;gap:40px;padding:64px 0}
.pie2-marca img{height:32px;width:auto;margin-bottom:22px}
.pie2-marca p{color:#bdbcc6;font-size:15px;max-width:22rem;line-height:1.6}
.pie2 h3{font:500 11px/1 var(--mono);letter-spacing:.2em;text-transform:uppercase;color:#8f63ff;margin-bottom:22px}
.pie2 nav{display:flex;flex-direction:column;gap:12px}
.pie2 nav a{color:#e8e7ee;font-size:15px;width:max-content;transition:color .25s,transform .35s var(--suave)}
.pie2 nav a:hover{color:#a98bff;transform:translateX(4px)}
.pie2-hora b{font:600 34px/1 var(--titular);color:#fff;letter-spacing:-.03em;margin-right:8px}
.pie2-hora{color:#bdbcc6;font-size:14px;margin-bottom:14px}
.pie2-dir{color:#8a8a93;font-size:14px;line-height:1.6}
.pie2-bajo{display:flex;justify-content:space-between;align-items:center;gap:16px;padding-top:24px;border-top:1px solid var(--linea);font:500 12px/1 var(--mono);letter-spacing:.1em;text-transform:uppercase;color:#8a8a93}
.pie2-arriba{width:46px;height:46px;border-radius:50%;border:1px solid #3a3a46;display:grid;place-items:center;color:#fff;transition:background .3s,border-color .3s}
.pie2-arriba svg{width:16px;height:16px}
.pie2-arriba:hover{background:#6b2bff;border-color:#6b2bff}
@media (max-width:900px){.pie2-cols{grid-template-columns:1fr 1fr}.pie2-marca{grid-column:1 / -1}}
@media (max-width:640px){
  .pie2-top h2{font-size:52px}
  .pie2-mail{font-size:20px;gap:12px}.pie2-mail .circ{width:42px;height:42px}
  .pie2-cols{gap:36px 20px;padding:48px 0}
  .pie2-bajo{flex-wrap:wrap}.pie2-bajo span:nth-child(2){display:none}
}
@media (prefers-reduced-motion:reduce){.vivo{animation:none}}

/* palabras destacadas: degradado espacial en vez de la cursiva con serifa */
.qh h2 em,.qh-grande h3 em,.fila h3 em,.intro2 h2 em,.pie2-top h2 em{
  font:inherit;font-style:normal;letter-spacing:inherit;
  background:linear-gradient(100deg,#c9b8ff 0%,#9d7bff 30%,#6b2bff 55%,#b49cff 75%,#e9e2ff 85%,#8f63ff 100%) 0 0/250% 100%;
  -webkit-background-clip:text;background-clip:text;color:transparent;
  filter:drop-shadow(0 0 18px rgb(124 77 255 / .35));animation:estela 7s ease-in-out infinite}
.qh h2 em{background-image:linear-gradient(100deg,#5b21f5,#7c4dff 40%,#3b1fb0 70%,#6b2bff);filter:none}
@keyframes estela{0%,100%{background-position:0 0}50%{background-position:100% 0}}
@media (prefers-reduced-motion:reduce){.qh h2 em,.qh-grande h3 em,.fila h3 em,.intro2 h2 em,.pie2-top h2 em{animation:none}}

/* ---------- diary editorial ---------- */
.diary3-cab{display:grid;grid-template-columns:1fr 1fr;gap:40px;align-items:end;margin-bottom:56px}
.diary3 h2{font-size:clamp(42px,5vw,72px);letter-spacing:-.045em;line-height:1;margin-top:22px;color:#fff}
.diary3 h2 em{font:inherit;font-style:normal;background:linear-gradient(100deg,#c9b8ff,#9d7bff 30%,#6b2bff 55%,#b49cff 75%,#8f63ff) 0 0/250% 100%;-webkit-background-clip:text;background-clip:text;color:transparent;animation:estela 7s ease-in-out infinite}
.diary3-der{display:flex;flex-direction:column;align-items:flex-start;gap:26px;justify-self:end;max-width:28rem}
.diary3-der p{color:#bdbcc6;font-size:17px;line-height:1.55}
.diary3-rejilla{display:grid;grid-template-columns:1.25fr 1fr;grid-template-rows:1fr 1fr;gap:20px;min-height:560px}
.nota{position:relative;display:grid;grid-template-columns:44% 1fr;overflow:hidden;border-radius:20px;border:1px solid #23232c;
  background:linear-gradient(180deg,rgb(20 19 30 / .85),rgb(9 9 14 / .85));backdrop-filter:blur(8px);-webkit-backdrop-filter:blur(8px);
  transition:border-color .4s,transform .5s var(--suave),box-shadow .5s}
.nota:hover{border-color:rgb(157 123 255 / .5);transform:translateY(-4px);box-shadow:0 30px 60px -30px rgb(107 43 255 / .6)}
.nota-img{position:relative;overflow:hidden}
.nota-img img{width:100%;height:100%;object-fit:cover;transition:transform 1s var(--suave)}
.nota:hover .nota-img img{transform:scale(1.07)}
.nota-txt{display:flex;flex-direction:column;gap:14px;padding:26px 70px 26px 26px;justify-content:center}
.nota-meta{display:flex;gap:12px;align-items:center;font:500 11px/1 var(--mono);letter-spacing:.16em;text-transform:uppercase}
.nota-meta time{color:#bdbcc6;padding:7px 10px;border:1px solid #3a3a46;border-radius:999px}
.nota-meta b{color:#a98bff;font-weight:500}
.nota h3{font-size:clamp(19px,1.6vw,22px);line-height:1.25;letter-spacing:-.025em;color:#fff}
.nota p{color:#bdbcc6;font-size:15px;line-height:1.55;max-width:30rem}
.nota-ir{position:absolute;right:20px;bottom:20px;width:44px;height:44px;border-radius:50%;border:1px solid #4a4a55;display:grid;place-items:center;color:#fff;transition:background .3s,border-color .3s,transform .4s var(--suave)}
.nota-ir svg{width:16px;height:16px}
.nota:hover .nota-ir{background:#6b2bff;border-color:#6b2bff;transform:rotate(-45deg)}
.nota.grande{grid-row:1 / span 2;display:block}
.nota.grande .nota-img{position:absolute;inset:0}
.nota.grande .nota-img::after{content:"";position:absolute;inset:0;background:linear-gradient(0deg,#07060c 8%,rgb(7 6 12 / .55) 45%,transparent 75%)}
.nota.grande .nota-txt{position:absolute;left:0;right:0;bottom:0;padding:34px 90px 34px 34px}
.nota.grande h3{font-size:clamp(26px,2.4vw,34px)}
.nota.grande .nota-ir{width:52px;height:52px;right:28px;bottom:30px}
@media (max-width:1080px){.diary3-cab{grid-template-columns:1fr}.diary3-der{justify-self:start}.diary3-rejilla{grid-template-columns:1fr;grid-template-rows:none;min-height:0}.nota.grande{grid-row:auto;min-height:420px}}
@media (max-width:640px){
  .diary3-cab{margin-bottom:36px;gap:24px}
  .nota{grid-template-columns:1fr}
  .nota-img{height:190px}
  .nota-txt{padding:20px 70px 22px 20px}
  .nota.grande{min-height:440px}
  .nota.grande .nota-txt{padding:24px 80px 24px 22px}
  .nota.grande h3{font-size:24px}
}
@media (prefers-reduced-motion:reduce){.diary3 h2 em{animation:none}}

.nota-meta time{white-space:nowrap}
.nota-meta{flex-wrap:wrap}

/* ---------- caso estilo planeta ---------- */
.mapa-vivo{position:relative;min-height:300px;background:radial-gradient(circle at 50% 60%,rgb(107 43 255 / .18),transparent 65%)}
.mapa-vivo .mapa3d{position:absolute;inset:0;width:100%;height:100%;display:block}
.mapa-vivo .pin-chip{left:auto;right:18px;top:18px;z-index:2}
.caso-cab{text-align:center;margin:0 auto clamp(30px,4vw,50px)}
.caso-cab h2{font-size:clamp(40px,5vw,72px);letter-spacing:-.045em;line-height:1;margin-top:20px;color:#fff}
.caso-cab h2 em{font:inherit;font-style:normal;background:linear-gradient(100deg,#c9b8ff,#9d7bff 30%,#6b2bff 55%,#b49cff 75%,#8f63ff) 0 0/250% 100%;-webkit-background-clip:text;background-clip:text;color:transparent;animation:estela 7s ease-in-out infinite}
/* cifras en órbita */
.cifras4{border:0;gap:18px;margin-bottom:clamp(70px,7vw,110px)}
.cifras4 > div{position:relative;border:0!important;aspect-ratio:1;justify-content:center;padding:0;border-radius:50%;
  background:radial-gradient(circle at 35% 30%,rgb(143 99 255 / .22),rgb(20 12 50 / .55) 55%,rgb(5 4 12 / .2) 72%);box-shadow:inset 0 0 0 1px rgb(157 123 255 / .25),0 0 60px -20px rgb(107 43 255 / .6)}
.cifras4 > div::before{content:"";position:absolute;inset:-6% -18%;border-radius:50%;border:1px solid rgb(169 139 255 / .35);transform:rotate(-18deg) scaleY(.32);pointer-events:none}
.cifras4 > div::after{content:"";position:absolute;width:7px;height:7px;border-radius:50%;background:#e6dcff;box-shadow:0 0 10px #a98bff;top:50%;left:-14%;offset-path:ellipse(68% 16% at 50% 50%);animation:orbita-sat 9s linear infinite}
.cifras4 > div:nth-child(2)::after{animation-duration:12s;animation-direction:reverse}
.cifras4 > div:nth-child(3)::after{animation-duration:10s}
.cifras4 > div:nth-child(4)::after{animation-duration:14s;animation-direction:reverse}
@keyframes orbita-sat{to{offset-distance:100%}}
.cifras4 .lui-num{font-size:clamp(40px,4.4vw,64px)}
/* números de fila como planetitas con anillo */
.fila-num b{position:relative;display:grid;place-items:center;width:48px;height:48px;border-radius:50%;font-size:15px;color:#fff;
  background:radial-gradient(circle at 35% 30%,#8f63ff,#3b1f8f 55%,#140a30);box-shadow:0 0 24px -4px rgb(124 77 255 / .8)}
.fila-num b::before{content:"";position:absolute;inset:16px -12px;border-radius:50%;border:1.5px solid rgb(201 184 255 / .55);transform:rotate(-20deg);pointer-events:none}
.fila-txt{grid-template-columns:96px 1fr}
.panel2{border-color:rgb(157 123 255 / .18);box-shadow:0 30px 80px -40px rgb(107 43 255 / .5)}
@media (max-width:640px){
  .cifras4{grid-template-columns:1fr 1fr;gap:26px 14px}
  .cifras4 > div:nth-child(n+3){border-top:0}
  .mapa-vivo{min-height:280px}
}
@media (prefers-reduced-motion:reduce){.cifras4 > div::after,.caso-cab h2 em{animation:none}}

/* mapa del caso: imagen reconocible, centrada en Andalucía */
.mapa-img{position:relative;background:#050310}
.mapa-img img{width:100%;height:100%;object-fit:cover;object-position:50% 45%}
.mapa-img .pin-chip{left:auto;right:16px;top:16px;z-index:2}

/* iconos del proceso más grandes */
.pasos li{grid-template-columns:96px minmax(0,1fr) 150px}
.pasos img{width:150px;height:130px;transform:scale(1.45);-webkit-mask:radial-gradient(closest-side,#000 75%,transparent);mask:radial-gradient(closest-side,#000 75%,transparent)}
@media (max-width:640px){.pasos li{grid-template-columns:1fr 96px}.pasos img{width:96px;height:96px;transform:scale(1.35)}}

/* mapa: proporción fija + pin propio sobre Marbella */
.mapa-img{display:flex;align-items:center;justify-content:center;overflow:hidden}
.mapa-lienzo{position:relative;display:block;width:118%;aspect-ratio:1100/733;margin-left:-4%}
.mapa-lienzo img{position:absolute;inset:0;width:100%;height:100%;object-fit:contain;filter:brightness(1.9) contrast(1.1)}
.mapa-pin{position:absolute;left:var(--x);top:var(--y);width:0;height:0}
.mapa-pin b{position:absolute;left:-13px;top:-36px;width:26px;height:26px;border-radius:50% 50% 50% 0;transform:rotate(-45deg);
  background:radial-gradient(circle at 35% 35%,#c9b8ff,#7c4dff 55%,#4a1fc4);box-shadow:0 0 18px #8f63ff,0 0 40px rgb(124 77 255 / .6)}
.mapa-pin b::after{content:"";position:absolute;left:8px;top:8px;width:10px;height:10px;border-radius:50%;background:#140a30}
.mapa-pin i{position:absolute;left:-7px;top:-4px;width:14px;height:8px;border-radius:50%;border:1.5px solid #a98bff;animation:pulso 2.4s ease-out infinite}
.mapa-pin i:nth-child(2){animation-delay:.8s}.mapa-pin i:nth-child(3){animation-delay:1.6s}
@keyframes pulso{from{transform:scale(1);opacity:1}to{transform:scale(4.5);opacity:0}}
@media (prefers-reduced-motion:reduce){.mapa-pin i{animation:none;opacity:.6}}

.mapa-lienzo{width:165%;margin:8% 0 0 18%}
.mapa-lienzo img{filter:brightness(2.3) contrast(1.15) drop-shadow(0 0 12px rgb(124 77 255 / .35))}

.mapa-lienzo{flex:none;width:150%;margin:12% 0 0 14%}
.mapa-lienzo img{mix-blend-mode:screen}

.mapa-lienzo{width:108%;margin:6% 0 0 0}

.mapa-lienzo img{-webkit-mask:radial-gradient(ellipse 52% 50% at 50% 50%,#000 70%,transparent 100%);mask:radial-gradient(ellipse 52% 50% at 50% 50%,#000 70%,transparent 100%)}

/* diary con 2 notas: la grande y una al lado, misma altura */
.diary3-rejilla{grid-template-rows:1fr;min-height:460px}
.diary3-rejilla .nota:not(.grande){grid-template-columns:1fr;grid-template-rows:56% 1fr}

/* diary: dos tarjetas gemelas, foto arriba grande y texto abajo */
.diary3-rejilla{grid-template-columns:1fr 1fr;grid-template-rows:auto;min-height:0;gap:22px}
.diary3-rejilla .nota,.diary3-rejilla .nota.grande{grid-row:auto;display:grid;grid-template-columns:1fr;grid-template-rows:auto 1fr;min-height:0}
.diary3-rejilla .nota .nota-img,.diary3-rejilla .nota.grande .nota-img{position:relative;inset:auto;aspect-ratio:16/10;height:auto}
.diary3-rejilla .nota.grande .nota-img::after{display:none}
.diary3-rejilla .nota .nota-txt,.diary3-rejilla .nota.grande .nota-txt{position:static;padding:26px 90px 30px 28px;justify-content:flex-start}
.diary3-rejilla .nota h3,.diary3-rejilla .nota.grande h3{font-size:clamp(22px,2vw,28px)}
.diary3-rejilla .nota-ir,.diary3-rejilla .nota.grande .nota-ir{width:50px;height:50px;right:26px;bottom:28px}
@media (max-width:900px){.diary3-rejilla{grid-template-columns:1fr}}

/* ---------- easter egg: ovnis y modo defensa ---------- */
.ovnis{position:fixed;inset:0;width:100vw;height:100vh;z-index:-1;pointer-events:none}
html.modo-ovni .ovnis{z-index:80;pointer-events:auto;cursor:none;touch-action:none}
html.modo-ovni body{overflow:hidden}
html.modo-ovni main,html.modo-ovni .pie2{filter:brightness(.55) saturate(.8);transition:filter .5s}
.ovni-boton{position:fixed;right:22px;bottom:22px;z-index:85;width:54px;height:54px;border-radius:50%;display:grid;place-items:center;cursor:pointer;color:#c9b8ff;
  background:rgb(12 10 24 / .8);border:1px solid rgb(157 123 255 / .35);backdrop-filter:blur(10px);-webkit-backdrop-filter:blur(10px);
  box-shadow:0 0 24px -6px rgb(124 77 255 / .7);transition:transform .4s var(--suave),background .3s,color .3s}
.ovni-boton svg{width:28px;height:28px;animation:flotar-ovni 3s ease-in-out infinite}
.ovni-boton:hover{transform:translateY(-3px) rotate(-8deg)}
.ovni-boton.activo{background:#6b2bff;color:#fff}
@keyframes flotar-ovni{50%{transform:translateY(-3px)}}
.ovni-hud{position:fixed;left:50%;top:110px;transform:translateX(-50%);z-index:85;display:flex;align-items:baseline;gap:10px;padding:12px 22px;border-radius:999px;
  background:rgb(12 10 24 / .85);border:1px solid rgb(157 123 255 / .35);backdrop-filter:blur(10px);font:500 12px/1 var(--mono);letter-spacing:.14em;text-transform:uppercase;color:#bdbcc6;pointer-events:none}
.ovni-hud b{font:700 28px/1 var(--titular);color:#fff;letter-spacing:-.02em}
.ovni-hud em{font-style:normal;color:#8a8a93}
.ovni-hud small{margin-left:10px;color:#6e6e78;font-size:10px}
.ovni-hud.golpe b{animation:golpe .35s}
@keyframes golpe{40%{transform:scale(1.5);color:#a98bff}}
.ovni-fin{position:fixed;left:50%;top:50%;transform:translate(-50%,-50%);z-index:90;width:min(92vw,460px);padding:36px;border-radius:24px;text-align:center;
  background:linear-gradient(180deg,rgb(30 22 60 / .95),rgb(10 8 20 / .95));border:1px solid rgb(157 123 255 / .4);box-shadow:0 30px 90px -20px rgb(107 43 255 / .8)}
.ovni-fin h3{font-size:30px;letter-spacing:-.03em;color:#fff;margin:14px 0 8px}
.ovni-fin p{color:#bdbcc6}
.ovni-fin div{display:flex;gap:10px;justify-content:center;margin-top:24px;flex-wrap:wrap}
.ovni-fin[hidden],.ovni-hud[hidden]{display:none}
@media (max-width:640px){.ovni-boton{right:14px;bottom:14px;width:48px;height:48px}.ovni-hud{top:84px}}
@media (prefers-reduced-motion:reduce){.ovni-boton svg{animation:none}}

/* pantalla de victoria */
.ovni-fin{inset:0;left:0;top:0;transform:none;width:auto;padding:16px;border:0;border-radius:0;box-shadow:none;display:grid;place-items:center;
  background:radial-gradient(ellipse at 50% 45%,rgb(60 25 140 / .35),rgb(0 0 0 / .88) 65%);backdrop-filter:blur(14px) saturate(1.2);-webkit-backdrop-filter:blur(14px) saturate(1.2);animation:aparece-fin .5s ease-out}
.ovni-fin[hidden]{display:none}
@keyframes aparece-fin{from{opacity:0}}
html.ovni-ganado .ovnis{cursor:auto}
.ovni-fin-caja{position:relative;width:min(100%,520px);padding:150px 40px 40px;border-radius:28px;text-align:center;overflow:hidden;
  background:linear-gradient(180deg,#140d2e,#07060d 70%);border:1px solid rgb(157 123 255 / .3);box-shadow:0 40px 120px -30px rgb(107 43 255 / .9),inset 0 1px 0 rgb(255 255 255 / .06);
  animation:sube-fin .7s cubic-bezier(.2,.9,.2,1.1)}
@keyframes sube-fin{from{transform:translateY(40px) scale(.96);opacity:0}}
.ovni-fin-ufo{position:absolute;left:50%;top:26px;width:150px;height:110px;margin-left:-75px;animation:flotar-ovni 3s ease-in-out infinite}
.ovni-fin-ufo .cupula{position:absolute;left:50%;top:6px;width:54px;height:40px;margin-left:-27px;border-radius:54px 54px 10px 10px;
  background:radial-gradient(circle at 35% 30%,#fff,#c9b8ff 30%,rgb(124 77 255 / .6) 70%);box-shadow:0 0 30px rgb(143 99 255 / .8)}
.ovni-fin-ufo .disco{position:absolute;left:0;right:0;top:36px;height:30px;border-radius:50%;display:flex;justify-content:space-evenly;align-items:center;padding:0 18px;
  background:linear-gradient(180deg,#c9b8ff,#6b2bff 45%,#1a0a4a);box-shadow:0 0 40px rgb(107 43 255 / .9)}
.ovni-fin-ufo .disco i{width:6px;height:6px;border-radius:50%;background:#fff;box-shadow:0 0 8px #fff;animation:luz-ovni 1.2s infinite}
.ovni-fin-ufo .disco i:nth-child(2n){animation-delay:.6s}
@keyframes luz-ovni{50%{opacity:.2}}
.ovni-fin-ufo .haz{position:absolute;left:50%;top:62px;width:120px;height:90px;margin-left:-60px;clip-path:polygon(38% 0,62% 0,100% 100%,0 100%);
  background:linear-gradient(180deg,rgb(169 139 255 / .5),transparent)}
.ovni-fin-eti{font:500 11px/1 var(--mono);letter-spacing:.24em;text-transform:uppercase;color:#a98bff}
.ovni-fin-caja h3{font:700 clamp(38px,6vw,52px)/1 var(--titular);letter-spacing:-.045em;color:#fff;margin:16px 0 14px}
.ovni-fin-caja h3 em{font:inherit;font-style:normal;background:linear-gradient(100deg,#c9b8ff,#9d7bff 35%,#6b2bff 60%,#b49cff);-webkit-background-clip:text;background-clip:text;color:transparent}
.ovni-fin-txt{color:#bdbcc6;font-size:16px}
.ovni-fin-acc{display:flex;gap:10px;justify-content:center;flex-wrap:wrap;margin-top:30px}
.ovni-fin-si{display:inline-flex;align-items:center;gap:14px;height:54px;padding:0 6px 0 24px;border-radius:999px;font-weight:600;color:#fff;
  background:linear-gradient(90deg,#6b2bff,#5a24e0);box-shadow:0 0 0 1px rgb(157 123 255 / .4),0 12px 30px -10px rgb(107 43 255 / .9)}
.ovni-fin-si span{width:42px;height:42px;border-radius:50%;background:#14102a;display:grid;place-items:center}
.ovni-fin-si svg{width:16px;height:16px}
.ovni-fin-no{height:54px;padding:0 24px;border-radius:999px;font:600 15px/1 "Inter",sans-serif;color:#e8e7ee;background:transparent;border:1px solid #3a3a46;cursor:pointer;transition:border-color .3s,background .3s}
.ovni-fin-no:hover{border-color:#9d7bff;background:rgb(157 123 255 / .1)}
@media (prefers-reduced-motion:reduce){.ovni-fin,.ovni-fin-caja,.ovni-fin-ufo,.ovni-fin-ufo .disco i{animation:none}}

/* menú de juegos */
.juegos-menu{position:fixed;right:22px;bottom:88px;z-index:86;width:250px;padding:12px;border-radius:20px;background:rgb(14 11 28 / .92);border:1px solid rgb(157 123 255 / .3);
  backdrop-filter:blur(14px);-webkit-backdrop-filter:blur(14px);box-shadow:0 20px 60px -20px rgb(107 43 255 / .8);animation:sube-fin .35s cubic-bezier(.2,.9,.2,1.1)}
.juegos-menu[hidden]{display:none}
.juegos-menu p{font:500 10px/1 var(--mono);letter-spacing:.22em;text-transform:uppercase;color:#a98bff;margin:4px 6px 10px}
.juegos-menu button{display:flex;align-items:center;gap:12px;width:100%;padding:10px;border-radius:14px;border:0;background:transparent;color:#fff;text-align:left;cursor:pointer;transition:background .25s}
.juegos-menu button:hover{background:rgb(157 123 255 / .14)}
.juegos-menu b{width:40px;height:40px;border-radius:12px;display:grid;place-items:center;background:linear-gradient(135deg,#3b1f8f,#14102a);font-size:20px}
.juegos-menu strong{display:block;font:600 14px/1.2 "Inter",sans-serif}
.juegos-menu small{font-size:12px;color:#bdbcc6}

/* carrera espacial */
.carrera{position:fixed;inset:0;z-index:95;background:#000;touch-action:none;user-select:none}
.carrera[hidden]{display:none}
html.modo-carrera body{overflow:hidden}
.carrera canvas{position:absolute;inset:0;width:100%;height:100%;display:block}
.carrera-hud{position:absolute;top:26px;left:0;right:0;display:flex;justify-content:center;gap:28px;align-items:baseline;font:500 12px/1 var(--mono);letter-spacing:.16em;text-transform:uppercase;color:#8a8a93;pointer-events:none}
.carrera-hud b{color:#c9b8ff;font-weight:500}
.carrera-hud .pts{font:500 34px/1 var(--mono);color:#fff;letter-spacing:.08em}
.carrera-hud .pts.hito{animation:golpe .4s}
.carrera-x{position:absolute;top:20px;right:22px;width:46px;height:46px;border-radius:50%;border:1px solid #3a3a46;background:rgb(10 8 20 / .7);color:#fff;font-size:16px;cursor:pointer}
.carrera-msg{position:absolute;left:50%;top:40%;transform:translate(-50%,-50%);width:min(92vw,440px);padding:34px;border-radius:24px;text-align:center;
  background:linear-gradient(180deg,rgb(30 20 66 / .92),rgb(8 6 16 / .92));border:1px solid rgb(157 123 255 / .35);box-shadow:0 30px 90px -20px rgb(107 43 255 / .8);backdrop-filter:blur(10px)}
.carrera-msg[hidden]{display:none}
.carrera-msg h3{font:700 32px/1.05 var(--titular);letter-spacing:-.035em;color:#fff;margin-bottom:12px}
.carrera-msg p{color:#bdbcc6;font-size:15px;line-height:1.5}
.carrera-msg kbd{font:500 12px var(--mono);padding:3px 7px;border:1px solid #4a4a55;border-radius:6px;color:#fff}
.carrera-gran{font:800 64px/1 var(--titular)!important;letter-spacing:-.04em;color:#fff!important;margin:4px 0 12px;
  background:linear-gradient(100deg,#c9b8ff,#9d7bff 40%,#6b2bff);-webkit-background-clip:text;background-clip:text;-webkit-text-fill-color:transparent}
.carrera-gran small{font:500 14px var(--mono);-webkit-text-fill-color:#8a8a93;letter-spacing:.14em;text-transform:uppercase}
.carrera-acc{display:flex;gap:10px;justify-content:center;margin-top:24px;flex-wrap:wrap}
.carrera-go,.carrera-cta{display:inline-flex;align-items:center;gap:10px;height:50px;padding:0 24px;border-radius:999px;font:600 15px/1 "Inter",sans-serif;cursor:pointer}
.carrera-go{border:0;color:#fff;background:linear-gradient(90deg,#6b2bff,#5a24e0);box-shadow:0 10px 30px -10px rgb(107 43 255 / .9);margin-top:20px}
.carrera-acc .carrera-go{margin-top:0}
.carrera-cta{border:1px solid #4a4a55;color:#fff}

.carrera{z-index:300}
html.modo-carrera .cab,html.modo-carrera .ovni-boton{display:none}

/* pie: legal y configuración de cookies */
.pie2-bajo{flex-wrap:wrap}
.pie2-legal{display:flex;flex-wrap:wrap;gap:6px 22px;margin-left:auto;margin-right:24px}
.pie2-legal a,.pie2-cookies{font:500 12px/1 var(--mono);letter-spacing:.1em;text-transform:uppercase;color:#8a8a93;background:none;border:0;padding:0;cursor:pointer;transition:color .25s}
.pie2-legal a:hover,.pie2-cookies:hover{color:#c9b8ff}
.cookies-dlg{width:min(92vw,460px);padding:0;border:1px solid rgb(157 123 255 / .35);border-radius:22px;background:linear-gradient(180deg,#160f30,#08070e);color:#e8e7ee;box-shadow:0 30px 90px -20px rgb(107 43 255 / .8)}
.cookies-dlg::backdrop{background:rgb(0 0 0 / .7);backdrop-filter:blur(8px)}
.cookies-dlg form{padding:30px}
.cookies-dlg h3{font:700 26px/1.1 var(--titular);letter-spacing:-.03em;color:#fff;margin-bottom:12px}
.cookies-dlg p{font-size:14.5px;line-height:1.55;color:#bdbcc6;margin-bottom:20px}
.cookies-dlg p a{color:#c9b8ff;text-decoration:underline}
.cookies-op{display:flex;gap:12px;align-items:flex-start;padding:14px;border:1px solid #2a2a36;border-radius:14px;margin-bottom:10px;font-size:13.5px;color:#bdbcc6}
.cookies-op b{display:block;color:#fff;font-size:14.5px;margin-bottom:3px}
.cookies-op input{accent-color:#6b2bff;margin-top:3px}
.cookies-acc{display:flex;justify-content:flex-end;margin-top:18px}
.cookies-ok{height:46px;padding:0 24px;border-radius:999px;border:0;font:600 15px/1 "Inter",sans-serif;color:#fff;background:linear-gradient(90deg,#6b2bff,#5a24e0);cursor:pointer}
@media (max-width:640px){.pie2-legal{margin:0;order:3;width:100%}}

.pie2 .pie2-legal{flex-direction:row;align-items:center;gap:6px 22px}
.pie2 .pie2-legal a{font:500 12px/1 var(--mono);color:#8a8a93;width:auto}
.pie2 .pie2-legal a:hover{transform:none;color:#c9b8ff}

/* ---------- páginas legales ---------- */
.legal{padding:clamp(150px,14vw,200px) 0 clamp(90px,9vw,130px)}
.legal .env{max-width:900px}
.legal-cab{margin-bottom:56px;padding-bottom:40px;border-bottom:1px solid var(--linea)}
.legal-volver{display:inline-block;font:500 12px/1 var(--mono);letter-spacing:.14em;text-transform:uppercase;color:#8a8a93;margin-bottom:34px;transition:color .25s}
.legal-volver:hover{color:#c9b8ff}
.legal-cab h1{font-size:clamp(44px,7vw,88px);letter-spacing:-.05em;line-height:.98;color:#fff;margin:20px 0 30px;
  background:linear-gradient(100deg,#fff 40%,#c9b8ff 70%,#8f63ff);-webkit-background-clip:text;background-clip:text;color:transparent}
.legal-otras{display:flex;flex-wrap:wrap;gap:8px}
.legal-otras a{padding:10px 18px;border-radius:999px;border:1px solid #2f2f3a;font-size:14px;color:#c9c8d2;transition:all .25s}
.legal-otras a:hover{border-color:#8f63ff;color:#fff}
.legal-otras a[aria-current]{background:linear-gradient(180deg,#3b1f8f,#24135e);border-color:rgb(157 123 255 / .5);color:#fff}
.legal-texto{font-size:16.5px;line-height:1.75;color:#c4c3cd;padding:clamp(28px,4vw,52px);border-radius:24px;border:1px solid #23232c;
  background:linear-gradient(180deg,rgb(18 16 30 / .82),rgb(8 8 12 / .82));backdrop-filter:blur(8px);-webkit-backdrop-filter:blur(8px)}
.legal-texto > p:first-child{font:500 12px/1 var(--mono);letter-spacing:.14em;text-transform:uppercase;color:#a98bff;margin-bottom:26px}
.legal-texto h2{font-size:clamp(22px,2.4vw,28px);letter-spacing:-.03em;color:#fff;margin:52px 0 16px;scroll-margin-top:120px}
.legal-texto h2 span{font:500 .62em/1 var(--mono);color:#8f63ff;margin-right:8px;vertical-align:.25em}
.legal-texto h3{font-size:19px;color:#fff;margin:30px 0 10px}
.legal-texto p{margin-bottom:16px}
.legal-texto ul,.legal-texto ol{margin:0 0 18px;padding-left:22px}
.legal-texto li{margin-bottom:10px}
.legal-texto li::marker{color:#8f63ff}
.legal-texto strong,.legal-texto b{color:#fff;font-weight:600}
.legal-texto a{color:#c9b8ff;text-decoration:underline;text-decoration-color:rgb(201 184 255 / .35);text-underline-offset:3px}
.legal-texto a:hover{text-decoration-color:#c9b8ff}
.legal-texto dl{display:grid;grid-template-columns:170px 1fr;margin:0 0 18px;border:1px solid #2a2a36;border-radius:16px;overflow:hidden}
.legal-texto dt,.legal-texto dd{margin:0;padding:14px 18px;border-bottom:1px solid #22222c}
.legal-texto dt{font:500 11px/1.6 var(--mono);letter-spacing:.12em;text-transform:uppercase;color:#a98bff;background:rgb(157 123 255 / .06)}
.legal-texto dd{color:#e8e7ee}
.legal-texto dl > :nth-last-child(-n+2){border-bottom:0}
.legal-texto table{width:100%;border-collapse:collapse;margin:0 0 20px;font-size:15px;border:1px solid #2a2a36;border-radius:16px;overflow:hidden;display:block;overflow-x:auto}
.legal-texto th{text-align:left;font:500 11px/1.4 var(--mono);letter-spacing:.12em;text-transform:uppercase;color:#a98bff;background:rgb(157 123 255 / .08);padding:14px 18px}
.legal-texto td{padding:14px 18px;border-top:1px solid #22222c;vertical-align:top}
@media (max-width:640px){
  .legal{padding-top:120px}
  .legal-texto{font-size:15.5px;padding:22px}
  .legal-texto dl{grid-template-columns:1fr}
  .legal-texto dt{border-bottom:0;padding-bottom:4px}
  .legal-texto dd{padding-top:4px}
}

.legal-volver{display:table}

/* sin modos de fusión sobre el lienzo WebGL: en Chrome dejaban tiles negros y parpadeo; el lienzo ya es transparente */
html.con-espacio .hero .cinta,html.con-espacio .hero .globo,.hero .globo{mix-blend-mode:normal!important}
.hero .globo{will-change:auto}

/* lo oculto se queda oculto aunque un componente le ponga display:flex/grid */
[hidden]{display:none!important}

/* móvil: sin líneas grises entre secciones, el espacio fluye continuo */
@media (max-width:900px){
  .marcas,.pie2,.pie2-top,.pie2-bajo,.fila,.caso,.cifras [data-lui="cifras"],.legal-cab,.cabeza,.seccion,.oscura-planeta,.diary3,.proceso2{border-top-color:transparent!important;border-bottom-color:transparent!important}
  .fila + .fila{border-top:0!important}
}

/* menos aire entre el caso y «Cómo trabajamos» */
#caso{padding-bottom:clamp(40px,5vw,70px)}
#proceso.oscura-planeta{padding-top:clamp(60px,7vw,100px)}
@media (max-width:640px){#caso{padding-bottom:30px}#proceso.oscura-planeta{padding-top:50px}}

/* ---------- barra final del pie, rehecha ---------- */
.pie2 .pie2-bajo{display:grid;grid-template-columns:1fr auto 1fr;align-items:center;gap:20px;padding-top:28px;margin-top:8px;border-top:1px solid rgb(255 255 255 / .07);
  font:500 12px/1 "Inter",sans-serif;letter-spacing:0;text-transform:none;color:#8a8a93}
.pie2-copy{display:flex;align-items:center;gap:10px}
.pie2-copy i{width:6px;height:6px;border-radius:50%;background:#8f63ff;box-shadow:0 0 10px #8f63ff}
.pie2-copy b{color:#4a4a55;font-weight:400;margin:0 2px}
.pie2 .pie2-legal{display:flex;flex-direction:row;align-items:center;gap:0;margin:0;padding:6px;border-radius:999px;border:1px solid rgb(255 255 255 / .07);background:rgb(255 255 255 / .02)}
.pie2 .pie2-legal a{position:relative;font:500 13px/1 "Inter",sans-serif;letter-spacing:0;text-transform:none;color:#bdbcc6;padding:9px 16px;border-radius:999px;transition:color .25s,background .25s;width:auto}
.pie2 .pie2-legal a + a::before{content:"";position:absolute;left:-2px;top:50%;width:3px;height:3px;margin-top:-1.5px;border-radius:50%;background:#4a4a55}
.pie2 .pie2-legal a:hover{color:#fff;background:rgb(157 123 255 / .12);transform:none}
.pie2-der{display:flex;justify-content:flex-end;align-items:center;gap:12px}
.pie2 .pie2-cookies{display:inline-flex;align-items:center;gap:8px;height:42px;padding:0 16px;border-radius:999px;border:1px solid #2f2f3a;background:transparent;
  font:500 13px/1 "Inter",sans-serif;letter-spacing:0;text-transform:none;color:#bdbcc6;cursor:pointer;transition:border-color .25s,color .25s,background .25s}
.pie2 .pie2-cookies svg{width:16px;height:16px;color:#a98bff}
.pie2 .pie2-cookies:hover{border-color:#8f63ff;color:#fff;background:rgb(157 123 255 / .08)}
.pie2 .pie2-arriba{width:42px;height:42px}
@media (max-width:900px){
  .pie2 .pie2-bajo{grid-template-columns:1fr;justify-items:center;text-align:center;gap:18px}
  .pie2 .pie2-legal{order:-1}
  .pie2-der{justify-content:center}
  .pie2-copy{justify-content:center}
}

/* mismo arreglo en los titulares de bloque con degradado recortado al texto */
.legal-cab h1,.carrera-gran,.juegos-menu .dv-con-cab p{padding-bottom:.1em}

/* logo 3D: un poco más alto que el plano, mismo ancho visual */

/* logo en 3D sobre el PNG original (forma exacta): extrusión violeta por capas + halo */
.logo3d{perspective:600px}
.logo3d img,.logo3d-img{transform:rotateX(10deg) rotateY(-8deg);transition:transform .5s cubic-bezier(.2,.8,.2,1);
  filter:drop-shadow(.5px .7px 0 #6b45d8) drop-shadow(.5px .7px 0 #4a24b2) drop-shadow(.5px .7px 0 #30137c) drop-shadow(.5px .7px 0 #1d0a4e)
   drop-shadow(0 0 10px rgb(124 77 255 / .45))}
.logo3d:hover img{transform:rotateX(0) rotateY(0)}
.pie2-marca .logo3d-img{height:40px;width:auto;
  filter:drop-shadow(1px 1px 0 #6b45d8) drop-shadow(1px 1px 0 #4a24b2) drop-shadow(1px 1px 0 #30137c) drop-shadow(1px 1px 0 #1d0a4e)
   drop-shadow(0 0 14px rgb(124 77 255 / .45))}
@media (prefers-reduced-motion:reduce){.logo3d img{transition:none}}

/* logo oficial 3D (img/logo-oficial*.png): ya trae relieve y brillo, sin filtros encima */
.cab .lui-logo img{height:40px;width:auto;filter:none;transform:none}
.pie2-marca img{height:46px;width:auto;filter:none;transform:none}
@media (max-width:640px){.cab .lui-logo img{height:30px}}

.cab .lui-logo img{height:54px;margin:-4px 0}
@media (max-width:640px){.cab .lui-logo img{height:38px;margin:0}}

/* lema del hero (sustituye a la entradilla) */
.hero-lema{display:flex;align-items:center;gap:16px;margin:6px 0 0;font:500 clamp(18px,1.6vw,23px)/1.35 var(--titular);letter-spacing:-.015em;color:#d9d6e6}
.hero-lema::before{content:"";flex:none;width:44px;height:2px;border-radius:2px;background:linear-gradient(90deg,#6b2bff,#c9b8ff);box-shadow:0 0 12px #8f63ff}
.hero-lema em{font-style:normal;color:#b49cff}
.hero .acciones{margin-top:34px}
@media (max-width:640px){.hero-lema{font-size:17px;gap:12px}.hero-lema::before{width:28px}}

.hero-lema{display:block}
.hero-lema::before{display:inline-block;vertical-align:middle;margin:0 16px 4px 0}
@media (max-width:640px){.hero-lema::before{margin-right:12px}}

/* franja de logos a ancho completo (en monitores grandes quedaba encajada en el centro) */
.marcas .env{max-width:none;padding-inline:clamp(16px,4vw,64px)}
.marcas [data-lui="carrusel"]{--lui-hueco:clamp(48px,4vw,88px)}
.marcas .marca{font-size:clamp(18px,1.15vw,24px)}
.marcas .marca svg{width:clamp(20px,1.3vw,28px);height:clamp(20px,1.3vw,28px)}

/* ---------- hero más imponente ---------- */
@media (min-width:1500px){.hero > .env{max-width:1500px}}
.hero h1{font-size:clamp(46px,6.6vw,128px);line-height:.98;letter-spacing:-.05em;max-width:12.5ch;margin-bottom:34px}
.hero h1 [data-lui~="rotan"]{position:relative}
.hero h1 [data-lui~="rotan"]::after{content:"";position:absolute;left:0;right:.35em;bottom:.04em;height:.07em;border-radius:99px;
  background:linear-gradient(90deg,#6b2bff,#c9b8ff 60%,transparent);box-shadow:0 0 18px rgb(143 99 255 / .8);opacity:.85}
.hero-lema{font-size:clamp(18px,1.55vw,26px)}
.hero .acciones{display:flex;flex-wrap:wrap;gap:14px;margin-top:40px}
.hero .boton{min-height:58px;font-size:16px}
.hero .hero-cta{gap:18px;padding:0 6px 0 28px;background:linear-gradient(90deg,#6b2bff,#5a24e0);box-shadow:0 0 0 1px rgb(157 123 255 / .45),0 18px 44px -14px rgb(107 43 255 / .9)}
.hero .hero-cta .circ{width:46px;height:46px;border-radius:50%;background:#14102a;display:grid;place-items:center}
.hero .hero-cta .circ svg{width:17px;height:17px}
.hero .hero-cta:hover .circ svg{transform:translateX(3px)}
.hero .hero-sec{padding:0 28px;border:1px solid rgb(255 255 255 / .16);background:rgb(255 255 255 / .04);backdrop-filter:blur(10px);-webkit-backdrop-filter:blur(10px)}
.hero .hero-sec:hover{border-color:#9d7bff;background:rgb(157 123 255 / .1)}
@media (max-width:640px){
  .hero h1{font-size:44px;margin-bottom:22px}
  .hero .acciones{flex-direction:column;align-items:stretch;margin-top:28px}
  .hero .boton{justify-content:space-between}
  .hero .hero-sec{justify-content:center}
}

.hero h1{font-size:clamp(46px,5.9vw,122px);max-width:11.5ch}

/* ---------- panel del ☰: menú grande de agencia ---------- */
.menu-movil{display:grid;grid-template-columns:1.35fr 1fr;gap:18px;max-width:1360px;margin:12px auto 0;padding:18px;border-radius:28px;
  background:radial-gradient(120% 90% at 100% 0,rgb(107 43 255 / .18),transparent 55%),linear-gradient(180deg,rgb(20 16 36 / .96),rgb(8 7 14 / .97));
  border:1px solid rgb(255 255 255 / .08);backdrop-filter:blur(18px);-webkit-backdrop-filter:blur(18px);
  box-shadow:0 40px 100px -30px rgb(0 0 0 / .9),inset 0 1px 0 rgb(255 255 255 / .06);animation:mm-entra .45s cubic-bezier(.2,.8,.2,1)}
@keyframes mm-entra{from{opacity:0;transform:translateY(-10px) scale(.985);filter:blur(4px)}}
.mm-nav{display:grid;grid-template-columns:1fr 1fr;gap:4px}
.menu-movil .mm-nav a{display:flex;align-items:center;gap:16px;padding:18px 18px;border-radius:18px;color:#fff;transition:background .3s;animation:mm-item .5s cubic-bezier(.2,.8,.2,1) both}
.mm-nav a:nth-child(2){animation-delay:.04s}.mm-nav a:nth-child(3){animation-delay:.08s}.mm-nav a:nth-child(4){animation-delay:.12s}.mm-nav a:nth-child(5){animation-delay:.16s}.mm-nav a:nth-child(6){animation-delay:.2s}
@keyframes mm-item{from{opacity:0;transform:translateY(8px)}}
.mm-nav a i{font:500 12px/1 var(--mono);font-style:normal;color:#6e6a88;align-self:flex-start;margin-top:6px}
.mm-nav a span{flex:1;display:flex;flex-direction:column;gap:5px}
.mm-nav a b{font:700 clamp(22px,1.8vw,28px)/1.05 var(--titular);letter-spacing:-.035em}
.mm-nav a small{font:400 13.5px/1.35 "Inter",sans-serif;color:#9a96ad}
.mm-nav a svg{width:16px;height:16px;color:#c9b8ff;opacity:0;transform:translateX(-6px);transition:opacity .3s,transform .3s}
.menu-movil .mm-nav a:hover{background:rgb(255 255 255 / .05)}
.mm-nav a:hover svg{opacity:1;transform:none}
.mm-nav a:hover i{color:#a98bff}
.mm-lado{display:flex;flex-direction:column;gap:12px}
.mm-tarjeta{flex:1;display:flex;flex-direction:column;gap:12px;padding:26px;border-radius:22px;border:1px solid rgb(157 123 255 / .22);
  background:radial-gradient(120% 120% at 0 0,rgb(107 43 255 / .25),transparent 60%),rgb(255 255 255 / .02)}
.mm-tarjeta small{font:600 12px/1 "Inter",sans-serif;color:#a98bff}
.menu-movil .mm-mail{font:700 clamp(20px,1.7vw,26px)/1.15 var(--titular);letter-spacing:-.03em;color:#fff;padding:0;word-break:break-all}
.mm-tarjeta p{font-size:14px;line-height:1.5;color:#9a96ad;margin:0}
.menu-movil .mm-cta{margin-top:auto;align-self:flex-start;display:inline-flex;align-items:center;gap:14px;height:50px;padding:0 5px 0 22px;border-radius:999px;font-weight:600;color:#fff;
  background:linear-gradient(90deg,#6b2bff,#5a24e0);box-shadow:0 0 0 1px rgb(157 123 255 / .4),0 12px 30px -10px rgb(107 43 255 / .9)}
.mm-cta span{width:40px;height:40px;border-radius:50%;background:#14102a;display:grid;place-items:center}
.mm-cta svg{width:15px;height:15px}
.mm-juegos{display:flex;justify-content:space-between;align-items:center;height:56px;padding:0 20px;border-radius:18px;border:1px solid rgb(255 255 255 / .08);
  background:rgb(255 255 255 / .03);color:#e8e7ee;font:600 15px/1 "Inter",sans-serif;cursor:pointer;transition:border-color .3s,background .3s}
.mm-juegos:hover{border-color:#8f63ff;background:rgb(157 123 255 / .1)}
.mm-pie{grid-column:1 / -1;display:flex;justify-content:space-between;align-items:center;gap:12px;padding:14px 8px 2px;border-top:1px solid rgb(255 255 255 / .06);font-size:12.5px;color:#6e6a88}
.mm-legal{display:flex;gap:18px}
.menu-movil .mm-legal a{padding:0;font-size:12.5px;color:#9a96ad}
.menu-movil .mm-legal a:hover{color:#fff;background:none}
@media (max-width:900px){
  .menu-movil{grid-template-columns:1fr;max-height:calc(100svh - 100px);overflow-y:auto;padding:12px}
  .mm-nav{grid-template-columns:1fr}
  .menu-movil .mm-nav a{padding:14px}
  .mm-pie{flex-direction:column;align-items:flex-start}
}
@media (prefers-reduced-motion:reduce){.menu-movil,.mm-nav a{animation:none}}

/* imágenes de los paneles del caso: centradas y completas en los dos modos */
#caso .panel2 .foto{display:flex;align-items:center;justify-content:center;overflow:hidden;background:transparent}
#caso .panel2 .foto:not(.mapa-img) img{width:100%;height:100%;object-fit:cover;object-position:50% 50%}
html[data-tema="claro"] #caso .panel2 .foto:not(.mapa-img) img{object-fit:cover;object-position:50% 50%;mix-blend-mode:normal;filter:none}

/* ---------- la línea del titular: fina y sutil; encima va el lienzo 3D de assets/hero-linea.js (css/hero-linea.css) ---------- */
.hero h1 [data-lui~="rotan"]::before{display:none}
/* ojo: el contenedor de palabras-rotan lleva overflow:hidden; con bottom negativo la línea quedaba recortada (invisible) */
.hero h1 [data-lui~="rotan"]::after{height:2px;bottom:0;opacity:.9;filter:none;animation:none;
  background:linear-gradient(90deg,rgb(107 43 255 / .9),rgb(169 139 255 / .8) 60%,rgb(201 184 255 / 0));box-shadow:0 0 8px rgb(124 77 255 / .55)}