/*
Theme Name: Gestalem
Theme URI: https://gestalem.com
Description: Tema hijo de Twenty Twenty-Five para Gestalem Asesores. Contiene el header y el footer de la marca. Creado por SanCreate.
Author: SanCreate
Template: twentytwentyfive
Version: 1.8.0
Text Domain: gestalem
*/

/* ===========================================================================
   AJUSTES DE ARMAZÓN (v1.1.0 — 2026-09-07)
   Los bloques de Gestalem traen su propio fondo y su propio espaciado. El tema
   de bloques mete separación entre header, main y footer, y por esos huecos
   asomaba el fondo blanco del body: se veía una franja entre el header y el
   hero, y otra entre el último bloque y el footer.
   =========================================================================== */

/* 1. Fuera la separación automática entre las partes de la página.
   .wp-site-blocks aplica margin-block-start entre hijos por defecto. */
.wp-site-blocks > * {
	margin-block-start: 0 !important;
	margin-block-end: 0 !important;
}
.wp-site-blocks {
	padding: 0 !important;
}

/* 2. El body en verde de marca, no blanco. Si en algún punto queda un hueco
   de un píxel por redondeo, que asome el verde y no un destello blanco. */
body {
	background-color: #202d26;
	margin: 0;
}

/* 3. EL HEADER SE SUPERPONE AL HERO.
   Está diseñado como caja blanca flotante sobre el verde (ver DESIGN.md).
   Sin esto se apila encima y deja una banda blanca entre medias.
   Se sube el alto de la CAJA BLANCA (medido: 100px escritorio, 83 a 900px,
   78 en movil), no el header entero: la barra fina superior debe quedarse
   arriba, y el hero ya trae su propio padding-top para que el H1 respire. */
.gtm-NO-USADO {
	position: relative;
	z-index: 100;
}
.wp-site-blocks > main {
	margin-top: -100px !important;
}
/* El hero de cada bloque ya reserva sitio con su padding-top alto
   (calc(pad-y + 5.5rem)), así que el titular no queda debajo de la caja. */

/* En móvil el header es más bajo: la barra fina se oculta y la caja se
   compacta. Con -118px el hero subiría demasiado y el logo pisaría el H1. */
@media (max-width: 900px) {
	.wp-site-blocks > main {
		margin-top: -83px !important;
	}
}
@media (max-width: 560px) {
	.wp-site-blocks > main {
		margin-top: -78px !important;
	}
}

/* 4. Sin margen entre el último bloque y el footer. */
.wp-site-blocks > footer.wp-block-template-part {
	margin-top: 0 !important;
}

/* ===========================================================================
   v1.2.0 — EL HERO ARRANCA JUSTO BAJO LA BARRA FINA (petición de Jesús)
   ---------------------------------------------------------------------------
   Antes quedaba una banda de verde liso entre la barra fina superior y el
   contenido del hero. No era un hueco del margen: era el padding-top del
   propio hero (calc(pad-y + 5.5rem) ≈ 208px), que se puso para reservar sitio
   al header superpuesto.

   Ahora se sube el main el header ENTERO (140/123/117px medidos) y se recorta
   el padding del hero a la altura de la caja blanca más un respiro. Así el
   verde del hero empieza justo donde acaba la barra fina, y el H1 sigue
   quedando por debajo de la caja.
   =========================================================================== */
.wp-site-blocks > main {
	margin-top: -140px !important;
}
/* El primer hero de cada página: padding recortado.
   100px de caja blanca + 3.5rem de aire = el titular no queda pegado. */
.wp-site-blocks > main .gtm-hero,
.wp-site-blocks > main .gtm-sv-hero,
.wp-site-blocks > main .gtm-md-hero,
.wp-site-blocks > main .gtm-fs-hero,
.wp-site-blocks > main .gtm-lb-hero,
.wp-site-blocks > main .gtm-lp-hero,
.wp-site-blocks > main .gtm-mt-hero,
.wp-site-blocks > main .gtm-sn-hero,
.wp-site-blocks > main .gtm-ct-hero {
	padding-top: calc(100px + 3.5rem) !important;
}

