/*
Theme Name:   Ecos de Esperanza
Template:     twentytwentyfive
Version:      0.3.0
Requires at least: 6.7
Requires PHP: 8.1
Text Domain:  ecos
Author:       Estudio Web (beta)
Description:  Tema hijo para la Fundación Ecos de Esperanza. Colores, tipografías y espaciados en theme.json; cada sección es un patrón de bloques.
License:      GPL-2.0-or-later
*/

/*
 * Estilos propios. Los colores y tipos salen siempre de theme.json
 * (variables --wp--preset--*); aquí solo lo que theme.json no puede expresar.
 *
 * 0.1.1 — prueba de despliegue de F1 (cambio sin efecto visual).
 * 0.1.2 — despliegue por FTPS y purga automática de LiteSpeed Cache al cambiar de versión.
 * 0.2.0 — primera versión: identidad, cabecera, pie y secciones de la portada.
 * 0.2.1 — ajustes tras revisión a 390/1280 px: entradillas alineadas, tarjetas en fondos oscuros, cabecera con barra de admin en móvil.
 * 0.2.2 — rejillas sin huecos vacíos en escritorio (auto-fit).
 * 0.3.0 — contacto real (WhatsApp y correo), sin marcadores pendientes e ilustraciones propias.
 */

:root {
	--ecos-radio: 1.125rem;
	--ecos-sombra: 0 1px 2px rgb(30 42 46 / 0.06), 0 8px 24px rgb(30 42 46 / 0.07);
	--ecos-borde: color-mix(in srgb, var(--wp--preset--color--contrast) 10%, transparent);
}

html { scroll-behavior: smooth; }
@media (prefers-reduced-motion: reduce) { html { scroll-behavior: auto; } }

/* Las anclas no quedan tapadas por la cabecera fija */
[id] { scroll-margin-top: 5.5rem; }

/* ---------- Cabecera fija ---------- */
.ecos-cabecera-fija {
	position: sticky;
	top: var(--wp-admin--admin-bar--height, 0px);
	z-index: 50;
}
/* En móvil la barra de administración no es fija: la cabecera se pega arriba del todo */
@media (max-width: 600px) { .ecos-cabecera-fija { top: 0; } }
.ecos-cabecera {
	border-bottom: 1px solid var(--ecos-borde);
	backdrop-filter: saturate(1.2);
}

/* Marca: ondas del eco antes del nombre */
.ecos-marca a,
.ecos-marca {
	display: inline-flex;
	align-items: center;
	gap: 0.6rem;
}
.ecos-marca::before {
	content: "";
	flex: none;
	width: 1.75rem;
	height: 1.75rem;
	border-radius: 50%;
	background: radial-gradient(circle,
		var(--wp--preset--color--accent) 0 0.22rem,
		transparent 0.23rem 0.38rem,
		var(--wp--preset--color--primary) 0.39rem 0.47rem,
		transparent 0.48rem 0.62rem,
		color-mix(in srgb, var(--wp--preset--color--primary) 60%, transparent) 0.63rem 0.7rem,
		transparent 0.71rem 0.8rem,
		color-mix(in srgb, var(--wp--preset--color--primary) 30%, transparent) 0.81rem 0.875rem,
		transparent 0.876rem);
}
.ecos-marca--clara a { color: var(--wp--preset--color--base) !important; }
.ecos-marca--clara::before {
	background: radial-gradient(circle,
		var(--wp--preset--color--accent) 0 0.22rem,
		transparent 0.23rem 0.38rem,
		var(--wp--preset--color--base) 0.39rem 0.47rem,
		transparent 0.48rem 0.62rem,
		color-mix(in srgb, var(--wp--preset--color--base) 60%, transparent) 0.63rem 0.7rem,
		transparent 0.71rem);
}
@media (max-width: 380px) {
	.ecos-cabecera .ecos-marca { font-size: 1rem !important; }
}

/* Menú: el último enlace es un botón */
.ecos-menu .ecos-menu-boton > a {
	background: var(--wp--preset--color--accent);
	color: var(--wp--preset--color--contrast) !important;
	border-radius: 999px;
	padding: 0.55em 1.1em !important;
	font-weight: 700;
}
.ecos-menu .ecos-menu-boton > a:hover { background: color-mix(in srgb, var(--wp--preset--color--accent) 82%, white); }
.ecos-menu .wp-block-navigation-item__content:not(.ecos-menu-boton a):hover { color: var(--wp--preset--color--primary); }
.ecos-menu .wp-block-navigation__responsive-container.is-menu-open {
	background: var(--wp--preset--color--base) !important;
	padding: var(--wp--preset--spacing--50) var(--wp--preset--spacing--40);
}
.ecos-menu .is-menu-open .wp-block-navigation-item { font-size: 1.25rem; }

