*, *::before, *::after {
    box-sizing: border-box;
}
  
@font-face {
    font-family                 : 'Open Sans', 'Lato'; 
    src                         : url('/fuente/Open_Sans/OpenSans-Light.ttf');
    src                         : url('/fuente/Lato/Lato-Regular.ttf');
}
  
:root {
  
    --max-width                 : 1200px;
  
    --primary-color             : #FF0000;
    --primary-color-alt         : #AE0606;
    --title-color               : #0026D5;
    --sub-title-color           : #121F26;
    --text-color                : #676F73;
    --body-bg-color             : #FCFFFC;
    --white-color               : #ffffff;
    --color                     : var(--primary-color);
    --color-alt                 : var(--primary-color-alt);
  
    --body-font                 : 'Open Sans', sans-serif;
    --title-font                : 'Black Ops One', sans-serif;
    --sub-title-font            : 'Allerta Stencil', sans-serif;
  
    --header-height             : 4rem;
    --section-spacing           : 4rem;
    --block-spacing             : 2rem;
    --body-line-height          : 1.5em;
    --title-line-height         : 1.1em;
    
    --h1-font-size              : 1.2rem;         
    --h2-font-size              : 1.15rem; 
    --h3-font-size              : 1rem;
    --normal-font-size          : .875rem;
    --small-font-size           : .75rem;
  
  
    --border-radius             : 0.75rem;
    --box-shadow                : 0 2px 2px rgba(36, 47, 66, 0.1);
}
  
@media screen and (min-width: 1024px) {
  
    :root {
      --header-height           : 4.5rem;
      --section-spacing         : 8rem;
      --block-spacing           : 4rem;
      --h1-font-size            : 1.9rem;
      --h2-font-size            : 1.75rem;
      --h3-font-size            : 1.5rem;
      --medium-font-size        : 1.25rem;
      --normal-font-size        : 1rem;
    }
}
  
body {
    display                     : flex;
    flex-direction              : column;
    min-height                  : 100vh;
    color                       : var(--text-color);
    padding-top                 : 2.5rem;
    font-family                 : var(--body-font);
    font-size                   : var(--normal-font-size);
    line-height                 : var(--body-line-height);
    background-color            : var(--body-bg-color);
}

@media screen and (min-width: 1024px) {
    
    body {
        padding-top             : var(--header-height);
    }
}

a {
    color                       : #0057B8;
    text-decoration             : none;
}

p {
    color                       : var(--text-color);
}

img {
    display                     : block;
}

h1 {
    color                       : var(--title-color);
    font-family                 : var(--title-font);
    font-size                   : var(--h1-font-size);
    line-height                 : var(--title-line-height);
}

h2 {
    color                       : var(--title-color);
    font-family                 : var(--sub-title-font);
    font-size                   : var(--h2-font-size);
    line-height                 : var(--title-line-height);
}

.parrafo-pc {
    color                       : var(--sub-title-color);
    font-family                 : var(--sub-title-font);
    font-size                   : 1.15rem;
}

@media screen and (min-width: 1024px) {
    
    .parrafo-pc {
        font-size               : 1.75rem;
    }
}

.encabezado {
    display                     : none;
}

@media screen and (min-width: 1024px) {
    
    .encabezado {
        display                 : block;
        position                : fixed;
        top                     : 0;
        height                  : var(--header-height);
        width                   : 100%;
        padding                 : 0 20px;
        background              : var(--primary-color);
        box-shadow              : var(--box-shadow);
    }

    .nav {
        display                 : flex;
        justify-content         : center;
        align-items             : center;
    }

    .menu {
        display                 : flex;
        margin-left             : auto;
        list-style              : none;
        padding                 : 0;
    }

    .link {
        display                 : block;
        padding                 : .5rem .75rem;
        color                   : var(--white-color);
        font-size               : 1.25rem;
        cursor                  : pointer;
        border-right            : 1px var(--primary-color-alt) solid;
    }

    .link:hover {
        color                   : var(--title-color);
    }

    .logo-nav {
        height                  : var(--header-height);
    }
}

.encabezado-2 {
    position                    : fixed;
    top                         : 50%;
    transform                   : translate(-50%, -50%);
    left                        : 30px;
    width                       : 66px;
    height                      : 80%;
    max-height                  : 360px;
    display                     : flex;
    justify-content             : space-around;
    align-items                 : center;
    padding                     : .15rem .15rem;
    background-color            : var(--primary-color);
    box-shadow                  : var(--box-shadow);
    border-radius               : 0 var(--border-radius) var(--border-radius) 0; 
}

