/* Copia de 10_Marca_Agencia_Colores/design_system/tokens.css hecha por build.py.
   No se edita aquí: se cambia en el design system y se vuelve a correr build.py.
   Única diferencia: las fuentes se cargan desde /assets/fuentes/ (fuentes.css). */
/* ==========================================================================
   Agencia Colores · design system «Muestrario» · tokens.css · v1.0.1
   21-oct-2026 · Dueña del sistema: Vito (Victoria) · Cambios mayores: aprueba Nicolás

   Espejo de tokens.json, que es la fuente de verdad. Si cambias un valor:
   1) cámbialo en tokens.json, 2) cámbialo aquí con el mismo nombre,
   3) corre:  python3 verificar_tokens.py   (debe decir OK).

   Regla tipográfica: Archivo para titulares y datos (cifras, precios, plazos, fechas);
   Atkinson Hyperlegible Next para frases. Nada de monoespaciada.
   Pesos: 2 por familia y por pieza. Lienzos y web: Archivo 900 + 700, Atkinson 400 + 600.
   A4 (.formato-a4, .formato-a4-mayor): todo lo fuerte es 800 → Archivo 800 + 700, Atkinson 400 + 800.
   Uso:  <link rel="stylesheet" href="tokens.css">
         <article class="lienzo-post modo-medio" data-servicio="redes">…</article>
   Reglas completas: README.md y 01–08.
   ========================================================================== */

/* Sin conexión (cotizador PDF, presentaciones): descomenta y apunta a los
   archivos variables de _build/fonts/ (licencia OFL).
@font-face { font-family: "Archivo"; src: url("../../_build/fonts/Archivo-VF.ttf") format("truetype");
  font-weight: 100 900; font-stretch: 62% 125%; font-style: normal; font-display: block; }
@font-face { font-family: "Atkinson Hyperlegible Next"; src: url("../../_build/fonts/AtkinsonHyperlegibleNext-VF.ttf") format("truetype");
  font-weight: 200 800; font-style: normal; font-display: block; }
*/

