:root {
  --breakpoints-xs-gutter: 1.6rem;
  --breakpoints-xs-offset: 2.4rem;
  --breakpoints-xs-columns: 4;
  --breakpoints-xs-width: 36rem;
  --breakpoints-xl-gutter: 2.4rem;
  --breakpoints-xl-offset: 2.4rem;
  --breakpoints-xl-columns: 12;
  --breakpoints-xl-width: 120rem;
  --breakpoints-xxl-gutter: 2.4rem;
  --breakpoints-xxl-offset: 2.4rem;
  --breakpoints-xxl-columns: 12;
  --breakpoints-xxl-width: 144rem;
  --mediaq-xs: 0;
  --mediaq-mobile: 576px;
  --mediaq-tablet: 768px;
  --mediaq-desktop-sm: 992px;
  --mediaq-desktop-lg: 1200px;
  --mediaq-desktop-xl: 1400px;
  --color-primary-100: #ffe0e6;
  --color-primary-200: #ffadbc;
  --color-primary-300: #ff7a93;
  --color-primary-400: #ff4769;
  --color-primary-500: #ff1440;
  --color-primary-600: #de0029;
  --color-primary-700: #ad0020;
  --color-primary-800: #7a0017;
  --color-secondary-900: #131313;
  --color-gray-100: #f1f1f1;
  --color-gray-200: #d9d9d9;
  --color-gray-300: #c2c2c2;
  --color-gray-400: #a6a6a6;
  --color-gray-500: #8c8c8c;
  --color-gray-600: #737373;
  --color-gray-700: #595959;
  --color-gray-800: #404040;
  --color-white: #ffffff;
  --color-black: #111111;
  --text-color-light: #a6a6a6;
  --text-color-medium: #737373;
  --text-color-dark: #131313;
  --color-info-50: #f2f7ff;
  --color-info-100: #d0e0ff;
  --color-info-200: #8bb0f6;
  --color-info-500: #2c67c1;
  --color-info-700: #23529a;
  --color-error-50: #fff2f3;
  --color-error-100: #ffd0d4;
  --color-error-200: #fe8a9c;
  --color-error-500: #cf2d46;
  --color-error-700: #a62438;
  --color-alert-50: #fff5f2;
  --color-alert-100: #ffdad0;
  --color-alert-200: #ffa88a;
  --color-alert-500: #bb4802;
  --color-alert-700: #a33e02;
  --color-success-50: #f7fdf8;
  --color-success-100: #d0f1d8;
  --color-success-200: #8ad6a1;
  --color-success-500: #17863c;
  --color-success-700: #126b30;
  --color-draft-50: #fff9e6;
  --color-draft-100: #ffeeb3;
  --color-draft-200: #ffdd66;
  --color-draft-500: #ffc700;
  --color-draft-700: #e6b300;
  --color-sanidad: #0090d0;
  --color-carnet-joven: #ffd800;
  --color-transporte: #cb0101;
  --color-clave: #ff6600;
  --color-dni: #547180;
  --color-twitter: #1d9bf0;
  --color-facebook: #1877f2;
  --color-linkedin: #0a66c2;
  --color-instagram: linear-gradient(225.09deg, #8000ff 6.72%, #d50087 54.13%, #ffd600 93.85%);
  --color-state-open: #126b30;
  --color-state-close: #cf2d46;
  --opacity-black-super-light: rgba(19, 19, 19, 0.2);
  --opacity-black-light: rgba(19, 19, 19, 0.4);
  --opacity-black-medium: rgba(19, 19, 19, 0.65);
  --opacity-black-dark: rgba(19, 19, 19, 0.85);
  --opacity-white-super-light: rgba(255, 255, 255, 0.2);
  --opacity-white-light: rgba(255, 255, 255, 0.4);
  --opacity-white-medium: rgba(255, 255, 255, 0.65);
  --opacity-white-dark: rgba(255, 255, 255, 0.85);
  --font-large-size: 1.8rem;
  --font-large-line-height: 2.6rem;
  --font-base-size: 1.6rem;
  --font-base-line-height: 2.4rem;
  --font-small-size: 1.422rem;
  --font-small-line-height: 2.2rem;
  --font-xsmall-size: 1.264rem;
  --font-xsmall-line-height: 2rem;
  --font-mobile-size-h1: 2.88rem;
  --font-mobile-line-height-h1: 3.6rem;
  --font-mobile-size-h2: 2.278rem;
  --font-mobile-line-height-h2: 3rem;
  --font-mobile-size-h3: 1.8rem;
  --font-mobile-line-height-h3: 2.6rem;
  --font-desktop-size-h1: 5.2rem;
  --font-desktop-line-height-h1: 5.8rem;
  --font-desktop-size-h2: 3.649rem;
  --font-desktop-line-height-h2: 4.4rem;
  --font-desktop-size-h3: 2.278rem;
  --font-desktop-line-height-h3: 3rem;
  --font-regular-weight: 400;
  --font-semibold-weight: 600;
  --font-bold-weight: 700;
  --font-family-bold: 'IBM Plex Sans Medium', 'Arial Medium';
  --spacing-3xs: 0.4rem;
  --spacing-2xs: 0.8rem;
  --spacing-xs: 1.2rem;
  --spacing-sm: 1.6rem;
  --spacing-md: 2.4rem;
  --spacing-lg: 3.2rem;
  --spacing-xl: 4rem;
  --spacing-2xl: 4.8rem;
  --spacing-3xl: 6.4rem;
  --spacing-4xl: 7.2rem;
  --spacing-5xl: 9.6rem;
  --spacing-6xl: 11.2rem;
  --spacing-7xl: 12.8rem;
  --spacing-8xl: 16.4rem;
  --light-shadow-sm: 0px 0.6rem 0.6rem -0.6rem rgba(0, 0, 0, 0.16), 0px 0px 1px rgba(0, 0, 0, 0.4);
  --light-shadow-md: 0px 1.2rem 1.2rem -0.6rem rgba(0, 0, 0, 0.16), 0px 0px 1px rgba(0, 0, 0, 0.4);
  --light-shadow-lg: 0px 0.8rem 2.4rem -0.6rem rgba(0, 0, 0, 0.16), 0px 0px 1px rgba(0, 0, 0, 0.4);
  --light-shadow-xl: 0px 3.2rem 3.2rem -0.8rem rgba(0, 0, 0, 0.08), 0px 0px 3.2rem -0.8rem rgba(0, 0, 0, 0.12),
  0px 0px 1px rgba(0, 0, 0, 0.2);
  --dark-shadow-sm: 0px 0.6rem 0.6rem -0.6rem rgba(0, 0, 0, 0.34), 0px 0px 1px rgba(0, 0, 0, 0.56);
  --dark-shadow-md: 0px 1.2rem 1.2rem -0.6rem rgba(0, 0, 0, 0.64), 0px 0px 1px rgba(0, 0, 0, 0.56);
  --dark-shadow-lg: 0px 2.4rem 2.4rem -0.6rem rgba(0, 0, 0, 0.64), 0px 0px 1px rgba(0, 0, 0, 0.56);
  --dark-shadow-xl: 0px 4.8rem 4.8rem -0.6rem rgba(0, 0, 0, 0.88), 0px 0px 1px rgba(0, 0, 0, 0.72);
  --negative-shadow-md: 0px -4px 6px rgba(0, 0, 0, 0.23);




}  

body{
  margin:0;
}
.app-root{
 
  display: grid;
  grid-template-rows: 1fr auto;
  grid-template-columns: 100%;
  padding-top: 0px;
}

/***Header***/

:host {
  display: grid;
  grid-template-rows: auto 1fr;
  grid-template-columns: 1fr;
}

.header {
  width: 100%;
  display: flex;
  flex-direction: row;
  height: 5.6rem;
}

.header__content {
  width: 100%;
  display: flex;
  flex-direction: row;
  align-items: center;
}

.bg-black {
  background-color: var(--color-secondary-900);
}

.bg-white {
  background-color: var(--color-white);
}

.header__mobile__content {
  display: none;
}

.header__desktop__content {
  display: none;
}

.header__desktop__menu {
  display: none;
}

.header__logo__desktop {
  display: none;
}

.header__desktop__logo {
  display: none;
}

.header__desktop__options {
  display: none;
}

.header__desktop__btns {
  display: none;
}

.header__desktop__content__menu {
  display: none;
}

.header__desktop__content__title {
  display: none;
}

/* MEDIA Q MOBILE */
@media (max-width: 991px) {
  .header__mobile__content {
    width: 100%;
    display: flex;
  }

  .mobile__content {
    width: 100%;
    padding: 1.2rem 1.6rem;
    display: flex;
    flex-direction: row;
    align-items: center;
    justify-content: space-between;
  }

  .bg-black {
    background-color: var(--color-secondary-900);
  }

  .bg-white {
    background-color: var(--color-white);
  }

  .mobile__logo {
    width: 9.5rem;
    height: 2.8rem;
    cursor: pointer;
    img{
      width: 9.5rem;
      height: 2.8rem;
    }
  }

  .mobile__left {
    display: flex;
    flex-direction: row;
    align-items: center;
    gap: 1.6rem;
    cursor: pointer;
  }

  .mobile__right {
    display: flex;
    flex-direction: row;
    align-items: center;
    gap: 1.6rem;
    cursor: pointer;
    list-style-type: none;
  }
}

/* MEDIA Q DESKTOP */

@media (min-width: 992px) {
  .header {
    flex-direction: column;
    position: relative;
    height: min-content;
    box-shadow:
      0px 0.6rem 0.6rem -0.6rem rgba(0, 0, 0, 0.16),
      0px 0px 1px rgba(0, 0, 0, 0.4);
    z-index: 100;
  }

  .header__content {
    width: 100%;
    display:flex;
    height: 6rem;
    flex-direction: row-reverse;
    box-shadow:
      0px 0.6rem 0.6rem -0.6rem rgba(0, 0, 0, 0.16),
      0px 0px 1px rgba(0, 0, 0, 0.4);
    background-color: var(--color-secondary-900);
    align-items: flex-end;
  }

  .position--center {
    align-items: center;
  }

  .position--end {
    align-items: flex-end;
  }

  .header__desktop__content {
    width: 100%;
    display: flex;
    justify-content: space-between;
    padding: 0rem 4.8rem;
  }

  .header__desktop__content__menu {
    display: flex;
    justify-content: flex-end;
    gap: 3.2rem;
  }

  .header__desktop__content__title {
    display: flex;
    margin-left: 19.4rem;
    align-items: center;
    padding: 2.4rem 0;
  }

  .header__desktop__btns {
    width: 100%;
    display: flex;
    flex-direction: row;
    padding: 0rem 4.8rem;
    color: var(--color-white);
  }

  .position--both {
    justify-content: space-between;
  }

  .position--back {
    justify-content: flex-start;
  }

  .position--close {
    justify-content: flex-end;
  }

  .header__desktop__btns button {
    background: none;
    color: inherit;
    border: none;
    padding: 0;
    font: inherit;
    cursor: pointer;
    outline: inherit;
    display: flex;
    gap: 0.8rem;
    font-size: small;
    font-weight: 700;
    align-items: center;
  }

  .header__desktop__btns button:focus {
    border: 0.2rem solid var(--color-white);
  }

  .header__desktop__btns button span {
    text-decoration: underline;
    font-size: var(--font-small-size);
    line-height: var(--font-small-line-height);
    font-weight: var(--font-bold-weight);
  }

  .desktop__tags {
    display: flex;
    flex-direction: row;
    align-items: center;
    gap: 0.8rem;
    cursor: pointer;
    padding: 2.3rem 0rem;
    border-bottom: 0.4rem solid var(--color-secondary-900);
  }

  .desktop__tags:not(.desktop__tags--nobutton):hover {
    border-bottom: 0.4rem solid var(--color-white);
    transition: 0.1s;
  }

  .desktop__tags.desktop__tags--nobutton {
    cursor: auto;
  }

  .desktop__tags--active {
    border-bottom: 0.4rem solid var(--color-white);
  }

  .header__desktop__menu {
    z-index: 2;
    display: block;
    padding: 0 4.8rem;
    box-shadow:
      0px 1.2rem 1.2rem -0.6rem #00000029,
      0px 0px 1px 0px #00000066;
  }

  .header__desktop__logo {
    display: block;
    position: absolute;
    top: 0;
    width: 10.3rem;
    z-index: 10;
  }

  .header__logo__desktop {
    top: -7rem;
    display: block;
    position: relative;
    margin-left: 4.8rem;
  }

  .header__logo--left {
    cursor: pointer;
    left: 0;
  }

  .header__logo--center {
    cursor: pointer;
    left: calc(50% - 44.8rem);
    padding: 42px 20px;
  }

  .header__logo--token {
    cursor: pointer;
    left: calc(50% - 14.8rem);
  }

  .header__logo--disabled {
    cursor: default;
  }

  .option-menu {
    overflow: hidden;
  }

  .options__map {
    @include list_reset;
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(20rem, 1fr));
    gap: 2.2rem;
    padding: 4.6rem 4.8rem 4.8rem 4.8rem;
  }

  .header__desktop__options {
    display: flex;
    flex-direction: column;
    width: 100%;
    position: absolute;
    top: calc(0vh + 10rem);
    left: 0;
    background-color: var(--color-gray-100);
    box-shadow:
      rgb(0 0 0 / 16%) 0px 1.2rem 1.2rem -0.6rem,
      rgb(0 0 0 / 40%) 0px 0px 1px;
    z-index: 5;
  }

  .header_desktop_date {
    height: 3.4rem;
    width: 100%;
  }

  .header__desktop__text {
    width: calc(100% - 4.8rem * 2);
    margin: 0 auto;
    display: flex;
    justify-content: flex-end;
    padding-top: 1.2rem;
  }

  .options-down {
    max-height: 0px;
    transition: max-height 500ms ease-out;
  }

  .options-up {
    transition: max-height 500ms ease-in-out;
  }
}

