/* --- 1. Reset básico y estilos generales --- */
* {
    margin: 0;
    padding: 0;
    box-sizing: border-box;
}

body {
    font-family: 'Montserrat', sans-serif; /* <<<<< APLICAR LA FUENTE AQUÍ >>>>> */
    line-height: 1.6;
    background-color: #f4f4f4;
    color: #333;
}

/* Opcional: Puedes aplicar Montserrat a los titulares con un peso específico */
h1, h2, h3, h4, h5, h6 {
    font-family: 'Montserrat', sans-serif;
    font-weight: 700; /* O el peso que prefieras para los titulares */
}

/* Asegúrate de revisar otros elementos en tu CSS que puedan tener font-family específicos.
   Por ejemplo, los enlaces de tu navegación, textos en el slider, etc. */

/* Ejemplo para los enlaces de navegación */
.main-nav .main-menu-list li a {
    font-family: 'Montserrat', sans-serif;
    font-weight: 600; /* Si quieres un peso específico para el menú */
}

/* Ejemplo para el título de la sección de características */
.features-header h2 {
    font-family: 'Montserrat', sans-serif;
    /* ... otros estilos ... */
}

.container {
    max-width: 1200px;
    margin: 0 auto;
    padding: 0 20px;
}

/* --- General buttons --- */
.btn {
    display: inline-block;
    background-color: #0056b3;
    color: #fff;
    padding: 10px 20px;
    text-decoration: none;
    border-radius: 5px;
    transition: background-color 0.3s ease;
    margin-top: 15px;
}

.btn:hover {
    background-color: #004085;
}


/* --- 2. Top Bar --- */
.top-bar {
    background-color: #222222;
    color: #fff;
    font-size: 0.85em;
    padding: 8px 0;
}

.top-bar .container {
    display: flex;
    justify-content: space-between;
    align-items: center;
}

.top-bar-info span {
    margin-right: 20px;
}

.top-bar-info i {
    margin-right: 5px;
}

.top-bar-social a {
    color: #fff;
    margin-left: 15px;
    font-size: 1.1em;
    transition: color 0.3s ease;
}

.top-bar-social a:hover {
    color: #a0d9ff;
}


/* --- 3. Main Header (solo para el logo) --- */
.main-header {
    background-color: #fff;
    padding: 1px 0;
    border-bottom: 62px solid #ffffff;
    box-shadow: 0 2px 5px rgba(0,0,0,0.05);
}

.main-header .container {
    display: flex;
    justify-content: flex-start;
    align-items: center;
}

.logo img {
    height: 90px;
    max-width: 100%;
}


/* --- 4. Navigation --- */
.main-nav {
    background-color: #FFD700;
    padding: 0;
    position: relative;
}

.main-nav .container {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 10px 20px;
    position: relative;
}

.main-nav .main-menu-list {
    list-style: none;
    display: flex;
    margin: 0;
}

.hamburger-menu {
    display: none;
}

.main-nav .main-menu-list li {
    position: relative;
}

.main-nav .main-menu-list li a {
    color: #000000;
    text-decoration: none;
    font-weight: 600;
    padding: 15px 20px;
    display: block;
}

.main-nav .main-menu-list li a:hover,
.main-nav .main-menu-list li a:focus {
    color: #000000;
    background-color: rgba(0,0,0,0.1);
    text-decoration: underline;
}

.main-nav .main-menu-list .has-submenu .arrow-down {
    color: #000000;
}

.main-nav .nav-buttons {
    display: flex;
    gap: 15px;
    align-items: center;
}

.main-nav .nav-buttons .btn-secondary-nav {
    background-color: #222222;
    color: #ffffff;
}
.main-nav .nav-buttons .btn-primary-nav {
    background-color: #222222;
    color: #ffffff;
}

/* Submenu en ESCRITORIO */
.main-nav .submenu {
    display: none;
    position: absolute;
    background-color: #5a6268;
    list-style: none;
    min-width: 250px;
    z-index: 1000;
    box-shadow: 0 8px 16px rgba(0,0,0,0.1);
    border-top: 3px solid #28a745;
    left: 0;
    padding: 0;
}

.main-nav .has-submenu:hover .submenu {
    display: block;
}

.main-nav .submenu li a {
    padding: 12px 20px;
    white-space: nowrap;
    color: #fff;
    font-weight: normal;
}

.main-nav .submenu li a:hover {
    background-color: #495057;
    color: #a0d9ff;
}

.main-nav .arrow-down {
    margin-left: 5px;
    font-size: 0.7em;
    vertical-align: middle;
}

/* --- 5. Main content sections - General --- */
main {
    padding: 20px 0;
}


/* --- 6. Hero Slider (múltiples sliders) --- */
.hero-slider {
    background-color: #e0f2f7;
    min-height: 550px;
    display: flex;
    align-items: center;
    padding: 60px 0;
    margin-bottom: 40px;
    position: relative;
    overflow: hidden;
    width: 100%;
}

.hero-slider .container {
    width: 100%;
    position: relative;
    padding: 0;
    max-width: 100%;
}

.slides-wrapper {
    display: flex;
    transition: transform 0.5s ease-in-out;
    width: 100%;
    height: auto;
}

.slider-item {
    flex: 0 0 100%;
    max-width: 100%;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 0 20px;
    box-sizing: border-box;
}

.slider-item .slide-content-wrapper {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 40px;
    max-width: 1200px;
    width: 100%;
}

.hero-left {
    flex: 1;
    max-width: 55%;
    text-align: left;
    color: #333;
}

.hero-right {
    flex: 1;
    max-width: 45%;
    display: flex;
    justify-content: center;
    align-items: center;
}

.hero-left h1 {
    font-size: 3.2em;
    margin-bottom: 20px;
    color: #0056b3;
    line-height: 1.2;
}

.hero-left p {
    font-size: 1.3em;
    margin-bottom: 30px;
    color: #555;
    line-height: 1.6;
}

.hero-side-image {
    max-width: 100%;
    height: auto;
    border-radius: 8px;
    box-shadow: 0 10px 30px rgba(0,0,0,0.15);
}

.btn-hero {
    background-color: #face39;
    color: #fff;
    padding: 15px 35px;
    font-size: 1.2em;
    border-radius: 8px;
    text-transform: uppercase;
    font-weight: 700;
    transition: background-color 0.3s ease, transform 0.2s ease;
    display: inline-block;
}

.btn-hero:hover {
    background-color: #43a047;
    transform: translateY(-3px);
    box-shadow: 0 5px 15px rgba(0,0,0,0.2);
}

/* Estilo para el slide por defecto si no hay sliders de la DB */
.slider-item.default-slide {
    width: 100%;
    text-align: center;
    flex-direction: column;
    justify-content: center;
}
.slider-item.default-slide .hero-left {
    max-width: 100%;
    text-align: center;
}
.slider-item.default-slide .hero-right {
    display: none;
}

/* --- Estilos para los controles del Slider (flechas y puntos) --- */
.slider-controls {
    position: absolute;
    bottom: 30px;
    left: 50%;
    transform: translateX(-50%);
    display: flex;
    align-items: center;
    z-index: 10;
    width: 100%;
    max-width: 1200px;
    padding: 0 20px;
    box-sizing: border-box;
}

