/*
 * sd.css — comportamiento y disposicion de SEMDRIA ACADEMY.
 * SIN colores ni familias tipograficas: esos viven en los globales de
 * Elementor y, cuando no hay control nativo, en formas.php con tokens.
 */

/* Textos con saltos de linea escritos en el campo (bajadas, horario, lecciones). */
.sd-saltos .elementor-heading-title { white-space: pre-line; }

/* Tarjetas de las rejillas: llenan su celda para que la fila quede pareja. */
.sd-rejilla .e-loop-item { height: 100%; }
.sd-rejilla .e-loop-item > .e-con { height: 100%; }

/* Filtros TODO / CATEGORÍA: la lista baja deslizando al pasar o al enfocar,
   y la flecha gira. */
.sd-desplegable { cursor: pointer; }
.sd-desplegable > .sd-lista {
	opacity: 0; visibility: hidden; transform: translateY(-10px);
	transition: opacity .25s ease, transform .25s ease, visibility 0s linear .25s;
}
.sd-desplegable:hover > .sd-lista,
.sd-desplegable:focus-within > .sd-lista,
.sd-desplegable.sd-abierto > .sd-lista {
	opacity: 1; visibility: visible; transform: translateY(0);
	transition: opacity .25s ease, transform .25s ease, visibility 0s;
}
.sd-desplegable .elementor-widget-icon svg { transition: transform .3s ease; }
.sd-desplegable:hover .elementor-widget-icon svg,
.sd-desplegable.sd-abierto .elementor-widget-icon svg { transform: rotate(180deg); }
.sd-lista .sd-opcion { transition: background-color .2s ease; }
.sd-desplegable .sd-opcion .elementor-heading-title a { display: block; }

/* Buscador de la cabecera: lo abre la lupa (sd.js). */
.sd-buscador { display: none !important; }
.sd-buscador.sd-visible { display: flex !important; }
.sd-abrir-buscador { cursor: pointer; }

/* Temario: cada modulo se abre y se cierra con un deslizamiento (sd.js). */
.sd-modulo .sd-modulo-cabecera { cursor: pointer; transition: background-color .2s; }
.sd-modulo .sd-modulo-cuerpo { display: none !important; }
.sd-modulo.sd-abierto .sd-modulo-cuerpo { display: flex !important; }
.sd-modulo .sd-solo-abierto { display: none; }
.sd-modulo.sd-abierto .sd-solo-abierto { display: block; }
.sd-modulo.sd-abierto .sd-solo-cerrado { display: none; }
.sd-modulo-sub .elementor-heading-title { margin-bottom: 2px; }

/* Cifras de la trayectoria: la primera no lleva barra a la izquierda. */
.sd-cifras .e-loop-item:first-child .sd-cifra { border-left-width: 0; }
@media (max-width: 767px) { .sd-cifras .sd-cifra { border-left-width: 0; } }

/* Formulario con campos de linea (ficha): sin relleno lateral. */
.sd-form-linea .elementor-field-group .elementor-field:not(.elementor-select-wrapper) { padding-left: 0; padding-right: 0; }
.sd-form-propuesta textarea { min-height: 104px; }

/* Parrafos del contenido largo: el separador del PDF entre parrafos. */
.sd-prosa p, .sd-resena p { margin: 0 0 1.25em; }
.sd-prosa p:last-child, .sd-resena p:last-child { margin-bottom: 0; }

/* El boton flotante de WhatsApp no tapa el contenido al imprimir. */
@media print { .sd-whatsapp { display: none; } }

/* Carrito, pago y cuenta: el ancho de lectura de los bloques nativos. */
.sd-tienda .woocommerce { max-width: 1100px; margin: 0 auto; }

/* Fotos enlazadas que llenan su tarjeta: el <a> del widget Imagen es
   inline-block y el ancho del 100 % de la foto quedaba en ciclo (334 de 372). */
.sd-img-llena a { display: block; }

/* «AÑADIR AL CARRITO» de la ficha: el formulario nativo de WooCommerce no
   tiene control de icono. El carrito del PDF va como mascara y toma el color
   del texto del boton (que si se edita en el panel). */
.sd-comprar-ficha .single_add_to_cart_button::before {
	content: ''; display: inline-block; vertical-align: -0.3em; margin-right: 6px;
	width: 1.35em; height: 1.35em; background-color: currentColor;
	-webkit-mask: url(../img/carrito-boton.svg) center / contain no-repeat; mask: url(../img/carrito-boton.svg) center / contain no-repeat;
}
.sd-comprar-ficha form.cart { margin: 0; }


