/* ═══════════════════════════════════════════════════════════════
   vi-fx.css — Efectos visuales Villa Indómita (agosto 2026)

   Aplica sin tocar el HTML de las páginas, apuntando a las clases
   que ya existen en todas las landings/juegos/home:

   1) Sombra difuminada en textos sobre imagen de fondo del hero
      (mejora legibilidad, sobre todo cuando la foto es clara).
      → .hero-title, .hero-desc, .hero-sub, .hero-quote, .hero-tag,
        .hero-label, .breadcrumb

   2) Barrido dorado suave que recorre el H1 del hero cada 6 s.
      → .hero-title (usa background-clip:text + drop-shadow para que
        la sombra sobreviva al efecto).

   3) Bordes redondeados sutiles (8px) en botones y tarjetas.
      → .btn-primary, .btn-ghost, .btn-secondary, .nav-cta

   4) Barrido dorado que recorre el CTA "Reservar" cada 6 s.
      → Solo los .btn-primary cuyo href apunta al form de reservas.

   Todo respeta prefers-reduced-motion (bloque al final).
   ═══════════════════════════════════════════════════════════════ */


/* ── 1) SOMBRA para textos sobre imagen ───────────────────────── */
/* Nota:
   - home: `hero-title-block`, `hero-subtitle`
   - páginas de juego: `hero-title`, `hero-desc`/`hero-sub`, `hero-tag`
   - /juegos/: `page-title`, `page-sub`, `page-label`
   Cubrimos las tres nomenclaturas. */
.hero-desc,
.hero-sub,
.hero-subtitle,
.hero-quote,
.hero-tag,
.hero-label,
.page-sub,
.page-label,
.breadcrumb {
  text-shadow: 0 2px 8px rgba(0, 0, 0, 0.75), 0 1px 2px rgba(0, 0, 0, 0.9);
}
/* El H1 grande de /juegos ('NUESTRAS SALAS') recibe la misma sombra
   fuerte que .hero-title, para que destaque sobre el bg-slide animado. */
.page-title {
  text-shadow: 0 2px 10px rgba(0, 0, 0, 0.85), 0 1px 3px rgba(0, 0, 0, 0.95), 0 0 40px rgba(0, 0, 0, 0.4);
}


/* ── 2) TÍTULO H1: solo sombra difuminada, sin efectos ─────────
   Aplica a `.hero-title` (páginas de juego + landings) y a
   `.hero-title-block` (home).
   Deshacemos con !important cualquier resto de:
     · versiones cacheadas (background-clip + color:transparent)
     · position:relative con ::after de z-index:-1 que empujaba el
       H1 detrás de la imagen del hero en algunas plantillas.
     · opacity:0 inicial de animaciones fadeSlideUp que dejaban el
       H1 invisible si la animación no completaba. */
.hero-title,
.hero-title-block {
  color: #f0ece4 !important;
  -webkit-text-fill-color: #f0ece4 !important;
  background: none !important;
  -webkit-background-clip: initial !important;
          background-clip: initial !important;
  opacity: 1 !important;
  text-shadow: 0 2px 10px rgba(0, 0, 0, 0.85), 0 1px 3px rgba(0, 0, 0, 0.95), 0 0 40px rgba(0, 0, 0, 0.4);
}
.hero-title::after,
.hero-title::before,
.hero-title-block::after,
.hero-title-block::before {
  content: none !important;
}
/* Los <span> internos del H1 mantienen SU color acento (rojo/dorado en el home). */
.hero-title-block .line2 {
  color: var(--c-accent) !important;
  -webkit-text-fill-color: var(--c-accent) !important;
}
.hero-title-block .line2.line-gold {
  color: rgb(200, 169, 110) !important;
  -webkit-text-fill-color: rgb(200, 169, 110) !important;
}

/* [2026-08-04] Reflejo Chernobyl retirado: la animación no se veía
   en el navegador del usuario ni con background-clip:text ni con
   pseudo + mix-blend-mode. Chernobyl se queda igual que el resto
   (solo la sombra del bloque 2, sin efecto). */


/* ── 3) BORDES REDONDEADOS sutiles en botones y tarjetas ──────── */
.btn-primary,
.btn-ghost,
.btn-secondary,
.nav-cta,
.room-card,
.sala-card,
.other-room-card {
  border-radius: 8px !important;
}
/* Las imágenes dentro de los cards también se redondean por arriba
   para que no sobresalgan del border-radius del contenedor. Sin esto
   la esquina superior de la foto queda cuadrada dentro del card
   redondeado y se ve mal. Cubrimos también las envueltas en <picture>
   (usado en /juegos/ para servir srcset + WebP). */
.room-card > img:first-child,
.room-card .room-card-img-alt,
.room-card picture img,
.sala-card > img:first-child,
.other-room-card > img:first-child {
  border-top-left-radius: 8px;
  border-top-right-radius: 8px;
}


/* ── 4) CTA "Reservar" con barrido dorado cada 6s ─────────────── */
/* Solo aplica a los btn-primary que apuntan al form de reservas o
   a anclas #reserva. Usa un pseudo-elemento con gradient dorado
   traslapado; el brillo cruza el botón con easing y descansa. */
