@import url('https://fonts.googleapis.com/css2?family=Bebas+Neue&family=Space+Grotesk:wght@400;500;600;700&display=swap');
:root {
  --black: #050505;
  --black-soft: #0b0b0d;
  --panel: #111115;
  --panel-light: #17171c;

  --white: #f5f5f5;
  --grey: #9b9ba4;
  --grey-dark: #5e5e68;

  --red: #ef1d2f;
  --red-bright: #ff3142;
  --red-dark: #8e0815;

  --border: rgba(255, 255, 255, 0.1);
  --glow: rgba(239, 29, 47, 0.35);

  --max-width: 1200px;
}

/* RESET */

* {
  box-sizing: border-box;
  margin: 0;
  padding: 0;
}

html {
  scroll-behavior: smooth;
}

body {
  background:
    radial-gradient(
      circle at 80% 10%,
      rgba(239, 29, 47, 0.08),
      transparent 28%
    ),
    var(--black);

  color: var(--white);

font-family: "Space Grotesk", sans-serif;

  line-height: 1.6;

  overflow-x: hidden;
}

a {
  color: inherit;
  text-decoration: none;
}

button,
a {
  -webkit-tap-highlight-color: transparent;
}

.container {
  width: min(90%, var(--max-width));
  margin: 0 auto;
}


/* HEADER */

.header {
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;

  z-index: 100;

  background: rgba(5, 5, 5, 0.78);

  backdrop-filter: blur(18px);
  -webkit-backdrop-filter: blur(18px);

  border-bottom: 1px solid var(--border);
}

.nav-container {
  min-height: 74px;

  display: flex;
  align-items: center;
  justify-content: space-between;

  gap: 30px;
}

.logo {
  font-size: 1.35rem;
  font-weight: 900;

  letter-spacing: 0.22em;

  white-space: nowrap;
}

.logo span {
  color: var(--red);
}

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

  gap: 28px;

  font-size: 0.84rem;
  font-weight: 700;

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

.nav a {
  color: #d6d6da;

  transition:
    color 0.2s ease,
    opacity 0.2s ease;
}

.nav a:hover {
  color: var(--white);
}

.nav-instagram {
  border: 1px solid rgba(255, 255, 255, 0.22);

  padding: 10px 17px;

  border-radius: 999px;
}


/* HERO */

.hero {
  min-height: 100vh;

  position: relative;

  display: flex;
  align-items: center;

  padding:
    140px
    0
    90px;

  overflow: hidden;

  background:
    linear-gradient(
      90deg,
      rgba(5, 5, 5, 0.98) 0%,
      rgba(5, 5, 5, 0.86) 50%,
      rgba(5, 5, 5, 0.65) 100%
    ),
    radial-gradient(
      circle at 80% 45%,
      rgba(239, 29, 47, 0.23),
      transparent 24%
    );
}

.hero::before {
  content: "";

  position: absolute;

  inset: 0;

  opacity: 0.28;

  background-image:
    linear-gradient(
      rgba(255, 255, 255, 0.025) 1px,
      transparent 1px
    ),
    linear-gradient(
      90deg,
      rgba(255, 255, 255, 0.025) 1px,
      transparent 1px
    );

  background-size: 55px 55px;

  mask-image:
    linear-gradient(
      to bottom,
      black,
      transparent
    );
}

.hero::after {
  content: "";

  position: absolute;

  width: 520px;
  height: 520px;

  right: -150px;
  top: 48%;

  transform: translateY(-50%);

  border-radius: 50%;

  border: 1px solid rgba(239, 29, 47, 0.25);

  box-shadow:
    0 0 80px rgba(239, 29, 47, 0.12),
    inset 0 0 70px rgba(239, 29, 47, 0.08);
}

.hero-content {
  position: relative;
  z-index: 5;

  max-width: 900px;
}

.eyebrow,
.section-label {
  color: var(--red-bright);

  font-size: 0.76rem;
  font-weight: 800;

  letter-spacing: 0.22em;

  text-transform: uppercase;
}

.hero h1 {
  margin-top: 22px;

  max-width: 950px;

  font-size: clamp(
    4.2rem,
    10vw,
    9.5rem
  );

  line-height: 0.82;

  font-weight: 950;

  letter-spacing: -0.065em;

  text-transform: uppercase;
}

