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

/* ══ Juristas Asesores ════════════════════════════════════════════
 * Movimiento del React (tokens.css + motion.css): una duración y una curva
 * para toda la web; en móvil entradas más cortas. Sin colores aquí.
 */
:root { --ju-dur: 640ms; --ju-ease: cubic-bezier(0.16, 1, 0.3, 1); --ju-stagger: 80ms; --ju-dist: 24px; }
@media (max-width: 767px) { :root { --ju-dur: 400ms; --ju-stagger: 60ms; --ju-dist: 12px; } }
html { scroll-behavior: auto; }
html.ju-sin-scroll { overflow: hidden; }
[id] { scroll-margin-top: 96px; }
[hidden] { display: none !important; }

/* ── Entradas al viewport, una sola vez (motion.css). Solo con JS (html.ju-js): si el JS falla, todo se ve. */
.ju-rv { transition: opacity var(--ju-dur) var(--ju-ease), transform var(--ju-dur) var(--ju-ease), clip-path var(--ju-dur) var(--ju-ease);
  transition-delay: calc(var(--i, 0) * var(--ju-stagger)); }
.ju-rv.ju-rv-hecho { transition-delay: 0ms; }
.ju-i1 { --i: 1; } .ju-i2 { --i: 2; } .ju-i3 { --i: 3; } .ju-i4 { --i: 4; } .ju-i5 { --i: 5; } .ju-i6 { --i: 6; } .ju-i7 { --i: 7; } .ju-i8 { --i: 8; } .ju-i9 { --i: 9; } .ju-i10 { --i: 10; }
.ju-js .ju-rv:not(.is-in):not(.ju-rv-wipe-left):not(.ju-rv-wipe-right):not(.ju-rv-tile):not(.ju-rv-draw) { opacity: 0; }
.ju-js .ju-rv-up:not(.is-in) { transform: translate3d(0, var(--ju-dist), 0); }
.ju-js .ju-rv-left:not(.is-in) { transform: translate3d(calc(var(--ju-dist) * -1.5), 0, 0); }
.ju-js .ju-rv-right:not(.is-in) { transform: translate3d(calc(var(--ju-dist) * 1.5), 0, 0); }
.ju-js .ju-rv-zoom:not(.is-in) { transform: scale(.96); }
/* Revelado por máscara desde la costura — momento de impacto */
.ju-js .ju-rv-wipe-left:not(.is-in) { clip-path: inset(0 0 0 100%); }
.ju-js .ju-rv-wipe-right:not(.is-in) { clip-path: inset(0 100% 0 0); }
.ju-js .ju-rv-tile:not(.is-in) { clip-path: inset(0 100% 100% 0); }
@media (max-width: 767px) {
  .ju-js .ju-rv-wipe-left:not(.is-in), .ju-js .ju-rv-wipe-right:not(.is-in), .ju-js .ju-rv-tile:not(.is-in) { clip-path: none; opacity: 0; }
}

/* ── Slider de inicio (HeroSlider.jsx): diapositivas apiladas en fundido ── */
.ju-hero { position: relative; }
.ju-hero-pila, .ju-hero-pila > .elementor-widget-container { position: absolute; inset: 0; width: 100%; height: 100%; }
.elementor .ju-hero-pila .elementor-loop-container.elementor-grid { display: grid; grid-template-columns: minmax(0, 1fr); grid-template-rows: minmax(0, 1fr); height: 100%; }
.elementor .ju-hero-pila .elementor-loop-container > .e-loop-item { grid-area: 1 / 1 / 2 / 2; }
.ju-hero-pila .e-loop-item { min-width: 0; opacity: 0; visibility: hidden;
  transition: opacity var(--ju-dur) var(--ju-ease), visibility 0s linear var(--ju-dur); }
.ju-hero-pila .e-loop-item.is-activa { opacity: 1; visibility: visible; transition: opacity var(--ju-dur) var(--ju-ease); }
.ju-hero:not([data-carrusel-listo]) .ju-hero-pila .e-loop-item:first-child { opacity: 1; visibility: visible; }
.ju-hero-pila .e-loop-item > .e-con { height: 100%; }
.ju-hero-img { position: absolute !important; inset: 0; width: 100%; height: 100%; margin: 0 !important; }
.ju-hero-img .elementor-widget-container, .ju-hero-img img { width: 100%; height: 100%; object-fit: cover; }
.ju-hero-img img { transform: scale(1.06); transition: transform var(--ju-dur) var(--ju-ease); }
.is-activa .ju-hero-img img { transform: none; }
.ju-diapositiva .elementor-element:not(.ju-hero-img) { position: relative; z-index: 1; }
.ju-linea { display: block; overflow: hidden; padding-bottom: .08em; margin-bottom: -.08em; }
.ju-linea > span { display: block; transform: translateY(105%); transition: transform var(--ju-dur) var(--ju-ease);
  transition-delay: calc(160ms + var(--l, 0) * var(--ju-stagger) * 1.5); }
