/**
 * bm.css — SOLO comportamiento y estados de BioMASTER.
 *
 * Aqui no hay ni un color, ni una tipografia, ni un espaciado: eso sale de
 * los controles de Elementor y de los globales (y lo poco que no tiene
 * control, de formas.php con tokens). Lo que vive aqui:
 *   - el movimiento del React (motion.css): una duracion y un easing
 *   - que un panel este abierto o cerrado
 *   - que los iconos de trazo no se rellenen
 *   - la tarjeta con el enlace del titulo estirado sobre toda ella
 */

:root {
	--bm-dur: 500ms;
	--bm-ease: cubic-bezier( 0.16, 1, 0.3, 1 );
}
@media ( max-width: 767px ) {
	:root { --bm-dur: 350ms; }
}

/* ── Iconos de trazo ──────────────────────────────────────────
 * lucide trae fill="none" como ATRIBUTO y Elementor escribe `fill: color` en
 * su hoja: una regla gana a un atributo, y el reloj salia macizo. El trazo
 * sigue saliendo del control de color del widget (stroke="currentColor").
 */
.bm-trazo svg,
.bm-trazo svg * { fill: none; }
/* El boton del formulario pinta su icono con `svg *` y cinco clases de
   especificidad: el mismo fill:none necesita una mas. */
body .bm-formulario.elementor-element.elementor-widget-form .elementor-button[type="submit"] svg * { fill: none; }
/* Relleno de los campos (.field del React: py-3 px-4). El widget Form solo
   ofrece tamaños fijos: «md» da 6 px y un alto minimo de 47. */
body .bm-formulario.elementor-widget-form .elementor-field-textual { padding: 12px 16px; min-height: 0; }

/* La caja del widget Icon no se ajusta a su icono (16 px de icono median 24). */
.bm-icono .elementor-icon { display: flex; align-items: center; justify-content: center; line-height: 1; }
.bm-icono svg { display: block; }
.bm-checks .elementor-icon-list-icon svg,
.bm-migas .elementor-icon-list-icon svg { display: block; }
/* Lista de iconos: Elementor suma al hueco del panel («Sangría del texto»)
   un margen de 1/4 del icono y 5 px mas delante del texto. El gap-N del
   React es uno solo: aqui el hueco es exactamente el del panel. */
.elementor-widget-icon-list { --e-icon-list-icon-margin: 0; }
.elementor-widget-icon-list .elementor-icon-list-icon + .elementor-icon-list-text { padding-inline-start: 0; }

/* Solo para lectores de pantalla (sr-only del React). */
.bm-sr { position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px; overflow: hidden; clip: rect( 0, 0, 0, 0 ); white-space: nowrap; border: 0; }

/* ── Enlace estirado ──────────────────────────────────────────
 * La tarjeta del React es clicable entera porque el enlace del titulo se
 * estira con un ::after sobre toda ella (after:absolute after:inset-0). El
 * boton «Comprar» queda por encima con su propio enlace.
 */
.bm-tarjeta { position: relative; }
.bm-enlace-estirado a::after { content: ""; position: absolute; inset: 0; z-index: 1; }
.bm-sobre-enlace { position: relative; z-index: 2; }
.bm-sin-puntero { pointer-events: none; }

/* ── Tarjetas: elevacion y zoom de la foto ────────────────────
 * hover:-translate-y-1 de la tarjeta y el zoom 1.05 de la foto al pasar por
 * CUALQUIER parte de la tarjeta (group-hover), que el control de hover de
 * Elementor no da: solo reacciona al elemento que tiene el raton encima.
 */
.bm-tarjeta.e-con { transition: background-color var(--bm-dur) var(--bm-ease), transform var(--bm-dur) var(--bm-ease); }
.bm-eleva:hover { transform: translateY( -4px ); }
.bm-zoom { transition: transform var(--bm-dur) var(--bm-ease); }
.bm-medio:hover .bm-zoom,
.bm-grupo:hover .bm-zoom { transform: scale( 1.05 ); }
.bm-chip-logo { transition: transform var(--bm-dur) var(--bm-ease); }
.bm-chip-logo:hover { transform: translateY( -4px ); }
.bm-logo-uni img { opacity: 0.8; transition: opacity var(--bm-dur) var(--bm-ease); }
.bm-logo-uni:hover img { opacity: 1; }

/* El icono del boton se corre 3 px al pasar: mismo gesto en toda la web. */
.bm-boton .elementor-button-icon { transition: transform var(--bm-dur) var(--bm-ease); }
.bm-boton-flecha .elementor-button:hover .elementor-button-icon { transform: translateX( 3px ); }

