/*------------------------------------*\ 
    #TABLE OF CONTENTS 
\*------------------------------------*/
/** 
 * ABSTRACTS..............................Declarations of Sass variables & mixins 
 * BASE...................................Default element styles 
 * LAYOUT.................................Layout-specific styles 
 * COMPONENTS.............................Component styles 
 * UTILITIES..............................Utility classes 
 */
/*------------------------------------*\ 
    #ABSTRACTS 
\*------------------------------------*/
@import url("https://use.typekit.net/bvx4jqo.css");
:root {
  /* ALERT */
  --c_alert_error: #fdf2f2;
  --c_alert_info: #f2f7f9;
  --c_alert_primary_text: #222222;
  --c_alert_succes: #eff7ef;
  --c_alert_warning: #fdf6e6;
  /* BACKGROUNDS */
  --c_backgrounds_blue_baby: #f2f7f9;
  --c_backgrounds_blue_bright: #f0f5ff;
  --c_backgrounds_blue_navy: #004d7e;
  --c_backgrounds_blue_pastel: #e4edf5;
  --c_backgrounds_blue_sky: #3377c0;
  --c_backgrounds_blue_ultramarine: #2a6adb;
  --c_backgrounds_gray_baby: #f8f8f8;
  --c_backgrounds_midnight: #ffffff;
  --c_backgrounds_white: #ffffff;
  --c_backgrounds_primary_chat: #d0d0d0;
  --c_backgrounds_secondary_chat: #595959;
  --c_backgrounds_blue_telcel: #00308b;
  --c_backgrounds_navbar_telcel: #ffffff;
  --c_backgrounds_mi_telcel: #ebf6ff;
  /* BUTTON */
  --c_button_alert_textprimary: #ffffff;
  --c_button_alert_textsecondary: #222222;
  --c_button_error_active: #d32222;
  --c_button_error_border: #d32222;
  --c_button_error_hover: #bd1e1e;
  --c_button_error_secondaryhover: #fdf2f2;
  --c_button_icon_active: #0071d1;
  --c_button_icon_disabled: #595959;
  --c_button_icon_hover: #f0f5ff;
  --c_button_icon_secondary: #ffffff;
  --c_button_info_active: #00529b;
  --c_button_info_border: #00529b;
  --c_button_info_hover: #004380;
  --c_button_info_secondaryhover: #f2f7f9;
  --c_button_primary_active: #7b1fa2;
  --c_button_primary_disabled: #d0d0d0;
  --c_button_primary_hover: #8835ab;
  --c_button_secondary_active: #ffffff;
  --c_button_secondary_border: #7b1fa2;
  --c_button_secondary_borderdisabled: #595959;
  --c_button_secondary_disabled: #ffffff;
  --c_button_secondary_hover: #ebddf1;
  --c_button_success_active: #008000;
  --c_button_success_border: #008000;
  --c_button_success_hover: #006600;
  --c_button_success_secondaryhover: #eff7ef;
  --c_button_tertiary_active: #e4edf5;
  --c_button_tertiary_border: #0071d1;
  --c_button_tertiary_hover: #deedfb;
  --c_button_tertiary_select: #0071d1;
  --c_button_warning_active: #ebab07;
  --c_button_warning_border: #ebab07;
  --c_button_warning_hover: #d09706;
  --c_button_warning_secondary: #fdf6e6;
  --c_button_warning_secondaryhover: #fdf6e6;
  /* CHART */
  --c_chart_text_data: #222222;
  --c_chart_text_porcentage: #757575;
  --c_chart_chart_background: #d0d0d0;
  --c_chart_full: #8cc14b;
  --c_chart_half: #ffcb31;
  --c_chart_low: #e33b4d;
  --c_chart_unlimited: #66e2fc;
  /* ICON */
  --c_icon_button_primary: #ffffff;
  --c_icon_button_secondary: #7b1fa2;
  --c_icon_error_primary: #d32222;
  --c_icon_informative_primary: #00529b;
  --c_icon_primary_active: #0071d1;
  --c_icon_secondary_active: #ffffff;
  --c_icon_secondary_informative: #f2f7f9;
  --c_icon_success_primary: #008000;
  --c_icon_warning_primary: #ebab07;
  --c_icon_navbarapp: #757575;
  /* INPUT */
  --c_inputs_background_error: #ffffff;
  --c_inputs_background_focus: #ffffff;
  --c_inputs_border_active: #757575;
  --c_inputs_border_disabled: #d0d0d0;
  --c_inputs_border_error: #d32222;
  --c_inputs_border_focus: #0071d1;
  --c_inputs_description_error: #d32222;
  --c_inputs_input_active: #ffffff;
  --c_inputs_label_active: #222222;
  --c_inputs_text_active: #757575;
  --c_inputs_text_error: #222222;
  --c_inputs_text_focus: #222222;
  --c_inputs_background_disabled: #f8f8f8;
  --c_inputs_label_disabled: #595959;
  --c_inputs_label_error: #d32222;
  --c_inputs_label_focus: #0071d1;
  --c_inputs_text_disabled: #595959;
  /* TAG */
  --c_tag_data_background: #ffffff;
  --c_tag_data_border: #00529b;
  --c_tag_data_text: #00529b;
  --c_tag_exclusivo_background: #ffe4b9;
  --c_tag_exclusivo_text: #5a3d10;
  --c_tag_informativo_background: #e4edf5;
  --c_tag_informativo_text: #00529b;
  --c_tag_lanzamiento_background: #f6eaf7;
  --c_tag_lanzamiento_text: #9723a0;
  --c_tag_mas_vendido_background: #ffe7de;
  --c_tag_mas_vendido_text: #b12f08;
  --c_tag_nuevo_background: #f2e4ea;
  --c_tag_nuevo_text: #960747;
  --c_tag_preventa_background: #e9ecf7;
  --c_tag_preventa_text: #1c42b4;
  --c_tag_promocion_background: #f0f7ef;
  --c_tag_promocion_text: #006100;
  --c_tag_proximamente_background: #eeebf4;
  --c_tag_proximamente_text: #5e3b96;
  --c_tag_recomendado_background: #e4eef0;
  --c_tag_recomendado_text: #00575f;
  --c_tag_recurrente_background: #ffe8d8;
  --c_tag_recurrente_text: #7b3200;
  --c_tag_regalo_background: #f0f7ef;
  --c_tag_regalo_text: #006100;
  /* TEXT */
  --c_text_black_primary: #222222;
  --c_text_highlight: #c71585;
  --c_text_informative: #00529b;
  --c_text_primary_text: #ffffff;
  --c_text_primary_textlink: #0071d1;
  --c_text_secondary_text: #7b1fa2;
  --c_text_secondary_textlink: #ffffff;
  --c_text_support: #757575;
  --c_text_textdisabled: #595959;
  --c_text_white_secondary: #ffffff;
  --c_text_ilimitado_text: #31747e;
  --c_text_medio_text: #aa7f00;
  /* TOOLS */
  --c_tools_divider: #d0d0d0;
  --c_tools_focus: #0071d1;
  --c_tools_stroke: #595959;
  --c_tools_overlay: #0000003c;
  --c_tools_blue_bright_mi_telcel: #cbdffc;
  /* Espaciado */
  --spacing_3xs: 4px;
  --spacing_2xs: 8px;
  --spacing_xs: 12px;
  --spacing_sm: 16px;
  --spacing_md: 20px;
  --spacing_lg: 24px;
  --spacing_xl: 28px;
  --spacing_2xl: 32px;
  --spacing_3xl: 36px;
  --spacing_4xl: 40px;
  --spacing_5xl: 44px;
  --spacing_6xl: 48px;
  --spacing_7xl: 52px;
  --spacing_8xl: 56px;
  /* Radius */
  --radius_none: 0px;
  --radius_s: 16px;
  --radius_m: 24px;
  /* Shadows */
  --level_1: 0px 0px 6px 0px rgba(0, 34, 77, 0.2);
  --level_2: 0px 3px 14px 0px rgba(0, 34, 77, 0.2);
  --level_3: 0px 12px 22px 0px rgba(0, 34, 77, 0.2);
  --font_primary: "source-sans-pro", sans-serif;
}

