/* Zummat · sistema visual v1 (5-oct-2026)
   Paleta sacada del logo: navy del nombre + los colores de los dos anillos.
   Contraste medido: navy #1f2e4f sobre blanco 13.3:1 · ink-2 #4f5b73 sobre blanco 6.6:1 ·
   blanco sobre navy 13.3:1 · blanco sobre WhatsApp #117f73 4.9:1 · naranja #c2410c (texto) sobre blanco 5.2:1 */
@font-face{font-family:"Archivo";font-style:normal;font-weight:700 800;font-display:swap;src:url(fonts/archivo-latin.woff2) format("woff2");unicode-range:U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD}
@font-face{font-family:"Inter";font-style:normal;font-weight:400 700;font-display:swap;src:url(fonts/inter-latin.woff2) format("woff2");unicode-range:U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD}
/* Respaldos con las medidas de cada fuente web: al llegar Archivo e Inter el texto no se mueve (CLS 0.207 en PageSpeed móvil, 15-oct). */
@font-face{font-family:"Archivo Fallback";src:local("Arial Bold"),local("Arial-BoldMT"),local("Arimo Bold"),local("Liberation Sans Bold");font-weight:700 800;size-adjust:102.76%;ascent-override:85.4%;descent-override:20.4%;line-gap-override:0%}
@font-face{font-family:"Inter Fallback";src:local("Arial"),local("ArialMT"),local("Arimo"),local("Liberation Sans");font-weight:400 500;size-adjust:106.54%;ascent-override:90.9%;descent-override:22.6%;line-gap-override:0%}
@font-face{font-family:"Inter Fallback";src:local("Arial Bold"),local("Arial-BoldMT"),local("Arimo Bold"),local("Liberation Sans Bold");font-weight:600 700;size-adjust:101.94%;ascent-override:95.0%;descent-override:23.7%;line-gap-override:0%}
:root{
  --navy:#1f2e4f;--navy-d:#141e36;--ink:#1b2436;--ink-2:#4f5b73;--line:#e2e7f0;--wash:#f4f6fa;--paper:#fff;
  --r-red:#e2401f;--r-orange:#f09010;--r-blue:#204090;--r-green:#2f8f5b;--r-mag:#a03080;
  --acc-txt:#c2410c;--wa:#117f73;--wa-d:#0f6f64;
  --max-w:1760px;--pad:clamp(1.25rem,3.5vw,4rem);
  --display:"Archivo","Archivo Fallback",system-ui,sans-serif;--sans:"Inter","Inter Fallback",system-ui,-apple-system,"Segoe UI",sans-serif;
  --radius:22px;
}
*{box-sizing:border-box;margin:0;padding:0}
html{scroll-behavior:smooth}
body{font-family:var(--sans);color:var(--ink);background:var(--paper);font-size:17px;line-height:1.6;-webkit-font-smoothing:antialiased}
img{max-width:100%;height:auto;display:block}
a{color:var(--r-blue)}
.container{width:100%;max-width:var(--max-w);margin-inline:auto;padding-inline:var(--pad)}
.skip{position:absolute;left:-9999px}.skip:focus{left:1rem;top:1rem;background:#fff;padding:.5rem 1rem;z-index:99}

/* ── encabezado ─────────────────────────────────────────── */
.top{position:sticky;top:0;z-index:50;background:rgba(255,255,255,.94);backdrop-filter:saturate(1.4) blur(10px);border-bottom:1px solid var(--line)}
.top .container{display:flex;align-items:center;gap:1.5rem;min-height:74px}
.brand{display:flex;align-items:center;flex:none}
.brand img{height:42px;width:auto;align-self:center}
.nav{display:flex;gap:1.6rem;margin-left:auto;align-items:center}
.nav a{color:var(--ink);text-decoration:none;font-weight:600;font-size:15px;white-space:nowrap}
.nav a:hover{color:var(--r-blue)}
.nav a.btn{color:#fff}
.nav .ext::after{content:" ↗";font-size:.8em;color:var(--ink-2)}
.menu-btn{display:none;margin-left:auto;background:none;border:1px solid var(--line);border-radius:10px;padding:.5rem .8rem;font:600 15px var(--sans);color:var(--ink)}

/* mega menú: dos entradas con panel (plantas, LED). Sin JS abre con :hover y :focus-within; con JS (html.mm-js) abre con .is-open */
.nav-item{position:static}
.nav-btn{display:inline-flex;align-items:center;gap:.45rem;height:74px;background:none;border:0;padding:0;font:600 15px var(--sans);color:var(--ink);white-space:nowrap;cursor:pointer}
.nav-btn::after{content:"";width:.42em;height:.42em;border:solid currentColor;border-width:0 2px 2px 0;transform:translateY(-.12em) rotate(45deg);transition:transform .2s ease}
.nav-btn:hover,.nav-btn[aria-current],.nav-btn[aria-expanded="true"]{color:var(--r-blue)}
.nav-btn[aria-current],.nav-btn[aria-expanded="true"]{box-shadow:inset 0 -3px 0 var(--r-orange)}
.nav-btn[aria-expanded="true"]::after{transform:translateY(.1em) rotate(-135deg)}
.nav-btn:focus-visible,.menu-btn:focus-visible,.nav .mega a:focus-visible{outline:3px solid var(--r-orange);outline-offset:-3px;border-radius:6px}
.nav a[aria-current="page"]{color:var(--r-blue)}
.mega{display:none;position:absolute;left:0;right:0;top:100%;background:#fff;border-bottom:1px solid var(--line);box-shadow:0 30px 60px -30px rgba(20,30,54,.35);max-height:calc(100vh - 80px);overflow-y:auto}
.has-mega.is-open>.mega,html:not(.mm-js) .has-mega:hover>.mega,html:not(.mm-js) .has-mega:focus-within>.mega{display:block;animation:mega-in .2s ease both}
@keyframes mega-in{from{opacity:0;transform:translateY(-6px)}to{opacity:1;transform:none}}
.top .mega-in{display:grid;min-height:0;grid-template-columns:minmax(220px,24%) minmax(0,1fr) minmax(200px,25%);gap:clamp(1.5rem,3vw,3.5rem);align-items:start;padding-block:2rem 2.25rem}
.mega-kick{display:flex;align-items:center;gap:.7rem;font-size:12px;font-weight:700;letter-spacing:.14em;text-transform:uppercase;color:var(--acc-txt)}
.mega-kick::before{content:"";width:28px;height:3px;border-radius:3px;background:linear-gradient(90deg,var(--r-red),var(--r-orange))}
.mega-title{font:800 clamp(1.25rem,1.7vw,1.6rem)/1.15 var(--display);color:var(--navy);margin-top:.6rem}
.mega-line{color:var(--ink-2);font-size:15px;line-height:1.5;margin-top:.6rem}
.nav .mega a.mega-all{display:inline-flex;align-items:center;gap:.5rem;margin-top:1rem;font-size:15px;font-weight:700;color:var(--r-blue);white-space:normal}
.nav .mega a.mega-all::after{content:"→";transition:transform .2s ease}
.nav .mega a.mega-all:hover::after{transform:translateX(3px)}
.nav .mega a.mega-all:hover,.nav .mega a.mega-all[aria-current="page"]{text-decoration:underline;text-underline-offset:4px}
.mega-list{list-style:none;display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:.15rem 1.75rem}
.nav .mega a.mega-link{display:block;padding:.65rem .75rem;border-radius:12px;white-space:normal}
.nav .mega a.mega-link:hover{background:var(--wash);color:inherit}
.mega-t{display:block;font-weight:700;font-size:15px;line-height:1.3;color:var(--navy)}
.nav .mega a.mega-link:hover .mega-t,.nav .mega a.mega-link[aria-current="page"] .mega-t{color:var(--r-blue)}
.nav .mega a.mega-link[aria-current="page"]{background:var(--wash)}
.mega-d{display:block;font-size:14px;font-weight:400;line-height:1.4;color:var(--ink-2);margin-top:.15rem}
.mega-photo{aspect-ratio:4/3;background:var(--wash);border-radius:18px;overflow:hidden;box-shadow:0 14px 34px rgba(20,30,54,.14)}
.mega-photo img{width:100%;height:100%;object-fit:cover}
.vh{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0);clip-path:inset(50%);white-space:nowrap}

/* ── botones (familia única) ─────────────────────────────── */
.btn{position:relative;overflow:hidden;display:inline-flex;align-items:center;justify-content:center;gap:.55rem;padding:.95rem 1.5rem;border-radius:14px;font:700 16px/1.1 var(--sans);text-decoration:none;color:#fff;
  background:linear-gradient(180deg,#2a3c64 0%,var(--navy) 100%);box-shadow:inset 0 1px 0 rgba(255,255,255,.18),0 6px 18px rgba(31,46,79,.22);transition:transform .2s ease,box-shadow .2s ease;border:0;cursor:pointer}
.btn:hover{transform:translateY(-2px);box-shadow:inset 0 1px 0 rgba(255,255,255,.18),0 10px 26px rgba(31,46,79,.32)}
.btn::after{content:"";position:absolute;top:0;left:-60%;width:40%;height:100%;background:linear-gradient(100deg,transparent,rgba(255,255,255,.22),transparent);transform:skewX(-18deg);transition:left .6s ease}
.btn:hover::after{left:120%}
.btn:focus-visible{outline:3px solid var(--r-orange);outline-offset:3px}
.btn svg{width:20px;height:20px;flex:none}
.btn.wa{background:linear-gradient(180deg,#14907f 0%,var(--wa) 100%);box-shadow:inset 0 1px 0 rgba(255,255,255,.18),0 6px 18px rgba(17,127,115,.25)}
.btn.ghost{background:#fff;color:var(--navy);box-shadow:inset 0 0 0 2px var(--navy)}
.btn.light{background:#fff;color:var(--navy);box-shadow:0 6px 18px rgba(0,0,0,.18)}
.btn.sm{padding:.65rem 1.05rem;font-size:15px;border-radius:12px}

/* ── hero ───────────────────────────────────────────────── */
.hero{position:relative;overflow:hidden;background:radial-gradient(1200px 600px at 85% 20%,#eef2fb 0%,#fff 60%)}
.hero .container{display:grid;grid-template-columns:minmax(0,1.05fr) minmax(0,.95fr);gap:clamp(2rem,5vw,6rem);align-items:center;padding-block:clamp(3rem,7vw,7.5rem)}
.kick{display:inline-flex;align-items:center;gap:.6rem;font:700 13px var(--sans);letter-spacing:.14em;text-transform:uppercase;color:var(--acc-txt);margin-bottom:1.1rem}
.kick::before{content:"";width:28px;height:3px;border-radius:3px;background:linear-gradient(90deg,var(--r-red),var(--r-orange))}
h1{font-family:var(--display);font-weight:800;font-size:clamp(2.3rem,4.6vw,4.6rem);line-height:1.04;letter-spacing:-.02em;color:var(--navy);margin-bottom:1.3rem}
h1 .hl{background:linear-gradient(90deg,var(--r-red),var(--r-orange));-webkit-background-clip:text;background-clip:text;color:transparent}
.lead{font-size:clamp(1.05rem,1.3vw,1.3rem);color:var(--ink-2);max-width:56ch;margin-bottom:2rem}
.cta-row{display:flex;flex-wrap:wrap;gap:.8rem}
.hero-note{margin-top:1.4rem;font-size:14.5px;color:var(--ink-2);display:flex;gap:1.2rem;flex-wrap:wrap}
.hero-note span{display:inline-flex;align-items:center;gap:.45rem}
.hero-note span::before{content:"";width:8px;height:8px;border-radius:50%;background:var(--r-green)}
.hero-art{position:relative;aspect-ratio:1/1;max-width:640px;width:100%;justify-self:center}
.hero-art svg.rings{position:absolute;inset:0;width:100%;height:100%}
.ring-spin{transform-origin:50% 50%;animation:spin 60s linear infinite}
.ring-spin.rev{animation-direction:reverse;animation-duration:80s}
@keyframes spin{to{transform:rotate(360deg)}}
.chip{position:absolute;background:#fff;border:1px solid var(--line);border-radius:16px;padding:.8rem 1rem;box-shadow:0 14px 34px rgba(20,30,54,.12);display:flex;gap:.7rem;align-items:center;min-width:0;max-width:260px}
.chip b{display:block;font:800 15px/1.2 var(--display);color:var(--navy)}
.chip small{display:block;font-size:13px;color:var(--ink-2);line-height:1.3}
.chip .dot{flex:none;width:38px;height:38px;border-radius:12px;display:grid;place-items:center;color:#fff}
.chip .dot svg{width:20px;height:20px}
.chip.c1{top:6%;left:-2%}.chip.c2{top:44%;right:-4%}.chip.c3{bottom:6%;left:6%}
.d-red{background:var(--r-red)}.d-blue{background:var(--r-blue)}.d-green{background:var(--r-green)}.d-orange{background:var(--r-orange)}
.hero-prod{position:absolute;width:34%;left:33%;top:31%;mix-blend-mode:multiply}
/* variante grande, para equipo ancho o alto (plantas, torres): al 34% se veía chico dentro de los anillos.
   Agrandarla con multiply no sirve: los anillos le pasan por encima y la rayan. Por eso va DELANTE de los anillos,
   en su propia placa blanca (la foto ya trae fondo blanco), y los anillos crecen para abrazarla: el arte lleva
   .hero-art.solo-foto, como la tarjeta alta de los hubs. No cambia la .hero-prod de las páginas de iluminación. */
.hero-prod.grande{left:16%;top:16%;width:68%;padding:4%;background:#fff;border-radius:28px;mix-blend-mode:normal;box-shadow:0 26px 60px rgba(20,30,54,.22)}

/* carrusel del inicio (pedido de Armando, 13-oct): plantas, baterías e iluminación en loop con los aros girando detrás.
   Solo CSS, sin JS. Las fotos son recortes sin fondo (*-sin-fondo.webp, copias: las originales siguen en las demás páginas)
   y flotan DELANTE de los aros, con sombra para despegarlas; en normal, no multiply, para que los aros no rayen el producto
   (el multiply solo servía con fondo blanco). Las tres se funden una tras otra en un ciclo de 13.5 s y el chip de la foto
   activa se levanta (c1 plantas, c2 baterías o torres, c3 LED). Con BATERIAS=0 la segunda foto es la torre, que es lo que
   ya dice el chip del centro. La primera foto se ve desde el primer cuadro (retraso negativo): no retrasa el LCP.
   Las fotos son decorativas (el arte entero es aria-hidden); pasar el mouse pausa el loop. */
.carrusel{--ciclo:13.5s}
.carrusel-fotos{position:absolute;inset:0}
.carrusel .slide{position:absolute;inset:0;display:grid;place-items:center;opacity:0;animation:slide-loop var(--ciclo) linear infinite;
  animation-delay:calc(var(--i)*var(--ciclo)/3 - var(--ciclo)*.04)}
.carrusel .slide img{display:block;position:relative;left:-8%;filter:drop-shadow(0 22px 26px rgba(0,0,0,.38))}
.carrusel .s-planta{--i:0}.carrusel .s-bateria,.carrusel .s-torre{--i:1}.carrusel .s-led{--i:2}
.carrusel .s-planta img{width:50%;height:auto}.carrusel .s-bateria img{width:40%;height:auto}.carrusel .s-torre img{height:62%;width:auto}.carrusel .s-led img{width:32%;height:auto}
/* la luz de detrás va por foto: antes era un charco fijo hecho para la campana (que necesitaba claro detrás por el multiply).
   Ahora cada foto trae el suyo, del tamaño de su producto y centrado donde queda (50% menos el corrimiento de 8%), y se funde
   con ella. Azul claro, el de las luces del encabezado: con el crema de antes la torre blanca se perdía. En el encabezado
   oscuro (≥1024) reemplaza al charco global; en celular, que es claro, va tenue. */
.carrusel .slide::before{content:"";position:absolute;left:42%;top:50%;transform:translate(-50%,-50%);width:59%;height:59%;opacity:.35;pointer-events:none;
  background:radial-gradient(closest-side,rgba(170,205,255,.8) 0%,rgba(170,205,255,.77) 34%,rgba(170,205,255,.36) 58%,rgba(170,205,255,0) 80%)}
.carrusel .s-planta::before{width:88%;height:66%}.carrusel .s-torre::before{width:62%;height:84%}.carrusel .s-bateria::before{width:64%;height:70%}
@media (min-width:1024px){.hero.luz .hero-art.carrusel::before{display:none}.carrusel .slide::before{opacity:1}}
.carrusel .chip{animation:chip-on var(--ciclo) linear infinite;animation-delay:calc(var(--i)*var(--ciclo)/3 - var(--ciclo)*.04)}
.carrusel .chip.c1{--i:0}.carrusel .chip.c2{--i:1}.carrusel .chip.c3{--i:2}
.carrusel:hover .slide,.carrusel:hover .chip{animation-play-state:paused}
@keyframes slide-loop{0%{opacity:0;transform:scale(.96)}4%{opacity:1;transform:none}33.33%{opacity:1;transform:none}37.33%,100%{opacity:0;transform:scale(.96)}}
@keyframes chip-on{0%,37.33%,100%{transform:none}4%,33.33%{transform:translateY(-6px) scale(1.04)}}
@media (max-width:560px){.carrusel .s-planta img{width:58%}.carrusel .s-bateria img{width:46%}.carrusel .s-torre img{height:66%}.carrusel .s-led img{width:38%}}
@media (prefers-reduced-motion:reduce){.carrusel .slide,.carrusel .chip{animation:none}.carrusel .s-planta{opacity:1}}
/* Inicio en celular: el aire que sobraba en el hero (medido a 360, 390 y 430 px, 15-oct). El recuadro del arte es cuadrado pero los anillos
   miden 62 % de su altura: quedaban ~130 px vacíos entre los botones y el aro y debajo de él. Aquí el recuadro baja de altura y el aro se
   centra en él conservando su ancho. Solo la home (.carrusel).
   Los tres chips se cambian por un rótulo (.rot) DENTRO de cada foto: va debajo de ella y se anima con la misma opacidad del slide, así que
   foto y rótulo cambian juntos por construcción (con chips aparte se veía el anterior quedarse un momento). En escritorio siguen los tres chips. */
.rot{display:none}
@media (max-width:560px){
  .hero.luz .container{gap:1rem;padding-block:2rem 2rem}
  .hero.luz + .sec{padding-top:2.25rem}
  .hero-art.carrusel{aspect-ratio:1/.84}
  .hero-art.carrusel svg.rings{inset:auto;left:0;top:50%;width:100%;height:auto;aspect-ratio:1;transform:translateY(-50%)}
  .hero-art.carrusel .chip{display:none}
  .rot{display:flex;position:absolute;left:42%;bottom:-6px;transform:translateX(-50%);background:#fff;border:1px solid var(--line);border-radius:16px;padding:.6rem .75rem;box-shadow:0 14px 34px rgba(20,30,54,.12);gap:.7rem;align-items:center;max-width:200px}
  .rot b{display:block;font:800 14px/1.2 var(--display);color:var(--navy)}
  .rot .dot{flex:none;width:32px;height:32px;border-radius:12px;display:grid;place-items:center;color:#fff}
  .rot .dot svg{width:20px;height:20px}
}

/* ── migas y hero de página interior ─────────────────────── */
.crumbs{background:var(--wash);border-bottom:1px solid var(--line);font-size:14px}
.crumbs .container{display:flex;gap:.5rem;align-items:center;padding-block:.75rem;flex-wrap:wrap}
.crumbs a{color:var(--ink-2);text-decoration:none;font-weight:600}
.crumbs a:hover{color:var(--r-blue)}
.crumbs a::after{content:"›";margin-left:.5rem;color:#aab4c7}
.crumbs span{color:var(--navy);font-weight:700}
.hero.slim .container{padding-block:clamp(2.5rem,5vw,5rem);align-items:center}
.hero.slim h1{font-size:clamp(2.1rem,3.9vw,3.8rem)}
.hero.slim .hero-note{margin-top:0;margin-bottom:1.6rem}
/* hueco de foto dentro del arte del hero: mismo rayado que .slot, en círculo */
.hero-art .slot.ghost{position:absolute;inset:16%;border-radius:50%;min-height:0;align-items:center;justify-content:center;text-align:center;gap:.5rem}
.hero-art .slot.ghost .pend{align-self:center;margin-bottom:0}
.hero-art .slot.ghost b{margin:0;font-size:1rem}
/* foto real dentro de los anillos (mismo lugar que el hueco) */
.hero-art .hero-foto{position:absolute;left:16%;top:16%;width:68%;height:68%;border-radius:50%;object-fit:cover;box-shadow:0 18px 44px rgba(20,30,54,.22)}
/* la misma foto en tarjeta alta: se aprecia más que en círculo (Luis, 10-oct) */
/* con la tarjeta alta los anillos crecen para abrazar la foto: del tamaño normal solo asomaba un cachito y parecía mancha (Luis, 10-oct) */
.hero-art.solo-foto svg.rings{inset:auto;left:-19%;top:-19%;width:138%;height:138%}
.hero-art .hero-foto.alta{left:16%;top:4%;width:68%;height:92%;border-radius:28px;box-shadow:0 26px 60px rgba(20,30,54,.30)}
.hero-art.solo-foto .chip.c3{left:2%;bottom:9%}
/* encabezado sin foto: los anillos solos se quedan en escritorio; en pantallas chicas dejaban un bloque vacío */
@media (max-width:980px){.hero-art.solo-anillos{display:none}}
@media (max-width:980px){.hero-art.solo-foto{margin-block:2.2rem}.hero-art.solo-foto svg.rings{left:-12%;top:-12%;width:124%;height:124%}}

/* ── secciones ──────────────────────────────────────────── */
/* Dinámica de fondos (7-oct): el blanco y el wash alternados se veían planos.
   Cada sección trae un halo de color distinto, tomado de los anillos del logo,
   para que el ojo distinga una de otra sin meter imágenes ni bajar el contraste. */
.sec{padding-block:clamp(3.5rem,7vw,7rem);position:relative;overflow:clip}
.sec.wash{background:
  radial-gradient(900px 420px at 88% -10%,rgba(32,64,144,.07),transparent 65%),
  radial-gradient(760px 380px at 4% 108%,rgba(240,144,16,.08),transparent 62%),
  var(--wash)}
.sec.wash + .sec.wash{background:
  radial-gradient(880px 420px at 10% -12%,rgba(47,143,91,.08),transparent 64%),
  radial-gradient(720px 360px at 94% 104%,rgba(226,64,31,.07),transparent 60%),
  var(--wash)}
.sec:not(.wash){background:radial-gradient(1100px 520px at 96% 0%,#f7f9fe,#fff 58%)}
.sec-head{max-width:62ch;margin-bottom:clamp(2rem,4vw,3.2rem)}
.sec-head.center{max-width:66ch;margin-inline:auto;text-align:center}
.sec-head.center .kick{justify-content:center}
h2{font-family:var(--display);font-weight:800;font-size:clamp(1.9rem,3.2vw,3.1rem);line-height:1.08;letter-spacing:-.015em;color:var(--navy);margin-bottom:.9rem}
h3{font-family:var(--display);font-weight:800;font-size:clamp(1.25rem,1.6vw,1.6rem);line-height:1.15;color:var(--navy);margin-bottom:.6rem}
.sec-head p{color:var(--ink-2);font-size:1.08rem}

/* tres líneas (bento) */
.lines{display:grid;grid-template-columns:repeat(12,minmax(0,1fr));gap:clamp(1rem,1.6vw,1.6rem)}
.line{position:relative;overflow:hidden;border-radius:var(--radius);padding:clamp(1.5rem,2.4vw,2.6rem);border:1px solid var(--line);background:#fff;display:flex;flex-direction:column;min-width:0;text-decoration:none;color:inherit;transition:transform .25s ease,box-shadow .25s ease}
.line:hover{transform:translateY(-4px);box-shadow:0 18px 40px rgba(20,30,54,.12)}
.line.big{grid-column:span 7;grid-row:span 2;background:linear-gradient(150deg,var(--navy-d),var(--navy) 60%,#2a3f6e);color:#fff;border:0}
.line.big h3{color:#fff;font-size:clamp(1.6rem,2.4vw,2.4rem)}
.line.big p{color:rgba(255,255,255,.86)}
.line.big .tagline{color:#ffc78a}
.line.half{grid-column:span 5}
/* sin la línea de baterías (BATERIAS=0): dos tarjetas parejas, sin hueco en la rejilla */
.lines.dos .line.big{grid-column:span 7;grid-row:auto}
.lines.dos .line.half{grid-column:span 5}
.line .tagline{font:700 12.5px var(--sans);letter-spacing:.14em;text-transform:uppercase;color:var(--acc-txt);margin-bottom:.8rem}
.line p{color:var(--ink-2);margin-bottom:1rem;max-width:52ch}
.line ul{list-style:none;margin:0 0 1.2rem;display:grid;gap:.45rem}
.line li{padding-left:1.4rem;position:relative;font-size:15.5px}
.line li::before{content:"";position:absolute;left:0;top:.55em;width:9px;height:9px;border-radius:50%;border:2px solid var(--r-orange)}
.line.big li{color:rgba(255,255,255,.9)}
.line .go{margin-top:auto;font-weight:700;color:var(--r-blue);display:inline-flex;gap:.4rem;align-items:center}
.line.big .go{color:#fff}
.line .ico{width:54px;height:54px;border-radius:16px;display:grid;place-items:center;color:#fff;margin-bottom:1.1rem}
.line .ico svg{width:28px;height:28px}
.line .prod{position:absolute;right:clamp(1rem,2vw,2rem);top:clamp(1rem,2vw,1.8rem);width:clamp(76px,7vw,112px);mix-blend-mode:multiply}
.line.big .bg-rings{position:absolute;right:-12%;bottom:-22%;width:62%;opacity:.22;pointer-events:none}

/* cuando se va la luz */
.flow{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:clamp(1rem,2vw,2rem);counter-reset:f}
.flow.dos{grid-template-columns:repeat(2,minmax(0,1fr))}
.flow .step{background:#fff;border:1px solid var(--line);border-radius:var(--radius);padding:clamp(1.4rem,2vw,2.2rem);position:relative;min-width:0}
.flow .step .when{font:800 12.5px var(--sans);letter-spacing:.14em;text-transform:uppercase;margin-bottom:.6rem;display:block}
.flow .s1 .when{color:var(--r-red)}.flow .s2 .when{color:var(--r-blue)}.flow .s3 .when{color:var(--r-green)}
.flow .step p{color:var(--ink-2)}
.flow .bar{height:6px;border-radius:6px;margin-bottom:1.2rem}
.flow .s1 .bar{background:linear-gradient(90deg,var(--r-red),var(--r-orange))}
.flow .s2 .bar{background:linear-gradient(90deg,var(--r-orange),var(--r-blue))}
.flow .s3 .bar{background:linear-gradient(90deg,var(--r-blue),var(--r-green))}
.flow-note{margin-top:1.6rem;color:var(--ink-2);max-width:70ch}

/* cómo trabajamos */
.steps{display:grid;grid-template-columns:repeat(5,minmax(0,1fr));gap:clamp(.8rem,1.4vw,1.4rem);list-style:none}
.steps li{border-top:3px solid var(--navy);padding-top:1.1rem;min-width:0}
.steps .num{font:800 clamp(2rem,3vw,2.8rem)/1 var(--display);color:transparent;-webkit-text-stroke:1.5px var(--navy);margin-bottom:.7rem;display:block}
.steps b{display:block;font:800 1.1rem/1.25 var(--display);color:var(--navy);margin-bottom:.4rem}
.steps p{font-size:15.5px;color:var(--ink-2)}

/* aplicaciones */
.apps{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:1rem}
.app{display:flex;gap:1rem;align-items:flex-start;padding:1.3rem 1.4rem;border-radius:18px;background:#fff;border:1px solid var(--line);text-decoration:none;color:inherit;min-width:0;transition:border-color .2s ease,transform .2s ease}
.app:hover{border-color:var(--r-blue);transform:translateY(-2px)}
.app .mk{flex:none;width:12px;height:12px;border-radius:50%;margin-top:.45rem}
.app b{display:block;font:800 1.08rem/1.25 var(--display);color:var(--navy);margin-bottom:.25rem}
.app span{font-size:15px;color:var(--ink-2)}

/* proyectos · tres tarjetas con foto real (10-oct): la foto va grande arriba, a la misma proporción en las tres (4:3),
   y abajo un título y una línea que dice lo que se ve y enlaza a su línea. El enlace cubre toda la tarjeta. */
.proj{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:clamp(1rem,1.6vw,1.6rem)}
.proj-card{position:relative;display:flex;flex-direction:column;min-width:0;overflow:hidden;background:#fff;border:1px solid var(--line);border-radius:var(--radius);transition:transform .25s ease,box-shadow .25s ease}
.proj-card:hover{transform:translateY(-4px);box-shadow:0 18px 40px rgba(20,30,54,.12)}
.proj-card img{width:100%;aspect-ratio:4/3;object-fit:cover}
.proj-card figcaption{padding:clamp(1.2rem,1.7vw,1.8rem)}
.proj-card h3{font-size:clamp(1.2rem,1.4vw,1.4rem);margin-bottom:.4rem}
.proj-card p{font-size:15.5px;color:var(--ink-2)}
.proj-card a{display:block;margin-top:.7rem;font-weight:700;color:var(--r-blue);text-decoration:none}
.proj-card a::after{content:"";position:absolute;inset:0;border-radius:var(--radius)}
.proj-card a:focus-visible{outline:none}
.proj-card a:focus-visible::after{outline:3px solid var(--r-orange);outline-offset:-3px}
/* /proyectos/: galería de fotos reales. .proj y .proj-card no alcanzaban: su foto es siempre 4:3 y a 980 px pasan a una columna.
   .v = foto vertical 4:5 (720 x 900). .gal deja que cada tarjeta mida lo suyo (vertical y horizontal juntas) y baja a dos columnas, y a una en celular. */
.proj-card.v img{aspect-ratio:4/5}
.proj.gal{align-items:start}
@media (max-width:980px){.proj.gal{grid-template-columns:repeat(2,minmax(0,1fr))}}
@media (max-width:560px){.proj.gal{grid-template-columns:1fr}}
/* hueco de foto pendiente: ya solo lo usan los encabezados que esperan foto (.hero-art .slot.ghost) */
.slot{border:2px dashed #b9c3d6;border-radius:var(--radius);padding:1.4rem;min-height:260px;display:flex;flex-direction:column;justify-content:flex-end;background:repeating-linear-gradient(135deg,#f7f9fc 0 14px,#f1f4f9 14px 28px);min-width:0}
.slot .pend{align-self:flex-start;font:700 12px var(--sans);letter-spacing:.1em;text-transform:uppercase;color:var(--acc-txt);background:#fff3e8;border-radius:999px;padding:.35rem .7rem;margin-bottom:auto}
.slot b{font:800 1.15rem/1.25 var(--display);color:var(--navy);margin:1.4rem 0 .35rem}
.slot p{font-size:15px;color:var(--ink-2)}

/* testimonios */
.quotes{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:clamp(1rem,1.6vw,1.6rem)}
.quote{background:#fff;border:1px solid var(--line);border-radius:var(--radius);padding:clamp(1.4rem,2vw,2.2rem);display:flex;flex-direction:column;gap:1.2rem;min-width:0;position:relative}
.quote::before{content:"";width:46px;height:5px;border-radius:5px;background:linear-gradient(90deg,var(--r-red),var(--r-orange),var(--r-blue))}
.quote blockquote{font:700 clamp(1.08rem,1.3vw,1.28rem)/1.45 var(--display);color:var(--navy)}
.quote figcaption{margin-top:auto;font-size:14.5px;color:var(--ink-2)}
.quote figcaption b{display:block;color:var(--ink);font-size:15.5px}
/* valores (/nosotros/): en estas tarjetas la cita es una sola palabra, el nombre del valor, y va grande, como las cifras
   de la pleca. Con el tamaño normal de .quote la palabra se perdía dentro de la tarjeta. No toca las demás .quotes. */
.quotes.valores .quote blockquote{font-size:clamp(1.5rem,2.3vw,2.2rem);line-height:1.1}

/* marcas · sección propia, antes de la info de empresa (pidió el diseñador, 7-oct) */
.brands-sec{background:
  radial-gradient(900px 420px at 50% -20%,rgba(32,64,144,.08),transparent 62%),var(--wash)}
.brands-sec .bg-rings{position:absolute;right:-6%;top:50%;transform:translateY(-50%);width:34%;min-width:380px;opacity:.1;pointer-events:none}
.brands{display:flex;flex-wrap:wrap;gap:.7rem;justify-content:center;max-width:1100px;margin-inline:auto;position:relative}
.brands span{padding:.75rem 1.4rem;border-radius:999px;background:#fff;border:1px solid var(--line);font:700 16px var(--display);color:var(--navy);
  box-shadow:0 2px 10px rgba(20,30,54,.05);transition:transform .2s ease,box-shadow .2s ease,border-color .2s ease}
.brands span:hover{transform:translateY(-2px);border-color:var(--r-blue);box-shadow:0 8px 20px rgba(20,30,54,.1)}

/* Toluca */
.where{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1fr);gap:clamp(1.5rem,4vw,4rem);align-items:start}
.where dl{display:grid;grid-template-columns:auto 1fr;gap:.7rem 1.2rem;font-size:16px}
.where dt{font-weight:700;color:var(--navy)}
.where dd{color:var(--ink-2)}
.where dd a{color:var(--r-blue);font-weight:600}

/* preguntas · la columna derecha se veía vacía (pidió el diseñador, 7-oct) */
.faq-wrap{display:grid;grid-template-columns:minmax(0,1.55fr) minmax(0,1fr);gap:clamp(1.5rem,3vw,3rem);align-items:start}
/* sticky vive dentro de .sec, que usa overflow:clip y no hidden, para que sí pegue */
.help{position:sticky;top:98px;background:#fff;border:1px solid var(--line);border-radius:var(--radius);padding:clamp(1.5rem,2.2vw,2.2rem);
  box-shadow:0 18px 40px rgba(20,30,54,.08);overflow:clip}
.help-rings{position:absolute;right:-18%;top:-26%;width:72%;opacity:.12;pointer-events:none}
.help-ico{width:54px;height:54px;border-radius:16px;display:grid;place-items:center;color:#fff;margin-bottom:1.1rem;
  background:linear-gradient(145deg,var(--r-red),var(--r-orange));position:relative}
.help-ico svg{width:28px;height:28px}
.help h3{position:relative}
.help > p{color:var(--ink-2);margin-bottom:1.4rem;font-size:15.5px;position:relative}
.help-list{list-style:none;display:grid;gap:.75rem;margin-bottom:1.5rem;position:relative}
.help-list li a,.help-list li span{display:block;padding:.8rem 1rem;border-radius:14px;background:var(--wash);border:1px solid var(--line);text-decoration:none;transition:border-color .2s ease}
.help-list li a:hover{border-color:var(--r-blue)}
.help-list b{display:block;font:800 16px/1.3 var(--display);color:var(--navy)}
.help-list small{display:block;font-size:13.5px;color:var(--ink-2);margin-top:.15rem}
.help .btn{width:100%}
.faq{display:grid;gap:.8rem;align-content:start}
.faq details{background:#fff;border:1px solid var(--line);border-radius:16px;padding:1.1rem 1.3rem}
.faq summary{cursor:pointer;font:800 1.08rem/1.35 var(--display);color:var(--navy);list-style:none;display:flex;justify-content:space-between;gap:1rem}
.faq summary::-webkit-details-marker{display:none}
.faq summary::after{content:"+";font-weight:800;color:var(--r-orange);flex:none}
.faq details[open] summary::after{content:"\2212"}
.faq details p{margin-top:.7rem;color:var(--ink-2)}

/* banda de contacto (la única banda oscura) */
.band{background:linear-gradient(140deg,var(--navy-d),var(--navy));color:#fff;position:relative;overflow:hidden}
.band .container{display:grid;grid-template-columns:minmax(0,1.2fr) minmax(0,.8fr);gap:2rem;align-items:center;padding-block:clamp(3.5rem,6vw,6rem)}
.band h2{color:#fff}
.band p{color:rgba(255,255,255,.86);max-width:56ch}
.band .cta-row{justify-content:flex-end}
.band .bg-rings{position:absolute;left:-8%;top:-40%;width:45%;opacity:.12;pointer-events:none}

/* pie */
.foot{background:var(--wash);border-top:1px solid var(--line);padding-block:3rem 2rem;font-size:15px;color:var(--ink-2)}
.foot .container{display:grid;grid-template-columns:1.3fr 1fr 1fr 1fr;gap:2rem}
.foot img{height:40px;width:auto;margin-bottom:1rem;align-self:flex-start}
.foot h4{font:800 14px var(--sans);letter-spacing:.1em;text-transform:uppercase;color:var(--navy);margin-bottom:.8rem}
.foot ul{list-style:none;display:grid;gap:.45rem}
.foot a{color:var(--ink-2);text-decoration:none}
.foot a:hover{color:var(--r-blue)}
.foot .legal{grid-column:1/-1;border-top:1px solid var(--line);padding-top:1.4rem;display:flex;flex-wrap:wrap;gap:1rem;justify-content:space-between;font-size:13.5px}

/* WhatsApp flotante */
.wa-float{position:fixed;right:18px;bottom:18px;z-index:60;width:58px;height:58px;border-radius:50%;background:var(--wa);display:grid;place-items:center;box-shadow:0 10px 26px rgba(0,0,0,.25)}
.wa-float svg{width:30px;height:30px;color:#fff}
.wa-float:hover{background:var(--wa-d)}

/* ── hero con luz (solo escritorio) ───────────────────────
   En 1024 px o más el hero del home pasa a fondo oscuro con luz en movimiento (canvas WebGL a mano,
   sin librerías: el script va al final de index.html). Abajo de 1024 queda igual que siempre.
   El degradado de fondo es el respaldo estático: se ve cuando no hay WebGL o el usuario pidió menos movimiento. */
.luz-canvas{display:none}
@media (min-width:1024px){
  .hero.luz{color:#fff;background:
    radial-gradient(46% 70% at 76% 34%,rgba(150,195,255,.42) 0%,rgba(60,110,230,.22) 38%,rgba(32,64,144,0) 70%),
    radial-gradient(60% 85% at 100% 85%,rgba(32,64,144,.70) 0%,rgba(32,64,144,0) 68%),
    #070b18}
  .hero.luz .luz-canvas{display:block;position:absolute;inset:0;width:100%;height:100%;opacity:0;transition:opacity 1.4s ease}
  .hero.luz .luz-canvas.on{opacity:1}
  .hero.luz .container{position:relative;padding-block:clamp(3rem,5.2vw,5.5rem)}
  .hero.luz h1{color:#fff;font-size:clamp(2.3rem,3.55vw,3.9rem)}
  .hero.luz h1 .hl{background-image:linear-gradient(90deg,#ff7a45,#ffb454)}
  .hero.luz .kick{color:#ffb454}
  .hero.luz .lead{color:rgba(255,255,255,.86)}
  .hero.luz .hero-note{color:rgba(255,255,255,.80);margin-bottom:1.7rem}
  .hero.luz .hero-note span::before{background:#5fd39a}
  .hero.luz .btn:not(.wa){background:#fff;color:var(--navy);box-shadow:0 8px 26px rgba(0,0,0,.38)}
  .hero.luz .btn:not(.wa):hover{box-shadow:0 12px 32px rgba(0,0,0,.48)}
  .hero.luz .btn.wa{box-shadow:inset 0 1px 0 rgba(255,255,255,.18),0 8px 26px rgba(0,0,0,.35)}
  /* la campana cuelga dentro de su propio charco de luz: el multiply de .hero-prod necesita claro detrás */
  .hero.luz .hero-art::before{content:"";position:absolute;left:19%;top:17%;width:62%;height:62%;border-radius:50%;
    background:radial-gradient(closest-side,#fff 0%,rgba(255,246,226,.96) 34%,rgba(255,221,160,.45) 58%,rgba(255,200,120,0) 80%)}
  .hero.luz .chip{box-shadow:0 18px 40px rgba(0,0,0,.35)}
}

/* ── pleca con foto: banda a todo lo ancho con una foto real de fondo (como la de Transxpo) ──
   Velo plano, sin degradado: la foto se tiene que seguir viendo. El contraste lo dan las tarjetas, no el velo. */
.pleca{position:relative;overflow:hidden;background:var(--navy-d);color:#fff;padding-block:clamp(3.5rem,7vw,7rem)}
.pleca-foto{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;object-position:50% 35%}
.pleca::after{content:"";position:absolute;inset:0;background:rgba(10,17,34,.56)}
.pleca .container{position:relative;z-index:1}
/* sombra local detrás del título: oscurece solo ahí, el resto de la foto se queda como está */
.pleca .sec-head{position:relative}
.pleca .sec-head::before{content:"";position:absolute;inset:-1.6rem -3rem -1.2rem -3rem;z-index:-1;background:radial-gradient(ellipse at 35% 50%,rgba(8,14,30,.55) 0%,rgba(8,14,30,.42) 55%,rgba(8,14,30,0) 100%)}
.pleca h2{color:#fff;text-shadow:0 2px 18px rgba(6,10,22,.55)}
.pleca .kick{color:#ffb454}
.pleca .sec-head p{color:#fff;text-shadow:0 1px 12px rgba(6,10,22,.7)}
.pleca .quote{background:rgba(11,18,36,.72);border-color:rgba(255,255,255,.18);-webkit-backdrop-filter:blur(8px);backdrop-filter:blur(8px)}
.pleca .quote blockquote{color:#fff;font-size:clamp(1.5rem,2.3vw,2.2rem);line-height:1.1}
.pleca .quote figcaption{color:rgba(255,255,255,.86)}
.pleca .quote figcaption b{color:#fff}

/* ── contacto: las tres vías en grande ─────────────────────
   /contacto/ es a donde llegan todos los botones "Cotizar" del sitio. WhatsApp, teléfono y correo van en el encabezado,
   en el lugar del arte, como tres botones altos (mínimo 64 px) que se tocan fácil con el pulgar.
   En celular tienen que caber en el primer pantallazo: por eso este encabezado (.hero.contacto) lleva solo título y una
   frase corta, sin botones ni nota debajo del texto, y se aprieta abajo de 560 px. No hay formulario (README, regla 6). */
.hero.contacto .container{position:relative}
/* los anillos del logo, tenues, detrás de las vías; en celular se quitan para no ensuciar los botones */
.hero.contacto .bg-rings{position:absolute;right:-5%;top:50%;transform:translateY(-50%);width:50%;min-width:440px;opacity:.13;pointer-events:none}
.vias{display:grid;gap:.75rem;width:100%;max-width:560px;justify-self:center}
.via{display:flex;align-items:center;gap:1rem;min-height:84px;padding:1rem 1.25rem;border-radius:18px;background:#fff;border:1px solid var(--line);
  box-shadow:0 10px 26px rgba(20,30,54,.08);text-decoration:none;color:var(--ink);transition:transform .2s ease,box-shadow .2s ease,border-color .2s ease}
.via:hover{transform:translateY(-2px);border-color:var(--r-blue);box-shadow:0 16px 34px rgba(20,30,54,.14)}
.via:focus-visible{outline:3px solid var(--r-orange);outline-offset:3px}
.via-ico{flex:none;width:52px;height:52px;border-radius:14px;display:grid;place-items:center;color:#fff}
.via-ico svg{width:26px;height:26px}
.via-txt{display:block;min-width:0}
.via small{display:block;font:700 12.5px/1.4 var(--sans);letter-spacing:.1em;text-transform:uppercase;color:var(--ink-2)}
.via b{display:block;font:800 clamp(1.2rem,1.5vw,1.5rem)/1.25 var(--display);color:var(--navy);overflow-wrap:anywhere}
.via-go{margin-left:auto;flex:none;font:700 1.3rem/1 var(--sans);color:var(--r-blue)}
/* WhatsApp es la vía principal: va rellena. Del verde --wa al --wa-d, que es donde el blanco pasa de 4.9:1 */
.via.wa{background:linear-gradient(180deg,var(--wa) 0%,var(--wa-d) 100%);border-color:transparent;box-shadow:inset 0 1px 0 rgba(255,255,255,.18),0 10px 26px rgba(17,127,115,.28)}
.via.wa small,.via.wa b,.via.wa .via-go{color:#fff}
.via.wa .via-ico{background:rgba(255,255,255,.16)}
.via.wa:hover{border-color:transparent}
.vias .hero-note{margin:.4rem 0 0;gap:.35rem 1.2rem}
@media (max-width:980px){
  .hero.contacto .bg-rings{display:none}
  .hero.contacto .container{gap:1.4rem}
  .hero.contacto .lead{margin-bottom:0}
  .vias{max-width:none}
}
@media (max-width:560px){
  .hero.contacto .container{padding-block:1.5rem 2.2rem;gap:1.2rem}
  .hero.contacto .kick{margin-bottom:.7rem}
  .hero.contacto h1{margin-bottom:.9rem}
  .via{min-height:64px;padding:.65rem .9rem;gap:.8rem;border-radius:16px}
  .via-ico{width:44px;height:44px;border-radius:12px}
  .via-ico svg{width:22px;height:22px}
  .via b{font-size:1.12rem}
  /* en esta página el WhatsApp flotante sobra en celular: WhatsApp ya es el primer botón, y el flotante caía encima
     de la tercera vía en el primer pantallazo. Si el navegador no entiende :has(), el flotante se queda y no pasa nada. */
  main:has(.hero.contacto) ~ .wa-float{display:none}
}
/* en pantallas muy angostas se quita la flecha y baja un punto la letra para que el correo quepa en un renglón */
@media (max-width:380px){.via-go{display:none}.via b{font-size:1rem}}
/* lista de datos dentro de una tarjeta .flow .step (qué conviene traer, en /contacto/): el mismo punto en anillo de las listas de .line */
.datos{list-style:none;display:grid;gap:.55rem;margin:.3rem 0 1.1rem}
.datos li{position:relative;padding-left:1.4rem;color:var(--ink-2)}
.datos li::before{content:"";position:absolute;left:0;top:.6em;width:9px;height:9px;border-radius:50%;border:2px solid var(--r-orange)}
.datos b{color:var(--navy)}
.flow .step .cta-row{margin-top:1.1rem}

/* ── documento legal (aviso de privacidad): texto largo con encabezados y listas, a ancho de lectura (~70 caracteres) ── */
.legal-doc{max-width:72ch}
.legal-doc h2{font-size:clamp(1.35rem,2vw,1.8rem);line-height:1.2;margin:clamp(2rem,4vw,3rem) 0 .7rem}
.legal-doc h2:first-child{margin-top:0}
.legal-doc h3{font-size:1.1rem;margin:1.4rem 0 .5rem}
.legal-doc p{color:var(--ink-2);margin-bottom:1rem;overflow-wrap:anywhere}
.legal-doc ul{margin:0 0 1.1rem;padding-left:1.4rem;color:var(--ink-2)}
.legal-doc li{margin-bottom:.45rem;padding-left:.2rem}
.legal-doc a{color:var(--r-blue);text-decoration:underline}
.legal-doc .legal-fecha{margin-top:2.2rem;font-size:.95rem;color:var(--navy);font-weight:600}

/* ── responsivo ─────────────────────────────────────────── */
@media (max-width:1180px){
  .nav{gap:1.1rem}.nav a,.nav-btn{font-size:14px}
  .steps{grid-template-columns:repeat(3,minmax(0,1fr))}
}
@media (max-width:1120px){
  .nav{display:none}
  .nav.open{display:flex;position:absolute;top:74px;left:0;right:0;flex-direction:column;align-items:flex-start;background:#fff;padding:1rem var(--pad) 1.4rem;border-bottom:1px solid var(--line);gap:1rem;max-height:calc(100vh - 74px);max-height:calc(100dvh - 74px);overflow-y:auto;overscroll-behavior:contain}
  .menu-btn{display:block;min-height:44px}
  .nav.open>a:not(.btn){display:flex;align-items:center;min-height:44px}
  .nav.open>.btn{min-height:44px}
  .nav-item{width:100%}
  .nav-btn{width:100%;height:auto;min-height:44px;justify-content:space-between;font-size:15px}
  .nav-btn[aria-current],.nav-btn[aria-expanded="true"]{box-shadow:none}
  .mega{position:static;box-shadow:none;border:0;max-height:none;overflow:visible}
  .has-mega.is-open>.mega{animation:none}
  html:not(.mm-js) .has-mega:hover>.mega,html:not(.mm-js) .has-mega:focus-within>.mega{display:none}
  .top .mega-in{display:block;padding:0 0 .6rem .75rem}
  .mega-head{display:flex}
  .mega-kick,.mega-title,.mega-line,.mega-d,.mega-photo{display:none}
  .nav .mega a.mega-all{margin-top:0;min-height:44px;padding-block:.4rem}
  .mega-list{display:block}
  .nav .mega a.mega-link{display:flex;align-items:center;min-height:44px;padding:.4rem .75rem .4rem 0;border-radius:0}
  .nav .mega a.mega-link:hover,.nav .mega a.mega-link[aria-current="page"]{background:none}
}
@media (max-width:980px){
  .hero .container{grid-template-columns:1fr}
  .hero-art{max-width:460px}
  .lines{grid-template-columns:1fr}
  .line.big,.line.half,.lines.dos .line.big,.lines.dos .line.half{grid-column:auto;grid-row:auto}
  /* .flow.dos va nombrada aparte: su regla de dos columnas pesa más que .flow y en celular se quedaba en dos columnas angostas */
  .flow,.flow.dos,.apps,.proj,.quotes{grid-template-columns:1fr}
  .steps{grid-template-columns:repeat(2,minmax(0,1fr))}
  .where{grid-template-columns:1fr}
  .faq-wrap{grid-template-columns:1fr}
  .help{position:static;top:auto}
  .brands-sec .bg-rings{display:none}
  .band .container{grid-template-columns:1fr}
  .band .cta-row{justify-content:flex-start}
  .foot .container{grid-template-columns:1fr 1fr}
}
@media (max-width:560px){
  body{font-size:16px}
  .brand img{height:34px}
  .chip{max-width:200px;padding:.6rem .75rem}.chip b{font-size:14px}.chip small{display:none}
  .chip .dot{width:32px;height:32px}
  .chip.c1{left:0}.chip.c2{right:0}
  .steps{grid-template-columns:1fr}
  .foot .container{grid-template-columns:1fr}
  .btn{width:100%}
  .cta-row{width:100%}
}
@media (prefers-reduced-motion:reduce){
  *,*::before,*::after{animation:none!important;transition:none!important;scroll-behavior:auto!important}
}

/* ── calculadora de ahorro (sección oscura; _partials/calculadora-led.html) ── */
.sec.calc-sec{background:radial-gradient(900px 520px at 88% 8%,#2a3f73 0%,var(--navy) 46%,var(--navy-d) 100%);color:#fff;scroll-margin-top:84px}
.calc-sec .bg-rings{position:absolute;right:-6%;top:-18%;width:min(620px,60vw);opacity:.16;pointer-events:none}
.calc-sec .container{position:relative}
.calc-sec h2{color:#fff}
.calc-sec .kick{color:#ffb454}
.calc-sec .sec-head p{color:rgba(255,255,255,.86)}
.calc{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1.05fr);gap:clamp(1.2rem,2.4vw,2.4rem);align-items:stretch}
.calc-form{background:#fff;color:var(--ink);border-radius:var(--radius);padding:clamp(1.3rem,2.2vw,2.2rem);display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:1.1rem 1.2rem;align-content:start}
.calc-f{display:flex;flex-direction:column;gap:.4rem;min-width:0}
.calc-f.ancho{grid-column:1/-1}
.calc-f span{font:700 15px/1.3 var(--sans);color:var(--navy)}
.calc-f small{font-size:13.5px;line-height:1.35;color:var(--ink-2)}
.calc-f input{width:100%;font:700 20px/1.2 var(--display);color:var(--navy);padding:.8rem .9rem;border:2px solid var(--line);border-radius:12px;background:#fff;-moz-appearance:textfield;appearance:textfield}
.calc-f input::-webkit-outer-spin-button,.calc-f input::-webkit-inner-spin-button{-webkit-appearance:none;margin:0}
.calc-f input:focus-visible{outline:3px solid var(--r-orange);outline-offset:2px;border-color:var(--navy)}
.calc-out{background:rgba(9,15,32,.55);border:1px solid rgba(255,255,255,.18);border-radius:var(--radius);padding:clamp(1.4rem,2.4vw,2.6rem);display:flex;flex-direction:column;align-items:flex-start;min-width:0}
.calc-k{font:700 13px var(--sans);letter-spacing:.12em;text-transform:uppercase;color:rgba(255,255,255,.8)}
.calc-n{font:800 clamp(1.7rem,2.6vw,2.5rem)/1.1 var(--display);color:#fff;margin:.25rem 0 1.4rem;overflow-wrap:anywhere}
.calc-n.big{font-size:clamp(2.5rem,5.2vw,4.6rem);color:#ffb454;margin-bottom:.3rem}
.calc-s{font-size:1.08rem;color:rgba(255,255,255,.9);margin-bottom:1.6rem}
.calc-s b{color:#fff}
.calc-nota{font-size:13.5px;line-height:1.5;color:rgba(255,255,255,.74);margin-top:1.3rem}
@media (max-width:900px){.calc{grid-template-columns:1fr}}
@media (max-width:420px){.calc-form{grid-template-columns:1fr}}

/* ── formulario de contacto (FormSubmit → ventas@) ───────────────────────
   Dos columnas en escritorio, una en celular. Campos de 16 px para que el celular no haga zoom al enfocarlos.
   .hp es el señuelo anti spam (_honey): fuera de la vista y del teclado, sin display:none para que los bots lo llenen. */
.formulario{display:grid;grid-template-columns:minmax(0,.8fr) minmax(0,1.2fr);column-gap:clamp(2rem,5vw,5rem);align-items:start}
.formulario .sec-head{grid-column:1;grid-row:1;margin-bottom:0}
.formulario .cform{grid-column:2;grid-row:1 / span 2}
.formulario-extra{grid-column:1;grid-row:2;margin-top:1.8rem}
.formulario-extra .datos{margin:0}
.cform{display:grid;grid-template-columns:1fr 1fr;gap:1.1rem 1.4rem}
.cform .full{grid-column:1/-1}
.cform label{display:block;font:700 15px/1.3 var(--sans);color:var(--navy);margin-bottom:.4rem}
.cform input,.cform select,.cform textarea{width:100%;font:500 16px/1.4 var(--sans);color:var(--ink);padding:.8rem .9rem;border:2px solid var(--line);border-radius:12px;background:#fff}
.cform textarea{min-height:140px;resize:vertical}
.cform input:focus-visible,.cform select:focus-visible,.cform textarea:focus-visible{outline:3px solid var(--r-orange);outline-offset:2px;border-color:var(--navy)}
.cform .hp{position:absolute;left:-9999px;width:1px;height:1px;opacity:0}
.cform .nota{font-size:14px;line-height:1.5;color:var(--ink-2);margin:0}
.cform .nota a{color:var(--navy);font-weight:600}
/* texto a la izquierda y campos a la derecha; en tableta angosta los campos pasan a una columna y en celular el texto va arriba */
@media (min-width:901px) and (max-width:1100px){.cform{grid-template-columns:1fr}}
@media (max-width:900px){.formulario{grid-template-columns:1fr}.formulario .sec-head,.formulario .cform,.formulario-extra{grid-column:1;grid-row:auto}.formulario .sec-head{margin-bottom:1.6rem}.formulario-extra{margin-top:2.2rem}}
@media (max-width:640px){.cform{grid-template-columns:1fr}}