/* =================================================================
   HEADER PROFESIONAL — Abogada Isabella Gonzales
   Paleta: azul marino #13315c · turquesa #1ebbf0 · dorado #c6a15b
   ================================================================= */

:root{
  --ig-navy:#13315c;
  --ig-navy-dark:#0e2647;
  --ig-cyan:#1ebbf0;
  --ig-gold:#c6a15b;
}

/* ---------- BARRA SUPERIOR (top bar) en azul marino ---------- */
.masthead .top-bar,
.masthead .top-bar .top-bar-bg{
  background-color: var(--ig-navy) !important;
  background-image: linear-gradient(90deg, var(--ig-navy-dark), var(--ig-navy)) !important;
}
.masthead .top-bar{ min-height: 46px; }
.masthead .top-bar .mini-contacts,
.masthead .top-bar .mini-contacts a,
.masthead .top-bar a,
.masthead .top-bar .mini-widgets *{
  color:#e7eef7 !important;
}
.masthead .top-bar .mini-contacts:hover,
.masthead .top-bar .mini-contacts:hover a{ color:#ffffff !important; }
/* icono del telefono/horario en dorado para un toque elegante */
.masthead .top-bar .mini-contacts .sosa-icon,
.masthead .top-bar .mini-contacts i,
.masthead .top-bar .mini-contacts:before{ color: var(--ig-gold) !important; }

/* Redes sociales: circulos sutiles con hover turquesa */
.masthead .top-bar .soc-ico a{
  color:#e7eef7 !important;
  background: rgba(255,255,255,0.10) !important;
  border-radius:50% !important;
  width:30px !important; height:30px !important; line-height:30px !important;
  text-align:center !important; margin-left:6px !important;
  transition: all .25s ease !important;
}
.masthead .top-bar .soc-ico a:hover{
  background: var(--ig-cyan) !important;
  color:#fff !important;
  transform: translateY(-2px);
}

/* ---------- HEADER PRINCIPAL: NO sticky (scrollea con la pagina) ----------
   El header se mantiene en su posicion natural y se desplaza al hacer scroll.
   Para evitar la franja blanca que se veia al desplazarse, pintamos el
   fondo del body/html con el mismo azul oscuro del hero. */
html body .masthead.inline-header{
  position:relative !important; top:0 !important;
  box-shadow:0 4px 18px rgba(14,42,71,0.18) !important;
  isolation:isolate; /* aisla el z-index del pseudo-elemento */
}
/* Fondo solido del header via pseudo-elemento (a prueba de inline styles del tema) */
html body .masthead.inline-header::before{
  content:""; position:absolute; inset:0; z-index:-1; pointer-events:none;
  background:#1668c9;
  background-image:linear-gradient(90deg,#0e5fbd 0%, #1781e0 55%, #1ebbf0 100%);
}
/* La barra del menu y wrap interno transparentes para ver el azul del ::before */
html body .masthead .header-bar,
html body .masthead #header-wrap{ background:transparent !important; background-color:transparent !important; }

/* Fondo oscuro del documento SOLO arriba para evitar la franja blanca al scrollear.
   El contenido (#main) mantiene su propio fondo blanco. */
html{ background-color:#0e2a47 !important; }
body{ background-color:transparent !important; }
/* El contenido principal mantiene fondo blanco como antes */
#main{ background-color:#ffffff !important; }
#header-wrap, .header-bar{ position:relative !important; }
.header-bar{
  display:flex !important; align-items:center !important;
  flex-wrap:nowrap !important;
  gap:14px; padding-top:6px; padding-bottom:6px;
}
.header-bar .branding{ margin:0 !important; flex:0 0 auto; }
/* buscador fuera del header en escritorio (queda en el menú móvil) */
.masthead .mini-search{ display:none !important; }

/* ---------- LOGO ---------- */
/* Forzamos position:static para evitar que el tema The7 lo desplace al hacer sticky */
.branding{ position:static !important; }
.branding a.ig-logo-link{ display:inline-flex !important; align-items:center; line-height:0;
  position:static !important; left:auto !important; top:auto !important; }
.branding img.ig-logo{ height:54px; width:auto; max-width:100%; display:block !important;
  visibility:visible !important; opacity:1 !important; transition:height .25s ease; }

/* ---------- MENÚ PRINCIPAL ---------- */
.masthead{ --the7-menu-color:var(--ig-navy) !important; }
#primary-menu{ display:flex !important; flex-wrap:nowrap !important; align-items:center; justify-content:flex-end; flex:0 1 auto; margin-left:auto !important; }
#primary-menu > li{ white-space:nowrap; }
#primary-menu > li > a{
  padding:10px 11px !important;
  position:relative;
}
#primary-menu > li > a .menu-text{
  color:var(--ig-navy) !important;
  font-weight:600 !important;
  font-size:13px !important;
  letter-spacing:.2px;
  text-transform:uppercase;
  transition:color .2s ease;
}
/* subrayado animado centrado */
#primary-menu > li > a:before{
  content:""; position:absolute; left:15px; right:15px; bottom:2px;
  height:2px; background:var(--ig-cyan);
  transform:scaleX(0); transform-origin:center; transition:transform .28s ease;
}
#primary-menu > li > a:hover:before,
#primary-menu > li.act > a:before,
#primary-menu > li.current-menu-item > a:before{ transform:scaleX(1); }
#primary-menu > li > a:hover .menu-text,
#primary-menu > li.act > a .menu-text,
#primary-menu > li.current-menu-item > a .menu-text{ color:var(--ig-cyan) !important; }
/* quitar la linea decorativa antigua del tema */
#primary-menu > li > a:after{ display:none !important; }

