/**
 * Returns a new string with some or all matches of a pattern replaced by a replacement
 * @param {String} $string - Initial string
 * @param {String} $search - Value to replace
 * @param {String} $replace - Replacement
 * @return {String} New string
 */
/**
 * 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),
 */
/**
 * 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))
 */
/* -------------------------------------------------------------------------- *\
 *  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
 * -------------------------------------------------------------------------- */
/*
 * 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
 */
/*
$color__black: hsl(0, 0%, 0%);          // #000
$color__white: hsl(0, 0%, 100%);        // #fff

$color__nero: hsl(0, 0%, 14%);         //#242424
$color__matterhorn: hsl(0, 0%, 33%);         //#555555
$color__dark-gray: hsl(0, 0%, 66%);         //#A8A8A8
$color__gray: hsl(0, 0%, 78%);         //#C8C8C8
$color__white-smoke: hsl(0, 0%, 96%);         //#F4F4F4

$color__black20: hsla(0, 0%, 0%, 0.2);    //rgba(255, 255, 255, 20)
$color__gray50: hsla(0, 0%, 78%, 0.5);   //rgba(200, 200, 200, 50)

// Promo colors
$color__green: hsl(132, 100%, 49%);     // #00F830
$color__cookie: $color__green;
$color__red: hsl(0, 100%, 50%);       // #f00
$color__red-campaign: $color__red;
$color__international-orange: hsl(19, 100%, 50%);      // #ff5200
$color__sales: $color__international-orange;
$color__yellow: hsl(60, 100%, 50%);      // #FFFF00
$color__razzle-dazzle-rose: hsl(310, 100%, 64%);     // #FF45E0
$color__who-we-are: $color__razzle-dazzle-rose;

/// --------------------------------------------------------------------------
///    Old palette
/// --------------------------------------------------------------------------
$color__alabaster: hsl(0, 0%, 98%);         // #fafafa;
$color__alto: hsla(0, 0%, 0%, 0.33);   // #00000054 = #d3d3d3;
$color__blue: hsl(231, 100%, 50%);     // #0026FF
$color__silver: hsl(0, 0%, 51%);         // #838383
$color__early-dawn: hsl(44, 100%, 95%);      // #fff9e8
$color__orange: hsl(30, 100%, 53%);      // #ff8810
$color__malachite: hsl(122, 69%, 51%);      // #2dd933
$color__violet: hsl(275, 77%, 15%);      // #2c0945
$color__royal-blue: hsl(229, 73.1%, 57.6%);  // #4462e2
$color__sunset-orange: hsl(0, 100%, 64.7%);     // #ff4b4b
$color__transparent: hsla(360, 100%, 100%, 0); //rgba(255, 255, 255, 0)

//Social networks
$color__facebook: $color__royal-blue;
$color__google: $color__sunset-orange;
*/
/* 1025 is used instead of 1024 because touch devices design is not specified */
/**
 * 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),
 */
/**
 * @tokens Font Families
 * @presenter FontFamily
 */
/** System monospace */
/**
 * @tokens Font Weights
 * @presenter FontWeight
 */
/**
 * @tokens Font Sizes
 * @presenter FontSize
 */
/**
 * @tokens Line Height
 * @presenter Spacing
 */
/* @token Border
 * @presenter Spacing
 */
/* @token Border
 * @presenter Spacing
 */
/* Scrollbars customization */
/* Custom width */
/* Custom width */
/*
  NOTE: Setup the svg.
    1- export the svg from the sketch in abstract
    2- go to optimizer, https://jakearchibald.github.io/svgomg/
    3- Copy source, check if need to have some changes in the path or fill.
*/
/**
 * Payment cards used in account, visa, mastercard,
 */
/**
 * Returns an url encoded SVG with the given color
 * @param {String} $icon - SVG code
 * @param {String} $fill-color - Fill color
 * @param {String} $stroke-color - Stroke color
 * @return {String} URL encoded svg
 */
/* -------------------------------------------------------------------------- *\
==============
| The Search |
==============
MOBILE:  Header < Search            PDPModals must hide the main header
                                    to show only a back button (as APP)
                                    Reference: SF-7800
------------------------------------------------------------------------
TABLET:                             no relevance
------------------------------------------------------------------------
DESKTOP: Header > Search            Subcategories must be viewed over
                                    the search form and its results
                                    Reference: SF-11932
\* -------------------------------------------------------------------------- */
/* $theme-colors: map-merge(
    (
      "primary":    $primary,
      "secondary":  $secondary,
      "success":    $success,
      "info":       $info,
      "warning":    $warning,
      "danger":     $danger,
      "light":      $light,
      "dark":       $dark
    ),
    $theme-colors
); */
/*
$carousel-control-prev-icon-bg: str-replace(
  url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' fill='black' viewBox='0 0 7 7'%3e%3cpath d='M5.25 0l-4 4 4 4 1.5-1.5-2.5-2.5 2.5-2.5-1.5-1.5z'/%3e%3c/svg%3e"),
  "#",
  "%23"
);
$carousel-control-next-icon-bg: str-replace(
  url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' fill='black' viewBox='0 0 8 8'%3e%3cpath d='M2.75 0l-1.5 1.5 2.5 2.5-2.5 2.5 1.5 1.5 4-4-4-4z'/%3e%3c/svg%3e"),
  "#",
  "%23"
);
*/
/*
 * https://allyjs.io/tutorials/hiding-elements.html#2017-edition-of-visuallyhidden
 */
