/* ==========================================================
   amPARo · tokens
   La identidad es de la autora: estos valores no se cambian.
   ========================================================== */

:root {
  /* --- Color de identidad --- */
  --azul: #216DDE;      /* principal · capa 2 Identificar · Mapas */
  --salmon: #F25757;    /* capa 1 Reconocer · Testimonios */
  --celeste: #6CD4FF;   /* capa 3 Convocar · Agenda */
  --verde: #B9F18C;     /* capa 4 Sostener · Cómo sumarte */
  --negro: #231F20;     /* negro del logo: todo el texto */
  --blanco: #FFFFFF;

  /* Texto secundario sobre blanco: el mismo negro, más liviano (9,4:1) */
  --negro-suave: #4A4546;

  /* --- Sobreimpresión ---
     Cuando dos capas se cruzan, el color se mezcla como tinta
     (multiply). Estos son los resultados exactos, por si hay que
     pintar el cruce sin usar mix-blend-mode. */
  --mezcla-salmon-azul: #1F254C;
  --mezcla-celeste-azul: #0E5BDE;
  --mezcla-verde-celeste: #4EC88C;
  --mezcla-verde-azul: #18677A;
  --mezcla-salmon-verde: #AF5230;
  --mezcla-salmon-celeste: #674857;

  /* --- Contraste (WCAG) medido ---
     blanco / azul ........ 4,9:1  → cualquier tamaño
     negro / celeste ...... 9,7:1  → cualquier tamaño
     negro / verde ........ 12,4:1 → cualquier tamaño
     blanco / salmón ...... 3,3:1  → solo ≥24px, o ≥19px bold
     azul / verde ......... 3,7:1  → solo títulos grandes
     azul / blanco ........ 4,9:1  → cualquier tamaño (enlaces)
     azul/salmón 1,5:1 · salmón/verde 2,4:1 → PROHIBIDO para leer */

  /* --- Tipografía --- */
  --fuente-display: "Glory", "Nunito", system-ui, sans-serif;
  --fuente-texto: "Nunito", system-ui, -apple-system, "Segoe UI", sans-serif;

  --t-mini: 0.8125rem;                                   /* 13 */
  --t-chico: 0.9375rem;                                  /* 15 */
  --t-cuerpo: 1.0625rem;                                 /* 17 */
  --t-destacado: clamp(1.1875rem, 1.1rem + 0.4vw, 1.375rem);   /* 19–22 */
  --t-h3: clamp(1.5rem, 1.3rem + 0.9vw, 1.875rem);       /* 24–30 */
  --t-h2: clamp(2.125rem, 1.4rem + 3.4vw, 4rem);         /* 34–64 */
  --t-display: clamp(3.25rem, 0.9rem + 11.2vw, 8.5rem);  /* 52–136 · escala de afiche */

  --interlineado-display: 0.9;
  --interlineado-titulo: 1.02;
  --interlineado-texto: 1.55;

  /* --- Espacio (base 4) --- */
  --e-1: 0.25rem;
  --e-2: 0.5rem;
  --e-3: 0.75rem;
  --e-4: 1rem;
  --e-5: 1.5rem;
  --e-6: 2rem;
  --e-7: 3rem;
  --e-8: 4rem;
  --e-9: 6rem;
  --e-10: 8rem;

  --margen: clamp(1rem, 0.4rem + 3vw, 3rem);
  --ancho-max: 76rem;
  --ancho-lectura: 38rem;

  /* --- Formas de interfaz ---
     El botón es una D: lado recto a la izquierda, curvo a la derecha. */
  --r-chico: 6px;
  --r-medio: 14px;
  --r-d: 10px 999px 999px 10px;
  --r-arco: 50% 50% var(--r-medio) var(--r-medio) / 9rem 9rem var(--r-medio) var(--r-medio);

  /* --- Movimiento ---
     Recortes de papel que se acomodan: breve, sin rebote. */
  --curva-salida: cubic-bezier(0.22, 1, 0.36, 1);
  --curva-movimiento: cubic-bezier(0.65, 0, 0.35, 1);
  --dur-toque: 120ms;
  --dur-par: 460ms;

  /* --- Barra inferior (celular) --- */
  --alto-barra: 4.25rem;
}

/* ----------------------------------------------------------
   Color por capa
   Cada capa usa SOLO su color, más blanco y negro (neutros).
   Los colores de otra capa aparecen únicamente donde dos capas
   se cruzan a propósito: costuras de la home, talleres de
   Orientación en la agenda (3+4), testimonio en el mapa (1+2).
   --capa-tinta: texto permitido sobre el fondo de capa.
   --capa-sobre: texto sobre un botón del color de capa
                 (botones: 19px bold, vale como "grande").
   ---------------------------------------------------------- */

/* --capa-en-blanco: color de texto chico sobre blanco dentro de la capa
   (solo el azul aguanta texto chico sobre blanco; las demás usan negro). */

[data-capa="reconocer"] {
  --capa: var(--salmon);
  --capa-tinta: var(--blanco);   /* solo ≥24px o ≥19px bold; el texto corrido va sobre blanco */
  --capa-sobre: var(--blanco);
  --capa-en-blanco: var(--negro);
  --foco: var(--blanco);
}

[data-capa="identificar"] {
  --capa: var(--azul);
  --capa-tinta: var(--blanco);
  --capa-sobre: var(--blanco);
  --capa-en-blanco: var(--azul);
  --foco: var(--blanco);
}

[data-capa="convocar"] {
  --capa: var(--celeste);
  --capa-tinta: var(--negro);
  --capa-sobre: var(--negro);
  --capa-en-blanco: var(--negro);
  --foco: var(--negro);
}

[data-capa="sostener"] {
  --capa: var(--verde);
  --capa-tinta: var(--negro);
  --capa-sobre: var(--negro);
  --capa-en-blanco: var(--negro);
  --foco: var(--negro);
}