/* ================================
   Seguro Salud – overrides A/B
   (pegalo al FINAL del CSS)
   ================================ */

#skyline.skyline-carta-positivo {
  background-image: url("../images/carta-positivo.jpg");
}

#skyline.skyline-carta-negativo {
  background-image: url("../images/carta-negativo.jpg");
}

/* sacar overlay global solo en estas landings */
#skyline.skyline-carta-positivo::after,
#skyline.skyline-carta-negativo::after {
  background: none;
}

/* tipografías */
#skyline.skyline-carta-positivo .intro h1,
#skyline.skyline-carta-negativo .intro h1 {
  text-transform: none;
}

#skyline.skyline-carta-positivo .intro h2,
#skyline.skyline-carta-negativo .intro h2 {
  font-weight: 300 !important;
}

/* contenedor de CTAs (tu HTML: .intro > div (row mb20) y dentro el último div es el de los botones) */
#skyline.skyline-carta-positivo .intro > div,
#skyline.skyline-carta-negativo .intro > div {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
}

#skyline.skyline-carta-positivo .intro > div > div:last-child,
#skyline.skyline-carta-negativo .intro > div > div:last-child {
  display: flex;
  align-items: center;
  gap: 12px;
}

/* normalizar altura visual de ambos botones */
#skyline.skyline-carta-positivo #boton-ir-a-form,
#skyline.skyline-carta-negativo #boton-ir-a-form,
#skyline.skyline-carta-positivo .chat2,
#skyline.skyline-carta-negativo .chat2 {
  height: 48px !important;
  padding: 0 18px !important;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  line-height: 1;
  font-size: 16px;
  box-sizing: border-box;
  white-space: nowrap;
}

/* WhatsApp transparente + icono */
#skyline.skyline-carta-positivo .chat2,
#skyline.skyline-carta-negativo .chat2 {
  background-color: transparent;
  border: 2px solid #a6a8a6;
  color: #ffffff;

  background-image: url("../images/ico-chat-directo.webp");
  background-repeat: no-repeat;
  background-position: right 14px center;
  background-size: 35px auto;

  padding-right: 46px; /* espacio extra por el icono */
}

/* ===== Fix: el azul se ve más alto por estilos globales (.btn/.azul) ===== */
#skyline.skyline-carta-positivo a#boton-ir-a-form.btn.azul,
#skyline.skyline-carta-negativo a#boton-ir-a-form.btn.azul {
  height: 41px;
  padding-top: 0;
  padding-bottom: 0;
  line-height: 41px; /* centra vertical aunque el display cambie */
  border-width: 0px; /* iguala grosor con WhatsApp si tiene borde */
  box-sizing: border-box;
}

/* Mantener el centrado interno si tu .btn usa display:block */
#skyline.skyline-carta-positivo a#boton-ir-a-form.btn.azul,
#skyline.skyline-carta-negativo a#boton-ir-a-form.btn.azul,
#skyline.skyline-carta-positivo a.chat2,
#skyline.skyline-carta-negativo a.chat2 {
  display: inline-flex;
  align-items: center;
  justify-content: center;
}

/* ================================
   Seguro Carta – ajustar peso subtítulo
   ================================ */

#skyline.skyline-carta-positivo .intro h2,
#skyline.skyline-carta-negativo .intro h2 {
  font-weight: 300;
  letter-spacing: 0.2px;
  opacity: 0.95;
}

/* por si ese texto NO es h2 sino p */
#skyline.skyline-carta-positivo .intro .descripcion,
#skyline.skyline-carta-negativo .intro .descripcion {
  font-weight: 300;
  letter-spacing: 0.2px;
  line-height: 1.4;
}

/* ================================
   Seguro Salud – overrides A/B
   (pegalo al FINAL del CSS)
   ================================ */

#skyline.skyline-salud-positivo {
  background-image: url("../images/salud-positivo.jpg");
}

#skyline.skyline-salud-negativo {
  background-image: url("../images/salud-negativo.jpg");
}

/* sacar overlay global solo en estas landings */
#skyline.skyline-salud-positivo::after,
#skyline.skyline-salud-negativo::after {
  background: none;
}

/* tipografías */
#skyline.skyline-salud-positivo .intro h1,
#skyline.skyline-salud-negativo .intro h1 {
  text-transform: none;
}

#skyline.skyline-salud-positivo .intro h2,
#skyline.skyline-salud-negativo .intro h2 {
  font-weight: 300 !important;
}

