/* ==========================================================================
   1. VARIABLES DE ENTORNO, COLORES Y RESET GENERAL
   ========================================================================== */
:root {
    --primary-color: #00d26a;   /* Color verde esmeralda para botones de acción y destaques */
    --dark-bg: #0f1115;         /* Color de fondo oscuro para el cuerpo de la página */
    --card-bg: #181a20;         /* Color gris oscuro para los contenedores y tarjetas de productos */
    --text-main: #ffffff;       /* Color de texto principal (blanco para alta legibilidad) */
    --text-muted: #9aa0a6;      /* Color de texto secundario o atenuado para descripciones */
    --white: #ffffff;           /* Blanco puro utilizado para fondos de imágenes */
    --font-main: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif; /* Tipografía limpia y moderna */
}

/* Box Model Global y reseteo básico para eliminar márgenes por defecto del navegador */
* {
    margin: 0;                  /* Elimina el margen externo por defecto */
    padding: 0;                 /* Elimina el espacio interno por defecto */
    box-sizing: border-box;     /* Asegura que el padding y los bordes no alteren el ancho total asignado */
}

/* Propiedades globales para el documento */
html {
    scroll-behavior: smooth;    /* Hace que el desplazamiento entre enlaces internos (anclas) sea suave */
}

body {
    font-family: var(--font-main);       /* Aplica la tipografía definida en las variables */
    background-color: var(--dark-bg);   /* Asigna el fondo oscuro a toda la aplicación */
    color: var(--text-main);             /* Color blanco para los textos generales */
    line-height: 1.6;                    /* Altura de línea espaciada para mejorar la lectura */
}

/* ==========================================================================
   2. ENCABEZADO Y NAVEGACIÓN (Estructurado con Flexbox)
   ========================================================================== */
.main-header {
    background-color: #090a0d;          /* Fondo casi negro para el menú superior */
    padding: 1rem 2rem;                 /* Espaciado interno: 1rem arriba/abajo, 2rem a los lados */
    display: flex;                      /* Activa el modelo Flexbox */
    justify-content: space-between;     /* Empuja el logo a la izquierda y los enlaces a la derecha */
    align-items: center;                /* Centra verticalmente los elementos dentro de la barra */
    position: sticky;                   /* Mantiene la barra fija en la parte superior al hacer scroll */
    top: 0;                             /* Posición de anclaje superior */
    z-index: 1000;                      /* Asegura que el menú siempre flote por encima de cualquier otro elemento */
    border-bottom: 1px solid #222630;   /* Línea divisoria inferior sutil */
}

.logo h1 {
    font-size: 1.6rem;                  /* Tamaño del título del logo */
    font-weight: 800;                   /* Peso de fuente extra negrita */
}

.logo h1 span {
    color: var(--primary-color);        /* Pinta el sufijo 'Shop' en color verde esmeralda */
}

/* Contenedor de los enlaces de navegación */
.nav-links a {
    color: var(--white);                /* Los enlaces inician en color blanco */
    text-decoration: none;              /* Quita el subrayado clásico de los enlaces */
    margin-left: 1.5rem;                /* Separa cada enlace del anterior hacia la izquierda */
    font-weight: 600;                   /* Texto seminegrita */
    font-size: 0.95rem;                 /* Tamaño sutilmente menor para estilizar */
    transition: color 0.3s ease;        /* Transición suave de 0.3 segundos cuando cambia de color */
}

/* Estados dinámicos para la navegación (Hover y Clase Activa) */
.nav-links a:hover,
.nav-links a.active {
    color: var(--primary-color);        /* Cambia a verde al pasar el mouse o estar en esa página */
}

/* ==========================================================================
   3. SECCIÓN HERO Y CARRUSEL ANIMADO (Flexbox + Animaciones CSS)
   ========================================================================== */
