/* 1025 is used instead of 1024 because touch devices design is not specified */
/* Mixin to use if touch devices design is specified */
/* Ignore, hover Device with limited pointing accuracy (touch) */
/**
 * Returns a curve from the $transition-curves list
 */
/**
 * Returns a speed from the $transition-times list
 */
/**
 * Returns a transition string
 * used internally by byl-transition and byl-complex-transition mixins
 * @param {string} property - property to be transitioned (i.e. width)
 * @param {number} speed - passed directly or through the speed function (i.e. 150ms or speed(t2))
 * @param {string} curve - passed directly or through the curve function (i.e. linear or curve(ease2))
 * @param {number} delay - passed directly or through the speed function (i.e. 10ms or speed(t1))
 */
/*
 * Returns a transition with one or multiple properties and common speed, curve and delay.
 * @param {String,List} string with the property, or each value of the list is a property
 * @param {number} speed - passed directly or through the speed function (i.e. 150ms or speed(t2))
 * @param {string} curve - passed directly or through the curve function (i.e. linear or curve(ease2))
 * @param {number} delay - passed directly or through the speed function (i.e. 10ms or speed(t1))
 * Examples of use:
 * @include byl-transition((border-color));
 * @include byl-transition((border-color, height), speed(t2));
 * @include byl-transition((border-color, height), null, curve(ease3));
*/
/*
 * Returns a transition with multiple properties and independent speed, curve and delay.
 * @param {List} each value of the list is in turn a list for each transition properties and values
 * Expected order in each transition will be property, speed, curve and delay
 * Examples of use:
 * @include byl-complex-transition((height, speed(t3)), (opacity, null, curve(ease3)));
*/
/**
 * Map with all possible units to be used by other utilities (i.e. fluid value)
 */
/**
 * Adds unit to a number
 * @param {Number} $value - Value to add unit to
 * @param {String} $unit - String representation of the unit
 * @return {Number} - `$value` expressed in `$unit`
 */
/**
 * Returns a number without units
 */
/**
 * Returns a rem value from a number of pixels.
 * Its uses 16px as root font-size
 */
/**
 * Returns a px value from a number of rems.
 * Its uses 16px as root font-size
 */
/**
 * Returns a rem value from a map
 */
/**
 * Returns a fluid value between two points in the viewport variable dimension.
 * This linear function can be applied to any property (width, font-size, ...).
 * @param {Number} $v1 - Value at init point - Linear function's Y1
 * @param {Number} $v2 - Value at end point - Linear function's Y2
 * @param {Number} $init - Init point in pixels - Linear function's X1
 * @param {Number} $end - End point in pixels - Linear function's X2
 * @param {Number} $var-dim - Variable dimension: 100vw as default, or 100vh, 100%
 * examples:
 * width: byl-linear-fluid-value(70vw, 58vw, 810px, 1024px);
 * padding-bottom: byl-linear-fluid-value(24px, 48px, 1025px, 1920px, 100%);
 * font-size: byl-linear-fluid-value(1rem, 2rem, 320px, 768px),
 * letter-spacing: byl-linear-fluid-value(0, 1px, 768px, 1024px),
 */
/*
 * Colors
 * (Named using "Name that color") - http://chir.ag/projects/name-that-color
 * -------------------------------------------------------------------------- */
/**
 * @tokens Colors Base
 * @presenter Color
 */
/**
 * @tokens Colors Promo
 * @presenter Color
 */
/**
 * @tokens Colors System
 * @presenter Color
 */
/**
 * @tokens Colors Others
 * @presenter Color
 */
/**
 * @tokens Font Families
 * @presenter FontFamily
 */
/** System monospace */
/**
 * @tokens Font Weights
 * @presenter FontWeight
 */
/**
 * @tokens Font Sizes
 * @presenter FontSize
 */
/* -------------------------------------------------------------------------- *\
 *  INSETS
 * --------------------------------------------------------------------------
 *  An inset offers indents content on all four sides like the matte of the
 *  framed photo on a wall
 *
 *  $inset-X : a b;
 *  $inset-stack-X : a;
 *  $inset-inline-X : b;
 *
 *  -----------------------
 *  |          a          |
 *  |   ---------------   |
 *  | b |             | b |
 *  |   ---------------   |
 *  |          a          |
 *  -----------------------
 *
\* -------------------------------------------------------------------------- */
/**
 * @tokens Inset Block
 * @presenter Spacing
 */
/**
 * @tokens Inset Inline
 * @presenter Spacing
 */
/**
 * @tokens Insets
 * @presenter Spacing
 */
/* -------------------------------------------------------------------------- *\
 *  Main header
 * -------------------------------------------------------------------------- */