:root {
  /* ---------- Color: primitivos (nadie los usa directo en una pieza) ---------- */
  --prim-papel:   #F0EEE9;
  --prim-tinta:   #171A1C;
  --prim-rec:     #FF5C34;
  --prim-bote:    #2C47D9;
  --prim-tejuela: #F0A6BE;
  --prim-potrero: #137738;
  --prim-blanco:  #FFFFFF;
  --prim-piedra:  #55595D;

  /* ---------- Color: servicios (acento + texto sobre acento, ya emparejados) ---------- */
  --servicio-video-acento:   var(--prim-rec);     --servicio-video-sobre:   var(--prim-tinta);  /* 5,69:1 */
  --servicio-web-acento:     var(--prim-bote);    --servicio-web-sobre:     var(--prim-papel);  /* 6,02:1 */
  --servicio-web-sobre-alternativo: var(--prim-blanco);                                         /* 6,98:1 */
  --servicio-redes-acento:   var(--prim-tejuela); --servicio-redes-sobre:   var(--prim-tinta);  /* 9,08:1 */
  --servicio-fondos-acento:  var(--prim-potrero); --servicio-fondos-sobre:  var(--prim-papel);  /* 4,86:1 */
  --servicio-fondos-sobre-alternativo: var(--prim-blanco);                                      /* 5,64:1 */
  --servicio-agencia-acento: var(--prim-tinta);   --servicio-agencia-sobre: var(--prim-papel);  /* 15,08:1 */

  /* ---------- Color: roles (lo que usan las plantillas) ---------- */
  --col-fondo:         var(--prim-papel);
  --col-fondo-inverso: var(--prim-tinta);
  --col-superficie:    var(--prim-blanco);
  --col-texto:         var(--prim-tinta);
  --col-texto-suave:   var(--prim-piedra);
  --col-texto-inverso: var(--prim-papel);
  --col-linea:         var(--prim-tinta);
  --col-linea-inversa: var(--prim-papel);
  --col-acento:        var(--servicio-agencia-acento);
  --col-sobre-acento:  var(--servicio-agencia-sobre);

  /* ---------- Tipografía ---------- */
  --fuente-display: "Archivo", "Archivo Narrow", "Arial Narrow", sans-serif;
  --fuente-texto:   "Atkinson Hyperlegible Next", "Atkinson Hyperlegible", Verdana, sans-serif;
  --peso-display-black: 900;
  --peso-display-extrabold: 800;
  --peso-display-bold: 700;
  --peso-texto-regular: 400;
  --peso-texto-semibold: 600;
  --peso-texto-extrabold: 800;
  --ancho-extracondensado: 62.5%;
  --ancho-condensado: 75%;
  --ancho-normal: 100%;

  /* Escala lienzo 1080 (post, carrusel, historia, reel, portada, documento LinkedIn) */
  --escala-lienzo-1080-nota: 32px;
  --escala-lienzo-1080-texto: 40px;
  --escala-lienzo-1080-subtitulo: 56px;
  --escala-lienzo-1080-titular-s: 72px;
  --escala-lienzo-1080-titular-m: 96px;
  --escala-lienzo-1080-titular-l: 128px;
  --escala-lienzo-1080-cifra-m: 168px;
  --escala-lienzo-1080-cifra-l: 224px;
  --escala-lienzo-1080-display: 288px;
  --escala-lienzo-1080-subtitulo-video: 60px;

  /* Escala lienzo 1920 (video horizontal, láminas 16:9) */
  --escala-lienzo-1920-nota: 28px;
  --escala-lienzo-1920-texto: 36px;
  --escala-lienzo-1920-subtitulo: 48px;
  --escala-lienzo-1920-titular-s: 64px;
  --escala-lienzo-1920-titular-m: 88px;
  --escala-lienzo-1920-titular-l: 120px;
  --escala-lienzo-1920-cifra: 176px;
  --escala-lienzo-1920-display: 288px;
  --escala-lienzo-1920-subtitulo-video: 56px;

  /* Escala web: fluida entre 360 y 1440 px de ventana */
  --escala-web-nota: 1rem;
  --escala-web-texto: clamp(1.125rem, 1.0833rem + 0.1852vw, 1.25rem);
  --escala-web-subtitulo: clamp(1.375rem, 1.25rem + 0.5556vw, 1.75rem);
  --escala-web-titular-s: clamp(1.75rem, 1.5rem + 1.1111vw, 2.5rem);
  --escala-web-titular-m: clamp(2.25rem, 1.6667rem + 2.5926vw, 4rem);
  --escala-web-titular-l: clamp(2.75rem, 1.6667rem + 4.8148vw, 6rem);
  --escala-web-cifra: clamp(3.5rem, 2rem + 6.6667vw, 8rem);
  --escala-web-display: clamp(4.5rem, 2.3333rem + 9.6296vw, 11rem);

  /* Escala A4 (cotización, propuesta, informe) y A4 para público mayor */
  --escala-a4-pie: 9pt;
  --escala-a4-texto: 11pt;
  --escala-a4-tabla: 10.5pt;
  --escala-a4-subtitulo: 14pt;
  --escala-a4-titular-s: 18pt;
  --escala-a4-titular-m: 24pt;
  --escala-a4-titular-l: 32pt;
  --escala-a4-total: 18pt;
  --escala-a4-publico-mayor-pie: 11pt;
  --escala-a4-publico-mayor-texto: 14pt;
  --escala-a4-publico-mayor-subtitulo: 19pt;
  --escala-a4-publico-mayor-titular-s: 28pt;
  --escala-a4-publico-mayor-titular-l: 50pt;
  --escala-a4-publico-mayor-precio: 24pt;

  /* ---------- Espacio (base 8) ---------- */
  --espacio-1: 8px;
  --espacio-2: 16px;
  --espacio-3: 24px;
  --espacio-4: 32px;
  --espacio-5: 40px;
  --espacio-6: 48px;
  --espacio-8: 64px;
  --espacio-10: 80px;
  --espacio-12: 96px;
  --espacio-16: 128px;
  --espacio-20: 160px;
  --espacio-24: 192px;

  /* ---------- Grillas (las más usadas en HTML) ---------- */
  --grilla-post-4x5-margen: 64px;
  --grilla-post-4x5-columna: 132px;
  --grilla-post-4x5-medianil: 32px;
  --grilla-reel-9x16-libre-arriba: 270px;
  --grilla-reel-9x16-libre-abajo: 672px;
  --grilla-historia-9x16-libre-arriba: 270px;
  --grilla-historia-9x16-libre-abajo: 270px;
  --grilla-horizontal-16x9-margen: 96px;
  --grilla-web-contenido-max: 1312px;
  --grilla-web-margen: clamp(16px, 4.444vw, 64px);

  /* ---------- Superficies: un solo radio, sin sombras ---------- */
  --radio-0: 0;

  /* ---------- Ficha de servicio (tamaños por formato) ---------- */
  --ficha-lienzo-1080-ancho: 460px;  --ficha-lienzo-1080-relleno: 32px;
  --ficha-lienzo-1080-nombre: 96px;  --ficha-lienzo-1080-item: 32px;
  --ficha-lienzo-1080-precio: 48px;  --ficha-lienzo-1080-plazo: 32px;
  --ficha-lienzo-1920-ancho: 400px;  --ficha-lienzo-1920-relleno: 28px;
  --ficha-lienzo-1920-nombre: 84px;  --ficha-lienzo-1920-item: 28px;   /* video 16:9 y LinkedIn */
  --ficha-lienzo-1920-precio: 42px;  --ficha-lienzo-1920-plazo: 28px;
  --ficha-web-ancho: 280px;          --ficha-web-relleno: 20px;
  --ficha-web-nombre: 56px;          --ficha-web-item: 18px;
  --ficha-web-precio: 28px;          --ficha-web-plazo: 18px;
  --ficha-a4-ancho: 50mm;            --ficha-a4-relleno: 3.5mm;
  --ficha-a4-nombre: 30pt;           --ficha-a4-item: 10pt;
  --ficha-a4-precio: 15pt;           --ficha-a4-plazo: 10pt;

  /* ---------- Video ---------- */
  --video-subtitulos-tamano-9x16: 60px;
  --video-subtitulos-tamano-16x9: 56px;
  --video-subtitulos-relleno-vertical: 8px;
  --video-subtitulos-relleno-horizontal: 16px;

  /* ---------- Movimiento ---------- */
  --duracion-rapida: 150ms;
  --duracion-media: 300ms;
  --duracion-barrido-ficha: 600ms;
  --duracion-cierre: 1500ms;
  --duracion-rotulo-min: 2500ms;
  --curva-entrada: cubic-bezier(0.16, 1, 0.3, 1);
  --curva-estandar: cubic-bezier(0.2, 0, 0, 1);

  /* ---------- Variables activas (las cambia el formato; por defecto: web) ---------- */
  --t-nota: var(--escala-web-nota);
  --t-texto: var(--escala-web-texto);
  --t-subtitulo: var(--escala-web-subtitulo);
  --t-titular-s: var(--escala-web-titular-s);
  --t-titular-m: var(--escala-web-titular-m);
  --t-titular-l: var(--escala-web-titular-l);
  --t-cifra: var(--escala-web-cifra);
  --t-display: var(--escala-web-display);
  --t-subtitulo-video: var(--escala-web-texto);
  --lh-texto: 1.5;
  --medida-texto: 68ch;
  --filete-ancho: 2px;   /* ajuste aprobado: filete Tinta de 2 px (de pantalla). Lienzos: 4 px; A4: 1,5 pt = 2 px */
  --ficha-ancho: var(--ficha-web-ancho);
  --ficha-relleno: var(--ficha-web-relleno);
  --ficha-nombre: var(--ficha-web-nombre);
  --ficha-item: var(--ficha-web-item);
  --ficha-precio: var(--ficha-web-precio);
  --ficha-plazo: var(--ficha-web-plazo);
  --logo-alto: 40px;
}