.hero-section {
    display: flex;                      /* Distribuye el texto y el carrusel uno al lado del otro */
    flex-wrap: wrap;                    /* Permite que el carrusel baje si no hay espacio horizontal */
    align-items: center;                /* Centra verticalmente ambos bloques */
    justify-content: space-between;     /* Deja espacio equilibrado entre los dos contenedores */
    padding: 5rem 2rem;                 /* Amplio espaciado superior e inferior */
    max-width: 1200px;                  /* Ancho máximo de contención */
    margin: 0 auto;                     /* Centra todo el bloque hero en la pantalla */
}

.hero-content {
    flex: 1;                            /* Toma una parte equitativa del espacio disponible */
    min-width: 320px;                   /* Ancho mínimo para evitar que se comprima demasiado */
    padding-right: 2rem;                /* Separación interna con la imagen de la derecha */
}

.hero-content h2 {
    font-size: 2.8rem;                  /* Letra grande e impactante para el título principal */
    line-height: 1.2;                   /* Reduce el espacio entre renglones del título */
    margin-bottom: 1.5rem;              /* Separa el título del párrafo */
    font-weight: 800;                   /* Negrita máxima */
}

.hero-content p {
    color: var(--text-muted);           /* Texto grisáceo para jerarquizar información */
    font-size: 1.1rem;                  /* Tamaño de letra del párrafo */
    margin-bottom: 2rem;                /* Separa el párrafo del botón de acción */
}

/* Contenedor Fijo para el Carrusel de Fotos */
.hero-image {
    width: 400px;                       /* Ancho exacto fijado para evitar saltos */
    height: 400px;                      /* Alto exacto fijado para estandarizar el diseño */
    overflow: hidden;                   /* Esconde todas las fotos que queden fuera del cuadro de 400px */
    position: relative;                 /* Define el contexto de posicionamiento */
    border-radius: 10px;                /* Bordes redondeados estéticos */
    box-shadow: 0 10px 30px rgba(0, 0, 0, 0.5); /* Sombra difuminada para dar profundidad */
}

/* Tira horizontal que contiene las 7 imágenes */
.carousel {
    display: flex;                      /* Alinea las 7 imágenes en una sola fila horizontal */
    width: 2800px;                      /* Ancho total requerido (7 imágenes de 400px cada una) */
    animation: slide 25s linear infinite; /* Vincula la animación 'slide' de 25 segundos continuos */
}

.carousel:hover {
    animation-play-state: paused;       /* Pausa la animación automáticamente cuando el usuario pasa el mouse */
}

/* Configuración de las imágenes individuales dentro del carrusel */
.slide {
    width: 400px;                       /* Cada imagen toma exactamente 400px de ancho */
    height: 400px;                      /* Cada imagen toma exactamente 400px de alto */
    object-fit: contain;                /* Ajusta la foto por completo dentro del espacio sin estirarla */
    background-color: #fff;             /* Rellena con fondo blanco los espacios transparentes de los PNG/WEBP */
}

/* Animación del Carrusel: desplaza la tira horizontal usando transformaciones */
@keyframes slide {
    0%, 10% { transform: translateX(0); }                  /* Imagen 1 quieta */
    14%, 24% { transform: translateX(-400px); }            /* Desplaza e Imagen 2 quieta */
    28%, 38% { transform: translateX(-800px); }            /* Desplaza e Imagen 3 quieta */
    42%, 52% { transform: translateX(-1200px); }           /* Desplaza e Imagen 4 quieta */
    56%, 66% { transform: translateX(-1600px); }           /* Desplaza e Imagen 5 quieta */
    70%, 80% { transform: translateX(-2000px); }           /* Desplaza e Imagen 6 quieta */
    84%, 94% { transform: translateX(-2400px); }           /* Desplaza e Imagen 7 quieta */
    98%, 100% { transform: translateX(0); }                /* Regresa suavemente al inicio */
}

/* ==========================================================================
   4. SECCIÓN DE PRODUCTOS (CSS Grid Dinámico y Tarjetas Uniformes)
   ========================================================================== */
