/* =========================================================================
   Tokens de diseño · Portfolio Charo Fernández / @yalocin
   Paleta v1.1 del libro de estilo (contraste WCAG 2.2 AA verificado por
   verificar-contraste.php: si un valor de aquí baja del umbral, el build
   falla). Los colores solo se declaran en este archivo.
   ========================================================================= */

/* ---- Fuentes autoalojadas (subset latin, suficiente para español) ---- */

@font-face {
  font-family: "Poppins";
  font-style: normal;
  font-weight: 600;
  font-display: swap;
  src: url("../fuentes/poppins-600.woff2") format("woff2");
}

@font-face {
  font-family: "Poppins";
  font-style: normal;
  font-weight: 700;
  font-display: swap;
  src: url("../fuentes/poppins-700.woff2") format("woff2");
}

@font-face {
  font-family: "Inter";
  font-style: normal;
  font-weight: 100 900;
  font-display: swap;
  src: url("../fuentes/inter-var.woff2") format("woff2-variations");
}

@font-face {
  font-family: "Source Serif 4";
  font-style: normal;
  font-weight: 200 900;
  font-display: swap;
  src: url("../fuentes/source-serif-4-var.woff2") format("woff2-variations");
}

@font-face {
  font-family: "Source Serif 4";
  font-style: italic;
  font-weight: 200 900;
  font-display: swap;
  src: url("../fuentes/source-serif-4-var-italic.woff2") format("woff2-variations");
}

/* Respaldos con métrica ajustada: el texto no salta cuando llega la web */
@font-face {
  font-family: "Inter-respaldo";
  src: local("Arial");
  size-adjust: 107%;
  ascent-override: 90%;
  descent-override: 22.5%;
  line-gap-override: 0%;
}

@font-face {
  font-family: "Poppins-respaldo";
  src: local("Arial");
  size-adjust: 112%;
  ascent-override: 93.75%;
  descent-override: 31.25%;
  line-gap-override: 8.9%;
}

