/* ==========================================================================
   EQWeb / Comercial Parra — DESIGN SYSTEM MAESTRO (congelado 2026-08-20)
   ==========================================================================

   ESTADO: PREPARADO, NO CONECTADO A NINGUNA VISTA TODAVÍA.

   Este archivo NO está enlazado desde theme/head.php, theme/menu.php ni
   ninguna vista — 0 impacto visual mientras nadie lo importe. Es la capa
   compartida que se irá adoptando pantalla por pantalla, empezando por
   Login (REDISEÑO #01), según MIGRATION-RULES.md.

   Fuente de verdad de los tokens: son la fusión de los 3 archivos que ya
   estaban de acuerdo entre sí (home.css, cajaapertura.php inline,
   cajacierre_nuevo.php inline). login.css y recovery.css tenían valores
   ligeramente distintos (drift documentado en DESIGN-SYSTEM.md, sección
   "Drift de tokens detectado") — cuando se rediseñe Login, sus tokens
   propios deben reemplazarse por los de aquí, no al revés.

   AISLAMIENTO (regla 28 del macrolote): todo selector va prefijado
   `.cp-*`. CERO reglas globales de elemento (table{}, button{}, input{})
   que puedan alterar Pago Rápido (factura_deposito.php) o cualquier
   pantalla todavía no migrada. Ver EXCLUDED-MODULES.md.
   ========================================================================== */


/* --------------------------------------------------------------------------
   1. TIPOGRAFÍA — self-hosted, ya existente en public/fonts/redesign/login/
   -------------------------------------------------------------------------- */

@font-face {
  font-family: "Patrick Hand";
  src: url("/public/fonts/redesign/login/PatrickHand-Regular.woff2") format("woff2");
  font-weight: 400;
  font-style: normal;
  font-display: swap;
}

@font-face {
  font-family: "Nunito Sans";
  src: url("/public/fonts/redesign/login/NunitoSans-Variable.woff2") format("woff2");
  font-weight: 400 700;
  font-style: normal;
  font-display: swap;
}

@font-face {
  font-family: "Kalam";
  src: url("/public/fonts/redesign/login/Kalam-Regular.woff2") format("woff2");
  font-weight: 400;
  font-style: normal;
  font-display: swap;
}

@font-face {
  font-family: "Kalam";
  src: url("/public/fonts/redesign/login/Kalam-Bold.woff2") format("woff2");
  font-weight: 700;
  font-style: normal;
  font-display: swap;
}
/* Kalam queda disponible pero NO es parte del sistema oficial (regla 7 del
   macrolote solo aprueba Patrick Hand + Nunito Sans). No usarla en
   componentes nuevos salvo instrucción explícita. */


/* --------------------------------------------------------------------------
   2. TOKENS — paleta, spacing, radios, sombras, tipografía, animación
   -------------------------------------------------------------------------- */

