:root {
  --ma-index-blue: #3630c9;
  --ma-index-bg: #efefef;
  --ma-index-text: #303030;
  --ma-index-safe-top: env(safe-area-inset-top, 0px);
  --ma-index-safe-bottom: env(safe-area-inset-bottom, 0px);
  --ma-index-nav-height: 62px;
}

html.ma-index-stable,
html.ma-index-stable body {
  background: var(--ma-index-bg) !important;
}

html.ma-index-stable *,
html.ma-index-stable *::before,
html.ma-index-stable *::after {
  box-sizing: border-box;
}

html.ma-index-stable .viewport,
html.ma-index-stable .phone,
html.ma-index-stable #phone,
html.ma-index-stable .bottom-nav {
  animation: none !important;
}

@keyframes maIndexScreenIn {
  from { opacity: 0; transform: translate3d(0, 5px, 0); }
  to { opacity: 1; transform: translate3d(0, 0, 0); }
}

@keyframes maIndexScreenOut {
  from { opacity: 1; transform: translate3d(0, 0, 0); }
  to { opacity: 0; transform: translate3d(-10px, 0, 0); }
}

html.ma-index-stable .brand-logo {
  align-items: baseline;
  display: inline-flex;
  font-family: "Barlow", Arial, sans-serif;
  font-size: 32px;
  font-weight: 500;
  letter-spacing: -1.6px;
  line-height: 1;
  white-space: nowrap;
}

html.ma-index-stable .brand-logo__mi {
  color: #79a0dd;
  font-weight: 700;
}

html.ma-index-stable .brand-logo__argentina {
  color: #fff;
  font-weight: 500;
}

html.ma-index-stable .news-list {
  background: #fff;
  color: var(--ma-index-text);
}

html.ma-index-stable .news-item {
  border-bottom: 1px solid #dedede;
  padding: 30px 36px 32px;
}

html.ma-index-stable .news-item h2 {
  font-size: clamp(24px, 3.2vw, 38px);
  font-weight: 700;
  line-height: 1.12;
  margin: 0 0 8px;
}

html.ma-index-stable .news-item p {
  color: #777;
  font-size: clamp(20px, 2.8vw, 32px);
  font-weight: 400;
  line-height: 1.28;
  margin: 0;
}

html.ma-index-stable .ma-nav-icon {
  align-items: center;
  display: flex;
  flex: 0 0 21px;
  height: 21px;
  justify-content: center;
  margin: 0 auto;
  width: 21px;
}

html.ma-index-stable .ma-nav-icon svg {
  display: block;
  height: 100%;
  width: 100%;
}

html.ma-index-stable .ma-nav-icon--image {
  background-color: currentColor;
  background-position: center;
  background-repeat: no-repeat;
  background-size: contain;
  -webkit-mask-position: center;
  mask-position: center;
  -webkit-mask-repeat: no-repeat;
  mask-repeat: no-repeat;
  -webkit-mask-size: contain;
  mask-size: contain;
}

html.ma-index-stable .ma-nav-icon--inicio {
  -webkit-mask-image: url('/imgs/ui/inicio-bottom.png');
  mask-image: url('/imgs/ui/inicio-bottom.png');
}

html.ma-index-stable .ma-nav-icon--novedades {
  -webkit-mask-image: url('/imgs/ui/novedades-bottom.png');
  mask-image: url('/imgs/ui/novedades-bottom.png');
}

html.ma-index-stable .ma-nav-icon--telefonos {
  -webkit-mask-image: url('/imgs/ui/telefono-bottom.png');
  mask-image: url('/imgs/ui/telefono-bottom.png');
}

