@charset "utf-8";
@import url('https://fonts.googleapis.com/css2?family=Barlow+Condensed:wght@300;500;700&family=Roboto:wght@300&display=swap');
@import url('https://fonts.googleapis.com/css2?family=Rubik:ital,wght@0,400;0,700;1,400&display=swap');

*{margin: 0;
    padding: 0;
    border: 0;
    box-sizing: border-box;}
    
    .html{ scroll-behavior: smooth;}

    body{
        background-color: white;
        display: grid;
        grid-template-columns: 1fr;
        grid-template-rows: auto;
        grid-template-areas: 'header'
                             'main'
                             'footer';
        width: 100%;}
main {width:100%;}
        /* HEADER Y NAVEGACIÓN */
header {
    display: flex;
    text-align: center;
    background: linear-gradient(270deg, rgba(38,240,242,1) 0%, rgba(159,210,131,1) 27%, rgba(253,187,45,1) 64%, rgba(253,110,45,1) 100%);
    justify-content: space-between;
    width: 100%;}
header ul {font-family: 'Barlow Condensed', sans-serif;}
div.imagenes {
    width: 100%;
    display: flex;
    justify-content: space-between;
    align-items: center;}
div.imagenes a {display: inline;
        margin-right: .5em;}
#logoapp {
        max-width: 4em;
        min-width: 3em;
        margin: 0.5em 1.5em 0.5em 0.5em;}
#hamburguesa {
        min-width: 10px;
        max-width: 25px;
        margin-left: 1em;}
nav.menu a {color:#fff; width: 15em;}
nav.menu a:hover { color: black;}

                    /* FOOTER */
footer {
    font-family: 'Barlow Condensed';
    background-color: #000000;
    color: white;
    font-weight: 300;
    text-align: right;
    font-size: 0.8em;
    width: 100%;
    padding: 0.5em 2em 0.5em 2em;}
footer div {
    display: flex;
    flex-direction: row;
    align-items: center;
    gap: 1.5em;}
footer ul {width: 40%;}
footer div figure {
    width: 65%;
    display: flex;
    justify-content: flex-start;
    margin: 2em 0em 2em 0em;}
                    
li.footer {
    background: none;
    padding: none;
    display: flex;
    justify-content: flex-end;}
                    
footer p{padding: .5em;}
                    
#pinfooter {width: 1.4em; height: 100%;}
#tel {width: 0.8em; height: 100%;}
#imagotipo {width: 100%; height: auto;}

        /*INICIO MENU HAMBURGUESA*/
/*desaparecer la casilla de verificación*/
#btn-menu{display: none;}

/*hago visible la img del menú hamburguesa*/
header label{
    display: inherit;
    z-index: 999;}
/*convierto el cursor en mano porque tengo una img y no un vínculo*/
header label:hover{
    cursor: pointer; 
}

/*saco del flujo de cajas a menú para poder ubicarlo fuera del plano*/
.menu{
    position: absolute;
    width: 100%;
    margin-left: -110%;
    transition: all .3s;
    text-align: center;
}
.menu ul{
    flex-direction: column;
    background: linear-gradient(180deg, rgba(38,240,242,.5) 0%, rgba(255,255,255,.5)100);
    display: flex;
    justify-items: center;
}
.menu li{
    font-weight: 500;
    width: 80%;
    padding: .25em;
    background: linear-gradient(270deg, rgba(38,240,242,1) 0%, rgba(159,210,131,1) 27%, rgba(253,187,45,1) 64%, rgba(253,110,45,1) 100%);
    margin: .3em;
    border-radius: .3em;}

/*uso el pseudo selector :checked para identificar cuando  la casilla de verificación está marcada.
Y para que esto ejecute otro elemento necesito el combinador de hermanos (~)*/
#btn-menu:checked ~ .menu{
    margin-left: 0;
    z-index: 999;
}
/*FIN MENU HAMBURGUESA*/


/* GENERALES TÍTULOS, PÁRRAFOS, LISTAS */
a {text-decoration: none;}
section p { text-align: left;
    font-size: 1em;
    font-family: 'Rubik Regular', sans-serif;
    width: 85%;}

h1{ grid-area: 1/1/2/3;
    font-family: 'Barlow Condensed',sans-serif;
    font-size: 2.8em;
    max-width: fit-content;
    color: #fd6e2d;}
h2{ font-family: 'Barlow Condensed',sans-serif;
    color: #fd6e2d;
    font-weight: 500;}
h3 {text-align: left;
    font-size: 2em;
    font-weight: 500;
    margin-bottom: 0.3em;
    font-family: 'Barlow Condensed',sans-serif;
    color: #fdbb2d;}
h4 {text-align: left;
    font-size: 2em;
    font-weight: 500;
    margin-bottom: 0.3em;
    font-family: 'Barlow Condensed',sans-serif;
    color: #fdbb2d;}
    ol,ul{list-style: none;}

ul{ display: flex;
    flex-direction: column;
    align-items: center;}
        
li{
    font-weight: 500;
    width: 90%;
    padding: .25em;
    background: linear-gradient(270deg, rgba(38,240,242,1) 0%, rgba(159,210,131,1) 27%, rgba(253,187,45,1) 64%, rgba(253,110,45,1) 100%);}
a.boton {
    background: linear-gradient(90deg, rgba(38,240,242,1) 0%, rgba(159,210,131,1) 27%, rgba(253,187,45,1) 64%, rgba(253,110,45,1) 100%);
    color: white;
    font-family: 'Barlow Condensed',sans-serif;
    padding-top: 0.3em;
    padding-bottom: 0.3em;
    margin-top: 3em;
    border-radius: 0.5em;
    align-content: center;
    width: 50%;
    text-align: center;
    font-size: 1.5em;
    font-weight: 500;}
a.boton:hover {background: black;}


                        /*INICIO PAGINA PRINCIPAL*/
#encabezado{
    grid-area: encabezado;
    display: grid;
    grid-template-columns: 1fr 3fr;
    grid-template-rows: 1fr auto auto;
    height: 50%;
    grid-template-areas: "div div"
                        "presentacion presentacion"
                        "siyaviniste siyaviniste";}
#encabezado div{
    grid-area: div;
    background-image: url(../imagenes/fotoencabezado_movil.jpg);
    background-size: cover;
    display: flex;
    flex-direction: row-reverse;
    justify-content: center;
    align-items: center;}
#tituloencabezado {grid-area: 1/2/2/3;
        color:#fff;
        font-size: 2.5em;}
