/* ═══════════════════════════════════════════════════════════════════════════
   CeibeCMS — la portada del grupo.

   Una sola pantalla, sin scroll, en la que sólo hay que hacer una cosa: elegir
   un local. Se carga SÓLO en la corporativa; las landings no ven una línea de
   esto.

   Todo el movimiento es CSS. Ni un frame de JavaScript: las animaciones van de
   `transform` y `opacity`, que el navegador compone en la GPU sin volver a
   maquetar la página. Es la diferencia entre «suave» y «a tirones» en el móvil
   de alguien que pasa por la puerta.

   Dónde está cada logo —su ángulo, su columna, su retraso— lo calcula PHP y
   llega en variables (`--ang`, `--x`, `--d`…). Aquí sólo se anima.
   ═══════════════════════════════════════════════════════════════════════════ */

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

/* `--acento` y `--f` NO se tocan aquí: los pone `web.css` y los pisa el
   <style> que `cabeza.php` escribe con el color y la tipografía del panel.
   Redefinirlos en esta hoja —que carga después— sería devolver el acento
   configurado a un verde de fábrica. */
:root {
  --tinta: #ffffff;
  --fundido: 1.6s;

  /* El beige del halo de la frase de portada, en componentes para poder darle
     la transparencia que haga falta en cada capa de la sombra. Un crema cálido
     que va con cualquier foto —atardecer, madera, mantel— sin teñirla y sin
     competir con el acento del local. */
  --beige: 232, 219, 196;

  /* ── Lo grande que se ve un logo ────────────────────────────────────────
     Antes era un `vmin` con tope de 128px: en un monitor de 24 pulgadas manda
     la ALTURA, así que la portada salía con los mismos logos diminutos que en
     una tablet y con medio ancho sin usar. Ahora manda el ancho —que es lo que
     sobra en un ordenador— con la altura de tope por si la ventana es baja o
     el móvil está tumbado.

     Cuatro tramos, que son los cuatro sitios desde donde se mira esto:
     móvil, tablet, portátil y monitor. */
  --tam-pantalla: min(clamp(64px, 20vw, 132px), 24vh);
}
@media (min-width: 700px)  { :root { --tam-pantalla: min(clamp(96px,  13vw, 172px), 26vh); } }
@media (min-width: 1100px) { :root { --tam-pantalla: min(clamp(130px, 11vw, 210px), 28vh); } }
@media (min-width: 1600px) { :root { --tam-pantalla: min(clamp(160px, 10vw, 264px), 30vh); } }


html, body { margin: 0; padding: 0; }

body.cwg {
  /* `dvh` y no `vh`: en el móvil, `100vh` cuenta la barra del navegador que
     luego se retrae, y la pantalla «sin scroll» acababa teniendo scroll. */
  height: 100dvh;
  display: grid;
  grid-template-rows: auto minmax(0, 1fr) auto;
  overflow: hidden;
  background: #0b0f0e;
  color: var(--tinta);
  font-family: var(--f);
  -webkit-font-smoothing: antialiased;

  /* Esta pantalla no se lee: se pulsa. Al arrastrar el ratón por encima o hacer
     doble clic sobre una tarjeta, el navegador seleccionaba lo que pillara —el
     nombre del <h1> invisible, la frase, el hueco entre logos— y lo pintaba de
     azul de selección encima de la foto. No hay nada aquí que nadie quiera
     copiar: los logos son botones.

     Lo que SÍ se copia —la dirección y el teléfono del modal, el correo del
     pie— vuelve a ser seleccionable un poco más abajo. */
  -webkit-user-select: none;
  user-select: none;
  /* Y en el móvil, el recuadro gris que sale al mantener pulsado. */
  -webkit-tap-highlight-color: transparent;
}

/* Los logos tampoco se arrastran: al tirar de uno, el navegador se creía que
   querías llevarte la imagen a otra ventana y colgaba su fantasma del cursor. */
.cwg-marca img, .cwg-logo-caja img {
  /* Al 100% del hueco que deja el `padding`: el aire lo pone la tarjeta, no la
     imagen. Con las dos poniendo margen, el logo acababa siendo un sello. */
  width: 100%; height: 100%;
  object-fit: contain;
  display: block;
  transition: filter .32s ease;
}

/* Lo que sí se selecciona.

   El modal entero: ahí hay una dirección que copiar, un teléfono que apuntar y
   un formulario que escribir — y un campo de texto donde no se puede
   seleccionar está roto, no protegido. Y el correo del pie, que desde que dejó
   de ser un enlace sólo se puede usar copiándolo. */
.cwg-modal, .cwg-pie-correo {
  -webkit-user-select: text;
  user-select: text;
}

/* ── El fondo ─────────────────────────────────────────────────────────────
   Dos capas que se relevan: la que entra aparece ENCIMA, y la de debajo se
   queda entera hasta que ya no se ve. Es lo contrario de cruzar las dos
   opacidades a la vez: si la de abajo se apagara mientras la de arriba se
   enciende, a mitad del relevo ninguna taparía del todo, asomaría el fondo de
   la página y se vería un oscurecimiento — el «salto» del cambio de foto. */

.cwg-fondos { position: fixed; inset: 0; z-index: 0; overflow: hidden; }

.cwg-fondo {
  position: absolute; inset: 0;
  opacity: 0;
  /* Lineal, como el fundido de un vídeo: la mezcla avanza a ritmo constante.
     Con una curva, el cruce se acelera por el medio y ESO es lo que el ojo lee
     como tirón. */
  transition: opacity var(--fundido) linear;
  will-change: opacity;
}
.cwg-fondo.es-visible { opacity: 1; }

.cwg-fondo img {
  width: 100%; height: 100%;
  object-fit: cover;
  display: block;
  will-change: transform;
}

/* El movimiento de la foto mientras está en pantalla. Dura la pausa más el
   fundido, que es justo lo que vive la capa: así se retira en el mismo
   instante en que su recorrido acaba y nunca se la ve parada al lado de la
   siguiente arrancando.

   La clave para que el relevo no se note es que cada foto EMPIECE DONDE ACABÓ
   LA ANTERIOR. Por eso `alejar` sale de `scale(1.16) translate(1%, -1%)`, que
   es exactamente donde termina `acercar`. */

