:root {
  --text: #ffffff;
  --muted: rgba(255,255,255,.80);
  --green: #2ad05a;
  --red: #d92e2e;
  --wa: #25D366;
}

* {
  box-sizing: border-box;
}

html,
body {
  margin: 0;
  width: 100%;
  height: 100%;
  overflow: hidden;
}

body {
  font-family: Inter, ui-sans-serif, system-ui, -apple-system,
    BlinkMacSystemFont, "Segoe UI", Arial, sans-serif;

  color: var(--text);
  background: #0a0d0a;
}


/* =========================================================
   HERO
========================================================= */

.hero {
  position: relative;
  width: 100%;
  height: 100dvh;
  min-height: 100svh;
  overflow: hidden;
  isolation: isolate;

  display: grid;
  place-items: center;

  padding:
    clamp(18px, 2.5vh, 34px)
    clamp(18px, 3vw, 48px)
    clamp(84px, 12vh, 118px);

  background:
    radial-gradient(
      circle at 13% 18%,
      rgba(60, 165, 79, .45),
      transparent 34%
    ),
    radial-gradient(
      circle at 88% 78%,
      rgba(211, 47, 47, .42),
      transparent 36%
    ),
    radial-gradient(
      circle at 50% 43%,
      rgba(79, 73, 53, .24),
      transparent 34%
    ),
    linear-gradient(
      110deg,
      #183a20 0%,
      #0a0e0b 48%,
      #351111 100%
    );
}


/* Movimiento del fondo */

.hero::before {
  content: "";
  position: absolute;
  inset: -18%;
  z-index: -3;
  pointer-events: none;

  background:
    radial-gradient(
      circle at 27% 38%,
      rgba(44, 216, 84, .20),
      transparent 28%
    ),
    radial-gradient(
      circle at 73% 63%,
      rgba(232, 45, 45, .18),
      transparent 30%
    );

  filter: blur(26px);

  animation:
    ambientGradient
    26s
    ease-in-out
    infinite
    alternate;
}


.hero::after {
  content: "";
  position: absolute;
  inset: 0;
  z-index: -1;
  pointer-events: none;

  background:
    radial-gradient(
      ellipse at center,
      transparent 0%,
      rgba(0,0,0,.08) 48%,
      rgba(0,0,0,.37) 100%
    );
}


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

.content {
  position: relative;
  z-index: 10;

  width: min(94vw, 1120px);
  max-height: calc(100dvh - 120px);

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

  text-align: center;
}


/* LOGO POWER */

.logo {
  display: block;

  width: min(760px, 66vw, 66vh);
  max-width: 92vw;
  height: auto;

  margin:
    0
    auto
    clamp(22px, 3.2vh, 36px);

  filter:
    drop-shadow(
      0
      18px
      30px
      rgba(0,0,0,.34)
    );

  opacity: 0;

  transform:
    translateY(-34px)
    scale(.985);

  animation:
    logoEnter
    .9s
    cubic-bezier(.22,.8,.22,1)
    .08s
    forwards;
}


/* BLOQUE DE TEXTO */

.copy {
  opacity: 0;

  transform:
    translateY(28px);

  animation:
    copyEnter
    .85s
    cubic-bezier(.22,.8,.22,1)
    .35s
    forwards;
}


/* TÍTULO */

h1 {
  margin: 0 auto;

  max-width: 1080px;

  font-size:
    clamp(
      2rem,
      min(5.2vw, 6vh),
      4.3rem
    );

  line-height: .98;
  letter-spacing: -0.05em;

  font-weight: 850;

  text-wrap: balance;

  text-shadow:
    0
    4px
    18px
    rgba(0,0,0,.34);
}


/* =========================================================
   TEXTOS INFORMATIVOS
========================================================= */

.lead,
.contact-line {
  margin:
    clamp(18px, 2.7vh, 28px)
    auto
    0;

  max-width: 900px;

  color: var(--muted);

  font-size:
    clamp(
      .98rem,
      min(1.8vw, 2.2vh),
      1.24rem
    );

  line-height: 1.45;
}


/* Un poco menos de separación entre
   dirección y contacto */

.contact-line + .lead {
  margin-top: 14px;
}


.lead strong,
.contact-line strong {
  color: #fff;
  font-weight: 800;
}


/* =========================================================
   MERCADO LIBRE INLINE
========================================================= */