section.presentacion {
    grid-area: presentacion;
    background: #fd6e2d;
    color: #fff;
    padding: 2em;}
    .presentacion h3 {color: #fff;}
#mainindex {display: grid;
    grid-template-columns: 100%;
    grid-template-rows: auto auto auto .1fr;
    grid-template-areas: "encabezado"
                         "contenedora"
                         "turistas"
                         "footer";}
#turistas{grid-area: turistas;}
#sitodaviano, #playalvideo{
    width: 100%;
    color: #fff;
    text-align: left;
    font-size: 1em;
    font-family: 'Rubik Regular', sans-serif;
    padding: 1em;
    margin: .5em 0 .5em 0; }
#turistas span {
    text-align: left;
    font-size: 1.5em;
    font-family: 'Barlow Condensed', sans-serif;}
#siyaviniste{grid-area: siyaviniste;
    background-color: #9DD081;
    width: 100%;
    color: #fff;
    text-align: left;
    font-size: 1em;
    font-family: 'Rubik Regular', sans-serif;
    padding: 2em 1em;
    justify-content: center;}
#siyaviniste span{
    text-align: left;
    font-size: 2em;
    font-family: 'Barlow Condensed', sans-serif;
}
#sitodaviano{background-color: #fdbb2d;}
#playalvideo{background-color: #26EEF0;}
#iluspuente {width: 95%;}

             /* INICIO SLIDER PAG PRINCIPAL*/
#sliderfotosredes{
    width: 100%;
    height: max(50vh);
    position: relative;
    overflow: hidden;
    margin-bottom: 2em;}
.slide{
    width: 100%;
    height: 100%;
    position: absolute;
    transition: all 0.5s;}
.fotosslider{
    width: 100%;
    height: 100%;
    object-fit: contain;}
.slide figcaption{
    background-color: #fff;
    border-radius: .5em;
    color: gray;
    position: absolute;
    display: flex;
    justify-content: space-around;
    padding: .5em;
    inset: auto 1em 1em 1em;}
.btn{position: absolute;
    z-index: 10;
    top: 50%;
    width: 4em;
    aspect-ratio: 1;
    border: none;
    border-radius: 50%;
    cursor: pointer;
    background-color: rgba(255,255,255,0.3);}
.btn-prev{
    left: 1em;}
.btn-prox{
    right: 1em;}
.iconoredsocial{
    width: 3em;
    height: 3em;
    margin: .5em;
}

            /*SCROLL PASOS*/
#contenedora{grid-area: contenedora;
    width: 100%;
    height: auto;
    overflow: auto;}
#fondo{
    display: flex;
    width: fit-content;
    background: #fff url("../imagenes/camino.png") no-repeat left center;
    background-size: cover;}
#contenedora section figure img{
    max-width: 100%;
    height: auto;}
#contenedora section figure{
    width: fit-content;}
#paso1{display: grid;
    grid-template-columns: 47vw 48vw;
    grid-template-rows: .5fr 1fr;
    grid-template-areas: "numer1 p1"
                         "libro p1";
    padding: .5em 2em .5em .5em;
    gap: .3em;}
#paso2{display: grid;
    grid-template-columns: 47vw 48vw;
    grid-template-rows: .5fr 1fr;
    grid-template-areas: "iconoacumar p2"
                         "numer2 p2";
    padding: .5em 2em .5em .5em;
    gap: .3em;}
#paso3{display: grid;
    grid-template-columns: 47vw 48vw;
    grid-template-rows: 1fr .5fr;
    grid-template-areas: "mapa p3"
                         "numer3 p3";
    padding: .5em 2em .5em .5em;
    gap: .3em;}
#paso4{display: grid;
    grid-template-columns: 47vw 48vw;
    grid-template-rows: 1fr .5fr;
    grid-template-areas: "numer4 p4"
                         "camara p4";
    padding: .5em 2em .5em .5em;
    gap: .3em;}
.numscroll{
    color: black;
    font-weight: 700;
    font-size: 4em;
    margin-bottom: 0;}
#n1{grid-area: numer1;
        align-self: end;
        justify-self: center;}
#n2{grid-area: numer2;
        padding-left: 1em;}
#n3{grid-area: numer3;
        justify-self: end;
        padding-right: .4em;}
#n4{grid-area: numer4;
        align-self: end;
        justify-self: center;}
#libro{grid-area: libro;
        justify-self: end;}
#iconoacumar{grid-area: iconoacumar;
            justify-self: end;}
#mapa{grid-area: mapa;
    align-self: end;}
#camara{grid-area: camara;
        justify-self: end;}
