/* 
   ------------------------------------------------------
					Responsive Styles
   ------------------------------------------------------
*/


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

    .container {
        width: 96%;
    }
	
	/*------------------------------------------*/
	/*	 Footer Newsletter Form
	/*------------------------------------------*/
	
	.subscribe-form {width: 100%;}
    
    /*------------------------------------------*/
	/*	 Header
	/*------------------------------------------*/
    
    #header {
		padding-bottom: 0px;
	}
    #header-right{
		padding-left:15px !important;
		background: none;
	}
	#header img {
        padding: 0px 15px 0 0;
        border: none;
    }

    #header-logo-left {
		width: 100%;
	}
	#header-logo-right {
		display: none;
	}
    #header-banner {
		width: 100%;
		float: none;
    	margin: auto;
	}
	#social_icons {
		width: 100%;
		float: none;
		text-align: right;
		margin-top: 25px;;
	}
	.top-telf {
		margin-top: 10px;
		margin-bottom: 30px;
	}
	.top-telf h4 a {
		font-size: 20px;
	}
    .top-telf .phonebig {
    font-size: 28px;
    line-height: 30px;
    }
	#logo {
		float: right;
		width: 90%;
	}

	#logo_image ul {
		padding: 0 10px;
		margin-top:60px;
	}

	#logo_image ul li {
    	width: 50%
        min-height: 92px;
	}
    #logo_image ul li p {
		font-size: 14px;
	}
	#logo_image ul li span {
		padding: 0 10px;
        font-size: 14px;
	}

    .titlebar h1 { font-size: 32px; }
	.titlebar p {font-size: 16px; }

	#intro .container {
		margin-bottom: 25px;
	}
    #sloganprecios{
        padding-top: 0px;
        font-size: 22px;
    }

	
	/*------------------------------------------*/
	/*	 About Sections
	/*------------------------------------------*/
	
	#about-2 {padding-top: 60px;}
	
	#about-1-text {padding-right: 15px; margin-bottom: 50px;}
	#about-2-text {padding-left: 15px;}
	
	/*------------------------------------------*/
	/*	 About-1 Image
	/*------------------------------------------*/

	#about-1-img img {padding: 0 60px;}
		
	/*------------------------------------------*/
	/*	 Video Holder
	/*------------------------------------------*/
	
	#video_holder {margin-bottom: 40px;}
	
	/*------------------------------------------*/
	/*	 Call to Action
	/*------------------------------------------*/
	
	#call-to-action h1 {font-size: 32px; padding: 0;}
	#call-to-action p {font-size: 18px; padding: 0;}
	
	/*------------------------------------------*/
	/*	 Footer Social Icons  
	/*------------------------------------------*/
	
	#footer_icons { margin:6px 0; }
	.footer-socials { display: inline-block; float: none; margin-bottom: 30px;}
	.footer-nav {
		padding: 0 20%;
		margin-bottom: 30px;
	}
	
	/*------------------------------------------*/
	/*	 Footer Newsletter Form
	/*------------------------------------------*/
	
	.subscribe-form {margin: 40px auto 5px; width: 55%; float: none !important;}
	#newsletter-paragraph {float: none !important;}

	#info-producto, #intro-producto {
		width: 100%;
		float:none;
		padding-right: 0;
	}
	#intro-producto {
		margin-bottom: 50px;
	}
	#producto-1 {
		padding-bottom: 0;
		margin-bottom: 0;
	}
	#header-logo-left, #header-logo-right {
		width: 100%;
	}
	#intro .container{ 
		background: url(../img/logo-bg.png) left top repeat-x #0d1822; 
	}
   .tables-wrapper {
        grid-template-columns: 1fr; /* Una sola columna */
    }
    
    .left-column, .right-column {
        width: 100%;
    }
    
    table {
        font-size: 13px; /* Reduce el tamaño de fuente en pantallas medianas */
    }
}