/* ---------- BOTÓN CTA en el header ---------- */
a.ig-cta{
  display:inline-flex; align-items:center; gap:8px;
  background:linear-gradient(135deg, var(--ig-cyan), #39dfaa);
  color:#fff !important; font-weight:700; font-size:13px;
  letter-spacing:.4px; text-transform:uppercase;
  padding:11px 18px; border-radius:50px; white-space:nowrap;
  box-shadow:0 6px 16px rgba(30,187,240,0.35);
  transition:all .25s ease; margin-left:6px; flex:0 0 auto;
}
a.ig-cta:hover{ transform:translateY(-2px); box-shadow:0 8px 22px rgba(30,187,240,0.45); color:#fff !important; }

/* buscador en oscuro */
.masthead .mini-search a, .masthead .mini-search .mini-search-word{ color:var(--ig-navy) !important; }

/* ---------- STICKY / FLOATING HEADER ---------- */
.floating-menu.masthead{
  background:#ffffff !important;
  box-shadow:0 6px 22px rgba(19,49,92,0.14) !important;
}
.floating-menu .branding img.ig-logo{ height:50px; }

/* ---------- RESPONSIVE ---------- */
@media (max-width:1300px){
  #primary-menu > li > a{ padding:10px 11px !important; }
  #primary-menu > li > a .menu-text{ font-size:13px !important; letter-spacing:.2px; }
}
@media (max-width:1100px){ .branding img.ig-logo{ height:54px; } a.ig-cta{ padding:10px 16px; font-size:12px; } }

/* ----- MÓVIL: header y menú desplegable elegantes ----- */
@media (max-width:991px){
  .branding img.ig-logo{ height:46px; }
  .header-bar{ gap:10px; }
  a.ig-cta{ display:none; } /* el CTA se mueve dentro del menu movil */
  /* boton hamburguesa */
  .masthead .mobile-menu-icon,
  .masthead .toggle-menu{ color:var(--ig-navy) !important; }
  .masthead .mobile-menu-icon i, .masthead .mobile-menu-icon span{ background-color:var(--ig-navy) !important; color:var(--ig-navy) !important; }
  /* panel del menu movil */
  .mobile-menu, .mobile-navigation, #mobile-menu, .show-mobile-menu .main-nav{
    background:#ffffff !important;
  }
  #primary-menu, .mobile-navigation ul{ display:block !important; }
  #primary-menu > li > a .menu-text,
  .mobile-navigation li a{
    color:var(--ig-navy) !important; text-transform:uppercase; font-weight:600;
  }
  .mobile-navigation li{ border-bottom:1px solid #eef2f7; }
  #primary-menu > li > a:before{ display:none; }
}
@media (max-width:480px){ .branding img.ig-logo{ height:40px; } }