/* ======================================================= */
/* 0. VARIABLES CSS (Naranja & Negro Profesional) */
/* ======================================================= */
:root {
    --color-primary: #FF6600;      /* Naranja Vibrante (Acento principal) */
    --color-secondary: #1A1A1A;    /* Negro Profesional (Sidebar/Footer) */
    --color-cta: #D95300;          /* Naranja Oscuro (Llamada a la Acción/Botones) */
    --color-link: #5C7C99;         /* Gris Azulado (Enlaces/Precios, más sutil) */
    --color-background: #F7F7F7;   /* Fondo General Suave */
    --color-white: #ffffff;
    
    /* --- Nuevas Variables para Consistencia --- */
    --color-text-dark: #333;       /* Negro/Gris Oscuro para texto principal y títulos */
    --color-border-light: #e0e0e0; /* Gris muy claro para bordes y separadores */
    --color-whatsapp: #25D366;     /* Verde de WhatsApp */
}

/* ======================================================= */
/* 1. RESETEO Y ESTRUCTURA GLOBAL */
/* ======================================================= */
* {
    box-sizing: border-box;
}

html, body {
    margin: 0;
    padding: 0;
    font-family: 'Arial', sans-serif;
    height: 100%;
    background-color: var(--color-background);
}

/* Layout principal de dos columnas (Sidebar y Content) */
body {
    display: flex; 
    flex-direction: row; 
}

/* Contenedor principal para Main y Footer (Permite scroll vertical) */
.content-wrapper {
    display: flex;
    flex-direction: column;
    flex-grow: 1;
    height: 100vh;
    overflow-y: auto;
}

/* Contenido Principal */
.main-content {
    flex-grow: 1; 
    padding: 40px 40px 20px 40px;
    text-align: center;
}

/* Estilos de los enlaces de título de producto */
.product-title-link {
    text-decoration: none; 
    color: inherit; 
}

.product-title-link:hover .product-title {
    color: var(--color-link); 
}

/* --- Estilos de Botón de WhatsApp Flotante --- */
.whatsapp-float {
    position: fixed;
    width: 60px;
    height: 60px;
    background-color: var(--color-whatsapp); /* Usando Variable */
    color: var(--color-white);
    border-radius: 50%;
    bottom: 30px;
    right: 30px;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 30px;
    text-decoration: none;
    box-shadow: 2px 2px 10px rgba(0, 0, 0, 0.2);
    z-index: 1000;
    transition: background-color 0.2s;
}

.whatsapp-float:hover {
    background-color: #128C7E; 
}

/* ======================================================= */
/* 2. BARRA LATERAL (SIDEBAR) */
/* ======================================================= */
.sidebar {
    width: 260px;
    background-color: var(--color-secondary); /* Negro Profesional */
    color: var(--color-white);
    padding: 24px;
    height: 100vh;
    display: flex;
    flex-direction: column;
}

.sidebar h2 {
    text-align: center;
    font-size: 28px;
    margin-bottom: 40px;
}

.sidebar .menu-principal ul {
    list-style-type: none;
    padding: 0;
}

.sidebar .menu-principal a {
    color: #c7c7c7;
    text-decoration: none;
    display: block;
    padding: 16px 0;
    font-size: 14px;
    font-weight: bold;
    transition: color 0.2s;
}

.sidebar .menu-principal a:hover {
    color: var(--color-white);
}

/* ESTILO DEL ENLACE ACTIVO (RESALTADO) */
.sidebar .menu-principal a.active {
    color: var(--color-primary); /* Naranja Principal */
    font-weight: bolder;
    text-decoration: none;
    border-left: 3px solid var(--color-primary); /* Borde Naranja */
    padding-left: 21px; 
}

.sidebar .info-contacto {
    margin-top: auto; 
    font-size: 14px;
}