@media (min-width: 1200px) {
  .header__desktop__menu {
    padding: 0px var(--spacing-8xl);
  }

  .header__desktop__content {
    padding: 0rem var(--spacing-8xl);
  }

  .header__desktop__text {
    width: calc(100% - var(--spacing-8xl) * 2);
    padding-right: unset;
  }

  .header__logo__desktop {
    margin-left: var(--spacing-8xl);
  }

  .options__map {
    padding: 4.6rem var(--spacing-8xl) 4.8rem var(--spacing-8xl);
  }
}

@media (min-width: 1400px) {
  .desktop__menu {
    max-width: 140rem;
    margin: 0 auto;
  }
}

@media (min-width: 1600px) {
  .header__desktop__content {
    max-width: 140rem;
    margin: 0 auto;
  }

  .header__desktop__text {
    max-width: 140rem;
    padding-right: auto;
  }

  /* .header__logo__desktop {
    width: 140rem;
  } */

  .options__map {
    max-width: 140rem;
    margin: 0 auto;
  }
}

@media (min-width: 1710px) {
  .header__logo--center {
    left: calc(50% - 6.8rem);
  }

  .header__logo--token {
    left: calc(50% - 6.8rem);
  }

  .header__logo__desktop {
    width: 140rem;
    margin: 0 auto;
  }
}

