/* ==================================== */
/* 0. CONFIGURACIÓN BASE Y VARIABLES      */
/* ==================================== */

:root {
 --cannon-green: #124a33; /* VERDE CANNON PROFUNDO (PREMIUM) */
    --green-dark-hover: #007040; /* Hover para el botón/barra superior */
    --la-colchoneta-celeste: #1E90FF; /* Celeste/Azul para Highlights */
    --text-dark: #333333;
    --text-light: #555555;
    --background-grey: #f5f5f5;
    --max-width: 1200px;
}

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

body {
    font-family: 'Montserrat', sans-serif;
    /* FIX: Ocultar el overflow horizontal que pueden causar las animaciones */
    overflow-x: hidden;
}

/* Contenedor central (para centrar todo el contenido) */
.container {
    max-width: var(--max-width);
    margin: 0 auto;
    padding: 0 20px;
}

/* ==================================== */
/* 1. HEADER / CABECERA (Ahora GREEN)   */
/* ==================================== */

.top-bar {
    background-color: var(--cannon-green); /* ¡VERDE! */
    color: white;
    text-align: center;
    padding: 8px 0;
    font-size: 0.85em;
    font-weight: 500;
}

.main-header {
    box-shadow: 0 1px 5px rgba(0, 0, 0, 0.08);
    /* MAGIA STICKY */
    position: sticky;
    top: 0;
    z-index: 1000; /* Para que quede arriba de todo */
    background-color: white; /* Fondo blanco para que no sea transparente al bajar */
    transition: box-shadow 0.3s;
}

.logo-nav-container {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 15px 20px;
    max-width: var(--max-width);
    margin: 0 auto;
}

.logo {
    font-size: 0;
    color: transparent;
    display: flex;
    align-items: center; /* Centra verticalmente la imagen del logo */
    height: 40px; /* Igual a la altura de la imagen del logo */
}

/* Estilo para la imagen del logo inyectada */
.header-logo {
    max-height: 40px;
    width: auto;
    display: block;
}

.main-nav a {
    text-decoration: none;
    color: var(--text-light);
    margin: 0 15px;
    font-size: 0.95em;
    font-weight: bold;
    transition: color 0.3s;
}

.main-nav a:hover {
    color: var(--cannon-green); /* ¡VERDE! */
}

.user-actions {
    display: flex;
    align-items: center;
    gap: 15px; /* Espaciado uniforme entre los enlaces */
}

/* ==================================== */
/* 1.5 ESTILOS MENÚ MÓVIL Y HAMBURGUESA */
/* ==================================== */

.hamburger-button {
    display: none; /* Oculto en desktop */
    background: none;
    border: none;
    cursor: pointer;
    padding: 10px;
    z-index: 1001; /* Por encima de todo */
}

.hamburger-line {
    display: block;
    width: 25px;
    height: 3px;
    background-color: var(--text-dark);
    margin: 5px 0;
    transition: transform 0.3s, opacity 0.3s;
}

/* Estilos de la 'X' cuando está activo */
.hamburger-button.activo .hamburger-line:nth-child(1) {
    transform: translateY(8px) rotate(45deg);
}
.hamburger-button.activo .hamburger-line:nth-child(2) {
    opacity: 0;
}
.hamburger-button.activo .hamburger-line:nth-child(3) {
    transform: translateY(-8px) rotate(-45deg);
}


.mobile-menu-panel {
    background-color: white;
    position: absolute; /* Se superpone al contenido */
    top: 100px; /* Ajustar si tu header es más alto/bajo */
    left: 0;
    width: 100%;
    z-index: 1000;
    box-shadow: 0 5px 10px rgba(0,0,0,0.1);

    /* Oculto por defecto */
    max-height: 0;
    overflow: hidden;
    transition: max-height 0.4s ease-out;
}

/* Estado 'abierto' que activará JS */
.mobile-menu-panel.abierto {
    max-height: 500px; /* Altura suficiente para los links */
}

.mobile-nav a {
    display: block;
    padding: 18px 25px;
    text-decoration: none;
    color: var(--text-dark);
    font-weight: bold;
    border-bottom: 1px solid #f0f0f0;
}

.mobile-nav a:hover {
    background-color: var(--background-grey);
    color: var(--cannon-green);
}

/* ============================================== */
/* 2. HERO / CARRUSEL (NUEVO, HÍBRIDO) */
/* ============================================== */
.hero-carousel {
    position: relative;
    overflow: hidden;
    height: 550px;
    display: flex;
    align-items: center; /* Centrado vertical */
    justify-content: flex-start; /* ALINEADO IZQUIERDA */
    padding: 40px 100px;
    color: white;
}

/* Clases para las imágenes de fondo */
.hero-background {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background-size: cover;
    background-position: center center;
    background-repeat: no-repeat;
    z-index: 1;
    transition: opacity 0.5s ease-in-out;
}

.hero-background-desktop {
    opacity: 1; /* Visible por defecto en desktop */
}

.hero-background-mobile {
    opacity: 0; /* Oculto por defecto en desktop */
}

/* Estilos de texto (del Backup) */
.slide-content {
    position: relative;
    z-index: 2;
    margin: 0;
    padding: 0;
    text-align: left;
    max-width: 600px;
}

.slide-tag {
    font-size: 2.2em;
    font-weight: 900;
    letter-spacing: 0.1em;
    color: var(--la-colchoneta-celeste);
    margin-bottom: 5px;
}

.slide-content h1 {
    color: white;
    font-size: 5.8em;
    font-weight: 900;
    line-height: 0.95;
}

.slide-content .h1-secondary {
    color: white;
    font-size: 5.8em;
    font-weight: 900;
    line-height: 0.95;
    margin-top: 0;
}

.slide-subtitle {
    font-size: 1.5em;
    color: white;
    margin-top: 25px;
    margin-bottom: 35px;
    font-weight: 500;
}

.btn-main {
    display: inline-block;
    background-color: var(--cannon-green); /* Usa el verde nuevo */
    color: white;
    padding: 14px 35px;
    text-decoration: none;
    font-weight: 800; /* Más grueso para que se lea bien */
    border-radius: 5px;
    transition: background-color 0.3s, transform 0.3s, box-shadow 0.3s;
    letter-spacing: 1px; /* Un toque de aire */
    font-size: 1.1em;
    box-shadow: 0 4px 15px rgba(0, 0, 0, 0.2); /* Sombra sutil */
    border: none;
    cursor: pointer;
}

