/* css/style.css (VERSIÓN FINAL CON FOOTER MÓVIL EN UNA COLUMNA) */

/* --- Variables y Estilos Globales --- */
:root {
    --primary-color: #FEBD21;      
    --primary-color-dark: #EAA000; 
    --whatsapp-color: #25D366; 
    --whatsapp-color-dark: #128C7E;
    --secondary-color: #6c757d;
    --light-color: #f8f9fa;
    --dark-color: #212529;
    --white-color: #ffffff;
    --font-family: 'Helvetica', 'Arial', sans-serif;
    --container-width: 1140px;
    --border-radius: 8px; 
}

* { margin: 0; padding: 0; box-sizing: border-box; }
body { font-family: var(--font-family); line-height: 1.6; color: var(--dark-color); background-color: var(--white-color); }
body.menu-open { overflow: hidden; }
.container { width: 90%; max-width: var(--container-width); margin: 0 auto; }
a { text-decoration: none; color: var(--primary-color); transition: color 0.3s ease; }
a:hover { color: var(--primary-color-dark); }
.btn { display: inline-block; padding: 12px 24px; border-radius: var(--border-radius); font-weight: bold; text-align: center; transition: all 0.3s ease; }
.btn-primary { background-color: var(--primary-color); color: var(--dark-color); border: 1px solid var(--primary-color); font-weight: 600; }
.btn-primary:hover { background-color: var(--primary-color-dark); color: var(--dark-color); transform: translateY(-2px); }
.animate-on-scroll { opacity: 0; transform: translateY(30px); transition: opacity 0.6s ease-out, transform 0.6s ease-out; }
.animate-on-scroll.visible { opacity: 1; transform: translateY(0); }

