/* Importar una fuente moderna y legible */
@import url('https://fonts.googleapis.com/css2?family=Nunito:wght@400;600;700&display=swap');
@import url('https://fonts.googleapis.com/css2?family=Poppins:wght@400;500;600;700&display=swap');

/* Definición de Colores con Variables CSS (Modo Claro por defecto)
  El color primario es un turquesa profesional, como solicitaste.
*/
:root {
    --color-primario: #60B0B4; /* Un turquesa profesional y moderno */
    --color-primario-hover: #00796b;
    --color-fondo: #f8f9fa; /* Un blanco ligeramente grisáceo, más suave a la vista */
    --color-superficie: #ffffff; /* Color para las tarjetas y el header */
    --color-texto-principal: #212529;
    --color-texto-secundario: #6c757d;
    --sombra-caja: 0 4px 12px rgba(0, 0, 0, 0.08);
}

/* Redefinición de variables para el Modo Oscuro */
body.dark-mode {
    --color-primario: #60B0B4; /* Un turquesa más brillante para mejor contraste en oscuro */
    --color-primario-hover: #1baa80;
    --color-fondo: #121212; /* Negro profundo, estándar en Material Design para dark mode */
    --color-superficie: #1e1e1e; /* Color para las tarjetas y el header en oscuro */
    --color-texto-principal: #e0e0e0;
    --color-texto-secundario: #a0a0a0;
    --sombra-caja: 0 4px 15px rgba(0, 0, 0, 0.4);
}

/* Estilos Generales */
body {
    font-family: 'Nunito', sans-serif;
    line-height: 1.6;
    margin: 0;
    background-color: var(--color-fondo);
    color: var(--color-texto-principal);
    transition: background-color 0.3s, color 0.3s;
}

.contenedor {
    width: 90%;
    max-width: 1200px;
    margin: auto;
}

.contenido-principal {
    padding: 2rem 0;
}

h1, h2, h3 {
    color: var(--color-texto-principal);
}

p {
    color: var(--color-texto-secundario);
}

/* Header y Navegación */
.header {
    background: var(--color-superficie);
    box-shadow: var(--sombra-caja);
    padding: 1rem 0;
    position: sticky;
    top: 0;
    z-index: 100;
    transition: background-color 0.3s;
}

.nav {
    display: flex;
    justify-content: space-between;
    align-items: center;
}

.logo {
    font-size: 1.5rem;
    font-weight: 700;
    color: var(--color-primario);
    text-decoration: none;
}

.nav-menu {
    display: flex;
    align-items: center;
}

.nav-links {
    list-style: none;
    padding: 0;
    margin: 0;
    display: none; /* Oculto en móviles */
}

.nav-links li {
    margin-left: 1.5rem;
}

.nav-links a {
    text-decoration: none;
    color: var(--color-texto-principal);
    font-weight: 600;
    transition: color 0.3s;
}

.nav-links a:hover {
    color: var(--color-primario);
}

/* Botón para cambiar tema (Modo Oscuro/Claro) */
#theme-toggle {
    background: none;
    border: 1px solid var(--color-texto-secundario);
    color: var(--color-texto-secundario);
    cursor: pointer;
    padding: 8px 12px;
    border-radius: 20px;
    font-size: 0.8rem;
    margin-left: 1.5rem;
    transition: all 0.3s;
}
#theme-toggle:hover {
    background-color: var(--color-primario);
    border-color: var(--color-primario);
    color: var(--color-superficie);
}

/* Hero Section (Página de Inicio) */
.hero {
    text-align: center;
    padding: 5rem 1rem;
}

.hero h1 {
    font-size: 2.8rem;
    font-weight: 700;
    background: linear-gradient(45deg, var(--color-primario), #007bff);
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
}

.hero p {
    font-size: 1.2rem;
    max-width: 600px;
    margin: 1rem auto;
}

.boton {
    display: inline-block;
    background: var(--color-primario);
    color: #fff;
    padding: 12px 24px;
    text-decoration: none;
    border-radius: 8px;
    margin-top: 1rem;
    font-weight: 700;
    transition: background-color 0.3s, transform 0.3s;
}

.boton:hover {
    background: var(--color-primario-hover);
    transform: translateY(-3px);
}

/* Página Productos (Visual y Moderna) */
.grid-productos {
    display: grid;
    grid-template-columns: 1fr;
    gap: 1.5rem;
}

.card-producto {
    background: var(--color-superficie);
    border-radius: 12px;
    box-shadow: var(--sombra-caja);
    text-align: center;
    overflow: hidden;
    transition: all 0.3s;
}
.card-producto:hover {
    transform: translateY(-5px);
    box-shadow: 0 8px 20px rgba(0,0,0,0.12);
}

.card-producto img {
    width: 100%;
    height: 200px;
    object-fit: cover;
}

.card-contenido {
    padding: 1.5rem;
}

.card-contenido h3 {
    margin-top: 0;
}

/* Formulario de Contacto */
.formulario-contacto input,
.formulario-contacto textarea {
    width: 100%;
    padding: 1rem;
    margin-bottom: 1rem;
    border: 1px solid #ccc;
    border-radius: 8px;
    background-color: var(--color-fondo);
    color: var(--color-texto-principal);
    box-sizing: border-box; /* Importante para el padding */
}

/* Diseño Responsivo */
@media (min-width: 768px) {
    .nav-links {
        display: flex; /* Muestra el menú en pantallas grandes */
    }
    
    .grid-productos {
        grid-template-columns: repeat(2, 1fr);
    }
}

@media (min-width: 992px) {
    .grid-productos {
        grid-template-columns: repeat(3, 1fr);
    }

    .hero h1 {
        font-size: 3.5rem;
    }
}

















/* Estilo para el logo en el header */
.logo {
    display: flex; /* La clave para alinear elementos en línea */
    align-items: center; /* Centra verticalmente la imagen y el texto */
    gap: 0.75rem; /* Espacio entre el logo y el texto */
    font-size: 1.5rem;
    font-weight: 900;
    color: var(--color-primario);
    text-decoration: none;
}

/* Estilo para la imagen dentro del logo */
.logo img {
    height: 45px; /* Puedes ajustar la altura de tu logo como necesites */
    width: auto;  /* Mantiene la proporción de la imagen */
}

/* El texto ya hereda el color y fuente del enlace 'a.logo' */
.logo span {
    /* No necesita estilos adicionales por ahora, pero aquí los pondrías si fuera necesario */
}
/* ============================================= */
/* ESTILOS PARA LA NUEVA PÁGINA DE INICIO */
/* ============================================= */

/* --- ELEMENTOS FLOTANTES --- */
.social-bar {
    position: fixed;
    top: 50%;
    left: 0;
    transform: translateY(-50%);
    display: flex;
    flex-direction: column;
    background-color: var(--color-superficie);
    box-shadow: var(--sombra-caja);
    border-radius: 0 10px 10px 0;
    z-index: 101;
}

.social-icon {
    padding: 1rem;
    color: var(--color-texto-secundario);
    font-size: 1.2rem;
    transition: all 0.3s ease;
}

.social-icon:hover {
    background-color: var(--color-primario);
    color: #fff;
}

.whatsapp-float {
    position: fixed;
    bottom: 25px;
    right: 25px;
    width: 60px;
    height: 60px;
    background-color: #25D366;
    color: #fff;
    border-radius: 50%;
    display: flex;
    justify-content: center;
    align-items: center;
    font-size: 2.5rem;
    box-shadow: 0 4px 15px rgba(0,0,0,0.2);
    z-index: 100;
    transition: transform 0.3s ease;
}

.whatsapp-float:hover {
    transform: scale(1.1);
}

/* --- HEADER INICIO (CAMUFLADO) --- */
.header-inicio {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    background-color: transparent;
    box-shadow: none;
    z-index: 100;
    transition: background-color 0.4s ease, box-shadow 0.4s ease;
}
.header-inicio .logo,
.header-inicio .nav-links a {
    color: #fff; /* Color de texto para que resalte sobre el carrusel */
    text-shadow: 0 1px 3px rgba(0,0,0,0.5);
}

.header-inicio.scrolled {
    position: fixed;
    background-color: var(--color-superficie);
    box-shadow: var(--sombra-caja);
}
.header-inicio.scrolled .logo,
.header-inicio.scrolled .nav-links a {
    color: var(--color-primario); /* Vuelve a los colores normales */
    text-shadow: none;
}
.header-inicio.scrolled .nav-links a {
    color: var(--color-texto-principal);
}
.header-inicio.scrolled .nav-links a:hover {
    color: var(--color-primario);
}

/* ===================================================================== */
/* CSS v6: DISEÑO PREMIUM CON FONDOS UNIFICADOS Y ANIMACIONES */
/* ===================================================================== */
/* Importar una fuente moderna y profesional */
/* --- 1. Contenedor General --- */
/* --- 1. Contenedor General (AJUSTADO) --- */
/* --- 1. Contenedor General (MÁS COMPACTO) --- */
.hero-carousel {
    position: relative;
    height: 65vh;         /* <-- VALOR REDUCIDO */
    min-height: 500px;    /* <-- VALOR REDUCIDO */
    width: 100%;
    background-color: var(--color-fondo);
}
.hero-carousel .hero-swiper, .hero-carousel .swiper-slide {
    width: 100%;
    height: 100%;
}
.hero-carousel .swiper-slide {
    display: flex;
    justify-content: center;
    align-items: center;
    overflow: hidden;
}
.swiper-container {
    /* Altura suficiente para mostrar la tarjeta completa más algo de margen */
    height: 380px; 
    width: 100%;
    margin-bottom: 2rem;
    padding-bottom: 30px; /* Espacio para la paginación si existe */
    overflow: hidden; /* Esto es estándar de Swiper */
}
/* --- 2. Diapositivas de Múltiples Elementos (Clientes y Blog) --- */
.slide-content-wrapper {
    width: 100%;
    height: 100%;
    padding: 4rem 1.5rem;
    box-sizing: border-box;
    display: flex;
    justify-content: center;
    align-items: center;
    /* Fondo degradado sutil con patrón de puntos */
    background-color: var(--color-superficie);
    background-image: radial-gradient(circle at 1px 1px, rgba(0,0,0,0.1) 1px, transparent 0);
    background-size: 25px 25px;
}
body.dark-mode .slide-content-wrapper {
    background-image: radial-gradient(circle at 1px 1px, rgba(255,255,255,0.1) 1px, transparent 0);
}
.swiper-slide[data-layout="cards"] section {
    background: transparent !important;
    padding: 0 !important;
    height: auto;
    width: 100%;
    max-width: 1200px;
}

/* --- Animación de entrada escalonada para elementos --- */
/* Por defecto, los elementos están ocultos */
.logo-grid-container > *,
.blog-collage-grid > * {
    opacity: 0;
    transform: translateY(30px);
    transition: opacity 0.6s ease-out, transform 0.6s ease-out;
}
/* Cuando el slide está activo, se animan */
.swiper-slide-active .logo-grid-container > *,
.swiper-slide-active .blog-collage-grid > * {
    opacity: 1;
    transform: translateY(0);
}
/* Retrasos para crear el efecto escalonado */
.swiper-slide-active .logo-grid-container > *:nth-child(1), .swiper-slide-active .blog-collage-grid > *:nth-child(1) { transition-delay: 0.2s; }
.swiper-slide-active .logo-grid-container > *:nth-child(2), .swiper-slide-active .blog-collage-grid > *:nth-child(2) { transition-delay: 0.3s; }
.swiper-slide-active .logo-grid-container > *:nth-child(3), .swiper-slide-active .blog-collage-grid > *:nth-child(3) { transition-delay: 0.4s; }
.swiper-slide-active .logo-grid-container > *:nth-child(4), .swiper-slide-active .blog-collage-grid > *:nth-child(4) { transition-delay: 0.5s; }
.swiper-slide-active .logo-grid-container > *:nth-child(5), .swiper-slide-active .blog-collage-grid > *:nth-child(5) { transition-delay: 0.6s; }
.swiper-slide-active .logo-grid-container > *:nth-child(6), .swiper-slide-active .blog-collage-grid > *:nth-child(6) { transition-delay: 0.7s; }


/* --- 3. Diapositivas Destacadas con Interacción Refinada --- */
.swiper-slide[data-layout="feature"] {
    cursor: pointer;
}
.slide-bg-image {
    position: absolute; top: 0; left: 0;
    width: 100%; height: 100%;
    background-size: cover; background-position: center;
    transform: scale(1.);
    transition: transform 8s ease-out;
}
.swiper-slide-active .slide-bg-image {
    transform: scale(1);
}

/* El degradado de fondo */
.swiper-slide[data-layout="feature"]::before {
    content: '';
    position: absolute; top: 0; left: 0;
    width: 100%; height: 100%; z-index: 1;
    background: linear-gradient(to top, rgba(0,0,0,0.8) 0%, rgba(0,0,0,0.2) 60%, transparent 100%);
}

.slide-content-feature {
    position: relative; z-index: 2;
    text-align: center; padding: 2rem; max-width: 900px;
    color: #fff;
}
.slide-content-feature h3 {
    font-family: 'Poppins', sans-serif; /* <-- ASEGURAMOS LA NUEVA FUENTE */
    font-size: clamp(1rem, 3.2vw, 3.5rem); /* <-- TAMAÑO LIGERAMENTE AJUSTADO */
    color: #fff;
    text-shadow: 0 4px 12px rgba(0,0,0,0.6);
    line-height: 1.15; /* <-- LIGERO AJUSTE PARA MEJOR LECTURA */
    margin-bottom: 1.5rem;
    font-weight: 700; /* <-- UN PESO FUERTE PARA IMPACTO */
    letter-spacing: -1px; /* <-- UN TOQUE DE DISEÑO PARA JUNTAR LAS LETRAS */
}

/* La descripción y el botón están ocultos por defecto */
/* --- 3. Diapositivas Destacadas con Animación Automática --- */

/* Por defecto, TODOS los elementos del texto estarán ocultos y desplazados */
/* === CORRECCIÓN DE OPACIDAD PARA HÉROE FIJO EN CONÓCENOS === */
.hero-conocenos-v2 .slide-content-feature h3,
.hero-conocenos-v2 .slide-content-feature h1,
.hero-conocenos-v2 .slide-content-feature p,
.hero-conocenos-v2 .slide-content-feature .boton {
    /* La clave es forzar la visibilidad (opacity: 1) y anular el desplazamiento (transform: none) */
    opacity: 1 !important;
    transform: none !important; 
    /* También nos aseguramos de que el texto sea blanco sobre el fondo oscuro del hero */
    color: #fff !important;
    text-shadow: 0 2px 4px rgba(0,0,0,0.5) !important;
}
/* Cuando el slide está ACTIVO, los elementos aparecen de forma escalonada */
.swiper-slide-active .slide-content-feature h3,
.swiper-slide-active .slide-content-feature p,
.swiper-slide-active .slide-content-feature .boton {
    opacity: 1;
    transform: translateY(0);
}

/* Retrasos para crear el efecto dinámico: */
/* El título aparece primero (después de 0.4s) */
.swiper-slide-active .slide-content-feature h3 {
    transition-delay: 0.4s;
}
/* El párrafo aparece medio segundo después del título (0.4s + 0.5s) */
.swiper-slide-active .slide-content-feature p {
    transition-delay: 0.6s;
}
/* El botón aparece al final */
.swiper-slide-active .slide-content-feature .boton {
    transition-delay: 0.8s;
}

.slide-content-feature p {
    font-size: clamp(1.1rem, 2vw, 1.3rem);
    color: rgba(255,255,255,0.9);
    max-width: 650px; margin: 0 auto 2.5rem auto;
    transition-delay: 0.1s; /* Pequeño retraso para la descripción */
}
.slide-content-feature .boton {
    transition-delay: 0.2s; /* Un retraso mayor para el botón */
}

/* --- 4. Navegación (Flechas y Puntos) con NUEVO DISEÑO --- */

/* NUEVO DISEÑO PARA LAS FLECHAS */
.hero-carousel .swiper-button-next,
.hero-carousel .swiper-button-prev {
    width: 50px;
    height: 80px;
    color: #fff;
    background: transparent; /* Sin fondo por defecto */
    border: 1px solid rgba(255, 255, 255, 0); /* Borde invisible por defecto */
    border-radius: 12px; /* Bordes redondeados */
    transition: all 0.3s ease;
    backdrop-filter: none; /* Quitamos el blur */
}

/* Al pasar el ratón, aparece el fondo y el borde */
.hero-carousel .swiper-button-next:hover,
.hero-carousel .swiper-button-prev:hover {
    background: rgba(0, 0, 0, 0.3);
    border-color: rgba(255, 255, 255, 0.2);
   
}

/* Ajustamos el tamaño y estilo de los iconos de flecha */
.hero-carousel .swiper-button-next::after,
.hero-carousel .swiper-button-prev::after {
    font-size: 1.5rem;
    font-weight: 600;
}

/* Mantenemos los estilos de la paginación (puntos) */
.hero-carousel .swiper-pagination .swiper-pagination-bullet-active {
    background: #fff;
}
.swiper-slide[data-layout="cards"].swiper-slide-active ~ .swiper-pagination .swiper-pagination-bullet-active {
    background: var(--color-primario);
}
@media (max-width: 768px) {
    .hero-carousel .swiper-button-prev {
        left: 20px; 
    }
    .hero-carousel .swiper-button-next {
        right: 20px;
    }
    .slide-content h3 {
        font-size: 2.5rem;
    }
    .slide-content p {
        font-size: 1rem;
    }
}
.slide-content-wrapper {
    width: 100%;
    height: 100%;
    padding: 4rem 1.5rem;
    box-sizing: border-box;
    overflow-y: auto; /* Permite scroll si el contenido es muy alto en pantallas pequeñas */
    /* Fondo degradado sutil con patrón de puntos */
    background-color: var(--color-superficie);
    background-image: radial-gradient(circle at 1px 1px, rgba(0,0,0,0.1) 1px, transparent 0);
    background-size: 25px 25px;
}
body.dark-mode .slide-content-wrapper {
    background-image: radial-gradient(circle at 1px 1px, rgba(255,255,255,0.1) 1px, transparent 0);
}

/* Contenedor que centra el título */
.slide-intro-content {
    width: 100%;
    max-width: 1200px;
    text-align: center;
    margin: 0 auto 3rem auto; /* Centramos el bloque de título */
}

/* El contenedor del collage que usa CSS Grid */
.blog-collage-container {
    display: grid;
    width: 100%;
    max-width: 1200px;
    margin: 0 auto; /* Centramos la rejilla */
    gap: 1.5rem;
    /* Define 4 columnas y filas que se ajustan al contenido */
    grid-template-columns: repeat(4, 1fr);
    grid-auto-rows: minmax(200px, auto);
    grid-auto-flow: dense; /* Intenta rellenar los huecos vacíos */
}

/* La tarjeta individual del blog */
.blog-card {
    position: relative;
    overflow: hidden;
    border-radius: 16px;
    box-shadow: 0 8px 25px rgba(0,0,0,0.1);
    text-decoration: none;
    color: #fff;
    display: flex;
    align-items: flex-end; /* Alinea el texto en la parte inferior */
    transition: transform 0.4s ease, box-shadow 0.4s ease;
}

.blog-card:hover {
    transform: translateY(-8px) scale(1.02);
    box-shadow: 0 15px 30px rgba(0,0,0,0.2);
}

/* La imagen de fondo de cada tarjeta */
.blog-card img {
    position: absolute;
    top: 0; left: 0;
    width: 100%;
    height: 100%;
    object-fit: cover;
    transition: transform 0.5s ease;
}

.blog-card:hover img {
    transform: scale(1.1);
}

/* La capa de texto sobre la imagen */
.blog-card__overlay {
    position: relative;
    z-index: 2;
    width: 100%;
    padding: 1.5rem;
    box-sizing: border-box;
    /* Gradiente para asegurar que el texto sea siempre legible */
    background: linear-gradient(to top, rgba(0,0,0,0.9) 0%, rgba(0,0,0,0.5) 50%, transparent 100%);
}

.blog-card__category {
    display: inline-block;
    font-size: 0.75rem;
    font-weight: 600;
    padding: 0.25rem 0.75rem;
    background-color: var(--color-primario);
    color: #fff;
    border-radius: 20px;
    margin-bottom: 0.75rem;
}

.blog-card h3 {
    font-size: 1.2rem;
    line-height: 1.3;
    margin: 0;
    color: #fff;
    text-shadow: 0 1px 3px rgba(0,0,0,0.5);
}

/* --- CLASES PARA EL TAMAÑO DE COLLAGE --- */
.blog-card--large {
    grid-column: span 2;
    grid-row: span 2;
}
.blog-card--tall {
    grid-row: span 2;
}

/* --- RESPONSIVIDAD PARA EL COLLAGE --- */
/* --- RESPONSIVIDAD MEJORADA PARA EL COLLAGE --- */
@media (max-width: 992px) {
    .blog-collage-container {
        /* En tablets, permitimos 2 o 3 columnas dependiendo del ancho */
        grid-template-columns: repeat(auto-fit, minmax(300px, 1fr));
    }
    /* Reseteamos los tamaños especiales para que no rompan la rejilla */
    .blog-card--large, .blog-card--tall {
        grid-column: span 1;
        grid-row: span 1;
        aspect-ratio: 16 / 10;
    }
}

@media (max-width: 768px) {
    .blog-collage-container {
        /* Forzamos una rejilla de 2 columnas para las 2 tarjetas visibles */
        grid-template-columns: 1fr 1fr;
        gap: 1rem;
    }

    .blog-card, .blog-card--large, .blog-card--tall {
        /* Nos aseguramos que cada tarjeta ocupe solo una celda */
        grid-column: span 1;
        grid-row: span 1;
        /* Hacemos las tarjetas un poco más altas que anchas para que quepan mejor */
        aspect-ratio: 9 / 10;
    }

    /* ▼▼▼ LA REGLA CLAVE ▼▼▼ */
    /* Ocultamos la tercera tarjeta y todas las que le siguen */
    .blog-collage-container .blog-card:nth-child(n + 3) {
        display: none;
    }
}














/* --- SECCIONES DE INFO --- */
.seccion {
    padding: 4rem 0;
}
.titulo-seccion {
    text-align: center;
    font-size: 2.2rem;
    margin-bottom: 1rem;
}
.subtitulo-seccion {
    text-align: center;
    font-size: 1.1rem;
    max-width: 700px;
    margin: 0 auto 3rem auto;
}

/* Features Grid */
.features-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(250px, 1fr));
    gap: 2rem;
}
.feature-card {
    text-align: center;
}
.feature-icon {
    font-size: 3rem;
    color: var(--color-primario);
    margin-bottom: 1rem;
}

