/* =========================================================
   BARRA SUPERIOR DE PORTADA — RUTH.il

   POR QUÉ EXISTE ESTA HOJA
   ------------------------
   Esta es la barra completa de las portadas: la cabecera pegajosa, los
   enlaces del centro, el botón de acceder, la hamburguesa y el menú
   desplegable del teléfono.

   Estaba escrita DOS VECES, byte a byte igual, en home-people.css y en
   home-business.css: 29 reglas repetidas en cada hoja. Cualquier retoque
   había que hacerlo en los dos sitios, y el día que alguien lo hiciera
   en uno solo las dos portadas dejarían de parecerse.

   Ahora vive aquí una sola vez, y además la pueden usar las pantallas de
   demostración, que necesitan esta barra para que se pueda volver a las
   portadas desde dentro del recorrido.

   CÓMO SE CARGA
   -------------
   Va DESPUÉS de la hoja propia de la pantalla y ANTES de
   components/navbar/navbar.css, que es exactamente el sitio que ocupaban
   estas reglas cuando vivían dentro de las hojas de portada. Importa: la
   medida de la barra (alto 72, logo de 34, el interruptor y el hueco
   entre los botones de la derecha) la pone navbar.css, y la pone porque
   va la última. Si esta hoja se cargara después, la barra de las
   portadas volvería a medir distinto que la del resto del sitio.

   LO QUE NO ESTÁ AQUÍ
   -------------------
   El alto, el logo y el interruptor de tema: eso es de navbar.css y es
   común a las 28 pantallas. Aquí solo está lo que es propio de una
   portada.

   ESTRUCTURA REAL DEL HTML (importante para los selectores)
   ---------------------------------------------------------
   <header class="site-header">
     <div class="wrap">
       <nav class="main-nav">          ← AQUÍ está el flex + space-between
         <a class="nav-logo">…</a>     (lo pone navbar.css)
         <div class="nav-links">…</div> ← nuestros enlaces
         <div class="nav-right">…</div>
       </nav>
       <div class="mobile-menu">…</div>
     </div>
   </header>

   Los tres bloques (logo, nav-links, nav-right) son hijos de
   nav.main-nav, NO de header.site-header. Por eso el layout se toca
   en nav.main-nav (que ya lo trae de navbar.css) y los enlaces se
   ajustan apuntando a ".main-nav .nav-links", no a ".nav-links" a
   secas, para no chocar con otras .nav-links del sitio.
   ========================================================= */


/* ---------- LA CABECERA ----------
   Solo lo que es propio de una portada: pegarse arriba al bajar y el
   fondo traslúcido. El layout (flex + space-between) NO va aquí: lo
   pone navbar.css en nav.main-nav, que es quien contiene de verdad a
   los tres bloques. Ponerlo en header.site-header no servía de nada
   porque su único hijo directo es .wrap. */
header.site-header {
  position: sticky;
  top: 0;
  z-index: 1000;
  background: rgba(var(--bg-rgb),.86);
  backdrop-filter: blur(14px);
  -webkit-backdrop-filter: blur(14px);
  border-bottom: 1px solid var(--border);
}


/* ---------- LOS ENLACES DEL CENTRO ----------
   Son hijos de nav.main-nav, que ya es flex + space-between + gap:14px
   por navbar.css. Para que queden centrados RESPECTO A LA BARRA y no
   respecto al hueco que dejan el logo y los botones, se usa
   flex: 0 0 auto + margin: 0 auto: el navegador reparte todo el espacio
   sobrante por igual a los dos lados del bloque, con lo que su centro
   coincide con el centro de la barra.

   Se apunta con ".main-nav .nav-links" para asegurar que solo afecta a
   los enlaces de la barra de portada y no a otras .nav-links del sitio. */
.main-nav .nav-links {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 30px;
  flex: 0 0 auto;
  margin: 0 auto;
  white-space: nowrap;
}

/* Cada enlace es una caja flex de altura fija. Así:
     - el texto se centra en vertical dentro de su caja (align-items),
     - el texto se centra en horizontal dentro de su caja (justify-content),
     - las tres cajas miden lo mismo de alto (height: 32px),
     - line-height: 1 evita que el line-height heredado descuadre nada. */
.main-nav .nav-links a {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  height: 32px;
  line-height: 1;
  font-size: 14px;
  font-weight: 600;
  color: var(--text-2);
  text-decoration: none;
  transition: .2s;
}

.main-nav .nav-links a:hover {
  color: var(--text-1);
}


/* ---------- EL LADO DERECHO ----------
   navbar.css ya le da display:flex + align-items:center + gap:12px y un
   justify-content: flex-end. Aquí no hay que tocar nada: si se necesita
   más aire entre el interruptor y el botón, se ajusta en navbar.css,
   que es quien gobierna este bloque en las 28 pantallas. */


