/* ==========================================================================
   ELENA HAIRLOVER — Cabecera común (todas las páginas públicas y el panel)
   Creado el 2026-09-21. Lo cargan la portada, reservas, las páginas legales y el panel.
   Desde el 2026-09-24 es también la ÚNICA fuente de los colores de la
   cabecera pública (fichas --cab-*), oscura en Noche y clara en Lino.

   Un solo sitio para el logo en movimiento y el aspecto de la cabecera: si
   se copiara en cada página, cambiar el giro obligaría a tocar tres archivos
   y acabarían distintos.

   Ojo: reservar.html NO carga base.css, así que aquí los colores van
   escritos tal cual en vez de con var(--color-…).
   ========================================================================== */

/* ── El logo: 0° → +55° → 0° → -55° → 0° ─────────────────────────────────
   Igual en el móvil y en el ordenador. Empieza de frente y nunca enseña el
   reverso ni se pone de perfil del todo.

   ⚠️ perspective(250px) es IMPRESCINDIBLE. Sin ella, girar +55° y -55° se
   dibuja exactamente igual (el logo solo se estrecha y se ensancha en el
   mismo sitio), y parecía que girase hacia un solo lado. Con perspectiva,
   el borde que se aleja se ve más pequeño y se nota hacia dónde gira.
   Con 400px la diferencia entre los bordes costaba verla; con 250px se nota.
   Orden del recorrido: primero hacia +55°, luego hacia -55°.

   Velocidad: 12° por segundo. Un ciclo recorre 55 × 4 = 220°, así que
   dura 220 / 12 = 18,33 s.
   La animación va en el ENLACE (o span) de dentro, nunca en el contenedor que
   se centra en el móvil: los dos usan `transform` y se pisarían. */
@keyframes logo-vaiven {
  0%   { transform: perspective(250px) rotateY(0deg); }     /* de frente */
  25%  { transform: perspective(250px) rotateY(55deg); }
  50%  { transform: perspective(250px) rotateY(0deg); }
  75%  { transform: perspective(250px) rotateY(-55deg); }
  100% { transform: perspective(250px) rotateY(0deg); }
}
.logo-spin-3d {
  animation: logo-vaiven 18.33s linear infinite;
  display: inline-block;
  transform-style: preserve-3d;
  backface-visibility: hidden;
}
/* Con «reducir movimiento» activado, el logo se queda quieto. */
@media (prefers-reduced-motion: reduce) {
  .logo-spin-3d { animation: none; }
}

/* ── Efectos del logo, a elegir en el panel (de Stoica, 2026-10-06) ──────
   Panel → «Tema» → «Logo» (lo pidió el propietario, primero en Stoica). Se guarda en
   settings/tema.logo y llega a cada página como <html data-logo="…">: el
   script del <head>, con la copia elenahairlover_efectos, y js/i18n-loader.js con lo
   de la nube. Sin nada elegido, el vaivén de arriba, que es el de siempre.
   Vale para la web y para el panel (el <head> de admin.html lee la misma
   copia).
   Las tarjetas de la ventana enseñan cada efecto con su propia muestra
   (.logo-muestra[data-efecto] .logo-muestra__giro), que NO cuelga de
   html[data-logo]: con dos data-logo anidados ganaría la regla escrita más
   abajo, no la más cercana. Por eso cada regla va en pareja.
   Todo va en el envoltorio (el enlace o el span), nunca en la imagen: la
   imagen ya lleva su filter (--cab-logo-sombra), que en Lino es «none» y
   no se puede sumar a otro. */
.logo-spin-3d,
.logo-muestra__giro { position: relative; }
.logo-muestra__giro {
  display: inline-block;
  transform-style: preserve-3d;
  backface-visibility: hidden;
}
.logo-muestra[data-efecto="vaiven"] .logo-muestra__giro { animation: logo-vaiven 18.33s linear infinite; }

/* Quieto */
html[data-logo="quieto"] .logo-spin-3d { animation: none; }

/* Destello dorado: una franja de luz cruza las letras cada 6 s. Va en una
   capa encima, recortada con la forma del propio logo (mask), para que solo
   brillen las letras y no el rectángulo. El logo claro y el oscuro (logo.png y
   logo-oscuro.png) tienen la misma forma: la misma máscara vale para los dos. */
