/* ===========================================================
   PACAS HERRERA — Sistema visual de marca
   Azul cobalto · Azul marino · Amarillo · Blanco
   =========================================================== */

@import url('https://fonts.googleapis.com/css2?family=Montserrat:ital,wght@0,400;0,500;0,600;0,700;0,800;0,900;1,800&family=Caveat:wght@600;700&display=swap');

:root{
  /* Marca */
  --navy:#014189;
  --navy-deep:#022d5e;
  --blue:#0a88ef;
  --blue-2:#1b9df0;
  --yellow:#ffed00;
  --white:#ffffff;

  /* Texto / superficies */
  --ink:#062a52;
  --ink-soft:#46618a;
  --paper:#eef4fb;
  --paper-2:#dfeaf7;
  --line:#d4e1f1;
  --line-strong:#b9cce4;

  /* Sistema */
  --r-sm:10px;
  --r:16px;
  --r-lg:24px;
  --r-xl:32px;
  --shadow-sm:0 2px 10px rgba(2,45,94,.08);
  --shadow:0 14px 34px -16px rgba(2,45,94,.40);
  --shadow-lg:0 30px 60px -28px rgba(1,65,137,.55);
  --wrap:1200px;
  --header-h:74px;
  --ease:cubic-bezier(.22,.61,.36,1);
}

*,*::before,*::after{box-sizing:border-box;}
html{scroll-behavior:smooth;}
body{
  margin:0;
  font-family:'Montserrat',system-ui,sans-serif;
  color:var(--ink);
  background:var(--white);
  line-height:1.55;
  -webkit-font-smoothing:antialiased;
  text-rendering:optimizeLegibility;
}
img{display:block;max-width:100%;}
a{color:inherit;text-decoration:none;}
button{font-family:inherit;cursor:pointer;border:none;background:none;}
ul{margin:0;padding:0;list-style:none;}
h1,h2,h3,h4{margin:0;line-height:1.02;letter-spacing:-.02em;font-weight:900;}
p{margin:0;}