.header.fluid-mode {
  .header__desktop__content {
    max-width: initial;
    margin: 0;
    padding: 0 2.4rem;
  }

  .header__logo__desktop {
    margin-left: 2.4rem;
  }

  .header__desktop__menu {
    padding: 0 2.4rem;

    .desktop__menu {
      max-width: initial;
      margin: 0;
    }
  }
}
/*****Header******/


header{
min-height: auto;
display: flex;
flex-direction: column;
padding-top: env(safe-area-inset-top);
padding-right: env(safe-area-inset-right);
padding-bottom: env(safe-area-inset-bottom);
padding-left: env(safe-area-inset-left);
}

main{
  min-height: auto;
  display: flex;
  flex-direction: column;
  padding-top: env(safe-area-inset-top);
  padding-right: env(safe-area-inset-right);
  padding-bottom: env(safe-area-inset-bottom);
  padding-left: env(safe-area-inset-left);
  }

/****Maintenance***/

@media (min-width: 992px) {
.content {

  min-height: auto;
    padding: 0 4.8rem;
    display: flex;
    flex-direction: column;
    padding-top: 5.2rem;
  
}
}

@media (max-width: 991px) {
  .content {
  
    min-height: auto;
      padding: 0 2.4rem;
      display: flex;
      flex-direction: column;
      padding-top: 5.2rem;
    
  }
  }

 