.ml-inline {
  display: inline-flex;

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

  vertical-align: middle;

  margin-left: 8px;

  padding:
    5px
    12px;

  border-radius: 10px;

  background: #ffe600;

  text-decoration: none;

  box-shadow:
    0
    4px
    12px
    rgba(0,0,0,.18);

  transition:
    transform .2s ease,
    filter .2s ease,
    box-shadow .2s ease;
}


.ml-inline img {
  display: block;

  width: auto;
  height: 28px;

  max-width: 180px;

  object-fit: contain;
}


.ml-inline:hover {
  transform:
    translateY(-1px);

  filter:
    brightness(1.03);

  box-shadow:
    0
    6px
    16px
    rgba(0,0,0,.22);
}


.ml-inline:focus-visible {
  outline:
    2px
    solid
    rgba(255,255,255,.9);

  outline-offset: 4px;
}


/* =========================================================
   DIRECCIÓN
========================================================= */

.address-link {
  color: inherit;

  text-decoration: none;

  text-underline-offset: 4px;
}


.address-link strong {
  display: inline;

  color: #fff;

  font-weight: 800;
}


.address-link:hover,
.address-link:focus-visible {
  text-decoration: underline;
}


.address-link:focus-visible {
  outline:
    2px
    solid
    rgba(255,255,255,.85);

  outline-offset: 4px;

  border-radius: 2px;
}


/* =========================================================
   WHATSAPP Y TELÉFONO
========================================================= */

.whatsapp-link,
.phone-link {
  color: inherit;

  text-decoration: none;

  text-underline-offset: 4px;
}


/* El teléfono nunca se parte en dos */

.phone-link {
  white-space: nowrap;
}


.whatsapp-link strong,
.phone-link strong {
  display: inline;

  color: #fff;

  font-weight: 800;
}


.whatsapp-link:hover,
.whatsapp-link:focus-visible,
.phone-link:hover,
.phone-link:focus-visible {
  text-decoration: underline;
}


.whatsapp-link:focus-visible,
.phone-link:focus-visible {
  outline:
    2px
    solid
    rgba(255,255,255,.85);

  outline-offset: 4px;

  border-radius: 2px;
}


/* =========================================================
   ICONOS INLINE
========================================================= */

.inline-icon {
  display: inline-block;

  width: 19px;
  height: 19px;

  max-width: 19px;
  max-height: 19px;

  object-fit: contain;

  vertical-align: -0.18em;

  margin-right: -1px;
  margin-left: 4px;
}


.inline-icon-wa {
  width: 20px;
  height: 20px;
}


/* =========================================================
   PRODUCTOS DE FONDO
========================================================= */

.product-layer {
  position: absolute;

  inset: 0;

  z-index: 0;

  overflow: hidden;

  pointer-events: none;
}


.ghost {
  position: absolute;

  display: block;

  object-fit: contain;

  opacity: .075;

  filter:
    saturate(.72)
    drop-shadow(
      0
      18px
      24px
      rgba(0,0,0,.12)
    );

  will-change: transform;
}


/* Movimiento muy acotado */

.ghost-headphones {
  width:
    clamp(
      190px,
      18vw,
      330px
    );

  left: -4%;
  top: 4%;

  transform:
    rotate(-5deg);

  animation:
    breatheA
    28s
    ease-in-out
    infinite
    alternate;
}


.ghost-controller {
  width:
    clamp(
      230px,
      23vw,
      400px
    );

  right: -7%;
  top: -4%;

  opacity: .067;

  transform:
    rotate(1deg);

  animation:
    breatheB
    31s
    ease-in-out
    infinite
    alternate;
}


.ghost-speaker {
  width:
    clamp(
      180px,
      16vw,
      290px
    );

  left: -3%;
  bottom: -7%;

  opacity: .082;

  transform:
    rotate(-3deg);

  animation:
    breatheC
    30s
    ease-in-out
    infinite
    alternate;
}


.ghost-chair {
  width:
    clamp(
      190px,
      17vw,
      300px
    );

  right: -3%;
  bottom: -8%;

  opacity: .063;

  transform:
    rotate(1deg);

  animation:
    breatheD
    32s
    ease-in-out
    infinite
    alternate;
}


.ghost-retro {
  width:
    clamp(
      180px,
      17vw,
      305px
    );

  left: 7%;
  bottom: 9%;

  opacity: .055;

  transform:
    rotate(-2deg);

  animation:
    breatheE
    29s
    ease-in-out
    infinite
    alternate;
}


.ghost-watch {
  width:
    clamp(
      120px,
      10vw,
      180px
    );

  right: 12%;
  bottom: 11%;

  opacity: .052;

  transform:
    rotate(7deg);

  animation:
    breatheF
    27s
    ease-in-out
    infinite
    alternate;
}