/**
 * Extends click zone by adding a pseudo overflowing on the element
 *
 * @param $margins: size overflowing the click zone
 * @param $pseudo: the pseudo where attach the hotzone
 * @param $debug: just to see the zone added
 */
/**
 * Calculate button icon size based on capital height
 *
 * $margin: 4px by default ($inset-inline-xxs)
 *
 * $icon-side: left or right (right by default) to apply margin properly
 *
 * $capital-height: (em) height of capital characters, in FK Grotesk is 0.72em
 **/
/**
 *  FLOATING ELEMENTS
 * --------------------------------------------------------------------------
 *  Works from 0 to 575px breakpoints.
 *
 *  Element with is equal to 100vw subtracting
 *    1. Page inset left: 16px
 *    2. Menu with: 45px
 *    3. Space between menu and element: 24px
 *    4. Menu right position: 8px
 *  Even if menu isn't present
 *
 *  bottom: menu offset bottom (24px) + 4px
 *
 *  When the element coexists with the floating menu on mobile:
 *  right: 24px + menu width (45px) + 8px
 *  left: page inset (16px)
 *
 *  When there is no menu, element is centered
 */
/* Mixin to use if touch devices design is specified */
/* Ignore, hover Device with limited pointing accuracy (touch) */
/**
 * Hide scrollbars during width/height transition with keyframes
 * Source: https://css-tricks.com/hide-scrollbars-during-an-animation/
 */
@-webkit-keyframes hide-scroll {
  from,
  to {
    overflow-y: hidden; } }
@keyframes hide-scroll {
  from,
  to {
    overflow-y: hidden; } }

/*
 * 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)));
*/
/*
 * Returns a set of selectors to apply some interaction styles to,
 * when we need to style the element or its related nodes
*/
/*
 * Returns a set of selectors to apply some interaction active styles to,
 * when we need to style the element or its related nodes
*/
/*
 * Adds content for an interaction state
*/
/**
 * The product tiles grows with the columns of the product grid. These columns
 * are defined using bootstrap:
 *
 * >=0     2 columns
 * >=768   4 columns
 *
 * Because of this, the design considers two product tile sizes (S, L) to define
 * the look&feel of the tiles depending on the space that those columns leave to
 * grow to a tile
 *
 * >=0     tileS  - non-fluid
 * >=375   tileS  ---- fluid ---> 767 tileL
 * >=768   tileS  - non-fluid
 * >=1025  tileS  ---- fluid ---> 1920 tileL
 * >=1920  tileL  - non-fluid
 *
 * This mixin eases the task of defining the fluid values of a property for
 * these workflow
 *
 * @param {string} $property - Property name
 * @param {any} $small-tile-value - Property vale for a tile of size S
 * @param {any} $big-tile-value - Property vale for a tile of size L
 */
.login-banner {
  display: none; }

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

.card-header__title {
  /* stylelint-disable */
  --uses-typography: 'headings-page-title';
  color: black;
  font-family: "FKGrotesk", "Arial", sans-serif;
  font-size: 1.875rem;
  font-style: normal;
  font-weight: 900;
  text-transform: uppercase;
  /* stylelint-enable */
  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 {
  /* stylelint-disable */
  --uses-typography: 'headings-page-subtitle';
  color: black;
  font-family: "FKGrotesk", "Arial", sans-serif;
  font-size: 1rem;
  font-style: normal;
  font-weight: 900;
  text-transform: uppercase;
  /* stylelint-enable */
  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 {
    /* stylelint-disable */
    --uses-typography: 'headings-page-title';
    color: black;
    font-family: "FKGrotesk", "Arial", sans-serif;
    font-size: 1.875rem;
    font-style: normal;
    font-weight: 900;
    text-transform: uppercase;
    /* stylelint-enable */ }
    @media (min-width: 1025px) {
      .login-container .card-header__title {
        font-size: 3.125rem; } }
  .login-container .card-header__subtitle {
    /* stylelint-disable */
    --uses-typography: 'headings-page-subtitle';
    color: black;
    font-family: "FKGrotesk", "Arial", sans-serif;
    font-size: 1rem;
    font-style: normal;
    font-weight: 900;
    text-transform: uppercase;
    /* stylelint-enable */ }
    @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.01036 * 100vw + 60.1165px); } }
    @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 {
    /* stylelint-disable */
    --uses-typography: 'login-base';
    font-family: "FKGrotesk", "Arial", sans-serif;
    font-size: 0.75rem;
    font-weight: 700;
    /* stylelint-enable */
    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: black; }

.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: #66a942; }

.request-password-reset-card--checkout {
  width: 100%;
  max-width: 42rem; }

.request-password-reset-card .card-header__title {
  /* stylelint-disable */
  --uses-typography: 'checkout-section-title';
  font-weight: 900;
  font-size: 0.9375rem;
  text-transform: uppercase;
  /* stylelint-enable */
  margin-right: 1.625rem;
  margin-bottom: 2px; }
  @media (min-width: 575px) {
    .request-password-reset-card .card-header__title {
      font-size: calc(0.00419 * 100vw + 13.59162px); } }
  @media (min-width: 1530px) {
    .request-password-reset-card .card-header__title {
      font-size: calc(0.01282 * 100vw + 0.38462px); } }
  @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 {
  /* stylelint-disable */
  --uses-typography: 'login-message';
  font-family: "FKGrotesk", "Arial", sans-serif;
  font-size: 0.75rem;
  font-weight: 700;
  /* stylelint-enable */
  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;
    grid-gap: 4px;
    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*/