/* IA & Marketing Ferreras — «Las 24 horas». Propuesta de rediseño.
   Regla de la casa: tres segundos de atención por pantalla. Primero se ve (vídeo, fotografía, el reloj), después se lee.
   El reloj Ferreras vive en la cabecera: sus agujas avanzan con el scroll; de día manda el oro (marketing), de noche
   la señal azul del logotipo (IA). Una curva, tres duraciones; sólo transform, opacity y clip-path se mueven. */

/* ---------- 00 base ---------- */
@font-face{font-family:'Bodoni Moda';font-style:normal;font-weight:400 900;font-display:swap;src:url(fonts/bodoni.woff2) format('woff2')}
@font-face{font-family:'Bodoni Moda';font-style:italic;font-weight:400 900;font-display:swap;src:url(fonts/bodoni-italic.woff2) format('woff2')}
@font-face{font-family:'Jost';font-style:normal;font-weight:100 900;font-display:swap;src:url(fonts/jost.woff2) format('woff2')}

@property --j{syntax:'<number>';inherits:true;initial-value:1}
@property --x{syntax:'<number>';inherits:true;initial-value:50}

:root{
  --noche:#0d0b09; --noche-2:#17130f; --noche-3:#241d15;
  --marfil:#f3e6dc; --marfil-2:#e4dccd;
  --piedra:#928a7d; --piedra-c:#b9b0a4;
  --oro:#c2a263; --oro-2:#d6bc86; --oro-3:#a98b52;
  --senal:#0022f1; --senal-2:#5b86ff;
  --tinta:#17120c;
  --linea:rgba(243,230,220,.14); --linea-2:rgba(243,230,220,.26);
  --texto:rgba(243,230,220,.8);
  --acento:var(--oro); --acento-2:var(--oro-2);
  --curva:cubic-bezier(.16,1,.3,1);
  --t-toque:200ms; --t-entra:700ms; --t-cena:1200ms;
  --g:clamp(18px,4vw,56px);
  --f-xxl:clamp(3rem,7.4vw,7.6rem);
  --f-xl:clamp(2.5rem,5.6vw,5.8rem);
  --f-l:clamp(2.1rem,4.2vw,4.3rem);
  --f-m:clamp(1.5rem,2.4vw,2.3rem);
  --f-s:clamp(1.14rem,1.45vw,1.4rem);
  --f-c:1.0625rem; --f-p:.9375rem; --f-mi:.75rem;
  --serif:'Bodoni Moda','Didot',"Iowan Old Style","Palatino Linotype",Palatino,Georgia,serif;
  --sans:'Jost','Futura',ui-sans-serif,system-ui,-apple-system,"Segoe UI",Helvetica,Arial,sans-serif;
  --topo:78px;
  --pad:clamp(6.5rem,15vh,11rem);
  color-scheme:dark;
}
body.es-noche{--acento:var(--senal-2);--acento-2:#9db6ff}
*,*::before,*::after{box-sizing:border-box}
html{-webkit-text-size-adjust:100%;text-size-adjust:100%}
html.suave{scroll-behavior:smooth}
body{margin:0;background:var(--noche);color:var(--marfil);font:400 var(--f-c)/1.6 var(--sans);-webkit-font-smoothing:antialiased;-moz-osx-font-smoothing:grayscale;overflow-x:clip}
img,video,svg{display:block;max-width:100%}
img{height:auto}
a{color:inherit;text-decoration:none}
button{font:inherit;color:inherit;background:none;border:0;padding:0;cursor:pointer}
h1,h2,h3,h4,p,ul,ol,figure,blockquote,dl,dd,fieldset{margin:0}
fieldset{border:0;padding:0;min-width:0}
ul,ol{padding:0;list-style:none}
::selection{background:var(--oro);color:var(--noche)}
:focus-visible{outline:2px solid var(--acento-2);outline-offset:3px;border-radius:2px}
.saltar{position:fixed;left:var(--g);top:-80px;z-index:200;background:var(--marfil);color:var(--tinta);padding:.7rem 1rem;border-radius:999px;font-weight:500;transition:top var(--t-toque) var(--curva)}
.saltar:focus{top:12px}
.vh{position:absolute!important;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap}

/* el cielo: dos capas fijas, sólo cambia su opacidad (compositor) */
.cielo{position:fixed;inset:0;z-index:-1;pointer-events:none;background:var(--noche)}
.cielo>div{position:absolute;inset:0;will-change:opacity}
.cielo-dia{background:radial-gradient(120% 70% at 78% 0%,rgba(194,162,99,.16),transparent 60%),radial-gradient(90% 60% at 0% 100%,rgba(60,44,28,.5),transparent 70%),linear-gradient(180deg,#16110c,#0d0b09 60%)}.cielo-alba{opacity:0;background:radial-gradient(110% 70% at 50% 105%,rgba(226,140,104,.34),transparent 64%),radial-gradient(80% 60% at 85% 0%,rgba(255,214,170,.2),transparent 60%),linear-gradient(180deg,#1d1311,#110c0a)}.cielo-tarde{opacity:0;background:radial-gradient(120% 75% at 18% 105%,rgba(214,112,42,.38),transparent 62%),radial-gradient(70% 50% at 92% 8%,rgba(176,62,40,.24),transparent 60%),linear-gradient(180deg,#1d100a,#130a07)}
.cielo-noche{opacity:0;background:radial-gradient(70% 55% at 85% 12%,rgba(0,34,241,.20),transparent 62%),radial-gradient(60% 50% at 10% 90%,rgba(0,34,241,.10),transparent 70%),linear-gradient(180deg,#02050b,#04070e)}

/* ---------- 02 letra ---------- */
.etiqueta{font:500 var(--f-mi)/1.3 var(--sans);letter-spacing:.18em;text-transform:uppercase;color:var(--piedra-c);display:flex;gap:.9em;align-items:center;flex-wrap:wrap}
.etiqueta .n,.etiqueta .hora{color:var(--acento);font-variant-numeric:tabular-nums;transition:color var(--t-cena) var(--curva)}
.titulo{font-family:var(--serif);font-weight:330;letter-spacing:-.022em;line-height:1;font-optical-sizing:auto;text-wrap:balance}
.titulo em{font-style:italic;font-weight:300;color:var(--acento-2);transition:color var(--t-cena) var(--curva)}
.t-xxl{font-size:var(--f-xxl);line-height:.94;letter-spacing:-.03em}
.t-xl{font-size:var(--f-xl);line-height:.96;letter-spacing:-.028em}
.t-l{font-size:var(--f-l)}
.t-m{font-size:var(--f-m);line-height:1.1;letter-spacing:-.015em}
.t-s{font-size:var(--f-s);line-height:1.25}
.lead{font-size:var(--f-s);line-height:1.45;color:var(--texto);max-width:38ch;text-wrap:pretty}
.texto{color:var(--texto);max-width:44ch;text-wrap:pretty}
.nota{font-size:var(--f-p);color:var(--piedra-c);max-width:56ch}
.mini{font-size:var(--f-mi);letter-spacing:.04em;color:var(--piedra-c)}

/* ---------- 03 botones ---------- */
.btn{--bg:transparent;--fg:var(--marfil);--bd:var(--linea-2);display:inline-flex;align-items:center;gap:.75em;padding:1rem 1.45rem;border-radius:999px;background:var(--bg);color:var(--fg);border:1px solid var(--bd);font:500 var(--f-p)/1 var(--sans);letter-spacing:.01em;white-space:nowrap;transition:background var(--t-toque) var(--curva),color var(--t-toque) var(--curva),border-color var(--t-toque) var(--curva)}
.btn .fl{display:inline-block;transition:transform var(--t-entra) var(--curva)}
.btn-claro{--bg:var(--marfil);--fg:var(--tinta);--bd:var(--marfil)}
.btn-oscuro{--bg:var(--tinta);--fg:var(--marfil);--bd:var(--tinta)}
.btn-vidro{--bg:rgba(0,16,31,.28);backdrop-filter:blur(8px);-webkit-backdrop-filter:blur(8px)}
.btn-peq{padding:.72rem 1.1rem;font-size:.84rem}
.btn[disabled]{opacity:.55;cursor:default}
@media (hover:hover) and (pointer:fine){
  .btn:hover .fl{transform:translateX(5px)}
  .btn-claro:hover{--bg:#fff}
  .btn-linha:hover{--bd:var(--marfil)}
  .btn-oscuro:hover{--bg:#2a2219}
}
.acoes{display:flex;flex-wrap:wrap;gap:.8rem;align-items:center}
.enlace{display:inline-flex;gap:.6em;align-items:center;font-weight:500;border-bottom:1px solid var(--linea-2);padding-bottom:.25em;transition:border-color var(--t-toque) var(--curva)}
.enlace .fl{transition:transform var(--t-entra) var(--curva)}
@media (hover:hover) and (pointer:fine){.enlace:hover{border-color:var(--acento)}.enlace:hover .fl{transform:translateX(4px)}}

/* ---------- 04 entradas ---------- */
[data-linhas] .l{display:block;overflow:hidden;padding:0 .12em .1em;margin:0 -.12em -.1em}
[data-linhas] .l>span{display:block}
@media (prefers-reduced-motion:no-preference){
  html.js [data-linhas] .l>span{transform:translate3d(0,118%,0);transition:transform var(--t-cena) var(--curva);transition-delay:calc(var(--i,0)*90ms)}
  html.js [data-linhas].dentro .l>span{transform:none}
  html.js [data-sube]{opacity:0;transform:translate3d(0,26px,0);transition:opacity var(--t-cena) var(--curva),transform var(--t-cena) var(--curva);transition-delay:calc(var(--i,0)*80ms)}
  html.js [data-sube].dentro{opacity:1;transform:none}
}
[data-duas-tintas] .p{color:rgba(243,230,220,.22);transition:color var(--t-entra) var(--curva)}
[data-duas-tintas] .p.on{color:var(--marfil)}
[data-duas-tintas] em .p.on{color:var(--acento-2)}
@media (prefers-reduced-motion:reduce){[data-duas-tintas] .p{color:var(--marfil)}}
.ventana{position:relative;overflow:hidden;border-radius:3px;background:var(--noche-2)}
.ventana img,.ventana video{width:100%;height:100%;object-fit:cover;display:block}
@media (prefers-reduced-motion:no-preference){
  [data-janela]{clip-path:inset(calc(var(--j)*12%) calc(var(--j)*16%) calc(var(--j)*12%) calc(var(--j)*16%) round 3px)}
  [data-janela] img,[data-janela] video{transform:scale(calc(1 + var(--j)*.16))}
}
.pie{font-size:var(--f-mi);letter-spacing:.06em;color:var(--piedra-c);margin-top:.8rem;display:flex;flex-wrap:wrap;gap:.3em .8em}
.pie b{font-weight:500;color:var(--marfil);letter-spacing:.12em;text-transform:uppercase}
[data-vivo] img{transition:transform var(--t-cena) var(--curva);transform:translate3d(var(--mx,0),var(--my,0),0) scale(1.06)}

/* ---------- 05 cabecera (el reloj vive aquí) ---------- */
.topo{position:fixed;inset:0 0 auto 0;z-index:60;height:calc(var(--topo) + env(safe-area-inset-top,0px));padding:env(safe-area-inset-top,0px) var(--g) 0;display:grid;grid-template-columns:1fr auto 1fr;align-items:center;gap:1.4rem;color:var(--marfil);transition:color var(--t-entra) var(--curva)}
.topo::before{content:"";position:absolute;inset:0 0 -28px;z-index:-1;pointer-events:none;opacity:0;background:linear-gradient(180deg,rgba(0,12,25,.88),rgba(0,12,25,.55) 60%,rgba(0,12,25,0));transition:opacity var(--t-entra) var(--curva),background var(--t-entra) var(--curva)}
.topo.fundo::before{opacity:1}
.topo.sobre-claro{color:var(--tinta)}
.topo.sobre-claro::before{background:linear-gradient(180deg,rgba(243,230,220,.94),rgba(243,230,220,.6) 60%,rgba(243,230,220,0))}
.topo-lado{display:flex;gap:1.5rem;font:500 .78rem/1 var(--sans);letter-spacing:.08em;text-transform:uppercase}
.topo-lado a{position:relative;padding:.5rem 0}
.topo-lado a::after{content:"";position:absolute;left:0;right:0;bottom:.15rem;height:1px;background:currentColor;transform:scaleX(0);transform-origin:0 50%;transition:transform var(--t-entra) var(--curva)}
@media (hover:hover) and (pointer:fine){.topo-lado a:hover::after{transform:none}}
.topo-lado a[aria-current="page"]::after{transform:none}
.topo-marca{display:flex;align-items:center}
.topo-marca svg{height:26px;width:auto}
.lg-m{fill:#f3e6dc}.lg-p{fill:#a1998f}.lg-s{fill:#0022f1}.lg-w{fill:#f3e6dc}
.topo-marca path,.topo-marca g{transition:fill var(--t-entra) var(--curva)}
.topo.sobre-claro .lg-m,.topo.sobre-claro .lg-w{fill:var(--tinta)}
.topo.sobre-claro .lg-p{fill:#6e665b}
body.a-abrir .topo-marca{opacity:0}
.topo-dir{justify-self:end;display:flex;gap:1rem;align-items:center}
.topo .btn{padding:.78rem 1.15rem;font-size:.82rem}
.topo.sobre-claro .topo-cta{--bg:var(--tinta);--fg:var(--marfil);--bd:var(--tinta)}
.menu-botao{display:none;font:500 .78rem/1 var(--sans);letter-spacing:.12em;text-transform:uppercase;align-items:center;gap:.6rem;padding:.6rem 0}
.menu-botao i{display:grid;gap:5px;width:22px}
.menu-botao i::before,.menu-botao i::after{content:"";height:1.5px;background:currentColor;transition:transform var(--t-entra) var(--curva)}
.menu-botao[aria-expanded="true"] i::before{transform:translateY(3.25px) rotate(45deg)}
.menu-botao[aria-expanded="true"] i::after{transform:translateY(-3.25px) rotate(-45deg)}

/* el HUD: la hora de la historia, junto al reloj */
.hud{display:flex;align-items:center;gap:.75rem}
.hud-txt{display:grid;justify-items:end;gap:.2rem;line-height:1}
.hud-hora{font:500 .98rem/1 var(--sans);font-variant-numeric:tabular-nums;letter-spacing:.03em;white-space:nowrap}
.hud-hora small{font-size:.58rem;letter-spacing:.16em;color:var(--acento);margin-left:.4rem;vertical-align:.18em;transition:color var(--t-cena) var(--curva)}
.hud-mom{position:relative;display:block;height:1.15em;width:15rem;font-size:.72rem;opacity:.72;overflow:hidden}
.hud-mom span{position:absolute;inset:0;text-align:right;white-space:nowrap;transition:opacity var(--t-entra) var(--curva),transform var(--t-entra) var(--curva)}
.hud-mom span.sai{opacity:0;transform:translateY(-100%)}
.hud-mom span.entra{opacity:0;transform:translateY(100%)}
.hud-dock{position:relative;width:42px;height:42px;flex:none}
.hud-anillo{position:absolute;inset:-5px;pointer-events:none}
.hud-anillo circle{fill:none;stroke-width:2.2}
.hud-anillo .f{stroke:rgba(243,230,220,.16)}
.hud-anillo .v{stroke:var(--acento);transition:stroke var(--t-cena) var(--curva)}
.topo.sobre-claro .hud-anillo .f{stroke:rgba(23,18,12,.16)}
@media (max-width:1279px){.hud-mom{display:none}}

/* el menú de pantalla entera */
.menu{position:fixed;inset:0;z-index:55;background:var(--noche);padding:calc(var(--topo) + 4vh + env(safe-area-inset-top,0px)) var(--g) calc(2rem + env(safe-area-inset-bottom,0px));display:flex;flex-direction:column;justify-content:space-between;overflow:auto;opacity:0;transition:opacity var(--t-entra) var(--curva)}
.menu.aberto{opacity:1}
.menu:not(.aberto){pointer-events:none}
/* «hidden» manda sempre: um display de classe não pode ressuscitar uma camada invisível por cima da página */
[hidden]{display:none!important}
.menu-lista{display:grid;gap:.2rem}
.menu-lista a{font:330 clamp(2rem,9vw,3.4rem)/1.08 var(--serif);letter-spacing:-.02em;display:flex;align-items:baseline;gap:.6rem;padding:.25rem 0}
.menu-lista a small{font:500 .7rem/1 var(--sans);letter-spacing:.16em;color:var(--piedra);width:2.2rem}
.menu-sub{display:flex;flex-wrap:wrap;gap:.5rem 1.2rem;margin:1rem 0 0 2.8rem;font-size:.95rem;color:var(--piedra-c)}
.menu-pe{display:grid;gap:1rem;margin-top:2rem;justify-items:start}
@media (prefers-reduced-motion:no-preference){
  .menu .menu-lista>*{opacity:0;transform:translateY(18px);transition:opacity var(--t-entra) var(--curva),transform var(--t-cena) var(--curva);transition-delay:calc(var(--i,0)*45ms + 80ms)}
  .menu.aberto .menu-lista>*{opacity:1;transform:none}
}

/* ---------- 08 apertura: sobre el vídeo de los coches cruza una estela de luz; cada letra nace cuando la cabeza
   pasa por debajo (retrasos calculados en js/10-abertura.js con la misma curva) y el logotipo vuela a la cabecera ---------- */
.abertura{position:fixed;inset:0;z-index:70;display:grid;place-items:center;pointer-events:none;background:radial-gradient(ellipse at 50% 50%,rgba(13,11,9,.62),rgba(13,11,9,.34) 70%);transition:background var(--t-cena) var(--curva)}
.abertura.solta{background:transparent}
.abertura .caja{width:min(64vw,620px);transform-origin:0 0;transition:transform var(--t-cena) var(--curva)}
.abertura svg{width:100%;height:auto;overflow:visible}
.abertura .pz,.abertura .letra,.abertura .pz-senal{opacity:0;transform-box:fill-box;transform-origin:50% 100%}
.abertura.monta .pz,.abertura.monta .letra{animation:nasce 900ms var(--curva) both}
.abertura.monta .pz-senal{animation:senal var(--t-entra) var(--curva) both}
.rasto-w{position:absolute;left:0;right:0;top:56%;height:0}
.rasto{position:absolute;left:0;top:-.5px;width:100%;height:1px;transform:scaleX(0);transform-origin:0 50%;background:linear-gradient(90deg,rgba(194,162,99,0),rgba(194,162,99,.35) 40%,rgba(255,236,206,.95));opacity:0}
.rasto-cab{position:absolute;left:0;top:-3px;width:6px;height:6px;margin-left:-3px;border-radius:50%;background:#fff;box-shadow:0 0 10px 3px rgba(255,240,214,.95),0 0 36px 12px rgba(194,162,99,.5),-40px 0 30px 2px rgba(194,162,99,.25);opacity:0;transform:translate3d(-20px,0,0)}
.abertura.monta .rasto{opacity:1;animation:rasto var(--t-rasto,1500ms) var(--e-rasto,ease) forwards}
.abertura.monta .rasto-cab{opacity:1;animation:cabeca var(--t-rasto,1500ms) var(--e-rasto,ease) forwards}
.abertura.solta .rasto,.abertura.solta .rasto-cab{opacity:0;transition:opacity var(--t-entra) linear}
.abertura.pousou{opacity:0;transition:opacity var(--t-entra) linear}
.abertura.rapido{transition-duration:var(--t-toque)}
html:not(.js) .abertura,html.sem-abertura .abertura{display:none}
html:not(.js) body.a-abrir .topo-marca,html.sem-abertura body.a-abrir .topo-marca{opacity:1}
@keyframes rasto{to{transform:scaleX(1)}}
@keyframes cabeca{to{transform:translate3d(calc(100vw + 20px),0,0)}}
@keyframes nasce{from{opacity:0;transform:translate3d(0,42%,0) scaleY(.6)}60%{opacity:1}to{opacity:1;transform:none}}
@keyframes senal{0%{opacity:0;transform:translate3d(0,-70px,0) scale(.4)}60%{opacity:1}100%{opacity:1;transform:none}}

/* ---------- 10 vídeo de fondo (hero y páginas) ---------- */
.filme{position:absolute;inset:0;overflow:hidden;background:var(--noche)}
.filme picture,.filme img,.filme video{position:absolute;inset:0;width:100%;height:100%;object-fit:cover}
.filme video{opacity:0;transition:opacity var(--t-entra) linear}
.filme video.a-tocar{opacity:1}
@media (prefers-reduced-motion:no-preference){.filme.kb img{animation:kb 22s ease-in-out infinite alternate}}
@keyframes kb{from{transform:scale(1.02)}to{transform:scale(1.12) translate3d(-1.5%,-1%,0)}}

/* ---------- 11 hero ---------- */
.hero{position:relative;min-height:100svh;display:grid;align-items:end;padding:calc(var(--topo) + 6vh) var(--g) 11vh;overflow:hidden;isolation:isolate}
.hero .filme{z-index:-2}
.hero-velo{position:absolute;inset:0;z-index:-1;background:linear-gradient(90deg,rgba(13,11,9,.78) 0%,rgba(13,11,9,.42) 46%,rgba(13,11,9,.08) 75%),linear-gradient(0deg,rgba(13,11,9,.85) 0%,rgba(13,11,9,0) 42%),linear-gradient(180deg,rgba(13,11,9,.6) 0%,rgba(13,11,9,0) 22%)}
.hero-txt{max-width:min(54rem,100%);display:grid;gap:1.6rem}
.hero h1.t-xxl{text-shadow:0 2px 40px rgba(0,0,0,.25)}
.hero .lead{color:rgba(243,230,220,.9);max-width:34ch}
.hero-pista{position:absolute;right:var(--g);bottom:4vh;display:flex;gap:.9rem;align-items:center;font:500 var(--f-mi)/1 var(--sans);letter-spacing:.16em;text-transform:uppercase;color:rgba(243,230,220,.7)}
.hero-pista i{width:1px;height:42px;background:linear-gradient(rgba(243,230,220,.8),transparent);transform-origin:top}
@media (prefers-reduced-motion:no-preference){
  .hero-pista i{animation:pista 2.4s var(--curva) infinite}
  html.js .hero-txt>*:not(h1){opacity:0;transform:translate3d(0,22px,0);transition:opacity var(--t-cena) var(--curva),transform var(--t-cena) var(--curva);transition-delay:calc(380ms + var(--i,0)*110ms)}
  html.js .hero.pronto .hero-txt>*{opacity:1;transform:none}
}
@keyframes pista{0%{transform:scaleY(0)}45%{transform:scaleY(1)}100%{transform:scaleY(1);opacity:0}}

/* ---------- 12 el reloj ---------- */
.reloj{position:relative;width:100%;aspect-ratio:1;border-radius:50%;overflow:hidden;contain:paint}
.reloj>svg,.reloj>img,.reloj>div{position:absolute}
.reloj .r-caixa,.reloj .r-agujas{inset:0;width:100%;height:100%;overflow:visible}
.reloj .r-ceu{inset:6%;border-radius:50%;transform-origin:50% 50%;will-change:transform;
  background:
    radial-gradient(circle at 52.6% 72.2%,#04122c 0 3.1%,transparent 3.25%),
    radial-gradient(circle at 50% 73.9%,#f3e6dc 0 3.3%,rgba(243,230,220,.16) 3.6%,transparent 6.5%),
    linear-gradient(#0022f1,#0022f1) 61% 85% / 2.3% 2.3% no-repeat,
    radial-gradient(circle at 37% 66%,rgba(243,230,220,.95) 0 .45%,transparent .6%),
    radial-gradient(circle at 64% 63%,rgba(243,230,220,.8) 0 .4%,transparent .55%),
    radial-gradient(circle at 43% 87%,rgba(243,230,220,.85) 0 .45%,transparent .6%),
    radial-gradient(circle at 33% 79%,rgba(243,230,220,.6) 0 .35%,transparent .5%),
    radial-gradient(circle at 69% 76%,rgba(243,230,220,.7) 0 .38%,transparent .52%),
    radial-gradient(circle at 50% 26.1%,#fff7e0 0 3.6%,rgba(255,240,205,.55) 4.6%,rgba(255,236,190,0) 11%),
    conic-gradient(from 0deg,#f1dca7 0deg,#e5c68c 45deg,#a8743f 85deg,#23356a 115deg,#08173a 150deg,#030c20 180deg,#08173a 210deg,#23356a 245deg,#a8743f 275deg,#e5c68c 315deg,#f1dca7 360deg)}
.reloj .r-esfera{left:4%;top:4%;width:92%;height:92%;border-radius:50%}
.reloj .r-agujas{z-index:2}
.reloj .ag{transform-origin:200px 200px;will-change:transform}
.reloj .ag-s.barre{animation:seg 60s linear infinite}
@keyframes seg{to{transform:rotate(1turn)}}
.reloj .brillo{inset:4%;z-index:3;border-radius:50%;background:conic-gradient(from 200deg,transparent 0deg,rgba(255,255,255,.22) 28deg,transparent 64deg,transparent 190deg,rgba(255,255,255,.12) 220deg,transparent 262deg);mix-blend-mode:soft-light;pointer-events:none}
@media (prefers-reduced-motion:no-preference){.reloj .brillo{animation:brillo 26s linear infinite}}
@keyframes brillo{to{transform:rotate(1turn)}}
.reloj-voo{position:fixed;left:0;top:0;z-index:61;pointer-events:none;transform-origin:0 0;visibility:hidden}
.reloj-voo.listo{visibility:visible}
.reloj-voo{filter:drop-shadow(0 6px 14px rgba(0,0,0,.35))}

/* ---------- 20 secciones ---------- */
.sec{position:relative;padding:var(--pad) var(--g)}
.grelha{display:grid;grid-template-columns:repeat(12,minmax(0,1fr));column-gap:var(--g);row-gap:3rem}
.cab{display:grid;gap:1.3rem;margin-bottom:clamp(2.4rem,6vh,4.5rem)}
.cab-centro{justify-items:center;text-align:center}
.cab-centro .etiqueta{justify-content:center}
.num{font:500 var(--f-mi)/1 var(--sans);letter-spacing:.16em;color:var(--acento);font-variant-numeric:tabular-nums;transition:color var(--t-cena) var(--curva)}
.claro{background:var(--marfil);color:var(--tinta);--texto:rgba(23,18,12,.74);--linea:rgba(23,18,12,.14);--linea-2:rgba(23,18,12,.28);--piedra-c:#6e665b;--piedra:#857c70;--acento:var(--oro-3);--acento-2:#8a6d33}
.claro .titulo em{color:#8a6d33}
.claro .btn-linha{--fg:var(--tinta)}
.claro .enlace{border-color:rgba(23,18,12,.3)}
.claro .ventana{background:var(--marfil-2)}
.claro .pie{color:var(--piedra-c)}
.claro .pie b{color:var(--tinta)}

/* así se ve nuestro trabajo: la pared de vídeos */
.prod-cab{display:flex;justify-content:space-between;align-items:flex-end;gap:2rem 3rem;flex-wrap:wrap;margin-bottom:clamp(2rem,5vh,3.2rem)}
.prod-cab .cab{margin:0}
.prod-dado{display:grid;gap:.5rem;max-width:25rem;padding-bottom:.4rem}
.prod-dado b{font:300 clamp(2rem,3.2vw,3.4rem)/.95 var(--serif);letter-spacing:-.03em;font-variant-numeric:lining-nums tabular-nums;white-space:nowrap}
.prod-dado>span{font-size:var(--f-p);color:var(--texto)}
.carril{display:flex;gap:clamp(12px,1.4vw,22px);overflow-x:auto;overscroll-behavior-x:contain;scroll-snap-type:x mandatory;scroll-padding-inline:var(--g);padding:0 var(--g) 4px;margin-inline:calc(var(--g)*-1);scrollbar-width:none;cursor:grab;-webkit-overflow-scrolling:touch}
.carril::-webkit-scrollbar{display:none}
.carril.arrasta{scroll-snap-type:none;cursor:grabbing;user-select:none;-webkit-user-select:none}
.carril.arrasta *{pointer-events:none}
.carril-item{flex:none;scroll-snap-align:start;width:clamp(220px,22vw,340px)}
.carril-item .ventana{aspect-ratio:9/16}
.carril-item.h{width:clamp(300px,40vw,620px)}
.carril-item.h .ventana{aspect-ratio:auto;height:calc(clamp(220px,22vw,340px)*16/9)}
.prod-pe{display:flex;align-items:center;gap:1.4rem 2rem;flex-wrap:wrap;margin-top:1.6rem}
.carril-ctl{display:flex;align-items:center;gap:.8rem}
.carril-b{width:46px;height:46px;border-radius:50%;border:1px solid var(--linea-2);display:grid;place-items:center;font-size:1rem;transition:background var(--t-toque) var(--curva),color var(--t-toque) var(--curva),opacity var(--t-toque) var(--curva)}
.carril-b:disabled{opacity:.35;cursor:default}
@media (hover:hover) and (pointer:fine){.carril-b:not(:disabled):hover{background:var(--marfil);color:var(--tinta)}}
.carril-n{font:500 .78rem/1 var(--sans);letter-spacing:.14em;font-variant-numeric:tabular-nums;color:var(--piedra-c);min-width:4.6rem;text-align:center}
.carril-barra{position:relative;height:1px;background:var(--linea);margin-top:1.4rem}
.carril-barra i{position:absolute;inset:0;background:var(--acento);transform-origin:0 50%;transform:scaleX(.12)}

/* las dos mitades: raio X día / noche del mismo yate */
.rx{position:relative;aspect-ratio:16/8.2;border-radius:4px;overflow:hidden;container-type:inline-size;touch-action:pan-y;user-select:none;-webkit-user-select:none;cursor:ew-resize;background:var(--noche-2)}
.rx-capa{position:absolute;inset:0}
.rx-capa img{width:100%;height:100%;object-fit:cover}
.rx-noche{clip-path:inset(0 0 0 calc(var(--x)*1%))}
.rx-linha{position:absolute;top:0;bottom:0;left:0;width:1px;background:var(--marfil);transform:translateX(calc(var(--x)*1cqi));will-change:transform}
.rx-pega{position:absolute;top:50%;left:0;width:60px;height:60px;margin:-30px 0 0 -30px;border-radius:50%;background:var(--marfil);color:var(--tinta);display:grid;place-items:center;font-size:1.15rem;transform:translateX(calc(var(--x)*1cqi));box-shadow:0 10px 30px rgba(0,0,0,.35);will-change:transform}
.rx-rot{position:absolute;bottom:1.6rem;display:grid;gap:.35rem;padding:0 1.8rem;max-width:46%}
.rx-rot b{font:500 var(--f-mi)/1 var(--sans);letter-spacing:.18em;text-transform:uppercase}
.rx-rot span{font:330 var(--f-m)/1.05 var(--serif);text-shadow:0 2px 24px rgba(0,0,0,.45)}
.rx-rot.d{left:0}.rx-rot.d b{color:#fff3d6}
.rx-rot.n{right:0;text-align:right;justify-items:end}.rx-rot.n b{color:#a9c0ff}
@media (hover:hover) and (pointer:fine){.rx-rot span{transition:transform var(--t-entra) var(--curva)}.rx-rot:hover span{transform:translateY(-3px)}}
.rx:focus-visible{outline-offset:6px}

/* sectores */
.sect{display:flex;gap:10px;height:min(76svh,740px)}
.sect a{position:relative;flex:1;min-width:0;border-radius:4px;overflow:hidden;display:flex;flex-direction:column;justify-content:flex-end;padding:1.6rem;transition:flex-grow var(--t-cena) var(--curva)}
.sect a img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;transition:transform var(--t-cena) var(--curva),filter var(--t-cena) var(--curva);filter:brightness(.94)}
.sect a::before{content:"";position:absolute;inset:0;z-index:1;background:linear-gradient(180deg,transparent 40%,rgba(0,16,31,.9))}
.sect a>*:not(img){position:relative;z-index:2}
.sect h3{font:330 var(--f-m)/1 var(--serif);letter-spacing:-.015em;margin:.6rem 0 .5rem}
.sect p{font-size:var(--f-p);color:var(--texto);max-width:28ch}
.sect .fl{position:absolute;right:1.4rem;top:1.4rem;z-index:2;width:42px;height:42px;border-radius:50%;border:1px solid var(--linea-2);display:grid;place-items:center;transition:background var(--t-toque) var(--curva),color var(--t-toque) var(--curva)}
.sect.baixo{height:min(60svh,560px)}
@media (hover:hover) and (pointer:fine){
  .sect:hover a{flex-grow:.8}
  .sect a:hover{flex-grow:2.3}
  .sect a:hover img{transform:scale(1.04);filter:none}
  .sect a:hover .fl{background:var(--marfil);color:var(--tinta)}
}

/* marca propia (marfil): el vídeo y el reloj vivo */
.marca-grid{align-items:center}
.marca-fotos{grid-column:1/7;position:relative;display:grid;grid-template-columns:1fr}
.marca-fotos .f1{width:62%;aspect-ratio:9/14}
.marca-fotos .f2{position:absolute;right:2%;bottom:-4%;width:min(46%,360px)}
.marca-reloj{filter:drop-shadow(0 30px 50px rgba(23,18,12,.35))}
.marca-fotos .f2.ventana{aspect-ratio:4/5}
.marca-txt{grid-column:8/13;display:grid;gap:1.8rem;align-content:center}
.factos{display:grid;border-top:1px solid var(--linea)}
.factos li{display:flex;justify-content:space-between;gap:1rem;padding:1rem 0;border-bottom:1px solid var(--linea);font:400 var(--f-s)/1.2 var(--serif)}
.factos li span{font:500 var(--f-mi)/1.2 var(--sans);letter-spacing:.14em;text-transform:uppercase;color:var(--piedra);align-self:center}
.marca-nota{font-size:var(--f-p);color:var(--piedra-c);display:flex;gap:.7rem;align-items:center}
.marca-nota svg{width:28px;height:28px;flex:none}

/* el departamento: Fernando y todo lo que entra */
.dep-foto{grid-column:1/6}
.dep-foto .ventana{aspect-ratio:4/5}
.dep-txt{grid-column:7/13;align-self:center;display:grid;gap:1.6rem}
.incluye-g{display:grid;grid-template-columns:1fr 1fr;gap:1.6rem;margin-top:.4rem}
.incluye-col{display:grid;gap:.9rem;align-content:start}
.incluye-col.n .etiqueta{color:var(--senal-2)}
.chips{display:flex;flex-wrap:wrap;gap:.45rem}
.chips li{font-size:.84rem;padding:.55rem .9rem;border:1px solid var(--linea-2);border-radius:999px;color:var(--marfil);line-height:1.2}
.chips-cond{margin-top:1.4rem}
.chips-cond li{font-size:.76rem;color:var(--piedra-c)}

/* 23:40: las 24 horas de una recepción */
.noche-g{align-items:center}
.dia24{grid-column:1/7;display:grid;gap:1.2rem;justify-items:center}
.dia24-svg{width:min(100%,560px);height:auto;overflow:visible}
.dia24 .tq{stroke:rgba(243,230,220,.28);stroke-width:1.2}
.dia24 .tq6{stroke:rgba(243,230,220,.6);stroke-width:1.6}
.dia24 .lab{font:500 11px var(--sans);letter-spacing:.14em;fill:rgba(243,230,220,.6);text-anchor:middle}
.dia24 .arco{fill:none;stroke:var(--senal);stroke-width:2.4;opacity:.75;filter:drop-shadow(0 0 6px rgba(0,34,241,.9))}
.dia24 .eq{fill:rgba(243,230,220,.85)}
.dia24 .ag{fill:#3d6bff;filter:drop-shadow(0 0 4px rgba(0,34,241,.9))}
.dia24 .alvo .anel{fill:none;stroke:#7d9cff;stroke-width:1.4}
.dia24 .lab-alvo{font:600 11px var(--sans);letter-spacing:.12em;fill:#a9c0ff;text-anchor:start}
.dia24 .c1{font:300 64px var(--serif);fill:var(--marfil);text-anchor:middle;letter-spacing:-1.5px}
.dia24 .c2{font:500 9.5px var(--sans);letter-spacing:.2em;fill:rgba(243,230,220,.6);text-anchor:middle}
.dia24 .varre{stroke:rgba(169,192,255,.75);stroke-width:1.4;transform-origin:200px 200px;opacity:0}
@media (prefers-reduced-motion:no-preference){
  html.js .dia24 .pt{opacity:0;transition:opacity .45s var(--curva);transition-delay:var(--d,0s)}
  html.js .dia24.vivo .pt{opacity:1}
  html.js .dia24.vivo .varre{animation:varre 3.2s linear forwards}
  .dia24.vivo .alvo .anel{animation:pulso 1.8s var(--curva) 3.2s infinite}
}
@keyframes varre{0%{opacity:1;transform:rotate(0)}90%{opacity:1}100%{opacity:0;transform:rotate(1turn)}}
@keyframes pulso{0%{opacity:1;transform:scale(1)}70%{opacity:0;transform:scale(1.9)}100%{opacity:0}}
.dia24 .alvo .anel{transform-box:fill-box;transform-origin:50% 50%}
.dia24-ley{display:flex;flex-wrap:wrap;justify-content:center;gap:.6rem 1.4rem;font-size:.82rem;color:var(--piedra-c)}
.dia24-ley span{display:flex;gap:.5rem;align-items:center}
.dia24-ley i{width:9px;height:9px;display:inline-block}
.dia24-ley i.eq{border-radius:50%;background:rgba(243,230,220,.85)}
.dia24-ley i.ag{background:#3d6bff;box-shadow:0 0 8px rgba(0,34,241,.9)}
.dia24-ley small{flex-basis:100%;text-align:center;font-size:.72rem;color:var(--piedra)}
.noche-txt{grid-column:8/13;display:grid;gap:1.5rem}

/* preguntas */

/* el final (marfil) */
.final{padding-block:clamp(6.5rem,15vh,11rem)}
.final-grid{align-items:end}
.final-txt{grid-column:1/9;display:grid;gap:2rem}
.final-dados{grid-column:9/13;display:grid;grid-template-columns:1fr 1fr;gap:1.6rem 1.2rem}
.final-dados div{border-top:1px solid var(--linea-2);padding-top:.9rem}
.final-dados b{display:block;font:300 clamp(2.2rem,3.6vw,3.4rem)/1 var(--serif);letter-spacing:-.02em}
.final-dados span{font-size:.82rem;color:var(--texto)}

/* ---------- 90 rodapé ---------- */
.rodape{position:relative;background:#000b16;padding:clamp(5rem,12vh,8rem) var(--g) calc(2.4rem + env(safe-area-inset-bottom,0px));border-top:1px solid var(--linea)}
.rodape-marca{display:grid;gap:1.6rem;margin-bottom:clamp(3.5rem,8vh,6rem)}
.rodape-marca svg.wm{width:100%;height:auto;opacity:.95}
.rodape-lema{font:italic 300 var(--f-s)/1.3 var(--serif);color:var(--piedra-c);max-width:40ch}
.rodape-cols{display:grid;grid-template-columns:2fr 1fr 1fr 1fr;gap:2rem var(--g)}
.rodape-cols h3{font:500 var(--f-mi)/1 var(--sans);letter-spacing:.18em;text-transform:uppercase;color:var(--piedra);margin-bottom:1.1rem}
.rodape-cols li{padding:.3rem 0}
.rodape-cols a{color:var(--texto);transition:color var(--t-toque) var(--curva)}
@media (hover:hover) and (pointer:fine){.rodape-cols a:hover{color:var(--marfil)}}
.rodape-cols address{font-style:normal;color:var(--texto);line-height:1.7}
.rodape-legal{margin-top:clamp(3rem,7vh,5rem);padding-top:1.6rem;border-top:1px solid var(--linea);display:flex;flex-wrap:wrap;justify-content:space-between;gap:1rem;font-size:.78rem;color:var(--piedra)}
.rodape-legal nav{display:flex;gap:1.4rem}
.rodape-legal a:hover{color:var(--marfil)}

/* la barra del teléfono: aparece al subir, se esconde al bajar */
.barra-dx{display:none}

/* ---------- 95 páginas interiores ---------- */
.pag-hero{min-height:86svh;padding:calc(var(--topo) + 10vh) var(--g) 8vh;display:grid;grid-template-columns:repeat(12,minmax(0,1fr));column-gap:var(--g);align-items:end;position:relative}
.pag-hero .ph-txt{grid-column:1/9;display:grid;gap:1.6rem;position:relative;z-index:2}
.pag-hero.com-foto .ph-txt{grid-column:1/7}
.pag-hero .ph-foto{grid-column:8/13;aspect-ratio:4/5;align-self:center}
.pag-hero h1.t-xl{font-size:clamp(2.5rem,5.4vw,5.6rem)}
.pag-hero.com-foto h1.t-xl{font-size:clamp(2.3rem,4.4vw,4.6rem)}
.ph-chips{display:flex;flex-wrap:wrap;gap:.5rem}
.ph-chips li{font-size:.78rem;padding:.5rem .85rem;border:1px solid var(--linea-2);border-radius:999px;color:var(--piedra-c)}
.pag-media{min-height:100svh;overflow:hidden;isolation:isolate;padding-bottom:10vh}
.pm-fundo{position:absolute;inset:0;z-index:-2}
.pm-fundo>img{width:100%;height:100%;object-fit:cover}
.pm-velo{position:absolute;inset:0;z-index:-1;background:linear-gradient(90deg,rgba(13,11,9,.82),rgba(13,11,9,.45) 50%,rgba(13,11,9,.1)),linear-gradient(0deg,rgba(13,11,9,.85),rgba(13,11,9,0) 45%),linear-gradient(180deg,rgba(13,11,9,.55),rgba(13,11,9,0) 25%)}
.legal-hero{min-height:auto;padding-bottom:2rem}
.pag-hero.compacto{min-height:auto;padding-bottom:0}
.pag-hero.compacto+.sec{padding-top:clamp(2.5rem,6vh,4rem)}
.migas{font-size:.78rem;letter-spacing:.06em;color:var(--piedra-c);display:flex;gap:.6rem;flex-wrap:wrap}
.migas a:hover{color:var(--marfil)}
.promessa{font-size:var(--f-l);max-width:22ch;margin:1.4rem 0 1.6rem}
.marcas{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:2.6rem var(--g)}
.marca-c{display:grid;gap:.8rem;align-content:start}
.marca-c .ventana{aspect-ratio:4/3}
.marca-c h3{font:400 var(--f-s)/1.2 var(--serif)}
.entrada{align-items:start}
.entrada-cab{grid-column:1/6}
.entrada .plano{grid-column:7/13}
.plano-link{margin-top:.4rem}
.caso-marca{position:absolute;inset:0;display:grid;place-items:center;background:var(--noche-2)}
.caso-marca svg{width:30%;height:auto}
.filtro-linha{display:flex;gap:1rem;align-items:center;flex-wrap:wrap;margin-bottom:.8rem}
.filtro-rot{font:500 var(--f-mi)/1 var(--sans);letter-spacing:.16em;text-transform:uppercase;color:var(--piedra);width:5.5rem}
.filtros{display:flex;flex-wrap:wrap;gap:.45rem}
.filtros button{font-size:.84rem;padding:.55rem .95rem;border:1px solid var(--linea-2);border-radius:999px;color:var(--piedra-c);transition:background var(--t-toque) var(--curva),color var(--t-toque) var(--curva)}
.filtros button[aria-pressed="true"]{background:var(--marfil);color:var(--tinta);border-color:var(--marfil)}
.conteo{font-size:.86rem;color:var(--piedra-c);margin:1rem 0 1.4rem}
.compara{display:grid;grid-template-columns:1fr 1fr;gap:var(--g)}
.compara>div{padding:2rem;border:1px solid var(--linea);border-radius:6px;display:grid;gap:1.1rem;align-content:start}
.compara>div.bom{border-color:rgba(194,162,99,.5);background:rgba(194,162,99,.05)}
.compara h3{font:400 var(--f-m)/1 var(--serif)}
.compara li{padding:.55rem 0;border-bottom:1px solid var(--linea);color:var(--texto)}
.compara .bom li{color:var(--marfil)}
.planos{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:var(--g)}
.plano{padding:2rem;border:1px solid var(--linea);border-radius:6px;display:grid;gap:1rem;align-content:start}
.plano.dest{border-color:rgba(194,162,99,.55)}
.plano h3{font:400 var(--f-m)/1 var(--serif)}
.plano .selo{justify-self:start;font-size:.7rem;letter-spacing:.14em;text-transform:uppercase;color:var(--tinta);background:var(--oro-2);padding:.4rem .7rem;border-radius:999px}
.plano li{display:flex;gap:.7rem;align-items:baseline;font-size:var(--f-p);color:var(--texto);padding:.3rem 0}
.plano li::before{content:"";width:6px;height:6px;flex:none;background:var(--acento);transform:translateY(-.1rem)}
.plano-flag{margin-top:1.6rem}
.pagos{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:var(--g);margin-top:2.4rem}
.pagos div{border-top:1px solid var(--linea-2);padding-top:1.1rem;display:grid;gap:.5rem}
.pagos b{font:300 clamp(2.6rem,5vw,4.6rem)/1 var(--serif);letter-spacing:-.03em}
.pagos p{color:var(--texto);font-size:var(--f-p)}
.banda{display:grid;grid-template-columns:minmax(0,7fr) minmax(0,5fr);gap:var(--g);align-items:end;padding:clamp(3rem,7vh,4.5rem) 0 0;border-top:1px solid var(--linea)}
.banda .acoes{justify-content:flex-end}
.prosa{max-width:72ch;display:grid;gap:1.1rem;color:var(--texto)}
.prosa h2{font:400 var(--f-m)/1.15 var(--serif);color:var(--marfil);margin-top:1.6rem}
.prosa h3{font:500 var(--f-c)/1.3 var(--sans);color:var(--marfil);margin-top:.8rem}
.prosa a{text-decoration:underline;text-underline-offset:3px}

/* demostración con botón (página de IA): el guion de la web original */
.demo{display:grid;grid-template-columns:minmax(0,5fr) minmax(0,7fr);gap:var(--g);align-items:center}
.demo .cab{gap:1.4rem}
.chat{background:linear-gradient(180deg,rgba(44,33,22,.55),rgba(0,16,31,.75));border:1px solid rgba(91,134,255,.22);border-radius:14px;padding:1.1rem;display:grid;grid-template-rows:auto 1fr auto;height:min(70svh,560px);box-shadow:0 40px 120px rgba(0,10,40,.6),inset 0 1px 0 rgba(255,255,255,.06)}
.chat-cab{display:flex;justify-content:space-between;align-items:center;gap:1rem;padding:.2rem .3rem 1rem;border-bottom:1px solid var(--linea)}
.chat-cab b{font-weight:500;font-size:.92rem;display:flex;align-items:center;gap:.6rem}
.chat-cab b i{width:9px;height:9px;background:var(--senal);box-shadow:0 0 14px var(--senal)}
.chat-cab span{font-size:.72rem;letter-spacing:.12em;text-transform:uppercase;color:var(--piedra-c)}
.chat-lista{display:flex;flex-direction:column;justify-content:flex-end;gap:.7rem;overflow:hidden;padding:1rem .2rem;-webkit-mask:linear-gradient(transparent,#000 14%);mask:linear-gradient(transparent,#000 14%)}
.chat-vazio{align-self:center;margin:auto;font-size:.86rem;color:var(--piedra-c)}
.chat-lista:has(.msg.vis) .chat-vazio{display:none}
.msg{max-width:84%;padding:.8rem 1rem;border-radius:12px;font-size:.93rem;line-height:1.45;display:none}
.msg.vis{display:block}
.msg small{display:block;font:500 .64rem/1 var(--sans);letter-spacing:.16em;text-transform:uppercase;color:var(--piedra-c);margin-bottom:.4rem}
.msg.cliente{align-self:flex-start;background:rgba(243,230,220,.07);border:1px solid var(--linea)}
.msg.agente{align-self:flex-end;background:rgba(0,34,241,.22);border:1px solid rgba(91,134,255,.35)}
.msg.sistema{align-self:center;max-width:100%;background:none;padding:.2rem 0;font:500 .68rem/1.4 var(--sans);letter-spacing:.14em;text-transform:uppercase;color:var(--senal-2);text-align:center}
.msg.sistema.corte{color:var(--oro-2)}
@media (prefers-reduced-motion:no-preference){.msg.vis{animation:msg var(--t-entra) var(--curva)}}
@keyframes msg{from{opacity:0;transform:translate3d(0,14px,0)}to{opacity:1;transform:none}}
.chat-pe{display:flex;align-items:center;justify-content:space-between;gap:1rem;border-top:1px solid var(--linea);padding:1rem .3rem .2rem;font-size:.76rem;color:var(--piedra-c)}
.chat-pe .escribe{display:flex;gap:4px}
.chat-pe .escribe i{width:5px;height:5px;border-radius:50%;background:var(--piedra-c);opacity:.4}
@media (prefers-reduced-motion:no-preference){.chat-pe .escribe i{animation:escribe 1.2s infinite}.chat-pe .escribe i:nth-child(2){animation-delay:.15s}.chat-pe .escribe i:nth-child(3){animation-delay:.3s}}
@keyframes escribe{50%{opacity:1;transform:translateY(-2px)}}

/* formularios: piden poco y abren el correo ya escrito */
.form{display:grid;gap:1.2rem}
.campo{display:grid;gap:.5rem}
.campo label,.campo legend{font:500 .8rem/1.2 var(--sans);letter-spacing:.06em;color:var(--piedra-c);margin-bottom:.1rem}
.campo label small{color:var(--piedra);font-weight:400}
.campo input,.campo select,.campo textarea{width:100%;font:400 1rem/1.4 var(--sans);color:var(--marfil);background:rgba(0,26,57,.4);border:1px solid var(--linea-2);border-radius:6px;padding:.95rem 1rem;transition:border-color var(--t-toque) var(--curva),background var(--t-toque) var(--curva)}
.campo select{appearance:none;background-image:linear-gradient(45deg,transparent 50%,var(--piedra-c) 50%),linear-gradient(-45deg,transparent 50%,var(--piedra-c) 50%);background-position:calc(100% - 20px) 55%,calc(100% - 15px) 55%;background-size:5px 5px;background-repeat:no-repeat}
.campo textarea{min-height:6.5rem;resize:vertical}
.campo input:focus,.campo select:focus,.campo textarea:focus{outline:none;border-color:var(--acento);background:rgba(0,26,57,.7)}
.campo [aria-invalid="true"]{border-color:#e0806b}
.campo .erro{font-size:.8rem;color:#f0a08e}
.campo-duo{display:grid;grid-template-columns:1fr 1fr;gap:1.2rem}
.radios{display:flex;flex-wrap:wrap;gap:.45rem}
.radios label{position:relative}
.radios input{position:absolute;opacity:0;pointer-events:none}
.radios span{display:inline-block;padding:.6rem .95rem;border:1px solid var(--linea-2);border-radius:999px;font-size:.86rem;cursor:pointer;transition:background var(--t-toque) var(--curva),color var(--t-toque) var(--curva)}
.radios input:checked+span{background:var(--marfil);color:var(--tinta);border-color:var(--marfil)}
.radios input:focus-visible+span{outline:2px solid var(--acento-2);outline-offset:2px}
.form-nota{font-size:.8rem;color:var(--piedra-c)}
.form-ok{padding:1.3rem;border:1px solid rgba(194,162,99,.5);border-radius:8px;background:rgba(194,162,99,.06);display:grid;gap:.5rem}
.form-ok[hidden]{display:none}
.vias{display:grid;grid-template-columns:minmax(0,5fr) minmax(0,7fr);gap:var(--g);align-items:start}
.via{padding:2rem;border:1px solid var(--linea);border-radius:8px;display:grid;gap:1.2rem;align-content:start;background:rgba(0,26,57,.25)}
.via h2{font:400 var(--f-m)/1.05 var(--serif)}
.direccion{font-style:normal;line-height:1.7;margin-top:.6rem}

/* diagnóstico */
.diag{display:grid;grid-template-columns:minmax(0,4fr) minmax(0,8fr);gap:var(--g);align-items:start}
.diag-lado{position:sticky;top:calc(var(--topo) + 3vh);display:grid;gap:1.4rem}
.diag-prog{display:flex;gap:4px}
.diag-prog i{flex:1;height:2px;background:var(--linea-2);transition:background var(--t-entra) var(--curva)}
.diag-prog i.on{background:var(--acento)}
.diag-placa{border:1px solid var(--linea);border-radius:8px;padding:1.2rem;display:grid}
.diag-placa div{display:flex;justify-content:space-between;gap:1rem;padding:.5rem 0;border-bottom:1px solid var(--linea);font-size:.84rem}
.diag-placa div:last-child{border-bottom:0}
.diag-placa span{color:var(--piedra)}
.diag-placa b{font-weight:500;text-align:right}
.diag-placa b.vazio{color:var(--piedra);font-weight:400}
.diag-paso{display:grid;gap:1.5rem}
.diag-paso[hidden]{display:none}
.diag-paso h2{font:330 var(--f-l)/1.02 var(--serif);letter-spacing:-.02em}
.opcoes{display:grid;gap:.55rem}
.opcao{display:flex;align-items:center;gap:1rem;padding:1rem 1.15rem;border:1px solid var(--linea-2);border-radius:8px;text-align:left;font-size:1rem;transition:background var(--t-toque) var(--curva),border-color var(--t-toque) var(--curva)}
.opcao kbd{font:500 .72rem/1 var(--sans);width:1.8rem;height:1.8rem;border:1px solid var(--linea-2);border-radius:4px;display:grid;place-items:center;color:var(--piedra-c);flex:none}
.opcao[aria-pressed="true"]{background:rgba(194,162,99,.12);border-color:var(--oro)}
.opcao[aria-pressed="true"] kbd{background:var(--oro);color:var(--tinta);border-color:var(--oro)}
@media (hover:hover) and (pointer:fine){.opcao:hover{border-color:var(--marfil)}}
.diag-acoes{display:flex;justify-content:space-between;align-items:center;gap:1rem;flex-wrap:wrap}
.reco{display:grid;gap:2rem}
.reco[hidden]{display:none}
.reco-grid{display:grid;grid-template-columns:1fr 1fr;gap:var(--g)}
.reco-grid>div{border-top:1px solid var(--linea-2);padding-top:1.1rem;display:grid;gap:.5rem}
.reco-grid b{font:400 var(--f-m)/1.1 var(--serif)}
.reco ol{counter-reset:p;display:grid;gap:.9rem}
.reco ol li{counter-increment:p;display:grid;grid-template-columns:2.4rem 1fr;gap:.8rem;color:var(--texto)}
.reco ol li::before{content:"0" counter(p);font:500 .8rem/1.6 var(--sans);color:var(--acento);letter-spacing:.1em}
.reco .deps{border-left:2px solid var(--acento);padding:1rem 1.2rem;background:rgba(194,162,99,.06);display:grid;gap:.5rem;font-size:.88rem;color:var(--texto)}
.reco .deps[hidden]{display:none}

/* ---------- 30 portada: composición (âncoras alternadas, título y frase lado a lado, media fuera del eje,
   dos momentos de pantalla entera, números enormes en contorno). Guía de ritmo, adaptada a los bloques de Ferreras. ---------- */
.hero-grid{display:grid;grid-template-columns:repeat(12,minmax(0,1fr));column-gap:var(--g);align-items:end;width:100%}
.hero-tit{grid-column:1/9;display:grid;gap:1.4rem}
.hero-lado{grid-column:9/13;display:grid;gap:1.5rem;padding-bottom:.7rem}
.hero-lado .lead{max-width:30ch}
@media (prefers-reduced-motion:no-preference){
  html.js .hero-tit .etiqueta,html.js .hero-lado>*{opacity:0;transform:translate3d(0,22px,0);transition:opacity var(--t-cena) var(--curva),transform var(--t-cena) var(--curva);transition-delay:calc(380ms + var(--i,0)*110ms)}
  html.js .hero.pronto .hero-tit .etiqueta,html.js .hero.pronto .hero-lado>*{opacity:1;transform:none}
}

.p-cab{align-items:start;margin-bottom:clamp(2.6rem,6vh,4.2rem)}
.p-tit{grid-column:2/8;display:grid;gap:1.3rem}
.p-lead{grid-column:9/12;margin-top:5.6rem}
.p-prod .carril{padding-left:16vw;scroll-padding-inline:16vw}
.p-prod .carril-item{width:auto}
.p-prod .carril-item .ventana{height:min(66svh,640px);width:auto;aspect-ratio:9/16}
.p-prod .carril-item .pie{max-width:calc(min(66svh,640px)*9/16)}
.p-pe{align-items:end;margin-top:2.4rem}
.p-pe .prod-dado{grid-column:2/9;max-width:none}
.p-pe .prod-dado b{font-size:clamp(2.6rem,5vw,5.2rem)}
.p-pe .prod-dado>span{max-width:34ch}
.p-pe .carril-ctl{grid-column:10/13;justify-self:end;padding-bottom:.4rem}

.interludio{position:relative;height:100svh;min-height:560px;overflow:hidden;isolation:isolate;display:grid;align-items:end;padding:0 var(--g) 11vh}
.interludio .filme{z-index:-2}
.int-velo{position:absolute;inset:0;z-index:-1;background:linear-gradient(0deg,rgba(13,11,9,.86),rgba(13,11,9,0) 55%),linear-gradient(90deg,rgba(13,11,9,.5),rgba(13,11,9,0) 62%)}
.int-h{margin-left:8%;max-width:15ch}

.p-mit{padding-top:clamp(8rem,24vh,15rem)}
.p-mit-cab{align-items:end;margin-bottom:clamp(2.6rem,6vh,4.2rem)}
.contorno{font:300 clamp(7rem,19vw,20rem)/.8 var(--serif);letter-spacing:-.045em;color:transparent;-webkit-text-stroke:1px rgba(243,230,220,.3);white-space:nowrap;pointer-events:none;user-select:none;-webkit-user-select:none}
.mit-24{grid-column:1/7;align-self:end;margin-bottom:-.06em}
.p-mit-tit{grid-column:7/13;display:grid;gap:1.3rem}
.rx-total{margin-inline:calc(var(--g)*-1);border-radius:0;aspect-ratio:auto;height:min(92svh,860px)}
.rx-total .rx-rot{bottom:2.4rem;padding:0 var(--g)}

.p-sect-cab{margin-left:8%}
.p-sect .sect{height:auto;align-items:flex-start;margin-left:8%;margin-right:calc(var(--g)*-1)}
.p-sect .sect a{height:min(62svh,600px)}
.p-sect .sect a:nth-child(2){margin-top:80px}
.p-sect .sect a:nth-child(3){margin-top:40px}
.p-sect .sect a:nth-child(4){margin-top:120px}

.p-marca-tit{grid-column:2/11}
.trofeus{margin-top:clamp(5.5rem,14vh,9rem);align-items:start}
.trofeu{position:relative;display:grid;gap:.9rem}
.trofeu .contorno{position:absolute;left:-.05em;top:0;transform:translateY(-55%);z-index:0;-webkit-text-stroke:1.3px rgba(23,18,12,.34)}
.trofeu>.ventana,.trofeu>.tr-reloj{position:relative;z-index:1}
.trofeu>figcaption{position:relative;z-index:1}
.t1{grid-column:2/7}
.t1 .ventana{aspect-ratio:4/5}
.t2{grid-column:8/12;margin-top:9rem}
.t2 .contorno{left:auto;right:-.05em}
.tr-reloj{width:min(100%,430px);justify-self:center;filter:drop-shadow(0 30px 50px rgba(23,18,12,.35))}
.t2 .pie{justify-content:center}
.p-marca-pe{margin-top:clamp(3rem,7vh,4.5rem);align-items:center}
.p-marca-pe>p:first-child{grid-column:2/6}
.p-marca-pe .marca-nota{grid-column:8/12}


.p-noche{padding-top:clamp(8rem,22vh,14rem)}
.p-final .final-txt{grid-column:2/9}

@media (max-width:900px){
  .hero-grid{grid-template-columns:minmax(0,1fr);row-gap:1.2rem}
  .hero-tit,.hero-lado{grid-column:1}
  .hero-lado{padding-bottom:0;gap:1.1rem}
  .p-lead{margin-top:0;padding-left:12%}
  .p-prod .carril{padding-left:12vw;scroll-padding-inline:12vw}
  .p-prod .carril-item .ventana{height:min(64svh,calc(66vw*16/9))}
  .p-prod .carril-item .pie{max-width:calc(min(64svh,calc(66vw*16/9))*9/16)}
  .p-pe .carril-ctl{justify-self:start}
  .p-pe .prod-dado b{font-size:2.4rem}
  .interludio{padding-bottom:calc(9vh + env(safe-area-inset-bottom,0px))}
  .int-h{margin-left:0}
  .p-mit{padding-top:6rem}
  .contorno{font-size:clamp(5.5rem,30vw,9rem)}
  .p-mit-tit{padding-left:10%}
  .rx-total{height:auto;aspect-ratio:4/5}
  .p-sect-cab{margin-left:0}
  .p-sect .sect{margin:0;padding-bottom:28px}
  .p-sect .sect a{height:auto;margin-top:0!important}
  .p-sect .sect a:nth-child(even){transform:translateY(28px)}
  .t2{margin-top:6rem;padding-left:20%}
  .trofeu .contorno{transform:translateY(-50%)}
  .p-noche{padding-top:7rem}
}

/* ---------- 99 telemóvel: composición propia, una idea por pantalla ---------- */
@media (max-width:1100px){
  .topo-lado{gap:1.1rem;font-size:.72rem}
}
@media (max-width:900px){
  :root{--topo:62px;--pad:4.25rem}
  .topo{grid-template-columns:auto 1fr auto;gap:.8rem}
  .topo-lado,.topo-cta{display:none}
  .menu-botao{display:inline-flex}
  .topo-marca svg{height:21px}
  .topo-dir{grid-column:3;gap:.85rem}
  .hud{gap:.55rem}
  .hud-hora{font-size:.86rem}
  .hud-hora small{display:none}
  .hud-dock{width:32px;height:32px}
  .hud-anillo{inset:-4px}
  .grelha{grid-template-columns:minmax(0,1fr);row-gap:2.2rem}
  .grelha>*{grid-column:1/-1!important}
  .cab{gap:1rem;margin-bottom:1.8rem}
  .hero{padding-bottom:calc(9vh + env(safe-area-inset-bottom,0px))}
  .hero-velo{background:linear-gradient(0deg,rgba(13,11,9,.9) 0%,rgba(13,11,9,.55) 38%,rgba(13,11,9,0) 62%),linear-gradient(180deg,rgba(13,11,9,.88) 0%,rgba(13,11,9,.5) 12%,rgba(13,11,9,0) 30%)}
  .hero-txt{gap:1.1rem}
  .hero-pista{display:none}
  .pag-media{min-height:92svh}
  .pm-velo{background:linear-gradient(0deg,rgba(13,11,9,.92) 0%,rgba(13,11,9,.5) 45%,rgba(13,11,9,.1) 75%),linear-gradient(180deg,rgba(13,11,9,.55),rgba(13,11,9,0) 22%)}
  .prod-cab{margin-bottom:1.4rem;gap:1.2rem}
  .prod-dado b{font-size:2.1rem}
  .carril-item{width:62vw}
  .carril-item.h{width:84vw}
  .carril-item.h .ventana{height:calc(62vw*16/9)}
  .prod-pe .mini{display:none}
  .rx{aspect-ratio:4/5}
  .rx-rot{max-width:80%;padding:0 1.1rem}
  .rx-rot span{font-size:1.25rem}
  .rx-rot.d{top:1.2rem;bottom:auto}
  .rx-pega{width:52px;height:52px;margin:-26px 0 0 -26px}
  .sect,.sect.baixo{display:grid;grid-template-columns:1fr 1fr;height:auto;gap:10px}
  .sect a{aspect-ratio:3/4.2;padding:1rem}
  .sect h3{font-size:1.15rem;margin:.4rem 0 0}
  .sect p,.sect .etiqueta{display:none}
  .sect .fl{width:34px;height:34px;right:.8rem;top:.8rem}
  .marca-fotos .f1{width:70%}
  .marca-fotos .f2{width:52%;right:0;bottom:-6%}
  .marca-txt{margin-top:2rem}
  .dep-foto .ventana{aspect-ratio:4/4.4}
  .incluye-g{grid-template-columns:1fr}
  .dia24-svg{width:min(100%,420px)}
  .final-dados{grid-template-columns:1fr 1fr}
  .rodape-cols{grid-template-columns:1fr 1fr}
  .rodape-cols>div:first-child{grid-column:1/-1}
  .barra-dx{display:block;position:fixed;right:var(--g);bottom:calc(16px + env(safe-area-inset-bottom,0px));z-index:42}
  .barra-dx[hidden]{display:none}
  .barra-dx .btn{box-shadow:0 14px 40px rgba(0,0,0,.4);padding:.9rem 1.2rem;font-size:.84rem;opacity:0;transform:translateY(16px);pointer-events:none;transition:opacity var(--t-entra) var(--curva),transform var(--t-entra) var(--curva)}
  .barra-dx.on .btn{opacity:1;transform:none;pointer-events:auto}
  .pag-hero{grid-template-columns:minmax(0,1fr);min-height:auto;padding-top:calc(var(--topo) + 7vh);row-gap:2rem}
  .pag-hero .ph-txt,.pag-hero.com-foto .ph-txt,.pag-hero .ph-foto{grid-column:1}
  .pag-hero .ph-foto{aspect-ratio:4/3.4}
  .pag-hero h1.t-xl,.pag-hero.com-foto h1.t-xl{font-size:clamp(2.2rem,10vw,3rem)}
  .pag-media{display:grid;align-items:end}
  .compara,.planos,.pagos,.banda,.vias,.diag,.reco-grid,.demo{grid-template-columns:minmax(0,1fr)}
  .marcas{display:flex;overflow-x:auto;scroll-snap-type:x mandatory;gap:12px;margin-inline:calc(var(--g)*-1);padding-inline:var(--g);scroll-padding-inline:var(--g);scrollbar-width:none}
  .marcas::-webkit-scrollbar{display:none}
  .marca-c{flex:none;width:68vw;scroll-snap-align:start}
  .filtro-rot{width:auto;flex-basis:100%}
  .filtros{flex-wrap:nowrap;overflow-x:auto;scrollbar-width:none;margin-inline:calc(var(--g)*-1);padding-inline:var(--g)}
  .filtros::-webkit-scrollbar{display:none}
  .filtros button{flex:none}
  .banda .acoes{justify-content:flex-start}
  .diag-lado{position:static}
  .diag-placa{display:none}
  .campo-duo{grid-template-columns:1fr}
  .chat{height:min(66svh,520px)}
  .msg{font-size:.86rem;max-width:90%}
  .via{padding:1.4rem}
}
@media (max-width:420px){
  .hud-hora{font-size:.8rem}
}
@media (prefers-reduced-motion:reduce){
  .reloj .brillo{animation:none}
  html.suave{scroll-behavior:auto}
}

/* ---------- 40 v3: el texto se ve antes de leerse. Sin acordeones, sin cartones numerados, sin pestañas ---------- */
/* problemas: una línea cada uno, tachada en oro al entrar */
.tachado{display:grid;gap:.15em;font:330 clamp(1.9rem,4.4vw,4.4rem)/1.06 var(--serif);letter-spacing:-.025em;margin:0 0 clamp(2.6rem,7vh,4.5rem)}
.tachado li span{background:linear-gradient(var(--acento),var(--acento)) no-repeat 0 56%/0% 2px;transition:background-size 1100ms var(--curva),color 1100ms var(--curva);transition-delay:calc(260ms + var(--i,0)*170ms);padding-right:.1em}
.tachado li.dentro span{background-size:100% 2px;color:rgba(243,230,220,.38)}
.tachado li:nth-child(even){padding-left:8%}
@media (prefers-reduced-motion:reduce){.tachado li span{transition:none}}
.margem .promessa{margin:0;max-width:24ch;margin-left:auto;text-align:right}
.margem>.etiqueta{margin-bottom:clamp(1.8rem,4vh,2.6rem)}

/* qué incluye: índice con la imagen o el vídeo de la línea activa */
.indice{display:grid;grid-template-columns:minmax(0,7fr) minmax(0,5fr);gap:var(--g);align-items:start}
.indice-lista{border-top:1px solid var(--linea)}
.ix{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,15rem);gap:.4rem 1.6rem;align-items:baseline;padding:1.25rem 0;border-bottom:1px solid var(--linea)}
.ix-mini{display:none}
.ix h3{font:330 clamp(1.5rem,2.6vw,2.6rem)/1.05 var(--serif);letter-spacing:-.02em;color:rgba(243,230,220,.36);transition:color var(--t-entra) var(--curva),transform var(--t-entra) var(--curva)}
.ix h3 a .fl{font-size:.6em;color:var(--acento);opacity:0;transition:opacity var(--t-toque) linear}
.ix p{font-size:.88rem;line-height:1.4;color:var(--piedra-c);opacity:.5;transition:opacity var(--t-entra) var(--curva)}
.ix.on h3{color:var(--marfil);transform:translateX(.4rem)}
.ix.on h3 a .fl{opacity:1}
.ix.on p{opacity:1;color:var(--texto)}
.indice-vista{position:sticky;top:calc(var(--topo) + 4vh);aspect-ratio:4/5;max-height:76svh;border-radius:4px}
.iv{position:absolute;inset:0;opacity:0;transition:opacity var(--t-cena) var(--curva)}
.iv.on{opacity:1}
.iv img,.iv video{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;transform:scale(1.04);transition:transform 2.4s var(--curva)}
.iv.on img,.iv.on video{transform:none}

/* el método: una sola línea de palabras unidas por un trazo que se dibuja */
.flujo{display:flex;align-items:center;font:330 clamp(1.3rem,2.3vw,2.3rem)/1 var(--serif);letter-spacing:-.015em}
.flujo li{display:flex;align-items:center;flex:1 1 auto;white-space:nowrap}
.flujo li:last-child{flex:0 0 auto}
.flujo li:not(:last-child)::after{content:"";flex:1;min-width:1.2rem;height:1px;margin:0 1rem;background:var(--acento);transform:scaleX(0);transform-origin:0 50%;transition:transform 900ms var(--curva);transition-delay:calc(200ms + var(--i)*160ms)}
.flujo.dentro li::after{transform:scaleX(1)}
@media (prefers-reduced-motion:reduce){.flujo li::after{transform:none}}

/* capacidades: título grande y media línea, en dos columnas */
.lineas{display:grid;grid-template-columns:1fr 1fr;gap:0 var(--g);border-top:1px solid var(--linea)}
.lineas li{display:grid;gap:.45rem;padding:1.3rem 0 1.4rem;border-bottom:1px solid var(--linea)}
.lineas h3{font:330 clamp(1.35rem,2vw,2rem)/1.08 var(--serif);letter-spacing:-.015em}
.lineas p{font-size:.92rem;color:var(--texto)}

/* casos: fotografía, sector, título y el resultado en una línea. Nada se abre */
.ccs{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:clamp(14px,1.4vw,22px)}
.ccs[style*="--n:1"]{grid-template-columns:minmax(0,1fr)}
.ccs[style*="--n:2"]{grid-template-columns:repeat(2,minmax(0,1fr))}
.cc{position:relative;aspect-ratio:4/5;border-radius:4px;overflow:hidden;background:var(--noche-2);display:flex;flex-direction:column;justify-content:flex-end;isolation:isolate}
.ccs[style*="--n:1"]{max-width:62rem}
.ccs[style*="--n:1"] .cc{aspect-ratio:16/9}
.cc[hidden]{display:none}
.cc-foto{position:absolute;inset:0;z-index:-2}
.cc-foto img{width:100%;height:100%;object-fit:cover;transition:transform var(--t-cena) var(--curva)}
.cc::before{content:"";position:absolute;inset:0;z-index:-1;background:linear-gradient(180deg,rgba(13,11,9,0) 34%,rgba(13,11,9,.9))}
.cc-txt{display:grid;gap:.6rem;padding:clamp(1.2rem,2vw,1.8rem)}
.cc h3{font:330 clamp(1.25rem,1.7vw,1.75rem)/1.08 var(--serif);letter-spacing:-.015em;color:var(--marfil);text-wrap:balance}
.cc-r{font-size:.9rem;line-height:1.4;color:rgba(243,230,220,.82);max-width:40ch}
.cc-ev{font:500 var(--f-mi)/1.4 var(--sans);letter-spacing:.08em;color:var(--acento-2);border-left:2px solid var(--acento);padding-left:.7rem}
@media (hover:hover) and (pointer:fine){.cc:hover .cc-foto img{transform:scale(1.04)}}
.nota-casos{margin-top:1.6rem}

/* quién somos: el estándar junto a una fotografía */
.estandar{align-items:center}
.est-foto{grid-column:1/6;aspect-ratio:4/5}
.est-txt{grid-column:7/13;display:grid;gap:1.4rem}
.est-txt .promessa{margin:0}
.marcas .marca-c:nth-child(3n+2){margin-top:4.5rem}
.marca-c figcaption{display:grid;gap:.45rem}
.sect-idx{padding-top:0}

@media (max-width:900px){
  .tachado{font-size:clamp(1.65rem,7.4vw,2.4rem)}
  .tachado li:nth-child(even){padding-left:0}
  .margem .promessa{text-align:left;margin-left:0}
  .indice{grid-template-columns:minmax(0,1fr)}
  .indice-vista{display:none}
  .ix{grid-template-columns:64px minmax(0,1fr);gap:.2rem 1rem;align-items:center;padding:1rem 0}
  .ix-mini{display:block;grid-row:1/3;width:64px;aspect-ratio:4/5;border-radius:3px}
  .ix-mini img{width:100%;height:100%;object-fit:cover}
  .ix h3{font-size:1.4rem;color:var(--marfil)}
  .ix p{opacity:1;color:var(--texto)}
  .ix.on h3{transform:none}
  .flujo{flex-direction:column;align-items:flex-start;font-size:1.6rem}
  .flujo li{flex-direction:column;align-items:flex-start}
  .flujo li:not(:last-child)::after{width:1px;height:1.6rem;min-width:0;flex:none;margin:.55rem 0 .55rem .5rem;transform:scaleY(0);transform-origin:50% 0}
  .flujo.dentro li::after{transform:scaleY(1)}
  .lineas{grid-template-columns:minmax(0,1fr)}
  .ccs,.ccs[style*="--n:2"]{display:flex;overflow-x:auto;scroll-snap-type:x mandatory;gap:12px;margin-inline:calc(var(--g)*-1);padding-inline:var(--g);scroll-padding-inline:var(--g);scrollbar-width:none}
  .ccs::-webkit-scrollbar{display:none}
  .ccs .cc{flex:none;width:80vw;scroll-snap-align:start}
  .ccs[style*="--n:1"] .cc{width:100%;aspect-ratio:4/5}
  .est-foto,.est-txt{grid-column:1}
  .est-foto{width:82%}
  .marcas .marca-c:nth-child(3n+2){margin-top:0}
}

/* ---------- 50 v4: un solo filme, la ruta del coche, el diagnóstico como viaje, formularios que envían ---------- */
main{position:relative}

/* hero: al salir, el filme se recoge en un cartel y el título sube (De Antonio: grande a pequeño) */
@media (prefers-reduced-motion:no-preference){
  .hero .filme{clip-path:inset(calc(var(--q,0)*9%) calc(var(--q,0)*7%) round calc(var(--q,0)*22px));transform:scale(calc(1 + var(--q,0)*.06));transform-origin:50% 40%}
  .hero-grid{opacity:calc(1 - var(--q,0)*1.6);transform:translate3d(0,calc(var(--q,0)*-10vh),0)}
  /* interludio: entra como una ventana pequeña y se abre hasta la pantalla entera (pequeño a grande) */
  .interludio .filme{clip-path:inset(calc((1 - var(--a,1))*18%) calc((1 - var(--a,1))*26%) round calc((1 - var(--a,1))*18px))}
  .interludio .int-h{opacity:clamp(0,calc(var(--a,1)*2 - 1),1)}
}

/* la ruta: carretera discontinua fija, la estela en canvas y el coche por encima; los túneles la tapan */
.ruta{position:absolute;left:0;top:0;width:100%;height:0;z-index:1;pointer-events:none}
.ruta[hidden],.ruta-luz[hidden]{display:none}
.ruta-svg{position:absolute;left:0;top:0;overflow:visible}
.ruta-p{fill:none;stroke:rgba(194,162,99,.42);stroke-width:1.2;stroke-dasharray:3 10;stroke-linecap:round}
.ruta-luz{position:fixed;left:0;top:0;width:100vw;height:100vh;z-index:1;pointer-events:none}
.coche-w{position:absolute;left:-23px;top:-50px;width:46px;height:101px;will-change:transform;transition:opacity var(--t-entra) linear}
.coche-w .coche{position:relative;display:block;width:100%;height:100%;z-index:1;filter:drop-shadow(0 6px 10px rgba(0,0,0,.45))}
.feixe{position:absolute;left:50%;top:86%;width:150px;height:240px;margin-left:-75px;clip-path:polygon(40% 0,60% 0,100% 100%,0 100%);background:linear-gradient(rgba(255,244,222,.32),rgba(255,244,222,0) 80%);opacity:calc(.55 + var(--v,0)*.45);mix-blend-mode:screen}
.coche-w::before{content:"";position:absolute;left:50%;top:-6px;width:60px;height:36px;margin-left:-30px;border-radius:50%;background:radial-gradient(rgba(255,40,30,.55),transparent 70%);opacity:calc(.25 + var(--v,0)*.75)}
.ruta.chegou .coche-w{opacity:0}
.interludio,.rx-total{z-index:2}
.rx-total{position:relative}
.com-ruta .p-final .dj-coche{opacity:0}
.com-ruta .p-final .dj.ruta-ok .dj-coche,.com-ruta .p-final .dj.chegou .dj-coche{opacity:1}

/* qué hacemos: dos puertas */
.p-que-cab{align-items:end;margin-bottom:clamp(2.4rem,6vh,4rem)}
.p-que-tit{grid-column:2/8;display:grid;gap:1.3rem}
.p-que-lead{grid-column:9/13}
.puertas{display:grid;grid-template-columns:1fr 1fr;gap:clamp(14px,1.6vw,26px);margin-left:calc(100%/12)}
.puerta{position:relative;display:grid;grid-template-rows:auto 1fr;border-radius:6px;overflow:hidden;background:var(--noche-2);isolation:isolate}
.puerta .pu-media{aspect-ratio:16/11;border-radius:0}
.puerta .pu-media img,.puerta .pu-media video{width:100%;height:100%;object-fit:cover;transition:transform var(--t-cena) var(--curva)}
.pu-txt{display:grid;gap:1rem;padding:clamp(1.4rem,2.4vw,2.2rem);align-content:start}
.pu-txt h3{font:330 var(--f-m)/1.04 var(--serif);letter-spacing:-.02em}
.pu-txt h3 em{font-style:italic;color:var(--acento-2)}
.pu-txt ul{display:grid;gap:.45rem;margin:.2rem 0 .6rem}
.pu-txt li{display:flex;gap:.7rem;align-items:baseline;color:var(--texto);font-size:.96rem}
.pu-txt li::before{content:"";width:5px;height:5px;flex:none;background:var(--acento);transform:translateY(-.15rem)}
.pu-txt .enlace{justify-self:start}
@media (hover:hover) and (pointer:fine){.puerta:hover .pu-media img,.puerta:hover .pu-media video{transform:scale(1.04)}.puerta:hover .enlace{border-color:var(--acento)}.puerta:hover .enlace .fl{transform:translateX(4px)}}

/* pilares (marketing e IA): tres medios altos, en escalera */
.pilares{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:clamp(14px,1.6vw,26px);align-items:start}
.pilar{display:grid;gap:1rem}
.pilar:nth-child(2){margin-top:4.5rem}
.pilar:nth-child(3){margin-top:2rem}
.pilar .ventana{aspect-ratio:4/5}
.pilar .ventana img,.pilar .ventana video{width:100%;height:100%;object-fit:cover}
.pilar h3{font:330 var(--f-m)/1 var(--serif);letter-spacing:-.02em}
.pilar p{color:var(--texto);max-width:34ch;margin-top:.4rem}
.p-pilares .cab{margin-left:calc(100%/12)}

/* antes y después */
.antes{align-items:center}
.antes-txt{grid-column:1/6;display:grid;gap:1.4rem}
.rx-ad{grid-column:7/13;aspect-ratio:4/5;max-height:82svh;justify-self:end;width:100%}
.rx-ad .rx-capa video{width:100%;height:100%;object-fit:cover}
.rx-ad .rx-dia img{filter:grayscale(.55) brightness(.92)}
.ficha{position:absolute;left:1.2rem;top:1.2rem;display:grid;gap:.3rem;padding:1rem 1.1rem;background:rgba(243,230,220,.94);color:var(--tinta);border-radius:4px;max-width:60%}
.ficha .etiqueta{color:#6f6658}
.ficha b{font:500 1rem/1.2 var(--sans)}
.ficha span{font-size:.8rem;color:#5a5245}
.ad-dado{position:absolute;right:1.2rem;top:1.2rem;display:grid;gap:.2rem;text-align:right}
.ad-dado b{font:300 clamp(1.6rem,2.4vw,2.4rem)/1 var(--serif);color:#fff;text-shadow:0 2px 20px rgba(0,0,0,.5)}
.ad-dado span{font-size:.78rem;color:rgba(255,255,255,.85);text-shadow:0 1px 10px rgba(0,0,0,.6)}
.cifras-m{display:grid;gap:0;border-top:1px solid var(--linea);margin-top:.6rem}
.cifras-m div{display:grid;gap:.35rem;padding:1rem 0;border-bottom:1px solid var(--linea)}
.cifras-m dt{font:330 clamp(1.3rem,1.8vw,1.8rem)/1 var(--serif);letter-spacing:-.015em;white-space:nowrap}
.cifras-m dd{margin:0;font-size:.88rem;color:var(--texto)}

/* IA: consultas que entran de noche, en el hero */
.feed{position:absolute;right:var(--g);bottom:12vh;z-index:1;display:grid;gap:.6rem;width:min(360px,34vw)}
.feed li{display:grid;gap:.25rem;padding:.8rem 1rem;border-radius:10px;background:rgba(0,16,31,.62);border:1px solid rgba(91,134,255,.28);backdrop-filter:blur(10px);-webkit-backdrop-filter:blur(10px)}
.fd-h{font:500 .66rem/1 var(--sans);letter-spacing:.16em;color:var(--senal-2)}
.fd-t{font-size:.9rem;color:var(--marfil)}
.fd-ok{font-size:.72rem;color:var(--oro-2);display:flex;gap:.4rem;align-items:center}
.fd-ok::before{content:"✓"}
@media (prefers-reduced-motion:no-preference){
  html.js .feed li{opacity:0;transform:translate3d(0,14px,0);animation:feed 9s var(--curva) infinite;animation-delay:calc(1.2s + var(--i)*1.1s)}
  html.js .feed li .fd-ok{opacity:0;animation:feedok 9s linear infinite;animation-delay:calc(1.2s + var(--i)*1.1s)}
}
@keyframes feed{0%{opacity:0;transform:translate3d(0,14px,0)}6%,82%{opacity:1;transform:none}92%,100%{opacity:0;transform:translate3d(0,-6px,0)}}
@keyframes feedok{0%,9%{opacity:0}13%,82%{opacity:1}92%,100%{opacity:0}}

/* la conversación, corta, dentro de un teléfono */
.conversa{align-items:center}
.conv-txt{grid-column:1/6;display:grid;gap:1.3rem}
.movil{grid-column:7/12;justify-self:center;width:min(380px,100%);padding:12px;border-radius:44px;background:linear-gradient(160deg,#2a241d,#080605);box-shadow:0 40px 80px rgba(0,0,0,.45),inset 0 0 0 1px rgba(255,255,255,.08)}
.movil .chat{border-radius:34px;min-height:560px;padding:1.4rem 1rem 1rem}
.movil .msg{font-size:.95rem}

/* ===== el diagnóstico como viaje (claro), con la placa de la casa ===== */
.diag-sec{padding-top:clamp(3rem,7vh,5rem)}
.final-cab{align-items:end;margin-bottom:clamp(2.2rem,5vh,3.4rem)}
.final-cab .final-txt{grid-column:1/8;gap:1.4rem}
.final-lead{grid-column:9/13}
.dj{display:grid;grid-template-columns:minmax(0,8fr) minmax(0,4fr);grid-template-areas:"e p" "c p";gap:2.2rem var(--g);align-items:start;--k:0}
.dj-estrada{grid-area:e;position:relative;padding:2.6rem 0 0}
.dj-linha{position:relative;height:2px;background:repeating-linear-gradient(90deg,rgba(23,18,12,.28) 0 6px,transparent 6px 14px)}
.dj-linha i{position:absolute;left:0;top:0;height:100%;width:100%;background:var(--oro-3);transform-origin:0 50%;transform:scaleX(var(--k));transition:transform var(--t-cena) var(--curva)}
.dj-etapas{position:relative;height:2.2rem;margin-top:.9rem}
.dj-etapas li{position:absolute;left:calc(var(--p)*100%);transform:translateX(calc(var(--p)*-100%));font:500 var(--f-mi)/1 var(--sans);letter-spacing:.16em;text-transform:uppercase;color:var(--piedra-c);white-space:nowrap}
.dj-etapas li::before{content:"";position:absolute;top:-1.55rem;left:calc(var(--p)*100%);width:9px;height:9px;margin-left:calc(var(--p)*-9px);border-radius:50%;background:var(--marfil);border:1px solid var(--oro-3)}
.dj-coche{position:absolute;top:2.6rem;left:calc(var(--k)*(100% - 52px) + 26px);width:52px;height:24px;margin:-11px 0 0 -26px;transition:left var(--t-cena) var(--curva),opacity var(--t-entra) linear}
.dj-coche .coche{width:24px;height:52px;transform:translate(14px,-14px) rotate(-90deg);filter:drop-shadow(0 4px 6px rgba(0,0,0,.35))}
.dj-corpo{grid-area:c;min-width:0}
.dj-passo,.dj-reco{display:grid;gap:1.3rem}
.dj-passo[hidden],.dj-reco[hidden]{display:none}
.dj-q{font:330 var(--f-l)/1.02 var(--serif);letter-spacing:-.02em;outline:none;text-wrap:balance}
.dj-a{color:var(--texto);max-width:56ch}
.dj-ops{display:grid;grid-template-columns:1fr 1fr;gap:1px;padding:1px;background:rgba(243,230,220,.08);border-radius:10px;overflow:hidden;background-color:var(--noche);margin-top:.4rem}
.op{position:relative;display:grid;grid-template-columns:auto 1fr auto;align-items:center;gap:1rem;min-height:4.6rem;padding:1rem 1.15rem;background:var(--noche);color:var(--marfil);text-align:left;font-size:1rem;line-height:1.3;transition:background var(--t-toque) var(--curva)}
.op kbd{font:500 .7rem/1 var(--sans);width:1.7rem;height:1.7rem;border:1px solid rgba(243,230,220,.22);border-radius:50%;display:grid;place-items:center;color:var(--piedra-c);transition:background var(--t-toque) var(--curva),color var(--t-toque) var(--curva),border-color var(--t-toque) var(--curva)}
.op-i{width:30px;height:30px;fill:none;stroke:rgba(243,230,220,.55);stroke-width:1.3;stroke-linecap:round;stroke-linejoin:round;transition:stroke var(--t-toque) var(--curva)}
.op-n{display:flex;gap:3px;align-items:flex-end;height:22px}
.op-n i{width:5px;background:rgba(243,230,220,.18);border-radius:1px}
.op-n i:nth-child(1){height:30%}.op-n i:nth-child(2){height:55%}.op-n i:nth-child(3){height:78%}.op-n i:nth-child(4){height:100%}
.op-n[style*="--n:1"] i:nth-child(-n+1),.op-n[style*="--n:2"] i:nth-child(-n+2),.op-n[style*="--n:3"] i:nth-child(-n+3),.op-n[style*="--n:4"] i{background:var(--oro-2)}
.com-foto .op{min-height:6.4rem;grid-template-columns:auto 1fr;padding-right:40%;overflow:hidden}
.dj-nav [hidden]{display:none}
.op-f{position:absolute;right:0;top:0;bottom:0;width:40%;height:100%;object-fit:cover;-webkit-mask:linear-gradient(90deg,transparent,#000 40%);mask:linear-gradient(90deg,transparent,#000 40%);opacity:.8;transition:opacity var(--t-entra) var(--curva)}
.op[aria-pressed="true"]{background:#0a2547}
.op[aria-pressed="true"] kbd{background:var(--oro);border-color:var(--oro);color:var(--tinta)}
.op[aria-pressed="true"] .op-i{stroke:var(--oro-2)}
.op[aria-pressed="true"] .op-f{opacity:1}
.op[aria-pressed="true"]::after{content:"";position:absolute;inset:0;border:1px solid var(--oro);pointer-events:none}
@media (hover:hover) and (pointer:fine){.op:hover{background:#06213f}.op:hover .op-f{opacity:1}.op:hover kbd{border-color:var(--oro-2);color:var(--marfil)}}
.op:focus-visible{outline:2px solid var(--oro);outline-offset:-2px}
.dj-nav{display:flex;justify-content:space-between;align-items:center;gap:1rem;flex-wrap:wrap;margin-top:.4rem}
.dj-nav .acoes{display:flex;gap:.6rem;flex-wrap:wrap}
.claro .btn-linha.btn-peq{--fg:var(--tinta);--bd:rgba(23,18,12,.25)}
.reco-g{display:grid;grid-template-columns:1fr 1fr;gap:var(--g)}
.reco-g>div{border-top:1px solid var(--linea-2);padding-top:1rem;display:grid;gap:.5rem;align-content:start}
.reco-g b{font:400 var(--f-m)/1.08 var(--serif)}
.reco-t{margin-top:.4rem}
.reco-acoes{counter-reset:p;display:grid;gap:.8rem}
.reco-acoes li{counter-increment:p;display:grid;grid-template-columns:2.2rem 1fr;gap:.8rem;color:var(--texto)}
.reco-acoes li::before{content:counter(p);font:330 1.3rem/1.1 var(--serif);color:var(--oro-3)}
.dj-reco .deps{border-left:2px solid var(--oro-3);padding:1rem 1.2rem;background:rgba(169,139,82,.08);display:grid;gap:.4rem;font-size:.88rem;color:var(--texto)}

/* la placa: fotografía, marca, las respuestas y el sello */
.placa{grid-area:p;position:sticky;top:calc(var(--topo) + 3vh);border-radius:10px;overflow:hidden;background:var(--noche);color:var(--marfil);box-shadow:0 30px 60px rgba(23,18,12,.22)}
.placa-foto{position:relative;aspect-ratio:16/10;overflow:hidden}
.placa-foto img{width:100%;height:100%;object-fit:cover;filter:brightness(.72)}
.placa-marca{position:absolute;left:1.1rem;right:1.1rem;bottom:1rem;display:flex;justify-content:space-between;align-items:flex-end}
.placa-marca svg{width:34px;height:auto}
.placa-marca span{font:500 var(--f-mi)/1 var(--sans);letter-spacing:.24em;text-transform:uppercase;color:rgba(243,230,220,.85)}
.placa-l{padding:.6rem 1.1rem;display:grid}
.placa-l>div{display:grid;grid-template-columns:6.5rem 1fr;gap:.8rem;align-items:baseline;padding:.6rem 0;border-bottom:1px solid rgba(243,230,220,.1);font-size:.84rem;cursor:pointer;transition:background var(--t-toque) linear}
.placa-l>div:last-child{border-bottom:0}
.placa-l dt{font:500 .64rem/1.3 var(--sans);letter-spacing:.16em;text-transform:uppercase;color:var(--piedra-c)}
.placa-l dd{margin:0;text-align:right;color:var(--marfil);font-weight:500}
.placa-l dd.vazio{color:rgba(243,230,220,.38);font-weight:400}
.placa-l dd.vazio::after{content:" ⌄";font-size:.8em}
.placa-l>div.atual dt{color:var(--oro-2)}
.placa-l>div:focus-visible{outline:1px solid var(--oro);outline-offset:2px}
.placa-pe{padding:.9rem 1.1rem 1.1rem;font-size:.72rem;letter-spacing:.06em;color:var(--piedra-c);border-top:1px solid rgba(243,230,220,.1)}
.placa-c .placa-l>div{cursor:default;grid-template-columns:5.5rem 1fr}
.placa-c .placa-pe{font-size:.86rem;letter-spacing:0;display:grid;gap:.5rem}
.placa-c a{color:var(--marfil)}
.selo{position:absolute;right:1rem;top:1rem;width:7.4rem;height:7.4rem;border-radius:50%;display:grid;place-content:center;text-align:center;gap:.2rem;border:2px solid var(--oro-2);color:var(--oro-2);background:rgba(0,16,31,.72);transform:rotate(-12deg) scale(1.6);opacity:0;transition:transform 520ms cubic-bezier(.2,1.4,.4,1),opacity 200ms linear}
.selo.on{transform:rotate(-12deg) scale(1);opacity:1}
.selo[hidden]{display:none}
.selo b{font:600 .8rem/1 var(--sans);letter-spacing:.24em;text-transform:uppercase}
.selo span{font-size:.64rem;letter-spacing:.06em}

/* formularios claros: subrayado, pastillas, casilla propia */
.form-l{display:grid;gap:1.6rem}
.form-l .campos{display:grid;grid-template-columns:1fr 1fr;gap:1.3rem var(--g)}
.form-l .campo.largo{grid-column:1/-1}
.claro .campo label,.claro .campo legend{color:#6f6658}
.claro .campo label small{color:#8b8274}
.claro .campo input,.claro .campo textarea{background:transparent;border:0;border-bottom:1px solid rgba(23,18,12,.28);border-radius:0;padding:.55rem 0;color:var(--tinta);font-size:1.05rem}
.claro .campo input:focus,.claro .campo textarea:focus{background:transparent;border-color:var(--tinta)}
.claro .campo [aria-invalid="true"]{border-color:#b4472f}
.claro .campo .erro{color:#b4472f}
.pills{border:0;padding:0;margin:0}
.pills>div{display:flex;flex-wrap:wrap;gap:.45rem;margin-top:.5rem}
.pills label{position:relative;cursor:pointer}
.pills input{position:absolute;opacity:0;inset:0;cursor:pointer}
.pills span{display:block;padding:.6rem 1rem;border-radius:999px;border:1px solid var(--linea-2);font-size:.88rem;transition:background var(--t-toque) var(--curva),color var(--t-toque) var(--curva),border-color var(--t-toque) var(--curva)}
.pills input:checked+span{background:var(--tinta);color:var(--marfil);border-color:var(--tinta)}
.sec:not(.claro) .pills input:checked+span{background:var(--marfil);color:var(--tinta);border-color:var(--marfil)}
.pills input:focus-visible+span{outline:2px solid var(--oro);outline-offset:2px}
.consent .check{display:grid;grid-template-columns:auto 1fr;gap:.8rem;align-items:start;cursor:pointer;font-size:.88rem;line-height:1.45;color:var(--texto)}
.consent input{position:absolute;opacity:0;width:1px;height:1px}
.consent i{width:20px;height:20px;border:1px solid var(--linea-2);border-radius:4px;margin-top:.1rem;display:grid;place-items:center;transition:background var(--t-toque) var(--curva)}
.consent input:checked+i{background:var(--oro);border-color:var(--oro)}
.consent input:checked+i::after{content:"";width:9px;height:5px;border-left:2px solid var(--tinta);border-bottom:2px solid var(--tinta);transform:rotate(-45deg) translate(1px,-1px)}
.consent input:focus-visible+i{outline:2px solid var(--oro);outline-offset:2px}
.consent a{text-decoration:underline;text-underline-offset:3px}
.envio{display:grid}
.envio [hidden]{display:none}
.envio-a{font-size:.9rem;color:var(--texto)}
.envio-ok,.envio-ko{padding:1rem 1.2rem;border-radius:6px;display:grid;gap:.3rem;font-size:.9rem}
.envio-ok{background:rgba(169,139,82,.12);border-left:2px solid var(--oro-3)}
.envio-ko{background:rgba(180,71,47,.08);border-left:2px solid #b4472f}
.envio a,.envio .enlace{text-decoration:underline;text-underline-offset:3px}
.form-l.enviado .campos{opacity:.55}
.contacto-g{align-items:start}
.contacto-form{grid-column:1/8}
.contacto-g .placa{grid-area:auto;grid-column:9/13}

@media (max-width:1099px){.ruta,.ruta-luz{display:none}}
@media (max-width:900px){
  .p-que-tit,.p-que-lead{grid-column:1}
  .puertas{grid-template-columns:1fr;margin-left:0}
  .pilares{display:flex;overflow-x:auto;scroll-snap-type:x mandatory;gap:12px;margin-inline:calc(var(--g)*-1);padding-inline:var(--g);scrollbar-width:none}
  .pilares::-webkit-scrollbar{display:none}
  .pilar{flex:none;width:76vw;scroll-snap-align:start;margin-top:0!important}
  .p-pilares .cab{margin-left:0}
  .antes-txt,.rx-ad{grid-column:1}
  .rx-ad{max-height:none}
  .feed{display:none}
  .conv-txt,.movil{grid-column:1}
  .movil .chat{min-height:480px}
  .final-cab .final-txt,.final-lead{grid-column:1}
  .dj{grid-template-columns:minmax(0,1fr);grid-template-areas:"e" "c" "p";gap:1.6rem}
  .dj-etapas li{font-size:.58rem;letter-spacing:.1em}
  .dj-etapas li:nth-child(2),.dj-etapas li:nth-child(3){display:none}
  .dj-ops{grid-template-columns:1fr}
  .op{min-height:3.9rem}
  .com-foto .op{min-height:5rem}
  .placa{position:relative;top:auto}
  .placa-foto{aspect-ratio:16/7}
  .reco-g{grid-template-columns:1fr}
  .form-l .campos{grid-template-columns:1fr}
  .contacto-form,.contacto-g .placa{grid-column:1}
  .contacto-g .placa{order:-1}
}

/* quién somos: fotografía a toda la altura a la derecha, sin esquinas vacías */
.ph-quien{min-height:100svh;align-items:center;padding-top:var(--topo);padding-bottom:0}
.ph-quien .ph-txt{grid-column:1/7;align-self:center;padding-block:6vh}
.ph-quien .ph-foto{grid-column:7/13;align-self:stretch;aspect-ratio:auto;margin:calc(var(--topo)*-1) calc(var(--g)*-1) 0 0;border-radius:0;min-height:100svh}
.ph-quien .ph-foto img{width:100%;height:100%;object-fit:cover;object-position:50% 30%}
.ph-quien .ph-foto::after{content:"";position:absolute;inset:0;background:linear-gradient(90deg,var(--noche) 0%,rgba(0,16,31,0) 28%),linear-gradient(0deg,rgba(0,16,31,.55),transparent 30%);pointer-events:none}
.ph-nomes{display:grid;gap:.8rem;margin-top:1.4rem;border-top:1px solid var(--linea);padding-top:1.2rem}
.ph-nomes ul{display:flex;flex-wrap:wrap;gap:.4rem 1.4rem}
.ph-nomes li{font:330 1.15rem/1.3 var(--serif);color:var(--marfil)}
.ph-nomes li:not(:last-child)::after{content:"·";margin-left:1.4rem;color:var(--acento)}

/* sectores: cuatro capítulos alternados */
.sect-caps{padding-top:clamp(4rem,10vh,7rem)}
.sxs{display:grid;gap:clamp(6rem,16vh,11rem)}
.sx{display:grid;grid-template-columns:repeat(12,minmax(0,1fr));column-gap:var(--g);align-items:center}
.sx-media{grid-column:1/8;aspect-ratio:4/3.1;border-radius:4px}
.sx-media img,.sx-media video{width:100%;height:100%;object-fit:cover;transition:transform var(--t-cena) var(--curva)}
.sx-txt{grid-column:9/13;position:relative;display:grid;gap:1.2rem;align-content:center}
.sx.inv .sx-media{grid-column:6/13;grid-row:1}
.sx.inv .sx-txt{grid-column:1/5;grid-row:1}
.sx-c{position:absolute;top:-.75em;left:-.1em;z-index:-1;font-size:clamp(5rem,12vw,12rem)}
.sx-txt h2{font-size:clamp(1.9rem,3vw,3.1rem)}
.sx-rot{font:500 var(--f-mi)/1 var(--sans);letter-spacing:.16em;text-transform:uppercase;color:var(--piedra-c);margin-top:.4rem}
.sx-chips{display:grid;gap:.1rem}
.sx-chips li{display:flex;gap:.7rem;align-items:baseline;padding:.55rem 0;border-bottom:1px solid var(--linea);font:330 1.05rem/1.3 var(--serif);color:var(--marfil)}
.sx-chips li::before{content:"";width:14px;height:1px;flex:none;background:var(--acento);transform:translateY(-.3rem)}
.sx .acoes{margin-top:.4rem}
@media (hover:hover) and (pointer:fine){.sx-media:hover img,.sx-media:hover video{transform:scale(1.035)}}
@media (max-width:900px){
  .ph-quien{min-height:auto;padding-top:calc(var(--topo) + 4vh)}
  .ph-quien .ph-txt,.ph-quien .ph-foto{grid-column:1}
  .ph-quien .ph-foto{grid-row:1;margin:calc(var(--topo)*-1 - 4vh) calc(var(--g)*-1) 0;min-height:0;aspect-ratio:4/4.4}
  .sx,.sx.inv{grid-template-columns:minmax(0,1fr);row-gap:1.6rem}
  .sx-media,.sx.inv .sx-media,.sx-txt,.sx.inv .sx-txt{grid-column:1;grid-row:auto}
  .sx-c{position:static;font-size:clamp(4rem,22vw,6rem);margin:-.1em 0 -.25em;z-index:0}
  .sxs{gap:4.5rem}
  .sect-caps{padding-top:3rem}
  .sx-txt{gap:1rem}
}
/* IA: la conversación, más compacta */
#demo{padding-block:clamp(3.5rem,9vh,6rem)}
.movil{width:min(330px,100%);padding:10px;border-radius:38px}
.movil .chat{min-height:0;border-radius:30px;padding:1.1rem .9rem .8rem}
.movil .chat-lista{padding:.6rem .1rem;gap:.55rem}
.movil .msg{font-size:.86rem;padding:.65rem .85rem}
@media (max-width:900px){.movil .chat{min-height:0}#demo{padding-block:3rem}}
.conv-lado{grid-column:7/13;position:relative;display:grid;place-items:center;min-height:min(82svh,640px)}
.conv-lado .movil{grid-column:auto;position:relative;z-index:1;width:min(380px,100%)}
.conv-c{position:absolute;left:50%;top:50%;transform:translate(-50%,-50%);font-size:clamp(7rem,16vw,15rem);-webkit-text-stroke:1px rgba(91,134,255,.28);z-index:0}
.conv-lado::before{content:"";position:absolute;inset:12% 18%;border-radius:50%;background:radial-gradient(rgba(0,34,241,.28),transparent 70%);filter:blur(30px);z-index:0}
.conv-txt{grid-column:2/7}
@media (max-width:900px){.conv-lado{grid-column:1;min-height:0}.conv-txt{grid-column:1}.conv-c{font-size:26vw}}
/* contacto: la foto de Fernando entera (vertical), con los coches y el Bentley a la vista */
.placa-c .placa-foto{aspect-ratio:1113/1413}
.placa-c .placa-foto img{object-position:50% 50%;filter:brightness(.9)}
@media (max-width:900px){.placa-c .placa-foto{aspect-ratio:1113/1413}}
.placa-l dd{overflow-wrap:anywhere;min-width:0}
@media (max-width:900px){.placa-c .placa-l>div{grid-template-columns:4.6rem minmax(0,1fr)}.contacto-g{grid-template-columns:minmax(0,1fr)}}
.chat-ej{font:500 .66rem/1.3 var(--sans);letter-spacing:.16em;text-transform:uppercase;color:var(--oro-2);text-align:center;padding:.2rem 0 .6rem}
.placa-l>div:not(.pode){cursor:default}

/* ---------- 95 luz (js/90-luz.js: GSAP + ScrollTrigger + Lenis) ---------- */
html.lenis,html.lenis body{height:auto}
.lenis.lenis-smooth{scroll-behavior:auto!important}
.lenis.lenis-smooth [data-lenis-prevent]{overscroll-behavior:contain}
.lenis.lenis-stopped{overflow:hidden}
.foco{position:fixed;left:0;top:0;z-index:40;width:62vmax;height:62vmax;margin:-31vmax 0 0 -31vmax;border-radius:50%;pointer-events:none;background:radial-gradient(circle,rgba(255,224,170,.17) 0%,rgba(255,214,150,.07) 28%,transparent 62%);mix-blend-mode:screen;opacity:0;transition:opacity var(--t-cena) var(--curva)}
.foco.on{opacity:1}
.foco.sobre-claro{opacity:0}
.hero-luz{position:absolute;inset:0;z-index:-1;overflow:hidden;pointer-events:none;mix-blend-mode:screen;--abre:0}
.hero-luz i{position:absolute;display:block;border-radius:50%;filter:blur(40px)}
.hero-luz .hl-a{width:46vw;height:46vw;left:58%;top:-18%;background:radial-gradient(circle,rgba(255,196,120,.42),rgba(255,150,70,.12) 45%,transparent 70%);animation:hl-a 16s ease-in-out infinite alternate;opacity:calc(.75 + var(--abre)*.25)}
.hero-luz .hl-b{width:34vw;height:34vw;left:-8%;bottom:-14%;background:radial-gradient(circle,rgba(120,160,255,.30),transparent 65%);animation:hl-b 21s ease-in-out infinite alternate}
.hero-luz .hl-raya{left:-30%;right:-30%;top:calc(38% - var(--abre)*10%);height:2px;border-radius:0;filter:blur(1.5px);background:linear-gradient(90deg,transparent,rgba(255,236,205,.0) 20%,rgba(255,236,205,.75) 50%,rgba(255,236,205,0) 80%,transparent);transform:rotate(-4deg);opacity:calc(.35 + var(--abre)*.5);animation:hl-raya 9s ease-in-out infinite}
@keyframes hl-a{to{transform:translate3d(-14vw,10vh,0) scale(1.15)}}
@keyframes hl-b{to{transform:translate3d(18vw,-8vh,0) scale(.9)}}
@keyframes hl-raya{0%,100%{translate:-12% 0}50%{translate:12% 0}}
.reloj .destello{position:absolute;inset:-10%;z-index:4;pointer-events:none;background:linear-gradient(112deg,transparent 38%,rgba(255,255,255,.08) 44%,rgba(255,255,255,.55) 50%,rgba(255,255,255,.08) 56%,transparent 62%);mix-blend-mode:screen}
img.prof{scale:1.16;translate:0 var(--py,0)}
.titulo em.reflejo{background:linear-gradient(100deg,var(--acento-2) 0%,var(--acento-2) 42%,#fff4dc 50%,var(--acento-2) 58%,var(--acento-2) 100%) 100% 0/260% 100% no-repeat;-webkit-background-clip:text;background-clip:text;color:transparent;-webkit-text-fill-color:transparent;padding-right:.08em}
.titulo em.reflejo.brilla{animation:reflejo 2.2s var(--curva) .25s both}
@keyframes reflejo{from{background-position:100% 0}to{background-position:0 0}}
.btn{position:relative;overflow:hidden;isolation:isolate}
.btn::after{content:'';position:absolute;inset:0;z-index:-1;background:linear-gradient(105deg,transparent 30%,rgba(255,255,255,.45) 50%,transparent 70%);translate:-110% 0;transition:translate .9s var(--curva);pointer-events:none}
.btn:hover::after{translate:110% 0}

/* ---------- 96 la vitrina (js/92-alcoba.js): el reloj en su nicho, como una pieza de museo. Sin js, el estado final ---------- */
.alcoba{position:relative;z-index:2;height:640svh;background:#040302;color:var(--marfil)}
.al-palco{position:sticky;top:0;height:100svh;min-height:560px;overflow:hidden;isolation:isolate}
.al-fondo{position:absolute;inset:-4%;background:radial-gradient(ellipse 62% 74% at 50% 34%,#2a2118 0%,#120e0a 46%,#040302 100%)}
.al-nicho{position:absolute;left:50%;top:9%;width:min(66svh,46vw);height:95%;margin-left:calc(min(66svh,46vw)/-2);border-radius:999px 999px 0 0;background:radial-gradient(ellipse 70% 42% at 50% 16%,rgba(255,214,150,.26),transparent 62%),linear-gradient(180deg,#26241f 0%,#15171c 52%,#0a0e15 100%);box-shadow:inset 0 50px 120px rgba(0,0,0,.55),inset 0 0 0 1px rgba(194,162,99,.28);will-change:clip-path,transform}
.al-nicho i{position:absolute;left:12%;right:12%;bottom:16%;height:9%;border-radius:50%;background:radial-gradient(ellipse at 50% 40%,rgba(255,226,180,.32),rgba(255,214,150,.06) 55%,transparent 72%)}
.al-cono{position:absolute;left:50%;top:-12%;width:min(90svh,70vw);height:118%;margin-left:calc(min(90svh,70vw)/-2);background:conic-gradient(from 180deg at 50% 0%,transparent 158deg,rgba(255,230,190,.13) 170deg,rgba(255,238,210,.2) 180deg,rgba(255,230,190,.13) 190deg,transparent 202deg);filter:blur(16px);mix-blend-mode:screen;pointer-events:none}
.al-grande{position:absolute;left:0;right:0;bottom:12%;margin:0;text-align:center;font:300 clamp(8rem,25vw,27rem)/.8 var(--serif);letter-spacing:-.04em;color:transparent;-webkit-text-stroke:1px rgba(243,230,220,.16);white-space:nowrap;pointer-events:none;user-select:none}
.al-grande span{display:inline-block}
.al-reloj{--w:min(52svh,36vw);position:absolute;z-index:3;left:50%;top:50%;width:var(--w);margin:calc(var(--w)/-2) 0 0 calc(var(--w)/-2);perspective:1100px;will-change:transform}
.al-tilt{transform-style:preserve-3d}
.al-tilt .reloj{box-shadow:0 0 0 1px rgba(194,162,99,.25),0 40px 90px rgba(0,0,0,.55)}
.al-sombra{position:absolute;left:12%;right:12%;bottom:-16%;height:12%;border-radius:50%;background:radial-gradient(ellipse,rgba(0,0,0,.65),transparent 70%);filter:blur(10px);z-index:-1}
.al-polvo{position:absolute;inset:0;z-index:4;pointer-events:none}
.al-polvo i{position:absolute;left:var(--x);top:var(--y);width:var(--s);height:var(--s);border-radius:50%;background:radial-gradient(circle,rgba(255,228,176,.95),rgba(255,210,140,0) 70%);opacity:calc(var(--d)*.85);animation:polvo calc(8s + var(--d)*12s) ease-in-out infinite alternate}
@keyframes polvo{to{translate:calc(var(--d)*46px) calc(var(--d)*-110px)}}
.al-txt{position:absolute;z-index:5;left:var(--g);top:50%;width:min(36rem,40vw);transform:translateY(-50%);display:grid;gap:1.4rem}
.al-txt .titulo{color:var(--marfil)}
.al-l{display:block;overflow:hidden;padding:0 .12em .1em;margin:0 -.12em -.1em}
.al-l>span{display:block}
.al-txt .lead{color:rgba(243,230,220,.78);max-width:26em}
.al-vela{position:absolute;inset:0;z-index:6;background:var(--marfil);opacity:0;pointer-events:none}
.contorno{translate:var(--dx,0) 0}
@media (max-width:800px){
  .al-nicho{width:86vw;margin-left:-43vw;top:7%}
  .al-reloj{--w:72vw;top:40%}
  .al-txt{left:var(--g);right:var(--g);top:auto;bottom:7svh;width:auto;transform:none;gap:1rem}
  .al-grande{bottom:30%}
}
@media (prefers-reduced-motion:reduce){
  .alcoba{height:auto}
  .al-palco{position:relative}
  .al-reloj{left:auto;right:var(--g);margin-left:0}
}

/* ---------- 97 el reloj en piezas (despiece): se monta con el scroll dentro de la vitrina ---------- */
.dz{position:absolute;inset:0;transform-style:preserve-3d;pointer-events:none}
.dz-pila{position:absolute;inset:0;transform-style:preserve-3d;transform:rotateX(0) rotateZ(0)}
.dz-capa{position:absolute;inset:0;border-radius:50%;transform-style:preserve-3d;backface-visibility:hidden}
.dz-capa svg,.dz-capa img{position:absolute;inset:0;width:100%;height:100%;display:block}
.dz-fondo{filter:drop-shadow(0 18px 30px rgba(0,0,0,.5))}
.dz-esfera img{inset:4.5%;width:91%;height:91%;border-radius:50%}
.dz-cristal{background:radial-gradient(circle at 32% 26%,rgba(255,255,255,.34),rgba(255,255,255,.06) 30%,transparent 46%),radial-gradient(circle,transparent 60%,rgba(200,220,255,.10) 100%);box-shadow:inset 0 0 0 2px rgba(255,255,255,.22)}
.dz .gira{transform-box:fill-box;transform-origin:center;animation:dz-gira var(--v) linear infinite}
.dz .gira.dz-rev{animation-direction:reverse}
.dz .dz-balanco{transform-box:fill-box;transform-origin:center;animation:dz-balanco .5s ease-in-out infinite alternate}
@keyframes dz-gira{to{transform:rotate(360deg)}}
@keyframes dz-balanco{from{transform:rotate(-150deg)}to{transform:rotate(150deg)}}
.dz-lista{position:absolute;z-index:5;left:var(--g);top:50%;transform:translateY(-50%);width:min(26rem,34vw);display:grid;gap:1.1rem;color:var(--marfil)}
.dz-tit{font:400 var(--f-l)/1 var(--serif);margin:0}
.dz-lista ol{list-style:none;margin:.6rem 0 0;padding:0;display:grid;gap:.15rem;counter-reset:dz}
.dz-lista li{display:flex;align-items:center;gap:.9rem;padding:.7rem 0;border-top:1px solid rgba(243,230,220,.14);font:400 var(--f-s)/1.2 var(--serif);opacity:.32}
.dz-lista li i{flex:none;width:9px;height:9px;border:1px solid var(--oro);transform:rotate(45deg)}
.dz-lista li.puesta i{background:var(--oro)}
.dz-pe{font:italic 400 var(--f-s)/1.2 var(--serif);color:var(--oro-2);margin:.4rem 0 0}
@media (max-width:800px){
  .dz-lista{top:auto;bottom:6svh;transform:none;right:var(--g);width:auto;gap:.6rem}
  .dz-lista li{padding:.42rem 0}
  .dz-tit{font-size:1.9rem}
}
@media (prefers-reduced-motion:reduce){.dz,.dz-lista{display:none}}
.pu-dia{display:grid;place-items:center;background:radial-gradient(circle at 50% 45%,#221b14,#0d0b09 70%)}
.pu-dia .dia24{grid-column:auto;width:78%;margin:0}
html,body{overflow-x:clip}
/* ---------- 98 el reloj 3D (js/93-reloj3d.js) ocupa el sitio del dibujado cuando hay WebGL2 ---------- */
.al-3d{position:absolute;inset:0;width:100%;height:100%;z-index:3;pointer-events:none;opacity:0;transition:opacity var(--t-cena) var(--curva)}
.com-3d .al-3d{opacity:1}
.com-3d .al-reloj{visibility:hidden}
/* ---------- 99 cursor con rótulo y grano de película (awwwards-3d: patrón 18 y pase de grano, aquí en CSS) ---------- */
.cursor{position:fixed;left:0;top:0;z-index:90;width:0;height:0;pointer-events:none;opacity:0;transition:opacity var(--t-toque) linear}
.cursor.on{opacity:1}
.cursor span{position:absolute;left:-34px;top:-34px;width:68px;height:68px;border-radius:50%;border:1.5px solid rgba(214,188,134,.95);display:grid;place-items:center;font:500 .66rem/1 var(--sans);letter-spacing:.14em;text-transform:uppercase;color:transparent;transform:scale(.2);transition:transform var(--t-entra) var(--curva),background var(--t-toque) linear,color var(--t-toque) linear,border-color var(--t-toque) linear}
.cursor.sobre span{transform:scale(.62)}
.cursor.com-rotulo span{transform:scale(1);background:rgba(214,188,134,.94);border-color:transparent;color:#16110b}
body::after{content:'';position:fixed;inset:-50%;z-index:89;pointer-events:none;opacity:.07;mix-blend-mode:overlay;background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='180' height='180'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.85' numOctaves='2' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E");animation:grano 1s steps(5) infinite}
@keyframes grano{0%{transform:translate(0,0)}20%{transform:translate(-3%,2%)}40%{transform:translate(2%,-3%)}60%{transform:translate(-2%,-1%)}80%{transform:translate(3%,3%)}100%{transform:translate(0,0)}}
@media (prefers-reduced-motion:reduce){body::after{animation:none}}

/* ---------- 100 páginas interiores: el arco (90-luz.js lo abre con el scroll), cabeceras al centro, la banda-esfera ---------- */
.pag-hero.arco-hero{display:grid;grid-template-columns:minmax(0,1fr);justify-items:center;text-align:center;align-items:start;min-height:0;row-gap:clamp(2rem,5vh,3.4rem);padding:calc(var(--topo) + 8vh) var(--g) clamp(4rem,10vh,7rem)}
.ah-cab{display:grid;justify-items:center;gap:1.3rem;max-width:min(100%,62rem)}
.ah-cab .etiqueta,.ah-cab .migas{justify-content:center}
.ah-cab h1.t-xl{font-size:clamp(2.6rem,6.2vw,6.6rem);line-height:.98}
.ah-arco{--aw:min(23vw,340px);--ar:min(23vw,340px);position:relative;width:100vw;height:min(80svh,860px);clip-path:inset(0 calc(50% - var(--aw)) 0 calc(50% - var(--aw)) round var(--ar) var(--ar) 0 0);overflow:hidden;isolation:isolate}
.ah-m{position:absolute;inset:0;z-index:-1;will-change:transform}
.ah-m>img,.ah-m>picture>img,.ah-m>video{width:100%;height:100%;object-fit:cover;display:block}
.ah-arco::after{content:'';position:absolute;inset:0;z-index:-1;pointer-events:none;background:linear-gradient(180deg,rgba(13,11,9,.15),rgba(13,11,9,0) 30%,rgba(13,11,9,.35))}
.ah-arco .feed{right:clamp(16px,6vw,90px);bottom:8%}
.ah-pe{display:grid;justify-items:center;gap:1.5rem;max-width:40rem}
.ah-pe .acoes{justify-content:center}
.ah-pe .ph-chips{justify-content:center}
.ah-pe .ph-nomes{text-align:center}
.ah-pe .ph-nomes ul{justify-content:center}
.sem-media{padding-bottom:clamp(2rem,6vh,4rem)}
.sec>.cab{justify-items:center;text-align:center;margin-inline:auto;max-width:56rem}
.sec>.cab .etiqueta{justify-content:center}
.sec>.cab .lead{max-width:36em}
.sec>.cab::before{content:'';display:block;width:120px;height:11px;background:linear-gradient(var(--oro),var(--oro)) 0 50%/44px 1px no-repeat,linear-gradient(var(--oro),var(--oro)) 100% 50%/44px 1px no-repeat,linear-gradient(45deg,transparent 46%,var(--oro) 46% 54%,transparent 54%) 50% 50%/11px 11px no-repeat;opacity:.8}
.banda{grid-template-columns:minmax(0,1fr);justify-items:center;text-align:center;border-top:0;position:relative;isolation:isolate;padding:clamp(6rem,16vh,10rem) 0}
.banda::before,.banda::after{content:'';position:absolute;left:50%;top:50%;z-index:-1;width:min(84vw,640px);aspect-ratio:1;translate:-50% -50%;border-radius:50%}
.banda::before{background:repeating-conic-gradient(rgba(214,188,134,.5) 0 .6deg,transparent .6deg 6deg);-webkit-mask:radial-gradient(circle,transparent 63%,#000 63.3% 66.5%,transparent 66.8%);mask:radial-gradient(circle,transparent 63%,#000 63.3% 66.5%,transparent 66.8%)}
.banda::after{background:repeating-conic-gradient(rgba(214,188,134,.85) 0 1.2deg,transparent 1.2deg 30deg);-webkit-mask:radial-gradient(circle,transparent 61%,#000 61.3% 66.5%,transparent 66.8%);mask:radial-gradient(circle,transparent 61%,#000 61.3% 66.5%,transparent 66.8%)}
.banda .cab{justify-items:center;max-width:34rem}
.banda .acoes{justify-content:center}
.claro .banda::before{background:repeating-conic-gradient(rgba(138,109,51,.45) 0 .6deg,transparent .6deg 6deg)}
.claro .banda::after{background:repeating-conic-gradient(rgba(138,109,51,.8) 0 1.2deg,transparent 1.2deg 30deg)}
@media (max-width:800px){
  .ah-arco{--aw:39vw;--ar:39vw;height:62svh}
  .ah-cab h1.t-xl{font-size:clamp(2.3rem,10.5vw,3.4rem)}
}

/* ---------- 101 los visuales de la IA (en lugar de las imágenes generadas de la web antigua) ---------- */
.vis{position:absolute;inset:0;overflow:hidden;background:radial-gradient(120% 90% at 30% 20%,#2a2118,#0d0b09 70%);color:var(--marfil);font-family:var(--serif)}
.vis-mini{display:block;width:100%;height:100%;background:radial-gradient(circle at 35% 30%,#3a2e20,#0d0b09)}
.vis-idiomas ul{list-style:none;margin:0;padding:8% 10%;display:grid;gap:.4em;font-size:clamp(1.3rem,2.4vw,2.4rem);animation:idiomas 26s linear infinite}
.vis-idiomas li{opacity:.28;white-space:nowrap}
.vis-idiomas li.ouro{opacity:1;color:var(--oro-2);font-style:italic}
@keyframes idiomas{to{transform:translateY(-50%)}}
.vis-consulta{display:grid;align-content:center;gap:1rem;padding:9%;font-family:var(--sans);font-size:clamp(.82rem,1vw,1rem)}
.vis-consulta p{margin:0;padding:.9em 1.1em;border-radius:14px;max-width:85%;line-height:1.4}
.vis-consulta .vq{background:rgba(243,230,220,.1);border:1px solid rgba(243,230,220,.18)}
.vis-consulta .vs{justify-self:center;background:none;padding:0;font-size:.72em;letter-spacing:.14em;text-transform:uppercase;color:var(--oro-2)}
.vis-consulta .va{justify-self:end;background:rgba(214,188,134,.16);border:1px solid rgba(214,188,134,.35)}
.vis-avisa{display:grid;place-items:center;align-content:center;gap:1.6rem;text-align:center;padding:8%}
.va-anel{position:relative;display:grid;place-items:center;width:clamp(110px,14vw,170px);aspect-ratio:1;border-radius:50%;border:1px solid rgba(214,188,134,.6)}
.va-anel i{position:absolute;inset:0;border-radius:50%;border:1px solid rgba(214,188,134,.5);animation:anel 2.8s var(--curva) infinite}
.va-anel i+i{animation-delay:1.4s}
.va-anel b{font:italic 400 clamp(1rem,1.5vw,1.4rem)/1 var(--serif);color:var(--oro-2)}
@keyframes anel{from{transform:scale(1);opacity:.8}to{transform:scale(1.7);opacity:0}}
.vis-avisa p{margin:0;font-size:clamp(.95rem,1.2vw,1.2rem);line-height:1.35}
.vis-avisa em{color:var(--oro-2)}
.vis-horas{display:grid;align-content:end;gap:.8rem;padding:12% 8% 10%}
.vh-b{display:flex;align-items:flex-end;gap:3px;height:62%}
.vh-b i{flex:1;height:calc(var(--h)*1%);background:linear-gradient(180deg,var(--oro-2),rgba(214,188,134,.25));border-radius:2px 2px 0 0}
.vis-horas p{display:flex;justify-content:space-between;margin:0;font:500 .7rem/1 var(--sans);letter-spacing:.14em;color:rgba(243,230,220,.6)}
.vis-integra{display:grid;place-items:center}
.vis-integra ul{list-style:none;margin:0;padding:0;position:absolute;inset:0}
.vis-integra li{position:absolute;left:50%;top:50%;translate:-50% -50%;transform:rotate(var(--a)) translateY(calc(-1 * min(30%,150px))) rotate(calc(-1 * var(--a)));font:500 .78rem/1 var(--sans);letter-spacing:.1em;text-transform:uppercase;padding:.6em .9em;border:1px solid rgba(214,188,134,.4);border-radius:999px;background:rgba(13,11,9,.7);white-space:nowrap}
.vi-c{display:grid;place-items:center;width:clamp(64px,8vw,96px);aspect-ratio:1;border-radius:50%;background:radial-gradient(circle at 35% 30%,#f1dca7,#b8904a);color:#16110b;font:400 clamp(1.8rem,3vw,2.6rem)/1 var(--serif);box-shadow:0 0 0 12px rgba(214,188,134,.08),0 0 60px rgba(214,188,134,.25)}
.vis-control ul,.vis-usted ul{list-style:none;margin:0;padding:12% 10%;display:grid;align-content:center;height:100%;font-family:var(--sans);font-size:clamp(.85rem,1.1vw,1.05rem)}
.vis-control li{display:flex;align-items:center;gap:.8rem;padding:.85rem 0;border-top:1px solid rgba(243,230,220,.14)}
.vis-control li i{width:16px;height:16px;border-radius:50%;border:1px solid var(--oro-2);display:grid;place-items:center}
.vis-control li i::after{content:'';width:6px;height:6px;border-radius:50%;background:var(--oro-2)}
.vis-usted li{display:grid;grid-template-columns:4.2em 1fr;gap:1rem;padding:.9rem 0;border-top:1px solid rgba(243,230,220,.14)}
.vis-usted b{font:400 1.3em/1 var(--serif);color:var(--oro-2)}
@media (prefers-reduced-motion:reduce){.vis-idiomas ul,.va-anel i{animation:none}}
/* ---------- 102 portada: el reloj 3D que se gira (js/93-reloj3d.js); sin WebGL queda la fotografía ---------- */
.hero-reloj{background:radial-gradient(60% 70% at 70% 42%,rgba(214,188,134,.16),transparent 62%),radial-gradient(40% 30% at 70% 80%,rgba(0,0,0,.5),transparent 70%);touch-action:pan-y}
.hero-reloj .hero-grid{position:relative;z-index:1}
.hero-3d{position:absolute;inset:0;z-index:0;width:100%;height:100%;pointer-events:none;opacity:0;transition:opacity var(--t-cena) var(--curva)}
.hero-reloj.com-3d .hero-3d{opacity:1}
.hero-reloj.com-3d{cursor:grab}
.hero-reloj.a-girar{cursor:grabbing;user-select:none}
.hero-foto{position:absolute;right:8%;top:16%;width:min(34vw,520px);aspect-ratio:3/4;margin:0;border-radius:999px 999px 0 0;overflow:hidden;z-index:0}
.hero-foto img{width:100%;height:100%;object-fit:cover}
.hero-reloj.com-3d .hero-foto{display:none}
.hero-reloj .hero-tit{grid-column:1/8}
.hero-reloj .hero-lado{grid-column:1/6;grid-row:2}
@media (max-width:800px){.hero-foto{right:50%;translate:50% 0;top:12%;width:62vw}.hero-reloj .hero-lado{grid-row:auto}}
/* ---------- 103 la entrada de cada página interior (js/95-entrada.js) ---------- */
.entrada{position:fixed;inset:0;z-index:120;background:radial-gradient(80% 70% at 50% 40%,#1e1812,#0b0907 75%);color:var(--marfil);display:grid;place-items:center;clip-path:inset(0 0 0 0);pointer-events:none}
html:not(.js) .entrada{display:none}
@media (prefers-reduced-motion:reduce){.entrada{display:none}}
.entrada>div{display:grid;justify-items:center;gap:1.4rem;text-align:center}
.en-casa svg{width:clamp(90px,12vw,150px);height:auto;overflow:visible}
.en-casa path{stroke:var(--oro-2);stroke-width:2}
.en-casa p,.en-visor .nm,.en-web p,.en-firma p,.en-ocho p{font:400 clamp(2.2rem,5vw,4.4rem)/1 var(--serif);margin:0;overflow:hidden}
.en-visor{position:relative;width:min(70vw,880px);aspect-ratio:16/9;place-items:center}
.en-visor .c{position:absolute;width:44px;height:44px;border:2px solid var(--marfil)}
.en-visor .c1{left:0;top:0;border-right:0;border-bottom:0}.en-visor .c2{right:0;top:0;border-left:0;border-bottom:0}.en-visor .c3{left:0;bottom:0;border-right:0;border-top:0}.en-visor .c4{right:0;bottom:0;border-left:0;border-top:0}
.en-visor .rec{position:absolute;left:24px;top:22px;margin:0;font:500 .78rem/1 var(--sans);letter-spacing:.2em;display:flex;align-items:center;gap:.5rem}
.en-visor .rec b{width:9px;height:9px;border-radius:50%;background:#e2342b;animation:rec 1s steps(2) infinite}
@keyframes rec{50%{opacity:0}}
.en-visor .tc{position:absolute;right:24px;top:22px;margin:0;font:500 .78rem/1 var(--sans);letter-spacing:.14em;font-variant-numeric:tabular-nums}
.en-ia .w{font:italic 400 clamp(2.4rem,6vw,5.6rem)/1.05 var(--serif);color:var(--oro-2);margin:0;min-height:1.1em}
.en-ia .s,.en-casos .s,.en-24 .s{font:500 .8rem/1 var(--sans);letter-spacing:.2em;text-transform:uppercase;color:rgba(243,230,220,.7);margin:0}
.en-sect{position:absolute;inset:0;display:flex!important;gap:2px;place-items:stretch!important}
.en-sect>div{flex:1;display:flex;align-items:flex-end;justify-content:center;padding-bottom:12vh;background:linear-gradient(180deg,#1b1610,#2a2118)}
.en-sect>div.esta{background:linear-gradient(180deg,#2a2118,#5a4426)}
.en-sect span{font:400 clamp(1.6rem,3vw,3rem)/1 var(--serif)}
.en-casos .n{font:400 clamp(3.4rem,10vw,9rem)/1 var(--serif);margin:0;font-variant-numeric:tabular-nums;color:var(--oro-2)}
.en-web svg{width:min(60vw,520px);height:auto}
.en-web rect,.en-web path{stroke:var(--oro-2);stroke-width:1.2}
.en-24 .esf{position:relative;width:clamp(150px,20vw,240px);aspect-ratio:1;border-radius:50%;background:repeating-conic-gradient(rgba(214,188,134,.7) 0 1deg,transparent 1deg 15deg);-webkit-mask:radial-gradient(circle,transparent 86%,#000 86.5%);mask:radial-gradient(circle,transparent 86%,#000 86.5%)}
.en-24{position:relative}
.en-24 .ag{position:absolute;left:50%;top:6%;width:2px;height:44%;margin-left:-1px;background:var(--oro-2);transform-origin:50% 100%}
.en-24 .hh{font:400 clamp(2.6rem,6vw,5rem)/1 var(--serif);margin:0;font-variant-numeric:tabular-nums}
.en-firma p{font-style:italic;color:var(--oro-2);font-size:clamp(3rem,8vw,7rem)}
.en-firma i{display:block;width:min(50vw,420px);height:1px;background:var(--oro-2);transform-origin:left}
.en-ocho ol{list-style:none;margin:0;padding:0;display:flex;gap:clamp(10px,1.6vw,20px)}
.en-ocho li{width:clamp(14px,1.8vw,22px);aspect-ratio:1;border-radius:50%;border:1px solid var(--oro-2);transform:scale(.6)}
.en-casa svg{width:clamp(260px,34vw,520px)}
.en-24 .esf{-webkit-mask:none;mask:none;background:none;border:1px solid rgba(214,188,134,.6);box-shadow:inset 0 0 0 10px rgba(214,188,134,.06)}
/* ---------- 104 el final de cada sala, en el idioma de su entrada (la esfera queda como modelo por defecto) ---------- */
body[data-pagina] .banda{overflow:hidden}
body[data-pagina="marketing"] .banda::before{width:min(86vw,760px);aspect-ratio:16/9;border-radius:0;-webkit-mask:none;mask:none;opacity:.7;background:
 linear-gradient(var(--marfil),var(--marfil)) 0 0/44px 1.5px no-repeat,linear-gradient(var(--marfil),var(--marfil)) 0 0/1.5px 44px no-repeat,
 linear-gradient(var(--marfil),var(--marfil)) 100% 0/44px 1.5px no-repeat,linear-gradient(var(--marfil),var(--marfil)) 100% 0/1.5px 44px no-repeat,
 linear-gradient(var(--marfil),var(--marfil)) 0 100%/44px 1.5px no-repeat,linear-gradient(var(--marfil),var(--marfil)) 0 100%/1.5px 44px no-repeat,
 linear-gradient(var(--marfil),var(--marfil)) 100% 100%/44px 1.5px no-repeat,linear-gradient(var(--marfil),var(--marfil)) 100% 100%/1.5px 44px no-repeat}
body[data-pagina="marketing"] .banda::after{content:'REC · 00:00:24:11';width:auto;aspect-ratio:auto;border-radius:0;-webkit-mask:none;mask:none;background:radial-gradient(circle,#e2342b 0 4px,transparent 4.5px) 0 50%/10px 10px no-repeat;padding-left:18px;left:calc(50% - min(43vw,380px) + 24px);top:calc(50% - min(24.2vw,214px) + 20px);translate:none;font:500 .74rem/1 var(--sans);letter-spacing:.2em;color:var(--marfil);animation:rec 1.2s steps(2) infinite}
body[data-pagina="inteligencia-artificial"] .banda::before{content:'Buenas noches · Good evening · Bonsoir · Guten Abend · Buonasera · Boa noite · Goedenavond · Добрый вечер · こんばんは · 晚上好 · Buenas noches · Good evening · Bonsoir · Guten Abend · Buonasera · Boa noite · Goedenavond · Добрый вечер · こんばんは · 晚上好 · ';width:auto;aspect-ratio:auto;border-radius:0;-webkit-mask:none;mask:none;background:none;left:0;translate:0 -50%;white-space:nowrap;font:italic 400 clamp(3rem,8vw,7rem)/1 var(--serif);color:rgba(214,188,134,.13);animation:saudos 60s linear infinite}
body[data-pagina="inteligencia-artificial"] .banda::after{display:none}
@keyframes saudos{to{transform:translateX(-50%)}}
body[data-pagina="la-casa"] .banda::before{width:min(56vw,380px);aspect-ratio:235/256;border-radius:0;-webkit-mask:none;mask:none;background:url(img/logo-mark-light.svg) center/contain no-repeat;opacity:.08}
body[data-pagina="la-casa"] .banda::after{width:min(84vw,600px);background:none;border:1px solid rgba(214,188,134,.35);-webkit-mask:none;mask:none}
body[data-pagina="sectores"] .banda::before{width:min(92vw,1000px);aspect-ratio:16/7;border-radius:0;-webkit-mask:none;mask:none;background:repeating-linear-gradient(90deg,rgba(214,188,134,.07) 0 calc(25% - 6px),transparent calc(25% - 6px) 25%)}
body[data-pagina="sectores"] .banda::after{content:'Hoteles\00a0\00a0\00a0\00a0\00a0\00a0\00a0\00a0Motor\00a0\00a0\00a0\00a0\00a0\00a0\00a0\00a0Mar\00a0\00a0\00a0\00a0\00a0\00a0\00a0\00a0Joyas';width:auto;aspect-ratio:auto;border-radius:0;-webkit-mask:none;mask:none;background:none;top:auto;bottom:clamp(1.5rem,4vh,3rem);translate:-50% 0;white-space:nowrap;font:400 clamp(1rem,1.6vw,1.4rem)/1 var(--serif);color:rgba(214,188,134,.45)}
body[data-pagina="casos"] .banda::before{content:'300.000';width:auto;aspect-ratio:auto;border-radius:0;-webkit-mask:none;mask:none;background:none;white-space:nowrap;font:400 clamp(6rem,22vw,20rem)/1 var(--serif);color:transparent;-webkit-text-stroke:1px rgba(214,188,134,.28)}
body[data-pagina="casos"] .banda::after{display:none}
body[data-pagina="web"] .banda::before{width:min(80vw,660px);aspect-ratio:400/260;border-radius:6px;-webkit-mask:none;mask:none;border:1px solid rgba(214,188,134,.35);background:
 linear-gradient(rgba(214,188,134,.35),rgba(214,188,134,.35)) 0 9%/100% 1px no-repeat,
 linear-gradient(rgba(214,188,134,.1),rgba(214,188,134,.1)) 7% 22%/48% 6% no-repeat,
 linear-gradient(rgba(214,188,134,.07),rgba(214,188,134,.07)) 7% 33%/34% 4% no-repeat,
 linear-gradient(rgba(214,188,134,.08),rgba(214,188,134,.08)) 92% 22%/30% 38% no-repeat,
 linear-gradient(rgba(214,188,134,.08),rgba(214,188,134,.08)) 6% 90%/27% 24% no-repeat,
 linear-gradient(rgba(214,188,134,.08),rgba(214,188,134,.08)) 50% 90%/27% 24% no-repeat,
 linear-gradient(rgba(214,188,134,.08),rgba(214,188,134,.08)) 94% 90%/27% 24% no-repeat}
body[data-pagina="web"] .banda::after{display:none}
@media (prefers-reduced-motion:reduce){body[data-pagina] .banda::before,body[data-pagina] .banda::after{animation:none}}

/* ---------- 105 el producto: doce servicios en doce horas, y los planes de web a escala (js/96-produto.js) ---------- */
.doce{--D:min(78vw,600px);display:grid;justify-items:center;gap:2rem;margin-top:clamp(2rem,6vh,4rem)}
.doce-esfera{position:relative;width:var(--D);aspect-ratio:1;border-radius:50%;background:radial-gradient(circle at 50% 40%,rgba(214,188,134,.1),transparent 60%),repeating-conic-gradient(rgba(214,188,134,.35) 0 .5deg,transparent .5deg 6deg);box-shadow:inset 0 0 0 1px rgba(214,188,134,.35)}
.doce-esfera::before{content:'';position:absolute;inset:4%;border-radius:50%;background:radial-gradient(circle at 50% 35%,#231c15,#0d0b09 72%);box-shadow:inset 0 0 0 1px rgba(214,188,134,.18)}
.doce-h{list-style:none;margin:0;padding:0;position:absolute;inset:0}
.doce-h li{position:absolute;left:50%;top:50%;width:0;height:0;transform:rotate(calc(var(--i)*30deg)) translateY(calc(var(--D)/-2 + 9%))}
.doce-h button{position:absolute;left:0;top:0;translate:-50% -50%;transform:rotate(calc(var(--i)*-30deg));background:none;border:0;padding:.4rem;color:var(--marfil);cursor:pointer;display:grid;justify-items:center;gap:.2rem;min-width:44px;min-height:44px}
.doce-h b{font:400 clamp(.9rem,1.4vw,1.2rem)/1 var(--serif);color:rgba(243,230,220,.55);transition:color var(--t-toque) linear}
.doce-h span{position:absolute;top:50%;width:max-content;max-width:13rem;font:500 .74rem/1.25 var(--sans);letter-spacing:.06em;color:rgba(243,230,220,.5);transition:color var(--t-toque) linear;pointer-events:none}
.doce-h li:nth-child(n+2):nth-child(-n+6) span{left:calc(100% + var(--D)*.12);translate:0 -50%;text-align:left}
.doce-h li:nth-child(n+8) span{right:calc(100% + var(--D)*.12);translate:0 -50%;text-align:right}
.doce-h li:nth-child(1) span{bottom:calc(100% + var(--D)*.1);top:auto;left:50%;translate:-50% 0;text-align:center}
.doce-h li:nth-child(7) span{top:calc(100% + var(--D)*.1);left:50%;translate:-50% 0;text-align:center}
.doce-h button[aria-pressed="true"] b,.doce-h button:hover b{color:var(--oro-2)}
.doce-h button[aria-pressed="true"] span,.doce-h button:hover span{color:var(--marfil)}
.doce-ag{position:absolute;left:50%;top:50%;width:2px;height:calc(var(--D)*.36);margin-left:-1px;background:linear-gradient(var(--oro-2),rgba(214,188,134,.2));transform-origin:50% 100%;translate:0 -100%;transform:rotate(calc(var(--giro,0)*30deg));transition:transform var(--t-cena) var(--curva);border-radius:2px}
.doce-ag::after{content:'';position:absolute;left:50%;bottom:-7px;width:14px;height:14px;margin-left:-7px;border-radius:50%;background:var(--oro-2)}
.doce-c{position:absolute;left:50%;top:50%;translate:-50% -50%;width:58%;display:grid;justify-items:center;gap:.7rem;text-align:center;pointer-events:none;padding-top:18%}
.doce-c h3{margin:0;font:400 clamp(1.5rem,2.6vw,2.4rem)/1.05 var(--serif)}
.doce-c p:not(.etiqueta){margin:0;font-size:clamp(.85rem,1vw,1rem);color:var(--texto)}
.doce-c.entra>*{animation:doce-entra var(--t-entra) var(--curva) both}
.doce-c.entra>*:nth-child(2){animation-delay:60ms}.doce-c.entra>*:nth-child(3){animation-delay:120ms}
@keyframes doce-entra{from{opacity:0;transform:translateY(10px)}}
.doce-nav{display:flex;align-items:center;gap:1.4rem;font:500 .74rem/1 var(--sans);letter-spacing:.16em;text-transform:uppercase;color:rgba(243,230,220,.6)}
.doce-nav .enlace{font-size:1.2rem;min-width:44px;min-height:44px}
@media (max-width:900px){.doce{--D:min(86vw,520px)}.doce-h span{display:none}.doce-c{width:66%;padding-top:14%}}

.gama{display:grid;gap:clamp(2rem,6vh,3.5rem);margin-top:clamp(2rem,6vh,4rem)}
.gm-linha{display:flex;justify-content:center;align-items:flex-end;gap:clamp(1rem,4vw,4rem);padding-bottom:1.6rem;border-bottom:1px solid rgba(214,188,134,.35);position:relative}
.gm-linha::after{content:'Alcance →';position:absolute;right:0;bottom:-1.7rem;font:500 .7rem/1 var(--sans);letter-spacing:.18em;text-transform:uppercase;color:rgba(243,230,220,.5)}
.gm-linha button{display:grid;justify-items:center;gap:.8rem;background:none;border:0;color:var(--marfil);cursor:pointer;padding:.4rem}
.gm-reloj{--s:calc(var(--mm)*0.32vw + var(--mm)*1.4px);position:relative;width:var(--s);aspect-ratio:1;border-radius:50%;background:repeating-conic-gradient(rgba(23,18,12,.5) 0 .8deg,transparent .8deg 30deg),radial-gradient(circle at 40% 35%,#fbf3e6,#e3d3b8 70%);box-shadow:0 0 0 calc(var(--s)*.05) #c9a560,0 0 0 calc(var(--s)*.065) #7a5a26,0 18px 40px rgba(0,0,0,.45);transition:transform var(--t-entra) var(--curva),box-shadow var(--t-entra) var(--curva)}
.gm-reloj i{position:absolute;left:50%;bottom:50%;width:2px;margin-left:-1px;background:#3a2b16;transform-origin:50% 100%;border-radius:2px}
.gm-reloj .h{height:26%;transform:rotate(-60deg)}.gm-reloj .m{height:38%;transform:rotate(60deg)}
.gm-linha button[aria-selected="true"] .gm-reloj{transform:translateY(-14px) scale(1.06);box-shadow:0 0 0 calc(var(--s)*.05) #e8c98a,0 0 0 calc(var(--s)*.065) #7a5a26,0 30px 60px rgba(0,0,0,.5),0 0 60px rgba(214,188,134,.35)}
.gm-n{font:400 clamp(1rem,1.5vw,1.35rem)/1.1 var(--serif);text-align:center}
.gm-mm{font:500 .66rem/1 var(--sans);letter-spacing:.16em;text-transform:uppercase;color:rgba(243,230,220,.5)}
.gm-linha button[aria-selected="true"] .gm-n{color:var(--oro-2)}
.gm-fichas{display:grid;justify-items:center}
.gm-ficha{position:relative;width:min(100%,46rem);display:grid;gap:1rem;justify-items:center;text-align:center;padding:clamp(1.8rem,5vh,3rem) clamp(1.2rem,4vw,3rem);border:1px solid rgba(214,188,134,.3);border-radius:4px;background:linear-gradient(180deg,rgba(214,188,134,.06),transparent)}
.gm-ficha .selo{position:absolute;top:-.8rem;left:50%;translate:-50% 0;padding:.35rem .9rem;border-radius:999px;background:var(--oro-2);color:#16110b;font:500 .68rem/1 var(--sans);letter-spacing:.14em;text-transform:uppercase}
.gm-tit{margin:0;font:400 clamp(2.2rem,5vw,4rem)/1 var(--serif);color:transparent;-webkit-text-stroke:1px var(--oro-2)}
.gm-ficha.entra .gm-tit{animation:gm-tinta 1.4s var(--curva) .2s both}
@keyframes gm-tinta{from{color:transparent}to{color:var(--marfil)}}
.gm-ficha ul{list-style:none;margin:.6rem 0 0;padding:0;display:grid;gap:0;width:100%;text-align:left}
.gm-ficha li{padding:.75rem 0 .75rem 1.6rem;border-top:1px solid rgba(243,230,220,.12);position:relative}
.gm-ficha li::before{content:'';position:absolute;left:.2rem;top:1.15rem;width:7px;height:7px;transform:rotate(45deg);border:1px solid var(--oro-2)}
.gm-ficha.entra>*:not(.selo){animation:doce-entra var(--t-entra) var(--curva) both}
.gm-care{display:grid;justify-items:center;gap:.8rem;text-align:center;max-width:56rem;margin-inline:auto}
.gm-care>p:not(.etiqueta){color:var(--texto);max-width:40rem;margin:0}
.gm-care ul{list-style:none;margin:.6rem 0 0;padding:0;display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:1px;background:rgba(214,188,134,.2);border:1px solid rgba(214,188,134,.2)}
.gm-care li{display:grid;gap:.4rem;padding:1.2rem;background:#100d0a;text-align:left}
.gm-care b{font:400 1.15rem/1.1 var(--serif);color:var(--oro-2)}
.gm-care span{font-size:.9rem;color:var(--texto)}
@media (max-width:800px){.gm-linha{gap:.6rem}.gm-reloj{--s:calc(var(--mm)*1.55px)}.gm-n{font-size:.88rem}.gm-mm{display:none}.gm-care ul{grid-template-columns:1fr}}
@media (prefers-reduced-motion:reduce){.doce-ag{transition:none}.doce-c.entra>*,.gm-ficha.entra>*{animation:none}}
.doce-h li:nth-child(1) span{bottom:auto;top:50%;left:calc(100% + var(--D)*.05);translate:0 -50%;text-align:left}
.doce-h li:nth-child(7) span{top:50%;left:auto;right:calc(100% + var(--D)*.05);translate:0 -50%;text-align:right}
.doce-ag{background:linear-gradient(to top,transparent 0 58%,rgba(214,188,134,.25) 58%,var(--oro-2))}
.doce-ag::after{bottom:auto;top:-7px}

/* ---------- 106 el túnel de los casos y el anillo de los servicios (js/97-tunel.js) ---------- */
.tunel{position:relative;height:calc(var(--n) * 78vh + 100vh)}
.tn-palco{position:sticky;top:0;height:100svh;overflow:hidden;perspective:900px;perspective-origin:50% 45%}
.tn-cam{position:absolute;inset:0;transform-style:preserve-3d}
.tn-mundo{position:absolute;left:50%;top:48%;width:0;height:0;transform-style:preserve-3d;will-change:transform}
.tn-caso{position:absolute;left:0;top:0;margin:0;width:min(44vw,680px);aspect-ratio:4/3;overflow:hidden;border-radius:3px;background:#120e0a;box-shadow:0 40px 90px rgba(0,0,0,.6),0 0 0 1px rgba(214,188,134,.18);backface-visibility:hidden}
.tn-caso img{width:100%;height:100%;object-fit:cover}
.tn-caso .caso-marca{width:100%;height:100%;display:grid;place-items:center;background:radial-gradient(circle,#2a2118,#0d0b09)}
.tn-caso .caso-marca svg{width:22%;height:auto}
.tn-pal{position:absolute;left:0;top:0;margin:0;white-space:nowrap;font:400 clamp(6rem,16vw,15rem)/1 var(--serif);color:transparent;-webkit-text-stroke:1px rgba(214,188,134,.22);pointer-events:none}
.tn-info{position:absolute;z-index:2;left:var(--g);bottom:clamp(2rem,8vh,5rem);width:min(30rem,32vw);display:grid;gap:.8rem;padding:1.4rem 1.5rem;border-radius:4px;background:rgba(13,11,9,.72);backdrop-filter:blur(10px);-webkit-backdrop-filter:blur(10px);border:1px solid rgba(214,188,134,.2)}
.tn-info h3{margin:0;font:400 clamp(1.4rem,2.2vw,2.1rem)/1.08 var(--serif)}
.tn-info .tn-r{margin:0;color:var(--texto)}
.tn-info ul{margin:.2rem 0 0;padding-left:1rem;border-left:2px solid var(--oro);list-style:none;font-size:.9rem;color:var(--oro-2)}
.tn-info.entra>*{animation:doce-entra var(--t-entra) var(--curva) both}
.tn-info.entra>*:nth-child(2){animation-delay:70ms}.tn-info.entra>*:nth-child(3){animation-delay:140ms}
.tn-rail{position:absolute;z-index:2;right:var(--g);top:50%;translate:0 -50%;display:grid;gap:1.6rem;justify-items:end}
.tn-rail ul{list-style:none;margin:0;padding:0;display:grid;gap:.4rem;justify-items:end}
.tn-rail button{background:none;border:0;padding:.45rem 0;min-height:40px;color:rgba(243,230,220,.45);font:400 clamp(1rem,1.4vw,1.3rem)/1 var(--serif);cursor:pointer;transition:color var(--t-toque) linear}
.tn-rail button[aria-current="true"],.tn-rail button:hover{color:var(--oro-2)}
.tn-rail button[aria-current="true"]::after{content:'';display:inline-block;width:7px;height:7px;margin-left:.6rem;transform:rotate(45deg);background:var(--oro-2);vertical-align:middle}
.tn-cont{margin:0;font:500 .74rem/1 var(--sans);letter-spacing:.18em;color:rgba(243,230,220,.55)}
.tn-cont b{font:400 1.6rem/1 var(--serif);color:var(--marfil);letter-spacing:0}
.tunel:not(.vivo){height:auto}
.tunel:not(.vivo) .tn-palco{position:static;height:auto;overflow:visible;padding:4rem var(--g)}
.tunel:not(.vivo) .tn-cam,.tunel:not(.vivo) .tn-mundo{position:static;width:auto;height:auto}
.tunel:not(.vivo) .tn-mundo{display:grid;grid-template-columns:repeat(auto-fill,minmax(260px,1fr));gap:1rem}
.tunel:not(.vivo) .tn-caso{position:relative;width:auto;transform:none!important}
.tunel:not(.vivo) .tn-pal,.tunel:not(.vivo) .tn-rail{display:none}
.tunel:not(.vivo) .tn-info{position:static;width:auto;margin-top:1.5rem}
@media (max-width:800px){
  .tn-caso{width:78vw}
  .tn-info{left:var(--g);right:var(--g);width:auto;bottom:1.2rem;padding:1rem 1.1rem}
  .tn-info ul{display:none}
  .tn-rail{top:calc(var(--topo) + 1rem);translate:none;right:var(--g)}
  .tn-rail ul{display:none}
}

.p-anel{padding-left:0;padding-right:0}
.anel{position:relative;height:340vh;margin-top:clamp(1rem,4vh,2rem)}
.an-palco{position:sticky;top:0;height:100svh;overflow:hidden;display:grid;grid-template-rows:1fr auto;justify-items:center;padding-bottom:clamp(1.5rem,6vh,4rem)}
.an-cena{position:relative;width:100%;perspective:1400px;perspective-origin:50% 40%}
.an-roda{--W:min(21vw,270px);--R:calc(var(--W)*1.95);position:absolute;left:50%;top:46%;width:0;height:0;transform-style:preserve-3d;transform:translateZ(calc(var(--R)*-1)) rotateY(var(--rot,0deg))}
.an-c{position:absolute;left:calc(var(--W)/-2);top:calc(var(--W)*-.68);width:var(--W);height:calc(var(--W)*1.36);margin:0;transform:rotateY(calc(var(--i)*30deg)) translateZ(var(--R));border-radius:4px;overflow:hidden;background:#120e0a;box-shadow:0 0 0 1px rgba(214,188,134,.2);transition:box-shadow var(--t-entra) var(--curva)}
.an-c.frente{box-shadow:0 0 0 1px rgba(214,188,134,.75),0 30px 80px rgba(0,0,0,.6),0 0 70px rgba(214,188,134,.22)}
.an-m{position:absolute;inset:0}
.an-m>img{width:100%;height:100%;object-fit:cover}
.an-c figcaption{position:absolute;left:0;right:0;bottom:0;display:grid;gap:.3rem;padding:2.4rem 1rem 1rem;background:linear-gradient(transparent,rgba(13,11,9,.9));text-align:left}
.an-c figcaption b{font:400 1.1rem/1 var(--serif);color:var(--oro-2)}
.an-c figcaption span{font:400 clamp(1rem,1.3vw,1.2rem)/1.15 var(--serif);color:var(--marfil)}
.an-info{display:grid;justify-items:center;gap:.6rem;text-align:center;max-width:40rem;padding:0 var(--g)}
.an-info h3{margin:0;font:400 clamp(1.8rem,3.4vw,3rem)/1.05 var(--serif)}
.an-info p:not(.etiqueta){margin:0;color:var(--texto)}
.an-info.entra>*{animation:doce-entra var(--t-entra) var(--curva) both}
.an-info.entra>*:nth-child(2){animation-delay:70ms}.an-info.entra>*:nth-child(3){animation-delay:140ms}
.anel:not(.vivo){height:auto}
.anel:not(.vivo) .an-palco{position:static;height:auto;overflow:visible}
.anel:not(.vivo) .an-cena{display:none}
@media (max-width:800px){.an-roda{--W:46vw;--R:calc(var(--W)*1.95)}}

/* ---------- 107 el portal de la portada: se entra por el corazón del reloj (js/98-portal.js) ---------- */
.portal{position:relative;height:620vh}
.pt-palco{position:sticky;top:0;height:100svh;overflow:hidden;isolation:isolate;background:#0b0907}
.pt-mundo{position:absolute;inset:0;overflow:hidden;will-change:transform,clip-path}
.pt-mkt>video,.pt-mkt>.filme,.pt-mkt video{position:absolute;inset:0;width:100%;height:100%;object-fit:cover}
.pt-mkt::after{content:'';position:absolute;inset:0;background:linear-gradient(90deg,rgba(11,9,7,.82),rgba(11,9,7,.2) 60%),linear-gradient(0deg,rgba(11,9,7,.6),transparent 40%);z-index:1}
.pt-ia{background:radial-gradient(70% 70% at 70% 50%,#0f1830,#05070d 70%)}
.pt-ia-fundo{position:absolute;right:6%;top:50%;translate:0 -50%;width:min(52vw,640px);opacity:.95}
.pt-ia-fundo svg{width:100%;height:auto}
.pt-txt{position:absolute;z-index:2;left:var(--g);bottom:clamp(3rem,12vh,7rem);width:min(40rem,46vw);display:grid;gap:1.3rem;color:var(--marfil)}
.pt-txt .lead{color:rgba(243,230,220,.86)}
.pt-txt-d{bottom:auto;top:50%;translate:0 -50%}
.pt-esfera{position:absolute;left:50%;top:50%;width:min(86vmin,900px);aspect-ratio:1;margin:calc(min(86vmin,900px)/-2) 0 0 calc(min(86vmin,900px)/-2);will-change:transform;filter:drop-shadow(0 40px 90px rgba(0,0,0,.7))}
.pt-esfera img{width:100%;height:100%;display:block}
.pt-e1::before,.pt-e2::before{content:'';position:absolute;inset:-60vmax;z-index:-1;background:radial-gradient(circle at 50% 50%,transparent calc(min(86vmin,900px)*.49),#0b0907 calc(min(86vmin,900px)*.495))}
.pt-e2 img{filter:brightness(.62) sepia(.25) hue-rotate(185deg) saturate(1.4)}
.pt-e2::before{background:radial-gradient(circle at 50% 50%,transparent calc(min(86vmin,900px)*.49),#05070d calc(min(86vmin,900px)*.495))}
.pt-intro{position:absolute;z-index:3;left:50%;bottom:clamp(1.5rem,6vh,4rem);translate:-50% 0;width:min(40rem,90vw);display:grid;justify-items:center;gap:.8rem;text-align:center;color:var(--marfil);text-shadow:0 2px 30px rgba(0,0,0,.8)}
.pt-intro .lead{font-size:.95rem;color:rgba(243,230,220,.7)}
.portal:not(.vivo){height:auto}
.portal:not(.vivo) .pt-palco{position:relative;height:auto;display:grid}
.portal:not(.vivo) .pt-esfera,.portal:not(.vivo) .pt-intro{display:none}
.portal:not(.vivo) .pt-mundo{position:relative;min-height:90svh}
@media (max-width:800px){
  .pt-txt{width:auto;right:var(--g)}
  .pt-ia-fundo{right:50%;translate:50% -50%;top:34%;width:84vw;opacity:.5}
  .pt-txt-d{top:auto;bottom:clamp(2rem,8vh,4rem);translate:none}
}
.pt-ia-fundo{height:min(70vh,640px)}
.pt-ia-fundo .vis{background:none}
.pt-ia-fundo .vis-idiomas ul{font-size:clamp(2rem,4vw,3.6rem)}
.pt-esfera{left:64%;width:min(80vmin,820px);margin:calc(min(80vmin,820px)/-2) 0 0 calc(min(80vmin,820px)/-2)}
.pt-e1::before,.pt-e2::before{background:radial-gradient(circle at 50% 50%,transparent calc(min(80vmin,820px)*.49),#0b0907 calc(min(80vmin,820px)*.495))}
.pt-e2::before{background:radial-gradient(circle at 50% 50%,transparent calc(min(80vmin,820px)*.49),#05070d calc(min(80vmin,820px)*.495))}
.pt-intro{left:var(--g);bottom:auto;top:50%;translate:0 -50%;width:min(26rem,30vw);justify-items:start;text-align:left}
@media (max-width:800px){.pt-esfera{left:50%;top:58%;width:88vw;margin:-44vw 0 0 -44vw}.pt-intro{top:calc(var(--topo) + 3vh);translate:none;width:auto;right:var(--g)}}

/* ---------- 108 salas de producto: el proyector (Marketing) y la constelación (IA) (js/99-salas.js) ---------- */
.pt-intro .l{display:block}
.p-sala{padding-left:0;padding-right:0}
.proj{position:relative;height:620vh;margin-top:clamp(1rem,4vh,2rem)}
.pj-palco{position:sticky;top:0;height:100svh;overflow:hidden;isolation:isolate;background:#0b0907}
.pj-telas{position:absolute;inset:0}
.pj-tela{position:absolute;inset:0;margin:0;opacity:0}

.pj-tela>img,.pj-tela>.vis{position:absolute;inset:0;width:100%;height:100%;object-fit:cover}
.pj-velo{position:absolute;inset:0;z-index:3;background:linear-gradient(90deg,rgba(11,9,7,.85),rgba(11,9,7,.25) 55%,rgba(11,9,7,.55)),radial-gradient(120% 90% at 50% 50%,transparent 50%,rgba(0,0,0,.55))}
.pj-txt{position:absolute;z-index:4;left:var(--g);bottom:clamp(3rem,12vh,7rem);width:min(38rem,46vw);display:grid;gap:1rem;color:var(--marfil)}
.pj-txt h3{margin:0;font:400 clamp(2.6rem,6vw,6rem)/.98 var(--serif)}
.pj-txt p:not(.etiqueta){margin:0;font-size:clamp(1rem,1.3vw,1.2rem);color:rgba(243,230,220,.85);max-width:32em}
.pj-txt.entra>*{animation:doce-entra var(--t-entra) var(--curva) both}
.pj-txt.entra>*:nth-child(2){animation-delay:80ms}.pj-txt.entra>*:nth-child(3){animation-delay:160ms}
.pj-tira{position:absolute;z-index:4;right:clamp(16px,4vw,64px);top:0;bottom:0;width:clamp(120px,12vw,190px);overflow:hidden;background:#050403;box-shadow:0 0 0 1px rgba(214,188,134,.2);-webkit-mask:linear-gradient(transparent,#000 22%,#000 78%,transparent);mask:linear-gradient(transparent,#000 22%,#000 78%,transparent)}
.pj-tira::before,.pj-tira::after{content:'';position:absolute;top:0;bottom:0;width:14px;z-index:2;background:repeating-linear-gradient(transparent 0 8px,rgba(243,230,220,.85) 8px 17px,transparent 17px 26px);-webkit-mask:linear-gradient(90deg,transparent 3px,#000 3px 11px,transparent 11px);mask:linear-gradient(90deg,transparent 3px,#000 3px 11px,transparent 11px)}
.pj-tira::before{left:0}.pj-tira::after{right:0}
.pj-rolo{position:absolute;left:20px;right:20px;top:calc(50% - var(--fh,70px)/2);display:grid;row-gap:10px;will-change:transform}
.pj-f{position:relative;display:block;aspect-ratio:4/3;overflow:hidden;background:#120e0a}
.pj-f>span{position:absolute;inset:0;filter:sepia(.35) brightness(.8)}
.pj-f>span>img,.pj-f>span>.vis{position:absolute;inset:0;width:100%;height:100%;object-fit:cover}
.pj-f>span>.vis{font-size:5px}
.pj-f b{position:absolute;left:6px;bottom:4px;font:400 .8rem/1 var(--serif);color:var(--oro-2)}
.pj-janela{position:absolute;left:12px;right:12px;top:50%;aspect-ratio:4/3;translate:0 -50%;border:2px solid var(--oro-2);box-shadow:0 0 30px rgba(214,188,134,.45);z-index:3;pointer-events:none}
.pj-tc{position:absolute;z-index:4;left:var(--g);top:calc(var(--topo) + 3vh);margin:0;display:flex;gap:.6rem;align-items:center;font:500 .76rem/1 var(--sans);letter-spacing:.18em;color:var(--marfil);font-variant-numeric:tabular-nums}
.pj-tc b{width:9px;height:9px;border-radius:50%;background:#e2342b;animation:rec 1.2s steps(2) infinite}
.proj:not(.vivo){height:auto}.proj:not(.vivo) .pj-palco{position:relative;height:auto;min-height:60svh}.proj:not(.vivo) .pj-tira{display:none}.proj:not(.vivo) .pj-tela:first-child{opacity:1}
@media (max-width:800px){.pj-tira{width:84px;right:10px}.pj-rolo{left:14px;right:14px}.pj-janela{left:8px;right:8px}.pj-txt{width:auto;right:110px}.pj-txt h3{font-size:clamp(2rem,9vw,3rem)}}

.const{position:relative;height:560vh;margin-top:clamp(1rem,4vh,2rem)}
.ct-palco{position:sticky;top:0;height:100svh;overflow:hidden;background:radial-gradient(60% 70% at 62% 50%,#101a33,#05070d 72%)}
.ct-linhas{position:absolute;inset:0;width:100%;height:100%}
.ct-linhas line{stroke:var(--oro-2);stroke-width:1}
.ct-nos{position:absolute;inset:0}
.ct-no{position:absolute;left:0;top:0;display:flex;align-items:center;gap:.6rem;will-change:transform,opacity;white-space:nowrap}
.ct-no i{width:12px;height:12px;margin:-6px 0 0 -6px;border-radius:50%;background:var(--oro-2);box-shadow:0 0 18px rgba(214,188,134,.8);flex:none}
.ct-no b{font:400 clamp(.85rem,1.1vw,1.05rem)/1 var(--serif);color:rgba(243,230,220,.75)}
.ct-no.frente i{background:#fff;box-shadow:0 0 0 8px rgba(214,188,134,.2),0 0 40px rgba(214,188,134,1)}
.ct-no.frente b{color:var(--oro-2);font-size:clamp(1.1rem,1.6vw,1.5rem)}
.ct-txt{position:absolute;z-index:2;left:var(--g);top:50%;translate:0 -50%;width:min(30rem,34vw);display:grid;gap:1rem;color:var(--marfil)}
.ct-txt h3{margin:0;font:400 clamp(2.2rem,4.6vw,4.6rem)/1 var(--serif)}
.ct-txt p:not(.etiqueta){margin:0;color:rgba(243,230,220,.82);font-size:clamp(1rem,1.2vw,1.15rem)}
.ct-txt.entra>*{animation:doce-entra var(--t-entra) var(--curva) both}
.const:not(.vivo){height:auto}.const:not(.vivo) .ct-palco{position:relative;height:auto;padding:4rem var(--g)}.const:not(.vivo) .ct-txt{position:static;translate:none;width:auto}.const:not(.vivo) .ct-nos,.const:not(.vivo) .ct-linhas{display:none}
@media (max-width:800px){.ct-txt{top:auto;bottom:clamp(2rem,8vh,4rem);translate:none;width:auto;right:var(--g)}.ct-no b{display:none}.ct-no.frente b{display:inline}}
.pj-telas{z-index:0}
/* ---------- 109 los dos mundos de la portada (en lugar del portal por el reloj) ---------- */
.mundos{position:relative}
.mn-cab{padding:clamp(5rem,14vh,9rem) var(--g) clamp(2rem,6vh,4rem);display:grid;justify-items:center;text-align:center;gap:1rem}
.mundos .pt-mundo{position:relative;height:100svh;min-height:600px;overflow:hidden;isolation:isolate}
.mundos .pt-mundo+.pt-mundo{margin-top:2px}
.mundos .filme{position:absolute;inset:0}
.mundos .pt-ia-fundo{z-index:0}
/* ---------- 110 el mapa de los sectores (js/99-mapa.js) ---------- */
.mapa{display:grid;grid-template-columns:minmax(0,4fr) minmax(0,8fr);gap:var(--g);align-items:center}
.mp-txt{display:grid;gap:1.2rem}
.mp-fig{margin:0;position:relative}
.mapa-svg{width:100%;height:auto;overflow:hidden}
.mp-p{fill:#17120d;stroke:rgba(214,188,134,.22);stroke-width:.8}
.mp-p.mp-d{fill:#231b13;stroke:rgba(214,188,134,.45)}
.mp-mar{font:italic 400 22px var(--serif);fill:rgba(214,188,134,.35);letter-spacing:.06em}
.mp-rota{fill:none;stroke:var(--oro-2);stroke-width:1.6;stroke-dasharray:1;stroke-linecap:round}
.mp-c{fill:var(--oro-2)}
.mp-casa .mp-c{fill:#fff;stroke:var(--oro-2);stroke-width:3}
.mp-onda{fill:none;stroke:var(--oro-2);stroke-width:1.2;opacity:0;transform-box:fill-box;transform-origin:center}
.mapa.aceso .mp-onda{animation:mp-onda 2.6s var(--curva) infinite;animation-delay:calc(var(--i)*.5s)}
@keyframes mp-onda{from{opacity:.9;transform:scale(1)}to{opacity:0;transform:scale(3.4)}}
.mp-t{font:400 22px var(--serif);fill:var(--marfil)}
.mp-s{font:500 12px var(--sans);letter-spacing:.08em;fill:rgba(243,230,220,.65)}
@media (max-width:900px){.mapa{grid-template-columns:1fr}.mp-t{font-size:30px}.mp-s{font-size:17px}}
.mp-fig{overflow:hidden;border-radius:6px;background:radial-gradient(80% 80% at 70% 60%,rgba(0,34,241,.06),transparent)}

/* ---------- 111 el índice de los casos con la tarjeta que sigue al cursor (js/99-indice.js) ---------- */
.ic{position:relative}
.ic-l{list-style:none;margin:0;padding:0;border-top:1px solid rgba(214,188,134,.25)}
.ic-i{border-bottom:1px solid rgba(214,188,134,.25);transition:opacity var(--t-toque) linear}
.ic.a-ver .ic-i:not(.foco){opacity:.35}
.ic-f{width:100%;display:grid;grid-template-columns:minmax(10rem,3fr) 8fr 2rem;gap:var(--g);align-items:baseline;padding:clamp(1.3rem,3vh,2rem) 0;background:none;border:0;color:var(--marfil);text-align:left;cursor:pointer}
.ic-s{font:500 .74rem/1.3 var(--sans);letter-spacing:.16em;text-transform:uppercase;color:rgba(243,230,220,.55)}
.ic-t{font:400 clamp(1.5rem,3vw,3rem)/1.05 var(--serif);transition:transform var(--t-entra) var(--curva),color var(--t-toque) linear}
.ic-f:hover .ic-t,.ic-f[aria-expanded="true"] .ic-t{transform:translateX(.8rem);color:var(--oro-2)}
.ic-y{font:300 1.6rem/1 var(--sans);color:var(--oro-2);transition:transform var(--t-entra) var(--curva)}
.ic-f[aria-expanded="true"] .ic-y{transform:rotate(45deg)}
.ic-d{display:grid;grid-template-columns:minmax(0,4fr) minmax(0,7fr);gap:var(--g);padding:0 0 clamp(1.5rem,4vh,2.5rem);overflow:hidden}
.ic-dm{aspect-ratio:4/3;overflow:hidden;border-radius:3px}
.ic-dm img,.ic-cm img{width:100%;height:100%;object-fit:cover}
.ic-dt{display:grid;gap:.8rem;align-content:start;color:var(--texto)}
.ic-dt p{margin:0}.ic-dt b{color:var(--marfil);font-weight:500}
.ic-dt ul,.ic-ct ul{margin:0;padding-left:1rem;border-left:2px solid var(--oro);list-style:none;color:var(--oro-2);font-size:.92rem}
.ic-card{position:fixed;left:0;top:0;z-index:60;width:min(26vw,380px);pointer-events:none;opacity:0;margin:-60px 0 0 40px;transition:opacity var(--t-toque) linear}
.ic-card.on{opacity:1}
.ic-c{display:none;border-radius:6px;overflow:hidden;background:#120e0a;box-shadow:0 30px 70px rgba(0,0,0,.6),0 0 0 1px rgba(214,188,134,.35)}
.ic-c.on{display:block;animation:ic-c .45s var(--curva)}
@keyframes ic-c{from{opacity:0;transform:scale(.92)}}
.ic-cm{aspect-ratio:4/3;overflow:hidden}
.ic-cm .caso-marca,.ic-dm .caso-marca{width:100%;height:100%;display:grid;place-items:center;background:radial-gradient(circle,#2a2118,#0d0b09)}
.ic-cm .caso-marca svg,.ic-dm .caso-marca svg{width:22%;height:auto}
.ic-ct{display:grid;gap:.5rem;padding:1rem 1.1rem 1.2rem}
.ic-r{margin:0;font:400 1.05rem/1.3 var(--serif);color:var(--marfil)}
@media (max-width:800px){.ic-f{grid-template-columns:1fr 1.5rem;gap:.4rem 1rem}.ic-s{grid-column:1/-1}.ic-d{grid-template-columns:1fr}.ic-card{display:none}}

/* ---------- 112 la IA de la portada: empieza azul y se vuelve naranja con el scroll (contraste) ---------- */
.mundos .pt-ia{background:radial-gradient(70% 70% at 70% 50%,var(--ia-1,#0f1830),var(--ia-2,#05070d) 70%)}
.mundos .pt-ia .vis-idiomas li{color:var(--ia-t,rgba(243,230,220,.9))}
/* ---------- 113 formularios que dicen qué hacer: guía, progreso, opciones que parecen botones ---------- */
.dj-barra{display:flex;gap:4px;margin:.4rem 0 1rem;max-width:30rem}
.dj-barra i{flex:1;height:4px;border-radius:2px;background:rgba(23,18,12,.14)}
.dj-barra i.feito{background:var(--oro-3,#a98b52)}
.dj-barra i.agora{background:linear-gradient(90deg,var(--oro-3,#a98b52) 50%,rgba(23,18,12,.14) 50%);background-size:200% 100%;animation:dj-agora 1.6s ease-in-out infinite}
@keyframes dj-agora{0%{background-position:100% 0}100%{background-position:0 0}}
.dj-guia{display:flex;align-items:center;gap:.7rem;margin:.2rem 0 1.2rem;padding:.7rem 1rem;border-radius:999px;background:rgba(169,139,82,.12);color:#5a4423;font:500 .9rem/1.3 var(--sans);width:fit-content}
.dj-guia i{width:10px;height:10px;border-radius:50%;background:#a98b52;box-shadow:0 0 0 0 rgba(169,139,82,.6);animation:dj-pulso 1.6s infinite}
@keyframes dj-pulso{70%{box-shadow:0 0 0 10px rgba(169,139,82,0)}100%{box-shadow:0 0 0 0 rgba(169,139,82,0)}}
.dj .op{position:relative;cursor:pointer;transition:transform var(--t-toque) var(--curva),box-shadow var(--t-toque) var(--curva)}
.dj .op:hover{transform:translateY(-3px);box-shadow:0 0 0 1px rgba(214,188,134,.7),0 14px 30px rgba(0,0,0,.35)}
.op-ok{flex:none;width:18px;height:18px;border-radius:50%;border:1.5px solid rgba(214,188,134,.8);display:inline-grid;place-items:center;margin-right:.2rem}
.op[aria-pressed="true"] .op-ok{background:var(--oro-2)}
.op[aria-pressed="true"] .op-ok::after{content:'';width:6px;height:6px;border-radius:50%;background:#16110b}
.op-eleg{margin-left:auto;font:500 .7rem/1 var(--sans);letter-spacing:.14em;text-transform:uppercase;color:var(--oro-2);opacity:0;transition:opacity var(--t-toque) linear}
.op:hover .op-eleg{opacity:1}
.dj:not(.tocou) .dj-ops .op:first-child{animation:op-ajuda 2.2s ease-in-out 1.2s 3}
@keyframes op-ajuda{50%{box-shadow:0 0 0 2px rgba(214,188,134,.9),0 0 30px rgba(214,188,134,.35)}}
.campo.f-paso,.f-paso{display:flex;flex-direction:row;align-items:center;gap:.7rem;margin:.6rem 0 -.2rem;font:400 1.25rem/1 var(--serif)}
.f-paso b{display:grid;place-items:center;width:30px;height:30px;border-radius:50%;background:var(--tinta);color:var(--marfil);font:500 .85rem/1 var(--sans)}
.f-envia{display:grid;justify-items:start;gap:.7rem}
.f-envia .btn{font-size:1.05rem;padding:1.15rem 1.8rem}

/* ---------- 114 los casos en mosaico que se abre a pantalla entera (js/99-mosaico.js) ---------- */
.mz{list-style:none;margin:0;padding:0;display:grid;grid-template-columns:repeat(4,minmax(0,1fr));grid-auto-rows:clamp(150px,21vh,230px);grid-auto-flow:dense;gap:clamp(6px,.8vw,12px)}
.mz-t0{grid-column:span 2;grid-row:span 2}.mz-t2{grid-row:span 2}.mz-t4{grid-row:span 2}.mz-t5{grid-column:span 2}.mz-t7{grid-column:span 2}
.mz-b{position:relative;display:block;width:100%;height:100%;padding:0;border:0;border-radius:6px;overflow:hidden;background:#120e0a;cursor:pointer;color:var(--marfil);text-align:left}
.mz-b img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;transition:transform var(--t-cena) var(--curva),filter var(--t-entra) linear;filter:brightness(.82)}
.mz-b:hover img,.mz-b:focus-visible img{transform:scale(1.06);filter:brightness(1)}
.mz-b .caso-marca{position:absolute;inset:0;display:grid;place-items:center;background:radial-gradient(circle,#2a2118,#0d0b09)}
.mz-b .caso-marca svg{width:18%;height:auto}
.mz-l{position:absolute;inset:auto 0 0 0;display:grid;gap:.35rem;padding:2.6rem 1.1rem 1rem;background:linear-gradient(transparent,rgba(11,9,7,.88))}
.mz-s{font:500 .66rem/1.2 var(--sans);letter-spacing:.16em;text-transform:uppercase;color:var(--oro-2)}
.mz-n{font:400 clamp(1rem,1.5vw,1.45rem)/1.12 var(--serif)}
.mz-t0 .mz-n{font-size:clamp(1.4rem,2.4vw,2.3rem)}
.mz-v{font:500 .7rem/1 var(--sans);letter-spacing:.14em;text-transform:uppercase;color:var(--marfil);opacity:0;transform:translateY(6px);transition:opacity var(--t-toque) linear,transform var(--t-entra) var(--curva)}
.mz-b:hover .mz-v,.mz-b:focus-visible .mz-v{opacity:1;transform:none}
.mz-ab{position:fixed;inset:0;z-index:150;display:grid;grid-template-columns:minmax(0,7fr) minmax(0,5fr);background:#0b0907;color:var(--marfil)}
.mz-ab-f{position:relative;overflow:hidden}
.mz-ab-f img,.mz-ab-f .caso-marca{position:absolute;inset:0;width:100%;height:100%;object-fit:cover}
.mz-ab-f .caso-marca{display:grid;place-items:center;background:radial-gradient(circle,#2a2118,#0d0b09)}.mz-ab-f .caso-marca svg{width:20%}
.mz-ab-t{display:grid;align-content:center;gap:2rem;padding:calc(var(--topo) + 2rem) clamp(1.5rem,4vw,4rem) 2.5rem;overflow:auto}
.mz-ab-t [data-mz-txt]{display:grid;gap:1.2rem}
.mz-ab-t dl{margin:0;display:grid;gap:1rem}
.mz-ab-t dt{font:500 .72rem/1.2 var(--sans);letter-spacing:.16em;text-transform:uppercase;color:var(--oro-2);margin-bottom:.3rem}
.mz-ab-t dd{margin:0;color:var(--texto)}
.mz-ab-t ul{margin:0;padding-left:1rem;border-left:2px solid var(--oro);list-style:none;color:var(--oro-2)}
.mz-ab-nav{display:flex;justify-content:space-between;gap:1rem;border-top:1px solid rgba(214,188,134,.25);padding-top:1.2rem}
.mz-x{position:absolute;top:clamp(14px,3vh,28px);right:clamp(14px,3vw,36px);z-index:2;width:52px;height:52px;border-radius:50%;border:1px solid rgba(243,230,220,.4);background:rgba(11,9,7,.6);color:var(--marfil);font:300 1.8rem/1 var(--sans);cursor:pointer;backdrop-filter:blur(6px)}
.mz-x:hover{background:var(--oro-2);color:#16110b}
html.mz-aberto{overflow:hidden}
@media (max-width:800px){
  .mz{grid-template-columns:repeat(2,minmax(0,1fr));grid-auto-rows:42vw}
  .mz-t0,.mz-t5,.mz-t7{grid-column:span 2}.mz-t2,.mz-t4{grid-row:span 1}
  .mz-ab{grid-template-columns:1fr;grid-template-rows:40svh 1fr}
  .mz-ab-t{padding:1.5rem var(--g) 2rem;align-content:start}
}
.mz-t6{grid-row:span 2}@media (max-width:800px){.mz-t6{grid-row:span 1}}

/* la IA de la portada en la misma gama que el sitio (sin azul ni naranja: sin saltos de color) */
.mundos .pt-ia{background:radial-gradient(70% 70% at 70% 50%,#2a2017,#0b0907 72%)}
.mundos .pt-ia .vis-idiomas li{color:rgba(243,230,220,.9)}
/* ---------- 115 las opciones del diagnóstico en una columna limpia; el proyector en el teléfono ---------- */
.dj .op{grid-template-columns:18px 1.7rem minmax(0,1fr) auto auto;column-gap:.8rem;align-items:center}
.dj .com-foto .op{grid-template-columns:18px 1.7rem minmax(0,1fr) auto}
.dj .op .op-ok{margin:0}
.dj .op .op-t{min-width:0}
.dj .op .op-i,.dj .op .op-n{grid-column:4}
.dj .op .op-eleg{grid-column:-2}
.pj-prog{display:none}
@media (max-width:800px){
  .dj .op{grid-template-columns:18px 1.5rem minmax(0,1fr) auto;column-gap:.6rem}
  .dj .op .op-eleg{display:none}
  .pj-tira{display:none}
  .pj-txt{right:var(--g);bottom:clamp(4rem,12vh,6rem)}
  .pj-prog{display:flex;position:absolute;z-index:4;left:var(--g);right:var(--g);bottom:clamp(1.6rem,5vh,2.6rem);gap:4px}
  .pj-prog i{flex:1;height:3px;border-radius:2px;background:rgba(243,230,220,.22);transition:background var(--t-entra) var(--curva)}
  .pj-prog i.on{background:var(--oro-2)}
}
.entrada.capitulo{background:radial-gradient(80% 70% at 50% 40%,rgba(30,24,18,.97),rgba(11,9,7,.98) 75%)}
/* ---------- 116 la cabecera que guía la portada y el reloj pequeño que gira con el scroll ---------- */
.topo-lado a{position:relative;transition:color var(--t-toque) linear}
.topo-lado a.agora{color:var(--oro-2)}
.topo-lado a::after{content:'';position:absolute;left:0;right:0;bottom:-6px;height:1px;background:var(--oro-2);transform:scaleX(0);transform-origin:left;transition:transform var(--t-entra) var(--curva)}
.topo-lado a.agora::after{transform:scaleX(1)}
.mini3d{position:fixed;left:clamp(12px,2vw,28px);bottom:clamp(12px,3vh,28px);z-index:45;display:flex;align-items:center;gap:.8rem;pointer-events:none;opacity:0;transform:translateY(16px) scale(.9);transition:opacity var(--t-entra) var(--curva),transform var(--t-entra) var(--curva)}
.mini3d.on{opacity:1;transform:none}
.mini3d canvas{width:108px;height:108px;display:block;filter:drop-shadow(0 12px 22px rgba(0,0,0,.55))}
.mini3d-r{font:400 1.05rem/1.1 var(--serif);color:var(--marfil);text-shadow:0 2px 14px rgba(0,0,0,.8);opacity:0;transform:translateX(-8px);transition:opacity var(--t-entra) var(--curva),transform var(--t-entra) var(--curva)}
.mini3d.com-r .mini3d-r{opacity:1;transform:none}
.claro .mini3d-r{color:var(--tinta)}
@media (max-width:800px){.mini3d canvas{width:76px;height:76px}.mini3d-r{font-size:.9rem}}
.mini3d-r{padding:.45rem .8rem;border-radius:999px;background:rgba(11,9,7,.62);backdrop-filter:blur(8px);-webkit-backdrop-filter:blur(8px);text-shadow:none}.claro .mini3d-r{color:var(--marfil)}
/* ---------- 117 Marketing en el teléfono: proyector con el fotograma entero, pilares en columna, final sin solapes ---------- */
@media (max-width:800px){
  .pj-palco{background:#0b0907}
  .pj-telas{top:calc(var(--topo) + 3rem);bottom:auto;left:var(--g);right:var(--g);height:calc((100vw - 2 * var(--g)) * .5625);border-radius:6px;overflow:hidden}
  .pj-tela>img{object-fit:cover}
  .pj-velo{display:none}
  .pj-tc{top:calc(var(--topo) + .9rem)}
  .pj-txt{top:calc(var(--topo) + 3rem + (100vw - 2 * var(--g)) * .5625 + 1.6rem);bottom:auto;left:var(--g);right:var(--g);width:auto}
  .pj-txt h3{font-size:clamp(2rem,9vw,2.8rem)}
  .pilares{display:grid;grid-template-columns:1fr;overflow:visible;margin-inline:0;padding-inline:0;gap:1.6rem}
  .pilares .pilar{width:auto!important;min-width:0}
  body[data-pagina="marketing"] .banda::before{width:92vw}
  body[data-pagina="marketing"] .banda::after{display:none}
}
@media (max-width:800px){
  .pj-telas{height:calc((100vw - 2 * var(--g)) * .78)}
  .pj-txt{top:calc(var(--topo) + 3rem + (100vw - 2 * var(--g)) * .78 + 1.6rem)}
}
/* ---------- 118 Marketing en el teléfono: lista clara de los doce servicios en lugar del proyector ---------- */
.pj-lista{display:none}
@media (max-width:800px){
  .proj{display:none}
  .pj-lista{display:grid;gap:2.2rem;list-style:none;margin:2rem 0 0;padding:0 var(--g)}
  .pj-m{display:grid;gap:.55rem}
  .pj-m figure{margin:0 0 .5rem;aspect-ratio:16/10;overflow:hidden;border-radius:6px;background:#120e0a}
  .pj-m img{width:100%;height:100%;object-fit:cover}
  .pj-m h3{margin:0;font:400 1.7rem/1.05 var(--serif)}
  .pj-m p:not(.etiqueta){margin:0;color:var(--texto)}
}