/* ==========================================================================
   ANAMI — hoja de estilos (mobile-first, fluida)
   Breakpoints: base (móvil) · 600 · 900 · 1200.  Sin parches con !important.
   ========================================================================== */

:root{
  --ink:#071923; --deep:#051a25; --teal:#0d6f91; --aqua:#71eee7; --ice:#effdff;
  --text:#2c4a55; --muted:#4f6b75; --line:rgba(8,78,102,.14);
  --card:rgba(255,255,255,.82);
  --max:1200px;
  --pad:clamp(16px,4vw,48px);
  --gap:clamp(16px,3vw,32px);
  --header-h:56px;
  --radius:clamp(22px,4vw,40px);
  --ease:cubic-bezier(.2,.7,.2,1);
}
@media(min-width:900px){:root{--header-h:62px}}

*,*::before,*::after{box-sizing:border-box}
html{-webkit-text-size-adjust:100%;text-size-adjust:100%;scroll-behavior:smooth;scroll-padding-top:calc(var(--header-h) + 28px);overflow-x:clip}
body{margin:0;min-height:100vh;min-height:100dvh;overflow-x:clip;background:linear-gradient(180deg,#f3fbfd,#eaf8fb 40%,#f5fcfd);color:var(--ink);
  font-family:Inter,ui-sans-serif,system-ui,-apple-system,"Segoe UI",Roboto,sans-serif;line-height:1.5;-webkit-font-smoothing:antialiased}
img,svg{display:block;max-width:100%;height:auto}
a{color:inherit;text-decoration:none}
button{font:inherit;color:inherit;cursor:pointer}
h1,h2,h3,h4,p,ul{margin:0}
ul{padding:0;list-style:none}
em{font-style:normal;color:var(--teal)}
:focus-visible{outline:3px solid #0a8fb0;outline-offset:3px;border-radius:8px}
.skip-link{position:absolute;left:12px;top:-60px;z-index:300;background:var(--deep);color:#fff;padding:10px 16px;border-radius:12px;transition:top .2s}
.skip-link:focus{top:12px}

.eyebrow,.product-copy>small,.stage-copy .step small,.kit-copy>small,.combo-page-copy>small{
  display:block;font-size:11px;letter-spacing:.18em;font-weight:800;text-transform:uppercase;color:#157b9b}

/* ---------- Fondo ambiental (decorativo) ---------- */
.site-ambient,.flow-streams{position:fixed;inset:0;z-index:0;overflow:hidden;pointer-events:none}
.ambient-orb{position:absolute;border-radius:50%;background:radial-gradient(circle at 30% 25%,rgba(255,255,255,.9),rgba(116,221,229,.14) 38%,rgba(21,128,153,.05) 62%,transparent 70%);border:1px solid rgba(52,162,185,.1);animation:drift 14s ease-in-out infinite alternate;will-change:transform}
.ambient-orb.a1{width:min(46vw,420px);aspect-ratio:1;left:-8%;top:8%}
.ambient-orb.a2{width:min(34vw,300px);aspect-ratio:1;right:-6%;top:32%;animation-delay:-3s}
.ambient-orb.a3{width:min(40vw,360px);aspect-ratio:1;left:30%;bottom:-10%;animation-delay:-6s}
.ambient-orb.a4,.ambient-orb.a5,.ambient-orb.a6{width:min(18vw,160px);aspect-ratio:1}
.ambient-orb.a4{left:12%;top:60%;animation-delay:-2s}.ambient-orb.a5{right:14%;top:12%;animation-delay:-5s}.ambient-orb.a6{right:30%;bottom:20%;animation-delay:-8s}
.ambient-ripple{position:absolute;border-radius:50%;border:1px solid rgba(43,156,180,.09);width:min(60vw,520px);aspect-ratio:1;animation:ripple 9s ease-in-out infinite}
.ambient-ripple.r1{left:-10%;bottom:6%}.ambient-ripple.r2{right:-12%;top:18%;animation-delay:-3s}.ambient-ripple.r3{left:40%;top:-10%;animation-delay:-6s}
.stream{position:absolute;left:-10%;width:120%;height:1px;background:linear-gradient(90deg,transparent,rgba(43,156,180,.18),transparent);transform:rotate(-6deg);animation:stream 16s linear infinite}
.stream.s1{top:14%}.stream.s2{top:34%;animation-delay:-4s}.stream.s3{top:54%;animation-delay:-8s}.stream.s4{top:72%;animation-delay:-12s}.stream.s5{top:90%;animation-delay:-2s}
@keyframes drift{to{transform:translate3d(3%,-4%,0) scale(1.05)}}
@keyframes ripple{50%{transform:scale(1.06);opacity:.5}}
@keyframes stream{from{transform:translateX(-6%) rotate(-6deg)}to{transform:translateX(6%) rotate(-6deg)}}
@media(max-width:599px){.ambient-orb.a4,.ambient-orb.a5,.ambient-orb.a6,.stream.s4,.stream.s5,.ambient-ripple.r3{display:none}}

main,footer,.back-top,.float-back{position:relative;z-index:1}

/* ---------- Header ---------- */
.topbar{position:fixed;z-index:200;top:max(8px,env(safe-area-inset-top));left:50%;transform:translate(-50%,var(--hy,0));transition:transform .5s var(--ease),height .3s var(--ease),box-shadow .3s,background .3s;
  width:min(calc(100% - 16px),940px);height:var(--header-h);padding:5px 6px 5px 12px;border-radius:999px;
  display:flex;align-items:center;gap:8px;
  background:linear-gradient(120deg,rgba(255,255,255,.9),rgba(214,246,250,.86));
  border:1px solid rgba(255,255,255,.8);box-shadow:0 12px 34px rgba(6,60,80,.16),inset 0 1px 0 #fff;
  -webkit-backdrop-filter:blur(18px) saturate(150%);backdrop-filter:blur(18px) saturate(150%)}
.topbar nav{display:none}
.top-actions{margin-left:auto;display:flex;align-items:center;gap:6px;flex:none}
.top-actions a,.menu-toggle{display:inline-flex;align-items:center;justify-content:center;gap:6px;min-height:44px;padding:0 14px;border-radius:999px;font-size:13px;font-weight:800;white-space:nowrap}
.top-actions a.wa{background:linear-gradient(120deg,#b6f5ea,#8fe3e6);color:#06384a;border:1px solid rgba(13,111,145,.2)}
.top-actions a.ig{display:none;background:rgba(255,255,255,.7);border:1px solid rgba(13,111,145,.18);color:#174e5e}
.social-svg{width:18px;height:18px;fill:currentColor;flex:none}
.top-actions a.wa{padding:0 14px}
.wa-label{display:inline}
@media(max-width:479px){.top-actions a.wa{width:44px;padding:0}.wa-label{display:none}}
.menu-toggle{border:1px solid rgba(13,111,145,.2);background:#fff;color:#06384a;width:44px;padding:0;flex-direction:column;gap:4px}
.menu-toggle i{display:block;width:18px;height:2px;border-radius:2px;background:currentColor;transition:transform .25s var(--ease),opacity .2s}
.menu-toggle[aria-expanded="true"] i:nth-child(1){transform:translateY(6px) rotate(45deg)}
.menu-toggle[aria-expanded="true"] i:nth-child(2){opacity:0}
.menu-toggle[aria-expanded="true"] i:nth-child(3){transform:translateY(-6px) rotate(-45deg)}

/* Menú desplegable móvil/tablet */
@media(max-width:899px){
  .topbar nav{position:absolute;top:calc(100% + 8px);left:0;right:0;display:grid;gap:2px;padding:10px;border-radius:26px;
    background:#fff;border:1px solid var(--line);box-shadow:0 22px 50px rgba(6,60,80,.2);
    opacity:0;visibility:hidden;transform:translateY(-8px);transition:opacity .2s,transform .25s var(--ease),visibility .2s}
  .topbar.open nav{opacity:1;visibility:visible;transform:none}
  .topbar nav a{display:flex;align-items:center;min-height:48px;padding:0 18px;border-radius:16px;font-weight:700;color:#174e5e}
  .topbar nav a:hover,.topbar nav a:active{background:#e6f8fa}
  .topbar nav .nav-ig{display:flex;gap:8px;color:#0d6f91}
}
@media(min-width:900px){
  .menu-toggle,.topbar nav .nav-ig{display:none}
  .topbar nav{display:flex;align-items:center;justify-content:center;flex:1 1 auto;min-width:0}
  .topbar nav a{position:relative;padding:10px clamp(8px,1.2vw,16px);font-size:13px;font-weight:600;color:#174e5e;border-radius:999px;white-space:nowrap}
  .topbar nav a:hover{background:rgba(255,255,255,.7)}
  .top-actions{margin-left:0}
  .top-actions a.ig{display:inline-flex}
}
@media(min-width:900px) and (max-width:1099px){.top-actions a.ig{padding:0 12px;font-size:0;gap:0}.top-actions a.ig .ico .social-svg{width:20px;height:20px}}

/* ---------- Botones ---------- */
.primary,.product-copy>a,.kit-copy>a,.final a,.hero-actions a,.tech-cta>a,.combo-wa,.button{
  display:inline-flex;align-items:center;justify-content:center;gap:8px;min-height:48px;padding:0 24px;border-radius:999px;
  font-weight:800;font-size:14px;line-height:1.2;text-align:center;border:1px solid transparent;
  transition:transform .2s var(--ease),box-shadow .2s,background .2s}
.primary,.product-copy>a,.kit-copy>a,.tech-cta>a,.combo-wa,.button{background:#073c4f;color:#fff;box-shadow:0 10px 24px rgba(5,58,78,.22)}
.primary:hover,.product-copy>a:hover,.kit-copy>a:hover,.tech-cta>a:hover,.combo-wa:hover,.button:hover{transform:translateY(-2px);box-shadow:0 14px 30px rgba(5,58,78,.3)}
.hero-actions a:not(.primary){background:rgba(255,255,255,.85);color:#073c4f;border-color:rgba(13,111,145,.25)}

/* ---------- Hero ---------- */
.hero{position:relative;width:min(calc(100% - 16px),var(--max));margin:calc(var(--header-h) + 20px) auto 0;border-radius:var(--radius);overflow:hidden;
  display:grid;gap:clamp(20px,4vw,40px);align-items:center;padding:clamp(16px,3.4vw,44px);
  background:radial-gradient(circle at 80% 20%,rgba(255,255,255,.6),transparent 45%),linear-gradient(135deg,rgba(217,246,248,.84),rgba(185,235,240,.8) 55%,rgba(215,245,246,.84));-webkit-backdrop-filter:blur(2px);backdrop-filter:blur(2px);
  border:1px solid rgba(255,255,255,.8);box-shadow:0 30px 80px rgba(6,70,92,.14)}
.motion-field{position:absolute;inset:0;pointer-events:none}
.orb{position:absolute;display:block;border-radius:50%;border:1px solid rgba(255,255,255,.6);background:radial-gradient(circle at 30% 25%,rgba(255,255,255,.75),rgba(255,255,255,.05) 60%);animation:drift 11s ease-in-out infinite alternate}
.orb.o1{width:18%;aspect-ratio:1;left:4%;top:68%}.orb.o2{width:9%;aspect-ratio:1;left:44%;top:8%;animation-delay:-2s}
.orb.o3{width:26%;aspect-ratio:1;right:-6%;top:-8%;animation-delay:-4s}.orb.o4{width:12%;aspect-ratio:1;right:30%;bottom:4%;animation-delay:-6s}
.orb.o5{width:6%;aspect-ratio:1;left:30%;top:50%}.orb.o6{width:14%;aspect-ratio:1;left:-4%;top:6%;animation-delay:-3s}.orb.o7{width:8%;aspect-ratio:1;right:6%;bottom:30%;animation-delay:-7s}
.hero-copy{position:relative;z-index:2;padding:clamp(18px,3vw,36px);border-radius:clamp(20px,3vw,32px);background:rgba(255,255,255,.82);
  -webkit-backdrop-filter:blur(10px);backdrop-filter:blur(10px);box-shadow:0 18px 50px rgba(6,70,92,.1);max-width:560px}
.hero h1{font-size:clamp(32px,7vw,62px);line-height:.98;letter-spacing:-.045em;margin:14px 0 18px;color:var(--ink);font-weight:800;text-wrap:balance}
.hero h1 em{color:var(--teal)}
.hero-copy>p:not(.eyebrow){font-size:clamp(15px,1.5vw,18px);line-height:1.65;color:var(--text);max-width:56ch}
.hero-actions{display:flex;flex-wrap:wrap;gap:10px;margin-top:24px}
.hero-actions a{flex:1 1 200px}

.hero-bubbles{position:relative;z-index:2;width:100%;max-width:620px;aspect-ratio:1/1;margin-inline:auto}
.water-bubble{position:relative;border-radius:50%;background:#fff;display:grid;place-items:center;
  border:1px solid rgba(255,255,255,.9);box-shadow:0 20px 44px rgba(6,70,92,.18),inset 0 0 0 6px rgba(255,255,255,.7),inset 0 -14px 30px rgba(31,147,169,.12)}
.water-bubble img{position:absolute;inset:0;width:100%;height:100%;object-fit:contain;padding:8%;border-radius:50%}
.hero-bubble{position:absolute;aspect-ratio:1/1;animation:bob 7s ease-in-out infinite alternate,breathe 5s ease-in-out infinite}
@keyframes bob{to{translate:0 -2.5%}}
@media(min-width:900px){.hero{grid-template-columns:minmax(0,.9fr) minmax(0,1.1fr);min-height:min(640px,calc(100svh - 120px))}}
@media(max-height:520px) and (orientation:landscape) and (min-width:600px){.hero{grid-template-columns:1fr 1fr;min-height:0}.hero-bubbles{max-width:340px}.hero h1{font-size:clamp(30px,6vw,48px)}}

/* ---------- Soluciones (pestañas) ---------- */
.solutions-scroll{width:min(100%,var(--max));margin:0 auto;padding:clamp(56px,9vw,110px) var(--pad) 0}
.solution-stage{position:relative;overflow:hidden;border-radius:var(--radius);background:rgba(255,255,255,.9);border:1px solid var(--line);
  box-shadow:0 28px 80px rgba(24,87,105,.1);padding:clamp(18px,4vw,48px);display:grid;gap:clamp(18px,3vw,36px)}
.stage-motion{position:absolute;inset:0;pointer-events:none;overflow:hidden}
.stage-motion i{position:absolute;border-radius:50%;border:1px solid rgba(43,156,180,.1);animation:ripple 9s ease-in-out infinite}
.stage-motion i:nth-child(1){width:60%;aspect-ratio:1;right:-15%;top:-20%}.stage-motion i:nth-child(2){width:30%;aspect-ratio:1;left:-8%;bottom:-10%;animation-delay:-2s}
.stage-motion i:nth-child(3){width:14%;aspect-ratio:1;left:40%;top:8%;animation-delay:-4s}.stage-motion i:nth-child(4){width:8%;aspect-ratio:1;right:20%;bottom:10%}.stage-motion i:nth-child(5){display:none}
.stage-heading,.stage-grid,.stage-selector{position:relative;z-index:1}
.stage-heading h2,.catalog-head h2,.final h2,.seo-directory h2,.tech-cta h2{font-size:clamp(30px,5.6vw,64px);line-height:1;letter-spacing:-.04em;margin:10px 0 0;font-weight:800;text-wrap:balance}
.stage-heading h2 em,.catalog-head h2 em{display:inline}
.stage-grid{display:grid;gap:clamp(16px,3vw,48px);align-items:center}
.stage-visual{position:relative;display:grid;place-items:center;order:-1}
.stage-bubble{width:min(100%,360px);aspect-ratio:1}
.bubble-rings{position:absolute;inset:0;margin:auto;width:min(100%,420px);aspect-ratio:1;border-radius:50%;border:1px solid rgba(43,156,180,.15);box-shadow:0 0 0 22px rgba(56,175,194,.05),0 0 0 48px rgba(56,175,194,.035)}
#visualLabel{position:absolute;right:0;bottom:0;font-size:11px;font-weight:800;letter-spacing:.12em;padding:7px 12px;border-radius:999px;background:#073c4f;color:#fff}
.stage-copy{min-width:0}
.stage-copy .step{display:flex;align-items:baseline;gap:12px;flex-wrap:wrap}
.stage-copy .step span{font-size:clamp(28px,5vw,40px);font-weight:800;color:#a5d6dd;line-height:1}
.stage-copy h3{font-size:clamp(36px,7vw,68px);letter-spacing:-.045em;line-height:.98;margin:10px 0 12px;font-weight:800}
.stage-copy>p{font-size:clamp(15px,1.6vw,18px);line-height:1.6;color:var(--text);max-width:54ch;min-height:4.8em}
.facts{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:8px;margin:16px 0}
.facts div{padding:10px 12px;border-radius:14px;background:#f1fbfc;border:1px solid var(--line);min-width:0}
.facts b{display:block;font-size:10px;letter-spacing:.14em;color:#2b8aa5}
.facts span{display:block;font-size:13px;font-weight:600;color:var(--ink);overflow-wrap:anywhere}
#stepLink{display:inline-flex;align-items:center;min-height:44px;font-weight:800;color:var(--teal);border-bottom:2px solid rgba(13,111,145,.3)}
.stage-selector{display:flex;gap:8px;overflow-x:auto;padding:4px 2px 8px;margin:0 calc(-1 * var(--pad) / 2);padding-inline:calc(var(--pad) / 2);
  scroll-snap-type:x proximity;scrollbar-width:thin;-webkit-overflow-scrolling:touch}
.stage-selector button{flex:none;scroll-snap-align:center;min-height:48px;padding:0 16px;border-radius:999px;border:1px solid var(--line);background:#fff;color:#2b6073;font-size:12px;display:inline-flex;align-items:center;gap:7px;white-space:nowrap;transition:background .2s,color .2s,border-color .2s}
.stage-selector button b{font-weight:800;color:var(--ink)}
.stage-selector button.active{background:#073c4f;border-color:#073c4f;color:#9fe9ee}
.stage-selector button.active b{color:#fff}
.scroll-spacer{display:none}
@media(min-width:900px){
  .stage-grid{grid-template-columns:minmax(0,1fr) minmax(0,1fr)}
  .stage-visual{order:0}
  .stage-selector{flex-wrap:wrap;overflow:visible;margin:0;padding:0;justify-content:flex-start}
}

/* ---------- Catálogo ---------- */
.catalog{width:min(100%,var(--max));margin:0 auto;padding:clamp(56px,9vw,110px) var(--pad)}
.catalog-head{max-width:820px;margin-bottom:clamp(28px,5vw,56px)}
.catalog-head>p:last-child{margin-top:16px;font-size:clamp(15px,1.5vw,17px);line-height:1.65;color:var(--muted);max-width:62ch}
.rep-head{margin-top:clamp(56px,9vw,100px)}
.product{display:grid;gap:clamp(20px,4vw,56px);align-items:center;padding:clamp(32px,5vw,64px) 0;border-top:1px solid var(--line);scroll-margin-top:calc(var(--header-h) + 24px)}
.product-visual{position:relative;display:grid;place-items:center}
.product-visual>span{position:absolute;left:0;top:0;z-index:2;font-size:clamp(40px,7vw,64px);font-weight:800;line-height:1;color:#c6e4e8}
.detail-bubble{width:min(100%,520px);aspect-ratio:1}
.product-copy{min-width:0}
.product-copy h3{font-size:clamp(34px,6vw,64px);letter-spacing:-.045em;line-height:1;margin:10px 0 14px;font-weight:800}
.product-copy .lead{font-size:clamp(16px,1.6vw,18px);line-height:1.6;color:var(--text)}
.info-blocks,.more-grid{display:grid;gap:10px;margin:20px 0}
.info-blocks section,.more-grid section{padding:14px 16px;border-radius:18px;background:var(--card);border:1px solid var(--line);min-width:0}
.info-blocks b{display:block;font-size:10px;letter-spacing:.15em;color:#2b8aa5;margin-bottom:4px}
.info-blocks p,.more-grid p{font-size:14px;line-height:1.55;color:var(--text)}
.more-grid h4{font-size:14px;margin-bottom:4px}
.product-gallery{display:grid;grid-template-columns:repeat(auto-fit,minmax(110px,1fr));gap:10px;margin:0 0 18px}
.product-gallery figure{margin:0;border-radius:18px;overflow:hidden;background:#fff;border:1px solid var(--line);aspect-ratio:3/4}
.product-gallery img{width:100%;height:100%;object-fit:cover}
.more-info{margin:0 0 20px;border-radius:20px;background:#fff;border:1px solid var(--line);overflow:hidden}
.more-info summary{display:flex;align-items:center;justify-content:space-between;gap:12px;min-height:52px;padding:0 18px;font-weight:800;cursor:pointer;list-style:none}
.more-info summary::-webkit-details-marker{display:none}
.more-info summary b{display:grid;place-items:center;width:30px;height:30px;border-radius:50%;background:#073c4f;color:#fff;transition:transform .25s}
.more-info[open] summary b{transform:rotate(45deg)}
.more-info .more-grid{margin:0;padding:0 12px 14px}
@media(min-width:560px){.info-blocks,.more-grid{grid-template-columns:repeat(2,minmax(0,1fr))}}
@media(min-width:900px){
  .product{grid-template-columns:minmax(0,.9fr) minmax(0,1.1fr)}
  .product.reverse .product-visual{order:2}
}

/* ---------- Combos ---------- */
.kits-section{margin-top:clamp(56px,9vw,100px);padding-top:clamp(32px,5vw,56px);border-top:1px solid var(--line);scroll-margin-top:calc(var(--header-h) + 24px)}
.kits-grid{display:grid;gap:var(--gap)}
.kit-card{display:grid;border-radius:28px;overflow:hidden;background:var(--card);border:1px solid var(--line);box-shadow:0 18px 44px rgba(6,70,92,.08)}
.kit-image{background:linear-gradient(160deg,#fff,#e6f8fa);padding:clamp(12px,3vw,24px)}
.kit-image img{width:100%;max-width:420px;aspect-ratio:1;object-fit:contain;margin:0 auto;border-radius:22px}
.kit-copy{padding:clamp(18px,3vw,28px);display:flex;flex-direction:column;gap:10px;align-items:flex-start}
.kit-copy h3{font-size:clamp(22px,3vw,28px);letter-spacing:-.03em;line-height:1.1}
.kit-copy>p{font-size:14px;line-height:1.6;color:var(--text)}
.kit-includes{display:flex;flex-wrap:wrap;gap:6px;align-items:center}
.kit-includes b{font-size:11px;letter-spacing:.14em;text-transform:uppercase;color:#2b8aa5;margin-right:4px}
.kit-includes span{font-size:12px;font-weight:600;padding:5px 11px;border-radius:999px;background:#e6f8fa;color:#145468}
.kit-copy>a{margin-top:auto}
.kits-more{text-align:center;margin-top:clamp(24px,4vw,40px)}
@media(min-width:700px){.kits-grid{grid-template-columns:repeat(2,minmax(0,1fr))}.kit-wide{grid-column:1/-1;grid-template-columns:minmax(0,.8fr) minmax(0,1.2fr);align-items:center}}

/* ---------- Cierre / directorio / footer ---------- */
.final{position:relative;overflow:hidden;width:min(calc(100% - 16px),var(--max));margin:clamp(24px,5vw,60px) auto;padding:clamp(36px,7vw,96px) clamp(20px,5vw,64px);border-radius:var(--radius);text-align:center;color:#fff;
  background:radial-gradient(circle at 20% 0,rgba(113,238,231,.28),transparent 50%),linear-gradient(135deg,#06384a,#0a5a74)}
.final-motion{position:absolute;inset:0;pointer-events:none}
.final-motion i{position:absolute;border-radius:50%;border:1px solid rgba(255,255,255,.14);animation:ripple 9s ease-in-out infinite}
.final-motion i:nth-child(1){width:46%;aspect-ratio:1;left:-10%;top:-30%}.final-motion i:nth-child(2){width:30%;aspect-ratio:1;right:-6%;bottom:-20%;animation-delay:-3s}
.final-motion i:nth-child(3){width:12%;aspect-ratio:1;right:20%;top:12%}.final-motion i:nth-child(4){width:8%;aspect-ratio:1;left:18%;bottom:12%}
.final>*:not(.final-motion){position:relative}
.final .eyebrow{color:#8fe6ec}
.final h2{margin:12px auto 16px;max-width:18ch}
.final>p:not(.eyebrow){max-width:56ch;margin:0 auto;color:#d4eef2;line-height:1.65;font-size:clamp(15px,1.5vw,18px)}
.final>div{display:flex;flex-wrap:wrap;justify-content:center;gap:10px;margin-top:26px}
.final a{background:#8fe9ea;color:#06384a}
.final a.instagram{background:rgba(255,255,255,.12);color:#fff;border-color:rgba(255,255,255,.3)}
.seo-directory{width:min(100%,var(--max));margin:0 auto;padding:clamp(32px,6vw,72px) var(--pad)}
.seo-directory h2{font-size:clamp(24px,4vw,40px);margin-bottom:22px;max-width:24ch}
.seo-grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(min(100%,220px),1fr));gap:10px}
.seo-grid a{display:flex;align-items:center;justify-content:space-between;gap:10px;min-height:52px;padding:0 18px;border-radius:18px;background:var(--card);border:1px solid var(--line);font-weight:700;font-size:14px;transition:background .2s,transform .2s}
.seo-grid a::after{content:"→";color:var(--teal)}
.seo-grid a:hover{background:#fff;transform:translateY(-2px)}
.seo-grid a.seo-combos{background:#073c4f;color:#fff}.seo-grid a.seo-combos::after{color:#8fe9ea}
footer{padding:28px var(--pad) calc(36px + env(safe-area-inset-bottom));text-align:center;color:var(--muted);font-size:14px}
.footer-contact{display:flex;flex-wrap:wrap;justify-content:center;align-items:center;gap:8px 22px;max-width:var(--max);margin:0 auto}
.footer-contact a{display:inline-flex;align-items:center;gap:7px;min-height:44px;font-weight:700;color:var(--teal)}

.back-top,.float-back{position:fixed;z-index:150;right:max(14px,env(safe-area-inset-right));bottom:max(14px,env(safe-area-inset-bottom));display:inline-flex;align-items:center;justify-content:center;gap:6px;min-height:48px;min-width:48px;padding:0 16px;border-radius:999px;background:#0d6f91;color:#fff;font-weight:800;font-size:13px;box-shadow:0 12px 28px rgba(5,58,78,.3);transition:opacity .25s,transform .25s}
.back-top{opacity:0;visibility:hidden;transform:translateY(12px)}
.back-top.show{opacity:1;visibility:visible;transform:none}
.back-top span{display:none}
@media(min-width:600px){.back-top span{display:inline}}
.float-back{left:max(14px,env(safe-area-inset-left));right:auto}

/* ---------- Páginas internas ---------- */
.tech-main,.combos-main,.page-main{width:min(100%,var(--max));margin:0 auto;padding:calc(var(--header-h) + 36px) var(--pad) 40px}
.tech-intro,.combos-intro{max-width:820px;margin-bottom:clamp(8px,3vw,24px)}
.tech-intro h1,.combos-intro h1,.page-title{font-size:clamp(36px,8vw,76px);line-height:1;letter-spacing:-.045em;font-weight:800;margin-bottom:16px;text-wrap:balance}
.tech-intro p,.combos-intro p{font-size:clamp(15px,1.6vw,18px);line-height:1.7;color:var(--text)}
.product.standalone{border-top:0}
.tech-cta{margin:clamp(24px,5vw,56px) 0 0;padding:clamp(24px,5vw,48px);border-radius:var(--radius);background:linear-gradient(135deg,#d9f6f8,#bfeef2);display:grid;gap:12px;justify-items:start}
.tech-cta h2{font-size:clamp(24px,4vw,40px);max-width:22ch}
.tech-cta>p{color:var(--text);max-width:56ch;line-height:1.6}
.combo-page-grid{display:grid;gap:var(--gap);margin-top:clamp(20px,4vw,40px)}
.combo-page-card{display:grid;gap:clamp(14px,3vw,36px);align-items:center;padding:clamp(16px,3vw,32px);border-radius:var(--radius);background:var(--card);border:1px solid var(--line);box-shadow:0 18px 44px rgba(6,70,92,.07);scroll-margin-top:calc(var(--header-h) + 24px)}
.combo-page-bubble{width:min(100%,380px);aspect-ratio:1;margin-inline:auto;border-radius:50%;position:relative;background:#fff;box-shadow:0 20px 44px rgba(6,70,92,.16),inset 0 0 0 6px rgba(255,255,255,.7)}
.combo-page-bubble img{position:absolute;inset:0;width:100%;height:100%;object-fit:contain;padding:6%;border-radius:50%}
.combo-page-copy{display:grid;gap:12px;justify-items:start;min-width:0}
.combo-page-copy h2{font-size:clamp(26px,4vw,40px);letter-spacing:-.035em;line-height:1.05}
.combo-page-copy p{line-height:1.65;color:var(--text);font-size:15px}
.combo-component-links{display:flex;flex-wrap:wrap;gap:8px}
.combo-component-links a{display:inline-flex;align-items:center;min-height:44px;padding:0 16px;border-radius:999px;background:#e6f8fa;border:1px solid var(--line);font-size:13px;font-weight:700;color:#145468}
@media(min-width:760px){.combo-page-card{grid-template-columns:minmax(0,.8fr) minmax(0,1.2fr)}.combo-page-card:nth-child(even) .combo-page-bubble{order:2}}

/* Artículos / guías / fichas SEO */
.breadcrumb{display:flex;flex-wrap:wrap;gap:6px;align-items:center;font-size:13px;color:var(--muted);margin-bottom:20px}
.breadcrumb a{color:var(--teal);font-weight:700;min-height:32px;display:inline-flex;align-items:center}
.prose{max-width:780px}
.prose h1{font-size:clamp(32px,6vw,56px);line-height:1.05;letter-spacing:-.04em;font-weight:800;margin:10px 0 18px;text-wrap:balance}
.prose h2{font-size:clamp(22px,3.4vw,30px);letter-spacing:-.03em;line-height:1.15;margin:34px 0 10px}
.prose p{font-size:16px;line-height:1.75;color:var(--text);margin-bottom:12px}
.prose a:not(.button){color:var(--teal);font-weight:700;text-decoration:underline;text-underline-offset:3px}
.prose .button{margin-top:12px}
.table-scroll{overflow-x:auto;margin:18px 0;border-radius:18px;border:1px solid var(--line);background:#fff;-webkit-overflow-scrolling:touch}
.table-scroll table{width:100%;min-width:480px;border-collapse:collapse;font-size:14px}
.table-scroll caption{padding:12px 14px;text-align:left;font-weight:800}
.table-scroll th,.table-scroll td{padding:12px 14px;text-align:left;border-top:1px solid var(--line);vertical-align:top}
.table-scroll thead th{background:#e6f8fa;font-size:12px;letter-spacing:.08em;text-transform:uppercase;color:#145468}
.product-hero{display:grid;gap:clamp(20px,4vw,56px);align-items:center;margin-bottom:clamp(28px,5vw,56px)}
.product-hero .water-bubble{width:min(100%,480px);aspect-ratio:1;margin-inline:auto}
.product-hero h1{font-size:clamp(32px,6vw,60px);line-height:1.04;letter-spacing:-.04em;font-weight:800;margin:10px 0 12px;text-wrap:balance}
.seo-code{font-size:12px;letter-spacing:.1em;color:var(--muted);margin-bottom:10px}
.product-intro{font-size:clamp(16px,1.6vw,18px);line-height:1.65;color:var(--text)}
.product-facts{display:grid;gap:8px;margin:18px 0}
.product-facts li{position:relative;padding:12px 14px 12px 42px;border-radius:16px;background:var(--card);border:1px solid var(--line);font-size:14px;font-weight:600}
.product-facts li::before{content:"";position:absolute;left:15px;top:50%;width:14px;height:14px;margin-top:-7px;border-radius:50%;background:radial-gradient(circle at 30% 30%,#fff,#5fd6dd);box-shadow:0 0 0 3px rgba(95,214,221,.25)}
.quick-note{font-size:13px;color:var(--muted);line-height:1.6;margin-bottom:18px}
.gallery-strip{display:grid;grid-template-columns:repeat(auto-fit,minmax(150px,1fr));gap:12px;margin:0 0 clamp(28px,5vw,48px)}
.gallery-strip figure{margin:0;border-radius:20px;overflow:hidden;background:#fff;border:1px solid var(--line);aspect-ratio:3/4}
.gallery-strip img{width:100%;height:100%;object-fit:cover}
.seo-faq{max-width:780px;margin-bottom:clamp(24px,4vw,40px)}
.seo-faq h2,.related h2{font-size:clamp(22px,3.4vw,30px);letter-spacing:-.03em;margin-bottom:14px}
.seo-faq details{margin-bottom:8px;border-radius:18px;background:#fff;border:1px solid var(--line);overflow:hidden}
.seo-faq summary{min-height:52px;padding:14px 18px;font-weight:700;cursor:pointer;display:flex;align-items:center}
.seo-faq details p{padding:0 18px 16px;line-height:1.65;color:var(--text);font-size:15px}
.related{max-width:780px;margin-bottom:clamp(24px,4vw,40px)}
.seo-links{display:grid;gap:8px;margin-bottom:14px}
.seo-links a,.related>p a{display:flex;align-items:center;min-height:48px;padding:0 18px;border-radius:16px;background:var(--card);border:1px solid var(--line);font-weight:700;color:#145468}
@media(min-width:900px){.product-hero{grid-template-columns:minmax(0,.9fr) minmax(0,1.1fr)}}

/* ---------- 404 ---------- */
.notfound{min-height:100vh;min-height:100dvh;display:grid;place-content:center;gap:16px;padding:var(--pad);text-align:center}
.notfound h1{font-size:clamp(30px,6vw,56px);letter-spacing:-.04em}
.notfound p{color:var(--muted)}

/* ---------- Preferencias del sistema ---------- */
@media print{.topbar,.back-top,.float-back,.site-ambient,.flow-streams{display:none}.hero,.tech-main{margin-top:0;padding-top:0}}

/* Fichas de repuestos: especificaciones */
.spec-block{max-width:780px;margin-bottom:clamp(24px,4vw,40px)}
.spec-block h2{font-size:clamp(20px,3vw,26px);letter-spacing:-.02em;margin:28px 0 10px}
.filter-specs{display:grid;grid-template-columns:repeat(auto-fit,minmax(min(100%,200px),1fr));gap:10px;margin:14px 0}
.filter-specs div{padding:14px 16px;border-radius:18px;background:var(--card);border:1px solid var(--line)}
.filter-specs dt{font-size:11px;letter-spacing:.14em;text-transform:uppercase;font-weight:800;color:#2b8aa5;margin-bottom:4px}
.filter-specs dd{margin:0;font-weight:600;color:var(--ink)}
.spec-block ul{list-style:disc;padding-left:22px;color:var(--text);line-height:1.7}

/* ==========================================================================
   MOVIMIENTO — todo es mejora progresiva: sin JS o con "reducir movimiento"
   la página se ve completa y estática.
   ========================================================================== */

/* Barra de progreso de lectura */
.scroll-progress{position:fixed;left:0;top:0;width:100%;height:3px;z-index:400;pointer-events:none;transform-origin:0 50%;transform:scaleX(var(--p,0));
  background:linear-gradient(90deg,#71eee7,#0d6f91)}

/* Burbujas pulsantes: respiran y emiten ondas de agua */
@keyframes breathe{50%{scale:1.035}}
.water-bubble:not(.hero-bubble){animation:breathe 5.5s ease-in-out infinite}
.water-bubble::before,.water-bubble::after,.combo-page-bubble::before,.combo-page-bubble::after{
  content:"";position:absolute;inset:0;border-radius:50%;border:2px solid rgba(76,200,214,.6);pointer-events:none;opacity:0;animation:pulseRing 4s ease-out infinite}
.water-bubble::after,.combo-page-bubble::after{animation-delay:2s}
@keyframes pulseRing{0%{transform:scale(1);opacity:.75}100%{transform:scale(1.32);opacity:0}}
.hero-bubble:nth-child(2n)::before{animation-delay:.6s}.hero-bubble:nth-child(2n)::after{animation-delay:2.6s}
.hero-bubble:nth-child(3n)::before{animation-delay:1.2s}.hero-bubble:nth-child(3n)::after{animation-delay:3.2s}
.splash{position:absolute;left:var(--x);top:var(--y);width:12px;height:12px;margin:-6px 0 0 -6px;border-radius:50%;border:2px solid rgba(76,200,214,.8);pointer-events:none;z-index:6;animation:splash .8s ease-out forwards}
@keyframes splash{to{transform:scale(18);opacity:0}}

/* Parallax por puntero en el hero + foco de luz que sigue al cursor */
.hero-bubble{transform:translate3d(calc(var(--mx,0)*var(--depth,10)*1px),calc(var(--my,0)*var(--depth,10)*1px),0);transition:transform .3s ease-out}
.hero-bubble.b1{--depth:-6}.hero-bubble.b2{--depth:14}.hero-bubble.b3{--depth:18}.hero-bubble.b4{--depth:10}.hero-bubble.b5{--depth:16}.hero-bubble.b6{--depth:22}.hero-bubble.b7{--depth:26}
.hero-bubbles{translate:0 calc(var(--hs,0)*-.07px)}
.hero-copy{translate:0 calc(var(--hs,0)*.035px)}
.hero::before{content:"";position:absolute;inset:0;z-index:1;pointer-events:none;opacity:0;transition:opacity .4s;
  background:radial-gradient(380px circle at var(--sx,70%) var(--sy,30%),rgba(255,255,255,.6),transparent 62%)}
.hero.spot::before{opacity:1}
.site-ambient{--sy:0}
.ambient-orb.a1{translate:0 calc(var(--sy)*-.06px)}.ambient-orb.a2{translate:0 calc(var(--sy)*-.12px)}.ambient-orb.a3{translate:0 calc(var(--sy)*-.04px)}
.ambient-orb.a4{translate:0 calc(var(--sy)*-.1px)}.ambient-orb.a5{translate:0 calc(var(--sy)*-.14px)}.ambient-orb.a6{translate:0 calc(var(--sy)*-.08px)}

/* Entrada del hero (solo con JS) */
.js .hero h1 .w{display:inline-block;opacity:0;translate:0 .55em;animation:wordIn .8s var(--ease) forwards;animation-delay:calc(var(--i)*70ms + 120ms)}
@keyframes wordIn{to{opacity:1;translate:0 0}}
.js .hero .eyebrow,.js .hero-copy>p:not(.eyebrow),.js .hero-actions{opacity:0;translate:0 18px;animation:wordIn .8s var(--ease) forwards}
.js .hero .eyebrow{animation-delay:.05s}.js .hero-copy>p:not(.eyebrow){animation-delay:.55s}.js .hero-actions{animation-delay:.7s}
.js .hero-bubble{opacity:0;rotate:-24deg;animation:popIn .9s var(--ease) forwards,bob 7s ease-in-out infinite alternate,breathe 5s ease-in-out infinite;animation-delay:calc(var(--n,0)*110ms + .2s),calc(var(--n,0)*110ms + 1.1s),0s}
@keyframes popIn{from{opacity:0;rotate:-24deg}to{opacity:1;rotate:0deg}}
.hero-bubble.b1{--n:0}.hero-bubble.b2{--n:1}.hero-bubble.b3{--n:2}.hero-bubble.b4{--n:3}.hero-bubble.b5{--n:4}.hero-bubble.b6{--n:5}.hero-bubble.b7{--n:6}

/* Aparición al hacer scroll */
.js [data-reveal]{opacity:0;translate:0 34px;scale:.97;transition:opacity .8s var(--ease),translate .9s var(--ease),scale .9s var(--ease);transition-delay:calc(var(--d,0)*90ms)}
.js [data-reveal="left"]{translate:-46px 0}.js [data-reveal="right"]{translate:46px 0}.js [data-reveal="zoom"]{translate:0 0;scale:.82}
.js [data-reveal].in{opacity:1;translate:0 0;scale:1}

/* Cinta de beneficios */
.marquee{position:relative;z-index:1;overflow:hidden;margin:clamp(18px,3.5vw,36px) 0 0;padding:10px 0;
  -webkit-mask-image:linear-gradient(90deg,transparent,#000 8%,#000 92%,transparent);mask-image:linear-gradient(90deg,transparent,#000 8%,#000 92%,transparent)}
.marquee-track{display:flex;width:max-content;animation:marquee 40s linear infinite}
.marquee-group{display:flex}
.marquee span{display:inline-flex;align-items:center;gap:16px;padding-right:16px;font-size:clamp(20px,3.4vw,34px);font-weight:800;letter-spacing:-.03em;color:#0d6f91;white-space:nowrap}
.marquee span::after{content:"";width:12px;height:12px;border-radius:50%;background:radial-gradient(circle at 30% 30%,#fff,#5fd6dd);box-shadow:0 0 0 4px rgba(95,214,221,.25)}
.marquee span:nth-child(even){color:transparent;-webkit-text-stroke:1.5px #0d6f91}
@keyframes marquee{to{transform:translateX(-50%)}}
.marquee:hover .marquee-track{animation-play-state:paused}

/* Inclinación 3D y botones magnéticos (solo con mouse) */
.tilt{transform:perspective(900px) rotateX(var(--rx,0deg)) rotateY(var(--ry,0deg));transition:transform .25s ease-out,box-shadow .3s}
.tilt.tilting{transition:transform .08s linear,box-shadow .3s}
.kit-card.tilt:hover,.combo-page-card.tilt:hover{box-shadow:0 28px 60px rgba(6,70,92,.18)}
.magnetic{translate:var(--tx,0) var(--ty,0);transition:translate .25s var(--ease),transform .2s var(--ease),box-shadow .2s}

/* Contenido de la ficha animada */
.stage-copy.anim .step,.stage-copy.anim h3,.stage-copy.anim>p,.stage-copy.anim #stepLink{animation:copyIn .6s var(--ease) both}
.stage-copy.anim h3{animation-delay:.06s}.stage-copy.anim>p{animation-delay:.12s}.stage-copy.anim #stepLink{animation-delay:.3s}
.stage-copy.anim .facts div{animation:copyIn .6s var(--ease) both}
.stage-copy.anim .facts div:nth-child(1){animation-delay:.16s}.stage-copy.anim .facts div:nth-child(2){animation-delay:.21s}.stage-copy.anim .facts div:nth-child(3){animation-delay:.26s}.stage-copy.anim .facts div:nth-child(4){animation-delay:.31s}
@keyframes copyIn{from{opacity:0;translate:0 16px}to{opacity:1;translate:0 0}}
.stage-progress,.stage-skip{display:none}

/* Preferencias del sistema: sin movimiento */
@media(prefers-reduced-motion:reduce){
  *,*::before,*::after{animation:none!important;transition:none!important;scroll-behavior:auto!important}
  .js [data-reveal],.js .hero h1 .w,.js .hero .eyebrow,.js .hero-copy>p,.js .hero-actions,.js .hero-bubble{opacity:1!important;translate:none!important;scale:none!important;rotate:none!important}
  .marquee-track{width:auto;flex-wrap:wrap}
}
@media(hover:none){.tilt{transform:none!important}}

/* ==========================================================================
   v2.4 — logo integrado, hero grande y clicable, secciones de venta,
   gotas 3D de fondo, ficha fija en todas las pantallas
   ========================================================================== */

/* ---------- Logo: gota + nombre + descriptor como un solo bloque ---------- */
.brand{display:flex;align-items:center;gap:0;min-width:0;flex:0 1 auto;--wm:92px}
.brand-symbol{width:30px;height:auto;aspect-ratio:192/201;object-fit:contain;flex:none;margin-right:-2px;filter:drop-shadow(0 3px 6px rgba(13,111,145,.25));transition:transform .5s var(--ease)}
.brand:hover .brand-symbol{transform:translateY(-2px) rotate(-8deg) scale(1.06)}
.brand-lockup{display:grid;width:var(--wm);gap:3px;min-width:0}
.brand-word{width:100%;height:auto;aspect-ratio:960/198;object-fit:contain;object-position:left center}
.brand-lockup small{display:none;width:100%;font-size:calc(var(--wm)*.066);letter-spacing:.04em;text-transform:uppercase;font-weight:800;color:#2a7389;line-height:1;white-space:nowrap;text-align:justify;text-align-last:justify}
@media(min-width:520px){.brand{--wm:104px}.brand-symbol{width:34px}.brand-lockup small{display:block}}
@media(min-width:900px){.brand{--wm:112px}.brand-symbol{width:36px}}

/* ---------- Texto de apoyo y confianza ---------- */
.hero-lead{font-size:clamp(15px,1.5vw,18px);line-height:1.6;color:var(--text);max-width:52ch}
.trust{display:flex;flex-wrap:wrap;gap:6px 14px;margin-top:18px}
.trust li{position:relative;padding-left:22px;font-size:13px;font-weight:700;color:#0b5a73}
.trust li::before{content:"";position:absolute;left:0;top:50%;width:15px;height:15px;margin-top:-8px;border-radius:50%;background:#0d6f91 url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16'%3E%3Cpath d='M4.5 8.4l2.3 2.3 4.7-5' fill='none' stroke='white' stroke-width='1.8' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E") center/100% no-repeat}
.trust sup,.fineprint sup{font-size:.7em}
.fineprint{font-size:11.5px;line-height:1.5;color:var(--muted);margin-top:12px;max-width:62ch}
.fineprint.center{text-align:center;margin-inline:auto}
.legal{max-width:760px;margin:14px auto 0;font-size:12px;line-height:1.6;color:var(--muted)}
.center{text-align:center}
.hero-actions a:first-child{flex:1.4 1 220px}
.hero-actions .primary{animation:ctaGlow 3.6s ease-in-out infinite}
@keyframes ctaGlow{50%{box-shadow:0 10px 24px rgba(5,58,78,.22),0 0 0 8px rgba(113,238,231,.28)}}

/* ---------- Hero: burbujas grandes, sin solaparse, clicables, en 3D ---------- */
.hero-bubbles{transform-style:preserve-3d;transform:perspective(1200px) rotateY(calc(var(--mx,0)*7deg)) rotateX(calc(var(--my,0)*-7deg));transition:transform .5s ease-out}
.hero-bubble{display:block;color:inherit;transform-style:preserve-3d;transform:translate3d(calc(var(--mx,0)*var(--depth,10)*1px),calc(var(--my,0)*var(--depth,10)*1px),calc(var(--z,0)*1px));
  cursor:pointer;-webkit-tap-highlight-color:transparent}
.hero-bubble img{transition:transform .5s var(--ease)}
.hero-bubble:hover img,.hero-bubble:focus-visible img{transform:scale(1.07)}
.hero-bubble:hover,.hero-bubble:focus-visible{box-shadow:0 26px 56px rgba(6,70,92,.28),inset 0 0 0 6px rgba(255,255,255,.8),inset 0 -14px 30px rgba(31,147,169,.18)}
.hero-bubble.b1{left:-.43%;top:53.19%;width:46.31%;--z:40}
.hero-bubble.b2{left:54.89%;top:57.4%;width:42.1%;--z:30}
.hero-bubble.b3{left:65.26%;top:0;width:30.52%;--z:10}
.hero-bubble.b4{left:35.92%;top:31.21%;width:32.63%;--z:60}
.hero-bubble.b5{left:0;top:13.86%;width:37.89%;--z:25}
.hero-bubble.b6{left:34.19%;top:.31%;width:29.47%;--z:15}
.hero-bubble.b7{left:73.19%;top:31.04%;width:26.31%;--z:50}
.bubble-tag{position:absolute;left:50%;bottom:7%;translate:-50% 0;z-index:5;padding:3px 10px;border-radius:999px;font-size:clamp(9px,1.5vw,12px);font-weight:800;letter-spacing:.02em;white-space:nowrap;
  background:rgba(7,60,79,.92);color:#fff;box-shadow:0 4px 12px rgba(5,58,78,.3);pointer-events:none;transition:background .2s,transform .3s var(--ease)}
.hero-bubble:hover .bubble-tag,.hero-bubble:focus-visible .bubble-tag{background:#0d6f91;transform:translateY(-3px)}
.hero-bubbles::after{content:"Tocá una burbuja para ver su ficha";position:absolute;left:50%;bottom:-6px;translate:-50% 100%;font-size:11px;font-weight:700;color:#2a7389;white-space:nowrap;letter-spacing:.04em;opacity:.8}
.hero{padding-bottom:clamp(30px,5vw,56px)}
@media(max-width:899px){.hero-bubbles{margin-bottom:16px}}

/* Brillo especular que sigue al puntero */
.gloss{position:absolute;inset:0;border-radius:50%;pointer-events:none;z-index:4;
  background:radial-gradient(circle at var(--lx,30%) var(--ly,22%),rgba(255,255,255,.7),rgba(255,255,255,.12) 26%,transparent 46%),
             linear-gradient(145deg,rgba(255,255,255,.28),transparent 40%,rgba(31,147,169,.1))}

/* ---------- Gotas de agua 3D (canvas de fondo) ---------- */
#drops{position:fixed;inset:0;width:100%;height:100%;z-index:0;pointer-events:none;opacity:.72}
.site-ambient,.flow-streams{display:none}
.has-drops .site-ambient{display:block;opacity:.55}

/* ---------- Test express ---------- */
.quiz{width:min(100%,var(--max));margin:0 auto;padding:clamp(48px,8vw,100px) var(--pad) 0}
.quiz-wrap{display:grid;gap:clamp(20px,4vw,48px);align-items:center;padding:clamp(22px,4vw,56px);border-radius:var(--radius);color:#fff;position:relative;overflow:hidden;
  background:radial-gradient(circle at 15% 0,rgba(113,238,231,.3),transparent 52%),linear-gradient(135deg,#06384a,#0a5a74)}
.quiz-head h2{font-size:clamp(30px,5.2vw,56px);line-height:1;letter-spacing:-.04em;margin:10px 0 14px;font-weight:800;text-wrap:balance}
.quiz-head h2 em{color:#8fe9ea}
.quiz-head .eyebrow{color:#8fe6ec}
.quiz-head>p:last-child{color:#d4eef2;line-height:1.65;max-width:46ch}
.quiz-card{position:relative;padding:clamp(16px,3vw,28px);border-radius:28px;background:rgba(255,255,255,.96);color:var(--ink);box-shadow:0 24px 60px rgba(0,0,0,.25);min-height:300px;display:flex;flex-direction:column}
.quiz-step{display:flex;flex-direction:column;gap:14px;flex:1;animation:copyIn .5s var(--ease) both}
.quiz-meter{display:flex;gap:6px}
.quiz-meter i{flex:1;height:5px;border-radius:5px;background:rgba(13,111,145,.15)}
.quiz-meter i.on{background:linear-gradient(90deg,#71eee7,#0d6f91)}
.quiz-q{font-size:clamp(20px,3vw,26px);font-weight:800;letter-spacing:-.02em;line-height:1.15}
.quiz-opts{display:grid;gap:10px}
.quiz-opt{display:flex;align-items:center;gap:12px;min-height:58px;padding:10px 16px;text-align:left;border-radius:18px;border:1.5px solid var(--line);background:#f4fcfd;font-weight:700;font-size:15px;color:var(--ink);transition:transform .2s var(--ease),border-color .2s,background .2s,box-shadow .2s}
.quiz-opt:hover,.quiz-opt:focus-visible{border-color:#0d6f91;background:#fff;transform:translateY(-2px);box-shadow:0 10px 24px rgba(6,70,92,.12)}
.quiz-opt small{display:block;font-weight:500;color:var(--muted);font-size:13px;margin-top:1px}
.quiz-opt .qi{flex:none;display:grid;place-items:center;width:38px;height:38px;border-radius:50%;background:#e1f6f9;font-size:18px}
.quiz-back{align-self:flex-start;min-height:40px;padding:0 4px;border:0;background:none;font-weight:700;font-size:13px;color:var(--teal)}
.quiz-result{display:grid;gap:14px;animation:copyIn .6s var(--ease) both}
.quiz-result .tag{font-size:11px;letter-spacing:.16em;font-weight:800;color:#157b9b;text-transform:uppercase}
.quiz-pick{display:grid;grid-template-columns:96px 1fr;gap:14px;align-items:center}
.quiz-pick .water-bubble{width:96px;aspect-ratio:1;animation:none}
.quiz-pick h3{font-size:clamp(22px,3vw,28px);letter-spacing:-.03em;line-height:1.05}
.quiz-pick p{font-size:14px;color:var(--text);line-height:1.5;margin-top:4px}
.quiz-acts{display:flex;flex-wrap:wrap;gap:8px}
.quiz-acts a{flex:1 1 180px}
@media(min-width:900px){.quiz-wrap{grid-template-columns:minmax(0,.9fr) minmax(0,1.1fr)}}

/* ---------- Beneficios y números ---------- */
.benefits,.how,.faq{width:min(100%,var(--max));margin:0 auto;padding:clamp(48px,8vw,100px) var(--pad) 0}
.section-head{max-width:760px;margin-bottom:clamp(22px,4vw,44px)}
.section-head h2{font-size:clamp(30px,5.2vw,56px);line-height:1;letter-spacing:-.04em;margin:10px 0 0;font-weight:800;text-wrap:balance}
.benefit-grid{display:grid;gap:12px}
.benefit{padding:clamp(18px,2.5vw,26px);border-radius:26px;background:var(--card);border:1px solid var(--line);box-shadow:0 14px 34px rgba(6,70,92,.06);transition:transform .3s var(--ease),box-shadow .3s}
.benefit:hover{transform:translateY(-4px);box-shadow:0 22px 44px rgba(6,70,92,.12)}
.benefit svg{width:34px;height:34px;color:#0d6f91;margin-bottom:12px}
.benefit h3{font-size:18px;letter-spacing:-.02em;margin-bottom:6px}
.benefit p{font-size:14px;line-height:1.6;color:var(--text)}
.stats{display:grid;gap:10px;margin-top:clamp(18px,3vw,32px)}
.stat{padding:clamp(18px,3vw,28px);border-radius:26px;background:linear-gradient(135deg,#06384a,#0a5a74);color:#fff;text-align:center}
.stat b{display:block;font-size:clamp(38px,6vw,64px);letter-spacing:-.04em;line-height:1;color:#8fe9ea;font-variant-numeric:tabular-nums}
.stat span{display:block;margin-top:8px;font-size:14px;color:#d4eef2}
@media(min-width:600px){.benefit-grid{grid-template-columns:repeat(2,minmax(0,1fr))}.stats{grid-template-columns:repeat(3,minmax(0,1fr))}}
@media(min-width:1000px){.benefit-grid{grid-template-columns:repeat(4,minmax(0,1fr))}}
.how-steps{display:grid;gap:12px;counter-reset:s}
.how-steps li{position:relative;padding:22px 22px 22px 78px;border-radius:26px;background:var(--card);border:1px solid var(--line)}
.how-steps span{position:absolute;left:20px;top:20px;display:grid;place-items:center;width:42px;height:42px;border-radius:50%;background:#073c4f;color:#8fe9ea;font-weight:800;font-size:18px}
.how-steps h3{font-size:20px;letter-spacing:-.02em;margin-bottom:4px}
.how-steps p{font-size:14px;line-height:1.6;color:var(--text)}
@media(min-width:760px){.how-steps{grid-template-columns:repeat(3,minmax(0,1fr))}.how-steps li{padding:84px 22px 24px}.how-steps span{left:22px;top:22px}}

/* ---------- Productos: jerarquía de burbujas, textos de venta ---------- */
.detail-bubble.bubble-xl{width:min(100%,540px)}
.detail-bubble.bubble-lg{width:min(88%,460px)}
.detail-bubble.bubble-md{width:min(74%,370px)}
.product-hero .water-bubble.bubble-xl{width:min(100%,500px)}
.product-copy .hook{font-size:clamp(18px,2.2vw,24px);font-weight:800;letter-spacing:-.02em;color:var(--teal);line-height:1.2;margin-bottom:10px}
.checks{display:grid;gap:8px;margin:16px 0}
.checks li{position:relative;padding-left:30px;font-size:15px;line-height:1.5;color:var(--ink);font-weight:600}
.checks li::before{content:"";position:absolute;left:0;top:2px;width:20px;height:20px;border-radius:50%;background:#0d6f91 url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16'%3E%3Cpath d='M4.5 8.4l2.3 2.3 4.7-5' fill='none' stroke='white' stroke-width='1.8' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E") center/100% no-repeat}
.ideal{padding:12px 16px;border-radius:16px;background:linear-gradient(120deg,#e1f8f9,#f1fdfe);border:1px solid var(--line);font-size:14px;line-height:1.5;color:#145468;margin:0 0 18px}
.product-actions{display:flex;flex-wrap:wrap;gap:10px;margin:0 0 18px;align-items:center}
.product-copy .product-actions>a{position:static}
.ghost{display:inline-flex;align-items:center;justify-content:center;min-height:48px;padding:0 20px;border-radius:999px;font-weight:800;font-size:14px;color:#073c4f;border:1.5px solid rgba(13,111,145,.3);background:rgba(255,255,255,.7);transition:background .2s,transform .2s}
.ghost:hover{background:#fff;transform:translateY(-2px)}
.product-copy>.product-actions>a.primary{background:#073c4f;color:#fff}
.spec-grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(min(100%,200px),1fr));gap:8px;margin:0;padding:0 12px 14px}
.spec-grid div{padding:12px 14px;border-radius:16px;background:#f1fbfc;border:1px solid var(--line)}
.spec-grid dt{font-size:10.5px;letter-spacing:.14em;text-transform:uppercase;font-weight:800;color:#2b8aa5;margin-bottom:3px}
.spec-grid dd{margin:0;font-weight:600;font-size:14px;color:var(--ink);line-height:1.4}
.spec-block .spec-grid{padding:0;margin:14px 0}
.more-info summary span{font-weight:800}
.repl-note{margin-top:14px;padding:12px 16px;border-radius:16px;background:#e6f8fa;font-size:14px;color:#145468}
.repl-note a{font-weight:800;text-decoration:underline;text-underline-offset:3px}
.kit-hook{font-weight:800;color:var(--teal);font-size:16px}
.kit-links,.kits-links{display:flex;flex-wrap:wrap;gap:8px}
.kit-links a{font-size:13px;font-weight:700;color:var(--teal);text-decoration:underline;text-underline-offset:3px;min-height:32px;display:inline-flex;align-items:center}
.kit-copy>a.primary{margin-top:auto}
.kit-card .primary,.kit-copy>a.primary{color:#fff}

/* ---------- FAQ ---------- */
.faq-list{display:grid;gap:8px;max-width:820px}
.faq-list details,.seo-faq details{border-radius:20px;background:var(--card);border:1px solid var(--line);overflow:hidden;transition:box-shadow .25s}
.faq-list details[open]{box-shadow:0 14px 34px rgba(6,70,92,.1);background:#fff}
.faq-list summary,.seo-faq summary{display:flex;align-items:center;justify-content:space-between;gap:12px;min-height:58px;padding:12px 20px;font-weight:800;cursor:pointer;list-style:none;line-height:1.3}
.faq-list summary::-webkit-details-marker,.seo-faq summary::-webkit-details-marker{display:none}
.faq-list summary b,.seo-faq summary b{flex:none;display:grid;place-items:center;width:28px;height:28px;border-radius:50%;background:#073c4f;color:#fff;transition:transform .25s}
.faq-list details[open] summary b,.seo-faq details[open] summary b{transform:rotate(45deg)}
.faq-list details p,.seo-faq details p{padding:0 20px 18px;line-height:1.65;color:var(--text);font-size:15px}
.faq{padding-bottom:0}
.kits-head{margin-top:0}

/* ---------- Fichas internas: tarjetas relacionadas ---------- */
.rel-grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(min(100%,200px),1fr));gap:10px}
.rel-card{display:grid;gap:4px;justify-items:start;padding:14px;border-radius:22px;background:var(--card);border:1px solid var(--line);transition:transform .25s var(--ease),box-shadow .25s}
.rel-card:hover{transform:translateY(-3px);box-shadow:0 16px 34px rgba(6,70,92,.1)}
.rel-bub{width:64px;aspect-ratio:1;border-radius:50%;background:#fff;box-shadow:0 8px 18px rgba(6,70,92,.14),inset 0 0 0 3px rgba(255,255,255,.8);overflow:hidden;margin-bottom:6px}
.rel-bub img{width:100%;height:100%;object-fit:contain;padding:6px}
.rel-card b{font-size:15px}
.rel-card small{font-size:12.5px;color:var(--muted);line-height:1.4}

/* ---------- Barra de compra fija (móvil) ---------- */
.cta-bar{position:fixed;z-index:160;left:0;right:0;bottom:0;padding:10px max(12px,env(safe-area-inset-left)) max(10px,env(safe-area-inset-bottom));
  background:linear-gradient(180deg,transparent,rgba(243,251,253,.92) 40%);transform:translateY(110%);transition:transform .45s var(--ease);pointer-events:none}
.cta-bar .primary{width:100%;pointer-events:auto;background:#0b8f6a;box-shadow:0 12px 30px rgba(11,143,106,.4)}
.cta-bar.show{transform:none}
@media(max-width:899px){body{padding-bottom:0}footer{padding-bottom:calc(92px + env(safe-area-inset-bottom))}.back-top{bottom:calc(84px + env(safe-area-inset-bottom))}.back-top span{display:none}}
@media(min-width:900px){.cta-bar{display:none}}
.product-page .cta-bar,.page-main~.cta-bar{transform:none}

/* ==========================================================================
   Ficha 1→7 fija: funciona en celulares, tablets y escritorio
   ========================================================================== */
.stage-actions{display:flex;flex-wrap:wrap;align-items:center;gap:12px;margin-top:16px}
.stage-actions .primary{min-height:50px}
.stage-bubble{--bw:min(100%,360px);width:calc(var(--bw)*var(--k,1))}
.stage-bubble img{transition:opacity .25s}
@media(min-width:360px) and (min-height:540px){
  .solutions-scroll.pinned{height:calc(var(--steps,7)*42svh + 100svh);padding-top:clamp(36px,6vw,80px)}
  .pinned .solution-stage{position:sticky;top:calc(var(--header-h) + 14px);height:calc(100svh - var(--header-h) - 28px);max-height:820px;
    padding:12px 14px;gap:8px;grid-template-rows:auto minmax(0,1fr) auto;border-radius:clamp(22px,4vw,40px)}
  .pinned .stage-heading{display:none}
  .pinned .stage-grid{grid-template-columns:1fr;grid-template-rows:minmax(0,1fr) auto;gap:6px;align-content:stretch;min-height:0}
  .pinned .stage-visual{order:0;min-height:0;display:grid;place-items:center}
  .pinned .stage-bubble{--bw:min(46vw,31svh)}
  .pinned .bubble-rings{width:calc(min(46vw,31svh)*1.22)}
  .pinned #visualLabel{display:none}
  .pinned .stage-copy{display:flex;flex-direction:column;justify-content:flex-end;min-height:0}
  .pinned .stage-copy h3{font-size:clamp(28px,4.8svh,44px);margin:4px 0 6px}
  .pinned .stage-copy>p{min-height:0;font-size:clamp(13.5px,1.9svh,16px);line-height:1.45;display:-webkit-box;-webkit-line-clamp:4;-webkit-box-orient:vertical;overflow:hidden}
  .pinned .facts{display:none}
  .pinned .stage-actions{margin-top:10px;gap:10px}
  .pinned .stage-actions .primary{min-height:46px;padding:0 20px;flex:1 1 150px}
  .pinned .stage-progress{display:block;position:relative;z-index:1;height:4px;border-radius:4px;background:rgba(13,111,145,.12);overflow:hidden;margin-bottom:2px}
  .pinned .stage-progress i{display:block;height:100%;transform-origin:0 50%;transform:scaleX(var(--sp,0));background:linear-gradient(90deg,#71eee7,#0d6f91)}
  .pinned .stage-skip{display:inline-flex;align-items:center;position:absolute;z-index:3;right:14px;top:20px;min-height:34px;padding:0 12px;border-radius:999px;background:rgba(255,255,255,.92);border:1px solid var(--line);font-size:11px;font-weight:800;color:var(--teal)}
  .pinned .stage-selector{padding:2px 2px 4px;margin:0;gap:6px}
  .pinned .stage-selector button{min-height:38px;padding:0 12px;font-size:11.5px}
  .pinned .stage-selector button:not(.active) b{display:none}
}
@media(min-width:360px) and (min-height:760px){.pinned .facts{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));margin:8px 0 0}.pinned .facts div{padding:6px 10px}.pinned .stage-copy>p{-webkit-line-clamp:5}}
@media(min-width:900px) and (min-height:540px){
  .pinned .solution-stage{padding:clamp(16px,2.2vw,32px) clamp(18px,3vw,44px);gap:10px}
  .pinned .stage-heading{display:none}
  .pinned .stage-grid{grid-template-columns:minmax(0,1fr) minmax(0,1fr);grid-template-rows:minmax(0,1fr);gap:clamp(18px,3vw,48px);align-items:center}
  .pinned .stage-visual{order:2}
  .pinned .stage-copy{justify-content:center}
  .pinned .stage-bubble{--bw:min(100%,52vh,520px)}
  .pinned .bubble-rings{width:calc(min(100%,52vh,520px)*1.18)}
  .pinned #visualLabel{display:block}
  .pinned .stage-copy h3{font-size:clamp(38px,7.2vh,68px)}
  .pinned .stage-copy>p{font-size:clamp(14.5px,2vh,18px);-webkit-line-clamp:5}
  .pinned .stage-selector{flex-wrap:wrap;justify-content:center}
  .pinned .stage-selector button{min-height:40px}
  .pinned .stage-selector button:not(.active) b{display:inline}
  .pinned .stage-skip{right:clamp(18px,3vw,44px);top:clamp(16px,2vw,28px)}
}
@media(min-width:900px) and (min-height:700px){.pinned .facts{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:6px;margin:12px 0 0}}

/* Rotación 3D de burbujas con el scroll (solo con JS) */
.js .detail-bubble{transform:perspective(1000px) rotateY(calc(var(--ry3,0)*1deg + var(--ry,0deg))) rotateX(var(--rx,0deg))}
@media(max-width:599px){.hero-bubbles::after{font-size:10px}}
.stage-selector{position:relative}

/* ==========================================================================
   v2.5 — banner a ancho de contenido, logo homogéneo, órbita de productos,
   fondo de filtración, botones de vidrio líquido, íconos y botones flotantes
   ========================================================================== */
:root{--wide:min(calc(100% - 16px),var(--max))}

/* ---------- Anchos alineados: banner = hero = fichas ---------- */
@media(min-width:900px){.topbar{width:var(--wide)}}
.solutions-scroll,.quiz{width:var(--wide);padding-inline:0}

/* ---------- Logo: gota, nombre y descriptor con la misma altura ---------- */
@media(min-width:520px){
  .brand{--wm:92px;--lh:calc(var(--wm)*.3106 + 3px);gap:4px;align-items:center}
  .brand-symbol{height:var(--lh);width:auto;aspect-ratio:192/201;margin-right:0}
  .brand-lockup{gap:3px;align-content:center}
}
@media(min-width:900px){.brand{--wm:100px}}

/* ---------- Fondo: sobrio, con el agua que se aclara al bajar ---------- */
body{background:#eef8fa}
body::before{content:"";position:fixed;inset:0;z-index:0;pointer-events:none;
  background:
    radial-gradient(70vmax 46vmax at calc(10% + var(--prog,0)*80%) 8%,rgba(113,238,231,.20),transparent 62%),
    radial-gradient(60vmax 40vmax at calc(95% - var(--prog,0)*70%) 92%,rgba(13,111,145,.10),transparent 60%),
    linear-gradient(180deg,#e9f0f2,#eef6f8 50%,#eefafc);
  background:
    radial-gradient(70vmax 46vmax at calc(10% + var(--prog,0)*80%) 8%,rgba(113,238,231,.20),transparent 62%),
    radial-gradient(60vmax 40vmax at calc(95% - var(--prog,0)*70%) 92%,rgba(13,111,145,.10),transparent 60%),
    linear-gradient(180deg,color-mix(in srgb,#e6ecee calc((1 - var(--prog,0))*100%),#e4faff),color-mix(in srgb,#eef3f4 calc((1 - var(--prog,0))*100%),#f1fdff))}
#flow{position:fixed;inset:0;width:100%;height:100%;z-index:0;pointer-events:none;opacity:.85}
.grain{position:fixed;inset:0;z-index:0;pointer-events:none;opacity:.045;mix-blend-mode:multiply;
  background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='160' height='160'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.9' numOctaves='2' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E")}
.final::after{content:"";position:absolute;inset:-50%;z-index:0;pointer-events:none;background:conic-gradient(from 0deg,transparent 0 60%,rgba(113,238,231,.16) 80%,transparent);animation:spin 22s linear infinite}
.final>*:not(.final-motion){z-index:1}
@keyframes spin{to{rotate:360deg}}

/* ---------- Hero: Infinit al centro, el resto en órbita, todas iguales ---------- */
.hero-bubble.pos-c,.hero-bubble.pos-t,.hero-bubble.pos-ur,.hero-bubble.pos-lr,.hero-bubble.pos-b,.hero-bubble.pos-ll,.hero-bubble.pos-ul{width:32%}
.hero-bubble.pos-c{left:34%;top:34%;--z:70;box-shadow:0 26px 54px rgba(6,70,92,.26),inset 0 0 0 6px rgba(255,255,255,.8),0 0 0 10px rgba(113,238,231,.2),0 0 0 22px rgba(113,238,231,.09)}
.hero-bubble.pos-t{left:34%;top:0;--z:30}
.hero-bubble.pos-ur{left:63.44%;top:17%;--z:20}
.hero-bubble.pos-lr{left:63.44%;top:51%;--z:35}
.hero-bubble.pos-b{left:34%;top:68%;--z:25}
.hero-bubble.pos-ll{left:4.56%;top:51%;--z:35}
.hero-bubble.pos-ul{left:4.56%;top:17%;--z:20}
.orbit-ring{position:absolute;left:50%;top:50%;width:68%;aspect-ratio:1;translate:-50% -50%;border-radius:50%;border:1.5px dashed rgba(13,111,145,.3);pointer-events:none;z-index:1;animation:spin 70s linear infinite}
.orbit-ring::after{content:"";position:absolute;left:50%;top:-6px;width:12px;height:12px;margin-left:-6px;border-radius:50%;background:radial-gradient(circle at 35% 30%,#fff,#5fd6dd 60%,#0d6f91);box-shadow:0 0 0 5px rgba(95,214,221,.22),0 0 18px rgba(95,214,221,.7)}
.orbit-ring.r2{width:98%;border:1px solid rgba(13,111,145,.12);animation-duration:110s;animation-direction:reverse}
.orbit-ring.r2::after{top:auto;bottom:-5px;width:8px;height:8px;margin-left:-4px;opacity:.7}
.js .hero-bubble{--n:0}

/* ---------- Botones: vidrio líquido ---------- */
:root{--r:26px}
@property --gx{syntax:"<percentage>";inherits:true;initial-value:30%}
@property --gy{syntax:"<percentage>";inherits:true;initial-value:0%}
body .primary,body a.primary,body .hero-actions a.primary,body .product-actions .primary,body .tech-cta>a,body .combo-wa,body .button,body .kit-copy>a.primary,
body .combo-page-copy a.primary,body .quiz-acts .primary,body .stage-actions .primary{
  position:relative;isolation:isolate;overflow:hidden;border-radius:var(--r);color:#fff;text-shadow:0 1px 2px rgba(0,30,40,.35);
  background:linear-gradient(150deg,rgba(18,128,160,.94),rgba(5,50,68,.96) 70%);
  border:1px solid rgba(255,255,255,.38);
  -webkit-backdrop-filter:blur(14px) saturate(170%);backdrop-filter:blur(14px) saturate(170%);
  box-shadow:0 14px 30px rgba(5,58,78,.32),inset 0 1.5px 0 rgba(255,255,255,.6),inset 0 -12px 20px rgba(113,238,231,.2),inset 0 0 0 1px rgba(255,255,255,.07);
  transition:transform .3s var(--ease),box-shadow .3s}
body .primary::before,body .tech-cta>a::before,body .combo-wa::before{content:"";position:absolute;inset:0;z-index:-1;border-radius:inherit;pointer-events:none;
  background:radial-gradient(140px circle at var(--gx) var(--gy),rgba(255,255,255,.55),transparent 62%);opacity:.5;transition:opacity .3s}
body .primary::after,body .tech-cta>a::after,body .combo-wa::after{content:"";position:absolute;top:-10%;left:-70%;width:36%;height:120%;z-index:-1;pointer-events:none;
  background:linear-gradient(100deg,transparent,rgba(255,255,255,.6),transparent);transform:skewX(-20deg);transition:left .9s var(--ease)}
body .primary:hover::before,body .tech-cta>a:hover::before,body .combo-wa:hover::before{opacity:1}
body .primary:hover::after,body .tech-cta>a:hover::after,body .combo-wa:hover::after{left:135%}
body .primary:hover,body .tech-cta>a:hover,body .combo-wa:hover{transform:translateY(-2px);animation:glassMorph 2.4s ease-in-out infinite;
  box-shadow:0 20px 40px rgba(5,58,78,.38),inset 0 1.5px 0 rgba(255,255,255,.7),inset 0 -12px 22px rgba(113,238,231,.3)}
body .primary:active{transform:translateY(0) scale(.97)}
@keyframes glassMorph{0%,100%{border-radius:26px}30%{border-radius:30px 16px 30px 16px}65%{border-radius:16px 30px 16px 30px}}

body .ghost,body .hero-actions a:not(.primary),body .stage-skip,body .combo-component-links a,body #stepLink{
  position:relative;border-radius:var(--r);color:#073c4f;
  background:linear-gradient(150deg,rgba(255,255,255,.78),rgba(255,255,255,.3));
  border:1px solid rgba(255,255,255,.85);
  -webkit-backdrop-filter:blur(14px) saturate(180%);backdrop-filter:blur(14px) saturate(180%);
  box-shadow:0 10px 24px rgba(6,70,92,.12),inset 0 1.5px 0 #fff,inset 0 -10px 16px rgba(113,238,231,.16);
  transition:transform .3s var(--ease),box-shadow .3s,background .3s}
body .ghost:hover,body .hero-actions a:not(.primary):hover,body .stage-skip:hover,body .combo-component-links a:hover{transform:translateY(-2px);animation:glassMorph 2.4s ease-in-out infinite;
  background:linear-gradient(150deg,rgba(255,255,255,.95),rgba(225,250,252,.6));box-shadow:0 16px 32px rgba(6,70,92,.18),inset 0 1.5px 0 #fff,inset 0 -10px 18px rgba(113,238,231,.28)}
body #stepLink{display:inline-flex;align-items:center;justify-content:center;min-height:46px;padding:0 18px;font-weight:800;color:#0b5a73}

body .top-actions a.wa{border-radius:999px;color:#06384a;border:1px solid rgba(255,255,255,.8);
  background:linear-gradient(150deg,rgba(190,255,238,.95),rgba(110,224,225,.78));
  box-shadow:0 8px 20px rgba(13,111,145,.2),inset 0 1.5px 0 #fff,inset 0 -8px 14px rgba(13,111,145,.14)}
body .top-actions a.ig,body .menu-toggle{border:1px solid rgba(255,255,255,.85);color:#174e5e;
  background:linear-gradient(150deg,rgba(255,255,255,.85),rgba(255,255,255,.4));
  box-shadow:0 8px 20px rgba(6,70,92,.12),inset 0 1.5px 0 #fff,inset 0 -8px 14px rgba(113,238,231,.16)}
body .cta-bar .primary{background:linear-gradient(150deg,rgba(37,205,150,.95),rgba(7,112,86,.97) 75%);box-shadow:0 14px 32px rgba(7,112,86,.42),inset 0 1.5px 0 rgba(255,255,255,.6),inset 0 -12px 20px rgba(160,255,225,.25)}
body .final a{border-radius:var(--r);border:1px solid rgba(255,255,255,.7);color:#06384a;
  background:linear-gradient(150deg,rgba(210,255,248,.97),rgba(120,232,232,.85));
  box-shadow:0 14px 30px rgba(0,0,0,.22),inset 0 1.5px 0 #fff,inset 0 -10px 18px rgba(13,111,145,.18);transition:transform .3s var(--ease)}
body .final a.instagram{color:#fff;background:linear-gradient(150deg,rgba(255,255,255,.26),rgba(255,255,255,.08));border-color:rgba(255,255,255,.5);
  -webkit-backdrop-filter:blur(14px);backdrop-filter:blur(14px);box-shadow:0 12px 26px rgba(0,0,0,.2),inset 0 1.5px 0 rgba(255,255,255,.6)}
body .final a:hover{transform:translateY(-3px)}
body .stage-selector button{border:1px solid rgba(255,255,255,.85);background:linear-gradient(150deg,rgba(255,255,255,.85),rgba(255,255,255,.4));
  box-shadow:0 6px 16px rgba(6,70,92,.1),inset 0 1.5px 0 #fff}
body .stage-selector button.active{color:#aef4f4;border-color:rgba(255,255,255,.35);background:linear-gradient(150deg,rgba(18,128,160,.94),rgba(5,50,68,.96));
  box-shadow:0 10px 22px rgba(5,58,78,.3),inset 0 1.5px 0 rgba(255,255,255,.5),inset 0 -8px 14px rgba(113,238,231,.2)}
body .quiz-opt{background:linear-gradient(150deg,rgba(255,255,255,.95),rgba(232,250,252,.7));box-shadow:0 6px 16px rgba(6,70,92,.08),inset 0 1.5px 0 #fff}

/* ---------- Íconos de WhatsApp e Instagram: insignias de cristal ---------- */
.ico{position:relative;display:inline-grid;place-items:center;flex:none;width:26px;height:26px;border-radius:50%;overflow:hidden;
  background:linear-gradient(145deg,var(--i1),var(--i2));
  box-shadow:inset 0 1px 0 rgba(255,255,255,.75),inset 0 -4px 7px rgba(0,0,0,.16),0 3px 9px rgba(5,58,78,.28);text-shadow:none}
.ico::after{content:"";position:absolute;left:12%;right:12%;top:3%;height:46%;border-radius:50%;background:linear-gradient(180deg,rgba(255,255,255,.6),rgba(255,255,255,0));pointer-events:none}
.ico.wa{--i1:#58e8b4;--i2:#0a8f6a}
.ico.ig{--i1:#ffb45e;--i2:#7c3aed;background:linear-gradient(145deg,#ffb45e,#e1306c 55%,#7c3aed)}
.ico .social-svg{width:15px;height:15px;fill:#fff;filter:drop-shadow(0 1px 1px rgba(0,0,0,.3));position:relative;z-index:1}
.nav-ig .ico,.footer-contact .ico{width:24px;height:24px}
.footer-contact a{gap:9px}

/* ---------- Subir y Volver: botones flotantes de cristal ---------- */
body .back-top,body .float-back{position:fixed;z-index:150;bottom:max(18px,env(safe-area-inset-bottom));display:grid;place-items:center;
  width:54px;height:54px;min-width:0;min-height:0;padding:0;border-radius:50%;color:#073c4f;overflow:visible;
  background:linear-gradient(150deg,rgba(255,255,255,.82),rgba(255,255,255,.34));
  -webkit-backdrop-filter:blur(16px) saturate(180%);backdrop-filter:blur(16px) saturate(180%);
  border:1px solid rgba(255,255,255,.9);
  box-shadow:0 14px 30px rgba(6,70,92,.22),inset 0 1.5px 0 #fff,inset 0 -10px 16px rgba(113,238,231,.22);
  transition:opacity .3s,transform .4s var(--ease),box-shadow .3s}
body .back-top{right:max(16px,env(safe-area-inset-right));left:auto}
body .float-back{left:max(16px,env(safe-area-inset-left));right:auto;opacity:1;visibility:visible;transform:none}
body .back-top:hover,body .float-back:hover{transform:translateY(-3px);box-shadow:0 20px 38px rgba(6,70,92,.28),inset 0 1.5px 0 #fff,inset 0 -10px 18px rgba(113,238,231,.34)}
body .back-top:active,body .float-back:active{transform:scale(.94)}
.back-top .arrow,.float-back .arrow{grid-area:1/1;width:22px;height:22px;transition:transform .3s var(--ease)}
.back-top:hover .arrow{transform:translateY(-3px)}.float-back:hover .arrow{transform:translateX(-3px)}
.back-top .ring{position:absolute;inset:-1px;width:calc(100% + 2px);height:calc(100% + 2px);rotate:-90deg;pointer-events:none}
.back-top .ring circle{fill:none;stroke-width:2.6}
.back-top .ring .trk{stroke:rgba(13,111,145,.14)}
.back-top .ring .bar{stroke:#0d8fb0;stroke-linecap:round;stroke-dasharray:100;stroke-dashoffset:calc(100 - var(--prog,0)*100);filter:drop-shadow(0 0 3px rgba(95,214,221,.8))}
.back-top span,.float-back span{position:absolute;top:50%;display:block;padding:6px 12px;border-radius:999px;font-size:12px;font-weight:800;white-space:nowrap;color:#fff;
  background:rgba(7,60,79,.9);opacity:0;pointer-events:none;translate:0 -50%;transition:opacity .25s,transform .3s var(--ease)}
.back-top span{right:calc(100% + 10px);transform:translateX(8px)}
.float-back span{left:calc(100% + 10px);transform:translateX(-8px)}
.back-top:hover span,.back-top:focus-visible span,.float-back:hover span,.float-back:focus-visible span{opacity:1;transform:none}
@media(max-width:899px){
  body .back-top,body .float-back{bottom:calc(86px + env(safe-area-inset-bottom))}
  .back-top span,.float-back span{display:none}
  .home .float-back{display:none}
}

/* ---------- Transiciones: entre páginas y al hacer scroll ---------- */
@view-transition{navigation:auto}
::view-transition-old(root){animation:vtOut .3s ease both}
::view-transition-new(root){animation:vtIn .55s var(--ease) both}
@keyframes vtOut{to{opacity:0;filter:blur(10px);transform:scale(.99)}}
@keyframes vtIn{from{opacity:0;filter:blur(10px);transform:translateY(10px)}}
@supports (animation-timeline:view()){
  .kit-image img,.rel-bub img{animation:driftY linear both;animation-timeline:view();animation-range:cover 0% cover 100%}
  .section-head h2,.catalog-head h2{animation:titleIn linear both;animation-timeline:view();animation-range:entry 0% entry 55%}
  @keyframes driftY{from{translate:0 14px}to{translate:0 -14px}}
  @keyframes titleIn{from{opacity:.15;translate:0 24px;filter:blur(6px)}to{opacity:1;translate:0 0;filter:blur(0)}}
}
@media(prefers-reduced-motion:reduce){
  ::view-transition-group(*),::view-transition-old(*),::view-transition-new(*){animation:none!important}
  .orbit-ring,.final::after{animation:none}
  body .primary:hover,body .ghost:hover{animation:none}
}

/* ---------- v2.6: logo más fino y fondo de agua real ---------- */
#flow{opacity:1;image-rendering:auto}
.grain{opacity:.03}
.brand{--ww:76px;--tw:96px;gap:5px;align-items:center}
.brand-lockup{width:var(--tw);justify-items:center;gap:3px}
.brand-word{width:var(--ww)}
.brand-lockup small{font-size:6.2px;letter-spacing:.05em}
.brand-symbol{width:auto;height:27px;margin-right:0}
@media(max-width:519px){.brand{--tw:var(--ww);--ww:70px}.brand-symbol{height:24px}}
@media(min-width:900px){.brand{--ww:80px;--tw:100px}.brand-symbol{height:29px}.brand-lockup small{font-size:6.5px}}

/* ==========================================================================
   v2.7 — burbujas del hero más grandes, logo compacto, paneles legibles
   sobre el agua, galería de imágenes y visor
   ========================================================================== */

/* Logo: la gota abraza el nombre y el descriptor */
.brand{gap:3px}
.brand-symbol{margin-right:-1px}
.brand-lockup{--ww:78px;--tw:var(--ww);width:var(--tw);justify-items:start;gap:3px}
.brand-word{width:var(--ww)}
.brand-lockup small{font-size:5.9px;letter-spacing:.03em;text-align-last:justify;text-align:justify}
@media(max-width:519px){.brand{--ww:70px}.brand-lockup{--ww:70px}}
@media(min-width:900px){.brand-lockup{--ww:82px}.brand-lockup small{font-size:6.2px}}

/* Hero: cúmulo de burbujas del alto de la tarjeta de texto */
@media(min-width:900px){
  .hero{grid-template-columns:minmax(0,.8fr) minmax(0,1.2fr);gap:clamp(8px,2vw,28px);padding:clamp(14px,2vw,30px)}
  .hero h1{font-size:clamp(30px,4.2vw,54px)}
  .hero-bubbles{max-width:760px;margin-inline:auto}
  .hero-copy{padding:clamp(18px,2.4vw,32px)}
}
.hero-copy .fineprint{font-size:11px;margin-top:10px}

/* Paneles de vidrio: todo texto sobre el agua vive en una tarjeta legible */
.product,.catalog-head,.section-head,.combos-intro,.tech-intro,.prose,.spec-block,.seo-faq,.related,.gallery,.kits-section>.catalog-head,.tech-cta{
  position:relative;background:linear-gradient(150deg,rgba(255,255,255,.92),rgba(246,253,254,.84));
  -webkit-backdrop-filter:blur(16px) saturate(140%);backdrop-filter:blur(16px) saturate(140%);
  border:1px solid rgba(255,255,255,.9);box-shadow:0 18px 50px rgba(6,70,92,.1),inset 0 1.5px 0 #fff;border-radius:clamp(22px,3.4vw,36px)}
.product{padding:clamp(20px,4vw,52px);margin-bottom:clamp(16px,3vw,28px);border-top:1px solid rgba(255,255,255,.9)}
.catalog-head,.section-head,.combos-intro,.tech-intro{padding:clamp(18px,3vw,34px);max-width:860px}
.prose,.spec-block,.seo-faq,.related,.gallery{padding:clamp(18px,3vw,34px)}
.spec-block,.seo-faq,.related,.prose,.gallery{margin-bottom:clamp(16px,3vw,28px)}
.catalog-head>p:last-child{margin-bottom:0}
.breadcrumb{display:inline-flex;padding:6px 14px;border-radius:999px;background:rgba(255,255,255,.85);-webkit-backdrop-filter:blur(10px);backdrop-filter:blur(10px)}
.product-hero{padding:clamp(18px,3.4vw,44px);border-radius:clamp(22px,3.4vw,36px);background:linear-gradient(150deg,rgba(255,255,255,.92),rgba(246,253,254,.84));
  -webkit-backdrop-filter:blur(16px);backdrop-filter:blur(16px);border:1px solid rgba(255,255,255,.9);box-shadow:0 18px 50px rgba(6,70,92,.1),inset 0 1.5px 0 #fff}
.product-visual>span{color:#9fd3da}
.faq-list details{background:rgba(255,255,255,.92)}
.how-steps li,.benefit{background:linear-gradient(150deg,rgba(255,255,255,.93),rgba(246,253,254,.86));-webkit-backdrop-filter:blur(14px);backdrop-filter:blur(14px)}
.hero-copy{background:rgba(255,255,255,.9)}

/* Galería de imágenes */
.gallery h2{font-size:clamp(22px,3.4vw,32px);letter-spacing:-.03em;margin-bottom:4px}
.gallery h3{font-size:clamp(16px,2.2vw,20px);margin:22px 0 10px;letter-spacing:-.02em}
.gal-hint{font-size:13px;color:var(--muted);margin-bottom:14px}
.gal-grid{display:grid;gap:10px;grid-template-columns:repeat(auto-fill,minmax(min(100%,170px),1fr))}
.gal-item{position:relative;display:block;border-radius:20px;overflow:hidden;background:linear-gradient(160deg,#fff,#eaf6f8);border:1px solid var(--line);aspect-ratio:1;box-shadow:0 8px 22px rgba(6,70,92,.08);transition:transform .35s var(--ease),box-shadow .35s}
.gal-item img{width:100%;height:100%;object-fit:contain;object-position:center;transition:transform .6s var(--ease)}
.gal-item.guia img{object-fit:contain;background:#fff}
.gal-item:hover,.gal-item:focus-visible{transform:translateY(-4px);box-shadow:0 18px 38px rgba(6,70,92,.18)}
.gal-item:hover img{transform:scale(1.05)}
.gal-item::after{content:"⤢";position:absolute;right:8px;bottom:8px;width:30px;height:30px;display:grid;place-items:center;border-radius:50%;font-size:15px;color:#fff;
  background:rgba(7,60,79,.78);opacity:0;transform:scale(.8);transition:opacity .25s,transform .25s}
.gal-item:hover::after,.gal-item:focus-visible::after{opacity:1;transform:none}
@media(hover:none){.gal-item::after{opacity:.9;transform:none}}
.mini-gal{display:flex;align-items:center;gap:10px;margin:0 0 18px;min-width:0}
.mini-gal>span{flex:none;font-size:11px;font-weight:800;letter-spacing:.14em;text-transform:uppercase;color:#2b8aa5}
.mini-track{display:flex;gap:8px;overflow-x:auto;padding:4px 2px 8px;scrollbar-width:thin;min-width:0}
.mini-track .gal-item{flex:none;width:68px;border-radius:16px;box-shadow:0 4px 12px rgba(6,70,92,.1)}
.mini-track .gal-item::after{display:none}

/* Visor */
.lb{position:fixed;inset:0;z-index:500;display:grid;grid-template-rows:1fr auto;padding:max(12px,env(safe-area-inset-top)) 12px max(12px,env(safe-area-inset-bottom));
  background:rgba(3,22,30,.86);-webkit-backdrop-filter:blur(14px);backdrop-filter:blur(14px);opacity:0;visibility:hidden;transition:opacity .3s,visibility .3s}
.lb.open{opacity:1;visibility:visible}
.lb{grid-template-columns:minmax(0,1fr)}
.lb figure{margin:0;min-width:0;width:100%;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:10px;min-height:0;padding:44px 0 8px}
.lb img{max-width:min(calc(100vw - 24px),1100px);max-height:calc(100vh - 230px);max-height:calc(100svh - 230px);flex:none;width:auto;height:auto;object-fit:contain;border-radius:18px;box-shadow:0 30px 80px rgba(0,0,0,.5);background:#fff;transition:opacity .25s}
.lb figcaption{color:#e5f6f8;text-align:center;font-size:14px;line-height:1.4;padding:6px 60px 4px}
.lb-count{display:block;margin-top:2px;font-size:11px;letter-spacing:.14em;color:#8fe6ec}
.lb button{position:absolute;display:grid;place-items:center;width:46px;height:46px;border-radius:50%;border:1px solid rgba(255,255,255,.4);color:#fff;font-size:22px;line-height:1;
  background:linear-gradient(150deg,rgba(255,255,255,.28),rgba(255,255,255,.08));-webkit-backdrop-filter:blur(10px);backdrop-filter:blur(10px);box-shadow:inset 0 1px 0 rgba(255,255,255,.5)}
.lb .lb-x{top:max(10px,env(safe-area-inset-top));right:12px}
.lb .lb-p,.lb .lb-n{top:50%;margin-top:-23px}
.lb .lb-p{left:10px}.lb .lb-n{right:10px}
@media(max-width:599px){.lb .lb-p,.lb .lb-n{top:auto;bottom:calc(max(12px,env(safe-area-inset-bottom)) + 4px);margin:0}.lb figcaption{padding:6px 56px 4px;min-height:46px}}
.hero-copy>p.fineprint{font-size:11.5px;line-height:1.5;color:var(--muted)}

/* Móvil/tablet: el cúmulo no sube sobre la tarjeta de texto al hacer scroll */
@media(max-width:899px){.hero-bubbles{translate:none;margin-top:18px}.hero-copy{translate:none}}

/* v2.9 · transformación líquida entre productos */
.stage-bubble{transition:width .6s cubic-bezier(.65,0,.2,1)}
.stage-bubble img{transition:none}
.stage-bubble .morph-next{position:absolute;inset:0;width:100%;height:100%;object-fit:contain;padding:8%;border-radius:50%;opacity:0;clip-path:circle(0% at 50% 50%);pointer-events:none}
.stage-bubble.morphing{animation:blobMorph 1.25s cubic-bezier(.65,0,.25,1) both}
.stage-bubble.morphing #stepImage{animation:morphOut 1.1s cubic-bezier(.65,0,.3,1) both}
.stage-bubble .morph-next.go{animation:morphIn 1.1s cubic-bezier(.65,0,.25,1) both}
@keyframes blobMorph{
 0%{border-radius:50%}
 25%{border-radius:56% 44% 48% 52%/47% 54% 46% 53%;scale:1.03 .98}
 55%{border-radius:46% 54% 54% 46%/54% 46% 54% 46%;scale:.98 1.02}
 80%{border-radius:52% 48% 50% 50%/49% 51% 49% 51%;scale:1.01 1}
 100%{border-radius:50%;scale:1}}
@keyframes morphOut{0%{opacity:1;scale:1}100%{opacity:0;scale:.86}}
@keyframes morphIn{0%{opacity:.3;clip-path:circle(0% at 50% 50%);scale:1.15}100%{opacity:1;clip-path:circle(78% at 50% 50%);scale:1}}
@keyframes ripple{0%{box-shadow:0 0 0 0 rgba(113,238,231,.55)}100%{box-shadow:0 0 0 70px rgba(113,238,231,0)}}
@media(prefers-reduced-motion:reduce){.stage-bubble.morphing,.stage-bubble .morph-next.go,.stage-bubble.morphing #stepImage{animation:none}}

/* v2.9 · 8 burbujas en órbita (centro + 7) */
.hero-bubble[class*="pos-k"]{width:27%}
.hero-bubble.pos-c{width:32%;left:34%;top:34%}
.hero-bubble.pos-k0{left:36.5%;top:2.5%;--z:30}
.hero-bubble.pos-k1{left:62.2%;top:11.8%;--z:20}
.hero-bubble.pos-k2{left:70.7%;top:38.6%;--z:35}
.hero-bubble.pos-k3{left:57.3%;top:65.3%;--z:25}
.hero-bubble.pos-k4{left:15.7%;top:65.3%;--z:25}
.hero-bubble.pos-k5{left:2.3%;top:38.6%;--z:35}
.hero-bubble.pos-k6{left:10.8%;top:11.8%;--z:20}
.hero-bubble.b8{--depth:20}.js .hero-bubble.b8{--n:7}

/* v2.9 · separadores del menú */
@media(min-width:900px){
 .topbar nav a+a::before{content:"";position:absolute;left:-2px;top:50%;width:1px;height:14px;translate:0 -50%;background:linear-gradient(to bottom,transparent,rgba(8,78,102,.35),transparent);transition:opacity .2s}
 .topbar nav a:hover::before,.topbar nav a:hover+a::before{opacity:0}
}
@media(max-width:899px){.topbar nav a+a{border-top:1px solid rgba(8,78,102,.1);border-radius:0}}

/* v2.10 · carrusel 3D del hero */
.hero-bubbles.cf{aspect-ratio:auto;max-width:640px;width:100%;transform:none!important;translate:none!important;margin-inline:auto;display:grid;gap:14px;transition:none}
.hero-bubbles.cf::after{content:none}
.cf-stage{position:relative;height:clamp(300px,34vw,430px);perspective:1400px;transform-style:preserve-3d;overflow:hidden;touch-action:pan-y;cursor:grab;
  -webkit-mask-image:linear-gradient(90deg,transparent,#000 12%,#000 88%,transparent);mask-image:linear-gradient(90deg,transparent,#000 12%,#000 88%,transparent)}
.cf-stage:active{cursor:grabbing}
.cf-item{position:absolute;left:50%;top:50%;aspect-ratio:1;display:block;color:inherit;animation:none!important;transition:transform .8s cubic-bezier(.22,1,.3,1),opacity .6s,filter .6s;will-change:transform}
.cf-item.is-active{box-shadow:0 30px 60px rgba(6,70,92,.28),inset 0 0 0 6px rgba(255,255,255,.85),0 0 0 10px rgba(113,238,231,.2),0 0 0 24px rgba(113,238,231,.09)}
.cf-item img{transition:none}
.cf-nav{position:absolute;top:calc(clamp(300px,34vw,430px)/2 - 24px);z-index:40;width:48px;height:48px;border-radius:50%;border:1px solid rgba(255,255,255,.9);font-size:28px;line-height:1;color:#0b4f66;display:grid;place-items:center;padding:0 0 4px;cursor:pointer;
  background:linear-gradient(150deg,rgba(255,255,255,.9),rgba(190,238,242,.55));backdrop-filter:blur(10px);-webkit-backdrop-filter:blur(10px);box-shadow:0 10px 24px rgba(6,70,92,.18);transition:transform .25s,box-shadow .25s}
.cf-nav:hover{transform:scale(1.1)}.cf-prev{left:2px}.cf-next{right:2px}
.cf-cap{text-align:center;display:grid;gap:3px;justify-items:center}
.cf-cap small{font-size:11px;font-weight:800;letter-spacing:.14em;text-transform:uppercase;color:#2a7389}
.cf-cap b{font-size:clamp(24px,3vw,34px);letter-spacing:-.03em;color:var(--ink)}
.cf-cap>span{font-size:15px;color:var(--muted);max-width:42ch}
.cf-cap.in>*{animation:cfIn .55s var(--ease) both}.cf-cap.in>*:nth-child(2){animation-delay:.05s}.cf-cap.in>*:nth-child(3){animation-delay:.1s}.cf-cap.in>*:nth-child(4){animation-delay:.15s}
@keyframes cfIn{from{opacity:0;transform:translateY(10px)}to{opacity:1;transform:none}}
.cf-acts{display:flex;gap:10px;flex-wrap:wrap;justify-content:center;margin-top:8px}
.cf-thumbs{display:flex;justify-content:center;gap:clamp(4px,1.2vw,10px)}
.cf-thumb{flex:0 1 46px;aspect-ratio:1;border-radius:50%;border:2px solid transparent;background:#fff;padding:0;overflow:hidden;cursor:pointer;opacity:.6;box-shadow:0 4px 10px rgba(6,70,92,.12);transition:opacity .3s,transform .3s,border-color .3s}
.cf-thumb img{width:100%;height:100%;object-fit:contain;padding:12%}
.cf-thumb.on{opacity:1;transform:scale(1.14);border-color:#27a3bc}
.cf-thumb:hover{opacity:1}
@media(max-width:899px){.cf-stage{height:clamp(270px,70vw,360px)}.cf-nav{top:calc(clamp(270px,70vw,360px)/2 - 24px);width:42px;height:42px}}
@media(prefers-reduced-motion:reduce){.cf-item{transition:none}.cf-cap.in>*{animation:none}}

/* v2.11 · recorrido fijo también en celular horizontal */
@media(orientation:landscape) and (max-height:539px) and (min-width:540px){
  .solutions-scroll.pinned{height:calc(var(--steps,8)*55svh + 100svh);padding-top:8px}
  .pinned .solution-stage{position:sticky;top:calc(var(--header-h,60px) + 6px);height:calc(100svh - var(--header-h,60px) - 12px);max-height:none;padding:8px 18px;gap:6px;border-radius:22px;grid-template-rows:auto minmax(0,1fr) auto}
  .pinned .stage-heading,.pinned .bubble-rings,.pinned #visualLabel,.pinned .stage-skip,.pinned .facts{display:none}
  .pinned .stage-grid{grid-template-columns:minmax(0,.8fr) minmax(0,1.2fr);grid-template-rows:minmax(0,1fr);gap:18px;align-items:center;min-height:0}
  .pinned .stage-visual{order:0;min-height:0;display:grid;place-items:center}
  .pinned .stage-bubble{--bw:min(100%,calc(100svh - var(--header-h,60px) - 110px),300px)}
  .pinned .stage-copy{display:flex;flex-direction:column;justify-content:center;min-height:0}
  .pinned .stage-copy h3{font-size:clamp(24px,8svh,36px);margin:2px 0 4px}
  .pinned .stage-copy>p{font-size:clamp(12.5px,3.6svh,15px);line-height:1.4;display:-webkit-box;-webkit-line-clamp:3;-webkit-box-orient:vertical;overflow:hidden;margin:0}
  .pinned .stage-actions{margin-top:8px;gap:8px}.pinned .stage-actions .primary{min-height:40px;padding:0 16px;flex:0 1 auto}
  .pinned .stage-progress{display:block;position:relative;height:3px;border-radius:3px;background:rgba(13,111,145,.12);overflow:hidden}
  .pinned .stage-progress i{display:block;height:100%;transform-origin:0 50%;transform:scaleX(var(--sp,0));background:linear-gradient(90deg,#71eee7,#0d6f91)}
  .pinned .stage-selector{flex-wrap:nowrap;overflow-x:auto;padding:2px;margin:0;gap:5px;justify-content:center}
  .pinned .stage-selector button{min-height:32px;padding:0 10px;font-size:11px}
  .pinned .stage-selector button:not(.active) b{display:none}
}
/* v2.11 · visor de imágenes a pantalla completa */
.lb{padding:0}
.lb figure{position:absolute;inset:0;padding:56px 10px 78px;gap:0}
.lb img{max-width:calc(100vw - 20px);max-height:calc(100svh - 134px);border-radius:14px}
.lb figcaption{position:absolute;left:0;right:0;bottom:0;padding:34px 70px calc(12px + env(safe-area-inset-bottom));background:linear-gradient(to top,rgba(3,22,30,.92),transparent)}
@media(orientation:landscape) and (max-height:520px){
  .lb figure{padding:6px 64px}
  .lb img{max-width:calc(100vw - 130px);max-height:calc(100svh - 12px);border-radius:10px}
  .lb figcaption{left:64px;right:64px;padding:18px 8px 6px;font-size:12px;background:linear-gradient(to top,rgba(3,22,30,.85),transparent)}
  .lb .lb-p,.lb .lb-n{top:50%;bottom:auto;margin-top:-23px}
  .lb .lb-x{top:8px;right:10px}
}
/* v2.11 · diferenciación de filtros de ducha */
.badge{display:inline-block;margin:6px 0 2px;padding:5px 12px;border-radius:999px;font-size:11px;font-weight:800;letter-spacing:.08em;text-transform:uppercase;color:#0b4f66;background:linear-gradient(150deg,#fff,#c9f1f3);border:1px solid rgba(39,163,188,.4);box-shadow:0 4px 12px rgba(6,70,92,.1)}
.compare{margin:36px 0}.compare h2{margin-bottom:6px}.compare .table-scroll{margin-top:14px}
.compare table td.me{background:rgba(113,238,231,.12)}
.compare-link{margin-top:14px}

/* v2.12 · robustez: visor sin saltos y menos carga gráfica en celulares */
html.lb-open{overflow:hidden}
@media(max-width:899px),(pointer:coarse){
  .product,.catalog-head,.section-head,.combos-intro,.tech-intro,.prose,.spec-block,.seo-faq,.related,.gallery,.kits-section>.catalog-head,.tech-cta,.product-hero,.how-steps li,.benefit,.hero-copy,.breadcrumb{-webkit-backdrop-filter:none;backdrop-filter:none;background-color:rgba(250,254,254,.96)}
  .lb{-webkit-backdrop-filter:none;backdrop-filter:none;background:rgba(3,22,30,.96)}
  .lb button{-webkit-backdrop-filter:none;backdrop-filter:none;background:rgba(255,255,255,.22)}
  .cf-item{will-change:auto}
}

/* v2.13 · desplazamiento liviano y ficha del recorrido más grande */
.is-off,.is-off *,.is-off *::before,.is-off *::after{animation-play-state:paused!important}
.pinned .stage-bubble{width:var(--bw);transition:none}
@media(max-width:899px) and (orientation:portrait){
  .pinned .solution-stage{padding:10px 12px;gap:6px}
  .pinned .stage-grid{grid-template-rows:minmax(0,1fr) auto;gap:8px}
  .pinned .stage-visual{order:-1;--sz:min(84vw,calc(100svh - var(--header-h,64px) - 330px),460px)}
  .pinned .stage-bubble{--bw:var(--sz)}
  .pinned .bubble-rings{width:calc(var(--sz)*1.14)}
  .pinned .stage-copy{order:0;justify-content:flex-start}
  .pinned .stage-copy h3{font-size:clamp(26px,3.8svh,36px);margin:2px 0 4px}
  .pinned .stage-copy>p{font-size:clamp(14px,1.9svh,16px);-webkit-line-clamp:4}
  .pinned .facts{display:none!important}
  .pinned .stage-actions{margin-top:8px}
}

.in-stage .back-top{opacity:0!important;pointer-events:none!important;transform:scale(.8)}

.how-steps{list-style:none;padding:0;margin-left:0;margin-right:0}.how-steps li::marker{content:''}.how-steps li::before{content:none}

.how-steps,.how-steps li{list-style:none}

/* v2.16 · muro de comentarios "Por qué nos eligen" */
.wall{position:relative;width:min(calc(100% - 16px),var(--max));margin:56px auto;padding:clamp(34px,6vw,76px) clamp(16px,4vw,56px);border-radius:clamp(26px,4vw,48px);overflow:hidden;color:#fff;isolation:isolate;
  background:radial-gradient(circle at 12% 8%,rgba(113,238,231,.45),transparent 42%),radial-gradient(circle at 92% 92%,rgba(255,255,255,.18),transparent 45%),linear-gradient(145deg,#1496b4,#0a5a75 62%,#06384c);box-shadow:0 34px 80px rgba(6,70,92,.35)}
.wall-b{position:absolute;z-index:-1;border-radius:50%;background:radial-gradient(circle at 32% 28%,rgba(255,255,255,.55),rgba(255,255,255,.08) 55%,transparent 70%);border:1px solid rgba(255,255,255,.3);animation:bob 8s ease-in-out infinite alternate}
.wall-b.b1{width:clamp(90px,16vw,220px);aspect-ratio:1;left:-3%;top:6%}.wall-b.b2{width:clamp(60px,9vw,130px);aspect-ratio:1;right:6%;top:3%;animation-delay:-3s}.wall-b.b3{width:clamp(110px,18vw,260px);aspect-ratio:1;right:-4%;bottom:4%;animation-delay:-5s}
.wall-head{text-align:center;max-width:760px;margin:0 auto clamp(26px,4vw,48px)}
.wall-head .eyebrow{color:#c9fbf8;letter-spacing:.28em}
.wall-head h2{font-size:clamp(40px,8vw,92px);line-height:.96;letter-spacing:-.05em;margin:10px 0 14px;color:#fff;text-wrap:balance}
.wall-head h2 em{font-style:normal;color:#71eee7;position:relative;white-space:nowrap}
.wall-head h2 em::after{content:"";position:absolute;left:0;right:0;bottom:-.06em;height:.1em;border-radius:99px;background:linear-gradient(90deg,#71eee7,rgba(113,238,231,0));transform-origin:0 50%;animation:uline 1.4s var(--ease) both .3s}
@keyframes uline{from{transform:scaleX(0)}to{transform:scaleX(1)}}
.wall-head p:last-child{color:#d6f4f6;font-size:clamp(15px,1.8vw,18px)}
.wall-grid{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:clamp(22px,3vw,40px) clamp(18px,3vw,36px);max-width:1040px;margin:0 auto}
.wall-card{position:relative;margin:0;transform:rotate(var(--r,0deg));transition:transform .5s var(--ease)}
.wall-card:nth-child(even){margin-top:clamp(0px,3vw,42px)}
.wall-card:hover{transform:rotate(0deg) translateY(-8px) scale(1.02);z-index:3}
.wall-why{position:absolute;z-index:2;left:14px;top:-14px;padding:7px 15px;border-radius:999px;font-size:12px;font-weight:800;letter-spacing:.08em;text-transform:uppercase;color:#06384c;background:linear-gradient(150deg,#e9fffe,#71eee7);box-shadow:0 8px 20px rgba(0,0,0,.25)}
.rv-img{display:block;border-radius:22px;cursor:zoom-in}
.rv-img img{display:block;width:100%;height:auto;border-radius:22px;filter:drop-shadow(0 22px 34px rgba(2,30,44,.5))}
@media(max-width:759px){
  .wall-grid{grid-template-columns:1fr;gap:26px}
  .wall-card:nth-child(even){margin-top:0}
  .wall-card{transform:rotate(calc(var(--r)*.6))}
}
@media(prefers-reduced-motion:reduce){.wall-b,.wall-head h2 em::after{animation:none}}
.wall-card{padding-top:26px}.wall-why{top:0;left:10px}

/* Logo v3 (wordmark metálico): gota + ANAMI + descriptor con las mismas distancias; la gota iguala el alto del conjunto */
.brand{--ww:78px;gap:3px;align-items:center}
.brand-symbol{height:calc(var(--ww)/3.81 + 9px);width:auto;margin-right:-1px}
.brand-lockup{--ww:inherit;width:var(--ww);justify-items:start;gap:3px}
@media(max-width:519px){.brand{--ww:70px}}
@media(min-width:900px){.brand{--ww:82px}}
.brand-lockup small{font-size:calc(var(--ww)*.0664);letter-spacing:.03em;width:100%}

/* ==========================================================================
   v4 (prueba) — fondo estático de líneas + fichas con paralaje al scroll
   El agua WebGL y las gotas se retiran. El fondo es blanco con líneas finas en los colores
   de ANAMI, FIJO (no se anima): al desplazarte, las fichas se mueven sobre él.
   ========================================================================== */
html,body{background:#fff}
.lines-bg{position:fixed;inset:0;z-index:0;pointer-events:none;background:#fff}
.lines-bg canvas{display:block}
#flow,.grain,.site-ambient,.flow-streams{display:none!important}
[data-par]{will-change:translate,opacity}
@media(prefers-reduced-motion:reduce){[data-par]{will-change:auto}}

/* v9 · nuevo logotipo ANAMI (3D blanco con contorno): más ancho, se ajusta el tamaño */
.brand{--ww:94px}
.brand-symbol{height:calc(var(--ww)/4.85 + 12px)}
@media(max-width:519px){.brand{--ww:84px}}
@media(min-width:900px){.brand{--ww:104px}}

/* v10 · recorrido fijo en celular horizontal: la ficha ocupa casi toda la pantalla; el banner queda (compacto) flotando encima */
@media(orientation:landscape) and (max-height:539px) and (min-width:540px){
  :root{--header-h:46px}
  .topbar{top:4px}
  .solutions-scroll.pinned{padding-top:0}
  .pinned .solution-stage{top:4px;height:calc(100svh - 8px);padding:calc(var(--header-h) + 12px) 66px 8px 22px;gap:4px;border-radius:24px}
  .pinned .stage-grid{grid-template-columns:minmax(0,.9fr) minmax(0,1.1fr);gap:clamp(16px,3.5vw,36px)}
  .pinned .stage-bubble{--bw:min(100%,calc(100svh - var(--header-h) - 40px),380px)}
  .pinned .stage-copy h3{font-size:clamp(30px,11svh,46px);margin:2px 0 6px}
  .pinned .stage-copy .step span{font-size:clamp(26px,9svh,38px)}
  .pinned .stage-copy>p{font-size:clamp(14px,4.4svh,18px);line-height:1.42;-webkit-line-clamp:4}
  .pinned .stage-actions{margin-top:10px}
  .pinned .stage-actions .primary,.pinned .stage-actions a{min-height:46px;font-size:15px}
  .pinned .stage-progress{position:absolute;left:22px;right:66px;bottom:4px;margin:0}
  /* los 8 números pasan a una columna a la derecha: liberan altura */
  .pinned .stage-selector{position:absolute;right:12px;top:calc(var(--header-h) + 12px);bottom:12px;width:44px;flex-direction:column;flex-wrap:nowrap;justify-content:center;align-items:center;overflow:visible;gap:3px;padding:0}
  .pinned .stage-selector button{width:42px;min-height:0;height:min(34px,9.4svh);padding:0;justify-content:center;font-size:12.5px}
  .pinned .stage-selector button b{display:none!important}
}

/* v10 · modo liviano en celulares/tablets: menos efectos para que no se cuelgue */
@media (hover:none) and (pointer:coarse),(max-width:899px){
  *,*::before,*::after{-webkit-backdrop-filter:none!important;backdrop-filter:none!important}
  .topbar{background:rgba(242,252,254,.96)}
  .hero-bubble,.water-bubble,.water-bubble:not(.hero-bubble){animation:none!important}
  .js .hero-bubble{opacity:1;rotate:0deg}
  .stage-motion i,.final-motion i,.ambient-ripple,.ambient-orb,.stream,.orbit-ring,.final::after,.hero-actions .primary{animation:none!important}
  .water-bubble::after,.water-bubble::before{animation:none!important}
}

/* v11 · palabra clave visible en el H1 de la home */
.hero h1 .h1-kw{display:block;font-size:clamp(13px,1.6vw,17px);font-weight:800;letter-spacing:.14em;text-transform:uppercase;color:var(--teal,#0d6f91);margin-bottom:10px;line-height:1.2}

/* v12 · celular horizontal: la ficha del recorrido ocupa TODA la pantalla (el banner flota encima) */
@media(orientation:landscape) and (max-height:539px) and (min-width:540px){
  .solutions-scroll,.solutions-scroll.pinned{width:100%;max-width:none;padding-inline:0;margin:0}
  .pinned .solution-stage{top:0;height:100vh;height:100svh;border-radius:0;border-inline:0;padding:calc(var(--header-h) + 8px) 74px 10px max(28px,env(safe-area-inset-left))}
  .pinned .stage-selector{right:max(14px,env(safe-area-inset-right))}
  .pinned .stage-progress{left:max(28px,env(safe-area-inset-left));right:74px;bottom:3px}
  .pinned .stage-bubble{--bw:min(100%,calc(100svh - var(--header-h) - 26px),420px)}
  .pinned .stage-grid{grid-template-columns:minmax(0,1fr) minmax(0,1fr)}
  .pinned .stage-copy h3{font-size:clamp(32px,12svh,52px)}
  .pinned .stage-copy>p{font-size:clamp(15px,4.8svh,19px)}
}

/* v12 · bloque de texto SEO de la home */
.seo-copy{width:var(--wide,min(100% - 16px,1180px));margin:clamp(40px,7vw,90px) auto 0;padding:clamp(24px,4vw,48px);border-radius:var(--radius,28px);background:rgba(255,255,255,.88);border:1px solid var(--line,#d6eef2)}
.seo-copy h2{font-size:clamp(26px,4.4vw,46px);line-height:1.05;letter-spacing:-.035em;margin:10px 0 14px;font-weight:800;text-wrap:balance}
.seo-copy .lead{font-size:clamp(16px,1.8vw,19px);line-height:1.65;color:var(--text);max-width:75ch}
.seo-cols{display:grid;gap:clamp(14px,2.4vw,28px);margin-top:20px}
@media(min-width:800px){.seo-cols{grid-template-columns:repeat(3,minmax(0,1fr))}}
.seo-cols h3{font-size:clamp(19px,2.2vw,24px);letter-spacing:-.02em;margin:0 0 8px;color:var(--ink)}
.seo-cols p{margin:0;font-size:16px;line-height:1.6;color:var(--text)}
.seo-also{margin-top:20px;font-size:14px;line-height:1.7;color:var(--muted,#55788a)}
.seo-also b{color:var(--ink)}

/* v13 · celular horizontal: alto real de pantalla (dvh, sin franja vacía abajo) y números abajo como en vertical */
@media(orientation:landscape) and (max-height:539px) and (min-width:540px){
  .pinned .solution-stage{height:100vh;height:100svh;height:100dvh;padding:calc(var(--header-h) + 6px) max(28px,env(safe-area-inset-right)) 8px max(28px,env(safe-area-inset-left))}
  .pinned .stage-progress{position:absolute;left:0;right:0;top:auto;bottom:0;margin:0;height:3px}
  .pinned .stage-selector{position:relative;right:auto;top:auto;bottom:auto;width:auto;flex-direction:row;flex-wrap:nowrap;justify-content:center;align-items:center;gap:5px;padding:0 0 4px;overflow-x:auto}
  .pinned .stage-selector button{width:auto;height:auto;min-height:36px;padding:0 12px;font-size:12px}
  .pinned .stage-selector button.active b{display:inline!important}
  .pinned .stage-bubble{--bw:min(100%,calc(100dvh - var(--header-h) - 76px),420px)}
}

/* ==========================================================================
   v19 · recorrido 01–08: escenario fijo + tarjetas que entran de costado (animaciones CSS ligadas al scroll)
   El escenario queda pegado (position:sticky) y cada tarjeta se desliza desde un lado hasta el centro, sin subir ni bajar.
   ========================================================================== */
.has-cstack .solution-stage{display:none!important}
.solutions-scroll.has-cstack{height:auto!important;padding-bottom:0}
.has-cstack>.stage-heading{width:var(--wide);margin:0 auto 22px;position:relative;z-index:1}
.has-cstack>.stage-heading h2{font-size:clamp(28px,5vw,56px);line-height:1;letter-spacing:-.04em;margin:8px 0 0;font-weight:800}
.ctrack{--cs-top:calc(var(--header-h) + 10px);--cs-off:8px;--cs-bottom:20px;--D:75svh;--T:52svh;--tail:45svh;
  --sh:min(700px,calc(100svh - var(--cs-top) - var(--cs-bottom)));--A:calc(100svh - var(--cs-top));
  position:relative;width:min(var(--wide),var(--cs-wmax,1100px));margin:0 auto;
  height:calc(var(--sh) + (var(--n) - 1)*var(--D) + var(--tail));view-timeline:--ctr block}
@media(max-width:899px) and (orientation:portrait){.ctrack{--cs-bottom:14px}}
@media(orientation:landscape) and (max-height:539px){.ctrack{--cs-top:calc(var(--header-h) + 8px);--cs-off:3px;--cs-bottom:14px;--D:80svh;--T:55svh;--cs-wmax:calc((100svh - var(--header-h) - 22px)*1.5)}}
.cstage{position:sticky;top:var(--cs-top);height:var(--sh)}
.ccard{--ch:calc(var(--sh) - 7*var(--cs-off));position:absolute;left:0;right:0;bottom:0;top:calc(var(--i)*var(--cs-off));box-sizing:border-box;
  border-radius:30px;border:2px solid rgba(255,255,255,.35);box-shadow:0 22px 52px rgba(3,40,56,.4),0 0 0 1px rgba(255,255,255,.12);overflow:hidden;color:#fff;
  padding:clamp(16px,3vw,34px) clamp(18px,4vw,48px);display:grid;gap:clamp(8px,2.2vw,36px);align-items:center;
  grid-template-columns:minmax(0,1fr);grid-template-rows:auto minmax(0,1fr);transform-origin:50% 100%}
.ccard::before{content:"";position:absolute;inset:0;pointer-events:none;opacity:.55;background:repeating-radial-gradient(circle at 82% 46%,rgba(255,255,255,.07) 0 2px,transparent 2px 30px)}
.ccard::after{content:"";position:absolute;inset:0;border-radius:inherit;background:#021a26;opacity:0;pointer-events:none;z-index:5}
.ccard>*{position:relative}
.cc0{background:radial-gradient(circle at 80% 24%,rgba(255,255,255,.26),transparent 46%),linear-gradient(150deg,#0f86a6,#07506b)}
.cc1{background:radial-gradient(circle at 80% 24%,rgba(255,255,255,.24),transparent 46%),linear-gradient(150deg,#2f6fe0,#163f98)}
.cc2{background:radial-gradient(circle at 80% 24%,rgba(255,255,255,.24),transparent 46%),linear-gradient(150deg,#14a88f,#0a6460)}
.cc3{background:radial-gradient(circle at 80% 24%,rgba(255,255,255,.28),transparent 46%),linear-gradient(150deg,#dd9a2c,#9a5a14)}
.cc-visual{grid-row:1;position:relative;display:grid;place-items:center;min-height:0;min-width:0}
.cc-copy{grid-row:2;min-width:0;align-self:center}
.cc-bubble{position:relative;z-index:1;width:min(100%,32svh,330px);aspect-ratio:1;border-radius:50%;display:grid;place-items:center;
  background:radial-gradient(circle at 35% 28%,#fff,#eefafc 72%);box-shadow:0 18px 40px rgba(2,30,44,.35),inset 0 0 0 5px rgba(255,255,255,.9),0 0 0 9px rgba(255,255,255,.16)}
.cc-bubble img{width:84%;height:84%;object-fit:contain;mix-blend-mode:multiply;-webkit-mask-image:radial-gradient(circle,#000 60%,transparent 71%);mask-image:radial-gradient(circle,#000 60%,transparent 71%)}
.cc-num{position:absolute;left:2%;top:0;z-index:2;font-size:clamp(40px,7vw,68px);font-weight:800;line-height:1;letter-spacing:-.03em;color:rgba(255,255,255,.55)}
.cc-ring{position:absolute;left:50%;top:50%;width:min(112%,calc(32svh*1.14),376px);aspect-ratio:1;translate:-50% -50%;border-radius:50%;border:2px solid rgba(255,255,255,.34);pointer-events:none}
.cc-ring.r2{width:min(128%,calc(32svh*1.3),430px);border-color:rgba(255,255,255,.18)}
.cc-dot{position:absolute;border-radius:50%;background:radial-gradient(circle at 30% 30%,rgba(255,255,255,.9),rgba(255,255,255,.2));pointer-events:none}
.cc-dot.d1{width:16px;height:16px;left:12%;top:70%}.cc-dot.d2{width:10px;height:10px;right:12%;top:26%}.cc-dot.d3{width:22px;height:22px;right:6%;top:78%;opacity:.7}
.cc-kind{margin:0;font-size:12px;font-weight:800;letter-spacing:.14em;text-transform:uppercase;color:rgba(255,255,255,.82)}
.cc-copy h3{font-size:clamp(32px,6vw,58px);letter-spacing:-.045em;line-height:1;margin:6px 0 8px;font-weight:800;color:#fff}
.cc-text{margin:0;font-size:clamp(15px,2vw,19px);line-height:1.45;color:rgba(255,255,255,.93);max-width:46ch}
.cc-facts{list-style:none;margin:12px 0 0;padding:0;display:grid;grid-template-columns:1fr 1fr;gap:7px}
.cc-facts li{padding:7px 11px;border-radius:14px;background:rgba(255,255,255,.14);border:1px solid rgba(255,255,255,.28);display:grid;gap:1px;min-width:0}
.cc-facts small{font-size:9.5px;font-weight:800;letter-spacing:.14em;color:rgba(255,255,255,.7)}
.cc-facts b{font-size:13px;font-weight:700;line-height:1.2;color:#fff;overflow-wrap:anywhere}
.cc-actions{display:flex;gap:10px;flex-wrap:wrap;margin-top:14px}
@media(orientation:portrait){.cc-bubble{width:min(100%,34svh,340px)}.cc-ring{width:min(112%,calc(34svh*1.14),388px)}.cc-ring.r2{width:min(128%,calc(34svh*1.3),442px)}}
@media(max-height:760px) and (orientation:portrait){.cc-facts{display:none}.cc-bubble{width:min(100%,30svh,300px)}}
@media(max-height:700px) and (orientation:portrait){.cc-bubble{width:min(100%,24svh,220px)}.cc-copy h3{font-size:30px;margin:4px 0}.cc-text{font-size:14px;line-height:1.38}.cc-ring,.cc-ring.r2{display:none}}
/* pantallas anchas: texto a la izquierda, producto a la derecha */
@media(min-width:560px) and (orientation:landscape){
  .ccard{grid-template-columns:minmax(0,1.05fr) minmax(0,.95fr);grid-template-rows:minmax(0,1fr)}
  .cc-copy{grid-row:1;grid-column:1}.cc-visual{grid-row:1;grid-column:2}
  .cc-bubble{width:min(100%,calc(var(--ch) - 70px),420px)}.cc-ring{width:min(112%,calc((var(--ch) - 70px)*1.14),480px)}.cc-ring.r2{width:min(128%,calc((var(--ch) - 70px)*1.3),540px)}
}
@media(orientation:landscape) and (max-height:539px){
  .cta-bar{display:none!important}
  .ccard{border-radius:22px;padding:8px 14px;gap:8px}
  .cc-bubble{width:min(100%,calc(var(--ch) - 34px))}.cc-ring{width:min(112%,calc((var(--ch) - 34px)*1.12))}.cc-ring.r2{display:none}
  .cc-copy h3{font-size:clamp(22px,8svh,32px);margin:2px 0 3px}.cc-text{font-size:clamp(11.5px,3.5svh,14px);line-height:1.32}
  .cc-facts{margin-top:6px;gap:5px}.cc-facts li{padding:4px 8px}.cc-facts li:nth-child(n+3){display:none}.cc-facts small{font-size:8px}.cc-facts b{font-size:11px}
  .cc-actions{margin-top:7px}.cc-num{font-size:28px}.cc-kind{font-size:9.5px;letter-spacing:.1em}
}
/* ---- animaciones ligadas al scroll (cada tarjeta entra desde un costado hasta su lugar; las anteriores se achican y oscurecen) ---- */
@supports (animation-timeline:view()){@media(prefers-reduced-motion:no-preference){
  .ccard{--s:calc(var(--A) + (var(--i) - 1)*var(--D));--dx:-125%;--tilt:-9deg;
    animation:ccIn linear both,ccBack linear both;animation-timeline:--ctr,--ctr;
    animation-range:cover var(--s) cover calc(var(--s) + var(--T)),cover calc(var(--s) + var(--D)) cover calc(var(--s) + var(--D) + var(--T))}
  .ccard:nth-child(even){--dx:125%;--tilt:9deg}
  .ccard:first-child{animation:ccBack linear both;animation-timeline:--ctr;animation-range:cover calc(var(--s) + var(--D)) cover calc(var(--s) + var(--D) + var(--T))}
  .ccard::after{animation:ccDim linear both;animation-timeline:--ctr;animation-range:cover calc(var(--s) + var(--D)) cover calc(var(--s) + var(--D) + var(--T))}
  .ccard:not(:first-child) .cc-bubble{animation:ccPop linear both;animation-timeline:--ctr;animation-range:cover calc(var(--s) + var(--T)*.25) cover calc(var(--s) + var(--T)*1.1)}
  .ccard:not(:first-child) .cc-ring{animation:ccRing linear both;animation-timeline:--ctr;animation-range:cover calc(var(--s) + var(--T)*.5) cover calc(var(--s) + var(--T)*1.3)}
  .ccard:not(:first-child) .cc-copy{animation:ccCopy linear both;animation-timeline:--ctr;animation-range:cover calc(var(--s) + var(--T)*.3) cover calc(var(--s) + var(--T)*1.05)}
  @keyframes ccIn{0%{transform:translateX(var(--dx)) rotate(var(--tilt))}55%{transform:translateX(calc(var(--dx)*.2)) rotate(calc(var(--tilt)*.25))}80%{transform:translateX(calc(var(--dx)*-.025)) rotate(calc(var(--tilt)*-.05))}100%{transform:none}}
  @keyframes ccBack{from{scale:1}to{scale:.955}}
  @keyframes ccDim{from{opacity:0}to{opacity:.34}}
  @keyframes ccPop{from{transform:scale(.7) rotate(-25deg);opacity:.2}to{transform:none;opacity:1}}
  @keyframes ccRing{from{transform:scale(.7);opacity:0}to{transform:none;opacity:1}}
  @keyframes ccCopy{from{transform:translateY(24px);opacity:0}to{transform:none;opacity:1}}
}}
@media(hover:hover) and (pointer:fine) and (prefers-reduced-motion:no-preference){
  .cc-dot{animation:ccFloat 5s ease-in-out infinite alternate}.cc-dot.d2{animation-delay:-1.6s}.cc-dot.d3{animation-delay:-3s}
  @keyframes ccFloat{from{transform:translateY(0)}to{transform:translateY(-14px)}}
}
/* sin soporte (o movimiento reducido): lista de tarjetas, una debajo de otra */
@supports not (animation-timeline:view()){
  .ctrack{height:auto;view-timeline:none}.cstage{position:static;height:auto;display:grid;gap:16px}
  .ccard{position:relative;top:auto;bottom:auto;height:auto;min-height:420px}
}
@media(prefers-reduced-motion:reduce){
  .ctrack{height:auto;view-timeline:none}.cstage{position:static;height:auto;display:grid;gap:16px}
  .ccard{position:relative;top:auto;bottom:auto;height:auto;min-height:420px}
}

/* ---- carrusel principal: ficha de color (cambia con cada producto), con títulos y miniaturas adentro ---- */
.hero-bubbles.cf{--cfh:clamp(310px,80vw,420px);position:relative;isolation:isolate;overflow:hidden;border-radius:32px;padding:14px;gap:12px;
  box-shadow:0 22px 50px rgba(3,40,56,.34),inset 0 0 0 1px rgba(255,255,255,.25);color:#fff}
@media(min-width:900px){.hero-bubbles.cf{--cfh:clamp(340px,36vw,470px);padding:18px}}
.cf-bg{position:absolute;inset:0;z-index:-1;opacity:0;transition:opacity .7s ease;pointer-events:none}
.cf-bg.on{opacity:1}
.cf-bg.cb0{background:radial-gradient(circle at 50% 30%,rgba(255,255,255,.3),transparent 55%),linear-gradient(150deg,#0f86a6,#07506b)}
.cf-bg.cb1{background:radial-gradient(circle at 50% 30%,rgba(255,255,255,.28),transparent 55%),linear-gradient(150deg,#2f6fe0,#163f98)}
.cf-bg.cb2{background:radial-gradient(circle at 50% 30%,rgba(255,255,255,.28),transparent 55%),linear-gradient(150deg,#14a88f,#0a6460)}
.cf-bg.cb3{background:radial-gradient(circle at 50% 30%,rgba(255,255,255,.32),transparent 55%),linear-gradient(150deg,#dd9a2c,#9a5a14)}
.cf-bg::after{content:"";position:absolute;inset:0;background:repeating-radial-gradient(circle at 50% 40%,rgba(255,255,255,.07) 0 2px,transparent 2px 34px)}
.cf-stage{height:var(--cfh);background:none;box-shadow:none;border-radius:0;-webkit-mask-image:none;mask-image:none;overflow:visible;clip-path:inset(0 -14px)}
.cf-item.is-active{box-shadow:0 30px 60px rgba(0,20,32,.45),inset 0 0 0 6px rgba(255,255,255,.92),0 0 0 10px rgba(255,255,255,.18),0 0 0 24px rgba(255,255,255,.08)}
.cf-nav{top:calc(14px + var(--cfh)/2 - 22px);background:rgba(255,255,255,.95);color:#073c4f;width:44px;height:44px}
.cf-prev{left:12px}.cf-next{right:12px}
.cf-cap{padding:14px 16px 16px;border-radius:24px;background:rgba(255,255,255,.14);border:1px solid rgba(255,255,255,.3);color:#fff}
.cf-cap small{color:rgba(255,255,255,.85)}.cf-cap b{color:#fff}.cf-cap>span{color:rgba(255,255,255,.92)}
.cf-thumbs{padding:9px 10px;border-radius:999px;background:rgba(255,255,255,.14);border:1px solid rgba(255,255,255,.3)}
.cf-thumb{opacity:.85;border-color:rgba(255,255,255,.4)}.cf-thumb.on{opacity:1;border-color:#fff;box-shadow:0 0 0 3px rgba(255,255,255,.35)}
/* sin botón "subir" al lado de WhatsApp */
/* guías en la portada */
.guides-home{width:var(--wide,min(100% - 16px,1180px));margin:clamp(36px,6vw,80px) auto 0;padding:clamp(22px,4vw,44px);border-radius:var(--radius,28px);background:linear-gradient(150deg,#0b5670,#073c4f);color:#fff}
.guides-home .eyebrow{color:#9fe9ee}.guides-home h2{margin:6px 0 8px;font-size:clamp(26px,4.4vw,44px);letter-spacing:-.04em;line-height:1.05;color:#fff}
.guides-home>p{margin:0 0 16px;color:rgba(255,255,255,.88);max-width:60ch}
.guides-grid{display:grid;gap:12px}@media(min-width:700px){.guides-grid{grid-template-columns:repeat(2,1fr)}}@media(min-width:1000px){.guides-grid{grid-template-columns:repeat(4,1fr)}}
.guides-grid a{display:grid;gap:4px;align-content:start;padding:18px 20px;border-radius:20px;background:rgba(255,255,255,.12);border:1px solid rgba(255,255,255,.3);color:#fff;text-decoration:none}
.guides-grid b{font-size:18px;line-height:1.2}.guides-grid span{font-size:14px;opacity:.9}.guides-grid a:after{content:"Leer la guía →";font-weight:800;font-size:14px;color:#9fe9ee;margin-top:6px}

/* ==========================================================================
   v19 · SISTEMA ÚNICO DE BOTONES (misma forma, tamaño y colores en toda la web)
   3 colores: petróleo (acción), blanco/contorno (secundario), verde (WhatsApp) + degradé Instagram. Íconos integrados.
   ========================================================================== */
:root{--ico-wa:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M20.5 3.5A11 11 0 0 0 3.2 16.8L2 22l5.3-1.2A11 11 0 0 0 20.5 3.5ZM12 20a8.9 8.9 0 0 1-4.5-1.2l-.3-.2-3.1.7.7-3-.2-.3A9 9 0 1 1 12 20Zm5-6.7c-.3-.1-1.7-.8-2-.9-.3-.1-.5-.1-.7.2l-1 1.2c-.2.2-.4.2-.7.1a7.3 7.3 0 0 1-2.1-1.3A8 8 0 0 1 9 10.8c-.2-.3 0-.5.1-.6l.5-.6.3-.5c.1-.2 0-.4 0-.6l-.9-2c-.2-.5-.5-.4-.7-.4h-.6c-.2 0-.6.1-.9.4-.3.3-1.2 1.2-1.2 2.9s1.2 3.3 1.4 3.5c.2.2 2.4 3.7 5.9 5.2.8.4 1.5.6 2 .7.8.3 1.6.2 2.2.1.7-.1 1.7-.7 1.9-1.4.2-.7.2-1.3.2-1.4-.1-.1-.3-.2-.6-.3Z'/%3E%3C/svg%3E");
  --ico-ig:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M7 2h10a5 5 0 0 1 5 5v10a5 5 0 0 1-5 5H7a5 5 0 0 1-5-5V7a5 5 0 0 1 5-5Zm0 2a3 3 0 0 0-3 3v10a3 3 0 0 0 3 3h10a3 3 0 0 0 3-3V7a3 3 0 0 0-3-3H7Zm11 1.5a1.25 1.25 0 1 1 0 2.5 1.25 1.25 0 0 1 0-2.5ZM12 7a5 5 0 1 1 0 10 5 5 0 0 1 0-10Zm0 2a3 3 0 1 0 0 6 3 3 0 0 0 0-6Z'/%3E%3C/svg%3E")}
body :is(.primary,a.primary,.tech-cta>a,.combo-wa,.button,.kit-copy>a,.product-copy>.product-actions>a,.final a,.hero-actions a,.quiz-acts a,.stage-actions a,.ghost,.stage-skip,.combo-component-links a,[id="stepLink"],.cc-actions a,.cf-acts a,.cta-bar a,.combo-page-copy a.primary,.guide-cta a){
  position:relative;display:inline-flex;align-items:center;justify-content:center;gap:9px;box-sizing:border-box;min-height:50px;padding:0 24px;border-radius:999px;
  font:800 15px/1.1 inherit;font-family:inherit;letter-spacing:0;text-decoration:none;text-shadow:none;white-space:nowrap;cursor:pointer;overflow:hidden;
  color:#fff;background:linear-gradient(150deg,#0e7897,#073c4f);border:1.5px solid rgba(255,255,255,.28);
  box-shadow:0 10px 24px rgba(5,58,78,.26),inset 0 1.5px 0 rgba(255,255,255,.3);transition:transform .2s,box-shadow .2s,filter .2s;animation:none!important}
body .primary::before,body .primary::after,body .tech-cta>a::before,body .tech-cta>a::after,body .combo-wa::before,body .combo-wa::after,body .button::before,body .button::after,body .ghost::before,body .ghost::after,body .kit-copy>a::before,body .kit-copy>a::after{content:none;display:none}
body :is(.primary,a.primary,.tech-cta>a,.combo-wa,.button,.kit-copy>a,.product-copy>.product-actions>a,.final a,.hero-actions a,.quiz-acts a,.stage-actions a,.ghost,.stage-skip,.combo-component-links a,[id="stepLink"],.cc-actions a,.cf-acts a,.cta-bar a,.combo-page-copy a.primary,.guide-cta a):hover{transform:translateY(-2px);filter:brightness(1.07);box-shadow:0 14px 30px rgba(5,58,78,.34),inset 0 1.5px 0 rgba(255,255,255,.35)}
body :is(.primary,.ghost,.cc-actions a,.cf-acts a,.cta-bar a):active{transform:scale(.97)}
/* secundario: blanco con contorno petróleo */
body :is(.ghost,.stage-skip,.combo-component-links a,[id="stepLink"],.hero-actions a:not(.primary),.cf-acts a:not(.primary)){background:#fff;color:#073c4f;border:1.5px solid rgba(13,111,145,.35);box-shadow:0 6px 16px rgba(5,58,78,.1)}
/* WhatsApp: siempre verde con su ícono */
body :is(.primary,a.primary,.combo-wa,.tech-cta>a,.kit-copy>a,.product-copy>.product-actions>a,.final a,.hero-actions a,.quiz-acts a,.stage-actions a,.cc-actions a,.cf-acts a,.cta-bar a,.combo-page-copy a.primary,.guide-cta a)[href*="wa.me"]{
  background:linear-gradient(150deg,#27cf9a,#0a7a5c);color:#fff;border-color:rgba(255,255,255,.35);box-shadow:0 10px 24px rgba(7,112,86,.34),inset 0 1.5px 0 rgba(255,255,255,.4)}
body :is(.primary,a.primary,.combo-wa,.tech-cta>a,.kit-copy>a,.product-copy>.product-actions>a,.final a,.hero-actions a,.quiz-acts a,.stage-actions a,.cc-actions a,.cf-acts a,.cta-bar a,.combo-page-copy a.primary,.guide-cta a)[href*="wa.me"]:not(:has(.ico))::before{
  content:"";display:block;flex:none;width:22px;height:22px;background:currentColor;-webkit-mask:var(--ico-wa) center/contain no-repeat;mask:var(--ico-wa) center/contain no-repeat;position:static;inset:auto;opacity:1;z-index:auto;animation:none}
/* Instagram: degradé de la marca con su ícono */
body :is(a.instagram,.ig-btn,.guide-cta a[href*="instagram.com"]){background:linear-gradient(135deg,#f9a03c,#e1306c 55%,#7a3ccf);color:#fff;border-color:rgba(255,255,255,.35)}
body :is(a.instagram,.ig-btn,.guide-cta a[href*="instagram.com"]):not(:has(.ico))::before{content:"";flex:none;width:22px;height:22px;background:currentColor;-webkit-mask:var(--ico-ig) center/contain no-repeat;mask:var(--ico-ig) center/contain no-repeat;position:static}
/* íconos ya existentes dentro de botones: sin círculo, blancos */
body :is(.primary,.cf-acts a,.hero-actions a,.cta-bar a) .ico{background:none!important;box-shadow:none!important;width:22px;height:22px;display:inline-grid;color:inherit}
body :is(.primary,.cf-acts a,.hero-actions a,.cta-bar a) .ico svg{width:22px;height:22px;fill:currentColor}
/* en tarjetas de color: secundario translúcido */
body .ccard .ghost{background:rgba(255,255,255,.16);color:#fff;border-color:rgba(255,255,255,.6);box-shadow:none}
/* barra superior: mismos colores */
body .top-actions a.wa{background:linear-gradient(150deg,#27cf9a,#0a7a5c);color:#fff;border:1.5px solid rgba(255,255,255,.4);box-shadow:0 8px 18px rgba(7,112,86,.3)}
body .top-actions a.wa .ico{background:none;color:#fff}body .top-actions a.wa .ico svg{fill:#fff}
body .top-actions a.ig,body .menu-toggle{background:#fff;color:#073c4f;border:1.5px solid rgba(13,111,145,.3)}
@media(max-width:420px){body :is(.primary,.ghost,.cc-actions a,.cf-acts a,.hero-actions a){padding:0 18px;font-size:14.5px;min-height:48px}}
/* guías: índice, glosario, tarjetas claras, CTA */
.toc{margin:20px 0 8px;padding:18px 22px;border-radius:22px;background:linear-gradient(150deg,#0b5670,#073c4f);color:#fff}
.toc b{display:block;margin-bottom:8px;font-size:13px;letter-spacing:.14em;text-transform:uppercase;color:#9fe9ee}
.toc ol{margin:0;padding-left:22px;display:grid;gap:5px}.toc a{color:#fff;font-weight:600}
.prose h2{scroll-margin-top:calc(var(--header-h) + 18px)}
.glossary{display:grid;gap:2px;margin:14px 0}.glossary dt{font-weight:800;color:#073c4f;margin-top:12px}.glossary dd{margin:0;color:var(--muted,#3d5b68)}
.prose .small{font-size:13px;color:var(--muted,#4a6573)}
.guides-light a{background:#fff;border:1px solid var(--line,#d6eef2);color:#073c4f}.guides-light a:after{color:#0d6f91}
.guides-light{margin:12px 0 28px}
.guide-cta{margin:24px 0 8px}
.prose .toc a{color:#fff;text-decoration:none}.prose .toc a:hover{text-decoration:underline}.prose .guides-grid a{text-decoration:none;color:#073c4f}

/* ==========================================================================
   v22 · Instagram (izquierda) y WhatsApp (derecha) en el mismo orden y con el mismo diseño "glass" en toda la web
   ========================================================================== */
body :is(.top-actions a.wa,.top-actions a.ig,a.instagram,.final a,.cta-bar a.primary,.hero-actions a.primary,.cf-acts a#cfWa,.cc-actions a.primary,.guide-cta a,.product-actions a.primary)[href*="wa.me"],
body :is(.top-actions a.ig,a.instagram,.guide-cta a[href*="instagram.com"]){
  position:relative;isolation:isolate;overflow:hidden;border:1.5px solid rgba(255,255,255,.55);color:#fff;
  box-shadow:0 12px 26px rgba(6,60,80,.28),inset 0 1.5px 0 rgba(255,255,255,.65),inset 0 -10px 18px rgba(0,0,0,.14);
  transition:transform .25s,box-shadow .25s,border-radius .5s cubic-bezier(.4,1.6,.5,1),filter .25s}
body :is(.top-actions a.wa,.top-actions a.ig,a.instagram,.final a,.cta-bar a.primary,.hero-actions a.primary,.cf-acts a#cfWa,.cc-actions a.primary,.guide-cta a,.product-actions a.primary)[href*="wa.me"]{background:linear-gradient(150deg,rgba(45,214,160,.95),rgba(8,118,88,.96))}
body :is(.top-actions a.ig,a.instagram,.guide-cta a[href*="instagram.com"]){background:linear-gradient(135deg,rgba(250,164,64,.96),rgba(225,48,108,.96) 55%,rgba(122,60,207,.96))}
/* reflejo de vidrio + barrido de luz */
body :is(.top-actions a.wa,.top-actions a.ig,a.instagram,.final a,.cta-bar a.primary,.hero-actions a.primary,.cf-acts a#cfWa,.cc-actions a.primary,.guide-cta a,.product-actions a.primary)[href*="wa.me"]::after,
body :is(.top-actions a.ig,a.instagram,.guide-cta a[href*="instagram.com"])::after{
  content:"";display:block;position:absolute;inset:0;z-index:-1;border-radius:inherit;pointer-events:none;
  background:linear-gradient(105deg,transparent 38%,rgba(255,255,255,.6) 50%,transparent 62%) -140% 0/260% 100% no-repeat,linear-gradient(180deg,rgba(255,255,255,.42),rgba(255,255,255,0) 52%);
  transition:background-position .9s ease}
body :is(.top-actions a.wa,.top-actions a.ig,a.instagram,.final a,.cta-bar a.primary,.hero-actions a.primary,.cf-acts a#cfWa,.cc-actions a.primary,.guide-cta a,.product-actions a.primary)[href*="wa.me"]:hover::after,
body :is(.top-actions a.ig,a.instagram,.guide-cta a[href*="instagram.com"]):hover::after{background-position:240% 0,0 0}
@media(prefers-reduced-motion:no-preference){
  body :is(.top-actions a.wa,.top-actions a.ig,a.instagram,.final a,.cta-bar a.primary,.hero-actions a.primary,.cf-acts a#cfWa,.cc-actions a.primary,.guide-cta a,.product-actions a.primary)[href*="wa.me"]:hover,
  body :is(.top-actions a.ig,a.instagram,.guide-cta a[href*="instagram.com"]):hover{border-radius:26px 44px 28px 42px/38px 26px 40px 28px;transform:translateY(-2px) scale(1.02)}
}
@media(hover:hover) and (pointer:fine){
  body :is(.top-actions a.wa,.top-actions a.ig,a.instagram,.final a,.hero-actions a.primary,.cf-acts a#cfWa)[href*="wa.me"],body :is(.top-actions a.ig,a.instagram){backdrop-filter:blur(6px) saturate(1.4);-webkit-backdrop-filter:blur(6px) saturate(1.4)}
}
body :is(.top-actions a.wa,.top-actions a.ig,a.instagram,.final a) .ico{background:none!important;box-shadow:none!important;width:22px;height:22px}
body :is(.top-actions a.wa,.top-actions a.ig,a.instagram,.final a) .ico::after{display:none}
body :is(.top-actions a.wa,.top-actions a.ig,a.instagram,.final a) .ico .social-svg{width:22px;height:22px;fill:#fff;filter:none}
body .top-actions a.ig{color:#fff;display:inline-flex}
body .top-actions a.ig span:not(.ico){display:none}
@media(min-width:1100px){body .top-actions a.ig span:not(.ico){display:inline}}
@media(max-width:899px){body .top-actions a.ig{width:44px;padding:0}}
@media(min-width:480px){body .top-actions a.wa{width:auto;padding:0 16px}body .top-actions a.wa .wa-label{display:inline}}
.final>div{display:flex;flex-wrap:wrap;gap:12px;justify-content:center}

/* ==========================================================================
   v23 · tarjetas iguales en todas las pantallas (mismo alto, botones siempre visibles) + entrada desde afuera de la pantalla
   ========================================================================== */
.ccard{top:0!important;bottom:auto!important;height:var(--ch)!important;translate:0 calc(var(--i)*var(--cs-off));container-type:size;
  grid-template-columns:minmax(0,1fr)!important;grid-template-rows:minmax(0,auto) minmax(0,1fr) auto!important;grid-template-areas:"v" "c" "a"!important;align-items:center}
.cc-visual{grid-area:v!important}
.cc-copy{grid-area:c!important;min-height:0;overflow:hidden;align-self:center!important}
.cc-actions{grid-area:a;margin:0!important;align-self:end}
.cc-bubble{width:min(100%,36cqh,340px)!important}
.cc-ring{width:min(112%,calc(36cqh*1.14),388px)!important}.cc-ring.r2{width:min(128%,calc(36cqh*1.3),442px)!important}
.cc-copy h3{font-size:clamp(26px,6.4cqh,56px)!important}
.cc-text{font-size:clamp(13.5px,2.4cqh,19px)!important;display:-webkit-box;-webkit-box-orient:vertical;-webkit-line-clamp:5;overflow:hidden}
.cc-facts{display:none!important}
@container (min-height:600px){.cc-facts{display:grid!important}}
.cc-actions a{flex:1 1 140px;max-width:240px}
@container (max-height:470px){.cc-bubble{width:min(100%,28cqh,220px)!important}.cc-ring,.cc-ring.r2{display:none}.cc-copy h3{font-size:28px!important;margin:3px 0 4px}.cc-text{-webkit-line-clamp:3}}
/* pantallas anchas */
@media(min-width:560px) and (orientation:landscape){
  .ccard{grid-template-columns:minmax(0,1.1fr) minmax(0,.9fr)!important;grid-template-rows:minmax(0,1fr) auto!important;grid-template-areas:"c v" "a v"!important}
  .cc-copy{align-self:end!important}.cc-actions{align-self:start}
  .cc-bubble{width:min(100%,calc(100cqh - 36px),420px)!important}
  .cc-ring{width:min(112%,calc((100cqh - 36px)*1.12),470px)!important}.cc-ring.r2{width:min(124%,calc((100cqh - 36px)*1.24),520px)!important}
  .cc-copy h3{font-size:clamp(30px,10cqh,58px)!important}.cc-text{font-size:clamp(14px,3.3cqh,19px)!important;-webkit-line-clamp:4}
  @container (min-height:600px){.cc-facts{display:grid!important}}
  @container (max-height:470px){.cc-bubble{width:min(100%,calc(100cqh - 24px),260px)!important}.cc-copy h3{font-size:clamp(22px,10cqh,34px)!important}.cc-text{font-size:clamp(11.5px,4.6cqh,15px)!important;-webkit-line-clamp:4}}
}
@media(orientation:landscape) and (max-height:539px){
  .ctrack{--cs-wmax:calc((100svh - var(--header-h) - 30px)*2)}
  .ccard{padding:8px 16px!important;gap:4px 14px}
  .cc-actions a{min-height:38px;font-size:13px;padding:0 14px}
}
/* entrada: desde AFUERA de la pantalla, alternando izquierda/derecha */
.ccard{--dx:calc(-50vw - 60%)}.ccard:nth-child(even){--dx:calc(50vw + 60%)}
/* botón "Ver ficha" (y secundarios): ícono + vidrio */
:root{--ico-down:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath fill-rule='evenodd' d='M12 2a10 10 0 1 0 0 20 10 10 0 0 0 0-20Zm-1 5h2v6.2l2.3-2.3 1.4 1.4-4.7 4.8-4.7-4.8 1.4-1.4 2.3 2.3V7Z'/%3E%3C/svg%3E")}
body :is(.ghost,.cf-acts a:not(#cfWa)){position:relative;isolation:isolate;overflow:hidden;background:linear-gradient(150deg,rgba(255,255,255,.96),rgba(206,238,245,.92));color:#073c4f;border:1.5px solid rgba(255,255,255,.9);
  box-shadow:0 10px 22px rgba(5,58,78,.18),inset 0 1.5px 0 #fff,inset 0 -10px 18px rgba(13,111,145,.12);transition:transform .25s,box-shadow .25s,border-radius .5s cubic-bezier(.4,1.6,.5,1)}
body :is(.ghost,.cf-acts a:not(#cfWa))::before{content:"";display:block;position:static;inset:auto;flex:none;width:20px;height:20px;background:currentColor;-webkit-mask:var(--ico-down) center/contain no-repeat;mask:var(--ico-down) center/contain no-repeat}
body :is(.ghost,.cf-acts a:not(#cfWa))::after{content:"";display:block;position:absolute;inset:0;z-index:-1;border-radius:inherit;pointer-events:none;
  background:linear-gradient(105deg,transparent 38%,rgba(255,255,255,.9) 50%,transparent 62%) -140% 0/260% 100% no-repeat,linear-gradient(180deg,rgba(255,255,255,.7),rgba(255,255,255,0) 50%);transition:background-position .9s ease}
body :is(.ghost,.cf-acts a:not(#cfWa)):hover::after{background-position:240% 0,0 0}
@media(prefers-reduced-motion:no-preference){body :is(.ghost,.cf-acts a:not(#cfWa)):hover{border-radius:26px 44px 28px 42px/38px 26px 40px 28px;transform:translateY(-2px) scale(1.02)}}
body .ccard .ghost{background:linear-gradient(150deg,rgba(255,255,255,.26),rgba(255,255,255,.12));color:#fff;border-color:rgba(255,255,255,.65);box-shadow:0 10px 22px rgba(0,0,0,.18),inset 0 1.5px 0 rgba(255,255,255,.6)}
body .ccard .ghost::after{background:linear-gradient(105deg,transparent 38%,rgba(255,255,255,.55) 50%,transparent 62%) -140% 0/260% 100% no-repeat,linear-gradient(180deg,rgba(255,255,255,.3),rgba(255,255,255,0) 50%)}
body .stage-skip::before,body .combo-component-links a::before{content:none;display:none}
/* en celular el botón flotante reemplaza al enlace de texto del pie */
@media(max-width:899px){.footer-contact>a:last-child{display:none}}
/* la última tarjeta no se achica ni se oscurece (no hay otra que la tape) */
@supports (animation-timeline:view()){@media(prefers-reduced-motion:no-preference){
  .ccard:last-child{animation:ccIn linear both;animation-timeline:--ctr;animation-range:cover var(--s) cover calc(var(--s) + var(--T))}
  .ccard:last-child::after{animation:none}
}}

/* ==========================================================================
   v25 · tarjetas que aprovechan todo el espacio + botones "glass" 3D
   ========================================================================== */
.cc-top{display:flex;align-items:center;justify-content:space-between;gap:10px}
.cc-count{font-size:12px;font-weight:800;letter-spacing:.12em;color:rgba(255,255,255,.72);white-space:nowrap}
.cc-hook,.cc-points,.cc-ideal{display:none}
.cc-hook{margin:2px 0 8px;font-size:clamp(16px,3cqh,23px);font-weight:800;color:#fff;line-height:1.2}
.cc-points{list-style:none;margin:12px 0 0;padding:0;gap:8px}
.cc-points li{position:relative;padding-left:28px;font-size:clamp(13px,2.4cqh,16.5px);line-height:1.35;color:rgba(255,255,255,.96)}
.cc-points li::before{content:"";position:absolute;left:0;top:.05em;width:20px;height:20px;border-radius:50%;background:#fff url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='m5 12.5 4.5 4.5L19 7.5' fill='none' stroke='%23073c4f' stroke-width='3.2' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E") center/12px no-repeat;box-shadow:0 2px 6px rgba(0,0,0,.2)}
.cc-ideal{margin:12px 0 0;padding:10px 14px;border-radius:16px;background:rgba(255,255,255,.16);border:1px dashed rgba(255,255,255,.6);font-size:clamp(12.5px,2.3cqh,15px);font-weight:700;color:#fff;line-height:1.35}
.cc-ideal span{color:#ffe08a;margin-right:4px}
.ccard{grid-template-columns:minmax(0,1fr)!important;grid-template-rows:minmax(0,1fr) auto auto auto!important;grid-template-areas:"v" "c" "f" "a"!important;gap:10px!important;padding:clamp(14px,3.4vw,30px)!important}
.cc-visual{grid-area:v!important;container-type:size;align-self:stretch;min-height:0}
.cc-bubble{width:min(100cqw,100cqh,480px)!important}
.cc-ring{width:calc(min(100cqw,100cqh,480px)*1.1)!important}.cc-ring.r2{width:calc(min(100cqw,100cqh,480px)*1.24)!important}
.cc-copy{grid-area:c!important;display:flex;flex-direction:column;justify-content:center;min-height:0;overflow:hidden;align-self:center!important}
.cc-copy h3{font-size:clamp(28px,6.6cqh,56px)!important}
.cc-text{font-size:clamp(14px,2.5cqh,19px)!important;-webkit-line-clamp:4}
.cc-actions{grid-area:a!important;align-self:end}
.cc-facts{grid-area:f;display:none!important;margin:0;padding:0;list-style:none;grid-template-columns:1fr 1fr;gap:7px}
@container (min-height:600px){.cc-facts{display:none!important}}
@container (min-height:760px){.cc-facts{display:grid!important}}
@container (max-height:470px){.cc-bubble{width:min(100cqw,100cqh,480px)!important}.cc-ring,.cc-ring.r2{display:block}}
/* pantallas anchas (compu, tablet, celular horizontal): texto a la izquierda, producto + datos a la derecha */
@media(min-width:700px),(min-width:560px) and (orientation:landscape){
  .ccard{grid-template-columns:minmax(0,1.12fr) minmax(0,.88fr)!important;grid-template-rows:minmax(0,1fr) auto!important;grid-template-areas:"c v" "a f"!important;gap:12px 28px!important}
  .cc-copy{align-self:stretch!important}
  .cc-actions{align-self:center}
  .cc-copy h3{font-size:clamp(34px,9.4cqh,62px)!important}
  .cc-text{font-size:clamp(14px,2.9cqh,19px)!important}
  @container (min-height:380px){.cc-hook{display:block}}
  @container (min-height:400px){.cc-points{display:grid}}
  @container (min-height:460px){.cc-ideal{display:block}}
  @container (max-height:519px){.cc-facts{display:none!important}}
  @container (min-height:520px){.cc-facts{display:grid!important}}
}
/* celular horizontal: ficha más grande, sin recortes */
@media(orientation:landscape) and (max-height:539px){
  .ctrack{--cs-top:calc(var(--header-h) + 4px);--cs-off:2px;--cs-bottom:8px;--cs-wmax:calc((100svh - var(--header-h) - 14px)*2.2)}
  .ccard{padding:10px 18px!important;gap:6px 18px!important;border-radius:24px}
  .cc-copy h3{font-size:clamp(24px,11cqh,42px)!important;margin:2px 0 4px}
  .cc-text{font-size:clamp(12.5px,5cqh,16px)!important;-webkit-line-clamp:4}
  .cc-count{display:none}.cc-kind{font-size:10px}
  .cc-actions a{min-height:40px}
}
/* carrusel principal: burbujas más grandes en pantallas angostas */
@media(max-width:899px){.hero-bubbles.cf{--cfh:clamp(330px,94vw,460px)}}
/* pie: sin el enlace de texto "Volver al inicio" (queda el botón flotante) */
.footer-contact>a:last-child{display:none}
/* fichas de producto: el producto ocupa lo mismo dentro de la burbuja */
.product-hero .water-bubble img[src$="ducha.webp"]{transform:scale(1.11);transform-origin:50% 50%}
.product-hero .water-bubble img[src$="shower.webp"]{transform:scale(1.14);transform-origin:50% 50%}
.product-hero .water-bubble img[src$="infinit.webp"]{transform:scale(1.04);transform-origin:50% 50%}
.product-hero .water-bubble img[src$="inline.webp"]{transform:scale(1.0);transform-origin:50% 50%}
.product-hero .water-bubble img[src$="steel.webp"]{transform:scale(1.06);transform-origin:50% 50%}
.product-hero .water-bubble img[src$="cto.webp"]{transform:scale(1.12);transform-origin:50% 50%}
.product-hero .water-bubble img[src$="repuesto-ducha-7-1.webp"]{transform:scale(1.29);transform-origin:50% 50%}
.product-hero .water-bubble img[src$="inline-repuestos.webp"]{transform:scale(1.03);transform-origin:50% 50%}

/* ---- botones: vidrio líquido (morphing glass) ---- */
body .gl{--gloss:radial-gradient(130% 120% at 18% -12%,rgba(255,255,255,.72),rgba(255,255,255,0) 56%);--shade:linear-gradient(180deg,rgba(255,255,255,.14),rgba(255,255,255,0) 46%,rgba(0,0,0,.18));
  position:relative!important;isolation:isolate;overflow:hidden!important;display:inline-flex;align-items:center;justify-content:center;gap:9px;min-height:50px;padding:0 24px;border-radius:999px!important;
  font-weight:800;font-size:15px;line-height:1.1;color:#fff!important;text-shadow:0 1px 2px rgba(0,0,0,.28);border:1px solid rgba(255,255,255,.62)!important;
  background:var(--gloss),var(--shade),var(--base)!important;
  box-shadow:0 16px 30px var(--glow),0 3px 8px rgba(0,0,0,.12),inset 0 2px 1px rgba(255,255,255,.8),inset 0 -5px 9px rgba(0,0,0,.22),inset 0 0 24px rgba(255,255,255,.14)!important;
  transition:transform .3s cubic-bezier(.3,1.5,.5,1),box-shadow .25s,filter .25s,border-radius .55s cubic-bezier(.4,1.6,.5,1)!important;animation:none!important}
body .gl-wa{--base:linear-gradient(150deg,rgba(54,222,170,.93),rgba(7,118,88,.96));--glow:rgba(8,120,90,.45)}
body .gl-ig{--base:linear-gradient(135deg,rgba(252,170,66,.95),rgba(226,50,110,.95) 52%,rgba(120,60,210,.96));--glow:rgba(200,50,120,.42)}
body .gl-main{--base:linear-gradient(150deg,rgba(20,130,165,.95),rgba(5,50,70,.97));--glow:rgba(5,58,78,.45)}
body .gl-ghost{--base:linear-gradient(150deg,rgba(255,255,255,.94),rgba(190,228,240,.92));--gloss:radial-gradient(130% 120% at 18% -12%,#fff,rgba(255,255,255,0) 58%);--glow:rgba(8,70,92,.25);color:#073c4f!important;text-shadow:none;border-color:rgba(255,255,255,.95)!important}
body .ccard .gl-ghost{--base:linear-gradient(150deg,rgba(255,255,255,.34),rgba(255,255,255,.12));--gloss:radial-gradient(130% 120% at 18% -12%,rgba(255,255,255,.6),rgba(255,255,255,0) 56%);--glow:rgba(0,0,0,.3);color:#fff!important;text-shadow:0 1px 2px rgba(0,0,0,.3)}
body .gl::after{content:""!important;display:block!important;position:absolute!important;inset:auto!important;top:-30%!important;bottom:-30%!important;left:-60%!important;width:36%!important;z-index:-1!important;border-radius:0!important;pointer-events:none;
  background:linear-gradient(100deg,transparent,rgba(255,255,255,.6),transparent)!important;transform:skewX(-20deg) translateX(0)!important;transition:transform .85s ease!important;opacity:1!important}
body .gl:hover::after,body .gl:focus-visible::after{transform:skewX(-20deg) translateX(520%)!important}
body .gl:hover,body .gl:focus-visible{transform:translateY(-3px) scale(1.025);filter:saturate(1.15) brightness(1.06)}
body .gl:active{transform:translateY(0) scale(.97);box-shadow:0 6px 14px var(--glow),inset 0 3px 8px rgba(0,0,0,.3)!important}
@media(prefers-reduced-motion:no-preference){body .gl:hover{border-radius:26px 44px 28px 42px/40px 26px 40px 28px!important}}
@media(hover:hover) and (pointer:fine) and (prefers-reduced-motion:no-preference){
  body .gl::after{animation:glSweep 7s ease-in-out infinite}
  @keyframes glSweep{0%,72%{transform:skewX(-20deg) translateX(0)}100%{transform:skewX(-20deg) translateX(520%)}}
  body .gl-wa{animation:glBreath 5s ease-in-out infinite alternate!important}
  @keyframes glBreath{from{box-shadow:0 16px 30px var(--glow),0 3px 8px rgba(0,0,0,.12),inset 0 2px 1px rgba(255,255,255,.8),inset 0 -5px 9px rgba(0,0,0,.22),inset 0 0 24px rgba(255,255,255,.14)}to{box-shadow:0 20px 38px var(--glow),0 3px 8px rgba(0,0,0,.12),inset 0 2px 1px rgba(255,255,255,.9),inset 0 -5px 9px rgba(0,0,0,.22),inset 0 0 34px rgba(255,255,255,.26)}}
}
@media(hover:hover) and (pointer:fine){body .gl{backdrop-filter:blur(6px) saturate(1.5);-webkit-backdrop-filter:blur(6px) saturate(1.5)}}
body .top-actions .gl{min-height:44px;padding:0 14px;font-size:13px}
body .cta-bar .gl{width:100%}
/* v25b · el botón flotante "subir" no tapa los botones de las tarjetas en celular vertical; tarjetas más altas en pantallas altas */
.ctrack{--sh:min(780px,calc(100svh - var(--cs-top) - var(--cs-bottom)))}
@media(max-width:699px) and (orientation:portrait){
  .cc-actions{padding-right:56px}
  body .cc-actions .gl{padding:0 12px;gap:7px;font-size:14px;min-width:0;flex:1 1 0}
}

/* v28 · la ficha usa todo el espacio visible (dvh) y en horizontal ocupa casi todo el ancho */
@supports (height:100dvh){
  .ctrack{--sh:min(820px,calc(100dvh - var(--cs-top) - var(--cs-bottom)))}
}
@media(max-width:899px) and (orientation:portrait){.ctrack{--cs-bottom:14px}}
@media(orientation:landscape) and (max-height:539px){
  .ctrack{--cs-wmax:1400px;--cs-bottom:6px}
}