/* --- Reset Básico y Variables --- */
:root {
    --primary-color: #01265A;
    --secondary-color: #6c757d;
    --accent-color: #ffc107;
    --light-color: #f1f2f3;
    --dark-color: #343a40;
    --white-color: #ffffff;
    --font-family: 'Roboto', sans-serif;
    --header-height: 100px;
    --header-height2: 200px;
    --color-hover:#3b86d6;
    /* NUEVO: Variable para transparencia del header */
    --header-bg-transparent: rgba(255, 255, 255, 0.9); /* 90% opaco */
}

* {
    margin: 0;
    padding: 0;
    box-sizing: border-box;
}

html {
    scroll-behavior: smooth;
    scroll-padding-top: var(--header-height2);
}

body {
    font-family: var(--font-family);
    line-height: 1.6;
    color: var(--dark-color);
    background-color: var(--white-color);
}

.container {
    max-width: 1140px;
    margin: 0 auto;
    padding: 0 15px;
}

img {
    max-width: 100%;
    height: auto;
    display: block;
}

a {
    color: var(--primary-color);
    text-decoration: none;
    transition: color 0.3s ease;
}

a:hover {
    color: darken(var(--primary-color), 10%);
}

h1, h2, h3 {
    margin-bottom: 1rem;
    line-height: 1.3;
}

h1 { font-size: 2.5rem; }
h2 { font-size: 2rem; text-align: center; margin-bottom: 2rem; }
h3 { font-size: 1.5rem; }

section {
    padding: 60px 0;
}

/* --- Botones (sin cambios) --- */
.btn {
    display: inline-block;
    padding: 10px 25px;
    border: none;
    border-radius: 5px;
    cursor: pointer;
    font-size: 1rem;
    text-align: center;
    transition: background-color 0.3s ease, transform 0.2s ease;
}
.btn-primary {
    background-color: var(--primary-color);
    color: var(--white-color);
}
.btn-primary:hover {
    background-color: var(--color-hover);
    color: var(--white-color);
    transform: translateY(-2px);
}
.btn-secondary {
    background-color: var(--secondary-color);
    color: var(--white-color);
}
.btn-secondary:hover {
    background-color: var(--color-hover);
    color: var(--white-color);
    transform: translateY(-2px);
}


/* --- Header (Actualizado) --- */
.site-header {
    /* Header fijo y transparente */
    position: sticky;
    top: 0;
    z-index: 1000;
    height: var(--header-height);
    background-color: var(--header-bg-transparent); /* Fondo con transparencia */
    box-shadow: 0 2px 5px rgba(0,0,0,0.1);
    /* Opcional: Efecto vidrio esmerilado */
    -webkit-backdrop-filter: blur(8px);
    backdrop-filter: blur(8px);
    transition: background-color 0.3s ease; /* Suaviza cambio si es necesario */
}

.header-container {
    display: flex;
    justify-content: space-between;
    align-items: center;
    height: 100%;
    gap: 20px; /* Espacio entre logo, búsqueda y nav */
}

.logo img {
    max-height: 90px;
    flex-shrink: 0; /* Evita que el logo se encoja */
}

/* --- Nuevo: Estilos Buscador --- */
.search-form {
    display: flex;
    align-items: center;
    border: 1px solid #ccc;
    border-radius: 20px; /* Bordes redondeados */
    overflow: hidden; /* Para que el botón encaje bien */
    background-color: var(--white-color);
    max-width: 300px; /* Ancho máximo del buscador */
}

.search-form input[type="search"] {
    border: none;
    padding: 8px 15px;
    font-size: 0.9rem;
    outline: none;
    flex-grow: 1; /* Ocupa el espacio disponible */
    background: transparent;
}
/* Ocultar la 'X' por defecto en input search */
.search-form input[type="search"]::-webkit-search-cancel-button,
.search-form input[type="search"]::-webkit-search-decoration {
  -webkit-appearance: none;
  appearance: none;
}

.search-form button {
    background-color: var(--primary-color);
    border: none;
    padding: 8px 12px;
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
    transition: background-color 0.3s ease;
}

.search-form button svg {
    fill: var(--white-color);
    width: 16px;
    height: 16px;
}

.search-form button:hover {
    background-color: darken(var(--primary-color), 10%);
}


/* --- Navegación Principal (ajustes menores) --- */
.main-nav {
    display: flex; /* Para alinear botón y lista */
    align-items: center;
}
.main-nav .nav-list {
    list-style: none;
    display: flex;
    margin: 0; /* Es buena práctica resetear margen/padding aquí también */
    padding: 0;
}
.main-nav li {
    margin-left: 20px;
}
.main-nav a {
    color: var(--dark-color);
    font-weight: bold;
    padding: 5px 0;
    position: relative;
}
.main-nav a::after {
    content: '';
    position: absolute;
    bottom: -2px;
    left: 0;
    width: 0;
    height: 2px;
    background-color: var(--primary-color);
    transition: width 0.3s ease;
}
.main-nav a:hover::after,
.main-nav a.active::after {
    width: 100%;
}
.menu-toggle {
    display: none;
    background: none;
    border: none;
    font-size: 1.8rem;
    cursor: pointer;
    color: var(--dark-color);
    margin-left: 15px; /* Espacio si está junto a la nav */
}

/* --- Sección Hero Slider (NUEVO) --- */
.hero-slider-section {
    padding: 0; /* Quitamos padding para que el slider ocupe todo */
    height: calc(100vh - var(--header-height)); /* Altura viewport menos header */
    min-height: 500px; /* Altura mínima */
    position: relative; /* Contexto para contenido absoluto */
    color: var(--white-color); /* Color de texto por defecto */
}

.hero-slider {
    width: 100%;
    height: 100%;
}

.swiper-slide {
    background-size: cover;
    background-position: center;
    /* --- Estas 3 líneas centran el contenido directo --- */
    display: flex;           /* Habilita Flexbox */
    align-items: center;     /* Centra verticalmente */
    justify-content: center; /* Centra horizontalmente */
    /* --- Fin líneas clave para centrado --- */
    text-align: center;      /* Centra el texto DENTRO del contenedor .hero-content */
    position: relative;
}

/* Estilo para el contenedor del texto dentro del slide */
.swiper-slide .hero-content {
    position: relative; /* Para estar sobre el overlay */
    z-index: 2;
    max-width: 800px;
    /* No necesita flex aquí, ya que el padre (.swiper-slide) lo centra */
    color: var(--white-color); /* Asegura color de texto */
    margin-top: 0;
}

/* Asegúrate que el overlay no interfiera (aunque no debería con position:absolute) */
.hero-overlay {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background-color: rgba(0, 0, 0, 0.5);
    z-index: 1;
}

/* Los estilos para h1, p, etc. dentro de .hero-content no deberían afectar el centrado del bloque .hero-content */
.swiper-slide h1, .swiper-slide h2 {
    color: var(--white-color);
    margin-bottom: 1rem;
}

.swiper-slide h1 { font-size: 3rem; } /* Más grande en el slider */
.swiper-slide h2 { font-size: 2.5rem; }

.swiper-slide p {
    font-size: 1.3rem;
    margin-bottom: 2rem;
    color: rgba(255, 255, 255, 0.9); /* Blanco ligeramente transparente */
}

/* Estilos para los botones de navegación y paginación de Swiper */
.hero-slider .swiper-button-prev,
.hero-slider .swiper-button-next {
    color: var(--white-color); /* Color de las flechas */
    --swiper-navigation-size: 30px; /* Tamaño de las flechas */
    background-color: rgba(0, 0, 0, 0.3); /* Fondo semi-transparente */
    border-radius: 50%;
    width: 50px;
    height: 50px;
    transition: background-color 0.3s ease;
}
.hero-slider .swiper-button-prev:hover,
.hero-slider .swiper-button-next:hover {
    background-color: rgba(0, 0, 0, 0.6);
}
.hero-slider .swiper-button-prev::after,
.hero-slider .swiper-button-next::after {
    font-size: 1rem; /* Ajusta tamaño interno icono */
    font-weight: bold;
}

.hero-slider .swiper-pagination-bullet {
    background-color: rgba(255, 255, 255, 0.7); /* Color de los puntos */
    width: 10px;
    height: 10px;
    opacity: 0.7;
    transition: background-color 0.3s ease, opacity 0.3s ease;
}

.hero-slider .swiper-pagination-bullet-active {
    background-color: var(--white-color); /* Color del punto activo */
    opacity: 1;
}