/* Info Alternating */
.info-alternating, .info-alternating-inverso {
    background-color: var(--color-superficie);
}
.grid-dos-columnas {
    display: grid;
    grid-template-columns: 1fr;
    gap: 3rem;
    align-items: center;
}
.columna-imagen img {
    width: 100%;
    border-radius: 12px;
    box-shadow: var(--sombra-caja);
}

/* --- SECCIÓN CONTACTO HOME --- */
.seccion-contacto-home {
    background-color: var(--color-fondo);
}
.formulario-contacto-home {
    max-width: 700px;
    margin: 0 auto;
    display: grid;
    gap: 1rem;
}
.formulario-contacto-home input, .formulario-contacto-home textarea {
    width: 100%;
    padding: 1rem;
    border: 1px solid #ccc;
    border-radius: 8px;
    background-color: var(--color-superficie);
    color: var(--color-texto-principal);
    box-sizing: border-box;
    font-family: 'Nunito', sans-serif;
}
.formulario-contacto-home button {
    width: 100%;
    border: none;
}

/* --- RESPONSIVIDAD DEL MENÚ --- */
.nav-right-options {
    display: flex;
    align-items: center;
    gap: 1rem;
}
.nav-toggle {
    display: none; /* Oculto en escritorio */
    font-size: 1.5rem;
    cursor: pointer;
    background: none;
    border: none;
    color: var(--color-primario);
}
.header-inicio .nav-toggle {
    color: #fff; /* Color para el menú sobre el carrusel */
}
.header-inicio.scrolled .nav-toggle {
    color: var(--color-primario); /* Color al hacer scroll */
}

@media screen and (max-width: 768px) {
    .nav-toggle {
        display: block;
    }
    .nav-menu {
        position: fixed;
        top: 0;
        right: -100%; /* Empieza fuera de la pantalla */
        width: 60%;
        height: 100vh;
        background-color: var(--color-superficie);
        padding: 4rem 2rem 2rem;
        transition: right 0.4s ease;
        box-shadow: -5px 0 15px rgba(0,0,0,0.1);
    }
    .nav-menu.show-menu {
        right: 0; /* Lo trae a la vista */
    }
    .nav-links {
    display: flex; /* ▼▼▼ ESTA LÍNEA ES LA SOLUCIÓN ▼▼▼ */
    flex-direction: column;
    align-items: flex-start;
    gap: 2rem;
}
    .header-inicio .nav-links a,
    .header-inicio.scrolled .nav-links a {
        color: var(--color-texto-principal);
        text-shadow: none;
    }

    .grid-dos-columnas {
        grid-template-columns: 1fr;
    }
    .info-alternating-inverso .columna-texto {
        order: 2; /* Cambia el orden en móvil si es necesario */
    }
    .info-alternating-inverso .columna-imagen {
        order: 1;
    }
}
@media (min-width: 768px) {
    .grid-dos-columnas {
        grid-template-columns: 1fr 1fr;
    }
    .info-alternating-inverso .columna-texto {
        order: 1;
    }
    .info-alternating-inverso .columna-imagen {
        order: 2;
    }
}



/* --- ESTILOS PARA SECCIÓN DE CLIENTES (DISEÑO INMERSIVO Y FLOTANTE) --- */

/* ============================================= */
/* CSS FINAL: CLIENTES (GRID FLOTANTE SIN PAUSA) */
/* ============================================= */

/* 1. La animación individual que hace que los elementos floten */
@keyframes floatAnimation {
    0% { transform: translateY(0px) rotate(-1deg); }
    50% { transform: translateY(-20px) rotate(1deg); }
    100% { transform: translateY(0px) rotate(-1deg); }
}

/* 2. El contenedor principal de la sección */
.seccion-clientes-inmersiva {
    position: relative;
    width: 100%;
    min-height: 90vh;
    padding: 4rem 0;
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    overflow: hidden;
    background-color: var(--color-superficie);
}

/* El fondo de puntos sutil */
.seccion-clientes-inmersiva::before {
    content: '';
    position: absolute;
    top: 0; left: 0;
    width: 100%; height: 100%;
    background-image: radial-gradient(circle, var(--color-texto-secundario) 1px, transparent 1px);
    background-size: 30px 30px;
    opacity: 0.1;
    z-index: 0;
}
body.dark-mode .seccion-clientes-inmersiva::before {
    opacity: 0.2;
}


.clientes-contenido {
    text-align: center;
    margin-bottom: 3rem;
    position: relative;
    z-index: 2;
}

/* 3. El contenedor de la rejilla de logos */
.logo-grid-container {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(140px, 1fr));
    gap: 2.5rem; /* Un poco más de separación */
    width: 80%;
    max-width: 1200px;
    position: relative;
    z-index: 1;
}

/* 4. El "cuadrito" individual */
.client-square {
    width: 140px;
    height: 140px;
    background-color: var(--color-fondo);
    border: 1px solid rgba(0,0,0,0.05);
    border-radius: 16px;
    display: flex;
    justify-content: center;
    align-items: center;
    padding: 1rem;
    box-shadow: 0 5px 15px rgba(0,0,0,0.08);
    transition: transform 0.3s ease, box-shadow 0.3s ease;
    
    /* Aplicamos la animación base a todos */
    animation-name: floatAnimation;
    animation-timing-function: ease-in-out;
    animation-iteration-count: infinite;
}

/* --- ESTA ES LA MODIFICACIÓN CLAVE --- */
.client-square:hover {
    /* La animación ya NO se pausa, pero el cuadrito sí reacciona */
    transform: scale(1.1);
    box-shadow: 0 12px 30px rgba(0,0,0,0.15);
    z-index: 10;
}

.client-square img {
    max-width: 85%;
    max-height: 85%;
    width: auto; height: auto;
    filter: grayscale(100%);
    opacity: 0.7;
    transition: filter 0.3s, opacity 0.3s;
}
.client-square:hover img {
    filter: grayscale(0%);
    opacity: 1;
}

/* 5. La clave para el efecto "disperso" y "aleatorio" */
.client-square:nth-child(2) { animation-duration: 6s; }
.client-square:nth-child(3) { animation-duration: 8s; animation-delay: -2s; }
.client-square:nth-child(4) { animation-duration: 5.5s; animation-delay: -1s; }
.client-square:nth-child(5) { animation-duration: 7s; }
.client-square:nth-child(6) { animation-duration: 6.5s; animation-delay: -3s; }
.client-square:nth-child(7) { animation-duration: 8.5s; }
.client-square:nth-child(8) { animation-duration: 5s; animation-delay: -0.5s; }
.client-square:nth-child(9) { animation-duration: 7s; animation-delay: -2.5s; }
.client-square:nth-child(10) { animation-duration: 6s; animation-delay: -1.5s; }
.client-square:nth-child(11) { animation-duration: 8s; }
.client-square:nth-child(12) { animation-duration: 5.5s; animation-delay: -4s; }


/* 6. Estilos para Modo Oscuro */
body.dark-mode .client-square {
    border-color: rgba(255,255,255,0.1);
}
body.dark-mode .client-square img {
    filter: grayscale(100%) invert(1);
    opacity: 0.6;
}
body.dark-mode .client-square:hover img {
    filter: grayscale(0%) invert(0);
}




/* ================================================================= */
/* ================================================================= */
/* CSS PARA CARRUSEL DE PRODUCTOS SENCILLO Y ELEGANTE */
/* ================================================================= */

.seccion-productos-carrusel {
    padding: 4rem 0;
    background-color: var(--color-fondo); /* Usa el color de fondo de tu página */
}

/* Contenedor que permite que las flechas se vean fuera */
.contenedor-carrusel {
    position: relative;
    max-width: 1200px;
    margin: auto;
    padding: 0 40px; /* Espacio para las flechas en escritorio */
}

.carrusel-productos {
    padding-bottom: 4rem; /* Espacio para la paginación (puntitos) */
}
.carrusel-ofertas,
.carrusel-mas-vendidos,
.carrusel-todos-productos {
    padding-bottom: 4rem;
}
.producto-card {
    background-color: var(--color-superficie); /* Color de tarjeta de tu página */
    border-radius: 16px; /* Bordes redondeados consistentes */
    box-shadow: var(--sombra-caja); /* Sombra consistente */
    overflow: hidden;
    display: flex;
    flex-direction: column;
    height: 100%;
    transition: transform 0.3s ease, box-shadow 0.3s ease;
}

.producto-card:hover {
    transform: translateY(-8px);
    box-shadow: 0 12px 24px rgba(0, 0, 0, 0.12);
}
body.dark-mode .producto-card:hover {
    box-shadow: 0 12px 24px rgba(0, 0, 0, 0.5);
}

.producto-card-imagen {
    width: 100%;
    aspect-ratio: 4 / 3; /* Proporción para que todas las imágenes se vean uniformes */
    overflow: hidden;
}

.producto-card-imagen img {
    width: 100%;
    height: 100%;
    object-fit: cover; /* Asegura que la imagen cubra el espacio sin deformarse */
    transition: transform 0.4s ease;
}

.producto-card:hover .producto-card-imagen img {
    transform: scale(1.05); /* Sutil efecto de zoom en la imagen */
}

.producto-card-contenido {
    padding: 1.5rem;
    display: flex;
    flex-direction: column;
    flex-grow: 1; /* Asegura que el contenido ocupe el espacio disponible */
}

.producto-card-titulo {
    font-size: 1.25rem;
    font-weight: 700;
    color: var(--color-texto-principal);
    margin: 0 0 0.5rem 0;
}

.producto-card-desc {
    font-size: 0.9rem;
    color: var(--color-texto-secundario);
    line-height: 1.5;
    flex-grow: 1; /* Empuja el pie de la tarjeta hacia abajo */
    margin-bottom: 1rem;
}

.producto-card-pie {
    display: flex;
    justify-content: space-between;
    align-items: center;
    border-top: 1px solid var(--color-fondo);
    padding-top: 1rem;
}

.producto-card-precio {
    font-size: 1.5rem;
    font-weight: 700;
    color: var(--color-primario); /* Usa tu color primario */
}

/* --- Estilos para los controles de Swiper --- */
.contenedor-carrusel .swiper-button-next,
.contenedor-carrusel .swiper-button-prev {
    /* 1. Definir una posición vertical fija y estable */
    top: 50%; 
    transform: translateY(-50%); /* Centrado Verticalmente Estándar */
    
    /* 2. Asegurar que el tamaño sea explícito y constante */
    width: 28px;
    height: 44px;
    
    /* 3. Asegurar que el HOVER SOLO cambie la escala, NO la posición */
    transition: transform 0.2s ease, opacity 0.2s ease; 
}


.contenedor-carrusel .swiper-pagination-bullet {
    background-color: var(--color-texto-secundario);
}

.contenedor-carrusel .swiper-pagination-bullet-active {
    background-color: var(--color-primario);
}

@media (max-width: 768px) {
    .contenedor-carrusel {
        padding: 0; /* Sin espacio lateral en móviles */
    }
    .contenedor-carrusel .swiper-button-next,
    .contenedor-carrusel .swiper-button-prev {
        display: none; /* Oculta las flechas en móviles */
    }
}


/* ================================================================= */
/* CSS PARA LA SECCIÓN DE SERVICIOS (SOLUCIONES INTEGRALES) */
/* ================================================================= */


.seccion-servicios {
    padding: 10rem 0;
    background-color: var(--color-superficie); 
}

body.dark-mode .seccion-servicios {
    background-color: #1a1a1a; 
}



.card-servicio {
    background-color: var(--color-fondo); /* El color de fondo principal para contraste */
    border: 1px solid rgba(0,0,0,0.05); /* Un borde muy sutil */
    border-radius: 16px; /* Bordes redondeados consistentes */
    padding: 2rem;
    display: flex;
    flex-direction: column;
    text-align: center;
    transition: transform 0.3s ease, box-shadow 0.3s ease;
}

body.dark-mode .card-servicio {
    background-color: var(--color-superficie);
    border-color: rgba(255,255,255,0.1);
}

.card-servicio:hover {
    transform: translateY(-10px);
    box-shadow: var(--sombra-caja);
}

.card-servicio-icon {
    font-size: 3rem;
    color: var(--color-primario); /* Tu color principal para los iconos */
    margin-bottom: 1.5rem;
}

.card-servicio h3 {
    margin: 0 0 1rem 0;
    font-size: 1.3rem;
    color: var(--color-texto-principal);
}

.card-servicio p {
    color: var(--color-texto-secundario);
    line-height: 1.6;
    margin: 0 0 1.5rem 0;
    /* flex-grow permite que la descripción ocupe el espacio y los botones se alineen */
    flex-grow: 1;
}

.card-servicio-features {
    list-style: none;
    padding: 0;
    margin: 0 0 2rem 0;
    text-align: left; /* Alineamos los items a la izquierda para mejor lectura */
    color: var(--color-texto-secundario);
}

.card-servicio-features li {
    margin-bottom: 0.75rem;
    display: flex;
    align-items: center;
}

/* Estilo para los checks de la lista */
.card-servicio-features .fa-check {
    color: var(--color-primario);
    margin-right: 0.75rem;
    font-size: 0.9rem;
}

.boton-servicio {
    display: inline-block;
    width: 100%;
    background: transparent;
    border: 2px solid var(--color-primario);
    color: var(--color-primario);
    padding: 12px 24px;
    text-decoration: none;
    border-radius: 8px;
    font-weight: 700;
    text-align: center;
    transition: background-color 0.3s, color 0.3s;
    box-sizing: border-box; /* Asegura que el padding no afecte el ancho */
}

.boton-servicio:hover {
    background-color: var(--color-primario);
    color: #fff; /* O var(--color-superficie) para consistencia con modo oscuro */
}



/* ================================================================= */
/* CSS PARA SECCIÓN DE CONTACTO MEJORADA */
/* ================================================================= */

.seccion-contacto-home {
    padding: 4rem 0;
    background-color: var(--color-superficie);
}

body.dark-mode .seccion-contacto-home {
    background-color: #1a1a1a;
}

.contacto-grid {
    display: grid;
    grid-template-columns: 1fr 1.2fr; /* La columna del form es un poco más ancha */
    gap: 3rem;
    background-color: var(--color-fondo);
    padding: 3rem;
    border-radius: 16px;
    box-shadow: var(--sombra-caja);
    margin-top: 2rem;
}

body.dark-mode .contacto-grid {
    background-color: var(--color-superficie);
}

.contacto-info h3 {
    margin-top: 0;
    color: var(--color-texto-principal);
}

.contacto-info p {
    color: var(--color-texto-secundario);
    margin-bottom: 2rem;
}

.info-block {
    display: flex;
    align-items: flex-start;
    margin-bottom: 1.5rem;
}

.info-block-icon {
    font-size: 1.5rem;
    color: var(--color-primario);
    margin-right: 1.5rem;
    width: 30px;
    text-align: center;
}

.info-block-text {
    display: flex;
    flex-direction: column;
}

.info-block-text strong {
    color: var(--color-texto-principal);
    font-weight: 700;
    margin-bottom: 0.25rem;
}

.info-block-text span {
    color: var(--color-texto-secundario);
}

/* --- FORMULARIO CON ETIQUETAS FLOTANTES --- */
.formulario-contacto-mejorado {
    display: flex;
    flex-direction: column;
    gap: 1.5rem;
}

.form-group {
    position: relative;
}

.form-input {
    width: 100%;
    padding: 1rem;
    border: 1px solid #ccc;
    border-radius: 8px;
    background-color: var(--color-fondo);
    color: var(--color-texto-principal);
    font-family: 'Nunito', sans-serif;
    font-size: 1rem;
    box-sizing: border-box;
    transition: border-color 0.3s;
}

body.dark-mode .form-input {
    background-color: #333;
    border-color: #555;
}

.form-label {
    position: absolute;
    top: 1rem;
    left: 1rem;
    color: var(--color-texto-secundario);
    pointer-events: none;
    transition: all 0.3s ease;
}

.form-input:focus {
    outline: none;
    border-color: var(--color-primario);
}

/* La magia de la etiqueta flotante */
.form-input:focus + .form-label,
.form-input:not(:placeholder-shown) + .form-label {
    top: -0.75rem;
    left: 0.75rem;
    font-size: 0.8rem;
    color: var(--color-primario);
    background-color: var(--color-fondo); /* El fondo debe coincidir con el del formulario */
    padding: 0 0.25rem;
}

body.dark-mode .form-input:focus + .form-label,
body.dark-mode .form-input:not(:placeholder-shown) + .form-label {
    background-color: var(--color-superficie); /* En modo oscuro, el fondo es el de la tarjeta */
}

.formulario-contacto-mejorado .boton {
    width: 100%; /* El botón ocupa todo el ancho */
    margin-top: 1rem;
}

/* --- Diseño Responsivo --- */
@media (max-width: 992px) {
  .contacto-grid {
        grid-template-columns: 1fr; /* Las columnas se apilan una sobre otra */
        padding: 2rem;
        /* AÑADE ESTO */
        width: 100%; 
        max-width: 100%;
        box-sizing: border-box; /* Asegura que el padding no cause desbordamiento */
    }
}













/* ================================================================= */
/* CSS COMPLETO Y FINAL PARA PÁGINA "CONÓCENOS" (DISEÑO PRÉMIUM) */
/* ================================================================= */
/* ======================================================= */
/* ====== HERO CON IMAGEN Y EFECTO PARALLAX (MEJORADO) ====== */
/* ======================================================= */

.hero-conocenos-v2 {
    position: relative;
    height: 60vh; /* Altura de la sección, puedes ajustarla */
    display: flex;
    align-items: center;
    justify-content: center;
    text-align: center;
    color: #fff; /* Color del texto del título */
    
    /* --- INICIO DE LA MAGIA --- */
    
    /* 1. La imagen de fondo */
    /* Nota: Usamos una capa oscura (linear-gradient) para que el texto blanco sea legible */
background-image: linear-gradient(rgba(0, 0, 0, 0.6), rgba(0, 0, 0, 0.6)), url('../images/CONOCENOS/conocenos .png');    
    /* 2. Propiedades para que la imagen se ajuste bien */
    background-size: cover;
    background-position: center;
    
    /* 3. ¡La Clave del Efecto Parallax! */
    /* Esto hace que la imagen de fondo se quede "fija" mientras la página se desplaza */
    background-attachment: fixed; 
    
    /* --- FIN DE LA MAGIA --- */
}

/* El contenedor del texto no necesita cambios */
.hero-content-v2 {
    max-width: 800px;
    padding: 2rem;
}

.hero-content-v2 h1 {
    font-size: 3.5rem;
    font-weight: 700;
    color: #fff; /* Nos aseguramos que el H1 sea blanco */
    text-shadow: 0 2px 4px rgba(0,0,0,0.5);
}

.hero-content-v2 p {
    font-size: 1.2rem;
    color: rgba(255,255,255,0.9);
}

/* --- SECCIÓN DE HITOS CON CONTADORES --- */
.seccion-hitos {
    background-color: var(--color-superficie);
}

body.dark-mode .seccion-hitos {
    background-color: #1a1a1a;
}

.grid-hitos {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: 2rem;
    text-align: center;
}

.hito-item .hito-numero {
    font-size: 3rem;
    font-weight: 700;
    color: var(--color-primario);
}

.hito-item .hito-texto {
    font-size: 1rem;
    color: var(--color-texto-secundario);
    margin-top: 0.5rem;
}

/* --- SECCIÓN MISIÓN Y VISIÓN DE ALTO IMPACTO --- */
.seccion-mv-impacto {
    position: relative;
    padding: 5rem 0;
    color: #fff;
    /* Asegúrate de que la ruta a tu imagen sea correcta */
    background-image: linear-gradient(rgba(0, 0, 0, 0.7), rgba(0, 0, 0, 0.7)), url('deliveryhealth\public_html\images\QUIENESOMOS\vision y mision .png');
    background-size: cover;
    background-position: center;
    background-attachment: fixed; /* Efecto Parallax */
}

.grid-mv-impacto {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 3rem;
}

.card-mv-impacto {
    background: rgba(255, 255, 255, 0.1);
    backdrop-filter: blur(10px);
    -webkit-backdrop-filter: blur(10px); /* Para compatibilidad con Safari */
    border-radius: 16px;
    padding: 2.5rem;
    text-align: center;
    border: 1px solid rgba(255, 255, 255, 0.2);
}

.card-mv-icono {
    font-size: 3rem;
    color: var(--color-primario);
    margin-bottom: 1rem;
}