/* ---------- Botones ---------- */
.wp-element-button:hover,
.wp-block-button__link:hover { background-color: color-mix(in srgb, var(--wp--preset--color--accent) 82%, white); }
.wp-block-button.is-style-outline > .wp-block-button__link {
	background: transparent;
	color: currentColor;
	border: 2px solid currentColor;
	padding: calc(0.85em - 2px) calc(1.6em - 2px);
}
.wp-block-button.is-style-outline > .wp-block-button__link:hover {
	background: color-mix(in srgb, currentColor 10%, transparent);
}
:where(.wp-element-button, .wp-block-button__link, a):focus-visible {
	outline: 3px solid var(--wp--preset--color--accent);
	outline-offset: 3px;
}

/* ---------- Secciones ---------- */
.ecos-secciones > .alignfull { margin-block-start: 0; margin-block-end: 0; }
.ecos-seccion { position: relative; overflow: hidden; }

.ecos-antetitulo {
	text-transform: uppercase;
	letter-spacing: 0.12em;
	font-weight: 800;
	font-size: 0.8125rem !important;
	color: var(--wp--preset--color--accent-dark);
	margin-bottom: 0.25rem !important;
}
.has-primary-dark-background-color .ecos-antetitulo,
.has-primary-background-color .ecos-antetitulo,
.has-contrast-background-color .ecos-antetitulo { color: var(--wp--preset--color--accent); }
.has-accent-background-color .ecos-antetitulo { color: var(--wp--preset--color--contrast); }

.ecos-entradilla { max-width: 40rem; }
/* Alineada con el titular (columna de 1200 px), no centrada */
.is-layout-constrained > .ecos-entradilla:not(.has-text-align-center) {
	max-width: 40rem;
	margin-left: max(0px, calc((100% - 1200px) / 2)) !important;
}
.has-text-align-center.ecos-entradilla { margin-inline: auto; }

/* Portada: ondas del eco que se expanden desde un punto */
.ecos-portada {
	background-image:
		repeating-radial-gradient(circle at 82% 38%,
			transparent 0 46px,
			color-mix(in srgb, var(--wp--preset--color--secondary) 22%, transparent) 46px 48px);
	background-attachment: scroll;
}
.ecos-portada::after {
	content: "";
	position: absolute;
	inset: 0;
	pointer-events: none;
	background: radial-gradient(circle at 82% 38%,
		color-mix(in srgb, var(--wp--preset--color--accent) 35%, transparent) 0 18px,
		transparent 19px);
}
.ecos-portada > * { position: relative; z-index: 1; }
.ecos-portada::before {
	content: "";
	position: absolute;
	inset: 0;
	pointer-events: none;
	background: linear-gradient(90deg, var(--wp--preset--color--primary-dark) 30%, transparent 85%);
}
@media (max-width: 781px) {
	.ecos-portada {
		background-image:
			repeating-radial-gradient(circle at 92% 8%,
				transparent 0 36px,
				color-mix(in srgb, var(--wp--preset--color--secondary) 20%, transparent) 36px 38px);
	}
	.ecos-portada::after { background: radial-gradient(circle at 92% 8%, color-mix(in srgb, var(--wp--preset--color--accent) 35%, transparent) 0 12px, transparent 13px); }
	.ecos-portada::before { background: linear-gradient(180deg, transparent 0, var(--wp--preset--color--primary-dark) 45%); }
}

/* Ilustraciones del tema (SVG propios; el cliente puede sustituirlas por fotos con «Reemplazar») */
.ecos-ilustracion { margin-block: var(--wp--preset--spacing--40) 0 !important; }
.ecos-ilustracion img { display: block; width: 100%; height: auto; border-radius: 1.75rem; }
.ecos-portada .ecos-ilustracion { margin-top: 0 !important; }
.ecos-portada .ecos-ilustracion img { box-shadow: 0 24px 60px rgb(0 0 0 / 0.28); }
@media (max-width: 781px) {
	.ecos-portada-columnas { gap: var(--wp--preset--spacing--50) !important; }
	.ecos-portada .ecos-ilustracion { max-width: 22rem; }
}

/* Cita destacada */
.ecos-cita {
	border-left: 4px solid var(--wp--preset--color--accent);
	padding-left: 1.25rem;
	font-family: var(--wp--preset--font-family--titulos);
	font-style: italic;
}

/* Rejillas: las columnas sobrantes se reparten entre las tarjetas (sin huecos a la derecha) */
.ecos-seccion .is-layout-grid { grid-template-columns: repeat(auto-fit, minmax(min(13rem, 100%), 1fr)) !important; }
#apadrina .is-layout-grid { grid-template-columns: repeat(auto-fit, minmax(min(9.5rem, 100%), 1fr)) !important; }

