/* ========================
   ESTILOS BASE
   - Aquí se definen los colores principales de la marca
   - Se aplican a toda la página completa
======================== */

:root {
    --bg: #080808;
    --bg-surface: #101219;
    --bg-surface-strong: #111111;
    --accent: #00D4FF;
    --accent-secondary: #0099BB;
    --text: #E5F8FF;
    --text-muted: #B3E7FF;
    --border-soft: rgba(0, 212, 255, 0.18);
}

/* El asterisco (*) significa "aplica esto a TODO el HTML"
   Quitamos márgenes y rellenos que el navegador pone por defecto */
* {
    margin: 0;
    padding: 0;
    box-sizing: border-box;
}

img {
    max-width: 100%;
    display: block;
}

/* body es todo el cuerpo de la página */
body {
    background: radial-gradient(circle at top, rgba(0, 212, 255, 0.04), transparent 25%),
                linear-gradient(180deg, var(--bg) 0%, #050505 100%);
    color: var(--text); /* Texto claro sobre fondo oscuro */
    font-family: Arial, sans-serif; /* Fuente principal */
    animation: fadeIn 0.5s ease-in; /* Animación de entrada suave */
}

/* Animación de fade in para la página completa */
@keyframes fadeIn {
    from {
        opacity: 0; /* Comienza invisible */
        transform: translateY(20px); /* Ligeramente desplazada hacia abajo */
    }
    to {
        opacity: 1; /* Termina completamente visible */
        transform: translateY(0); /* En su posición normal */
    }
}

/* ========================
   MENÚ HAMBURGUESA
   - El checkbox es invisible, es el motor que abre y cierra el menú
   - El label con ☰ es el botón que el usuario toca
   - El menu-panel es el panel lateral que aparece en celular
======================== */

/* Siempre oculto — es el motor invisible del menú */
#menu-toggle {
    display: none;
}

/* Botón ☰ — oculto en escritorio, visible solo en celular */
.menu-btn {
    display: none;
    cursor: pointer;
    font-size: 1.8rem;
    color: #E5F8FF;
    padding: 0.5rem 1rem;
    user-select: none;
}

/* Panel lateral que aparece desde la izquierda en celular */
.menu-panel {
    display: none;
    list-style: none;
    flex-direction: column;
    width: 260px;
    background-color: var(--bg-surface-strong);
    position: fixed;
    top: 0;
    left: 0;
    height: 100vh;
    z-index: 9999;
    padding-top: 3rem;
    box-shadow: 4px 0 15px rgba(0,0,0,0.5);
    border-right: 2px solid var(--border-soft);
    margin: 0;
}

/* Cuando el checkbox está marcado, muestra el panel */
#menu-toggle:checked ~ .menu-panel {
    display: flex;
}

/* Overlay oscuro detrás del menú para permitir cerrar sin seleccionar una opción */
.menu-overlay {
    display: none;
    position: fixed;
    inset: 0;
    background: rgba(0, 0, 0, 0.45);
    z-index: 900;
    cursor: pointer;
}

#menu-toggle:checked ~ .menu-overlay {
    display: block;
}

/* Links dentro del panel lateral */
.menu-panel li a {
    display: block;
    color: #E5F8FF;
    text-decoration: none;
    padding: 1rem 1.5rem;
    border-bottom: 1px solid rgba(0, 212, 255, 0.12);
    font-size: 1rem;
    font-weight: 800;
    letter-spacing: 2px;
    text-transform: uppercase;
    transition: color 0.3s;
}

/* Efecto hover en los links del panel */
.menu-panel li a:hover {
    color: #00D4FF;
}

/* ========================
   HEADER — Barra superior con el logo TX
   - Rectángulo largo que contiene la imagen del logo
   - La imagen se centra y se adapta al tamaño del header
======================== */

