/**
 * Componentes que no admiten clases Atomic: widget clásico Nav Menu de
 * Elementor Pro, botón «volver arriba» de Astra, lightbox de Elementor y
 * estados del navegador (foco, selección, casillas).
 *
 * Todos los valores salen de las variables globales Atomic de Elementor, que
 * el kit publica en :root con su mismo nombre (--color-texto, --esp-2…).
 * Ver docs/design-system.md. Se encola después de reset-astra.css.
 */

/* ------------------------------------------------------------------ */
/* Estados globales: foco de teclado, selección de texto, pulsación    */
/* ------------------------------------------------------------------ */

/*
 * Foco visible en dos tonos (negro por dentro, dorado claro por fuera) para
 * que se vea sobre fondos claros, oscuros y sobre la franja dorada.
 * Sustituye al anillo azul del navegador; no lo elimina.
 */
/*
 * Especificidad 0,2,1: gana a «a:focus-visible{outline-style:dotted}» y a
 * «input[type=email]:focus{outline:none}» de Astra, y al «all: unset» de los
 * enlaces Atomic (.elementor .e-image-link-base, 0,2,0).
 */
body :is(a, button, summary, input, textarea, select, [tabindex]):focus-visible {
	outline: var(--grosor-foco) solid var(--color-negro);
	outline-offset: var(--grosor-foco);
	box-shadow: 0 0 0 calc(var(--grosor-foco) * 2) var(--color-dorado-claro);
}

/*
 * Campos: Astra pone el borde azul (#046BD2) al enfocar
 * («input[type=email]:focus…», 0,2,1). Borde dorado en su lugar.
 */
body .elementor .campo:focus {
	border-color: var(--color-dorado);
}

/*
 * Enlace «Ir al contenido» de Astra (visible sólo al tabular): azul de
 * Astra en texto y contorno.
 */
body a.skip-link.screen-reader-text:focus,
body a.skip-link.screen-reader-text:focus-visible {
	color: var(--color-negro);
	background-color: var(--color-blanco);
	border-color: var(--color-dorado);
	outline: var(--grosor-foco) solid var(--color-negro);
	box-shadow: 0 0 0 calc(var(--grosor-foco) * 2) var(--color-dorado-claro);
}

::selection {
	background-color: var(--color-dorado-claro);
	color: var(--color-negro);
}