.hero h1 span {
  color: transparent;

  -webkit-text-stroke:
    1px
    rgba(255, 255, 255, 0.72);

  text-shadow:
    0 0 40px
    rgba(255, 255, 255, 0.05);
}

.hero-text {
  max-width: 600px;

  margin-top: 32px;

  color: #bdbdc5;

  font-size: 1.08rem;
}

.hero-buttons {
  display: flex;
  flex-wrap: wrap;

  gap: 14px;

  margin-top: 38px;
}


/* SIGNAL EFFECT */

.signal {
  position: absolute;

  pointer-events: none;
}

.signal-one {
  width: 2px;
  height: 70%;

  right: 18%;
  top: 12%;

  background:
    linear-gradient(
      transparent,
      rgba(239, 29, 47, 0.9),
      transparent
    );

  box-shadow:
    0 0 30px
    rgba(239, 29, 47, 0.7);

  animation:
    signalPulse
    4s
    ease-in-out
    infinite;
}

.signal-two {
  width: 28%;
  height: 1px;

  right: 3%;
  top: 58%;

  background:
    linear-gradient(
      90deg,
      transparent,
      rgba(239, 29, 47, 0.75),
      transparent
    );

  animation:
    signalPulse
    3.2s
    ease-in-out
    infinite;
}

@keyframes signalPulse {
  0%,
  100% {
    opacity: 0.2;
  }

  50% {
    opacity: 1;
  }
}

.scroll-indicator {
  position: absolute;

  left: 50%;
  bottom: 30px;

  transform: translateX(-50%);

  color: var(--grey);

  font-size: 1.3rem;

  animation:
    scrollMove
    1.8s
    ease-in-out
    infinite;
}

@keyframes scrollMove {
  0%,
  100% {
    transform:
      translateX(-50%)
      translateY(0);
  }

  50% {
    transform:
      translateX(-50%)
      translateY(8px);
  }
}


/* BOTONES */

.button {
  min-height: 48px;

  display: inline-flex;
  align-items: center;
  justify-content: center;

  padding: 13px 23px;

  border-radius: 4px;

  border: 1px solid transparent;

  font-size: 0.8rem;
  font-weight: 800;

  letter-spacing: 0.1em;

  text-transform: uppercase;

  cursor: pointer;

  transition:
    transform 0.2s ease,
    background 0.2s ease,
    box-shadow 0.2s ease;
}

.button:hover {
  transform: translateY(-2px);
}

.button-primary {
  background: var(--red);

  color: white;

  box-shadow:
    0 10px 35px
    rgba(239, 29, 47, 0.2);
}

.button-primary:hover {
  background: var(--red-bright);

  box-shadow:
    0 15px 40px
    rgba(239, 29, 47, 0.32);
}

.button-secondary {
  border-color:
    rgba(255, 255, 255, 0.22);

  color: var(--white);

  background:
    rgba(255, 255, 255, 0.025);
}

.button-secondary:hover {
  background:
    rgba(255, 255, 255, 0.07);
}


/* SECCIONES */

.section {
  position: relative;

  padding:
    110px
    0;

  border-top:
    1px solid
    rgba(255, 255, 255, 0.05);
}

.section-heading {
  display: grid;

  grid-template-columns:
    1fr
    1fr;

  gap: 40px;

  align-items: end;

  margin-bottom: 50px;
}

.section h2 {
  margin-top: 8px;

  font-size: clamp(
    2.5rem,
    5vw,
    5rem
  );

  line-height: 1;

  letter-spacing: -0.045em;

  text-transform: uppercase;
}

.section-description {
  max-width: 480px;

  justify-self: end;

  color: var(--grey);
}


/* NOTICIAS */

.news-grid {
  display: grid;

  grid-template-columns:
    2fr
    1fr;

  gap: 22px;
}

.news-card {
  overflow: hidden;

  border:
    1px solid
    var(--border);

  background:
    linear-gradient(
      150deg,
      rgba(255, 255, 255, 0.045),
      rgba(255, 255, 255, 0.012)
    );

  transition:
    transform 0.25s ease,
    border-color 0.25s ease;
}

