/* Limpio Tu Fosa · 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:14px;
  --radio-btn:calc(var(--radio) + 2px);
  --radio-btn2:calc(var(--radio) + 2px);
  --radio-chip:999px;
  --radio-nav:999px;
  --acento:#f5b301;
  --acento-hover:#f6bc1f;
  --acento-suave:#e3efe6;
  --acento-texto:#1d6b45;
  --acento-vivo:#f5b301;
  --banda:#134a30;
  --banda-acento:#f5b301;
  --banda-linea:#47725e;
  --banda-tinta:#ffffff;
  --banda-tinta-2:#cfe3d6;
  --foco:#1d6b45;
  --linea:#dfe6dd;
  --linea-2:#7b8c82;
  --papel:#f4f7f2;
  --papel-2:#e8efe5;
  --papel-3:#dce6d8;
  --sobre-acento:#1a1400;
  --sobre-wa:#ffffff;
  --sombra:rgb(20 20 30 / .28);
  --superficie:#ffffff;
  --tinta:#14201a;
  --tinta-2:#34443b;
  --tinta-3:#4a5a51;
  --wa:#0b7a3b;
  --wa-hover:#0a6b34;
  color-scheme:light;
}
@media (prefers-color-scheme: dark){
:root{
  --acento:#ffc83d;
  --acento-hover:#ffcf54;
  --acento-suave:#1d2d24;
  --acento-texto:#6fd3a0;
  --acento-vivo:#ffc83d;
  --banda:#0a120e;
  --banda-acento:#ffc83d;
  --banda-linea:#3b433e;
  --banda-tinta:#e7efe9;
  --banda-tinta-2:#b3c4ba;
  --foco:#6fd3a0;
  --linea:#26352d;
  --linea-2:#6f8378;
  --papel:#0f1713;
  --papel-2:#141f19;
  --papel-3:#1b2821;
  --sobre-acento:#1a1400;
  --sobre-wa:#04230f;
  --sombra:rgb(0 0 0 / .45);
  --superficie:#17221c;
  --tinta:#e7efe9;
  --tinta-2:#c6d3cb;
  --tinta-3:#a9bab0;
  --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-btn,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);border-radius:var(--radio-btn2,var(--radio-btn,var(--radio)))}
.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:var(--radio-nav,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:var(--radio-nav,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{position:absolute;width:1px;height:1px;margin:-1px;padding:0;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap;border:0}}

/* ---------- 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(98vw,520px)}   /* v2: 421 -> 382 px en 390 (Codex 9): sellos sobre el pliegue */
  .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) 24%,color-mix(in srgb,var(--banda) 58%,transparent) 37%,color-mix(in srgb,var(--banda) 12%,transparent) 53%,transparent 64%,transparent 82%,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:var(--radio-chip,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{width:max-content;max-width:min(22rem,calc(100vw - 16px))}
.pop .btn{white-space:normal;text-align:left;min-width:0}
.pop .btn span{min-width:0;overflow-wrap:anywhere}

/* ---------- 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:not(.tarjetas--v):has(>li:only-child){grid-template-columns:minmax(0,1fr);max-width:920px}
@media(min-width:601px){
  .tarjetas:not(.tarjetas--v)>li:only-child .tarjeta{display:grid;grid-template-columns:minmax(0,11fr) minmax(0,9fr);grid-template-rows:auto 1fr}
  .tarjetas:not(.tarjetas--v)>li:only-child .tarjeta img{grid-row:1/4;height:100%;min-height:260px;aspect-ratio:auto}
  .tarjetas:not(.tarjetas--v)>li:only-child .tarjeta__t,.tarjetas:not(.tarjetas--v)>li:only-child .tarjeta__d{grid-column:2}
  .tarjetas:not(.tarjetas--v)>li:only-child .tarjeta__t{padding:1.6rem 1.6rem 0;font-size:1.45rem}
  .tarjetas:not(.tarjetas--v)>li:only-child .tarjeta__d{padding:.5rem 1.6rem 1.6rem;font-size:1rem}
}
/* tarjetas con foto: 4 u 8 van en 4 columnas en pantalla ancha (3+3+2 dejaba un hueco; tualmacendigital 28-sep) */
@media(min-width:1100px){.tarjetas:not(.tarjetas--v,.tarjetas--lista,.cuerpo *):is(:has(>li:nth-child(4):last-child),:has(>li:nth-child(8):last-child)){grid-template-columns:repeat(4,minmax(0,1fr))}}
@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}
  .tarjetas:not(.tarjetas--v,.tarjetas--lista) .tarjeta{display:grid;grid-template-columns:112px minmax(0,1fr);grid-template-rows:auto 1fr}
  .tarjetas:not(.tarjetas--v,.tarjetas--lista) .tarjeta img{grid-row:1/4;aspect-ratio:auto;height:100%}
  .tarjetas:not(.tarjetas--v,.tarjetas--lista) :is(.tarjeta__t,.tarjeta__d,.tarjeta__f){grid-column:2}
  .tarjetas:not(.tarjetas--v,.tarjetas--lista) .tarjeta__t{padding:.8rem .9rem 0;font-size:1.05rem}
  .tarjetas:not(.tarjetas--v,.tarjetas--lista) .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;line-height:2}
