:root {
  --pink: #f50069;
  --blue: #0077d8;
  --deep: #03172d;
  --deep-2: #061f3d;
  --white: #ffffff;
  --muted: #b8cee2;
}

* {
  box-sizing: border-box;
}

html {
  scroll-behavior: smooth;
}

body {
  margin: 0;
  min-height: 100vh;
  font-family: "Montserrat", system-ui, sans-serif;
  color: var(--white);
  background:
    radial-gradient(
      circle at 50% 15%,
      rgba(0, 119, 216, 0.22),
      transparent 35%
    ),
    #07111f;
}

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

button {
  font: inherit;
}

.site-shell {
  width: 100%;
  overflow: hidden;
}


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

.hero {
  position: relative;

  width: 100%;
  min-height: 100vh;
  min-height: 100svh;

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

  isolation: isolate;
  overflow: hidden;

  background:
    linear-gradient(
      90deg,
      rgba(1, 19, 42, 0.82),
      rgba(0, 70, 130, 0.36),
      rgba(0, 22, 53, 0.78)
    ),
    radial-gradient(
      circle at 50% 38%,
      rgba(0, 142, 255, 0.62),
      transparent 34%
    ),
    linear-gradient(
      135deg,
      #02162d 0%,
      #00498d 48%,
      #001b3d 100%
    );
}

.hero::before {
  content: "";

  position: absolute;
  inset: 0;

  z-index: -4;

  background:
    linear-gradient(
      90deg,
      transparent 0 17%,
      rgba(255, 255, 255, 0.06) 18% 18.2%,
      transparent 18.4% 82%,
      rgba(255, 255, 255, 0.04) 82.2% 82.4%,
      transparent 82.5%
    ),
    linear-gradient(
      rgba(255, 255, 255, 0.05),
      transparent 40%
    );

  opacity: 0.55;
}

.hero::after {
  content: "";

  position: absolute;

  left: 50%;
  top: 48%;
  bottom: 0;

  width: min(460px, 50vw);

  transform: translateX(-50%);

  border-radius: 0;

  z-index: -3;

  background: #071828;

  filter:
    drop-shadow(
      0 16px 30px rgba(0, 0, 0, 0.3)
    );

  opacity: 0.96;
}

.hero-overlay {
  position: absolute;
  inset: 0;

  z-index: -2;

  background:
    linear-gradient(
      180deg,
      rgba(0, 0, 0, 0.08),
      rgba(0, 0, 0, 0.28) 76%,
      rgba(0, 0, 0, 0.48)
    );
}


/* ==========================================================
   TOPBAR
   ========================================================== */

.topbar {
  position: absolute;

  top: 0;
  left: 0;

  width: 100%;
  min-height: 92px;

  display: grid;

  grid-template-columns:
    64px 150px 1fr 150px;

  align-items: center;

  gap: 18px;

  padding: 0 4.5vw;

  z-index: 50;

  background:
    linear-gradient(
      180deg,
      rgba(0, 18, 40, 0.94),
      rgba(0, 25, 58, 0.24),
      transparent
    );
}

.menu-btn {
  width: 42px;
  height: 42px;

  border: 0;

  background: transparent;

  display: grid;
  place-content: center;

  gap: 5px;

  cursor: pointer;
}

.menu-btn span {
  width: 22px;
  height: 2px;

  background: #fff;

  display: block;
}

.logo {
  display: inline-flex;

  align-items: center;

  gap: 8px;

  font-weight: 800;
}

.logo-mark {
  width: 34px;
  height: 34px;

  border: 2px solid #fff;

  border-radius: 50%;

  display: grid;
  place-items: center;

  font-size: 14px;
}

.logo-text {
  letter-spacing: 0.16em;
  font-size: 12px;
}

.nav {
  display: flex;

  justify-content: center;

  gap: clamp(
    14px,
    2.2vw,
    34px
  );
}

.nav a {
  font-size: 10px;

  font-weight: 700;

  letter-spacing: 0.07em;

  opacity: 0.94;
}

.nav a:hover {
  color: #70c7ff;
}

.socials {
  display: flex;

  justify-content: flex-end;

  gap: 8px;
}

.socials a {
  width: 28px;
  height: 28px;

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

  border-radius: 50%;

  display: grid;
  place-items: center;

  font-size: 12px;

  font-weight: 700;
}


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

