:root{
  --papel:#F4F7F9; --blanco:#FFFFFF; --tinta:#10202E; --acero:#51606C; --linea:#D3DCE3;
  --fria:#1C4FD6; --fria-osc:#153CA6; --fria-clara:#E6EDFD; --caliente:#D2352A; --tubo:#A9B6C1;
  --ancho:1180px; --r-s:6px; --r-m:14px;
  --f:'Archivo',system-ui,-apple-system,'Segoe UI',sans-serif;
}
*{box-sizing:border-box}
html{-webkit-text-size-adjust:100%;scroll-behavior:smooth}
body{margin:0;background:var(--papel);color:var(--tinta);font-family:var(--f);font-size:1.0625rem;line-height:1.6;font-variation-settings:'wdth' 100}
img{max-width:100%;height:auto;display:block}
a{color:var(--fria)}
a:focus-visible,button:focus-visible,select:focus-visible,input:focus-visible,summary:focus-visible{outline:3px solid var(--fria);outline-offset:3px;border-radius:4px}
.envoltura{max-width:var(--ancho);margin:0 auto;padding:0 24px}
.saltar{position:absolute;left:-999px;top:8px;background:var(--tinta);color:#fff;padding:10px 14px;z-index:50}
.saltar:focus{left:8px}

/* Tipografía: los titulares van en ancho expandido, como sello de fábrica en una conexión */
h1,h2,h3{font-variation-settings:'wdth' 125;font-weight:800;line-height:1.04;letter-spacing:-.012em;margin:0;text-wrap:balance}
h1{font-size:clamp(2.3rem,5.2vw,4.3rem)}
h2{font-size:clamp(1.7rem,3.2vw,2.6rem)}
h3{font-size:1.2rem;line-height:1.2;letter-spacing:0}
p{margin:0 0 1em;max-width:68ch}
.entrada{font-size:1.2rem;color:var(--acero);max-width:56ch}

/* Cabecera */
.cabecera{position:sticky;top:0;z-index:20;background:rgba(244,247,249,.94);backdrop-filter:saturate(1.4) blur(8px);border-bottom:1px solid var(--linea)}
.cabecera .envoltura{display:flex;align-items:center;gap:20px;min-height:68px}
.marca{display:flex;align-items:center;gap:10px;text-decoration:none;color:var(--tinta);font-weight:800;font-variation-settings:'wdth' 125;font-size:1.25rem;letter-spacing:-.01em}
.marca .grifo{display:inline-flex;gap:4px}
.marca small{margin-left:1px}
.marca .grifo i{width:9px;height:9px;border-radius:50%;display:block}
.grifo .c{background:var(--caliente)} .grifo .f{background:var(--fria)}
.marca small{font-weight:500;color:var(--acero);font-variation-settings:'wdth' 100}
.menu{margin-left:auto;display:flex;gap:22px;align-items:center}
.menu a{color:var(--tinta);text-decoration:none;font-weight:600;font-size:.97rem}
.menu a:hover{color:var(--fria)}
.menu .tel{font-variant-numeric:tabular-nums}

/* Botones */
.boton{display:inline-flex;align-items:center;justify-content:center;gap:10px;min-height:52px;padding:0 24px;border-radius:999px;font-weight:700;text-decoration:none;font-size:1.02rem;border:2px solid transparent;cursor:pointer;font-family:inherit}
.boton svg{width:20px;height:20px;flex:none}
.boton.wa{background:var(--fria);color:#fff}
.boton.wa:hover{background:var(--fria-osc)}
.boton.llamar{background:transparent;color:var(--tinta);border-color:var(--tinta)}
.boton.llamar:hover{background:var(--tinta);color:#fff}
.boton.chico{min-height:44px;padding:0 18px;font-size:.95rem}

/* Héroe */
.heroe{padding:56px 0 40px}
.heroe .envoltura{display:grid;grid-template-columns:1.05fr .95fr;gap:48px;align-items:center}
.migas{font-size:.92rem;color:var(--acero);margin:0 0 18px}
.migas a{color:var(--acero)}
.heroe h1{margin-bottom:22px}
.acciones{display:flex;flex-wrap:wrap;gap:12px;margin:28px 0 18px}
.nota{font-size:.95rem;color:var(--acero);display:flex;gap:10px;align-items:center;margin:0}
.nota .grifo{display:inline-flex;gap:4px}.nota .grifo i{width:8px;height:8px;border-radius:50%;display:block}
.foto{position:relative;margin:0}
.foto img{border-radius:var(--r-m);aspect-ratio:4/3;object-fit:cover;width:100%;background:var(--linea)}
.foto figcaption{position:absolute;left:12px;bottom:12px;background:rgba(16,32,46,.72);color:#fff;font-size:.78rem;padding:4px 10px;border-radius:999px}

/* Manifold: una tubería madre vertical que reparte agua a cada servicio. Es el elemento memorable. */
.manifold{padding:72px 0;background:var(--blanco);border-block:1px solid var(--linea)}
.manifold>.envoltura{display:grid;grid-template-columns:.75fr 1.25fr;gap:56px;align-items:start}
.manifold .cabeza{position:sticky;top:100px}
.manifold .cabeza p{color:var(--acero);margin:14px 0 0}
.red{position:relative}
.tubo-madre{position:absolute;left:0;top:6px;bottom:6px;width:14px;border-radius:999px;background:var(--linea);overflow:hidden}
.tubo-madre::after{content:"";position:absolute;inset:0;background:var(--fria);transform-origin:top;transform:scaleY(0);animation:llenar 1.8s cubic-bezier(.6,.05,.3,1) .3s forwards}
@keyframes llenar{to{transform:scaleY(1)}}
.ramales{list-style:none;margin:0;padding:0;display:grid;gap:10px}
.ramales>li{position:relative;padding-left:58px}
.ramales>li::before{content:"";position:absolute;left:14px;top:calc(50% - 3px);width:44px;height:6px;background:var(--tubo)}
.ramales>li::after{content:"";position:absolute;left:28px;top:calc(50% - 11px);width:8px;height:22px;border-radius:3px;background:var(--tinta)}
.ramales>li>a{display:grid;grid-template-columns:minmax(180px,.8fr) 1.2fr;gap:6px 24px;align-items:baseline;text-decoration:none;color:var(--tinta);padding:18px 22px;border:1px solid var(--linea);border-radius:var(--r-s);background:var(--papel);transition:border-color .15s,background .15s}
.ramales>li>a:hover{border-color:var(--fria);background:var(--fria-clara)}
.ramales>li>a:hover h3{color:var(--fria)}
.ramales p{margin:0;font-size:.97rem;color:var(--acero)}
.ramales>.activo>a{border-color:var(--fria);background:var(--fria-clara)}
.ramales>.activo::after{background:var(--fria)}

/* Secciones de texto */
.seccion{padding:72px 0}
.seccion h2{margin-bottom:22px}
.dos{display:grid;grid-template-columns:1fr 1fr;gap:56px;align-items:start}
.lista{list-style:none;margin:0;padding:0;border-top:1px solid var(--linea)}
.lista li{padding:14px 0 14px 30px;border-bottom:1px solid var(--linea);position:relative}
.lista li::before{content:"";position:absolute;left:4px;top:23px;width:12px;height:6px;border-radius:2px;background:var(--fria)}
.lista.alerta li::before{background:var(--caliente);width:8px;height:8px;border-radius:50%;top:22px;left:6px}

/* Proceso: sí es una secuencia, por eso va numerado */
.pasos{list-style:none;margin:0;padding:0;display:grid;grid-template-columns:repeat(4,1fr);gap:24px;counter-reset:paso}
.pasos li{counter-increment:paso;border-top:3px solid var(--tinta);padding-top:16px}
.pasos li::before{content:counter(paso);font-weight:800;font-variation-settings:'wdth' 125;font-size:2rem;line-height:1;display:block;margin-bottom:10px;color:var(--fria)}
.pasos p{color:var(--acero);font-size:.98rem;margin:6px 0 0}

/* Zonas */
.zonas{background:var(--tinta);color:#E8EEF2}
.zonas h2{color:#fff}
.zonas p{color:#B9C6D0}
.zonas .rejilla{display:grid;grid-template-columns:1.2fr 1fr;gap:48px}
.zona-principal{border:1px solid #2C4052;border-radius:var(--r-m);padding:28px}
.zona-principal h3{font-size:1.6rem;color:#fff;margin-bottom:10px}
.zona-principal a.ir{color:#9DB8FF;font-weight:700}
.colonias{display:flex;flex-wrap:wrap;gap:8px;list-style:none;padding:0;margin:18px 0}
.colonias li a,.colonias li span{display:inline-block;padding:6px 12px;border:1px solid #2C4052;border-radius:999px;color:#E8EEF2;text-decoration:none;font-size:.93rem}
.colonias li a:hover{border-color:#9DB8FF;color:#fff}
.municipios{list-style:none;margin:0;padding:0;columns:2;column-gap:24px}
.municipios li{break-inside:avoid;border-bottom:1px solid #2C4052}
.municipios a{display:block;padding:12px 0;color:#fff;text-decoration:none;font-weight:600}
.municipios a:hover{color:#9DB8FF}
.claro .colonias li a,.claro .colonias li span{border-color:var(--linea);color:var(--tinta)}
.claro .colonias li a:hover{border-color:var(--fria);color:var(--fria)}

/* Formulario rápido a WhatsApp */
.pedido{background:var(--fria);color:#fff;border-radius:var(--r-m);padding:32px;display:grid;grid-template-columns:1fr 1.3fr;gap:32px;align-items:center}
.pedido h2{color:#fff;font-size:clamp(1.5rem,2.6vw,2.1rem)}
.pedido p{color:#DCE5FF;margin:10px 0 0}
.pedido form{display:grid;grid-template-columns:1fr 1fr auto;gap:10px;align-items:end}
.pedido label{display:block;font-size:.88rem;font-weight:600;margin-bottom:6px;color:#fff}
.pedido select,.pedido input{width:100%;min-height:50px;border-radius:var(--r-s);border:0;padding:0 12px;font:inherit;font-size:1rem;color:var(--tinta);background:#fff}
.pedido button{min-height:50px;border:0;border-radius:var(--r-s);background:var(--tinta);color:#fff;font:inherit;font-weight:700;padding:0 20px;cursor:pointer}
.pedido button:hover{background:#000}
.pedido small{grid-column:1/-1;color:#DCE5FF;font-size:.85rem}

/* Preguntas */
.preguntas details{border-bottom:1px solid var(--linea);padding:4px 0}
.preguntas summary{cursor:pointer;font-weight:700;padding:16px 36px 16px 0;list-style:none;position:relative;font-size:1.08rem}
.preguntas summary::-webkit-details-marker{display:none}
.preguntas summary::after{content:"";position:absolute;right:6px;top:50%;width:14px;height:14px;margin-top:-7px;background:linear-gradient(var(--tinta),var(--tinta)) center/14px 2px no-repeat,linear-gradient(var(--tinta),var(--tinta)) center/2px 14px no-repeat;transition:transform .2s}
.preguntas details[open] summary::after{transform:rotate(45deg)}
.preguntas details p{color:var(--acero);margin:0 0 18px}

/* Pie */
.pie{background:var(--tinta);color:#B9C6D0;padding:56px 0 110px;font-size:.95rem}
.pie .envoltura{display:grid;grid-template-columns:1.4fr 1fr 1fr;gap:40px}
.pie h3{color:#fff;font-size:1rem;margin-bottom:12px}
.pie ul{list-style:none;margin:0;padding:0}
.pie li{margin:0 0 8px}
.pie a{color:#E8EEF2;text-decoration:none}
.pie a:hover{color:#9DB8FF;text-decoration:underline}
.pie .marca{color:#fff;margin-bottom:12px}
.pie .legal{grid-column:1/-1;max-width:none;border-top:1px solid #2C4052;padding-top:18px;font-size:.85rem;display:flex;flex-wrap:wrap;gap:8px 24px}

/* Barra fija en móvil */
.barra{display:none}

@media (max-width:980px){
  .heroe .envoltura,.dos,.zonas .rejilla,.pedido,.manifold>.envoltura{grid-template-columns:1fr}
  .manifold>.envoltura{gap:28px}.manifold .cabeza{position:static}
  .heroe{padding-top:32px}
  .pasos{grid-template-columns:1fr 1fr}
  .pedido form{grid-template-columns:1fr 1fr}
  .pedido form button{grid-column:1/-1}
  .pie .envoltura{grid-template-columns:1fr 1fr}
  .menu a:not(.boton){display:none}
}
@media (max-width:620px){
  .envoltura{padding:0 16px}
  body{font-size:1rem}
  .entrada{font-size:1.08rem}
  .seccion{padding:52px 0}
  .pasos{grid-template-columns:1fr}
  .dos{gap:20px}
  .pedido{padding:24px 18px}
  .pedido form{grid-template-columns:1fr}
  .municipios{columns:1}
  .pie .envoltura{grid-template-columns:1fr}
  .menu .boton{display:none}
  .acciones .boton{flex:1 1 100%}
  .ramales>li>a{grid-template-columns:1fr;padding:16px}
  .ramales>li{padding-left:46px}.ramales>li::before{width:32px}.ramales>li::after{left:24px}
  .barra{display:grid;grid-template-columns:1fr 1fr;gap:8px;position:fixed;left:0;right:0;bottom:0;z-index:30;padding:10px 12px calc(10px + env(safe-area-inset-bottom));background:rgba(244,247,249,.97);border-top:1px solid var(--linea)}
  .barra .boton{min-height:50px;padding:0 10px}
}
@media (prefers-reduced-motion:reduce){
  *{scroll-behavior:auto!important}
  .tubo-madre::after{animation:none;transform:none}
  .ramales a,.preguntas summary::after{transition:none}
}

/* v2: servicios agrupados en el manifold */
.grupo{padding:18px 22px;border:1px solid var(--linea);border-radius:var(--r-s);background:var(--papel)}
.grupo h3{margin-bottom:12px}
.subservicios{list-style:none;margin:0;padding:0;display:flex;flex-wrap:wrap;gap:8px}
.subservicios a{display:inline-flex;align-items:center;min-height:40px;padding:0 14px;border:1px solid var(--linea);border-radius:999px;background:var(--blanco);color:var(--tinta);text-decoration:none;font-weight:600;font-size:.95rem}
.subservicios a:hover{border-color:var(--fria);color:var(--fria)}
.subservicios a[aria-current="page"]{background:var(--fria);border-color:var(--fria);color:#fff}
.ramales .activo .grupo{border-color:var(--fria)}
.ir-todos{font-weight:700}

/* v2: héroe con el corte de la casa */
.heroe-casa .envoltura{grid-template-columns:.9fr 1.1fr}
.heroe-casa h1{font-size:clamp(2.3rem,4.6vw,3.9rem)}

/* v2: buscador por síntoma */
.sintomas-rejilla{display:grid;grid-template-columns:1.1fr .9fr;gap:32px;align-items:start;margin-top:28px}
.sintomas{list-style:none;margin:0;padding:0;display:grid;grid-template-columns:1fr 1fr;gap:10px}
.sintomas button{width:100%;min-height:58px;text-align:left;padding:12px 16px 12px 36px;border:1px solid var(--linea);border-radius:var(--r-s);background:var(--blanco);font:inherit;font-weight:600;color:var(--tinta);cursor:pointer;position:relative}
.sintomas button::before{content:"";position:absolute;left:15px;top:50%;width:9px;height:9px;margin-top:-4.5px;border-radius:50%;border:2px solid var(--tubo)}
.sintomas button:hover{border-color:var(--fria)}
.sintomas button[aria-pressed="true"]{border-color:var(--fria);background:var(--fria-clara);color:var(--fria-osc)}
.sintomas button[aria-pressed="true"]::before{background:var(--caliente);border-color:var(--caliente)}
.resultado{background:var(--tinta);color:#fff;border-radius:var(--r-m);padding:32px;position:sticky;top:96px}
.resultado h3{font-size:1.6rem;color:#fff;margin-bottom:12px}
.resultado p{color:#B9C6D0}
.resultado .acciones{align-items:center;margin-bottom:0}
.resultado .ir{color:#9DB8FF;font-weight:700}

/* v2: plan de mantenimiento */
.plan{background:var(--fria);color:#fff;padding:80px 0}
.plan-rejilla{display:grid;grid-template-columns:1.05fr .95fr;gap:56px;align-items:center}
.plan h2{color:#fff;margin-bottom:18px}
.plan p{color:#DCE5FF;font-size:1.1rem}
.boton.blanco{background:#fff;color:var(--fria-osc)}
.boton.blanco:hover{background:var(--fria-clara)}
.ir-claro{color:#fff;font-weight:700;align-self:center}
.plan .acciones{align-items:center}
.temporadas{list-style:none;margin:0;padding:0;display:grid;grid-template-columns:1fr 1fr;gap:12px}
.temporadas li{border:1px solid rgba(255,255,255,.32);border-radius:var(--r-s);padding:20px}
.temporadas b{display:block;font-variation-settings:'wdth' 125;font-weight:800;font-size:1.15rem;margin-bottom:6px}
.temporadas span{color:#DCE5FF;font-size:.95rem}

/* v2: índice de servicios */
.indice{padding-bottom:40px}
.grupo-sec{padding:28px 0 36px;border-top:1px solid var(--linea)}
.grupo-sec h2{margin-bottom:22px}
.tarjetas{list-style:none;margin:0;padding:0;display:grid;grid-template-columns:repeat(auto-fill,minmax(250px,1fr));gap:18px}
.tarjetas a{display:block;height:100%;background:var(--blanco);border:1px solid var(--linea);border-radius:var(--r-m);overflow:hidden;text-decoration:none;color:var(--tinta);transition:border-color .15s}
.tarjetas a:hover{border-color:var(--fria)}
.tarjetas a:hover h3{color:var(--fria)}
.tarjetas img{aspect-ratio:16/10;object-fit:cover;width:100%}
.tarjetas div{padding:16px 18px 20px}
.tarjetas p{margin:8px 0 0;color:var(--acero);font-size:.95rem}

@media (max-width:980px){
  .heroe-casa .envoltura,.sintomas-rejilla,.plan-rejilla{grid-template-columns:1fr}
  .resultado{position:static}
}
@media (max-width:620px){
  .sintomas{grid-template-columns:1fr}
  .grupo{padding:16px}
  .plan{padding:56px 0}
  .resultado{padding:24px}
}

/* v3: estándar San Pedro */
.estandar{background:var(--blanco);border-block:1px solid var(--linea)}
.estandar-lista{list-style:none;margin:28px 0 0;padding:0;display:grid;grid-template-columns:repeat(3,1fr);gap:0 32px}
.estandar-lista li{border-top:3px solid var(--tinta);padding:16px 0 22px}
.estandar-lista li h3{margin-bottom:6px}
.estandar-lista li p{color:var(--acero);margin:0;font-size:.98rem}
@media (max-width:980px){.estandar-lista{grid-template-columns:1fr 1fr}}
@media (max-width:620px){.estandar-lista{grid-template-columns:1fr}}

.casa-caja{background:var(--blanco);border:1px solid var(--linea);border-radius:var(--r-m);padding:14px 14px 0;box-shadow:0 30px 60px -40px rgba(16,32,46,.35)}
.casa{width:100%;height:auto;display:block}
.casa .tierra{fill:#E8EDF1}.casa .suelo{stroke:var(--tinta);stroke-width:2}
.casa .muro{fill:#FCFDFE;stroke:var(--tinta);stroke-width:2.5}.casa .losa{fill:var(--tinta)}
.casa .entrepiso{stroke:var(--tinta);stroke-width:4}.casa .divisor{stroke:var(--linea);stroke-width:2;stroke-dasharray:4 4}
.casa .rot{font:600 11px var(--f);fill:var(--acero)}
.casa .mueble{fill:#F1F4F7;stroke:#7D8C98;stroke-width:1.5}.casa .obj{fill:#2B3B49}.casa .obj-tapa{fill:#3E5061}.casa .obj-claro{fill:#C9D3DB}
.casa .panel{fill:#B9CBE0;stroke:#2B3B49;stroke-width:1.5}.casa .linea{fill:none;stroke:#7D8C98;stroke-width:2}
.casa .cisterna{fill:#fff;stroke:var(--fria);stroke-width:1.5;stroke-dasharray:5 4}.casa .agua{fill:#D7E3FB}
.casa .mancha{fill:#C7D4E2;opacity:.75}.casa .flama{fill:var(--caliente)}
.casa .t-fria,.casa .t-cal,.casa .t-dren,.casa .flujo{fill:none;stroke-linecap:round;stroke-linejoin:round}
.casa .t-fria{stroke:var(--fria);stroke-width:4}.casa .t-cal{stroke:var(--caliente);stroke-width:4}.casa .t-dren{stroke:#9AA8B3;stroke-width:7}
.casa .flujo{stroke:#fff;stroke-width:1.6;stroke-dasharray:2 16;animation:fluir 1.4s linear infinite;opacity:.9}
@keyframes fluir{to{stroke-dashoffset:-18}}
.casa .punto{cursor:pointer;outline:none}
.casa .halo{fill:var(--fria);opacity:0;transition:opacity .2s}
.casa .boton-p{fill:var(--tinta);stroke:#fff;stroke-width:2.5;transition:fill .15s}
.casa .mas{stroke:#fff;stroke-width:2;stroke-linecap:round}
.casa .punto:hover .boton-p,.casa .punto:focus-visible .boton-p,.casa .punto.activo .boton-p{fill:var(--fria)}
.casa .punto:hover .halo,.casa .punto:focus-visible .halo,.casa .punto.activo .halo{opacity:.18}
.casa .punto:focus-visible .halo{opacity:.35}
.lectura{display:flex;gap:16px;align-items:center;justify-content:space-between;border-top:1px solid var(--linea);margin:10px -14px 0;padding:14px 18px;min-height:74px}
.lectura b{display:block;font-variation-settings:'wdth' 125;font-weight:800}
.lectura span{color:var(--acero);font-size:.95rem}
.lectura a{flex:none;font-weight:700;text-decoration:none;white-space:nowrap}
.leyenda{display:flex;gap:16px;flex-wrap:wrap;font-size:.85rem;color:var(--acero);margin:12px 0 0;padding:0;list-style:none}
.leyenda i{display:inline-block;width:18px;height:4px;border-radius:2px;margin-right:6px;vertical-align:middle}
.chips{display:none;list-style:none;margin:12px 0 0;padding:0;flex-wrap:wrap;gap:8px}
.chips button{min-height:44px;padding:0 14px;border-radius:999px;border:1px solid var(--linea);background:var(--blanco);font:inherit;font-size:.93rem;color:var(--tinta);cursor:pointer}
.chips button[aria-pressed="true"]{border-color:var(--fria);background:var(--fria-clara);color:var(--fria)}
@media (max-width:620px){.chips{display:flex}.lectura{flex-direction:column;align-items:flex-start;gap:6px}}
@media (prefers-reduced-motion:reduce){.casa .flujo{animation:none;display:none}}