/* pendejadaymedia.com — El Lobby
   Portal de juegos oscuro. Héroe asimétrico con rodillos girando, carriles
   horizontales en vez de rejilla, letrero corrido de premios en vivo.
   Conserva los nombres de clase de perfil/entrar/registro. */

:root {
  /* áreas seguras del teléfono (isla dinámica, notch, barra de inicio).
     En lo que no es iPhone valen 0 y no cambia nada. */
  --sat: env(safe-area-inset-top, 0px);
  --sab: env(safe-area-inset-bottom, 0px);
  --sal: env(safe-area-inset-left, 0px);
  --sar: env(safe-area-inset-right, 0px);

  --noche:   #0A0910;
  --panel:   #141221;
  --panel2:  #1C1930;
  --raya:    rgba(255,255,255,.07);
  --raya2:   rgba(255,255,255,.13);

  --hueso:   #F3F0FA;
  --tenue:   #948CAB;

  --oro:     #FFC24B;
  --oro2:    #FFA31A;
  --lima:    #3DDC97;
  --sandia:  #FF4D7D;
  --uva:     #8B5CF6;

  --r-sm: 10px;
  --r-md: 16px;
  --r-lg: 24px;
  --r-xl: 32px;

  --luz-oro: 0 0 0 1px rgba(255,194,75,.28), 0 10px 40px -8px rgba(255,163,26,.45);
  --alza:    0 24px 60px -20px rgba(0,0,0,.9);
}

* { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; scroll-behavior: smooth; }

body {
  margin: 0;
  background: var(--noche);
  color: var(--hueso);
  font-family: 'Space Grotesk', system-ui, sans-serif;
  font-size: 17px;
  line-height: 1.6;
  -webkit-font-smoothing: antialiased;
  overflow-x: hidden;
}

h1, h2, h3 {
  font-family: 'Unbounded', system-ui, sans-serif;
  font-weight: 700;
  line-height: 1.02;
  letter-spacing: -0.045em;
  margin: 0 0 .4em;
}
h1 { font-size: clamp(2.7rem, 6.4vw, 5.4rem); font-weight: 800; }
h2 { font-size: clamp(1.5rem, 3vw, 2.1rem); }
h3 { font-size: 1.18rem; letter-spacing: -0.03em; }

p { margin: 0 0 1em; }
a { color: var(--oro); text-underline-offset: 3px; }
:focus-visible { outline: 2px solid var(--oro); outline-offset: 3px; border-radius: 6px; }

.envoltura {
  max-width: 1240px; margin: 0 auto;
  padding-left: max(clamp(18px, 4vw, 40px), var(--sal));
  padding-right: max(clamp(18px, 4vw, 40px), var(--sar));
}

/* ═══════════════════════════════════════════════════════════ barra ═══ */

.barra {
  position: sticky; top: 0; z-index: 90;
  /* el iPhone dibuja la isla y el reloj encima: se baja el contenido */
  padding-top: var(--sat);
  background: rgba(10,9,16,.72);
  backdrop-filter: blur(20px) saturate(160%);
  -webkit-backdrop-filter: blur(20px) saturate(160%);
  border-bottom: 1px solid var(--raya);
}
.barra .envoltura { display: flex; align-items: center; gap: 10px; min-height: 70px; flex-wrap: wrap; }

.marca {
  display: flex; align-items: center; gap: 10px;
  font-family: 'Unbounded', sans-serif; font-weight: 800;
  font-size: .95rem; letter-spacing: -0.05em;
  color: var(--hueso); text-decoration: none;
  margin-right: auto;
}
.marca::before {
  content: ''; width: 28px; height: 28px; border-radius: 10px;
  background: linear-gradient(145deg, var(--oro), var(--oro2));
  box-shadow: 0 6px 20px -4px rgba(255,163,26,.7);
}
.marca span { color: var(--oro); }

.barra nav { display: flex; align-items: center; gap: 4px; flex-wrap: wrap; }
.barra nav a {
  color: var(--tenue); text-decoration: none;
  font-size: .93rem; font-weight: 500;
  padding: 9px 14px; border-radius: 999px;
  transition: color .15s, background .15s;
}
.barra nav a:hover { color: var(--hueso); background: rgba(255,255,255,.06); }