@media (prefers-color-scheme: dark) {
  :root {
    /* ALERT */
    --c_alert_error: #16212c;
    --c_alert_info: #16212c;
    --c_alert_primary_text: #16212c;
    --c_alert_succes: #16212c;
    --c_alert_warning: #16212c;
    /* BACKGROUNDS */
    --c_backgrounds_blue_baby: #252d3c;
    --c_backgrounds_blue_bright: #35465f;
    --c_backgrounds_blue_navy: #191f2d;
    --c_backgrounds_blue_pastel: #405673;
    --c_backgrounds_blue_sky: #1b2331;
    --c_backgrounds_blue_ultramarine: #0a1015;
    --c_backgrounds_gray_baby: #071b36;
    --c_backgrounds_midnight: #2a3948;
    --c_backgrounds_white: #191f2d;
    --c_backgrounds_primary_chat: #f2f8fc;
    --c_backgrounds_secondary_chat: #d0d0d0;
    --c_backgrounds_blue_telcel: #0a1015;
    --c_backgrounds_navbar_telcel: #0a1015;
    --c_backgrounds_mi_telcel: #16212c;
    /* BUTTON */
    --c_button_alert_textprimary: #f2f8fc;
    --c_button_alert_textsecondary: #f2f8fc;
    --c_button_error_active: #ff6961;
    --c_button_error_border: #ff6961;
    --c_button_error_hover: #ff9994;
    --c_button_error_secondaryhover: #32415d;
    --c_button_icon_active: #83cef6;
    --c_button_icon_disabled: #d0d0d0;
    --c_button_icon_hover: #303b52;
    --c_button_icon_secondary: #071b36;
    --c_button_info_active: #3c97e5;
    --c_button_info_border: #3c97e5;
    --c_button_info_hover: #97c8f1;
    --c_button_info_secondaryhover: #32415d;
    --c_button_primary_active: #d2aefd;
    --c_button_primary_disabled: #595959;
    --c_button_primary_hover: #e8d6fe;
    --c_button_secondary_active: #071b36;
    --c_button_secondary_border: #d2aefd;
    --c_button_secondary_borderdisabled: #595959;
    --c_button_secondary_disabled: #002045;
    --c_button_secondary_hover: #32415d;
    --c_button_success_active: #08bf48;
    --c_button_success_border: #08bf48;
    --c_button_success_hover: #08bf48;
    --c_button_success_secondaryhover: #32415d;
    --c_button_tertiary_active: #252d3c;
    --c_button_tertiary_border: #d2aefd;
    --c_button_tertiary_hover: #1b2a46;
    --c_button_tertiary_select: #d2aefd;
    --c_button_warning_active: #ff8c00;
    --c_button_warning_border: #ff8c00;
    --c_button_warning_hover: #cc7000;
    --c_button_warning_secondary: #32415d;
    --c_button_warning_secondaryhover: #32415d;
    /* CHART */
    --c_chart_text_data: #f2f8fc;
    --c_chart_text_porcentage: #f2f8fc;
    --c_chart_chart_background: #d0d0d0;
    --c_chart_full: #8cc14b;
    --c_chart_half: #ffcb31;
    --c_chart_low: #e33b4d;
    --c_chart_unlimited: #66e2fc;
    /* ICON */
    --c_icon_button_primary: #002045;
    --c_icon_button_secondary: #ebddf1;
    --c_icon_error_primary: #ff6961;
    --c_icon_informative_primary: #3c97e5;
    --c_icon_primary_active: #83cef6;
    --c_icon_secondary_active: #f2f8fc;
    --c_icon_secondary_informative: #3c97e5;
    --c_icon_success_primary: #069036;
    --c_icon_warning_primary: #9a7800;
    --c_icon_navbarapp: #d0d0d0;
    /* INPUT */
    --c_inputs_background_error: #002045;
    --c_inputs_background_focus: #002045;
    --c_inputs_border_active: #f2f8fc;
    --c_inputs_border_disabled: #595959;
    --c_inputs_border_error: #ff6961;
    --c_inputs_border_focus: #83cef6;
    --c_inputs_description_error: #ff6961;
    --c_inputs_input_active: #252d3c;
    --c_inputs_label_active: #f2f8fc;
    --c_inputs_text_active: #f2f8fc;
    --c_inputs_text_error: #f2f8fc;
    --c_inputs_text_focus: #f2f8fc;
    --c_inputs_background_disabled: #252d3c;
    --c_inputs_label_disabled: #d0d0d0;
    --c_inputs_label_error: #ff6961;
    --c_inputs_label_focus: #83cef6;
    --c_inputs_text_disabled: #d0d0d0;
    /* TAG */
    --c_tag_data_background: #1b2a46;
    --c_tag_data_border: #3c97e5;
    --c_tag_data_text: #3c97e5;
    --c_tag_exclusivo_background: #f7b374;
    --c_tag_exclusivo_text: #5a3d10;
    --c_tag_informativo_background: #191f2d;
    --c_tag_informativo_text: #f2f8fc;
    --c_tag_lanzamiento_background: #f2cef5;
    --c_tag_lanzamiento_text: #4f0855;
    --c_tag_mas_vendido_background: #facab8;
    --c_tag_mas_vendido_text: #842204;
    --c_tag_nuevo_background: #ffd5e8;
    --c_tag_nuevo_text: #80033c;
    --c_tag_preventa_background: #d3dcff;
    --c_tag_preventa_text: #1b3789;
    --c_tag_promocion_background: #d8fedd;
    --c_tag_promocion_text: #0a500a;
    --c_tag_proximamente_background: #e7dbff;
    --c_tag_proximamente_text: #532e95;
    --c_tag_recomendado_background: #ccf7ff;
    --c_tag_recomendado_text: #0f575d;
    --c_tag_recurrente_background: #ffe8d8;
    --c_tag_recurrente_text: #7b3200;
    --c_tag_regalo_background: #d8fed3;
    --c_tag_regalo_text: #0a500a;
    /* TEXT */
    --c_text_black_primary: #f2f8fc;
    --c_text_highlight: #ffbdff;
    --c_text_informative: #4aa6f6;
    --c_text_primary_text: #002045;
    --c_text_primary_textlink: #83cef6;
    --c_text_secondary_text: #d2aefd;
    --c_text_secondary_textlink: #83cef6;
    --c_text_support: #c8c8c8;
    --c_text_textdisabled: #d0d0d0;
    --c_text_white_secondary: #f2f8fc;
    --c_text_ilimitado_text: #0cbad4;
    --c_text_medio_text: #ffd968;
    /* TOOLS */
    --c_tools_divider: #f2f8fc;
    --c_tools_focus: #83cef6;
    --c_tools_stroke: #d0d0d0;
    --c_tools_overlay: #0000003c;
    --c_tools_blue_bright_mi_telcel: #191f2d;
  }
}
/*------------------------------------*\
    #VARIABLES
\*------------------------------------*/
/*------------------------------------*\
    #Colors Root
\*------------------------------------*/
/*------------------------------------*\ 
    #BASE 
\*------------------------------------*/
* {
  box-sizing: border-box;
}