.hero-content {
  position: relative;

  z-index: 4;

  width: 100%;
  max-width: 800px;

  text-align: center;

  padding:
    120px
    24px
    190px;
}

.eyebrow {
  margin: 0 0 12px;

  font-size: 11px;

  letter-spacing: 0.32em;

  font-weight: 700;

  color: #b7dcff;
}

.hero-content h1 {
  width: 100%;

  margin: 0;

  display: flex;

  justify-content: center;

  align-items: center;
}

.hero-content h1 img {
  display: block;

  width: min(
    620px,
    80vw
  );

  max-width: 100%;

  height: auto;

  margin: 0 auto;

  object-fit: contain;

  filter:
    drop-shadow(
      0 10px 28px
      rgba(0, 0, 0, 0.35)
    );
}

.hero-logo {
  display: block;

  width: min(
    620px,
    80vw
  );

  max-width: 100%;

  height: auto;

  margin: 0 auto;
}

.subtitle {
  max-width: 600px;

  margin:
    18px auto
    28px;

  color: #d7e9f7;

  line-height: 1.8;

  font-size: 14px;
}

.cta {
  display: inline-flex;

  align-items: center;

  justify-content: center;

  min-width: 142px;

  height: 48px;

  padding: 0 24px;

  background: var(--pink);

  border-radius: 5px;

  font-size: 10px;

  letter-spacing: 0.16em;

  font-weight: 800;

  box-shadow:
    0 12px 26px
    rgba(245, 0, 105, 0.28);
}


/* ==========================================================
   TORNAMESA
   ========================================================== */

.player-button {
  position: fixed;

  left: 20px;
  right: auto;

  bottom: 18vh;

  width: 230px;
  height: 230px;

  min-width: 230px;
  min-height: 230px;

  padding: 0;
  margin: 0;

  border: 0;

  background: transparent;

  cursor: pointer;

  z-index: 30;

  overflow: visible;

  display: block;

  box-sizing: border-box;

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

  transition:
    width 0.35s ease,
    height 0.35s ease,
    transform 0.35s ease,
    filter 0.25s ease;
}


/* ==========================================================
   IMÁGENES DE LA TORNAMESA
   ========================================================== */

.player-button > img.turntable-base,
.player-button > img.turntable-disc,
.player-button > img.turntable-arm {
  position: absolute !important;

  display: block !important;

  margin: 0 !important;
  padding: 0 !important;

  max-width: none !important;

  min-width: 0 !important;
  min-height: 0 !important;

  pointer-events: none !important;

  box-sizing: border-box !important;
}


/* ==========================================================
   MESA
   ========================================================== */

.player-button > img.turntable-base {
  left: 0 !important;
  top: 0 !important;

  width: 100% !important;
  height: 100% !important;

  object-fit: fill !important;

  z-index: 1;
}


/* ==========================================================
   DISCO
   ========================================================== */

.player-button > img.turntable-disc {
  left: 8% !important;
  top: 7% !important;

  width: 64% !important;
  height: 64% !important;

  object-fit: fill !important;

  z-index: 2;

  transform-origin: center center;

  transition:
    width 0.35s ease,
    height 0.35s ease,
    left 0.35s ease,
    top 0.35s ease;
}


/* ==========================================================
   DISCO GIRANDO
   ========================================================== */

.player-button.playing > img.turntable-disc {
  animation:
    spin-record
    2.2s
    linear
    infinite;
}

@keyframes spin-record {
  from {
    transform: rotate(0deg);
  }

  to {
    transform: rotate(360deg);
  }
}


/* ==========================================================
   BRAZO
   ========================================================== */

.player-button > img.turntable-arm {
  left: 40% !important;
  top: 15% !important;

  width: 50% !important;
  height: 50% !important;

  object-fit: fill !important;

  z-index: 3;
}


/* ==========================================================
   BOTÓN PLAY
   ========================================================== */

.player-button > .play-overlay {
  position: absolute !important;

  left: 31.5% !important;
  top: 30.5% !important;

  width: 35px;
  height: 35px;

  display: grid;

  place-items: center;

  border-radius: 50%;

  background:
    rgba(250, 153, 44, 1);

  color: white;

  font-size: 13px;

  box-shadow:
    0 5px 15px
    rgba(250, 153, 44, 0.45);

  pointer-events: none;

  z-index: 4;

  transition:
    background 0.2s ease,
    transform 0.2s ease;
}

