/*
 * Banner de portada con la mascota institucional.
 *
 * Se carga solo en la portada (ver inc/enqueue.php): es CSS pesado en efectos
 * y no tiene por qué viajar en el resto de páginas.
 */

/* ==========================================================================
   Contenedor
   ========================================================================== */

.proamsa-hero {
	position: relative;
	isolation: isolate;
	overflow: clip;
	/* Reducido a la mitad: antes 3–6rem arriba y 6–9rem abajo. */
	padding-block: clamp(1.5rem, 3.5vw, 3rem) clamp(3rem, 5vw, 4.5rem);
	background:
		radial-gradient(120% 90% at 78% 12%, #0A3E6B 0%, transparent 58%),
		linear-gradient(155deg, #00122A 0%, #041F3A 55%, #052E52 100%);
	color: #FFFFFF;
}

/* --- Decoración de fondo --- */

.proamsa-hero__fondo {
	position: absolute;
	inset: 0;
	z-index: -1;
	pointer-events: none;
}

.proamsa-hero__halo {
	position: absolute;
	border-radius: 50%;
	filter: blur(90px);
	opacity: 0.34;
}

.proamsa-hero__halo--lima {
	inset-block-start: -12%;
	inset-inline-end: 4%;
	width: min(46vw, 560px);
	aspect-ratio: 1;
	background: #A8D24A;
}

.proamsa-hero__halo--verde {
	inset-block-end: -22%;
	inset-inline-start: -8%;
	width: min(40vw, 460px);
	aspect-ratio: 1;
	background: #549000;
	opacity: 0.26;
}

/* Trazos curvos que retoman el gesto del logotipo. */
.proamsa-hero__trazo {
	position: absolute;
	inset-block-end: 8%;
	inset-inline: 0;
	width: 100%;
	height: auto;
}

/*
 * Onda que empalma el banner con la sección siguiente.
 *
 * Debe llevar EXACTAMENTE el color del bloque que viene debajo (la sección de
 * principios, en verde niebla). Si no coinciden, se ve una franja de otro
 * color entre el banner y la sección y el empalme parece un error.
 */
.proamsa-hero {
	--proamsa-onda-color: var(--wp--preset--color--base-suave, #F3F7EE);
}

.proamsa-hero__onda {
	position: absolute;
	inset-block-end: -1px;
	inset-inline: 0;
	line-height: 0;
	color: var(--proamsa-onda-color);
	pointer-events: none;
}

.proamsa-hero__onda svg {
	display: block;
	width: 100%;
	height: clamp(52px, 7vw, 108px);
}

/* ==========================================================================
   Rejilla
   ========================================================================== */

/*
 * Escritorio: dos columnas, texto a la izquierda y mascota a la derecha.
 *
 * La mascota NUNCA sube por encima del texto, en ningún ancho: eso era lo que
 * producía el salto que se corrigió en su día. Lo que sí cambia en móvil es el
 * reparto de la rejilla —titular y entradas pasan a ancho completo y solo los
 * botones y los sellos siguen compartiendo fila con la mascota—, porque con
 * dos columnas estrechas el titular vivía en unos 200 px y partía palabras.
 * Ese reajuste está al final del archivo.
 */
.proamsa-hero__rejilla > .wp-block-group__inner-container,
.proamsa-hero__rejilla {
	display: grid;
	grid-template-columns: minmax(0, 1.05fr) minmax(0, 0.95fr);
	gap: clamp(0.75rem, 3vw, 3.5rem);
	align-items: center;
}

/* ==========================================================================
   Columna de texto
   ========================================================================== */

/* Distintivo superior. */
.proamsa-chip {
	display: inline-flex;
	align-items: center;
	gap: 0.55rem;
	margin: 0 0 1.25rem;
	padding: 0.5rem 1.05rem;
	border: 1px solid rgba(168, 210, 74, 0.42);
	border-radius: 999px;
	background: rgba(168, 210, 74, 0.1);
	color: #C6E85A;
	font-size: 0.8125rem;
	font-weight: 600;
	letter-spacing: 0.04em;
	text-transform: uppercase;
}

.proamsa-chip__punto {
	width: 8px;
	height: 8px;
	border-radius: 50%;
	background: #A8D24A;
	box-shadow: 0 0 0 4px rgba(168, 210, 74, 0.22);
}

/*
 * El mínimo del clamp baja hasta 1.3rem porque, al no apilarse nunca el
 * banner, en móvil el titular vive en una columna de unos 200 px: con un
 * mínimo alto se desbordaría o partiría las palabras.
 */
.proamsa-hero__titular {
	margin: 0;
	font-size: clamp(1.3rem, 5.1vw, 4.35rem);
	font-weight: 800;
	line-height: 1.06;
	letter-spacing: -0.03em;
	text-wrap: balance;
	overflow-wrap: break-word;
}

/*
 * El resaltado usa el degradado lima recortado sobre el texto. Se declara
 * antes un color sólido de reserva: si el navegador no soporta
 * background-clip:text, el texto seguiría siendo legible en lima plano en vez
 * de quedar invisible.
 */
.proamsa-resalte {
	color: #A8D24A;
}

@supports (-webkit-background-clip: text) or (background-clip: text) {
	.proamsa-resalte {
		background: linear-gradient(100deg, #A8D24A 0%, #C6E85A 45%, #7FBF2A 100%);
		-webkit-background-clip: text;
		background-clip: text;
		color: transparent;
	}
}

.proamsa-hero__entrada {
	max-width: 34rem;
	margin: clamp(0.6rem, 1.6vw, 1.5rem) 0 0;
	color: #C4D4E4;
	font-size: clamp(0.78rem, 1.55vw, 1.19rem);
	line-height: 1.58;
	text-wrap: pretty;
}

.proamsa-hero__entrada strong {
	color: #FFFFFF;
}

/* ==========================================================================
   Acciones del banner

   Los estilos de .proamsa-btn viven en tema.css porque el componente también
   se usa en la franja de cumplimiento y en futuras páginas.
   ========================================================================== */

.proamsa-acciones {
	display: flex;
	flex-wrap: wrap;
	gap: 0.85rem;
	margin-top: 2.15rem;
}

.proamsa-acciones .proamsa-btn {
	flex: 1;
	min-width: 160px;
}

/* ==========================================================================
   Sellos de confianza
   ========================================================================== */

.proamsa-sellos {
	display: flex;
	flex-wrap: wrap;
	gap: 0.75rem 2.25rem;
	margin: 2.6rem 0 0;
	padding: 1.5rem 0 0;
	border-top: 1px solid rgba(255, 255, 255, 0.13);
	list-style: none;
}

.proamsa-sellos li {
	display: flex;
	flex-direction: column;
	gap: 0.15rem;
}

.proamsa-sellos strong {
	color: #A8D24A;
	font-size: 0.98rem;
	font-weight: 700;
}

.proamsa-sellos span {
	color: #97AABE;
	font-size: 0.8125rem;
}

/* ==========================================================================
   Mascota
   ========================================================================== */

/*
 * El halo y la mascota se apilan en LA MISMA celda de rejilla. Así el centro
 * del halo coincide siempre con el centro de la imagen, sea cual sea el ancho
 * de la columna.
 *
 * Antes el halo se posicionaba respecto al contenedor, que es más ancho que
 * la imagen: al estrechar la ventana el resplandor se desplazaba a un lado y
 * quedaba descolgado de la figura.
 */
/*
 * width:fit-content hace que el contenedor mida EXACTAMENTE lo que la imagen.
 * Gracias a eso, los halos posicionados en absoluto y centrados sobre él
 * quedan centrados sobre la mascota, sea cual sea el ancho de la columna.
 *
 * Los halos van en absoluto a propósito: como elementos de rejilla, sus
 * 660 px de alto estiraban la celda y abrían un hueco enorme bajo la figura.
 * Fuera del flujo, decoran sin ocupar espacio.
 */
.proamsa-hero__figura {
	position: relative;
	display: grid;
	place-items: center;
	width: fit-content;
	margin-inline: auto;
}

/*
 * Halo verde difuminado alrededor de la mascota.
 *
 * La imagen es un PNG/WebP con transparencia real, así que el fondo lo pone
 * el CSS. Se resuelve con dos capas superpuestas: un núcleo lima cercano a la
 * figura y una aureola verde de marca más abierta. Al ser CSS y no parte de
 * la imagen, el color se ajusta sin volver a exportar nada.
 */
/* Halo interior: lima ceñido a la silueta. */
.proamsa-hero__foco {
	position: absolute;
	inset-block-start: 50%;
	inset-inline-start: 50%;
	translate: -50% -50%;
	width: 108%;
	aspect-ratio: 1 / 1.2;
	border-radius: 50%;
	background:
		radial-gradient(closest-side, rgba(168, 210, 74, 0.48) 0%, rgba(168, 210, 74, 0.2) 46%, transparent 72%),
		radial-gradient(closest-side, rgba(84, 144, 0, 0.58) 0%, rgba(84, 144, 0, 0.26) 58%, transparent 82%);
	filter: blur(32px);
	pointer-events: none;
}

/* Halo exterior: verde de marca, más amplio, para que no corte en seco. */
.proamsa-hero__figura::before {
	content: "";
	position: absolute;
	inset-block-start: 50%;
	inset-inline-start: 50%;
	translate: -50% -50%;
	width: 148%;
	aspect-ratio: 1 / 1.05;
	border-radius: 50%;
	background: radial-gradient(closest-side, rgba(84, 144, 0, 0.32) 0%, rgba(46, 108, 0, 0.14) 52%, transparent 78%);
	filter: blur(54px);
	pointer-events: none;
}

/*
 * La mascota viene de una pieza gráfica con fondo fotográfico, no de un
 * recorte con transparencia. En lugar de disimular ese fondo con una máscara
 * difusa (que deja bordes sucios y come el gorro y las botas), se enmarca la
 * foto en un arco con anillo lima: el fondo pasa a ser parte del encuadre y
 * el resultado se lee como una decisión de diseño, no como un recorte fallido.
 *
 * El arco además rima con la forma de la cabeza de la capibara.
 *
 * Cuando exista el PNG con transparencia, basta sustituir este bloque por
 * `background:none; border-radius:0; box-shadow:none;` y añadir el
 * drop-shadow de silueta.
 */
/*
 * La mascota es un WebP/PNG con transparencia real, así que se muestra tal
 * cual: sin marco, sin máscara y sin recorte. El fondo verde lo aportan los
 * halos difuminados de detrás.
 */
.proamsa-hero__mascota {
	position: relative;
	display: block;
	/*
	 * Escala continua con el ancho de ventana. El mínimo es 120 px para que
	 * en pantallas de 320 px la mascota siga siendo reconocible sin invadir
	 * la columna de texto.
	 */
	width: clamp(120px, 33vw, 420px);
	/*
	 * height:auto es imprescindible: los atributos width/height del <img> son
	 * pistas de presentación que fijan una altura definida, y con una altura
	 * definida el navegador IGNORA aspect-ratio. Sin esta línea la imagen se
	 * renderiza a su alto intrínseco y revienta el banner.
	 */
	height: auto;
	aspect-ratio: 680 / 1182;
	/* Sombra proyectada sobre la silueta, no sobre una caja: al tener alfa,
	   drop-shadow sigue el contorno real de la figura. */
	filter: drop-shadow(0 26px 34px rgba(0, 6, 16, 0.62));
}

.proamsa-hero__figura picture {
	position: relative;
	display: block;
	line-height: 0;
}

/* Tarjeta flotante sobre la imagen. */
.proamsa-hero__tarjeta {
	position: absolute;
	inset-block-end: 6%;
	inset-inline-start: -2%;
	display: flex;
	align-items: center;
	gap: 0.8rem;
	max-width: 17rem;
	padding: 0.9rem 1.15rem;
	border: 1px solid rgba(255, 255, 255, 0.14);
	border-radius: 14px;
	background: rgba(0, 18, 42, 0.72);
	box-shadow: 0 18px 36px -12px rgba(0, 0, 0, 0.6);
	backdrop-filter: blur(14px);
}

.proamsa-hero__tarjeta-icono {
	display: grid;
	flex: none;
	place-items: center;
	width: 38px;
	height: 38px;
	border-radius: 10px;
	background: rgba(168, 210, 74, 0.16);
	color: #A8D24A;
}

.proamsa-hero__tarjeta-texto {
	display: flex;
	flex-direction: column;
	color: #B9CADB;
	font-size: 0.8125rem;
	line-height: 1.35;
}

.proamsa-hero__tarjeta-texto strong {
	color: #FFFFFF;
	font-size: 0.9375rem;
}

/* ==========================================================================
   Móvil: el banner cambia de reparto
   ========================================================================== */

/*
 * Hasta 780 px el banner se organiza en dos zonas:
 *
 *   1. Distintivo, titular y entradas ocupan el ANCHO COMPLETO.
 *   2. Botones y sellos comparten fila con la mascota, que se queda a la
 *      derecha igual que en escritorio.
 *
 * display:contents disuelve .proamsa-hero__texto como caja sin sacarlo del
 * marcado: sus hijos pasan a ser elementos directos de la rejilla y se pueden
 * colocar uno a uno. Es lo que permite que los botones bajen a compartir fila
 * con la mascota mientras el titular se queda arriba a ancho completo, sin
 * duplicar nodos ni reordenar nada en hero-inicio.php.
 *
 * OJO: las filas van numeradas a mano. display:contents no crea un contexto de
 * rejilla anidado, así que la colocación automática entrelazaría los hijos del
 * texto con la figura. Si se añade o se quita un párrafo en el patrón, hay que
 * renumerar aquí.
 */
@media (max-width: 780px) {
	.proamsa-hero__rejilla > .wp-block-group__inner-container,
	.proamsa-hero__rejilla {
		grid-template-columns: minmax(0, 1fr) minmax(0, 0.8fr);
		gap: 0 1rem;
		align-items: start;
	}

	.proamsa-hero__texto {
		display: contents;
	}

	.proamsa-chip {
		grid-area: 1 / 1 / 2 / -1;
		/* Al blocarse como elemento de rejilla, inline-flex pasa a flex y el
		   distintivo se estiraría de lado a lado. justify-self lo devuelve a
		   la anchura de su contenido. */
		justify-self: start;
		margin-bottom: 0;
		padding: 0.35rem 0.75rem;
		font-size: 0.72rem;
	}

	.proamsa-hero__titular {
		grid-area: 2 / 1 / 3 / -1;
		/* A ancho completo el titular ya no vive en una columna de 200 px, así
		   que el mínimo del clamp sube: a 1.3rem se veía diminuto. */
		font-size: clamp(1.7rem, 6.2vw, 2.5rem);
		margin-top: 0.9rem;
	}

	.proamsa-hero__entrada {
		grid-area: 3 / 1 / 4 / -1;
		max-width: none;
		margin-top: 0.7rem;
		font-size: clamp(0.9rem, 3.4vw, 1.05rem);
	}

	.proamsa-hero__entrada.proamsa-hero__entrada--segunda {
		grid-area: 4 / 1 / 5 / -1;
	}

	.proamsa-acciones {
		grid-area: 5 / 1 / 6 / 2;
		flex-direction: column;
		gap: 0.5rem;
		margin-top: 1.4rem;
	}

	.proamsa-btn {
		min-height: 46px;
		padding: 0 0.9rem;
		font-size: 0.8rem;
	}

	/*
	 * En la columna estrecha los botones ocupan todo el ancho disponible: con
	 * el flex:1 y el mínimo de 160px del reparto de escritorio se desbordaban
	 * por la derecha en pantallas de 320 px.
	 */
	.proamsa-acciones .proamsa-btn {
		flex: none;
		width: 100%;
		min-width: 0;
	}

	.proamsa-sellos {
		grid-area: 6 / 1 / 7 / 2;
		/* En columna: en fila no caben tres pares en unos 160 px. */
		flex-direction: column;
		gap: 0.6rem;
		margin-top: 1.25rem;
		padding-top: 1rem;
	}

	.proamsa-sellos strong {
		font-size: 0.8rem;
	}

	.proamsa-sellos span {
		font-size: 0.68rem;
	}

	/*
	 * La mascota abarca el alto de las dos filas que tiene al lado.
	 *
	 * El tope de anchura NO es decorativo: la figura conserva su proporción
	 * 680/1182, así que cada píxel de ancho son 1,74 de alto. Al abarcar dos
	 * filas, ese alto se lo IMPONE a las filas, que se estiran para caber y
	 * abren un hueco muerto entre los botones y los sellos. Sin tope, a 780 px
	 * la mascota pedía 562 px de alto contra 280 px de contenido a la
	 * izquierda: 155 px de vacío y un banner de 908 px.
	 */
	.proamsa-hero__figura {
		grid-area: 5 / 2 / 7 / 3;
		align-self: center;
		width: 100%;
		max-width: 200px;
		margin-inline: auto;
	}

	/* Los halos se dimensionan en % de la figura, así que la siguen solos. */
	.proamsa-hero__mascota {
		width: 100%;
	}

	/* La tarjeta flotante estorba cuando la figura es pequeña. */
	.proamsa-hero__tarjeta {
		display: none;
	}
}

/* ==========================================================================
   Movimiento reducido
   ========================================================================== */

@media (prefers-reduced-motion: reduce) {
	.proamsa-btn,
	.proamsa-btn svg {
		transition: none;
	}

	.proamsa-btn:hover,
	.proamsa-btn:focus-visible {
		transform: none;
	}
}