@media (min-width: 481px) and (max-width: 768px) {

    .content-wrapper{
        width: 100%;
    }

	#intro_form, #about-1, #about-2, #features, #faq, #clients, #products { padding-left: 25px; padding-right: 25px;}

	#intro_form_2 { padding-left: 15px; padding-right: 15px; margin-bottom:40px;}


	/*------------------------------------------*/
	/*	  Intro Section
	/*------------------------------------------*/
	#intro {
		padding-bottom: 40px;
	}

	.form_register, .form_register2 {width: 100%; }
    
    #intro .container {
		margin-bottom: 0;
		overflow:visible !important;
	}
	
	/*------------------------------------------*/
	/*	 Features
	/*------------------------------------------*/
	
	.feature-box {margin-bottom: 30px;}
    .row4 {flex-direction: column;}
    .tables-wrapper {grid-template-columns: 1fr;}
    th, td {
        padding: 8px; /* Reduce padding en móviles */
    }
    
    table {
        font-size: 12px; /* Fuente más pequeña en móviles */
    }
	
	/*------------------------------------------*/
	/*	 Call to Action
	/*------------------------------------------*/
	
	#call-to-action p {padding: 0 4%;}
	
	/*------------------------------------------*/
	/*	 Footer
	/*------------------------------------------*/
	
	#footer_nav { text-align: center; margin-bottom: 30px;}
	.footer-nav {display: inline-block;}
	#footer_copy p {margin-left: 0;}
	.footer-nav li {padding: 5px 10px 5px;}
		
	/*------------------------------------------*/
	/*	 Footer Social Icons  
	/*------------------------------------------*/
	
	.footer-socials {float: none;}
	
	/*------------------------------------------*/
	/*	 Footer Newsletter Form
	/*------------------------------------------*/
	
	.subscribe-form {margin: 25px auto 5px; width: 50%;}
	
    /*------------------------------------------*/
	/*	 HEADER
	/*------------------------------------------*/
 

    #header img {
        padding: 0px;
    }
    #logo_image {
        padding-left: 20px;
        padding-right: 0px;
        margin-top: 60px;
        width: 35%;
        position: absolute;
    }
    
    .mejoramos-presupuesto {
    font-size: 18px;
    justify-content: right;
    left: 30px;
    top: 174px;
    height: 0px;
    padding-right: 45px;
    }
    
    .top-telf h4 a {
    font-size: 20px;
    }
    
    @media (max-width: 485px) and (min-width: 481px) {
    #social_icons h4 {
        letter-spacing: -0.5px; /* Junta un poco las letras */
    }
}
    
    /*------------------------------------------*/
	/*	 Menu
	/*------------------------------------------*/
    
    #menu {
        position: relative;
    }

    /* Ocultar la lista del menú por defecto */
    .menu-list {
        display: none;
        flex-direction: column; /* Los elementos en columna */
        position: absolute;
        top: 100%; /* Aparece debajo de la barra */
        left: 0;
        width: 100%; /* Ocupa todo el ancho */
        background-color: #565656; /* Fondo igual que el menú */
        z-index: 10;
    }

    /* Mostrar la lista del menú cuando está activa */
    .menu-list.active {
        display: flex;
        background-color: #0e2b66;
    }

    .menu-link {
        padding: 16px; /* Más espacio para hacer clic */
        border-bottom: 1px solid white; /* Línea separadora */
        text-align: left; /* Alinear el texto a la izquierda */
    }

    /* Último enlace sin línea inferior */
    .menu-item:last-child {
        border-bottom: none;
          }
    .menu-list li:first-child {
        border-left: none;
        border-top: 1px solid white;
          }
    .menu-list li {
        border-right: none;
        width: 100%;
          }

    /* Ícono de hamburguesa */
    .menu-toggle {
        display: block;
        cursor: pointer;
        font-size: 24px;
        color: white;
        padding: 10px 20px;
        background-color: #0e2b66;
        border: none;
        outline: none;
    }
    #sloganprecios {
        font-size: 22px;
        margin-top: 20px;
    }

}