html[data-logo="destello"] .logo-spin-3d,
.logo-muestra[data-efecto="destello"] .logo-muestra__giro { animation: none; }
html[data-logo="destello"] .logo-spin-3d::after,
.logo-muestra[data-efecto="destello"] .logo-muestra__giro::after {
  content: "";
  position: absolute;
  inset: 0;
  pointer-events: none;
  background: linear-gradient(105deg, transparent 38%, rgba(255, 246, 220, 0.95) 50%, transparent 62%) no-repeat;
  background-size: 250% 100%;
  -webkit-mask: url("../img/logo.png") center / 100% 100% no-repeat;
          mask: url("../img/logo.png") center / 100% 100% no-repeat;
  animation: logo-destello 6s ease-in-out infinite;
}
/* Con el fondo al 250 %, «100 %» deja la franja a la izquierda, fuera del
   logo, y «0 %» a la derecha: cruza en 1,3 s y espera el resto. */
@keyframes logo-destello {
  0%        { background-position: 100% 0; }
  22%, 100% { background-position: 0% 0; }
}

/* Resplandor: un halo dorado que aparece y se apaga, cada 4 s. */
html[data-logo="resplandor"] .logo-spin-3d,
.logo-muestra[data-efecto="resplandor"] .logo-muestra__giro { animation: logo-resplandor 4s ease-in-out infinite; }
@keyframes logo-resplandor {
  0%, 100% { filter: drop-shadow(0 0 0 rgba(201, 168, 76, 0)); }
  50%      { filter: drop-shadow(0 0 9px rgba(201, 168, 76, 0.85)); }
}

/* Respiración: crece un 3 % y vuelve, en 5 s. */
html[data-logo="respiracion"] .logo-spin-3d,
.logo-muestra[data-efecto="respiracion"] .logo-muestra__giro { animation: logo-respira 5s ease-in-out infinite; }
@keyframes logo-respira {
  0%, 100% { transform: scale(1); }
  50%      { transform: scale(1.03); }
}

/* Aparición: entra suave al abrir la página y se queda quieto. En la muestra
   se repite cada 4 s: si no, solo se vería una vez al abrir la ventana. */
html[data-logo="aparicion"] .logo-spin-3d { animation: logo-aparece 1.2s ease-out 0.15s both; }
.logo-muestra[data-efecto="aparicion"] .logo-muestra__giro { animation: logo-aparece-bucle 4s ease-out infinite; }
@keyframes logo-aparece {
  from { opacity: 0; transform: translateY(8px); filter: blur(3px); }
  to   { opacity: 1; transform: none; filter: none; }
}
@keyframes logo-aparece-bucle {
  0%       { opacity: 0; transform: translateY(8px); filter: blur(3px); }
  30%, 85% { opacity: 1; transform: none; filter: none; }
  100%     { opacity: 0; transform: none; filter: none; }
}

/* Con «reducir movimiento», ningún efecto. Lleva !important porque las
   reglas de arriba pesan más que la de siempre (.logo-spin-3d a secas). */
@media (prefers-reduced-motion: reduce) {
  html[data-logo] .logo-spin-3d,
  .logo-muestra .logo-muestra__giro { animation: none !important; }
  html[data-logo] .logo-spin-3d::after,
  .logo-muestra .logo-muestra__giro::after { display: none; }
}

/* ── Colores de la cabecera: una sola fuente para todas las páginas ──────
   La portada (.header) y reservas / privacidad / panel (.cabecera) toman el
   color de estas fichas. Noche: vidrio oscuro, como siempre. Lino: vidrio
   color lino con letras oscuras y el logo oscuro (logo-tema--oscuro). Van
   con los valores escritos tal cual porque reservar.html no carga base.css.
   El panel nunca lleva data-tema, así que se queda siempre en Noche. */
.header,
.cabecera {
  --cab-fondo: rgba(17, 17, 17, 0.88);
  --cab-fondo-bajando: rgba(17, 17, 17, 0.96);
  --cab-borde: rgba(197, 168, 128, 0.15);
  --cab-sombra: 0 4px 30px rgba(0, 0, 0, 0.3);
  --cab-sombra-bajando: 0 8px 32px rgba(0, 0, 0, 0.5);
  --cab-texto: #ECE7DF;   /* blanco roto (2026-10-05) */
  --cab-texto-suave: rgba(236, 231, 223, 0.62);
  --cab-texto-enlace: rgba(236, 231, 223, 0.82);
  --cab-acento: #C9A84C;
  --cab-sombra-texto: 0 1px 4px rgba(0, 0, 0, 0.9);
  --cab-logo-sombra: drop-shadow(0 2px 4px rgba(0, 0, 0, 0.3));
}
html[data-tema="lino"] .header,
html[data-tema="lino"] .cabecera {
  --cab-fondo: rgba(243, 240, 234, 0.9);
  --cab-fondo-bajando: rgba(243, 240, 234, 0.97);
  --cab-borde: rgba(111, 96, 64, 0.18);
  --cab-sombra: 0 4px 24px rgba(34, 33, 31, 0.06);
  --cab-sombra-bajando: 0 8px 28px rgba(34, 33, 31, 0.1);
  --cab-texto: #3A3732;          /* 10:1 sobre lino (2026-10-05: antes #22211F) */
  --cab-texto-suave: #57524A;    /* 6,8:1 */
  --cab-texto-enlace: #57524A;
  --cab-acento: #6F6040;         /* oro para texto de Lino, 5,4:1 */
  --cab-sombra-texto: none;
  --cab-logo-sombra: none;
}

