/* Carga en Casa · generado por molde/generador.py desde marca.json: no editar a mano */
@font-face{font-family:"Archivo";src:url("/fonts/archivo-v25-latin.woff2") format("woff2");font-weight:500 700;font-style:normal;font-display:swap;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}
:root{
  --f-display:"Archivo",ui-sans-serif,system-ui,-apple-system,"Segoe UI",Roboto,sans-serif;
  --f-cuerpo:ui-sans-serif,system-ui,-apple-system,"Segoe UI",Roboto,sans-serif;
  --radio:12px;
  --acento:#173a4d;
  --acento-hover:#143344;
  --acento-suave:#dcefe5;
  --acento-texto:#0a6446;
  --acento-vivo:#f2b705;
  --banda:#0f1c24;
  --banda-acento:#f2b705;
  --banda-linea:#414c51;
  --banda-tinta:#f2f5f1;
  --banda-tinta-2:#b9c6cc;
  --foco:#0a6446;
  --linea:#dde3dc;
  --linea-2:#7a8983;
  --papel:#f5f7f2;
  --papel-2:#ecf0e9;
  --papel-3:#e1e7de;
  --sobre-acento:#ffffff;
  --sobre-wa:#ffffff;
  --sombra:rgb(20 20 30 / .28);
  --superficie:#ffffff;
  --tinta:#0f1c24;
  --tinta-2:#3e4e57;
  --tinta-3:#4a5a63;
  --wa:#0d7a3e;
  --wa-hover:#0b6b37;
  color-scheme:light;
}
@media (prefers-color-scheme: dark){
:root{
  --acento:#9fd0e6;
  --acento-hover:#abd6e9;
  --acento-suave:#163a2e;
  --acento-texto:#6fdcb2;
  --acento-vivo:#ffc933;
  --banda:#081015;
  --banda-acento:#ffc933;
  --banda-linea:#394145;
  --banda-tinta:#e6edf0;
  --banda-tinta-2:#afbec6;
  --foco:#6fdcb2;
  --linea:#24313a;
  --linea-2:#62767f;
  --papel:#0e151a;
  --papel-2:#131c22;
  --papel-3:#1a252d;
  --sobre-acento:#0e151a;
  --sobre-wa:#04230f;
  --sombra:rgb(0 0 0 / .45);
  --superficie:#16202a;
  --tinta:#e6edf0;
  --tinta-2:#bac7ce;
  --tinta-3:#9fb0b8;
  --wa:#25c26a;
  --wa-hover:#3fc97c;
  color-scheme:dark;
}
}
/* ============================================================================
   Molde red 2026 · hoja base compartida por los 8 sitios.
   Los tokens de color y las fuentes NO viven aquí: generador.py los antepone desde el
   marca.json de cada sitio (paleta clara + oscura). Aquí solo se usan var(--...).
   Origen de cada pieza:
   - banner móvil (texto > botones > foto en tarjeta > franja 2x2) y hero a sangre con velo en
     escritorio: integrametal.cl (hero--bleed, franja).
   - nav de vidrio, H1 con palabra resaltada, chips que abren el popover de WhatsApp, botón
     Llamar de dos líneas con el número, sellos bajo el CTA, hoja modal con CTA pegado al fondo:
     destapando.cl / asvrgruas (estándar de diseño móvil 4.1, 4.2, 4.8, 4.9).
   - barra fija móvil + barra de escritorio abajo a la derecha: integrametal (.barra/.barra-esc).
   CSP estricta: ni un style="" en el HTML; todo sale de esta hoja.
   ========================================================================== */

*,*::before,*::after{box-sizing:border-box}
html{overflow-x:clip;-webkit-text-size-adjust:100%;scroll-padding-top:88px}
body{margin:0;overflow-x:clip;font-family:var(--f-cuerpo);font-size:1.0625rem;line-height:1.6;color:var(--tinta);background:var(--papel);-webkit-font-smoothing:antialiased}
img{max-width:100%;height:auto;display:block}
a{color:var(--acento-texto);text-underline-offset:.18em}
a:hover{text-decoration-thickness:2px}
:focus-visible{outline:2px solid var(--foco);outline-offset:3px}
p{margin:0 0 1em}
p,li{text-wrap:pretty}
figure{margin:0}
figcaption{margin-top:8px;font-size:.8125rem;line-height:1.4;color:var(--tinta-3)}
h1,h2,h3{margin:0;font-family:var(--f-display);font-weight:700;letter-spacing:-.022em;line-height:1.08;text-wrap:balance;overflow-wrap:break-word}
h1{font-size:clamp(2.2rem,3.4vw + .9rem,3.9rem)}
h2{font-size:clamp(1.6rem,1.6vw + 1rem,2.35rem);line-height:1.12}
h3{font-size:1.25rem;line-height:1.25;letter-spacing:-.01em}
ul,ol{padding-left:1.2em}
.wrap{max-width:1180px;margin-inline:auto;padding-inline:16px}
@media(min-width:700px){.wrap{padding-inline:24px}}
.lede{font-size:1.15rem;line-height:1.5;color:var(--tinta-2);max-width:56ch}
.kicker{font-family:var(--f-cuerpo);font-weight:600;font-size:.95rem;letter-spacing:0;color:var(--acento-texto);margin:0 0 .5rem}
.hl{color:var(--acento-texto);background:linear-gradient(transparent 72%,var(--acento-suave) 72%,var(--acento-suave) 94%,transparent 94%);padding:0 .06em;-webkit-box-decoration-break:clone;box-decoration-break:clone}
.sr{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap}
.skip{position:absolute;left:0;top:0;transform:translateY(-150%);z-index:100;padding:.6rem 1rem;background:var(--tinta);color:var(--papel);border-radius:0 0 8px 0}
.skip:focus{transform:none}
#contenido:focus,#contenido:focus-visible{outline:none}
.aviso-demo{margin:0;padding:.5rem 16px;background:var(--tinta);color:var(--papel);font-size:.875rem;text-align:center}