/* ---------- Tarjetas ---------- */
.ecos-tarjeta {
	background: var(--wp--preset--color--white);
	border: 1px solid var(--ecos-borde);
	border-radius: var(--ecos-radio);
	box-shadow: var(--ecos-sombra);
	padding: clamp(1.25rem, 3vw, 1.75rem) !important;
	height: 100%;
}
.ecos-tarjeta:not(.ecos-tarjeta--destacada) { color: var(--wp--preset--color--contrast); }
/* Tarjetas sobre fondos oscuros: translúcidas, heredan el texto claro */
:is(.has-primary-dark-background-color, .has-primary-background-color) .ecos-tarjeta {
	background: color-mix(in srgb, var(--wp--preset--color--base) 8%, transparent);
	border-color: color-mix(in srgb, var(--wp--preset--color--base) 18%, transparent);
	box-shadow: none;
	color: inherit;
}
:is(.has-primary-dark-background-color, .has-primary-background-color) .ecos-icono::after { background: color-mix(in srgb, var(--wp--preset--color--base) 14%, transparent); }
:is(.has-primary-dark-background-color, .has-primary-background-color) .ecos-icono::before { background: var(--wp--preset--color--accent); }
.ecos-tarjeta > * + * { margin-block-start: 0.6rem !important; }
.ecos-tarjeta h3 { margin-top: 0; }
.ecos-tarjeta--destacada {
	background: var(--wp--preset--color--primary);
	color: var(--wp--preset--color--base);
	border-color: transparent;
}
.ecos-tarjeta--destacada .ecos-precio { color: var(--wp--preset--color--accent); }

.ecos-precio {
	font-family: var(--wp--preset--font-family--titulos);
	font-weight: 700;
	font-size: clamp(1.75rem, 1.4rem + 1.2vw, 2.25rem) !important;
	line-height: 1.1;
	color: var(--wp--preset--color--primary);
}
.ecos-precio small, .ecos-precio .ecos-unidad { font-size: 0.5em; font-weight: 600; }
.ecos-detalle { font-size: var(--wp--preset--font-size--small); opacity: 0.85; }

/* Iconos (SVG en máscara: toman el color del tema).
   El cuadrado de fondo va en ::after y el dibujo en ::before. */
