/* ==========================================
   THE SALES CLUB
   ========================================== */

:root {

  /* Marca */

  --bg: #062441;

  --accent: #f6ae00;

  --text: #ffffff;

  --muted-text:
    rgba(255, 255, 255, 0.78);

  --button-text: #062441;

  --membership-border: #b77a00;


  /* YouTube */

  --youtube-left: #dd101d;

  --youtube-middle: #f7192b;

  --youtube-right: #ff5636;


  /* Instagram */

  --instagram-blue: #405de6;

  --instagram-purple: #833ab4;

  --instagram-pink: #c13584;

  --instagram-magenta: #e1306c;

  --instagram-red: #fd1d1d;

  --instagram-orange: #f77737;

  --instagram-yellow: #fcaf45;


  /* Layout */

  --max-width: 620px;

  --radius: 16px;

}



/* ==========================================
   RESET
   ========================================== */

*,
*::before,
*::after {

  box-sizing: border-box;

}


html {

  min-height: 100%;

  background: var(--bg);

}


body {

  min-height: 100vh;

  margin: 0;

  background: var(--bg);

  color: var(--text);

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

  -webkit-font-smoothing: antialiased;

  text-rendering: optimizeLegibility;

}



/* ==========================================
   CONTENEDOR
   ========================================== */

.page {

  width:
    min(
      calc(100% - 40px),
      var(--max-width)
    );

  margin: 0 auto;

  padding:
    56px
    0
    48px;

}



/* ==========================================
   PERFIL
   ========================================== */

.profile {

  display: flex;

  flex-direction: column;

  align-items: center;

  text-align: center;

}


.profile__logo {

  display: block;

  width: 100px;

  height: 100px;

  object-fit: contain;

  border-radius: 50%;

  box-shadow: none;

}


h1 {

  margin:
    22px
    0
    0;

  font-size:
    clamp(
      1.8rem,
      4vw,
      2.4rem
    );

  line-height: 1.08;

  font-weight: 800;

  letter-spacing: -0.03em;

}


.profile__bio {

  max-width: 520px;

  margin:
    12px
    auto
    0;

  color: var(--muted-text);

  font-size:
    clamp(
      1rem,
      2vw,
      1.2rem
    );

  line-height: 1.45;

}



/* ==========================================
   LISTA
   ========================================== */

.links {

  display: grid;

  gap: 12px;

  margin-top: 38px;

}



/* ==========================================
   BOTÓN BASE
   ========================================== */

.link-button {

  width: 100%;

  min-height: 74px;

  display: flex;

  align-items: center;

  justify-content: space-between;

  gap: 14px;

  padding:
    13px
    22px;

  border-radius: var(--radius);

  border:
    1px solid
    transparent;

  text-decoration: none;

  box-shadow:
    0
    7px
    18px
    rgba(0, 0, 0, 0.12);

  transition:
    transform 160ms ease,
    box-shadow 160ms ease,
    filter 160ms ease,
    border-color 160ms ease;

}



/* ==========================================
   BOTONES AMARILLOS
   ========================================== */

.link-button--accent,
.link-button--membership {

  background: var(--accent);

  color: var(--button-text);

}


.product-content {

  display: flex;

  flex-direction: column;

  align-items: flex-start;

  justify-content: center;

  gap: 3px;

  min-width: 0;

}


.product-title {

  font-size:
    clamp(
      1rem,
      2vw,
      1.18rem
    );

  line-height: 1.15;

  font-weight: 800;

  text-align: left;

}


.product-price {

  font-size:
    clamp(
      0.9rem,
      1.8vw,
      1rem
    );

  line-height: 1.1;

  font-weight: 700;

  text-align: left;

}


.link-button--membership {

  border:
    1.5px solid
    var(--membership-border);

  box-shadow:
    0
    8px
    20px
    rgba(0, 0, 0, 0.15);

}



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

.social-button {

  min-height: 70px;

  color: #ffffff;

  overflow: hidden;

}


.social-content {

  display: flex;

  align-items: center;

  gap: 14px;

  min-width: 0;

}


.social-icon-box {

  width: 34px;

  display: flex;

  align-items: center;

  justify-content: center;

  flex: 0 0 auto;

}


.youtube-icon {

  display: block;

  width: 30px;

  height: 22px;

}


.instagram-icon {

  display: block;

  width: 29px;

  height: 29px;

}


.social-divider {

  width: 1px;

  height: 38px;

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

  flex: 0 0 auto;

}


.social-label {

  font-size:
    clamp(
      1rem,
      2vw,
      1.18rem
    );

  line-height: 1.1;

  font-weight: 800;

  white-space: nowrap;

}



/* ==========================================
   YOUTUBE
   ========================================== */

.link-button--youtube {

  background:
    linear-gradient(
      110deg,
      var(--youtube-left)
      0%,
      var(--youtube-middle)
      55%,
      var(--youtube-right)
      100%
    );

}



/* ==========================================
   INSTAGRAM
   ========================================== */

.link-button--instagram {

  border: none;

  outline: none;

  background:
    linear-gradient(
      115deg,
      var(--instagram-blue)
      0%,
      var(--instagram-purple)
      18%,
      var(--instagram-pink)
      36%,
      var(--instagram-magenta)
      51%,
      var(--instagram-red)
      66%,
      var(--instagram-orange)
      84%,
      var(--instagram-yellow)
      100%
    );

}



/* ==========================================
   FLECHA
   ========================================== */

.button-arrow {

  display: block;

  flex: 0 0 auto;

  color:
    rgba(
      6,
      36,
      65,
      0.95
    );

  font-size: 2.2rem;

  font-weight: 300;

  line-height: 0.8;

}


.button-arrow--white {

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

}



/* ==========================================
   HOVER
   ========================================== */

@media (hover: hover) and (pointer: fine) {

  .link-button:hover {

    transform:
      translateY(-2px);

    box-shadow:
      0
      10px
      24px
      rgba(0, 0, 0, 0.17);

  }


  .link-button--accent:hover,
  .link-button--membership:hover {

    filter:
      brightness(1.025);

  }


  .link-button--youtube:hover,
  .link-button--instagram:hover {

    filter:
      brightness(1.045);

  }

}



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

.link-button:focus-visible {

  outline:
    3px solid
    #ffffff;

  outline-offset: 4px;

}


.link-button:active {

  transform:
    translateY(0);

}



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

@media (max-width: 680px) {

  .page {

    width:
      calc(100% - 32px);

    padding-top: 38px;

  }


  .profile__logo {

    width: 92px;

    height: 92px;

  }


  .links {

    margin-top: 34px;

    gap: 12px;

  }


  .link-button {

    min-height: 72px;

    padding:
      13px
      18px;

    border-radius: 16px;

  }


  .social-button {

    min-height: 68px;

  }


  .product-title {

    font-size: 1rem;

  }


  .product-price {

    font-size: 0.9rem;

  }


  .social-content {

    gap: 12px;

  }


  .social-icon-box {

    width: 32px;

  }


  .youtube-icon {

    width: 29px;

    height: 21px;

  }


  .instagram-icon {

    width: 28px;

    height: 28px;

  }


  .social-divider {

    height: 36px;

  }


  .social-label {

    font-size: 1rem;

  }


  .button-arrow {

    font-size: 2rem;

  }

}



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

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

  .link-button {

    transition: none;

  }

}