html,
body,
div,
object,
iframe,
h1,
h2,
h3,
h4,
h5,
h6,
p,
blockquote,
ol,
ul,
li,
form,
legend,
label,
table,
header,
footer,
nav,
section,
figure {
  margin: 0;
  padding: 0;
}

header,
footer,
nav,
section,
article,
figure {
  display: block;
}

button {
  cursor: pointer;
}

.button {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 2px;
  padding: var(--spacing_2xs) var(--spacing_sm);
  border-radius: 60px;
  height: 40px;
  width: 100%;
  min-width: 180px;
  max-width: -moz-fit-content;
  max-width: fit-content;
}
@media (min-width: 768px) {
  .button {
    min-width: 248px;
    max-width: -moz-fit-content;
    max-width: fit-content;
  }
}
.button.button--small {
  width: -moz-fit-content;
  width: fit-content;
  max-width: none;
  padding: var(--spacing_2xs) var(--spacing_2xs);
  height: -moz-fit-content;
  height: fit-content;
}
.button.button__primary {
  background-color: var(--c_button_primary_active);
  border: 1px solid var(--c_button_primary_active);
  color: var(--c_text_primary_text);
  text-decoration: none;
  font-size: 1rem;
  font-weight: 600;
  line-height: normal;
  font-family: var(--font_primary);
  margin: 0;
}
.button.button__primary:hover {
  background-color: var(--c_button_primary_hover);
  border: 1px solid var(--c_button_primary_hover);
}
.button.button__primary.outlined {
  border: 1px solid;
}
.button.button__primary.outlined:hover {
  border: 1px solid;
}
.button.button__primary.disabled {
  background-color: var(--c_button_primary_disabled);
  border: 1px solid var(--c_button_primary_disabled);
  color: var(--c_text_textdisabled);
}
.button.button__secondary {
  background-color: var(--c_button_secondary_active);
  border: 1px solid var(--c_button_secondary_border);
  color: var(--c_text_secondary_text);
  text-decoration: none;
  font-size: 1rem;
  font-weight: 600;
  line-height: normal;
  font-family: var(--font_primary);
  margin: 0;
}
.button.button__secondary:hover {
  background-color: var(--c_button_secondary_hover);
  border: 1px solid var(--c_button_secondary_hover);
}
.button.button__secondary.outlined {
  border: 1px solid;
}
.button.button__secondary.outlined:hover {
  border: 1px solid;
}
.button.button__secondary.disabled {
  background-color: var(--c_button_secondary_disabled);
  border: 1px solid var(--c_button_secondary_borderdisabled);
  color: var(--c_text_textdisabled);
}
.button.button__success {
  background-color: var(--c_button_success_active);
  border: 1px solid var(--c_button_success_active);
  color: var(--c_text_primary_text);
  text-decoration: none;
  font-size: 1rem;
  font-weight: 600;
  line-height: normal;
  font-family: var(--font_primary);
  margin: 0;
}
.button.button__success:hover {
  background-color: var(--c_button_success_hover);
  border: 1px solid;
}
.button.button__success.outlined {
  background-color: var(--c_button_secondary_active);
  border: 1px solid var(--c_button_success_border);
  color: var(--c_button_alert_textsecondary);
}
.button.button__success.outlined:hover {
  background-color: var(--c_button_success_secondaryhover);
  border: 1px solid var(--c_button_success_border);
}
.button.button__success.disabled {
  border: 1px solid;
}
.button.button__error {
  background-color: var(--c_button_error_active);
  border: 1px solid var(--c_button_error_active);
  color: var(--c_text_primary_text);
  text-decoration: none;
  font-size: 1rem;
  font-weight: 600;
  line-height: normal;
  font-family: var(--font_primary);
  margin: 0;
}
.button.button__error:hover {
  background-color: var(--c_button_error_hover);
  border: 1px solid;
}
.button.button__error.outlined {
  background-color: var(--c_button_secondary_active);
  border: 1px solid var(--c_button_error_border);
  color: var(--c_button_alert_textsecondary);
}
.button.button__error.outlined:hover {
  background-color: var(--c_button_error_secondaryhover);
  border: 1px solid var(--c_button_error_border);
}
.button.button__error.disabled {
  border: 1px solid;
}
.button.button__warning {
  background-color: var(--c_button_warning_active);
  border: 1px solid var(--c_button_warning_active);
  color: var(--c_button_alert_textsecondary);
  text-decoration: none;
  font-size: 1rem;
  font-weight: 600;
  line-height: normal;
  font-family: var(--font_primary);
  margin: 0;
}
.button.button__warning:hover {
  background-color: var(--c_button_warning_hover);
  border: 1px solid;
}
.button.button__warning.outlined {
  background-color: var(--c_button_secondary_active);
  border: 1px solid var(--c_button_warning_border);
  color: var(--c_button_alert_textsecondary);
}
.button.button__warning.outlined:hover {
  background-color: var(--c_button_warning_secondaryhover);
  border: 1px solid var(--c_button_warning_border);
}
.button.button__warning.disabled {
  border: 1px solid;
}
.button.button__info {
  background-color: var(--c_button_info_active);
  border: 1px solid var(--c_button_info_active);
  color: var(--c_text_primary_text);
  text-decoration: none;
  font-size: 1rem;
  font-weight: 600;
  line-height: normal;
  font-family: var(--font_primary);
  margin: 0;
}
.button.button__info:hover {
  background-color: var(--c_button_info_hover);
  border: 1px solid;
}
.button.button__info.outlined {
  background-color: var(--c_button_secondary_active);
  border: 1px solid var(--c_button_info_border);
  color: var(--c_button_alert_textsecondary);
}
.button.button__info.outlined:hover {
  background-color: var(--c_button_info_secondaryhover);
  border: 1px solid var(--c_button_info_border);
}
.button.button__info.disabled {
  border: 1px solid;
}
.button__link {
  display: flex;
  align-items: center;
  justify-content: center;
  width: -moz-fit-content;
  width: fit-content;
  max-width: none;
  min-width: 0;
  padding: 0;
  height: -moz-fit-content;
  height: fit-content;
  border-radius: 0;
  border: none;
  background: transparent !important;
  text-decoration: none;
  color: var(--c_text_primary_textlink) !important;
  font-size: 1rem;
  font-weight: 600;
  line-height: normal;
  font-family: var(--font_primary);
  margin: 0;
}
.button__link--small {
  font-size: 0.875rem;
  font-weight: 600;
  line-height: normal;
  font-family: var(--font_primary);
  margin: 0;
}
.button__link:hover {
  text-decoration: underline;
}
.button__search {
  background-color: var(--c_backgrounds_blue_baby);
  border: none;
  color: var(--c_text_primary_textlink);
  height: var(--spacing_2xl);
  padding: var(--spacing_2xs) var(--spacing_sm);
  border: none;
  width: -moz-fit-content;
  width: fit-content;
  font-size: 1.125rem;
  font-weight: 600;
  line-height: normal;
  font-family: var(--font_primary);
  margin: 0;
}
.button__search.disabled {
  background-color: var(--c_button_primary_disabled);
  border: none;
  color: var(--c_text_textdisabled);
}