/* Resaltado azul al pulsar en móvil (Safari/Chrome). */
:where(.elementor, #ast-scroll-top) a,
:where(.elementor, #ast-scroll-top) button,
:where(.elementor) summary,
:where(.elementor) .elementor-menu-toggle {
	-webkit-tap-highlight-color: transparent;
}

/* ------------------------------------------------------------------ */
/* Formulario                                                         */
/* ------------------------------------------------------------------ */

/* Casilla de aceptación: marca en dorado en lugar del azul del sistema. */
.elementor .casilla {
	accent-color: var(--color-dorado);
	cursor: pointer;
}

/*
 * Astra pinta en azul «input[type=checkbox]:checked», también con :hover y
 * :focus (especificidad 0,3,1); por eso se repiten aquí los tres estados.
 */
.elementor .casilla:checked,
.elementor .casilla:checked:hover,
.elementor .casilla:checked:focus {
	background-color: var(--color-dorado);
	border-color: var(--color-dorado);
	box-shadow: none;
}

.elementor .casilla:hover,
.elementor .casilla:focus {
	border-color: var(--color-texto);
}

.elementor .casilla + label {
	cursor: pointer;
}

/* Enlace «política de privacidad» dentro de la etiqueta: subrayado dorado. */
.elementor .casilla + label a {
	text-decoration: underline;
	text-decoration-color: var(--color-dorado);
	text-underline-offset: 0.2em;
}

/*
 * Enlace «Política de privacidad» de la información básica bajo el botón
 * «Enviar»: Elementor quita todo estilo a los enlaces dentro de un párrafo
 * Atomic («.e-paragraph-base a { all: unset }»). Subrayado dorado como en la casilla.
 */
.elementor form .e-paragraph-base a {
	text-decoration: underline;
	text-decoration-color: var(--color-dorado);
	text-underline-offset: 0.2em;
}

/* Campos inválidos tras interactuar: borde negro en vez del rojo/azul. */
.elementor .campo:user-invalid {
	border-color: var(--color-texto);
}

/* ------------------------------------------------------------------ */
/* Menú principal (widget Nav Menu de Elementor Pro en la cabecera)    */
/* El contenedor lleva la clase Atomic «zona-menu».                    */
/* ------------------------------------------------------------------ */

/* El widget ocupa sólo lo que necesita, para compartir fila con la marca. */
.zona-menu .elementor-widget-nav-menu {
	width: auto;
}

.zona-menu .elementor-widget-nav-menu .elementor-nav-menu .elementor-item,
.zona-menu .elementor-widget-nav-menu .elementor-nav-menu--dropdown .elementor-item {
	font-family: var(--fuente-texto), sans-serif;
	font-size: var(--fs-boton);
	font-weight: 500;
	line-height: 1.3;
	letter-spacing: 0.01em;
}

/* Escritorio: texto en color de texto en todos los estados, filete dorado. */
.zona-menu .elementor-widget-nav-menu .elementor-nav-menu--main .elementor-item,
.zona-menu .elementor-widget-nav-menu .elementor-nav-menu--main .elementor-item:visited,
.zona-menu .elementor-widget-nav-menu .elementor-nav-menu--main .elementor-item:hover,
.zona-menu .elementor-widget-nav-menu .elementor-nav-menu--main .elementor-item:focus,
.zona-menu .elementor-widget-nav-menu .elementor-nav-menu--main .elementor-item.elementor-item-active,
.zona-menu .elementor-widget-nav-menu .elementor-nav-menu--main .elementor-item.highlighted {
	color: var(--color-texto);
	fill: var(--color-texto);
}

.zona-menu .elementor-widget-nav-menu .elementor-nav-menu--main .elementor-item {
	padding: var(--esp-1) calc(var(--esp-2) * 0.75);
	white-space: nowrap;
}

/*
 * Entre 1025 y 1099 px el menú horizontal no cabe junto a la marca y el
 * botón: se pasa a hamburguesa, como en tableta. El widget sólo permite el
 * punto de corte de tableta (1024 px); aquí se replican sus reglas
 * («.elementor-nav-menu--dropdown-tablet», widget-nav-menu.min.css) para
 * este tramo.
 */
@media (min-width: 1025px) and (max-width: 1099px) {
	.zona-menu .elementor-nav-menu--dropdown-tablet .elementor-nav-menu--main {
		display: none;
	}

	.zona-menu .elementor-nav-menu--dropdown-tablet .elementor-menu-toggle {
		display: flex;
	}

	.zona-menu .elementor-nav-menu--dropdown-tablet .elementor-nav-menu--dropdown {
		display: block;
	}
}

/*
 * Portátiles pequeños (1100–1240 px): menú y nombre del curso más compactos
 * para que marca, menú y botón quepan en una sola fila.
 */
@media (min-width: 1100px) and (max-width: 1240px) {
	.zona-menu .elementor-widget-nav-menu .elementor-nav-menu--main .elementor-item {
		font-size: var(--fs-pequeno-escritorio);
		padding-left: calc(var(--esp-1) / 2);
		padding-right: calc(var(--esp-1) / 2);
	}

	.elementor .marca-nombre {
		font-size: var(--fs-marca-movil);
		max-width: var(--ancho-marca-movil);
	}
}

.zona-menu .elementor-widget-nav-menu .elementor-nav-menu--main:not(.e--pointer-framed) .elementor-item:before,
.zona-menu .elementor-widget-nav-menu .elementor-nav-menu--main:not(.e--pointer-framed) .elementor-item:after {
	background-color: var(--color-dorado);
	height: var(--grosor-filete);
}

/* Botón de hamburguesa (tableta y móvil). */
.zona-menu .elementor-widget-nav-menu .elementor-menu-toggle {
	--nav-menu-icon-size: var(--esp-3);
	color: var(--color-texto);
	fill: var(--color-texto);
	background-color: transparent;
	border-radius: var(--radio);
	padding: var(--esp-1);
}

.zona-menu .elementor-widget-nav-menu .elementor-menu-toggle:hover,
.zona-menu .elementor-widget-nav-menu .elementor-menu-toggle.elementor-active {
	color: var(--color-negro);
	fill: var(--color-negro);
	background-color: var(--color-hueso);
}

.zona-menu .elementor-widget-nav-menu .elementor-menu-toggle svg {
	fill: currentColor;
}

/*
 * Desplegable a ancho completo bajo la barra principal.
 * No se usa la opción «ancho completo» del widget: su cálculo en JavaScript
 * descuadra el menú cuando el widget no empieza en el borde de la barra.
 * Los contenedores intermedios quedan en position: static para que el
 * desplegable se coloque respecto a «Barra principal» (ancho de pantalla).
 */
.zona-menu .elementor-widget-nav-menu,
.zona-menu .elementor-widget-nav-menu .elementor-widget-container {
	position: static;
}

.zona-menu .elementor-widget-nav-menu .elementor-nav-menu__container.elementor-nav-menu--dropdown {
	position: absolute;
	margin-top: 0;
	top: 100%;
	left: 0;
	right: 0;
	width: auto;
	z-index: 9997;
}

.zona-menu .elementor-widget-nav-menu .elementor-nav-menu--dropdown {
	background-color: var(--color-blanco);
	border-style: solid;
	border-color: var(--color-borde);
	border-width: var(--grosor-borde) 0;
}

.zona-menu .elementor-widget-nav-menu .elementor-nav-menu--dropdown a,
.zona-menu .elementor-widget-nav-menu .elementor-nav-menu--dropdown a:visited {
	color: var(--color-texto);
	fill: var(--color-texto);
	background-color: var(--color-blanco);
	padding: var(--esp-2) var(--esp-3);
	border-style: solid;
	border-color: transparent;
	border-width: 0 0 0 var(--grosor-filete);
}

.zona-menu .elementor-widget-nav-menu .elementor-nav-menu--dropdown a:hover,
.zona-menu .elementor-widget-nav-menu .elementor-nav-menu--dropdown a:focus,
.zona-menu .elementor-widget-nav-menu .elementor-nav-menu--dropdown a.elementor-item-active,
.zona-menu .elementor-widget-nav-menu .elementor-nav-menu--dropdown a.highlighted {
	color: var(--color-negro);
	background-color: var(--color-hueso);
	border-color: var(--color-dorado);
}

/* ------------------------------------------------------------------ */
/* Botón «volver arriba» de Astra                                      */
/* ------------------------------------------------------------------ */

#ast-scroll-top {
	background-color: var(--color-negro);
	color: var(--color-dorado-claro);
	border-radius: 0;
}

#ast-scroll-top:hover,
#ast-scroll-top:focus {
	background-color: var(--color-carbon);
	color: var(--color-dorado-claro);
}