/* ---------- ACCEDER ---------- */
.nav-signin {
  display: inline-flex;
  align-items: center;
  gap: 7px;
  font-size: 13.5px;
  font-weight: 600;
  color: var(--text-1);
  padding: 9px 16px 9px 10px;
  border-radius: 100px;
  border: 1px solid rgba(var(--gold-rgb),.35);
  background: rgba(var(--gold-rgb),.08);
  text-decoration: none;
  white-space: nowrap;
  transition: .2s;
}

.nav-signin:hover {
  border-color: var(--gold-ink);
  background: rgba(var(--gold-rgb),.16);
}

.nav-signin .avatar {
  width: 22px;
  height: 22px;
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  background: linear-gradient(135deg, var(--gold), var(--gold-bright));
  flex-shrink: 0;
}

.nav-signin .avatar i {
  color: var(--dark-text);
  font-size: 12px;
}

/* En claro el dorado sobre blanco no se ve si no se le marca el borde. */
:root[data-theme="light"] .nav-signin {
  border-color: var(--gold-border);
  background: rgba(184,134,11,.10);
}

:root[data-theme="light"] .nav-signin:hover {
  background: rgba(184,134,11,.16);
}

:root[data-theme="light"] .nav-signin .avatar {
  border: 1.5px solid var(--gold-border);
}


/* ═══════════════════════════════════════
   HAMBURGUESA Y MENÚ DEL TELÉFONO
═══════════════════════════════════════ */

/* Escondida hasta los 768px, donde la enciende el bloque del final. */
.nav-burger {
  display: none;
  position: relative;
  width: 40px; height: 40px;
  border-radius: 10px;
  border: 1px solid var(--border-strong);
  background: var(--bg-3);
  cursor: pointer;
  flex-shrink: 0;
  align-items: center;
  justify-content: center;
  padding: 0;
}

.nav-burger span {
  position: absolute;
  left: 10px;
  width: 20px;
  height: 2px;
  background: var(--text-1);
  border-radius: 2px;
  transition: transform .25s ease, opacity .2s ease, top .25s ease;
}

.nav-burger span:nth-child(1) { top: 13px; }
.nav-burger span:nth-child(2) { top: 19px; }
.nav-burger span:nth-child(3) { top: 25px; }

/* Abierta, las tres rayas se convierten en aspa: la de arriba y la de
   abajo se juntan en el centro y giran, la del medio desaparece. */
.nav-burger.is-open span:nth-child(1) { top: 19px; transform: rotate(45deg); }
.nav-burger.is-open span:nth-child(2) { opacity: 0; }
.nav-burger.is-open span:nth-child(3) { top: 19px; transform: rotate(-45deg); }

.mobile-menu {
  display: none;
  flex-direction: column;
  gap: 4px;
  max-height: 0;
  overflow: hidden;
  opacity: 0;
  transition: max-height .3s ease, opacity .25s ease;
  border-top: 1px solid var(--border);
}

.mobile-menu.is-open {
  max-height: 420px;
  opacity: 1;
  padding: 18px 0 22px;
}

.mobile-menu a {
  padding: 12px 4px;
  font-size: 15px;
  font-weight: 600;
  color: var(--text-2);
  border-bottom: 1px solid var(--border);
  text-decoration: none;
}

.mobile-menu a:last-child,
.mobile-menu a.btn-primary { border-bottom: none; }

.mobile-menu-signin {
  display: flex !important;
  align-items: center;
  gap: 8px;
}

.mobile-menu-signin .avatar {
  width: 22px; height: 22px; border-radius: 50%;
  display: flex; align-items: center; justify-content: center;
  background: linear-gradient(135deg, var(--gold), var(--gold-bright));
  flex-shrink: 0;
}

.mobile-menu-signin .avatar i { color: var(--dark-text); font-size: 12px; }

.mobile-menu a.btn-primary { margin-top: 8px; }

/* Con el menú abierto la página de detrás no se mueve. */
body.menu-open { overflow: hidden; }


/* ---------- TELÉFONO ----------
   El mismo corte que usa el resto del sitio: 768px. */
@media (max-width: 768px) {
  .main-nav .nav-links { display: none; }
  .nav-right { gap: 10px; }
  .nav-signin { padding: 6px 12px 6px 8px; font-size: 12px; }
  .nav-signin .avatar { width: 18px; height: 18px; font-size: 10px; }
  .mobile-hidden { display: none !important; }
  .nav-burger { display: flex; }
  .mobile-menu { display: flex; }
}