.switcher-section {
  height: 100vh !important;
  min-height: 450px;
  display: flex;
  align-items: center;
  justify-content: center;
  position: relative;
  overflow: hidden;
  box-sizing: border-box;
}

.switcher-texts {
  position: relative;
  width: 100%;
  height: 100%;
  display: flex;
  align-items: center;
  justify-content: center;
  box-sizing: border-box;
  /* Sin padding propio: el inset lo manda el control Padding (Estilo → Slide Layout),
     que aplica sobre .switcher-text. Un padding aquí era invisible para el usuario —
     ponía el control a 0 y el contenido seguía sin pegar al borde. */
  padding: 0;
  z-index: 1;
}

.switcher-text {
  position: absolute;
  left: 0; top: 0; width: 100%; height: 100%;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  opacity: 0;
  transform: translateY(30px);
  pointer-events: none;
  contain: paint;
  text-align: center;
  z-index: 2;
}

.switcher-text:first-child,
.switcher-text.active {
  opacity: 1;
  transform: translateY(0);
  pointer-events: auto;
}

/* Background image per slide — covers full section */
.switcher-bg {
  position: absolute;
  top: 50%;
  left: 50%;
  width: 100vw;
  height: 100vh;
  transform: translate(-50%, -50%);
  z-index: 0;
  background-size: cover;
  background-position: center;
  background-repeat: no-repeat;
  contain: paint;
}
.switcher-bg-overlay {
  position: absolute;
  inset: 0;
  z-index: 1;
  pointer-events: none;
  /* El degradado se compone aquí a partir de variables que emite cada control.
     Antes se armaba en PHP como estilo inline: Elementor no puede refrescar un
     inline en vivo, así que había que recargar para ver un cambio de ángulo.
     Los fallback mantienen el aspecto de las instancias que aún no han vuelto a
     guardarse. El overlay de color plano no usa esto: su control emite
     `background` con más especificidad y gana. */
  background: linear-gradient(
    var(--pe-grad-angle, 180deg),
    var(--pe-grad-start, rgba(0, 0, 0, 0.8)) var(--pe-grad-p1, 0%),
    var(--pe-grad-end, rgba(0, 0, 0, 0)) var(--pe-grad-p2, 100%)
  );
}

/* Icon above content */
.switcher-icon {
  display: block;
  margin-bottom: 1em;
  object-fit: contain;
}

.switcher-inner {
  position: relative;
  display: flex;
  flex-direction: column;
  align-items: inherit;
  color: #fff;
  z-index: 3;
  text-align: center;
}
.switcher-inner > * {
  margin: 0;
  color: inherit;
}
.switcher-title,
.switcher-subtitle,
.switcher-description {
  display: block;
  width: 100%;
  color: inherit;
  /* Techo de seguridad. Los controles de Width del título y del párrafo aceptan
     valores en px hasta 2000, y ese valor de escritorio se hereda en móvil salvo
     que se ajuste por dispositivo: un ancho de 700px en una pantalla de 393px
     desbordaba y el texto quedaba cortado. `max-width` respeta el ancho elegido
     mientras quepa y lo limita al contenedor cuando no. */
  max-width: 100%;
  box-sizing: border-box;
  overflow-wrap: break-word;
}

/* Mismo criterio para el contenedor y el botón. */
.switcher-inner,
.switcher-btn {
  max-width: 100%;
}

.switcher-subtitle {
  font-size: 0.85rem;
  font-weight: 400;
  text-transform: uppercase;
  opacity: 0.5;
  margin-bottom: 0.6em;
}

.switcher-description {
  margin-top: 0.75em;
  font-weight: 300;
  letter-spacing: -0.5px;
  font-size: 1rem;
  line-height: 1.6;
}

.switcher-btn {
  display: inline-flex;
  align-items: center;
  gap: 0.5em;
  text-decoration: none;
  color: #fff;
  font-size: 16px;
  font-weight: 300;
  padding: 17px 28px;
  border: 1px solid #fff;
  border-radius: 0;
  background: none;
  cursor: pointer;
  margin-top: 1.2em;
  transition: background 0.3s ease, color 0.3s ease;
}
.switcher-btn:hover {
  background: #fff;
  color: #0f0f0f;
}
.switcher-btn i {
  font-style: normal;
  font-size: inherit;
}
.switcher-btn svg {
  width: 1em;
  height: 1em;
  fill: currentColor;
}
.switcher-btn.reverse {
  flex-direction: row-reverse;
}

/* Split layout (image left/right) */
.switcher-text--split {
  flex-direction: row;
  align-items: center;
  justify-content: center;
}
.switcher-text--split .switcher-inner {
  flex: 1;
  min-width: 0;
  justify-content: center;
}
.switcher-split-image {
  flex-shrink: 0;
  background-size: cover;
  background-position: center;
  background-repeat: no-repeat;
  height: 100%;
  contain: paint;
}
.switcher-text--image-left .switcher-split-image {
  order: -1;
}
.switcher-text--image-right .switcher-split-image {
  order: 1;
}
.switcher-text--split .switcher-bg {
  display: none;
}

/* ── Modo estático en móvil ────────────────────────────────────────────────
   Control "Animar en móvil" = No. Los slides dejan de estar superpuestos en
   posición absoluta y pasan al flujo normal: se apilan uno debajo del otro,
   todos visibles, sin pin ni transiciones.

   Los `!important` de opacity/transform/filter son deliberados: si una instancia
   ya corrió el JS antes de que el usuario apagara el control, GSAP dejó estilos
   inline (opacity:0, blur) que de otro modo ganarían por especificidad. */