/* ---------- botones ---------- */
.btn{display:inline-flex;align-items:center;justify-content:center;gap:.55rem;min-height:48px;padding:.75rem 1.2rem;font-family:var(--f-cuerpo);font-weight:700;font-size:1rem;line-height:1.15;border-radius:var(--radio);border:1.5px solid transparent;cursor:pointer;text-decoration:none;transition:background-color .18s ease,border-color .18s ease,transform .18s ease,box-shadow .18s ease;position:relative;overflow:hidden}
.btn:hover{text-decoration:none}
.btn:active{transform:translateY(1px)}
.btn svg{width:22px;height:22px;flex:none}
.btn-wa{background:var(--wa);color:var(--sobre-wa)}
.btn-wa:hover{background:var(--wa-hover);color:var(--sobre-wa)}
.btn-tel{background:var(--acento);color:var(--sobre-acento)}
.btn-tel:hover{background:var(--acento-hover);color:var(--sobre-acento)}
.btn-borde{background:var(--superficie);color:var(--tinta);border-color:var(--linea-2)}
.btn-borde:hover{border-color:var(--tinta);color:var(--tinta)}
/* brillo al pasar el mouse (capa de magia mínima, solo CSS) */
@media(hover:hover){.btn-wa::after,.btn-tel::after{content:"";position:absolute;inset:0;background:linear-gradient(110deg,transparent 30%,rgb(255 255 255 / .18) 50%,transparent 70%);transform:translateX(-120%);transition:transform .6s ease}.btn-wa:hover::after,.btn-tel:hover::after{transform:translateX(120%)}}
/* Llamar de dos líneas (destapando): la acción arriba, el número abajo */
.btn-2l{flex-direction:row;text-align:left}
.btn-2l .l1{display:block;font-size:1rem;letter-spacing:.01em}
.btn-2l .l2{display:block;font-size:.875rem;font-weight:600;opacity:.95;font-variant-numeric:tabular-nums}
.btn-grande{min-height:56px;font-size:1.06rem;padding:.8rem 1.35rem}

/* ---------- nav de vidrio (destapando 4.1) que flota al bajar (integrametal N10) ---------- */
.nav{position:sticky;top:0;z-index:40;transition:padding .26s ease}
.nav__in{position:relative;max-width:1180px;margin-inline:auto;padding:.55rem 16px;display:flex;align-items:center;gap:.75rem;background:color-mix(in srgb,var(--papel) 86%,transparent);backdrop-filter:blur(12px) saturate(1.3);-webkit-backdrop-filter:blur(12px) saturate(1.3);border-bottom:1px solid var(--linea);transition:border-radius .26s ease,box-shadow .26s ease,max-width .26s ease}
.nav.flota .nav__in{box-shadow:0 10px 28px -16px var(--sombra)}
@media(min-width:901px){
  .nav.flota{padding:10px 16px}
  .nav.flota .nav__in{max-width:1080px;border-radius:999px;border:1px solid var(--linea);padding:.4rem .5rem .4rem 1.1rem}
}
.marca{display:inline-flex;align-items:center;gap:.55rem;min-height:44px;color:var(--tinta);text-decoration:none;font-family:var(--f-display);font-weight:700;font-size:1.12rem;letter-spacing:-.015em;line-height:1.1;margin-right:auto}
.marca img{width:34px;height:34px;flex:none}
.marca:hover{text-decoration:none}
.nav__links{display:flex;align-items:center;gap:.15rem;list-style:none;margin:0;padding:0}
.nav__links a{display:inline-flex;align-items:center;min-height:44px;padding:0 .8rem;border-radius:999px;color:var(--tinta-2);font-weight:600;font-size:.9375rem;text-decoration:none;white-space:nowrap}
.nav__links a:hover,.nav__links a[aria-current="page"]{color:var(--tinta);background:var(--papel-2)}
.nav__cta{display:flex;gap:.5rem;align-items:center}
.nav__cta .btn{min-height:44px;padding:.55rem 1rem;font-size:.9375rem}
.nav__menu-tel{display:none}
.nav__burger{display:none;flex:none;width:44px;height:44px;border:1px solid var(--linea-2);border-radius:10px;background:transparent;cursor:pointer;flex-direction:column;align-items:center;justify-content:center;gap:5px;padding:0}
.nav__burger span{display:block;width:18px;height:2px;background:var(--tinta);border-radius:2px}
@media(max-width:900px){
  .nav__links{display:none}
  .nav__cta .btn-borde{display:none}
  .nav__burger{display:flex}
  .nav.abierto .nav__links{display:flex;position:absolute;left:12px;right:12px;top:calc(100% + 6px);flex-direction:column;align-items:stretch;background:var(--superficie);border:1px solid var(--linea);border-radius:14px;padding:.5rem;box-shadow:0 18px 40px -20px var(--sombra)}
  .nav.abierto .nav__links a{min-height:48px;font-size:1rem;border-radius:10px}
  .nav__menu-tel{display:block}
  .nav.abierto .nav__burger{background:var(--papel-2)}
}
.marca span{white-space:nowrap}
@media(max-width:420px){.marca{min-width:0}.marca span{font-size:1rem;white-space:normal;min-width:0}.nav__cta .btn{padding:.55rem .8rem}}
@media(max-width:360px){.nav__cta .btn-wa span{display:none}}

/* ---------- hero ---------- */
.hero{position:relative;isolation:isolate}
.hero__texto h1{max-width:15ch}
.hero__texto .lede{margin-top:1rem}
.hero__cta{display:flex;flex-wrap:wrap;gap:.6rem;margin-top:1.4rem}
.chips-hero{display:flex;flex-wrap:wrap;gap:.45rem;list-style:none;margin:1rem 0 0;padding:0}
.sellos{display:flex;flex-wrap:wrap;gap:.35rem 1.1rem;list-style:none;margin:1rem 0 0;padding:0;font-size:.9rem;color:var(--tinta-2)}
.sellos li{display:inline-flex;align-items:center;gap:.4rem}
.sellos svg{width:18px;height:18px;color:var(--acento-texto);flex:none}
/* entrada del titular: solo CSS, se apaga con reduced-motion */
@keyframes sube{from{opacity:0;transform:translateY(10px)}to{opacity:1;transform:none}}
.hero__texto>*{animation:sube .55s cubic-bezier(.16,1,.3,1) both}
.hero__texto>*:nth-child(2){animation-delay:.05s}.hero__texto>*:nth-child(3){animation-delay:.1s}.hero__texto>*:nth-child(4){animation-delay:.15s}.hero__texto>*:nth-child(5){animation-delay:.2s}

