/* =========================================================================
   Normalizacion de los bloques del nucleo.

   El contenido se arma con core/group, heading, paragraph, image, columns y
   buttons, que traen su propio marcado. Aqui se ajustan a la reticula y al
   lenguaje visual de Astrea, para que el editor pueda escribir encima sin
   que nada se descuadre.
   ========================================================================= */

.wp-block-image,
.wp-block-group figure { margin: 0; }

.wp-block-image img { border-radius: inherit; }

/* ---------- core/button ---------- */

.wp-block-buttons {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	gap: 28px;
	margin: 0;
}
.wp-block-button { margin: 0; }

.wp-block-button__link {
	display: inline-flex;
	align-items: center;
	gap: 10px;
	padding: 14px 28px;
	border: 1px solid transparent;
	border-radius: var(--astrea-radio);
	background: var(--astrea-oro);
	color: var(--astrea-blanco);
	font-family: var(--astrea-texto);
	font-size: 16px;
	font-weight: 500;
	letter-spacing: .02em;
	line-height: 1.4;
	text-decoration: none;
	transition: background var(--astrea-transicion), transform var(--astrea-transicion);
}
.wp-block-button__link:hover {
	background: var(--astrea-oro-hover);
	color: var(--astrea-blanco);
	transform: translateY(-1px);
}

/* Variantes: se aplican como clase adicional del bloque boton. */
.wp-block-button.es-fantasma .wp-block-button__link {
	padding-inline: 0;
	background: transparent;
	color: var(--astrea-crema);
}
.wp-block-button.es-fantasma .wp-block-button__link:hover {
	background: transparent;
	color: var(--astrea-oro);
	transform: none;
}

.wp-block-button.es-linea .wp-block-button__link {
	background: transparent;
	border-color: var(--astrea-oro);
	color: var(--astrea-oro);
}
.wp-block-button.es-linea .wp-block-button__link:hover {
	background: var(--astrea-oro);
	color: var(--astrea-blanco);
}

/* ---------- core/columns ---------- */

.wp-block-columns { gap: 32px; margin: 0; }
.wp-block-column  { min-width: 0; }

/* ---------- core/separator ---------- */

.wp-block-separator {
	border: 0;
	border-top: 1px solid var(--astrea-linea);
	margin: 0;
	opacity: 1;
}

/* ---------- Anclas de seccion ---------- */

/* La cabecera es fija: las anclas necesitan margen de desplazamiento propio. */
[id] { scroll-margin-top: calc(var(--astrea-cabecera) + 24px); }

/* ---------- Reticulas ---------- */

/* WordPress inyecta margin-block-start a todo hijo que no sea el primero de un
   contenedor en flujo. En los contenedores que este tema convierte en grid ese
   margen descuadra las columnas: la primera queda 24px mas arriba que el resto.
   Se neutraliza con la misma especificidad y despues en la cascada. */
.astrea-tarjetas > :not(:first-child),
.astrea-compromiso__grid > :not(:first-child),
.astrea-enfoque__grid > :not(:first-child),
.astrea-enfoque__imagenes > :not(:first-child),
.astrea-manifiesto__grid > :not(:first-child),
.astrea-ley__grid > :not(:first-child),
.astrea-contacto__grid > :not(:first-child),
.astrea-equipo__ficha > :not(:first-child),
.astrea-diag__grid > :not(:first-child),
.astrea-diag__campos > :not(:first-child) { margin-block-start: 0; }

/* Texto solo para lectores de pantalla. */
.screen-reader-text {
	position: absolute !important;
	width: 1px; height: 1px;
	margin: -1px; padding: 0;
	overflow: hidden;
	clip: rect(0, 0, 0, 0);
	white-space: nowrap;
	border: 0;
}

/* .wp-block-buttons anula el margen: se devuelve donde el diseno lo pide. */
.astrea-ley .wp-block-buttons { margin-top: 36px; }

/* Los CTA del hero y del bloque de la ley llevan flecha, como en el original.
   Se dibuja con CSS porque core/button no admite iconos en su marcado. */
.astrea-hero .wp-block-button__link::after,
.astrea-ley .wp-block-button__link::after {
	content: "\2192";
	display: inline-block;
	transition: transform var(--astrea-transicion);
}
.astrea-hero .wp-block-button__link:hover::after,
.astrea-ley .wp-block-button__link:hover::after { transform: translateX(3px); }