/*
 * sy.css — SOLO comportamiento. Ni un color ni un tamaño de diseño: eso vive
 * en el panel de Elementor y en los globales (y en formas.php, con su motivo).
 * Aquí: estados (abierto, oculto, al bajar), la entrada al scroll y el movimiento.
 *
 * Una sola duración y un solo easing en toda la web (tokens.css del React):
 * 700 ms (380 ms en móvil) para entradas, 300 ms para estados, y
 * cubic-bezier(0.16, 1, 0.3, 1).
 */
:root { --sy-dur: 700ms; --sy-half: 300ms; --sy-ease: cubic-bezier(0.16, 1, 0.3, 1); --sy-stagger: 80ms; --sy-word: 45ms; }
@media (max-width: 767px) { :root { --sy-dur: 380ms; --sy-stagger: 50ms; } }

html { scroll-behavior: smooth; -webkit-text-size-adjust: 100%; }
body { overflow-x: hidden; }

/* ── Cabecera fija sobre el contenido (Header.jsx) ─────────────────── */
.elementor-location-header { position: fixed; top: 0; left: 0; right: 0; z-index: 50; }
.admin-bar .elementor-location-header { top: 32px; }
@media (max-width: 782px) { .admin-bar .elementor-location-header { top: 46px; } }
.sy-topbar { overflow: hidden; transition: max-height var(--sy-half) var(--sy-ease), min-height var(--sy-half) var(--sy-ease), opacity var(--sy-half) var(--sy-ease); max-height: 40px; }
.sy-scrolled .sy-topbar { max-height: 0; min-height: 0 !important; opacity: 0; }
.sy-nav, .sy-nav .elementor-nav-menu a, .sy-nav .sy-abre-menu { transition: background-color var(--sy-half) var(--sy-ease), color var(--sy-half) var(--sy-ease), border-color var(--sy-half) var(--sy-ease); }
.sy-logo-claro { display: none; }
.sy-scrolled .sy-logo-claro { display: block; }
.sy-scrolled .sy-logo-oscuro { display: none; }
.sy-abre-menu, .sy-cierra-menu { cursor: pointer; }

/* Submenú de escritorio: panel centrado bajo su ítem que aparece al pasar o con el
   foco (NavDropdown.jsx). SmartMenus escribe ancho y posición en línea: por eso aquí. */
.sy-menu .elementor-nav-menu--main .sub-menu { display: grid !important; gap: 4px; padding: 12px !important; width: 340px !important; min-width: 0 !important; max-width: none !important;
	left: 50% !important; margin: 0 !important; top: 100% !important; transform: translate(-50%, 8px); opacity: 0; visibility: hidden;
	transition: opacity var(--sy-half) var(--sy-ease), transform var(--sy-half) var(--sy-ease), visibility 0s linear var(--sy-half); }
.sy-menu .elementor-nav-menu--main li:hover > .sub-menu, .sy-menu .elementor-nav-menu--main li:focus-within > .sub-menu { transform: translate(-50%, 0); opacity: 1; visibility: visible; transition-delay: 0s; }
.sy-menu .elementor-nav-menu--main li.menu-item-has-children:has(> a[href*="/servicios/"]) > .sub-menu { width: 560px !important; grid-template-columns: 1fr 1fr; }
.sy-menu .sub-arrow, .sy-menu-movil .sub-arrow { display: none !important; }

/* Un solo easing en toda la web (tokens.css): también en las transiciones nativas. */
.elementor-element, .elementor-element .elementor-button, .elementor-element .elementor-icon, .elementor-element a { transition-timing-function: var(--sy-ease) !important; }

/* Menú móvil a pantalla completa, entra desde la derecha. */
.sy-movil { position: fixed !important; inset: 0; z-index: 60; transform: translateX(100%); transition: transform var(--sy-dur) var(--sy-ease); pointer-events: none; overflow-y: auto; overflow-x: hidden; }
.sy-menu-movil .elementor-nav-menu--main, .sy-menu-movil .elementor-nav-menu { overflow: visible; max-width: 100%; }
.sy-movil.is-open { transform: none; pointer-events: auto; }
@media (min-width: 1025px) { .sy-movil { display: none !important; } }
.sy-menu-movil .sub-menu { display: flex !important; flex-direction: column; max-height: 0; overflow: hidden; transition: max-height var(--sy-dur) var(--sy-ease);
	position: static !important; width: auto !important; margin: 0 !important; transform: none !important; opacity: 1 !important; visibility: visible !important; }
.sy-menu-movil .sy-abierto > .sub-menu { max-height: 600px; }
.sy-sub-toggle, .sy-sub-toggle:hover, .sy-sub-toggle:focus, .sy-sub-toggle:active { display: flex; align-items: center; justify-content: center; width: 44px; height: 44px; background: transparent !important; border: 0 !important; border-radius: 8px; padding: 0; color: inherit; cursor: pointer; box-shadow: none; }
.sy-sub-toggle svg { width: 20px; height: 20px; transition: transform var(--sy-half) var(--sy-ease); }
.sy-abierto > .sy-sub-toggle svg { transform: rotate(180deg); }