/* ==========================================================================
   Formatos: cambian la escala activa. Una pieza declara uno.
   ========================================================================== */
.formato-1080, .lienzo-post, .lienzo-vertical {
  --t-nota: var(--escala-lienzo-1080-nota);
  --t-texto: var(--escala-lienzo-1080-texto);
  --t-subtitulo: var(--escala-lienzo-1080-subtitulo);
  --t-titular-s: var(--escala-lienzo-1080-titular-s);
  --t-titular-m: var(--escala-lienzo-1080-titular-m);
  --t-titular-l: var(--escala-lienzo-1080-titular-l);
  --t-cifra: var(--escala-lienzo-1080-cifra-m);
  --t-display: var(--escala-lienzo-1080-display);
  --t-subtitulo-video: var(--escala-lienzo-1080-subtitulo-video);
  --lh-texto: 1.3;
  --medida-texto: none;
  --filete-ancho: 4px;
  --ficha-ancho: var(--ficha-lienzo-1080-ancho);
  --ficha-relleno: var(--ficha-lienzo-1080-relleno);
  --ficha-nombre: var(--ficha-lienzo-1080-nombre);
  --ficha-item: var(--ficha-lienzo-1080-item);
  --ficha-precio: var(--ficha-lienzo-1080-precio);
  --ficha-plazo: var(--ficha-lienzo-1080-plazo);
  --logo-alto: 64px;
}
.formato-1920, .lienzo-horizontal {
  --t-nota: var(--escala-lienzo-1920-nota);
  --t-texto: var(--escala-lienzo-1920-texto);
  --t-subtitulo: var(--escala-lienzo-1920-subtitulo);
  --t-titular-s: var(--escala-lienzo-1920-titular-s);
  --t-titular-m: var(--escala-lienzo-1920-titular-m);
  --t-titular-l: var(--escala-lienzo-1920-titular-l);
  --t-cifra: var(--escala-lienzo-1920-cifra);
  --t-display: var(--escala-lienzo-1920-display);
  --t-subtitulo-video: var(--escala-lienzo-1920-subtitulo-video);
  --lh-texto: 1.3;
  --medida-texto: none;
  --filete-ancho: 4px;
  --ficha-ancho: var(--ficha-lienzo-1920-ancho);
  --ficha-relleno: var(--ficha-lienzo-1920-relleno);
  --ficha-nombre: var(--ficha-lienzo-1920-nombre);
  --ficha-item: var(--ficha-lienzo-1920-item);
  --ficha-precio: var(--ficha-lienzo-1920-precio);
  --ficha-plazo: var(--ficha-lienzo-1920-plazo);
  --logo-alto: 64px;
}
.formato-a4 {
  --t-nota: var(--escala-a4-pie);
  --t-texto: var(--escala-a4-texto);
  --t-subtitulo: var(--escala-a4-subtitulo);
  --t-titular-s: var(--escala-a4-titular-s);
  --t-titular-m: var(--escala-a4-titular-m);
  --t-titular-l: var(--escala-a4-titular-l);
  --t-cifra: var(--escala-a4-total);
  --lh-texto: 1.45;
  --medida-texto: none;
  --filete-ancho: 1.5pt;
  --ficha-ancho: var(--ficha-a4-ancho);
  --ficha-relleno: var(--ficha-a4-relleno);
  --ficha-nombre: var(--ficha-a4-nombre);
  --ficha-item: var(--ficha-a4-item);
  --ficha-precio: var(--ficha-a4-precio);
  --ficha-plazo: var(--ficha-a4-plazo);
  --logo-alto: 14mm;
}
.formato-a4-mayor {
  --t-nota: var(--escala-a4-publico-mayor-pie);
  --t-texto: var(--escala-a4-publico-mayor-texto);
  --t-subtitulo: var(--escala-a4-publico-mayor-subtitulo);
  --t-titular-s: var(--escala-a4-publico-mayor-titular-s);
  --t-titular-m: var(--escala-a4-publico-mayor-titular-s);
  --t-titular-l: var(--escala-a4-publico-mayor-titular-l);
  --t-cifra: var(--escala-a4-publico-mayor-precio);
  --lh-texto: 1.45;
  --medida-texto: none;
  --filete-ancho: 1.5pt;
  --ficha-ancho: var(--ficha-a4-ancho);
  --ficha-relleno: var(--ficha-a4-relleno);
  --ficha-nombre: var(--ficha-a4-nombre);
  --ficha-item: var(--ficha-a4-item);
  --ficha-precio: var(--ficha-a4-precio);
  --ficha-plazo: var(--ficha-a4-plazo);
  --logo-alto: 16mm;
}
/* LinkedIn 1200 × 627: titulares de la escala de 1080, ficha de 1920 (400 × 500), nada bajo 28 px */
.lienzo-linkedin {
  --t-nota: var(--escala-lienzo-1920-nota);
  --t-texto: var(--escala-lienzo-1080-texto);
  --t-subtitulo: var(--escala-lienzo-1080-subtitulo);
  --t-titular-s: var(--escala-lienzo-1080-titular-s);
  --t-titular-m: var(--escala-lienzo-1080-titular-s);
  --t-titular-l: var(--escala-lienzo-1080-titular-s);
  --lh-texto: 1.3;
  --medida-texto: none;
  --filete-ancho: 4px;
  --ficha-ancho: var(--ficha-lienzo-1920-ancho);
  --ficha-relleno: var(--ficha-lienzo-1920-relleno);
  --ficha-nombre: var(--ficha-lienzo-1920-nombre);
  --ficha-item: var(--ficha-lienzo-1920-item);
  --ficha-precio: var(--ficha-lienzo-1920-precio);
  --ficha-plazo: var(--ficha-lienzo-1920-plazo);
  --logo-alto: 48px;
}