/* banner de la home: a sangre con velo en escritorio (integrametal), apilado en móvil */
.hero--banner{background:var(--papel-2)}
.hero__foto{position:absolute;inset:0;z-index:-1;overflow:hidden}
.hero__foto img{width:100%;height:100%;object-fit:cover}
.hero__foto::after{content:"";position:absolute;inset:0;background:linear-gradient(90deg,color-mix(in srgb,var(--papel) 97%,transparent) 0%,color-mix(in srgb,var(--papel) 93%,transparent) 36%,color-mix(in srgb,var(--papel) 62%,transparent) 54%,transparent 74%)}
.hero--banner .hero__in{padding-top:5rem;padding-bottom:5.5rem;min-height:560px;display:flex;align-items:center}
.hero--banner .hero__texto{max-width:35rem}
.hero--banner .lede{color:var(--tinta)}
.franja{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));background:var(--superficie);border:1px solid var(--linea);border-radius:calc(var(--radio) + 4px);box-shadow:0 18px 40px -26px var(--sombra);margin:0 0 -2.75rem;position:relative;z-index:1}
.franja div{padding:1.1rem 1.25rem;display:flex;flex-direction:column;gap:.25rem}
.franja div+div{border-left:1px solid var(--linea)}
.franja b{font-family:var(--f-display);font-size:1.3rem;letter-spacing:-.015em;line-height:1.1;color:var(--acento-texto)}
.franja span{font-size:.9rem;color:var(--tinta-2);line-height:1.35}
.hero--banner+*{padding-top:calc(2.75rem + 3.5rem)}
@media(max-width:900px){
  .hero--banner{display:flex;flex-direction:column;background:var(--papel)}
  .hero--banner .hero__in{order:1;padding-top:1.6rem;padding-bottom:1.1rem;min-height:0}
  .hero--banner .hero__foto{position:static;order:2;margin:0 16px;border-radius:calc(var(--radio) + 4px);overflow:hidden;aspect-ratio:4/3;z-index:0}
  .hero--banner .hero__foto::after{display:none}
  .hero--banner>.wrap{width:100%}
  .hero--banner>.wrap:last-child{order:3}
  .franja{grid-template-columns:repeat(2,minmax(0,1fr));margin:1rem 0 0;box-shadow:none}
  .franja div{padding:.9rem 1rem}
  .franja div:nth-child(3){border-left:0}
  .franja div:nth-child(n+3){border-top:1px solid var(--linea)}
  .franja b{font-size:1.12rem}
  .hero--banner+*{padding-top:3rem}
}
@media(max-width:700px){
  h1{font-size:2.15rem}
  .hero__texto h1{max-width:none}
  .lede{font-size:1.04rem}
  .hero__cta{display:grid;grid-template-columns:minmax(0,1fr);gap:.55rem}
  .hero__cta .btn{width:100%}
}

/* banner móvil con escena (opt-in: "foto_movil" en la home). Escritorio: igual al banner de siempre.
   Móvil: foto vertical a sangre, titular sobre el cielo con un velo oscuro arriba, la foto se funde
   con el papel abajo y la bajada + botones quedan justo debajo, sobre el pliegue en 390x844. */
.hero--escena picture{display:block;width:100%;height:100%}
@media(max-width:900px){
  .hero--escena{display:block;--escena-h:min(108vw,560px)}
  .hero--escena .hero__foto{position:absolute;inset:0 0 auto 0;height:var(--escena-h);margin:0;border-radius:0;aspect-ratio:auto;z-index:-1}
  .hero--escena .hero__foto img{object-position:50% 70%}
  .hero--escena .hero__foto::after{display:block;background:linear-gradient(180deg,color-mix(in srgb,var(--banda) 92%,transparent) 0%,color-mix(in srgb,var(--banda) 84%,transparent) 22%,color-mix(in srgb,var(--banda) 58%,transparent) 34%,color-mix(in srgb,var(--banda) 12%,transparent) 48%,transparent 58%,transparent 80%,var(--papel) 100%)}
  .hero--escena .hero__in{padding-top:1.3rem}
  .hero--escena .hero__sobre{min-height:calc(var(--escena-h) - 1.6rem)}
  .hero--escena .hero__sobre h1,.hero--escena .hero__sobre .kicker{color:var(--banda-tinta);text-shadow:0 1px 14px rgb(0 0 0 / .35)}
  .hero--escena .hero__sobre .hl{color:var(--banda-acento);background:none}
  .hero--escena .hero__bajo .lede{margin-top:0}
}

