/*
|--------------------------------------------------------------------------
| AMOREA — PÁGINAS ESTÁTICAS (Nosotros / Contacto)
|--------------------------------------------------------------------------
| Compartido por las dos páginas a propósito (a diferencia de home vs.
| tienda, ver docs/ARCHITECTURE.md "Convención de CSS scoping"): son dos
| páginas nuevas, mucho más parecidas entre sí que tienda/home, así que
| duplicar aquí sería el anti-patrón contrario. Sólo se carga en estas
| dos páginas (ver inc/setup/theme-assets.php, is_page).
|
| Las clases `.about-hero*` las usan AMBAS páginas (decisión explícita
| de la usuaria: Contacto debe verse igual que Nosotros en el hero) —
| el patrón viejo de dos cajas separadas (`.static-hero*`) se retiró
| por completo, sólo queda `.static-hero__placeholder` (el marcador de
| "foto pendiente", genérico, sin relación con el layout viejo).
*/

:root {
	/* Rosado "bajito"/tierno para fondos de sección — más suave que
	   --color-accent (#f6d3de), pedido explícito de la usuaria para
	   Nosotros (ronda "corrección visual", ver conversación). */
	--static-pink-soft: #fbe9ee;
}

.static-hero__placeholder {
	width: 100%;
	height: 100%;
	min-height: 320px;
	display: flex;
	align-items: center;
	justify-content: center;
	background: repeating-linear-gradient(
		45deg,
		var(--color-border),
		var(--color-border) 10px,
		var(--color-surface) 10px,
		var(--color-surface) 20px
	);
	border: 2px dashed var(--color-border);
	border-radius: var(--radius-xl);
	color: var(--color-text-muted);
	font-size: var(--text-sm);
	font-weight: 600;
	text-transform: uppercase;
	letter-spacing: 0.04em;
}

@media (max-width: 768px) {
	.static-hero__placeholder {
		min-height: 220px;
	}
}

/*
 * Nosotros — Hero, UN solo panel (texto + foto comparten el mismo fondo
 * rosado bajito) — antes eran dos cajas separadas con espacio entre
 * ellas; corregido a pedido explícito de la usuaria ("todo es uno" en
 * la referencia).
 */
/*
 * Columnas 2.4fr/1fr (no 1fr/1fr): la foto real es retrato (1086×1448,
 * relación 0.75 ancho/alto). Con columnas iguales, la caja de la foto
 * quedaba mucho más ancha que alta (~1.7 de relación) y `object-fit:
 * contain` dejaba franjas rosadas grandes a los lados para no recortar
 * al oso. Esta proporción hace que la columna de la foto (~320px a
 * 1200px de contenedor) case casi exacto con la relación real de la
 * imagen a `.about-hero__media`'s height (420px) — así se ve completa
 * Y sin espacio sobrante, sin pedir una foto distinta.
 */
/*
 * BUG real encontrado (medido, no a ojo): con columnas en `fr`, el
 * `<div>` de texto se ESTIRA a rellenar toda su columna aunque el
 * texto visible ocupe mucho menos — quedaba espacio invisible antes
 * de la imagen (207px reales medidos, contra un `gap` real de 32px).
 * `max-content` en la primera columna hace que el ancho de esa pista
 * lo determine el contenido real (el párrafo, tope en 42ch), así la
 * imagen empieza justo después, separada sólo por el `gap`.
 */
.about-hero {
	background: var(--static-pink-soft);
	border-radius: var(--radius-xl);
	padding: var(--space-10);
	display: grid;
	grid-template-columns: max-content 1fr;
	gap: var(--space-8);
	align-items: center;
}

.about-hero__content {
	display: flex;
	flex-direction: column;
	align-items: flex-start;
	gap: var(--space-3);
}

/*
 * `margin:0` explícito en los tres — un <p>/<h1> con el margen por
 * defecto del navegador SUMA sobre el `gap` del flex (los márgenes no
 * colapsan dentro de flexbox), y eso era exactamente el espacio extra
 * "innecesario" que se veía entre el eyebrow y el título.
 */
.about-hero__content > .eyebrow,
.about-hero__title,
.about-hero__description {
	margin: 0;
}

.about-hero__title {
	font-family: var(--font-display);
	font-size: var(--text-4xl);
	font-weight: 700;
	line-height: 1.05;
	color: var(--color-text);
}

.about-hero__description {
	color: var(--color-text);
	max-width: 42ch;
}