.ecos-icono { position: relative; isolation: isolate; padding-top: 3.65rem; }
.ecos-icono::after {
	content: "";
	position: absolute;
	top: 0; left: 0;
	width: 2.75rem; height: 2.75rem;
	border-radius: 0.85rem;
	background: var(--wp--preset--color--secondary-light);
	z-index: -1;
}
.ecos-icono::before {
	content: "";
	position: absolute;
	top: 0; left: 0;
	width: 2.75rem; height: 2.75rem;
	background: var(--wp--preset--color--primary);
	-webkit-mask: var(--ecos-svg) center / 1.55rem no-repeat;
	mask: var(--ecos-svg) center / 1.55rem no-repeat;
}
.ecos-tarjeta--destacada .ecos-icono::after { background: color-mix(in srgb, var(--wp--preset--color--base) 14%, transparent); }
.ecos-tarjeta--destacada .ecos-icono::before { background: var(--wp--preset--color--accent); }
.ecos-icono--casa     { --ecos-svg: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='1.8' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M3 10.5 12 3l9 7.5'/%3E%3Cpath d='M5 9.5V21h14V9.5'/%3E%3Cpath d='M10 21v-6h4v6'/%3E%3C/svg%3E"); }
.ecos-icono--escucha  { --ecos-svg: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='1.8' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M21 12a8 8 0 0 1-11.8 7L4 20.5l1.5-4.6A8 8 0 1 1 21 12Z'/%3E%3Cpath d='M9 11h.01M12 11h.01M15 11h.01'/%3E%3C/svg%3E"); }
.ecos-icono--grupo    { --ecos-svg: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='1.8' stroke-linecap='round' stroke-linejoin='round'%3E%3Ccircle cx='12' cy='7' r='3'/%3E%3Ccircle cx='5' cy='10' r='2.2'/%3E%3Ccircle cx='19' cy='10' r='2.2'/%3E%3Cpath d='M7 20v-1a5 5 0 0 1 10 0v1'/%3E%3Cpath d='M1.5 19v-.5A3.5 3.5 0 0 1 5 15M22.5 19v-.5A3.5 3.5 0 0 0 19 15'/%3E%3C/svg%3E"); }
.ecos-icono--familia  { --ecos-svg: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='1.8' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M12 20.5s-7.5-4.4-7.5-10A4.3 4.3 0 0 1 12 7.8a4.3 4.3 0 0 1 7.5 2.7c0 5.6-7.5 10-7.5 10Z'/%3E%3C/svg%3E"); }
.ecos-icono--brote    { --ecos-svg: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='1.8' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M12 21v-9'/%3E%3Cpath d='M12 12C12 7 8.5 4.5 4 4.5 4 9 7 12 12 12Z'/%3E%3Cpath d='M12 14c0-4 3-6.5 8-6.5 0 4-3 6.5-8 6.5Z'/%3E%3Cpath d='M7 21h10'/%3E%3C/svg%3E"); }
.ecos-icono--escudo   { --ecos-svg: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='1.8' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M12 3 4.5 6v5.5c0 4.6 3.2 8.2 7.5 9.5 4.3-1.3 7.5-4.9 7.5-9.5V6L12 3Z'/%3E%3Cpath d='m8.8 12 2.2 2.2 4.2-4.4'/%3E%3C/svg%3E"); }
.ecos-icono--documento{ --ecos-svg: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='1.8' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M14 3H6.5A1.5 1.5 0 0 0 5 4.5v15A1.5 1.5 0 0 0 6.5 21h11a1.5 1.5 0 0 0 1.5-1.5V8l-5-5Z'/%3E%3Cpath d='M14 3v5h5M8.5 13h7M8.5 17h5'/%3E%3C/svg%3E"); }
.ecos-icono--persona  { --ecos-svg: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='1.8' stroke-linecap='round' stroke-linejoin='round'%3E%3Ccircle cx='12' cy='8' r='4'/%3E%3Cpath d='M4.5 21a7.5 7.5 0 0 1 15 0'/%3E%3C/svg%3E"); }

/* ---------- Listas ---------- */
.ecos-lista-check { list-style: none; padding-left: 0; }
.ecos-lista-check li {
	position: relative;
	padding-left: 1.9rem;
	margin-block: 0.55rem;
}
.ecos-lista-check li::before {
	content: "";
	position: absolute;
	left: 0; top: 0.3em;
	width: 1.15rem; height: 1.15rem;
	border-radius: 50%;
	background: var(--wp--preset--color--secondary);
	-webkit-mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Ccircle cx='12' cy='12' r='12'/%3E%3C/svg%3E") center / contain no-repeat;
}
.ecos-lista-check li::after {
	content: "";
	position: absolute;
	left: 0.36rem; top: calc(0.3em + 0.24rem);
	width: 0.42rem; height: 0.62rem;
	border: solid var(--wp--preset--color--primary-dark);
	border-width: 0 2px 2px 0;
	transform: rotate(40deg);
}
.has-primary-background-color .ecos-lista-check li::before,
.has-primary-dark-background-color .ecos-lista-check li::before { background: var(--wp--preset--color--accent); }

.ecos-pasos { list-style: none; padding-left: 0; counter-reset: paso; }
.ecos-pasos li {
	counter-increment: paso;
	position: relative;
	padding-left: 3.1rem;
	margin-block: 1rem;
	min-height: 2.2rem;
}
.ecos-pasos li::before {
	content: counter(paso);
	position: absolute;
	left: 0; top: -0.1rem;
	width: 2.2rem; height: 2.2rem;
	border-radius: 50%;
	display: grid; place-items: center;
	font-family: var(--wp--preset--font-family--titulos);
	font-weight: 700;
	background: var(--wp--preset--color--accent);
	color: var(--wp--preset--color--contrast);
}

/* ---------- Meta ---------- */
.ecos-cifra {
	font-family: var(--wp--preset--font-family--titulos);
	font-weight: 700;
	font-size: clamp(3rem, 2rem + 4vw, 5rem) !important;
	line-height: 1;
}

/* ---------- Marcadores de contenido pendiente (solo staging) ---------- */
.ecos-pendiente {
	display: inline-block;
	border: 2px dashed var(--wp--preset--color--accent-dark);
	background: color-mix(in srgb, var(--wp--preset--color--accent) 18%, var(--wp--preset--color--white));
	color: var(--wp--preset--color--contrast) !important;
	border-radius: 0.6rem;
	padding: 0.35rem 0.75rem !important;
	font-size: var(--wp--preset--font-size--small) !important;
	font-weight: 700;
}

/* ---------- Pie ---------- */
.ecos-pie a { text-decoration: none; }
.ecos-pie a:hover { text-decoration: underline; }
.ecos-pie .ecos-pie-linea {
	border-color: color-mix(in srgb, var(--wp--preset--color--base) 25%, transparent) !important;
	opacity: 1;
}
.ecos-pie p { opacity: 0.92; }