/* contenedor de CTAs (tu HTML: .intro > div (row mb20) y dentro el último div es el de los botones) */
#skyline.skyline-salud-positivo .intro > div,
#skyline.skyline-salud-negativo .intro > div {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
}

#skyline.skyline-salud-positivo .intro > div > div:last-child,
#skyline.skyline-salud-negativo .intro > div > div:last-child {
  display: flex;
  align-items: center;
  gap: 12px;
}

/* normalizar altura visual de ambos botones */
#skyline.skyline-salud-positivo #boton-ir-a-form,
#skyline.skyline-salud-negativo #boton-ir-a-form,
#skyline.skyline-salud-positivo .chat2,
#skyline.skyline-salud-negativo .chat2 {
  height: 48px !important;
  padding: 0 18px !important;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  line-height: 1;
  font-size: 16px;
  box-sizing: border-box;
  white-space: nowrap;
}

/* WhatsApp transparente + icono */
#skyline.skyline-salud-positivo .chat2,
#skyline.skyline-salud-negativo .chat2 {
  background-color: transparent;
  border: 2px solid #a6a8a6;
  color: #ffffff;

  background-image: url("../images/ico-chat-directo.webp");
  background-repeat: no-repeat;
  background-position: right 14px center;
  background-size: 35px auto;

  padding-right: 46px; /* espacio extra por el icono */
}

/* ===== Fix: el azul se ve más alto por estilos globales (.btn/.azul) ===== */
#skyline.skyline-salud-positivo a#boton-ir-a-form.btn.azul,
#skyline.skyline-salud-negativo a#boton-ir-a-form.btn.azul {
  height: 41px;
  padding-top: 0;
  padding-bottom: 0;
  line-height: 41px; /* centra vertical aunque el display cambie */
  border-width: 0px; /* iguala grosor con WhatsApp si tiene borde */
  box-sizing: border-box;
}

/* Mantener el centrado interno si tu .btn usa display:block */
#skyline.skyline-salud-positivo a#boton-ir-a-form.btn.azul,
#skyline.skyline-salud-negativo a#boton-ir-a-form.btn.azul,
#skyline.skyline-salud-positivo a.chat2,
#skyline.skyline-salud-negativo a.chat2 {
  display: inline-flex;
  align-items: center;
  justify-content: center;
}

/* ================================
   Seguro Salud – ajustar peso subtítulo
   ================================ */

#skyline.skyline-salud-positivo .intro h2,
#skyline.skyline-salud-negativo .intro h2 {
  font-weight: 300;
  letter-spacing: 0.2px;
  opacity: 0.95;
}

/* por si ese texto NO es h2 sino p */
#skyline.skyline-salud-positivo .intro .descripcion,
#skyline.skyline-salud-negativo .intro .descripcion {
  font-weight: 300;
  letter-spacing: 0.2px;
  line-height: 1.4;
}

/* ================================
   Seguro Viajero – overrides A/B
   (pegalo al FINAL del CSS)
   ================================ */

#skyline.skyline-viajero-positivo {
  background-image: url("../images/viaje-positivo.jpg");
}

#skyline.skyline-viajero-negativo {
  background-image: url("../images/viaje-negativo.jpg");
}

/* sacar overlay global solo en estas landings */
#skyline.skyline-viajero-positivo::after,
#skyline.skyline-viajero-negativo::after {
  background: none;
}

/* tipografías */
#skyline.skyline-viajero-positivo .intro h1,
#skyline.skyline-viajero-negativo .intro h1 {
  text-transform: none;
}

#skyline.skyline-viajero-positivo .intro h2,
#skyline.skyline-viajero-negativo .intro h2 {
  font-weight: 300 !important;
}

/* contenedor de CTAs (tu HTML: .intro > div (row mb20) y dentro el último div es el de los botones) */
#skyline.skyline-viajero-positivo .intro > div,
#skyline.skyline-viajero-negativo .intro > div {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
}

#skyline.skyline-viajero-positivo .intro > div > div:last-child,
#skyline.skyline-viajero-negativo .intro > div > div:last-child {
  display: flex;
  align-items: center;
  gap: 12px;
}

/* normalizar altura visual de ambos botones */
#skyline.skyline-viajero-positivo #boton-ir-a-form,
#skyline.skyline-viajero-negativo #boton-ir-a-form,
#skyline.skyline-viajero-positivo .chat2,
#skyline.skyline-viajero-negativo .chat2 {
  height: 48px !important;
  padding: 0 18px !important;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  line-height: 1;
  font-size: 16px;
  box-sizing: border-box;
  white-space: nowrap;
}

