/* RAVG Group — hoja única. Monocromo estricto: negro, blanco y grises.
   El tema claro/oscuro es una inversión limpia de los mismos tokens, y
   .invertida da la vuelta a una sección concreta para el ritmo claro/oscuro. */

/* Una sola familia: Montserrat, geométrica como el «GROUP» del logo. El contraste
   de los titulares sale del peso y del tono, nunca de una cursiva con serifa. */
@font-face{font-family:"Montserrat";src:url(../fuentes/montserrat-400.woff2) format("woff2");font-weight:400;font-display:swap}
@font-face{font-family:"Montserrat";src:url(../fuentes/montserrat-500.woff2) format("woff2");font-weight:500;font-display:swap}
@font-face{font-family:"Montserrat";src:url(../fuentes/montserrat-600.woff2) format("woff2");font-weight:600;font-display:swap}
@font-face{font-family:"Montserrat";src:url(../fuentes/montserrat-800.woff2) format("woff2");font-weight:800;font-display:swap}

/* ---------- tokens ---------- */
:root,
html[data-tema="claro"],
html[data-tema="oscuro"] .invertida{
  --bg:#ffffff; --bg-2:#f4f4f3; --bg-3:#ebebea;
  --tinta:#0a0a0a; --tinta-2:#4f4f4f; --tinta-3:#6a6a6a;
  --linea:#e4e4e2; --linea-2:#cfcfcc; --linea-3:#a8a8a5;
  --velo:rgba(255,255,255,.72);
  --sombra:0 1px 0 rgba(0,0,0,.04),0 24px 60px -30px rgba(0,0,0,.25);
  --foto-filtro:none;
  color-scheme:light;
}
html[data-tema="oscuro"],
html[data-tema="claro"] .invertida{
  --bg:#000000; --bg-2:#0b0b0b; --bg-3:#151515;
  --tinta:#f3f3f2; --tinta-2:#a9a9a6; --tinta-3:#868683;
  --linea:#1d1d1d; --linea-2:#2d2d2d; --linea-3:#4a4a4a;
  --velo:rgba(0,0,0,.6);
  --sombra:0 1px 0 rgba(255,255,255,.04),0 30px 70px -30px rgba(0,0,0,.9);
  color-scheme:dark;
}
@media (prefers-color-scheme:dark){
  html:not([data-tema]){
    --bg:#000000; --bg-2:#0b0b0b; --bg-3:#151515;
    --tinta:#f3f3f2; --tinta-2:#a9a9a6; --tinta-3:#868683;
    --linea:#1d1d1d; --linea-2:#2d2d2d; --linea-3:#4a4a4a;
    --velo:rgba(0,0,0,.6); color-scheme:dark;
  }
}
:root{
  --f-display:"Montserrat",ui-sans-serif,system-ui,-apple-system,"Segoe UI",sans-serif;
  --f-texto:var(--f-display);
  --f-mono:var(--f-display);
  --ancho:1240px;
  --margen:clamp(16px,4vw,40px);
  --curva:cubic-bezier(.77,0,.175,1);
  --salida:cubic-bezier(.16,1,.3,1);
  /* componentes de la librería: todo monocromo */
  --lui-acento:var(--tinta);
}

/* ---------- base ---------- */
*,*::before,*::after{box-sizing:border-box}
html{-webkit-text-size-adjust:100%;scroll-behavior:smooth;scroll-padding-top:84px}
@media (prefers-reduced-motion:reduce){html{scroll-behavior:auto}}
body{margin:0;background:var(--bg);color:var(--tinta);font:400 17px/1.6 var(--f-texto);
  -webkit-font-smoothing:antialiased;text-rendering:optimizeLegibility;overflow-x:clip}
img,svg{display:block;max-width:100%}
img{height:auto}
a{color:inherit;text-decoration-thickness:1px;text-underline-offset:.22em}
h1,h2,h3{font-family:var(--f-display);font-weight:800;letter-spacing:-.035em;line-height:1.04;margin:0;text-wrap:balance}
p{margin:0;text-wrap:pretty}
.tenue{color:var(--tinta-3);font-weight:500;font-style:normal}
::selection{background:var(--tinta);color:var(--bg)}
:focus-visible{outline:2px solid var(--tinta);outline-offset:3px;border-radius:2px}
.salto{position:absolute;left:12px;top:-60px;z-index:100;background:var(--tinta);color:var(--bg);padding:10px 14px;font:500 14px var(--f-mono);text-decoration:none}
.salto:focus{top:12px}
.sr{position:absolute!important;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap}
.envoltura{width:min(var(--ancho),100% - 2*var(--margen));margin-inline:auto}
.mono{font-family:var(--f-mono);font-size:11.5px;font-weight:600;letter-spacing:.14em;text-transform:uppercase}
.etiqueta{font:600 11.5px/1.2 var(--f-mono);letter-spacing:.16em;text-transform:uppercase;color:var(--tinta-2);display:inline-flex;gap:.6em;align-items:center}
.etiqueta b{font-weight:500;color:var(--tinta)}

/* El revelado de la librería sube la opacidad desde 0: aquí sólo se mueve
   (un texto a media opacidad falla el contraste y lo caza Lighthouse). */