/* interior: díptico texto + foto (integrametal H2); en móvil, la foto va DESPUÉS de los botones */
.hero--interior{padding:1.4rem 0 2.5rem}
.hero--interior .hero__grid{display:grid;grid-template-columns:minmax(0,56fr) minmax(0,44fr);gap:3rem;align-items:center}
.hero--interior .hero__media img{width:100%;aspect-ratio:5/4;object-fit:cover;border-radius:calc(var(--radio) + 4px)}
.hero--interior h1{font-size:clamp(2.1rem,2.4vw + 1rem,3.3rem);max-width:20ch}
.hero--interior .franja{margin:2.2rem 0 0;box-shadow:none}
@media(max-width:900px){
  .hero--interior{padding:1rem 0 2rem}
  .hero--interior .hero__grid{grid-template-columns:minmax(0,1fr);gap:1.2rem}
  .hero--interior .hero__media img{aspect-ratio:4/3}
  .hero--interior h1{font-size:2rem}
}
/* artículo (guía y blog): hero compacto y foto ancha debajo */
.hero--articulo{padding:1.2rem 0 1.5rem}
.hero--articulo h1{font-size:clamp(2rem,2vw + 1.1rem,3.1rem);max-width:24ch}
.hero--articulo .meta{display:flex;flex-wrap:wrap;gap:.3rem 1rem;margin:.9rem 0 0;padding:0;list-style:none;font-size:.9rem;color:var(--tinta-3)}
.hero--articulo .hero__cta{margin-top:1.1rem}
.foto-articulo img{width:100%;aspect-ratio:16/8;object-fit:cover;border-radius:calc(var(--radio) + 4px)}
@media(max-width:700px){.foto-articulo img{aspect-ratio:4/3}.hero--articulo h1{font-size:1.9rem}}
.hero--simple{padding:1.4rem 0 1rem}
.hero--simple h1{font-size:clamp(2rem,2vw + 1rem,2.8rem)}

/* migas */
.miga{font-size:.875rem;color:var(--tinta-3);margin:0 0 1rem}
.miga ol{list-style:none;margin:0;padding:0;display:flex;flex-wrap:wrap;gap:.1rem .35rem}
.miga li{display:inline-flex;align-items:center}
.miga li+li::before{content:"/";margin-right:.35rem;color:var(--linea-2)}
.miga a{color:var(--tinta-2);display:inline-flex;align-items:center;min-height:32px}

/* ---------- chips (comunas y servicios) + popover de WhatsApp (destapando 4.8) ---------- */
.chips{display:flex;flex-wrap:wrap;gap:.5rem;list-style:none;margin:0;padding:0}
.chip{display:inline-flex;align-items:center;gap:.35rem;min-height:44px;padding:.45rem .95rem;border-radius:999px;border:1px solid var(--linea-2);background:var(--superficie);color:var(--tinta);font:inherit;font-size:.95rem;font-weight:600;line-height:1.2;cursor:pointer;text-decoration:none;transition:border-color .18s ease,background-color .18s ease}
.chip:hover{border-color:var(--acento-texto);color:var(--tinta);text-decoration:none}
a.chip{color:var(--acento-texto);border-color:var(--acento-texto)}
a.chip::after{content:"→";font-weight:700}
.chip--extra{display:inline-flex}
.js .chip--extra{display:none}
.cobertura__mas{margin-top:1rem}
.pop-velo{position:fixed;inset:0;z-index:2147483600;background:transparent}
.pop-velo[hidden]{display:none}
.pop{position:fixed;left:16px;top:16px;background:var(--superficie);border:1px solid var(--linea);border-radius:16px;padding:.6rem;box-shadow:0 20px 44px -18px var(--sombra);opacity:0;transform:translateY(4px) scale(.98);transition:opacity .16s ease,transform .16s ease;max-width:calc(100vw - 16px)}
.pop-velo.abierto .pop{opacity:1;transform:none}
.pop::after{content:"";position:absolute;left:var(--flecha-x,50%);bottom:-7px;width:14px;height:14px;margin-left:-7px;background:var(--superficie);border-right:1px solid var(--linea);border-bottom:1px solid var(--linea);transform:rotate(45deg)}
.pop.abajo::after{bottom:auto;top:-7px;transform:rotate(225deg)}
.pop .btn{white-space:nowrap}

/* ---------- hoja modal desde abajo (asvrgruas #infoModal/.cml-sheet): CTA pegado al fondo ---------- */
.hoja{position:fixed;inset:0;z-index:2147483590;display:flex;align-items:flex-end;justify-content:center;background:rgb(10 12 14 / .5);backdrop-filter:blur(3px);-webkit-backdrop-filter:blur(3px);opacity:0;transition:opacity .22s ease}
.hoja[hidden]{display:none}
.hoja.abierta{opacity:1}
.hoja__panel{width:100%;max-width:560px;max-height:86vh;display:flex;flex-direction:column;background:var(--superficie);color:var(--tinta);border-radius:22px 22px 0 0;transform:translateY(100%);transition:transform .3s cubic-bezier(.16,1,.3,1);overflow:hidden}
.hoja.abierta .hoja__panel{transform:none}
@media(min-width:600px){.hoja{align-items:center}.hoja__panel{border-radius:22px}}
.hoja__cab{position:relative;padding:1.2rem 3.6rem .9rem 1.25rem;border-bottom:1px solid var(--linea)}
.hoja__cab h2{font-size:1.35rem}
.hoja__cab p{margin:.3rem 0 0;color:var(--tinta-2);font-size:.95rem}
.hoja__x{position:absolute;right:.6rem;top:.6rem;width:44px;height:44px;border-radius:50%;border:1px solid var(--linea);background:var(--papel-2);color:var(--tinta);cursor:pointer;display:grid;place-items:center}
.hoja__x svg{width:20px;height:20px}
.hoja__cuerpo{padding:1rem 1.25rem;overflow-y:auto;overscroll-behavior:contain}
.hoja__pie{padding:.8rem 1.25rem calc(.8rem + env(safe-area-inset-bottom));border-top:1px solid var(--linea);background:var(--superficie)}
.hoja__pie .btn{width:100%}

/* ---------- secciones ---------- */
.seccion{padding:4.5rem 0}
.seccion--alt{background:var(--papel-2)}
@media(max-width:900px){.seccion{padding:3rem 0}}
.cabeza{max-width:62ch;margin-bottom:1.8rem}
.cabeza p{color:var(--tinta-2);margin:.7rem 0 0;font-size:1.08rem}
.prosa{max-width:68ch}
.con-foto figure{margin-top:1.4rem}
.con-foto figure img{border-radius:calc(var(--radio) + 4px);width:100%;aspect-ratio:4/3;object-fit:cover}
@media(min-width:1000px){.con-foto{display:grid;grid-template-columns:minmax(0,7fr) minmax(0,5fr);column-gap:clamp(3rem,5vw,5rem);align-items:start}.con-foto .prosa{max-width:none}.con-foto figure{margin-top:0;position:sticky;top:110px}.con-foto figure img{aspect-ratio:4/5}}
/* dos columnas en escritorio (home, FAQ, formulario, precios): el título queda fijo a la
   izquierda y el contenido a la derecha. Antes cada bloque era una columna de 68ch con media
   pantalla vacía al lado, lo que más delataba "plantilla". */