@media (min-width: 992px) {
    .maintenance__container { 
    display: flex;
    flex-direction: column;
  }
  .maintenance__card {
    display: flex;
      flex-direction: row;
      gap: 3.2rem;
      justify-content: center;
      width: 100%;
      height: 300px;
  }

  .maintenance__text {
    display: flex;
    flex-direction: column;
    gap: 1.2rem;
    padding-top: 2.4rem;
    max-width: 29.2rem;
    width: 292px;
    height: 295px;
  }

  
  .maintenance__text--title {
    font-family: var(--font-family-bold);
    font-size: var(--font-desktop-size-h3);
    line-height: var(--font-desktop-line-height-h3);
    font-weight: var(--font-bold-weight);
    height: 175px;
    margin: 0px;
}

.maintenance__ui-text{
  font-weight: var(--font-regular-weight);
  font-size: 1.2rem;
  line-height: 1.5rem;
  margin: 0;
  white-space: pre-line;
  max-height: 72px;
  font-family: 'IBM Plex Sans', Arial, Helvetica, sans-serif;
}


.maintenance__img {
  display: flex;
  justify-content: center;
  padding: 2.4rem 0 6.4rem;
  gap: 3.2rem;
  }

  img {
    width: 312px;
  height: 190px;
  }


  }

  

  @media (max-width: 991px) {
    .maintenance__card {
      display: flex;
      flex-direction: column-reverse;
      justify-content: center;
      width: 100%;
    } 
    .maintenance__text {
      display: flex;
      flex-direction: column;
      gap: 1.2rem;
      padding-top: 2.4rem;
      
    }

   .maintenance__text--title {
    font-family: var(--font-family-bold);
    font-size: var(--font-mobile-size-h3);
    line-height: 2.2rem;
    font-weight: var(--font-bold-weight);
    margin: 0px;
  }

  .maintenance__ui-text{
    font-weight: var(--font-regular-weight);
    font-size: 1.2rem;
    line-height: 1.5rem;
    margin: 0;
    white-space: pre-line;
    max-height: 60px;
    font-family: 'IBM Plex Sans', Arial, Helvetica, sans-serif;
}


.maintenance__img {
  display: flex;
  justify-content: center;
 
  }

  img {
    width: 312px;
  height: 190px;
  }

  }

   

  


/***Maintenance***/