[data-lui~="revelar"]{opacity:1!important;transition:transform .9s var(--salida)!important}

/* ---------- botones ---------- */
.boton{--alto:52px;display:inline-flex;align-items:center;gap:12px;height:var(--alto);padding:0 22px;
  font:500 15px/1 var(--f-texto);letter-spacing:-.005em;text-decoration:none;border-radius:999px;
  border:1px solid var(--tinta);transition:background .35s var(--salida),color .35s var(--salida),transform .35s var(--salida);
  position:relative;overflow:hidden;isolation:isolate;white-space:nowrap}
.boton.lleno{background:var(--tinta);color:var(--bg)}
.boton.hueco{background:transparent;color:var(--tinta)}
.boton .flecha{width:16px;height:16px;transition:transform .35s var(--salida)}
.boton::before{content:"";position:absolute;inset:0;z-index:-1;border-radius:inherit;transform:translateY(101%);transition:transform .45s var(--curva)}
.boton.lleno::before{background:var(--bg)}
.boton.hueco::before{background:var(--tinta)}
@media (hover:hover){
  .boton:hover::before{transform:none}
  .boton.lleno:hover{color:var(--tinta)}
  .boton.hueco:hover{color:var(--bg)}
  .boton:hover .flecha{transform:translateX(4px)}
}
@media (prefers-reduced-motion:reduce){.boton,.boton::before,.boton .flecha{transition:none}}
.enlace-flecha{display:inline-flex;gap:10px;align-items:center;font:500 15px var(--f-texto);text-decoration:none;border-bottom:1px solid var(--linea-3);padding-bottom:4px;transition:border-color .3s}
.enlace-flecha:hover{border-color:var(--tinta)}
.enlace-flecha svg{width:14px;height:14px;transition:transform .3s var(--salida)}
.enlace-flecha:hover svg{transform:translate(3px,-3px)}

/* ---------- cabecera ---------- */
.cabecera{position:sticky;top:0;z-index:50;background:color-mix(in srgb,var(--bg) 78%,transparent);
  -webkit-backdrop-filter:saturate(1.2) blur(14px);backdrop-filter:saturate(1.2) blur(14px);border-bottom:1px solid var(--linea)}
@supports not (background:color-mix(in srgb,red 50%,blue)){.cabecera{background:var(--bg)}}
.cabecera .envoltura{display:flex;align-items:center;gap:24px;height:68px}
.marca{display:inline-flex;align-items:center;gap:12px;text-decoration:none;color:var(--tinta);margin-right:auto}
.marca .iso{width:30px;height:31px}
.marca .palabra{width:86px;height:28px}
.nav{display:flex;gap:4px}
.nav a{font:500 14px var(--f-texto);text-decoration:none;color:var(--tinta-2);padding:8px 12px;border-radius:999px;transition:color .2s,background .2s}
.nav a:hover{color:var(--tinta);background:var(--bg-3)}
.tema{width:40px;height:40px;border-radius:999px;border:1px solid var(--linea-2);background:transparent;color:var(--tinta);display:grid;place-items:center;cursor:pointer;transition:border-color .2s,transform .3s var(--salida)}
.tema:hover{border-color:var(--tinta)}
.tema svg{width:18px;height:18px}
.tema .sol{display:none}
html[data-tema="oscuro"] .tema .sol{display:block}
html[data-tema="oscuro"] .tema .luna{display:none}
.menu-boton{display:none}
.cabecera .boton{--alto:40px;padding:0 16px;font-size:14px}
@media (max-width:900px){
  .nav,.cabecera .boton{display:none}
  .menu-boton{display:grid}
}
.menu-movil{margin:0;inset:68px 0 auto 0;width:100%;max-width:none;border:0;border-bottom:1px solid var(--linea);padding:12px var(--margen) 24px;background:var(--bg);color:var(--tinta)}
.menu-movil a{display:block;padding:14px 0;border-bottom:1px solid var(--linea);font:500 22px var(--f-display);text-decoration:none}
.menu-movil a:last-child{border:0}

/* ---------- hero ---------- */
.hero{position:relative;min-height:min(92svh,980px);display:grid;align-items:end;overflow:hidden;isolation:isolate;border-bottom:1px solid var(--linea)}
.hero-foto{position:absolute;inset:0;z-index:-2;background:var(--bg) no-repeat 68% 50%/cover}
/* una foto propia para cada tema (no un negativo): sólo se descarga la que pinta la regla activa */
html[data-tema="oscuro"] .hero-foto{background-image:url(../img/hero-1536.webp)}
html[data-tema="claro"] .hero-foto{background-image:url(../img/hero-claro-1536.webp);background-size:min(64%,1100px) auto;background-position:96% 88%}
@media (max-width:720px){
  html[data-tema="oscuro"] .hero-foto{background-image:url(../img/hero-800.webp)}
  html[data-tema="claro"] .hero-foto{background-image:url(../img/hero-claro-800.webp);background-size:cover;background-position:78% 50%}
}
/* modo claro: la misma foto en negativo — torres de papel sobre blanco */
.hero::after{content:"";position:absolute;inset:0;z-index:-1;
  background:linear-gradient(90deg,var(--bg) 0%,color-mix(in srgb,var(--bg) 70%,transparent) 38%,transparent 66%),
             linear-gradient(0deg,var(--bg) 0%,transparent 34%)}
