/* Piscinas Hernández · estilos v2
   Tokens del brandkit (marca/paleta.json), con un cambio: el fondo deja el crema por un blanco con un punto del azul de la marca.
   Formas: botones en píldora; imágenes y bloques a 14 px; campos a 10 px.
   Medida: cada sección cabe en una pantalla de portátil (1366 × 768) sin tener que bajar. */
[hidden]{display:none!important}
:root{
  --bg:#F7F9FA; --surface:#FFFFFF; --water:#EAF2F6; --ink:#0F2A36; --ink-deep:#0B2029; --ink-2:#44606B; --line:rgba(15,42,54,.12);
  --accent:#3E7792; --accent-h:#33647B; --accent-soft:#E3EDF1; --cyan:#7DB4CB; --wa:#1F8F4E;
  --r:14px; --r-in:10px;
  --wrap:1200px; --wrap-wide:1440px; --gut:clamp(16px,4vw,48px);
  --sans:'Geist',system-ui,-apple-system,'Segoe UI',sans-serif;
  --ease:cubic-bezier(.16,1,.3,1);
  --z-sheet:1; --z-hdr:20; --z-float:30; --z-menu:40; --z-lb:50;
  color-scheme:light;
}
*,*::before,*::after{box-sizing:border-box}
html{-webkit-text-size-adjust:100%;scroll-behavior:smooth;scroll-padding-top:80px}
main:focus{outline:none}
body{margin:0;background:var(--bg);color:var(--ink);font:400 17px/1.6 var(--sans);-webkit-font-smoothing:antialiased;text-rendering:optimizeLegibility}
img,video{display:block;max-width:100%;height:auto}
a{color:inherit}
/* Tipografía del manual: Geist; titulares en Semibold con interletrado apretado */
h1,h2,h3{margin:0;font-weight:500;letter-spacing:-.02em;line-height:1.1;text-wrap:balance}
h1,h2{font-weight:600;letter-spacing:-.035em;line-height:1.05}
p{margin:0;text-wrap:pretty}
svg{width:1.15em;height:1.15em;flex:none}
.sr{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap}
.skip{position:absolute;left:12px;top:-60px;z-index:100;background:var(--ink);color:#fff;padding:10px 14px;border-radius:var(--r-in)}
.skip:focus{top:12px}
:focus-visible{outline:2px solid var(--accent);outline-offset:3px;border-radius:4px}
.hdr--over:not(.is-solid):not(.is-open) :focus-visible,.hero :focus-visible,.cta-final :focus-visible,.foot :focus-visible,.sem-panel :focus-visible,.ctp-card--dark :focus-visible,.hist-valores :focus-visible,.ah-mes :focus-visible{outline-color:#fff;box-shadow:0 0 0 5px rgba(11,32,41,.55)}
.wrap{width:100%;max-width:var(--wrap);margin:0 auto;padding:0 var(--gut)}
.wrap-wide{width:100%;max-width:var(--wrap-wide);margin:0 auto;padding:0 var(--gut)}
.row{display:flex;flex-wrap:wrap;gap:12px 20px;align-items:center}
.row--center{justify-content:center}
.muted{color:var(--ink-2)}
.note{font-size:14.5px;color:var(--ink-2);margin-top:16px}
.todo{background:#FFF1C2;padding:0 4px}

/* Botones: píldora */
.btn{display:inline-flex;align-items:center;justify-content:center;gap:10px;min-height:50px;padding:0 26px;border-radius:999px;border:1px solid transparent;
  background:var(--accent);color:#fff;font:500 16px/1 var(--sans);text-decoration:none;white-space:nowrap;cursor:pointer;
  transition:background .25s var(--ease),transform .2s var(--ease),border-color .25s,color .25s}
.btn:hover{background:var(--accent-h)}
.btn:active{transform:scale(.98)}
.btn svg{transition:transform .3s var(--ease)}
.btn:hover svg:last-child{transform:translateX(3px)}
.btn--sm{min-height:42px;padding:0 18px;font-size:15px}
.btn--light{background:#fff;color:var(--ink)}
.btn--light:hover{background:var(--accent-soft)}
.btn--ghost{background:transparent;color:var(--ink);border-color:rgba(15,42,54,.25)}
.btn--ghost:hover{background:var(--surface);border-color:var(--ink)}
.btn--ghost-light{background:rgba(11,32,41,.25);color:#fff;border-color:rgba(255,255,255,.55)}
.btn--ghost-light:hover{background:rgba(255,255,255,.14);border-color:#fff}
.btn--wa{background:var(--wa)}
.btn--wa:hover{background:#18763F}
.link{display:inline-flex;align-items:center;gap:8px;color:var(--accent);font-weight:500;text-decoration:none}
.link:hover{text-decoration:underline;text-underline-offset:5px}
.link svg{transition:transform .3s var(--ease)}
.link:hover svg{transform:translateX(3px)}

/* Cabecera: logo y nombre a la izquierda; presupuesto, WhatsApp, Google Maps y menú a la derecha */
.hdr{position:sticky;top:0;z-index:var(--z-hdr);background:rgba(247,249,250,.92);backdrop-filter:saturate(1.3) blur(14px);border-bottom:1px solid var(--line);color:var(--ink);transition:background .4s var(--ease),color .4s var(--ease),border-color .4s}
.hdr-top{display:grid;grid-template-columns:auto 1fr auto;align-items:center;gap:16px;max-width:var(--wrap-wide);margin:0 auto;padding:12px var(--gut)}
.brand{display:flex;align-items:center;gap:12px;text-decoration:none;min-width:0;justify-self:start}
.brand img{width:auto;height:40px;flex:none}
.brand-name{font-weight:600;font-size:20px;letter-spacing:-.025em;white-space:nowrap}
.hdr-actions{display:flex;align-items:center;gap:8px;justify-self:end}
/* Menú a primer nivel, centrado (como la referencia); en pantallas pequeñas, botón de menú */
.nav{display:flex;align-items:center;justify-content:center;gap:6px}
.nav-dd{position:relative;display:flex;align-items:center}
/* El texto lleva a /servicios/; la flecha abre el desplegable con teclado o en pantallas táctiles */
.nav-dd .nav-dd-btn{padding-right:2px}
.nav-dd .nav-dd-btn::after{right:2px}
.nav-dd-tog{display:inline-grid;place-items:center;width:26px;height:34px;padding:0;border:0;background:none;color:inherit;cursor:pointer;opacity:.85;transition:opacity .2s}
.nav-dd:hover .nav-dd-tog,.nav-dd.is-open .nav-dd-tog,.nav-dd.is-cur .nav-dd-tog{opacity:1}
.nav-dd-tog .chev{width:15px;height:15px;transition:transform .3s var(--ease)}
.hdr--over:not(.is-solid):not(.is-open) .nav-dd-tog{opacity:1}
/* Desplegable: el panel se llena como agua (borde en ola que baja y avanza), las opciones entran una a una */
.nav-dd-panel{position:absolute;top:100%;left:50%;width:440px;margin-left:-220px;padding:14px 48px 64px;visibility:hidden;pointer-events:none;
  -webkit-mask:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 300 640' preserveAspectRatio='none'%3E%3Cpath d='M0 0H300V320Q275 300 250 320T200 320T150 320T100 320T50 320T0 320Z'/%3E%3C/svg%3E") -130px calc(100% - 44px)/100% 200% repeat-x;mask:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 300 640' preserveAspectRatio='none'%3E%3Cpath d='M0 0H300V320Q275 300 250 320T200 320T150 320T100 320T50 320T0 320Z'/%3E%3C/svg%3E") -130px calc(100% - 44px)/100% 200% repeat-x;
  transition:-webkit-mask-position .3s cubic-bezier(.5,0,.75,0),mask-position .3s cubic-bezier(.5,0,.75,0),visibility 0s .3s}
.nav-dd-panel::before{content:'';position:absolute;inset:8px 40px 56px;z-index:-1;background:var(--surface);border:1px solid var(--line);border-radius:var(--r);box-shadow:0 24px 50px -22px rgba(11,32,41,.45)}
.nav-dd.no-hover:not(.is-open) .nav-dd-panel{visibility:hidden!important;pointer-events:none!important}
.nav-dd:hover .nav-dd-panel,.nav-dd.is-open .nav-dd-panel{visibility:visible;pointer-events:auto;-webkit-mask-position:0 0;mask-position:0 0;
  transition:-webkit-mask-position .85s cubic-bezier(.33,1,.68,1),mask-position .85s cubic-bezier(.33,1,.68,1),visibility 0s}
.nav .nav-dd-panel a{display:flex;flex-direction:column;gap:2px;white-space:normal;padding:10px 14px;border-radius:10px;color:var(--ink);opacity:0;transform:translateY(10px);transition:opacity .15s,transform .15s,background-color .25s}
.nav-dd:hover .nav-dd-panel a,.nav-dd.is-open .nav-dd-panel a{opacity:1;transform:none;transition:opacity .4s,transform .6s cubic-bezier(.22,1,.36,1),background-color .25s}
.nav-dd:hover .nav-dd-panel a:nth-child(1),.nav-dd.is-open .nav-dd-panel a:nth-child(1){transition-delay:.18s,.18s,0s}
.nav-dd:hover .nav-dd-panel a:nth-child(2),.nav-dd.is-open .nav-dd-panel a:nth-child(2){transition-delay:.3s,.3s,0s}
.nav-dd:hover .nav-dd-panel a:nth-child(3),.nav-dd.is-open .nav-dd-panel a:nth-child(3){transition-delay:.42s,.42s,0s}
.nav .nav-dd-panel a::after{display:none}
.nav-dd-panel a b{position:relative;align-self:flex-start;font-weight:500;font-size:15.5px}
.nav-dd-panel a b::after{content:'';position:absolute;left:0;right:0;bottom:-6px;height:8px;background:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='8' viewBox='0 0 12 8'%3E%3Cpath d='M0 4 Q3 1 6 4 T12 4' fill='none' stroke='%237DB4CB' stroke-width='1.8' stroke-linecap='round'/%3E%3C/svg%3E") 0 50%/12px 8px repeat-x;
  clip-path:inset(0 100% 0 0);transition:clip-path .45s cubic-bezier(.22,1,.36,1);animation:ola .7s linear infinite paused}
.nav-dd-panel a:hover b::after,.nav-dd-panel a:focus-visible b::after,.nav-dd-panel a[aria-current] b::after{clip-path:inset(0);animation-play-state:running}
.nav-dd-panel a span{font-size:13.5px;color:var(--ink-2);margin-top:4px}
.nav-dd-panel a:hover,.nav-dd-panel a[aria-current]{background:var(--water)}
@media (prefers-reduced-motion:reduce){.nav-dd-panel,.nav-dd:hover .nav-dd-panel,.nav-dd.is-open .nav-dd-panel{-webkit-mask:none;mask:none;transition:none}.nav .nav-dd-panel a{opacity:1;transform:none;transition:none}}
.nav a{position:relative;padding:8px 9px;text-decoration:none;font-size:15px;font-weight:500;letter-spacing:-.01em;white-space:nowrap;opacity:.85;transition:opacity .2s}
.nav a:hover,.nav a[aria-current]{opacity:1}
.nav a[aria-current]:not(:hover)::after,.nav-dd.is-cur:not(:hover) .nav-dd-btn::after,.nav-dd-panel a[aria-current]:not(:hover) b::after{animation:none}
.hdr--over:not(.is-solid):not(.is-open) .nav a,.hdr--over:not(.is-solid):not(.is-open) .nav-dd-btn{opacity:1}
.nav a::after{content:'';position:absolute;left:9px;right:9px;bottom:-1px;height:8px;background:linear-gradient(var(--cyan),var(--cyan)) center/100% 2px no-repeat;transform:scaleX(0);transition:transform .35s var(--ease)}
.nav a[aria-current]::after{transform:none}
/* Al pasar el ratón, la raya se vuelve una ola que avanza */
.nav-dd-btn{white-space:nowrap;position:relative;display:inline-flex;align-items:center;gap:4px;padding:8px 9px;border:0;background:none;color:inherit;font:500 15px/1.6 var(--sans);letter-spacing:-.01em;cursor:pointer;opacity:.85;transition:opacity .2s}
.nav-dd-btn .chev{width:15px;height:15px;transition:transform .3s var(--ease)}
.nav-dd:hover .nav-dd-btn,.nav-dd.is-open .nav-dd-btn,.nav-dd.is-cur .nav-dd-btn{opacity:1}
.nav-dd:hover .chev,.nav-dd.is-open .chev{transform:rotate(180deg)}
.nav-dd-btn::after{content:'';position:absolute;left:9px;right:9px;bottom:-1px;height:8px;background:linear-gradient(var(--cyan),var(--cyan)) center/100% 2px no-repeat;transform:scaleX(0);transition:transform .35s var(--ease)}
.nav-dd.is-cur .nav-dd-btn::after{transform:none}
.nav a:hover::after,.nav-dd:hover .nav-dd-btn::after,.nav a[aria-current]::after,.nav-dd.is-cur .nav-dd-btn::after{transform:none;background:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='8' viewBox='0 0 12 8'%3E%3Cpath d='M0 4 Q3 1 6 4 T12 4' fill='none' stroke='%237DB4CB' stroke-width='1.8' stroke-linecap='round'/%3E%3C/svg%3E") 0 50%/12px 8px repeat-x;animation:ola .7s linear infinite}
@keyframes ola{to{background-position:12px 50%}}
@media (min-width:1260px){.menu-btn,.menu{display:none!important}}
@media (max-width:1259px){.nav{display:none}.hdr-top{display:flex;justify-content:space-between}}
@media (max-width:460px){.hdr-actions .circ--ig{display:none}.hdr .brand-name{font-size:17px}.hdr .brand{gap:10px}.hdr .hdr-actions{gap:6px}}
.btn--xs{min-height:40px;padding:0 16px;font-size:14.5px;gap:8px}
.hdr-cta{margin-right:4px}
.circ::after{content:'';position:absolute;inset:-3px;border-radius:50%}
@media (max-width:359px){.hdr .brand-name{display:none}}
.circ{position:relative;width:40px;height:40px;border-radius:999px;border:1px solid currentColor;background:transparent;color:inherit;display:inline-grid;place-items:center;cursor:pointer;text-decoration:none;flex:none;transition:background .2s,color .2s,border-color .2s,transform .2s var(--ease)}
.circ svg{width:19px;height:19px}
.circ:hover{background:var(--ink);border-color:var(--ink);color:#fff}
.circ:active{transform:scale(.95)}
.menu-btn svg{width:20px;height:20px}
/* Menú: panel bajo el botón */
.menu{max-height:calc(100dvh - 80px);overflow-y:auto;overscroll-behavior:contain;position:absolute;top:calc(100% + 8px);right:max(var(--gut),calc((100vw - var(--wrap-wide)) / 2 + var(--gut)));width:min(340px,calc(100vw - 2 * var(--gut)));
  background:var(--surface);color:var(--ink);border:1px solid var(--line);border-radius:var(--r);box-shadow:0 24px 60px -20px rgba(11,32,41,.4);padding:8px 20px 20px;animation:menuOla .85s cubic-bezier(.33,1,.68,1)}
.menu[hidden]{display:none}
/* Se abre como el desplegable de escritorio: el agua baja con el borde en ola (la máscara solo existe mientras dura la animación, así no recorta la sombra) */
@keyframes menuOla{from{-webkit-mask:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 300 640' preserveAspectRatio='none'%3E%3Cpath d='M0 0H300V320Q275 300 250 320T200 320T150 320T100 320T50 320T0 320Z'/%3E%3C/svg%3E") -130px 100%/100% 220% repeat-x;mask:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 300 640' preserveAspectRatio='none'%3E%3Cpath d='M0 0H300V320Q275 300 250 320T200 320T150 320T100 320T50 320T0 320Z'/%3E%3C/svg%3E") -130px 100%/100% 220% repeat-x}to{-webkit-mask:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 300 640' preserveAspectRatio='none'%3E%3Cpath d='M0 0H300V320Q275 300 250 320T200 320T150 320T100 320T50 320T0 320Z'/%3E%3C/svg%3E") 0 0/100% 220% repeat-x;mask:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 300 640' preserveAspectRatio='none'%3E%3Cpath d='M0 0H300V320Q275 300 250 320T200 320T150 320T100 320T50 320T0 320Z'/%3E%3C/svg%3E") 0 0/100% 220% repeat-x}}
.menu nav>*,.menu-cta,.menu-status{animation:menuItem .6s cubic-bezier(.22,1,.36,1) both}
.menu nav>:nth-child(1){animation-delay:.12s}.menu nav>:nth-child(2){animation-delay:.17s}.menu nav>:nth-child(3){animation-delay:.22s}.menu nav>:nth-child(4){animation-delay:.27s}
.menu nav>:nth-child(5){animation-delay:.32s}.menu nav>:nth-child(6){animation-delay:.37s}.menu nav>:nth-child(7){animation-delay:.42s}.menu-cta{animation-delay:.48s}.menu-status{animation-delay:.54s}
@keyframes menuItem{from{opacity:0;transform:translateY(10px)}to{opacity:1;transform:none}}
@media (prefers-reduced-motion:reduce){.menu,.menu nav>*,.menu-cta,.menu-status{animation:none}}
.menu nav{display:flex;flex-direction:column}
.menu nav a{padding:13px 0;border-bottom:1px solid var(--line);text-decoration:none;font-size:17px;font-weight:500;transition:color .2s,padding .3s var(--ease)}
.menu nav a:hover{color:var(--accent);padding-left:4px}
.menu nav a[aria-current]{color:var(--accent)}
.menu-group{margin:0;padding:13px 0 4px;font-size:17px;font-weight:500}
.menu nav a.menu-group{padding:13px 0 4px;border-bottom:0}
.menu nav a.menu-sub{padding:9px 0 9px 16px;font-size:17px;font-weight:400;border-bottom:0}
.menu nav a.menu-sub--fin{border-bottom:1px solid var(--line);padding-bottom:13px}
.menu-cta{width:100%;margin-top:16px}
.menu-status{display:flex;align-items:center;gap:8px;margin-top:14px;font-size:14px;color:var(--ink-2)}
/* Portada: cabecera transparente sobre el vídeo hasta que se baja */
.hdr--over{position:fixed;left:0;right:0;background:transparent;border-color:transparent;backdrop-filter:none;color:#fff}
.hdr--over .hdr-cta{background:#fff;color:var(--ink)}
.hdr--over .hdr-cta:hover{background:var(--accent-soft)}
.hdr--over .circ{border-color:rgba(255,255,255,.7);background:rgba(11,32,41,.18)}
.hdr--over .circ:hover{background:#fff;color:var(--ink);border-color:#fff}
.hdr--over.is-solid,.hdr--over.is-open{background:rgba(247,249,250,.94);backdrop-filter:saturate(1.3) blur(14px);border-color:var(--line);color:var(--ink)}
.hdr--over.is-solid .hdr-cta,.hdr--over.is-open .hdr-cta{background:var(--accent);color:#fff}
.hdr--over.is-solid .circ,.hdr--over.is-open .circ{border-color:currentColor;background:transparent}
@media (max-width:640px){.hdr-cta{display:none}.brand-name{font-size:18px}.brand img{width:auto;height:36px}.hdr-top{padding:10px var(--gut)}.circ{width:38px;height:38px}}
@media (max-width:360px){.brand-name{font-size:16px}.hdr-actions{gap:6px}}

/* Héroe con vídeo: se queda fijo y las secciones suben por encima */
.hero{position:sticky;top:0;height:100dvh;min-height:520px;display:grid;place-items:center;color:#fff;overflow:hidden;isolation:isolate;background:var(--ink-deep)}
.hero-video{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;z-index:-2;background:url(/static/video/hero-poster.webp) center/cover}
@media (orientation:portrait) and (max-width:900px){.hero-video{background-image:url(/static/video/hero-poster-movil.webp)}}
.hero-shade{position:absolute;inset:0;z-index:-1;background:linear-gradient(180deg,rgba(11,32,41,.7) 0,rgba(11,32,41,.35) 90px,rgba(11,32,41,0) 200px),radial-gradient(85% 45% at 50% 55%,rgba(11,32,41,.6) 0,rgba(11,32,41,.46) 50%,rgba(11,32,41,0) 100%),linear-gradient(180deg,rgba(11,32,41,.14) 0,rgba(11,32,41,.14) 70%,rgba(11,32,41,.4) 100%)}
.hero-in{text-align:center;padding:72px var(--gut) 0;max-width:1000px}
.hero h1{font-size:clamp(38px,5.4vw,76px);line-height:1.04;letter-spacing:-.035em;font-weight:600;text-shadow:0 2px 28px rgba(11,32,41,.35)}
.hero-in p{margin-top:16px;font-size:clamp(17px,1.5vw,21px);font-weight:500;letter-spacing:-.005em;color:#fff;text-shadow:0 1px 14px rgba(11,32,41,.5)}
.hero-in>*{animation:rise 1.2s var(--ease) both}
.hero-in>*:nth-child(2){animation-delay:.15s}.hero-in>*:nth-child(3){animation-delay:.3s}
.intro-on .hero-in>*{animation-delay:1.9s}.intro-on .hero-in>*:nth-child(2){animation-delay:2.05s}

/* Animación de entrada (portada, 2 s). Variante en <html class="intro-on intro-fotos|logo|agua"> */
.intro{display:none}
.intro-on body{overflow:hidden;animation:unlock 0s 2.3s forwards}
@keyframes unlock{to{overflow:auto}}
.intro-fotos .intro--fotos,.intro-logo .intro--logo,.intro-agua .intro--agua{display:block;position:fixed;inset:0;z-index:100;overflow:hidden;pointer-events:none}
@keyframes introOut{to{opacity:0;visibility:hidden}}

/* 1 · Fotos en cintas: columnas inclinadas; la del centro baja (hacia la izquierda) y las de al lado suben (hacia la derecha) */
.intro--fotos{background:#E9EFF2;animation:introOut .5s var(--ease) 1.8s forwards}
.if-cols{position:absolute;left:50%;top:50%;display:flex;gap:14px;transform:translate(-50%,-50%) rotate(16deg) scale(1.05)}
.if-col{display:flex;flex-direction:column;gap:14px;flex:none;width:clamp(150px,15vw,250px);animation:cintaArriba 2.3s cubic-bezier(.5,0,.3,1) both}
.if-col:nth-child(even){animation-name:cintaAbajo}
.if-col img{width:100%;height:auto;aspect-ratio:3/4;object-fit:cover;border-radius:14px;background:#D5E2E8;box-shadow:0 10px 30px -14px rgba(11,32,41,.35)}
@keyframes cintaArriba{from{transform:translateY(6%)}to{transform:translateY(-14%)}}
@keyframes cintaAbajo{from{transform:translateY(-14%)}to{transform:translateY(6%)}}

/* 2 · Logo: la escalera se dibuja, aparecen peldaños y cuencos, y la atravesamos hasta el vídeo */
.intro--logo{background:var(--accent);animation:introOut .45s ease-in 1.75s forwards}
.il{position:absolute;inset:0;display:grid;place-content:center;justify-items:center;gap:18px}
.il-svg{width:clamp(150px,20vw,230px);height:auto;transform-origin:59% 52%;animation:ilZoom .6s cubic-bezier(.7,0,.84,0) 1.6s forwards}
.il-rail{stroke-dasharray:1;stroke-dashoffset:1;animation:ilDraw .8s cubic-bezier(.65,0,.35,1) .1s forwards}
.il-rail--b{animation-delay:.25s}
.il-step{stroke-dasharray:1;stroke-dashoffset:1;stroke-width:6;animation:ilDraw .3s var(--ease) var(--d) forwards}
.il-bowl{transform-box:fill-box;transform-origin:50% 0;transform:scale(0);animation:ilPop .45s cubic-bezier(.34,1.56,.64,1) var(--d) forwards}
.il-name{margin:0;color:#fff;font-weight:600;font-size:clamp(22px,2.4vw,30px);letter-spacing:-.025em;opacity:0;transform:translateY(10px);animation:ilName .5s var(--ease) 1s forwards,ilFade .3s ease-in 1.55s forwards}
@keyframes ilDraw{to{stroke-dashoffset:0}}
@keyframes ilPop{to{transform:none}}
@keyframes ilName{to{opacity:1;transform:none}}
@keyframes ilFade{to{opacity:0}}
@keyframes ilZoom{to{transform:scale(22)}}

/* 3 · Agua: cae una gota, salen ondas y el agua se abre en un círculo que deja ver la web */
@property --hueco{syntax:'<length-percentage>';inherits:false;initial-value:0%}
.intro--agua{background:radial-gradient(120% 90% at 50% 20%,#5D9BB6 0%,#3E7792 55%,#2F5F75 100%);
  -webkit-mask:radial-gradient(circle at 50% 50%,transparent var(--hueco),#000 calc(var(--hueco) + 1px));mask:radial-gradient(circle at 50% 50%,transparent var(--hueco),#000 calc(var(--hueco) + 1px));
  animation:aguaHueco .8s cubic-bezier(.7,0,.3,1) 1.35s forwards,introOut .2s linear 2.1s forwards}
@keyframes aguaHueco{to{--hueco:150vmax}}
.ia-luz{position:absolute;inset:-20%;background:radial-gradient(18% 12% at 30% 40%,rgba(255,255,255,.16),transparent 70%),radial-gradient(14% 10% at 70% 62%,rgba(255,255,255,.12),transparent 70%),radial-gradient(20% 8% at 55% 25%,rgba(255,255,255,.1),transparent 70%);filter:blur(6px);animation:luz 2.4s ease-in-out both}
.ia-luz--2{transform:scale(-1,1);opacity:.7;animation-duration:2.1s}
@keyframes luz{from{translate:-3% -2%}to{translate:3% 2%}}
.ia-gota{position:absolute;left:50%;top:50%;width:16px;height:22px;margin:-11px 0 0 -8px;border-radius:50% 50% 50% 50%/60% 60% 40% 40%;background:#fff;opacity:0;animation:gota .42s cubic-bezier(.55,0,1,.45) .05s both}
@keyframes gota{0%{opacity:1;transform:translateY(-46vh) scaleY(1.3)}90%{opacity:1;transform:translateY(0) scaleY(1.1)}100%{opacity:0;transform:scale(.4)}}
.ia-onda{position:absolute;left:50%;top:50%;width:40px;height:40px;margin:-20px 0 0 -20px;border-radius:50%;border:2px solid rgba(255,255,255,.85);opacity:0;animation:onda 1.3s cubic-bezier(.2,.6,.3,1) calc(.45s + var(--d,0s)) both}
@keyframes onda{0%{opacity:.9;transform:scale(.2)}100%{opacity:0;transform:scale(14)}}
@keyframes rise{from{opacity:0;transform:translateY(18px);filter:blur(6px)}to{opacity:1;transform:none;filter:none}}
.sheet{position:relative;z-index:var(--z-sheet);background:var(--bg);border-radius:28px 28px 0 0;margin-top:-28px;box-shadow:0 -30px 60px -30px rgba(11,32,41,.45);overflow:hidden}

/* Secciones */
.sec{padding:clamp(44px,5.5vw,80px) 0 clamp(48px,6vw,88px)}
.sec--tight{padding-top:clamp(32px,4vw,56px)}
.sec--water,.sec--sand,.sec--ink{background:var(--water)}
.sec-head{max-width:760px;margin-bottom:clamp(22px,2.6vw,36px)}
.sec-head h2,.split-txt h2,.shops-head h2,.cta-final h2,.story-txt h2,.ba-txt h2{font-size:clamp(30px,3.8vw,52px)}
.sec-head p{margin-top:12px;color:var(--ink-2);font-size:18px;max-width:60ch}
.sec-head--center{margin-left:auto;margin-right:auto;text-align:center}
.sec-head--center p{margin-left:auto;margin-right:auto}
.sec-head--row{display:flex;flex-wrap:wrap;align-items:flex-end;justify-content:space-between;gap:16px 32px;max-width:none}

/* Antes y después */
.ba{margin:0}
.ba-frame{position:relative;border-radius:var(--r);overflow:hidden;aspect-ratio:4/3;background:var(--ink-deep);--p:50%;user-select:none}
.ba-frame img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover}
.ba-before{position:absolute;inset:0;clip-path:inset(0 calc(100% - var(--p)) 0 0)}
.ba-range{position:absolute;inset:0;width:100%;height:100%;margin:0;opacity:0;cursor:ew-resize;touch-action:pan-y}
.ba-handle{position:absolute;top:0;bottom:0;left:var(--p);width:2px;background:#fff;transform:translateX(-1px);pointer-events:none;box-shadow:0 0 0 1px rgba(11,32,41,.15)}
.ba-handle::after{content:'';position:absolute;top:50%;left:50%;width:52px;height:52px;border-radius:50%;background:#fff;transform:translate(-50%,-50%);box-shadow:0 8px 24px rgba(11,32,41,.3);
  background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='m9 7-5 5 5 5m6-10 5 5-5 5' fill='none' stroke='%230F2A36' stroke-width='1.8' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E");background-size:24px;background-repeat:no-repeat;background-position:center;transition:transform .3s var(--ease)}
.ba-frame:hover .ba-handle::after{transform:translate(-50%,-50%) scale(1.08)}
.ba-range:focus-visible~.ba-handle::after{outline:3px solid var(--cyan);outline-offset:3px}
.ba-tag{position:absolute;top:16px;padding:6px 12px;border-radius:999px;background:rgba(11,32,41,.6);color:#fff;font-size:13.5px;pointer-events:none;backdrop-filter:blur(6px)}
.ba-tag--a{left:16px}.ba-tag--b{right:16px}
.ba figcaption{margin-top:14px;font-size:15px;color:var(--ink-2)}
.ba-grid{display:grid;grid-template-columns:1fr 1fr;gap:32px}
@media (max-width:760px){.ba-grid{grid-template-columns:1fr}}
.ba.is-off{display:none}
.ba-stage .ba:not(.is-off){animation:fadeIn .5s var(--ease)}
@keyframes fadeIn{from{opacity:0}to{opacity:1}}
/* Carrusel: texto a la izquierda, foto a la derecha, flechas arriba */
.ba-split{display:grid;grid-template-columns:minmax(260px,1fr) 2fr;gap:clamp(28px,4vw,64px);align-items:center}
.ba-txt p{margin-top:16px;color:var(--ink-2);max-width:42ch}
.ba-txt .link{margin-top:22px}
.ba-bar{display:flex;align-items:center;justify-content:flex-end;gap:16px;margin-bottom:12px}
.ba-cap{font-size:15px;color:var(--ink-2)}
.ba-nav{display:flex;align-items:center;gap:8px;flex:none}
.ba-count{font-size:14px;color:var(--ink-2);margin-right:6px;font-variant-numeric:tabular-nums}
.ba-count b{font-weight:500;color:var(--ink)}
.ba-arrow{width:42px;height:42px;border-radius:999px;border:1px solid rgba(15,42,54,.22);background:var(--surface);color:var(--ink);display:grid;place-items:center;cursor:pointer;transition:border-color .2s,background .2s,transform .2s var(--ease)}
.ba-arrow:hover{border-color:var(--ink)}
.ba-arrow:active{transform:scale(.95)}
.ba--car .ba-frame{aspect-ratio:3/2!important;max-height:calc(100dvh - 290px);min-height:280px;width:100%}
.ba--car figcaption{display:none}
@media (max-width:900px){.ba-split{grid-template-columns:1fr}.ba--car .ba-frame{max-height:none;min-height:0}}



/* Simulador «Tu jardín con piscina» */
.sim-ests{border:0;padding:0;margin:22px 0;display:grid;grid-template-columns:1fr 1fr;gap:8px}
.sim-est{position:relative;cursor:pointer}
.sim-est input{position:absolute;opacity:0;width:1px;height:1px}
.sim-est span{display:flex;flex-direction:column;gap:2px;padding:11px 14px;border-radius:var(--r-in);border:1px solid rgba(15,42,54,.2);background:var(--surface);transition:border-color .2s,box-shadow .2s}
.sim-est b{font-weight:500;font-size:15.5px}
.sim-est small{font-size:13px;color:var(--ink-2)}
.sim-est span:hover{border-color:var(--ink)}
.sim-est input:checked+span{border-color:var(--accent);box-shadow:inset 0 0 0 1px var(--accent)}
.sim-est input:focus-visible+span{outline:2px solid var(--accent);outline-offset:2px}
.sim-note{margin-top:14px;font-size:13.5px;color:var(--ink-2);max-width:52ch}
.sim-btns .btn[disabled]{opacity:.45;cursor:not-allowed}
.sim-view{min-width:0}
.sim-drop{position:relative;display:grid;place-items:center;aspect-ratio:3/2;max-height:calc(100dvh - 260px);width:100%;border-radius:var(--r);border:1.5px dashed rgba(15,42,54,.3);background:var(--surface);cursor:pointer;overflow:hidden;transition:border-color .2s,background .2s}
.sim-drop:hover,.sim-drop.is-over{border-color:var(--accent);background:#fff}
.sim-drop input{position:absolute;inset:0;opacity:0;cursor:pointer}
.sim-drop:focus-within{outline:2px solid var(--accent);outline-offset:3px}
.sim-drop-in{display:flex;flex-direction:column;align-items:center;gap:6px;text-align:center;padding:24px;pointer-events:none}
.sim-drop-in svg{width:34px;height:34px;color:var(--accent);margin-bottom:6px}
.sim-drop-in b{font-weight:500;font-size:18px}
.sim-drop-in span{font-size:14.5px;color:var(--ink-2)}
.sim-drop.has-img{border-style:solid;border-color:transparent}
.sim-drop.has-img .sim-drop-in{display:none}
.sim-drop img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;pointer-events:none}
.sim-change{position:absolute;right:14px;bottom:14px;padding:7px 14px;border-radius:999px;background:rgba(11,32,41,.7);color:#fff;font-size:13.5px;pointer-events:none;backdrop-filter:blur(6px)}
.sim-change[hidden]{display:none}
.sim-busy{display:grid;place-items:center;align-content:center;gap:16px;aspect-ratio:3/2;max-height:calc(100dvh - 260px);border-radius:var(--r);background:linear-gradient(100deg,#DCE8EE 30%,#F1F6F8 50%,#DCE8EE 70%) 0 0/300% 100%;animation:shimmer 1.6s linear infinite;color:var(--ink-2);font-size:15px;text-align:center;padding:24px}
.sim-busy[hidden],.sim-out[hidden],.sim-drop[hidden]{display:none}
.sec{scroll-margin-top:0}
.sim-busy i{width:34px;height:34px;border-radius:50%;border:3px solid rgba(62,119,146,.25);border-top-color:var(--accent);animation:spin .9s linear infinite}
@keyframes shimmer{to{background-position:-300% 0}}
@keyframes spin{to{transform:rotate(360deg)}}
.sim-ctl .err{margin-top:12px}
@media (max-width:600px){.sim-est small{display:none}.sim-est span{padding:10px 12px}}
/* Portada: antes y después + «Tu jardín» en una sola sección. Texto arriba a la izquierda, controles debajo, foto a la derecha */
.ba-split--sim{grid-template-columns:minmax(300px,1fr) 2fr;grid-template-areas:"txt view" "ctl view";grid-template-rows:auto 1fr;align-items:start;row-gap:22px}
.ba-split--sim .ba-txt{grid-area:txt;align-self:end}
.ba-split--sim .sim-ctl{grid-area:ctl}
.ba-split--sim .ba-view{grid-area:view;align-self:center}
.ba-split--sim .ba-txt p{margin-top:12px}
.sim-lbl{font-size:14px;font-weight:500;color:var(--ink);margin-bottom:10px}
.sim-ests{margin:0 0 16px}
.sim-btns{gap:10px}
.sim-btns .btn svg{width:18px;height:18px}
.sim-btns label.btn{cursor:pointer}
.sim-ctl .sim-note{margin-top:12px}
.sim-res .sim-note{margin-top:12px}
/* La diapositiva «Tu jardín» mide lo mismo que las fotos de obra */
.sim-slot .sim-drop,.sim-slot .sim-busy,.sim-slot .sim-out .ba-frame{aspect-ratio:3/2;max-height:calc(100dvh - 290px);min-height:280px;width:100%}
.sim-slot .sim-drop{background:var(--water)}
.sim-slot .sim-drop:hover{background:#E9F1F4}
.sim-slot .sim-drop .ba-tag[hidden]{display:none}
/* Al llegar a «Tu jardín», el botón de subir la foto se marca */
.ba-split--sim.is-sim [data-sim-up]:not(.btn--ghost){box-shadow:0 0 0 4px var(--accent-soft)}
@media (max-width:900px){.ba-split--sim{grid-template-columns:1fr;grid-template-areas:"txt" "view" "ctl";row-gap:20px}
  .sim-slot .sim-drop,.sim-slot .sim-busy,.sim-slot .sim-out .ba-frame{max-height:none;min-height:0}}

/* Servicios: mosaico de imágenes */
.tiles{display:grid;grid-template-columns:1.5fr 1fr 1fr;grid-template-rows:repeat(2,clamp(160px,calc((100dvh - 430px) / 2),270px));gap:12px}
.tile{position:relative;display:block;border-radius:var(--r);overflow:hidden;color:#fff;text-decoration:none;isolation:isolate;container-type:size}
.tile img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;z-index:-2;transition:transform 1.2s var(--ease)}
.tile::before{content:'';position:absolute;inset:0;z-index:-1;background:linear-gradient(180deg,rgba(11,32,41,0) 20%,rgba(11,32,41,.55) 52%,rgba(11,32,41,.9) 100%)}
.tile:hover img{transform:scale(1.04)}
.tile--0{grid-row:span 2}
.tile--3{grid-column:2/4}
.tile-txt{position:absolute;left:clamp(18px,2vw,28px);right:72px;bottom:clamp(18px,2vw,26px);display:flex;flex-direction:column;gap:6px}
.tile-txt b{font-weight:500;font-size:clamp(21px,1.9vw,28px);letter-spacing:-.02em;line-height:1.1}
.tile-txt span{font-size:15.5px;line-height:1.4;color:rgba(255,255,255,.88);max-width:44ch;white-space:normal}
/* Tarjetas pequeñas: solo el título (una frase cortada a medias se lee peor que ninguna) */
@container (max-width:300px){.tile-txt span{white-space:normal;font-size:14px}}
.tile-go{position:absolute;right:clamp(18px,2vw,26px);bottom:clamp(18px,2vw,26px);width:42px;height:42px;border-radius:999px;background:#fff;color:var(--ink);display:grid;place-items:center;transition:transform .4s var(--ease)}
.tile:hover .tile-go{transform:translateX(4px)}
@media (max-width:800px){.tiles{grid-template-columns:1fr 1fr;grid-template-rows:none;grid-auto-rows:220px}.tile--0{grid-row:auto;grid-column:1/-1}.tile--3{grid-column:1/-1}}
@media (max-width:520px){.tiles{grid-template-columns:1fr 1fr;grid-auto-rows:176px;gap:8px}.tile--0,.tile--3{grid-column:auto}.tile-txt{left:14px;right:14px;bottom:14px;gap:4px}.tile-txt b{font-size:22px;line-height:1.15}.tile-txt span{display:none}.tile-go{display:none}}

/* Tiendas en la portada */
.shops{display:grid;grid-template-columns:1fr 1fr;gap:clamp(22px,3vw,40px) clamp(24px,5vw,72px);align-items:start}
.shops-head{grid-column:1/-1;max-width:760px}
.shops-head p{margin-top:16px;color:var(--ink-2);max-width:42ch}
.shop{padding-left:0;border-top:1px solid rgba(15,42,54,.18);display:flex;flex-direction:column;gap:10px}
.shop h3{font-size:24px}
.shop p{color:var(--ink-2);font-size:15.5px}
.shop .link{margin-top:6px}
.shop-state{display:flex;align-items:center;gap:8px;color:var(--ink)!important;font-weight:500}
@media (max-width:560px){.shops{grid-template-columns:1fr}.shop{padding-top:20px}}
.dot{width:8px;height:8px;border-radius:50%;background:#9AA7AD;flex:none}
[data-open="1"] .dot{background:#22A565;box-shadow:0 0 0 4px rgba(34,165,101,.18)}
[data-open="0"] .dot{background:#C8653F}

/* Split */
.split{display:grid;grid-template-columns:1fr 1fr;gap:clamp(32px,6vw,96px);align-items:center}
.split--top{align-items:start}
.split-txt p{margin-top:18px;max-width:50ch;color:var(--ink-2)}
.split-txt .row{margin-top:30px}
.split-txt>.btn{margin-top:30px}
.split-img{margin:0;border-radius:var(--r);overflow:hidden;aspect-ratio:4/3;max-height:calc(100dvh - 220px);width:100%}
.split-img img{width:100%;height:100%;object-fit:cover}
.links{list-style:none;margin:28px 0 0;padding:0;border-top:1px solid var(--line)}
.links a{display:flex;justify-content:space-between;align-items:center;padding:15px 0;border-bottom:1px solid var(--line);text-decoration:none;font-size:clamp(18px,1.6vw,21px);font-weight:500;transition:color .2s,padding .4s var(--ease)}
.links a:hover{color:var(--accent);padding-left:6px}
@media (max-width:900px){.split{grid-template-columns:1fr}}

/* Banda de imagen a todo el ancho */


/* Llamada final */
.cta-final{background:var(--ink-deep);color:#fff;position:relative;overflow:hidden}
.cta-final::before{content:'';position:absolute;left:50%;bottom:-40%;width:90%;height:100%;transform:translateX(-50%);background:radial-gradient(50% 50% at 50% 50%,rgba(125,180,203,.24),transparent 70%);pointer-events:none}
.cta-final-in{position:relative;padding-top:clamp(56px,7vw,96px);padding-bottom:clamp(60px,7.5vw,104px);text-align:center;display:flex;flex-direction:column;align-items:center}
.cta-final h2{max-width:18ch}
.cta-final p{margin:16px 0 28px;color:rgba(255,255,255,.8);max-width:50ch;font-size:18px}
.cta-final .row{justify-content:center}
.cta-final .btn:not(.btn--ghost-light){background:#fff;color:var(--ink)}
.cta-final .btn:not(.btn--ghost-light):hover{background:var(--accent-soft)}

/* Cabecera de las páginas interiores */
.phead{position:relative;background:var(--ink-deep);color:#fff;overflow:hidden;isolation:isolate}
.phead-img{position:absolute;inset:0;z-index:-1}
.phead-img img{width:100%;height:100%;object-fit:cover}
.phead-img::after{content:'';position:absolute;inset:0;background:linear-gradient(90deg,rgba(11,32,41,.88) 0%,rgba(11,32,41,.55) 55%,rgba(11,32,41,.15))}
.phead-in{padding-top:clamp(48px,6vw,88px);padding-bottom:clamp(44px,5.5vw,80px)}
.phead h1{font-size:clamp(38px,5.2vw,72px);letter-spacing:-.035em;max-width:16ch}
.phead .lead{margin-top:16px;font-size:clamp(17px,1.5vw,20px);max-width:58ch;color:rgba(255,255,255,.88)}
.phead .row{margin-top:28px}
.phead--plain{background:var(--bg);color:var(--ink)}
.phead--plain .lead{color:var(--ink-2)}
.phead--plain .phead-in{padding-top:clamp(36px,4.5vw,64px);padding-bottom:clamp(16px,2vw,28px)}
.crumbs{font-size:14px;margin-bottom:18px;color:rgba(255,255,255,.75)}
.crumbs a{color:inherit;text-decoration:none}
.crumbs a:hover{text-decoration:underline}
.phead--plain .crumbs{color:var(--ink-2)}

/* Listas de servicio */

/* Calendario de temporada */

/* Aviso de temporada */

/* Estado de tiendas (tienda) */
.status{display:flex;flex-wrap:wrap;gap:10px}
.status-item{display:flex;align-items:center;gap:10px;padding:10px 16px;border-radius:999px;background:var(--surface);border:1px solid var(--line);text-decoration:none;font-size:14px;line-height:1.3}
.status-item b{font-weight:500;margin-right:6px}
.status-item em{font-style:normal;color:var(--ink-2)}

/* Tienda */
.filters{display:grid;grid-template-columns:2fr 1fr 1fr;gap:10px;margin-bottom:10px}
.filters input,.filters select,.wizard input,.wizard textarea,.ctp-card input,.ctp-card select{width:100%;min-height:50px;padding:10px 16px;border-radius:var(--r-in);border:1px solid rgba(15,42,54,.52);background:var(--surface);font:inherit;color:var(--ink)}
.filters input::placeholder,.wizard input::placeholder,.wizard textarea::placeholder{color:#5F7680}
.filters input:focus,.filters select:focus,.wizard input:focus,.wizard textarea:focus,.ctp-card input:focus,.ctp-card select:focus{outline:none;border-color:var(--accent);box-shadow:0 0 0 3px var(--accent-soft)}
@media (max-width:700px){.filters{grid-template-columns:1fr 1fr}.f-search{grid-column:span 2}}
.empty{padding:28px 0;color:var(--ink-2)}
.empty a{color:var(--accent)}

/* Proyectos */
.tabs{display:flex;flex-wrap:wrap;gap:8px;margin-bottom:16px}
.tabs button{min-height:42px;padding:0 18px;border-radius:999px;border:1px solid var(--line);background:var(--surface);font:500 15px var(--sans);color:var(--ink-2);cursor:pointer;transition:all .2s}
.tabs button:hover{color:var(--ink);border-color:rgba(15,42,54,.3)}
.tabs button[aria-pressed="true"]{background:var(--ink);color:#fff;border-color:var(--ink)}
.masonry{list-style:none;margin:0;padding:0;columns:4 260px;column-gap:10px}
.masonry li{break-inside:avoid;margin-bottom:10px}
.masonry li[hidden]{display:none}
.masonry button{display:block;width:100%;padding:0;border:0;border-radius:var(--r);overflow:hidden;cursor:zoom-in;background:var(--water)}
.masonry img{width:100%;transition:transform .9s var(--ease)}
.masonry button:hover img{transform:scale(1.03)}
.lb{border:0;padding:0;background:transparent;max-width:min(1400px,94vw);max-height:92dvh;overflow:visible}
.lb::backdrop{background:rgba(11,32,41,.9)}
.lb img{max-height:84dvh;width:auto;max-width:100%;border-radius:var(--r);margin:0 auto}
.lb p{color:#fff;text-align:center;margin-top:12px;font-size:15px}
.lb-close{position:fixed;top:16px;right:16px;width:48px;height:48px;border-radius:50%;border:0;background:#fff;color:var(--ink);cursor:pointer;display:grid;place-items:center}

/* Calculadora */
.fields{display:grid;grid-template-columns:1fr 1fr;gap:14px}
.fields label{display:flex;flex-direction:column;gap:6px;font-size:14.5px;color:var(--ink-2)}
.fields label[hidden]{display:none}

/* Diagnóstico */

/* Tiendas */
.store{background:var(--surface);border-radius:var(--r);padding:clamp(24px,3vw,40px);border:1px solid var(--line);scroll-margin-top:40px}
.store-head{display:flex;flex-wrap:wrap;align-items:center;justify-content:space-between;gap:12px;margin-bottom:22px}
.store-head h3{font-size:clamp(24px,2.2vw,30px);font-weight:600;letter-spacing:-.03em}
.pill{display:inline-flex;align-items:center;gap:8px;padding:6px 14px;border-radius:999px;background:var(--water);font-size:14px}

/* Presupuesto */
.wizard{max-width:1100px;background:var(--surface);border-radius:var(--r);padding:clamp(24px,4vw,48px);border:1px solid var(--line)}
.wz-steps{list-style:none;margin:0 0 30px;padding:0;display:flex;gap:8px;counter-reset:w}
.wz-steps li{flex:1;counter-increment:w;font-size:14px;color:var(--ink-2);padding-top:10px;border-top:3px solid var(--line);transition:all .3s}
.wz-steps li::before{content:counter(w) '. '}
.wz-steps li.on{border-color:var(--accent);color:var(--ink)}
.wz-step{border:0;padding:0;margin:0;display:grid;gap:16px}
.wz-step[hidden]{display:none}
.wz-step legend{font-size:28px;font-weight:500;letter-spacing:-.02em;margin-bottom:12px;padding:0}
.wz-step>label,.wz-col>label{display:flex;flex-direction:column;gap:6px;font-size:15px;color:var(--ink-2)}
.wz-cols{display:grid;gap:16px}
@media (min-width:901px){.sec--wz{padding:24px 0 32px}}
.wz-col{display:grid;gap:16px;align-content:start}
@media (min-width:901px){.wz-cols{grid-template-columns:minmax(0,1fr) minmax(0,1.15fr);gap:28px}.wz-cols--2{grid-template-columns:minmax(0,1fr) minmax(0,1fr)}}
.wz-detalle{height:100%}
.wz-detalle textarea{flex:1;min-height:120px;resize:vertical}
@media (min-width:901px) and (max-height:820px){.wizard{padding:28px 40px}.wz-steps{margin-bottom:20px}.wz-step legend{margin-bottom:4px}}
.wz-step small{color:var(--ink-2)}
.opts{display:grid;grid-template-columns:1fr 1fr;gap:10px}
.opt{position:relative}
.opt input,.shapes input{position:absolute;opacity:0;width:1px!important;height:1px;min-height:0!important;padding:0;margin:0;left:0;top:0}
.opt span{display:flex;align-items:center;min-height:56px;padding:0 20px;border-radius:var(--r-in);border:1px solid rgba(15,42,54,.52);cursor:pointer;transition:all .2s}
.opt span:hover{border-color:var(--ink)}
.opt input:checked+span{border-color:var(--accent);background:var(--accent-soft);box-shadow:inset 0 0 0 1px var(--accent)}
.opt input:focus-visible+span{outline:2px solid var(--accent);outline-offset:2px}
@media (max-width:560px){.opts{grid-template-columns:1fr}}
/* Paso 1: tarjetas con foto; al tocar una se pasa solo al paso 2 (site.js) */
.opts.opts--foto{grid-template-columns:repeat(4,minmax(0,1fr));gap:12px}
.opt--foto span{position:relative;display:block;height:clamp(140px,calc(100dvh - 600px),230px);min-height:0;padding:0;border:0;border-radius:var(--r);overflow:hidden;isolation:isolate;color:#fff}
.opt--foto img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;z-index:-2;transition:transform 1s var(--ease)}
.opt--foto span::before{content:'';position:absolute;inset:0;z-index:-1;background:linear-gradient(180deg,rgba(11,32,41,0) 35%,rgba(11,32,41,.85) 100%)}
.opt--foto span::after{content:'';position:absolute;top:12px;right:12px;width:26px;height:26px;border-radius:50%;border:2px solid #fff;background:rgba(11,32,41,.25);transition:background .2s}
.opt--foto b{position:absolute;left:16px;right:16px;bottom:14px;font-size:clamp(19px,1.6vw,23px);font-weight:500;letter-spacing:-.02em;line-height:1.15}
.opt--foto span:hover img{transform:scale(1.04)}
.opt--foto input:checked+span{background:none;box-shadow:0 0 0 3px var(--accent)}
.opt--foto input:checked+span::after{background:var(--accent) url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='14' height='14' viewBox='0 0 24 24'%3E%3Cpath d='m5 12.5 4.5 4.5L19 7.5' fill='none' stroke='%23fff' stroke-width='3' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E") center/14px no-repeat;border-color:var(--accent)}
.opt--foto input:focus-visible+span{outline:3px solid var(--accent);outline-offset:3px}
.opt-otra{position:relative;justify-self:start}
.opt-otra input{position:absolute;opacity:0;width:1px!important;height:1px;min-height:0!important;padding:0;margin:0}
.opt-otra span{font-size:15.5px;color:var(--accent);text-decoration:underline;text-underline-offset:4px;cursor:pointer}
.opt-otra input:checked+span{color:var(--ink);font-weight:600}
.opt-otra input:focus-visible+span{outline:2px solid var(--accent);outline-offset:3px;border-radius:4px}
@media (max-width:760px){.opts.opts--foto{grid-template-columns:1fr 1fr;gap:10px}.opt--foto span{height:136px}.opt--foto b{left:12px;bottom:11px;font-size:18px}.opt--foto span::after{top:9px;right:9px;width:22px;height:22px}}
.check{flex-direction:row!important;align-items:flex-start;gap:12px!important}
.check input{width:20px;height:20px;min-height:0;margin-top:2px;flex:none;accent-color:var(--accent)}
.check a{color:var(--accent)}
.wz-nav{display:flex;flex-wrap:wrap;gap:10px;justify-content:space-between;margin-top:8px}
.wz-nav--end{justify-content:flex-end}
.wz-nav--end [data-prev]{margin-right:auto}
.err{color:#B3361B;font-size:15px}
.err:empty,.sent:empty{display:none}
.invalid{border-color:#B3361B!important}
.sent{padding:20px;border-radius:var(--r-in);background:var(--accent-soft)}

.store{min-width:0}

/* Nuestra historia */
.quote{margin:26px 0 0;padding:0;font-size:clamp(20px,1.8vw,24px);font-weight:500;letter-spacing:-.02em;line-height:1.35;color:var(--ink);max-width:34ch}
/* Pie */
.foot{background:var(--ink-deep);color:rgba(255,255,255,.82);font-size:15px;position:relative;z-index:var(--z-sheet)}
.foot a{text-decoration:none}
.foot a:hover{text-decoration:underline}


.prose{max-width:720px}
.prose h2{font-size:22px;margin:32px 0 10px}
.prose p{color:var(--ink-2);margin-bottom:12px}
.prose h3{font-size:18px;margin:22px 0 8px}
.prose ul{margin:0 0 14px 1.2em;color:var(--ink-2)}
.prose li{margin-bottom:6px}
.prose table{width:100%;border-collapse:collapse;margin:8px 0 14px;font-size:15px;color:var(--ink-2)}
.prose th,.prose td{text-align:left;vertical-align:top;padding:10px 12px;border-bottom:1px solid var(--line)}
.prose th{color:var(--ink);font-weight:600}
@media (max-width:600px){.prose table,.prose tbody,.prose tr,.prose td{display:block}.prose thead{display:none}.prose td{border:0;padding:4px 0}.prose tr{border-bottom:1px solid var(--line);padding:8px 0}.prose td:first-child{color:var(--ink);font-weight:600}}

/* Aparición: solo lo que está por debajo al cargar; lo visible nunca se oculta */
.pre{opacity:0;transform:translateY(22px)}
.pre.in{opacity:1;transform:none;transition:opacity .9s var(--ease),transform .9s var(--ease)}
@media (prefers-reduced-motion:reduce){
  *,*::before,*::after{animation:none!important;transition:none!important;scroll-behavior:auto!important}
  .pre{opacity:1;transform:none}
  .hero{position:relative}
}

.shop{padding-top:22px}

/* Conoce tu piscina: dos tarjetas, cuánta agua tiene y qué le pasa al agua */
.ctp{display:grid;grid-template-columns:1fr 1fr;gap:20px;align-items:stretch}
.ctp-card{background:var(--surface);border:1px solid var(--line);border-radius:var(--r);padding:clamp(24px,2.8vw,40px)}
.ctp-card{display:flex;flex-direction:column}
.ctp-answers{flex:1}
.ctp-res{display:flex;flex-direction:column}
.ctp-res .row{margin-top:auto;padding-top:20px}
.ctp-card--dark{background:var(--ink-deep);border-color:var(--ink-deep);color:#fff}
.ctp-card--dark h3,.ctp-card--dark .ctp-big b{color:#fff}
.ctp-card--dark .ctp-fields label,.ctp-card--dark .ctp-big,.ctp-card--dark .ctp-note{color:rgba(255,255,255,.72)}
.ctp-card--dark input,.ctp-card--dark select{background-color:rgba(255,255,255,.07)!important;border-color:rgba(255,255,255,.4)!important;color:#fff!important}
.ctp-card--dark select{background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='14' height='14' viewBox='0 0 24 24'%3E%3Cpath d='m6 9 6 6 6-6' fill='none' stroke='%23FFFFFF' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E")!important}
.ctp-card--dark select option{color:var(--ink);background:#fff}
.ctp-card--dark input:focus,.ctp-card--dark select:focus{border-color:var(--cyan)!important}
.ctp-card--dark .ctp-big{border-top:1px solid rgba(255,255,255,.16);padding-top:20px}
/* Las respuestas comparten celda: el cuadro mide siempre lo que la más larga */
.ctp-answers{display:grid;margin-top:18px}
.ctp-answers>*{grid-area:1/1;visibility:hidden}
.ctp-answers>.is-on{visibility:visible}
@media (max-width:860px){.ctp-answers>:not(.is-on){display:none}}
.ctp-answers .ctp-hint{margin-top:0;align-self:start}
.ctp-card h3{font-size:clamp(22px,2vw,28px);font-weight:600;letter-spacing:-.03em;margin-bottom:18px}
.ctp-fields{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:12px}
@media (max-width:480px){.ctp-fields{grid-template-columns:1fr 1fr}}
.ctp-fields label,.ctp-sel{display:flex;flex-direction:column;gap:6px;font-size:14.5px;color:var(--ink-2)}
.ctp-wide{grid-column:1 / -1}
.ctp-card select{appearance:none;background:var(--surface) url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='14' height='14' viewBox='0 0 24 24'%3E%3Cpath d='m6 9 6 6 6-6' fill='none' stroke='%230F2A36' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E") right 16px center/14px no-repeat;padding-right:42px;cursor:pointer;color:var(--ink);font-size:16px}
.ctp-card input{font-variant-numeric:tabular-nums;font-size:16px}
.ctp-big{margin-top:18px;font-size:15px;color:var(--ink-2)}
.ctp-big b{display:inline-block;margin-right:6px;font-size:clamp(40px,4vw,56px);font-weight:600;letter-spacing:-.04em;line-height:1;color:var(--ink);font-variant-numeric:tabular-nums}
.ctp-note,.ctp-hint{margin-top:10px;font-size:14.5px;color:var(--ink-2);max-width:52ch}
.ctp-hint{margin-top:16px}
.ctp-res{padding-top:16px;border-top:1px solid var(--line)}
.ctp-res>p{color:var(--ink-2)}
.ctp-res b{color:var(--ink);font-weight:500}
.ctp-sub{margin-top:12px}
.ctp-res ol{margin:6px 0 0;padding-left:20px;display:grid;gap:4px}
.ctp-res li::marker{color:var(--accent);font-weight:500}
.ctp-res .row{gap:8px 22px}
@media (max-width:860px){.ctp{grid-template-columns:minmax(0,1fr)}}

/* Dónde estamos: tiendas a la izquierda, Google Maps a la derecha, reseñas debajo en cinta */
.sec--stores{padding:clamp(36px,3.5vw,52px) 0}
.stores-map{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1.2fr);gap:clamp(28px,3.5vw,56px);align-items:stretch}
.stores-col{display:grid;gap:12px;align-content:start}
.stores-col .sec-head{margin:0 0 4px}
.stores-col .sec-head p{margin-top:10px}
.store{background:var(--surface);border-radius:var(--r);padding:18px 24px;border:1px solid var(--line);min-width:0;scroll-margin-top:40px}
.store h3{font-size:clamp(20px,1.7vw,23px);font-weight:600;letter-spacing:-.025em;margin-bottom:10px}
.pill{display:inline-flex;align-items:center;gap:8px;padding:5px 12px;border-radius:999px;background:var(--water);font-size:13.5px}
.store-line{display:flex;gap:12px;align-items:flex-start;font-size:15px;line-height:1.5;color:var(--ink-2);margin-top:6px}
.store-line svg{flex:none;width:17px;height:17px;color:var(--accent);margin-top:3px}
.store-line span{min-width:0;overflow-wrap:anywhere}
.store-line a{color:var(--accent)}
.store-hours [data-temp]:not(.cur){display:none}
.store-hours:not(:has(.cur)) [data-temp="invierno"]{display:inline}
.map-box{position:relative;border-radius:var(--r);overflow:hidden;border:1px solid var(--line);background:#E8EEF1;min-height:360px;container-type:size}
.map-box iframe{position:absolute;inset:0;display:block;width:100%;height:100%;border:0}
/* Imagen fija que cubre la caja como object-fit:cover; los pines van en % de la imagen y no se descolocan al recortar */
.map-static{position:absolute;left:50%;top:50%;width:max(100cqw,160cqh);aspect-ratio:16/10;transform:translate(-50%,-50%)}
.map-static img{display:block;width:100%;height:100%}
.map-pin{position:absolute;display:flex;align-items:center;gap:8px;transform:translate(-8px,-50%)}
.map-pin--l{flex-direction:row-reverse;transform:translate(calc(-100% + 8px),-50%)}
.map-pin i{width:16px;height:16px;border-radius:50%;background:var(--accent);box-shadow:0 0 0 4px rgba(255,255,255,.9),0 2px 8px rgba(15,42,54,.35)}
.map-pin b{font-size:14px;font-weight:600;letter-spacing:-.01em;color:var(--ink);background:rgba(255,255,255,.92);padding:3px 9px;border-radius:999px;box-shadow:0 1px 4px rgba(15,42,54,.15)}
.map-cta{position:absolute;left:50%;bottom:clamp(16px,4cqh,28px);transform:translateX(-50%);width:min(92%,360px);display:grid;justify-items:center;gap:10px;text-align:center;background:rgba(255,255,255,.94);padding:16px 18px;border-radius:var(--r);box-shadow:0 8px 24px rgba(15,42,54,.14)}
.map-cta p{font-size:13px;line-height:1.45;color:var(--ink-2)}
.map-cta a{color:var(--accent);white-space:nowrap}
.map-attr{position:absolute;right:8px;top:6px;font-size:11px;color:var(--ink-2);background:rgba(255,255,255,.8);padding:1px 6px;border-radius:4px}
.map-box.is-on :is(.map-static,.map-cta,.map-attr){display:none}
@media (max-width:900px){.stores-map{grid-template-columns:minmax(0,1fr)}.map-box{height:380px;min-height:0}.map-cta{bottom:12px;padding:12px 14px;gap:8px}.map-cta p{font-size:12.5px}}
/* Móvil: el mapa entero (sin recorte, caben los dos pines) y el aviso debajo, no encima */
@media (max-width:600px){.map-box{height:auto;container-type:normal;background:var(--surface)}
  .map-static{position:relative;left:auto;top:auto;width:100%;transform:none}
  .map-cta{position:static;transform:none;width:auto;box-shadow:none;border-radius:0;background:none;padding:14px 16px 16px}
  .map-box.is-on{height:380px}}

.revs{margin:0}
.sec--stores{padding-bottom:clamp(24px,2.5vw,36px)}
.sec--revs{padding:0 0 clamp(56px,6vw,96px)}
.revs-head{display:flex;flex-wrap:wrap;align-items:baseline;gap:6px 14px;margin-bottom:18px}
h2.revs-head{font-size:18px;font-weight:600;letter-spacing:-.02em;line-height:1.3}
.revs-head span{font-size:14px;color:var(--ink-2)}
.revs-viewport{overflow:hidden;-webkit-mask:linear-gradient(90deg,transparent,#000 6%,#000 94%,transparent);mask:linear-gradient(90deg,transparent,#000 6%,#000 94%,transparent)}
.revs-track{display:flex;width:max-content;animation:cinta 70s linear infinite}
.revs-viewport:hover .revs-track{animation-play-state:paused}
.revs-dup{display:flex}
@keyframes cinta{to{transform:translateX(-50%)}}
.rev{width:340px;margin:0 16px 0 0;flex:none;display:flex;flex-direction:column;gap:12px;padding:22px 24px;background:var(--surface);border:1px solid var(--line);border-radius:var(--r)}
.rev-stars{color:#B07415;font-size:15px;letter-spacing:2px;line-height:1}
.rev blockquote{margin:0;font-style:italic;font-size:15px;line-height:1.5;color:var(--ink);}
.rev-nota{display:block;margin-top:4px;font-style:normal;font-size:12.5px;color:var(--ink-2)}
.rev figcaption{display:flex;align-items:center;gap:10px;margin-top:auto}
.rev figcaption img{width:36px;height:36px;border-radius:50%;object-fit:cover;flex:none}
.rev figcaption span{display:flex;flex-direction:column;line-height:1.25}
.rev figcaption b{font-weight:500;font-size:14.5px}
.rev figcaption small{font-size:12.5px;color:var(--ink-2)}
@media (max-width:600px){.rev{width:280px}}
@media (prefers-reduced-motion:reduce){.revs-track{animation:none}.revs-viewport{overflow-x:auto;-webkit-mask:none;mask:none}.revs-dup{display:none}}

/* Pie de una línea: logo y nombre, propiedad y enlaces legales */
.foot{background:var(--ink-deep);color:rgba(255,255,255,.75);font-size:14px;position:relative;z-index:var(--z-sheet)}
.foot-row{display:flex;flex-wrap:wrap;align-items:center;gap:12px 28px;padding-top:22px;padding-bottom:22px}
.foot-lk{display:flex;align-items:center;gap:10px;color:#fff;text-decoration:none}
.foot-lk img{width:auto;height:40px;border-radius:2px}
.foot-lk b{font-weight:600;font-size:16px;letter-spacing:-.02em}
.foot-copy{margin-left:auto}
.foot-legal{display:flex;flex-wrap:wrap;gap:8px 20px}
.foot-legal a{white-space:nowrap}
.foot a{text-decoration:none}
.foot-legal a:hover{color:#fff;text-decoration:underline}
/* Móvil: todo centrado; la tienda en su línea, lo legal junto debajo y el © al final */
@media (max-width:760px){
  .foot-row{flex-direction:column;gap:16px;text-align:center;padding-top:28px;padding-bottom:28px}
  .foot-legal{justify-content:center;gap:10px 22px}
  .foot-legal a:first-child{flex-basis:100%;color:#fff}
  .foot-copy{order:3;margin-left:0;font-size:13px;color:rgba(255,255,255,.6)}}
/* Pantallas bajas (portátiles de 768 px): menos relleno para que cada sección quepa */
@media (min-width:901px) and (max-height:820px){
  .sec--ba,#conoce-tu-piscina{padding-top:36px;padding-bottom:36px}
  .sim-est small{display:none}
  .ctp-card{padding:24px 28px}
  .ctp-card h3{margin-bottom:14px}
}
.ba-split--sim .ba-txt p+p{margin-top:8px}
#sim-file:focus-visible+.sim-btns [data-sim-up]{outline:2px solid var(--accent);outline-offset:3px}

/* ── Nuestra historia: página única con línea temporal en ola ─────── */
.hist-intro{padding:clamp(56px,9vw,120px) 0 clamp(24px,4vw,48px)}
.hist-intro h1{font-size:clamp(46px,7vw,96px);letter-spacing:-.04em;line-height:1}
.hist-intro p{margin-top:20px;max-width:34ch;font-size:clamp(18px,1.7vw,22px);color:var(--ink-2)}
.hist-scroll{display:grid;place-items:center;width:44px;height:44px;margin-top:36px;border-radius:50%;border:1px solid var(--line);color:var(--accent);animation:bajar 2.2s var(--ease) 2}
.hist-scroll svg{width:18px;height:18px}
@keyframes bajar{0%,100%{transform:none}50%{transform:translateY(6px)}}
.tl{padding:clamp(24px,4vw,56px) 0 clamp(48px,6vw,96px)}
.tl-wrap{position:relative}
.tl-line{position:absolute;top:0;bottom:0;left:50%;width:40px;height:100%;transform:translateX(-50%);overflow:visible;pointer-events:none}
.tl-line path{fill:none;stroke-linecap:round}
.tl-base{stroke:var(--line);stroke-width:2}
.tl-draw{stroke:var(--accent);stroke-width:3}
.tl-list{list-style:none;margin:0;padding:0}
.tl-item{position:relative;display:grid;grid-template-columns:1fr 1fr;column-gap:clamp(80px,10vw,160px);align-items:center;padding:clamp(24px,4vh,44px) 0}
.tl-item--r .tl-txt{order:2}
.tl-txt{max-width:46ch;justify-self:end;text-align:right}
.tl-item--r .tl-txt{justify-self:start;text-align:left}
.tl-year{font-size:clamp(44px,5.5vw,76px);font-weight:600;letter-spacing:-.045em;line-height:1;color:var(--accent)}
.tl-txt h2{margin-top:14px;font-size:clamp(24px,2.4vw,32px);letter-spacing:-.03em;line-height:1.15}
.tl-txt p:last-child{margin-top:14px;color:var(--ink-2);font-size:17px;line-height:1.6}
.tl-img{margin:0;border-radius:var(--r);overflow:hidden;aspect-ratio:4/3;max-height:calc(100dvh - 220px);background:var(--water)}
.tl-img img{width:100%;height:100%;object-fit:cover}
/* Punto de cada fecha: se llena y hace ondas cuando la línea llega */
.tl-dot{position:absolute;left:50%;top:50%;width:20px;height:20px;margin:-10px 0 0 -10px;border-radius:50%;background:var(--surface);border:3px solid var(--line);transition:border-color .4s,background .4s;z-index:1}
.tl-dot::before,.tl-dot::after{content:'';position:absolute;inset:-3px;border-radius:50%;border:2px solid var(--accent);opacity:0}
.tl-item.is-on .tl-dot{border-color:var(--accent);background:var(--accent)}
.tl-item.is-on .tl-dot::before{animation:onda-tl 2.6s ease-out 1}
.tl-item.is-on .tl-dot::after{animation:onda-tl 2.6s 1.3s ease-out 1}
@keyframes onda-tl{0%{transform:scale(1);opacity:.7}100%{transform:scale(3.4);opacity:0}}
@keyframes onda-tl-m{0%{transform:scale(1);opacity:.7}100%{transform:scale(2.2);opacity:0}}
/* Aparición: solo con JS; sin JS todo se ve */
.tl.tl-ready .tl-item .tl-txt,.tl.tl-ready .tl-item .tl-img{opacity:0;transform:translateY(36px);transition:opacity .8s var(--ease),transform 1s var(--ease)}
.tl.tl-ready .tl-item .tl-img{transition-delay:.12s}
.tl.tl-ready .tl-item.is-on .tl-txt,.tl.tl-ready .tl-item.is-on .tl-img{opacity:1;transform:none}
@media (max-width:900px){
  .tl-line{left:calc(var(--gut) + 10px)}
  .tl-item{grid-template-columns:minmax(0,1fr);row-gap:20px;padding:36px 0 36px 46px}
  .tl-item--r .tl-txt{order:0}
  .tl-txt,.tl-item--r .tl-txt{justify-self:start;text-align:left}
  .tl-dot{left:10px;top:52px;width:18px;height:18px;margin:-9px 0 0 -9px}
  .tl-item.is-on .tl-dot::before,.tl-item.is-on .tl-dot::after{animation-name:onda-tl-m}
  .tl-year{font-size:clamp(40px,12vw,56px)}
  .tl-img{max-height:none}
}
@media (prefers-reduced-motion:reduce){
  .tl.tl-ready .tl-item .tl-txt,.tl.tl-ready .tl-item .tl-img{opacity:1;transform:none;transition:none}
  .tl-item.is-on .tl-dot::before,.tl-item.is-on .tl-dot::after,.hist-scroll{animation:none}
}

.circ svg,.menu-btn svg{pointer-events:none}

/* Cambio de página: la página se desvanece y aparece la nueva (navegadores con View Transitions); la cabecera se queda quieta */
@view-transition{navigation:auto}
.hdr{view-transition-name:cabecera}
::view-transition-old(root){animation:salir .28s cubic-bezier(.4,0,1,1) both}
::view-transition-new(root){animation:entrar .45s cubic-bezier(0,0,.2,1) both}
@keyframes salir{to{opacity:0;transform:translateY(-6px)}}
@keyframes entrar{from{opacity:0;transform:translateY(10px)}}
@media (prefers-reduced-motion:reduce){::view-transition-old(root),::view-transition-new(root){animation:none}}

/* Nuestra historia · Lo que no ha cambiado: banda oscura, filas separadas por una ola */
.hist-valores{background:var(--ink-deep);color:#fff;padding:clamp(56px,7vw,110px) 0;position:relative;z-index:var(--z-sheet)}
.hv{display:grid;grid-template-columns:minmax(0,.9fr) minmax(0,1.3fr);gap:clamp(32px,6vw,96px);align-items:start}
.hv-head{position:sticky;top:110px}
.hv-head h2{font-size:clamp(36px,4.6vw,64px);letter-spacing:-.04em;line-height:1.02}
.hv-head p{margin-top:18px;color:rgba(255,255,255,.7);font-size:18px;max-width:30ch}
.hv-list{list-style:none;margin:0;padding:0}
.hv-list li{position:relative;display:block;padding:30px 0 32px}
.hv-list li::before{content:'';position:absolute;left:0;right:0;top:0;height:10px;background:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='24' height='10' viewBox='0 0 24 10'%3E%3Cpath d='M0 5 Q6 0 12 5 T24 5' fill='none' stroke='%237DB4CB' stroke-opacity='.55' stroke-width='1.6'/%3E%3C/svg%3E") 0 0/24px 10px repeat-x;animation:ola-hv 2.4s linear 2}
@keyframes ola-hv{to{background-position:24px 0}}
.hv-n{grid-row:span 2;font-size:15px;font-weight:500;color:var(--cyan);font-variant-numeric:tabular-nums;padding-top:6px}
.hv-list h3{font-size:clamp(24px,2.4vw,32px);letter-spacing:-.03em;line-height:1.15}
.hv-list p{margin-top:8px;color:rgba(255,255,255,.72);font-size:17px;max-width:46ch}
@media (max-width:860px){.hv{grid-template-columns:minmax(0,1fr)}.hv-head{position:static}}
@media (prefers-reduced-motion:reduce){.hv-list li::before{animation:none}}

/* ── Proyectos: obras destacadas en una tira que avanza al bajar ── */
.proj-intro{padding:clamp(48px,7vw,96px) 0 clamp(20px,3vw,36px)}
.proj-intro h1{font-size:clamp(44px,6.5vw,92px);letter-spacing:-.04em;line-height:1}
.proj-intro p{margin-top:16px;max-width:46ch;font-size:clamp(17px,1.5vw,20px);color:var(--ink-2)}
.show{position:relative}
.show-sticky{display:flex;flex-direction:column;justify-content:center;gap:22px;padding:20px 0 28px}
.show-track{list-style:none;margin:0;display:flex;gap:clamp(14px,1.6vw,24px);padding:0 var(--gut);width:max-content;will-change:transform}
.show-card{position:relative;flex:none;height:min(66dvh,640px);aspect-ratio:4/3;border-radius:var(--r);overflow:hidden;background:var(--water)}
.show-card--alto{aspect-ratio:3/4}
.show-card button:focus-visible{outline:none}
.show-card:has(> button:focus-visible){outline:3px solid var(--accent);outline-offset:3px}
.show-card button{display:block;width:100%;height:100%;padding:0;border:0;background:none;cursor:zoom-in}
.show-card img{width:100%;height:100%;object-fit:cover;transform:scale(1.12);transition:filter .5s var(--ease)}
.show-card::after{content:'';position:absolute;inset:auto 0 0;height:45%;background:linear-gradient(180deg,transparent,rgba(11,32,41,.72));pointer-events:none}
.show-card:hover img{filter:brightness(1.06)}
.show-cap{position:absolute;left:clamp(16px,2vw,28px);right:clamp(16px,2vw,28px);bottom:clamp(16px,2vw,26px);color:#fff;z-index:1;pointer-events:none}
.show-cap span{font-size:13.5px;letter-spacing:.02em;color:rgba(255,255,255,.82);font-variant-numeric:tabular-nums}
.show-cap h2{margin-top:6px;font-size:clamp(20px,1.9vw,28px);letter-spacing:-.025em;line-height:1.15}
.show-foot{display:flex;align-items:center;gap:20px}
.show-count{font-size:15px;color:var(--ink-2);font-variant-numeric:tabular-nums}
.show-count b{color:var(--ink);font-weight:500}
.show-bar{flex:1;height:2px;background:var(--line);border-radius:2px;overflow:hidden}
.show-bar i{display:block;height:100%;background:var(--accent);transform-origin:left;transform:scaleX(.04)}
.show-foot .link{flex:none}
/* Fijo en ordenador; en móvil (y sin animaciones) la tira se desliza con el dedo. Con media queries y no con la clase
   .show--fijo del JS, para que la página no salte al cargar (CLS). Mismas condiciones que fijo() en site.js */
@media (min-width:901px) and (prefers-reduced-motion:no-preference){.show-sticky{position:sticky;top:65px;height:calc(100dvh - 65px);overflow:clip}}
@media (max-width:900px),(prefers-reduced-motion:reduce){
  .show-track{width:auto;overflow-x:auto;scroll-snap-type:x mandatory;scrollbar-width:none;padding-bottom:4px}
  .show-track::-webkit-scrollbar{display:none}
  .show-card{height:auto;width:min(82vw,520px);aspect-ratio:4/5;scroll-snap-align:center}
  .show-card img{transform:none}}
@media (max-width:600px){.show-foot .link{display:none}}

/* ── Inicio · Qué necesita tu piscina ahora: el mes (foto) y el tiempo de la semana (panel oscuro) ── */
.ah{display:grid;grid-template-columns:minmax(0,1.05fr) minmax(0,1fr);gap:12px;height:clamp(420px,calc(100dvh - 300px),520px)}
.ah.sin-tiempo{grid-template-columns:minmax(0,1fr)}
.ah-card{position:relative;border-radius:var(--r);overflow:hidden;min-width:0}
.ah-mes{position:absolute;inset:0;display:flex;align-items:flex-end;color:#fff;isolation:isolate}
.ah-mes>img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;z-index:-2}
.ah-mes::before{content:'';position:absolute;inset:0;z-index:-1;background:linear-gradient(180deg,rgba(11,32,41,.05) 0,rgba(11,32,41,.62) 40%,rgba(11,32,41,.9) 100%)}
.ah-mes .ah-k{color:#fff}
.ah-mes-txt{padding:clamp(22px,2.6vw,36px)}
.ah-k{font-size:14px;font-weight:500;letter-spacing:.01em;color:rgba(255,255,255,.78)}
.ah-mes h3{margin-top:6px;font-size:clamp(28px,3vw,42px);letter-spacing:-.035em;line-height:1.05}
.ah-mes p:not(.ah-k){margin-top:10px;max-width:44ch;font-size:17px;color:rgba(255,255,255,.9)}
.ah-mes .btn{margin-top:20px}
.sem-panel{display:flex;flex-direction:column;background:var(--ink-deep);color:#fff;padding:clamp(22px,2.6vw,36px)}
.sem-titular{margin-top:8px;font-size:clamp(22px,2.2vw,30px);font-weight:600;letter-spacing:-.025em;line-height:1.15;color:#9FD3EA}
.sem-titular::first-letter{text-transform:uppercase}
.sem-consejo{margin-top:10px;font-size:16.5px;color:rgba(255,255,255,.82);max-width:46ch}
.sem-dias{list-style:none;margin:auto 0 0;padding:18px 0 0;display:grid;grid-template-columns:repeat(7,minmax(0,1fr));gap:4px}
.sem-dia{display:flex;flex-direction:column;align-items:center;gap:6px;padding:12px 2px;border-radius:12px;text-align:center}
.sem-dia.is-marca{background:rgba(125,180,203,.16);box-shadow:inset 0 0 0 1px rgba(125,180,203,.5)}
.sem-d{font-size:13.5px;color:rgba(255,255,255,.7)}
.sem-ico{display:block;width:34px;height:34px}
.sem-ico svg{width:100%;height:100%}
.sem-dia b{font-size:20px;font-weight:600;letter-spacing:-.02em;font-variant-numeric:tabular-nums}
.sem-dia small{font-size:12.5px;color:rgba(255,255,255,.65);font-variant-numeric:tabular-nums;white-space:nowrap}
.sem-dia.is-cargando .sem-ico{border-radius:50%;background:rgba(255,255,255,.08);animation:shimmer 1.6s linear infinite}
.sem-pie{display:flex;align-items:center;justify-content:space-between;gap:12px;margin-top:14px;padding-top:14px;border-top:1px solid rgba(255,255,255,.12)}
.sem-pie .link{color:#9FD3EA;white-space:nowrap}
@media (max-width:560px){.sem-pie{flex-direction:column;align-items:flex-start;gap:8px}}
.sem-fuente{font-size:12.5px;color:rgba(255,255,255,.5)}
@media (max-width:900px){.ah{grid-template-columns:minmax(0,1fr);height:auto}.ah-card[data-meses]{height:440px}}
@media (max-width:560px){.sem-dias{grid-template-columns:repeat(7,minmax(0,1fr));gap:2px}.sem-dia{padding:10px 0;gap:4px}.sem-ico{width:26px;height:26px}.sem-dia b{font-size:17px}.sem-d{font-size:12.5px}.sem-dia small{font-size:11.5px;white-space:normal}.ah-card[data-meses]{height:420px}}

/* ── Inicio · Instagram: fotos en cinta continua ── */
.sec--ig{overflow:hidden}
.ig-viewport{overflow:hidden;-webkit-mask:linear-gradient(90deg,transparent,#000 4%,#000 96%,transparent);mask:linear-gradient(90deg,transparent,#000 4%,#000 96%,transparent)}
.ig-track{display:flex;width:max-content;animation:cinta 60s linear infinite}
.ig-viewport:hover .ig-track{animation-play-state:paused}
.ig-dup{display:flex}
.ig-foto{display:block;flex:none;width:clamp(180px,17vw,250px);aspect-ratio:1;margin-right:10px;border-radius:12px;overflow:hidden}
.ig-foto img{width:100%;height:100%;object-fit:cover;transition:transform .8s var(--ease)}
.ig-foto:hover img{transform:scale(1.06)}
.sec--ig .btn svg{width:18px;height:18px}
@media (prefers-reduced-motion:reduce){.ig-track{animation:none}.ig-viewport{overflow-x:auto;-webkit-mask:none;mask:none}.ig-dup{display:none}}

/* Desplegables: flecha propia, separada del borde */
.filters select,.wizard select{appearance:none;-webkit-appearance:none;background:var(--surface) url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='14' height='14' viewBox='0 0 24 24'%3E%3Cpath d='m6 9 6 6 6-6' fill='none' stroke='%230F2A36' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E") right 18px center/14px no-repeat;padding-right:46px;cursor:pointer}
@media (max-height:820px){.hist-valores{padding:48px 0}.hv-list li{padding:24px 0 26px}}

/* ── Productos: un carrusel por categoría ── */
.tienda-intro{padding-bottom:clamp(28px,3.5vw,48px)}
.t-search{display:flex;flex-wrap:wrap;align-items:center;gap:10px 18px;margin-top:clamp(26px,3.2vw,44px)}
.t-search label{flex:1 1 360px;max-width:640px}
.t-search input{width:100%;min-height:54px;padding:0 20px 0 50px;border:1px solid rgba(15,42,54,.52);border-radius:999px;background:var(--surface) url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='20' height='20' viewBox='0 0 24 24' fill='none' stroke='%2344606B' stroke-width='1.8' stroke-linecap='round'%3E%3Ccircle cx='11' cy='11' r='7'/%3E%3Cpath d='m20 20-3.5-3.5'/%3E%3C/svg%3E") no-repeat 20px 50%;font:400 16.5px/1 var(--sans);color:var(--ink)}
.t-search input:focus{outline:none;border-color:var(--accent);box-shadow:0 0 0 3px var(--accent-soft)}
.t-search input::placeholder{color:#5F7680}
.t-search .t-cat{position:relative;flex:none;width:54px;height:54px;border:1px solid rgba(15,42,54,.52);border-radius:50%;background:var(--surface);color:var(--ink);display:grid;place-items:center;transition:background .2s,border-color .2s,color .2s}
.t-cat svg{width:22px;height:22px;pointer-events:none}
.t-cat select{position:absolute;inset:0;width:100%;height:100%;opacity:0;cursor:pointer;font-size:16px}
.t-cat:hover{border-color:var(--ink)}
.t-cat:focus-within{border-color:var(--accent);box-shadow:0 0 0 3px var(--accent-soft)}
.t-cat.is-on{background:var(--accent);border-color:var(--accent);color:#fff}
.t-count{font-size:14px;color:var(--ink-2)}
@media (max-width:640px){.t-search label:first-child{flex:1 1 0;min-width:0}.t-count{flex-basis:100%}}
.pcats{padding-bottom:clamp(40px,5vw,72px)}
.pcat{padding-top:clamp(32px,4vw,56px);scroll-margin-top:0}
.pcat-head{display:flex;align-items:flex-end;justify-content:space-between;gap:24px;margin-bottom:20px}
.pcat-head h2{font-size:clamp(26px,2.8vw,38px)}
.pcat-head p{margin-top:8px;max-width:72ch;color:var(--ink-2);font-size:16.5px}
.pcat-nav{display:flex;gap:8px;flex:none}
.pcat-nav .ba-arrow:disabled{opacity:.35;cursor:default}
.pc-track{list-style:none;margin:0;padding:4px max(var(--gut),calc((100vw - var(--wrap-wide)) / 2 + var(--gut))) 18px;display:flex;gap:14px;overflow-x:auto;scroll-snap-type:x mandatory;scroll-padding:0 max(var(--gut),calc((100vw - var(--wrap-wide)) / 2 + var(--gut)));scrollbar-width:none;overscroll-behavior-x:contain}
.pc-track::-webkit-scrollbar{display:none}
.pc{flex:none;width:clamp(200px,15.5vw,228px);display:flex;flex-direction:column;border-radius:18px;background:var(--surface);box-shadow:0 1px 2px rgba(11,32,41,.06),0 0 0 1px var(--line);scroll-snap-align:start;transition:transform .35s var(--ease),box-shadow .35s var(--ease)}
.pc:hover{transform:translateY(-3px);box-shadow:0 18px 36px -22px rgba(11,32,41,.4),0 0 0 1px rgba(15,42,54,.18)}
.pc[hidden]{display:none}
.pc-img{position:relative;aspect-ratio:5/4;margin:6px 6px 0;border-radius:12px;background:linear-gradient(180deg,#F3F7F9,#E9F0F3);display:grid;place-items:center;color:#B9C8CF;overflow:hidden}
.pc-img img{position:absolute;inset:7%;width:86%;height:86%;object-fit:contain;mix-blend-mode:multiply;transition:transform .5s var(--ease)}
.pc:hover .pc-img img{transform:scale(1.05)}
.pc-img svg{width:44px;height:44px}
.pc-body{display:flex;flex-direction:column;flex:1;padding:12px 14px 14px}
.pc-m{font-size:12.5px;font-weight:500;color:var(--accent)}
.pc h3{margin-top:4px;font-size:17px;font-weight:600;letter-spacing:-.015em;line-height:1.25}
.pc-body p{margin-top:4px;font-size:14.5px;line-height:1.4;color:var(--ink-2)}
.pc-fmt{margin-top:6px;font-size:12.5px;color:var(--ink-2)}
.pc-pie{margin-top:auto;padding-top:10px}
.pc-pie b{font-size:17px;font-weight:600;font-variant-numeric:tabular-nums}
.pc-pie span{font-size:14px;color:var(--ink-2)}
@media (max-width:700px){.pcat-nav{display:none}.pcat-head{display:block}.pc{width:72vw;max-width:260px}}

/* Marcas y materiales: logo en tarjeta con lo que hace cada una */
.sec--marcas{background:var(--water)}
.mk{list-style:none;margin:0;padding:0;display:grid;grid-template-columns:repeat(6,minmax(0,1fr));gap:12px}
.mk li{display:flex;flex-direction:column;border-radius:var(--r);background:var(--surface);overflow:hidden;transition:transform .35s var(--ease),box-shadow .35s var(--ease)}
.mk li:hover{transform:translateY(-3px);box-shadow:0 18px 36px -24px rgba(11,32,41,.45)}
.mk-logo{display:grid;place-items:center;height:110px;padding:22px}
.mk-logo img{max-width:100%;max-height:46px;object-fit:contain}
.mk-logo b{font-weight:600;font-size:18px}
.mk-txt{padding:12px 16px;border-top:1px solid var(--line);font-size:14px;color:var(--ink-2);text-align:center}
@media (max-width:1100px){.mk{grid-template-columns:repeat(3,minmax(0,1fr))}}
@media (max-width:560px){.mk{grid-template-columns:repeat(2,minmax(0,1fr))}.mk-logo{height:88px;padding:16px}}
.mat{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1fr);gap:clamp(28px,5vw,80px);align-items:center}
.mat-img{margin:0;border-radius:var(--r);overflow:hidden;aspect-ratio:4/3;max-height:calc(100dvh - 200px)}
.mat-img img{width:100%;height:100%;object-fit:cover}
.mat-txt h2{font-size:clamp(30px,3.8vw,52px)}
.mat-txt>p{margin-top:16px;max-width:52ch;color:var(--ink-2)}
.mk--mat{margin-top:28px;grid-template-columns:repeat(3,minmax(0,1fr))}
.mk--mat li{background:var(--water)}
.mk--mat .mk-logo{height:92px;padding:18px}
@media (max-width:900px){.mat{grid-template-columns:minmax(0,1fr)}}
@media (max-width:560px){.mk--mat{grid-template-columns:minmax(0,1fr)}.mk--mat li{flex-direction:row;align-items:center}.mk--mat .mk-logo{width:45%;height:72px}.mk--mat .mk-txt{border:0;text-align:left}}

/* Historia: pie de foto y logo */
.tl-img{position:relative}
.tl-img--ancho{aspect-ratio:2/1}
@media (min-width:901px) and (max-height:820px){.sec--prods{padding-top:28px;padding-bottom:28px}.sec--prods .sec-head{margin-bottom:16px}}

/* ── Servicios: una sola página, una sección por vertical ── */
/* ── Servicios (por tareas): «¿Qué necesitas?», obra con antes y después y pasos en ola, el año del mantenimiento, aviso de averías ── */
.pintro{padding:clamp(40px,5.5vw,80px) 0 clamp(36px,4.5vw,64px)}
.pintro h1{font-size:clamp(44px,6vw,84px);letter-spacing:-.04em;line-height:1}
@keyframes ola-srv{to{background-position:24px 0}}
.srv-sec{padding:clamp(48px,6vw,88px) 0}
.srv-bloque{border-top:1px solid var(--line)}
.srv-bloque--agua{background:var(--water);border-top:0}
.srv-bloque-in{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1fr);gap:clamp(28px,5vw,80px);align-items:center}
.srv-bloque--inv .srv-media{order:2}
.srv-foto{margin:0;border-radius:var(--r);overflow:hidden;height:min(calc(100dvh - 200px),580px);min-height:360px;background:var(--surface)}
.srv-foto img{width:100%;height:100%;object-fit:cover}
.ba--srv .ba-frame{aspect-ratio:auto!important;height:min(calc(100dvh - 230px),560px);min-height:360px}
.ba--srv figcaption{font-size:14.5px}
.srv-sec h2{font-size:clamp(32px,3.6vw,50px)}
/* En móvil el título va antes de la foto: copia solo para móvil, la del texto se oculta */
.srv-h-m{display:none}
.srv-lead{margin-top:14px;max-width:52ch;font-size:clamp(16.5px,1.3vw,18px);color:var(--ink-2)}
.srv-incluye{list-style:none;margin:24px 0 0;padding:0;max-width:58ch;border-bottom:1px solid var(--line)}
.srv-incluye li{display:grid;grid-template-columns:minmax(0,14.5em) minmax(0,1fr);gap:3px 20px;padding:11px 0;border-top:1px solid var(--line);font-size:15.5px;line-height:1.45}
.srv-incluye b{display:flex;align-items:center;align-self:start;flex-wrap:wrap;gap:4px 8px;font-weight:600;color:var(--ink)}
.srv-incluye li>span{color:var(--ink-2)}
.srv-tag{padding:1px 9px;border-radius:999px;background:var(--ink-deep);color:#fff;font-size:12px;font-weight:500;line-height:1.6}
.srv-tag[hidden]{display:none}
.srv-nota{margin-top:18px;max-width:54ch;font-size:15.5px;color:var(--ink)}
.srv-nota a{color:var(--accent);text-underline-offset:3px}
.srv-sub{margin-top:26px;font-size:16px;font-weight:600;letter-spacing:-.01em}
.srv-ola{list-style:none;position:relative;margin:14px 0 0;padding:0;max-width:58ch;display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:14px}
.srv-ola::before{content:'';position:absolute;left:14px;right:calc(25% - 4px);top:9px;height:10px;background:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='24' height='10' viewBox='0 0 24 10'%3E%3Cpath d='M0 5q6-5 12 0t12 0' fill='none' stroke='%237DB4CB' stroke-width='2'/%3E%3C/svg%3E") repeat-x 0 0/24px 10px;animation:ola-srv 2.4s linear 2}
.srv-ola li{position:relative;counter-increment:p;font-size:14.5px;line-height:1.4;color:var(--ink-2)}
.srv-ola li::before{content:counter(p);position:relative;display:grid;place-items:center;width:28px;height:28px;margin-bottom:10px;border-radius:50%;background:var(--ink-deep);color:#fff;font-size:13px;font-weight:600;box-shadow:0 0 0 4px var(--bg)}
.srv-ola b{display:block;font-size:16px;color:var(--ink);margin-bottom:2px}
.srv-ola{counter-reset:p}
/* El año del mantenimiento: línea de tiempo en ola; el mes de ahora, lleno y con ondas */
.srv-incluye--ano{position:relative;border-bottom:0}
.srv-incluye--ano::before{content:'';position:absolute;left:3px;top:22px;bottom:var(--fin,30px);width:10px;background:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='10' height='24' viewBox='0 0 10 24'%3E%3Cpath d='M5 0q-5 6 0 12t0 12' fill='none' stroke='%237DB4CB' stroke-width='2'/%3E%3C/svg%3E") repeat-y 0 0/10px 24px;animation:ola-srv-v 2.4s linear 2}
@keyframes ola-srv-v{to{background-position:0 24px}}
.srv-incluye.srv-incluye--ano li{position:relative;padding-left:36px;border-top:0}
.srv-incluye--ano li::before,.srv-incluye--ano li::after{content:'';position:absolute;left:0;top:15px;width:16px;height:16px;border-radius:50%;box-sizing:border-box}
.srv-incluye--ano li::before{background:var(--water);border:2px solid var(--accent);z-index:1}
.srv-incluye--ano li:not([data-est])::before{border-style:dashed}
.srv-incluye--ano li.is-ahora::before{background:var(--accent)}
.srv-incluye--ano li.is-ahora::after{border:2px solid var(--accent);opacity:0;animation:onda-tl 2.6s ease-out 1s 3}
.srv-nota{margin-top:18px}
.srv-txt.pre:not(.in) .srv-ola::before,.srv-txt.pre:not(.in) .srv-incluye--ano::before,.srv-txt.pre:not(.in) .srv-incluye--ano li::after{animation-play-state:paused}
@media (prefers-reduced-motion:reduce){.srv-ola::before,.srv-incluye--ano::before,.srv-incluye--ano li.is-ahora::after{animation:none}}
@media (min-width:901px) and (max-height:820px){.srv-incluye.srv-incluye--ano li::before,.srv-incluye.srv-incluye--ano li::after{top:12px}.srv-sec{padding:36px 0}.pintro{padding:32px 0 36px}.srv-incluye{margin-top:18px}.srv-incluye li{padding:8px 0}.srv-nota{margin-top:14px}.srv-sub{margin-top:18px}.srv-foto{height:calc(100dvh - 150px);min-height:0}.ba--srv .ba-frame{height:calc(100dvh - 180px);min-height:0}}
@media (max-width:900px){
  .srv-bloque-in{grid-template-columns:minmax(0,1fr);align-items:start}
  .srv-bloque--inv .srv-media{order:0}
  .srv-h-m{display:block;margin-bottom:-8px}.srv-txt>h2{display:none}
  .srv-txt>.srv-lead{margin-top:0}
  .srv-foto{height:auto;min-height:0;aspect-ratio:4/3}
  .ba--srv .ba-frame{height:auto;min-height:0;aspect-ratio:4/3!important}}
@media (max-width:560px){
  .srv-incluye li{grid-template-columns:minmax(0,1fr);gap:1px}
  .srv-ola{grid-template-columns:minmax(0,1fr);gap:14px;padding-left:44px}
  .srv-ola::before{left:9px;right:auto;top:14px;bottom:14px;width:10px;height:auto;background:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='10' height='24' viewBox='0 0 10 24'%3E%3Cpath d='M5 0q-5 6 0 12t0 12' fill='none' stroke='%237DB4CB' stroke-width='2'/%3E%3C/svg%3E") repeat-y 0 0/10px 24px;animation-name:ola-srv-v}
  .srv-ola li::before{position:absolute;left:-44px;top:-2px;margin:0}}

/* Tienda: flechas desactivadas sin perder el foco; la pista es enfocable */
.pcat-nav .ba-arrow[aria-disabled="true"]{opacity:.35;cursor:default}
.pc-track:focus-visible{outline-offset:-3px}
/* Pausa del vídeo de portada y de las cintas (WCAG 2.2.2) */
.revs-viewport:focus-within .revs-track{animation-play-state:paused}
@media (min-width:901px) and (max-height:820px){.sec--ahora{padding:32px 0 36px}.sec--ahora .sec-head{margin-bottom:18px}}

/* Acabado (revisión final): botones redondos a 44 px con un solo estilo, mapa con barra de pie, formulario y legales */
.hdr-top{padding-top:10px;padding-bottom:10px}
.circ{width:44px;height:44px}
.hdr-cta{min-height:44px}
.hdr--over .circ{background:rgba(11,32,41,.22);border-color:rgba(255,255,255,.7);-webkit-backdrop-filter:blur(6px);backdrop-filter:blur(6px)}
@media (max-width:640px){.hdr-top{padding-top:7px;padding-bottom:7px}.circ{width:44px;height:44px}}
.btn--ghost{border-color:rgba(15,42,54,.5)}
@media (min-width:601px){
  .map-cta{left:0;right:0;bottom:0;transform:none;width:auto;display:flex;align-items:center;gap:16px;text-align:left;padding:12px 12px 12px 20px;border-radius:0;background:rgba(255,255,255,.96);box-shadow:none;border-top:1px solid var(--line)}
  .map-cta p{order:-1;flex:1;max-width:60ch;font-size:13px}
  .map-cta .btn{flex:none;min-height:44px;padding:0 20px;font-size:15px}}
.rgpd-info{padding:14px 18px;border-radius:var(--r-in);background:var(--water);font-size:13.5px;line-height:1.45;color:var(--ink-2)}
.wz-campos{display:grid;gap:16px}
.wz-campos>label{display:flex;flex-direction:column;gap:6px;font-size:15px;color:var(--ink-2)}
@media (min-width:901px){.wz-campos{grid-template-columns:repeat(3,minmax(0,1fr))}}
/* La información de protección de datos solo se abre si se pulsa */
.rgpd-mas summary{display:inline-flex;align-items:center;gap:6px;cursor:pointer;list-style:none;font-size:14.5px;color:var(--accent);text-decoration:underline;text-underline-offset:4px}
.rgpd-mas summary::-webkit-details-marker{display:none}
.rgpd-mas summary::after{content:'';width:8px;height:8px;border:solid currentColor;border-width:0 1.6px 1.6px 0;transform:translateY(-2px) rotate(45deg);transition:transform .2s}
.rgpd-mas[open] summary::after{transform:translateY(2px) rotate(-135deg)}
.rgpd-mas .rgpd-info{margin-top:10px}
.rgpd-info dl{margin:0;display:grid;gap:6px}
.rgpd-info dl>div{display:grid;grid-template-columns:96px minmax(0,1fr);gap:12px}
.rgpd-info dt{font-weight:500;color:var(--ink)}
.rgpd-info dd{margin:0}
.rgpd-info a{color:var(--accent)}
@media (max-width:560px){.rgpd-info dl{gap:4px}.rgpd-info dl>div{display:block}.rgpd-info dt,.rgpd-info dd{display:inline}.rgpd-info dt::after{content:": "}
  .wz-nav--end{flex-direction:column-reverse}.wz-nav--end .btn{width:100%}.wz-nav--end [data-prev]{margin-right:0}}
.phead--legal h1{font-size:clamp(34px,4vw,52px);max-width:none}
.phead--legal .phead-in{padding-bottom:0}
/* Presupuesto: cabecera corta para que el paso 1 se vea entero al llegar */
.phead--wz .phead-in{padding-top:clamp(24px,3vw,40px);padding-bottom:12px}
.phead--wz .crumbs{margin-bottom:10px}
.phead--wz h1{font-size:clamp(36px,4.2vw,60px)}
.phead--wz .lead{margin-top:8px}
.sec--legal{padding-top:28px}
.sec--legal .prose h2{font-size:24px;margin:40px 0 12px;padding-top:28px;border-top:1px solid var(--line)}
.sec--legal .prose h3{font-size:17px;font-weight:600;color:var(--ink);margin:22px 0 6px}
@media (max-width:600px){.prose td[data-label]::before{content:attr(data-label) ": ";font-weight:600;color:var(--ink)}}