/* en línea (no inline-flex): varias fuentes fluyen como texto, sin una por renglón con la coma colgando; el relleno vertical mantiene el blanco táctil ~44 px */
.fuentes a{color:var(--tinta-2);padding-block:.85rem}

/* ---------- dato con fuente (destapando 4.11: datos reales + enlace visible) ---------- */
.dato{display:grid;grid-template-columns:fit-content(15rem) 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;text-wrap:balance}
.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,.campo select{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,.campo select: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;grid-auto-rows:1fr}
.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)}
/* misma altura en la fila aunque un enlace ocupe dos líneas */
.relacionados li{display:flex}.relacionados li>a{flex:1}

/* ---------- 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}}

/* ============================================================================
   v2 (28-sep-2026): pedido de Alejandro + auditoría Codex de las muestras. Nada cambia el look
   aprobado; son piezas nuevas que se activan solas o por contenido.
   ========================================================================== */
/* popover: bajo el WhatsApp, "Ver página de X" cuando la tarjeta tiene página */
.pop{display:flex;flex-direction:column;gap:.2rem}
.pop__ver{display:flex;align-items:center;justify-content:center;gap:.4rem;min-height:44px;padding:.35rem .8rem;border-radius:var(--radio);color:var(--acento-texto);font-weight:700;font-size:.95rem;text-decoration:none;white-space:normal;text-align:center}
.pop__ver:hover{background:var(--papel-2);text-decoration:underline}
.pop__ver[hidden]{display:none}
a.tarjeta--pop{cursor:pointer}
/* tarjetas en lista compacta (hubs con muchas hijas): sin foto, dos columnas en escritorio */
.tarjetas--lista{grid-template-columns:repeat(2,minmax(0,1fr));gap:.6rem}
.tarjetas--lista .tarjeta{display:flex;flex-direction:column}
.tarjetas--lista .tarjeta__t{padding:.9rem 1rem 0;font-size:1.05rem}
.tarjetas--lista .tarjeta__d{padding:.25rem 1rem .9rem;font-size:.92rem}
@media(min-width:1000px){.tarjetas--lista{grid-template-columns:repeat(3,minmax(0,1fr))}}
@media(max-width:600px){.tarjetas--lista{grid-template-columns:minmax(0,1fr)}.tarjetas--lista .tarjeta{display:flex}.tarjetas--lista .tarjeta__t,.tarjetas--lista .tarjeta__d{grid-column:auto}}
/* canal B2B: enlace terciario bajo el CTA doble (no compite con los botones) */
.formal{display:flex;flex-direction:column;gap:0;margin:.7rem 0 0;font-size:.9rem;line-height:1.4;color:var(--tinta-2);max-width:44ch}
.formal a{display:inline-flex;align-items:center;gap:.35rem;min-height:44px;font-weight:700;font-size:1rem;color:var(--acento-texto)}
.cierre .formal{color:var(--banda-tinta-2)}
.cierre .formal a{color:var(--banda-tinta)}
.caja-cta .formal{margin-top:.4rem}
/* variante de sección para romper el ritmo (Codex 22): fondo acento suave, texto en tinta plena */
.seccion--destacado{background:var(--acento-suave)}
.bloque--destacado{background:var(--acento-suave);border-radius:calc(var(--radio) + 6px);padding:1.4rem 1.4rem .6rem}
:is(.seccion--destacado,.bloque--destacado) :is(p,li,figcaption,.fuentes,.cabeza p,h3){color:var(--tinta)}
/* móvil: sin barra mientras los botones del hero están a la vista (Codex 10: acciones duplicadas) */
@media(max-width:900px){
  .js .barra{transition:opacity .2s ease,transform .2s ease,visibility .2s}
  .js.barra-hero .barra{opacity:0;transform:translateY(100%);visibility:hidden;pointer-events:none}
}
/* menú con muchos hubs (sitios de 70-110 páginas): 6 a 8 entradas bajan a una segunda fila en
   escritorio; más de 8 abren un panel en columnas también en escritorio. Nunca se esconde un hub. */
