/* ======================================= */
/* 1. VARIABLES DE COLOR          */
/* ======================================= */
:root {
    --bg-start: #071025; /* Color oscuro inicial del degradado */
    --bg-end: #0f1724; /* Color oscuro final del degradado */
    --card-bg: #0b1220; /* Fondo para tarjetas y bloques (más oscuro que el fondo general) */
    --accent: #ff6b6b; /* Color de acento (rojo/coral) para resaltar elementos */
    --muted: #9aa4b2; /* Color de texto secundario/gris (para descripciones y navegación inactiva) */
    --text-primary: #e6eef6; /* Color de texto principal */
    --maxw: 1200px; /* Ancho máximo de contenido para centrar */
}

/* ======================================= */
/* 2. RESET Y ESTILOS GLOBALES    */
/* ======================================= */
* {
    box-sizing: border-box; /* Incluye padding y border en el ancho/alto total */
    margin: 0;
    padding: 0;
}

body {
    /* Fondo principal: Un degradado de oscuro a más oscuro */
    background: linear-gradient(180deg, var(--bg-start) 0%, var(--bg-end) 100%);
    font-family: sans-serif;
    color: var(--text-primary);
    min-height: 100vh; /* Asegura que el degradado cubra toda la altura de la ventana */
    
    /* ANIMACIÓN DE TRANSICIÓN AL CARGAR LA PÁGINA (Fade-In) */
    animation: fadeIn 0.6s ease-out; 
}

/* Regla para centrar el contenido principal, aunque no se use la clase en este HTML */
.container {
    max-width: var(--maxw);
    margin: 0 auto;
    padding: 20px;
}

/* ======================================= */
/* 3. ESTILOS DE ENCABEZADO       */
/* ======================================= */
header {
    display: flex;
    /* Usa columna para apilar el logo y la navegación verticalmente */
    flex-direction: column; 
    /* Centra el logo y la navegación en el ancho del header */
    align-items: center; 
    padding: 20px;
    border-bottom: 1px solid var(--card-bg); /* Línea divisoria sutil */
    width: 100%;
}

/* Estilo para el logo (título) y el eslogan */
header h1, header p {
    margin-bottom: 5px; /* Espacio entre el eslogan y la navegación */
    text-align: center;
}

/* Estilos de la Navegación (Enlaces) */
nav {
    display: flex;
    justify-content: center; /* Centra los enlaces entre sí */
    align-items: center;
    margin: 10px 0 0 0; /* Margen superior para separarlo del eslogan */
    max-width: 100%;
}

nav a {
    color: var(--muted); /* Color gris tenue */
    text-decoration: none;
    padding: 8px 12px;
    margin: 0 5px; /* Espacio entre cada link de la nav */
    border-radius: 6px;
    transition: color 0.3s;
}

nav a:hover {
    color: var(--accent); /* Se ilumina con el color de acento al pasar el ratón */
}

/* ======================================= */
/* 4. ESTILOS DE SECCIONES        */
/* ======================================= */
section {
    padding: 40px 20px;
    max-width: var(--maxw);
    margin: 0 auto;
    text-align: center;
}

/* --- HERO (index.html) --- */
.hero h2 {
    font-size: 36px;
    margin-bottom: 10px;
}

.hero p {
    color: var(--muted);
    font-size: 18px;
}

/* --- CATÁLOGO DESTACADO (index.html) --- */
.destacados h2 {
    margin-bottom: 25px;
}

.productos {
    display: flex;
    justify-content: space-around; /* Distribuye espacio entre y alrededor de los productos */
    gap: 20px;
    flex-wrap: wrap; 
}

.producto {
    background: var(--card-bg);
    padding: 20px;
    border-radius: 10px;
    width: 300px; 
    text-align: left;
    transition: transform 0.3s;
}

.producto:hover {
    transform: translateY(-5px); /* Pequeño efecto de elevación al pasar el ratón */
}

.producto h3 {
    color: var(--accent);
    margin-bottom: 5px;
}

.producto .precio {
    font-weight: bold;
    font-size: 20px;
    margin-top: 10px;
}

/* ======================================= */
/* 5. BOTÓN CTA (Common)          */
/* ======================================= */

/* Contenedor usado para centrar el botón en el index.html */
.cta-container {
    text-align: center;
    margin-top: 30px;
    margin-bottom: 30px;
}

.btn-primary {
    display: inline-block;
    
    /* DISEÑO SIMPLE: Borde y texto de acento, fondo transparente */
    background-color: transparent; 
    color: var(--accent); 
    border: 2px solid var(--accent); 
    
    /* FORMA Y TAMAÑO */
    text-decoration: none;
    font-weight: 600; 
    padding: 10px 22px;
    border-radius: 6px; 
    font-size: 16px;
    
    /* TRANSICIÓN SIMPLE: Para el efecto suave */
    transition: background-color 0.3s ease, color 0.3s ease, border-color 0.3s ease;
}