/* ======================================================= */
/* 3. CONTENIDO PRINCIPAL Y BANNER (index.html) */
/* ======================================================= */
.banner {
    background-image: linear-gradient(90deg, var(--color-primary) 0%, #FF9933 100%); 
    color: var(--color-white);
    padding: 100px 50px;
    text-align: center;
}

.banner h1 {
    font-size: 42px;
    margin: 0;
}

.boton-banner {
    background-color: var(--color-white);
    color: var(--color-text-dark); /* Usando Variable */
    padding: 12px 24px;
    border-radius: 30px;
    text-decoration: none;
    font-weight: bold;
    display: inline-block;
    margin-top: 20px;
    transition: background-color 0.2s;
}

.boton-banner:hover {
    background-color: #eee;
}

/* ======================================================= */
/* 4. SECCIÓN DE PRODUCTOS Y GRIDS (MODIFICADA CON GRID) */
/* ======================================================= */
.productos, .cart-page-content, .checkout-content {
    padding: 40px;
    background-color: var(--color-background); /* Gris Suave */
}

.productos h1, .productos h2, .productos h3, .cart-page-content h1, .checkout-content h1 {
    font-size: 24px;
    color: var(--color-text-dark); /* Usando Variable */
    margin-top: 0;
    margin-bottom: 20px;
}

/* --- Controles de Filtro (tienda.html) --- */
.filter-controls {
    margin-bottom: 30px;
    display: flex;
    flex-wrap: wrap;
    gap: 10px;
}

.filter-btn {
    background-color: #eee;
    color: var(--color-text-dark); /* Usando Variable */
    border: none;
    padding: 10px 15px;
    border-radius: 20px;
    cursor: pointer;
    font-weight: bold;
    font-size: 14px;
    transition: background-color 0.2s, color 0.2s;
}

.filter-btn:hover {
    background-color: #ddd;
}

.filter-btn.active {
    background-color: var(--color-primary); /* Naranja Principal */
    color: var(--color-white);
}

/* --- Tarjetas de Producto (Grid) --- */
.product-grid {
    display: grid; /* CAMBIO CLAVE: Usar Grid para un layout robusto */
    grid-template-columns: repeat(4, 1fr); /* 4 columnas iguales en escritorio */
    gap: 30px; /* Espacio entre ítems */
}

.product-card {
    background-color: var(--color-white);
    border-radius: 8px;
    box-shadow: 0 2px 5px rgba(0, 0, 0, 0.08);
    overflow: hidden;
    /* flex-basis y min-height se quedan para estructura interna */
    display: flex;
    flex-direction: column;
    min-height: 350px; 
}

.product-card img {
    width: 100%;
    height: auto; 
    object-fit: contain; 
}

.product-card .product-info {
    padding: 15px; 
    text-align: center;
    flex-grow: 1;
    display: flex;
    flex-direction: column;
}

/* SOLUCIÓN: Oculta la etiqueta de categoría ("Streaming") */
.product-card .product-info .product-category {
    display: none; 
    margin: 0; 
    padding: 0; 
}
/* O si es un párrafo sin clase y es el primer hijo: */
.product-card .product-info p:first-child {
    display: none;
    margin: 0;
    padding: 0;
}


.product-card .product-title {
    font-size: 16px;
    font-weight: bold;
    color: #222; 
    margin: 5px 0; 
}

.product-card .product-price {
    font-size: 18px;
    font-weight: bold;
    color: var(--color-link); /* Gris Azulado para precios sutiles */
    margin: 10px 0;
}

/* Estilo del botón COMPRAR AHORA en las tarjetas */
.product-card .btn-comprar {
    background-color: var(--color-cta); /* Naranja Oscuro CTA */
    color: var(--color-white);
    text-decoration: none;
    padding: 12px 0;
    border-radius: 5px;
    font-weight: bold;
    font-size: 14px;
    margin-top: auto;
    transition: background-color 0.2s;
    display: block; 
}

.product-card .btn-comprar:hover {
    background-color: #A64000; /* Tono más oscuro de CTA */
}

/* ======================================================= */
/* 5. DISEÑO DE TABLA DEL CARRITO (carrito.html) */
/* ======================================================= */

/* Contenedor principal de los elementos del carrito y resumen */
#checkout-container {
    max-width: 1000px;
    margin: 40px auto;
    padding: 0 20px;
    display: flex;
    flex-direction: column;
    gap: 20px;
}

