/* =============================================================
   FRIGORIFICO MENUDENCIAS — base.css
   Tokens de diseño, reset, tipografía y componentes comunes.

   Concepto de layout: "pizarra de precios" industrial.
   Bandas oscuras a sangre completa, grilla de 1180px, filas de
   precio con puntos guía, esquinas rectas y reglas gruesas.
   ============================================================= */

/* ---------- TOKENS: tema claro (base) ---------- */
:root {
  /* color */
  --bg:          #F5F2ED;
  --bg-2:        #EBE5DB;
  --superficie:  #FFFFFF;
  --superficie-2:#FBF9F6;
  --tinta:       #17120F;
  --tinta-2:     #574C44;
  --tinta-3:     #6B6057;
  --linea:       #DDD5C9;
  --linea-fuerte:#C3B8A8;
  --rojo:        #B81422;
  --rojo-hover:  #93101B;
  --rojo-suave:  #FBEDEE;
  --oro:         #8A5F14;
  --oro-claro:   #E0AE4E;
  --oro-suave:   #FBF2DF;
  --verde:       #2E7D46;
  --verde-suave: #E9F4EC;
  --sombra:      0 1px 2px rgba(23,18,15,.06), 0 8px 24px -12px rgba(23,18,15,.18);
  --sombra-alta: 0 2px 6px rgba(23,18,15,.10), 0 24px 60px -20px rgba(23,18,15,.32);

  /* bandas oscuras: mismos valores en ambos temas (decisión de marca) */
  --noche:       #100D0B;
  --noche-2:     #1A1512;
  --noche-3:     #241D19;
  --noche-linea: #332A24;
  --noche-tinta: #F6F1E9;
  --noche-tinta-2:#AC9E90;
  --noche-oro:   #E0AE4E;
  --noche-rojo:  #E8485A;

  /* tipografía */
  --display: 'Archivo Black', 'Arial Black', 'Helvetica Neue', Impact, sans-serif;
  --texto:   'Archivo', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Helvetica, Arial, sans-serif;
  --datos:   'Archivo Narrow', 'Arial Narrow', 'Archivo', Arial, sans-serif;

  /* medidas */
  --ancho: 1180px;
  --gutter: clamp(16px, 4vw, 40px);
  --alto-cabecera: 68px;
  --radio: 3px;
  --radio-g: 5px;

  /* safe-area (móvil con notch) */
  padding-top: env(safe-area-inset-top, 0px);
  padding-bottom: env(safe-area-inset-bottom, 0px);
}

/* ---------- TOKENS: tema oscuro ---------- */
@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) {
    --bg:          #100D0B;
    --bg-2:        #171310;
    --superficie:  #1F1A16;
    --superficie-2:#261F1A;
    --tinta:       #F6F1E9;
    --tinta-2:     #B7A99B;
    --tinta-3:     #9A8D80;
    --linea:       #362E27;
    --linea-fuerte:#4E433A;
    --rojo:        #F05365;
    --rojo-hover:  #F87A88;
    --rojo-suave:  #2A1518;
    --oro:         #E0AE4E;
    --oro-claro:   #F0C87E;
    --oro-suave:   #2A2015;
    --verde:       #5CBE7A;
    --verde-suave: #14251A;
    --sombra:      0 1px 2px rgba(0,0,0,.5), 0 8px 24px -12px rgba(0,0,0,.7);
    --sombra-alta: 0 2px 6px rgba(0,0,0,.6), 0 24px 60px -20px rgba(0,0,0,.85);
    color-scheme: dark;
  }
}
:root[data-theme="dark"] {
  --bg:          #100D0B;
  --bg-2:        #171310;
  --superficie:  #1F1A16;
  --superficie-2:#261F1A;
  --tinta:       #F6F1E9;
  --tinta-2:     #B7A99B;
  --tinta-3:     #9A8D80;
  --linea:       #362E27;
  --linea-fuerte:#4E433A;
  --rojo:        #F05365;
  --rojo-hover:  #F87A88;
  --rojo-suave:  #2A1518;
  --oro:         #E0AE4E;
  --oro-claro:   #F0C87E;
  --oro-suave:   #2A2015;
  --verde:       #5CBE7A;
  --verde-suave: #14251A;
  --sombra:      0 1px 2px rgba(0,0,0,.5), 0 8px 24px -12px rgba(0,0,0,.7);
  --sombra-alta: 0 2px 6px rgba(0,0,0,.6), 0 24px 60px -20px rgba(0,0,0,.85);
  color-scheme: dark;
}