/* --- Secciones Productos, Beneficios, Nosotros, Contacto (sin cambios significativos) --- */
/* ... (mantener los estilos anteriores para estas secciones) ... */
.product-section { background-color: var(--light-color); }
.product-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(280px, 1fr)); gap: 30px; }
.product-grid2 { display: grid; grid-template-columns: repeat(auto-fit, minmax(280px, 1fr)); gap: 30px; }
.product-card { background-color: var(--white-color); border-radius: 8px; box-shadow: 0 4px 10px rgba(0,0,0,0.08); padding: 20px; text-align: center; transition: transform 0.3s ease, box-shadow 0.3s ease; }
.product-card:hover { transform: translateY(-5px); box-shadow: 0 6px 15px rgba(0,0,0,0.12); }
.product-card img { margin-bottom: 15px; border-radius: 5px; max-height: 200px; object-fit: cover; margin-left: auto; margin-right: auto; }
.product-card h3 { margin-bottom: 10px; color: var(--primary-color); }
.product-card p { margin-bottom: 15px; font-size: 0.95rem; color: var(--secondary-color); }

.benefits-section { background-color: var(--white-color); }
.benefits-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(250px, 1fr)); gap: 30px; text-align: center; }
.benefit-item { padding: 20px; }
.benefit-item span { font-size: 2.5rem; color: var(--primary-color); margin-bottom: 15px; display: block; }
.benefit-item h3 { margin-bottom: 10px; font-size: 1.3rem; }

.about-section { background-color: var(--light-color); }
.about-content { display: grid; grid-template-columns: 1fr 1fr; gap: 40px; align-items: center; }
.about-image img { border-radius: 8px; box-shadow: 0 5px 15px rgba(0,0,0,0.1); }

.contact-section { background-color: var(--primary-color); color: var(--white-color); text-align: center; }
.contact-section h2 { color: var(--white-color); }
.contact-section p { margin-bottom: 1.5rem; font-size: 1.1rem; }
.contact-info p { margin-bottom: 0.8rem; }
.contact-info a { color: var(--accent-color); font-weight: bold; }
.contact-info a:hover { text-decoration: underline; }
.contact-section .btn-primary { background-color: var(--accent-color); color: var(--dark-color); margin-top: 1.5rem; }
.contact-section .btn-primary:hover { background-color: darken(var(--accent-color), 10%); }


/* --- Footer (sin cambios) --- */
.site-footer {
    background-color: var(--dark-color);
    color: var(--light-color);
    text-align: center;
    padding: 20px 0;
    margin-top: 40px;
}

/* --- Responsividad (Actualizada) --- */

/* Tabletas (ej. < 992px) */
@media (max-width: 991.98px) {
    h1 { font-size: 2.2rem; }
    h2 { font-size: 1.8rem; }

    .swiper-slide h1 { font-size: 2.5rem; }
    .swiper-slide h2 { font-size: 2rem; }
    .swiper-slide p { font-size: 1.1rem; }

    .header-container {
        gap: 15px; /* Reducir espacio en header */
    }
    .search-form {
        max-width: 200px; /* Reducir tamaño buscador */
    }

    .about-content {
        grid-template-columns: 1fr;
        text-align: center;
    }
    .about-image {
        order: -1;
        margin-bottom: 20px;
    }
     .about-image img {
        margin-left: auto;
        margin-right: auto;
        max-width: 80%;
    }
}