/* ═══ Interactividad ═══════════════════════════════════════
   Solo movimiento: los colores de los estados hover son controles nativos
   (o formas.php con tokens). */

html { scroll-behavior: smooth; }

/* Fotos que se acercan al pasar por su tarjeta. */
.sd-zoom img { transition: transform .7s cubic-bezier(.2,.7,.2,1); will-change: transform; }
.sd-grupo:hover .sd-zoom img { transform: scale(1.08); }
.sd-zoom .elementor-widget-container, .sd-zoom > a { overflow: hidden; display: block; }
.sd-tarjeta-curso .sd-zoom, .sd-tarjeta-curso .e-con:first-child { overflow: hidden; }

/* Botones con flecha: la flecha avanza al pasar. */
.sd-boton .elementor-button-icon { transition: transform .3s ease; }
.sd-boton .elementor-button:hover .elementor-button-icon { transform: translateX(5px); }
.sd-boton .elementor-button:active { transform: scale(.97); }
.sd-boton .elementor-button { transition: transform .15s ease; }

/* Areas: el circulo crece y el icono se inclina. */
.sd-area .sd-area-circulo { transition: transform .45s cubic-bezier(.2,.7,.2,1); }
.sd-area:hover .sd-area-circulo { transform: scale(1.07); }
.sd-area .sd-area-circulo img { transition: transform .45s ease; }
.sd-area:hover .sd-area-circulo img { transform: rotate(-6deg) scale(1.05); }

/* Proximos inicios: la flecha avanza al pasar por la tarjeta. */
.sd-proximo .sd-flecha-mueve .elementor-icon { transition: transform .3s ease, background-color .3s, color .3s; }
.sd-proximo:hover .sd-flecha-mueve .elementor-icon { transform: translateX(6px); }

/* «NUEVO» late suavemente. */
.sd-latido { animation: sd-latido 2.2s ease-in-out infinite; }
@keyframes sd-latido { 0%, 100% { transform: scale(1); } 50% { transform: scale(1.1); } }

/* Para empresas: la barra amarilla se alarga al pasar. */
.sd-empresa .sd-barra-crece { transition: width .5s cubic-bezier(.2,.7,.2,1); }
.sd-empresa:hover .sd-barra-crece { --width: 150px; width: 150px; }

/* «Conoce más» se llena al pasar por toda la tarjeta (color en formas.php). */
.sd-formacion .elementor-button { transition: background-color .35s, color .35s; }

/* Cabecera fija: al bajar se compacta y el logo se achica. */
.sd-cabecera .sd-cabecera-fila { transition: min-height .35s ease; }
.sd-cabecera .sd-logo img { transition: width .35s ease; }
.sd-cabecera.elementor-sticky--effects .sd-cabecera-fila { --min-height: 78px; min-height: 78px; }
@media (min-width: 1025px) { .sd-cabecera.elementor-sticky--effects .sd-logo img { width: 160px; } }

/* Rejillas: las tarjetas de una fila entran en cascada. */
.sd-rejilla .e-loop-item:nth-child(4n+2) > .animated { animation-delay: .1s; }
.sd-rejilla .e-loop-item:nth-child(4n+3) > .animated { animation-delay: .2s; }
.sd-rejilla .e-loop-item:nth-child(4n+4) > .animated { animation-delay: .3s; }

/* Contadores de la trayectoria: el numero no salta de ancho al contar. */
.sd-contador .elementor-heading-title { font-variant-numeric: tabular-nums; }

/* Quien pide menos movimiento en su sistema, no lo recibe. */
@media (prefers-reduced-motion: reduce) {
	html { scroll-behavior: auto; }
	*, *::before, *::after { animation-duration: .01ms !important; animation-iteration-count: 1 !important; transition-duration: .01ms !important; }
	.elementor-invisible { visibility: visible !important; opacity: 1 !important; }
}

/* Entradas laterales con recorrido corto. Las de fabrica de Elementor
   (fadeInLeft / fadeInRight) desplazan el 100 % del ancho del elemento: un
   bloque ancho asoma fuera de la pantalla mientras entra y la pagina gana
   scroll horizontal por un instante. 48 px se ve igual de vivo y no se sale. */
.elementor-element.animated.fadeInRight { animation-name: sd-entra-derecha; }
.elementor-element.animated.fadeInLeft  { animation-name: sd-entra-izquierda; }
@keyframes sd-entra-derecha   { from { opacity: 0; transform: translate3d(48px, 0, 0); }  to { opacity: 1; transform: none; } }
@keyframes sd-entra-izquierda { from { opacity: 0; transform: translate3d(-48px, 0, 0); } to { opacity: 1; transform: none; } }
/* En tablet y movil casi todo ocupa el ancho completo: cualquier entrada
   lateral asoma por el borde. Ahi las laterales suben desde abajo. */
