/* Cabecera común a TODAS las páginas: portada, términos, privacidad y borrado.
   Vive aparte para no repetirla en cuatro sitios (y para que al tocarla cambie
   en todas a la vez). Se carga DESPUÉS del CSS propio de cada página, así puede
   pisar la cabecera antigua de styles.css.

   Usa var(--maxw) de quien la cargue: 1080 en la portada, 760 en los documentos
   legales, de modo que el logo siempre queda alineado con el texto de la página.
   Los colores llevan valor de respaldo por si falta la variable. */

/* Tipografía del logo, servida desde este dominio (nada de Google: cargarla de
   fuera enviaría la IP del visitante a un tercero). Licencia OFL. */
@font-face {
  font-family: "Cormorant Garamond";
  font-style: normal;
  font-weight: 300;
  font-display: swap;
  src: url("fonts/cormorant-garamond-300-latin-ext.woff2") format("woff2");
  unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}
@font-face {
  font-family: "Cormorant Garamond";
  font-style: normal;
  font-weight: 300;
  font-display: swap;
  src: url("fonts/cormorant-garamond-300-latin.woff2") format("woff2");
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}

.site-header {
  position: sticky; top: 0; z-index: 20;
  display: block; padding: 0; max-width: none; margin: 0;   /* anula la de styles.css */
  background: rgba(11, 6, 17, 0.72);
  backdrop-filter: saturate(160%) blur(14px);
  -webkit-backdrop-filter: saturate(160%) blur(14px);
  border-bottom: 1px solid var(--border, rgba(255, 255, 255, 0.09));
  box-shadow: none;
}
.site-header.scrolled { box-shadow: 0 8px 30px rgba(0, 0, 0, 0.45); }

.header-inner {
  max-width: var(--maxw, 1080px); margin: 0 auto;
  padding: 14px 24px;
  display: flex; align-items: center; justify-content: space-between; gap: 16px;
  transition: padding 0.25s ease;
  position: relative;
}
.site-header.scrolled .header-inner { padding-top: 10px; padding-bottom: 10px; }

.brand-row { display: flex; align-items: center; gap: 16px; text-decoration: none; }
.brand-row img { height: 42px; width: auto; }
.brand {
  font-family: "Cormorant Garamond", Didot, "Bodoni MT", Georgia, serif;
  font-size: 28px; font-weight: 300; letter-spacing: 3.4px;
  color: var(--text, #f4eff9);
  line-height: 1; padding-top: 2px;
  background: none; -webkit-text-fill-color: currentColor;   /* anula el degradado viejo */
}

.nav { display: flex; gap: 22px; font-size: 14.5px; color: var(--text-dim, var(--dim, #b6aac9)); }
.nav a { color: inherit; text-decoration: none; }
.nav a:hover { color: var(--text, #fff); text-decoration: none; }

/* Botón de tres rayas: oculto en escritorio, se enciende en la media query */
.menu-btn {
  display: none;
  width: 42px; height: 42px; padding: 11px 9px;
  background: none; border: 0; cursor: pointer;
  flex-direction: column; justify-content: space-between;
}
.menu-btn span {
  display: block; height: 2px; width: 100%; border-radius: 2px;
  background: var(--text, #f4eff9);
  transition: transform 0.3s cubic-bezier(0.22, 1, 0.36, 1), opacity 0.2s ease;
}
.menu-btn[aria-expanded="true"] span:nth-child(1) { transform: translateY(9px) rotate(45deg); }
.menu-btn[aria-expanded="true"] span:nth-child(2) { opacity: 0; }
.menu-btn[aria-expanded="true"] span:nth-child(3) { transform: translateY(-9px) rotate(-45deg); }

@media (max-width: 880px) {
  .menu-btn { display: flex; }
  .nav {
    position: absolute; top: 100%; left: 0; right: 0;
    flex-direction: column; gap: 0;
    background: rgba(13, 8, 20, 0.97);
    backdrop-filter: blur(16px); -webkit-backdrop-filter: blur(16px);
    /* Se pliega con grid: la animación sale suave sin saber cuánto mide dentro. */
    display: grid; grid-template-rows: 0fr;
    transition: grid-template-rows 0.32s cubic-bezier(0.22, 1, 0.36, 1);
    overflow: hidden;
    /* CERRADO: sin bordes. Aunque la fila mida 0, un borde se dibuja igual, y los
       de los enlaces sumaban una franja morada de unos 6px bajo la cabecera. */
    border-bottom: 0;
  }
  .site-header.abierto .nav { grid-template-rows: 1fr; border-bottom: 1px solid var(--border, rgba(255, 255, 255, 0.09)); }
  .nav > a {
    min-height: 0; overflow: hidden;
    padding: 0 24px; line-height: 0;
    font-size: 16px; color: var(--text, #f4eff9);
    border-top: 0;
    transition: padding 0.32s ease, line-height 0.32s ease;
  }
  .site-header.abierto .nav > a {
    padding: 15px 24px; line-height: 1.6;
    border-top: 1px solid var(--border, rgba(255, 255, 255, 0.09));
  }
  .site-header.abierto .nav > a:first-child { border-top: 0; }
  .nav a:active { background: rgba(255, 255, 255, 0.05); }
}
@media (max-width: 420px) {
  .brand-row img { height: 34px; }
  .brand-row { gap: 12px; }
  .brand { font-size: 24px; letter-spacing: 2.6px; }
}