/* Un solo sentido: velocidad constante. Las dos capas se mueven igual durante
   el cruce, y un cambio de escala sin cambio de velocidad casi no se ve. Con
   `ease-out` la que salía estaba ya frenada y la que entraba arrancaba
   disparada: dos ritmos distintos en pantalla a la vez. */
.cwg-fondos[data-efecto="acercar"] .es-visible img { animation: cwg-acercar var(--mov, 9s) linear forwards; }
.cwg-fondos[data-efecto="alejar"]  .es-visible img { animation: cwg-alejar  var(--mov, 9s) linear forwards; }

/* Alternando —y paneando— el recorrido encadena exacto, así que aquí sí
   conviene `ease-in-out`: el relevo cae en el punto muerto de las dos, quietas
   y en la misma posición. Ahí el cambio de foto es literalmente invisible. */
.cwg-fondos[data-efecto="alternar"] .es-visible.es-par   img { animation: cwg-acercar var(--mov, 9s) ease-in-out forwards; }
.cwg-fondos[data-efecto="alternar"] .es-visible.es-impar img { animation: cwg-alejar  var(--mov, 9s) ease-in-out forwards; }

.cwg-fondos[data-efecto="paneo"] .es-visible.es-par   img { animation: cwg-paneo     var(--mov, 9s) ease-in-out forwards; }
.cwg-fondos[data-efecto="paneo"] .es-visible.es-impar img { animation: cwg-paneo-vuelta var(--mov, 9s) ease-in-out forwards; }

@keyframes cwg-acercar { from { transform: scale(1)     translate(0, 0); }
                         to   { transform: scale(1.16)  translate(1%, -1%); } }
@keyframes cwg-alejar  { from { transform: scale(1.16)  translate(1%, -1%); }
                         to   { transform: scale(1)     translate(0, 0); } }
@keyframes cwg-paneo        { from { transform: scale(1.14) translateX(-2.5%); }
                              to   { transform: scale(1.14) translateX(2.5%); } }
@keyframes cwg-paneo-vuelta { from { transform: scale(1.14) translateX(2.5%); }
                              to   { transform: scale(1.14) translateX(-2.5%); } }

/* El velo. Sin él, un logo blanco sobre una terraza a mediodía no se lee — y
   las fotos las elige cada uno, así que hay que contar con la peor. */
body.cwg::before {
  content: '';
  position: fixed; inset: 0; z-index: 1;
  pointer-events: none;
  background:
    linear-gradient(to bottom, rgba(0,0,0,.55) 0%, rgba(0,0,0,0) 22%,
                               rgba(0,0,0,0) 74%, rgba(0,0,0,.6) 100%),
    rgba(6, 10, 9, var(--velo, 45%));
}

/* ── Cabecera y pie ───────────────────────────────────────────────────────── */

.cwg-cabeza, .cwg-pie { position: relative; z-index: 3; }

/* Arriba sólo queda el selector de idioma, a la derecha. Cuando la página tiene
   una sola lengua no se pinta y la cabecera se queda vacía: el hueco que deja es
   el aire de arriba de la escena, y viene bien. */
.cwg-cabeza {
  display: flex; align-items: center; justify-content: flex-end;
  padding: clamp(12px, 2.4vmin, 26px) clamp(14px, 3vw, 40px);
}

/* El logo del grupo, suelto sobre la foto: sin caja, sin borde y sin fondo. Lo
   que lo hace legible es lo mismo que a los logos de los locales —el tono
   invertido y una sombra— y no un recuadro detrás. Un logo que necesita chapa
   para leerse acaba pareciendo una pegatina pegada en la esquina.

   Va dentro de la escena y no en la cabecera: encabeza el bloque que se lee de
   un tirón —logo, frase, locales— en vez de quedarse arriba como una marca de
   agua. El aire de arriba lo pone él, que es el primero; entre él y la frase
   sólo un respiro, para que se lean como una unidad y no como dos cosas. */
.cwg-marca {
  align-self: center;
  display: inline-flex; align-items: center;
  margin: clamp(16px, 6.5vh, 84px) 0 clamp(8px, 1.8vh, 26px);
}
.cwg-marca img {
  display: block; width: auto;
  /* Los mismos cuatro tramos que las tarjetas, y por lo mismo: en `vmin` manda
     la altura, y en un monitor de 1920×1080 el logo se quedaba en 96 px con
     media pantalla de ancho por usar. Manda el ANCHO; el `vh` de fuera es el
     freno para la ventana baja. */
  height: min(clamp(60px, 17.25vw, 110px), 15vh);
}
@media (min-width: 700px)  { .cwg-marca img { height: min(clamp(90px,  12.65vw, 161px), 17.3vh); } }
@media (min-width: 1100px) { .cwg-marca img { height: min(clamp(127px, 10.9vw,  207px), 19.6vh); } }
@media (min-width: 1600px) { .cwg-marca img { height: min(clamp(161px, 10.35vw, 276px), 21.9vh); } }

/* Las mismas tres pintas que en el mosaico, y por la misma razón: aquí el fondo
   siempre es oscuro —la foto va con su velo—, así que un logo monocromo oscuro
   se invierte y uno con color se despega con un halo. Cuál de los tres es se
   decide al subirlo, mirando la imagen. */
.cwg-marca img.es-oscuro { filter: invert(1) brightness(1.75) drop-shadow(0 3px 14px rgba(0,0,0,.55)); }
.cwg-marca img.es-claro  { filter: drop-shadow(0 3px 16px rgba(0,0,0,.65)); }
.cwg-marca img.es-color  {
  filter:
    drop-shadow(0 0 3px rgba(255,255,255,.85))
    drop-shadow(0 0 9px rgba(255,255,255,.55))
    drop-shadow(0 4px 16px rgba(0,0,0,.55));
}
.cwg-marca-texto { font-size: clamp(1rem, 2.4vmin, 1.35rem); font-weight: 700; letter-spacing: -.01em; }

/* El selector de idioma viene de `web.css`, pensado para la barra de una
   landing. Sobre la foto necesita el borde y el texto en claro. */