/* Contacto — pedido puntual de justificar este párrafo del hero (Nosotros no lo pidió, no se toca). */
.about-hero__description--justify {
	text-align: justify;
}

/*
 * `height` FIJA, no `max-height`: un `height:100%` en la <img> de abajo
 * no se puede resolver contra un contenedor que sólo tiene `max-height`
 * (una altura porcentual necesita que el contenedor tenga una altura
 * definida) — con sólo `max-height` la imagen se renderizaba a su alto
 * natural completo (725px, medido) y el `overflow:hidden` le cortaba
 * la diferencia, en vez de encogerla completa con `object-fit:contain`.
 * Confirmado igual en Chromium y WebKit (no era un tema de navegador).
 */
.about-hero__media {
	border-radius: var(--radius-lg);
	overflow: hidden;
	height: 260px;
}

.about-hero__media img {
	display: block;
	width: 100%;
	height: 100%;
	object-fit: cover;
}

/*
 * `max-content` en la primera columna (arriba) sólo se comprobó a
 * ancho de escritorio completo — a partir de 1024px hacia abajo el
 * texto (ancho fijo, no se encoge) deja cada vez menos espacio real a
 * la columna de la foto (`1fr`), apretándola. En vez de forzar un
 * reparto proporcional que reintroduciría el espacio muerto ya
 * corregido arriba, se apila (mismo criterio que a 768px) desde
 * 1024px — evita la franja intermedia apretada sin tocar el layout de
 * escritorio real.
 */
@media (max-width: 1024px) {
	.about-hero {
		grid-template-columns: 1fr;
	}
}

/*
 * Nosotros — "El origen de Amorea" (bloque de lectura centrado). SIN
 * fondo propio — sólo se pidió que la frase "El origen de Amorea" (el
 * eyebrow) fuera rosada, que ya lo era desde el inicio vía `.eyebrow`
 * (color: var(--color-primary)). El fondo rosado que había puesto aquí
 * fue una sobre-interpretación mía, revertido.
 */
.static-reading {
	text-align: center;
}

.static-reading__title {
	margin-top: var(--space-2);
	margin-bottom: var(--space-6);
	line-height: 1.15;
	font-weight: 700;
}

/*
 * BUG real corregido: `.static-reading p` (sin excluir `.eyebrow`) le
 * ganaba en especificidad a `.eyebrow` porque el eyebrow también es un
 * `<p>` — pintaba "EL ORIGEN DE AMOREA" del color oscuro del cuerpo en
 * vez de rosado. Confirmado con el color computado real antes de
 * corregir (rgb(45,37,48), no el rosado esperado).
 */
.static-reading p:not(.eyebrow) {
	text-align: justify;
	color: var(--color-text);
	margin-bottom: var(--space-4);
}

/*
 * Nosotros — tarjetas de valores (icono arriba, centrado). Fondo
 * rosado bajito a pedido explícito (antes blanco, heredado de `.card`)
 * y SIN el círculo rosa detrás del ícono (se quitó a pedido explícito
 * — el ícono va suelto, sin fondo propio).
 */
.value-box {
	background: var(--static-pink-soft);
	padding: var(--space-6);
	text-align: center;
	display: flex;
	flex-direction: column;
	align-items: center;
	gap: var(--space-2);
}

.value-box__icon {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	color: var(--color-primary);
}

.value-box__title {
	font-weight: 600;
	color: var(--color-text);
	margin: 0;
}

.value-box__text {
	font-size: var(--text-sm);
	color: var(--color-text-muted);
	margin: 0;
}

/*
 * Nosotros — "Selección con propósito". Invertido a pedido explícito:
 * el panel general pasa a blanco (antes rosado) y son los pasos
 * 01/02/03 los que llevan ahora el rosado bajito (antes blancos).
 */
.selection-panel {
	background: var(--color-surface);
	border: 1px solid var(--color-border);
	border-radius: var(--radius-xl);
	padding: var(--space-10);
	margin-bottom: var(--space-8);
	display: grid;
	grid-template-columns: 1.2fr 1fr;
	gap: var(--space-10);
	align-items: center;
}

.selection-panel__title {
	text-align: left;
	margin-top: var(--space-2);
	margin-bottom: var(--space-3);
}

.selection-panel__steps {
	display: flex;
	flex-direction: column;
	gap: var(--space-3);
	list-style: none;
	margin: 0;
	padding: 0;
}

.selection-step {
	background: var(--static-pink-soft);
	border-radius: var(--radius-md);
	padding: var(--space-3) var(--space-5);
	display: flex;
	align-items: center;
	gap: var(--space-3);
	font-weight: 600;
	color: var(--color-text);
}