.products-section, .cart-section, .checkout-section {
    padding: 4rem 2rem;                 /* Margen interno uniforme para todas las secciones principales */
    max-width: 1200px;                  /* Ajusta el ancho de los bloques de contenido */
    margin: 0 auto;                     /* Centra horizontalmente las secciones */
}

.products-section h2, .cart-section h2, .checkout-section h2 {
    font-size: 2.2rem;                  /* Tamaño de los encabezados de sección H2 */
    text-align: center;                 /* Centrado horizontal del texto */
    margin-bottom: 2rem;                /* Espacio inferior antes del contenido */
}

/* La Grilla Responsiva usando CSS Grid Avanzado */
.products-grid {
    display: grid;                      /* Activa el modelo CSS Grid */
    /* Crea columnas automáticas. Ninguna bajará de 260px; si hay espacio, se reparten equitativamente (1fr) */
    grid-template-columns: repeat(auto-fit, minmax(260px, 1fr));
    gap: 2rem;                          /* Espaciado de separación entre cada tarjeta de producto */
}

/* Estructura de la Tarjeta del Producto */
.product-card {
    background-color: var(--card-bg);   /* Aplica el color gris oscuro de fondo */
    border-radius: 8px;                 /* Esquinas suavizadas */
    padding: 1.5rem;                    /* Margen interno de la tarjeta */
    border: 1px solid #222630;           /* Borde sutil perimetral */
    display: flex;                      /* Activa Flexbox interno */
    flex-direction: column;             /* Organiza el contenido de arriba hacia abajo */
    justify-content: space-between;     /* Empuja el contenedor de precio/botón hacia la base */
    transition: transform 0.3s ease, box-shadow 0.3s ease; /* Suaviza los efectos visuales */
}

/* Efecto visual dinámico en tarjetas */
.product-card:hover {
    transform: translateY(-5px);        /* Eleva sutilmente la tarjeta 5 píxeles */
    box-shadow: 0 8px 20px rgba(0, 210, 106, 0.15); /* Añade un resplandor verde esmeralda translúcido */
}

/* Control estricto del tamaño de imágenes en el catálogo para evitar deformaciones */
.product-img {
    width: 100%;                        /* Expande la imagen al ancho de la tarjeta */
    height: 200px;                      /* Fija un alto estricto de 200px */
    object-fit: contain;                /* Contiene la imagen adaptándola proporcionalmente */
    background-color: var(--white);     /* Fuerza fondo blanco para que las imágenes tengan el mismo marco rectangular */
    border-radius: 6px;                 /* Bordes internos suavizados */
    margin-bottom: 1rem;                /* Margen inferior */
}

.product-card h4 {
    font-size: 1.2rem;                  /* Tamaño del título del producto */
    margin-bottom: 0.5rem;              /* Separación inferior */
    text-align: center;                 /* Centra el título del componente */
}

/* Distribución horizontal inferior de la tarjeta */
.price-row {
    display: flex;                      /* Flexbox horizontal */
    justify-content: space-between;     /* Separa el precio del botón a los extremos */
    align-items: center;                /* Alineación vertical central */
    margin-top: 1rem;                   /* Separación superior */
}

.price-row .price {
    font-size: 1.3rem;                  /* Destaca el tamaño del precio */
    font-weight: 700;                   /* Fuente en negrita */
    color: var(--primary-color);        /* Aplica color verde de éxito */
}

/* ==========================================================================
   5. COMPONENTES INTERACTIVOS (Botones y Tablas)
   ========================================================================== */
.btn-primary, .btn-add, .btn-submit {
    font-weight: bold;                  /* Forzar textos en negrita */
    cursor: pointer;                    /* Cambia el cursor al icono de 'mano' interactiva */
    transition: background-color 0.3s ease, transform 0.2s ease; /* Transición para interactividad */
    text-decoration: none;              /* Quita decorados si se usa en etiquetas <a> */
    text-align: center;                 /* Centra el texto interno */
}