.card-mv-impacto h3 {
    margin: 0 0 1rem 0;
    font-size: 1.8rem;
    color: #fff;
}

.card-mv-impacto p {
    color: rgba(255, 255, 255, 0.8);
    line-height: 1.7;
}



.card-valor {
    background-color: var(--color-superficie);
    padding: 2rem;
    border-radius: 16px;
    text-align: center;
    box-shadow: var(--sombra-caja);
    transition: transform 0.3s ease, box-shadow 0.3s ease;

    /* 💡 SOLUCIÓN DEFINITIVA: Forzar a la tarjeta a ser un contenedor Flex completo */
    display: flex; 
    flex-direction: column;
    height: 50%; /* CLAVE: Toma TODA la altura que le dé el contenedor GRID */
    /* El justify-content es CLAVE para que el contenido se alinee arriba */
    justify-content: flex-start; 
}

.card-valor:hover {
    transform: translateY(-10px);
    box-shadow: 0 12px 24px rgba(0,0,0,0.12);
}

body.dark-mode .card-valor {
    background-color: #1a1a1a;
}
body.dark-mode .card-valor:hover {
    box-shadow: 0 12px 24px rgba(0,0,0,0.4);
}

.card-valor-icon {
    font-size: 3.5rem;
    color: var(--color-primario);
    margin-bottom: 1.5rem;
}

.card-valor h4 {
    margin: 0 0 0.5rem 0;
    font-size: 1.3rem;
    color: var(--color-texto-principal);
}

.card-valor p {
    color: var(--color-texto-secundario);
    line-height: 1.6;
    
    /* 💡 SOLUCIÓN CLAVE: Este párrafo debe crecer para ocupar el espacio restante */
    flex-grow: 1; 
}

/* --- SECCIÓN DE EQUIPO --- */
.seccion-equipo {
    background-color: var(--color-fondo);
}

.grid-equipo {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));
    gap: 2rem;
}

.card-equipo {
    text-align: center;
    background-color: var(--color-superficie);
    border-radius: 16px;
    box-shadow: var(--sombra-caja);
    overflow: hidden;
    transition: transform 0.3s ease;
}

.card-equipo:hover {
    transform: translateY(-8px);
}

.card-equipo img {
    width: 100%;
    height: 300px;
    object-fit: cover;
    object-position: top;
}

.card-equipo-info {
    padding: 1.5rem;
}

.card-equipo-info h4 {
    margin: 0 0 0.25rem 0;
    font-size: 1.2rem;
}

.card-equipo-info span {
    color: var(--color-primario);
    font-weight: 600;
}


/* --- Media Queries para responsividad de la página --- */
@media (max-width: 992px) {
    .grid-mv-impacto {
        grid-template-columns: 1fr;
    }
}

@media (max-width: 768px) {
    .hero-content-v2 h1 { 
        font-size: 2.5rem; 
    }
    .grid-hitos { 
        grid-template-columns: repeat(2, 1fr); 
    }
}









/* ================================================================= */
/* CSS PARA PÁGINA DE PRODUCTOS (E-COMMERCE) */
/* ================================================================= */

/* --- HERO DE LA PÁGINA --- */
.hero-productos {
    padding: 3rem 1rem;
    text-align: center;
    color: #fff;
    background-image: linear-gradient(rgba(0,0,0,0.6), rgba(0,0,0,0.6)), url('https://images.unsplash.com/photo-1556742502-ec7c0e2f34b1?q=80&w=1470');
    background-size: cover;
    background-position: center;

    padding-top: 2rem; /* Relleno superior */
    padding-bottom: 2rem; /* Relleno inferior para dar espacio */
    position: relative; /* Necesario para que la imagen de fondo funcione bien */
    overflow: hidden; /* Evita que la imagen se desborde */

}
@media (max-width: 768px) {
    .hero-productos {
        padding-bottom: 6rem;
    }
}
body.dark-mode .hero-productos {
    background-color: #1a1a1a;
}
.hero-productos h1 {
    font-size: 2.8rem;
    color: var(--color-texto-principal);
    margin: 0 0 0.5rem 0;
}
.hero-productos p {
    font-size: 1.2rem;
    color: var(--color-texto-secundario);
}

/* ================================================================= */
/* CSS PARA BUSCADOR Y FILTROS MEJORADOS (VERSIÓN 2) */
/* ================================================================= */

.seccion-filtros-v2 {
    padding: 2rem 0;
    background-color: var(--color-superficie);
    border-bottom: 1px solid var(--color-fondo);
}

body.dark-mode .seccion-filtros-v2 {
    border-color: #333;
}

.filtros-container-v2 {
    display: flex;
    flex-direction: column;
    gap: 1.5rem;
}

/* --- BARRA DE BÚSQUEDA --- */
/* --- Barra de Búsqueda Principal (Más compacta y elegante) --- */
.search-bar-v2 {
    display: flex;
    align-items: center;
    background-color: var(--color-superficie); /* Usa el color de las tarjetas */
    border-radius: 50px; /* Muy redondeado */
    padding: 10px 20px; /* Reducimos el padding */
    box-shadow: var(--sombra-caja);
    max-width: 600px; /* Hacemos el buscador menos ancho */
    margin: 0 auto; /* Centrarlo */
    transition: all 0.3s ease;
    border: 1px solid transparent; /* Borde sutil */
}

body.dark-mode .search-bar-v2 {
    background-color: #1e1e1e; /* Color en modo oscuro */
    border-color: #333;
}

.search-bar-v2:focus-within {
    border-color: var(--color-primario); /* Borde de color al enfocar */
    box-shadow: 0 0 0 3px var(--color-primario-transparente); /* Efecto de "glow" */
    transform: translateY(-1px); /* Sutil elevación */
}

.search-bar-v2 input {
    border: none;
    outline: none;
    flex-grow: 1;
    padding: 3px 10px; /* Ajustamos el padding interno */
    font-size: 1rem; /* Tamaño de fuente estándar */
    background: transparent;
    color: var(--color-texto-principal);
}

.search-bar-v2 input::placeholder {
    color: var(--color-texto-secundario);
    opacity: 0.7;
}

.search-bar-v2 i {
    color: var(--color-primario); /* Icono del color de la marca */
    margin-right: 10px;
    font-size: 1.1rem; /* Tamaño del icono */
}
body.dark-mode .search-bar-v2 input:focus {
    box-shadow: 0 0 0 4px rgba(32, 201, 151, 0.2);
}


/* --- FILTROS DE CATEGORÍA --- */
.category-filters-v2 {
    display: flex;
    justify-content: center;
    flex-wrap: wrap; /* Permite que los filtros pasen a la siguiente línea en móviles */
    gap: 0.75rem;
}

.category-filters-v2 a {
    text-decoration: none;
    color: var(--color-texto-secundario);
    background-color: var(--color-fondo);
    padding: 0.6rem 1.2rem;
    border: 1px solid var(--color-fondo);
    border-radius: 20px;
    transition: all 0.3s ease;
    font-weight: 600;
}

body.dark-mode .category-filters-v2 a {
    background-color: var(--color-superficie);
    border-color: var(--color-superficie);
}


.category-filters-v2 a:hover {
    color: var(--color-primario);
    border-color: var(--color-primario);
    transform: translateY(-2px);
}

.category-filters-v2 a.active {
    background-color: var(--color-primario);
    color: #fff;
    border-color: var(--color-primario);
}

/* --- SECCIÓN DE PROMOCIÓN --- */
.seccion-promocion {
    padding: 4rem 0;
    text-align: center;
    background: linear-gradient(45deg, var(--color-primario), #007bff);
    color: #fff;
}
.promo-content h2 {
    font-size: 2.5rem;
    margin: 0 0 1rem 0;
    color: #fff;
    text-shadow: 0 1px 3px rgba(0,0,0,0.2);
}
.promo-content p {
    font-size: 1.2rem;
    color: rgba(255,255,255,0.9);
    margin-bottom: 2rem;
}
.promo-content .boton {
    background-color: #fff;
    color: var(--color-primario);
    border: 2px solid #fff;
}
.promo-content .boton:hover {
    background-color: transparent;
    color: #fff;
}

/* --- SECCIÓN MÁS VENDIDOS --- */
.grid-productos-destacados {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));
    gap: 2rem;
    margin-top: 2rem;
}
/* La rejilla usa el mismo .producto-card que el carrusel, así que no se necesita CSS extra */

/* --- RESPONSIVIDAD PARA FILTROS --- */
@media (max-width: 768px) {
    .filtros-container {
        flex-direction: column;
        align-items: stretch;
    }
    .search-bar {
        max-width: none;
    }
}









/* ================================================================= */
/* CSS v4: SECCIÓN DE OFERTAS MODO CLARO CON FONDO DE COLOR SUAVE */
/* ================================================================= */

/* 1. La sección principal con el fondo de color suave */
.seccion-ofertas-claro {
    padding: 4rem 0;
    /* Mantenemos el color de fondo claro base de tu tema */
    background-color: var(--color-fondo); 
    position: relative;
    overflow: hidden;
}

/* ▼▼▼ ESTOS SON LOS NUEVOS ESTILOS PARA EL FONDO ROJIZO ▼▼▼ */
.glow-claro {
    position: absolute;
    border-radius: 50%;
    /* Un desenfoque muy grande para que sea una mancha suave */
    filter: blur(150px); 
    z-index: 0;
}

.glow-rojo {
    bottom: -40%;
    right: -40%;
    width: 800px;
    height: 800px;
    /* El color rojo con una opacidad muy baja para que sea sutil */
    background: rgba(231, 76, 60, 0.08); 
}
/* ▲▲▲ FIN DE LOS NUEVOS ESTILOS DE FONDO ▲▲▲ */


/* ▼▼▼ REGLAS AÑADIDAS PARA EL COLOR DE LOS TEXTOS ▼▼▼ */
.seccion-ofertas-claro .titulo-seccion {
    color: var(--color-texto-principal); /* Color de texto oscuro */
    position: relative;
    z-index: 1;
}

.seccion-ofertas-claro .subtitulo-seccion {
    color: var(--color-texto-secundario); /* Un gris oscuro para el subtítulo */
    position: relative;
    z-index: 1;
}
/* ▲▲▲ FIN DE LAS REGLAS DE COLOR DE TEXTO ▲▲▲ */




/* El resto de estilos de la tarjeta se mantienen igual que en la v3 */
.oferta-card-v2 {
    border-radius: 16px;
    overflow: hidden;
    position: relative;
    background: var(--color-superficie);
    border: 1px solid #e0e0e0;
    box-shadow: var(--sombra-caja);
    transition: transform 0.3s ease, box-shadow 0.3s ease;
}

.oferta-card-v2:hover {
    transform: translateY(-10px);
    box-shadow: 0 12px 25px rgba(0, 0, 0, 0.12);
}



.oferta-card-v2 .producto-card-imagen img {
    width: 100%;
    height: 100px;
    object-fit: cover;
    transition: transform 0.3s ease;
}

.oferta-card-v2:hover .producto-card-imagen img {
    transform: scale(1.05);
}

.oferta-card-v2 .producto-card-contenido {
    padding: 1.5rem;
}

.oferta-card-v2 .producto-card-titulo {
     color: var(--color-texto-principal);
}

.oferta-card-v2 .producto-card-desc {
    color: var(--color-texto-secundario);
}

/* Responsividad sin cambios */
@media (max-width: 992px) {
    .ofertas-grid-v2 {
        grid-template-columns: repeat(2, 1fr);
    }
}
@media (max-width: 768px) {
    .ofertas-grid-v2 {
        grid-template-columns: 1fr;
    }
}

/* Estilos para los controles del nuevo carrusel de ofertas */
.carrusel-ofertas {
    padding-bottom: 3rem; /* Espacio para la paginación */
}

.carrusel-ofertas .swiper-button-next,
.carrusel-ofertas .swiper-button-prev {
    color: var(--color-primario); /* Usa tu color principal */
    top: 50%; /* Centra las flechas verticalmente */
    transform: translateY(-150%); /* Sube las flechas para que no estorben a las tarjetas */
}

.carrusel-ofertas .swiper-pagination-bullet-active {
    background-color: var(--color-primario); /* Usa tu color principal */
}















/* ======================================================= */
/* ESTILOS PARA LA PÁGINA DE CONTACTO MEJORADA */
/* ======================================================= */

.seccion-contacto-mejorada {
    padding: 3rem 0;
}

.titulo-seccion-wrapper {
    text-align: center;
    margin-bottom: 3rem;
}

.contacto-grid-mejorado {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 3rem;
    align-items: flex-start;
}

.contacto-info-wrapper h3,
.formulario-flotante h3 {
    margin-top: 0;
    margin-bottom: 2rem;
    font-size: 1.5rem;
}

.info-item {
    display: flex;
    align-items: flex-start;
    margin-bottom: 1.5rem;
    color: var(--color-texto-secundario);
}

.info-item i {
    font-size: 1.2rem;
    color: var(--color-primario);
    margin-right: 1.2rem;
    width: 20px;
    text-align: center;
    margin-top: 4px;
}

/* Estilos para el mapa de Google */
.mapa-contenedor {
    margin-top: 2rem;
    border-radius: 12px;
    overflow: hidden;
    box-shadow: var(--sombra-caja);
    border: 1px solid rgba(0,0,0,0.05);
}

.mapa-contenedor iframe {
    width: 100%;
    height: 300px;
    display: block;
    filter: grayscale(80%); /* Efecto blanco y negro sutil */
    transition: filter 0.3s ease;
}

.mapa-contenedor iframe:hover {
    filter: grayscale(0%); /* Vuelve al color original al pasar el ratón */
}

/* Formulario con etiquetas flotantes */
.formulario-flotante {
    background-color: var(--color-superficie);
    
    border-radius: 12px;
    box-shadow: var(--sombra-caja);
}

.form-group-flotante {
    position: relative;
    margin-bottom: 2rem;
}

.form-input-flotante {
    width: 100%;
    padding: 1rem;
    border: 1px solid #ccc;
    border-radius: 8px;
    background-color: var(--color-fondo);
    color: var(--color-texto-principal);
    font-family: 'Nunito', sans-serif;
    font-size: 1rem;
    box-sizing: border-box;
    transition: border-color 0.3s;
}

.form-label-flotante {
    position: absolute;
    top: 1rem;
    left: 1rem;
    color: var(--color-texto-secundario);
    pointer-events: none; /* Permite hacer clic a través de la etiqueta */
    transition: all 0.3s ease;
    background-color: var(--color-fondo);
    padding: 0 0.3rem;
}

.form-input-flotante:focus {
    outline: none;
    border-color: var(--color-primario);
}

/* La magia de la etiqueta flotante */
.form-input-flotante:focus + .form-label-flotante,
.form-input-flotante:not(:placeholder-shown) + .form-label-flotante {
    top: -0.75rem; /* Sube la etiqueta */
    left: 0.75rem;
    font-size: 0.8rem;
    color: var(--color-primario);
}

.boton-enviar {
    width: 100%;
    display: flex;
    justify-content: center;
    align-items: center;
}
.boton-enviar i {
    margin-left: 0.5rem;
    transition: transform 0.3s ease;
}
.boton-enviar:hover i {
    transform: translateX(5px);
}


/* Estilos para el Mensaje Emergente (Modal) */
.modal-overlay {
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background-color: rgba(0, 0, 0, 0.6);
    display: flex;
    justify-content: center;
    align-items: center;
    z-index: 1000;
    opacity: 0;
    transition: opacity 0.3s ease;
}

.modal-content {
    background-color: var(--color-superficie);
    padding: 2.5rem;
    border-radius: 12px;
    box-shadow: 0 5px 25px rgba(0,0,0,0.2);
    text-align: center;
    max-width: 450px;
    width: 90%;
    position: relative;
    transform: scale(0.9);
    transition: transform 0.3s ease;
}

.modal-close-button {
    position: absolute;
    top: 15px;
    right: 20px;
    background: none;
    border: none;
    font-size: 1.8rem;
    color: var(--color-texto-secundario);
    cursor: pointer;
}

.modal-icon {
    font-size: 4rem;
    color: #28a745; /* Un verde de éxito */
    margin-bottom: 1rem;
}

.modal-content h2 {
    color: var(--color-texto-principal);
    margin: 0 0 0.5rem 0;
}
.modal-content p {
    color: var(--color-texto-secundario);
    line-height: 1.6;
}

/* Diseño Responsivo */
@media (max-width: 850px) {
    .contacto-grid-mejorado {
        grid-template-columns: 1fr;
    }
}









/* ============================================= */
/* CSS DEFINITIVO PARA HEADER Y NAVEGACIÓN */
/* ============================================= */

/* --- Header y Navegación (Base para Escritorio) --- */
.header {
    background: var(--color-superficie);
    box-shadow: var(--sombra-caja);
    padding: 1rem 0;
    position: sticky;
    top: 0;
    z-index: 100;
    transition: background-color 0.3s;
}

.nav {
    display: flex;
    justify-content: space-between;
    align-items: center;
}

.logo {
    font-size: 1.5rem;
    font-weight: 700;
    color: var(--color-primario);
    text-decoration: none;
}

/* El contenedor del menú en escritorio es transparente y simple */
.nav-menu {
    display: flex;
    align-items: center;
}

/* La lista de enlaces en escritorio se muestra horizontal */
.nav-links {
    list-style: none;
    padding: 0;
    margin: 0;
    display: flex;
    align-items: center;
    gap: 1.5rem;
}

.nav-link { /* Estilo para la etiqueta <a> */
    text-decoration: none;
    color: var(--color-texto-principal);
    font-weight: 600;
    transition: color 0.3s;
    display: flex; /* Para alinear íconos si los hubiera en escritorio */
    align-items: center;
}

.nav-link:hover {
    color: var(--color-primario);
}

/* Ocultamos los elementos solo para móvil en la vista de escritorio */
.nav-header,
.nav-close,
.nav-footer,
.nav-toggle {
    display: none;
}
.nav-link i { /* Ocultamos los iconos del menú de escritorio */
    display: none;
}


/* --- Vista Móvil (Menú Lateral) --- */
@media screen and (max-width: 768px) {
    /* Mostramos el botón de hamburguesa */
    .nav-toggle {
        display: block;
        font-size: 1.5rem;
        cursor: pointer;
        background: none;
        border: none;
        color: var(--color-primario);
    }

    /* Convertimos .nav-menu en el panel lateral */
    .nav-menu {
        position: fixed;
        top: 0;
        right: -100%;
        width: 80%;
        max-width: 320px;
        height: 100vh;
        background-color: var(--color-superficie);
        padding: 1.5rem;
        z-index: 101;
        box-shadow: -5px 0 15px rgba(0,0,0,0.1);
        transition: right 0.4s ease-in-out;
        /* Re-definimos display para el layout interno del panel */
        display: flex;
        flex-direction: column;
    }

    .nav-menu.show-menu {
        right: 0;
    }

    /* Mostramos los elementos del menú lateral */
    .nav-header,
    .nav-close,
    .nav-footer {
        display: block; /* Hacemos visibles el header y footer del menú */
    }
    .nav-header {
        display: flex;
        justify-content: space-between;
        align-items: center;
        margin-bottom: 2rem;
        padding-bottom: 1rem;
        border-bottom: 1px solid var(--color-fondo);
    }
    .nav-close:hover {
        color: var(--color-primario);
        transform: rotate(90deg);
    }

    /* ▼▼▼ LA REGLA MÁS IMPORTANTE ▼▼▼ */
    /* Aquí nos aseguramos que la lista de enlaces se vea y sea vertical */
    .nav-links {
        display: flex;
        flex-direction: column;
        align-items: flex-start;
        gap: 0; /* Quitamos el gap horizontal de escritorio */
        flex-grow: 1; /* Para empujar el footer hacia abajo */
    }

    /* Estilos para cada enlace dentro del menú lateral */
    .nav-link {
        color: var(--color-texto-secundario);
        font-weight: 600;
        font-size: 1.1rem;
        padding: 1rem 0.5rem;
        width: 100%;
        border-radius: 8px;
    }
    .nav-link i { /* Mostramos los iconos en el menú lateral */
        display: inline-block;
        margin-right: 1rem;
        width: 20px;
        text-align: center;
    }
    .nav-link:hover {
        background-color: var(--color-fondo);
        color: var(--color-primario);
    }
    .nav-link.active {
        background-color: var(--color-primario);
        color: #fff;
    }
    .nav-link.active i {
        color: #fff;
    }

    /* Estilos del footer del menú */
    .nav-footer { padding-top: 1rem; }
    .nav-divider { border: none; height: 1px; background-color: var(--color-fondo); margin: 0 0 1rem 0; }
    .nav-social { display: flex; justify-content: center; gap: 1.5rem; }
    .social-link { font-size: 1.2rem; color: var(--color-texto-secundario); transition: color 0.3s, transform 0.3s; }
    .social-link:hover { color: var(--color-primario); transform: translateY(-3px); }
}














/* ================================================== */
/* ========= ESTILOS PARA SECCIÓN CARRUSEL 3D ========= */
/* ================================================== */
/* ============================================= */
/* ========= DISEÑOS DE TÍTULOS MODERNOS ========= */
/* ============================================= */

