/* LA CABECERA COMÚN DE LA WEB (Diego, 25/09): la misma en la portada, en
   /comercios y en el aviso legal. La pinta web-cabecera.js dentro del hueco
   <header id="webCabecera" class="wc">; este fichero es su único estilo.
   Todo lleva el prefijo "wc-" para no chocar con los estilos de cada página
   (el flyer, por ejemplo, tiene sus propias .marco, .volver y h2).

   ⚠ SÓLO EN PANTALLA. El flyer (/comercios) se imprime en A4 y la cabecera
   no puede salir en el papel ni mover nada: se oculta en @media print, y el
   hueco que deja arriba (.wc-hueco) va dentro de @media screen.

   ⚠ TAMAÑOS EN rem, como en la portada: con el zoom del navegador, lo que va
   en unidades de ventana se queda clavado mientras el texto crece. */

:root{
  --wc-alto:3.5rem;
  /* El alto de la franja de avisos (30/09), si está a la vista: lo pone
     web-cabecera.js midiéndola (en el móvil pequeño son dos líneas). Sin
     franja, o cerrada, 0. */
  --wc-franja:0px;
  /* El alto de verdad, con la franja y con la muesca del iPhone si algún día
     la página la cubre (hoy ninguna lleva viewport-fit=cover, así que suma
     0). Lo usan el hueco de arriba y el scroll-margin de las secciones de la
     portada. */
  --wc-alto-total:calc(var(--wc-alto) + var(--wc-franja) + env(safe-area-inset-top, 0px));
}
@media (min-width:64rem){
  :root{ --wc-alto:4.25rem; }
}

/* El hueco que deja la cabecera fija en las páginas que empiezan arriba del
   todo (el flyer y el aviso legal). La portada no lo lleva: su primera
   sección ya empieza por debajo de la cabecera. */
@media screen{
  .wc-hueco{ padding-top:var(--wc-alto-total); }
}

.wc{
  --wc-oro:#C89B3C;
  --wc-oro-claro:#F3D382;
  --wc-texto:#F4EEE2;
  --wc-texto-suave:#D8CEBC;
  --wc-linea:rgba(200,155,60,.32);
  --wc-linea-suave:rgba(200,155,60,.18);
  position:fixed;top:0;left:0;right:0;z-index:50;
  box-sizing:border-box;
  height:var(--wc-alto-total);
  padding-top:env(safe-area-inset-top, 0px);
  background:rgba(18,14,11,.84);
  border-bottom:1px solid var(--wc-linea-suave);
  font-family:'Space Grotesk','Plus Jakarta Sans','Helvetica Neue',Arial,sans-serif;
  transition:box-shadow .25s ease, background-color .25s ease;
}
.wc *,.wc *::before,.wc *::after{ box-sizing:border-box; }
/* EL DESENFOQUE, SÓLO CUANDO HAY ALGO PASANDO POR DEBAJO (26/09). Arriba del
   todo no hay nada que desenfocar, y el desenfoque cuesta en cada fotograma:
   con las animaciones de la primera pantalla (el punto que late, la flecha),
   la portada quieta daba la mitad de fotogramas que la de antes (medido en
   Edge). Lo enciende web-cabecera.js al bajar, junto con la sombra. */
.wc.wc-con-sombra{
  box-shadow:0 8px 24px rgba(0,0,0,.45); background:rgba(18,14,11,.93);
  -webkit-backdrop-filter:blur(12px) saturate(1.2);
          backdrop-filter:blur(12px) saturate(1.2);
}

.wc-barra{
  height:var(--wc-alto);
  display:flex;align-items:center;gap:.75rem;
  max-width:80rem;margin:0 auto;
  padding-left:calc(1rem + env(safe-area-inset-left, 0px));
  padding-right:calc(1rem + env(safe-area-inset-right, 0px));
}