@media(min-width:901px){
  .nav--largo .nav__in{flex-wrap:wrap;row-gap:0}
  .nav--largo nav{order:3;width:100%;border-top:1px solid var(--linea);margin-top:.35rem;padding-top:.15rem}
  .nav--largo .nav__links{flex-wrap:wrap}
  .nav--largo .nav__links a{min-height:44px;padding:0 .7rem;font-size:.9rem}
  .nav--largo.flota .nav__in{border-radius:22px}
  html:has(.nav--largo){scroll-padding-top:140px}
  .nav--panel nav{order:0;width:auto;border:0;margin:0;padding:0}
  .nav--panel .nav__links{display:none}
  .nav--panel .nav__burger{display:flex;order:5}
  .nav--panel.abierto .nav__links{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:.15rem;position:absolute;right:12px;top:calc(100% + 6px);width:min(720px,calc(100vw - 24px));background:var(--superficie);border:1px solid var(--linea);border-radius:14px;padding:.6rem;box-shadow:0 18px 40px -20px var(--sombra)}
  .nav--panel.abierto .nav__links a{min-height:44px;border-radius:10px;white-space:normal}
  .nav--panel.abierto .nav__burger{background:var(--papel-2)}
  .nav--panel .nav__menu-tel{display:none}
  html:has(.nav--panel){scroll-padding-top:88px}
}
@media(max-width:900px){.nav.abierto .nav__links{max-height:calc(100vh - 90px);overflow-y:auto}}
/* pie con columnas según lo que hay: marca + Secciones + hasta 3 grupos */
.pie__grid--c0{grid-template-columns:minmax(0,1fr)}
.pie__grid--c1{grid-template-columns:minmax(0,1.3fr) minmax(0,1fr)}
.pie__grid--c2{grid-template-columns:minmax(0,1.3fr) repeat(2,minmax(0,1fr))}
.pie__grid--c4{grid-template-columns:minmax(0,1.2fr) repeat(4,minmax(0,1fr));gap:2rem 1.5rem}
@media(max-width:1100px){.pie__grid--c4{grid-template-columns:repeat(3,minmax(0,1fr))}.pie__grid--c4>:first-child{grid-column:1/-1}}
@media(max-width:900px){.pie__grid--c1,.pie__grid--c2,.pie__grid--c4{grid-template-columns:repeat(2,minmax(0,1fr))}}
@media(max-width:560px){.pie__grid--c1,.pie__grid--c2,.pie__grid--c4{grid-template-columns:minmax(0,1fr)}}

/* ============================================================================
   Variantes por sitio (marca.json > "variantes", 28-sep-2026). Pedido de Alejandro: que los 8 sitios
   no se vean iguales sin tocar la conversión. Sin la clave sale el look aprobado. Solo CSS sobre el
   mismo HTML, salvo foto de pasos/cierre y barra de rango (piezas que pone el generador).
   Pares de color usados: todos ya validados por el generador en las dos paletas
   (sobre-acento/acento, acento-texto/papel|papel-2|superficie, banda-tinta(-2)/banda, banda-acento/banda).
   ========================================================================== */

/* ---------- tarjetas (b) lateral: foto al costado, dos por fila ---------- */
.tarjetas--lateral{grid-template-columns:repeat(2,minmax(0,1fr));gap:1rem}
.tarjetas--lateral .tarjeta{display:grid;grid-template-columns:minmax(0,5fr) minmax(0,8fr);grid-template-rows:auto 1fr auto}
/* contain:size: la foto no empuja el alto con su tamaño propio; manda el texto (fotos verticales dejaban filas disparejas) */
.tarjetas--lateral .tarjeta img{grid-row:1/4;height:100%;min-height:168px;aspect-ratio:auto;contain:size}
.tarjetas--lateral :is(.tarjeta__t,.tarjeta__d,.tarjeta__f){grid-column:2}
.tarjetas--lateral .tarjeta__t{padding:1.25rem 1.25rem 0;align-items:flex-start}
.tarjetas--lateral .tarjeta__d{padding:.45rem 1.25rem 1.25rem}
.tarjetas--lateral .tarjeta:not(:has(img)){grid-template-columns:minmax(0,1fr)}
.tarjetas--lateral .tarjeta:not(:has(img)) :is(.tarjeta__t,.tarjeta__d,.tarjeta__f){grid-column:1}
.tarjetas--lateral:has(>li:only-child){grid-template-columns:minmax(0,1fr);max-width:920px}
/* impar: la última tarjeta toma la fila entera y su foto queda del ancho de la de arriba (sin hueco al lado) */
@media(min-width:901px){.tarjetas--lateral>li:last-child:nth-child(odd):not(:only-child){grid-column:1/-1}
  .tarjetas--lateral>li:last-child:nth-child(odd):not(:only-child) .tarjeta:has(img){grid-template-columns:calc((100% - 1rem) / 2 * 5 / 13) minmax(0,1fr)}}
@media(max-width:900px){.tarjetas--lateral{grid-template-columns:minmax(0,1fr)}}
@media(max-width:600px){
  .tarjetas--lateral{gap:.75rem}
  /* miniatura angosta: en 390 px la foto al 40% dejaba títulos de dos palabras por renglón */
  .tarjetas--lateral .tarjeta{grid-template-columns:32% minmax(0,1fr)}
  .tarjetas--lateral .tarjeta img{min-height:132px}
  .tarjetas--lateral .tarjeta__t{padding:.9rem .95rem 0;font-size:1.05rem}
  .tarjetas--lateral .tarjeta__d{padding:.3rem .95rem .9rem;font-size:.9rem}
}

