/* ============================================================
   PAWSHOP — Design System v5  |  Pastel Blue · White · Black
   ============================================================ */
@import url('https://fonts.googleapis.com/css2?family=Plus+Jakarta+Sans:ital,wght@0,400;0,500;0,600;0,700;0,800;0,900;1,700&display=swap');

:root {
  --black:    #0A0A0A;
  --black-2:  #111111;
  --black-3:  #1A1A1A;
  --navy:     #171718;

  --blue:     #e4b312;
  --blue-d:   #fcda1a;
  --blue-mid: #B8860B;
  --blue-l:   #C8E4F5;
  --blue-ll:  #EBF6FC;

  --white:    #FFFFFF;
  --gray-1:   #F4F7FA;
  --gray-2:   #E8EDF3;
  --gray-3:   #C8D3DE;
  --text:     #111827;
  --text-2:   #374151;
  --text-3:   #6B7280;
  --border:   #DDE5EE;

  --r-xs:   6px;
  --r-sm:   10px;
  --r:      14px;
  --r-lg:   20px;
  --r-xl:   30px;
  --r-pill: 9999px;

  --shadow-sm:    0 1px 4px rgba(0,0,0,.06), 0 1px 2px rgba(0,0,0,.04);
  --shadow-card:  0 2px 16px rgba(0,0,0,.07), 0 1px 4px rgba(0,0,0,.04);
  --shadow-hover: 0 16px 48px rgba(0,0,0,.13), 0 4px 16px rgba(0,0,0,.07);
  --shadow-blue:  0 8px 28px rgba(59,143,204,.42);

  --t:        .22s cubic-bezier(.4,0,.2,1);
  --t-spring: .36s cubic-bezier(.34,1.56,.64,1);

  --font:  'Plus Jakarta Sans', system-ui, sans-serif;
  --max-w: 1320px;
}

/* ── Reset ──────────────────────────────────────────────────── */
*,*::before,*::after { box-sizing:border-box; margin:0; padding:0 }
html { scroll-behavior:smooth; font-size:16px; -webkit-text-size-adjust:100% }
body { font-family:var(--font); color:var(--text); background:var(--white);
       line-height:1.6; -webkit-font-smoothing:antialiased }
img  { max-width:100%; display:block }
a    { color:inherit; text-decoration:none }
button { cursor:pointer; font-family:inherit; border:none; background:none }
input,select,textarea { font-family:inherit }
ul   { list-style:none }

/* ── Utils ─────────────────────────────────────────────────── */
.container { max-width:var(--max-w); margin:0 auto; padding:0 24px }
.sr-only   { position:absolute; width:1px; height:1px; overflow:hidden; clip:rect(0,0,0,0) }

/* Scroll animation */
.fade-up {
  opacity:0; transform:translateY(28px);
  transition:opacity .6s ease, transform .6s ease;
}
.fade-up.visible { opacity:1; transform:none }
.fade-up:nth-child(2) { transition-delay:.1s }
.fade-up:nth-child(3) { transition-delay:.2s }
.fade-up:nth-child(4) { transition-delay:.3s }

/* ─────────────────────────────────────────────────────────── */
/*  NAVBAR                                                     */
/* ─────────────────────────────────────────────────────────── */
.navbar {
  background:var(--white);
  position:sticky; top:0; z-index:500;
  border-bottom:1px solid var(--border);
  box-shadow:0 1px 8px rgba(0,0,0,.05);
}
.nav-inner {
  max-width:var(--max-w); margin:0 auto; padding:0 24px;
  height:68px; display:flex; align-items:center; gap:8px;
}
.nav-brand {
  font-size:1.35rem; font-weight:900; color:var(--text);
  letter-spacing:-.04em; display:flex; align-items:center; gap:8px;
  margin-right:28px; flex-shrink:0;
}
.nav-brand b { color:var(--blue) }