@media (max-width: 480px) {

	#intro_description, #intro_form #social_icons, #about-1, #about-2, #features, #faq, #clients, #products { padding-left: 20px; padding-right: 20px;}
	
	#intro_form_2 { padding-left: 20px; padding-right: 0px;}
    
    
    .intro_feature p {font-size: 14px; }	
	.form_register, .form_register2 {width: 90%; }
	
	#about-1-img img {padding: 0;}
	#about-2-img img {margin-top: 0;padding: 0;}
	
	/*------------------------------------------*/
	/*	 Footer Newsletter Form
	/*------------------------------------------*/
	
	.subscribe-form {margin: 25px auto 5px; width: 70%;}
	.top-telf h4 a{
		font-size:20px;
	}
    .top-telf h4 {
        line-height: 30px;
    }
    h4, .h4 {
        padding: 0px 20px;
    }
    h1, .h1 {
    font-size: 28px;
    }
	
	/*------------------------------------------*/
	/*	 Custom
	/*------------------------------------------*/
    
    #header img {
        padding: 20px 40px 0 40px;
        border: none;
    }
    #logo_image {
        width: 100%;
    }
	#social_icons {
        text-align: center;
        margin: 0;
    }
    
    #sloganprecios{
        padding: 20px;
        font-size: 22px;
    }
    
    .footer-nav {
		padding: 0 10%;
	}
	#banners-producto img {
		padding: 10px;
		max-width: 100%;
	}
	#imagen table {
    	width: 93%;
	}
	#intro_form {
		padding:0px;
	}
	.customNavigation {
		bottom: 70px;
	}
	#imagen {
		width: 100%;
		padding-right: 0;
	}
	#texto {
		width: 100%;
	}
    .mejoramos-presupuesto {
        height: 60px;
        position: initial;
    }
    .row5 {
        display: block;
    }
    .product-subtitle1 {text-align: center;}
    
    #producto-1 {
        width: 100%;
        float: none;
        padding-right: 5px;
    }
    #producto-1-des {
        width: 100%;
        float: none;
        padding-left: 15px;
    }

    #producto-3 {
        width: 100%;
        float: none;
    }
    #producto-3-des {
        width: 100%;
        float: none;
        padding-left: 0px;
    }
    #productos-int {
        display: block;
    }
    
    .tables-wrapper {
        grid-template-columns: 1fr; /* Se apilan en una sola columna */
    }

    table {
        font-size: 11px; /* Ajuste para pantallas muy pequeñas */
        box-shadow: none;
    }

    th, td {
        padding: 6px; /* Más compacto en móviles */
    }
    
    .bloque_icons p {
        text-align: center;
    }
    
    #about-1-text {
    padding-right: 0;
    }
    
    #footer_info, .contact-info-container p, #footer_form p {
        text-align: center;
    }
    
    #footer_links, #footer_form h3 {
        text-align: center;
        padding-top: 20px;
    }
    /*------------------------------------------*/
	/*	 Menu
	/*------------------------------------------*/
    
    #menu {
        position: relative;
    }

    /* Ocultar la lista del menú por defecto */
    .menu-list {
        display: none;
        flex-direction: column; /* Los elementos en columna */
        position: absolute;
        top: 100%; /* Aparece debajo de la barra */
        left: 0;
        width: 100%; /* Ocupa todo el ancho */
        background-color: #565656; /* Fondo igual que el menú */
        z-index: 10;
    }

    /* Mostrar la lista del menú cuando está activa */
    .menu-list.active {
        display: flex;
        background-color: #0e2b66;
    }

    /* Estilos para los enlaces en móvil */
    .menu-link {
        padding: 15px; /* Más espacio para hacer clic */
        border-bottom: 1px solid white; /* Línea separadora */
        text-align: left; /* Alinear el texto a la izquierda */
    }

    /* Último enlace sin línea inferior */
    .menu-item:last-child {
        border-bottom: none;
          }
    .menu-list li:first-child {
        border-left: none;
        border-top: 1px solid white;
          }
    .menu-list li {
        border-right: none;
        width: 100%;
          }

    /* Ícono de hamburguesa */
    .menu-toggle {
        display: block;
        cursor: pointer;
        font-size: 24px;
        color: white;
        padding: 10px 20px;
        background-color: #0e2b66;
        border: none;
        outline: none;
    }
    .row {
    margin-right: -15px;
    margin-left: -15px;
}
    
}