/* Lienzos de tamaño fijo para piezas generadas en HTML y exportadas con captura */
.lienzo-post, .lienzo-vertical, .lienzo-horizontal, .lienzo-linkedin {
  position: relative; overflow: hidden; box-sizing: border-box;
  background: var(--col-fondo); color: var(--col-texto);
}
.lienzo-post       { width: 1080px; height: 1350px; }
.lienzo-vertical   { width: 1080px; height: 1920px; }
.lienzo-horizontal { width: 1920px; height: 1080px; }
.lienzo-linkedin   { width: 1200px; height: 627px; }

/* ==========================================================================
   Servicio de la pieza: fija el acento y el texto sobre el acento.
   ========================================================================== */
[data-servicio="video"],   .servicio-video   { --col-acento: var(--servicio-video-acento);   --col-sobre-acento: var(--servicio-video-sobre); }
[data-servicio="web"],     .servicio-web     { --col-acento: var(--servicio-web-acento);     --col-sobre-acento: var(--servicio-web-sobre); }
[data-servicio="redes"],   .servicio-redes   { --col-acento: var(--servicio-redes-acento);   --col-sobre-acento: var(--servicio-redes-sobre); }
[data-servicio="fondos"],  .servicio-fondos  { --col-acento: var(--servicio-fondos-acento);  --col-sobre-acento: var(--servicio-fondos-sobre); }
[data-servicio="agencia"], .servicio-agencia { --col-acento: var(--servicio-agencia-acento); --col-sobre-acento: var(--servicio-agencia-sobre); }