.hero .envoltura{padding:clamp(56px,10vh,120px) 0 clamp(40px,7vh,72px)}
.hero-logo{width:clamp(150px,16vw,220px);margin-bottom:clamp(28px,5vh,52px);color:var(--tinta)}
.hero h1{font-size:clamp(40px,6.4vw,96px);max-width:13ch;line-height:1;letter-spacing:-.045em}
.hero h1 .tenue{display:block}
.hero .lema{margin-top:28px;max-width:54ch;font-size:clamp(17px,1.35vw,19px);color:var(--tinta-2)}
.hero .acciones{display:flex;flex-wrap:wrap;gap:12px;margin-top:36px}
.hero-filiales{display:grid;grid-template-columns:repeat(4,1fr);margin-top:clamp(48px,9vh,96px);border-top:1px solid var(--linea-2)}
.hero-filiales a{display:block;padding:18px 18px 4px 0;text-decoration:none;color:var(--tinta-2);transition:color .25s}
.hero-filiales a + a{padding-left:18px;border-left:1px solid var(--linea-2)}
.hero-filiales a:hover{color:var(--tinta)}
.hero-filiales strong{display:block;font:800 17px/1.2 var(--f-display);color:var(--tinta);letter-spacing:-.025em;margin-bottom:6px}
.hero-filiales span{font:600 12.5px/1.4 var(--f-mono);letter-spacing:.12em;text-transform:uppercase}
@media (max-width:980px){.hero-filiales{grid-template-columns:repeat(2,1fr)}.hero-filiales a:nth-child(3){padding-left:0;border-left:0}}
@media (max-width:720px){
  .hero{min-height:auto}
  .hero-foto{background-position:78% 50%;opacity:.55}
  .hero::after{background:linear-gradient(0deg,var(--bg) 8%,color-mix(in srgb,var(--bg) 55%,transparent) 60%,color-mix(in srgb,var(--bg) 20%,transparent))}
  .hero-filiales{grid-template-columns:1fr}
  .hero-filiales a,.hero-filiales a + a{padding:16px 0;border-left:0;border-bottom:1px solid var(--linea-2)}
}

/* ---------- secciones ---------- */
.seccion{padding:clamp(88px,13vw,168px) 0;background:var(--bg);color:var(--tinta);position:relative}
.seccion.gris{background:var(--bg-2)}
.cabeza{display:grid;grid-template-columns:minmax(120px,1fr) minmax(0,3fr);gap:24px 40px;margin-bottom:clamp(48px,7vw,88px)}
.cabeza .etiqueta{padding-top:.9em}
.cabeza h2{font-size:clamp(32px,4.6vw,68px);max-width:17ch}
.cabeza .intro{grid-column:2;max-width:60ch;color:var(--tinta-2);font-size:clamp(17px,1.3vw,19px)}
@media (max-width:760px){.cabeza{grid-template-columns:1fr}.cabeza .intro{grid-column:1}}

/* [01] el grupo */
.grupo{display:grid;grid-template-columns:minmax(120px,1fr) minmax(0,1.7fr) minmax(0,1.3fr);gap:40px}
.grupo .texto{grid-column:2;display:grid;gap:22px;font-size:clamp(18px,1.45vw,21px);line-height:1.55;color:var(--tinta-2)}
.grupo .texto p:first-child{color:var(--tinta)}
.grupo figure{grid-column:3;margin:0;position:relative;aspect-ratio:4/5;overflow:hidden;border-radius:4px;background:var(--bg-2)}
.grupo figure img{width:100%;height:100%;object-fit:cover}
.grupo figcaption{position:absolute;left:16px;bottom:14px;color:var(--tinta);font:600 11.5px var(--f-mono);letter-spacing:.12em;text-transform:uppercase}
.datos{grid-column:2 / -1;display:grid;grid-template-columns:repeat(3,1fr);border-top:1px solid var(--linea-2);margin-top:24px}
.datos div{padding:28px 24px 0 0}
.datos div + div{padding-left:24px;border-left:1px solid var(--linea-2)}
.datos .num{display:block;font:800 clamp(48px,6vw,88px)/.9 var(--f-display);letter-spacing:-.05em;font-variant-numeric:lining-nums}
.datos .txt{display:block;margin-top:14px;color:var(--tinta-2);font-size:15px;max-width:26ch}
@media (max-width:900px){
  .grupo{grid-template-columns:1fr}
  .grupo .texto,.grupo figure,.datos{grid-column:1}
  .grupo figure{aspect-ratio:16/10}
}
@media (max-width:600px){
  .datos{grid-template-columns:1fr}
  .datos div,.datos div + div{padding:22px 0;border-left:0;border-bottom:1px solid var(--linea-2)}
}