.slider-controls .slider-arrow {
    background-color: rgba(0, 86, 179, 0.7);
    color: #fff;
    border: none;
    border-radius: 50%;
    width: 40px;
    height: 40px;
    font-size: 1.5em;
    display: flex;
    justify-content: center;
    align-items: center;
    cursor: pointer;
    transition: background-color 0.3s ease;
}
.slider-controls .slider-arrow:hover {
    background-color: #0056b3;
}

.slider-controls .slider-arrow.prev {
    position: absolute;
    left: 0;
    top: 50%;
    transform: translateY(-50%);
}
.slider-controls .slider-arrow.next {
    position: absolute;
    right: 0;
    top: 50%;
    transform: translateY(-50%);
}

.slider-dots {
    display: flex;
    gap: 10px;
    margin: 0 auto;
}

.slider-dot {
    width: 12px;
    height: 12px;
    background-color: rgba(255, 255, 255, 0.5);
    border-radius: 50%;
    cursor: pointer;
    transition: background-color 0.3s ease, transform 0.3s ease;
}

.slider-dot.active {
    background-color: #66bb6a;
    transform: scale(1.2);
}


/* --- 7. Brand Logos Section --- */
.brand-logos-section {
    background-color: #fff;
    padding: 50px 0;
    margin-bottom: 40px;
    border-top: 1px solid #eee;
    text-align: center;
    box-shadow: 0 2px 5px rgba(0,0,0,0.05);
}

.brand-logos-section h2 {
    font-size: 2.2em;
    color: #0056b3;
    margin-bottom: 40px;
    text-align: center;
}

.brand-logos-grid {
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    align-items: center;
    gap: 30px;
}

.brand-logos-grid img {
    max-height: 80px;
    width: auto;
    max-width: 180px;
    filter: grayscale(100%);
    opacity: 0.7;
    transition: all 0.3s ease;
}

.brand-logos-grid img:hover {
    filter: grayscale(0%);
    opacity: 1;
    transform: scale(1.05);
}


/* --- 8. Page Title Banner (para páginas internas como "Nosotros" o "Productos") --- */
.page-title-banner {
    background-color: #0056b3;
    color: #fff;
    padding: 60px 0;
    text-align: center;
    margin-bottom: 40px;
    box-shadow: 0 2px 5px rgba(0,0,0,0.1);
}

.page-title-banner h1 {
    font-size: 3em;
    margin-bottom: 15px;
}

.page-title-banner p {
    font-size: 1.2em;
    max-width: 800px;
    margin: 0 auto;
}

/* <<<<< INICIO DE CAMBIO: NUEVO ESTILO ESPECÍFICO PARA EL BANNER DE DETALLE DE PRODUCTO >>>>> */
.product-page-banner {
    background-color: #fff; /* Fondo negro */
    color: #fff; /* Color de texto base blanco */
    padding: 40px 0; /* Menos padding para hacerlo menos alto */
    margin-bottom: 0; /* Eliminar margen inferior para que se junte con el contenido del producto */
    box-shadow: none; /* Eliminar sombra */
}

.product-page-banner h1 {
    font-size: 2.2em; /* Título un poco más pequeño */
    font-weight: 700; /* Asegurar negrita */
    margin-bottom: 10px; /* Menos espacio con el subtítulo */
    color: #222; /* Asegurar color blanco para el título */
}

.product-page-banner p {
    font-size: 1.1em; /* Subtítulo un poco más pequeño */
    color: #a0a0a0; /* Color plomo para el subtítulo */
    max-width: 900px; /* Un poco más de ancho para la descripción corta */
    margin: 0 auto;
}
/* <<<<< FIN DE CAMBIO >>>>> */

/* --- 9. Content Section (para contenido principal de páginas internas) --- */
.content-section {
    background-color: #fff;
    padding: 50px 0;
    margin-bottom: 40px;
    border-radius: 8px;
    box-shadow: 0 2px 5px rgba(0,0,0,0.1);
}

/* Títulos h2 en páginas de contenido (ej. Nosotros, encabezado de Productos Destacados en Index) */
.content-section h2,
.about-us-preview h2 {
    font-size: 2.2em;
    color: #0056b3;
    margin-bottom: 25px;
    text-align: center;
    border-bottom: none;
    padding-bottom: 0;
}

/* Estilo para el título verde de "Nuestros Productos" en el index */
.section-title-green {
    font-size: 2.8em;
    color: #4CAF50;
    margin-bottom: 50px;
    text-align: center;
    font-weight: 700;
}

/* Títulos h2 específicos para categorías en la página de Productos (alineados a la izquierda) */
.products-listing-section h2.category-title {
    text-align: left;
    margin-bottom: 30px;
    margin-top: 50px;
    font-size: 2.5em;
    color: #0056b3;
    border-bottom: 2px solid #0056b3;
    padding-bottom: 10px;
}

/* Otros títulos y párrafos de contenido general */
.content-section h3 {
    font-size: 1.8em;
    color: #28a745;
    margin-top: 30px;
    margin-bottom: 15px;
}

.content-section p {
    font-size: 1.1em;
    line-height: 1.7;
    margin-bottom: 20px;
    color: #555;
}

.content-section ul {
    list-style: disc;
    margin-left: 30px;
    margin-bottom: 20px;
    color: #555;
}

.content-section ul li {
    margin-bottom: 10px;
    font-size: 1.1em;
}


/* --- 10. Product Detail Section --- */
.product-detail-section {
    padding: 60px 0;
    margin-bottom: 40px;
    background-color: #fcfcfc;
}

.product-detail-grid {
    display: flex;
    gap: 50px;
    align-items: flex-start;
}

.product-detail-image {
    flex: 0 0 45%;
    max-width: 45%;
    background-color: #fff;
    border: 1px solid #eee;
    padding: 25px;
    border-radius: 10px;
    box-shadow: 0 5px 15px rgba(0,0,0,0.08);
    display: flex;
    justify-content: center;
    align-items: center;
    overflow: hidden;
    margin-bottom: 15px;
    border-radius: 5px;
}

.product-detail-image img {
    max-width: 100%;
    height: auto;
    display: block;
    border-radius: 5px;
}

.product-detail-info {
    flex: 1;
    max-width: 55%;
}

.product-detail-info h2 {
    font-size: 2.5em;
    color: #0056b3;
    margin-bottom: 20px;
    text-align: left;
    border-bottom: 2px solid #0056b3;
    padding-bottom: 10px;
}

.product-detail-info h3 {
    font-size: 1.8em;
    color: #28a745;
    margin-top: 40px;
    margin-bottom: 20px;
    text-align: left;
}

.product-detail-info p {
    font-size: 1.1em;
    line-height: 1.8;
    color: #444;
    margin-bottom: 25px;
}

.product-spec-table {
    width: 100%;
    border-collapse: collapse;
    margin-bottom: 30px;
    font-size: 1em;
}

.product-spec-table th,
.product-spec-table td {
    padding: 12px 15px;
    border: 1px solid #ddd;
    text-align: left;
}

.product-spec-table th {
    background-color: #e9ecef;
    color: #333;
    width: 35%;
    font-weight: 600;
}

