/* =========================================================================
   Sin Censura - Food & Fun — web pública
   "La mesa de juego nocturna" — fondo casi negro, acentos oro/terracota
   ========================================================================= */

:root {
  /* Fondos y superficies */
  --bg: #0F0E0C;
  --surface: #201D17;
  --surface-alta: #2A2620;
  --borde: #413C31;
  --borde-fuerte: #544E3F;

  /* Texto */
  --crema: #F5F0E8;
  --texto-secundario: #9C9484;

  /* Acentos de marca (web pública) */
  --oro: #D9A441;
  --oro-fuerte: #E8B85A;
  --naranja: #E8762C;
  --naranja-claro: #F2894A;
  --naranja-glow: rgba(232, 118, 44, 0.32);
  --terracota: var(--naranja);

  /* Semántico / microacentos */
  --salvia: #97B37C;
  --azul-dado: #7EC8E3;

  /* Radios */
  --radio-sm: 6px;
  --radio-md: 8px;
  --radio-lg: 10px;
  --radio-xl: 12px;
  --sombra-card: 0 12px 32px rgba(0, 0, 0, 0.38);

  /* Easing */
  --ease-out-quart: cubic-bezier(0.25, 1, 0.5, 1);
  --ease-out-quint: cubic-bezier(0.22, 1, 0.36, 1);

  /* Tipografía */
  --font-display: "Playfair Display", Georgia, serif;
  --font-body: "IBM Plex Sans", -apple-system, BlinkMacSystemFont, sans-serif;

  --container-max: 1100px;
}

/* ---------------------------------------------------------------------- */
/* Reset básico                                                            */
/* ---------------------------------------------------------------------- */
*, *::before, *::after { box-sizing: border-box; }
html { scroll-behavior: smooth; }
body {
  margin: 0;
  background-color: var(--bg);
  background-image:
    url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='160' height='160'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.9' numOctaves='2' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='160' height='160' filter='url(%23n)' opacity='0.035'/%3E%3C/svg%3E"),
    radial-gradient(1100px 700px at 50% -180px, rgba(232, 118, 44, 0.07), transparent 65%);
  background-repeat: repeat, no-repeat;
  color: var(--crema);
  font-family: var(--font-body);
  font-size: 16px;
  line-height: 1.6;
  -webkit-font-smoothing: antialiased;
}
img { max-width: 100%; display: block; }
a { color: inherit; text-decoration: none; }
ul, ol { margin: 0; padding: 0; list-style: none; }
h1, h2, h3, p { margin: 0; }

.container {
  max-width: var(--container-max);
  margin: 0 auto;
  padding: 0 20px;
}

/* Foco visible — accesibilidad AA */
a:focus-visible,
button:focus-visible,
.btn:focus-visible {
  outline: 2px solid var(--oro);
  outline-offset: 3px;
}

.skip-link {
  position: absolute;
  left: -9999px;
  top: 0;
  background: var(--oro);
  color: #201304;
  padding: 10px 16px;
  z-index: 1000;
  border-radius: 0 0 var(--radio-md) 0;
  font-weight: 600;
}
.skip-link:focus {
  left: 0;
}

/* ---------------------------------------------------------------------- */
/* Motion / reveal — mejora progresiva                                     */
/* .reveal por sí sola NO oculta nada: sin JS todo el contenido es         */
/* visible. El JS añade .reveal--pending justo antes de observar con       */
/* IntersectionObserver, y al entrar al viewport añade .is-visible.        */
/* ---------------------------------------------------------------------- */
.reveal {
  transition: opacity 0.7s var(--ease-out-quint), transform 0.7s var(--ease-out-quint);
}
.reveal--pending {
  opacity: 0;
  transform: translateY(20px);
}
/* Variante para fotos: entran con leve zoom y "asientan" al revelarse */
.reveal--foto.reveal--pending {
  transform: translateY(14px) scale(1.03);
}
.reveal--pending.is-visible {
  opacity: 1;
  transform: none;
}

@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after {
    animation-duration: 0.001ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.001ms !important;
    scroll-behavior: auto !important;
  }
}

/* ---------------------------------------------------------------------- */
/* Botones                                                                 */
/* ---------------------------------------------------------------------- */
.btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  min-height: 44px;
  padding: 12px 22px;
  border-radius: var(--radio-lg);
  font-family: var(--font-body);
  font-weight: 600;
  font-size: 14px;
  border: 1.5px solid transparent;
  cursor: pointer;
  transition: transform 0.18s var(--ease-out-quart), box-shadow 0.18s var(--ease-out-quart), background-color 0.18s ease, border-color 0.18s ease;
  white-space: nowrap;
}
.btn:active { transform: translateY(0) scale(0.97); }

.btn--primary {
  background: var(--naranja);
  color: #2A1305;
}
.btn--primary:hover {
  background: var(--naranja-claro);
  transform: translateY(-2px);
  box-shadow: 0 6px 20px var(--naranja-glow);
}
.btn--ghost {
  background: transparent;
  border-color: var(--naranja);
  color: var(--naranja-claro);
}
.btn--ghost:hover {
  background: rgba(232, 118, 44, 0.10);
  transform: translateY(-2px);
}
.btn--whatsapp {
  border-color: var(--salvia);
  color: var(--salvia);
}
.btn--whatsapp:hover {
  background: rgba(151, 179, 124, 0.10);
}
.btn--sm {
  min-height: 36px;
  padding: 8px 14px;
  font-size: 12.5px;
}

/* ---------------------------------------------------------------------- */
/* Nav                                                                     */
/* ---------------------------------------------------------------------- */
.nav {
  position: sticky;
  top: 0;
  z-index: 100;
  background: rgba(15, 14, 12, 0.88);
  backdrop-filter: blur(8px);
  border-bottom: 1px solid var(--borde);
}
.nav__inner {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
  row-gap: 6px;
  padding-top: 10px;
  padding-bottom: 10px;
}
.nav__brand { display: inline-flex; }

/* Placa circular crema tras el logo (tinta negra sobre transparente):
   sin ella el logo desaparece contra el fondo #0F0E0C */
