/* Motor de slider horizontal para grupos de tarjetas (mobile/tablet, <=1024px).

   POR QUE SCROLL NATIVO Y NO transform/translateX CALCULADO A MANO:
   la version anterior de este motor posicionaba las tarjetas con
   "track.style.transform = translateX(-indice*100%)" calculado en JS. Eso rompio porque el mismo
   elemento tenia a la vez "flex-basis:100%" (el slide) Y un "width" mas angosto (la tarjeta) --
   por spec de flexbox, cuando flex-basis no es "auto" el navegador IGNORA "width" para el tamaño
   principal del item. El resultado: el ancho angosto pedido nunca se aplicaba, y cualquier calculo
   de translateX hecho asumiendo ese ancho quedaba mal.

   Este motor evita esa clase de bug por diseño: no hay transform ni aritmetica de pixeles hecha a
   mano. El track es "overflow-x:auto" + "scroll-snap-type:x mandatory" (scroll nativo del
   navegador); avanzar de slide es pedirle al navegador "scrollea a esta posicion"
   (track.scrollTo), y la posicion de cada slide la calcula el motor de layout del navegador, no
   nosotros. Con scroll nativo, el slide 0 SIEMPRE esta visible al cargar (scrollLeft arranca en 0
   por el flujo normal del documento) -- no depende de que ningun calculo de JS haya corrido bien.

   POR QUE HAY DOS NIVELES (slide + tarjeta) Y NO UNO SOLO:
   el slide (.card-slide) es el que recibe flex-basis:100% -- ocupa el ancho completo del track,
   asi el scroll-snap avanza de a "un track.clientWidth" exacto. La tarjeta real (el elemento
   original de Elementor, sin modificar) vive UN NIVEL ADENTRO del slide y ahi si se le da un ancho
   angosto/centrado -- como es un elemento DISTINTO, no compite con el flex-basis del slide. Ver
   comentario mas abajo en el selector "> *" para el detalle.

   ALCANCE ACTUAL: [data-card-slider] (este motor, con JS/autoplay/dots) esta cableado en las 2
   filas de Certificaciones. "Experiencia y especializacion" usa el sistema HERMANO mas simple
   [data-scroll-cards] definido mas abajo en este mismo archivo -- mismo wrapper HTML
   (.card-slider > .card-slider__track > .card-slide > tarjeta), pero SIN JavaScript: solo
   scroll-snap nativo, sin autoplay/dots/timers. Son dos sistemas independientes a proposito (no
   todas las tarjetas de la landing necesitan lo mismo) -- eligen cual aplica segun el atributo
   presente en el wrapper (data-card-slider vs data-scroll-cards), nunca ambos a la vez.

   Estructura esperada dentro de cada [data-card-slider]:
     [data-card-slider]                <- wrapper nuevo. display:contents por defecto (sin caja
                                           propia -- cero impacto en desktop, sea cual sea el
                                           viewport, salvo que esta misma regla se sobreescriba
                                           mas abajo dentro del media query).
       .card-slider__track             <- la fila EXISTENTE de Elementor (mismo elemento, se le
                                           suma esta clase) -- en mobile/tablet pasa a ser el
                                           contenedor con scroll horizontal.
         .card-slide (uno por tarjeta) <- wrapper nuevo, uno por tarjeta real -- el "slide".
                                           display:contents en desktop.
           <tarjeta original>          <- elemento EXISTENTE de Elementor, sin cambios. */

.card-slider,
.card-slide {
  display: contents;
}