@media (max-width: 900px) {
	.wp-site-blocks > main { margin-top: -123px !important; }
	.wp-site-blocks > main .gtm-hero,
	.wp-site-blocks > main .gtm-sv-hero,
	.wp-site-blocks > main .gtm-md-hero,
	.wp-site-blocks > main .gtm-fs-hero,
	.wp-site-blocks > main .gtm-lb-hero,
	.wp-site-blocks > main .gtm-lp-hero,
	.wp-site-blocks > main .gtm-mt-hero,
	.wp-site-blocks > main .gtm-sn-hero,
	.wp-site-blocks > main .gtm-ct-hero {
		padding-top: calc(83px + 2.5rem) !important;
	}
}
@media (max-width: 560px) {
	.wp-site-blocks > main { margin-top: -117px !important; }
	.wp-site-blocks > main .gtm-hero,
	.wp-site-blocks > main .gtm-sv-hero,
	.wp-site-blocks > main .gtm-md-hero,
	.wp-site-blocks > main .gtm-fs-hero,
	.wp-site-blocks > main .gtm-lb-hero,
	.wp-site-blocks > main .gtm-lp-hero,
	.wp-site-blocks > main .gtm-mt-hero,
	.wp-site-blocks > main .gtm-sn-hero,
	.wp-site-blocks > main .gtm-ct-hero {
		padding-top: calc(78px + 2rem) !important;
	}
}

/* ===========================================================================
   v1.3.0 — FOCO SOLO CON TECLADO (petición de Jesús, 2026-09-07)
   ---------------------------------------------------------------------------
   El tema padre pinta un outline sólido sobre :focus (sin -visible), así que
   salía una caja negra al PULSAR CON EL RATÓN: en el logo del header, en las
   preguntas de las FAQ, en los botones...

   ⚠️ NO se quita el foco: eso rompería la navegación por teclado, que es un
   requisito de accesibilidad (WCAG 2.4.7) y deja la web inutilizable para
   quien no usa ratón. Lo que se hace es:
     · :focus            → sin outline (es el que dispara el clic de ratón)
     · :focus-visible    → outline lima bien visible (teclado)
   El navegador decide cuándo es "visible", y solo lo marca en teclado.
   =========================================================================== */
.wp-site-blocks :focus:not(:focus-visible),
.wp-site-blocks a:focus:not(:focus-visible),
.wp-site-blocks button:focus:not(:focus-visible),
.wp-site-blocks summary:focus:not(:focus-visible),
.wp-site-blocks input:focus:not(:focus-visible),
.wp-site-blocks [tabindex]:focus:not(:focus-visible) {
	outline: none !important;
	box-shadow: none !important;
}

/* El foco de teclado SÍ se ve, y en el lima de marca. */
.wp-site-blocks a:focus-visible,
.wp-site-blocks button:focus-visible,
.wp-site-blocks summary:focus-visible,
.wp-site-blocks input:focus-visible,
.wp-site-blocks [tabindex]:focus-visible {
	outline: 3px solid #8ed858 !important;
	outline-offset: 3px !important;
	border-radius: 4px;
}