/* WhatsApp transparente + icono */
#skyline.skyline-viajero-positivo .chat2,
#skyline.skyline-viajero-negativo .chat2 {
  background-color: transparent;
  border: 2px solid #a6a8a6;
  color: #ffffff;

  background-image: url("../images/ico-chat-directo.webp");
  background-repeat: no-repeat;
  background-position: right 14px center;
  background-size: 35px auto;

  padding-right: 46px; /* espacio extra por el icono */
}

/* ===== Fix: el azul se ve más alto por estilos globales (.btn/.azul) ===== */
#skyline.skyline-viajero-positivo a#boton-ir-a-form.btn.azul,
#skyline.skyline-viajero-negativo a#boton-ir-a-form.btn.azul {
  height: 41px;
  padding-top: 0;
  padding-bottom: 0;
  line-height: 41px; /* centra vertical aunque el display cambie */
  border-width: 0px; /* iguala grosor con WhatsApp si tiene borde */
  box-sizing: border-box;
}

/* Mantener el centrado interno si tu .btn usa display:block */
#skyline.skyline-viajero-positivo a#boton-ir-a-form.btn.azul,
#skyline.skyline-viajero-negativo a#boton-ir-a-form.btn.azul,
#skyline.skyline-viajero-positivo a.chat2,
#skyline.skyline-viajero-negativo a.chat2 {
  display: inline-flex;
  align-items: center;
  justify-content: center;
}

/* ================================
   Seguro Viajero – ajustar peso subtítulo
   ================================ */

#skyline.skyline-viajero-positivo .intro h2,
#skyline.skyline-viajero-negativo .intro h2 {
  font-weight: 300;
  letter-spacing: 0.2px;
  opacity: 0.95;
}

/* por si ese texto NO es h2 sino p */
#skyline.skyline-viajero-positivo .intro .descripcion,
#skyline.skyline-viajero-negativo .intro .descripcion {
  font-weight: 300;
  letter-spacing: 0.2px;
  line-height: 1.4;
}

#skyline {
  position: relative;
  width: 100%;
  background: url("../images/hero-image.webp") center center no-repeat;
  background-size: cover;
  &:after {
    content: "";
    position: absolute;
    left: 0;
    right: 0;
    top: 0;
    bottom: 0;
    /* Permalink - use to edit and share this gradient: https://colorzilla.com/gradient-editor/#ffffff+0,ffffff+100&1+0,0+100;White+to+Transparent */
    background: linear-gradient(
      to right,
      rgba(255, 255, 255, 0.8) 30%,
      rgba(255, 255, 255, 0.2) 80%
    ); /* W3C, IE10+, FF16+, Chrome26+, Opera12+, Safari7+ */
  }
}
#skyline .container .copyright {
  max-width: 320px;
}
#login-box select,
input[type="email"] {
  border: 1px solid #bdbdbd;
  -moz-border-radius: 5px;
  -webkit-border-radius: 5px;
  border-radius: 5px;
  padding: 10px 15px;
  background-color: #fff;
  font-family: "Open Sans", Arial, Helvetica, sans-serif;
  font-weight: 400;
  font-size: 16px;
  color: #535353;
  -webkit-box-sizing: border-box;
  -moz-box-sizing: border-box;
  box-sizing: border-box;
  width: 100%;
  height: 42px;
}
#skyline .container {
  position: relative;
  padding-bottom: 60px;
  padding-top: 10vh;
  z-index: 10;
}