.button-container {
  display: flex;
  justify-content: center;
  position: relative;
}
.button-container .icon-loader {
  display: none;
}
.button-container.show-loader .icon-loader {
  position: absolute;
  display: block;
  top: 8px;
  animation: spin 1s linear infinite;
  color: var(--c_button_alert_textprimary);
}
.button-container.show-loader .button {
  color: transparent !important;
  pointer-events: none;
}
@keyframes spin {
  0% {
    transform: rotate(0deg);
  }
  100% {
    transform: rotate(360deg);
  }
}

/*------------------------------------*\ 
    #COMPONENTS 
\*------------------------------------*/
.accordion {
  border: none;
  background-color: transparent;
  width: 100%;
  max-width: 1024px;
  margin: 0 auto;
  display: flex;
  flex-direction: column;
  cursor: pointer;
  padding: 0;
}
.accordion > .accordion__header {
  width: 100%;
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: var(--spacing_sm);
  border-bottom: 1px solid var(--c_tools_divider);
  text-align: start;
  background-color: var(--c_backgrounds_midnight);
}
.accordion > .accordion__header:hover {
  background-color: var(--c_backgrounds_gray_baby);
}
.accordion > .accordion__header > .accordion__header__title {
  font-size: 1rem;
  font-weight: 600;
  line-height: normal;
  font-family: var(--font_primary);
  margin: 0;
  color: var(--c_text_black_primary);
}
@media (prefers-color-scheme: dark) {
  .accordion > .accordion__header img {
    filter: brightness(0) invert(1);
  }
}
.accordion > .accordion__content {
  display: none;
}
.accordion.open > .accordion__header {
  width: 100%;
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: var(--spacing_sm);
  border: none;
  background-color: var(--c_backgrounds_mi_telcel);
}
.accordion.open > .accordion__header > .accordion__header__title {
  font-size: 1rem;
  font-weight: 600;
  line-height: normal;
  font-family: var(--font_primary);
  margin: 0;
  color: var(--c_text_black_primary);
}
.accordion.open > .accordion__header:hover {
  background-color: var(--c_backgrounds_mi_telcel);
}
.accordion.open > .accordion__header img {
  transform: rotate(180deg);
}
@media (prefers-color-scheme: dark) {
  .accordion.open > .accordion__header img {
    filter: brightness(0) invert(1);
  }
}
.accordion.open > .accordion__content {
  display: block;
  background-color: var(--c_backgrounds_mi_telcel);
  padding: var(--spacing_2xs) var(--spacing_sm) var(--spacing_sm);
  border-bottom: 1px solid var(--c_tools_divider);
  text-align: start;
}
.accordion.open > .accordion__content > .accordion__content__text {
  font-size: 1rem;
  font-weight: 400;
  line-height: normal;
  font-family: var(--font_primary);
  margin: 0;
  color: var(--c_text_black_primary);
}
.accordion.open > .accordion__content > ol {
  margin-top: 0;
}

