/* ==========================================================================
   Más DTF — Tokens de diseño (fase 2)
   Paleta: colores reales del logo (D1 revisada el 6-9-2026).

   Los colores se sobrescriben en tiempo de ejecución desde el kit de Elementor
   (ver inc/colores-kit.php). Los valores de aquí son el respaldo: si un color
   global falta o se borra en Ajustes del sitio, la web sigue siendo legible y
   cumpliendo AA.

   Reglas que no se rompen:
     · azul = acción           (botones, enlaces)
     · amarillo = urgencia     (contador, envío gratis, badges)
     · rojo y verde = marca y estados, nunca botones ni enlaces
   ========================================================================== */

:root {
  /* --- Colores de marca (los del logo) ---------------------------------- */
  --md-grafito:     #343A40;  /* "MAS DTF" del logo. Fondo oscuro y texto    */
  --md-azul:        #046DB5;  /* Acción: botón primario y enlaces sobre claro */
  --md-rojo:        #E74435;  /* Solo relleno de marca. NUNCA texto ni botón  */
  --md-amarillo:    #F6BB13;  /* Urgencia: badge y contador, texto grafito    */
  --md-verde:       #2FAA55;  /* Solo relleno/icono de estado correcto        */

  /* --- Neutros ----------------------------------------------------------- */
  --md-film:        #F2F3F0;  /* Fondo de página en secciones alternas       */
  --md-blanco:      #FFFFFF;  /* Superficie de tarjeta, cabecera             */
  --md-gris-texto:  #585F6B;  /* Texto secundario (6,43:1 / 5,78:1)          */
  --md-borde:       #D5D8DC;  /* Bordes y divisores (decorativos)            */

  /* --- Tonos de trabajo derivados ---------------------------------------
     El azul de marca cumple AA de las dos formas (texto sobre claro 5,44:1 y
     fondo de botón con blanco 5,44:1), así que no necesita un tono aparte para
     texto: solo un hover y una versión clara para las secciones oscuras.
     El rojo y el verde sí lo necesitan: los vivos no llegan a AA sobre blanco. */
  --md-azul-hover:  #035C99;  /* Hover/active de botón y enlace (7,01:1)     */
  --md-azul-claro:  #57B4E8;  /* Acción sobre grafito (4,99:1)               */
  --md-rojo-texto:  #C4291B;  /* Urgencia como texto sobre claro (5,71:1)    */
  --md-verde-texto: #1E7A3C;  /* Estado correcto como texto (5,38:1)         */
  --md-gris-claro:  #C3C7CE;  /* Texto secundario sobre grafito (6,78:1)     */

  /* --- Roles semánticos --------------------------------------------------
     Usa estos en las secciones, no los tokens de arriba. Así una sección
     oscura solo redefine este bloque. */
  --c-fondo:         var(--md-blanco);
  --c-texto:         var(--md-grafito);
  --c-texto-2:       var(--md-gris-texto);
  --c-titulo:        var(--md-grafito);
  --c-enlace:        var(--md-azul);
  --c-enlace-hover:  var(--md-azul-hover);
  --c-borde:         var(--md-borde);
  --c-foco:          var(--md-azul);
  --c-urgencia:      var(--md-rojo-texto);   /* urgencia como texto */

  /* --- Tipografía --------------------------------------------------------
     Decisión 9-9-2026: la web sigue la demo «Print on Demand» de PrintSpace,
     que usa una sola familia. Manrope en todo: titulares, texto y cifras
     (tiene tabular-nums). Archivo e IBM Plex quedan fuera. Los tres pesos se
     autoalojan en assets/fonts/ (ver LEEME.md). */
  --ff-texto:  'Manrope', system-ui, -apple-system, 'Segoe UI', Roboto, Arial, sans-serif;
  --ff-titulo: var(--ff-texto);
  --ff-cifra:  var(--ff-texto);

  --fw-titulo: 700;
  --fw-subtitulo: 600;
  --fw-texto: 500;      /* la demo compone el texto en 500 */
  --fw-etiqueta: 500;
  --fw-enfasis: 600;

  --wdth-expanded: 100%;  /* Manrope no tiene eje de anchura */

  /* --- Escala tipográfica ------------------------------------------------
     Tamaños de los estilos de haru-heading de la demo Print on Demand
     (heading-1 64→32, heading-2 48→24, heading-3 32→24, description-1 20→16,
     contador 48→30 px), interpolados entre 360 y 1440 px. Así las secciones
     propias miden lo mismo que los bloques clonados de la demo. */
  --fs-m1: 0.8125rem;                                     /* 13 px          */
  --fs-0:  1rem;                                          /* 16 px          */
  --fs-1:  clamp(1rem,     0.917rem + 0.37vw, 1.25rem);   /* 16 → 20 px     */
  --fs-2:  clamp(1.5rem,   1.333rem + 0.74vw, 2rem);      /* 24 → 32 px     */
  --fs-3:  clamp(1.5rem,   1rem + 2.22vw, 3rem);          /* 24 → 48 px     */
  --fs-4:  clamp(1.875rem, 1.5rem + 1.67vw, 3rem);        /* 30 → 48 px     */
  --fs-5:  clamp(2rem,     1.333rem + 2.96vw, 4rem);      /* 32 → 64 px     */

  --lh-titulo: 1.15;      /* heading-1 de la demo */
  --lh-subtitulo: 1.25;   /* heading-2 de la demo */
  --lh-texto: 1.8;        /* body de la demo */
  --lh-entradilla: 1.6;   /* description-1 de la demo */
  --lh-pequeno: 1.4;
  --lh-ui: 1;

  --measure: 72ch;

  /* --- Espaciado (múltiplos de 4 px) ------------------------------------- */
  --sp-1:  0.25rem;  --sp-2:  0.5rem;   --sp-3:  0.75rem;  --sp-4:  1rem;
  --sp-5:  1.25rem;  --sp-6:  1.5rem;   --sp-8:  2rem;     --sp-10: 2.5rem;
  --sp-12: 3rem;     --sp-14: 3.5rem;   --sp-16: 4rem;

  /* Ritmo vertical: TODAS las secciones usan el mismo. */
  --sec-y: clamp(3rem, 8vw, 7rem);   /* 48 → 112 px */

  /* --- Layout ------------------------------------------------------------ */
  --wrap: 1200px;
  --gutter: 1.5rem;  /* 24 px */

  /* --- Radios ------------------------------------------------------------ */
  --r-s: 4px;    /* inputs, badges, celdas      */
  --r-boton: 48px; /* cápsula, como la demo (decisión 9-9-2026; anula los 8 px del 7-9) */
  --r-m: 12px;   /* tarjetas, imágenes          */
  --r-l: 20px;   /* tarjetas grandes, como la demo */

  /* --- Sombra ------------------------------------------------------------
     Una sola en toda la web, para el bloque del montador en el hero. */
  --shadow-hero: 0 1px 2px rgba(52, 58, 64, .06),
                 0 12px 32px -8px rgba(52, 58, 64, .20);

  /* --- Foco -------------------------------------------------------------- */
  --foco-grosor: 3px;
  --foco-offset: 2px;

  /* --- Movimiento --------------------------------------------------------
     Hover: cambio de color y subrayado. Nada se desplaza ni se levanta. */
  --t-rapida: 120ms;
  --t-normal: 200ms;
  --easing: cubic-bezier(.2, 0, 0, 1);
}

/* Secciones sobre grafito. Solo se redefinen los roles, nunca los tokens.
   Sobre grafito el azul de marca no llega a AA (2,11:1): manda el azul claro.
   El rojo tampoco (2,89:1), así que aquí la urgencia va en amarillo (6,59:1). */
.md-oscuro,
.md-util,
.md-cta,
.md-footer {
  --c-fondo:        var(--md-grafito);
  --c-texto:        var(--md-blanco);
  --c-texto-2:      var(--md-gris-claro);
  --c-titulo:       var(--md-blanco);
  --c-enlace:       var(--md-azul-claro);
  --c-enlace-hover: #8CCBEE;
  --c-borde:        #4A515A;
  --c-foco:         var(--md-azul-claro);
  --c-urgencia:     var(--md-amarillo);
  background-color: var(--c-fondo);
  color: var(--c-texto);
}

/* Secciones sobre film */
.md-film {
  --c-fondo: var(--md-film);
  background-color: var(--c-fondo);
}