@media (max-width: 700px) {
  html.ma-index-stable,
  html.ma-index-stable body {
    height: 100%;
    min-height: 100%;
    overflow: hidden !important;
    overscroll-behavior: none;
  }

  html.ma-index-stable .viewport {
    display: block;
    height: 100vh;
    height: 100lvh;
    min-height: 100dvh;
    overflow: hidden;
  }

  html.ma-index-stable .phone {
    background: var(--ma-index-bg) !important;
    display: flex;
    flex-direction: column;
    height: 100vh;
    height: 100lvh;
    max-height: none;
    min-height: 100dvh;
    overflow: hidden;
    position: relative;
    width: 100%;
  }

  html.ma-index-stable .header {
    background: var(--ma-index-blue) !important;
    border-radius: 0;
    flex: 0 0 auto;
    overflow: visible;
    padding: var(--ma-index-safe-top) 15px 7px;
    position: relative;
    transform: none;
    z-index: 10;
  }

  html.ma-index-stable .header::before {
    display: none;
  }

  html.ma-index-stable .header-top {
    align-items: center;
    display: grid;
    gap: 8px;
    grid-template-columns: 42px minmax(0, 1fr) 42px;
    min-height: 35px;
  }

  html.ma-index-stable .hamburger {
    height: 30px;
    min-width: 42px;
    width: 42px;
  }

  html.ma-index-stable .hamburger span {
    height: 3px;
    left: 0;
    width: 24px;
  }

  html.ma-index-stable .hamburger span:nth-child(1) { top: 5px; }
  html.ma-index-stable .hamburger span:nth-child(2) { top: 13px; }
  html.ma-index-stable .hamburger span:nth-child(3) { top: 21px; }

  html.ma-index-stable .logo {
    display: flex;
    justify-content: center;
    min-width: 0;
  }

  html.ma-index-stable .logo .brand-logo {
    font-size: 27px;
    letter-spacing: -1.25px;
  }

  html.ma-index-stable .profile,
  html.ma-index-stable .profile .avatar {
    height: 34px;
    width: 34px;
  }

  html.ma-index-stable .profile {
    justify-self: end;
  }

  html.ma-index-stable .content {
    background: var(--ma-index-bg) !important;
    flex: 1 1 auto;
    margin: 0;
    min-height: 0;
    overflow-x: hidden;
    overflow-y: auto;
    overscroll-behavior-y: contain;
    padding: 0 !important;
    position: relative;
    scrollbar-width: none;
    -webkit-overflow-scrolling: touch;
  }

  html.ma-index-stable .content::-webkit-scrollbar,
  html.ma-index-stable .side-menu::-webkit-scrollbar,
  html.ma-index-stable .profile-scroll::-webkit-scrollbar {
    display: none;
  }

  html.ma-index-stable .tab-screen {
    background: transparent !important;
    filter: none !important;
    min-height: 100%;
    opacity: 1;
    transform: none;
    visibility: visible !important;
  }

  html.ma-index-stable .tab-screen:not(.active) {
    display: none !important;
  }

  html.ma-index-stable .tab-screen.active {
    display: block !important;
  }

  html.ma-index-stable .tab-screen.active.is-tab-entering {
    animation: maIndexScreenIn .2s cubic-bezier(.22, .61, .36, 1) both !important;
  }

  html.ma-index-stable body.is-route-leaving .content {
    animation: maIndexScreenOut .14s ease-in both !important;
    pointer-events: none;
  }

  html.ma-index-stable #screen-inicio {
    background: var(--ma-index-bg) !important;
    padding: 0 15px calc(var(--ma-index-nav-height) + var(--ma-index-safe-bottom) + 28px);
  }

  html.ma-index-stable #screen-inicio::before {
    display: none;
  }

  html.ma-index-stable .index-hero {
    background: var(--ma-index-blue);
    border-bottom-left-radius: 30px;
    border-bottom-right-radius: 30px;
    margin: 0 -15px;
    overflow: hidden;
    padding: 0 15px 41px;
    position: relative;
    transform: none;
    z-index: 1;
  }

  html.ma-index-stable .index-hero .greeting {
    color: #fff;
    font-size: 17px;
    font-weight: 500;
    letter-spacing: 0;
    line-height: 1.25;
    margin: 0;
    text-align: center;
    transform: none;
  }

  html.ma-index-stable .credentials {
    background: #d3eee2;
    border-radius: 7px;
    box-shadow: 0 3px 9px rgba(0, 0, 0, .09);
    gap: 12px;
    margin: -19px 0 0;
    min-height: 100px;
    padding: 15px 24px;
    position: relative;
    z-index: 2;
  }

  html.ma-index-stable .credentials .text {
    font-size: 16px;
    line-height: 1.14;
    max-width: 205px;
  }

  html.ma-index-stable .credentials-illustration {
    flex-basis: 78px;
    width: 78px;
  }

  html.ma-index-stable .section-title {
    font-size: 20px;
    letter-spacing: -.25px;
    line-height: 1.1;
    margin: 37px 0 20px;
  }

  html.ma-index-stable .grid {
    display: grid;
    gap: 10px 12px;
    grid-template-columns: repeat(4, minmax(0, 1fr));
    margin: 0;
  }

  html.ma-index-stable .tile {
    border-radius: 14px;
    box-shadow: 0 5px 10px rgba(0, 0, 0, .1);
    justify-content: center;
    min-height: 76px;
    padding: 9px 3px 8px;
  }

  html.ma-index-stable .tile img {
    height: 27px;
    width: 27px;
  }

  html.ma-index-stable .tile span {
    font-size: 12.5px;
    line-height: 1;
    margin-top: 9px;
  }

  html.ma-index-stable .profile-banner-wrap {
    margin: 36px -15px 0;
    padding: 0 0 8px 15px;
    scroll-padding-left: 15px;
  }

  html.ma-index-stable .profile-row {
    gap: 14px;
    padding-right: 15px;
  }

  html.ma-index-stable .profile-card {
    border-radius: 7px;
    gap: 14px;
    min-height: 90px;
    padding: 12px 16px;
    width: min(86vw, 310px);
  }

  html.ma-index-stable .profile-card > img,
  html.ma-index-stable .profile-card-illustration {
    width: 76px;
  }

  html.ma-index-stable .holiday-card .holiday-kicker {
    font-size: 13px;
    margin-bottom: 4px;
  }

  html.ma-index-stable .holiday-card .copy h3 {
    font-size: 17px;
    margin-bottom: 5px;
  }

  html.ma-index-stable .holiday-card .copy p {
    font-size: 12.5px;
    line-height: 1.16;
  }

  html.ma-index-stable .profile-card .copy h3 {
    font-size: 16px;
  }

  html.ma-index-stable .profile-card .copy p {
    font-size: 12px;
  }

  html.ma-index-stable .phone.tab-novedades .content {
    background: #fff !important;
  }

  html.ma-index-stable #screen-novedades {
    background: #fff !important;
    min-height: 100%;
    padding: 14px 0 calc(var(--ma-index-nav-height) + var(--ma-index-safe-bottom) + 16px);
  }

  html.ma-index-stable .news-item {
    padding: 25px 18px 29px;
  }

  html.ma-index-stable .news-item h2 {
    font-size: 17px;
    line-height: 1.1;
    margin-bottom: 5px;
  }

  html.ma-index-stable .news-item p {
    color: #747474;
    font-size: 14px;
    line-height: 1.28;
  }

  html.ma-index-stable #screen-telefonos {
    padding-bottom: calc(var(--ma-index-nav-height) + var(--ma-index-safe-bottom));
  }

  html.ma-index-stable .phones-screen {
    padding: 14px 10px 18px;
  }

  html.ma-index-stable .bottom-nav,
  html.ma-index-stable #phone > .bottom-nav,
  html.ma-index-stable .panel-bottom-nav {
    align-items: stretch !important;
    background: #fff !important;
    border-top: 1px solid #d4d4d4;
    bottom: 0 !important;
    box-shadow: 0 -2px 8px rgba(0, 0, 0, .035);
    box-sizing: border-box;
    display: flex !important;
    height: calc(var(--ma-index-nav-height) + var(--ma-index-safe-bottom)) !important;
    justify-content: space-around !important;
    left: 0 !important;
    margin: 0 !important;
    max-width: none !important;
    min-height: calc(var(--ma-index-nav-height) + var(--ma-index-safe-bottom)) !important;
    opacity: 1 !important;
    padding: 0 0 var(--ma-index-safe-bottom) !important;
    pointer-events: auto !important;
    position: absolute !important;
    right: 0 !important;
    top: auto !important;
    transform: none !important;
    transition: none !important;
    visibility: visible !important;
    width: 100% !important;
    z-index: 40 !important;
  }

  html.ma-index-stable .nav-item,
  html.ma-index-stable .nav-item-link {
    align-items: center;
    align-self: stretch;
    color: #8d8d8d;
    display: flex;
    flex: 1 1 25%;
    flex-direction: column;
    gap: 4px;
    height: var(--ma-index-nav-height) !important;
    justify-content: center;
    min-height: var(--ma-index-nav-height) !important;
    min-width: 0;
    text-decoration: none;
    -webkit-tap-highlight-color: transparent;
  }

  html.ma-index-stable .nav-item.active,
  html.ma-index-stable .nav-item-link.active {
    color: #352fc2;
  }

  html.ma-index-stable .nav-item span:last-child {
    font-size: 12px;
    font-weight: 600;
    line-height: 1;
  }

  html.ma-index-stable .ma-nav-icon--tina {
    flex-basis: 23px;
    height: 23px;
    width: 23px;
  }

  html.ma-index-stable .menu-overlay,
  html.ma-index-stable .profile-overlay {
    display: none !important;
  }

  html.ma-index-stable .side-menu,
  html.ma-index-stable .profile-panel {
    backface-visibility: hidden;
    bottom: 0;
    height: 100%;
    inset: 0;
    opacity: 1 !important;
    position: absolute;
    top: 0;
    visibility: hidden;
    will-change: transform;
    -webkit-overflow-scrolling: touch;
  }

  html.ma-index-stable .side-menu {
    background: #f4f4f4;
    overflow-x: hidden;
    overflow-y: auto;
    transform: translate3d(-100%, 0, 0);
    transition: transform .32s cubic-bezier(.22, .61, .36, 1), visibility 0s linear .32s;
    z-index: 70;
  }

  html.ma-index-stable .phone.menu-open .side-menu {
    transform: translate3d(0, 0, 0);
    transition-delay: 0s;
    visibility: visible;
  }

  html.ma-index-stable .side-menu-top {
    background: var(--ma-index-blue);
    color: #fff;
    min-height: 220px;
    padding: calc(14px + var(--ma-index-safe-top)) 20px 22px;
  }

  html.ma-index-stable .side-menu-bar {
    gap: 16px;
    margin: 0 0 25px;
    min-height: 38px;
  }

  html.ma-index-stable .menu-back {
    color: #fff;
    height: 28px;
    width: 28px;
  }

  html.ma-index-stable .menu-back.ma-back-icon-button .ma-back-icon-svg {
    height: 24px;
    width: 24px;
  }

  html.ma-index-stable .side-menu-logo.brand-logo {
    font-size: 34px;
    height: auto;
    letter-spacing: -1.7px;
  }

  html.ma-index-stable .side-menu-profile {
    gap: 22px;
    grid-template-columns: 88px minmax(0, 1fr);
  }

  html.ma-index-stable .side-menu-avatar,
  html.ma-index-stable .side-menu-avatar .avatar {
    height: 88px;
    width: 88px;
  }

  html.ma-index-stable .side-menu-avatar .avatar::before {
    height: 34px;
    left: 27px;
    top: 12px;
    width: 34px;
  }

  html.ma-index-stable .side-menu-avatar .avatar::after {
    bottom: 8px;
    height: 31px;
    left: 16px;
    width: 56px;
  }

  html.ma-index-stable .side-menu-avatar .check {
    bottom: 2px;
    font-size: 18px;
    height: 34px;
    left: auto;
    right: -4px;
    width: 34px;
  }

  html.ma-index-stable .side-menu-user strong {
    font-size: 20px;
    margin-bottom: 7px;
  }

  html.ma-index-stable .side-menu-user .cuil {
    font-size: 16px;
    margin-bottom: 7px;
  }

  html.ma-index-stable .side-menu-user .status {
    font-size: 14px;
  }

  html.ma-index-stable .side-menu-group {
    border-top: 1px solid #d7d7d7;
  }

  html.ma-index-stable .side-menu-group:first-of-type {
    border-top: 0;
  }

  html.ma-index-stable .side-menu-link {
    background: #f4f4f4;
    gap: 23px;
    grid-template-columns: 34px minmax(0, 1fr);
    min-height: 68px;
    padding: 0 22px;
  }

  html.ma-index-stable .side-menu-group--account .side-menu-link {
    min-height: 64px;
  }

  html.ma-index-stable .side-menu-group--security .side-menu-link {
    min-height: 92px;
  }

  html.ma-index-stable .side-menu-group--info .side-menu-link {
    min-height: 68px;
  }

  html.ma-index-stable .side-menu-group--session .side-menu-link {
    min-height: 58px;
  }

  html.ma-index-stable .side-menu-icon,
  html.ma-index-stable .side-menu-icon svg {
    height: 30px;
    width: 30px;
  }

  html.ma-index-stable .side-menu-link span:last-child {
    font-size: 17px;
    font-weight: 700;
  }

  html.ma-index-stable .profile-panel {
    background: #ececec;
    display: grid;
    grid-template-rows: auto minmax(0, 1fr) auto;
    overflow: hidden;
    transform: translate3d(100%, 0, 0);
    transition: transform .32s cubic-bezier(.22, .61, .36, 1), visibility 0s linear .32s;
    z-index: 75;
  }

  html.ma-index-stable .phone.profile-open .profile-panel {
    transform: translate3d(0, 0, 0) !important;
    transition-delay: 0s;
    visibility: visible;
  }

  html.ma-index-stable .profile-panel::after,
  html.ma-index-stable .profile-panel.menu-loading::after,
  html.ma-index-stable .profile-panel:not(.menu-ready)::after {
    display: none !important;
  }

  html.ma-index-stable .profile-scroll,
  html.ma-index-stable .profile-panel .profile-scroll,
  html.ma-index-stable .profile-panel:not(.menu-ready) .profile-scroll,
  html.ma-index-stable .profile-panel.menu-loading .profile-scroll,
  html.ma-index-stable .phone.profile-open .profile-panel:not(.menu-ready) .profile-scroll {
    opacity: 1 !important;
    pointer-events: auto !important;
    transform: none !important;
    visibility: visible !important;
  }

  html.ma-index-stable .phone.menu-open > .bottom-nav,
  html.ma-index-stable .phone.profile-open > .bottom-nav {
    display: flex !important;
  }

  html.ma-index-stable .phone:not(.profile-open) .profile-panel .panel-bottom-nav {
    display: flex !important;
  }

  html.ma-index-stable body.is-layer-open {
    touch-action: none;
  }

  html.ma-index-stable a,
  html.ma-index-stable button {
    -webkit-tap-highlight-color: transparent;
  }
}

@media (max-width: 370px) {
  html.ma-index-stable .tile span { font-size: 11.5px; }
  html.ma-index-stable .grid { gap: 9px; }
  html.ma-index-stable .credentials { padding-inline: 18px; }
  html.ma-index-stable .side-menu-group--security .side-menu-link { min-height: 82px; }
}

@media (prefers-reduced-motion: reduce) {
  html.ma-index-stable .tab-screen.active.is-tab-entering,
  html.ma-index-stable body.is-route-leaving .content {
    animation: none !important;
  }

  html.ma-index-stable .side-menu,
  html.ma-index-stable .profile-panel {
    transition-duration: .01ms !important;
  }
}