/* Tradición Manabita — identidad visual bespoke sobre el motor del catálogo. */
:root{
  --primary:#123d91;
  --accent:#27b9e8;
  --bg:#f3faff;
  --bg-2:#ffffff;
  --surface:#ffffff;
  --surface-2:#e7f7ff;
  --border:rgba(18,61,145,.12);
  --border-2:rgba(18,61,145,.26);
  --text:#102d63;
  --text-soft:#597092;
  --text-dim:#9aaac0;
  --radius:22px;
  --radius-sm:13px;
}

body{
  font-family:'DM Sans',system-ui,sans-serif;
  background:
    radial-gradient(circle at 8% 9%,rgba(39,185,232,.14),transparent 25rem),
    linear-gradient(180deg,#eef9ff 0%,#ffffff 42%,#f1f8fc 100%);
}

.hero{
  min-height:460px;
  padding:30px 22px 66px;
  background:
    radial-gradient(circle at 83% 20%,rgba(75,213,250,.42),transparent 28%),
    radial-gradient(circle at 7% 92%,rgba(39,185,232,.25),transparent 25%),
    linear-gradient(120deg,#092b70 0%,#124a9f 54%,#0799cf 100%);
  border:0;
  box-shadow:inset 0 -1px rgba(255,255,255,.16);
  overflow:hidden;
}
.hero::before{
  content:'';position:absolute;right:-120px;top:-125px;width:350px;height:350px;border-radius:50%;
  border:70px solid rgba(255,255,255,.055);pointer-events:none;
}
.hero::after{
  content:'';position:absolute;left:-70px;bottom:-115px;width:290px;height:210px;
  border:2px solid rgba(103,225,255,.34);border-radius:50%;transform:rotate(-12deg);pointer-events:none;
}
.hero-top,.hero h1,.hero-kicker,.hero .notice{position:relative;z-index:1}
.hero-top{margin-bottom:48px}
.brand-logo{
  width:118px;height:110px;border-radius:0;object-fit:contain;object-position:center;
  border:0;background:transparent;box-shadow:none;
}
.brand-name{font-family:'Fraunces',Georgia,serif;font-size:23px;color:#fff;letter-spacing:-.02em}
.brand-sub{color:rgba(255,255,255,.7);font-size:9px;font-weight:700;letter-spacing:.16em;text-transform:uppercase}
.hero-kicker{font-size:10px;font-weight:800;letter-spacing:.2em;color:#86e8ff;margin-bottom:13px}
.hero h1{font-family:'Fraunces',Georgia,serif;color:#fff;font-weight:700;line-height:1.02;max-width:820px}
.hero h1 .hl{color:transparent;background:linear-gradient(90deg,#73e6ff,#ffffff);-webkit-background-clip:text;background-clip:text;font-style:normal}
.hero .notice{background:rgba(255,255,255,.1);border-color:rgba(255,255,255,.18);color:rgba(255,255,255,.76)}

.sticky-bar{background:rgba(247,252,255,.95);box-shadow:0 8px 28px rgba(18,61,145,.08)}
.search-box input,.cat-chip{background:#fff}
.search-box input{box-shadow:0 5px 18px rgba(40,52,77,.05)}
.cat-chip.active{color:#fff;box-shadow:0 6px 16px rgba(18,61,145,.28)}
.cat-chip.active .lb{color:#fff}
.cat-header{font-family:'Fraunces',Georgia,serif;font-size:19px;letter-spacing:-.01em;text-transform:none;color:var(--text)}
.cat-header::after{background:linear-gradient(90deg,rgba(39,185,232,.38),transparent)}

.card{background:#fff;box-shadow:0 7px 25px rgba(37,48,82,.07)}
.card:hover{background:#fff;border-color:rgba(39,185,232,.38);box-shadow:0 18px 40px rgba(18,61,145,.13)}
.card-img{background:linear-gradient(145deg,#e8f6fc,#d9f2ff)}
.card-img::after{background:linear-gradient(180deg,transparent 65%,rgba(33,48,82,.12))}
.card-name,.modal-name{font-family:'Fraunces',Georgia,serif;color:var(--text)}
.card-price,.modal-price,.cart-total-value,.cart-peek .pk-right{font-family:'Fraunces',Georgia,serif;color:var(--primary)}
.card-badge{background:#ff6a35;color:#fff}
.btn-add,.btn-next{color:#fff;box-shadow:0 6px 16px rgba(18,61,145,.24)}
.qty-control button,.modal-qty button{color:var(--primary)}

.bottom-nav{background:rgba(248,253,255,.98);box-shadow:0 -8px 30px rgba(18,61,145,.09)}
.cart-peek{background:linear-gradient(90deg,#123d91,#0799cf);color:#fff;box-shadow:0 10px 32px rgba(18,61,145,.3)}
.cart-peek .pk-count{background:rgba(255,255,255,.2)}
.cart-peek .pk-right{color:#fff}
.cart-drawer,.modal,.toast,.legal-modal{background:#fafdff;box-shadow:0 -24px 60px rgba(18,61,145,.22)}
.slider-wrap{background:#e8f6fc}
.slider-wrap::after{background:linear-gradient(180deg,transparent 65%,var(--bg-2))}
.form-field select option{background:#fff;color:var(--text)}
.variant-option.selected,.dtog-btn.active{color:#fff}
.wa-float{background:#25d366;box-shadow:0 8px 25px rgba(37,211,102,.3)}
footer{background:#092b70;color:rgba(255,255,255,.52);border:0}
footer a{color:#7fe8ff}

@media(max-width:600px){
  .hero{min-height:420px;padding:24px 18px 50px}
  .hero-top{margin-bottom:42px}
  .brand-logo{width:104px;height:98px}
  .hero h1{font-size:42px}
  .grid{grid-template-columns:repeat(2,minmax(0,1fr))}
  main{padding-left:14px;padding-right:14px}
}