.player-button.playing > .play-overlay {
  background:
    rgba(250, 153, 44, 1);

  font-size: 12px;
}


/* ==========================================================
   EN VIVO
   FIJO DENTRO DEL HERO
   ========================================================== */

.live-card {
  position: absolute !important;

  left: auto !important;
  right: 25px !important;

  bottom: 18vh !important;

  z-index: 40;

  display: flex;

  align-items: center;

  gap: 10px;

  padding: 12px 16px;

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

  border-radius: 9px;

  background:
    rgba(3, 18, 35, 0.72);

  backdrop-filter: blur(8px);

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

  box-shadow:
    0 10px 30px
    rgba(0, 0, 0, 0.18);

  box-sizing: border-box;
}

.live-dot {
  width: 9px;
  height: 9px;

  flex: 0 0 9px;

  border-radius: 50%;

  background: #7d8a96;

  box-shadow:
    0 0 0 transparent;
}

.live-dot.active {
  background: #ff176f;

  box-shadow:
    0 0 12px
    rgba(245, 0, 105, 0.85);
}

.live-card > div:last-child {
  display: flex;

  flex-direction: column;

  gap: 3px;
}

.live-label {
  font-size: 9px;

  letter-spacing: 0.14em;

  color: #7190aa;
}

.live-card strong {
  font-size: 11px;

  color: #ffffff;
}


/* ==========================================================
   LINEAS DECORATIVAS
   ========================================================== */

.decor-lines {
  position: absolute;

  right: 5vw;

  top: 50%;

  transform:
    translateY(-50%);

  z-index: 5;

  display: grid;

  gap: 19px;
}

.decor-lines span {
  display: block;

  width: 30px;
  height: 2px;

  background: #fff;
}


/* ==========================================================
   WAVES
   ========================================================== */

.wave {
  position: absolute;

  left: -12%;
  right: -12%;

  bottom: 18%;

  height: 140px;

  z-index: 1;

  opacity: 0.9;

  filter:
    drop-shadow(
      0 0 12px
      rgba(245, 0, 105, 0.18)
    );
}

.wave::before,
.wave::after {
  content: "";

  position: absolute;

  inset: 0;

  border-radius: 50%;

  border-top:
    4px solid
    var(--pink);

  transform:
    rotate(-2deg)
    scaleY(0.65);
}

.wave::after {
  border-top-width: 2px;

  transform:
    translateY(12px)
    rotate(2deg)
    scaleY(0.75);

  opacity: 0.55;
}

.wave-b {
  bottom: 21%;

  opacity: 0.5;

  transform:
    scaleY(0.7);
}

.wave-b::before,
.wave-b::after {
  border-top-color:
    #7b39ff;
}


/* ==========================================================
   CONTENT
   ========================================================== */

.content {
  background: #071421;

  padding: 92px 22px;

  color: #eaf5ff;
}

.content.alt {
  background: #0a1b2c;
}

.content-inner {
  max-width: 980px;

  margin: 0 auto;
}

.section-kicker {
  color: #47aef8;

  font-size: 10px;

  letter-spacing: 0.28em;

  font-weight: 800;
}

.content h2 {
  font-size:
    clamp(
      28px,
      4vw,
      48px
    );

  margin:
    8px 0 18px;
}

.content p {
  color: #a9bfd2;

  line-height: 1.85;

  max-width: 760px;
}

.stream-box {
  margin-top: 26px;

  padding:
    18px 20px;

  border:
    1px solid
    #173b5b;

  border-radius: 10px;

  display: inline-flex;

  flex-direction: column;

  gap: 5px;

  background:
    #06111d;
}

.stream-box span {
  color: #6e93af;

  font-size: 10px;

  text-transform: uppercase;

  letter-spacing: 0.14em;
}

.stream-box strong {
  font-size: 13px;
}


/* ==========================================================
   BOTÓN MINIMIZAR
   ========================================================== */