.is-activa .ju-linea > span, .elementor-editor-active .ju-linea > span { transform: none; }
.ju-hero-fade { opacity: 0; transform: translateY(var(--ju-dist)); transition: opacity var(--ju-dur) var(--ju-ease), transform var(--ju-dur) var(--ju-ease); }
.ju-hero-d1 { transition-delay: 80ms; } .ju-hero-d2 { transition-delay: 480ms; }
.is-activa .ju-hero-fade, .elementor-editor-active .ju-hero-fade { opacity: 1; transform: none; }
.ju-hero-puntos .carrusel-punto { cursor: pointer; }
.ju-punto-linea { transition: background-color var(--ju-dur) var(--ju-ease), min-height var(--ju-dur) var(--ju-ease); }

/* ── Cabecera: alto y barra superior que se recogen al bajar (Header.jsx) ── */
.ju-cabecera { transition: background-color var(--ju-dur) var(--ju-ease), box-shadow var(--ju-dur) var(--ju-ease); }
.ju-cab-barra { overflow: hidden; transition: min-height var(--ju-dur) var(--ju-ease), opacity var(--ju-dur) var(--ju-ease), border-color var(--ju-dur) var(--ju-ease); }
.ju-cab-fila { transition: min-height var(--ju-dur) var(--ju-ease); }
@media (min-width: 1025px) {
  .ju-cabecera.ju-solida .ju-cab-barra { min-height: 0; height: 0; opacity: 0; border-width: 0; }
  .ju-cabecera.ju-solida .ju-cab-fila { min-height: 72px; }
}
@media (min-width: 768px) and (max-width: 1024px) { .ju-cabecera.ju-solida .ju-cab-fila { min-height: 72px; } }
.ju-logo { position: relative; }
.ju-logo .ju-logo-oscuro { position: absolute; inset: 0; opacity: 0; }
.ju-logo .elementor-widget-image { transition: opacity var(--ju-dur) var(--ju-ease); }
.ju-solida .ju-logo .ju-logo-claro { opacity: 0; }
.ju-solida .ju-logo .ju-logo-oscuro { opacity: 1; }
.ju-burger, .ju-mm-cerrar { cursor: pointer; }
.ju-cab-nav { align-self: stretch; }
.ju-cab-nav .elementor-widget-nav-menu, .ju-cab-nav .elementor-widget-nav-menu > .elementor-widget-container, .ju-cab-nav .elementor-nav-menu--main,
.ju-cab-nav .elementor-nav-menu, .ju-cab-nav .elementor-nav-menu > li { height: 100%; }
.ju-cab-nav .elementor-nav-menu > li > a { height: 100%; position: relative; }

/* ── Menú móvil (MobileMenu.jsx) ── */
.ju-mmenu { visibility: hidden; opacity: 0; transition: opacity var(--ju-dur) var(--ju-ease), visibility 0s linear var(--ju-dur); overscroll-behavior: contain; }
.ju-mmenu.is-abierto { visibility: visible; opacity: 1; transition: opacity var(--ju-dur) var(--ju-ease); }
.ju-mmenu .elementor-nav-menu > li, .ju-mmenu .ju-mm-pie { opacity: 0; transform: translateY(var(--ju-dist));
  transition: opacity var(--ju-dur) var(--ju-ease), transform var(--ju-dur) var(--ju-ease); transition-delay: calc(var(--i, 0) * var(--ju-stagger)); }
.ju-mmenu.is-abierto .elementor-nav-menu > li, .ju-mmenu.is-abierto .ju-mm-pie { opacity: 1; transform: none; }
.elementor-editor-active .ju-mmenu { visibility: visible; opacity: 1; position: relative !important; }

/* ── Filas desplegables (Accordion.jsx) ── */
.ju-acc-boton { cursor: pointer; }
.ju-acc-panel { max-height: 0; overflow: hidden; visibility: hidden; transition: max-height var(--ju-dur) var(--ju-ease), visibility 0s linear var(--ju-dur); }
.is-abierta .ju-acc-panel { max-height: 1600px; visibility: visible; transition: max-height var(--ju-dur) var(--ju-ease); }
.elementor-editor-active .ju-acc-panel { max-height: none; visibility: visible; }
.ju-acc-boton .ju-cuadro .elementor-icon { transition: transform var(--ju-dur) var(--ju-ease); }
.is-abierta .ju-acc-boton .ju-cuadro .elementor-icon { transform: rotate(45deg); }

/* ── Catálogo: panel de filtros plegable en móvil y tablet ── */
.ju-filtro { list-style: none; margin: 0; padding: 0; }
.ju-filtro-btn { cursor: pointer; display: flex; width: 100%; min-height: 44px; align-items: center; justify-content: space-between; gap: 16px; padding: 8px 0;
  text-align: left; background: none; border: 0; font: inherit; position: relative; transition: color var(--ju-dur) var(--ju-ease), padding-left var(--ju-dur) var(--ju-ease); }
.ju-filtro-btn:disabled { cursor: default; }
.ju-filtro-btn[aria-pressed="true"] { padding-left: 24px; }
@media (max-width: 1024px) {
  .ju-filtros-panel { max-height: 0; overflow: hidden; transition: max-height var(--ju-dur) var(--ju-ease); }
  .ju-filtros-panel.is-abierto { max-height: 2400px; }
  .elementor .elementor-element.ju-filtros-panel.is-abierto { --padding-top: 32px; }
  .ju-filtros-boton { cursor: pointer; }
}
@media (min-width: 1025px) { .ju-pegado { position: sticky; top: 120px; align-self: flex-start; } }