.product-spec-table td {
    background-color: #f8f9fa;
    color: #555;
    width: 65%;
}

.product-detail-actions {
    margin-top: 40px;
    text-align: center;
}

.product-detail-actions .btn {
    padding: 15px 40px;
    font-size: 1.2em;
    border-radius: 8px;
    text-transform: uppercase;
    font-weight: 700;
}


/* --- 11. About Us Details (Específico de la página Nosotros) --- */
.about-content-grid {
    display: flex;
    gap: 40px;
    align-items: center;
    margin-bottom: 50px;
}

.about-text {
    flex: 1;
    max-width: 60%;
}

.about-image {
    flex: 1;
    max-width: 40%;
    text-align: center;
}

.about-image img {
    max-width: 100%;
    height: auto;
    border-radius: 10px;
    box-shadow: 0 8px 20px rgba(0,0,0,0.1);
}

.section-divider {
    border: 0;
    height: 1px;
    background-image: linear-gradient(to right, rgba(0, 0, 0, 0), rgba(0, 86, 179, 0.75), rgba(0, 0, 0, 0));
    margin: 60px 0;
}


/* --- 12. Team Section (Específico de la página Nosotros) --- */
.team-section {
    text-align: center;
    margin-top: 60px;
}

.team-section h2 {
    font-size: 2.5em;
    color: #0056b3;
    margin-bottom: 30px;
}

.team-members {
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    gap: 30px;
    margin-top: 40px;
}

.team-member {
    background-color: #f9f9f9;
    border: 1px solid #eee;
    border-radius: 8px;
    padding: 20px;
    text-align: center;
    box-shadow: 0 4px 10px rgba(0,0,0,0.05);
    flex: 0 0 auto;
    width: 250px;
    transition: transform 0.3s ease;
}

.team-member:hover {
    transform: translateY(-5px);
}

.team-member img {
    width: 120px;
    height: 120px;
    border-radius: 50%;
    object-fit: cover;
    margin-bottom: 15px;
    border: 3px solid #0056b3;
}

.team-member h3 {
    font-size: 1.3em;
    color: #333;
    margin-bottom: 5px;
}

.team-member p {
    font-size: 0.95em;
    color: #777;
    margin-bottom: 0;
}


/* --- 13. Products Preview (HomePage) y Products Listing Section (Products Page) --- */
/* Estilos compartidos para las secciones de productos */
.products-preview,
.products-listing-section {
    background-color: #f8f8f8;
    padding: 60px 0;
    margin-bottom: 40px;
}

.products-preview .product-grid,
.products-listing-section .product-grid {
    display: grid !important;
    grid-template-columns: repeat(4, 1fr) !important; /* Default 4 columnas */
    gap: 25px !important;
    justify-content: center;
    margin-bottom: 30px;
}

/* Estilos para cada item/tarjeta de producto (REDEFINIDOS) */
.product-item {
    background-color: #fff;
    border: 1px solid #eee;
    border-radius: 8px;
    overflow: hidden;
    box-shadow: 0 2px 8px rgba(0,0,0,0.05);
    transition: transform 0.3s ease, box-shadow 0.3s ease;
    /* <<<<<<< CAMBIO CLAVE: ELIMINAR estas dos líneas de aquí >>>>>>> */
    /* display: flex; */
    /* flex-direction: column; */
    text-align: center;
    padding-bottom: 0;
    /* Los bordes de depuración se pueden quitar después de verificar que funciona */
    /* border: 1px solid red !important; */ 
    flex: none !important; 
    width: auto !important; 
    max-width: 100% !important; 
    box-sizing: border-box !important; 
}

.product-item:hover {
    transform: translateY(-3px);
    box-shadow: 0 5px 15px rgba(0,0,0,0.1);
}

.product-item .product-link {
    text-decoration: none;
    color: inherit;
    flex-grow: 1;
    /* <<<<<<< CAMBIO CLAVE: MOVER display: flex; y flex-direction: column; AQUÍ >>>>>>> */
    display: flex;
    flex-direction: column;
    padding: 15px 10px 0 10px;
}

.product-item .product-image-wrapper {
    width: 100%;
    height: 160px;
    position: relative;
    background-color: #f0f0f0;
    display: flex;
    justify-content: center;
    align-items: center;
    overflow: hidden;
    margin-bottom: 15px;
    border-radius: 5px;
}

.product-item img {
    position: static;
    max-width: 90%;
    max-height: 90%;
    width: auto;
    height: auto;
    object-fit: contain;
    padding: 0;
    transition: transform 0.3s ease;
}

.product-item:hover img {
    transform: scale(1.02);
}

.product-item .product-info-text {
    flex-grow: 1;
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    margin-bottom: 15px;
}

.product-item .product-type {
    font-size: 0.9em;
    color: #66bb6a;
    margin-bottom: 5px;
    font-weight: 600;
    text-transform: uppercase;
}

.product-item h3 {
    font-size: 1.1em;
    color: #424242;
    margin: 0 0 10px 0;
    line-height: 1.3;
    font-weight: 600;
    min-height: auto;
    display: block;
}

.product-item .product-rating {
    color: #ffb300;
    font-size: 0.9em;
    margin-bottom: 10px;
}
.product-item .product-rating .far,
.product-item .product-rating .fas {
    margin: 0 2px;
}

.product-item .product-price {
    font-size: 1.2em;
    color: #333;
    font-weight: 700;
    margin-bottom: 0;
}

.product-item .product-actions {
    display: flex;
    justify-content: space-around;
    padding: 10px;
    border-top: 1px solid #eee;
    background-color: #f5f5f5;
    width: 100%;
}

.btn-product-action {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    padding: 8px 12px;
    border-radius: 5px;
    text-decoration: none;
    font-size: 0.9em;
    font-weight: 600;
    transition: background-color 0.3s ease, color 0.3s ease, border-color 0.3s ease;
    border: 1px solid transparent;
    flex: 1;
    margin: 0 5px;
}

.btn-product-action i {
    margin-right: 8px;
}

.btn-product-action.btn-quote {
    background-color: #fad60b;
    color: #fff;
    border-color: #fad60b;
}

.btn-product-action.btn-quote:hover {
    background-color: #0056b3;
    border-color: #0056b3;
}

.btn-product-action.btn-details {
    background-color: #6c757d;
    color: #fff;
    border-color: #6c757d;
}

.btn-product-action.btn-details:hover {
    background-color: #5a6268;
    border-color: #5a6268;
}


/* --- 14. Services Listing Section --- */
.services-listing-section {
    background-color: #fcfcfc;
    padding: 60px 0;
    margin-bottom: 40px;
}

.services-grid {
    display: grid;
    grid-template-columns: repeat(3, 1fr); 
    gap: 30px;
    justify-content: center;
}

.service-item {
    background-color: #fff;
    border: 1px solid #ddd;
    border-radius: 8px;
    padding: 30px;
    text-align: center;
    box-shadow: 0 4px 12px rgba(0,0,0,0.08);
    transition: transform 0.3s ease, box-shadow 0.3s ease;
    display: flex;
    flex-direction: column;
    justify-content: space-between;
    align-items: center;
}

