/* =====================================================================================
   CartaListo — tokens de diseño (fuente única de verdad para CSS).
   Documentación: docs/marca/cartalisto-identidad-de-marca.md
                  docs/marca/cartalisto-implementacion-frontend.md
   Sin dependencias externas: las fuentes se sirven desde ../fuentes/ (WOFF2, SIL OFL).
   ===================================================================================== */

@font-face {
  font-family: "Bricolage Grotesque";
  src: url("../fuentes/BricolageGrotesque-CartaListo.woff2") format("woff2");
  font-weight: 700 800;
  font-style: normal;
  font-display: swap;
}
@font-face {
  font-family: "DM Sans";
  src: url("../fuentes/DMSans-CartaListo.woff2") format("woff2");
  font-weight: 400 700;
  font-style: normal;
  font-display: swap;
}

:root {
  /* --- color de marca --- */
  --cl-tomate: #FF5A36;          /* principal: fondos, botones, "listo", ilustración */
  --cl-tomate-texto: #C6462A;    /* tomate para TEXTO y enlaces sobre claro (4.5:1 sobre crema) */
  --cl-tinta: #1D1A2F;           /* textos, "carta", fondos oscuros */
  --cl-crema: #FFF5E6;           /* fondo principal claro */
  --cl-blanco: #FFFDF8;          /* tarjetas, fondo de QR */
  --cl-mantequilla: #FFC94D;     /* acento */
  --cl-albahaca: #1FA971;        /* acento (ilustración, etiquetas) */
  --cl-albahaca-texto: #177E54;  /* albahaca para texto / fondo con texto blanco */
  --cl-chicle: #FFA6C9;          /* acento */
  --cl-gris: #5B5770;            /* texto secundario sobre claro (6.4:1 sobre crema) */
  --cl-gris-claro: #CFCBE0;      /* texto secundario sobre tinta */
  --cl-borde: #E6DCCB;           /* bordes suaves sobre crema */

  /* --- tipografía --- */
  --cl-fuente-titulos: "Bricolage Grotesque", "Arial Black", system-ui, sans-serif;
  --cl-fuente-texto: "DM Sans", system-ui, -apple-system, "Segoe UI", Roboto, sans-serif;
  --cl-titulo-xl: clamp(2.75rem, 6vw + 1rem, 6rem);   /* hero */
  --cl-titulo-l: clamp(2rem, 3vw + 1rem, 3.5rem);     /* secciones */
  --cl-titulo-m: 1.5rem;
  --cl-texto-l: 1.25rem;
  --cl-texto: 1rem;
  --cl-texto-s: 0.875rem;
  --cl-peso-titulo: 800;
  --cl-interlineado-titulo: 0.95;
  --cl-tracking-titulo: -0.01em;

  /* --- forma --- */
  --cl-radio-s: 10px;
  --cl-radio: 18px;
  --cl-radio-l: 32px;
  --cl-radio-pastilla: 999px;
  --cl-sombra: 0 6px 0 var(--cl-tinta);          /* sombra "pegatina": sólida, sin desenfoque */
  --cl-trazo-visor: 6px;                          /* grosor de las esquinas del visor */

  /* --- espacio (escala de 4 px) --- */
  --cl-esp-1: 4px;  --cl-esp-2: 8px;  --cl-esp-3: 12px; --cl-esp-4: 16px;
  --cl-esp-5: 24px; --cl-esp-6: 32px; --cl-esp-7: 48px; --cl-esp-8: 64px;
}

/* =====================================================================================
   Componentes básicos (opcionales). Prefijo .cl- para no chocar con otros estilos.
   ===================================================================================== */

.cl-titulo { font-family: var(--cl-fuente-titulos); font-weight: var(--cl-peso-titulo);
  line-height: var(--cl-interlineado-titulo); letter-spacing: var(--cl-tracking-titulo); color: var(--cl-tinta); }
.cl-titulo em, .cl-acento { font-style: normal; color: var(--cl-tomate); }   /* solo en tamaños >= 24px */

.cl-boton { display: inline-flex; align-items: center; gap: var(--cl-esp-2);
  font: 800 1.125rem/1 var(--cl-fuente-titulos); padding: 0.9em 1.5em; border-radius: var(--cl-radio-pastilla);
  border: 0; cursor: pointer; text-decoration: none; background: var(--cl-tomate); color: var(--cl-tinta);
  box-shadow: var(--cl-sombra); transition: transform .12s ease, box-shadow .12s ease; }
.cl-boton:hover { transform: translateY(2px); box-shadow: 0 4px 0 var(--cl-tinta); }
.cl-boton:active { transform: translateY(6px); box-shadow: none; }
.cl-boton:focus-visible { outline: 3px solid var(--cl-tinta); outline-offset: 3px; }
.cl-boton--secundario { background: var(--cl-crema); color: var(--cl-tinta); border: 2px solid var(--cl-tinta); }
.cl-boton--oscuro { background: var(--cl-tinta); color: var(--cl-crema); box-shadow: 0 6px 0 var(--cl-tomate); }

.cl-pastilla { display: inline-block; font: 700 0.875rem/1 var(--cl-fuente-texto); padding: 0.5em 0.9em;
  border-radius: var(--cl-radio-pastilla); background: var(--cl-crema); color: var(--cl-tinta); border: 1.5px solid var(--cl-tinta); }
.cl-pastilla--activa { background: var(--cl-tinta); color: var(--cl-crema); }

.cl-tarjeta { background: var(--cl-blanco); border-radius: var(--cl-radio); padding: var(--cl-esp-5);
  border: 2px solid var(--cl-tinta); box-shadow: var(--cl-sombra); }

.cl-pegatina { display: inline-block; font: 800 1rem/1 var(--cl-fuente-titulos); padding: 0.6em 1.1em;
  border-radius: var(--cl-radio-pastilla); background: var(--cl-tomate); color: var(--cl-tinta); transform: rotate(-6deg); }
.cl-pegatina--mantequilla { background: var(--cl-mantequilla); color: var(--cl-tinta); transform: rotate(5deg); }
.cl-pegatina--albahaca { background: var(--cl-albahaca-texto); color: var(--cl-blanco); }

/* El visor: cuatro esquinas que enmarcan cualquier cosa (un QR, una foto, un titular). */
.cl-visor { position: relative; padding: var(--cl-esp-5); }
.cl-visor::before, .cl-visor::after { content: ""; position: absolute; inset: 0; pointer-events: none;
  --l: 22%; --t: var(--cl-trazo-visor); --c: var(--cl-tinta);
  background:
    linear-gradient(var(--c), var(--c)) top left / var(--l) var(--t) no-repeat,
    linear-gradient(var(--c), var(--c)) top left / var(--t) var(--l) no-repeat,
    linear-gradient(var(--c), var(--c)) top right / var(--l) var(--t) no-repeat,
    linear-gradient(var(--c), var(--c)) top right / var(--t) var(--l) no-repeat; }
.cl-visor::after { transform: rotate(180deg); }