.saldo {
  display: inline-flex; align-items: center; gap: 8px;
  background: rgba(255,194,75,.11);
  border: 1px solid rgba(255,194,75,.26);
  color: var(--oro); font-weight: 600; font-size: .92rem;
  font-variant-numeric: tabular-nums;
  padding: 8px 16px; border-radius: 999px; white-space: nowrap;
}
.saldo::before { content: '🪙'; }

/* ═════════════════════════════════════════════════════════ botones ═══ */

.boton {
  display: inline-flex; align-items: center; justify-content: center; gap: 9px;
  font-family: 'Space Grotesk', sans-serif; font-weight: 600; font-size: 1rem;
  text-decoration: none; cursor: pointer;
  padding: 15px 30px; border: 0; border-radius: 999px;
  background: rgba(255,255,255,.08); color: var(--hueso);
  border: 1px solid var(--raya2);
  transition: transform .18s cubic-bezier(.2,.9,.3,1), box-shadow .18s, background .18s;
}
.boton:hover { transform: translateY(-2px); background: rgba(255,255,255,.13); }
.boton:active { transform: translateY(0); }

.boton--rojo {
  background: linear-gradient(145deg, var(--oro), var(--oro2));
  color: #1A1206; border-color: transparent; font-weight: 700;
  box-shadow: 0 10px 34px -10px rgba(255,163,26,.8);
}
.boton--rojo:hover { background: linear-gradient(145deg, #FFD06E, var(--oro2)); }
.boton--verde { background: var(--lima); color: #04220F; border-color: transparent; font-weight: 700; }
.boton--hueco { background: transparent; }
.boton[disabled] { opacity: .4; pointer-events: none; }

.botonera { display: flex; gap: 12px; flex-wrap: wrap; }

/* ══════════════════════════════════════════════════════════ héroe ═══ */

.portada {
  position: relative;
  min-height: min(88vh, 760px);
  display: flex; align-items: center;
  padding: clamp(50px, 8vw, 90px) 0 clamp(40px, 6vw, 70px);
  overflow: hidden;
}

/* rodillos girando detrás */
.rodillos-fondo {
  position: absolute; inset: 0 0 0 46%;
  display: flex; gap: clamp(10px, 1.6vw, 22px);
  padding: 0 clamp(10px, 3vw, 40px);
  pointer-events: none; user-select: none;
  -webkit-mask-image: linear-gradient(to right, transparent, #000 34%, #000 72%, transparent),
                      linear-gradient(to bottom, transparent, #000 22%, #000 78%, transparent);
  -webkit-mask-composite: source-in;
  mask-image: linear-gradient(to right, transparent, #000 34%, #000 72%, transparent),
              linear-gradient(to bottom, transparent, #000 22%, #000 78%, transparent);
  mask-composite: intersect;
  opacity: .5;
}
.rodillos-fondo .tira-simbolos {
  flex: 1; display: flex; flex-direction: column; gap: clamp(10px, 1.6vw, 22px);
  font-size: clamp(2.6rem, 5.2vw, 4.4rem); line-height: 1;
  text-align: center;
}
.rodillos-fondo .tira-simbolos > span {
  aspect-ratio: 1; display: grid; place-items: center;
  background: var(--panel); border: 1px solid var(--raya);
  border-radius: clamp(12px, 1.6vw, 22px);
}
@media (prefers-reduced-motion: no-preference) {
  .rodillos-fondo .tira-simbolos { animation: rueda 18s linear infinite; }
  .rodillos-fondo .tira-simbolos:nth-child(2) { animation-duration: 25s; }
  .rodillos-fondo .tira-simbolos:nth-child(3) { animation-duration: 21s; animation-direction: reverse; }
  @keyframes rueda { to { transform: translateY(-50%); } }
}

.portada::after {
  content: ''; position: absolute; z-index: 1;
  left: -12%; top: 50%; transform: translateY(-50%);
  width: 60vw; aspect-ratio: 1;
  background: radial-gradient(circle, rgba(139,92,246,.30), transparent 60%);
  pointer-events: none;
}

.cartel { position: relative; z-index: 2; max-width: 620px; }
.cartel h1 { margin-bottom: .18em; }
.cartel h1 em { font-style: normal; color: var(--oro); }

.lema { font-size: clamp(1.05rem, 2vw, 1.3rem); color: var(--hueso); font-weight: 500; margin-bottom: .8em; }
.entradilla { color: var(--tenue); max-width: 46ch; margin-bottom: 2rem; }
.fichas-portada { display: block; margin-top: 20px; font-size: .88rem; color: var(--tenue); }

.insignia {
  display: inline-flex; align-items: center; gap: 9px;
  background: rgba(255,255,255,.05); border: 1px solid var(--raya);
  border-radius: 999px; padding: 7px 16px;
  font-size: .85rem; color: var(--tenue); margin-bottom: 26px;
}
.insignia b { color: var(--hueso); font-variant-numeric: tabular-nums; }
.punto { width: 7px; height: 7px; border-radius: 50%; background: var(--lima); flex: none;
         box-shadow: 0 0 10px var(--lima); }
@media (prefers-reduced-motion: no-preference) {
  .punto { animation: late 2.2s ease-in-out infinite; }
  @keyframes late { 50% { opacity: .3; } }
}

/* cifras del héroe */
.cifras { display: flex; gap: clamp(20px, 4vw, 44px); margin-top: 38px; flex-wrap: wrap; }
.cifras div b {
  display: block; font-family: 'Unbounded', sans-serif; font-weight: 700;
  font-size: clamp(1.5rem, 3vw, 2.1rem); letter-spacing: -0.04em;
  font-variant-numeric: tabular-nums; line-height: 1;
}
.cifras div span { font-size: .84rem; color: var(--tenue); }

/* ════════════════════════════════════════════════════════ letrero ═══ */

.letrero {
  border-top: 1px solid var(--raya); border-bottom: 1px solid var(--raya);
  background: var(--panel);
  padding: 15px 0; overflow: hidden;
  display: flex; gap: 0;
  -webkit-mask-image: linear-gradient(to right, transparent, #000 8%, #000 92%, transparent);
  mask-image: linear-gradient(to right, transparent, #000 8%, #000 92%, transparent);
}
.letrero .corre {
  display: flex; gap: 46px; flex: none; padding-right: 46px;
  white-space: nowrap; font-size: .93rem; color: var(--tenue);
}
.letrero .corre b { color: var(--hueso); font-weight: 600; }
.letrero .corre i { font-style: normal; color: var(--lima); font-weight: 700; font-variant-numeric: tabular-nums; }
@media (prefers-reduced-motion: no-preference) {
  .letrero .corre { animation: corre 42s linear infinite; }
  .letrero:hover .corre { animation-play-state: paused; }
  @keyframes corre { to { transform: translateX(-100%); } }
}

/* ════════════════════════════════════════════════════════ carriles ═══ */

/* Sólo el aire de arriba y abajo. Con el atajo `padding: … 0` se ponía el
   horizontal en CERO, y como esta regla va después de .envoltura le ganaba el
   margen lateral del sitio —y con él var(--sal), la zona segura del iPhone— en
   todo <div class="envoltura seccion">. Se veía en 404.php y perfil.php. */
.seccion { padding-top: clamp(46px, 6vw, 76px); padding-bottom: clamp(46px, 6vw, 76px); }
.seccion > h2 { margin-bottom: .15em; }
.seccion > p.sub { color: var(--tenue); margin: 0 0 30px; max-width: 52ch; }

.carril-cabeza {
  display: flex; align-items: baseline; gap: 14px;
  margin-bottom: 22px; flex-wrap: wrap;
}
.carril-cabeza h2 { margin: 0; }
.carril-cabeza span { color: var(--tenue); font-size: .9rem; }

.carril {
  display: flex; gap: 20px;
  overflow-x: auto; scroll-snap-type: x mandatory;
  padding: 4px clamp(18px, 4vw, 40px) 22px;
  margin: 0 calc(-1 * clamp(18px, 4vw, 40px));
  scrollbar-width: none;
}
.carril::-webkit-scrollbar { display: none; }
.carril > * { scroll-snap-align: start; flex: 0 0 clamp(270px, 32vw, 340px); }

/* ═══════════════════════════════════════════════════════════ fichas ═══ */

.ficha {
  position: relative; display: block;
  border-radius: var(--r-lg); overflow: hidden;
  background: var(--panel); border: 1px solid var(--raya);
  text-decoration: none; color: inherit;
  transition: transform .25s cubic-bezier(.2,.9,.3,1), border-color .25s, box-shadow .25s;
}
a.ficha:hover { transform: translateY(-6px); border-color: rgba(255,194,75,.4); box-shadow: var(--alza); }

.ficha .lamina {
  aspect-ratio: 16 / 10;
  display: grid; place-items: center;
  font-size: clamp(3.4rem, 7vw, 4.6rem); line-height: 1;
  background:
    radial-gradient(120% 90% at 50% 8%, rgba(255,194,75,.26), transparent 62%),
    linear-gradient(160deg, var(--panel2), #100E1C);
  border-bottom: 1px solid var(--raya);
  position: relative;
}
.ficha:nth-child(6n+2) .lamina { background: radial-gradient(120% 90% at 50% 8%, rgba(255,77,125,.24), transparent 62%), linear-gradient(160deg, var(--panel2), #100E1C); }
.ficha:nth-child(6n+3) .lamina { background: radial-gradient(120% 90% at 50% 8%, rgba(61,220,151,.22), transparent 62%), linear-gradient(160deg, var(--panel2), #100E1C); }
.ficha:nth-child(6n+4) .lamina { background: radial-gradient(120% 90% at 50% 8%, rgba(139,92,246,.26), transparent 62%), linear-gradient(160deg, var(--panel2), #100E1C); }

.ficha .cuerpo { padding: 18px 20px 22px; }
.ficha h3 { margin-bottom: .25em; }
.ficha p { margin: 0; font-size: .92rem; color: var(--tenue); }

.ficha .sello {
  position: absolute; top: 14px; left: 14px; z-index: 2;
  display: inline-flex; align-items: center; gap: 6px;
  font-size: .74rem; font-weight: 700;
  padding: 5px 11px; border-radius: 999px;
  background: rgba(10,9,16,.7); backdrop-filter: blur(8px);
  border: 1px solid var(--raya2); color: var(--tenue);
}
.sello--vivo { color: var(--lima); border-color: rgba(61,220,151,.4); }
.ficha--proxima { opacity: .58; }
.ficha--proxima .lamina { filter: grayscale(.7); }

/* ══════════════════════════════════════════════════ paneles de datos ═══ */

.paneles { display: grid; grid-template-columns: repeat(auto-fit, minmax(330px, 1fr)); gap: 20px; }

.panel {
  background: var(--panel); border: 1px solid var(--raya);
  border-radius: var(--r-xl); padding: 26px 24px;
}
.panel h2 { font-size: 1.24rem; margin-bottom: .2em; }
.panel > p { color: var(--tenue); font-size: .9rem; margin-bottom: 20px; }

.fila {
  display: flex; align-items: center; gap: 14px;
  padding: 13px 0; border-bottom: 1px solid var(--raya);
  font-size: .95rem;
}
.fila:last-child { border-bottom: 0; padding-bottom: 0; }
.fila .puesto {
  width: 28px; height: 28px; flex: none;
  display: grid; place-items: center; border-radius: 9px;
  background: rgba(255,255,255,.06); font-size: .8rem; font-weight: 700;
  color: var(--tenue);
}
.fila:first-child .puesto { background: linear-gradient(145deg, var(--oro), var(--oro2)); color: #1A1206; }
.fila .quien { font-weight: 600; }
.fila .cuando { color: var(--tenue); font-size: .82rem; }
.fila .cuanto { margin-left: auto; font-weight: 700; font-variant-numeric: tabular-nums; white-space: nowrap; }
.fila .cuanto.verde { color: var(--lima); }

/* ═════════════════════════════════════ compatibilidad: perfil y formas ═══ */

.rejilla { display: grid; grid-template-columns: repeat(auto-fill, minmax(268px, 1fr)); gap: 20px; }

.carta {
  background: var(--panel); border: 1px solid var(--raya);
  border-radius: var(--r-lg); padding: 22px;
  text-decoration: none; color: inherit;
  display: flex; flex-direction: column;
  transition: transform .2s, border-color .2s;
}
a.carta:hover { transform: translateY(-4px); border-color: rgba(255,194,75,.4); }
.carta .estampa { font-size: 2rem; margin-bottom: 14px; }
.carta .numero { position: absolute; width: 1px; height: 1px; overflow: hidden; clip-path: inset(50%); }
.carta h3 { margin-bottom: .3em; }
.carta p { margin: 0; font-size: .93rem; color: var(--tenue); }
.carta--proxima { background: transparent; border-style: dashed; }
.etiqueta {
  align-self: flex-start; margin-top: 15px;
  font-size: .75rem; font-weight: 600; color: var(--tenue);
  background: rgba(255,255,255,.05); border: 1px solid var(--raya);
  padding: 4px 11px; border-radius: 999px;
}
.etiqueta--vivo { color: var(--lima); border-color: rgba(61,220,151,.35); }

.hoja {
  max-width: 450px; margin: clamp(44px, 8vw, 90px) auto;
  background: var(--panel); border: 1px solid var(--raya);
  border-radius: var(--r-xl); padding: 42px 34px;
  box-shadow: var(--alza);
}
.hoja h1 { font-size: 1.9rem; }
.hoja p.pie { font-size: .92rem; color: var(--tenue); margin: 0; }

label { display: block; font-weight: 600; font-size: .86rem; margin: 18px 0 7px; color: var(--tenue); }
input[type=text], input[type=email], input[type=password], input[type=number], select {
  width: 100%; font: inherit; font-size: 1rem;
  padding: 14px 16px;
  border: 1px solid var(--raya2); border-radius: var(--r-sm);
  background: rgba(255,255,255,.04); color: var(--hueso);
  transition: border-color .15s, box-shadow .15s;
}
input::placeholder { color: #6A6382; }
input:focus, select:focus {
  outline: none; border-color: var(--oro);
  box-shadow: 0 0 0 4px rgba(255,194,75,.14);
}
select option { background: var(--panel); }
.hoja .boton { width: 100%; margin-top: 26px; }

.aviso {
  border: 1px solid rgba(255,77,125,.35); background: rgba(255,77,125,.1);
  color: #FF90B0; padding: 13px 16px; border-radius: var(--r-sm);
  margin: 18px 0; font-size: .93rem;
}
.aviso--bien { border-color: rgba(61,220,151,.35); background: rgba(61,220,151,.1); color: var(--lima); }

.tarjetas-datos { display: grid; grid-template-columns: repeat(auto-fit, minmax(152px, 1fr)); gap: 14px; margin: 26px 0 38px; }
.dato { background: var(--panel); border: 1px solid var(--raya); border-radius: var(--r-lg); padding: 20px; }
.dato b {
  display: block; font-family: 'Unbounded', sans-serif; font-weight: 700;
  font-size: 1.7rem; line-height: 1.1; letter-spacing: -0.04em;
  font-variant-numeric: tabular-nums;
}
.dato span { font-size: .84rem; color: var(--tenue); }

table.historial {
  width: 100%; border-collapse: separate; border-spacing: 0;
  background: var(--panel); border: 1px solid var(--raya);
  border-radius: var(--r-lg); overflow: hidden;
}
table.historial th {
  background: rgba(255,255,255,.03); color: var(--tenue);
  font-size: .78rem; font-weight: 600; padding: 13px 18px; text-align: left;
  border-bottom: 1px solid var(--raya);
}
table.historial td {
  padding: 13px 18px; font-size: .92rem;
  border-bottom: 1px solid var(--raya); font-variant-numeric: tabular-nums;
}
table.historial tr:last-child td { border-bottom: 0; }
table.historial td.mas { color: var(--lima); font-weight: 600; }
table.historial td.menos { color: var(--sandia); font-weight: 600; }

/* ════════════════════════════════════════════════════════════ pie ═══ */

.pie {
  margin-top: 50px; padding: 46px 0;
  border-top: 1px solid var(--raya);
  color: var(--tenue); font-size: .9rem;
}
.pie a { color: var(--tenue); text-decoration: none; }
.pie a:hover { color: var(--oro); }
.pie .envoltura { display: flex; justify-content: space-between; gap: 24px; flex-wrap: wrap; }

/* ═════════════════════════════════════════════════════════ entrada ═══ */

@media (prefers-reduced-motion: no-preference) {
  .reparte > * { animation: sube .55s cubic-bezier(.2,.9,.3,1) backwards; }
  .reparte > *:nth-child(1) { animation-delay: .04s }
  .reparte > *:nth-child(2) { animation-delay: .10s }
  .reparte > *:nth-child(3) { animation-delay: .16s }
  .reparte > *:nth-child(4) { animation-delay: .22s }
  .reparte > *:nth-child(5) { animation-delay: .28s }
  .reparte > *:nth-child(6) { animation-delay: .34s }
  @keyframes sube { from { opacity: 0; transform: translateY(22px); } to { opacity: 1; transform: none; } }
}

@media (max-width: 860px) {
  .rodillos-fondo { inset: 0; opacity: .13; }
  .portada { min-height: auto; }
  .cartel { max-width: none; }
}
@media (max-width: 600px) {
  body { font-size: 16px; }
  .hoja { padding: 30px 22px; border-radius: var(--r-lg); }
  .botonera .boton { width: 100%; }
  .cifras { gap: 24px; }
}