body {
    font-family: 'Source Code Pro', 'Inter', 'Abril Fatface';
}

body {
    display: block;
    
}

*, *::after, *::before {
    box-sizing: border-box;
    margin: 0;
    padding: 0;
    border: 0;
    outline-color: transparent;
}



.p1{
    font-size: 40px;
    margin-bottom: 1rem; 
    margin-top: 1rem;
    color: 303030;
    font-weight: bold;
    font-style: italic;
    color: #2f2f2f 
}


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






/* home */

.fondoinicio {
    max-width: 24.374rem;
    margin: auto;
    margin-top: 0px;
    display: grid;
} 

.fondoinicio {
    background-image: url(../imagenes/fondo_home.png);
    background-repeat: no-repeat;
    background-image: fixed;
    background-position: top;
}

header {
    box-shadow: 0 4px 2px hsl(0 0% 0% / 0.25);
    position: sticky;
    top: 0;
    z-index: 8000;
}

/* navegación */
header  {
    background-color:#355d7b;
}

header .contenedora {
    display: flex;
    justify-content: space-between;
    align-items: center;
    flex-wrap: wrap;
}

.contenedora {
    max-width: 65rem;
    margin-inline: auto;
    padding: 1rem;
   
}

header .menu {
    
    gap: 1rem;
}
header nav ul {
    background-color: hsl(210 92% 10% / 95%);
    display: grid;
    place-items: center;
    place-content: center;
    position: fixed;
    inset: 0;
    z-index: 8000;
    translate: 100%;
    transition: all .6s ease;
}

li {
    display: list-item;
    text-align: -webkit-match-parent;
}

ul, ol {
    list-style: none;
}

ul {
    list-style-type: disc;
}

#logo img {
    width: 3rem;


}

img {
    max-width: 100%;
    height: auto;
}

.menu-ham {
    margin-right: 0.4em;
    width: 1.2em;
}


/* boton*/
   
button {
 
    text-rendering: auto;
    
    letter-spacing: normal;
    word-spacing: normal;
    line-height: normal;
    text-transform: none;
    text-indent: 0px;
    text-shadow: none;
    text-align: center;
    cursor: default;
}


 .menu-btn {
    background: hsl(0 0% 100% / 0.25);
    border-radius: 50%;
    box-shadow: -5px 5px 5px hsl(180 100% 4% / 0.2);
    padding: 0.75rem;
    width: 3rem;
    aspect-ratio: 1;
    /* cursor: pointer; */
    transition: all 0.3s ease-out;
    position: fixed;
    top: 3em;
    right: 3em;
    z-index: 9000;
}

.menu-btn .btn-linea {
    width: 25px;
    height: 3px;
    margin: 4px 0 4px 0;
    border-radius: 4px;
    background: hsl(0 0% 90%);
    transition: all 0.3s ease-out;
    position: relative;
    z-index: 9000;
}

 .menuVisible ul {
    background-color:#355d7b;
    transition: all 0.4s ease;
    translate: 0;
}


.pie {
    display: none;}


.pie {
    margin-top: 3em;
}

.bold {
    font-weight: 700;
}

nav ul li a {
    font-family: "Bebas Neue", sans-serif;
    border-bottom: solid 1px hsl(0 0% 100% / 0.1);
    letter-spacing: 0.07em;
    color: white;
    display: flex;
    align-items: center;
    font-size: 1.8em;
    width: min(70vw, 18rem);
    text-decoration: none;
    padding: 0.3em;
    padding-left: 2em;
}

.menuVisible .menu-btn .btn-linea:nth-child(1) {
    transform: rotate(45deg) translate(4px, 6px);
}
.menuVisible .menu-btn .btn-linea {
    transform: rotate(180deg);
}

.menu-btn:hover {
    transform: scale(1.1);
}

.menu-btn .btn-linea {
    width: 25px;
    height: 3px;
    margin: 4px 0 4px 0;
    border-radius: 4px;
    background: hsl(0 0% 90%);
    transition: all 0.3s ease-out;
    position: relative;
    z-index: 9000;
}

.menuVisible .menu-btn .btn-linea:nth-child(2) {
    opacity: 0;
}
.menuVisible .menu-btn .btn-linea {
    transform: rotate(180deg);
}

.menuVisible .menu-btn .btn-linea:nth-child(3) {
    transform: rotate(-45deg) translate(4px, -6px);
}

.menu-btn {
    background: none; 
    border-radius: 50%;
    padding: 0.75rem;
    width: 3rem;
    aspect-ratio: 1;
    cursor: pointer;
    transition: all 0.3s ease-out;
    position: fixed;
    top: 1em;
    /* right: 1em; */
    z-index: 9000;

}