.service-item:hover {
    transform: translateY(-5px);
    box-shadow: 0 8px 20px rgba(0,0,0,0.15);
}

.service-item .service-icon {
    font-size: 3.5em;
    color: #0056b3;
    margin-bottom: 20px;
    width: 80px;
    height: 80px;
    display: flex;
    justify-content: center;
    align-items: center;
    border: 2px solid #0056b3;
    border-radius: 50%;
    transition: all 0.3s ease;
}

.service-item:hover .service-icon {
    background-color: #0056b3;
    color: #fff;
}

.service-item h3 {
    font-size: 1.5em;
    color: #0056b3;
    margin-bottom: 15px;
    line-height: 1.3;
    flex-grow: 1;
    display: flex;
    align-items: center;
    justify-content: center;
}

.service-item p {
    font-size: 1em;
    color: #555;
    margin-bottom: 25px;
    line-height: 1.6;
    flex-grow: 1;
}

.btn.btn-sm {
    padding: 8px 15px;
    font-size: 0.9em;
    border-radius: 5px;
    margin-top: 10px;
}
.btn.btn-sm:hover {
    background-color: #004085;
}


/* --- 15. Contact Page Section --- */
.contact-page-section {
    padding: 60px 0;
    margin-bottom: 40px;
    background-color: #fcfcfc;
}

.form-status-message {
    padding: 15px;
    margin-bottom: 25px;
    border-radius: 5px;
    font-weight: 600;
    text-align: center;
}

.form-status-message.success {
    background-color: #d4edda;
    color: #155724;
    border: 1px solid #c3e6cb;
}

.form-status-message.error {
    background-color: #f8d7da;
    color: #721c24;
    border: 1px solid #f5c6cb;
}

.contact-grid {
    display: flex;
    gap: 40px;
    margin-bottom: 60px;
    align-items: flex-start;
}

.contact-form-wrapper,
.contact-info-wrapper {
    flex: 1;
    background-color: #fff;
    padding: 30px;
    border-radius: 8px;
    box-shadow: 0 4px 15px rgba(0,0,0,0.08);
}

.contact-form-wrapper h2,
.contact-info-wrapper h2 {
    font-size: 2em;
    color: #0056b3;
    margin-bottom: 30px;
    text-align: center;
    border-bottom: 2px solid #0056b3;
    padding-bottom: 10px;
}

.contact-form .form-group {
    margin-bottom: 20px;
}

.contact-form label {
    display: block;
    margin-bottom: 8px;
    font-weight: 600;
    color: #333;
}

.contact-form input[type="text"],
.contact-form input[type="email"],
.contact-form textarea {
    width: 100%;
    padding: 12px;
    border: 1px solid #ccc;
    border-radius: 5px;
    font-size: 1em;
    transition: border-color 0.3s ease, box-shadow 0.3s ease;
}

.contact-form input[type="text"]:focus,
.contact-form input[type="email"]:focus,
.contact-form textarea:focus {
    border-color: #0056b3;
    box-shadow: 0 0 0 0.2rem rgba(0, 86, 179, 0.25);
    outline: none;
}

.contact-form textarea {
    resize: vertical;
    min-height: 120px;
}

.contact-form .btn-submit {
    width: 100%;
    padding: 15px;
    font-size: 1.1em;
    font-weight: 700;
    background-color: #66bb6a;
    color: #fff;
    border: none;
    border-radius: 5px;
    cursor: pointer;
    transition: background-color 0.3s ease, transform 0.2s ease;
}

.contact-form .btn-submit:hover {
    background-color: #43a047;
    transform: translateY(-2px);
}

.contact-info-wrapper .info-item {
    display: flex;
    align-items: center;
    margin-bottom: 20px;
}

.contact-info-wrapper .info-item i {
    font-size: 1.5em;
    color: #0056b3;
    margin-right: 15px;
    width: 30px;
    text-align: center;
}

.contact-info-wrapper .info-item p {
    margin: 0;
    font-size: 1.1em;
    color: #444;
}

.contact-info-wrapper .info-item p strong {
    color: #0056b3;
}

.contact-info-wrapper .social-contact {
    margin-top: 40px;
    border-top: 1px solid #eee;
    padding-top: 30px;
    text-align: center;
}

.contact-info-wrapper .social-contact h3 {
    font-size: 1.5em;
    color: #0056b3;
    margin-bottom: 20px;
}

.contact-info-wrapper .social-contact a {
    font-size: 1.8em;
    color: #555;
    margin: 0 10px;
    transition: color 0.3s ease;
}

.contact-info-wrapper .social-contact a:hover {
    color: #0056b3;
}

.contact-map-wrapper {
    background-color: #fff;
    padding: 30px;
    border-radius: 8px;
    box-shadow: 0 4px 15px rgba(0,0,0,0.08);
    margin-top: 40px;
    text-align: center;
}

.contact-map-wrapper h2 {
    font-size: 2em;
    color: #0056b3;
    margin-bottom: 30px;
    border-bottom: 2px solid #0056b3;
    padding-bottom: 10px;
    display: inline-block;
}

.contact-map-wrapper iframe {
    border-radius: 8px;
    box-shadow: 0 2px 10px rgba(0,0,0,0.1);
    margin-top: 20px;
}

.contact-map-wrapper .map-disclaimer {
    font-size: 0.9em;
    color: #777;
    margin-top: 15px;
}


/* --- 16. Footer --- */
.main-footer {
    background-color: #333;
    color: #fff;
    padding: 40px 0;
    font-size: 0.9em;
}

.main-footer .footer-widgets {
    display: flex;
    justify-content: space-around;
    flex-wrap: wrap;
    margin-bottom: 30px;
}

.main-footer .widget {
    flex: 1;
    min-width: 250px;
    margin: 15px;
}

.main-footer .widget h3 {
    color: #fff;
    margin-bottom: 15px;
    border-bottom: 1px solid #555;
    padding-bottom: 10px;
}

.main-footer .widget ul {
    list-style: none;
}

.main-footer .widget ul li a {
    color: #ccc;
    text-decoration: none;
    display: block;
    padding: 5px 0;
}

.main-footer .widget ul li a:hover {
    color: #fff;
}

.main-footer .copyright {
    text-align: center;
    padding-top: 20px;
    border-top: 1px solid #555;
}


/* --- 17. Media Queries para Responsividad General --- */

/* Desktop más grandes (default: 4 columnas para productos)
   Ya está definido en .products-preview .product-grid, .products-listing-section .product-grid sin media query. */


