/* ============================================================
   LANDING LA3CE · Casino del Río Online
   Paleta de marca + tipografías: Anton (display) / Inter (texto)
   Una sola pantalla + footer legal. Objetivo único: WhatsApp a la agencia.
   ============================================================ */

:root {
  --verde: #0E6E4B;
  --verde-claro: #14915F;
  --amarillo: #E8B923;
  --grafito: #181818;
  --grafito-2: #232323;
  --blanco: #FFFFFF;
  --gris: #B8B8B8;

  --font-display: "Anton", "Arial Narrow", sans-serif;
  --font-body: "Inter", system-ui, sans-serif;

  --container: 1120px;
}

* { margin: 0; padding: 0; box-sizing: border-box; }

html { scroll-behavior: smooth; }

body {
  background: var(--grafito);
  color: var(--blanco);
  font-family: var(--font-body);
  line-height: 1.6;
  overflow-x: hidden;
  -webkit-font-smoothing: antialiased;
}

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

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

/* ============================================================
   HERO (contenido único de la página)
   ============================================================ */

.hero {
  position: relative;
  min-height: 100svh;
  display: flex;
  flex-direction: column;
}

/* --- Slot de fondo (placeholder hasta filmar manos + cartas) --- */
.hero-bg {
  position: absolute;
  inset: 0;
  background:
    radial-gradient(ellipse 80% 55% at 78% 12%, rgba(232, 185, 35, 0.12), transparent 60%),
    radial-gradient(ellipse 90% 70% at 15% 90%, rgba(14, 110, 75, 0.5), transparent 65%),
    linear-gradient(155deg, #1d1d1d 0%, #141414 45%, #0c231a 100%);
}
.hero-bg::after {
  content: "";
  position: absolute;
  inset: 0;
  background-image: repeating-linear-gradient(
    -35deg,
    rgba(255, 255, 255, 0.014) 0px,
    rgba(255, 255, 255, 0.014) 1px,
    transparent 1px,
    transparent 9px
  );
}

.hero-bg-video {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  /* Ajuste pedido por Germán (14/07): el sujeto del video (manos +
     cabeza) quedaba muy arriba, casi cortado por el borde superior
     en pantallas angostas. Bajamos el punto de anclaje vertical del
     recorte para dejarle más aire arriba — revisar en el video real
     una vez esté el asset final (hoy corre sobre el ejemplo viejo). */
  object-position: 50% 22%;
}

/* hero-idle arranca invisible y hace un fundido cuando hero-deal
   termina y le pasa la posta (ver script.js). */
#heroIdle {
  opacity: 0;
  transition: opacity 0.6s ease;
}
#heroIdle.is-visible { opacity: 1; }

.hero-overlay {
  position: absolute;
  inset: 0;
  background: linear-gradient(
    to top,
    rgba(10, 10, 10, 0.75) 0%,
    rgba(10, 10, 10, 0.3) 45%,
    rgba(10, 10, 10, 0.4) 100%
  );
}

.hero-content {
  position: relative;
  z-index: 2;
  flex: 1;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  text-align: center;
  max-width: var(--container);
  width: 100%;
  margin: 0 auto;
  padding: 1.5rem 1.25rem 2.5rem;
}

/* --- Apertura a los 5s: hero-top sube y se atenúa, cta-wrap baja
   hacia las manos, dejando el centro libre para ver las cartas del
   video (ver .hero.is-revealed más abajo y el listener en script.js
   sobre el evento "ended" de hero-deal). --- */
.hero-top {
  display: flex;
  flex-direction: column;
  align-items: center;
  transition: transform 1s cubic-bezier(0.4, 0, 0.2, 1), opacity 1s ease;
}

.hero.is-revealed .hero-top {
  /* Bajado de -170/-110 a -120/-85 (16/07): en ventanas más bajitas
     (notebook con el navegador no maximizado, por ejemplo) el valor
     viejo empujaba el titular por arriba del borde y se cortaba.
     Ver también el resguardo extra para pantallas bajas más abajo. */
  transform: translateY(clamp(-120px, -16vh, -85px)) scale(0.86);
  opacity: 0.7;
}

.hero.is-revealed .cta-wrap {
  /* Más abajo todavía (16/07, 3º ajuste): a esta altura la ficha
     quedaba encima de la carta del medio y la tapaba. La corremos
     hasta el hueco entre las cartas y las manos. */
  transform: translateY(clamp(150px, 21vh, 240px));
}