/* Contenedor donde JS inserta los ítems (EFECTO CUADRADO) */
.cart-items-container {
    display: flex;
    flex-direction: column;
    width: 100%;
    margin-top: 10px;
    
    /* ESTILOS DE ENCUADRADO */
    background-color: var(--color-white);
    border-radius: 12px;
    padding: 20px;
    box-shadow: 0 10px 20px rgba(0, 0, 0, 0.05); 
}

/* Estilo del Encabezado (GRID DEFINIDO) */
.cart-header {
    display: grid;
    grid-template-columns: 2fr 1fr 1fr 1fr 0.5fr; 
    font-weight: bold;
    padding: 10px 0;
    border-bottom: 1px solid var(--color-border-light); /* Usando Variable */
    color: var(--color-secondary); /* Negro */
    text-align: center; 
    margin-bottom: 15px;
    font-size: 14px;
    letter-spacing: 0.5px;
}

/* Nombre del producto (alineado a la izquierda para la legibilidad) */
.cart-header .header-name {
    text-align: left;
    padding-left: 10px;
}

/* Estilo de cada Fila de Producto (GRID DEFINIDO) */
.cart-item {
    display: grid;
    grid-template-columns: 2fr 1fr 1fr 1fr 0.5fr;
    padding: 20px 0; 
    border-bottom: 1px solid #f0f0f0; 
    align-items: center;
    text-align: center; 
    font-size: 15px;
}

.cart-item:last-child {
    border-bottom: none;
}

/* Nombre del producto (alineado a la izquierda para la legibilidad) */
.cart-item .item-name {
    text-align: left;
    font-weight: 600;
    padding-left: 10px;
    color: var(--color-text-dark); /* Usando Variable */
}

/* Estilo para Precios y Subtotales */
.cart-item .item-price,
.cart-item .item-subtotal {
    font-weight: bold;
    color: var(--color-secondary); /* Negro */
}

/* Estilo para los botones de cantidad (+ y -) */
.cart-item .item-quantity {
    display: flex;
    justify-content: center; 
    align-items: center;
    gap: 0;
    border: 1px solid #ddd;
    border-radius: 4px;
    width: 90px;
    margin: 0 auto;
}

.cart-item .item-quantity button {
    background-color: var(--color-white);
    border: none;
    padding: 5px 8px;
    cursor: pointer;
    font-weight: bold;
    font-size: 16px;
    color: var(--color-primary); /* Naranja */
    border-radius: 0;
    transition: background-color 0.2s;
}

.cart-item .item-quantity button:hover {
    background-color: #f0f0f0;
}

.cart-item .item-quantity span {
    font-size: 15px;
    font-weight: 600;
    min-width: 25px;
    text-align: center;
    border-left: 1px solid #eee;
    border-right: 1px solid #eee;
    padding: 5px 0;
}

/* Estilo del Botón de Eliminar (X) */
.btn-remove {
    background-color: var(--color-cta); /* Naranja Oscuro CTA */
    color: var(--color-white);
    border: none;
    width: 28px;
    height: 28px;
    border-radius: 50%;
    cursor: pointer;
    font-weight: bold;
    font-size: 16px;
    display: flex;
    align-items: center;
    justify-content: center;
    transition: background-color 0.2s;
    margin: 0 auto;
}

.btn-remove:hover {
    background-color: #A64000;
}