/* Desktop medianos y Tablets grandes (max-width: 1200px) - 3 columnas */
@media (max-width: 1200px) {
    /* Productos Grid */
    .products-preview .product-grid,
    .products-listing-section .product-grid {
        grid-template-columns: repeat(3, 1fr) !important; /* Forzar 3 columnas */
        gap: 20px;
    }
    /* Services Grid */
    .services-grid {
        grid-template-columns: repeat(2, 1fr); /* Servicios a 2 columnas en este rango */
    }

    /* Hero Slider */
    .hero-slider .container {
        gap: 30px;
    }
    .hero-left h1 {
        font-size: 2.8em;
    }
    .hero-left p {
        font-size: 1.2em;
    }

    /* Logos */
    .brand-logos-grid {
        gap: 25px;
    }
    .brand-logos-grid img {
        max-height: 70px;
        max-width: 150px;
    }

    /* Page Title Banner */
    .page-title-banner h1 {
        font-size: 2.5em;
    }
    .page-title-banner p {
        font-size: 1.1em;
    }

    /* Contenido General */
    .content-section h2,
    .about-us-preview h2 {
        font-size: 2em;
    }
    .content-section h3 {
        font-size: 1.5em;
    }
    .content-section p, .content-section ul li {
        font-size: 1em;
    }

    /* About Us Details */
    .about-content-grid {
        flex-direction: column;
        text-align: center;
    }
    .about-text,
    .about-image {
        max-width: 100%;
    }
    .about-image {
        order: -1;
        margin-bottom: 30px;
    }
    
    /* Team Section */
    .team-member {
        width: 45%;
        max-width: 300px;
    }

    /* Product Detail Page */
    .product-detail-grid {
        flex-direction: column;
        align-items: center;
        gap: 30px;
    }
    .product-detail-image,
    .product-detail-info {
        max-width: 100%;
        flex: 0 0 100%;
    }
    .product-detail-info h2,
    .product-detail-info h3 {
        text-align: center;
    }

    /* Services Grid */
    .services-grid {
        grid-template-columns: repeat(auto-fit, minmax(250px, 1fr));
        gap: 25px;
    }
    .service-item h3 {
        font-size: 1.3em;
    }

    /* Contact Page */
    .contact-grid {
        flex-direction: column;
        gap: 30px;
    }
}


/* Tablets (max-width: 992px) - 2 columnas */
@media (max-width: 992px) {
    /* Productos Grid */
    .products-preview .product-grid,
    .products-listing-section .product-grid {
        grid-template-columns: repeat(2, 1fr) !important; /* Forzar 2 columnas */
        gap: 20px;
    }
    /* Services Grid */
    .services-grid {
        grid-template-columns: 1fr; /* Servicios a 1 columna en este rango */
        gap: 20px;
    }

    /* Otras reglas para este breakpoint */
    .product-item .product-image-wrapper {
        height: 140px;
    }
    .product-item h3 {
        font-size: 1em;
    }
    .product-item .product-price {
        font-size: 1em;
    }
}

/* Móviles grandes y tablets pequeñas (max-width: 768px) - 1 columna */
@media (max-width: 768px) {
    /* Menú de Navegación Móvil */
    .hamburger-menu {
        display: block;
        background: none;
        border: none;
        cursor: pointer;
        padding: 10px;
        z-index: 1000;
        position: absolute;
        right: 20px;
        top: 50%;
        transform: translateY(-50%);
    }

    .hamburger-menu .bar {
        display: block;
        width: 25px;
        height: 3px;
        background-color: #333;
        margin: 5px 0;
        transition: 0.4s;
    }

    .main-nav .container {
        justify-content: space-between;
        align-items: center;
        position: relative;
    }

    .main-nav .main-menu-list {
        display: none;
        flex-direction: column;
        width: 100%;
        position: absolute;
        left: 0;
        background-color: #f4f4f4;
        box-shadow: 0 8px 16px rgba(0,0,0,0.2);
        z-index: 999;
        top: 215px;
    }

    .main-nav .main-menu-list.active {
        display: flex;
        background-color: #f4f4f4;
    }

    .main-nav .main-menu-list li {
        width: 100%;
        text-align: center;
        padding: 10px 0;
        border-bottom: 1px solid #eee;
    }

    .main-nav .main-menu-list li:last-child {
        border-bottom: none;
    }

    .main-nav .main-menu-list .has-submenu > a {
        display: flex;
        justify-content: center;
        align-items: center;
    }

    .main-nav .main-menu-list .submenu {
        display: none;
        background-color: #e0e0e0;
        position: static;
        width: 100%;
        box-shadow: none;
    }

    .main-nav .main-menu-list .has-submenu.open .submenu {
        display: block;
    }

    .main-nav .nav-buttons {
        display: none; /* Ocultar los botones "Catálogo" y "Contáctanos" en el menú móvil */
    }

    .main-nav .main-menu-list li a {
        color: #333333;
        text-decoration: none;
        padding: 15px 20px;
        display: block;
    }

    .main-nav .main-menu-list .submenu li a {
        color: #555555;
        padding-left: 40px;
        font-size: 0.95em;
    }

    .main-nav .main-menu-list .has-submenu .arrow-down {
        color: #333333;
    }

    /* Productos Grid */
    .products-preview .product-grid,
    .products-listing-section .product-grid {
        grid-template-columns: 1fr !important; /* Forzar 1 columna para móviles/tablets pequeñas */
        gap: 20px;
    }
    /* Services Grid */
    .services-grid {
        grid-template-columns: 1fr; /* Servicios a 1 columna */
        gap: 20px;
    }

    /* Hero Slider */
    .hero-left h1 {
        font-size: 2.5em;
    }
    .hero-left p {
        font-size: 1.1em;
    }
    .btn-hero {
        padding: 12px 25px;
        font-size: 1em;
    }
    .slider-controls {
        bottom: 20px;
    }
    .slider-arrow {
        display: none;
    }
    .slider-dots {
        margin: 0;
    }
    .slider-item {
        padding: 0 15px;
    }

    /* Logos */
    .brand-logos-grid {
        gap: 20px;
    }
    .brand-logos-grid img {
        max-height: 60px;
        max-width: 120px;
    }

    /* Page Title Banner */
    .page-title-banner {
        padding: 40px 0;
    }
    .page-title-banner h1 {
        font-size: 2.2em;
    }
    .page-title-banner p {
        font-size: 1em;
    }

    /* Contenido General */
    .content-section h2,
    .products-preview h2 {
        font-size: 1.8em;
    }
    .content-section h3 {
        font-size: 1.3em;
    }

    /* Productos Listing Section H2 */
    .products-listing-section h2.category-title {
        font-size: 1.8em;
        text-align: center;
        border-bottom: none;
        padding-bottom: 0;
        margin-top: 30px;
        margin-bottom: 20px;
    }

    /* Product Detail Page */
    .product-detail-info h2 {
        font-size: 2.2em;
        margin-bottom: 15px;
        padding-bottom: 5px;
    }
    .product-detail-info h3 {
        font-size: 1.5em;
        margin-top: 30px;
        margin-bottom: 15px;
    }
    .product-detail-info p {
        font-size: 1em;
    }
    .product-spec-table th,
    .product-spec-table td {
        padding: 10px;
        font-size: 0.9em;
    }
    .product-detail-actions .btn {
        padding: 12px 30px;
        font-size: 1.1em;
    }

    /* Team Section */
    .team-members {
        flex-direction: column;
        align-items: center;
    }
    .team-member {
        width: 100%;
        max-width: 300px;
    }

    .product-item h3 {
        min-height: auto;
    }
    .product-item .product-short-description {
        min-height: 50px;
    }
    .btn-product-action {
        font-size: 0.8em;
        padding: 6px 10px;
    }

    /* Contact Page */
    .contact-form-wrapper h2,
    .contact-info-wrapper h2,
    .contact-map-wrapper h2 {
        font-size: 1.8em;
        margin-bottom: 20px;
        padding-bottom: 8px;
    }
    .contact-form .btn-submit {
        padding: 12px;
        font-size: 1em;
    }
    .contact-info-wrapper .info-item {
        flex-direction: column;
        align-items: flex-start;
        text-align: left;
    }
    .contact-info-wrapper .info-item i {
        margin-right: 0;
        margin-bottom: 5px;
    }
    .contact-info-wrapper .social-contact a {
        font-size: 1.5em;
        margin: 0 8px;
    }
    .contact-map-wrapper iframe {
        height: 300px;
    }
}

