/*
Theme Name: Finovate Child
Author: VamTam
Author URI: https://vamtam.com
Template: finovate
*/

@font-face {
  font-family: "FF DIN Round";
  src: url("fonts/ff-din-round-light.otf") format("opentype");
  font-weight: 300;
  font-style: normal;
  font-display: swap;
}

@font-face {
  font-family: "FF DIN Round";
  src: url("fonts/ff-din-round-regular.otf") format("opentype");
  font-weight: 400;
  font-style: normal;
  font-display: swap;
}

@font-face {
  font-family: "FF DIN Round";
  src: url("fonts/ff-din-round-medium.otf") format("opentype");
  font-weight: 500;
  font-style: normal;
  font-display: swap;
}

@font-face {
  font-family: "FF DIN Round";
  src: url("fonts/ff-din-round-bold.otf") format("opentype");
  font-weight: 700;
  font-style: normal;
  font-display: swap;
}

@font-face {
  font-family: "FF DIN Round";
  src: url("fonts/ff-din-round-black.otf") format("opentype");
  font-weight: 900;
  font-style: normal;
  font-display: swap;
}

.home *:not(.fas, .fab, .far, .fad, .fal, .vamtamtheme-) {
  font-family: 'FF DIN Round' !important;
}

.elementor-form-spinner {
  display: none !important;
}

h1, h2, h3 {
  letter-spacing: -2px !important;
}

.rol_seo h3, .tit_seo h3 {
  letter-spacing: 0 !important;
}

/* Altura del header fijo */
:root { --header-offset: 96px; }

/* Aplica el offset a todo scroll por hash/anchor */
html {
  scroll-behavior: smooth;          /* opcional, suaviza el scroll */
  scroll-padding-top: var(--header-offset);
}

/* #productos, #socios-estrategicos, #somos, #form {
    scroll-margin-top: 30px; 
} */

.header-mobile {
  background-color: #1c4b42 !important;
}

#form {
    scroll-margin-top: 50px;
}

#e-n-tab-title-977634671 {
  border-radius: 14px;
  background: rgba(005, 005, 005, 0.10);
  backdrop-filter: blur(22px);
  width: 100%;
  max-width: 50%;
}

@media(max-width: 600px) {
  .elementor-widget-n-tabs.vamtam-has-theme-widget-styles.vamtam-has-theme-style .e-n-tabs-heading {
    display: inline-block;
    width: 100% !important;
    max-width: 100% !important;
  }

  .elementor-widget-n-tabs .e-n-tab-title {
    width: 100% !important;
    max-width: 100% !important;
    display: inline-block;
    height: auto;
    text-align: left;
  }

  .elementor-widget-n-tabs .e-n-tab-title {
    white-space: wrap;
  }

  #e-n-tab-title-977634671 .e-n-tab-title-text {
    text-align: left;
  }

  .e-n-tabs-content .e-con-inner {
    padding-bottom: 150px !important;
  }
}

#e-n-tab-title-977634671 .e-n-tab-title-text {
  color: #FFF;
  font-size: 14px;
  font-style: normal;
  font-weight: 400;
  line-height: 140%; /* 19.6px */
  text-transform: none;
}

/* === HORIZONTAL SCROLL (versión simple y robusta) ==================== */
/* 1) Al contenedor grande (el azul) ya le pusiste clase hs-slider */
.elementor-element.hs-slider{
  display:flex !important;
  flex-wrap:nowrap !important;
  overflow-x:auto !important;
  scroll-snap-type:x mandatory;
  -webkit-overflow-scrolling:touch;
  gap:24px;                 /* espacio entre tarjetas */
  padding:0 8px;
  scroll-padding-left:16px;
  padding-bottom: 30px;
}

/* 2) Las tarjetas: tomamos los hijos directos del slider y les damos ancho fijo
      (esto pisa el 25% que mete Elementor). Ajustá 320/340 si querés más ancho. */
.elementor-element.hs-slider > .elementor-element{
  flex:0 0 320px !important;   /* ancho del “slide” */
  width:auto !important;
  max-width:none !important;
  scroll-snap-align:start;
}

/* (Opcional) responsive fino */
@media (max-width:1023.98px){
  .elementor-element.hs-slider > .elementor-element{ flex-basis:300px !important; }
}
@media (max-width:767.98px){
  .elementor-element.hs-slider > .elementor-element{ flex-basis:270px !important; }
}

/* (Opcional) scrollbar sutil */
.elementor-element.hs-slider::-webkit-scrollbar{ height:8px; }
.elementor-element.hs-slider::-webkit-scrollbar-thumb{ background:rgba(0,0,0,.15); border-radius:4px; }
.elementor-element.hs-slider{ scrollbar-width:thin; scrollbar-color:rgba(0,0,0,.15) transparent; }

/* Viewport: contenedor NO scrollable, para dibujar el fade fijo */
.hs-viewport{
  position: relative;
  /* (opcional) si el section tiene color, dejalo; si es blanco, no toques */
  /* background-color: #fff; */
}

