@import "font-awesome-sprockets";
@import "font-awesome";
@import url('animation.css');

*{
    margin: 0;
    padding: 0;
    font-family: 'Lato', sans-serif;
}

.your-style {
    font-family: 'Godber';
    font-weight: normal;
    font-style: normal;
}



body, html{
    margin: 0;
    padding: 0;
    font-family: var(--body_font);
    font-size: 16px;
    
    height: 100vh;
    height: 100%;

      scroll-behavior: smooth;

   

}

html:root {
    --main_color: #ff5b22;
    --body_color: #222221;
    --second_color_text: #3939ff;
    --bg-maincolor: #f0efef;
    --fancy_font: 'Godber', "Montserrat", sans-serif;
    --body_font: 'Godber', "Montserrat", sans-serif;
}

h1{ font-size: 6em;}
h2{ font-size: 3.5em;}
h3{ font-size: 3em;}
h4{ font-size: 2.5em;}
h5{ font-size: 2em;}
h6{ font-size: 1.5em;}



h1, h2, h3{ font-family: var(--fancy_font); font-weight: 400;}
h4, h5, h6{ font-family: var(--body_font); font-weight: 400; margin: 10px 0;}

.center-text{ text-align: center!important;}


.pleca-vertical{ 
    height: 100vh;
    background-image: url(../img/patron-expocym-new.svg);
    background-repeat: repeat-y;
    width: 10%;
    max-width: 200px;

}

.content{ 
    width: 100%;
    display: flex;
    height: 100vh;


}


.foto-feliz{ 
    width: 60%;
    display: flex;
    background-image: url(../img/foto-expocasa-y-materiales.jpg);
    background-size: cover;
    background-position: center center;


}

.logo-expocasa, .logo-expocasa-header {
    display: flex;
    box-sizing: border-box;
    width: 100%;
    background: var(--bg-maincolor);
    color: white;
    text-align: center!important;
    align-items: center;
    justify-content: center;
    padding: 10px 0; /* Agrega un padding para espacio */
}

.logo-expocasa img{ 
    width: 80%;
    height: auto; /* Permite que la altura se ajuste automáticamente para mantener el aspect ratio */
    display: block; /* Mejor que flex para una imagen */
    object-fit: contain; /* Esta propiedad es la más importante */
}

.logo-expocasa-header a img
{ 
    width: 100%;
    height: auto; /* Permite que la altura se ajuste automáticamente para mantener el aspect ratio */
    display: block; /* Mejor que flex para una imagen */
    object-fit: contain; /* Esta propiedad es la más importante */
}

.logo-expocasa-header a{ 
    border: none;
    text-decoration: none;
    text-align: center;
    display: block;
    width: 60%!important;
    max-width: 300px!important;
    }

.datos-expocasa{ 
    width: 40%;
    height: 100vh;
    display: flex;
    flex-direction: column;
    box-sizing: border-box;
    background: var(--second_color_text);
    text-align: center!important;
    align-items: center ;
    justify-content: flex-end;
    overflow-y: auto; 
    justify-content: flex-start;
    

}

.aviso-link{ 
    color: white!important;
    display: block;
    text-decoration: underline!important;

    }

    .aviso-link:hover { 
    color: black!important;
    font-weight: bold;

    }

.fecha-expocasa{ 
    display: flex;
    flex-direction: column;
    box-sizing: border-box;
    width: 100%;
    background: var(--main_color);
    color: white;
    text-align: center!important;
    align-items: center;
    justify-content: center;
    padding: 20px 0;

}

.entrada-gratis-pleca{ 
   background: var(--second_color_text);
   padding: 2px 8px;

}




#cuenta-regresiva{
    width: 100%;
    height: auto;
    display: flex;
    align-items: center;
    justify-content: center;
    text-align: center;
    transition: all 0.5s;
    margin: 5px 0 10px 0;
}