/* ---------- RESET ---------- */
*, *::before, *::after { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; scroll-behavior: smooth; }
body {
  margin: 0;
  background: var(--bg);
  color: var(--tinta);
  font-family: var(--texto);
  font-size: 16px;
  line-height: 1.6;
  font-synthesis-weight: none;
  -webkit-font-smoothing: antialiased;
  overflow-wrap: break-word;
}
img, svg, video { max-width: 100%; display: block; }
[hidden] { display: none !important; }
button, input, select, textarea { font: inherit; color: inherit; }
button { cursor: pointer; background: none; border: 0; padding: 0; }
a { color: inherit; }
h1, h2, h3, h4 { margin: 0; line-height: 1.05; text-wrap: balance; font-weight: 400; }
p { margin: 0; }
ul, ol { margin: 0; padding: 0; list-style: none; }
table { border-collapse: collapse; width: 100%; }

@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  *, *::before, *::after {
    animation-duration: .01ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: .01ms !important;
  }
}

:focus-visible {
  outline: 3px solid var(--oro-claro);
  outline-offset: 2px;
  border-radius: 2px;
}

/* ---------- TIPOGRAFÍA ---------- */
.display {
  font-family: var(--display);
  font-weight: 400;
  letter-spacing: -.02em;
  text-transform: uppercase;
}
.t-xxl { font-size: clamp(2.6rem, 7.2vw, 5.2rem); line-height: .92; }
.t-xl  { font-size: clamp(2rem, 4.6vw, 3.1rem);   line-height: .98; }
.t-l   { font-size: clamp(1.45rem, 2.7vw, 1.95rem); line-height: 1.06; }
.t-m   { font-size: clamp(1.1rem, 1.9vw, 1.28rem); line-height: 1.2; }

.rotulo {
  font-family: var(--datos);
  font-size: .78rem;
  font-weight: 700;
  letter-spacing: .16em;
  text-transform: uppercase;
  color: var(--rojo);
  display: inline-flex;
  align-items: center;
  gap: .55em;
}
.rotulo::before {
  content: "";
  width: 22px;
  height: 3px;
  background: var(--rojo);
  flex: none;
}
.rotulo--oro { color: var(--oro); }
.rotulo--oro::before { background: var(--oro); }
.rotulo--noche { color: var(--noche-oro); }
.rotulo--noche::before { background: var(--noche-oro); }

.bajada {
  color: var(--tinta-2);
  font-size: 1.02rem;
  max-width: 62ch;
}
.num { font-variant-numeric: tabular-nums; }

/* ---------- LAYOUT ---------- */
.contenedor {
  width: 100%;
  max-width: var(--ancho);
  margin-inline: auto;
  padding-inline: var(--gutter);
}
.seccion { padding-block: clamp(56px, 8vw, 96px); }
/* que el encabezado fijo no tape el título al saltar a una sección */
section[id], .seccion[id] { scroll-margin-top: calc(var(--alto-cabecera) + 18px); }
.seccion--ajustada { padding-block: clamp(40px, 6vw, 68px); }
.seccion--banda { background: var(--bg-2); }
.seccion--noche {
  background: var(--noche);
  color: var(--noche-tinta);
}
.seccion--noche .bajada { color: var(--noche-tinta-2); }

.cabeza-seccion {
  display: flex;
  flex-direction: column;
  gap: 14px;
  padding-bottom: 28px;
  margin-bottom: 36px;
  border-bottom: 3px solid var(--tinta);
}
.seccion--noche .cabeza-seccion { border-bottom-color: var(--noche-linea); }
.cabeza-seccion__fila {
  display: flex;
  flex-wrap: wrap;
  align-items: flex-end;
  justify-content: space-between;
  gap: 18px;
}