.cwg-cabeza .cw-idiomas-boton { color: var(--tinta); background: rgba(255,255,255,.10); border-color: rgba(255,255,255,.45); }
.cwg-cabeza .cw-idiomas-boton:hover { background: rgba(255,255,255,.2); }

.cwg-pie {
  display: flex; align-items: center; justify-content: center; gap: clamp(10px, 2vw, 26px);
  flex-wrap: wrap;
  padding: clamp(10px, 2vmin, 22px) clamp(14px, 3vw, 40px);
  font-size: .82rem;
}
.cwg-pie-firma { opacity: .6; }

/* El correo va escrito, no enlazado: se lee y se copia, pero no es un botón
   que abra un programa de correo que puede no existir. Sin subrayado y sin
   cursor de mano; lo de poder seleccionarlo se decide arriba, donde se apaga la
   selección del resto de la pantalla. */
.cwg-pie-correo { opacity: .72; cursor: text; }
.cwg-pie-enlace {
  font: inherit; color: inherit; background: none; border: 0; padding: 4px 2px;
  cursor: pointer; opacity: .82;
  border-bottom: 1px solid rgba(255,255,255,.35);
  transition: opacity .18s ease, border-color .18s ease;
}
.cwg-pie-enlace:hover { opacity: 1; border-bottom-color: currentColor; }

.cwg-solo-lectores {
  position: absolute; width: 1px; height: 1px; overflow: hidden;
  clip: rect(0 0 0 0); clip-path: inset(50%); white-space: nowrap;
}

/* ── La escena ────────────────────────────────────────────────────────────── */

/* Flex y no un grid de filas fijas: en la escena hay ahora hasta tres cosas —el
   logo, la frase y la pista— y la frase puede no existir. Con filas declaradas,
   una página sin frase dejaba la pista en la fila que no era y sin su `1fr`.
   Así cada uno toma su alto y la pista se queda con lo que sobre, sean dos
   hermanos o tres. */
.cwg-escena {
  position: relative; z-index: 2;
  min-height: 0;
  display: flex; flex-direction: column;
  overflow: hidden;
}
.cwg-pista { flex: 1 1 auto; }

/* La frase de portada. Manuscrita y grande: es lo que se lee después del
   nombre y lo que decide si a alguien le apetece entrar, así que se le da peso
   propio en vez de dejarla como un subtítulo. */
.cwg-claim {
  font-family: 'Caveat', 'Segoe Script', cursive;
  margin: 0 auto;
  /* Poco aire arriba: el hueco grande lo pone ya el margen del logo, que va
     justo encima. Aquí sólo hace falta que la frase no toque el logo. */
  padding: 0 clamp(14px, 4vw, 48px) clamp(10px, 2.4vh, 28px);
  /* Dos líneas, tres a lo sumo: el tope en `ch` es lo que decide dónde parte, y
     va con la pantalla porque en un monitor cabe una frase entera de un tirón y
     en un móvil no. */
  max-width: min(94vw, 26ch);
  text-align: center;
  /* Con el ancho, no con el `vmin`: en un monitor de 24 pulgadas manda la altura
     y la frase se quedaba en el mismo cuerpo que en una tablet. El `vh` de
     dentro del `min()` es el freno para la ventana baja y el móvil tumbado, que
     es donde una frase grande se come la escena entera. */
  font-size: clamp(2rem, min(8.5vw, 9vh), 5.5rem);
  font-weight: 600; line-height: 1.14;
  text-wrap: balance;
  /* Cuatro sombras, y las dos de en medio son el halo beige.

     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 beige 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 que se declara primero se pinta encima. */
  text-shadow:
    0 2px 5px rgba(0, 0, 0, .55),
    0 0 20px rgba(var(--beige), .55),
    0 0 58px rgba(var(--beige), .34),
    0 12px 44px rgba(0, 0, 0, .45);
}

/* La línea aguanta más caracteres cuanto más ancha es la pantalla: a 26 en un
   monitor la frase se parte donde no hace falta. */
@media (min-width: 1100px) { .cwg-claim { max-width: min(92vw, 30ch); } }
@media (min-width: 1600px) { .cwg-claim { max-width: min(88vw, 34ch); } }

/* 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. */
.cwg-palabra { display: inline-block; white-space: nowrap; }

/* Cada letra empieza apagada y algo caída; grupo.js las va encendiendo. */
.cwg-claim [data-l] {
  display: inline-block;
  position: relative;
  opacity: 0;
  transform: translateY(.18em);
  animation: cwg-letra .5s ease forwards;
}
.cwg-claim [data-l=" "] { width: .26em; }

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

/* ── El brillo ────────────────────────────────────────────────────────────
   Un destello beige que va recorriendo la frase sin orden: se enciende una
   letra, luego otra tres palabras más allá, luego dos casi a la vez. No hay
   ciclo que se repita porque cada letra tiene SU duración y SU retraso, que
   `grupo.js` sortea al partir la frase; los ciclos no son múltiplos unos de
   otros, así que la coincidencia tarda minutos en volver.

   El destello es una COPIA de la letra encima de la letra —`attr(data-l)`, que
   ya lleva el carácter—, y lo único que se anima es su `opacity`. Animar el
   `text-shadow` directamente habría sido repintar el texto sesenta veces por
   segundo; una capa que sólo aparece y desaparece la compone la GPU y no toca
   el texto de debajo. */
.cwg-claim [data-l]::after {
  content: attr(data-l);
  position: absolute;
  left: 0; top: 0;
  color: rgb(var(--beige));
  text-shadow:
    0 0 8px  rgba(var(--beige), .95),
    0 0 24px rgba(var(--beige), .8),
    0 0 62px rgba(var(--beige), .5);
  opacity: 0;
  pointer-events: none;
  animation: cwg-destello var(--brillo-dur, 8s) var(--brillo-d, 0s) ease-in-out infinite;
}
/* El hueco entre palabras no brilla: no hay nada que encender. */
.cwg-claim [data-l=" "]::after { content: none; }

