/* =========================================================================
   Piezas de contenido de las paginas largas: pilar, satelites y legales.
   ========================================================================= */

/* Cita destacada dentro del texto. */
.astrea-destacado {
	margin: 36px 0;
	padding: 22px 26px;
	border-left: 3px solid var(--astrea-oro);
	border-radius: 0 var(--astrea-radio) var(--astrea-radio) 0;
	background: var(--astrea-blanco);
}
.astrea-destacado p {
	margin: 0;
	color: var(--astrea-tinta);
	font-family: var(--astrea-display);
	font-size: clamp(18px, 1.7vw, 21px);
	font-weight: 600;
	line-height: 1.45;
}

/* Panel de llamada a la accion intercalado en el texto. */
.astrea-cta-bloque {
	margin: 56px 0;
	padding: clamp(28px, 3.5vw, 44px);
	border-radius: var(--astrea-radio);
	background: var(--astrea-tinta);
}
.astrea-cta-bloque h2 {
	margin: 0 0 14px;
	color: var(--astrea-crema);
	font-size: clamp(22px, 2.2vw, 28px);
}
.astrea-cta-bloque p {
	margin: 0 0 28px;
	color: rgba(252, 249, 247, .84);
	font-size: 17px;
	max-width: 60ch;
}
.astrea-cta-bloque .wp-block-buttons { gap: 20px; }
.astrea-cta-bloque .wp-block-button__link::after {
	content: "\2192";
	display: inline-block;
	transition: transform var(--astrea-transicion);
}
.astrea-cta-bloque .wp-block-button__link:hover::after { transform: translateX(3px); }

/* Listas numeradas de los planes de accion. */
.astrea-prosa ol { counter-reset: paso; list-style: none; padding-left: 0; }
.astrea-prosa ol > li {
	counter-increment: paso;
	position: relative;
	margin-bottom: 16px;
	padding-left: 44px;
}
.astrea-prosa ol > li::before {
	content: counter(paso, decimal-leading-zero);
	position: absolute;
	left: 0;
	top: 1px;
	color: var(--astrea-oro-texto);
	font-family: var(--astrea-display);
	font-size: 17px;
	font-weight: 600;
}

/* Vinetas con el filete de la casa. */
.astrea-prosa ul { list-style: none; padding-left: 0; }
.astrea-prosa ul > li {
	position: relative;
	margin-bottom: 14px;
	padding-left: 26px;
}
.astrea-prosa ul > li::before {
	content: "";
	position: absolute;
	left: 2px;
	top: .68em;
	width: 7px;
	height: 7px;
	border-radius: 50%;
	background: var(--astrea-oro);
}

/* En el panel oscuro las vinetas cambian de color junto con el texto. */
.astrea-cta-bloque ul > li::before { background: var(--astrea-crema); }

.astrea-prosa strong { color: var(--astrea-tinta); font-weight: 700; }
.astrea-prosa em { font-style: italic; }

/* Llamada destacada al autodiagnostico, pensada para ir al inicio de la pagina. */
.astrea-cta-destacado {
	display: grid;
	gap: 6px;
	margin: 0 0 48px;
	padding: clamp(24px, 3vw, 36px);
	border: 1px solid var(--astrea-oro);
	border-radius: var(--astrea-radio);
	background: var(--astrea-blanco);
	box-shadow: 0 16px 40px -32px rgba(61, 62, 66, .5);
}
.astrea-cta-destacado .astrea-eyebrow { margin: 0; }
.astrea-cta-destacado h2 { margin: 0; font-size: clamp(21px, 2vw, 26px); }
.astrea-cta-destacado p  { margin: 4px 0 0; font-size: 16px; max-width: 62ch; }
.astrea-cta-destacado .wp-block-buttons { margin-top: 20px; }
.astrea-cta-destacado .wp-block-button__link::after {
	content: "\2192";
	display: inline-block;
	transition: transform var(--astrea-transicion);
}
.astrea-cta-destacado .wp-block-button__link:hover::after { transform: translateX(3px); }

/* Las tablas de contenido no caben en un movil estrecho, y con el
   overflow-x:hidden del body la ultima columna quedaba inaccesible.
   Se hacen desplazables, con foco alcanzable por teclado como exige WCAG
   para cualquier region con scroll propio. */
.astrea-prosa .wp-block-table {
	overflow-x: auto;
	overscroll-behavior-x: contain;
	margin-bottom: 28px;
}
.astrea-prosa .wp-block-table:focus-visible {
	outline: 2px solid var(--astrea-oro);
	outline-offset: 4px;
	border-radius: 4px;
}
.astrea-prosa .wp-block-table table { min-width: 460px; margin-bottom: 0; }

@media (max-width: 600px) {
	.astrea-prosa .wp-block-table th,
	.astrea-prosa .wp-block-table td { padding: 12px 14px; font-size: 15px; }
}