/* --- Resumen de Totales y Botones Finales (Estilo Profesional) --- */
.cart-summary {
    display: flex;
    flex-direction: column;
    align-items: flex-end; 
    margin-top: 30px; 
    padding: 20px 30px; 
    
    /* ESTILOS DE ENCUADRADO */
    background-color: var(--color-white); 
    border-radius: 8px; 
    box-shadow: 0 4px 8px rgba(0, 0, 0, 0.05); 
    border: 1px solid var(--color-border-light); /* Usando Variable */
    
    width: 380px; 
    margin-left: auto; /* Alinea el resumen a la derecha */
}

/* Modificamos el ancho de las líneas internas para que se ajusten al nuevo ancho del contenedor */
.cart-summary .summary-line {
    display: flex;
    justify-content: space-between;
    width: 100%; 
    padding: 8px 0; 
    font-size: 16px;
    color: #444; 
}

/* Línea de Descuento: Color y estilo */
.cart-summary .discount-line {
    color: #28a745; 
    font-weight: bold;
}

/* Línea de Total */
.cart-summary .total-line {
    font-size: 26px; 
    font-weight: bolder; 
    color: var(--color-cta); /* Naranja Oscuro para el total */
    border-top: 2px solid var(--color-border-light); /* Usando Variable */
    padding-top: 15px; 
    margin-top: 15px;
}


/* Botón de Checkout */
.btn-checkout {
    background-color: var(--color-primary); /* Naranja Principal */
    color: var(--color-white);
    padding: 15px 35px;
    font-weight: bold;
    border-radius: 5px;
    cursor: pointer;
    text-decoration: none;
    display: inline-block;
    margin-top: 25px;
    transition: background-color 0.2s;
    font-size: 18px;
    letter-spacing: 0.5px;
    width: 100%; 
}

.btn-checkout:hover {
    background-color: var(--color-cta); /* Pasa al Naranja Oscuro en hover */
    transform: translateY(-2px); 
    box-shadow: 0 6px 12px rgba(0, 0, 0, 0.15); 
}


/* ======================================================= */
/* 6. PÁGINA DE CHECKOUT (checkout.html) */
/* ======================================================= */
.checkout-box {
    max-width: 600px;
    margin: 40px auto;
    background-color: var(--color-white);
    padding: 30px;
    border-radius: 8px;
    box-shadow: 0 4px 10px rgba(0, 0, 0, 0.05);
}

.checkout-box h1 {
    color: var(--color-secondary); /* Negro */
    text-align: center;
    font-size: 30px;
    margin-bottom: 30px;
}

.checkout-summary {
    padding: 20px;
    background-color: #f0f0f8; 
    border-radius: 5px;
    text-align: center;
    margin-bottom: 30px;
    border: 1px solid #ddd;
}

.checkout-summary h2 {
    color: var(--color-primary); /* Naranja Principal */
    font-size: 36px;
    margin: 10px 0 0 0;
}

.payment-instructions h2 {
    margin-top: 40px;
    margin-bottom: 20px;
    font-size: 24px;
    border-bottom: 2px solid #eee;
    padding-bottom: 5px;
}

.payment-method {
    background-color: #f9f9f9;
    padding: 15px;
    border-radius: 5px;
    margin-bottom: 15px;
    border-left: 5px solid var(--color-primary); /* Naranja */
}

.payment-method h4 {
    margin-top: 0;
    color: var(--color-secondary);
}

.payment-method p {
    font-size: 14px;
    margin: 5px 0;
}

.final-step {
    text-align: center;
    font-weight: bold;
    color: var(--color-cta); /* Naranja Oscuro */
    margin-top: 30px;
}

/* Botón de WhatsApp en Checkout */
#whatsapp-order-btn {
    width: 100%;
    display: block;
    text-align: center;
}


/* ======================================================= */
/* 7. FOOTER */
/* ======================================================= */
.main-footer {
    background-color: var(--color-secondary); /* Negro */
    color: #c7c7c7;
    padding: 30px 40px;
    display: flex;
    justify-content: space-between;
    gap: 30px;
    border-top: 5px solid var(--color-primary); /* Naranja */
    flex-wrap: wrap;
}