.menu-btn .btn-linea {
    width: 25px;
    height: 3px;
    margin: 4px 0 4px 0;
    background: #ffffff;
    transition: all 0.3s ease-out;
    position: relative;
    z-index: 9000;
}


nav {
    display: block;
}

nav ul {
    background-color: hsl(210 92% 10% / 95%);
    display: grid;
    place-items: center;
    place-content: center;
    position: fixed;
    inset: 0;
    z-index: 8000;
    translate: 100%;
    transition: all .6s ease;
}
/*cada vinculo del menu*/
nav ul li a {
    border-bottom: solid 3px hsl(0 0% 100% / 0.1);
    color: hsl(0, 0%, 97%);
    display: block;
    font-size: 1.5rem;
    margin-block-end: 0.5rem;
    width: min(70vw, 20rem);
    text-align: center;
    padding: 0.5rem;
    text-decoration: none;
}


.p01{ 
    
    font-size: 15px;
    top: 202px;
    color: #355d7b;
    position: absolute;
    width: 295.48px;
    height: 208.72px;
    left: 52px;
    top: 1230px; 
      
  }

.p2{
    font-size: 15px;
    top: 202px;
    color: #355d7b;
    position: absolute;
    width: 295.48px;
    height: 208.72px;
    left: 52px;
    top: 1330px; 
    font-style: italic; 
    font-weight: bold;
    text-align: center;
}

.p3{ 
    
    font-size: 15px;
    
    color: #355d7b;
    position: absolute;
    width: 295.48px;
    height: 208.72px;
    left: 52px;
    top: 1500px; 

   
  }

/* Estilos del encabezado */

.menu_app{
    width: 390px;
    height:745px;
}

nav .logocontenedora {
    display: flex;
    justify-content: left;
}

a {
    text-decoration: none;
    color: #f1723b;
}





/* Estilos del contenido principal */

.app{
   
    position: relative;
    width: 390px;
    height: 1470px;
       
   }

.titulo_principal {
    text-align: center;
    font-size: 38px;
    font-weight: 600;
    top: 202px;
    color: rgb(255, 255, 255);
    
    position: absolute;
    width: 295.48px;
    height: 208.72px;
    left: 36px;
    top: 235px;  

    font-family: 'Abril Fatface';

}

.bajada {
    text-align: center;
    font-size: 20px;
    font-weight: 600;
    color: rgb(255, 255, 255);
   
    position: absolute;
    width: 295.48px;
    height: 208.72px;
    left: 36px;
    top: 485px;

    font-family: 'Source Code Pro'
}

.sub2{
        text-align: center;
        font-size: 20px;
        font-weight: 600;
        color: rgb(255, 255, 255);
         
        
        position: absolute;
        width: 295.48px;
        height: 208.72px;
        left: 36px;
        top: 515px;

        font-family: 'Source Code Pro'
}

/* Estilos del contenido secundario */

.contenedora_contenedor2{
    width: 100%;
    height: 100vh;
 /*    background-image: url(../imagenes/fondo_home2.png); */
    background-repeat: no-repeat;
    background-image: fixed;
   
}

.scroll-down-arrow {
    position: absolute;
    bottom: 9px;
    left: 50%;
    transform: translateX(-50%);
    width: 20px;

    cursor: pointer;
    height: 790px;

    margin-bottom: 1rem;
  }

  .contenedora_contenedor2 img{ 
    text-align: center;

    top: 800px;
    position: absolute;
    left: 36px;
      
  }

  .contenedora_contenedor2 h1{ 
    text-align: center;
    font-size: 30px;
    font-weight: 600;
    top: 202px;
    color: #355d7b;
    
    position: absolute;
    width: 295.48px;
    height: 208.72px;
    left: 50px;
    top: 740px; 

    font-family: 'Abril Fatface';
      
  }


  

/*  .scroll-down-arrow2 {
    position: absolute;
    bottom: 20px;
    left: 50%;
    transform: translateX(-50%);
    width: 20px;
    height: 20px;
    border-bottom: 2px solid #f1723b ;
    border-right: 2px solid #f1723b;
    transform: rotate(45deg);
    cursor: pointer;
  } */

  .fondocuenta {
    max-width: 24.374rem;
    margin: auto;
    margin-top: 0px;
    display: grid;
}


  .fondocuenta{
    background-image: url(../imagenes/cuenta.png);
    background-repeat: no-repeat;
    background-image: fixed;
    background-position: top;
}

/* Estilos del contenido principal de index cuenta */

