@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%;
   

}

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 {
    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 */
}

.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;
    

}

.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;

}






/* 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;
}


}



@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;

}

}