.simply-section{
    background: var(--second_color_text);
    width: 80px;
    height: 80px;
    border-radius: 150px;
    color: white;
    display: flex;
    align-items: center;
    justify-content: center;
    margin: 5px;
    
}

.simply-amount{
    display: block;
    font-size: 2em;

}

.simply-word{
    font-weight: 700;
}


.font-negro{
    color: #000;
}

#btn-inter{
    background-color: var(--main_color);
    color: white;
    text-decoration: none;
    padding: 8px 20px;
    border-radius: 100px;
    display: block;

    transition: all 1s;

}

#btn-inter:hover{
    background-color: white;
    color: var(--main_color);


}


.interesade{
    background-color: var(--second_color_text);
    width: 100%;
    padding: 15px 0;
    color: white;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 24px;
    margin-bottom: auto;

}

.interesade h3{
   font-size: 1.8em!important;
}

#mostrar-datos{
    display: none;
    gap: 24px;
    flex-direction: column;

    

}


    


.un-dato{
    display: flex;
    gap: 8px;
    flex-direction: column;
    justify-content: center;
    align-items: center;

    

}

.un-dato a{
   padding: 8px;
   background: var(--main_color);
   border-radius: 30px;
   max-width: 300px;
   color: white;
   text-decoration: none;
   padding: 8px 20px;

   transition: all 1s;

}

.un-dato a:hover{
    background-color: var(--bg-maincolor);
    color: var(--main_color);

}



.social-media {
  gap: 20px;
 display: flex;
 flex-direction: column;


}

.social-media a{
  display: block;
  text-decoration: none;

transition: all 1s;

}


.social-media a:hover{

    opacity: 0.5;

}

.social-media a img{
    display: block;
    width: 30px;
    height: auto;
}

.iconos-sociales{
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 20px;

}

/* 

      --   Aviso de privacidad ---

*/







.aviso-privacidad-content{
  width: 90%;
  display: flex;
  max-width: 1440px;
  min-width: 300px;
  align-items: flex-start;
  justify-content: space-around;
  margin: 2em auto 2em auto;
  position: relative;
  padding: 80px 0;
  box-sizing: border-box;

}



.left-fixed-menu{
  width: 40%;
  max-width: 300px;
  display: flex;
  margin: 0.5em;
  margin: 40px 0 0 0;

  flex-flow: column;
  position: sticky;
  top: 0;
  left: 0;

}
.left-fixed-menu ul li{

  margin: 1em 0;
  list-style-type: none!important;

}


.left-fixed-menu ul li a{

  text-decoration: underline;
  color: black;
  transition: all 0.5s;

}

.left-fixed-menu ul li a:hover{

  text-decoration: underline;
  color: var(--main_color);

}

.activaderrimo{
  font-weight:700;
}

.txt-container{
  width: 60%;
  display: flex;
  flex-flow: column;
  margin: 40px 0 0 0;

  
}

.txt-container div{
  padding: 1em 0;
}

.txt-container ul{
    list-style-type: circle;
    margin-left: 20px;
}

.incisos{
  list-style-type: lower-alpha!important;
}

.a-aviso-privacidad{
    color: var(--main_color)!important;
text-decoration: underline;

transition: all 0.5s;

} 

.a-aviso-privacidad:hover{
    text-decoration: none;
}










/* Responsivo */

@media only screen and (max-width: 1550px){


    .datos-expocasa{
    overflow-y: auto; 
    justify-content: flex-start;
    }
   
.logo-expocasa {
    display: flex;
    box-sizing: border-box;
    width: 100%;
    background: var(--bg-maincolor);
    color: white;
    text-align: center!important;
    align-items: center;
    justify-content: center;
    padding: 10px 0; /* Agrega un padding para espacio */
}

.logo-expocasa img{ 
    width: 80%;
    height: auto; /* Permite que la altura se ajuste automáticamente para mantener el aspect ratio */
    display: block; /* Mejor que flex para una imagen */
    object-fit: contain; /* Esta propiedad es la más importante */
}



    .foto-feliz{ 
    width: 60%;
    display: flex;
    }

   
    
.datos-expocasa{ 
    width: 30%;
   
}

.pleca-vertical{ 
  
    width: 10%;

}
       
}


