/* ============================================================
   PROYECTOS ISESE — identidad
   ------------------------------------------------------------
   ⚠️ IDENTIDAD PROVISIONAL. El cliente NO entregó logotipo: las
   imágenes que venían en su cuestionario son del despacho dueño
   de la plantilla (Marc Consultores@Web), y el rojo #EE202E que
   aparece en ese documento es de ELLOS, no de ISESE. Nada de lo
   que hay aquí sale de un manual de marca del cliente.

   Cuando llegue el logo real, esta hoja se rehace desde sus
   colores, igual que se hizo en Cloeteskraal.

   De dónde sale la propuesta: ISESE hace infraestructura —
   caminos, puentes, urbanización, obras hidráulicas. El lenguaje
   visual de ese trabajo es el concreto y el señalamiento vial.
   De ahí los grises y el amarillo.

   Se descartó a propósito el naranja de maquinaria: RUCEG ya usa
   naranja y Angelopolitanos rojo industrial. Dos clientes de la
   misma casa no deben parecerse.

   TODOS los contrastes están calculados, no estimados:
   scripts/contraste.py los recalcula y los tests los verifican.
   ============================================================ */

:root {
  /* --- Superficies y texto -------------------------------- */
  --concreto:  #1C2226;  /* texto principal y superficies oscuras */
  --acero:     #33414A;  /* superficie oscura secundaria */
  --cimiento:  #4A5A63;  /* texto secundario — 6.55 sobre plano ✓ AA */
  --plano:     #F4F5F3;  /* fondo claro (papel de plano) */
  --blanco:    #FFFFFF;
  --linea:     #D5D9D6;  /* bordes y separadores */

  /* --- Acento -------------------------------------------- */
  /* Amarillo de señalamiento vial. Es el color de la marca, pero
     es CLARO: se comporta como superficie, nunca como texto. */
  --senal:       #F2B705;
  /* ⚠️ #F2B705 contra BLANCO da 1.82. Nunca texto blanco encima.
        Contra --concreto da 8.84 ✓ — así es como se usa. */
  --senal-texto: #8A6600;  /* mismo tono oscurecido. 4.82 sobre plano ✓
                              Es la ÚNICA versión válida como texto. */

  /* --- Roles derivados ------------------------------------ */
  --texto:        var(--concreto);
  --texto-suave:  var(--cimiento);
  --bg:           var(--blanco);
  --cta:          var(--senal);      /* con texto --concreto: 8.84 ✓ */
  --cta-texto:    var(--concreto);
  --cta-oscuro:   var(--concreto);   /* con texto blanco: 16.08 ✓ */

  /* --- Tipografía -----------------------------------------
     Barlow Condensed evoca la rotulación de señalamiento y de
     plano técnico; Barlow normal sostiene la lectura larga.
     Una sola familia, dos anchos: menos peso y más coherencia. */
  --font-display: "Barlow Condensed", "Arial Narrow", system-ui, sans-serif;
  --font-body:    "Barlow", system-ui, -apple-system, "Segoe UI", sans-serif;

  --fs-hero:  clamp(2.6rem, 6vw, 4.6rem);
  --fs-h1:    clamp(2.2rem, 4.6vw, 3.4rem);
  --fs-h2:    clamp(1.7rem, 3.2vw, 2.5rem);
  --fs-h3:    clamp(1.15rem, 1.7vw, 1.35rem);
  --fs-lead:  clamp(1.05rem, 1.5vw, 1.2rem);
  --fs-body:  1rem;
  --fs-small: .92rem;
  --fs-micro: .78rem;

  --lh-tight: 1.08;
  --lh-body:  1.65;

  /* --- Espacio -------------------------------------------- */
  --sp-1: .25rem;  --sp-2: .5rem;   --sp-3: .75rem;  --sp-4: 1rem;
  --sp-6: 1.5rem;  --sp-8: 2rem;    --sp-12: 3rem;   --sp-16: 4rem;
  --sp-24: 6rem;

  --seccion-y: clamp(3.5rem, 8vw, 6.5rem);
  --ancho-max: 1240px;
  --ancho-texto: 62ch;
  --nav-h: 76px;

  /* --- Forma ---------------------------------------------
     Esquinas rectas, no redondeadas: la obra civil es recta.
     El único gesto es el bisel del acento, que recuerda la
     franja diagonal del señalamiento. */
  --r-sm: 2px;
  --r-md: 3px;
  --bisel: polygon(0 0, 100% 0, 100% calc(100% - 14px), calc(100% - 14px) 100%, 0 100%);

  --sh-sm: 0 1px 2px rgba(28, 34, 38, .08);
  --sh-md: 0 6px 18px rgba(28, 34, 38, .12);
  --sh-lg: 0 18px 44px rgba(28, 34, 38, .18);

  --dur: .28s;
  --dur-fast: .16s;
  --ease: cubic-bezier(.22, .61, .36, 1);
}