/**
 * EDUCA FIDYS · Base
 *
 * Tokens de diseño y utilidades compartidas por todos los bloques FIDYS.
 * Se registra como handle "educa-fidys-base" y cada bloque la declara
 * como dependencia en su block.json.
 *
 * Versión: 1.2.0
 *
 * 1.2.0 - Patrón de sección compartido (.fidys-seccion), encabezado de
 *         sección reutilizable (.fidys-encabezado), énfasis con <em> en los
 *         titulares y variante de botón con contorno. Ninguna regla anterior
 *         se modifica: la 1.2.0 solo añade.
 *
 * 1.1.0 - Tokens de co-branding (verde SEMERGEN, naranja y dorado) y
 *         variantes de color para el icono circular.
 *
 * 1.0.3 - Se restituye el margen vertical de las etiquetas, anulado por el
 *         reset de listas de la 1.0.2.
 *
 * 1.0.2 - Neutralización global del sangrado de listas y del subrayado de
 *         enlaces heredados de Astra. Nuevo hover del botón: oscurecido de
 *         fondo y avance de la flecha, sin desplazamiento vertical.
 *
 * 1.0.1 - .fidys-wrap usa el mismo sangrado que el hero para que todas las
 *         secciones compartan ancho exacto.
 */

/* -------------------------------------------------------------------------
   1. Tokens
   ---------------------------------------------------------------------- */

:root {

	/* Paleta corporativa (equivalencias con las globales de Astra). */
	--fidys-color-primary: #003b5c;        /* ast-global-color-0 */
	--fidys-color-secondary: #235779;      /* ast-global-color-1 */
	--fidys-color-accent: #47799e;         /* ast-global-color-2 */
	--fidys-color-tint: #dcf0ff;           /* ast-global-color-3 */
	--fidys-color-surface: #f0f5fa;        /* ast-global-color-4 */
	--fidys-color-white: #ffffff;          /* ast-global-color-5 */
	--fidys-color-offwhite: #fcfcfc;       /* ast-global-color-6 */
	--fidys-color-ink: #111111;            /* ast-global-color-7 */
	--fidys-color-ink-strong: #00040a;     /* ast-global-color-8 */

	/* Derivados. No existen en la paleta de Astra: se calculan a partir de
	   ella para cubrir fondos oscuros y líneas de separación. */
	--fidys-color-primary-dark: #002a42;   /* Pie de página y fondos profundos. */
	--fidys-color-line: #c5dded;           /* Bordes de tarjetas y separadores. */
	--fidys-color-line-soft: #e4eff7;      /* Separadores muy sutiles. */

	/* Co-branding. Colores identitarios de iniciativas asociadas: verde
	   SEMERGEN para Retos FIDYS y dorado para Reconocimientos. No forman
	   parte de la paleta corporativa de Astra. */
	--fidys-color-semergen: #1f695d;
	--fidys-color-semergen-oscuro: #155247;
	--fidys-color-naranja: #ff7600;
	--fidys-color-oro: #b18442;
	--fidys-color-oro-oscuro: #8d662f;

	--fidys-surface-semergen: #f4f9f6;
	--fidys-line-semergen: #bcd8cf;
	--fidys-surface-oro: #fbf7f1;
	--fidys-line-oro: #dfccb0;

	/* Gradientes. */
	--fidys-gradient-primary: linear-gradient(135deg, var(--fidys-color-primary), var(--fidys-color-secondary));
	--fidys-gradient-deep: linear-gradient(135deg, var(--fidys-color-primary-dark), var(--fidys-color-secondary));
	--fidys-gradient-semergen: linear-gradient(135deg, var(--fidys-color-semergen), var(--fidys-color-semergen-oscuro));
	--fidys-gradient-oro: linear-gradient(135deg, var(--fidys-color-oro-oscuro), var(--fidys-color-oro));

	/* Sombras. */
	--fidys-shadow-soft: 0 7px 30px rgba(0, 59, 92, 0.16);
	--fidys-shadow-card: 0 12px 45px rgba(0, 59, 92, 0.09);

	/* Radios. */
	--fidys-radius-s: 7px;
	--fidys-radius-m: 10px;
	--fidys-radius-l: 16px;

	/* Layout. */
	--fidys-max: 1500px;
	--fidys-gutter: 35px;
	--fidys-bleed: max(var(--fidys-gutter), calc((100vw - var(--fidys-max)) / 2 + var(--fidys-gutter)));

	/* Tipografía. Hereda de Astra por defecto. */
	--fidys-font: inherit;
}