@media (max-width: 767px) {
  .switcher-section--static-mobile {
    height: auto !important;
    min-height: 0;
    display: block;
    overflow: visible;
  }
  /* La regla móvil general estrecha .switcher-texts a 80vw contando con que el
     padre es flex y lo centra. En estático el padre es block, así que se devuelve
     al ancho completo y el respiro lo da el padding. */
  .switcher-section--static-mobile .switcher-texts {
    height: auto;
    display: block;
    width: 100%;
    max-width: none;
    padding: 0;
  }
  .switcher-section--static-mobile .switcher-text {
    position: relative;
    left: auto;
    top: auto;
    /* `height` DEFINIDA, no `min-height`. La imagen del split usa `height:100%` y un
       porcentaje solo resuelve contra una altura definida del padre: con `auto` o
       `min-height` colapsaba a 0 y la imagen desaparecía. Además cada slide ocupa una
       pantalla, que es lo que espera el diseño de fondo a sangre completa. */
    height: 100vh;
    overflow: hidden;
    opacity: 1 !important;
    transform: none !important;
    filter: none !important;
    pointer-events: auto;
  }
  /* El fondo se centra en SU slide, no en la sección entera. */
  .switcher-section--static-mobile .switcher-bg {
    height: 100%;
    opacity: 1 !important;
    filter: none !important;
  }
  .switcher-section--static-mobile .switcher-split-image {
    opacity: 1 !important;
    filter: none !important;
  }
}

/* ── Visibilidad por dispositivo ───────────────────────────────────────────
   El PHP renderiza una sola vez y marca con estas clases lo que no debe verse en
   cada viewport. Los breakpoints son los de Elementor por defecto (767 / 1024). */
@media (min-width: 1025px) { .pe-hide-desktop { display: none !important; } }
@media (min-width: 768px) and (max-width: 1024px) { .pe-hide-tablet { display: none !important; } }
@media (max-width: 767px) { .pe-hide-mobile { display: none !important; } }

/* ── Layout de móvil distinto al de escritorio ─────────────────────────────
   El nodo que no corresponde ya viene oculto con las clases de arriba; aquí solo
   se corrige la caja: en modo fondo el slide vuelve a ser una capa centrada, y en
   modo apilado se comporta como el split ya apilado. */
@media (max-width: 767px) {
  .switcher-text--m-bg {
    flex-direction: column;
    justify-content: center;
    gap: 0;
  }
  /* El slide conserva la clase --split porque ese es su layout de ESCRITORIO, y
     `.switcher-text--split .switcher-bg { display:none }` lo apagaba también en
     móvil: el fondo se renderizaba pero no se veía nunca. Aquí se reactiva, ya
     dentro de la media query, donde el modo elegido es fondo. */
  .switcher-text--m-bg .switcher-bg {
    display: block;
  }
  /* El inner deja de ser una columna del split y vuelve a ser el bloque centrado
     sobre la imagen, como en el modo fondo de escritorio. */
  .switcher-text--m-bg .switcher-inner {
    flex: 0 0 auto;
    width: 100%;
  }
  .switcher-text--m-split {
    flex-direction: column;
    justify-content: center;
  }
  .switcher-text--m-split .switcher-inner {
    flex: 0 0 auto;
    width: 100%;
  }
  /* En móvil-apilado el fondo a sangre completa no aplica aunque exista el nodo. */
  .switcher-text--m-split .switcher-bg { display: none; }
}

/* ── Split en móvil: apilado, no lado a lado ───────────────────────────────
   Dos columnas en 393px no caben: el texto desbordaba su caja y se veía encima
   de la imagen. En móvil la imagen y el contenido se apilan.

   El orden respeta la intención del layout elegido: "Image Left" pone la imagen
   arriba, "Image Right" la pone abajo.

   El ancho NO se fuerza aquí: lo manda el control `layout_image_width`, que es
   responsive. Si se pisara con !important el usuario perdería la posibilidad de
   ajustarlo por dispositivo, así que la imagen se centra y él decide el ancho. */
@media (max-width: 767px) {
  .switcher-text--split {
    flex-direction: column;
    justify-content: center;
  }
  .switcher-text--split .switcher-inner {
    flex: 0 0 auto;
    width: 100%;
  }
  /* Orden por defecto, derivado del layout elegido. Va envuelto en :where() a
     propósito: eso deja la regla con especificidad (0,1,0), por debajo de la que
     genera Elementor para el control "Imagen en móvil" (0,2,0). Sin :where() las
     dos empatarían y ganaría la última hoja cargada — el control funcionaría o no
     según el orden de los estilos, que no controlamos. */
  .switcher-text--image-left :where(.switcher-split-image) { order: -1; }
  .switcher-text--image-right :where(.switcher-split-image) { order: 1; }
  .switcher-split-image {
    align-self: center;
    /* Red de seguridad: si el alto acaba resolviendo a 0, no desaparece. */
    min-height: 25vh;
  }
}

/* MÓVIL */
@media (max-width: 767px){
  .switcher-section {
    height: 100vh;
  }
  .switcher-texts {
    /* Antes: width:80vw + padding 0 2vw. Eso dejaba ~10% de aire a cada lado que no
       aparecía en ningún control, así que la imagen y el texto nunca llegaban al
       borde por mucho que se pusiera el Padding en 0. Ahora ocupa todo el ancho y
       el respiro se decide desde el control. */
    width: 100%;
    max-width: none;
    min-height: 120px;
    padding: 0;
  }
  .switcher-description {
    width: 100%;
  }
}