/*
 * 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; }

/* ── Estados que alterna comportamiento.js (solo mostrar/ocultar) ── */

/* Menu movil: cerrado hasta que se abre; la X solo con el menu abierto. */
body:not(.elementor-editor-active) .kit-menu-movil { visibility: hidden; opacity: 0; transform: translate3d(0, -8px, 0); transition: opacity .4s cubic-bezier(.16,1,.3,1), transform .4s cubic-bezier(.16,1,.3,1), visibility 0s linear .4s; }
body:not(.elementor-editor-active) .kit-menu-movil.is-open { visibility: visible; opacity: 1; transform: none; transition-delay: 0s; }
html:not(.kit-menu-abierto) .kit-menu-cerrar, html.kit-menu-abierto .kit-menu-abrir { display: none; }
html.kit-menu-abierto, html.kit-menu-abierto body { overflow: hidden; }
.kit-menu-movil .sub-menu { display: none !important; position: static !important; }
.kit-menu-movil .kit-abierto > .sub-menu { display: block !important; }


/* Acordeon: el cuerpo solo en el item abierto; el indicador gira. */
.kit-acordeon .e-loop-item:not(.is-open) .kit-acordeon-cuerpo { display: none; }
.kit-acordeon .kit-acordeon-cabecera { cursor: pointer; }
.kit-acordeon .e-loop-item.is-open .kit-acordeon-indicador svg { transform: rotate(180deg); }

/* Plegable: lo que va despues del primer parrafo, y un boton u otro. */
.kit-plegable:not(.is-open) .kit-plegable-resto p:not(:first-child) { display: none; }
.kit-plegable:not(.is-open) .kit-plegable-menos, .kit-plegable.is-open .kit-plegable-mas { display: none; }

/* Volver arriba y chat flotante. */
body:not(.elementor-editor-active) .kit-arriba:not(.is-visible) { opacity: 0; pointer-events: none; transform: translate3d(0, 12px, 0); }
.kit-arriba { transition: opacity .6s cubic-bezier(.16,1,.3,1), transform .6s cubic-bezier(.16,1,.3,1); }
body:not(.elementor-editor-active) .kit-chat:not(.is-open) .kit-chat-panel { visibility: hidden; opacity: 0; transform: translate3d(0, 12px, 0) scale(.96); pointer-events: none; }
.kit-chat-panel { transform-origin: bottom right; transition: opacity .6s cubic-bezier(.16,1,.3,1), transform .6s cubic-bezier(.16,1,.3,1); }
.kit-chat { pointer-events: none; }
.kit-chat > * { pointer-events: auto; }

/* Campo oculto por una opcion del formulario. */
.elementor-field-group[hidden] { display: none !important; }
/* SmartMenus fija min/max-width en linea a cada submenu; en el menu movil
   el submenu es un acordeon y ocupa el ancho de su item. */
.kit-menu-movil .sub-menu { width: auto !important; min-width: 0 !important; max-width: none !important; }

/* Carrusel con la clase carrusel-solo-si-desborda: sin navegacion cuando
   todo cabe en una pagina (el React oculta flechas y puntos si no hay
   desplazamiento). data-carrusel-paginas lo pone carrusel-nav.js. */
.carrusel.carrusel-solo-si-desborda:is([data-carrusel-paginas="1"], [data-carrusel-desborda="0"]) .carrusel-nav { display: none; }

/* WooCommerce pone display en linea a «Limpiar» de las variaciones; en
   la ficha no existe (el React no tiene ese control). */
.kit-inscripcion .reset_variations { display: none !important; }
.kit-inscripcion .woocommerce-variation.single_variation { display: none !important; }
/* Fila de atributo oculta por kit-dependiente (comportamiento.js). */
.kit-dependiente table.variations tr[hidden] { display: none !important; }