.elementor-kit-4{--e-global-color-primary:#7B1A25;--e-global-color-secondary:#161616;--e-global-color-text:#4A4644;--e-global-color-accent:#F5F4F2;--e-global-color-ipeprdk:#5E141C;--e-global-color-ipeinkh:#2F2F2F;--e-global-color-ipefoot:#3A3A3A;--e-global-color-ipewhit:#FFFFFF;--e-global-color-ipegrcd:#DCDAD6;--e-global-color-ipegrsf:#EDEBE8;--e-global-color-ipegrhv:#E4E1DD;--e-global-color-ipettl:#6B6560;--e-global-color-ipemeta:#635D57;--e-global-color-ipebrdr:#E5E3E0;--e-global-color-ipeplat:#2B2726;--e-global-color-ipehead:#2A2624;--e-global-color-ipecard:#33302E;--e-global-color-ipechph:#D1CEC9;--e-global-color-ipewaps:#25D366;--e-global-color-ipewahv:#1FB855;--e-global-color-ipecorl:#006633;--e-global-color-ipeovl:rgba(0,0,0,0.6);--e-global-color-ipewh90:rgba(255,255,255,0.9);--e-global-color-ipewh70:rgba(255,255,255,0.7);--e-global-color-ipewh20:rgba(255,255,255,0.2);--e-global-typography-primary-font-family:"Mulish";--e-global-typography-primary-font-size:40px;--e-global-typography-primary-font-weight:700;--e-global-typography-primary-text-transform:uppercase;--e-global-typography-primary-line-height:1.05em;--e-global-typography-primary-letter-spacing:0em;--e-global-typography-secondary-font-family:"Mulish";--e-global-typography-secondary-font-size:26px;--e-global-typography-secondary-font-weight:400;--e-global-typography-secondary-line-height:1.25em;--e-global-typography-text-font-family:"Mulish";--e-global-typography-text-font-size:15px;--e-global-typography-text-font-weight:400;--e-global-typography-text-line-height:1.6em;--e-global-typography-accent-font-family:"Mulish";--e-global-typography-accent-font-size:13px;--e-global-typography-accent-font-weight:600;--e-global-typography-accent-line-height:1em;--e-global-typography-accent-letter-spacing:0.01em;--e-global-typography-ipetyeb-font-family:"Mulish";--e-global-typography-ipetyeb-font-size:18px;--e-global-typography-ipetyeb-font-weight:300;--e-global-typography-ipetyeb-text-transform:uppercase;--e-global-typography-ipetyeb-line-height:1.2em;--e-global-typography-ipetyeb-letter-spacing:0.06em;--e-global-typography-ipetyh1-font-family:"Mulish";--e-global-typography-ipetyh1-font-size:40px;--e-global-typography-ipetyh1-font-weight:700;--e-global-typography-ipetyh1-text-transform:uppercase;--e-global-typography-ipetyh1-line-height:1.05em;--e-global-typography-ipetyh1-letter-spacing:0em;--e-global-typography-ipetysc-font-family:"Mulish";--e-global-typography-ipetysc-font-size:30px;--e-global-typography-ipetysc-font-weight:300;--e-global-typography-ipetysc-text-transform:uppercase;--e-global-typography-ipetysc-line-height:1.2em;--e-global-typography-ipetysc-letter-spacing:0.01em;--e-global-typography-ipetyh2-font-family:"Mulish";--e-global-typography-ipetyh2-font-size:26px;--e-global-typography-ipetyh2-font-weight:400;--e-global-typography-ipetyh2-line-height:1.25em;--e-global-typography-ipetyh3-font-family:"Mulish";--e-global-typography-ipetyh3-font-size:17px;--e-global-typography-ipetyh3-font-weight:700;--e-global-typography-ipetyh3-line-height:1.35em;--e-global-typography-ipetycd-font-family:"Mulish";--e-global-typography-ipetycd-font-size:17px;--e-global-typography-ipetycd-font-weight:400;--e-global-typography-ipetycd-text-transform:uppercase;--e-global-typography-ipetycd-line-height:1.35em;--e-global-typography-ipetybd-font-family:"Mulish";--e-global-typography-ipetybd-font-size:15px;--e-global-typography-ipetybd-font-weight:400;--e-global-typography-ipetybd-line-height:1.6em;--e-global-typography-ipetymt-font-family:"Mulish";--e-global-typography-ipetymt-font-size:13px;--e-global-typography-ipetymt-font-weight:400;--e-global-typography-ipetymt-line-height:1.5em;--e-global-typography-ipetymc-font-family:"Mulish";--e-global-typography-ipetymc-font-size:11px;--e-global-typography-ipetymc-font-weight:600;--e-global-typography-ipetymc-text-transform:uppercase;--e-global-typography-ipetymc-line-height:1.2em;--e-global-typography-ipetymc-letter-spacing:0.08em;--e-global-typography-ipetybt-font-family:"Mulish";--e-global-typography-ipetybt-font-size:13px;--e-global-typography-ipetybt-font-weight:600;--e-global-typography-ipetybt-line-height:1em;--e-global-typography-ipetybt-letter-spacing:0.01em;--e-global-typography-ipetybg-font-family:"Mulish";--e-global-typography-ipetybg-font-size:34px;--e-global-typography-ipetybg-font-weight:700;--e-global-typography-ipetybg-line-height:1em;--e-global-typography-ipetybm-font-family:"Mulish";--e-global-typography-ipetybm-font-size:22px;--e-global-typography-ipetybm-font-weight:700;--e-global-typography-ipetybm-line-height:1em;--e-global-typography-ipetybs-font-family:"Mulish";--e-global-typography-ipetybs-font-size:12px;--e-global-typography-ipetybs-font-weight:600;--e-global-typography-ipetybs-line-height:1em;--e-global-typography-ipetybs-letter-spacing:0.01em;--e-global-typography-ipetybl-font-family:"Mulish";--e-global-typography-ipetybl-font-size:14px;--e-global-typography-ipetybl-font-weight:600;--e-global-typography-ipetybl-line-height:1em;--e-global-typography-ipetybl-letter-spacing:0.01em;--e-global-typography-ipetyb30-font-family:"Mulish";--e-global-typography-ipetyb30-font-size:30px;--e-global-typography-ipetyb30-font-weight:700;--e-global-typography-ipetyb30-line-height:1em;color:#4A4644;font-family:"Mulish", Sans-serif;font-size:15px;font-weight:400;line-height:1.6em;}.elementor-kit-4 e-page-transition{background-color:#FFBC7D;}.elementor-kit-4 a{color:#7B1A25;}.elementor-kit-4 a:hover{color:#5E141C;}.elementor-section.elementor-section-boxed > .elementor-container{max-width:1152px;}.e-con{--container-max-width:1152px;}.elementor-widget:not(:last-child){margin-block-end:20px;}.elementor-element{--widgets-spacing:20px 20px;--widgets-spacing-row:20px;--widgets-spacing-column:20px;}{}h1.entry-title{display:var(--page-title-display);}.site-header .site-branding{flex-direction:column;align-items:stretch;}.site-header{padding-inline-end:0px;padding-inline-start:0px;}.site-footer .site-branding{flex-direction:column;align-items:stretch;}@media(max-width:1024px){.elementor-kit-4{--e-global-typography-primary-font-size:34px;--e-global-typography-secondary-font-size:24px;--e-global-typography-ipetyeb-font-size:16px;--e-global-typography-ipetyh1-font-size:34px;--e-global-typography-ipetysc-font-size:26px;--e-global-typography-ipetyh2-font-size:24px;--e-global-typography-ipetyh3-font-size:16px;--e-global-typography-ipetycd-font-size:16px;}.elementor-section.elementor-section-boxed > .elementor-container{max-width:1024px;}.e-con{--container-max-width:1024px;}}@media(max-width:767px){.elementor-kit-4{--e-global-typography-primary-font-size:28px;--e-global-typography-secondary-font-size:21px;--e-global-typography-ipetyeb-font-size:14px;--e-global-typography-ipetyh1-font-size:28px;--e-global-typography-ipetysc-font-size:22px;--e-global-typography-ipetyh2-font-size:21px;--e-global-typography-ipetyh3-font-size:16px;--e-global-typography-ipetycd-font-size:16px;}.elementor-section.elementor-section-boxed > .elementor-container{max-width:767px;}.e-con{--container-max-width:767px;}}
/* Start custom CSS *//* ============================================================
   IPESSE — CSS de EFECTO. Nada de contenido ni de estructura.
   Reservado por la excepción de animaciones del brief.
   ============================================================ */

/* Regla guinda bajo cada título de sección. Por defecto es VISIBLE: si algo
   falla, se ve igual. El crecimiento desde el centro se hace con animación
   ligada al scroll, sin una línea de JavaScript, y solo donde el navegador
   la soporta. (Antes esto dejaba la regla en scaleX(0) para siempre.) */
.ipe-rule .elementor-divider-separator{ transform-origin: center; }
.ipe-rule--hero .elementor-divider-separator{ transform-origin: left; }

@keyframes ipe-rule-in{ from{ transform: scaleX(0); } to{ transform: scaleX(1); } }
@supports (animation-timeline: view()){
  .ipe-rule .elementor-divider-separator{
    animation: ipe-rule-in 1ms linear both;
    animation-timeline: view();
    animation-range: entry 5% cover 22%;
  }
}

/* Zoom lento de la imagen al pasar el cursor por la tarjeta. */
.ipe-zoom img{ transition: transform 220ms cubic-bezier(.16,1,.3,1); }
.ipe-zoom:hover img{ transform: scale(1.05); }

/* Desplazamiento de 3px de la flecha del botón al pasar el cursor. */
.ipe-arrow:hover .elementor-button-icon{ transform: translateX(3px); }
.ipe-arrow .elementor-button-icon{ transition: transform 220ms cubic-bezier(.16,1,.3,1); }

/* Subrayado que crece desde la izquierda en enlaces de menú y footer. */
.ipe-underline a{ position: relative; display: inline-block; }
.ipe-underline a::after{
  content:''; position:absolute; left:0; bottom:-4px; width:100%; height:1px;
  background: currentColor; transform: scaleX(0); transform-origin:left;
  transition: transform 220ms cubic-bezier(.16,1,.3,1);
}
.ipe-underline a:hover::after,
.ipe-underline a:focus-visible::after,
.ipe-underline a[aria-current="page"]::after{ transform: scaleX(1); }

/* Foco visible en todo lo clickeable, con contraste sobre claro y oscuro. */
:focus-visible{ outline:2px solid #7B1A25; outline-offset:3px; border-radius:2px; }
.ipe-on-dark :focus-visible{ outline-color:#FFFFFF; }
::selection{ background:#7B1A25; color:#fff; }

/* Filas de repetidor ACF que el programa no usa: se ocultan en vez de dejar
   huecos vacíos. Es presentación, no contenido: el dato sigue en ACF. */
.ipe-hide-empty .elementor-icon-list-item:has(.elementor-icon-list-text:empty){ display:none; }
.ipe-temario .e-n-accordion-item:has(.e-n-accordion-item-title-text:empty){ display:none; }

/* Temario: bajo el título de cada módulo va el número de temas, y los temas
   se pintan como lista con el punto de 3px del proyecto de origen. */
.ipe-temas{
  display: block; margin-top: 4px;
  font-size: 13px; font-weight: 400; line-height: 1.5; letter-spacing: 0;
  text-transform: none;
  color: var(--e-global-color-ipemeta);
}
.ipe-temario-lista ul{ list-style: none; margin: 0; padding: 0; }
.ipe-temario-lista li{
  position: relative; padding-left: 16px; margin-bottom: 10px;
}
.ipe-temario-lista li::before{
  content: ''; position: absolute; left: 0; top: 10px;
  width: 3px; height: 3px; border-radius: 50%;
  background: var(--e-global-color-ipemeta);
}
.ipe-temario-lista li:last-child{ margin-bottom: 0; }

.ipe-pre-line, .ipe-pre-line p{ white-space: pre-line; }

/* WooCommerce trae su propia paleta (azul #467ff7, grises fríos) y se cuela
   en precios, avisos y botones. Se reasigna a los colores del inventario;
   ningún valor nuevo, solo los que ya existen como Global Colors. */
:root{
  --woocommerce: #7B1A25;
  --wc-primary: #7B1A25;        --wc-primary-text: #FFFFFF;
  --wc-secondary: #EDEBE8;      --wc-secondary-text: #4A4644;
  --wc-highlight: #7B1A25;      --wc-highlightext: #FFFFFF;
  --wc-content-bg: #FFFFFF;     --wc-subtext: #635D57;
  --wc-green: #7B1A25;          --wc-red: #7B1A25;
  --wc-orange: #7B1A25;         --wc-blue: #7B1A25;
}
.woocommerce, .woocommerce-page,
.woocommerce div.product, .woocommerce ul.products li.product{ color: #4A4644; }
.woocommerce a{ color: #7B1A25; }
.woocommerce div.product p.price, .woocommerce div.product span.price,
.woocommerce ul.products li.product .price{ color: #7B1A25; }
.woocommerce div.product .woocommerce-tabs ul.tabs li a{ color: #4A4644; }

/* ------------------------------------------------------------------
   Piezas internas de algunos widgets (campos de formulario, filtro de
   taxonomía, buscador, acordeón, flechas de carrusel y botón flotante)
   que Elementor pinta con SU paleta por defecto —azul #467FF7, grises
   fríos— porque esos controles viven dentro de pestañas de estilo que no
   se pueden fijar desde fuera del editor.
   Aquí solo se ENGANCHAN a los Global Colors: no hay un valor nuevo, todo
   apunta a var(--e-global-color-*). Cambiar el token en Site Settings
   sigue repintando esto.
   ------------------------------------------------------------------ */

/* Logo del header: alto fijo y ancho por proporción, como en el proyecto de
   origen (`h-11 lg:h-[52px] w-auto`). El widget de Elementor estira la imagen
   al ancho del contenedor; esto se lo impide sin tocar la proporción, así que
   el logo se puede cambiar por otro de cualquier tamaño y sigue bien. */
.ipe-logo img{ width: auto !important; max-width: none !important; object-fit: contain; }

/* Hero: el fondo es un pase de diapositivas de Elementor, que se pinta con
   z-index 0 y tapa la capa de oscurecido (::before). Se ordenan las tres
   capas: foto → overlay → contenido. */
.e-con.ipe-hero .elementor-background-slideshow{ z-index: 0 !important; }
/* Elementor pinta la capa de oscurecido DOS veces cuando el fondo es un pase
   de diapositivas: una en el contenedor y otra en el propio pase. Se acumulan
   (0.6 sobre 0.6 ≈ 0.84) y la foto queda casi negra. Se anula la segunda. */
.e-con.ipe-hero .elementor-background-slideshow::before{ display: none !important; }
.e-con.ipe-hero::before{ z-index: 1 !important; }
.e-con.ipe-hero .e-con-inner{ position: relative !important; z-index: 2 !important; }

/* Controles del carrusel del hero: en el React van en una fila bajo los
   botones, alineados a la izquierda, no a los lados del slide. Elementor no
   ofrece esa colocación; se recolocan los controles NATIVOS (no se sustituyen
   ni se duplican) para que queden donde el original. */
.elementor-widget.ipe-hero-carousel{ position: relative; padding-bottom: 68px; }
.elementor-widget.ipe-hero-carousel .elementor-swiper-button{
  position: absolute !important; top: auto !important; bottom: 0 !important;
  transform: none !important; margin: 0 !important;
  width: 44px; height: 44px; display: flex; align-items: center; justify-content: center;
}
.elementor-widget.ipe-hero-carousel .elementor-swiper-button,
.elementor-widget.ipe-hero-carousel .elementor-swiper-button svg{
  color: #FFFFFF !important; fill: #FFFFFF !important;
}
/* Círculo de 44 px con borde blanco al 50 %, como en el React. */
.elementor-widget.ipe-hero-carousel .elementor-swiper-button{
  border: 1px solid rgba(255,255,255,0.5) !important; border-radius: 50%;
  background: transparent; font-size: 18px;
  transition: background-color 220ms cubic-bezier(.16,1,.3,1), color 220ms cubic-bezier(.16,1,.3,1);
}
.elementor-widget.ipe-hero-carousel .elementor-swiper-button:hover{
  background: #FFFFFF;
}
.elementor-widget.ipe-hero-carousel .elementor-swiper-button:hover,
.elementor-widget.ipe-hero-carousel .elementor-swiper-button:hover svg{
  color: #161616 !important; fill: #161616 !important;
}
.elementor-widget.ipe-hero-carousel .elementor-swiper-button-prev{ left: 0 !important; right: auto !important; }
.elementor-widget.ipe-hero-carousel .elementor-swiper-button-next{ left: 52px !important; right: auto !important; }
.elementor-widget.ipe-hero-carousel .swiper-pagination{
  position: absolute !important; left: 116px !important; right: auto !important;
  bottom: 21px !important; top: auto !important; width: auto !important;
  display: flex; align-items: center; gap: 8px; text-align: left; transform: none !important;
}
.elementor-widget.ipe-hero-carousel .swiper-pagination-bullet{
  width: 12px; height: 2px; border-radius: 0; opacity: 1;
  background-color: rgba(255,255,255,0.45);
}
.elementor-widget.ipe-hero-carousel .swiper-pagination-bullet-active{
  width: 24px; background-color: #FFFFFF;
}

/* Los íconos de lucide son de TRAZO: llevan fill="none" y stroke. Elementor
   pinta todo SVG con fill:currentColor, lo que los convierte en manchas
   sólidas. Se respeta el relleno declarado en el propio archivo. El glifo de
   WhatsApp sí es de relleno y no se toca. */
/* Solo se anula el relleno. El COLOR del trazo lo pone el Custom CSS de cada
   widget (lo genera tooling/build.mjs a partir del color configurado). Poner
   aquí `stroke: currentColor` sobre los hijos pisaba ese color y dejaba los
   íconos del pie y del header invisibles. */
.elementor-icon svg[fill="none"],
.elementor-icon svg[fill="none"] *,
.elementor-icon-list-icon svg[fill="none"],
.elementor-icon-list-icon svg[fill="none"] *,
.elementor-button-icon svg[fill="none"],
.elementor-button-icon svg[fill="none"] *{
  fill: none !important;
}

/* Los badges de fecha y modalidad van pegados a una esquina de la imagen y
   deben medir lo que su texto. Elementor da 100 % de ancho a todo contenedor
   y no expone un «auto». */
.e-con.ipe-badge{ width: auto !important; --width: auto !important; }

/* El React recorta a 4 líneas el texto de las tarjetas de servicio para que
   las cuatro midan lo mismo. */
.ipe-clamp-4, .ipe-clamp-4 p{
  display: -webkit-box; -webkit-line-clamp: 4; -webkit-box-orient: vertical;
  overflow: hidden;
}

/* Carruseles tipo «rail» (testimonios, galería): las flechas van arriba a la
   derecha, sobre las tarjetas, como en el original; no a los lados. */
.elementor-widget.ipe-rail-carousel{ position: relative; padding-top: 56px; }
.elementor-widget.ipe-rail-carousel .elementor-swiper-button{
  position: absolute !important; top: 0 !important; bottom: auto !important;
  transform: none !important; margin: 0 !important;
  width: 44px; height: 44px; display: flex; align-items: center; justify-content: center;
  border: 1px solid var(--e-global-color-ipebrdr); border-radius: 50%;
  background: transparent; font-size: 18px;
}
.elementor-widget.ipe-rail-carousel .elementor-swiper-button-prev{ left: auto !important; right: 52px !important; }
.elementor-widget.ipe-rail-carousel .elementor-swiper-button{ border-width: 1px !important; border-style: solid !important; }
.elementor-widget.ipe-rail-carousel .elementor-swiper-button-next{ left: auto !important; right: 0 !important; }
.elementor-widget.ipe-rail-carousel .elementor-swiper-button:hover{
  background: var(--e-global-color-secondary); border-color: var(--e-global-color-secondary);
}
.elementor-widget.ipe-rail-carousel .elementor-swiper-button:hover,
.elementor-widget.ipe-rail-carousel .elementor-swiper-button:hover svg{
  color: #FFFFFF !important; fill: #FFFFFF !important;
}

/* Foto de testimonio: cuadrado exacto, recortada al centro y circular. */
.ipe-avatar img{
  width: 64px !important; height: 64px !important;
  object-fit: cover; object-position: center; border-radius: 50%;
  max-width: none !important;
}

/* --- REACCIÓN AL CURSOR -------------------------------------------------
   Dos comportamientos, los del proyecto de origen. Misma duración y easing
   que el resto del sitio: 220ms y cubic-bezier(.16,1,.3,1). */

/* Tarjeta con sombra: sube 4px, refuerza la sombra y su imagen hace zoom. */
.ipe-zoom{
  transition: transform 220ms cubic-bezier(.16,1,.3,1),
              box-shadow 220ms cubic-bezier(.16,1,.3,1);
}
.e-con.ipe-zoom:hover,
.elementor-widget.ipe-zoom:hover,
.e-loop-item:hover .e-con.ipe-zoom{
  transform: translateY(-4px) !important;
  box-shadow: 0 10px 28px rgba(0,0,0,0.14) !important;
}
.ipe-zoom img{ transition: transform 320ms cubic-bezier(.16,1,.3,1); }
.ipe-zoom:hover img{ transform: scale(1.05); }
.e-loop-item:hover .ipe-zoom img{ transform: scale(1.05); }

/* Tarjeta gris de ícono: solo cambia el fondo. */
.ipe-hover-gris{ transition: background-color 220ms cubic-bezier(.16,1,.3,1); }
.ipe-hover-gris:hover{ background-color: var(--e-global-color-ipegrhv) !important; }

/* El desplazamiento por anclas es suave, como en el original. */
html{ scroll-behavior: smooth; }
@media (prefers-reduced-motion: reduce){ html{ scroll-behavior: auto; } }

/* Redes del pie: círculo de 44 px con el glifo centrado. El widget usa
   inline-block, así que sin esto el ícono se pega a la esquina. */
.ipe-social-circulo .elementor-social-icon{
  display: inline-flex; align-items: center; justify-content: center;
  width: 44px; height: 44px;
}

/* Tarjeta de noticia sin imagen destacada: se oculta el bloque de la foto
   para que la etiqueta de categoría no quede flotando sobre la nada.
   (La nota del convenio no trae foto; ver FALTANTES.md.) */
.e-loop-item .ipe-media:not(:has(img)){ display: none; }

/* Formularios */
.elementor-field-group .elementor-field-textual{
  border-color: var(--e-global-color-ipebrdr);
  color: var(--e-global-color-text);
  background-color: var(--e-global-color-ipewhit);
}
.elementor-field-group .elementor-field-textual:focus{
  border-color: var(--e-global-color-primary);
  box-shadow: none;
}
.elementor-field-group label{ color: var(--e-global-color-ipemeta); }

/* Buscador: campo tipo píldora, como en el proyecto de origen. */
.elementor-widget-search-form .elementor-search-form__container{
  border-radius: 999px;
  background-color: var(--e-global-color-ipewhit) !important;
  border: 1px solid var(--e-global-color-ipebrdr);
}
.elementor-widget-search-form .elementor-search-form__input{ color: var(--e-global-color-text); }
.elementor-widget-search-form .elementor-search-form__submit{ background-color: var(--e-global-color-primary); }

/* Filtro de categorías: lista vertical dentro de la tarjeta gris, con el
   ítem activo en un bloque guinda. Es el patrón del proyecto de origen; el
   widget lo saca por defecto como una fila de chips. */
.elementor-widget-taxonomy-filter search.e-filter,
.elementor-widget-taxonomy-filter .e-filter{
  display: flex !important; flex-direction: column !important;
  align-items: stretch !important; flex-wrap: nowrap !important; gap: 2px !important;
}
.elementor-widget-taxonomy-filter .e-filter-item{
  display: flex; align-items: center; justify-content: flex-start !important;
  width: 100%; min-height: 44px; padding: 8px 16px; text-align: left !important;
  border: 0 !important; border-radius: 4px;
  background-color: transparent !important;
  color: var(--e-global-color-text) !important;
  transition: background-color 220ms cubic-bezier(.16,1,.3,1), color 220ms cubic-bezier(.16,1,.3,1);
}
.elementor-widget-taxonomy-filter .e-filter-item:hover{
  background-color: var(--e-global-color-ipewhit) !important;
}
.elementor-widget-taxonomy-filter .e-filter-item[aria-pressed="true"]{
  background-color: var(--e-global-color-primary) !important;
  color: var(--e-global-color-ipewhit) !important;
  font-weight: 600;
}
/* «Todos» / «Todas» va primero, como en el original. */
.elementor-widget-taxonomy-filter .e-filter-item[data-filter="__all"]{ order: -1; }

/* En tablet y móvil la columna no cabe: pasa a fila de chips deslizable,
   igual que el proyecto de origen. */
@media (max-width: 1024px){
  .elementor-widget-taxonomy-filter search.e-filter,
  .elementor-widget-taxonomy-filter .e-filter{
    flex-direction: row !important; overflow-x: auto; gap: 8px !important; scrollbar-width: none;
  }
  .elementor-widget-taxonomy-filter .e-filter::-webkit-scrollbar{ display: none; }
  .elementor-widget-taxonomy-filter .e-filter-item{
    width: auto; flex: 0 0 auto; justify-content: center !important;
    background-color: var(--e-global-color-ipegrcd) !important;
  }
  .elementor-widget-taxonomy-filter .e-filter-item[aria-pressed="true"]{
    background-color: var(--e-global-color-primary) !important;
  }
}

/* Galería: todas las fotos al mismo alto y recortadas al centro. */
.ipe-galeria-img img{
  width: 100%; height: 240px; object-fit: cover; object-position: center;
  display: block;
}

/* Acordeón del temario */
/* El acordeón se pinta con variables propias; se reapuntan a los tokens. */
.elementor-widget-n-accordion,
.elementor-widget-nested-accordion{
  --n-accordion-title-normal-color: var(--e-global-color-ipehead) !important;
  --n-accordion-title-hover-color:  var(--e-global-color-primary) !important;
  --n-accordion-title-active-color: var(--e-global-color-ipehead) !important;
  --n-accordion-icon-normal-color:  var(--e-global-color-ipemeta) !important;
  --n-accordion-icon-hover-color:   var(--e-global-color-primary) !important;
  --n-accordion-icon-active-color:  var(--e-global-color-ipemeta) !important;
  --n-accordion-border-color:       var(--e-global-color-ipebrdr) !important;
  /* Chevron a la derecha, como en el proyecto de origen (por defecto va
     delante del título). */
  --n-accordion-title-icon-order: 1 !important;
  --n-accordion-title-flex-grow: 1 !important;
}
/* Solo línea inferior entre módulos, sin caja alrededor, y el chevron
   pegado al borde derecho. */
.elementor-widget-n-accordion .e-n-accordion-item{
  border-width: 0 0 1px 0 !important; border-radius: 0 !important;
}
.elementor-widget-n-accordion .e-n-accordion-item-title{
  border: 0 !important; border-radius: 0 !important;
  justify-content: space-between !important;
}
.elementor-widget-n-accordion .e-n-accordion-item-title-header{ flex: 1 1 auto; }
.elementor-widget-n-accordion .e-n-accordion-item .e-con,
.elementor-widget-n-accordion .e-n-accordion-item .e-con-inner{
  border: 0 !important;
}

/* Flechas y puntos de los carruseles */
/* Las flechas de swiper heredan un #EEE que Elementor imprime con la misma
   especificidad y más tarde en la cascada; aquí no queda otra que forzarlo. */
.elementor-widget .elementor-swiper-button,
.elementor-widget .elementor-swiper-button svg{
  color: var(--e-global-color-secondary) !important;
  fill: var(--e-global-color-secondary) !important;
}
.ipe-on-dark .elementor-widget .elementor-swiper-button,
.ipe-on-dark .elementor-widget .elementor-swiper-button svg{
  color: var(--e-global-color-ipewhit) !important;
  fill: var(--e-global-color-ipewhit) !important;
}
.swiper-pagination-bullet{ background-color: var(--e-global-color-ipemeta); }
.swiper-pagination-bullet-active{ background-color: var(--e-global-color-primary); }
.ipe-on-dark .swiper-pagination-bullet{ background-color: var(--e-global-color-ipewh70); }
.ipe-on-dark .swiper-pagination-bullet-active{ background-color: var(--e-global-color-ipewhit); }

/* Botón flotante: verde de WhatsApp, como en el proyecto de origen.
   (Excepción de color ya declarada en el inventario: es marca de terceros.) */
/* Botón flotante de WhatsApp: 56px, glifo de 28 y el contador «1» arriba a
   la derecha, igual que en el proyecto de origen. */
.ipe-fab .elementor-button{
  width: 56px; height: 56px; position: relative;
  transition: transform 220ms cubic-bezier(.16,1,.3,1), background-color 220ms cubic-bezier(.16,1,.3,1);
}
.ipe-fab .elementor-button:hover{ transform: translateY(-4px); }
.ipe-fab .elementor-button svg{ width: 28px; height: 28px; }
.ipe-fab .elementor-button-content-wrapper{ justify-content: center; }
.ipe-fab .elementor-button::after{
  content: "1";
  position: absolute; top: -4px; right: -4px;
  width: 22px; height: 22px; border-radius: 50%;
  background: var(--e-global-color-primary); border: 2px solid #FFFFFF;
  color: #FFFFFF; font-size: 11px; font-weight: 700; line-height: 18px; text-align: center;
}

/* El widget pinta el botón con su propia variable, no con background-color. */
.e-contact-buttons,
.e-contact-buttons__chat-button{
  --e-contact-buttons-button-bg: var(--e-global-color-ipewaps);
  --e-contact-buttons-button-bg-hover: var(--e-global-color-ipewahv);
}

/* ------------------------------------------------------------------
   ENTRADA DE LOS TEXTOS.
   El contenido es visible SIEMPRE por defecto. Solo se oculta si el
   documento lleva la clase .ipe-js, que pone el propio motor al arrancar
   (Elementor → Custom Code). Así, si el JavaScript falla o está
   bloqueado, no hay forma de que un texto quede invisible.

   Movimiento: 24px hacia arriba y 600 ms con el easing del proyecto de
   origen. Lo que ya está en la primera pantalla entra al cargar, sin
   necesidad de hacer scroll.
   ------------------------------------------------------------------ */
html.ipe-js .ipe-anim{
  opacity: 0;
  transform: translateY(24px);
  will-change: opacity, transform;
}
html.ipe-js .ipe-anim--fade{ transform: none; }
html.ipe-js .ipe-anim--zoom{ transform: scale(1.02); }

html.ipe-js .ipe-anim.ipe-visto{
  opacity: 1;
  transform: none;
  transition:
    opacity 600ms cubic-bezier(.16,1,.3,1),
    transform 600ms cubic-bezier(.16,1,.3,1);
  will-change: auto;
}

@media (prefers-reduced-motion: reduce){
  html.ipe-js .ipe-anim{
    opacity: 1 !important; transform: none !important; transition: none !important;
  }
}

/* Respeta la preferencia de menos movimiento. *//* Respeta la preferencia de menos movimiento. */
@media (prefers-reduced-motion: reduce){
  .ipe-rule .elementor-divider-separator{ transform:scaleX(1) !important; transition:none !important; }
  .ipe-zoom img, .ipe-arrow .elementor-button-icon{ transition:none !important; }
  *,*::before,*::after{ animation-duration:.001ms !important; transition-duration:.001ms !important; }
}

/* ------------------------------------------------------------------
   ARREGLO EDITOR. Dentro del editor de Elementor el IntersectionObserver
   no llega a observar los widgets (Elementor los vuelve a dibujar despues
   de que el script arranco), asi que .ipe-visto nunca se anade y todo el
   contenido queda con opacity:0 e invisible. Dentro del editor no hay
   animaciones de entrada: se muestra todo. No afecta al sitio publico,
   donde estas clases no existen.
   ------------------------------------------------------------------ */
body.elementor-editor-active .ipe-anim,
body.elementor-editor-preview .ipe-anim,
body.elementor-html .ipe-anim{
  opacity: 1 !important;
  transform: none !important;
  transition: none !important;
  transition-delay: 0ms !important;
}/* End custom CSS */