/* ---------- tarjetas (c) velo: el texto va sobre la foto, con velo del color de la banda abajo ---------- */
.tarjetas--velo .tarjeta{position:relative;isolation:isolate;justify-content:flex-end;min-height:340px;border:0;background:var(--banda);color:var(--banda-tinta)}
.tarjetas--velo .tarjeta img{position:absolute;inset:0;width:100%;height:100%;aspect-ratio:auto;z-index:-2;transition:transform .5s cubic-bezier(.16,1,.3,1)}
.tarjetas--velo .tarjeta:has(img)::before{content:"";position:absolute;inset:0;z-index:-1;background:linear-gradient(180deg,transparent 0%,color-mix(in srgb,var(--banda) 30%,transparent) 30%,color-mix(in srgb,var(--banda) 84%,transparent) 52%,color-mix(in srgb,var(--banda) 94%,transparent) 70%,var(--banda) 100%)}
.tarjetas--velo .tarjeta__t{padding:0 1.2rem;color:var(--banda-tinta);font-size:1.25rem}
.tarjetas--velo .tarjeta__t i{color:var(--banda-acento)}
.tarjetas--velo .tarjeta__d{padding:.4rem 1.2rem 1.25rem;color:var(--banda-tinta-2)}
.tarjetas--velo .tarjeta__f{padding:0 1.2rem 1rem;margin-top:0;color:var(--banda-tinta-2)}
.tarjetas--velo .tarjeta:hover{transform:none}
.tarjetas--velo .tarjeta:hover img{transform:scale(1.04)}
.tarjetas--velo .tarjeta:focus-visible{outline-offset:3px}
.tarjetas--velo:has(>li:only-child){grid-template-columns:minmax(0,1fr);max-width:920px}
/* 2 o 4 tarjetas en 3 columnas dejan un hueco: van en 2 anchas */
@media(min-width:901px){.tarjetas--velo:is(:has(>li:nth-child(2):last-child),:has(>li:nth-child(4):last-child)){grid-template-columns:repeat(2,minmax(0,1fr))}}
/* títulos alineados en la fila: la descripción reserva 3 líneas en grilla de varias columnas */
@media(min-width:601px){.tarjetas--velo .tarjeta__d{min-height:calc(3lh + 1.65rem)}}
@media(max-width:600px){.tarjetas--velo .tarjeta{min-height:232px}.tarjetas--velo .tarjeta__t{font-size:1.15rem}}

/* ---------- tarjetas (d) numero: sin foto, número en un bloque del color de marca ---------- */
.tarjetas--numero{counter-reset:tj}
.tarjetas--numero>li{counter-increment:tj}
.tarjetas--numero .tarjeta{padding:1.3rem 1.25rem 1.2rem;gap:0}
.tarjetas--numero .tarjeta::before{content:counter(tj,decimal-leading-zero);display:grid;place-items:center;width:2.6rem;height:2.6rem;margin-bottom:.9rem;border-radius:var(--radio);background:var(--acento);color:var(--sobre-acento);font-family:var(--f-display);font-weight:800;font-size:.98rem;letter-spacing:-.01em;font-variant-numeric:tabular-nums}
.tarjetas--numero .tarjeta__t{padding:0}
.tarjetas--numero .tarjeta__d{padding:.4rem 0 0}
.tarjetas--numero .tarjeta__f{padding:.6rem 0 0}
.tarjetas--numero .tarjeta:hover{border-color:var(--acento-texto)}
.tarjetas--numero:has(>li:only-child){grid-template-columns:minmax(0,1fr);max-width:720px}
/* sin hueco al final: la fila incompleta se reparte el ancho (8 o 10 servicios en 3 columnas dejaban un agujero) */
@media(min-width:901px){
  .tarjetas--numero:not(:has(>li:only-child)){grid-template-columns:repeat(6,minmax(0,1fr))}
  .tarjetas--numero:not(:has(>li:only-child))>li{grid-column:span 2}
  .tarjetas--numero>li:nth-child(3n+1):last-child{grid-column:1/-1}
  .tarjetas--numero>li:nth-child(3n+1):nth-last-child(2),.tarjetas--numero>li:nth-child(3n+1):nth-last-child(2)+li{grid-column:span 3}
}
@media(min-width:601px) and (max-width:900px){.tarjetas--numero>li:nth-child(odd):last-child{grid-column:1/-1}}
/* la tarjeta que queda sola a lo ancho pasa a fila: número a la izquierda, texto con largo de línea legible */
@media(min-width:901px){.tarjetas--numero:not(:has(>li:only-child))>li:nth-child(3n+1):last-child .tarjeta{display:grid;grid-template-columns:2.6rem minmax(0,1fr);column-gap:1.25rem;align-content:start}.tarjetas--numero:not(:has(>li:only-child))>li:nth-child(3n+1):last-child .tarjeta::before{grid-row:1/4;margin:0}.tarjetas--numero:not(:has(>li:only-child))>li:nth-child(3n+1):last-child :is(.tarjeta__t,.tarjeta__d,.tarjeta__f){grid-column:2}.tarjetas--numero:not(:has(>li:only-child))>li:nth-child(3n+1):last-child .tarjeta__d{max-width:68ch}}
@media(min-width:601px) and (max-width:900px){.tarjetas--numero>li:nth-child(odd):last-child .tarjeta{display:grid;grid-template-columns:2.6rem minmax(0,1fr);column-gap:1.25rem;align-content:start}.tarjetas--numero>li:nth-child(odd):last-child .tarjeta::before{grid-row:1/4;margin:0}.tarjetas--numero>li:nth-child(odd):last-child :is(.tarjeta__t,.tarjeta__d,.tarjeta__f){grid-column:2}}
@media(max-width:600px){
  .tarjetas--numero .tarjeta{display:grid;grid-template-columns:2.75rem minmax(0,1fr);column-gap:.9rem;padding:1rem}
  .tarjetas--numero .tarjeta::before{grid-row:1/4;width:2.75rem;height:2.75rem;margin:0;font-size:1rem}
  .tarjetas--numero :is(.tarjeta__t,.tarjeta__d,.tarjeta__f){grid-column:2}
  .tarjetas--numero .tarjeta__t{font-size:1.05rem}
  .tarjetas--numero .tarjeta__d{font-size:.9rem;padding-top:.25rem}
}

