/* ==========================================================================
   YOUNG 2026 — Tokens de diseño
   Todas las medidas salen de la app YOUNG. Cambia aquí y cambia en toda la web.
   ========================================================================== */

:root {
	/* --- Familias: las que elijas en Apariencia › Personalizar › Fuentes
	   (variables --font-headings y --font-base del gestor de fuentes).
	   Si no hay ninguna elegida, Museo y Google Sans / Open Sans. --- */
	--young-font-display: var(--font-headings, "Museo", "museo", Georgia, serif); /* titulares */
	--young-font-text: var(--font-base, "Google Sans", "Open Sans", system-ui, sans-serif); /* cuerpo, etiquetas, botones */

	/* --- Escala cerrada de tamaños (px) --- */
	--young-size-label: 13px;          /* etiqueta y categoría */
	--young-size-body: 14px;           /* cuerpo corto, subtítulo de tarjeta, autor */
	--young-size-headline-card: 19px;  /* titular de tarjeta */
	--young-size-headline-cover: 24px; /* titular de portada / carrusel destacado */
	--young-size-section: 27px;        /* título de sección */
	--young-size-article-title: 34px;  /* título de artículo */
	--young-size-article-text: 17px;   /* texto del artículo */

	/* --- Esquinas: la medida de la casa --- */
	--young-radius-card: 9px;      /* tarjetas, imágenes, cajas */
	--young-radius-feature: 14px;  /* tarjetas grandes del carrusel «Destacados» */
	--young-radius-button: 10px;   /* botones */
	--young-radius-label: 8px;     /* etiqueta de categoría sobre la portada */
	--young-radius-badge: 6px;     /* insignias pequeñas */
	--young-radius-chip: 4px;      /* chips de categoría y etiquetas */

	/* Las insignias nunca van pegadas a la esquina */
	--young-badge-inset: 10px;
	--young-badge-inset-sm: 8px;
	--young-badge-bg: #E5E5EA;      /* caja gris claro opaca, icono #111 */
	--young-badge-size: 46px;

	/* --- Espacios --- */
	--young-gutter: 20px;          /* margen lateral */
	--young-section-top: 36px;     /* encima de cada título de sección */
	--young-section-bottom: 14px;  /* debajo del título de sección */
	--young-stack-gap: 24px;       /* entre tarjetas apiladas */
	--young-carousel-gap: 12px;    /* entre tarjetas de un carrusel */
	--young-max: 1200px;           /* ancho máximo del contenido */

	/* --- Color --- */
	--young-bg: #ffffff;
	--young-text: #111111;
	--young-text-muted: #666666;
	--young-line: #d9d9d9;
	--young-bar-bg: #f2f2f7;
	--young-bar-button: #e5e5ea;
	--young-label-bg: rgba(0, 0, 0, .8);
	--young-photo-fade: linear-gradient(to bottom, rgba(0, 0, 0, 0), rgba(0, 0, 0, .91));
}