/* --- Opción 1: Título con Efecto Gradiente --- */
.titulo-gradiente {
  font-size: clamp(2.5rem, 5vw, 4rem); /* Tamaño de fuente adaptable */
  font-weight: 700;
  text-align: center;
  margin-bottom: 1.5rem;
  
  /* La magia del gradiente */
  background: linear-gradient(45deg, var(--color-primario, #009688), var(--light-blue, #38BDF8));
  -webkit-background-clip: text;
  background-clip: text;
  -webkit-text-fill-color: transparent;
}


/* --- Opción 2: Título con Línea de Acento --- */
.titulo-con-linea {
  font-size: 2.2rem;
  font-weight: 700;
  text-align: center;
  margin-bottom: 3rem; /* Más espacio inferior para la línea */
  color: var(--color-texto-principal, #212529);
  position: relative;
}

/* La línea de acento debajo del título */
.titulo-con-linea::after {
  content: '';
  display: block;
  width: 80px;  /* Ancho de la línea */
  height: 4px;   /* Grosor de la línea */
  background: var(--color-primario, #009688); /* Color de la línea */
  border-radius: 2px;
  
  /* Centrar la línea debajo del título */
  position: absolute;
  left: 50%;
  transform: translateX(-50%);
  bottom: -1rem; /* Distancia entre el texto y la línea */
}

/* Ajustes para modo oscuro */
body.dark-mode .titulo-con-linea {
    color: var(--text-primary, #E5E7EB);
}
/* Contenedor principal de la sección */
.seccion-carrusel-3d {
    position: relative;
    width: 100%;
    min-height: 80vh;
    padding: 2rem 0;
    box-sizing: border-box;
    display: flex;
    justify-content: center;
    align-items: center;
    overflow: hidden;

    /* --- INICIO DE LOS CAMBIOS --- */

    /* 1. La imagen de fondo que tú elijas */
    background-image: url('URL_DE_TU_IMAGEN.jpg'); /* <-- Reemplaza esto con la URL de tu imagen */

    /* 2. Propiedades para que la imagen se vea bien */
    background-size: cover; /* La imagen cubre todo el espacio sin deformarse */
    background-position: center; /* Centra la imagen */
    background-attachment: fixed; /* Efecto Parallax: la imagen se queda fija al hacer scroll */
    padding-bottom: 790px; /* Aumentamos el espacio de 50px a 80px */

    /* --- FIN DE LOS CAMBIOS --- */
}
/* Contenedor del carrusel, adaptado */
.carousel-container-component {
    width: 100%;
    height: 100%;
    position: absolute;
    top: 0; left: 0;
    perspective: 3000px;
}

.carousel {
    position: absolute;
    width: 100%;
    height: 100%;
    transform-style: preserve-3d;
    transition: transform 0.8s cubic-bezier(0.77, 0, 0.175, 1);
    cursor: grab;
}

.carousel.dragging {
    cursor: grabbing;
}

.carousel__cell {
    position: absolute;
    width: 45vw; /* Ancho de la tarjeta */
    max-width: 600px;
    height: 55vh; /* Alto de la tarjeta */
    left: 0; right: 0; margin: auto; /* Centrado horizontal */
    top: 12.5vh;
    border-radius: 16px;
    overflow: hidden;
    display: flex;
    align-items: flex-end;
    text-decoration: none;
    color: #ffffff;
    box-shadow: 0 15px 50px rgba(0,0,0,0.5);
    border: 1px solid rgba(255, 255, 255, 0.1);
    background: #1F2937;
    
}

/* Estilos del contenido de la tarjeta */
.carousel__cell::before {
    content: '';
    position: absolute;
    top: 0; left: 0; width: 100%; height: 100%;
    background-image: var(--bg-image);
    background-size: cover;
    background-position: center;
    opacity: 0.4;
    transition: opacity 0.5s, transform 0.5s;
    z-index: 1;
}

.carousel__cell .content {
    position: relative; z-index: 2; padding: 2rem;
    width: 100%; box-sizing: border-box; text-align: left;
    background: linear-gradient(to top, rgba(0,0,0,0.95) 20%, transparent 100%);
    transition: background 0.5s ease;
}

.carousel__cell h3 {
    font-size: clamp(1.5rem, 3vw, 2.5rem);
    margin: 0 0 0.5rem 0;
        color: #ffffff;

}

.card-description, .card-cta {
    opacity: 0;
    transform: translateY(20px);
    transition: opacity 0.4s ease-out, transform 0.4s ease-out;
}

.card-description {
    font-size: clamp(0.9rem, 1.5vw, 1rem);
    color: #ffffff;
    margin-bottom: 1.5rem;
    transition-delay: 0.1s;
}

.card-cta {
    display: inline-block;
    background-color: #38BDF8;
    color: #0B1120;
    padding: 0.75rem 1.5rem;
    border-radius: 50px;
    text-decoration: none;
    font-weight: 600;
    transition-delay: 0.2s;
}

.carousel__cell:hover .content {
     background: linear-gradient(to top, rgba(0,0,0,1) 40%, transparent 100%);
}

.carousel__cell:hover .card-description,
.carousel__cell:hover .card-cta {
    opacity: 1;
    transform: translateY(0);
}

.card-cta:hover {
    transform: scale(1.05) !important;
    box-shadow: 0 0 20px rgba(56, 189, 248, 0.5);
}

/* Flechas de Navegación */
.nav-button {
    position: absolute; top: 50%; transform: translateY(-50%); z-index: 20;
    background: rgba(31, 41, 55, 0.7); border: 1px solid rgba(255, 255, 255, 0.1);
    color: #fff; border-radius: 50%; width: 55px; height: 55px; cursor: pointer;
    transition: all 0.3s ease; display: flex; justify-content: center; align-items: center;
}
.nav-button:hover {
    background-color: #38BDF8; transform: translateY(-50%) scale(1.1);
}
.nav-button svg { width: 30px; height: 30px; fill: currentColor; }
.prev-button { left: 5%; }
.next-button { right: 5%; }

/* Responsividad para la sección */
@media (max-width: 768px) {
    .carousel__cell { width: 75vw; height: 60vh; left: 0; right: 0; top: 10vh; }
    .prev-button { left: 2%; }
    .next-button { right: 2%; }
    .card-description, .card-cta { opacity: 1; transform: translateY(0); }
}


/* Estilo para el logo/título dentro del menú */
.logo-menu {
    font-size: 1.5rem;
    font-weight: 700;
    color: var(--color-primario);
    text-decoration: none;
    margin-right: auto; /* Empuja el botón 'X' al extremo derecho */
}
/* Estilo para el botón de cerrar 'X' */
.nav-close {
    background: none;
    border: none;
    color: var(--color-texto-secundario);
    font-size: 1.8rem;
    cursor: pointer;
    padding: 0.5rem; /* Área de clic más grande */
    line-height: 1;
    opacity: 0.8;
    transition: all 0.3s ease;
}

.nav-close:hover {
    color: var(--color-primario);
    opacity: 1;
    transform: rotate(90deg);
}

/* Contenedor del pie del menú */
.nav-footer {
    padding-top: 1rem;
    margin-top: auto; /* Empuja el footer a la parte inferior del menú */
}

/* Línea divisora sobre las redes sociales */
.nav-divider {
    border: none;
    height: 1px;
    background-color: var(--color-fondo);
    margin: 0 0 1.5rem 0; /* Espaciado */
}

/* Contenedor de los iconos sociales */
.nav-social {
    display: flex;
    justify-content: center;
    gap: 2rem; /* Espacio entre los iconos */
}

/* Estilo para cada enlace de red social */
.social-link {
    font-size: 1.3rem; /* Tamaño del icono */
    color: var(--color-texto-secundario);
    transition: color 0.3s, transform 0.3s;
}

.social-link:hover {
    color: var(--color-primario);
    transform: translateY(-3px); /* Efecto de "levantarse" al pasar el ratón */
}
/* ======================================================= */
/* ========= ESTILOS PARA SECCIONES DE INFO PREMIUM ========= */
/* ======================================================= */

.seccion-info-premium {
    /* Fondo alterno para diferenciar las secciones */
    background-color: var(--color-superficie);
    overflow: hidden; /* Evita que los elementos decorativos se desborden */
}
.seccion-info-premium.seccion-info-premium--inverso {
    background-color: var(--color-fondo);
}

/* La nueva cuadrícula de 12 columnas que permite la superposición */
.info-premium-grid {
    display: grid;
    grid-template-columns: repeat(12, 1fr);
    align-items: center;
    gap: 2rem;
}

/* --- Contenido de Texto --- */
.info-premium-contenido {
    grid-column: 8 / 13; /* Ocupa desde la columna 7 hasta la 12 */
    grid-row: 1 / 2;
    position: relative;
    z-index: 2; /* Se asegura de que el texto esté sobre la imagen */
    padding: 2rem;
}
/* Invertimos la posición de la columna para la sección inversa */
.seccion-info-premium--inverso .info-premium-contenido {
    grid-column: 1 / 7;
}

/* "Eyebrow" o pre-título */
.eyebrow-texto {
    display: block;
    font-size: 0.9rem;
    font-weight: 700;
    color: var(--color-primario);
    margin-bottom: 0.5rem;
    letter-spacing: 1px;
    text-transform: uppercase;
}

.titulo-seccion-info {
    font-size: 2.5rem;
    margin-top: 0;
    margin-bottom: 1rem;
    color: var(--color-texto-principal);
}

/* Lista de características con iconos */
.lista-features {
    list-style: none;
    padding: 0;
    margin: 1.5rem 0;
}
.lista-features li {
    display: flex;
    align-items: center;
    margin-bottom: 0.75rem;
    color: var(--color-texto-secundario);
}
.lista-features i {
    color: var(--color-primario);
    margin-right: 0.75rem;
}

/* --- Wrapper de la Imagen --- */
.info-premium-imagen-wrapper {
    grid-column: 1 / 8; /* Ocupa desde la columna 1 hasta la 8, creando el solapamiento */
    grid-row: 1 / 2;
    position: relative;
    padding: 2rem;
}
/* Invertimos la posición de la columna para la sección inversa */
.seccion-info-premium--inverso .info-premium-imagen-wrapper {
    grid-column: 6 / 13;
}

.info-premium-imagen-wrapper img {
    width: 100%;
    height: auto;
    display: block;
    border-radius: 12px;
    box-shadow: 0 20px 40px rgba(0,0,0,0.15);
    position: relative;
    z-index: 1; /* Para que esté sobre el fondo decorativo */
}

/* Fondo decorativo detrás de la imagen */
.imagen-fondo-decorativo {
    position: absolute;
    top: 0;
    left: 0;
    width: 80%;
    height: 90%;
    background: linear-gradient(45deg, var(--color-primario), var(--color-primario-hover));
    opacity: 0.1;
    border-radius: 12px;
    z-index: 0;
}
.seccion-info-premium--inverso .imagen-fondo-decorativo {
    left: auto;
    right: 0;
}


/* --- Diseño Responsivo para tablets y móviles --- */
@media (max-width: 992px) {
    .info-premium-grid {
        grid-template-columns: 1fr; /* Apilamos las columnas */
    }
    
    .info-premium-contenido,
    .seccion-info-premium--inverso .info-premium-contenido,
    .info-premium-imagen-wrapper,
    .seccion-info-premium--inverso .info-premium-imagen-wrapper {
        grid-column: 1 / -1; /* Hacemos que cada elemento ocupe todo el ancho */
    }

    .seccion-info-premium--inverso .info-premium-contenido {
        grid-row: 2 / 3; /* En la versión inversa, el texto va después de la imagen */
    }

    .titulo-seccion-info {
        font-size: 2rem;
    }
    /* --- Añade estas reglas dentro de tu @media (max-width: 992px) --- */

/* Hacemos que la imagen no tenga un padding extra en móvil */
.info-premium-imagen-wrapper {
    padding: 0;
}

/* Convertimos el bloque de contenido en una tarjeta legible */
.info-premium-contenido {
    background-color: var(--color-superficie); /* Le damos un fondo sólido */
    padding: 2rem; /* Añadimos espaciado interno */
    border-radius: 12px; /* Redondeamos las esquinas */
    box-shadow: 0 10px 30px rgba(0,0,0,0.1); /* Le damos sombra para que resalte */
    margin: -3rem 1rem 0 1rem; /* Margen negativo para que se superponga un poco a la imagen */
}

/* En la versión inversa, el texto va después y no necesita el margen negativo superior */
.seccion-info-premium--inverso .info-premium-contenido {
    margin: 0 1rem;
}
}


/* ======================================================= */
/* === NUEVOS ESTILOS PARA BLOG MINIMALISTA Y ANIMADO === */
/* ======================================================= */
.seccion-blog-collage {
    background-color: var(--color-fondo);
    padding: 4rem 0; /* Ajustar el padding general de la sección */
}
.blog-collage-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(280px, 1fr)); /* Ajustar el tamaño mínimo de las columnas */
    gap: 1.5rem;
}
.collage-item {
    position: relative;
    border-radius: 8px; /* Bordes ligeramente redondeados */
    overflow: hidden;
    display: flex;
    flex-direction: column;
    justify-content: flex-end;
    /* box-shadow: 0 2px 8px rgba(0,0,0,0.06); /* Sombra muy sutil */ 
    transition: transform 0.3s ease-out, opacity 0.4s ease-out;
    text-decoration: none;
    background-color: var(--color-superficie); /* Fondo blanco o de la superficie */
}
body.dark-mode .collage-item {
    background-color: var(--color-superficie); /* Fondo oscuro para modo oscuro */
}
.collage-item:hover {
    transform: translateY(-5px); /* Ligero movimiento al hacer hover */
    /* box-shadow: 0 8px 16px rgba(0,0,0,0.1); */
}

/* Tamaños de los items en el grid (se mantienen) */
.collage-item-large {
    grid-column: span 2;
    grid-row: span 2;
}
.collage-item-tall {
    grid-row: span 2;
}

/* Imagen de fondo */
.collage-item img {
    position: absolute;
    top: 0; left: 0;
    width: 100%; height: 100%;
    object-fit: cover;
    transition: transform 0.5s ease-in-out;
    z-index: 1;
    opacity: 0.9; /* Ligeramente transparente para el overlay */
}
.collage-item:hover img {
    transform: scale(1.05);
    opacity: 1;
}

/* Capa oscura muy sutil */
.collage-item-overlay {
    position: relative;
    z-index: 2;
    padding: 1.2rem 1.5rem;
    /* background: linear-gradient(to top, rgba(0,0,0,0.5) 0%, transparent 100%); */
    color: var(--color-texto-principal); /* Texto principal por defecto */
    transition: background 0.3s ease;
    text-align: left; /* Alineación del texto a la izquierda */
}
body.dark-mode .collage-item-overlay {
    color: var(--color-texto-principal); /* Texto principal en modo oscuro */
}
.collage-item:hover .collage-item-overlay {
    /* background: linear-gradient(to top, rgba(0,0,0,0.7) 0%, transparent 100%); */
}

.collage-item-category {
    display: inline-block;
    font-size: 0.7rem;
    font-weight: 600;
    color: var(--color-texto-secundario); /* Color secundario para la categoría */
    background-color: transparent;
    padding: 0.1rem 0.4rem;
    border-radius: 4px;
    margin-bottom: 0.5rem;
    border: 1px solid var(--color-texto-secundario); /* Borde sutil */
}
.collage-item h3 {
    color: var(--color-texto-principal); /* Texto principal para el título */
    font-size: 1.1rem;
    margin: 0 0 0.3rem 0;
    line-height: 1.3;
}
.collage-item p {
    color: var(--color-texto-secundario);
    font-size: 0.9rem;
    line-height: 1.5;
    margin-bottom: 0;
}

/* --- ESTILOS PARA EL REPRODUCTOR DE VIDEO PROPIO --- */
.collage-item-video {
    background-color: #000;
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
}
.collage-video-bg {
    width: 100%;
    height: 100%;
    object-fit: cover;
    z-index: 0;
}
.video-controls {
    position: absolute;
    bottom: 0;
    left: 0;
    width: 100%;
    background-color: rgba(0, 0, 0, 0.7);
    color: #fff;
    padding: 0.5rem;
    display: flex;
    justify-content: space-between;
    align-items: center;
    z-index: 3;
    opacity: 0;
    transition: opacity 0.3s ease;
}
.collage-item-video:hover .video-controls {
    opacity: 1;
}
.video-controls button {
    background: none;
    border: none;
    color: #fff;
    cursor: pointer;
    font-size: 1rem;
    padding: 0.3rem 0.5rem;
}
.video-link-overlay {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    display: flex;
    justify-content: center;
    align-items: center;
    z-index: 2;
    opacity: 0;
    transition: opacity 0.3s ease;
}
.collage-item-video:hover .video-link-overlay {
    opacity: 1;
    background-color: rgba(0, 0, 0, 0.5);
}
.video-link {
    color: #fff;
    text-decoration: none;
    padding: 0.8rem 1.5rem;
    border: 1px solid #fff;
    border-radius: 6px;
    font-weight: bold;
    transition: background-color 0.3s ease, color 0.3s ease;
}
.video-link:hover {
    background-color: var(--color-primario);
    border-color: var(--color-primario);
}

/* --- ANIMACIONES DE APARICIÓN SUAVES --- */
.blog-collage-grid .collage-item {
    opacity: 0;
    transform: translateY(30px); /* Desplazamiento inicial */
    transition: opacity 0.5s ease-out, transform 0.5s ease-out;
}

.seccion-blog-collage.visible .collage-item {
    opacity: 1;
    transform: translateY(0);
}

/* Retrasos escalonados para la animación */
.seccion-blog-collage.visible .collage-item:nth-child(1) { transition-delay: 0.2s; }
.seccion-blog-collage.visible .collage-item:nth-child(2) { transition-delay: 0.3s; }
.seccion-blog-collage.visible .collage-item:nth-child(3) { transition-delay: 0.4s; }
.seccion-blog-collage.visible .collage-item:nth-child(4) { transition-delay: 0.5s; }
.seccion-blog-collage.visible .collage-item:nth-child(5) { transition-delay: 0.6s; }
.seccion-blog-collage.visible .collage-item:nth-child(6) { transition-delay: 0.7s; }
.seccion-blog-collage.visible .collage-item:nth-child(7) { transition-delay: 0.8s; }
.seccion-blog-collage.visible .collage-item:nth-child(8) { transition-delay: 0.9s; }
.seccion-blog-collage.visible .collage-item:nth-child(9) { transition-delay: 1.0s; }
/* Puedes continuar añadiendo más para más elementos */

/* --- RESPONSIVIDAD DEL COLLAGE (ligeramente modificado) --- */
@media (max-width: 992px) {
    .blog-collage-grid {
        grid-template-columns: repeat(auto-fit, minmax(300px, 1fr)); /* Ajuste para tablets */
    }
    .collage-item-large {
        grid-column: span 1;
        grid-row: span 1;
    }
    .collage-item-tall {
        grid-row: span 1;
    }
}

@media (max-width: 768px) {
    .blog-collage-grid {
        grid-template-columns: 1fr; /* Una sola columna en móviles */
    }
    /* Aspect ratio para mantener una altura */
    .collage-item {
        aspect-ratio: 16/9;
    }
}
/* ======================================================= */
/* === FIN DE NUEVOS ESTILOS PARA BLOG MINIMALISTA === */
/* ======



/* ======================================================= */
/* ========= BANNER DE PUBLICIDAD INICIAL ESTILOS ========= */
/* ======================================================= */

.publicity-banner {
    position: fixed;
    top: -300px; /* Inicia oculto fuera de la pantalla */
    left: 50%;
    transform: translateX(-50%);
    width: 90%;
    max-width: 900px;
    background-color: var(--color-superficie);
    color: var(--color-texto-principal);
    border-radius: 16px;
    box-shadow: 0 10px 40px rgba(0, 0, 0, 0.2);
    display: flex;
    align-items: center;
    z-index: 1001; /* Debe estar por encima de todo */
    transition: top 0.8s cubic-bezier(0.25, 0.46, 0.45, 0.94); /* Animación suave */
    overflow: hidden;
    margin-top: 20px;
}

/* Clase que se añade con JS para mostrar el banner */
.publicity-banner.show-banner {
    top: 0;
}

.publicity-banner__content {
    display: flex;
    width: 100%;
    align-items: center;
}

.publicity-banner__text {
    padding: 2rem;
    flex: 1;
}

.publicity-banner__text h3 {
    margin: 0 0 0.5rem 0;
    font-size: 1.8rem;
    color: var(--color-texto-principal);
}

.publicity-banner__text p {
    margin: 0 0 1.5rem 0;
    color: var(--color-texto-secundario);
}

.publicity-banner__image {
    flex-basis: 40%;
    height: 100%;
}

.publicity-banner__image img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    display: block;
}

.publicity-banner__close {
    position: absolute;
    top: 10px;
    right: 10px;
    background: transparent;
    border: none;
    color: var(--color-texto-secundario);
    font-size: 1.5rem;
    cursor: pointer;
    padding: 0.5rem;
    line-height: 1;
    transition: color 0.3s, transform 0.3s;
}

.publicity-banner__close:hover {
    color: var(--color-primario);
    transform: rotate(90deg);
}


/* --- RESPONSIVIDAD DEL BANNER --- */
@media (max-width: 768px) {
    .publicity-banner {
        flex-direction: column;
        max-width: 95%;
        top: -400px; /* Ajusta la posición inicial para la altura mayor */
    }

    .publicity-banner__content {
        flex-direction: column-reverse; /* La imagen aparece arriba del texto */
    }

    .publicity-banner__image {
        width: 100%;
        height: 150px;
        flex-basis: auto;
    }

    .publicity-banner__text {
        text-align: center;
        padding: 1.5rem;
    }

    .publicity-banner__text h3 {
        font-size: 1.5rem;
    }
}





/* ======================================================= */
/* === CSS PARA DIAPOSITIVA DE CLIENTES (CON ANIMACIÓN) === */
/* ======================================================= */

/* 1. Definimos la nueva animación de flote, más sutil */
@keyframes gentleFloatAnimation {
    0% { transform: translateY(0px) rotate(-0.5deg); }
    50% { transform: translateY(-8px) rotate(0.5deg); } /* Movimiento más corto */
    100% { transform: translateY(0px) rotate(-0.5deg); }
}

/* Contenedor principal del contenido de la diapositiva */
.clientes-slide-content {
    display: flex;
    flex-direction: column;
    align-items: center;
    text-align: center;
    width: 100%;
    max-width: 1200px;
}

/* El contenedor de la rejilla de logos dentro del slide */
.logo-grid-container-slide {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(140px, 1fr));
    gap: 2.5rem;
    width: 100%;
    justify-content: center;
}

/* El "cuadrito" individual del logo dentro del slide */
.client-square-slide {
    width: 140px;
    height: 140px;
    background-color: var(--color-fondo);
    border: 1px solid rgba(0,0,0,0.05);
    border-radius: 16px;
    display: flex;
    justify-content: center;
    align-items: center;
    padding: 1rem;
    box-shadow: 0 5px 15px rgba(0,0,0,0.08);
    transition: transform 0.3s ease, box-shadow 0.3s ease;
    
    /* 2. Aplicamos la nueva animación a todos los logos */
    animation-name: gentleFloatAnimation;
    animation-timing-function: ease-in-out;
    animation-iteration-count: infinite;
}

/* 3. Mantenemos el efecto hover para que se detenga y resalte */
.client-square-slide:hover {
    animation-play-state: paused; /* Pausamos la animación al pasar el ratón */
    transform: scale(1.1);
    box-shadow: 0 12px 30px rgba(0,0,0,0.15);
    z-index: 10;
}

/* 4. Asignamos diferentes duraciones para un movimiento asincrónico */
.client-square-slide:nth-child(2) { animation-duration: 6s; }
.client-square-slide:nth-child(3) { animation-duration: 8s; animation-delay: -2s; }
.client-square-slide:nth-child(4) { animation-duration: 5.5s; animation-delay: -1s; }
.client-square-slide:nth-child(5) { animation-duration: 7s; }
.client-square-slide:nth-child(6) { animation-duration: 6.5s; animation-delay: -3s; }

.client-square-slide img {
    max-width: 85%;
    max-height: 85%;
    filter: grayscale(100%);
    opacity: 0.7;
    transition: filter 0.3s, opacity 0.3s;
}

.client-square-slide:hover img {
    filter: grayscale(0%);
    opacity: 1;
}

body.dark-mode .client-square-slide {
    border-color: rgba(255,255,255,0.1);
}
body.dark-mode .client-square-slide img {
    filter: grayscale(100%) invert(1);
    opacity: 0.6;
}
body.dark-mode .client-square-slide:hover img {
    filter: grayscale(0%) invert(0);
}


/* --- VISTA EN TELÉFONO --- */
@media (max-width: 768px) {
    .logo-grid-container-slide {
        display: flex;
        flex-wrap: wrap;
        justify-content: center;
        gap: 1.5rem;
    }

    .client-square-slide {
        width: 100px;
        height: 100px;
    }
}






/* --- SECCIÓN MISIÓN Y VISIÓN DE ALTO IMPACTO (CORREGIDO) --- */
.seccion-mv-impacto {
    position: relative;
    padding: 5rem 0; /* Usamos padding, no altura fija */
    color: #fff;
    /* Asegúrate de que la ruta a tu imagen sea correcta */
    background-image: linear-gradient(rgba(0, 0, 0, 0.7), rgba(0, 0, 0, 0.7)), url('../images/QUIENESOMOS/vision y mision .png');
    background-size: cover;
    background-position: center;
    background-attachment: fixed; /* Efecto Parallax */
}

.grid-mv-impacto {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 3rem;
}

.card-mv-impacto {
    background: rgba(255, 255, 255, 0.1);
    backdrop-filter: blur(10px);
    -webkit-backdrop-filter: blur(10px);
    border-radius: 16px;
    padding: 2.5rem;
    text-align: center;
    border: 1px solid rgba(255, 255, 255, 0.2);
}

.card-mv-icono {
    font-size: 3rem;
    color: var(--color-primario);
    margin-bottom: 1rem;
}

.card-mv-impacto h3 {
    margin: 0 0 1rem 0;
    font-size: 1.8rem;
    color: #fff;
}

.card-mv-impacto p {
    color: rgba(255, 255, 255, 0.8);
    line-height: 1.7;
}

/* ▼▼▼ LA SOLUCIÓN CLAVE PARA MÓVILES ▼▼▼ */
@media (max-width: 992px) {
    .grid-mv-impacto {
        /* Hacemos que las tarjetas se apilen una sobre otra */
        grid-template-columns: 1fr;
        gap: 2rem; /* Reducimos el espacio entre ellas */
    }

    .seccion-mv-impacto {
        /* Quitamos el efecto parallax en móviles para mejor rendimiento */
        background-attachment: scroll;
    }
}



/* ======================================================= */
/* === ESTILOS PARA SECCIÓN DE CLIENTES (INDEPENDIENTE) === */
/* ======================================================= */

/* La animación que hace que los elementos floten */
@keyframes floatAnimation {
    0% { transform: translateY(0px) rotate(-1deg); }
    50% { transform: translateY(-20px) rotate(1deg); }
    100% { transform: translateY(0px) rotate(-1deg); }
}

/* El contenedor principal de la sección */
.seccion-clientes-inmersiva {
    position: relative;
    width: 100%;
    min-height: 90vh;
    padding: 4rem 1rem;
    box-sizing: border-box;
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    overflow: hidden;
    background-color: var(--color-superficie);
}

/* El fondo de puntos sutil */
.seccion-clientes-inmersiva::before {
    content: '';
    position: absolute;
    top: 0; left: 0;
    width: 100%; height: 100%;
    background-image: radial-gradient(circle, var(--color-texto-secundario) 1px, transparent 1px);
    background-size: 30px 30px;
    opacity: 0.1;
    z-index: 0;
}
body.dark-mode .seccion-clientes-inmersiva::before {
    opacity: 0.2;
}

.clientes-contenido {
    text-align: center;
    margin-bottom: 3rem;
    position: relative;
    z-index: 2;
}

/* El contenedor de la rejilla de logos */
.logo-grid-container {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(140px, 1fr));
    gap: 2.5rem;
    width: 80%;
    max-width: 1200px;
    position: relative;
    z-index: 1;
    justify-items: center;
}