/* [02] esquema */
.esquema{display:grid;grid-template-columns:1fr;gap:0;border:1px solid var(--linea-2);border-radius:6px;overflow:hidden;background:var(--bg)}
.esquema-lienzo{position:relative;padding:clamp(10px,2.4vw,36px);border-bottom:1px solid var(--linea-2);
  background-image:radial-gradient(var(--linea-2) 1px,transparent 1.2px);background-size:22px 22px;background-position:-11px -11px}
.esquema-lienzo svg{width:100%;height:auto;overflow:visible;font-family:var(--f-texto)}
.esquema-ficha{padding:clamp(24px,3vw,40px);display:grid;grid-template-columns:minmax(0,1.25fr) minmax(0,1fr) auto;gap:20px clamp(24px,4vw,56px);align-items:start;min-height:230px}
.esquema-ficha .f-a{display:grid;gap:14px}
.esquema-ficha .f-c{align-self:end}
@media (max-width:900px){.esquema-ficha{grid-template-columns:1fr}}
.esquema-ficha .etiqueta{color:var(--tinta-3)}
.esquema-ficha h3{font-size:clamp(28px,2.4vw,36px)}
.esquema-ficha p{color:var(--tinta-2);font-size:16px}
.esquema-ficha ul{list-style:none;margin:0;padding:0;border-top:1px solid var(--linea)}
.esquema-ficha li{padding:10px 0;border-bottom:1px solid var(--linea);font-size:15px;display:flex;gap:12px}
.esquema-ficha li::before{content:"";flex:none;width:6px;height:6px;margin-top:.62em;background:var(--tinta);border-radius:1px}
.esquema-ficha .pista{font:400 12.5px/1.5 var(--f-mono);color:var(--tinta-3);letter-spacing:.03em}
.esquema-ficha.cambia > *{animation:ficha .5s var(--salida) both}
@keyframes ficha{from{transform:translateY(10px)}to{transform:none}}
.esquema-texto{margin-top:20px;border-top:1px solid var(--linea)}
.esquema-texto summary{cursor:pointer;padding:16px 0;font:600 13px var(--f-mono);letter-spacing:.12em;text-transform:uppercase;color:var(--tinta-2);list-style:none;display:flex;gap:10px;align-items:center}
.esquema-texto summary::-webkit-details-marker{display:none}
.esquema-texto summary::before{content:"+";font-size:16px;width:14px}
.esquema-texto[open] summary::before{content:"–"}
.esquema-texto ol{margin:0 0 12px;padding-left:1.3em;display:grid;gap:10px;color:var(--tinta-2);max-width:80ch}
.esquema-texto ol strong{color:var(--tinta)}
.sin-js .esquema{display:none}

/* el SVG del esquema */
.esq .nodo{cursor:pointer;outline:none}
.esq .nodo rect.caja{fill:var(--bg);stroke:var(--linea-3);stroke-width:1;transition:fill .35s var(--salida),stroke .35s}
.esq .nodo .t1{fill:var(--tinta);font-family:var(--f-display);font-weight:800;letter-spacing:-.02em}
.esq .nodo .t2{fill:var(--tinta-2);font-family:var(--f-mono);font-weight:600;letter-spacing:.1em;text-transform:uppercase}
.esq .nodo .iso{color:var(--tinta)}
.esq .nodo.nucleo rect.caja{stroke:var(--tinta);stroke-width:1.4}
.esq .chip rect{fill:var(--bg-2);stroke:var(--linea-3);transition:fill .3s,stroke .3s}
.esq .chip text{fill:var(--tinta);font-family:var(--f-mono);font-weight:600;text-transform:uppercase;letter-spacing:.06em}
.esq .nodo:hover rect.caja,.esq .nodo:focus-visible rect.caja,.esq .nodo.activo rect.caja{fill:var(--tinta);stroke:var(--tinta)}
.esq .nodo:hover .t1,.esq .nodo:focus-visible .t1,.esq .nodo.activo .t1,
.esq .nodo:hover .t2,.esq .nodo:focus-visible .t2,.esq .nodo.activo .t2{fill:var(--bg)}
.esq .nodo:hover .iso,.esq .nodo:focus-visible .iso,.esq .nodo.activo .iso{color:var(--bg)}
.esq .nodo.activo .chip rect,.esq .nodo:hover .chip rect{fill:var(--tinta);stroke:var(--bg)}
.esq .nodo.activo .chip text,.esq .nodo:hover .chip text{fill:var(--bg)}
.esq .chip.activo rect,.esq .chip:hover rect,.esq .chip:focus-visible rect{fill:var(--bg)!important;stroke:var(--bg)!important}
.esq .chip.activo text,.esq .chip:hover text,.esq .chip:focus-visible text{fill:var(--tinta)!important}
.esq .nodo:focus-visible rect.caja{stroke-width:3}
.esq .hilo{fill:none;stroke:var(--linea-3);stroke-width:1.2;transition:stroke .35s,opacity .35s,stroke-width .35s}
.esq .hilo.dueno{stroke-dasharray:3 5;stroke:var(--linea-3)}
.esq .hilo.salida{stroke:var(--tinta-3)}
.esq .paquete{fill:var(--tinta);transition:opacity .35s}
.esq .rotulo rect{fill:var(--bg);stroke:var(--linea-2)}
.esq .rotulo text{fill:var(--tinta-2);font-family:var(--f-mono);font-weight:600;text-transform:uppercase;letter-spacing:.08em}
.esq .mercado rect.caja{fill:var(--bg-2)}
.esq .flecha-punta{fill:var(--tinta-3)}
/* foco: lo que no tiene que ver con la pieza elegida se apaga */
.esq[data-sel] .hilo,.esq[data-sel] .paquete,.esq[data-sel] .rotulo{opacity:.18}
.esq[data-sel] .rel{opacity:1}
.esq[data-sel] .hilo.rel{stroke:var(--tinta);stroke-width:1.8}
/* trazado al entrar: las líneas se dibujan una vez */
.esq .hilo{stroke-dashoffset:0}
.esq.por-dibujar .hilo:not(.dueno){stroke-dasharray:1200;stroke-dashoffset:1200}
.esq.dibujada .hilo:not(.dueno){stroke-dasharray:1200;stroke-dashoffset:0;transition:stroke-dashoffset 1.6s var(--curva),stroke .35s,opacity .35s}
.esq.dibujada.hecho .hilo:not(.dueno){stroke-dasharray:none}
@media (prefers-reduced-motion:reduce){
  .esq .paquete{display:none}
  .esq.por-dibujar .hilo:not(.dueno){stroke-dasharray:none;stroke-dashoffset:0}
}