.logo-nav-2 {
    height                      : 3rem;
    padding                     : .1rem;
}

.menu-2 {
    display                     : flex;
    justify-content             : center;
    align-items                 : center;
    flex-direction              : column;
    margin-top                  : 10px;
}

.icon {
    max-width                   : 45%;
    padding                     : .4rem 0;
    cursor                      : pointer;
    border-bottom               : 1px var(--primary-color-alt) solid;
}
 
@media screen and (min-width: 1024px) {
    
    .encabezado-2 {
        display                 : none;
    }
}

@media screen and (min-width: 280px) and (max-width: 990px) and (orientation: landscape) {
    
    .encabezado-2 {
        top                     : 0;
        left: auto;
        height                  : 100%;
        transform               : none;
        max-height              : none;
    }

    .icon-2 {
        display                 : none;
      }
}

.capa1,
.capa2,
.capa3,
.capa4,
.capa5,
.capa6,
.cap1,
.cap2,
.cap3,
.cap4,
.cap5,
.cap6 {
    position                    : fixed;
    top                         : 0;
    width                       : 100%;
    height                      : 100%;
    opacity                     : 0;
    transition                  : opacity 0.35s;
    pointer-events              : none;
}
 
.capa1.active,
.capa2.active,
.capa3.active,
.capa4.active,
.capa5.active,
.capa6.active,
.cap1.active,
.cap2.active,
.cap3.active,
.cap4.active,
.cap5.active,
.cap6.active {
    opacity                     : 1;
    pointer-events              : initial;
}

.contenido-capa1,
.contenido-capa2,
.contenido-capa3,
.contenido-capa4,
.contenido-capa5,
.contenido-capa6,
.contenido-cap1,
.contenido-cap2,
.contenido-cap3,
.contenido-cap4,
.contenido-cap5,
.contenido-cap6 {
    position                    : absolute;
    top                         : 50%;
    left                        : 50%;
    transform                   : translate(-50%, -50%);
    width                       : 100%;
    height                      : 100%;
    text-align                  : center;
    background-color            : #FFF4F4;
    border-radius               : 0.25rem;
    overflow                    : auto;
}

.contenido-capa1 h2, 
.contenido-capa1 p,
.contenido-capa2 h2, 
.contenido-capa2 p,
.contenido-capa3 h2, 
.contenido-capa3 p,
.contenido-capa4 h2, 
.contenido-capa4 p,
.contenido-capa5 h2, 
.contenido-capa5 p,
.contenido-capa6 h2, 
.contenido-capa6 p,
.contenido-cap1 h2, 
.contenido-cap1 p,
.contenido-cap2 h2, 
.contenido-cap2 p,
.contenido-cap3 h2, 
.contenido-cap3 p,
.contenido-cap4 h2, 
.contenido-cap4 p,
.contenido-cap5 h2, 
.contenido-cap5 p,
.contenido-cap6 h2, 
.contenido-cap6 p {
    margin                      : 1rem;
}

.img-angulo-volver {
    display                     : flex;
    justify-content             : start;
    align-items                 : center;
    position                    : sticky;
    top                         : 0;
    left                        : 0;
    height                      : 2.5rem;
    width                       : 100%;
    background-color            : #FFF4F4;
    box-shadow                  : var(--box-shadow);
    z-index                     : 5;
}

.img-angulo-volver img {
    height                      : 1.75rem;
}

.img-angulo-volver h2 {
    margin                      : 0 1rem;
}

@media screen and (min-width: 1024px) {

    .img-angulo-volver {
        justify-content         : center;
        height                  : 3.5rem;
    }
    
    .img-angulo-volver img {
        height                  : 3rem;
    }

    .img-angulo-volver h2 {
        margin                  : 0 20rem;
    }
}

.sub {
    font-family                 : var(--sub-title-font);
    font-size                   : var(--normal-font-size);
    color                       : var(--sub-title-color);
    padding                     : 0 .15rem;
}

.sub-titulo-h3 {
    margin-top                  : 0;
    color                       : var(--primary-color);
    font-family                 : var(--sub-title-font);
    font-size                   : var(--normal-font-size);
    line-height                 : var(--body-line-height);
    text-align                  : center;
}