.btn-main:hover {
    background-color: #0e3b29; /* Un verde aún más oscuro al pasar el mouse */
    color: white !important; /* FORZAMOS BLANCO para que no se ponga azul */
    transform: translateY(-2px); /* Efecto de elevación */
    box-shadow: 0 6px 20px rgba(0, 0, 0, 0.3);
}

/* ==================================== */
/* 2.5 ANIMACIÓN (La del Backup "Premium") */
/* ==================================== */

.slide-content .slide-tag,
.slide-content h1,
.slide-content .h1-secondary,
.slide-content .slide-subtitle,
.slide-content .btn-main {
    opacity: 0;
    transform: translateX(-80px);
    transition: opacity 1.2s cubic-bezier(0.175, 0.885, 0.32, 1.275),
    transform 1.2s cubic-bezier(0.175, 0.885, 0.32, 1.275);
}

.slide-content.animate-in .slide-tag,
.slide-content.animate-in h1,
.slide-content.animate-in .h1-secondary,
.slide-content.animate-in .slide-subtitle,
.slide-content.animate-in .btn-main {
    opacity: 1;
    transform: translateX(0);
}

.slide-content.animate-in .slide-tag { transition-delay: 0.3s; }
.slide-content.animate-in h1 { transition-delay: 0.7s; }
.slide-content.animate-in .h1-secondary { transition-delay: 1.1s; }
.slide-content.animate-in .slide-subtitle { transition-delay: 1.6s; }
.slide-content.animate-in .btn-main { transition-delay: 2.1s; }


/* ==================================== */
/* 2.9 TÍTULO SEPARADOR DE CATEGORÍAS   */
/* ==================================== */
.category-title-container {
    text-align: center;
    margin-top: 60px; /* Buen espacio desde el Hero */
    margin-bottom: -10px; /* Compensa el margin-top de las cards */
    padding: 0 20px;
}

.category-title-container h2 {
    font-size: 2em;
    font-weight: 800;
    text-transform: uppercase;
    color: var(--text-dark);
}



/* ==================================== */
/* 3. SECCIÓN DE CATEGORÍAS RÁPIDAS (RENOVADO) */
/* ==================================== */
.quick-categories-grid {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 30px;
    max-width: var(--max-width);
    margin: 40px auto;
    padding: 0 20px;
}

.category-item {
    position: relative; /* Contexto para el link y overlay */
    border-radius: 8px; /* Bordes redondeados */
    overflow: hidden; /* Para el zoom */
    min-height: 280px; /* Misma altura que las product cards */
    display: flex;
    align-items: center;
    justify-content: center;
    transition: transform 0.3s ease;

    /* Estilos de fondo (se ponen inline en el HTML) */
    background-size: cover;
    background-position: center;

    /* Le sacamos el borde viejo y la sombra */
    border: none;
    box-shadow: 0 5px 15px rgba(0,0,0,0.1);
}

.category-item:hover {
    transform: scale(1.05); /* Zoom al pasar el mouse */
}

/* Overlay oscuro para legibilidad */
.category-item::before {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background: linear-gradient(0deg, rgba(0,0,0,0.5) 0%, rgba(0,0,0,0.1) 50%, rgba(0,0,0,0.5) 100%);
    z-index: 1;
    transition: background 0.3s ease;
}

.category-item:hover::before {
    background: linear-gradient(0deg, rgba(0,0,0,0.3) 0%, rgba(0,0,0,0) 50%, rgba(0,0,0,0.3) 100%);
}

/* Link "Stretchy" (ocupa todo el div) */
.category-item a {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    display: flex;
    align-items: center;
    justify-content: center;
    text-decoration: none;
    z-index: 2; /* Por encima del overlay */
}

.category-item h2 {
    color: white; /* Texto blanco */
    font-size: 2em; /* Más grande */
    text-shadow: 2px 2px 4px rgba(0,0,0,0.7); /* Sombra para resaltar */
    z-index: 2;
    position: relative; /* Para que el z-index aplique */
}

/* ==================================== */
/* 4. SECCIÓN DE PRODUCTOS DESTACADOS */
/* ==================================== */
.featured-products {
    max-width: var(--max-width);
    margin: 60px auto;
    padding: 0 20px;
    text-align: center;
}

.featured-products h2 {
    font-size: 2em;
    margin-bottom: 30px;
    font-weight: 800;
    text-transform: uppercase;
}

.product-grid {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 30px; /* Un poco más de espacio */
}

/* --- ESTILOS DE LA NUEVA PRODUCT CARD --- */

.product-card {
    background-color: white;
    border: 1px solid #eee;
    text-align: left; /* Alineamos el texto a la izquierda */
    border-radius: 8px;
    overflow: hidden; /* Para que el badge no se salga */
    display: flex;
    flex-direction: column;
    box-shadow: 0 2px 8px rgba(0,0,0,0.05);
    transition: box-shadow 0.3s, transform 0.3s;
}

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

.product-image-container {
    position: relative; /* Contexto para el badge */
    border-bottom: 1px solid #eee;
    background-color: #f9f9f9; /* Fondo mientras carga la img */
}

.product-image {
    width: 100%;
    height: 280px; /* Altura fija para todas las imágenes */
    object-fit: cover; /* Escala la imagen para cubrir el espacio */
    display: block;
    transition: transform 0.3s;
}

.product-card:hover .product-image {
    transform: scale(1.05); /* Sutil zoom al pasar el mouse */
}

.product-badge {
    position: absolute;
    top: 15px;
    left: 15px;
    background-color: var(--cannon-green); /* ¡Verde! */
    color: white;
    padding: 5px 10px;
    font-size: 0.8em;
    font-weight: bold;
    border-radius: 4px;
    z-index: 10;
}

.product-info {
    padding: 20px;
    display: flex;
    flex-direction: column;
    flex-grow: 1; /* Ocupa el espacio disponible */
}

.product-title {
    font-size: 1.1em;
    font-weight: 600;
    color: var(--text-dark);
    margin-bottom: 10px;
    /* Truco para 2 líneas de texto */
    min-height: 2.4em;
    line-height: 1.2em;
}

.product-title a {
    text-decoration: none;
    color: inherit;
    transition: color 0.3s;
}

.product-title a:hover {
    color: var(--cannon-green);
}

.product-prices {
    margin-bottom: 8px;
    display: flex;
    align-items: center;
    gap: 10px;
}

.price-old {
    font-size: 0.9em;
    color: var(--text-light);
    text-decoration: line-through;
}

.price-new {
    font-size: 1.3em;
    font-weight: bold;
    color: var(--cannon-green); /* ¡Verde! */
}