a.btn-primary[href*="reservas"],
a.btn-primary[href*="#reserva"],
a.btn-primary[href*="Reservar"],
.btn-primary.vi-shimmer-btn {
  position: relative;
  overflow: hidden;
  isolation: isolate;
}
a.btn-primary[href*="reservas"]::after,
a.btn-primary[href*="#reserva"]::after,
a.btn-primary[href*="Reservar"]::after,
.btn-primary.vi-shimmer-btn::after {
  content: '';
  position: absolute;
  inset: 0;
  background: linear-gradient(
    115deg,
    transparent 25%,
    rgba(255, 227, 163, 0.35) 45%,
    rgba(255, 247, 220, 0.55) 50%,
    rgba(255, 227, 163, 0.35) 55%,
    transparent 75%
  );
  transform: translateX(-120%);
  animation: vi-btn-shimmer 6s ease-in-out infinite;
  pointer-events: none;
  z-index: 1;
  mix-blend-mode: screen;
}
@keyframes vi-btn-shimmer {
  0%, 55%, 100% { transform: translateX(-120%); }
  75%          { transform: translateX(120%); }
}
/* El contenido del botón por encima del brillo */
a.btn-primary[href*="reservas"] > *,
a.btn-primary[href*="#reserva"] > *,
a.btn-primary[href*="Reservar"] > *,
.btn-primary.vi-shimmer-btn > * {
  position: relative;
  z-index: 2;
}


/* [2026-08-04] Castillo eliminado del hero de Home
   visualmente. La home vuelve a la maquetación original. */

/* ── 5) BORDE METÁLICO EN MOVIMIENTO — cards y CTA ──────────────
   Un borde fino dorado con reflejo que se desplaza en diagonal por
   el perímetro cada 5s. Técnica: pseudo-elemento con gradient +
   mask-composite `exclude` para que el color se vea SOLO en el
   borde, no dentro del card. Efecto tipo "metal pulido".
   Aplica a:
     · Cards de juegos (`.room-card` — /juegos/)
     · Cards de salas (`.sala-card` — landings)
     · Botón CTA "Reservar" (perímetro dorado que se mueve) */

.room-card,
.sala-card,
.other-room-card,
a.btn-primary[href*="reservas"],
a.btn-primary[href*="#reserva"],
a.btn-primary[href*="Reservar"],
.btn-primary.vi-shimmer-btn {
  position: relative;
}
.room-card::before,
.sala-card::before,
.other-room-card::before {
  content: '';
  position: absolute;
  inset: 0;
  padding: 1.5px;
  border-radius: inherit;
  background: linear-gradient(
    135deg,
    transparent 0%,
    transparent 35%,
    rgba(200, 169, 110, 0.65) 45%,
    rgba(255, 247, 220, 1) 50%,
    rgba(200, 169, 110, 0.65) 55%,
    transparent 65%,
    transparent 100%
  );
  background-size: 300% 300%;
  background-position: 0% 0%;
  animation: vi-border-shine 5s ease-in-out infinite;
  -webkit-mask:
    linear-gradient(#fff 0 0) content-box,
    linear-gradient(#fff 0 0);
          mask:
    linear-gradient(#fff 0 0) content-box,
    linear-gradient(#fff 0 0);
  -webkit-mask-composite: xor;
          mask-composite: exclude;
  pointer-events: none;
  z-index: 5;
  /* Anular transform local del pseudo (`.room-card::before` en home
     tenía `transform: scale(1.02)` para su efecto hover — eso rompía
     nuestro mask+animación del borde metálico). */
  transform: none !important;
  transition: none !important;
}
/* En el botón CTA, ya tiene un ::after ocupado por el reflejo interior
   — el borde metálico va en ::before. Border padding un pelín menor
   para que respete el radius pequeño del botón. */
a.btn-primary[href*="reservas"]::before,
a.btn-primary[href*="#reserva"]::before,
a.btn-primary[href*="Reservar"]::before,
.btn-primary.vi-shimmer-btn::before {
  content: '';
  position: absolute;
  inset: 0;
  padding: 1px;
  border-radius: inherit;
  background: linear-gradient(
    135deg,
    transparent 0%,
    transparent 30%,
    rgba(255, 227, 163, 0.7) 45%,
    rgba(255, 250, 220, 1) 50%,
    rgba(255, 227, 163, 0.7) 55%,
    transparent 70%,
    transparent 100%
  );
  background-size: 300% 300%;
  background-position: 0% 0%;
  animation: vi-border-shine 4s ease-in-out infinite;
  -webkit-mask:
    linear-gradient(#fff 0 0) content-box,
    linear-gradient(#fff 0 0);
          mask:
    linear-gradient(#fff 0 0) content-box,
    linear-gradient(#fff 0 0);
  -webkit-mask-composite: xor;
          mask-composite: exclude;
  pointer-events: none;
  z-index: 2;
}
@keyframes vi-border-shine {
  0%   { background-position: 0% 0%; }
  100% { background-position: 100% 100%; }
}

/* ── ACCESIBILIDAD: respetar prefers-reduced-motion ──────────── */
@media (prefers-reduced-motion: reduce) {
  a.btn-primary[href*="reservas"]::after,
  a.btn-primary[href*="#reserva"]::after,
  a.btn-primary[href*="Reservar"]::after,
  .btn-primary.vi-shimmer-btn::after {
    animation: none;
    display: none;
  }
  .room-card::before,
  .sala-card::before,
  .other-room-card::before,
  a.btn-primary[href*="reservas"]::before,
  a.btn-primary[href*="#reserva"]::before,
  a.btn-primary[href*="Reservar"]::before,
  .btn-primary.vi-shimmer-btn::before {
    animation: none;
    background-position: 50% 50%;
  }
}