.cp-scope {
  /* Paleta (regla 6 del macrolote — inmutable) */
  --cp-ink: #0A3558;          /* primario: azul marino profundo (2026-08-22, paleta tipografica nueva) */
  --cp-heading: #0A3558;      /* titulos/encabezados */
  --cp-teal: #0B7A82;         /* acento: turquesa */
  --cp-teal-light: #39B8C8;   /* acento: celeste acuarela */
  --cp-teal-dark: #0A6970;
  --cp-orange: #E99A2E;       /* secundario: naranja/durazno suave */
  --cp-paper: #F7F1E7;        /* base: crema/marfil cálido */
  --cp-card: #FCFAF5;
  --cp-muted: #587188;        /* texto secundario: gris azulado (2026-08-22, paleta nueva) */
  --cp-border-soft: rgba(21, 60, 102, .16);

  /* Estados funcionales (regla 6 — nunca la identidad, solo semántica) */
  --cp-success: #3C8D70;      /* verde suave */
  --cp-warning: #E9C46A;      /* amarillo crema */
  --cp-danger: #D96C56;       /* coral suave — NO rojo agresivo */
  --cp-danger-strong: #dc2626; /* reservado solo para DELETE/confirmaciones críticas */
  --cp-info-bg: #FBEFE6;
  --cp-info-border: rgba(196, 120, 60, .28);

  /* Tipografía */
  --cp-font-hand: 'Patrick Hand', 'Segoe Print', cursive;
  --cp-font-body: 'Inter', 'Segoe UI', Arial, sans-serif;
  font-synthesis: none;

  /* Escala tipográfica (Inter, funcional -- ver nota 2026-08-22 arriba) */
  --cp-text-xs: 11.5px;
  --cp-text-sm: 13.5px;
  --cp-text-base: 14.5px;
  --cp-text-md: 16px;
  --cp-text-lg: 20px;
  --cp-text-xl: 28px;
  --cp-text-hero: 34px; /* Patrick Hand — solo títulos hero */

  /* Spacing (escala de 4px, observada en cajaapertura/cajacierre) */
  --cp-space-1: 4px;
  --cp-space-2: 8px;
  --cp-space-3: 12px;
  --cp-space-4: 16px;
  --cp-space-5: 18px;
  --cp-space-6: 22px;
  --cp-space-7: 24px;
  --cp-space-8: 30px;
  --cp-space-9: 40px;

  /* Radios (observados: pill para breadcrumb/CTA, 16-24px para tarjetas) */
  --cp-radius-sm: 12px;
  --cp-radius-md: 16px;
  --cp-radius-lg: 20px;
  --cp-radius-xl: 22px;
  --cp-radius-2xl: 24px;
  --cp-radius-pill: 999px;

  /* Sombras (observadas en .eq-cc-card / .eq-caja-hero) */
  --cp-shadow-sm: 0 4px 12px rgba(21, 60, 102, .06);
  --cp-shadow-md: 0 6px 16px rgba(21, 60, 102, .08);
  --cp-shadow-lg: 0 10px 22px rgba(21, 60, 102, .12);
  --cp-shadow-hero: 0 10px 22px rgba(21, 60, 102, .10);

  /* Animación (regla 26 del macrolote) */
  --cp-ease: cubic-bezier(.22, 1, .36, 1);
  --cp-duration-fast: 180ms;
  --cp-duration-base: 240ms;
  --cp-duration-slow: 300ms;

  font-family: var(--cp-font-body);
  color: var(--cp-ink);
  background: var(--cp-paper);
}

.cp-scope *,
.cp-scope *::before,
.cp-scope *::after {
  box-sizing: border-box;
}


/* --------------------------------------------------------------------------
   3. ANIMACIONES OFICIALES (regla 26)
   -------------------------------------------------------------------------- */

@keyframes cpFadeUp {
  from { opacity: 0; transform: translateY(10px); }
  to   { opacity: 1; transform: translateY(0); }
}

@keyframes cpModalIn {
  from { opacity: 0; transform: scale(.97); }
  to   { opacity: 1; transform: scale(1); }
}

@keyframes cpFloat {
  0%, 100% { transform: translateY(0); }
  50%      { transform: translateY(-6px); }
}

.cp-anim-page-enter { animation: cpFadeUp var(--cp-duration-slow) var(--cp-ease) forwards; }
.cp-anim-card       { animation: cpFadeUp var(--cp-duration-base) var(--cp-ease) forwards; opacity: 0; }
.cp-anim-modal       { animation: cpModalIn var(--cp-duration-fast) ease-out forwards; }
.cp-anim-float       { animation: cpFloat 5.5s ease-in-out infinite; }

@media (prefers-reduced-motion: reduce) {
  .cp-scope .cp-anim-page-enter,
  .cp-scope .cp-anim-card,
  .cp-scope .cp-anim-modal,
  .cp-scope .cp-anim-float,
  .cp-scope [class*="cp-anim-"] {
    animation: none !important;
    transition: none !important;
    opacity: 1 !important;
    transform: none !important;
  }
}


/* --------------------------------------------------------------------------
   4. BREADCRUMB OFICIAL (regla 15) — patrón ya usado en cajaapertura/cajacierre
   -------------------------------------------------------------------------- */

