/* ===================== MONTECARLO PERFUMERÍA - STORE CSS ===================== */
:root{
  --ink:#22191B;
  --night:#1B0C0F;
  --night-2:#3C0F16;
  --brand:#B31324;
  --brand-2:#D91E36;
  --flame:#D7192D;
  --mint:#8A6A32;
  --rose:#D64A5A;
  --sun:#D6A646;
  --paper:#F8F5F3;
  --card:#FFFFFF;
  --line:#E9DEDC;
  --muted:#776A6D;
  --radius:18px;
  --radius-sm:12px;
  --shadow:0 10px 30px rgba(58,15,22,.08);
  --shadow-lg:0 24px 60px rgba(35,12,16,.18);
  --ff-display:'Sora',system-ui,sans-serif;
  --ff-body:'Inter',system-ui,sans-serif;
  --ff-mono:'JetBrains Mono',monospace;
}
*,*::before,*::after{box-sizing:border-box;}
html{scroll-behavior:smooth;overflow-x:hidden;}
body{margin:0;font-family:var(--ff-body);color:var(--ink);background:var(--paper);-webkit-font-smoothing:antialiased;overflow-x:hidden;}
img,svg{display:block;max-width:100%;}
a{color:inherit;text-decoration:none;}
button{font-family:inherit;cursor:pointer;}
h1,h2,h3{font-family:var(--ff-display);margin:0;letter-spacing:-.01em;}
p{margin:0;}
ul{margin:0;padding:0;list-style:none;}
.container{max-width:1240px;margin:0 auto;padding:0 24px;}
:focus-visible{outline:3px solid var(--brand);outline-offset:2px;border-radius:4px;}
@media (prefers-reduced-motion: reduce){
  *{animation-duration:.01ms !important;animation-iteration-count:1 !important;transition-duration:.01ms !important;scroll-behavior:auto !important;}
}