/* ---------- tarjetas (e) mini: lista compacta con miniatura cuadrada, sin caja ---------- */
.tarjetas--mini{grid-template-columns:repeat(2,minmax(0,1fr));gap:0 2.5rem}
.tarjetas--mini>li{border-bottom:1px solid var(--linea)}
.tarjetas--mini>li:nth-child(-n+2){border-top:1px solid var(--linea)}
.tarjetas--mini .tarjeta{display:grid;grid-template-columns:72px minmax(0,1fr);grid-template-rows:auto 1fr auto;column-gap:1rem;padding:1rem 0;border:0;border-radius:0;background:transparent;overflow:visible}
.tarjetas--mini .tarjeta img{grid-row:1/4;width:72px;height:72px;aspect-ratio:1;border-radius:var(--radio)}
.tarjetas--mini :is(.tarjeta__t,.tarjeta__d,.tarjeta__f){grid-column:2;padding:0}
.tarjetas--mini .tarjeta__t{font-size:1.08rem}
.tarjetas--mini .tarjeta__d{padding-top:.25rem;font-size:.93rem}
.tarjetas--mini .tarjeta:not(:has(img)){grid-template-columns:minmax(0,1fr)}
.tarjetas--mini .tarjeta:not(:has(img)) :is(.tarjeta__t,.tarjeta__d,.tarjeta__f){grid-column:1}
.tarjetas--mini .tarjeta:hover{transform:none}
.tarjetas--mini .tarjeta:hover .tarjeta__t{color:var(--acento-texto)}
@media(max-width:900px){.tarjetas--mini{grid-template-columns:minmax(0,1fr)}.tarjetas--mini>li:nth-child(2){border-top:0}}
@media(max-width:600px){.tarjetas--mini .tarjeta{grid-template-columns:64px minmax(0,1fr);column-gap:.85rem;padding:.85rem 0}.tarjetas--mini .tarjeta img{width:64px;height:64px}}

/* ---------- pasos (b) circulos: números en círculo unidos por una línea ---------- */
.pasos.pasos--circulos li{position:relative;border-top:0;padding-top:0}
.pasos.pasos--circulos li::before{content:counter(paso);display:grid;place-items:center;width:44px;height:44px;margin-bottom:.9rem;border-radius:50%;background:var(--acento);color:var(--sobre-acento);font-family:var(--f-display);font-size:1.05rem;letter-spacing:0}
.pasos.pasos--circulos li:not(:last-child)::after{content:"";position:absolute;top:21px;left:56px;right:-1rem;height:2px;background:var(--linea-2)}
.cuerpo .pasos.pasos--circulos{grid-template-columns:minmax(0,1fr);gap:1.1rem}
@media(max-width:800px){.pasos.pasos--circulos{gap:1.1rem}}
@media(max-width:800px){
  .pasos.pasos--circulos li{padding-left:60px;min-height:44px}
  .pasos.pasos--circulos li::before{position:absolute;left:0;top:0;margin:0}
  .pasos.pasos--circulos li:not(:last-child)::after{top:52px;bottom:-1rem;left:21px;right:auto;width:2px;height:auto}
  .pasos.pasos--circulos b{margin-top:.55rem}
}
.cuerpo .pasos.pasos--circulos li{padding-left:60px;min-height:44px}
.cuerpo .pasos.pasos--circulos li::before{position:absolute;left:0;top:0;margin:0}
.cuerpo .pasos.pasos--circulos li:not(:last-child)::after{top:52px;bottom:-1rem;left:21px;right:auto;width:2px;height:auto}
.cuerpo .pasos.pasos--circulos b{margin-top:.55rem}