/* El "cuadrito" individual */
.client-square {
    width: 140px;
    height: 140px;
    background-color: var(--color-fondo);
    border: 1px solid rgba(0,0,0,0.05);
    border-radius: 16px;
    display: flex;
    justify-content: center;
    align-items: center;
    padding: 1rem;
    box-shadow: 0 5px 15px rgba(0,0,0,0.08);
    
    /* Aplicamos la animación base a todos */
    animation-name: floatAnimation;
    animation-timing-function: ease-in-out;
    animation-iteration-count: infinite;
}

.client-square:hover {
    transform: scale(1.1);
    box-shadow: 0 12px 30px rgba(0,0,0,0.15);
    z-index: 10;
    animation-play-state: paused;
}

.client-square img {
    max-width: 85%;
    max-height: 85%;
    filter: grayscale(100%);
    opacity: 0.7;
    transition: filter 0.3s, opacity 0.3s;
}
.client-square:hover img {
    filter: grayscale(0%);
    opacity: 1;
}

/* Duraciones y retrasos para un movimiento "aleatorio" */
.client-square:nth-child(1) { animation-duration: 7s; }
.client-square:nth-child(2) { animation-duration: 6s; }
.client-square:nth-child(3) { animation-duration: 8s; animation-delay: -2s; }
.client-square:nth-child(4) { animation-duration: 5.5s; animation-delay: -1s; }
.client-square:nth-child(5) { animation-duration: 7s; }
.client-square:nth-child(6) { animation-duration: 6.5s; animation-delay: -3s; }
.client-square:nth-child(7) { animation-duration: 8.5s; animation-delay: -0.5s;}
.client-square:nth-child(8) { animation-duration: 5s; }

/* Estilos para Modo Oscuro */
body.dark-mode .client-square {
    border-color: rgba(255,255,255,0.1);
}
body.dark-mode .client-square img {
    filter: grayscale(100%) invert(1);
    opacity: 0.6;
}
body.dark-mode .client-square:hover img {
    filter: grayscale(0%) invert(0);
}


/* ======================================================= */
/* === ESTILOS PARA LA NUEVA SECCIÓN DE SOCIOS COMERCIALES === */
/* ======================================================= */

/* Animación de flote exclusiva para esta sección */
@keyframes sociosFloatAnimation {
    0% { transform: translateY(0px) rotate(-1deg); }
    50% { transform: translateY(-20px) rotate(1deg); }
    100% { transform: translateY(0px) rotate(-1deg); }
}


/* Fondo de puntos */
.seccion-socios::before {
    content: '';
    position: absolute;
    top: 0; left: 0;
    width: 100%; height: 100%;
    background-image: radial-gradient(circle, var(--color-texto-secundario) 1px, transparent 1px);
    background-size: 30px 30px;
    opacity: 0.1;
    z-index: 0;
}
body.dark-mode .seccion-socios::before {
    opacity: 0.2;
}

.socios-contenido {
    text-align: center;
    margin-bottom: 3rem;
    position: relative;
    z-index: 2;
}

/* Contenedor de la rejilla de logos */
.socios-grid-container {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(140px, 1fr));
    gap: 2.5rem;
    width: 80%;
    max-width: 1200px;
    position: relative;
    z-index: 1;
    justify-items: center;
}


.socio-card:hover {
    transform: scale(1.1);
    box-shadow: 0 12px 30px rgba(0,0,0,0.15);
    z-index: 10;
    animation-play-state: paused;
}



.socio-card:hover img {
    filter: grayscale(0%);
    opacity: 1;
}

/* Duraciones y retrasos para el movimiento "aleatorio" */
.socio-card:nth-child(1) { animation-duration: 7s; }
.socio-card:nth-child(2) { animation-duration: 6s; }
.socio-card:nth-child(3) { animation-duration: 8s; animation-delay: -2s; }
.socio-card:nth-child(4) { animation-duration: 5.5s; animation-delay: -1s; }
.socio-card:nth-child(5) { animation-duration: 7s; }
.socio-card:nth-child(6) { animation-duration: 6.5s; animation-delay: -3s; }
.socio-card:nth-child(7) { animation-duration: 8.5s; animation-delay: -0.5s;}
.socio-card:nth-child(8) { animation-duration: 5s; }
.socio-card:nth-child(9) { animation-duration: 7.5s; animation-delay: -1.5s;}
.socio-card:nth-child(10) { animation-duration: 6s; animation-delay: -4s;}
.socio-card:nth-child(11) { animation-duration: 8s; }
.socio-card:nth-child(12) { animation-duration: 5.5s; animation-delay: -2.5s;}
.socio-card:nth-child(1) img { transition-delay: 0.1s; } 
.socio-card:nth-child(2) img { transition-delay: 0.4s; } 
.socio-card:nth-child(3) img { transition-delay: 0.2s; } 
.socio-card:nth-child(4) img { transition-delay: 0.6s; }
.socio-card:nth-child(5) img { transition-delay: 0.3s; } 
.socio-card:nth-child(6) img { transition-delay: 0.5s; }
.socio-card:nth-child(7) img { transition-delay: 0.7s; }
.socio-card:nth-child(8) img { transition-delay: 0.9s; }

/* Estilos para Modo Oscuro */
body.dark-mode .socio-card {
    border-color: rgba(255,255,255,0.1);
}
body.dark-mode .socio-card img {
    filter: grayscale(100%) invert(1);
    opacity: 0.6;
}
body.dark-mode .socio-card:hover img {
    filter: grayscale(0%) invert(0);
}



/* ======================================================= */
/* ========= NUEVOS ESTILOS PARA LA PÁGINA DE BLOG ========= */
/* ======================================================= */

/* --- Hero Section del Blog --- */
.hero-blog {
    padding: 4rem 1rem;
    text-align: center;
    background-color: var(--color-superficie);
    border-bottom: 1px solid var(--color-fondo);
}
body.dark-mode .hero-blog {
    border-color: #333;
}
.hero-blog h1 {
    margin-top: 0;
}




/* --- Paginación --- */
.pagination {
    display: flex;
    justify-content: center;
    align-items: center;
    gap: 0.5rem;
    padding: 2rem 0;
    margin-bottom: 2rem;
}
.page-link {
    text-decoration: none;
    color: var(--color-texto-secundario);
    padding: 0.75rem 1rem;
    border: 1px solid var(--color-fondo);
    border-radius: 8px;
    transition: all 0.3s ease;
}
body.dark-mode .page-link {
    border-color: #333;
}
.page-link:hover {
    color: var(--color-primario);
    border-color: var(--color-primario);
}
.page-link.active {
    background-color: var(--color-primario);
    color: #fff;
    border-color: var(--color-primario);
}
.page-link.disabled {
    opacity: 0.5;
    pointer-events: none;
}

/* ======================================================= */
/* ====== NUEVOS ESTILOS PARA SECCIONES ADICIONALES ====== */
/* ======================================================= */

/* --- Sección de Temas Populares --- */
.seccion-temas-populares {
    background-color: var(--color-superficie);
    padding: 3rem 0;
}
body.dark-mode .seccion-temas-populares {
    background-color: #1a1a1a;
}

.tag-cloud {
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    gap: 1rem;
    max-width: 900px;
    margin: 0 auto;
}

.tag-link {
    text-decoration: none;
    color: var(--color-texto-secundario);
    background-color: var(--color-fondo);
    padding: 0.75rem 1.5rem;
    border-radius: 50px;
    font-weight: 600;
    transition: all 0.3s ease;
    border: 1px solid transparent;
}
body.dark-mode .tag-link {
    background-color: var(--color-superficie);
}

.tag-link:hover {
    color: var(--color-primario);
    transform: translateY(-3px);
    border-color: var(--color-primario);
}


/* --- Sección de Suscripción a Newsletter --- */
.seccion-newsletter {
    padding: 4rem 0;
    background-color: var(--color-fondo);
}

.newsletter-box {
    background-color: var(--color-superficie);
    padding: 3rem;
    border-radius: 24px;
    max-width: 800px;
    margin: 0 auto;
    text-align: center;
    box-shadow: var(--sombra-caja);
}

.newsletter-icon {
    font-size: 3.5rem;
    color: var(--color-primario);
    margin-bottom: 1rem;
}

.newsletter-form {
    display: flex;
    gap: 1rem;
    max-width: 500px;
    margin: 2rem auto 0 auto;
}

.newsletter-form input {
    flex-grow: 1;
    padding: 1rem;
    border: 1px solid var(--color-fondo);
    border-radius: 8px;
    background-color: var(--color-fondo);
    color: var(--color-texto-principal);
    font-family: 'Poppins', sans-serif;
    font-size: 1rem;
}
body.dark-mode .newsletter-form input {
    border-color: #333;
}

.newsletter-form input:focus {
    outline: none;
    border-color: var(--color-primario);
}

.newsletter-form .boton {
    margin-top: 0;
    white-space: nowrap; /* Evita que el texto del botón se rompa */
}


/* Responsividad para la sección de newsletter */
@media (max-width: 768px) {
    .newsletter-form {
        flex-direction: column;
    }
}


/* ======================================================= */
/* ==== CSS ADICIONAL PARA RESPONSIVIDAD DEL BLOG ==== */
/* ======================================================= */

@media (max-width: 768px) {

    /* --- Ajustes del Hero del Blog --- */
    .hero-blog {
        padding: 3rem 1rem; /* Menos espacio vertical en móviles */
    }
    .hero-blog h1 {
        font-size: 2.5rem; /* Título un poco más pequeño */
    }

    /* --- Ajustes del Collage de Artículos --- */
    .seccion-blog-collage .contenedor {
        width: 100%;
        padding: 0 1rem; /* Damos un poco de espacio lateral */
        box-sizing: border-box;
    }
    
    .blog-collage-grid {
        /* En lugar de una sola columna, hacemos una rejilla inteligente.
           Será 1 columna en la mayoría de teléfonos, pero 2 si el espacio lo permite. */
        grid-template-columns: repeat(auto-fit, minmax(300px, 1fr));
    }

    /* Reseteamos los tamaños especiales para que no rompan la rejilla en móvil */
    .collage-item-large,
    .collage-item-tall {
        grid-column: span 1;
        grid-row: span 1;
        aspect-ratio: 16 / 10; /* Les damos una proporción estándar */
    }
    
    /* --- Ajustes de la Paginación --- */
    .pagination {
        flex-wrap: wrap; /* Permite que los botones bajen de línea si no caben */
        padding: 1rem 0 2rem 0;
    }
    
    /* --- Ajustes de la Sección de Newsletter --- */
    .newsletter-box {
        padding: 2rem 1.5rem; /* Menos espaciado interno */
    }
    
    .newsletter-form {
        /* El formulario se apila verticalmente para ser fácil de usar */
        flex-direction: column;
    }
}



/* --- Filtros de Categorías (CORREGIDO PARA MÓVIL) --- */
.blog-filters {
    padding: 1.5rem 0;
    border-bottom: 1px solid var(--color-fondo);
    /* Quitamos el flex de aquí */
}

/* Y lo aplicamos al contenedor correcto */
.blog-filters .contenedor {
    display: flex;
    justify-content: center;
    flex-wrap: wrap; /* La propiedad clave para que se ajuste en móvil */
    gap: 1rem;
}

body.dark-mode .blog-filters {
    border-color: #333;
}

.filter-link {
    text-decoration: none;
    color: var(--color-texto-secundario);
    background-color: transparent;
    padding: 0.6rem 1.2rem;
    border: 1px solid var(--color-fondo);
    border-radius: 20px;
    transition: all 0.3s ease;
    font-weight: 600;
}

body.dark-mode .filter-link {
    border-color: #333;
}

.filter-link:hover {
    color: var(--color-primario);
    border-color: var(--color-primario);
}

.filter-link.active {
    background-color: var(--color-primario);
    color: #fff;
    border-color: var(--color-primario);
}




/* ======================================================= */
/* ====== CSS RESPONSIVO CORREGIDO Y SEPARADO PARA BLOG ====== */
/* ======================================================= */

/* --- REGLAS PARA TABLETS (SIN CAMBIOS) --- */
@media (max-width: 992px) {
    .blog-collage-grid {
        grid-template-columns: repeat(auto-fit, minmax(300px, 1fr));
    }
    .collage-item-large, .collage-item-tall {
        grid-column: span 1;
        grid-row: span 1;
        aspect-ratio: 16 / 10;
    }
}


/* --- REGLA #1: PARA EL BLOG DENTRO DEL CARRUSEL (en index.html) --- */
@media (max-width: 768px) {
    /* Usamos '.hero-carousel' para que solo aplique en la página de inicio */
    .hero-carousel .blog-collage-container {
        grid-template-columns: 1fr 1fr; /* Forzamos 2 columnas */
        gap: 1rem;
    }

    .hero-carousel .blog-collage-container .blog-card,
    .hero-carousel .blog-collage-container .blog-card--large,
    .hero-carousel .blog-collage-container .blog-card--tall {
        grid-column: span 1;
        grid-row: span 1;
        aspect-ratio: 9 / 10;
    }

    /* Ocultamos de la tercera tarjeta en adelante, SOLO en el carrusel */
    .hero-carousel .blog-collage-container .blog-card:nth-child(n + 3) {
        display: none;
    }
}


/* --- REGLA #2: PARA LA PÁGINA DE BLOG COMPLETA (en blog.html) --- */
@media (max-width: 768px) {
    /* Usamos '.seccion-blog-collage' para que solo aplique en la página de blog */
    .seccion-blog-collage .blog-collage-grid {
        /* Rejilla inteligente que muestra TODOS los artículos */
        grid-template-columns: repeat(auto-fit, minmax(300px, 1fr));
    }

    /* Ajustes generales para la página de blog en móvil */
    .hero-blog {
        padding: 3rem 1rem;
    }
    .hero-blog h1 {
        font-size: 2.5rem;
    }
    .seccion-blog-collage .contenedor {
        width: 100%;
        padding: 0 1rem;
        box-sizing: border-box;
    }
    .pagination {
        flex-wrap: wrap;
        padding: 1rem 0 2rem 0;
    }
    .newsletter-box {
        padding: 2rem 1.5rem;
    }
    .newsletter-form {
        flex-direction: column;
    }
}



/* ======================================================= */
/* ====== NUEVOS ESTILOS PARA LA PÁGINA DE CONTACTO ====== */
/* ======================================================= */

/* --- Nuevo Hero Banner --- */
.hero-contacto {
    position: relative;
    padding: 5rem 1rem;
    text-align: center;
    color: #fff;
    background-image: linear-gradient(rgba(0,0,0,0.6), rgba(0,0,0,0.6)), url('https://images.unsplash.com/photo-1556742502-ec7c0e2f34b1?q=80&w=1470');
    background-size: cover;
    background-position: center;
}
.hero-contacto p {
    color: rgba(255,255,255,0.9);
}


/* --- Refinamiento de la Sección de Contacto --- */
.seccion-contacto-mejorada {
    padding: 4rem 0; /* Aumentamos el padding vertical */
    background-color: var(--color-fondo);
}