@media (max-width: 1024px) {
	.elementor-element.animated.fadeInRight,
	.elementor-element.animated.fadeInLeft { animation-name: sd-entra-arriba; }
}
@keyframes sd-entra-arriba { from { opacity: 0; transform: translate3d(0, 32px, 0); } to { opacity: 1; transform: none; } }


/* ═══ Entradas al hacer scroll: suaves y sin parpadeo ═══════
   1) fill-mode BACKWARDS: durante el retraso (la cascada de tarjetas o el
      «retraso» del panel) el elemento se queda en el PRIMER fotograma,
      invisible. Sin esto se veia en su sitio, desaparecia al arrancar la
      animacion y volvia a entrar.
   2) Recorridos cortos: las de fabrica (animate.css) desplazan el 100 % de
      la altura del elemento y el zoom parte del 30 %; en tarjetas grandes
      eso es un salto, no una entrada. */
.elementor-element.animated {
	animation-duration: .8s;
	animation-timing-function: cubic-bezier(.22, .61, .36, 1);
	/* BACKWARDS, no both: durante el retraso se queda en el primer fotograma
	   (invisible, sin parpadeo) y al terminar SUELTA el elemento. Con «both» el
	   ultimo fotograma (transform: none) quedaba fijo y anulaba la elevacion y
	   el zoom del hover. */
	animation-fill-mode: backwards;
}
.elementor-element.animated.fadeIn     { animation-name: sd-funde; }
.elementor-element.animated.fadeInUp   { animation-name: sd-sube; }
.elementor-element.animated.fadeInDown { animation-name: sd-baja; }
.elementor-element.animated.zoomIn     { animation-name: sd-acerca; }
@keyframes sd-funde   { from { opacity: 0; } to { opacity: 1; } }
@keyframes sd-sube    { from { opacity: 0; transform: translate3d(0, 28px, 0); }  to { opacity: 1; transform: none; } }
@keyframes sd-baja    { from { opacity: 0; transform: translate3d(0, -24px, 0); } to { opacity: 1; transform: none; } }
@keyframes sd-acerca  { from { opacity: 0; transform: scale(.94); }               to { opacity: 1; transform: none; } }

/* Carrusel de portada: los textos entran cada vez que su diapositiva se
   activa (no una sola vez: las copias que Swiper crea para el bucle nunca
   recibirian la animacion de Elementor y su texto quedaria oculto). */
.swiper-slide .sd-slide-txt { opacity: 0; }
.swiper-slide-active .sd-slide-txt { animation: sd-sube .8s cubic-bezier(.22,.61,.36,1) both; } /* aqui si «both»: el texto no tiene hover */
.swiper-slide-active .sd-slide-txt:nth-child(1) { animation-name: sd-baja; }
.swiper-slide-active .sd-slide-txt:nth-child(2) { animation-delay: .2s; }
.swiper-slide-active .sd-slide-txt:nth-child(3) { animation-name: sd-acerca; animation-delay: .4s; }
.swiper-slide-active .sd-slide-txt:nth-child(4) { animation-name: sd-acerca; animation-delay: .55s; }
/* Puntos del carrusel de portada: un poco mas arriba del borde, con una sombra
   que los separa de fotos claras; el activo se alarga. El color sale del panel. */
.sd-portada-carrusel .swiper-pagination.swiper-pagination-horizontal { translate: 0 -24px; }
@media (max-width: 767px) { .sd-portada-carrusel .swiper-pagination.swiper-pagination-horizontal { translate: 0 -14px; } }
.sd-portada-carrusel .swiper-pagination-bullet { opacity: .7; box-shadow: 0 1px 4px rgba(0,0,0,.45); transition: width .3s ease, opacity .3s ease; }
.sd-portada-carrusel .swiper-pagination-bullet:hover { opacity: .85; }
.sd-portada-carrusel .swiper-pagination-bullet-active { opacity: 1; width: 30px; border-radius: 6px; }

/* Precio con descuento («S/. 870 Antes S/. 1,450»): el que se paga va primero
   y en negrita; el de antes, mas chico y tachado (sd-runtime.php). */
.sd-precio-oferta ins { text-decoration: none; font-weight: 700; }
.sd-precio-antes { margin-left: .4em; font-size: .85em; opacity: .7; white-space: nowrap; }
@media (prefers-reduced-motion: reduce) { .swiper-slide .sd-slide-txt { opacity: 1; } }