/* Sobre las secciones claras el lima tiene poco contraste: ahí, verde salvia. */
.wp-site-blocks .gtm-sec--claro a:focus-visible,
.wp-site-blocks .gtm-sec--claro button:focus-visible,
.wp-site-blocks .gtm-sv-sec--claro a:focus-visible,
.wp-site-blocks .gtm-sv-sec--claro button:focus-visible,
.wp-site-blocks .gtm-md-sec--claro a:focus-visible,
.wp-site-blocks .gtm-md-sec--claro button:focus-visible,
.wp-site-blocks .gtm-md-sec--claro summary:focus-visible,
.wp-site-blocks .gtm-fs-sec--claro a:focus-visible,
.wp-site-blocks .gtm-fs-sec--claro button:focus-visible,
.wp-site-blocks .gtm-fs-sec--claro summary:focus-visible,
.wp-site-blocks .gtm-lb-sec--claro a:focus-visible,
.wp-site-blocks .gtm-lb-sec--claro button:focus-visible,
.wp-site-blocks .gtm-lb-sec--claro summary:focus-visible,
.wp-site-blocks .gtm-mt-sec--claro a:focus-visible,
.wp-site-blocks .gtm-mt-sec--claro button:focus-visible,
.wp-site-blocks .gtm-mt-sec--claro summary:focus-visible {
	outline-color: #516046 !important;
}

/* ===========================================================================
   v1.4.0 — el .entry-content no debe aportar espacio (Jesús, 2026-09-07)
   ---------------------------------------------------------------------------
   En la HOME el contenido va envuelto en un div.entry-content que las demás
   páginas no tienen, y ese contenedor sumaba ~18px por encima del hero: se
   veía una franja entre la barra fina y el verde SOLO en la portada.
   Medido: hero en Y=184 en la home frente a Y=166 en /mediacion/.
   =========================================================================== */
.wp-site-blocks main > .entry-content,
.wp-site-blocks main .entry-content {
	margin-block: 0 !important;
	padding-block: 0 !important;
}
/* Y ningún hijo directo del main aporta margen propio. */
.wp-site-blocks main > *:first-child,
.wp-site-blocks main .entry-content > *:first-child {
	margin-top: 0 !important;
}

/* ===========================================================================
   v1.5.0 — FORMULARIO DE CONTACTO (sin plugin, ver formulario.php)
   Hereda la paleta y la tipografía del bloque de contacto.
   =========================================================================== */