.minimize-button {
  display: none;

  position: absolute;

  right: -5px;
  top: -5px;

  width: 30px;
  height: 30px;

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

  border-radius: 50%;

  background:
    rgba(3, 18, 35, 0.92);

  border:
    2px solid
    rgba(255, 255, 255, 0.85);

  color: white;

  font-family: Arial, sans-serif;

  font-size: 22px;

  font-weight: 700;

  line-height: 1;

  cursor: pointer;

  z-index: 50;

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

  transition:
    transform 0.2s ease,
    background 0.2s ease;
}

.minimize-button:active {
  transform:
    scale(0.9);
}


/* ==========================================================
   TORNAMESA MINIMIZADA
   ========================================================== */

.player-button.minimized > .turntable-base,
.player-button.minimized > .turntable-arm,
.player-button.auto-minimized > .turntable-base,
.player-button.auto-minimized > .turntable-arm {
  opacity: 0 !important;

  visibility: hidden !important;

  pointer-events: none !important;
}


/* ==========================================================
   DISCO MINIMIZADO
   ========================================================== */

.player-button.auto-minimized {
  width: 85px !important;
  height: 85px !important;

  min-width: 85px !important;
  min-height: 85px !important;

  transform:
    scale(0.95);
}

.player-button.auto-minimized > .turntable-disc {
  left: 0 !important;
  top: 0 !important;

  width: 100% !important;
  height: 100% !important;
}

.player-button.auto-minimized > .play-overlay {
  left: 31.5% !important;
  top: 31.5% !important;
}


/* ==========================================================
   MINIMIZADO MANUAL
   ========================================================== */

.player-button.minimized {
  width: 85px !important;
  height: 85px !important;

  min-width: 85px !important;
  min-height: 85px !important;
}

.player-button.minimized > .turntable-disc {
  left: 0 !important;
  top: 0 !important;

  width: 100% !important;
  height: 100% !important;
}

.player-button.minimized > .play-overlay {
  left: 31.5% !important;
  top: 31.5% !important;
}


/* ==========================================================
   ICONO + CUANDO ESTÁ MINIMIZADO
   ========================================================== */

.player-button.minimized > .minimize-button {
  font-size: 0;
}

.player-button.minimized > .minimize-button::after {
  content: "+";

  font-size: 20px;

  font-weight: 700;
}


/* ==========================================================
   TABLETS
   ========================================================== */

@media (max-width: 980px) {

  .hero {
    min-height: 100svh;
  }

  .topbar {
    grid-template-columns:
      50px 1fr 120px;
  }

  .nav {
    position: absolute;

    top: 78px;

    left: 5vw;
    right: 5vw;

    display: none;

    flex-direction: column;

    align-items: center;

    padding: 22px;

    border-radius: 10px;

    background:
      rgba(2, 18, 40, 0.96);
  }

  .nav.open {
    display: flex;
  }

  .socials {
    grid-column: 3;
  }

  .logo {
    grid-column: 2;
  }


  /* ----------------------------------------------------------
     TORNAMESA TABLET
     ---------------------------------------------------------- */

  .player-button {
    left: 20px !important;
    right: auto !important;

    bottom: 14vh !important;

    width: 190px;
    height: 190px;

    min-width: 190px;
    min-height: 190px;
  }


  /* ----------------------------------------------------------
     EN VIVO TABLET
     
     IMPORTANTE:
     TOTALMENTE INDEPENDIENTE DE LA MESA
     ---------------------------------------------------------- */

  .live-card {
  position: absolute !important;

  left: auto !important;
  right: 20px !important;

  bottom: 14vh !important;

  max-width: 240px;

  padding: 10px 12px;
}


  .hero-content {
    padding:
      110px
      30px
      180px;
  }

  .hero-content h1 img,
  .hero-logo {
    width:
      min(
        560px,
        78vw
      );
  }

  .minimize-button {
    display: flex;
  }
}


/* ==========================================================
   TELÉFONOS
   ========================================================== */