/* ---------- pasos (c) tarjetas: fondo suave y número grande ---------- */
.pasos.pasos--tarjetas{gap:1rem}
.pasos.pasos--tarjetas li{border-top:0;padding:1.4rem 1.3rem 1.5rem;background:var(--papel-2);border-radius:calc(var(--radio) + 4px);box-shadow:inset 0 0 0 1px var(--linea)}
:is(.seccion--alt,.seccion--destacado,.bloque--destacado) .pasos.pasos--tarjetas li{background:var(--superficie);border:1px solid var(--linea)}
.pasos.pasos--tarjetas li::before{display:block;margin-bottom:.9rem;font-family:var(--f-display);font-weight:800;font-size:2.9rem;line-height:1;letter-spacing:-.04em}
.pasos.pasos--tarjetas b{margin-top:0}
@media(max-width:800px){
  .pasos.pasos--tarjetas{gap:.7rem}
  .pasos.pasos--tarjetas li{display:grid;grid-template-columns:auto minmax(0,1fr);column-gap:1rem;padding:1.1rem 1.1rem 1.2rem}
  .pasos.pasos--tarjetas li::before{grid-row:1/3;margin:0;font-size:2.3rem}
}
/* en la columna del cuerpo: una tarjeta por paso, número al costado (sin paso huérfano con 5) */
.cuerpo .pasos.pasos--tarjetas{grid-template-columns:minmax(0,1fr);gap:.7rem}
.cuerpo .pasos.pasos--tarjetas li{display:grid;grid-template-columns:3.3rem minmax(0,1fr);column-gap:1.1rem;padding:1.15rem 1.3rem 1.2rem}
.cuerpo .pasos.pasos--tarjetas li::before{grid-row:1/3;margin:0;font-size:2.4rem}

/* ---------- pasos (d) tiempo: línea de tiempo vertical con foto al costado ---------- */
.pasos-tl{container-type:inline-size}
.pasos-tl__foto img{width:100%;aspect-ratio:16/9;object-fit:cover;border-radius:calc(var(--radio) + 4px);margin-bottom:1.6rem}
@container (min-width:760px){
  .pasos-tl__in:not(.pasos-tl__in--sola){display:grid;grid-template-columns:minmax(0,5fr) minmax(0,6fr);column-gap:clamp(2.5rem,5vw,4.5rem);align-items:center}
  .pasos-tl__foto{position:sticky;top:110px}
  .pasos-tl__foto img{aspect-ratio:5/4;margin:0}
}
.pasos.pasos--tiempo{grid-template-columns:minmax(0,1fr);gap:0;max-width:620px}
.pasos.pasos--tiempo li{position:relative;border-top:0;padding:0 0 1.9rem 3.6rem}
.pasos.pasos--tiempo li:last-child{padding-bottom:0}
.pasos.pasos--tiempo li::before{content:counter(paso);position:absolute;left:0;top:0;display:grid;place-items:center;width:2.5rem;height:2.5rem;border-radius:50%;border:2px solid var(--acento-texto);background:var(--papel);color:var(--acento-texto);font-family:var(--f-display);font-size:1rem;letter-spacing:0}
.pasos.pasos--tiempo li:not(:last-child)::after{content:"";position:absolute;left:calc(1.25rem - 1px);top:2.85rem;bottom:.35rem;width:2px;background:var(--linea-2)}
.pasos.pasos--tiempo b{margin:.45rem 0 .3rem;font-size:1.2rem}

/* ---------- FAQ (b) dos: dos columnas, todo a la vista, la pregunta destacada ---------- */
.faq-dos>.cabeza .btn{margin-top:1.1rem;text-decoration:none}
@media(min-width:1000px){.faq-dos>.cabeza{display:grid;grid-template-columns:minmax(0,1fr) auto;column-gap:3rem;align-items:end;max-width:none}.faq-dos>.cabeza h2,.faq-dos>.cabeza p{grid-column:1;max-width:62ch}.faq-dos>.cabeza .btn{grid-column:2;grid-row:1/span 2;margin-top:0}}
.faq.faq--dos{max-width:none;border-top:0;display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:2.2rem 3rem}
.faq__i{padding-top:1.1rem;border-top:2px solid var(--acento)}
.faq__p{font-size:1.16rem;line-height:1.3;margin:0 0 .55rem}
.faq--dos .resp{padding:0}
@media(max-width:800px){.faq.faq--dos{grid-template-columns:minmax(0,1fr);gap:1.6rem}}

/* ---------- FAQ (c) borde: acordeón en fichas con borde de color e ícono ---------- */
.faq.faq--borde{border-top:0;display:grid;gap:.6rem}
.faq--borde details{border:1px solid var(--linea);border-left:4px solid var(--acento);border-radius:var(--radio);background:var(--superficie)}
.faq--borde summary{padding:1rem 3.6rem 1rem 1.1rem}
.faq--borde summary::after{content:"+";top:50%;right:.9rem;width:1.9rem;height:1.9rem;margin-top:-.95rem;display:grid;place-items:center;border-radius:50%;background:var(--acento);color:var(--sobre-acento);font-size:1.2rem;line-height:1;font-weight:700}
.faq--borde details[open]{border-color:var(--linea-2);border-left-color:var(--acento)}
.faq--borde details[open] summary::after{content:"\2013"}
.faq--borde .resp{padding:0 1.1rem 1.1rem}

