/* ═══════════════════════════════════════════════════════════════════════════
   GRAVITY FLIP — lo que solo usa la portada
   ═══════════════════════════════════════════════════════════════════════════
   gf.css lleva los tokens y las piezas que se repiten en TODAS las páginas
   (barra, botones, tarjeta, píldora, pie). Aquí van los bloques que existen
   una sola vez: el héroe, la maqueta del editor, la tabla de ejemplo y la
   franja de descarga. Si algo de aquí aparece en una segunda página, se sube
   a gf.css; si no, se queda.
   ═══════════════════════════════════════════════════════════════════════════ */

/* ---------- Héroe ---------- */
.hero {
  display:flex; flex-direction:column; align-items:center; gap:26px;
  padding:96px var(--gut) 0; text-align:center;
}
.hero h1 {
  margin:0;
  font-size:clamp(52px, 8vw, 112px);
  font-weight:700; letter-spacing:3px; line-height:.9;
}
/* El logotipo del juego: GRAVITY en blanco y FLIP en el degradado del oro.
   Es la marca, no un titular, y por eso se sale de la escala tipográfica. */
.hero h1 span {
  background:linear-gradient(180deg,#fff0b8,var(--gold-lo));
  -webkit-background-clip:text; background-clip:text; color:transparent;
}
.hero .lede { max-width:620px; margin:0; font-size:19px; line-height:1.6; color:var(--txt-2); text-wrap:pretty; }
.hero .cta { display:flex; flex-wrap:wrap; justify-content:center; gap:14px; margin-top:6px; }
.hero .stats { display:flex; flex-wrap:wrap; justify-content:center; gap:10px; margin-top:10px; }

/* ---------- El pasillo ---------- */
.hallwrap { padding:56px 0 0; }
.hallwrap .hall { aspect-ratio:4 / 1; }
.hallfoot {
  display:flex; justify-content:space-between; gap:20px; margin-top:6px; padding:0 var(--gut);
  font-size:11px; font-weight:700; letter-spacing:2px; color:var(--txt-4);
}

/* ---------- Tarjeta de modo ---------- */
.mode { display:flex; flex-direction:column; gap:18px; padding:30px; }
.mode header { display:flex; align-items:center; gap:14px; }
.mode .ico {
  display:flex; align-items:center; justify-content:center;
  width:44px; height:44px; border-radius:6px; border:1px solid transparent; flex-shrink:0;
}
.mode h3 { margin:0 0 4px; font-size:19px; font-weight:700; letter-spacing:1.5px; }
.mode header p { margin:0; font-size:11px; font-weight:700; letter-spacing:1px; }
.mode > p { margin:0; font-size:15px; line-height:1.65; color:var(--txt-3); text-wrap:pretty; }
.mode footer { display:flex; flex-wrap:wrap; gap:8px; }

/* ---------- Una captura ----------
   Todo lo que la portada ensena del juego es una captura DEL JUEGO, sacada con
   tools/web-shots.py sobre el motor de verdad. Antes eran dibujos en CSS: se
   parecian, que es exactamente el problema.

   El tratamiento es BANDA A SANGRE: ni marco, ni bisel, ni canto. La imagen
   cruza de lado a lado y se funde con el negro por los bordes. El juego ya es
   negro, asi que no hace falta una caja que lo separe de la pagina -- se separa
   solo por el color que lleva dentro.

   🔴 DOS REGLAS DURAS, que son las que arreglan el defecto de verdad:
   1. NINGUNA captura se pinta mas grande que su fichero. Lo que se veia mal no
      era deformacion (medido: todas a 1,78 exacto) sino AMPLIACION -- el editor
      de 1600 px pintado a 1500, compete de 1280 a 1200: blandas.
   2. La caja es 16:9 fija con object-fit:cover, para que deformarse sea
      imposible aunque la maqueta cambie manana.

   width/height van en el HTML para que el hueco este reservado antes de que
   baje la imagen (si no, el texto de abajo salta). */
.shot { position:relative; margin:0; line-height:0; }
.shot img { display:block; width:100%; height:auto; aspect-ratio:16 / 9; object-fit:cover; }
.shot::after { content:''; position:absolute; inset:0; pointer-events:none; }

/* A SANGRE: el heroe y los bloques anchos se salen del canalon y se funden por
   los cuatro bordes. Los margenes negativos son el canalon exacto, asi que en
   movil (--gut: 20px) el sangrado se ajusta solo. */
.sec > .shot { margin-left:calc(-1 * var(--gut)); margin-right:calc(-1 * var(--gut)); }
.hallwrap .shot::after,
.sec > .shot::after {
  background:
    linear-gradient(90deg, #06080e 0%, rgba(6,8,14,0) 13%, rgba(6,8,14,0) 87%, #06080e 100%),
    linear-gradient(180deg, rgba(6,8,14,.45) 0%, rgba(6,8,14,0) 9%, rgba(6,8,14,0) 82%, #06080e 100%);
}

/* Dentro de una tarjeta no hay bordes que fundir a los lados —los pone la
   tarjeta—, asi que la banda solo se disuelve por ABAJO, contra la superficie
   de la propia tarjeta, para que la imagen no acabe en una linea dura. */
.mode .shot, .mini .shot { margin:-30px -30px 0; border-radius:6px 6px 0 0; overflow:hidden; }
.mini .shot { margin:-26px -26px 0; }
.mode .shot::after, .mini .shot::after {
  background:linear-gradient(180deg, rgba(6,8,14,0) 56%, rgba(10,12,18,.62) 86%, rgba(13,15,21,.96) 100%);
}

/* ---------- Lista de virtudes ---------- */
.feats { display:flex; flex-direction:column; gap:14px; }
.feat { display:flex; gap:16px; padding:22px 24px; }
.feat svg { flex-shrink:0; margin-top:2px; }
.feat h3 { margin:0 0 6px; font-size:15px; font-weight:700; letter-spacing:1.5px; }
.feat p { margin:0; font-size:14px; line-height:1.6; color:var(--txt-3); text-wrap:pretty; }
.feat-gold {
  border-radius:6px;
  background:rgba(255,213,66,.07);
  border:1px solid rgba(255,213,66,.28);
  border-top:1px solid rgba(255,213,66,.38);
}
.feat-gold p { color:rgba(255,255,255,.62); }

/* ---------- Tarjeta corta ---------- */
.mini { display:flex; flex-direction:column; gap:12px; padding:26px; }
.mini h3 { margin:0; font-size:15px; font-weight:700; letter-spacing:1.5px; }
.mini p { margin:0; font-size:14px; line-height:1.6; color:var(--txt-3); text-wrap:pretty; }
.mini .price {
  align-self:flex-start; margin-top:4px;
  background:rgba(255,213,66,.12); border-color:rgba(255,213,66,.3); color:var(--gold);
}

/* Las cuatro virtudes del editor van en 2x2 DEBAJO de la captura, y no en una
   columna al lado: la captura del editor es apaisada y una columna de cuatro
   tarjetas a su derecha la dejaba flotando con medio metro de vacio debajo. */
.feats-2 { display:grid; grid-template-columns:repeat(2, minmax(0, 1fr)); gap:14px; }

/* «Quitar anuncios» no es un mundo ni una skin: no tiene captura que ensenar,
   asi que no compite en la rejilla -- va debajo, en una tira. */
.adstrip { flex-direction:row; align-items:center; gap:20px; margin-top:12px; }
.adstrip svg { flex-shrink:0; }
.adstrip h3 { margin:0 0 4px; }
.adstrip p { flex:1; min-width:0; }
.adstrip .price { margin-top:0; align-self:center; }

/* ---------- El enlace de un nivel ---------- */
.linkbox { display:flex; align-items:center; gap:28px; margin-top:20px; padding:26px 30px; }
.linkbox > div:first-child { flex:1; min-width:0; }
.linkbox .url { margin:0; font-size:26px; font-weight:700; letter-spacing:1px; word-break:break-word; }
.linkbox .url span { color:var(--gold); }
.linkbox .sub { margin:8px 0 0; font-size:14px; line-height:1.6; color:var(--txt-3); }
.codebox {
  display:flex; flex-direction:column; align-items:center; justify-content:center; gap:6px;
  width:150px; height:150px; flex-shrink:0;
  border-radius:6px; background:var(--bg); border:1px solid var(--edge);
}
.codebox .k { font-size:9px; font-weight:700; letter-spacing:2px; color:rgba(255,255,255,.4); }
.codebox .v { font-size:28px; font-weight:700; letter-spacing:2px; color:var(--gold); }
.codebox .d { display:flex; gap:4px; margin-top:2px; }
.codebox .d i { width:9px; height:9px; border-radius:2px; background:var(--gold); }
.codebox .d i.off { background:rgba(255,255,255,.16); }

/* ---------- Franja de descarga ---------- */
.download {
  display:flex; flex-direction:column; align-items:center; gap:22px;
  padding:64px 40px; border-radius:6px; text-align:center;
  background:linear-gradient(180deg, rgba(255,213,66,.10), rgba(255,213,66,.02));
  border:1px solid rgba(255,213,66,.26);
  border-top:1px solid rgba(255,213,66,.4);
}
.download h2 { margin:0; font-size:clamp(30px, 4vw, 52px); font-weight:700; letter-spacing:1px; line-height:1.05; }
.download > p { max-width:520px; margin:0; font-size:16px; line-height:1.6; color:var(--txt-3); text-wrap:pretty; }
.download .fine { font-size:11px; font-weight:700; letter-spacing:2px; color:rgba(255,255,255,.38); }

/* ═══════════════════════════════════════════════════════════════════════════
   MÓVIL
   ═══════════════════════════════════════════════════════════════════════════ */
@media (max-width:900px) {
  .hero { padding-top:44px; gap:18px; }
  .hero h1 { letter-spacing:2px; }
  .hero .lede { font-size:16px; }
  .hero .cta { width:100%; }
  .hero .cta .btn { width:100%; }
  .hero .stats { gap:8px; }
  .hero .pill { font-size:12px; padding:8px 13px; }

  .hallwrap { padding-top:30px; }
  .hallwrap .hall { aspect-ratio:1.85 / 1; }
  .hall .coin { width:10px !important; height:10px !important; }
  .hall .metros { font-size:11px; }
  .hallfoot { font-size:10px; }

  .mode { padding:22px; gap:12px; }
  .mode .shot { margin:-22px -22px 0; }
  .mini .shot { margin:-22px -22px 0; }
  .mode .ico { width:38px; height:38px; }
  .mode h3 { font-size:16px; }
  .mode > p { font-size:14px; }


  .feat { padding:18px 20px; }
  .mini { padding:22px; }
  .feats-2 { grid-template-columns:minmax(0, 1fr); gap:12px; }
  .adstrip { flex-direction:column; align-items:flex-start; gap:12px; }

  .linkbox { flex-direction:column; align-items:stretch; text-align:center; gap:18px; padding:24px 22px; }
  .linkbox .url { font-size:19px; }
  .codebox { width:100%; height:auto; padding:22px 0; }

  .download { padding:40px 24px; gap:18px; }
  .download .btn { width:100%; }
  .download .fine { font-size:10px; letter-spacing:1.5px; }

  .foot-base { font-size:11px; }
  .foot-base span:last-child { display:none; }
}