#p1, #p2, #p3, #p4{
    border-radius: 1em;
    text-align: center;
    align-self: center;
    height: fit-content;
    padding: .5em;}
#p1{grid-area: p1;
    background-color: #26EEF0;}
#p2{grid-area: p2;
    background-color: #9DD081;}
#p3{grid-area: p3;
    background-color: #26EEF0;}
#p4{grid-area: p4;
    background-color: #9DD081;}
iframe{
    width: 100vw;
    aspect-ratio: 16/9;
    margin-bottom: 1em;}
/*FIN PAGINA PRINCIPAL*/

                        /*RESEÑA HISTORICA*/


article.historia {
    display: grid;
    grid-template-columns: 1fr;
    grid-template-rows: 0.1fr 0fr 0fr 0.2fr 0.2fr;
    margin: 2em;
    gap: 0.5em;}
#fotoapertura {
    grid-area: 3/1/4/3;
    padding-right: 0.5em;
    padding-bottom: 0.5em;
    padding-left: 0.5em;
    padding-top: 1em;
    max-width: 100%;
    height: auto;}
    /* SECTION IMPORTANCIA LOCAL */
section.importancialocal{
    grid-area: 2/1/3/3;
word-wrap: wrap;}

    /* SECTION SU CONSTRUCCION */
section.suconstruccion {
    grid-area: 4/1/5/3;}
   /* SECTION SLIDE */
section.fotoshistoria {grid-area: 5/1/6/3;}
section.fotoshistoria img{
    width: 33.3%;
    height: auto;
    padding: 0.3em;}
section.fotoshistoria picture{
        display: flex;
        flex-direction: row;
        justify-content: space-between;
        align-items: center;
        max-width: 100%;}
    /* SECTION RESTAURACION */
section.restauracion {
    grid-area: 6/1/6/3;}


                         /* FIN RESEÑA HISTORICA*/

                        /*INICIO ACUMAR VERDE*/

/*SECTION QUE ES ACUMAR*/
    #definicion {
        display: grid;
        grid-template-columns: 7em 1fr;
        grid-template-rows: 7em auto;
        grid-template-areas: "logo titulo"
                             "texto texto";
        column-gap: 1rem;
        row-gap: 1rem;
        margin: 1rem;}
    #logoacumarverde {
        max-width: 7em;
        grid-area: logo;}
    #queesacumar {
        grid-area: titulo;
        font-size: 2em;
        align-self: end;}
    #textoacumar{
        grid-area: texto;
        font-family: 'Rubik Regular', sans-serif;}
        /*SECTION CUAL ES NUESTRO OBJETIVO*/
    #objetivo{
        display: grid;
        grid-template-columns: .3fr 1fr 1fr 1fr 1fr .3fr;
        grid-template-rows: auto 1em auto auto;
        grid-template-areas: "titulo2 titulo2 titulo2 titulo2 titulo2 titulo2"
                             ". . . objdos objdos dos"
                             "uno objuno objuno objdos objdos dos"
                             ". tres objtres objtres . .";
        gap: .5em;}
    #nuestroobjetivo{grid-area: titulo2;
        margin: .5em;
        font-weight: 700;
        font-size: 2em;}
    #num1, #num2, #num3{color: black;
        font-weight: 700;}
    #num1{grid-area: uno;
        justify-self: end;
        align-self: center;}
    #num2{grid-area: dos;
        justify-self: start;
        align-self: center;}
    #num3{grid-area: tres;
        justify-self: end;
        align-self: center;}
    #objuno{
        background-color: #9DD081;
        border-radius: 1em;
        grid-area: objuno;
        align-self: end;}
    #objdos{
        background-color: #26EEF0;
        border-radius: 1em;
        grid-area: objdos;
        align-self: end;}
    #objtres{
        background-color: #FB6E2D;
        border-radius: 1em;
        grid-area: objtres;
        align-self: start;}
    .textoobj{
        padding: 1rem;
        text-align: center;}
        /*SECTION COMO PODES PARTICIPAR*/
    #comopodesparticipar{
        margin: 1em 0 .5em 0.5em;
        font-size: 2em;
        font-weight: 700;
        text-align: center;}
    .titulosparticipar{
        color: white;
        background-color: #fdbb2d;
        border-radius: .3em;
        font-size: 1.5em;
        text-align: center;
        margin: .5em .5em .3em .5em;}
    .participar{
        background-color: #9DD081;
        border-radius: 1em;
        display: grid;
        grid-template-columns: 1fr 1fr;
        grid-template-rows: auto .5fr;
        grid-template-areas: "foto textos"
                             "foto boton";
        margin: .5em;
        padding: 1em;
        gap: 1em;}
    .fotosacumarcel{
        max-height: 50vw;
        border-radius: 1em;
        grid-area: foto;}
    #fotoweb1, #fotoweb2, #fotoweb3{
        display: none;}
    .participar p{
        grid-area: textos;
        font-size: 1em;}
    .participar a{
        grid-area: boton;
        background: linear-gradient(90deg, rgba(38,240,242,1) 0%, rgba(159,210,131,1) 27%, rgba(253,187,45,1) 64%, rgba(253,110,45,1) 100%);
        color: white;
        font-family: 'Barlow Condensed',sans-serif;
        padding-top: 0.3em;
        padding-bottom: 0.3em;
        border-radius: 0.5em;
        align-content: center;
        text-align: center;
        font-size: 1.3em;
        font-weight: 500;}
    
                             /*FIN ACUMAR VERDE*/

                         /*INICIO QUIERO CRUZAR*/
                         