/* ---------- precios (b) tarjetas: una ficha por rango, el rango grande ---------- */
:is(.precios--tarjetas,.precios--filas) .tabla-envoltura{border:0;background:transparent;border-radius:0;overflow:visible}
:is(.precios--tarjetas,.precios--filas) .tabla-precios thead{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0)}
:is(.precios--tarjetas,.precios--filas) .tabla-precios caption{padding:0 0 .9rem}
:is(.precios--tarjetas,.precios--filas) .tabla-precios :is(tbody th,td){display:block;padding:0;border:0}
:is(.precios--tarjetas,.precios--filas) .tabla-precios td[data-col]::before{content:attr(data-col) ": ";font-weight:600;color:var(--tinta)}
:is(.precios--tarjetas,.precios--filas) .tabla-precios td.rango::before{content:none}
.precios--tarjetas .tabla-precios tbody{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:.8rem}
/* número impar: la última tarjeta toma la fila entera, sin hueco */
.precios--tarjetas .tabla-precios tbody tr:last-child:nth-child(odd){grid-column:1/-1}
@media(max-width:560px){.precios--tarjetas .tabla-precios tbody{grid-template-columns:minmax(0,1fr)}}
.precios--tarjetas .tabla-precios tbody tr{display:flex;flex-direction:column;gap:.35rem;padding:1.15rem 1.2rem 1.25rem;border:1px solid var(--linea);border-top:3px solid var(--acento);border-radius:calc(var(--radio) + 2px);background:var(--superficie)}
.precios--tarjetas .tabla-precios tbody th{font-size:1rem;line-height:1.3}
.precios--tarjetas .tabla-precios td.rango{order:-1;white-space:normal;text-wrap:balance;font-family:var(--f-display);font-size:1.4rem;line-height:1.15;letter-spacing:-.015em;color:var(--acento-texto)}
.precios--tarjetas .tabla-precios td:not(.rango){font-size:.92rem}
/* un valor en texto ("lo que cuesta el cuaderno") parte con mayúscula cuando es el titular de la tarjeta o fila */
:is(.precios--tarjetas,.precios--filas) .tabla-precios td.rango::first-letter{text-transform:uppercase}

/* ---------- precios (c) filas: nombre a la izquierda, rango + barra a la derecha ---------- */
.precios--filas .tabla-precios tbody{display:block;border-top:2px solid var(--tinta)}
.precios--filas .tabla-precios tbody tr{display:grid;grid-template-columns:minmax(0,2fr) minmax(0,3fr);column-gap:1.6rem;row-gap:0;padding:1rem 0;border-bottom:1px solid var(--linea)}
.precios--filas .tabla-precios tbody th{grid-row:1/span 6;font-size:1.02rem;line-height:1.35}
.precios--filas .tabla-precios td{grid-column:2;font-size:.93rem}
.precios--filas .tabla-precios td+td{margin-top:.3rem}
.precios--filas .tabla-precios td.rango{white-space:normal;font-size:1.12rem;color:var(--acento-texto)}
.rbar{display:block;position:relative;height:8px;margin:.5rem 0 .15rem;border-radius:4px;background:var(--papel-3);box-shadow:inset 0 0 0 1px var(--linea)}
.rbar>span{position:absolute;top:0;bottom:0;left:var(--i,0%);right:calc(100% - var(--f,100%));min-width:8px;border-radius:4px;background:var(--acento)}
.rbar--desde>span{background:linear-gradient(90deg,var(--acento) 55%,color-mix(in srgb,var(--acento) 18%,transparent))}
.rb-i0{--i:0%}.rb-i1{--i:5%}.rb-i2{--i:10%}.rb-i3{--i:15%}.rb-i4{--i:20%}.rb-i5{--i:25%}.rb-i6{--i:30%}.rb-i7{--i:35%}.rb-i8{--i:40%}.rb-i9{--i:45%}.rb-i10{--i:50%}.rb-i11{--i:55%}.rb-i12{--i:60%}.rb-i13{--i:65%}.rb-i14{--i:70%}.rb-i15{--i:75%}.rb-i16{--i:80%}.rb-i17{--i:85%}.rb-i18{--i:90%}.rb-i19{--i:95%}
.rb-f1{--f:5%}.rb-f2{--f:10%}.rb-f3{--f:15%}.rb-f4{--f:20%}.rb-f5{--f:25%}.rb-f6{--f:30%}.rb-f7{--f:35%}.rb-f8{--f:40%}.rb-f9{--f:45%}.rb-f10{--f:50%}.rb-f11{--f:55%}.rb-f12{--f:60%}.rb-f13{--f:65%}.rb-f14{--f:70%}.rb-f15{--f:75%}.rb-f16{--f:80%}.rb-f17{--f:85%}.rb-f18{--f:90%}.rb-f19{--f:95%}.rb-f20{--f:100%}
@media(max-width:600px){
  .precios--filas .tabla-precios tbody tr{grid-template-columns:minmax(0,1fr)}
  .precios--filas .tabla-precios :is(tbody th,td){grid-column:1;grid-row:auto}
  .precios--filas .tabla-precios td.rango{margin-top:.25rem}
}