/* Subrayado que crece desde la izquierda (.link-underline): usa currentColor. */
.bm-migas a .elementor-icon-list-text,
.bm-enlace-subraya { position: relative; display: inline-block; }
.bm-migas a .elementor-icon-list-text::after,
.bm-enlace-subraya::after {
	content: ""; position: absolute; left: 0; bottom: -2px; width: 100%; height: 1px;
	background: currentColor; transform: scaleX( 0 ); transform-origin: left;
	transition: transform var(--bm-dur) var(--bm-ease);
}
.bm-migas a:hover .elementor-icon-list-text::after,
.bm-enlace-subraya:hover::after { transform: scaleX( 1 ); }

/* ── Entradas al hacer scroll (motion.css del React) ──────────
 * El estado inicial SOLO con .bm-anim en <html>, que pone bm.js: si el JS
 * falla, nada queda oculto.
 */
.bm-anim [class*="bm-revela-"] {
	opacity: 0;
	transition: opacity var(--bm-dur) var(--bm-ease), transform var(--bm-dur) var(--bm-ease), width var(--bm-dur) var(--bm-ease);
}
.bm-anim .bm-revela-arriba   { transform: translateY( 20px ); }
.bm-anim .bm-revela-izq      { transform: translateX( -28px ); }
.bm-anim .bm-revela-der      { transform: translateX( 28px ); }
.bm-anim .bm-revela-zoom     { transform: scale( 0.98 ); }
.bm-anim .bm-revela-fundido  { transform: none; }
.bm-anim .bm-revela-regla    { opacity: 1; transform: scaleX( 0 ); transform-origin: left; }
.bm-anim .bm-revela-regla[class*="flex-end"],
.bm-anim .bm-regla-flip.bm-revela-regla { transform-origin: right; }
.bm-anim [class*="bm-revela-"].bm-revelado { opacity: 1; transform: none; }
.bm-anim .bm-rejilla .e-loop-item,
.bm-anim .bm-escalona > * { opacity: 0; transform: translateY( 20px ); transition: opacity var(--bm-dur) var(--bm-ease), transform var(--bm-dur) var(--bm-ease); }
.bm-anim .bm-rejilla .e-loop-item.bm-revelado,
.bm-anim .bm-escalona > .bm-revelado { opacity: 1; transform: none; }

@media ( max-width: 767px ) {
	.bm-anim .bm-revela-izq,
	.bm-anim .bm-revela-der { transform: translateY( 16px ); }
}

/* ── Hero ─────────────────────────────────────────────────────
 * Entrada del hero al montar y al cambiar de slide: cada linea del titular
 * sube desde debajo de su mascara, la bajada y los botones aparecen, y el
 * recuadro hace un zoom suave. Mismo easing y duracion que el resto.
 */
.bm-hero-titulo .bm-l { display: block; overflow: hidden; }
.bm-hero-titulo .bm-l > span { display: block; }
.swiper-slide-active .bm-hero-titulo .bm-l > span,
.swiper-slide-active .bm-hero-etiqueta .elementor-heading-title { animation: bm-linea var(--bm-dur) var(--bm-ease) both; }
.swiper-slide-active .bm-hero-titulo .bm-l:nth-child(1) > span { animation-delay: 90ms; }
.swiper-slide-active .bm-hero-titulo .bm-l:nth-child(2) > span { animation-delay: 180ms; }
.swiper-slide-active .bm-hero-titulo .bm-l:nth-child(3) > span { animation-delay: 270ms; }
.bm-hero-etiqueta { overflow: hidden; }
.bm-hero-etiqueta .elementor-heading-title { display: block; }
.swiper-slide-active .bm-hero-aparece { animation: bm-aparece var(--bm-dur) var(--bm-ease) both; }
.swiper-slide-active .bm-hero-bajada { animation-delay: 380ms; }
.swiper-slide-active .bm-hero-botones { animation-delay: 460ms; }
.swiper-slide-active .bm-hero-recuadro { animation: bm-zoom-entra var(--bm-dur) var(--bm-ease) 160ms both; }
@keyframes bm-linea { from { transform: translateY( 105% ); } to { transform: translateY( 0 ); } }
@keyframes bm-aparece { from { opacity: 0; transform: translateY( 20px ); } to { opacity: 1; transform: none; } }
@keyframes bm-zoom-entra { from { opacity: 0; transform: scale( 0.98 ); } to { opacity: 1; transform: none; } }

/* El punto activo del hero se llena durante el intervalo del slide. El
   relleno es un contenedor nativo (su color es un control); aqui solo va el
   tiempo. */
.carrusel-punto .bm-progreso-relleno { width: 0; animation: bm-llenar var(--bm-slide, 7000ms) linear forwards; }
@keyframes bm-llenar { from { width: 0; } to { width: 100%; } }