@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { transition-duration: 1ms !important; transition-delay: 0ms !important; animation: none !important; }
}

/* ── Piezas varias ── */
.ju-oculto { position: absolute !important; width: 1px; height: 1px; overflow: hidden; clip: rect(0, 0, 0, 0); white-space: nowrap; }
.ju-tachado .elementor-heading-title { text-decoration: line-through; }
.ju-sep { margin: 0 8px; }
.ju-sin-foto-icono { position: absolute !important; inset: 0; display: grid !important; place-items: center; z-index: 1; }
.e-loop-item:not(.ju-sin-foto) .ju-sin-foto-icono, .e-loop-item.ju-sin-foto .ju-consultor-img { display: none !important; }
.ju-buscar { display: flex; margin: 0; }
.ju-buscar .ju-campo { flex: 1 1 auto; min-width: 0; }
.ju-buscar-boton { flex: none; width: 56px; height: 56px; display: grid; place-items: center; border: 0; padding: 0; cursor: pointer; }
.ju-buscar-boton svg { width: 20px; height: 20px; fill: none; stroke: currentColor; stroke-width: 1.5; }
.ju-campo { width: 100%; min-height: 56px; padding: 16px; border: 0; border-bottom: 2px solid transparent; border-radius: 0; font: inherit; font-size: 15px; line-height: 1.5; appearance: none; }
.ju-select { position: relative; display: block; }
.ju-select select { min-height: 48px; padding: 12px 48px 12px 16px; cursor: pointer; }
.ju-filtros ul, .ju-filtros p { margin: 0; }
.screen-reader-text { position: absolute !important; width: 1px; height: 1px; overflow: hidden; clip: rect(0, 0, 0, 0); white-space: nowrap; }
/* ── Lo que se ve según el dato (clases de proyecto-runtime.php) ── */
.ju-sin-bloques .ju-solo-con-bloques, .ju-con-bloques .ju-solo-sin-bloques, .ju-sin-cierre .ju-solo-con-cierre { display: none !important; }
.ju-sin-preventa .ju-solo-preventa { display: none !important; }
.ju-bloque { display: block; }
.ju-cuadrada img { aspect-ratio: 1; width: 100%; object-fit: cover; }
.ju-volver .elementor-button { display: inline-flex; min-height: 44px; align-items: center; }
.ju-mapa, .ju-mapa > .elementor-widget-container, .ju-mapa .elementor-custom-embed { height: 100%; }
.ju-mapa iframe { width: 100%; height: 100%; display: block; border: 0; }
@media (max-width: 1024px) { .ju-mapa { position: absolute !important; inset: 0; } }
.ju-parrafos p { margin: 0 0 24px; } .ju-parrafos p:last-child { margin-bottom: 0; }
.ju-bio p { margin: 0 0 16px; max-width: 64ch; } .ju-bio p:last-child { margin-bottom: 0; }

/* ── Menú móvil: submenús en acordeón ── */
.ju-mm-lista .elementor-nav-menu > .menu-item-has-children { display: grid; grid-template-columns: minmax(0, 1fr) 48px; align-items: center; }
.ju-mm-lista .elementor-nav-menu > .menu-item-has-children > .sub-menu { grid-column: 1 / -1; position: static !important; display: block !important; width: auto !important;
  margin: 0 !important; max-height: 0; overflow: hidden; visibility: hidden; transition: max-height var(--ju-dur) var(--ju-ease), visibility 0s linear var(--ju-dur); }
.ju-mm-lista .elementor-nav-menu > .menu-item-has-children.is-abierto > .sub-menu { max-height: 720px; visibility: visible; transition: max-height var(--ju-dur) var(--ju-ease); }
.ju-mm-flecha { display: grid; place-items: center; width: 48px; height: 48px; padding: 0; border: 0; background: none; cursor: pointer; color: inherit; }
.ju-mm-flecha::before { content: ''; width: 22px; height: 22px; background: currentColor; transition: transform var(--ju-dur) var(--ju-ease); }
.is-abierto > .ju-mm-flecha::before { transform: rotate(180deg); }
/* Hello Elementor pinta todo <button> con borde, radio y fondo de hover propios:
   en estos controles manda el diseño del sitio (DEFAULTS.md). */
.ju-mm-flecha, .ju-mm-flecha:hover, .ju-mm-flecha:focus,
.ju-filtro-btn, .ju-filtro-btn:hover, .ju-filtro-btn:focus { background: none; border: 0; border-radius: 0; }
.ju-buscar-boton, .ju-buscar-boton:hover, .ju-buscar-boton:focus { border: 0; border-radius: 0; }

/* El Editor de texto hereda el margen inferior de párrafo del tema: el React no lo tiene en el último. */
.ju-parrafo p:last-child, .ju-parrafo ul:last-child { margin-bottom: 0; }