.nav-links { display:flex; gap:2px; flex:1 }
.nav-links a {
  color:var(--text-2); padding:7px 14px;
  border-radius:var(--r-sm); font-size:.86rem; font-weight:600;
  transition:var(--t);
}
.nav-links a:hover, .nav-links a.on {
  color:var(--blue); background:var(--blue-ll);
}
.nav-ctas { display:flex; align-items:center; gap:8px; margin-left:auto }
.nav-btn-wa {
  display:flex; align-items:center; gap:6px;
  background:#25D366; color:#fff; padding:8px 16px;
  border-radius:var(--r-sm); font-size:.82rem; font-weight:700;
  transition:var(--t);
}
.nav-btn-wa:hover { background:#1EBC58; box-shadow:0 4px 16px rgba(37,211,102,.35) }
.nav-btn-cta {
  display:flex; align-items:center; gap:6px;
  background:var(--blue); color:#fff; padding:8px 18px;
  border-radius:var(--r-sm); font-size:.84rem; font-weight:700;
  transition:var(--t);
}
.nav-btn-cta:hover { background:var(--blue-d); box-shadow:var(--shadow-blue); transform:translateY(-1px) }
.nav-burger {
  display:none; color:var(--text-2);
  padding:8px; margin-left:auto;
}
.nav-mobile {
  display:none; flex-direction:column; gap:4px;
  position:fixed; inset:68px 0 0; background:var(--white);
  padding:20px 24px; z-index:499;
  border-top:1px solid var(--border); overflow-y:auto;
}
.nav-mobile.open { display:flex }
.nav-mobile a {
  color:var(--text-2); padding:13px 16px;
  border-radius:var(--r); font-size:1rem; font-weight:600;
  transition:var(--t);
}
.nav-mobile a:hover { color:var(--blue); background:var(--blue-ll) }
.nav-mobile-wa {
  margin-top:16px; background:#25D366; color:#fff;
  display:flex; align-items:center; justify-content:center; gap:8px;
  padding:14px; border-radius:var(--r); font-weight:700; font-size:.95rem;
}

/* ─────────────────────────────────────────────────────────── */
/*  BUTTONS                                                    */
/* ─────────────────────────────────────────────────────────── */
.btn {
  display:inline-flex; align-items:center; justify-content:center; gap:8px;
  padding:12px 24px; border-radius:var(--r-sm);
  font-size:.9rem; font-weight:700; transition:var(--t);
  white-space:nowrap; border:2px solid transparent;
}
.btn-dark   { background:var(--black); color:#fff; border-color:var(--black) }
.btn-dark:hover  { background:var(--black-3); transform:translateY(-1px); box-shadow:var(--shadow-hover) }
.btn-blue   { background:var(--blue); color:#fff; border-color:var(--blue) }
.btn-blue:hover  { background:var(--blue-d); transform:translateY(-1px); box-shadow:var(--shadow-blue) }
.btn-ghost  { background:transparent; color:#fff; border-color:rgba(255,255,255,.35) }
.btn-ghost:hover { background:rgba(255,255,255,.1); border-color:rgba(255,255,255,.6) }
.btn-outline { background:transparent; color:var(--text); border-color:var(--gray-3) }
.btn-outline:hover { border-color:var(--blue); color:var(--blue); background:var(--blue-ll) }
.btn-lg   { padding:15px 32px; font-size:.96rem; border-radius:var(--r) }
.btn-block { width:100%; justify-content:center }

/* ─────────────────────────────────────────────────────────── */
/*  HERO                                                       */
/* ─────────────────────────────────────────────────────────── */
.hero {
  background:var(--navy);
  min-height:92vh;
  display:grid; grid-template-columns:52% 48%;
  overflow:hidden; position:relative;
}
/* Subtle grid pattern */
.hero::after {
  content:''; position:absolute; inset:0; pointer-events:none;
  background-image:
    linear-gradient(rgba(59,143,204,.04) 1px, transparent 1px),
    linear-gradient(90deg, rgba(59,143,204,.04) 1px, transparent 1px);
  background-size:60px 60px;
  z-index:0;
}
.hero-left {
  display:flex; flex-direction:column; justify-content:center;
  padding:80px 48px 80px 48px;
  position:relative; z-index:2;
}
.hero-eyebrow {
  display:inline-flex; align-items:center; gap:8px;
  background:rgba(59,143,204,.18); border:1px solid rgba(59,143,204,.35);
  color:#89C8EC; font-size:.72rem; font-weight:700; letter-spacing:.1em;
  text-transform:uppercase; padding:6px 16px; border-radius:var(--r-pill);
  margin-bottom:28px; width:fit-content;
}
@keyframes pulse-dot { 0%,100%{opacity:1;transform:scale(1)} 50%{opacity:.5;transform:scale(.8)} }
.hero-title {
  font-size:clamp(2.8rem,5.5vw,5.2rem);
  font-weight:900; color:#fff;
  line-height:1.04; letter-spacing:-.05em;
  margin-bottom:22px;
}
.hero-title .accent { color:var(--blue-mid) }
.hero-title .stroke { -webkit-text-stroke:2px rgba(255,255,255,.7); color:transparent }
.hero-subtitle {
  font-size:1.05rem; color:rgba(255,255,255,.52);
  line-height:1.75; margin-bottom:38px; max-width:440px;
}
.hero-actions { display:flex; gap:12px; margin-bottom:44px; flex-wrap:wrap }
.hero-trust   { display:flex; gap:6px; flex-wrap:wrap }
.trust-pill {
  display:flex; align-items:center; gap:6px;
  background:rgba(255,255,255,.06); border:1px solid rgba(255,255,255,.1);
  padding:6px 13px; border-radius:var(--r-pill);
  font-size:.74rem; font-weight:600; color:rgba(255,255,255,.55);
}
.hero-right {
  position:relative; overflow:hidden;
}
.hero-right::before {
  content:''; position:absolute; inset:0;
  background:radial-gradient(circle at 55% 40%, rgba(59,143,204,.22), transparent 65%);
  z-index:0;
}
.hero-imgs {
  position:absolute; inset:0;
  display:grid; grid-template-columns:1fr 1fr;
  grid-template-rows:1fr 1fr;
  gap:8px; padding:24px; z-index:1;
}
.hero-imgs img {
  width:100%; height:100%; object-fit:cover;
  border-radius:var(--r-lg); transition:var(--t-spring);
}
.hero-imgs img:first-child { grid-row:1/3 }
.hero-badge {
  position:absolute; bottom:32px; left:32px;
  background:rgba(255,255,255,.95); backdrop-filter:blur(12px);
  border-radius:var(--r);
  padding:14px 18px; display:flex; align-items:center; gap:12px;
  box-shadow:0 8px 32px rgba(0,0,0,.25); z-index:10;
}
.hero-badge-icon {
  width:42px; height:42px; border-radius:var(--r-sm);
  background:var(--blue-ll); display:flex; align-items:center; justify-content:center;
  color:var(--blue); flex-shrink:0;
}
.hero-badge-text { line-height:1.25 }
.hero-badge-title { font-size:.88rem; font-weight:800; color:var(--text) }
.hero-badge-sub   { font-size:.72rem; color:var(--text-3) }

/* ─────────────────────────────────────────────────────────── */
/*  MARQUEE                                                    */
/* ─────────────────────────────────────────────────────────── */
.marquee-bar {
  background:var(--blue);
  padding:14px 0; overflow:hidden; white-space:nowrap;
}
.marquee-track {
  display:inline-flex; align-items:center;
  animation:marquee-scroll 28s linear infinite;
}
.marquee-item {
  display:inline-flex; align-items:center; gap:16px;
  padding:0 20px;
  font-size:.78rem; font-weight:800; color:#fff;
  letter-spacing:.08em; text-transform:uppercase;
}
.marquee-sep {
  width:5px; height:5px; background:rgba(255,255,255,.5);
  border-radius:50%; display:inline-block; flex-shrink:0;
}
@keyframes marquee-scroll { 0%{transform:translateX(0)} 100%{transform:translateX(-50%)} }

/* ─────────────────────────────────────────────────────────── */
/*  STATS BAR                                                  */
/* ─────────────────────────────────────────────────────────── */
.stats-bar { background:var(--navy); padding:60px 24px }
.stats-grid {
  max-width:var(--max-w); margin:0 auto;
  display:grid; grid-template-columns:repeat(4,1fr); gap:0;
}
.stat-item {
  text-align:center; padding:16px 24px;
  border-right:1px solid rgba(255,255,255,.08);
}
.stat-item:last-child { border-right:none }
.stat-num  { font-size:2.8rem; font-weight:900; color:#fff; letter-spacing:-.04em; line-height:1 }
.stat-unit { color:var(--blue-mid) }
.stat-label { font-size:.82rem; color:rgba(255,255,255,.4); margin-top:6px; font-weight:500 }

/* ─────────────────────────────────────────────────────────── */
/*  SECTIONS                                                   */
/* ─────────────────────────────────────────────────────────── */
.section       { padding:96px 0 }
.section-white { background:var(--white) }
.section-blue  { background:var(--blue-ll) }
.section-gray  { background:var(--gray-1) }
.section-dark  { background:var(--navy); color:#fff }

.sec-head { text-align:center; margin-bottom:56px }
.sec-tag {
  display:inline-block;
  background:var(--blue-l); color:var(--blue);
  font-size:.7rem; font-weight:800; letter-spacing:.09em; text-transform:uppercase;
  padding:5px 16px; border-radius:var(--r-pill); margin-bottom:16px;
}
.section-dark .sec-tag { background:rgba(59,143,204,.22); color:#89C8EC }
.sec-title {
  font-size:clamp(1.8rem,3.5vw,2.8rem); font-weight:900;
  letter-spacing:-.04em; margin-bottom:14px;
}
.sec-title span { color:var(--blue) }
.sec-sub { font-size:.97rem; color:var(--text-3); max-width:520px; margin:0 auto; line-height:1.75 }
.section-dark .sec-sub { color:rgba(255,255,255,.48) }

/* ─────────────────────────────────────────────────────────── */
/*  PRODUCT CARDS                                              */
/* ─────────────────────────────────────────────────────────── */
.products-grid {
  display:grid; grid-template-columns:repeat(4,1fr); gap:20px;
}
.pc {
  background:var(--white);
  border:1.5px solid var(--border);
  border-radius:var(--r-lg); overflow:hidden;
  transition:var(--t); cursor:pointer;
}
.pc:hover { transform:translateY(-7px); box-shadow:var(--shadow-hover); border-color:var(--blue-l) }
.pc-img {
  position:relative; overflow:hidden;
  aspect-ratio:3/4; background:var(--gray-1);
}
.pc-img img { width:100%; height:100%; object-fit:cover; transition:.55s ease }
.pc:hover .pc-img img { transform:scale(1.07) }
.pc-overlay {
  position:absolute; inset:0;
  background:rgba(11,20,36,.52);
  display:flex; align-items:flex-end; justify-content:center;
  padding-bottom:22px; opacity:0; transition:var(--t);
}
.pc:hover .pc-overlay { opacity:1 }
.pc-buy {
  display:flex; align-items:center; gap:7px;
  background:#fff; color:var(--black);
  padding:10px 22px; border-radius:var(--r-pill);
  font-size:.84rem; font-weight:800;
  transform:translateY(12px); transition:var(--t-spring);
}
.pc:hover .pc-buy { transform:translateY(0) }
.pc-buy:hover { background:var(--blue); color:#fff }
.pc-badge {
  position:absolute; top:12px; left:12px;
  font-size:.66rem; font-weight:800; letter-spacing:.05em; text-transform:uppercase;
  padding:4px 10px; border-radius:var(--r-pill);
}
.badge-dark  { background:var(--black); color:#fff }
.badge-blue  { background:var(--blue); color:#fff }
.badge-green { background:#059669; color:#fff }
.badge-gold  { background:#D97706; color:#fff }
.pc-body { padding:16px 18px }
.pc-cat  { font-size:.68rem; font-weight:700; color:var(--blue); text-transform:uppercase; letter-spacing:.06em; margin-bottom:4px }
.pc-name { font-size:.93rem; font-weight:800; margin-bottom:8px; line-height:1.3 }
.pc-bottom { display:flex; align-items:center; justify-content:space-between }
.pc-price     { font-size:1.15rem; font-weight:900; letter-spacing:-.03em }
.pc-price-old { font-size:.75rem; color:var(--text-3); text-decoration:line-through; margin-left:4px }
.pc-dots { display:flex; gap:5px }
.pc-dot  { width:13px; height:13px; border-radius:50%; border:1.5px solid rgba(0,0,0,.12) }

/* ─────────────────────────────────────────────────────────── */
/*  COLOR STRIP                                                */
/* ─────────────────────────────────────────────────────────── */
.colors-strip { display:grid; grid-template-columns:repeat(5,1fr); gap:16px }
.color-card {
  display:block; border-radius:var(--r-lg); overflow:hidden;
  border:1.5px solid var(--border); transition:var(--t); background:var(--white);
}
.color-card:hover { transform:translateY(-6px); box-shadow:var(--shadow-hover); border-color:var(--blue-l) }
.color-card-img { aspect-ratio:3/4; overflow:hidden; background:var(--gray-1) }
.color-card-img img { width:100%; height:100%; object-fit:cover; transition:.45s ease }
.color-card:hover .color-card-img img { transform:scale(1.06) }
.color-card-foot { padding:12px 14px; display:flex; align-items:center; gap:9px }
.cc-dot  { width:18px; height:18px; border-radius:50%; border:1.5px solid rgba(0,0,0,.1); flex-shrink:0 }
.cc-name { font-size:.83rem; font-weight:700 }
.cc-price { margin-left:auto; font-size:.75rem; font-weight:700; color:var(--blue) }

/* ─────────────────────────────────────────────────────────── */
/*  LIFESTYLE STRIP                                            */
/* ─────────────────────────────────────────────────────────── */
.lifestyle-strip {
  padding:0;
  display:grid; grid-template-columns:1fr 1fr 1fr;
  height:420px; overflow:hidden;
}
.ls-img {
  position:relative; overflow:hidden;
}
.ls-img img {
  width:100%; height:100%; object-fit:cover;
  transition:.6s ease; filter:brightness(.85);
}
.ls-img:hover img { transform:scale(1.05); filter:brightness(.95) }
.ls-img-overlay {
  position:absolute; inset:0;
  background:linear-gradient(to top, rgba(27,45,74,.7) 0%, transparent 55%);
  display:flex; align-items:flex-end; padding:24px;
}
.ls-img-text {
  color:#fff; font-size:.9rem; font-weight:700;
  line-height:1.3; max-width:180px;
}
.ls-img-text span { display:block; font-size:.72rem; font-weight:500; color:rgba(255,255,255,.65); margin-top:3px }

/* ─────────────────────────────────────────────────────────── */
/*  HOW IT WORKS — STEPS                                      */
/* ─────────────────────────────────────────────────────────── */
.steps-row {
  display:grid; grid-template-columns:repeat(4,1fr);
  gap:0; position:relative;
}
.steps-row::before {
  content:''; position:absolute;
  top:28px; left:12.5%; right:12.5%; height:1.5px;
  background:var(--blue-l); z-index:0;
}
.step { text-align:center; position:relative; z-index:1; padding:0 16px }
.step-icon {
  width:56px; height:56px; border-radius:50%;
  margin:0 auto 18px;
  display:flex; align-items:center; justify-content:center;
  transition:var(--t);
}
.step-icon.blue { background:var(--blue); color:#fff; box-shadow:var(--shadow-blue) }
.step-icon.dark { background:var(--navy); color:#fff }
.step:hover .step-icon { transform:scale(1.12) }
.step-title { font-size:.93rem; font-weight:800; margin-bottom:8px }
.step-desc  { font-size:.81rem; color:var(--text-3); line-height:1.65 }

/* ─────────────────────────────────────────────────────────── */
/*  FEATURES                                                   */
/* ─────────────────────────────────────────────────────────── */
.features-row { display:grid; grid-template-columns:repeat(4,1fr); gap:20px }
.feat {
  background:var(--white); border:1.5px solid var(--border);
  border-radius:var(--r-lg); padding:30px 24px;
  transition:var(--t);
}
.feat:hover { box-shadow:var(--shadow-hover); transform:translateY(-5px); border-color:var(--blue-l) }
.feat-icon {
  width:52px; height:52px; border-radius:var(--r);
  background:var(--blue-ll); display:flex; align-items:center; justify-content:center;
  color:var(--blue); margin-bottom:18px;
}
.feat-title { font-size:.94rem; font-weight:800; margin-bottom:8px }
.feat-desc  { font-size:.82rem; color:var(--text-3); line-height:1.7 }

/* ─────────────────────────────────────────────────────────── */
/*  PRICING                                                    */
/* ─────────────────────────────────────────────────────────── */
.pricing-row {
  display:grid; grid-template-columns:repeat(3,1fr);
  gap:20px; max-width:900px; margin:0 auto;
}
.price-card {
  background:var(--white); border:2px solid var(--border);
  border-radius:var(--r-xl); padding:36px 28px;
  text-align:center; transition:var(--t); position:relative;
}
.price-card:hover { box-shadow:var(--shadow-hover); transform:translateY(-5px) }
.price-card.pop {
  background:var(--navy); color:#fff; border-color:var(--navy);
  transform:scale(1.04); box-shadow:0 24px 64px rgba(27,45,74,.35);
}
.price-card.pop:hover { transform:scale(1.04) translateY(-4px) }
.pop-label {
  position:absolute; top:-14px; left:50%; transform:translateX(-50%);
  background:var(--blue); color:#fff;
  font-size:.68rem; font-weight:800; letter-spacing:.06em; text-transform:uppercase;
  padding:4px 18px; border-radius:var(--r-pill); white-space:nowrap;
}
.price-icon {
  width:56px; height:56px; border-radius:var(--r-lg);
  margin:0 auto 18px;
  display:flex; align-items:center; justify-content:center;
  background:var(--blue-ll); color:var(--blue);
}
.price-card.pop .price-icon { background:rgba(59,143,204,.2); color:#89C8EC }
.price-name   { font-size:1rem; font-weight:800; margin-bottom:8px }
.price-amount { font-size:2.8rem; font-weight:900; letter-spacing:-.05em; line-height:1; margin-bottom:4px }
.price-card:not(.pop) .price-amount { color:var(--navy) }
.price-per    { font-size:.8rem; color:var(--text-3); margin-bottom:20px }
.price-card.pop .price-per  { color:rgba(255,255,255,.5) }
.price-desc   { font-size:.83rem; line-height:1.65; margin-bottom:26px; color:var(--text-3) }
.price-card.pop .price-desc { color:rgba(255,255,255,.6) }

/* ─────────────────────────────────────────────────────────── */
/*  TESTIMONIALS                                               */
/* ─────────────────────────────────────────────────────────── */
.testimonials-grid {
  display:grid; grid-template-columns:repeat(3,1fr); gap:20px;
}
.tcard {
  background:var(--white); border:1.5px solid var(--border);
  border-radius:var(--r-lg); padding:28px 26px;
  transition:var(--t); position:relative;
}
.tcard:hover { box-shadow:var(--shadow-hover); border-color:var(--blue-l); transform:translateY(-3px) }
.tcard-quote {
  position:absolute; top:20px; right:22px;
  font-size:3.5rem; line-height:1; color:var(--blue-l);
  font-family:Georgia, serif; pointer-events:none;
}
.tcard-stars { display:flex; gap:3px; margin-bottom:14px }
.tcard-text {
  font-size:.9rem; color:var(--text-2); line-height:1.75;
  margin-bottom:22px; font-style:italic;
}
.tcard-author { display:flex; align-items:center; gap:12px }
.tcard-avatar {
  width:42px; height:42px; border-radius:50%;
  background:var(--blue-ll); display:flex; align-items:center; justify-content:center;
  color:var(--blue); font-weight:900; font-size:.95rem; flex-shrink:0;
  border:2px solid var(--blue-l);
}
.tcard-name { font-size:.88rem; font-weight:800; color:var(--text) }
.tcard-loc  { font-size:.75rem; color:var(--text-3) }

/* ─────────────────────────────────────────────────────────── */
/*  CTA BIG                                                    */
/* ─────────────────────────────────────────────────────────── */
.cta-big {
  background:var(--blue);
  padding:96px 24px; text-align:center; position:relative; overflow:hidden;
}
.cta-big::before {
  content:''; position:absolute;
  top:-40%; left:50%; transform:translateX(-50%);
  width:700px; height:500px;
  background:radial-gradient(circle, rgba(255,255,255,.14), transparent 60%);
  pointer-events:none;
}
.cta-big::after {
  content:''; position:absolute;
  bottom:-60px; right:-60px; width:300px; height:300px;
  border:2px solid rgba(255,255,255,.08); border-radius:50%;
  pointer-events:none;
}
.cta-big-title {
  font-size:clamp(2rem,5vw,3.8rem); font-weight:900;
  color:#fff; letter-spacing:-.05em; margin-bottom:16px; position:relative;
}
.cta-big-sub  { font-size:1rem; color:rgba(255,255,255,.75); margin-bottom:38px; position:relative; max-width:480px; margin-left:auto; margin-right:auto }
.cta-big-btns { display:flex; gap:12px; justify-content:center; flex-wrap:wrap; position:relative }
.btn-white {
  display:inline-flex; align-items:center; gap:8px;
  background:#fff; color:var(--blue); padding:15px 32px;
  border-radius:var(--r-pill); font-size:.95rem; font-weight:800;
  border:2px solid transparent; transition:var(--t);
}
.btn-white:hover { background:var(--blue-ll); transform:translateY(-2px); box-shadow:0 10px 32px rgba(0,0,0,.15) }
.btn-wa-cta {
  display:inline-flex; align-items:center; gap:9px;
  background:rgba(255,255,255,.2); color:#fff; padding:15px 32px;
  border-radius:var(--r-pill); font-size:.95rem; font-weight:800;
  border:2px solid rgba(255,255,255,.4); transition:var(--t);
}
.btn-wa-cta:hover { background:rgba(255,255,255,.32); transform:translateY(-2px) }

/* ─────────────────────────────────────────────────────────── */
/*  FAQ                                                        */
/* ─────────────────────────────────────────────────────────── */
.faq-list { max-width:720px; margin:0 auto; display:flex; flex-direction:column; gap:8px }
.faq-item {
  background:var(--white); border:1.5px solid var(--border);
  border-radius:var(--r); overflow:hidden; transition:var(--t);
}
.faq-item[open] { border-color:var(--blue-l); box-shadow:var(--shadow-sm) }
.faq-q {
  padding:18px 24px; font-size:.92rem; font-weight:700;
  cursor:pointer; list-style:none;
  display:flex; justify-content:space-between; align-items:center; gap:16px;
}
.faq-q::-webkit-details-marker { display:none }
.faq-q::after {
  content:''; display:block;
  width:20px; height:20px; flex-shrink:0;
  background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%233B8FCC' stroke-width='2.5'%3E%3Cline x1='12' y1='5' x2='12' y2='19'/%3E%3Cline x1='5' y1='12' x2='19' y2='12'/%3E%3C/svg%3E");
  background-size:contain; transition:transform var(--t);
}
.faq-item[open] .faq-q::after { transform:rotate(45deg) }
.faq-a { padding:0 24px 20px; font-size:.87rem; color:var(--text-3); line-height:1.78 }

/* ─────────────────────────────────────────────────────────── */
/*  FOOTER                                                     */
/* ─────────────────────────────────────────────────────────── */
.footer { background:var(--black-2); padding:72px 24px 28px }
.footer-grid {
  max-width:var(--max-w); margin:0 auto;
  display:grid; grid-template-columns:2.4fr 1fr 1fr 1fr; gap:48px;
  padding-bottom:52px; border-bottom:1px solid rgba(255,255,255,.06);
}
.f-brand { font-size:1.45rem; font-weight:900; color:#fff; letter-spacing:-.04em; margin-bottom:12px }
.f-brand b { color:var(--blue-mid) }
.f-desc  { font-size:.83rem; color:rgba(255,255,255,.38); line-height:1.75; max-width:260px }
.f-socials { display:flex; gap:10px; margin-top:20px }
.f-social {
  width:38px; height:38px; border-radius:var(--r-sm);
  background:rgba(255,255,255,.07); border:1px solid rgba(255,255,255,.1);
  display:flex; align-items:center; justify-content:center;
  color:rgba(255,255,255,.5); transition:var(--t);
}
.f-social:hover { background:var(--blue); border-color:var(--blue); color:#fff }
.f-title {
  font-size:.7rem; font-weight:800; letter-spacing:.1em; text-transform:uppercase;
  color:rgba(255,255,255,.3); margin-bottom:18px;
}
.f-links { display:flex; flex-direction:column; gap:10px }
.f-links a {
  font-size:.85rem; color:rgba(255,255,255,.5); transition:var(--t);
  font-weight:500;
}
.f-links a:hover { color:#fff; padding-left:4px }
.footer-bar {
  max-width:var(--max-w); margin:0 auto; padding-top:24px;
  display:flex; justify-content:space-between; align-items:center; flex-wrap:wrap; gap:12px;
  font-size:.78rem; color:rgba(255,255,255,.28);
}
.footer-bar a { color:rgba(255,255,255,.4); transition:var(--t) }
.footer-bar a:hover { color:#fff }

/* ─────────────────────────────────────────────────────────── */
/*  TOAST                                                      */
/* ─────────────────────────────────────────────────────────── */
#toast-container {
  position:fixed; bottom:24px; right:24px; z-index:9999;
  display:flex; flex-direction:column; gap:10px; pointer-events:none;
}
.toast {
  background:var(--black); color:#fff;
  padding:12px 20px; border-radius:var(--r);
  font-size:.85rem; font-weight:600; pointer-events:all;
  animation:toast-in .3s ease forwards;
  box-shadow:var(--shadow-hover); max-width:320px;
}
.toast.toast-success { border-left:4px solid #059669 }
.toast.toast-warning { border-left:4px solid #D97706 }
.toast.toast-error   { border-left:4px solid #DC2626 }
.toast.fade-out      { animation:toast-out .3s ease forwards }
@keyframes toast-in  { from{opacity:0;transform:translateX(20px)} to{opacity:1;transform:none} }
@keyframes toast-out { from{opacity:1;transform:none} to{opacity:0;transform:translateX(20px)} }

/* ─────────────────────────────────────────────────────────── */
/*  GRACIAS PAGE                                               */
/* ─────────────────────────────────────────────────────────── */
.gracias-page {
  min-height:80vh; display:flex; align-items:center; justify-content:center;
  background:var(--blue-ll); padding:40px 24px;
}
.gracias-card {
  background:#fff; border-radius:var(--r-xl);
  padding:56px 48px; max-width:520px; width:100%;
  text-align:center; box-shadow:var(--shadow-hover);
}
.gracias-icon {
  width:72px; height:72px; border-radius:50%;
  background:var(--blue-ll); display:flex; align-items:center; justify-content:center;
  color:var(--blue); margin:0 auto 24px; font-size:2rem;
}
.gracias-title { font-size:1.7rem; font-weight:900; letter-spacing:-.04em; margin-bottom:12px }
.gracias-sub   { font-size:.95rem; color:var(--text-3); line-height:1.7; margin-bottom:32px }

/* ─────────────────────────────────────────────────────────── */
/*  RESPONSIVE                                                 */
/* ─────────────────────────────────────────────────────────── */
@media (max-width:1024px) {
  .products-grid { grid-template-columns:repeat(2,1fr) }
  .colors-strip  { grid-template-columns:repeat(3,1fr) }
  .features-row  { grid-template-columns:repeat(2,1fr) }
  .pricing-row   { grid-template-columns:1fr }
  .footer-grid   { grid-template-columns:1fr 1fr; gap:32px }
  .lifestyle-strip { height:320px }
}
@media (max-width:768px) {
  .nav-links, .nav-btn-wa { display:none }
  .nav-burger { display:flex }
  .hero { grid-template-columns:1fr; min-height:auto }
  .hero-right { display:none }
  .hero-left  { padding:60px 24px }
  .hero-title { font-size:2.8rem }
  .stats-grid { grid-template-columns:repeat(2,1fr) }
  .products-grid { grid-template-columns:1fr 1fr; gap:12px }
  .colors-strip  { grid-template-columns:repeat(2,1fr) }
  .steps-row     { grid-template-columns:1fr; gap:28px }
  .steps-row::before { display:none }
  .features-row  { grid-template-columns:1fr }
  .testimonials-grid { grid-template-columns:1fr }
  .footer-grid   { grid-template-columns:1fr }
  .lifestyle-strip { grid-template-columns:1fr; height:auto }
  .ls-img { height:240px }
  .section { padding:64px 0 }
}
@media (max-width:480px) {
  .nav-btn-cta { display:none }
  .hero-title  { font-size:2.2rem }
  .cta-big-title { font-size:2rem }
}

/* ─────────────────────────────────────────────────────────── */
/*  CATÁLOGO — HERO                                            */
/* ─────────────────────────────────────────────────────────── */
.store-hero {
  background:var(--navy); padding:56px 0 48px;
  position:relative; overflow:hidden;
}
.store-hero::before {
  content:''; position:absolute; inset:0; pointer-events:none;
  background-image:
    linear-gradient(rgba(59,143,204,.05) 1px, transparent 1px),
    linear-gradient(90deg, rgba(59,143,204,.05) 1px, transparent 1px);
  background-size:48px 48px;
}
.store-hero h1 {
  font-size:clamp(1.8rem,4vw,2.8rem); font-weight:900; color:#fff; letter-spacing:-.05em;
}
.store-hero p {
  font-size:.78rem; font-weight:800; color:rgba(255,255,255,.38);
  text-transform:uppercase; letter-spacing:.12em; margin-bottom:6px;
}
.store-search-bar {
  display:flex; gap:10px; align-items:center; margin-top:24px; flex-wrap:wrap;
}
.store-input-wrap {
  flex:1; min-width:220px; display:flex; align-items:center; gap:10px;
  background:rgba(255,255,255,.1); border:1.5px solid rgba(255,255,255,.18);
  border-radius:var(--r); padding:0 16px; height:46px;
  color:rgba(255,255,255,.55); transition:var(--t);
}
.store-input-wrap:focus-within {
  background:rgba(255,255,255,.15); border-color:rgba(59,143,204,.6);
}
.store-input-wrap input {
  flex:1; background:transparent; border:none; outline:none;
  font-size:.9rem; color:#fff; font-family:inherit;
}
.store-input-wrap input::placeholder { color:rgba(255,255,255,.38) }

/* ─────────────────────────────────────────────────────────── */
/*  CATÁLOGO — LAYOUT SIDEBAR + GRID                           */
/* ─────────────────────────────────────────────────────────── */
.store-wrap {
  max-width:var(--max-w); margin:0 auto; padding:36px 24px;
  display:grid; grid-template-columns:240px 1fr; gap:32px;
  align-items:start;
}
.sidebar {
  background:var(--white); border:1.5px solid var(--border);
  border-radius:var(--r-lg); overflow:hidden; position:sticky; top:90px;
}
.sb-section { border-bottom:1px solid var(--border) }
.sb-section:last-child { border-bottom:none }
.sb-title {
  padding:14px 18px 10px; font-size:.72rem; font-weight:800;
  text-transform:uppercase; letter-spacing:.09em; color:var(--text-3);
}
.sb-links { padding:0 10px 12px; display:flex; flex-direction:column; gap:2px }
.sb-link {
  display:flex; align-items:center; justify-content:space-between;
  padding:9px 10px; border-radius:var(--r-sm);
  font-size:.85rem; font-weight:600; color:var(--text-2);
  transition:var(--t); text-decoration:none;
}
.sb-link:hover { background:var(--blue-ll); color:var(--blue) }
.sb-link.on    { background:var(--blue-ll); color:var(--blue); font-weight:800 }
.sb-cnt {
  background:var(--gray-2); color:var(--text-3);
  font-size:.68rem; font-weight:800; padding:2px 8px;
  border-radius:var(--r-pill);
}
.sb-link.on .sb-cnt { background:var(--blue-l); color:var(--blue) }

/* Grid de productos en catálogo */
.store-grid {
  display:grid; grid-template-columns:repeat(3,1fr); gap:18px;
}
.store-grid-header {
  display:flex; align-items:center; justify-content:space-between;
  margin-bottom:18px; flex-wrap:wrap; gap:10px;
}
.store-total { font-size:.85rem; color:var(--text-3) }
.store-total b { color:var(--text) }
.sort-select {
  padding:8px 14px; border:1.5px solid var(--border);
  border-radius:var(--r-sm); font-size:.82rem; font-weight:600;
  color:var(--text-2); background:var(--white);
  font-family:inherit; outline:none; cursor:pointer; transition:var(--t);
}
.sort-select:focus { border-color:var(--blue) }

/* Paginación */
.pagination {
  display:flex; gap:6px; margin-top:36px; justify-content:center; flex-wrap:wrap;
}
.page-btn {
  width:38px; height:38px; border-radius:var(--r-sm);
  display:flex; align-items:center; justify-content:center;
  border:1.5px solid var(--border); font-size:.85rem; font-weight:700;
  color:var(--text-2); transition:var(--t); text-decoration:none;
}
.page-btn:hover { border-color:var(--blue); color:var(--blue) }
.page-btn.on { background:var(--blue); border-color:var(--blue); color:#fff }

/* ─────────────────────────────────────────────────────────── */
/*  NOSOTROS — HERO                                            */
/* ─────────────────────────────────────────────────────────── */
.about-hero {
  background:var(--navy); padding:96px 24px 80px;
  text-align:center; position:relative; overflow:hidden;
}
.about-hero::before {
  content:''; position:absolute; inset:0; pointer-events:none;
  background:radial-gradient(circle at 50% 60%, rgba(59,143,204,.18), transparent 65%);
}
.about-hero-content { position:relative; z-index:1; max-width:680px; margin:0 auto }
.about-hero-content h1 {
  font-size:clamp(2.4rem,5vw,4rem); font-weight:900; color:#fff;
  letter-spacing:-.05em; margin-top:14px;
}
.about-hero-content h1 span { color:var(--blue-mid) }
.about-hero-content p {
  font-size:1.05rem; color:rgba(255,255,255,.55); line-height:1.75; margin-top:16px;
}

/* Misión / Visión */
.mission-grid {
  display:grid; grid-template-columns:repeat(3,1fr); gap:24px;
}
.mission-card {
  background:var(--white); border:1.5px solid var(--border);
  border-radius:var(--r-lg); padding:32px 26px;
  text-align:center; transition:var(--t);
}
.mission-card:hover { box-shadow:var(--shadow-hover); transform:translateY(-4px); border-color:var(--blue-l) }
.mission-icon {
  width:60px; height:60px; border-radius:var(--r-lg);
  background:var(--blue-ll); color:var(--blue);
  display:flex; align-items:center; justify-content:center;
  margin:0 auto 18px;
}
.mission-title { font-size:1rem; font-weight:900; margin-bottom:10px }
.mission-desc  { font-size:.85rem; color:var(--text-3); line-height:1.75 }

/* Valores */
.values-grid {
  display:grid; grid-template-columns:repeat(2,1fr); gap:24px; max-width:860px; margin:0 auto;
}
.value-item {
  display:flex; gap:18px; align-items:flex-start;
  padding:24px; background:var(--white);
  border:1.5px solid var(--border); border-radius:var(--r-lg);
  transition:var(--t);
}
.value-item:hover { border-color:var(--blue-l); box-shadow:var(--shadow-card) }
.value-icon {
  width:44px; height:44px; border-radius:var(--r); flex-shrink:0;
  background:var(--blue-ll); color:var(--blue);
  display:flex; align-items:center; justify-content:center;
}
.value-text h4 { font-size:.93rem; font-weight:800; margin-bottom:6px }
.value-text p  { font-size:.83rem; color:var(--text-3); line-height:1.7 }

/* Equipo */
.team-grid {
  display:grid; grid-template-columns:repeat(3,1fr); gap:24px; max-width:860px; margin:0 auto;
}
.team-card {
  background:var(--white); border:1.5px solid var(--border);
  border-radius:var(--r-lg); padding:32px 24px; text-align:center;
  transition:var(--t);
}
.team-card:hover { box-shadow:var(--shadow-hover); transform:translateY(-4px); border-color:var(--blue-l) }
.team-avatar {
  width:80px; height:80px; border-radius:50%; margin:0 auto 16px;
  background:var(--blue-ll); color:var(--blue);
  display:flex; align-items:center; justify-content:center;
  border:3px solid var(--blue-l);
}
.team-name { font-size:1rem; font-weight:900; margin-bottom:4px }
.team-role { font-size:.76rem; font-weight:700; color:var(--blue); text-transform:uppercase; letter-spacing:.06em; margin-bottom:12px }
.team-bio  { font-size:.83rem; color:var(--text-3); line-height:1.7 }

/* ─────────────────────────────────────────────────────────── */
/*  LEGALES (privacidad / términos)                            */
/* ─────────────────────────────────────────────────────────── */
.legal-hero {
  background:var(--navy); padding:72px 0 56px;
  position:relative;
}
.legal-hero::before {
  content:''; position:absolute; inset:0; pointer-events:none;
  background:radial-gradient(circle at 50% 80%, rgba(59,143,204,.14), transparent 60%);
}
.legal-hero .container { position:relative; z-index:1 }
.legal-hero h1 {
  font-size:clamp(2rem,4vw,3rem); font-weight:900; color:#fff;
  letter-spacing:-.04em; margin-top:14px;
}
.legal-hero p { font-size:.85rem; color:rgba(255,255,255,.45); margin-top:8px }

.legal-layout {
  max-width:var(--max-w); margin:0 auto; padding:48px 24px 80px;
  display:grid; grid-template-columns:240px 1fr; gap:48px; align-items:start;
}
.legal-toc {
  background:var(--white); border:1.5px solid var(--border);
  border-radius:var(--r-lg); padding:20px 0; position:sticky; top:90px;
}
.legal-toc-title {
  padding:0 20px 12px; font-size:.72rem; font-weight:800;
  text-transform:uppercase; letter-spacing:.09em; color:var(--text-3);
  border-bottom:1px solid var(--border); margin-bottom:10px;
}
.legal-toc-links {
  display:flex; flex-direction:column; padding:0 12px;
}
.legal-toc-links a {
  padding:8px 10px; font-size:.82rem; font-weight:600; color:var(--text-2);
  border-radius:var(--r-sm); transition:var(--t); text-decoration:none;
}
.legal-toc-links a:hover { background:var(--blue-ll); color:var(--blue) }

.legal-content { min-width:0 }
.legal-date {
  display:inline-block; font-size:.75rem; font-weight:700;
  color:var(--text-3); background:var(--gray-1);
  border:1px solid var(--border); border-radius:var(--r-pill);
  padding:4px 14px; margin-bottom:24px;
}
.legal-content h2 {
  font-size:1.12rem; font-weight:900; color:var(--text);
  letter-spacing:-.03em; margin:36px 0 12px; padding-bottom:10px;
  border-bottom:2px solid var(--blue-l);
}
.legal-content h2:first-of-type { margin-top:0 }
.legal-content h3 {
  font-size:.95rem; font-weight:800; margin:18px 0 8px;
}
.legal-content > p, .legal-content p {
  font-size:.9rem; color:var(--text-2); line-height:1.85; margin-bottom:12px;
}
.legal-content ul {
  padding-left:0; margin-bottom:14px; list-style:none;
}
.legal-content ul li {
  font-size:.9rem; color:var(--text-2); line-height:1.8;
  display:flex; gap:10px; align-items:flex-start; margin-bottom:6px;
}
.legal-content ul li::before {
  content:''; flex-shrink:0; width:6px; height:6px; border-radius:50%;
  background:var(--blue); margin-top:9px;
}
/* keep old .legal-section selector for backwards compat */
.legal-section { margin-bottom:48px }

/* ─────────────────────────────────────────────────────────── */
/*  PRODUCT CARD — colores + 2 botones                        */
/* ─────────────────────────────────────────────────────────── */
.pc-desc {
  font-size:.75rem; color:var(--text-3); line-height:1.5; margin-bottom:10px;
}

/* Colores en la card */
.pc-colors { margin-bottom:10px; display:flex; flex-direction:column; gap:5px }
.pc-color-row { display:flex; align-items:center; gap:8px }
.pc-color-tag {
  font-size:.62rem; font-weight:800; text-transform:uppercase; letter-spacing:.06em;
  color:var(--text-3); white-space:nowrap; min-width:52px;
}
.pc-color-tag.prem { color:var(--blue) }
.pc-color-tag em { font-style:normal; background:var(--blue-l); color:var(--blue);
  padding:1px 5px; border-radius:99px; margin-left:2px; font-size:.58rem }
.pc-swatches { display:flex; gap:5px }
.pc-swatch {
  width:16px; height:16px; border-radius:50%;
  border:2px solid rgba(0,0,0,.12); cursor:pointer;
  transition:.2s ease; flex-shrink:0;
  display:inline-block;
}
.pc-swatch:hover { transform:scale(1.25); border-color:var(--blue) }
.pc-swatch.prem { border-color:rgba(59,143,204,.35) }

/* Footer con precio + botones */
.pc-footer {
  display:flex; flex-direction:column; gap:10px;
  padding-top:10px; border-top:1px solid var(--border);
}
.pc-price-wrap { display:flex; align-items:baseline; gap:6px }
.pc-actions { display:flex; gap:8px }
.pc-btn-alt {
  flex:1; display:flex; align-items:center; justify-content:center; gap:5px;
  padding:9px 8px; border-radius:var(--r-sm);
  border:1.5px solid var(--border); background:var(--white);
  font-size:.78rem; font-weight:700; color:var(--text-2);
  text-decoration:none; transition:var(--t);
}
.pc-btn-alt:hover { border-color:var(--blue); color:var(--blue); background:var(--blue-ll) }
.pc-btn-buy {
  flex:1; display:flex; align-items:center; justify-content:center; gap:5px;
  padding:9px 8px; border-radius:var(--r-sm);
  border:none; background:var(--blue); color:#fff;
  font-size:.78rem; font-weight:800; cursor:pointer; transition:var(--t);
  font-family:inherit;
}
.pc-btn-buy:hover { background:var(--blue-d); box-shadow:0 4px 14px rgba(59,143,204,.4); transform:translateY(-1px) }

/* ─────────────────────────────────────────────────────────── */
/*  QUICK-BUY MODAL                                           */
/* ─────────────────────────────────────────────────────────── */
.qb-overlay {
  position:fixed; inset:0; z-index:900;
  background:rgba(11,20,36,.72); backdrop-filter:blur(6px);
  display:none; align-items:center; justify-content:center; padding:20px;
}
.qb-overlay.show { display:flex }

.qb-dialog {
  background:#fff; border-radius:24px; width:100%; max-width:540px;
  max-height:92vh; overflow:hidden; display:flex; flex-direction:column;
  box-shadow:0 32px 80px rgba(0,0,0,.28);
  animation:qb-in .3s cubic-bezier(.34,1.56,.64,1);
}
@keyframes qb-in { from{opacity:0;transform:scale(.94) translateY(16px)} to{opacity:1;transform:none} }

.qb-header {
  display:flex; justify-content:space-between; align-items:flex-start;
  padding:20px 24px 16px; border-bottom:1px solid var(--border); flex-shrink:0;
}
.qb-header h2 { font-size:1rem; font-weight:900; color:var(--text); line-height:1.2 }
.qb-header p  { font-size:.76rem; color:var(--text-3); margin-top:3px }
.qb-close {
  width:30px; height:30px; border-radius:50%; flex-shrink:0;
  background:var(--gray-1); border:1px solid var(--border);
  display:flex; align-items:center; justify-content:center;
  color:var(--text-3); cursor:pointer; transition:var(--t); margin-left:12px;
}
.qb-close:hover { background:var(--border); color:var(--text) }

.qb-body { flex:1; overflow-y:auto; padding:0 }
.qb-body::-webkit-scrollbar { width:4px }
.qb-body::-webkit-scrollbar-thumb { background:var(--gray-3); border-radius:4px }

.qb-section { padding:18px 24px; border-bottom:1px solid var(--border) }
.qb-section:last-of-type { border-bottom:none }
.qb-sec-title {
  display:flex; align-items:center; gap:8px;
  font-size:.82rem; font-weight:800; color:var(--text);
  margin-bottom:14px;
}
.qb-step-num {
  width:22px; height:22px; border-radius:50%; flex-shrink:0;
  background:var(--blue-l); color:var(--blue);
  display:flex; align-items:center; justify-content:center;
  font-size:.68rem; font-weight:900;
}

/* Colores en modal */
.qb-color-group { margin-bottom:12px }
.qb-cg-label {
  display:flex; align-items:center; gap:5px;
  font-size:.7rem; font-weight:800; text-transform:uppercase; letter-spacing:.07em;
  color:var(--text-3); margin-bottom:8px;
}
.qb-cg-label.prem { color:var(--blue) }
.qb-swatches { display:flex; gap:8px; flex-wrap:wrap }
.qb-swatch {
  width:36px; height:36px; border-radius:50%;
  border:2.5px solid var(--border); cursor:pointer;
  transition:var(--t); position:relative;
}
.qb-swatch:hover { transform:scale(1.15); border-color:var(--blue) }
.qb-swatch.active {
  border-color:var(--blue);
  box-shadow:0 0 0 4px rgba(59,143,204,.2);
  transform:scale(1.1);
}
.qb-sel-color {
  display:flex; align-items:center; gap:8px;
  padding:8px 12px; border-radius:var(--r-sm);
  background:var(--gray-1); border:1px solid var(--border);
  font-size:.82rem; font-weight:700; margin-top:6px;
}
.qb-sel-dot {
  width:16px; height:16px; border-radius:50%;
  border:1.5px solid rgba(0,0,0,.15); flex-shrink:0;
}

/* Tallas en modal */
.qb-talla-who {
  display:flex; align-items:center; gap:6px;
  font-size:.72rem; font-weight:800; color:var(--text-3);
  text-transform:uppercase; letter-spacing:.06em; margin-bottom:8px;
}
.qb-tallas { display:flex; gap:7px; flex-wrap:wrap; margin-bottom:6px }
.qb-talla {
  min-width:44px; height:44px; border-radius:var(--r-sm);
  border:2px solid var(--border); background:var(--white);
  font-size:.85rem; font-weight:800; cursor:pointer; transition:var(--t);
  font-family:inherit; padding:0 8px;
}
.qb-talla:hover { border-color:var(--blue); color:var(--blue) }
.qb-talla.active { background:var(--blue); border-color:var(--blue); color:#fff; box-shadow:0 4px 14px rgba(59,143,204,.35) }
.qb-talla-guide { font-size:.68rem; color:var(--text-3); line-height:1.5 }

/* Price bar */
.qb-price-bar {
  display:flex; justify-content:space-between; align-items:center;
  padding:14px 24px; background:var(--blue-ll);
  border-top:1px solid var(--blue-l); border-bottom:1px solid var(--blue-l);
}
.qb-price-val { font-size:1.6rem; font-weight:900; color:var(--navy); letter-spacing:-.04em }
.qb-color-chip {
  display:flex; align-items:center; gap:7px;
  background:#fff; border:1px solid var(--blue-l); border-radius:999px;
  padding:5px 12px; font-size:.78rem; font-weight:700; color:var(--text-2);
}
.qb-chip-dot { width:14px; height:14px; border-radius:50%; border:1.5px solid rgba(0,0,0,.12); flex-shrink:0 }

/* Form grid */
.qb-form-grid { display:grid; grid-template-columns:1fr 1fr; gap:12px }
.qb-field { display:flex; flex-direction:column; gap:5px }
.qb-field.qb-span2 { grid-column:1/-1 }
.qb-label { font-size:.74rem; font-weight:700; color:var(--text-2) }
.qb-input {
  width:100%; padding:10px 13px;
  border:1.5px solid var(--border); border-radius:var(--r-sm);
  font-size:.85rem; color:var(--text); background:var(--gray-1);
  font-family:inherit; outline:none; transition:var(--t);
}
.qb-input:focus { border-color:var(--blue); background:#fff; box-shadow:0 0 0 3px rgba(59,143,204,.12) }

.qb-error {
  margin:0 24px 14px;
  padding:10px 14px; border-radius:var(--r-sm);
  background:#FEF2F2; border:1.5px solid #FECACA;
  color:#991B1B; font-size:.8rem; font-weight:600;
}

.qb-submit {
  width:calc(100% - 48px); margin:14px 24px 20px;
  display:flex; align-items:center; justify-content:center; gap:10px;
  padding:15px; border-radius:var(--r-lg);
  background:#25D366; color:#fff;
  font-size:.95rem; font-weight:800; border:none; cursor:pointer;
  font-family:inherit; transition:var(--t);
}
.qb-submit:hover { background:#1EBC58; box-shadow:0 8px 24px rgba(37,211,102,.4) }
.qb-submit:disabled { opacity:.6; pointer-events:none }

/* ─────────────────────────────────────────────────────────── */
/*  CATÁLOGO RESPONSIVE                                        */
/* ─────────────────────────────────────────────────────────── */
@media (max-width:900px) {
  .store-wrap  { grid-template-columns:1fr; padding:24px 16px }
  .sidebar     { position:relative; top:auto }
  .store-grid  { grid-template-columns:repeat(2,1fr) }
  .mission-grid { grid-template-columns:1fr }
  .team-grid   { grid-template-columns:1fr 1fr }
  .legal-layout { grid-template-columns:1fr }
  .legal-toc   { position:relative; top:auto }
}
@media (max-width:600px) {
  .store-grid  { grid-template-columns:1fr 1fr; gap:12px }
  .values-grid { grid-template-columns:1fr }
  .team-grid   { grid-template-columns:1fr }
  .about-hero  { padding:64px 24px }
  .qb-dialog   { border-radius:20px 20px 0 0; margin-top:auto; max-height:90vh }
  .qb-overlay  { align-items:flex-end; padding:0 }
  .qb-form-grid { grid-template-columns:1fr }
  .qb-field.qb-span2 { grid-column:1 }
  .pc-actions  { flex-direction:column }
}

/* ============================================================
   PawMatch Design System - black, gold, warm premium
   ============================================================ */
:root {
  --black: #0a0a0a;
  --black-2: #111111;
  --black-3: #1a1a1a;
  --navy: #0a0a0a;
  --blue: #c9a84c;
  --blue-d: #b8892a;
  --blue-mid: #ffd76e;
  --blue-l: #c9a84c33;
  --blue-ll: #1a1a1a;
  --white: #f5f0e8;
  --gray-1: #1a1a1a;
  --gray-2: #2a2a2a;
  --gray-3: #333333;
  --text: #f5f0e8;
  --text-2: #e8d9b0;
  --text-3: #888888;
  --border: #c9a84c33;
  --shadow-sm: 0 2px 12px #00000066;
  --shadow-card: 0 4px 24px #c9a84c18;
  --shadow-hover: 0 12px 36px #c9a84c24;
  --shadow-blue: 0 4px 24px #c9a84c18;
  --gold-on-light: #7a5416;
  --gold-on-light-hover: #5f3f0f;
}

html { background:#0a0a0a }
body {
  background:#0a0a0a;
  color:#e8d9b0;
  line-height:1.7;
}

.navbar {
  background:#0a0a0af2;
  border-bottom:.5px solid #c9a84c44;
  box-shadow:0 4px 24px #c9a84c12;
  backdrop-filter:blur(14px);
}
.nav-inner { height:76px }
.nav-brand { min-width:220px; margin-right:26px }
.nav-logo {
  width:auto;
  height:64px;
  max-width:260px;
  object-fit:contain;
}
.nav-links a {
  color:#e8d9b0;
  border:1px solid transparent;
  letter-spacing:.02em;
}
.nav-links a:hover,
.nav-links a.on {
  color:#ffd76e;
  background:#c9a84c14;
  border-color:#c9a84c22;
}
.nav-burger { color:#c9a84c }
.nav-mobile {
  background:#0a0a0a;
  border-top:.5px solid #c9a84c44;
}
.nav-mobile a { color:#e8d9b0 }
.nav-mobile a:hover { color:#ffd76e; background:#c9a84c14 }

.btn,
.nav-btn-cta,
.pc-btn-buy {
  border-radius:8px;
}
.btn-blue,
.nav-btn-cta,
.pc-btn-buy,
.page-btn.on {
  background:#c9a84c;
  border-color:#c9a84c;
  color:#0a0a0a;
  box-shadow:0 4px 24px #c9a84c18;
}
.btn-blue:hover,
.nav-btn-cta:hover,
.pc-btn-buy:hover,
.page-btn.on:hover {
  background:#b8892a;
  border-color:#b8892a;
  color:#0a0a0a;
  box-shadow:0 8px 28px #c9a84c24;
}
.btn-dark,
.btn-outline,
.btn-ghost,
.pc-btn-alt,
.page-btn {
  background:transparent;
  border:1px solid #c9a84c;
  color:#c9a84c;
}
.btn-dark:hover,
.btn-outline:hover,
.btn-ghost:hover,
.pc-btn-alt:hover,
.page-btn:hover {
  background:#c9a84c14;
  border-color:#ffd76e;
  color:#ffd76e;
  box-shadow:0 4px 24px #c9a84c18;
}
.nav-btn-wa,
.nav-mobile-wa,
.qb-submit {
  background:#1a1a1a;
  border:1px solid #c9a84c;
  color:#ffd76e;
}
.nav-btn-wa:hover,
.nav-mobile-wa:hover,
.qb-submit:hover {
  background:#c9a84c;
  color:#0a0a0a;
  box-shadow:0 4px 24px #c9a84c18;
}

.hero,
.about-hero,
.legal-hero,
.section-dark {
  background:#0a0a0a;
  color:#f5f0e8;
}
.hero::after {
  background-image:
    linear-gradient(#c9a84c0d 1px, transparent 1px),
    linear-gradient(90deg, #c9a84c0d 1px, transparent 1px);
}
.hero-right::before,
.about-hero::before,
.legal-hero::before {
  background:none;
}
.hero-title,
.about-hero-content h1,
.legal-hero h1,
.sec-title {
  color:#f5f0e8;
  font-weight:800;
  letter-spacing:0;
}
.hero-title .accent,
.hero-title .stroke,
.sec-title span,
.about-hero-content h1 span {
  color:#c9a84c;
  -webkit-text-stroke:0;
}
.hero-subtitle,
.sec-sub,
.section-dark .sec-sub,
.about-hero-content p,
.legal-hero p {
  color:#e8d9b0;
}
.hero-eyebrow,
.sec-tag {
  background:#c9a84c14;
  border:1px solid #c9a84c44;
  color:#c9a84c;
  letter-spacing:.5px;
  text-transform:uppercase;
}
.trust-pill,
.hero-badge,
.mission-card,
.value-item,
.team-card,
.legal-toc,
.sidebar,
.filter-box,
.qb-dialog {
  background:#1a1a1a;
  border:.5px solid #c9a84c33;
  color:#e8d9b0;
  box-shadow:0 4px 24px #c9a84c18;
}
.hero-badge-title,
.mission-title,
.value-text h4,
.team-name,
.legal-content h2,
.legal-content h3,
.qb-header h2,
.qb-sec-title {
  color:#f5f0e8;
}
.hero-badge-sub,
.mission-desc,
.value-text p,
.team-bio,
.legal-content p,
.legal-content ul li,
.qb-header p,
.qb-label,
.qb-talla-guide,
.pc-desc {
  color:#e8d9b0;
}
.hero-badge-icon,
.mission-icon,
.value-icon,
.team-avatar,
.qb-step-num {
  background:#c9a84c14;
  border:1px solid #c9a84c33;
  color:#c9a84c;
}

.section,
.section-white,
.section-gray,
.section-blue,
.store-wrap,
.legal-layout {
  background:#0a0a0a;
}
.marquee-bar {
  background:#c9a84c;
  border-top:.5px solid #ffd76e66;
  border-bottom:.5px solid #c9a84c44;
}
.marquee-item { color:#0a0a0a }
.stats-bar {
  background:#111111;
  border-top:.5px solid #c9a84c22;
  border-bottom:.5px solid #c9a84c22;
}
.stat-item { border-color:#c9a84c22 }
.stat-num { color:#f5f0e8 }
.stat-unit,
.stat-label,
.team-role,
.pc-color-tag.prem,
.qb-cg-label.prem {
  color:#c9a84c;
}

.pc,
.product-card,
.store-card,
.category-card {
  background:#1a1a1a;
  border:.5px solid #c9a84c33;
  border-radius:12px;
  color:#e8d9b0;
  box-shadow:0 4px 24px #c9a84c18;
}
.pc:hover,
.mission-card:hover,
.value-item:hover,
.team-card:hover {
  border-color:#c9a84c66;
  box-shadow:0 10px 34px #c9a84c24;
}
.pc-img,
.qb-body,
.qb-section,
.qb-price-bar {
  background:#111111;
}
.pc-overlay { background:#0a0a0acc }
.pc-buy {
  background:#c9a84c;
  color:#0a0a0a;
}
.pc-title,
.pc-name,
.pc-price,
.qb-price-val {
  color:#f5f0e8;
}
.pc-category,
.pc-old,
.pc-color-tag,
.store-grid-header,
.legal-date {
  color:#888888;
}
.pc-footer,
.qb-header,
.qb-section,
.legal-content h2,
.footer-bar {
  border-color:#c9a84c33;
}

input,
select,
textarea,
.qb-input,
.qb-talla,
.qb-sel-color,
.qb-color-chip {
  background:#2a2a2a;
  border:1px solid #c9a84c33;
  color:#f5f0e8;
}
input:focus,
select:focus,
textarea:focus,
.qb-input:focus {
  background:#1a1a1a;
  border-color:#c9a84c;
  box-shadow:0 0 0 3px #c9a84c22;
}
.qb-talla:hover,
.qb-talla.active {
  background:#c9a84c;
  border-color:#c9a84c;
  color:#0a0a0a;
  box-shadow:0 4px 24px #c9a84c18;
}
.qb-overlay { background:#000000cc }
.qb-close {
  background:#2a2a2a;
  border:1px solid #c9a84c33;
  color:#c9a84c;
}
.qb-error {
  background:#2a1515;
  border-color:#7f1d1d;
  color:#fecaca;
}

.footer {
  background:#0a0a0a;
  border-top:.5px solid #c9a84c44;
  color:#e8d9b0;
}
.footer-grid { border-bottom:.5px solid #c9a84c33 }
.f-brand { margin-bottom:16px }
.footer-logo {
  width:auto;
  height:92px;
  max-width:320px;
  object-fit:contain;
}
.f-desc,
.f-links a,
.footer-bar,
.footer-bar a {
  color:#888888;
}
.f-title {
  color:#c9a84c;
  text-transform:uppercase;
  letter-spacing:.5px;
}
.f-links a:hover,
.footer-bar a:hover {
  color:#ffd76e;
}
.f-social {
  background:#1a1a1a;
  border:1px solid #c9a84c33;
  color:#c9a84c;
}
.f-social:hover {
  background:#c9a84c;
  color:#0a0a0a;
}

/* Stronger gold for light cards, image areas, and pale UI surfaces */
.hero-badge .hero-badge-icon,
.pc-img .pc-buy,
.pc-buy,
.legal-date,
.qb-error,
.cz-talla-warn,
.pc-color-tag.prem,
.qb-cg-label.prem,
.qb-price-val,
.pc-price,
.store-grid-header strong,
.pc-category strong,
.pc-desc strong,
.legal-content a,
.qb-body a {
  color:var(--gold-on-light);
}

.hero-badge,
.pc-img,
.qb-error,
.legal-date,
.cz-talla-warn,
[style*="background:#fff"],
[style*="background: #fff"],
[style*="background:white"],
[style*="background: white"] {
  --blue:#7a5416;
  --blue-d:#5f3f0f;
  --blue-mid:#7a5416;
}

.hero-badge a,
.pc-img a,
[style*="background:#fff"] a,
[style*="background: #fff"] a,
[style*="background:white"] a,
[style*="background: white"] a {
  color:#7a5416;
}

.hero-badge a:hover,
.pc-img a:hover,
[style*="background:#fff"] a:hover,
[style*="background: #fff"] a:hover,
[style*="background:white"] a:hover,
[style*="background: white"] a:hover {
  color:#5f3f0f;
}

@media (max-width:760px) {
  .nav-inner { height:68px }
  .nav-logo { height:54px; max-width:205px }
  .nav-brand { min-width:auto; margin-right:0 }
  .footer-logo { height:74px; max-width:260px }
}

/* High contrast accents on warm/light cards */
.color-card,
.feat,
.price-card:not(.pop),
.tcard,
.faq-item,
.gracias-card,
.color-card-foot,
.qb-color-chip,
.qb-sel-color,
.qb-talla,
.sidebar,
.legal-toc {
  --blue:#6f4a12;
  --blue-d:#54360a;
  --blue-mid:#6f4a12;
}

.color-card .cc-price,
.color-card .cc-name,
.feat-icon,
.price-icon,
.price-card:not(.pop) .price-amount,
.pop-label,
.tcard-avatar,
.tcard-quote,
.pc-cat,
.pc-color-tag.prem,
.pc-color-tag em,
.qb-cg-label.prem,
.qb-step-num,
.qb-talla:hover,
.sidebar .sb-link:hover,
.sidebar .sb-link.on,
.sidebar .sb-link.on .sb-cnt,
.legal-toc-links a:hover,
.legal-content ul li::before,
.btn-white,
.gracias-icon {
  color:#6f4a12 !important;
}

.color-card:hover,
.feat:hover,
.price-card:not(.pop):hover,
.tcard:hover,
.faq-item[open],
.sidebar .sb-link:hover,
.sidebar .sb-link.on,
.legal-toc-links a:hover {
  border-color:#6f4a12 !important;
}

.feat-icon,
.price-icon,
.tcard-avatar,
.gracias-icon,
.sidebar .sb-link:hover,
.sidebar .sb-link.on,
.sidebar .sb-link.on .sb-cnt,
.pc-color-tag em {
  background:#6f4a121f !important;
}

.badge-blue,
.badge-gold,
.pop-label,
.page-btn.on {
  background:#6f4a12 !important;
  border-color:#6f4a12 !important;
  color:#f5f0e8 !important;
}

.btn-white:hover,
.color-card a:hover,
.sidebar a:hover,
.legal-toc a:hover {
  color:#54360a !important;
}

/* Readable body text on light cards */
.tcard,
.color-card,
.feat,
.price-card:not(.pop),
.faq-item,
.gracias-card,
.hero-badge,
.sidebar,
.legal-toc {
  color:#2b2112 !important;
}

.tcard-text,
.tcard-name,
.tcard-loc,
.feat-title,
.feat-desc,
.price-card:not(.pop) .price-name,
.price-card:not(.pop) .price-desc,
.price-card:not(.pop) .price-per,
.faq-q,
.faq-a,
.gracias-title,
.gracias-sub,
.hero-badge-title,
.hero-badge-sub,
.sidebar .sb-title,
.sidebar .sb-link,
.legal-toc-title,
.legal-toc-links a {
  color:#2b2112 !important;
}

.tcard-text,
.feat-desc,
.price-card:not(.pop) .price-desc,
.faq-a,
.gracias-sub,
.hero-badge-sub {
  color:#4b3a1e !important;
}

.tcard-quote,
.tcard-stars svg,
.tcard-stars,
.pc-cat,
.cc-price,
.team-role {
  color:#6f4a12 !important;
}