@media screen and (min-width: 1024px) {
    
    .sub {
        padding                     : 0 10rem;
        font-size                   : var(--medium-font-size);
    }

    .sub-titulo-h3 {
        font-size                   : var(--medium-font-size);
        
    }
}

.lista-articulo {
    display                     : grid;
    grid-template-columns       : repeat(1 1fr);
    gap                         : var(--block-spacing);
    width                       : 90%;
    margin-top                  : 10px;
    margin-left                 : auto;
    margin-right                : auto;
    text-align                  : left;
    border-top                  : 2px solid var(--primary-color-alt);
    padding                     : 1.25rem 0rem;
}

@media screen and (min-width: 1024px) {
  
    .lista-articulo {
        grid-template-columns   : 1fr 1fr;
        width                   : 70%;
        margin-top              : 20px;
        padding                 : 1.25rem 1.25rem;
    }
}
  
.lista-articulo > div:first-of-type {
    order                       : 2;
}
  
@media screen and (min-width: 1024px) {
  
    .lista-articulo:nth-child(odd) > div:nth-of-type(2) {
      order                     : 2;
    }
  
}

.lista-articulo h2 {
    margin-bottom               : .5rem;
}
  
@media screen and (min-width: 1024px) {
  
    .lista-articulo h2 {
      text-align                : center;
    }
  
}
  
.lista-articulo img {
    height                      : 150px;
    margin-left                 : auto;
    margin-right                : auto;
}
  
@media screen and (min-width: 1024px) {
  
    .lista-articulo img {
      height                    : 250px;
    }
  
}
  
.lista-box ul{
    list-style-type             : none;
    padding                     : 0;
}
  
.lista-box li{
    margin-bottom               : .75rem;
}
  
.check {
    display                     : inline-block;
    height                      : 5px;
    width                       : 10px;
    border-bottom               : 2px solid var(--primary-color);
    border-left                 : 2px solid var(--primary-color);
    transform                   : rotate(-45deg);
    margin-right                : 5px;
    margin-bottom               : 4px;
}

.check-ap {
    display                     : inline-block;
    height                      : 12px;
    width                       : 12px;
    border                      : 2px solid #FF0000;
    border-radius               : 1rem;
}
  
.boton-w {
    background-color            : var(--primary-color);
    color                       : var(--white-color);
    text-decoration             : none;
    border-radius               : 30px;
    padding                     : .50rem 1.25rem;
}

@media screen and (min-width: 1024px) {
  
    .boton-w {
      text-align                : left;
    }
  
}

form {
    display                     : flex;
    justify-content             : center;
    align-items                 : center;
    padding                     : 1rem;
}
    
legend {
    padding                     : 0 .5rem;
    text-align                  : center;
    color                       : var(--sub-title-color);
    font-family                 : var(--sub-title-font);
    font-size                   : var(--medium-font-size);
}
      
select {
    width                       : 100%;
    background-color            : #FBEFF4;
    border                      : solid 2px #000;
    border-radius               : 3px;
    padding                     : .25rem;
}
      
fieldset {
    border                      : solid 2px var(--primary-color);
    padding                     : 1rem 1rem;
    width                       : 100%;
}
    
.tarifa {
    padding                     : .5rem;
    text-align                  : center;
    color                       : var(--sub-title-color);
    font-size                   : var(--normal-font-size);
    line-height                 : var(--body-line-height);
}

.horario {
    display                     : flex;
    flex-direction              : column;
    justify-content             : center;
    align-items                 : center;
  }

.parrafo-hr, .hr-dia {
    font-family                 : var(--sub-title-font);
    font-size                   : var(--medium-font-size);
    color                       : var(--sub-title-color);
    /* border-bottom               : 2px solid var(--sub-title-color); */
}

.hr-dia {
    /* border-bottom               : none; */
    color                       : var(--primary-color);
}

.p {
    color                       : var(--sub-title-color);
    text-align                  : center; 
}

.zonas {
    display                     : grid;
    grid-template-columns       : 1fr 1fr;
    gap                         : var(--block-spacing);
  }
  
.parrafo-zn {
    display                     : flex;
    justify-content             : center;
    align-items                 : center;
    flex-direction              : column;
    font-family                 : var(--sub-title-font);
    font-size                   : var(--medium-font-size);
    color                       : var(--sub-title-color);
    text-align                  : center;
    line-height                 : var(--body-line-height);    
}