/* ---------- la marca: el ojo del logo y el nombre ---------- */
.wc-marca{
  display:flex;align-items:center;gap:.6rem;min-width:0;
  text-decoration:none;color:var(--wc-oro-claro);
  margin-right:auto;
}
.wc-marca img{
  width:2.1rem;height:2.1rem;flex:none;display:block;border-radius:50%;
  box-shadow:0 0 0 1.5px var(--wc-oro), 0 0 0 3.5px #120E0B, 0 0 0 4.5px rgba(200,155,60,.5);
}
.wc-marca-texto{
  font-family:'Cinzel',Georgia,serif;font-weight:800;
  font-size:.95rem;letter-spacing:.1em;text-transform:uppercase;
  color:var(--wc-oro-claro);white-space:nowrap;
}

/* ---------- los enlaces, en pantalla grande ---------- */
.wc-menu{ display:none; }
.wc-menu a{
  position:relative;text-decoration:none;white-space:nowrap;
  font-weight:600;font-size:.76rem;letter-spacing:.1em;text-transform:uppercase;
  color:var(--wc-texto-suave);padding:.5rem .05rem;
  transition:color .2s ease;
}
.wc-menu a::after{
  content:"";position:absolute;left:0;right:0;bottom:-.1rem;height:2px;border-radius:2px;
  background:linear-gradient(90deg,var(--wc-oro),var(--wc-oro-claro));
  transform:scaleX(0);transform-origin:center;transition:transform .25s ease;
}
@media (hover:hover){ .wc-menu a:hover{ color:var(--wc-texto); } }
.wc-menu a[aria-current="true"]{ color:var(--wc-oro-claro); }
.wc-menu a[aria-current="true"]::after{ transform:scaleX(1); }

/* ---------- «Volver a la app» («Volver al juego» hasta el 30/09): sólo para quien juega en este móvil ----------
   (web-cabecera.js pone .wc-jugador). En la app instalada del iPhone no hay
   botón de atrás: sin esto, quien entra a la web desde la app se queda
   encerrado en ella.
   EN EL MÓVIL VA DENTRO DEL MENÚ, COMO SU PRIMERA OPCIÓN (Diego, 27/09):
   .wc-menu-volver, más abajo. El botón del menú está siempre en la barra, así
   que la salida sigue a un toque. En pantalla grande, donde no hay menú
   desplegable, sigue siendo esta píldora de la barra. */
.wc-volver{
  display:none;align-items:center;gap:.35rem;flex:none;
  text-decoration:none;white-space:nowrap;
  font-weight:700;font-size:.72rem;letter-spacing:.08em;text-transform:uppercase;
  color:var(--wc-oro-claro);background:rgba(10,18,15,.6);
  border:1.5px solid var(--wc-oro);border-radius:999px;padding:.42rem .8rem;
}
@media (hover:hover){ .wc-volver:hover{ background:rgba(40,32,20,.9);border-color:var(--wc-oro-claro); } }

/* ---------- la franja de avisos (Diego, 30/09) ----------
   Fina y sobria, encima de la barra: el bucio y el aviso, que lleva a
   Instagram; lo de detrás del último « · » (la llamada), en dorado. Con su ✕
   para cerrarla. El texto se cambia en web-cabecera.js (FRANJA). */
.wc-franja{
  display:flex;align-items:stretch;
  background:#1C1611;border-bottom:1px solid var(--wc-linea-suave);
}
.wc-franja-enlace{
  flex:1 1 auto;min-width:0;display:flex;align-items:center;justify-content:center;gap:.5rem;
  padding:.3rem .25rem .3rem calc(2.4rem + env(safe-area-inset-left, 0px));
  text-decoration:none;color:var(--wc-texto-suave);
  font-size:.74rem;font-weight:600;letter-spacing:.02em;line-height:1.28;text-align:center;
}
.wc-franja-enlace svg{flex:none;width:.75rem;height:1.3rem;color:var(--wc-oro)}
/* La versión larga, en una sola línea; si no cabe (lo mide web-cabecera.js,
   ajustarFranja), la corta: «Beta cerrada · plazas limitadas» y el icono de
   Instagram, también en una línea y algo más baja (Diego, 30/09). */