.ghost-mic {
  width:
    clamp(
      140px,
      12vw,
      215px
    );

  left: 18%;
  bottom: -2%;

  opacity: .05;

  transform:
    rotate(-4deg);

  animation:
    breatheG
    33s
    ease-in-out
    infinite
    alternate;
}


/* =========================================================
   CINTA DE CATEGORÍAS
========================================================= */

.category-tape {
  position: absolute;

  z-index: 12;

  left: 0;
  right: 0;
  bottom: 0;

  overflow: hidden;

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

  border-bottom:
    1px
    solid
    rgba(255,255,255,.05);

  background:
    rgba(4, 7, 5, .78);

  opacity: 0;

  animation:
    tapeEnter
    .65s
    ease-out
    .85s
    forwards;
}


.tape-track {
  width: max-content;

  display: flex;

  will-change: transform;

  transform:
    translate3d(0,0,0);

  backface-visibility: hidden;

  -webkit-backface-visibility: hidden;

  animation:
    marquee
    34s
    linear
    infinite;
}


.tape-group {
  display: flex;

  align-items: center;

  flex-shrink: 0;

  padding: 13px 0;
}


.tape-group span {
  padding:
    0
    clamp(
      18px,
      2vw,
      32px
    );

  color:
    rgba(255,255,255,.82);

  font-size:
    clamp(
      .82rem,
      1vw,
      .98rem
    );

  font-weight: 600;

  letter-spacing: .04em;

  text-transform: uppercase;

  white-space: nowrap;
}


.tape-group i {
  color:
    rgba(42,208,90,.82);

  font-style: normal;

  font-size: .85rem;
}


/* =========================================================
   BOTÓN FLOTANTE WHATSAPP
========================================================= */

.floating-wa {
  position: fixed;

  right:
    clamp(
      14px,
      2vw,
      24px
    );

  bottom:
    clamp(
      64px,
      8vh,
      82px
    );

  z-index: 20;

  width:
    clamp(
      54px,
      4.1vw,
      62px
    );

  aspect-ratio: 1;

  border-radius: 50%;

  display: grid;

  place-items: center;

  color: #fff;

  background: var(--wa);

  text-decoration: none;

  box-shadow:
    0
    12px
    28px
    rgba(0,0,0,.30),
    0
    0
    0
    5px
    rgba(37,211,102,.11);

  opacity: 0;

  transform:
    translateY(16px);

  animation:
    waEnter
    .55s
    ease-out
    1s
    forwards;
}


.floating-wa svg {
  width: 52%;
  height: 52%;

  fill: currentColor;
}


/* =========================================================
   ESPACIADO EN PANTALLAS GRANDES
========================================================= */

@media (min-width: 901px) {

  /*
    Más aire entre el título principal
    y el primer bloque de información.
  */

  .copy > h1 + .lead {
    margin-top:
      clamp(
        28px,
        3.6vh,
        42px
      );
  }

}


/* =========================================================
   ANIMACIONES
========================================================= */

@keyframes logoEnter {

  to {
    opacity: 1;

    transform:
      translateY(0)
      scale(1);
  }

}


@keyframes copyEnter {

  to {
    opacity: 1;

    transform:
      translateY(0);
  }

}


@keyframes tapeEnter {

  to {
    opacity: 1;
  }

}


@keyframes waEnter {

  to {
    opacity: 1;

    transform:
      translateY(0);
  }

}


@keyframes ambientGradient {

  0% {

    transform:
      translate3d(
        -1.4%,
        -1%,
        0
      )
      scale(1);

  }

  100% {

    transform:
      translate3d(
        1.4%,
        1.2%,
        0
      )
      scale(1.035);

  }

}


@keyframes breatheA {

  to {
    transform:
      translate3d(
        10px,
        7px,
        0
      )
      rotate(-4deg);
  }

}


@keyframes breatheB {

  to {
    transform:
      translate3d(
        -9px,
        9px,
        0
      )
      rotate(.5deg);
  }

}


@keyframes breatheC {

  to {
    transform:
      translate3d(
        9px,
        -8px,
        0
      )
      rotate(-2deg);
  }

}


@keyframes breatheD {

  to {
    transform:
      translate3d(
        -8px,
        -7px,
        0
      )
      rotate(1.5deg);
  }

}


@keyframes breatheE {

  to {
    transform:
      translate3d(
        7px,
        -5px,
        0
      )
      rotate(-1.5deg);
  }

}