/* Hacemos que la rejilla principal sea la "tarjeta" */
.contacto-grid-mejorado {
    background-color: var(--color-superficie);
    padding: 3rem;
    border-radius: 24px;
    box-shadow: var(--sombra-caja);
}
body.dark-mode .contacto-grid-mejorado {
    background-color: #1e1e1e;
}


/* --- Nueva Sección de Logos (Prueba Social) --- */
.social-proof-logos {
    margin-top: 2.5rem;
    padding-top: 2rem;
    border-top: 1px solid var(--color-fondo);
}
body.dark-mode .social-proof-logos {
    border-top-color: #333;
}

.social-proof-logos h4 {
    color: var(--color-texto-secundario);
    font-weight: 600;
    text-align: center;
    margin-bottom: 1.5rem;
}

.logos-container {
    display: flex;
    justify-content: space-around;
    align-items: center;
    gap: 1rem;
}

.logos-container img {
    height: 35px; /* Altura unificada para los logos */
    width: auto;
    filter: grayscale(100%) opacity(0.6);
    transition: filter 0.3s, opacity 0.3s;
}

.logos-container img:hover {
    filter: grayscale(0%) opacity(1);
}

body.dark-mode .logos-container img {
    filter: grayscale(100%) invert(1) opacity(0.6);
}
body.dark-mode .logos-container img:hover {
    filter: grayscale(0%) invert(0) opacity(1);
}


/* --- Ajustes responsivos para la nueva sección --- */
@media (max-width: 992px) {
    .contacto-grid-mejorado {
        padding: 2rem; /* Menos padding en tablet */
    }
}










/* ================================================================= */
/* CSS MEJORADO PARA SECCIÓN DE OFERTAS */
/* ================================================================= */
.seccion-ofertas-claro {
    padding: 4rem 0;
    background-color: var(--color-fondo);
    position: relative;
    overflow: hidden;
}

.glow-claro {
    position: absolute;
    border-radius: 50%;
    filter: blur(150px);
    z-index: 0;
}

.glow-rojo {
    bottom: -40%;
    right: -40%;
    width: 800px;
    height: 800px;
    background: rgba(231, 76, 60, 0.1); /* Tono rojizo más sutil */
}

body.dark-mode .glow-rojo {
    background: rgba(231, 76, 60, 0.2);
}

.seccion-ofertas-claro .titulo-seccion,
.seccion-ofertas-claro .subtitulo-seccion {
    position: relative;
    z-index: 1;
}

.oferta-card-v2 {
    border-radius: 16px;
    overflow: hidden;
    position: relative;
    background: var(--color-superficie);
    border: 1px solid transparent;
    box-shadow: var(--sombra-caja);
    transition: transform 0.3s ease, box-shadow 0.3s ease, border-color 0.3s ease;
}

.oferta-card-v2:hover {
    transform: translateY(-10px);
    box-shadow: 0 12px 25px rgba(0, 0, 0, 0.12);
    border-color: var(--color-primario);
}



.producto-card-pie {
    display: flex;
    justify-content: space-between;
    align-items: baseline; /* Alinea mejor los precios de diferente tamaño */
    padding-top: 1rem;
    border-top: 1px solid var(--color-fondo);
}

.producto-card-precio-oferta {
    font-size: 1.1rem;
    color: var(--color-texto-secundario);
    text-decoration: line-through;
}

.producto-card-precio-final {
    font-size: 1.8rem;
    font-weight: 700;
    color: var(--color-primario);
}

/* ================================================================= */
/* CSS PARA BANNER EMERGENTE DE PASOS DE COMPRA */
/* ================================================================= */
/* ================================================================= */
/* BANNER DE PASOS DE COMPRA (REDiseño)                             */
/* ================================================================= */
.purchase-steps-banner {
    position: fixed;
    bottom: -100%;
    left: 50%;
    transform: translateX(-50%);
    width: 90%;
    max-width: 800px;
    z-index: 1002;
    transition: bottom 0.8s cubic-bezier(0.25, 0.46, 0.45, 0.94);
    background-color: var(--color-superficie);
    border: 4px solid var(--color-primario);
    border-radius: 30px;
    box-shadow: 0 5px 30px rgba(0,0,0,0.2);
    padding: 1.5rem 2rem;
    text-align: center;
}

body.dark-mode .purchase-steps-banner {
    border-color: var(--color-primario);
    background-color: #2c2c2c;
}

.purchase-steps-banner.show {
    bottom: 20px; /* Flota ligeramente sobre el borde inferior */
}



.steps-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    gap: 1rem;
    margin-bottom: 1.5rem;
    padding-bottom: 1rem;
    border-bottom: 2px solid var(--color-fondo);
}
body.dark-mode .steps-header{
    border-bottom-color: #444;
}

.steps-header h3 {
    margin: 0;
    font-size: 1.5rem;
    font-weight: 700;
    color: var(--color-texto-principal);
    flex-grow: 1;
}

.steps-header-icon,
.steps-header-logo {
    font-size: 2.2rem;
    color: var(--color-primario);
}

.steps-container {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 1.5rem;
    align-items: flex-start;
}

.step-item {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 1rem;
}

.step-circle {
    width: 50px;
    height: 50px;
    border-radius: 50%;
    display: flex;
    justify-content: center;
    align-items: center;
    font-size: 1.8rem;
    font-weight: 700;
    background-color: transparent;
    border: 3px solid var(--color-primario);
    color: var(--color-primario);
}

.step-item p {
    color: var(--color-texto-secundario);
    line-height: 1.5;
    font-size: 0.9rem;
    margin: 0;
}

/* --- Responsividad para el nuevo banner --- */
@media (max-width: 768px) {
    .purchase-steps-banner {
        padding: 1.5rem;
    }
    .purchase-steps-banner.show {
         bottom: 10px;
    }
    .steps-header h3 {
        font-size: 1.1rem;
    }
    .steps-header-icon, .steps-header-logo {
        font-size: 1.6rem;
    }
    .steps-container {
        grid-template-columns: 1fr;
        gap: 1.5rem;
    }
}
.purchase-steps-close {
    position: absolute;
    top: 15px;
    right: 10px;
    background: none;
    border: none;
    font-size: 2rem;
    color: var(--color-texto-secundario);
    cursor: pointer;
    
    /* 🔑 CLAVE: Aseguramos que el contenido esté alineado */
    line-height: 1; 
    display: flex; /* Lo convertimos en flexbox */
    justify-content: center; /* Centrado horizontal */
    align-items: center; /* Centrado vertical */
    /* Fin de la clave */
    
    transition: transform 0.3s, color 0.3s;
}
.purchase-steps-close:hover {
    color: var(--color-primario);
    transform: rotate(90deg);
}

.steps-header {
    display: flex;
    justify-content: center;
    align-items: center;
    gap: 1rem;
    margin-bottom: 1.5rem;
}
.steps-header i {
    font-size: 2rem;
    color: var(--color-primario);
}
.steps-header h3 {
    margin: 0;
    font-size: 1.5rem;
}

.steps-container {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 2rem;
    margin-bottom: 2rem;
}

.step-item {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 1rem;
}

.step-circle {
    width: 50px;
    height: 50px;
    border-radius: 50%;
    background-color: var(--color-fondo);
    border: 2px solid var(--color-primario);
    color: var(--color-primario);
    display: flex;
    justify-content: center;
    align-items: center;
    font-size: 1.5rem;
    font-weight: 700;
}

.step-item p {
    color: var(--color-texto-secundario);
    line-height: 1.5;
}
.step-item p strong {
    color: var(--color-texto-principal);
}

.boton-banner {
    display: inline-block;
    background: var(--color-primario);
    color: #fff;
    padding: 14px 28px;
    text-decoration: none;
    border-radius: 8px;
    font-weight: 700;
    transition: background-color 0.3s, transform 0.3s;
}
.boton-banner:hover {
    background: var(--color-primario-hover);
    transform: scale(1.05);
}

/* ================================================================= */
/* CSS PARA NUEVA SECCIÓN DE BENEFICIOS */
/* ================================================================= */
.seccion-beneficios {
    background-color: var(--color-superficie);
    padding: 3rem 0;
}
body.dark-mode .seccion-beneficios {
    background-color: #1a1a1a;
}
.beneficios-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));
    gap: 2rem;
}
.beneficio-item {
    text-align: center;
    padding: 2rem;
    background-color: var(--color-fondo);
    border-radius: 12px;
    transition: transform 0.3s ease;
}
.beneficio-item:hover {
    transform: translateY(-8px);
}
.beneficio-icon {
    font-size: 3rem;
    color: var(--color-primario);
    margin-bottom: 1rem;
}
.beneficio-titulo {
    font-size: 1.3rem;
    margin: 0 0 0.5rem 0;
}
.beneficio-desc {
    color: var(--color-texto-secundario);
    line-height: 1.6;
}

/* --- RESPONSIVIDAD PARA LOS NUEVOS ELEMENTOS --- */
@media (max-width: 768px) {
    .steps-container {
        grid-template-columns: 1fr;
        gap: 1.5rem;
    }
    .purchase-steps-banner {
        padding: 3rem 1.5rem 1.5rem; /* Más padding arriba para el botón de cerrar */
        text-align: center;
    }
    .steps-header {
        flex-direction: column;
        gap: 0.5rem;
    }
    .steps-header h3 {
        font-size: 1.3rem;
    }
}


/* ================================================================= */
/* ANIMACIONES PARA OFERTAS                                      */
/* ================================================================= */

/* Animación de pulso para "Flash" */
@keyframes pulse {
    0% { transform: scale(1); opacity: 1; }
    50% { transform: scale(1.1); opacity: 0.8; }
    100% { transform: scale(1); opacity: 1; }
}

/* Animación de deslizamiento lateral para "Oferta" */
@keyframes slide {
    0% { transform: translateX(0); }
    50% { transform: translateX(5px); }
    100% { transform: translateX(0); }
}


/* ================================================================= */
/* CSS MEJORADO PARA SECCIÓN DE OFERTAS (CON ANIMACIÓN)             */
/* ================================================================= */
.seccion-ofertas-claro {
    padding: 4rem 0;
    background-color: var(--color-fondo);
    position: relative;
    overflow: hidden;
}

.glow-claro {
    position: absolute;
    border-radius: 50%;
    filter: blur(150px);
    z-index: 0;
}

.glow-rojo {
    bottom: -40%;
    right: -40%;
    width: 800px;
    height: 800px;
    background: rgba(231, 76, 60, 0.1);
}

body.dark-mode .glow-rojo {
    background: rgba(231, 76, 60, 0.2);
}

.seccion-ofertas-claro .titulo-seccion,
.seccion-ofertas-claro .subtitulo-seccion {
    position: relative;
    z-index: 1;
}

.oferta-card-v2 {
    border-radius: 16px;
    overflow: hidden;
    position: relative;
    background: var(--color-superficie);
    border: 1px solid transparent;
    box-shadow: var(--sombra-caja);
    transition: transform 0.3s ease, box-shadow 0.3s ease, border-color 0.3s ease;
}

.oferta-card-v2:hover {
    transform: translateY(-10px);
    box-shadow: 0 12px 25px rgba(0, 0, 0, 0.12);
    border-color: var(--color-primario);
}

.oferta-banner {
    position: absolute;
    top: 20px;
    right: -50px;
    transform: rotate(45deg);
    width: 200px;
    padding: 8px 0;
    text-align: center;
    font-weight: 700;
    font-size: 1rem;
    color: #fff;
    background: linear-gradient(45deg, #e74c3c, #c0392b);
    box-shadow: 0 4px 10px rgba(0,0,0,0.3);
    z-index: 2;
    
    /* Aplicamos las animaciones */
    animation: slide 2s ease-in-out infinite, pulse 2.5s ease-in-out infinite;
}

.producto-card-pie {
    display: flex;
    justify-content: space-between;
    align-items: baseline; 
    padding-top: 1rem;
    border-top: 1px solid var(--color-fondo);
}

.producto-card-precio-oferta {
    font-size: 1.1rem;
    color: var(--color-texto-secundario);
    text-decoration: line-through;
}

.producto-card-precio-final {
    font-size: 1.8rem;
    font-weight: 700;
    color: var(--color-primario);
}

/* ================================================================= */
/* NUEVO ESTILO DINÁMICO PARA TÍTULO CON ETIQUETA ANIMADA      */
/* ================================================================= */

/* 1. Contenedor para alinear el título y la etiqueta */
.titulo-con-tag {
  display: flex;
  justify-content: center;
  align-items: center;
  gap: 1rem; /* Espacio entre el título y la etiqueta */
  margin-bottom: 2rem; /* Ajusta el espacio con el subtítulo si es necesario */
}

/* 2. Estilo de la etiqueta "Por Tiempo Limitado" */
.tag-tiempo-limitado {
  background-color: #e74c3c; /* Un rojo llamativo para urgencia */
  color: #fff;
  padding: 0.4rem 0.9rem;
  font-size: 0.8rem;
  font-weight: 700;
  text-transform: uppercase;
  border-radius: 6px;
  margin-bottom: -1.5rem;
  /* Aplicamos la animación de parpadeo suave */
  animation: soft-blink 2s ease-in-out infinite;
}

/* 3. Definimos la animación de parpadeo suave (soft-blink) */
@keyframes soft-blink {
  0% {
    opacity: 1;
    transform: scale(1);
    box-shadow: 0 0 5px rgba(231, 76, 60, 0.5);
  }
  50% {
    opacity: 0.7;
    transform: scale(1.05);
    box-shadow: 0 0 15px rgba(231, 76, 60, 0.8);
  }
  100% {
    opacity: 1;
    transform: scale(1);
    box-shadow: 0 0 5px rgba(231, 76, 60, 0.5);
  }
}

/* 4. Nos aseguramos de que el h2 dentro del contenedor se vea bien */
.titulo-con-tag .titulo-seccion {
    margin-bottom: 0; /* Quitamos el margen inferior del h2 */
}




/* ================================================================= */
/* WIDGET INDEPENDIENTE DE WHATSAPP Y POP-UP DE MENSAJE            */
/* ================================================================= */

/* --- 1. Estilo del Botón Circular Fijo de WhatsApp --- */
.whatsapp-float-button {
    position: fixed;
    width: 60px;
    height: 60px;
    bottom: 25px;
    right: 25px;
    background-color: #25D366;
    color: #FFF;
    border-radius: 50%;
    text-align: center;
    font-size: 30px;
    box-shadow: 2px 2px 10px rgba(0, 0, 0, 0.2);
    z-index: 1000;
    display: flex;
    justify-content: center;
    align-items: center;
    text-decoration: none;
    transition: transform 0.3s ease;
}

.whatsapp-float-button:hover {
    transform: scale(1.1);
}

/* --- 2. Estilo del Cuadro de Mensaje Emergente --- */
.whatsapp-message-popup {
    position: fixed;
    bottom: 25px;
    right: 100px; /* Posicionado a la izquierda del botón de WhatsApp */
    width: 280px;
    background-color: var(--color-superficie);
    border-radius: 12px;
    box-shadow: 0 5px 20px rgba(0, 0, 0, 0.15);
    z-index: 999;
    
    /* Oculto por defecto y listo para la animación de aparición */
    opacity: 0;
    transform: translateY(20px);
    visibility: hidden;
    transition: all 0.5s cubic-bezier(0.68, -0.55, 0.27, 1.55);
}

/* Clase 'show' que se añade con JavaScript para mostrar el pop-up */
.whatsapp-message-popup.show {
    opacity: 1;
    transform: translateY(0);
    visibility: visible;
}

.popup-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 10px 15px;
    background-color: var(--color-fondo);
    border-bottom: 1px solid #e0e0e0;
    border-radius: 12px 12px 0 0;
}
body.dark-mode .popup-header {
    border-bottom-color: #333;
}

.popup-header strong {
    color: var(--color-texto-principal);
    font-weight: 700;
}

.popup-close {
    background: none;
    border: none;
    font-size: 1.5rem;
    color: var(--color-texto-secundario);
    cursor: pointer;
    line-height: 1;
}

.popup-body {
    padding: 20px 15px;
    color: var(--color-texto-secundario);
    font-size: 0.95rem;
}


/* --- 3. Animaciones para la rotación de texto --- */
@keyframes popup-fade-in {
    from { opacity: 0; }
    to { opacity: 1; }
}

@keyframes popup-fade-out {
    from { opacity: 1; }
    to { opacity: 0; }
}

.popup-body.fade-in {
    animation: popup-fade-in 0.5s ease-in-out forwards;
}

.popup-body.fade-out {
    animation: popup-fade-out 0.5s ease-in-out forwards;
}


/* --- 4. Ajustes para Móviles --- */
@media (max-width: 768px) {
    .whatsapp-message-popup {
        display: none; /* En móviles, ocultamos el pop-up para no saturar la pantalla */
    }
}













        /* ================================================================= */
/* BOTÓN FIJO PARA ABRIR BANNER DE COMPRA                          */
/* ================================================================= */
.purchase-trigger-button {
    position: fixed;
    top: 100px; /* Debajo del header */
    right: -250px; /* Inicia fuera de la pantalla para animación */
    background-color: var(--color-primario);
    color: #fff;
    padding: 12px 20px;
    border: none;
    border-radius: 50px 0 0 50px; /* Forma de píldora en un lado */
    font-weight: 700;
    font-family: 'Nunito', sans-serif;
    cursor: pointer;
    box-shadow: 0 4px 15px rgba(0,0,0,0.2);
    z-index: 998; /* Debajo del banner de compra y popups */
    transition: right 0.8s cubic-bezier(0.25, 0.46, 0.45, 0.94);
    opacity: 0;
    visibility: hidden;
}

.purchase-trigger-button.visible {
    right: 0; /* Lo desliza a la vista */
    opacity: 1;
    visibility: visible;
}

.purchase-trigger-button:hover {
    background-color: var(--color-primario-hover);
}

.purchase-trigger-button i {
    margin-left: 8px;
}

@media (max-width: 768px) {
    /* 1. Ocultamos el texto del botón, esto no cambia. */
    .purchase-trigger-button span {
        display: none;
    }

    /* 2. Reposicionamos y rediseñamos el botón */
    .purchase-trigger-button {
        /*
         * ▼▼▼ AJUSTES CLAVE ▼▼▼
         * He aumentado el valor de 'top' y 'right' para despegarlo más de la esquina.
         * Puedes experimentar con valores mayores (ej. 120px y 35px) si lo quieres más separado.
         */
        top: 115px;      /* Aumentamos el espacio desde arriba (antes 110px) */
        right: 35px;     /* Aumentamos el espacio desde la derecha (antes 30px) */
        margin-right: 10px;
        /* Reseteamos la posición anterior */
        bottom: auto;
        left: auto;

        /* Mismo tamaño y forma */
        width: 50px;
        height: 50px;
        border-radius: 50%;

        /*
         * ▼▼▼ CORRECCIÓN IMPORTANTE ▼▼▼
         * La propiedad correcta es "align-items", no "align".
         * Esto centrará verticalmente el ícono dentro del botón circular.
         */
        display: flex;
        justify-content: center;
        align-items: center; /* <-- Corregido aquí */
    }

    /* 3. Ajustamos el tamaño del icono del carrito, esto no cambia. */
    .purchase-trigger-button .fa-cart-plus {
        font-size: 1.2rem;
        margin: 0;
    }
}

/* ======================================================= */
/* ====== CORRECCIÓN: BOTÓN DE COMPRA EN MÓVILES ====== */
/* ======================================================= */

@media (max-width: 768px) {
    /* 1. Ocultar el texto forzadamente en todos los dispositivos pequeños */
    .purchase-trigger-button span {
        display: none !important; /* Usamos !important para asegurar que se aplique */
    }

    /* 2. Asegurar el diseño circular (donde solo cabe el icono) */
    .purchase-trigger-button {
        /* Es CRUCIAL que estos estilos para hacerlo circular estén activos en móvil */
        top: 115px;
        right: 35px;
        bottom: auto;
        left: auto;
        width: 50px;
        height: 50px;
        border-radius: 50%;
        display: flex;
        justify-content: center;
        align-items: center; 
        padding: 0; /* Aseguramos que no haya padding que lo estire */
    }

    /* Aseguramos que el icono sea el único elemento visible en el botón */
    .purchase-trigger-button i {
        margin: 0; /* Quitamos cualquier margen que pueda tener el icono */
    }
}
/* ======================================================= */
/* =========== SECCIÓN PRESENCIA DE MARCA (V2) =========== */
/* ======================================================= */
.seccion-presencia-v2 {
    background-color: #1a1a1a; /* Fondo oscuro */
    color: var(--color-texto-principal);
}

.seccion-presencia-v2 .titulo-seccion,
.seccion-presencia-v2 .subtitulo-seccion {
    color: #fff;
}

.presencia-cards-grid {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: 1.5rem;
    margin-top: 3rem;
}

.presencia-card {
    background-color: #2c2c2c;
    border-radius: 12px;
    overflow: hidden;
    text-align: center;
    border: 1px solid #444;
    transition: transform 0.3s ease, box-shadow 0.3s ease;
}

.presencia-card:hover {
    transform: translateY(-10px);
    box-shadow: 0 10px 20px rgba(0,0,0,0.4);
}

.presencia-card-imagen {
    width: 100%;
    aspect-ratio: 4 / 3;
    overflow: hidden;
}

.presencia-card-imagen img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    transition: transform 0.4s ease;
}

.presencia-card:hover .presencia-card-imagen img {
    transform: scale(1.05);
}

.presencia-card-caption {
    padding: 1.5rem;
}

.presencia-card-caption h3 {
    margin: 0 0 0.5rem 0;
    font-size: 1.1rem;
    color: #fff;
}

