/* 20-header-nav.css
   Header sticky + navegación + dropdown + botón login.
*/

/*.siteHeader{
  position: sticky;
  top: 0;
  z-index: 60;
  backdrop-filter: blur(14px);
  background: rgba(7,11,22,.55);
  border-bottom: 1px solid rgba(173,132,227,.18);
} */

.headerInner{
  max-width: 1200px;
  margin: 0 auto;
  padding: 14px 18px;
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap: 18px;

}

/* Marca/Logo */
.brand{
  display:flex;
  align-items:center;
  gap: 12px;
  text-decoration:none;
  color: var(--text);
}

/* Tamaño del logo del header (editable desde aquí) */
:root{
  --brand-logo-size: 64px; /* puedes probar 56px, 64px, 72px */
}

.brandLogo{
  width: var(--brand-logo-size);
  height: var(--brand-logo-size);
  object-fit: contain;
}

.brandTop{ font-weight: 900; letter-spacing:.2px; }
.brandBottom{ font-size: 12px; color: var(--muted); margin-top: 2px; }



/* Menú centrado y ocupando más espacio */
.navMain{
  flex: 1;
  display:flex;
  justify-content:center;
}

/*.navList{ list-style:none; display:flex; gap: 18px; margin:0; padding:0; }*/
/* Que el menú use más del ancho disponible */
.navList{
  list-style:none;
  display:flex;
  justify-content:center;
  gap: 28px;            /* más separación horizontal */
  margin:0;
  padding:0;
  width: 100%;          /* ocupa el ancho del nav */
  max-width: 900px;     /* controla “qué tanto” se expande */
}

.navItem{ position: relative; }

.navLink{
  display:inline-flex;
  padding: 12px 12px;
  text-decoration:none;
  color: rgba(234,240,255,.90);
  font-weight: 900;
  font-size: 16px;
  letter-spacing:.2px;
  border-radius: 12px;
  font-family: "Inter", system-ui, -apple-system, Segoe UI, Roboto, Arial, sans-serif;
}

.navLink:hover{
  color: var(--primary2);
  background: rgba(179,204,246,.08);
}

/* Donar (CTA) */
.navLinkStrong{
  color: rgba(7,11,22,.95);
  background: linear-gradient(135deg, rgba(173,132,227,.95), rgba(179,204,246,.92));
}
.navLinkStrong:hover{ filter: brightness(1.04); }

/* Dropdown */
.navDrop{
  position:absolute;
  left: 0;
  top: 100%;
  margin-top: 8px;
  min-width: 230px;
  background: rgba(15,22,48,.96);
  border: 1px solid rgba(173,132,227,.22);
  border-radius: 16px;
  padding: 10px;
  box-shadow: var(--shadow);
  display:none;
  z-index: 80;
  font-family: "Inter", system-ui, -apple-system, Segoe UI, Roboto, Arial, sans-serif;
}

/* “puente invisible” para que no se cierre al bajar el mouse */
.navDrop::before{
  content:"";
  position:absolute;
  left:0;
  right:0;
  top:-8px;
  height: 8px;
  font-family: "Inter", system-ui, -apple-system, Segoe UI, Roboto, Arial, sans-serif;
}

.navDrop a{
  display:block;
  padding: 10px 12px;
  border-radius: 12px;
  text-decoration:none;
  color: rgba(234,240,255,.85);
  font-weight: 800;
  font-size: 13px;
  transition: background .15s ease, color .15s ease;
  font-family: "Inter", system-ui, -apple-system, Segoe UI, Roboto, Arial, sans-serif;
}

.navDrop a:hover{
  background: rgba(173,132,227,.16);
  color: var(--text);
}

/* Hover mantiene visible */
.navItem:hover .navDrop{ display:block; }

/* Acciones (login) */
.headerActions{ display:flex; gap: 10px; }

.btnLogin{
  padding: 10px 14px;
  border-radius: 14px;
  border: 1px solid rgba(179,204,246,.26);
  background: rgba(179,204,246,.08);
  text-decoration:none;
  color: rgba(234,240,255,.92);
  font-weight: 900;
}

