:root {
  --white: #ffffff;
  --soft-white: rgba(255, 255, 255, 0.94);
  --muted: rgba(224, 235, 249, 0.80);
  --cyan: #27b7ff;
  --deep: #010815;
  --page-gutter: clamp(14px, 3vw, 42px);
}

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

html {
  width: 100%;
  min-height: 100%;
  background: var(--deep);
  -webkit-text-size-adjust: 100%;
  text-size-adjust: 100%;
}

body {
  width: 100%;
  min-height: 100%;
  min-height: 100dvh;
  margin: 0;
  overflow-x: hidden;
  background: var(--deep);
  color: var(--white);
  font-family: "Orbitron", system-ui, sans-serif;
}

img {
  display: block;
  max-width: 100%;
}

.hero {
  position: relative;
  display: grid;
  place-items: end center;
  width: 100%;
  min-height: 100vh;
  min-height: 100svh;
  min-height: 100dvh;
  padding:
    max(18px, env(safe-area-inset-top))
    max(var(--page-gutter), env(safe-area-inset-right))
    max(18px, env(safe-area-inset-bottom))
    max(var(--page-gutter), env(safe-area-inset-left));
  overflow: hidden;
  isolation: isolate;
  background: var(--deep);
}

/* Capa ambiental: llena siempre la pantalla sin dejar franjas. */
.hero::before {
  content: "";
  position: absolute;
  inset: -4%;
  z-index: -5;
  background:
    linear-gradient(rgba(1, 8, 21, 0.28), rgba(1, 8, 21, 0.28)),
    url("../img/flickersale-fondo-oficial.png") center / cover no-repeat;
  filter: blur(16px) saturate(0.86) brightness(0.68);
  transform: scale(1.06);
}

/* Imagen oficial: completa en móviles y cinematográfica en pantallas anchas. */
.hero__background {
  position: absolute;
  inset: 0;
  z-index: -4;
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: 50% 50%;
  user-select: none;
  pointer-events: none;
  -webkit-user-drag: none;
}

.hero__shade {
  position: absolute;
  inset: 0;
  z-index: -3;
  background:
    linear-gradient(
      to bottom,
      rgba(1, 8, 21, 0.02) 0%,
      rgba(1, 8, 21, 0.00) 48%,
      rgba(1, 8, 21, 0.40) 72%,
      rgba(1, 8, 21, 0.92) 100%
    );
  pointer-events: none;
}

.hero__content {
  width: min(100%, 1160px);
  display: flex;
  flex-direction: column;
  align-items: center;
  text-align: center;
  padding-top: clamp(20px, 6vh, 70px);
}

.announcement {
  max-width: 100%;
  margin: 0;
  padding: clamp(11px, 1.4vw, 17px) clamp(16px, 3vw, 34px);
  border: 1px solid rgba(88, 183, 255, 0.32);
  border-radius: 999px;
  background: rgba(1, 10, 26, 0.54);
  backdrop-filter: blur(8px);
  -webkit-backdrop-filter: blur(8px);
  box-shadow:
    0 10px 35px rgba(0, 0, 0, 0.32),
    inset 0 1px 0 rgba(255, 255, 255, 0.07);
  color: var(--soft-white);
  font-size: clamp(0.72rem, 0.58rem + 0.55vw, 1.25rem);
  font-weight: 500;
  line-height: 1.55;
  letter-spacing: clamp(0.06em, 0.16vw, 0.18em);
  overflow-wrap: anywhere;
  text-transform: uppercase;
  text-shadow: 0 2px 12px rgba(0, 0, 0, 0.82);
}

.announcement span:last-child {
  white-space: nowrap;
}

.signal {
  display: flex;
  gap: 8px;
  margin-top: clamp(10px, 1.5vh, 15px);
}

.signal span {
  width: 5px;
  height: 5px;
  border-radius: 50%;
  background: var(--cyan);
  box-shadow: 0 0 10px rgba(39, 183, 255, 0.95);
  animation: pulse 2.4s ease-in-out infinite;
}

.signal span:nth-child(2) { animation-delay: 0.22s; }
.signal span:nth-child(3) { animation-delay: 0.44s; }

.site-footer {
  margin-top: clamp(12px, 2vh, 24px);
}

.site-footer p {
  max-width: 100%;
  margin: 0;
  color: var(--muted);
  font-size: clamp(0.52rem, 0.46rem + 0.24vw, 0.82rem);
  font-weight: 400;
  line-height: 1.55;
  letter-spacing: 0.04em;
  overflow-wrap: anywhere;
  text-shadow: 0 2px 10px rgba(0, 0, 0, 0.96);
}

@keyframes pulse {
  0%, 100% { transform: scale(0.74); opacity: 0.32; }
  50% { transform: scale(1.08); opacity: 1; }
}

/* Tabletas y teléfonos verticales: se muestra la obra completa sin recortar el logotipo. */
@media (max-aspect-ratio: 4/5) {
  .hero {
    place-items: end center;
  }

  .hero__background {
    object-fit: contain;
    object-position: 50% 42%;
  }

  .hero__shade {
    background:
      linear-gradient(
        to bottom,
        rgba(1, 8, 21, 0.08) 0%,
        rgba(1, 8, 21, 0.04) 52%,
        rgba(1, 8, 21, 0.66) 76%,
        rgba(1, 8, 21, 0.97) 100%
      );
  }

  .announcement {
    border-radius: 18px;
    line-height: 1.65;
  }

  .announcement span:last-child {
    display: block;
    white-space: normal;
  }
}

/* Teléfonos pequeños. */
@media (max-width: 520px) {
  :root {
    --page-gutter: clamp(12px, 4.4vw, 20px);
  }

  .hero__background {
    object-position: 50% 38%;
  }

  .hero__content {
    width: 100%;
  }

  .announcement {
    width: min(100%, 430px);
    padding: 10px 12px;
    letter-spacing: 0.055em;
  }

  .site-footer p {
    width: min(100%, 360px);
    margin-inline: auto;
  }
}

/* Teléfonos muy angostos. */
@media (max-width: 360px) {
  .announcement {
    font-size: 0.67rem;
    letter-spacing: 0.035em;
  }

  .site-footer p {
    font-size: 0.5rem;
  }
}

/* Móviles en horizontal y pantallas de poca altura. */
@media (max-height: 520px) and (orientation: landscape) {
  .hero {
    padding-top: max(10px, env(safe-area-inset-top));
    padding-bottom: max(10px, env(safe-area-inset-bottom));
  }

  .hero__background {
    object-fit: cover;
    object-position: 50% 53%;
  }

  .hero__content {
    padding-top: 8px;
  }

  .announcement {
    padding-block: 8px;
    font-size: clamp(0.62rem, 1.7vw, 0.9rem);
  }

  .signal {
    margin-top: 7px;
  }

  .site-footer {
    margin-top: 7px;
  }
}

/* Monitores ultrapanorámicos: conserva el foco visual en el centro de la marca. */
@media (min-aspect-ratio: 21/9) {
  .hero__background {
    object-position: 50% 52%;
  }
}

@media (min-width: 2200px) {
  .hero__content {
    width: min(88vw, 1540px);
  }
}

@media (prefers-reduced-motion: reduce) {
  .signal span {
    animation: none;
  }
}

@media (prefers-contrast: more) {
  .announcement {
    background: rgba(1, 10, 26, 0.82);
    border-color: rgba(88, 183, 255, 0.72);
  }

  .site-footer p {
    color: rgba(255, 255, 255, 0.96);
  }
}