/* --- Header & Nav --- */
.top-bar { background-color: var(--dark-color); color: var(--light-color); padding: 8px 0; font-size: 0.9em; }
.top-bar .container { display: flex; justify-content: space-between; align-items: center; }
.top-bar-left, .top-bar-center, .top-bar-right { display: flex; align-items: center; gap: 10px; }
.top-bar i { color: var(--primary-color); }
.main-nav { background-color: var(--white-color); padding: 15px 0; border-bottom: 1px solid #dee2e6; position: sticky; top: 0; z-index: 1000; }
.main-nav .container { display: flex; justify-content: space-between; align-items: center; }
.logo { display: flex; align-items: center; gap: 10px; }
.logo img { height: 80px; width: auto; transition: height 0.3s ease; }
.nav-content { display: flex; align-items: center; gap: 30px; }
.nav-links { list-style: none; display: flex; gap: 25px; }
.nav-links a { color: var(--dark-color); font-weight: bold; padding-bottom: 5px; border-bottom: 2px solid transparent; }
.nav-links a.active, .nav-links a:hover { color: var(--primary-color); border-bottom-color: var(--primary-color); }
.btn-whatsapp-nav { background-color: var(--whatsapp-color); color: var(--white-color); padding: 10px 20px; border-radius: 50px; display: flex; align-items: center; gap: 8px; font-size: 0.9em; font-weight: 600; }
.btn-whatsapp-nav:hover { background-color: var(--whatsapp-color-dark); color: var(--white-color); transform: translateY(-2px); box-shadow: 0 4px 15px rgba(37, 211, 102, 0.3); }
.hamburger { display: none; background: none; border: none; font-size: 2.5em; cursor: pointer; color: var(--dark-color); z-index: 1002; }
.hamburger i { transition: transform 0.3s ease; }

/* --- Sistema de Espaciado de Secciones --- */
.home-section, .content-section { padding: 40px 0; }
.home-section:first-child, .content-section:first-child { padding-top: 20px; }
.section-separator { border: 0; height: 1px; background-color: #e0e0e0; box-shadow: 0 3px 5px -2px rgba(0,0,0,0.08); width: 80%; margin: 0 auto; }
.section-separator + * { padding-top: 40px; }

/* --- SECCIÓN BLOQUES DESTACADOS --- */
.featured-blocks-section { padding-bottom: 0; }
.featured-grid-container { display: flex; gap: 15px; min-height: 500px; }
.large-block { flex: 2.3; }
.small-blocks-wrapper { flex: 1; display: flex; flex-direction: column; gap: 15px; }
.small-blocks-wrapper > a { flex: 1; }
.featured-block { display: block; position: relative; background-size: cover; background-position: center; transition: transform 0.2s ease, filter 0.2s ease; }
.featured-block:hover { transform: scale(1.02); filter: brightness(1.1); }
.featured-block:active { transform: scale(0.99); filter: brightness(0.9); }
.large-block { background-image: url('../img/featured/destacado.webp'); }
.small-block-1 { background-image: url('../img/featured/compra-minima.webp'); }
.small-block-2 { background-image: url('../img/featured/promocion.webp'); }

/* --- SECCIÓN PREVIEW NOSOTROS (Página Inicio) --- */
.about-preview-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 50px; align-items: center; }
.about-preview-text { text-align: left; }
.about-preview-text h2 { font-size: 2.2rem; margin-bottom: 20px; }
.about-preview-text p { color: var(--secondary-color); margin-bottom: 30px; }
.video-wrapper { position: relative; padding-bottom: 56.25%; height: 0; overflow: hidden; border-radius: var(--border-radius); box-shadow: 0 10px 25px rgba(0,0,0,0.1); }
.video-wrapper iframe { position: absolute; top: 0; left: 0; width: 100%; height: 100%; border: 0; }

/* --- SECCIÓN ESPECIALISTAS (Página Inicio) --- */
.specialists-layout { display: flex; gap: 50px; align-items: center; }
.specialists-list-column { flex: 1.5; order: 1; }
.specialists-image-column { flex: 1; order: 2; }
.specialists-image-column img { width: 100%; height: auto; border-radius: var(--border-radius); display: block; }
.specialists-list-column h2 { font-size: 1.6rem; margin-bottom: 25px; text-align: left; }
.specialists-layout .service-item-list { list-style: none; padding: 0; display: grid; grid-template-columns: 1fr 1fr; gap: 15px 25px; }
.specialists-layout .service-item { display: flex; align-items: center; gap: 12px; }
.specialists-layout .service-item i { font-size: 1.8rem; color: var(--primary-color); }
.specialists-layout .service-item h3 { margin: 0; font-size: 0.95rem; line-height: 1.3; }
.specialists-layout .service-item h3 a { color: var(--dark-color); text-decoration: none; transition: color 0.3s ease; }
.specialists-layout .service-item h3 a:hover { color: var(--primary-color-dark); }
.btn-specialists { margin-top: 25px; display: inline-block; }

/* --- SECCIÓN CLIENTES --- */
.clients-section .section-title { text-align: center; font-size: 2.5em; margin-bottom: 40px; }
.logo-carousel-container { width: 100%; overflow: hidden; position: relative; -webkit-mask-image: linear-gradient(to right, transparent 0%, black 10%, black 90%, transparent 100%); mask-image: linear-gradient(to right, transparent 0%, black 10%, black 90%, transparent 100%); }
.logo-carousel-track { display: flex; width: calc(150px * 12); animation: scroll-logos 30s linear infinite; }
.logo-slide { width: 150px; padding: 0 20px; flex-shrink: 0; }
.logo-slide img { width: 100%; height: 60px; object-fit: contain; filter: grayscale(100%); opacity: 0.6; transition: all 0.3s ease; }
.logo-carousel-container:hover .logo-carousel-track { animation-play-state: paused; }
.logo-slide:hover img { filter: grayscale(0%); opacity: 1; transform: scale(1.1); }
@keyframes scroll-logos { 0% { transform: translateX(0); } 100% { transform: translateX(calc(-150px * 6)); } }

/* --- Estilos de Páginas Interiores --- */
.page-header { background-color: var(--primary-color); color: var(--dark-color); padding: 60px 0; text-align: center; }
.page-header h1 { font-size: 2.8em; }
.about-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 50px; align-items: center; }
.about-grid.reverse-on-desktop .about-grid-text { order: 2; }
.about-grid.reverse-on-desktop .about-grid-media { order: 1; }
.about-grid-text h2 { font-size: 2rem; margin-bottom: 20px; }
.about-grid-media img, .vision-image { width: 100%; height: auto; border-radius: var(--border-radius); }
.vision-image { margin-top: 20px; }
.values-list { list-style: none; padding: 0; margin-top: 20px; }
.values-list li { display: flex; align-items: center; gap: 15px; margin-bottom: 15px; font-size: 1.1rem; }
.values-list i { font-size: 1.5rem; color: var(--primary-color); }