.iti {
  width: 100% !important;
}
#skyline .container .intro {
  max-width: 60%;
}
#skyline .container .intro h1 {
  color: #0e213e;
  font-weight: bold;
  text-align: left;
  margin-left: 15px;
  margin-bottom: 15px;
}
#skyline .container .form-seguros {
  background-color: #0e213e;
  padding: 35px;
}
#skyline .container .form-seguros .row {
  margin: 0;
  display: flex;
  justify-content: center;
  flex-wrap: wrap;
}
#skyline .container .form-seguros .row .first {
  margin-left: 10%;
}
#skyline .container .form-seguros .item {
  position: relative;
  float: none;
  width: 100%;
  margin-bottom: 10px;
}
#skyline .container .form-seguros .iti,
#skyline .container #seguros-hogar .form-seguros .item.item-field,
#skyline .container #seguros-hogar .form-seguros .item.item-btn,
#skyline .container #seguros-vida .form-seguros .item.item-btn {
  width: 100%;
}
#skyline .container .form-seguros .item .captcha-input {
  padding-left: 70px;
}
#skyline .container .form-seguros .item img {
  position: absolute;
  left: 15px;
  top: 10px;
}
/*#skyline .container #seguros-vida .form-seguros {
  max-width:1000px
}*/
#skyline .container .form-seguros .row.row-margin {
  margin-left: -5px; /* Adjust as needed */
  margin-right: -5px; /* Adjust as needed */
}
#skyline .container .form-seguros .row.row-margin [class*="col-"] {
  /* Targets all column classes */
  padding-left: 5px; /* Adjust as needed */
  padding-right: 5px; /* Adjust as needed */
}
#skyline .container .form-seguros .item .btn-buscar {
  background: #009bd5 !important;
}

#skyline .redes li a {
  display: inline-block;
  width: 35px;
  height: 35px;
  line-height: 33px;
  border-radius: 50%;
  background-color: #006d99;
  text-align: center;
}
#skyline .redes li a img {
  max-width: 18px;
  max-height: 18px;
}

#skyline .contacto-rapido {
  position: relative;
  padding-bottom: 2rem;
  z-index: 10;
}

#skyline .item-btn .btn {
  display: block;
  width: 100%;
}
#skyline .container #seguros-vida .form-seguros .item.item-radio {
  width: 100%;
}

body .uwy.userway_p3 .userway_buttons_wrapper {
  left: auto !important;
  right: 50px !important;
}

@media only screen and (max-width: 479px) {
  #seleccionar_automovil .row .first {
    margin-left: 0;
  }
  header .container .navbar.navbar-default .navbar-nav > li {
    margin: 0.25rem;
  }
  header .container .navbar.navbar-default .navbar-nav > li a {
    border-radius: 6px;
    border: 1px solid #eee !important;
    padding-bottom: 0.35rem;
    padding-top: 0.35rem;
    margin: 0;
  }
  header .container .navbar.navbar-default .navbar-nav > li.active a {
    background-color: #006d99;
    border: 1px solid #006d99 !important;
    color: #fff;
  }
  header .container #menu {
    padding-bottom: 1rem;
  }
}
@media only screen and (max-width: 991px) {
  #skyline .container .form-seguros .item.item-btn {
    width: 100%;
  }
}
@media only screen and (max-width: 767px) {
  #skyline .container .form-seguros .item .btn-buscar {
    display: block;
    width: 100%;
  }
  #skyline .container .form-seguros .row,
  #skyline .container .form-seguros#testform .row {
    display: block;
  }
  #skyline .container .form-seguros .item {
    width: 100%;
    float: none;
  }
  #skyline .container .form-seguros#testform .item {
    position: relative;
    float: none;
    width: 100%;
  }
}
.btn-contrato {
  margin-bottom: 10px;
  display: block;
  width: 100%;
}
#skyline .container #seguros-salud .form-seguros .item.item-radio {
  width: 35%;
  padding-left: 10px;
  color: #fff;
  vertical-align: middle;
  padding-top: 10px;
}
.header-top {
  display: flex;
  justify-content: space-between;
  align-items: center;
}
#login-box .modal-body .bg-login {
  min-height: 400px;
  background-size: cover;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
}
#login-box .modal-body .bg-login h2 {
  font-size: 24px;
}
header .container .header-right {
  float: none;
  display: flex;
  align-items: center;
}
header .container .header-right ul.secondary-nav li .btn-lineal {
  font-family: Lato, Arial, Helvetica, sans-serif;
  font-weight: 400;
  font-size: 16px;
  color: #098bbc;
  text-transform: uppercase;
  border: 1px solid #098bbc;
}
header .container .navbar.navbar-default {
  margin-right: 0;
  width: 100%;
  display: flex;
  justify-content: center;
}
@media (max-width: 992px) {
  #skyline .container #seguros-salud .form-seguros .item.item-radio {
    width: 100%;
  }
  #skyline .container .intro {
    max-width: 100%;
  }
  #skyline .container .form-seguros {
    padding: 20px;
  }
  #skyline .container {
    padding-bottom: 2rem;
  }
  #skyline .container .copyright {
    float: right;
    text-align: right;
    margin-bottom: 1rem;
  }
}