.form_input1 {
    position: absolute;
    width: 300px;
    height: 44px;
    left: 45px;
    top: 300px;
    background: #e8e9ec;
    border-radius: 10px;
    text-align: center;
}

.form_label1 {
    position: absolute;
    width: 155px;
    height: 18px;
    left: 1px;
    top: 314px;
    font-family: 'Poppins';
    font-weight: 400;
    font-size: 15px;
    line-height: 18px;
    text-align: center;
    color: #35527c;
}

.form_input2 {
    position: absolute;
    width: 300px;
    height: 44px;
    left: 45px;
    top: 365px;
    background: #e8e9ec;
    border-radius: 10px;
    text-align: center;
}

.form_label2 {
    position: absolute;
    width: 155px;
    height: 18px;
    left: 12px;
    top: 378px;
    font-family: 'Poppins';
    font-weight: 400;
    font-size: 15px;
    line-height: 18px;
    text-align: center;
    color: #35527c;
}

label {
    cursor: default;
}

.form_link2 {
    position: absolute;
    width: 227px;
    height: 15px;
    left: 81px;
    top: 450px;
    font-family: 'Poppins';
    font-style: normal;
    font-weight: 400;
    font-size: 17px;
    line-height: 15px;
    text-align: center;
    color: #1758b3;
}
.ingresa {
    position: absolute;
    width: 60px;
    height: 18px;
    left: 165px;
   
    font-family: 'Poppins';
    font-style: normal;
    font-weight: 600;
    font-size: 12px;
    line-height: 15px;
    cursor: pointer;
    text-decoration: none;
    text-align: center;
    color: #ffffff;
    position: absolute;
    width: 211px;
    height: 37px;
    padding-top: 13px;
    left: 90px;
    top: 485px;
    background: #f1723b;

    border-radius: 30px;
}

.form_link1 {
    position: absolute;
    width: 228px;
    height: 15px;
    left: 81px;
    top: 670px;
    font-family: 'Poppins';
    font-style: normal;
    font-weight: 400;
    font-size: 13px;
    line-height: 15px;
    text-align: center;
    color: #303030;
}

.condiciones{
  display: flex;
  width: 294px;
  height: 55px;
  flex-direction: column;
  flex-shrink: 0;

    position: absolute;
    width: 290px;
    height: 15px;
    left: 55px;
    top: 600px;
    font-family: 'Poppins';
    font-style: normal;
    font-weight: 400;
    font-size: 14px;
    line-height: 18px;
    text-align: center;
    color: #303030;
    
}

.logosiam{
    position: absolute;
    left: 65px;
   margin-top: 5rem;

}

/* Estilos del contenido principal de index registo */

.app2{
   
    position: relative;
    width: 390px;
    height:745px;
       
   }

.cuenta {
    text-align: center;
    font-size: 25px;
    font-weight: 600;
   
    color: #35527c;
    font-family: 'Abril Fatface';
    position: absolute;
    width: 295.48px;
    height: 208.72px;
    left: 36px;
    top: 290px;  
}

.form_link3 {
    position: absolute;
    width: 227px;
    height: 15px;
    left: 70px;
    top: 325px;
    font-family: 'Poppins';
    font-style: normal;
    font-weight: 400;
    font-size: 16px;
    line-height: 15px;
    text-align: center;
    color: #35527c;
}

.crearcuenta{
    position: absolute;
    width: 60px;
    height: 18px;
    left: 165px;
   
    font-family: 'Poppins';
    font-style: normal;
    font-weight: 600;
    font-size: 12px;
    line-height: 15px;
    cursor: pointer;
    text-decoration: none;
    text-align: center;
    color: #ffffff;
    position: absolute;
    width: 211px;
    height: 37px;
    padding-top: 13px;
    left: 90px;
    top: 655px;
    background: #f1723b;

    border-radius: 30px;
}

.container-form form .campo, textarea {

    width: 100%;
    padding: 11px 0px;
    font-size: 14px;
    border-block-end: 2px solid rgb(68, 68, 68);
    
    
    outline: 0px;

    
    margin-bottom: 1rem;
   
}

.contenedor_registro{
   margin-top: 380px;
}

/* Estilos del contenido principal de index catalogo*/

.fondoservicio {
    max-width: 24.374rem;
    margin: auto;
    margin-top: 0px;
    display: grid;
} 


.fondoservicio{
    background-image: url(/webapp/imagenes/catalogo.png);
    background-repeat: no-repeat;
    background-image: fixed;
    background-position: top;
}


.infotexto_catalogo h1{
    font-size: 45px;
    line-height: 110px;
    color: #ffffff;
    margin-bottom: 1rem;

    position: absolute;
    left: 105px;
    top: 200px;
    font-family: 'Poppins';
    font-style: normal;
    font-weight: 400;

    line-height: 18px;
    text-align: center;

    font-family: 'Abril Fatface';
    
}