@media only screen and (max-width: 1200px){

   
   


    .foto-feliz{ 
    width: 50%;
    display: flex;
    }


    .logo-expocasa img{ 
    width: 75%;
    height: auto; /* Permite que la altura se ajuste automáticamente para mantener el aspect ratio */
    display: block; /* Mejor que flex para una imagen */
    object-fit: contain; /* Esta propiedad es la más importante */
}
   

    
.datos-expocasa{ 
    width: 40%;
   
}

.pleca-vertical{ 
  
    width: 10%;

}
       
}

@media only screen and (max-width: 900px){

   
    .foto-feliz{ 
      display: none;
   
    }

    .foto-feliz-2{ 
    display: none;
    }

   

    
.datos-expocasa{ 
    width: 100%;
    height: 100vh;
   
}

.pleca-vertical{ 
  
    width: 10%;

}

.cont-2{ 
  flex-wrap: wrap;
  flex-direction: row;
  height: 100vh;

}


       
}

@media only screen and (max-width: 600px){
  .content{ 
      display: flex;
      flex-direction: column;
      height: auto!important;
   
    }
   
    .foto-feliz{ 
      display: flex;
      width: 100%;
      flex-direction: column;
      min-height: 300px;
   
    }

    .foto-feliz img{ 
      display: flex;
      width: 100%;
      flex-direction: column;
      height: auto!important;
      max-width: 100%;
      min-width: 100%;
   
    }


   

    
.datos-expocasa{ 
    width: 100%;
    height: auto!important;
    flex-direction: column;
   
}

.pleca-vertical{ 
  
    width: 100%;
    max-width: 100%;
    max-height: 80px;
    background-image: url(../img/patron-expocym-horizontal.svg);
    background-repeat: repeat-x;
    height: 80px;

}

h1, h2, h3{ font-family: 'Godber', "Montserrat" , sans-serif; font-weight: 400;}
h4, h5, h6{ font-family: 'Godber', "Montserrat" , sans-serif; font-weight: 400; margin: 10px 0;}

h1{ font-size: 4em;}
h2{ font-size: 3em;}
h3{ font-size: 2.5em;}
h4{ font-size: 2em;}
h5{ font-size: 1.5em;}
h6{ font-size: 1.2em;}


.social-media a{
  font-size: 60px;
  gap: 40px;
  color: white;
  text-decoration: none;

    transition: all 1s;

}

.interesade h3{
 font-size: 1.5em!important;
 font-weight: 400!important;

}

.social-media a img{
    display: block;
    width: 40px;
    height: auto;
}

.aviso-privacidad-content{
    width: 90%;
    display: flex;
   flex-flow: column;
   padding: 0 0 0 0;

  
  }

  .left-fixed-menu{
    display: none;
  }

  .txt-container
  {
    margin: 2em auto;
    width: 90%;
  }
  
  a.aviso-link{
 font-size: 1.2em!important;
 font-weight: 400!important;

}


}



@media only screen and (max-width: 400px){ 

  .font-negro {
    margin: 20px 0;
  }
    
.faltan{ display: none;}

    
.fecha-expocasa{ 
   max-height:  300px;;
   
}



h1{ font-size: 2em;}
h2{ font-size: 1.8em;}
h3{ font-size: 1.5em;}
h4{ font-size: 1.2em;}
h5{ font-size: 1em;}
h6{ font-size: 0.7em;}


.social-media a{
  font-size: 60px;
  gap: 40px;
  color: white;
  text-decoration: none;

    transition: all 1s;

}

.interesade h3{
 font-size: 1em!important;
 font-weight: 400!important;

}



}