.main-footer h4 {
    color: var(--color-white);
    font-size: 16px;
    margin-top: 0;
    margin-bottom: 15px;
}

.main-footer p, .main-footer li {
    font-size: 13px;
    line-height: 1.8;
    margin: 0;
}

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

.main-footer a {
    color: #c7c7c7;
    text-decoration: none;
    transition: color 0.2s;
}

.main-footer a:hover {
    color: var(--color-primary); /* Naranja */
}

/* ======================================================= */
/* 8. CONTADOR DEL CARRITO (BADGE) */
/* ======================================================= */
.cart-badge {
    background-color: var(--color-cta); /* Naranja Oscuro */
    color: var(--color-white);
    border-radius: 50%;
    padding: 3px 7px;
    font-size: 10px;
    font-weight: 900;
    line-height: 1; 
    
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-width: 18px; 
    height: 18px;

    margin-left: 8px; 
    
    transition: transform 0.2s ease-out;
}

.cart-badge.pulse {
    animation: badge-pulse 0.5s;
}

@keyframes badge-pulse {
    0% { transform: scale(1); }
    50% { transform: scale(1.2); }
    100% { transform: scale(1); }
}

/* ======================================================= */
/* 9. RESPONSIVE DESIGN (Móvil) - AJUSTADO PARA 2 COLUMNAS FIJAS EN CELULAR */
/* ======================================================= */
@media (max-width: 768px) {
    
    /* Layout */
    body {
        flex-direction: column;
    }
    
    .content-wrapper {
        height: auto;
        overflow-y: visible;
    }

    /* Sidebar (se vuelve horizontal y sticky) */
    .sidebar {
        width: 100%;
        height: auto;
        flex-direction: row;
        justify-content: center;
        padding: 15px 20px;
        background-color: var(--color-secondary); 
        position: sticky; 
        top: 0;
        z-index: 10;
    }

    .sidebar h2, .sidebar .info-contacto {
        display: none;
    }

    .sidebar .menu-principal ul {
        display: flex;
        gap: 15px;
    }

    .sidebar .menu-principal a {
        padding: 5px;
        font-size: 13px;
        position: relative; 
    }
    
    /* Ajuste de posición del badge en móvil */
    .cart-badge {
        position: absolute; 
        top: 2px;
        right: -10px;
    }


    /* Banner y Contenido General */
    .banner {
        padding: 60px 20px;
    }

    .banner h1 {
        font-size: 32px;
    }

    .productos, .cart-page-content, .checkout-content {
        padding: 20px;
    }
    
    /* Productos (2 por fila para móviles y tabletas) */
    .product-grid {
        grid-template-columns: repeat(2, 1fr); 
        gap: 20px; 
    }

    /* Adaptación del Carrito (columnas apiladas en móvil) */
    .cart-header, .cart-item {
        grid-template-columns: 1fr 1fr; 
        row-gap: 5px;
        padding: 10px 0;
    }
    
    /* Oculta columnas innecesarias en el header en móvil */
    .cart-header div:nth-child(2), 
    .cart-header div:nth-child(3), 
    .cart-header div:nth-child(4),
    .cart-header div:nth-child(5) {
        display: none; 
    }

    /* Ajustes de alineación para cada fila de producto en móvil */
    .cart-item .item-name {
        grid-column: 1 / 3; 
        text-align: left;
    }
    .cart-item .item-price {
        grid-column: 1;
        text-align: left;
        font-weight: bold;
    }
    .cart-item .item-quantity {
        grid-column: 2;
        justify-content: flex-end;
        width: auto;
        margin: 0;
        border: none;
    }
    .cart-item .item-quantity span {
        border-top: 1px solid #eee;
        border-bottom: 1px solid #eee;
    }
    .cart-item .item-subtotal {
        display: none; 
    }
    .btn-remove {
        grid-column: 2;
        grid-row: 1; 
        margin: 0;
        justify-self: flex-end;
    }


    /* Footer */
    .main-footer {
        flex-direction: column;
        padding: 20px 20px;
    }

    /* Resumen de carrito en móvil */
    .cart-summary {
        width: 100%;
        margin: 20px auto;
        padding: 20px;
    }
    
    .cart-summary .summary-line {
        width: 100%;
    }
    
    .cart-summary .total-line {
        font-size: 20px;
    }
}