.infotexto_eventos h1{
    font-size: 45px;
    line-height: 110px;
    color: #ffffff;
    margin-bottom: 1rem;

    position: absolute;
    left: 115px;
    top: 200px;
    font-family: 'Poppins';
    font-style: normal;
    font-weight: 400;

    line-height: 18px;
    text-align: center;
    font-family: 'Abril Fatface';
    
}

.infotexto_resena h1{
    font-size: 45px;
    line-height: 110px;
    color: #ffffff;
    margin-bottom: 1rem;

    position: absolute;
    left: 115px;
    top: 200px;
    font-family: 'Poppins';
    font-style: normal;
    font-weight: 400;

    line-height: 18px;
    text-align: center;
    font-family: 'Abril Fatface';
    
}
.img_icono{
    position: absolute;
    left: 135px;
    top: 260px;
    font-family: 'Poppins';
    font-style: normal;
    font-weight: 400;
    font-size: 18px;
    line-height: 18px;
    text-align: center;
    
}

.img_icono1{
    position: absolute;
    left: 74px;
    top: 260px;
    font-family: 'Poppins';
    font-style: normal;
    font-weight: 400;
    font-size: 18px;
    line-height: 18px;
    text-align: center;
    
}

.img_icono2{
    position: absolute;
    left: 125px;
    top: 260px;
    font-family: 'Poppins';
    font-style: normal;
    font-weight: 400;
    font-size: 18px;
    line-height: 18px;
    text-align: center;
    
}

.form_grupo1 a{
    font-size: 18px;
    font-family: Arial, Helvetica, sans-serif;
    font-weight: lighter;
    line-height: 13px;

    top: 550px;
    
}


.form_grupo2 a{
    font-size: 18px;
    font-family: Arial, Helvetica, sans-serif;
    font-weight: lighter;
    line-height: 13px;
    top: 602px;
}

/* Estilos del contenido principal de index cuenta */

.fondoreserva {
    max-width: 24.374rem;
    margin: auto;
    margin-top: 0px;
    display: grid;
}
.visitas1 {
    text-align: center;
    font-size: 40px;
    font-weight: 600;
    color: #35527c;
    font-family: 'Abril Fatface';
    position: absolute;
    width: 295.48px;
    height: 208.72px;
    left: 45px;
    top: 40px;
    
}

.comitente_contenedor4 img{
    text-align: center;
    top: 100px;
    position: absolute;
   
}

.titulo p{
    font-size: 15px;
    top: 202px;
    color: #2f2f2f;
    position: absolute;
    width: 295.48px;
    height: 208.72px;
    left: 52px;
    top: 310px; 
}

.horario1{
    font-size: 16px;
    font-weight: bolder;
    color: #2f2f2f;
    position: absolute;
    width: 295.48px;
    height: 208.72px;
    left: 45px;
    top: 570px;  
}

.horario2{
    font-size: 15px;
    
    color: #2f2f2f;
    position: absolute;
    width: 295.48px;
    height: 208.72px;
    left: 45px;
    top: 645px;  
}

.recorridos{
    text-align: center;
    font-size: 35px;
    font-weight: 600;
    color: #f1723b;
    
    position: absolute;
    width: 295.48px;
    height: 208.72px;
    left: 2px;
    top: 520px;

    font-family: 'Source Code Pro'
}

.horarios {

    font-size: 30px;
    font-weight: 600;
    color: #f1723b;
    
    position: absolute;
    width: 295.48px;
    height: 208.72px;
    top: 600px;
    left: 45px;
    text-align: justify;

    font-family: 'Source Code Pro'
}
    
.costo{
        font-size: 30px;
        font-weight: 600;
        color: rgb(0, 0, 0);
        font-family: 'Times New Roman', Times, serif;
        position: absolute;
        width: 295.48px;
        height: 208.72px;
      
        left: 50px;
        text-align: justify;font-size: 30px;
        font-weight: 600;
        color: #f1723b;
        font-family: 'Times New Roman', Times, serif;
        position: absolute;
        width: 295.48px;
        height: 208.72px;
        top: 690px;
        left: 45px;
        text-align: justify; 
        font-family: 'Source Code Pro'

    }

.p4{
        color: #f1723b;
        font-family: Verdana, Geneva, Tahoma, sans-serif;
        font-weight: bolder;
        position: absolute;
        width: 295.48px;
        height: 208.72px;
        font-size: 12px;
        top: 730px;
        left: 45px;
        text-align: justify; 
        font-size: 14px;  
     }  
        
