/* Blue Star Pool and Spas Services · base.css
   Shared system for the 10 pages. Page files (home.css, about.css, ...) never redefine these. */
@font-face{font-family:"Outfit";src:url("/assets/fonts/outfit-latin-600-normal.woff2") format("woff2");font-weight:600;font-style:normal;font-display:swap}
@font-face{font-family:"Outfit";src:url("/assets/fonts/outfit-latin-700-normal.woff2") format("woff2");font-weight:700;font-style:normal;font-display:swap}
@font-face{font-family:"Outfit";src:url("/assets/fonts/outfit-latin-800-normal.woff2") format("woff2");font-weight:800;font-style:normal;font-display:swap}
@font-face{font-family:"Figtree";src:url("/assets/fonts/figtree-latin-400-normal.woff2") format("woff2");font-weight:400;font-style:normal;font-display:swap}
@font-face{font-family:"Figtree";src:url("/assets/fonts/figtree-latin-500-normal.woff2") format("woff2");font-weight:500;font-style:normal;font-display:swap}
@font-face{font-family:"Figtree";src:url("/assets/fonts/figtree-latin-600-normal.woff2") format("woff2");font-weight:600;font-style:normal;font-display:swap}
@font-face{font-family:"Figtree";src:url("/assets/fonts/figtree-latin-700-normal.woff2") format("woff2");font-weight:700;font-style:normal;font-display:swap}

:root{
  --cyan:#07D0EC;--blue:#0165B3;--navy:#022B7C;--white:#F9FEFE;--aqua:#D1FCFF;
  --navy-rgb:2,43,124;--white-rgb:249,254,254;--cyan-rgb:7,208,236;--blue-rgb:1,101,179;--aqua-rgb:209,252,255;
  --display:"Outfit",system-ui,-apple-system,"Segoe UI",sans-serif;
  --body:"Figtree",system-ui,-apple-system,"Segoe UI",sans-serif;
  --gut:clamp(20px,4.2vw,72px);
  --wrap:1320px;
  --pad:clamp(4.5rem,7.2vw,7.5rem);
  --r:22px;--r-sm:14px;
  --ease:cubic-bezier(.16,1,.3,1);
  --nav-h:92px;
  --wave-h:clamp(26px,3.6vw,58px);
  --shadow:0 18px 44px rgba(var(--navy-rgb),.14),0 3px 10px rgba(var(--navy-rgb),.08);
  --shadow-sm:0 8px 22px rgba(var(--navy-rgb),.10),0 2px 6px rgba(var(--navy-rgb),.06);
}
*,*::before,*::after{box-sizing:border-box}
html{-webkit-text-size-adjust:100%;text-size-adjust:100%;scroll-padding-top:104px;scrollbar-gutter:stable}
html.menu-lock{overflow:hidden}
body{margin:0;font-family:var(--body);font-size:1.0625rem;line-height:1.6;color:rgba(var(--navy-rgb),.82);background:var(--white);overflow-x:clip;-webkit-font-smoothing:antialiased;-moz-osx-font-smoothing:grayscale}
img,svg,canvas,video{display:block;max-width:100%}
img{height:auto}
a{color:inherit;text-decoration:none}
button,input,select,textarea{font:inherit;color:inherit}
button{cursor:pointer;background:none;border:0;padding:0}
h1,h2,h3,h4,p,ul,ol,dl,dd,figure,blockquote{margin:0}
ul,ol{padding:0;list-style:none}
:focus-visible{outline:3px solid var(--cyan);outline-offset:3px;border-radius:6px}
.on-cyan :focus-visible,.on-light :focus-visible,.on-aqua :focus-visible{outline-color:var(--blue)}
::selection{background:var(--cyan);color:var(--navy)}
.visually-hidden{position:absolute!important;width:1px;height:1px;margin:-1px;padding:0;overflow:hidden;clip:rect(0 0 0 0);clip-path:inset(50%);white-space:nowrap;border:0}
.skip-link{position:fixed;left:16px;top:-80px;z-index:400;background:var(--cyan);color:var(--navy);font-weight:700;padding:.7rem 1.1rem;border-radius:999px;transition:top .2s}
.skip-link:focus{top:14px}

/* ---------- layout ---------- */
.wrap{width:100%;max-width:calc(var(--wrap) + var(--gut)*2);margin-inline:auto;padding-inline:var(--gut)}
.section{position:relative;padding-block:var(--pad);overflow:clip}
.section > .wrap{position:relative;z-index:1}
.on-light{background:var(--white);color:rgba(var(--navy-rgb),.82)}
.on-aqua{background:var(--aqua);color:rgba(var(--navy-rgb),.84)}
.on-dark{background:var(--navy);color:rgba(var(--white-rgb),.82)}
.on-blue{background:var(--blue);color:rgba(var(--white-rgb),.9)}
.on-cyan{background:var(--cyan);color:rgba(var(--navy-rgb),.88)}
.on-light h1,.on-light h2,.on-light h3,.on-aqua h1,.on-aqua h2,.on-aqua h3,.on-cyan h2,.on-cyan h3{color:var(--navy)}
.on-dark h1,.on-dark h2,.on-dark h3,.on-blue h2,.on-blue h3{color:var(--white)}

