:root{
  --vms-height:100vh;
  --vms-duration:600ms;
  --vms-overlay:linear-gradient(180deg, rgba(0,0,0,.35) 0%, rgba(0,0,0,.35) 100%);
  --vms-maxw:1100px;

  /* NUEVO: variables para móvil "debajo" */
  --vms-mobile-media-height:60vh;
  --vms-mobile-content-height:260px;

  /* Puedes ajustar si quieres */
  --vms-mobile-content-bg:#ffffff;
  --vms-mobile-content-color:#111827;
}

.vms-slider{position:relative;isolation:isolate;overflow:hidden;display:block;min-height:var(--vms-height);}
.vms-track{height:100%;width:100%;position:relative;}
.vms-slide{position:absolute;inset:0;opacity:0;transition:opacity var(--vms-duration) ease;}
.vms-slide[aria-current="true"],.vms-slide.vms-active{opacity:1;}

/* Transition: slide */
.vms-slide.vms-pos-next{transform:translateX(100%);} 
.vms-slide.vms-pos-prev{transform:translateX(-100%);} 
.vms-slide.vms-anim{transition:transform var(--vms-duration) ease, opacity var(--vms-duration) ease;}

.vms-media{position:absolute;inset:0;z-index:0}
.vms-img,.vms-video,.vms-embed{position:absolute;inset:0;width:100%;height:100vh;object-fit:cover; margin-top: -5rem!important}
.vms-img {height: calc(100% + 95vh);}
@media (max-width: 768px){.vms-img,.vms-video,.vms-embed{height:90vh!important;}}
.vms-embed{border:0}
.vms-overlay{position:absolute;inset:0;background:var(--vms-overlay);z-index:1}
.vms-content-wrapper {
  position: relative;
  z-index: 2;
  width: 100%;
  max-width: 1320px;
  margin: 0 auto;
  display: flex;
  justify-content: start;
}
.vms-content{
    position: relative;
    z-index: 2;
    display: grid;
    gap: 16px;
    width: 100%;
    height: 80vh;
    max-width: 45%;
    margin: 0;
    text-align: left;
    align-content:center;
    justify-items: start;
    padding-left: 3rem;
}
@media (max-width: 768px){
  .vms-content{
    max-width:300px;
  }
}
.vms-content.align-left{text-align:left;justify-items:start}
.vms-content.align-right{text-align:right;justify-items:end}
.vms-heading {
    display: inline-block;
    font-family: 'Roboto', sans-serif !important;
    line-height: .5 !important;
    margin: 0;
    font-weight: 500 !important;
    text-transform: uppercase;
    letter-spacing: 0.05em !important;
    opacity: 0.9;
    font-size: 15px !important;
    color: #FFF !important;
    filter: brightness(0.5);
}
.vms-claim{
  margin:0;
  font-weight:800;
  letter-spacing:-.01em;
  font-size:clamp(28px,6vw,56px);
	background-image: var(--color-deg-azul)!important;
	background-clip: text;
	-webkit-background-clip: text;
	-webkit-text-fill-color: transparent;
}
.vms-intro{font-family:'Roboto',sans-serif; font-size:clamp(16px,2.2vw,20px);line-height:1.6;opacity:.95; color:#FFF!important;filter: brightness(0.5);}
.vms-button{
    display: inline-block;
    text-align: center;
    width: 100%;
    min-width: 155px;
    padding: 10px 50px 10px 25px !important;
    color: #3F5E6B !important;
    border: 1px solid #3F5E6B !important;
    border-radius: 50px;
    font-size: 1rem;
    font-weight: 600 !important;
    background-color: transparent !important;
    box-shadow: none !important;
    transition: 0.5s ease;
}
.vms-button:hover{
  color: #FFF !important;
	background-color: #3F5E6B!important;
}
.vms-button::after{
    content: "";
	  background-image: url(/wp-content/uploads/2025/10/arrow-bam-blue.svg);
    background-size: auto;
    background-position: 10px 0px;
    background-repeat: no-repeat;
    position: absolute;
    margin-top: 8px;
    width: 30px;
    height: 13px;
	  transition: 0.5s ease;
}
.vms-button:hover::after{
    content: "";
	  background-image: url(/wp-content/uploads/2025/09/arrow-bam.svg);
    background-size: auto;
    background-position: 10px 0px;
    background-repeat: no-repeat;
    position: absolute;
    margin-top: 8px;
    transform: rotate(-45deg);
	  transform-origin: center center;
}
@media (max-width:768px){
  .vms-button{
    width:auto;
  }
}
.vms-arrow{position:absolute;top:50%;transform:translateY(-50%);z-index:3;background:rgba(0,0,0,.35);color:#fff;border:0;width:44px;height:44px;border-radius:50%;cursor:pointer}
.vms-prev{left:12px}
.vms-next{right:12px}
.vms-arrow:focus{outline:3px solid #fff;outline-offset:2px}

.vms-dots{position:absolute;left:0;right:0;bottom:14px;display:flex;gap:8px;justify-content:center;z-index:3}
.vms-dots button{width:10px;height:10px;border-radius:999px;border:0.5px solid #3F5E6B;background:rgba(255,255,255,.5);cursor:pointer}
.vms-dots button[aria-selected="true"]{background:#3F5E6B}

@media (max-width:640px){
  /*.vms-slider{min-height:60vh}*/
}

/* =========================================================
   NUEVO: MÓVIL "CONTENIDO DEBAJO DEL MEDIA"
   Activo solo si el slider tiene .vms-mobile-below
   ========================================================= */
@media (max-width: 768px){
  /* Alto total estable (media + contenido) */
  .vms-slider.vms-mobile-below{
    min-height: calc(var(--vms-mobile-media-height) + var(--vms-mobile-content-height));
  }

  /* El slide pasa a columna */
  .vms-slider.vms-mobile-below .vms-slide{
    display:flex;
    flex-direction:column;
  }

  /* Media: anula tu absolute + alturas + margin-top para que se comporte como bloque superior */
  .vms-slider.vms-mobile-below .vms-media{
    position:relative;
    inset:auto;
    height: var(--vms-mobile-media-height);
  }

  .vms-slider.vms-mobile-below .vms-img,
  .vms-slider.vms-mobile-below .vms-video,
  .vms-slider.vms-mobile-below .vms-embed{
    position:absolute;
    inset:0;
    width:100%;
    height:100% !important;
    margin-top: 0 !important; /* clave para anular -5rem */
    object-fit:cover;
  }

  /* Evita la altura especial que aplicabas a .vms-img en desktop */
  .vms-slider.vms-mobile-below .vms-img{
    height:100% !important;
  }

  /* Contenido debajo: estilo de bloque */
  .vms-slider.vms-mobile-below .vms-content-wrapper{
    position:relative;
    width:100%;
    max-width: 1320px;
    margin: 0 auto;
    background: var(--vms-mobile-content-bg);
    color: var(--vms-mobile-content-color);
    justify-content: start;
  }

  .vms-slider.vms-mobile-below .vms-content{
    top:auto;
    transform:none;
    height:auto;              /* deja que el contenido crezca */
    max-width: 100%;
    width: min(100% - 32px, 1320px);
    padding: 18px 16px 22px 16px;
    color: var(--vms-mobile-content-color);
    filter:none;
    align-content:start;
    justify-items:start;
  }

  /* Ajustes de tipografías/colores para legibilidad sobre fondo claro */
  .vms-slider.vms-mobile-below .vms-heading{
    color: var(--vms-mobile-content-color) !important;
    filter:none;
  }

  .vms-slider.vms-mobile-below .vms-intro{
    color: var(--vms-mobile-content-color) !important;
    filter:none;
    opacity:1;
  }

  /* Botón coherente en fondo claro */
  .vms-slider.vms-mobile-below .vms-button{
    color: var(--vms-mobile-content-color) !important;
    border-color: var(--vms-mobile-content-color) !important;
  }
  .vms-slider.vms-mobile-below .vms-button:hover{
    color:#fff !important;
    background-color: var(--vms-mobile-content-color) !important;
  }

  /* Controles sobre el media (no debajo del contenido) */
  .vms-slider.vms-mobile-below .vms-arrow{
    top: calc(var(--vms-mobile-media-height) / 2);
  }
  .vms-slider.vms-mobile-below .vms-dots{
    bottom: calc(var(--vms-mobile-content-height) + 14px);
  }
}