@keyframes breatheF {

  to {
    transform:
      translate3d(
        -6px,
        -7px,
        0
      )
      rotate(6deg);
  }

}


@keyframes breatheG {

  to {
    transform:
      translate3d(
        8px,
        -5px,
        0
      )
      rotate(-3deg);
  }

}


@keyframes marquee {

  from {
    transform:
      translate3d(
        0,
        0,
        0
      );
  }

  to {
    transform:
      translate3d(
        -50%,
        0,
        0
      );
  }

}


/* =========================================================
   RESPONSIVE
========================================================= */

@media (max-width: 900px) {

  .hero {
    padding-bottom: 84px;
  }


  .logo {
    width:
      min(
        620px,
        80vw,
        58vh
      );
  }


  .ghost {
    opacity: .06;
  }


  .ghost-watch {
    display: none;
  }


  .ghost-mic {
    left: 7%;
  }

}


/* =========================================================
   MOBILE
========================================================= */

@media (max-width: 620px) {

  .hero {
    padding:
      18px
      20px
      80px;
  }


  /*
    El ancho pasa a depender del espacio real
    disponible dentro del padding del hero.
  */

  .content {
    width: 100%;
    max-width: 100%;
  }


  .logo {
    width:
      min(
        430px,
        88vw,
        47vh
      );
  }


  h1 {
    font-size:
      clamp(
        1.85rem,
        9vw,
        2.9rem
      );

    /*
      Un poco más de interlineado cuando
      el título ocupa dos líneas.
    */
    line-height: 1.03;
  }


  /*
    Más aire entre líneas cuando un texto
    que era de una línea pasa a ocupar dos.
  */

  .lead,
  .contact-line {
    max-width: 100%;

    line-height: 1.6;
  }


  /*
    Mercado Libre
  */

  .ml-inline {
    margin-left: 6px;

    padding:
      4px
      10px;
  }


  .ml-inline img {
    height: 24px;

    max-width: 150px;
  }


  /*
    Iconos
  */

  .inline-icon {
    width: 18px;
    height: 18px;
  }


  .inline-icon-wa {
    width: 19px;
    height: 19px;
  }


  /*
    El teléfono nunca se quiebra.
    Si no entra, baja completo.
  */

  .phone-link {
    white-space: nowrap;
  }


  /*
    Productos decorativos
  */

  .ghost-headphones {
    width: 150px;

    left: -20%;
    top: 8%;
  }


  .ghost-controller {
    width: 190px;

    right: -27%;
    top: 7%;
  }


  .ghost-speaker {
    width: 135px;

    left: -14%;
    bottom: 8%;
  }


  .ghost-chair {
    width: 150px;

    right: -17%;
    bottom: 9%;
  }


  .ghost-retro,
  .ghost-watch,
  .ghost-mic {
    display: none;
  }


  .tape-group {
    padding: 11px 0;
  }


  .floating-wa {
    bottom: 60px;
  }

}


/* =========================================================
   CELULARES ANGOSTOS
========================================================= */

@media (max-width: 500px) {

  /*
    En vez de agregar margin al body,
    aumentamos el espacio interior del hero.
    Evita overflow horizontal.
  */

  .hero {
    padding-left: 24px;
    padding-right: 24px;
  }


  /*
    Un poco más de aire todavía en textos
    que se parten en dos líneas.
  */

  .lead,
  .contact-line {
    line-height: 1.65;
  }

}


/* =========================================================
   PANTALLAS BAJAS
========================================================= */

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

  .hero {
    padding-top: 8px;

    padding-bottom: 70px;
  }


  .logo {
    width:
      min(
        600px,
        60vw,
        55vh
      );

    margin-bottom:
      clamp(
        12px,
        2vh,
        18px
      );
  }


  h1 {
    font-size:
      clamp(
        1.8rem,
        min(4vw, 5.2vh),
        3.15rem
      );
  }


  .lead,
  .contact-line {
    margin-top:
      clamp(
        10px,
        1.8vh,
        16px
      );
  }


  .contact-line + .lead {
    margin-top: 10px;
  }


  .ml-inline img {
    height: 24px;
  }

}


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

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

  .hero::before,
  .ghost,
  .tape-track,
  .logo,
  .copy,
  .category-tape,
  .floating-wa {
    animation: none !important;
  }


  .logo,
  .copy,
  .category-tape,
  .floating-wa {
    opacity: 1;

    transform: none;
  }

}