/* El video de fondo del hero ocupa la seccion sin empujar el contenido. */
.bm-hero-video { pointer-events: none; }
.bm-hero-video .elementor-wrapper,
.bm-hero-video .elementor-video { width: 100%; height: 100%; object-fit: cover; }
.bm-hero-video .elementor-wrapper { aspect-ratio: auto; }

/* ── Disposicion sin control nativo (sin colores) ─────────────
 * pista: tarjetas de ancho FIJO que desbordan con scroll-snap (Carousel.jsx);
 *   el Loop Grid reparte el ancho entre columnas iguales.
 * logos: fila que se parte y se centra con el ancho natural de cada logo.
 * medio: la foto llena su caja de proporcion fija (object-cover); el widget
 *   Imagen solo recorta con una altura fija.
 * ficha-cabecera: recorta el desborde horizontal del fondo a sangre.
 */
/* pista */
.bm-pista .elementor-loop-container {
        display: grid;
        grid-auto-flow: column;
        grid-template-columns: none;
        grid-auto-columns: var(--bm-item, 276px);
        gap: var(--bm-hueco, 16px);
        overflow-x: auto;
        overflow-y: hidden;
        overscroll-behavior-x: contain;
        scroll-snap-type: x proximity;
        scroll-behavior: smooth;
        scrollbar-width: none;
        padding: 8px 0;
     }
     .bm-pista .elementor-loop-container::-webkit-scrollbar { display: none; }
     .bm-pista .e-loop-item { scroll-snap-align: start; }
     .bm-ancho-276 { --bm-item: 276px; }
     .bm-ancho-240 { --bm-item: 240px; }
     .bm-ancho-236 { --bm-item: 236px; }
     .bm-ancho-168 { --bm-item: 168px; }
     .bm-hueco-16 { --bm-hueco: 16px; }
     .bm-hueco-20 { --bm-hueco: 20px; }

/* logos */
.bm-logos .elementor-loop-container {
        display: flex;
        flex-wrap: wrap;
        justify-content: center;
        align-items: center;
        column-gap: 56px;
        row-gap: 40px;
     }

/* medio */
.bm-medio.e-con { position: relative; }
     .bm-medio > .bm-foto { position: absolute; inset: 0; width: 100%; height: 100%; }
     .bm-medio > .bm-foto .elementor-widget-container,
     .bm-medio > .bm-foto img { width: 100%; height: 100%; }
     .bm-medio > .bm-foto img { object-fit: cover; object-position: center; display: block; }
     .bm-medio > .bm-foto.bm-foto-arriba img { object-position: top center; }

/* ficha-cabecera */
.bm-ficha.e-con { overflow-x: clip; }

/* ── Pistas: flechas ──────────────────────────────────────────
 * disabled:opacity-30 del React en los extremos, sin loop.
 */
/* Arriba, no centradas: en el React el boton tiene alto fijo (h-11) dentro
   de un flex items-stretch, asi que queda a la altura de la foto. */
.bm-pista-prev,
.bm-pista-next { cursor: pointer; align-self: flex-start; }
.bm-pista-prev.bm-inactiva,
.bm-pista-next.bm-inactiva { opacity: 0.3; pointer-events: none; }

/* ── Paneles ──────────────────────────────────────────────────
 * Buscador de la cabecera, panel de ayuda, filtros del catalogo en movil y
 * modulos del temario: el estado lo pone bm.js.
 */
body:not(.elementor-editor-active) .bm-buscador { display: none; }
body:not(.elementor-editor-active) .bm-buscador.bm-abierto { display: flex; }

body:not(.elementor-editor-active) .bm-ayuda-panel { display: none; }
body:not(.elementor-editor-active) .bm-ayuda.bm-abierta .bm-ayuda-panel { display: flex; }
.bm-ayuda .bm-ayuda-cerrar-grande { display: none; }
.bm-ayuda.bm-abierta .bm-ayuda-cerrar-grande { display: flex; }
.bm-ayuda.bm-abierta .bm-ayuda-abrir { display: none; }
.bm-ayuda-boton { cursor: pointer; }
.bm-ayuda .elementor-widget-button .elementor-button { width: 100%; }

@media ( max-width: 1023px ) {
	body:not(.elementor-editor-active) .bm-filtros { display: none; }
	body:not(.elementor-editor-active) .bm-filtros.bm-abierto { display: flex; }
}

/* Los selectores de modalidad y orden son un Form de un solo campo: el
   boton de envio no existe en el React (el cambio aplica al momento). */
.bm-selector .e-form__buttons { display: none; }
.bm-selector .elementor-field-group { margin-bottom: 0; }

