@font-face{font-family:"Plus Jakarta Sans";font-style:normal;font-weight:400 800;font-display:swap;src:url(fonts/plus-jakarta-sans-latin.woff2) format("woff2")}
:root{--on-pri:#fff;--bg:#fff;--card:#fff;--ink:#1d3a52;--mut:#42617a;--pri:#0b5fb0;--pri2:#08467f;--acc:#f5b82e;--line:#dde9f2;--hero:#eaf5fc;--navy:#0b2e4f;--sky:#eaf5fc;--sky2:#f5fafd;--on-acc:#3a2600}


html{scroll-padding-top:env(safe-area-inset-top,0px);scroll-behavior:smooth}
*{box-sizing:border-box}
body{margin:0;background:var(--bg);color:var(--ink);font:16px/1.55 system-ui,-apple-system,"Segoe UI",Roboto,sans-serif}
.w{max-width:1080px;margin:0 auto;padding:0 20px}
header{position:sticky;top:env(safe-area-inset-top,0px);background:var(--card);border-bottom:1px solid var(--line);z-index:5}
header .w{display:flex;align-items:center;gap:16px;height:78px}
.logo{font-weight:800;color:var(--pri);letter-spacing:.2px}
nav{display:flex;gap:16px;margin-left:auto;font-size:14px;overflow-x:auto}
nav a{color:var(--ink);text-decoration:none;white-space:nowrap}
.lang{display:flex;gap:4px}.lang button{padding:6px 10px;border:1px solid var(--line);background:var(--card);color:var(--ink);border-radius:6px;cursor:pointer;font-size:13px;font-weight:700}.lang button.on{background:var(--pri);color:#fff;border-color:var(--pri)}
.btn{display:inline-block;padding:12px 20px;border-radius:8px;font-weight:700;text-decoration:none;border:2px solid var(--pri);color:var(--pri);background:transparent;cursor:pointer;font-size:15px}
.btn.p{background:var(--acc);border-color:var(--acc);color:#1b2a30}
.hero{background:linear-gradient(135deg,var(--hero),#08788d);color:#fff;padding:64px 0}
.hero h1{font-size:clamp(30px,6vw,52px);line-height:1.1;margin:0 0 14px}
.hero p{max-width:600px;font-size:18px;opacity:.92}
.hero .btn{color:#fff;border-color:#fff}.hero .btn.p{color:#1b2a30;border-color:var(--acc)}
.hero .row{display:flex;gap:12px;flex-wrap:wrap;margin-top:24px}
.strip{background:var(--card);border-bottom:1px solid var(--line)}
.strip .w{display:grid;grid-template-columns:repeat(auto-fit,minmax(170px,1fr));gap:12px;padding:20px;text-align:center}
.strip b{display:block;font-size:22px;color:var(--pri)}.strip span{font-size:13px;color:var(--mut)}
section{padding:52px 0}
h2{font-size:clamp(24px,4vw,34px);margin:0 0 8px}
.sub{color:var(--mut);margin:0 0 28px;max-width:640px}
.grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(260px,1fr));gap:18px}
.card{background:var(--card);border:1px solid var(--line);border-radius:12px;padding:22px}
.card h3{margin:8px 0}.card p{color:var(--mut);margin:0 0 12px}
.tag{font-size:12px;font-weight:700;color:var(--pri);text-transform:uppercase;letter-spacing:.6px}
.star{border-color:var(--pri);box-shadow:0 0 0 2px var(--pri) inset}
.pick{display:flex;flex-wrap:wrap;gap:10px;margin-bottom:16px}
.pick button{padding:10px 16px;border-radius:999px;border:1px solid var(--line);background:var(--card);color:var(--ink);cursor:pointer;font-size:14px}
.pick button.on{background:var(--pri);color:#fff;border-color:var(--pri)}
#res{min-height:64px}






.steps{counter-reset:s}.steps .card::before{counter-increment:s;content:counter(s);display:grid;place-items:center;width:34px;height:34px;border-radius:50%;background:var(--pri);color:#fff;font-weight:800}
.dist{background:var(--hero);color:#fff;border-radius:14px;padding:36px}
.dist p{opacity:.9;max-width:620px}
form{display:grid;gap:12px;max-width:520px}
input[type=text],input[type=email],select,textarea{width:100%;padding:12px;border-radius:8px;border:1px solid var(--line);background:var(--card);color:var(--ink);font:inherit}
footer{border-top:1px solid var(--line);padding:24px 0;font-size:13px;color:var(--mut)}
.wa{position:fixed;right:16px;bottom:calc(16px + env(safe-area-inset-bottom,0px));background:#25d366;color:#fff;padding:14px 18px;border-radius:999px;font-weight:700;text-decoration:none;box-shadow:0 4px 14px rgba(0,0,0,.25);z-index:6}
.note{font-size:12px;color:var(--mut);margin-top:10px}
.hero{position:relative;overflow:hidden;background-size:200% 200%;animation:drift 18s ease-in-out infinite alternate}
.hero>.w{position:relative;z-index:1}
.fx{position:absolute;inset:0;pointer-events:none}
.fx i{position:absolute;bottom:-40px;left:var(--x);width:var(--s);height:var(--s);border-radius:50%;background:rgba(255,255,255,.12);border:1px solid rgba(255,255,255,.18);animation:rise var(--d) linear infinite;animation-delay:var(--l)}
.wave{position:absolute;left:0;bottom:0;width:200%;height:70px;animation:slide var(--d) linear infinite}
.wave.b{height:55px;opacity:.6;animation-direction:reverse}
.wave path{fill:rgba(255,255,255,.08)}
@keyframes drift{from{background-position:0% 50%}to{background-position:100% 50%}}
@keyframes rise{0%{transform:translateY(0) scale(.8);opacity:0}15%{opacity:1}100%{transform:translateY(-420px) scale(1.1);opacity:0}}
@keyframes slide{to{transform:translateX(-50%)}}
@media(prefers-reduced-motion:reduce){.hero,.fx i,.wave{animation:none}}
.pi{display:block;width:100%;height:130px;object-fit:contain;background:#fff;border-radius:8px;margin-bottom:10px}
.ban{display:grid;place-items:center;background:linear-gradient(135deg,#0b3a47,#08788d);color:#fff;font-weight:900;font-size:26px;letter-spacing:1px}
.chips{display:flex;flex-wrap:wrap;gap:8px}.chips span{padding:8px 14px;border:1px solid var(--line);border-radius:999px;background:var(--bg);font-size:14px}
.pair{display:grid;grid-template-columns:1fr 1fr;gap:6px}.pair figure{margin:0;position:relative}.pair img{display:block;width:100%;height:150px;object-fit:cover;border-radius:8px}
.pair figcaption{position:absolute;left:6px;bottom:6px;background:rgba(0,0,0,.65);color:#fff;font-size:12px;font-weight:700;padding:2px 8px;border-radius:4px}
.cap{margin:8px 0 0;font-weight:700}.note a{color:var(--pri)}
.two{display:grid;grid-template-columns:repeat(auto-fit,minmax(280px,1fr));gap:28px;align-items:center}
.wide{display:block;width:100%;height:auto;border-radius:12px}
.tiles{display:grid;grid-template-columns:repeat(auto-fit,minmax(170px,1fr));gap:12px}.tile img{display:block;width:100%;height:120px;object-fit:cover;border-radius:8px}.tile p{margin:6px 0 0;font-weight:700;font-size:14px}
.logos{display:flex;flex-wrap:wrap;gap:12px}.logos div{background:#fff;border:1px solid var(--line);border-radius:10px;padding:10px 14px;display:grid;place-items:center;width:150px;height:70px}.logos img{max-width:100%;max-height:46px;object-fit:contain}
.ty [data-l]{display:none}html[lang=es] .ty [data-l=es],html[lang=en] .ty [data-l=en]{display:inline}.ty{border-color:var(--pri)}.ph{margin:0}.ph img{display:block;width:100%;height:210px;object-fit:cover;border-radius:10px}.ph figcaption{margin-top:6px;font-weight:700;font-size:14px}.ph.tall img{height:300px}.eq{font-size:22px;font-weight:700;text-align:center;padding:14px;border:1px solid var(--line);border-radius:10px;background:var(--bg)}.logo{font-size:18px;line-height:1.15;flex-shrink:0;display:flex;align-items:center}.logo img{height:56px;width:auto;margin-right:10px;border-radius:8px}.flogo{display:block;height:96px;width:auto;max-width:100%;border-radius:10px;margin-bottom:12px}@media(max-width:600px){header .w{height:66px;gap:10px}.logo{font-size:11px;width:160px}.logo img{height:40px;margin-right:6px}}.mb{display:none;margin-left:auto;background:var(--card);border:1px solid var(--line);color:var(--ink);border-radius:8px;width:42px;height:42px;font-size:20px;cursor:pointer}
header .w{max-width:1640px}header nav{gap:10px;font-size:14px}header nav a{white-space:nowrap}
header nav a.fb{background:#1877f2;color:#fff;padding:7px 14px;border-radius:999px;font-weight:700}
header nav a.yt{background:#ff0033;color:#fff;padding:7px 14px;border-radius:999px;font-weight:700}
@media(max-width:1279px){.mb{display:block}header nav{display:none;position:absolute;top:100%;left:0;right:0;flex-direction:column;align-items:stretch;gap:0;margin:0;background:var(--card);border-bottom:1px solid var(--line);padding:6px 20px 18px;box-shadow:0 18px 30px rgba(0,0,0,.14);max-height:calc(100vh - 90px);overflow-y:auto}header nav.open{display:flex}header nav a{padding:13px 4px;border-bottom:1px solid var(--line);font-size:16px}header nav a.yt,header nav a.fb{margin-top:12px;text-align:center;border-bottom:0;padding:12px}header nav a.fb{margin-top:8px}}
.card{transition:transform .2s ease-out,box-shadow .3s,border-color .3s;transform:perspective(1000px) rotateX(var(--rx,0deg)) rotateY(var(--ry,0deg)) translateY(var(--ty,0px))}.card:hover{--ty:-4px}
.vf{position:relative;aspect-ratio:16/9;border-radius:18px;overflow:hidden;cursor:pointer;background:radial-gradient(circle at 25% 15%,#0fa3bd,#0b3a47 55%,#061f27);display:grid;place-items:center;color:#fff;border:1px solid rgba(255,255,255,.18);box-shadow:0 24px 60px rgba(6,58,71,.35);transition:transform .3s}
.vf:hover{transform:translateY(-3px)}.vf .fx{z-index:0}
.vf .pl{position:relative;z-index:2;width:84px;height:84px;border-radius:50%;background:#ff0033;display:grid;place-items:center;font-size:30px;padding-left:5px;box-shadow:0 0 0 10px rgba(255,0,51,.28);animation:pulse 2.4s infinite}
.vf .vt{position:absolute;z-index:2;left:20px;right:20px;bottom:16px;font-weight:700;text-shadow:0 2px 8px rgba(0,0,0,.4)}
.vf .vl{position:absolute;z-index:2;top:16px;left:18px;font-weight:800;letter-spacing:.5px;font-size:13px;background:rgba(0,0,0,.35);padding:6px 12px;border-radius:999px}
.vf iframe{position:absolute;inset:0;width:100%;height:100%;border:0;z-index:3}
@keyframes pulse{50%{box-shadow:0 0 0 20px rgba(255,0,51,0)}}
.btn.yt{background:#ff0033;border-color:#ff0033;color:#fff}.ytl{color:var(--pri);font-weight:700}
.btn.fb{background:#1877f2;border-color:#1877f2;color:#fff}.fbf{min-height:360px;border-radius:18px;overflow:hidden;background:linear-gradient(140deg,#1877f2,#0b3a47);color:#fff;display:grid;place-items:center;text-align:center;padding:24px;cursor:pointer;position:relative}.fbf iframe{position:absolute;inset:0;width:100%;height:100%;border:0;background:#fff}.fbf b{font-size:56px;display:block;line-height:1}
.soc{display:flex;gap:10px;align-items:center}.soc a{width:40px;height:40px;border-radius:50%;display:grid!important;place-items:center;padding:0!important;border:0!important;margin:0!important;transition:transform .2s}.soc a:hover{transform:scale(1.12)}.soc svg{width:22px;height:22px;fill:#fff}.soc .yt{background:#ff0033}.soc .fb{background:#1877f2}header nav .soc{margin-left:6px}.soc.foot{margin:10px 0 6px}@media(max-width:1279px){header nav .soc{margin:14px 0 0 4px}}
footer a.cl{color:inherit;text-decoration:underline;text-underline-offset:3px;font-weight:600;white-space:nowrap}footer a.cl:hover{color:var(--pri)}.soc .nd{background:#00b246}.btn.nd{background:#00b246;border-color:#00b246;color:#fff}
.band{border-radius:20px;padding:44px 36px;background:linear-gradient(120deg,#0b3a47,#08788d 62%,#ff0033);color:#fff;display:grid;gap:16px;justify-items:start}.band h2{margin:0}.band p{margin:0;max-width:560px;opacity:.92}
.js .rv{opacity:0;translate:0 28px;transition:opacity .8s var(--rd,0s),translate .8s cubic-bezier(.2,.8,.2,1) var(--rd,0s),transform .2s ease-out,box-shadow .3s,border-color .3s}.js .rv.in{opacity:1;translate:none}
@media(prefers-reduced-motion:reduce){.vf .pl{animation:none}.js .rv{opacity:1;translate:none;transition:none}}

header nav a{position:relative;transition:color .25s,transform .25s,background .25s}
.rp{position:absolute;border-radius:50%;background:currentColor;opacity:.28;transform:scale(0);pointer-events:none;animation:rp .6s ease-out forwards}
@keyframes rp{to{transform:scale(1);opacity:0}}
.btn{position:relative;overflow:hidden;transition:transform .2s,box-shadow .25s,background .25s}.btn:hover{transform:translateY(-2px);box-shadow:0 8px 20px rgba(10,60,80,.22)}.btn:active{transform:scale(.96)}
.logo{transition:transform .3s}.logo:hover{transform:scale(1.04)}
.lang button{transition:transform .2s,background .2s}.lang button:hover{transform:translateY(-2px)}.lang button:active{transform:scale(.9)}
.mb{transition:transform .35s,background .2s,box-shadow .2s}.mb:hover{box-shadow:0 4px 12px rgba(10,60,80,.2)}.mb:active{transform:scale(.88)}.mb.open{transform:rotate(180deg)}
@media(min-width:1280px){header nav a:not(.on):hover{color:var(--pri);transform:translateY(-2px)}header nav>a{padding:8px 3px;overflow:hidden;flex-shrink:0}
header nav>a::after{content:"";position:absolute;left:0;right:0;bottom:0;height:3px;border-radius:3px;background:linear-gradient(90deg,#0fa3bd,#f3b52f);transform:scaleX(0);transform-origin:right;transition:transform .35s cubic-bezier(.2,.8,.2,1)}
header nav>a:hover::after,header nav>a.on::after{transform:scaleX(1);transform-origin:left}header nav>a:active{transform:scale(.93)}header nav>a.on{color:var(--pri);font-weight:700}}
@media(max-width:1279px){header nav.open{animation:dd .3s ease-out}@keyframes dd{from{opacity:0;transform:translateY(-12px)}}
header nav.open>a{animation:it .4s both;transition:padding .25s,color .25s,background .25s}header nav.open>a:nth-child(1){animation-delay:.03s}header nav.open>a:nth-child(2){animation-delay:.06s}header nav.open>a:nth-child(3){animation-delay:.09s}header nav.open>a:nth-child(4){animation-delay:.12s}header nav.open>a:nth-child(5){animation-delay:.15s}header nav.open>a:nth-child(6){animation-delay:.18s}header nav.open>a:nth-child(7){animation-delay:.21s}header nav.open>a:nth-child(8){animation-delay:.24s}header nav.open>a:nth-child(9){animation-delay:.27s}
@keyframes it{from{opacity:0;transform:translateX(-18px)}}
header nav>a{overflow:hidden}header nav>a:hover{padding-left:16px;color:var(--pri);background:linear-gradient(90deg,rgba(15,163,189,.14),transparent)}header nav>a::before{content:"";position:absolute;left:0;top:20%;bottom:20%;width:4px;border-radius:4px;background:var(--pri);transform:scaleY(0);transition:transform .25s}header nav>a:hover::before,header nav>a.on::before{transform:scaleY(1)}header nav>a.on{color:var(--pri);font-weight:700;padding-left:16px}header nav>a:active{background:rgba(15,163,189,.25)}}
@media(prefers-reduced-motion:reduce){header nav.open,header nav.open>a,.rp{animation:none}.btn:hover,.logo:hover{transform:none}}
@media(max-width:600px){figcaption{font-size:13px!important}.lang button{min-height:40px;min-width:42px;font-size:13px}.note,.note *,figcaption,.pair figcaption,.cap,.pair span,.tile small{font-size:13px!important}.note a,footer a:not(.soc a){display:inline-block;padding:10px 0}footer{padding-bottom:96px}.wa{bottom:calc(14px + env(safe-area-inset-bottom))}.band{padding:30px 22px}.btn{min-height:46px}input,textarea{font-size:16px}}

/*modern*/
:root{--r:18px;--sh:0 1px 2px rgba(10,50,65,.06),0 10px 30px rgba(10,50,65,.08);--sh2:0 2px 4px rgba(10,50,65,.06),0 22px 48px rgba(10,50,65,.16)}
body{font-family:Inter,system-ui,-apple-system,"Segoe UI",Roboto,sans-serif;-webkit-font-smoothing:antialiased;animation:pgin .6s ease both}
@keyframes pgin{from{opacity:0}}
h1,h2,h3{letter-spacing:-.02em}h2{font-weight:800;position:relative}
h2::after{content:"";display:block;width:56px;height:4px;border-radius:4px;margin-top:12px;background:linear-gradient(90deg,var(--pri),var(--acc))}
.js h2.rv::after{width:0;transition:width .9s .25s cubic-bezier(.2,.8,.2,1)}.js h2.rv.in::after{width:56px}
.band h2::after,.dist h2::after,.hero h1::after{display:none}
section{padding:76px 0}@media(max-width:600px){section{padding:54px 0}}
::selection{background:var(--pri);color:#fff}
:focus-visible{outline:3px solid var(--acc);outline-offset:3px;border-radius:6px}
header{background:color-mix(in srgb,var(--card) 80%,transparent);-webkit-backdrop-filter:blur(16px) saturate(1.5);backdrop-filter:blur(16px) saturate(1.5);border-bottom-color:color-mix(in srgb,var(--line) 70%,transparent);transition:box-shadow .3s}
header .w{transition:height .3s}header .logo img{transition:height .3s}
header.sc{box-shadow:0 10px 34px rgba(6,58,71,.14)}
@media(min-width:601px){header.sc .w{height:62px}header.sc .logo img{height:44px}}
.sp{position:fixed;top:0;left:0;height:3px;width:100%;transform-origin:left;transform:scaleX(0);background:linear-gradient(90deg,#0fa3bd,#f3b52f,#ff0033);z-index:30;pointer-events:none}
.hero{padding:88px 0 96px}
.hero::before{content:"";position:absolute;inset:-25%;z-index:0;pointer-events:none;background:radial-gradient(38% 38% at 18% 28%,rgba(60,192,216,.42),transparent 62%),radial-gradient(32% 32% at 82% 18%,rgba(242,182,50,.22),transparent 62%),radial-gradient(42% 42% at 72% 92%,rgba(15,163,189,.38),transparent 62%);filter:blur(24px);animation:blob 22s ease-in-out infinite alternate}
@keyframes blob{to{transform:translate3d(4%,3%,0) rotate(6deg) scale(1.08)}}
.hero h1{font-weight:800;letter-spacing:-.03em}
.hero .w>*{animation:up .9s cubic-bezier(.2,.8,.2,1) both}.hero .w>*:nth-child(2){animation-delay:.12s}.hero .w>*:nth-child(3){animation-delay:.24s}.hero .w>*:nth-child(4){animation-delay:.36s}
@keyframes up{from{opacity:0;transform:translateY(26px)}}
.strip{position:relative;z-index:2}.strip .w>div{transition:transform .3s}.strip .w>div:hover{transform:translateY(-3px)}
.card{border-radius:var(--r);box-shadow:var(--sh);border-color:color-mix(in srgb,var(--line) 75%,transparent)}
.card:hover{box-shadow:var(--sh2);border-color:color-mix(in srgb,var(--pri) 55%,var(--line))}
.card .pi{transition:transform .5s cubic-bezier(.2,.8,.2,1)}.card:hover .pi{transform:scale(1.05)}
.star{box-shadow:0 0 0 2px var(--pri) inset,var(--sh)}
.btn{border-radius:12px;padding:13px 22px;letter-spacing:.005em}
.btn::after{content:"";position:absolute;inset:0;background:linear-gradient(105deg,transparent 30%,rgba(255,255,255,.4) 50%,transparent 70%);transform:translateX(-130%);transition:transform .7s;pointer-events:none}
.btn:hover::after{transform:translateX(130%)}
.btn.p{background:linear-gradient(135deg,#f8c94a,#f0a71f);box-shadow:0 6px 18px rgba(240,167,31,.35)}
.chips span{transition:transform .25s,border-color .25s,color .25s,box-shadow .25s}.chips span:hover{transform:translateY(-2px);border-color:var(--pri);color:var(--pri);box-shadow:0 6px 14px rgba(10,50,65,.1)}
.ph,.tile,.pair figure{overflow:hidden;border-radius:12px}
.ph img,.tile img,.pair img,.wide{transition:transform .8s cubic-bezier(.2,.8,.2,1)}
.ph:hover img,.tile:hover img,.pair figure:hover img{transform:scale(1.05)}
.wide{box-shadow:var(--sh)}
input[type=text],input[type=email],select,textarea{border-radius:12px;transition:border-color .25s,box-shadow .25s}
input:focus,select:focus,textarea:focus{outline:none;border-color:var(--pri);box-shadow:0 0 0 4px color-mix(in srgb,var(--pri) 22%,transparent)}
.wa{animation:wp 3.2s ease-in-out infinite}
@keyframes wp{0%,100%{box-shadow:0 4px 14px rgba(0,0,0,.25),0 0 0 0 rgba(37,211,102,.5)}60%{box-shadow:0 4px 14px rgba(0,0,0,.25),0 0 0 14px rgba(37,211,102,0)}}
footer{background:color-mix(in srgb,var(--card) 60%,var(--bg))}
#productos .grid{grid-template-columns:repeat(auto-fit,minmax(235px,1fr))}
@media(prefers-reduced-motion:reduce){body,.hero::before,.hero .w>*,.wa{animation:none}.card{transform:none!important}.btn::after{display:none}.sp{display:none}}
.pp [data-l]{display:none}html[lang=es] .pp [data-l=es],html[lang=en] .pp [data-l=en]{display:block}.pp [data-l]{max-width:780px}.pp h2{font-size:20px;margin:26px 0 8px}.pp h2::after{display:none}.pp ul{padding-left:20px}.pp li{margin:6px 0}.pp a{color:var(--pri);font-weight:600}
/* Accessibility: WCAG AA contrast for brand colours, skip link */
.lang button.on,.pick button.on,.steps .card::before,::selection{color:var(--on-pri)}
.btn.yt,header nav a.yt,.soc .yt,.vf .pl{background:#e0002a}.btn.yt{border-color:#e0002a}
.band{background:linear-gradient(120deg,#0b3a47,#08788d 62%,#e0002a)}
.btn.fb,header nav a.fb,.soc .fb{background:#166fe5}.btn.fb{border-color:#166fe5}
.fbf{background:linear-gradient(140deg,#166fe5,#0b3a47)}
.btn.nd,.soc .nd{background:#007f36}.btn.nd{border-color:#007f36}
.wa{background:#0e7d40}
.skip{position:absolute;left:12px;top:-80px;z-index:50;background:var(--card);color:var(--ink);padding:10px 16px;border-radius:8px;border:2px solid var(--pri);font-weight:700}
.skip:focus{top:12px}
main:focus{outline:none}

.vgrp{margin-top:40px}.vh{display:flex;align-items:center;justify-content:space-between;gap:12px;flex-wrap:wrap;margin-bottom:16px}.vh h3{margin:0}.vgrid{display:grid;grid-template-columns:repeat(auto-fill,minmax(260px,1fr));gap:22px}.vs{border-radius:12px;box-shadow:var(--sh);background:#061f27}.vs img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover}.vs:after{content:"";position:absolute;inset:0;background:linear-gradient(transparent 55%,rgba(0,0,0,.35))}.vs .pl{width:64px;height:64px;font-size:24px;box-shadow:0 0 0 8px rgba(224,0,42,.28)}.vs:focus-visible{outline:3px solid var(--pri);outline-offset:3px}.vcap{font-weight:700;margin:10px 0 0}.vlink{display:inline-block;padding:8px 0;font-size:14px;color:var(--pri)}
.fbf{text-decoration:none;transition:transform .3s}.fbf:hover{transform:translateY(-3px)}.fbf:focus-visible{outline:3px solid var(--pri);outline-offset:3px}
.ba{--p:50%;position:relative;aspect-ratio:16/10;max-height:340px;width:100%;border-radius:12px;overflow:hidden;touch-action:pan-y;-webkit-user-select:none;user-select:none;cursor:ew-resize;background:#061f27}.ba img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;pointer-events:none;-webkit-user-drag:none}.ba-a{position:absolute;inset:0;clip-path:inset(0 0 0 var(--p))}.ba-h{position:absolute;top:0;bottom:0;left:var(--p);width:3px;margin-left:-1.5px;background:#fff;box-shadow:0 0 6px rgba(0,0,0,.45);pointer-events:none;z-index:2}.ba-h:after{content:"\2039\00a0\203A";position:absolute;top:50%;left:50%;width:40px;height:40px;margin:-20px 0 0 -20px;border-radius:50%;background:#fff;color:#0b3a47;font-size:22px;font-weight:800;line-height:38px;text-align:center;box-shadow:0 2px 10px rgba(0,0,0,.35)}.ba-l{position:absolute;bottom:8px;z-index:3;background:rgba(0,0,0,.65);color:#fff;font-size:13px;font-weight:700;padding:2px 8px;border-radius:4px;pointer-events:none}.ba-l.l{left:8px}.ba-l.r{right:8px}.ba-r{position:absolute;width:1px;height:1px;margin:-1px;padding:0;border:0;overflow:hidden;clip:rect(0 0 0 0);opacity:0}.ba:focus-within{outline:3px solid var(--pri);outline-offset:3px}

/*coastal: light "clean coastal" theme (2026-09). Overrides earlier rules; light only.*/
:root{color-scheme:light}
body{background:#fff;font-family:"Plus Jakarta Sans",system-ui,-apple-system,"Segoe UI",Roboto,sans-serif;font-size:17px;line-height:1.6;animation:none}
h1,h2,h3{color:var(--navy);line-height:1.15;letter-spacing:-.02em}
h2{font-size:clamp(28px,3.4vw,40px);font-weight:800;margin:0 0 10px}
h2::after{display:none}
h3{font-weight:700}
.w{max-width:1180px}
section{padding:88px 0}
@media(max-width:860px){section{padding:64px 0}}
section[style*="var(--card)"]{background:var(--sky2)!important}
.sub{font-size:18px;color:var(--mut);max-width:660px;margin:0 0 36px}
.eyebrow{display:block;font-size:13px;font-weight:700;letter-spacing:.08em;text-transform:uppercase;color:var(--pri);margin-bottom:12px}
:focus-visible{outline:3px solid var(--pri);outline-offset:3px}
::selection{background:var(--pri);color:#fff}
.sp{background:linear-gradient(90deg,var(--pri),var(--acc))}
/* header */
header{background:rgba(255,255,255,.92);border-bottom:1px solid var(--line)}
header .w{max-width:1280px;height:76px}
header.sc{box-shadow:0 8px 24px rgba(11,46,79,.08)}
.logo{color:var(--navy);font-size:15px;font-weight:800;letter-spacing:.01em}
.logo img{height:48px}
header nav{gap:2px}
header nav .soc{display:none}
@media(min-width:1280px){header nav>a{padding:8px 11px;border-radius:999px;font-weight:600;font-size:14.5px;color:var(--ink)}
header nav>a::after{display:none}
header nav>a:not(.on):hover{transform:none;background:var(--sky);color:var(--pri)}
header nav>a.on{background:var(--sky);color:var(--pri)}}
@media(max-width:1279px){header nav .soc{display:flex}}
.lang{border:1px solid var(--line);border-radius:999px;overflow:hidden;gap:0}
.lang button{border:0;border-radius:0;background:transparent;color:var(--mut);padding:6px 11px}
.lang button:hover{transform:none;background:var(--sky)}
.lang button.on{background:var(--pri);color:#fff}
.hq{flex-shrink:0;padding:9px 18px!important;font-size:14.5px!important;min-height:0!important}
@media(max-width:1279px){.hq{display:none!important}}
.mb{border-radius:12px;color:var(--navy)}
/* buttons */
.btn{border-radius:999px;padding:13px 24px;font-weight:700;border-color:var(--pri);color:var(--pri);background:transparent}
.btn::after{display:none}
.btn:hover{background:var(--sky);box-shadow:none;transform:translateY(-1px)}
.btn.p{background:var(--acc);border-color:var(--acc);color:var(--on-acc);box-shadow:0 8px 20px rgba(245,184,46,.35)}
.btn.p:hover{background:#e0a115;border-color:#e0a115}
.btn.yt:hover{background:#c00024}.btn.fb:hover{background:#125ec2}.btn.nd:hover{background:#006b2d}
/* hero */
.hero{background:linear-gradient(180deg,var(--sky) 0%,#f7fbfe 100%);color:var(--ink);padding:80px 0 120px;animation:none}
.hero::before,.hero .fx i{display:none}
.hero h1{color:var(--navy);font-size:clamp(34px,5vw,58px)}
.hero p{color:var(--mut);opacity:1;font-size:19px}
.hero .btn{color:var(--pri);border-color:var(--pri)}
.hero .btn.p{color:var(--on-acc);border-color:var(--acc)}
.hero .wave{animation:none;width:100%;height:60px}
.hero .wave path{fill:#fff}
.hero .wave.b{display:none}
.hero-split{display:grid;grid-template-columns:1.1fr 1fr;gap:56px;align-items:center}
.hlogos{display:grid;grid-template-columns:1fr 1fr;gap:16px}
.hlogos a{background:#fff;border-radius:var(--r);padding:10px;box-shadow:0 10px 30px rgba(11,46,79,.1);transition:transform .25s}
.hlogos a:nth-child(even){margin-top:24px}
.hlogos a:hover{transform:translateY(-4px)}
.hlogos img{display:block;width:100%;aspect-ratio:350/200;object-fit:cover;border-radius:12px}
@media(max-width:860px){.hero{padding:48px 0 100px}.hero-split{grid-template-columns:1fr;gap:36px}.hlogos{gap:10px}}
/* trust strip */
.strip{background:transparent;border:0;margin-top:-52px}
.strip .w{grid-template-columns:repeat(auto-fit,minmax(240px,1fr));gap:16px;padding:0 20px;text-align:left}
.strip .w>div{background:#fff;border:1px solid var(--line);border-radius:var(--r);padding:20px 22px;display:flex;gap:14px;align-items:center;box-shadow:0 10px 30px rgba(11,46,79,.08)}
.strip b{font-size:17px;color:var(--navy)}
.strip span{font-size:14px}
.strip p{margin:0}
.ic{flex:none;width:46px;height:46px;border-radius:14px;background:var(--sky);display:grid;place-items:center;color:var(--pri)}
.ic svg{width:24px;height:24px}
/* cards */
.card{border-radius:var(--r);border:1px solid var(--line);box-shadow:none;transform:translateY(var(--ty,0px))!important}
.card:hover{box-shadow:0 10px 30px rgba(11,46,79,.08);border-color:var(--line)}
.card p{color:var(--mut)}
.star{border:2px solid var(--acc);box-shadow:none}
.tag{display:inline-block;color:var(--c,var(--pri));background:var(--c-bg,var(--sky));padding:4px 10px;border-radius:999px;letter-spacing:.04em}
.pi{background:var(--c-bg,#fff);border-radius:12px;padding:8px;object-fit:cover;height:auto;aspect-ratio:350/200}
.algae{--c:#2f6a22;--c-bg:#e8f4e2}.kleen{--c:#15745e;--c-bg:#e0f3ec}.dps{--c:#35557a;--c-bg:#e7edf5}.top{--c:#0b5fb0;--c-bg:#e3effa}
.card.algae .btn:not(.p),.card.kleen .btn:not(.p),.card.dps .btn:not(.p),.card.top .btn:not(.p){border-color:var(--c);color:var(--c)}
.chips span{background:var(--sky2);border-color:var(--line);font-weight:600;color:var(--ink)}
.pick button{background:#fff;font-weight:600;padding:10px 18px}
.steps .card::before{background:var(--pri)}
/* media */
.wide,.ph img,.tile img{border-radius:var(--r)}
.tile p{color:var(--navy)}
.ba{border-radius:var(--r);box-shadow:0 10px 30px rgba(11,46,79,.08)}
.ba-h:after{color:var(--pri)}
.ba-l{background:rgba(11,46,79,.78);border-radius:999px;padding:3px 10px;font-size:12px}
.cap{color:var(--navy)}
/* bands */
.dist,.band{background:var(--pri)!important;color:#e6f1fb;border-radius:28px}
.dist h2,.band h2{color:#fff}
.dist .btn.p,.band .btn{box-shadow:none}
.band .btn:not(.yt):hover,.dist .btn:not(.p):hover{background:rgba(255,255,255,.14)}
/* forms */
input[type=text],input[type=email],select,textarea{background:var(--sky2);border-color:var(--line);padding:14px 16px;font-size:16px}
input:focus,select:focus,textarea:focus{background:#fff}
/* footer */
footer{background:var(--navy);color:#b9cde0;border-top:0;padding:48px 0 32px;font-size:15px}
footer a.cl{color:#fff}
footer a.cl:hover{color:var(--acc)}
.flogo{background:#fff}
@media(max-width:600px){footer{padding-bottom:96px}}
/* products dropdown in the header nav */
.ddb{font:inherit;font-weight:600;color:var(--ink);background:none;border:0;cursor:pointer;padding:8px 11px;border-radius:999px;font-size:14.5px;white-space:nowrap}
.dd:has(a.on) .ddb{color:var(--pri);background:var(--sky)}
@media(min-width:1280px){header nav{overflow:visible}
.dd{position:relative}
.ddb:hover,.dd.open .ddb{background:var(--sky);color:var(--pri)}
.ddm{display:none;position:absolute;top:calc(100% + 8px);left:0;min-width:230px;flex-direction:column;background:#fff;border:1px solid var(--line);border-radius:16px;box-shadow:0 16px 40px rgba(11,46,79,.14);padding:8px;z-index:10}
.ddm::before{content:"";position:absolute;left:0;right:0;top:-10px;height:10px}
.dd.open .ddm,html:not(.js) .dd:hover .ddm,html:not(.js) .dd:focus-within .ddm{display:flex}
.ddm a{display:block;padding:10px 14px;border-radius:10px;color:var(--ink);text-decoration:none;font-weight:600;font-size:15px}
.ddm a:hover,.ddm a.on{background:var(--sky);color:var(--pri)}}
@media(max-width:1279px){.ddb{display:block;width:100%;text-align:left;padding:16px 4px 4px;font-size:12px;letter-spacing:.08em;text-transform:uppercase;color:var(--mut);pointer-events:none;background:none!important}
.ddb span{display:none}
.ddm{display:flex;flex-direction:column}}
/* thin divider between neighbouring sections that share a background */
main>section[style*="var(--card)"]+section[style*="var(--card)"],main>section:not([style*="var(--card)"])+section:not([style*="var(--card)"]){border-top:1px solid var(--line)}
/* smaller WhatsApp button on phones (still a 44px tap target) */
@media(max-width:600px){.wa{padding:10px 15px;font-size:14px;line-height:1.7;right:12px;bottom:calc(12px + env(safe-area-inset-bottom,0px))}}
/* subtle hero motion: drifting sun glow, slow wave, floating product logos (off with reduced motion) */
.hero::before{content:"";display:block;position:absolute;inset:-20%;z-index:0;pointer-events:none;filter:none;background:radial-gradient(34% 40% at 82% 12%,rgba(245,184,46,.16),transparent 70%),radial-gradient(40% 45% at 12% 30%,rgba(255,255,255,.75),transparent 70%),radial-gradient(38% 42% at 60% 85%,rgba(11,95,176,.07),transparent 70%);animation:hglow 30s ease-in-out infinite alternate}
@keyframes hglow{to{transform:translate3d(-4%,3%,0) scale(1.06)}}
.hero .wave.a{width:200%;animation:slide 40s linear infinite}
.hlogos a{animation:hfloat 7s ease-in-out infinite}
.hlogos a:nth-child(2){animation-delay:-1.8s}.hlogos a:nth-child(3){animation-delay:-3.5s}.hlogos a:nth-child(4){animation-delay:-5.2s}
@keyframes hfloat{50%{translate:0 -6px}}
@media(prefers-reduced-motion:reduce){.hero::before,.hero .wave.a,.hlogos a{animation:none}}
/* group labels inside the Productos dropdown */
.ddh{display:block;font-size:12px;font-weight:700;letter-spacing:.08em;text-transform:uppercase;color:var(--mut);padding:10px 14px 4px}
@media(max-width:1279px){.ddh{padding:14px 4px 2px;font-size:11px}.ddb{display:none!important}}
#linea-josh .grid{grid-template-columns:repeat(auto-fit,minmax(200px,1fr))}
@media(max-width:1279px){header nav>*,header nav .ddm>*{flex-shrink:0}}
/* longer product descriptions (Josh line) */
.desc{max-width:660px;color:var(--mut);font-size:17px;margin:0 0 28px}.desc p{margin:0 0 14px}.desc ul{margin:0 0 16px;padding-left:22px}.desc li{margin:6px 0}.desc .dl{font-weight:700;color:var(--navy);margin:18px 0 4px}
#productos .grid{grid-template-columns:repeat(auto-fit,minmax(300px,1fr))}
.hlogos a:nth-child(5){animation-delay:-2.6s}.hlogos a:nth-child(6){animation-delay:-4.4s}
/* three-column footer */
.fgrid{display:grid;grid-template-columns:1.3fr 1fr 1fr;gap:40px;align-items:start}
.fcol p{margin:0 0 10px;max-width:340px}
footer .fh{color:#fff;font-size:16px;font-weight:700;margin:0 0 10px;letter-spacing:0}
footer .fsub{font-size:12px;font-weight:700;letter-spacing:.08em;text-transform:uppercase;color:#8fb0cc;margin:14px 0 2px}
footer .fcol a:not(.soc a){display:block;width:fit-content;color:#fff;text-decoration:none;padding:5px 0;font-weight:500;white-space:normal}
footer .fcol a:not(.soc a):hover{color:var(--acc);text-decoration:underline;text-underline-offset:3px}
footer .flogo{margin-bottom:16px}
.fcopy{grid-column:1/-1;border-top:1px solid rgba(255,255,255,.14);padding-top:18px;margin:8px 0 0;font-size:13px}
@media(max-width:860px){.fgrid{grid-template-columns:1fr 1fr;gap:28px}.fgrid>.fcol:first-child{grid-column:1/-1}}
@media(max-width:520px){.fgrid{grid-template-columns:1fr}footer .fcol a:not(.soc a){padding:9px 0}}
footer nav.fcol{display:block;margin:0;gap:0;overflow:visible;font-size:inherit}
.soc .ig{background:linear-gradient(45deg,#e1306c,#c13584 55%,#833ab4)}
/* car-care line kept apart: its own menu item and a navy band on the home page */
@media(min-width:1280px){header .w{gap:12px}.logo{max-width:275px;font-size:14px}.lang,.hq{flex-shrink:0}header nav>a,.ddb{padding:8px 7px}}
#linea-josh{background:var(--navy)!important;border-top:0!important;color:#c9dbee}
#linea-josh+section{border-top:0}
#linea-josh h2{color:#fff}
#linea-josh .sub{color:#c9dbee}
#linea-josh .eyebrow{color:var(--acc);display:flex;align-items:center;gap:8px}
#linea-josh .eyi{width:22px;height:22px;flex:none}
#linea-josh .card{border-color:transparent}
#linea-josh .card:hover{box-shadow:0 14px 34px rgba(0,0,0,.28)}
@media(max-width:1279px){.dd .ddh{display:none}.ddb{display:block!important}}
/* accessibility fixes (Oct 2026 audit) */
html{scroll-padding-top:calc(92px + env(safe-area-inset-top,0px));scroll-padding-bottom:80px}
footer :focus-visible,#linea-josh :focus-visible,.dist :focus-visible,.band :focus-visible,.fbf:focus-visible{outline-color:var(--acc)}
#linea-josh .card :focus-visible{outline-color:var(--pri)}
::placeholder{color:var(--mut);opacity:1}
/* two-door home + line landing pages */
.hero-doors .intro{text-align:center;max-width:760px;margin:0 auto 36px}
.hero-doors .intro p{margin:0 auto}
.doors{display:grid;grid-template-columns:1fr 1fr;gap:24px;position:relative;z-index:1}
.door{background:#fff;border:1px solid var(--line);border-radius:24px;padding:28px;display:flex;flex-direction:column;gap:14px;box-shadow:0 14px 36px rgba(11,46,79,.12)}
.door h2{font-size:clamp(24px,2.6vw,32px);margin:0}
.door p{margin:0;color:var(--mut)}
.door .eyebrow{margin:0}
.door .btn{align-self:flex-start;margin-top:auto}
.door.auto{background:var(--navy);border-color:transparent}
.door.auto h2{color:#fff}
.door.auto p{color:#c9dbee}
.door.auto .eyebrow{color:var(--acc)}
.door.auto :focus-visible{outline-color:var(--acc)}
.dlogos{display:grid;grid-template-columns:repeat(3,1fr);gap:10px;margin:6px 0 8px}
.dlogos img{display:block;width:100%;aspect-ratio:350/200;object-fit:cover;border-radius:10px;background:#fff;padding:3px}
.eyi-row{display:flex;align-items:center;gap:8px}
.eyi-row .eyi{width:22px;height:22px;flex:none}
.hlogos.row3{grid-template-columns:repeat(3,1fr);max-width:820px;margin-top:32px}
.hlogos.row3 a:nth-child(even){margin-top:0}
.pname{font-weight:700;color:var(--navy);margin:0 0 4px}
.ddm a:first-child{font-weight:700;color:var(--pri)}
@media(min-width:1280px){.ddm a:first-child{border-bottom:1px solid var(--line);border-radius:10px 10px 0 0;margin-bottom:4px}}
@media(max-width:860px){.doors{grid-template-columns:1fr}.door{padding:22px}}
@media(max-width:520px){.hlogos.row3{grid-template-columns:1fr 1fr}}
/* subtle rising water bubbles behind the car-care door card (home); hidden with reduced motion */
.door.auto{position:relative;overflow:hidden}
.door.auto>*:not(.bubbles){position:relative;z-index:1}
.bubbles{position:absolute;inset:0;z-index:0;pointer-events:none}
.bubbles i{position:absolute;bottom:-24px;left:var(--x);width:var(--s);height:var(--s);border-radius:50%;background:radial-gradient(circle at 32% 30%,rgba(255,255,255,.16),rgba(255,255,255,.04) 62%,transparent 72%);border:1px solid rgba(255,255,255,.12);opacity:0;animation:bub var(--d) linear infinite;animation-delay:var(--l)}
@keyframes bub{0%{transform:translate(0,0) scale(.7);opacity:0}12%{opacity:.85}50%{transform:translate(6px,-260px) scale(.9)}88%{opacity:.6}100%{transform:translate(-4px,-520px) scale(1.05);opacity:0}}
@media(prefers-reduced-motion:reduce){.bubbles{display:none}}
/* home hero: each heading line followed by its sentence */
.hpair .hl{display:block}
.hpair .hs{display:block;max-width:640px;margin:10px auto 30px;font-size:clamp(16px,1.6vw,19px);font-weight:500;line-height:1.55;letter-spacing:0;color:var(--mut)}
.hpair .hs:last-child{margin-bottom:0}
/* floating WhatsApp button reads "Chat" with the WhatsApp logo */
.wa,footer a.wa{display:inline-flex;align-items:center;gap:8px}
.wa .wai{width:20px;height:20px;fill:currentColor;flex:none}
footer a.wa:not(.soc a){display:inline-flex}
@media(max-width:600px){footer a.wa:not(.soc a){padding:10px 15px}}
/* footer bottom row: copyright left, site credit right */
.fcopy{display:flex;flex-wrap:wrap;justify-content:space-between;gap:6px 24px}
.fcopy .credit a{color:#fff;font-weight:600;text-decoration:none;text-underline-offset:3px}
.fcopy .credit a:hover,.fcopy .credit a:focus-visible{color:var(--acc);text-decoration:underline}
/*case-photos*/.case{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1fr);gap:36px;align-items:center}.case figure,.photos figure{margin:0}.case figure{max-width:440px;width:100%;justify-self:center}.case img,.photos img{display:block;width:100%;height:auto;aspect-ratio:3/4;object-fit:cover;border-radius:var(--r);box-shadow:var(--sh)}.photos{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:18px;max-width:820px;margin-top:22px}.photos.land{max-width:none;margin-top:28px}.photos.land img{aspect-ratio:4/3}@media(max-width:760px){.case{grid-template-columns:1fr;gap:22px}}@media(max-width:480px){.photos{grid-template-columns:1fr}}
/*door-shield*/.door.con{position:relative;overflow:hidden}.dtext{position:relative;display:flex;flex-direction:column;gap:14px}.dtext>*:not(.shield){position:relative;z-index:1}.shield{position:absolute;left:50%;top:50%;height:100%;transform:translate(-50%,-50%);z-index:0;pointer-events:none}.shield svg{display:block;height:100%;width:auto;overflow:visible}.shield path{fill:none;stroke-linejoin:round;stroke-linecap:round}.shield .sh-fill{fill:rgba(11,95,176,.025)}.shield .sh-line{stroke:rgba(11,95,176,.09);stroke-width:2}.shield .sh-cw{fill:rgba(11,95,176,.16);font-family:"Plus Jakarta Sans",system-ui,sans-serif;font-weight:800;font-size:40px;letter-spacing:1px}.shield .rd{fill:rgba(11,95,176,.32);opacity:0;animation:7.5s ease-in infinite}.shield .rd-l{animation-name:rdl}.shield .rd-r{animation-name:rdr;animation-delay:-5s}.shield .rd-c{animation-name:rdc;animation-delay:-2.5s}.shield .rr{fill:none;stroke:rgba(11,95,176,.3);stroke-width:1.2;opacity:0;transform-box:fill-box;transform-origin:center;animation:rring 7.5s ease-out infinite}.shield .rr-r{animation-delay:-5s}.shield .rr-c{animation-delay:-2.5s}.shield .rp{fill:rgba(11,95,176,.32);opacity:0;animation:7.5s ease-out infinite;animation-delay:-2.5s}.shield .rp-a{animation-name:rpa}.shield .rp-b{animation-name:rpb}@keyframes rdl{0%{transform:translate(36px,-46px);opacity:0}5%{opacity:1}18%{transform:translate(36px,10px) scale(1)}20%{transform:translate(36px,12px) scale(1.35,.6)}26%{transform:translate(27px,0) scale(.8);opacity:.9}36%{transform:translate(15px,4px) scale(.6);opacity:.5}44%{transform:translate(8px,16px) scale(.5);opacity:0}100%{transform:translate(8px,16px);opacity:0}}@keyframes rdr{0%{transform:translate(84px,-46px);opacity:0}5%{opacity:1}18%{transform:translate(84px,10px) scale(1)}20%{transform:translate(84px,12px) scale(1.35,.6)}26%{transform:translate(93px,0) scale(.8);opacity:.9}36%{transform:translate(105px,4px) scale(.6);opacity:.5}44%{transform:translate(112px,16px) scale(.5);opacity:0}100%{transform:translate(112px,16px);opacity:0}}@keyframes rdc{0%{transform:translate(60px,-52px);opacity:0}5%{opacity:1}18%{transform:translate(60px,1px) scale(1);opacity:1}20%{transform:translate(60px,3px) scale(1.5,.5);opacity:.8}23%{transform:translate(60px,3px) scale(1.5,.5);opacity:0}100%{opacity:0}}@keyframes rpa{0%,19%{transform:translate(60px,4px);opacity:0}21%{opacity:.9}30%{transform:translate(46px,-6px);opacity:.7}42%{transform:translate(36px,6px);opacity:0}100%{opacity:0}}@keyframes rpb{0%,19%{transform:translate(60px,4px);opacity:0}21%{opacity:.9}30%{transform:translate(74px,-6px);opacity:.7}42%{transform:translate(84px,6px);opacity:0}100%{opacity:0}}@keyframes rring{0%,18%{transform:scale(.2);opacity:0}20%{opacity:.8}32%{transform:scale(1.5);opacity:0}100%{opacity:0}}@media(prefers-reduced-motion:reduce){.shield .rain{display:none}}
/*single before-after: keep small source photos near their real size*/.ba-one{max-width:460px;margin-inline:auto}
/*small source photos: show near real size so they stay sharp*/.ba-two{max-width:880px;margin-inline:auto}.tiles.sm{grid-template-columns:repeat(auto-fill,minmax(130px,1fr))}.tiles.sm .tile{text-align:center}.tiles.sm .tile img{width:min(100%,120px);height:auto;aspect-ratio:1;margin:0 auto}.ph.fit img{object-fit:scale-down;background:#fff}.wide.fit{margin-inline:auto;align-self:center}
/*footer contact icons*/footer .fcol a.cl:not(.soc a){display:flex;align-items:center;gap:9px}footer .ci{width:17px;height:17px;flex:none;fill:var(--acc)}footer .ci .st{fill:none;stroke:var(--acc);stroke-width:2;stroke-linecap:round;stroke-linejoin:round}
/*visible form labels*/.fld{display:grid;gap:6px}.fld label{font-weight:600;font-size:14px;color:var(--navy)}
/*faq 2x2*/#faq .grid{grid-template-columns:repeat(2,minmax(0,1fr))}@media(max-width:700px){#faq .grid{grid-template-columns:1fr}}
/*shield beside the button*/.door.con>*:not(.shield){position:relative;z-index:1}.door.con>.shield{left:auto;top:auto;right:30px;bottom:16px;height:76px;transform:none}.door.con>.shield .sh-fill{fill:rgba(11,95,176,.04)}.door.con>.shield .sh-line{stroke:rgba(11,95,176,.16)}@media(max-width:600px){.door.con>.shield{left:50%;right:auto;top:22px;bottom:auto;height:150px;transform:translateX(-50%)}.door.con>.shield .sh-cw{fill:rgba(11,95,176,.075)}.door.con>.shield .sh-fill{fill:rgba(11,95,176,.025)}.door.con>.shield .sh-line{stroke:rgba(11,95,176,.09)}}
/*images carry width/height attributes (no layout shift); keep their real proportions unless a rule sets a size*/img{max-width:100%;height:auto}
/*vertical product video played on the page*/.pvid{display:block;width:100%;max-width:340px;height:auto;margin:0 auto;border-radius:var(--r);box-shadow:var(--sh);background:#0b2e4f}
/*Zero Algae hero video*/.hvid{max-width:300px}
/*home h1: split long heading lines evenly*/.hpair .hl{text-wrap:balance}
/*pause-animations button in the hero (WCAG 2.2.2): stops the looping decoration; hidden when the visitor asks for reduced motion*/.still-b{position:absolute;right:16px;top:10px;z-index:3;display:inline-flex;align-items:center;gap:6px;min-height:32px;padding:5px 12px;border:1px solid var(--line);border-radius:999px;background:#fff;color:var(--navy);font:600 13px/1.2 inherit;font-family:inherit;cursor:pointer;box-shadow:0 2px 8px rgba(11,46,79,.12)}.still-b:hover{border-color:var(--pri);color:var(--pri)}.still-b span{font-size:11px}
html.still .hero,html.still .hero::before,html.still .wave,html.still .fx i,html.still .hlogos a,html.still .vf .pl,html.still .wa{animation:none}html.still .bubbles,html.still .shield .rain{display:none}
@media(prefers-reduced-motion:reduce){html{scroll-behavior:auto}.still-b{display:none}}
/*required form fields*/.fld .req{color:#b3261e;margin-left:2px}.fnote{margin:0 0 4px;font-size:13px;color:var(--mut)}
/*text for screen readers only*/.sr{position:absolute;width:1px;height:1px;margin:-1px;padding:0;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap;border:0}
/*shopify buy button*/.shop-sec .sub{margin-inline:auto}div.shop[data-shop-product]{width:100%;max-width:360px;min-height:420px;margin:24px auto 0;padding:20px;background:#fff;border:1px solid var(--line);border-radius:var(--r);box-shadow:var(--sh);display:flex;flex-direction:column;justify-content:center}.shop-oos{max-width:360px;margin:12px auto 0;padding:12px 14px;border-radius:8px;background:#fff4dc;border:1px solid #e9c46a;color:#3a2600;font-weight:600}.shop-oos a{color:#0b4a8a}.shop-load,.shop-err{text-align:center;color:var(--mut);margin:0}
/*site search*/.srch{display:inline-flex;align-items:center;justify-content:center;width:42px;height:42px;flex:none;border:1px solid var(--line);border-radius:8px;background:var(--card);color:var(--ink)}.srch svg{width:20px;height:20px;fill:none;stroke:currentColor;stroke-width:2.2;stroke-linecap:round}.srch:hover{border-color:var(--pri);color:var(--pri)}
@media(max-width:1279px){.srch{margin-left:auto}.srch~.mb{margin-left:0}}
.sform{max-width:640px;margin-top:22px}.sform label{display:block;font-weight:700;margin-bottom:8px;color:var(--navy)}.srow{display:flex;gap:10px}.srow input{flex:1;min-width:0;height:50px;padding:0 16px;font:inherit;font-size:17px;color:var(--ink);background:#fff;border:2px solid #8aa3b8;border-radius:8px}.srow input:focus{border-color:var(--pri)}.srow .btn{height:50px;padding:0 22px}.hero .sform :focus-visible{outline:3px solid var(--pri);outline-offset:2px}
.sstat{font-weight:700;color:var(--navy);margin:0 0 18px}.slist{list-style:none;margin:0;padding:0;display:grid;gap:14px;max-width:880px}.sres{background:var(--card);border:1px solid var(--line);border-radius:var(--r);padding:18px 20px;box-shadow:var(--sh)}.sres h2{font-size:19px;margin:0 0 6px}.sres h2 a{color:var(--pri);text-decoration:none}.sres h2 a:hover{text-decoration:underline}.sres h2 a::after{content:"";position:absolute;inset:0}.sres{position:relative}.sres:focus-within{outline:3px solid var(--pri);outline-offset:2px}.sres h2 a:focus-visible{outline:none}
.smeta{display:flex;flex-wrap:wrap;align-items:center;gap:8px 14px;margin:0 0 8px;font-size:13px;color:var(--mut)}.spct{display:inline-flex;align-items:center;gap:8px;font-weight:700;color:var(--navy)}.sbar{width:84px;height:8px;border-radius:99px;background:var(--sky);overflow:hidden}.sbar i{display:block;height:100%;background:var(--pri);border-radius:99px}.ssec{font-weight:600}.sres p{margin:0;color:var(--ink)}.sres mark{background:#ffe9a8;color:inherit;border-radius:3px;padding:0 1px}
.shelp{max-width:880px}.shelp h2{font-size:20px}
@media(max-width:600px){.srow{flex-direction:column}.srow input{flex:none}.srow .btn{width:100%}}
.nsrch{display:none}@media(max-width:459px){.srch{display:none}.srch~.mb{margin-left:auto}nav .nsrch{display:block}}
/*language flags*/.lang button{display:inline-flex;align-items:center;justify-content:center;gap:5px;padding:6px 9px}.lang .flag{width:16px;height:11px;flex:none;border-radius:2px;box-shadow:0 0 0 1px rgba(11,46,79,.18);opacity:.85;transition:opacity .2s}.lang button.on .flag{opacity:1;box-shadow:0 0 0 1px rgba(255,255,255,.55)}.lang button:hover .flag{opacity:1}
@media(max-width:379px){.lang .flag{display:none}.lang button{padding:6px 11px}}
/*phones 360-429px: smaller emblem and name so the menu button does not touch "WATERTITE"*/@media(min-width:360px) and (max-width:429px){.logo{width:162px;font-size:14px}.logo img{height:40px;margin-right:6px}}
/*very narrow phones (320-359px): keep logo, menu and both language buttons in the header (WCAG reflow)*/@media(max-width:359px){header .w{gap:8px}.logo{width:128px;font-size:10.5px;line-height:1.12}.logo img{height:34px;margin-right:5px}.mb{width:40px;height:40px}.lang button{min-width:38px;padding:6px 8px}}
/*concreto.html: the six products are the hero*/.hero-prod{padding-bottom:110px}.hero-prod .grid{margin-top:34px}.hero-prod .card p{font-size:inherit;max-width:none;color:var(--mut)}.hero-prod .card{background:#fff}.hero-prod h3{color:var(--navy)}.hero-prod .chips span{background:#fff}
.hero-prod h2.h3{font-size:1.17em;font-weight:700;line-height:1.15;letter-spacing:-.02em;color:var(--navy);margin:0}.hero-prod .card h2.h3{margin:8px 0}.hero-prod h2.h3::after{display:none}
/*two store boxes side by side (josh-zero-algae: concentrated + ready to use)*/.shop-row{display:flex;flex-wrap:wrap;justify-content:center;gap:24px;margin-top:24px}.shop-cell{flex:0 1 360px;min-width:0}.shop-row div.shop[data-shop-product]{margin-top:0;height:100%}
/*footer site credit: more visible (owner, Oct 2026)*/.fcopy .credit{font-size:14px;color:#dbe7f2;border:1px solid rgba(255,255,255,.28);border-radius:999px;padding:5px 14px;background:rgba(255,255,255,.06)}.fcopy .credit a{color:var(--acc);font-weight:800}.fcopy .credit a:hover,.fcopy .credit a:focus-visible{color:#fff;text-decoration:underline}
@media(min-width:601px){.fcopy{padding-right:130px}}