/*
Theme Name:   Cyber & AI Talent League
Description:  Tema hijo de Hello Elementor para la landing de Cyber & AI Talent League.
Author:       Sherpa Tribe
Template:     hello-elementor
Version:      1.5.0
Text Domain:  hello-elementor-child
*/

/* Aquí irán solo los estilos que Elementor no pueda resolver desde su editor. */

/* =========================================================
   Cinta de texto en movimiento — shortcode [cail_marquee]
   ========================================================= */

/* La "ventana": ocupa todo el ancho y esconde lo que sobresale. */
.cail-marquee {
	--cail-marquee-speed: 30s;                   /* tiempo de una vuelta completa */
	overflow: hidden;
	width: 100%;
	font-family: var(--e-global-typography-primary-font-family), monospace;
	font-size: clamp(2rem, 5vw, 4.5rem);         /* mínimo 32px, ideal 5% del ancho, máximo 72px */
	line-height: 1.2;
	text-transform: uppercase;
	color: var(--e-global-color-text, #fff);
}

/* La cinta: los dos grupos en fila, tan ancha como su contenido. */
.cail-marquee__track {
	display: flex;
	width: max-content;
	animation: cail-marquee-scroll var(--cail-marquee-speed) linear infinite;
}

/* Cada grupo en fila; flex-shrink: 0 impide que se encojan. */
.cail-marquee__group {
	display: flex;
	align-items: center;
	flex-shrink: 0;
}

.cail-marquee__item {
	white-space: nowrap;                         /* "IA APLICADA" nunca se parte en dos líneas */
	padding-inline: 0.4em;
}

/* La banderita de cuadros: 4 columnas x 2 filas, inclinada. */
.cail-marquee__sep {
	flex-shrink: 0;
	width: 1.4em;
	height: 0.75em;
	background: repeating-conic-gradient(currentColor 0 25%, transparent 0 50%) 0 0 / 0.35em 0.375em;
	transform: skewX(-20deg);
}

/* El movimiento: desplazar la cinta la mitad de su ancho (= un grupo) y repetir. */
@keyframes cail-marquee-scroll {
	from { transform: translateX(0); }
	to   { transform: translateX(-50%); }
}

/* Pausa al pasar el ratón, para poder leerla. */
.cail-marquee:hover .cail-marquee__track {
	animation-play-state: paused;
}

/* Si el usuario pide "reducir movimiento" en su sistema, la cinta se queda quieta. */
@media (prefers-reduced-motion: reduce) {
	.cail-marquee__track {
		animation: none;
	}
}

/* =========================================================
   Fondo degradado de la página (manchas azul/violeta del Figma)
   ========================================================= */

/* Una capa fija del tamaño de la pantalla, detrás de todo el contenido. */
body::before {
	content: "";
	position: fixed;
	inset: 0;
	z-index: -1;
	pointer-events: none;
	background:
		radial-gradient(ellipse 30% 35% at 18% 22%, #000 0%, transparent 70%),
		radial-gradient(ellipse 45% 40% at 0% 0%, #0b0b1a 0%, transparent 80%),
		radial-gradient(ellipse 28% 18% at 0% 100%, #a6abf5cc 0%, transparent 70%),
		radial-gradient(ellipse 55% 50% at 75% 25%, #7464e8 0%, transparent 70%),
		radial-gradient(ellipse 60% 60% at 50% 95%, #1428d6 0%, transparent 75%),
		radial-gradient(ellipse 50% 60% at 100% 80%, #0a0f6e 0%, transparent 80%),
		linear-gradient(180deg, #2a2a9e 0%, #2438d0 60%, #1424b8 100%);
}

/* =========================================================
   Tarjetas con dos caras (sección "¿Qué es?")
   En Elementor: contenedor con clase  cail-card
     ├── contenedor con clase  cail-card__front  (cara en reposo)
     └── contenedor con clase  cail-card__back   (cara al pasar el ratón)
   ========================================================= */

/* ".e-con" delante sube la especificidad: Elementor también define position y overflow
   en sus contenedores y, como su CSS se carga después, ganaba al nuestro. */
.e-con.cail-card {
	position: relative;     /* referencia para colocar la cara trasera encima */
	overflow: hidden;       /* nada se sale de las esquinas redondeadas */
}

/* La cara trasera ocupa exactamente el mismo espacio que la tarjeta, invisible. */
.e-con.cail-card__back {
	position: absolute;
	inset: 0;
	width: auto;
	opacity: 0;
	visibility: hidden;
	transition: opacity 0.3s ease, visibility 0.3s ease;
}

.cail-card__front {
	transition: opacity 0.3s ease;
}

/* Al pasar el ratón (o al llegar con el teclado): se muestra la trasera y se oculta la frontal. */
.cail-card:hover .cail-card__back,
.cail-card:focus-within .cail-card__back {
	opacity: 1;
	visibility: visible;
}

.cail-card:hover .cail-card__front,
.cail-card:focus-within .cail-card__front {
	opacity: 0;
}

/* Foto del dorso a sangre (de borde a borde de la tarjeta).
   Elementor limita los widgets con max-width: 100% usando selectores de 4 clases
   (.elementor.elementor .e-con > .elementor-widget). Los nuestros llevan 5 para ganar,
   y así el ancho calc(100% + 56px) y los márgenes de -28px pueden funcionar. */
.elementor.elementor .e-con > .elementor-widget.cail-card__photo,
.e-con.e-con > .e-con-inner > .elementor-widget.cail-card__photo {
	max-width: none;
}

/* En pantallas táctiles no existe "pasar el ratón": se muestra directamente la cara con la información. */
@media (hover: none) {
	.cail-card__front {
		display: none;
	}

	.e-con.cail-card__back {
		position: static;
		opacity: 1;
		visibility: visible;
	}
}

/* Sin animación para quien pide reducir movimiento. */
@media (prefers-reduced-motion: reduce) {
	.cail-card__front,
	.cail-card__back {
		transition: none;
	}
}

/* En el editor de Elementor: si estás editando algo de la cara trasera, se queda visible. */
.cail-card__back:has(.elementor-element-editable),
.cail-card__back.elementor-element-editable {
	opacity: 1;
	visibility: visible;
}

/* =========================================================
   Tarjeta de evento (plantilla "Loop Item" de la Agenda)
   En Elementor:
     contenedor  cail-evento               (la tarjeta)
     contenedor  cail-evento__acciones     (botones Ver / Inscribirse)
     botón       cail-evento__inscribir    (se oculta si no hay enlace)
   ========================================================= */

/* Efecto cristal: fondo blanco casi transparente + desenfoque de lo que hay detrás. */
.e-con.cail-evento {
	background: rgb(255 255 255 / 0.06);
	border: 1px solid rgb(255 255 255 / 0.7);
	border-radius: 8px;
	-webkit-backdrop-filter: blur(12px);   /* Safari */
	backdrop-filter: blur(12px);
	transition: background-color 0.3s ease;
}

.e-con.cail-evento:hover,
.e-con.cail-evento:focus-within {
	background: rgb(255 255 255 / 0.12);
}

/* Textos que generan los shortcodes del plugin. */
.cail-evento__fecha,
.cail-evento__hora {
	display: block;
	font-family: var(--e-global-typography-text-font-family), sans-serif;
	font-size: 20px;
	line-height: 1.35;
	color: var(--e-global-color-text, #fff);
}

.cail-evento__lugar {
	font-family: var(--e-global-typography-text-font-family), sans-serif;
	font-size: 13px;
	color: rgb(255 255 255 / 0.8);
}

/* Etiqueta "Próxima cita": píldora azul. */
.cail-evento__badge {
	display: inline-block;
	padding: 6px 10px;
	border-radius: 999px;
	background: var(--e-global-color-accent, #1a2bd0);
	color: #fff;
	font-family: var(--e-global-typography-text-font-family), sans-serif;
	font-size: 12px;
	line-height: 1;
	text-transform: uppercase;
	letter-spacing: 0.02em;
}

/* Botones: plegados (altura 0, invisibles) hasta pasar el ratón.
   Como el contenido de la tarjeta está alineado abajo, al desplegarse empujan el resto hacia arriba. */
.e-con.cail-evento__acciones {
	max-height: 0;
	opacity: 0;
	overflow: hidden;
	transition: max-height 0.35s ease, opacity 0.25s ease;
}

.cail-evento:hover .e-con.cail-evento__acciones,
.cail-evento:focus-within .e-con.cail-evento__acciones {
	max-height: 120px;
	opacity: 1;
}

/* Sin enlace de inscripción, no se muestra el botón "Inscribirse". */
.cail-evento__inscribir a:not([href]),
.cail-evento__inscribir a[href=""],
.cail-evento__inscribir a[href="#"] {
	display: none;
}

/* Pantallas táctiles: los botones siempre visibles. */
@media (hover: none) {
	.e-con.cail-evento__acciones {
		max-height: none;
		opacity: 1;
	}
}

@media (prefers-reduced-motion: reduce) {
	.e-con.cail-evento,
	.e-con.cail-evento__acciones {
		transition: none;
	}
}

/* Icono del tipo de evento, esquina superior derecha de la tarjeta. */
.cail-evento__icono {
	display: block;
	width: 72px;
	height: auto;
}

/* =========================================================
   Vídeo de fondo del Hero
   Si el usuario pide "reducir movimiento", ocultamos el vídeo:
   Elementor muestra en su lugar la imagen de "Fondo alternativo" (fallback).
   ========================================================= */
@media (prefers-reduced-motion: reduce) {
	.elementor-background-video-container {
		display: none;
	}
}

/* =========================================================
   Tarjetas de nivel de patrocinio (página Patrocina, sección #niveles)
   En Elementor:
     contenedor  cail-nivel          (la tarjeta)
     encabezado  cail-nivel__nivel   (subtítulo pequeño: "ALIANZA PRINCIPAL")
     botón       cail-nivel__boton   ("QUIERO SABER MÁS", oculto hasta pasar el ratón)
   Los colores van aquí y NO en Elementor: si se ponen en el widget, su regla
   es más fuerte que esta y el cambio de color al pasar el ratón no se vería.
   ========================================================= */

/* Variables: un solo sitio donde cambiar los colores de la tarjeta. */
.e-con.cail-nivel {
	--cail-nivel-tinta: #fff;                                        /* color del texto en reposo */
	--cail-nivel-marino: var(--e-global-color-ed025f1, #0a0f5c);    /* global "marino" */
	--cail-nivel-lila: var(--e-global-color-secondary, #b4b8ff);    /* global "Secundario" */

	/* Reposo: cristal, igual que las tarjetas de la Agenda. */
	background: rgb(255 255 255 / 0.06);
	border: 1px solid rgb(255 255 255 / 0.7);
	border-radius: 8px;
	-webkit-backdrop-filter: blur(12px);
	backdrop-filter: blur(12px);
	transition: background-color 0.3s ease, border-color 0.3s ease;
}

/* Todos los textos de la tarjeta usan la "tinta" actual. */
.e-con.cail-nivel .elementor-heading-title,
.e-con.cail-nivel .elementor-widget-text-editor,
.e-con.cail-nivel .elementor-icon-list-text {
	color: var(--cail-nivel-tinta);
	transition: color 0.3s ease;
}

/* El subtítulo ("ALIANZA PRINCIPAL") un poco más suave y espaciado. */
.e-con.cail-nivel .cail-nivel__nivel .elementor-heading-title {
	opacity: 0.85;
	letter-spacing: 0.04em;
}

/* Iconos SVG en <img>: un filtro los pinta de blanco en reposo… */
.e-con.cail-nivel .elementor-widget-image img {
	filter: brightness(0) invert(1);
	transition: filter 0.3s ease;
}

/* El botón se empuja al fondo de la tarjeta (las 5 tarjetas miden lo mismo
   gracias a "Estirar" en la fila) y se oculta hasta pasar el ratón. */
/* El texto del botón en una sola línea ("QUIERO SABER MÁS" no se parte). */
.e-con.cail-nivel .cail-nivel__boton .elementor-button {
	white-space: nowrap;
}

.e-con.cail-nivel > .cail-nivel__boton {
	margin-top: auto;
	padding-top: 32px;
	opacity: 0;
	visibility: hidden;
	transition: opacity 0.3s ease, visibility 0.3s ease;
}

/* ---- Al pasar el ratón (o al llegar con el teclado): fondo lila, texto marino, botón visible ---- */
.e-con.cail-nivel:hover,
.e-con.cail-nivel:focus-within {
	--cail-nivel-tinta: var(--cail-nivel-marino);
	background: var(--cail-nivel-lila);
	border-color: var(--cail-nivel-lila);
}

/* …y de marino al pasar el ratón (este filtro convierte el negro en #0A0F5C). */
.e-con.cail-nivel:hover .elementor-widget-image img,
.e-con.cail-nivel:focus-within .elementor-widget-image img {
	filter: brightness(0) invert(43%) sepia(23%) saturate(2512%) hue-rotate(207deg) brightness(40%) contrast(134%);
}

.e-con.cail-nivel:hover > .cail-nivel__boton,
.e-con.cail-nivel:focus-within > .cail-nivel__boton {
	opacity: 1;
	visibility: visible;
}

/* El botón copia el estilo blanco del Hero; aquí lo pasamos a marino.
   4 clases + :hover ganan a la regla del widget que genera Elementor (4 clases). */
.e-con.cail-nivel:hover .cail-nivel__boton .elementor-button,
.e-con.cail-nivel:focus-within .cail-nivel__boton .elementor-button {
	color: var(--cail-nivel-marino);
	border-color: var(--cail-nivel-marino);
	fill: var(--cail-nivel-marino);
}

/* Pantallas táctiles: no hay "pasar el ratón", así que el botón se ve siempre. */
@media (hover: none) {
	.e-con.cail-nivel > .cail-nivel__boton {
		opacity: 1;
		visibility: visible;
	}
}

@media (prefers-reduced-motion: reduce) {
	.e-con.cail-nivel,
	.e-con.cail-nivel .elementor-heading-title,
	.e-con.cail-nivel .elementor-widget-image img,
	.e-con.cail-nivel > .cail-nivel__boton {
		transition: none;
	}
}