/* ---------- Layout ---------- */
.wrap{max-width:var(--wrap);margin:0 auto;padding:0 24px;width:100%;}
.section{padding:86px 0;}
.section--tight{padding:60px 0;}
.bg-navy{background-color:var(--navy);color:#fff;}
.bg-blue{background-color:var(--blue);color:#fff;}
.bg-yellow{background-color:var(--yellow);color:var(--navy);}
.bg-paper{background-color:var(--paper);}
.bg-grid{
  background-image:
    radial-gradient(circle at 1px 1px, rgba(255,255,255,.18) 1.4px, transparent 0);
  background-size:26px 26px;
}

/* ---------- Tipografía utilitaria ---------- */
.kicker{
  display:inline-flex;align-items:center;gap:8px;
  font-size:.78rem;font-weight:800;letter-spacing:.16em;text-transform:uppercase;
}
.kicker::before{content:"";width:26px;height:3px;border-radius:3px;background:currentColor;opacity:.85;}
.display{
  font-weight:900;text-transform:uppercase;line-height:.94;letter-spacing:-.025em;
  font-size:clamp(2.4rem,6vw,4.6rem);
}
.h-sec{
  font-weight:900;text-transform:uppercase;line-height:.98;letter-spacing:-.02em;
  font-size:clamp(1.9rem,4vw,3rem);
}
.lead{font-size:clamp(1.05rem,1.5vw,1.25rem);font-weight:500;line-height:1.6;}
.script{font-family:'Caveat',cursive;font-weight:700;letter-spacing:0;text-transform:none;}

/* Resaltado amarillo estilo marca */
.hl{
  background:var(--yellow);color:var(--navy);
  padding:.02em .28em;border-radius:.28em;
  box-decoration-break:clone;-webkit-box-decoration-break:clone;
}
.hl-navy{background:var(--navy);color:#fff;}
.txt-yellow{color:var(--yellow);}
.txt-blue{color:var(--blue);}

/* Subrayado pincel */
.brush{
  background-image:linear-gradient(var(--yellow),var(--yellow));
  background-repeat:no-repeat;
  background-size:104% .26em;
  background-position:center 90%;
  padding:0 .04em;
}

/* ---------- Botones ---------- */
.btn{
  display:inline-flex;align-items:center;justify-content:center;gap:.55em;
  font-weight:800;font-size:1rem;letter-spacing:.01em;
  padding:15px 28px;border-radius:999px;
  transition:transform .18s var(--ease),box-shadow .18s var(--ease),background .18s,color .18s;
  white-space:nowrap;line-height:1;
}
.btn svg{width:1.15em;height:1.15em;}
.btn:active{transform:translateY(1px) scale(.99);}
.btn--yellow{background:var(--yellow);color:var(--navy);}
.btn--yellow:hover{transform:translateY(-2px);}
.btn--navy{background:var(--navy);color:#fff;}
.btn--navy:hover{transform:translateY(-2px);background:var(--navy-deep);box-shadow:var(--shadow);}
.btn--white{background:#fff;color:var(--navy);box-shadow:var(--shadow-sm);}
.btn--white:hover{transform:translateY(-2px);box-shadow:var(--shadow);}
.btn--wa{background:#25d366;color:#fff;}
.btn--wa:hover{transform:translateY(-2px);box-shadow:0 14px 30px -12px rgba(37,211,102,.8);}
.btn--ghost{background:transparent;color:inherit;box-shadow:inset 0 0 0 2px currentColor;}
.btn--ghost:hover{background:currentColor;}
.btn--ghost:hover span{color:var(--navy);}
.btn--lg{padding:18px 36px;font-size:1.08rem;}
.btn--sm{padding:11px 18px;font-size:.9rem;}
.btn--block{display:flex;width:100%;}

/* ---------- Header ---------- */
.site-header{
  position:sticky;top:0;z-index:90;background:#fff;
  border-bottom:1px solid var(--line);
}
.topbar{
  background:var(--navy);color:#fff;font-size:.82rem;font-weight:600;
  text-align:center;padding:8px 16px;letter-spacing:.02em;
}
.topbar b{color:var(--yellow);}
.header-inner{
  height:var(--header-h);display:flex;align-items:center;gap:24px;
}
.brand{display:flex;align-items:center;gap:12px;flex-shrink:0;}
.brand img{height:46px;width:auto;}
.nav{display:flex;align-items:center;gap:6px;margin-left:8px;}
.nav a{
  padding:10px 16px;border-radius:999px;font-weight:700;font-size:.96rem;color:var(--ink);
  transition:background .15s,color .15s;
}
.nav a:hover{background:var(--paper);}
.nav a.active{background:var(--navy);color:#fff;}
.header-actions{margin-left:auto;display:flex;align-items:center;gap:12px;}

.cart-btn{
  position:relative;display:inline-flex;align-items:center;justify-content:center;
  width:48px;height:48px;border-radius:14px;background:var(--paper);color:var(--navy);
  transition:background .15s,transform .15s;
}
.cart-btn:hover{background:var(--paper-2);transform:translateY(-1px);}
.cart-btn svg{width:24px;height:24px;}
.cart-count{
  position:absolute;top:-6px;right:-6px;min-width:22px;height:22px;padding:0 6px;
  background:var(--yellow);color:var(--navy);border-radius:999px;
  font-size:.74rem;font-weight:900;display:flex;align-items:center;justify-content:center;
  border:2px solid #fff;
}
.menu-toggle{display:none;width:48px;height:48px;border-radius:14px;background:var(--paper);color:var(--navy);align-items:center;justify-content:center;}
.menu-toggle svg{width:26px;height:26px;}

/* Mobile drawer */
.mobile-nav{
  position:fixed;inset:0;z-index:120;background:rgba(2,45,94,.5);
  opacity:0;pointer-events:none;transition:opacity .25s;backdrop-filter:blur(2px);
}
.mobile-nav.open{opacity:1;pointer-events:auto;}
.mobile-nav__panel{
  position:absolute;top:0;right:0;height:100%;width:min(82vw,340px);background:#fff;
  transform:translateX(100%);transition:transform .3s var(--ease);
  display:flex;flex-direction:column;padding:22px;
}
.mobile-nav.open .mobile-nav__panel{transform:none;}
.mobile-nav__panel a{padding:16px 14px;border-radius:14px;font-weight:800;font-size:1.15rem;text-transform:uppercase;}
.mobile-nav__panel a:hover{background:var(--paper);}
.mobile-nav__close{align-self:flex-end;width:44px;height:44px;border-radius:12px;background:var(--paper);color:var(--navy);display:flex;align-items:center;justify-content:center;margin-bottom:8px;}
.mobile-nav__close svg{width:24px;height:24px;}

/* ---------- Hero ---------- */
.hero{position:relative;overflow:hidden;background-color:var(--blue);color:#fff;}
.hero__grid{
  display:grid;grid-template-columns:1.05fr .95fr;gap:48px;align-items:center;
  padding:84px 0 90px;
}
.hero__eyebrow{
  display:inline-flex;align-items:center;gap:10px;background:rgba(255,255,255,.14);
  padding:8px 16px;border-radius:999px;font-weight:800;font-size:.82rem;letter-spacing:.08em;
  text-transform:uppercase;margin-bottom:22px;
}
.hero__eyebrow .dot{width:9px;height:9px;border-radius:50%;background:var(--yellow);box-shadow:0 0 0 4px rgba(255,237,0,.25);}
.hero__intro{display:flex;align-items:center;gap:4px;}
.hero h1{font-size:clamp(2rem,4vw,3.4rem);white-space:nowrap;}
.hero__sub{margin:24px 0 32px;font-size:clamp(1.05rem,1.5vw,1.25rem);font-weight:500;max-width:42ch;color:#eaf4ff;}
.hero__logo{height:clamp(64px,8vw,118px);width:auto;margin-top:8px;margin-left:-12px;display:block;flex:none;}
.hero__sub b{color:#fff;font-weight:800;}
.hero__cta{display:flex;gap:14px;flex-wrap:wrap;}
.hero__stats{display:flex;gap:30px;margin-top:38px;flex-wrap:wrap;}
.hero__stat .n{font-size:2.1rem;font-weight:900;line-height:1;color:var(--yellow);}
.hero__stat .l{font-size:.82rem;font-weight:700;text-transform:uppercase;letter-spacing:.06em;color:#cfe6ff;margin-top:6px;}
.hero__media{position:relative;}
.hero__media image-slot{width:100%;height:480px;display:block;box-shadow:var(--shadow-lg);}
.hero__badge{
  position:absolute;font-family:'Caveat',cursive;font-weight:700;
  background:var(--yellow);color:var(--navy);font-size:1.6rem;line-height:1;
  padding:14px 22px;border-radius:18px;transform:rotate(-6deg);box-shadow:var(--shadow);
}
.hero__badge--tl{top:-18px;left:-18px;}
.hero__badge--br{bottom:-20px;right:-14px;background:var(--yellow);color:var(--navy);transform:rotate(5deg);}

/* ---------- Marquee tira ---------- */
.strip{background:var(--yellow);color:var(--navy);overflow:hidden;padding:14px 0;border-top:3px solid var(--navy);border-bottom:3px solid var(--navy);}
.strip__track{display:flex;gap:46px;white-space:nowrap;width:max-content;animation:scroll 26s linear infinite;}
.strip__track span{font-weight:900;text-transform:uppercase;font-size:1.05rem;letter-spacing:.02em;display:inline-flex;align-items:center;gap:46px;}
.strip__track span::after{content:"✦";color:var(--blue);}
@keyframes scroll{to{transform:translateX(-50%);}}

/* ---------- Section head ---------- */
.sec-head{max-width:680px;margin-bottom:46px;}
.sec-head.center{margin-inline:auto;text-align:center;}
.sec-head .kicker{color:var(--blue);margin-bottom:16px;}
.bg-navy .sec-head .kicker,.bg-blue .sec-head .kicker{color:var(--yellow);}
.sec-head p{margin-top:16px;color:var(--ink-soft);font-size:1.08rem;font-weight:500;}
.bg-navy .sec-head p,.bg-blue .sec-head p{color:#d5e8fc;}

/* ---------- Feature cards (¿Por qué?) ---------- */
.features{display:grid;grid-template-columns:repeat(4,1fr);gap:20px;}
.feature{
  background:#fff;border:1px solid var(--line);border-radius:var(--r-lg);padding:30px 26px;
  transition:transform .2s var(--ease),box-shadow .2s var(--ease),border-color .2s;
}
.feature:hover{transform:translateY(-5px);box-shadow:var(--shadow);border-color:transparent;}
.feature__ic{width:58px;height:58px;border-radius:16px;background:var(--blue);color:#fff;display:flex;align-items:center;justify-content:center;margin-bottom:18px;}
.feature:nth-child(2n) .feature__ic{background:var(--navy);}
.feature:nth-child(3n) .feature__ic{background:var(--yellow);color:var(--navy);}
.feature__ic svg{width:30px;height:30px;}
.feature h3{font-size:1.18rem;text-transform:none;letter-spacing:-.01em;margin-bottom:8px;}
.feature p{color:var(--ink-soft);font-size:.96rem;font-weight:500;}

/* ---------- Category tiles (Compra por categoría) ---------- */
.cat-grid{display:grid;grid-template-columns:repeat(4,1fr);gap:20px;}
.cat-tile{
  position:relative;overflow:hidden;isolation:isolate;
  display:flex;flex-direction:column;
  min-height:280px;padding:28px;border-radius:var(--r-lg);
  text-decoration:none;color:#fff;
  transition:transform .25s var(--ease),box-shadow .25s var(--ease);
}
.cat-tile--blue{background:linear-gradient(160deg,var(--blue) 0%,#0568c4 100%);}
.cat-tile--navy{background:linear-gradient(160deg,var(--navy) 0%,var(--navy-deep) 100%);}
.cat-tile--yellow{background:linear-gradient(160deg,#ffe600 0%,#ffd400 100%);color:var(--navy);}
.cat-tile:hover{transform:translateY(-6px);box-shadow:var(--shadow-lg);}
.cat-tile__n{
  position:absolute;top:20px;right:24px;z-index:0;
  font-size:4.6rem;font-weight:900;line-height:1;letter-spacing:-.04em;
  color:rgba(255,255,255,.16);
}
.cat-tile--yellow .cat-tile__n{color:rgba(1,65,137,.14);}
.cat-tile__ic{
  position:relative;z-index:1;
  width:60px;height:60px;border-radius:16px;
  display:flex;align-items:center;justify-content:center;
  background:rgba(255,255,255,.18);backdrop-filter:blur(2px);
}
.cat-tile--yellow .cat-tile__ic{background:rgba(1,65,137,.12);}
.cat-tile__ic svg{width:30px;height:30px;}
.cat-tile__body{position:relative;z-index:1;margin-top:auto;display:block;}
.cat-tile__t{display:block;font-size:1.5rem;font-weight:900;letter-spacing:-.02em;line-height:1.1;}
.cat-tile__d{display:block;margin-top:6px;font-size:.95rem;font-weight:500;opacity:.85;}
.cat-tile__go{
  position:relative;z-index:1;margin-top:18px;
  display:inline-flex;align-items:center;gap:8px;
  font-size:.82rem;font-weight:800;text-transform:uppercase;letter-spacing:.06em;
  transition:gap .2s var(--ease);
}
.cat-tile__go svg{width:1.1em;height:1.1em;}
.cat-tile:hover .cat-tile__go{gap:14px;}

/* ---------- Steps (cómo funciona) ---------- */
.steps{display:grid;grid-template-columns:repeat(4,1fr);gap:22px;counter-reset:s;}
.step{position:relative;background:rgba(255,255,255,.07);border:1px solid rgba(255,255,255,.16);border-radius:var(--r-lg);padding:34px 28px;}
.step__n{counter-increment:s;font-family:'Caveat',cursive;font-weight:700;font-size:3.4rem;line-height:.8;color:var(--yellow);}
.step__n::before{content:"0" counter(s);}
.step h3{margin:14px 0 10px;font-size:1.3rem;text-transform:uppercase;}
.step p{color:#d5e8fc;font-weight:500;}

/* ---------- Filtros ---------- */
.shop-layout{display:grid;grid-template-columns:1fr;gap:30px;}
.filters{display:flex;flex-wrap:wrap;gap:10px;align-items:center;}
.chip{
  padding:10px 18px;border-radius:999px;background:#fff;border:2px solid var(--line);
  font-weight:700;font-size:.94rem;color:var(--ink);transition:.15s;
}
.chip:hover{border-color:var(--blue);color:var(--blue);}
.chip.active{background:var(--navy);border-color:var(--navy);color:#fff;}
.shop-bar{display:flex;justify-content:space-between;align-items:center;gap:18px;flex-wrap:wrap;margin-bottom:28px;}
.shop-bar .count{font-weight:700;color:var(--ink-soft);font-size:.95rem;}

/* ---------- Product grid + card ---------- */
.products{display:grid;grid-template-columns:repeat(4,1fr);gap:24px;}
.products--3{grid-template-columns:repeat(3,1fr);}
.card{
  background:#fff;border:1px solid var(--line);border-radius:var(--r-lg);overflow:hidden;
  display:flex;flex-direction:column;transition:transform .2s var(--ease),box-shadow .2s var(--ease),border-color .2s;
}
.card:hover{transform:translateY(-6px);box-shadow:var(--shadow-lg);border-color:transparent;}
.card__media{position:relative;aspect-ratio:1/1;background:var(--paper);}
.card__media image-slot{width:100%;height:100%;display:block;}
.card__badge{
  position:absolute;top:12px;left:12px;z-index:2;background:var(--yellow);color:var(--navy);
  font-weight:900;font-size:.72rem;letter-spacing:.05em;text-transform:uppercase;
  padding:6px 11px;border-radius:999px;
}
.card__badge--navy{background:var(--navy);color:#fff;}
.card__fav{position:absolute;top:10px;right:10px;z-index:2;width:38px;height:38px;border-radius:50%;background:rgba(255,255,255,.92);color:var(--navy);display:flex;align-items:center;justify-content:center;box-shadow:var(--shadow-sm);transition:.15s;}
.card__fav:hover{background:#fff;transform:scale(1.08);}
.card__fav svg{width:20px;height:20px;}
.card__body{padding:18px 18px 20px;display:flex;flex-direction:column;flex:1;}
.card__cat{font-size:.74rem;font-weight:800;text-transform:uppercase;letter-spacing:.08em;color:var(--blue);}
.card__title{font-size:1.12rem;font-weight:800;text-transform:none;letter-spacing:-.01em;margin:5px 0 12px;line-height:1.15;}
.card__specs{display:flex;gap:8px;flex-wrap:wrap;margin-bottom:16px;}
.spec{display:inline-flex;align-items:center;gap:5px;font-size:.78rem;font-weight:700;color:var(--ink-soft);background:var(--paper);padding:5px 10px;border-radius:8px;}
.spec svg{width:14px;height:14px;}
.card__foot{margin-top:auto;display:flex;align-items:center;justify-content:space-between;gap:12px;}
.price{display:flex;flex-direction:column;line-height:1;}
.price .now{font-size:1.5rem;font-weight:900;color:var(--navy);}
.price .mxn{font-size:.7rem;font-weight:800;color:var(--ink-soft);letter-spacing:.05em;margin-top:3px;}
.price .was{font-size:.85rem;font-weight:600;color:var(--ink-soft);text-decoration:line-through;}
.add-btn{
  width:50px;height:50px;border-radius:14px;background:var(--navy);color:#fff;
  display:flex;align-items:center;justify-content:center;flex-shrink:0;transition:.18s var(--ease);
}
.add-btn:hover{background:var(--blue);transform:translateY(-2px) scale(1.05);}
.add-btn svg{width:24px;height:24px;}
.add-btn.added{background:#25d366;}

/* ---------- Banner negocio ---------- */
.negocio-grid{display:grid;grid-template-columns:1fr 1fr;gap:48px;align-items:center;}

/* ---------- Polaroid (galería / social) ---------- */
.polaroid{background:#fff;padding:12px 12px 16px;border-radius:8px;box-shadow:var(--shadow);}
.polaroid img{border-radius:4px;width:100%;}
.polaroid .cap{font-family:'Caveat',cursive;font-weight:700;font-size:1.3rem;color:var(--navy);text-align:center;margin-top:8px;}

/* Instagram grid */
.ig-grid{display:grid;grid-template-columns:repeat(4,1fr);gap:18px;}
.ig-card{position:relative;border-radius:var(--r);overflow:hidden;aspect-ratio:1/1;box-shadow:var(--shadow-sm);transition:.2s var(--ease);}
.ig-card:hover{transform:translateY(-4px) rotate(-1deg);box-shadow:var(--shadow-lg);}
.ig-card img{width:100%;height:100%;object-fit:cover;}
.ig-card__tag{position:absolute;bottom:10px;left:10px;display:inline-flex;align-items:center;gap:6px;background:rgba(2,45,94,.78);color:#fff;font-weight:700;font-size:.78rem;padding:6px 10px;border-radius:999px;backdrop-filter:blur(4px);}
.ig-card__tag svg{width:15px;height:15px;}

/* ---------- CTA band ---------- */
.cta-band{position:relative;overflow:hidden;border-radius:var(--r-xl);padding:60px;background-color:var(--navy);color:#fff;text-align:center;}
.cta-band h2{font-size:clamp(2rem,4vw,3.2rem);text-transform:uppercase;}
.cta-band p{margin:18px auto 30px;max-width:46ch;color:#d5e8fc;font-size:1.1rem;font-weight:500;}
.cta-band__cta{display:flex;gap:14px;justify-content:center;flex-wrap:wrap;}

/* ---------- Footer ---------- */
.site-footer{background:var(--navy-deep);color:#cdddf2;padding:64px 0 28px;}
.footer-top{display:grid;grid-template-columns:1.4fr 1fr 1fr 1.2fr;gap:40px;}
.footer-brand img{height:80px;margin-bottom:18px;}
.footer-brand p{font-size:.95rem;font-weight:500;max-width:34ch;}
.footer-col h4{font-size:.82rem;text-transform:uppercase;letter-spacing:.1em;color:var(--yellow);margin-bottom:18px;font-weight:800;}
.footer-col a{display:block;padding:6px 0;font-weight:600;font-size:.96rem;transition:color .15s;}
.footer-col a:hover{color:#fff;}
.footer-soc{display:flex;gap:10px;margin-top:6px;}
.footer-soc a{width:42px;height:42px;border-radius:12px;background:rgba(255,255,255,.1);display:flex;align-items:center;justify-content:center;}
.footer-soc a:hover{background:var(--yellow);color:var(--navy);}
.footer-soc svg{width:22px;height:22px;}
.footer-bottom{margin-top:48px;padding-top:24px;border-top:1px solid rgba(255,255,255,.12);display:flex;justify-content:space-between;gap:16px;flex-wrap:wrap;font-size:.85rem;font-weight:500;}

/* ---------- Page header (subpáginas) ---------- */
.page-head{background-color:var(--navy);color:#fff;padding:54px 0;position:relative;overflow:hidden;}
.page-head .crumbs{font-size:.85rem;font-weight:700;color:#9fc4ec;margin-bottom:14px;}
.page-head .crumbs a:hover{color:#fff;}
.page-head .crumbs span{color:var(--yellow);}
.page-head h1{font-size:clamp(2rem,4.5vw,3.4rem);text-transform:uppercase;}
.page-head p{margin-top:14px;color:#d5e8fc;font-weight:500;max-width:50ch;}

/* ---------- Carrito ---------- */
.cart-layout{display:grid;grid-template-columns:1fr 380px;gap:34px;align-items:start;}
.cart-items{display:flex;flex-direction:column;gap:16px;}
.cart-row{display:grid;grid-template-columns:104px 1fr auto;gap:18px;align-items:center;background:#fff;border:1px solid var(--line);border-radius:var(--r);padding:16px;}
.cart-row__media{width:104px;height:104px;border-radius:12px;overflow:hidden;background:var(--paper);}
.cart-row__media image-slot{width:100%;height:100%;}
.cart-row__info .cat{font-size:.72rem;font-weight:800;text-transform:uppercase;letter-spacing:.07em;color:var(--blue);}
.cart-row__info h3{font-size:1.1rem;font-weight:800;text-transform:none;letter-spacing:-.01em;margin:3px 0 8px;}
.cart-row__specs{display:flex;gap:8px;flex-wrap:wrap;}
.cart-row__right{display:flex;flex-direction:column;align-items:flex-end;gap:12px;}
.cart-row__price{font-size:1.25rem;font-weight:900;color:var(--navy);}
.qty{display:flex;align-items:center;border:2px solid var(--line);border-radius:999px;overflow:hidden;}
.qty button{width:38px;height:38px;font-size:1.3rem;font-weight:800;color:var(--navy);display:flex;align-items:center;justify-content:center;transition:background .15s;}
.qty button:hover{background:var(--paper);}
.qty span{min-width:34px;text-align:center;font-weight:800;}
.cart-remove{font-size:.82rem;font-weight:700;color:var(--ink-soft);display:inline-flex;align-items:center;gap:5px;transition:color .15s;}
.cart-remove:hover{color:#e23b3b;}
.cart-remove svg{width:15px;height:15px;}

.summary{background:#fff;border:1px solid var(--line);border-radius:var(--r-lg);padding:28px;position:sticky;top:96px;box-shadow:var(--shadow-sm);}
.summary h3{font-size:1.3rem;text-transform:uppercase;margin-bottom:20px;}
.summary__row{display:flex;justify-content:space-between;align-items:center;padding:11px 0;font-weight:600;color:var(--ink-soft);}
.summary__row.total{border-top:2px dashed var(--line);margin-top:8px;padding-top:18px;font-size:1.45rem;font-weight:900;color:var(--navy);}
.summary__row.total span:last-child{color:var(--navy);}
.summary .free{color:#1aa251;font-weight:800;}
.promo{display:flex;gap:8px;margin:18px 0;}
.promo input{flex:1;}
.summary .note{font-size:.8rem;color:var(--ink-soft);margin-top:14px;text-align:center;font-weight:500;}

.empty{text-align:center;padding:60px 20px;}
.empty__ic{width:90px;height:90px;border-radius:50%;background:var(--paper);display:flex;align-items:center;justify-content:center;margin:0 auto 22px;color:var(--blue);}
.empty__ic svg{width:46px;height:46px;}

/* ---------- Formularios ---------- */
.field{margin-bottom:18px;}
.field label{display:block;font-weight:800;font-size:.84rem;text-transform:uppercase;letter-spacing:.04em;margin-bottom:8px;color:var(--ink);}
.input,select.input,textarea.input{
  width:100%;padding:14px 16px;border-radius:12px;border:2px solid var(--line);
  font-family:inherit;font-size:1rem;font-weight:600;color:var(--ink);background:#fff;transition:border-color .15s,box-shadow .15s;
}
.input::placeholder{color:#9db3d0;font-weight:500;}
.input:focus{outline:none;border-color:var(--blue);box-shadow:0 0 0 4px rgba(10,136,239,.14);}
textarea.input{resize:vertical;min-height:120px;}
.field-row{display:grid;grid-template-columns:1fr 1fr;gap:16px;}

/* ---------- Checkout ---------- */
.checkout-layout{display:grid;grid-template-columns:1fr 400px;gap:36px;align-items:start;}
.co-block{background:#fff;border:1px solid var(--line);border-radius:var(--r-lg);padding:30px;margin-bottom:24px;}
.co-block__head{display:flex;align-items:center;gap:14px;margin-bottom:22px;}
.co-block__n{width:38px;height:38px;border-radius:50%;background:var(--navy);color:#fff;font-weight:900;display:flex;align-items:center;justify-content:center;flex-shrink:0;}
.co-block__head h3{font-size:1.3rem;text-transform:uppercase;}
.pay-opts{display:flex;flex-direction:column;gap:12px;}
.pay-opt{display:flex;align-items:center;gap:16px;padding:18px 20px;border:2px solid var(--line);border-radius:var(--r);cursor:pointer;transition:.15s;}
.pay-opt:hover{border-color:var(--line-strong);}
.pay-opt.active{border-color:var(--blue);background:rgba(10,136,239,.05);box-shadow:0 0 0 3px rgba(10,136,239,.1);}
.pay-opt__radio{width:22px;height:22px;border-radius:50%;border:2px solid var(--line-strong);flex-shrink:0;display:flex;align-items:center;justify-content:center;transition:.15s;}
.pay-opt.active .pay-opt__radio{border-color:var(--blue);}
.pay-opt.active .pay-opt__radio::after{content:"";width:11px;height:11px;border-radius:50%;background:var(--blue);}
.pay-opt__ic{width:46px;height:46px;border-radius:12px;background:var(--paper);display:flex;align-items:center;justify-content:center;color:var(--navy);flex-shrink:0;}
.pay-opt__ic svg{width:26px;height:26px;}
.pay-opt__txt{flex:1;}
.pay-opt__txt b{display:block;font-size:1.05rem;font-weight:800;}
.pay-opt__txt span{font-size:.88rem;color:var(--ink-soft);font-weight:500;}
.pay-detail{background:var(--paper);border-radius:12px;padding:18px 20px;margin-top:14px;font-size:.92rem;font-weight:500;color:var(--ink-soft);line-height:1.6;}
.pay-detail b{color:var(--ink);}

.co-summary{position:sticky;top:96px;}
.co-line{display:flex;gap:12px;align-items:center;padding:12px 0;border-bottom:1px solid var(--line);}
.co-line__media{width:54px;height:54px;border-radius:10px;overflow:hidden;background:var(--paper);flex-shrink:0;}
.co-line__media image-slot{width:100%;height:100%;}
.co-line__info{flex:1;}
.co-line__info b{font-size:.94rem;font-weight:800;display:block;line-height:1.2;}
.co-line__info span{font-size:.8rem;color:var(--ink-soft);font-weight:600;}
.co-line__price{font-weight:800;color:var(--navy);}

/* ---------- Contacto ---------- */
.contact-layout{display:grid;grid-template-columns:1fr 1fr;gap:40px;align-items:start;}
.contact-hero{display:grid;grid-template-columns:1.02fr .98fr;gap:28px;align-items:stretch;}
.contact-panel{background-color:var(--navy);color:#fff;border-radius:var(--r-xl);padding:42px;display:flex;flex-direction:column;position:relative;overflow:hidden;}
.contact-panel .kicker{color:var(--yellow);}
.contact-panel h2{font-size:clamp(1.7rem,2.8vw,2.3rem);text-transform:uppercase;margin:14px 0 10px;}
.contact-panel .sub{color:#d5e8fc;font-weight:500;margin-bottom:26px;max-width:36ch;}
.wa-cta{display:flex;align-items:center;gap:16px;background:#25d366;color:#fff;border-radius:var(--r);padding:18px 22px;margin-bottom:24px;transition:transform .18s var(--ease),box-shadow .18s var(--ease);}
.wa-cta:hover{transform:translateY(-3px);box-shadow:0 16px 34px -14px rgba(37,211,102,.75);}
.wa-cta__ic{width:50px;height:50px;border-radius:14px;background:rgba(255,255,255,.28);display:flex;align-items:center;justify-content:center;flex-shrink:0;}
.wa-cta__ic svg{width:30px;height:30px;}
.wa-cta b{font-size:1.18rem;display:block;line-height:1.1;}
.wa-cta span{font-size:.88rem;font-weight:700;opacity:.85;}
.contact-tiles{display:grid;grid-template-columns:1fr 1fr;gap:14px;margin-bottom:26px;}
.ctile{background:rgba(255,255,255,.08);border:1px solid rgba(255,255,255,.16);border-radius:var(--r);padding:18px;display:flex;flex-direction:column;gap:9px;}
.ctile__ic{width:42px;height:42px;border-radius:12px;background:rgba(255,255,255,.12);color:var(--yellow);display:flex;align-items:center;justify-content:center;}
.ctile__ic svg{width:22px;height:22px;}
.ctile b{font-size:.96rem;}
.ctile span{font-size:.84rem;color:#cfe0f5;font-weight:500;line-height:1.3;}
.contact-social{margin-top:auto;display:flex;gap:10px;align-items:center;}
.contact-social .lbl{font-size:.82rem;font-weight:700;color:#9fc4ec;margin-right:6px;}
.contact-social a{width:44px;height:44px;border-radius:12px;background:rgba(255,255,255,.1);display:flex;align-items:center;justify-content:center;color:#fff;transition:.15s;}
.contact-social a:hover{background:var(--yellow);color:var(--navy);transform:translateY(-2px);}
.contact-social svg{width:22px;height:22px;}
.form-card{background:#fff;border:1px solid var(--line);border-radius:var(--r-xl);overflow:hidden;box-shadow:var(--shadow);}
.form-card__top{background-color:var(--yellow);color:var(--navy);padding:22px 32px;display:flex;align-items:center;gap:14px;}
.form-card__top .ic{width:46px;height:46px;border-radius:12px;background:var(--navy);color:var(--yellow);display:flex;align-items:center;justify-content:center;flex-shrink:0;}
.form-card__top .ic svg{width:26px;height:26px;}
.form-card__top b{font-size:1.25rem;font-weight:900;text-transform:uppercase;display:block;line-height:1;}
.form-card__top span{font-size:.9rem;font-weight:700;}
.form-card__body{padding:30px 32px 32px;}
.visit{display:grid;grid-template-columns:1.25fr .75fr;border-radius:var(--r-xl);overflow:hidden;border:1px solid var(--line);box-shadow:var(--shadow-sm);}
.visit__map{min-height:330px;background:var(--paper);}
.visit__map image-slot{width:100%;height:100%;}
.visit__info{background-color:var(--blue);color:#fff;padding:40px;display:flex;flex-direction:column;justify-content:center;}
.visit__info .kicker{color:var(--yellow);margin-bottom:14px;}
.visit__info h3{font-size:1.6rem;text-transform:uppercase;margin-bottom:8px;}
.visit__info p{color:#eaf4ff;font-weight:500;margin-bottom:8px;}
.visit__info .btn{margin-top:18px;align-self:flex-start;}

/* ---------- Aviso / notice ---------- */
.notice-box{display:flex;gap:14px;align-items:flex-start;background:#fff8cc;border:2px solid #ffe24d;border-radius:var(--r);padding:16px 18px;margin-top:6px;}
.notice-box svg{width:24px;height:24px;color:#9a7b00;flex-shrink:0;margin-top:1px;}
.notice-box p{font-size:.9rem;font-weight:600;color:#6b5600;line-height:1.5;}
.notice-box b{color:#4d3e00;}
.ship-note{display:flex;gap:10px;align-items:center;flex-wrap:wrap;margin-top:14px;padding:14px 16px;background:var(--paper);border-radius:12px;font-size:.86rem;font-weight:700;color:var(--ink-soft);}
.ship-note svg{width:18px;height:18px;color:var(--blue);}

/* ---------- Tarjetas de política ---------- */
.policy-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:20px;}
.policy{background:#fff;border:1px solid var(--line);border-radius:var(--r-lg);padding:28px 26px;}
.policy__ic{width:52px;height:52px;border-radius:14px;background:var(--navy);color:#fff;display:flex;align-items:center;justify-content:center;margin-bottom:16px;}
.policy:nth-child(2) .policy__ic{background:var(--blue);}
.policy:nth-child(3) .policy__ic{background:var(--yellow);color:var(--navy);}
.policy__ic svg{width:26px;height:26px;}
.policy h3{font-size:1.15rem;text-transform:none;letter-spacing:-.01em;margin-bottom:12px;}
.policy ul{display:flex;flex-direction:column;gap:9px;}
.policy li{display:flex;gap:9px;align-items:flex-start;font-size:.92rem;font-weight:500;color:var(--ink-soft);}
.policy li::before{content:"";width:7px;height:7px;border-radius:50%;background:var(--blue);flex-shrink:0;margin-top:8px;}
@media (max-width:880px){.policy-grid{grid-template-columns:1fr;}}

/* ---------- Toast ---------- */
.toast{
  position:fixed;left:50%;bottom:28px;transform:translateX(-50%) translateY(140%);
  background:var(--navy);color:#fff;padding:14px 22px;border-radius:14px;
  display:flex;align-items:center;gap:12px;font-weight:700;box-shadow:var(--shadow-lg);
  z-index:200;transition:transform .35s var(--ease);max-width:90vw;
}
.toast.show{transform:translateX(-50%) translateY(0);}
.toast svg{width:22px;height:22px;color:var(--yellow);flex-shrink:0;}

/* ---------- Reveal ---------- */
details summary::-webkit-details-marker{display:none;}
details[open] summary span:last-child{transform:rotate(45deg);}
details summary span:last-child{display:inline-block;transition:transform .2s var(--ease);}
.reveal{opacity:0;transform:translateY(22px);transition:opacity .6s var(--ease),transform .6s var(--ease);}
.reveal.in{opacity:1;transform:none;}

/* ---------- Responsive ---------- */
@media (max-width:980px){
  .nav{display:none;}
  .menu-toggle{display:flex;}
  .hero__grid{grid-template-columns:1fr;gap:40px;padding:54px 0 64px;}
  .hero__media{order:-1;margin-top:16px;}
  .hero__badge--tl{top:8px;left:8px;}
  .hero__media image-slot{height:340px;}
  .features{grid-template-columns:repeat(2,1fr);}
  .cat-grid{grid-template-columns:repeat(2,1fr);}
  .products{grid-template-columns:repeat(2,1fr);}
  .ig-grid{grid-template-columns:repeat(2,1fr);}
  .footer-top{grid-template-columns:1fr 1fr;gap:30px;}
  .cart-layout,.checkout-layout,.contact-layout{grid-template-columns:1fr;}
  .contact-hero{grid-template-columns:1fr;}
  .visit{grid-template-columns:1fr;}
  .visit__map{min-height:240px;}
  .summary,.co-summary{position:static;}
  .negocio-grid{grid-template-columns:1fr;gap:34px;}
  .negocio-media{order:-1;}
  .negocio-media image-slot{height:320px !important;}
}
@media (max-width:560px){
  .section{padding:56px 0;}
  .wrap{padding:0 18px;}
  .features,.products,.ig-grid{grid-template-columns:1fr;}
  .cat-grid{grid-template-columns:1fr;}
  .field-row{grid-template-columns:1fr;}
  .steps{grid-template-columns:1fr;}
  .contact-tiles{grid-template-columns:1fr;}
  .contact-panel,.form-card__body,.visit__info{padding:26px;}
  .cart-row{grid-template-columns:80px 1fr;}
  .cart-row__media{width:80px;height:80px;}
  .cart-row__right{grid-column:1/-1;flex-direction:row;justify-content:space-between;align-items:center;}
  .cta-band{padding:40px 24px;}
  .footer-top{grid-template-columns:1fr;}
  .hero__stats{gap:22px;}
}