
:root{--navy:#112329;--ink:#173039;--muted:#64797e;--mint:#27ceb0;--line:#dce8e5;--bg:#f5f8f7}
*{box-sizing:border-box}
html{scroll-behavior:smooth}
body{margin:0;font-family:Inter,ui-sans-serif,system-ui,-apple-system,'Segoe UI',Arial,sans-serif;background:var(--bg);color:var(--ink)}
a,button{touch-action:manipulation}
button{cursor:pointer;font:inherit}
button:focus-visible,a:focus-visible{outline:3px solid var(--mint);outline-offset:3px}
.container{max-width:1180px;margin:auto;padding:0 24px}
nav{height:78px;display:flex;justify-content:space-between;align-items:center}
nav .logo{font-size:34px;font-weight:840;letter-spacing:-2px;color:#fff;text-decoration:none}
nav .logo span{color:var(--mint)}
nav .navright{display:flex;align-items:center;gap:15px}
nav .navright a{font-size:13px;color:#b9d0d0;text-decoration:none;font-weight:700}
nav .share{border:1px solid #456067;background:transparent;border-radius:10px;color:#fff;padding:10px 15px;font-weight:700}
header{background:var(--navy);color:#fff;overflow:hidden;position:relative}
header:before{content:'';position:absolute;width:500px;height:500px;top:-230px;right:-200px;border:1px solid #3e625c;border-radius:50%;box-shadow:0 0 0 65px #19312e,0 0 0 145px #19312e4a;pointer-events:none}
.hero{padding:64px 0 83px;display:grid;grid-template-columns:1.12fr .88fr;gap:44px;align-items:center;position:relative}
.eyebrow{font-size:11px;text-transform:uppercase;letter-spacing:2.3px;color:var(--mint);font-weight:850}
h1{font-size:clamp(46px,6vw,85px);line-height:1.03;letter-spacing:-4px;margin:18px 0 20px}
h1 em{font-style:normal;color:var(--mint)}
.hero p{font-size:17px;line-height:1.75;color:#b9cbce;max-width:520px}
.hero-actions{display:flex;gap:12px;flex-wrap:wrap;margin-top:30px}
.pill{padding:14px 20px;border-radius:11px;border:1px solid #527571;font-weight:750;color:#fff;text-decoration:none;background:none;font-size:14px}
.pill.solid{background:var(--mint);border-color:var(--mint);color:var(--navy)}
.hero-photo{width:100%;max-height:470px;aspect-ratio:1/1;object-fit:cover;border-radius:24px;box-shadow:0 30px 70px #0814147f;transform:rotate(1.8deg)}
.hero-photo-caption{margin-top:16px;font-size:11px;color:#8dadad;text-align:center;line-height:1.5}
main{padding:70px 0 55px}
.section-head{display:flex;justify-content:space-between;align-items:end;gap:20px;margin-bottom:28px}
.section-head h2{font-size:clamp(31px,4vw,46px);letter-spacing:-1.8px;margin:10px 0}
.section-head p{max-width:520px;line-height:1.65;color:var(--muted);margin:8px 0}
.filters{display:flex;gap:8px;flex-wrap:wrap;margin:18px 0 30px}
.filter{border:1px solid var(--line);background:#fff;color:#4f686d;padding:10px 14px;border-radius:99px;font-size:12px;font-weight:750}
.filter.active{background:var(--navy);color:#fff;border-color:var(--navy)}
.grid{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:20px}
.product{background:#fff;border:1px solid var(--line);border-radius:22px;overflow:hidden;display:flex;flex-direction:column;box-shadow:0 4px 23px #192a2a0a}
.image-frame{aspect-ratio:1/1;background:#e7efec;position:relative;overflow:hidden}
.image-frame img{width:100%;height:100%;object-fit:cover;display:block;transition:transform .35s}
.product:hover img{transform:scale(1.035)}
.corner-label{position:absolute;top:15px;left:15px;background:#fffdf4;padding:8px 10px;border-radius:9px;color:#3b6260;font-weight:750;font-size:10px;box-shadow:0 2px 8px #2234}
.corner-label.subtle{background:#182e32e8;color:#c6e9df}
.prod-body{padding:24px;display:flex;flex-direction:column;gap:11px;flex:1}
.category{font-size:10px;font-weight:850;color:#168871;letter-spacing:1.5px;text-transform:uppercase}
.prod-body h3{font-size:24px;letter-spacing:-.75px;margin:0}
.prod-body h4{font-weight:550;font-size:13px;color:var(--muted);margin:-5px 0 3px}
.prod-body p{font-size:13px;line-height:1.7;color:#61777b;flex:1;margin:0}
.tags{display:flex;flex-wrap:wrap;gap:6px}
.tags span{font-size:10px;background:#edf7f2;color:#42776c;border-radius:7px;padding:6px 8px;font-weight:750}
.cta{width:100%;background:#163136;color:white;border:0;border-radius:11px;min-height:47px;font-weight:760;font-size:13px;margin-top:11px}
.cta:hover{background:#0b6f60}
.info-box{display:grid;grid-template-columns:1fr auto;align-items:center;gap:22px;margin:55px 0 18px;background:#163035;color:white;border-radius:24px;padding:32px 36px}
.info-box h2{font-size:31px;letter-spacing:-1px;margin:8px 0}
.info-box p{color:#b5d0d0;line-height:1.7;margin:0}
.info-box button{padding:14px 20px;border:0;border-radius:11px;background:var(--mint);color:#10272a;font-weight:850;min-height:49px}
.how{display:grid;grid-template-columns:repeat(3,1fr);gap:16px;margin-bottom:30px}
.how article{background:#fff;border:1px solid var(--line);padding:22px;border-radius:15px}
.how .n{font-size:24px;color:#15a98c;font-weight:800}
.how h3{margin:11px 0 9px}.how p{font-size:13px;line-height:1.6;color:#61777b;margin:0}
footer{border-top:1px solid #d6e4e2;padding:30px 0;color:#71898b;font-size:12px;line-height:1.5}
.foot{display:flex;justify-content:space-between;gap:20px}
#toast{position:fixed;z-index:500;bottom:25px;left:50%;transform:translateX(-50%);max-width:min(560px,calc(100vw - 24px));background:#143139;color:#fff;border-radius:12px;padding:15px 20px;display:none;text-align:center;font-size:13px;box-shadow:0 10px 30px #1235}
.hidden{display:none!important}
@media(max-width:900px){.hero{grid-template-columns:1fr;gap:32px;padding:45px 0 60px}.hero img{width:100%;max-height:360px;aspect-ratio:16/9}.grid{grid-template-columns:repeat(2,minmax(0,1fr))}.container{padding:0 18px}}
@media(max-width:590px){
 nav{height:67px}.logo{font-size:29px!important}nav .navright a{display:none}
 .hero{padding:41px 0 55px}.hero h1{font-size:50px;letter-spacing:-2.5px}.hero p{font-size:14px}
 .hero-photo{max-height:295px;aspect-ratio:4/3!important}
 main{padding:48px 0 35px}.grid{grid-template-columns:1fr;gap:17px}
 .image-frame{aspect-ratio:4/3}.prod-body{padding:20px}.section-head{display:block}
 .section-head h2{font-size:36px}.info-box{display:block;padding:25px;margin-top:37px}
 .info-box h2{font-size:26px}.info-box button{width:100%;margin-top:19px}
 .how{grid-template-columns:1fr;gap:9px}.how article{padding:20px}.foot{display:block}
 #toast{bottom:calc(14px + env(safe-area-inset-bottom))}
}

.catalog-public-price{font-size:21px;color:#133631;letter-spacing:-.3px;margin-top:8px}.filters[hidden]{display:none}#catalogStatus{color:#5f777b;padding:10px 0 16px;font-size:13px}
/* Nodra 2.4: logo always present and clean responsive nav */
.sticky-brand{position:sticky;top:0;z-index:100;background:#112329;box-shadow:0 8px 25px #08141426;border-bottom:1px solid #315252}
.sticky-brand nav{height:70px}
#productos,#como-funciona{scroll-margin-top:92px}
.gallery-public{position:relative;min-height:1px}
.gallery-public .image-frame{margin:0}
.gallery-controls{display:flex;gap:9px;align-items:center;justify-content:center;padding:10px;background:#fff}
.gallery-controls button{background:#e9f7f3;border:1px solid #c0e2d6;color:#153e3a;border-radius:9px;padding:8px 10px;min-height:36px;font-size:14px;font-weight:800}
.gallery-controls .gallery-counter{font-size:12px;color:#587473;font-weight:700;min-width:43px;text-align:center}
.gallery-public img{touch-action:pan-y}
.combo-contents{margin:9px 0;display:grid;gap:5px;padding:10px;border-radius:9px;background:#f1f9f6}
.combo-contents strong{font-size:11px;color:#126e57}
.combo-contents li{font-size:12px;color:#496963;list-style:none}
.sticky-brand nav .navright{gap:12px;min-width:0}
.sticky-brand nav .navright a{white-space:nowrap}
.sticky-brand nav .share{white-space:nowrap;flex-shrink:0}
@media(max-width:590px){.sticky-brand nav{height:60px}.sticky-brand nav .navright{gap:8px}.sticky-brand nav .share{font-size:12px;padding:10px 11px}.logo{font-size:29px!important}}

.combo-old-price{font-size:12px;color:#82928d;text-decoration:line-through}.combo-saving{color:#0d775b;font-weight:750;font-size:12px;background:#e1f5ed;border-radius:8px;padding:8px 10px;margin-top:4px}


/* NODRA 2.5 — product-first storefront; flexible hero; measurable combo promotion */
[hidden]{display:none!important}
.sticky-brand.not-sticky{position:relative}
.hero-shell{background:#132b31;color:#fff;overflow:hidden}
.hero-shell:before{content:none}
.hero-shell .hero{padding:22px 0;grid-template-columns:1fr auto;gap:26px;min-height:0}
.hero-shell .eyebrow{font-size:10px}
.hero-shell h1{font-size:clamp(25px,3.4vw,40px);letter-spacing:-1.2px;margin:7px 0 7px;line-height:1.14}
.hero-shell .hero p{margin:0;color:#b9d1ce;line-height:1.4;font-size:13px}
.hero-shell .hero-visual{width:145px}
.hero-shell .hero-photo{width:145px;max-height:110px;aspect-ratio:4/3;transform:none;border-radius:10px;box-shadow:none}
.hero-shell.hero-full .hero{min-height:240px;padding:35px 0}
.hero-shell.hero-full h1{font-size:clamp(35px,4.6vw,55px);max-width:580px}
.hero-shell.hero-full .hero p{font-size:16px;max-width:580px;line-height:1.6}
.hero-shell.hero-full .hero-visual,.hero-shell.hero-full .hero-photo{width:min(380px,36vw)}
.hero-shell.hero-full .hero-photo{max-height:280px;aspect-ratio:4/3;border-radius:20px}
body:has(#heroBlock[hidden]) main{padding-top:24px}
main{padding-top:36px}
#productos .section-head{margin-bottom:12px}
#productos .section-head h2{font-size:clamp(24px,3.1vw,34px);letter-spacing:-1.1px;margin:4px 0}
#productos .section-head p{font-size:13px;max-width:410px;margin:5px 0}
#catalogStatus{padding:0 0 14px;font-size:12px;color:#688281}
#productos .filters{margin:8px 0 20px}
.product{transition:border-color .2s,box-shadow .2s}
.product:hover{box-shadow:0 9px 29px #0b292916}
.product.bundle-card{border-color:#bddad0;box-shadow:0 5px 23px #1b987013}
.product.bundle-card .prod-body{background:linear-gradient(#ffffff,#f7fffb)}
.product.featured-product{box-shadow:0 7px 28px #19836617}
.prod-body{gap:0;padding:18px 20px 21px}
.product-category-row{display:flex;gap:7px;align-items:center;flex-wrap:wrap;margin-bottom:8px}
.featured-chip{font-weight:800;color:#168063;background:#e1f5ec;padding:4px 7px;border-radius:6px;font-size:10px}
.prod-body h3{font-size:clamp(20px,2vw,23px);line-height:1.22;margin:0 0 9px}
.prod-body .product-short{color:#607b79;line-height:1.6;font-size:13px;margin:0 0 12px;flex:none}
.product-more{margin:0 0 10px;color:#456966;font-size:12px}
.product-more summary{cursor:pointer;font-weight:750;color:#147763}
.product-more p{margin:8px 0!important;font-size:12px!important}
.combo-contents{margin:4px 0 13px;gap:5px;border:1px solid #e1f0ea}
.price-zone{margin-top:auto;padding-top:13px;border-top:1px solid #e5f0ed;display:grid;gap:6px}
.price-caption{letter-spacing:1.2px;color:#789088;font-size:10px;font-weight:800}
.public-price{font-size:27px;letter-spacing:-.9px;color:#152d2c}
.compare-price{color:#78908b;font-size:12px;display:flex;flex-wrap:wrap;gap:4px;align-items:baseline}
.compare-price s{font-weight:700;color:#98a5a0}
.bundle-price-row{display:flex;flex-wrap:wrap;align-items:center;justify-content:space-between;gap:10px}
.big-price{font-size:clamp(30px,3.2vw,40px);font-weight:870;letter-spacing:-1.6px;color:#102f28;line-height:1.08}
.discount-percent{border-radius:9px;padding:8px 11px;background:#0a8469;color:#fff;font-size:16px;font-weight:900;white-space:nowrap;box-shadow:0 4px 10px #07816022}
.saving-highlight{display:flex;flex-wrap:wrap;gap:4px;background:#d9f7e9;color:#087657;padding:12px;border-radius:10px;font-size:13px;line-height:1.4;align-items:center}
.saving-highlight strong{font-size:15px;letter-spacing:-.15px}
.gallery-badges{position:absolute;top:14px;left:14px;right:14px;display:flex;align-items:flex-start;justify-content:space-between;gap:7px;pointer-events:none}
.gallery-badges .corner-label{position:static}
.gallery-badges .combo-corner{background:#ffffffee;color:#16765b;font-weight:850}
.cta{margin-top:15px}
@media(max-width:900px){.hero-shell .hero{padding:18px 0;display:flex;flex-direction:row;gap:14px}.hero-shell.hero-full .hero{padding:24px 0;display:grid;grid-template-columns:1fr}.hero-shell.hero-full .hero-visual,.hero-shell.hero-full .hero-photo{width:100%;max-width:430px}.hero-shell.hero-full .hero-photo{max-height:240px}}
@media(max-width:590px){
 .hero-shell .hero{padding:14px 0}.hero-shell h1{font-size:25px;letter-spacing:-.9px}
 .hero-shell .hero p{font-size:12px}.hero-shell .hero-visual{width:92px;flex-shrink:0}
 .hero-shell .hero-photo{width:92px;max-height:85px;aspect-ratio:1/1!important}
 .hero-shell.hero-full h1{font-size:33px}.hero-shell.hero-full .hero p{font-size:14px}
 .hero-shell.hero-full .hero-photo{max-height:185px;aspect-ratio:16/9!important}
 main{padding-top:20px!important}#productos .section-head h2{font-size:26px}
 #productos .section-head p{font-size:12px}
 .prod-body{padding:17px 18px 19px}
 .bundle-price-row{justify-content:space-between}
 .big-price{font-size:37px}.discount-percent{font-size:15px}
}

/* Nodra 2.6: never flood product cards with multi-paragraph descriptions */
.product-short{display:-webkit-box;-webkit-line-clamp:3;-webkit-box-orient:vertical;overflow:hidden;max-height:6.3em}
.product-more{margin-top:2px}
.product-more summary{list-style:none;padding:5px 0}
.product-more summary::-webkit-details-marker{display:none}
.product-more .product-long-text{white-space:pre-line;overflow-wrap:anywhere;max-height:none;display:block}