/* Móviles pequeños (max-width: 480px) */
@media (max-width: 480px) {
    /* General */
    .slider-item {
        padding: 0 10px;
    }
    .container {
        padding: 0 15px;
    }

    /* Top Bar */
    .top-bar-info span {
        margin-right: 10px;
    }
    .top-bar-info {
        flex-direction: column;
        align-items: flex-start;
    }
    .top-bar .container {
        flex-direction: column;
        text-align: center;
        gap: 10px;
    }
    .top-bar-social {
        margin-top: 10px;
    }

    /* Products Grid (confirmar 1 columna para pantallas muy pequeñas) */
    .products-preview .product-grid,
    .products-listing-section .product-grid {
        grid-template-columns: 1fr !important; /* Mantiene 1 columna */
        gap: 15px;
    }
    .product-detail-image {
        padding: 15px;
    }

    /* Contact Page */
    .contact-form-wrapper,
    .contact-info-wrapper,
    .contact-map-wrapper {
        padding: 20px;
    }
    .contact-grid {
        gap: 20px;
    }
    .form-status-message {
        font-size: 0.9em;
    }

    

}
/* Estilos generales del contenedor principal */
.payment-methods-section {
    width: 100%;
    border-top: 1px solid #ccc; /* Línea superior */
    border-bottom: 1px solid #ccc; /* Línea inferior */
    padding: 20px 0; /* Espaciado interno */
    background-color: #fff; /* Fondo blanco */
    font-family: Arial, sans-serif; /* Fuente estándar */
}

/* Contenedor interno para centrar y alinear elementos */
.payment-methods-container {
    max-width: 1200px; /* Ancho máximo, ajusta según tu diseño */
    margin: 0 auto; /* Centrar horizontalmente */
    display: flex;
    align-items: center; /* Alinear verticalmente los elementos */
    justify-content: center; /* Centrar o distribuir elementos */
    gap: 20px; /* Espacio entre los grupos de elementos */
    padding: 0 15px;
}

/* Estilo para el texto "Paga cómodo y seguro" */
.payment-text {
    font-size: 16px;
    color: #333;
    font-weight: 500;
    margin-right: 30px; /* Espacio extra a la derecha del texto */
}

/* Contenedor de los logotipos */
.logos-container {
    display: flex;
    align-items: center;
    gap: 15px; /* Espacio entre los logotipos */
    margin-right: 30px; /* Espacio extra a la derecha de los logos */
}

/* Estilos para los logotipos */
.logo {
    height: 25px; /* Altura estándar para la mayoría de los logos */
    width: auto;
    object-fit: contain; /* Asegura que la imagen se ajuste sin deformarse */
}

/* Clases para logos que son más grandes (como Yape y Plin) */
.large-logo {
    height: 35px; /* Ajusta si son notoriamente más grandes */
}

/* Estilo para el enlace de Más Información */
.more-info-link {
    display: flex;
    align-items: center;
    text-decoration: none; /* Quitar el subrayado del enlace */
    color: #333;
    font-size: 14px;
    font-weight: 500;
    margin-left: 20px; /* Espacio a la izquierda */
}

/* Estilo para el círculo del ícono de información */
.info-icon {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 30px;
    height: 30px;
    border: 1px solid #333; /* Borde del círculo */
    border-radius: 50%; /* Hacerlo circular */
    margin-right: 8px; /* Espacio entre el ícono y el texto */
    color: #333;
}

/* Estilo del ícono SVG dentro del círculo */
.info-icon svg {
    width: 15px; /* Tamaño del ícono dentro del círculo */
    height: 15px;
    fill: currentColor;
}

/* Media query para móviles (opcional, mejora la responsividad) */
@media (max-width: 768px) {
    .payment-methods-container {
        flex-direction: column; /* Apilar elementos en pantallas pequeñas */
        text-align: center;
        gap: 15px;
    }

    .payment-text, .logos-container, .more-info-link {
        margin: 0; /* Eliminar márgenes extras en móvil */
    }

    .logos-container {
        flex-wrap: wrap; /* Permitir que los logos se envuelvan */
        justify-content: center;
    }
}
/* Estilos generales de la sección */
.info-section {
    font-family: Arial, sans-serif;
    text-align: center;
    margin: 40px auto;
    max-width: 1200px; /* Ajusta el ancho máximo de la sección completa */
}

/* Sección superior amarilla */
.yellow-header {
    background-color: #ffda00; /* Color amarillo */
    color: #000;
    padding: 40px 20px;
    border-radius: 100px; /* Bordes ligeramente redondeados */
    margin-bottom: -100px; /* Superposición con la sección negra */
    position: relative; /* Para que el margin-bottom funcione como superposición */
    z-index: 1; /* Asegura que esté encima de la sección negra */
    box-shadow: 0 4px 8px rgba(0, 0, 0, 0.1); /* Sombra sutil */
}

.yellow-header h1 {
    font-size: 2.5em; /* Tamaño del título */
    margin-bottom: 20px;
    font-weight: bold;
    letter-spacing: 1px;
}

.yellow-header p {
    font-size: 1.1em; /* Tamaño del texto de descripción */
    line-height: 1.6;
    max-width: 800px; /* Ancho máximo del párrafo */
    margin: 0 auto; /* Centrar el párrafo */
}

/* Sección inferior negra con características */
.black-features-container {
    background-color: #000; /* Fondo negro */
    color: #fff;
    padding: 120px 20px 60px; /* Más padding arriba para compensar la superposición */
    border-radius: 100px; /* Bordes ligeramente redondeados */
    display: flex;
    justify-content: space-around; /* Distribuye las columnas */
    gap: 30px; /* Espacio entre las columnas */
    position: relative;
    z-index: 0;
    box-shadow: 0 4px 8px rgba(0, 0, 0, 0.2); /* Sombra sutil */
}

.feature-item {
    flex: 1; /* Hace que las columnas tengan el mismo ancho */
    max-width: 300px; /* Ancho máximo para cada columna */
    padding: 20px;
    text-align: center;
}

.icon-circle {
    background-color: #ffda00; /* Círculo amarillo para los iconos */
    border-radius: 50%; /* Forma circular */
    width: 80px; /* Tamaño del círculo */
    height: 80px;
    display: flex;
    align-items: center;
    justify-content: center;
    margin: 0 auto 20px; /* Centrar y añadir margen inferior */
    color: #000; /* Color del icono dentro del círculo */
}

.icon-circle svg {
    width: 40px; /* Tamaño del icono SVG */
    height: 40px;
}