/* Resguardo para ventanas bajas (notebook con navegador chico, etc.):
   los clamp() de arriba usan vh, así que en una ventana muy baja el
   titular puede terminar igual de pegado al borde. Con max-height se
   fuerza un desplazamiento fijo y chico que no depende del cálculo. */
@media (max-height: 700px) {
  .hero.is-revealed .hero-top {
    transform: translateY(-55px) scale(0.9);
  }
  .hero.is-revealed .cta-wrap {
    transform: translateY(95px);
  }
}

.tagline {
  display: flex;
  align-items: center;
  gap: 0.55rem;
  color: rgba(255, 255, 255, 0.95);
  text-shadow: 0 1px 6px rgba(0, 0, 0, 0.85);
  font-size: clamp(0.6rem, 1.6vw, 0.78rem);
  text-transform: uppercase;
  letter-spacing: 0.24em;
  margin-bottom: 1.1rem;
}
.tagline-icon {
  width: 1.05rem;
  height: 1.05rem;
  color: var(--amarillo);
  flex-shrink: 0;
}

.headline {
  font-family: var(--font-display);
  font-weight: 400;
  text-transform: uppercase;
  font-size: clamp(2.1rem, 7.5vw, 4.6rem);
  line-height: 1.02;
  letter-spacing: 0.01em;
  /* Ajuste 16/07 (2º pedido): 85% de opacidad, más transparente que el
     94% anterior. */
  color: rgba(255, 255, 255, 0.85);
  text-shadow: 0 2px 4px rgba(0, 0, 0, 0.9), 0 4px 22px rgba(0, 0, 0, 0.75);
}
.headline em {
  font-style: normal;
  color: var(--amarillo);
}

/* ============================================================
   CTA — ficha de "jugar"
   ============================================================ */

.cta-wrap {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 0.9rem;
  transition: transform 1s cubic-bezier(0.4, 0, 0.2, 1);
}

/* Ficha CTA: foto real de una ficha de casino (assets/chip-cta.jpg),
   a juego con la estética del video. El anillo oscuro + el texto van
   encima, así el copy se sigue editando sin tocar la imagen. */
/* Tamaño reducido (pedido de Germán, 14/07: "un poco más chica") +
   brillo tipo casino animado en vez de una sombra estática, para que
   la ficha titile y llame la atención sin gritar. */
.chip-cta {
  position: relative;
  /* Achicada un poco más (16/07): ahora que se corrió al hueco entre
     cartas y manos, más chica tapa menos si roza el borde de una carta. */
  width: clamp(6.5rem, 20vw, 8rem);
  aspect-ratio: 1 / 1;
  border-radius: 50%;
  /* ?v=2: chip-cta3.png se reemplazó por una versión nueva (21/07,
     texto "QUIERO JUGAR" con mucho más contraste) sin cambiar el
     nombre de archivo — el ?v= evita que quede una copia vieja en
     caché del navegador o del CDN de Netlify. Subir este número si
     se vuelve a reemplazar el archivo manteniendo el mismo nombre. */
  background: url("assets/chip-cta3.png?v=2");
  /* La imagen nueva deja un margen de fondo negro/oscuro alrededor de
     la ficha (más grande que el margen de la versión anterior, que
     llegaba justo al borde) — con "cover" ese margen entraba entero
     y se veía como un anillo negro alrededor de la ficha. Zoom del
     128% para recortar ese margen y que la ficha + su propio brillo
     ocupen todo el círculo del botón. */
  background-size: 128%;
  background-position: center;
  /* Contraste/saturación un toque arriba (21/07, pedido "más llamativo,
     que no se vea integrado al fondo"): el PNG de la ficha es medio
     apagado tal cual viene, esto le da más punch sin tocar el archivo. */
  filter: saturate(1.2) contrast(1.1) brightness(1.05);
  /* El halo dorado ahora queda siempre encendido (antes solo aparecía
     en el pico de la animación) — es lo que separa la ficha del fondo
     oscuro del video en vez de fundirse con él. */
  box-shadow: 0 12px 32px rgba(0, 0, 0, 0.5), inset 0 0 0 6px rgba(0, 0, 0, 0.35),
    0 0 24px 6px rgba(232, 185, 35, 0.4);
  display: flex;
  align-items: center;
  justify-content: center;
  overflow: hidden;
  transition: transform 0.2s ease, box-shadow 0.2s ease;
  animation: chip-glow 2.8s ease-in-out infinite;
}
.chip-cta:hover {
  transform: translateY(-3px) scale(1.03);
  box-shadow: 0 18px 40px rgba(0, 0, 0, 0.55), inset 0 0 0 8px var(--grafito),
    0 0 30px 8px rgba(232, 185, 35, 0.55);
}