/* Móviles (ej. < 768px) */
@media (max-width: 767.98px) {
    :root {
        --header-height: 60px; /* Header un poco más bajo en móvil */
    }
    .container {
        padding: 0 20px;
    }
    .swiper-slide .hero-content {
        top:0;
    }
    h1 { font-size: 1.8rem; }
    h2 { font-size: 1.6rem; }

     /* Ajustes Slider en Móvil */
    .hero-slider-section {
        height: 70vh; /* Reducir altura en móvil */
        min-height: 400px;
    }
    .swiper-slide h1 { font-size: 2rem; }
    .swiper-slide h2 { font-size: 1.8rem; }
    .swiper-slide p { font-size: 1rem; margin-bottom: 1.5rem; }
    .hero-slider .swiper-button-prev,
    .hero-slider .swiper-button-next { display: none; } /* Ocultar flechas en móvil */

    /* --- Header Móvil --- */
    .header-container {
        position: relative; /* Para posicionar menú */
    }
    /* Ocultar buscador en menú móvil o rediseñar */
    .header-search {
       /* Opción 1: Ocultarlo completamente */
       /* display: none; */

       /* Opción 2: Moverlo al menú desplegable (requiere JS adicional) */

       /* Opción 3: Dejarlo pero más pequeño (puede quitar espacio) */
       flex-grow: 1; /* Que ocupe espacio disponible */
       max-width: none; /* Sin ancho máximo */
       margin: 0 10px; /* Margen para separarlo */
    }
     .search-form {
        width: 100%; /* Que ocupe el espacio asignado */
        max-width: none;
     }


    /* --- Navegación Móvil --- */
    .menu-toggle {
        display: block;
        order: 3; /* Mover al final */
        margin-left: 0; /* Resetear margen */
        z-index: 1001; /* Encima de otros elementos del header */
    }

    .main-nav {
        order: 2; /* Navegación antes del toggle */
        /* Quitamos el flex para que el ul (oculto) no ocupe espacio */
    }
    .main-nav ul{
        /* Estilos del menú desplegable */
        display: none !important;
        position: absolute;
        top: var(--header-height);
        left: 0;
        width: 100%;
        background-color: var(--white-color);
        box-shadow: 0 5px 10px rgba(0,0,0,0.1);
        flex-direction: column;
        padding: 10px 0;
        border-top: 1px solid #eee;
        z-index: 999; /* Debajo del header sticky */
    }

    .main-nav ul.active {
        display: flex !important; /* Mostrar menú al activar */
    }

    .main-nav li { margin: 0; text-align: center; }
    .main-nav a { display: block; padding: 15px 20px; border-bottom: 1px solid #eee; }
    .main-nav a::after { display: none; }
    .main-nav li:last-child a { border-bottom: none; }


    .product-grid, .product-grid2, .benefits-grid {
        grid-template-columns: 1fr;
    }
}

/* --- Estilos Footer Mejorado --- */

/* Variable para el color de fondo del footer (opcional) */
:root {
    /* ... (tus otras variables) ... */
    --footer-bg-color: #e0f2f7; /* Celeste claro - ajusta este color */
    --footer-text-color: #334e68; /* Color de texto principal para el footer */
    --footer-link-color: var(--dark-color);
    --footer-link-hover-color: #007bff;
    --footer-title-color: #007bff;
}

.enhanced-footer { /* Usamos esta clase o modifica directamente .site-footer si prefieres */
    background: linear-gradient(to right, #01265A, #011B3C);
    color: #fff;
    padding: 50px 0 0; /* Más padding arriba, el inferior lo da footer-bottom */
    margin-top: 0px; /* Más separación del contenido superior */
    text-align: left; /* Alineación por defecto a la izquierda para columnas */
}

.footer-logo {
    text-align: center;
    margin-bottom: 40px;
    padding-bottom: 30px;
    border-bottom: 1px solid rgba(0, 0, 0, 0.1); /* Línea debajo del logo */
}

.footer-logo img {
    max-height: 90px; /* Ajusta según tu logo */
    display: inline-block; /* Para centrar correctamente */
}

.footer-grid {
    display: grid;
    /* 4 columnas en desktop */
    grid-template-columns: repeat(4, 1fr);
    gap: 40px; /* Espacio entre columnas */
    padding-bottom: 40px;
}

.footer-col h4 {
    font-size: 1.2rem;
    font-weight: bold;
    color: var(--footer-title-color);
    margin-bottom: 20px;
    text-transform: uppercase; /* Opcional: Títulos en mayúscula */
    letter-spacing: 0.5px; /* Opcional: Espaciado letras */
}

.footer-col p, .footer-col li {
    font-size: 0.95rem;
    line-height: 1.7;
    margin-bottom: 10px;
}

.footer-col a {
    color: #fff;
    transition: color 0.3s ease;
}

.footer-col a:hover {
    color: var(--footer-link-hover-color);
    text-decoration: underline; /* Opcional: Subrayado en hover */
}

/* Estilos específicos por columna */
.footer-nav {
    list-style: none;
    padding: 0;
    margin: 0;
}

.footer-nav li {
    margin-bottom: 10px;
}

.contact-col strong {
    display: block; /* Para que el texto debajo quede alineado */
    margin-bottom: 2px;
    color: var(--footer-title-color); /* Destacar 'Dirección', 'Teléfono', etc. */
}

.social-icons {
    display: flex;
    gap: 15px; /* Espacio entre iconos */
    align-items: center;
}

.social-icons a {
    color: var(--footer-title-color); /* Color inicial del icono */
    display: inline-block; /* Para aplicar transformaciones */
    transition: color 0.3s ease, transform 0.3s ease;
}

.social-icons a:hover {
    color: var(--footer-link-hover-color);
    transform: translateY(-3px); /* Efecto sutil al pasar el mouse */
    text-decoration: none; /* Quitar subrayado si lo hubiera */
}

.social-icons svg,
.social-icons i, /* Si usas Font Awesome */
.social-icons img { /* Si usas imágenes */
    width: 28px; /* Tamaño del icono */
    height: 28px;
    display: block;
}


.footer-bottom {
    text-align: center;
    padding: 20px 0;
    margin-top: 30px; /* Separación del grid */
    border-top: 1px solid rgba(0, 0, 0, 0.1);
    font-size: 0.9rem;
    color: var(--secondary-color); /* Color más suave para copyright */
}

.footer-bottom a {
    color: var(--secondary-color);
    text-decoration: underline;
}
.footer-bottom a:hover {
    color: var(--primary-color);
}


/* --- Responsividad del Footer Mejorado --- */

/* Tabletas */
@media (max-width: 991.98px) {
    .footer-grid {
        /* 2 columnas en tabletas */
        grid-template-columns: repeat(2, 1fr);
        gap: 30px;
    }
}

/* Móviles */
@media (max-width: 767.98px) {
    .enhanced-footer {
         padding-top: 40px;
         text-align: center; /* Centrar texto en móvil */
    }
     .footer-logo {
        margin-bottom: 30px;
        padding-bottom: 25px;
     }
      .footer-logo img {
        max-height: 50px;
     }

    .footer-grid {
        /* 1 columna en móviles */
        grid-template-columns: 1fr;
        gap: 30px; /* Espacio vertical entre secciones */
         padding-bottom: 20px;
    }

    .footer-col {
        margin-bottom: 20px; /* Espacio extra entre columnas apiladas */
    }
     .footer-col:last-child {
        margin-bottom: 0;
     }

     .footer-col h4 {
        margin-bottom: 15px;
     }

    /* Centrar iconos sociales en móvil */
    .social-icons {
        justify-content: center;
    }

     .footer-bottom {
        margin-top: 20px;
        padding: 15px 0;
        font-size: 0.85rem;
     }
}

/* --- Estilos Sección Galería Grid --- */
.gallery-section {
    padding: 60px 0 0; /* Padding arriba, 0 abajo porque el grid no tendrá margen inferior */
    background-color: var(--white-color);
}

.gallery-section h2 {
    text-align: center;
    margin-bottom: 15px; /* Menos espacio si hay subtítulo */
    color: var(--dark-color);
}
.gallery-subtitle { /* Estilo opcional para el subtítulo */
    text-align: center;
    margin-bottom: 40px;
    font-size: 1.1rem;
    color: var(--secondary-color);
    max-width: 600px;
    margin-left: auto;
    margin-right: auto;
}

/* Contenedor externo para controlar ancho máximo si es necesario */
.gallery-grid-container {
    max-width: 100%; /* Ocupa todo el ancho por defecto */
    margin: 0 auto;
    /* background-color: #f0f0f0; */ /* Color de fondo si quieres que se note que no hay gap */
}

.gallery-grid {
    display: grid;
    /* 4 columnas en desktop */
    grid-template-columns: repeat(4, 1fr);
    gap: 0; /* Sin espacio entre imágenes */
}

.gallery-item {
    position: relative; /* Para overlay */
    display: block;
    overflow: hidden; /* Para contener el zoom de la imagen */
    aspect-ratio: 1 / 1; /* Imágenes cuadradas, ajusta si necesitas (ej: 4 / 3) */
    background-color: #e0e0e0; /* Color mientras carga la imagen */
}

.gallery-item img {
    display: block;
    width: 100%;
    height: 100%;
    object-fit: cover; /* La imagen cubre el espacio sin distorsionarse */
    transition: transform 0.5s cubic-bezier(0.165, 0.84, 0.44, 1); /* Transición más suave para el zoom */
}

/* Efecto Hover: Zoom de la imagen */
.gallery-item:hover img {
    transform: scale(1.1); /* Aumenta la imagen */
}

/* Overlay que aparece en Hover */
.gallery-item-overlay {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background-color: rgba(0, 80, 150, 0.6); /* Azul oscuro semi-transparente, ajusta color y opacidad */
    display: flex;
    justify-content: center;
    align-items: center;
    opacity: 0; /* Oculto por defecto */
    transition: opacity 0.4s ease;
    pointer-events: none; /* Importante: permite que el clic llegue al enlace <a> */
}

.gallery-item:hover .gallery-item-overlay {
    opacity: 1; /* Mostrar overlay en hover */
}

/* Estilo del icono dentro del overlay */
.gallery-item-overlay svg {
    fill: rgba(255, 255, 255, 0.9); /* Icono blanco semi-transparente */
    width: 45px;
    height: 45px;
    transform: scale(0.8); /* Icono empieza un poco más pequeño */
    transition: transform 0.4s cubic-bezier(0.175, 0.885, 0.32, 1.275); /* Transición con rebote */
}

.gallery-item:hover .gallery-item-overlay svg {
    transform: scale(1); /* Icono tamaño normal en hover */
}


/* --- Responsividad Galería Grid --- */
@media (max-width: 767.98px) {
    .gallery-grid {
        /* 2 columnas en móviles */
        grid-template-columns: repeat(2, 1fr);
    }
     .gallery-section { padding-top: 40px; }
     .gallery-subtitle { margin-bottom: 30px; font-size: 1rem; }
}

/* --- Estilos Submenu Desplegable --- */

/* Contenedor del item con dropdown */
.main-nav li.has-dropdown {
    position: relative; /* Contexto para el submenu absoluto */
}

/* Flecha indicadora (opcional) */
.dropdown-arrow {
    font-size: 0.7em;
    margin-left: 4px;
    vertical-align: middle;
    display: inline-block; /* Para que no afecte la línea del enlace */
}

/* El submenu en sí (oculto por defecto) */
.submenu {
    display: none; /* Oculto inicialmente */
    position: absolute;
    top: 100%; /* Justo debajo del item padre */
    left: 0;
    background-color: var(--white-color);
    min-width: 220px; /* Ancho mínimo del desplegable */
    list-style: none;
    padding: 10px 0; /* Padding vertical, sin padding horizontal */
    margin: 0; /* Resetear margen */
    box-shadow: 0 8px 15px rgba(0,0,0,0.15); /* Sombra más pronunciada */
    border-radius: 0 0 5px 5px; /* Bordes redondeados abajo */
    z-index: 1100; /* Asegurar que esté sobre otros elementos */
    border-top: 3px solid var(--primary-color); /* Detalle de color arriba */

    /* Para transición suave (alternativa a display:none) */
    /* opacity: 0; */
    /* visibility: hidden; */
    /* transform: translateY(10px); */
    /* transition: opacity 0.3s ease, visibility 0.3s ease, transform 0.3s ease; */
}

/* Mostrar el submenu al hacer hover sobre el item padre (SOLO DESKTOP) */
@media (min-width: 768px) { /* Aplicar solo en pantallas > móviles */
    .main-nav li.has-dropdown:hover > .submenu {
        display: block;
        /* Para transición suave (alternativa) */
        /* opacity: 1; */
        /* visibility: visible; */
        /* transform: translateY(0); */
    }

    /* Resetear estilos heredados del nav principal si es necesario */
    .main-nav li.has-dropdown:hover > a::after {
       /* Evitar que la línea inferior del enlace principal se muestre al hacer hover si no se quiere */
       /* width: 0; */
    }
}


/* Estilo de los items dentro del submenu */
.submenu li {
    margin: 0; /* Resetear margen */
}

/* Estilo de los enlaces dentro del submenu */
.submenu li a {
    display: block; /* Para que ocupen todo el ancho */
    padding: 10px 20px; /* Espaciado interno */
    color: var(--dark-color);
    font-weight: normal; /* Peso normal, no bold como los principales */
    font-size:1.1rem;
    white-space: nowrap; /* Evitar que el texto se parta en dos líneas */
    text-decoration: none; /* Sin subrayado */
    transition: background-color 0.3s ease, color 0.3s ease;
}
/* Quitar efecto ::after heredado del nav principal */
.submenu li a::after {
    display: none;
}


.submenu li a:hover {
    background-color: var(--light-color); /* Fondo suave al pasar el mouse */
    color: var(--primary-color); /* Color principal al pasar el mouse */
}

/* --- Ajustes para el Menú Móvil --- */
@media (max-width: 767.98px) {
    /* Ocultar flecha en móvil */
    .dropdown-arrow {
        display: none;
    }

    /* Resetear posicionamiento absoluto del submenu en móvil */
        .main-nav ul.submenu {
        position: static; /* Vuelve al flujo normal */
        display: block !important; /* Siempre visible como parte de la lista apilada */
        background: none;
        box-shadow: none;
        min-width: auto; /* Ancho automático */
        border: none; /* Sin borde superior ni bordes redondeados */
        margin-top: 5px; /* Pequeño espacio arriba */
        /* Reiniciar transiciones si se usaron */
        /* opacity: 1; */
        /* visibility: visible; */
        /* transform: none; */
    }

    .submenu li {
         border: none; /* Quitar bordes si los hubiera */
    }

    .submenu li a {
        padding: 10px 15px; /* Ajustar padding */
        font-size: 1rem; /* Un poco más pequeño */
        color: #0b0239; /* Color diferente para indicar subitem */
        border-bottom: 1px dashed #eee; /* Separador diferente */
    }
     .submenu li:last-child a {
         border-bottom: none; /* Quitar último separador */
     }

    .submenu li a:hover {
        background-color: var(--light-color);
        color: var(--primary-color);
    }
    .product-grid {
    width: 48%;
}

    /* El enlace principal "Máquinas" seguirá el comportamiento normal en móvil (cerrar menú si se clickea) */
    /* Para funcionalidad de abrir/cerrar el submenu en móvil se necesitaría JS */
}

/* --- Estilos Página de Contacto --- */

/* Banner Superior */
.page-banner {
    width: 100%;
    height: 300px; /* Altura Máxima solicitada */
    background-size: cover; /* Cubre el espacio */
    background-position: center center; /* Centra la imagen */
    /* No necesita margen superior si el header es sticky y tiene altura fija */
    /* margin-top: var(--header-height); */
    position: relative; /* Para contenido superpuesto si se añade */
    background-color: var(--light-color); /* Color mientras carga */
}

.contact-banner {
    /* Aplica aquí la imagen de fondo específica para contacto */
    /* Reemplaza con la ruta a tu imagen */
    background-image: linear-gradient(rgba(0,0,0,0.3), rgba(0,0,0,0.3)), url('../images/banners/contacto_banner_placeholder.jpg');
    /* El linear-gradient es opcional, añade una capa oscura para legibilidad si pones texto */
}

/* Contenido opcional del banner */
.banner-content {
    position: relative; /* Para z-index si hay overlay */
    z-index: 2;
    display: flex;
    align-items: center;
    justify-content: center;
    height: 100%;
    text-align: center;
    color: var(--white-color);
}
.banner-content h1 {
    font-size: 2.8rem;
    text-shadow: 1px 1px 3px rgba(0,0,0,0.5);
}


/* Sección Detalles de Contacto */
.contact-details-section {
    padding: 60px 0;
    background-color: var(--white-color); /* Fondo blanco para separar del form */
}

.contact-details-section h2 {
    text-align: center;
    margin-bottom: 50px; /* Más espacio */
    color: var(--dark-color);
}

.contact-info-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(280px, 1fr)); /* Responsive */
    gap: 30px;
    text-align: center;
}