/* ── Entradas al viewport, una sola vez (motion/reveal.js) ─────────── */
html.sy-mov .sy-r {
	opacity: 0;
	transition: opacity var(--sy-dur) var(--sy-ease), transform var(--sy-dur) var(--sy-ease), clip-path var(--sy-dur) var(--sy-ease);
	transition-delay: calc(var(--i, 0) * var(--sy-stagger));
	will-change: opacity, transform;
}
html.sy-mov .sy-r--up { transform: translateY(32px); }
html.sy-mov .sy-r--left { transform: translateX(-32px); }
html.sy-mov .sy-r--right { transform: translateX(32px); }
html.sy-mov .sy-r--zoom { transform: scale(1.04); }
html.sy-mov .sy-r--clip { opacity: 1; clip-path: inset(100% 0 0 0); }
html.sy-mov .sy-r.sy-dentro { opacity: 1; transform: none; clip-path: inset(0 0 0 0); }
/* En móvil las entradas laterales suben en vertical: más cortas y sin salirse del ancho. */
@media (max-width: 767px) { html.sy-mov .sy-r--left:not(.sy-dentro), html.sy-mov .sy-r--right:not(.sy-dentro) { transform: translateY(16px); } }

/* Títulos por palabra: cada palabra sube desde una máscara, encadenada. */
.sy-w { display: inline-block; overflow: hidden; vertical-align: bottom; padding-bottom: 0.12em; margin-bottom: -0.12em; }
.sy-w > span { display: inline-block; }
html.sy-mov .sy-r--split { opacity: 1; transform: none; }
html.sy-mov .sy-r--split .sy-w > span { transform: translateY(110%); transition: transform var(--sy-dur) var(--sy-ease); transition-delay: calc(var(--i, 0) * var(--sy-stagger) + var(--w, 0) * var(--sy-word)); }
html.sy-mov .sy-r--split.sy-dentro .sy-w > span { transform: none; }

/* ── Desplegables: temario y biografías (apertura animada de alto) ──── */
.sy-modulo-cabeza, .sy-bio-boton { cursor: pointer; }
.sy-modulo-cuerpo, .sy-bio-cuerpo { display: grid !important; grid-template-rows: 0fr; transition: grid-template-rows var(--sy-dur) var(--sy-ease); }
.sy-modulo.is-open .sy-modulo-cuerpo, .sy-bio.is-open .sy-bio-cuerpo { grid-template-rows: 1fr; }
.sy-modulo-cuerpo > *, .sy-bio-cuerpo > * { min-height: 0 !important; overflow: hidden; }
.sy-chevron svg, .sy-modulo-chevron svg, .sy-bio-chevron svg { transition: transform var(--sy-half) var(--sy-ease); }
.sy-modulo.is-open .sy-modulo-chevron svg, .sy-bio.is-open .sy-bio-chevron svg { transform: rotate(180deg); }

/* ── Ficha del curso: la tarjeta cuelga sobre el encabezado (desktop) ── */
@media (min-width: 1025px) {
	.sy-ficha-tarjeta { margin-top: calc(var(--sy-solape, 14rem) * -1) !important; position: sticky; top: 112px; }
}
.sy-tab { cursor: pointer; }
.sy-seccion-ficha { scroll-margin-top: 160px; }

/* ── Listado de cursos ─────────────────────────────────────────────── */
.sy-limpiar, .sy-sin-resultados { display: none; }
.sy-limpiar.sy-visible, .sy-sin-resultados.sy-visible { display: block; }
.sy-oculto { display: none !important; }
@media (max-width: 1024px) {
	.sy-filtros { display: none; }
	.sy-filtros.sy-abierto { display: flex; }
}
.sy-filtrar { cursor: pointer; }
.sy-filtrar .elementor-icon-list-item:last-child svg { transition: transform var(--sy-half) var(--sy-ease); }
.sy-filtrar.sy-abierto .sy-filtrar-chevron svg { transform: rotate(180deg); }

/* Etiqueta vacía de un curso: no se pinta. */
.sy-badge.sy-vacia, .sy-badge:has(.elementor-heading-title:empty) { display: none; }

/* ── Chat flotante de WhatsApp ─────────────────────────────────────── */
.sy-wa-panel { transform-origin: bottom right; transition: opacity var(--sy-half) var(--sy-ease), transform var(--sy-half) var(--sy-ease); }
.sy-wa:not(.is-open) .sy-wa-panel { opacity: 0; transform: translateY(8px) scale(0.95); pointer-events: none; }
/* El contenedor fijo del chat mide lo que el panel aunque esté cerrado: sin esto
   tapaba los enlaces del pie (legales, Libro de Reclamaciones) y no se podían pulsar.
   Solo reciben clics el botón redondo y el panel cuando está abierto. */
.sy-wa { pointer-events: none; }
.sy-wa .sy-wa-abrir, .sy-wa.is-open .sy-wa-panel { pointer-events: auto; }
.sy-wa-abrir { cursor: pointer; }
.sy-wa .sy-wa-icono-x, .sy-wa.is-open .sy-wa-icono-wa { display: none; }
.sy-wa.is-open .sy-wa-icono-x { display: block; }
.sy-wa-form button[disabled] { opacity: 0.4; pointer-events: none; }

/* ── Movimiento reducido ───────────────────────────────────────────── */
@media (prefers-reduced-motion: reduce) {
	html { scroll-behavior: auto; }
	html.sy-mov .sy-r { opacity: 1; transform: none; clip-path: none; transition: none; }
	html.sy-mov .sy-r--split .sy-w > span { transform: none; transition: none; }
	*, *::before, *::after { transition-duration: 0.01ms !important; animation-duration: 0.01ms !important; }
}