/* ============================================================
   GlobalShopPro Storefront — Identidad Clínica Globalmedic
   Portada del theme Expanse: dorado #e6b543 + negro, Archivo Narrow + Abel
   ============================================================ */
:root{
  --bg:#ffffff; --text:#595858; --gold:#e6b543; --gold-dk:#cba037;
  --black:#000000; --sale:#9ac155; --border:#e6e6e6;
  --f-head:'Archivo Narrow',sans-serif; --f-body:'Abel',sans-serif;
}
*{box-sizing:border-box;margin:0;padding:0}
body{font-family:var(--f-body);font-size:16px;color:var(--text);background:var(--bg);line-height:1.5}
h1,h2,h3,h4{font-family:var(--f-head);font-weight:400;color:#2b2b2b;line-height:1.2}
a{color:inherit;text-decoration:none}
img{max-width:100%;display:block}
.container{max-width:1240px;margin:0 auto;padding:0 22px}
.btn{display:inline-block;background:var(--gold);color:#fff;border:none;padding:13px 30px;font-family:var(--f-head);font-size:15px;letter-spacing:.5px;text-transform:uppercase;cursor:pointer;transition:.15s}
.btn:hover{background:var(--gold-dk)}
.btn-outline{background:transparent;border:1px solid var(--gold);color:var(--gold)}
.btn-outline:hover{background:var(--gold);color:#fff}

/* ---------- ANNOUNCEMENT + HEADER ---------- */
.announcement{background:var(--black);color:var(--gold);text-align:center;font-size:12.5px;letter-spacing:.5px;padding:8px 12px;text-transform:uppercase}
.header{background:var(--black);color:var(--gold);position:sticky;top:0;z-index:50}
.header-inner{display:flex;align-items:center;gap:28px;padding:16px 0}
.logo{font-family:var(--f-head);font-size:24px;letter-spacing:2px;color:var(--gold);white-space:nowrap}
.nav{display:flex;gap:22px;margin-left:8px;flex-wrap:wrap}
.nav a{font-family:var(--f-head);font-size:13px;letter-spacing:1px;text-transform:uppercase;color:var(--gold);opacity:.9;transition:.15s}
.nav a:hover{opacity:1;color:#fff}
.header-icons{margin-left:auto;display:flex;gap:18px;align-items:center;font-size:18px}
.header-icons a{color:var(--gold)}
.cart-count{background:var(--gold);color:#000;border-radius:50%;font-size:11px;font-family:var(--f-body);padding:1px 6px;margin-left:3px}

/* ---------- HERO / SLIDESHOW ---------- */
.hero{position:relative;background:linear-gradient(135deg,#1a1a1a,#333);min-height:460px;display:grid;place-items:center;text-align:center;color:#fff;overflow:hidden}
.hero::after{content:"";position:absolute;inset:0;background:rgba(0,0,0,.35)}
.hero-content{position:relative;z-index:2;max-width:680px;padding:0 22px}
.hero h1{color:#fff;font-size:52px;margin-bottom:14px}
.hero p{font-size:19px;margin-bottom:26px;opacity:.92}

/* ---------- SECCIONES ---------- */
.section{padding:60px 0}
.section-title{text-align:center;font-size:34px;margin-bottom:8px}
.section-sub{text-align:center;color:#999;margin-bottom:40px}

/* ---------- GRID DE COLECCIONES / PRODUCTOS ---------- */
.grid{display:grid;grid-template-columns:repeat(4,1fr);gap:24px}
.card{border:1px solid var(--border);background:#fff;transition:.18s;overflow:hidden}
.card:hover{box-shadow:0 8px 26px rgba(0,0,0,.09);transform:translateY(-3px)}
.card-img{aspect-ratio:1;background:#f3f0ea;display:grid;place-items:center;color:#cbb88a;font-family:var(--f-head);font-size:14px;letter-spacing:1px}
.card-body{padding:16px;text-align:center}
.card-title{font-family:var(--f-head);font-size:17px;color:#2b2b2b;margin-bottom:6px}
.card-price{color:var(--text);font-size:15px}
.card-price .was{color:#bbb;text-decoration:line-through;margin-right:7px;font-size:13px}
.card-price .now{color:var(--gold);font-weight:bold}
.badge-sale{display:inline-block;background:var(--sale);color:#fff;font-size:11px;padding:2px 9px;text-transform:uppercase;letter-spacing:.5px;font-family:var(--f-head);margin-bottom:8px}

/* ---------- PROMO GRID ---------- */
.promo-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:18px}
.promo{position:relative;aspect-ratio:4/3;background:linear-gradient(135deg,#2b2b2b,#4a4a4a);display:grid;place-items:center;color:#fff;text-align:center;overflow:hidden}
.promo h3{color:#fff;font-size:26px;z-index:2}
.promo .btn{margin-top:14px;z-index:2}
.promo::after{content:"";position:absolute;inset:0;background:rgba(0,0,0,.3)}

/* ---------- TESTIMONIOS ---------- */
.testi-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:24px}
.testi{background:#faf7f0;border:1px solid #f0e9d8;padding:26px;text-align:center}
.testi .stars{color:var(--gold);margin-bottom:10px}
.testi p{font-style:italic;margin-bottom:12px}
.testi b{font-family:var(--f-head);color:#2b2b2b}

/* ---------- PRODUCTO (PDP) ---------- */
.pdp{display:grid;grid-template-columns:1fr 1fr;gap:48px;padding:50px 0}
.pdp-gallery{aspect-ratio:1;background:#f3f0ea;display:grid;place-items:center;color:#cbb88a;font-family:var(--f-head)}
.pdp h1{font-size:36px;margin-bottom:6px}
.pdp .vendor{color:var(--gold);text-transform:uppercase;font-size:12px;letter-spacing:1px;margin-bottom:14px}
.pdp .price{font-size:28px;margin:18px 0}
.pdp .price .was{color:#bbb;text-decoration:line-through;font-size:18px;margin-right:10px}
.pdp .price .now{color:var(--gold)}
.pdp label{display:block;font-family:var(--f-head);text-transform:uppercase;font-size:12px;letter-spacing:1px;margin:18px 0 8px}
.pdp select,.pdp .qty{border:1px solid var(--border);padding:12px;font-family:var(--f-body);font-size:15px;width:100%}
.pdp .desc{margin-top:26px;line-height:1.7;border-top:1px solid var(--border);padding-top:22px}

/* ---------- BREADCRUMB ---------- */
.crumb{padding:18px 0;font-size:13px;color:#999}
.crumb a:hover{color:var(--gold)}

/* ---------- CART DRAWER ---------- */
.drawer-overlay{position:fixed;inset:0;background:rgba(0,0,0,.45);opacity:0;visibility:hidden;transition:.2s;z-index:90}
.drawer-overlay.open{opacity:1;visibility:visible}
.drawer{position:fixed;top:0;right:0;bottom:0;width:380px;max-width:90vw;background:#fff;transform:translateX(100%);transition:.25s;z-index:100;display:flex;flex-direction:column}
.drawer.open{transform:none}
.drawer-head{background:var(--black);color:var(--gold);padding:18px 20px;display:flex;align-items:center;font-family:var(--f-head);text-transform:uppercase;letter-spacing:1px}
.drawer-head .close{margin-left:auto;cursor:pointer;font-size:22px}
.drawer-body{flex:1;overflow:auto;padding:8px 20px}
.cart-line{display:flex;gap:12px;padding:14px 0;border-bottom:1px solid var(--border)}
.cart-line .ci-img{width:60px;height:60px;background:#f3f0ea;flex:none;display:grid;place-items:center;color:#cbb88a;font-size:9px}
.cart-line .ci-name{font-family:var(--f-head);font-size:14px}
.cart-line .ci-meta{font-size:12px;color:#999}
.qty-ctrl{display:flex;align-items:center;gap:8px;margin-top:8px}
.qty-ctrl button{width:26px;height:26px;border:1px solid var(--border);background:#fff;cursor:pointer;font-size:15px;line-height:1;color:var(--text)}
.qty-ctrl button:hover{border-color:var(--gold);color:var(--gold)}
.qty-ctrl span{min-width:22px;text-align:center}
.drawer-foot{border-top:1px solid var(--border);padding:18px 20px}
.drawer-foot .total{display:flex;justify-content:space-between;font-family:var(--f-head);font-size:18px;margin-bottom:14px}
.drawer-foot .btn{width:100%;text-align:center}

/* ---------- FOOTER ---------- */
.footer{background:var(--black);color:var(--gold);padding:54px 0 26px;margin-top:40px}
.footer-cols{display:grid;grid-template-columns:1.5fr 1fr 1fr 1fr;gap:34px;margin-bottom:34px}
.footer h4{color:var(--gold);font-size:17px;margin-bottom:16px;text-transform:uppercase;letter-spacing:1px}
.footer a{display:block;color:rgba(230,181,67,.8);font-size:14px;padding:5px 0;transition:.15s}
.footer a:hover{color:#fff}
.footer .legal{border-top:1px solid rgba(230,181,67,.25);padding-top:20px;text-align:center;font-size:12.5px;color:rgba(230,181,67,.6)}

/* ---------- RESPONSIVE ---------- */
@media(max-width:980px){
  .grid{grid-template-columns:repeat(2,1fr)}
  .promo-grid,.testi-grid{grid-template-columns:1fr}
  .pdp{grid-template-columns:1fr;gap:26px}
  .footer-cols{grid-template-columns:1fr 1fr}
  .nav{display:none}
  .hero h1{font-size:38px}
}