/* Pacto Cleaners — tokens del design kit.
   Única fuente de verdad de color, cuerpo y espacio. El theme la copia literal.
   Colores medidos sobre la maqueta (Referencias/JPG/logo pacto M-01.jpg). */

@font-face { font-family: "Gilroy"; src: url("../fonts/gilroy-medium.woff2") format("woff2"); font-weight: 500; font-style: normal; font-display: swap; }
@font-face { font-family: "Gilroy"; src: url("../fonts/gilroy-bold.woff2") format("woff2"); font-weight: 700; font-style: normal; font-display: swap; }
@font-face { font-family: "Poppins"; src: url("../fonts/poppins-regular.woff2") format("woff2"); font-weight: 400; font-style: normal; font-display: swap; }
@font-face { font-family: "Poppins"; src: url("../fonts/poppins-medium.woff2") format("woff2"); font-weight: 500; font-style: normal; font-display: swap; }

:root {
  /* Color: marca */
  --navy: #1B2B5C;          /* títulos, cabecera, logo, texto — 13,0:1 sobre fondo */
  --azul: #1F5289;          /* botón principal — blanco encima 8,0:1 */
  --azul-hover: #18436F;
  --cielo: #44AFFD;         /* acentos de iconos y adornos — 2,3:1, solo dibujo */
  --celeste: #7EC7F5;       /* «cleaners» del logo — solo dibujo */
  --verde: #5BE594;         /* WhatsApp, subrayado de título — 1,5:1, solo dibujo */

  /* Color: para escribir (variante legible aprobada el 04/11/2026, 4,5:1 sobre el fondo).
     El cielo y el verde de la maqueta quedan para dibujar: iconos, líneas, bordes. */
  --cielo-texto: #1876C0;
  --verde-texto: #178A4C;

  /* Color: superficies */
  --fondo: #F6FBFE;         /* página */
  --blanco: #FFFFFF;        /* tarjetas */
  --tinte: #EAF7FD;         /* sección Sectores, ondas del cotizador */
  --tinte-2: #DEF5FD;       /* círculos de los pasos, manchas detrás de fotos */
  --pildora-cian: #A8E4FC;  /* resaltado de Visión */
  --pildora-menta: #94F0E8; /* resaltado de Misión */
  --tarjeta-menta: #E4F8F8; /* degradado de la tarjeta de Misión */
  --tarjeta-cielo: #E4F4FC; /* degradado de la tarjeta de Visión */
  --linea: #DCE6F0;         /* separadores y bordes de campo */
  --error: #C2342B;
  --error-fondo: #FDECEA;
  --pendiente: #FFF2C2;     /* fondo de los [datos pendientes] y avisos de falta */
  --gris-texto: #4A5A80;    /* textos secundarios — 6,5:1 sobre el fondo */
  --placeholder: #6B7A99;   /* texto de ejemplo dentro de los campos */
  --linea-hover: #B9C8DA;

  /* Tipografía */
  --f-titulo: "Gilroy", "Poppins", system-ui, sans-serif;
  --f-texto: "Poppins", system-ui, sans-serif;

  /* Escala tipográfica (escritorio). Móvil en el bloque de abajo. */
  --t-display: 60px;  /* h1 del hero, «Misión y Visión» — 1,08 (medido: 65 px entre líneas) */
  --t-h2: 40px;       /* título de sección — 1,12 */
  --t-h3: 28px;       /* frase resaltada de Misión/Visión — 1,25 */
  --t-h4: 20px;       /* título de tarjeta, cifra, paso — 1,25 */
  --t-lead: 20px;     /* texto de entrada de sección — 1,3 */
  --t-base: 16px;     /* texto corrido, antetítulo, botón, menú — 1,45 */
  --t-small: 14px;    /* texto de tarjeta, pie — 1,4 */
  --lh-titulo: 1.1;
  --lh-bloque: 1.25;
  --lh-texto: 1.4;

  /* Separación */
  --s-seccion: 64px;  /* entre secciones (medido en la maqueta: 120–130 entre dos) */
  --s-bloque: 56px;   /* entre bloques de una sección */
  --s-fila: 32px;     /* entre piezas de una fila */
  --s-pieza: 16px;    /* entre título y texto de una pieza */
  --s-linea: 8px;

  --contenedor: 1280px;
  --margen: 64px;

  /* Forma */
  --r-boton: 16px;
  --r-tarjeta: 16px;
  --r-tarjeta-xl: 44px;
  --r-pildora: 999px;
  --sombra-suave: 0 14px 40px rgba(27, 43, 92, .10);
  --sombra-boton: 0 8px 20px rgba(31, 82, 137, .22);

  /* Movimiento */
  --ease: cubic-bezier(.22, .61, .36, 1);
  --dur: .25s;
  --dur-entrada: .7s;
}

@media (max-width: 900px) {
  :root {
    --t-display: 40px;
    --t-h2: 32px;
    --t-h3: 22px;
    --t-h4: 18px;
    --t-lead: 17px;
    --t-base: 15px;
    --s-seccion: 48px;
    --s-bloque: 40px;
    --s-fila: 24px;
    --margen: 20px;
  }
}