.btn-primary {
    display: inline-block;              /* Permite aplicar padding y márgenes correctamente */
    padding: 0.8rem 1.8rem;             /* Tamaño del botón general */
    background-color: var(--primary-color); /* Color de fondo verde */
    color: #000;                        /* Texto negro para contrastar con el verde */
    border-radius: 6px;                 /* Esquinas del botón rounded */
}

.btn-primary:hover, .btn-submit:hover {
    background-color: #00b359;          /* Oscurece el verde al pasar el mouse */
    transform: translateY(-2px);        /* Pequeño salto interactivo hacia arriba */
}

.btn-add {
    background-color: transparent;      /* Botón outline (transparente) por defecto */
    color: var(--primary-color);        /* Texto en verde */
    border: 2px solid var(--primary-color); /* Borde perimetral verde */
    padding: 0.4rem 1rem;               /* Tamaño del botón compacto */
    border-radius: 4px;                 /* Esquinas rounded */
}

.btn-add:hover {
    background-color: var(--primary-color); /* Se rellena por completo en hover */
    color: #000;                        /* Texto cambia a negro */
}

/* Estilos de la Tabla del Carrito */
.table-container {
    overflow-x: auto;                   /* Habilita scroll horizontal únicamente si la tabla desborda pantallas chicas */
    margin-top: 2rem;
}

.custom-table {
    width: 100%;                        /* Tabla ocupa el 100% del contenedor disponible */
    border-collapse: collapse;          /* Elimina espacios dobles entre bordes de celdas */
    background-color: var(--card-bg);   /* Fondo gris oscuro */
    border-radius: 8px;                 /* Suavizado de bordes */
    overflow: hidden;                   /* Mantiene las esquinas de la tabla recortadas uniformemente */
}

.custom-table th, .custom-table td {
    padding: 1.2rem;                    /* Espaciado interno generoso en las celdas */
    text-align: left;                   /* Alinea los textos a la izquierda */
    border-bottom: 1px solid #222630;   /* Separador horizontal entre filas */
}

.custom-table th {
    background-color: #1f222b;          /* Encabezado con un gris ligeramente diferenciado */
    color: var(--white);                /* Títulos en blanco */
    font-weight: 600;                   /* Seminegrita */
}

.custom-table tbody tr:nth-child(even) {
    background-color: #1c1e25;          /* Efecto cebra: filas pares con fondo sutilmente más claro */
}

/* Botón de eliminación en tabla */
.btn-remove {
    background-color: #ff4d4d;          /* Rojo de alerta */
    color: var(--white);                /* Texto blanco */
    border: none;                       /* Quita bordes nativos */
    padding: 0.4rem 0.8rem;             /* Tamaño interno */
    border-radius: 4px;                 /* Bordes suavizados */
    cursor: pointer;                    /* Cursor de acción */
    font-weight: bold;
    transition: background-color 0.3s ease;
}

.btn-remove:hover {
    background-color: #e63939;          /* Rojo más oscuro al hacer hover */
}

/* Caja de acciones del Carrito */
.cart-actions {
    margin-top: 2rem;
    text-align: right;                  /* Alinea los elementos a la derecha */
    background: var(--card-bg);         /* Fondo gris */
    padding: 1.5rem;                    /* Espacio de la caja */
    border-radius: 8px;
    border: 1px solid #222630;
}

.cart-actions h3 {
    margin-bottom: 1rem;                /* Separación inferior */
    font-size: 1.5rem;
    color: var(--primary-color);        /* Resalta el total en verde */
}

/* ==========================================================================
   6. FORMULARIO PROFESIONAL (CONTACTO / CHECKOUT)
   ========================================================================== */
.professional-form {
    max-width: 600px;                   /* Centra y limita el ancho del formulario */
    margin: 0 auto;                     /* Centrado automático horizontal */
    background-color: var(--card-bg);   /* Fondo oscuro unificado */
    padding: 2.5rem;                    /* Padding amplio interno */
    border-radius: 8px;
    border: 1px solid #222630;
}