.btnLogin:hover{
  background: rgba(173,132,227,.14);
  border-color: rgba(173,132,227,.32);
}

/* Responsive (por ahora ocultamos nav en móvil) */
@media (max-width: 980px){
  .navMain{ display:none; }
}

/* ===== Logo superior centrado (logo + texto) ===== */
.logoTop{
  max-width: 1200px;
  margin: 0 auto;
  padding: 18px 18px 0;
}

.logoTopInner{
  display:flex;
  justify-content:center; /* ✅ centra el contenido dentro del ancho */
}

.brandStatic{
  display:flex;
  align-items:center;
  justify-content:center;
  gap: 14px;
  text-decoration:none;
  color: var(--text);
  text-align: left; /* el texto se lee mejor así */
}

.brandStatic .brandLogo{
  width: 130px;
  height: 130px;
  object-fit: contain;
}

/* Opcional: centra el texto verticalmente y mejora la alineación */
.brandStatic .brandText{
  display:flex;
  flex-direction:column;
  justify-content:center;
}

/* ===== Barra sticky (solo menú + acciones) ===== */
.siteHeaderBar{
  position: sticky;
  top: 0;
  z-index: 60;
  backdrop-filter: blur(14px);

  /* ✅ glass claro con un toque de color */
  background:
    radial-gradient(900px 60px at 15% 0%, var(--tintC), transparent 65%),
    radial-gradient(900px 60px at 85% 0%, var(--tintA), transparent 65%),
    var(--glass);

  border-bottom: 1px solid var(--glassBorder);
}

/* =========================================================
   NAV CLARO “DIFERENTE” (estilo propio) – solo colores
   - Mantiene comportamiento y estilos (hover/dropdown).
   - Cambia: color de letras, dropdown, hover y el recuadro al hover.
   - Debe contrastar con el resto del sitio, sin oscurecer.
========================================================= */

/* Links del menú (antes estaban en blanco) */
.navLink{
  color: rgba(20,36,70,.92);                 /* texto oscuro */
  background: transparent;
}

.navLink:hover{
  color: rgba(20,36,70,.98);
  background: rgba(179,204,246,.28);         /* azul suave (diferente a cards) */
}

/* Dropdown (antes era oscuro) */
.navDrop{
  background:
    radial-gradient(320px 120px at 20% 0%, rgba(179,204,246,.40), transparent 60%),
    radial-gradient(320px 120px at 85% 0%, rgba(173,132,227,.30), transparent 60%),
    rgba(255,255,255,.86);
  border: 1px solid rgba(20,36,70,.14);
  box-shadow: 0 18px 45px rgba(20,36,70,.12);
}

/* Texto de submenús */
.navDrop a{
  color: rgba(20,36,70,.88);
}

/* Hover del submenú (el recuadro que te gusta) */
.navDrop a:hover{
  background: rgba(173,132,227,.18);         /* lavanda suave */
  color: rgba(20,36,70,.98);
}

/* Botón login (antes estaba pensado para oscuro) */
.btnLogin{
  color: rgba(20,36,70,.92);
  background: rgba(255,255,255,.70);
  border: 1px solid rgba(20,36,70,.14);
}

.btnLogin:hover{
  background: rgba(179,204,246,.28);
  border-color: rgba(173,132,227,.22);
}

/* IMPORTANTE: no tocamos navLinkStrong (DONAR) para conservar tu color */

/* ===== FIX CTA DONAR (no heredar hover de .navLink) ===== */
.navLink.navLinkStrong{
  background: linear-gradient(135deg, rgba(173,132,227,.95), rgba(179,204,246,.92));
  color: rgba(7,11,22,.95);
}

/* Hover del CTA: se mantiene “especial” y NO usa el hover azul del menú */
.navLink.navLinkStrong:hover{
  background: linear-gradient(135deg, rgba(173,132,227,1), rgba(179,204,246,1));
  filter: brightness(1.05);
}

/* Evita que el hover general cambie el CTA */
.navLinkStrong:hover{
  background: linear-gradient(135deg, rgba(173,132,227,1), rgba(179,204,246,1));
}