.contact-info-item {
    background: var(--light-color); /* Fondo gris claro para los items */
    padding: 35px 25px;
    border-radius: 8px;
    /* box-shadow: 0 2px 8px rgba(0,0,0,0.06); */ /* Sombra opcional */
    border: 1px solid #eee; /* Borde sutil */
    transition: transform 0.3s ease, box-shadow 0.3s ease;
}
.contact-info-item:hover {
    transform: translateY(-5px);
    box-shadow: 0 6px 15px rgba(0,0,0,0.08);
}

.contact-icon {
    font-size: 2.8rem; /* Tamaño del icono (si usas fuentes de iconos) */
    color: var(--primary-color);
    margin-bottom: 20px;
    display: inline-block; /* Para que el margen funcione */
}
/* Si usas SVG directamente, puedes ajustar el tamaño aquí */
.contact-icon svg {
    width: 40px; /* Ajusta tamaño de SVG */
    height: 40px;
    fill: var(--primary-color); /* Color SVG */
}


.contact-info-item h3 {
    margin-bottom: 15px;
    font-size: 1.4rem;
    color: var(--dark-color); /* Título más oscuro */
}

.contact-info-item p {
    font-size: 1rem;
    color: var(--secondary-color);
    line-height: 1.6;
    margin-bottom: 5px; /* Menos espacio entre líneas de párrafo */
}
.contact-info-item p:last-child {
    margin-bottom: 0;
}

.contact-info-item a {
    color: var(--primary-color); /* Enlaces en color primario */
    text-decoration: none;
    font-weight: bold;
}
.contact-info-item a:hover {
    text-decoration: underline;
}

/* Sección Formulario de Contacto */
.contact-form-section {
    padding: 60px 0;
    background-color: #fdfdfd; /* Fondo casi blanco */
}

.contact-form-section h2 {
    text-align: center;
    margin-bottom: 40px;
}

/* Contenedor del formulario para centrar o limitar ancho */
.contact-form {
    max-width: 800px; /* Ancho máximo del formulario */
    margin: 0 auto; /* Centrar el formulario */
    background-color: var(--white-color); /* Fondo blanco para el form */
    padding: 40px; /* Espaciado interno */
    border-radius: 8px;
    box-shadow: 0 5px 20px rgba(0,0,0,0.07);
}

/* Estructura de filas para campos lado a lado */
.form-row {
    display: flex;
    flex-wrap: wrap; /* Para que pasen abajo en móvil */
    gap: 20px; /* Espacio entre campos en la misma fila */
    margin-bottom: 20px; /* Espacio debajo de la fila */
}

.form-group {
    margin-bottom: 20px; /* Espacio estándar si no está en fila */
    flex: 1 1 100%; /* Por defecto ocupa toda la fila */
}
.form-group-half {
     flex: 1 1 calc(50% - 10px); /* Ocupa la mitad menos la mitad del gap */
     min-width: 200px; /* Ancho mínimo antes de apilarse */
}
/* Ajustar margen inferior cuando los campos están en fila */
.form-row .form-group {
    margin-bottom: 0;
}


.contact-form label {
    display: block;
    margin-bottom: 8px;
    font-weight: bold;
    font-size: 0.95rem;
    color: var(--dark-color);
}

.contact-form .required {
    color: var(--primary-color); /* Color para asterisco */
    font-weight: bold;
    margin-left: 2px;
}

.contact-form input[type="text"],
.contact-form input[type="email"],
.contact-form input[type="tel"],
.contact-form input[type="search"], /* Incluir search si lo usas en otro form */
.contact-form textarea {
    width: 100%;
    padding: 12px 15px;
    border: 1px solid #ccc;
    border-radius: 5px;
    font-size: 1rem;
    font-family: inherit;
    line-height: 1.5;
    background-color: #fDfdfd; /* Fondo ligero para campos */
    transition: border-color 0.3s ease, box-shadow 0.3s ease;
}
.contact-form input::placeholder,
.contact-form textarea::placeholder {
    color: #999;
    opacity: 1;
}


.contact-form input:focus,
.contact-form textarea:focus {
    border-color: var(--primary-color);
    outline: none;
    box-shadow: 0 0 0 3px rgba(0, 123, 255, 0.15);
    background-color: var(--white-color);
}

.contact-form textarea {
    resize: vertical; /* Permitir redimensionar solo verticalmente */
    min-height: 120px; /* Altura mínima */
}

/* Grupo del botón de envío */
.form-submit-group {
    text-align: center; /* Centrar botón */
    margin-top: 30px; /* Más espacio antes del botón */
}

