@font-face {
  font-family: "Montserrat";
  src: url("../fonts/Montserrat-Medium.otf") format("opentype");
  font-weight: 500;
  font-style: normal;
  font-display: swap;
}

@font-face {
  font-family: "Montserrat";
  src: url("../fonts/Montserrat-SemiBold.otf") format("opentype");
  font-weight: 600;
  font-style: normal;
  font-display: swap;
}

@font-face {
  font-family: "Montserrat";
  src: url("../fonts/Montserrat-Bold.otf") format("opentype");
  font-weight: 700;
  font-style: normal;
  font-display: swap;
}

@font-face {
  font-family: "Montserrat";
  src: url("../fonts/Montserrat-ExtraBold.otf") format("opentype");
  font-weight: 800;
  font-style: normal;
  font-display: swap;
}

* { box-sizing: border-box; }

html {
  height: 100%;
  overflow: hidden;
  scroll-behavior: smooth;
}

body {
  height: 100%;
  margin: 0;
  overflow: hidden;
  background: #09090b;
  color: #fff;
  font-family: "Montserrat", Arial, Helvetica, sans-serif;
}

.hero {
  position: relative;
  display: flex;
  flex-direction: column;
  height: 100vh;
  height: 100dvh;
  overflow: hidden;
  container-type: inline-size;
  background: #09090b;
}

.bg {
  position: absolute;
  right: 0;
  bottom: 0;
  display: block;
  width: auto;
  height: 100%;
  max-width: none;
}

.bg-mob { display: none; }

.image-glitch {
  position: absolute;
  inset: 0;
  line-height: 0;
  overflow: hidden;
}

.glitch-list {
  position: absolute;
  inset: 0;
  margin: 0;
  padding: 0;
  list-style: none;
  pointer-events: none;
}

.glitch-item {
  position: absolute;
  inset: 0;
  background-color: transparent;
  background-image: url("../img/fondo-escritorio.webp");
  background-position: right bottom;
  background-repeat: no-repeat;
  background-size: auto 100%;
  opacity: 0;
  animation-duration: 5s;
  animation-delay: 1s;
  animation-timing-function: linear;
  animation-iteration-count: infinite;
}

.glitch-item:nth-child(1) {
  background-blend-mode: normal;
  animation-name: glitch-anim-1;
}

.glitch-item:nth-child(2) {
  background-blend-mode: normal;
  animation-name: glitch-anim-2;
}

.glitch-item:nth-child(3) {
  background-blend-mode: overlay;
  animation-name: glitch-anim-3;
}

.glitch-item:nth-child(4) {
  background-blend-mode: overlay;
  animation-name: glitch-anim-flash;
}

.shade {
  position: absolute;
  inset: 0;
  pointer-events: none;
  background: linear-gradient(
    to right,
    #09090b 0%,
    #09090b 30%,
    rgba(9, 9, 11, 0.88) 40%,
    rgba(9, 9, 11, 0.4) 50%,
    rgba(9, 9, 11, 0) 60%
  );
}

.panel {
  position: absolute;
  z-index: 1;
  left: 5.4%;
  top: 7.6%;
  width: 38%;
  color: #fff;
}

.brand {
  display: block;
  width: 15.7cqw;
  line-height: 0;
}

.brand img {
  display: block;
  width: 100%;
  height: auto;
}

.kicker {
  margin: 0.45cqw 0 0;
  color: #acacac;
  font-size: 0.7cqw;
  font-weight: 500;
  letter-spacing: 0.36em;
  text-transform: uppercase;
}

.bar {
  display: block;
  width: 3.9cqw;
  height: 0.28cqw;
  margin: 1.15cqw 0 1.05cqw;
  background: #6827f5;
}

h1 {
  margin: 0;
  font-size: 3.5cqw;
  font-weight: 800;
  line-height: 1.05;
  letter-spacing: -0.034em;
  text-transform: uppercase;
}

h1 span { display: block; }