.split--faq .cabeza .btn{margin-top:1.1rem;text-decoration:none}
@media(min-width:1000px){
  .split{display:grid;grid-template-columns:minmax(0,5fr) minmax(0,7fr);column-gap:clamp(3rem,6vw,6rem);row-gap:0;align-items:start}
  .split>.cabeza{grid-column:1;grid-row:1/span 4;position:sticky;top:110px;margin-bottom:0}
  .split>:not(.cabeza){grid-column:2}
  .split>:not(.cabeza)+:not(.cabeza){margin-top:1.2rem}
  .split .prosa,.split .faq,.split .form,.split .precios{max-width:none}
  .split>.prosa>:first-child{margin-top:0}
  .split .form{margin-top:0}
}
.prosa p,.prosa li{color:var(--tinta-2)}
.prosa strong{color:var(--tinta)}
.prosa p a,.prosa li a,.cabeza a,.faq .resp a,.dato a,.aviso-precios a,.fuentes a{text-decoration:underline}
.prosa h2{margin:0 0 .9rem}
.prosa h3{margin:1.4rem 0 .5rem}
.prosa ul{margin:0 0 1em}
.prosa li{margin:.3rem 0}

/* cuerpo de las interiores: texto + caja de contacto pegajosa al costado */
.cuerpo{display:grid;grid-template-columns:minmax(0,1fr) 340px;gap:3.5rem;align-items:start;padding-top:3rem;padding-bottom:3rem}
.cuerpo__main>.bloque+.bloque{margin-top:3rem;padding-top:3rem;border-top:1px solid var(--linea)}
.cuerpo__aside{position:sticky;top:96px}
@media(max-width:960px){.cuerpo{grid-template-columns:minmax(0,1fr);gap:2.5rem;padding-top:2rem}.cuerpo__aside{position:static}}
.caja-cta{background:var(--superficie);border:1px solid var(--linea);border-radius:calc(var(--radio) + 6px);padding:1.4rem;box-shadow:0 16px 36px -28px var(--sombra)}
.caja-cta h2{font-size:1.3rem;margin-bottom:.5rem}
.caja-cta p{color:var(--tinta-2);font-size:.95rem}
.caja-cta ul{list-style:none;padding:0;margin:0 0 1rem;display:grid;gap:.45rem;font-size:.95rem;color:var(--tinta-2)}
.caja-cta li{display:flex;gap:.5rem;align-items:flex-start}
.caja-cta li svg{width:18px;height:18px;flex:none;margin-top:.2rem;color:var(--acento-texto)}
.caja-cta .btn{width:100%;margin-top:.5rem}
.caja-cta__links{margin-top:1rem;padding-top:1rem;border-top:1px solid var(--linea)}
.caja-cta__links h3{font-size:1rem;margin-bottom:.4rem}
.caja-cta__links ul{margin:0}
.caja-cta__links a{display:inline-flex;align-items:center;min-height:44px}

/* ---------- tarjetas de servicios (asvrgruas .serv-card + integrametal .tarjeta) ---------- */
.tarjetas{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:1.1rem;list-style:none;margin:0;padding:0}
.tarjeta{display:flex;flex-direction:column;height:100%;border:1px solid var(--linea);border-radius:calc(var(--radio) + 4px);overflow:hidden;background:var(--superficie);color:var(--tinta);text-decoration:none;transition:border-color .18s ease,transform .18s ease}
.tarjeta:hover{text-decoration:none;border-color:var(--tinta-3);transform:translateY(-2px)}
.tarjeta img{width:100%;aspect-ratio:4/3;object-fit:cover}
.tarjeta__t{display:flex;justify-content:space-between;gap:.8rem;padding:1rem 1.1rem 0;font-family:var(--f-display);font-weight:700;font-size:1.15rem;line-height:1.2;letter-spacing:-.01em}
.tarjeta__t i{font-style:normal;color:var(--acento-texto)}
/* tarjeta sin página propia (todavía): botón que abre el popover de WhatsApp, con la misma cara que la enlazada */
button.tarjeta{width:100%;font:inherit;text-align:left;cursor:pointer;padding:0;appearance:none}
button.tarjeta:focus-visible{outline:3px solid var(--foco);outline-offset:3px}
.tarjeta__d{padding:.35rem 1.1rem 1.1rem;font-size:.95rem;color:var(--tinta-2);line-height:1.45}
.tarjeta__f{padding:0 1.1rem 1rem;font-size:.85rem;color:var(--tinta-3);margin-top:auto}
@media(min-width:601px){.tarjetas:has(>li:nth-child(2):last-child){grid-template-columns:repeat(2,minmax(0,1fr))}}   /* con 2 tarjetas; en móvil manda la lista de una columna */
.tarjetas:has(>li:only-child){grid-template-columns:minmax(0,1fr);max-width:920px}
@media(min-width:601px){
  .tarjetas>li:only-child .tarjeta{display:grid;grid-template-columns:minmax(0,11fr) minmax(0,9fr);grid-template-rows:auto 1fr}
  .tarjetas>li:only-child .tarjeta img{grid-row:1/4;height:100%;min-height:260px;aspect-ratio:auto}
  .tarjetas>li:only-child .tarjeta__t,.tarjetas>li:only-child .tarjeta__d{grid-column:2}
  .tarjetas>li:only-child .tarjeta__t{padding:1.6rem 1.6rem 0;font-size:1.45rem}
  .tarjetas>li:only-child .tarjeta__d{padding:.5rem 1.6rem 1.6rem;font-size:1rem}
}
@media(max-width:900px){.tarjetas{grid-template-columns:repeat(2,minmax(0,1fr))}}
@media(max-width:600px){
  .tarjetas{grid-template-columns:minmax(0,1fr);gap:.7rem}
  .tarjeta{display:grid;grid-template-columns:112px minmax(0,1fr);grid-template-rows:auto 1fr}
  .tarjeta img{grid-row:1/4;aspect-ratio:auto;height:100%}
  .tarjeta__t,.tarjeta__d,.tarjeta__f{grid-column:2}
  .tarjeta__t{padding:.8rem .9rem 0;font-size:1.05rem}
  .tarjeta__d{padding:.25rem .9rem .8rem;font-size:.9rem}
}