.product-installments {
    font-size: 0.85em;
    color: var(--text-dark);
    font-weight: 500;
    margin-bottom: 20px; /* Más espacio antes del botón */
}

.btn-product {
    display: inline-block;
    background-color: white;
    color: var(--cannon-green); /* Verde */
    padding: 10px 20px;
    text-decoration: none;
    font-weight: bold;
    border-radius: 5px;
    transition: background-color 0.3s, color 0.3s;
    text-align: center;
    border: 2px solid var(--cannon-green);
    margin-top: auto; /* EMPUJA EL BOTÓN AL FONDO */
}

.btn-product:hover {
    background-color: var(--cannon-green);
    color: white;
}




/* ==================================== */
/* 6. ESTILOS DE LACOLCHONETA (Celeste) */
/* ==================================== */

.section-title {
    text-align: center;
    font-size: 2.2em;
    font-weight: 800;
    margin-bottom: 50px;
    padding-top: 30px;
}

.buy-benefits {
    background-image: linear-gradient(to bottom, #d6f2fa, #f0f7f9);
    padding: 60px 0;
    margin-top: 40px;
}

.benefits-grid {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: 20px;
    margin-bottom: 50px;
}

.benefit-card {
    background-color: white;
    border-radius: 15px;
    padding: 30px;
    text-align: center;
    box-shadow: 0 4px 10px rgba(0, 0, 0, 0.08);
    transition: transform 0.3s ease, box-shadow 0.3s ease;
    min-height: 220px;
    display: flex;
    flex-direction: column;
    align-items: center;
}

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

.benefit-card h3 {
    font-size: 1.3em;
    margin: 10px 0;
    color: var(--text-dark);
}

.benefit-card p {
    color: var(--text-light);
    font-size: 0.9em;
}

/* ==================================== */
/* 6.5 ESTILOS DE ÍCONOS SVG (MODIFICADO) */
/* ==================================== */

/* Estilo unificado para íconos de "Beneficios" */
.icon {
    font-size: 0; /* Para que el span no ocupe espacio */
    color: var(--cannon-green); /* ¡VERDE! */
    width: 50px;
    height: 50px;
    margin-bottom: 15px;
    display: block; /* Aseguramos el display */
}

.icon svg {
    width: 100%;
    height: 100%;
    fill: none; /* Relleno transparente */
    stroke: currentColor; /* El borde toma el color (verde) */
    stroke-width: 1.5; /* Grosor de línea profesional */
}

.how-it-works {
    background-color: white;
    padding: 60px 0 80px 0;
}

.works-grid {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: 30px;
}

.work-card {
    background-color: var(--background-grey);
    border-radius: 10px;
    padding: 20px;
    text-align: center;
    box-shadow: 0 2px 5px rgba(0, 0, 0, 0.05);
    transition: transform 0.3s ease, background-color 0.3s ease;
}

.work-card:hover {
    transform: translateY(-3px);
    background-color: #e8e8e8;
}

/* Estilo unificado para íconos de "Cómo Funciona" */
.work-icon {
    font-size: 0;
    color: var(--cannon-green);
    width: 60px; /* Un poco más grandes */
    height: 60px;
    margin: 10px auto 15px;
    display: block;
}

.work-icon svg {
    width: 100%;
    height: 100%;
    fill: none;
    stroke: currentColor;
    stroke-width: 1.5;
}


.work-card h3 {
    font-size: 1.1em;
    margin-bottom: 10px;
    font-weight: bold;
}

/* ==================================== */
/* 7. TESTIMONIOS (NUEVO)               */
/* ==================================== */
.testimonials {
    background-color: var(--background-grey); /* Fondo suave */
    padding: 60px 0 80px 0;
}

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

.testimonial-card {
    background-color: white;
    border-radius: 8px;
    padding: 30px;
    box-shadow: 0 4px 15px rgba(0,0,0,0.07);
    display: flex;
    flex-direction: column;
}

.testimonial-rating {
    font-size: 1.2em;
    color: #FFC107; /* Amarillo/Oro para estrellas */
    margin-bottom: 15px;
}

.testimonial-text {
    font-size: 1em;
    color: var(--text-light);
    font-style: italic;
    line-height: 1.6;
    flex-grow: 1; /* Empuja el nombre al fondo */
    margin-bottom: 20px;
}

.testimonial-name {
    font-size: 1.1em;
    font-weight: 600;
    color: var(--text-dark);
    text-align: right;
}

/* ======================================== */
/* 8. ANIMACIONES SCROLL-REVEAL (NUEVO)     */
/* ======================================== */

/* 1. Estado Inicial (Oculto) */
.animate-on-scroll {
    opacity: 0;
    transform: translateY(20px);
    transition: opacity 0.6s ease-out, transform 0.6s ease-out;
}

/* 2. Estado Final (Visible) - disparado por JS */
.animate-on-scroll.is-visible {
    opacity: 1;
    transform: translateY(0);
}

/* 3. Delays "Facheritos" para las grillas */
.quick-categories-grid .animate-on-scroll:nth-child(2),
.product-grid .animate-on-scroll:nth-child(2),
.testimonial-grid .animate-on-scroll:nth-child(2) {
    transition-delay: 0.1s;
}

.quick-categories-grid .animate-on-scroll:nth-child(3),
.product-grid .animate-on-scroll:nth-child(3),
.testimonial-grid .animate-on-scroll:nth-child(3) {
    transition-delay: 0.2s;
}

/* Grillas de 4 columnas */
.benefits-grid .animate-on-scroll:nth-child(2),
.works-grid .animate-on-scroll:nth-child(2) {
    transition-delay: 0.1s;
}
.benefits-grid .animate-on-scroll:nth-child(3),
.works-grid .animate-on-scroll:nth-child(3) {
    transition-delay: 0.2s;
}
.benefits-grid .animate-on-scroll:nth-child(4),
.works-grid .animate-on-scroll:nth-child(4) {
    transition-delay: 0.3s;
}


/* ==================================== */
/* MEDIA QUERIES (RESPONSIVIDAD)        */
/* ==================================== */

@media (max-width: 1024px) {
    /* Grillas a 2 columnas en Tablet */
    .benefits-grid, .works-grid, .product-grid, .quick-categories-grid,
    .testimonial-grid {
        grid-template-columns: repeat(2, 1fr);
        gap: 25px;
    }

    /* Reseteamos los delays para 2 columnas */
    .quick-categories-grid .animate-on-scroll:nth-child(3),
    .product-grid .animate-on-scroll:nth-child(3),
    .testimonial-grid .animate-on-scroll:nth-child(3) {
        transition-delay: 0s;
    }

    .benefits-grid .animate-on-scroll:nth-child(3),
    .works-grid .animate-on-scroll:nth-child(3) {
        transition-delay: 0.1s;
    }

    .benefits-grid .animate-on-scroll:nth-child(4),
    .works-grid .animate-on-scroll:nth-child(4) {
        transition-delay: 0.2s;
    }
}


/* ============================================ */
/* ESTE ES EL ÚNICO BLOQUE PARA MÓVIL (SWIPE UPGRADE) */
/* ============================================ */
@media (max-width: 600px) {

    /* 1. HEADER / CABECERA */
    .logo-nav-container {
        padding: 10px 20px;
        justify-content: space-between;
    }

    .main-nav { display: none; }
    .user-actions { display: none; }
    .hamburger-button { display: block; }

    .header-logo {
        max-width: 120px;
        max-height: 35px;
    }

    /* 2. HERO / CARRUSEL (MÓVIL) - CON EL FIX */
    .hero-carousel {
        height: 450px;
        padding: 0 20px;
        justify-content: center;
        align-items: flex-start;
    }

    .hero-background-desktop { opacity: 0; }
    .hero-background-mobile {
        opacity: 1;
        background-position: top center;
    }

    .slide-content {
        text-align: center;
        margin-top: 50px;
    }

    .slide-tag {
        font-size: 1.2em;
        margin-bottom: 0;
    }

    .slide-content h1, .slide-content .h1-secondary {
        font-size: 2.5em;
        line-height: 1;
        margin: 5px 0;
    }

    .slide-subtitle {
        font-size: 0.9em;
        margin-top: 10px;
        margin-bottom: 15px;
    }

    .btn-main {
        padding: 12px 25px;
        font-size: 0.9em;
    }

    /* 3. GRILLAS (MÓVIL) */
    /* Beneficios y Cómo Funciona: Se quedan 1 debajo del otro */
    .benefits-grid, .works-grid, .quick-categories-grid {
        grid-template-columns: 1fr;
        gap: 20px;
    }

    /* 4. PRODUCTOS Y TESTIMONIOS: MODO CARRUSEL (SWIPE) - ¡EL CAMBIO "RE PRO"! */
    .product-grid, .testimonial-grid {
        display: flex; /* Cambiamos Grid por Flex para el slider */
        overflow-x: auto; /* Permite scroll horizontal */
        scroll-snap-type: x mandatory; /* Obliga a que se frene en el centro */
        gap: 15px; /* Espacio entre tarjetas */
        padding-bottom: 20px; /* Espacio para la sombra de abajo */
        -webkit-overflow-scrolling: touch; /* Scroll suave en iOS */

        /* Ocultar Scrollbar (Estético) */
        scrollbar-width: none; /* Firefox */
    }

    .product-grid::-webkit-scrollbar,
    .testimonial-grid::-webkit-scrollbar {
        display: none; /* Chrome/Safari */
    }

    .product-card, .testimonial-card {
        min-width: 85%; /* La tarjeta ocupa el 85% del ancho (se ve un poco la siguiente) */
        scroll-snap-align: center; /* Se centra automáticamente al soltar */
    }

    /* Reseteamos todos los delays de animación para móvil */
    .quick-categories-grid .animate-on-scroll:nth-child(2),
    .product-grid .animate-on-scroll:nth-child(2),
    .testimonial-grid .animate-on-scroll:nth-child(2),
    .benefits-grid .animate-on-scroll:nth-child(2),
    .works-grid .animate-on-scroll:nth-child(2),
    .benefits-grid .animate-on-scroll:nth-child(3),
    .works-grid .animate-on-scroll:nth-child(3),
    .benefits-grid .animate-on-scroll:nth-child(4),
    .works-grid .animate-on-scroll:nth-child(4) {
        transition-delay: 0s;
    }

    /* 5. FOOTER (MÓVIL) */
    .main-footer {
        flex-direction: column;
        text-align: center;
    }

    .footer-col {
        min-width: unset;
    }
}


/* ==================================== */
/* 9. PÁGINA DE CATEGORÍA (NUEVO)       */
/* ==================================== */

/* Título y Breadcrumbs */
.category-header {
    background-color: #f9f9f9;
    padding: 40px 0;
    border-bottom: 1px solid #eee;
    margin-bottom: 40px;
    text-align: left; /* Alineado a la izquierda pro */
}

.breadcrumbs {
    font-size: 0.9em;
    color: var(--text-light);
    margin-bottom: 10px;
}

.category-header h1 {
    font-size: 2.5em;
    font-weight: 900;
    color: var(--text-dark);
    text-transform: uppercase;
}

/* Layout Principal: Sidebar + Contenido */
.category-layout {
    display: grid;
    grid-template-columns: 250px 1fr; /* Sidebar fijo 250px, el resto para productos */
    gap: 40px;
    margin-bottom: 80px;
    align-items: start; /* Para que la sidebar no se estire */
}

/* Estilos de la Sidebar (Filtros) */
.filters-sidebar {
    background-color: white;
    padding: 20px;
    border: 1px solid #eee;
    border-radius: 8px;
}

.filter-group {
    margin-bottom: 30px;
    border-bottom: 1px solid #f0f0f0;
    padding-bottom: 20px;
}

.filter-group:last-child {
    border-bottom: none;
}

.filter-group h3 {
    font-size: 1.1em;
    margin-bottom: 15px;
    color: var(--text-dark);
}

.filter-group ul {
    list-style: none;
}

.filter-group ul li {
    margin-bottom: 10px;
}

.filter-group ul li a {
    text-decoration: none;
    color: var(--text-light);
    transition: color 0.2s;
}

.filter-group ul li a:hover {
    color: var(--cannon-green);
    font-weight: bold;
}

/* Checkboxes personalizados simples */
.checkbox-container {
    display: block;
    margin-bottom: 10px;
    cursor: pointer;
    font-size: 0.95em;
    color: var(--text-light);
}

/* Inputs de precio */
.price-inputs {
    display: flex;
    gap: 5px;
}

.price-inputs input {
    width: 100%;
    padding: 5px;
    border: 1px solid #ddd;
    border-radius: 4px;
}

.btn-filter {
    background-color: var(--cannon-green);
    color: white;
    border: none;
    border-radius: 4px;
    padding: 0 10px;
    cursor: pointer;
}

/* ============================================ */
/* MOBILE OVERRIDE (RESPONSIVE PRO)             */
/* ============================================ */

/* ESTO VA AL FINAL DEL ARCHIVO styles.css */

@media (max-width: 800px) {

    /* 1. Layout de 1 sola columna */
    .category-layout {
        grid-template-columns: 1fr;
        gap: 20px;
    }

    /* 2. Estilo del Botón de Filtros (Visible solo en móvil) */
    .btn-mobile-filter {
        display: block; /* Se muestra */
        width: 100%;
        background-color: white;
        border: 2px solid var(--text-dark);
        color: var(--text-dark);
        padding: 15px;
        font-family: 'Montserrat', sans-serif;
        font-weight: bold;
        text-transform: uppercase;
        margin-top: 15px;
        cursor: pointer;
        border-radius: 5px;
        transition: background 0.3s;
    }

    .btn-mobile-filter:hover,
    .btn-mobile-filter.active {
        background-color: var(--text-dark);
        color: white;
    }

    /* 3. La Sidebar (oculta por defecto) */
    .filters-sidebar {
        display: none; /* Oculto de entrada */
        width: 100%;
        border: none;
        border-top: 1px solid #eee;
        border-bottom: 1px solid #eee;
        background-color: #fafafa;
    }

    /* 4. Clase para mostrar la sidebar (la agrega el JS) */
    .filters-sidebar.show-mobile {
        display: block;
        animation: slideDown 0.3s ease-out;
    }

    @keyframes slideDown {
        from { opacity: 0; transform: translateY(-10px); }
        to { opacity: 1; transform: translateY(0); }
    }

    /* 5. Forzar Grilla Vertical en Categorías (anula el Swipe del Home) */
    .product-grid-vertical.product-grid {
        display: grid;
        grid-template-columns: 1fr; /* 1 producto abajo del otro */
        overflow-x: visible; /* Chau scroll horizontal */
        padding-bottom: 0;
        gap: 20px;
    }

    .product-grid-vertical .product-card {
        min-width: unset;
        scroll-snap-align: none;
    }
}

/* Regla para escritorio: Ocultar el botón de filtros si la pantalla es grande */
@media (min-width: 801px) {
    .btn-mobile-filter {
        display: none;
    }
}


/* ==================================== */
/* 10. PÁGINA DE PRODUCTO (SINGLE)      */
/* ==================================== */

.product-detail-layout {
    display: grid;
    grid-template-columns: 1fr 1fr; /* 50% Galería - 50% Info */
    gap: 50px;
    margin-bottom: 80px;
    align-items: start;
}

/* A. Galería */
.main-image-container {
    position: relative;
    border: 1px solid #eee;
    border-radius: 10px;
    overflow: hidden;
    margin-bottom: 15px;
}

.main-image-container img {
    width: 100%;
    display: block;
}

.thumbnail-strip {
    display: flex;
    gap: 10px;
}

.thumb {
    width: 80px;
    height: 80px;
    object-fit: cover;
    border: 1px solid #ddd;
    border-radius: 5px;
    cursor: pointer;
    opacity: 0.6;
    transition: 0.3s;
}

.thumb:hover, .thumb.active {
    opacity: 1;
    border-color: var(--cannon-green);
}

/* B. Info del Producto */
.single-product-title {
    font-size: 2.2em;
    font-weight: 900;
    color: var(--text-dark);
    margin-bottom: 15px;
    line-height: 1.1;
}

.single-product-price {
    display: flex;
    align-items: center;
    gap: 15px;
    margin-bottom: 20px;
    padding-bottom: 20px;
    border-bottom: 1px solid #eee;
}

.single-product-price .price-old {
    font-size: 1.2em;
    color: #999;
    text-decoration: line-through;
}

.single-product-price .price-new {
    font-size: 2em;
    color: var(--cannon-green);
    font-weight: 800;
}

.product-specs-list {
    list-style: none;
    margin: 20px 0;
    padding: 15px;
    background-color: #f9f9f9;
    border-radius: 8px;
}

.product-specs-list li {
    margin-bottom: 8px;
    font-size: 1em;
    color: var(--text-dark);
}

/* Botón de Compra Gigante */
.btn-add-cart {
    width: 100%;
    background-color: var(--cannon-green);
    color: white;
    font-size: 1.2em;
    font-weight: bold;
    padding: 18px;
    border: none;
    border-radius: 8px;
    cursor: pointer;
    transition: background 0.3s, transform 0.2s;
    text-transform: uppercase;
    box-shadow: 0 4px 15px rgba(0, 168, 89, 0.3);
}

.btn-add-cart:hover {
    background-color: var(--green-dark-hover);
    transform: translateY(-2px);
}

/* Responsive Producto */
@media (max-width: 800px) {
    .product-detail-layout {
        grid-template-columns: 1fr; /* 1 Columna */
        gap: 30px;
    }

    .single-product-title {
        font-size: 1.8em;
    }
}


/* ==================================== */
/* 11. ESTILOS GLOBALES WOOCOMMERCE     */
/* (Carrito, Checkout, Mi Cuenta)       */
/* ==================================== */

/* Forzar tipografía y colores en páginas estándar de Woo */
.woocommerce-page .entry-content, 
.woocommerce-page h1, .woocommerce-page h2, .woocommerce-page h3,
.woocommerce-page label, .woocommerce-page th, .woocommerce-page td {
    font-family: 'Montserrat', sans-serif !important;
    color: var(--text-dark);
}

/* Botones Principales (Finalizar compra, etc) */
.woocommerce-page .button.alt, 
.woocommerce-page #respond input#submit.alt,
.woocommerce-page .button.checkout-button {
    background-color: var(--cannon-green) !important;
    color: white !important;
    font-weight: 800 !important;
    text-transform: uppercase;
    border-radius: 5px !important;
    padding: 15px 30px !important;
    transition: 0.3s;
}

.woocommerce-page .button.alt:hover {
    background-color: var(--green-dark-hover) !important;
    transform: translateY(-2px);
}

/* Mensajes de Alerta (Agregado al carrito, etc) */
.woocommerce-message, .woocommerce-info {
    border-top-color: var(--cannon-green) !important;
}
.woocommerce-message::before, .woocommerce-info::before {
    color: var(--cannon-green) !important;
}

/* Precios en el carrito */
.woocommerce-cart .product-price .amount, 
.woocommerce-cart .product-subtotal .amount {
    color: var(--text-dark);
    font-weight: bold;
    font-size: 1.1em;
}

/* Inputs del Checkout más lindos */
.woocommerce-checkout input.input-text, 
.woocommerce-checkout textarea {
    padding: 12px !important;
    border: 1px solid #ddd !important;
    border-radius: 5px !important;
}

.woocommerce-checkout input.input-text:focus {
    border-color: var(--cannon-green) !important;
    outline: none;
}

/* Títulos de secciones */
.woocommerce-cart h2, .woocommerce-checkout h3 {
    font-weight: 900 !important;
    text-transform: uppercase;
    letter-spacing: -0.5px;
    margin-top: 30px;
}

/* ==================================== */
/* 12. FUERZA BRUTA: TODO VERDE CANNON  */
/* ==================================== */

/* Botón Añadir al Carrito (Single Product) */
button.single_add_to_cart_button,
.woocommerce button.button.alt {
    background-color: var(--cannon-green) !important;
    color: white !important;
    border-radius: 5px !important;
    font-weight: bold !important;
    text-transform: uppercase !important;
}

button.single_add_to_cart_button:hover,
.woocommerce button.button.alt:hover {
    background-color: var(--green-dark-hover) !important;
}

/* Carrito Lateral (Side Cart) - Botones */
.astra-cart-drawer .widget_shopping_cart_content .buttons .button {
    background-color: var(--cannon-green) !important;
    color: white !important;
}

/* Ícono Flotante del Carrito (Si es de Astra o Plugin) */
.ast-cart-menu-wrap .count,
.ast-header-break-point .ast-mobile-cart-wrap .ast-cart-menu-wrap .count {
    background-color: var(--cannon-green) !important;
    color: white !important;
}

/* Arreglar los bordes de los inputs de cantidad */
.quantity .qty {
    border: 1px solid #ddd !important;
    border-radius: 4px !important;
    padding: 8px !important;
}



/* ==================================== */
/* 13. MEJORA DEL TÍTULO DE PRODUCTO    */
/* ==================================== */

/* 1. Las "migas de pan" (texto chiquito arriba) */
.breadcrumbs {
    font-family: 'Montserrat', sans-serif;
    font-size: 0.75rem; /* Más chico y delicado */
    text-transform: uppercase; /* Todo mayúscula queda más pro */
    letter-spacing: 1px; /* Separamos las letras */
    color: #888; /* Gris suave */
    margin-bottom: 10px;
    display: block;
}

.breadcrumbs a {
    color: #888;
    text-decoration: none;
    font-weight: 600;
    transition: color 0.2s;
}

.breadcrumbs a:hover {
    color: var(--cannon-green);
}

.breadcrumbs strong {
    color: #333; /* El nombre del producto actual más oscuro */
}

/* 2. El Título Principal (H1) */
.single-product-title {
    font-family: 'Montserrat', sans-serif; /* La fuente de la marca */
    font-size: 2.2rem; /* Tamaño imponente */
    font-weight: 800; /* Extra negrita (Bold) */
    color: #1a1a1a; /* Negro casi puro */
    line-height: 1.1; /* Líneas bien juntas (look moderno) */
    letter-spacing: -0.5px; /* Un pelín juntas las letras */
    margin-top: 0;
    margin-bottom: 15px;
    text-transform: none; /* Respetamos mayúsculas/minúsculas naturales */
}

/* Ajuste para Móvil */
@media (max-width: 768px) {
    .single-product-title {
        font-size: 1.8rem; /* Un poco más chico en celular */
        text-align: center; /* Centrado en celular */
    }
    .breadcrumbs {
        text-align: center;
        font-size: 0.7rem;
    }
}



/* ==================================== */
/* 14. HEADER PREMIUM (ESTILO CANNON)   */
/* ==================================== */

/* A. Barra Superior "Metálica" y Texto Pro */
.top-bar {
    /* Degradado sutil para efecto metálico/profundidad */
    background: linear-gradient(180deg, #165c40 0%, #124a33 50%, #0e3b29 100%) !important;
    color: #fff;
    
    /* Tipografía de Alta Gama */
    font-family: 'Montserrat', sans-serif;
    font-weight: 700; /* Bien negrita */
    font-size: 0.75rem; /* Un poco más chica para ser elegante */
    text-transform: uppercase;
    letter-spacing: 1.5px; /* Separamos las letras (Toque clave de lujo) */
    padding: 10px 0; /* Un poco más de aire */
    box-shadow: 0 2px 4px rgba(0,0,0,0.15); /* Sombra sutil abajo */
}

/* B. Menú: Efecto Subrayado Deslizante */
.main-nav a {
    position: relative;
    color: var(--text-dark); /* Color base oscuro */
    font-weight: 600;
    padding: 5px 0;
    margin: 0 15px; /* Mantenemos el margen */
    text-decoration: none;
}

/* La línea invisible que va a crecer */
.main-nav a::after {
    content: '';
    position: absolute;
    width: 0;
    height: 3px; /* Grosor de la línea Cannon */
    bottom: 0;
    left: 0;
    background-color: var(--cannon-green); /* Usa el verde nuevo */
    transition: width 0.3s ease; /* Animación suave */
}

/* Cuando pasás el mouse o es la página activa */
.main-nav a:hover::after,
.main-nav a.active::after {
    width: 100%; /* La línea crece al 100% del ancho */
}

.main-nav a:hover {
    color: var(--cannon-green); /* El texto también se pone verde */
}





/* ==================================== */
/* 15. ANIMACIÓN FILTROS (SMOOTH)       */
/* ==================================== */

.product-card {
    /* Agregamos transición suave a la opacidad y la escala */
    transition: opacity 0.4s ease, transform 0.4s ease;
    opacity: 1;
    transform: scale(1);
}

/* Esta clase la pone JS cuando quiere ocultar algo */
.product-card.hiding {
    opacity: 0;
    transform: scale(0.95); /* Se achica un poquito al irse */
    pointer-events: none;   /* Para que no le puedas hacer click mientras se va */
}






/* ==================================== */
/* 18. SECCIÓN CONFIANZA Y PASOS (V2)   */
/* ==================================== */

.trust-experience-section {
    padding: 60px 0;
    background-color: #fff;
}

/* A. Barra de Beneficios (Horizontal Limpia) */
.benefits-strip {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: 20px;
    padding: 30px;
    background-color: #f8f9fa; /* Gris muy suave */
    border-radius: 12px;
    border: 1px solid #eee;
}

.benefit-item {
    display: flex;
    align-items: center;
    gap: 15px;
}

.benefit-icon-wrapper {
    width: 50px;
    height: 50px;
    background-color: #e8f5e9; /* Verde muy clarito */
    color: var(--cannon-green);
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
}

.benefit-text h4 {
    font-size: 1rem;
    font-weight: 800;
    color: var(--text-dark);
    margin: 0;
    text-transform: uppercase;
}

.benefit-text p {
    font-size: 0.85rem;
    color: #666;
    margin: 0;
}

/* Separador sutil */
.section-separator {
    border: 0;
    height: 1px;
    background: #eee;
    margin: 60px 0;
}

/* B. Pasos de Compra (Steps) */
.how-to-buy-container {
    text-align: center;
}

.steps-grid {
    display: flex;
    justify-content: center;
    align-items: flex-start; /* Alinea arriba para que textos largos no rompan */
    gap: 20px;
    margin-top: 40px;
}

.step-card {
    flex: 1;
    max-width: 300px;
    position: relative;
    padding: 20px;
}

.step-number {
    background-color: var(--cannon-green);
    color: white;
    width: 30px;
    height: 30px;
    border-radius: 50%;
    font-weight: bold;
    display: flex;
    align-items: center;
    justify-content: center;
    margin: 0 auto 15px auto; /* Centrado */
}

.step-icon {
    font-size: 3rem;
    margin-bottom: 15px;
}

.step-card h3 {
    font-size: 1.2rem;
    font-weight: 800;
    margin-bottom: 10px;
    color: var(--text-dark);
}

.step-card p {
    font-size: 0.95rem;
    color: #666;
    line-height: 1.5;
}

.step-arrow {
    font-size: 2rem;
    color: #ddd;
    margin-top: 60px; /* Ajuste visual para que quede entre iconos */
    font-weight: bold;
}

/* Responsive */
@media (max-width: 900px) {
    .benefits-strip {
        grid-template-columns: 1fr 1fr; /* 2x2 en tablet */
    }
    .steps-grid {
        flex-direction: column; /* Vertical en móvil */
        align-items: center;
    }
    .step-arrow {
        display: none; /* Chau flechas en móvil */
    }
    .step-card {
        margin-bottom: 30px;
    }
}

@media (max-width: 600px) {
    .benefits-strip {
        grid-template-columns: 1fr; /* 1 columna en celular */
        text-align: left; /* Alinear a la izquierda queda mejor en lista */
    }
    .benefit-item {
        padding-bottom: 15px;
        border-bottom: 1px solid #eee;
    }
    .benefit-item:last-child {
        border-bottom: none;
    }
}



/* ==================================== */
/* 19. PACK DE VIDA (MICRO-INTERACCIONES) */
/* ==================================== */

/* 1. EFECTO DE BRILLO EN BOTONES */
.btn-product, .btn-main, button.single_add_to_cart_button {
    position: relative;
    overflow: hidden; /* Para que el brillo no se salga */
    z-index: 1;
}

.btn-product::after, .btn-main::after, button.single_add_to_cart_button::after {
    content: '';
    position: absolute;
    top: 0;
    left: -120%; /* Empieza afuera a la izquierda */
    width: 100%;
    height: 100%;
    background: linear-gradient(90deg, transparent, rgba(255,255,255,0.4), transparent);
    transform: skewX(-20deg); /* Inclinamos la luz */
    transition: 0s; /* Reset */
}

/* Al pasar el mouse, la luz cruza */
.btn-product:hover::after, .btn-main:hover::after, button.single_add_to_cart_button:hover::after {
    left: 120%; /* Termina afuera a la derecha */
    transition: 0.5s; /* Velocidad del destello */
}





/* 3. WHATSAPP CON "LATIDO" */
@keyframes pulse-green {
    0% {
        box-shadow: 0 0 0 0 rgba(37, 211, 102, 0.7);
    }
    70% {
        box-shadow: 0 0 0 10px rgba(37, 211, 102, 0);
    }
    100% {
        box-shadow: 0 0 0 0 rgba(37, 211, 102, 0);
    }
}

.btn-whatsapp {
    animation: pulse-green 2s infinite;
    border: none !important; /* Sacamos borde para que el pulso se vea limpio */
    color: white !important;
    background-color: #25D366; /* Fondo verde sólido */
}

.btn-whatsapp:hover {
    transform: scale(1.02); /* Crece un pelín */
}


/* 4. INPUTS CON FOCO ELEGANTE */
input[type="text"], input[type="email"], input[type="number"], textarea {
    transition: border 0.3s, box-shadow 0.3s;
}

input:focus, textarea:focus {
    border-color: var(--cannon-green) !important;
    box-shadow: 0 0 0 3px rgba(0, 168, 89, 0.1) !important; /* Anillo de luz verde */
    outline: none;
}



/* 2. LEVITACIÓN PREMIUM DE TARJETAS */
.product-card, .benefit-card, .step-card {
    transition: all 0.4s cubic-bezier(0.25, 0.8, 0.25, 1); /* Movimiento ultra fluido */
}

.product-card:hover, .benefit-card:hover, .step-card:hover {
    transform: translateY(-8px); /* Sube un poco más */
    box-shadow: 0 15px 35px rgba(0, 168, 89, 0.15); /* Sombra con un tinte verde muy sutil */
    border-color: transparent; /* El borde desaparece para dar aire */
}


/* ==================================== */
/* 20. EFECTO ICONOS 3D (PREMIUM)       */
/* ==================================== */

.step-icon-3d {
    width: 80px;
    height: 80px;
    margin: 0 auto 20px auto;
    display: flex;
    align-items: center;
    justify-content: center;
    
    /* EL SECRETO DEL 3D: Fondo degradado + Sombra de color */
    background: linear-gradient(135deg, #ffffff 0%, #f0f0f0 100%);
    border-radius: 50%; /* Círculo perfecto */
    box-shadow: 
        0 10px 20px rgba(0,0,0,0.05), /* Sombra difusa lejos */
        0 4px 6px rgba(0, 168, 89, 0.1), /* Sombra verde sutil cerca */
        inset 0 -3px 0 rgba(0,0,0,0.05); /* Borde interno para volumen */
    
    color: var(--cannon-green);
    transition: transform 0.3s cubic-bezier(0.175, 0.885, 0.32, 1.275); /* Efecto rebote */
}

.step-icon-3d svg {
    width: 40px;
    height: 40px;
    /* Sombra al ícono en sí para que flote dentro del círculo */
    filter: drop-shadow(0 2px 3px rgba(0,0,0,0.1));
}

/* Animación al pasar el mouse sobre la tarjeta */
.step-card:hover .step-icon-3d {
    transform: translateY(-10px) scale(1.1); /* Sube y se agranda */
    background: white;
    border: 2px solid var(--cannon-green); /* Se marca el borde */
    box-shadow: 0 15px 30px rgba(0, 168, 89, 0.2); /* Sombra verde brillante */
}

/* Mejoramos los números también */
.step-number {
    background: var(--cannon-green);
    box-shadow: 0 4px 10px rgba(0, 168, 89, 0.4); /* Glow verde */
    font-size: 0.9rem;
}
/* --- BOTÓN SOLO FLECHA (BLANCA) --- */
.lc-submit-btn {
    background: transparent !important;
    border: none !important;
    color: #ffffff !important; /* <--- FLECHA BLANCA AQUI */
    width: 40px;
    height: 40px;
    display: flex;
    align-items: center;
    justify-content: center;
    cursor: pointer;
    transition: transform 0.3s ease, color 0.3s ease;
    padding: 0;
    box-shadow: none !important;
    border-radius: 0 !important;
}

/* Ajuste del tamaño de la flecha SVG */
.lc-submit-btn svg {
    width: 24px;
    height: 24px;
    fill: none;
    stroke: currentColor;
    stroke-width: 2;
    stroke-linecap: round;
    stroke-linejoin: round;
}

/* Animación al pasar el mouse: Se mueve y se pone VERDE NEÓN */
.lc-submit-btn:hover {
    transform: translateX(5px); 
    color: #25D366 !important; 
}

/* ==================================== */
/* 21. FOOTER WORLD CLASS (DEFINITIVO)  */
/* ==================================== */

.lc-footer {
    background-color: #0a2e1f !important; /* Verde Bosque */
    color: #b0b0b0;
    padding-top: 60px;
    font-size: 0.9rem;
    /* Estilo flotante */
    margin: 40px 20px 40px 20px; 
    border-radius: 30px !important;
    /* Sombra verde difusa */
    box-shadow: 0 20px 50px rgba(0, 168, 89, 0.25); 
    overflow: hidden; 
    border: 1px solid rgba(0, 168, 89, 0.3);
}

.lc-grid-wrapper {
    display: grid;
    grid-template-columns: 1.5fr 1fr 1fr 1.2fr;
    gap: 40px;
    padding-bottom: 50px;
}

/* Títulos en BLANCO para leer bien */
.lc-logo { color: white; font-size: 1.5rem; font-weight: 800; margin-bottom: 15px; }
.lc-dot { color: var(--cannon-green); }

.lc-heading, .lc-news-title {
    color: #ffffff !important; /* BLANCO PURO */
    font-size: 0.9rem;
    text-transform: uppercase;
    letter-spacing: 1px;
    font-weight: 800;
    margin-bottom: 25px;
}

/* Columnas Centradas (Productos y Ayuda) */
.lc-centered-col { text-align: center; }
.lc-centered-col .lc-link-list { display: inline-block; text-align: center; }

/* Listas de enlaces */
.lc-link-list { list-style: none; padding: 0; margin: 0; }
.lc-link-list li { margin-bottom: 12px; }
.lc-link-list a { 
    color: #cccccc; 
    text-decoration: none; 
    transition: 0.3s;
    font-weight: 500;
}
.lc-link-list a:hover { color: white; text-shadow: 0 0 10px rgba(37, 211, 102, 0.4); }

/* --- NEWSLETTER CÁPSULA --- */
.lc-newsletter-container { margin-top: 15px; }

.newsletter-capsule {
    position: relative;
    display: flex;
    align-items: center;
    justify-content: space-between;
    background: rgba(255, 255, 255, 0.05); /* Fondo vidrio muy sutil */
    border: 1px solid rgba(255, 255, 255, 0.2); /* Borde fino */
    border-radius: 50px;
    padding: 5px 15px; 
    transition: all 0.3s ease;
}

.newsletter-capsule:focus-within {
    background: rgba(255, 255, 255, 0.1);
    border-color: rgba(255, 255, 255, 0.5);
    box-shadow: 0 0 15px rgba(37, 211, 102, 0.1);
}

.lc-input {
    background: none !important;
    border: none !important;
    color: white !important;
    flex-grow: 1;
    outline: none !important;
    padding: 10px 0 !important;
    font-family: 'Montserrat', sans-serif;
    font-size: 0.9rem;
    height: auto;
}
.lc-input::placeholder { color: rgba(255, 255, 255, 0.5); }

/* --- BOTÓN SOLO FLECHA (BLANCA) --- */
.lc-submit-btn {
    background: transparent !important; /* Transparente */
    border: none !important;
    color: #ffffff !important; /* FLECHA BLANCA (CAMBIO REALIZADO) */
    width: 40px;
    height: 40px;
    display: flex;
    align-items: center;
    justify-content: center;
    cursor: pointer;
    transition: transform 0.3s ease, color 0.3s ease;
    padding: 0;
    box-shadow: none !important; 
    border-radius: 0 !important;
}

.lc-submit-btn svg {
    width: 24px;
    height: 24px;
    fill: none;
    stroke: currentColor;
    stroke-width: 2;
    stroke-linecap: round;
    stroke-linejoin: round;
}

/* Hover: Se mueve y se pone VERDE */
.lc-submit-btn:hover {
    transform: translateX(5px); /* Se mueve a la derecha */
    color: #25D366 !important; /* Verde Neón brillante */
}

/* --- CONTACTO (Iconos arreglados) --- */
.lc-contact-item {
    display: flex;
    align-items: center;
    gap: 12px;
    margin-bottom: 18px;
    color: #ccc;
    font-size: 0.9rem;
}
.lc-icon { 
    width: 20px !important; 
    height: 20px !important; 
    color: var(--cannon-green); 
    flex-shrink: 0; 
}

/* --- REDES SOCIALES --- */
.lc-social-icons { display: flex; gap: 10px; margin-top: 25px; }

.social-link {
    width: 38px; height: 38px;
    border-radius: 50%;
    background: rgba(255,255,255,0.05);
    display: flex; align-items: center; justify-content: center;
    color: #fff; transition: 0.3s;
    border: 1px solid transparent;
}
.social-link:hover {
    background: var(--cannon-green);
    transform: translateY(-3px);
}

/* --- BARRA INFERIOR --- */
.lc-bottom-bar {
    border-top: 1px solid rgba(255, 255, 255, 0.05);
    padding: 25px 0;
    background-color: transparent;
    display: flex; justify-content: center; align-items: center;
}

/* --- RESPONSIVE --- */
@media (max-width: 800px) {
    .lc-grid-wrapper { grid-template-columns: 1fr; text-align: center; gap: 40px;}
    .lc-contact-item, .newsletter-capsule { justify-content: center; max-width: 300px; margin: 0 auto 15px auto; }
    .lc-social-icons { justify-content: center; }
}