/* =============================================================================
   EL RETO
   La sección que va justo debajo de la portada, calcada de la referencia:
   cuatro pilares con los iconos pixel art, el panel morado de la licencia con
   los cazadores en medio, y la fila de "próximamente".

   Detalle que se repite en toda la sección: las esquinas van CORTADAS en
   diagonal con clip-path, no redondeadas. Es lo que le da ese aire de
   interfaz de videojuego en vez de tarjeta de web.
============================================================================= */

/* Cristal oscuro: NO tapa el fondo, lo atenúa. Detrás sigue viéndose la mansión
   de la portada, que vive en una capa fija, así que al bajar se queda quieta y
   la sección pasa por delante como un panel de vidrio ahumado. */
.act--reto {
  background: linear-gradient(180deg,
    rgba(7, 6, 12, 0.52) 0%,
    rgba(7, 6, 12, 0.7) 20%,
    rgba(7, 6, 12, 0.7) 80%,
    rgba(7, 6, 12, 0.52) 100%);
  backdrop-filter: blur(3px) saturate(0.9);
  border-top: 1px solid rgba(157, 107, 255, 0.22);
  border-bottom: 1px solid rgba(157, 107, 255, 0.22);
}

.reto-head { text-align: center; margin-bottom: clamp(38px, 6vh, 66px); }
.eyebrow--center { justify-content: center; }
.eyebrow--center::before { display: none; }
.reto-head .display { margin-top: 6px; }
.reto-head .lede { margin-inline: auto; max-width: 46ch; }

/* =============================================================================
   LOS CUATRO PILARES
============================================================================= */
.pillars {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(230px, 1fr));
  gap: 18px;
  margin-bottom: clamp(34px, 5vh, 56px);
}

/* --- Cómo se hace un borde en una caja con las esquinas cortadas -------------
   `border` no vale: el `clip-path` se lo lleva por delante. La técnica es que el
   FONDO del elemento sea el borde y un pseudo-elemento un píxel por dentro
   ponga el relleno oscuro.
   Ojo con la tentación de hacerlo al revés (relleno en el elemento, borde en un
   ::before con z-index negativo): un hijo con z-index negativo se pinta por
   ENCIMA del fondo de su padre, no por debajo, y la tarjeta sale morada entera.
   El contenido necesita `position: relative` para quedar por encima del relleno. */