.header {
    background: linear-gradient(135deg, #0d1116 0%, #11181f 100%);
    width: 100%;                        /* Ocupa todo el ancho de la pantalla — no tocar */
    height: 120px;                      /* 📐 CAMBIA AQUÍ la altura del rectángulo (en px) */
    display: flex;                      /* Activa alineación flexible — no tocar */
    align-items: center;                /* Centra el contenido verticalmente — no tocar */
    justify-content: center;            /* Centra el contenido horizontalmente — no tocar */
    border-bottom: 2px solid rgba(0, 212, 255, 0.35);  /* 📏 Línea de acento suave */
    overflow: hidden;                   /* Recorta lo que se salga del rectángulo — no tocar */
}

/* La imagen del logo TX dentro del header */
.header-logo,
.header-logo-img {
    width: auto;             /* El ancho se ajusta solo sin deformar la imagen — no tocar */
    max-height: none;        /* No limitar el logo aquí para que conserve su estilo original */
    object-fit: contain;     /* La imagen se adapta sin cortarse ni deformarse — no tocar */
    filter: grayscale(0.25) brightness(1.3) contrast(1.1) hue-rotate(180deg) saturate(1.8);
}

.slogan-fondo img {
    filter: grayscale(0.85) brightness(1.15) contrast(0.9) hue-rotate(180deg) saturate(1.4);
}

/* ========================
   NAV — Barra de navegación
   - Va justo debajo del header
   - Fondo negro con letras blancas
   - Contiene los links para moverse en la página
======================== */

.navbar {
    background: linear-gradient(180deg, #11151c 0%, #0c131a 100%);
    width: 100%;                        /* Ocupa todo el ancho — no tocar */
    padding: 0 40px;                   /* 📐 CAMBIA AQUÍ el espacio interno de la nav */
    border-bottom: 1px solid var(--border-soft);  /* 📏 Línea de acento secundario */
    display: flex;                      /* Pone elementos en fila — no tocar */
    align-items: center;                /* Centra verticalmente — no tocar */
    justify-content: space-between;    /* Separa el botón ☰ de los links — no tocar */
    box-sizing: border-box;            /* No tocar */
}

/* ul es la lista de links — la ponemos en fila horizontal */
.nav-links {
    list-style: none;        /* Quita los puntos de la lista — no tocar */
    display: flex;           /* Pone los links en fila — no tocar */
    gap: 40px;               /* 📐 CAMBIA AQUÍ el espacio entre cada link del menú */
    justify-content: center; /* Centra todos los links — no tocar */
    margin: 0 auto;          /* Centra el bloque de links — no tocar */
    padding: 0;              /* No tocar */
    flex: 1;                 /* Ocupa el espacio disponible para centrar correctamente — no tocar */
}

/* Cada link individual de la navegación */
.nav-links a {
    color: #E5F8FF;          /* 🎨 Letras del menú blanco claro */
    text-decoration: none;     /* Quita el subrayado — no tocar */
    font-size: 18px;           /* 📐 CAMBIA AQUÍ el tamaño de las letras del menú */
    letter-spacing: 2px;       /* 📐 CAMBIA AQUÍ el espacio entre letras del menú */
    text-transform: uppercase; /* Convierte a mayúsculas automáticamente — no tocar */
    transition: color 0.3s;    /* Animación suave al pasar el mouse — no tocar */
    font-weight: 800;          /* 📐 CAMBIA AQUÍ el grosor de las letras (400=normal, 700=negrita) */
    padding: 30px 0;           /* 📐 CAMBIA AQUÍ el espacio arriba y abajo de cada link */
    display: block;            /* No tocar */
}

/* Efecto cuando el mouse pasa encima de un link */
.nav-links a:hover {
    color: #00D4FF; /* 🎨 Acento principal en hover */
}

/* ========================
   SLOGAN — Sección principal de contenido
   - Aquí va el texto de inspiración de la marca
   - La imagen de fondo se ve solo en esta sección
======================== */

.slogan {
    position: relative;                        /* No tocar */
    min-height: 700px;                         /* 📐 CAMBIA AQUÍ la altura de esta sección (en px) */
    display: flex;                             /* No tocar */
    align-items: center;                       /* No tocar */
    justify-content: center;                   /* No tocar */
    padding: 80px 40px;                        /* 📐 CAMBIA AQUÍ el espacio interno de la sección */
    overflow: hidden;                          /* No tocar */
    background: linear-gradient(180deg, rgba(8, 12, 18, 0.98), rgba(12, 18, 28, 0.95)),
                url("images/fondo.png");
    background-size: cover;                    /* La imagen cubre toda la sección — no tocar */
    background-position: center;               /* La imagen se centra — no tocar */
    background-blend-mode: multiply;
}

/* El TX gigante que se ve de fondo — es decorativo */
.slogan-fondo {
    position: absolute;    /* No tocar */
    font-size: 300px;      /* 📐 CAMBIA AQUÍ el tamaño del TX decorativo de fondo */
    font-weight: 900;      /* No tocar */
    color: #0099BB;        /* 🎨 Acento secundario para el TX decorativo */
    opacity: 0.08;         /* 👁️ Cambiar la transparencia para menor contraste */
    letter-spacing: -10px; /* No tocar */
    user-select: none;     /* No tocar */
    pointer-events: none;  /* No tocar */
}

/* El contenido real — el texto que el usuario lee */
.slogan-contenido {
    position: relative; /* No tocar */
    text-align: center; /* 📐 CAMBIA AQUÍ la alineación: center, left o right */
    z-index: 1;         /* No tocar */
}

/* El título principal del slogan */
.slogan-contenido h1 {
    font-size: 52px;           /* 📐 CAMBIA AQUÍ el tamaño del título principal */
    font-weight: 900;          /* 📐 CAMBIA AQUÍ el grosor de la letra */
    letter-spacing: 4px;       /* 📐 CAMBIA AQUÍ el espacio entre letras del título */
    text-transform: uppercase; /* Convierte a mayúsculas — no tocar */
    line-height: 1.2;          /* No tocar */
    margin-bottom: 24px;       /* 📐 CAMBIA AQUÍ el espacio entre el título y el párrafo */
    color: #E5F8FF;
}

.slogan-contenido h1 span {
    display: inline-block;
}

.slogan-contenido h1 .accent-primary {
    color: #00D4FF;
}

.slogan-contenido h1 .accent-secondary {
    color: #0099BB;
}

/* El párrafo debajo del título */
.slogan-text {
    font-size: 18px;     /* 📐 CAMBIA AQUÍ el tamaño del párrafo */
    color: #B3E7FF;      /* 🎨 Color suave para el texto secundario */
    letter-spacing: 2px; /* 📐 CAMBIA AQUÍ el espacio entre letras del párrafo */
    font-style: italic;  /* Cursiva — cámbialo a "normal" si no quieres cursiva */
}

/* ========================
   FOOTER — Pie de página
   - Aparece al final de la página
   - Muestra los derechos y las redes sociales
======================== */

.footer {
    background: var(--bg-surface);
    border-top: 2px solid rgba(0, 212, 255, 0.35); /* 📏 Línea de acento principal */
    padding: 30px 40px;            /* 📐 CAMBIA AQUÍ el espacio interno del footer */
    text-align: center;            /* No tocar */
    display: flex;                 /* No tocar */
    flex-direction: column;        /* No tocar */
    gap: 16px;                     /* 📐 CAMBIA AQUÍ el espacio entre el texto y las redes */
}

/* Texto de derechos reservados */
.footer-derechos {
    font-size: 13px;     /* 📐 CAMBIA AQUÍ el tamaño del texto de derechos */
    color: #B3E7FF;      /* 🎨 Color claro para el texto del pie */
    letter-spacing: 1px; /* No tocar */
}

/* Contenedor de los links de redes sociales */
.footer-redes {
    display: flex;           /* No tocar */
    justify-content: center; /* No tocar */
    gap: 30px;               /* 📐 CAMBIA AQUÍ el espacio entre cada red social */
}

/* Cada link de red social */
.footer-redes a {
    color: #E5F8FF;            /* 🎨 Color de los links de redes */
    text-decoration: none;     /* No tocar */
    font-size: 13px;           /* 📐 CAMBIA AQUÍ el tamaño de los links de redes */
    letter-spacing: 2px;       /* No tocar */
    text-transform: uppercase; /* No tocar */
    transition: color 0.3s;    /* No tocar */
}

/* Efecto hover en las redes sociales */
.footer-redes a:hover {
    color: #00D4FF; /* 🎨 Hover con acento principal */
}

/* ========================
   RESPONSIVE — Adaptación para diferentes dispositivos
   - Aquí ajustamos los estilos según el tamaño de la pantalla
======================== */

/* --- CELULAR (pantallas menores a 480px) --- */
@media (max-width: 480px) {

    /* Mostrar el botón hamburguesa en celular */
    .menu-btn {
        display: block;
    }

    /* Ocultar el menú normal en celular */
    .nav-links {
        display: none;
    }

    .header {
        height: 100px; /* 📐 CAMBIA AQUÍ la altura del rectángulo en CELULAR */
    }

    .header-logo-img {
        height: 80px; /* 📐 CAMBIA AQUÍ el tamaño del logo en CELULAR */
    }

    .slogan-contenido h1 {
        font-size: 28px; /* 📐 CAMBIA AQUÍ el tamaño del título en CELULAR */
        letter-spacing: 2px;
    }

    .slogan-contenido p {
        font-size: 14px; /* 📐 CAMBIA AQUÍ el tamaño del párrafo en CELULAR */
    }

    .slogan-fondo {
        font-size: 150px; /* 📐 CAMBIA AQUÍ el TX de fondo en CELULAR */
    }

    .slogan {
        min-height: 400px;
        padding: 40px 20px;
    }
}

/* --- TABLET (pantallas entre 481px y 768px) --- */
@media (min-width: 481px) and (max-width: 768px) {

    /* Mostrar el botón hamburguesa en tablet */
    .menu-btn {
        display: block;
    }

    /* Ocultar el menú normal en tablet */
    .nav-links {
        display: none;
    }

    .header {
        height: 150px; /* 📐 CAMBIA AQUÍ la altura del rectángulo en TABLET */
    }

    .header-logo,
    .header-logo-img {
        width: auto;
        max-height: none; /* No limitar el logo en tablet */
    }

    .slogan-contenido h1 {
        font-size: 38px; /* 📐 CAMBIA AQUÍ el tamaño del título en TABLET */
    }

    .slogan-fondo {
        font-size: 260px; /* 📐 CAMBIA AQUÍ el TX de fondo en TABLET */
    }
}

/* --- LAPTOP Y PC (pantallas mayores a 1024px) --- */
@media (min-width: 1024px) {

    .header {
        height: 180px; /* 📐 CAMBIA AQUÍ la altura del rectángulo en PC */
    }

    .header-logo,
    .header-logo-img {
        width: auto;
        max-height: none; /* No limitar el logo en PC */
    }

    .slogan-contenido h1 {
        font-size: 60px; /* 📐 CAMBIA AQUÍ el tamaño del título en PC */
    }

    .slogan-fondo {
        font-size: 400px; /* 📐 CAMBIA AQUÍ el TX de fondo en PC */
    }
}

/* ========================
   CARRITO DE COMPRAS
======================== */
/* Carrito flotante que aparece en todas las páginas */
.carrito-flotante {
    position: fixed; /* Posición fija en la esquina superior derecha */
    top: 20px; /* Distancia desde arriba */
    right: 20px; /* Distancia desde la derecha */
    background: #00D4FF; /* Fondo acento principal */
    color: #080808; /* Texto oscuro sobre acento claro */
    padding: 15px; /* Espaciado interno */
    border-radius: 50px; /* Bordes completamente redondeados */
    cursor: pointer; /* Cursor de mano al pasar */
    box-shadow: 0 4px 15px rgba(0,0,0,0.3); /* Sombra para efecto flotante */
    z-index: 1000; /* Aparece encima de otros elementos */
    transition: all 0.3s; /* Transición suave para efectos hover */
    animation: bounceIn 0.6s ease-out; /* Animación de entrada bounce */
}

.carrito-flotante:hover {
    transform: scale(1.1); /* Efecto de agrandamiento al pasar el mouse */
    animation: bounce 0.6s ease-in-out; /* Animación bounce al hacer hover */
}

/* Animación de bounce para el carrito */
@keyframes bounceIn {
    0% {
        transform: scale(0.3);
        opacity: 0;
    }
    50% {
        transform: scale(1.05);
    }
    70% {
        transform: scale(0.9);
    }
    100% {
        transform: scale(1);
        opacity: 1;
    }
}

@keyframes bounce {
    0%, 20%, 50%, 80%, 100% {
        transform: translateY(0) scale(1.1);
    }
    40% {
        transform: translateY(-10px) scale(1.1);
    }
    60% {
        transform: translateY(-5px) scale(1.1);
    }
}

.carrito-contador {
    background: #00D4FF; /* Fondo acento principal */
    color: #080808; /* Texto oscuro para contraste */
    border-radius: 50%; /* Forma circular */
    width: 25px; /* Ancho del círculo */
    height: 25px; /* Alto del círculo */
    display: inline-flex; /* Para centrar el contenido */
    align-items: center; /* Centrado vertical */
    justify-content: center; /* Centrado horizontal */
    font-weight: bold; /* Texto en negrita */
    margin-left: 10px; /* Espacio entre el ícono y el contador */
}

/* Modal que se abre al hacer clic en el carrito */
.modal-carrito {
    display: none; /* Oculto por defecto */
    position: fixed; /* Cubre toda la pantalla */
    top: 0; /* Desde arriba */
    left: 0; /* Desde la izquierda */
    width: 100%; /* Ancho completo */
    height: 100%; /* Alto completo */
    background: rgba(0,0,0,0.8); /* Fondo negro semi-transparente */
    z-index: 2000; /* Aparece encima de todo */
    align-items: center; /* Centrado vertical */
    justify-content: center; /* Centrado horizontal */
}

.modal-contenido {
    background: var(--bg-surface-strong); /* Fondo carbono oscuro */
    padding: 30px; /* Espaciado interno */
    border-radius: 10px; /* Bordes redondeados */
    max-width: 500px; /* Ancho máximo */
    width: 90%; /* Ancho responsive en móviles */
    max-height: 80vh; /* Alto máximo con scroll si es necesario */
    overflow-y: auto; /* Scroll vertical */
}

@media (max-width: 480px) {
    .modal-contenido {
        width: 95%;
        padding: 20px;
    }

    .item-carrito {
        flex-direction: column;
        align-items: flex-start;
        gap: 10px;
    }

    .modal-carrito {
        align-items: flex-start;
        justify-content: center;
        padding-top: 40px;
    }
}

.cerrar-modal {
    float: right; /* Botón de cerrar a la derecha */
    font-size: 2rem; /* Tamaño grande */
    cursor: pointer; /* Cursor de mano */
    color: #00D4FF; /* Color de acento principal */
}

.item-carrito {
    display: flex; /* Flexbox para alinear elementos */
    justify-content: space-between; /* Espaciado entre imagen/info y botón eliminar */
    align-items: center; /* Centrado vertical */
    padding: 15px 0; /* Espaciado vertical */
    border-bottom: 1px solid rgba(0, 212, 255, 0.15); /* Línea separadora */
}

.total-carrito {
    font-size: 1.5rem; /* Tamaño grande para resaltar */
    font-weight: bold; /* Texto en negrita */
    color: #00D4FF; /* Color de acento principal */
    text-align: center; /* Centrado */
    margin: 20px 0; /* Margen vertical */
}