root {
  --bp-mobile : 320px;
  --bp-tablet : 768px;
  --bp-desktop: 1024px;
  --bp-large  : 1366px;
}

@font-face {
  font-family : Figtree;
  src         : url(../assets/fonts/Figtree-Light.ttf) format(truetype);
  font-weight : 300;
  font-display: swap;
}

@font-face {
  font-family : Figtree;
  src         : url(../assets/fonts/Figtree-Regular.ttf) format(truetype);
  font-weight : 400;
  font-display: swap;
}

@font-face {
  font-family : Figtree;
  src         : url(../assets/fonts/Figtree-Medium.ttf) format(truetype);
  font-weight : 500;
  font-display: swap;
}


@font-face {
  font-family : Figtree;
  src         : url(../assets/fonts/Figtree-SemiBold.ttf) format(truetype);
  font-weight : 600;
  font-display: swap;
}

@font-face {
  font-family : Figtree;
  src         : url(../assets/fonts/Figtree-Bold.ttf) format(truetype);
  font-weight : 700;
  font-display: swap;
}

@font-face {
  font-family : Figtree;
  src         : url(../assets/fonts/Figtree-ExtraBold.ttf) format(truetype);
  font-weight : 800;
  font-display: swap;
}

@font-face {
  font-family : Figtree;
  src         : url(../assets/fonts/Figtree-Black.ttf) format(truetype);
  font-weight : 900;
  font-display: swap;
}

html,
body {
  overflow-x: hidden;
}

body,
p,
*,
div,
span,
button,
a {
  margin     : 0;
  padding    : 0;
  box-sizing : border-box;
  font-family: Figtree, sans-serif;
  list-style : none;
}

img {
  max-width: 100%;
  height   : auto;
}

main {
  flex: 1;
}

.main {
  margin-top: 65px;
  overflow  : hidden;
}

/* HEADER */
.header {
  display         : flex;
  flex-direction  : column;
  align-items     : center;
  background-color: #0F0E0E;
  padding         : 12px 16px;
  transition      : transform 0.3s ease;
  position        : fixed;
  top             : 0;
  left            : 0;
  right           : 0;
  z-index         : 1000;
}

.header.hidden {
  transform: translateY(-100%);
}

.header__container {
  display        : flex;
  align-items    : center;
  justify-content: space-between;
  max-width      : 1366px;
  width          : 100%;
}

.header__logo-image {
  display: flex;
}

.nav__links {
  display: none;
}

.nav__hamburger {
  display  : block;
  cursor   : pointer;
  color    : #fff;
  font-size: 24px;
}

.drawer {
  position        : fixed;
  top             : 0;
  right           : -100%;
  width           : 100%;
  height          : 100%;
  background-color: #060606;
  transition      : right 0.3s ease;
  z-index         : 1000;
}

.drawer__content {
  position           : relative;
  display            : flex;
  flex-direction     : column;
  align-items        : center;
  overflow           : auto;
  padding            : 16px;
  background-image   : url(../assets/images/background-drawer.svg);
  height             : calc(100% - 32px);
  width              : calc(100% - 32px);
  background-size    : contain;
  background-position: center;
  background-repeat  : no-repeat;
}

.drawer__close {
  position       : absolute;
  right          : 10px;
  top            : 10px;
  font-size      : 50px;
  cursor         : pointer;
  color          : #fff;
  background     : transparent;
  padding        : 0;
  margin         : 0;
  border         : none;
  height         : 40px;
  width          : 40px;
  display        : flex;
  align-items    : center;
  justify-content: center;
  line-height    : 0;
  opacity        : 0.9;
}

.drawer.open {
  right: 0;
}

.drawer__logo {
  margin       : 20px 0;
  margin-bottom: 40px;
  display      : flex;
}

.drawer__links {
  width          : 100%;
  list-style     : none;
  padding        : 0;
  margin         : 0;
  display        : flex;
  flex-direction : column;
  align-items    : center;
  justify-content: center;
  margin-bottom  : 30px;
}

.drawer__item {
  display        : flex;
  align-items    : center;
  justify-content: center;
  text-align     : center;
  height         : 64px;
  border-bottom  : 1px solid rgba(255, 255, 255, 0.20);
  width          : calc(100% - 64px)
}

.drawer__item:last-child {
  border: none;
}

.drawer__link {
  font-size      : 25px;
  font-style     : normal;
  font-weight    : 400;
  line-height    : 32px;
  color          : #fff;
  text-decoration: none;
}

.drawer__socials {
  width        : calc(100% - 64px);
  margin-bottom: 24px;
  margin-top   : auto;
}

.drawer__socials-title {
  margin       : 0;
  font-size    : 17px;
  font-weight  : 400;
  line-height  : 23px;
  color        : #fff;
  margin-bottom: 12px;
}

.drawer__socials-links {
  display      : flex;
  align-items  : flex-start;
  gap          : 12px;
  margin-bottom: 12px;
}

