/* P&H Cleaning Pro · v4 (home + subpáginas) · colores, letra y maquetación de marca.md (v4 manda; escala tipográfica de v3) */
@font-face{font-family:"Figtree";src:url("fonts/figtree-latin-wght.woff2") format("woff2");font-weight:400 800;font-display:swap}
:root{
  --navy:#002B55;--navy-deep:#001F42;--navy-2:#003D6B;--teal:#00C2BC;--teal-hover:#00A9A4;--teal-ink:#007A7A;
  --ink:#18384D;--muted:#5A6F77;--mist:#E9F7F7;--line:#D6E2E6;--white:#fff;--err:#B42318;--soft:#C9E3E8;--lead-dark:#DCEEF2;
  --r:12px;--r2:16px;--r3:20px;--wrap:1160px;--gut:20px;
  --font:"Figtree","Helvetica Neue",Arial,sans-serif;
  --tile:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='80' height='40'%3E%3Cpath d='M0 .75H80M0 20.75H80M.75 0V20.75M40.75 20.75V40' fill='none' stroke='%23002B55' stroke-opacity='.06' stroke-width='1.5'/%3E%3C/svg%3E");
  --tile-dark:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='80' height='40'%3E%3Cpath d='M0 .75H80M0 20.75H80M.75 0V20.75M40.75 20.75V40' fill='none' stroke='%2300C2BC' stroke-opacity='.10' stroke-width='1.5'/%3E%3C/svg%3E");
}
*,*::before,*::after{box-sizing:border-box}
[hidden]{display:none!important}
html{-webkit-text-size-adjust:100%;scroll-padding-top:96px}
body{margin:0;background:var(--white);color:var(--ink);font:400 1.0625rem/1.6 var(--font);overflow-x:hidden}
img{max-width:100%;height:auto;display:block}
a{color:var(--teal-ink)}
h1,h2,h3{color:var(--navy);margin:0 0 .5em;text-wrap:balance}
h1{font-size:clamp(2.25rem,1.4rem + 3.6vw,4.25rem);line-height:1.02;font-weight:800;letter-spacing:-.03em;max-width:15ch}
h2{font-size:clamp(1.75rem,1.2rem + 2.2vw,2.75rem);line-height:1.1;font-weight:800;letter-spacing:-.02em}
h3{font-size:1.3125rem;line-height:1.3;font-weight:700;letter-spacing:-.005em}
p{margin:0 0 1em}
main p,main li{max-width:66ch}
:focus-visible{outline:3px solid var(--navy);outline-offset:3px;border-radius:4px}
.on-dark :focus-visible{outline-color:#fff}
.vh{position:absolute!important;width:1px;height:1px;padding:0;margin:-1px;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap;border:0}
.skip{position:absolute;left:12px;top:-60px;z-index:100;background:var(--navy);color:#fff;padding:12px 16px;border-radius:var(--r);font-weight:600;text-decoration:none}
.skip:focus{top:12px}
.wrap{max-width:var(--wrap);margin:0 auto;padding:0 var(--gut)}
.eyebrow{font-size:.875rem;line-height:1.2;font-weight:700;letter-spacing:.1em;text-transform:uppercase;color:var(--teal-ink);margin:0 0 12px}
section{position:relative}
.sec{padding:72px 0}
.sec-head{max-width:720px;margin-bottom:36px}
.sec-head p{margin:0;max-width:52ch}
.ico{width:24px;height:24px;flex:none}

/* ── Botones ── */
.btn{display:inline-flex;align-items:center;justify-content:center;gap:10px;min-height:52px;padding:12px 22px;border-radius:var(--r);
  font:600 1.0625rem/1.2 var(--font);text-decoration:none;border:2px solid transparent;cursor:pointer;transition:background-color .15s,transform .1s;text-align:center}
.btn:active{transform:scale(.97)}
.btn .ico{width:22px;height:22px}
.btn-call{background:var(--teal);color:var(--navy)}
.btn-call:hover{background:var(--teal-hover)}
.btn-ghost{background:transparent;color:var(--navy);border-color:var(--navy)}
.btn-ghost:hover{background:var(--mist)}
.btn-navy{background:var(--navy);color:#fff}
.btn-navy:hover{background:var(--navy-deep)}
.on-dark .btn-ghost{color:#fff;border-color:#fff}
.on-dark .btn-ghost:hover{background:rgba(255,255,255,.1)}
.btn-big{min-height:56px;font-weight:700}
.btn-big .ico{width:24px;height:24px}
@media (min-width:600px){.btn-big{min-height:60px;padding:16px 30px;font-size:1.125rem}}
.actions{display:flex;flex-wrap:wrap;gap:12px;align-items:center}
.textlink{display:inline-flex;align-items:center;gap:8px;min-height:44px;font-weight:600;color:var(--teal-ink);text-underline-offset:3px}
.textlink .ico{width:20px;height:20px}

/* ── Cabecera ── */
.top{position:sticky;top:0;z-index:50;background:#fff;border-bottom:1px solid var(--line)}
.top .wrap{display:flex;align-items:center;gap:20px;min-height:76px}
.brand{display:block;padding:10px 0;flex:none}
.brand img{height:63px;width:auto}
.nav{display:none;gap:4px;margin-left:auto}
.nav a{display:flex;align-items:center;min-height:44px;padding:0 12px;color:var(--navy);font-weight:600;text-decoration:none;border-radius:8px;white-space:nowrap}
.nav a:hover{background:var(--mist)}
.lang{display:flex;align-items:center}
.lang a{display:inline-flex;align-items:center;min-height:44px;padding:0 10px;font-weight:600;color:var(--teal-ink);text-underline-offset:3px}
.top .lang{margin-left:auto}
.top .btn-call{min-height:48px;padding:10px 16px;white-space:nowrap}
.top .btn-call .num{display:none}
@media (max-width:419px){:root{--gut:16px}.top .wrap{gap:6px}.top .btn-call{padding:10px 12px;min-width:48px}.top .btn-call .short{display:none}.lang a{padding:0 8px}}
@media (min-width:1000px){.brand img{height:64px}}
@media (min-width:1180px){.nav{display:flex}.top .lang{margin-left:0}.top .btn-call .num{display:inline}.top .btn-call .short{display:none}}

/* ── Pompas (marca.md v4 §3): capas recortadas; quietas sin JS o con movimiento reducido ── */
.fx-pompas{position:absolute;inset:0;overflow:hidden;pointer-events:none}
.fx-pompas.atras{z-index:0}
.fx-pompas.delante{z-index:2}
.pompa{position:absolute;display:none;width:var(--s);height:var(--s);will-change:transform}
.pompa-in,.pompa svg{display:block;width:100%;height:100%}
.pompa.texto{opacity:.28}
.pompa.cl,.pompa.of,.pompa.qs{display:block}
@media (min-width:900px){.pompa.d{display:block}}
@media (min-width:600px) and (max-width:899px){
  .pompa.d.t{display:block;width:calc(var(--s) * .75);height:calc(var(--s) * .75)}
  .hero .pompa.d.t.b5,.hero .pompa.d.t.b10{opacity:.28}
}
@media (max-width:599px){.pompa.mv{display:block}}
/* las que suben: solo con movimiento (las enciende fx.js con .sube-on) */
.pompa.sube{display:none!important}
@media (min-width:900px){.sube-on .pompa.sube.d{display:block!important}}
@media (min-width:600px) and (max-width:899px){.sube-on .pompa.sube.d:not(.solo-d){display:block!important}}
@media (max-width:599px){.sube-on .pompa.sube.mv{display:block!important}}

/* ── Portada (azul) con carrusel ── */
.hero{background:linear-gradient(115deg,#002B55 0%,#002B55 52%,#003D6B 100%);color:#fff;z-index:1}
.hero-grid{position:relative;z-index:1;display:flex;flex-direction:column}
.hero-media{margin:0 calc(var(--gut) * -1)}
.car{position:relative}
.car-frame{position:relative;aspect-ratio:4/3;overflow:hidden;background:var(--navy-deep)}
.slide{position:absolute;inset:0;opacity:0;transition:opacity 1.2s ease}
.slide.on{opacity:1;z-index:1}
.slide img{width:100%;height:100%;object-fit:cover;transform-origin:50% 50%}
.js .slide.kb img{animation:kb 7.2s linear forwards}
.js .slide.kb.alt img{animation-name:kb2}
@keyframes kb{from{transform:scale(1) translateX(0)}to{transform:scale(1.08) translateX(-2%)}}
@keyframes kb2{from{transform:scale(1) translateX(0)}to{transform:scale(1.08) translateX(2%)}}
.car-ctl{position:absolute;left:12px;bottom:36px;z-index:3;display:flex;align-items:center;gap:4px;background:#fff;border-radius:999px;padding:0 4px 0 14px;box-shadow:0 4px 14px rgba(0,31,66,.25)}
.js .car-ctl[hidden]{display:flex!important}
.car-label{font-weight:700;color:var(--navy);font-size:.9375rem;margin-right:4px;white-space:nowrap}
.car-dots{display:flex}
.dot{width:28px;height:44px;border:0;background:none;padding:0;cursor:pointer;display:flex;align-items:center;justify-content:center}
.dot::before{content:"";width:6px;height:6px;border-radius:999px;background:var(--line);transition:width .25s,background-color .25s}
.dot[aria-current="true"]::before{width:22px;background:var(--teal-ink)}
.car-pause{width:44px;height:44px;border:0;background:none;cursor:pointer;color:var(--navy);display:flex;align-items:center;justify-content:center;border-radius:50%}
.car-pause .ico{width:20px;height:20px}
.car-pause .ic-play,.car-pause[aria-pressed="true"] .ic-pause{display:none}
.car-pause[aria-pressed="true"] .ic-play{display:block}
.car-ctl :focus-visible{outline-color:var(--navy)}
.hero-text{position:relative;padding:28px 0 40px}
.hero-text::before{content:"";position:absolute;left:calc(var(--gut) * -1);right:calc(var(--gut) * -1);top:-24px;height:25px;background:var(--navy);border-radius:24px 24px 0 0}
.hero h1{color:#fff;margin-bottom:16px}
.hero .eyebrow{color:#fff;display:flex;align-items:center;gap:12px;margin-bottom:12px}
.hero .eyebrow::before{content:"";width:28px;height:3px;background:var(--teal);flex:none}
.hero .lead{color:var(--lead-dark);font-size:clamp(1.125rem,1rem + .5vw,1.375rem);line-height:1.5;max-width:36ch;margin-bottom:24px}
.hero .actions .btn{flex:1 1 100%}
.hero .textlink{color:#fff;margin-top:8px;font-size:1rem}
.trust{list-style:none;margin:24px 0 0;padding:0;display:grid;gap:10px 24px}
.trust li{display:flex;align-items:center;gap:10px;font-size:.9375rem;font-weight:600;color:#fff}
.trust .ico{width:20px;height:20px;color:var(--teal)}
@media (max-width:389px){.trust{display:none}}
@media (min-width:600px){.trust{grid-template-columns:1fr 1fr}.hero .actions .btn{flex:0 1 auto}}
@media (min-width:600px) and (max-width:899px){.hero-media{margin:0}.car-frame{border-radius:var(--r3) var(--r3) 0 0}.hero-text::before{left:0;right:0}}
@media (min-width:900px){
  .hero{padding:72px 0 0}
  .hero-grid{display:grid;grid-template-columns:1.1fr .9fr;gap:64px;align-items:center}
  .hero-media{order:2;margin:0 0 -96px;position:relative}
  .hero-media::before{content:"";position:absolute;inset:18px -18px -18px 18px;border:2px solid rgba(0,194,188,.6);border-radius:var(--r3);pointer-events:none}
  .car-frame{aspect-ratio:4/5;max-height:620px;border-radius:var(--r3)}
  .car-ctl{bottom:16px;left:16px}
  .hero-text{padding:0 0 96px}
  .hero-text::before{display:none}
  .hero h1{margin-bottom:22px}.hero .eyebrow{margin-bottom:18px}.hero .lead{margin-bottom:34px}
  .hero .textlink{margin-top:12px}.trust{margin-top:32px}
  .home .hero + .ba-sec{padding-top:144px}
}

/* ── Antes / después ── */
.ba-sec{padding:56px 0 72px;background:var(--mist);overflow:hidden}
.fx-pasada{position:absolute;inset:0;z-index:0;background:repeating-linear-gradient(70deg,rgba(255,255,255,.55) 0 56px,rgba(255,255,255,0) 56px 112px);pointer-events:none}
.ba-sec .wrap{position:relative;z-index:1}
.ba-grid{display:grid;gap:32px}
@media (min-width:900px){.ba-grid{grid-template-columns:5fr 7fr;gap:32px 56px;align-items:start}}
.ba-media{min-width:0}
.ba{position:relative;--p:50%;border-radius:var(--r3);overflow:hidden;max-width:640px;width:100%;margin-left:auto;aspect-ratio:4/5;background:#dfeef0;touch-action:pan-y;box-shadow:0 18px 40px rgba(0,43,85,.14)}
.ba img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover}
.ba .after{clip-path:inset(0 0 0 var(--p))}
.ba input{position:absolute;inset:0;width:100%;height:100%;margin:0;opacity:0;cursor:ew-resize;z-index:3;-webkit-appearance:none;appearance:none}
.ba-handle{position:absolute;top:0;bottom:0;left:var(--p);width:3px;margin-left:-1.5px;background:#fff;z-index:2;pointer-events:none}
.ba-handle::after{content:"";position:absolute;top:50%;left:50%;width:44px;height:44px;margin:-22px 0 0 -22px;border-radius:50%;background:var(--teal);box-shadow:0 2px 10px rgba(0,31,66,.35);
  background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 44 44'%3E%3Cpath d='M18 15l-7 7 7 7M26 15l7 7-7 7' fill='none' stroke='%23002B55' stroke-width='2.6' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E")}
.ba input:focus-visible ~ .ba-handle::after{outline:3px solid var(--navy);outline-offset:3px}
.ba-tag{position:absolute;top:14px;z-index:2;background:var(--navy);color:#fff;font-size:.875rem;font-weight:600;padding:6px 12px;border-radius:999px;pointer-events:none}
.ba-tag.l{left:14px}.ba-tag.r{right:14px}
.pair-block{margin-top:32px}
.pair-block h3{margin:0 0 .3em}
.pair-block p{margin:0 0 16px}
.pair{display:grid;grid-template-columns:1fr 1fr;gap:12px;margin:0}
.pair figure{position:relative;margin:0;border-radius:var(--r);overflow:hidden;background:#dfeef0}
.pair img{width:100%;height:auto;aspect-ratio:2/3;object-fit:cover}
.pair .ba-tag{top:auto;bottom:12px;left:12px}
.big-pair .pair{max-width:860px}

/* ── Servicios: mosaico ── */
.services{background:#fff;overflow:hidden}
.fx-azulejo{position:absolute;inset:-8% 0;background:var(--tile);z-index:0;pointer-events:none}
.services .wrap,.area .wrap,.phero .wrap{position:relative;z-index:1}
.cards{display:grid;gap:20px;list-style:none;margin:0;padding:0}
.card{position:relative;background:#fff;border:1px solid var(--line);border-radius:var(--r2);overflow:hidden;display:flex;flex-direction:column;transition:transform .2s,box-shadow .2s;max-width:none}
.card:hover{transform:translateY(-4px);box-shadow:0 12px 32px rgba(0,43,85,.12)}
.card-photo{position:relative;overflow:hidden;aspect-ratio:16/10;background:var(--mist)}
.card-photo img{width:100%;height:100%;object-fit:cover;transition:transform .4s}
.card:hover .card-photo img{transform:scale(1.04)}
.card-body{padding:20px 22px 22px;display:flex;flex-direction:column;flex:1}
.card h3{display:flex;align-items:center;gap:12px}
.h3-ico{width:40px;height:40px;padding:8px;border-radius:50%;background:var(--mist);color:var(--teal-ink)}
.card h3 a{color:var(--navy);text-decoration:none;display:inline-flex;align-items:center;min-height:44px}
.card h3 a::after{content:"";position:absolute;inset:0;z-index:1}
.card h3 a:focus-visible{outline:none}
.card:focus-within{outline:3px solid var(--navy);outline-offset:3px}
.card p{margin:0 0 16px}
.card .go{margin-top:auto;display:inline-flex;align-items:center;gap:6px;font-weight:600;color:var(--teal-ink)}
.card .go .ico{width:18px;height:18px;transition:transform .15s}
.card:hover .go .ico{transform:translateX(3px)}
.stock{position:absolute;right:8px;bottom:8px;z-index:2;background:rgba(0,43,85,.75);color:rgba(255,255,255,.95);font-size:.75rem;font-weight:600;padding:3px 8px;border-radius:6px}
@media (min-width:600px){.cards{grid-template-columns:1fr 1fr}}
@media (min-width:1000px){
  .mosaic{grid-template-columns:repeat(3,1fr);grid-template-rows:auto auto}
  .mosaic .c1{grid-column:1;grid-row:1 / span 2}
  .mosaic .c1 .card-photo{aspect-ratio:4/5}
  .mosaic .c2{grid-column:2 / span 2;grid-row:1;flex-direction:row}
  .mosaic .c2 .card-photo{width:50%;aspect-ratio:auto;min-height:100%}
  .mosaic .c2 .card-body{width:50%;justify-content:center}
  .mosaic .c3{grid-column:2;grid-row:2}.mosaic .c4{grid-column:3;grid-row:2}
}

/* ── Cómo trabajamos ── */
.steps{position:relative}
.step-list{list-style:none;margin:0;padding:0;display:grid;gap:20px}
.step{position:relative;background:var(--mist);border-radius:var(--r2);padding:24px 24px 24px 96px;max-width:none}
.step-n{position:absolute;left:24px;top:24px;width:56px;height:56px;border-radius:50%;border:3px solid var(--teal-ink);background:var(--teal);color:var(--navy);
  display:flex;align-items:center;justify-content:center;font-weight:800;font-size:1.375rem;transition:background-color .3s;z-index:3}
.steps.is-js .step-n{background:#fff}
.steps.is-js .step.on .step-n{background:var(--teal)}
.step-ico{width:28px;height:28px;color:var(--teal-ink);margin-bottom:8px}
.step h3{margin-bottom:.3em}
.step p{margin:0}
.steps-line{position:absolute;left:51px;top:40px;bottom:40px;width:3px;background:var(--teal-ink);transform-origin:50% 0;z-index:2}
@media (min-width:900px){
  .step-list{grid-template-columns:repeat(3,1fr);gap:28px}
  .step{padding:96px 28px 28px}
  .step-n{left:28px}
  .steps-line{left:84px;right:calc(33.33% - 56px);top:51px;bottom:auto;width:auto;height:3px;transform-origin:0 50%}
}
.band{margin-top:28px;background:var(--navy);border-radius:var(--r2);padding:24px;display:flex;flex-wrap:wrap;gap:16px 24px;align-items:center;justify-content:space-between}
.band p{margin:0;color:#fff;font-weight:600;font-size:1.125rem;max-width:46ch}
.band .actions .btn{flex:1 1 220px}
@media (min-width:900px){.band{padding:28px 32px}.band .actions .btn{flex:0 0 auto}}

/* ── Lo que puedes esperar ── */
.why{padding-top:24px}
.why-grid{display:grid;gap:28px;position:relative}
.why-photo{border-radius:var(--r2);overflow:hidden;position:relative;z-index:1}
.why-photo img{width:100%;aspect-ratio:4/3;object-fit:cover}
.points{list-style:none;margin:0;padding:0;display:grid;gap:16px}
.points li{display:grid;grid-template-columns:48px 1fr;gap:14px;background:#fff;border-radius:var(--r2);padding:20px;max-width:none;box-shadow:0 1px 0 var(--line)}
.pt-ico{width:48px;height:48px;padding:11px;border-radius:50%;background:rgba(0,194,188,.15);color:var(--teal-ink)}
.points h3{margin:4px 0 .25em}
.points p{margin:0}
@media (max-width:899px){.why{background:linear-gradient(#fff 0,#fff 160px,var(--mist) 160px)}}
@media (min-width:600px) and (max-width:899px){.points{grid-template-columns:1fr 1fr}}
@media (min-width:900px){
  .why{padding:120px 0 72px}
  .why::before{content:"";position:absolute;left:0;right:0;top:184px;bottom:0;background:var(--mist)}
  .why-grid{grid-template-columns:5fr 7fr;gap:48px;align-items:start}
  .why-photo img{aspect-ratio:4/5}
  .why-text{padding-top:72px}
  .points{grid-template-columns:1fr 1fr}
}

/* ── Zona ── */
.area{background:var(--mist)}
@media (min-width:900px){.area{overflow:hidden}}
.area-grid{display:grid;gap:28px;align-items:start}
@media (min-width:900px){.area-grid{grid-template-columns:5fr 7fr;gap:48px}}
.chip{display:inline-flex;align-items:center;gap:8px;background:#fff;border:1px solid var(--line);border-radius:999px;padding:6px 14px;font-weight:700;color:var(--navy)}
.chip .ico{width:18px;height:18px;color:var(--teal-ink)}
.call-card{background:#fff;border:1px solid var(--line);border-radius:var(--r2);padding:20px;display:grid;gap:12px;margin-top:20px}
.call-card p{margin:0;font-weight:700;color:var(--navy);font-size:1.125rem}
.cc-ico{width:40px;height:40px;padding:9px;border-radius:50%;background:var(--mist);color:var(--teal-ink)}
.call-card .btn{width:100%}
#map{display:none;aspect-ratio:16/10;min-height:320px;border-radius:var(--r2);border:1px solid var(--line);background:#dfe9ec;z-index:0}
.js #map{display:block}
.js .area.no-map #map{display:none}
#map .leaflet-tile-pane{filter:saturate(.55) contrast(1.02)}
.leaflet-tooltip.zona{background:var(--navy);color:#fff;border:0;border-radius:999px;font:700 .9375rem/1 var(--font);padding:7px 12px;box-shadow:0 2px 8px rgba(0,31,66,.3)}
.leaflet-tooltip.zona::before{display:none}
.leaflet-container .leaflet-control-attribution{font:.75rem/1.4 var(--font);background:rgba(255,255,255,.9)}
.leaflet-container .leaflet-control-attribution a{color:var(--teal-ink)}
.cities{margin:12px 0 0;padding:14px 18px;background:#fff;border-radius:var(--r);list-style:none;font-weight:600;color:var(--navy)}
.js .area:not(.no-map) .cities{position:absolute!important;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0);padding:0;margin:0}

/* ── Cotización ── */
.quote{background:#fff}
.quote-grid{display:grid;gap:28px}
.quote-side{position:relative;overflow:hidden;background:var(--navy);border-radius:var(--r2);padding:28px 24px;display:grid;gap:12px;color:#fff;align-content:start}
.quote-side>*{position:relative;z-index:1}
.quote-side>.pompa{position:absolute;z-index:0}
.quote-side .talk{margin:0 0 4px;font-size:1.375rem;font-weight:800;color:#fff}
.quote-side .btn{width:100%}
.mini-steps{list-style:none;margin:12px 0 0;padding:0;display:grid;gap:10px}
.mini-steps li{display:flex;align-items:center;gap:12px;color:#fff;font-weight:600}
.mini-steps span{width:30px;height:30px;flex:none;border-radius:50%;border:2px solid var(--teal);display:flex;align-items:center;justify-content:center;font-size:.9375rem}
.quote-main{min-width:0;background:#fff;border:1px solid var(--line);border-radius:var(--r2);padding:24px 20px}
@media (min-width:960px){
  .quote-grid{grid-template-columns:4fr 8fr;gap:32px;align-items:start}
  .quote-side{position:sticky;top:96px}
  .quote-main{padding:32px}
}

/* ── Preguntas ── */
.faq-grid{display:grid;gap:28px}
@media (min-width:900px){.faq-grid{grid-template-columns:4fr 8fr;gap:48px;align-items:start}.faq-side{position:sticky;top:96px}}
.faq details{border-bottom:1px solid var(--line)}
.faq summary{list-style:none;cursor:pointer;display:flex;justify-content:space-between;align-items:center;gap:16px;min-height:56px;padding:14px 0;font-weight:700;font-size:1.125rem;color:var(--navy)}
.faq summary::-webkit-details-marker{display:none}
.faq summary::after{content:"";flex:none;width:28px;height:28px;border-radius:50%;background:var(--mist) url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 28 28'%3E%3Cpath d='M9 14h10M14 9v10' stroke='%23007A7A' stroke-width='2.4' stroke-linecap='round'/%3E%3C/svg%3E") center/28px no-repeat;transition:transform .2s}
.faq details[open] summary::after{transform:rotate(45deg)}
.faq details p{margin:0 0 18px}

/* ── Cierre ── */
.close{background:var(--navy);color:#fff;padding:80px 0;overflow:hidden}
.close::before{content:"";position:absolute;inset:0;background:var(--tile-dark)}
.close .wrap{position:relative;z-index:1;text-align:center}
.close h2{color:#fff;margin-left:auto;margin-right:auto}
.close-p{color:var(--lead-dark);margin:0 auto 12px;max-width:52ch}
.close .bignum{display:block;font-size:clamp(2rem,6vw,3.25rem);font-weight:800;color:#fff;text-decoration:none;margin:0 0 24px}
.close .actions{justify-content:center}
.close .actions .btn{flex:0 1 320px}

/* ── Pie ── */
.foot{background:var(--navy-deep);color:var(--soft);padding:56px 0 110px;font-size:1rem}
.foot a{color:#fff}
.foot-grid{display:grid;gap:32px}
@media (min-width:800px){.foot-grid{grid-template-columns:1.2fr 1fr 1fr;gap:48px}.foot{padding-bottom:40px}}
.foot-logo{display:inline-block;background:#fff;border-radius:var(--r);padding:16px 18px}
.foot-logo img{width:300px;max-width:100%}
.slogan{font-style:italic;margin:16px 0 0}
.foot h2{font-size:1rem;color:#fff;text-transform:uppercase;letter-spacing:.08em;margin:0 0 12px}
.foot ul{list-style:none;margin:0;padding:0}
.foot li{margin:0 0 6px}
.foot li a{display:inline-flex;align-items:center;min-height:44px}
.foot-bottom{margin-top:36px;padding-top:20px;border-top:1px solid rgba(201,227,232,.2);display:flex;flex-wrap:wrap;gap:12px 24px;align-items:center;justify-content:space-between}
.foot-bottom p{margin:0}
.foot .lang a{color:#fff}

/* ── Barra fija móvil ── */
.callbar{position:fixed;left:0;right:0;bottom:0;z-index:60;display:flex;gap:8px;padding:8px 10px calc(8px + env(safe-area-inset-bottom));background:#fff;border-top:1px solid var(--line);box-shadow:0 -4px 16px rgba(0,31,66,.12);transition:transform .25s}
.callbar .btn{min-width:0;min-height:52px;padding:10px 12px;font-size:1rem}
.callbar .btn-call{flex:1.9 1 0}
.callbar .btn-ghost{flex:1 1 0}
.callbar.is-away,.callbar.is-typing{transform:translateY(110%)}
@media (min-width:900px){.callbar{display:none}}

/* ══ Subpáginas ══ */
.svc-nav{background:#fff;border-bottom:1px solid var(--line)}
.svc-nav .wrap{display:flex;flex-wrap:wrap;gap:8px;padding-top:10px;padding-bottom:10px}
.svc-nav a{display:inline-flex;align-items:center;gap:8px;min-height:44px;padding:6px 14px;border:1.5px solid var(--line);border-radius:999px;color:var(--navy);font-weight:600;font-size:.9375rem;text-decoration:none;background:#fff}
.svc-nav a .ico{width:20px;height:20px;color:var(--teal-ink)}
.svc-nav a:hover{border-color:var(--navy)}
.svc-nav a[aria-current="page"]{background:var(--navy);border-color:var(--navy);color:#fff}
.svc-nav a[aria-current="page"] .ico{color:var(--teal)}
@media (max-width:599px){.svc-nav a{font-size:.875rem;padding:6px 12px}}
.crumbs{display:flex;flex-wrap:wrap;align-items:center;gap:8px;font-size:.9375rem;margin-bottom:12px;color:var(--ink)}
.crumbs a{display:inline-flex;align-items:center;min-height:44px;font-weight:600}
.phero{padding:32px 0 56px;overflow:hidden}
.phero.rasgo-pasada,.phero.rasgo-azulejo{background:var(--mist)}
.phero.rasgo-lista{background:linear-gradient(180deg,var(--mist),#fff)}
.phero-grid{display:grid;gap:28px;align-items:center}
.phero-photo{position:relative;z-index:1;border-radius:var(--r3);overflow:hidden;box-shadow:0 18px 40px rgba(0,43,85,.14)}
.phero-photo img{width:100%;aspect-ratio:4/3;object-fit:cover}
.phero .lead{font-size:clamp(1.125rem,1rem + .5vw,1.375rem);line-height:1.5;max-width:40ch;margin-bottom:24px}
.phero .actions .btn{flex:1 1 100%}
@media (min-width:600px){.phero .actions .btn{flex:0 1 auto}}
@media (max-width:899px){.phero-photo{order:-1}}
@media (min-width:900px){
  .phero{padding:48px 0 72px}
  .phero-grid{grid-template-columns:1.1fr .9fr;gap:56px}
  .phero-photo img{aspect-ratio:4/5;max-height:560px}
  .phero.rasgo-oficina .phero-photo img{aspect-ratio:16/10}
}
.phero.on-dark{background:linear-gradient(115deg,#002B55 0%,#002B55 52%,#003D6B 100%);color:#fff}
.phero.on-dark h1{color:#fff}
.phero.on-dark .lead{color:var(--lead-dark)}
.phero.on-dark .crumbs,.phero.on-dark .crumbs a{color:#fff}
.incl-two{display:grid;gap:28px;align-items:start}
@media (min-width:900px){.incl-two{grid-template-columns:7fr 5fr;gap:56px}}
.incl-two .who-box{padding:28px 24px}
@media (min-width:900px){.incl-two .who-box{padding:32px}}
.freqs{display:flex;flex-wrap:wrap;gap:8px;margin:0 0 20px}
.freqs span{background:var(--navy);color:#fff;border-radius:999px;padding:6px 14px;font-weight:600;font-size:.9375rem}
.ticks{list-style:none;margin:0;padding:0;display:grid;gap:12px}
.ticks li{display:grid;grid-template-columns:28px 1fr;gap:12px;align-items:start}
.li-ico{width:28px;height:28px;padding:5px;border-radius:50%;background:rgba(0,194,188,.15);color:var(--teal-ink)}
@media (min-width:800px){.ticks.cols{grid-template-columns:1fr 1fr;gap:12px 32px}}
.ctx-link{margin:24px 0 0}
.ctx-link a{display:inline-flex;align-items:center;gap:8px;min-height:44px;font-weight:700}
.ctx-link .ico{width:20px;height:20px}
.incl-grid{display:grid;gap:28px;align-items:center}
@media (min-width:900px){.incl-grid{grid-template-columns:7fr 5fr;gap:56px}}
.incl-photo{position:relative;border-radius:var(--r2);overflow:hidden}
.incl-photo img{width:100%;object-fit:cover}
.checklist{list-style:none;margin:0;padding:0;display:grid;gap:14px}
.checklist li{display:flex;align-items:flex-start;gap:14px;background:var(--mist);border-radius:var(--r);padding:14px 16px;font-weight:600;color:var(--navy);max-width:none}
.checklist .box{width:30px;height:30px;flex:none;border:2.5px solid var(--teal-ink);border-radius:8px;display:flex;align-items:center;justify-content:center;background:var(--teal);color:var(--navy);transition:background-color .3s}
.checklist .box .ico{width:20px;height:20px;transition:opacity .3s}
.checklist.is-js .box{background:#fff}
.checklist.is-js .box .ico{opacity:0}
.checklist.is-js li.on .box{background:var(--teal)}
.checklist.is-js li.on .box .ico{opacity:1}
.spaces{list-style:none;margin:0;padding:0;display:grid;gap:14px}
@media (min-width:600px){.spaces{grid-template-columns:repeat(3,1fr)}}
.spaces li{background:var(--mist);border-radius:var(--r2);padding:22px;display:grid;gap:12px;font-weight:700;color:var(--navy);font-size:1.125rem;max-width:none}
.sp-ico{width:48px;height:48px;padding:11px;border-radius:50%;background:#fff;color:var(--teal-ink)}
.who{padding-top:0}
.who-box{background:var(--mist);border-radius:var(--r2);padding:28px 24px}
.who-box p{margin:0}
@media (min-width:900px){.who-box{padding:36px 40px}.big-pair .ba-text{padding-top:48px}}
.gallery{padding:24px 0}
.sub-ba + .gallery{padding-top:48px}
.gal-grid{display:grid;gap:16px}
@media (min-width:700px){.gal-grid{grid-template-columns:1fr 1fr}}
.gallery figure{margin:0;border-radius:var(--r2);overflow:hidden}
.gallery img{width:100%;aspect-ratio:4/3;object-fit:cover}
.sub-ba{padding:56px 0}
.others{padding-top:0}
.other-links{list-style:none;margin:0;padding:0;display:grid;gap:12px}
@media (min-width:700px){.other-links{grid-template-columns:repeat(3,1fr)}}
.other-links li{max-width:none}
.other-links a{display:flex;align-items:center;justify-content:space-between;gap:12px;min-height:56px;padding:14px 18px;border:1.5px solid var(--line);border-radius:var(--r2);font-weight:700;color:var(--navy);text-decoration:none}
.other-links a:hover{border-color:var(--navy);background:var(--mist)}
.other-links .ico{width:20px;height:20px;color:var(--teal-ink)}

@media (prefers-reduced-motion:reduce){
  html{scroll-behavior:auto}
  *,*::before,*::after{transition-duration:.01ms!important;animation-duration:.01ms!important;animation-iteration-count:1!important}
  .js .slide.kb img{animation:none}
}
@media (max-width:599px){.phero-photo img{aspect-ratio:2/1}.phero{padding-top:20px}.phero-grid{gap:20px}}
.incl-grid .who-box{margin-top:24px;padding:24px}
.incl-grid .who-box h2{font-size:1.5rem}

/* ════ v4.1 (critica-v4 y marca.md v4.1) ════ */
/* Pompas: borde de grosor fijo en pantalla */
.pompa svg{--borde:3px}
.pompa svg circle{stroke-width:var(--borde)}
.pompa svg path{stroke-width:calc(var(--borde) * .8)}
.pompa[style^="--s:20px"] svg,.pompa[style^="--s:24px"] svg,.pompa[style^="--s:28px"] svg,.pompa[style^="--s:32px"] svg,.pompa[style^="--s:36px"] svg,
.pompa[style^="--s:14px"] svg,.pompa[style^="--s:16px"] svg,.pompa[style^="--s:18px"] svg{--borde:2px}
/* Móvil: fuertes dentro de la franja, donde no hay letras (fallo 4) */
.hero-text>.pompa{z-index:0}
.hero-text>*:not(.pompa){position:relative;z-index:1}
.trust{position:relative}
.trust>.pompa{z-index:0}
.trust li{position:relative;z-index:1}
@media (max-width:899px){.hero{overflow:hidden}}
@media (max-width:359px){.pompa.m12{display:none!important}.pompa.m3{--s:110px;right:-50px!important}}
/* Carrusel más bajo en pantallas pequeñas y cortas (fallo 5) */
@media (max-width:399px) and (max-height:700px){.car-frame{aspect-ratio:16/10}}
/* Menú de servicios de las subpáginas: una fila deslizable en móvil (fallo 1) */
@media (max-width:899px){
  .svc-nav .wrap{flex-wrap:nowrap;overflow-x:auto;scrollbar-width:none;-webkit-overflow-scrolling:touch;scroll-snap-type:x proximity;padding-right:32px;
    -webkit-mask-image:linear-gradient(90deg,#000 85%,transparent);mask-image:linear-gradient(90deg,#000 85%,transparent)}
  .svc-nav .wrap::-webkit-scrollbar{display:none}
  .svc-nav a{flex:0 0 auto;scroll-snap-align:start}
}
/* Mosaico sin huecos (fallo 2) */
@media (min-width:1000px){
  .mosaic .c1 .card-photo{aspect-ratio:auto;flex:1 1 auto;min-height:440px}
  .mosaic .c1 .card-photo img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover}
  .mosaic .c2 .card-body{justify-content:center;gap:14px}
  .mosaic .c2 .card-body p{margin:0}
  .mosaic .c2 .go{margin-top:12px}
}
.mini-ticks{list-style:none;margin:0 0 16px;padding:0;display:grid;grid-template-columns:1fr 1fr;gap:6px 16px}
.mini-ticks li{display:flex;align-items:center;gap:8px;font-weight:600;color:var(--navy);font-size:.9375rem}
.mini-ticks .ico{width:18px;height:18px;color:var(--teal-ink)}
@media (min-width:1000px){.mosaic .c2 .mini-ticks{margin:0}}
/* Subpáginas: la columna del antes/después se llena con el bloque siguiente (fallo 3) */
.ba-gal{display:grid;gap:16px;margin-top:24px}
.ba-gal figure{margin:0;border-radius:var(--r2);overflow:hidden}
.ba-gal img{width:100%;aspect-ratio:4/3;object-fit:cover}
.ba-list{margin-top:24px;background:#fff;border-radius:var(--r2);padding:22px 22px 24px}
.ba-list h3{margin-bottom:.6em}
.gal-who .gw-grid{display:grid;gap:20px;align-items:stretch}
@media (min-width:900px){.gal-who .gw-grid{grid-template-columns:8fr 4fr;gap:28px}.gal-who .who-box{display:flex;flex-direction:column;justify-content:center}}
.gal-who .gal-grid{grid-template-columns:1fr 1fr}
@media (max-width:599px){.gal-who .gal-grid{grid-template-columns:1fr}}
.gal-who figure{margin:0;border-radius:var(--r2);overflow:hidden}
.gal-who img{width:100%;height:100%;aspect-ratio:4/5;object-fit:cover}
/* Móvil: titular y botones primero, párrafo de apoyo debajo de los botones (ficha del Constructor), para que h1 y llamar entren a 360×640 */
@media (max-width:599px){
  .hero-text,.phero-text{display:flex;flex-direction:column;align-items:stretch}
  .hero-text>.actions,.phero-text>.actions{order:1}
  .hero-text>.lead,.phero-text>.lead{order:2;margin:16px 0 0}
  .hero-text>.textlink{order:3;align-self:flex-start}
  .hero-text>.trust{order:4}
  .hero h1,.phero h1{margin-bottom:16px}
  .svc-nav .wrap{padding-top:6px;padding-bottom:6px}
  .crumbs{margin-bottom:4px}
}
/* Ajuste tras captura (marca.md v4.1: si una pompa fuerte cae bajo letras se mueve a la derecha o abajo; tamaño y opacidad no cambian) */
@media (max-width:599px){
  .pompa.m10{top:22vw!important}
  .pompa.m11{top:9vw!important}
  .pompa.m3{right:-80px!important}
  .pompa.m13{left:74%!important;bottom:-60px!important}
}
@media (max-width:389px){
  .pompa.m3{bottom:-80px!important;right:-70px!important}
  .pompa.m13{left:78%!important;bottom:-56px!important}
}
@media (max-width:399px) and (max-height:700px){.pompa.m1{top:calc(62.5vw - 150px)!important}.pompa.m10{top:18vw!important}}
@media (max-width:599px){.pompa.m13{bottom:-74px!important}}
@media (max-width:389px){.pompa.m3{bottom:-104px!important;right:-66px!important}}
/* Móvil: el 28 % de las pompas de detrás del texto se aplica al grupo, no a cada una, para que al cruzarse no sumen brillo (regla #406080) */
@media (max-width:599px){.hero>.fx-pompas.atras{opacity:.28}.hero>.fx-pompas.atras .pompa.texto{opacity:1}}
/* v4.2 (crítica v4.1, fallo A): la foto de la tarjeta de casa llena el alto; el cuerpo, solo lo que mide */
@media (min-width:1000px){.mosaic .c1 .card-body{flex:0 0 auto}}
.fx-wait .hero .trust li{opacity:0}
/* Panel de correo (escritorio) */
.mailpanel{position:fixed;z-index:80;background:#fff;border:1px solid var(--line);border-radius:var(--r);box-shadow:0 12px 32px rgba(0,31,66,.2);padding:12px;color:var(--ink)}
.mailpanel-head{display:flex;align-items:center;justify-content:space-between}
.mailpanel-title{margin:0;font-weight:700;color:var(--navy)}
.mailpanel-x{width:44px;height:44px;border:0;background:none;font-size:1.6rem;cursor:pointer;color:var(--navy)}
.mailpanel-opt{display:flex;align-items:center;min-height:48px;padding:0 12px;border-radius:8px;font-weight:600;color:var(--navy);text-decoration:none}
.mailpanel-opt:hover{background:var(--mist)}
.mailpanel-addr{display:flex;align-items:center;gap:8px;padding:8px 12px 0}
.mailpanel-mail{flex:1;min-width:0;overflow-wrap:anywhere}
.mailpanel-copy{min-height:44px;padding:0 14px;border:2px solid var(--navy);border-radius:8px;background:#fff;font:600 1rem var(--font);color:var(--navy);cursor:pointer}
/* v4.4 (crítica final 1 y 2): en móvil, el comparador / el par de la ducha justo bajo su título; la galería o la lista, después */
@media (max-width:899px){
  .sub-ba .ba-grid{display:flex;flex-direction:column;gap:24px}
  .sub-ba .ba-text{display:contents}
  .sub-ba .ba-text>h2,.sub-ba .ba-text>p{margin-bottom:0}
  .sub-ba .ba-media{order:2}
  .sub-ba .ba-gal,.sub-ba .ba-list{order:3;margin-top:0}
}
/* v4.4 (crítica final 4): menos blanco entre la banda de llamada y «What you can count on» en escritorio */
@media (min-width:900px){
  .home .how{padding-bottom:40px}
  .home .why{padding-top:64px}
  .home .why::before{top:128px}
}

/* ════ v5: pie con horario y enlaces legales, pie del mapa, páginas legales ════ */
.foot-hours{margin:14px 0 0;line-height:1.5}
.foot-hours strong{color:#fff}
.foot-legal{display:flex;flex-wrap:wrap;gap:4px 20px;margin:0!important}
.foot-legal li{margin:0!important}
.foot-bottom .foot-legal a{min-height:44px}
.area-hours{display:flex;align-items:flex-start;gap:10px;margin:14px 0 0;color:var(--ink);max-width:none}
.area-hours .ico{width:22px;height:22px;color:var(--teal-ink);margin-top:2px}
.map-foot{margin:10px 2px 0;font-size:.9375rem;color:var(--ink);display:flex;align-items:center;gap:10px;max-width:none}
.map-foot::before{content:"";flex:none;width:28px;height:0;border-top:3px dashed var(--teal-ink)}
.legal{padding-top:32px}
.legal-wrap{max-width:820px}
.legal h1{max-width:none;font-size:clamp(2rem,1.2rem + 3vw,3rem);margin-bottom:8px}
.legal-date{color:var(--muted);margin:0 0 28px}
.legal-sec{margin:0 0 28px}
.legal-sec h2{font-size:clamp(1.25rem,1.1rem + .8vw,1.625rem);line-height:1.2;margin-bottom:.5em}
.legal-sec p,.legal-sec li{max-width:70ch}
.legal-sec ul{margin:0 0 1em;padding-left:1.25rem}
.legal-sec li{margin-bottom:.4em}
.legal-note{margin:32px 0 12px;padding:14px 18px;background:var(--mist);border-radius:var(--r);font-weight:600;color:var(--navy)}
.legal-links a{display:inline-flex;align-items:center;min-height:44px;font-weight:600}
.legal ~ .foot,body:has(.legal) .foot{padding-bottom:40px}

/* v5.1 (crítica v5, fallo 1): el mapa ya no estira la columna en móvil; la atribución queda a la vista */
@media (max-width:899px){
  .area-grid>*,.area-map{min-width:0}
  #map{width:100%;aspect-ratio:auto;min-height:0;height:clamp(300px,78vw,380px)}
}
/* v5.1 (fallo 7): enlaces de teléfono y correo en las páginas legales */
.legal a{font-weight:600;text-underline-offset:3px;overflow-wrap:anywhere}
@media (max-width:359px){.call-card .btn{padding-left:10px;padding-right:10px;font-size:1rem;gap:8px;white-space:nowrap}}