/* ==============================
   FQC - Contacto (solo esta vista)
   ============================== */

:root { --fqc-azul:#205b8c; --fqc-naranja:#ff8f0f; }

/* ==============================
   BOTONES (mismos estilos)
   ============================== */
.boton-personalizado{
  position:relative; display:inline-block;
  padding:10px 20px; font-size:1rem; color:#fff;
  text-decoration:none; border:none; font-weight:700;
  border-radius:4px; overflow:hidden;
  transition:all .4s ease;
  z-index:1;
  border:2px solid transparent;
  transition: background-color .4s ease, box-shadow .4s ease, transform .2s ease, border-color .4s ease;
}
.boton-personalizado::before{
  content:""; position:absolute; top:0; left:-100%;
  width:100%; height:100%; z-index:-1;
  transition:all .4s ease;
}
.btn-nosotros{ background:#205b8c; border-color:#ff8f0f; color:#fff; }
.btn-nosotros::before{ background:#ff8f0f; }
.btn-nosotros:hover,
.btn-nosotros:focus{
  color:#fff; transform:translateY(-2px);
  box-shadow:0 6px 15px rgba(255,143,15,.3);
  background:#ff8f0f; border-color:#205b8c;
}
.btn-nosotros:hover::before{ left:0; }

.btn-contacto{ background:#ff8f0f; border-color:#205b8c; color:#fff; }
.btn-contacto::before{ background:#205b8c; }
.btn-contacto:hover,
.btn-contacto:focus{
  color:#fff; transform:translateY(-2px);
  box-shadow:0 6px 15px rgba(32,91,140,.3);
  background:#205b8c; border-color:#ff8f0f;
}
.btn-contacto:hover::before{ left:0; }

.boton-personalizado:focus-visible{
  outline:2px solid #fff; outline-offset:2px;
}

/* ==============================
   PANEL DERECHO (mismos estilos)
   ============================== */
#fqc-contact-right{ background-color:var(--fqc-azul); color:#fff; }
#fqc-contact-right .contact-media h5{ margin-bottom:.5rem; }
#fqc-contact-right .contact-media span,
#fqc-contact-right .contact-media li{ color:#fff; }

#fqc-contact-right .social-icons .list-inline-item,
#fqc-contact-right .social-icons .list-inline-item a{
  background:transparent!important; border:0!important; padding:0!important;
}
#fqc-contact-right .social-icons img{
  width:28px; height:28px; display:block;
  background:transparent!important;
  transition:transform .2s ease, opacity .2s ease;
}
#fqc-contact-right .social-icons a:hover img{
  transform:translateY(-2px); opacity:.85;
}

/* Botones WA duo */
#fqc-contact-right .wa-duo{
  display:flex; gap:12px; margin-top:4px;
  justify-content:space-between; align-items:stretch;
  flex-wrap:nowrap;
}
#fqc-contact-right .wa-duo .boton-personalizado{
  flex:1 1 0; text-align:center;
  padding:12px 10px; border-radius:6px;
}

/* ==============================
   FORM - inputs (mismo efecto)
   ============================== */
#contact-form .form-control{
  color:var(--fqc-azul);
  caret-color:var(--fqc-azul);
  border-color:rgba(32,91,140,.35);
}
#contact-form .form-control::placeholder{ color:var(--fqc-azul); opacity:.65; }
#contact-form .form-control:focus{
  color:var(--fqc-azul);
  border-color:var(--fqc-azul);
  box-shadow:0 0 0 .2rem rgba(32,91,140,.15);
}
#contact-form textarea.form-control{ min-height:120px; }

/* Autofill (Chrome) */
#contact-form input:-webkit-autofill,
#contact-form input:-webkit-autofill:hover,
#contact-form input:-webkit-autofill:focus,
#contact-form textarea:-webkit-autofill{
  -webkit-text-fill-color:var(--fqc-azul);
  -webkit-box-shadow:0 0 0 1000px #fff inset;
  transition:background-color 5000s ease-in-out 0s;
}

/* ==============================
   HERO CONTACTANOS (mismo diseño)
   OJO: ahora rutas van con ../ porque este CSS está en /css/
   ============================== */
body .page-title.hero-contactanos{
  --hero-h:clamp(360px,45vh,520px);
  min-height:var(--hero-h);
  display:flex; align-items:center;
  width:100%; overflow:hidden;

  background-image:none!important;
  background-color:#f5f9fc!important;
  background:url('../imagenes/Contactanos_2.png?v=1') right center/auto 100% no-repeat,
             #f5f9fc!important;
}
body .page-title.hero-contactanos::before,
body .page-title.hero-contactanos::after{ content:none!important; display:none!important; }
body .page-title.hero-contactanos > .container{ position:relative; z-index:1; }
body .page-title.hero-contactanos .white-bg{ background:transparent!important; box-shadow:none!important; }
body .page-title.hero-contactanos .page-breadcrumb{ border-top:0!important; }

/* Imagen real móvil/tablet */
body .page-title.hero-contactanos .hero-bg-mobile{ display:none; }
@media (max-width: 991.98px){
  body .page-title.hero-contactanos{
    background:#f5f9fc!important;
    min-height:auto!important;
    height:auto!important;
    overflow:hidden!important;
    position:relative;
    padding:0!important;
  }
  body .page-title.hero-contactanos .hero-bg-mobile{
    display:block;
    width:100%;
    height:auto;
    max-width:100%;
    object-fit:contain;
  }
  body .page-title.hero-contactanos > .container{
    position:absolute!important;
    left:0; right:0;
    top:0;
    z-index:2;
  }
  body .page-title.hero-contactanos .white-bg{ margin-top:.75rem; }
}

/* Breadcrumb responsive (mismo comportamiento, sin romper separador) */
@media (max-width: 991.98px){
  body .page-title .page-breadcrumb .breadcrumb{
    display:flex!important;
    flex-wrap:wrap!important;
    align-items:center!important;
  }
  body .page-title .page-breadcrumb .breadcrumb .breadcrumb-item.active{
    flex:0 0 100%!important;
    width:100%!important;
    display:inline-flex!important;
    align-items:center!important;
    margin-top:.25rem!important;
    padding-left:inherit!important;
    white-space:normal!important;
  }
  body .page-title .page-breadcrumb .breadcrumb .breadcrumb-item.active::before{
    display:inline-block!important; float:none!important;
  }
  body .page-title .page-breadcrumb .breadcrumb .breadcrumb-item + .breadcrumb-item::before{
    display:inline-block!important; float:none!important;
  }
}

/* Override seguro para el “padding-left:0” viejo (si existe en theme/otra regla) */
@media (max-width: 575.98px){
  body .page-title.hero-contactanos .page-breadcrumb .breadcrumb-item.active{
    padding-left: inherit !important;
    display: inline-flex !important;
  }
}