/* EFECTO HOVER: Relleno Sólido */
.btn-primary:hover {
    background-color: var(--accent); /* Se rellena con el color de acento */
    color: var(--bg-start); /* El texto se vuelve oscuro para alto contraste */
}

/* ======================================= */
/* 6. ESTILOS DE CATÁLOGO          */
/* ======================================= */

/* Usado en iphones.html y accesorios.html */
.catalogo {
    padding-top: 20px;
    padding-bottom: 60px;
}

.catalogo .intro {
    color: var(--muted);
    margin-bottom: 40px;
}

.productos-catalogo {
    display: flex;
    flex-wrap: wrap; 
    justify-content: center; /* Centra los ítems en el catálogo */
    gap: 30px; 
    max-width: var(--maxw);
    margin: 0 auto;
}

.producto-item {
    background: var(--card-bg);
    padding: 20px;
    border-radius: 10px;
    width: 280px; 
    text-align: center;
    transition: box-shadow 0.3s ease;
}

.producto-item:hover {
    box-shadow: 0 0 20px rgba(0, 0, 0, 0.5); /* Sombra sutil al pasar el ratón */
}

.producto-img {
    width: 100%;
    max-height: 200px;
    object-fit: contain; 
    margin-bottom: 15px;
}

.producto-item h3 {
    color: var(--text-primary);
    margin-bottom: 5px;
}

.producto-item .precio {
    color: var(--accent);
    font-weight: bold;
    font-size: 22px;
    margin-bottom: 15px;
}

/* ======================================= */
/* 7. ESTILOS DE CHECKOUT          */
/* ======================================= */
.checkout {
    padding-bottom: 60px;
}

.checkout-form {
    max-width: 600px;
    margin: 30px auto;
    padding: 30px;
    background: var(--card-bg);
    border-radius: 10px;
    text-align: left;
}

.form-group {
    margin-bottom: 20px;
}

.form-group label {
    display: block;
    margin-bottom: 8px;
    font-weight: 600;
    color: var(--muted);
}

.form-group input[type="text"],
.form-group input[type="email"],
.form-group input[type="tel"],
.form-group textarea,
.form-group select {
    width: 100%;
    padding: 10px;
    border: 1px solid #333;
    background-color: var(--bg-end); /* Fondo de input más oscuro que la tarjeta */
    color: var(--text-primary);
    border-radius: 5px;
    font-size: 16px;
    transition: border-color 0.3s;
}

.form-group input:focus,
.form-group textarea:focus,
.form-group select:focus {
    border-color: var(--accent); /* Resalta el borde al enfocar */
    outline: none;
}

.form-submit {
    /* El botón usa .btn-primary, pero se fuerza al 100% de ancho aquí */
    width: 100%;
    text-align: center;
    border: none;
    cursor: pointer;
    margin-top: 10px;
}

/* ======================================= */
/* 8. ESTILOS DE CONFIRMACIÓN        */
/* ======================================= */
.confirmacion {
    padding: 60px 20px;
    min-height: 70vh; 
}

.confirmacion h2 {
    color: var(--accent); 
    font-size: 3em;
    margin-bottom: 5px;
}

.confirmacion .intro {
    font-size: 1.2em; 
    max-width: 700px;
    margin: 20px auto 40px auto; 
    color: var(--muted);
}

/* Estilo para el texto normal dentro de la confirmación */
.confirmacion p {
    margin-bottom: 10px;
    color: var(--text-primary); 
}

/* Estilo para el tiempo de entrega (texto simple destacado) */
.tiempo-entrega-simple {
    font-size: 1.8em;
    color: var(--accent);
    margin: 20px auto; 
    padding: 10px 20px;
    font-weight: bold;
    display: inline-block;
}

/* ======================================= */
/* 9. PIE DE PÁGINA (FOOTER)      */
/* ======================================= */
footer {
    max-width: var(--maxw);
    margin: 0 auto;
    padding: 20px;
    color: var(--muted);
    font-size: 14px;
    display: flex;
    justify-content: space-between;
    border-top: 1px solid var(--card-bg);
    margin-top: 40px;
}

/* ======================================= */
/* 10. ANIMACIONES                */
/* ======================================= */
/* 1. Define la animación: Aparecer suavemente y elevarse un poco */
@keyframes fadeIn {
    from {
        opacity: 0; 
        transform: translateY(10px); 
    }
    to {
        opacity: 1; 
        transform: translateY(0);
    }
}