/* Pulso dorado alrededor de la ficha — el halo de base (ver .chip-cta)
   sube y baja de intensidad acá en vez de partir de cero. */
@keyframes chip-glow {
  0%, 100% {
    box-shadow: 0 12px 32px rgba(0, 0, 0, 0.5), inset 0 0 0 6px rgba(0, 0, 0, 0.35),
      0 0 24px 6px rgba(232, 185, 35, 0.4);
  }
  50% {
    box-shadow: 0 12px 32px rgba(0, 0, 0, 0.5), inset 0 0 0 6px rgba(0, 0, 0, 0.35),
      0 0 42px 12px rgba(232, 185, 35, 0.7);
  }
}

/* Vignette a toda la ficha — antes oscurecía un poco el centro (donde
   está grabado el texto "QUIERO JUGAR"), lo que lo apagaba más de lo
   necesario. Se corrió el oscurecido fuerte al borde y se dejó el
   centro casi sin tocar para que el grabado se lea más nítido. */
.chip-ring {
  position: absolute;
  inset: 0;
  z-index: 0;
  border-radius: 50%;
  background: radial-gradient(circle at 50% 44%, rgba(10, 10, 10, 0) 0%, rgba(10, 10, 10, 0.06) 40%, rgba(10, 10, 10, 0.45) 70%, rgba(10, 10, 10, 0.68) 100%);
}

/* Barrido de brillo cruzando la ficha, como el reflejo de luz de una
   moneda girando — se repite cada pocos segundos, no es constante. */
.chip-cta::after {
  content: "";
  position: absolute;
  inset: 0;
  z-index: 1;
  border-radius: 50%;
  background: linear-gradient(115deg, transparent 35%, rgba(255, 255, 255, 0.5) 48%, rgba(255, 232, 160, 0.6) 52%, transparent 65%);
  background-size: 260% 260%;
  background-position: -130% -130%;
  mix-blend-mode: overlay;
  pointer-events: none;
  animation: chip-shine 3.6s ease-in-out infinite;
}
@keyframes chip-shine {
  0% { background-position: -130% -130%; }
  40% { background-position: 130% 130%; }
  100% { background-position: 130% 130%; }
}

@media (prefers-reduced-motion: reduce) {
  .chip-cta { animation: none; }
  .chip-cta::after { animation: none; opacity: 0; }
}

.age-note {
  color: rgba(255, 255, 255, 0.5);
  font-size: 0.68rem;
  text-transform: uppercase;
  letter-spacing: 0.14em;
}

.whatsapp-link {
  color: var(--gris);
  font-size: 0.78rem;
  text-decoration: underline;
  text-underline-offset: 3px;
  opacity: 0.8;
}
.whatsapp-link:hover { opacity: 1; color: var(--blanco); }

/* ============================================================
   MODAL DE REGISTRO — wizard de 3 pasos
   ============================================================ */

.registro-modal {
  position: fixed;
  inset: 0;
  z-index: 100;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 1.25rem;
  opacity: 0;
  visibility: hidden;
  transition: opacity 0.25s ease, visibility 0.25s ease;
}
.registro-modal.is-open { opacity: 1; visibility: visible; }

.registro-backdrop {
  position: absolute;
  inset: 0;
  /* Sin tarjeta de por medio (16/07: "eliminar el bloque, que quede
     solo las cajitas de texto"), este oscurecido es el único recurso
     para separar el formulario del fondo — por eso tiene que quedar
     suave: la idea es que la foto se siga viendo, no taparla. */
  background: rgba(10, 10, 10, 0.3);
  backdrop-filter: blur(1.5px);
}

.registro-panel {
  position: relative;
  z-index: 1;
  width: 100%;
  max-width: 420px;
  max-height: min(90vh, 640px);
  overflow-y: auto;
  overflow-x: hidden;
  /* Sin tarjeta: nada de background/blur/borde/sombra acá — es un
     contenedor invisible que solo posiciona y da padding. Lo único
     que se ve son los campos de texto flotando sobre el fondo. */
  padding: 1.5rem 1.25rem;
  transform: translateY(18px) scale(0.98);
  transition: transform 0.28s cubic-bezier(0.4, 0, 0.2, 1);
}
.registro-modal.is-open .registro-panel { transform: translateY(0) scale(1); }