/* -------------------------------------------------------------------------- *\
 *  Footer
 * -------------------------------------------------------------------------- */
/* -------------------------------------------------------------------------- *\
 *  Main content
 * -------------------------------------------------------------------------- */
/* -------------------------------------------------------------------------- *\
 *  Landing pages
 * -------------------------------------------------------------------------- */
/* -------------------------------------------------------------------------- *\
 *  Account pages
 * -------------------------------------------------------------------------- */
/* -------------------------------------------------------------------------- *\
 *  Form Login content
 * -------------------------------------------------------------------------- */
/* -------------------------------------------------------------------------- *\
 *  Product Page
 * -------------------------------------------------------------------------- */
/* -------------------------------------------------------------------------- *\
 *  Cart/Minicart
 * -------------------------------------------------------------------------- */
/* -------------------------------------------------------------------------- *\
 *  Article pages
 * -------------------------------------------------------------------------- */
/* -------------------------------------------------------------------------- *\
 *  Home Page
 * -------------------------------------------------------------------------- */
/* -------------------------------------------------------------------------- *\
 *  Customizer
 * -------------------------------------------------------------------------- */
/* -------------------------------------------------------------------------- *\
 *  CTA static buttons
 * -------------------------------------------------------------------------- */
/* -------------------------------------------------------------------------- *\
 *  IOS navigator bottom spacing
 * -------------------------------------------------------------------------- */
/* -------------------------------------------------------------------------- *\
 *  Rest of variables
 * -------------------------------------------------------------------------- */
.login-banner {
  display: none;
}

.card,
.card-header,
.card-body {
  display: flex;
  flex-direction: column;
  padding: 0;
  background: transparent;
  border: 0;
}

.card-header__title {
  --uses-typography: "headings-page-title";
  color: hsl(0, 0%, 0%);
  font-family: "FKGrotesk", "Arial", sans-serif;
  font-size: 1.875rem;
  font-style: normal;
  font-weight: 900;
  text-transform: uppercase;
  margin: 0;
}
@media (min-width: 1025px) {
  .card-header__title {
    font-size: 3.125rem;
  }
}
.card-header__title--venta-privada {
  color: var(--private-sale-color);
}

.card-header__subtitle {
  --uses-typography: "headings-page-subtitle";
  color: hsl(0, 0%, 0%);
  font-family: "FKGrotesk", "Arial", sans-serif;
  font-size: 1rem;
  font-style: normal;
  font-weight: 900;
  text-transform: uppercase;
  margin: 0;
}
@media (min-width: 1025px) {
  .card-header__subtitle {
    font-size: 1.3125rem;
  }
}

.login-container {
  max-width: 550px;
  margin: 0 1rem;
  padding-top: 32px;
}
@media (min-width: 575px) {
  .login-container {
    margin-right: auto;
    margin-left: auto;
  }
}
@media (min-width: 768px) {
  .login-container {
    max-width: 674px;
  }
}
@media (min-width: 1025px) {
  .login-container {
    padding-top: 80px;
  }
}
.login-container .card-header__title {
  --uses-typography: "headings-page-title";
  color: hsl(0, 0%, 0%);
  font-family: "FKGrotesk", "Arial", sans-serif;
  font-size: 1.875rem;
  font-style: normal;
  font-weight: 900;
  text-transform: uppercase;
}
@media (min-width: 1025px) {
  .login-container .card-header__title {
    font-size: 3.125rem;
  }
}
.login-container .card-header__subtitle {
  --uses-typography: "headings-page-subtitle";
  color: hsl(0, 0%, 0%);
  font-family: "FKGrotesk", "Arial", sans-serif;
  font-size: 1rem;
  font-style: normal;
  font-weight: 900;
  text-transform: uppercase;
}
@media (min-width: 1025px) {
  .login-container .card-header__subtitle {
    font-size: 1.3125rem;
  }
}
.login-container .card + .card,
.login-container .register-button {
  margin-top: 64px;
}
@media (min-width: 375px) {
  .login-container .card + .card,
  .login-container .register-button {
    margin-top: calc(0.0103559871 * 100vw + 60.1165048544px);
  }
}
@media (min-width: 1920px) {
  .login-container .card + .card,
  .login-container .register-button {
    margin-top: 80px;
  }
}

.tab-pane:not(.active) {
  display: none;
}