@media (max-width: 650px) {

  .hero {
    width: 100%;

    height: 100svh;

    min-height: 100svh;

    max-height: 100svh;

    overflow: hidden;
  }


  /* ----------------------------------------------------------
     TOPBAR
     ---------------------------------------------------------- */

  .topbar {
    grid-template-columns:
      44px 1fr 90px;

    padding:
      0 18px;

    min-height: 76px;
  }

  .logo-text {
    display: none;
  }

  .socials {
    gap: 5px;
  }

  .socials a {
    width: 25px;
    height: 25px;
  }


  /* ----------------------------------------------------------
     CONTENIDO
     ---------------------------------------------------------- */

  .hero-content {
    width: 100%;

    padding:
      96px
      16px
      185px;
  }

  .eyebrow {
    font-size: 10px;

    letter-spacing: 0.28em;

    margin-bottom: 12px;
  }


  /* ----------------------------------------------------------
     LOGO RESPONSIVE
     ---------------------------------------------------------- */

  .hero-content h1 img,
  .hero-logo {
    display: block;

    width: 82vw;

    max-width: 390px;

    height: auto;

    object-fit: contain;
  }


  .subtitle {
    width: 100%;

    max-width: 350px;

    margin:
      14px auto
      18px;

    font-size: 12px;

    line-height: 1.55;
  }

  .cta {
    min-width: 135px;

    height: 44px;

    padding:
      0 20px;

    font-size: 9px;
  }


  /* ========================================================
     TORNAMESA MÓVIL
     IZQUIERDA
     ======================================================== */

  .player-button {
    position: fixed !important;

    left: 8px !important;
    right: auto !important;

    bottom: 78px !important;

    width: 145px !important;
    height: 145px !important;

    min-width: 145px !important;
    min-height: 145px !important;

    margin: 0 !important;

    transform: none !important;

    z-index: 30 !important;
  }


  /* ========================================================
     EN VIVO MÓVIL
     DERECHA
     
     COMPLETAMENTE SEPARADO DE LA MESA
     ======================================================== */

  .live-card {
  position: absolute !important;

  left: auto !important;
  right: 10px !important;

  bottom: 105px !important;

  width: auto !important;

  min-width: 115px;
  max-width: 43vw;

  margin: 0 !important;

  padding: 9px 10px;

  gap: 7px;

  z-index: 40 !important;
}


  .live-dot {
    width: 8px;
    height: 8px;

    flex:
      0 0 8px;
  }

  .live-label {
    font-size: 8px;

    letter-spacing:
      0.12em;
  }

  .live-card strong {
    font-size: 9px;

    line-height: 1.25;
  }


  /* --------------------------------------------------------
     PLAY
     -------------------------------------------------------- */

  .player-button > .play-overlay {
    width: 31px;
    height: 31px;

    left: 31.5% !important;
    top: 30.5% !important;

    font-size: 11px;
  }


  /* --------------------------------------------------------
     MINIMIZAR
     -------------------------------------------------------- */

  .minimize-button {
    display: flex;

    width: 27px;
    height: 27px;

    right: -4px;
    top: -4px;

    font-size: 19px;
  }


  /* --------------------------------------------------------
     DECORACIÓN
     -------------------------------------------------------- */

  .decor-lines {
    display: none;
  }


  /* --------------------------------------------------------
     ONDA
     -------------------------------------------------------- */

  .wave {
    bottom: 13%;

    height: 90px;
  }


  /* ========================================================
     MESA MINIMIZADA EN MÓVIL
     ======================================================== */

  .player-button.auto-minimized,
  .player-button.minimized {

    width: 85px !important;
    height: 85px !important;

    min-width: 85px !important;
    min-height: 85px !important;

    left: 8px !important;

    bottom: 78px !important;
  }

  .player-button.auto-minimized > .turntable-disc,
  .player-button.minimized > .turntable-disc {

    left: 0 !important;
    top: 0 !important;

    width: 100% !important;
    height: 100% !important;
  }

  .player-button.auto-minimized > .play-overlay,
  .player-button.minimized > .play-overlay {

    left: 31.5% !important;
    top: 31.5% !important;
  }
}


/* ==========================================================
   TELÉFONOS PEQUEÑOS
   ========================================================== */