.encuesta {
  display: flex;
  gap: var(--spacing_sm);
  border: 1px solid var(--c_tools_divider);
  padding: var(--spacing_md);
  align-items: center;
  justify-content: center;
  width: calc(100% - var(--spacing_sm) * 2);
  max-width: 1024px;
  margin: 0 var(--spacing_sm);
  background-color: var(--c_backgrounds_midnight);
}
@media (min-width: 768px) {
  .encuesta {
    width: 100%;
    margin: 0 auto;
  }
}
.encuesta__question {
  font-size: 1.125rem;
  font-weight: 400;
  line-height: normal;
  font-family: var(--font_primary);
  margin: 0;
  color: var(--c_text_black_primary);
}
.encuesta__accept {
  font-size: 0.875rem;
  font-weight: 600;
  line-height: normal;
  font-family: var(--font_primary);
  margin: 0;
  color: var(--c_text_black_primary);
  border: 1px solid var(--c_tools_stroke);
  border-radius: var(--spacing_lg);
  padding: var(--spacing_3xs) var(--spacing_sm);
  background-color: var(--c_backgrounds_white);
  cursor: pointer;
  transition: all 0.3s ease-in-out;
}
.encuesta__accept:hover {
  background-color: var(--c_backgrounds_blue_baby);
}
.encuesta__accept.success {
  border-color: var(--c_button_success_active);
  background-image: url(../img/success.svg);
  background-repeat: no-repeat;
  background-position: center;
  background-size: 24px;
  color: transparent;
}
.encuesta__reject {
  font-size: 0.875rem;
  font-weight: 600;
  line-height: normal;
  font-family: var(--font_primary);
  margin: 0;
  color: var(--c_text_black_primary);
  border: 1px solid var(--c_tools_stroke);
  border-radius: var(--spacing_lg);
  padding: var(--spacing_3xs) var(--spacing_sm);
  background-color: var(--c_backgrounds_white);
  cursor: pointer;
  transition: all 0.3s ease-in-out;
}
.encuesta__reject:hover {
  background-color: var(--c_backgrounds_blue_baby);
}
.encuesta__reject.success {
  border-color: var(--c_button_success_active);
  background-image: url(../img/success.svg);
  background-repeat: no-repeat;
  background-position: center;
  background-size: 24px;
  color: transparent;
}

