/* ============================================================ BIOSYSTEM STORE — Sistema de diseño Tema claro, comercial y luminoso. Marca endosada por Biosystem Technology. El CSS crítico (fuentes + tokens + header + hero) va inline en cada ; este archivo carga el resto de estilos compartidos. ============================================================ */ /* ---------- Reset base (el crítico ya viene inline) ---------- */ *,*::before,*::after{box-sizing:border-box} img,svg,video{max-width:100%;height:auto;display:block} a{color:inherit;text-decoration:none} button{font:inherit;cursor:pointer} ul{margin:0;padding:0;list-style:none} h1,h2,h3,h4,p{margin:0} /* ---------- Tipografía ---------- */ .h2{font-size:clamp(1.6rem,3.6vw,2.5rem);line-height:1.12;font-weight:800;letter-spacing:-.02em;color:var(--ink)} .h3{font-size:clamp(1.15rem,2.2vw,1.45rem);line-height:1.2;font-weight:700;color:var(--ink)} .eyebrow{font-size:.78rem;font-weight:700;letter-spacing:.14em;text-transform:uppercase;color:var(--brand-600)} .lead{font-size:clamp(1rem,1.6vw,1.18rem);line-height:1.6;color:var(--muted)} .prose p{color:var(--muted);line-height:1.75;margin:0 0 1.05rem} .prose h2{font-size:clamp(1.35rem,2.6vw,1.9rem);font-weight:800;letter-spacing:-.02em;color:var(--ink);margin:2.2rem 0 .9rem} .prose h3{font-size:1.2rem;font-weight:700;color:var(--ink);margin:1.6rem 0 .6rem} .prose ul{margin:0 0 1.1rem;padding-left:0} .prose li{position:relative;padding-left:1.6rem;margin-bottom:.5rem;color:var(--muted);line-height:1.6} .prose li::before{content:"";position:absolute;left:.15rem;top:.55em;width:.5rem;height:.5rem;border-radius:2px;background:var(--brand);transform:rotate(45deg)} .prose a{color:var(--brand-600);font-weight:600;border-bottom:1px solid var(--brand-200)} .prose strong{color:var(--ink)} /* ---------- Layout ---------- */ .wrap{width:min(1160px,92vw);margin-inline:auto} .section{padding:clamp(3.5rem,7vw,6rem) 0} .section--soft{background:var(--bg-soft)} .center{text-align:center} .grid{display:grid;gap:1.4rem} @media(min-width:640px){.g-2{grid-template-columns:repeat(2,1fr)}.g-3{grid-template-columns:repeat(3,1fr)}} @media(min-width:960px){.g-3{grid-template-columns:repeat(3,1fr)}.g-4{grid-template-columns:repeat(4,1fr)}} .stack>*+*{margin-top:1rem} .mt-1{margin-top:.6rem}.mt-2{margin-top:1.2rem}.mt-3{margin-top:2rem} .section-head{max-width:60ch;margin:0 auto clamp(2rem,4vw,3rem);text-align:center} .section-head .lead{margin-top:.7rem} /* ---------- Botones ---------- */ .btn{display:inline-flex;align-items:center;gap:.55rem;font-weight:700;font-size:.98rem; padding:.85rem 1.5rem;border-radius:12px;border:1px solid transparent;transition:.18s ease;line-height:1} .btn svg{width:1.15em;height:1.15em} .btn--wa{background:var(--wa);color:#fff;box-shadow:0 6px 18px -6px rgba(37,211,102,.6)} .btn--wa:hover{background:#1eb457;transform:translateY(-1px)} .btn--brand{background:var(--brand);color:#fff;box-shadow:0 6px 18px -8px rgba(14,122,140,.6)} .btn--brand:hover{background:var(--brand-600);transform:translateY(-1px)} .btn--ghost{background:transparent;color:var(--ink);border-color:var(--line)} .btn--ghost:hover{border-color:var(--brand);color:var(--brand-600)} .btn--lg{padding:1rem 1.7rem;font-size:1.05rem} .btn--block{width:100%;justify-content:center} /* ---------- Header ---------- */ .site-header{position:sticky;top:0;z-index:50;background:rgba(255,255,255,.86); backdrop-filter:saturate(1.6) blur(12px);border-bottom:1px solid var(--line)} .nav{display:flex;align-items:center;justify-content:space-between;gap:1rem;height:66px} .brand{display:flex;align-items:center;gap:.6rem;font-weight:800;letter-spacing:-.02em;color:var(--ink);font-size:1.15rem} .brand img{width:32px;height:32px} .brand small{display:block;font-size:.6rem;font-weight:600;letter-spacing:.06em;color:var(--muted);text-transform:uppercase;margin-top:1px} .nav-links{display:none;align-items:center;gap:1.5rem} .nav-links a{font-size:.95rem;font-weight:600;color:var(--ink-2);transition:.15s} .nav-links a:hover{color:var(--brand-600)} .nav-cta{display:none} .burger{display:inline-flex;flex-direction:column;gap:5px;padding:.5rem;background:none;border:0} .burger span{width:22px;height:2px;background:var(--ink);border-radius:2px;transition:.2s} .mobile-menu{display:none;flex-direction:column;padding:1rem 0 1.4rem;border-top:1px solid var(--line);background:#fff} .mobile-menu a{padding:.75rem .2rem;font-weight:600;color:var(--ink-2);border-bottom:1px solid var(--bg-soft)} .mobile-menu.open{display:flex} .mobile-menu .btn{margin-top:1rem} @media(min-width:900px){.nav-links,.nav-cta{display:flex}.burger{display:none}} /* ---------- Badge cobertura ---------- */ .cover-badge{display:inline-flex;align-items:center;gap:.5rem;background:var(--brand-050); color:var(--brand-600);font-weight:700;font-size:.82rem;padding:.45rem .9rem;border-radius:100px;border:1px solid var(--brand-200)} .cover-badge svg{width:1.05em;height:1.05em} .topbar{background:var(--ink);color:#dfe9ec;font-size:.8rem;text-align:center;padding:.5rem 1rem;font-weight:500} .topbar strong{color:#fff} /* ---------- Hero ---------- */ .hero{position:relative;overflow:hidden;background: radial-gradient(120% 90% at 85% -10%,rgba(14,122,140,.14),transparent 55%), linear-gradient(180deg,#fff, var(--bg-soft))} .hero-inner{display:grid;gap:2.2rem;padding:clamp(2.6rem,6vw,4.6rem) 0 clamp(3rem,6vw,4.6rem)} .hero h1{font-size:clamp(2rem,5.4vw,3.5rem);line-height:1.06;font-weight:800;letter-spacing:-.03em;color:var(--ink)} .hero h1 em{font-style:normal;color:var(--brand-600)} .hero .lead{margin-top:1.1rem;max-width:52ch} .hero-actions{display:flex;flex-wrap:wrap;gap:.8rem;margin-top:1.6rem} .hero-trust{display:flex;flex-wrap:wrap;gap:1.4rem;margin-top:1.9rem;padding-top:1.6rem;border-top:1px solid var(--line)} .hero-trust div{display:flex;align-items:center;gap:.5rem;font-size:.85rem;font-weight:600;color:var(--ink-2)} .hero-trust svg{width:1.2rem;height:1.2rem;color:var(--brand)} @media(min-width:960px){.hero-inner{grid-template-columns:1.05fr .95fr;align-items:center}} .hero-visual{aspect-ratio:4/3;border-radius:20px;overflow:hidden;position:relative; background:linear-gradient(135deg,#0E7A8C,#0B1119);box-shadow:0 30px 60px -30px rgba(11,17,25,.5)} .hero-visual img{width:100%;height:100%;object-fit:cover} /* ---------- Cards líneas de negocio ---------- */ .line-card{background:#fff;border:1px solid var(--line);border-radius:18px;padding:1.7rem;transition:.2s;height:100%;display:flex;flex-direction:column} .line-card:hover{border-color:var(--brand-200);box-shadow:0 20px 40px -28px rgba(11,17,25,.28);transform:translateY(-3px)} .line-card .ico{width:52px;height:52px;border-radius:13px;display:grid;place-items:center;background:var(--brand-050);color:var(--brand-600);margin-bottom:1.1rem} .line-card .ico svg{width:26px;height:26px} .line-card h3{margin-bottom:.5rem} .line-card p{color:var(--muted);line-height:1.6;font-size:.95rem;flex:1} .line-card .more{margin-top:1.1rem;font-weight:700;color:var(--brand-600);font-size:.9rem;display:inline-flex;align-items:center;gap:.3rem} /* ---------- Catálogo producto ---------- */ .cat-nav{display:flex;flex-wrap:wrap;gap:.6rem;justify-content:center;margin-bottom:2.4rem} .cat-nav a{font-size:.9rem;font-weight:600;padding:.5rem 1rem;border-radius:100px;border:1px solid var(--line);color:var(--ink-2)} .cat-nav a:hover{border-color:var(--brand);color:var(--brand-600)} .prod{background:#fff;border:1px solid var(--line);border-radius:16px;overflow:hidden;display:flex;flex-direction:column;transition:.2s} .prod:hover{box-shadow:0 20px 40px -28px rgba(11,17,25,.3);transform:translateY(-3px)} .prod-media{aspect-ratio:4/3;position:relative;display:grid;place-items:center; background:linear-gradient(135deg,var(--bg-soft),#e7eef1);color:var(--brand);overflow:hidden} .prod-media img{width:100%;height:100%;object-fit:cover} .prod-media svg{width:38%;height:38%;opacity:.5} .prod-tag{position:absolute;top:.7rem;left:.7rem;background:var(--ink);color:#fff;font-size:.68rem;font-weight:700; letter-spacing:.05em;text-transform:uppercase;padding:.3rem .6rem;border-radius:7px} .prod-body{padding:1.1rem 1.15rem 1.3rem;display:flex;flex-direction:column;flex:1} .prod-cat{font-size:.72rem;font-weight:700;letter-spacing:.08em;text-transform:uppercase;color:var(--brand-600)} .prod h3{font-size:1.05rem;margin:.35rem 0 .4rem} .prod p{font-size:.88rem;color:var(--muted);line-height:1.55;flex:1} .prod .btn{margin-top:1rem} .placeholder-note{background:#FFF7ED;border:1px dashed #FDBA74;color:#9A3412;border-radius:12px; padding:.85rem 1.1rem;font-size:.85rem;font-weight:600;margin-bottom:1.8rem;display:flex;gap:.6rem;align-items:flex-start} .placeholder-note svg{width:1.2rem;height:1.2rem;flex:none;margin-top:1px} /* ---------- Bloques varios ---------- */ .feature{display:flex;gap:.9rem;align-items:flex-start} .feature .fico{width:42px;height:42px;flex:none;border-radius:11px;display:grid;place-items:center;background:var(--brand-050);color:var(--brand-600)} .feature .fico svg{width:22px;height:22px} .feature h3{font-size:1.02rem;margin-bottom:.25rem} .feature p{font-size:.9rem;color:var(--muted);line-height:1.55} .trust-strip{display:grid;gap:1.2rem;grid-template-columns:repeat(2,1fr)} @media(min-width:760px){.trust-strip{grid-template-columns:repeat(4,1fr)}} .trust-strip .ts{text-align:center} .trust-strip .num{font-size:clamp(1.7rem,4vw,2.4rem);font-weight:800;color:var(--brand-600);letter-spacing:-.02em} .trust-strip .lbl{font-size:.82rem;color:var(--muted);font-weight:600;margin-top:.2rem} .cta-band{background:linear-gradient(135deg,var(--brand-600),#0B1119);color:#fff;border-radius:22px; padding:clamp(2rem,5vw,3.4rem);text-align:center} .cta-band h2{font-size:clamp(1.5rem,3.4vw,2.2rem);font-weight:800;letter-spacing:-.02em} .cta-band p{color:#cfe4e8;margin:.7rem auto 0;max-width:48ch;line-height:1.6} .cta-band .btn{margin-top:1.6rem} .faq details{border:1px solid var(--line);border-radius:14px;padding:0 1.2rem;margin-bottom:.8rem;background:#fff} .faq summary{list-style:none;cursor:pointer;padding:1.1rem 0;font-weight:700;color:var(--ink);display:flex;justify-content:space-between;gap:1rem;align-items:center} .faq summary::-webkit-details-marker{display:none} .faq summary::after{content:"+";font-size:1.4rem;color:var(--brand-600);font-weight:400;transition:.2s} .faq details[open] summary::after{transform:rotate(45deg)} .faq details p{padding:0 0 1.1rem;color:var(--muted);line-height:1.65} .proj{border-radius:16px;overflow:hidden;border:1px solid var(--line);background:#fff} .proj-media{aspect-ratio:16/10;background:linear-gradient(135deg,#0E7A8C,#0B1119);position:relative} .proj-media img{width:100%;height:100%;object-fit:cover} .proj-city{position:absolute;bottom:.8rem;left:.8rem;background:rgba(255,255,255,.92);color:var(--ink); font-size:.75rem;font-weight:700;padding:.35rem .7rem;border-radius:8px;display:flex;align-items:center;gap:.35rem} .proj-body{padding:1.15rem 1.2rem 1.35rem} .proj-body .tag{font-size:.72rem;font-weight:700;letter-spacing:.07em;text-transform:uppercase;color:var(--brand-600)} .proj-body h3{font-size:1.08rem;margin:.3rem 0 .4rem} .proj-body p{font-size:.9rem;color:var(--muted);line-height:1.55} .post-card{background:#fff;border:1px solid var(--line);border-radius:16px;overflow:hidden;display:flex;flex-direction:column;transition:.2s} .post-card:hover{box-shadow:0 20px 40px -28px rgba(11,17,25,.3);transform:translateY(-3px)} .post-media{aspect-ratio:16/9;background:linear-gradient(135deg,var(--bg-soft),#dfe9ec)} .post-body{padding:1.15rem 1.2rem 1.4rem;flex:1;display:flex;flex-direction:column} .post-body .tag{font-size:.72rem;font-weight:700;letter-spacing:.07em;text-transform:uppercase;color:var(--brand-600)} .post-body h3{font-size:1.1rem;margin:.35rem 0 .5rem;line-height:1.25} .post-body p{font-size:.9rem;color:var(--muted);line-height:1.55;flex:1} .post-body .more{margin-top:.9rem;font-weight:700;color:var(--brand-600);font-size:.9rem} /* ---------- Catálogo filtrable ---------- */ .cat-controls{position:sticky;top:66px;z-index:20;background:rgba(255,255,255,.94);backdrop-filter:blur(10px); border:1px solid var(--line);border-radius:16px;padding:1rem 1.1rem;margin-bottom:1.6rem;display:grid;gap:.9rem} .cat-row{display:flex;gap:.7rem;flex-wrap:wrap;align-items:center} .cat-search{flex:1;min-width:220px;position:relative} .cat-search input{width:100%;padding:.7rem .95rem .7rem 2.4rem;border:1px solid var(--line);border-radius:11px;font:inherit;color:var(--ink)} .cat-search input:focus{outline:none;border-color:var(--brand);box-shadow:0 0 0 3px var(--brand-050)} .cat-search svg{position:absolute;left:.8rem;top:50%;transform:translateY(-50%);width:1.05rem;height:1.05rem;color:var(--muted)} .cat-select{padding:.7rem .9rem;border:1px solid var(--line);border-radius:11px;font:inherit;color:var(--ink);background:#fff;min-width:180px} .cat-avail{display:inline-flex;align-items:center;gap:.5rem;font-size:.9rem;font-weight:600;color:var(--ink-2);white-space:nowrap;cursor:pointer} .cat-avail input{width:1.1rem;height:1.1rem;accent-color:var(--brand)} .cat-chips{display:flex;gap:.5rem;flex-wrap:wrap} .chip{font-size:.85rem;font-weight:600;padding:.45rem .9rem;border-radius:100px;border:1px solid var(--line);color:var(--ink-2);background:#fff} .chip:hover{border-color:var(--brand-200)} .chip.active{background:var(--brand);color:#fff;border-color:var(--brand)} .cat-count{font-size:.9rem;font-weight:700;color:var(--muted);margin-bottom:1rem} .cat-grid{display:grid;gap:1.2rem;grid-template-columns:repeat(2,1fr)} @media(min-width:680px){.cat-grid{grid-template-columns:repeat(3,1fr)}} @media(min-width:1000px){.cat-grid{grid-template-columns:repeat(4,1fr)}} .prod-meta{font-size:.82rem!important;color:var(--muted);margin:.15rem 0 .5rem!important;line-height:1.4!important} .prod-meta strong{color:var(--ink-2)} .prod-price{font-size:1.1rem;font-weight:800;color:var(--ink);margin-bottom:.7rem;display:block} .prod-body h3 a{color:inherit} .prod-body h3 a:hover{color:var(--brand-600)} .prod-media img{width:100%;height:100%;object-fit:contain;padding:10px;mix-blend-mode:multiply} .prod-stock{font-size:.76rem;font-weight:700;margin-bottom:.7rem;display:inline-block} .prod-stock.in{color:#0a8a4a}.prod-stock.out{color:#9a7b12} .cat-empty{grid-column:1/-1;text-align:center;color:var(--muted);padding:3rem 1rem;font-weight:600} .cat-note{font-size:.82rem;color:var(--muted)} /* ---------- Carrito: botón del header ---------- */ .cart-btn{position:relative;display:inline-flex;align-items:center;gap:.45rem;padding:.6rem .9rem; border:1px solid var(--line);border-radius:11px;background:#fff;font-weight:700;font-size:.92rem;color:var(--ink)} .cart-btn:hover{border-color:var(--brand);color:var(--brand-600)} .cart-btn svg{width:1.15rem;height:1.15rem} .cart-count{position:absolute;top:-7px;right:-7px;min-width:20px;height:20px;padding:0 5px;border-radius:100px; background:var(--brand);color:#fff;font-size:.72rem;font-weight:800;display:none;place-items:center;line-height:1} /* ---------- Carrito: drawer ---------- */ .bs-backdrop{position:fixed;inset:0;background:rgba(11,17,25,.45);opacity:0;pointer-events:none; transition:opacity .22s;z-index:80;backdrop-filter:blur(2px)} .bs-backdrop.show{opacity:1;pointer-events:auto} .bs-drawer{position:fixed;top:0;right:0;height:100dvh;width:min(420px,100vw);background:#fff;z-index:90; display:flex;flex-direction:column;transform:translateX(102%);transition:transform .26s cubic-bezier(.4,0,.2,1); box-shadow:-20px 0 50px -20px rgba(11,17,25,.35)} .bs-drawer.show{transform:translateX(0)} body.bs-locked{overflow:hidden} .bs-drawer-head{display:flex;align-items:center;justify-content:space-between;padding:1.1rem 1.2rem; border-bottom:1px solid var(--line);font-size:1.05rem;color:var(--ink)} .bs-close{background:none;border:0;font-size:1.9rem;line-height:1;color:var(--muted);padding:0 .3rem} .bs-close:hover{color:var(--ink)} .bs-drawer-body{flex:1;overflow-y:auto;padding:1rem 1.2rem} .bs-drawer-foot{border-top:1px solid var(--line);padding:1.1rem 1.2rem;background:var(--bg-soft)} .bs-empty{text-align:center;color:var(--muted);padding:3rem 1rem;line-height:1.8} .bs-empty a{color:var(--brand-600);font-weight:700} .bs-line{display:flex;gap:.85rem;padding:.9rem 0;border-bottom:1px solid var(--line)} .bs-line-img{width:68px;height:68px;flex:none;border-radius:10px;overflow:hidden;background:var(--bg-soft);display:grid;place-items:center} .bs-line-img img{width:100%;height:100%;object-fit:contain;padding:4px} .bs-noimg{width:26px;height:26px;border-radius:6px;background:var(--brand-050)} .bs-line-info{flex:1;min-width:0;display:flex;flex-direction:column;gap:.18rem} .bs-line-info strong{font-size:.92rem;line-height:1.3;color:var(--ink)} .bs-line-meta{font-size:.76rem;color:var(--muted)} .bs-line-price{font-size:.88rem;font-weight:700;color:var(--brand-600)} .bs-line-price.muted{color:var(--muted);font-weight:600;font-style:italic} .bs-qty{display:flex;align-items:center;gap:.5rem;margin-top:.35rem} .bs-qty button{width:28px;height:28px;border:1px solid var(--line);background:#fff;border-radius:8px; font-weight:700;color:var(--ink);line-height:1} .bs-qty button:hover{border-color:var(--brand);color:var(--brand-600)} .bs-qty span{min-width:22px;text-align:center;font-weight:700;font-size:.9rem} .bs-qty .bs-del{width:auto;padding:0 .6rem;font-size:.76rem;font-weight:600;color:var(--muted);border:0} .bs-qty .bs-del:hover{color:#b91c1c} .bs-total{display:flex;justify-content:space-between;align-items:baseline;margin-bottom:.9rem;font-size:1.05rem} .bs-total strong{font-size:1.35rem;color:var(--ink);font-weight:800} .bs-note{font-size:.82rem;color:var(--muted);margin-bottom:.9rem;line-height:1.5} /* ---------- Toast ---------- */ .bs-toast{position:fixed;left:50%;bottom:24px;transform:translate(-50%,140%);z-index:100; background:var(--ink);color:#fff;font-weight:600;font-size:.9rem;padding:.85rem 1.3rem;border-radius:12px; box-shadow:0 16px 40px -14px rgba(11,17,25,.6);transition:transform .28s cubic-bezier(.4,0,.2,1);max-width:90vw;text-align:center} .bs-toast.show{transform:translate(-50%,0)} /* ---------- Producto: acciones ---------- */ .prod-actions{display:flex;gap:.5rem;margin-top:auto} .prod-actions .btn{flex:1;justify-content:center;padding:.75rem 1rem;font-size:.9rem} .btn--wa-sm{background:#fff;border-color:var(--line);color:var(--ink);flex:0 0 auto!important;padding:.75rem .8rem!important} .btn--wa-sm:hover{border-color:var(--wa);color:var(--wa)} .btn--wa-sm svg{width:1.1rem;height:1.1rem} /* ---------- Página de producto ---------- */ .pdp{display:grid;gap:2rem} @media(min-width:860px){.pdp{grid-template-columns:1fr 1fr;gap:3rem;align-items:start}} .pdp-media{border:1px solid var(--line);border-radius:18px;background:#fff;aspect-ratio:1/1; display:grid;place-items:center;overflow:hidden;padding:1.5rem} .pdp-media img{width:100%;height:100%;object-fit:contain} .pdp h1{font-size:clamp(1.5rem,3.4vw,2.1rem);line-height:1.15;font-weight:800;letter-spacing:-.02em;color:var(--ink);margin:.4rem 0 .6rem} .pdp-brand{font-size:.8rem;font-weight:700;letter-spacing:.1em;text-transform:uppercase;color:var(--brand-600)} .pdp-ref{font-size:.85rem;color:var(--muted)} .pdp-price{font-size:1.8rem;font-weight:800;color:var(--ink);margin:1rem 0 .3rem} .pdp-price.muted{font-size:1.05rem;font-weight:600;color:var(--muted);font-style:italic} .pdp-buy{display:flex;gap:.7rem;flex-wrap:wrap;margin:1.4rem 0} .pdp-buy .btn{flex:1;min-width:180px;justify-content:center} .pdp-desc{color:var(--muted);line-height:1.7;margin-top:.4rem} .pdp-specs{margin-top:1.4rem;border:1px solid var(--line);border-radius:14px;overflow:hidden} .pdp-specs h2{font-size:.95rem;font-weight:700;color:var(--ink);padding:.9rem 1.1rem;background:var(--bg-soft);margin:0} .pdp-specs dl{margin:0;padding:.4rem 1.1rem .9rem} .pdp-specs div{display:flex;justify-content:space-between;gap:1rem;padding:.55rem 0;border-bottom:1px solid var(--line);font-size:.88rem} .pdp-specs div:last-child{border-bottom:0} .pdp-specs dt{color:var(--muted)} .pdp-specs dd{margin:0;font-weight:600;color:var(--ink);text-align:right} .pdp-trust{display:flex;flex-wrap:wrap;gap:1.1rem;margin-top:1.3rem;padding-top:1.2rem;border-top:1px solid var(--line)} .pdp-trust div{display:flex;align-items:center;gap:.45rem;font-size:.83rem;font-weight:600;color:var(--ink-2)} .pdp-trust svg{width:1.1rem;height:1.1rem;color:var(--brand)} /* ---------- Ofertas y promociones ---------- */ .pdp-media{position:relative} .pdp-badge{position:absolute;top:14px;left:14px;z-index:2;background:#D93025;color:#fff; font-size:.72rem;font-weight:800;letter-spacing:.08em;padding:.38rem .75rem;border-radius:8px;text-transform:uppercase} .pdp-price-wrap{display:flex;align-items:center;gap:.7rem;margin-top:1rem} .pdp-antes{font-size:1.05rem;color:var(--muted);text-decoration:line-through} .pdp-off{background:#FEE2E2;color:#B91C1C;font-size:.82rem;font-weight:800;padding:.22rem .55rem;border-radius:7px} .pdp-price-wrap + .pdp-price{margin-top:.2rem} .prod-badge{position:absolute;top:.7rem;left:.7rem;z-index:2;background:#D93025;color:#fff; font-size:.66rem;font-weight:800;letter-spacing:.06em;padding:.28rem .55rem;border-radius:6px;text-transform:uppercase} .prod-price-wrap{display:flex;align-items:baseline;gap:.45rem;flex-wrap:wrap;margin-bottom:.7rem} .prod-antes{font-size:.85rem;color:var(--muted);text-decoration:line-through} .prod-desc{background:#FEE2E2;color:#B91C1C;font-size:.7rem;font-weight:800;padding:.15rem .4rem;border-radius:5px} .prod-price-wrap .prod-price{margin-bottom:0} /* ---------- Qué incluye tu compra ---------- */ .incluye{margin-top:1.5rem;border:1px solid var(--line);border-radius:14px;padding:1.1rem 1.2rem;background:var(--bg-soft)} .incluye h2{font-size:.95rem;font-weight:700;color:var(--ink);margin:0 0 .8rem} .incluye ul{margin:0;padding:0;list-style:none} .incluye li{position:relative;padding-left:1.7rem;margin-bottom:.6rem;font-size:.88rem;line-height:1.5;color:var(--muted)} .incluye li:last-child{margin-bottom:0} .incluye li strong{color:var(--ink-2)} .incluye li::before{position:absolute;left:0;top:0;font-weight:800;font-size:.95rem} .incluye li.yes::before{content:"✓";color:#0a8a4a} .incluye li.no::before{content:"+";color:#c2740a} .incluye li.no strong{color:#9a5a08} /* ---------- Galería de proyectos ---------- */ .gallery{display:grid;gap:.8rem;grid-template-columns:repeat(2,1fr)} @media(min-width:700px){.gallery{grid-template-columns:repeat(3,1fr)}} @media(min-width:1000px){.gallery{grid-template-columns:repeat(4,1fr)}} .gitem{padding:0;border:0;background:var(--bg-soft);border-radius:12px;overflow:hidden;aspect-ratio:4/3;cursor:zoom-in;display:block} .gitem img{width:100%;height:100%;object-fit:cover;transition:transform .3s} .gitem:hover img{transform:scale(1.05)} .lightbox{position:fixed;inset:0;z-index:100;background:rgba(11,17,25,.92);display:grid;place-items:center;padding:2rem;cursor:zoom-out} .lightbox[hidden]{display:none} .lightbox img{max-width:min(1100px,94vw);max-height:88vh;width:auto;height:auto;border-radius:10px;object-fit:contain} .lb-close{position:absolute;top:1rem;right:1.3rem;background:none;border:0;color:#fff;font-size:2.4rem;line-height:1;cursor:pointer} /* ---------- Breadcrumb ---------- */ .crumbs{font-size:.82rem;color:var(--muted);padding:1.1rem 0;display:flex;gap:.5rem;flex-wrap:wrap} .crumbs a{color:var(--muted)}.crumbs a:hover{color:var(--brand-600)} .crumbs span{color:var(--ink-2);font-weight:600} /* ---------- Formulario ---------- */ .form{display:grid;gap:1rem} .form label{font-size:.85rem;font-weight:700;color:var(--ink-2);display:block;margin-bottom:.35rem} .form input,.form select,.form textarea{width:100%;padding:.8rem .95rem;border:1px solid var(--line); border-radius:11px;font:inherit;color:var(--ink);background:#fff;transition:.15s} .form input:focus,.form select:focus,.form textarea:focus{outline:none;border-color:var(--brand);box-shadow:0 0 0 3px var(--brand-050)} .form textarea{min-height:120px;resize:vertical} .form-msg{font-size:.9rem;font-weight:600;padding:.8rem;border-radius:10px;display:none} .form-msg.ok{display:block;background:#ecfdf5;color:#065f46} .form-msg.err{display:block;background:#fef2f2;color:#991b1b} /* ---------- WhatsApp flotante ---------- */ .wa-float{position:fixed;right:18px;bottom:18px;z-index:60;display:flex;align-items:center;gap:.6rem; background:var(--wa);color:#fff;font-weight:700;padding:.85rem 1.1rem;border-radius:100px; box-shadow:0 10px 30px -8px rgba(37,211,102,.7);transition:.2s} .wa-float:hover{transform:translateY(-2px) scale(1.02)} .wa-float svg{width:1.5rem;height:1.5rem} .wa-float .wa-label{display:none} @media(min-width:560px){.wa-float .wa-label{display:inline}} /* ---------- Footer ---------- */ .site-footer{background:var(--ink);color:#aebcc4;padding:3.2rem 0 2rem;font-size:.9rem} .foot-grid{display:grid;gap:2rem} @media(min-width:760px){.foot-grid{grid-template-columns:repeat(2,1fr)}} @media(min-width:1000px){.foot-grid{grid-template-columns:1.5fr .9fr .9fr 1.1fr 1.1fr}} .foot-grid h4{color:#fff;font-size:.85rem;letter-spacing:.06em;text-transform:uppercase;margin-bottom:.9rem} .foot-grid a{color:#aebcc4;line-height:2} .foot-grid a:hover{color:#fff} .foot-brand .brand{color:#fff}.foot-brand .brand small{color:#8ea0ab} .foot-brand p{margin-top:.9rem;line-height:1.6;max-width:34ch} .endorse{display:inline-flex;align-items:center;gap:.5rem;margin-top:1rem;font-size:.82rem; background:rgba(255,255,255,.06);border:1px solid rgba(255,255,255,.12);padding:.5rem .8rem;border-radius:10px;color:#cdd9df} .foot-bottom{margin-top:2.4rem;padding-top:1.4rem;border-top:1px solid rgba(255,255,255,.1); display:flex;flex-wrap:wrap;gap:.6rem;justify-content:space-between;font-size:.82rem;color:#8ea0ab}