/*
Theme Name:   Araceli Becas
Theme URI:    https://aracelibecas.com
Description:  Tema hijo de Hello Elementor para Araceli Becas. Aporta las fuentes
              autoalojadas, el bloqueo de Google Fonts y las pocas piezas que
              Elementor no puede resolver desde su interfaz.
Author:       Pymenética LLC
Author URI:   https://pymenetica.com
Template:     hello-elementor
Version: 1.9.15
Text Domain:  araceli-becas
*/

/* ═══════════════════════════════════════════════════════════════════
   REGLA DE LA CASA

   Esta hoja NO es el sitio donde va el diseño. El color, la tipografía,
   el espaciado y la caja viven en el Kit Global y en los widgets, porque
   ahí la clienta puede tocarlos y aquí no.

   Solo se admite CSS que Elementor no pueda producir desde su interfaz.
   Hoy son doce cosas, y cada una dice por qué no cabe en el widget:

     · la marquesina de testimonios — Elementor no tiene bucle infinito
     · el carrusel de deslizar en móvil — su carrusel arrastra JavaScript
       para lo que el navegador ya hace nativo con scroll-snap
     · el estado translúcido de la cabecera fija — Elementor Pro añade
       la clase del estado, pero no deja darle fondo propio
     · el desplazamiento a las anclas — la cabecera es fija y tapa el
       destino; no hay ajuste de esto en la interfaz de Elementor
     · el temario por fases — número, chevron y meta dentro del título
       del acordeón; el widget solo admite texto plano ahí
     · las preguntas frecuentes — mismo motivo, más el estado abierto
     · la página actual en el menú — el ítem activo necesita su propio
       tratamiento sobre la cabecera translúcida
     · la sombra del botón de enviar — el widget `form` no expone control
       de sombra para su botón, solo para el formulario entero
     · la flecha de los desplegables — el widget `form` dibuja el chevron
       de su propio set (`e-eicon-caret-down`) y no deja cambiarlo
     · la sombra de la tarjeta del blog — la piel `archive_cards` solo
       expone el interruptor de sombra, no sus valores
     · el tamaño de los titulares dentro del artículo — el widget
       `theme-post-content` solo expone UNA tipografía, la del cuerpo

   ⚠️ Antes de añadir una duodécima, **comprobar con `get_controls()`** que
   Elementor no lo resuelve. La sombra del botón se escribió primero como
   `button_box_shadow_box_shadow_type`: Elementor la guardó, la ignoró y no
   dio ningún error. Ese es el fallo silencioso de la casa (27 ago 2026).

   Las @font-face viven en abecas-fuentes.css, aparte, para versionarlas
   por su cuenta.
   ═══════════════════════════════════════════════════════════════════ */


/* ───────────────────────────────────────────────────────────────────
   MARQUESINA DE TESTIMONIOS

   Dos filas que se desplazan en sentidos opuestos, en bucle continuo.
   Elementor no tiene animación de bucle infinito: su carrusel salta de
   diapositiva, no fluye. De ahí esta excepción.

   Cómo se monta en Elementor:
     contenedor con clase  ab-marquesina           (la ventana)
       └ contenedor con clase  ab-marquesina__pista  (la cinta)
           └ las tarjetas, DUPLICADAS: el juego va dos veces seguidas.

   El bucle es continuo porque la cinta se desplaza exactamente un 50 %,
   que es justo el primer juego de tarjetas. Al terminar, el segundo
   juego está donde estaba el primero y el salto no se ve.
   Si se cambia el número de tarjetas hay que mantener el duplicado.
   ─────────────────────────────────────────────────────────────────── */

