/* José Álvarez, fontanero en Gijón. Cal fría, cobre y los dos colores del agua */
:root{
  --cal:#eef2f1; --papel:#ffffff; --pizarra:#1d2b34; --pizarra-2:#3c4d58; --gris:#66757f; --linea:#cfd8dc;
  --cobre:#b4602a; --cobre-osc:#8f4a1f; --cobre-claro:#f3e3d6;
  --fria:#2a6fa8; --fria-claro:#dcebf6; --caliente:#c2412d;
  --ok:#2f7a4f;
  --anch:1160px;
}
*{box-sizing:border-box}
html{scroll-behavior:smooth}
@media (prefers-reduced-motion:reduce){html{scroll-behavior:auto}*,*::before{animation:none!important;transition:none!important}}
body{margin:0;background:var(--cal);color:var(--pizarra);font-family:"Public Sans",system-ui,sans-serif;font-size:17px;line-height:1.62;-webkit-font-smoothing:antialiased}
img,svg{max-width:100%;display:block}
a{color:var(--fria)}
:focus-visible{outline:3px solid var(--fria);outline-offset:2px}
.env{max-width:var(--anch);margin:0 auto;padding:0 22px}
h1,h2,h3{font-family:Anybody,"Public Sans",sans-serif;font-stretch:118%;line-height:1.02;margin:0 0 .5em;text-wrap:balance;letter-spacing:-.01em}
h1{font-size:clamp(2.5rem,5.6vw,4.4rem);font-weight:800}
h2{font-size:clamp(1.85rem,3.4vw,2.7rem);font-weight:800}
h3{font-size:1.28rem;font-weight:700;font-stretch:110%}
p{margin:0 0 1em;max-width:66ch}
.entr{font-size:1.16rem;color:var(--pizarra-2);max-width:52ch}
.peq{font-size:.9rem;color:var(--gris)}
.saltar{position:absolute;left:-999px;top:6px;background:var(--pizarra);color:#fff;padding:8px 12px;z-index:99}
.saltar:focus{left:8px}

.boton{display:inline-flex;align-items:center;gap:9px;border:0;border-radius:999px;padding:13px 22px;font:inherit;font-weight:700;text-decoration:none;cursor:pointer;line-height:1.15}
.boton svg{width:20px;height:20px;flex:none}
.b-cobre{background:var(--cobre);color:#fff}
.b-cobre:hover{background:var(--cobre-osc)}
.b-borde{background:var(--papel);color:var(--pizarra);box-shadow:inset 0 0 0 2px var(--pizarra)}
.b-borde:hover{background:var(--pizarra);color:#fff}

/* cabecera: blanca con la tubería de cobre debajo */
.cab{background:var(--papel);position:sticky;top:0;z-index:40}
.cab-in{display:flex;align-items:center;gap:24px;min-height:70px}
.logo{display:flex;align-items:center;gap:12px;text-decoration:none;color:var(--pizarra)}
.logo svg{width:42px;height:42px;flex:none}
.logo b{display:block;font-family:Anybody;font-stretch:125%;font-weight:800;font-size:1.2rem;line-height:1}
.logo span{display:block;font-size:.82rem;color:var(--gris);margin-top:3px}
#nav{display:flex;gap:6px;margin-left:auto}
#nav a{color:var(--pizarra);text-decoration:none;font-weight:600;padding:8px 12px;border-radius:999px}
#nav a:hover{background:var(--cal)}
#nav a[aria-current]{background:var(--pizarra);color:#fff}
.cab .b-cobre{padding:10px 18px}
.tubo{height:9px;background:linear-gradient(#cf8452,#b4602a 45%,#8f4a1f);position:relative}
.tubo::before,.tubo::after{content:"";position:absolute;top:-3px;width:22px;height:15px;border-radius:3px;background:linear-gradient(#d99566,#a5571f)}
.tubo::before{left:18%}.tubo::after{left:71%}
.menu-btn{display:none;margin-left:auto;background:var(--cal);border:0;border-radius:999px;padding:9px 14px;font:inherit;font-weight:700;color:var(--pizarra)}
@media (max-width:900px){
  .menu-btn{display:block}
  #nav{display:none;position:absolute;top:79px;left:0;right:0;background:var(--papel);flex-direction:column;padding:10px 18px 18px;box-shadow:0 12px 20px rgba(29,43,52,.12)}
  #nav.abierto{display:flex}
  .cab .b-cobre{display:none}
}

/* portada */
.portada{padding:46px 0 0}
.portada-top{display:grid;grid-template-columns:1.25fr .75fr;gap:40px;align-items:end;margin-bottom:26px}
@media (max-width:860px){.portada-top{grid-template-columns:1fr;gap:18px}}
.portada .acciones{display:flex;gap:10px;flex-wrap:wrap}
.sello{background:var(--papel);border-left:6px solid var(--cobre);padding:16px 18px;border-radius:0 12px 12px 0}
.sello p{margin:0}
.sello b{font-family:Anybody;font-stretch:115%;font-size:1.15rem}

/* casa en corte */
.casa-wrap{display:grid;grid-template-columns:1fr 360px;gap:0;background:var(--papel);border-radius:18px;overflow:hidden;border:1px solid var(--linea)}
@media (max-width:980px){.casa-wrap{grid-template-columns:1fr}}
.casa-svg{background:#dfe8ec;position:relative;display:flex;flex-direction:column;justify-content:flex-end;padding-top:38px}
.lista-puntos{display:none}
@media (max-width:700px){.lista-puntos{display:flex;flex-wrap:wrap;gap:6px;padding:12px;background:var(--papel)}.lista-puntos button{border:2px solid var(--cobre);background:var(--papel);color:var(--cobre-osc);border-radius:999px;padding:7px 12px;font:inherit;font-size:.9rem;font-weight:600}.lista-puntos button.activo{background:var(--cobre);color:#fff}}
.casa-svg svg{width:100%;height:auto}
.casa-ayuda{position:absolute;left:14px;top:12px;background:rgba(255,255,255,.92);border-radius:999px;padding:6px 12px;font-size:.88rem;font-weight:600}
.punto{cursor:pointer}
.punto circle.aro{fill:var(--papel);stroke:var(--cobre);stroke-width:3}
.punto circle.nucleo{fill:var(--cobre)}
.punto:hover circle.aro,.punto:focus-visible circle.aro{stroke-width:5}
.punto.activo circle.aro{fill:var(--cobre)}
.punto.activo circle.nucleo{fill:#fff}
.punto:focus{outline:none}
.punto:focus-visible circle.aro{stroke:var(--fria)}
.pulso{transform-box:fill-box;transform-origin:center;animation:pulso 2.4s ease-out infinite}
@keyframes pulso{0%{opacity:.55;transform:scale(1)}100%{opacity:0;transform:scale(2.2)}}
.ruta{fill:none;stroke-width:6;stroke-linecap:round;stroke-linejoin:round;opacity:.22;transition:opacity .25s}
.ruta.fria{stroke:var(--fria)}.ruta.caliente{stroke:var(--caliente)}.ruta.gris{stroke:#7b878e}
.ruta.on{opacity:1;stroke-dasharray:14 10;animation:corre 1s linear infinite}
@keyframes corre{to{stroke-dashoffset:-24}}
.diag{padding:22px 22px 24px;display:flex;flex-direction:column;gap:12px}
.diag h2{font-size:1.7rem;margin:0}
.diag .zona{font-size:.86rem;font-weight:700;color:var(--cobre-osc)}
.sintomas{display:flex;flex-wrap:wrap;gap:7px}
.sintomas button{border:2px solid var(--linea);background:var(--papel);border-radius:999px;padding:7px 13px;font:inherit;font-size:.93rem;cursor:pointer;color:var(--pizarra)}
.sintomas button[aria-pressed="true"]{border-color:var(--pizarra);background:var(--pizarra);color:#fff}
.mientras{background:var(--fria-claro);border-radius:12px;padding:12px 14px;font-size:.95rem}
.mientras b{display:block;margin-bottom:2px}
.diag .boton{justify-content:center}
.vacio{color:var(--gris)}

/* trabajos: una bajada de tubería con sus piezas */
.banda{padding:84px 0}
.banda-papel{background:var(--papel)}
.trabajos{display:grid;grid-template-columns:.8fr 1.2fr;gap:56px}
@media (max-width:900px){.trabajos{grid-template-columns:1fr;gap:20px}.banda{padding:58px 0}}
.bajada{list-style:none;margin:0;padding:0 0 0 46px;position:relative}
.bajada::before{content:"";position:absolute;left:14px;top:6px;bottom:6px;width:10px;border-radius:5px;background:linear-gradient(90deg,#cf8452,#b4602a 55%,#8f4a1f)}
.bajada li{position:relative;padding:4px 0 26px}
.bajada li::before{content:"";position:absolute;left:-40px;top:6px;width:26px;height:20px;border-radius:4px;background:linear-gradient(#e0a47b,#a5571f);box-shadow:0 0 0 3px var(--papel)}
.bajada h3{margin-bottom:4px}
.bajada p{margin:0;color:var(--pizarra-2)}
.bajada a{font-weight:700}

/* bañera a plato (portada) */
.teaser{display:grid;grid-template-columns:1fr 1fr;gap:40px;align-items:center}
@media (max-width:860px){.teaser{grid-template-columns:1fr}}

/* parte de aviso */
.parte-zona{padding:84px 0}
.parte-grid{display:grid;grid-template-columns:.85fr 1.15fr;gap:48px;align-items:start}
@media (max-width:900px){.parte-grid{grid-template-columns:1fr;gap:24px}.parte-zona{padding:58px 0}}
.parte{background:var(--papel);border-radius:6px 16px 16px 6px;padding:26px 26px 24px 46px;position:relative;box-shadow:0 1px 0 var(--linea),0 18px 40px -24px rgba(29,43,52,.35)}
.parte::before{content:"";position:absolute;left:16px;top:16px;bottom:16px;width:8px;background:radial-gradient(circle,var(--cal) 3.5px,transparent 4px) 0 0/8px 18px repeat-y}
.parte-cab{display:flex;justify-content:space-between;align-items:baseline;gap:12px;border-bottom:2px solid var(--pizarra);padding-bottom:10px;margin-bottom:16px}
.parte-cab b{font-family:Anybody;font-stretch:125%;font-size:1.35rem}
.parte-cab span{font-size:.88rem;color:var(--gris)}
.campos{display:grid;gap:14px}
.campos label,.campos legend{display:grid;gap:5px;font-weight:700;font-size:.95rem}
.campos input[type=text],.campos input[type=tel],.campos textarea{font:inherit;font-weight:400;padding:11px 13px;border:0;border-bottom:2px solid #b9c5cb;background:var(--cal);border-radius:8px 8px 0 0;width:100%;color:var(--pizarra)}
.campos input:focus,.campos textarea:focus{outline:none;border-bottom-color:var(--cobre);background:#e6eceb}
.dos-col{display:grid;grid-template-columns:1fr 1fr;gap:12px}
@media (max-width:560px){.dos-col{grid-template-columns:1fr}}
.campos fieldset{border:0;padding:0;margin:0}
.urg{display:flex;flex-wrap:wrap;gap:8px;margin-top:4px}
.urg label{display:flex;align-items:center;gap:7px;font-weight:500;background:var(--cal);border-radius:999px;padding:7px 13px;cursor:pointer}
.urg input{accent-color:var(--cobre)}
.que-pasa{min-height:44px;display:flex;flex-wrap:wrap;gap:6px;align-items:center}
.que-pasa .tag{background:var(--cobre-claro);color:var(--cobre-osc);border-radius:999px;padding:5px 6px 5px 12px;font-size:.9rem;font-weight:600;display:inline-flex;align-items:center;gap:4px}
.que-pasa .tag button{border:0;background:none;color:inherit;cursor:pointer;font-size:1rem;line-height:1;padding:2px 6px}
.fotos{border:2px dashed #b9c5cb;border-radius:10px;padding:12px 14px;background:var(--cal)}
.fotos input{position:absolute;opacity:0;width:1px;height:1px}
.fotos label{cursor:pointer;font-weight:700}
.fotos small{display:block;font-weight:400;color:var(--gris)}
.miniaturas{display:flex;gap:8px;flex-wrap:wrap;margin-top:8px}
.miniaturas img{width:62px;height:62px;object-fit:cover;border-radius:6px}
.hecho{background:#e2f1e7;color:#1f5a38;border-radius:10px;padding:12px 14px;margin:0}

/* páginas de servicio */
.cab-pag{padding:48px 0 34px}
.migas{font-size:.9rem;color:var(--gris);margin-bottom:10px}
.migas a{color:var(--gris)}
.cuerpo{display:grid;grid-template-columns:1.1fr .9fr;gap:48px;align-items:start}
@media (max-width:900px){.cuerpo{grid-template-columns:1fr;gap:26px}}
.caja{background:var(--papel);border-radius:16px;padding:22px;border:1px solid var(--linea)}
.lista{padding-left:20px;margin:0 0 1em}
.lista li{margin-bottom:6px}

/* contador (prueba de fuga) */
.contador svg{width:100%;max-width:300px;margin:0 auto}
.aguja{transform-origin:150px 150px;transition:transform .2s linear}
.pasos{list-style:none;padding:0;margin:14px 0;display:grid;gap:8px}
.pasos li{display:flex;gap:10px;align-items:flex-start}
.pasos input{margin-top:5px;accent-color:var(--cobre);width:18px;height:18px}
.veredicto{border-radius:10px;padding:12px 14px;display:none}
.veredicto.si{display:block;background:#fbe4df;color:#80281a}
.veredicto.no{display:block;background:#e2f1e7;color:#1f5a38}
.pregunta{display:flex;gap:8px;flex-wrap:wrap;margin-top:8px}

/* goteo */
.goteo{display:grid;grid-template-columns:220px 1fr;gap:30px;align-items:center}
@media (max-width:640px){.goteo{grid-template-columns:1fr}}
.gota{animation:cae var(--t,1.5s) linear infinite}
@keyframes cae{0%{transform:translateY(0);opacity:1}80%{opacity:1}100%{transform:translateY(120px);opacity:0}}
.cifras{display:grid;grid-template-columns:repeat(3,1fr);gap:10px;margin:14px 0}
@media (max-width:480px){.cifras{grid-template-columns:1fr}}
.cifras div{background:var(--cal);border-radius:12px;padding:12px}
.cifras b{display:block;font-family:Anybody;font-stretch:120%;font-size:1.8rem;line-height:1.05}
.cifras span{font-size:.86rem;color:var(--gris)}
input[type=range]{width:100%;accent-color:var(--fria)}

/* plato de ducha */
.medidas{display:grid;grid-template-columns:1fr 1fr;gap:12px;margin-bottom:12px}
.medidas label{display:grid;gap:4px;font-weight:700;font-size:.95rem}
.medidas input{font:inherit;padding:10px 12px;border:2px solid var(--linea);border-radius:10px;width:100%}
.planta svg{width:100%;height:auto;background:var(--cal);border-radius:12px}
.platos{display:flex;flex-wrap:wrap;gap:7px;margin:12px 0}
.platos button{border:2px solid var(--linea);background:var(--papel);border-radius:8px;padding:6px 11px;font:inherit;font-size:.92rem;cursor:pointer}
.platos button[aria-pressed="true"]{border-color:var(--cobre);background:var(--cobre);color:#fff}
.faq details{background:var(--papel);border-radius:12px;padding:14px 18px;margin-bottom:10px;border:1px solid var(--linea)}
.faq summary{font-weight:700;cursor:pointer}
.faq details p{margin:10px 0 0}

/* pie */
.llave{background:var(--fria);color:#fff;padding:22px 0}
.llave .env{display:flex;gap:16px;align-items:center;flex-wrap:wrap}
.llave svg{width:46px;height:46px;flex:none}
.llave p{margin:0;max-width:none;font-size:1.05rem}
.llave b{font-family:Anybody;font-stretch:115%}
.pie{background:var(--pizarra);color:#c9d3d8;padding:50px 0 22px}
.pie a{color:#fff}
.pie-grid{display:grid;grid-template-columns:1.3fr 1fr 1fr;gap:34px}
@media (max-width:800px){.pie-grid{grid-template-columns:1fr}}
.pie ul{list-style:none;margin:0;padding:0;display:grid;gap:6px}
.pie-tit{color:#fff;font-weight:700;margin-bottom:8px}
.pie-nombre{font-family:Anybody;font-stretch:125%;font-weight:800;font-size:1.5rem;color:#fff;margin-bottom:6px}
.pie-baja{border-top:1px solid #34444e;margin-top:34px;padding-top:14px;font-size:.85rem;color:#8d9aa1;display:flex;justify-content:space-between;flex-wrap:wrap;gap:10px}