.devicesLinks {
  display: flex;
  width: 100%;
  gap: var(--spacing_sm);
  justify-content: center;
  align-items: center;
  padding: var(--spacing_sm);
  background-color: var(--c_backgrounds_blue_baby);
  flex-direction: column;
}
@media (min-width: 768px) {
  .devicesLinks {
    flex-direction: row;
    padding: var(--spacing_lg);
  }
}
.devicesLinks__card {
  position: relative;
  width: 100%;
  max-width: 501px;
  margin-top: var(--spacing_3xl);
}
.devicesLinks__image {
  position: absolute;
  width: 100%;
  max-width: 114px;
  bottom: var(--spacing_xs);
  left: var(--spacing_sm);
  z-index: 1;
}
@media (min-width: 768px) {
  .devicesLinks__image {
    max-width: 134px;
    left: var(--spacing_3xl);
  }
}
.devicesLinks__content {
  position: relative;
  border: 1px solid var(--c_tools_divider);
  border-radius: var(--spacing_md);
  padding: var(--spacing_sm);
  width: 100%;
  display: flex;
  flex-direction: column;
  gap: var(--spacing_xs);
  align-items: end;
  background-color: var(--c_backgrounds_blue_baby);
}
@media (min-width: 768px) {
  .devicesLinks__content {
    padding: var(--spacing_lg) var(--spacing_8xl);
  }
}
.devicesLinks__content-text {
  font-size: 1.25rem;
  font-weight: 600;
  line-height: normal;
  font-family: var(--font_primary);
  margin: 0;
  color: var(--c_text_black_primary);
  width: 100%;
  max-width: 180px;
}
@media (min-width: 768px) {
  .devicesLinks__content-text {
    max-width: 240px;
  }
}