.required-notice {
    text-align: left;
    margin-bottom: 15px;
    font-size: 0.85rem;
    color: var(--secondary-color);
}

.contact-form button[type="submit"] {
    padding: 12px 35px; /* Botón un poco más grande */
    font-size: 1.1rem;
}

/* Mensajes de estado del formulario (para JS/PHP) */
#form-status {
    margin-top: 20px;
    text-align: center;
    font-weight: bold;
}
#form-status.success {
    color: #28a745; /* Verde */
}
#form-status.error {
    color: #dc3545; /* Rojo */
}

/* Responsividad específica del formulario de contacto */
@media (max-width: 575.98px) {
    /* Hacer que los campos 'half' ocupen todo el ancho en móviles pequeños */
    .form-group-half {
        flex: 1 1 100%;
    }
     .form-row {
        gap: 0; /* Sin gap si se apilan */
        margin-bottom: 0; /* Controlado por el form-group ahora */
    }
     .form-row .form-group {
        margin-bottom: 20px; /* Espacio estándar entre campos apilados */
     }
      .contact-form {
        padding: 30px 25px; /* Menos padding en móvil */
    }
}

/* --- Estilos Sección Mapa --- */
.map-section {
    width: 100%;
    /* La altura la controla directamente el atributo height del iframe,
       pero podemos definir una altura mínima o máxima aquí si es necesario */
    height: 350px; /* Asegura que el contenedor tenga la altura deseada */
    /* Puedes ajustar esta altura para que coincida con la del iframe */
    overflow: hidden; /* Evita barras de scroll inesperadas */
    /* background-color: #e0e0e0; */ /* Color mientras carga el mapa */
    padding:0 !important;
}

.map-section iframe {
    width: 100%;
    height: 100%; /* Haz que el iframe ocupe todo el contenedor */
    border: none; /* Sin borde en el iframe */
    display: block; /* Evita espacio extra debajo */
}

/* --- Estilos Sección Marcas --- */
.brands-section {
    padding: 50px 0; /* Un poco menos de padding quizás */
     background: linear-gradient(to right, #01265A, #011B3C);
    min-height: 280px;
}

.brands-section h2 {
    text-align: center;
    margin-bottom: 45px; /* Espacio debajo del título */
    color: var(--white-color); /* Color más suave para el título */
    font-weight: normal; /* Quizás no tan pesado */
    font-size: 1.6rem; /* Tamaño ajustado */
}

.brands-grid {
    display: grid;
    /* 4 columnas por defecto (escritorio) */
    grid-template-columns: repeat(4, 1fr);
    gap: 40px; /* Espacio entre logos */
    align-items: center; /* Centra verticalmente si tienen alturas distintas */
}

.brand-item {
    text-align: center; /* Centra la imagen dentro de su celda */
}

.brand-item img {
    max-width: 100%; /* Limita el ancho máximo al de su contenedor */
    max-height: 65px; /* Limita la altura MÁXIMA del logo - AJUSTA ESTO según necesites */
    height: auto; /* Mantiene proporción */
    display: inline-block; /* Para centrado y comportamiento correcto */
    opacity: 1; /* Un poco transparentes por defecto */
    /* Si tus PNG NO son blanco y negro, puedes forzarlo con filtro: */
    /* filter: grayscale(100%); */
    transition: opacity 0.3s ease, transform 0.3s ease; /* Suavizar hover */
}

.brand-item img:hover {
    opacity: 1; /* Opacidad completa al pasar el mouse */
    transform: scale(1.08); /* Ligero zoom */
     /* Si usaste filter grayscale, puedes quitarlo en hover */
    /* filter: grayscale(0%); */
}

/* --- Responsividad Sección Marcas --- */

/* Tablets (quizás ya quieres 2 columnas aquí) */
@media (max-width: 991.98px) {
    .brands-grid {
        grid-template-columns: repeat(4, 1fr); /* Mantenemos 4 o cambiamos a 2? Probemos 4 */
        gap: 30px; /* Menos espacio */
    }
     .brand-item img {
        max-height: 55px; /* Un poco más pequeños */
    }
}

/* Móviles (2 columnas) */
@media (max-width: 767.98px) {
    .brands-section {
        padding: 40px 0;
    }
     .brands-section h2 {
        font-size: 1.4rem;
        margin-bottom: 35px;
     }
    .brands-grid {
        grid-template-columns: repeat(2, 1fr); /* 2 columnas */
        gap: 35px; /* Espacio vertical y horizontal */
    }
     .brand-item img {
        max-height: 45px; /* Aún más pequeños */
         opacity: 0.75; /* Un poco menos transparentes en móvil */
    }
}

/* --- Estilos Adicionales Página Nosotros --- */

/* Banner Específico Nosotros */
.about-us-banner {
    /* Reemplaza con la ruta a tu imagen de banner para "Nosotros" */
    background-image: linear-gradient(rgba(0,0,0,0.4), rgba(0,0,0,0.4)), url('../images/nosbanner.png');
    /* Asegúrate que los estilos base de .page-banner estén definidos (altura, background-size, etc.)
       Si no los pusiste antes (para contacto.php), añádelos: */
}
.page-banner {
    width: 100%;
    height: 300px; /* O la altura que prefieras */
    background-size: cover;
    background-position: center center;
    position: relative;
    background-color: var(--light-color); /* Color mientras carga */
    display: flex; /* Para centrar contenido del banner */
    align-items: center;
    justify-content: center;
    text-align: center;
    color: var(--white-color);
}
.banner-content h1 {
    font-size: 3rem;
    font-weight: bold;
    text-shadow: 1px 1px 4px rgba(0,0,0,0.6);
    margin: 0;
}

/* Sección Texto Nosotros */
.about-text-section {
    padding: 60px 0;
    background-color: var(--white-color); /* Fondo blanco */
}

.about-text-section .container {
    max-width: 900px; /* Limitar ancho para mejor lectura */
    margin-left: auto;
    margin-right: auto;
}

.about-text-section h2 {
    text-align: center;
    margin-bottom: 40px; /* Más espacio */
    color: var(--dark-color);
    font-size: 2.2rem; /* Un poco más grande */
}

.about-text-section p {
    font-size: 1.1rem; /* Texto un poco más grande */
    line-height: 1.8; /* Más interlineado */
    color: var(--secondary-color); /* Color de texto secundario */
    margin-bottom: 1.8em; /* Espacio entre párrafos */
    text-align: left; /* O 'justify' si prefieres justificado */
}
.about-text-section p:last-child {
    margin-bottom: 0;
}


/* Sección Misión, Visión, Valores */
.mission-vision-section {
    padding: 60px 0;
    background-color: var(--light-color); /* Fondo gris claro */
    border-top: 1px solid #e0e0e0; /* Separador sutil */
    border-bottom: 1px solid #e0e0e0;
}

.mvv-grid {
    display: grid;
    grid-template-columns: repeat(3, 1fr); /* 3 columnas */
    gap: 40px;
    text-align: center;
}

.mvv-item {
    background-color: var(--white-color); /* Fondo blanco para las tarjetas */
    padding: 35px 30px;
    border-radius: 8px;
    box-shadow: 0 5px 15px rgba(0,0,0,0.07);
    /* border-top: 4px solid var(--primary-color); */ /* Borde superior opcional */
    transition: transform 0.3s ease, box-shadow 0.3s ease;
}
.mvv-item:hover {
     transform: translateY(-5px);
     box-shadow: 0 8px 20px rgba(0,0,0,0.1);
}

.mvv-icon {
    /* Si usas fuentes de icono */
    /* font-size: 3rem; */
    /* color: var(--primary-color); */
    /* margin-bottom: 20px; */
    /* display: block; */
}
/* Estilos para los SVG de ejemplo */
.mvv-icon svg {
    width: 55px;
    height: 55px;
    fill: var(--primary-color); /* O --accent-color */
    margin: 0 auto 25px auto; /* Centrar y dar espacio abajo */
    display: block;
}

.mvv-item h3 {
    margin-bottom: 15px;
    font-size: 1.6rem; /* Títulos más grandes */
    color: var(--dark-color);
}

.mvv-item p {
    font-size: 1rem; /* Texto ligeramente más grande */
    color: var(--secondary-color);
    line-height: 1.7;
}

/* Responsividad Misión, Visión, Valores */
@media (max-width: 991.98px) {
     .mvv-grid {
        gap: 30px;
    }
     .mvv-item h3 { font-size: 1.4rem; }
     .mvv-item { padding: 30px 25px; }
}

@media (max-width: 767.98px) {
     .mvv-grid {
        grid-template-columns: 1fr; /* Apilar columnas */
        gap: 30px;
    }
     .mission-vision-section { padding: 40px 0; }
     .mvv-item h3 { margin-bottom: 10px;}
     .mvv-icon svg { width: 45px; height: 45px; margin-bottom: 20px;}
}

/* Asegurarse que la galería tenga padding si la sección anterior no tiene */
#galeria.gallery-section {
    padding-top: 60px; /* O ajusta según necesidad */
}

