/* Portada de Celutimba. MOBILE-FIRST: el sitio esta pensado para celular; el
   escritorio es la adaptacion, no al reves. Paleta tomada del logo del cliente:
   azul electrico y naranja sobre azul noche. El juego conserva su propia paleta. */

/* Fuentes propias, servidas desde este mismo sitio (la CSP bloquea las
   externas). Las dos con licencia SIL OFL: declararlas en la entrega.
   Anton para la marca (condensada e impactante, la que usan las casas de
   apuestas para los titulos) y Oswald para botones y encabezados. */
@font-face {
  font-family: 'Anton';
  font-style: normal;
  font-weight: 400;
  font-display: swap;
  src: url('../fonts/anton.woff2') format('woff2');
}
@font-face {
  font-family: 'Oswald';
  font-style: normal;
  font-weight: 500 600;
  font-display: swap;
  src: url('../fonts/oswald.woff2') format('woff2');
}

:root {
  --fondo:          #081226;
  --fondo-carta:    #0d1b38;
  --azul:           #2f9df0;
  --azul-brillo:    #6cc4ff;
  --naranja:        #f7941d;
  --naranja-brillo: #ffb54d;
  --texto:          #eaf3ff;
  --texto-suave:    #9fb4d8;
  --marca:  'Anton', 'Arial Narrow', system-ui, sans-serif;
  --titulo: 'Oswald', 'Arial Narrow', system-ui, sans-serif;
}

* { margin: 0; padding: 0; box-sizing: border-box; }
[hidden] { display: none !important; }

.visualmente-oculto {
  position: absolute;
  width: 1px; height: 1px;
  overflow: hidden;
  clip-path: inset(50%);
}

body {
  background: var(--fondo);
  color: var(--texto);
  font-family: system-ui, -apple-system, "Segoe UI", Roboto, sans-serif;
  min-height: 100vh;
  min-height: 100dvh;
  display: flex;
  flex-direction: column;
  overflow-x: hidden;
}

/* Resplandores de color flotando detras de todo, para que el fondo no sea una
   plancha lisa. Van fijos y detras: no molestan al scroll ni al contenido. */
.luces {
  position: fixed;
  inset: 0;
  z-index: -1;
  pointer-events: none;
  background:
    radial-gradient(420px 320px at 85% 8%,  rgba(247, 148, 29, .14), transparent 70%),
    radial-gradient(500px 380px at 8% 30%,  rgba(47, 157, 240, .16), transparent 70%),
    radial-gradient(460px 360px at 90% 78%, rgba(47, 157, 240, .10), transparent 70%),
    radial-gradient(380px 300px at 12% 95%, rgba(247, 148, 29, .10), transparent 70%);
  animation: respirar 9s ease-in-out infinite alternate;
}
@keyframes respirar {
  from { opacity: .7; }
  to   { opacity: 1; }
}

/* --- Barra superior ------------------------------------------------------- */

/* La barra de la portada es propia, distinta a la de los juegos a proposito:
   aca no se apuesta, asi que no lleva "volver", ni sonido, ni "como se juega".
   Solo la marca y, si hay sesion, la cuenta. */
.barra {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 10px;
  padding: 8px 14px;
  background: rgba(8, 18, 38, .9);
  backdrop-filter: blur(6px);
  border-bottom: 1px solid rgba(47, 157, 240, .25);
  position: sticky;
  top: 0;
  z-index: 20;
}

.barra__marca {
  display: flex;
  align-items: center;
  gap: 9px;
  text-decoration: none;
  min-width: 0;
}

.barra__logo {
  height: 38px;
  width: 38px;
  object-fit: cover;
  border-radius: 9px;
  flex: none;
}

.barra__nombre {
  font-family: var(--titulo);
  font-weight: 600;
  font-size: 1.3rem;
  letter-spacing: .5px;
  color: var(--azul-brillo);
  text-shadow: 0 0 14px rgba(108, 196, 255, .5);
  white-space: nowrap;
}
.barra__nombre em {
  font-style: normal;
  color: var(--naranja);
  text-shadow: 0 0 14px rgba(247, 148, 29, .55);
}

.barra__acciones { display: flex; align-items: center; gap: 8px; }

/* La cuenta: UNA sola ficha con el avatar, el saldo y una flecha. Se toca y se
   abre el detalle. Una sola caja, no dos cajas distintas peleandose. */
.cuenta {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 5px 12px 5px 5px;
  border-radius: 12px;
  background: rgba(13, 27, 56, .9);
  border: 1px solid rgba(247, 148, 29, .4);
  color: var(--texto);
  font: inherit;
  cursor: pointer;
  transition: border-color .15s ease, background .15s ease;
}
.cuenta:hover { border-color: var(--naranja); background: rgba(247, 148, 29, .1); }
.cuenta.abierto { border-color: var(--naranja); }