h1 .accent { color: #6827f5; }

.lead {
  margin: 1.15cqw 0 0;
  max-width: 28cqw;
  color: #f2f2f2;
  font-size: 1.22cqw;
  font-weight: 500;
  line-height: 1.38;
}

.cta {
  display: flex;
  align-items: center;
  gap: 1.05cqw;
  margin-top: 1.45cqw;
}

.btn {
  display: inline-flex;
  align-items: center;
  flex: 0 0 auto;
  gap: 0.7cqw;
  padding: 0.78cqw 1.15cqw;
  border: 0.1cqw solid #6827f5;
  border-radius: 2px;
  color: #fff;
  font-size: 0.74cqw;
  font-weight: 600;
  letter-spacing: 0.08em;
  line-height: 1;
  white-space: nowrap;
  text-decoration: none;
  text-transform: uppercase;
  background: transparent;
}

.btn:hover,
.btn:focus-visible {
  background: #6827f5;
  outline: none;
}

.rule {
  flex: 0 0 auto;
  width: 4.6cqw;
  height: 2px;
  background: rgba(255, 255, 255, 0.85);
}

.notes {
  margin: 0;
  padding: 0;
  list-style: none;
  font-size: 0.68cqw;
  font-weight: 600;
  letter-spacing: 0.14em;
  line-height: 1.45;
  text-transform: uppercase;
}

@media (max-width: 800px) {
  .bg-desk { display: none; }
  .bg-mob { display: block; }

  .bg {
    left: 0;
    width: 100%;
    height: auto;
  }

  .bg,
  .glitch-list {
    opacity: 0.72;
  }

  .glitch-item {
    background-image: url("../img/fondo-movil.webp");
    background-position: center bottom;
    background-size: 100% auto;
  }

  .shade {
    background: linear-gradient(
      to bottom,
      #09090b 0%,
      rgba(9, 9, 11, 0.92) 60%,
      rgba(9, 9, 11, 0.55) 70%,
      rgba(9, 9, 11, 0) 80%
    );
  }

  .panel {
    top: 0;
    left: 0;
    width: 100%;
    padding: 7cqw 6.6cqw 0;
  }

  .brand { width: 37cqw; }

  .kicker {
    margin-top: 1.5cqw;
    font-size: 2.52cqw;
  }

  .bar {
    width: 11.5cqw;
    height: 0.75cqw;
    margin: 3.2cqw 0 4.2cqw;
  }

  h1 {
    font-size: 8.255cqw;
    line-height: 1.08;
    letter-spacing: -0.03em;
  }

  .lead {
    max-width: 74cqw;
    margin-top: 3.6cqw;
    font-size: 3.51cqw;
    font-weight: 500;
    line-height: 1.4;
    color: #f3f3f3;
  }

  .cta {
    flex-wrap: wrap;
    gap: 2.4cqw;
    margin-top: 4.6cqw;
  }

  .notes { font-size: 1.75cqw; }

  .btn {
    width: auto;
    padding: 1.55cqw 2.4cqw;
    border-width: 2px;
    font-size: 2.665cqw;
    letter-spacing: 0.04em;
  }
}

@keyframes glitch-anim-1 {
  0% {
    opacity: 1;
    transform: translate3d(3px, 0, 0);
    clip-path: polygon(0 2%, 100% 2%, 100% 5%, 0 5%);
  }
  2% { clip-path: polygon(0 15%, 100% 15%, 100% 15%, 0 15%); }
  4% { clip-path: polygon(0 10%, 100% 10%, 100% 20%, 0 20%); }
  6% { clip-path: polygon(0 1%, 100% 1%, 100% 2%, 0 2%); }
  8% { clip-path: polygon(0 33%, 100% 33%, 100% 33%, 0 33%); }
  10% { clip-path: polygon(0 44%, 100% 44%, 100% 44%, 0 44%); }
  12% { clip-path: polygon(0 50%, 100% 50%, 100% 20%, 0 20%); }
  14% { clip-path: polygon(0 70%, 100% 70%, 100% 70%, 0 70%); }
  16% { clip-path: polygon(0 80%, 100% 80%, 100% 80%, 0 80%); }
  18% { clip-path: polygon(0 50%, 100% 50%, 100% 55%, 0 55%); }
  20% { clip-path: polygon(0 70%, 100% 70%, 100% 80%, 0 80%); }
  21.9% {
    opacity: 1;
    transform: translate3d(3px, 0, 0);
  }
  22%, 100% {
    opacity: 0;
    transform: translate3d(0, 0, 0);
    clip-path: polygon(0 0, 0 0, 0 0, 0 0);
  }
}

@keyframes glitch-anim-2 {
  0% {
    opacity: 1;
    transform: translate3d(-3px, 0, 0);
    clip-path: polygon(0 25%, 100% 25%, 100% 30%, 0 30%);
  }
  3% { clip-path: polygon(0 3%, 100% 3%, 100% 3%, 0 3%); }
  5% { clip-path: polygon(0 5%, 100% 5%, 100% 20%, 0 20%); }
  7% { clip-path: polygon(0 20%, 100% 20%, 100% 20%, 0 20%); }
  9% { clip-path: polygon(0 40%, 100% 40%, 100% 40%, 0 40%); }
  11% { clip-path: polygon(0 52%, 100% 52%, 100% 59%, 0 59%); }
  13% { clip-path: polygon(0 60%, 100% 60%, 100% 60%, 0 60%); }
  15% { clip-path: polygon(0 75%, 100% 75%, 100% 75%, 0 75%); }
  17% { clip-path: polygon(0 65%, 100% 65%, 100% 40%, 0 40%); }
  19% { clip-path: polygon(0 45%, 100% 45%, 100% 50%, 0 50%); }
  20% { clip-path: polygon(0 14%, 100% 14%, 100% 33%, 0 33%); }
  21.9% {
    opacity: 1;
    transform: translate3d(-3px, 0, 0);
  }
  22%, 100% {
    opacity: 0;
    transform: translate3d(0, 0, 0);
    clip-path: polygon(0 0, 0 0, 0 0, 0 0);
  }
}

@keyframes glitch-anim-3 {
  0% {
    opacity: 1;
    transform: translate3d(0, -3px, 0) scale3d(-1, -1, 1);
    clip-path: polygon(0 1%, 100% 1%, 100% 3%, 0 3%);
  }
  1.5% { clip-path: polygon(0 10%, 100% 10%, 100% 9%, 0 9%); }
  2% { clip-path: polygon(0 5%, 100% 5%, 100% 6%, 0 6%); }
  2.5% { clip-path: polygon(0 20%, 100% 20%, 100% 20%, 0 20%); }
  3% { clip-path: polygon(0 10%, 100% 10%, 100% 10%, 0 10%); }
  5% { clip-path: polygon(0 30%, 100% 30%, 100% 25%, 0 25%); }
  5.5% { clip-path: polygon(0 15%, 100% 15%, 100% 16%, 0 16%); }
  7% { clip-path: polygon(0 40%, 100% 40%, 100% 39%, 0 39%); }
  8% { clip-path: polygon(0 20%, 100% 20%, 100% 21%, 0 21%); }
  9% { clip-path: polygon(0 60%, 100% 60%, 100% 55%, 0 55%); }
  10.5% { clip-path: polygon(0 30%, 100% 30%, 100% 31%, 0 31%); }
  11% { clip-path: polygon(0 70%, 100% 70%, 100% 69%, 0 69%); }
  13% { clip-path: polygon(0 40%, 100% 40%, 100% 41%, 0 41%); }
  14% { clip-path: polygon(0 80%, 100% 80%, 100% 75%, 0 75%); }
  14.5% { clip-path: polygon(0 50%, 100% 50%, 100% 51%, 0 51%); }
  15% { clip-path: polygon(0 90%, 100% 90%, 100% 90%, 0 90%); }
  16% { clip-path: polygon(0 60%, 100% 60%, 100% 60%, 0 60%); }
  18% { clip-path: polygon(0 100%, 100% 100%, 100% 99%, 0 99%); }
  20% { clip-path: polygon(0 70%, 100% 70%, 100% 71%, 0 71%); }
  21.9% {
    opacity: 1;
    transform: translate3d(0, -3px, 0) scale3d(-1, -1, 1);
  }
  22%, 100% {
    opacity: 0;
    transform: translate3d(0, 0, 0);
    clip-path: polygon(0 0, 0 0, 0 0, 0 0);
  }
}

@keyframes glitch-anim-flash {
  0%, 5% {
    opacity: 0.2;
    transform: translate3d(3px, 3px, 0);
  }
  5.5%, 100% {
    opacity: 0;
    transform: translate3d(0, 0, 0);
  }
}

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