/* ---------- pasos (integrametal steps + steps__cta) ---------- */
.pasos{list-style:none;margin:0;padding:0;display:grid;grid-template-columns:repeat(var(--n,3),minmax(0,1fr));gap:1.6rem;counter-reset:paso}
.pasos--4{--n:4}
.pasos li{counter-increment:paso;padding-top:1rem;border-top:2px solid var(--tinta)}
.pasos li::before{content:counter(paso,decimal-leading-zero);font-weight:700;font-size:.875rem;color:var(--acento-texto);letter-spacing:.06em}
.pasos b{display:block;font-family:var(--f-display);font-size:1.15rem;margin:.35rem 0 .35rem;letter-spacing:-.01em}
.pasos p{margin:0;color:var(--tinta-2);font-size:.95rem}
.pasos__cta{display:flex;flex-wrap:wrap;gap:.6rem;margin-top:1.8rem}
@media(max-width:700px){.pasos__cta,.precios .hero__cta{display:grid;grid-template-columns:minmax(0,1fr)}.pasos__cta .btn{width:100%}}
@media(max-width:800px){.pasos,.pasos--4{grid-template-columns:minmax(0,1fr);gap:1.1rem}}
.cuerpo .pasos,.cuerpo .pasos--4{grid-template-columns:minmax(0,1fr) minmax(0,1fr)}
@media(max-width:600px){.cuerpo .pasos,.cuerpo .pasos--4{grid-template-columns:minmax(0,1fr)}}

/* ---------- cuándo sirve / cuándo no ---------- */
.sirve{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:1rem}
.sirve>div{border:1px solid var(--linea);border-radius:var(--radio);padding:1.1rem 1.2rem;background:var(--superficie)}
.sirve h3{font-size:1.05rem;display:flex;align-items:center;gap:.45rem;margin-bottom:.6rem}
.sirve h3 svg{width:20px;height:20px;flex:none}
.sirve .si h3 svg{color:var(--acento-texto)}
.sirve .no h3 svg{color:var(--tinta-3)}
.sirve ul{margin:0;padding-left:1.1em;color:var(--tinta-2);font-size:.97rem}
.sirve li{margin:.3rem 0}
@media(max-width:700px){.sirve{grid-template-columns:minmax(0,1fr)}}

/* ---------- checklist "qué mandar" ---------- */
.lista-check{list-style:none;padding:0;margin:0 0 1.2rem;display:grid;gap:.55rem}
.lista-check li{display:flex;gap:.6rem;align-items:flex-start;color:var(--tinta-2)}
.lista-check svg{width:20px;height:20px;flex:none;margin-top:.2rem;color:var(--acento-texto)}

/* ---------- tabla de precios referenciales ---------- */
.precios{max-width:760px}
.tabla-envoltura{overflow-x:auto;border:1px solid var(--linea);border-radius:var(--radio);background:var(--superficie)}
.tabla-precios{width:100%;border-collapse:collapse;font-size:.97rem}
.tabla-precios caption{text-align:left;padding:.9rem 1rem 0;font-weight:700;color:var(--tinta)}
.tabla-precios th,.tabla-precios td{text-align:left;padding:.75rem 1rem;border-bottom:1px solid var(--linea);vertical-align:top}
.tabla-precios thead th{font-size:.82rem;letter-spacing:.04em;text-transform:uppercase;color:var(--tinta-2);background:var(--papel-2)}
.tabla-precios tbody th{font-weight:600;color:var(--tinta)}
.tabla-precios td{color:var(--tinta-2)}
.tabla-precios td.rango{font-weight:700;color:var(--tinta);white-space:nowrap;font-variant-numeric:tabular-nums}
.tabla-precios tr:last-child th,.tabla-precios tr:last-child td{border-bottom:0}
/* en el teléfono la tabla se vuelve fichas: sin scroll lateral ni columnas cortadas */
@media(max-width:600px){
  .tabla-precios thead{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0)}
  .tabla-precios tbody tr{display:block;padding:.8rem 1rem;border-bottom:1px solid var(--linea)}
  .tabla-precios tbody tr:last-child{border-bottom:0}
  .tabla-precios tbody th,.tabla-precios td{display:block;padding:.15rem 0;border:0}
  .tabla-precios tbody th{font-size:1.02rem}
  .tabla-precios td.rango{white-space:normal;color:var(--acento-texto);font-size:1.05rem}
  .tabla-precios td[data-col]::before{content:attr(data-col) ": ";font-weight:600;color:var(--tinta)}
  .tabla-precios td.rango::before{content:none}
}
.aviso-precios{display:flex;gap:.6rem;align-items:flex-start;margin:1rem 0 .4rem;padding:.8rem 1rem;border-radius:var(--radio);background:var(--acento-suave);color:var(--tinta);font-size:.93rem}
.aviso-precios svg{width:20px;height:20px;flex:none;margin-top:.1rem;color:var(--acento-texto)}
.fuentes{font-size:.875rem;color:var(--tinta-3);margin:.5rem 0 0}
.fuentes a{color:var(--tinta-2);display:inline-flex;align-items:center;min-height:44px}