/* ===================== BUTTONS ===================== */
.btn{display:inline-flex;align-items:center;justify-content:center;gap:8px;padding:14px 26px;border-radius:999px;font:700 15px var(--ff-body);border:2px solid transparent;transition:transform .15s ease,box-shadow .15s ease,background .15s ease;}
.btn:active{transform:scale(.97);}
.btn-primary{background:var(--flame);color:#fff;box-shadow:0 10px 24px rgba(215,25,45,.28);}
.btn-primary:hover{transform:translateY(-2px);box-shadow:0 14px 30px rgba(215,25,45,.38);}
.btn-ghost{background:rgba(255,255,255,.08);border-color:rgba(255,255,255,.5);color:#fff;}
.btn-ghost:hover{background:rgba(255,255,255,.18);transform:translateY(-2px);}
.btn-outline{background:#fff;border-color:var(--line);color:var(--night);}
.btn-outline:hover{border-color:var(--brand);}
.btn-dark{background:var(--night);color:#fff;}
.btn-dark:hover{background:var(--brand);}
.btn-block{width:100%;}
.btn-sm{padding:8px 16px;font-size:13px;}
.btn:disabled{opacity:.5;cursor:not-allowed;transform:none !important;}

/* ===================== TOP BAR (marquee) ===================== */
.topbar{background:var(--night);color:#fff;font-size:13px;overflow:hidden;display:flex;align-items:center;height:36px;}
.marquee-track{display:flex;white-space:nowrap;animation:scroll-left 22s linear infinite;}
.marquee-track span{padding:0 32px;display:inline-flex;align-items:center;gap:8px;font-weight:600;letter-spacing:.02em;}
@keyframes scroll-left{from{transform:translateX(0);}to{transform:translateX(-50%);}}

/* ===================== HEADER ===================== */
.site-header{position:sticky;top:0;z-index:40;background:#fff;border-bottom:1px solid var(--line);transition:box-shadow .2s ease;}
.site-header.scrolled{box-shadow:0 6px 24px rgba(58,15,22,.09);}
.header-inner{max-width:1240px;margin:0 auto;padding:14px 24px;display:flex;align-items:center;gap:20px;flex-wrap:wrap;}
.hamburger{display:none;background:none;border:none;padding:8px;color:var(--ink);}
.logo{display:inline-flex;align-items:center;flex:none;text-decoration:none;}
.brand-logo img{width:190px;height:56px;object-fit:contain;object-position:left center;}
.search-wrap{flex:1;position:relative;max-width:640px;}
.search-wrap input{width:100%;padding:12px 44px 12px 18px;border-radius:999px;border:2px solid var(--line);background:var(--paper);font:500 15px var(--ff-body);color:var(--ink);transition:border-color .15s ease;}
.search-wrap input:focus{border-color:var(--brand);outline:none;}
.search-wrap svg{position:absolute;right:16px;top:50%;transform:translateY(-50%);width:19px;height:19px;color:var(--muted);pointer-events:none;}
.header-actions{display:flex;align-items:center;gap:6px;margin-left:auto;}
.icon-btn{position:relative;background:none;border:none;padding:10px;border-radius:12px;color:var(--night);transition:background .15s ease;text-decoration:none;display:inline-flex;}
.icon-btn:hover{background:var(--paper);}
.icon-btn svg{width:24px;height:24px;}
.icon-btn.active svg{color:var(--rose);fill:var(--rose);}
.badge{position:absolute;top:2px;right:2px;min-width:18px;height:18px;padding:0 4px;border-radius:999px;background:var(--rose);color:#fff;font:700 11px var(--ff-mono);display:flex;align-items:center;justify-content:center;transition:transform .2s ease;}
.badge.bump{animation:bump .35s ease;}
@keyframes bump{0%{transform:scale(1);}40%{transform:scale(1.4);}100%{transform:scale(1);}}

.cat-strip{display:flex;gap:10px;overflow-x:auto;padding:0 24px 14px;max-width:1240px;margin:0 auto;scrollbar-width:none;}
.cat-strip::-webkit-scrollbar{display:none;}
.chip{flex:0 0 auto;padding:9px 18px;border-radius:999px;border:1.5px solid var(--line);background:#fff;font:600 13.5px var(--ff-body);color:var(--night);white-space:nowrap;transition:all .15s ease;display:inline-flex;align-items:center;gap:6px;}
.chip:hover{border-color:var(--brand);}
.chip.active{background:var(--night);border-color:var(--night);color:#fff;}

/* ===================== HERO ===================== */
.hero{position:relative;overflow:hidden;background:linear-gradient(160deg,var(--night),var(--night-2) 70%);padding:76px 0 84px;color:#fff;}
.blob{position:absolute;border-radius:50%;filter:blur(70px);opacity:.55;animation:float 9s ease-in-out infinite alternate;}
.blob1{width:380px;height:380px;background:var(--brand);top:-120px;right:-60px;}
.blob2{width:300px;height:300px;background:#78101D;bottom:-100px;left:10%;animation-delay:1.5s;}
.blob3{width:220px;height:220px;background:var(--sun);top:30%;right:28%;opacity:.22;animation-delay:.7s;}
@keyframes float{from{transform:translate(0,0) scale(1);}to{transform:translate(-24px,26px) scale(1.08);}}
.hero-inner{position:relative;z-index:2;max-width:1240px;margin:0 auto;padding:0 24px;display:grid;grid-template-columns:1.15fr .85fr;gap:56px;align-items:center;}
.eyebrow{display:inline-flex;align-items:center;gap:8px;background:rgba(255,255,255,.12);border:1px solid rgba(255,255,255,.25);padding:8px 16px;border-radius:999px;font:600 13px var(--ff-body);margin-bottom:22px;backdrop-filter:blur(6px);}
.hero h1{font-size:clamp(2.1rem,4.6vw,3.5rem);line-height:1.06;font-weight:800;}
.hero h1 .accent{color:#F1C76D;}
.hero p.lead{margin-top:20px;max-width:480px;color:rgba(255,255,255,.78);font-size:17px;line-height:1.6;}
.hero-ctas{display:flex;gap:14px;margin-top:32px;flex-wrap:wrap;}
.trust-row{display:flex;flex-wrap:wrap;gap:22px;margin-top:40px;}
.trust-row .item{display:flex;align-items:center;gap:8px;font:600 13px var(--ff-body);color:rgba(255,255,255,.85);}
.trust-row svg{width:20px;height:20px;color:#F1C76D;flex:none;}

.hero-visual{position:relative;}
.hero-card-behind{position:absolute;inset:20px -20px auto auto;width:88%;height:92%;background:linear-gradient(135deg,var(--brand),#5E0C16);border-radius:24px;transform:rotate(6deg);opacity:.5;top:26px;right:-14px;}
.hero-card{position:relative;background:#fff;border-radius:24px;padding:26px;box-shadow:var(--shadow-lg);transform:rotate(-2deg);transition:transform .3s ease;color:var(--ink);}
.hero-card:hover{transform:rotate(0deg);}
.live-pill{display:inline-flex;align-items:center;gap:8px;background:#FFF3F4;color:#8E101E;font:700 12.5px var(--ff-body);padding:7px 12px;border-radius:999px;margin-bottom:16px;}
.live-dot{width:8px;height:8px;border-radius:50%;background:var(--brand);animation:pulse-dot 1.4s ease-in-out infinite;}
@keyframes pulse-dot{0%,100%{opacity:1;}50%{opacity:.3;}}
.hero-media{border-radius:16px;aspect-ratio:16/11;display:flex;align-items:center;justify-content:center;overflow:hidden;background:#fff;}
.hero-media img{width:100%;height:100%;object-fit:contain;background:#fff;}
.hero-media svg{width:34%;height:34%;color:#fff;stroke-width:1.3;filter:drop-shadow(0 6px 14px rgba(0,0,0,.15));}
.hero-card .p-name{font:700 17px var(--ff-display);margin-top:16px;}
.hero-card .p-price-row{margin-top:8px;display:flex;align-items:baseline;gap:10px;}
.hero-card .p-price{font:700 22px var(--ff-mono);color:var(--night);}
.hero-card .p-old{font:600 14px var(--ff-mono);color:var(--muted);text-decoration:line-through;}

/* ===================== SECTION TITLES ===================== */
.section-head{display:flex;align-items:flex-end;justify-content:space-between;gap:20px;margin:0 0 26px;flex-wrap:wrap;}
.section-head h2{font-size:clamp(1.5rem,3vw,2.1rem);font-weight:800;color:var(--night);}
.section-head .sub{color:var(--muted);font-size:14.5px;margin-top:6px;}
.section{padding:64px 0;}

/* ===================== PROMO GRID ===================== */
.promo-grid{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:20px;padding-top:48px;padding-bottom:8px;}
.promo-tile{position:relative;border-radius:var(--radius);padding:26px;min-height:170px;color:#fff;display:flex;flex-direction:column;justify-content:flex-end;overflow:hidden;transition:transform .2s ease;}
.promo-tile:hover{transform:translateY(-4px);}
.promo-tile h3{font-size:19px;font-weight:700;line-height:1.25;}
.promo-tile .tag{position:absolute;top:16px;left:16px;font:700 12px var(--ff-mono);background:rgba(255,255,255,.22);padding:4px 10px;border-radius:999px;}
.promo-tile .go{margin-top:10px;font:700 13px var(--ff-body);display:inline-flex;align-items:center;gap:4px;}
.grad-1{background:linear-gradient(135deg,#7A0F1C,#C51D31);}
.grad-2{background:linear-gradient(135deg,#B31324,#E65C69);}
.grad-3{background:linear-gradient(135deg,#5D161D,#B31324);}
.grad-4{background:linear-gradient(135deg,#8A6A32,#D6A646);}
.grad-5{background:linear-gradient(135deg,#3A0D12,#8F1421);}
.grad-6{background:linear-gradient(135deg,#B31324,#D6A646);}

/* ===================== FLASH DEALS ===================== */
.flash{background:var(--night);border-radius:28px;margin:0 24px;max-width:1240px;margin-inline:auto;padding:40px 32px;color:#fff;}
.flash .section-head h2{color:#fff;}
.flash .section-head .sub{color:rgba(255,255,255,.6);}
.countdown{display:flex;align-items:center;gap:8px;}
.countdown .box{background:rgba(255,255,255,.12);border:1px solid rgba(255,255,255,.2);border-radius:10px;padding:8px 10px;font:700 20px var(--ff-mono);min-width:48px;text-align:center;}
.countdown .colon{font:700 18px var(--ff-mono);opacity:.6;}
.flash-scroll{display:flex;gap:18px;overflow-x:auto;padding-bottom:8px;scroll-snap-type:x mandatory;margin-top:10px;scrollbar-width:thin;}
.flash-scroll .product-card{flex:0 0 220px;scroll-snap-align:start;}

/* ===================== PRODUCT CARD ===================== */
.product-grid{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:22px;}
.product-card{background:#fff;border-radius:var(--radius);box-shadow:var(--shadow);overflow:hidden;transition:transform .2s ease,box-shadow .2s ease;display:flex;flex-direction:column;min-width:0;}
.product-card:hover{transform:translateY(-5px);box-shadow:var(--shadow-lg);}
.product-media{position:relative;aspect-ratio:1/1;overflow:hidden;display:flex;align-items:center;justify-content:center;background:radial-gradient(circle at 25% 20%,rgba(255,255,255,.35),transparent 55%);}
.product-media img{width:100%;height:100%;object-fit:contain;background:#fff;padding:10px;}
.product-media svg{width:42%;height:42%;color:#fff;stroke-width:1.3;filter:drop-shadow(0 4px 10px rgba(0,0,0,.12));}
.p-badge{position:absolute;top:10px;left:10px;padding:5px 10px;border-radius:999px;font:700 11.5px var(--ff-body);color:#fff;}
.badge-sale{background:var(--rose);}
.badge-new{background:var(--mint);color:var(--ink);}
.badge-best{background:var(--sun);color:#2B1B08;}
.badge-consult{background:#5B4B4E;color:#fff;}
.badge-out{background:var(--muted);}
.wish-btn{position:absolute;top:8px;right:8px;width:32px;height:32px;border-radius:50%;background:rgba(255,255,255,.85);border:none;display:flex;align-items:center;justify-content:center;backdrop-filter:blur(4px);}
.wish-btn svg{width:16px;height:16px;color:var(--night);}
.wish-btn.active svg{color:var(--rose);fill:var(--rose);}
.product-body{padding:16px;display:flex;flex-direction:column;gap:6px;flex:1;min-width:0;}
.p-cat{font:700 11px var(--ff-body);text-transform:uppercase;letter-spacing:.06em;color:var(--brand);}
.p-name{font:600 15px var(--ff-display);line-height:1.3;min-height:39px;}
.p-name a{color:inherit;}
.p-rating{display:flex;align-items:center;gap:6px;font-size:12.5px;color:var(--muted);}
.stars{color:var(--sun);letter-spacing:1px;}
.p-price-row{display:flex;align-items:baseline;gap:8px;margin-top:2px;flex-wrap:wrap;}
.p-price{font:700 18px var(--ff-mono);color:var(--ink);}
.p-price-consult{font-family:var(--ff-body);font-size:15px;color:var(--brand);}
.p-old{font:600 12.5px var(--ff-mono);color:var(--muted);text-decoration:line-through;}
.p-stock{font-size:12px;color:var(--muted);}
.p-stock.low{color:var(--rose);font-weight:700;}
.btn-add{margin-top:auto;padding-top:10px;}
.btn-add button{width:100%;padding:11px;border-radius:999px;border:none;background:var(--night);color:#fff;font:700 13.5px var(--ff-body);display:flex;align-items:center;justify-content:center;gap:7px;transition:background .15s ease,transform .15s ease;}
.btn-add button:hover{background:var(--brand);transform:translateY(-1px);}
.btn-add button:disabled{background:var(--line);color:var(--muted);}
.btn-consult{width:100%;padding:11px;border-radius:999px;border:1.5px solid var(--brand);color:var(--brand);font:700 13.5px var(--ff-body);display:flex;align-items:center;justify-content:center;transition:.15s ease;}
.btn-consult:hover{background:var(--brand);color:#fff;}
.verified-note{color:#6F5E37;font-weight:700;}
.btn-add svg{width:16px;height:16px;}

/* ===================== PRODUCT DETAIL ===================== */
.product-detail{display:grid;grid-template-columns:1fr 1fr;gap:44px;align-items:start;}
.product-detail .media{position:relative;border-radius:var(--radius);overflow:hidden;box-shadow:var(--shadow);aspect-ratio:1/1;display:flex;align-items:center;justify-content:center;background:radial-gradient(circle at 25% 20%,rgba(255,255,255,.35),transparent 55%);}
.product-detail .media img{width:100%;height:100%;object-fit:contain;background:#fff;padding:18px;}
.product-detail .media svg{width:36%;height:36%;color:#fff;stroke-width:1.2;}
.product-detail h1{font-size:clamp(1.5rem,3vw,2.1rem);}
.qty-form{display:flex;align-items:center;gap:14px;margin:20px 0;flex-wrap:wrap;}
.qty-box{display:flex;align-items:center;border:1.5px solid var(--line);border-radius:999px;overflow:hidden;}
.qty-box button{width:38px;height:38px;background:#fff;border:none;font-size:18px;font-weight:700;}
.qty-box input{width:48px;text-align:center;border:none;font:700 14px var(--ff-mono);}

/* ===================== COLLECTIONS ===================== */
.collection-grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(240px,1fr));gap:20px;}
.collection-card{background:#fff;border-radius:var(--radius);padding:24px;display:flex;flex-direction:column;align-items:flex-start;gap:14px;box-shadow:var(--shadow);border:1px solid var(--line);transition:transform .2s ease,box-shadow .2s ease;}
.collection-card:hover{transform:translateY(-4px);box-shadow:var(--shadow-lg);}
.collection-icon{width:52px;height:52px;border-radius:14px;display:flex;align-items:center;justify-content:center;}
.collection-icon svg{width:26px;height:26px;color:#fff;}
.collection-card h3{font-size:16.5px;}
.collection-card .count{font-size:13px;color:var(--muted);}

/* ===================== BENEFITS ===================== */
.benefits-grid{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:24px;}
.benefit{display:flex;flex-direction:column;align-items:flex-start;gap:12px;}
.benefit-icon{width:48px;height:48px;border-radius:12px;background:var(--paper);display:flex;align-items:center;justify-content:center;}
.benefit-icon svg{width:24px;height:24px;color:var(--brand);}
.benefit h4{font-size:15px;font-family:var(--ff-display);}
.benefit p{font-size:13.5px;color:var(--muted);line-height:1.5;}

/* ===================== TESTIMONIALS ===================== */
.testi-grid{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:22px;}
.testi-card{background:#fff;border:1px solid var(--line);border-radius:var(--radius);padding:26px;box-shadow:var(--shadow);}
.testi-card .stars{margin-bottom:12px;display:block;}
.promise-card{position:relative;overflow:hidden;}
.promise-mark{width:42px;height:42px;border-radius:12px;color:#fff;display:flex;align-items:center;justify-content:center;font-size:17px;margin-bottom:16px;}
.testi-card p.quote{font-size:14.5px;line-height:1.65;color:var(--ink);}
.testi-who{display:flex;align-items:center;gap:12px;margin-top:18px;}
.testi-avatar{width:38px;height:38px;border-radius:50%;display:flex;align-items:center;justify-content:center;color:#fff;font:700 14px var(--ff-display);flex:none;}
.testi-who .name{font:700 13.5px var(--ff-body);}
.testi-who .loc{font-size:12px;color:var(--muted);}

/* ===================== NEWSLETTER ===================== */
.newsletter{background:linear-gradient(120deg,#7A0F1C,var(--brand));border-radius:28px;margin:0 24px;max-width:1240px;margin-inline:auto;padding:52px 32px;text-align:center;color:#fff;}
.newsletter h2{font-size:clamp(1.4rem,3vw,2rem);}
.newsletter p{margin-top:10px;color:rgba(255,255,255,.85);}
.newsletter-form{display:flex;gap:10px;max-width:440px;margin:26px auto 0;}
.newsletter-form input{flex:1;min-width:0;padding:14px 18px;border-radius:999px;border:none;font:500 14px var(--ff-body);}
.newsletter-form button{padding:14px 26px;border-radius:999px;border:none;background:var(--night);color:#fff;font:700 14px var(--ff-body);}
.newsletter-msg{margin-top:14px;font:600 13.5px var(--ff-body);color:#fff;}

/* ===================== FOOTER ===================== */
.site-footer{background:var(--night);color:rgba(255,255,255,.75);margin-top:60px;padding:56px 0 24px;}
.footer-grid{display:grid;grid-template-columns:1.4fr repeat(3,minmax(0,1fr));gap:32px;}
.footer-logo{display:inline-flex;background:rgba(255,255,255,.96);padding:10px 14px;border-radius:14px;}
.footer-logo img{width:205px;height:52px;object-fit:contain;}
.footer-grid p.about{margin-top:14px;font-size:13.5px;line-height:1.6;max-width:280px;}
.social-row{display:flex;gap:10px;margin-top:18px;}
.social-row a{width:36px;height:36px;border-radius:10px;background:rgba(255,255,255,.08);display:flex;align-items:center;justify-content:center;transition:background .15s ease;}
.social-row a:hover{background:var(--brand);}
.social-row svg{width:17px;height:17px;color:#fff;}
.footer-col h5{color:#fff;font:700 13.5px var(--ff-body);text-transform:uppercase;letter-spacing:.05em;margin-bottom:16px;}
.footer-col li{margin-bottom:10px;}
.footer-col a{font-size:13.5px;transition:color .15s ease;}
.footer-col a:hover{color:#fff;}
.footer-bottom{border-top:1px solid rgba(255,255,255,.12);margin-top:44px;padding-top:22px;display:flex;justify-content:space-between;align-items:center;flex-wrap:wrap;gap:14px;font-size:12.5px;}
.pay-methods{display:flex;gap:8px;flex-wrap:wrap;}
.pay-methods span{background:rgba(255,255,255,.08);padding:5px 10px;border-radius:6px;font:600 11.5px var(--ff-body);}

/* ===================== BACK TO TOP / TOAST ===================== */
.to-top{position:fixed;bottom:90px;right:24px;width:46px;height:46px;border-radius:50%;background:var(--night);color:#fff;border:none;font-size:18px;box-shadow:var(--shadow-lg);opacity:0;pointer-events:none;transform:translateY(10px);transition:all .25s ease;z-index:30;}
.to-top.show{opacity:1;pointer-events:auto;transform:translateY(0);}
.toast{position:fixed;bottom:24px;left:50%;transform:translate(-50%,20px);background:var(--ink);color:#fff;padding:13px 22px;border-radius:999px;font:600 13.5px var(--ff-body);opacity:0;pointer-events:none;transition:all .25s ease;z-index:80;box-shadow:var(--shadow-lg);max-width:90vw;text-align:center;}
.toast.show{opacity:1;transform:translate(-50%,0);}

/* ===================== OVERLAY / CART DRAWER ===================== */
.overlay{position:fixed;inset:0;background:rgba(18,16,43,.55);opacity:0;pointer-events:none;transition:opacity .25s ease;z-index:50;backdrop-filter:blur(2px);}
.overlay.show{opacity:1;pointer-events:auto;}
.cart-drawer{position:fixed;top:0;right:0;height:100%;width:420px;max-width:92vw;background:#fff;z-index:60;transform:translateX(100%);transition:transform .3s ease;display:flex;flex-direction:column;box-shadow:-10px 0 40px rgba(0,0,0,.15);}
.cart-drawer.open{transform:translateX(0);}
.cart-head{display:flex;align-items:center;justify-content:space-between;padding:20px 22px;border-bottom:1px solid var(--line);}
.cart-head h3{font-size:18px;}
.cart-head button{background:none;border:none;padding:6px;color:var(--ink);}
.cart-items{flex:1;overflow-y:auto;padding:14px 22px;display:flex;flex-direction:column;gap:16px;}
.cart-row{display:flex;gap:12px;align-items:center;}
.cart-row .thumb{width:56px;height:56px;border-radius:12px;flex:none;overflow:hidden;display:flex;align-items:center;justify-content:center;}
.cart-row .thumb img{width:100%;height:100%;object-fit:cover;}
.cart-row .thumb svg{width:26px;height:26px;color:#fff;}
.cart-row .info{flex:1;min-width:0;}
.cart-row .info .n{font:600 13.5px var(--ff-display);white-space:nowrap;overflow:hidden;text-overflow:ellipsis;}
.cart-row .info .u{font:600 12px var(--ff-mono);color:var(--muted);margin-top:2px;}
.qty-stepper{display:flex;align-items:center;gap:8px;margin-top:8px;}
.qty-stepper button{width:24px;height:24px;border-radius:6px;border:1px solid var(--line);background:#fff;font-weight:700;line-height:1;color:var(--night);}
.qty-stepper span{font:700 12.5px var(--ff-mono);min-width:16px;text-align:center;}
.cart-row .remove{background:none;border:none;color:var(--muted);padding:4px;flex:none;}
.cart-row .remove:hover{color:var(--rose);}
.cart-empty{padding:60px 24px;text-align:center;color:var(--muted);}
.cart-empty svg{width:52px;height:52px;margin:0 auto 14px;color:var(--line);}
.ship-box{padding:0 22px 14px;}
.ship-bar{height:8px;border-radius:99px;background:var(--line);overflow:hidden;margin-top:8px;}
.ship-bar-fill{height:100%;background:linear-gradient(90deg,var(--sun),var(--brand));width:0%;transition:width .3s ease;}
.ship-msg{font-size:12.5px;color:var(--muted);}
.ship-msg.done{color:#04835F;font-weight:700;}
.cart-foot{border-top:1px solid var(--line);padding:18px 22px 22px;}
.sum-row{display:flex;justify-content:space-between;font-size:14px;color:var(--muted);margin-bottom:8px;gap:10px;}
.sum-row.total{font:700 17px var(--ff-mono);color:var(--ink);margin-top:10px;}
.cart-foot .btn-primary{width:100%;margin-top:14px;padding:15px;}

/* ===================== CHECKOUT MODAL ===================== */
.modal{position:fixed;top:50%;left:50%;transform:translate(-50%,-46%);width:560px;max-width:92vw;max-height:88vh;overflow-y:auto;background:#fff;border-radius:22px;z-index:70;padding:30px 30px 26px;opacity:0;pointer-events:none;transition:all .25s ease;box-shadow:var(--shadow-lg);}
.modal.open{opacity:1;pointer-events:auto;transform:translate(-50%,-50%);}
.modal-close{position:absolute;top:18px;right:18px;background:var(--paper);border:none;width:34px;height:34px;border-radius:50%;color:var(--ink);}
.steps-indicator{display:flex;align-items:center;gap:8px;margin:6px 0 28px;}
.step-dot{display:flex;align-items:center;gap:8px;}
.step-dot .n{width:28px;height:28px;border-radius:50%;background:var(--line);color:var(--muted);font:700 13px var(--ff-mono);display:flex;align-items:center;justify-content:center;transition:all .2s ease;flex:none;}
.step-dot.active .n{background:var(--brand);color:#fff;}
.step-dot.done .n{background:var(--mint);color:#fff;}
.step-dot .lbl{font:600 12.5px var(--ff-body);color:var(--muted);}
.step-dot.active .lbl{color:var(--ink);}
.step-line{flex:1;height:2px;background:var(--line);}
.modal h3{font-size:20px;margin-bottom:18px;}
.field{margin-bottom:14px;min-width:0;}
.field label{display:block;font:600 12.5px var(--ff-body);margin-bottom:6px;color:var(--muted);}
.field input,.field select,.field textarea{width:100%;max-width:100%;padding:12px 14px;border-radius:10px;border:1.5px solid var(--line);font:500 14px var(--ff-body);background:#fff;}
.field input:focus,.field select:focus,.field textarea:focus{border-color:var(--brand);outline:none;}
.field-row{display:flex;gap:12px;flex-wrap:wrap;}
.field-row .field{flex:1 1 160px;min-width:0;}
.pay-option{display:flex;align-items:center;gap:12px;padding:14px;border:1.5px solid var(--line);border-radius:12px;margin-bottom:10px;cursor:pointer;transition:border-color .15s ease;}
.pay-option:has(input:checked){border-color:var(--brand);background:#F7F4FF;}
.pay-option input{accent-color:var(--brand);flex:none;}
.pay-option span{font:600 14px var(--ff-body);}
.pay-option .ps{display:block;font:500 12px var(--ff-body);color:var(--muted);margin-top:2px;}
.modal-actions{display:flex;gap:12px;margin-top:22px;}
.modal-actions .btn-secondary{flex:none;padding:14px 20px;border-radius:999px;border:1.5px solid var(--line);background:#fff;color:var(--ink);font:700 14px var(--ff-body);}
.modal-actions .btn-primary{flex:1;box-shadow:none;}
.order-summary{background:var(--paper);border-radius:14px;padding:16px;margin-bottom:18px;}
.order-summary .row{display:flex;justify-content:space-between;font-size:13.5px;padding:6px 0;gap:10px;}
.order-summary .row.total{font:700 16px var(--ff-mono);border-top:1px dashed var(--line);margin-top:6px;padding-top:12px;}
.checkout-success{text-align:center;padding:20px 6px 6px;}
.success-check{width:70px;height:70px;border-radius:50%;background:#EFFBF6;color:#04835F;display:flex;align-items:center;justify-content:center;margin:0 auto 18px;}
.success-check svg{width:34px;height:34px;}
.checkout-success h3{font-size:21px;}
.checkout-success p{color:var(--muted);margin-top:8px;font-size:14px;}
.order-code{font:700 15px var(--ff-mono);background:var(--paper);display:inline-block;padding:8px 16px;border-radius:10px;margin-top:14px;}
.checkout-error{background:#FDECEF;color:#B3123A;border:1px solid #F7C5D2;padding:12px 14px;border-radius:10px;font-size:13.5px;margin-bottom:14px;}

/* ===================== MOBILE NAV ===================== */
.mobile-nav{display:none;position:fixed;bottom:0;left:0;right:0;background:#fff;border-top:1px solid var(--line);z-index:40;padding:8px 6px calc(8px + env(safe-area-inset-bottom));}
.mobile-nav ul{display:flex;justify-content:space-around;}
.mobile-nav button,.mobile-nav a{background:none;border:none;display:flex;flex-direction:column;align-items:center;gap:3px;color:var(--muted);font:600 10.5px var(--ff-body);padding:4px 10px;position:relative;text-decoration:none;}
.mobile-nav button.active,.mobile-nav a.active{color:var(--brand);}
.mobile-nav svg{width:21px;height:21px;}
.mobile-nav .badge{top:-2px;right:2px;}

/* ===================== EXTRA: cuenta / login / registro / pedidos ===================== */
/* Estos componentes no existen en el diseño de referencia (que no incluía
   login) pero usan exactamente los mismos tokens de color, tipografía y
   radios para verse como parte del mismo sistema. */
.page-banner{background:linear-gradient(160deg,var(--night),var(--night-2) 70%);color:#fff;padding:40px 0;}
.page-banner h1{font-size:clamp(1.6rem,3.6vw,2.4rem);font-weight:800;}
.page-banner p{color:rgba(255,255,255,.7);margin-top:8px;}
.breadcrumb{font-size:13px;color:var(--muted);}
.breadcrumb a{color:var(--muted);}

.form-card{background:#fff;border-radius:var(--radius);padding:28px;box-shadow:var(--shadow);max-width:460px;margin:40px auto;min-width:0;}
.form-foot{text-align:center;font-size:13.5px;color:var(--muted);margin-top:16px;}

.alert{padding:13px 18px;border-radius:12px;font-size:14px;margin-bottom:16px;font-weight:500;}
.alert-error{background:#FDECEF;color:#B3123A;border:1px solid #F7C5D2;}
.alert-success{background:#EAFBF5;color:#04835F;border:1px solid #B6EEDB;}
.alert-info{background:#FCECEE;color:var(--brand);border:1px solid #EDC6CB;}

.status-badge{display:inline-flex;padding:5px 12px;border-radius:999px;font:700 12px var(--ff-body);white-space:nowrap;}
.st-pending{background:#FFF4DC;color:#8A5A00;}
.st-review{background:#FCECEE;color:var(--brand);}
.st-paid{background:#EAFBF5;color:#04835F;}
.st-shipped{background:#E5F1FF;color:#0B5FBF;}
.st-delivered{background:#E7FBEF;color:#0B7A3E;}
.st-cancelled{background:#FDECEF;color:#B3123A;}

.order-box{background:#fff;border-radius:var(--radius);padding:24px;box-shadow:var(--shadow);margin-bottom:20px;min-width:0;}
.order-box h3{font-size:16px;margin-bottom:14px;}

.empty-state{text-align:center;padding:60px 20px;color:var(--muted);}
.empty-state svg{width:52px;height:52px;margin:0 auto 14px;color:var(--line);}

.simple-table{width:100%;border-collapse:collapse;background:#fff;border-radius:var(--radius);overflow:hidden;box-shadow:var(--shadow);}
.simple-table th{text-align:left;background:var(--paper);font:700 12px var(--ff-body);text-transform:uppercase;color:var(--muted);padding:12px 16px;}
.simple-table td{padding:14px 16px;border-top:1px solid var(--line);font-size:14px;}
.table-scroll{overflow-x:auto;max-width:100%;}

.account-layout{display:grid;grid-template-columns:220px minmax(0,1fr);gap:30px;}
.account-nav{background:#fff;border-radius:var(--radius);padding:14px;box-shadow:var(--shadow);height:fit-content;}
.account-nav a{display:block;padding:11px 14px;border-radius:10px;font:600 13.5px var(--ff-body);color:var(--night);margin-bottom:4px;}
.account-nav a.active,.account-nav a:hover{background:var(--paper);color:var(--brand);}

.cart-table{width:100%;border-collapse:collapse;}
.cart-table th{text-align:left;font:700 12px var(--ff-body);text-transform:uppercase;color:var(--muted);padding:10px 8px;border-bottom:1.5px solid var(--line);}
.cart-table td{padding:14px 8px;border-bottom:1px solid var(--line);vertical-align:middle;}
.cart-prod{display:flex;align-items:center;gap:12px;}
.cart-prod img{width:56px;height:56px;border-radius:10px;object-fit:cover;}

/* ===================== WHATSAPP FLOATING BUTTON ===================== */
/* Elemento agregado sobre el diseño base, con la misma identidad visual. */
.wa-float{position:fixed;bottom:24px;right:24px;width:58px;height:58px;border-radius:50%;background:#25D366;display:flex;align-items:center;justify-content:center;box-shadow:0 10px 28px rgba(37,211,102,.45);z-index:55;animation:wa-pulse 2.4s ease-in-out infinite;}
.wa-float svg{width:30px;height:30px;color:#fff;}
@keyframes wa-pulse{0%,100%{transform:scale(1);}50%{transform:scale(1.08);}}
@media (max-width:760px){
  .brand-logo img{width:150px;height:46px;}
 .wa-float{bottom:80px;right:16px;width:52px;height:52px;} .wa-float svg{width:26px;height:26px;} }

/* ===================== RESPONSIVE ===================== */
@media (max-width:1000px){
  .promo-grid{grid-template-columns:repeat(2,minmax(0,1fr));}
  .product-grid{grid-template-columns:repeat(3,minmax(0,1fr));}
  .collection-grid{grid-template-columns:repeat(2,minmax(0,1fr));}
  .benefits-grid{grid-template-columns:repeat(2,minmax(0,1fr));}
  .testi-grid{grid-template-columns:minmax(0,1fr);}
  .hero-inner{grid-template-columns:minmax(0,1fr);}
  .hero-visual{max-width:420px;}
  .footer-grid{grid-template-columns:repeat(2,minmax(0,1fr));}
  .product-detail{grid-template-columns:minmax(0,1fr);}
  .account-layout{grid-template-columns:minmax(0,1fr);}
}
@media (max-width:760px){
  .search-wrap{order:3;max-width:none;flex:0 0 100%;margin-top:10px;}
  .header-inner{flex-wrap:wrap;}
  .hamburger{display:flex;}
  .product-grid{grid-template-columns:repeat(2,minmax(0,1fr));gap:14px;}
  .promo-grid{grid-template-columns:minmax(0,1fr);}
  .collection-grid{grid-template-columns:minmax(0,1fr);}
  .benefits-grid{grid-template-columns:minmax(0,1fr);}
  .footer-grid{grid-template-columns:minmax(0,1fr);gap:30px;}
  .flash{margin:0 14px;padding:28px 18px;border-radius:20px;}
  .newsletter{margin:0 14px;padding:36px 20px;}
  .newsletter-form{flex-direction:column;}
  .section{padding:44px 0;}
  .mobile-nav{display:block;}
  body{padding-bottom:64px;}
  .to-top{bottom:76px;}
  .modal{padding:24px 20px 20px;}
  .field-row{flex-direction:column;gap:0;}
  .cart-table thead{display:none;}
  .cart-table td{display:block;border:none;padding:4px 0;}
  .cart-table tr{display:block;padding:14px 0;border-bottom:1px solid var(--line);}
}

/* =====================================================================
   MONTECARLO - AJUSTE VISUAL "MAS VIVO" (2026-09)
   Solo apariencia. No modifica PHP, MySQL, JS ni funcionalidades.
   Reemplazar: assets/css/store.css
   ===================================================================== */

:root{
  /* Paleta Montecarlo más luminosa, manteniendo rojo + borgoña + dorado */
  --ink:#2A171B;
  --night:#321317;
  --night-2:#701326;
  --brand:#C8102E;
  --brand-2:#EE3150;
  --flame:#E31B3A;
  --mint:#C99A3C;
  --rose:#F05268;
  --sun:#E6B84D;
  --paper:#FFF9F7;
  --card:#FFFFFF;
  --line:#F0DDDF;
  --muted:#78666A;
  --shadow:0 10px 32px rgba(130,25,45,.10);
  --shadow-lg:0 24px 60px rgba(130,25,45,.18);
}

/* Fondo general más claro y limpio */
body{
  background:
    radial-gradient(circle at 8% 0%,rgba(240,82,104,.08),transparent 28%),
    radial-gradient(circle at 92% 22%,rgba(230,184,77,.08),transparent 24%),
    var(--paper);
}

/* Barra superior: roja en vez de casi negra */
.topbar{
  background:linear-gradient(90deg,#9F1029 0%,#D21C3A 50%,#9F1029 100%);
}

/* Header con un toque más premium */
.site-header{
  background:rgba(255,255,255,.97);
  border-bottom:1px solid #F1D8DD;
}
.search-wrap input{
  background:#FFF7F6;
  border-color:#EDD7DA;
}
.search-wrap input:focus{
  background:#fff;
  box-shadow:0 0 0 4px rgba(200,16,46,.08);
}

/* Categorías activas: color de marca, no negro */
.chip:hover{
  border-color:var(--brand);
  color:var(--brand);
  background:#FFF6F7;
}
.chip.active{
  background:linear-gradient(135deg,var(--brand),var(--brand-2));
  border-color:transparent;
  color:#fff;
  box-shadow:0 8px 18px rgba(200,16,46,.20);
}

/* Hero: más vivo, menos oscuro */
.hero{
  background:
    radial-gradient(circle at 82% 18%,rgba(255,210,112,.26),transparent 24%),
    radial-gradient(circle at 12% 88%,rgba(255,121,141,.22),transparent 28%),
    linear-gradient(135deg,#8F1025 0%,#C8102E 48%,#E32A48 100%);
}
.blob1{background:#FF4D6A;opacity:.46;}
.blob2{background:#9B0F28;opacity:.38;}
.blob3{background:#F3C767;opacity:.30;}
.hero h1 .accent{color:#FFE08A;}
.hero p.lead{color:rgba(255,255,255,.90);}
.hero-card-behind{
  background:linear-gradient(135deg,#F05268,#E6B84D);
  opacity:.42;
}
.hero-card{
  border:1px solid rgba(255,255,255,.65);
  box-shadow:0 28px 70px rgba(91,12,29,.24);
}

/* Botones: usar el rojo de marca como acción principal */
.btn-primary,
.btn-dark,
.btn-add button,
.newsletter-form button{
  background:linear-gradient(135deg,var(--brand),var(--brand-2));
  color:#fff;
}
.btn-dark:hover,
.btn-add button:hover,
.newsletter-form button:hover{
  background:linear-gradient(135deg,#A90D27,#E31B3A);
}
.btn-primary{
  box-shadow:0 10px 24px rgba(200,16,46,.25);
}
.btn-primary:hover{
  box-shadow:0 14px 30px rgba(200,16,46,.34);
}

/* Mosaicos promocionales: gradientes más alegres */
.grad-1{background:linear-gradient(135deg,#C8102E,#F05268);}
.grad-2{background:linear-gradient(135deg,#E32646,#FF7A8E);}
.grad-3{background:linear-gradient(135deg,#9F1730,#D93A53);}
.grad-4{background:linear-gradient(135deg,#B7852C,#EDC65F);}
.grad-5{background:linear-gradient(135deg,#B2132E,#E94861);}
.grad-6{background:linear-gradient(135deg,#C8102E,#E8B84E);}
.promo-tile{
  box-shadow:0 12px 26px rgba(126,20,41,.14);
}

/* Flash deals: pasa de bloque negro a bloque claro rosado */
.flash{
  background:
    radial-gradient(circle at 92% 10%,rgba(230,184,77,.20),transparent 28%),
    linear-gradient(135deg,#FFF4F5 0%,#FFF9F6 58%,#FFF5E8 100%);
  color:var(--ink);
  border:1px solid #F0D7DC;
  box-shadow:0 20px 50px rgba(130,25,45,.10);
}
.flash .section-head h2{color:#6F1021;}
.flash .section-head .sub{color:var(--muted);}
.countdown .box{
  background:#fff;
  border:1px solid #EACFD4;
  color:var(--brand);
  box-shadow:0 6px 14px rgba(130,25,45,.08);
}
.countdown .colon{color:var(--brand);opacity:.7;}

/* Tarjetas de producto: más aire, hover más luminoso */
.product-card{
  border:1px solid rgba(228,195,201,.70);
  box-shadow:0 8px 24px rgba(130,25,45,.08);
}
.product-card:hover{
  box-shadow:0 18px 42px rgba(130,25,45,.16);
}
.product-media{
  background:linear-gradient(145deg,#FFFDFD,#FFF4F5);
}
.p-cat{color:#C8102E;}
.p-price{color:#42141C;}
.badge-new{background:#F1C96D;color:#4B3509;}
.badge-best{background:#E8B84E;color:#422D00;}

/* Colecciones / beneficios / testimonios */
.collection-card,
.testi-card,
.form-card,
.order-box,
.account-nav{
  border:1px solid rgba(228,195,201,.72);
  box-shadow:0 9px 28px rgba(130,25,45,.07);
}
.benefit-icon{
  background:linear-gradient(135deg,#FFF0F2,#FFF7E7);
}
.benefit-icon svg{color:var(--brand);}

/* Newsletter más energético */
.newsletter{
  background:
    radial-gradient(circle at 15% 10%,rgba(255,224,138,.22),transparent 25%),
    linear-gradient(120deg,#A8102B 0%,#D91F42 55%,#F05268 100%);
  box-shadow:0 20px 50px rgba(130,25,45,.18);
}
.newsletter-form button{
  border:1px solid rgba(255,255,255,.30);
}

/* Banners internos en rojo Montecarlo, no casi negro */
.page-banner{
  background:
    radial-gradient(circle at 82% 10%,rgba(230,184,77,.20),transparent 25%),
    linear-gradient(135deg,#8F1025,#C8102E 60%,#E5314D);
}

/* Footer se mantiene oscuro para dar cierre, pero con tono borgoña */
.site-footer{
  background:linear-gradient(160deg,#2B1117 0%,#49121E 100%);
}
.footer-bottom{border-top-color:rgba(255,255,255,.16);}
.social-row a{background:rgba(255,255,255,.11);}
.social-row a:hover{background:#E12B48;}
.pay-methods span{background:rgba(255,255,255,.11);}

/* Elementos flotantes */
.to-top{
  background:linear-gradient(135deg,var(--brand),var(--brand-2));
}

/* Formularios y pagos: selección con rojo suave */
.pay-option:has(input:checked){
  border-color:var(--brand);
  background:#FFF1F3;
}
.field input:focus,.field select:focus,.field textarea:focus{
  box-shadow:0 0 0 4px rgba(200,16,46,.07);
}

/* En móvil conserva la misma identidad luminosa */
@media (max-width: 760px){
  .hero{padding-top:54px;padding-bottom:60px;}
  .flash{margin-left:14px;margin-right:14px;}
  .newsletter{margin-left:14px;margin-right:14px;}
}


/* =====================================================================
   AJUSTE FINAL - SECCIÓN "SELECCIÓN MONTECARLO" / FLASH CLARO
   Solo cambia esta sección para que quede como la 2da imagen:
   fondo crema claro con texto vino.
   ===================================================================== */

.flash{
  background:
    radial-gradient(circle at 88% 10%, rgba(213,168,75,.18), transparent 24%),
    linear-gradient(135deg, #F9EFF0 0%, #FBF6F4 56%, #F6EFD9 100%);
  color: var(--ink);
  border: 1px solid #EEDBDD;
  box-shadow: 0 20px 50px rgba(130,25,45,.10);
}

.flash .section-head h2{
  color:#7C1023;
}

.flash .section-head .sub{
  color:var(--muted);
}

.countdown .box{
  background:#FFFFFF;
  border:1px solid #E7D0D4;
  color:#A90F27;
  box-shadow:0 6px 14px rgba(93,14,31,.08);
}

.countdown .colon{
  color:#B28A39;
  opacity:.85;
}

.flash .product-card{
  background:#FFFFFF;
}

.flash .product-card:hover{
  box-shadow:0 18px 42px rgba(83,13,28,.12);
}


/* =====================================================================
   AJUSTE FINAL - TOPBAR CON EL MISMO TONO DEL FOOTER
   Solo cambia la barra superior que se mueve.
   ===================================================================== */

.topbar{
  background:linear-gradient(160deg,#1E0C10 0%,#321016 50%,#4A111B 100%);
  color:#fff;
}


/* =====================================================================
   AJUSTE FINAL - HERO / SLIDE CON VINOTINTO OSCURO + ROJO VIVO
   Solo cambia esta sección principal para que combine el vinotinto
   oscuro del footer/topbar con el rojo claro actual.
   ===================================================================== */

.hero{
  background:
    radial-gradient(circle at 86% 18%, rgba(232,62,86,.26), transparent 22%),
    radial-gradient(circle at 12% 84%, rgba(93,14,31,.30), transparent 28%),
    linear-gradient(120deg, #220D12 0%, #3A1017 22%, #5A111E 46%, #831426 70%, #B51732 100%);
  color:#fff;
}

.blob1{
  background:#B8142E;
  opacity:.42;
}

.blob2{
  background:#4A101A;
  opacity:.38;
}

.blob3{
  background:#D5A84B;
  opacity:.18;
}

.hero h1 .accent{
  color:#E7BC60;
}

.hero p.lead{
  color:rgba(255,255,255,.86);
}

.trust-row .item{
  color:rgba(255,255,255,.90);
}

.trust-row svg{
  color:#E7BC60;
}

.hero-card-behind{
  background:linear-gradient(135deg,#5A111E 0%, #8C1428 58%, #C71A36 100%);
  opacity:.42;
}

.hero-card{
  border:1px solid rgba(255,255,255,.62);
  box-shadow:0 28px 70px rgba(41,8,16,.26);
}

.eyebrow{
  background:rgba(255,255,255,.12);
  border:1px solid rgba(255,255,255,.24);
}


/* =====================================================================
   AJUSTE PREMIUM TECNOLÓGICO - BLOQUES PROMOCIONALES
   Solo mejora la sección de mosaicos/promos para que se vea
   más premium, contrastada y tecnológica.
   ===================================================================== */

.promo-grid{
  gap:24px;
  padding-top:54px;
  padding-bottom:14px;
}

.promo-tile{
  position:relative;
  min-height:190px;
  padding:28px 24px;
  border-radius:22px;
  border:1px solid rgba(255,255,255,.16);
  overflow:hidden;
  isolation:isolate;
  box-shadow:
    0 18px 42px rgba(42,10,20,.18),
    inset 0 1px 0 rgba(255,255,255,.08);
  backdrop-filter:blur(4px);
}

.promo-tile::before{
  content:"";
  position:absolute;
  inset:0;
  background:
    linear-gradient(140deg, rgba(255,255,255,.14), rgba(255,255,255,0) 42%),
    radial-gradient(circle at 86% 16%, rgba(255,255,255,.14), transparent 24%);
  z-index:0;
  pointer-events:none;
}

.promo-tile::after{
  content:"";
  position:absolute;
  inset:12px;
  border-radius:18px;
  border:1px solid rgba(255,255,255,.10);
  opacity:.95;
  z-index:0;
  pointer-events:none;
}

.promo-tile > *{
  position:relative;
  z-index:1;
}

.promo-tile .tag{
  top:14px;
  left:14px;
  padding:6px 12px;
  border-radius:999px;
  font:700 11.5px var(--ff-mono);
  letter-spacing:.05em;
  text-transform:uppercase;
  background:rgba(255,255,255,.14);
  border:1px solid rgba(255,255,255,.18);
  box-shadow:0 8px 20px rgba(0,0,0,.10);
  backdrop-filter:blur(10px);
}

.promo-tile h3{
  font-size:17px;
  line-height:1.24;
  font-weight:800;
  max-width:220px;
  letter-spacing:-.01em;
}

.promo-tile .go{
  margin-top:14px;
  font:700 13px var(--ff-body);
  opacity:.96;
}

.promo-tile:hover{
  transform:translateY(-6px) scale(1.015);
  box-shadow:
    0 26px 52px rgba(42,10,20,.22),
    inset 0 1px 0 rgba(255,255,255,.12);
}

/* Contraste premium / tecnológico */
.grad-1{
  background:
    radial-gradient(circle at 85% 20%, rgba(255,92,122,.22), transparent 22%),
    linear-gradient(135deg, #150A13 0%, #3E1020 42%, #A31735 100%);
}

.grad-2{
  background:
    radial-gradient(circle at 82% 18%, rgba(0,255,214,.14), transparent 24%),
    linear-gradient(135deg, #101426 0%, #25315C 44%, #FF4368 100%);
}

.grad-3{
  background:
    radial-gradient(circle at 80% 16%, rgba(255,214,102,.16), transparent 24%),
    linear-gradient(135deg, #1A0D12 0%, #6B1225 48%, #D42545 100%);
}

.grad-4{
  background:
    radial-gradient(circle at 88% 18%, rgba(255,255,255,.14), transparent 22%),
    linear-gradient(135deg, #6D4E17 0%, #B8872D 56%, #E3BC5B 100%);
}

.promo-tile:nth-child(1) .tag{background:rgba(255,255,255,.12);}
.promo-tile:nth-child(2) .tag{background:rgba(67,255,221,.14);}
.promo-tile:nth-child(3) .tag{background:rgba(255,255,255,.12);}
.promo-tile:nth-child(4) .tag{background:rgba(255,248,210,.18);}

@media (max-width:760px){
  .promo-grid{
    gap:16px;
    padding-top:34px;
  }
  .promo-tile{
    min-height:168px;
    padding:24px 20px;
  }
}


/* =====================================================================
   AJUSTE CORPORATIVO - TARJETA "DAMA"
   Elimina completamente el morado/azulado y lo reemplaza por
   negro grafito + vinotinto + rojo Montecarlo.
   ===================================================================== */

.grad-2{
  background:
    radial-gradient(circle at 82% 18%, rgba(214,31,58,.22), transparent 24%),
    radial-gradient(circle at 18% 82%, rgba(213,168,75,.10), transparent 28%),
    linear-gradient(135deg, #171113 0%, #321017 34%, #65111F 68%, #A9152D 100%);
}

.promo-tile:nth-child(2) .tag{
  background:rgba(255,255,255,.12);
  border-color:rgba(255,255,255,.18);
  color:#fff;
}


/* =====================================================================
   AJUSTE MÓVIL FINAL
   1) Productos en una sola columna.
   2) En móvil se muestra solo el isotipo/águila del logo para evitar
      desbordes del header.
   Solo afecta pantallas móviles.
   ===================================================================== */

@media (max-width:760px){

  /* PRODUCTOS: una sola columna en móvil */
  .product-grid{
    grid-template-columns:minmax(0,1fr) !important;
    gap:18px !important;
  }

  .product-card{
    width:100%;
    max-width:100%;
  }

  /* Imagen un poco más compacta para que cada ficha no sea excesivamente alta */
  .product-media{
    aspect-ratio:1 / .92;
  }

  /* HEADER: mostrar únicamente el símbolo del logo en móvil */
  .brand-logo{
    width:62px;
    height:48px;
    overflow:hidden;
    flex:0 0 62px;
    display:inline-flex;
    align-items:center;
  }

  .brand-logo img{
    width:164px !important;
    max-width:none !important;
    height:48px !important;
    object-fit:contain;
    object-position:left center;
    flex:none;
  }

  /* Dar más espacio al buscador y acciones */
  .header-inner{
    gap:10px;
    padding-left:16px;
    padding-right:16px;
  }

  .header-actions{
    gap:2px;
  }

  .icon-btn{
    padding:8px;
  }

  /* El buscador sigue debajo, ocupando todo el ancho */
  .search-wrap{
    flex:0 0 100%;
    width:100%;
    margin-top:8px;
  }
}