article.quierocruzar {
    display: grid;
    grid-template-columns: 1fr;
    grid-template-rows: 0.2fr 0fr 0.3fr 0.1fr;
    margin: 2em;}
.quierocruzar div.superior {display: grid;
    grid-template-columns: 2fr 1fr;
    grid-template-rows: 0.5fr 0.5fr;}
.quierocruzar div p {
    font-family: 'Rubik Regular', sans-serif;
    text-align: left;
    width: 95%;
    padding-top: 1em;}
#pinmapa {width: 100%;}
.quierocruzar div figure {grid-area: 2/2/3/3;
    width: 90%;}
article.quierocruzar h3 {
    display: flex;
    justify-content: space-between;
    width: 100%;}
article.quierocruzar span {font-weight: 600;}
section.diasyhorarios {
    grid-area: 2/1/3/2;
    margin-top: 2em;}
section.duracionviaje {
    grid-area: 3/1/4/2;
    margin-top: 2em;}
section.infoextra {
    grid-area: 4/1/5/2;
    margin-top: 4em;
    display: flex;
    flex-direction: column;
    align-items: center;}
section.infoextra p {padding-left: 0em;}
section.infoextra img { max-width: 100%;
    height: auto; }
div.precioentradas {
    margin-bottom: 4em;
    display: flex;
    flex-direction: column;
    width: 100%;}
div.precioentradas img {max-width: 4em;}
section.infoextra h4 { width: 100%;}
section.infoextra a.boton {z-index: 9999;
    position: fixed;
    bottom: 1em;
    right: 1em;
    width: 40%;}


                         /*FIN QUIERO CRUZAR*/

                         /* CURIOSIDADES */
.datorelleno1, .datorelleno2, .datorelleno3 {display: hidden;}
 div.encabezado {display: grid;
    grid-template-columns: 2fr 1fr;
    grid-template-rows: 0.2fr 0.5fr;}

#iconocuriosidades {width: 65%;}
div.encabezado figure {grid-area: 1/2/3/3;}
section.datosdecolor  {
    gap: 0.5em;
    display: grid;}
section.datosdecolor h3 {
    margin-top: 1em;
    margin-bottom: -0.5em;}
section.datosdecolor p{
    font-family: 'Barlow Condensed', sans-serif;
    color: white;
    font-weight: 500;
    padding: 2em;
    border-radius: 0.5em;
    font-size: 1.5em;
    width: 100%;}
p.dato1{
    background:#fd6e2d}
p.dato6 {
    background: #fdbb2d;}
p.dato3 {background: #9DD081;}
p.dato4 {background: #26EEF0;}
/*DATOS CON IMAGEN*/
article.curiosidades {margin: 2em;}
article.curiosidades p.descripcion {
    grid-area:2/1/3/3;
    text-align: left;
    font-family: 'Rubik Regular', sans-serif;
    width: 55%;}
div.dato7 {background: #9DD081;border-radius: 0.5em;}
.dato2, .dato5  {background: #fdbb2d;
    border-radius: 0.5em;}
div.dato2 p,div.dato7 p{padding:2em;}
div.dato2 img,div.dato5 img, div.dato7 img {width: 100%;}
figcaption {color: white;
    font-family: 'Rubik', sans-serif;
    font-weight: 400;
    padding: 1em;
    font-size: .8em;}
div.dato5 p{padding:1em;}

section.quieroconocermas{
    display: flex;
    align-content: initial;
    justify-content: space-around;}
section.quieroconocermas a{
    padding-left: 0.5em;
    padding-right: 0.5em;}

         /*QUIERO MIS TICKETS*/
main#tickets{
    width: 100vw;}
#tickets h2{
    padding-left: 1em;
}
/*SLIDER FECHAS*/
#sliderfechas{
    width: 100vw;
    height: 3em;
    display: flex;
    justify-content: space-evenly;
    position: relative;
    overflow: hidden;
    margin-bottom: 2em;}
.slide-fecha{
    text-align: center;
    width: 100%;
    height: 100%;
    position: absolute;
    transition: all 0.5s;}
.btn-fechas{position: absolute;
    z-index: 10;
    top: 5%;
    width: 4em;
    aspect-ratio: 1;
    border: none;
    border-radius: 50%;
    cursor: pointer;
    background-color: rgba(255,255,255,0.0);}
.btn-prev{
    left: 1em;}
.btn-prox{
    right: 1em;}

#quieromistickets{
    width: 100vw;
    display: flex;
    margin: 1em;
    align-items: center;}
#quieromistickets h1{font-size: 2em}
#quieromistickets figure{
    width: 20%;
    padding: .5em;}
#quieromistickets img{
    width: 100%;
    height: auto;}
.dias-horarios-precios{
    display: flex;
    flex-direction: column;}
.dias-horarios-precios p{
    font-size: 1em;
    font-family: 'Rubik Regular', sans-serif;
    font-weight: 400;
    margin: .5em;}
.dias-horarios-precios li{
    background: none;
    font-size: 1em;
    font-family: 'Barlow Condensed', sans-serif;
    font-weight: 700;}
.dias-horarios-precios ul{
    margin: .5em;
    padding-left: 1em;
}
.diasdisponibles p{
    font-size: 1em;
    margin: .5em;}
.diasdisponibles h3{
    font-weight: 700;}
.diasdisponibles ul{
    margin: .3em 0 .8em 0;
}
.disponibles{
    width: 50%;
    background: black;
    color: #fff;
    font-family: 'Barlow Condensed', sans-serif;
    font-weight: 500;
    font-size: 1em;
    margin-top: .5em;
    text-align: center;
    border-radius: .3em;}
