/* ── ZONAZAP v2 ─────────────────────────────────────────────── */
:root {
  --primary:    #111111;
  --accent:     #FF4B26;
  --white:      #ffffff;
  --gray-50:    #f9fafb;
  --gray-100:   #f3f4f6;
  --gray-200:   #e5e7eb;
  --gray-300:   #d1d5db;
  --gray-400:   #9ca3af;
  --gray-500:   #6b7280;
  --gray-600:   #4b5563;
  --gray-700:   #374151;
  --gray-900:   #111827;
  --success:    #22c55e;
  --warning:    #f59e0b;
  --danger:     #ef4444;
  --info:       #3b82f6;

  --font:         'Inter', system-ui, sans-serif;
  --font-display: 'Bebas Neue', sans-serif;

  --r:   8px;
  --r-lg: 14px;
  --shadow:    0 1px 3px rgba(0,0,0,.08);
  --shadow-md: 0 4px 12px rgba(0,0,0,.10);
  --shadow-lg: 0 10px 30px rgba(0,0,0,.12);

  --container: 1280px;
  --header-h:  64px;
}

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

/* ── LAYOUT ─────────────────────────────────────────────────── */
.container { max-width: var(--container); margin: 0 auto; padding: 0 1.25rem; }
.main-content { min-height: calc(100vh - var(--header-h)); padding-top: var(--header-h); }
.seccion { padding: 3.5rem 0; }
.oculto  { display: none !important; }