.sp-zn {
    text-align                  : center;
    color                       : var(--primary-color);
}

.contenido-grid {
    display                     : grid;
    grid-template-columns       : repeat(1, 1fr);
    grid-column-gap             : .5em;
    grid-row-gap                : .5em;
    margin-left                 : 75px;
    margin-right                : 5px;
    text-align                  : left;
}

.grid-item-1,
.grid-item-2,
.grid-item-3 {
    display                     : flex;
    flex-direction              : column;
    justify-content             : center;
    align-items                 : center;
    margin-top                  : auto;
    margin-bottom               : auto;
    border-top                  : 2px solid var(--primary-color-alt);
}

.item-1-1 {
    display                     : flex;
    justify-content             : center;
    align-items                 : center;
    flex-direction              : column;
}

.grid-item-1 {
    padding-bottom              : .5rem;
    border-top                  : none;
}

.grid-item-2 {
    padding-bottom              : 1rem;
}

.grid-item-3 {
    padding-bottom              : 2rem;
    border-bottom               : none;
}

.grid-img {
    display                     : flex;
    flex-direction              : row;
}

.icono {
    height                      : 70px;
}

.iconos {
    height                      : 55px;
    padding                     : .5rem;
}

@media screen and (min-width: 0) and (max-width: 280px) {
    
    .contenido-grid {
        margin-left             : 75px;
    }

    .grid-item-1 {
        height                  : 33.5rem;
    }

    h1 {
        font-size               : 1.1rem;
    }

    .iconos {
        height                  : 45px;
        padding                 : .2rem;
    }

}

@media screen and (min-width: 281px) and (max-width: 1023px) {
    
    .grid-item-1 {
        height                  : 28rem;
        padding-bottom          : 1.5rem;
    }

    h1 {
        font-size               : var(--h1-font-size);
    }

}

@media screen and (min-width: 281px) and (max-width: 1023px) and (orientation: landscape) {
      
    .grid-item-1 {
        height                  : 18rem;
        padding                 : .15rem;
    }

    .grid-item-2, 
    .grid-item-3 {
        height                  : 10rem;
        padding-top             : .15rem;
    }

    .iconos {
        padding                 : 0 2rem;
    }

    h1 {
        font-size               : 1.5rem;
    }

}

@media screen and (min-width: 1024px) {
      
    .contenido-grid {
      grid-template-columns     : repeat(2, 1fr);
      height                    : 80vh;
      margin-left               : auto;
      margin-right              : auto;
    }
  
    .grid-item-1 {
      justify-content           : space-around;
      grid-row-start            : 1;
      grid-column-start         : 1;
      grid-row-end              : 3;
      height                    : 25rem;  
      border-right              : 2px solid var(--primary-color-alt);
      border-bottom             : none;
      padding                   : 0 1.5rem;
    }

    .item-1-1 {
        display                 : flex;
        flex-direction          : row;
        align-items             : baseline;
    }
    
    .grid-item-2, 
    .grid-item-3 {
      height                    : 11rem;
      width                     : 95%;
      grid-column-start         : 2;
      border-top                : none;
      border-bottom             : 2px solid var(--primary-color-alt);
    }
    
    .grid-item-3 {
      border                    : none;
    }

    .grid-item-2-3 {
        display                 : flex;
        flex-direction          : column;
        justify-content         : space-between;
        align-items             : center;
        margin-top              : auto;
        padding                 : 5rem 0;
    }
  
    .icono {
      height                    : 80px;
    }

    .iconos {
        height                  : 65px;
        padding                 : 0 2rem;
    }
  
}

.footer-principal {
    display                     : flex;
    justify-content             : center;
    align-items                 : center;
    margin-top                  : auto;
    border-top                  : 2px solid #ededed;
    height                      : 3.5rem;
    width                       : 100%;
    font-size                   : var(--small-font-size);
}
  
.footer-principal p {
    text-align                  : center;
    
}

@media screen and (min-width: 1024px) {
    
    .footer-principal p {
        margin                  : 0;
    }
}

@media screen and (min-width: 280px) and (max-width: 1023px) and (orientation: landscape) {
    
    .footer-principal {
        display                 : none;
      }
}