.disponibles:hover, .cant-entradas li:hover{
    background: linear-gradient(90deg, rgba(38,240,242,1) 0%, rgba(159,210,131,1) 27%, rgba(253,187,45,1) 64%, rgba(253,110,45,1) 100%);}
.nodisponibles{width: 50%;
    background: rgba(0,0,0,.3);
    color: #fff;
    font-family: 'Barlow Condensed', sans-serif;
    font-weight: 500;
    font-size: 1em;
    margin-top: .5em;
    text-align: center;
    border-radius: .3em;}
.diasdisponibles div{
    padding: .5em;
    font-weight: 700;
    font-size: 1em;}
.cant-entradas li{
    background: #000000;
    color: #fff;
    font-family: 'Barlow Condensed', sans-serif;
    font-weight: 500;
    font-size: 1em;
    margin: .1em;
    text-align: center;
    border-radius: .3em;
    width: 20%;}
.cant-entradas{
    display: flex;
    flex-direction: row;
    background: #fff;
    background-color: #fff;}
#seleccion-entradas{
    display: grid;
    width: 100vw;
    grid-template-columns: 2fr 1fr;
    grid-template-rows: auto auto auto auto;
    
    grid-template-areas: "gral c-gral"
                        "men c-men"
                        "p-men ."
                        "jub c-jub";
    margin: .5em;}
#gral{grid-area: gral;}
#c-gral{grid-area: c-gral;}
#men{grid-area: men;}
#c-men{grid-area: c-men;}
#p-men{grid-area: p-men;}
#jub{grid-area: jub;}
#c-jub{grid-area: c-jub;}
#seleccion-entradas h3{
    font-size: 1.5em;}
#valor{
    color: #FB6E2D;
    font-size: 1.8em;
    margin-left: 1em;
}
.importante{
    background-color: #26EEF0;
    font-weight: 700;
    font-size: 1em;
    margin: 0;}
.importante h2{
    font-weight: 700;
    margin: 0;
    font-size: 1.5em;
}
#contentos{
    color: #fdbb2d;
    font-size: 1.3em;
    font-weight: 500;
    font-family: 'Barlow Condensed', sans-serif;
    margin: 1em 0 1em 0;
    text-align: right;}
#boton-compra li{
    width: 50%;
    color: #fff;
    font-family: 'Barlow Condensed', sans-serif;
    font-weight: 500;
    font-size: 1em;
    margin-top: 0.5em;
    text-align: center;
    border-radius: 0.3em;
}


                                    /* BREAKPOINT TABLET*/

@media screen and (min-width: 768px){
/*GENERALES*/
h1 {font-size: 3em;}
/*MENU HAMBUR*/
nav.menu a {font-size: 1.3em;}

/*PAGINA PRINCIPAL*/
#encabezado{
    grid-template-columns: 1fr 3fr 2fr;
    grid-template-areas: "div div div"
                         "presentacion presentacion siyaviniste";}
#siyaviniste{padding: 4em 1em;}
#turistas{
    display: grid;
    width: 100%;
    margin-bottom: 1em;
    grid-template-columns: 1fr 1fr;
    grid-template-rows: .8fr auto;
    grid-template-areas: "naranja slider"
                         "video celeste";}
#sitodaviano{grid-area: naranja;
            margin: 0;
            text-align: right;}
#playalvideo{grid-area: celeste;
            width: 80%;
            margin: 0;
            justify-self: end}
#sliderfotosredes{grid-area: slider;}
iframe{grid-area: video;
    width: 120%;
    margin-bottom: 0%;}
#sliderfotosredes {
    height: max(40vh);
    margin-bottom: 0;}
/*SCROLL HORIZONTAL*/
#paso1{grid-template-columns: 27vw 30vw;}
#paso2{grid-template-columns: 27vw 30vw;}
#paso3{grid-template-columns: 27vw 30vw;}
#paso4{grid-template-columns: 27vw 30vw;}


/* RESEÑA HISTORICA*/
article.historia {
    grid-template-columns: 2fr 2fr;
    grid-template-rows: 0.1fr 0.2fr 0fr 0.4fr 0.2fr 0fr;
    margin: 1em;
    margin-top: 2em;}
    
section.importancialocal {grid-area: 2/1/4/2;}
section.suconstruccion {grid-area: 3/2/4/3;}
section.fotoshistoria {grid-area: 5/1/6/3;}
section.restauracion {grid-area: 6/1/7/3;}
    