#ast-scroll-top svg,
#ast-scroll-top .ast-icon svg {
	fill: currentColor;
}

/* ------------------------------------------------------------------ */
/* Galerías de fotos ampliables (lightbox de Elementor)                */
/* ------------------------------------------------------------------ */

/*
 * Al enlazar cada foto, el elemento de la rejilla pasa a ser el enlace <a> y
 * no la imagen; las reglas se aplican al enlace. Sirve para cualquier rejilla
 * con la clase Atomic «galeria-ampliable». Los selectores llevan «.elementor»
 * delante para ganar al «all: unset» de los enlaces Atomic
 * (.elementor .e-image-link-base).
 */
.elementor .galeria-ampliable > a {
	display: block;
	position: relative;
	overflow: hidden;
	min-width: 0;
	min-height: 0;
	border-radius: var(--radio);
	cursor: zoom-in;
}

/* La foto llena la celda sea cual sea su proporción (también las de doble ancho). */
.elementor .galeria-ampliable > a > img {
	position: absolute;
	top: 0;
	left: 0;
	width: 100%;
	height: 100%;
}

/* Rejilla regular (clase Atomic «galeria-fotos»): celdas 4:3. */
.elementor .galeria-fotos > a {
	aspect-ratio: 4 / 3;
}

/*
 * Mosaico de la portada (clase Atomic «mosaico-portada»): primera foto 2×2,
 * sexta a doble ancho. Puntos de corte de Elementor: tableta ≤ 1024 px.
 */