.benefits {
  display: flex;
  flex-direction: column;
  gap: var(--spacing_sm);
  width: 100%;
  max-width: 1024px;
  margin: 0 auto;
  background-color: var(--c_backgrounds_white);
  padding: var(--spacing_sm);
}
@media (min-width: 768px) {
  .benefits {
    padding: 0;
  }
}
.benefits__cards {
  display: flex;
  gap: var(--spacing_sm);
  flex-wrap: wrap;
  justify-content: center;
}
.benefits__card {
  background-color: var(--c_backgrounds_white);
  padding: var(--spacing_sm);
  width: 100%;
  max-width: 244px;
  display: flex;
  flex-direction: column;
  align-items: center;
  flex: 1 1 calc(50% - var(--spacing_sm));
}
.benefits__card-text {
  font-size: 1rem;
  font-weight: 600;
  line-height: normal;
  font-family: var(--font_primary);
  margin: 0;
  color: var(--c_text_black_primary);
  text-align: center;
}
.benefits__card-helper {
  font-size: 0.875rem;
  font-weight: 400;
  line-height: normal;
  font-family: var(--font_primary);
  margin: 0;
  color: var(--c_text_support);
  text-align: center;
}
@media (prefers-color-scheme: dark) {
  .benefits__card-icon {
    filter: brightness(0) invert(1);
  }
}
.benefits__title {
  font-size: 1.625rem;
  font-weight: 600;
  line-height: normal;
  font-family: var(--font_primary);
  margin: 0;
  color: var(--c_text_black_primary);
  width: 100%;
  text-align: center;
}

.hero {
  background-color: var(--c_backgrounds_white);
  display: flex;
  gap: var(--spacing_sm);
  width: 100%;
  max-width: 1232px;
  margin: 0 auto;
  flex-direction: column;
}
@media (min-width: 768px) {
  .hero {
    flex-direction: row;
  }
}
.hero__image {
  max-width: 100%;
  max-height: 262px;
  height: auto;
  display: block;
  -o-object-fit: cover;
     object-fit: cover;
  -o-object-position: center;
     object-position: center;
}
@media (min-width: 768px) {
  .hero__image {
    max-width: 41.5296%;
    max-height: 330px;
  }
}
.hero__content {
  max-width: 100%;
  background-color: var(--c_backgrounds_blue_telcel);
  display: flex;
  flex-direction: column;
  gap: var(--spacing_sm);
  align-items: center;
  justify-content: center;
  padding: var(--spacing_sm);
}
@media (min-width: 768px) {
  .hero__content {
    max-width: 58.4704%;
  }
}
.hero__content-title {
  font-size: 2rem;
  font-weight: 600;
  line-height: normal;
  font-family: var(--font_primary);
  margin: 0;
  color: var(--c_text_white_secondary);
}
.hero__content-text {
  font-size: 1.125rem;
  font-weight: 400;
  line-height: normal;
  font-family: var(--font_primary);
  margin: 0;
  color: var(--c_text_white_secondary);
}

.banner {
  display: flex;
  flex-direction: column-reverse;
  width: 100%;
  background-color: var(--c_backgrounds_blue_bright);
  align-items: start;
  justify-content: center;
}
@media (min-width: 768px) {
  .banner {
    flex-direction: row;
    height: 100%;
    gap: var(--spacing_3xl);
    align-items: center;
  }
}
.banner__image {
  width: 100%;
  max-height: 207px;
  -o-object-fit: cover;
     object-fit: cover;
  -o-object-position: top;
     object-position: top;
}
@media (min-width: 768px) {
  .banner__image {
    width: 42%;
    max-width: 573px;
    max-height: 272px;
    -o-object-position: top;
       object-position: top;
  }
}
.banner__content {
  margin-left: 0;
  width: 100%;
  display: flex;
  flex-direction: column;
  align-items: center;
  padding: var(--spacing_sm);
}
@media (min-width: 768px) {
  .banner__content {
    width: 58%;
    max-width: 700px;
    margin-left: var(--spacing_8xl);
    padding: var(--spacing_sm) 0px;
    align-items: start;
  }
}
.banner__content-title {
  font-size: 1.625rem;
  font-weight: 600;
  line-height: normal;
  font-family: var(--font_primary);
  margin: 0;
  color: var(--c_text_black_primary);
  width: 100%;
  text-align: start;
}
@media (min-width: 768px) {
  .banner__content-title {
    font-size: 2.75rem;
    font-weight: 600;
    line-height: normal;
    font-family: var(--font_primary);
    margin: 0;
  }
}
.banner__content-subtitle {
  font-size: 1rem;
  font-weight: 400;
  line-height: normal;
  font-family: var(--font_primary);
  margin: 0;
  color: var(--c_text_black_primary);
  margin-bottom: var(--spacing_lg) !important;
  width: 100%;
  text-align: start;
}
@media (min-width: 768px) {
  .banner__content-subtitle {
    font-size: 1.438rem;
    font-weight: 400;
    line-height: normal;
    font-family: var(--font_primary);
    margin: 0;
  }
}

