/* =====================================================================
   Evolutia Motors Group — hoja de estilos del sitio
   Dirección: «Nocturno» (Propuesta C aprobada)
   Negro absoluto · tipografía ancha en versales · un solo acento: el hielo
   del brandbook (#A4E7FF) · mosaico de marcas a todo el ancho.
   Tipografías: sustitutos web de Mena Grotesk / Lufga hasta confirmar
   licencia webfont (ver README). Se cambian en --d y --m.
   ===================================================================== */

:root{
  --black:#000000;
  --s1:#07080B;
  --s2:#0D0F14;
  --s3:#14171E;
  --s4:#1B1F28;
  --navy:#000C54;
  --navy-2:#061A6E;
  --pachuca:#002F87;      /* azul del logotipo Pachuca × Evolutia */
  --pachuca-tint:#6E8FE0; /* el mismo azul, aclarado para leerse sobre negro */
  --white:#FFFFFF;
  --mute:rgba(255,255,255,.62);
  --mute2:rgba(255,255,255,.40);
  --line:rgba(255,255,255,.13);
  --line2:rgba(255,255,255,.28);
  --ice:#A4E7FF;
  --ice-soft:rgba(164,231,255,.12);
  --ok:#7BE3A8;
  --err:#FF8A8A;

  /* Color de identificación por marca (solo filetes y detalles).
     Landking oficial es #002752 (de su logotipo); sobre negro no se distingue,
     así que para filetes se usa un tinte claro de la misma familia. */
  --landking:#4B8DFF;
  --vgv:#9FB4D8;
  --bolden:#E0A458;
  --weheavy:#E2434F;
  --tractores:#8FD18B;
  --petronas:#12B8B2;
  --evolutia:#A4E7FF;
  --weichai:#E6392E;

  --d:'Archivo','Helvetica Neue',Arial,sans-serif;
  --m:'Martian Mono',ui-monospace,SFMono-Regular,Menlo,monospace;
  --maxw:1400px;
  --pad:40px;
  --ease:cubic-bezier(.22,.7,.3,1);
}
@media (max-width:820px){:root{--pad:22px}}