/* La portada: vidrio fijo encima de la foto (antes estaba dentro de index.html). */
.header {
  background-color: var(--cab-fondo);
  -webkit-backdrop-filter: blur(16px);
  backdrop-filter: blur(16px);
  border-bottom: 1px solid var(--cab-borde);
  box-shadow: var(--cab-sombra);
}
.header.scrolled {
  background-color: var(--cab-fondo-bajando);
  box-shadow: var(--cab-sombra-bajando);
}

/* Logo: el de siempre en Noche, la copia oscura (misma imagen, solo el
   color) en Lino. Dos <img> porque un script no puede cambiar la foto antes
   de que se pinte sin que parpadee. El pie no lleva estas clases: sigue
   oscuro con el logo dorado. */
.logo-tema--oscuro { display: none !important; }
html[data-tema="lino"] .logo-tema--claro { display: none !important; }
html[data-tema="lino"] .logo-tema--oscuro { display: block !important; }
html[data-tema="lino"] .header .header__logo-img { filter: var(--cab-logo-sombra); }

/* ES / EN (/ CA / RO) de las cabeceras públicas. El panel (.admin-header)
   tiene sus propios botones de idioma y no se toca. */
.header .lang-switch__btn,
.cabecera:not(.admin-header) .lang-switch__btn { color: var(--cab-texto-suave); }
.header .lang-switch__btn:hover,
.cabecera:not(.admin-header) .lang-switch__btn:hover,
.cabecera:not(.admin-header) .lang-switch__btn.is-active { color: var(--cab-acento); }
.cabecera:not(.admin-header) .lang-switch__btn {
  background: transparent;
  border: none;
  cursor: pointer;
  padding: 4px 5px;
  font-size: 0.66rem;
  font-weight: 600;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  transition: color 0.2s ease;
}
.cabecera:not(.admin-header) .lang-switch__btn.is-active { font-weight: 700; }
.cabecera .lang-switch__btn[hidden] { display: none; }
.cabecera__idiomas { display: flex; align-items: center; gap: 4px; }

/* ── Estilo de la cabecera: liso, vidrio degradado o vidrio con brillo ──
   Lo elige el panel (Color → «Cabecera») y se guarda en settings/tema como
   cabecera + intensidad. El script del <head> pone <html data-cabecera> y
   --cab-i (de 0 a 1) antes de pintar. Sin el atributo («liso») la cabecera
   es la de siempre. El panel nunca lo lleva.
   Degradado: más tapado arriba y más transparente abajo, con desenfoque.
   En Lino el mínimo de opacidad es mayor (--cab-min) para que las letras
   oscuras se sigan leyendo encima de la foto de la portada. */