.pillar {
  --cut: 16px;
  position: relative;
  padding: 30px 24px 28px;
  text-align: center;
  background: linear-gradient(180deg, rgba(157, 107, 255, 0.6), rgba(157, 107, 255, 0.2));
  clip-path: polygon(
    var(--cut) 0, calc(100% - var(--cut)) 0, 100% var(--cut),
    100% calc(100% - var(--cut)), calc(100% - var(--cut)) 100%,
    var(--cut) 100%, 0 calc(100% - var(--cut)), 0 var(--cut));
  transition: transform 280ms var(--ease-out), background 280ms ease;
}
.pillar::before {
  content: '';
  position: absolute;
  inset: 1px;
  background: linear-gradient(180deg, #1a1136 0%, #0d0919 100%);
  clip-path: inherit;
}
.pillar > * { position: relative; z-index: 1; }
.pillar:hover { transform: translateY(-6px); background: linear-gradient(180deg, var(--lime), rgba(157, 107, 255, 0.45)); }

/* El icono va sobre un halo redondo: lo despega del fondo y le da peso, que es
   lo que hace que la tarjeta parezca una ficha de juego y no un bloque de texto. */
.pillar-icon {
  position: relative;
  display: grid;
  place-items: center;
  height: 148px;
  margin-bottom: 18px;
}
.pillar-icon::before {
  content: '';
  position: absolute;
  width: 132px;
  height: 132px;
  border-radius: 50%;
  background: radial-gradient(closest-side, rgba(157, 107, 255, 0.28), transparent 72%);
  filter: blur(6px);
}
.pillar img {
  position: relative;
  height: 132px;
  width: auto;
  display: block;
  image-rendering: pixelated;
  filter: drop-shadow(0 10px 16px rgba(0, 0, 0, 0.8));
  animation: pillar-bob 5s ease-in-out infinite;
}
.pillar:nth-child(2) img { animation-delay: -1.2s; }
.pillar:nth-child(3) img { animation-delay: -2.4s; }
.pillar:nth-child(4) img { animation-delay: -3.6s; }
@keyframes pillar-bob { 0%, 100% { transform: translateY(0); } 50% { transform: translateY(-8px); } }

.pillar h3 {
  margin: 0 0 10px;
  font-family: var(--face-pixel);
  font-size: clamp(19px, 1.5vw, 24px);
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: var(--violet);
  text-shadow: 0 0 16px rgba(157, 107, 255, 0.5);
}
.pillar p { margin: 0; font-size: var(--t-small); line-height: 1.6; color: var(--ink-dim); }

/* =============================================================================
   ÚNETE A LA CAZA
============================================================================= */
.join {
  --cut: 22px;
  position: relative;
  display: grid;
  grid-template-columns: minmax(250px, 0.88fr) minmax(320px, 1.75fr) minmax(240px, 0.95fr);
  align-items: center;
  gap: clamp(20px, 3vw, 40px);
  padding: 34px clamp(24px, 3vw, 44px) 30px;
  margin-bottom: clamp(40px, 6vh, 70px);
  background: linear-gradient(140deg, var(--violet), rgba(157, 107, 255, 0.35) 45%, var(--lime));
  clip-path: polygon(
    var(--cut) 0, calc(100% - var(--cut)) 0, 100% var(--cut),
    100% calc(100% - var(--cut)), calc(100% - var(--cut)) 100%,
    var(--cut) 100%, 0 calc(100% - var(--cut)), 0 var(--cut));
}
.join::before {
  content: '';
  position: absolute;
  inset: 1.5px;
  background: linear-gradient(180deg, #1c1040 0%, #0b0718 100%);
  clip-path: inherit;
}
.join > * { position: relative; z-index: 1; }

/* Goteo de limo por el borde de arriba.
   Va con elementos de verdad, cada uno con su altura: hecho con degradados
   radiales salía una fila de bolas, que no es lo mismo que limo cayendo. */
.join-drip {
  position: absolute;
  top: 1px;
  left: 3%;
  right: 3%;
  height: 46px;
  display: flex;
  justify-content: space-between;
  pointer-events: none;
  overflow: hidden;
}
.join-drip i {
  display: block;
  width: 13px;
  background: var(--violet);
  border-radius: 0 0 999px 999px;
  box-shadow: 0 0 12px rgba(157, 107, 255, 0.55);
}
/* Alturas irregulares: un goteo regular se lee como un peine. */
.join-drip i:nth-child(3n)   { height: 30px; }
.join-drip i:nth-child(3n+1) { height: 14px; }
.join-drip i:nth-child(3n+2) { height: 22px; }
.join-drip i:nth-child(5n)   { height: 42px; }
.join-drip i:nth-child(7n)   { height: 10px; }

/* --- Columna de compra ------------------------------------------------------- */
.join-title {
  margin: 0 0 6px;
  font-family: var(--face-pixel);
  font-size: clamp(22px, 2vw, 30px);
  letter-spacing: 0.05em;
  text-transform: uppercase;
  color: var(--violet);
  text-shadow: 0 0 18px rgba(157, 107, 255, 0.5);
}
.join-price {
  position: relative;
  margin: 0;
  font-family: var(--face-pixel);
  font-size: clamp(58px, 6.2vw, 92px);
  line-height: 1;
  color: var(--lime);
  text-shadow: 0 5px 0 rgba(0, 0, 0, 0.75), 0 0 46px rgba(168, 244, 37, 0.6);
  animation: price-glow 3.4s ease-in-out infinite;
}
@keyframes price-glow {
  0%, 100% { text-shadow: 0 5px 0 rgba(0, 0, 0, .75), 0 0 40px rgba(168, 244, 37, .45); }
  50% { text-shadow: 0 5px 0 rgba(0, 0, 0, .75), 0 0 66px rgba(168, 244, 37, .85); }
}
.join-what {
  margin: 4px 0 0;
  font-family: var(--face-pixel);
  font-size: clamp(17px, 1.35vw, 22px);
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--ink);
}
.join-sub { margin: 12px 0 22px; font-size: var(--t-small); color: var(--ink-dim); }
.join-cta {
  width: 100%;
  height: 58px;
  padding: 0 16px;
  gap: 10px;
  white-space: nowrap; /* partido en dos lineas quedaba fatal */
  font-size: clamp(13px, 0.95vw, 16px);
}
.join-love {
  display: flex;
  align-items: center;
  gap: 8px;
  margin: 14px 0 0;
  font-size: var(--t-nano);
  color: var(--ink-faint);
}
.join-love svg { color: var(--violet); }

/* --- Los cazadores ------------------------------------------------------------
   SIN habitación de fondo. Se probó con `sala.png` detrás y quedaba sucio: ese
   recorte trae escombros y trozos de marco que llenaban el panel de basura
   visual. Los cuatro solos, grandes y centrados, se leen mucho mejor. */
.join-art {
  position: relative;
  margin: 0;
  align-self: center;
  display: grid;
  place-items: center;
}
/* Luz detrás del equipo. No es adorno: los cuatro llevan vaqueros y chaquetas
   oscuras sobre fondo oscuro, y sin esta luz las piernas se funden con el panel
   y parece que están cortados por la cintura. */
.join-art::before {
  content: '';
  position: absolute;
  width: 96%;
  height: 88%;
  border-radius: 50%;
  background: radial-gradient(closest-side, rgba(157, 107, 255, 0.4), rgba(168, 244, 37, 0.12) 58%, transparent);
  filter: blur(22px);
}
.join-art img {
  position: relative;
  /* 152 % invadía las columnas de al lado; 112 % es lo que cabe sin pisar nada. */
  width: 112%;
  max-width: none;
  height: auto;
  display: block;
  image-rendering: pixelated;
  filter: drop-shadow(0 18px 24px rgba(0, 0, 0, 0.85));
  /* La ilustración trae su propio fondo oscuro y hay que fundirlo con el panel.
     Se hace con dos desvanecidos rectos cruzados, NO con uno radial: el radial
     se comía las piernas del equipo por el centro-abajo. Estos solo tocan los
     cuatro bordes y dejan a los personajes intactos. */
  -webkit-mask-image: linear-gradient(90deg, transparent 0, #000 13%, #000 87%, transparent 100%);
  mask-image: linear-gradient(90deg, transparent 0, #000 13%, #000 87%, transparent 100%);
}

/* --- Ventajas ----------------------------------------------------------------- */
.join-perks { margin: 0; padding: 0; list-style: none; display: grid; gap: 20px; }
.join-perks li { display: grid; grid-template-columns: 32px 1fr; gap: 14px; align-items: start; }
.join-perks svg { color: var(--violet); margin-top: 2px; }
.join-perks b {
  display: block;
  font-family: var(--face-pixel);
  font-size: clamp(15px, 1.15vw, 19px);
  letter-spacing: 0.07em;
  text-transform: uppercase;
  color: var(--ink);
}
.join-perks span { font-size: var(--t-small); line-height: 1.5; color: var(--ink-dim); }

/* =============================================================================
   PRÓXIMAMENTE
============================================================================= */
.soon-head {
  margin-bottom: 16px;
  font-family: var(--face-pixel);
  font-size: clamp(17px, 1.35vw, 21px);
  letter-spacing: 0.09em;
  text-transform: uppercase;
  color: var(--violet);
}
.soon-head span { color: var(--ink-faint); margin-right: 6px; }

.soon-row {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr)) minmax(240px, 1.15fr);
  gap: 16px;
  align-items: stretch;
}

.soon-card {
  --cut: 12px;
  position: relative;
  overflow: hidden;
  padding: 0 0 14px;
  background: rgba(157, 107, 255, 0.5);
  clip-path: polygon(
    var(--cut) 0, 100% 0, 100% calc(100% - var(--cut)),
    calc(100% - var(--cut)) 100%, 0 100%, 0 var(--cut));
  transition: transform 260ms var(--ease-out);
}
.soon-card::before {
  content: '';
  position: absolute;
  inset: 1px;
  background: #0e0a1c;
  clip-path: inherit;
}
.soon-card > * { position: relative; z-index: 1; }
.soon-card:hover { transform: translateY(-5px); background: var(--lime); }
/* `contain` y no `cover`: los iconos son verticales y con `cover` se recortaban
   a un trozo de tentáculo que no se entendía. */
.soon-card img {
  width: 100%;
  height: 120px;
  object-fit: contain;
  object-position: center;
  padding: 10px;
  display: block;
  image-rendering: pixelated;
  background: radial-gradient(closest-side, rgba(157, 107, 255, 0.14), #0a0718 78%);
}
.soon-card h4 {
  margin: 12px 14px 0;
  font-family: var(--face-pixel);
  font-size: clamp(14px, 1.05vw, 18px);
  letter-spacing: 0.07em;
  text-transform: uppercase;
  color: var(--violet);
}

/* Cinta diagonal de NUEVO. */
.ribbon {
  position: absolute;
  top: 11px;
  left: -30px;
  z-index: 2;
  width: 108px;
  padding: 3px 0;
  transform: rotate(-45deg);
  background: var(--lime);
  color: #0a1400;
  text-align: center;
  font-family: var(--face-pixel);
  font-size: 12px;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  box-shadow: 0 2px 10px rgba(0, 0, 0, 0.6);
}

/* --- Síguenos ----------------------------------------------------------------- */
.follow {
  --cut: 12px;
  position: relative;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 16px;
  padding: 22px;
  background: rgba(168, 244, 37, 0.55);
  clip-path: polygon(
    var(--cut) 0, calc(100% - var(--cut)) 0, 100% var(--cut),
    100% calc(100% - var(--cut)), calc(100% - var(--cut)) 100%,
    var(--cut) 100%, 0 calc(100% - var(--cut)), 0 var(--cut));
}
.follow::before {
  content: '';
  position: absolute;
  inset: 1px;
  background: #0e0a1c;
  clip-path: inherit;
}
.follow > * { position: relative; z-index: 1; }
.follow p {
  margin: 0;
  font-family: var(--face-pixel);
  font-size: clamp(14px, 1.05vw, 18px);
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--lime);
  text-align: center;
}
.follow-row { display: flex; gap: 12px; }
.follow-box {
  display: grid;
  place-items: center;
  width: 50px;
  height: 50px;
  border-radius: 10px;
  border: 1px solid rgba(157, 107, 255, 0.4);
  background: rgba(157, 107, 255, 0.1);
  color: var(--violet);
  transition: color 200ms ease, transform 240ms var(--ease-pop), border-color 200ms ease;
}
.follow-box:hover { color: var(--lime); border-color: var(--lime); transform: translateY(-3px); }

/* =============================================================================
   ADAPTACIÓN
============================================================================= */
@media (max-width: 1180px) {
  .join { grid-template-columns: 1fr 1fr; }
  .join-art { grid-column: 1 / -1; grid-row: 1; }
  .soon-row { grid-template-columns: repeat(2, 1fr); }
  .follow { grid-column: 1 / -1; }
}

@media (max-width: 700px) {
  .join { grid-template-columns: 1fr; text-align: center; }
  .join-perks li { text-align: left; }
  .soon-row { grid-template-columns: 1fr 1fr; }
}

/* ===========================================================================
   A QUÉ NOCHE VAIS: las cuatro dificultades, debajo de la casa.

   EN BOTONES Y NO EN UN DESPLEGABLE porque son cuatro y hay que poder
   COMPARARLAS mientras se decide —cuánto paga cada una, cuántas pruebas deja—.
   En un desplegable solo se ve la que ya está puesta, que es justo lo que no
   ayuda a atreverse a subir.
   =========================================================================== */

.dif { margin-top: 18px; }
.dif-fila { display: grid; grid-template-columns: repeat(4, 1fr); gap: 8px; }
.dif-b {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 2px;
  padding: 10px 6px;
  border: 1px solid var(--line, #2a2340);
  border-radius: 10px;
  background: rgba(0, 0, 0, .3);
  color: var(--ink-dim, #9aa0b5);
  font: inherit;
  cursor: pointer;
  transition: border-color 140ms ease, background 140ms ease, color 140ms ease;
}
.dif-b:hover:not(:disabled) { border-color: rgba(168, 244, 37, .4); color: var(--ink, #e8ecf7); }
.dif-b:disabled { cursor: default; opacity: .75; }
.dif-b.on {
  border-color: var(--lime, #a8f425);
  background: rgba(168, 244, 37, .1);
  color: var(--ink, #e8ecf7);
}
.dif-b-n { font-size: 15px; font-weight: 400; }
/* LA PAGA, EN VERDE Y GRANDE. Es el argumento para subir de dificultad: sin
   ella a la vista, «Locura» es solo una manera de perder más. */
.dif-b-p { font-size: 17px; color: var(--lime, #a8f425); font-variant-numeric: tabular-nums; }
.dif-b-e { font-size: 11px; color: var(--ink-faint, #6f7590); }
.dif-b.on .dif-b-e { color: var(--ink-dim, #9aa0b5); }
.dif-pista {
  margin: 10px 0 0;
  font-size: 13px;
  line-height: 1.5;
  color: var(--ink-dim, #9aa0b5);
}

@media (max-width: 720px) {
  .dif-fila { grid-template-columns: repeat(2, 1fr); }
}