.registro-close {
  position: absolute;
  top: 0.9rem;
  right: 1rem;
  font-size: 1.6rem;
  line-height: 1;
  color: var(--blanco);
  text-shadow: 0 2px 8px rgba(0, 0, 0, 0.8);
}
.registro-close:hover { color: var(--amarillo); }

.registro-header { text-align: center; margin-bottom: 1.4rem; }
.registro-eyebrow {
  font-size: 0.62rem;
  text-transform: uppercase;
  letter-spacing: 0.18em;
  color: var(--amarillo);
  margin-bottom: 0.4rem;
  text-shadow: 0 1px 3px rgba(0, 0, 0, 0.95), 0 2px 10px rgba(0, 0, 0, 0.85);
}
.registro-header h2 {
  font-family: var(--font-display);
  font-weight: 400;
  text-transform: uppercase;
  font-size: 1.5rem;
  letter-spacing: 0.01em;
  /* Sin tarjeta detrás, el título necesita su propia sombra para
     leerse bien pase lo que pase en esa zona de la foto. */
  text-shadow: 0 1px 3px rgba(0, 0, 0, 0.95), 0 3px 16px rgba(0, 0, 0, 0.85), 0 0 30px rgba(0, 0, 0, 0.5);
}


/* Las labels ("Nombre", "Teléfono", etc.) ya no tienen tarjeta detrás
   que las separe de la foto — antes usaban --gris (72% blanco) con una
   sola sombra difusa y quedaban poco legibles sobre el fondo de cartas
   (pedido 21/07: "más contraste, que se vean mejor"). Ahora van casi
   blancas con una sombra en dos capas (una de contacto, chica y
   oscura, + una difusa más grande) — es la misma técnica que ya usaba
   el headline del hero para leerse sobre la foto. */