/* 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 cwg-destello {
  0%, 62%, 100% { opacity: 0; }
  70%           { opacity: .92; }
  78%           { opacity: .35; }
  84%           { opacity: .6; }
  92%           { opacity: 0; }
}

/* Sin JavaScript, entera y quieta: la animación es un adorno, no el contenido.
   Sin las letras sueltas no hay a qué darle el destello, así que ahí brilla la
   frase entera a la vez — un solo elemento, así que animar su sombra no cuesta
   nada. */
.cwg-claim:not([data-partida]) [data-l] { opacity: 1; transform: none; animation: none; }
.cwg-claim:not([data-partida]) [data-l]::after { content: none; }
.cwg-claim:not([data-partida]) { animation: cwg-brillo-entero 6.5s ease-in-out infinite; }

@keyframes cwg-brillo-entero {
  0%, 100% {
    text-shadow:
      0 2px 5px rgba(0, 0, 0, .55),
      0 0 20px rgba(var(--beige), .55),
      0 0 58px rgba(var(--beige), .34),
      0 12px 44px rgba(0, 0, 0, .45);
  }
  50% {
    text-shadow:
      0 2px 5px rgba(0, 0, 0, .55),
      0 0 26px rgba(var(--beige), .85),
      0 0 74px rgba(var(--beige), .55),
      0 12px 44px rgba(0, 0, 0, .45);
  }
}

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

.cwg-vacio { align-self: center; text-align: center; opacity: .7; }

.cwg-pista {
  position: relative; min-height: 0; overflow: hidden;

  /* `--escala` la escribe PHP en el `style` y vale 1 casi siempre: sólo baja
     cuando la animación los enseña TODOS a la vez y son muchos (Grupo::escala).
     El CSS no sabe cuántos locales hay; PHP sí. */
  --tam: calc(var(--tam-pantalla) * var(--escala, 1));

  /* El radio de las que van en círculo —órbita, anillos, abanico—. Se resta
     medio logo para que el de arriba no se salga por el techo.

     Iba en `%`, y ahí estaba el error que las tenía amontonadas en el centro:
     un porcentaje dentro de `translateX()` NO se mide contra la pantalla, se
     mide contra el ancho del propio elemento. `min(34vmin, 42%)` acababa
     valiendo 42% de un logo —cincuenta píxeles— en vez de un tercio de la
     pantalla. */
  --radio: max(56px, min(46vw, 34vh) - var(--tam) * .5);

  /* El del carrusel es hacia el espectador, no hacia los lados, y lo acota
     además la perspectiva: pasado cierto punto el de delante sale cortado. */
  --radio-z: min(26vw, 40vh, 460px);
}
.cwg-fila  { position: absolute; inset: 0; }

.cwg-locales { list-style: none; margin: 0; padding: 0; }

/* ── La tarjeta de cada local ──────────────────────────────────────────────
   Lo que se mueve por la pantalla es una TARJETA, no un logo suelto, y es la
   misma en las diez animaciones: cambiar de animación en el panel cambia por
   dónde va, no qué es. Antes el logo flotaba sin nada detrás y con fotos claras
   se perdía; y sin una silueta reconocible tampoco se leía como algo pulsable.

   Cuatro capas hacen el cristal, y cada una está por algo:

     · el DESENFOQUE de lo que hay detrás — es lo que la vuelve translúcida de
       verdad en vez de un rectángulo gris encima de la foto;
     · el SEMIFONDO en degradado, más claro arriba que abajo, que es como cae la
       luz sobre un cristal y lo que evita que parezca plana;
     · el BORDE fino y el filo interior de arriba, que le dan el canto;
     · el GLOW, con el color del propio local, que la despega del fondo.
   ────────────────────────────────────────────────────────────────────────── */

.cwg-local { position: absolute; }

.cwg-logo {
  display: block; text-decoration: none; color: inherit;
  -webkit-tap-highlight-color: transparent;
}

.cwg-logo-giro { display: block; }