/* [03] empresas */
.empresas{display:grid;gap:clamp(20px,3vw,32px)}
.empresa{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1.15fr);border:1px solid var(--linea-2);border-radius:6px;overflow:hidden;background:var(--bg);--lui-tono:var(--tinta);--lui-radio:520px}
.empresa:nth-child(even){grid-template-columns:minmax(0,1.15fr) minmax(0,1fr)}
.empresa:nth-child(even) .empresa-texto{order:2}
.empresa-texto{padding:clamp(28px,4vw,56px);display:flex;flex-direction:column;gap:22px}
.empresa-texto .etiqueta{color:var(--tinta-3)}
.empresa h3{font-size:clamp(30px,3.4vw,50px)}
.empresa .lede{font-size:clamp(19px,1.6vw,23px);line-height:1.4;color:var(--tinta);max-width:30ch}
.empresa dl{margin:0;display:grid;gap:18px}
.empresa dt{font:600 12px var(--f-mono);letter-spacing:.12em;text-transform:uppercase;color:var(--tinta-3);margin-bottom:8px}
.empresa dd{margin:0;color:var(--tinta-2);font-size:16px}
.empresa dd ul{list-style:none;padding:0;margin:0;display:grid;gap:0;border-top:1px solid var(--linea)}
.empresa dd li{padding:9px 0;border-bottom:1px solid var(--linea);color:var(--tinta)}
.empresa .enlace-flecha{align-self:flex-start;margin-top:auto}
.empresa-vista{position:relative;background:var(--bg-2);display:grid;place-items:center;padding:clamp(20px,3.4vw,52px);border-left:1px solid var(--linea-2);overflow:hidden}
.empresa:nth-child(even) .empresa-vista{border-left:0;border-right:1px solid var(--linea-2)}
.navegador{width:100%;border:1px solid var(--linea-3);border-radius:8px;overflow:hidden;background:#000;box-shadow:var(--sombra);
  transform:perspective(1600px) rotateY(var(--giro,-7deg)) rotateX(3deg);transition:transform .9s var(--salida)}