/* --- Estilos Página de Servicios (DISEÑO PROFESIONAL) --- */
.services-page-title { padding-top: 0; border-bottom: 2px solid var(--primary-color); display: inline-block; margin-bottom: 50px; }
.services-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 30px; }
.service-card-grid { background-color: var(--white-color); border-radius: var(--border-radius); overflow: hidden; box-shadow: 0 4px 15px rgba(0,0,0,0.05); transition: transform 0.3s ease, box-shadow 0.3s ease; display: flex; flex-direction: column; }
.service-card-grid:hover { transform: translateY(-8px); box-shadow: 0 12px 28px rgba(0, 0, 0, 0.12); }
.service-icon-img { width: 100%; height: 180px; object-fit: cover; }
.service-card-content { padding: 25px; flex-grow: 1; display: flex; flex-direction: column; }
.service-card-content h3 { font-size: 1.25rem; margin-bottom: 15px; }
.service-card-content h3 a { color: var(--dark-color); text-decoration: none; }
.service-card-content h3 a:hover { color: var(--primary-color-dark); }
.service-card-content p { color: var(--secondary-color); font-size: 0.95rem; line-height: 1.7; flex-grow: 1; }

/* --- Estilos Página de Contacto --- */
.contact-wrapper { display: flex; gap: 40px; }
.contact-form { flex: 2; }
.contact-info { flex: 1; background: var(--light-color); padding: 20px; border-radius: var(--border-radius); }
.contact-info p { margin-bottom: 15px; }
.contact-info i { color: var(--primary-color); margin-right: 10px; }
.form-group { margin-bottom: 20px; }
.form-group label { display: block; margin-bottom: 5px; font-weight: bold; }
.form-group input, .form-group textarea { width: 100%; padding: 12px; border: 1px solid #ced4da; border-radius: 5px; }
.contact-page-wrapper { display: grid; grid-template-columns: 1fr 1.5fr; gap: 50px; }
.contact-details { background-color: var(--light-color); padding: 30px; border-radius: var(--border-radius); }
.contact-details h3 { margin-bottom: 15px; font-size: 1.5rem; }
.contact-details p { color: var(--secondary-color); margin-bottom: 30px; }
.details-list { list-style: none; padding: 0; }
.details-list li { display: flex; align-items: flex-start; gap: 15px; margin-bottom: 25px; }
.details-list i { font-size: 1.5rem; color: var(--primary-color); margin-top: 3px; }
.details-list strong { display: block; color: var(--dark-color); font-weight: 600; }
.details-list span { color: var(--secondary-color); }
.contact-separator { border: 0; height: 1px; background-color: #ddd; margin: 30px 0; }
.contact-details h4 { margin-bottom: 15px; font-size: 1.2rem; }
.social-icons-contact { display: flex; gap: 15px; }
.social-icons-contact a i { font-size: 2rem; color: var(--secondary-color); transition: color 0.3s, transform 0.3s; }
.social-icons-contact a:hover i { color: var(--primary-color); transform: translateY(-3px); }
.contact-form-container h3 { margin-bottom: 20px; font-size: 1.5rem; }
.captcha-group { margin-top: 20px; background-color: #f0f0f0; padding: 15px; border-radius: 5px; display: flex; align-items: center; gap: 15px; }
.captcha-group label { margin: 0; font-weight: bold; }
.captcha-group input { width: 100px; padding: 8px; }
.map-section { margin-top: 60px; }
.map-section iframe { border-radius: var(--border-radius); }

/* --- Footer --- */
.main-footer { background-color: var(--dark-color); color: var(--light-color); padding: 50px 0; }
.main-footer .container { display: grid; grid-template-columns: 1.5fr 1fr 1.5fr 1fr; gap: 30px; align-items: start; }
.footer-column { padding-top: 10px; }
.footer-column h4 { margin-bottom: 20px; color: var(--white-color); border-bottom: 1px solid var(--primary-color); padding-bottom: 10px; }
.footer-column ul { list-style: none; }
.footer-column ul li { margin-bottom: 10px; }
.footer-column a, .footer-column p { color: #adb5bd; }
.footer-column a:hover { color: var(--primary-color); }
.footer-logo { width: 150px; margin-top: 20px; }
.footer-cert { max-width: 100%; height: 60px; width: auto; object-fit: contain; }
.footer-cert-section { margin-top: 25px; }
.cert-title { margin-bottom: 15px; color: var(--white-color); padding-bottom: 0; border-bottom: none; font-size: 1em; }
.footer-column .contact-list { list-style: none; }
.footer-column .contact-list li { display: flex; align-items: center; margin-bottom: 15px; }
.footer-column .contact-list i { color: var(--primary-color); font-size: 1.2rem; margin-right: 15px; }
.footer-social-icons { display: flex; gap: 15px; }
.footer-social-icons a i { font-size: 2rem; color: var(--primary-color); transition: opacity 0.3s ease, transform 0.3s ease; }
.footer-social-icons a:hover i { opacity: 0.8; transform: translateY(-3px); }
.copyright { background-color: #111; color: #6c757d; text-align: center; padding: 15px 0; font-size: 0.9em; }
.top-bar .top-bar-text { color: var(--light-color); }
.top-bar .top-bar-text strong { color: var(--white-color); }
.top-bar .top-bar-text a { color: var(--light-color); text-decoration: none; transition: color 0.3s ease; }
.top-bar .top-bar-text a:hover { color: var(--primary-color-dark); }
.top-bar .social-icons { display: flex; align-items: center; gap: 12px; }
.top-bar .social-icons a i { font-size: 1.365em; }

/* --- Responsive --- */
@media (max-width: 992px) {
    .main-footer .container { grid-template-columns: repeat(auto-fit, minmax(250px, 1fr)); }
    .services-grid { grid-template-columns: 1fr 1fr; gap: 20px; }
}

@media (max-width: 768px) {
    /* Reglas generales para móvil */
    .home-section + .home-section, .content-section + .home-section { margin-top: 30px; }
    .section-separator + * { padding-top: 30px; }
    .content-section { padding: 20px 0; }
    .featured-grid-container { flex-direction: column; }
    .large-block { min-height: 300px; }
    .small-blocks-wrapper { display: grid; grid-template-columns: 1fr 1fr; gap: 15px; }
    .about-preview-grid, .specialists-layout, .about-grid, .contact-page-wrapper { flex-direction: column; grid-template-columns: 1fr; }
    .about-preview-text, .specialists-list-column, .about-grid-text, .contact-details { text-align: center; }
    .specialists-layout .service-item-list { grid-template-columns: 1fr; } 
    
    /* Ajustes para Servicios en móvil */
    .page-header { padding: 40px 0; }
    .page-header h1 { font-size: 2.2em; } 
    .services-grid { grid-template-columns: 1fr; gap: 25px; }
    .services-page-title { font-size: 1.6em; margin-bottom: 30px; }
    .service-icon-img { height: 160px; }
    .service-card-content { padding: 20px; }
    .service-card-content h3 { font-size: 1.15rem; }
    
    /* Reglas de navegación móvil */
    .nav-content { display: none; position: absolute; top: 100%; left: 0; width: 100%; background-color: var(--white-color); padding: 25px 30px 30px 30px; flex-direction: column; align-items: flex-start; box-shadow: 0 5px 10px rgba(0,0,0,0.1); border-top: 1px solid #eee; }
    .nav-content.active { display: flex; }
    .nav-links { flex-direction: column; align-items: flex-start; width: auto; gap: 20px; }
    .nav-links a { font-size: 1.2em; text-align: left; }
    .btn-whatsapp-nav { margin-top: 25px; }
    .hamburger { display: block; }
    .top-bar .container { flex-direction: row; justify-content: space-between; gap: 0; }
    .top-bar-left, .hide-on-mobile { display: none; }
    .top-bar-center { font-size: 0.9rem; }
    .logo img { height: 60px; }
    
    /* --- INICIO DE LA CORRECCIÓN EXCLUSIVA PARA EL FOOTER MÓVIL --- */
    .main-footer .container { 
        grid-template-columns: 1fr; /* Cambia a una sola columna */
        gap: 35px; /* Espacio vertical entre las columnas apiladas */
    }
    /* --- FIN DE LA CORRECCIÓN --- */
}