/* ---------- dato con fuente (destapando 4.11: datos reales + enlace visible) ---------- */
.dato{display:grid;grid-template-columns:auto minmax(0,1fr);gap:1.4rem;align-items:start;border:2px solid var(--acento);border-radius:calc(var(--radio) + 6px);padding:1.5rem;background:var(--superficie);max-width:860px}
.dato__cifra{font-family:var(--f-display);font-weight:800;font-size:clamp(2.2rem,3vw + 1rem,3.2rem);line-height:1;letter-spacing:-.03em;color:var(--acento-texto);margin:0;min-width:3ch}
.dato h2,.dato h3{font-size:1.35rem;margin-bottom:.5rem}
.dato p{color:var(--tinta-2)}
.dato ul{margin:.2rem 0 .8rem;padding-left:1.1em;color:var(--tinta-2)}
.dato__fuente{font-size:.9rem;margin:0}
.dato__fuente a{display:inline-flex;align-items:center;min-height:44px}
@media(max-width:600px){.dato{grid-template-columns:minmax(0,1fr);padding:1.2rem;gap:.6rem}}
/* en la home el dato sigue la misma grilla 5/7 que los bloques partidos */
@media(min-width:1000px){
  .seccion>.wrap>.dato{max-width:none;grid-template-columns:minmax(0,5fr) minmax(0,7fr);column-gap:clamp(3rem,6vw,6rem);padding:2.2rem 2.4rem;align-items:center}
  .seccion>.wrap>.dato .dato__cifra{font-size:clamp(3.4rem,5vw,5.2rem)}
  .seccion>.wrap>.dato>div{max-width:62ch}
}

/* ---------- franja CTA intermedia ---------- */
.cta-franja{background:var(--acento-suave);border-top:1px solid var(--linea);border-bottom:1px solid var(--linea)}
.cta-franja__in{display:flex;flex-wrap:wrap;align-items:center;justify-content:space-between;gap:1rem 2rem;padding-top:1.5rem;padding-bottom:1.5rem}
.cta-franja p{margin:0;color:var(--tinta);max-width:58ch}
.cta-franja b{font-family:var(--f-display);font-size:1.15rem}
.cta-franja__btns{display:flex;flex-wrap:wrap;gap:.6rem}
.cuerpo .cta-franja{border:1px solid var(--linea);border-radius:var(--radio)}
.cuerpo .cta-franja__in{padding:1.2rem}
@media(max-width:600px){.cta-franja__btns{width:100%;display:grid}.cta-franja__btns .btn{width:100%}}

/* ---------- comparar (dos o tres columnas) ---------- */
.comparar{display:grid;grid-template-columns:repeat(auto-fit,minmax(220px,1fr));gap:1rem}
.comparar>div{border:1px solid var(--linea);border-radius:var(--radio);padding:1.1rem 1.2rem;background:var(--superficie)}
.comparar h3{font-size:1.08rem;margin-bottom:.5rem}
.comparar ul{margin:0;padding-left:1.1em;color:var(--tinta-2);font-size:.95rem}

/* ---------- índice del artículo ---------- */
.indice{border:1px solid var(--linea);border-radius:var(--radio);padding:1rem 1.2rem;background:var(--superficie);margin:0 0 2.5rem}
.indice h2{font-size:1rem;letter-spacing:.02em;margin-bottom:.4rem}
.indice ol{margin:0;padding-left:1.2em}
.indice a{display:inline-flex;align-items:center;min-height:36px;color:var(--tinta-2)}

/* ---------- cobertura ---------- */
.cobertura .chips{max-width:900px}

/* ---------- formulario que arma el WhatsApp ---------- */
.form{display:grid;gap:.9rem;max-width:560px;background:var(--superficie);border:1px solid var(--linea);border-radius:calc(var(--radio) + 6px);padding:1.4rem}
.campo label{display:block;font-size:.93rem;font-weight:600;margin-bottom:.35rem}
.campo input,.campo textarea{width:100%;font:inherit;font-size:1rem;padding:.7rem .85rem;min-height:48px;border:1.5px solid var(--linea-2);border-radius:10px;background:var(--papel);color:var(--tinta)}
.campo textarea{resize:vertical;min-height:110px}
.campo ::placeholder{color:var(--tinta-3);opacity:1}
.campo input:focus-visible,.campo textarea:focus-visible{outline:2px solid var(--foco);outline-offset:1px}
.form__nota{font-size:.875rem;color:var(--tinta-3);margin:0}

/* ---------- FAQ (details: funciona sin JS) ---------- */
.faq{max-width:780px;border-top:1px solid var(--linea)}
.faq details{border-bottom:1px solid var(--linea)}
.faq summary{cursor:pointer;list-style:none;padding:1rem 2.6rem 1rem 0;font-family:var(--f-display);font-weight:700;font-size:1.1rem;letter-spacing:-.01em;line-height:1.3;position:relative;min-height:48px}
.faq summary::-webkit-details-marker{display:none}
.faq summary::after{content:"+";position:absolute;right:.3rem;top:.85rem;font-size:1.4rem;line-height:1.2;color:var(--acento-texto);font-family:var(--f-cuerpo)}
.faq details[open] summary::after{content:"\2013"}
.faq .resp{padding:0 0 1.1rem;color:var(--tinta-2);max-width:68ch}
.faq .resp p{margin:0}

/* ---------- relacionados ---------- */
.relacionados ul{list-style:none;margin:0;padding:0;display:grid;grid-template-columns:repeat(auto-fill,minmax(250px,1fr));gap:.7rem}
.relacionados a{display:flex;justify-content:space-between;align-items:center;gap:1rem;min-height:56px;padding:.8rem 1rem;border:1px solid var(--linea);border-radius:var(--radio);background:var(--superficie);color:var(--tinta);font-weight:600;text-decoration:none}
.relacionados a::after{content:"→";color:var(--acento-texto)}
.relacionados a:hover{border-color:var(--tinta-3)}