.news-card:hover {
  transform:
    translateY(-5px);

  border-color:
    rgba(239, 29, 47, 0.35);
}

.featured-news {
  grid-row:
    span 2;
}

.news-image {
  min-height: 350px;
}

.news-image.small {
  min-height: 180px;
}

.placeholder-image {
  position: relative;

  display: flex;
  align-items: center;
  justify-content: center;

  overflow: hidden;

  background:
    radial-gradient(
      circle at 50% 45%,
      rgba(239, 29, 47, 0.33),
      transparent 25%
    ),
    linear-gradient(
      145deg,
      #16161a,
      #070708
    );
}

.placeholder-image::before {
  content: "";

  position: absolute;

  width: 180px;
  height: 180px;

  border:
    1px solid
    rgba(239, 29, 47, 0.34);

  border-radius: 50%;

  box-shadow:
    0 0 50px
    rgba(239, 29, 47, 0.16);
}

.placeholder-image::after {
  content: "";

  position: absolute;

  width: 1px;
  height: 130%;

  background:
    linear-gradient(
      transparent,
      var(--red),
      transparent
    );

  transform: rotate(35deg);
}

.placeholder-image span {
  position: relative;
  z-index: 2;

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

  font-size: 0.68rem;
  font-weight: 800;

  letter-spacing: 0.25em;
}

.news-content {
  padding: 28px;
}

.news-category {
  margin-bottom: 10px;

  color: var(--red-bright);

  font-size: 0.7rem;
  font-weight: 800;

  letter-spacing: 0.17em;

  text-transform: uppercase;
}

.news-content h3 {
  margin-bottom: 14px;

  font-size: 1.45rem;

  line-height: 1.15;
}

.news-content p:not(.news-category) {
  color: var(--grey);
}

.news-link {
  display: inline-block;

  margin-top: 22px;

  color: var(--white);

  font-size: 0.75rem;
  font-weight: 800;

  letter-spacing: 0.13em;

  text-transform: uppercase;
}


/* COMUNIDAD */

.community-section {
  overflow: hidden;

  background:
    linear-gradient(
      130deg,
      #070708,
      #0d0d10
    );
}

.community-section::before {
  content: "";

  position: absolute;

  width: 420px;
  height: 420px;

  right: -170px;
  top: -90px;

  border-radius: 50%;

  border:
    1px solid
    rgba(239, 29, 47, 0.16);
}

.community-grid {
  display: grid;

  grid-template-columns:
    1.2fr
    0.8fr;

  gap: 90px;

  align-items: center;
}

.community-copy p:not(.section-label) {
  max-width: 620px;

  margin-top: 20px;

  color: var(--grey);
}

.community-copy .button {
  margin-top: 30px;
}

.signal-card {
  position: relative;

  padding: 50px;

  min-height: 360px;

  border:
    1px solid
    rgba(239, 29, 47, 0.25);

  background:
    linear-gradient(
      145deg,
      rgba(239, 29, 47, 0.08),
      rgba(255, 255, 255, 0.015)
    );

  box-shadow:
    0 0 70px
    rgba(239, 29, 47, 0.05);
}

.signal-number {
  color:
    rgba(255, 255, 255, 0.14);

  font-size: 5rem;
  font-weight: 900;

  line-height: 1;
}

.signal-card h3 {
  margin-top: 40px;

  font-size: 2rem;

  text-transform: uppercase;
}

.signal-card > p:not(.signal-number) {
  margin-top: 12px;

  color: var(--grey);
}

.signal-line {
  width: 100%;
  height: 1px;

  margin:
    35px
    0
    18px;

  background:
    linear-gradient(
      90deg,
      var(--red),
      transparent
    );
}

.signal-card span {
  color: var(--grey);

  font-size: 0.66rem;

  letter-spacing: 0.2em;
}


/* RIFA */

.raffle-section {
  background:
    radial-gradient(
      circle at 50% 0%,
      rgba(239, 29, 47, 0.08),
      transparent 30%
    );
}