/* ---------- cierre (b) foto: la banda con una foto de fondo bajo un velo firme ---------- */
.cierre--foto{position:relative;isolation:isolate;overflow:hidden;padding:5.5rem 0}
.cierre__foto{position:absolute;inset:0;z-index:-1}
.cierre__foto img{width:100%;height:100%;object-fit:cover}
.cierre__foto::after{content:"";position:absolute;inset:0;background:linear-gradient(90deg,color-mix(in srgb,var(--banda) 93%,transparent) 0%,color-mix(in srgb,var(--banda) 86%,transparent) 52%,color-mix(in srgb,var(--banda) 66%,transparent) 100%)}
.cierre--foto .btn-borde{background:color-mix(in srgb,var(--banda) 60%,transparent)}
@media(max-width:900px){.cierre--foto{padding:3.6rem 0}.cierre__foto::after{background:color-mix(in srgb,var(--banda) 87%,transparent)}}

/* ---------- cierre (c) caja: dividida, texto + WhatsApp a la izquierda, teléfono grande a la derecha ---------- */
.cierre.cierre--caja{background:var(--papel);color:var(--tinta);padding:4rem 0 4.5rem}
.cierre--caja .wrap{display:block}
.cierre__caja{display:grid;grid-template-columns:minmax(0,7fr) minmax(0,5fr);border-radius:calc(var(--radio) + 8px);overflow:hidden;background:var(--banda);border:1px solid var(--banda-linea);box-shadow:0 24px 50px -34px var(--sombra)}
.cierre__txt{padding:clamp(1.6rem,3vw,2.8rem)}
.cierre--caja .cierre__cta{margin-top:1.3rem}
.cierre__tel{display:flex;flex-direction:column;justify-content:center;gap:.35rem;padding:clamp(1.6rem,3vw,2.8rem);background:var(--acento);color:var(--sobre-acento);text-decoration:none;transition:background-color .18s ease}
.cierre__tel:hover{background:var(--acento-hover);color:var(--sobre-acento);text-decoration:none}
.cierre__tel:focus-visible{outline:3px solid var(--foco);outline-offset:-6px}
.cierre__tel svg{width:28px;height:28px;margin-bottom:.4rem}
.cierre__tel-l{font-weight:700;font-size:1rem}
.cierre__tel-n{font-family:var(--f-display);font-weight:800;font-size:clamp(1.6rem,2.2vw + .6rem,2.5rem);line-height:1.05;letter-spacing:-.02em;white-space:nowrap;font-variant-numeric:tabular-nums}
@media(max-width:800px){.cierre.cierre--caja{padding:2.6rem 0 3rem}.cierre__caja{grid-template-columns:minmax(0,1fr)}.cierre__tel{padding:1.4rem 1.5rem}}
@media(max-width:600px){.cierre--caja .cierre__cta{display:grid}.cierre--caja .cierre__cta .btn{width:100%}}

@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-aconcagua-parcela{object-position:50% 55%}
.foco-araucania-laguna-banco{object-position:50% 50%}
.foco-camara-inspeccion-sumidero{object-position:50% 50%}
.foco-camping-banos-rurales{object-position:50% 55%}
.foco-cocina-restaurante-banco{object-position:50% 55%}
.foco-colchagua-vinedo{object-position:50% 55%}
.foco-coquimbo-valle-elqui{object-position:50% 50%}
.foco-desgrasadora-abierta{object-position:50% 55%}
.foco-drenaje-pasto-humedo{object-position:50% 55%}
.foco-escuela-rural-campo-banco{object-position:50% 55%}
.foco-grieta-tapa-sismo{object-position:50% 50%}
.foco-hero-camion-camino-rural{object-position:60% 50%}
.foco-hero-movil-camion-parcela{object-position:50% 100%}
.foco-lecheria-praderas-sur-banco{object-position:50% 55%}
.foco-litoral-casa-veraneo{object-position:50% 55%}
.foco-manguera-tapa-fosa{object-position:50% 55%}
.foco-maule-campo-casa{object-position:50% 55%}
.foco-noria-parcela{object-position:50% 50%}
.foco-nuble-trigal-banco{object-position:50% 55%}
.foco-operario-espaldas-camion{object-position:50% 45%}
.foco-pichilemu-costa-casa{object-position:50% 55%}
.foco-planta-elevadora-tablero{object-position:50% 50%}
.foco-planta-tratamiento-condominio{object-position:50% 55%}
.foco-pozo-negro-caseta-campo{object-position:50% 50%}
.foco-predio-agricola-temporada{object-position:50% 55%}
.foco-puerto-varas-osorno-banco{object-position:50% 50%}
.foco-riles-agroindustria{object-position:50% 55%}
.foco-sur-cabana-lago{object-position:50% 50%}
.foco-sur-lluvia-parcela{object-position:50% 55%}
.foco-tapa-fosa-cerrada{object-position:50% 60%}
.foco-valdivia-rio-banco{object-position:50% 55%}
.foco-valle-elqui-cerros-banco{object-position:50% 55%}
.foco-villarrica-volcan-lago-banco{object-position:50% 50%}