/* Telecerrajeros · acero, latón y amarillo de aviso */
:root{
  --blanco:#ffffff; --niebla:#eef0f2; --acero:#1e2226; --acero-2:#2c3237; --gris:#5b636b; --linea:#d7dbe0;
  --amarillo:#f2c230; --amarillo-osc:#d9a90f; --amarillo-claro:#fdf3d2;
  --laton:#b48a3c; --rojo:#c0392b; --verde:#2e7d4f;
  --anch:1180px;
}
*{box-sizing:border-box}
html{scroll-behavior:smooth}
@media (prefers-reduced-motion:reduce){html{scroll-behavior:auto}*{animation:none!important;transition:none!important}}
body{margin:0;background:var(--blanco);color:var(--acero);font-family:Saira,system-ui,sans-serif;font-size:17.5px;line-height:1.6;-webkit-font-smoothing:antialiased}
svg{max-width:100%;display:block}
a{color:var(--acero)}
:focus-visible{outline:3px solid var(--amarillo);outline-offset:2px}
.env{max-width:var(--anch);margin:0 auto;padding:0 22px}
h1,h2,h3{font-family:"Saira Condensed",Saira,sans-serif;line-height:1;margin:0 0 .45em;text-wrap:balance}
h1{font-size:clamp(2.8rem,6vw,5rem);font-weight:800;letter-spacing:-.01em}
h2{font-size:clamp(2rem,3.8vw,3rem);font-weight:800}
h3{font-size:1.5rem;font-weight:700}
p{margin:0 0 1em;max-width:64ch}
.entr{font-size:1.2rem;max-width:46ch}
.peq{font-size:.92rem;color:var(--gris)}
.saltar{position:absolute;left:-999px;top:8px;background:var(--acero);color:#fff;padding:8px 12px;z-index:99}
.saltar:focus{left:8px}

.btn{display:inline-flex;align-items:center;gap:8px;border:0;border-radius:6px;padding:12px 20px;font:inherit;font-weight:600;text-decoration:none;cursor:pointer;line-height:1.2}
.btn-amarillo{background:var(--amarillo);color:var(--acero)}
.btn-amarillo:hover{background:var(--amarillo-osc)}
.btn-acero{background:var(--acero);color:#fff}
.btn-acero:hover{background:#000;color:#fff}
.btn-linea{background:transparent;color:inherit;box-shadow:inset 0 0 0 2px currentColor}
.btn-grande{padding:17px 26px;font-size:1.1rem}

/* cabecera */
.barra{background:var(--acero);color:#fff;position:sticky;top:0;z-index:30}
.barra .env{display:flex;align-items:center;gap:26px;min-height:68px}
.marca{display:flex;align-items:center;gap:11px;text-decoration:none;color:#fff;font-family:"Saira Condensed";font-weight:800;font-size:1.45rem;line-height:1}
.marca svg{width:38px;height:38px;flex:none}
.marca small{display:block;font-family:Saira;font-weight:400;font-size:.78rem;color:#aab2ba;margin-top:2px}
#menu{display:flex;gap:24px;margin-left:auto}
#menu a{color:#e6e9ec;text-decoration:none;font-weight:500;padding:4px 0;border-bottom:2px solid transparent}
#menu a:hover{color:#fff}
#menu a[aria-current]{border-color:var(--amarillo);color:#fff}
.barra .btn-amarillo{font-family:"Saira Condensed";font-size:1.15rem;font-weight:700;padding:9px 16px}
.abrir-menu{display:none;margin-left:auto;background:none;border:2px solid #fff;color:#fff;border-radius:6px;padding:7px 12px;font:inherit;font-weight:600}
@media (max-width:920px){
  .abrir-menu{display:block}
  #menu{display:none;position:absolute;left:0;right:0;top:68px;background:var(--acero);flex-direction:column;gap:0;padding:8px 22px 16px}
  #menu.abierto{display:flex}
  #menu a{padding:12px 0;border-bottom:1px solid #3a4148}
}
@media (max-width:480px){.barra .btn-amarillo{display:none}.marca small{display:none}}

/* portada */
.portada{background:var(--acero);color:#fff;padding:54px 0 70px;position:relative;overflow:hidden}
.portada::after{content:"";position:absolute;inset:auto 0 0 0;height:14px;background:repeating-linear-gradient(-45deg,var(--amarillo) 0 18px,var(--acero) 18px 36px)}
.portada-grid{display:grid;grid-template-columns:1fr 1.05fr;gap:48px;align-items:start}
@media (max-width:960px){.portada-grid{grid-template-columns:1fr;gap:30px}}
.portada .entr{color:#d9dde1}
.gratis{display:flex;gap:10px;flex-wrap:wrap;margin:22px 0 28px}
.gratis span{background:var(--amarillo);color:var(--acero);font-family:"Saira Condensed";font-weight:700;font-size:1.15rem;padding:6px 12px;border-radius:4px}
.acciones{display:flex;gap:12px;flex-wrap:wrap}

/* panel me he quedado fuera */
.fuera{background:#fff;color:var(--acero);border-radius:10px;overflow:hidden}
.fuera-cab{background:var(--amarillo);padding:16px 20px;display:flex;justify-content:space-between;align-items:center;gap:10px}
.fuera-cab h2{font-size:1.8rem;margin:0}
.fuera-cuerpo{padding:18px 20px 20px}
.situaciones{display:grid;grid-template-columns:1fr 1fr;gap:8px;margin-bottom:14px}
.situaciones button{display:flex;gap:10px;align-items:center;text-align:left;border:2px solid var(--linea);background:#fff;border-radius:8px;padding:10px 12px;font:inherit;font-weight:500;cursor:pointer;line-height:1.25}
.situaciones button svg{width:34px;height:34px;flex:none}
.situaciones button[aria-pressed="true"]{border-color:var(--acero);background:var(--niebla)}
@media (max-width:460px){.situaciones{grid-template-columns:1fr}}
.respuesta{background:var(--niebla);border-radius:8px;padding:14px 16px;min-height:120px}
.respuesta h3{font-size:1.3rem;margin-bottom:6px}
.respuesta ul{margin:0;padding-left:20px}
.ubicar{margin-top:14px;display:grid;gap:8px}
.ubicar .btn{justify-content:center}
.ubicar p{margin:0;font-size:.9rem;color:var(--gris)}

/* bandas */
.banda{padding:84px 0}
.banda-niebla{background:var(--niebla)}
.banda-acero{background:var(--acero-2);color:#e6e9ec}
.banda-acero h2,.banda-acero h3{color:#fff}
.dos{display:grid;grid-template-columns:1fr 1fr;gap:52px;align-items:start}
@media (max-width:900px){.dos{grid-template-columns:1fr;gap:28px}.banda{padding:56px 0}}
.tres{display:grid;grid-template-columns:repeat(3,1fr);gap:20px}
@media (max-width:900px){.tres{grid-template-columns:1fr}}
.tarjeta{background:#fff;border:1px solid var(--linea);border-radius:10px;padding:22px;text-decoration:none;display:block}
.tarjeta svg{width:56px;height:56px;margin-bottom:12px}
.tarjeta .ir{font-weight:600;text-decoration:underline;text-decoration-color:var(--amarillo);text-decoration-thickness:3px;text-underline-offset:3px}

/* servicio */
.cab-serv{background:var(--acero);color:#fff;padding:50px 0 46px;position:relative}
.cab-serv::after{content:"";position:absolute;inset:auto 0 0 0;height:10px;background:repeating-linear-gradient(-45deg,var(--amarillo) 0 14px,var(--acero) 14px 28px)}
.cab-serv .entr{color:#d9dde1}
.migas{font-size:.9rem;color:#aab2ba;margin-bottom:12px}
.migas a{color:#aab2ba}
.lista{padding-left:20px;margin:0}
.lista li{margin-bottom:6px}

/* medidor de bombín */
.medidor{background:#fff;border:1px solid var(--linea);border-radius:10px;padding:22px}
.medidor svg{width:100%;height:auto;touch-action:none}
.asa{cursor:ew-resize}
.medida-res{display:grid;grid-template-columns:repeat(3,1fr);gap:8px;margin:14px 0}
.medida-res div{background:var(--niebla);border-radius:8px;padding:10px 12px}
.medida-res b{display:block;font-family:"Saira Condensed";font-size:2rem;line-height:1}
.medida-res span{font-size:.85rem;color:var(--gris)}
.rango{display:grid;gap:4px;margin:6px 0}
.rango label{display:flex;justify-content:space-between;font-weight:600}
input[type=range]{width:100%;accent-color:var(--acero)}
.aviso-sale{border-radius:8px;padding:12px 14px;margin-bottom:12px}
.aviso-sale.bien{background:#e3f1e8;color:#1f5a38}
.aviso-sale.mal{background:#f9e2df;color:#8a2a1f}

/* bumping */
.bump{background:#fff;border:1px solid var(--linea);border-radius:10px;padding:22px}
.bump svg{width:100%;height:auto}
.pin{transition:transform .12s ease-out}
.bump-ctrl{display:flex;gap:8px;flex-wrap:wrap;margin-top:12px}
.chip{border:2px solid var(--linea);background:#fff;border-radius:999px;padding:7px 14px;font:inherit;font-weight:500;cursor:pointer}
.chip[aria-pressed="true"]{border-color:var(--acero);background:var(--acero);color:#fff}

/* pedir */
.pedir{padding:84px 0;background:var(--niebla)}
.pedir-grid{display:grid;grid-template-columns:.95fr 1.05fr;gap:48px;align-items:start}
@media (max-width:900px){.pedir-grid{grid-template-columns:1fr;gap:28px}}
.ficha-pedido{background:#fff;border-radius:10px;padding:16px 18px;border:1px solid var(--linea)}
.fp-tit{font-weight:600;margin-bottom:6px}
.ficha-pedido ul{margin:0;padding-left:18px}
.ficha-pedido li button{background:none;border:0;color:var(--rojo);cursor:pointer;font:inherit;font-size:.88rem;margin-left:8px}
.fp-vacio{color:var(--gris);margin:0}
.formu{display:grid;gap:14px}
.formu label{display:grid;gap:4px;font-weight:600;font-size:.96rem}
.formu input,.formu textarea,.formu select{font:inherit;font-weight:400;padding:11px 13px;border:2px solid #c6ccd2;border-radius:6px;background:#fff;width:100%}
.formu input:focus,.formu textarea:focus,.formu select:focus{border-color:var(--acero);outline:none}
.fila2{display:grid;grid-template-columns:1fr 1fr;gap:12px}
@media (max-width:560px){.fila2{grid-template-columns:1fr}}
.subida{border:2px dashed #a8b0b8;border-radius:6px;padding:14px;background:#fff}
.subida input{position:absolute;width:1px;height:1px;opacity:0}
.subida-txt{cursor:pointer;display:grid!important;gap:2px}
.subida-txt span{font-weight:400;color:var(--gris);font-size:.9rem}
.minis{display:flex;gap:8px;flex-wrap:wrap;margin-top:8px}
.minis img{width:64px;height:64px;object-fit:cover;border-radius:4px}
.nota{margin:0}

.pie{background:var(--acero);color:#c7cdd3;padding:56px 0 20px}
.pie a{color:#fff}
.pie-grid{display:grid;grid-template-columns:1.4fr 1fr 1fr;gap:36px}
.pie ul{list-style:none;margin:0;padding:0;display:grid;gap:6px}
.pie-marca{font-family:"Saira Condensed";font-weight:800;font-size:1.7rem;color:#fff;margin-bottom:8px}
.pie-tit{font-weight:600;color:#fff;margin-bottom:8px}
.pie-baja{display:flex;justify-content:space-between;gap:12px;flex-wrap:wrap;border-top:1px solid #3a4148;margin-top:36px;padding-top:16px;font-size:.86rem;color:#8f979f}
@media (max-width:800px){.pie-grid{grid-template-columns:1fr}}
.medida-res b{white-space:nowrap}
@media (max-width:560px){.medida-res b{font-size:1.45rem}.medidor,.bump{padding:14px}.medida-res div{padding:8px}}