/*ACUMAR ONDA VERDE*/

    /*SECTION QUE ES ACUMAR*/
    #definicion{
        grid-template-columns: 16em 1fr;
        grid-template-rows: 3em auto;
        grid-template-areas: "logo titulo"
                             "logo texto";
        margin-top: 1.5em;}
    #logoacumarverde {
        max-width: 16em;
        align-self: end;}
    #queesacumar {
            font-size: 3em;
            align-self: end;
        justify-self: end;}
        /*SECTION CUAL ES NUESTRO OBJETIVO*/
    #objetivo{
        display: grid;
        grid-template-columns: 2em 1fr 1fr 1fr 2em;
        grid-template-rows: auto 2em auto;
        grid-template-areas: "titulo2 titulo2 titulo2 titulo2 titulo2"
                             ". . dos . ."
                             "uno objuno objdos objtres tres";
            gap: .5em;}
    #nuestroobjetivo{
        margin-left: 1em;
        font-size: 2.5em;}
    #br{display: none;}
    #num2{justify-self: center;
            align-self: start;}
    #num3{justify-self: start;
            align-self: center;}
    #objuno, #objdos, #objtres{
        align-self: end;}
    .textoobj{font-size: 1.5em;}
    
        /*SECTION COMO PODES PARTICIPAR*/
    #comopodesparticipar{
        font-size: 2.5em;;
        }
    .titulosparticipar{
        font-size: 2em;}
    .fotosacumarcel{max-width: 43vw;
    grid-area: fototab;}
    .participar{
        background-color: #9DD081;
        border-radius: 1em;
        display: grid;
        grid-template-columns: 43vw auto;
        grid-template-rows: 11em 3em;
        grid-template-areas: "fototab textos"
                             "fototab boton";}
    .participar p{font-size: 1.5em;
        align-self: center;}
    .participar a{font-size: 1.7em;
        width: 50%;
        height: 2em;
        justify-self: end;
        margin-right: 1em;}
        /*FIN SECTION ACUMAR VERDE*/

/*INICIO CURIOSIDADES*/
section.datosdecolor {
    display: grid;
    gap: 0.5em;
    grid-template-columns: 2fr 2fr;
    grid-template-rows: 0fr 0.1fr 0.2fr 0.2fr 0.2fr 0.2fr;
    margin-top: -2em;
    padding: 1em;
    border-radius: 1.5em;}
.datosdecolor h3 {grid-area: 1/1/2/3;}
p.dato1 {grid-area: 2/1/3/2;}
.dato2 {grid-area: 3/1/4/3;
    display: flex;
    flex-direction: row;
    align-items: center;}
.dato2 figure {
    display: flex;
    flex-direction: row;
    width: 300%;
    overflow: auto;}
p.dato3 {grid-area: 2/2/3/3;}
p.dato4 {grid-area: 4/1/5/2;
    margin-top: 0em;}
.dato5 {grid-area: 5/1/6/3;
    background:#fd6e2d;
    display: flex;
    align-items: center;
    border-radius: 0.5em;
    padding: 0.5em;}
.dato5 figure {background: #fd6e2d;}
p.dato6 {grid-area: 4/2/5/3;
    background: #9DD081;}
div.dato7 {
    background: #9DD081;
    grid-area: 6/1/7/3;
    display: flex;
    flex-wrap: nowrap;
    border-radius: 0.5em}
div.dato2 img, div.dato5 img, div.dato7 img {
    border-radius: 0.5em;
    padding: 0.5em;}
.datosdecolor div.dato7 figure {
    display: flex;
    flex-direction: row;
    position: relative;
    overflow: auto;}
div.encabezado figure {
    display: flex;
    justify-content: flex-end;
    width: 100%;
    height: max-content;}  
/* QUIERO CRUZAR*/

.quierocruzar div figure {grid-area: 1/2/3/3;}
.quierocruzar div p {padding-top: 0em;}
.quierocruzar div { grid-template-columns: 5fr 2fr;}
section.infoextra a.boton {width: 35%;}
article.quierocruzar {
    grid-template-rows: 0.2fr 0fr 0.3fr 0.1fr;}
section.diasyhorarios, section.duracionviaje,div.precioentradas {
	display: flex;
	gap: 1.5em;}
article.quierocruzar p {
    width: 100%;}
article.quierocruzar h3 {
    flex-direction: column;
    justify-content: normal;}
section.diasyhorarios {
	grid-area: 2/1/3/3;}
section.duracionviaje {grid-area: 3/1/4/3;}
article.quierocruzar span {
    font-size: 1.5em;
    flex-wrap: wrap;} 
section.infoextra {margin-top: 2em;}
div.precioentradas {
    margin-bottom: 2em;
    align-items: flex-start;} 

    /*QUIERO MIS TICKETS*/
.dias-horarios-precios{display: grid;
    grid-template-columns: 1fr 1fr;
    grid-template-rows: auto auto auto;
    grid-template-areas: "dias precio"
                        "p-dias lista"
                        "contentos contentos";
    justify-items: center;
}
#dias{grid-area: dias;
        justify-self: end;
        margin-right: 1em;}
#p-dias{grid-area: p-dias;
        justify-self: end;
    text-align: right;
    margin-right: 1.5em;}
#contentos{grid-area: contentos;
            text-align: center}
#precio{grid-area: precio;
        justify-self: start;}
        
#lista{grid-area: lista;
        justify-self: start;}
.dias-horarios-precios ul {padding-left: 0.1em;}
#tickets h2{margin-left: 1em;}
#tickets p{margin-left: 3em;}
#sliderfechas {
    width: 97vw;}
#seleccion-entradas {
        width: 90vw;
        grid-template-areas:
        "gral c-gral"
        "men c-men"
        "p-men p-men"
        "jub c-jub";}
#gral, #men, #jub{justify-self: center;} 
#p-men{justify-self: center;
        text-align: center;}   
        /*FIN QUIERO MIS TICKETS*/
/* FOOTER TABLET*/
#imagotipo {width: 60%; margin-left: 4em;}

}                               /*FIN BREAKPOINT TABLET*/

                                     /*BREAKPOINT WEB*/