.gtm-ct-form2 { --v:#202d26; --l:#8ed858; --s:#516046; --li:rgba(32,45,38,.12); }

.gtm-ct-f2__fila {
	display: grid;
	grid-template-columns: 1fr 1fr;
	gap: 1rem;
}
.gtm-ct-f2__campo { margin-bottom: 1rem; }
.gtm-ct-f2__campo label,
.gtm-ct-f2__rgpd label {
	display: block;
	font-size: .8125rem;
	font-weight: 600;
	color: #202d26;
	margin-bottom: .4rem;
}
.gtm-ct-f2__campo input,
.gtm-ct-f2__campo select,
.gtm-ct-f2__campo textarea {
	width: 100%;
	/* ⚠️ 16px: por debajo de eso, iOS hace zoom al enfocar el campo. */
	font-size: 1rem;
	font-family: inherit;
	color: #202d26;
	background: #fff;
	border: 1px solid rgba(32,45,38,.2);
	border-radius: 9px;
	padding: .8rem .9rem;
	transition: border-color .2s ease, box-shadow .2s ease;
}
.gtm-ct-f2__campo textarea { resize: vertical; min-height: 130px; }
.gtm-ct-f2__campo select {
	appearance: none;
	background-image: url("data:image/svg+xml,%3Csvg xmlns=http://www.w3.org/2000/svg viewBox=0 0 24 24 fill=none stroke=%23516046 stroke-width=2%3E%3Cpath d=M5 9l7 7 7-7/%3E%3C/svg%3E");
	background-repeat: no-repeat;
	background-position: right .9rem center;
	background-size: 15px;
	padding-right: 2.4rem;
}
/* Foco con halo lima: quitar el outline sin sustituto es una barrera de
   accesibilidad. */
.gtm-ct-f2__campo input:focus,
.gtm-ct-f2__campo select:focus,
.gtm-ct-f2__campo textarea:focus {
	outline: none;
	border-color: #8ed858;
	box-shadow: 0 0 0 3px rgba(142,216,88,.28);
}

/* El checkbox del RGPD */
.gtm-ct-f2__rgpd {
	display: flex;
	align-items: flex-start;
	gap: .6rem;
	margin: .5rem 0 1.25rem;
}
.gtm-ct-f2__rgpd input {
	flex: none;
	width: 18px; height: 18px;
	margin-top: .15rem;
	accent-color: #8ed858;
}
.gtm-ct-f2__rgpd label {
	margin: 0;
	font-size: .875rem;
	font-weight: 400;
	line-height: 1.5;
	color: #516046;
}
.gtm-ct-f2__rgpd a { color: #202d26; font-weight: 600; }

/* Botón de envío */
.gtm-ct-f2__bt {
	display: inline-flex;
	align-items: center;
	gap: .5rem;
	min-height: 48px;
	padding: .95rem 1.75rem;
	border: 0;
	border-radius: 999px;
	background: #8ed858;
	color: #202d26;
	font-family: inherit;
	font-size: .9375rem;
	font-weight: 600;
	letter-spacing: .03em;
	cursor: pointer;
	transition: background .2s ease, transform .2s ease;
}
.gtm-ct-f2__bt:hover { background: #9fe06d; transform: translateY(-1px); }
.gtm-ct-f2__bt:focus-visible { outline: 3px solid #516046; outline-offset: 3px; }

.gtm-ct-f2__nota {
	margin-top: 1rem;
	font-size: .8125rem;
	line-height: 1.5;
	color: #516046;
}

/* ⚠️ HONEYPOT: oculto para personas, presente para los bots.
   No lleva display:none porque algunos bots lo detectan y lo saltan. */
.gtm-ct-hp {
	position: absolute !important;
	left: -9999px !important;
	width: 1px; height: 1px;
	overflow: hidden;
}

/* Avisos de resultado */
.gtm-ct-aviso {
	padding: 1rem 1.15rem;
	border-radius: 10px;
	margin-bottom: 1.5rem;
	font-size: .9375rem;
	line-height: 1.6;
}
.gtm-ct-aviso--ok {
	background: rgba(142,216,88,.16);
	border: 1px solid #8ed858;
	color: #24401a;
}
/* ⚠️ El error NO se comunica solo con color (WCAG 1.4.1): lleva también
   el texto en negrita explicando qué revisar. */
.gtm-ct-aviso--err {
	background: rgba(190,60,40,.08);
	border: 1px solid rgba(190,60,40,.45);
	color: #7d2b1c;
}
.gtm-ct-aviso a { color: inherit; font-weight: 600; }

/* Móvil: una sola columna. Dos campos a media anchura no caben. */
@media (max-width: 620px) {
	.gtm-ct-f2__fila { grid-template-columns: 1fr; gap: 0; }
	.gtm-ct-f2__bt { width: 100%; justify-content: center; }
}

/* ===========================================================================
   v1.6.0 — LA CAJA BLANCA SE QUEDA FIJA AL HACER SCROLL (Jesús, 2026-09-07)
   ---------------------------------------------------------------------------
   El .gtm-hd ya es position:sticky, pero no funcionaba por dos motivos:
     1. Su contenedor (el <header> de la plantilla) tenía position:relative,
        y un sticky solo se pega dentro de su ancestro con scroll: al estar
        el header envuelto, se quedaba anclado a un contenedor de 140px de
        alto y desaparecía con él.
     2. El <main> lleva margen negativo para superponerse al hero, y al
        pintarse después tapaba el header.
   Solución: el sticky se aplica al CONTENEDOR de la plantilla (que sí es hijo
   directo de .wp-site-blocks) y se le da un z-index superior al del main.
   =========================================================================== */
.gtm-NO-USADO {
	position: sticky !important;
	top: 0;
	z-index: 500 !important;
}
/* El main queda por debajo, para que la caja blanca pase por encima del
   contenido al hacer scroll en vez de esconderse tras él. */
.wp-site-blocks > main {
	position: relative;
	z-index: 1;
}
/* Dentro del header ya no hace falta que .gtm-hd sea sticky por su cuenta:
   lo es su contenedor. Se deja en relative para que su z-index interno
   (barra fina sobre caja) siga funcionando. */
.wp-site-blocks > header.wp-block-template-part .gtm-hd {
	position: relative;
}

/* ===========================================================================
   v1.7.0 — el envoltorio del header no debe limitar el sticky
   ---------------------------------------------------------------------------
   El bloque va dentro de <header class="wp-block-template-part">. Un elemento
   position:sticky solo se pega DENTRO de su contenedor: como ese header mide
   lo mismo que su contenido, la caja se desanclaba nada más salir de él.
   display:contents elimina esa caja del render sin tocar el HTML: los hijos
   pasan a comportarse como hijos directos de .wp-site-blocks y el sticky de
   .gtm-hd-root ya tiene toda la página como contenedor.
   =========================================================================== */
.gtm-NO-USADO {
	display: contents !important;
}

/* ===========================================================================
   v1.8.0 — HEADER FIJO con position:fixed (Jesús, 2026-09-07)
   ---------------------------------------------------------------------------
   Se intentó con position:sticky y NO funcionó: el bloque va envuelto en
   <header class="wp-block-template-part"> y un sticky no puede salir de su
   contenedor. Se probó display:contents en el envoltorio y tampoco bastó.

   position:fixed sí funciona porque se ancla a la ventana, no al contenedor.
   A cambio, el header sale del flujo y hay que compensar su altura con un
   padding-top en el main (140/123/117px, medidos).
   =========================================================================== */
.wp-site-blocks > header.wp-block-template-part {
	display: block !important;
	position: fixed !important;
	top: 0; left: 0; right: 0;
	z-index: 500 !important;
}
/* El header ya no ocupa sitio: el main sube hasta arriba y el hero recupera
   el padding que reserva el espacio de la caja blanca. */
.wp-site-blocks > main {
	margin-top: 0 !important;
	position: relative;
	z-index: 1;
}
.wp-site-blocks > main .gtm-hero,
.wp-site-blocks > main .gtm-sv-hero,
.wp-site-blocks > main .gtm-md-hero,
.wp-site-blocks > main .gtm-fs-hero,
.wp-site-blocks > main .gtm-lb-hero,
.wp-site-blocks > main .gtm-lp-hero,
.wp-site-blocks > main .gtm-mt-hero,
.wp-site-blocks > main .gtm-sn-hero,
.wp-site-blocks > main .gtm-ct-hero,
.wp-site-blocks > main .gtm-lg-hero {
	padding-top: calc(140px + 3.5rem) !important;
}
@media (max-width: 900px) {
	.wp-site-blocks > main .gtm-hero,
	.wp-site-blocks > main .gtm-sv-hero,
	.wp-site-blocks > main .gtm-md-hero,
	.wp-site-blocks > main .gtm-fs-hero,
	.wp-site-blocks > main .gtm-lb-hero,
	.wp-site-blocks > main .gtm-lp-hero,
	.wp-site-blocks > main .gtm-mt-hero,
	.wp-site-blocks > main .gtm-sn-hero,
	.wp-site-blocks > main .gtm-ct-hero,
	.wp-site-blocks > main .gtm-lg-hero { padding-top: calc(123px + 2.5rem) !important; }
}
@media (max-width: 560px) {
	.wp-site-blocks > main .gtm-hero,
	.wp-site-blocks > main .gtm-sv-hero,
	.wp-site-blocks > main .gtm-md-hero,
	.wp-site-blocks > main .gtm-fs-hero,
	.wp-site-blocks > main .gtm-lb-hero,
	.wp-site-blocks > main .gtm-lp-hero,
	.wp-site-blocks > main .gtm-mt-hero,
	.wp-site-blocks > main .gtm-sn-hero,
	.wp-site-blocks > main .gtm-ct-hero,
	.wp-site-blocks > main .gtm-lg-hero { padding-top: calc(117px + 2rem) !important; }
}