/* ============================================================
   RESERVA CÁRNICA — brand.css
   ------------------------------------------------------------
   IDENTIDAD VISUAL. Extraída de la web actual de Reserva Cárnica.
   styles.css solo consume estas variables: nunca define un color
   ni una tipografía por su cuenta.
   ============================================================ */

:root{
  color-scheme: light;

  /* ---------- Color ---------- */
  --red:#A62831;          /* rojo granate de marca */
  --red-dark:#7F1D25;     /* hover, sello del logo */
  --red-soft:#C24A4D;     /* paneles y fondos rojos claros */
  --red-tint:#F6EEEE;     /* fondo rojo muy diluido */

  --white:#FFFFFF;
  --cream:#F3EFE8;        /* secciones alternas */
  --cream-2:#EFE8DD;      /* círculos de ícono inactivos */
  --sand:#EDE5D8;         /* ilustraciones de fondo */

  --ink:#1F1F1F;          /* titulares */
  --ink-2:#3A3A3A;        /* subtítulos */
  --muted:#6E6E6E;        /* texto corrido */
  --muted-2:#9A948C;      /* texto secundario */

  --nav:#1A1A1A;          /* barra de navegación oscura */
  --nav-2:#141414;
  --on-nav:#FFFFFF;
  --nav-active:#C0392F;   /* enlace activo del menú */
  --shot:#0E0E0E;         /* base bajo las fotos oscuras */

  --line:#E9E2D8;         /* divisores */
  --line-2:#F0EBE3;       /* divisores muy suaves */

  /* Semánticos de rendimiento */
  --merma:#D8CFC2;
  --yield:var(--red);

  /* ---------- Tipografía ---------- */
  --f-display:"Oswald","Archivo Narrow","Arial Narrow",sans-serif;
  --f-body:"Mulish","Rubik","Jost","Segoe UI",Helvetica,Arial,sans-serif;

  /* Escala */
  --t-h1:clamp(2.5rem,5.6vw,4.4rem);
  --t-h2:clamp(1.9rem,3.9vw,3.25rem);
  --t-h3:clamp(1.15rem,1.7vw,1.4rem);
  --t-lead:clamp(1rem,1.25vw,1.12rem);
  --t-body:clamp(.95rem,1.05vw,1.02rem);
  --t-small:.9rem;
  --t-eyebrow:.82rem;

  /* Voz tipográfica */
  --display-weight:700;
  --display-case:uppercase;
  --display-leading:1.06;
  --display-tracking:.005em;
  --eyebrow-tracking:.26em;
  --btn-tracking:.09em;
  --body-leading:1.85;

  /* ---------- Formas ---------- */
  --radius:0px;           /* la plantilla no usa esquinas redondeadas */
  --btn-radius:0px;
  --rule-w:1px;
  --accent-w:2px;
  --frame-w:2px;          /* marco de línea roja de las fotos */

  /* ---------- Ritmo ---------- */
  --gutter:clamp(1.15rem,4vw,2.5rem);
  --sec-y:clamp(4rem,8vw,7.5rem);
  --maxw:1240px;

  /* ---------- Ilustraciones de fondo (line-art crema) ---------- */
  --art-especias:url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='300' height='300' viewBox='0 0 300 300'><g fill='none' stroke='%23EDE5D8' stroke-width='2.2'><ellipse cx='62' cy='58' rx='34' ry='46'/><path d='M62 12v92'/><path d='M150 40c-16 12-24 30-24 48 0 22 12 34 24 34s24-12 24-34c0-18-8-36-24-48z'/><path d='M150 40v82M132 62c8 10 8 34 0 48M168 62c-8 10-8 34 0 48'/><circle cx='232' cy='88' r='40'/><path d='M232 48v80M192 88h80'/><path d='M40 190c26-14 62-14 88 0 26 14 26 46 0 60-26 14-62 14-88 0-26-14-26-46 0-60z'/><path d='M60 200c18-8 46-8 64 0'/><path d='M180 176h96M180 200h96M180 224h96M180 248h96'/><path d='M196 176v72M228 176v72M260 176v72'/></g></svg>");
  --art-cortes:url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='280' height='280' viewBox='0 0 280 280'><g fill='none' stroke='%23EDE5D8' stroke-width='2.2'><path d='M34 60c22-26 66-32 96-14 30 18 34 56 12 78-22 22-64 22-90 2-26-20-30-52-18-66z'/><path d='M66 78c14-12 38-14 52-4 14 10 14 30 0 40-14 10-38 8-52-4-14-12-14-24 0-32z'/><path d='M186 40c30 0 54 22 54 50s-24 50-54 50'/><path d='M186 40v100M204 60v60M222 68v44'/><path d='M40 186c34-10 74-10 108 0 12 4 12 20 0 24-34 10-74 10-108 0-12-4-12-20 0-24z'/><path d='M60 192v22M92 190v26M124 192v22'/><path d='M186 176c26-8 54 4 58 26 4 22-16 42-40 42-22 0-38-16-36-36 2-16 8-28 18-32z'/></g></svg>");
  --art-topo:url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='220' height='220' viewBox='0 0 220 220'><g fill='none' stroke='rgba(255,255,255,0.16)' stroke-width='1.4'><path d='M-20 40c40-26 80-26 120 0s80 26 120 0'/><path d='M-20 70c40-26 80-26 120 0s80 26 120 0'/><path d='M-20 100c40-26 80-26 120 0s80 26 120 0'/><path d='M-20 130c40-26 80-26 120 0s80 26 120 0'/><path d='M-20 160c40-26 80-26 120 0s80 26 120 0'/><path d='M-20 190c40-26 80-26 120 0s80 26 120 0'/></g></svg>");
}