/* ---------- type ---------- */
.display{font-family:var(--display);font-weight:700;letter-spacing:-.022em;line-height:.98;text-wrap:balance}
.h-xl{font-size:clamp(2.7rem,6.2vw,6rem)}
.h-lg{font-size:clamp(2.3rem,4.6vw,4.4rem)}
.h-md{font-size:clamp(1.9rem,3.3vw,3.1rem)}
.h-sm{font-size:clamp(1.35rem,1.9vw,1.75rem);line-height:1.08;letter-spacing:-.012em}
.lead{font-size:clamp(1.08rem,1.35vw,1.28rem);line-height:1.55;max-width:52ch}
.body-sm{font-size:.96rem;line-height:1.55}
.kicker{display:inline-flex;align-items:center;gap:.6rem;font-family:var(--body);font-weight:700;font-size:.78rem;letter-spacing:.16em;text-transform:uppercase;color:var(--blue)}
.kicker::before{content:"";flex:none;width:10px;height:13px;background:var(--cyan);border-radius:50% 50% 50% 50%/62% 62% 38% 38%;transform:rotate(180deg)}
.on-dark .kicker,.on-blue .kicker{color:var(--cyan)}
.on-cyan .kicker{color:var(--navy)}
.on-cyan .kicker::before{background:var(--navy)}
.accent{color:var(--blue)}
.on-dark .accent,.on-blue .accent{color:var(--cyan)}
.on-cyan .accent{color:var(--blue)}
.hl{display:block;overflow:hidden;padding-bottom:.14em;margin-bottom:-.14em}
.hl-in{display:block;white-space:nowrap;will-change:transform}
.fit .hl-in{width:max-content;max-width:none}
.link{font-weight:700;color:var(--blue);background:linear-gradient(currentColor,currentColor) 0 100%/100% 2px no-repeat;padding-bottom:3px;transition:background-size .3s var(--ease),color .2s}
.link:hover{background-size:0 2px;background-position:100% 100%}
.on-dark .link{color:var(--cyan)}

/* ---------- reveals (CSS, one IO in main.js). Never on GSAP-owned nodes ---------- */
.js .rv{opacity:0;transform:translate3d(0,26px,0);transition:opacity .7s var(--ease),transform .8s var(--ease);transition-delay:calc(var(--i,0)*90ms)}
.js .rv-pop{opacity:0;transform:scale(.94);transition:opacity .6s var(--ease),transform .7s var(--ease);transition-delay:calc(var(--i,0)*90ms)}
.js .rv.is-in,.js .rv-pop.is-in{opacity:1;transform:none}
.js .rv-lines .hl-in{transform:translate3d(0,110%,0);transition:transform .8s var(--ease)}
.js .rv-lines .hl:nth-child(2) .hl-in{transition-delay:90ms}
.js .rv-lines .hl:nth-child(3) .hl-in{transition-delay:180ms}
.js .rv-lines.is-in .hl-in{transform:none}
html.reduced .rv,html.reduced .rv-pop,html.reduced .rv-lines .hl-in{opacity:1!important;transform:none!important;transition:none!important}
/* accordion: grid rows, no measured heights */
.acc-panel{display:grid;grid-template-rows:0fr;transition:grid-template-rows .45s var(--ease)}
.acc-panel > *{overflow:hidden;min-height:0}
.is-open > .acc-panel,.acc-panel.is-open{grid-template-rows:1fr}
html.acc-measure .rv,html.acc-measure .rv-pop,html.acc-measure .rv-lines .hl-in{opacity:1!important;transform:none!important;transition:none!important}
html.acc-measure .acc-panel{grid-template-rows:0fr!important;transition:none!important}

/* ---------- buttons (hover transform is GSAP's in main.js: no CSS transform here) ---------- */
.btn{position:relative;display:inline-flex;align-items:center;justify-content:center;gap:.8rem;min-height:56px;padding:.55rem .6rem .55rem 1.5rem;border-radius:999px;font-family:var(--body);font-weight:700;font-size:1rem;line-height:1.1;white-space:nowrap;border:2px solid transparent;transition:background-color .25s,color .25s,border-color .25s,box-shadow .25s}
.btn-disc{flex:none;display:grid;place-items:center;width:40px;height:40px;border-radius:50%;transition:background-color .25s,color .25s}
.btn-disc svg{width:18px;height:18px;stroke:currentColor;fill:none;stroke-width:2.2;stroke-linecap:round;stroke-linejoin:round}
.btn--cyan{background:var(--cyan);color:var(--navy);box-shadow:0 10px 30px rgba(var(--cyan-rgb),.28)}
.btn--cyan .btn-disc{background:var(--navy);color:var(--white)}
.btn--cyan:hover{background:var(--white)}
.btn--ghost{border-color:rgba(var(--white-rgb),.6);color:var(--white)}
.btn--ghost .btn-disc{background:rgba(var(--white-rgb),.16);color:var(--white)}
.btn--ghost:hover{border-color:var(--white);background:rgba(var(--white-rgb),.1)}
.btn--navy{background:var(--navy);color:var(--white);box-shadow:0 10px 28px rgba(var(--navy-rgb),.24)}
.btn--navy .btn-disc{background:var(--cyan);color:var(--navy)}
.btn--navy:hover{background:var(--blue)}
.btn--line{border-color:rgba(var(--navy-rgb),.5);color:var(--navy)}
.btn--line .btn-disc{background:rgba(var(--navy-rgb),.1);color:var(--navy)}
.btn--line:hover{border-color:var(--navy);background:rgba(var(--white-rgb),.5)}
.btn-row{display:flex;flex-wrap:wrap;gap:.9rem}