/* --- Estilos Sección Introducción Nosotros (Texto + Imagen) --- */

.about-intro-section { /* O usa .about-text-section si mantuviste esa clase */
    padding: 60px 0;
    background-color: var(--white-color);
}

.about-intro-grid {
    display: grid;
    /* Dos columnas: 1fr para texto, 1fr para imagen (iguales) */
    /* O puedes dar más espacio al texto: grid-template-columns: 1.2fr 0.8fr; */
    grid-template-columns: repeat(auto-fit, minmax(300px, 1fr)); /* Más responsive */
    /* grid-template-columns: 1fr 1fr; */ /* Más simple si siempre quieres 2 columnas > ~768px */
    gap: 50px; /* Espacio entre texto e imagen */
    align-items: center; /* Alinea verticalmente el contenido de las columnas */
}

.about-intro-text h2 {
    text-align: left; /* Título a la izquierda */
    margin-bottom: 25px;
    font-size: 2.2rem;
    color: var(--dark-color);
}

.about-intro-text p {
    font-size: 1.05rem; /* Tamaño de texto normal */
    line-height: 1.7;
    color: var(--secondary-color);
    margin-bottom: 1.5em;
    text-align: left; /* Texto alineado a la izquierda */
}
.about-intro-text p:last-child {
    margin-bottom: 0;
}


.about-intro-image img {
    width: 100%; /* Imagen ocupa el ancho de su columna */
    height: auto; /* Mantiene proporción */
    display: block; /* Evita espacio extra debajo */
    border-radius: 8px; /* Bordes redondeados opcionales */
    box-shadow: 0 8px 20px rgba(0, 0, 0, 0.12); /* Sombra opcional */
}

/* Responsividad para la sección Intro Nosotros */
@media (max-width: 991.98px) { /* Ajuste para tablets si es necesario */
    .about-intro-grid {
        gap: 30px;
    }
     .about-intro-text h2 { font-size: 2rem; }
     .about-intro-text p { font-size: 1rem; }
}


@media (max-width: 767.98px) { /* Móviles */
    .about-intro-grid {
        grid-template-columns: 1fr; /* Cambia a una sola columna */
        gap: 35px; /* Espacio vertical entre texto e imagen */
    }

    .about-intro-text {
        order: 1; /* Asegura que el texto vaya primero (aunque ya está en HTML) */
        text-align: center; /* Centrar texto en móvil si se prefiere */
    }
     .about-intro-text h2 {
         text-align: center; /* Centrar título en móvil */
     }
     .about-intro-text p {
         text-align: justify; /* Justificar texto en móvil si se prefiere */
         /* O mantener text-align: left; */
     }

    .about-intro-image {
        order: 2; /* Asegura que la imagen vaya después */
        max-width: 450px; /* Limitar ancho de imagen en móvil opcionalmente */
        margin: 0 auto; /* Centrar la imagen si tiene max-width */
    }
    .about-intro-section {
         padding: 40px 0; /* Menos padding */
    }

}

/* --- Estilos Adicionales Página Categoría --- */

/* Banner (reutiliza .page-banner, .banner-content) */
/* .category-banner { ... } */ /* No necesita estilos específicos si la imagen se pone inline */

/* Sección de listado de productos */
.category-product-listing {
    padding: 60px 0;
    background-color: var(--white-color); /* O --light-color */
}

/* Grid de productos (reutiliza .product-grid) */
.category-product-grid {
    /* Puedes añadir estilos específicos aquí si necesitas */
    /* por ejemplo, cambiar el número de columnas */
    /* grid-template-columns: repeat(auto-fit, minmax(250px, 1fr)); */
}

/* Tarjeta de producto (reutiliza .product-card si no hiciste cambios drásticos)*/
/* Estilos para hacerla clickeable (alternativa a ponerlos inline en <style>) */
.category-product-grid .product-card {
    position: relative;
    padding: 0; /* Quitar padding si el enlace ocupa todo */
    background-color: var(--white-color); /* Asegurar fondo */
    border-radius: 8px; /* Mantener bordes */
    box-shadow: 0 4px 10px rgba(0,0,0,0.08); /* Mantener sombra */
    overflow: hidden; /* Necesario para bordes y hover del link */
    display: flex; /* Hacer que la tarjeta sea flex container */
    flex-direction: column; /* Apilar imagen y contenido */
}
.category-product-grid .product-card img {
    border-radius: 0; /* Quitar borde si el link lo tiene */
    margin-bottom: 0;
    max-height: 220px; /* Ajustar altura máxima imagen */
    object-fit: cover;
}
.category-product-grid .product-link {
    display: flex;
    flex-direction: column;
    text-decoration: none;
    color: inherit;
    height: 100%; /* Ocupa toda la tarjeta */
    transition: transform 0.3s ease, box-shadow 0.3s ease;
}
.category-product-grid .product-card:hover .product-link { /* Mover hover a la tarjeta */
     transform: translateY(-5px);
     box-shadow: 0 6px 15px rgba(0,0,0,0.12);
}
.product-link-content {
    padding: 20px;
    flex-grow: 1;
    display: flex;
    flex-direction: column;
}
.product-link-content h3 {
    margin-bottom: 10px;
    color: var(--primary-color);
    font-size: 1.3rem;
}
.product-link-content p {
    font-size: 0.9rem;
    color: var(--secondary-color);
    line-height: 1.5;
    margin-bottom: 0;
    flex-grow: 1; /* Empuja contenido hacia abajo */
}

/* Mensaje de aviso (No encontrado / Sin productos) */
.notice {
    text-align: center;
    padding: 50px 20px;
    margin: 20px 0;
    font-size: 1.1rem;
    color: var(--secondary-color);
    background-color: var(--light-color);
    border: 1px dashed #ccc;
    border-radius: 5px;
}

/* Responsividad específica para la lista de productos si es necesaria */
/* Por ejemplo, ajustar el número de columnas del grid en móvil */
@media (max-width: 767.98px) {
    .category-product-grid {
       /* grid-template-columns: repeat(auto-fit, minmax(200px, 1fr)); */ /* O simplemente 1 o 2 columnas */
       /* grid-template-columns: 1fr; */
    }
     .category-product-listing { padding: 40px 0; }
}

/* --- Estilos Página de Producto --- */

/* Banner (reutiliza .page-banner, .banner-content de otras páginas) */
.category-banner h1 { /* Puede que necesites ajustar el tamaño para nombres de categoría */
    font-size: 2.8rem;
}
@media (max-width: 767.98px) {
   .category-banner h1 { font-size: 2.2rem; }
}

/* Sección Detalles del Producto */
.product-detail-section {
   padding: 60px 0;
   background-color: var(--white-color);
}

.product-detail-grid {
   display: grid;
   grid-template-columns: 1fr 1fr; /* Dos columnas iguales */
   /* O dar más espacio a la info: grid-template-columns: 0.8fr 1.2fr; */
   gap: 50px;
   align-items: flex-start; /* Alinear arriba */
}

.product-detail-image img {
   width: 100%;
   height: auto;
   border-radius: 8px;
   box-shadow: 0 6px 15px rgba(0, 0, 0, 0.1);
   border: 1px solid #eee; /* Borde sutil opcional */
}

.product-detail-info h1 {
   font-size: 2.5rem; /* Título grande */
   margin-bottom: 20px;
   color: var(--dark-color);
   line-height: 1.3;
}

.product-detail-info .description {
   font-size: 1.1rem;
   line-height: 1.8;
   color: var(--secondary-color);
   margin-bottom: 30px;
}
/* Estilo para párrafos dentro de la descripción si vienen de un editor */
.product-detail-info .description p {
   margin-bottom: 1em;
}

/* Contenedor para botones de acción */
.product-actions {
   margin-top: 30px;
   padding-top: 20px;
   border-top: 1px solid #eee; /* Línea separadora */
   display: flex;
   flex-wrap: wrap; /* Para que pasen abajo en móvil */
   gap: 15px; /* Espacio entre botones */
}