@media (max-width: 380px) {

  .hero-content {
    padding:
      92px
      12px
      175px;
  }

  .eyebrow {
    font-size: 9px;

    letter-spacing:
      0.24em;
  }


  /* LOGO */

  .hero-content h1 img,
  .hero-logo {

    width: 78vw;

    max-width: 330px;
  }


  .subtitle {
    max-width: 310px;

    font-size: 11px;

    line-height: 1.45;
  }

  .cta {
    height: 42px;

    min-width: 125px;

    font-size: 8px;
  }


  /* ========================================================
     TORNAMESA PEQUEÑA
     ======================================================== */

  .player-button {

    left: 5px !important;
    right: auto !important;

    bottom: 70px !important;

    width: 125px !important;
    height: 125px !important;

    min-width: 125px !important;
    min-height: 125px !important;
  }


  /* ========================================================
     EN VIVO PEQUEÑO
     DERECHA
     ======================================================== */

  @media (max-width: 380px) {

  .live-card {
    position: absolute !important;

    left: auto !important;
    right: 8px !important;

    bottom: 95px !important;

    width: auto !important;

    min-width: 105px;

    max-width: 43vw;

    padding: 7px 8px;

    gap: 6px;
  }

}


  /* PLAY */

  .player-button > .play-overlay {

    width: 28px;
    height: 28px;

    font-size: 10px;
  }


  /* ========================================================
     MINIMIZADO
     ======================================================== */

  .player-button.auto-minimized,
  .player-button.minimized {

    width: 75px !important;
    height: 75px !important;

    min-width: 75px !important;
    min-height: 75px !important;

    left: 5px !important;

    bottom: 70px !important;
  }
}


/* ==========================================================
   PC GRANDE
   ========================================================== */

@media (min-width: 981px) {

  .minimize-button {
    display: none !important;
  }

}


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

.player-button > .turntable-base,
.player-button > .turntable-arm {

  transition:
    opacity 0.35s ease,
    visibility 0.35s ease;
}

.player-button > .turntable-disc {

  transition:
    width 0.35s ease,
    height 0.35s ease,
    left 0.35s ease,
    top 0.35s ease;
}


/* ==========================================================
   ANUNCIO DE CONTRATACIONES
   ========================================================== */

.booking-section {

  position: relative;

  padding: 110px 22px;

  background:
    radial-gradient(
      circle at 50% 0%,
      rgba(0, 119, 216, 0.20),
      transparent 45%
    ),
    #06111f;

  overflow: hidden;
}


/* LÍNEA DECORATIVA */

.booking-section::before {

  content: "";

  position: absolute;

  top: 0;
  left: 50%;

  width: 180px;
  height: 3px;

  transform: translateX(-50%);

  background: var(--pink);

  box-shadow:
    0 0 20px rgba(245, 0, 105, 0.5);
}


/* TARJETA */

.booking-card {

  position: relative;

  width: min(1100px, 100%);

  margin: 0 auto;

  display: grid;

  grid-template-columns:
    minmax(320px, 1fr)
    minmax(320px, 0.9fr);

  align-items: stretch;

  overflow: hidden;

  border-radius: 18px;

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

  background:
    linear-gradient(
      135deg,
      #071b31,
      #03101e
    );

  box-shadow:
    0 25px 70px
    rgba(0, 0, 0, 0.40);
}


/* ==========================================================
   IMAGEN
   ========================================================== */

.booking-image {

  position: relative;

  min-height: 430px;

  overflow: hidden;

  background: #02070d;
}


.booking-image::after {

  content: "";

  position: absolute;

  inset: 0;

  background:
    linear-gradient(
      90deg,
      transparent 50%,
      rgba(3, 16, 30, 0.55)
    );
}


.booking-image img {

  width: 100%;
  height: 100%;

  display: block;

  object-fit: cover;

  transition:
    transform 0.5s ease;
}


.booking-card:hover
.booking-image img {

  transform: scale(1.04);
}


/* ==========================================================
   INFORMACIÓN
   ========================================================== */

.booking-info {

  display: flex;

  flex-direction: column;

  justify-content: center;

  padding:
    55px 55px;

  text-align: left;
}


.booking-kicker {

  margin: 0 0 12px;

  color: #47aef8;

  font-size: 10px;

  font-weight: 800;

  letter-spacing: 0.30em;
}


.booking-info h2 {

  margin: 0;

  color: #ffffff;

  font-size:
    clamp(34px, 4vw, 54px);

  line-height: 0.95;

  font-weight: 800;

  text-transform: uppercase;
}