.registro-field {
  display: flex;
  flex-direction: column;
  gap: 0.35rem;
  font-size: 0.8rem;
  color: rgba(255, 255, 255, 0.92);
  text-shadow: 0 1px 3px rgba(0, 0, 0, 0.95), 0 2px 10px rgba(0, 0, 0, 0.85);
}
.registro-field input,
.registro-field select {
  font: inherit;
  font-size: 0.92rem;
  color: var(--blanco);
  text-shadow: none;
  /* Único elemento con "caja" propia — son las cajitas de texto que
     quedan flotando sobre el fondo, sin tarjeta alrededor. */
  background: rgba(10, 10, 10, 0.55);
  border: 1px solid rgba(255, 255, 255, 0.2);
  border-radius: 8px;
  padding: 0.6rem 0.7rem;
  box-shadow: 0 4px 14px rgba(0, 0, 0, 0.35);
}
.registro-field input:focus,
.registro-field select:focus {
  outline: none;
  border-color: var(--verde-claro);
  background: rgba(10, 10, 10, 0.68);
}
.registro-field input:invalid.is-touched { border-color: #c0453f; }

.registro-note {
  font-size: 0.74rem;
  color: rgba(255, 255, 255, 0.85);
  text-align: center;
  line-height: 1.5;
  margin-top: 1.1rem;
  text-shadow: 0 1px 3px rgba(0, 0, 0, 0.95), 0 2px 10px rgba(0, 0, 0, 0.85);
}

.registro-error {
  font-size: 0.78rem;
  color: #ff8f87;
  text-align: center;
  margin-top: 0.9rem;
  text-shadow: 0 1px 3px rgba(0, 0, 0, 0.95), 0 2px 10px rgba(0, 0, 0, 0.85);
}

.registro-actions {
  display: flex;
  gap: 0.7rem;
  margin-top: 1.5rem;
}

.registro-btn {
  flex: 1;
  font-family: var(--font-display);
  font-weight: 400;
  text-transform: uppercase;
  letter-spacing: 0.02em;
  font-size: 0.85rem;
  padding: 0.75rem 1rem;
  border-radius: 9px;
  transition: transform 0.15s ease, background 0.15s ease;
}
.registro-btn-primary { background: var(--verde); color: var(--blanco); }
.registro-btn-primary:hover { background: var(--verde-claro); transform: translateY(-1px); }
.registro-success { text-align: center; padding: 0.5rem 0 0.25rem; text-shadow: 0 1px 8px rgba(0, 0, 0, 0.85); }
.registro-success-title {
  font-family: var(--font-display);
  font-weight: 400;
  text-transform: uppercase;
  font-size: 1.3rem;
  color: var(--amarillo);
  margin-bottom: 0.6rem;
}
.registro-success p:not(.registro-success-title) { color: var(--gris); font-size: 0.9rem; margin-bottom: 1.2rem; }
.registro-success .registro-btn { flex: none; padding-inline: 2rem; }

/* Tutorial "tocá Unirse" — a diferencia del resto del modal, acá sí
   tapamos el fondo a propósito (pedido 24/07): en esta pantalla el
   foco ya es 100% terminar el registro, no hace falta que se siga
   viendo la foto de las cartas. Es un <a> completo, no solo el video
   — así también sirve para volver a abrir la página del casino si la
   persona cerró esa pestaña pensando que era un pop-up. */
.registro-tutorial {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 0.6rem;
  margin: 0 0 1.3rem;
  padding: 1rem;
  background: rgba(10, 10, 10, 0.55);
  border: 1px solid rgba(232, 185, 35, 0.3);
  border-radius: 14px;
  text-decoration: none;
  transition: border-color 0.15s ease, background 0.15s ease;
}
.registro-tutorial:hover {
  border-color: var(--amarillo);
  background: rgba(10, 10, 10, 0.68);
}

/* object-position:top recorta el video (grabación de la página real,
   1080x1492) a solo la franja de arriba — el botón "Unirse" y la
   flecha que lo señala. El resto de la pantalla grabada no aporta
   nada acá y solo ocuparía espacio vertical de más. */
.registro-tutorial-video {
  width: clamp(7.5rem, 34vw, 10rem);
  aspect-ratio: 1 / 1;
  object-fit: cover;
  object-position: top center;
  border-radius: 10px;
  box-shadow: 0 6px 18px rgba(0, 0, 0, 0.5);
}

.registro-success .registro-tutorial .registro-tutorial-text {
  color: var(--blanco);
  font-size: 0.82rem;
  line-height: 1.45;
  margin-bottom: 0;
  text-shadow: none;
}
.registro-tutorial-text strong { color: var(--amarillo); }

.registro-success .registro-tutorial .registro-tutorial-hint {
  color: rgba(255, 255, 255, 0.55);
  font-size: 0.68rem;
  font-style: italic;
  margin-bottom: 0;
  text-shadow: none;
}

/* ============================================================
   FOOTER LEGAL
   ============================================================ */

.footer {
  background: #101010;
  border-top: 1px solid rgba(255, 255, 255, 0.08);
  padding: 2.25rem 0 2.5rem;
  text-align: center;
}

.legal-warning {
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.06em;
  font-size: clamp(0.78rem, 2.2vw, 0.95rem);
  color: var(--blanco);
  margin-bottom: 0.55rem;
}

.legal-help {
  color: var(--amarillo);
  font-weight: 600;
  font-size: 0.9rem;
  margin-bottom: 1rem;
}
.legal-help a { color: inherit; text-decoration: none; }

.legal-line {
  color: rgba(255, 255, 255, 0.55);
  font-size: 0.76rem;
  max-width: 42rem;
  margin: 0.3rem auto;
}
.legal-line strong { color: rgba(255, 255, 255, 0.8); }

.legal-brand {
  margin-top: 1.25rem;
  color: rgba(255, 255, 255, 0.35);
  font-size: 0.68rem;
  text-transform: uppercase;
  letter-spacing: 0.18em;
}

/* ============================================================
   ANIMACIONES (entrada escalonada al cargar)
   ============================================================ */

@keyframes fade-up {
  from { opacity: 0; transform: translateY(24px); }
  to   { opacity: 1; transform: translateY(0); }
}

.anim {
  opacity: 0;
  animation: fade-up 0.8s ease-out forwards;
}
.anim-d0 { animation-delay: 0s; }
.anim-d1 { animation-delay: 0.18s; }
.anim-d2 { animation-delay: 0.36s; }
.anim-d3 { animation-delay: 0.58s; }

@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  .anim { animation: none; opacity: 1; }
}

/* ============================================================
   RESPONSIVE
   ============================================================ */

@media (min-width: 1024px) {
  .hero-content { padding: 2rem 4rem 3.5rem; }
}