/* ── 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(30px,7vw,52px);line-height:.98;text-shadow:0 4px 24px rgba(228,35,28,.35)}
.hero h1 .hl{
  background:linear-gradient(100deg,#F7751F,#E4231C 55%,#ffb347);
  -webkit-background-clip:text;background-clip:text;color:transparent;
}
.brand-sub{color:var(--primary);font-weight:700;letter-spacing:.6px;text-transform:uppercase;font-size:12px}

/* ── 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}

/* ── 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)}