.logo-placa {
  background: var(--crema);
  border: 1.5px solid rgba(217, 164, 65, 0.55);
  border-radius: 50%;
}
.nav__logo {
  width: 44px;
  height: 44px;
  padding: 3px;
}
.nav__links {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  order: 3;
  width: 100%;
  gap: 0 18px;
  font-family: var(--font-body);
  font-weight: 500;
  font-size: 13.5px;
  color: var(--texto-secundario);
}
.nav__links a { position: relative; padding: 10px 2px; }
.nav__links a:hover { color: var(--naranja-claro); }
/* Subrayado animado: crece desde la izquierda al pasar el cursor */
.nav__links a::after {
  content: "";
  position: absolute;
  left: 2px;
  right: 2px;
  bottom: 6px;
  height: 2px;
  border-radius: 1px;
  background: var(--naranja);
  transform: scaleX(0);
  transform-origin: left center;
  transition: transform 0.25s var(--ease-out-quart);
}
.nav__links a:hover::after,
.nav__links a[aria-current="page"]::after {
  transform: scaleX(1);
}
/* La Tienda destacada en la navegación: mismo estilo que el botón Reservar */
.nav__links .nav__tienda {
  background: var(--naranja);
  border-radius: var(--radio-lg);
  padding: 8px 14px;
  color: #2A1305;
  font-weight: 600;
  font-size: 12.5px;
  transition: background-color 0.18s ease, box-shadow 0.18s ease;
}
.nav__links .nav__tienda:hover { background: var(--naranja-claro); color: #2A1305; box-shadow: 0 4px 14px var(--naranja-glow); }
.nav__links .nav__tienda::after { display: none; }
.nav__links .nav__tienda[aria-current="page"] { box-shadow: 0 0 0 2px rgba(245, 240, 232, 0.4); }
.nav__cta { flex-shrink: 0; }

@media (min-width: 1024px) {
  .nav__links {
    order: 0;
    width: auto;
    justify-content: flex-start;
    gap: 24px;
  }
}

/* ---------------------------------------------------------------------- */
/* Eyebrow (marcador de sección con dado SVG)                              */
/* ---------------------------------------------------------------------- */
.eyebrow {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  font-family: var(--font-body);
  font-weight: 600;
  font-size: 11px;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: var(--oro);
  margin-bottom: 10px;
}
.dado {
  width: 18px;
  height: 18px;
  color: var(--oro);
  flex-shrink: 0;
}
.dado--azul { color: var(--azul-dado); }

/* ---------------------------------------------------------------------- */
/* Hero                                                                    */
/* ---------------------------------------------------------------------- */
.hero {
  position: relative;
  padding: 88px 0 72px;
  overflow: hidden;
  text-align: center;
}
.hero__glow {
  position: absolute;
  top: -220px;
  left: 50%;
  transform: translateX(-50%);
  width: 640px;
  height: 640px;
  background: radial-gradient(circle, rgba(232, 118, 44, 0.22) 0%, rgba(217, 164, 65, 0.10) 45%, transparent 70%);
  pointer-events: none;
  animation: respirar 9s ease-in-out infinite;
}
/* El glow respira lentamente, como brasa */
@keyframes respirar {
  0%, 100% { opacity: 1; transform: translateX(-50%) scale(1); }
  50% { opacity: 0.72; transform: translateX(-50%) scale(1.07); }
}
.hero__inner {
  position: relative;
  z-index: 1;
  display: flex;
  flex-direction: column;
  align-items: center;
}
.hero__logo {
  width: 128px;
  height: 128px;
  padding: 10px;
  margin-bottom: 24px;
}
.hero__headline {
  font-family: var(--font-display);
  font-style: italic;
  font-weight: 700;
  font-size: clamp(2.1rem, 6vw, 4rem);
  line-height: 1.08;
  color: var(--crema);
  max-width: 14ch;
}
.hero__sub {
  margin-top: 18px;
  font-size: 16px;
  color: var(--texto-secundario);
  max-width: 40ch;
}
.hero__ctas {
  margin-top: 32px;
  display: flex;
  flex-wrap: wrap;
  gap: 14px;
  justify-content: center;
}

/* Monedas flotantes */
.hero__coins {
  position: absolute;
  inset: 0;
  pointer-events: none;
}
.coin {
  position: absolute;
  border-radius: 50%;
  /* Cuerpo dorado con brillo superior-izquierdo y canto más oscuro */
  background:
    radial-gradient(circle at 32% 28%, rgba(255, 244, 214, 0.95) 0%, var(--oro-fuerte) 22%, var(--oro) 55%, #A8752A 100%);
  /* Canto oscuro (borde) + anillo interior de acuñado + leve profundidad */
  box-shadow:
    inset 0 0 0 2.5px #7A5620,
    inset 0 0 0 5px rgba(255, 235, 190, 0.35),
    0 2px 6px rgba(0, 0, 0, 0.45);
  opacity: 0.55;
  animation: flotar 6s ease-in-out infinite;
}
/* Destello interior: media luna de luz en la parte superior */
.coin::after {
  content: "";
  position: absolute;
  top: 14%;
  left: 18%;
  width: 45%;
  height: 26%;
  border-radius: 50%;
  background: rgba(255, 250, 235, 0.55);
  filter: blur(2px);
  transform: rotate(-18deg);
}
.coin--1 { top: 18%; left: 12%; width: 34px; height: 34px; animation-delay: 0s; }
.coin--2 { top: 30%; right: 14%; width: 24px; height: 24px; opacity: 0.45; animation-delay: 1.4s; }
.coin--3 { top: 62%; left: 20%; width: 18px; height: 18px; opacity: 0.35; animation-delay: 2.8s; }

@keyframes flotar {
  0%, 100% { transform: translateY(0) rotate(0deg); }
  50% { transform: translateY(-18px) rotate(12deg); }
}

/* Destellos: chispas de 4 puntas que titilan (hero y sección de Kumi) */
.destellos {
  position: absolute;
  inset: 0;
  pointer-events: none;
}
.destello {
  position: absolute;
  width: 10px;
  height: 10px;
  background: var(--oro-fuerte);
  clip-path: polygon(50% 0%, 62% 38%, 100% 50%, 62% 62%, 50% 100%, 38% 62%, 0% 50%, 38% 38%);
  opacity: 0;
  animation: titilar 4.5s ease-in-out infinite;
  animation-delay: var(--d, 0s);
}
@keyframes titilar {
  0%, 100% { opacity: 0; transform: scale(0.35) rotate(0deg); }
  10% { opacity: 0.9; transform: scale(1) rotate(18deg); }
  20% { opacity: 0; transform: scale(0.35) rotate(36deg); }
}

@media (min-width: 720px) {
  .hero { padding: 120px 0 96px; }
}

/* ---------------------------------------------------------------------- */
/* Secciones genéricas                                                     */
/* ---------------------------------------------------------------------- */
.section {
  padding: 64px 0;
}
.section--alt {
  background: linear-gradient(180deg, rgba(42, 38, 32, 0.88), rgba(32, 29, 23, 0.72));
  border-top: 1px solid rgba(217, 164, 65, 0.14);
  border-bottom: 1px solid rgba(217, 164, 65, 0.14);
}
/* Portada de página interior: glow cálido tras el encabezado */
.section--portada { position: relative; overflow: hidden; }
.section--portada::before {
  content: "";
  position: absolute;
  top: -260px;
  left: 50%;
  transform: translateX(-50%);
  width: 720px;
  height: 560px;
  background: radial-gradient(ellipse, rgba(232, 118, 44, 0.13) 0%, rgba(217, 164, 65, 0.06) 45%, transparent 70%);
  pointer-events: none;
}
.section--portada > .container { position: relative; }
.section__title {
  font-family: var(--font-display);
  font-weight: 700;
  font-size: clamp(1.9rem, 4.5vw, 3rem);
  color: var(--crema);
  margin-bottom: 16px;
}
.section__title--centrado {
  text-align: center;
}
.section__lead {
  color: var(--texto-secundario);
  max-width: 62ch;
  font-size: 16px;
  margin-bottom: 28px;
}
.section__destacado {
  font-family: var(--font-display);
  font-style: italic;
  font-weight: 700;
  font-size: clamp(1.15rem, 2.6vw, 1.5rem);
  color: var(--terracota);
  margin-bottom: 28px;
}
.section__nota {
  margin-top: 32px;
  font-size: 13.5px;
  color: var(--texto-secundario);
  text-align: center;
}

@media (min-width: 720px) {
  .section { padding: 88px 0; }
}

/* ---------------------------------------------------------------------- */
/* Presentación (restaurante + tienda a dos columnas, home)                */
/* ---------------------------------------------------------------------- */
.presentacion {
  display: grid;
  grid-template-columns: 1fr;
  gap: 48px;
  align-items: start;
}
.intro__statement {
  font-family: var(--font-display);
  font-weight: 700;
  font-size: clamp(28px, 3vw, 40px);
  line-height: 1.2;
  text-wrap: balance;
  color: var(--crema);
  margin-bottom: 16px;
}
.presentacion__col { position: relative; }
.presentacion__foto {
  border-radius: var(--radio-xl);
  border: 1px solid var(--borde);
  box-shadow: var(--sombra-card);
  aspect-ratio: 16 / 9;
  height: auto;
  object-fit: cover;
  width: 100%;
  margin-top: 10px;
  /* Por encima de las cartas que asoman detrás (columna tienda) */
  position: relative;
  z-index: 1;
}
.presentacion__foto--arriba {
  margin: 0 0 20px;
}
.presentacion__col .btn { margin-top: 14px; }

@media (min-width: 821px) {
  .presentacion {
    grid-template-columns: 1fr 1fr;
    gap: 56px;
  }
}

/* ---------------------------------------------------------------------- */
/* Media split (foto + texto a dos columnas — menú)                        */
/* ---------------------------------------------------------------------- */
.media-split {
  display: grid;
  grid-template-columns: 1fr;
  gap: 32px;
  align-items: center;
}
.media-split__foto {
  border-radius: var(--radio-xl);
  border: 1px solid var(--borde);
  box-shadow: var(--sombra-card);
  max-height: 240px;
  object-fit: cover;
  width: 100%;
}

@media (min-width: 821px) {
  .media-split {
    grid-template-columns: 0.85fr 1.15fr;
    gap: 48px;
  }
  .media-split__foto {
    max-height: 380px;
  }
}

/* ---------------------------------------------------------------------- */
/* Degustación (página menú): platos alternados foto + texto               */
/* ---------------------------------------------------------------------- */
.platos {
  display: grid;
  gap: 48px;
  margin: 52px 0 64px;
}
.plato {
  display: grid;
  grid-template-columns: 1fr;
  gap: 22px;
  align-items: center;
}
.plato__foto {
  border-radius: var(--radio-xl);
  border: 1px solid var(--borde);
  box-shadow: var(--sombra-card);
  width: 100%;
  height: 260px;
  object-fit: cover;
}
/* Fotos verticales con el plato abajo: encuadre bajo para que se vea */
.plato__foto--abajo { object-position: center 82%; }
.plato__nombre {
  font-family: var(--font-display);
  font-size: 27px;
  color: var(--crema);
  margin-bottom: 10px;
  text-wrap: balance;
}
.plato__desc {
  color: var(--texto-secundario);
  max-width: 58ch;
}
.plato__precio {
  font-family: var(--font-display);
  font-style: italic;
  font-size: 17px;
  color: var(--naranja-claro);
  margin-top: 12px;
}

@media (min-width: 821px) {
  .plato {
    grid-template-columns: 0.9fr 1.1fr;
    gap: 52px;
  }
  .plato__foto { height: 320px; }
  .plato--invertido .plato__foto { order: 2; }
}

.menu-doc__titulo {
  font-family: var(--font-display);
  font-size: 30px;
  color: var(--crema);
  margin-bottom: 10px;
}

/* ---------------------------------------------------------------------- */
/* Duo: ludoteca + "Juegas lo que comes" al mismo nivel                    */
/* ---------------------------------------------------------------------- */
.duo {
  display: grid;
  grid-template-columns: 1fr;
  gap: 40px;
  align-items: start;
}
.duo__titulo {
  font-family: var(--font-display);
  font-size: 24px;
  margin-bottom: 10px;
}
.duo__foto {
  border-radius: var(--radio-xl);
  border: 1px solid var(--borde);
  box-shadow: var(--sombra-card);
  height: 200px;
  object-fit: cover;
  width: 100%;
  margin: 18px 0;
}
.duo__col .btn { margin-top: 4px; }

@media (min-width: 821px) {
  .duo {
    grid-template-columns: 1fr 1fr;
    gap: 48px;
  }
}

/* Tablero "Juegas lo que comes": casillas que se encienden en secuencia */
.tablero { display: flex; flex-direction: column; }
.casilla {
  position: relative;
  display: grid;
  grid-template-columns: 44px 1fr auto;
  align-items: center;
  gap: 8px 14px;
  padding: 9px 0;
}
/* Conector punteado entre fichas, como camino de tablero */
.casilla::before {
  content: "";
  position: absolute;
  left: 21px;
  top: 53px;
  bottom: -9px;
  border-left: 2px dashed var(--borde-fuerte);
  transition: border-color 0.5s var(--ease-out-quart);
}
.casilla:last-child::before { display: none; }
.casilla__ficha {
  width: 44px;
  height: 44px;
  border-radius: var(--radio-lg);
  display: inline-flex;
  align-items: center;
  justify-content: center;
  background: var(--surface-alta);
  border: 1.5px solid var(--borde-fuerte);
  color: var(--texto-secundario);
  transition: background-color 0.5s var(--ease-out-quart), border-color 0.5s var(--ease-out-quart), box-shadow 0.5s var(--ease-out-quart), color 0.5s var(--ease-out-quart);
  transition-delay: calc(var(--i, 0) * 140ms);
}
.casilla__ficha svg { width: 26px; height: 26px; }
/* La ficha del token: el token de jugador real del local */
.casilla__ficha--token {
  border: none;
  background: none;
}
.casilla__ficha--token img {
  width: 44px;
  height: 44px;
  display: block;
  /* El PNG trae fondo blanco: la ficha es un círculo exacto, se recorta */
  clip-path: circle(49.6% at 50% 50%);
  filter: drop-shadow(0 2px 6px rgba(0, 0, 0, 0.45));
}
.casilla__rango { font-size: 14.5px; color: var(--crema); }
.casilla__premio { font-size: 14.5px; font-weight: 600; color: var(--oro); text-align: right; white-space: nowrap; }
.casilla--token .casilla__premio { color: var(--naranja-claro); }
/* Encendido progresivo: intensidad naranja creciente hacia el tier 4 */
.casilla--n1.is-encendida .casilla__ficha { border-color: rgba(232, 118, 44, 0.45); background: rgba(232, 118, 44, 0.10); color: var(--naranja-claro); }
.casilla--n2.is-encendida .casilla__ficha { border-color: rgba(232, 118, 44, 0.60); background: rgba(232, 118, 44, 0.16); color: var(--naranja-claro); box-shadow: 0 0 12px rgba(232, 118, 44, 0.15); }
.casilla--n3.is-encendida .casilla__ficha { border-color: rgba(232, 118, 44, 0.80); background: rgba(232, 118, 44, 0.24); color: var(--naranja-claro); box-shadow: 0 0 16px rgba(232, 118, 44, 0.22); }
.casilla--n4.is-encendida .casilla__ficha { border-color: var(--naranja); background: var(--naranja); color: #2A1305; box-shadow: 0 0 22px var(--naranja-glow); }
.casilla.is-encendida::before { border-color: rgba(232, 118, 44, 0.45); }
@media (max-width: 560px) {
  .casilla { grid-template-columns: 44px 1fr; }
  .casilla__premio { grid-column: 2; text-align: left; white-space: normal; }
}
.condiciones__nota {
  font-size: 13px;
  color: var(--texto-secundario);
  margin-top: 12px;
}
/* La extensión de tiempo, con voz propia (display itálica naranja) */
.condiciones__extension {
  font-family: var(--font-display);
  font-style: italic;
  font-size: 16px;
  color: var(--naranja-claro);
  margin-top: 8px;
}

/* Token de jugador girando (sección Cómo jugar): moneda 3D con dos caras */
#como-funciona {
  position: relative;
  overflow: hidden;
}
#como-funciona > .container { position: relative; }
.token-girando {
  position: absolute;
  top: 64px;
  right: 7%;
  width: 92px;
  height: 92px;
  perspective: 620px;
  pointer-events: none;
  animation: flotar 6s ease-in-out infinite;
}
.token-girando__disco {
  position: relative;
  width: 100%;
  height: 100%;
  transform-style: preserve-3d;
  animation: girar 8s cubic-bezier(0.45, 0, 0.2, 1) infinite;
}
.token-girando__cara {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  backface-visibility: hidden;
  /* El PNG trae fondo blanco: la ficha es un círculo exacto, se recorta */
  clip-path: circle(49.6% at 50% 50%);
  filter: drop-shadow(0 6px 14px rgba(0, 0, 0, 0.4));
}
.token-girando__cara--reverso { transform: rotateY(180deg); }
/* Gira media vuelta, se detiene a mostrar la cara, y completa la vuelta */
@keyframes girar {
  0%, 30% { transform: rotateY(0deg); }
  50%, 80% { transform: rotateY(180deg); }
  100% { transform: rotateY(360deg); }
}
@media (max-width: 719px) {
  .token-girando { display: none; }
}

/* ---------------------------------------------------------------------- */
/* Tienda Mesa Libre (columna en la presentación, home)                    */
/* ---------------------------------------------------------------------- */
.btn--grande {
  padding: 15px 30px;
  font-size: 16px;
  margin-top: 18px;
}

/* ---------------------------------------------------------------------- */
/* Mascota + globo de diálogo (tienda)                                     */
/* ---------------------------------------------------------------------- */
.mascota-dialogo {
  display: flex;
  align-items: center;
  gap: 22px;
  margin: 10px 0 32px;
}
/* Medallón de Kumi: recorte transparente sobre un resplandor cálido */
.mascota-dialogo__img {
  width: 132px;
  height: 132px;
  border-radius: 50%;
  flex-shrink: 0;
  object-fit: contain;
  padding: 12px 12px 6px;
  background: radial-gradient(circle at 50% 34%, rgba(232, 118, 44, 0.30), rgba(26, 21, 15, 0.95) 72%);
  border: 1px solid var(--borde-fuerte);
  box-shadow: var(--sombra-card), 0 0 22px rgba(232, 118, 44, 0.16), inset 0 0 26px rgba(0, 0, 0, 0.4);
}
.globo {
  position: relative;
  background: linear-gradient(180deg, var(--surface-alta), var(--surface));
  border: 1px solid var(--borde-fuerte);
  border-radius: var(--radio-xl);
  padding: 18px 24px;
  max-width: 50ch;
  box-shadow: var(--sombra-card);
}
.globo::before {
  content: "";
  position: absolute;
  left: -8px;
  top: 50%;
  margin-top: -7px;
  width: 14px;
  height: 14px;
  background: var(--surface-alta);
  border-left: 1px solid var(--borde-fuerte);
  border-bottom: 1px solid var(--borde-fuerte);
  transform: rotate(45deg);
}
.globo p {
  font-family: var(--font-display);
  font-style: italic;
  font-size: 17px;
  line-height: 1.5;
  color: var(--crema);
}

.banner-muestra {
  background: var(--surface-alta);
  border: 1px dashed var(--borde-fuerte);
  border-radius: var(--radio-md);
  padding: 12px 16px;
  font-size: 13.5px;
  color: var(--texto-secundario);
  margin-bottom: 28px;
}

/* ---------------------------------------------------------------------- */
/* Grid de tienda / juego cards                                            */
/* ---------------------------------------------------------------------- */
.tienda-grid {
  display: grid;
  grid-template-columns: 1fr;
  gap: 18px;
}
@media (min-width: 560px) {
  .tienda-grid { grid-template-columns: repeat(2, 1fr); }
}
@media (min-width: 1024px) {
  .tienda-grid { grid-template-columns: repeat(3, 1fr); }
}

.juego-card {
  background: var(--surface);
  border: 1px solid var(--borde);
  border-radius: var(--radio-xl);
  box-shadow: var(--sombra-card);
  overflow: hidden;
  display: flex;
  flex-direction: column;
  transition: border-color 0.15s ease, box-shadow 0.15s ease;
}
.juego-card:hover {
  border-color: var(--naranja);
  box-shadow: 0 16px 40px rgba(0, 0, 0, 0.45), 0 0 24px var(--naranja-glow);
}

.juego-card__foto {
  aspect-ratio: 4 / 3;
  background: linear-gradient(135deg, var(--surface-alta), var(--surface));
  display: flex;
  align-items: center;
  justify-content: center;
  font-family: var(--font-display);
  font-weight: 700;
  font-size: 2.6rem;
  color: var(--oro);
  border-bottom: 1px solid var(--borde);
}

.juego-card__cuerpo {
  padding: 16px 18px 18px;
  display: flex;
  flex-direction: column;
  gap: 6px;
  flex-grow: 1;
}
.juego-card__nombre {
  font-family: var(--font-display);
  font-weight: 700;
  font-size: 1.15rem;
  color: var(--crema);
}
.juego-card__categoria {
  font-size: 11px;
  font-weight: 600;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: var(--azul-dado);
}
.juego-card__ideal {
  font-size: 13.5px;
  color: var(--texto-secundario);
  margin-bottom: 8px;
  flex-grow: 1;
}
.juego-card__acciones {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  margin-top: auto;
}

/* ---------------------------------------------------------------------- */
/* Visítanos                                                               */
/* ---------------------------------------------------------------------- */
.visitanos__grid {
  display: grid;
  grid-template-columns: 1fr;
  gap: 24px;
}
.visitanos__info {
  display: flex;
  flex-direction: column;
  gap: 14px;
  align-items: flex-start;
}
.visitanos__info p { font-size: 15px; }
.visitanos__mapa iframe {
  border: 1px solid var(--borde);
  border-radius: var(--radio-lg);
  display: block;
}

@media (min-width: 1024px) {
  .visitanos__grid {
    grid-template-columns: 1fr 1.2fr;
    align-items: center;
  }
}

/* ---------------------------------------------------------------------- */
/* Footer                                                                  */
/* ---------------------------------------------------------------------- */
.footer {
  padding: 48px 0;
  text-align: center;
  border-top: 1px solid var(--borde);
}
.footer__inner {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 10px;
}
.footer__logo {
  width: 52px;
  height: 52px;
  padding: 4px;
  margin-bottom: 4px;
}
.footer__marca {
  font-family: var(--font-display);
  font-weight: 700;
  font-size: 1.05rem;
  color: var(--crema);
}
.footer__links {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: 16px;
  font-size: 13.5px;
  color: var(--texto-secundario);
  margin-top: 6px;
}
.footer__links a { transition: color 0.18s ease; }
.footer__links a:hover { color: var(--naranja-claro); }
.footer__nota {
  font-size: 12.5px;
  color: var(--texto-secundario);
  margin-top: 10px;
}

/* ---------------------------------------------------------------------- */
/* Multipágina: nav activo, teasers, eventos, horario, galería, PDF menú   */
/* ---------------------------------------------------------------------- */
.nav__links a[aria-current="page"] { color: var(--naranja); }

.paginas-duo {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 24px;
}
.teaser-card {
  display: flex;
  flex-direction: column;
  background: var(--surface);
  border: 1px solid var(--borde);
  border-radius: var(--radio-xl);
  box-shadow: var(--sombra-card);
  overflow: hidden;
  transition: border-color 0.25s ease, transform 0.25s ease, box-shadow 0.25s ease;
}
.teaser-card:hover {
  border-color: var(--naranja);
  transform: translateY(-5px) rotate(-0.4deg);
  box-shadow: 0 16px 40px rgba(0, 0, 0, 0.45), 0 0 24px var(--naranja-glow);
}
.teaser-card__foto { width: 100%; height: 190px; object-fit: cover; }
.teaser-card__cuerpo {
  padding: 20px 22px 24px;
  display: flex;
  flex-direction: column;
  gap: 10px;
  flex: 1;
}
.teaser-card__cuerpo p { color: var(--texto-secundario); font-size: 14px; flex: 1; }
.teaser-card__titulo { font-family: var(--font-display); font-size: 22px; }
.teaser-card .btn { align-self: flex-start; }

.horario__lista { margin: 12px 0; display: grid; gap: 6px; max-width: 420px; }
.horario__lista li {
  display: flex;
  justify-content: space-between;
  gap: 16px;
  font-size: 15px;
  border-bottom: 1px dashed var(--borde);
  padding-bottom: 6px;
}
.horario__nota { color: var(--texto-secundario); font-size: 13px; margin-bottom: 4px; }
.horario__nota:last-of-type { margin-bottom: 16px; }
.visitanos__info .btn { margin-right: 10px; margin-bottom: 10px; }

.galeria {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 16px;
  margin-top: 36px;
}
.galeria img {
  width: 100%;
  height: 220px;
  object-fit: cover;
  border-radius: var(--radio-xl);
  border: 1px solid var(--borde);
  box-shadow: var(--sombra-card);
  /* opacity va aparte: esta transition pisa la de .reveal (mayor especificidad)
     y sin ella las fotos con .reveal--foto aparecerían sin fundido */
  transition: transform 0.3s var(--ease-out-quart), box-shadow 0.3s var(--ease-out-quart), opacity 0.7s var(--ease-out-quint);
}
.galeria img:hover {
  transform: translateY(-4px);
  box-shadow: 0 16px 40px rgba(0, 0, 0, 0.5);
}
/* Mosaico: la primera foto manda, el resto acompaña */
.galeria--mosaico { grid-auto-rows: 220px; }
.galeria--mosaico img { height: 100%; }
.galeria--mosaico img:first-child { grid-row: span 2; }

.menu-pdf { margin-top: 32px; }
.menu-pdf iframe {
  width: 100%;
  height: 75vh;
  min-height: 480px;
  border: 1px solid var(--borde);
  border-radius: var(--radio-xl);
  background: #fff;
}

@media (max-width: 820px) {
  .paginas-duo { grid-template-columns: 1fr; }
  .galeria { grid-template-columns: repeat(2, 1fr); }
  .galeria img { height: 150px; }
  .galeria--mosaico { grid-auto-rows: 150px; }
  /* height 100% re-declarado: la regla de 150px de arriba ganaría por orden */
  .galeria--mosaico img { height: 100%; }
  .galeria--mosaico img:first-child { grid-row: span 2; }
}

/* Página /eventos/ — lista de torneos y noches temáticas */
.eventos-lista { display: grid; gap: 18px; margin-top: 36px; max-width: 980px; }
/* Filas de evento con afiche: texto y foto lado a lado */
.evento--media { display: grid; grid-template-columns: 1fr; gap: 20px; align-items: center; }
.evento__foto {
  width: 100%;
  max-height: 320px;
  object-fit: cover;
  border-radius: var(--radio-lg);
  border: 1px solid var(--borde);
}
@media (min-width: 721px) {
  .evento--media { grid-template-columns: 1.1fr 0.9fr; gap: 30px; }
  .evento--foto-izq { grid-template-columns: 0.9fr 1.1fr; }
  .evento--foto-izq .evento__foto { order: -1; }
}
.evento {
  background: var(--surface);
  border: 1px solid var(--borde);
  border-radius: var(--radio-xl);
  box-shadow: var(--sombra-card);
  padding: 24px 26px;
  transition: border-color 0.25s var(--ease-out-quart), transform 0.25s var(--ease-out-quart), box-shadow 0.25s var(--ease-out-quart);
}
.evento:hover {
  border-color: rgba(232, 118, 44, 0.5);
  transform: translateY(-3px);
  box-shadow: 0 16px 40px rgba(0, 0, 0, 0.45), 0 0 18px rgba(232, 118, 44, 0.14);
}
/* El evento firma de la casa */
.evento--firma { border-color: rgba(232, 118, 44, 0.55); background: linear-gradient(180deg, rgba(232, 118, 44, 0.08), var(--surface)); }
.evento--firma .evento__nombre { color: var(--naranja-claro); }
.evento__nombre { font-family: var(--font-display); font-size: 22px; color: var(--crema); margin-bottom: 6px; }
.evento__desc { color: var(--texto-secundario); font-size: 15px; max-width: 62ch; }
.eventos-cta { display: flex; flex-wrap: wrap; gap: 12px; margin-top: 32px; }

/* Página /nosotros/ — historia de los hermanos y contacto */
.nosotros__grid { display: grid; grid-template-columns: 1.15fr 0.85fr; gap: 48px; align-items: center; }
.nosotros__grid .section__lead + .section__lead { margin-top: 14px; }
.nosotros__grid p + p { margin-top: 14px; }
/* Segunda fila de la historia: foto a la izquierda, proporciones espejadas */
.nosotros__grid--foto-izq { grid-template-columns: 0.85fr 1.15fr; margin-top: 56px; }
.nosotros__foto { width: 100%; max-height: 420px; object-fit: cover; object-position: center 18%; border-radius: var(--radio-xl); border: 1px solid var(--borde); box-shadow: var(--sombra-card); }
.nosotros__contacto { max-width: 560px; }
.contacto-lista { margin: 14px 0 22px; display: grid; gap: 8px; }
.contacto-lista li { display: flex; justify-content: space-between; gap: 16px; font-size: 14.5px; border-bottom: 1px dashed var(--borde); padding-bottom: 8px; }
.contacto-lista li span { color: var(--texto-secundario); }
.contacto-lista li a { color: var(--naranja-claro); transition: color 0.18s ease; }
.contacto-lista li a:hover { color: var(--crema); }
@media (max-width: 820px) {
  .nosotros__grid { grid-template-columns: 1fr; }
  .nosotros__foto { max-height: 280px; }
  .contacto-lista li { flex-direction: column; gap: 2px; }
}

/* Página /nosotros/ — Conoce a Kumi */
#kumi .coin { opacity: 0.3; }
.kumi__grid { display: grid; grid-template-columns: 1fr; gap: 40px; align-items: start; }
/* height:auto anula el atributo height del img (sin él la ilustración se estira) */
.kumi__img { width: 100%; height: auto; max-width: 400px; justify-self: center; border-radius: var(--radio-xl); border: 1px solid var(--borde); box-shadow: var(--sombra-card); animation: levitar 7s ease-in-out 1.6s infinite; }
/* Levitación de mago: sutil, sin rotación */
@keyframes levitar {
  0%, 100% { transform: translateY(0); }
  50% { transform: translateY(-9px); }
}
.kumi__texto p { color: var(--texto-secundario); font-size: 15px; max-width: 62ch; }
.kumi__texto p + p { margin-top: 14px; }
.kumi__texto .section__lead { color: var(--crema); margin-bottom: 0; }
.kumi__texto .section__destacado { margin: 24px 0 0; }
@media (min-width: 821px) {
  .kumi__grid { grid-template-columns: 0.8fr 1.2fr; gap: 56px; }
  .kumi__img { position: sticky; top: 96px; justify-self: start; }
}

/* ======================================================================== */
/* Hero temático: dados 3D que aparecen y se desvanecen, cartas en la       */
/* tienda de la intro, y alas de ángel al hacer clic en el logo.            */
/* ======================================================================== */

/* --- Dados 3D flotantes --- */
.hero__dados { position: absolute; inset: 0; pointer-events: none; }
.dado-flotante {
  position: absolute;
  /* flota (transform) y a la vez aparece y se desvanece (opacity) */
  animation: flotar 7s ease-in-out infinite, presencia 16s ease-in-out infinite;
}
.dado-flotante--1 { top: 24%; right: 19%; --op-max: 0.9; }
.dado-flotante--2 { top: 55%; left: 14%; --op-max: 0.68; animation-delay: 2.4s, -8s; }
/* Los dos dados alternan su presencia: uno entra mientras el otro se va */
@keyframes presencia {
  0%, 100% { opacity: 0; }
  20%, 72% { opacity: var(--op-max, 1); }
}
/* La perspectiva vive sola en esta capa. OJO: opacity < 1 o filter sobre
   .dado-escena o .dado-3d fuerzan transform-style:flat (spec CSS) y el
   cubo se proyecta plano — cualquier fade va en el wrapper de arriba. */
.dado-escena { perspective: 600px; }
.dado-3d {
  width: 38px;
  height: 38px;
  transform-style: preserve-3d;
  animation: rodar 18s linear infinite;
}
@keyframes rodar {
  from { transform: rotate3d(1, 0.75, 0.4, 0deg); }
  to { transform: rotate3d(1, 0.75, 0.4, 360deg); }
}
.dado-3d__cara {
  position: absolute;
  inset: 0;
  border-radius: 8px;
  border: 1px solid var(--dado-borde, rgba(122, 86, 32, 0.85));
  background: linear-gradient(145deg, var(--dado-c1, #EEC26B) 0%, var(--dado-c2, #D9A441) 48%, var(--dado-c3, #AF7D2D) 100%);
  box-shadow: inset 0 1px 2px rgba(255, 255, 255, 0.42), inset 0 -2px 4px rgba(0, 0, 0, 0.26);
  display: flex;
  align-items: center;
  justify-content: center;
}
.dado-3d__cara svg { width: 66%; height: 66%; color: var(--dado-pip, #241705); }
.dado-3d__cara--frente { transform: translateZ(19px); }
.dado-3d__cara--atras { transform: rotateY(180deg) translateZ(19px); }
.dado-3d__cara--der { transform: rotateY(90deg) translateZ(19px); }
.dado-3d__cara--izq { transform: rotateY(-90deg) translateZ(19px); }
.dado-3d__cara--arriba { transform: rotateX(90deg) translateZ(19px); }
.dado-3d__cara--abajo { transform: rotateX(-90deg) translateZ(19px); }
/* El dado pequeño es azul (como los dados del logo) y gira al revés */
.dado-flotante--2 .dado-3d {
  width: 26px;
  height: 26px;
  animation-duration: 26s;
  animation-direction: reverse;
  --dado-c1: #A9DDF0;
  --dado-c2: #7EC8E3;
  --dado-c3: #5795B1;
  --dado-borde: rgba(45, 94, 117, 0.85);
  --dado-pip: #102E3C;
}
.dado-flotante--2 .dado-3d__cara { border-radius: 6px; }
.dado-flotante--2 .dado-3d__cara--frente { transform: translateZ(13px); }
.dado-flotante--2 .dado-3d__cara--atras { transform: rotateY(180deg) translateZ(13px); }
.dado-flotante--2 .dado-3d__cara--der { transform: rotateY(90deg) translateZ(13px); }
.dado-flotante--2 .dado-3d__cara--izq { transform: rotateY(-90deg) translateZ(13px); }
.dado-flotante--2 .dado-3d__cara--arriba { transform: rotateX(90deg) translateZ(13px); }
.dado-flotante--2 .dado-3d__cara--abajo { transform: rotateX(-90deg) translateZ(13px); }

/* Dado de página: uno por página interior, en el flujo del contenido,
   centrado justo antes del título; flota y gira, cada página su color */
.dado-pagina {
  width: 38px;
  height: 46px; /* aire para el vaivén del flotar */
  margin: 0 auto 14px;
  pointer-events: none;
  animation: flotar 7s ease-in-out infinite;
}
.dado-pagina--naranja .dado-3d { --dado-c1: #F2A46B; --dado-c2: #E8762C; --dado-c3: #B4571E; --dado-borde: rgba(122, 50, 15, 0.85); --dado-pip: #2A1305; }
.dado-pagina--azul .dado-3d { --dado-c1: #A9DDF0; --dado-c2: #7EC8E3; --dado-c3: #5795B1; --dado-borde: rgba(45, 94, 117, 0.85); --dado-pip: #102E3C; }
.dado-pagina--salvia .dado-3d { --dado-c1: #B9CB9E; --dado-c2: #97B37C; --dado-c3: #6D8756; --dado-borde: rgba(62, 82, 44, 0.85); --dado-pip: #1E2A14; }
.dado-pagina--crema .dado-3d { --dado-c1: #FFFDF6; --dado-c2: #F5F0E8; --dado-c3: #CFC5B2; --dado-borde: rgba(122, 108, 84, 0.7); --dado-pip: #201304; }
/* Monedas del hero: pequeñas y discretas para no competir con los dados
   (los tamaños base de .coin--N siguen intactos para la sección de Kumi) */
.hero .coin--1 { top: 20%; left: 16%; width: 18px; height: 18px; opacity: 0.35; }
.hero .coin--2 { top: 72%; right: 18%; width: 14px; height: 14px; opacity: 0.3; }

/* --- Cartas junto al botón de la tienda (intro, columna derecha) --- */
.tienda__cartas {
  position: absolute;
  /* La base de las cartas coincide con la línea inferior del botón */
  bottom: 0;
  right: 6px;
  pointer-events: none;
  z-index: 0;
}
@media (max-width: 560px) {
  /* En pantallas muy angostas el botón ocupa el ancho: las cartas estorban */
  .tienda__cartas { display: none; }
}
.carta {
  position: absolute;
  bottom: 0;
  width: 58px;
  height: 82px;
  border-radius: 7px;
  background: linear-gradient(160deg, var(--surface-alta), var(--surface));
  border: 1px solid rgba(217, 164, 65, 0.5);
  box-shadow: 0 8px 20px rgba(0, 0, 0, 0.45), inset 0 0 0 3px rgba(217, 164, 65, 0.12);
  display: flex;
  align-items: center;
  justify-content: center;
}
.carta svg { width: 24px; height: 24px; color: rgba(217, 164, 65, 0.45); }
.carta--1 { right: 40px; transform: rotate(-10deg); }
.carta--2 { right: 0; transform: rotate(8deg); }
/* Se reparten junto al botón cuando la columna se revela: salen apiladas
   y se abren en abanico, suave y sin rebote */
#tienda.is-visible .carta--1 { animation: repartir 1.15s var(--ease-out-quint) 0.55s backwards; }
#tienda.is-visible .carta--2 { animation: repartir 1.15s var(--ease-out-quint) 0.75s backwards; }
@keyframes repartir {
  from { transform: translateY(26px) rotate(0deg) scale(0.94); opacity: 0; }
}

/* Entrada editorial de las dos fotos de presentación: se descubren y asientan */
#intro .is-visible .presentacion__foto {
  animation: foto-descubrir 1.1s var(--ease-out-quint) 0.18s backwards;
}
@keyframes foto-descubrir {
  from { clip-path: inset(10% 8% 10% 8% round var(--radio-xl)); transform: scale(1.05); opacity: 0; }
  to { clip-path: inset(0 0 0 0 round var(--radio-xl)); transform: scale(1); opacity: 1; }
}

/* --- Easter egg del logo: 1er clic alas de ángel, 2º clic Kumi se asoma --- */
.hero__logo { position: relative; z-index: 1; cursor: pointer; }
.alas {
  position: absolute;
  /* Anclado un poco por encima del centro del logo dentro de hero__inner */
  top: 56px;
  left: 50%;
  z-index: 0;
  pointer-events: none;
  animation: alas-vida 4.2s ease-in-out both;
}
@keyframes alas-vida {
  0% { opacity: 0; }
  12%, 80% { opacity: 1; }
  100% { opacity: 0; }
}
.ala { position: absolute; top: -46px; width: 150px; height: 92px; }
.ala--der { left: 30px; }
/* El ala izquierda es el espejo estático; el batiente interior anima igual */
.ala--izq { right: 30px; transform: scaleX(-1); }
.ala__batiente {
  display: block;
  width: 100%;
  height: 100%;
  color: rgba(245, 240, 232, 0.34);
  filter: drop-shadow(0 0 12px rgba(217, 164, 65, 0.55));
  /* El ala nace del borde del logo y se despliega hacia afuera */
  transform-origin: left center;
  animation: ala-salir 1s var(--ease-out-quart) both, ala-batir 1.9s ease-in-out 1s infinite;
}
.ala__batiente svg { display: block; width: 100%; height: 100%; fill: currentColor; }
@keyframes ala-salir {
  from { transform: rotate(26deg) scaleX(0.1); opacity: 0; }
  to { transform: rotate(0deg) scaleX(1); opacity: 1; }
}
@keyframes ala-batir {
  0%, 100% { transform: rotate(0deg) translateY(0); }
  50% { transform: rotate(-9deg) translateY(-4px); }
}
/* Brillos que acompañan a las alas (una sola vez por clic) */
.alas .destello { animation: destello-alas 2.4s ease-in-out var(--d, 0s) both; }
@keyframes destello-alas {
  0%, 100% { opacity: 0; transform: scale(0.3) rotate(0deg); }
  40% { opacity: 1; transform: scale(1.1) rotate(24deg); }
}
/* Kumi se asoma saludando desde el borde izquierdo del hero */
.mascota-asoma {
  position: absolute;
  left: 0;
  bottom: -44px;
  z-index: 2;
  pointer-events: none;
  animation: asomarse 4.4s ease-in-out both;
}
.mascota-asoma img {
  display: block;
  width: 235px;
  height: auto;
  /* Contorno brillante: el drop-shadow abraza la silueta del PNG recortado */
  filter: drop-shadow(0 0 3px rgba(217, 164, 65, 0.75)) drop-shadow(0 0 18px rgba(232, 118, 44, 0.45));
}
/* Entra desde la izquierda, se mece como saludando y se retira */
@keyframes asomarse {
  0% { transform: translate(-108%, 24%) rotate(-6deg); }
  24% { transform: translate(-12%, 4%) rotate(7deg); }
  38% { transform: translate(-12%, 4%) rotate(11deg); }
  52% { transform: translate(-12%, 4%) rotate(4deg); }
  66% { transform: translate(-12%, 4%) rotate(9deg); }
  80% { transform: translate(-12%, 4%) rotate(6deg); }
  100% { transform: translate(-108%, 24%) rotate(-6deg); }
}

/* Tercer clic: pirámide de fichas del local (3+2+1) que se apila sola en el
   lado derecho, tambalea y se desploma entre destellos. Fichas = tokens
   reales del negocio; cada una asienta con una rotación leve (--rot) para
   que la pila no se vea perfecta, como una torre apilada a mano. */
.torre-fichas {
  position: absolute;
  right: 4%;
  bottom: 40px;
  z-index: 2;
  pointer-events: none;
}
.torre-fichas__pila {
  position: relative;
  display: block;
  width: 220px;
  height: 200px;
  transform-origin: 50% 100%;
  animation: torre-tambalear 1.15s ease-in-out 2.2s both;
}
.ficha-torre {
  position: absolute;
  display: block;
  width: 72px;
  height: 72px;
  animation: ficha-apilar 0.55s var(--ease-out-quart) both;
}
.ficha-torre__vuelo {
  display: block;
  filter: drop-shadow(0 5px 10px rgba(0, 0, 0, 0.55));
  animation: ficha-volar 0.75s ease-in both;
}
.ficha-torre img {
  display: block;
  width: 72px;
  height: 72px;
  /* El PNG trae fondo blanco: la ficha es un círculo exacto, se recorta */
  clip-path: circle(49.6% at 50% 50%);
}
@keyframes ficha-apilar {
  0% { transform: translateY(-190px) rotate(0deg); opacity: 0; }
  55% { opacity: 1; }
  78% { transform: translateY(7px) rotate(var(--rot, 0deg)); }
  100% { transform: translateY(0) rotate(var(--rot, 0deg)); opacity: 1; }
}
@keyframes torre-tambalear {
  0%, 100% { transform: rotate(0deg); }
  25% { transform: rotate(2.6deg); }
  55% { transform: rotate(-3.4deg); }
  80% { transform: rotate(2deg); }
}
@keyframes ficha-volar {
  0% { transform: translate(0, 0) rotate(0deg); opacity: 1; }
  100% { transform: translate(var(--vx, 70px), var(--vy, 60px)) rotate(var(--vr, 140deg)); opacity: 0; }
}
@media (max-width: 640px) {
  .torre-fichas { transform: scale(0.68); transform-origin: 100% 100%; }
}