/* ---------- BOTONES ---------- */
.btn {
  --btn-bg: var(--tinta);
  --btn-fg: var(--bg);
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: .6em;
  padding: 13px 22px;
  background: var(--btn-bg);
  color: var(--btn-fg);
  border: 2px solid var(--btn-bg);
  border-radius: var(--radio);
  font-family: var(--datos);
  font-weight: 700;
  font-size: .95rem;
  letter-spacing: .07em;
  text-transform: uppercase;
  text-decoration: none;
  text-align: center;
  transition: transform .16s ease, background-color .16s ease, border-color .16s ease, color .16s ease, box-shadow .16s ease;
}
.btn:hover { transform: translateY(-2px); box-shadow: var(--sombra); }
.btn:active { transform: translateY(0); }
.btn svg { width: 1.15em; height: 1.15em; flex: none; }

/* Todo icono creado con icono() nace con un tamaño razonable. */
.ico { width: 1.1em; height: 1.1em; flex: none; }

.btn--rojo   { --btn-bg: var(--rojo); --btn-fg: #fff; }
.btn--rojo:hover { --btn-bg: var(--rojo-hover); }
.btn--oro    { --btn-bg: var(--oro-claro); --btn-fg: #1B1308; }
.btn--oro:hover { --btn-bg: #EDBE66; }
.btn--wa     { --btn-bg: #14803F; --btn-fg: #fff; }
.btn--wa:hover { --btn-bg: #0F6A32; }
.btn--linea  {
  --btn-bg: transparent;
  --btn-fg: var(--tinta);
  border-color: var(--linea-fuerte);
}
.btn--linea:hover { border-color: var(--tinta); }
.btn--noche {
  --btn-bg: transparent;
  --btn-fg: var(--noche-tinta);
  border-color: var(--noche-linea);
}
.btn--noche:hover { border-color: var(--noche-oro); --btn-fg: var(--noche-oro); }
.btn--bloque { width: 100%; }
.btn--chico { padding: 9px 13px; font-size: .81rem; letter-spacing: .045em; white-space: nowrap; }
.btn[disabled] { opacity: .45; pointer-events: none; }

/* ---------- ETIQUETAS / CHIPS ---------- */
.chip {
  display: inline-flex;
  align-items: center;
  gap: .4em;
  padding: 4px 10px;
  border: 1px solid var(--linea-fuerte);
  border-radius: 100px;
  font-family: var(--datos);
  font-size: .74rem;
  font-weight: 700;
  letter-spacing: .09em;
  text-transform: uppercase;
  color: var(--tinta-2);
  white-space: nowrap;
}
.chip--rojo  { background: var(--rojo-suave); border-color: transparent; color: var(--rojo); }
.chip--oro   { background: var(--oro-suave); border-color: transparent; color: var(--oro); }
.chip--verde { background: var(--verde-suave); border-color: transparent; color: var(--verde); }
.chip--agotado { background: transparent; color: var(--tinta-3); border-style: dashed; }
.chip--bloque {
  white-space: normal; text-align: left; line-height: 1.35;
  align-self: flex-start; max-width: 100%;
}

/* ---------- ANIMACIÓN AL SCROLL ---------- */
/* El estado de reposo es visible: la animación entra desde ahí, así
   nada queda oculto esperando al observador. */
.revelar { opacity: 1; transform: none; }
.revelar.visible { animation: revelar .6s cubic-bezier(.22,.61,.36,1) both; }
@keyframes revelar {
  from { opacity: 0; transform: translateY(18px); }
  to   { opacity: 1; transform: none; }
}
@media (prefers-reduced-motion: reduce) {
  .revelar.visible { animation: none; }
}

/* ---------- UTILIDADES ---------- */
.solo-lectores {
  position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px;
  overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; border: 0;
}
.saltar-al-contenido {
  position: absolute; left: 12px; top: -60px; z-index: 200;
  background: var(--rojo); color: #fff; padding: 10px 16px;
  border-radius: var(--radio); font-family: var(--datos); font-weight: 700;
  text-transform: uppercase; letter-spacing: .08em; text-decoration: none;
  transition: top .2s ease;
}
.saltar-al-contenido:focus { top: 12px; }