/* ---------- banda de cierre (única superficie oscura del cuerpo) ---------- */
.cierre{background:var(--banda);color:var(--banda-tinta);padding:4rem 0}
.cierre h2{color:var(--banda-tinta);max-width:22ch;margin-bottom:.7rem}
.cierre p{color:var(--banda-tinta-2);max-width:56ch}
.cierre__cta{display:flex;flex-wrap:wrap;gap:.6rem;margin-top:1.4rem}
.cierre .btn-borde{background:transparent;color:var(--banda-tinta);border-color:var(--banda-linea)}
.cierre .btn-borde:hover{border-color:var(--banda-tinta);color:var(--banda-tinta)}
@media(min-width:1000px){
  .cierre .wrap{display:grid;grid-template-columns:minmax(0,1fr) auto;column-gap:4rem;align-items:center}
  .cierre h2,.cierre p{grid-column:1}
  .cierre p{margin-bottom:0}
  .cierre__cta{grid-column:2;grid-row:1/span 2;margin-top:0}
}
@media(max-width:900px){.cierre{padding:2.8rem 0}}
@media(max-width:600px){.cierre__cta{display:grid}.cierre__cta .btn{width:100%}}

/* ---------- pie ---------- */
.pie{background:var(--banda);color:var(--banda-tinta-2);padding:3.5rem 0 1.5rem;font-size:.93rem;border-top:1px solid var(--banda-linea)}
.pie__grid{display:grid;grid-template-columns:minmax(0,1.3fr) repeat(3,minmax(0,1fr));gap:2rem 2rem}
.pie__marca{display:inline-flex;align-items:center;gap:.55rem;color:var(--banda-tinta);font-family:var(--f-display);font-weight:700;font-size:1.15rem;text-decoration:none;min-height:44px}
.pie__marca img{width:32px;height:32px}
.pie p{margin:.6rem 0 0;max-width:36ch}
.pie h2{font-family:var(--f-display);font-size:1rem;color:var(--banda-tinta);margin:0 0 .5rem;letter-spacing:0}
.pie ul{list-style:none;margin:0;padding:0}
.pie a{color:var(--banda-tinta-2);text-decoration:none;display:inline-flex;align-items:center;gap:.5rem;min-height:44px;line-height:1.3}
.pie a:hover{color:var(--banda-tinta);text-decoration:underline}
.pie__contacto a{color:var(--banda-tinta);font-weight:600}
.pie__contacto svg{width:18px;height:18px;flex:none;color:var(--banda-acento)}
.pie__meta{margin-top:2.2rem;padding-top:1rem;border-top:1px solid var(--banda-linea);display:flex;flex-wrap:wrap;gap:.4rem 1.4rem;justify-content:space-between;font-size:.85rem}
.pie__meta p{margin:0;max-width:none}
.pie__meta a{text-decoration:underline;min-height:44px}
.credito a{color:var(--banda-tinta);min-width:44px;justify-content:center}
@media(max-width:900px){.pie__grid{grid-template-columns:repeat(2,minmax(0,1fr))}.pie__grid>:first-child{grid-column:1/-1}}
@media(max-width:560px){.pie__grid{grid-template-columns:minmax(0,1fr)}}

/* ---------- barra fija: móvil abajo a lo ancho; escritorio abajo a la derecha ---------- */
.barra{position:fixed;z-index:45;display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1.35fr);gap:.5rem;left:0;right:0;bottom:0;padding:.5rem 12px calc(.5rem + env(safe-area-inset-bottom));background:color-mix(in srgb,var(--papel) 92%,transparent);backdrop-filter:blur(10px);-webkit-backdrop-filter:blur(10px);border-top:1px solid var(--linea)}
.barra .btn{min-height:48px;padding:.6rem .8rem}
.barra .btn-tel{background:var(--superficie);color:var(--tinta);border-color:var(--linea-2)}
/* el aire para la barra va en el pie (no en body): así no queda una franja de papel bajo el pie oscuro */
.pie{padding-bottom:calc(66px + 1.5rem + env(safe-area-inset-bottom))}
@media(max-width:900px){html{scroll-padding-bottom:calc(76px + env(safe-area-inset-bottom))}}
@media(min-width:901px){
  .barra{left:auto;right:24px;bottom:24px;padding:0;background:transparent;border:0;backdrop-filter:none;-webkit-backdrop-filter:none;display:flex}
  .barra .btn{min-height:52px;padding:.8rem 1.3rem;box-shadow:0 10px 30px -8px var(--sombra)}
  .pie{padding-bottom:6rem}
}
@media(min-width:901px){
  .js .barra{transition:opacity .25s ease,transform .25s ease,visibility .25s}
  .js.barra-oculta .barra{opacity:0;transform:translateY(14px);visibility:hidden;pointer-events:none}
}
@media(max-width:900px) and (max-height:520px){.nav{position:static}.barra{display:none}.pie{padding-bottom:1.5rem}}

@media(prefers-reduced-motion:reduce){*,*::before,*::after{animation:none!important;transition:none!important;scroll-behavior:auto!important}}
@media print{.barra,.nav__burger,.nav__cta,.cierre,.hoja,.pop-velo{display:none!important}}

/* encuadre de cada foto (marca.json > fotos > foco) */
.foco-auto-panel-solar{object-position:50% 50%}
.foco-canalizacion-exterior{object-position:50% 50%}
.foco-cargador-portatil{object-position:50% 50%}
.foco-carretera-sur{object-position:50% 35%}
.foco-cliente-celular{object-position:50% 40%}
.foco-condominio-casas{object-position:50% 55%}
.foco-conector-tipo2{object-position:50% 50%}
.foco-diferencial-tipo-b{object-position:50% 50%}
.foco-edificio-sala-medidores{object-position:50% 50%}
.foco-furgon-flota{object-position:50% 55%}
.foco-hero-estacionamiento-edificio{object-position:50% 50%}
.foco-hero-garaje-casa{object-position:50% 55%}
.foco-hero-garaje-casa-movil{object-position:50% 50%}
.foco-hotel-carga-destino{object-position:50% 55%}
.foco-medidor-empalme{object-position:50% 50%}
.foco-tecnico-medicion{object-position:50% 40%}
.foco-tecnico-tablero{object-position:50% 45%}
.foco-visita-evaluacion{object-position:50% 40%}
.foco-wallbox-detalle{object-position:50% 50%}