.header {
  display: flex;
  flex-direction: column;
  width: 100%;
  background-color: var(--c_backgrounds_white);
}
.header__logo {
  background-color: var(--c_backgrounds_white);
  max-width: 1024px;
  width: 100%;
  margin: 0 auto;
  padding: var(--spacing_sm);
}
@media (prefers-color-scheme: dark) {
  .header__logo-image {
    filter: brightness(0) invert(1);
  }
}
.header__counter {
  width: 100%;
  background-color: var(--c_button_error_active);
  display: flex;
  align-items: center;
  justify-content: center;
  flex-direction: column;
  padding: var(--spacing_md);
}
@media (min-width: 768px) {
  .header__counter {
    flex-direction: row;
  }
}
.header__counter-text {
  color: var(--c_text_white_secondary);
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  grid-template-rows: 35% 65%;
  align-items: center;
  justify-content: center;
  width: 100%;
  max-width: 428px;
}
@media (min-width: 768px) {
  .header__counter-text {
    grid-template-columns: 60% 10% 10% 10% 10%;
    grid-template-rows: repeat(1, 1fr);
    max-width: 868px;
  }
}
.header__counter-text-title {
  font-size: 1.438rem;
  font-weight: 600;
  line-height: normal;
  font-family: var(--font_primary);
  margin: 0;
  grid-column: 1/5;
  grid-row: 1/2;
  text-align: center;
}
@media (min-width: 768px) {
  .header__counter-text-title {
    grid-column: 1/2;
    grid-row: 1/2;
    font-size: 2rem;
    font-weight: 600;
    line-height: normal;
    font-family: var(--font_primary);
    margin: 0;
  }
}
.header__counter-text-time {
  font-size: 2.5rem;
  font-weight: 600;
  line-height: normal;
  font-family: var(--font_primary);
  margin: 0;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
}
.header__counter-text-time-text {
  font-size: 1rem;
  font-weight: 400;
  line-height: normal;
  font-family: var(--font_primary);
  margin: 0;
}

.footer {
  width: 100%;
  background-color: var(--c_backgrounds_blue_telcel);
  display: flex;
  align-items: center;
  justify-content: center;
  flex-direction: column;
  padding: var(--spacing_md);
  gap: var(--spacing_sm);
}
@media (min-width: 768px) {
  .footer {
    flex-direction: row;
  }
}
.footer p {
  font-size: 1rem;
  font-weight: 600;
  line-height: normal;
  font-family: var(--font_primary);
  margin: 0;
  color: var(--c_text_white_secondary);
  text-align: center;
}
@media (min-width: 768px) {
  .footer p {
    text-align: start;
  }
}
.footer a {
  font-size: 1rem;
  font-weight: 600;
  line-height: normal;
  font-family: var(--font_primary);
  margin: 0;
  color: var(--c_text_white_secondary);
  text-decoration: none;
}
.footer a:hover {
  text-decoration: underline;
}

.main {
  width: 100%;
  display: flex;
  flex-direction: column;
  gap: var(--spacing_3xl);
  padding-bottom: var(--spacing_3xl);
  background-color: var(--c_backgrounds_white);
}

.carousel {
  width: 100%;
  max-width: 1233px;
  display: flex;
  flex-direction: column;
  gap: var(--spacing_sm);
  margin: 0 auto;
}
.carousel__title {
  font-size: 1.625rem;
  font-weight: 600;
  line-height: normal;
  font-family: var(--font_primary);
  margin: 0;
  color: var(--c_text_black_primary);
  width: 100%;
  text-align: center;
}
.carousel__container {
  width: 100%;
}

.deviceCard {
  width: 100%;
  max-width: 242px;
  background-color: var(--c_backgrounds_midnight);
  border-radius: var(--spacing_xl);
  padding: var(--spacing_sm);
  border: 1px solid var(--c_tools_divider);
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  position: relative;
  height: 394px;
}
.deviceCard__discount {
  font-size: 1.25rem;
  font-weight: 600;
  line-height: normal;
  font-family: var(--font_primary);
  margin: 0;
  background-color: var(--c_tag_mas_vendido_text);
  color: var(--c_text_white_secondary);
  border-radius: var(--spacing_3xs);
  padding: 2px var(--spacing_xs);
  position: absolute;
  left: var(--spacing_sm);
  top: var(--spacing_6xl);
}
.deviceCard__image {
  width: 180px !important;
  height: 200px;
  -o-object-fit: cover;
     object-fit: cover;
}
.deviceCard__device {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  margin-bottom: var(--spacing_2xs);
}
.deviceCard__device-title {
  font-size: 1.125rem;
  font-weight: 600;
  line-height: normal;
  font-family: var(--font_primary);
  margin: 0;
  color: var(--c_text_black_primary);
  text-align: center;
  line-height: 20px;
}
.deviceCard__device-description {
  font-size: 0.812rem;
  font-weight: 400;
  line-height: normal;
  font-family: var(--font_primary);
  margin: 0;
  text-align: center;
  color: var(--c_text_support);
  line-height: 15px;
}
.deviceCard__price {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  margin-bottom: var(--spacing_sm);
}
.deviceCard__price-old {
  font-size: 1rem;
  font-weight: 400;
  line-height: normal;
  font-family: var(--font_primary);
  margin: 0;
  color: var(--c_text_support);
  text-decoration: line-through;
  text-align: center;
  line-height: 18px;
}
.deviceCard__price-new {
  font-size: 1.625rem;
  font-weight: 600;
  line-height: normal;
  font-family: var(--font_primary);
  margin: 0;
  color: var(--c_text_black_primary);
  text-align: center;
  line-height: 28px;
}
.deviceCard .button {
  min-width: 100%;
}