@media screen and (min-width: 992px){

    /*GENERALES */
h4 {font-size: 1.5em;}
h3 {font-size: 1.5em;}
h1 {font-size: 3em;}
p {font-size: 1em;}

            /*MENU HAMBURGUESA DESK*/
/*desaparecer la img del menú hamburguesa*/
header label{
    display: none; 
    width: 3rem; 
    height: 3rem; 
    padding: 1rem; }
            
/*convierto el cursor en mano porque tengo una img y no un vínculo*/
header label:hover{
    cursor: pointer; 
    background: rgba(0,0,0,0.3);}
header{ display: grid;
        grid-template-columns: 5% 25% 70%;
        grid-template-rows: auto;
        grid-template-areas: "logo . menu";
        justify-content: unset;
        padding: .5em;}
#logoapp{grid-area: logo;}
.menu{position: inherit;
    width: 100%;
    grid-area: menu;
    margin-left: 0;}            
.menu ul{
    list-style: none;
    flex-direction: row;
    flex-wrap: wrap;
    justify-content: end;
    margin-right: .5em;}
.menu li{background: rgba(255,255,255,0.3);
        width: 15em;
        margin: .2em}
.menu li:hover{ background: rgba(0,0,0,0.3);}
.menu li a{
    padding: 1rem 2rem;
    color: white;
    text-decoration: none;}
.menu a:hover{color: black;}
    /*FIN MENU HAMBURGUESA*/

                            /*INICIO PAGINA PRINCIPAL DESK*/
    /*SCROLL PASOS*/
#contenedora{overflow: hidden;
            width: 100vw;
            height: auto;}
#fondo{width: 100vw;
        background-size: 100% 110%;}
#paso1{grid-template-columns: 15vw 5vw;
       grid-template-rows: 1fr 1fr;
       grid-template-areas: "libro numer1"
                             "p1 p1";}
#paso2{grid-template-columns: 5vw 15vw;
       grid-template-rows: 1fr 1fr;
       grid-template-areas: "p2 p2"
                          "numer2 iconoacumar";}
#paso3{grid-template-columns: 15vw 5vw;
       grid-template-rows: 1fr 1fr;
       grid-template-areas: "mapa numer3"
                            "p3 p3";}
#paso4{grid-template-columns: 5vw 15vw;
       grid-template-rows: 1fr 1fr;
       grid-template-areas: "p4 p4"
                            "numer4 camara";}
#libro{align-self: end;}
#mapa{align-self: end;
      justify-self: start;}
#n3{align-self: end;
    justify-self: start;}
#n4{align-self: start;}
        /*FIN PAGINA PRINCIPAL*/

                /* INICIO ACUMAR VERDE DESK*/
main.acumarverde {
    display: grid;
    grid-template-columns: 1fr 1fr;
    grid-template-rows: auto auto;
    grid-template-areas: "definicion objetivo"
                         "participacion participacion";
    width: 100%;}
/*SECTION QUE ES ACUMAR*/
    #definicion{
        grid-area: definicion;
        grid-template-columns: 1fr 2fr;
        grid-template-rows: 10em auto;
        grid-template-areas: "logo titulo"
                             "texto texto";}
#logoacumarverde {
    max-width: 10em;
    align-self: end;}
#queesacumar {
        font-size: 4em;
        align-self: end;
        justify-self: end;}
#textoacumar{
    font-size: 1.5em;}
/*SECTION CUAL ES NUESTRO OBJETIVO*/
#objetivo{
    grid-area: objetivo;
    display: grid;
    grid-template-columns: .5fr 1fr 1fr 1fr 1fr .5fr;
    grid-template-rows: auto auto auto;
    grid-template-areas: "titulo2 titulo2 titulo2 titulo2 titulo2 titulo2"
                          "uno objuno objuno objdos objdos dos"
                            ". tres objtres objtres . .";
    gap: .5em;}
#br{display: inherit;}
#num2{justify-self: center;
    align-self: center;}
#num3{justify-self: end;
    align-self: center;}
#objuno, #objdos{
    align-self: end;}
#objtres{align-self: start;}
#nuestroobjetivo{font-size: 3em;}
    /*SECTION COMO PARTICIPAR*/
#comopodesparticipar{font-size: 3em}
#participacion{
     grid-area: participacion;}
#fotoweb1, #fotoweb2, #fotoweb3{
    display: inherit;
    width: 100%;
    height: auto;
    border-radius: 2em;
    margin-bottom: 0.5em;}
.fotoweb{
    align-self: end;
    justify-self: center;
    width: 95%;}
#rec{grid-area: rec;}
#esc{grid-area: esc;}
#oli{grid-area: oli;}
#fotoweb1{grid-area: fotoweb1;}
#fotoweb2{grid-area: fotoweb2;}
#fotoweb3{grid-area: fotoweb3;}
.fotosacumarcel{max-width: 28vw;}
.fotostab{
    grid-area: fototab;
    align-self: center;}
    
#gridpart{
    display: grid;
    grid-template-columns: 1fr 1fr;
    grid-template-rows: auto auto auto;
    grid-template-areas: "rec fotoweb1"
                         "fotoweb2 esc"
                         "oli fotoweb3";
    margin: .5em;
    justify-content: start;
    gap: .7em;}
.participar{
    background-color: #9DD081;
    border-radius: 1em;
    height: 85%;
    display: grid;
    grid-template-columns: 28vw 15vw;
    grid-template-rows: 11em 3em;
    grid-template-areas: "fototab textos"
                         "fototab boton";}
.participar p{font-size: .9em;
        align-self: center;
        margin-top: 1em;}
.participar a{
    width: 80%;
    height: 2em;
    justify-self: end;
    margin-right: 1em;}
    /*FIN ACUMAR*/

/* CURIOSIDADES DESK */
.datorelleno1, .datorelleno2, .datorelleno3 {
	        display:inherit;
	        border-radius: 0.5em;}