.elementor .mosaico-portada > a:nth-child(1) {
	grid-column: span 2;
	grid-row: span 2;
}

.elementor .mosaico-portada > a:nth-child(6) {
	grid-column: span 2;
}

@media (max-width: 1024px) {
	.elementor .mosaico-portada > a:nth-child(1) {
		grid-row: span 1;
	}
}

/* ------------------------------------------------------------------ */
/* Títulos que no deben partirse por el guion                         */
/* Uso: «Abierta inscripción <span>2026-2027</span>» + clase           */
/* Atomic «titulo-sin-partir».                                         */
/* ------------------------------------------------------------------ */

.titulo-sin-partir span {
	white-space: nowrap;
}

/* ------------------------------------------------------------------ */
/* Enlace de la academia en la franja superior de la cabecera         */
/* «Acceso alumnos» lleva la clase Atomic «solo-visitantes» y          */
/* «Mis cursos», «solo-alumnos». WordPress pone «logged-in» en el      */
/* <body> cuando hay sesión.                                          */
/* ------------------------------------------------------------------ */

body.logged-in .elementor .solo-visitantes,
body:not(.logged-in) .elementor .solo-alumnos {
	display: none;
}

/*
 * «Mi cuenta» y «Cerrar sesión» (sólo con sesión; ver inc/academia.php):
 * - en la franja superior, junto a «Mis cursos», desde 1100 px;
 * - por debajo de 1100 px, en el menú hamburguesa (elementos del menú «Principal»
 *   con las clases «solo-alumnos mi-cuenta» y «solo-alumnos cerrar-sesion»), nunca
 *   en el menú horizontal.
 */
@media (max-width: 1099px) {
	.elementor p:is(.mi-cuenta, .cerrar-sesion) {
		display: none;
	}
}

.zona-menu .elementor-nav-menu--main :is(.mi-cuenta, .cerrar-sesion) {
	display: none;
}

/* ------------------------------------------------------------------ */
/* Formulario «Solicita información» (id «solicita-informacion»)      */
/* ------------------------------------------------------------------ */

/*
 * El ancla está en el formulario (componente Elementor 125); el título
 * «Solicita información» va justo encima, en la página (83 px en escritorio,
 * 68 en móvil). Margen para que el título quede a la vista al bajar.
 */
#solicita-informacion {
	scroll-margin-top: var(--esp-8);
}

/* ------------------------------------------------------------------ */
/* Vídeo de fondo de la portada (inc/video-portada.php)               */
/* ------------------------------------------------------------------ */

/*
 * Capa entre la foto de escritorio (z-index 0) y el velo (z-index 1) de la
 * sección #inicio. El iframe 16:9 cubre la sección entera y se recorta como
 * un fondo: ancho máx(100 %, alto × 16/9), alto máx(100 %, ancho × 9/16),
 * centrado (max-width: none frente al «iframe { max-width: 100% }» de Astra).
 * Invisible hasta que el vídeo se reproduce (la foto hace de espera).
 */
.video-portada {
	position: absolute;
	inset: 0;
	z-index: 0;
	overflow: hidden;
	pointer-events: none;
	container-type: size;
	opacity: 0;
	transition: opacity 0.6s ease;
}

.video-portada--visible {
	opacity: 1;
}

.video-portada iframe {
	position: absolute;
	top: 50%;
	left: 50%;
	width: max(100cqw, 177.78cqh);
	height: max(100cqh, 56.25cqw);
	max-width: none;
	transform: translate(-50%, -50%);
	border: 0;
}

@media (max-width: 1024px), (prefers-reduced-motion: reduce) {
	.video-portada {
		display: none;
	}
}