:root{--tinta:#101418;--gris:#5b6672;--linea:#e3e7eb;--acento:#0f6fd1;--fondo:#fff;--suave:#f5f7f9}
*{box-sizing:border-box;margin:0;padding:0}
body{font:17px/1.62 system-ui,-apple-system,"Segoe UI",Roboto,sans-serif;color:var(--tinta);background:var(--fondo);-webkit-text-size-adjust:100%}
.env{max-width:960px;margin:0 auto;padding:0 20px}

.tel{position:sticky;top:0;z-index:99;background:var(--acento);color:#fff;text-align:center;padding:10px 20px;box-shadow:0 1px 0 rgba(0,0,0,.12)}
.tel a{color:#fff;text-decoration:none;font-weight:700;font-size:22px;letter-spacing:.4px;white-space:nowrap}
.tel span{display:block;font-size:13px;opacity:.93;font-weight:400;margin-top:1px}

header{padding:46px 0 40px}
h1{font-size:clamp(29px,5.2vw,44px);line-height:1.15;letter-spacing:-.022em;margin-bottom:16px}
h1 em{font-style:normal;color:var(--acento)}
.lead{font-size:19px;color:var(--gris);max-width:650px}
.acciones{display:flex;flex-wrap:wrap;gap:12px;margin-top:28px}
.btn{display:inline-block;text-decoration:none;padding:16px 30px;border-radius:7px;font-weight:700;font-size:18px}
.btn-1{background:var(--acento);color:#fff}
.btn-2{background:var(--suave);color:var(--tinta);border:1px solid var(--linea)}
.btn small{display:block;font-weight:400;font-size:13px;opacity:.88;margin-top:2px}

section{padding:40px 0;border-top:1px solid var(--linea)}
h2{font-size:25px;letter-spacing:-.015em;margin-bottom:8px}
.sub{color:var(--gris);margin-bottom:20px}
h3{font-size:17px;margin-bottom:4px}

.rejilla{display:grid;gap:16px;grid-template-columns:repeat(auto-fit,minmax(236px,1fr))}
.card{background:var(--suave);padding:20px;border-radius:9px}
.card p{font-size:15px;color:var(--gris);margin-top:4px}

.frente{display:grid;grid-template-columns:1fr 1fr;border:1px solid var(--linea);border-radius:9px;overflow:hidden;margin-top:6px}
.frente>div{padding:20px}
.frente>div+div{border-left:1px solid var(--linea)}
.frente h3{font-size:15px;text-transform:uppercase;letter-spacing:.06em;color:var(--gris);margin-bottom:12px}
.frente li{list-style:none;padding:7px 0 7px 20px;position:relative;font-size:15.5px}
.frente li:before{content:"";position:absolute;left:2px;top:15px;width:6px;height:6px;border-radius:50%}
.malo li:before{background:#b9c0c7}
.bueno li:before{background:var(--acento)}
@media(max-width:620px){.frente{grid-template-columns:1fr}.frente>div+div{border-left:0;border-top:1px solid var(--linea)}}

ul.pasos{list-style:none;counter-reset:p}
ul.pasos li{padding:11px 0 11px 30px;position:relative;border-bottom:1px solid var(--linea);counter-increment:p}
ul.pasos li:last-child{border-bottom:0}
ul.pasos li:before{content:counter(p);position:absolute;left:0;top:11px;width:21px;height:21px;border-radius:50%;background:var(--acento);color:#fff;font-size:12px;font-weight:700;display:grid;place-items:center}

.zonas a{color:var(--tinta);text-decoration:none;border-bottom:1px solid var(--linea);display:inline-block;padding:5px 0;margin:0 16px 4px 0;font-size:15.5px}
.zonas a:hover{border-color:var(--acento);color:var(--acento)}

.cierre{background:var(--suave);border-radius:10px;padding:30px;text-align:center;margin-top:8px}
.cierre .grande{font-size:30px;font-weight:800;letter-spacing:-.02em;display:block;margin:6px 0 4px;color:var(--acento);text-decoration:none}

footer{padding:30px 0 48px;font-size:13px;color:var(--gris);border-top:1px solid var(--linea)}
footer p+p{margin-top:8px}
footer a{color:var(--gris)}

@media(prefers-color-scheme:dark){:root{--tinta:#e8ecf0;--gris:#98a4b0;--linea:#232a32;--fondo:#0d1116;--suave:#161c23}}

/* --- paginas de zona --- */
.miga{font-size:14px;color:var(--gris);margin-bottom:18px}
.miga a{color:var(--gris)}
section p+p{margin-top:12px}

/* --- galeria de trabajos --- */
.galeria{display:grid;gap:14px;grid-template-columns:repeat(auto-fit,minmax(260px,1fr))}
.galeria figure{margin:0}
.galeria img{width:100%;height:auto;aspect-ratio:4/3;object-fit:cover;
  border-radius:6px;background:var(--suave);display:block}
.galeria figcaption{font-size:14px;color:var(--gris);margin-top:7px}

/* --- esquema comparativo --- */
.esquema{margin:0 0 20px}
.esquema img{width:100%;height:auto;border-radius:6px;display:block;background:var(--suave)}
.esquema figcaption{font-size:14px;color:var(--gris);margin-top:7px}

/* --- imagenes --- */
.hero-img{margin:30px 0 0}
.hero-img img{width:100%;height:auto;border-radius:7px;display:block;
  aspect-ratio:4/3;object-fit:cover;background:var(--suave)}
.tira{display:grid;gap:14px;grid-template-columns:repeat(auto-fit,minmax(220px,1fr));margin-top:20px}
.tira figure{margin:0}
.tira img{width:100%;height:auto;aspect-ratio:4/3;object-fit:cover;
  border-radius:6px;display:block;background:var(--suave)}
.tira figcaption{font-size:14px;color:var(--gris);margin-top:6px}

/* Barra fija de llamada en movil: el gremio se contrata por telefono, no por formulario. */
.barra-tel{display:none}
@media (max-width:760px){
  .barra-tel{display:flex;position:fixed;left:0;right:0;bottom:0;z-index:99;
    align-items:center;justify-content:center;gap:10px;
    background:#0f6fd1;color:#fff;text-decoration:none;
    font-size:19px;font-weight:700;letter-spacing:.2px;
    padding:14px 16px calc(14px + env(safe-area-inset-bottom));
    box-shadow:0 -2px 12px rgba(0,0,0,.18)}
  .barra-tel svg{width:20px;height:20px;fill:currentColor;flex:none}
  .barra-tel small{display:block;font-size:12px;font-weight:400;opacity:.9;letter-spacing:0}
  body{padding-bottom:76px}
}