.ab-marquesina {
	position: relative;
	overflow: hidden;
	width: 100%;
	/* Desvanecido en los bordes: sin esto las tarjetas se cortan en seco */
	-webkit-mask-image: linear-gradient(90deg, transparent, #000 5%, #000 95%, transparent);
	        mask-image: linear-gradient(90deg, transparent, #000 5%, #000 95%, transparent);
}

.ab-marquesina__pista {
	display: flex !important;
	flex-wrap: nowrap !important;
	width: max-content !important;
	animation: ab-marquesina-desliza 70s linear infinite;
	will-change: transform;
}

/* La segunda fila viaja al revés. Es lo que da la sensación de profundidad. */
.ab-marquesina--inversa .ab-marquesina__pista {
	animation-direction: reverse;
}

/* Al pasar el ratón se detiene: si no, no da tiempo a leer una tarjeta. */
.ab-marquesina:hover .ab-marquesina__pista,
.ab-marquesina:focus-within .ab-marquesina__pista {
	animation-play-state: paused;
}

@keyframes ab-marquesina-desliza {
	from { transform: translateX(0); }
	to   { transform: translateX(-50%); }
}

/* Las tarjetas no deben encogerse ni estirarse dentro de la cinta. */
.ab-marquesina__pista > .e-con {
	flex: 0 0 auto !important;
}

/* Movimiento reducido: se apaga la animación y la fila pasa a poder
   desplazarse a mano. Nadie se queda sin poder leer los testimonios. */
@media (prefers-reduced-motion: reduce) {
	.ab-marquesina {
		overflow-x: auto;
		-webkit-mask-image: none;
		        mask-image: none;
	}
	.ab-marquesina__pista {
		animation: none;
	}
}

/* ── En móvil la marquesina DEJA DE MOVERSE y se desliza con el dedo ──

   Por qué. Medido el 26 ago 2026 sobre el diseño anterior, que en móvil
   aceleraba la cinta a 45 s: la pista recorre 1.256 px en 45 s, o sea
   28 px/s. Una tarjeta de 290 px cabe entera en los 360 px útiles de un
   móvil de 375 durante SOLO 2,5 segundos. Un testimonio de seis líneas
   necesita unos quince. Y la pausa al pasar el ratón no existía ahí:
   en táctil no hay :hover ni foco de teclado, así que no había forma
   humana de detenerla.

   El patrón bueno ya estaba resuelto en esta misma hoja para los vídeos:
   scroll-snap nativo. Aquí se reutiliza. Arriba de 767 px no cambia nada,
   porque en escritorio se ven cuatro tarjetas a la vez y sí da tiempo.

   ⚠️ EL DUPLICADO. La cinta lleva el juego de tarjetas DOS VECES, que es
   lo que hace continuo el bucle en escritorio. Sin animación ese
   duplicado se vería: el dedo pasaría por los mismos testimonios otra
   vez. Por eso en móvil se oculta la segunda mitad.
   Hoy son 8 tarjetas por pista (4 únicas × 2), de ahí el n+5.
   **Si cambia el número de tarjetas hay que cambiar este número:**
   es (únicas + 1). */
@media (max-width: 767px) {

	/* Las DOS filas se funden en UNA sola, y la mueve el dedo.

	   `display: contents` hace que la ventana y la cinta de cada marquesina
	   dejen de generar caja: sus tarjetas suben a ser hijas directas de
	   .ab-marquesinas, que es quien hace de carrusel. Así los ocho
	   testimonios —cuatro de cada fila— quedan en una sola tira y no se
	   pierde ninguno, que es lo que pasaría si ocultáramos la segunda. */
	.ab-marquesinas {
		display: flex !important;
		flex-direction: row !important;
		flex-wrap: nowrap !important;
		align-items: stretch;
		gap: 16px;
		overflow-x: auto;
		scroll-snap-type: x mandatory;
		-webkit-overflow-scrolling: touch;
		scrollbar-width: none;
		/* Sangra hasta el borde y devuelve el aire por dentro, igual que el
		   carrusel de vídeos: así la siguiente asoma y se entiende que hay más. */
		margin-inline: -16px;
		padding-inline: 16px;
		scroll-padding-inline: 16px;
	}

	.ab-marquesinas::-webkit-scrollbar {
		display: none;
	}

	.ab-marquesinas .ab-marquesina,
	.ab-marquesinas .ab-marquesina__pista {
		display: contents !important;
	}

	/* Con display:contents la cinta ya no pinta caja, así que el transform
	   no se ve — pero seguía corriendo y gastando batería. Se apaga. */
	.ab-marquesinas .ab-marquesina__pista {
		animation: none !important;
	}

	/* Cada cinta lleva su juego de tarjetas DOS VECES, que es lo que hace
	   continuo el bucle en escritorio. Sin animación ese duplicado se
	   recorrería con el dedo: los mismos testimonios otra vez. Se ocultan.
	   Hoy son 8 por cinta (4 únicas × 2), de ahí el n+5.
	   **Si cambia el número de tarjetas hay que cambiar este número:**
	   es (únicas + 1). */
	.ab-marquesinas .ab-marquesina__pista > .e-con:nth-child(n + 5) {
		display: none !important;
	}

	.ab-marquesinas .ab-marquesina__pista > .e-con {
		flex: 0 0 86% !important;
		scroll-snap-align: center;
	}
}


/* ───────────────────────────────────────────────────────────────────
   CARRUSEL DE DESLIZAR — solo móvil

   Los testimonios en vídeo apilados ocupan cuatro pantallas. En móvil
   pasan a una fila que se desliza con el dedo y encaja tarjeta a tarjeta.

   No lleva reproducción automática a propósito: aquí la persona está
   ELIGIENDO qué vídeo ver, y una cinta que se mueve sola estorba. Esa es
   la diferencia con la marquesina de testimonios escritos, que sí avanza
   porque ahí no hay que elegir nada.

   Se monta poniendo la clase ab-carrusel-movil al contenedor de la fila.
   Por encima de 767 px no hace nada: la rejilla manda.
   ─────────────────────────────────────────────────────────────────── */

@media (max-width: 767px) {

	.ab-carrusel-movil {
		display: flex !important;
		flex-wrap: nowrap !important;
		overflow-x: auto;
		scroll-snap-type: x mandatory;
		-webkit-overflow-scrolling: touch;
		scroll-padding-inline: 16px;
		/* Sangra hasta el borde y devuelve el aire por dentro: así la
		   tarjeta siguiente asoma y se entiende que hay más. */
		margin-inline: -16px;
		padding-inline: 16px;
		scrollbar-width: none;
	}

	.ab-carrusel-movil::-webkit-scrollbar {
		display: none;
	}

	.ab-carrusel-movil > .e-con {
		flex: 0 0 78% !important;
		scroll-snap-align: center;
	}

	/* Movimiento reducido: el deslizamiento deja de ser suave, pero se
	   sigue pudiendo usar. Aquí no se apaga nada, solo se quita la inercia. */
	@media (prefers-reduced-motion: reduce) {
		.ab-carrusel-movil {
			scroll-behavior: auto;
		}
	}
}


/* ───────────────────────────────────────────────────────────────────
   CABECERA — estado translúcido al bajar

   La cabecera es navy sólido cuando la página está arriba, y al pasar
   el desplazamiento mínimo se vuelve translúcida con desenfoque, para
   que el contenido se intuya por debajo sin robarle legibilidad al
   menú.

   Elementor Pro fija la cabecera y añade `.elementor-sticky--effects`
   al superar el «Effects Offset», pero no deja darle a ese estado un
   fondo distinto desde la interfaz: solo expone los ajustes del
   estado normal. De ahí esta tercera excepción.

   El desenfoque se declara con la variante -webkit- por delante:
   Safari la sigue necesitando.
   ─────────────────────────────────────────────────────────────────── */

.ab-cabecera {
	transition: background-color 260ms ease, border-color 260ms ease,
	            padding 260ms ease, box-shadow 260ms ease;
}

/* Al fijarse se estrecha un poco: da sensación de que el sitio «se aparta»
   para dejar leer. */
.ab-cabecera.elementor-sticky--effects {
	background-color: rgba(1, 2, 40, 0.72) !important;
	-webkit-backdrop-filter: saturate(160%) blur(14px);
	        backdrop-filter: saturate(160%) blur(14px);
	border-bottom-color: rgba(255, 255, 255, 0.14) !important;
	box-shadow: 0 10px 30px -18px rgba(0, 0, 0, 0.75) !important;
	padding-top: 12px !important;
	padding-bottom: 12px !important;
}

/* Sin desenfoque disponible el fondo sube a opaco: un navy al 72 % sin
   blur deja pasar el texto de debajo y el menú se vuelve ilegible. */
@supports not ((-webkit-backdrop-filter: blur(1px)) or (backdrop-filter: blur(1px))) {
	.ab-cabecera.elementor-sticky--effects {
		background-color: rgba(1, 2, 40, 0.96) !important;
	}
}

@media (prefers-reduced-motion: reduce) {
	.ab-cabecera {
		transition: none;
	}
}


/* ─────────────────────────────────────────────────────
   ANCLAS — que la cabecera fija no se coma el titular

   La cabecera mide 88 px y está fija. Al saltar a un ancla del menú el
   navegador deja el destino pegado al borde de la ventana, o sea DEBAJO
   de la cabecera. Medido el 26 ago 2026 sobre las cinco anclas de la
   home: el titular quedaba a 56 px en #puertas, 56 en #casos y 81 en
   #recurso — los tres tapados. En #puertas el H2 desaparecía entero y
   se aterrizaba en la entradilla, huérfana.

   scroll-padding-top se lo dice al contenedor que hace scroll, que aquí
   es el elemento raíz. Es una sola línea y arregla TODAS las anclas del
   sitio a la vez, presentes y futuras — por eso va aquí y no ancla por
   ancla con scroll-margin.

   104 = 88 de cabecera + 16 de aire. En móvil la cabecera mide lo mismo,
   así que el valor no cambia por breakpoint.
   ───────────────────────────────────────────────────── */

html {
	scroll-padding-top: 104px;
}




/* ─────────────────────────────────────────────────────
   TEMARIO POR FASES — calcado del prototipo

   Medido sobre `.abecas-syllabus` del prototipo v2, en sus DOS estados.
   Medir solo el item cerrado deja fuera la mitad: el numero se invierte al
   abrir y la fila cambia de fondo.

   Widget `toggle` y no `accordion`: el prototipo son <details> sin atributo
   `name`, o sea que admite varias fases abiertas a la vez. El acordeon de
   Elementor es exclusivo.
   ───────────────────────────────────────────────────── */

/* La caja que envuelve barra y fases. El radio se recorta con overflow para
   que la barra y la ultima fila no se salgan por las esquinas. */
.ab-fases-caja {
	border: 1px solid var( --e-global-color-abc0007 );
	border-radius: 24px;
	background: var( --e-global-color-abc0011 );
	overflow: hidden;
}

/* Barra superior: resumen a la izquierda, boton a la derecha. */
.ab-fases-barra {
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: 16px;
	flex-wrap: wrap;
	padding: 16px 24px;
	background: var( --e-global-color-abc0006 );
	font-family: 'Poppins', sans-serif;
	font-size: 15px;
	line-height: 24px;
}

.ab-fases-barra__resumen {
	color: var( --e-global-color-abc0002 );
}

.ab-fases-todas {
	background: none;
	border: 0;
	padding: 0;
	margin: 0;
	cursor: pointer;
	font-family: 'Poppins', sans-serif;
	font-size: 15px;
	line-height: 24px;
	color: var( --e-global-color-secondary );
	text-decoration: underline;
	text-underline-offset: 3px;
}

.ab-fases-todas:hover,
.ab-fases-todas:focus-visible {
	color: var( --e-global-color-accent );
}

/* ── Las filas ── */
.ab-fases .elementor-toggle-item + .elementor-toggle-item {
	border-top: 1px solid var( --e-global-color-abc0007 );
}

.ab-fases .elementor-tab-title {
	display: flex;
	align-items: center;
	gap: 16px;
	padding: 24px;
	cursor: pointer;
	background: transparent;
	transition: background-color 0.2s ease;
}

/* Al abrir, la fila se tine de superficie. */
.ab-fases .elementor-tab-title.elementor-active {
	background: var( --e-global-color-abc0006 );
}

.ab-fases .elementor-toggle-icon { display: none !important; }

.ab-fase__chevron {
	flex: 0 0 18px;
	width: 18px;
	height: 18px;
	display: inline-flex;
	align-items: center;
	justify-content: center;
	color: var( --e-global-color-accent );
}

.ab-fase__chevron svg {
	width: 18px;
	height: 18px;
	display: block;
	transition: transform 0.32s cubic-bezier(0.16, 1, 0.3, 1);
}

.ab-fases .elementor-tab-title.elementor-active .ab-fase__chevron svg {
	transform: rotate(180deg);
}

.ab-fases .elementor-toggle-title {
	display: flex;
	align-items: center;
	gap: 16px;
	flex: 1 1 auto;
	min-width: 0;
	text-decoration: none;
}

/* El numero se INVIERTE al abrir: cian sobre navy en lugar de navy sobre
   cian. Es lo que marca cual fase estas leyendo. Los dos pares cumplen
   10,42:1, que es la regla de la casa para el cian. */
.ab-fase__num {
	flex: 0 0 32px;
	width: 32px;
	height: 32px;
	border-radius: 999px;
	background: var( --e-global-color-primary );
	color: var( --e-global-color-secondary );
	display: inline-flex;
	align-items: center;
	justify-content: center;
	font-family: 'Outfit', sans-serif;
	font-weight: 600;
	font-size: 15px;
	line-height: 1;
	transition: background-color 0.2s ease, color 0.2s ease;
}

.ab-fases .elementor-tab-title.elementor-active .ab-fase__num {
	background: var( --e-global-color-secondary );
	color: var( --e-global-color-primary );
}

.ab-fase__txt {
	display: flex;
	flex-direction: column;
	min-width: 0;
}

.ab-fase__titulo {
	font-family: 'Outfit', sans-serif;
	font-weight: 600;
	font-size: 20px;
	line-height: 33px;
	color: var( --e-global-color-secondary );
}

.ab-fase__desc {
	font-family: 'Poppins', sans-serif;
	font-weight: 400;
	font-size: 15px;
	line-height: 24.75px;
	color: var( --e-global-color-abc0002 );
}

.ab-fase__meta {
	margin-left: auto;
	flex: 0 0 auto;
	padding-left: 16px;
	font-family: 'Poppins', sans-serif;
	font-size: 15px;
	line-height: 24.75px;
	color: var( --e-global-color-abc0002 );
	white-space: nowrap;
}

/* ── El contenido desplegado ── */
.ab-fases .elementor-tab-content {
	padding: 0 24px 24px 106px;
	background: var( --e-global-color-abc0011 );
	border: 0;
}

.ab-fases .elementor-tab-content ul {
	margin: 0;
	padding: 0;
	list-style: none;
}

/* El bullet del prototipo no es un disco: es una barrita de 12 x 2 en
   accent, a modo de guion. */
.ab-fases .elementor-tab-content li {
	position: relative;
	padding-left: 24px;
	margin: 0 0 6px;
	font-family: 'Poppins', sans-serif;
	font-weight: 400;
	font-size: 15px;
	line-height: 24.75px;
	color: var( --e-global-color-text );
	list-style: none;
}

.ab-fases .elementor-tab-content li::before {
	content: "";
	position: absolute;
	left: 0;
	top: 11px;
	width: 12px;
	height: 2px;
	background: var( --e-global-color-accent );
}

@media (max-width: 767px) {
	.ab-fases-barra { padding: 14px 16px; gap: 8px; font-size: 14px; }
	.ab-fases-todas { font-size: 14px; }
	.ab-fases .elementor-tab-title { padding: 18px 16px; gap: 12px; }
	.ab-fase__titulo { font-size: 17px; line-height: 26px; }
	.ab-fase__desc { font-size: 14px; line-height: 22px; }
	.ab-fase__meta { display: none; }
	.ab-fases .elementor-tab-content { padding: 0 16px 18px 60px; }
}

/* ─────────────────────────────────────────────────────
   PREGUNTAS FRECUENTES — calcado del prototipo

   Medido sobre `.abecas-faq` en sus dos estados.

   El icono es el `plus` de Lucide y NO cambia de glifo al abrir: lo que gira
   es su envoltura circular, 45 grados, de modo que el mismo signo mas se lee
   como aspa. Es un detalle bonito y barato —un glifo, dos estados— y ademas
   hace que la transicion sea continua.
   ───────────────────────────────────────────────────── */

.ab-faq .elementor-toggle-item {
	border-bottom: 1px solid var( --e-global-color-abc0007 );
	background: transparent;
	transition: background-color 0.24s ease, box-shadow 0.24s ease;
}

/* Al abrir: la pregunta se levanta en BLANCO sobre el fondo superficie de la
   seccion. Ese contraste ES el marcador de estado, y de ahi la regla: la FAQ
   va siempre sobre `abc0006`. Sobre una seccion blanca no se distinguiria.

   El filo cian de 3 px se retiro el 27 ago 2026. Era de la familia de los
   filos que sobresalen —los mismos que ya se habian quitado de las tarjetas—
   y solo hacia falta porque la FAQ del Programa estaba montada sobre blanco.
   Movida a superficie, su trabajo lo hacen el fondo y el aspa.

   La regla de abajo se apaga en el item abierto para que no cruce la tarjeta.
   Se apaga el COLOR y no el borde: asi el pixel sigue ocupando su sitio y la
   lista no da un salto de 1 px al abrir y cerrar. */
.ab-faq .elementor-toggle-item:has( .elementor-tab-title.elementor-active ) {
	background: var( --e-global-color-abc0011 );
	border-bottom-color: transparent;
	border-radius: 14px;
	box-shadow: 0 1px 2px rgba( 1, 2, 40, 0.05 );
}

.ab-faq .elementor-tab-title {
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: 16px;
	padding: 24px 16px;
	cursor: pointer;
	background: transparent;
}

.ab-faq .elementor-toggle-icon { display: none !important; }

.ab-faq .elementor-toggle-title {
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: 16px;
	width: 100%;
	text-decoration: none;
	font-family: 'Outfit', sans-serif;
	font-weight: 500;
	font-size: 20px;
	line-height: 33px;
	color: var( --e-global-color-secondary );
}

.ab-faq__pregunta {
	flex: 1 1 auto;
	min-width: 0;
}

/* La envoltura circular: 48 de lado, superficie en reposo y cian al abrir.
   Girarla 45 grados convierte el mas en aspa. */
.ab-faq__icono {
	flex: 0 0 48px;
	width: 48px;
	height: 48px;
	border-radius: 999px;
	background: var( --e-global-color-abc0006 );
	color: var( --e-global-color-secondary );
	display: inline-flex;
	align-items: center;
	justify-content: center;
	transition: background-color 0.24s ease, transform 0.32s cubic-bezier(0.16, 1, 0.3, 1);
}

.ab-faq__icono svg {
	width: 24px;
	height: 24px;
	display: block;
}

.ab-faq .elementor-tab-title.elementor-active .ab-faq__icono {
	background: var( --e-global-color-primary );
	transform: rotate(45deg);
}

.ab-faq .elementor-tab-content {
	padding: 0 16px 24px;
	background: transparent;
	border: 0;
	font-family: 'Poppins', sans-serif;
	font-weight: 400;
	font-size: 18px;
	line-height: 29.7px;
	color: var( --e-global-color-text );
}

.ab-faq .elementor-tab-content p { margin: 0; }

@media (max-width: 767px) {
	.ab-faq .elementor-tab-title { padding: 18px 14px; gap: 12px; }
	.ab-faq .elementor-toggle-title { font-size: 17px; line-height: 26px; }
	.ab-faq__icono { flex: 0 0 40px; width: 40px; height: 40px; }
	.ab-faq__icono svg { width: 20px; height: 20px; }
	.ab-faq .elementor-tab-content { padding: 0 14px 18px; font-size: 16px; line-height: 26px; }
}

/* ─────────────────────────────────────────────────────────────────────
   PAGINA ACTUAL EN EL MENU

   El item activo iba en cian. Sobre la cabecera translucida —que al bajar
   es rgba(1,2,40,.72)— y con una seccion blanca detras, el fondo efectivo
   sube a rgb(72,73,100) y el cian se queda en 4,50: falla AA por una
   centesima. Medido en navegador, no estimado.

   Asi que el texto activo vuelve a blanco (8,4 sobre ese mismo fondo) y la
   pagina actual se marca con una linea cian debajo.

   Por que aqui y no en Elementor: su control «Pointer» pinta la linea en
   hover Y en activo a la vez, y el hover de esta cabecera ya esta cerrado
   —el texto pasa a cian—. Elementor no deja marcar solo el activo.
   ───────────────────────────────────────────────────────────────────── */
.ab-cabecera .elementor-nav-menu--main .elementor-item-active {
	position: relative;
}

.ab-cabecera .elementor-nav-menu--main .elementor-item-active::after {
	content: "";
	position: absolute;
	left: 0;
	right: 0;
	bottom: 2px;
	height: 2px;
	border-radius: 2px;
	background-color: var(--e-global-color-primary, #48CAE4);
}

/* En el desplegable de movil no cabe la linea: alli basta el punto. */
.ab-cabecera .elementor-nav-menu--dropdown .elementor-item-active::after {
	content: none;
}


/* ───────────────────────────────────────────────────────────────────
   SOMBRA DEL BOTÓN DE ENVIAR

   El botón primario del sitio lleva sombra cian. El de los formularios
   no la llevaba, así que el mismo componente se veía plano dentro del
   formulario y elevado fuera, a pocos centímetros.

   Va aquí y no en el widget porque **el widget `form` de Elementor Pro
   no tiene control de sombra para su botón**: solo expone `_box_shadow_*`,
   que sombrea el formulario entero. Comprobado con `get_controls()` el
   27 ago 2026, después de escribir `button_box_shadow_box_shadow_type` y
   ver que Elementor lo guardaba y lo ignoraba.

   Es el mismo valor que `ab_boton()` da al primario.
   ─────────────────────────────────────────────────────────────────── */

.elementor-form .elementor-button {
	box-shadow: 0 10px 26px -10px rgba( 72, 202, 228, 0.50 );
	transition: transform 0.2s ease, box-shadow 0.2s ease;
}

/* Misma elevación de −2 px al pasar que el resto de botones. */
.elementor-form .elementor-button:hover {
	transform: translateY( -2px );
}

/* ═══════════════════════════════════════════════════════════════════
   9 · LA FLECHA DE LOS DESPLEGABLES

   El widget `form` de Elementor Pro pinta la flecha de cada `select` con
   `e-eicon-caret-down`, un icono macizo de su propio set. La regla del
   sistema (doc 12 §2) dice iconos de trazo y familia Lucide, y no hay
   ningún control en el widget para cambiarlo — comprobado con
   `get_controls()`: el repetidor de campos no expone nada de icono para
   `select`, solo `selected_icon`, que es del paso de un formulario
   multipaso.

   Se oculta el suyo y se dibuja el chevron de Lucide como fondo del
   propio `select`. Va incrustado en `data:` y no como fichero para que no
   haya una petición más por desplegable.

   El `padding-right` no es decorativo: sin él, una opción larga pasa por
   debajo de la flecha.
   ═══════════════════════════════════════════════════════════════════ */

/* El envoltorio se llama `select-caret-down-wrapper`, no
   `e-font-icon-svg-wrapper`. Comprobado en el HTML servido: escribirlo de
   memoria no oculta nada y el icono se queda ahi tan tranquilo. */
.elementor-field-type-select .select-caret-down-wrapper {
	display: none;
}

.elementor-field-type-select .elementor-select-wrapper select {
	appearance: none;
	-webkit-appearance: none;
	padding-right: 42px;
	background-image: url( "data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23027AA0' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='m6 9 6 6 6-6'/%3E%3C/svg%3E" );
	background-repeat: no-repeat;
	background-position: right 16px center;
	background-size: 18px 18px;
}

/* ═══════════════════════════════════════════════════════════════════
   10 · LA TARJETA DEL BLOG

   La piel `archive_cards` de `archive-posts` solo expone el INTERRUPTOR de
   sombra (`archive_cards_box_shadow_box_shadow_type`), no sus valores:
   comprobado con `get_controls()`, la clave `..._box_shadow` no existe. Su
   preajuste es `0 0 10px rgba(0,0,0,0.15)`, gris y bastante más pesado que
   la sombra del sistema.

   Se apaga el interruptor en el widget y aquí se pone la del sitio, la misma
   de `ab_tarjeta()`, junto con la elevación al pasar por encima. El velo en
   degradado de su `hover_effect` también está apagado: las tarjetas del sitio
   se elevan, no se tintan.
   ═══════════════════════════════════════════════════════════════════ */

.elementor-posts .elementor-post__card {
	box-shadow: 0 1px 2px rgba( 1, 2, 40, 0.05 );
	transition: transform 0.2s ease, box-shadow 0.2s ease, border-color 0.2s ease;
}

.elementor-posts .elementor-post__card:hover {
	transform: translateY( -4px );
	box-shadow: 0 16px 32px -8px rgba( 1, 2, 40, 0.16 );
	border-color: var( --e-global-color-primary );
}

/* ═══════════════════════════════════════════════════════════════════
   11 · LOS TITULARES DENTRO DEL ARTÍCULO

   El cuerpo del artículo lo escribe la clienta en el editor, así que sus
   H1–H6 no pasan por la fábrica y no llevan tamaño propio: caen en la
   escala por defecto de Hello Elementor —40 / 32 / 28 / 24 / 20 / 16—,
   que es **la misma en los tres anchos**. En móvil un H1 de 36 px se comía
   ocho líneas de una pantalla de 375 (medido el 30 ago 2026 en la guía de
   becas de máster: 349 px de alto para un solo titular).

   Va aquí y no en el widget porque **`theme-post-content` expone una sola
   tipografía, la del cuerpo**: comprobado con `get_controls()` el 30 ago
   2026, sus 308 controles no tienen ni uno por nivel de encabezado.
   Elementor sí puede hacerlo desde el Estilo de tema del Kit, pero eso
   pinta TODOS los encabezados en bruto del sitio, no los del artículo.

   Los tamaños no son nuevos: son los pasos móviles de `ab_escala()`.

     | en el artículo | paso de la escala | móvil    |
     |----------------|-------------------|----------|
     | h1 y h2        | `h2`              | 25,6 px  |
     | h3             | `h3-tarjeta`      | 20,23 px |
     | h4             | `h3-compacta`     | 18 px    |
     | h5             | `h3-firma`        | 16 px    |

   El h1 baja al paso del h2 a propósito: cuando aparece dentro del cuerpo
   es un título de sección, no el de la página —ese ya lo pone la plantilla—,
   y ningún artículo mezcla hoy h1 con h2.

   Van con `!important` por un motivo concreto: los siete H1 de la guía de
   becas llevan pegada del editor la clase de tamaño de WordPress
   `has-large-font-size` (36 px), y el núcleo la sirve él mismo con
   `!important`. Sin eso, la regla se aplica y no se ve nada.

   Solo se toca el ancho de móvil (≤767, el punto de ruptura del sitio).
   Escritorio y tableta se quedan como están.
   ═══════════════════════════════════════════════════════════════════ */

@media ( max-width: 767px ) {

	.elementor-widget-theme-post-content h1,
	.elementor-widget-theme-post-content h2 {
		font-size: 25.6px !important;
	}

	.elementor-widget-theme-post-content h3 {
		font-size: 20.23px !important;
	}

	.elementor-widget-theme-post-content h4 {
		font-size: 18px !important;
	}

	.elementor-widget-theme-post-content h5 {
		font-size: 16px !important;
	}
}

/* ─────────────────────────────────────────────────────────────
   PRECIO EN EL ARCHIVO DE LA TIENDA  (excepcion 12)

   WooCommerce pinta `.woocommerce ul.products li.product .price` con un
   color propio, rgb(149,142,9), que sobre blanco da 3,41:1 y NO pasa AA.
   Medido en produccion el 31 ago 2026: 15 precios fallando en /tienda/.

   Por que no cabe en Elementor: /tienda/ es el archivo de productos y no
   tiene plantilla de Elementor. Sin plantilla no hay widget al que darle
   color, y el Kit Global no expone ningun control para las clases que
   imprime WooCommerce. Comprobado antes de escribir esto.

   El dia que se construya una plantilla de archivo de producto en Elementor,
   esta regla sobra: quitarla entonces.
   ────────────────────────────────────────────────────────────── */

.woocommerce ul.products li.product .price,
.woocommerce ul.products li.product .price .amount,
.woocommerce ul.products li.product .price bdi,
/* La ficha individual usa OTRAS clases: `div.product p.price`, no
   `ul.products li.product`. El arreglo del 31 ago solo cubrio el archivo, asi
   que /producto/programa-master-espana/ seguia fallando a 3,41:1 con su precio
   de 397 €. Detectado el 1 sep 2026 al pasar el linter a la ficha nueva. */
.woocommerce div.product p.price,
.woocommerce div.product p.price .amount,
.woocommerce div.product p.price bdi,
.woocommerce div.product span.price,
.woocommerce div.product span.price .amount,
.woocommerce div.product span.price bdi {
	color: #010228; /* navy: 20,18:1 sobre blanco */
}

.woocommerce ul.products li.product .price del,
.woocommerce ul.products li.product .price del bdi,
.woocommerce div.product p.price del,
.woocommerce div.product p.price del bdi {
	/* El precio tachado si puede ir apagado, pero no por debajo de AA. */
	color: #5B6076; /* 6,26:1 sobre blanco */
}

/* ─────────────────────────────────────────────────────────────
   BLOQUE «QUE PASA AHORA» DE LA PAGINA DE GRACIAS  (excepcion 13)

   Lo imprime `abecas-core` en el hook `woocommerce_thankyou`, y su
   contenido depende del pedido: si lleva un curso explica el acceso al
   aula, y si no, dice que Araceli escribira. Ningun widget puede decidir
   eso, asi que el marcado es nuestro y su CSS tambien.

   ⚠️ OJO A LO QUE **NO** ESTA AQUI. El resto de la pagina de gracias
   —el «Gracias», la tabla del pedido y la direccion— NO se toca desde
   esta hoja: Elementor Pro trae el widget `woocommerce-purchase-summary`,
   con 605 controles, y entre ellos `confirmation_message_*`,
   `order_details_*` y `titles_*`. Comprobado con `get_controls()` el
   1 sep 2026, como manda la regla de arriba. Eso se estiliza desde el
   widget, donde la clienta puede tocarlo.
   ────────────────────────────────────────────────────────────── */

.abecas-siguiente {
	max-width: 720px;
	margin: 0 auto 32px;
	padding: 24px 26px;
	background-color: #F4FBFD;
	border-left: 4px solid #027AA0;
	border-radius: 8px;
}

.abecas-siguiente__titulo {
	margin: 0 0 12px;
	font-size: 1.125rem;
	font-weight: 600;
	color: #010228;
}

.abecas-siguiente__pasos {
	margin: 0 0 20px;
	padding-left: 20px;
	color: #393B51;
	line-height: 1.7;
}

.abecas-siguiente__pasos li {
	margin-bottom: 8px;
}

.abecas-siguiente__pasos li:last-child {
	margin-bottom: 0;
}

/* Boton primario de marca: navy sobre cian, 10,42:1. Nunca blanco sobre
   cian, que da 1,94:1 y es lo que hacia el sitio antes. */
.abecas-siguiente__boton {
	display: inline-block;
	padding: 13px 26px;
	border-radius: 6px;
	background-color: #48CAE4;
	color: #010228;
	font-weight: 600;
	text-decoration: none;
}

.abecas-siguiente__boton:hover,
.abecas-siguiente__boton:focus {
	background-color: #2FB8D6;
	color: #010228;
}

.abecas-siguiente__ayuda {
	margin: 18px 0 0;
	font-size: 0.9375rem;
	color: #5B6076;
}

.abecas-siguiente__ayuda a {
	color: #027AA0;
}

@media (max-width: 480px) {
	.abecas-siguiente {
		padding: 20px;
	}
}