/* -------------------------------------------------------------------------
   2. Contenedor
   ---------------------------------------------------------------------- */

.fidys-wrap {
	padding-inline: var(--fidys-bleed);
}

/* El contenido interno se limita al ancho máximo, igual que en el hero. */
.fidys-wrap > * {
	max-width: var(--fidys-max);
	margin-inline: auto;
}

/* -------------------------------------------------------------------------
   3. Neutralización de estilos heredados de Astra
   ---------------------------------------------------------------------- */

/* Astra sangra las listas y subraya los enlaces del contenido mediante
   selectores tipo .entry-content ul / .entry-content a. Estas reglas los
   neutralizan dentro de cualquier bloque FIDYS con especificidad suficiente,
   sin recurrir a !important. */

[class*="fidys-"] ul[class],
[class*="fidys-"] ol[class] {
	margin-block: 0;
	padding-inline-start: 0;
	list-style: none;
}

[class*="fidys-"] a[class],
[class*="fidys-"] a[class]:hover,
[class*="fidys-"] a[class]:focus,
[class*="fidys-"] a[class]:focus-visible {
	text-decoration: none;
}

/* -------------------------------------------------------------------------
   4. Utilidades compartidas
   ---------------------------------------------------------------------- */

.fidys-kicker {
	font-size: 11px;
	font-weight: 700;
	letter-spacing: 1.3px;
	color: var(--fidys-color-accent);
	text-transform: uppercase;
}

.fidys-regla {
	display: block;
	width: 52px;
	height: 3px;
	margin: 26px 0;
	background: var(--fidys-color-primary);
}

.fidys-boton {
	display: inline-flex;
	align-items: center;
	justify-content: space-between;
	gap: 14px;
	min-width: 185px;
	padding: 15px 20px;
	border-radius: var(--fidys-radius-s);
	background: var(--fidys-gradient-primary);
	color: var(--fidys-color-white);
	font-size: 12px;
	font-weight: 600;
	text-decoration: none;
	white-space: nowrap;
	background-size: 100% 100%;
	transition: background-color 0.25s ease, background-image 0.25s ease;
}

.fidys-boton:hover,
.fidys-boton:focus-visible {
	background-image: none;
	background-color: var(--fidys-color-primary-dark);
	color: var(--fidys-color-white);
}

.fidys-boton--claro {
	background: var(--fidys-color-white);
	color: var(--fidys-color-primary);
}

.fidys-boton--claro:hover,
.fidys-boton--claro:focus-visible {
	background-color: var(--fidys-color-tint);
	color: var(--fidys-color-primary);
}

/* Botón secundario sobre fondo claro: necesita contorno para no perderse. */
.fidys-boton--contorno {
	border: 1px solid var(--fidys-color-primary);
	background: var(--fidys-color-white);
	color: var(--fidys-color-primary);
}

.fidys-boton--contorno:hover,
.fidys-boton--contorno:focus-visible {
	background-color: var(--fidys-color-tint);
	color: var(--fidys-color-primary);
}

.fidys-boton .colorable-icon {
	width: 17px;
	height: 17px;
	flex: 0 0 auto;
	transition: transform 0.25s ease;
}

.fidys-boton:hover .colorable-icon,
.fidys-boton:focus-visible .colorable-icon {
	transform: translateX(5px);
}

/* Icono circular reutilizable. */
.fidys-icono-circular {
	display: grid;
	place-items: center;
	flex: 0 0 auto;
	width: 54px;
	height: 54px;
	border: 1px solid currentColor;
	border-radius: 50%;
	color: var(--fidys-color-accent);
}

.fidys-icono-circular .colorable-icon {
	width: 25px;
	height: 25px;
}

.fidys-icono-circular--solido {
	border-color: transparent;
	background: var(--fidys-color-primary);
	color: var(--fidys-color-white);
}

.fidys-icono-circular--solido-suave {
	border-color: transparent;
	background: var(--fidys-color-secondary);
	color: var(--fidys-color-white);
}

/* Variantes de co-branding. */
.fidys-icono-circular--semergen {
	color: var(--fidys-color-semergen);
}

.fidys-icono-circular--semergen.fidys-icono-circular--solido {
	background: var(--fidys-color-semergen);
	color: var(--fidys-color-white);
}

.fidys-icono-circular--oro {
	color: var(--fidys-color-oro);
}

.fidys-icono-circular--oro.fidys-icono-circular--solido {
	background: var(--fidys-color-oro);
	color: var(--fidys-color-white);
}

