/* ============================================================================
   LA LANDING (landing.html), la raiz de superbuteo.com
   ============================================================================

   Habla el estilo B del juego —el oro, el cristal y la tinta salen de css/estilo-b.css, que se los
   pone a `.landing`— pero NO usa `--u`: el juego es una pantalla fija que escala con la ventana, y
   esto es una pagina que se desplaza y se lee en un movil. Aqui las medidas van en rem y clamp().

   EL ORO MACIZO ES SOLO EL BOTON DE STEAM: es lo unico que se le pide a quien llega.

   Todo cuelga de `.landing` o de una pieza `lp-`: la hoja no la carga nadie mas, pero asi una
   regla de aqui no puede escaparse si algun dia la carga otra pagina.
*/

.landing {
  --fondo: #050B18;
  --lado: clamp(16px, 5vw, 88px);
  margin: 0;
  min-height: 100vh;
  background: var(--fondo);
  color: var(--tinta-portada);
  font-family: 'Archivo', 'Segoe UI', system-ui, sans-serif;
  -webkit-font-smoothing: antialiased;
}
.landing *,
.landing *::before,
.landing *::after { box-sizing: border-box; }

/* --- la barra de arriba: el logo y el idioma ---------------------------------------------- */

.landing .lp-barra {
  position: absolute;
  inset: 0 0 auto 0;
  z-index: 2;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
  padding: clamp(14px, 2.4vw, 32px) var(--lado);
}
.landing .lp-logo {
  display: block;
  width: auto;
  height: clamp(38px, 5.2vw, 76px);
  filter: drop-shadow(0 4px 14px rgba(0, 0, 0, .55));
}
.landing .lp-idiomas { display: flex; gap: 8px; }
.landing .lp-idiomas button {
  min-width: 44px;
  min-height: 36px;
  padding: 0 10px;
  border: 1.5px solid transparent;
  border-radius: 8px;
  background: var(--cristal) padding-box, var(--oro-filo) border-box;
  color: var(--tinta-portada-baja);
  font: 800 .9rem/1 'Archivo', 'Segoe UI', sans-serif;
  letter-spacing: .06em;
  cursor: pointer;
}
.landing .lp-idiomas button:hover { color: #FFFFFF; }
.landing .lp-idiomas button[aria-current="true"] {
  background: var(--cristal-vivo) padding-box, var(--oro-filo-vivo) border-box;
  color: var(--oro-texto);
}
.landing .lp-idiomas button:focus-visible { outline: 2px solid #FFFFFF; outline-offset: 2px; }

/* --- la portada: la imagen del juego a pantalla entera, y el texto abajo a la izquierda ------- */

.landing .lp-heroe {
  position: relative;
  display: flex;
  align-items: flex-end;
  min-height: 100vh;
  min-height: 100svh;
  overflow: hidden;
  isolation: isolate;
}
.landing .lp-heroe-img {
  position: absolute;
  inset: 0;
  z-index: -2;
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: 50% 50%;
}
/* Tres velos: de abajo, para que el texto se lea sobre el cesped; de la izquierda, suave, el lado
   del texto; y de arriba, para el logo. La jugada queda a la vista en el centro y a la derecha. */
.landing .lp-heroe::after {
  content: "";
  position: absolute;
  inset: 0;
  z-index: -1;
  background:
    linear-gradient(to top, var(--fondo) 0%, rgba(5, 11, 24, .9) 16%, rgba(5, 11, 24, .45) 30%, rgba(5, 11, 24, 0) 44%),
    linear-gradient(to right, rgba(5, 11, 24, .45) 0%, rgba(5, 11, 24, 0) 40%),
    linear-gradient(to bottom, rgba(5, 11, 24, .55) 0%, rgba(5, 11, 24, 0) 18%);
}

.landing .lp-texto {
  width: 100%;
  padding: 120px var(--lado) clamp(28px, 6.5vh, 76px);
}
/* EN UNA LINEA en pantalla ancha: la imagen deja libre la franja de cesped de abajo, y un titular
   de dos o tres lineas subiria hasta tapar la jugada. En pantallas estrechas parte, y la jugada
   queda arriba igual. */
.landing .lp-titular {
  margin: 0 0 .4em;
  font-size: clamp(2rem, 2.95vw, 3.7rem);
  font-weight: 900;
  font-style: italic;
  font-stretch: 108%;
  line-height: 1;
  letter-spacing: .005em;
  text-transform: uppercase;
  color: #FFFFFF;
  text-wrap: balance;
  text-shadow: 0 3px 22px rgba(0, 0, 0, .55);
}
/* Ancho de sobra para que cada frase vaya en UNA linea en escritorio, en los dos idiomas: la inglesa
   es mas larga, y con 36em se partia dejando «millimetre.» sola en la linea de abajo. */
.landing .lp-entradilla,
.landing .lp-compite {
  margin: 0;
  max-width: 56em;
  font-size: clamp(1.05rem, 1.45vw, 1.35rem);
  line-height: 1.45;
  text-shadow: 0 2px 12px rgba(0, 0, 0, .6);
}
.landing .lp-entradilla { font-weight: 600; color: var(--tinta-portada); }
.landing .lp-compite {
  margin-top: .35em;
  font-weight: 800;
  font-style: italic;
  color: var(--oro-texto);
}

.landing .lp-acciones {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 14px 26px;
  margin-top: clamp(22px, 3.4vh, 36px);
}
.landing .lp-steam {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-height: 58px;
  padding: 0 30px;
  border-radius: 10px;
  background: var(--oro-filo);
  color: #1B1305;
  font-size: clamp(1rem, 1.25vw, 1.18rem);
  font-weight: 900;
  font-style: italic;
  font-stretch: 112%;
  letter-spacing: .02em;
  text-transform: uppercase;
  text-decoration: none;
  text-shadow: 0 1px 0 rgba(255, 255, 255, .45);
  box-shadow: 0 12px 30px rgba(0, 0, 0, .5), 0 0 26px rgba(255, 200, 90, .28), inset 0 1px 0 rgba(255, 255, 255, .55);
  transition: transform .15s ease, box-shadow .15s ease, background .15s ease;
}
.landing .lp-steam:hover {
  background: var(--oro-filo-vivo);
  transform: translateY(-2px);
  box-shadow: 0 16px 34px rgba(0, 0, 0, .5), 0 0 34px rgba(255, 200, 90, .42), inset 0 1px 0 rgba(255, 255, 255, .6);
}
.landing .lp-steam:active { transform: translateY(0); }
.landing .lp-steam:focus-visible { outline: 3px solid #FFFFFF; outline-offset: 3px; }

.landing .lp-entra {
  margin: 0;
  font-size: 1.02rem;
  font-weight: 600;
  color: var(--tinta-portada-baja);
}
.landing .lp-entra a {
  margin-left: .25em;
  color: #FFFFFF;
  font-weight: 800;
  text-decoration: underline;
  text-decoration-color: rgba(244, 214, 136, .7);
  text-underline-offset: .22em;
}
.landing .lp-entra a:hover { color: var(--oro-texto); }
.landing .lp-entra a:focus-visible { outline: 2px solid #FFFFFF; outline-offset: 3px; border-radius: 2px; }

/* --- las capturas del juego ------------------------------------------------------------------ */

.landing .lp-capturas {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: clamp(12px, 1.8vw, 24px);
  max-width: 1680px;
  margin: 0 auto;
  padding: clamp(28px, 5vw, 72px) var(--lado) clamp(48px, 7vw, 96px);
}
.landing .lp-capturas figure { margin: 0; }
.landing .lp-capturas img {
  display: block;
  width: 100%;
  height: auto;
  aspect-ratio: 16 / 9;
  object-fit: cover;
  border: 1.5px solid transparent;
  border-radius: 10px;
  background: linear-gradient(#0A1530, #0A1530) padding-box, var(--oro-filo) border-box;
  box-shadow: 0 14px 34px rgba(0, 0, 0, .5);
}

.landing .lp-pie {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: 6px 24px;
  padding: 22px var(--lado) 30px;
  border-top: 1px solid rgba(255, 255, 255, .08);
  color: var(--tinta-portada-baja);
  font-size: .9rem;
  text-align: center;
}
/* La politica de privacidad (privacidad.html, en /privacidad). */
.landing .lp-pie a {
  color: inherit;
  text-decoration: underline;
  text-decoration-color: rgba(244, 214, 136, .5);
  text-underline-offset: .2em;
}
.landing .lp-pie a:hover { color: #FFFFFF; }
.landing .lp-pie a:focus-visible { outline: 2px solid #FFFFFF; outline-offset: 3px; border-radius: 2px; }

/* --- en un movil ----------------------------------------------------------------------------- */

@media (max-width: 760px) {
  /* EN UN MOVIL LA IMAGEN VA ARRIBA Y EL TEXTO DEBAJO, sin pisarse: en vertical, la imagen a
     pantalla entera solo enseñaria un trozo, y el texto ocuparia justo la mitad donde esta la
     jugada. El recorte se centra en la ficha y el balon (36 %). */
  .landing .lp-heroe { display: block; min-height: 0; }
  .landing .lp-heroe-img {
    position: relative;
    inset: auto;
    display: block;
    height: 58vh;
    height: 58svh;
    min-height: 300px;
    object-position: 36% 50%;
  }
  .landing .lp-heroe::after {
    inset: 0 0 auto 0;
    height: 58vh;
    height: 58svh;
    min-height: 300px;
    background:
      linear-gradient(to top, var(--fondo) 0%, rgba(5, 11, 24, 0) 34%),
      linear-gradient(to bottom, rgba(5, 11, 24, .6) 0%, rgba(5, 11, 24, 0) 26%);
  }
  .landing .lp-texto { position: relative; margin-top: -28px; padding: 0 var(--lado) 36px; }
  .landing .lp-capturas { grid-template-columns: minmax(0, 1fr); padding-top: 12px; }
  .landing .lp-steam { width: 100%; padding: 0 20px; }
}

@media (prefers-reduced-motion: reduce) {
  .landing .lp-steam { transition: none; }
  .landing .lp-steam:hover { transform: none; }
}

/* --- cada imagen, en el idioma de la pagina -----------------------------------------------------

   Cada imagen esta dos veces en el marcado (castellano e ingles, `data-imagen-de`), con carga
   diferida, y aqui solo se enseña la del idioma: una imagen diferida que no se ve no se descarga.
   El idioma lo pone en <html lang> el script de la cabecera de landing.html, antes de pintar, y
   js/i18n.js al cambiarlo. Va al final y con `img` delante para ganar a los `display` de arriba,
   tambien al del movil. */
.landing img[data-imagen-de] { display: none; }
html[lang="es"] .landing img[data-imagen-de="es"],
html[lang="en"] .landing img[data-imagen-de="en"] { display: block; }