/* Estilo específico para botón WhatsApp */
.btn-whatsapp {
   background-color: #25D366; /* Color WhatsApp */
   border-color: #25D366;
   color: white;
}
.btn-whatsapp:hover {
   background-color: #1DAE54;
   border-color: #1DAE54;
   color: white;
}

/* Estilo botón Compartir (si lo usas) */
.btn-share {
   background-color: var(--secondary-color);
   border-color: var(--secondary-color);
}
.btn-share:hover {
   background-color: var(--color-hover);
   border-color: darken(var(--secondary-color), 10%);
}


/* Sección Productos Relacionados */
.related-products-section {
   padding: 60px 0;
   background-color: var(--light-color); /* Fondo gris claro */
   border-top: 1px solid #e0e0e0;
}

.related-products-section h2 {
   text-align: center;
   margin-bottom: 40px;
   color: var(--dark-color);
}

/* Grid para relacionados (reutiliza .product-grid) */
.related-product-grid {
   /* Por defecto usa 3 columnas de .product-grid */
   /* Si quieres 4 columnas aquí: */
    grid-template-columns: repeat(4, 1fr);
}
/* Ajustar tamaño de tarjeta si son 4 columnas */
@media (min-width: 992px) { /* Solo en desktop grande */
   .related-product-grid .product-card .product-link-content h3 {
       font-size: 1.1rem; /* Título más pequeño si hay 4 */
   }
}
@media (max-width: 991.98px) { /* En tablet, volver a 3 o 2 */
    .related-product-grid {
        grid-template-columns: repeat(auto-fit, minmax(280px, 1fr)); /* Volver al auto-fit */
    }
}


/* Responsividad Detalles del Producto */
@media (max-width: 767.98px) {
   .product-detail-grid {
       grid-template-columns: 1fr; /* Apilar columnas */
       gap: 30px;
   }
    .product-detail-info {
       order: 2; /* Info debajo de la imagen */
    }
    .product-detail-image {
       order: 1; /* Imagen arriba */
    }
     .product-detail-info h1 {
       font-size: 2rem; /* Título más pequeño */
       text-align: center; /* Centrar título */
    }
     .product-detail-info .description {
       font-size: 1rem;
       text-align: justify; /* O left */
    }
    .product-actions {
       justify-content: center; /* Centrar botones */
    }
    .product-detail-section { padding: 40px 0; }

    /* Responsividad Productos Relacionados */
    .related-products-section { padding: 40px 0; }
    .related-products-section h2 { font-size: 1.6rem; margin-bottom: 30px;}
    /* El grid ya debería ser responsive por el auto-fit de .product-grid */
}

/* --- Estilos Adicionales Página Búsqueda --- */

.search-results-section { /* Padding ya puesto inline, puedes moverlo aquí */
    /* padding: 60px 0; */
    background-color: var(--white-color);
}

.search-results-title {
    text-align: center;
    margin-bottom: 40px;
    font-size: 1.8rem; /* Ajusta según necesidad */
    color: var(--dark-color);
    font-weight: normal; /* O bold si prefieres */
}
.search-results-title strong {
    color: var(--primary-color); /* Resaltar término buscado */
    font-weight: bold;
}

/* Mensaje de aviso (No encontrado / Sin término) */
.search-notice, .notice { /* Reutilizar o definir .search-notice */
   text-align: center;
   padding: 40px 15px;
   font-size: 1.1rem;
   color: var(--secondary-color);
   background-color: var(--light-color);
   border-radius: 5px;
   margin: 20px 0;
   border: 1px dashed #ccc;
}
.search-notice strong { /* Para resaltar término en el aviso */
    color: var(--dark-color);
}

/* Grid de resultados (reutiliza .product-grid) */
.search-results-grid {
    /* Estilos específicos si son necesarios */
}

/* Tarjetas de resultados (reutilizan .product-card y .product-link) */
/* Asegúrate que los estilos en el <style> de busqueda.php o aquí sean correctos */

/* Responsividad */
@media (max-width: 767.98px) {
   .search-results-title { font-size: 1.5rem; margin-bottom: 30px; }
   .search-results-section { padding: 40px 0; }
   /* El grid ya debe ser responsive si .product-grid lo es */
}
/* --- Estilos para Hero con Video de Fondo y Slider de Texto --- */

.hero-video-text-slider-section {
    position: relative; /* Contexto para el video y el slider */
    height: calc(100vh - var(--header-height)); /* Misma altura que antes */
    min-height: 500px;
    overflow: hidden; /* Para asegurar que el video no se desborde */
    display: flex; /* Para centrar el slider de texto si es necesario */
    align-items: center;
    justify-content: center;
}

.hero-background-video-container {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    z-index: 1; /* Detrás del slider de texto */
}

.hero-background-video {
    width: 100%;
    height: 100%;
    object-fit: cover; /* Cubre todo el espacio, puede recortar partes del video */
    /* Podrías necesitar un posicionamiento más específico si el video no se centra bien: */
    /* position: absolute; */
    /* top: 50%; */
    /* left: 50%; */
    /* transform: translate(-50%, -50%); */
    /* min-width: 100%; */ /* Asegurar que cubra incluso si la proporción no es perfecta */
    /* min-height: 100%; */
}

/* El overlay ahora está dentro del contenedor del video */
.hero-background-video-container .hero-overlay {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background-color: rgba(0, 0, 0, 0.5); /* Misma opacidad de antes */
    z-index: 2; /* Encima del video, debajo del texto */
}

/* Slider de Texto */
.hero-text-slider { /* Nueva clase para el Swiper de solo texto */
    width: 100%;
    height: auto; /* La altura la da el contenido del texto */
    position: relative; /* Para que esté encima del video y overlay */
    z-index: 3;
    /* Quitar cualquier estilo de fondo que pudiera tener .hero-slider */
    background: none !important;
}

/* Slides de Texto (dentro de .hero-text-slider) */
.hero-text-slider .swiper-slide {
    background: transparent !important; /* Sin fondo de imagen */
    display: flex;
    align-items: center;
    justify-content: center;
    text-align: center;
    /* Asegurar que los slides de texto no tengan una altura fija innecesaria */
    /* height: auto; */ /* O la altura que tenía la sección hero, para alinear bien el texto */
    height: calc(100vh - var(--header-height)); /* Para que cada slide de texto ocupe toda la altura de la sección */
    min-height: 500px;
}

.hero-text-slider .hero-content {
    /* Los estilos de .hero-content (color, tamaño de fuente, etc.) deberían seguir funcionando */
    position: relative; /* Para que el z-index del texto lo ponga encima del overlay */
    z-index: 4; /* Asegurar que el texto esté encima de todo */
    color: var(--white-color);
}

.hero-text-slider .hero-content h1 {
    font-size: 3rem; /* O el tamaño que tenías */
    margin-bottom: 1rem;
}
.hero-text-slider .hero-content p {
    font-size: 1.3rem; /* O el tamaño que tenías */
    margin-bottom: 2rem;
    max-width: 700px;
    margin-left: auto;
    margin-right: auto;
}

/* Ajustar controles de Swiper si es necesario (deberían funcionar con los estilos existentes) */
.hero-text-slider .swiper-pagination,
.hero-text-slider .swiper-button-prev,
.hero-text-slider .swiper-button-next {
    z-index: 5; /* Encima del texto si fuera necesario, pero usualmente están fuera */
}
/* Mantener estilos de flechas y paginación que tenías para .hero-slider */
.hero-text-slider .swiper-button-prev,
.hero-text-slider .swiper-button-next {
    color: var(--white-color);
    --swiper-navigation-size: 30px;
    background-color: rgba(0, 0, 0, 0.3);
    border-radius: 50%;
    width: 50px;
    height: 50px;
}
.hero-text-slider .swiper-button-prev:hover,
.hero-text-slider .swiper-button-next:hover {
    background-color: rgba(0, 0, 0, 0.6);
}
.hero-text-slider .swiper-pagination-bullet {
    background-color: rgba(255, 255, 255, 0.7);
}
.hero-text-slider .swiper-pagination-bullet-active {
    background-color: var(--white-color);
}

/* Asegúrate que estos estilos estén en tu css/estilos.css */