/* Fade fijo a la derecha: ajustá el color inicial a tu fondo */
.hs-viewport::after{
  content:"";
  position:absolute;
  top:0; right:0; bottom:0;
  width:72px;                 /* ancho del difuminado */
  pointer-events:none;        /* no tapa el scroll */
  /* Cambiá #fff si tu fondo no es blanco */
  background: linear-gradient(to left, #fff 20%, rgba(255,255,255,0) 100%);
  z-index: 3;
}

/* El carril scrolleable: le damos “aire” para que el último no quede debajo del fade */
.elementor-element.hs-slider{
  padding-right:72px;         /* deja espacio para el fade */
  scroll-padding-right:72px;  /* snap: evita que se “pegue” bajo el fade */
}

/* Un poquito más de aire al último item */
.elementor-element.hs-slider > .elementor-element:last-child{
  margin-right:24px;
}

.elementor-187 .elementor-element.elementor-element-c3698ff > .elementor-widget-container > .e-n-menu > .e-n-menu-wrapper > .e-n-menu-heading > .e-n-menu-item > .e-n-menu-title.e-current a span {
  color: #1c4b42;
}

/* Detecta Safari/WebKit móvil */
@supports (-webkit-touch-callout: none) {
  .hs-viewport::after,
  .hs-viewport::before { display: none !important; }
  .elementor-element.hs-slider { padding-right: 24px !important; } /* un poco menos de aire si no hay fade */
}

/* Fade por máscara: no usa ::before/::after */
@supports (-webkit-mask-image: linear-gradient(#000, #000)) {
  .hs-viewport {
    -webkit-mask-image: linear-gradient(to right,
      rgba(0,0,0,1) 0,
      rgba(0,0,0,1) calc(100% - 72px), /* zona visible */
      rgba(0,0,0,0) 100%               /* desvanecido */
    );
    mask-image: linear-gradient(to right,
      rgba(0,0,0,1) 0,
      rgba(0,0,0,1) calc(100% - 72px),
      rgba(0,0,0,0) 100%
    );
  }
  /* volvemos a dejar padding para “aire” del último */
  .elementor-element.hs-slider { padding-right: 72px !important; }
}


.elementor-element.hs-slider{
  transform: translateZ(0);       /* promueve a su propia capa */
  will-change: scroll-position;   /* hint de scrolling */
  contain: paint layout;          /* aislar repintados */
}

/* y en los hijos, aseguramos cálculo de ancho correcto */
.elementor-element.hs-slider > .elementor-element{
  min-width: 0;  /* evita que contenidos largos rompan el ancho */
}


@media (max-width: 767.98px){
  .elementor-element.hs-slider{ scroll-snap-type: x proximity; }
}

/* “aire” final y snap correcto */
.elementor-element.hs-slider { scroll-padding-right: 72px; }
.elementor-element.hs-slider > .elementor-element:last-child{ margin-right:24px; }


/* Sólo Safari/WebKit móvil */
@supports (-webkit-touch-callout: none) {

  /* 1) Aislá el viewport del slider en su propia capa */
  .hs-viewport{
    position: relative;
    isolation: isolate;                 /* nueva stacking context */
    -webkit-transform: translateZ(0);   /* fuerza compositing */
    transform: translateZ(0);
  }

  /* 2) El track (carril) en capa propia pero sin inercia WebKit (suele glitchear) */
  .elementor-element.hs-slider{
    -webkit-overflow-scrolling: auto !important; /* quita momentum-bug */
    will-change: transform;                       /* estabiliza compositing */
    contain: content;                             /* aísla layout/paint */
    backface-visibility: hidden;
  }

  /* 3) Cada tarjeta: evitar “sangrías” de pintura */
  .elementor-element.hs-slider > .elementor-element{
    -webkit-transform: translateZ(0);  /* promueve cada card */
    transform: translateZ(0);
    backface-visibility: hidden;
    background-clip: padding-box;      /* con bordes redondeados ayuda */
    min-width: 0;                      /* evita que contenidos larga rompan ancho */
  }

  /* 4) Si usás el fade con ::before/::after, apágalo en iOS: */
  .hs-viewport::before,
  .hs-viewport::after{ display:none !important; }

  /* 5) En mobile puro, suavizá el snap (menos “tironeo”) */
  @media (max-width: 767.98px){
    .elementor-element.hs-slider{ scroll-snap-type: x proximity !important; }
  }
}

/* Fade por máscara: NO usa ::before/::after */
@supports (-webkit-mask-image: linear-gradient(#000, #000)) {
  .hs-viewport{
    -webkit-mask-image: linear-gradient(to right,
      rgba(0,0,0,1) 0,
      rgba(0,0,0,1) calc(100% - 72px),
      rgba(0,0,0,0) 100%
    );
    mask-image: linear-gradient(to right,
      rgba(0,0,0,1) 0,
      rgba(0,0,0,1) calc(100% - 72px),
      rgba(0,0,0,0) 100%
    );
  }
  /* aire final para el último ítem */
  .elementor-element.hs-slider{
    padding-right:72px !important;
    scroll-padding-right:72px !important;
  }
}