/* ═══════════════════════════════════════════════════════════════════════════
   CeibeCMS — hoja de estilo de todo lo público.

   La misma costa que CeibeBOOKING: arena clarísima, tinta casi negra con un
   punto de verde y un acento que cada local elige. Que el cliente pase de la
   carta al formulario de reserva sin notar que ha cambiado de sitio.

   Móvil primero, y no como fórmula: esto se abre con un QR, de pie, en la
   puerta del local y con una mano ocupada.

   Todas las correcciones de iOS están aquí y comentadas.
   ═══════════════════════════════════════════════════════════════════════════ */

:root {
  --acento:      #0e7c7b;          /* lo pisa cada local desde el panel */
  --ink:         #14201f;
  --ink-2:       #465956;
  --ink-3:       #7a8a87;
  --ground:      #fbfbf9;
  --surface:     #ffffff;
  --surface-2:   #f2f4f1;
  --line:        #e2e7e3;
  --line-2:      #cdd6d1;
  /* El crema del halo y del destello de la portada. Va como terna RGB y no
     como color para poder darle opacidades distintas en cada capa de sombra. */
  --brillo:      255, 238, 208;

  --sombra:      0 1px 2px rgba(20,32,31,.04), 0 12px 32px rgba(20,32,31,.08);
  --sombra-alta: 0 2px 6px rgba(20,32,31,.06), 0 24px 60px rgba(20,32,31,.14);

  --f: 'Manrope', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif;
  --f-titular: 'Fraunces', Georgia, serif;

  --r:    12px;
  --r-lg: 20px;
  --r-xl: 28px;

  --caja: 1180px;
  --nav-alto: 68px;
}

/* Tema oscuro: se activa por local desde el panel, no por el sistema. Un
   asador con la portada en penumbra lo quiere siempre; una heladería, nunca. */
[data-oscuro="1"] {
  --ink:       #f2f5f3;
  --ink-2:     #b7c4c1;
  --ink-3:     #8b9a97;
  --ground:    #0f1817;
  --surface:   #172221;
  --surface-2: #1e2b29;
  --line:      #2a3937;
  --line-2:    #3a4b48;
  --sombra:      0 1px 2px rgba(0,0,0,.3), 0 12px 32px rgba(0,0,0,.4);
  --sombra-alta: 0 2px 6px rgba(0,0,0,.4), 0 24px 60px rgba(0,0,0,.55);
}

*, *::before, *::after { box-sizing: border-box; }

html {
  /* iOS: sin esto, al girar el móvil el texto se agranda solo. */
  -webkit-text-size-adjust: 100%;
  text-size-adjust: 100%;
  scroll-behavior: smooth;
  /* Los anclajes de la navegación quedarían tapados por la barra fija. */
  scroll-padding-top: calc(var(--nav-alto) + 8px);
}
@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  *, *::before, *::after { animation-duration: .01ms !important; transition-duration: .01ms !important; }
}

body {
  margin: 0;
  font-family: var(--f);
  font-size: 16.5px;
  line-height: 1.6;
  color: var(--ink);
  background: var(--ground);
  -webkit-font-smoothing: antialiased;
  /* iOS: el arrastre elástico despega las cabeceras fijas. */
  overscroll-behavior-y: none;
}

img { max-width: 100%; height: auto; display: block; }
a   { color: inherit; text-decoration: none; }

h1, h2, h3 {
  font-family: var(--f-titular);
  font-weight: 500;
  line-height: 1.12;
  letter-spacing: -.015em;
  margin: 0;
  /* La cursiva de Fraunces en los titulares grandes: es lo que separa una
     carta de restaurante de un panel de administración. */
  font-optical-sizing: auto;
}

/* Lo que se pulsa: sin recuadro azul al tocar y sin que un toque rápido
   seleccione el texto del botón. El texto normal se sigue pudiendo copiar. */
button, .cw-btn, .cw-carta, .cw-foto, a {
  touch-action: manipulation;
  -webkit-tap-highlight-color: transparent;
}
button, .cw-carta, .cw-foto { -webkit-user-select: none; user-select: none; }

button { font: inherit; color: inherit; background: none; border: 0; padding: 0; cursor: pointer; }

:focus-visible { outline: 2px solid var(--acento); outline-offset: 3px; border-radius: 4px; }

.cw-saltar {
  position: absolute; left: -9999px; top: 0; z-index: 200;
  background: var(--surface); padding: .8rem 1.2rem; border-radius: var(--r);
}
.cw-saltar:focus { left: 12px; top: 12px; box-shadow: var(--sombra-alta); }


/* ── Estructura ──────────────────────────────────────────────────────────── */

.cw-caja { width: 100%; max-width: var(--caja); margin: 0 auto; padding: 0 20px; }

/* TODAS las secciones usan el mismo contenedor, y por eso todos los títulos
   empiezan en la misma vertical. Antes unas iban en caja ancha y otras en caja
   estrecha centrada, así que cada título arrancaba en un sitio distinto y la
   página parecía descuadrada. Lo que tenga que ser estrecho se limita por
   dentro (`cw-texto-cuerpo`), nunca cambiando el contenedor. */
.cw-caja-estrecha { max-width: var(--caja); }

.cw-seccion { padding: clamp(34px, 5vw, 56px) 0; }
.cw-seccion h2 {
  font-size: clamp(1.5rem, 3.4vw, 2.1rem);
  margin-bottom: clamp(16px, 2.4vw, 26px);
}
/* Una línea fina entre secciones: al juntarlas hace falta algo que las separe
   sin recurrir a hueco vacío. */
.cw-seccion + .cw-seccion { border-top: 1px solid var(--line); }

/* Una línea fina de acento bajo cada título: cose las secciones entre sí sin
   necesidad de fondos de colores. */
.cw-seccion h2::after {
  content: ''; display: block;
  width: 38px; height: 2px; margin-top: 10px;
  background: var(--acento); border-radius: 2px;
}


/* ── Botones ─────────────────────────────────────────────────────────────── */