@media screen and (max-width: 1024px) {

  /* align-self:stretch es a proposito: el padre real de este wrapper en varias secciones es un
     contenedor flex en columna con align-items:center (patron de Elementor para centrar
     bloques), que por defecto NO estira a sus hijos al ancho completo -- los deja a su propio
     ancho de contenido y los centra. Sin este override el wrapper (y todo el scroller de
     adentro) podia quedar mas angosto que el viewport disponible, cortando la primera tarjeta. */
  [data-card-slider] {
    display: block;
    position: relative;
    width: 100%;
    max-width: 100%;
    align-self: stretch !important;
  }

  /* justify-content:flex-start es EL fix critico: varias filas (ej. elementor-element-ddc6140)
     traen "--justify-content:center" del desktop original de Elementor. Con contenido que
     desborda (varias tarjetas en una fila sin wrap), "center" centra el conjunto completo,
     dejando la mitad izquierda del desborde (el arranque de la tarjeta 1) en scroll NEGATIVO,
     inalcanzable (scrollLeft nunca es negativo en LTR) -- por eso la tarjeta 1 se veia cortada
     desde el inicio del texto. Con flex-start el contenido arranca en scrollLeft:0 y todo el
     desborde queda del lado derecho, alcanzable con scroll normal. */
  [data-card-slider] .card-slider__track {
    display: flex !important;
    flex-direction: row !important;
    flex-wrap: nowrap !important;
    justify-content: flex-start !important;
    align-items: stretch !important;
    width: 100% !important;
    max-width: 100% !important;
    gap: 0 !important;
    overflow-x: auto;
    overflow-y: hidden;
    scroll-snap-type: x mandatory;
    scroll-behavior: smooth;
    -webkit-overflow-scrolling: touch;
    scrollbar-width: none;
    -ms-overflow-style: none;
  }
  [data-card-slider] .card-slider__track::-webkit-scrollbar {
    width: 0;
    height: 0;
    display: none;
  }

  /* El SLIDE: flex-basis fijo en 100% del track -- a proposito NO se le pone tambien un "width"
     mas angosto aca (ver nota grande arriba: flex-basis gana y width quedaria ignorado). El ancho
     angosto/centrado de la tarjeta se define un nivel mas adentro, en la regla "> *" de abajo. */
  [data-card-slider] .card-slide {
    display: flex !important;
    flex: 0 0 100% !important;
    width: 100% !important;
    min-width: 0 !important;
    max-width: 100% !important;
    box-sizing: border-box !important;
    justify-content: center;
    align-items: stretch;
    scroll-snap-align: center;
    scroll-snap-stop: always;
  }

  /* La TARJETA real (hijo directo del slide, elemento original de Elementor sin tocar) -- este SI
     puede usar "width"/"max-width" con normalidad porque no tiene flex-basis propio compitiendo:
     es un hijo flex normal (flex:0 1 auto por defecto) de .card-slide, no del track. */
  [data-card-slider] .card-slide > * {
    width: calc(100% - 32px) !important;
    max-width: 320px !important;
    min-width: 0 !important;
    box-sizing: border-box !important;
    margin: 0 auto !important;
  }

  /* Marcador generico para excluir del slider un item puntual (p.ej. contenido residual/roto) sin
     hardcodear su ID en este archivo. */
  [data-card-slider] [data-slider-exclude] {
    display: none !important;
  }

  .card-slider__dots {
    display: flex;
    justify-content: center;
    align-items: center;
    gap: 8px;
    margin-top: 14px;
  }

  .card-slider__dot {
    width: 8px;
    height: 8px;
    padding: 0;
    border: 0;
    border-radius: 50%;
    background: rgba(0, 0, 0, 0.22);
    cursor: pointer;
    flex: 0 0 auto;
  }

  .card-slider__dot[aria-current="true"] {
    background: #8EC02F;
  }
}

@media (prefers-reduced-motion: reduce) {
  [data-card-slider] .card-slider__track {
    scroll-behavior: auto;
  }
}

/* ================================================================================
   [data-scroll-cards] -- scroll horizontal simple, SIN JavaScript.
   ================================================================================
   Para grupos de tarjetas que no necesitan autoplay ni indicadores -- solo scroll-snap nativo del
   navegador, manual (swipe/drag/scroll con el dedo, mouse o trackpad). card-slider.js nunca toca
   estos wrappers (solo busca [data-card-slider]): ninguna tarjeta se oculta, no hay timers, no hay
   calculo de indice. Las 4 (o las que haya) quedan siempre en el DOM, todas alcanzables
   arrastrando el track -- el navegador se encarga de la mecanica de scroll/snap solo.

   Usa la misma estructura de wrapper que [data-card-slider] (wrapper > .card-slider__track >
   .card-slide > tarjeta original sin tocar), asi que el "display:contents" de arriba (que aplica
   siempre, no solo en mobile) ya cubre el caso desktop = cero impacto. */