.cp-breadcrumb {
  display: flex;
  align-items: center;
  gap: var(--cp-space-2);
  min-height: 48px;
  padding: 0 var(--cp-space-7);
  margin-bottom: var(--cp-space-5);
  background: rgba(255, 253, 246, .9);
  border: 1px solid var(--cp-border-soft);
  border-radius: var(--cp-radius-pill);
  box-shadow: var(--cp-shadow-md);
  font-size: var(--cp-text-sm);
  color: var(--cp-muted);
}
.cp-breadcrumb a { color: var(--cp-ink); text-decoration: none; font-weight: 600; }
.cp-breadcrumb a:hover { color: var(--cp-teal); }
.cp-breadcrumb .cp-breadcrumb-current { color: var(--cp-teal); font-weight: 700; }
.cp-breadcrumb .cp-breadcrumb-sep { color: #a7b4bb; }


/* --------------------------------------------------------------------------
   5. PAGE HERO — 2 variantes únicas (regla 16)
   -------------------------------------------------------------------------- */

.cp-hero {
  position: relative;
  z-index: 1;
  display: flex;
  align-items: center;
  gap: var(--cp-space-8);
  min-height: 180px;
  padding: var(--cp-space-7) 36px;
  border-radius: var(--cp-radius-xl);
  background: linear-gradient(135deg, #FFFFFF 0%, var(--cp-paper) 100%);
  border: 1px solid var(--cp-border-soft);
  box-shadow: var(--cp-shadow-hero);
  overflow: hidden;
  isolation: isolate;
}
.cp-hero--compact { min-height: 100px; padding: var(--cp-space-5) var(--cp-space-7); gap: var(--cp-space-5); }
.cp-hero-decor { position: absolute; z-index: 0; pointer-events: none; opacity: .55; }
.cp-hero-illustration { position: relative; z-index: 1; flex: none; width: 150px; height: auto; filter: drop-shadow(0 8px 14px rgba(11,43,51,.18)); }
.cp-hero--compact .cp-hero-illustration { width: 90px; }
.cp-hero-copy { position: relative; z-index: 1; min-width: 0; }
.cp-hero-title { font-family: var(--cp-font-hand); font-size: var(--cp-text-hero); line-height: 1.15; margin: 0 0 var(--cp-space-2); color: var(--cp-ink); text-wrap: balance; }
.cp-hero--compact .cp-hero-title { font-size: var(--cp-text-xl); }
.cp-hero-subtitle { font-family: var(--cp-font-body); font-size: var(--cp-text-base); color: var(--cp-muted); margin: 0; }


/* --------------------------------------------------------------------------
   6. TARJETAS OFICIALES (regla 17)
   -------------------------------------------------------------------------- */

.cp-card {
  background: var(--cp-card);
  border: 1px solid var(--cp-border-soft);
  border-radius: var(--cp-radius-lg);
  padding: var(--cp-space-4) var(--cp-space-5);
  box-shadow: var(--cp-shadow-sm);
  transition: transform var(--cp-duration-base) ease, box-shadow var(--cp-duration-base) ease;
}
.cp-card:hover { transform: translateY(-3px); box-shadow: var(--cp-shadow-lg); }

.cp-card--kpi { display: flex; align-items: center; gap: var(--cp-space-3); }
.cp-card--kpi .cp-card-label { font-size: var(--cp-text-xs); text-transform: uppercase; letter-spacing: .4px; color: var(--cp-muted); font-weight: 700; margin: 0 0 3px; }
.cp-card--kpi .cp-card-value { font-size: var(--cp-text-md); font-weight: 800; color: var(--cp-ink); margin: 0; word-break: break-word; }

.cp-card--information { }
.cp-card--form { padding: var(--cp-space-6) var(--cp-space-6); }
.cp-card--financial { border-color: var(--cp-teal); }
.cp-card--financial .cp-card-value { color: var(--cp-teal-dark); }
.cp-card--empty { text-align: center; padding: var(--cp-space-9); }
.cp-card--warning { background: var(--cp-info-bg); border-color: var(--cp-info-border); }


/* --------------------------------------------------------------------------
   7. BOTONES OFICIALES (regla 18)
   -------------------------------------------------------------------------- */

.cp-btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: var(--cp-space-2);
  font-family: var(--cp-font-body);
  font-size: var(--cp-text-base);
  font-weight: 700;
  padding: 12px 22px;
  border-radius: var(--cp-radius-pill);
  border: 1px solid transparent;
  cursor: pointer;
  transition: transform var(--cp-duration-fast) ease, box-shadow var(--cp-duration-fast) ease, background var(--cp-duration-fast) ease;
}
.cp-btn:hover   { transform: translateY(-1px); }
.cp-btn:active,
.cp-btn.is-pressed { transform: scale(.98); }
.cp-btn:focus-visible { outline: 2px solid var(--cp-teal); outline-offset: 2px; }
.cp-btn:disabled,
.cp-btn.is-disabled { opacity: .5; cursor: not-allowed; transform: none; }
.cp-btn.is-loading { position: relative; color: transparent; pointer-events: none; }

.cp-btn--primary   { background: var(--cp-ink); color: #fff; }
.cp-btn--primary:hover { background: var(--cp-teal-dark); box-shadow: var(--cp-shadow-md); }
.cp-btn--secondary { background: var(--cp-card); color: var(--cp-ink); border-color: var(--cp-border-soft); }
.cp-btn--secondary:hover { border-color: var(--cp-teal); color: var(--cp-teal); }
.cp-btn--ghost      { background: transparent; color: var(--cp-ink); }
.cp-btn--ghost:hover { background: var(--cp-border-soft); }
.cp-btn--danger     { background: var(--cp-danger); color: #fff; }
.cp-btn--danger:hover { background: var(--cp-danger-strong); }
.cp-btn--icon       { padding: 10px; border-radius: 50%; }

/* CTA acuarela — SOLO para acciones protagonistas (regla 18): Iniciar
   sesión, Registrar apertura, Guardar, Confirmar, Cerrar caja, Finalizar
   operación. NO usar en botones secundarios/listados. Requiere el asset
   de botón ilustrado correspondiente (ver ICON-MAP.md /
   design-system-comercial-parra/buttons/) como imagen de fondo o
   background-image por variante — placeholder aquí, cada pantalla migrada
   asigna su propio boton-*.png ya aprobado. */
.cp-btn--watercolor-cta {
  background: transparent;
  border: none;
  padding: 0;
  border-radius: 0;
}
.cp-btn--watercolor-cta img { display: block; width: 100%; height: auto; transition: transform var(--cp-duration-fast) ease; }
.cp-btn--watercolor-cta:hover img { transform: translateY(-2px); }
.cp-btn--watercolor-cta:active img { transform: scale(.98); }


/* --------------------------------------------------------------------------
   8. FORMULARIOS OFICIALES (regla 19)
   -------------------------------------------------------------------------- */

.cp-field { display: flex; flex-direction: column; gap: 6px; margin-bottom: var(--cp-space-4); }
.cp-label { font-size: var(--cp-text-sm); font-weight: 700; color: var(--cp-ink); }

.cp-input,
.cp-select,
.cp-textarea {
  font-family: var(--cp-font-body);
  font-size: var(--cp-text-base);
  color: var(--cp-ink);
  background: #fff;
  border: 1px solid var(--cp-border-soft);
  border-radius: var(--cp-radius-sm);
  padding: 10px 14px;
  height: 44px;
  transition: border-color var(--cp-duration-fast) ease, box-shadow var(--cp-duration-fast) ease;
}
.cp-textarea { height: auto; min-height: 96px; resize: vertical; }

.cp-input:focus,
.cp-select:focus,
.cp-textarea:focus {
  outline: none;
  border-color: var(--cp-teal);
  box-shadow: 0 0 0 3px rgba(11, 122, 130, .15);
}
.cp-input:read-only { background: var(--cp-paper); color: var(--cp-muted); }
.cp-input:disabled,
.cp-select:disabled { background: #F0EEE7; color: var(--cp-muted); cursor: not-allowed; }
.cp-field--success .cp-input { border-color: var(--cp-success); }
.cp-field--warning .cp-input { border-color: var(--cp-warning); }
.cp-field--error .cp-input   { border-color: var(--cp-danger); }
.cp-field-message { font-size: var(--cp-text-xs); color: var(--cp-muted); }
.cp-field--error .cp-field-message { color: var(--cp-danger); }

.cp-input--money  { text-align: right; font-variant-numeric: tabular-nums; }
.cp-input--search { padding-left: 38px; background-repeat: no-repeat; background-position: 12px center; }

.cp-checkbox,
.cp-radio { accent-color: var(--cp-teal); width: 18px; height: 18px; }


/* --------------------------------------------------------------------------
   9. TABLAS OFICIALES (regla 20) — SOLO presentación, 0 cambio estructural
   -------------------------------------------------------------------------- */

.cp-table { width: 100%; border-collapse: separate; border-spacing: 0; font-size: var(--cp-text-base); }
.cp-table thead th {
  text-align: left;
  font-size: var(--cp-text-xs);
  text-transform: uppercase;
  letter-spacing: .4px;
  color: var(--cp-muted);
  font-weight: 700;
  padding: var(--cp-space-3) var(--cp-space-4);
  border-bottom: 1px solid var(--cp-border-soft);
}
.cp-table tbody td { padding: var(--cp-space-3) var(--cp-space-4); border-bottom: 1px solid var(--cp-border-soft); color: var(--cp-ink); }
.cp-table tbody tr { transition: background var(--cp-duration-fast) ease; }
.cp-table tbody tr:hover { background: var(--cp-paper); }
.cp-table .cp-table-actions { display: flex; gap: var(--cp-space-2); justify-content: flex-end; }
.cp-table--compact td,
.cp-table--compact th { padding: var(--cp-space-2) var(--cp-space-3); }
.cp-table--financial td.cp-table-amount { text-align: right; font-variant-numeric: tabular-nums; font-weight: 700; }
.cp-table--inventory td.cp-table-stock-low { color: var(--cp-danger); font-weight: 700; }
.cp-table-empty { text-align: center; padding: var(--cp-space-9); color: var(--cp-muted); }


/* --------------------------------------------------------------------------
   10. MODAL SYSTEM (regla 21) — reemplaza estilos de SweetAlert inconsistentes
   -------------------------------------------------------------------------- */

.cp-modal-overlay {
  position: fixed; inset: 0; background: rgba(21, 60, 102, .35);
  display: flex; align-items: center; justify-content: center; z-index: 1050;
}
.cp-modal {
  background: var(--cp-card);
  border-radius: var(--cp-radius-2xl);
  box-shadow: var(--cp-shadow-lg);
  padding: var(--cp-space-7);
  max-width: 440px;
  width: calc(100% - 32px);
  text-align: center;
}
.cp-modal-medallion { margin: 0 auto var(--cp-space-4); }
.cp-modal-title { font-family: var(--cp-font-hand); font-size: var(--cp-text-xl); color: var(--cp-ink); margin: 0 0 var(--cp-space-2); }
.cp-modal-text  { font-family: var(--cp-font-body); font-size: var(--cp-text-base); color: var(--cp-muted); margin: 0 0 var(--cp-space-6); }
.cp-modal-actions { display: flex; gap: var(--cp-space-3); justify-content: center; }

/* CORREGIDO (2026-08-20): el pool de 226 assets NO tiene manchas de acuarela
   en rojo/verde/ámbar -- solo existen en turquesa y durazno (ver
   ICON-MAP-CANONICAL.md, macrolote CANONICAL ASSET NORMALIZATION). La
   semántica de color real la lleva el ICONO protagonista (success-icon.png
   ya es verde/check ilustrado, error-icon.png ya es rojo/alerta ilustrado)
   -- el medallón es solo la textura de identidad de marca detrás, así que
   se reparte entre las 2 familias reales disponibles según tono
   (frío/tranquilo = turquesa, cálido/atención = durazno), sin inventar un
   gradiente rojo/verde falso. */
.cp-modal--info    .cp-modal-medallion { --cp-medallion-bg: url("../../assets/redesign/home/watercolor-teal-02.png"); }
.cp-modal--confirm .cp-modal-medallion { --cp-medallion-bg: url("../../assets/redesign/home/watercolor-teal-01.png"); }
.cp-modal--success .cp-modal-medallion { --cp-medallion-bg: url("../../assets/redesign/home/watercolor-teal-03.png"); }
.cp-modal--warning .cp-modal-medallion { --cp-medallion-bg: url("../../assets/redesign/home/watercolor-orange-01.png"); }
.cp-modal--error,
.cp-modal--delete  .cp-modal-medallion { --cp-medallion-bg: url("../../assets/redesign/home/watercolor-orange-splatter.png"); }
.cp-modal--blocked .cp-modal-medallion { --cp-medallion-bg: url("../../assets/redesign/home/watercolor-orange-02.png"); }
.cp-modal--form { max-width: 560px; text-align: left; }


/* --------------------------------------------------------------------------
   11. ESTADOS VACÍOS (regla 22)
   -------------------------------------------------------------------------- */

.cp-empty { display: flex; flex-direction: column; align-items: center; text-align: center; padding: var(--cp-space-9) var(--cp-space-7); gap: var(--cp-space-3); }
.cp-empty-illustration { width: 160px; height: auto; opacity: .9; }
.cp-empty-title { font-family: var(--cp-font-hand); font-size: var(--cp-text-lg); color: var(--cp-ink); margin: 0; }
.cp-empty-text  { font-family: var(--cp-font-body); font-size: var(--cp-text-base); color: var(--cp-muted); margin: 0; max-width: 40ch; }


/* --------------------------------------------------------------------------
   12. ALERTAS (regla 23)
   -------------------------------------------------------------------------- */

.cp-alert {
  display: flex; align-items: center; gap: var(--cp-space-3);
  padding: var(--cp-space-3) var(--cp-space-4);
  border-radius: var(--cp-radius-sm);
  font-size: var(--cp-text-base);
  border: 1px solid transparent;
}
.cp-alert--info    { background: var(--cp-info-bg); border-color: var(--cp-info-border); color: var(--cp-ink); }
.cp-alert--warning  { background: #FDF6E3; border-color: rgba(233,196,106,.5); color: #8a6d1a; }
.cp-alert--error    { background: #FBEAE6; border-color: rgba(217,108,86,.4); color: #8a3b28; }
.cp-alert--success  { background: #E9F5EF; border-color: rgba(60,141,112,.35); color: #256349; }

.cp-toast { position: fixed; top: 20px; right: 20px; z-index: 1100; }
.cp-inline-validation { font-size: var(--cp-text-xs); margin-top: 4px; }


/* --------------------------------------------------------------------------
   13. MEDALLÓN MAESTRO (regla 11) — WATERCOLOR ICON MEDALLION
   -------------------------------------------------------------------------- */

.cp-medallion {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  background-image: var(--cp-medallion-bg, url("../../assets/redesign/home/watercolor-teal-01.png"));
  background-size: 130% 130%;
  background-position: center;
  background-repeat: no-repeat;
  filter: drop-shadow(var(--cp-shadow-sm));
  flex: none;
}
.cp-medallion img { width: 55%; height: 55%; object-fit: contain; position: relative; z-index: 1; }
.cp-medallion--sm { width: 48px; height: 48px; }
.cp-medallion--md { width: 68px; height: 68px; }
.cp-medallion--lg { width: 96px; height: 96px; }
.cp-medallion--xl { width: 144px; height: 144px; }
.cp-medallion--turquesa { --cp-medallion-bg: url("../../assets/redesign/home/watercolor-teal-01.png"); }
.cp-medallion--celeste  { --cp-medallion-bg: url("../../assets/redesign/home/watercolor-teal-02.png"); }
.cp-medallion--durazno  { --cp-medallion-bg: url("../../assets/redesign/home/watercolor-orange-01.png"); }
/* CORREGIDO (2026-08-20, macrolote CANONICAL ASSET NORMALIZATION): ya NO se
   usa radial-gradient CSS como sustituto de acuarela -- regla 18 del
   macrolote lo prohíbe explícitamente. Ahora es una mancha de acuarela REAL
   (mismos assets ya aprobados de public/assets/redesign/home/) como fondo,
   sin forzar recorte circular -- se deja que la forma orgánica de la mancha
   se vea tal cual es. El tamaño se agrandó ~20% respecto a la versión
   anterior porque la mancha real necesita más superficie visible que un
   círculo sólido para leerse bien. */


/* --------------------------------------------------------------------------
   14. KPI / BADGE MAESTRO (regla 12)
   -------------------------------------------------------------------------- */

.cp-kpi { display: flex; align-items: center; gap: var(--cp-space-4); background: var(--cp-card); border: 1px solid var(--cp-border-soft); border-radius: var(--cp-radius-lg); padding: var(--cp-space-4) var(--cp-space-5); box-shadow: var(--cp-shadow-sm); }
.cp-kpi-label { font-size: var(--cp-text-xs); text-transform: uppercase; letter-spacing: .4px; color: var(--cp-muted); font-weight: 700; margin: 0 0 4px; }
.cp-kpi-value { font-size: var(--cp-text-xl); font-weight: 800; color: var(--cp-ink); font-variant-numeric: tabular-nums; margin: 0; }
/* El número SIEMPRE es HTML dinámico -- nunca horneado dentro de la imagen (regla 12) */


/* --------------------------------------------------------------------------
   15. RESPONSIVE
   -------------------------------------------------------------------------- */

@media (max-width: 768px) {
  .cp-hero { flex-direction: column; text-align: center; padding: var(--cp-space-6); }
  .cp-scope { --cp-text-hero: 26px; --cp-text-xl: 22px; }
  .cp-modal { padding: var(--cp-space-5); }
}