/* «Nuestros clientes»: carrusel continuo e infinito. La tira de logos se
   duplica (sd.js) y se desplaza la mitad de su ancho en bucle: al terminar,
   la copia ocupa exactamente el lugar del original y el salto no se ve. El
   recorte del widget es el del propio carrusel. */
.sd-marquesina { overflow: hidden; -webkit-mask-image: linear-gradient(90deg, transparent, #000 6%, #000 94%, transparent); mask-image: linear-gradient(90deg, transparent, #000 6%, #000 94%, transparent); }
.sd-marquesina.sd-marquesina-activa .elementor-loop-container {
	display: flex !important; flex-wrap: nowrap; width: max-content; gap: 0 !important;
	animation: sd-marquesina var(--sd-marquesina-duracion, 30s) linear infinite;
}
.sd-marquesina.sd-marquesina-activa .e-loop-item { flex: none; width: 260px; margin-right: 22px; }
.sd-marquesina.sd-marquesina-activa:hover .elementor-loop-container { animation-play-state: paused; }
@keyframes sd-marquesina { from { transform: translate3d(0, 0, 0); } to { transform: translate3d(-50%, 0, 0); } }
@media (max-width: 767px) { .sd-marquesina.sd-marquesina-activa .e-loop-item { width: 170px; margin-right: 16px; } }
@media (prefers-reduced-motion: reduce) { .sd-marquesina.sd-marquesina-activa .elementor-loop-container { animation: none; } }

/* Carrito de la tarjeta: el icono de Elementor es inline-block y deja un
   hueco de linea base debajo; asi el boton cuadrado queda centrado con
   «Comprar» y del mismo alto. */
.sd-al-carrito .elementor-icon-wrapper { display: flex; line-height: 0; }

/* WhatsApp: ventana de chat del boton flotante. El contenedor no recibe el
   raton (asi su caja invisible no tapa la pagina); solo el boton y la ventana
   abierta. La abre sd.js (clase sd-abierto) al pasar por el boton o con un
   toque, y queda abierta mientras el raton cruza a la ventana o se escribe. */
.sd-wa { pointer-events: none; }
.sd-wa .sd-whatsapp { pointer-events: auto; }
.sd-wa .sd-wa-panel {
	opacity: 0; visibility: hidden; pointer-events: none;
	transform: translateY(12px) scale(.97); transform-origin: bottom right;
	transition: opacity .22s ease .25s, transform .22s ease .25s, visibility 0s linear .47s;
}
.sd-wa.sd-abierto .sd-wa-panel {
	opacity: 1; visibility: visible; pointer-events: auto; transform: none;
	transition: opacity .25s ease, transform .25s cubic-bezier(.2,.7,.2,1), visibility 0s;
}
.sd-wa.sd-cerrado-a-mano .sd-wa-panel { opacity: 0; visibility: hidden; pointer-events: none; }
.sd-wa-cerrar { cursor: pointer; line-height: 1; padding: 0 4px; }
.sd-wa-rapida .elementor-button { white-space: normal; text-align: left; }
.sd-wa-form .elementor-field-group { margin-bottom: 0; }
.sd-wa-form .elementor-message { display: none; }
@media (prefers-reduced-motion: reduce) { .sd-wa .sd-wa-panel { transition: none; } }

/* Titulo de la ficha: se achica segun el largo del nombre (clase del body,
   sd-runtime.php). Parte del tamaño del estilo global «fichatitulo», asi
   cambiarlo en el panel sigue mandando. */
body.sd-titulo-m .elementor .sd-ficha-titulo.elementor-widget-heading .elementor-heading-title { font-size: calc(var(--e-global-typography-fichatitulo-font-size) * .82); line-height: 1.1; }
body.sd-titulo-l .elementor .sd-ficha-titulo.elementor-widget-heading .elementor-heading-title { font-size: calc(var(--e-global-typography-fichatitulo-font-size) * .66); line-height: 1.15; }
body.sd-titulo-xl .elementor .sd-ficha-titulo.elementor-widget-heading .elementor-heading-title { font-size: calc(var(--e-global-typography-fichatitulo-font-size) * .52); line-height: 1.18; }
@media (max-width: 767px) {
	body.sd-titulo-l .elementor .sd-ficha-titulo.elementor-widget-heading .elementor-heading-title { font-size: calc(var(--e-global-typography-fichatitulo-font-size) * .74); }
	body.sd-titulo-xl .elementor .sd-ficha-titulo.elementor-widget-heading .elementor-heading-title { font-size: calc(var(--e-global-typography-fichatitulo-font-size) * .62); }
}