.presencia-card-caption p {
    font-size: 0.9rem;
    color: var(--color-texto-secundario);
    line-height: 1.5;
}

.presencia-cta-boton {
    text-align: center;
    margin-top: 3rem;
}

/* --- Responsividad de la nueva sección --- */
@media (max-width: 992px) {
    .presencia-cards-grid {
        grid-template-columns: repeat(2, 1fr); /* 2 columnas en tablets */
    }
}

@media (max-width: 768px) {
    .presencia-cards-grid {
        grid-template-columns: 1fr; /* 1 columna en móviles */
    }
}


/* En tu nuevo archivo productos.css */

.filtro-btn.active {
    background-color: #e67e22; /* Cambiamos el azul a un naranja vibrante */
    color: #fff;
    border-color: #e67e22; /* También el borde para que coincida */
    font-weight: bold;
    box-shadow: var(--sombra-interactiva);
    transform: scale(1.02);
}
































/* ======================================================= */
/* ========= ESTILOS PARA LA SECCIÓN DE TESTIMONIOS ========= */
/* ======================================================= */

.seccion-testimonios {
    background-color: var(--color-fondo); /* Fondo suave consistente */
}

.testimonial-swiper {
    padding-bottom: 4rem; /* Espacio extra en la parte inferior para la paginación */
        overflow: hidden; /* <-- AÑADE ESTA LÍNEA PARA CORREGIR EL ANCHO */

}

.testimonial-card {
    background-color: var(--color-superficie);
    padding: 2rem;
    border-radius: 16px;
    box-shadow: var(--sombra-caja);
    height: 100%; /* Asegura que todas las tarjetas tengan la misma altura */
    display: flex;
    flex-direction: column;
    text-align: left;
    border-top: 4px solid var(--color-primario); /* Detalle de color primario */
}

.testimonial-quote-icon {
    font-size: 2.5rem;
    color: var(--color-primario);
    opacity: 0.5;
    margin-bottom: 1rem;
}

.testimonial-quote {
    color: var(--color-texto-secundario);
    font-style: italic;
    line-height: 1.7;
    flex-grow: 1; /* Empuja al autor hacia abajo, alineando los testimonios */
    margin-bottom: 1.5rem;
}

.testimonial-author {
    display: flex;
    align-items: center;
    gap: 1rem;
    padding-top: 1rem;
    border-top: 1px solid var(--color-fondo);
}

body.dark-mode .testimonial-author {
    border-top-color: #333;
}


.testimonial-img {
    width: 60px;
    height: 60px;
    border-radius: 50%;
    object-fit: cover;
    border: 3px solid var(--color-primario);
}

.testimonial-name {
    margin: 0;
    font-size: 1.1rem;
    font-weight: 700;
    color: var(--color-texto-principal);
}

.testimonial-role {
    font-size: 0.9rem;
    color: var(--color-texto-secundario);
}

/* Estilos para la paginación de Swiper */
.testimonial-swiper .swiper-pagination-bullet {
    background-color: var(--color-texto-secundario);
    width: 10px;
    height: 10px;
    opacity: 0.7;
}

.testimonial-swiper .swiper-pagination-bullet-active {
    background-color: var(--color-primario);
    transform: scale(1.2);
}

/* ================================================================= */
/* === DISEÑO DE CARRUSEL EN TIRA DE CRISTAL (LOGOS A COLOR) === */
/* ================================================================= */

/* --- 1. Contenedor Principal con Tira de Cristal y Difuminados --- */
.seccion-marcas {
    padding: 5rem 0;
    background-color: var(--color-fondo);
    position: relative;
    overflow: hidden;
}

.logo-scroller {
    background: rgba(255, 255, 255, 0.1);
    backdrop-filter: blur(10px);
    -webkit-backdrop-filter: blur(10px);
    border: 1px solid rgba(0, 0, 0, 0.2);
    border-radius: 12px;
    box-shadow: 0 4px 15px rgba(0, 0, 0, 0.5);
    height: 140px;
    margin: 0 auto;
    max-width: 1200px;
    overflow: hidden;
    position: relative;
}

body.dark-mode .logo-scroller {
    background: rgba(40, 40, 40, 0.2);
    border-color: rgba(255, 255, 255, 0.1);
}

/* Difuminado Izquierdo y Derecho */
.logo-scroller::before,
.logo-scroller::after {
    content: "";
    height: 100%;
    position: absolute;
    width: 150px;
    top: 0;
    z-index: 2;
    pointer-events: none;
}

.logo-scroller::before {
    left: 0;
    background: linear-gradient(to right, var(--color-superficie) 20%, transparent 100%);
}
body.dark-mode .logo-scroller::before {
    background: linear-gradient(to right, var(--color-superficie) 20%, transparent 100%);
}

.logo-scroller::after {
    right: 0;
    background: linear-gradient(to left, var(--color-superficie) 20%, transparent 100%);
}
body.dark-mode .logo-scroller::after {
    background: linear-gradient(to left, var(--color-superficie) 20%, transparent 100%);
}

/* --- 2. La Pista de Logos y la Animación de Scroll --- */
@keyframes scroll {
    0% { transform: translateX(0); }
    100% { transform: translateX(calc(-200px * 33)); }
}

.scroller-track {
    animation: scroll 60s linear infinite;
    display: flex;
    width: calc(200px * 66);
    height: 100%;
}

/* --- 3. El Logo Individual (AHORA A COLOR) --- */
.scroller-slide {
    height: 100%;
    width: 200px;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 10px;
    box-sizing: border-box;
}

.scroller-slide img {
    max-width: 90%;
    max-height: 80%;
    width: auto;
    object-fit: contain;
    /* La propiedad "filter" ha sido eliminada */
    opacity: 0.8; /* Una ligera opacidad para que resalten al pasar el ratón */
    transition: all 0.5s ease-in-out;
}

/* Pausar la animación y resaltar el logo con el ratón */
.logo-scroller:hover .scroller-track {
    animation-play-state: paused;
}

.logo-scroller .scroller-slide:hover img {
    /* La propiedad "filter" ha sido eliminada */
    opacity: 1;
    transform: scale(1.1);
}

/* --- 4. Diseño Responsivo --- */
@media (max-width: 768px) {
    .seccion-marcas {
        padding: 3rem 0;
    }
    .logo-scroller {
        height: 100px;
        max-width: 100%;
        border-radius: 8px;
    }
    .logo-scroller::before, .logo-scroller::after {
        width: 100px;
    }
    .scroller-slide {
        width: 150px;
    }
    @keyframes scroll {
        100% { transform: translateX(calc(-150px * 33)); }
    }
    .scroller-track {
        width: calc(150px * 66);
    }
}





/* ================================================================= */
/* === BOTÓN PARA VOLVER ARRIBA (SCROLL TO TOP) === */
/* ================================================================= */

.boton-volver-arriba {
    position: fixed; /* Se mantiene fijo en la pantalla */
    bottom: 95px;    /* Lo posicionamos encima del botón de WhatsApp */
    right: 25px;
    z-index: 999;    /* Se asegura de que esté por encima de casi todo */
    
    /* Estilos visuales */
    width: 50px;
    height: 50px;
    background-color: var(--color-primario);
    color: #fff;
    border: none;
    border-radius: 50%; /* Lo hacemos circular */
    font-size: 1.2rem;
    cursor: pointer;
    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.15);
    
    /* Efecto de aparición/desaparición */
    opacity: 0;
    transform: translateY(20px);
    pointer-events: none; /* No se puede hacer clic cuando está oculto */
    transition: opacity 0.3s ease, transform 0.3s ease;
}

/* Clase que se añade con JS para mostrar el botón */
.boton-volver-arriba.visible {
    opacity: 1;
    transform: translateY(0);
    pointer-events: auto; /* Se puede hacer clic cuando es visible */
}

.boton-volver-arriba:hover {
    background-color: var(--color-primario-hover);
}

/* --- ELEMENTOS FLOTANTES (Diseño Cuadrado/Rectangular Minimalista) --- */

/* 1. Contenedor Social Bar (Escritorio: Fijo a la Izquierda) */
.social-bar {
    position: fixed;
    top: 50%;
    left: 0;
    transform: translateY(-50%);
    display: flex;
    flex-direction: column; /* Vertical en escritorio */
    
    /* Estilo minimalista */
    background-color: var(--color-superficie); /* Usamos el fondo de la superficie para ser discretos */
    border: 1px solid var(--color-fondo);
    box-shadow: 0 4px 15px rgba(0,0,0,0.1); 
    border-radius: 0 8px 8px 0; /* Borde redondeado solo a la derecha */
    z-index: 101;
    transition: all 0.3s ease;
    padding: 5px 0; /* Espacio vertical interno */
}
body.dark-mode .social-bar {
    background-color: var(--color-superficie);
    border: 1px solid #333;
}

/* 2. Ícono Individual (Escritorio) */
.social-icon {
    padding: 0.5rem; 
    color: var(--color-texto-secundario); 
    font-size: 1.1rem; /* Un poco más pequeño */
    transition: all 0.3s ease;
    width: 40px; 
    height: 40px;
    text-align: center;
    display: flex; 
    justify-content: center;
    align-items: center;
    background-color: transparent;
    border-radius: 4px; /* Bordes ligeramente cuadrados */
    margin: 0; /* Quitamos margen para que se vean compactos */
}

/* 3. Efecto Hover (El fondo aparece con el color primario) */
.social-icon:hover {
    background-color: var(--color-primario); 
    color: #fff; /* Texto blanco en hover */
    box-shadow: 0 2px 5px rgba(0,0,0,0.2); 
    transform: scale(1.05); /* Pequeña elevación */
    z-index: 2; 
    border-radius: 4px;
}

body.dark-mode .social-icon:hover {
    box-shadow: 0 2px 5px rgba(0,0,0,0.4); 
}

/* --- RESPONSIVIDAD PARA MÓVILES (Fijo a la Esquina Inferior Izquierda) --- */

/* --- RESPONSIVIDAD PARA MÓVILES (Vertical y Pegado a la Izquierda) --- */

/* --- RESPONSIVIDAD PARA MÓVILES (Vertical y Pegado a la Izquierda) --- */

@media (max-width: 768px) {
    /* 1. Reubicación: Fijo Arriba-Izquierda, Vertical */
    .social-bar {
        top: 150px; 
        bottom: auto; 
        left: 0; 
        transform: none; 
        flex-direction: column; 
        
        /* === CAMBIO CLAVE PARA CENTRAR === */
        align-items: center; /* Centra los items horizontalmente */
        justify-content: center;
        /* ================================ */
        
        /* Contenedor tipo rectangular compacto */
        background-color: var(--color-superficie);
        border: 1px solid var(--color-fondo);
        box-shadow: 0 4px 8px rgba(0,0,0,0.2); 
        border-radius: 0 6px 6px 0; 
        padding: 5px 0; /* Aseguramos espacio vertical pero no lateral */
        max-width: none; 
        width: auto;
    }

    /* 2. Ajuste del tamaño de los íconos en móvil */
    .social-icon {
        font-size: 0.9rem; 
        width: 30px; 
        height: 30px; 
        margin: 3px 0; /* Agregamos un poco de margen vertical para separarlos */
        /* Mantenemos el justify-content: center que ya tienen, 
           y el align-items: center del .social-bar hará el centrado perfecto */
    }
    
    /* 3. El efecto hover/active es sutil */
    .social-icon:active, 
    .social-icon:hover {
        background-color: var(--color-fondo);
        color: var(--color-primario);
        transform: none; 
        box-shadow: none; 
        border: none;
    }
    
    body.dark-mode .social-bar {
        background-color: var(--color-superficie);
    }
}


/* === AJUSTE DE POP-UP DE WHATSAPP PARA MÓVILES === */
@media (max-width: 768px) {
    .whatsapp-message-popup {
        /* Deshabilitamos la regla 'display: none;' si la tienes, o la sobrescribimos con 'block' */
        display: block; 
        
        /* 1. Reducimos el ancho */
        width: 180px; 
        
        /* 2. Reposicionamos a la esquina inferior derecha */
        right: 90px; /* Separado del botón de WhatsApp */
        bottom: 10px; /* Pegado a la parte inferior */
        
        /* 3. Ajuste de contenido para ser compacto */
        font-size: 0.8rem;
    }
    
    .popup-header {
        padding: 5px 10px;
    }
    
    .popup-header strong {
        font-size: 0.9rem;
    }
    
    .popup-body {
        padding: 10px;
        font-size: 0.8rem;
    }
    
    .popup-close {
        font-size: 1.2rem;
    }
}

/* --- POSICIONAMIENTO DE LA IMAGEN ENCABEZADO DEL MODAL --- */
.steps-header {
    position: relative; 
    /* Deja espacio para la imagen y el botón de cerrar */
    padding-right: 60px; 
}

.steps-header-logo-img {
    position: absolute;
    top: 50%;
    right: 35px; /* Separado del borde (ajustar si el botón de cerrar se solapa) */
    transform: translateY(-50%);
    
    width: 100px; 
    height: auto;
    object-fit: contain;
    z-index: 10;
}

/* --- AJUSTE DE ESTILO DE TEXTO (FUERTE) --- */
.steps-header h3 {
    /* Aseguramos que el título se vea en negritas */
    font-weight: 700;
}

/* Hacemos que la palabra en negrita dentro de los pasos sea más destacada */
.step-item p strong {
    /* Usamos el color principal y un peso fuerte para el texto destacado */
    color: var(--color-primario);
    font-weight: 800;
}

/* Ajuste de responsividad (la imagen se oculta en móvil para no interferir) */
@media (max-width: 768px) {
    .steps-header-logo-img {
        display: none; /* Ocultamos la imagen en móvil */
    }
    .steps-header {
        padding-right: 0; /* Eliminamos el padding extra */
    }
}

/* ======================================================= */
/* =========== SECCIÓN MARCAS DESTACADAS (DISEÑO ESTÁNDAR LIMPIO) =========== */
/* ======================================================= */

.seccion-marcas-destacadas {
    background-color: var(--color-fondo); /* Fondo suave */
    padding: 4rem 0;
    text-align: center;
}
body.dark-mode .seccion-marcas-destacadas {
    background-color: var(--color-fondo);
}

.marcas-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));
    gap: 1.5rem;
    margin-top: 3rem;
}

/* 1. Contenedor de la Tarjeta (Limpio y Centrado) */
.marca-card a {
    text-decoration: none; 
    color: inherit; 
    display: flex;
    flex-direction: column;
    height: 100%;
    /* Quitamos posición relative para evitar problemas con la imagen */
}

.marca-card {
    background-color: var(--color-superficie);
    border-radius: 12px;
    overflow: hidden;
    box-shadow: var(--sombra-caja);
    border: 1px solid var(--color-fondo);
    transition: transform 0.3s ease, box-shadow 0.3s ease, border-color 0.3s ease;
}

.marca-card:hover {
    transform: translateY(-8px);
    box-shadow: 0 12px 24px rgba(0,0,0,0.12);
    border-color: var(--color-primario);
}
body.dark-mode .marca-card {
    border-color: #333;
}

/* 2. Contenedor de la Imagen (Para tus promociones) */
.marca-card-imagen-promo {
    width: 100%;
    /* Usamos una proporción que se vea bien con tus imágenes de captura */
    aspect-ratio: 1 / 1; 
    overflow: hidden;
    display: flex;
    justify-content: center;
    align-items: center;
    background-color: #f0f0f0; /* Fondo gris claro por si la imagen no llena */
}
body.dark-mode .marca-card-imagen-promo {
    background-color: #1e1e1e;
}


/* La imagen de contenido promocional (NO ES UN LOGO, ES UN GRÁFICO) */
.promo-img-content {
    /* Mantenemos el tamaño dentro de su contenedor sin cortarla */
    max-width: 100%;
    max-height: 100%;
    object-fit: contain; 
    transition: transform 0.4s ease;
}
.marca-card:hover .promo-img-content {
    transform: scale(1.05); /* Zoom sutil en la promo */
}


/* 3. Pie de Tarjeta (Texto Limpio) */
.marca-card-caption-clean {
    padding: 1.5rem;
    flex-grow: 1;
}

.marca-card-caption-clean h3 {
    margin: 0 0 0.5rem 0;
    font-size: 1.3rem; /* Título más prominente */
    color: var(--color-texto-principal);
}

.marca-card-caption-clean p {
    font-size: 1rem; /* Descripción más legible */
    color: var(--color-texto-secundario);
    line-height: 1.5;
    margin-bottom: 0;
}

/* 4. Botón CTA Final (Ajuste de margen) */
.marcas-cta-boton {
    margin-top: 3rem;
}

/* --- Responsividad --- */
@media (max-width: 992px) {
    .marcas-grid {
        grid-template-columns: repeat(2, 1fr); 
    }
}

@media (max-width: 768px) {
    .marcas-grid {
        grid-template-columns: 1fr;
    }
}


/* Estilos para el contenedor que centra el botón */
.marcas-cta-boton {
    text-align: center;
    margin-top: 3rem; /* Margen superior para separarlo de la sección de marcas */
}

/* Estilos base del botón */
.boton-ver-mas {
    display: inline-block;
    background-color: var(--color-primario); /* Tu color turquesa */
    color: #fff;
    padding: 14px 30px; /* Más padding para hacerlo grande */
    text-decoration: none;
    border-radius: 8px; /* Bordes redondeados */
    font-weight: 700;
    font-size: 1.1rem; /* Letra un poco más grande */
    transition: all 0.3s ease; /* Transición suave para todos los efectos */
    border: 2px solid var(--color-primario);
}

/* Efecto al pasar el ratón */
.boton-ver-mas:hover {
    background-color: var(--color-primario-hover); /* Tu turquesa más oscuro */
    transform: translateY(-4px) scale(1.02); /* Se eleva y se agranda ligeramente */
    box-shadow: 0 10px 20px rgba(0, 0, 0, 0.2);
}

/* Estilo para el modo oscuro */
body.dark-mode .boton-ver-mas {
    border-color: var(--color-primario);
}

/* ======================================================= */
/* ====== CORRECCIÓN FINAL Y FORZADA DEL BOTÓN DE COMPRA ====== */
/* ======================================================= */

@media (max-width: 768px) {
    /* 1. Ocultar el texto forzadamente usando la especificidad del ID y la clase */
    
    /* Esta regla garantiza que el span del texto sea invisible en móvil. */
    #open-purchase-banner-btn span {
        display: none !important; 
    }

    /* 2. Asegurar el diseño circular (donde solo cabe el icono) */
    .purchase-trigger-button {
        /* Se copian los estilos para hacerlo circular */
        width: 50px;
        height: 50px;
        border-radius: 50%;
        padding: 0; /* Eliminamos el padding que el texto añade */
        display: flex;
        justify-content: center;
        align-items: center; 
    }

    /* 3. Ajuste del ícono */
    .purchase-trigger-button i {
        margin: 0;
    }
}





/* ======================================================= */
/* === BOTÓN RESPONSIVO Y AJUSTADO PARA FORMULARIO DE CONTACTO === */
/* ======================================================= */

/* Hereda los estilos visuales del botón genérico (.boton) */
.boton-contacto-form {
    display: inline-block;
    background: var(--color-primario);
    color: #fff;
    padding: 12px 24px;
    text-decoration: none;
    border-radius: 8px;
    margin-top: 1rem;
    font-weight: 700;
    transition: background-color 0.3s, transform 0.3s;

    /* CLAVE: Comportamiento de ancho total */
    width: 100%; 
    box-sizing: border-box; /* Asegura que el padding se incluya en el 100% */
}

.boton-contacto-form:hover {
    background: var(--color-primario-hover);
    transform: translateY(-3px);
}


/* --- Regla de ajuste específico para móviles --- */
@media (max-width: 768px) {
    .boton-contacto-form {
        /* Fuerza a que el botón tome el ancho completo, respetando el padding del contenedor. */
        width: 100%;
        /* Asegura que no tenga ningún margen negativo o estilo que lo empuje fuera. */
        margin-left: 0 !important;
        margin-right: 0 !important;
        
        /* Reducimos el padding en móvil para evitar que el texto se salga en pantallas muy pequeñas */
        padding: 10px 15px;
    }
}

@media screen and (max-height: 450px) and (max-width: 992px) and (orientation: landscape) {
    /* Ocultamos el banner de pasos de compra en dispositivos móviles y tabletas 
       cuando están en orientación horizontal (si la altura es muy pequeña). */
    .purchase-steps-banner {
        display: none !important;
    }

    /* Ocultamos también el botón que lo activa si está cerrado */
    .purchase-trigger-button {
        display: none !important;
    }
}

/* ======================================================= */
/* === [SOCIOS/CLIENTES] SECCIÓN COMPLETA Y CORREGIDA === */
/* ======================================================= */

/* Animación de encendido de color */
@keyframes color-in {
    0% {
        filter: grayscale(100%);
        opacity: 0.7;
    }
    100% {
        filter: grayscale(0%); 
        opacity: 1;
    }
}

/* 1. Contenedor de la Sección (Incluye el Fondo de Puntos y Control de Flujo) */
.seccion-socios {
    position: relative;
    width: 100%;
    min-height: 90vh;
    padding: 4rem 1rem;
    box-sizing: border-box;
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    overflow: hidden; 
    background-color: var(--color-superficie);
}

/* Fondo de puntos sutil (restaurado) */
.seccion-socios::before {
    content: '';
    position: absolute;
    top: 0; left: 0;
    width: 100%; height: 100%;
    background-image: radial-gradient(circle, var(--color-texto-secundario) 1px, transparent 1px);
    background-size: 30px 30px;
    opacity: 0.1;
    z-index: 0;
}