.booking-info h3 {

  margin:
    12px 0 20px;

  color: var(--pink);

  font-size:
    clamp(20px, 2.5vw, 30px);

  font-weight: 800;

  letter-spacing: 0.08em;
}


.booking-text {

  margin: 0 0 25px;

  color: #b8cee2;

  font-size: 14px;

  line-height: 1.8;

  max-width: 440px;
}


/* ==========================================================
   UBICACIÓN
   ========================================================== */

.booking-location {

  display: flex;

  align-items: center;

  gap: 14px;

  width: fit-content;

  margin-bottom: 28px;

  padding:
    13px 17px;

  border:
    1px solid
    rgba(245, 0, 105, 0.25);

  border-radius: 10px;

  background:
    rgba(245, 0, 105, 0.07);
}


.location-icon {

  display: grid;

  place-items: center;

  width: 36px;
  height: 36px;

  border-radius: 50%;

  background: var(--pink);

  font-size: 17px;

  box-shadow:
    0 0 18px
    rgba(245, 0, 105, 0.35);
}


.booking-location div {

  display: flex;

  flex-direction: column;

  gap: 3px;
}


.booking-location strong {

  color: #ffffff;

  font-size: 12px;

  letter-spacing: 0.08em;

  text-transform: uppercase;
}


.booking-location span:not(.location-icon) {

  color: #b8cee2;

  font-size: 12px;
}


/* ==========================================================
   REDES
   ========================================================== */

.booking-social-title {

  margin: 0 0 13px;

  color: #7190aa;

  font-size: 10px;

  font-weight: 700;

  letter-spacing: 0.12em;

  text-transform: uppercase;
}


.booking-socials {

  display: flex;

  flex-wrap: wrap;

  gap: 10px;
}


.booking-social {

  display: inline-flex;

  align-items: center;

  gap: 8px;

  min-height: 40px;

  padding:
    0 14px;

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

  border-radius: 8px;

  background:
    rgba(255, 255, 255, 0.04);

  color: #ffffff;

  font-size: 10px;

  font-weight: 700;

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


.booking-social svg {

  width: 19px;
  height: 19px;

  fill: currentColor;

  stroke: currentColor;

  stroke-width: 1.5;
}


.booking-social.instagram:hover {

  background: #e1306c;

  border-color: #e1306c;

  box-shadow:
    0 8px 25px
    rgba(225, 48, 108, 0.35);

  transform:
    translateY(-3px);
}


.booking-social.facebook:hover {

  background: #1877f2;

  border-color: #1877f2;

  box-shadow:
    0 8px 25px
    rgba(24, 119, 242, 0.35);

  transform:
    translateY(-3px);
}


.booking-social.whatsapp:hover {

  background: #25d366;

  border-color: #25d366;

  box-shadow:
    0 8px 25px
    rgba(37, 211, 102, 0.35);

  transform:
    translateY(-3px);
}


.booking-social:active {

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


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

@media (max-width: 760px) {

  .booking-section {

    padding:
      75px 16px;
  }


  .booking-card {

    grid-template-columns: 1fr;

    border-radius: 14px;
  }


  .booking-image {

    min-height: 320px;

    max-height: 380px;
  }


  .booking-image::after {

    background:
      linear-gradient(
        180deg,
        transparent 55%,
        rgba(3, 16, 30, 0.7)
      );
  }


  .booking-info {

    padding:
      38px 25px 32px;

    text-align: center;

    align-items: center;
  }


  .booking-info h2 {

    font-size: 35px;
  }


  .booking-info h3 {

    font-size: 22px;
  }


  .booking-text {

    font-size: 13px;
  }


  .booking-location {

    width: 100%;

    justify-content: center;

    text-align: left;
  }


  .booking-socials {

    justify-content: center;
  }


  .booking-social {

    flex: 1 1 auto;

    justify-content: center;
  }

}


/* ==========================================================
   TELÉFONOS PEQUEÑOS
   ========================================================== */

@media (max-width: 380px) {

  .booking-section {

    padding:
      60px 12px;
  }


  .booking-image {

    min-height: 280px;
  }


  .booking-info {

    padding:
      32px 18px 27px;
  }


  .booking-info h2 {

    font-size: 30px;
  }


  .booking-info h3 {

    font-size: 19px;
  }


  .booking-social {

    width: 100%;
  }

}