/* ── Brutal Wings — identidad bespoke "fuego brutal" ──
   El shell y el motor son var()-based; aquí redefino la paleta y capas de marca.
   Gana por cascada (linkeado después del CSS del motor). */

:root{
  --primary:#F7751F;      /* naranja llama */
  --accent:#E4231C;       /* rojo brasa */
  --bg:#0a0705;           /* carbón cálido */
  --bg-2:#130b07;
  --surface:#1b120e;      /* superficie opaca (nunca rgba en fondo oscuro) */
  --surface-2:#241610;
  --border:rgba(247,117,31,.20);
  --border-2:rgba(247,117,31,.38);
  --text:#fff5ee;
  --text-soft:#e2cabb;
  --text-dim:#a88a79;
  --radius:16px;
}

body{
  background:
    radial-gradient(1100px 520px at 50% -8%, rgba(228,35,28,.28), transparent 60%),
    radial-gradient(720px 420px at 12% 8%, rgba(247,117,31,.18), transparent 55%),
    var(--bg);
  font-family:"DM Sans",system-ui,sans-serif;
}

/* ── Tipografía: Anton condensada y agresiva para display, DM Sans para cuerpo ── */
.hero h1,.brand-name,.cat-header,.card-name,.card-price,.cart-total-value,
.modal-detail .price,.section-title{
  font-family:"Anton",Impact,sans-serif;
  letter-spacing:.5px;text-transform:uppercase;
}

/* ── Hero ── */
.hero{border-bottom:1px solid var(--border)}
.hero h1{font-size:clamp(28px,7vw,60px);line-height:.98;white-space:nowrap;text-shadow:0 4px 24px rgba(228,35,28,.35)}
.hero-divider{width:110px;height:2px;margin:14px auto 12px;border:none;border-radius:2px;
  background:linear-gradient(90deg,transparent,#F7751F 30%,#E4231C 70%,transparent);
  box-shadow:0 0 12px rgba(228,35,28,.6)}
.hero h1 .hl{
  background:linear-gradient(100deg,#F7751F,#E4231C 55%,#ffb347);
  -webkit-background-clip:text;background-clip:text;color:transparent;
}
.brand{gap:0}
.brand-sub{color:var(--primary);font-weight:700;letter-spacing:.6px;text-transform:uppercase;font-size:12px;margin-top:-18px}

/* ── Precios en gradiente de brasa ── */
.card-price,.cart-total-value{
  background:linear-gradient(100deg,#ffb347,#F7751F 45%,#E4231C);
  -webkit-background-clip:text;background-clip:text;color:transparent;
}

/* ── Botones: llama sólida ── */
.btn-add,.btn-next,.btn-whatsapp,.btn-checkout{
  background:linear-gradient(100deg,#F7751F,#E4231C)!important;
  border:none;color:#fff;font-weight:800;
  box-shadow:0 8px 22px rgba(228,35,28,.35);
}
.btn-add:hover,.btn-next:hover{filter:brightness(1.08)}

/* ── Categorías: el motor ya estiliza .cat-chip .ic (tile) con mis vars.
   No poner caja en .cat-chip (es la columna) — solo el encabezado de sección. ── */
.cat-header{color:var(--primary);border-left:4px solid var(--accent);padding-left:10px}
/* Iconos de categoría más pequeños (override del motor) */
.cat-chip{width:56px}
.cat-chip .ic{width:44px;height:44px;border-radius:14px;font-size:20px}

/* ── Flechas del carrusel de categorías ── */
.cat-nav{position:relative}
.cat-arrow{position:absolute;top:50%;transform:translateY(-50%);z-index:3;
  width:34px;height:34px;border:none;border-radius:50%;cursor:pointer;
  display:flex;align-items:center;justify-content:center;color:#fff;
  background:linear-gradient(100deg,#F7751F,#E4231C);box-shadow:0 3px 10px rgba(0,0,0,.45);
  transition:opacity .18s,transform .18s}
.cat-arrow svg{width:18px;height:18px}
.cat-arrow.prev{left:-4px}
.cat-arrow.next{right:-4px}
.cat-arrow:hover{transform:translateY(-50%) scale(1.08)}
.cat-nav.at-start .cat-arrow.prev,
.cat-nav.at-end .cat-arrow.next{opacity:0;pointer-events:none}

/* ── Cards y superficies opacas ── */
.card{background:var(--surface);border:1px solid var(--border);border-radius:var(--radius)}
.card:hover{border-color:var(--border-2);box-shadow:0 10px 30px rgba(228,35,28,.18)}
.card-badge{background:linear-gradient(100deg,#F7751F,#E4231C);color:#fff;font-weight:800}

/* ── Variantes seleccionadas ── */
.variant-option.selected,.variant-option:has(input:checked){
  border-color:var(--primary);background:rgba(247,117,31,.14);color:var(--text);
}

/* ── Barra sticky: transparente para dejar pasar el degradado del fondo;
   el blur mantiene legibilidad al hacer scroll. Sin caja extra en el buscador. ── */
.sticky-bar{background:rgba(10,7,5,.92);border-bottom:1px solid var(--border);backdrop-filter:blur(10px)}
.search-box input{background:rgba(36,22,16,.55);border-color:var(--border);backdrop-filter:blur(14px)}