.cwg-logo-caja {
  display: grid; place-items: center;
  width: var(--tam); height: var(--tam);
  /* El aire de dentro va en `%` para que sea el mismo a cualquier tamaño: en
     píxeles, la tarjeta de un móvil quedaba ahogada y la de un monitor vacía.
     Justo el necesario para que el logo no toque el borde: el protagonista es
     él, y con el 13% de antes la tarjeta se comía un tercio de la superficie. */
  padding: 9%;

  /* El radio también en `%`, y por lo mismo. Además así los anillos —que dan a
     cada aro un tamaño distinto— salen todos con la misma curva. */
  border-radius: 17%;
  border: 1px solid rgba(255, 255, 255, .2);

  /* El semifondo. En degradado y no de un solo tono: un plano liso al 8% se ve
     como un recuadro sucio, y este da el brillo de arriba a abajo de un cristal. */
  background-image: linear-gradient(
      158deg,
      rgba(255, 255, 255, .13) 0%,
      rgba(255, 255, 255, .035) 48%,
      rgba(255, 255, 255, .075) 100%);
  background-color: rgba(255, 255, 255, .03);

  -webkit-backdrop-filter: blur(11px) saturate(150%);
  backdrop-filter: blur(11px) saturate(150%);

  /* Sombra proyectada, glow del color del local y el filo de luz de arriba. El
     glow va MUY tenue en reposo a propósito: son veinte tarjetas a la vez, y al
     50% la pantalla entera se lava. Lo que se enciende es la que se señala. */
  box-shadow:
    0 18px 40px -20px rgba(0, 0, 0, .9),
    0 0 26px -14px color-mix(in srgb, var(--acento, #fff) 60%, transparent),
    inset 0 1px 0 rgba(255, 255, 255, .26);

  /* El tamaño de ESTA tarjeta, para lo que tenga que medirse contra ella.
     Existe porque en «anillos» cada aro es de un tamaño distinto (`--tam-aro`) y
     la sombra del logo tiene que encoger con él. */
  --lg: var(--tam);

  transition:
    transform .32s cubic-bezier(.22, 1, .36, 1),
    border-color .32s ease,
    box-shadow .32s ease,
    background-color .32s ease;
}

.cwg-logo-caja img {
  /* El ANCHO al 100% del hueco que deja el `padding`: el aire lo pone la
     tarjeta, no la imagen. Con las dos poniendo margen, el logo acababa siendo
     un sello.

     La ALTURA no llega al 100%, y esto es lo que arregla los logos verticales.
     `object-fit: contain` ajusta por el lado que sobra: en uno apaisado manda el
     ancho —así que este 86% no le cambia nada, sigue viéndose igual de grande—,
     pero en uno MÁS ALTO QUE ANCHO manda el alto, y con el 100% el dibujo
     llegaba hasta el borde de la tarjeta. Ahí no cabía su sombra, que se pinta
     fuera de la imagen, y asomaba por debajo del cristal.

     Recortarla con `overflow: hidden` no valía: el canto de la tarjeta va
     redondeado al 17% y el aire es del 9%, así que la curva se comía las puntas
     del propio logo. La solución es que quepa, no que se corte. */
  width: 100%; height: 86%;
  object-fit: contain;
  display: block;
  transition: filter .32s ease;
}

/* Dentro de la tarjeta el fondo ya no es la foto, sino el cristal, que siempre
   es oscuro: un logo monocromo oscuro se invierte y uno con color sólo necesita
   despegarse. Cuál de los tres es se decide al subirlo, mirando la imagen.

   Los DOS `drop-shadow` de cada uno hacen cosas distintas y por eso van los dos:
   el corto y oscuro es el canto —lo que recorta la silueta contra el cristal— y
   el largo y abierto es la sombra proyectada, la que hace que el logo parezca
   estar POR ENCIMA de la tarjeta y no impreso en ella. Con una sola sombra o se
   ve plano o se ve sucio.

   El orden importa: `invert()` va primero, así la sombra se calcula sobre el
   logo ya invertido y sale por detrás de la silueta que se ve, no de la que
   había antes de invertir. */
/* Las sombras van en proporción a la tarjeta (`--lg`) y no en píxeles fijos.
   En píxeles, los mismos 8+20 que quedan bien en un monitor son media tarjeta en
   un móvil de 64px: ni cabían dentro ni había forma de que cupieran. Los valores
   están calibrados para que en un portátil salgan casi los de siempre. */
/* UNA sombra y corta, la del canto: la que recorta la silueta contra el cristal.
   Antes había además una larga y abierta (`0 8px 20px`) para que el logo
   pareciera flotar por encima de la tarjeta, y ésa es la que se salía por debajo
   con los logos MÁS ALTOS QUE ANCHOS. No tenía arreglo: `contain` ajusta esos
   logos por el alto, así que el dibujo llega hasta donde acaba el hueco y su
   sombra cae ya fuera del cristal. Encoger el logo para hacerle sitio lo dejaba
   pequeño, y recortarla se comía las esquinas del propio logo porque el canto va
   redondeado. Se queda la corta, que cabe de sobra con cualquier logo.

   Va en proporción a la tarjeta (`--lg`) y no en píxeles: los mismos que quedan
   bien en un monitor son media tarjeta en un móvil. */
.cwg-logo-caja img.es-oscuro {
  filter:
    invert(1) brightness(1.85)
    drop-shadow(0 calc(var(--lg) * .014) calc(var(--lg) * .034) rgba(0,0,0,.7));
}
.cwg-logo-caja img.es-claro {
  filter: drop-shadow(0 calc(var(--lg) * .014) calc(var(--lg) * .034) rgba(0,0,0,.7));
}
/* El de color lleva además un filo blanco muy justo: un logo oscuro con colores
   no se puede invertir sin destrozarlo, y sobre el cristal se hunde. */
.cwg-logo-caja img.es-color {
  filter:
    drop-shadow(0 0 calc(var(--lg) * .018) rgba(255,255,255,.55))
    drop-shadow(0 calc(var(--lg) * .014) calc(var(--lg) * .038) rgba(0,0,0,.65));
}

/* El local sin logo: su inicial, centrada en la tarjeta. */
.cwg-logo-inicial {
  font-size: calc(var(--tam) * .38); font-weight: 300; opacity: .9;
  text-shadow: 0 2px 10px rgba(0,0,0,.5);
}

/* Al acercarse, la tarjeta se levanta y se enciende con SU color, el que tiene
   la landing de ese local. Es lo único de la pantalla que cambia por pasar el
   ratón, y ahora que hay una silueta con borde el resplandor puede ser un
   `box-shadow`: sigue la forma de la tarjeta, que es la que se ve. */
.cwg-logo:hover .cwg-logo-caja,
.cwg-logo:focus-visible .cwg-logo-caja {
  transform: scale(1.09) translateY(-3px);
  border-color: color-mix(in srgb, var(--acento, #fff) 72%, white);
  background-color: rgba(255, 255, 255, .12);
  box-shadow:
    0 26px 52px -20px rgba(0, 0, 0, .92),
    0 0 34px -6px color-mix(in srgb, var(--acento, #fff) 62%, transparent),
    inset 0 1px 0 rgba(255, 255, 255, .42);
}
.cwg-logo:focus-visible { outline: none; }
/* El que crece pasa por delante: en las tiras y en la constelación los logos se
   rozan, y a medio agrandar quedaba por debajo del vecino. */
.cwg-local:hover, .cwg-local:focus-within { z-index: 5; }


/* ═══ Las diez animaciones ═════════════════════════════════════════════════
   Cada una decide DÓNDE va cada logo y CÓMO se mueve el conjunto. Comparten
   el mismo marcado: cambiar de animación en el panel es cambiar un atributo.
   ═════════════════════════════════════════════════════════════════════════ */

/* ── 1. Órbita ── un sistema solar: la rueda gira y los logos se mantienen
   derechos, porque un logo boca abajo no lo reconoce nadie. */
[data-anim="orbita"] .cwg-locales { position: absolute; inset: 0; animation: cwg-rueda 78s linear infinite; }
[data-anim="orbita"] .cwg-local {
  inset: 0; margin: auto;
  width: var(--tam); height: var(--tam);
  transform: rotate(var(--ang)) translateX(var(--radio)) rotate(calc(-1 * var(--ang)));
}
[data-anim="orbita"] .cwg-logo-giro { animation: cwg-rueda-contra 78s linear infinite; }

@keyframes cwg-rueda        { to { transform: rotate(360deg); } }
@keyframes cwg-rueda-contra { to { transform: rotate(-360deg); } }

/* ── 2. Marea ── dos corrientes cruzándose. Cada fila lleva dos copias de la
   lista y se desplaza justo la mitad: al terminar, la segunda copia está donde
   estaba la primera y el bucle no tiene costura. */
[data-anim="marea"] .cwg-fila {
  /* `inset: auto` a propósito: la regla general fija los cuatro lados, y una
     tira más ancha que la pantalla necesita que el derecho quede suelto. */
  inset: auto; left: 0;
  display: flex; width: max-content;
  align-items: center;
  gap: clamp(18px, 4vw, 76px);
}
[data-anim="marea"] .cwg-fila:nth-child(1) { top: 8%; animation: cwg-tira-izq 46s linear infinite; }
[data-anim="marea"] .cwg-fila:nth-child(2) { bottom: 8%; animation: cwg-tira-der 58s linear infinite; }
[data-anim="marea"] .cwg-locales { display: flex; align-items: center; gap: clamp(18px, 4vw, 76px); }
[data-anim="marea"] .cwg-local { position: relative; }

@keyframes cwg-tira-izq { from { transform: translateX(0); }    to { transform: translateX(-50%); } }
@keyframes cwg-tira-der { from { transform: translateX(-50%); } to { transform: translateX(0); } }

/* ── 3. Constelación ── repartidos como estrellas, cada uno con su deriva.
   Nunca coinciden dos movimientos: el retraso y la distancia salen del id del
   local, así que la disposición es siempre la misma pero no parece calculada. */
[data-anim="constelacion"] .cwg-locales { position: absolute; inset: 0; }
[data-anim="constelacion"] .cwg-local {
  left: var(--x); top: var(--y);
  translate: -50% -50%;
  animation: cwg-deriva 22s var(--d) ease-in-out infinite alternate;
}
@keyframes cwg-deriva {
  from { transform: translate(0, 0); }
  to   { transform: translate(var(--dx), var(--dy)); }
}

/* ── 4. Carrusel 3D ── un cilindro que gira. Los de delante se ven enteros;
   los de atrás, más pequeños y apagados, dan la sensación de profundidad. */
[data-anim="carrusel"] .cwg-pista { perspective: 1400px; }
[data-anim="carrusel"] .cwg-fila { display: grid; place-items: center; }
[data-anim="carrusel"] .cwg-locales {
  position: relative;
  width: var(--tam); height: var(--tam);
  transform-style: preserve-3d;
  animation: cwg-cilindro 42s linear infinite;
}
[data-anim="carrusel"] .cwg-local {
  inset: 0;
  transform: rotateY(var(--ang)) translateZ(var(--radio-z));
}
@keyframes cwg-cilindro { to { transform: rotateY(-360deg); } }

/* ── 5. Mosaico ── la ordenada. Una rejilla que se adapta al hueco y donde los
   logos respiran por turnos: quieta pero viva. */
[data-anim="mosaico"] .cwg-fila { display: grid; place-content: center; }
[data-anim="mosaico"] .cwg-locales {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(var(--tam), 1fr));
  gap: clamp(16px, 3.4vw, 64px);
  /* Sin tope en píxeles: en un monitor de 2560 la rejilla se quedaba en una
     columna estrecha en medio con el resto de la pantalla vacío. */
  max-width: 94vw;
  justify-items: center;
}
[data-anim="mosaico"] .cwg-local { position: relative; animation: cwg-respirar 6.5s var(--d) ease-in-out infinite; }
@keyframes cwg-respirar {
  0%, 100% { transform: translateY(0) scale(1); opacity: .82; }
  50%      { transform: translateY(-7px) scale(1.05); opacity: 1; }
}

/* ── 6. Cascada ── caen despacio en columnas, cada una a su ritmo. Con muchos
   locales es de las mejores: van pasando y no se amontonan. */
[data-anim="cascada"] .cwg-locales { position: absolute; inset: 0; }
[data-anim="cascada"] .cwg-local {
  left: calc((var(--col) + .5) / var(--cols) * 100%);
  top: 0;
  margin-left: calc(var(--tam) / -2);
  animation: cwg-caer var(--dur, 20s) var(--d) linear infinite;
}
@keyframes cwg-caer {
  0%   { transform: translateY(-30vh); opacity: 0; }
  12%  { opacity: 1; }
  88%  { opacity: 1; }
  100% { transform: translateY(105vh); opacity: 0; }
}

/* ── 7. Abanico ── desplegados en arco, con la oscilación lenta de un péndulo.
   Los logos siguen derechos: oscila el abanico, no las marcas. */
[data-anim="abanico"] .cwg-locales {
  position: absolute; inset: 0;
  transform-origin: 50% 96%;
  animation: cwg-pendulo 13s ease-in-out infinite alternate;
}
[data-anim="abanico"] .cwg-local {
  left: 50%; bottom: 4%;
  margin-left: calc(var(--tam) / -2);
  /* El eje del abanico, por debajo del logo: cuanto más lejos, más abierto el
     arco. Va con el mismo radio que la órbita para que las dos se vean del
     mismo tamaño al cambiar de animación en el panel. */
  transform-origin: 50% calc(50% + var(--radio));
  transform: rotate(var(--ang));
}
[data-anim="abanico"] .cwg-logo-giro {
  transform: rotate(calc(-1 * var(--ang)));
  animation: cwg-pendulo-contra 13s ease-in-out infinite alternate;
}
@keyframes cwg-pendulo        { from { transform: rotate(-7deg); } to { transform: rotate(7deg); } }
@keyframes cwg-pendulo-contra { from { transform: rotate(calc(-1 * var(--ang) + 7deg)); }
                                to   { transform: rotate(calc(-1 * var(--ang) - 7deg)); } }

/* ── 8. Burbujas ── flotan a la deriva, a distintos tamaños. La más informal:
   funciona bien con pocos locales y fotos con mucho aire. */
[data-anim="burbujas"] .cwg-locales { position: absolute; inset: 0; }
[data-anim="burbujas"] .cwg-local {
  left: var(--x); top: var(--y);
  translate: -50% -50%;
  scale: var(--esc, 1);
  animation: cwg-flotar 11s var(--d) ease-in-out infinite alternate;
}
@keyframes cwg-flotar {
  from { transform: translate(0, 0) rotate(-1.5deg); }
  to   { transform: translate(var(--dx), calc(var(--dy) - 18px)) rotate(1.5deg); }
}

/* ── 9. Cinta ── una tira infinita en diagonal, más grande que la pantalla para
   que entre y salga por las esquinas sin que se vea el borde. */
[data-anim="cinta"] .cwg-pista { overflow: hidden; }
[data-anim="cinta"] .cwg-fila {
  inset: auto;
  display: flex; width: max-content;
  top: 50%; left: 50%;
  translate: -50% -50%;
  rotate: -9deg;
  align-items: center;
  gap: clamp(18px, 4vw, 76px);
  animation: cwg-tira-izq 52s linear infinite;
}
[data-anim="cinta"] .cwg-locales { display: flex; align-items: center; gap: clamp(18px, 4vw, 76px); }
[data-anim="cinta"] .cwg-local { position: relative; }

/* ── 10. Anillos ── dos o tres aros concéntricos girando en sentidos alternos.
   El más hipnótico, y el que mejor reparte cuando hay bastantes locales. */
[data-anim="anillos"] .cwg-locales { position: absolute; inset: 0; }
[data-anim="anillos"] .cwg-local {
  inset: 0; margin: auto;
  width: var(--tam); height: var(--tam);
  /* Aro 0 el de dentro, 2 el de fuera. PHP dice en cuál va cada logo; lo que
     mide cada aro se decide aquí, donde se sabe lo que cabe en la pantalla. */
  --r: calc(var(--radio) * (.42 + var(--aro) * .29));
  animation: cwg-rueda var(--dur, 60s) linear infinite;
  animation-direction: var(--dir, normal);
}
[data-anim="anillos"] .cwg-logo {
  transform: rotate(var(--ang)) translateX(var(--r)) rotate(calc(-1 * var(--ang)));
}
[data-anim="anillos"] .cwg-logo-giro {
  animation: cwg-rueda-contra var(--dur, 60s) linear infinite;
  animation-direction: var(--dir, normal);
}
[data-anim="anillos"] .cwg-local { --tam-aro: calc(var(--tam) * (1 - var(--aro) * .12)); }
[data-anim="anillos"] .cwg-logo-caja { width: var(--tam-aro); height: var(--tam-aro); --lg: var(--tam-aro); }


/* ── El modal ─────────────────────────────────────────────────────────────── */

.cwg-modal {
  width: min(94vw, 460px);
  max-height: 88dvh;
  margin: auto;
  padding: clamp(20px, 4vmin, 34px);
  border: 1px solid rgba(255,255,255,.16);
  border-radius: 20px;
  background: rgba(16, 22, 21, .84);
  -webkit-backdrop-filter: blur(22px) saturate(160%);
  backdrop-filter: blur(22px) saturate(160%);
  color: var(--tinta);
  box-shadow: 0 30px 90px -20px rgba(0,0,0,.8);
  overflow: auto;
  /* El modal es lo único de la pantalla que puede scrollear, y sólo si el texto
     no cabe en un móvil pequeño. */
}
.cwg-modal::backdrop { background: rgba(0,0,0,.55); -webkit-backdrop-filter: blur(3px); backdrop-filter: blur(3px); }

.cwg-modal[open] { animation: cwg-modal-entra .26s cubic-bezier(.22,1,.36,1); }
@keyframes cwg-modal-entra {
  from { opacity: 0; transform: translateY(14px) scale(.97); }
  to   { opacity: 1; transform: none; }
}

.cwg-modal-cerrar {
  position: absolute; top: 10px; right: 14px;
  width: 36px; height: 36px;
  font: inherit; font-size: 1.6rem; line-height: 1;
  color: inherit; background: none; border: 0; border-radius: 50%;
  opacity: .55; cursor: pointer;
  transition: opacity .18s ease, background-color .18s ease;
}
.cwg-modal-cerrar:hover { opacity: 1; background: rgba(255,255,255,.10); }

.cwg-ficha-cabeza { display: flex; align-items: center; gap: 16px; margin-bottom: 16px; padding-right: 30px; }
.cwg-ficha-logo {
  width: 74px; height: 74px; flex: none;
  object-fit: contain;
  border-radius: 18%;
  /* Beige claro, no el velo blanco de antes. Es el mismo beige del halo de la
     frase de portada (`--beige`) aclarado con blanco, así que no entra un color
     nuevo en la paleta. Y va aquí porque el logo del modal NO lleva las clases
     `es-oscuro`/`es-color`: se enseña tal cual, sin invertir, y sobre un fondo
     claro se lee un logo oscuro — que sobre el cristal del modal se perdía. */
  background: color-mix(in srgb, rgb(var(--beige)) 62%, #fff);
  padding: 8px;
}
.cwg-ficha-nombre { margin: 0; font-size: clamp(1.15rem, 3.4vmin, 1.5rem); font-weight: 700; letter-spacing: -.01em; }
.cwg-ficha-donde {
  display: block; margin: 4px 0 0;
  font-size: .88rem; color: rgba(255,255,255,.68);
  text-decoration: none;
}
a.cwg-ficha-donde:hover { color: #fff; text-decoration: underline; }

.cwg-ficha-texto { margin: 0 0 18px; font-size: .95rem; line-height: 1.55; color: rgba(255,255,255,.86); }
.cwg-ficha-texto p { margin: 0 0 .7em; }

.cwg-ficha-tel {
  display: flex; align-items: center; justify-content: space-between; gap: 12px;
  margin-bottom: 18px; padding: 12px 16px;
  border: 1px solid rgba(255,255,255,.16); border-radius: 12px;
  background: rgba(255,255,255,.06);
  text-decoration: none; color: inherit;
  transition: background-color .18s ease, border-color .18s ease;
}
.cwg-ficha-tel:hover { background: rgba(255,255,255,.12); border-color: rgba(255,255,255,.3); }
.cwg-ficha-tel-quien { font-size: .78rem; text-transform: uppercase; letter-spacing: .06em; opacity: .6; }
.cwg-ficha-tel-num   { font-size: 1.02rem; font-weight: 700; }

.cwg-ficha-botones { display: flex; gap: 10px; flex-wrap: wrap; }
.cwg-redes { display: flex; gap: 14px; flex-wrap: wrap; margin-top: 16px; font-size: .9rem; }
.cwg-redes a { color: rgba(255,255,255,.75); }
.cwg-redes a:hover { color: #fff; }

.cwg-btn {
  flex: 1 1 auto;
  display: inline-flex; align-items: center; justify-content: center;
  padding: .82em 1.3em;
  border-radius: 11px;
  font-size: .93rem; font-weight: 700; text-decoration: none;
  border: 1px solid transparent;
  transition: transform .18s ease, background-color .18s ease, border-color .18s ease;
}
.cwg-btn:active { transform: translateY(1px); }
.cwg-btn-claro  { color: #fff; border-color: rgba(255,255,255,.28); background: rgba(255,255,255,.07); }
.cwg-btn-claro:hover { background: rgba(255,255,255,.16); border-color: rgba(255,255,255,.45); }
.cwg-btn-acento { color: #fff; background: var(--acento); }
.cwg-btn-acento:hover { filter: brightness(1.12); }


/* ── Móvil ────────────────────────────────────────────────────────────────
   No es una versión reducida: es la misma pantalla con los radios y los huecos
   recalculados. Lo que cambia de verdad es que en vertical sobra alto y falta
   ancho, así que las animaciones que van en círculo se aprietan. */

@media (max-width: 700px) {
  /* Los radios ya no se retocan aquí: `--radio` y `--radio-z` salen del ancho
     y del alto de la pantalla, así que en un móvil se aprietan solos. Lo que
     queda es lo que de verdad cambia de tamaño con la pantalla. */
  /* El desenfoque del cristal, fuera del móvil. Son veinte tarjetas
     recalculando el fondo desenfocado en CADA frame mientras se mueven, y es lo
     que convierte esta portada en un pase de diapositivas en un teléfono de hace
     tres años. El semifondo se sube un punto para compensar, y el borde y el
     glow se quedan: es lo que la hace tarjeta. */
  .cwg-logo-caja {
    -webkit-backdrop-filter: none; backdrop-filter: none;
    background-color: rgba(255, 255, 255, .1);
  }

  .cwg-pie { font-size: .74rem; gap: 12px; }
  .cwg-ficha-logo { width: 58px; height: 58px; }
  .cwg-btn { flex: 1 1 100%; }
}

/* En apaisado y bajito (un móvil tumbado) el claim se come la escena. */
@media (max-height: 460px) {
  .cwg-claim { display: none; }
  .cwg-cabeza { padding-top: 8px; padding-bottom: 8px; }
  /* Sin la frase, el logo se queda solo encima de los locales: pequeño y pegado
     arriba, que el alto que hay es todo para las tarjetas. */
  .cwg-marca { margin: 4px 0 6px; }
  .cwg-marca img { height: clamp(35px, 12.65vh, 53px); }
}

/* Quien pide menos movimiento no quiere una versión suave: quiere que se pare.
   Se queda la disposición en rejilla, que es la legible sin animación. */
@media (prefers-reduced-motion: reduce) {
  .cwg-fondo img,
  .cwg-locales, .cwg-local, .cwg-logo-giro, .cwg-fila, .cwg-modal[open] { animation: none !important; }

  .cwg-pista .cwg-fila { position: static; display: grid; place-content: center; height: 100%; }
  .cwg-pista .cwg-locales {
    position: static; display: grid;
    grid-template-columns: repeat(auto-fit, minmax(var(--tam), 1fr));
    gap: clamp(14px, 3vmin, 40px);
    max-width: min(92vw, 1500px);
    justify-items: center;
    transform: none !important; rotate: none !important; translate: none !important;
  }
  .cwg-pista .cwg-local {
    position: relative; inset: auto; margin: 0; left: auto; top: auto; bottom: auto;
    transform: none !important; translate: none !important; scale: 1 !important;
  }
  .cwg-pista .cwg-fila:nth-child(n+2) { display: none; }   /* la copia del bucle */
}


/* ── El formulario de contacto ────────────────────────────────────────────
   Es todo lo que hay en esa nota del pie: se escribe y se manda. El teléfono
   del grupo no sale aquí — el número que sirve es el de cada local, y ése está
   en su ficha. */

.cwg-form { display: flex; flex-direction: column; gap: 12px; margin-top: 22px; }
.cwg-form-fila { display: flex; gap: 12px; flex-wrap: wrap; }
.cwg-form-fila > label { flex: 1 1 180px; }

.cwg-form label { display: block; }
.cwg-form label > span {
  display: block; margin-bottom: 5px;
  font-size: .78rem; font-weight: 700; letter-spacing: .06em; text-transform: uppercase;
  opacity: .7;
}
.cwg-form input, .cwg-form textarea {
  width: 100%; padding: .65em .8em;
  font: inherit; font-size: .95rem;
  color: inherit; background: rgba(255,255,255,.06);
  border: 1px solid rgba(255,255,255,.22); border-radius: 10px;
  transition: border-color .15s ease, background-color .15s ease;
}
.cwg-form input:focus, .cwg-form textarea:focus {
  outline: none;
  border-color: currentColor;
  background: rgba(255,255,255,.1);
}
.cwg-form textarea { resize: vertical; min-height: 96px; line-height: 1.5; }
.cwg-form button { align-self: flex-start; margin-top: 4px; }

.cwg-form-aviso { margin: 0; padding: .7em 1em; border-radius: 10px; font-size: .9rem; }
.cwg-form-aviso.es-bien { background: rgba(127,224,168,.16); border: 1px solid rgba(127,224,168,.4); }
.cwg-form-aviso.es-mal  { background: rgba(255,176,160,.16); border: 1px solid rgba(255,176,160,.4); }

/* El señuelo. Ni `display:none` ni `hidden`: hay robots que se saltan lo que
   está oculto de la forma evidente. Fuera de pantalla y sin tabulación. */
.cwg-trampa {
  position: absolute; left: -9999px; top: auto;
  width: 1px; height: 1px; overflow: hidden;
}