/* ===========================
   NAVBAR v2 (limpia y unificada)
   =========================== */
:root{
  --gutter:32px;
  --pill-height:80px;
  --expand:260px;

  --light-bg:rgba(255,255,255,.24);
  --dark-bg:rgba(10,25,100,.40);
  --light-border:rgba(255,255,255,.27);
  --dark-border:rgba(255,255,255,.20);
  --light-text:#1e4a90;
}

/* ----- Contenedor principal ----- */
.navbar{
  position:fixed; inset:auto 0 auto 50%; transform:translateX(-50%);
  top:20px; width:90%; max-width:1050px;
  display:flex;
  align-items: flex-start !important;
  min-height:var(--pill-height);
  padding:0 var(--gutter);
  border-radius:44px;
  border:1px solid var(--light-border);
  background:var(--light-bg);
  box-shadow:0 8px 32px rgba(0,0,0,.08);
  backdrop-filter:blur(20px) saturate(150%); -webkit-backdrop-filter:blur(20px) saturate(150%);
  transition:padding-bottom .28s ease;
  z-index:1000;
  overflow:visible !important;
}
#navbar.expanded{ padding-bottom:var(--expand); }

/* Tema dinámico */
.navbar.light-theme{ background:var(--light-bg)!important; border-color:var(--light-border)!important; color:var(--light-text)!important; }
.navbar.dark-theme{  background:var(--dark-bg)!important;  border-color:var(--dark-border)!important;  color:#fff!important; }

.navbar.dark-theme .button {
  color: #1e4a90 !important;
  text-shadow: 0 2px 6px rgba(0,0,0,0.22);
}
.navbar.dark-theme .button:hover {
  color: #f7d417 !important;
  text-shadow: 0 2px 6px rgba(0,0,0,0.22);
}

/* ----- Rail fijo de enlaces (NO se mueve) ----- */
.desktop-navbar{
  position:relative;
  height:var(--pill-height) !important;
  display:flex; align-items:center;
  z-index:2; /* por encima del mega */
}

/* ----- Enlaces ----- */
.nav-links{ display:flex; flex:1; gap:18px; justify-content:center; align-items:center; list-style:none; margin:0; padding:0; }
.nav-links li{ position:relative; display:flex; align-items:center; }

.nav-links a{
  color:#1e4a90; font-weight:600; font-size:1.15rem;
  text-decoration:none; padding:10px 12px; border-radius:8px;
  transition:color .2s, background .2s;
}
.nav-links a:hover,.nav-links a:focus{ color:#0066ff; background:rgba(30,74,144,.08); }
.nav-links a.active{ color:#0066ff; text-decoration:underline; }

/* Botones de la derecha */
.nav-links .button{
  background:#fff; color:#1e4a90; font-weight:700; border-radius:32px; padding:10px 28px;
  box-shadow:0 2px 8px rgba(0,0,0,.04);
  transition:background .2s, color .2s;
  font-size:1rem; text-align:center;
}
.nav-links .button:hover{ background:#1e4a90; color:#fff; }

/* ----- Botón Conócenos (sin fondo) ----- */
.dropdown{ position:relative; z-index:1000; }
.dropdown-toggle{
  appearance: none; -webkit-appearance: none; /* quita skin nativo */
  background: transparent !important;
  border: 0 !important;
  padding: 10px 12px !important;
  font: inherit; color: inherit;
  border-radius: 8px;
  box-shadow: none !important;
  transition:color .2s, background .2s;
}
.dropdown-toggle .arrow{ transition:transform .2s; }
.dropdown-toggle[aria-expanded="true"] .arrow{ transform:rotate(180deg); }

/* Efectos comunes (sin fondos) */
.navbar a,.navbar button{
  background:none; border:none; color:inherit; font-size:1rem; border-radius:8px;
  transition:transform .28s, box-shadow .28s;
}
.navbar a:hover,.navbar button:hover{ transform:translateY(-2px) rotateX(10deg); box-shadow:0 8px 20px rgba(0,120,255,.4); }
.navbar a:active,.navbar button:active{ transform:none; box-shadow:0 4px 12px rgba(0,120,255,.2); }

/* ===========================
   MEGA integrado (gutter → gutter)
   =========================== */
#menu-conocenos.mega-container{
  position: absolute;
  top: var(--pill-height) !important;     /* justo bajo el rail */
  left: var(--gutter); right: var(--gutter);
  opacity: 0; transform: translateY(-8px);
  pointer-events: none;
  transition: opacity .25s ease, transform .25s ease;
}
#navbar.expanded .desktop-navbar #menu-conocenos.mega-container[data-open="true"]{
  opacity: 1 !important;
  transform: translateY(0) !important;
  pointer-events: auto !important;
}

/* Contenido interno del mega */
#menu-conocenos{ display: block !important; }
#menu-conocenos .mega-grid{ display:grid; grid-template-columns:repeat(3, minmax(180px,1fr)); gap:28px; }
#menu-conocenos .mega-col h4{ margin:0 0 12px; font-size:1rem; font-weight:800; }
#menu-conocenos a{ display:block; padding:8px 0; font-weight:600; text-decoration:none; border-radius:8px; }

/* Colores dentro del mega según tema */
.navbar.light-theme #menu-conocenos .mega-col h4,
.navbar.light-theme #menu-conocenos a{ color:var(--light-text); }
.navbar.light-theme #menu-conocenos a:hover{ background:rgba(30,74,144,.08); }
.navbar.dark-theme  #menu-conocenos .mega-col h4,
.navbar.dark-theme  #menu-conocenos a{ color:#fff; }
.navbar.dark-theme  #menu-conocenos a:hover{ background:rgba(255,255,255,.08); }

/* ----- Mata cualquier dropdown clásico heredado ----- */
#menu-conocenos.theme-light,#menu-conocenos.theme-dark{ background:transparent !important; border:0 !important; box-shadow:none !important; }
.dropdown[aria-expanded="true"] .dropdown-menu{ display:none !important; }

/* ===========================
   Móvil (overlay)
   =========================== */
@media (max-width:768px){
  .desktop-navbar{ display:none; }
  .mobile-menu{ display:block; }

  .mobile-menu__toggle{
    position:fixed; top:20px; left:20px;
    width:56px; height:56px; font-size:1.8rem;
    border:0; border-radius:50%; cursor:pointer;
    backdrop-filter:blur(12px) saturate(180%); -webkit-backdrop-filter:blur(12px) saturate(180%);
    transition:background .3s, color .3s;
    box-shadow:0 4px 12px rgba(0,0,0,.12), 0 2px 6px rgba(0,0,0,.08);
    z-index:1002;
  }
  .mobile-menu__panel{
    position:fixed; inset:0; opacity:0; pointer-events:none; transition:opacity .3s;
    display:flex; flex-direction:column; align-items:center; justify-content:center; padding:40px 0; z-index:1001;
  }
  .mobile-menu__panel.show{ opacity:1 !important; pointer-events:auto !important; }
  .mobile-menu__panel ul{ list-style:none; margin:0; padding:0; width:90%; max-width:360px; }
  .mobile-menu__panel li{ margin:16px 0; }
  .mobile-menu__panel a{ display:block; text-align:center; color:#fff; font-size:1.3rem; font-weight:700; text-decoration:none; padding:12px 0; }
  .mobile-menu__panel .button{ background:#fff; color:#1e4a90; border-radius:32px; margin-top:12px; }
}

/* === FIX 1: menú móvil oculto por defecto (en escritorio y móvil) === */
.mobile-menu{ display:none; }                 /* no mostrar contenedor en desktop */
.mobile-menu__panel{ display:none; }          /* panel oculto por defecto en cualquier tamaño */

/* En móviles activamos el contenedor y preparamos el panel */
@media (max-width:768px){
  .desktop-navbar{ display:none; }
  .mobile-menu{ display:block; }

  /* El panel existe, pero empieza invisible hasta que tenga .show */
  .mobile-menu__panel{
    display:flex;
    position:fixed; inset:0;
    opacity:0; pointer-events:none;
    transition:opacity .3s;
    flex-direction:column; align-items:center; justify-content:center;
    padding:40px 0; z-index:1001;
  }
  .mobile-menu__panel.show{
    opacity:1; pointer-events:auto;
  }
}

/* === FIX 2: botón Conócenos sin fondo ni “card” heredados === */
.nav-links .dropdown .dropdown-toggle{
  background:transparent !important;
  box-shadow:none !important;
}

/* (por si alguna regla vieja intenta revivir el dropdown clásico) */
.dropdown[aria-expanded="true"] .dropdown-menu{ display:none !important; }
#menu-conocenos.theme-light,
#menu-conocenos.theme-dark{ background:transparent !important; border:0 !important; box-shadow:none !important; }

/* Recordatorio de geometría del mega (por si faltaba en tu archivo) */
#menu-conocenos.mega-container{
  position:absolute;
  left:32px; right:32px; top:80px;
  width:calc(100% - 64px);
  opacity:0; transform:translateY(-8px);
  pointer-events:none;
  transition:opacity .25s ease, transform .25s ease;
}
#navbar.expanded .desktop-navbar #menu-conocenos.mega-container[data-open="true"]{
  opacity:1; transform:translateY(0); pointer-events:auto;
}

/* Igualar apariencia del botón "Conócenos" a los <a> del menú */
.nav-links .dropdown .dropdown-toggle{
  font-weight: 600;
  font-size: 1rem;
  line-height: 1;
  padding: 10px 12px;
  border-radius: 8px;
  color: #1e4a90;                 /* color base como el resto */
  background: transparent !important;
  box-shadow: none !important;
  transition: color .2s, background .2s;
}

/* Hover/focus idéntico al de los enlaces */
.nav-links .dropdown .dropdown-toggle:hover,
.nav-links .dropdown .dropdown-toggle:focus{
  transition:color .2s, background .2s;
  color: #0066ff;
  background: rgba(30,74,144,.08);
  text-decoration: none;
}

/* Sombras y color por tema también para <button> */
.navbar.light-theme a,
.navbar.light-theme button{
  color: var(--light-text);
  text-shadow:
    0 0px 6px rgba(255,255,255,.4),
    0 0 24px rgba(255,255,255,.7);
}

.navbar.dark-theme a,
.navbar.dark-theme button{
  color: #fff !important;
  text-shadow: 0 2px 6px rgba(0,0,0,.22);
}

/* Detalle de la flecha */
.dropdown-toggle .arrow{
  margin-left: 6px;
  font-size: .9em;
  opacity: .75;
  transition: transform var(--transition-fast);
}
/* Hover de "Conócenos" igual que el resto (anula el none !important) */
.nav-links .dropdown .dropdown-toggle:hover,
.nav-links .dropdown .dropdown-toggle:focus{
  color:#0066ff;
  background:rgba(30,74,144,.08);
  transform:translateY(-2px) rotateX(10deg);
  box-shadow:0 8px 20px rgba(0,120,255,.4) !important; /* clave */
}

/* Click/activo para consistencia */
.nav-links .dropdown .dropdown-toggle:active{
  transform:none;
  box-shadow:0 4px 12px rgba(0,120,255,.2) !important;
}
/* Misma animación de hover que los enlaces */
.nav-links .dropdown .dropdown-toggle{
  /* además de color/fondo, anima transform y sombra */
  transition:
    color .2s,
    background .2s,
    transform var(--transition-fast),
    box-shadow var(--transition-fast) !important;
  will-change: transform, box-shadow;
  backface-visibility: hidden;
  transform-origin: center;
}

/* Hover/Focus: mismo efecto que el resto */
.nav-links .dropdown .dropdown-toggle:hover,
.nav-links .dropdown .dropdown-toggle:focus{
    transition:
    color .2s,
    background .2s,
    transform var(--transition-fast),
    box-shadow var(--transition-fast) !important;
  color:#0066ff;
  background:rgba(30,74,144,.08);
  transform:translateY(-2px) rotateX(10deg);
  box-shadow:0 8px 20px rgba(0,120,255,.4) !important;
}

/* Activo: mismo “aterrizaje” */
.nav-links .dropdown .dropdown-toggle:active{
  transform:none;
  box-shadow:0 4px 12px rgba(0,120,255,.2) !important;
}
/* === Brand a la izquierda, enlaces alineados a la derecha === */
.desktop-navbar{ width:100%; display:flex; align-items:center; }
.navbar-brand{
  display:flex; align-items:center; gap:10px;
  margin-right:auto;                /* empuja el resto a la derecha */
  text-decoration:none;
  padding:0 4px;
}
.navbar-brand img{
  height:28px; display:block;
  transition:filter .25s ease, opacity .25s ease;
}

/* la lista ocupa el resto y alinea su contenido a la derecha */
.nav-links{
  flex:1;
  justify-content:flex-end;         /* << a la derecha */
  gap:28px;                         /* un poco más de aire */
}

/* === Cambiar color del logo según tema === */
/* Si solo tienes 'logo-azul.png', lo “blanqueamos” en tema oscuro */
.navbar.light-theme .navbar-brand img{ filter:none; }
.navbar.dark-theme  .navbar-brand img{ filter:brightness(0) invert(1); }

/* (Opcional, si luego tienes un logo blanco real)
.navbar-brand .logo--light{ display:block; }
.navbar-brand .logo--dark{ display:none; }
.navbar.dark-theme .logo--light{ display:none; }
.navbar.dark-theme .logo--dark{ display:block; }
*/
/* ====== Responsive navbar (móvil) ====== */

/* Asegura que en móvil NO se muestre la navbar de escritorio */
@media (max-width: 768px){
  .navbar{ display:none !important; }
  .desktop-navbar{ display:none !important; }
  .mobile-menu{ display:block !important; }
}

/* Botón hamburguesa con glass + tema */
@media (max-width: 768px){
  .mobile-menu__toggle{
    position: fixed; top: 20px; left: 20px;
    width: 56px; height: 56px;
    display:flex; align-items:center; justify-content:center;
    border:0; border-radius:50%;
    font-size:1.6rem; line-height:1;
    cursor:pointer; z-index:1002;
    box-shadow: 0 4px 12px rgba(0,0,0,.12), 0 2px 6px rgba(0,0,0,.08);
    backdrop-filter: blur(12px) saturate(180%);
    -webkit-backdrop-filter: blur(12px) saturate(180%);
    transition: background .3s, color .3s, transform .2s, opacity .2s;
  }
  .mobile-menu__toggle.light-theme{ background: rgba(255,255,255,.8); color:#1e4a90; }
  .mobile-menu__toggle.dark-theme{  background: rgba(10,25,100,.6);  color:#fff;    }

  /* Panel overlay con glass y tema dinámico */
  .mobile-menu__panel{
    position: fixed; inset: 0;
    display:flex; flex-direction:column; align-items:center; justify-content:center;
    opacity:0; pointer-events:none; transition:opacity .3s;
    padding:40px 0; z-index:1001;
    border: 1px solid rgba(255,255,255,0.18);
    backdrop-filter: blur(20px) saturate(150%);
    -webkit-backdrop-filter: blur(20px) saturate(150%);
  }
  .mobile-menu__panel.light-theme{ background: rgba(255,255,255,0.15); }
  .mobile-menu__panel.dark-theme{  background: rgba(10,25,100,0.24); }

  .mobile-menu__panel.show{ opacity:1; pointer-events:auto; }

  /* Enlaces del overlay */
  .mobile-menu__panel ul{ list-style:none; margin:0; padding:0; width:90%; max-width:360px; }
  .mobile-menu__panel li{ margin:16px 0; }
  .mobile-menu__panel a{
    display:block; text-align:center; text-decoration:none;
    font-size:1.3rem; font-weight:700; color:#fff; padding:12px 0;
    transition:opacity .2s;
  }
  .mobile-menu__panel a:hover{ opacity:.85; }
  .mobile-menu__panel .button{
    background:#fff; color:#1e4a90; border-radius:32px; margin-top:12px;
  }
}

/* === Reset y hover unificado para enlaces y Conócenos === */
/* Quita pill/rectángulo heredado de estilo-index.css y unifica animación */
.navbar .nav-links a:not(.button),
.navbar .nav-links .dropdown-toggle,
.navbar .mega-container a {
  background: transparent !important;
  border: 0 !important;
  box-shadow: none !important;
  outline: none !important;
  padding: 10px 12px !important;   /* tamaño homogéneo */
  border-radius: 8px !important;   /* solo para suavizar, sin fondo */
  color: inherit !important;
  transition: color .25s ease, transform .25s ease, text-shadow .25s ease;
  -webkit-tap-highlight-color: transparent; /* móvil */
}

/* Sin contornos raros en focus */
.navbar .nav-links a:not(.button):focus,
.navbar .nav-links .dropdown-toggle:focus,
.navbar .mega-container a:focus {
  outline: none !important;
  box-shadow: none !important;
}

/* Hover/Focus-visible: misma animación para todos, sin rectángulo */
.navbar .nav-links a:not(.button):hover,
.navbar .nav-links .dropdown-toggle:hover,
.navbar .nav-links a:not(.button):focus-visible,
.navbar .nav-links .dropdown-toggle:focus-visible,
.navbar .mega-container a:hover,
.navbar .mega-container a:focus-visible {
  background: transparent !important;
  box-shadow: none !important;     /* sin “píldora” */
  transform: translateY(-2px);     /* leve elevación */
}

/* Color de hover por tema (idéntico para todos) */
.navbar.light-theme .nav-links a:not(.button):hover,
.navbar.light-theme .nav-links .dropdown-toggle:hover,
.navbar.light-theme .mega-container a:hover {
  color: #0066ff !important;
}

.navbar.dark-theme .nav-links a:not(.button):hover,
.navbar.dark-theme .nav-links .dropdown-toggle:hover,
.navbar.dark-theme .mega-container a:hover {
  color: #f7d417 !important;
}

/* Asegura que el botón Conócenos no hereda ningún fondo del user agent */
.navbar .dropdown-toggle {
  background: transparent !important;
  cursor: pointer;
}
/* === Suavizado extra para Conócenos (dropdown-toggle) === */
/* Lo tratamos como los <a>: misma transición, mismo easing y sin rotateX */
:root{
  --nav-ease: cubic-bezier(.22,.61,.36,1); /* la de “elevación” suave */
}

.navbar .nav-links a:not(.button),
.navbar .mega-container a {
  /* garantizamos el mismo easing para todos */
  transition: color .25s ease, transform .25s var(--nav-ease), text-shadow .25s ease !important;
}

/* Conócenos: botón = inline-flex para medir igual y forzar la misma transición */
.navbar .nav-links .dropdown-toggle{
  display: inline-flex;
  align-items: center;
  gap: 6px;
  transform: translateY(0);                    /* estado base explícito */
  will-change: transform, color;
  backface-visibility: hidden;
  transition: color .25s ease,
              transform .25s var(--nav-ease),
              text-shadow .25s ease !important;
}

/* Hover/focus: misma elevación que el resto (sin rotateX) */
.navbar .nav-links .dropdown-toggle:hover,
.navbar .nav-links .dropdown-toggle:focus-visible{
  transform: translateY(-2px) !important;
}

/* La flecha también con transición suave (por si rota) */
.navbar .nav-links .dropdown-toggle .arrow{
  transition: transform .25s var(--nav-ease) !important;
  will-change: transform;
}
.navbar .nav-links a:not(.button),
.navbar .nav-links .dropdown-toggle {
  transition: color .25s ease,
              transform .25s cubic-bezier(.22,.61,.36,1),
              text-shadow .25s ease !important;
  transform: translateY(0);
  backface-visibility: hidden;
  will-change: transform, color;
}

.navbar .nav-links a:not(.button):hover,
.navbar .nav-links a:not(.button):focus-visible,
.navbar .nav-links .dropdown-toggle:hover,
.navbar .nav-links .dropdown-toggle:focus-visible {
  transform: translateY(-2px) !important;  /* sin rotateX */
  box-shadow: none !important;
}
.navbar a.button {
	transition: all 0.5s;
    background-color: #fff;
    color: #1e4a90;
    border-radius: 20px;
    padding: 10px 20px;
}
.navbar a.button:hover {
	transition: all 0.5s;
    background-color: #0066ff;
    color: #f7d417;
    border-radius: 20px;
    padding: 10px 20px;
}
.button {
	transition: all 0.5s;
    background-color: #fff;
    color: #1e4a90;
    border-radius: 20px;
    padding: 10px 20px;
}
.button:hover {
	transition: all 0.5s;
    background-color: #fff;
    color: #1e4a90;
    border-radius: 20px;
    padding: 10px 20px;
}
/* === SUAVIZADO EN AMBAS DIRECCIONES (para TODOS, incl. Conócenos) === */
:root{
  --nav-dur: .22s;
  --nav-ease: cubic-bezier(.22,.61,.36,1);
  --nav-hover-raise: -2px;
}

/* Estado base (anclas, botón Conócenos y links del mega) */
.navbar .nav-links a:not(.button),
.navbar .nav-links .dropdown-toggle,
.navbar .mega-container a{
  transform: translateY(0) translateZ(0);
  will-change: transform, color, text-shadow;
  backface-visibility: hidden;
  transition:
    transform var(--nav-dur) var(--nav-ease),
    color var(--nav-dur) ease,
    text-shadow var(--nav-dur) ease,
    background var(--nav-dur) ease !important;
}

/* Hover/focus-visible: misma transición (entrada) */
.navbar .nav-links a:not(.button):hover,
.navbar .nav-links a:not(.button):focus-visible,
.navbar .nav-links .dropdown-toggle:hover,
.navbar .nav-links .dropdown-toggle:focus-visible,
.navbar .mega-container a:hover,
.navbar .mega-container a:focus-visible{
  transform: translateY(var(--nav-hover-raise)) translateZ(0);
  transition:
    transform var(--nav-dur) var(--nav-ease),
    color var(--nav-dur) ease,
    text-shadow var(--nav-dur) ease,
    background var(--nav-dur) ease !important;
}

/* “Cortafuegos”: elimina cualquier rotateX/transition heredada en hover */
.navbar a:hover,
.navbar button:hover{
  transform: translateY(var(--nav-hover-raise)) translateZ(0) !important;
  transition: transform var(--nav-dur) var(--nav-ease) !important;
}
/* === CTA (Intranet / Afíliate): transición en ambas direcciones === */
:root{
  --nav-dur: .22s;
  --nav-ease: cubic-bezier(.22,.61,.36,1);
  --nav-hover-raise: -2px;
}

#navbar .nav-links .button{
  /* estado base con la MISMA transición que el resto */
  transform: translateY(0) translateZ(0);
  will-change: transform, background, color;
  backface-visibility: hidden;
  transition:
    transform var(--nav-dur) var(--nav-ease),
    background var(--nav-dur) ease,
    color var(--nav-dur) ease,
    box-shadow var(--nav-dur) ease !important;
}

#navbar .nav-links .button:hover,
#navbar .nav-links .button:focus-visible{
  /* misma elevación, sin rectángulo */
  transform: translateY(var(--nav-hover-raise)) translateZ(0);
}

/* --- Afinar el “cortafuegos”: que NO toque a los CTA .button --- */
/* (si tienes un bloque previo con `.navbar a:hover, .navbar button:hover`,
   este lo sobreescribe con más especificidad y excluye .button) */
.navbar a:not(.button):hover,
.navbar button:hover{
  transform: translateY(var(--nav-hover-raise)) translateZ(0) !important;
  transition: transform var(--nav-dur) var(--nav-ease) !important;
}