.raffle-card {
  max-width: 900px;

  margin: 0 auto;

  padding:
    70px
    60px;

  text-align: center;

  border:
    1px solid
    rgba(255, 255, 255, 0.12);

  background:
    rgba(255, 255, 255, 0.018);
}

.raffle-status {
  width: fit-content;

  margin:
    0 auto
    28px;

  padding:
    7px
    13px;

  border:
    1px solid
    rgba(239, 29, 47, 0.4);

  color: var(--red-bright);

  font-size: 0.66rem;
  font-weight: 900;

  letter-spacing: 0.2em;
}

.raffle-card h2 {
  margin-top: 12px;
}

.raffle-card > p:not(.section-label):not(.raffle-note) {
  max-width: 600px;

  margin:
    24px
    auto
    30px;

  color: var(--grey);
}

.button-disabled {
  opacity: 0.45;

  border:
    1px solid
    rgba(255, 255, 255, 0.15);

  color: #aaa;

  background: transparent;

  cursor: not-allowed;
}

.button-disabled:hover {
  transform: none;
}

.raffle-note {
  margin-top: 18px;

  color: var(--grey-dark);

  font-size: 0.78rem;
}


/* FINAL */

.final-section {
  padding:
    130px
    0;

  text-align: center;
}

.final-content {
  max-width: 760px;
}

.final-content p:not(.section-label) {
  max-width: 540px;

  margin:
    24px
    auto
    30px;

  color: var(--grey);
}


/* FOOTER */

.footer {
  padding:
    60px
    0
    25px;

  border-top:
    1px solid
    var(--border);

  background: #030303;
}

.footer-content {
  display: flex;
  justify-content: space-between;

  gap: 40px;
}

.footer-logo {
  margin-bottom: 14px;
}

.footer-content p {
  color: var(--grey);

  font-size: 0.85rem;
}

.footer-links {
  display: flex;
  flex-wrap: wrap;

  gap: 24px;

  font-size: 0.75rem;
  font-weight: 700;

  text-transform: uppercase;

  letter-spacing: 0.1em;
}

.footer-links a {
  color: var(--grey);

  transition:
    color 0.2s ease;
}

.footer-links a:hover {
  color: var(--white);
}

.footer-bottom {
  display: flex;
  justify-content: space-between;

  gap: 30px;

  margin-top: 55px;

  padding-top: 20px;

  border-top:
    1px solid
    rgba(255, 255, 255, 0.06);

  color: var(--grey-dark);

  font-size: 0.72rem;
}


/* RESPONSIVE */

@media (max-width: 900px) {

  .nav {
    display: none;
  }

  .hero {
    min-height: 92vh;
  }

  .hero h1 {
    font-size:
      clamp(
        4rem,
        17vw,
        7rem
      );
  }

  .section-heading {
    grid-template-columns: 1fr;
  }

  .section-description {
    justify-self: start;
  }

  .news-grid {
    grid-template-columns: 1fr;
  }

  .featured-news {
    grid-row: auto;
  }

  .community-grid {
    grid-template-columns: 1fr;

    gap: 50px;
  }

  .raffle-card {
    padding:
      55px
      30px;
  }

}


@media (max-width: 600px) {

  .nav-container {
    min-height: 66px;
  }

  .logo {
    font-size: 1.05rem;
  }

  .hero {
    padding:
      110px
      0
      70px;
  }

  .hero h1 {
    font-size:
      clamp(
        3.8rem,
        19vw,
        6rem
      );
  }

  .hero-text {
    font-size: 0.98rem;
  }

  .hero-buttons {
    flex-direction: column;
  }

  .hero-buttons .button {
    width: 100%;
  }

  .hero::after {
    width: 280px;
    height: 280px;

    right: -150px;
  }

  .section {
    padding:
      80px
      0;
  }

  .section h2 {
    font-size:
      clamp(
        2.3rem,
        12vw,
        4rem
      );
  }

  .news-image {
    min-height: 260px;
  }

  .signal-card {
    padding: 32px;

    min-height: auto;
  }

  .footer-content,
  .footer-bottom {
    flex-direction: column;
  }

}
.logo,
.hero h1,
.section h2,
.news-content h3,
.signal-card h3,
.raffle-card h2 {
  font-family: "Bebas Neue", sans-serif;
  letter-spacing: 0.04em;
}