/* Temario: la fila se abre y se cierra (el primero viene abierto). */
.bm-modulo-cabeza { cursor: pointer; }
.bm-modulo-flecha .elementor-icon { transition: transform var(--bm-dur) var(--bm-ease); }
.bm-modulo.bm-abierto .bm-modulo-flecha .elementor-icon { transform: rotate( 180deg ); }
.bm-modulo-cuerpo { display: grid; grid-template-rows: 0fr; transition: grid-template-rows var(--bm-dur) var(--bm-ease); }
.bm-modulo.bm-abierto .bm-modulo-cuerpo { grid-template-rows: 1fr; }
.bm-modulo-cuerpo > * { overflow: hidden; min-height: 0; }

/* Lista de lecciones del temario: el SVG en linea del tag hereda el color. */
.bm-lista-lecciones ul { list-style: none; margin: 0; padding: 0; }
.bm-lista-lecciones li { display: flex; align-items: center; gap: 12px; }
.bm-lista-lecciones li + li { margin-top: 12px; }
.bm-lista-lecciones svg { width: 14px; height: 14px; flex-shrink: 0; }

/* Beneficios de un plan: una linea por beneficio, con el check. */
.bm-lista-checks ul { list-style: none; margin: 0; padding: 0; }
.bm-lista-checks li { display: flex; align-items: flex-start; gap: 12px; }
.bm-lista-checks li + li { margin-top: 12px; }
.bm-lista-checks svg { width: 15px; height: 15px; flex-shrink: 0; margin-top: 4px; color: var(--e-global-color-accent); }

/* Tarjeta de plan: el boton que no toca segun la casilla del plan. */
.e-loop-item:not(.bm-destacado) .bm-plan-etiqueta { display: none; }
.e-loop-item:not(.bm-bloqueado) .bm-plan-bloqueado { display: none; }
.e-loop-item.bm-bloqueado .bm-plan-contacto { display: none; }
.bm-plan-bloqueado .elementor-button { cursor: not-allowed; }

/* Marcador de foto pendiente (Placeholder.jsx): solo donde no hay foto. */
.bm-marcador, .bm-marcador-ficha { display: none; }
.e-loop-item.bm-sin-foto .bm-marcador,
body.bm-ficha-sin-foto .bm-marcador-ficha { display: flex; }
.bm-sin-linkedin .bm-linkedin,
.bm-sin-bandera .bm-bandera { display: none; }

.e-loop-item:first-of-type .bm-cifra-chevron { display: none; }

/* «Módulo 1 · » + «00:42:10»: el espacio final de la primera pieza cuenta. */
.bm-espacio-final .elementor-heading-title { white-space: pre; }

/* Texto largo de la ficha y del articulo: parrafos separados 16 px (space-y-4). */
.bm-prosa p { margin: 0 0 16px; }
.bm-prosa p:last-child { margin-bottom: 0; }

/* El icono en linea que pinta un tag del tema (la cifra, la bandera). */
.bm-icono-linea svg { width: 1em; height: 1em; display: block; }

/* El chevron de «Cursos» gira al abrir el panel (group-hover:rotate-180). */
.bm-menu .e-n-menu-dropdown-icon svg { transition: transform var(--bm-dur) var(--bm-ease); }
.bm-menu .e-n-menu-title[aria-expanded="true"] .e-n-menu-dropdown-icon svg,
.bm-menu .e-n-menu-item:hover .e-n-menu-dropdown-icon svg { transform: rotate( 180deg ); }

/* Areas del panel de «Cursos»: una sola lista en dos columnas que se llenan
   por filas (grid-cols-2 del React). En movil, una columna. */
@media ( min-width: 1024px ) {
	.bm-areas .elementor-icon-list-items { display: grid; grid-template-columns: 1fr 1fr; column-gap: 16px; }
	.bm-areas .elementor-icon-list-item { margin: 0; }
}

/* El menu movil lleva al final el aula virtual y el carrito (bm.js los
   muda dentro del desplegable del widget Menú). */
.bm-menu-cta { display: none; }
.e-n-menu-wrapper .bm-menu-cta { display: flex; }
@media ( min-width: 1024px ) {
	.e-n-menu-wrapper .bm-menu-cta { display: none; }
}

@media ( prefers-reduced-motion: reduce ) {
	:root { --bm-dur: 1ms; }
	.bm-anim [class*="bm-revela-"],
	.bm-anim .bm-rejilla .e-loop-item,
	.bm-anim .bm-escalona > * { opacity: 1; transform: none; }
	.swiper-slide-active .bm-hero-titulo .bm-l > span,
	.swiper-slide-active .bm-hero-etiqueta .elementor-heading-title,
	.swiper-slide-active .bm-hero-aparece,
	.swiper-slide-active .bm-hero-recuadro { animation: none; }
	.carrusel-punto .bm-progreso-relleno { animation: none; width: 100%; }
	.bm-medio:hover .bm-zoom, .bm-grupo:hover .bm-zoom { transform: none; }
}