.cuenta__avatar {
  display: grid;
  place-items: center;
  width: 34px;
  height: 34px;
  flex: none;
  border-radius: 9px;
  background: linear-gradient(180deg, var(--azul-brillo), var(--azul));
  color: #04182e;
  font-family: var(--titulo);
  font-weight: 600;
  font-size: 1.05rem;
}

.cuenta__datos { display: flex; flex-direction: column; line-height: 1.15; text-align: left; }
.cuenta__nombre {
  font-size: .74rem;
  color: var(--texto-suave);
  max-width: 10ch;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.cuenta__saldo {
  font-family: var(--titulo);
  font-weight: 600;
  font-size: 1.05rem;
  color: var(--naranja-brillo);
}

.cuenta__flecha {
  color: var(--texto-suave);
  transition: transform .2s ease;
  flex: none;
}
.cuenta.abierto .cuenta__flecha { transform: rotate(180deg); }

/* --- Detalle de la cuenta (desplegable) ----------------------------------- */

/* Flota sobre la portada en vez de abrirse en el flujo: si empujara el
   contenido, abrir el detalle correria la tapa entera hacia abajo. */
.desplegable {
  position: fixed;
  top: 62px;
  right: 14px;
  z-index: 19;
  display: flex;
  flex-direction: column;
  gap: 8px;
  width: min(300px, calc(100% - 28px));
  padding: 12px;
  background: var(--fondo-carta);
  border: 1px solid rgba(47, 157, 240, .3);
  border-radius: 14px;
  box-shadow: 0 14px 34px rgba(0, 0, 0, .55);
  animation: bajar 160ms ease both;
}
@keyframes bajar {
  from { opacity: 0; transform: translateY(-8px); }
  to   { opacity: 1; transform: none; }
}

.desplegable__fila {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: 12px;
  font-size: .9rem;
  color: var(--texto-suave);
}
.desplegable__fila strong {
  font-family: var(--titulo);
  font-size: 1.05rem;
  color: var(--naranja-brillo);
}

.desplegable__nota {
  margin: 0;
  font-size: .78rem;
  line-height: 1.5;
  color: var(--texto-suave);
  opacity: .85;
}

.desplegable__accion {
  padding: 11px 12px;
  border: 1px solid transparent;
  border-radius: 10px;
  font-family: var(--titulo);
  font-size: .95rem;
  font-weight: 500;
  text-align: center;
  text-decoration: none;
  cursor: pointer;
}

/* Cargar: verde WhatsApp, es la accion que se busca cuando se acaba el saldo. */
.desplegable__accion--wsp {
  color: #08301c;
  background: linear-gradient(180deg, #2ee06a, #1faa4f);
  border-color: #25bd59;
}
.desplegable__accion--wsp:hover { background: linear-gradient(180deg, #45e97d, #23bd58); }

/* Retirar: delineado en verde; comparte importancia con cargar pero deja que
   cargar resalte. */
.desplegable__accion--retirar {
  color: #35d16f;
  background: rgba(53, 209, 111, .1);
  border-color: rgba(53, 209, 111, .45);
}
.desplegable__accion--retirar:hover { background: rgba(53, 209, 111, .18); color: #5df093; }

.desplegable__accion--suave {
  border-color: rgba(159, 180, 216, .3);
  background: transparent;
  color: var(--texto-suave);
}
.desplegable__accion--suave:hover { background: rgba(255, 255, 255, .06); color: var(--texto); }

/* --- Botones -------------------------------------------------------------- */

.boton {
  position: relative;
  font-weight: 600;
  text-transform: uppercase;
  display: inline-block;
  padding: 13px 28px;
  border-radius: 14px;
  font-family: var(--titulo);
  font-size: 1.15rem;
  letter-spacing: 1px;
  text-decoration: none;
  text-align: center;
  overflow: hidden;
  transition: transform .12s ease, box-shadow .12s ease;
}
.boton:active { transform: scale(.96); }

/* Un destello que barre el boton cada tanto, como cartel de calle. */
.boton--naranja::after,
.boton--azul::after {
  content: '';
  position: absolute;
  top: -20%;
  bottom: -20%;
  width: 34%;
  left: -50%;
  background: linear-gradient(100deg, transparent, rgba(255, 255, 255, .55), transparent);
  transform: skewX(-18deg);
  animation: destello 3.2s ease-in-out infinite;
}
@keyframes destello {
  0%       { left: -50%; }
  55%, 100% { left: 130%; }
}

.boton--naranja {
  background: linear-gradient(180deg, var(--naranja-brillo), var(--naranja) 55%, #d97407);
  color: #331a00;
  border: 1px solid #ffd08a;
  box-shadow: 0 4px 20px rgba(247, 148, 29, .5), inset 0 1px 0 rgba(255,255,255,.4);
}
.boton--naranja:hover { box-shadow: 0 6px 30px rgba(247, 148, 29, .75), inset 0 1px 0 rgba(255,255,255,.4); }

.boton--azul {
  background: linear-gradient(180deg, var(--azul-brillo), var(--azul) 55%, #1272c2);
  color: #04182e;
  border: 1px solid #a5dbff;
  box-shadow: 0 4px 18px rgba(47, 157, 240, .45), inset 0 1px 0 rgba(255,255,255,.4);
}
.boton--azul:hover { box-shadow: 0 6px 26px rgba(47, 157, 240, .7), inset 0 1px 0 rgba(255,255,255,.4); }

.boton--chico  { padding: 9px 18px; font-size: .95rem; }
.boton--grande {
  padding: 16px 40px;
  font-size: 1.45rem;
  border-radius: 18px;
  animation: latir 2.4s ease-in-out infinite;
}
@keyframes latir {
  0%, 100% { transform: scale(1); }
  50%      { transform: scale(1.04); }
}

/* --- Tapa: la primera pantalla completa ----------------------------------- */
/* Ocupa todo el alto del celular: tira de arte arriba (~18%), la marca grande
   en el centro, y la flecha para bajar al final. Los juegos quedan debajo. */

html { scroll-behavior: smooth; }

.tapa {
  display: flex;
  flex-direction: column;
  align-items: center;
  text-align: center;
}

/* La tira de arte: banda pegada arriba, fundida abajo para que no parezca una
   foto cortada y se funda con los juegos que vienen enseguida. */
.tapa__tira {
  display: block;
  width: 100%;
  height: 30vh;
  min-height: 170px;
  max-height: 340px;
  object-fit: cover;
  object-position: center;
  -webkit-mask-image: linear-gradient(180deg, #000 62%, transparent 100%);
  mask-image: linear-gradient(180deg, #000 62%, transparent 100%);
}

/* El bono de bienvenida, solo para quien todavia no tiene cuenta. Es el unico
   texto que quedo en la tapa: es el motivo por el que alguien se registra. */
.tapa__bono {
  display: inline-block;
  margin: 2px 14px 0;
  padding: 9px 18px;
  border-radius: 999px;
  background: rgba(247, 148, 29, .16);
  border: 1px solid rgba(247, 148, 29, .55);
  color: var(--naranja-brillo);
  font-weight: 700;
  font-size: .95rem;
  box-shadow: 0 0 18px rgba(247, 148, 29, .25);
}

/* --- Cartas de juegos ----------------------------------------------------- */

.juegos { padding: 20px 14px 30px; max-width: 1080px; margin: 0 auto; width: 100%; }

.juegos__titulo {
  font-family: var(--titulo);
  font-weight: 600;
  text-transform: uppercase;
  text-align: center;
  font-size: 1.7rem;
  letter-spacing: .6px;
  margin: 4px 0 18px;
  background: linear-gradient(90deg, var(--azul-brillo), #fff 50%, var(--naranja-brillo));
  -webkit-background-clip: text;
  background-clip: text;
  color: transparent;
  filter: drop-shadow(0 0 12px rgba(108, 196, 255, .35));
}

/* Dos columnas en el celular: con imagenes verticales, una sola columna hacia
   cada carta gigante y la pagina quedaba larguisima. Dos al lado achican todo a
   la mitad sin tocar la imagen (se muestra mas chica, no pierde calidad). */
.juegos__grilla {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 12px;
}

/* Borde con degradado azul-naranja: el truco de los dos fondos recortados. */
.carta {
  background:
    linear-gradient(var(--fondo-carta), var(--fondo-carta)) padding-box,
    linear-gradient(140deg, rgba(47,157,240,.7), rgba(13,27,56,.2) 45%, rgba(247,148,29,.7)) border-box;
  border: 1px solid transparent;
  border-radius: 18px;
  overflow: hidden;
  text-decoration: none;
  color: inherit;
  display: flex;
  flex-direction: column;
  transition: transform .15s ease, box-shadow .15s ease;
}

a.carta:hover, a.carta:focus-visible {
  transform: translateY(-4px);
  box-shadow: 0 12px 34px rgba(47, 157, 240, .3);
}

/* El arte de cada juego es la imagen que trajo el cliente, en 3:4 vertical (las
   tres en el mismo formato). La imagen llena el espacio, centrada, y se recorta
   lo mínimo. */
.carta__arte {
  aspect-ratio: 3 / 4;
  overflow: hidden;
  background: #0a1c40;
}
.carta__img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
  transition: transform .3s ease;
}
a.carta:hover .carta__img { transform: scale(1.05); }

/* Cuando son tres cartas en dos columnas, la tercera queda sola: se centra y se
   le da el ancho de una columna para que no parezca un error de alineacion. */
.juegos__grilla > .carta:last-child:nth-child(odd) {
  grid-column: 1 / -1;
  max-width: calc(50% - 6px);
  margin-inline: auto;
}

.carta__pie { padding: 11px 12px 14px; text-align: center; }
.carta__nombre {
  font-family: var(--titulo);
  font-weight: 600;
  font-size: 1.05rem;
  letter-spacing: .4px;
  margin-bottom: 2px;
}
.carta__detalle { color: var(--texto-suave); font-size: .8rem; margin-bottom: 10px; }
.carta__boton { display: block; padding: 9px 14px; font-size: .95rem; }

/* Juegos que todavia no estan. La carta se ve, pero apagada y sin enlace. */
.carta--pronto .carta__arte,
.carta--pronto .carta__nombre { opacity: .8; }

.cinta {
  display: inline-block;
  font-weight: 600;
  padding: 8px 18px;
  border-radius: 999px;
  border: 1px dashed var(--naranja);
  color: var(--naranja-brillo);
  font-family: var(--titulo);
  font-size: .95rem;
  letter-spacing: 1px;
  text-transform: uppercase;
}

/* --- Pie ------------------------------------------------------------------ */

.pie {
  margin-top: auto;
  padding: 22px 16px 26px;
  text-align: center;
  border-top: 1px solid rgba(47, 157, 240, .2);
}

.pie__whatsapp {
  display: inline-block;
  color: var(--azul-brillo);
  font-weight: 700;
  text-decoration: none;
  margin-bottom: 10px;
}
.pie__whatsapp:hover { text-decoration: underline; }

.pie__nota { color: var(--texto-suave); font-size: .85rem; }

/* --- Escritorio: columna angosta y centrada, igual que el tragamonedas ----
   En PC, a todo el ancho las cartas quedaban gigantes. Se centra todo en una
   columna de ~560px (como el juego), bien por debajo de la mitad de la pantalla.
   La barra queda full-width, tambien igual que en los juegos. */

@media (min-width: 700px) {
  /* El banner y el contenido, misma columna centrada. */
  .tapa,
  .juegos,
  .pie {
    width: min(560px, 94vw);
    margin-inline: auto;
  }

  /* La barra: el fondo sigue de punta a punta (queda pegada arriba como en los
     juegos), pero el logo y la cuenta se alinean a la MISMA columna de 560px,
     asi el header no queda suelto respecto del resto. */
  .barra { padding-inline: max(20px, calc((100% - 560px) / 2)); }

  /* El desplegable tiene que caer DEBAJO de la ficha de cuenta, que ahora vive
     en el borde derecho de la columna centrada. Si queda pegado al borde de la
     pantalla (right fijo), se despega de la ficha y se va a la derecha. */
  .desplegable { right: max(14px, calc((100vw - 560px) / 2)); }

  /* El banner deja de ser una franja de punta a punta: es un hero redondeado
     dentro de la columna. */
  .tapa { padding-top: 16px; }
  .tapa__tira {
    height: auto;
    aspect-ratio: 16 / 7;
    border-radius: 16px;
    -webkit-mask-image: none;
    mask-image: none;
  }
  .tapa__bono { margin-top: 12px; }

  .juegos { padding: 14px 0 40px; }
  .juegos__titulo { font-size: 1.9rem; margin: 14px 0 20px; }

  /* Las tres cartas en fila dentro de la columna angosta. */
  .juegos__grilla {
    grid-template-columns: repeat(3, 1fr);
    gap: 16px;
  }
  .juegos__grilla > .carta:last-child:nth-child(odd) {
    grid-column: auto;
    max-width: none;
    margin-inline: 0;
  }

  a.carta:hover, a.carta:focus-visible {
    transform: translateY(-5px);
    box-shadow: 0 14px 34px rgba(47, 157, 240, .3);
  }
  .carta__pie { padding: 12px 12px 15px; }
  .carta__nombre { font-size: 1.05rem; }
  .carta__detalle { font-size: .8rem; margin-bottom: 10px; }
  .carta__boton { padding: 9px 14px; font-size: .95rem; }
}

/* Sin animaciones para quien pidio menos movimiento en su sistema. */
@media (prefers-reduced-motion: reduce) {
  .luces, .boton--naranja::after, .boton--azul::after {
    animation: none;
  }
  .carta__img { transition: none; }
}