/*
 * comportamiento.css — SOLO comportamiento, cero diseno.
 *
 * Aqui no hay ni un color, ni un tamano, ni una separacion. Todo eso son
 * controles del panel de Elementor y el cliente tiene que poder cambiarlos.
 * Lo que hay aqui es lo que no se puede expresar como ajuste de widget:
 * ocultar las plantillas de clonado y hacer clicables los elementos.
 */

/* Las plantillas de punto existen para que el cliente las estilice en el
   editor; en el sitio publicado el JS las clona y no deben verse. */
.elementor-editor-active .carrusel-punto-plantilla { outline: 1px dashed currentColor; }
body:not(.elementor-editor-active) .carrusel-punto-plantilla { display: none !important; }

/* Si el JS no llego a montar (Swiper no aparecio), las plantillas se
   quedarian ocultas y la fila de puntos vacia. Mejor que se vean: un
   carrusel sin puntos es un fallo visible, no uno silencioso. */
body:not(.elementor-editor-active) .carrusel[data-carrusel-error] .carrusel-punto-plantilla { display: block !important; }

.carrusel-prev,
.carrusel-next,
.carrusel-punto { cursor: pointer; -webkit-user-select: none; user-select: none; }

.carrusel-prev:focus-visible,
.carrusel-next:focus-visible,
.carrusel-punto:focus-visible { outline: 2px solid currentColor; outline-offset: 2px; }

/* Extremos sin loop. La opacidad es lo minimo para que se note que no
   responde; si el diseno del React marca el estado de otra forma,
   maquetalo en Elementor y sobreescribe esto desde ahi. */
.carrusel-desactivada { opacity: .35; pointer-events: none; }

/* El relleno de la barra de progreso lo mueve el JS via style.width. */
.carrusel-progreso { overflow: hidden; }
.carrusel-progreso-relleno { transition: width .3s ease; }

/* ─────────────────────────────────────────────────────────────
   MentorIn Pharm — comportamiento que ningun widget da.
   Solo COMPORTAMIENTO y la geometria que ese comportamiento exige
   (regla 6): el contenido, los colores y la tipografia siguen
   saliendo de los controles nativos de Elementor, para que el
   cliente los pueda cambiar desde el panel.
   ───────────────────────────────────────────────────────────── */

/* Tarjetas de servicio con dos caras.
   Elementor no tiene un widget de tarjeta que gire, y el del demo
   (jet-animated-box) no existe en esta instalacion. Las dos caras son
   contenedores nativos y editables; aqui solo se apilan y se giran. */
.mp-flip { position: relative; perspective: 1400px; }

.mp-flip > .mp-flip-frente,
.mp-flip > .mp-flip-atras {
	backface-visibility: hidden;
	transition: transform .6s ease;
	transform-style: preserve-3d;
}
.mp-flip > .mp-flip-atras {
	position: absolute;
	inset: 0;
	transform: rotateY(180deg);
}
.mp-flip:hover > .mp-flip-frente,
.mp-flip:focus-within > .mp-flip-frente { transform: rotateY(-180deg); }
.mp-flip:hover > .mp-flip-atras,
.mp-flip:focus-within > .mp-flip-atras { transform: rotateY(0deg); }

/* La medalla del icono va montada sobre el borde superior de la tarjeta. */
.mp-flip > .elementor-widget-icon.mp-flip-medalla {
	position: relative;
	z-index: 2;
	/* La medalla mide 108 y monta sobre la tarjeta justo por su mitad,
	   como en el origen. */
	margin-bottom: -54px;
}
.mp-flip > .elementor-widget-icon.mp-flip-medalla .elementor-icon {
	/* Sombra medida en el origen: 0 12px 30px del azul de marca al 28 %. */
	box-shadow: 0 12px 30px rgba(0, 44, 83, .28);
}

/* En pantallas tactiles no hay hover. Apilar las dos caras deja la
   seccion el doble de larga y ensena dos veces lo mismo, que no es lo que
   muestra el diseno: se ve la cara frontal y se gira al TOCAR la tarjeta,
   con la clase que pone el JS. */
.mp-flip.mp-girada > .mp-flip-frente { transform: rotateY(-180deg); }
.mp-flip.mp-girada > .mp-flip-atras  { transform: rotateY(0deg); }

/* Temario del curso: acordeon.
   El primer modulo viene abierto, como en el origen. */
.mp-temario .mp-modulo .mp-modulo-cabecera { cursor: pointer; position: relative; }
.mp-temario .mp-modulo .mp-modulo-cabecera::after {
	content: "";
	position: absolute;
	right: 20px;
	top: 50%;
	width: 9px;
	height: 9px;
	margin-top: -6px;
	border-right: 2px solid currentColor;
	border-bottom: 2px solid currentColor;
	transform: rotate(45deg);
	transition: transform .25s ease;
	opacity: .55;
}
.mp-temario .mp-modulo.mp-abierto .mp-modulo-cabecera::after {
	transform: rotate(-135deg);
	margin-top: -2px;
}
.mp-temario .mp-modulo .mp-modulo-cuerpo { display: none; }
.mp-temario .mp-modulo.mp-abierto .mp-modulo-cuerpo { display: block; }
.mp-temario .mp-modulo .mp-modulo-cuerpo ul { margin: 0; padding-left: 18px; }

/* El chip naranja se ajusta a su texto.
   Un contenedor de Elementor ocupa el 100 % del ancho y ningun control del
   panel lo encoge de forma fiable, asi que en movil salia como una barra
   de lado a lado en vez de una pastilla. Aqui va SOLO la geometria: el
   color, el radio, el relleno y la tipografia siguen siendo controles
   nativos y editables. */
.e-con.mp-chip,
.e-con > .mp-chip {
	width: auto;
	max-width: 100%;
	flex: 0 0 auto;
	align-self: center;
}