/* Estilos para el contenedor del slide de Swiper */
.swiper-category-slider .swiper-slide {
    height: auto; /* Permite que el slide se ajuste a su contenido inicialmente */
    display: flex; /* Hace que el slide sea un contenedor flex */
    align-items: stretch; /* CRUCIAL: Estira los hijos directos (category-card) para que tengan la misma altura */
    min-height: 100%; /* Asegura que ocupe al menos la altura del contenedor si es necesario */
}

/* Estilos para la tarjeta de categoría */
.category-card {
    background-color: #fff;
    border-radius: 8px;
    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.08);
    text-align: center;
    padding: 20px;
    display: flex; /* Ya estaba, es correcto */
    flex-direction: column; /* Ya estaba, es correcto */
    width: 100%; /* Asegura que la tarjeta ocupe el ancho del slide */
    height: 100%; /* CRUCIAL: Permite que la tarjeta se estire con el slide */
    box-sizing: border-box;
    transition: transform 0.3s ease, box-shadow 0.3s ease;
    /* justify-content: space-between; */ /* Puedes probar comentando o manteniendo esta línea */
}

.category-card:hover {
    transform: translateY(-5px);
    box-shadow: 0 6px 16px rgba(0, 0, 0, 0.12);
}

.category-card img {
    width: 100%;
    max-height: 160px; /* Ajusta esta altura según tus imágenes */
    object-fit: contain; /* O 'cover' si prefieres que llene el espacio y se recorte */
    border-radius: 6px;
    margin-bottom: 15px;
    flex-shrink: 0; /* Evita que la imagen se encoja si hay mucho texto */
}

.category-card h3 {
    font-size: 1.4em;
    color: var(--primary-color); /* Color primario de tu marca */
    margin-top: 0; /* Evita márgenes extra */
    margin-bottom: 10px;
    font-weight: 700;
    flex-shrink: 0; /* Evita que el título se encoja */
    min-height: 2.8em; /* Opcional: aprox. 2 líneas de título, para consistencia si algunos títulos son muy cortos */
}

.category-card p {
    font-size: 1em;
    color: #555;
    line-height: 1.5;
    margin-bottom: 20px;
    flex-grow: 1; /* IMPORTANTE: Hace que el párrafo ocupe el espacio vertical disponible, empujando el botón hacia abajo */
    /* Si las descripciones son muy largas y quieres limitarlas a X líneas, puedes usar: */
    /*
    display: -webkit-box;
    -webkit-line-clamp: 3;  // Número de líneas a mostrar
    -webkit-box-orient: vertical;
    overflow: hidden;
    text-overflow: ellipsis;
    min-height: 4.5em; // Ajusta (line-height * número de líneas) para reservar espacio
    */
}

.category-card .btn {
    display: inline-block;
    padding: 10px 18px;
    background-color: var(--primary-color);
    color: #fff;
    text-decoration: none;
    border-radius: 5px;
    transition: background-color 0.3s ease;
    font-size: 0.9em;
    margin-top: auto; /* IMPORTANTE: Con flex-grow en el <p>, esto empuja el botón al final de la tarjeta */
    flex-shrink: 0; /* Evita que el botón se encoja */
}

.category-card .btn:hover {
    background-color:  #555; /* Color primario de tu marca */
}

/* Otros estilos para el slider (asegúrate que ya los tienes en estilos.css) */
.category-slider-section {
    padding: 40px 0;
    background-color: #f9f9f9;
}
.category-slider-section h2 {
    text-align: center;
    margin-bottom: 30px;
    font-size: 2.2em;
    color: #333;
}
.category-slider-container {
    max-width: 1200px;
    margin-left: auto;
    margin-right: auto;
    padding-left: 15px;
    padding-right: 15px;
    position: relative;
}
.swiper-category-slider {
    padding-bottom: 10px; 
}
.swiper-category-slider .swiper-button-next,
.swiper-category-slider .swiper-button-prev {
    color: var(--primary-color);
    background-color: rgba(255, 255, 255, 0.8);
    border-radius: 50%;
    width: 40px;
    height: 40px;
    transition: background-color 0.3s ease, color 0.3s ease;
    box-shadow: 0 1px 4px rgba(0,0,0,0.2);
}
.swiper-category-slider .swiper-button-prev { left: -10px; }
.swiper-category-slider .swiper-button-next { right: -10px; }
.swiper-category-slider .swiper-button-next:hover,
.swiper-category-slider .swiper-button-prev:hover {
    background-color: var(--primary-color);
    color: #fff;
}
.swiper-category-slider .swiper-button-next::after,
.swiper-category-slider .swiper-button-prev::after {
    font-size: 18px;
    font-weight: bold;
}
@media (max-width: 575px) {
    .swiper-category-slider .swiper-button-next,
    .swiper-category-slider .swiper-button-prev {
        display: none;
    }
    .category-slider-container {
        padding-left: 5px;
        padding-right: 5px;
    }
}
/* --- Estilos Sección Marcas (Página Nosotros - Flechas Arriba) --- */
.brands-section.nosotros-page-brands {
    /* Hereda padding de .brands-section o define uno específico si es necesario */
    /* background-color: #f8f9fa;  O el color de fondo que prefieras para esta sección */
}

.brands-section.nosotros-page-brands h2 {
    /* Estilos para el título (pueden heredar de .brands-section h2) */
    /* text-align: center; */
    /* margin-bottom: 25px; Menos margen si las flechas están cerca */
}

/* Contenedor para los botones de navegación externos */
.brands-slider-navigation-above {
    display: flex;
    justify-content: center; /* Centra los botones */
    align-items: center;
    gap: 20px; /* Espacio entre los botones prev/next */
    margin-top: 15px; /* Espacio entre los botones y el carrusel de logos */
}

/* Estilo de los botones de navegación (puedes reutilizar/adaptar de otros sliders) */
.brands-slider-navigation-above .swiper-button-prev,
.brands-slider-navigation-above .swiper-button-next {
    position: static; /* Importante: no son absolutos respecto al slider */
    transform: none; /* Resetear transformaciones */
    margin-top: 0; /* Resetear margen superior */
    width: 35px;  /* Tamaño del botón */
    height: 35px;
    background-color: rgba(220, 220, 220, 0.7); /* Fondo para visibilidad */
    border-radius: 50%;
    color: var(--dark-color, #343a40); /* Color de la flecha */
    transition: background-color 0.3s ease, color 0.3s ease;
    display: flex; /* Para centrar el ícono de la flecha dentro del botón */
    justify-content: center;
    align-items: center;
}

.brands-slider-navigation-above .swiper-button-prev:hover,
.brands-slider-navigation-above .swiper-button-next:hover {
    background-color: var(--primary-color, #007bff);
    color: var(--white-color, #fff);
}

.brands-slider-navigation-above .swiper-button-prev::after,
.brands-slider-navigation-above .swiper-button-next::after {
    font-size: 16px; /* Tamaño del ícono de la flecha */
    font-weight: bold;
}

/* Contenedor del Swiper para los logos */
.brand-slider-nosotros {
    /* max-width: 100%; Si quieres que ocupe el .container */
    /* padding-bottom: 30px; Espacio si usas paginación debajo */
}

.brand-slider-nosotros .swiper-slide {
    display: flex;
    justify-content: center;
    align-items: center;
    height: auto;
    min-height: 80px; /* Ajusta según la altura de tus logos */
    box-sizing: border-box;
}

/* Estilos para .brand-item y .brand-item img pueden ser los mismos que en el index,
   asegúrate de que estén definidos globalmente o cópialos/ajústalos aquí si es necesario.
   Ejemplo (si no están globales): */
.brand-slider-nosotros .brand-item {
    text-align: center;
    width: 100%;
    padding: 5px;
}

.brand-slider-nosotros .brand-item img {
    max-width: 100%;
    max-height: 55px; /* Ajusta la altura máxima de los logos */
    height: auto;
    display: inline-block;
    opacity: 1;
    transition: opacity 0.3s ease, transform 0.3s ease;
}

.brand-slider-nosotros .brand-item img:hover {
    opacity: 1;
    transform: scale(1.08);
}

/* Estilos para la paginación (si decides usarla) */
/*
.brand-slider-nosotros .swiper-pagination.brand-nosotros-pagination .swiper-pagination-bullet {
    background-color: #ccc;
}
.brand-slider-nosotros .swiper-pagination.brand-nosotros-pagination .swiper-pagination-bullet-active {
    background-color: var(--primary-color, #007bff);
}
*/