@media screen and (max-width: 1024px) {

  /* align-self:stretch -- mismo motivo que en [data-card-slider] arriba: el padre real de esta
     fila ("Nos destacamos..." / elementor-element-bec541d) es un contenedor flex en columna con
     align-items:center, que centra a sus hijos a su propio ancho de contenido en vez de
     estirarlos. Sin esto el wrapper podia quedar mas angosto que el viewport, cortando la
     primera tarjeta del scroller. */
  [data-scroll-cards] {
    display: block;
    position: relative;
    width: 100%;
    max-width: 100%;
    align-self: stretch !important;
  }

  /* max-width:100% es a proposito, no cosmetico: la fila original de Elementor (el track) trae
     su propio "--width" por CSS variable (ej. elementor-element-ddc6140{--width:75%;}, pensado
     para el layout de columnas de desktop). Esa variable la consume la regla base
     ".e-con{max-width:min(100%,var(--width))}" -- sin este override, el track (y por lo tanto
     TODO el scroller, incluida la tarjeta 1) quedaba encogido a ese % en vez de usar el ancho
     real disponible. Por eso la tarjeta 1 no se veia completa. */
  [data-scroll-cards] .card-slider__track {
    display: flex !important;
    flex-direction: row !important;
    flex-wrap: nowrap !important;
    justify-content: flex-start !important;
    align-items: stretch !important;
    width: 100% !important;
    max-width: 100% !important;
    gap: 16px !important;
    overflow-x: auto;
    overflow-y: hidden;
    scroll-snap-type: x mandatory;
    scroll-padding-left: 16px;
    -webkit-overflow-scrolling: touch;
    padding: 4px 16px 12px;
    box-sizing: border-box;
  }

  /* Cada tarjeta ocupa casi todo el ancho visible (un pequeño margen a los costados, no un ancho
     fijo en px) -- una tarjeta completa por vez en telefonos chicos, tope de 340px para que en
     tablet no quede exageradamente ancha. flex-basis define directamente el ancho final -- a
     diferencia del motor de arriba, aca no hace falta separar slide/tarjeta en dos niveles porque
     no hay conflicto: no se declara ademas un "width" distinto en el mismo elemento.

     scroll-snap-align:START (no "center") a proposito: con "center" la PRIMERA tarjeta puede
     quedar mal encuadrada porque no hay nada antes de ella para centrarla contra -- con "start" +
     "scroll-padding-left" en el track de arriba, la tarjeta 1 SIEMPRE arranca exactamente pegada
     al padding del track (scrollLeft:0 coincide con su posicion de reposo natural), garantizado
     por construccion, no por casualidad de medidas. */
  [data-scroll-cards] .card-slide {
    display: flex !important;
    flex: 0 0 calc(100% - 32px) !important;
    max-width: 340px !important;
    min-width: 0 !important;
    box-sizing: border-box !important;
    scroll-snap-align: start;
  }
}

/* ================================================================================
   Fix de aspect-ratio y espaciado de los iconos de "Experiencia y especializacion"
   ================================================================================
   El CSS original de Elementor (css/post-10__ver-1784325281.css, generado, no se edita) fuerza
   width Y height a la vez en cada imagen individual por su ID, ej.
   ".elementor-element-901d655 img{width:69%;height:100%;}", y ademas el widget de imagen se
   estira al ancho completo de la tarjeta por el "align-items:stretch" que trae por defecto todo
   contenedor flex en columna de Elementor -- combinado, el icono (un PNG cuadrado de 150x150 sin
   texto) termina calculando su tamaño contra una caja mas ancha de lo que su propio contenido
   necesita. Se corrige en dos frentes, solo en mobile, sin tocar post-10.css:
     1. El widget de imagen deja de estirarse -- se centra el mismo como fila flex.
     2. La imagen usa max-width/max-height en PX fijos (no %, no depende del ancho variable de la
        tarjeta) + width/height:auto -- con las dos dimensiones en auto, el navegador SIEMPRE
        conserva la proporcion 1:1 original del archivo, deformarla es imposible por construccion.
   .contenedor-mision es una clase exclusiva de estas tarjetas (no aparece en ninguna otra seccion
   del sitio), asi que el selector no necesita ir atado a ningun wrapper de slider en particular. */
@media screen and (max-width: 1024px) {
  .contenedor-mision .elementor-widget-image {
    display: flex !important;
    justify-content: center !important;
    align-self: center !important;
    width: auto !important;
    margin-bottom: 16px !important;
  }
  .contenedor-mision .elementor-widget-image img {
    width: auto !important;
    height: auto !important;
    max-width: 110px !important;
    max-height: 110px !important;
    object-fit: contain !important;
  }
  .contenedor-mision .elementor-widget-heading {
    margin-top: 4px;
  }
}