:root {
  /* ---- Color: portfolio personal (v1.1) ---- */
  --blanco: #ffffff;
  --lila: #f6f4fa;            /* fondos suaves y bloques secundarios */
  --tinta: #1f2a44;           /* texto principal y titulares · 14.26:1 */
  --azul: #1f5fa8;            /* enlaces, iconos, acentos · 6.44:1 */
  --morado: #5a54a4;          /* degradados, botones, estados activos · 6.48:1 */
  --magenta: #c71c74;         /* acento emocional y CTA puntual · 5.46:1 */
  --gris-texto: #5f6c7f;      /* metadatos y texto secundario · 5.33:1 */
  --borde: #dde3ea;           /* separadores decorativos, nunca controles */
  --borde-control: #7a8798;   /* bordes de campos de formulario · 3.65:1 */
  --fondo-logo: #f4f4f1;      /* tarjetas neutras de entidades */

  /* ---- Tintes decorativos (manchas del hero y texto fantasma) ----
     Verificados en el build: todo texto que pueda quedar encima sigue
     cumpliendo AA (pares «mancha»/«fantasma» de pares_de_uso). Si se
     cambian aquí hay que cambiarlos también en plantillas/lib.php. */
  --mancha-lila: #f0edf9;
  --mancha-azul: #e9f1fa;
  --mancha-amarilla: #fff4bf;
  --fantasma: #e7e4f1;

  /* ---- Color: estrella @yalocin ---- */
  --amarillo-estrella: #dfc85a;
  --amarillo-estrella-fondo: #ffdd57;
  --azul-estrella: #1c3f60;

  /* ---- Color: áreas BrickAula / DigCompEdu ----
     El relleno es decorativo (chips, puntos, barras). Para texto o icono
     sobre claro se usa SIEMPRE la variante -ink, verificada >= 4.5:1. */
  --area-1: #d97a57; --area-1-ink: #a85535; /* compromiso profesional */
  --area-2: #63ae63; --area-2-ink: #3e7d3e; /* recursos digitales */
  --area-3: #4f86c6; --area-3-ink: #33639e; /* enseñanza y aprendizaje */
  --area-4: #57b2b0; --area-4-ink: #2c7472; /* evaluación */
  --area-5: #6752a3; --area-5-ink: #6752a3; /* empoderamiento */
  --area-6: #c84f76; --area-6-ink: #a63a5c; /* competencia del alumnado */
  --recurso: #f2c65d; --recurso-ink: #8a6a12; /* avisos y logros */

  /* ---- Color: cielo del portfolio ----
     Pasos por categoría para fondo oscuro (≥ 3:1 sobre --cielo, aptos
     para daltonismo). Espejo de lib.php: el build los re-verifica. */
  --cielo: #1f2a44;
  --cielo-profundo: #141d33;
  --cielo-texto: #c9d4e8;
  --cielo-eje: #b9c4d8;
  --noche-ponencia: #4f86c6;
  --noche-taller: #d47653;
  --noche-formacion: #5da85d;
  --noche-podcast: #c84f76;
  --noche-video: #c84f76;   /* comparte tono con podcast, como sus chips */
  --noche-prensa: #17a8a6;
  --noche-publicacion: #7b67ba;
  --noche-comunidad: #b78d11;

  /* Palabras de la esfera: variantes claras >= 4.5:1 como texto sobre
     el cielo (espejo en lib.php, re-verificado en cada build). */
  --palabra-azul: #86b2e6;
  --palabra-verde: #7fc47f;
  --palabra-rosa: #e389ad;
  --palabra-morado: #ab9be4;

  /* ---- Portadas generadas de la estantería de Publicaciones ----
     Rampa por antigüedad (reciente = magenta → antiguo = tinta). Todas son
     fondo de texto BLANCO: cada tono se verifica >= 4.5:1 en el build
     (pares_de_uso de lib.php es su espejo; si cambian aquí, cambian allí). */
  --pub-1:  #a2325f;  --pub-2:  #973a7c;  --pub-3:  #83408f;
  --pub-4:  #6f4a9e;  --pub-5:  #5a54a4;  --pub-6:  #4f56a6;
  --pub-7:  #45589f;  --pub-8:  #38568f;  --pub-9:  #2f5591;
  --pub-10: #28497e;  --pub-11: #243c66;  --pub-12: #1f2a44;

  /* ---- Degradado del botón primario (6.44–6.55:1 con texto blanco) ---- */
  --degradado-primario: linear-gradient(100deg, var(--azul), var(--morado));

  /* ---- Tipografía ---- */
  --fuente-titular: "Poppins", "Poppins-respaldo", system-ui, sans-serif;
  --fuente-texto: "Inter", "Inter-respaldo", system-ui, sans-serif;
  --fuente-cita: "Source Serif 4", georgia, serif;

  /* Escala fluida mobile-first (libro de estilo §6) */
  --texto-xs: 0.875rem;                              /* 14px metadatos */
  --texto-s: 0.9375rem;                              /* 15px secundario */
  --texto-m: clamp(1.0625rem, 1rem + 0.3vw, 1.125rem);   /* 17-18px cuerpo */
  --texto-l: clamp(1.375rem, 1.2rem + 0.9vw, 1.625rem);  /* 22-26px H3 */
  --texto-xl: clamp(2rem, 1.6rem + 2vw, 2.5rem);         /* 32-40px H2 */
  --texto-2xl: clamp(2.125rem, 1.5rem + 3.2vw, 3.375rem);/* 34-54px H1 */

  /* ---- Espaciado y forma ---- */
  --esp-1: 0.25rem;
  --esp-2: 0.5rem;
  --esp-3: 0.75rem;
  --esp-4: 1rem;
  --esp-5: 1.5rem;
  --esp-6: 2rem;
  --esp-7: 3rem;
  --esp-8: 4.5rem;
  --radio-s: 8px;
  --radio-m: 12px;
  --radio-tarjeta: 18px;      /* tarjetas 16-20px según libro de estilo */
  --sombra-suave: 0 2px 12px rgba(31, 42, 68, 0.07);
  --sombra-alzada: 0 6px 24px rgba(31, 42, 68, 0.12);
  --ancho-contenido: 70rem;
  --ancho-prosa: 42rem;
  /* En móvil la cabecera pegajosa ocupa dos filas (marca + menú): el margen
     de anclas debe reservarla entera para no tapar el foco (WCAG 2.4.11) */
  --alto-cabecera: 9rem;

  /* ---- Foco visible (WCAG 2.4.7 / 2.4.11): doble anillo ---- */
  --foco-exterior: var(--magenta);
  --foco-interior: var(--blanco);

  /* Objetivos táctiles: 24px es el mínimo AA (2.5.8); apuntamos a 44 */
  --objetivo-minimo: 44px;
}

@media (min-width: 48em) {
  :root {
    --alto-cabecera: 4rem; /* en escritorio la cabecera es una sola fila */
  }
}