/* ---------- small parts ---------- */
.chip{display:inline-flex;align-items:center;gap:.5rem;padding:.5rem .95rem;border-radius:999px;border:1.5px solid rgba(var(--navy-rgb),.22);font-weight:600;font-size:.9rem;line-height:1.2;color:var(--navy);background:rgba(var(--white-rgb),.7)}
.on-dark .chip{border-color:rgba(var(--white-rgb),.32);color:var(--white);background:rgba(var(--white-rgb),.06)}
.chip--fill{background:var(--cyan);border-color:var(--cyan);color:var(--navy)}
.chip svg{width:16px;height:16px;stroke:currentColor;fill:none;stroke-width:2;stroke-linecap:round;stroke-linejoin:round}
.ico{width:24px;height:24px;stroke:currentColor;fill:none;stroke-width:1.8;stroke-linecap:round;stroke-linejoin:round}
/* test strip: 6 pads in palette tones. Deco, aria-hidden */
.strip{display:inline-grid;grid-template-columns:repeat(6,1fr);gap:4px;padding:6px 6px 6px 22px;border-radius:7px;background:var(--white);box-shadow:var(--shadow-sm);width:132px}
.strip i{display:block;aspect-ratio:1;border-radius:3px}
.strip i:nth-child(1){background:var(--navy)}.strip i:nth-child(2){background:var(--blue)}.strip i:nth-child(3){background:rgba(var(--blue-rgb),.55)}
.strip i:nth-child(4){background:var(--cyan)}.strip i:nth-child(5){background:rgba(var(--cyan-rgb),.5)}.strip i:nth-child(6){background:var(--aqua);box-shadow:inset 0 0 0 1px rgba(var(--navy-rgb),.12)}
/* ghost numerals and words: outline only, never animates to fill. Parent needs position:relative;overflow:clip */
.ghost{position:absolute;z-index:0;pointer-events:none;user-select:none;font-family:var(--display);font-weight:800;line-height:.8;letter-spacing:-.03em;white-space:nowrap;color:var(--white);paint-order:stroke fill;-webkit-text-stroke:3px rgba(var(--navy-rgb),.09)}
.on-aqua .ghost{color:var(--aqua);-webkit-text-stroke-color:rgba(var(--blue-rgb),.16)}
.on-dark .ghost{color:var(--navy);-webkit-text-stroke-color:rgba(var(--cyan-rgb),.22)}
.on-blue .ghost{color:var(--blue);-webkit-text-stroke-color:rgba(var(--cyan-rgb),.22)}
.banner .ghost{color:rgba(var(--cyan-rgb),.13);-webkit-text-stroke:0}
.on-cyan .ghost{color:var(--cyan);-webkit-text-stroke-color:rgba(var(--navy-rgb),.14)}
/* whisper pattern of jet dots for flat surfaces: add class .jets to a section */
.jets::before{content:"";position:absolute;inset:0;z-index:0;pointer-events:none;background-image:radial-gradient(circle,rgba(var(--blue-rgb),.13) 1.6px,transparent 2.2px);background-size:34px 34px;-webkit-mask-image:linear-gradient(115deg,#000 0%,transparent 42%,transparent 62%,#000 100%);mask-image:linear-gradient(115deg,#000 0%,transparent 42%,transparent 62%,#000 100%)}
.on-dark.jets::before{background-image:radial-gradient(circle,rgba(var(--cyan-rgb),.2) 1.6px,transparent 2.2px)}
/* wave edges: static geometry. Put the svg as last child of a position:relative section */
.wave-edge{position:absolute;left:0;bottom:-1px;width:100%;height:var(--wave-h);z-index:3;pointer-events:none;fill:var(--white)}
.wave-edge--top{bottom:auto;top:-1px;transform:scaleY(-1)}
.wave-edge--aqua{fill:var(--aqua)}.wave-edge--navy{fill:var(--navy)}.wave-edge--cyan{fill:var(--cyan)}
/* canvas of bubbles: always absolute so it never sits in flow */
.motes{position:absolute;inset:0;width:100%;height:100%;z-index:0;pointer-events:none}

/* ---------- NAV «línea de flotación» ---------- */
.site-nav{position:absolute;top:0;left:0;right:0;z-index:200;height:var(--nav-h);display:flex;align-items:center;justify-content:space-between;padding-inline:var(--gut);color:var(--white)}
.site-nav.is-stuck{position:fixed;height:76px;background:var(--navy);box-shadow:0 1px 0 rgba(var(--cyan-rgb),.25),0 12px 30px rgba(var(--navy-rgb),.28);animation:navdrop .35s var(--ease) both}
@keyframes navdrop{from{transform:translate3d(0,-100%,0)}to{transform:none}}
.nav-logo{position:relative;z-index:2;flex:none;display:block}
.nav-logo img{height:64px;width:auto}
.is-stuck .nav-logo img{height:54px}
.nav-links{position:absolute;left:50%;top:50%;transform:translate(-50%,-50%);display:flex;gap:clamp(1.3rem,2.4vw,2.5rem)}
.nav-link{position:relative;display:block;padding:.55rem .1rem .7rem;font-weight:600;font-size:.95rem;letter-spacing:.01em;color:var(--white);text-shadow:0 1px 2px rgba(var(--navy-rgb),.55),0 2px 12px rgba(var(--navy-rgb),.4)}
.is-stuck .nav-link{text-shadow:none}
.nav-wave{position:absolute;left:50%;bottom:0;width:28px;height:6px;margin-left:-14px;fill:none;stroke:var(--cyan);stroke-width:2.2;stroke-linecap:round;stroke-dasharray:34;stroke-dashoffset:34;transition:stroke-dashoffset .45s var(--ease)}
.nav-link:hover .nav-wave,.nav-link:focus-visible .nav-wave,.nav-link.is-active .nav-wave{stroke-dashoffset:0}
.nav-right{position:relative;z-index:2;display:flex;align-items:center;gap:.8rem}
.lang-pill{display:flex;padding:3px;border-radius:999px;border:1.5px solid rgba(var(--white-rgb),.5);background:rgba(var(--navy-rgb),.28)}
.lang-pill a,.mm-lang a{display:grid;place-items:center;min-width:38px;height:30px;padding-inline:.5rem;border-radius:999px;font-weight:700;font-size:.8rem;letter-spacing:.06em;color:var(--white)}
.lang-pill a[aria-current="true"],.mm-lang a[aria-current="true"]{background:var(--cyan);color:var(--navy)}
.nav-cta{display:inline-flex;align-items:center;gap:.55rem;height:46px;padding:0 1.15rem 0 .95rem;border-radius:999px;background:var(--cyan);color:var(--navy);font-weight:700;font-size:.95rem;white-space:nowrap;transition:background-color .25s}
.nav-cta:hover{background:var(--white)}
.nav-cta svg{width:18px;height:18px;stroke:currentColor;fill:none;stroke-width:2;stroke-linecap:round;stroke-linejoin:round}
.nav-burger{display:none;position:relative;width:48px;height:48px;border-radius:50%;border:1.5px solid rgba(var(--white-rgb),.55);background:rgba(var(--navy-rgb),.28)}
.nav-burger span{position:absolute;left:13px;right:13px;height:2px;border-radius:2px;background:var(--white);transition:transform .3s var(--ease),opacity .2s}
.nav-burger span:nth-child(1){top:17px}.nav-burger span:nth-child(2){top:23px}.nav-burger span:nth-child(3){top:29px}
.menu-open .nav-burger span:nth-child(1){transform:translateY(6px) rotate(45deg)}
.menu-open .nav-burger span:nth-child(2){opacity:0}
.menu-open .nav-burger span:nth-child(3){transform:translateY(-6px) rotate(-45deg)}
.mobile-menu{position:fixed;inset:0;z-index:190;display:flex;flex-direction:column;justify-content:space-between;padding:calc(var(--nav-h) + 2rem) var(--gut) 2rem;background:var(--navy);visibility:hidden;opacity:0;transition:opacity .2s ease,visibility 0s linear .2s;overflow-y:auto}
.mobile-menu::before{content:"";position:absolute;inset:0;pointer-events:none;background-image:radial-gradient(circle,rgba(var(--cyan-rgb),.18) 1.6px,transparent 2.2px);background-size:34px 34px;-webkit-mask-image:linear-gradient(160deg,transparent 30%,#000 100%);mask-image:linear-gradient(160deg,transparent 30%,#000 100%)}
.menu-open .mobile-menu{visibility:visible;opacity:1;transition:opacity .3s ease,visibility 0s}
.menu-open .site-nav{position:fixed;background:transparent;box-shadow:none;animation:none}
.mm-links{position:relative;display:grid;gap:.2rem}
.mm-link{display:block;padding:.5rem 0;font-family:var(--display);font-weight:700;font-size:clamp(2.1rem,9vw,3rem);letter-spacing:-.02em;line-height:1.1;color:var(--white);opacity:0;transform:translate3d(0,12px,0)}
.mm-link.is-active{color:var(--cyan)}
.menu-open .mm-link{opacity:1;transform:none;transition:opacity .3s ease calc(var(--n)*40ms + 60ms),transform .4s var(--ease) calc(var(--n)*40ms + 60ms)}
.mm-foot{position:relative;display:flex;flex-wrap:wrap;align-items:center;justify-content:space-between;gap:1rem;margin-top:2rem;padding-top:1.4rem;border-top:1px solid rgba(var(--white-rgb),.18)}
.mm-lang{display:flex;padding:3px;border-radius:999px;border:1.5px solid rgba(var(--white-rgb),.5)}
.mm-lang a{min-width:52px;height:40px;font-size:.9rem}
.mm-tel{display:inline-flex;align-items:center;gap:.55rem;min-height:48px;padding:0 1.2rem;border-radius:999px;background:var(--cyan);color:var(--navy);font-weight:700}
.mm-tel svg{width:18px;height:18px;stroke:currentColor;fill:none;stroke-width:2;stroke-linecap:round;stroke-linejoin:round}
html.reduced .mobile-menu,html.reduced .mm-link,html.reduced .nav-burger span{transition:none!important}
html.reduced .site-nav.is-stuck{animation:none}
@media (max-width:1180px){.nav-cta span{display:none}.nav-cta{width:46px;padding:0;justify-content:center}}
@media (max-width:1080px){
  .nav-links{display:none}.nav-burger{display:block}
  .nav-cta{display:none}
}
@media (max-width:760px){
  :root{--nav-h:76px}
  .nav-logo img{height:54px}.is-stuck .nav-logo img{height:48px}
  .site-nav.is-stuck{height:68px}
  .lang-pill{display:none}
}

/* ---------- INTERIOR BANNER (B4 lateral). main.js owns its motion ---------- */
.banner{position:relative;display:flex;align-items:flex-end;min-height:clamp(380px,50vh,560px);padding:calc(var(--nav-h) + 2.2rem) 0 calc(var(--wave-h) + clamp(2.4rem,4.2vw,4rem));background:var(--navy);color:var(--white);overflow:clip}
.banner-tex{position:absolute;inset:-10% 0;z-index:0;will-change:transform}
.banner-media{width:100%;height:100%;object-fit:cover;object-position:60% 50%}
.banner-scrim{position:absolute;inset:0;z-index:1;background:linear-gradient(90deg,rgba(var(--navy-rgb),.9) 0%,rgba(var(--navy-rgb),.72) 34%,rgba(var(--navy-rgb),.12) 78%,rgba(var(--navy-rgb),0) 100%),linear-gradient(180deg,rgba(var(--navy-rgb),.6) 0%,rgba(var(--navy-rgb),0) 34%)}
.banner .ghost{right:var(--gut);bottom:calc(var(--wave-h)*.4);z-index:1;font-size:clamp(9rem,22vw,21rem)}
.banner-content{position:relative;z-index:2;width:100%;max-width:calc(var(--wrap) + var(--gut)*2);margin-inline:auto;padding-inline:var(--gut)}
.banner-h1{font-family:var(--display);font-weight:700;font-size:clamp(2.6rem,5.5vw,5.6rem);line-height:.98;letter-spacing:-.024em;color:var(--white);text-shadow:0 2px 4px rgba(var(--navy-rgb),.45),0 8px 24px rgba(var(--navy-rgb),.3)}
.banner-h1 .hl:nth-child(2){color:var(--cyan)}
.banner-crumb{margin-top:1.3rem}
.banner-crumb ol{display:inline-flex;flex-wrap:wrap;align-items:center;gap:.7rem;padding:.5rem 1.05rem;border-radius:999px;border:1.5px solid rgba(var(--white-rgb),.38);background:rgba(var(--navy-rgb),.45);font-weight:600;font-size:.88rem}
.banner-crumb li{display:inline-flex;align-items:center;gap:.7rem}
.banner-crumb li + li::before{content:"";width:11px;height:11px;background:var(--cyan);clip-path:polygon(50% 0,61% 35%,98% 35%,68% 57%,79% 91%,50% 70%,21% 91%,32% 57%,2% 35%,39% 35%)}
.banner-crumb a{color:rgba(var(--white-rgb),.86);transition:color .2s}
.banner-crumb a:hover{color:var(--cyan)}
.banner-crumb [aria-current]{color:var(--cyan)}
@media (max-width:760px){
  .banner{min-height:clamp(340px,54vh,460px)}
  .banner-media{object-position:68% 50%}
  .banner-scrim{background:linear-gradient(90deg,rgba(var(--navy-rgb),.9) 0%,rgba(var(--navy-rgb),.74) 60%,rgba(var(--navy-rgb),.4) 100%),linear-gradient(180deg,rgba(var(--navy-rgb),.6) 0%,rgba(var(--navy-rgb),0) 34%)}
  .banner .ghost{font-size:9rem;right:-1rem}
}

/* ---------- CTA ⑤ (cyan water). Same block closes the 10 pages ---------- */
.cta{position:relative;z-index:1;padding-block:clamp(4.2rem,6.4vw,6.6rem) clamp(4.6rem,7vw,7.2rem);background:linear-gradient(180deg,var(--cyan) 0%,#5DE4F5 46%,var(--aqua) 100%);color:rgba(var(--navy-rgb),.88);text-align:center}
.cta-wave{position:absolute;left:0;bottom:calc(100% - 1px);width:100%;height:var(--wave-h);fill:var(--cyan);pointer-events:none}
.cta-clip{position:absolute;inset:0;overflow:clip;pointer-events:none}
.cta-caustic{position:absolute;inset:-12% 0;background:url("/assets/img/scene/caustics-light.webp") center/cover;opacity:.5;will-change:transform}
.cta-star{position:absolute;right:max(var(--gut),4vw);top:50%;width:clamp(180px,24vw,380px);height:auto;margin-top:calc(clamp(180px,24vw,380px)*-.5);fill:none;stroke:rgba(var(--navy-rgb),.16);stroke-width:1.2;rotate:-8deg;will-change:transform}
.cta-inner{position:relative;z-index:2;display:flex;flex-direction:column;align-items:center}
.cta-h2{margin-top:1.1rem;font-family:var(--display);font-weight:700;font-size:clamp(2.2rem,4.3vw,4.2rem);line-height:1;letter-spacing:-.024em;color:var(--navy)}
.cta-h2 .hl-in{margin-inline:auto}
.cta-word{color:var(--blue)}
.cta-lead{margin-top:1.3rem;max-width:54ch;font-size:clamp(1.05rem,1.3vw,1.2rem);color:rgba(var(--navy-rgb),.88)}
.cta-btns{display:flex;flex-wrap:wrap;justify-content:center;gap:.9rem;margin-top:2.1rem}
.cta-facts{display:flex;flex-wrap:wrap;justify-content:center;gap:.6rem;margin-top:1.6rem}
.cta .chip{background:rgba(var(--white-rgb),.55);border-color:rgba(var(--navy-rgb),.2)}
@media (max-width:760px){.cta-star{right:-70px;top:auto;bottom:-30px;margin-top:0;opacity:.7}.cta-btns .btn{width:100%;max-width:340px}}

/* ---------- FOOTER ⑥ (navy) ---------- */
.site-footer{position:relative;background:var(--navy);color:rgba(var(--white-rgb),.8);overflow:clip}
.site-footer::before{content:"";position:absolute;inset:0;pointer-events:none;background-image:radial-gradient(circle,rgba(var(--cyan-rgb),.16) 1.6px,transparent 2.2px);background-size:34px 34px;-webkit-mask-image:linear-gradient(200deg,#000 0%,transparent 38%);mask-image:linear-gradient(200deg,#000 0%,transparent 38%)}
.ft-grid{position:relative;display:grid;grid-template-columns:1.5fr 1fr 1.15fr 1.35fr;gap:clamp(1.6rem,3.4vw,3.6rem);padding-block:clamp(3.6rem,5.4vw,5.4rem) clamp(2.2rem,3vw,3rem)}
.ft-logo{display:inline-block}
.ft-logo img{width:178px;height:auto}
.ft-line{margin-top:1.1rem;max-width:36ch;font-size:.98rem;line-height:1.55}
.ft-h{font-family:var(--body);font-weight:700;font-size:.76rem;letter-spacing:.16em;text-transform:uppercase;color:var(--cyan);margin-bottom:1.05rem}
.ft-list{display:grid;gap:.62rem;font-size:.98rem}
.ft-list a{color:rgba(var(--white-rgb),.82);background:linear-gradient(var(--cyan),var(--cyan)) 0 100%/0 1.5px no-repeat;padding-bottom:2px;transition:color .25s,background-size .3s var(--ease)}
.ft-list a:hover{color:var(--white);background-size:100% 1.5px}
.ft-social{display:flex;gap:.6rem;margin-top:1.15rem}
.ft-social a{display:grid;place-items:center;width:44px;height:44px;border-radius:50%;border:1.5px solid rgba(var(--white-rgb),.3);color:var(--white);transition:background-color .25s,color .25s,border-color .25s}
.ft-social a:hover{background:var(--cyan);border-color:var(--cyan);color:var(--navy)}
.ft-social svg{width:19px;height:19px;fill:currentColor}
.ft-hair{position:relative;height:1px;background:rgba(var(--white-rgb),.16);max-width:var(--wrap);margin-inline:auto;width:calc(100% - var(--gut)*2);padding:0}
.ft-mark-wrap{position:relative;height:min(10vw,176px);overflow:hidden;text-align:center}
.ft-mark-rise{display:block;will-change:transform}
.ft-mark{display:block;font-family:var(--display);font-weight:800;font-size:min(18vw,320px);line-height:.86;letter-spacing:-.03em;white-space:nowrap;color:var(--navy);paint-order:stroke fill;-webkit-text-stroke:3px rgba(var(--cyan-rgb),.3);user-select:none;pointer-events:none}
.ft-legal-band{position:relative;z-index:2;background:var(--navy);border-top:1px solid rgba(var(--white-rgb),.14)}
.ft-legal{display:flex;flex-wrap:wrap;justify-content:space-between;gap:.5rem 2rem;padding-block:1.15rem;font-size:.86rem;color:rgba(var(--white-rgb),.74)}
@media (max-width:1000px){.ft-grid{grid-template-columns:1fr 1fr}}
@media (max-width:560px){.ft-grid{grid-template-columns:1fr;gap:2.2rem}.ft-mark-wrap{height:15vw}}

@media (prefers-reduced-motion:reduce){
  *,*::before,*::after{animation-duration:.01ms!important;animation-iteration-count:1!important;scroll-behavior:auto!important}
}

/* ================= AJUSTES 2026-11-13 · NAV «boyas» (pedido del dueño: otro diseño, sin barra azul al bajar) =================
   Three white islands that float on the water: logo, links (real centre), language + call. They never become a
   full-width bar: on scroll the same islands go fixed, tighten and take a deeper shadow. Logo = the horizontal one. */
.site-nav{color:var(--navy)}
.site-nav.is-stuck{height:78px;background:transparent;box-shadow:none}
.nav-logo{display:flex;align-items:center;padding:7px 14px 7px 10px;border-radius:20px;background:rgba(var(--white-rgb),.95);box-shadow:0 10px 26px rgba(var(--navy-rgb),.12),0 0 0 1px rgba(var(--navy-rgb),.05);transition:padding .3s var(--ease),box-shadow .3s}
.nav-logo img{height:54px;width:auto}
.is-stuck .nav-logo{padding:5px 12px 5px 8px}
.is-stuck .nav-logo img{height:46px}
.nav-links{gap:clamp(.4rem,1vw,.9rem);padding:.3rem clamp(.8rem,1.4vw,1.3rem);border-radius:999px;background:rgba(var(--white-rgb),.95);box-shadow:0 10px 26px rgba(var(--navy-rgb),.12),0 0 0 1px rgba(var(--navy-rgb),.05),inset 0 -2px 0 rgba(var(--cyan-rgb),.85);transition:box-shadow .3s}
.nav-link{padding:.55rem .7rem .7rem;color:var(--navy);text-shadow:none;transition:color .2s}
.nav-link:hover,.nav-link.is-active{color:var(--blue)}
.is-stuck .nav-logo,.is-stuck .nav-links,.is-stuck .lang-pill,.is-stuck .nav-cta{box-shadow:0 16px 38px rgba(var(--navy-rgb),.18),0 0 0 1px rgba(var(--navy-rgb),.06)}
.is-stuck .nav-links{box-shadow:0 16px 38px rgba(var(--navy-rgb),.18),0 0 0 1px rgba(var(--navy-rgb),.06),inset 0 -2px 0 rgba(var(--cyan-rgb),.85)}
.lang-pill{border:0;background:rgba(var(--white-rgb),.95);box-shadow:0 10px 26px rgba(var(--navy-rgb),.12),0 0 0 1px rgba(var(--navy-rgb),.05)}
.lang-pill a{color:var(--navy)}
.nav-cta{height:48px;box-shadow:0 10px 26px rgba(var(--cyan-rgb),.45),0 0 0 3px rgba(var(--white-rgb),.9);transition:background-color .25s,color .25s}
.nav-cta:hover{background:var(--navy);color:var(--white)}
.nav-burger{border:0;background:var(--white);box-shadow:0 10px 26px rgba(var(--navy-rgb),.14),0 0 0 1px rgba(var(--navy-rgb),.06)}
.nav-burger span{background:var(--navy)}
.menu-open .site-nav{background:transparent}
/* mobile menu: bright water, navy type */
.mobile-menu{background:linear-gradient(180deg,var(--white) 0%,var(--aqua) 100%)}
.mobile-menu::before{background-image:radial-gradient(circle,rgba(var(--blue-rgb),.16) 1.6px,transparent 2.2px)}
.mm-link{color:var(--navy)}
.mm-link.is-active{color:var(--blue)}
.mm-foot{border-top-color:rgba(var(--navy-rgb),.14)}
.mm-lang{border-color:rgba(var(--navy-rgb),.3)}
.mm-lang a{color:var(--navy)}
@media (max-width:760px){
  .nav-logo{padding:5px 10px 5px 7px;border-radius:16px}
  .nav-logo img{height:44px}.is-stuck .nav-logo img{height:40px}
  .site-nav.is-stuck{height:68px}
}
/* interior banners: lighter navy veil so the photo breathes (same complaint: «esa sombra azul es muy dominante») */
.banner-scrim{background:linear-gradient(90deg,rgba(var(--navy-rgb),.8) 0%,rgba(var(--navy-rgb),.52) 36%,rgba(var(--navy-rgb),.06) 74%,rgba(var(--navy-rgb),0) 100%),linear-gradient(180deg,rgba(var(--navy-rgb),.22) 0%,rgba(var(--navy-rgb),0) 30%)}
@media (max-width:760px){.banner-scrim{background:linear-gradient(90deg,rgba(var(--navy-rgb),.82) 0%,rgba(var(--navy-rgb),.6) 60%,rgba(var(--navy-rgb),.3) 100%),linear-gradient(180deg,rgba(var(--navy-rgb),.24) 0%,rgba(var(--navy-rgb),0) 30%)}}

/* ================= AJUSTES r3 2026-11-14 · banners interiores =================
   Pedido: «estaba bien como estaba antes a la izquierda; el degradado de arriba a abajo, con un azul más claro y muy ligero, no tan pesado».
   Se deshace el espejo de r2 (texto vuelve a la izquierda, sin multiply). Velo = lavado celeste vertical que se desvanece hacia abajo;
   la foto queda luminosa. Contraste del titular: sombra por glifo + un halo azul suave SOLO detrás del bloque de texto (abajo-izquierda). */
.banner-media{object-position:60% 50%;filter:saturate(1.06) brightness(1.03)}
.banner-scrim{mix-blend-mode:normal;background:
  radial-gradient(ellipse 52% 62% at 14% 80%,rgba(var(--blue-rgb),.5) 0%,rgba(var(--blue-rgb),.3) 42%,rgba(var(--blue-rgb),0) 100%),
  linear-gradient(180deg,rgba(var(--cyan-rgb),.32) 0%,rgba(var(--cyan-rgb),.16) 34%,rgba(var(--aqua-rgb),.06) 62%,rgba(var(--aqua-rgb),0) 100%)}
.banner .ghost{color:rgba(var(--white-rgb),.07);-webkit-text-stroke:0}
.banner-h1{text-shadow:0 1px 1px rgba(1,30,80,.75),0 2px 6px rgba(1,30,80,.55),0 6px 18px rgba(1,30,80,.4),0 12px 36px rgba(1,30,80,.3)}
.banner-crumb ol{background:rgba(var(--navy-rgb),.5);-webkit-backdrop-filter:blur(6px);backdrop-filter:blur(6px)}
@media (max-width:760px){
  .banner-media{object-position:68% 50%}
  .banner-scrim{background:
    radial-gradient(ellipse 100% 50% at 22% 60%,rgba(var(--blue-rgb),.6) 0%,rgba(var(--blue-rgb),.36) 48%,rgba(var(--blue-rgb),0) 100%),
    linear-gradient(180deg,rgba(var(--cyan-rgb),.32) 0%,rgba(var(--cyan-rgb),.14) 40%,rgba(var(--aqua-rgb),0) 100%)}
  .banner .ghost{right:-1rem}
}

/* ================= AJUSTES r5 2026-11-14 · nav como la referencia del dueño =================
   Logo without the white box and bigger (white wordmark version for dark surfaces), links on a dark glass
   panel, language pill white, cyan «Get a free quote». When the nav sticks over light sections every island
   keeps a dark glass so the white wordmark always reads. */
.nav-logo{padding:0;border-radius:14px;background:transparent;box-shadow:none;filter:drop-shadow(0 2px 10px rgba(2,10,30,.35))}
.nav-logo img{height:76px}
.is-stuck .nav-logo{padding:5px 12px 5px 8px;background:rgba(6,18,46,.82);-webkit-backdrop-filter:blur(12px);backdrop-filter:blur(12px);box-shadow:0 12px 30px rgba(2,10,30,.25);filter:none}
.is-stuck .nav-logo img{height:52px}
.nav-links{background:rgba(10,26,66,.55);-webkit-backdrop-filter:blur(12px) saturate(1.2);backdrop-filter:blur(12px) saturate(1.2);border-radius:6px;box-shadow:0 0 0 1px rgba(var(--white-rgb),.08);padding:.45rem clamp(1rem,1.8vw,1.8rem)}
.nav-link{color:var(--white);font-size:1.05rem}
.nav-link:hover,.nav-link.is-active{color:var(--white)}
.nav-link .nav-wave{color:var(--cyan);stroke:var(--cyan)}
.is-stuck .nav-links{background:rgba(6,18,46,.86);box-shadow:0 14px 34px rgba(2,10,30,.25),0 0 0 1px rgba(var(--white-rgb),.08)}
.nav-cta{gap:.45rem;padding:0 1.4rem;box-shadow:0 8px 22px rgba(var(--cyan-rgb),.35)}
.nav-cta svg{width:16px;height:16px;transform:rotate(-45deg)}
.nav-cta:hover{background:var(--white);color:var(--navy)}
@media (max-width:1180px){.nav-cta span{display:inline}.nav-cta{width:auto;padding:0 1.1rem}.nav-cta svg{display:none}}
.menu-open .nav-logo{padding:5px 12px 5px 8px;background:var(--navy)}
@media (max-width:760px){
  .nav-logo{padding:0}
  .nav-logo img{height:58px}
  .is-stuck .nav-logo,.menu-open .nav-logo{padding:4px 10px 4px 7px}
  .is-stuck .nav-logo img{height:44px}
}

/* ================= EQUIPOS 2026-11-14 · Windows y Mac iguales =================
   Dueño: «en el pc Windows no se ve igual de bien que en la Mac… los textos pegados a las paredes de los lados».
   Un portátil Windows (125-150 %) deja 1280-1536 px de ancho y 600-730 de alto: margen lateral proporcional y nunca
   menor a 24 px. */
:root{--gut:clamp(24px,6vw,96px)}
@media (max-width:760px){:root{--gut:clamp(18px,5vw,28px)}}

/* ================= AJUSTES r6 2026-11-13 · menú sin cristal =================
   Owner: «quita ese fondo de cristal detrás del menú; arriba, una sombra ligera en toda la parte superior para que
   se lea el texto; y al quedar fijo, la barra de antes». Top of the page: links sit straight on the photo over a soft
   dark fade that spans the full width. Stuck: the original full-width navy bar, no islands, no blur. */
.site-nav::before{content:"";position:absolute;left:0;right:0;top:0;height:calc(100% + clamp(40px,7vh,90px));z-index:-1;pointer-events:none;
  background:linear-gradient(180deg,rgba(2,12,34,.58) 0%,rgba(2,12,34,.34) 45%,rgba(2,12,34,.12) 75%,rgba(2,12,34,0) 100%);transition:opacity .3s}
.site-nav.is-stuck::before,.menu-open .site-nav::before{opacity:0}
.nav-links,.is-stuck .nav-links{background:transparent;-webkit-backdrop-filter:none;backdrop-filter:none;box-shadow:none;border-radius:0}
.nav-link{text-shadow:0 1px 2px rgba(2,10,30,.55),0 2px 12px rgba(2,10,30,.35)}
.site-nav.is-stuck{height:80px;background:var(--navy);box-shadow:0 1px 0 rgba(var(--cyan-rgb),.25),0 12px 30px rgba(var(--navy-rgb),.28)}
.is-stuck .nav-logo{padding:0;background:transparent;-webkit-backdrop-filter:none;backdrop-filter:none;box-shadow:none;filter:none}
.is-stuck .nav-logo img{height:56px}
.is-stuck .nav-link{text-shadow:none}
.is-stuck .lang-pill,.is-stuck .nav-cta{box-shadow:none}
.menu-open .site-nav{background:transparent;box-shadow:none}
@media (max-width:760px){
  .site-nav.is-stuck{height:68px}
  .is-stuck .nav-logo,.menu-open .nav-logo{padding:0}
  .is-stuck .nav-logo img{height:46px}
  .menu-open .nav-logo{padding:4px 10px 4px 7px}
}

/* ================= AJUSTES r7 2026-11-13 =================
   1 Interior banners: «un degradado más fácil de arriba a abajo, azulito oscuro, que no se note tanto, y solo un poco por arriba».
     No side veil, no halo: one soft navy fade at the top that is gone by ~30 % of the height. The title keeps its glyph shadow.
   2 CTA: the top crest is cut out of the block itself (mask), so the moving caustics show inside the wave, like the bottom edge
     of the bands. The flat cyan svg crest is gone from the 10 pages.
   5 Footer: the outlined «Blue Star» wordmark is removed from the 10 pages. */
.banner-media{filter:none}
.banner-scrim,
.banner-scrim[class]{mix-blend-mode:normal;background:linear-gradient(180deg,rgba(2,22,64,.5) 0%,rgba(2,22,64,.26) 12%,rgba(2,22,64,.08) 24%,rgba(2,22,64,0) 32%)}
@media (max-width:760px){.banner-scrim,.banner-scrim[class]{background:linear-gradient(180deg,rgba(2,22,64,.5) 0%,rgba(2,22,64,.26) 14%,rgba(2,22,64,.08) 28%,rgba(2,22,64,0) 38%)}}
.banner-h1{text-shadow:0 1px 2px rgba(1,30,80,.7),0 3px 10px rgba(1,30,80,.5),0 10px 30px rgba(1,30,80,.35)}
:root{--wave-mask:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 1440 80' preserveAspectRatio='none'%3E%3Cpath d='M0 40C120 10 240 10 360 40S600 70 720 40 960 10 1080 40 1320 70 1440 40V80H0Z'/%3E%3C/svg%3E")}
.cta{margin-top:calc(var(--wave-h)*-1 + 1px);padding-top:calc(clamp(4.2rem,6.4vw,6.6rem) + var(--wave-h));
  -webkit-mask:var(--wave-mask) 0 0/100% var(--wave-h) no-repeat,linear-gradient(#000,#000) 0 calc(var(--wave-h) - 1px)/100% 100% no-repeat;
          mask:var(--wave-mask) 0 0/100% var(--wave-h) no-repeat,linear-gradient(#000,#000) 0 calc(var(--wave-h) - 1px)/100% 100% no-repeat}
.cta-wave,.ft-mark-wrap{display:none}
.ft-hair{margin-bottom:clamp(1.6rem,3vw,2.6rem)}

/* EQUIPOS 2026-11-14 (c) · el menú en la MISMA columna que el contenido: el logo empieza donde empieza el texto
   en cualquier ancho (antes: logo a 96 px y texto a 140 px en 1600, a 300 px en 1920). */
.site-nav{padding-inline:max(var(--gut),calc((100% - var(--wrap)) / 2))}

/* ===== AJUSTES r8 · CTA title fits 360px phones (ES «¿Necesitas alguno?» touched the edge) ===== */
@media (max-width:400px){.cta-h2{font-size:clamp(1.75rem,8.2vw,2.2rem)}}

/* ================= EQUIPOS 2026-11-14 (d) · menú PROPORCIONAL (igual en Windows que en Mac) =================
   Dueño: «en Windows todavía no se ve igual que en la Mac… el logo no toca el árbol en Windows, en la Mac está encima».
   Referencia: la Mac del dueño (1440×724 útiles). En escritorio todo se mide con --u = el menor entre ancho/1440 y
   alto/724, así el menú es la misma foto escalada en cualquier pantalla. */
@media (min-width:1081px){
  :root{--u:min(calc(100vw / 1440),calc(100vh / 724));--hero-x:calc(var(--u) * 86.4)}
  .site-nav{height:calc(var(--u) * 92);padding-inline:var(--hero-x)}
  .nav-logo,.nav-logo img{height:calc(var(--u) * 76);width:auto}
  .nav-link{font-size:calc(var(--u) * 16.8);padding:calc(var(--u) * 8.8) calc(var(--u) * 11.2) calc(var(--u) * 11.2)}
  .nav-cta{height:calc(var(--u) * 48);font-size:calc(var(--u) * 15.2);padding-inline:calc(var(--u) * 22.4)}
}