/* Esta regla asegura que, incluso en los móviles más pequeños, se mantengan 2 columnas */
@media (max-width: 500px) {
    .product-grid {
        grid-template-columns: repeat(2, 1fr); 
    }
    
    .checkout-box {
        margin: 20px;
    }
}

/* ======================================================= */
/* 5. DISEÑO DE DETALLES DEL PRODUCTO (producto.html) */
/* ======================================================= */

/* Contenedor principal para organizar la información en detalles */
.product-detail-container {
    display: flex; /* Usa Flexbox para las dos columnas */
    max-width: 1000px; /* Limita el ancho total de la sección de detalles */
    margin: 40px auto;
    gap: 40px;
    background-color: var(--color-white);
    padding: 30px;
    border-radius: 8px;
    box-shadow: 0 4px 10px rgba(0, 0, 0, 0.05);
}

/* Columna de la Imagen */
.product-image-column {
    /* Define un ancho fijo para la columna de la imagen (ej. 40% del contenedor) */
    flex-basis: 40%; 
    flex-shrink: 0;
}

/* Regla para la Imagen */
#product-detail-image {
    /* Establece el ancho al 100% de su columna (40% de 1000px) */
    width: 100%; 
    /* Asegura que la altura sea automática para evitar distorsiones */
    height: auto; 
    /* Opción: para que las imágenes no parezcan gigantescas si la original es enorme */
    max-width: 400px; 
    display: block;
    border-radius: 6px;
}

/* Columna de la Información */
.product-info-column {
    flex-basis: 60%; 
    text-align: center;
}


/* AJUSTES RESPONSIVOS PARA PÁGINAS DE DETALLE DE PRODUCTO */
@media (max-width: 768px) {
    /* Contenedor principal: Cambiar a columna */
    .product-detail-container {
        flex-direction: column;
        max-width: 100%;
        margin: 20px;
        padding: 20px;
    }
    
    /* 💥 NUEVO: OBLIGAR A LA COLUMNA DE IMAGEN A OCUPAR EL 100% 💥 */
    .product-image-column {
        width: 100% !important; 
        flex-basis: 100% !important; 
        /* Quita cualquier posible margen o padding que cause el desborde */
        padding: 0;
        margin: 0;
    }

    /* 💥 OBLIGAR A LA IMAGEN A CABER DENTRO DE ESA COLUMNA 💥 */
    #product-detail-image {
        width: 100% !important; 
        max-width: 100% !important; 
        height: auto;
        /* El 'display: block' es importante */
        display: block; 
    
}
    
    .product-image-column {
        flex-basis: auto;
        /* Centra la imagen en móvil, si es necesario */
        text-align: center;
    }

    #product-detail-image {
        max-width: 100%; /* La imagen ocupa todo el ancho disponible en móvil */
        width: auto;
    }
}

/* Estilo del botón COMPRAR AHORA en la tarjeta (ya existe) */
.product-card .btn-comprar {
    /* ... otros estilos ... */
    display: block; 
}

/* Estilo para el botón en la página de detalles */
#product-detail-button {
    background-color: var(--color-cta); /* Naranja Oscuro CTA */
    color: var(--color-white);
    text-decoration: none;
    padding: 12px 24px;
    border-radius: 5px;
    font-weight: bold;
    font-size: 16px;
    
    /* Centrado y apariencia */
    display: inline-block; /* <-- CRUCIAL: Para que tome el color y tamaño */
    margin-top: 20px;
    transition: background-color 0.2s;
}

#product-detail-button:hover {
    background-color: #A64000;
}