.form-group {
    margin-bottom: 1.5rem;              /* Separa cada campo de entrada del siguiente */
}

.form-group label {
    display: block;                     /* Fuerza al label a estar arriba del input */
    margin-bottom: 0.5rem;              /* Separación con su input respectivo */
    font-weight: 600;
    font-size: 0.9rem;
    color: var(--text-muted);           /* Color suavizado */
}

.form-group input, .form-group textarea {
    width: 100%;                        /* Expande el input a todo el ancho del bloque */
    padding: 0.75rem;                   /* Tamaño interno para escribir cómodamente */
    background-color: var(--dark-bg);   /* Fondo negro interno */
    border: 1px solid #222630;           /* Borde oscuro */
    border-radius: 4px;
    color: var(--white);                /* Letra blanca al escribir */
    font-family: inherit;               /* Hereda tipografía principal */
    font-size: 1rem;
    transition: border-color 0.3s ease, box-shadow 0.3s ease; /* Transición al seleccionar el campo */
}

/* Efecto focus interactivo al escribir en el formulario */
.form-group input:focus, .form-group textarea:focus {
    outline: none;                      /* Quita el borde nativo del navegador */
    border-color: var(--primary-color); /* Pinta el borde de verde */
    box-shadow: 0 0 8px rgba(0, 210, 106, 0.2); /* Crea un halo iluminado alrededor */
}

.btn-submit {
    width: 100%;                        /* Botón de envío toma todo el ancho del formulario */
    padding: 0.9rem;
    background-color: var(--primary-color); /* Color verde */
    color: #000;                        /* Texto negro */
    border: none;
    border-radius: 4px;
    font-size: 1.1rem;
}

/* ==========================================================================
   7. MEDIA QUERIES (Ajustes de Diseño Responsive)
   ========================================================================== */
@media (max-width: 768px) {
    /* Ejecuta este código solo si la pantalla mide 768px de ancho o menos */
    .main-header {
        flex-direction: column;         /* Cambia el menú de horizontal a vertical en celulares */
        gap: 1rem;                      /* Espacio entre el logo y los enlaces verticales */
    }

    .nav-links a {
        margin: 0 0.6rem;               /* Reduce el espacio entre enlaces para que no se desborden */
    }

    .hero-section {
        flex-direction: column;         /* Texto arriba, carrusel abajo */
        text-align: center;             /* Centra todos los textos en móviles */
        padding: 3rem 1rem;
    }

    .hero-content {
        padding-right: 0;               /* Quita el espacio derecho sobrante */
        margin-bottom: 2.5rem;          /* Separa el texto del carrusel inferior */
    }

    .hero-content h2 {
        font-size: 2.1rem;              /* Reduce el tamaño del título en pantallas chicas */
    }

    /* Redimensionamiento del cuadro del carrusel en móviles */
    .hero-image {
        width: 300px;
        height: 300px;
    }

    .carousel {
        width: 2100px;                  /* Ajusta la tira horizontal (7 imágenes * 300px = 2100px) */
    }

    .slide {
        width: 300px;                   /* Ajusta cada foto al nuevo ancho de 300px */
        height: 300px;                  /* Ajusta cada foto al nuevo alto de 300px */
    }

    /* Modifica los pasos de movimiento del carrusel para que calcen con los 300px */
    @keyframes slide {
        0%, 10% { transform: translateX(0); }
        14%, 24% { transform: translateX(-300px); }
        28%, 38% { transform: translateX(-600px); }
        42%, 52% { transform: translateX(-900px); }
        56%, 66% { transform: translateX(-1200px); }
        70%, 80% { transform: translateX(-1500px); }
        84%, 94% { transform: translateX(-1800px); }
        98%, 100% { transform: translateX(0); }
    }

    .professional-form {
        padding: 1.5rem;                /* Reduce paddings en formularios para ganar espacio en pantalla */
    }
}