:root {
  --plyn-green: #68F500;
  --plyn-white: #EBEBEB;
  --plyn-black: #000000;
  --plyn-soft-white: rgba(235, 235, 235, 0.78);
  --content-width: 760px;
}

/* =========================================================
   BASE
   ========================================================= */

*,
*::before,
*::after {
  box-sizing: border-box;
}

html {
  margin: 0;
  padding: 0;
  background: var(--plyn-black);
}

body {
  margin: 0;
  padding: 0;
  min-width: 320px;
  min-height: 100vh;
  background: var(--plyn-black);
  color: var(--plyn-white);
  font-family: Arial, Helvetica, sans-serif;
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
}

/* =========================================================
   CONTENEDOR PRINCIPAL
   ========================================================= */

.landing {
  position: relative;
  isolation: isolate;
  min-height: 100vh;
  min-height: 100svh;
  overflow: hidden;

  display: grid;
  grid-template-rows: auto 1fr;

  padding:
    clamp(26px, 4vw, 56px)
    clamp(24px, 7vw, 120px);

  background: var(--plyn-black);
}

/* =========================================================
   IMAGEN HERO
   La imagen está en el HTML:
   <img class="landing__hero" src="img/hero.webp">
   ========================================================= */

.landing__hero {
  position: absolute;
  inset: 0;

  z-index: -3;

  width: 100%;
  height: 100%;

  display: block;

  object-fit: cover;
  object-position: center right;

  pointer-events: none;
  user-select: none;
}

/* =========================================================
   OVERLAY OSCURO

   Hace que la parte izquierda sea prácticamente negra
   para asegurar que el texto se lea correctamente,
   mientras permite ver la camioneta a la derecha.
   ========================================================= */

.landing__backdrop {
  position: absolute;
  inset: 0;

  z-index: -2;

  pointer-events: none;

  background:
    linear-gradient(
      90deg,
      rgba(0, 0, 0, 1) 0%,
      rgba(0, 0, 0, 0.99) 18%,
      rgba(0, 0, 0, 0.96) 32%,
      rgba(0, 0, 0, 0.82) 47%,
      rgba(0, 0, 0, 0.55) 61%,
      rgba(0, 0, 0, 0.25) 78%,
      rgba(0, 0, 0, 0.12) 100%
    );
}

/* Oscurecimiento adicional en bordes superior e inferior */

.landing::after {
  content: "";
  position: absolute;
  inset: 0;

  z-index: -1;

  pointer-events: none;

  background:
    radial-gradient(
      circle at 78% 48%,
      transparent 0 20%,
      rgba(0, 0, 0, 0.08) 55%,
      rgba(0, 0, 0, 0.30) 100%
    ),
    linear-gradient(
      180deg,
      rgba(0, 0, 0, 0.25) 0%,
      transparent 25%,
      transparent 72%,
      rgba(0, 0, 0, 0.40) 100%
    );
}

/* =========================================================
   HEADER / LOGO
   ========================================================= */

.landing__header {
  position: relative;
  z-index: 2;

  display: flex;
  align-items: flex-start;
}

.landing__logo {
  display: block;

  width: clamp(150px, 13vw, 220px);
  height: auto;

  object-fit: contain;
}

/* =========================================================
   CONTENIDO
   ========================================================= */

.landing__content {
  position: relative;
  z-index: 2;

  align-self: center;

  width: min(100%, var(--content-width));

  padding:
    clamp(46px, 8vh, 90px)
    0
    clamp(36px, 7vh, 76px);
}

/* =========================================================
   TEXTO SUPERIOR
   ========================================================= */

.landing__eyebrow {
  margin: 0 0 22px;

  color: var(--plyn-soft-white);

  font-size: clamp(0.7rem, 0.8vw, 0.9rem);
  font-weight: 700;

  letter-spacing: 0.28em;
  text-transform: uppercase;
}

/* =========================================================
   TÍTULO PRINCIPAL
   ========================================================= */

.landing__title {
  margin: 0;

  max-width: 11ch;

  color: #ffffff;

  font-family: "Arial Black", Arial, Helvetica, sans-serif;

  font-size: clamp(3rem, 5.7vw, 6.7rem);
  font-weight: 900;

  line-height: 0.92;
  letter-spacing: -0.045em;

  text-transform: uppercase;
}

.landing__title span {
  display: block;
}

/* =========================================================
   PRÓXIMAMENTE
   ========================================================= */