/* ==========================================================================
   Modos de intensidad
   ========================================================================== */
.modo-silencioso { background: var(--col-fondo); color: var(--col-texto); }        /* documentos: PDF que se envía en Papel */
.modo-silencioso.para-imprimir { background: var(--col-superficie); }              /* impreso en la oficina: Blanco */
.modo-medio      { background: var(--col-fondo); color: var(--col-texto); }        /* posts de catálogo, tips, carruseles */
.modo-fuerte     { background: var(--col-acento); color: var(--col-sobre-acento);  /* reels y anuncios: la pieza entera es la ficha */
                   --col-linea: var(--col-sobre-acento); --col-texto-suave: var(--col-sobre-acento); }
.fondo-inverso   { background: var(--col-fondo-inverso); color: var(--col-texto-inverso);
                   --col-linea: var(--col-linea-inversa); --col-texto-suave: var(--col-texto-inverso); }
/* Al exportar a PDF desde Chrome (cotizador) los fondos de color no se pierden */
.modo-silencioso, .modo-medio, .modo-fuerte, .fondo-inverso, .ficha,
.lienzo-post, .lienzo-vertical, .lienzo-horizontal, .lienzo-linkedin {
  -webkit-print-color-adjust: exact; print-color-adjust: exact;
}

/* ==========================================================================
   Base mínima
   ========================================================================== */
body {
  margin: 0;
  background: var(--col-fondo);
  color: var(--col-texto);
  font-family: var(--fuente-texto);
  font-weight: var(--peso-texto-regular);
  font-size: var(--t-texto);
  line-height: var(--lh-texto);
}
:focus-visible { outline: 3px solid var(--col-texto); outline-offset: 2px; }

/* ==========================================================================
   Tipografía
   ========================================================================== */
