/* Servisur 24 — «En camino». Rojo techo, asfalto, sol, hormigón.
   Tipografía de cartel de ruta: Big Shoulders (títulos), Overpass (texto), Overpass Mono (datos). */
:root{
  --techo:#BF1E24; --techo-osc:#9A151A; --techo-suave:#F7E3E3;
  --asfalto:#16181B; --asfalto-2:#22252A; --tinta:#16181B; --tinta-2:#4B5058; --tinta-3:#6B7078;
  --hormigon:#F3F3F1; --blanco:#FFFFFF; --linea:#DCDCD8; --linea-2:#E8E8E5;
  --sol:#E39B0B; --sol-osc:#8A5B00; --sol-suave:#FBF0D9;
  --wa:#1C8C4C; --wa-osc:#146B39;
  --f-display:"Big Shoulders Display","Arial Narrow","Roboto Condensed",Impact,sans-serif;
  --f-body:"Overpass","Segoe UI",Roboto,Helvetica,Arial,sans-serif;
  --f-mono:"Overpass Mono",ui-monospace,Menlo,Consolas,monospace;
  --ancho:1180px; --lectura:66ch; --gutter:20px;
  --r:3px;
  color-scheme:light;
}
*,*::before,*::after{box-sizing:border-box}
html{-webkit-text-size-adjust:100%;scroll-behavior:smooth}
@media (prefers-reduced-motion:reduce){html{scroll-behavior:auto}*{animation:none!important;transition:none!important}}
body{margin:0;background:var(--hormigon);color:var(--tinta);font-family:var(--f-body);font-size:17px;line-height:1.6;-webkit-font-smoothing:antialiased}
img{max-width:100%;height:auto;display:block}
a{color:inherit}
p{margin:0}
h1,h2,h3,h4{font-family:var(--f-display);font-weight:900;line-height:.94;margin:0;text-transform:uppercase;text-wrap:balance;letter-spacing:.005em}
h1{font-size:clamp(56px,10vw,128px)}
h2{font-size:clamp(38px,5.4vw,64px)}
h3{font-size:clamp(24px,2.6vw,30px);font-weight:800}
:focus-visible{outline:3px solid var(--sol);outline-offset:2px}
.envoltura{max-width:var(--ancho);margin-inline:auto;padding-inline:var(--gutter)}
@media (max-width:480px){:root{--gutter:16px}}
.salto{position:absolute;left:-9999px}.salto:focus{left:16px;top:16px;z-index:100;background:var(--blanco);padding:8px 12px}
.ceja{font-family:var(--f-mono);font-size:13px;font-weight:600;letter-spacing:.12em;text-transform:uppercase;color:var(--techo)}
.lede{font-size:clamp(18px,1.9vw,21px);line-height:1.55;max-width:var(--lectura)}
.suave{color:var(--tinta-2)}
.chico{font-size:14px;color:var(--tinta-2)}
.mono{font-family:var(--f-mono);font-variant-numeric:tabular-nums}
.seccion{padding-block:clamp(56px,8vw,96px)}
.seccion+.seccion{border-top:1px solid var(--linea)}
.cabeza{display:grid;gap:12px;margin-bottom:clamp(28px,4vw,44px);max-width:860px}
.oscuro{background:var(--asfalto);color:var(--blanco)}
.oscuro .suave,.oscuro .chico{color:#B9BDC4}
.oscuro .ceja{color:#FF6B70}

/* ---------- botones ---------- */
.btn{display:inline-flex;align-items:center;justify-content:center;gap:10px;font-family:var(--f-body);font-weight:800;font-size:16px;line-height:1.1;padding:14px 20px;border-radius:var(--r);border:2px solid transparent;text-decoration:none;cursor:pointer;transition:transform .12s ease,background-color .12s ease}
.btn:hover{transform:translateY(-1px)}
.btn:active{transform:none}
.btn svg{width:20px;height:20px;flex:none}
.btn-wa{background:var(--wa);color:var(--blanco)}
.btn-wa:hover{background:var(--wa-osc)}
.btn-tel{background:var(--asfalto);color:var(--blanco)}
.oscuro .btn-tel{background:var(--blanco);color:var(--asfalto)}
.btn-linea{background:transparent;border-color:currentColor;color:inherit}
.btn-sol{background:var(--sol);color:var(--asfalto)}
.btn-techo{background:var(--techo);color:var(--blanco)}
.btn-techo:hover{background:var(--techo-osc)}
.btns{display:flex;flex-wrap:wrap;gap:10px}
.flecha{display:inline-flex;align-items:center;gap:6px;font-weight:800;text-decoration:none;border-bottom:2px solid var(--techo);padding-bottom:1px}

/* ---------- cabecera ---------- */
.cab{position:sticky;top:0;z-index:40;background:rgba(255,255,255,.96);backdrop-filter:saturate(1.4) blur(8px);border-bottom:1px solid var(--linea)}
.cab .envoltura{display:flex;align-items:center;justify-content:space-between;gap:16px;min-height:64px}
.logo{display:inline-flex;align-items:center;gap:10px;text-decoration:none;color:var(--asfalto)}
.logo svg{width:40px;height:26px;flex:none}
.logo span{font-family:var(--f-display);font-weight:900;font-size:27px;letter-spacing:.07em;line-height:1}
.logo b{color:var(--techo);font-weight:900}
.nav{display:flex;align-items:center;gap:4px}
.nav a{font-weight:600;font-size:15px;text-decoration:none;padding:8px 10px;border-radius:var(--r)}
.nav a:hover,.nav a[aria-current="page"]{background:var(--hormigon)}
.nav a.solar{color:var(--sol-osc)}
.cab-ctas{display:flex;gap:8px;align-items:center}
.cab-ctas .btn{padding:10px 14px;font-size:14px}
.menu{display:none}
@media (max-width:980px){
  .nav,.cab-ctas .btn-tel{display:none}
  .menu{display:block;position:relative}
  .menu summary{list-style:none;cursor:pointer;font-weight:800;font-size:15px;padding:9px 12px;border:2px solid var(--asfalto);border-radius:var(--r)}
  .menu summary::-webkit-details-marker{display:none}
  .menu[open] .menu-panel{display:grid}
  .menu-panel{display:none;position:absolute;right:0;top:calc(100% + 8px);background:var(--blanco);border:1px solid var(--linea);border-radius:4px;box-shadow:0 18px 40px -18px rgba(0,0,0,.35);padding:8px;min-width:240px;gap:2px}
  .menu-panel a{padding:10px 12px;text-decoration:none;font-weight:600;border-radius:var(--r)}
  .menu-panel a:hover{background:var(--hormigon)}
}
@media (max-width:560px){.cab-ctas .btn-wa{display:none}}

/* ---------- barra fija de urgencia (celular) ---------- */
.barra-fija{display:none}
@media (max-width:760px){
  .barra-fija{display:grid;grid-template-columns:1fr 1fr;gap:8px;position:fixed;left:0;right:0;bottom:0;z-index:50;padding:10px 12px calc(10px + env(safe-area-inset-bottom,0px));background:rgba(255,255,255,.97);border-top:1px solid var(--linea);box-shadow:0 -10px 30px -18px rgba(0,0,0,.35)}
  .barra-fija .btn{padding:13px 10px;font-size:15px}
  body{padding-bottom:calc(76px + env(safe-area-inset-bottom,0px))}
}

/* ---------- temporada ---------- */
.temporada{background:var(--asfalto);color:var(--blanco);font-size:15px}
.temporada .envoltura{display:flex;gap:12px;align-items:center;justify-content:center;flex-wrap:wrap;padding-block:9px;text-align:center}
.temporada b{font-family:var(--f-mono);font-size:12px;letter-spacing:.1em;text-transform:uppercase;color:var(--sol)}
.temporada a{color:var(--blanco);font-weight:700}
@media (max-width:560px){.temporada .envoltura{padding-block:7px;gap:10px;font-size:14px}.temporada span{display:none}}

/* ---------- hero ---------- */
.hero{padding-block:clamp(36px,6vw,72px) clamp(20px,3vw,32px)}
.hero-grilla{display:grid;grid-template-columns:minmax(0,1.2fr) minmax(0,.8fr);gap:clamp(28px,5vw,64px);align-items:center}
@media (max-width:880px){.hero-grilla{grid-template-columns:1fr}}
.hero h1 em{font-style:normal;color:var(--techo);display:block}
.hero-grilla{align-items:start}
.hero-titulo{font-family:var(--f-body);font-weight:800;font-size:clamp(20px,2.1vw,24px);line-height:1.35;margin-top:22px;max-width:var(--lectura)}
.hero .hero-titulo+.lede{margin-top:12px}
.hero-puntos{list-style:none;margin:20px 0 0;padding:0;display:grid;gap:12px;max-width:var(--lectura)}
.hero-puntos li{position:relative;padding-left:22px;font-size:16.5px;line-height:1.55;color:var(--tinta-2)}
.hero-puntos li::before{content:"";position:absolute;left:0;top:.62em;width:9px;height:9px;background:var(--techo);transform:rotate(45deg)}
.hero-puntos b{color:var(--tinta)}
.hogar{display:grid;grid-template-columns:30px minmax(0,1fr);gap:12px;align-items:start;margin-top:22px;padding:16px 18px;background:var(--sol-suave);border:1px solid #EED9A8;border-left:5px solid var(--sol);border-radius:4px;max-width:var(--lectura)}
.hogar svg{width:28px;height:28px;color:var(--sol-osc)}
.hogar p{font-size:16.5px;line-height:1.55}
.sello-dato{display:inline-block;justify-self:start;margin-top:10px;font-family:var(--f-mono);font-size:11.5px;letter-spacing:.06em;text-transform:uppercase;padding:4px 8px;border:1px solid var(--techo);color:var(--techo);border-radius:2px}
.confianza p+p{margin-top:8px}
.confianza .flecha{margin-top:10px;justify-self:start}
.motor p{font-size:15.5px}
.hero .lede{margin-top:20px}
.hero .btns{margin-top:26px}
.hero-foto{position:relative;margin:0;border-radius:4px;overflow:hidden;aspect-ratio:4/5;max-height:600px;background:var(--linea)}
@media (min-width:881px){.hero-foto{position:sticky;top:96px}}
.hero-foto img{width:100%;height:100%;object-fit:cover;object-position:50% 45%}
.hero-foto figcaption{position:absolute;left:12px;bottom:12px;right:12px;display:flex;gap:8px;flex-wrap:wrap}
.hero-foto figcaption span{background:rgba(22,24,27,.86);color:var(--blanco);font-family:var(--f-mono);font-size:12px;letter-spacing:.06em;padding:5px 9px;border-radius:2px}
@media (max-width:880px){.hero-foto{aspect-ratio:16/11;max-height:none}}
.sellos{display:flex;flex-wrap:wrap;gap:8px 18px;margin-top:22px;font-family:var(--f-mono);font-size:13px;color:var(--tinta-2)}
.sellos span{display:inline-flex;align-items:center;gap:8px}
.sellos span::before{content:"";width:8px;height:8px;background:var(--techo);transform:rotate(45deg)}

/* ---------- ¿llegamos? ---------- */
.llegamos{margin-top:28px;background:var(--blanco);border:1px solid var(--linea);border-radius:4px;padding:16px;display:grid;gap:10px;max-width:560px}
.llegamos label{font-weight:800;font-size:16px}
.llegamos-fila{display:flex;gap:8px}
.llegamos-fila input{flex:1;min-width:0}
input[type=text],input[type=number],select,textarea{font:inherit;font-size:16px;color:var(--tinta);background:var(--blanco);border:2px solid var(--linea);border-radius:var(--r);padding:11px 12px;width:100%}
input:focus,select:focus,textarea:focus{border-color:var(--asfalto);outline:none}
textarea{min-height:84px;resize:vertical}
.resultado{display:none;gap:4px;border-left:4px solid var(--wa);padding:6px 0 6px 12px}
.resultado.ver{display:grid}
.resultado.lejos{border-color:var(--sol)}
.resultado b{font-size:17px}
.resultado .mono{font-size:13px;color:var(--tinta-2)}

/* ---------- servicios ---------- */
.grilla-serv{display:grid;grid-template-columns:repeat(auto-fill,minmax(min(250px,100%),1fr));gap:12px}
.serv{display:grid;gap:8px;align-content:start;background:var(--blanco);border:1px solid var(--linea);border-radius:4px;padding:18px 18px 16px;text-decoration:none;position:relative;transition:border-color .15s ease,transform .15s ease}
.serv:hover{border-color:var(--asfalto);transform:translateY(-2px)}
.serv .nombre{font-family:var(--f-display);font-weight:900;font-size:30px;text-transform:uppercase;line-height:1}
.serv p{font-size:15px;color:var(--tinta-2)}
.serv .ir{font-family:var(--f-mono);font-size:12px;letter-spacing:.08em;color:var(--techo);text-transform:uppercase}
.serv.sol{background:var(--sol-suave);border-color:#EED9A8}
.serv.sol .ir{color:var(--sol-osc)}
.serv.oscuro{background:var(--asfalto);border-color:var(--asfalto);color:var(--blanco)}
.serv.oscuro p{color:#B9BDC4}
.serv.oscuro .ir{color:#FF6B70}

/* ---------- confianza ---------- */
.confianza{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:0;border-top:3px solid var(--asfalto)}
.confianza>div{padding:18px 18px 4px 0;display:grid;gap:6px;align-content:start}
.confianza>div+div{padding-left:18px;border-left:1px solid var(--linea)}
.confianza b{font-family:var(--f-display);font-size:26px;font-weight:900;text-transform:uppercase;line-height:1}
.confianza p{font-size:15px;color:var(--tinta-2)}
@media (max-width:900px){.confianza{grid-template-columns:1fr 1fr}.confianza>div:nth-child(3){padding-left:0;border-left:0}.confianza>div:nth-child(n+3){border-top:1px solid var(--linea);margin-top:8px}}
@media (max-width:520px){.confianza{grid-template-columns:1fr}.confianza>div+div{padding-left:0;border-left:0;border-top:1px solid var(--linea)}}

/* ---------- motores ---------- */
.motores{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:14px}
@media (max-width:900px){.motores{grid-template-columns:1fr}}
.motor{display:grid;gap:12px;align-content:start;padding:26px;border-radius:4px;text-decoration:none;background:var(--blanco);border:1px solid var(--linea)}
.motor.oscuro{background:var(--asfalto);color:var(--blanco);border-color:var(--asfalto)}
.motor.sol{background:var(--sol-suave);border-color:#EED9A8}
.motor h3{font-size:clamp(28px,3vw,36px)}
.motor ul{margin:0;padding-left:18px;display:grid;gap:4px;font-size:15px}
.motor .flecha{justify-self:start;margin-top:4px}
.motor.oscuro .flecha{border-color:#FF6B70}
.motor.sol .flecha{border-color:var(--sol)}

/* ---------- bitácora ---------- */
.bitacora{display:grid;grid-template-columns:repeat(auto-fill,minmax(min(240px,100%),1fr));gap:16px}
.trabajo-card{display:grid;gap:10px;align-content:start;text-decoration:none}
.trabajo-card .ph{position:relative;aspect-ratio:4/5;border-radius:4px;overflow:hidden;background:var(--linea)}
.trabajo-card .ph img{width:100%;height:100%;object-fit:cover;transition:transform .3s ease}
.trabajo-card:hover .ph img{transform:scale(1.03)}
.trabajo-card .rubro{position:absolute;left:10px;top:10px;background:var(--asfalto);color:var(--blanco);font-family:var(--f-mono);font-size:11px;letter-spacing:.06em;text-transform:uppercase;padding:4px 8px;border-radius:2px}
.trabajo-card b{font-size:16px;line-height:1.3}

/* ---------- mapa ---------- */
.mapa-grilla{display:grid;grid-template-columns:minmax(0,1.1fr) minmax(0,.9fr);gap:clamp(24px,4vw,48px);align-items:start}
@media (max-width:900px){.mapa-grilla{grid-template-columns:1fr}}
.mapa{background:#E9EAE6;border-radius:4px;overflow:hidden}
.mapa svg{display:block;width:100%;height:auto}
.mapa .amba{fill:var(--techo);fill-opacity:.13;stroke:var(--techo);stroke-width:1.6;stroke-dasharray:6 5;stroke-linejoin:round}
.mapa .caba polygon{fill:var(--techo);fill-opacity:.34;stroke:var(--techo);stroke-width:2;stroke-linejoin:round;transition:fill-opacity .15s ease}
.mapa .caba.link{cursor:pointer}
.mapa .caba.link:hover polygon,.mapa .caba.link:focus polygon{fill-opacity:.5}
.mapa .pt circle{fill:var(--blanco);stroke:var(--tinta-3);stroke-width:1.5}
.mapa .pt.op circle{fill:var(--techo);stroke:var(--blanco);stroke-width:1.2}
.mapa .pt text{font-family:var(--f-body);font-size:11.5px;font-weight:600;fill:var(--tinta);paint-order:stroke;stroke:#E9EAE6;stroke-width:3px;stroke-linejoin:round}
.mapa .pt.link{cursor:pointer}
.mapa .pt.link:hover circle,.mapa .pt.link:focus circle{fill:var(--asfalto);stroke:var(--asfalto)}
.mapa .pt.link:focus{outline:none}
.mapa .pt.link:focus text{text-decoration:underline}
.mapa .zona text{font-family:var(--f-display);font-weight:900;font-size:19px;letter-spacing:.06em;fill:var(--techo-osc);paint-order:stroke;stroke:#E9EAE6;stroke-width:4px;stroke-linejoin:round}
.mapa .zona.link{cursor:pointer}
.mapa .zona.link:hover text,.mapa .zona.link:focus text{fill:var(--asfalto)}
.mapa .zona.link:focus{outline:none}
.mapa .base rect{fill:var(--asfalto);stroke:var(--blanco);stroke-width:2}
.mapa .base text{font-family:var(--f-display);font-weight:900;font-size:15px;letter-spacing:.04em;fill:var(--asfalto);paint-order:stroke;stroke:#E9EAE6;stroke-width:4px}
.mapa .leyenda text{font-family:var(--f-body);font-size:11.5px;fill:var(--tinta-2)}
.mapa .ley-op{fill:var(--techo);fill-opacity:.25;stroke:var(--techo);stroke-width:1.4}
.mapa .ley-base{fill:var(--asfalto)}
.mapa .ley-turno{fill:var(--blanco);stroke:var(--tinta-3);stroke-width:1.5}
.tabla-zonas{width:100%;border-collapse:collapse;font-size:15px}
.tabla-zonas th{font-family:var(--f-mono);font-size:11.5px;letter-spacing:.08em;text-transform:uppercase;color:var(--tinta-2);text-align:left;font-weight:600;padding:0 8px 8px 0;border-bottom:2px solid var(--asfalto)}
.tabla-zonas td{padding:9px 8px 9px 0;border-bottom:1px solid var(--linea);vertical-align:top}
.tabla-zonas td.n{font-family:var(--f-mono);font-variant-numeric:tabular-nums;white-space:nowrap}
.nivel{display:inline-block;font-family:var(--f-mono);font-size:11px;letter-spacing:.04em;padding:2px 7px;border-radius:2px;white-space:nowrap}
.nivel.n0{background:var(--techo);color:var(--blanco)}
.nivel.n1{background:#DDF1E4;color:var(--wa-osc)}
.nivel.n2{background:#E7EEF7;color:#24507A}
.nivel.n3{background:var(--sol-suave);color:var(--sol-osc)}
.nivel.n4{background:var(--linea-2);color:var(--tinta-2)}
.tabla-wrap{overflow-x:auto}

/* ---------- ruta 6 ---------- */
.ruta-wrap{overflow-x:auto;padding-bottom:8px}
.ruta{position:relative;display:grid;grid-template-columns:repeat(8,minmax(104px,1fr));min-width:860px;padding-top:12px}
.ruta::before{content:"";position:absolute;left:0;right:0;top:20px;height:8px;background:var(--asfalto);border-radius:2px}
.parada{position:relative;display:grid;gap:2px;padding-top:30px;padding-right:8px;text-decoration:none}
.parada::before{content:"";position:absolute;top:0;left:0;width:22px;height:22px;border-radius:50%;background:var(--blanco);border:3px solid var(--asfalto)}
.parada b{font-family:var(--f-display);font-weight:800;font-size:20px;text-transform:uppercase;line-height:1.05}
.parada span{font-family:var(--f-mono);font-size:12px;color:var(--tinta-2)}
.parada.base::before{background:var(--techo);border-color:var(--techo);border-radius:3px;transform:rotate(45deg)}
.parada.base b{color:var(--techo)}

/* ---------- guías ---------- */
.guias{display:grid;grid-template-columns:repeat(auto-fill,minmax(min(220px,100%),1fr));gap:12px}
.guia-card{display:grid;gap:6px;align-content:start;padding:18px;border-radius:4px;background:var(--techo-suave);border-left:5px solid var(--techo);text-decoration:none}
.guia-card b{font-family:var(--f-display);font-size:26px;font-weight:900;text-transform:uppercase;line-height:1}
.guia-card span{font-size:14px;color:var(--tinta-2)}

/* ---------- banda recomendar ---------- */
.banda{display:grid;grid-template-columns:minmax(0,1.2fr) minmax(0,.8fr);gap:28px;align-items:center}
@media (max-width:860px){.banda{grid-template-columns:1fr}}

/* ---------- cabecera de página interna ---------- */
.pag-cab{padding-block:clamp(40px,6vw,72px) clamp(36px,5vw,56px)}
.pag-cab h1{font-size:clamp(52px,8.5vw,108px)}
.pag-cab .lede{margin-top:18px}
.pag-cab .btns{margin-top:24px}
.pag-cab.sol{background:var(--sol-suave)}
.migas{font-family:var(--f-mono);font-size:12.5px;letter-spacing:.06em;margin-bottom:18px}
.migas a{text-decoration:none;color:inherit;opacity:.75}
.migas a:hover{opacity:1;text-decoration:underline}
.chips{display:flex;flex-wrap:wrap;gap:8px;margin-top:18px}
.chip{font-family:var(--f-mono);font-size:12px;letter-spacing:.06em;padding:5px 9px;border:1px solid currentColor;border-radius:2px;opacity:.9}

/* ---------- lista de trabajos con tiempos ---------- */
.dos{display:grid;grid-template-columns:minmax(0,1.1fr) minmax(0,.9fr);gap:clamp(28px,5vw,56px);align-items:start}
@media (max-width:900px){.dos{grid-template-columns:1fr}}
.lista-t{list-style:none;margin:0;padding:0;border-top:2px solid var(--asfalto)}
.lista-t li{display:flex;justify-content:space-between;gap:16px;align-items:baseline;padding:14px 0;border-bottom:1px solid var(--linea);font-size:17px}
.tiempo{font-family:var(--f-mono);font-size:11.5px;letter-spacing:.06em;text-transform:uppercase;padding:3px 8px;border-radius:2px;white-space:nowrap;flex:none}
.tiempo.urgencia{background:var(--techo);color:var(--blanco)}
.tiempo.en-el-dia{background:var(--asfalto);color:var(--blanco)}
.tiempo.programado{background:var(--linea-2);color:var(--tinta)}
.tiempo.preventivo{background:#DDF1E4;color:var(--wa-osc)}
.caja-guia{background:var(--techo-suave);border-left:6px solid var(--techo);padding:20px 22px;border-radius:3px;display:grid;gap:10px}
.caja-guia h3{font-size:28px}
.caja-guia ol{margin:0;padding-left:20px;display:grid;gap:6px;font-size:15.5px}

/* ---------- pedido por WhatsApp ---------- */
.pedido{background:var(--blanco);border:1px solid var(--linea);border-radius:4px;padding:clamp(18px,3vw,28px);display:grid;gap:16px}
.pedido h3{font-size:30px}
.campo{display:grid;gap:6px}
.campo>label,.campo>.etq{font-family:var(--f-mono);font-size:12px;letter-spacing:.08em;text-transform:uppercase;color:var(--tinta-2);font-weight:600}
.opciones{display:flex;flex-wrap:wrap;gap:6px}
.opciones label{position:relative;cursor:pointer}
.opciones input{position:absolute;opacity:0;pointer-events:none}
.opciones span{display:inline-block;font-size:15px;font-weight:700;padding:9px 13px;border:2px solid var(--linea);border-radius:var(--r);background:var(--blanco)}
.opciones input:checked+span{background:var(--asfalto);border-color:var(--asfalto);color:var(--blanco)}
.opciones input:focus-visible+span{outline:3px solid var(--sol);outline-offset:2px}
.opciones.rojo input:checked+span{background:var(--techo);border-color:var(--techo)}
.previa{font-size:14px;background:#E9F6EC;border-radius:4px;padding:12px 14px;white-space:pre-wrap;color:#0F2A17;font-family:var(--f-body)}
.previa-etq{font-family:var(--f-mono);font-size:11px;letter-spacing:.08em;text-transform:uppercase;color:var(--tinta-2)}

/* ---------- compartir ---------- */
.compartir{display:flex;flex-wrap:wrap;gap:8px;align-items:center}
.compartir .btn{padding:10px 14px;font-size:14px}
.compartir .ok{font-family:var(--f-mono);font-size:12px;color:var(--wa)}

/* ---------- fotos de servicio ---------- */
.estructura{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:16px}
.estructura figure{margin:0;display:grid;gap:10px;align-content:start}
.estructura picture{display:block;aspect-ratio:4/3;border-radius:4px;overflow:hidden;background:var(--linea)}
.estructura img{width:100%;height:100%;object-fit:cover}
.estructura .vertical img{object-position:50% 30%}
.estructura .base img{object-position:90% 50%}
.estructura figcaption{display:grid;gap:2px}
.estructura b{font-family:var(--f-display);font-size:24px;font-weight:900;text-transform:uppercase;line-height:1}
.estructura span{font-size:15px;color:var(--tinta-2)}
@media (max-width:880px){.estructura{grid-template-columns:1fr}.estructura picture{aspect-ratio:16/10}}
.fotos{display:grid;grid-template-columns:repeat(auto-fill,minmax(min(200px,100%),1fr));gap:12px}
.fotos figure{margin:0;border-radius:4px;overflow:hidden;aspect-ratio:4/5;background:var(--linea)}
.fotos img{width:100%;height:100%;object-fit:cover}

/* ---------- solar ---------- */
.calc{display:grid;grid-template-columns:minmax(0,.9fr) minmax(0,1.1fr);gap:clamp(20px,4vw,40px);background:var(--blanco);border:1px solid var(--linea);border-radius:4px;padding:clamp(18px,3vw,32px)}
@media (max-width:900px){.calc{grid-template-columns:1fr}}
input[type=range]{width:100%;accent-color:var(--sol);height:28px}
.salida{display:grid;grid-template-columns:1fr 1fr;gap:10px;align-content:start}
.salida>div{background:var(--sol-suave);border-radius:4px;padding:14px 16px;display:grid;gap:2px}
.salida small{font-family:var(--f-mono);font-size:11px;letter-spacing:.08em;text-transform:uppercase;color:var(--tinta-2)}
.salida b{font-family:var(--f-display);font-size:clamp(30px,3.4vw,40px);font-weight:900;line-height:1}
.salida .ancho{grid-column:1/-1}
.barras{display:grid;gap:6px;margin-top:4px}
.barras .b{display:grid;grid-template-columns:96px minmax(0,1fr) 100px;gap:8px;align-items:center;font-size:13px}
.barras .tr{height:14px;background:var(--linea);border-radius:2px;position:relative;overflow:hidden}
.barras .tr i{position:absolute;inset:0 auto 0 0;background:var(--tinta-3);border-radius:2px;transition:width .25s ease}
.barras .b.desp .tr i{background:var(--sol)}
.barras .v{font-family:var(--f-mono);font-size:12px;text-align:right}
.pasos-num{list-style:none;margin:0;padding:0;counter-reset:p;display:grid;gap:0;border-top:2px solid var(--asfalto)}
.pasos-num li{counter-increment:p;display:grid;grid-template-columns:44px minmax(0,1fr);gap:12px;padding:16px 0;border-bottom:1px solid var(--linea)}
.pasos-num li::before{content:counter(p);font-family:var(--f-display);font-weight:900;font-size:32px;line-height:1;color:var(--techo)}
.pasos-num b{display:block}
.pasos-num p{font-size:15.5px;color:var(--tinta-2)}
.sol .pasos-num li::before{color:var(--sol-osc)}
.tres{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:14px}
@media (max-width:900px){.tres{grid-template-columns:1fr}}
.tarjeta{background:var(--blanco);border:1px solid var(--linea);border-radius:4px;padding:22px;display:grid;gap:10px;align-content:start}
.tarjeta h3{font-size:28px}
.tarjeta p,.tarjeta li{font-size:15.5px;color:var(--tinta-2)}
.tarjeta ul{margin:0;padding-left:18px;display:grid;gap:4px}

/* ---------- abonos ---------- */
.abonos{display:grid;grid-template-columns:repeat(auto-fit,minmax(min(260px,100%),1fr));gap:14px}
.abono{background:var(--blanco);border:1px solid var(--linea);border-radius:4px;padding:22px;display:grid;gap:12px;align-content:start;border-top:5px solid var(--asfalto)}
.abono:nth-child(2){border-top-color:var(--techo)}
.abono:nth-child(3){border-top-color:var(--tinta-3)}
.abono:nth-child(4){border-top-color:var(--sol)}
.abono .para{font-family:var(--f-mono);font-size:12px;letter-spacing:.08em;text-transform:uppercase;color:var(--tinta-2)}
.abono ul{margin:0;padding-left:18px;display:grid;gap:5px;font-size:15px}

/* ---------- zona ---------- */
.mojon{display:inline-grid;place-items:center;background:var(--blanco);border:3px solid var(--asfalto);border-radius:14px 14px 3px 3px;padding:8px 18px 6px;text-align:center;font-family:var(--f-mono);font-weight:600;font-size:13px;line-height:1.1;color:var(--asfalto)}
.mojon b{display:block;font-family:var(--f-display);font-size:56px;font-weight:900;line-height:.95}
.datos{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:0;border-top:3px solid var(--asfalto)}
.datos>div{padding:16px 16px 0 0;display:grid;gap:4px;align-content:start}
.datos>div+div{padding-left:16px;border-left:1px solid var(--linea)}
.datos small{font-family:var(--f-mono);font-size:11px;letter-spacing:.08em;text-transform:uppercase;color:var(--tinta-2)}
.datos b{font-family:var(--f-display);font-size:40px;font-weight:900;line-height:1}
.datos p{font-size:14px;color:var(--tinta-2)}
@media (max-width:760px){.datos{grid-template-columns:1fr 1fr}.datos>div:nth-child(3){padding-left:0;border-left:0}.datos>div:nth-child(n+3){border-top:1px solid var(--linea);margin-top:12px}}

/* ---------- móvil / emergencia ---------- */
.movil-num{font-family:var(--f-display);font-weight:900;font-size:clamp(120px,24vw,260px);line-height:.8;color:var(--techo)}
.emerg{display:grid;grid-template-columns:minmax(0,.8fr) minmax(0,1.2fr);gap:clamp(24px,4vw,48px);align-items:start}
@media (max-width:860px){.emerg{grid-template-columns:1fr}}
.emerg img{border-radius:6px;box-shadow:0 22px 50px -24px rgba(0,0,0,.5);max-width:420px;width:100%}
.numeros{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:10px}
.numeros div{background:var(--blanco);border:1px solid var(--linea);border-radius:4px;padding:14px;display:grid;gap:2px}
.numeros b{font-family:var(--f-display);font-size:44px;font-weight:900;line-height:1}
.numeros span{font-size:13px;color:var(--tinta-2)}

/* ---------- guía ---------- */
.pasos-guia{list-style:none;margin:0;padding:0;counter-reset:g;display:grid;gap:0;max-width:760px}
.pasos-guia li{counter-increment:g;display:grid;grid-template-columns:56px minmax(0,1fr);gap:14px;padding:18px 0;border-bottom:1px solid var(--linea);font-size:18px;line-height:1.5}
.pasos-guia li::before{content:counter(g);display:grid;place-items:center;width:44px;height:44px;border-radius:50%;background:var(--techo);color:var(--blanco);font-family:var(--f-display);font-weight:900;font-size:24px}

/* ---------- textos largos ---------- */
.texto{max-width:var(--lectura);display:grid;gap:14px}
.texto h2{font-size:clamp(28px,3.4vw,40px);margin-top:18px}
.texto p,.texto li{color:var(--tinta-2)}
.texto ul{margin:0;padding-left:20px;display:grid;gap:6px}
.aviso{background:var(--sol-suave);border-left:5px solid var(--sol);padding:14px 18px;border-radius:2px;font-size:15px}

/* ---------- pie ---------- */
.pie{background:var(--asfalto);color:#C9CCD1;padding-block:56px 36px;font-size:15px}
.pie a{color:var(--blanco);text-decoration:none}
.pie a:hover{text-decoration:underline}
.pie-grilla{display:grid;grid-template-columns:minmax(0,1.4fr) repeat(3,minmax(0,1fr));gap:28px}
@media (max-width:860px){.pie-grilla{grid-template-columns:1fr 1fr}}
@media (max-width:520px){.pie-grilla{grid-template-columns:1fr}}
.pie h4{font-family:var(--f-mono);font-size:12px;letter-spacing:.1em;color:#8D939B;margin-bottom:10px;font-weight:600}
.pie ul{list-style:none;margin:0;padding:0;display:grid;gap:6px}
.pie .grande{font-family:var(--f-display);font-weight:900;font-size:clamp(40px,6vw,64px);text-transform:uppercase;line-height:.9;color:var(--blanco)}
.pie .grande span{color:#FF6B70;display:block}
.pie-legal{margin-top:36px;padding-top:18px;border-top:1px solid #33373D;display:flex;justify-content:space-between;gap:16px;flex-wrap:wrap;font-size:13px;color:#8D939B}
.pie-legal a{color:#C9CCD1}

/* ---------- utilidades ---------- */
.mt-s{margin-top:12px}.mt-m{margin-top:24px}.mt-l{margin-top:40px}
.oculto{display:none!important}

/* ---------- zonas operativas ---------- */
.operativas{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:12px}
@media (max-width:980px){.operativas{grid-template-columns:repeat(2,minmax(0,1fr))}}
@media (max-width:520px){.operativas{grid-template-columns:1fr}}
.op-card{display:grid;gap:8px;align-content:start;padding:20px;border-radius:4px;text-decoration:none;background:var(--blanco);border:1px solid var(--linea);border-top:5px solid var(--techo);transition:transform .15s ease,border-color .15s ease}
.op-card:hover{transform:translateY(-2px);border-color:var(--asfalto);border-top-color:var(--techo)}
.op-card .estado{font-family:var(--f-mono);font-size:11.5px;letter-spacing:.08em;text-transform:uppercase;color:var(--techo);font-weight:600}
.op-card b{font-family:var(--f-display);font-weight:900;font-size:32px;text-transform:uppercase;line-height:1}
.op-card p{font-size:14.5px;color:var(--tinta-2)}
.op-card.base{border-top-color:var(--asfalto)}
.op-card.base .estado{color:var(--tinta-2)}
.barrios{display:flex;flex-wrap:wrap;gap:6px}
.barrios span{font-size:14px;padding:5px 10px;background:var(--blanco);border:1px solid var(--linea);border-radius:2px}

/* ---------- cartel «seguridad en tu puerta» (inicio) ---------- */
.cartel-seguridad{background:var(--asfalto);color:var(--blanco);border-bottom:4px solid var(--techo)}
.cartel-grilla{display:grid;grid-template-columns:minmax(0,1.35fr) minmax(0,.65fr);gap:clamp(20px,4vw,48px);align-items:center;padding-block:clamp(22px,3.5vw,34px)}
@media (max-width:820px){.cartel-grilla{grid-template-columns:1fr}}
.cartel-seguridad .ceja{color:#FF6B70}
.cartel-titulo{font-family:var(--f-display);font-weight:900;font-size:clamp(30px,4.2vw,46px);line-height:.95;text-transform:uppercase;margin:6px 0 10px}
.cartel-texto p:last-child{color:#D5D8DC;font-size:clamp(16px,1.6vw,18px);max-width:62ch}
.cartel-texto strong{color:var(--blanco)}
.cartel-ficha{background:var(--blanco);color:var(--asfalto);border-radius:10px;padding:14px;display:grid;gap:10px;box-shadow:0 18px 40px -20px rgba(0,0,0,.6);max-width:360px;width:100%;justify-self:end}
@media (max-width:820px){.cartel-ficha{justify-self:start}}
.cf-cab{display:grid;grid-template-columns:52px 1fr;gap:12px;align-items:center}
.cf-foto{width:52px;height:68px;border-radius:6px;border:2px solid var(--asfalto);background:radial-gradient(circle at 50% 36%,#B9BDC4 0 22%,transparent 23%),radial-gradient(ellipse at 50% 100%,#B9BDC4 0 46%,transparent 47%),#E9EAE6}
.cf-cab b{display:block;font-family:var(--f-display);font-weight:900;font-size:22px;text-transform:uppercase;line-height:1}
.cf-cab i{display:block;font-style:normal;font-size:13px;color:var(--tinta-2);margin-top:2px}
.cf-cab em{display:inline-block;font-style:normal;font-family:var(--f-mono);font-size:10.5px;font-weight:600;text-transform:uppercase;letter-spacing:.04em;background:#DDF1E4;color:var(--wa-osc);padding:2px 6px;border-radius:2px;margin-top:5px}
.cf-mapa{position:relative;height:74px;border-radius:6px;background:#E9EAE6;overflow:hidden;background-image:linear-gradient(0deg,transparent 47%,#fff 47% 53%,transparent 53%),linear-gradient(90deg,transparent 30%,#fff 30% 34%,transparent 34%,transparent 70%,#fff 70% 73%,transparent 73%)}
.cf-ruta{position:absolute;left:14%;right:16%;top:50%;border-top:3px dashed var(--techo);transform:translateY(-50%)}
.cf-auto{position:absolute;left:12%;top:50%;width:16px;height:16px;border-radius:50%;background:var(--techo);border:3px solid #fff;transform:translate(-50%,-50%);box-shadow:0 2px 6px rgba(0,0,0,.3);animation:cf-viaje 6s ease-in-out infinite alternate}
.cf-casa{position:absolute;right:12%;top:50%;width:16px;height:16px;background:var(--asfalto);border:3px solid #fff;transform:translate(50%,-50%) rotate(45deg)}
@keyframes cf-viaje{from{left:12%}to{left:62%}}
.cf-eta{display:flex;align-items:center;gap:8px;font-size:15px}
.cf-eta b{font-family:var(--f-display);font-weight:900;font-size:24px}
.cf-vivo{width:9px;height:9px;border-radius:50%;background:var(--techo)}
@media (prefers-reduced-motion:reduce){.cf-auto{animation:none;left:40%}}
/* aire: service antes del verano */
.lista-inc{list-style:none;margin:0;padding:0;border-top:2px solid var(--asfalto)}
.lista-inc li{display:grid;grid-template-columns:minmax(0,11em) minmax(0,1fr);gap:4px 16px;padding:12px 0;border-bottom:1px solid var(--linea);font-size:16px}
.lista-inc li span{color:var(--tinta-2)}
@media (max-width:560px){.lista-inc li{grid-template-columns:1fr}}
#service,#pa{scroll-margin-top:90px}