.p5{
            color: #f1723b;
            font-family: Verdana, Geneva, Tahoma, sans-serif;
            
            position: absolute;
            width: 295.48px;
            height: 208.72px;
            font-size: 12px;
            top: 755px;
            left: 45px;
            text-align: justify;  

            font-size: 14px; 
    }

.form_grupo3 a{
    font-size: 18px;
    font-family: Arial, Helvetica, sans-serif;
    font-weight: lighter;
    line-height: 13px;
    top: 860px;
}

/* Estilos del contenido principal de index inscripcion */

.comitente_contenedor5 h5{
    margin-top: 20px;
    font-size: small;
    font-weight: lighter;
}


.comitente_contenedor6 {
    display: flex;
    justify-content: space-between;
}

.comitente_contenedor6 {
    max-width: 65rem;
    margin-inline: auto;
    
}


.reserva1 {
    text-align: center;
    font-size: 30px;
    font-weight: 600;
    color: #35527c;
    font-family: 'Abril Fatface';
    position: absolute;
    width: 295.48px;
    height: 208.72px;
    left: 45px;
    top: 50px;
    
}

.equipo_promo{
    padding: 8px;

    background-color: #f1723b;
    border-radius: 37px;
    height: 37px;
    left: 14px;
    position: relative;
    top: 70px;
    width: 369px;
    color: aliceblue;
}

.promo_texto{
    
    height: 1px;
    left: 11px;
    object-fit: cover;
    position: relative;
    top: px;
    width: 182px; 

    font-weight: lighter;
}

.equipo_promo2{
    padding: 8px;

    background-color: #f1723b;
    border-radius: 37px;
    height: 37px;
    left:85px;
    position: relative;
    top: 80px;
    width: 221px;
    color: aliceblue;
    
    text-align: center;
   
}

.titulo2 h2{

    font-size: 26px;
    font-weight: 600;
    color: #35527c;

    color: #2f2f2f;
   
    font-size: 20px;
    position: absolute;
    width: 295.48px;
    height: 208.72px;
    left: 4px;
    top: 235px;

    font-family: 'Source Code Pro'

}

.calendar {
    color: #000000;
    /* border: solid 3px #7CD0FF; */
    border-radius: 4px;
    background-color: white;
    max-width: 400px;
    margin: 110px auto;
    padding: 40px;

    margin-top: 35%;

}

.header_calendario {
    display: flex;
}

.day {
    display: grid;
    grid-template-columns: repeat(7,1fr);
    text-align: center;
    padding: 10px;
    font-weight: bold;
    background-color: white;
    color: #0072C6;
    
}

.days {
    display: grid;
    grid-template-columns: repeat(7,1fr);
    margin-bottom: 1rem;

    background-color: rgb(255, 255, 255);
}

.day-box {
    flex: 1;
    text-align: center;
    padding: 10px;
    border: 1px solid #0072C6;
    background-color: #fafafa;
}

.day-boxS {
    flex: 1;
    text-align: center;
    padding: 10px;
    border: 1px solid #0072C6;
    background-color: #355d7b;
    color: #fafafa;
}

.day-boxD {
    flex: 1;
    text-align: center;
    padding: 10px;
    border: 1px solid #0072C6;
    background-color: #303030;
    color: #fafafa;
}



.disponibilidad p{

    display: flex;
    justify-content: space-between;

    
}

.img1{

    position: absolute;
    
    left:60px;
 
    top: 564px;
    
}

.img2{

    position: absolute;
    
    left: 196px;
 
    top: 564px;
    
}



.texto_disponibilidad{
position: absolute;
    height: 129px;
    left:80px;
 
    top: 560px;
    width: 362px;
}

.texto_disponibilidad1{
    position: absolute;
        height: 129px;
        left: 220px;
     
        top: 560px;
        width: 362px;
    }
    


.ticket img {
    position: absolute;
    height: 129px;
    left:22px;
 
    top:610px;
    width: 362px;
}

.form_grupo4 a{
    font-size: 18px;
    font-family: Arial, Helvetica, sans-serif;
    font-weight: lighter;
    line-height: 13px;
    top: 770px;
}


.contenedor7{
    background-color: #f1723b;
 
        
        margin-inline: auto;
        padding: 1rem;

}

.imagenesdeapp2{

    display: flex;
    flex-direction: column;
    justify-content: center;

    padding-top: 50px;
    text-align: center;
    padding-bottom: 50px;

}

.imagenmockup_t{
    margin-right: 6px;
}

.imagenmockup_t2{
    margin-right: 6px;

    margin-top: 4px;
}