.hero h1 {
  letter-spacing: 0.01em;
}

.logo {
  letter-spacing: 0.18em;
}


/* =========================================
   NUEVA PORTADA MUSE CHILE
   Logo real + fondo The Wow! Signal
   ========================================= */

/* LOGO PRINCIPAL */

.logo-link {
  display: flex;
  align-items: center;
  flex-shrink: 0;
}

.main-logo {
  display: block;
  width: 150px;
  height: auto;
  object-fit: contain;
}


/* PORTADA CON LA NAVE */

.hero {
  position: relative;

  min-height: 100vh;

  display: flex;
  align-items: center;

  padding: 140px 0 90px;

  overflow: hidden;

  background-image: url("nave-wow-signal.jpg");
  background-size: cover;
  background-position: center center;
  background-repeat: no-repeat;
}


/* CAPA OSCURA PARA PODER LEER EL TEXTO */

.hero-overlay {
  position: absolute;
  inset: 0;
  z-index: 1;

  background:
    linear-gradient(
      90deg,
      rgba(0, 0, 0, 0.94) 0%,
      rgba(0, 0, 0, 0.76) 38%,
      rgba(0, 0, 0, 0.35) 68%,
      rgba(0, 0, 0, 0.24) 100%
    ),
    linear-gradient(
      0deg,
      rgba(0, 0, 0, 0.82) 0%,
      transparent 35%
    );
}


/* QUITAMOS EL EFECTO ANTERIOR QUE TAPABA LA FOTO */

.hero::before {
  opacity: 0.12;
  z-index: 2;
}

.hero::after {
  display: none;
}


/* CONTENIDO SOBRE LA IMAGEN */

.hero-content {
  position: relative;
  z-index: 5;

  max-width: 900px;
}


/* TEXTO PRINCIPAL */

.hero h1 {
  max-width: 850px;

  text-shadow:
    0 5px 25px rgba(0, 0, 0, 0.8),
    0 0 40px rgba(0, 0, 0, 0.45);
}

.hero-text {
  max-width: 560px;

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

  text-shadow:
    0 3px 12px rgba(0, 0, 0, 0.8);
}


/* LA NUEVA ETAPA */

.new-era {
  background:
    radial-gradient(
      circle at 80% 20%,
      rgba(239, 29, 47, 0.08),
      transparent 30%
    ),
    #050505;
}

.new-era-grid {
  display: grid;

  grid-template-columns:
    1.2fr 0.8fr;

  gap: 80px;

  align-items: center;
}

.new-era-text {
  padding-left: 40px;

  border-left:
    1px solid
    rgba(239, 29, 47, 0.45);
}

.new-era-text p {
  color: var(--grey);

  margin-bottom: 20px;

  font-size: 1rem;
}


/* LOGO DEL FOOTER */

.footer-logo-image {
  display: block;

  width: 145px;
  height: auto;

  margin-bottom: 20px;
}


/* AJUSTES PARA CELULAR */

@media (max-width: 900px) {

  .main-logo {
    width: 130px;
  }

  .hero {
    background-position: 60% center;
  }

  .hero-overlay {
    background:
      linear-gradient(
        90deg,
        rgba(0, 0, 0, 0.93) 0%,
        rgba(0, 0, 0, 0.65) 65%,
        rgba(0, 0, 0, 0.42) 100%
      ),
      linear-gradient(
        0deg,
        rgba(0, 0, 0, 0.85),
        transparent 45%
      );
  }

  .new-era-grid {
    grid-template-columns: 1fr;

    gap: 40px;
  }

  .new-era-text {
    padding-left: 20px;
  }

}


@media (max-width: 600px) {

  .main-logo {
    width: 115px;
  }

  .hero {
    min-height: 95vh;

    background-position: 62% center;
  }

  .hero-overlay {
    background:
      linear-gradient(
        90deg,
        rgba(0, 0, 0, 0.9) 0%,
        rgba(0, 0, 0, 0.58) 100%
      ),
      linear-gradient(
        0deg,
        rgba(0, 0, 0, 0.92) 0%,
        transparent 55%
      );
  }

  .footer-logo-image {
    width: 125px;
  }

}