.login {
  padding-top: 0.5rem;
}
.login__submit {
  transition: opacity 100ms cubic-bezier(0.25, 0.1, 0.25, 1) 0ms;
  opacity: 1;
}
.login__submit--hidden {
  opacity: 0;
  pointer-events: none;
}
@media (max-width: 767px) {
  .login__submit[type=submit] {
    margin-top: 8px;
  }
}
.login .link--highlight {
  margin-right: 8px;
}
@media (min-width: 1025px) {
  .login .link--highlight {
    margin-right: 16px;
  }
}
.login .clearfix {
  display: flex;
  flex-direction: row-reverse;
}
.login .clearfix > div {
  width: 100%;
}
.login .field-password {
  margin-bottom: 0;
}
.login .forgot-password {
  margin-top: 2px;
}
@media (min-width: 1025px) {
  .login .forgot-password {
    margin-top: 0;
  }
}
.login .forgot-password .link {
  white-space: nowrap;
}

.social-login {
  margin-top: 32px;
}
@media (min-width: 1025px) {
  .social-login {
    margin-top: 48px;
  }
}

.registration {
  padding-top: 8px;
}
.registration p {
  --uses-typography: "login-base";
  font-family: "FKGrotesk", "Arial", sans-serif;
  font-size: 0.75rem;
  font-weight: 700;
  margin: 24px 8px 16px 0;
}
@media (min-width: 1025px) {
  .registration p {
    font-size: 0.875rem;
  }
}
@media (min-width: 1025px) {
  .registration p {
    margin: 24px 16px 24px 0;
  }
}
@media (max-width: 767px) {
  .registration__submit[type=submit] {
    margin-top: 8px;
  }
}
.registration .field-checkbox {
  margin-right: 8px;
}
@media (min-width: 1025px) {
  .registration .field-checkbox {
    margin-right: 16px;
    margin-bottom: 0;
  }
}
.registration .field-checkbox:last-of-type {
  margin-top: 2px;
  margin-bottom: 24px;
}
.registration .field-checkbox__label a {
  color: hsl(0, 0%, 0%);
}

.reset-password__submit {
  display: flex;
  margin-top: 24px;
  margin-right: 8px;
  margin-left: auto;
}
.reset-password .reset-password__submit--checkout {
  display: none;
}
@media (min-width: 768px) {
  .reset-password .reset-password__submit--checkout {
    display: flex;
  }
}

.request-password-reset-card--sent .reset-password {
  display: none;
}
.request-password-reset-card--sent .card-header__subtitle {
  color: hsl(99, 44%, 46%);
}
.request-password-reset-card--checkout {
  width: 100%;
  max-width: 42rem;
}
.request-password-reset-card .card-header__title {
  --uses-typography: "checkout-section-title";
  font-weight: 900;
  font-size: 0.9375rem;
  text-transform: uppercase;
  margin-right: 1.625rem;
  margin-bottom: 2px;
}
@media (min-width: 575px) {
  .request-password-reset-card .card-header__title {
    font-size: calc(0.0041884817 * 100vw + 13.5916230366px);
  }
}
@media (min-width: 1530px) {
  .request-password-reset-card .card-header__title {
    font-size: calc(0.0128205128 * 100vw + 0.3846153846px);
  }
}
@media (min-width: 1920px) {
  .request-password-reset-card .card-header__title {
    font-size: 1.5625rem;
  }
}
@media (min-width: 1025px) {
  .request-password-reset-card .card-header__title {
    margin-right: 32px;
    margin-bottom: 4px;
  }
}
.request-password-reset-card .card-header__title--checkout {
  margin-bottom: 8px;
}
.request-password-reset-card .card-header__subtitle {
  --uses-typography: "login-message";
  font-family: "FKGrotesk", "Arial", sans-serif;
  font-size: 0.75rem;
  font-weight: 700;
  margin-top: 0;
  margin-bottom: 8px;
  font-size: calc(0.0025 * 100vw + 11.2px);
  text-transform: none;
}
@media (min-width: 1025px) {
  .request-password-reset-card .card-header__subtitle {
    font-size: 1rem;
  }
}
@media (min-width: 1920px) {
  .request-password-reset-card .card-header__subtitle {
    font-size: 1rem;
  }
}

.request-password-reset-modal {
  position: relative;
  margin-top: 8px;
}
.request-password-reset-modal--checkout {
  display: flex;
  gap: 4px;
  align-items: baseline;
  justify-content: center;
  max-width: 42rem;
  margin: auto;
}
.request-password-reset-modal .btn-close {
  position: absolute;
  top: 0;
  right: 0;
  z-index: 1;
  display: flex;
  width: calc(0.0075 * 100vw + 9.6px);
  height: calc(0.0075 * 100vw + 9.6px);
  margin-left: auto;
}
@media (min-width: 1025px) {
  .request-password-reset-modal .btn-close {
    top: 4px;
  }
}
@media (min-width: 1920px) {
  .request-password-reset-modal .btn-close {
    width: 1.5rem;
    height: 1.5rem;
  }
}

/*# sourceMappingURL=login.css.map*/