.landing__soon {
  margin:
    clamp(26px, 4vh, 42px)
    0
    0;

  color: var(--plyn-green);

  font-family: "Arial Black", Arial, Helvetica, sans-serif;

  font-size: clamp(2.7rem, 5.2vw, 6.1rem);
  font-weight: 900;

  line-height: 0.92;
  letter-spacing: -0.055em;

  text-transform: uppercase;
}

/* =========================================================
   COPY SECUNDARIO
   ========================================================= */

.landing__copy {
  margin:
    clamp(24px, 3vh, 34px)
    0
    0;

  max-width: 560px;

  color: rgba(255, 255, 255, 0.88);

  font-size: clamp(1rem, 1.35vw, 1.4rem);
  line-height: 1.55;
}

/* =========================================================
   ESTADO DE CONSTRUCCIÓN
   ========================================================= */

.landing__status {
  display: flex;
  align-items: center;

  gap: 18px;

  margin-top: clamp(34px, 5vh, 58px);

  color: rgba(255, 255, 255, 0.68);

  font-size: clamp(0.72rem, 0.8vw, 0.92rem);
  font-weight: 700;

  letter-spacing: 0.34em;
  text-transform: uppercase;
}

.landing__line {
  display: inline-block;

  flex: 0 0 auto;

  width: 70px;
  height: 3px;

  background: var(--plyn-green);
}

/* =========================================================
   TABLET
   ========================================================= */

@media (max-width: 900px) {

  .landing {
    padding:
      28px
      clamp(22px, 7vw, 54px);
  }

  .landing__hero {
    object-position: 66% center;
  }

  .landing__backdrop {
    background:
      linear-gradient(
        90deg,
        rgba(0, 0, 0, 0.99) 0%,
        rgba(0, 0, 0, 0.97) 30%,
        rgba(0, 0, 0, 0.85) 52%,
        rgba(0, 0, 0, 0.58) 72%,
        rgba(0, 0, 0, 0.35) 100%
      );
  }

  .landing__content {
    width: min(100%, 650px);
  }

  .landing__title {
    max-width: 10ch;
  }

  .landing__copy {
    max-width: 480px;
  }
}

/* =========================================================
   MÓVIL
   ========================================================= */

@media (max-width: 600px) {

  .landing {
    min-height: 100svh;

    grid-template-rows: auto 1fr;

    padding:
      24px
      22px
      28px;
  }

  .landing__hero {
    object-position: 68% center;
  }

  /*
    En móvil oscurecemos más toda la fotografía porque
    el texto ocupa una mayor proporción de la pantalla.
  */

  .landing__backdrop {
    background:
      linear-gradient(
        180deg,
        rgba(0, 0, 0, 0.78) 0%,
        rgba(0, 0, 0, 0.66) 25%,
        rgba(0, 0, 0, 0.78) 55%,
        rgba(0, 0, 0, 0.93) 100%
      ),
      linear-gradient(
        90deg,
        rgba(0, 0, 0, 0.90) 0%,
        rgba(0, 0, 0, 0.67) 70%,
        rgba(0, 0, 0, 0.42) 100%
      );
  }

  .landing__logo {
    width: clamp(140px, 42vw, 170px);
  }

  .landing__content {
    align-self: center;

    width: 100%;

    padding:
      48px
      0
      38px;
  }

  .landing__eyebrow {
    margin-bottom: 18px;

    font-size: 0.68rem;
  }

  .landing__title {
    max-width: 9.5ch;

    font-size: clamp(2.65rem, 13vw, 4.4rem);
  }

  .landing__soon {
    margin-top: 28px;

    font-size: clamp(2.45rem, 12vw, 4rem);
  }

  /*
    Por solicitud original, el texto secundario
    puede ocultarse en pantallas pequeñas.
  */

  .landing__copy {
    display: none;
  }

  .landing__status {
    margin-top: 34px;

    gap: 14px;

    font-size: 0.68rem;

    letter-spacing: 0.26em;
  }

  .landing__line {
    width: 42px;
  }
}

/* =========================================================
   PANTALLAS DE POCA ALTURA
   ========================================================= */

@media (max-height: 650px) and (min-width: 601px) {

  .landing__content {
    padding:
      24px
      0;
  }

  .landing__eyebrow {
    margin-bottom: 14px;
  }

  .landing__soon {
    margin-top: 18px;
  }

  .landing__copy {
    margin-top: 18px;
  }

  .landing__status {
    margin-top: 26px;
  }
}

/* =========================================================
   ACCESIBILIDAD
   ========================================================= */

@media (prefers-reduced-motion: reduce) {

  * {
    scroll-behavior: auto !important;
  }
}