/* 2. Contenedor del Carrusel/Grid */
.socios-swiper-nuevo {
    width: 80%; /* Ancho de la cuadrícula en escritorio */
    max-width: 1200px;
    margin: 0 auto;
}

/* 3. Estilos de ESCRITORIO (Cuadrícula, por defecto) */
.socios-swiper-nuevo .swiper-wrapper {
    display: grid !important; 
    grid-template-columns: repeat(auto-fit, minmax(140px, 1fr)) !important;
    gap: 2rem !important;
    
    /* CLAVE: Centra los logos en la celda del grid */
    align-items: center !important; 
    justify-items: center !important; 

    /* Limpieza de residuos de Swiper */
    transform: none !important;
    flex-wrap: wrap !important;
    height: auto !important;
    margin: 0 !important;
}

.socios-swiper-nuevo .swiper-slide {
    width: auto !important; 
    margin: 0 !important;
}

/* Ocultamos la paginación en PC */
.socios-swiper-nuevo .swiper-pagination {
    display: none;
}



/* CLAVE: Limitar el tamaño de la imagen */
.socio-card img {
   max-width: 100%; 
    max-height: 100%;
    
    width: auto;
    height: auto;
    object-fit: contain;
transition: filter 1.5s ease-in-out, opacity 1.5s ease-in-out, transform 0.3s;
    /* CLAVE: Dejamos el estado INICIAL (gris) y la transición */
    filter: grayscale(100%); /* EMPIEZA GRIS */
    opacity: 0.7;
    transition: filter 0.5s ease, opacity 0.5s ease, transform 0.3s;
    
    /* ELIMINAMOS las líneas 'animation-name', 'animation-duration', etc. de aquí */
}


/* 💡 NUEVA CLASE: La usaremos en JS para controlar qué logo prende y cuándo. */
.socio-card img.is-lit {
    /* Estado final (A color), pero sin duración para que la transición de 0.5s funcione */
    filter: grayscale(0%);
    opacity: 1;
}

/* El hover DEBE mantener el efecto de encendido */
.socio-card:hover img {
    filter: grayscale(0%);
    opacity: 1;
}
/* 5. Estilos de MÓVIL (Carrusel) */
@media (max-width: 767px) {
    
    /* CLAVE: Refuerza el display: flex para anular el Grid */
    .socios-swiper-nuevo .swiper-wrapper {
        display: flex !important; 
        flex-direction: row !important; 
        flex-wrap: nowrap !important;   
        
        gap: 0 !important;
        grid-template-columns: none !important;
        
        /* Padding inicial para centrar visualmente el primer slide */
        padding-left: 30px; 
        
        /* Asegura que la altura sea automática para que no se estiren */
        height: auto !important; 
    }
    
    .socios-swiper-nuevo .swiper-slide {
        /* Ancho fijo para el slide en móvil */
        width: 150px !important; 
        flex-shrink: 0;
        margin-right: 20px !important; 
        /* Asegura que la tarjeta no se estire */
        height: auto !important; 
    }

    /* Mostramos la Paginación en móvil */
    .socios-swiper-nuevo .swiper-pagination {
        display: block;
        margin-top: 1.5rem;
    }
}

/* productos.css - Nueva sección de estilos para el botón simple */
/* ======================================================= */
/* === ESTILOS CORREGIDOS DEL BOTÓN COTIZAR (Clase: .boton-cotizar-simple) === */
/* ======================================================= */

.boton-cotizar-simple {
    display: inline-block;
    padding: 8px 18px;
    font-size: 0.95rem;
    font-weight: 700;
    text-decoration: none; /* Quita el subrayado del link */
    text-align: center;
    
    /* Diseño principal - Turquesa y Sólido */
    background-color: var(--color-primario); 
    color: #fff !important; /* Texto blanco forzado */
    border: 2px solid var(--color-primario); 
    border-radius: 6px;
    
    /* Animación y Sombra */
    transition: all 0.3s cubic-bezier(0.25, 0.46, 0.45, 0.94);
    box-shadow: 0 2px 5px rgba(0, 0, 0, 0.1); /* Sombra sutil por defecto */
    
    margin-left: auto; 
}

.boton-cotizar-simple:hover {
    background-color: var(--color-superficie); /* Fondo blanco en hover */
    color: var(--color-primario) !important; /* Texto primario en hover */
    border-color: var(--color-primario);
    
    /* Efecto de elevación */
    transform: translateY(-3px) scale(1.03); 
    box-shadow: 0 5px 15px rgba(0, 0, 0, 0.15); /* Sombra más fuerte */
}

/* Nota: Eliminamos la sintaxis @extend no válida del archivo CSS final. */


/* ======================================================= */
/* === [SOCIOS/CLIENTES] SECCIÓN FINAL (GRID + SWIPER) === */
/* ======================================================= */

/* 1. Contenedor General */
.seccion-socios {
    position: relative;
    padding: 4rem 0;
    background-color: var(--color-superficie);
    overflow: hidden;
}

/* Fondo de puntos sutil */
.seccion-socios::before {
    content: '';
    position: absolute;
    top: 0; left: 0; width: 100%; height: 100%;
    background-image: radial-gradient(circle, var(--color-texto-secundario) 1px, transparent 1px);
    background-size: 30px 30px;
    opacity: 0.1;
    z-index: 0;
}

.socios-contenido {
    text-align: center;
    margin-bottom: 3rem;
    position: relative;
    z-index: 2;
}

/* 2. Contenedor del Swiper/Grid */
.socios-swiper-nuevo {
    width: 100%;
    max-width: 1200px;
    margin: 0 auto;
    /* CLAVE: Padding para que las sombras no se corten en el carrusel */
    padding: 20px 10px 50px 10px !important; 
    overflow: hidden; 
}

/* 3. Estilos de la Tarjeta de Logo */
.socio-card {
    background-color: #ffffff; /* Fondo blanco limpio */
    border: 1px solid rgba(0,0,0,0.05);
    border-radius: 16px;
    display: flex;
    justify-content: center;
    align-items: center;
    
    box-shadow: 0 5px 15px rgba(0,0,0,0.05);
    
    /* Tamaño fijo para uniformidad */
    width: 160px; 
    height: 140px; 
    
    /* Transición para hover manual */
    transition: transform 0.5s ease, box-shadow 0.5s ease;
}

/* Modo Oscuro */
body.dark-mode .socio-card {
    background-color: #2c2c2c;
    border-color: rgba(255,255,255,0.1);
}

.socio-card:hover {
    transform: translateY(-5px);
    box-shadow: 0 12px 30px rgba(0,0,0,0.15);
    z-index: 2;
}

/* 4. Estilos de la Imagen (El efecto de color) */
.socio-card img {
    max-width: 100%;
    max-height: 100%;
    object-fit: contain;
    
    /* ESTADO INICIAL: Blanco y Negro y un poco transparente */
    filter: grayscale(100%) opacity(0.6);
    
    /* ANIMACIÓN SUPER LENTA Y FLUIDA */
    transition: filter 2.5s cubic-bezier(0.4, 0, 0.2, 1), 
                opacity 2.5s cubic-bezier(0.4, 0, 0.2, 1), 
                transform 2.5s ease;
}

/* Clase que añade JS para "encender" el logo suavemente */
.socio-card img.is-lit {
    filter: grayscale(0%) opacity(1); /* Full color */
    transform: scale(1.05); /* Zoom muy sutil */
}

/* Si pasas el mouse, también se enciende rápido */
.socio-card:hover img {
    filter: grayscale(0%) opacity(1);
    transition: all 0.4s ease; /* En hover es más rápido para dar feedback */
}


/* --- REGLAS ESPECÍFICAS PARA ESCRITORIO (GRID) --- */
@media (min-width: 769px) {
    .socios-swiper-nuevo .swiper-wrapper {
        /* Forzamos Grid en escritorio, anulando Swiper */
        display: grid !important;
        grid-template-columns: repeat(auto-fit, minmax(160px, 1fr)) !important;
        gap: 2rem !important;
        transform: none !important; /* Anula desplazamiento de Swiper */
        width: 100% !important;
        box-sizing: border-box;
    }

    .socios-swiper-nuevo .swiper-slide {
        width: auto !important; /* Anula ancho de Swiper */
        margin: 0 !important;
    }
    
    .socios-nuevo-pagination {
        display: none; /* Ocultar puntos en PC */
    }
}

/* --- REGLAS ESPECÍFICAS PARA MÓVIL (CARRUSEL SWIPER REAL) --- */
@media (max-width: 768px) {
    .socios-swiper-nuevo {
        /* En móvil necesitamos overflow visible a veces para sombras, 
           pero hidden para que no rompa el ancho de página */
        overflow: hidden; 
        padding-bottom: 40px !important;
    }
    
    .socios-swiper-nuevo .swiper-wrapper {
        display: flex; /* Swiper necesita flex */
    }

    .socio-card {
        /* Ajuste de tamaño para móvil */
        width: 140px;
        height: 120px;
    }
    
    /* Ajuste de los puntos de paginación */
    .socios-nuevo-pagination .swiper-pagination-bullet-active {
        background-color: var(--color-primario);
        width: 20px;
        border-radius: 10px;
    }
}

/* --- REGLAS ESPECÍFICAS PARA ESCRITORIO (GRID FLUIDO) --- */
@media (min-width: 769px) {
    
    /* 1. El contenedor principal del Swiper */
    .socios-swiper-nuevo {
        /* Importante: Quitamos el overflow hidden para que se vean las sombras */
        overflow: visible !important; 
        /* Altura automática para que crezca si hay muchas filas */
        height: auto !important;
        /* Padding generoso para que las tarjetas de los bordes no se corten */
        padding: 2rem !important; 
    }

    /* 2. El Wrapper (que normalmente mueve el carrusel) */
    .socios-swiper-nuevo .swiper-wrapper {
        /* Forzamos Grid y anulamos comportamiento de fila de Swiper */
        display: grid !important;
        /* Ajuste automático: crea tantas columnas como quepan, mínimo 150px cada una */
        grid-template-columns: repeat(auto-fill, minmax(150px, 1fr)) !important;
        gap: 2.5rem !important; /* Espacio entre tarjetas */
        
        /* Reseteos obligatorios para matar el carrusel en PC */
        transform: none !important; 
        width: 100% !important;
        height: auto !important;
        box-sizing: border-box;
        margin: 0 !important;
    }

    /* 3. Cada Tarjeta (Slide) */
    .socios-swiper-nuevo .swiper-slide {
        width: auto !important; 
        height: auto !important;
        margin: 0 !important;
        /* Asegura que la tarjeta se expanda para llenar su celda del grid */
        display: flex;
        justify-content: center;
    }
    
    /* Ocultar puntos en PC */
    .socios-nuevo-pagination {
        display: none !important; 
    }
}

/* --- AJUSTE PARA QUE EL CONTENEDOR PADRE NO CORTE NADA --- */
.seccion-socios {
    /* Permitimos que el contenido interior empuje la altura */
    height: auto;
    min-height: auto;
    /* Solo ocultamos el desbordamiento horizontal de la página, no el vertical */
    overflow-x: hidden;
    overflow-y: visible;
}

/* ======================================================= */
/* === [SOCIOS/CLIENTES] SECCIÓN FINAL (GRID + FLOAT) === */
/* ======================================================= */

/* 1. Contenedor General */
.seccion-socios {
    position: relative;
    padding: 4rem 0;
    background-color: var(--color-superficie);
    overflow: hidden;
}

/* Fondo */
.seccion-socios::before {
    content: '';
    position: absolute;
    top: 0; left: 0; width: 100%; height: 100%;
    background-image: radial-gradient(circle, var(--color-texto-secundario) 1px, transparent 1px);
    background-size: 30px 30px;
    opacity: 0.1;
    z-index: 0;
}

.socios-contenido {
    text-align: center;
    margin-bottom: 3rem;
    position: relative;
    z-index: 2;
}

/* 2. Contenedor del Swiper */
.socios-swiper-nuevo {
    width: 100%;
    max-width: 1200px;
    margin: 0 auto;
    padding: 20px 0 50px 0 !important; 
    overflow: hidden; 
}

/* Transición lineal para el efecto de movimiento continuo */
.socios-swiper-nuevo .swiper-wrapper {
    transition-timing-function: linear;
}

/* 3. Estilos de la Tarjeta de Logo */
.socio-card {
    background-color: #ffffff; 
    border: 1px solid rgba(0,0,0,0.05);
    border-radius: 16px;
    display: flex;
    justify-content: center;
    align-items: center;
    padding: 1.5rem;
    box-shadow: 0 5px 15px rgba(0,0,0,0.05);
    
    /* Tamaño Base */
    width: 160px; 
    height: 140px; 
    
    transition: transform 0.5s ease, box-shadow 0.5s ease;
}

body.dark-mode .socio-card {
    background-color: #2c2c2c;
    border-color: rgba(255,255,255,0.1);
}

.socio-card:hover {
    transform: translateY(-5px) scale(1.05);
    box-shadow: 0 12px 30px rgba(0,0,0,0.15);
    z-index: 2;
}

/* 4. Estilos de la Imagen (Efecto Negro a Color) */
.socio-card img {
    max-width: 100%;
    max-height: 100%;
    object-fit: contain;
    
    /* INICIO: Blanco y negro, semitransparente */
    filter: grayscale(100%);
    opacity: 0.6;
    
    /* Transición SUPER LENTA (2.5s) */
    transition: filter 2.5s ease, opacity 2.5s ease, transform 0.5s ease;
}

/* CLASE JS: Se activa aleatoriamente */
.socio-card img.is-lit {
    filter: grayscale(0%);
    opacity: 1;
    transform: scale(1.05);
}

/* HOVER: Se activa instantáneamente */
.socio-card:hover img {
    filter: grayscale(0%);
    opacity: 1;
    transition: all 0.3s ease; 
}


/* --- ESCRITORIO (GRID ESTÁTICO) --- */
@media (min-width: 769px) {
    .socios-swiper-nuevo .swiper-wrapper {
        display: grid !important;
        grid-template-columns: repeat(auto-fit, minmax(160px, 1fr)) !important;
        gap: 2rem !important;
        transform: none !important; 
        width: 100% !important;
        margin: 0 !important;
    }
    .socios-swiper-nuevo .swiper-slide {
        width: auto !important;
        margin: 0 !important;
    }
}

/* --- MÓVIL (CARRUSEL FLOTANTE) --- */
@media (max-width: 768px) {
    .socios-swiper-nuevo {
        padding-bottom: 20px !important;
    }
    
    .socios-swiper-nuevo .swiper-wrapper {
        display: flex !important;
        /* Eliminamos grid y gap para que swiper controle el espacio */
        gap: 0 !important; 
    }

    .socios-swiper-nuevo .swiper-slide {
        width: 140px !important; /* Ancho fijo más pequeño para móvil */
        height: auto !important;
        margin-right: 20px !important; /* Espacio entre tarjetas */
        
        /* Animación de flotación vertical */
        animation: floatingY 4s ease-in-out infinite;
    }
    
    /* Variamos la animación para que no se muevan todos igual */
    .socios-swiper-nuevo .swiper-slide:nth-child(odd) {
        animation-duration: 5s;
        animation-delay: 0.5s;
    }
    .socios-swiper-nuevo .swiper-slide:nth-child(even) {
        animation-duration: 6s;
        animation-delay: 0s;
    }
    
    .socio-card {
        width: 100%; /* Ocupa el ancho del slide */
        height: 120px; /* Altura móvil */
    }
}

/* Animación de flotación vertical */
@keyframes floatingY {
    0% { transform: translateY(0); }
    50% { transform: translateY(-10px); }
    100% { transform: translateY(0); }
}

/* ============================================= */
/* === ANIMACIÓN ESPACIAL MEJORADA (MÓVIL) === */
/* ============================================= */

/* 1. Definimos una animación más "viva" */
@keyframes spaceFloat {
    0% { 
        transform: translateY(0) scale(1) rotate(0deg); 
        box-shadow: 0 5px 15px rgba(0,0,0,0.05);
    }
    50% { 
        /* Sube, crece un poco y rota sutilmente */
        transform: translateY(-15px) scale(1.05) rotate(2deg); 
        box-shadow: 0 15px 30px rgba(0,0,0,0.15); /* La sombra crece al "subir" */
    }
    100% { 
        transform: translateY(0) scale(1) rotate(0deg); 
        box-shadow: 0 5px 15px rgba(0,0,0,0.05);
    }
}

/* --- MÓVIL (CARRUSEL FLOTANTE) --- */
@media (max-width: 768px) {
    .socios-swiper-nuevo {
        padding-bottom: 40px !important;
        overflow: visible !important; /* Para que no se corten las sombras flotantes */
    }
    
    /* Ajuste para que el movimiento continuo sea fluido lineal */
    .socios-swiper-nuevo .swiper-wrapper {
        transition-timing-function: linear;
    }

    .socios-swiper-nuevo .swiper-slide {
        width: 150px !important; 
        height: auto !important;
        margin-right: 25px !important; 
        display: flex;
        justify-content: center;
        align-items: center;
    }
    
    /* Aplicamos la animación al contenedor de la tarjeta */
    .socio-card {
        width: 100%; 
        height: 130px; 
        /* Aplicamos la animación espacial */
        animation: spaceFloat 4s ease-in-out infinite;
    }
    
    /* Variación para que parezca desordenado/orgánico */
    .socios-swiper-nuevo .swiper-slide:nth-child(odd) .socio-card {
        animation-duration: 5s;
        animation-delay: 0s;
    }
    
    .socios-swiper-nuevo .swiper-slide:nth-child(even) .socio-card {
        animation-duration: 6s;
        animation-delay: 2.5s; /* Empieza a destiempo */
    }
    
    /* Pausar la animación si el usuario toca la tarjeta */
    .socio-card:active {
        animation-play-state: paused;
    }
}

/* ======================================================= */
/* === AJUSTE DE CENTRADO PARA HERO DE CONTACTO === */
/* ======================================================= */

.hero-contacto-centrado {
    /* Forzamos el centrado de todo el texto que contiene */
    text-align: center !important; 
    
    /* Aseguramos que los elementos internos también estén centrados */
    display: flex;
    flex-direction: column;
    align-items: center; /* Centrado horizontal de los elementos */
}
/* Estilos para el mapa de Google */
.mapa-contenedor {
    margin-top: 2rem;
    border-radius: 12px;
    overflow: hidden;
    box-shadow: var(--sombra-caja); /* */
    border: 1px solid rgba(0,0,0,0.05);
}

.mapa-contenedor iframe {
    width: 100%;
    height: 300px; /* La altura en tu CSS es 300px. En el HTML la aumenté a 450px para que destaque. */
    display: block;
    filter: grayscale(80%); /* Efecto blanco y negro sutil */
    transition: filter 0.3s ease;
}

.mapa-contenedor iframe:hover {
    filter: grayscale(0%); /* Vuelve al color original al pasar el ratón */
}

/* ======================================================= */
/* === [CULTURA] ESTILOS DE FLECHAS EN MÓVIL (SOLO FLECHA) === */
/* ======================================================= */

/* Ocultar las flechas por defecto en PC (se usará el grid) */
.valores-swiper-nuevo .swiper-button-prev,
.valores-swiper-nuevo .swiper-button-next,
.principios-swiper-nuevo .swiper-button-prev,
.principios-swiper-nuevo .swiper-button-next {
    display: none; /* Oculto por defecto */
}

/* Mostrar las flechas solo en móvil y aplicar el estilo de 'solo flecha' */
@media (max-width: 767px) {
    .valores-swiper-nuevo .swiper-button-prev,
    .valores-swiper-nuevo .swiper-button-next,
    .principios-swiper-nuevo .swiper-button-prev,
    .principios-swiper-nuevo .swiper-button-next {
        display: block; /* Mostrar en móvil */
        
        /* Estilos para que solo sea la flecha */
        color: var(--color-primario); /* El color turquesa */
        background-color: transparent; /* Fondo transparente */
        width: 30px; /* Tamaño del área de la flecha */
        height: 30px;
        box-shadow: none; /* Sin sombra */
        border-radius: 0; /* Sin bordes redondeados (ya que no hay fondo) */
        
        z-index: 10;
        
        /* Posicionamiento */
        top: 50%;
        transform: translateY(-50%);
        cursor: pointer;
        transition: color 0.3s ease;
    }
    
    /* Efecto hover (opcional, pero recomendado) */
    .valores-swiper-nuevo .swiper-button-prev:hover,
    .valores-swiper-nuevo .swiper-button-next:hover,
    .principios-swiper-nuevo .swiper-button-prev:hover,
    .principios-swiper-nuevo .swiper-button-next:hover {
        color: var(--color-secundario); /* Cambia de color al pasar el mouse */
    }

    /* Ajustar el tamaño y grosor del ícono de la flecha */
    .valores-swiper-nuevo .swiper-button-prev::after,
    .valores-swiper-nuevo .swiper-button-next::after,
    .principios-swiper-nuevo .swiper-button-prev::after,
    .principios-swiper-nuevo .swiper-button-next::after {
        font-size: 1.5rem; /* Tamaño de la flecha */
        font-weight: 900; /* Flecha más gruesa */
    }
    
    /* Pequeño ajuste para que no se peguen a la orilla */
    .valores-swiper-nuevo .swiper-button-prev,
    .principios-swiper-nuevo .swiper-button-prev {
        left: 5px; 
    }

    .valores-swiper-nuevo .swiper-button-next,
    .principios-swiper-nuevo .swiper-button-next {
        right: 5px; 
    }
}