.empresa:nth-child(even) .navegador{--giro:7deg}
.empresa:hover .navegador{transform:perspective(1600px) rotateY(0) rotateX(0)}
.navegador .barra{display:flex;align-items:center;gap:6px;height:30px;padding:0 12px;background:#111;border-bottom:1px solid #262626}
.navegador .barra i{width:8px;height:8px;border-radius:50%;background:#3a3a3a}
.navegador .barra span{margin-left:10px;font:400 11px var(--f-mono);color:#9a9a97;letter-spacing:.02em}
.navegador img{width:100%;aspect-ratio:16/10;object-fit:cover;object-position:top}
.empresa-vista .nota{position:absolute;right:14px;bottom:10px;font:600 10.5px var(--f-mono);letter-spacing:.12em;text-transform:uppercase;color:var(--tinta-3)}
@media (max-width:900px){
  .empresa,.empresa:nth-child(even){grid-template-columns:1fr}
  .empresa:nth-child(even) .empresa-texto{order:0}
  .empresa-vista,.empresa:nth-child(even) .empresa-vista{border:0;border-top:1px solid var(--linea-2)}
  .navegador,.empresa:nth-child(even) .navegador{--giro:0deg}
}
@media (prefers-reduced-motion:reduce){.navegador{transition:none}}

/* [04] juntas — sección invertida + pila 3D que se abre con el scroll */
.juntas{display:grid;grid-template-columns:minmax(0,1.05fr) minmax(0,1fr);gap:clamp(32px,6vw,96px);align-items:center}
.capas{position:relative;height:clamp(380px,46vw,560px);perspective:1800px;display:grid;place-items:center;view-timeline-name:--capas}
.pila{position:relative;width:min(350px,66%);aspect-ratio:1;transform-style:preserve-3d;transform:rotateX(58deg) rotateZ(-40deg)}
.capa{position:absolute;inset:0;transform-style:preserve-3d;transform:translateZ(var(--z-abierta))}
.losa{position:absolute;border:1px solid var(--tinta);background:color-mix(in srgb,var(--bg) 94%,transparent);
  background-image:linear-gradient(var(--linea-2) 1px,transparent 1px),linear-gradient(90deg,var(--linea-2) 1px,transparent 1px);
  background-size:24px 24px;display:flex;align-items:flex-end;padding:14px;
  box-shadow:0 0 0 1px color-mix(in srgb,var(--tinta) 8%,transparent),18px 18px 0 -1px color-mix(in srgb,var(--tinta) 6%,transparent)}
.losa span{font:800 13px/1.1 var(--f-display);letter-spacing:-.025em}
.losa small{display:block;font:600 9.5px var(--f-mono);letter-spacing:.12em;text-transform:uppercase;color:var(--tinta-2);margin-top:4px}
.capa-1 .losa{inset:0;background-color:var(--tinta);color:var(--bg);background-image:linear-gradient(color-mix(in srgb,var(--bg) 18%,transparent) 1px,transparent 1px),linear-gradient(90deg,color-mix(in srgb,var(--bg) 18%,transparent) 1px,transparent 1px)}
.capa-1 .losa small{color:color-mix(in srgb,var(--bg) 70%,transparent)}
.capa-2 .losa.a{inset:0 67.3% 0 0}
.capa-2 .losa.b{inset:0 33.6% 0 33.6%}
.capa-2 .losa.c{inset:0 0 0 67.3%}
.capa-3 .losa{inset:12%;border-style:dashed;background-image:none}
.capa-1{--z-abierta:0px}
.capa-2{--z-abierta:130px}
.capa-3{--z-abierta:260px}
@supports (animation-timeline:view()){
  @media (prefers-reduced-motion:no-preference){
    .capa{animation:abrir linear both;animation-timeline:--capas;animation-range:entry 20% cover 55%}
    .capa-1{animation-name:none}
  }
}
@keyframes abrir{from{transform:translateZ(calc(var(--z-abierta) * .12))}to{transform:translateZ(var(--z-abierta))}}
.capas .leyenda{position:absolute;left:0;bottom:0;font:600 11.5px var(--f-mono);letter-spacing:.12em;text-transform:uppercase;color:var(--tinta-3)}
.ventajas{list-style:none;margin:0;padding:0;counter-reset:v;border-top:1px solid var(--linea-2)}
.ventajas li{display:grid;grid-template-columns:56px 1fr;gap:6px 16px;padding:26px 0;border-bottom:1px solid var(--linea-2);counter-increment:v}
.ventajas li::before{content:"0" counter(v);grid-row:span 2;font:800 13px var(--f-mono);letter-spacing:.06em;color:var(--tinta-3);padding-top:.5em}
.ventajas h3{font-size:clamp(22px,2vw,28px);letter-spacing:-.015em}
.ventajas p{color:var(--tinta-2);font-size:16px;max-width:52ch}
@media (max-width:900px){.juntas{grid-template-columns:1fr}.capas{height:clamp(360px,90vw,480px)}}

/* [05] visión */
.vision{display:grid;grid-template-columns:minmax(0,1.3fr) minmax(0,1fr);gap:clamp(32px,6vw,96px);align-items:end}
.vision blockquote{margin:0;font:800 clamp(34px,5vw,80px)/1.02 var(--f-display);letter-spacing:-.045em;text-wrap:balance}
.vision blockquote .tenue{font-weight:500}
.valores{display:grid;grid-template-columns:repeat(2,1fr);border-top:1px solid var(--linea-2);margin-top:clamp(48px,6vw,80px);grid-column:1 / -1}
.valores div{padding:28px 28px 28px 0;border-bottom:1px solid var(--linea-2)}
.valores div:nth-child(even){padding-left:28px;border-left:1px solid var(--linea-2)}
.valores h3{font-size:clamp(22px,2vw,28px);margin-bottom:10px;letter-spacing:-.015em}
.valores p{color:var(--tinta-2);font-size:16px;max-width:46ch}
.vision figure{margin:0;border-radius:4px;overflow:hidden;aspect-ratio:3/4;max-height:560px;background:var(--bg-2)}
.vision figure img{width:100%;height:100%;object-fit:cover}
@supports (animation-timeline:view()){
  @media (prefers-reduced-motion:no-preference){
    .vision figure img{animation:paralaje linear both;animation-timeline:view();scale:1.12}
  }
}
@keyframes paralaje{from{translate:0 -6%}to{translate:0 6%}}
@media (max-width:760px){
  .vision{grid-template-columns:1fr}
  .vision figure{aspect-ratio:16/11}
  .valores{grid-template-columns:1fr}
  .valores div,.valores div:nth-child(even){padding:22px 0;border-left:0}
}

/* [06] contacto */
.contacto{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1fr);gap:clamp(32px,6vw,96px)}
.contacto .correo{display:inline-block;font:800 clamp(26px,3.4vw,52px)/1.05 var(--f-display);letter-spacing:-.025em;text-decoration:none;border-bottom:2px solid var(--tinta);padding-bottom:6px;word-break:break-word}
.contacto .correo:hover{border-bottom-color:var(--linea-3)}
.directo{margin-top:40px;border-top:1px solid var(--linea-2)}
.directo a{display:grid;grid-template-columns:1fr auto;gap:4px 16px;padding:18px 0;border-bottom:1px solid var(--linea-2);text-decoration:none;align-items:center}
.directo a strong{font:800 20px var(--f-display);letter-spacing:-.025em}
.directo a span{grid-column:1;font:400 13px var(--f-mono);color:var(--tinta-3);letter-spacing:.03em}
.directo a svg{grid-row:1 / span 2;grid-column:2;width:18px;height:18px;transition:transform .3s var(--salida)}
.directo a:hover svg{transform:translate(3px,-3px)}
.formulario{display:grid;gap:18px;align-content:start}
.formulario[hidden]{display:none}
.campo{display:grid;gap:8px}
.campo label{font:600 12px var(--f-mono);letter-spacing:.12em;text-transform:uppercase;color:var(--tinta-2)}
.campo input,.campo textarea{font:400 17px/1.4 var(--f-texto);color:var(--tinta);background:transparent;border:0;border-bottom:1px solid var(--linea-3);padding:10px 0;border-radius:0;transition:border-color .2s}
.campo input:focus,.campo textarea:focus{outline:none;border-bottom-color:var(--tinta);box-shadow:0 1px 0 var(--tinta)}
.campo textarea{min-height:120px;resize:vertical}
.trampa{position:absolute;left:-9999px}
.consiente{display:flex;gap:12px;align-items:flex-start;font-size:14px;color:var(--tinta-2)}
.consiente input{width:18px;height:18px;margin-top:2px;accent-color:var(--tinta)}
.formulario .estado{font:400 14px var(--f-mono);min-height:1.4em}
.sin-form{padding:24px;border:1px dashed var(--linea-3);border-radius:6px;color:var(--tinta-2);font-size:15px;align-self:start}
.sin-form strong{color:var(--tinta)}
@media (max-width:860px){.contacto{grid-template-columns:1fr}}

/* ---------- pie ---------- */
.pie{background:var(--bg);color:var(--tinta);padding:clamp(64px,8vw,112px) 0 32px;border-top:1px solid var(--linea)}
.pie-arriba{display:grid;grid-template-columns:minmax(0,1.2fr) repeat(4,minmax(0,1fr));gap:32px}
.pie .logo-pie{width:150px;color:var(--tinta)}
.pie .pie-h{margin:0 0 12px;font:600 12px var(--f-mono);letter-spacing:.12em;text-transform:uppercase;color:var(--tinta-3)}
.pie p,.pie li{font-size:14.5px;color:var(--tinta-2);line-height:1.6}
.pie ul{list-style:none;margin:0;padding:0}
.pie a{text-decoration:none;display:inline-block;padding:5px 0}
.pie a:hover{text-decoration:underline}
.pie-abajo{display:flex;flex-wrap:wrap;justify-content:space-between;gap:16px;margin-top:64px;padding-top:24px;border-top:1px solid var(--linea);font:400 12.5px var(--f-mono);color:var(--tinta-3);letter-spacing:.03em}
.pie-abajo nav{display:flex;gap:20px;flex-wrap:wrap}
.pie-gigante{margin-top:56px;color:var(--tinta);opacity:1}
.pie-gigante svg{width:100%;height:auto}
@media (max-width:900px){.pie-arriba{grid-template-columns:1fr 1fr}}
@media (max-width:560px){.pie-arriba{grid-template-columns:1fr}}

/* ---------- páginas legales ---------- */
.legal{padding:clamp(56px,8vw,112px) 0}
.legal .envoltura{max-width:760px}
.legal h1{font-size:clamp(40px,6vw,72px);margin:16px 0 32px}
.legal h2{font-size:24px;margin:44px 0 12px;letter-spacing:-.015em}
.legal p,.legal li{color:var(--tinta-2);margin:0 0 14px}
.legal table{width:100%;border-collapse:collapse;font-size:15px;margin:8px 0 18px}
.legal td,.legal th{border-bottom:1px solid var(--linea-2);padding:10px 8px 10px 0;text-align:left;vertical-align:top}
.legal th{font:600 12px var(--f-mono);letter-spacing:.12em;text-transform:uppercase;color:var(--tinta-3)}
.pendiente{background:var(--bg-3);border:1px dashed var(--linea-3);padding:1px 6px;border-radius:3px;font:500 13px var(--f-mono)}

/* contenido fuera de pantalla: no se pinta hasta acercarse */
.seccion.diferida{content-visibility:auto;contain-intrinsic-size:auto 1200px}

/* ---------- logos oficiales (la única excepción al monocromo) ----------
   Cada marca con su variante de día o de noche; los que sólo existen con
   letra oscura van sobre una placa clara en modo oscuro. */
.v-noche{display:none}
html[data-tema="oscuro"] .v-dia{display:none}
html[data-tema="oscuro"] .v-noche{display:block}
@media (prefers-color-scheme:dark){html:not([data-tema]) .v-dia{display:none}html:not([data-tema]) .v-noche{display:block}}
.logo-of{display:inline-flex;align-items:center;align-self:flex-start}
.logo-of img{height:100%;width:auto}
.logo-hosteate{height:54px}
.logo-ancho{height:52px}
.logo-prod{height:40px}
.empresa .logo-of.placa{padding:10px 14px;border-radius:8px;background:transparent;transition:background .3s}
html[data-tema="oscuro"] .logo-of.placa{background:#f3f3f2}
.empresa .logo-of.logo-ancho.placa{height:72px}
.empresa .logo-of.logo-prod.placa{height:56px;padding:8px 12px}
.empresa .logo-of.logo-prod:not(.placa){height:56px;padding:8px 0}
.productos{display:grid;grid-template-columns:1fr 1fr;gap:0;border-top:1px solid var(--linea)}
.producto{display:flex;flex-direction:column;gap:12px;padding:22px 22px 4px 0}
.producto + .producto{padding-left:22px;border-left:1px solid var(--linea)}
.producto h4{margin:0;font:800 20px/1.15 var(--f-display);letter-spacing:-.025em}
.producto p{color:var(--tinta-2);font-size:15px}
.producto .enlace-flecha{margin-top:auto;align-self:flex-start;font-size:14px}
@media (max-width:560px){.productos{grid-template-columns:1fr}.producto + .producto{padding-left:0;border-left:0;border-top:1px solid var(--linea)}}
.empresa-vista.doble{display:grid;gap:0;place-items:center}
.empresa-vista.doble .navegador{grid-area:1/1;width:86%}
.empresa-vista.doble .navegador:first-child{transform:perspective(1600px) rotateY(7deg) translate(-7%,-12%)}
.empresa-vista.doble .navegador:last-child{transform:perspective(1600px) rotateY(7deg) translate(7%,14%)}
.empresa:hover .empresa-vista.doble .navegador:first-child{transform:perspective(1600px) translate(-8%,-14%)}
.empresa:hover .empresa-vista.doble .navegador:last-child{transform:perspective(1600px) translate(8%,16%)}

/* esquema: perímetro del grupo, placas y logos */
.esq .perimetro{fill:none;stroke:var(--linea-3);stroke-dasharray:2 6;stroke-width:1.2}
.esq .perimetro-t{fill:var(--tinta-3);font-family:var(--f-mono);font-weight:600;text-transform:uppercase;letter-spacing:.14em}
.esq .placa{fill:transparent}
html[data-tema="oscuro"] .esq .placa{fill:#f3f3f2}
.esq .v-noche{display:none}
html[data-tema="oscuro"] .esq .v-dia{display:none}
html[data-tema="oscuro"] .esq .v-noche{display:inline}
.esq .hilo.rama{stroke:var(--tinta-3)}
.esq .hilo.cable{stroke-width:1}
/* los nodos con logo no se invierten al elegirlos (el logo tiene su color):
   se marcan con borde grueso y fondo gris */
.esq .nodo:not(.nucleo):not(.n-ravg):not(.mercado):hover rect.caja,
.esq .nodo:not(.nucleo):not(.n-ravg):not(.mercado).activo rect.caja,
.esq .nodo:not(.nucleo):not(.n-ravg):not(.mercado):focus-visible rect.caja{fill:var(--bg-2);stroke:var(--tinta);stroke-width:2.2}
.esq .nodo:not(.nucleo):not(.n-ravg):not(.mercado):hover .t2,
.esq .nodo:not(.nucleo):not(.n-ravg):not(.mercado).activo .t2{fill:var(--tinta)}
/* el núcleo sí se invierte: su símbolo es monocromo y cambia de variante */
.esq .nucleo:hover .v-dia,.esq .nucleo.activo .v-dia{display:none}
.esq .nucleo:hover .v-noche,.esq .nucleo.activo .v-noche{display:inline}
html[data-tema="oscuro"] .esq .nucleo:hover .v-noche,html[data-tema="oscuro"] .esq .nucleo.activo .v-noche{display:none}
html[data-tema="oscuro"] .esq .nucleo:hover .v-dia,html[data-tema="oscuro"] .esq .nucleo.activo .v-dia{display:inline}

.pie-gigante{margin-top:clamp(48px,7vw,96px);color:var(--tinta)}
.pie-gigante svg{width:100%;height:auto}
/* etiquetas: número + filete, sin corchetes */
.etiqueta b{display:inline-flex;align-items:center;gap:.7em}
.etiqueta b::after{content:"";width:22px;height:1px;background:currentColor;opacity:.6}
/* en claro, las torres blancas no deben pisar el titular: velo blanco más largo */
html[data-tema="claro"] .hero::after{background:linear-gradient(90deg,var(--bg) 0%,var(--bg) 26%,color-mix(in srgb,var(--bg) 75%,transparent) 46%,transparent 70%),linear-gradient(0deg,var(--bg) 0%,transparent 34%)}