.header,
.cabecera {
  --cab-rgb: 17 17 17;
  --cab-min: 0.1;
  --cab-luz: rgb(201 168 76 / 0.24);
  --cab-linea-brillo: rgb(201 168 76 / 0.5);
  --cab-filo: rgb(255 255 255 / 0.1);
}
html[data-tema="lino"] .header,
html[data-tema="lino"] .cabecera {
  --cab-rgb: 243 240 234;
  --cab-min: 0.55;
  --cab-luz: rgb(255 255 255 / 0.6);
  --cab-linea-brillo: rgb(111 96 64 / 0.4);
  --cab-filo: rgb(255 255 255 / 0.75);
}
html[data-cabecera] .header,
html[data-cabecera] .cabecera {
  --cab-arriba: calc(0.55 + 0.45 * var(--cab-i, 0.7));
  --cab-abajo: calc(var(--cab-min) + (0.9 - var(--cab-min)) * var(--cab-i, 0.7));
  --cab-brillo: linear-gradient(transparent, transparent);
  background-color: transparent;
  background-image:
    var(--cab-brillo),
    linear-gradient(180deg, rgb(var(--cab-rgb) / var(--cab-arriba)) 0%, rgb(var(--cab-rgb) / var(--cab-abajo)) 100%);
  -webkit-backdrop-filter: blur(calc(6px + 18px * var(--cab-i, 0.7))) saturate(1.3);
  backdrop-filter: blur(calc(6px + 18px * var(--cab-i, 0.7))) saturate(1.3);
}
/* Al bajar, un poco más tapada: debajo ya hay texto, no la foto. */
html[data-cabecera] .header.scrolled,
html[data-cabecera] .cabecera.scrolled {
  --cab-arriba: calc(0.75 + 0.25 * var(--cab-i, 0.7));
  --cab-abajo: calc(0.5 + 0.45 * var(--cab-i, 0.7));
}
/* Con brillo: un reflejo en diagonal, la línea de abajo dorada y un filo de luz arriba. */
html[data-cabecera="brillo"] .header,
html[data-cabecera="brillo"] .cabecera {
  --cab-brillo: linear-gradient(105deg, transparent 12%, var(--cab-luz) 40%, transparent 64%);
  border-bottom-color: var(--cab-linea-brillo);
  box-shadow: var(--cab-sombra), inset 0 1px 0 var(--cab-filo);
}
html[data-cabecera="brillo"] .header.scrolled,
html[data-cabecera="brillo"] .cabecera.scrolled {
  box-shadow: var(--cab-sombra-bajando), inset 0 1px 0 var(--cab-filo);
}

/* ── La cabecera de reservas y del panel, con el aspecto de la portada ──
   Vidrio oscuro esmerilado, 90 px (72 px al bajar), logo de 80 px (50 px al
   bajar). La de la portada tiene sus propias clases en index.html y es
   `fixed` porque va encima de la foto; esta es `sticky`: se queda arriba sin
   tapar el contenido. `.scrolled` la pone js/utilidades.js. */
.cabecera {
  position: sticky;
  top: 0;
  z-index: 100;
  width: 100%;
  background-color: var(--cab-fondo);
  -webkit-backdrop-filter: blur(16px);
  backdrop-filter: blur(16px);
  border-bottom: 1px solid var(--cab-borde);
  box-shadow: var(--cab-sombra);
  transition: background-color 0.8s cubic-bezier(0.25, 1, 0.22, 1), box-shadow 0.8s cubic-bezier(0.25, 1, 0.22, 1);
}
.cabecera.scrolled {
  background-color: var(--cab-fondo-bajando);
  box-shadow: var(--cab-sombra-bajando);
}
.cabecera__inner {
  box-sizing: border-box;
  max-width: 1200px;
  height: 90px;
  margin: 0 auto;
  padding: 0 32px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
  transition: height 0.8s cubic-bezier(0.25, 1, 0.22, 1);
}
.cabecera.scrolled .cabecera__inner {
  height: 72px;
}
.cabecera__marca {
  display: flex;
  align-items: center;
  flex-shrink: 0;
}
.cabecera__marca img {
  display: block;
  width: auto;
  height: auto;
  max-height: 80px;
  filter: var(--cab-logo-sombra);
  transition: max-height 0.8s cubic-bezier(0.25, 1, 0.22, 1);
}
.cabecera.scrolled .cabecera__marca img {
  max-height: 50px;
}
.cabecera__acciones {
  display: flex;
  align-items: center;
  gap: 20px;
}
/* Enlace de texto como los de la portada («Volver» en reservas) */
.cabecera__enlace {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  font-size: 0.7rem;
  font-weight: 600;
  letter-spacing: 0.15em;
  text-transform: uppercase;
  color: var(--cab-texto-enlace);
  text-decoration: none;
  transition: color 0.2s ease;
}
.cabecera__enlace:hover,
.cabecera__enlace:focus-visible {
  color: var(--cab-acento);
}

/* ── Móvil: el logo centrado, como en la portada ── */
@media (max-width: 768px) {
  .cabecera__inner {
    position: relative;
    padding: 0 20px;
  }
  .cabecera__marca {
    position: absolute;
    left: 50%;
    top: 50%;
    transform: translate(-50%, -50%);
  }
  /* Reservas: «‹ Volver» a la izquierda, ES/EN a la derecha, logo en medio */
  .cabecera__acciones {
    width: 100%;
    justify-content: space-between;
  }
  .cabecera__volver {
    order: -1;
    min-height: 44px;
  }
}