/* ---------- base ---------- */
*,*::before,*::after{box-sizing:border-box}
html{scroll-behavior:smooth; -webkit-text-size-adjust:100%}
body{margin:0; background:var(--black); color:var(--white); font-family:var(--d); font-stretch:100%; font-size:16px; line-height:1.6; -webkit-font-smoothing:antialiased; overflow-x:hidden}
h1,h2,h3,h4{margin:0; font-family:var(--d); font-stretch:125%; font-weight:800; line-height:.94; letter-spacing:-.025em; text-transform:uppercase; text-wrap:balance}
p{margin:0}
ul,ol,dl,dd{margin:0}
a{color:inherit; text-decoration:none}
img{display:block; max-width:100%; height:auto}
button{font:inherit; cursor:pointer; background:none; border:none; color:inherit; padding:0}
a[href],button{cursor:pointer}
:focus-visible{outline:2px solid var(--ice); outline-offset:4px}
[hidden]{display:none!important}
.sr-only{position:absolute; width:1px; height:1px; padding:0; margin:-1px; overflow:hidden; clip:rect(0,0,0,0); white-space:nowrap; border:0}
.skip{position:absolute; left:12px; top:-60px; z-index:200; background:var(--ice); color:#000; padding:10px 16px; font-family:var(--m); font-size:11px; letter-spacing:.12em; text-transform:uppercase}
.skip:focus{top:12px}
@media (prefers-reduced-motion:reduce){*,*::before,*::after{transition:none!important; animation:none!important; scroll-behavior:auto!important}}

.w{max-width:var(--maxw); margin:0 auto; padding:0 var(--pad)}
.mono{font-family:var(--m); font-stretch:100%}
.eb{display:inline-flex; align-items:center; gap:12px; font-family:var(--m); font-stretch:100%; font-size:10.5px; font-weight:500; letter-spacing:.18em; text-transform:uppercase; color:var(--ice)}
.eb::before{content:""; width:28px; height:1px; background:var(--ice); opacity:.7}
.lead{color:var(--mute); font-size:17px; line-height:1.72; max-width:58ch}
.lead + .lead{margin-top:20px}
.lead strong{color:var(--white); font-weight:600}
@media (max-width:820px){.lead{font-size:15.5px}}
.big{font-size:clamp(1.9rem,4.4vw,3.5rem); line-height:.98}
.mid{font-size:clamp(1.5rem,3vw,2.3rem); line-height:1}
.ic{color:var(--ice)}
.note{font-family:var(--m); font-stretch:100%; font-size:10px; letter-spacing:.1em; text-transform:uppercase; color:var(--mute2); line-height:1.9}

/* ---------- enlaces y botones ---------- */
.lk{display:inline-flex; align-items:center; gap:11px; font-family:var(--m); font-stretch:100%; font-size:11px; font-weight:500; letter-spacing:.15em; text-transform:uppercase; padding-bottom:7px; position:relative; min-height:44px}
.lk::after{content:""; position:absolute; left:0; right:0; bottom:6px; height:1px; background:var(--line2)}
.lk::before{content:""; position:absolute; left:0; right:100%; bottom:6px; height:1px; background:var(--ice); z-index:1; transition:right .45s var(--ease)}
.lk:hover::before,.lk:focus-visible::before{right:0}
.lk:hover{color:var(--ice)}
.lk svg{flex:none; transition:transform .35s var(--ease)}
.lk:hover svg{transform:translateX(5px)}

.bt{display:inline-flex; align-items:center; justify-content:center; gap:10px; min-height:52px; padding:15px 30px; font-family:var(--m); font-stretch:100%; font-size:11px; font-weight:500; letter-spacing:.16em; text-transform:uppercase; border:1px solid var(--white); color:var(--black); background:var(--white); transition:background .25s, color .25s, border-color .25s}
.bt:hover{background:var(--ice); border-color:var(--ice)}
.bt-g{background:transparent; color:var(--white); border-color:var(--line2)}
.bt-g:hover{background:transparent; color:var(--ice); border-color:var(--ice)}
.bt-s{min-height:40px; padding:10px 18px; font-size:10px}
.bt[disabled]{opacity:.55; cursor:progress}
.acts{display:flex; gap:14px; flex-wrap:wrap}

/* ---------- barra de utilidad ---------- */
.util{border-bottom:1px solid var(--line); background:var(--black)}
.util-in{max-width:var(--maxw); margin:0 auto; padding:9px var(--pad); display:flex; gap:22px; align-items:center; font-family:var(--m); font-stretch:100%; font-size:10px; letter-spacing:.16em; text-transform:uppercase; color:var(--mute2)}
.util-in a{min-height:24px; display:inline-flex; align-items:center}
.util-in a:hover{color:var(--ice)}
.util-in .sep{opacity:.4}
.hp{position:absolute; left:-10000px; width:1px; height:1px; overflow:hidden}
/* Botón de regreso al inicio, siempre visible arriba (pedido del cliente) */
.util-in .u-home{gap:8px; padding:3px 11px; border:1px solid var(--line2); color:var(--white); flex:none; transition:border-color .2s, color .2s}
.util-in .u-home:hover{border-color:var(--ice); color:var(--ice)}
.util-in .u-home[aria-current="page"]{border-color:var(--ice); color:var(--ice)}
.util-in .rt{margin-left:auto; display:flex; gap:22px}
@media (max-width:999px){.util-in .hide-s{display:none}}
@media (min-width:761px){.util-in > *,.util-in .rt > *{white-space:nowrap}}
@media (max-width:1360px){.util-in .rt{display:none}}

/* ---------- header ---------- */
.hdr{position:sticky; top:0; z-index:70; background:rgba(0,0,0,.86); backdrop-filter:blur(16px); -webkit-backdrop-filter:blur(16px); border-bottom:1px solid var(--line)}
.hdr-in{max-width:var(--maxw); margin:0 auto; padding:16px var(--pad); display:flex; align-items:center; gap:26px}
.hdr .brand img{height:26px; width:auto}
.hdr .rt{margin-left:auto; display:flex; align-items:center; gap:24px}
.hdr .tel{font-family:var(--m); font-stretch:100%; font-size:12px; font-weight:500; letter-spacing:.08em}
.hdr .tel:hover{color:var(--ice)}
.menu-btn{display:flex; align-items:center; gap:12px; font-family:var(--m); font-stretch:100%; font-size:11px; font-weight:500; letter-spacing:.18em; text-transform:uppercase; min-height:44px; padding:0 2px}
.menu-btn .bars{display:flex; flex-direction:column; gap:4px; width:22px}
.menu-btn .bars i{display:block; height:1.5px; background:var(--white); transition:width .3s, background .3s}
.menu-btn .bars i:nth-child(2){width:14px; margin-left:auto}
.menu-btn:hover{color:var(--ice)}
.menu-btn:hover .bars i{background:var(--ice); width:22px}
@media (max-width:860px){.hdr .tel{display:none}}
@media (max-width:520px){.hdr .cta-h{display:none}}

/* ---------- menú a pantalla completa ---------- */
.ovl{position:fixed; inset:0; z-index:90; background:var(--black); display:grid; grid-template-rows:auto 1fr auto; opacity:0; visibility:hidden; transition:opacity .38s ease, visibility .38s}
.ovl.on{opacity:1; visibility:visible}
.ovl-top{display:flex; align-items:center; padding:16px var(--pad); border-bottom:1px solid var(--line); max-width:var(--maxw); margin:0 auto; width:100%}
.ovl-top img{height:26px; width:auto}
.ovl-top button{margin-left:auto; font-family:var(--m); font-stretch:100%; font-size:11px; letter-spacing:.18em; text-transform:uppercase; min-height:44px}
.ovl-top button:hover{color:var(--ice)}
.ovl-mid{max-width:var(--maxw); margin:0 auto; width:100%; padding:30px var(--pad); display:grid; grid-template-columns:1.55fr 1fr; gap:44px; align-content:center; overflow-y:auto}
.ovl-nav{display:flex; flex-direction:column}
.ovl-nav a{display:flex; align-items:baseline; gap:20px; padding:12px 0; border-bottom:1px solid var(--line); font-family:var(--d); font-stretch:125%; font-weight:800; font-size:clamp(1.6rem,3.8vw,2.9rem); line-height:.95; letter-spacing:-.03em; text-transform:uppercase; color:var(--white); transition:color .25s, padding-left .35s var(--ease)}
.ovl-nav a:hover,.ovl-nav a[aria-current="page"]{color:var(--ice); padding-left:16px}
.ovl-nav a small{margin-left:auto; padding-left:16px; font-family:var(--m); font-stretch:100%; font-size:11px; font-weight:500; letter-spacing:.2em; color:var(--mute2); transition:color .25s}
.ovl-nav a:hover small,.ovl-nav a[aria-current="page"] small{color:var(--ice)}
.ovl-nav a em{font-style:normal; font-family:var(--m); font-stretch:100%; font-size:11px; font-weight:400; letter-spacing:.14em; color:var(--mute2)}
.ovl-side{display:flex; flex-direction:column; gap:24px; align-self:center}
.ovl-side h5{font-family:var(--m); font-stretch:100%; font-size:10px; font-weight:500; letter-spacing:.18em; color:var(--ice); text-transform:uppercase; margin:0 0 9px}
.ovl-side p{font-size:15px; color:var(--mute); line-height:1.65}
@media (max-width:900px){.ovl-mid{grid-template-columns:1fr; gap:26px; align-content:start} .ovl-side{align-self:start}}
/* En teléfono la marca de cada línea baja bajo el nombre y el tamaño se ajusta al ancho */
@media (max-width:600px){
  .ovl-nav a{flex-wrap:wrap; column-gap:14px; row-gap:6px; font-size:clamp(1.1rem,5.6vw,1.6rem)}
  .ovl-nav a em{width:22px; flex:none}
  .ovl-nav a small{flex-basis:100%; margin-left:36px; padding-left:0; font-size:10px}
}

/* ---------- hero de inicio ---------- */
.hero{position:relative; min-height:80vh; display:flex; flex-direction:column; justify-content:flex-end; overflow:hidden; border-bottom:1px solid var(--line)}
.hero-bg{position:absolute; inset:0; z-index:0}
.hero-bg img{width:100%; height:100%; object-fit:cover; object-position:44% 50%; filter:contrast(1.06) saturate(.82) brightness(.86)}
.hero-bg::after{content:""; position:absolute; inset:0; background:linear-gradient(180deg,rgba(0,0,0,.86) 0%,rgba(0,0,0,.30) 34%,rgba(0,0,0,.55) 66%,#000 100%),linear-gradient(90deg,#000 2%,rgba(0,0,0,.72) 30%,rgba(0,0,0,.05) 68%)}
.hero-in{position:relative; z-index:1; max-width:var(--maxw); margin:0 auto; width:100%; padding:104px var(--pad) 40px}
.hero h1{font-size:clamp(3rem,8vw,7.2rem); max-width:14ch; margin-top:26px}
.hero .lead{margin-top:26px}
.hero .acts{margin-top:36px}
.hero-ft{position:relative; z-index:1; border-top:1px solid var(--line); overflow:hidden}
@media (max-width:820px){.hero{min-height:0} .hero-in{padding:64px var(--pad) 34px}}

/* ---------- hero de página interior ---------- */
.phero{position:relative; overflow:hidden; border-bottom:1px solid var(--line); background:var(--black)}
.phero-bg{position:absolute; inset:0; z-index:0}
.phero-bg img{width:100%; height:100%; object-fit:cover; filter:brightness(.62) saturate(.85) contrast(1.05)}
.phero-bg::after{content:""; position:absolute; inset:0; background:linear-gradient(90deg,#000 6%,rgba(0,0,0,.78) 40%,rgba(0,0,0,.25) 100%),linear-gradient(180deg,rgba(0,0,0,.2),#000 100%)}
.phero.trama .phero-bg{background-color:var(--navy); background-image:radial-gradient(rgba(164,231,255,.18) 1px,transparent 1.5px); background-size:16px 16px}
.phero.trama .phero-bg::after{background:linear-gradient(90deg,rgba(0,0,0,.92) 10%,rgba(0,0,0,.35) 100%),linear-gradient(180deg,rgba(0,0,0,0) 40%,#000 100%)}
.phero-in{position:relative; z-index:1; max-width:var(--maxw); margin:0 auto; padding:84px var(--pad) 64px}
.phero h1{font-size:clamp(2.4rem,6vw,5.2rem); max-width:16ch; margin-top:22px}
.phero .lead{margin-top:24px}
.phero .acts{margin-top:32px}
.crumbs{display:flex; gap:10px; flex-wrap:wrap; font-family:var(--m); font-stretch:100%; font-size:10px; letter-spacing:.14em; text-transform:uppercase; color:var(--mute2); margin-bottom:28px}
.crumbs a:hover{color:var(--ice)}
.crumbs span[aria-hidden]{opacity:.5}
@media (max-width:820px){.phero-in{padding:52px var(--pad) 44px}}

/* sub-navegación de página */
.subnav{position:sticky; top:59px; z-index:60; background:rgba(0,0,0,.9); backdrop-filter:blur(14px); -webkit-backdrop-filter:blur(14px); border-bottom:1px solid var(--line)}
.subnav-in{max-width:var(--maxw); margin:0 auto; padding:0 var(--pad); display:flex; gap:30px; overflow-x:auto; scrollbar-width:none}
.subnav-in::-webkit-scrollbar{display:none}
.subnav a{flex:none; display:flex; align-items:center; gap:10px; min-height:52px; font-family:var(--m); font-stretch:100%; font-size:10.5px; font-weight:500; letter-spacing:.15em; text-transform:uppercase; color:var(--mute); border-bottom:1px solid transparent; transition:color .2s, border-color .2s}
.subnav a i{width:6px; height:6px; background:var(--bc,var(--ice)); transform:rotate(45deg)}
.subnav a:hover,.subnav a.on{color:var(--white); border-bottom-color:var(--ice)}

/* ---------- marquesina ---------- */
.mq{display:flex; overflow:hidden; user-select:none; padding:14px 0}
.mq ul{display:flex; align-items:center; list-style:none; margin:0; padding:0; flex:none; min-width:100%; animation:slide 40s linear infinite}
.mq li{display:flex; align-items:center; gap:16px; padding:0 26px; font-family:var(--m); font-stretch:100%; font-size:11px; font-weight:500; letter-spacing:.2em; text-transform:uppercase; color:var(--mute); white-space:nowrap}
.mq li i{display:block; width:5px; height:5px; background:var(--bc,var(--ice)); transform:rotate(45deg); flex:none}
.mq:hover ul{animation-play-state:paused}
@keyframes slide{from{transform:translateX(0)} to{transform:translateX(-100%)}}

/* ---------- secciones ---------- */
.sec{border-bottom:1px solid var(--line); padding:104px 0}
.sec.tight{padding:72px 0}
.sec.flush{padding-bottom:0}
@media (max-width:820px){.sec{padding:64px 0} .sec.tight{padding:48px 0}}
.two{display:grid; grid-template-columns:minmax(0,.72fr) minmax(0,1fr); gap:56px; align-items:start}
.two.even{grid-template-columns:minmax(0,1fr) minmax(0,1fr)}
@media (max-width:900px){.two,.two.even{grid-template-columns:minmax(0,1fr); gap:26px}}
.sec-h{margin-bottom:48px}

/* cifras */
.stats{display:grid; grid-template-columns:repeat(4,1fr); border-top:1px solid var(--line); margin-top:56px}
.stats > div{padding:34px 26px 30px; border-right:1px solid var(--line)}
.stats > div:first-child{padding-left:0}
.stats > div:last-child{border-right:none}
.stats b{display:block; font-family:var(--d); font-stretch:125%; font-weight:800; font-size:clamp(2.4rem,5.2vw,4.2rem); line-height:.9; letter-spacing:-.05em; font-variant-numeric:tabular-nums; white-space:nowrap}
.stats b small{font-size:.42em; letter-spacing:-.01em; margin-left:.12em}
.stats span{display:block; margin-top:14px; font-family:var(--m); font-stretch:100%; font-size:10.5px; letter-spacing:.14em; text-transform:uppercase; color:var(--mute2); line-height:1.6}
@media (max-width:980px){.stats{grid-template-columns:1fr 1fr} .stats > div:nth-child(2){border-right:none} .stats > div:nth-child(-n+2){border-bottom:1px solid var(--line)} .stats > div:nth-child(3){padding-left:0}}
@media (max-width:560px){.stats{grid-template-columns:1fr} .stats > div{padding:22px 0; border-right:none; border-bottom:1px solid var(--line)} .stats > div:last-child{border-bottom:none}}

/* ---------- mosaico (referencia Grupo Roldán) ---------- */
.mosaic{display:grid; grid-template-columns:repeat(4,1fr); gap:1px; background:rgba(255,255,255,.14); border-top:1px solid var(--line); border-bottom:1px solid var(--line)}
.mosaic.c3{grid-template-columns:repeat(3,1fr)}
.tile{position:relative; overflow:hidden; height:clamp(260px,24vw,390px); display:flex; align-items:center; justify-content:center; text-align:center; padding:24px; background:var(--tbg,var(--s2))}
.mosaic.c3 .tile{height:clamp(300px,30vw,460px)}
.tile.trama{background-color:var(--tbg,var(--s2)); background-image:radial-gradient(rgba(164,231,255,.14) 1px,transparent 1.5px); background-size:14px 14px}
.tile .tbg{position:absolute; inset:0; width:100%; height:100%; object-fit:cover; z-index:0; transform:scale(1.02); filter:brightness(.70) contrast(1.05) saturate(.88); transition:transform .9s var(--ease), filter .5s}
.tile:hover .tbg,.tile:focus-visible .tbg{transform:scale(1.09); filter:brightness(.86) contrast(1.05) saturate(1)}
.tile::before{content:""; position:absolute; inset:0; z-index:1; background:linear-gradient(180deg,rgba(0,0,0,.26) 0%,rgba(0,0,0,.12) 42%,rgba(0,0,0,.62) 100%); transition:background .45s}
.tile:hover::before{background:linear-gradient(180deg,rgba(0,0,0,.18) 0%,rgba(0,0,0,.06) 42%,rgba(0,0,0,.55) 100%)}
.tile .tin{position:relative; z-index:2; display:flex; flex-direction:column; align-items:center; gap:13px}
.tile .tdiv{font-family:var(--m); font-stretch:100%; font-size:9px; letter-spacing:.2em; text-transform:uppercase; color:rgba(255,255,255,.55)}
.tile .twm{font-family:var(--d); font-stretch:125%; font-weight:800; font-size:clamp(1.3rem,2.4vw,2rem); line-height:.94; letter-spacing:-.02em; text-transform:uppercase; color:#fff}
.mosaic.c3 .twm{font-size:clamp(1.6rem,3vw,2.6rem)}
.tile .tlogo{width:min(76%,205px); height:auto}
.tile .tlogo.stack{width:auto; height:clamp(46px,20cqi,104px)}
/* PETRONAS (manual, p. 9-13): versión vertical para fondo oscuro, con el margen de
   seguridad de 2x ya incluido en el PNG (el logo ocupa el 65.6% del ancho).
   Mínimo digital 85 px de logo = 130 px de imagen. Sin filtros ni transparencias. */
.tile.t-pet{padding:6px}
.tile .tlogo.pet{width:clamp(134px,56cqi,240px); height:auto}
/* Mosaico de tres líneas (Perfil: alianzas estratégicas): logotipos más grandes */
.mosaic.c4 .tile{height:clamp(300px,26vw,420px)}
.mosaic.c4 .twm{font-size:clamp(1.5rem,2.6vw,2.4rem)}
.mosaic:is(.c3,.c4) .tlogo.stack{height:clamp(64px,24cqi,128px)}
.mosaic:is(.c3,.c4) .tlogo:not(.stack):not(.pet){width:min(72%,270px)}
.mosaic:is(.c3,.c4) .tile .tdiv,.mosaic:is(.c3,.c4) .tile .tkd{font-size:10px; max-width:38ch}
.tile .tkd{font-family:var(--m); font-stretch:100%; font-size:9px; font-weight:500; letter-spacing:.2em; text-transform:uppercase; color:rgba(255,255,255,.76); line-height:1.7; max-width:28ch}
.tile .trule{width:38px; height:2px; background:var(--bc,var(--ice)); transition:width .45s var(--ease)}
.tile:hover .trule{width:84px}
.tile .tgo{position:absolute; left:0; right:0; bottom:0; z-index:3; padding:13px 14px; font-family:var(--m); font-stretch:100%; font-size:9.5px; font-weight:500; letter-spacing:.18em; text-transform:uppercase; color:#000; background:var(--ice); transform:translateY(101%); transition:transform .42s var(--ease)}
.tile:hover .tgo,.tile:focus-visible .tgo{transform:none}
@media (max-width:1100px){.mosaic{grid-template-columns:repeat(3,1fr)} .tile{height:clamp(230px,30vw,320px)}}
@media (max-width:1100px){.mosaic.c4{grid-template-columns:repeat(2,1fr)} .mosaic.c4 .tile{height:clamp(300px,40vw,400px)}}
@media (max-width:1100px){.mosaic.c3{grid-template-columns:repeat(2,1fr)} .mosaic.c3 .tile{height:clamp(280px,34vw,380px)}}
@media (max-width:700px){.mosaic.c3{grid-template-columns:1fr} .mosaic.c3 .tile{height:300px} .mosaic.c3 .tlogo.pet{width:clamp(134px,50cqi,200px)}}
@media (max-width:600px){.mosaic.c4{grid-template-columns:1fr} .mosaic.c4 .tile{height:310px} .mosaic.c4 .tlogo.pet{width:clamp(134px,50cqi,200px)}}
@media (max-width:700px){.mosaic{grid-template-columns:repeat(2,1fr)} .tile{height:200px; padding:16px} .tile .tgo{display:none} .tile .tkd{font-size:8.5px}}

/* ---------- recorrido virtual (Matterport, se carga al hacer clic) ---------- */
.tour{margin:56px 0 0}
.tour-go{position:relative; display:block; width:100%; aspect-ratio:16/9; overflow:hidden; border:1px solid var(--line); background:var(--s2); cursor:pointer; padding:0}
.tour-go img{position:absolute; inset:0; width:100%; height:100%; object-fit:cover; filter:brightness(.45) saturate(.8); transition:transform .9s var(--ease), filter .5s}
.tour-go:hover img,.tour-go:focus-visible img{transform:scale(1.05); filter:brightness(.6) saturate(.95)}
.tour-tx{position:relative; z-index:1; height:100%; display:flex; flex-direction:column; align-items:center; justify-content:center; gap:16px; padding:24px; text-align:center}
.tour-h{font-family:var(--d); font-stretch:125%; font-weight:800; font-size:clamp(1.4rem,3.4vw,2.6rem); line-height:.98; letter-spacing:-.02em; text-transform:uppercase; color:#fff}
.tour-cta{display:inline-flex; align-items:center; gap:11px; min-height:52px; padding:15px 30px; font-family:var(--m); font-stretch:100%; font-size:11px; font-weight:500; letter-spacing:.16em; text-transform:uppercase; color:#000; background:var(--ice); transition:background .25s}
.tour-go:hover .tour-cta{background:#fff}
.tour iframe{display:block; width:100%; aspect-ratio:16/9; border:1px solid var(--line); background:#000}
.tour figcaption{margin-top:14px; font-family:var(--m); font-stretch:100%; font-size:10px; letter-spacing:.14em; text-transform:uppercase; color:var(--mute2); line-height:1.8}
.tour figcaption a{color:var(--ice); text-decoration:underline; text-underline-offset:3px}
@media (max-width:700px){.tour-go{aspect-ratio:4/3} .tour{margin-top:40px}}

/* ---------- visor de fotos (clic para ampliar) ---------- */
.prod .pim .zoom{cursor:zoom-in}
.prod .pim .pzoom{position:absolute; right:12px; bottom:12px; z-index:2; font-family:var(--m); font-stretch:100%; font-size:9px; font-weight:500; letter-spacing:.16em; text-transform:uppercase; color:#000; background:var(--ice); padding:5px 9px; opacity:0; transform:translateY(6px); transition:opacity .3s, transform .3s var(--ease); pointer-events:none}
.prod:hover .pim .pzoom,.prod:focus-within .pim .pzoom{opacity:1; transform:none}
.lb{position:fixed; inset:0; z-index:120; display:none; align-items:center; justify-content:center; padding:clamp(16px,4vw,54px); background:rgba(0,0,0,.93)}
.lb.on{display:flex}
.lb img{max-width:100%; max-height:100%; width:auto; height:auto; object-fit:contain; border:1px solid var(--line)}
.lb .lb-cap{position:absolute; left:0; right:0; bottom:14px; text-align:center; font-family:var(--m); font-stretch:100%; font-size:10px; letter-spacing:.16em; text-transform:uppercase; color:var(--mute); padding:0 16px}
.lb .lb-x{position:absolute; right:14px; top:14px; min-height:44px; padding:0 14px; font-family:var(--m); font-stretch:100%; font-size:11px; letter-spacing:.18em; text-transform:uppercase; color:var(--white); border:1px solid var(--line2); background:transparent}
.lb .lb-x:hover{color:var(--ice); border-color:var(--ice)}
@media (max-width:700px){.prod .pim .pzoom{display:none}}

/* ---------- patrocinio Club Pachuca ----------
   El logotipo conjunto se usa tal cual, en su azul original y sobre blanco:
   el escudo del club no se recolorea ni se invierte. */
.sponsor{background:#fff; color:var(--pachuca); border-bottom:1px solid var(--line)}
.sp-in{display:grid; grid-template-columns:minmax(0,.9fr) minmax(0,1.1fr); gap:clamp(36px,6vw,96px); align-items:center; padding-top:96px; padding-bottom:96px}
.sponsor .eb{color:var(--pachuca)}
.sponsor .eb::before{background:var(--pachuca)}
.sponsor h2{margin-top:24px; color:var(--pachuca)}
.sponsor .lead{margin-top:24px; color:#3A4670}
.sp-logo{margin:0}
.sp-logo img{display:block; width:100%; max-width:640px; height:auto; margin-left:auto}
.sp-tx{container-type:inline-size}
@media (max-width:860px){.sp-in{grid-template-columns:1fr; padding-top:64px; padding-bottom:64px} .sp-logo img{margin:0; max-width:520px}}

/* ---------- banda de respaldo (Master Dealer) ---------- */
.band{position:relative; overflow:hidden; border-bottom:1px solid var(--line); background:var(--navy)}
.band-bg{position:absolute; inset:0}
.band-bg img{width:100%; height:100%; object-fit:cover; filter:brightness(.42) saturate(.7) contrast(1.1); mix-blend-mode:luminosity; opacity:.55}
.band-bg::after{content:""; position:absolute; inset:0; background:linear-gradient(90deg,var(--navy) 22%,rgba(0,12,84,.72) 60%,rgba(0,12,84,.4) 100%)}
.band-in{position:relative; max-width:var(--maxw); margin:0 auto; padding:96px var(--pad)}
.band h2{font-size:clamp(1.9rem,4.4vw,3.6rem); max-width:20ch; margin-top:24px}
.band h2 em{font-style:normal; color:var(--ice)}
.pillars{display:grid; grid-template-columns:repeat(3,1fr); border-top:1px solid rgba(255,255,255,.2); margin-top:56px}
.pillars > div{padding:28px 26px 4px 0; display:flex; flex-direction:column; gap:12px}
.pillars > div + div{padding-left:26px; border-left:1px solid rgba(255,255,255,.2)}
.pillars .n{font-family:var(--m); font-stretch:100%; font-size:10.5px; letter-spacing:.16em; color:var(--ice)}
.pillars h3{font-size:clamp(1.1rem,2vw,1.45rem); line-height:1}
.pillars p{color:rgba(255,255,255,.72); font-size:14.5px; line-height:1.65}
@media (max-width:860px){.band-in{padding:64px var(--pad)} .pillars{grid-template-columns:1fr} .pillars > div,.pillars > div + div{padding:22px 0; border-left:none; border-bottom:1px solid rgba(255,255,255,.2)}}

/* ---------- rejilla de celdas (sectores, valores, servicios) ---------- */
.cells{display:grid; grid-template-columns:repeat(var(--cols,4),1fr); gap:1px; background:var(--line); border:1px solid var(--line); margin-top:48px}
.cells > div,.cells > a{background:var(--black); padding:28px 24px; display:flex; flex-direction:column; gap:10px; transition:background .3s}
.cells > div:hover,.cells > a:hover{background:var(--s2)}
.cells .k{font-family:var(--m); font-stretch:100%; font-size:10px; letter-spacing:.16em; color:var(--ice)}
.cells h3,.cells h4{font-size:1.1rem; letter-spacing:-.015em; line-height:1.02}
.cells p{font-size:13.5px; color:var(--mute); line-height:1.6}
@media (max-width:1100px){.cells{grid-template-columns:repeat(3,1fr)}}
@media (max-width:820px){.cells{grid-template-columns:1fr 1fr}}
@media (max-width:520px){.cells{grid-template-columns:1fr}}

/* ---------- lista de filas (cobertura, misión) ---------- */
.rows{border-top:1px solid var(--line)}
.rows > div,.rows > a{display:grid; grid-template-columns:150px minmax(0,1fr) auto; gap:24px; align-items:baseline; padding:22px 0; border-bottom:1px solid var(--line)}
.rows dt,.rows .rk{font-family:var(--m); font-stretch:100%; font-size:10px; letter-spacing:.16em; text-transform:uppercase; color:var(--mute2)}
.rows dd,.rows .rv{font-size:16px; line-height:1.55}
.rows dd small,.rows .rv small{display:block; color:var(--mute); font-size:14px; margin-top:4px}
.rows .tag{font-family:var(--m); font-stretch:100%; font-size:9.5px; letter-spacing:.14em; text-transform:uppercase; color:var(--ice); border:1px solid rgba(164,231,255,.35); padding:4px 8px; white-space:nowrap}
.rows .tag.soon{color:var(--mute2); border-color:var(--line2)}
@media (max-width:640px){.rows > div,.rows > a{grid-template-columns:1fr; gap:6px}}

/* ---------- declaración / claim ---------- */
.claim{background:var(--black); border-bottom:1px solid var(--line); position:relative; overflow:hidden}
.claim::after{content:""; position:absolute; right:-8%; top:-40%; width:46%; height:180%; background:rgba(164,231,255,.05); transform:skewX(-15deg)}
.claim-in{position:relative; max-width:var(--maxw); margin:0 auto; padding:96px var(--pad); display:flex; align-items:flex-end; justify-content:space-between; gap:34px; flex-wrap:wrap}
.claim h2{font-size:clamp(2rem,5vw,4rem); max-width:18ch}
.claim h2 em{font-style:normal; color:var(--ice)}
.claim.navy{background:var(--navy)}
@media (max-width:820px){.claim-in{padding:60px var(--pad)}}

/* ---------- novedades ---------- */
.arts{display:grid; grid-template-columns:repeat(3,1fr); gap:30px; margin-top:48px}
.art{display:flex; flex-direction:column; gap:16px}
.art .im{aspect-ratio:4/3; overflow:hidden; background:var(--s2); border:1px solid var(--line)}
.art .im img{width:100%; height:100%; object-fit:cover; transition:transform .7s var(--ease); filter:saturate(.9)}
.art:hover .im img{transform:scale(1.06)}
.art .mt{display:flex; gap:14px; font-family:var(--m); font-stretch:100%; font-size:10px; letter-spacing:.15em; text-transform:uppercase; color:var(--mute2)}
.art .mt i{font-style:normal; color:var(--ice)}
.art h3{font-size:1.25rem; line-height:1.08; transition:color .3s}
.art p{color:var(--mute); font-size:14px; line-height:1.6}
.art:hover h3{color:var(--ice)}
@media (max-width:900px){.arts{grid-template-columns:1fr; gap:40px}}

/* ---------- bloque de marca (páginas de división) ---------- */
.brandblock{border-bottom:1px solid var(--line); padding:96px 0; scroll-margin-top:110px}
.brandhead{display:grid; grid-template-columns:minmax(0,.9fr) minmax(0,1fr); gap:56px; align-items:end; padding-bottom:40px; border-bottom:1px solid var(--line)}
.brandhead .bmark{display:flex; flex-direction:column; gap:16px}
.brandhead .bmark .bname{font-family:var(--d); font-stretch:125%; font-weight:800; font-size:clamp(2.2rem,5.4vw,4.4rem); line-height:.9; letter-spacing:-.04em; text-transform:uppercase}
.brandhead .bmark img{width:min(100%,340px); height:auto}
.brandhead .bmark img.stack{width:auto; align-self:flex-start; height:clamp(88px,18cqi,150px)}
.brandhead .bmark img.pet{--pw:clamp(130px,40cqi,300px); width:var(--pw); height:auto; align-self:flex-start; margin-left:calc(var(--pw) * -0.172)}
.brandhead .bmark .brule{width:64px; height:3px; background:var(--bc,var(--ice))}
.brandhead .bby{font-family:var(--m); font-stretch:100%; font-size:10.5px; letter-spacing:.16em; text-transform:uppercase; color:var(--mute2)}
.brandhead .bby b{color:var(--white); font-weight:500}
@media (max-width:900px){.brandblock{padding:64px 0} .brandhead{grid-template-columns:1fr; gap:24px}}

/* ---------- panorámica de marca ---------- */
.pano.fam img{aspect-ratio:1600/1000; max-height:560px}
.pano.fam .zoom{cursor:zoom-in}
.pano{position:relative; margin:40px 0 0; border:1px solid var(--line); overflow:hidden; background:var(--s2)}
.pano img{width:100%; aspect-ratio:2000/719; object-fit:cover; filter:saturate(.95)}
.pano figcaption{position:absolute; left:0; bottom:0; padding:12px 16px; font-family:var(--m); font-stretch:100%; font-size:10px; letter-spacing:.16em; text-transform:uppercase; color:#fff; background:linear-gradient(90deg,rgba(0,0,0,.72),rgba(0,0,0,0))}
@media (max-width:700px){.pano img{aspect-ratio:16/10; object-position:40% 50%}}

/* ---------- tarjetas de producto ---------- */
.prods{display:grid; grid-template-columns:repeat(var(--cols,3),minmax(0,1fr)); gap:1px; background:var(--line); border:1px solid var(--line); margin-top:40px}
.prod{background:var(--black); display:flex; flex-direction:column; min-width:0}
.prod .pim{position:relative; aspect-ratio:16/10; overflow:hidden; background:var(--s2); border-bottom:1px solid var(--line)}
.prod .pim img{width:100%; height:100%; object-fit:cover; filter:brightness(.9) saturate(.9); transition:transform .8s var(--ease), filter .5s}
.prod:hover .pim img{transform:scale(1.05); filter:brightness(1) saturate(1)}
.prod .pim.trama{background-color:var(--tbg,var(--s3)); background-image:radial-gradient(rgba(164,231,255,.14) 1px,transparent 1.5px); background-size:14px 14px; display:flex; align-items:center; justify-content:center}
.prod .pim.trama span{font-family:var(--d); font-stretch:125%; font-weight:800; font-size:clamp(1.3rem,2.2vw,1.8rem); letter-spacing:-.02em; text-transform:uppercase; color:rgba(255,255,255,.9); text-align:center; padding:0 18px; line-height:.95}
.prod .pim .flag{position:absolute; left:14px; top:14px; font-family:var(--m); font-stretch:100%; font-size:9px; letter-spacing:.16em; text-transform:uppercase; color:#000; background:var(--ice); padding:4px 8px}
.prod .pbody{padding:24px 24px 22px; display:flex; flex-direction:column; gap:12px; flex:1}
.prod .pbrand{display:flex; align-items:center; gap:10px; font-family:var(--m); font-stretch:100%; font-size:9.5px; letter-spacing:.17em; text-transform:uppercase; color:var(--mute2)}
.prod .pbrand i{width:18px; height:2px; background:var(--bc,var(--ice))}
.prod h3{font-size:1.3rem; line-height:1.02; overflow-wrap:anywhere; hyphens:auto}
.prod p{font-size:14px; color:var(--mute); line-height:1.6}
.prod .specs{display:grid; grid-template-columns:auto 1fr; gap:6px 18px; margin-top:4px; padding-top:14px; border-top:1px solid var(--line)}
.prod .specs dt{font-family:var(--m); font-stretch:100%; font-size:9.5px; letter-spacing:.14em; text-transform:uppercase; color:var(--mute2); padding-top:2px}
.prod .specs dd{font-size:14px; font-variant-numeric:tabular-nums}
.prod .pacts.una{grid-template-columns:1fr}
.prod .pacts{display:grid; grid-template-columns:1fr 1fr; border-top:1px solid var(--line); margin-top:auto}
.prod .pacts > *{display:flex; align-items:center; justify-content:center; gap:9px; min-height:52px; padding:10px; font-family:var(--m); font-stretch:100%; font-size:10px; font-weight:500; letter-spacing:.14em; text-transform:uppercase; transition:background .25s, color .25s}
.prod .pacts > * + *{border-left:1px solid var(--line)}
.prod .pacts .p-ficha:hover{background:var(--ice); color:#000}
.prod .pacts .p-cot:hover{background:var(--white); color:#000}
@media (max-width:1100px){.prods{grid-template-columns:repeat(2,minmax(0,1fr))} .prods[style*="--cols:1"]{grid-template-columns:minmax(0,1fr)}}
.two .prods{margin-top:0}
@media (max-width:640px){.prods{grid-template-columns:minmax(0,1fr)}}

/* ---------- formularios ---------- */
.form{display:grid; grid-template-columns:1fr 1fr; gap:26px 24px}
.fl{display:flex; flex-direction:column; gap:9px; min-width:0}
.fl.full{grid-column:1/-1}
.fl label,.fl .lbl{font-family:var(--m); font-stretch:100%; font-size:10px; font-weight:500; letter-spacing:.16em; text-transform:uppercase; color:var(--mute2)}
.fl label .req{color:var(--ice); margin-left:4px}
.fl input,.fl select,.fl textarea{font-family:var(--d); font-size:16px; color:var(--white); background:transparent; border:0; border-bottom:1px solid var(--line2); border-radius:0; padding:12px 0; min-height:48px; width:100%; transition:border-color .25s}
.fl input::placeholder,.fl textarea::placeholder{color:var(--mute2)}
.fl input:focus,.fl select:focus,.fl textarea:focus{outline:none; border-bottom-color:var(--ice)}
.fl textarea{resize:vertical; min-height:84px}
.fl select{appearance:none; -webkit-appearance:none; padding-right:28px; background-image:linear-gradient(45deg,transparent 50%,var(--mute) 50%),linear-gradient(135deg,var(--mute) 50%,transparent 50%); background-position:calc(100% - 12px) 24px,calc(100% - 7px) 24px; background-size:5px 5px,5px 5px; background-repeat:no-repeat}
.fl select option{background:var(--s2); color:var(--white)}
.fl .err{display:none; font-family:var(--m); font-stretch:100%; font-size:10px; letter-spacing:.06em; color:var(--err); line-height:1.5}
.fl.bad input,.fl.bad select,.fl.bad textarea{border-bottom-color:var(--err)}
.fl.bad .err{display:block}
.check{grid-column:1/-1; display:flex; gap:14px; align-items:flex-start}
.check input{appearance:none; -webkit-appearance:none; flex:none; width:20px; height:20px; margin-top:2px; border:1px solid var(--line2); background:transparent; display:grid; place-content:center; cursor:pointer}
.check input::after{content:""; width:10px; height:10px; background:var(--ice); transform:scale(0); transition:transform .15s}
.check input:checked::after{transform:scale(1)}
.check input:focus-visible{outline:2px solid var(--ice); outline-offset:3px}
.check label{font-size:13.5px; color:var(--mute); line-height:1.6}
.check label a{color:var(--white); text-decoration:underline; text-underline-offset:3px}
.check.bad input{border-color:var(--err)}
.check .err{display:none; grid-column:1/-1; font-family:var(--m); font-size:10px; color:var(--err)}
.check.bad + .err-check{display:block}
.err-check{display:none; grid-column:1/-1; margin-top:-16px; font-family:var(--m); font-stretch:100%; font-size:10px; letter-spacing:.06em; color:var(--err)}
.form .submit{grid-column:1/-1}
.form .submit .bt{width:100%}
.fnote{grid-column:1/-1; font-family:var(--m); font-stretch:100%; font-size:10px; letter-spacing:.05em; color:var(--mute2); line-height:1.85}
.fstatus{grid-column:1/-1; font-family:var(--m); font-stretch:100%; font-size:11px; letter-spacing:.06em; line-height:1.7}
.fstatus.bad{color:var(--err)}
.fdone{border:1px solid rgba(164,231,255,.35); background:var(--ice-soft); padding:32px; display:flex; flex-direction:column; gap:14px}
.fdone h3{font-size:clamp(1.3rem,2.6vw,1.9rem)}
.fdone p{color:var(--mute); font-size:15px; line-height:1.65}
@media (max-width:640px){.form{grid-template-columns:1fr}}

.cta-grid{display:grid; grid-template-columns:minmax(0,1fr) minmax(0,1.1fr); gap:64px; align-items:start}
@media (max-width:980px){.cta-grid{grid-template-columns:1fr; gap:44px}}

/* ---------- modal de ficha técnica ---------- */
.modal{position:fixed; inset:0; z-index:120; display:grid; place-items:center; padding:20px; background:rgba(0,0,0,.78); backdrop-filter:blur(6px); -webkit-backdrop-filter:blur(6px); opacity:0; visibility:hidden; transition:opacity .3s, visibility .3s}
.modal.on{opacity:1; visibility:visible}
.modal-box{position:relative; width:min(760px,100%); max-height:calc(100vh - 40px); overflow-y:auto; background:var(--s1); border:1px solid var(--line2); padding:40px; transform:translateY(14px); transition:transform .35s var(--ease)}
.modal.on .modal-box{transform:none}
.modal-x{position:absolute; right:14px; top:10px; min-width:44px; min-height:44px; font-family:var(--m); font-size:11px; letter-spacing:.14em; text-transform:uppercase; color:var(--mute)}
.modal-x:hover{color:var(--ice)}
.modal h2{font-size:clamp(1.4rem,3vw,2.1rem); margin:16px 0 12px; padding-right:40px}
.modal .lead{font-size:15px; margin-bottom:30px}
@media (max-width:640px){.modal-box{padding:28px 22px}}

/* ---------- distribuidores / mapa ---------- */
.locator{display:grid; grid-template-columns:380px minmax(0,1fr); border-top:1px solid var(--line); border-bottom:1px solid var(--line); min-height:680px}
.loc-side{border-right:1px solid var(--line); display:flex; flex-direction:column; min-height:0; max-height:780px}
.loc-filters{padding:26px var(--pad) 22px 26px; display:grid; gap:18px; border-bottom:1px solid var(--line)}
.loc-filters .fl{gap:6px}
.loc-filters .fl input,.loc-filters .fl select{min-height:42px; padding:8px 0; font-size:15px}
.loc-filters .fl select{background-position:calc(100% - 12px) 18px,calc(100% - 7px) 18px}
.loc-meta{display:flex; justify-content:space-between; align-items:center; gap:10px; padding:12px 26px; border-bottom:1px solid var(--line); font-family:var(--m); font-stretch:100%; font-size:10px; letter-spacing:.14em; text-transform:uppercase; color:var(--mute2)}
.loc-meta b{color:var(--white); font-weight:500}
.loc-meta button{color:var(--mute); text-decoration:underline; text-underline-offset:3px; font-family:inherit; font-size:inherit; letter-spacing:inherit; text-transform:inherit; min-height:32px}
.loc-meta button:hover{color:var(--ice)}
.loc-list{list-style:none; margin:0; padding:0; overflow-y:auto; flex:1}
.loc-item{border-bottom:1px solid var(--line)}
.loc-item button{display:block; width:100%; text-align:left; padding:20px 26px; transition:background .2s}
.loc-item button:hover,.loc-item.on button{background:var(--s2)}
.loc-item.on button{box-shadow:inset 3px 0 0 var(--ice)}
.loc-item .ln{font-family:var(--d); font-stretch:125%; font-weight:800; font-size:1.02rem; text-transform:uppercase; letter-spacing:-.01em; line-height:1.05}
.loc-item .la{display:block; margin-top:7px; font-size:13.5px; color:var(--mute); line-height:1.5}
.loc-item .lt{display:flex; flex-wrap:wrap; gap:6px; margin-top:11px}
.loc-item .lt span{font-family:var(--m); font-stretch:100%; font-size:9px; letter-spacing:.12em; text-transform:uppercase; border:1px solid var(--line2); color:var(--mute); padding:3px 7px}
.loc-item .lt span.t-dist{color:var(--ice); border-color:rgba(164,231,255,.4)}
.loc-item .lt span.t-serv{color:#FFD08A; border-color:rgba(255,208,138,.4)}
.loc-item .lt span.t-soon{color:var(--mute2)}
.loc-empty{padding:30px 26px; color:var(--mute); font-size:14.5px; line-height:1.6}
.loc-map{position:relative; min-height:520px; background:var(--s1)}
#mapa{position:absolute; inset:0}
.map-fallback{position:absolute; inset:0; display:grid; place-items:center; padding:30px; text-align:center; color:var(--mute); font-size:14.5px; line-height:1.6}
.loc-detail{border-top:1px solid var(--line)}
@media (max-width:980px){.locator{grid-template-columns:1fr} .loc-side{border-right:none; max-height:none} .loc-list{max-height:460px} .loc-map{min-height:420px; order:-1; border-bottom:1px solid var(--line)}}

/* piezas de Leaflet en la paleta del sitio */
.leaflet-container{background:#0b0d12!important; font-family:var(--d)!important}
.leaflet-tile-pane{filter:invert(1) hue-rotate(200deg) brightness(.78) contrast(.92) saturate(.35)}
.leaflet-control-attribution{background:rgba(0,0,0,.7)!important; color:var(--mute2)!important; font-family:var(--m)!important; font-size:9px!important}
.leaflet-control-attribution a{color:var(--mute)!important}
.leaflet-bar a{background:#000!important; color:#fff!important; border-color:var(--line2)!important}
.leaflet-bar a:hover{background:var(--s3)!important; color:var(--ice)!important}
.leaflet-popup-content-wrapper,.leaflet-popup-tip{background:#000!important; color:#fff!important; border:1px solid var(--line2); border-radius:0!important; box-shadow:none!important}
.leaflet-popup-content{margin:16px 18px!important; font-size:13.5px; line-height:1.55}
.leaflet-popup-content b{display:block; font-stretch:125%; font-weight:800; text-transform:uppercase; font-size:14px; margin-bottom:4px}
.leaflet-popup-content a{color:var(--ice)!important}
.leaflet-container a.leaflet-popup-close-button{color:var(--mute)!important}
.pin{width:18px; height:18px; transform:rotate(45deg); border:2px solid #000; box-shadow:0 0 0 1px var(--line2)}
.pin.dist{background:var(--ice)}
.pin.serv{background:#FFD08A}
.pin.both{background:linear-gradient(135deg,var(--ice) 50%,#FFD08A 50%)}
.pin.log{background:#8A93A6}
.pin.soon{background:transparent; border:2px dashed var(--mute); box-shadow:none}
.pin.on{outline:2px solid #fff; outline-offset:3px}
.legend{display:flex; gap:18px; flex-wrap:wrap; padding:14px 26px; border-top:1px solid var(--line); font-family:var(--m); font-stretch:100%; font-size:9.5px; letter-spacing:.13em; text-transform:uppercase; color:var(--mute2)}
.legend span{display:inline-flex; align-items:center; gap:9px}
.legend i{display:inline-block; width:10px; height:10px; transform:rotate(45deg)}

/* ---------- contenido legal ---------- */
.prose{max-width:74ch}
.prose h2{font-size:clamp(1.2rem,2.4vw,1.6rem); margin:56px 0 16px; line-height:1.05}
.prose h2:first-child{margin-top:0}
.prose p,.prose li{color:var(--mute); font-size:15.5px; line-height:1.8}
.prose p + p{margin-top:14px}
.prose ul{padding-left:20px; margin-top:12px; display:grid; gap:8px}
.prose strong{color:var(--white); font-weight:600}
.legal-flag{border:1px solid rgba(255,208,138,.45); background:rgba(255,208,138,.07); padding:18px 22px; margin-bottom:48px; font-family:var(--m); font-stretch:100%; font-size:11px; letter-spacing:.04em; line-height:1.8; color:#FFD08A}
.legal-grid{display:grid; grid-template-columns:260px minmax(0,1fr); gap:64px; align-items:start}
.legal-toc{position:sticky; top:100px; display:flex; flex-direction:column; border-top:1px solid var(--line)}
.legal-toc a{padding:12px 0; border-bottom:1px solid var(--line); font-family:var(--m); font-stretch:100%; font-size:10px; letter-spacing:.13em; text-transform:uppercase; color:var(--mute)}
.legal-toc a:hover,.legal-toc a[aria-current="page"]{color:var(--ice)}
@media (max-width:900px){.legal-grid{grid-template-columns:1fr; gap:36px} .legal-toc{position:static}}

/* ---------- banner de cookies ---------- */
/* ---------- botón flotante de WhatsApp ---------- */
.wa{position:fixed; right:20px; bottom:20px; z-index:100; display:inline-flex; align-items:center; gap:10px; padding:13px 18px 13px 15px; border-radius:999px; background:#25D366; color:#06250F; font-family:var(--m); font-stretch:100%; font-size:11px; font-weight:500; letter-spacing:.16em; text-transform:uppercase; box-shadow:0 10px 30px rgba(0,0,0,.45); transition:transform .28s var(--ease), background .25s}
.wa:hover,.wa:focus-visible{background:#1FBF5B; color:#06250F; transform:translateY(-3px)}
.wa svg{flex:none}
/* Mientras se ve el aviso de cookies, el botón sube para no taparlo */
.cookies.on ~ .wa,.wa.subido{bottom:150px}
@media (max-width:620px){
  .wa{padding:14px; right:16px; bottom:16px}
  .wa span{position:absolute; width:1px; height:1px; overflow:hidden; clip-path:inset(50%); white-space:nowrap}
}
@media print{.wa{display:none}}

.cookies{position:fixed; left:20px; right:20px; bottom:20px; z-index:110; max-width:560px; background:var(--s1); border:1px solid var(--line2); padding:22px 24px; display:grid; gap:16px; transform:translateY(24px); opacity:0; visibility:hidden; transition:transform .4s var(--ease), opacity .4s, visibility .4s}
.cookies.on{transform:none; opacity:1; visibility:visible}
.cookies p{font-size:13.5px; color:var(--mute); line-height:1.6}
.cookies p a{color:var(--white); text-decoration:underline; text-underline-offset:3px}
.cookies .acts{gap:10px}

/* ---------- footer ---------- */
footer.site{background:var(--black); padding:80px 0 30px; border-top:1px solid var(--line)}
.f-top{display:grid; grid-template-columns:1.5fr 1fr 1fr 1fr; gap:40px; padding-bottom:48px; border-bottom:1px solid var(--line)}
.f-top .flogo{height:30px; width:auto; margin-bottom:22px}
.f-top p{font-size:14px; color:var(--mute); line-height:1.7; max-width:34ch}
.f-col h2{margin:0 0 16px; font-family:var(--m); font-stretch:100%; font-size:10px; font-weight:500; letter-spacing:.18em; text-transform:uppercase; color:var(--ice); line-height:1.4}
.f-col ul{list-style:none; padding:0; display:flex; flex-direction:column; gap:11px}
.f-col a{font-size:14.5px; color:var(--mute); transition:color .2s}
.f-col a:hover{color:var(--white)}
.f-creds{display:flex; gap:28px; flex-wrap:wrap; padding:24px 0; border-bottom:1px solid var(--line); font-family:var(--m); font-stretch:100%; font-size:10px; letter-spacing:.13em; text-transform:uppercase; color:var(--mute)}
.f-creds span{display:inline-flex; align-items:center; gap:10px}
.f-creds i{width:6px; height:6px; background:var(--bc,var(--ice)); transform:rotate(45deg)}
.f-bot{padding-top:24px; display:flex; justify-content:space-between; gap:16px; flex-wrap:wrap; font-family:var(--m); font-stretch:100%; font-size:10px; letter-spacing:.12em; text-transform:uppercase; color:var(--mute2)}
.f-bot nav{display:flex; gap:20px; flex-wrap:wrap}
.f-bot a:hover{color:var(--ice)}
@media (max-width:900px){.f-top{grid-template-columns:1fr 1fr} .f-top > div:first-child{grid-column:1/-1}}
@media (max-width:480px){.f-top{grid-template-columns:1fr}}

/* =====================================================================
   Tipografía de display relativa a su contenedor.
   La versal ancha (font-stretch 125%) mide ~0.92em por letra: cada tamaño
   está calculado para que la palabra más larga de su bloque quepa en la
   columna donde vive, no en la ventana. Sin soporte de container queries
   se queda la escala por viewport definida arriba.
   ===================================================================== */
.two > div,.cta-grid > div,.brandhead > div,.hero-in,.phero-in,.band-in,.claim-in,.tile{container-type:inline-size}
.brandhead > *{min-width:0}
@supports (font-size:1cqi){
  .big{font-size:clamp(1.3rem,8.2cqi,3.5rem)}
  .mid{font-size:clamp(1.25rem,6.4cqi,2.3rem)}
  .hero h1{font-size:clamp(2rem,9cqi,7.2rem); max-width:15em}
  .phero h1{font-size:clamp(1.3rem,6.4cqi,5.2rem); max-width:15em}
  .band h2{font-size:clamp(1.3rem,6.6cqi,3.6rem)}
  .claim h2{font-size:clamp(1.4rem,5.6cqi,4rem)}
  .brandhead .bmark .bname{font-size:clamp(1.6rem,8.6cqi,4.4rem)}
  .tile .twm{font-size:clamp(.95rem,8.8cqi,2rem)}
}
.hero h1,.phero h1,.big,.band h2,.claim h2,.bname,.twm{overflow-wrap:break-word; hyphens:manual}