.titular {
  margin: 0;
  font-family: var(--fuente-display);
  font-weight: var(--peso-display-black);
  font-stretch: var(--ancho-condensado);
  font-size: var(--t-titular-m);
  line-height: 0.95;
  letter-spacing: -0.01em;
  font-variant-numeric: tabular-nums lining-nums;
  text-wrap: balance;
}
.titular--s { font-size: var(--t-titular-s); }
.titular--l { font-size: var(--t-titular-l); }
.formato-a4 .titular, .formato-a4-mayor .titular { font-weight: var(--peso-display-extrabold); line-height: 1.05; }
/* A4: todo lo fuerte es 800 (Archivo 800 + 700, Atkinson 400 + 800). Así la cotización no junta 900, 800 y 700 */
.formato-a4 :is(.cifra, .ficha__nombre, .ficha__precio, .tabla-precios .precio),
.formato-a4-mayor :is(.cifra, .ficha__nombre, .ficha__precio, .tabla-precios .precio) { font-weight: var(--peso-display-extrabold); }
.formato-a4 :is(.etiqueta, .tabla-precios thead th),
.formato-a4-mayor :is(.etiqueta, .tabla-precios thead th) { font-weight: var(--peso-texto-extrabold); }

.subtitulo {
  margin: 0;
  font-family: var(--fuente-display);
  font-weight: var(--peso-display-bold);
  font-stretch: var(--ancho-normal);
  font-size: var(--t-subtitulo);
  line-height: 1.1;
  letter-spacing: -0.005em;
  font-variant-numeric: tabular-nums lining-nums;
}

.cifra {
  margin: 0;
  font-family: var(--fuente-display);
  font-weight: var(--peso-display-black);
  font-stretch: var(--ancho-condensado);
  font-size: var(--t-cifra);
  line-height: 1;
  letter-spacing: -0.01em;
  font-variant-numeric: tabular-nums lining-nums;
  white-space: nowrap;
}
.cifra--display {
  font-stretch: var(--ancho-extracondensado);
  font-size: var(--t-display);
  line-height: 0.9;
  letter-spacing: -0.02em;
}

.texto {
  margin: 0;
  font-family: var(--fuente-texto);
  font-weight: var(--peso-texto-regular);
  font-size: var(--t-texto);
  line-height: var(--lh-texto);
  letter-spacing: 0;
  max-width: var(--medida-texto);
}
.texto strong, .texto b { font-weight: var(--peso-texto-semibold); }
.formato-a4 .texto :is(strong, b), .formato-a4-mayor .texto :is(strong, b) { font-weight: var(--peso-texto-extrabold); }

.etiqueta {
  font-family: var(--fuente-texto);
  font-weight: var(--peso-texto-semibold);
  font-size: var(--t-nota);
  line-height: 1.2;
  letter-spacing: 0;
  text-transform: none;
}

.nota {
  margin: 0;
  font-family: var(--fuente-texto);
  font-weight: var(--peso-texto-regular);
  font-size: var(--t-nota);
  line-height: 1.3;
  color: var(--col-texto-suave);
}

/* Datos: todo lo que es cifra o registro (fechas, plazos, folios, cantidades, teléfonos destacados).
   Archivo tiene cero sin barra; Atkinson no. Dentro de una frase: <span class="dato">$250.000 + IVA</span> */
.dato, .pie-registro {
  font-family: var(--fuente-display);
  font-weight: var(--peso-display-bold);
  font-stretch: var(--ancho-normal);
  font-variant-numeric: tabular-nums lining-nums;
  letter-spacing: 0;
}
.pie-registro {
  margin: var(--espacio-2) 0 0;
  max-width: var(--ficha-ancho);
  font-size: var(--t-nota);
  line-height: 1.25;
  color: var(--col-texto-suave);
}

.sin-corte { white-space: nowrap; }   /* precios, plazos y teléfonos que no se parten */

.filete {
  border: 0;
  border-top: var(--filete-ancho) solid var(--col-linea);
  margin: 0;
}

/* ==========================================================================
   Ficha de servicio (componente central)
   Estructura:
   <div class="ficha ficha--rec">
     <p class="ficha__nombre">video</p>
     <p class="ficha__item">Video corporativo de 1–2 min</p>
     <p class="ficha__precio">$450.000 + IVA</p>
     <p class="ficha__plazo">15 días hábiles, 1 video</p>
   </div>
   ========================================================================== */
