/* ===== HERO con banner más chico ===== */
.neutro{
  color: #003469;
  background-color: #E5F2FF;
}
.positivo{
  color: #198754;
  background-color: #D2F1E8;
}
.negativo{
  color: #F45047;
  background-color: #fcd2d0;
}
.contacto-hero-bs{
  position: relative;
}

.contacto-hero-bs::before{
  content:"";
  position:absolute;
  inset:0 0 auto 0;
  height: 32vh;          /* banner más chiquito */
  min-height: 220px;
  max-height: 320px;

  background-image: url('../img_new/fondo_banner_nosotros.jpg');
  background-repeat: no-repeat;
  background-position: top center;
  background-size: 100% 100%;
  z-index: 0;
}

.contacto-hero-bs::after{
  content:"";
  position:absolute;
  inset:0 0 auto 0;
  height: 32vh;
  min-height: 220px;
  max-height: 320px;

  background: linear-gradient(180deg, rgba(15,51,90,.32) 0%, rgba(15,51,90,0) 80%);
  z-index: 0;
}

/* card arriba del banner */
.contacto-hero-bs .container{
  position: relative;
  z-index: 1;
}

/* card un poco más arriba */
.contacto-card-bs{
  border-radius: 14px;
  margin-top: -10px;
  min-height: 400px;
}

/* ===== choice cards ===== */
.contacto-choice{
  background: transparent;
  border: 0;
  padding: 0;
}

.contacto-choice__inner{
  background: rgba(15,51,90,.03);
  border: 1px solid rgba(15,51,90,.08);
  transition: transform .12s ease, box-shadow .12s ease, background .12s ease;
  display: flex;
  flex-direction: column;
  min-height: 190px;
}

.contacto-choice:hover .contacto-choice__inner{
  transform: translateY(-2px);
  box-shadow: 0 10px 22px rgba(17,24,39,.12);
  background: rgba(15,51,90,.05);
}

/* CTA aparece en hover */
.contacto-choice__cta{
  opacity: 0;
  transform: translateY(6px);
  transition: opacity .15s ease, transform .15s ease;
}

.contacto-choice:hover .contacto-choice__cta{
  opacity: 1;
  transform: translateY(0);
}


/* títulos con línea (tipo tu captura) */
.contacto-divider-title{
  position: relative;
  text-align: center;
  color: #0f335a;
  font-weight: 700;
}
.contacto-divider-title::before{
  content:"";
  position:absolute;
  left:0; right:0;
  top: 50%;
  height: 1px;
  background: rgba(15,51,90,.20);
}
.contacto-divider-title span{
  position: relative;
  background: #fff;
  padding: 0 10px;
}

/* botón volver (look bootstrap, solo ajuste) */
.contacto-back-btn{
  white-space: nowrap;
  margin-top: 2px;
}

@media (max-width: 820px){
  .contacto-hero-bs::before,
  .contacto-hero-bs::after{
    height: 28vh;
    min-height: 200px;
    max-height: 280px;
  }

}


/* PILL “requiere validación” */
.contacto-pill{
  display: inline-flex;
  align-items: center;
  justify-content: center;

  padding: 8px 12px;
  border-radius: 5px;

  background: rgba(255,255,255,.92);
  border: 1px solid rgba(15,51,90,.18);

  color: var(--fid-primary);
  font-weight: 700;
  font-size: 12px;
  line-height: 1;
}

/* si querés que aparezca solo en hover (como antes) */
.contacto-choice__cta{
  opacity: 0;
  transform: translateY(6px);
  transition: opacity .15s ease, transform .15s ease;
}
.contacto-choice:hover .contacto-choice__cta{
  opacity: 1;
  transform: translateY(0);
}

.contacto-back-link{
  color: var(--fid-primary) !important;
  font-weight: 700;
  text-decoration: none !important; /* sin subrayado */
}

.contacto-back-link:hover{
  text-decoration: underline !important; /* si querés algo sutil en hover */
}


.contacto-legal-box{
  background: #fff;
  border-radius: 12px;
  box-shadow: 0 18px 40px rgba(17,24,39,.10);
  padding: 18px 18px;
}

.contactoPopup_Texto2{
  font-size: 12.5px;
  line-height: 1.5;
  color: rgba(17,24,39,.78);
}

.contactoPopup_Texto2 p{
  margin: 0 0 8px 0;
}


/* ===============================
   FIXES RESPONSIVE / MOBILE UX
================================= */

/* 1) En mobile no hay hover: mostrar el CTA siempre */
@media (max-width: 991.98px){
  .contacto-choice__cta{
    opacity: 1 !important;
    transform: none !important;
  }
}

/* 2) Hero: evitar deformación del banner */
.contacto-hero-bs::before{
  background-size: cover;
  background-position: top center;
}

/* opcional: si querés que en desktop “encaje” más, pero sin deformar */
@media (min-width: 992px){
  .contacto-hero-bs::before{
    background-size: cover;
  }
}

/* 3) Botonera Validar/Cambiar: más cómoda en mobile */
#form_verificacion .col-12.col-md-3 > .d-flex{
  flex-direction: column;
  align-items: stretch;
}

@media (min-width: 768px){
  #form_verificacion .col-12.col-md-3 > .d-flex{
    flex-direction: row;
    align-items: center;
  }
}

#buscar_btn_validacion,
#btn_cambiar_validacion{
  width: 100%;
}

@media (min-width: 768px){
  #buscar_btn_validacion,
  #btn_cambiar_validacion{
    width: auto;
  }
}