.datorelleno1 {grid-area: 2/3/3/4; background: #26EEF0; width: 50%; margin-left: 50%;}
.datorelleno2 {grid-area: 3/1/4/2; background: #9DD081;width: 40%;}
.datorelleno3 {grid-area: 5/3/6/4; background: #fdbb2d; width: 40%; margin-left: 60%;}
section.datosdecolor p.dato4 {grid-area: 4/1/5/2; width: 150%;}
section.datosdecolor div.dato5 {grid-area: 5/1/5/3; width: 130%;}
section.datosdecolor p.dato6 {grid-area: 4/3/5/4; width: 152%; margin-left: -52%;padding-bottom: 3em; padding-top: 3em;}
section.datosdecolor p.dato3 {width: 150%;}
section.datosdecolor div.dato2 {grid-area: 3/2/4/4; width: 130%; margin-left: -30%;}
div.dato7 {grid-area: 6/1/7/4;}
section.datosdecolor {
	    grid-template-columns: 3fr 3fr 3fr;
	    grid-template-rows: 0fr 0.5fr 1fr 0.5fr 0.5fr 0.5fr;}
section.quieroconocermas a {margin-top: 2em;}
article.curiosidades p.descripcion {font-size: 1.5em;}
#iconocuriosidades {width: 45%; margin-right: 2em;}
article.curiosidades h1 {font-size: 3em;}
.dato1, .dato2, .dato3, .dato4, .dato5, .dato6, .dato7, .datorelleno1, .datorelleno2, .datorelleno3 {align-items: center;}
	
/* QUIERO CRUZAR DESK */
.quierocruzar div {padding-top: 3em; grid-area: 1/1/2/4;}
article.quierocruzar {
	    grid-template-columns: 2fr 2fr;
	    grid-template-rows: 0.2fr 0fr 0.3fr;
	    gap: 1em;}
article.quierocruzar p {width: 80%;}
section.diasyhorarios {grid-area: 2/1/3/3;; width: 50%;}
section.duracionviaje {grid-area: 2/2/3/3;}
section.diasyhorarios, section.duracionviaje, div.precioentradas { flex-direction: column;gap: 0.5em;}
section.infoextra {
	    flex-direction: row;
	    margin-top: 0em;
	    grid-area: 3/1/4/3;
	    align-items: unset;
	    gap: 1em;}
#pinmapa {width: 60%;}
div.precioentradas {padding-top: 3em; margin: 0em; width: 100%;}
div.dondequeda {
	    padding-top: 3em;
	    display: flex;
	    font-size: 0.8em;
	    flex-direction: column;
	    grid-area: 3/2/4/4;
	    width: 100%;}
section.infoextra a.boton {width: 20%;}

/*INICIO QUIERO MIS TICKETS DESK*/
#quieromistickets{width: fit-content;
font-size: 1.5em;}
.diasdisponibles{
    width: 95vw;
    display: grid;
    grid-template-columns: 50vw 50vw;
    grid-template-rows: auto auto auto auto auto;
    grid-template-areas: "diasdisp p-diasdisp"
                        "sliderfechas h-selec"
                        "horarios ."
                        "ul-hor seleccion-ent"
                        "h-valor h-valor"
                        "importante btn-compra";
    gap: .5em;
}
#diasdisp{grid-area: diasdisp;
justify-self: end;}
#p-diasdisp{grid-area: p-diasdisp;}
#tickets p{margin-left: 0;}
#tickets h2{padding-left: 0;
margin-left: 0;}
#sliderfechas{grid-area: sliderfechas;
max-width: 50vw;
align-self: end;
margin-bottom: 0;}
#horarios{grid-area: horarios;
justify-self: center;}
#ul-horarios{grid-area: ul-hor;
width: 50vw;}
#h-selec{grid-area: h-selec;
justify-self: center;
align-self: center;}
#seleccion-entradas{grid-area: seleccion-ent;
width: 45vw;}
#valor{grid-area: h-valor;
justify-self: center;}
.importante{grid-area: importante;}
#boton-compra{grid-area: btn-compra;
place-self: center;
width: 50%;}

/*FOOTER DESK*/
footer {
    font-family: 'Barlow Condensed';
    background-color: #000000;
    color: white;
    font-weight: 300;
    text-align: right;
    font-size: 1.5em;
    width: 100%;
    padding: 0.5em;}
footer div {
    display: flex;
    flex-direction: row;
    width: inherit;
    align-items: center;
    justify-content: space-between;}
footer ul {width: 40%;}
footer div figure {
    width: 65%;
    display: flex;
    justify-content: flex-start;}

li.footer {
    background: none;
    padding: none;
    display: flex;
    justify-content: flex-end;}

footer p{padding: .5em;}

#pinfooter {width: 1.4em;}
#tel {width: 0.8em;}
#imagotipo {width: 50%; margin-left: 1em;}
/* HISTORIA DESK*/
article.historia {
    grid-template-columns: 3fr 2fr 2fr;
    grid-template-rows: auto auto auto auto;
    gap: 1em;
    margin: 2em;}
article.historia div {grid-area: 2/1/3/4;}
section.suconstruccion {grid-area: 3/2/4/3;}
section.restauracion {grid-area: 3/3/4/4;}
section.fotoshistoria {grid-area: 4/1/5/4; margin-top: 3em; margin-bottom: 4em;}
section.importancialocal { grid-area: 3/1/4/2;}
#fotoapertura {grid-area: 3/1/4/3;padding: 0em;width: 100%; height: auto;}
}