/* ===========================================================================
   Tokens de diseño — DESIGN.md ("Paleta": papel, tinta y un color por servicio)
   El degradado de marca se construye con los mismos cinco colores.
   Familias: Inter (titulares y texto) + Instrument Serif cursiva (conectores).
   =========================================================================== */

/* Fuente de respaldo con métricas ajustadas a Inter: el texto no salta cuando llega el woff2 (CLS). */
@font-face {
  font-family: "Inter Fallback";
  src: local("Arial"), local("Helvetica Neue"), local("Liberation Sans");
  size-adjust: 107%;
  ascent-override: 90%;
  descent-override: 22%;
  line-gap-override: 0%;
}
@font-face {
  font-family: "Inter";
  font-style: normal;
  font-weight: 100 900;
  font-display: swap;
  src: url("../assets/fonts/Inter-latin.woff2") format("woff2");
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
@font-face {
  font-family: "Inter";
  font-style: normal;
  font-weight: 100 900;
  font-display: swap;
  src: url("../assets/fonts/Inter-latin-ext.woff2") format("woff2");
  unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}
/* Instrument Serif (OFL, assets/fonts/InstrumentSerif-OFL.txt) */
@font-face {
  font-family: "Instrument Serif";
  font-style: italic;
  font-weight: 400;
  font-display: swap;
  src: url("../assets/fonts/InstrumentSerif-italic-latin.woff2") format("woff2");
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
@font-face {
  font-family: "Instrument Serif";
  font-style: italic;
  font-weight: 400;
  font-display: swap;
  src: url("../assets/fonts/InstrumentSerif-italic-latin-ext.woff2") format("woff2");
  unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}

:root {
  /* Superficies */
  --color-papel: #f6f1e9;       /* lienzo */
  --color-papel-2: #eee7da;     /* secciones alternas (.seccion--mist) */
  --color-blanco: #fffcf7;      /* tarjetas */
  --color-tinta: #16130f;       /* texto y bandas oscuras */
  --color-tinta-2: #25201b;     /* tarjetas sobre banda oscura */

  /* Texto y líneas (contraste sobre papel: tinta 16.5:1 · gris 6.3:1 · gris-3 5.3:1 (4.8:1 sobre papel-2)) */
  --color-gris: #5d5850;
  --color-gris-3: #6a635a;
  --color-linea: #e1d8ca;
  --color-linea-fuerte: #cfc4b3;
  --color-papel-texto: #d9d1c4; /* texto secundario sobre tinta */

  /* Un color por servicio. Son para bloques, iconos y fondos: NO para texto sobre papel. */
  --c-paginas: #2a63f5;         /* texto encima: blanco (5:1) */
  --c-diseno: #ff5a5f;          /* texto encima: tinta — coral "design" del grupo Cesko */
  --c-marketing: #7c4dff;       /* texto encima: blanco */
  --c-factura: #12b76a;         /* texto encima: tinta */
  --c-muchomas: #f5a300;        /* texto encima: tinta */

  /* Variantes para TEXTO GRANDE (≥24 px o ≥19 px en negrita) sobre papel: ≥3.3:1 */
  --t-diseno: #d74e51;
  --t-muchomas: #a97205;
  --t-factura: #139054;
  --t-paginas: #2a63f5;
  --t-marketing: #7c4dff;

  /* Degradado de marca: los cinco colores (Kit Digital lo usa como "su" color) */
  --degradado: linear-gradient(100deg, #ff5a5f 0%, #f5a300 25%, #12b76a 50%, #2a63f5 75%, #7c4dff 100%);
  --c-kitdigital: var(--c-diseno);

  --color-error: #c8242b;
  --color-ok: #0c7a47;

  /* Alias heredados que usan las plantillas PHP */
  --color-bone: var(--color-blanco);
  --color-signal: var(--c-diseno);
  --color-teal: var(--c-factura);

  /* Tipografía */
  --fuente-sans: "Inter", "Inter Fallback", ui-sans-serif, system-ui, -apple-system, "Segoe UI", Roboto, sans-serif;
  --fuente-serif: "Instrument Serif", "Iowan Old Style", Georgia, serif;

  --texto-display-xl: clamp(3.5rem, 1rem + 10vw, 9.5rem);     /* 56 → 152 */
  --texto-display: clamp(2.75rem, 1.4rem + 5vw, 5.5rem);       /* 44 → 88 */
  --texto-heading-lg: clamp(2.375rem, 1.6rem + 3vw, 4rem);     /* 38 → 64 */
  --texto-heading: clamp(2rem, 1.55rem + 1.6vw, 2.75rem);      /* 32 → 44 */
  --texto-heading-sm: clamp(1.5rem, 1.35rem + 0.5vw, 1.875rem);/* 24 → 30 */
  --texto-subheading: clamp(1.25rem, 1.15rem + 0.4vw, 1.5rem); /* 20 → 24 */
  --texto-body-lg: clamp(1.0625rem, 1rem + 0.25vw, 1.25rem);   /* 17 → 20 */
  --texto-body: 1rem;
  --texto-caption: 0.875rem;
  --texto-etiqueta: 0.75rem;
  --texto-stat: clamp(3.5rem, 2rem + 6vw, 7rem);
  --texto-boton: 0.8125rem;
  --tracking-etiqueta: 0.08em;

  /* Espaciado: unidad 8 px */
  --e-1: 4px;  --e-2: 8px;  --e-3: 12px; --e-4: 16px; --e-5: 20px; --e-6: 24px;
  --e-8: 32px; --e-10: 40px; --e-12: 48px; --e-14: 56px; --e-16: 64px;
  --e-20: 80px; --e-24: 96px; --e-28: 112px; --e-32: 128px; --e-40: 160px;

  --ancho-max: 1400px;
  --margen-lateral: 16px;
  --seccion-y: var(--e-16);
  --banda-y: var(--e-20);
  --cabecera-alto: 76px;
  --rejilla-gap: var(--e-6);
  --tarjeta-pad: var(--e-6);

  /* Radio */
  --radio-fino: 4px;
  --radio: 8px;
  --radio-grande: 16px;
  --radio-pildora: 999px;

  /* Elevación: sombra cálida (nunca negra pura) */
  --sombra: 0 1px 2px rgba(22, 19, 15, 0.05), 0 10px 30px rgba(22, 19, 15, 0.08);
  --sombra-alta: 0 2px 4px rgba(22, 19, 15, 0.06), 0 24px 60px rgba(22, 19, 15, 0.14);
  --borde: 1px solid var(--color-linea);

  /* Movimiento */
  --curva: cubic-bezier(0.2, 0.7, 0.2, 1);
  --curva-rebote: cubic-bezier(0.34, 1.56, 0.64, 1);
  --dur-micro: 220ms;
  --dur-aparicion: 900ms;

  --foco: 0 0 0 2px var(--color-papel), 0 0 0 4px var(--color-tinta);

  color-scheme: light;
}

@media (min-width: 768px) {
  :root {
    --margen-lateral: 40px;
    --seccion-y: var(--e-24);
    --banda-y: var(--e-28);
    --tarjeta-pad: var(--e-8);
  }
}
@media (min-width: 1280px) {
  :root { --margen-lateral: 64px; }
}

/* Color del servicio activo: lo fija la clase del <body> o el propio componente */
.servicio--paginas { --servicio: var(--c-paginas); --servicio-texto: #fff; --servicio-t: var(--t-paginas); }
.servicio--diseno { --servicio: var(--c-diseno); --servicio-texto: var(--color-tinta); --servicio-t: var(--t-diseno); }
.servicio--marketing { --servicio: var(--c-marketing); --servicio-texto: #fff; --servicio-t: var(--t-marketing); }
.servicio--factura_electronica { --servicio: var(--c-factura); --servicio-texto: var(--color-tinta); --servicio-t: var(--t-factura); }
.servicio--muchomas { --servicio: var(--c-muchomas); --servicio-texto: var(--color-tinta); --servicio-t: var(--t-muchomas); }
.servicio--kitdigital, .servicio--puesto-de-trabajo-seguro { --servicio: var(--c-diseno); --servicio-texto: var(--color-tinta); --servicio-t: var(--t-diseno); --servicio-fondo: var(--degradado); }