.feature-item h2 {
    font-size: 1.5em; /* Título de la característica */
    margin-bottom: 10px;
    color: #fff;
}

.feature-item p {
    font-size: 0.95em; /* Descripción de la característica */
    line-height: 1.5;
    color: #ccc; /* Color de texto más claro */
}

/* Media Queries para responsividad */
@media (max-width: 992px) {
    .black-features-container {
        flex-wrap: wrap; /* Permite que las columnas se envuelvan */
        justify-content: center; /* Centra las columnas al envolverse */
        padding-top: 100px; /* Ajustar padding superior en pantallas medianas */
    }

    .feature-item {
        max-width: 45%; /* Dos columnas en pantallas medianas */
        margin-bottom: 30px; /* Espacio entre filas */
    }

    .yellow-header h1 {
        font-size: 2em;
    }
}

@media (max-width: 768px) {
    .yellow-header {
        padding: 30px 15px;
    }
    .yellow-header h1 {
        font-size: 1.8em;
    }
    .yellow-header p {
        font-size: 1em;
    }

    .black-features-container {
        flex-direction: column; /* Apilar columnas en pantallas pequeñas */
        align-items: center; /* Centrar elementos apilados */
        padding-top: 80px; /* Ajustar padding superior */
    }

    .feature-item {
        max-width: 90%; /* Ancho completo para una columna */
        margin-bottom: 25px;
    }
}

@media (max-width: 480px) {
    .yellow-header h1 {
        font-size: 1.5em;
    }
    .yellow-header p {
        font-size: 0.9em;
    }
    .black-features-container {
        padding: 60px 15px 30px;
    }
}

/* Estilos generales de la sección */
.newsletter-section {
    background-color: #ffda00; /* Fondo amarillo */
    padding: 50px 20px;
    font-family: Arial, sans-serif;
    color: #000;
    text-align: left; /* Alineación general a la izquierda */
}

.newsletter-content {
    max-width: 1200px; /* Ancho máximo para el contenido */
    margin: 0 auto; /* Centrar el contenido */
}

.newsletter-title {
    font-size: 1.8em;
    font-weight: bold;
    margin-bottom: 25px;
    line-height: 1.3;
}

/* Contenedor del formulario y los iconos sociales */
.newsletter-form-social {
    display: flex;
    justify-content: space-between; /* Distribuye espacio entre formulario y redes */
    align-items: center;
    gap: 30px; /* Espacio entre el formulario y los iconos sociales */
    margin-bottom: 25px;
    flex-wrap: wrap; /* Permite que los elementos se envuelvan en pantallas pequeñas */
}

.newsletter-form {
    display: flex;
    flex-grow: 1; /* Permite que el formulario ocupe el espacio disponible */
    max-width: 400px; /* Ancho máximo para el input y botón */
}

.email-input {
    flex-grow: 1; /* El input ocupa el espacio restante */
    padding: 12px 15px;
    border: none;
    border-radius: 5px;
    font-size: 1em;
    outline: none; /* Quitar el contorno al enfocar */
    color: #333;
}

.submit-button {
    background-color: #000; /* Fondo negro */
    color: #fff;
    padding: 12px 25px;
    border: none;
    border-radius: 5px;
    font-size: 1em;
    cursor: pointer;
    display: flex;
    align-items: center;
    gap: 8px; /* Espacio entre el icono y el texto */
    transition: background-color 0.3s ease;
}

.submit-button:hover {
    background-color: #333; /* Color un poco más claro al pasar el mouse */
}

.submit-button svg {
    width: 18px; /* Tamaño del icono de enviar */
    height: 18px;
    fill: currentColor;
}

/* Iconos de redes sociales */
.social-icons {
    display: flex;
    gap: 15px; /* Espacio entre los iconos */
}

.social-icon-link {
    background-color: #000; /* Fondo negro para cada icono */
    border-radius: 5px; /* Bordes ligeramente redondeados */
    width: 40px; /* Tamaño del contenedor del icono */
    height: 40px;
    display: flex;
    align-items: center;
    justify-content: center;
    color: #fff; /* Color del icono */
    transition: background-color 0.3s ease;
}

.social-icon-link:hover {
    background-color: #333; /* Color más claro al pasar el mouse */
}

.social-icon-link svg {
    width: 20px; /* Tamaño del icono SVG */
    height: 20px;
}

/* Texto de promoción */
.newsletter-promo {
    font-size: 0.95em;
    line-height: 1.5;
    margin-bottom: 20px;
    max-width: 600px; /* Limita el ancho del texto */
}

/* Enlace de políticas de privacidad */
.privacy-link {
    font-size: 0.9em;
    color: #000;
    text-decoration: none; /* Quitar subrayado */
    font-weight: bold;
    letter-spacing: 0.5px;
    transition: color 0.3s ease;
}

.privacy-link:hover {
    color: #333; /* Oscurecer al pasar el mouse */
}

/* Media Queries para responsividad */
@media (max-width: 768px) {
    .newsletter-section {
        padding: 40px 15px;
    }

    .newsletter-title {
        font-size: 1.5em;
        text-align: center; /* Centrar el título en móvil */
        margin-bottom: 20px;
    }

    .newsletter-form-social {
        flex-direction: column; /* Apilar elementos en móvil */
        align-items: center; /* Centrar elementos */
        gap: 20px;
    }

    .newsletter-form {
        max-width: 100%; /* El formulario ocupa todo el ancho disponible */
        flex-direction: column; /* Apilar input y botón si es necesario */
        align-items: stretch;
    }

    .email-input, .submit-button {
        width: 100%; /* Asegurar que ocupan el 100% del ancho del formulario */
    }

    .email-input {
        margin-bottom: 10px; /* Espacio entre input y botón */
    }

    .social-icons {
        justify-content: center; /* Centrar los iconos */
    }

    .newsletter-promo {
        text-align: center;
        font-size: 0.9em;
    }

    .privacy-link {
        display: block; /* Para que ocupe su propia línea */
        text-align: center;
        margin-top: 20px;
    }
}

@media (max-width: 480px) {
    .newsletter-title {
        font-size: 1.3em;
    }
    .submit-button {
        padding: 10px 20px;
    }
    .social-icon-link {
        width: 35px;
        height: 35px;
    }
    .social-icon-link svg {
        width: 18px;
        height: 18px;
    }
}
/* --- Estilos para el Buscador en la Navegación --- */
.search-container {
    display: flex; /* Para que el input y el botón estén en línea */
    align-items: center;
    margin-left: 20px; /* Espacio a la izquierda para separarlo del menú */
    flex-grow: 1; /* Permite que el buscador ocupe espacio si es necesario */
    max-width: 200px; /* Ancho máximo para el buscador en desktop */
}

.search-form {
    display: flex;
    width: 100%;
    border-radius: 5px;
    overflow: hidden; /* Para que el borde se vea continuo */
    border: 1px solid #ccc; /* Borde del input/botón */
}

.search-input {
    border: none;
    padding: 8px 12px;
    font-size: 0.9em;
    outline: none;
    flex-grow: 1; /* Permite que el input ocupe el espacio disponible */
    background-color: #fff; /* Fondo blanco para el input */
    color: #333;
}