/* ── TOPBAR ADMIN ───────────────────────────────────────────── */
.topbar-admin { background: #0a0a0a; color: #fff; font-size: 12px; display: flex; align-items: center; justify-content: space-between; padding: 6px 1.25rem; gap: 1rem; }
.topbar-admin span { color: var(--accent); font-weight: 600; }
.topbar-admin__links { display: flex; gap: .5rem; }
.topbar-admin__links a { color: rgba(255,255,255,.7); padding: 2px 8px; border-radius: 4px; transition: .2s; }
.topbar-admin__links a:hover { color: #fff; }
.topbar-admin__new { background: var(--accent) !important; color: #fff !important; font-weight: 600; }

/* ── HEADER ─────────────────────────────────────────────────── */
.header { position: fixed; top: 0; left: 0; right: 0; z-index: 1000; background: var(--white); border-bottom: 1px solid var(--gray-100); transition: box-shadow .3s; }
.header.scrolled { box-shadow: var(--shadow-md); }
.header__inner { height: var(--header-h); display: flex; align-items: center; gap: 2rem; }
.header__logo { display: flex; align-items: center; }
.logo-text { font-family: var(--font-display); font-size: 26px; letter-spacing: 2px; color: var(--primary); }
.logo-dot  { color: var(--accent); font-family: var(--font-display); font-size: 26px; }
.header__acciones { display: flex; align-items: center; gap: .25rem; margin-left: auto; }
.hbtn { background: none; border: none; padding: 8px; border-radius: 50%; color: var(--gray-700); transition: .2s; position: relative; display: flex; align-items: center; justify-content: center; }
.hbtn:hover { background: var(--gray-100); color: var(--primary); }
.carrito-badge { position: absolute; top: 0; right: 0; background: var(--accent); color: #fff; font-size: 10px; font-weight: 700; min-width: 18px; height: 18px; border-radius: 99px; display: flex; align-items: center; justify-content: center; line-height: 1; }

/* ── USER MENU DROP ─────────────────────────────────────────── */
.user-menu { position: relative; }
.user-menu__drop { position: absolute; top: calc(100% + 8px); right: 0; background: #fff; border: 1px solid var(--gray-200); border-radius: var(--r); box-shadow: var(--shadow-lg); min-width: 180px; padding: .5rem 0; opacity: 0; pointer-events: none; transform: translateY(-6px); transition: .2s; }
.user-menu:hover .user-menu__drop,
.user-menu.activo .user-menu__drop { opacity: 1; pointer-events: auto; transform: translateY(0); }
.user-menu__nombre { padding: .5rem 1rem; font-weight: 600; font-size: 13px; border-bottom: 1px solid var(--gray-100); margin-bottom: .25rem; }
.user-menu__drop a { display: block; padding: .45rem 1rem; font-size: 14px; transition: .15s; }
.user-menu__drop a:hover { background: var(--gray-50); }
.user-menu__salir { color: var(--danger) !important; }

/* ── BOTONES ─────────────────────────────────────────────────── */
.btn { display: inline-flex; align-items: center; justify-content: center; gap: .4rem; padding: .6rem 1.25rem; border-radius: var(--r); font-size: .875rem; font-weight: 600; border: 2px solid transparent; cursor: pointer; transition: .2s; white-space: nowrap; }
.btn--primary   { background: var(--primary); color: #fff; }
.btn--primary:hover { background: #333; }
.btn--accent    { background: var(--accent); color: #fff; }
.btn--accent:hover { background: #e03a1a; }
.btn--outline   { background: transparent; border-color: var(--primary); color: var(--primary); }
.btn--outline:hover { background: var(--primary); color: #fff; }
.btn--ghost     { background: transparent; border-color: var(--gray-300); color: var(--gray-600); }
.btn--ghost:hover { background: var(--gray-100); }
.btn--danger    { background: var(--danger); color: #fff; }
.btn--danger:hover { background: #c53030; }
.btn--sm  { padding: .4rem .9rem; font-size: .8rem; }
.btn--lg  { padding: .8rem 1.75rem; font-size: 1rem; }
.btn--full { width: 100%; }
.btn:disabled { opacity: .5; cursor: not-allowed; }

/* ── FORMULARIOS ─────────────────────────────────────────────── */
.form-grupo { margin-bottom: 1.1rem; }
.form-label { display: block; font-size: .875rem; font-weight: 500; margin-bottom: .35rem; color: var(--gray-700); }
.form-input, .form-select, .form-textarea {
  width: 100%; padding: .6rem .875rem; border: 1.5px solid var(--gray-300);
  border-radius: var(--r); font-size: .9rem; transition: border .2s; background: var(--white);
}
.form-input:focus, .form-select:focus, .form-textarea:focus {
  outline: none; border-color: var(--primary); box-shadow: 0 0 0 3px rgba(17,17,17,.08);
}
.form-input.error { border-color: var(--danger); }
.form-error  { font-size: .8rem; color: var(--danger); margin-top: .25rem; display: none; }
.form-error.visible { display: block; }
.form-fila   { display: grid; grid-template-columns: 1fr 1fr; gap: 1rem; }
.form-textarea { resize: vertical; min-height: 80px; }

/* ── TARJETA DE PRODUCTO ─────────────────────────────────────── */
.prod-grid { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 1.5rem; }
.prod-card { background: #fff; border-radius: var(--r-lg); border: 1px solid var(--gray-100); overflow: hidden; transition: box-shadow .25s, transform .25s; min-width: 0; }
.prod-card:hover { box-shadow: var(--shadow-lg); transform: translateY(-3px); }
.prod-card__media { position: relative; aspect-ratio: 1/1; overflow: hidden; background: var(--gray-50); }
.prod-card__img { width: 100%; height: 100%; object-fit: cover; transition: transform .4s; }
.prod-card:hover .prod-card__img { transform: scale(1.06); }
.prod-card__badges { position: absolute; top: .6rem; left: .6rem; display: flex; flex-direction: column; gap: .3rem; }
.prod-card__body  { padding: 1rem; }
.prod-card__cat   { font-size: .75rem; color: var(--gray-400); text-transform: uppercase; letter-spacing: .5px; }
.prod-card__nombre{ font-weight: 600; font-size: .95rem; margin: .2rem 0 .5rem; color: var(--gray-900); line-height: 1.3; }
.prod-card__nombre:hover { color: var(--accent); }
.prod-card__precio{ display: flex; align-items: center; gap: .5rem; }
.precio-actual  { font-weight: 700; font-size: 1.05rem; }
.precio-original{ font-size: .85rem; color: var(--gray-400); text-decoration: line-through; }
.precio-oferta  { color: var(--accent); font-weight: 700; }
.promo-badge-strip { background: linear-gradient(90deg,#16a34a,#15803d); color:#fff; font-size:.72rem; font-weight:700; text-align:center; padding:.38rem .75rem; letter-spacing:.2px; }
.promo-badge-strip strong { color:#bbf7d0; }
.promo-banner { display:flex; align-items:center; gap:.6rem; background:linear-gradient(90deg,#dcfce7,#bbf7d0); border:1.5px solid #16a34a; border-radius:var(--r); padding:.7rem 1rem; margin:.75rem 0; font-size:.88rem; color:#14532d; }
.promo-banner strong { color:#15803d; }
.promo-banner__cupon { background:#15803d; color:#fff; font-size:.8rem; font-weight:700; padding:.2rem .55rem; border-radius:4px; letter-spacing:.5px; }
.prod-card__btns { padding: .75rem 1rem; border-top: 1px solid var(--gray-100); display: flex; gap: .5rem; }
.btn-add { flex: 1; padding: .5rem; border: 1.5px solid var(--primary); background: transparent; border-radius: var(--r); font-size: .8rem; font-weight: 600; cursor: pointer; transition: .2s; }
.btn-add:hover { background: var(--primary); color: #fff; }
.btn-ver { padding: .5rem .75rem; border: 1.5px solid var(--gray-200); background: transparent; border-radius: var(--r); font-size: .8rem; cursor: pointer; transition: .2s; }
.btn-ver:hover { border-color: var(--gray-400); }

/* ── BADGES ─────────────────────────────────────────────────── */
.badge { display: inline-block; padding: .2rem .55rem; border-radius: 99px; font-size: .72rem; font-weight: 700; text-transform: uppercase; letter-spacing: .4px; }
.badge--oferta   { background: var(--accent); color: #fff; }
.badge--nuevo    { background: #111; color: #fff; }
.badge--agotado  { background: var(--gray-400); color: #fff; }
.badge--success  { background: #dcfce7; color: #166534; }
.badge--warning  { background: #fef9c3; color: #854d0e; }
.badge--danger   { background: #fee2e2; color: #991b1b; }
.badge--info     { background: #dbeafe; color: #1e40af; }
.badge--primary  { background: #e0e7ff; color: #3730a3; }
.badge--secondary{ background: var(--gray-100); color: var(--gray-600); }

/* ── ALERTA ─────────────────────────────────────────────────── */
.alerta { padding: .85rem 1rem; border-radius: var(--r); margin-bottom: 1rem; font-size: .9rem; }
.alerta--success { background: #f0fdf4; color: #166534; border: 1px solid #bbf7d0; }
.alerta--danger  { background: #fef2f2; color: #991b1b; border: 1px solid #fecaca; }
.alerta--warning { background: #fffbeb; color: #92400e; border: 1px solid #fde68a; }
.alerta--info    { background: #eff6ff; color: #1e40af; border: 1px solid #bfdbfe; }

/* ── BREADCRUMB ─────────────────────────────────────────────── */
.breadcrumb { display: flex; align-items: center; gap: .4rem; font-size: .83rem; color: var(--gray-400); margin-bottom: 1.5rem; flex-wrap: wrap; }
.breadcrumb a:hover { color: var(--accent); }
.breadcrumb__sep { color: var(--gray-300); }
.breadcrumb__actual { color: var(--gray-600); font-weight: 500; }

/* ── HERO HOME ─────────────────────────────────────────────── */
.hero { position: relative; height: 520px; overflow: hidden; background: #0a0a0a; }

/* ── SLIDER ─────────────────────────────────────────────────── */
.hero__slide { position: absolute; inset: 0; opacity: 0; transition: opacity .6s ease; pointer-events: none; }
.hero__slide.activo { opacity: 1; pointer-events: auto; }
.hero__bg { position: absolute; inset: 0; background-size: cover; background-position: center; transition: transform 6s ease; }
.hero__slide.activo .hero__bg { transform: scale(1.04); }
.hero__overlay { position: absolute; inset: 0; background: linear-gradient(to right, rgba(0,0,0,.75) 40%, transparent); }
.hero__contenido { position: relative; z-index: 1; height: 100%; display: flex; flex-direction: column; justify-content: center; max-width: 540px; color: #fff; }
.hero__eyebrow { font-size: .8rem; text-transform: uppercase; letter-spacing: 3px; color: var(--accent); margin-bottom: .5rem; }
.hero__titulo  { font-family: var(--font-display); font-size: clamp(2.5rem, 6vw, 4.5rem); line-height: 1.05; letter-spacing: 1px; margin-bottom: .75rem; }
.hero__sub     { font-size: 1rem; color: rgba(255,255,255,.8); margin-bottom: 1.75rem; }
.hero__btns    { display: flex; gap: .75rem; flex-wrap: wrap; }

/* Flechas */
.slider-arrow { position: absolute; top: 50%; transform: translateY(-50%); z-index: 10; background: rgba(255,255,255,.15); border: none; color: #fff; width: 44px; height: 44px; border-radius: 50%; font-size: 1.2rem; cursor: pointer; backdrop-filter: blur(4px); transition: background .2s; display: flex; align-items: center; justify-content: center; }
.slider-arrow:hover { background: rgba(255,255,255,.3); }
.slider-arrow--prev { left: 1.25rem; }
.slider-arrow--next { right: 1.25rem; }

/* Puntos */
.slider-dots { position: absolute; bottom: 1.25rem; left: 50%; transform: translateX(-50%); z-index: 10; display: flex; gap: .5rem; }
.slider-dot { width: 8px; height: 8px; border-radius: 50%; background: rgba(255,255,255,.4); border: none; cursor: pointer; transition: all .2s; padding: 0; }
.slider-dot.activo { background: #fff; width: 24px; border-radius: 4px; }

/* ── SECCIÓN TÍTULO ─────────────────────────────────────────── */
.sec-header { display: flex; justify-content: space-between; align-items: flex-end; margin-bottom: 1.75rem; }
.sec-titulo { font-family: var(--font-display); font-size: 2rem; letter-spacing: 1px; }
.sec-ver-todo { font-size: .85rem; font-weight: 600; color: var(--accent); }
.sec-ver-todo:hover { text-decoration: underline; }

/* ── CATEGORÍAS GRID ─────────────────────────────────────────── */
.cats-grid { display: grid; grid-template-columns: repeat(5, 1fr); gap: 1rem; }
.cat-card  { position: relative; border-radius: var(--r-lg); overflow: hidden; aspect-ratio: 3/4; display: block; }
.cat-card__img { width: 100%; height: 100%; object-fit: cover; transition: transform .4s; }
.cat-card:hover .cat-card__img { transform: scale(1.06); }
.cat-card__over { position: absolute; inset: 0; background: linear-gradient(to top, rgba(0,0,0,.75) 40%, transparent); display: flex; flex-direction: column; justify-content: flex-end; padding: 1rem; color: #fff; }
.cat-card__nombre { font-family: var(--font-display); font-size: 1.5rem; letter-spacing: 1px; }
.cat-card__count  { font-size: .78rem; color: rgba(255,255,255,.7); }

/* ── NEWSLETTER BANNER (home) ───────────────────────────────── */
.newsletter-banner {
  background: linear-gradient(135deg, var(--accent) 0%, #d93d1a 100%);
  color: #fff;
  padding: 4rem 0;
  position: relative;
  overflow: hidden;
}
.newsletter-banner::before {
  content: 'ZONAZAP.';
  position: absolute;
  right: -1rem;
  top: 50%;
  transform: translateY(-50%);
  font-family: var(--font-display);
  font-size: 10rem;
  color: rgba(255,255,255,.06);
  letter-spacing: 4px;
  white-space: nowrap;
  pointer-events: none;
  user-select: none;
}
.newsletter-banner__inner { display: flex; align-items: center; justify-content: space-between; gap: 2rem; flex-wrap: wrap; position: relative; z-index: 1; }
.newsletter-banner__eyebrow { font-size: .78rem; font-weight: 700; letter-spacing: 2px; text-transform: uppercase; color: rgba(255,255,255,.7); margin-bottom: .4rem; }
.newsletter-banner__titulo { font-family: var(--font-display); font-size: 3.2rem; letter-spacing: 2px; line-height: 1; text-transform: uppercase; }
.newsletter-banner__sub { color: rgba(255,255,255,.82); font-size: .92rem; margin-top: .5rem; max-width: 380px; }
.newsletter-banner__form { display: flex; gap: .5rem; flex-wrap: wrap; flex: 1; max-width: 480px; }
.newsletter-banner__input { flex: 1; min-width: 200px; padding: .75rem 1rem; border-radius: var(--r); border: none; font-size: .9rem; box-shadow: 0 2px 8px rgba(0,0,0,.15); }
.newsletter-banner__input:focus { outline: 3px solid rgba(255,255,255,.5); }
.newsletter-banner__form .btn { background: #fff; color: var(--accent); font-weight: 700; padding: .75rem 1.75rem; border: none; box-shadow: 0 2px 8px rgba(0,0,0,.2); }
.newsletter-banner__form .btn:hover { background: #f1f5f9; transform: translateY(-1px); }
.newsletter-banner__nombre { flex: 0 0 160px; }
.newsletter-resp { margin-top: .75rem; font-size: .85rem; }

/* ── NEWSLETTER FOOTER ──────────────────────────────────────── */
.newsletter-footer { background: linear-gradient(135deg, var(--accent) 0%, #d93d1a 100%); color: #fff; padding: 2.5rem 0; position: relative; overflow: hidden; }
.newsletter-footer::before { content: 'ZONAZAP.'; position: absolute; right: -1rem; top: 50%; transform: translateY(-50%); font-family: var(--font-display); font-size: 7rem; color: rgba(255,255,255,.07); letter-spacing: 4px; white-space: nowrap; pointer-events: none; }
.newsletter-footer__inner { display: flex; align-items: center; justify-content: space-between; gap: 2rem; flex-wrap: wrap; position: relative; z-index: 1; }
.newsletter-footer__texto h3 { font-family: var(--font-display); font-size: 2.2rem; letter-spacing: 2px; text-transform: uppercase; line-height: 1; margin-bottom: .3rem; }
.newsletter-footer__texto p  { font-size: .88rem; color: rgba(255,255,255,.8); }
.newsletter-footer__form { display: flex; gap: .5rem; }
.newsletter-footer__input { padding: .65rem 1rem; border-radius: var(--r); border: none; background: rgba(255,255,255,.15); color: #fff; font-size: .88rem; min-width: 220px; backdrop-filter: blur(4px); }
.newsletter-footer__input::placeholder { color: rgba(255,255,255,.55); }
.newsletter-footer__input:focus { outline: 2px solid rgba(255,255,255,.5); background: rgba(255,255,255,.2); }
.newsletter-footer__form .btn--primary { background: #fff; color: var(--accent); font-weight: 700; border: none; }
.newsletter-footer__form .btn--primary:hover { background: #f1f5f9; }
.newsletter-footer__msg { font-size: .85rem; margin-top: .5rem; position: relative; z-index: 1; }

/* ── FAVORITOS ───────────────────────────────────────────────── */
.fav-btn {
  position:absolute; top:.5rem; right:.5rem;
  width:34px; height:34px;
  border:none; background:rgba(255,255,255,.92);
  border-radius:50%; cursor:pointer;
  display:flex; align-items:center; justify-content:center;
  box-shadow:0 1px 6px rgba(0,0,0,.14);
  transition:transform .15s, background .15s;
  z-index:3;
}
.fav-btn:hover { transform:scale(1.15); background:#fff; }
.fav-btn.activo svg { fill:var(--accent); stroke:var(--accent); }

.fav-btn-detail {
  width:46px; height:46px; flex-shrink:0;
  border:1.5px solid var(--gray-200); background:#fff;
  border-radius:var(--r); cursor:pointer;
  display:flex; align-items:center; justify-content:center;
  transition:border-color .15s, transform .15s;
}
.fav-btn-detail:hover { border-color:var(--accent); transform:scale(1.05); }
.fav-btn-detail.activo { border-color:var(--accent); background:#fff5f3; }
.fav-btn-detail.activo svg { fill:var(--accent); stroke:var(--accent); }

.fav-nav-btn { position:relative; }
.fav-nav-badge {
  position:absolute; top:-5px; right:-5px;
  background:var(--accent); color:#fff;
  font-size:.6rem; font-weight:700;
  min-width:17px; height:17px;
  border-radius:9px;
  display:flex; align-items:center; justify-content:center;
  padding:0 4px; border:2px solid #fff;
}

/* ── QUICK ADD MODAL ─────────────────────────────────────────── */
@keyframes shake { 0%,100%{transform:translateX(0)} 25%{transform:translateX(-5px)} 75%{transform:translateX(5px)} }
.shake { animation:shake .35s ease; }

.qa-overlay { position:fixed;inset:0;background:rgba(0,0,0,.45);z-index:850;opacity:0;pointer-events:none;transition:opacity .25s; }
.qa-overlay.open { opacity:1;pointer-events:all; }

.qa-modal {
  position:fixed; left:50%; bottom:0;
  transform:translateX(-50%) translateY(100%);
  width:420px; max-width:100vw;
  background:#fff; border-radius:20px 20px 0 0;
  z-index:851;
  transition:transform .32s cubic-bezier(.4,0,.2,1);
}
.qa-modal.open { transform:translateX(-50%) translateY(0); }

@media(min-width:600px){
  .qa-modal {
    bottom:auto; top:50%;
    transform:translate(-50%,-50%) scale(.94);
    border-radius:var(--r-lg);
    opacity:0; pointer-events:none;
    transition:transform .25s,opacity .25s;
  }
  .qa-modal.open { transform:translate(-50%,-50%) scale(1);opacity:1;pointer-events:all; }
}

.qa-header { display:flex;align-items:flex-start;justify-content:space-between;gap:.75rem;padding:1.25rem 1.25rem .75rem;border-bottom:1px solid var(--gray-200); }
.qa-nombre { font-weight:700;font-size:.95rem;line-height:1.4;flex:1; }
.qa-body { padding:1.1rem 1.25rem; }
.qa-label { font-size:.8rem;font-weight:700;text-transform:uppercase;letter-spacing:.5px;color:var(--gray-500);margin-bottom:.5rem; }
.qa-footer { padding:.75rem 1.25rem 1.25rem;padding-bottom:calc(1.25rem + env(safe-area-inset-bottom)); }

/* ── CART DRAWER ─────────────────────────────────────────────── */
.drawer-overlay { position:fixed;inset:0;background:rgba(0,0,0,.45);z-index:800;opacity:0;pointer-events:none;transition:opacity .3s; }
.drawer-overlay.open { opacity:1;pointer-events:all; }
.carrito-drawer { position:fixed;top:0;right:0;width:400px;max-width:100vw;height:100vh;height:100dvh;background:#fff;z-index:801;transform:translateX(105%);transition:transform .35s cubic-bezier(.4,0,.2,1);display:flex;flex-direction:column;box-shadow:-4px 0 32px rgba(0,0,0,.14); }
.carrito-drawer.open { transform:translateX(0); }
.drawer-header { display:flex;align-items:center;justify-content:space-between;padding:1.25rem 1.25rem 1rem;border-bottom:1px solid var(--gray-200);flex-shrink:0; }
.drawer-header__titulo { font-weight:700;font-size:1rem;display:flex;align-items:center;gap:.5rem; }
.drawer-header__count { background:var(--accent);color:#fff;font-size:.7rem;font-weight:700;min-width:20px;height:20px;border-radius:10px;display:inline-flex;align-items:center;justify-content:center;padding:0 5px; }
.drawer-close { width:32px;height:32px;border:none;background:var(--gray-100);border-radius:50%;cursor:pointer;font-size:1rem;display:flex;align-items:center;justify-content:center;transition:.15s;flex-shrink:0; }
.drawer-close:hover { background:var(--gray-200); }
.drawer-body { flex:1;overflow-y:auto;padding:1rem 1.25rem; }
.drawer-empty { text-align:center;padding:3rem 1rem; }
.drawer-empty__icon { font-size:3rem;margin-bottom:.75rem; }
.drawer-empty__msg { color:var(--gray-500);margin-bottom:1.25rem;font-size:.9rem; }
.drawer-item { display:grid;grid-template-columns:72px 1fr auto;gap:.75rem;align-items:start;padding:.85rem 0;border-bottom:1px solid var(--gray-100); }
.drawer-item:last-child { border-bottom:none; }
.drawer-item__img { width:72px;height:72px;object-fit:cover;border-radius:var(--r);background:var(--gray-100); }
.drawer-item__nombre { font-weight:600;font-size:.87rem;line-height:1.3;margin-bottom:.2rem; }
.drawer-item__talla { font-size:.75rem;color:var(--gray-400);margin-bottom:.25rem; }
.drawer-item__precio { font-size:.8rem;color:var(--gray-600);margin-bottom:.4rem; }
.drawer-item__ctrl { display:flex;align-items:center;gap:.3rem; }
.drawer-qty { width:26px;height:26px;border:1px solid var(--gray-200);background:#fff;border-radius:4px;cursor:pointer;font-size:.9rem;display:flex;align-items:center;justify-content:center;transition:.1s; }
.drawer-qty:hover { background:var(--gray-100); }
.drawer-qty__val { min-width:22px;text-align:center;font-size:.87rem;font-weight:600; }
.drawer-item__del { background:none;border:none;cursor:pointer;color:var(--gray-400);font-size:.78rem;padding:.2rem .3rem;border-radius:3px;margin-left:.15rem;transition:.1s; }
.drawer-item__del:hover { color:var(--danger);background:#fee2e2; }
.drawer-item__sub { font-weight:700;font-size:.88rem;white-space:nowrap;padding-top:.1rem; }
.drawer-footer { padding:1rem 1.25rem;border-top:1px solid var(--gray-200);background:var(--gray-50);flex-shrink:0; }
.drawer-subtotal { display:flex;justify-content:space-between;font-weight:700;font-size:1rem;margin-bottom:.4rem; }
.drawer-envio-msg { font-size:.75rem;color:var(--gray-500);text-align:center;margin-bottom:.75rem; }
.drawer-envio-msg.gratis { color:var(--success);font-weight:600; }

/* ── FOOTER ─────────────────────────────────────────────────── */
.footer { background: #0a0a0a; color: rgba(255,255,255,.7); padding: 2.5rem 0 1.5rem; }
.footer__grid   { display: grid; grid-template-columns: 2fr 1fr 1fr 1fr; gap: 2rem; margin-bottom: 2rem; }
.footer__logo   { font-family: var(--font-display); font-size: 1.6rem; letter-spacing: 2px; color: #fff; margin-bottom: .5rem; }
.footer__logo span { color: var(--accent); }
.footer__tagline{ font-size: .83rem; color: rgba(255,255,255,.5); margin-bottom: .9rem; }
.footer__redes  { display: flex; gap: .6rem; }
.footer__red    { display: flex; align-items: center; justify-content: center; width: 36px; height: 36px; border-radius: 8px; background: rgba(255,255,255,.08); color: rgba(255,255,255,.6); transition: .2s; }
.footer__red:hover { background: var(--accent); color: #fff; transform: translateY(-2px); }
.footer__titulo { font-size: .8rem; text-transform: uppercase; letter-spacing: 1px; color: rgba(255,255,255,.4); margin-bottom: .75rem; }
.footer__menu li{ margin-bottom: .4rem; font-size: .88rem; }
.footer__menu a:hover { color: #fff; }
.footer__bottom { border-top: 1px solid rgba(255,255,255,.08); padding-top: 1.25rem; font-size: .8rem; text-align: center; color: rgba(255,255,255,.3); }

/* ── SHOP LAYOUT (filtros + grid) ───────────────────────────── */
.shop-layout { display: grid; grid-template-columns: 240px 1fr; gap: 2rem; padding: 2rem 0 4rem; }
.filtros-panel { background: #fff; border: 1px solid var(--gray-200); border-radius: var(--r-lg); padding: 1.25rem; position: sticky; top: calc(var(--header-h) + 1rem); max-height: calc(100vh - var(--header-h) - 2rem); overflow-y: auto; }
.filtros-titulo { font-weight: 700; font-size: .95rem; margin-bottom: 1rem; display: flex; justify-content: space-between; }
.filtros-limpiar { font-size: .8rem; color: var(--accent); cursor: pointer; font-weight: 400; }
.filtro-grupo   { margin-bottom: 1.25rem; padding-bottom: 1.25rem; border-bottom: 1px solid var(--gray-100); }
.filtro-grupo:last-child { border: none; margin: 0; padding: 0; }
.filtro-grupo__titulo { font-size: .82rem; font-weight: 600; text-transform: uppercase; letter-spacing: .5px; color: var(--gray-500); margin-bottom: .65rem; }
.filtro-check { display: flex; align-items: center; gap: .5rem; font-size: .88rem; cursor: pointer; margin-bottom: .35rem; }
.filtro-check input[type=checkbox],
.filtro-check input[type=radio] { width: 16px; height: 16px; cursor: pointer; accent-color: var(--primary); }
.precio-range { width: 100%; accent-color: var(--primary); margin: .5rem 0; }
.precio-vals  { display: flex; justify-content: space-between; font-size: .8rem; color: var(--gray-500); }
.tallas-grid  { display: flex; flex-wrap: wrap; gap: .35rem; }
.talla-btn    { padding: .25rem .55rem; border: 1.5px solid var(--gray-200); border-radius: 5px; font-size: .8rem; cursor: pointer; transition: .15s; background: none; }
.talla-btn:hover, .talla-btn.activo { border-color: var(--primary); background: var(--primary); color: #fff; }

.toolbar { display: flex; justify-content: space-between; align-items: center; margin-bottom: 1.25rem; flex-wrap: wrap; gap: .75rem; }
.toolbar__total { font-size: .9rem; color: var(--gray-500); }
.toolbar__sort  { padding: .45rem .8rem; border: 1.5px solid var(--gray-200); border-radius: var(--r); font-size: .85rem; cursor: pointer; background: #fff; }

/* ── PÁGINA PRODUCTO ─────────────────────────────────────────── */
.producto-layout { display: grid; grid-template-columns: 1fr 1fr; gap: 3rem; padding: 2rem 0 4rem; }
.galeria__principal { aspect-ratio: 1/1; border-radius: var(--r-lg); overflow: hidden; background: var(--gray-50); }
.galeria__principal img { width: 100%; height: 100%; object-fit: cover; }
.galeria__thumbs { display: flex; gap: .5rem; margin-top: .75rem; flex-wrap: wrap; }
.galeria__thumb  { width: 64px; height: 64px; border-radius: var(--r); overflow: hidden; border: 2px solid transparent; cursor: pointer; transition: .15s; }
.galeria__thumb.activo, .galeria__thumb:hover { border-color: var(--primary); }
.galeria__thumb img { width: 100%; height: 100%; object-fit: cover; }
.prod-sumario__cat   { font-size: .78rem; text-transform: uppercase; letter-spacing: 1px; color: var(--accent); }
.prod-sumario__nombre{ font-family: var(--font-display); font-size: 2.2rem; letter-spacing: 1px; margin: .3rem 0 .6rem; }
.prod-sumario__precio{ font-size: 1.6rem; font-weight: 700; margin-bottom: 1rem; display: flex; align-items: center; gap: .75rem; }
.prod-sumario__precio .precio-original { font-size: 1.1rem; }
.prod-sumario__desc  { font-size: .9rem; color: var(--gray-500); line-height: 1.7; margin-bottom: 1.25rem; }
.tallas-selector { margin-bottom: 1.25rem; }
.tallas-selector__label { font-size: .85rem; font-weight: 600; margin-bottom: .6rem; display: flex; justify-content: space-between; }
.tallas-selector__label span { font-weight: 400; color: var(--gray-500); }
.tallas-group { display: flex; flex-wrap: wrap; gap: .4rem; }
.talla-opt  { padding: .4rem .8rem; border: 1.5px solid var(--gray-200); border-radius: var(--r); font-size: .9rem; cursor: pointer; transition: .15s; background: #fff; }
.talla-opt:hover { border-color: var(--primary); }
.talla-opt.activa { border-color: var(--primary); background: var(--primary); color: #fff; }
.talla-opt.agotada { opacity: .35; cursor: not-allowed; text-decoration: line-through; }
.atc-fila { display: flex; gap: .75rem; margin-bottom: 1rem; }
.qty-ctrl  { display: flex; align-items: center; border: 1.5px solid var(--gray-200); border-radius: var(--r); overflow: hidden; }
.qty-btn   { width: 36px; height: 44px; border: none; background: none; font-size: 1.1rem; cursor: pointer; }
.qty-btn:hover { background: var(--gray-100); }
.qty-input { width: 44px; height: 44px; border: none; text-align: center; font-size: .95rem; font-weight: 600; }
.prod-trust { display: flex; flex-wrap: wrap; gap: .5rem .75rem; margin-top: 1rem; padding-top: 1rem; border-top: 1px solid var(--gray-100); }
.prod-trust__item { font-size: .8rem; color: var(--gray-500); }

/* ── CARRITO ─────────────────────────────────────────────────── */
.carrito-layout { display: grid; grid-template-columns: 1fr 340px; gap: 2rem; padding: 2rem 0 4rem; }
.carrito-tabla-wrap { width: 100%; }
.carrito-tabla { width: 100%; border-collapse: collapse; }
.carrito-tabla thead { display: table-header-group; }

/* ── CARRITO MÓVIL: tarjetas en vez de tabla ── */
@media (max-width: 640px) {
  .carrito-tabla thead { display: none; }
  .carrito-tabla tbody tr {
    display: flex; flex-wrap: wrap; gap: .5rem;
    padding: .75rem 0; border-bottom: 1px solid var(--gray-100);
    align-items: center;
  }
  .carrito-tabla td { border: none; padding: 0; }
  .carrito-tabla td:nth-child(1) { flex-shrink: 0; }
  .carrito-tabla td:nth-child(2) { flex: 1; min-width: 0; }
  .carrito-tabla td:nth-child(3) { font-size: .82rem; color: var(--gray-500); width: 100%; padding-left: 80px; }
  .carrito-tabla td:nth-child(4) { width: 100%; padding-left: 80px; }
  .carrito-tabla td:nth-child(5) { width: 100%; padding-left: 80px; font-weight: 700; font-size: .95rem; color: var(--accent); }
  .mob-label { display: inline !important; }
}
.carrito-tabla th { padding: .65rem .75rem; text-align: left; font-size: .78rem; text-transform: uppercase; letter-spacing: .5px; color: var(--gray-500); border-bottom: 1px solid var(--gray-200); }
.carrito-tabla td { padding: .75rem; vertical-align: middle; border-bottom: 1px solid var(--gray-100); }
.carrito-prod { display: flex; align-items: center; gap: .75rem; }
.carrito-prod__img { width: 72px; height: 72px; object-fit: cover; border-radius: var(--r); border: 1px solid var(--gray-100); flex-shrink: 0; }
.carrito-prod__nombre { font-weight: 600; font-size: .88rem; }
.carrito-prod__meta   { font-size: .78rem; color: var(--gray-400); }
.carrito-prod__eliminar { font-size: .78rem; color: var(--danger); cursor: pointer; background: none; border: none; margin-top: .2rem; }
.carrito-resumen { background: var(--gray-50); border-radius: var(--r-lg); padding: 1.5rem; position: sticky; top: calc(var(--header-h) + 1rem); }
.carrito-resumen__titulo { font-weight: 700; font-size: 1rem; margin-bottom: 1rem; }
.resumen-fila { display: flex; justify-content: space-between; font-size: .9rem; margin-bottom: .6rem; }
.resumen-fila--total { font-weight: 700; font-size: 1.05rem; border-top: 1px solid var(--gray-200); padding-top: .75rem; margin-top: .5rem; }
.cupon-form  { display: flex; gap: .5rem; margin: 1rem 0; }
.cupon-input { flex: 1; }

/* ── CHECKOUT ─────────────────────────────────────────────────── */
.checkout-layout { display: grid; grid-template-columns: 1fr 380px; gap: 2rem; padding: 2rem 0 4rem; }
.checkout-seccion { background: #fff; border: 1px solid var(--gray-200); border-radius: var(--r-lg); padding: 1.5rem; margin-bottom: 1.25rem; }
.checkout-seccion__titulo { font-weight: 700; font-size: 1rem; margin-bottom: 1.1rem; display: flex; align-items: center; gap: .5rem; }
.metodo-pago label { display: flex; align-items: flex-start; gap: .75rem; padding: .75rem; border: 1.5px solid var(--gray-200); border-radius: var(--r); cursor: pointer; margin-bottom: .5rem; transition: .15s; }
.metodo-pago label:has(input:checked) { border-color: var(--primary); background: var(--gray-50); }
.metodo-pago__titulo { font-weight: 600; font-size: .9rem; }
.metodo-pago__desc   { font-size: .8rem; color: var(--gray-500); }

/* ── AUTH ────────────────────────────────────────────────────── */
.auth-page { display: grid; grid-template-columns: 1fr 1fr; min-height: 100vh; }
.auth-visual { position: relative; background: #0a0a0a; }
.auth-visual__img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; opacity: .5; }
.auth-visual__contenido { position: relative; z-index: 1; padding: 3rem; height: 100%; display: flex; flex-direction: column; justify-content: flex-end; color: #fff; }
.auth-visual__logo { font-family: var(--font-display); font-size: 2.5rem; letter-spacing: 3px; margin-bottom: 1rem; }
.auth-visual__logo span { color: var(--accent); }
.auth-visual__tagline { font-size: 1.1rem; color: rgba(255,255,255,.8); }
.auth-panel { display: flex; align-items: center; justify-content: center; padding: 3rem 2rem; }
.auth-panel__inner { width: 100%; max-width: 420px; }
.auth-tabs { display: flex; gap: 0; margin-bottom: 2rem; border-bottom: 2px solid var(--gray-100); }
.auth-tab  { padding: .6rem 1.25rem; font-weight: 600; font-size: .9rem; color: var(--gray-400); border-bottom: 2px solid transparent; margin-bottom: -2px; cursor: pointer; transition: .2s; text-decoration: none; }
.auth-tab.activo, .auth-tab:hover { color: var(--primary); border-bottom-color: var(--primary); }
.auth-titulo  { font-family: var(--font-display); font-size: 1.9rem; letter-spacing: 1px; margin-bottom: .3rem; }
.auth-sub     { font-size: .9rem; color: var(--gray-500); margin-bottom: 1.5rem; }

/* ── MI CUENTA ───────────────────────────────────────────────── */
.cuenta-layout { display: grid; grid-template-columns: 220px 1fr; gap: 2rem; padding: 2rem 0 4rem; }
.cuenta-sidebar { background: #fff; border: 1px solid var(--gray-200); border-radius: var(--r-lg); padding: 1.5rem; height: fit-content; position: sticky; top: calc(var(--header-h) + 1rem); }
.cuenta-sidebar__usuario { text-align: center; margin-bottom: 1.5rem; padding-bottom: 1.5rem; border-bottom: 1px solid var(--gray-100); }
.cuenta-sidebar__avatar { width: 56px; height: 56px; border-radius: 50%; background: var(--primary); color: #fff; font-family: var(--font-display); font-size: 1.5rem; display: flex; align-items: center; justify-content: center; margin: 0 auto .6rem; }
.cuenta-sidebar__nombre { font-weight: 700; font-size: .95rem; }
.cuenta-nav a { display: block; padding: .55rem .75rem; border-radius: var(--r); font-size: .88rem; color: var(--gray-600); transition: .15s; margin-bottom: .15rem; }
.cuenta-nav a:hover, .cuenta-nav a.activo { background: var(--gray-50); color: var(--primary); font-weight: 600; }
.cuenta-nav a.salir { color: var(--danger); margin-top: .5rem; }
.cuenta-contenido { background: #fff; border: 1px solid var(--gray-200); border-radius: var(--r-lg); padding: 1.75rem; }
.cuenta-titulo { font-family: var(--font-display); font-size: 1.6rem; letter-spacing: 1px; margin-bottom: 1.25rem; }
.pedidos-tabla { width: 100%; border-collapse: collapse; }
.pedidos-tabla th, .pedidos-tabla td { padding: .65rem .75rem; text-align: left; border-bottom: 1px solid var(--gray-100); font-size: .88rem; }
.pedidos-tabla th { font-size: .78rem; text-transform: uppercase; letter-spacing: .5px; color: var(--gray-400); }

/* ── GRACIAS ─────────────────────────────────────────────────── */
.gracias-page { max-width: 640px; margin: 0 auto; text-align: center; padding: 4rem 1rem; }
.gracias-icon { font-size: 4rem; margin-bottom: 1rem; }
.gracias-titulo { font-family: var(--font-display); font-size: 2.2rem; margin-bottom: .75rem; }
.gracias-sub    { color: var(--gray-500); margin-bottom: 2rem; }
.pedido-resumen { text-align: left; background: var(--gray-50); border-radius: var(--r-lg); padding: 1.5rem; margin-bottom: 2rem; }
.pedido-resumen h3 { font-weight: 700; margin-bottom: 1rem; }
.pedido-fila { display: flex; justify-content: space-between; font-size: .9rem; margin-bottom: .5rem; }
.pedido-fila--total { font-weight: 700; border-top: 1px solid var(--gray-200); padding-top: .6rem; margin-top: .4rem; }

/* ── PAGINACIÓN ─────────────────────────────────────────────── */
.paginacion { display: flex; gap: .4rem; justify-content: center; margin-top: 2.5rem; flex-wrap: wrap; }
.paginacion__item { padding: .45rem .8rem; border: 1.5px solid var(--gray-200); border-radius: var(--r); font-size: .85rem; transition: .15s; }
.paginacion__item:hover { border-color: var(--primary); }
.paginacion__item.activo { background: var(--primary); color: #fff; border-color: var(--primary); }

/* ── TOAST ───────────────────────────────────────────────────── */
#toast-container { position: fixed; bottom: 1.5rem; right: 1.5rem; z-index: 9999; display: flex; flex-direction: column; gap: .5rem; }
.toast { padding: .75rem 1.1rem; border-radius: var(--r); font-size: .875rem; font-weight: 500; box-shadow: var(--shadow-lg); transition: opacity .4s; max-width: 320px; }
.toast--success { background: #111; color: #fff; }
.toast--error   { background: var(--danger); color: #fff; }
.toast--info    { background: var(--info); color: #fff; }

/* ── 404 ────────────────────────────────────────────────────── */
.pagina-404 { min-height: 70vh; display: flex; align-items: center; justify-content: center; text-align: center; }
.pagina-404__num { font-family: var(--font-display); font-size: clamp(5rem, 20vw, 12rem); line-height: 1; color: var(--gray-100); }
.pagina-404__titulo { font-family: var(--font-display); font-size: 2rem; margin-top: -.5rem; }
.pagina-404__sub { color: var(--gray-500); margin: .75rem 0 1.5rem; }

/* ── UTILS ───────────────────────────────────────────────────── */
.texto-exito { color: var(--success); }
.texto-error { color: var(--danger); }
.text-center { text-align: center; }
.mt-1 { margin-top: .5rem; } .mt-2 { margin-top: 1rem; } .mt-3 { margin-top: 1.5rem; } .mt-4 { margin-top: 2rem; }
.mb-1 { margin-bottom: .5rem; } .mb-2 { margin-bottom: 1rem; } .mb-3 { margin-bottom: 1.5rem; }
.flex-center { display: flex; align-items: center; justify-content: center; }
.flex-between { display: flex; align-items: center; justify-content: space-between; }
.gap-1 { gap: .5rem; } .gap-2 { gap: 1rem; }

/* ── RESPONSIVE ─────────────────────────────────────────────── */
@media (max-width: 1024px) {
  .prod-grid  { grid-template-columns: repeat(3, minmax(0, 1fr)); }
  .cats-grid  { grid-template-columns: repeat(3, 1fr); }
  .footer__grid { grid-template-columns: 1fr 1fr; }
}
@media (max-width: 768px) {
  .main-content { padding-top: var(--header-h); }
  .hero { height: 380px; }
  .auth-page { grid-template-columns: 1fr; }
  .auth-visual { display: none; }
  .auth-panel { padding: 2rem 1.25rem; min-height: 100vh; }
  .shop-layout { grid-template-columns: 1fr; }
  .filtros-panel { position: static; display: none; }
  .filtros-panel.visible { display: block; }
  .producto-layout { grid-template-columns: 1fr; }
  .carrito-layout { grid-template-columns: 1fr; }
  .checkout-layout { grid-template-columns: 1fr; }
  .cuenta-layout { grid-template-columns: 1fr; }
  .cuenta-sidebar { position: static; }
  .cats-grid { grid-template-columns: repeat(2, 1fr); }
  .form-fila { grid-template-columns: 1fr; }
  .hamburguesa { display: flex !important; }
  .newsletter-banner__inner { flex-direction: column; }
  .newsletter-footer__inner { flex-direction: column; }
  .footer__grid { grid-template-columns: 1fr 1fr; }
}
@media (max-width: 640px) {
  .prod-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: .75rem; }
}
@media (max-width: 480px) {
  .cats-grid { grid-template-columns: repeat(2, 1fr); }
  .footer__grid { grid-template-columns: 1fr; }
}

/* ── MARQUEE DE MARCAS ──────────────────────────────────────── */
/* ── SIMILARES EN CARRITO ───────────────────────────────────── */
.similares-carrito { background: var(--gray-50); border-top: 1px solid var(--gray-200); padding: 2.5rem 0; }
.similares-carrito__header { display: flex; align-items: center; justify-content: space-between; margin-bottom: 1.25rem; }
.similares-carrito__titulo { font-family: var(--font-display); font-size: 1.5rem; letter-spacing: 1px; }
.similares-carrito__track { display: flex; gap: 1rem; overflow-x: auto; padding-bottom: .75rem; scroll-snap-type: x mandatory; -webkit-overflow-scrolling: touch; }
.similares-carrito__track::-webkit-scrollbar { height: 4px; }
.similares-carrito__track::-webkit-scrollbar-track { background: var(--gray-100); border-radius: 2px; }
.similares-carrito__track::-webkit-scrollbar-thumb { background: var(--gray-300); border-radius: 2px; }
.similares-carrito__item { min-width: 180px; max-width: 180px; background: #fff; border-radius: var(--r); border: 1px solid var(--gray-200); overflow: hidden; scroll-snap-align: start; flex-shrink: 0; transition: box-shadow .2s; }
.similares-carrito__item:hover { box-shadow: var(--shadow-md); }
.similares-carrito__img-wrap { display: block; position: relative; aspect-ratio: 1; overflow: hidden; background: var(--gray-50); }
.similares-carrito__img-wrap img { width: 100%; height: 100%; object-fit: cover; transition: transform .3s; }
.similares-carrito__item:hover img { transform: scale(1.04); }
.similares-carrito__badge { position: absolute; top: .5rem; left: .5rem; background: var(--accent); color: #fff; font-size: .65rem; font-weight: 700; padding: .2rem .45rem; border-radius: 4px; text-transform: uppercase; }
.similares-carrito__info { padding: .75rem; }
.similares-carrito__nombre { font-size: .82rem; font-weight: 600; line-height: 1.3; margin-bottom: .35rem; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; }
.similares-carrito__precio { font-size: .85rem; font-weight: 700; color: var(--primary); margin-bottom: .6rem; display: flex; gap: .4rem; align-items: center; flex-wrap: wrap; }
.similares-carrito__item .prod-card__btns { padding: 0 .75rem .75rem; }

/* ── BOTÓN FLOTANTE WHATSAPP ────────────────────────────────── */
.whatsapp-float { position: fixed; bottom: 1.5rem; right: 1.5rem; z-index: 999; width: 56px; height: 56px; background: #25D366; border-radius: 50%; display: flex; align-items: center; justify-content: center; box-shadow: 0 4px 16px rgba(37,211,102,.45); transition: transform .2s, box-shadow .2s; }
.whatsapp-float:hover { transform: scale(1.1); box-shadow: 0 6px 24px rgba(37,211,102,.6); }
.whatsapp-float::before { content: ''; position: absolute; inset: 0; border-radius: 50%; background: #25D366; animation: whatsapp-pulse 2s ease-out infinite; }
@keyframes whatsapp-pulse { 0% { transform: scale(1); opacity: .6; } 100% { transform: scale(1.7); opacity: 0; } }

/* ── MARQUEE DE MARCAS ─────────────────────────────────────── */
.marcas-strip { background: #fff; border-top: 1px solid var(--gray-200); border-bottom: 1px solid var(--gray-200); padding: 1.25rem 0; overflow: hidden; }
.marcas-track { display: flex; align-items: center; gap: 3rem; width: max-content; }
.marcas-track img { height: 40px; width: auto; object-fit: contain; filter: grayscale(1) opacity(.55); transition: filter .3s; flex-shrink: 0; }
.marcas-track img:hover { filter: grayscale(0) opacity(1); }

/* ── CHECKOUT WIZARD ────────────────────────────────────────── */
.wizard-wrap { max-width: 1080px; margin: 2rem auto; padding: 0 1.25rem; }
.wizard-progress { display: flex; align-items: center; margin-bottom: 2rem; }
.wizard-step-item { display: flex; align-items: center; gap: .6rem; font-size: .88rem; font-weight: 600; color: var(--gray-400); }
.wizard-step-item.active { color: var(--accent); }
.wizard-step-item.done   { color: var(--success); }
.wizard-step-item__num { width: 32px; height: 32px; border-radius: 50%; border: 2px solid currentColor; display: flex; align-items: center; justify-content: center; font-weight: 700; font-size: .85rem; flex-shrink: 0; }
.wizard-step-item.active .wizard-step-item__num { background: var(--accent); border-color: var(--accent); color: #fff; }
.wizard-step-item.done   .wizard-step-item__num { background: var(--success); border-color: var(--success); color: #fff; }
.wizard-divider { flex: 1; height: 2px; background: var(--gray-200); margin: 0 .75rem; }
.wizard-divider.done { background: var(--success); }

.checkout-grid { display: grid; grid-template-columns: 1fr 360px; gap: 1.5rem; align-items: start; }
@media (max-width: 800px) { .checkout-grid { grid-template-columns: 1fr; } }
.checkout-seccion { background: var(--gray-50); border: 1px solid var(--gray-200); border-radius: var(--r-lg); padding: 1.4rem; margin-bottom: 1.25rem; }
.checkout-seccion h3 { font-size: 1rem; font-weight: 700; margin-bottom: 1rem; display: flex; align-items: center; gap: .4rem; }
.checkout-desc { font-size: .83rem; color: var(--gray-500); margin-bottom: 1rem; margin-top: -.5rem; }

.input-prefijo { display: flex; border: 1px solid var(--gray-300); border-radius: var(--r); overflow: hidden; }
.input-prefijo span { background: var(--gray-100); padding: .6rem .75rem; font-size: .88rem; font-weight: 600; color: var(--gray-600); border-right: 1px solid var(--gray-300); white-space: nowrap; }
.input-prefijo .form-input { border: none; border-radius: 0; flex: 1; }

.wizard-actions { display: flex; justify-content: space-between; align-items: center; margin-top: 1.5rem; padding-top: 1.25rem; border-top: 1px solid var(--gray-200); }

.payment-methods { display: grid; grid-template-columns: repeat(auto-fill, minmax(140px, 1fr)); gap: .75rem; margin-bottom: 1.25rem; }
.payment-card { display: flex; flex-direction: column; align-items: center; gap: .5rem; padding: 1rem .75rem; border: 2px solid var(--gray-200); border-radius: var(--r); cursor: pointer; transition: .15s; font-size: .85rem; font-weight: 600; text-align: center; }
.payment-card:hover { border-color: var(--accent); }
.payment-card input[type=radio] { display: none; }
.payment-card.selected { border-color: var(--accent); background: #fff5f3; }
.payment-card__logo { width: 48px; height: 48px; border-radius: 10px; display: flex; align-items: center; justify-content: center; font-size: 1.4rem; }
.logo-yape    { background: #5C0F8B; color: #fff; }
.logo-plin    { background: #00C1C8; color: #fff; }
.logo-banca   { background: #0033A0; color: #fff; }
.logo-entrega { background: #f59e0b; color: #fff; }

.pay-panel { background: #fff; border: 1px solid var(--gray-200); border-radius: var(--r); padding: 1.25rem; margin-top: .75rem; }
.qr-box { display: flex; flex-direction: column; align-items: center; gap: 1rem; }
.qr-box img { border: 4px solid var(--gray-100); border-radius: var(--r); width: 200px; height: 200px; }
.pay-amount { font-size: 1.5rem; font-weight: 700; color: var(--accent); }
.pay-status { display: flex; align-items: center; gap: .5rem; font-size: .9rem; color: var(--gray-600); padding: .6rem 1rem; border-radius: 999px; background: var(--gray-100); }
.pay-status.ok { background: #dcfce7; color: #15803d; }
.bank-detail { display: flex; flex-direction: column; gap: .6rem; }
.bank-row { display: flex; justify-content: space-between; align-items: center; padding: .6rem .75rem; background: var(--gray-50); border-radius: var(--r); font-size: .88rem; }
.bank-row strong { font-weight: 700; }
.copy-btn { font-size: .75rem; padding: .2rem .5rem; background: var(--gray-200); border: none; border-radius: 4px; cursor: pointer; }
.copy-btn:hover { background: var(--gray-300); }

.resumen-card { background: var(--gray-50); border: 1px solid var(--gray-200); border-radius: var(--r-lg); padding: 1.25rem; position: sticky; top: calc(var(--header-h) + 1rem); }
.resumen-card__titulo { font-weight: 700; font-size: 1rem; margin-bottom: 1rem; padding-bottom: .75rem; border-bottom: 1px solid var(--gray-200); }
.resumen-item { display: flex; gap: .75rem; align-items: flex-start; margin-bottom: .75rem; font-size: .85rem; }
.resumen-item img { width: 50px; height: 50px; object-fit: cover; border-radius: 6px; flex-shrink: 0; }
.resumen-item__info { flex: 1; }
.resumen-row { display: flex; justify-content: space-between; font-size: .88rem; padding: .35rem 0; border-top: 1px solid var(--gray-200); }
.resumen-row--total { font-weight: 700; font-size: 1rem; color: var(--primary); }

.review-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 1rem; margin-bottom: 1.25rem; }
@media (max-width: 600px) { .review-grid { grid-template-columns: 1fr; } }
.review-box { background: var(--gray-50); border: 1px solid var(--gray-200); border-radius: var(--r); padding: 1rem; font-size: .88rem; }
.review-box h4 { font-weight: 700; margin-bottom: .5rem; font-size: .9rem; }
.review-box p  { color: var(--gray-600); line-height: 1.7; margin: 0; }

/* ═══════════════════════════════════════════════════════════
   CONFIANZA Y SEGURIDAD
   ═══════════════════════════════════════════════════════════ */

/* Franja de beneficios */
.trust-strip { background: #0f172a; padding: 1rem 0; }
.trust-strip__grid { display: flex; flex-wrap: wrap; justify-content: center; gap: .55rem 2.5rem; }
.trust-item { display: flex; align-items: center; gap: .48rem; color: rgba(255,255,255,.82); font-size: .82rem; font-weight: 500; white-space: nowrap; }
.trust-item svg { color: var(--accent); flex-shrink: 0; }
@media(max-width:640px) {
  .trust-strip__grid { justify-content: flex-start; padding: 0 1.25rem; gap: .4rem 1.25rem; }
  .trust-item { font-size: .75rem; }
}

/* Logos de pago en footer */
.footer-pagos { display: flex; flex-wrap: wrap; gap: .4rem; align-items: center; margin-top: .85rem; }
.fpago { display: inline-flex; align-items: center; justify-content: center; height: 24px; padding: 0 7px; border-radius: 4px; font-size: .68rem; font-weight: 800; letter-spacing: .5px; color: #fff; }
.fpago-visa { background: #1a1f71; font-family: 'Georgia', serif; font-style: italic; letter-spacing: 1.5px; font-size: .8rem; padding: 0 8px; }
.fpago-mc   { background: transparent; padding: 0; width: 36px; position: relative; }
.fpago-mc::before { content: ''; position: absolute; left: 0; top: 50%; transform: translateY(-50%); width: 20px; height: 20px; background: #eb001b; border-radius: 50%; }
.fpago-mc::after  { content: ''; position: absolute; right: 0; top: 50%; transform: translateY(-50%); width: 20px; height: 20px; background: #f79e1b; border-radius: 50%; opacity: .9; }
.fpago-amex { background: #016fd0; font-size: .62rem; letter-spacing: .5px; }
.fpago-mp   { background: #009ee3; }
.fpago-yape { background: #5C0F8B; }
.fpago-plin { background: #0e8285; }
.fpago-ssl  { background: rgba(34,197,94,.15); border: 1px solid rgba(34,197,94,.3); color: #22c55e; gap: 3px; }

/* Métodos de pago (checkout) — rediseño */
.payment-methods { display: grid; grid-template-columns: repeat(2, 1fr); gap: .65rem; margin-bottom: 1.25rem; }
@media(min-width:500px) { .payment-methods { grid-template-columns: repeat(4, 1fr); } }
.payment-card { position: relative; display: flex; flex-direction: column; align-items: center; gap: .45rem; padding: .9rem .6rem; border: 2px solid var(--gray-200); border-radius: var(--r-lg); cursor: pointer; transition: border-color .15s, box-shadow .15s, background .15s; font-size: .8rem; font-weight: 600; text-align: center; background: #fff; color: var(--gray-700); }
.payment-card:hover { border-color: var(--accent); background: #fffaf9; }
.payment-card input[type=radio] { display: none; }
.payment-card.selected { border-color: var(--accent); background: #fff8f7; box-shadow: 0 0 0 3px rgba(255,75,38,.1); }
.payment-card.selected::after { content: ''; position: absolute; top: 7px; right: 7px; width: 16px; height: 16px; border-radius: 50%; background-color: var(--accent); background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='10' height='10' viewBox='0 0 24 24' fill='none' stroke='%23fff' stroke-width='3.5' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpolyline points='20 6 9 17 4 12'/%3E%3C/svg%3E"); background-size: 10px; background-repeat: no-repeat; background-position: center; }
.payment-card__logo { width: 54px; height: 36px; border-radius: 8px; display: flex; align-items: center; justify-content: center; overflow: hidden; flex-shrink: 0; }
.payment-card__logo img { max-width: 100%; max-height: 100%; object-fit: contain; }
.logo-banca   { background: linear-gradient(135deg,#0033A0,#0052cc); color: #fff; font-weight: 800; font-size: .62rem; letter-spacing: .5px; }
.logo-entrega { background: linear-gradient(135deg,#f59e0b,#d97706); color: #fff; }

/* Caja de seguridad en checkout */
.checkout-trust { background: #0f172a; border-radius: var(--r); padding: .85rem 1.1rem; margin-top: .75rem; }
.checkout-trust__title { font-size: .67rem; text-transform: uppercase; letter-spacing: 1.5px; color: rgba(255,255,255,.4); font-weight: 700; margin-bottom: .5rem; }
.checkout-trust__items { display: flex; flex-wrap: wrap; gap: .35rem .85rem; }
.checkout-trust__item  { display: flex; align-items: center; gap: .32rem; font-size: .76rem; color: rgba(255,255,255,.75); }
.checkout-trust__item svg { color: #22c55e; flex-shrink: 0; }

/* Seguridad en el resumen lateral */
.resumen-trust { margin-top: .9rem; padding-top: .75rem; border-top: 1px solid var(--gray-200); display: flex; flex-direction: column; gap: .32rem; }
.resumen-trust__item { display: flex; align-items: center; gap: .38rem; font-size: .74rem; color: var(--gray-500); }
.resumen-trust__item svg { color: var(--success); flex-shrink: 0; }