/* Etiquetas tipo chip. */
.fidys-etiquetas {
	display: flex;
	flex-wrap: wrap;
	gap: 8px;
	padding: 0;
	list-style: none;
}

/* El reset de listas anula los márgenes; se restituye aquí con la
   especificidad necesaria para prevalecer sobre él. */
[class*="fidys-"] ul.fidys-etiquetas {
	margin-block: 25px;
}

.fidys-etiquetas__item {
	padding: 8px 11px;
	border: 1px solid var(--fidys-color-line);
	border-radius: 20px;
	background: var(--fidys-color-white);
	font-size: 9px;
	line-height: 1.4;
}

/* -------------------------------------------------------------------------
   5. Patrón de sección
   ---------------------------------------------------------------------- */

/* Envoltorio estándar de sección: el sangrado va en la sección y el ancho
   máximo en el interior, de modo que todas comparten ancho exacto con el
   hero aunque el fondo sea de borde a borde. */
.fidys-seccion {
	padding: 95px var(--fidys-bleed);
	color: var(--fidys-color-primary);
	font-family: var(--fidys-font);
}

.fidys-seccion__interior {
	max-width: var(--fidys-max);
	margin-inline: auto;
}

.fidys-seccion--claro {
	background: var(--fidys-color-offwhite);
}

.fidys-seccion--suave {
	background: var(--fidys-color-surface);
}

.fidys-seccion--oscuro {
	background: var(--fidys-color-primary);
	color: var(--fidys-color-white);
}

/* -------------------------------------------------------------------------
   6. Encabezado de sección
   ---------------------------------------------------------------------- */

.fidys-encabezado {
	display: flex;
	align-items: flex-start;
	justify-content: space-between;
	gap: 50px;
	margin-bottom: 45px;
}

.fidys-encabezado__titulo {
	margin: 10px 0 0;
	font-size: clamp(32px, 3.6vw, 54px);
	font-weight: 700;
	line-height: 1.08;
	letter-spacing: -2px;
	color: var(--fidys-color-primary);
}

/* Compensa el antetítulo para que el texto de apoyo arranque a la altura del
   titular, no del bloque completo. */
.fidys-encabezado__intro {
	max-width: 460px;
	margin: 26px 0 0;
	font-size: 14px;
	line-height: 1.7;
	color: var(--fidys-color-secondary);
}

.fidys-seccion--oscuro .fidys-encabezado__titulo {
	color: var(--fidys-color-white);
}

.fidys-seccion--oscuro .fidys-encabezado__intro,
.fidys-seccion--oscuro .fidys-kicker {
	color: var(--fidys-color-tint);
}

/* -------------------------------------------------------------------------
   7. Énfasis en titulares
   ---------------------------------------------------------------------- */

/* Los campos de titular admiten <em> para destacar una palabra. Se neutraliza
   la cursiva y se sustituye por color, como en los diseños de origen. */
[class*="fidys-"] :is(h1, h2, h3) em {
	font-style: normal;
	color: var(--fidys-color-accent);
}

.fidys-seccion--oscuro :is(h1, h2, h3) em {
	color: var(--fidys-color-tint);
}

/* -------------------------------------------------------------------------
   8. Accesibilidad y motion
   ---------------------------------------------------------------------- */

.fidys-reveal {
	opacity: 0;
	transform: translateY(18px);
	transition: opacity 0.6s ease, transform 0.6s ease;
}

.fidys-reveal.is-visible {
	opacity: 1;
	transform: none;
}

:where(.fidys-boton, .fidys-hero, .fidys-ciclo) a:focus-visible {
	outline: 2px solid var(--fidys-color-primary);
	outline-offset: 3px;
}

@media (prefers-reduced-motion: reduce) {

	.fidys-reveal {
		opacity: 1;
		transform: none;
		transition: none;
	}

	.fidys-boton,
	.fidys-boton .colorable-icon {
		transition: none;
	}

	.fidys-boton:hover .colorable-icon,
	.fidys-boton:focus-visible .colorable-icon {
		transform: none;
	}
}

/* -------------------------------------------------------------------------
   9. Responsive del patrón de sección
   ---------------------------------------------------------------------- */

@media (max-width: 650px) {

	.fidys-seccion {
		padding: 60px 20px;
	}

	.fidys-encabezado {
		flex-direction: column;
		align-items: flex-start;
		gap: 12px;
		margin-bottom: 30px;
	}

	.fidys-encabezado__titulo {
		letter-spacing: -1.2px;
	}

	.fidys-encabezado__intro {
		margin-top: 0;
	}
}