.wc-franja-larga{display:inline-flex;align-items:center;gap:.5rem;white-space:nowrap}
.wc-franja-corta{display:none;align-items:center;gap:.45rem;white-space:nowrap}
.wc-franja-enlace .wc-franja-corta svg{width:.95rem;height:.95rem;color:var(--wc-oro-claro)}
.wc-franja-estrecha .wc-franja-larga{display:none}
.wc-franja-estrecha .wc-franja-corta{display:inline-flex}
.wc-franja-estrecha .wc-franja-enlace{padding-top:.2rem;padding-bottom:.2rem;line-height:1.2}
.wc-franja-llamada{color:var(--wc-oro-claro);text-decoration:underline;text-decoration-color:rgba(243,211,130,.45);text-underline-offset:2px;white-space:nowrap}
.wc-franja-cerrar{
  flex:none;width:2.4rem;margin:0;padding:0;border:0;background:transparent;cursor:pointer;
  color:var(--wc-texto-suave);font-size:.85rem;line-height:1;
  margin-right:env(safe-area-inset-right, 0px);
  -webkit-tap-highlight-color:transparent;
}
@media (hover:hover){
  .wc-franja-enlace:hover{color:var(--wc-texto);}
  .wc-franja-cerrar:hover{color:var(--wc-oro-claro);}
}
.wc-franja-enlace:active{color:var(--wc-oro-claro);}
.wc-franja-cerrar:active{background:rgba(243,211,130,.12);}

/* ---------- el Instagram de Loyalty Isla, en la barra (30/09) ---------- */
.wc-instagram{
  flex:none;width:2.6rem;height:2.6rem;display:flex;align-items:center;justify-content:center;
  border-radius:.6rem;color:var(--wc-oro-claro);text-decoration:none;
  -webkit-tap-highlight-color:transparent;
}
.wc-instagram svg{width:1.45rem;height:1.45rem}
@media (hover:hover){ .wc-instagram:hover{background:rgba(255,253,247,.06);} }
.wc-instagram:active{background:rgba(243,211,130,.14);transform:scale(.94);}

/* ---------- el botón del menú, en el móvil ---------- */
.wc-boton-menu{
  flex:none;width:2.6rem;height:2.6rem;margin:0;padding:0;
  border-radius:.6rem;border:1px solid var(--wc-linea);background:rgba(255,253,247,.04);
  display:flex;align-items:center;justify-content:center;cursor:pointer;
  -webkit-tap-highlight-color:transparent;
}
.wc-boton-menu span{ display:block;position:relative;width:1.15rem;height:2px;border-radius:2px;background:var(--wc-oro-claro); }
.wc-boton-menu span::before,.wc-boton-menu span::after{
  content:"";position:absolute;left:0;width:100%;height:2px;border-radius:2px;
  background:var(--wc-oro-claro);transition:transform .2s ease;
}
.wc-boton-menu span::before{ top:-6px; }
.wc-boton-menu span::after{ top:6px; }
.wc-abierto .wc-boton-menu span{ background:transparent; }
.wc-abierto .wc-boton-menu span::before{ transform:translateY(6px) rotate(45deg); }
.wc-abierto .wc-boton-menu span::after{ transform:translateY(-6px) rotate(-45deg); }

/* El menú desplegado: debajo de la barra, a todo el ancho. Cerrado queda
   oculto también para el teclado (visibility), no sólo transparente.
   ⚠ OPACO DEL TODO (26/09): al 97 % se leía detrás el titular de la portada,
   como un texto fantasma bajo los enlaces (la misma lección que la pregunta
   de salida de la Ofrenda, en CLAUDE.md). */