.search-input::placeholder {
    color: #888;
}

.search-button {
    background-color: #0056b3; /* Azul para el botón de búsqueda */
    color: #fff;
    border: none;
    padding: 8px 12px;
    cursor: pointer;
    font-size: 0.9em;
    transition: background-color 0.3s ease;
    display: flex;
    align-items: center;
    justify-content: center;
}

.search-button:hover {
    background-color: #004085; /* Azul más oscuro al pasar el ratón */
}

/* --- Responsive para el Buscador --- */
@media (max-width: 992px) {
    .main-nav .container {
        flex-wrap: wrap; /* Permite que los elementos se envuelvan */
        justify-content: center;
    }
    .main-nav .main-menu-list {
        width: 100%; /* Ocupa todo el ancho */
        justify-content: center;
        order: 1; /* Ordena el menú después de otros elementos si hay conflicto */
    }
    .search-container {
        order: 2; /* Ordena el buscador */
        margin-top: 10px; /* Espacio sobre los botones */
        margin-left: 0;
        max-width: 100%; /* Ocupa todo el ancho disponible */
        padding: 0 20px; /* Para que no se pegue a los bordes */
    }
    .main-nav .nav-buttons {
        order: 3; /* Ordena los botones */
        margin-top: 10px;
    }
}

@media (max-width: 768px) {
    /* En móvil, el buscador podría ir en el menú desplegable si se desea.
       Por ahora, lo mantendremos visible pero ajustado */
    .search-container {
        padding: 0 15px; /* Menos padding en móviles pequeños */
    }

    /* Si quieres ocultar el buscador en la navegación principal en móvil
       y solo mostrarlo en el menú desplegable de hamburguesa (si lo integras ahí),
       entonces agregarías `display: none;` aquí.
       Para este ejemplo, lo dejaremos visible pero ajustado.
    */
    /* .search-container { display: none; } */
}
/* --- Footer - Libro de Reclamaciones Enlace --- */
.libro-reclamaciones-footer {
    text-align: center;
    margin-top: 30px;
    margin-bottom: 30px; /* Espacio antes del copyright */
    padding-top: 20px;
    border-top: 1px solid #555; /* Separador */
}

.libro-reclamaciones-footer a img {
    max-width: 150px; /* Tamaño máximo para la imagen */
    height: auto;
    transition: transform 0.3s ease;
}

.libro-reclamaciones-footer a:hover img {
    transform: scale(1.05); /* Efecto al pasar el ratón */
}

/* --- Página Libro de Reclamaciones - Estilos del Formulario --- */
.complaint-book-section {
    background-color: #fff;
    padding: 40px 0;
    margin-bottom: 40px;
    border-radius: 8px;
    box-shadow: 0 2px 5px rgba(0,0,0,0.1);
}

.company-info-lr {
    background-color: #e9ecef;
    padding: 20px;
    border-radius: 8px;
    margin-bottom: 30px;
    text-align: center;
    font-size: 1.1em;
    color: #333;
}
.company-info-lr p {
    margin: 5px 0;
}
.company-info-lr strong {
    color: #0056b3;
}

.complaint-form fieldset {
    border: 1px solid #ddd;
    border-radius: 8px;
    padding: 25px;
    margin-bottom: 30px;
    background-color: #f9f9f9;
}

.complaint-form legend {
    font-size: 1.5em;
    font-weight: 600;
    color: #0056b3;
    padding: 0 10px;
    margin-left: 10px;
    background-color: #f9f9f9; /* Fondo para que no se vea el borde detrás */
    border: none; /* Eliminar borde que a veces viene por defecto */
    width: auto; /* Ajustar ancho al contenido */
}

.complaint-form .form-row {
    display: flex;
    flex-wrap: wrap;
    gap: 20px; /* Espacio entre grupos de formulario */
    margin-bottom: 20px;
}

.complaint-form .form-group {
    flex: 1; /* Permite que los grupos crezcan */
    min-width: 280px; /* Ancho mínimo antes de envolverse */
    margin-bottom: 0; /* Reiniciar margen de form-group */
}

.complaint-form .form-group.half {
    flex-basis: calc(50% - 10px); /* Dos columnas, restando la mitad del gap */
    min-width: unset; /* Permitir flex-basis */
}
.complaint-form .form-group.third {
    flex-basis: calc(33.333% - 13.333px); /* Tres columnas */
    min-width: unset;
}

.complaint-form label {
    display: block;
    margin-bottom: 8px;
    font-weight: 600;
    color: #333;
}

.complaint-form .form-control {
    width: 100%;
    padding: 10px 12px;
    border: 1px solid #ccc;
    border-radius: 5px;
    font-size: 1em;
    transition: border-color 0.3s ease, box-shadow 0.3s ease;
    box-sizing: border-box; /* Importante para padding */
}

.complaint-form .form-control:focus {
    border-color: #0056b3;
    box-shadow: 0 0 0 0.2rem rgba(0, 86, 179, 0.25);
    outline: none;
}

.complaint-form textarea.form-control {
    resize: vertical;
    min-height: 80px;
}

.complaint-form .inline-label {
    display: inline-block;
    margin-left: 10px;
    font-weight: normal;
}

.complaint-form input[type="checkbox"] {
    margin-right: 5px;
}

.complaint-form .radio-group {
    display: flex;
    gap: 15px;
    flex-wrap: wrap;
    margin-top: 5px;
}
.complaint-form .radio-group input[type="radio"] {
    margin-right: 5px;
}
.complaint-form .radio-group label {
    font-weight: normal;
    margin-bottom: 0;
}

.complaint-form .form-actions {
    text-align: center;
    margin-top: 40px;
}

.complaint-form .form-actions .btn-primary-admin {
    padding: 12px 30px;
    font-size: 1.1em;
}

.complaint-form .required-fields-note {
    font-size: 0.9em;
    color: #777;
    margin-bottom: 20px;
}

/* Responsive para el formulario de reclamaciones */
@media (max-width: 768px) {
    .complaint-book-section .container {
        padding: 0 15px; /* Ajuste de padding en móvil */
    }
    .complaint-form fieldset {
        padding: 15px;
    }
    .complaint-form legend {
        font-size: 1.3em;
    }
    .complaint-form .form-row {
        flex-direction: column;
        gap: 0;
    }
    .complaint-form .form-group.half,
    .complaint-form .form-group.third {
        flex-basis: 100%; /* Una columna en móvil */
        min-width: 100%;
    }
    .complaint-form .form-group {
        margin-bottom: 15px;
    }
    .complaint-form .radio-group {
        flex-direction: column;
        align-items: flex-start;
    }
}
/* --- Estilos para el Contador de Visitas --- */
.visit-counter-display {
    text-align: center;
    margin-top: 40px;
    padding: 20px;
    background-color: #e9f5ff; /* Un fondo suave para destacarlo */
    border-radius: 8px;
    font-size: 1.1em;
    color: #0056b3;
    box-shadow: 0 2px 5px rgba(0,0,0,0.05);
}

.visit-counter-display strong {
    font-size: 1.5em;
    color: #333;
    margin-left: 10px;
}