.drawer__socials-links-icons {
  display      : flex;
  align-content: center;
  gap          : 24px;
}

/* FOOTER  */
.footer {
  background-color: #060606;
  width           : 100%;
}

.footer__container {
  width          : 100%;
  max-width      : 1366px;
  margin         : auto;
  padding        : 32px 0;
  color          : #fff;
  display        : flex;
  justify-content: space-between;
  flex-direction : column;
}

.footer__column--logo {
  display     : flex;
  align-items : center;
  padding-left: 16px;
}

.footer__column--links {
  padding: 0 16px;
}

.footer__heading {
  font-size    : 16px;
  font-weight  : 800;
  line-height  : 31px;
  margin       : 0;
  margin-bottom: 8px;
}

.footer__list {
  margin        : 0;
  padding       : 0;
  display       : flex;
  flex-direction: column;
  gap           : 8px;
  list-style    : none;
  margin-bottom : 8px;
}

.footer__link {
  font-size      : 16px;
  font-weight    : 400;
  line-height    : 31px;
  color          : #fff;
  text-decoration: none;
  position       : relative;
}

.footer__link::after {
  content         : '';
  position        : absolute;
  width           : 0;
  height          : 1px;
  left            : 0;
  bottom          : -1px;
  transition      : .3s all;
  background-color: #fff;
}

.footer__link:hover::after {
  width: 100%;
}

.footer__column--info {
  padding: 0 16px;
}

.footer__app-images {
  display      : flex;
  gap          : 8px;
  margin-bottom: 8px;
}

.footer__text {
  margin-bottom: 8px;
}

.footer__social {
  display    : flex;
  align-items: center;
  gap        : 8px;
}

/* Banner */
.page__banner {
  display        : none;
  align-items    : center;
  justify-content: center;
  text-align     : center;
  position       : relative;
}

.page__banner__title {
  font-size     : 42px;
  text-shadow   : 0 4px 4px rgba(0, 0, 0, 0.25);
  font-weight   : 800;
  color         : #fff;
  margin        : 0;
  padding-inline: 20px;
}

.page__banner-content {
  /* background: linear-gradient(214deg, rgba(222, 179, 255, 1) 0%, rgba(62, 91, 255, 1) 44%); */

  max-width: 900px;
}

/* Main Content */
.page__main__content {
  max-width : 1200px;
  margin    : 40px auto;
  text-align: center;
  padding   : 0 20px 0 20px;
}

.page__main__content-title {
  font-size : 36px;
  margin    : 20px;
  text-align: center;
}

.page__main__description {
  color      : #333333;
  font-size  : 16px;
  line-height: 2;
}

