:root{
  --azul:#16324f; --azul-2:#21486f; --naranja:#f28c28; --naranja-osc:#c96a0e;
  --fondo:#faf7f2; --tarjeta:#ffffff; --texto:#1e2a36; --suave:#5b6875; --borde:#e7e1d8;
  --radio:16px; --sombra:0 8px 30px rgba(22,50,79,.08);
}
*{box-sizing:border-box}
html{scroll-behavior:smooth}
body{margin:0;font-family:system-ui,-apple-system,"Segoe UI",Roboto,"Helvetica Neue",Arial,sans-serif;color:var(--texto);background:var(--fondo);line-height:1.6;-webkit-font-smoothing:antialiased}
img,svg{display:block;max-width:100%}
a{color:inherit}
.contenedor{width:min(1120px,100% - 32px);margin-inline:auto}
h1,h2,h3{line-height:1.15;margin:0 0 .5em;color:var(--azul)}
h1{font-size:clamp(2.1rem,5.5vw,3.6rem);letter-spacing:-.02em}
h2{font-size:clamp(1.6rem,3.6vw,2.4rem);letter-spacing:-.01em}
h3{font-size:1.2rem}
p{margin:0 0 1em}
.sobre{font-weight:700;font-size:.85rem;letter-spacing:.08em;text-transform:uppercase;color:var(--naranja-osc);margin-bottom:.6em}