.wc-menu-movil{
  position:absolute;left:0;right:0;top:100%;
  background:#120E0B;border-bottom:1px solid var(--wc-linea);
  box-shadow:0 18px 30px rgba(0,0,0,.45);
  padding:.35rem calc(1.25rem + env(safe-area-inset-right, 0px)) 1rem calc(1.25rem + env(safe-area-inset-left, 0px));
  opacity:0;visibility:hidden;transform:translateY(-.5rem);
  transition:opacity .2s ease, transform .2s ease, visibility 0s linear .2s;
}
.wc-abierto .wc-menu-movil{ opacity:1;visibility:visible;transform:none;transition:opacity .2s ease, transform .2s ease, visibility 0s; }
.wc-menu-movil a{
  display:flex;align-items:center;justify-content:space-between;gap:1rem;
  text-decoration:none;
  font-family:'Cinzel',Georgia,serif;font-weight:700;font-size:1.1rem;color:var(--wc-texto);
  padding:.9rem .25rem;border-bottom:1px solid var(--wc-linea-suave);
}
.wc-menu-movil a:last-child{ border-bottom:0; }
.wc-menu-movil a span{ color:var(--wc-oro);font-family:'Space Grotesk',sans-serif;font-size:1rem; }
.wc-menu-movil a[aria-current="true"]{ color:var(--wc-oro-claro); }
/* «Volver a la app», la primera opción, sólo a quien juega: en dorado y con
   la flecha delante, porque no lleva a una sección sino fuera de la web. */
.wc-menu-movil .wc-menu-volver{ display:none;justify-content:flex-start;gap:.7rem;color:var(--wc-oro-claro); }
.wc-jugador .wc-menu-movil .wc-menu-volver{ display:flex; }

.wc a:focus-visible,.wc button:focus-visible{ outline:2px solid var(--wc-oro-claro);outline-offset:3px;border-radius:.35rem; }

/* ---------- el tacto: al pulsar (Diego, 27/09) ----------
   Cada página quita el recuadro azul del toque (-webkit-tap-highlight-color
   en su html), así que todo lo que se toca aquí lleva su respuesta al dedo.
   Lo que cambia al pasar por encima va sólo con ratón (hover:hover): en un
   móvil se quedaba puesto después del toque. En el iPhone, :active sólo se
   enciende si la página escucha los toques: lo hace web-cabecera.js. */
.wc-marca:active{ opacity:.7; }
.wc-boton-menu:active{ background:rgba(243,211,130,.14);transform:scale(.94); }
.wc-menu a:active{ color:var(--wc-oro-claro); }
.wc-menu-movil a:active{ background:rgba(243,211,130,.1); }
.wc-volver:active{ background:rgba(40,32,20,.9);border-color:var(--wc-oro-claro);transform:scale(.97); }

/* ---------- pantalla grande: los cinco enlaces a la vista ----------
   (y, a quien juega, la píldora de «Volver a la app» en la barra). Hasta el
   27/09 la píldora iba en la barra también en el móvil, y a quien jugaba se
   le ocultaba el nombre por falta de sitio; ahora en el móvil va en el menú y
   el nombre se queda. */
@media (min-width:64rem){
  .wc-barra{ gap:1.5rem;padding-left:calc(1.5rem + env(safe-area-inset-left, 0px));padding-right:calc(1.5rem + env(safe-area-inset-right, 0px)); }
  .wc-marca img{ width:2.4rem;height:2.4rem; }
  .wc-marca-texto{ font-size:1.05rem; }
  .wc-menu{ display:flex;align-items:center;gap:1.5rem; }
  .wc-boton-menu,.wc-menu-movil{ display:none; }
  .wc-jugador .wc-volver{ display:inline-flex; }
}
/* De 64 a 80rem, con la píldora no caben el nombre y los cinco enlaces: el
   nombre se oculta, como en el móvil. */
@media (min-width:64rem) and (max-width:79.99rem){
  .wc-jugador .wc-marca-texto{ display:none; }
}

@media (prefers-reduced-motion:reduce){
  .wc,.wc-menu a,.wc-menu a::after,.wc-menu-movil,.wc-boton-menu span::before,.wc-boton-menu span::after{ transition:none; }
  .wc-boton-menu:active,.wc-volver:active,.wc-instagram:active{ transform:none; }
}

@media print{
  .wc{ display:none !important; }
}