/* BUTTON  */
.button-generic {
  background     : linear-gradient(90deg, #3E5BFF 6.5%, #8B87FF 100%);
  position       : relative;
  z-index        : 10;
  display        : flex;
  align-items    : center;
  justify-content: center;
  font-size      : 20px;
  font-weight    : 700;
  line-height    : 24px;
  border-radius  : 1000px;
  color          : #fff;
  text-decoration: none;
  max-width      : 290px;
  height         : 56px;
  padding-left   : 12px;
  padding-right  : 12px;
}

.button-generic:disabled{
  opacity: 0.5;
}

.button-generic::after {
  background   : linear-gradient(90deg, #8B87FF 20.5%, #3E5BFF 80%);
  content      : '';
  display      : block;
  height       : 100%;
  position     : absolute;
  top          : 0;
  left         : 0;
  opacity      : 0;
  width        : 100%;
  z-index      : -10;
  transition   : opacity 0.3s;
  border-radius: 1000px;
  cursor       : pointer;
}

.button-generic:hover:after {
  opacity: 1;
}

/* VISIBILIDAD  */
.visible-desktop {
  display: none;
}

.visible-mobile {
  display: inline-flex;
}

.full-absolute {
  position: absolute;
  inset   : 0;
  width   : 100%;
  height  : 100%;
}

/* LAZY  */
.lazy {
  opacity   : 0;
  transition: opacity 0.5s ease-in-out;
}

.loaded {
  opacity: 1;
}

/* TITLES  */
.generic_title {
  font-size  : calc(32px + 1.5vw);
  line-height: calc(40px + 1.5vw);
}

.generic_paragraphq {
  font-size  : calc(16px + 1.5vw);
  line-height: calc(24px + 1.5vw);
}

/* DISCLOUSURE */
.disclosure__item {
  overflow: hidden;
}

.disclosure__toggle {
  width           : 100%;
  cursor          : pointer;
  outline         : none;
  background-color: transparent;
  border          : none;
  margin          : 0;
  padding         : 0;
}

.disclosure__content {
  max-height: 0;
  overflow  : hidden;
  transition: .3s all;
}

.disclosure__content.open {
  max-height: 1000px;
}

.text-start {
  text-align: start;
}

.text-center {
  text-align: center;
}

@media (min-width: 1024px) {
  .visible-desktop {
    display: block;
  }

  .visible-mobile {
    display: none;
  }

  .header {
    padding: 16px 24px;
  }

  .header__container {
    flex-direction : row;
    justify-content: space-between;
  }

  .header__logo-image {
    width : 212px;
    height: 59px;
  }

  .nav__links {
    display    : flex;
    align-items: center;
    gap        : 20px;
    list-style : none;
    padding    : 0;
    margin     : 0;
  }

  .nav__link {
    position       : relative;
    font-size      : 17px;
    font-weight    : 600;
    line-height    : 100%;
    color          : #fff;
    text-decoration: none;
    transition     : 0.3s all;
    padding        : 12px;
    border-radius  : 5px;
  }

  .nav__link:hover,
  .nav__link-active {
    background-color: #3E5BFF;
  }

  .nav__hamburger {
    display: none;
  }

  .footer__container {
    flex-direction: row;
    padding       : 64px 0;
  }

  .page__main__content-title {
    text-align: center;
    margin    : 32 16px 32px 16px;
    width     : 100%;
  }

  .page__main__description {
    font-size    : 18px;
    margin-bottom: 18px;
  }

  .contact-circle svg {
    width     : 64px;
    height    : 64px;
    max-width : 64px;
    max-height: 64px;
    min-width : 64px;
    min-height: 64px;
    display   : block;
    margin    : 0 auto;
  }

  .contact-option:not(:first-child) .contact-label {
    font-size  : 15px;
    line-height: 1.1;
  }

  .contact-option:not(:first-child) .contact-desc {
    font-size  : 13px;
    line-height: 1.1;
  }
}

/* CONTACTO - UNIFICADO Y CORREGIDO */
.contact-options-row {
  display        : flex;
  flex-wrap      : wrap;
  justify-content: center;
  gap            : 32px;
  margin-top     : 32px;
  margin-bottom  : 32px;
}

.contact-option {
  display       : flex;
  flex-direction: column;
  align-items   : center;
  width         : 220px;
  max-width     : 100vw;
  text-align    : center;
  font-family   : Figtree, sans-serif;
  margin-bottom : 0;
}

.contact-option img:hover {
  cursor: pointer;
}

.contact-label,
.contact-desc,
.contact-arrow {
  display        : flex;
  flex-direction : column;
  align-items    : center;
  justify-content: center;
  text-align     : center;
}

.contact-label {
  font-size  : 19px;
  font-weight: 500;
  color      : #fff;
  gap        : 4px;
  margin-top : 10px;
}

.contact-desc {
  font-size  : 15.5px;
  color      : #e6e6e6;
  margin     : 4px 0 0 0;
  font-weight: 400;
}

.contact-arrow {
  margin-bottom: 0;
  margin-top   : 8px;
}

.contact-socials {
  display        : flex !important;
  flex-direction : row !important;
  align-items    : center;
  justify-content: center;
  gap            : 8px;
  margin-top     : 4px;
}

.contact-option:not(:first-child) .contact-label {
  font-size: 16px;
}

.contact-option:not(:first-child) .contact-desc {
  font-size: 13px;
}

.background-text {
  background                  : transparent;
  display                     : inline;
  background                  : linear-gradient(214deg, rgba(222, 179, 255, 1) 0%, rgba(62, 91, 255, 1) 44%);
  color                       : white;
  padding                     : 5px 25px;
  border-radius               : 4px;
  font-weight                 : bold;
  line-height                 : 1.8;
  box-decoration-break        : clone;
  -webkit-box-decoration-break: clone;
  max-width                   : 150px;
  margin                      : 0 5px;
  position                    : relative;
  top                         : 30px;
}

@media (max-width: 900px) {
  .contact-options-row {
    flex-direction: column;
    align-items   : center;
    gap           : 24px;
  }

  .contact-option {
    width    : 100%;
    max-width: 340px;
    margin   : 0 auto;
  }

  .contact-circle {
    width  : 172px;
    height : 172px;
    padding: 16px 6px 14px 6px;
  }

  .contact-circle svg {
    width     : 68px !important;
    height    : 68px !important;
    max-width : 68px;
    max-height: 68px;
  }
}

@media (max-width: 600px) {
  .contact-circle {
    width     : 720px;
    max-width : 98vw;
    height    : 720px;
    max-height: 98vw;
  }

  .contact-circle svg {
    width     : 288px !important;
    height    : 288px !important;
    max-width : 288px;
    max-height: 288px;
  }

  .contact-option {
    width    : 90vw;
    min-width: 0;
    max-width: 98vw;
  }

  .page__banner__title {

    padding: 8px;

  }

  .page__banner-content {
    background: none;
    padding   : 0;
  }

  .page__main__content-title {
    font-size: 28px;
    margin   : 16px 0;
  }
}