/* aviso superior */
.aviso{background:var(--naranja);color:#2b1600;text-align:center;font-weight:700;font-size:.95rem;padding:.55em 16px}

/* cabecera */
header{background:var(--azul);color:#fff;position:sticky;top:0;z-index:10}
.cab{display:flex;align-items:center;justify-content:space-between;gap:16px;padding:14px 0}
.logo{display:flex;align-items:center;gap:10px;text-decoration:none;font-weight:800;font-size:1.2rem;letter-spacing:-.01em}
.logo svg{width:38px;height:38px}
.logo span b{color:var(--naranja)}
nav ul{display:flex;gap:22px;list-style:none;margin:0;padding:0}
nav a{text-decoration:none;opacity:.88;font-weight:600}
nav a:hover{opacity:1;color:var(--naranja)}
@media (max-width:760px){nav{display:none}}

/* botones */
.boton{display:inline-flex;align-items:center;gap:.5em;padding:.9em 1.4em;border-radius:999px;font-weight:700;text-decoration:none;border:2px solid transparent;transition:transform .15s,background .15s}
.boton:hover{transform:translateY(-2px)}
.boton.prim{background:var(--naranja);color:#2b1600}
.boton.prim:hover{background:#ff9d3d}
.boton.sec{border-color:rgba(255,255,255,.5);color:#fff}
.boton.sec:hover{background:rgba(255,255,255,.1)}

/* portada */
.portada{background:linear-gradient(160deg,var(--azul) 0%,var(--azul-2) 100%);color:#e9f0f7;padding:72px 0 88px;overflow:hidden}
.portada .rejilla{display:grid;grid-template-columns:1.15fr .85fr;gap:48px;align-items:center}
.portada h1{color:#fff}
.portada h1 em{font-style:normal;color:var(--naranja)}
.portada .entradilla{font-size:1.15rem;max-width:34em;opacity:.92}
.sello{display:inline-flex;align-items:center;gap:.6em;background:rgba(242,140,40,.15);border:1px solid rgba(242,140,40,.6);color:#ffd2a6;padding:.45em 1em;border-radius:999px;font-weight:700;font-size:.92rem;margin-bottom:1.3em}
.sello i{width:9px;height:9px;border-radius:50%;background:var(--naranja);box-shadow:0 0 0 0 rgba(242,140,40,.7);animation:latido 2s infinite}
@keyframes latido{70%{box-shadow:0 0 0 10px rgba(242,140,40,0)}100%{box-shadow:0 0 0 0 rgba(242,140,40,0)}}
.acciones{display:flex;flex-wrap:wrap;gap:12px;margin-top:1.6em}
.cuenta{display:flex;gap:12px;margin-top:2em;flex-wrap:wrap}
.cuenta div{background:rgba(255,255,255,.08);border:1px solid rgba(255,255,255,.15);border-radius:12px;padding:.6em 1em;min-width:84px;text-align:center}
.cuenta b{display:block;font-size:1.7rem;color:#fff;line-height:1.1}
.cuenta small{opacity:.75;font-size:.8rem}
.ilustracion{position:relative}
.ilustracion svg{width:100%;height:auto;filter:drop-shadow(0 24px 40px rgba(0,0,0,.25))}
@media (max-width:860px){.portada .rejilla{grid-template-columns:1fr}.ilustracion{max-width:380px;margin-inline:auto}}

/* secciones */
section{padding:84px 0}
.cabecera-sec{max-width:640px;margin-bottom:40px}
.cabecera-sec p{color:var(--suave);font-size:1.08rem}

/* servicios */
.servicios{display:grid;grid-template-columns:repeat(auto-fit,minmax(240px,1fr));gap:20px}
.tarjeta{background:var(--tarjeta);border:1px solid var(--borde);border-radius:var(--radio);padding:26px;box-shadow:var(--sombra)}
.tarjeta .icono{width:52px;height:52px;border-radius:14px;display:grid;place-items:center;margin-bottom:16px}
.tarjeta .icono svg{width:28px;height:28px}
.tarjeta ul{margin:0;padding:0;list-style:none;color:var(--suave)}
.tarjeta li{padding:.28em 0 .28em 1.5em;position:relative}
.tarjeta li::before{content:"";position:absolute;left:0;top:.8em;width:.75em;height:.4em;border-left:2.5px solid var(--naranja);border-bottom:2.5px solid var(--naranja);transform:rotate(-45deg)}
.i-llave{background:#efe9fb}.i-luz{background:#fff4d6}.i-agua{background:#e2f0fb}.i-gas{background:#fde6e1}.i-casa{background:#e8f3e6}
.nota{font-size:.88rem;color:var(--suave);margin-top:14px;border-top:1px dashed var(--borde);padding-top:12px}

/* chapucitas */
.chapucitas{background:#fff;border-block:1px solid var(--borde)}
.etiquetas{display:flex;flex-wrap:wrap;gap:10px}
.etiquetas span{background:var(--fondo);border:1px solid var(--borde);border-radius:999px;padding:.5em 1em;font-weight:600;font-size:.95rem}

/* pasos */
.pasos{display:grid;grid-template-columns:repeat(auto-fit,minmax(230px,1fr));gap:20px;counter-reset:paso}
.paso{position:relative;padding:28px 24px 24px;border-radius:var(--radio);background:var(--tarjeta);border:1px solid var(--borde)}
.paso::before{counter-increment:paso;content:counter(paso);position:absolute;top:-18px;left:24px;width:40px;height:40px;border-radius:50%;background:var(--azul);color:#fff;font-weight:800;display:grid;place-items:center;font-size:1.1rem}
.paso h3{margin-top:.4em}
.paso p{color:var(--suave);margin:0}

/* zona */
.zona{background:var(--azul);color:#dce6f0}
.zona h2{color:#fff}
.zona .rejilla{display:grid;grid-template-columns:1fr 1fr;gap:48px;align-items:center}
.pueblos{display:flex;flex-wrap:wrap;gap:8px}
.pueblos span{background:rgba(255,255,255,.08);border:1px solid rgba(255,255,255,.18);padding:.4em .9em;border-radius:999px;font-size:.93rem}
@media (max-width:860px){.zona .rejilla{grid-template-columns:1fr}}

/* por qué */
.ventajas{display:grid;grid-template-columns:repeat(auto-fit,minmax(220px,1fr));gap:24px}
.ventaja h3{display:flex;align-items:center;gap:.5em}
.ventaja h3 svg{width:26px;height:26px;flex:none}
.ventaja p{color:var(--suave);margin:0}

/* preguntas */
.preguntas{max-width:780px}
details{background:var(--tarjeta);border:1px solid var(--borde);border-radius:12px;padding:0 20px;margin-bottom:12px}
summary{cursor:pointer;font-weight:700;padding:18px 0;list-style:none;display:flex;justify-content:space-between;gap:16px;color:var(--azul)}
summary::-webkit-details-marker{display:none}
summary::after{content:"+";font-size:1.4rem;line-height:1;color:var(--naranja-osc)}
details[open] summary::after{content:"–"}
details p{color:var(--suave);padding-bottom:18px;margin:0}

/* contacto */
.contacto{text-align:center}
.caja-contacto{background:linear-gradient(160deg,var(--azul),var(--azul-2));color:#e9f0f7;border-radius:24px;padding:56px 24px;box-shadow:var(--sombra)}
.caja-contacto h2{color:#fff}
.caja-contacto p{max-width:36em;margin-inline:auto;opacity:.92}
.caja-contacto .acciones{justify-content:center}

footer{padding:36px 0 48px;color:var(--suave);font-size:.92rem}
footer .pie{display:flex;justify-content:space-between;flex-wrap:wrap;gap:16px;border-top:1px solid var(--borde);padding-top:24px}
footer a{color:var(--azul);font-weight:600}
footer .credito{flex-basis:100%;text-align:center;font-size:.85rem}
footer .credito a{color:var(--naranja-osc)}

/* pueblos enlazados */
.pueblos a{background:rgba(255,255,255,.08);border:1px solid rgba(255,255,255,.18);padding:.4em .9em;border-radius:999px;font-size:.93rem;text-decoration:none;color:#e9f0f7}
.pueblos a:hover{background:var(--naranja);border-color:var(--naranja);color:#2b1600}
.pueblos.claro a{background:var(--tarjeta);border-color:var(--borde);color:var(--azul);font-weight:600}
.pueblos.claro a small{color:var(--suave);font-weight:400}
.pueblos.claro a:hover{background:var(--naranja);border-color:var(--naranja);color:#2b1600}
.pueblos.claro a:hover small{color:#2b1600}

/* páginas de pueblo */
.portada.corta{padding:44px 0 60px}
.migas{font-size:.9rem;opacity:.8;margin-bottom:1.2em}
.migas a{color:#fff;text-decoration:none}
.migas a:hover{color:var(--naranja)}
.datos{display:flex;flex-wrap:wrap;gap:10px;margin-top:1.6em}
.datos span{background:rgba(255,255,255,.08);border:1px solid rgba(255,255,255,.15);border-radius:12px;padding:.5em .9em;font-size:.95rem}
.datos b{color:#fff}
.local{max-width:780px}
.local p{font-size:1.06rem}
.comarca{margin-bottom:40px}
.comarca h2{font-size:1.5rem}
.precios{display:grid;grid-template-columns:repeat(auto-fit,minmax(220px,1fr));gap:20px}
.precio b{display:block;font-size:2.2rem;color:var(--azul);line-height:1.1}
.precio small{color:var(--suave)}
@media (prefers-reduced-motion:reduce){*{animation:none!important;transition:none!important;scroll-behavior:auto!important}}