.ficha {
  --ficha-fondo: var(--col-acento);
  --ficha-texto: var(--col-sobre-acento);
  box-sizing: border-box;
  width: var(--ficha-ancho);
  aspect-ratio: 4 / 5;
  padding: var(--ficha-relleno);
  display: flex;
  flex-direction: column;
  justify-content: flex-end;
  background: var(--ficha-fondo);
  color: var(--ficha-texto);
  border: var(--filete-ancho) solid var(--prim-tinta);   /* el filete de la ficha es siempre Tinta: 2 px web, 4 px lienzos, 1,5 pt A4 */
  border-radius: var(--radio-0);
  box-shadow: none;
}
.ficha > * { margin: 0; }
.ficha--rec     { --ficha-fondo: var(--prim-rec);     --ficha-texto: var(--prim-tinta); }
.ficha--bote    { --ficha-fondo: var(--prim-bote);    --ficha-texto: var(--prim-papel); }
.ficha--tejuela { --ficha-fondo: var(--prim-tejuela); --ficha-texto: var(--prim-tinta); }
.ficha--potrero { --ficha-fondo: var(--prim-potrero); --ficha-texto: var(--prim-papel); }
.ficha--tinta   { --ficha-fondo: var(--prim-tinta);   --ficha-texto: var(--prim-papel); }

.ficha__nombre {
  font-family: var(--fuente-display);
  font-weight: var(--peso-display-black);
  font-stretch: var(--ancho-condensado);
  font-size: var(--ficha-nombre);
  line-height: 0.9;
  letter-spacing: -0.01em;
  margin-bottom: calc(var(--ficha-relleno) / 2) !important;
}
.ficha__item {
  font-family: var(--fuente-display);
  font-weight: var(--peso-display-bold);
  font-stretch: var(--ancho-normal);
  font-size: var(--ficha-item);
  line-height: 1.2;
  font-variant-numeric: tabular-nums lining-nums;
}
.ficha__precio {
  font-family: var(--fuente-display);
  font-weight: var(--peso-display-black);
  font-stretch: var(--ancho-condensado);
  font-size: var(--ficha-precio);
  line-height: 1.1;
  font-variant-numeric: tabular-nums lining-nums;
}   /* «$250.000&nbsp;+&nbsp;IVA al&nbsp;mes»: «al mes» puede bajar de línea, pero junto */
.ficha__plazo {
  font-family: var(--fuente-display);
  font-weight: var(--peso-display-bold);
  font-stretch: var(--ancho-normal);
  font-size: var(--ficha-plazo);
  line-height: 1.2;
  font-variant-numeric: tabular-nums lining-nums;
}
/* Modo fuerte: la ficha es la pieza entera, sin filete */
.ficha--sangre { width: 100%; height: 100%; aspect-ratio: auto; border: 0; }
/* Sobre fondo Tinta el filete Tinta no se ve, y está bien: el nombre escrito identifica la ficha.
   La ficha Tinta nunca va sobre fondo Tinta. */

/* Barrido de marca: la ficha entra de abajo hacia arriba en 600 ms; el texto aparece por corte al final */
@keyframes ac-barrido-ficha { from { clip-path: inset(100% 0 0 0); } to { clip-path: inset(0 0 0 0); } }
@keyframes ac-corte { from { visibility: hidden; } to { visibility: visible; } }
.ficha--barrido { animation: ac-barrido-ficha var(--duracion-barrido-ficha) var(--curva-entrada) both; }
.ficha--barrido > * { animation: ac-corte var(--duracion-barrido-ficha) step-end both; }

/* Muestrario oficial: solo pie de web, firma, tarjeta, cierre de video, portada del catálogo (impresa o /servicios en la web)
   y «El año en colores». Orden fijo: video, web, redes, fondos. Fichas compactas: solo .ficha__nombre */
.muestrario { display: flex; gap: var(--espacio-2); }
.muestrario > .ficha { --ficha-ancho: 160px; --ficha-relleno: 16px; --ficha-nombre: 28px; }
@media (max-width: 639px) {
  .muestrario { gap: var(--espacio-1); }
  .muestrario > .ficha { --ficha-ancho: calc((100% - 24px) / 4); --ficha-relleno: 8px; --ficha-nombre: 16px; }
}

/* ==========================================================================
   Web: botón, enlace, tabla de precios
   ========================================================================== */