.selection-step__number {
	color: var(--color-primary);
}

@media (max-width: 768px) {
	.selection-panel {
		grid-template-columns: 1fr;
	}
}

/*
 * Contacto — tarjetas de canal (WhatsApp / Correos / Horario /
 * Cobertura). Mismo diseño que `.value-box` de Nosotros (decisión
 * explícita de la usuaria: deben verse iguales) — fondo rosado bajito,
 * ícono suelto sin círculo detrás.
 */
/* Intercaladas rosa/blanco (decisión explícita): WhatsApp y Horario en
   rosado bajito, Correos y Cobertura en blanco. */
.info-card {
	background: var(--static-pink-soft);
	padding: var(--space-6);
	text-align: center;
	display: flex;
	flex-direction: column;
	align-items: center;
	gap: var(--space-1);
}

.info-card:nth-child(even) {
	background: var(--color-surface);
}

.info-card__icon {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	color: var(--color-primary);
	margin-bottom: var(--space-3);
}

.info-card__title {
	font-weight: 600;
	text-transform: uppercase;
	font-size: var(--text-sm);
	letter-spacing: 0.02em;
	color: var(--color-text);
	margin: 0 0 var(--space-1);
}

.info-card__text {
	font-size: var(--text-sm);
	color: var(--color-text-muted);
	margin: 0;
}

/* Contacto — FAQ + formulario, dos columnas */
.contact-panel {
	padding: var(--space-8);
}

.contact-panel--faq {
	background: var(--static-pink-soft);
	box-shadow: none;
}

.contact-panel__title {
	text-align: left;
	margin-top: var(--space-2);
	margin-bottom: var(--space-5);
}

.faq-list {
	margin: 0;
}

.faq-item {
	padding-block: var(--space-4);
	border-bottom: 1px solid rgba(203, 37, 90, 0.16);
}

.faq-item:first-child {
	padding-top: 0;
}

.faq-item:last-child {
	border-bottom: none;
	padding-bottom: 0;
}

.faq-item__q {
	font-weight: 600;
	color: var(--color-text);
	margin-bottom: var(--space-1);
}

.faq-item__a {
	color: var(--color-text-muted);
	margin: 0;
}

.contact-panel--form .text-muted {
	margin-top: 0;
	margin-bottom: var(--space-5);
}

.contact-form {
	display: flex;
	flex-direction: column;
	gap: var(--space-4);
}

.contact-form__row {
	display: grid;
	grid-template-columns: 1fr 1fr;
	gap: var(--space-4);
}

.contact-form textarea.input {
	resize: vertical;
	min-height: 120px;
}

.contact-form .btn {
	align-self: flex-start;
}

.form-notice {
	padding: var(--space-3) var(--space-4);
	border-radius: var(--radius-md);
	font-size: var(--text-sm);
	font-weight: 600;
}

.form-notice--success {
	background: rgba(47, 125, 90, 0.12);
	color: var(--color-success);
}

.form-notice--error {
	background: rgba(179, 58, 70, 0.12);
	color: var(--color-error);
}

@media (max-width: 768px) {
	.contact-panels {
		grid-template-columns: 1fr;
	}

	.contact-form__row {
		grid-template-columns: 1fr;
	}
}

/* Contacto — línea de redes sociales */
.contact-social {
	text-align: center;
	margin-bottom: var(--space-8);
}

.contact-social__label {
	color: var(--color-text-muted);
	font-size: var(--text-sm);
	font-weight: 600;
	text-transform: uppercase;
	letter-spacing: 0.04em;
	margin: 0 0 var(--space-4);
}

.contact-social__icons {
	display: flex;
	justify-content: center;
	gap: var(--space-3);
}

/*
 * Colores invertidos respecto al `.btn-icon` global (se usa en más
 * lugares del sitio, no se toca ahí): acá por defecto fondo rosado +
 * ícono blanco, y al pasar el cursor/foco se invierte a fondo blanco +
 * ícono rosado — pedido explícito, al revés del comportamiento
 * original de `.btn-icon`.
 */
.contact-social__icons .btn-icon {
	border: 1.5px solid var(--color-primary);
	background: var(--color-primary);
	color: var(--color-surface);
}

.contact-social__icons .btn-icon:hover,
.contact-social__icons .btn-icon:focus-visible {
	background: var(--color-surface);
	color: var(--color-primary);
}