.cw-btn {
  display: inline-flex; align-items: center; justify-content: center; gap: .5em;
  padding: .72em 1.35em;
  border-radius: 999px;
  font-size: .95rem; font-weight: 600; letter-spacing: .01em;
  border: 1px solid transparent;
  transition: transform .18s ease, box-shadow .18s ease, background-color .18s ease, border-color .18s ease;
  /* Dedo gordo, botón pequeño: el mínimo cómodo con el móvil en una mano. */
  min-height: 44px;
}
.cw-btn-grande { padding: .95em 1.8em; font-size: 1.02rem; min-height: 52px; }

.cw-btn-acento { background: var(--acento); color: #fff; box-shadow: 0 6px 18px color-mix(in srgb, var(--acento) 32%, transparent); }
.cw-btn-acento:hover { transform: translateY(-2px); box-shadow: 0 10px 26px color-mix(in srgb, var(--acento) 42%, transparent); }
.cw-btn-acento:active { transform: translateY(0); }

.cw-btn-claro { background: var(--surface); color: var(--ink); border-color: var(--line-2); }
.cw-btn-claro:hover { transform: translateY(-2px); box-shadow: var(--sombra); border-color: var(--acento); }
.cw-btn-claro:active { transform: translateY(0); }

/* Sobre la portada, el botón claro va translúcido: el color sólido tapaba la
   foto justo en la parte que se eligió para que se viera. */
.cw-portada .cw-btn-claro {
  background: rgba(255,255,255,.14); color: #fff;
  border-color: rgba(255,255,255,.45);
  backdrop-filter: blur(10px); -webkit-backdrop-filter: blur(10px);
}
.cw-portada .cw-btn-claro:hover { background: rgba(255,255,255,.24); border-color: #fff; }


/* ── Barra de navegación ─────────────────────────────────────────────────── */

.cw-nav {
  position: fixed; inset: 0 0 auto 0; z-index: 90;
  height: var(--nav-alto);
  display: flex; align-items: center;
  transition: background-color .3s ease, box-shadow .3s ease, backdrop-filter .3s ease;
  /* Arranca invisible encima de la portada y se solidifica al bajar (web.js). */
  background: transparent;
  color: #fff;
  padding-top: env(safe-area-inset-top);
}
.cw-nav.es-solida {
  background: color-mix(in srgb, var(--ground) 88%, transparent);
  backdrop-filter: saturate(150%) blur(14px); -webkit-backdrop-filter: saturate(150%) blur(14px);
  box-shadow: 0 1px 0 var(--line);
  color: var(--ink);
}
/* Sin portada no hay foto detrás: la barra nace sólida o el texto blanco
   quedaría sobre el fondo claro y no se leería nada. */
body:not(:has(.cw-portada)) .cw-nav { background: var(--ground); color: var(--ink); box-shadow: 0 1px 0 var(--line); }

.cw-nav-caja {
  width: 100%; max-width: var(--caja); margin: 0 auto; padding: 0 20px;
  display: flex; align-items: center; gap: 18px;
}
.cw-nav-marca { display: flex; align-items: center; font-weight: 700; font-size: 1.02rem; }
.cw-nav-marca img { max-height: 40px; width: auto; }
/* ── El logo, sobre cualquier fondo, con una sola imagen ─────────────────── */
   /*
   Con un logo único el problema es real: uno negro no se ve sobre una foto
   oscura y uno blanco desaparece sobre la barra clara. Aplicar `filter` a
   ciegas no vale —`invert` destroza los logos con color— así que al subirlo se
   mira cómo es (`Imagen::analizarLogo`) y aquí sólo se actúa en consecuencia:

     es-oscuro → de un tono y oscuro: se invierte donde el fondo sea oscuro
     es-claro  → de un tono y claro:  se invierte donde el fondo sea claro
     es-color  → tiene color: no se toca, se le pone un halo de contraste
   */

.cw-nav-marca img { transition: filter .3s ease; }

/* Barra transparente = fondo oscuro (la foto con su velo). */
.cw-nav:not(.es-solida) .cw-marca.es-oscuro { filter: invert(1) brightness(1.6); }
.cw-nav:not(.es-solida) .cw-marca.es-color {
  filter: drop-shadow(0 0 1px rgba(255,255,255,.9)) drop-shadow(0 0 4px rgba(255,255,255,.7));
}

/* Barra sólida = fondo claro. */
.cw-nav.es-solida .cw-marca.es-claro { filter: invert(1) brightness(.4); }

.cw-nav-enlaces { display: flex; gap: 22px; margin-left: auto; font-size: .93rem; font-weight: 500; }
.cw-nav-enlaces a { position: relative; padding: 4px 0; opacity: .9; }
.cw-nav-enlaces a::after {
  content: ''; position: absolute; left: 0; right: 0; bottom: 0;
  height: 1.5px; background: currentColor; transform: scaleX(0); transform-origin: left;
  transition: transform .25s ease;
}
.cw-nav-enlaces a:hover { opacity: 1; }
.cw-nav-enlaces a:hover::after { transform: scaleX(1); }

.cw-nav-acciones { display: flex; align-items: center; gap: 10px; margin-left: 18px; }
.cw-nav-reservar { padding: .55em 1.1em; min-height: 38px; font-size: .88rem; }

.cw-nav-menu { display: none; width: 40px; height: 40px; flex-direction: column; gap: 5px; align-items: center; justify-content: center; }
.cw-nav-menu span { display: block; width: 20px; height: 1.8px; background: currentColor; border-radius: 2px; transition: transform .25s ease, opacity .2s ease; }
.cw-nav-menu[aria-expanded="true"] span:first-child { transform: translateY(3.4px) rotate(45deg); }
.cw-nav-menu[aria-expanded="true"] span:last-child  { transform: translateY(-3.4px) rotate(-45deg); }


/* ── Selector de idioma ──────────────────────────────────────────────────── */

.cw-idiomas { position: relative; }
.cw-idiomas-boton {
  display: flex; align-items: center; gap: 5px;
  padding: .45em .8em; border-radius: 999px;
  border: 1px solid currentColor; opacity: .75;
  font-size: .8rem; font-weight: 700; letter-spacing: .06em;
  min-height: 36px;
}
.cw-idiomas-boton:hover { opacity: 1; }
.cw-idiomas-lista {
  position: absolute; top: calc(100% + 8px); right: 0; z-index: 100;
  margin: 0; padding: 6px; list-style: none;
  min-width: 165px; max-height: min(60vh, 420px); overflow-y: auto;
  background: var(--surface); color: var(--ink);
  border: 1px solid var(--line); border-radius: var(--r);
  box-shadow: var(--sombra-alta);
}
.cw-idiomas-lista a { display: block; padding: .55em .8em; border-radius: 8px; font-size: .92rem; }
.cw-idiomas-lista a:hover { background: var(--surface-2); }
.cw-idiomas-lista a[aria-current] { font-weight: 700; color: var(--acento); }


/* ── Portada ─────────────────────────────────────────────────────────────── */

.cw-portada {
  position: relative;
  min-height: 100svh;              /* svh y no vh: en iOS la barra del navegador se lleva 60 px */
  display: flex; align-items: center; justify-content: center;
  text-align: center; color: #fff;
  overflow: hidden;
  padding: calc(var(--nav-alto) + 24px) 20px 96px;
}
.cw-portada-fotos { position: absolute; inset: 0; }

.cw-portada-foto {
  position: absolute; inset: 0;
  width: 100%; height: 100%; object-fit: cover;
  opacity: 0;
  /* Los keyframes `cw-pase` los escribe la plantilla: los porcentajes dependen
     de cuántas fotos haya. Aquí sólo va lo que no cambia. */
  animation: cw-pase var(--ciclo, 20s) linear infinite;
  will-change: opacity, transform;
}

/* Con una sola foto no hay relevo que dar: se queda quieta, acercándose muy
   despacio. El `forwards` la deja al final del recorrido en vez de saltar. */
.cw-portada-fotos.es-sola .cw-portada-foto {
  opacity: 1;
  animation: cw-acercar 26s ease-out forwards;
}
@keyframes cw-acercar { from { transform: scale(1.12); } to { transform: scale(1); } }

/* A quien le moleste el movimiento, la primera foto y quieta. */
@media (prefers-reduced-motion: reduce) {
  .cw-portada-foto { animation: none; opacity: 0; }
  .cw-portada-foto:first-child { opacity: 1; }
}

/* Dos capas de oscurecido: una general y otra más fuerte abajo, donde van los
   botones. Sin esto, el texto blanco desaparece sobre una foto clara.

   Encima de las dos va `--velo`, que es lo que se gradúa en el panel («Aspecto»
   → «Oscurecer la foto de portada»). Los degradados no se tocan: son los que
   sostienen la barra de arriba y los botones de abajo pase lo que pase, y el
   velo se SUMA a ellos. Por eso en una landing empieza en 0 —tal y como se ha
   visto siempre— y en la portada del grupo, que no tiene más que foto, en 45. */
.cw-portada::after {
  content: ''; position: absolute; inset: 0;
  background:
    linear-gradient(180deg, rgba(10,18,17,.55) 0%, rgba(10,18,17,.22) 38%, rgba(10,18,17,.72) 100%),
    radial-gradient(120% 80% at 50% 60%, transparent 40%, rgba(10,18,17,.35) 100%),
    rgba(6, 10, 9, var(--velo, 0%));
}
.cw-portada-lisa {
  background: linear-gradient(150deg, var(--acento) 0%, color-mix(in srgb, var(--acento) 55%, #0b1413) 100%);
  min-height: 76svh;
}
.cw-portada-lisa::after { background: none; }

.cw-portada-texto { position: relative; z-index: 2; max-width: 760px; }
.cw-portada-logo {
  /* Ancho Y alto acotados: un logo apaisado usa el ancho, y uno vertical —o una
     foto subida donde no toca— se queda en su sitio en vez de ocupar media
     pantalla. `object-fit: contain` evita que se deforme en cualquier caso. */
  width: auto; max-width: clamp(140px, 26vw, 220px);
  max-height: clamp(70px, 12vw, 110px);
  object-fit: contain;
  margin: 0 auto clamp(20px, 4vw, 32px);
  filter: drop-shadow(0 4px 24px rgba(0,0,0,.45));
}

/* En la portada el fondo siempre es oscuro: la foto lleva su velo encima. */
.cw-portada-logo.es-oscuro { filter: invert(1) brightness(1.7) drop-shadow(0 4px 24px rgba(0,0,0,.45)); }
.cw-portada-logo.es-color {
  filter:
    drop-shadow(0 0 2px rgba(255,255,255,.95))
    drop-shadow(0 0 6px rgba(255,255,255,.7))
    drop-shadow(0 4px 20px rgba(0,0,0,.5));
}
/* El nombre del local, en la portada — el título central de la página.

   Va con LA TIPOGRAFÍA ELEGIDA EN EL PANEL, como el resto de los títulos.
   Estuvo clavado a Outfit por una razón que sonaba bien —en la portada se busca
   una marca, no un texto— pero el resultado era que el selector del panel
   mentía: promete «así se verá el nombre del local en la portada» y el nombre
   salía en Outfit eligieras lo que eligieras. Quien quiera esa geométrica la
   elige, que sigue estando en la lista (`CW_TIPOGRAFIAS`, en la config).

   Lo de rótulo lo hacen el tamaño, las mayúsculas y el espaciado, que valen para
   cualquiera de las cinco; la familia sólo pone el carácter. */
.cw-portada h1 {
  font-family: var(--f-titular);
  font-size: clamp(2.4rem, 8.5vw, 5rem);
  /* 500 y no 200: el peso fino se deshacía sobre la foto, sobre todo en el
     móvil, donde la pantalla brilla y los trazos de un pelo desaparecen. */
  font-weight: 500;
  /* Separadas: es lo que hace que se lea como rótulo y no como frase. */
  letter-spacing: .1em;
  /* Con tanto espacio entre letras, la última deja un hueco a la derecha que
     descentra la palabra; esto lo compensa. */
  text-indent: .1em;
  line-height: 1.05;
  text-transform: uppercase;

  /* Blanco puro no: un crema muy claro se posa mejor sobre una foto y no
     deslumbra en el móvil de noche. */
  color: #f6f1e9;

  /* El halo, en cinco capas. Las tres oscuras recortan las letras contra la
     foto —`text-shadow` no tiene «contorno», así que el aro se hace repitiendo
     la sombra en cuatro direcciones— y las dos crema levantan el rótulo del
     fondo y tiñen el aire alrededor.

     Va sobrado a propósito: sobre una foto clara —una terraza a mediodía, un
     plato blanco— una sombra discreta se pierde entera, y esto tiene que
     leerse encima de cualquier foto que suban. */
  text-shadow:
    0 0 2px rgba(10,16,15,.6),
    2px 0 4px rgba(10,16,15,.45), -2px 0 4px rgba(10,16,15,.45),
    0 2px 4px rgba(10,16,15,.45), 0 -2px 4px rgba(10,16,15,.45),
    0 0 30px rgba(var(--brillo), .38),
    0 0 72px rgba(var(--brillo), .22),
    0 10px 40px rgba(0,0,0,.5);
}

/* ── El destello del rótulo ───────────────────────────────────────────────
   El mismo de la portada del grupo: una COPIA de cada letra encima de la letra
   —`attr(data-l)`, que ya lleva el carácter— de la que sólo se anima la
   `opacity`. Animar el `text-shadow` sería repintar el texto sesenta veces por
   segundo; una capa que aparece y desaparece la compone la GPU sin tocar lo de
   debajo.

   Aquí va más lento que en la frase (8–15 s por letra frente a 5,5–11,5): son
   dos textos en la misma pantalla, y si los dos parpadearan al mismo ritmo la
   portada sería un escaparate de feria. */
.cw-portada h1 [data-l] { display: inline-block; position: relative; }

.cw-portada h1 [data-l]::after {
  content: attr(data-l);
  position: absolute;
  left: 0; top: 0;
  color: rgb(var(--brillo));
  text-shadow:
    0 0 10px rgba(var(--brillo), .95),
    0 0 30px rgba(var(--brillo), .75),
    0 0 74px rgba(var(--brillo), .45);
  opacity: 0;
  pointer-events: none;
  animation: cw-destello var(--brillo-dur, 11s) var(--brillo-d, 0s) ease-in-out infinite;
}
.cw-portada h1 [data-l=" "]::after { content: none; }

/* Sin JavaScript no hay letras sueltas a las que darles el destello, así que
   ahí respira el rótulo entero: un solo elemento, y animar su sombra no cuesta
   nada. Es el comportamiento que tenía antes de esto. */
.cw-portada h1:not([data-partida]) {
  animation: cw-respira 9s ease-in-out infinite;
}

/* El resplandor va y viene muy despacio. A 9 segundos no se percibe como una
   animación: sólo hace que el rótulo no parezca pegado con cola. */
@keyframes cw-respira {
  0%, 100% {
    text-shadow:
      0 0 2px rgba(10,16,15,.6),
      2px 0 4px rgba(10,16,15,.45), -2px 0 4px rgba(10,16,15,.45),
      0 2px 4px rgba(10,16,15,.45), 0 -2px 4px rgba(10,16,15,.45),
      0 0 30px rgba(var(--brillo), .38),
      0 0 72px rgba(var(--brillo), .22),
      0 10px 40px rgba(0,0,0,.5);
  }
  50% {
    text-shadow:
      0 0 2px rgba(10,16,15,.6),
      2px 0 4px rgba(10,16,15,.45), -2px 0 4px rgba(10,16,15,.45),
      0 2px 4px rgba(10,16,15,.45), 0 -2px 4px rgba(10,16,15,.45),
      0 0 52px rgba(var(--brillo), .6),
      0 0 96px rgba(var(--brillo), .35),
      0 10px 44px rgba(0,0,0,.54);
  }
}

/* Sube deprisa y baja despacio, como una brasa. El grueso del ciclo lo pasa
   apagada: si todas las letras brillaran a la vez sería un letrero de neón, y
   lo que se busca es que el brillo salte de una a otra. */
@keyframes cw-destello {
  0%, 62%, 100% { opacity: 0; }
  70%           { opacity: .92; }
  78%           { opacity: .35; }
  84%           { opacity: .6; }
  92%           { opacity: 0; }
}

@media (prefers-reduced-motion: reduce) {
  .cw-portada h1 { animation: none; }
  .cw-portada h1 [data-l]::after { content: none; }
}
/* La frase de portada: manuscrita, grande y con halo.
   Es lo que se lee después del nombre y lo que decide si a alguien le apetece
   entrar, así que se le da sitio y peso propio en vez de dejarla como un
   subtítulo cualquiera. */
.cw-claim {
  margin: clamp(10px, 2vw, 20px) auto 0;
  /* Que aproveche el ancho que hay. Un tope en `ch` con una manuscrita grande
     se queda cortísimo y parte la frase en cuatro líneas teniendo sitio de
     sobra; con `min()` usa casi toda la pantalla en el móvil y se planta en un
     ancho cómodo de leer en el ordenador. */
  max-width: min(96%, 30ch);
  font-family: 'Caveat', 'Segoe Script', cursive;
  font-weight: 600;
  line-height: 1.15;
  /* Crece con el ancho de la pantalla y se planta: sin el tope, en un monitor
     grande la frase se comería la portada entera. */
  font-size: clamp(1.9rem, 6.5vw, 4.2rem);

  /* Cuatro sombras, y las dos de en medio son el halo crema.

     Las negras hacen el trabajo de siempre: una pegada, que despega la letra
     del fondo, y otra abierta, que le da cuerpo sobre una foto clara. Las
     crema son lo que hace que la frase parezca encendida y no escrita encima:
     un halo cercano que la perfila y otro muy abierto que tiñe el aire
     alrededor. Van en ese orden porque la sombra declarada primero se pinta
     encima. */
  text-shadow:
    0 2px 6px rgba(0,0,0,.6),
    0 0 22px rgba(var(--brillo), .55),
    0 0 62px rgba(var(--brillo), .32),
    0 12px 46px rgba(0,0,0,.45);
  text-wrap: balance;
  opacity: 1;
}

/* Una palabra entera no se parte nunca. Es lo que impide que un salto de línea
   caiga en medio de «mar» y quede la m arriba y el «ar» abajo: las letras van
   sueltas por la animación, y sin esto cada una es una caja que el navegador
   puede dejar donde le venga bien. */
.cw-palabra { display: inline-block; white-space: nowrap; }

/* Cada letra empieza apagada y un poco caída; web.js las va encendiendo. */
.cw-claim [data-l] {
  display: inline-block;
  position: relative;
  opacity: 0;
  transform: translateY(.18em);
  animation: cw-letra .5s ease forwards;
}
/* El espacio necesita ancho propio: como `inline-block` vacío mediría cero y
   las palabras se pegarían unas a otras. */
.cw-claim [data-l=" "] { width: .28em; }

@keyframes cw-letra {
  to { opacity: 1; transform: translateY(0); }
}

/* El destello, igual que en el rótulo pero más vivo: aquí es la frase la que
   tiene que llamar. Los ciclos los sortea web.js letra a letra. */
.cw-claim [data-l]::after {
  content: attr(data-l);
  position: absolute;
  left: 0; top: 0;
  color: rgb(var(--brillo));
  text-shadow:
    0 0 8px  rgba(var(--brillo), .95),
    0 0 26px rgba(var(--brillo), .8),
    0 0 64px rgba(var(--brillo), .5);
  opacity: 0;
  pointer-events: none;
  animation: cw-destello var(--brillo-dur, 8s) var(--brillo-d, 0s) ease-in-out infinite;
}
/* El hueco entre palabras no brilla: no hay nada que encender. */
.cw-claim [data-l=" "]::after { content: none; }

/* Sin JavaScript —o con él a medias— la frase se ve entera y quieta, y brilla
   de una pieza: es un solo elemento, así que animarle la sombra no cuesta nada. */
.cw-claim:not([data-partida]) [data-l] { opacity: 1; transform: none; animation: none; }
.cw-claim:not([data-partida]) [data-l]::after { content: none; }
.cw-claim:not([data-partida]) { animation: cw-brillo-entero 6.5s ease-in-out infinite; }

@keyframes cw-brillo-entero {
  0%, 100% {
    text-shadow:
      0 2px 6px rgba(0,0,0,.6),
      0 0 22px rgba(var(--brillo), .55),
      0 0 62px rgba(var(--brillo), .32),
      0 12px 46px rgba(0,0,0,.45);
  }
  50% {
    text-shadow:
      0 2px 6px rgba(0,0,0,.6),
      0 0 30px rgba(var(--brillo), .85),
      0 0 80px rgba(var(--brillo), .55),
      0 12px 46px rgba(0,0,0,.45);
  }
}

/* Quien pide menos movimiento se queda con el halo, que es lo que da de leer,
   y sin nada parpadeando. */
@media (prefers-reduced-motion: reduce) {
  .cw-claim { animation: none; }
  .cw-claim [data-l] { opacity: 1; transform: none; animation: none; }
  .cw-claim [data-l]::after { content: none; }
}

.cw-estado {
  display: inline-flex; align-items: center; gap: 8px;
  margin: clamp(20px, 3vw, 28px) 0 0;
  padding: .4em .95em; border-radius: 999px;
  background: rgba(255,255,255,.14); border: 1px solid rgba(255,255,255,.28);
  backdrop-filter: blur(10px); -webkit-backdrop-filter: blur(10px);
  font-size: .84rem; font-weight: 600; letter-spacing: .02em;
}
.cw-punto { width: 7px; height: 7px; border-radius: 50%; background: currentColor; }
.cw-estado.es-abierto { color: #7fe0a8; }
.cw-estado.es-cerrado { color: #ffb0a0; }

.cw-portada-botones {
  display: flex; flex-wrap: wrap; gap: 12px; justify-content: center;
  margin-top: clamp(26px, 4vw, 38px);
}

.cw-portada-flecha {
  position: absolute; left: 50%; bottom: 26px; z-index: 2;
  width: 26px; height: 26px; margin-left: -13px;
  border-left: 1.6px solid rgba(255,255,255,.75);
  border-bottom: 1.6px solid rgba(255,255,255,.75);
  transform: rotate(-45deg);
  animation: cw-bajar 2.6s ease-in-out infinite;
}
@keyframes cw-bajar { 0%,100% { transform: rotate(-45deg) translate(0,0); opacity: .7; } 50% { transform: rotate(-45deg) translate(-5px,5px); opacity: 1; } }


/* ── Cartas ──────────────────────────────────────────────────────────────── */

.cw-rejilla-cartas {
  display: grid; gap: clamp(16px, 2.5vw, 26px);
  grid-template-columns: repeat(auto-fill, minmax(215px, 1fr));
  margin: 0; padding: 0; list-style: none;
}
.cw-carta {
  display: block; width: 100%; text-align: left;
  background: var(--surface);
  border: 1px solid var(--line); border-radius: var(--r-lg);
  overflow: hidden;
  transition: transform .22s ease, box-shadow .22s ease, border-color .22s ease;
}
.cw-carta:hover { transform: translateY(-4px); box-shadow: var(--sombra-alta); border-color: transparent; }
.cw-carta:active { transform: translateY(-1px); }

.cw-carta-foto { display: block; position: relative; aspect-ratio: 3 / 4; overflow: hidden; background: var(--surface-2); }
.cw-carta-foto img {
  width: 100%; height: 100%; object-fit: cover; object-position: top center;
  transition: transform .5s ease;
}
.cw-carta:hover .cw-carta-foto img { transform: scale(1.045); }

/* La sombra sobre la hoja hace que se lea «esto se abre», no «esto es una foto». */
.cw-carta-foto::after {
  content: ''; position: absolute; inset: 0;
  background: linear-gradient(180deg, transparent 55%, rgba(20,32,31,.28) 100%);
}

.cw-carta-pie { display: flex; align-items: baseline; justify-content: space-between; gap: 10px; padding: 14px 16px 16px; }
.cw-carta-nombre { font-family: var(--f-titular); font-size: 1.12rem; font-weight: 500; }
.cw-carta-n { font-size: .78rem; color: var(--ink-3); white-space: nowrap; }


/* ── El local ────────────────────────────────────────────────────────────── */

.cw-sobre-caja { display: grid; gap: clamp(20px, 3.4vw, 40px); grid-template-columns: 1fr 1fr; align-items: center; }
.cw-sobre-solo-texto .cw-sobre-caja { grid-template-columns: 1fr; max-width: 720px; }
.cw-sobre-texto p { margin: 0 0 1.05em; color: var(--ink-2); font-size: 1.04rem; }
.cw-sobre-texto p:last-child { margin-bottom: 0; }
.cw-sobre-foto { margin: 0; border-radius: var(--r-xl); overflow: hidden; box-shadow: var(--sombra); }
.cw-sobre-foto img { width: 100%; aspect-ratio: 4 / 3; object-fit: cover; }


/* ── Galería ─────────────────────────────────────────────────────────────── */

.cw-rejilla-fotos { display: grid; gap: 12px; grid-template-columns: repeat(auto-fill, minmax(190px, 1fr)); }
.cw-foto { border-radius: var(--r); overflow: hidden; aspect-ratio: 1; background: var(--surface-2); }
.cw-foto img { width: 100%; height: 100%; object-fit: cover; transition: transform .45s ease, filter .3s ease; }
.cw-foto:hover img { transform: scale(1.06); filter: brightness(1.06); }

/* La primera foto ocupa el doble: una rejilla de cuadrados iguales aburre, y
   así hay una imagen que de verdad se ve. */
@media (min-width: 700px) {
  .cw-rejilla-fotos > .cw-foto:first-child { grid-column: span 2; grid-row: span 2; aspect-ratio: 1; }
}


/* ── Horarios ────────────────────────────────────────────────────────────── */

.cw-lista-horario { margin: 0; padding: 0; list-style: none; border-top: 1px solid var(--line); }
.cw-lista-horario { max-width: 520px; }
.cw-lista-horario li {
  display: flex; align-items: baseline; justify-content: space-between; gap: 16px;
  padding: 9px 2px; border-bottom: 1px solid var(--line);
}
.cw-lista-horario .cw-dia { font-weight: 500; }
.cw-lista-horario .cw-tramo { color: var(--ink-2); font-variant-numeric: tabular-nums; text-align: right; }
.cw-lista-horario .es-hoy { color: var(--acento); }
.cw-lista-horario .es-hoy .cw-dia { font-weight: 700; }
.cw-lista-horario .es-hoy .cw-tramo { color: var(--acento); font-weight: 600; }
.cw-nota { margin-top: 14px; color: var(--ink-3); font-size: .9rem; }
/* El texto largo sí se acota, pero por dentro: el título sigue alineado con los
   demás porque el contenedor no cambia. */
.cw-texto-cuerpo, .cw-sobre-solo-texto .cw-sobre-texto { max-width: 68ch; }


/* ── Dónde estamos ───────────────────────────────────────────────────────── */

.cw-ubicacion-caja { display: grid; gap: clamp(20px, 4vw, 36px); grid-template-columns: 340px 1fr; align-items: start; }
.cw-direccion { margin: 0 0 16px; font-size: 1.05rem; line-height: 1.45; color: var(--ink-2); }
.cw-mapa { border-radius: var(--r-lg); overflow: hidden; border: 1px solid var(--line); box-shadow: var(--sombra); }
.cw-mapa iframe { display: block; width: 100%; height: 300px; border: 0; }


/* ── Contacto ────────────────────────────────────────────────────────────── */

/* Cada dato con su icono y el dato a la vista: es lo que la gente quiere leer,
   copiar o apuntar. Un botón que pone «Llamar» lo esconde, y en un ordenador
   además no hace nada. */
.cw-datos { list-style: none; margin: 0 0 18px; padding: 0; display: flex; flex-direction: column; gap: 2px; }
.cw-datos a {
  display: inline-flex; align-items: center; gap: 11px;
  padding: 7px 0;
  font-size: 1.02rem;
  font-variant-numeric: tabular-nums;
}
.cw-datos a:hover { color: var(--acento); }
.cw-dato-icono { flex: none; color: var(--acento); opacity: .85; }

/* Las redes, con el logo de cada marca dentro de un botón redondo. Antes iban
   como el nombre escrito en una píldora; el logo se reconoce sin leer, que es
   como se miran cuatro iconos seguidos. El nombre no se pierde: va en el
   `aria-label` y en el globo del ratón. */
.cw-redes { display: flex; flex-wrap: wrap; gap: 10px; margin-top: 6px; }
.cw-red {
  display: inline-flex; align-items: center; justify-content: center;
  width: 42px; height: 42px;
  border-radius: 50%;
  border: 1px solid var(--line-2);
  color: var(--ink-2);
  transition: border-color .2s ease, color .2s ease, background-color .2s ease, transform .2s ease;
}
.cw-red:hover {
  border-color: var(--acento); color: var(--acento);
  background: color-mix(in srgb, var(--acento) 8%, transparent);
  transform: translateY(-2px);
}
.cw-red-icono { flex: none; }

/* Reseñas no es «síguenos»: es una petición, y se pide con palabras. Va aparte
   de los logos y con la estrella en el color del acento, que es lo que la
   separa de un enlace más. */
.cw-resenas {
  display: inline-flex; align-items: center; gap: 9px;
  margin-top: 16px;
  padding: .55em 1.05em;
  border-radius: 999px;
  border: 1px solid var(--line-2);
  font-size: .92rem; font-weight: 600;
  color: var(--ink);
  transition: border-color .2s ease, color .2s ease, background-color .2s ease;
}
.cw-resenas .cw-red-icono { color: var(--acento); width: 19px; height: 19px; }
.cw-resenas:hover {
  border-color: var(--acento); color: var(--acento);
  background: color-mix(in srgb, var(--acento) 8%, transparent);
}


/* ── Los locales, en la corporativa ──────────────────────────────────────── */

.cw-rejilla-locales {
  display: grid; gap: clamp(20px, 3vw, 30px);
  grid-template-columns: repeat(auto-fill, minmax(310px, 1fr));
  margin: 0; padding: 0; list-style: none;
}
.cw-local-tarjeta {
  display: flex; flex-direction: column;
  background: var(--surface); border: 1px solid var(--line);
  border-radius: var(--r-xl); overflow: hidden;
  transition: transform .25s ease, box-shadow .25s ease, border-color .25s ease;
}
.cw-local-tarjeta:hover { transform: translateY(-5px); box-shadow: var(--sombra-alta); border-color: transparent; }

/* Un local destacado ocupa dos columnas: sirve para el buque insignia o para
   el que acaba de abrir. */
@media (min-width: 980px) {
  .cw-local-tarjeta.es-destacada { grid-column: span 2; }
  .cw-local-tarjeta.es-destacada .cw-local-foto { aspect-ratio: 21 / 9; }
}

.cw-local-enlace { display: flex; flex-direction: column; flex: 1; }
.cw-local-foto { position: relative; display: block; aspect-ratio: 4 / 3; overflow: hidden; background: var(--surface-2); }
.cw-local-foto > img:first-child { width: 100%; height: 100%; object-fit: cover; transition: transform .55s ease; }
.cw-local-tarjeta:hover .cw-local-foto > img:first-child { transform: scale(1.05); }
.cw-local-foto::after {
  content: ''; position: absolute; inset: 0;
  background: linear-gradient(180deg, rgba(10,18,17,.32) 0%, transparent 45%, rgba(10,18,17,.55) 100%);
}
.cw-local-logo {
  position: absolute; left: 18px; bottom: 16px; z-index: 2;
  max-width: 108px; max-height: 54px; width: auto;
  filter: drop-shadow(0 2px 12px rgba(0,0,0,.5));
}

.cw-local-datos { display: flex; flex-direction: column; gap: 6px; padding: 18px 20px 4px; flex: 1; }
.cw-local-nombre { font-family: var(--f-titular); font-size: 1.42rem; font-weight: 500; }
.cw-local-claim  { color: var(--ink-2); font-size: .97rem; line-height: 1.45; }
.cw-local-donde  { color: var(--ink-3); font-size: .84rem; margin-top: 2px; }
.cw-local-botones { display: flex; gap: 10px; padding: 16px 20px 20px; }
.cw-local-botones .cw-btn { flex: 1; }

.cw-vacio { color: var(--ink-3); }


/* ── Barra fija del móvil ────────────────────────────────────────────────── */

.cw-barra-movil {
  display: none;
  position: fixed; inset: auto 0 0 0; z-index: 80;
  gap: 10px; padding: 10px 14px calc(10px + env(safe-area-inset-bottom));
  background: color-mix(in srgb, var(--ground) 92%, transparent);
  backdrop-filter: saturate(150%) blur(14px); -webkit-backdrop-filter: saturate(150%) blur(14px);
  border-top: 1px solid var(--line);
}
.cw-barra-movil .cw-btn { flex: 1; }


/* ── Pie ─────────────────────────────────────────────────────────────────── */

.cw-pie {
  background: var(--surface-2); border-top: 1px solid var(--line);
  padding: 18px 0;
  /* Monoespaciada: son dos datos de consulta, no un cierre decorativo. */
  font-family: ui-monospace, 'SF Mono', Menlo, Consolas, monospace;
  font-size: .78rem;
}
.cw-pie-caja { display: flex; justify-content: center; }
.cw-pie-firma { margin: 0; color: var(--ink-3); text-align: center; }
/* El separador lo pone el CSS: si un día falta el correo, no queda un punto
   colgando en medio de la nada. */
.cw-pie-firma > *:not(:first-child)::before { content: '·'; margin: 0 .6em; }
.cw-pie a { color: var(--ink-2); border-bottom: 1px solid transparent; transition: color .15s ease, border-color .15s ease; }
.cw-pie a:hover { color: var(--acento); border-bottom-color: currentColor; }

/* ── Visor de cartas ─────────────────────────────────────────────────────── */

.cw-visor {
  position: fixed; inset: 0; z-index: 200;
  display: flex; flex-direction: column;
  background: #0c1211;
  color: #fff;
}
.cw-visor[hidden] { display: none; }

.cw-visor-barra {
  display: flex; align-items: center; justify-content: space-between; gap: 14px;
  padding: calc(12px + env(safe-area-inset-top)) 16px 12px;
  background: linear-gradient(180deg, rgba(12,18,17,.95), rgba(12,18,17,0));
  position: relative; z-index: 3;
}
.cw-visor-titulo { font-family: var(--f-titular); font-size: 1.12rem; font-weight: 500; }
.cw-visor-acciones { display: flex; align-items: center; gap: 10px; }
.cw-visor-pdf {
  padding: .48em 1em; border-radius: 999px;
  border: 1px solid rgba(255,255,255,.35);
  font-size: .84rem; font-weight: 600;
}
.cw-visor-pdf:hover { background: rgba(255,255,255,.14); }
.cw-visor-pdf[hidden] { display: none; }
.cw-visor-cerrar {
  display: flex; align-items: center; justify-content: center;
  width: 40px; height: 40px; border-radius: 50%;
  background: rgba(255,255,255,.12);
}
.cw-visor-cerrar:hover { background: rgba(255,255,255,.24); }

/* Las hojas en fila con enganche: pasar página es el mismo gesto de siempre y
   lo hace el navegador, así que va suave hasta en un móvil viejo. */
.cw-visor-hojas {
  flex: 1; min-height: 0;
  display: flex; overflow-x: auto; overflow-y: hidden;
  scroll-snap-type: x mandatory;
  scrollbar-width: none;
  /* iOS: sin esto el arrastre se contagia a la página de debajo. */
  overscroll-behavior: contain;
}
.cw-visor-hojas::-webkit-scrollbar { display: none; }

.cw-visor-hoja {
  flex: 0 0 100%; scroll-snap-align: center;
  display: flex; align-items: center; justify-content: center;
  padding: 4px 10px;
  /* Ampliar con dos dedos dentro de la hoja, sin tocar el resto del visor. */
  overflow: auto; touch-action: pan-x pan-y pinch-zoom;
}
.cw-visor-hoja img {
  max-width: 100%; max-height: 100%;
  width: auto; height: auto;
  object-fit: contain;
  border-radius: 6px;
  background: #fff;
}

.cw-visor-pie {
  display: flex; align-items: center; justify-content: center; gap: 18px;
  padding: 12px 16px calc(14px + env(safe-area-inset-bottom));
  background: linear-gradient(0deg, rgba(12,18,17,.95), rgba(12,18,17,0));
  position: relative; z-index: 3;
}
.cw-visor-flecha {
  display: flex; align-items: center; justify-content: center;
  width: 44px; height: 44px; border-radius: 50%;
  background: rgba(255,255,255,.12);
}
.cw-visor-flecha:hover { background: rgba(255,255,255,.24); }
.cw-visor-flecha[disabled] { opacity: .3; cursor: default; }
.cw-visor-cuenta { font-size: .9rem; font-variant-numeric: tabular-nums; min-width: 5.5em; text-align: center; opacity: .9; }

.cw-visor-pista {
  position: absolute; left: 50%; bottom: 86px; transform: translateX(-50%);
  margin: 0; padding: .45em 1em; border-radius: 999px;
  background: rgba(255,255,255,.14); backdrop-filter: blur(8px);
  font-size: .8rem; white-space: nowrap;
  transition: opacity .5s ease; pointer-events: none;
}
.cw-visor-pista.es-oculta { opacity: 0; }

/* Sólo hay una hoja: las flechas y el contador sobran. */
.cw-visor.es-una-hoja .cw-visor-pie { display: none; }
.cw-visor.es-una-hoja .cw-visor-pista { display: none; }


/* ── Páginas de error ────────────────────────────────────────────────────── */

.cw-simple { min-height: 100svh; display: flex; align-items: center; justify-content: center; padding: 24px; text-align: center; }
.cw-simple-caja { max-width: 460px; }
.cw-simple-codigo { margin: 0; font-family: var(--f-titular); font-size: 5rem; line-height: 1; color: var(--acento); opacity: .22; }
.cw-simple h1 { margin: -12px 0 12px; font-size: clamp(1.6rem, 5vw, 2.2rem); }
.cw-simple-texto { margin: 0 0 28px; color: var(--ink-2); }


/* ── Móvil ───────────────────────────────────────────────────────────────── */

@media (max-width: 860px) {
  .cw-ubicacion-caja { grid-template-columns: 1fr; }
  .cw-sobre-caja { grid-template-columns: 1fr; }
  /* El texto antes que la foto: en columna, la imagen primero empuja el texto
     fuera de la pantalla. */
  .cw-sobre-foto { order: -1; }
  .cw-mapa iframe { height: 300px; }
}

@media (max-width: 760px) {
  /* Tres cosas y una a cada lado: el menú a la izquierda donde llega el pulgar,
     el logo centrado y el idioma a la derecha. El `order` lo coloca sin tener
     que reordenar el HTML, que en pantalla grande está bien como está. */
  .cw-nav-menu { display: flex; order: 1; }
  .cw-nav-marca { order: 2; margin: 0 auto; justify-content: center; }
  .cw-nav-acciones { order: 3; margin-left: 0; }
  .cw-nav-marca img { max-height: 34px; }

  .cw-nav-reservar { display: none; }         /* ya está en la barra de abajo */

  .cw-nav-enlaces {
    position: fixed; inset: var(--nav-alto) 0 auto 0;
    flex-direction: column; gap: 0; margin: 0;
    padding: 8px 20px 20px;
    background: var(--ground); color: var(--ink);
    border-bottom: 1px solid var(--line);
    box-shadow: var(--sombra);
    transform: translateY(-8px); opacity: 0; pointer-events: none;
    transition: transform .22s ease, opacity .22s ease;
  }
  .cw-nav-enlaces.es-abierto { transform: translateY(0); opacity: 1; pointer-events: auto; }
  .cw-nav-enlaces a { padding: 14px 0; border-bottom: 1px solid var(--line); font-size: 1rem; }
  .cw-nav-enlaces a:last-child { border-bottom: 0; }
  .cw-nav-enlaces a::after { display: none; }

  .cw-barra-movil { display: flex; }
  /* Hueco para que la barra fija no tape el final del pie. */
  .cw-pie { padding-bottom: calc(84px + env(safe-area-inset-bottom)); }

  .cw-rejilla-cartas { grid-template-columns: repeat(auto-fill, minmax(150px, 1fr)); gap: 14px; }
  .cw-rejilla-fotos  { grid-template-columns: repeat(2, 1fr); gap: 8px; }
  .cw-local-botones  { flex-direction: column; }
}

@media (max-width: 380px) {
  .cw-rejilla-cartas { grid-template-columns: 1fr 1fr; }
  .cw-portada-botones .cw-btn { width: 100%; }
}