.boton {
  display: inline-flex; align-items: center; box-sizing: border-box;
  min-height: 48px; padding: 0 var(--espacio-3);
  font-family: var(--fuente-texto); font-weight: var(--peso-texto-semibold);
  font-size: 1.125rem; line-height: 1.2; text-decoration: none;
  background: var(--col-fondo-inverso); color: var(--col-texto-inverso);
  border: 2px solid var(--col-linea); border-radius: var(--radio-0);
  transition: background-color var(--duracion-rapida) var(--curva-estandar), color var(--duracion-rapida) var(--curva-estandar);
}
.boton:hover { background: var(--col-fondo); color: var(--col-texto); }
.boton--servicio { background: var(--col-acento); color: var(--col-sobre-acento); }
.boton--servicio:hover { background: var(--col-fondo-inverso); color: var(--col-texto-inverso); }
.enlace { color: inherit; text-decoration: underline; text-decoration-thickness: 2px; text-underline-offset: 4px; }

.tabla-precios { width: 100%; border-collapse: collapse; font-variant-numeric: tabular-nums lining-nums; }
.tabla-precios th, .tabla-precios td { padding: var(--espacio-1) var(--espacio-2) var(--espacio-1) 0; border-bottom: 1px solid var(--col-linea); text-align: left; vertical-align: top; }
.tabla-precios thead th { font-family: var(--fuente-texto); font-weight: var(--peso-texto-semibold); border-bottom-width: var(--filete-ancho); }
.tabla-precios .precio { font-family: var(--fuente-display); font-weight: var(--peso-display-black); font-stretch: var(--ancho-condensado); text-align: right; white-space: nowrap; padding-right: 0; }
.tabla-precios .cantidad { text-align: right; }
.formato-a4 .tabla-precios, .formato-a4-mayor .tabla-precios { font-size: var(--escala-a4-tabla); }
.formato-a4-mayor .tabla-precios { font-size: var(--escala-a4-publico-mayor-texto); }
.formato-a4-mayor .tabla-precios .precio { font-size: var(--escala-a4-publico-mayor-precio); }
.formato-a4 .tabla-precios :is(th, td), .formato-a4-mayor .tabla-precios :is(th, td) { padding-top: 2mm; padding-bottom: 2mm; border-bottom-width: 0.5pt; }
.formato-a4 .tabla-precios thead th, .formato-a4-mayor .tabla-precios thead th { border-bottom-width: var(--filete-ancho); }

/* ==========================================================================
   Video (HTML / Remotion): subtítulos
   ========================================================================== */
.subtitulo-video {
  display: inline-block; max-width: 100%; box-sizing: border-box; text-align: center;
  font-family: var(--fuente-texto); font-weight: var(--peso-texto-semibold);
  font-size: var(--t-subtitulo-video); line-height: 1.2;
  background: var(--col-fondo-inverso); color: var(--col-texto-inverso);
  padding: var(--video-subtitulos-relleno-vertical) var(--video-subtitulos-relleno-horizontal);
}   /* una sola caja para las 1–2 líneas; el corte de línea se escribe a mano (<br>) */

/* ==========================================================================
   Logo: siempre desde design_system/logo/ (logo final E3a «Disco REC»; ver logo/LEEME.md).
   Nunca un isotipo_<color>.svg sobre un fondo de su mismo color (modo fuerte): ahí va
   logo_sobre_<servicio>.svg a una tinta. El logo no se recolorea ni se redibuja a mano.
   <img class="logo" src="logo/logo_horizontal.svg" alt="Agencia Colores">
   <span class="logo-pendiente">LOGO</span>
   ========================================================================== */
.logo { display: block; height: var(--logo-alto); width: auto; }
.logo-pendiente {
  display: inline-flex; align-items: center; justify-content: center; box-sizing: border-box;
  height: var(--logo-alto); aspect-ratio: 693 / 184;
  border: 2px solid var(--col-texto-suave); color: var(--col-texto-suave); background: transparent;
  font-family: var(--fuente-texto); font-weight: var(--peso-texto-semibold);
  font-size: calc(var(--logo-alto) * 0.35); letter-spacing: 0;
}
.logo-pendiente--cuadrado { aspect-ratio: 1; font-size: calc(var(--logo-alto) * 0.22); }   /* isotipo, avatar, favicon */

/* ==========================================================================
   Movimiento reducido: todo aparece completo, sin animación
   ========================================================================== */
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { animation: none !important; transition: none !important; }
}