/* ==============================
   FQC - Únete al equipo (solo esta vista)
   Archivo: /unete-a-fqc/css/fqc-unete.css
   ============================== */

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

/* ==============================
   HERO ÚNETE AL EQUIPO
   ============================== */
body .page-title.hero-unete{
  --hero-h: clamp(360px, 45vh, 520px);
  min-height: var(--hero-h);
  display:flex;
  align-items:center;
  width:100%;
  overflow:hidden;

  /* anula fondos/overlays del theme */
  background-image:none !important;
  background-color:var(--fqc-bg) !important;

  /* Desktop: banner a la derecha, alto 100% */
  background: url('../imagenes/Unete_al_equipo_2.png?v=1') right center / auto 100% no-repeat,
              var(--fqc-bg) !important;
}

/* quita pseudos del theme SOLO aquí */
body .page-title.hero-unete::before,
body .page-title.hero-unete::after{
  content:none !important;
  display:none !important;
}

/* contenido por encima del fondo */
body .page-title.hero-unete > .container{
  position:relative;
  z-index:1;
}

/* sin recuadro blanco ni borde en este hero */
body .page-title.hero-unete .white-bg{
  background:transparent !important;
  box-shadow:none !important;
  border:0 !important;
}
body .page-title.hero-unete .page-breadcrumb{
  border-top:0 !important;
}

/* ===== Título en 2 líneas SOLO en celulares ===== */
body .page-title.hero-unete .unete-title .line1,
body .page-title.hero-unete .unete-title .line2{
  display:inline; /* default: una sola línea */
}

@media (max-width:575.98px){
  body .page-title.hero-unete .unete-title .line1,
  body .page-title.hero-unete .unete-title .line2{
    display:block;      /* celular: 2 líneas */
    line-height:1.05;
  }
}

/* ===== Imagen real móvil/tablet (no recorta) ===== */
body .page-title.hero-unete .hero-bg-mobile{ display:none; }

@media (max-width: 991.98px){
  body .page-title.hero-unete{
    background: var(--fqc-bg) !important;
    min-height:auto !important;
    height:auto !important;
    overflow:hidden !important;
    position:relative;
    padding:0 !important;
  }

  body .page-title.hero-unete .hero-bg-mobile{
    display:block;
    width:100%;
    height:auto;
    max-width:100%;
    object-fit:contain;
  }

  /* contenido encima del banner */
  body .page-title.hero-unete > .container{
    position:absolute !important;
    left:0; right:0;
    top:0;
    z-index:2;
  }

  /* aire al texto */
  body .page-title.hero-unete .white-bg{
    margin-top:.75rem;
  }
}

/* Breadcrumb responsive (móvil + tablet): active baja a otra línea */
@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;

    /* NO romper separador del theme */
    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;
    /* NO tocar content/font-family */
  }

  body .page-title .page-breadcrumb .breadcrumb .breadcrumb-item + .breadcrumb-item::before{
    display:inline-block !important;
    float:none !important;
    /* NO tocar content */
  }
}

/* ==============================
   SOCIAL HOVER (bloque team-member)
   ============================== */
.team-member .team-social-icon li a{
  transition: background-color .25s ease, transform .2s ease;
}
.team-member .team-social-icon li a:hover{
  background: var(--fqc-azul) !important;
  color:#fff !important;
  transform: translateY(-1px);
}

/* por si el theme aplica a .social-icons genérico */
.social-icons li a:hover,
.social-icons li:hover a{
  background: var(--fqc-azul) !important;
  color:#fff !important;
}

/* ==============================
   PLACEHOLDER SIEMPRE AZUL
   (aplica a inputs/textarea con class .ph-azul)
   ============================== */
.ph-azul::placeholder{
  color: var(--fqc-azul) !important;
  opacity: 1 !important;
  font-family: Century Gothic, Arial, sans-serif;
}
.ph-azul::-webkit-input-placeholder{ color:var(--fqc-azul) !important; opacity:1 !important; }
.ph-azul::-moz-placeholder{ color:var(--fqc-azul) !important; opacity:1 !important; }
.ph-azul:-ms-input-placeholder{ color:var(--fqc-azul) !important; }
.ph-azul::-ms-input-placeholder{ color:var(--fqc-azul) !important; }

/* Autofill (Chrome): respeta color del texto */
input.fqc_naranja:-webkit-autofill,
textarea.fqc_naranja:-webkit-autofill{
  -webkit-text-fill-color: var(--fqc-naranja);
  transition: background-color 100000s ease-in-out 0s;
}
input.fqc_azul:-webkit-autofill,
textarea.fqc_azul:-webkit-autofill{
  -webkit-text-fill-color: var(--fqc-azul);
  transition: background-color 100000s ease-in-out 0s;
}

/* ==============================
   (Opcional pero recomendado) Inputs focus azul FQC
   No cambia estructura, solo UX/consistencia visual
   ============================== */
#contact-form .form-control{
  color: var(--fqc-azul);
  caret-color: var(--fqc-azul);
  border-color: rgba(32,91,140,.35);
}
#contact-form .form-control:focus{
  border-color: var(--fqc-azul);
  box-shadow: 0 0 0 .2rem rgba(32,91,140,.15);
}
#contact-form textarea.form-control{ min-height:120px; }