/* VARIABLES CSS - Consistencia con el resto del sitio */
        :root {
            --primary-text-color: #1d1d1f; /* Texto oscuro para fondo claro */
            --secondary-text-color: #6e6e73; /* Gris para texto secundario */
            --background-dark: #000000; /* Negro puro */
            --background-light: #f5f5f7; /* Blanco muy suave */
            --product-card-bg: #ffffff; /* Fondo blanco para tarjetas de producto */
            --accent-color: #0070c9; /* Azul de Apple */
            --transition-speed: 0.4s;
        }

        body {
            margin: 0;
            font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;
            -webkit-font-smoothing: antialiased;
            -moz-osx-font-smoothing: grayscale;
            background-color: var(--background-light); /* Fondo claro por defecto para la página de productos */
            color: var(--primary-text-color);
            display: flex;
            flex-direction: column;
            min-height: 100vh;
        }

        /* Navbar (Adaptado para productos.html) */
        header {
             background-color: rgba(0, 0, 0, 0.8); /* Fondo oscuro y ligeramente transparente */
             padding: 1rem 0;
             position: sticky;
             top: 0;
             width: 100%;
             z-index: 1000;
             box-shadow: 0 2px 10px rgba(0, 0, 0, 0.2);
        }
        .navbar-brand {
             color: var(--primary-text-color) !important;
             font-weight: 700;
             font-size: 1.5rem;
        }
        .nav-link {
             color: var(--secondary-text-color) !important;
             font-weight: 500;
             transition: color 0.3s ease;
        }
        .nav-link:hover {
             color: var(--primary-text-color) !important;
        }
        .navbar-toggler {
             border-color: rgba(255, 255, 255, 0.1);
        }
        .navbar-toggler-icon {
             background-image: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 30 30'%3e%3cpath stroke='rgba%28255, 255, 255, 0.8%29' stroke-linecap='round' stroke-miterlimit='10' stroke-width='2' d='M4 7h22M4 15h22M4 23h22'/%3e%3c/svg%3e");
        }
        /* Nota: Para el navbar en productos.html, cambiamos el color del brand y links a oscuros */
        /* Si tu navbar es incluido, estas reglas las debería tener tu navbar.html o un CSS global */
        .navbar-dark .navbar-brand, .navbar-dark .nav-link {
            color: #f5f5f7 !important; /* Blanco para texto en navbar oscuro */
        }
        .navbar-dark .nav-link.active {
            color: #fff !important; /* Blanco más brillante para el activo */
        }


        /* HERO SECTION - Productos */
        .products-hero {
            position: relative;
            height: 70vh; /* Un poco menos alto que el principal del home */
            overflow: hidden;
            background: linear-gradient(to bottom, #f5f5f7, #e0e0e0); /* Degradado suave */
            display: flex;
            align-items: center;
            justify-content: center;
            text-align: center;
            color: var(--primary-text-color);
            padding: 20px;
        }
        .products-hero h1 {
            font-size: clamp(3rem, 7vw, 5rem);
            font-weight: 700;
            margin-bottom: 1rem;
            letter-spacing: -0.03em;
            color: #1d1d1f;
        }
        .products-hero p {
            font-size: clamp(1rem, 2.5vw, 1.5rem);
            opacity: 0.9;
            max-width: 800px;
            margin: 0 auto;
            color: #6e6e73;
        }

        /* SECTION STYLES */
        .product-listing-section {
            padding: 80px 20px;
            background-color: var(--background-light);
            color: var(--primary-text-color);
            text-align: center;
        }
        .product-listing-section h2 {
            font-size: clamp(2.2rem, 5vw, 3.5rem);
            font-weight: 600;
            margin-bottom: 60px;
            letter-spacing: -0.02em;
            color: #1d1d1f;
        }

        /* INDIVIDUAL PRODUCT CARD STYLES */
        .product-item {
            background-color: var(--product-card-bg);
            border-radius: 20px;
            box-shadow: 0 10px 30px rgba(0, 0, 0, 0.08);
            margin-bottom: 50px;
            overflow: hidden;
            transition: transform var(--transition-speed) ease, box-shadow var(--transition-speed) ease;
            cursor: pointer;
            height: 100%;
            display: flex;
            flex-direction: column;
            align-items: center;
            padding: 20px;
            text-align: center;
        }
        .product-item:hover {
            transform: translateY(-8px);
            box-shadow: 0 15px 40px rgba(0, 0, 0, 0.15);
        }
        .product-item .product-media {
            width: 100%;
            height: 160px; /* Altura fija para el contenedor de medios */
            display: flex;
            align-items: center;
            justify-content: center;
            margin-bottom: 25px;
            overflow: hidden;
            border-radius: 10px; /* Bordes redondeados para el área de imagen/video */
            background-color: #f0f0f0; /* Fondo sutil para el área de medios */
            position: relative;
        }
        .product-item img, .product-item video {
            max-width: 100%;
            max-height: 100%; /* Asegura que no se desborden */
            object-fit: contain; /* Para que la imagen/video se ajuste sin cortar */
            border-radius: 8px;
            transition: transform var(--transition-speed) ease;
        }
        .product-item:hover img, .product-item:hover video {
            transform: scale(1.03); /* Ligero zoom al hacer hover */
        }

        .product-item h3 {
            font-size: clamp(1.8rem, 3.5vw, 2.5rem);
            font-weight: 600;
            margin-bottom: 15px;
            color: var(--primary-text-color);
        }
        .product-item p.description {
            font-size: clamp(1rem, 2vw, 1.2rem);
            color: var(--secondary-text-color);
            line-height: 1.6;
            margin-bottom: 20px;
            min-height: 70px; /* Para mantener consistencia en la altura si las descripciones varían */
        }
        .product-item .features-list {
            list-style: none;
            padding: 0;
            margin: 0 0 20px 0;
            text-align: left;
            width: 100%;
            max-width: 300px; /* Limitar ancho para que no se extienda demasiado */
            color: var(--secondary-text-color);
        }
        .product-item .features-list li {
            margin-bottom: 8px;
            font-size: 0.95rem;
            display: flex;
            align-items: center;
            gap: 10px;
        }
        .product-item .features-list li .fas {
            color: var(--accent-color);
            font-size: 0.8rem;
        }

        .product-item .price {
            font-size: clamp(1.5rem, 3vw, 2.2rem);
            font-weight: 500;
            color: var(--primary-text-color);
            margin-bottom: 25px;
        }

        /* BUTTON STYLES - Reutilizando de home.html o definiendo aquí */
        .btn-apple-primary {
            background-color: var(--accent-color);
            color: #fff;
            border: none;
            padding: 12px 30px;
            font-size: 1.05rem;
            font-weight: 600;
            border-radius: 999px;
            cursor: pointer;
            transition: background-color 0.3s ease, transform 0.3s ease, box-shadow 0.3s ease;
            text-decoration: none; /* Asegurar que no tenga subrayado */
            display: inline-block; /* Para padding y transform */
        }
        .btn-apple-primary:hover {
            background-color: #005bb5;
            transform: translateY(-2px);
            box-shadow: 0 6px 15px rgba(0, 112, 201, 0.3);
            color: #fff; /* Asegurar color blanco en hover */
        }
        .btn-apple-primary:active {
            transform: translateY(0);
            box-shadow: none;
        }
        
        /* Sección de resumen/comparación */
        .summary-section {
            background-color: var(--background-dark);
            color: var(--primary-text-color);
            padding: 100px 20px;
            text-align: center;
        }
        .summary-section h2 {
            color: #fff;
            font-size: clamp(2.2rem, 5vw, 3.5rem);
            font-weight: 600;
            margin-bottom: 40px;
            letter-spacing: -0.02em;
        }
        .summary-section p {
            color: var(--secondary-text-color);
            font-size: clamp(1rem, 2.5vw, 1.4rem);
            max-width: 900px;
            margin: 0 auto 50px auto;
            line-height: 1.6;
        }
        .summary-grid {
            display: grid;
            grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));
            gap: 40px;
            max-width: 1000px;
            margin: 0 auto;
        }
        .summary-item {
            background-color: var(--card-bg-color); /* Usar el color de tarjeta oscuro */
            padding: 30px;
            border-radius: 15px;
            text-align: center;
            transition: transform var(--transition-speed) ease, box-shadow var(--transition-speed) ease;
        }
        .summary-item:hover {
            transform: translateY(-5px);
            box-shadow: 0 10px 20px rgba(0, 0, 0, 0.3);
        }
        .summary-item .fas {
            font-size: 2.5rem;
            color: var(--accent-color);
            margin-bottom: 20px;
        }
        .summary-item h3 {
            font-size: 1.4rem;
            font-weight: 600;
            color: var(--primary-text-color);
            margin-bottom: 10px;
        }
        .summary-item p {
            font-size: 0.95rem;
            color: rgba(255, 255, 255, 0.6);
            line-height: 1.5;
            margin-bottom: 0;
        }


        /* FOOTER STYLES */
        .footer {
            background: var(--background-dark);
            color: rgba(255, 255, 255, 0.6);
            text-align: center;
            padding: 60px 20px;
            font-size: 0.9rem;
            margin-top: auto;
        }
        .footer p {
            margin-bottom: 0;
        }
        .footer a {
            color: rgba(255, 255, 255, 0.6);
            text-decoration: none;
            transition: color 0.3s ease;
        }
        .footer a:hover {
            color: #fff;
        }

        /* Media Queries for Responsiveness */
        @media (max-width: 992px) {
            .product-item .description {
                min-height: auto; /* Desactivar altura mínima en móviles si no es necesario */
            }
        }
        @media (max-width: 768px) {
            .products-hero {
                height: 50vh;
            }
            .products-hero h1 {
                font-size: 2.5rem;
            }
            .products-hero p {
                font-size: 1rem;
            }
            .product-listing-section {
                padding: 60px 15px;
            }
            .product-listing-section h2 {
                font-size: 2rem;
                margin-bottom: 40px;
            }
            .product-item {
                padding: 20px;
                margin-bottom: 30px;
            }
            .product-item .product-media {
                height: 200px;
            }
            .product-item h3 {
                font-size: 1.6rem;
            }
            .product-item p.description {
                font-size: 0.95rem;
            }
            .product-item .price {
                font-size: 1.8rem;
            }
            .btn-apple-primary {
                font-size: 0.95rem;
                padding: 10px 25px;
            }
            .summary-section {
                padding: 60px 15px;
            }
            .summary-section h2 {
                font-size: 2rem;
            }
            .summary-grid {
                grid-template-columns: 1fr; /* Una columna en pantallas muy pequeñas */
            }
            .summary-item {
                padding: 25px;
            }
        }
        /* Estilo para que el video ocupe el 100% del ancho y alto de su contenedor */
    /* MANTENER ESTOS ESTILOS AQUÍ PARA LA SECCIÓN DE VIDEO FULL WIDTH */
    .video-background {
        position: absolute; /* Permite posicionarlo dentro de su padre */
        top: 0;
        left: 0;
        width: 100%;
        height: 100%;
        object-fit: cover; /* Crucial: asegura que el video cubra el área sin distorsionarse */
        z-index: -1; /* Envía el video al fondo, detrás de cualquier contenido que pongas en la sección */
    }

    /* Opcional: Si quieres una superposición oscura sobre el video para mejorar la legibilidad del texto */
    .video-overlay {
        position: absolute;
        top: 0;
        left: 0;
        width: 100%;
        height: 100%;
        background: rgba(0, 0, 0, 0.4); /* Capa oscura (ajusta el 0.4 para más o menos oscuridad) */
        z-index: 0; /* Por encima del video, pero debajo del contenido */
    }

    /* Estilo para la sección contenedora del video a pantalla completa */
    .full-width-video-section {
        position: relative; /* Importante: para que el video absoluto se posicione correctamente */
        height: 100vh; /* Ocupa el 100% de la altura del viewport */
        width: 100%; /* Ocupa el 100% del ancho */
        overflow: hidden; /* Oculta cualquier parte del video que se desborde */
        display: flex; /* Para centrar contenido si lo hubiera sobre el video */
        align-items: center;
        justify-content: center;
        text-align: center;
        color: #fff; /* Asegura que el texto sobre el video sea visible */
        /* Añadido para prevenir que la sección tenga padding extra por defecto */
        padding: 0; 
        margin: 0;
    }
    .zoom {
        transition: transform 1.5s ease;
        display: inline-block; /* importante si lo aplicas a texto */
        }
        .zoom:hover {
        transform: scale(1.5);
        cursor: pointer;
        }
    .zoom_menor {
        transition: transform 1.5s ease;
        display: inline-block; /* importante si lo aplicas a texto */
        }
    .zoom_menor:hover {
    transform: scale(1.2);
    cursor: pointer;
    }
    .badge-destacado {
        position: absolute;
        top: 10px;
        left: 10px;
        background: #ff4d4f;
        color: white;
        font-size: 0.8rem;
        font-weight: bold;
        padding: 0.3rem 0.6rem;
        border-radius: 0.5rem;
        z-index: 10;
        box-shadow: 0 2px 6px rgba(0,0,0,0.2);
    }