/* ==========================================================================
   1. CONFIGURACIÓN GLOBAL Y ESTILOS BASE
   ========================================================================== */


/* --- FUENTES Y VARIABLES (ROOT) --- */
@import url('https://fonts.googleapis.com/css2?family=Cinzel+Decorative:wght@700&family=Merriweather:wght@400;700&display=swap');

*,
*::before,
*::after {
    box-sizing: border-box;
}

/* --- ESTILOS PARA MÓVILES --- */
/* Los estilos aquí dentro solo se aplicarán si el ancho de la pantalla es de 768px o menos */

img {
    max-width: 100%;
    height: auto;
}


html {
    scrollbar-gutter: stable;
}

.thank-you-header {
    text-align: center;
    margin-bottom: 2rem;
}

.thank-you-header h1 {
    font-size: 3rem;
    margin: 0;
}

.thank-you-header p {
    font-size: 1.2rem;
    color: var(--secondary-text-color);
}



:root {
    /* Modo Gótico (por defecto) */
    --main-bg-color: #000000;
    /* Fondo negro puro */
    --primary-text-color: #e0e0e0;
    /* Un blanco ligeramente grisáceo, más suave a la vista */
    --secondary-text-color: #888888;
    --accent-color: #a50000;
    /* Rojo oscuro y potente, extraído del logo */
    --border-color: #333;
    --card-bg-color: #1a1a1a;

    /* Variables de tipografía que cambiaremos en el siguiente paso */
    --font-family-body: 'Merriweather', serif;
    --font-family-headings: 'Cinzel Decorative', serif;
}

/* Modo Claro */
body.light-mode {
    --main-bg-color: #F5F5F5;
    --primary-text-color: #121212;
    --secondary-text-color: #555;
    --accent-color: #008f00;
    --border-color: #DDDDDD;
    --card-bg-color: #FFFFFF;
}

/* ======================================================= */
/* === ESTILOS FINALES PARA EL HEADER FIJO (STICKY) === */
/* ======================================================= */

body>header {
    /* 1. Lo fijamos a la parte superior de la ventana */
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;

    /* 2. Le damos una capa alta para que esté por encima del contenido */
    z-index: 950;

    /* 3. Mantenemos tus estilos visuales y añadimos un fondo */
    border-bottom: 2px solid var(--accent-color);
    background-color: var(--main-bg-color);
    /* Crucial para que el contenido no se vea a través */
}

/* --- ESTILOS BASE (BODY, A, UL) --- */
body {
    background-color: var(--main-bg-color);
    color: var(--primary-text-color);
    font-family: var(--font-family-body);
    margin: 0;
    display: flex;
    flex-direction: column;
    min-height: 100vh;
    width: 100%;
    transition: background-color 0.3s, color 0.3s;
    overflow-x: hidden;
}

header,
main,
footer {
    overflow-x: hidden;
}

a {
    color: var(--primary-text-color);
    text-decoration: none;
}

ul {
    list-style: none;
    padding: 0;
}

main {
    flex-grow: 1;
}

/* ==========================================================================
   2.1 MARGEN
   ========================================================================== */

header>.container {
    /* Anulamos el espaciado horizontal para que ocupe todo el ancho */
    padding-left: 0;
    padding-right: 0;

    /* Aumentamos el ancho máximo solo para el header, asegurando que se expanda */
    max-width: 90%;
}

.container {
    width: 100%;
    max-width: 1400px;
    margin: 0 auto;
    padding: 0 15px;
    box-sizing: border-box;
}

/* ==========================================================================
   2. HEADER Y NAVEGACIÓN
   ========================================================================== */

.icon-links a.active {
    color: var(--accent-color);
    /* El icono se pone verde */
}

body>header {
    width: 100%;
    border-bottom: 2px solid var(--accent-color);
    position: relative;
    /* Necesario para que z-index funcione correctamente */
    z-index: 900;
}

.main-nav {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 0.25rem 0;
    flex-wrap: wrap;
    /* ¡ESTA ES LA PROPIEDAD CLAVE! */
}

.nav-center ul {
    display: flex;
    flex-wrap: wrap;
    /* Permitimos que los links también salten de línea */
    justify-content: center;
    /* Los centramos si se envuelven */
    gap: 25px;
    /* Un pequeño espacio entre ellos */
}

/* --- Logo --- */
.header-logo {
    height: 60px;
    width: auto;
    display: block;
}

/* --- Enlaces de Navegación Principal --- */
.nav-links {
    display: flex;
    gap: 2rem;
    align-items: center;
}

.main-nav .nav-links a {
    font-size: 1.2rem;
    font-weight: bold;
    display: inline-block;
    transition: color 0.2s ease-in-out, transform 0.2s ease-in-out;
}

.main-nav .nav-links a.active {
    color: var(--accent-color);
    transform: scale(1.1);
}

.main-nav .nav-links a:not(.active):hover {
    color: var(--accent-color);
    transform: scale(1.1);
}

/* --- Iconos del Header --- */
.icon-links {
    display: flex;
    gap: 2rem;
    align-items: center;
}

.icon-links a {
    font-size: 1.2rem;
    display: inline-block;
    transition: color 0.2s ease-in-out, transform 0.2s ease-in-out;
}

.icon-links a:hover {
    color: var(--accent-color);
    transform: scale(1.2);
}

.username-display {
    font-size: 0.9rem;
    font-weight: bold;
    /*display: none!important;*/
}

/* ==========================================================================
   3. FOOTER
   ========================================================================== */

footer {
    width: 100%;
    border-top: 2px solid var(--accent-color);
    /* ANTES: padding: 3rem 0; */
    padding: 0.25rem 0;
    /* Reducimos el espacio vertical general del footer */
}

.footer-container {
    display: flex;
    flex-direction: column;
}

.footer-content {
    display: flex;
    gap: 8rem;
    margin-bottom: 2rem;
    width: auto;
    align-items: flex-start;
    /* Alinea todos los elementos en la parte superior */
}

.footer-logo-section {
    margin-left: auto;
    /* Esto empuja el elemento al extremo derecho del contenedor flex */
}

/* 3. Le damos un tamaño y estilo al logo */
.footer-logo {
    width: 250px;
    /* Puedes ajustar el tamaño a tu gusto (ej. 150px, 250px) */
    height: auto;
    opacity: 20;
    /* Le damos una opacidad sutil para que no sea demasiado llamativo */
    transition: opacity 0.3s ease;
}

.footer-logo:hover {
    opacity: 1;
    /* El logo se ilumina al pasar el cursor */
}

.footer-section h4 {
    color: var(--accent-color);
    margin-bottom: 1rem;
}

.footer-section ul li a {
    display: block;
    margin-bottom: 0.5rem;
    color: var(--secondary-text-color);
}

.footer-bottom {
    text-align: center;
    color: var(--secondary-text-color);
    font-size: 0.9rem;
    border-top: 1px solid var(--border-color);
    padding-top: 1rem;
    width: 100%;
}

/* ==========================================================================
   4. PÁGINA DE INICIO (HOME)
   ========================================================================== */

/* --- Hero Section --- */
.home-hero-main {
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    text-align: center;
    padding: 1rem 0 1rem;
}

.home-hero-main h1 {
    font-size: 4rem;
    margin: 0;
    font-weight: 700;
}

.home-hero-main p {
    font-size: 1.2rem;
    letter-spacing: 1px;
    color: var(--secondary-text-color);
    margin-top: 0.5rem;
}

.home-hero-main .line {
    width: 250px;
    height: 3px;
    background-color: var(--accent-color);
    margin-top: 1.5rem;
}

/* --- Carrusel de Productos --- */
.product-showcase {
    margin-bottom: 3rem;
}

.section-title {
    text-align: center;
    font-size: 1.5rem;
    text-transform: uppercase;
    letter-spacing: 1.5px;
    margin-bottom: 1rem;
}

.carousel-container-final {
    position: relative;
    padding: 0 50px;
    box-sizing: border-box;
}

.carousel-viewport-final {
    overflow: hidden;
    padding: 20px 0;
}

.carousel-track-final {
    display: flex;
    transition: transform 0.5s ease-in-out;
    align-items: stretch;
    /* <-- LA CLAVE: Fuerza a todos los items a tener la misma altura */
}

.carousel-item-final {
    flex: 0 0 25%;
    padding: 0 0.75rem;
    box-sizing: border-box;
}

.product-card-dark {
    background-color: transparent;
    border: 1px solid var(--border-color);
    border-radius: 8px;
    overflow: hidden;
    display: flex;
    flex-direction: column;
    height: 100%;
    /* <-- RESTAURAMOS esta línea */
    transition: transform 0.3s ease-in-out;
}

.product-card-dark:hover {
    transform: scale(1.05);
}

.product-card-dark .image-wrapper {
    position: relative;
    width: 100%;
    aspect-ratio: 4 / 5;
}

.product-card-dark img {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    object-fit: cover;
}

.product-card-dark .card-info {
    padding: 1.5rem;
    text-align: center;
    background-color: var(--card-bg-color);

    /* 1. Le decimos que ocupe el espacio vertical restante */
    flex-grow: 1;

    /* 2. Lo convertimos en un contenedor flex vertical */
    display: flex;
    flex-direction: column;
}

.product-card-dark .card-info h3 {
    /* 3. Le decimos al título que NO ocupe espacio extra */
    flex-grow: 0;
}

.product-card-dark .card-info .price {
    /* 4. Le decimos al precio que SÍ ocupe el espacio extra, empujándolo hacia abajo */
    flex-grow: 1;
    display: flex;
    align-items: flex-end;
    /* Alinea el texto del precio abajo del todo */
    justify-content: center;
    /* Centra el texto del precio horizontalmente */
}

.product-card-dark .category {
    font-size: 0.75rem;
    color: var(--secondary-text-color);
    letter-spacing: 1px;
    margin-bottom: 0.5rem;
    display: block;
}

.product-card-dark h3 {
    font-size: 1.1rem;
    font-weight: 600;
    margin: 0 0 0.75rem 0;
}

.product-card-dark .price {
    font-size: 1.2rem;
    font-weight: bold;
    color: var(--primary-text-color);
}

.carousel-arrow-final {
    position: absolute;
    top: 40%;
    transform: translateY(-50%);
    background-color: var(--main-bg-color);
    border: 1px solid var(--border-color);
    color: var(--primary-text-color);
    width: 40px;
    height: 40px;
    border-radius: 50%;
    font-size: 1.5rem;
    cursor: pointer;
    z-index: 10;
    display: flex;
    justify-content: center;
    align-items: center;
    transition: all 0.2s;
    transition: transform 0.3s ease-in-out;
}

.carousel-arrow-final:hover {
    background-color: var(--accent-color);
    color: #000;
    transform: translateY(-50%) scale(1.15);
}

.carousel-arrow-final.prev {
    left: 0;
    transition: transform 0.3s ease-in-out;
}

.carousel-arrow-final.next {
    right: 0;
    transition: transform 0.3s ease-in-out;
}


/* ==========================================================================
   5. PÁGINA DE CATEGORÍA
   ========================================================================== */

.category-page-container {
    padding-top: 2rem;
    /* Espacio superior consistente */
    padding-bottom: 3rem;
    /* Espacio inferior consistente */
}

.category-page-title {
    font-size: 1.8rem;
    font-weight: bold;
    text-transform: uppercase;
    letter-spacing: 1.5px;
    margin: 0 0 2rem 0;
    /* Aseguramos márgenes consistentes */
    padding: 0;
}

.category-product-grid {
    display: grid;
    /* Forzamos 4 columnas y dejamos que el navegador calcule el tamaño */
    grid-template-columns: repeat(4, 1fr);
    gap: 2rem;
    /* Espacio uniforme entre todas las tarjetas */
}

.empty-category-msg {
    text-align: center;
    padding: 4rem 0;
    color: var(--secondary-text-color);
}

/* --- Paginación --- */
.pagination-nav {
    display: flex;
    justify-content: center;
    margin-top: 3rem;
}

.pagination-nav ul {
    display: flex;
    gap: 0.5rem;
}

.pagination-nav a,
.pagination-nav span {
    display: block;
    min-width: 40px;
    height: 40px;
    line-height: 40px;
    text-align: center;
    border: 1px solid var(--border-color);
    border-radius: 4px;
    transition: background-color 0.2s, color 0.2s;
}

.pagination-nav a:hover {
    background-color: var(--accent-color);
    color: #000;
    border-color: var(--accent-color);
}

.pagination-nav span.active {
    background-color: var(--accent-color);
    color: #000;
    border-color: var(--accent-color);
    font-weight: bold;
}


/* ==========================================================================
   6. PÁGINA DE PRODUCTO DETALLADO
   ========================================================================== */

/* --- Breadcrumbs (Reutilizable) --- */
.breadcrumb-nav {
    padding: -0rem 0;
    border-bottom: 1px solid var(--border-color);
    margin-bottom: 1.5rem;
    margin-top: 1.5rem;
}

.breadcrumb-nav ul {
    display: flex;
    align-items: center;
    gap: 0.75rem;
    font-size: 0.9rem;
}

.breadcrumb-nav li {
    display: flex;
    align-items: center;
    gap: 0.75rem;
}

.breadcrumb-nav a {
    color: var(--secondary-text-color);
    transition: color 0.2s;
}

.breadcrumb-nav a:hover {
    color: var(--accent-color);
}

.breadcrumb-nav span {
    color: var(--primary-text-color);
    font-weight: bold;
}

.breadcrumb-nav .fa-chevron-right {
    font-size: 0.7rem;
    color: var(--secondary-text-color);
}

/* --- Layout Principal del Producto --- */
.product-detail-page {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 4rem;
    padding: 2rem 0;
    align-items: start;
}

/* --- Columna Izquierda: Información --- */
.product-info-column .price {
    font-size: 2rem;
    color: var(--accent-color);
    font-weight: bold;
    margin-top: 0.5rem;
    margin-bottom: 1rem;
}

.product-info-column .meta,
.product-info-column .description {
    margin-bottom: 1.5rem;
}

.option-selector {
    margin-bottom: 1.5rem;
}

.product-info-column {
    flex: 1 1 55%;
    min-width: 0;

    /* --- LÍNEAS NUEVAS PARA CENTRAR --- */
    display: flex;
    flex-direction: column;
    /* align-items: center;  <-- No usaremos esta para que los títulos se queden a la izquierda */
}

.option-selector label {
    display: block;
    margin-bottom: 0.75rem;
    font-weight: bold;
}

.option-selector .options button {
    background: transparent;
    border: 1px solid var(--border-color);
    color: var(--primary-text-color);
    padding: 0.5rem 1rem;
    margin-right: 0.5rem;
    cursor: pointer;
    transition: all 0.2s;
}

.option-selector .options button:hover {
    border-color: var(--accent-color);
}

.option-selector .options button.active {
    background-color: var(--primary-text-color);
    color: var(--main-bg-color);
    border-color: var(--primary-text-color);
}

/* --- Columna Derecha: Galería --- */
.product-gallery-column {
    display: flex;
    flex-direction: column;
    gap: 1rem;
    width: 60%;
}

.product-gallery-column .main-product-image {
    position: relative;
    width: 100%;
    /* PROPORCIÓN MÁS ALTA PARA LA PÁGINA DE DETALLE */
    aspect-ratio: 4 / 5;
}

.main-product-image {
    position: relative;
    width: 100%;
    aspect-ratio: 1/1;
}

#main-product-image {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    object-fit: cover;
}

.product-thumbnails {
    display: grid;
    grid-template-columns: repeat(5, 1fr);
    gap: 1rem;
}

.product-thumbnails .thumbnail-img {
    width: 100%;
    height: auto;
    aspect-ratio: 1 / 1;
    object-fit: cover;
    cursor: pointer;
    border: 2px solid transparent;
    opacity: 0.6;
    transition: all 0.2s ease-in-out;
}

.product-thumbnails .thumbnail-img:hover {
    opacity: 1;
}

.product-thumbnails .thumbnail-img.active {
    opacity: 1;
    border-color: var(--accent-color);
}


/* ==========================================================================
   7. CARRITO DE COMPRAS (SIDEBAR)
   ========================================================================== */

#cart-overlay {
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background-color: rgba(0, 0, 0, 0.6);
    z-index: 999;
    transition: opacity 0.3s ease-in-out;
    opacity: 1;
}

#cart-sidebar {
    position: fixed;
    top: 0;
    right: 0;
    width: 380px;
    height: 100%;
    background-color: var(--main-bg-color);
    border-left: 1px solid var(--border-color);
    z-index: 1000;
    transform: translateX(100%);
    transition: transform 0.4s cubic-bezier(0.25, 0.46, 0.45, 0.94);
    display: flex;
    flex-direction: column;
}

#cart-overlay.hidden,
#cart-sidebar:not(.open) {
    opacity: 0;
    pointer-events: none;
}

#cart-sidebar.open {
    transform: translateX(0);
}

/* --- Estilos Internos del Carrito --- */
.cart-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 1rem 1.5rem;
    border-bottom: 1px solid var(--border-color);
}

.cart-header h3 {
    margin: 0;
    font-size: 1.2rem;
}

#close-cart-btn {
    background: none;
    border: none;
    color: var(--primary-text-color);
    font-size: 2rem;
    cursor: pointer;
}

#cart-items {
    flex-grow: 1;
    overflow-y: auto;
    padding: 1rem;
}

.empty-cart-msg {
    text-align: center;
    margin-top: 3rem;
    color: var(--secondary-text-color);
}

.cart-footer {
    padding: 1.5rem;
    border-top: 1px solid var(--border-color);
}

.cart-total {
    display: flex;
    justify-content: space-between;
    align-items: center;
    font-size: 1.1rem;
    margin-bottom: 1rem;
    gap: 1rem;
}

/* --- Items dentro del Carrito --- */
.cart-item-row {
    display: flex;
    align-items: center;
    gap: 1rem;
    padding: 1rem 0;
    border-bottom: 1px solid var(--border-color);
}

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

.cart-item-row img {
    width: 70px;
    height: 70px;
    object-fit: cover;
}

.cart-item-row .item-details {
    flex-grow: 1;
    display: flex;
    flex-direction: column;
}

.cart-item-row .item-name {
    font-weight: bold;
}

.cart-item-row .item-price {
    font-size: 0.9rem;
    color: var(--secondary-text-color);
}

.cart-item-row .remove-item-btn {
    background: none;
    border: 1px solid var(--border-color);
    border-radius: 50%;
    color: var(--secondary-text-color);
    cursor: pointer;
    width: 30px;
    height: 30px;
    font-size: 1.2rem;
    display: flex;
    justify-content: center;
    align-items: center;
    padding: 0;
    transition: all 0.2s;
}

.cart-item-row .remove-item-btn:hover {
    background-color: var(--primary-text-color);
    color: var(--main-bg-color);
}

/* --- Contador de Items del Carrito (Insignia) --- */
.cart-icon-container,
.wishlist-icon-container {
    position: relative;
    display: inline-block;
}

#cart-item-count,
#wishlist-item-count {
    position: absolute;
    top: -8px;
    right: -10px;
    background-color: var(--accent-color);
    color: #000;
    border-radius: 50%;
    width: 22px;
    height: 22px;
    font-size: 0.8rem;
    font-weight: bold;
    display: flex;
    justify-content: center;
    align-items: center;
    transform: scale(1);
    transition: transform 0.2s ease-out;
}

#cart-item-count.hidden,
#wishlist-item-count.hidden {
    transform: scale(0);
}


/* ==========================================================================
   8. PÁGINA DE CHECKOUT
   ========================================================================== */

.checkout-page {
    padding: 1rem 0 3rem;
}

.checkout-container {
    border: 2px solid var(--accent-color);
    border-radius: 5px;
    padding: 2.5rem;
}

.checkout-header {
    text-align: center;
}

.checkout-header h1 {
    font-size: 2.5rem;
    margin-bottom: 1rem;
}

.info-bar {
    display: flex;
    justify-content: center;
    gap: 2rem;
    color: var(--secondary-text-color);
    margin-bottom: 3rem;
}

.info-bar i {
    color: var(--accent-color);
    margin-right: 0.5rem;
}

/* --- Barra de Progreso del Checkout --- */
.progress-bar {
    display: flex;
    justify-content: center;
    align-items: center;
    margin-bottom: 2rem;
}

.step {
    display: flex;
    align-items: center;
    color: var(--accent-color);
    /* Color por defecto para texto e ícono inactivos */
    font-size: 0.9rem;
}

.step i {
    font-size: 1.2rem;
    margin-right: 0.5rem;
}

/* Las líneas de conexión entre los pasos */
.step:not(:last-child)::after {
    content: '';
    display: block;
    width: 100px;
    /* Ancho de la línea */
    height: 2px;
    background-color: var(--border-color);
    /* Color por defecto de la línea */
    margin: 0 1.5rem;
}

.step.checked::after {
    background-color: var(--accent-color);
    /* Línea siguiente en verde */
}

.progress-divider {
    border: none;
    height: 1px;
    background-color: var(--border-color);
    margin-bottom: 2rem;
}

/* --- Layout y Formulario del Checkout --- */
.checkout-main-content {
    display: grid;
    grid-template-columns: 1.5fr 1fr;
    gap: 3rem;
    margin-top: 2rem;
    margin-top: 0.5rem;
}

.form-column section {
    margin-bottom: 2rem;
}

.form-column h3 {
    margin-top: 0;
    margin-bottom: 1rem;
    font-size: 1.2rem;
}

.form-group {
    position: relative;
    margin-bottom: 1.5rem;
}

.form-row {
    display: flex;
    gap: 1.5rem;
}

.form-row .form-group {
    flex: 1;
    /* Hace que ambos campos crezcan para ocupar el espacio disponible por igual */
    width: auto;
    /* Anula los anchos fijos de 40% y 60% */
}

.form-column input[type="text"],
.form-column input[type="tel"],
.form-column textarea {
    width: 100%;
    background-color: #2a2a2a;
    border: 1px solid var(--border-color);
    color: var(--primary-text-color);
    padding: 1.5rem 0.8rem 0.7rem;
    border-radius: 4px;
    font-size: 1rem;
}

.form-column textarea {
    resize: vertical;
    min-height: 100px;
}

.form-column label {
    position: absolute;
    top: 1rem;
    left: 0.9rem;
    color: var(--secondary-text-color);
    pointer-events: none;
    transition: all 0.2s ease-out;
}

.form-column input:focus+label,
.form-column input:not(:placeholder-shown)+label,
.form-column textarea:focus+label,
.form-column textarea:not(:placeholder-shown)+label {
    top: 0.3rem;
    left: 0.8rem;
    font-size: 0.75rem;
    color: var(--accent-color);
}

.payment-method {
    background-color: #2a2a2a;
    border: 1px solid var(--border-color);
    padding: 1rem;
    border-radius: 4px;
    font-weight: bold;
    cursor: not-allowed;
}

.privacy-policy {
    font-size: 0.8rem;
    color: var(--secondary-text-color);
    margin-top: 1rem;
}

/* --- Resumen del Pedido (Columna Derecha) --- */
.order-summary {
    background-color: var(--card-bg-color);
    padding: 2rem;
    border: 2px solid var(--border-color);
    border-radius: 5px;
}

.order-summary h3 {
    margin-top: 0;
}

.order-table .order-row {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 1rem 0;
    border-bottom: 1px solid var(--border-color);
}

.order-table .order-row:last-child {
    border: none;
}

.order-table .order-row.header {
    font-weight: bold;
    color: var(--secondary-text-color);
    font-size: 0.9rem;
}

.product-info-checkout {
    display: flex;
    align-items: center;
    gap: 1rem;
    font-size: 0.9rem;
}

.product-info-checkout img {
    width: 40px;
    height: 40px;
    object-fit: cover;
}

.order-table .order-row.total {
    font-size: 1.3rem;
}

.coupon-section {
    display: flex;
    margin-top: 1.5rem;
}

.order-table .order-row.subtotal,
.order-table .order-row.total {
    border-bottom: 1px dashed var(--border-color);
}

.order-details-section h2,
.billing-address-section h2 {
    margin-top: 0;
}

.coupon-section input {
    flex-grow: 1;
    background-color: #2a2a2a;
    border: 1px solid var(--border-color);
    padding: 0.8rem;
    color: var(--primary-text-color);
    border-radius: 4px 0 0 4px;
    border-right: none;
}

.coupon-section button {
    background-color: var(--accent-color);
    border: none;
    color: #000;
    padding: 0 1.5rem;
    font-weight: bold;
    cursor: pointer;
    border-radius: 0 4px 4px 0;
    transition: opacity 0.2s, transform 0.2s ease-in-out;
}


/* ==========================================================================
   9. PÁGINAS ESTÁTICAS (T&C, FAQ)
   ========================================================================== */

.static-page-container {
    padding: 3rem 0;
}

.static-page-container h1 {
    text-align: center;
    font-size: 2.5rem;
    margin-bottom: 2rem;
    color: var(--accent-color);
}

.static-page-container h2 {
    font-size: 1.5rem;
    margin-top: 2.5rem;
    margin-bottom: 1rem;
    border-bottom: 1px solid var(--border-color);
    padding-bottom: 0.5rem;
}

.static-page-container p {
    line-height: 1.8;
    color: var(--secondary-text-color);
}

.static-page-container p strong {
    color: var(--primary-text-color);
}

.faq-title {
    text-align: center;
    font-size: 3.5rem;
    color: var(--accent-color);
    margin-bottom: 3rem;
    font-family: 'Arial Black', Gadget, sans-serif;
}

.faq-list {
    list-style: none;
    padding: 0;
    max-width: 800px;
    margin: 0 auto;
}

.faq-item {
    display: flex;
    align-items: flex-start;
    margin-bottom: 2.5rem;
}

.faq-number {
    font-size: 4rem;
    color: var(--accent-color);
    font-weight: bold;
    margin-right: 2rem;
    min-width: 60px;
    text-align: center;
    font-style: italic;
}

.faq-text h3 {
    margin-top: 0;
    margin-bottom: 0.5rem;
    font-size: 1.5rem;
    color: var(--primary-text-color);
}

.faq-text p {
    line-height: 1.7;
    margin: 0;
    color: var(--secondary-text-color);
}


/* ==========================================================================
   10. BOTONES DE ACCIÓN GLOBALES
   ========================================================================== */

.purchase-button,
.checkout-btn,
.place-order-btn {
    width: 100%;
    padding: 1rem;
    background-color: var(--accent-color);
    color: #000;
    border: none;
    border-radius: 4px;
    font-size: 1.1rem;
    font-weight: bold;
    cursor: pointer;
    transition: opacity 0.2s, transform 0.2s ease-in-out;
}

.purchase-button:hover,
.checkout-btn:hover,
.place-order-btn:hover,
.coupon-section button:hover {
    transform: scale(1.03);
    opacity: 0.9;
}

.checkout-btn {
    /* --- Propiedades para centrar --- */
    display: flex;
    justify-content: center;
    /* Centra el texto horizontalmente */
    align-items: center;
    /* Centra el texto verticalmente (muy útil si el botón tiene una altura fija) */

    /* --- Otras propiedades que tu botón ya debería tener --- */
    /* Asegúrate de que estas propiedades ya estén en tu CSS */
    padding: 15px 20px;
    background-color: #ADFF2F;
    /* Un verde-lima similar al de la imagen */
    color: black;
    text-decoration: none;
    font-weight: bold;
    border-radius: 8px;
    /* Bordes redondeados */
    text-transform: uppercase;
    text-align: center;
    /* Buena práctica tenerlo como respaldo */
    border: none;
    cursor: pointer;
}

.purchase-button:disabled {
    background-color: #555;
    color: #999;
    cursor: not-allowed;
    opacity: 0.7;
}

.purchase-button:disabled:hover {
    transform: none;
    opacity: 0.7;
}

.place-order-btn i {
    margin-right: 0.5rem;
}

/* ======================================================= */
/* === ESTILOS FINALES PARA LA PÁGINA DE WISHLIST ======== */
/* ======================================================= */

.wishlist-page .page-title {
    font-size: 2rem;
    margin-bottom: 2rem;
    text-align: left;
}

/* --- Estructura de la Tabla con Grid --- */
.wishlist-table-container {
    border-top: 1px solid var(--border-color);
}

.wishlist-table {
    width: 100%;
    text-align: left;
    /* Usamos display: contents para que la <table> no interfiera con el grid */
    display: contents;
}



.wishlist-table th {
    padding: 1rem 0;
    text-transform: uppercase;
    font-size: 0.8rem;
    font-weight: bold;
    color: var(--secondary-text-color);
}

.wishlist-table th:first-child {
    padding-left: 50px;
    /* Espacio para el botón de eliminar */
}

/* Fila de cada producto */
.wishlist-item {
    display: grid;
    /* Misma distribución de columnas que el encabezado */
    grid-template-columns: 3fr 1fr 1fr 1.5fr;
    align-items: center;
    gap: 16rem;
    padding: 1.5rem 0;
    border-bottom: 1px solid var(--border-color);
}

/* Encabezado de la tabla */
.wishlist-table thead tr {
    display: grid;
    /* Definimos las 4 columnas principales y sus tamaños */
    grid-template-columns: 3fr 1fr 1fr 1.5fr;
    align-items: center;
    width: 100%;
    gap: 15.5rem;
    border-bottom: 1px solid var(--border-color);
}

.wishlist-table tbody tr:last-child {
    border-bottom: none;
}

/* Celda de la información del producto (X, imagen, nombre) */
.product-info-wishlist {
    display: flex;
    align-items: center;
    gap: 1rem;
}

.product-info-wishlist .remove-wishlist-btn {
    background: none;
    border: 1px solid var(--border-color);
    width: 30px;
    height: 30px;
    border-radius: 50%;
    color: var(--secondary-text-color);
    cursor: pointer;
    transition: all 0.2s;
    flex-shrink: 0;
}

.product-info-wishlist .remove-wishlist-btn:hover {
    background-color: var(--primary-text-color);
    color: var(--main-bg-color);
}

.product-info-wishlist img {
    width: 80px;
    height: 80px;
    object-fit: cover;
    border-radius: 4px;
}

.product-price {
    font-weight: bold;
}

.product-stock {
    color: var(--accent-color);
    font-weight: bold;
}

/* Celda de los botones de acción */
.product-actions {
    display: flex;
    flex-direction: column;
    gap: 0.5rem;
}

/* ======================================================= */
/* === ESTILOS FINALES Y CORREGIDOS PARA EL BOTÓN DE WISHLIST === */
/* ======================================================= */

.add-to-wishlist-btn {
    display: inline-block;
    text-align: center;
    margin-top: 1.5rem;
    color: var(--secondary-text-color);
    cursor: pointer;
    align-self: center;

    /* La transición ahora se aplica a TODOS los estados */
    transition: color 0.2s ease-in-out, transform 0.2s ease-in-out;
}

/* 1. Regla de HOVER GENERAL: Siempre se agranda */
.add-to-wishlist-btn:hover {
    transform: scale(1.05);
}

/* 2. Regla de HOVER para el estado NO deshabilitado: cambia a color verde */
.add-to-wishlist-btn:not(.disabled):hover {
    color: var(--accent-color);
}

/* 3. Regla para el estado DESHABILITADO: es verde y no se puede hacer clic */
.add-to-wishlist-btn.disabled {
    color: var(--accent-color);
    cursor: default;
    /* El cursor ya no es una meno, indicando que no hay acción */
}

/* 4. Estilo para el ícono del corazón (sin cambios) */
.add-to-wishlist-btn i {
    margin-right: 0.5rem;
}

/* Mensaje de Wishlist vacía */
.empty-wishlist-msg {
    text-align: center;
    padding: 4rem;
    color: var(--secondary-text-color);
}


/* BOTÓN DE LA CATEGORÍA WISHLIST */
.wishlist-action-btn {
    padding: 0.8rem 1rem;
    text-align: center;
    border: none;
    border-radius: 4px;
    font-weight: bold;
    font-family: inherit;
    font-size: 0.9rem;
    cursor: pointer;

    /* La animación */
    transition: transform 0.2s ease-in-out, opacity 0.2s;
}

/* Efecto hover que se aplica a AMBOS botones */
.wishlist-action-btn:hover {
    transform: scale(1.03);
    opacity: 0.9;
}

/* Estilo específico para el botón "Select options" */
.wishlist-action-btn.primary {
    background-color: var(--accent-color);
    /* Fondo verde neón */
    color: #000;
    /* Texto negro */
}

/* Estilo específico para el botón "Quick view" */
.wishlist-action-btn.secondary {
    background-color: var(--border-color);
    /* Fondo gris oscuro */
    color: var(--primary-text-color);
    /* Texto blanco */
}

/* ORDER SUCCESS */
.order-success-page {
    /* NUEVO: Añadimos un padding superior para despegar el título del header */
    padding-top: -3rem;

    /* mentenemos el margen inferior para separar la caja del footer */
    margin-bottom: 4rem;
}

/* ==========================================================================
   11. PÁGINA DE CONFIRMACIÓN DE PEDIDO (AJUSTES VISUALES)
   ========================================================================== */

/* --- Estilo para las nuevas cajas de sección --- */
.order-details-section,
.billing-address-section {
    /* Fondo gris semitransparente para diferenciar */
    background-color: rgba(255, 255, 255, 0.05);

    /* Borde sutil para definir la caja */
    border: 1px solid var(--border-color);

    /* Espaciado interno para que el contenido no se pegue */
    padding: 2rem;

    /* Esquinas redondeadas */
    border-radius: 8px;
}

/* Espacio entre las dos cajas */
.order-details-section {
    margin-bottom: 2.5rem;
    /* Modificar tamaño de ser necesario*/
    max-width: 100%;
    margin-right: auto;
    /* Convertimos la sección en un contenedor flex para posicionar el botón */
    display: flex;
    flex-direction: column;
}

/* --- Estilos para el nuevo botón "Order again" --- */
.order-again-link {
    /* Posicionamiento del botón */
    align-self: flex-end;
    /* Lo alinea a la derecha */
    margin-top: 1.5rem;
    /* Espacio para separarlo de la tabla */

    /* Apariencia de botón */
    display: inline-block;
    background-color: var(--accent-color);
    color: #000;
    font-weight: bold;
    text-decoration: none;
    padding: 0.8rem 1.5rem;
    border-radius: 4px;
    border: none;
    cursor: pointer;
    text-align: center;

    /* Animación suave al pasar el ratón */
    transition: transform 0.2s ease-in-out, opacity 0.2s;
}

.order-table .order-row:has(strong) span:first-child {
    font-weight: bold;
    color: var(--primary-text-color);
    /* Asegura que el color sea el principal (blanco) */
}

/* PARA REDUCIR EL CONTAINER DE ORDER SUCCESS */
.order-success-page .container {
    max-width: 1100px;
    /* Puedes ajustar este valor a tu gusto (ej. 800px, 1000px) */
}

.order-again-link:hover {
    transform: scale(1.03);
    opacity: 0.9;
}

.billing-address-section {
    /* Define un ancho máximo más pequeño para esta caja */
    max-width: 25%;
    /* Puedes ajustar este valor, ej. 500px o 70% */
    margin-right: auto;
}

/* Estilos para el feedback de cupones */
#coupon-message {
    text-align: center;
    margin-top: 1rem;
    font-weight: bold;
}

#coupon-message.error {
    color: #ff5555;
}

.order-row.discount span:first-child {
    color: var(--accent-color);
}

#remove-coupon-btn {
    color: #ff5555;
    text-decoration: none;
    font-size: 0.8rem;
    margin-left: 0.5rem;
}

/* Estilo para el pequeño tag del porcentaje */
.discount-percentage {
    background-color: var(--border-color);
    color: var(--secondary-text-color);
    padding: 2px 6px;
    border-radius: 4px;
    font-size: 0.8rem;
    margin-left: 0.5rem;
}

/* = a========================================================================
   12. PÁGINA DE CUENTA - SECCIÓN DE DESCARGAS
   ========================================================================== */

/* --- Estilo para la caja principal de la sección --- */
.downloads-section {
    /* Fondo gris semitransparente para diferenciar */
    background-color: rgba(255, 255, 255, 0.05);

    /* Borde sutil para definir la caja */
    border: 1px solid var(--border-color);

    /* Espaciado interno para que el contenido no se pegue */
    padding: 2rem;

    /* Esquinas redondeadas */
    border-radius: 8px;

    /* Espacio por si hay otros elementos en la página */
    margin-top: 2rem;
    margin-bottom: 2.5rem;
}

/* --- Estilo para el título "Downloads" --- */
.downloads-section h2 {
    /* Elimina el margen superior para acercarlo al borde de la caja */
    margin-top: 0;
    font-size: 1.8rem;
    margin-bottom: 1.5rem;
}

/* --- Estilos para la tabla de descargas --- */
.downloads-table {
    width: 100%;
    border-collapse: collapse;
    /* Une los bordes de las celdas */
    text-align: left;
}

/* Estilo para los encabezados (Product, Expires, Download) */
.downloads-table th {
    padding-bottom: 1rem;
    border-bottom: 1px solid var(--border-color);
    text-transform: uppercase;
    font-size: 0.8rem;
    font-weight: bold;
    color: var(--secondary-text-color);
}

/* Estilo para las celdas de datos */
.downloads-table td {
    padding: 1.2rem 0;
    border-bottom: 1px solid var(--border-color);
}

/* Elimina el borde de la última fila para un acabado limpio */
.downloads-table tbody tr:last-child td {
    border-bottom: none;
}

/* Estilo para el enlace de descarga para que resalte */
.downloads-table a {
    color: var(--accent-color);
    font-weight: bold;
    text-decoration: none;
    transition: opacity 0.2s;
}

.downloads-table a:hover {
    opacity: 0.8;
    text-decoration: underline;
}

/* ==========================================================================
   13. BARRA DE RESUMEN DEL PEDIDO
   ========================================================================== */

/* --- Contenedor principal de la barra --- */
.order-meta-summary {
    display: flex;
    /* Pone los elementos en una fila horizontal */
    justify-content: space-around;
    /* Distribuye el espacio entre los elementos */
    align-items: center;
    /* Centra los elementos verticalmente */

    /* Estilo de la caja */
    background-color: rgba(255, 255, 255, 0.05);
    border: 1px solid var(--border-color);
    padding: 1.5rem;
    border-radius: 8px;

    /* Espacio para separarla de la sección "Downloads" de abajo */
    margin-bottom: 2.5rem;
}

/* --- Cada ítem individual (Número de pedido, Fecha, etc.) --- */
.meta-item {
    /* Añade el separador a la izquierda de cada elemento, excepto el primero */
    border-left: 1px dashed var(--border-color);
    padding-left: 2rem;
    /* Espacio entre el separador y el texto */

    /* Damos un ancho flexible a cada ítem */
    flex: 1;
    min-width: 0;
}

/* Elimina el separador del primer elemento para un borde limpio */
.meta-item:first-child {
    border-left: none;
    padding-left: 0;
}

/* --- Estilo para las etiquetas (Order number:, Date:, etc.) --- */
.meta-label {
    display: block;
    /* Asegura que ocupe su propia línea */
    font-size: 0.8rem;
    color: var(--secondary-text-color);
    margin-bottom: 0.25rem;
    /* Pequeño espacio antes del valor */
}

/* --- Estilo para los valores (7018, August 11, etc.) --- */
.meta-value {
    font-weight: bold;
    color: var(--primary-text-color);
}

/* ==========================================================================
   11. PÁGINA DE MI CUENTA (DASHBOARD)
   ========================================================================== */

.account-page-layout {
    display: grid;
    grid-template-columns: 1fr 3fr;
    /* Sidebar ocupa 1/4, contenido 3/4 */
    gap: 3rem;
    padding: 2rem 0;
}

/* --- Barra Lateral --- */
.account-sidebar h2 {
    margin-top: 0;
    text-transform: uppercase;
    font-size: 1.2rem;
}

.account-nav ul {
    list-style: none;
    padding: 0;
    margin: 0;
}

.account-nav a {
    display: block;
    padding: 0.8rem 0;
    color: var(--secondary-text-color);
    font-weight: bold;
    border-bottom: 1px solid var(--border-color);
    transition: color 0.2s;
}

.account-nav a:hover {
    color: var(--accent-color);
}

.account-nav a.active {
    color: var(--accent-color);
}

/* --- Contenido Principal --- */
.account-content p {
    line-height: 1.8;
    color: var(--secondary-text-color);
}

.account-content p strong {
    color: var(--primary-text-color);
}

.account-content .logout-link,
.account-footer .accent-link {
    color: var(--accent-color);
    text-decoration: underline;
    font-weight: bold;
}

.account-footer {
    margin-top: 4rem;
    padding-top: 2rem;
    border-top: 1px solid var(--border-color);
}

.account-footer h4 {
    margin: 0 0 0.5rem 0;
    text-transform: uppercase;
}

/* --- Estilos para la Tabla de Historial de Pedidos --- */
.orders-table {
    width: 100%;
    border-collapse: collapse;
    text-align: left;
}

.orders-table thead {
    border-bottom: 2px solid var(--border-color);
}

.orders-table th {
    padding: 1rem;
    text-transform: uppercase;
    font-size: 0.8rem;
    color: var(--secondary-text-color);
}

.orders-table td {
    padding: 1.5rem 1rem;
    border-bottom: 1px solid var(--border-color);
    color: var(--secondary-text-color);
    font-weight: bold;
}

.orders-table td:first-child {
    color: var(--primary-text-color);
}

.orders-table tbody tr:last-child td {
    border-bottom: none;
}

.orders-action-btn {
    background-color: var(--border-color);
    color: var(--primary-text-color);
    padding: 0.6rem 1.2rem;
    border-radius: 4px;
    font-weight: bold;
    transition: all 0.2s;
}

.orders-action-btn:hover {
    background-color: var(--accent-color);
    color: #000;
}

.no-orders-msg {
    text-align: center;
    padding: 3rem;
}

/* --- Estilos para la Tabla de Descargas en Mi Cuenta --- */
.account-content h2 i {
    margin-right: 0.75rem;
}

.downloads-table-account {
    width: 100%;
    border-collapse: collapse;
    text-align: left;
}

.downloads-table-account thead {
    border-bottom: 2px solid var(--border-color);
}

.downloads-table-account th {
    padding: 1rem;
    text-transform: uppercase;
    font-size: 0.8rem;
    color: var(--secondary-text-color);
}

.downloads-table-account td {
    padding: 1.5rem 1rem;
    border-bottom: 1px solid var(--border-color);
    color: var(--secondary-text-color);
    font-weight: bold;
}

.downloads-table-account tbody tr:last-child td {
    border-bottom: none;
}

.download-btn {
    background-color: var(--border-color);
    color: var(--primary-text-color);
    padding: 0.6rem 1.2rem;
    border-radius: 4px;
    font-weight: bold;
    transition: all 0.2s;
    display: inline-block;
}

.download-btn:hover {
    background-color: var(--accent-color);
    color: #000;
}

/* --- Estilos para la página de Ver Pedido --- */
.view-order-header {
    display: flex;
    align-items: center;
    gap: 1rem;
    margin-bottom: 2rem;
}

.view-order-header i {
    font-size: 2rem;
    color: var(--secondary-text-color);
}

.view-order-header h2 {
    margin: 0;
}

/* Reutilizamos el estilo de la barra de resumen de order_success */
.order-summary-bar {
    display: flex;
    /* La clave: pone los items en una fila */
    justify-content: space-between;
    /* Distribuye el espacio entre ellos */
    padding: 1.5rem;
    margin-bottom: 2rem;
    border-bottom: 1px solid var(--border-color);
    background-color: var(--card-bg-color);
    /* Fondo consistente */
    border: 1px solid var(--border-color);
    border-radius: 5px;
}

.summary-item {
    display: flex;
    flex-direction: column;
    /* Apila la etiqueta y el valor */
    text-align: left;
    /* Alinea el texto a la izquierda */
}

.summary-item span {
    font-size: 0.9rem;
    color: var(--secondary-text-color);
}

.summary-item strong {
    font-size: 1rem;
    font-weight: bold;
}

.status-completed {
    color: var(--accent-color);
}

.status-cancelled {
    color: #ff5555;
}

.order-details-box,
.billing-address-details {
    margin-top: 2rem;
    padding: 2rem;
    background-color: var(--card-bg-color);
    border: 1px solid var(--border-color);
    border-radius: 5px;
}

.order-details-box h3,
.billing-address-details h3 {
    margin-top: 0;
}

.back-to-list-btn {
    display: inline-block;
    margin-top: 2rem;
    background-color: var(--border-color);
    color: var(--primary-text-color);
    padding: 0.8rem 1.5rem;
    border-radius: 4px;
    font-weight: bold;
    transition: all 0.2s;
}

.back-to-list-btn:hover {
    background-color: var(--accent-color);
    color: #000;
}

.back-to-list-btn i {
    margin-right: 0.5rem;
}

/* ARCHIVO: static/css/style.css */

/* AÑADE ESTA NUEVA REGLA */

.back-link-container {
    display: flex;
    justify-content: flex-end;
    /* La clave: empuja el contenido al final (derecha) */
    margin-top: 0.2rem;
}

/* Modificamos ligeramente el botón para que no ocupe todo el ancho */
.back-to-list-btn {
    display: inline-block;
    /* Le permite tener un ancho definido por su contenido */
    width: auto;
    /* Ancho automático */
    /* ... (el resto de tus estilos para el botón se quedan igual) ... */
}

/* --- Paginación --- */
.pagination-nav {
    display: flex;
    justify-content: center;
    margin-top: 3rem;
    /* Espacio sobre la paginación */
    padding-top: 2rem;
    /* Espacio y línea superior */
    border-top: 1px solid var(--border-color);
}

.pagination-nav ul {
    list-style: none;
    padding: 0;
    margin: 0;
    display: flex;
    align-items: center;
    gap: 0.75rem;
    /* Espacio entre los botones */
}

/* === ESTA ES LA REGLA CLAVE QUE DEBES REEMPLAZAR === */
.pagination-nav a,
.pagination-nav span {
    /* 1. Activamos el modo Flexbox en el propio botón */
    display: flex;

    /* 2. Centramos el contenido (el texto) horizontalmente */
    justify-content: center;

    /* 3. Centramos el contenido (el texto) verticalmente */
    align-items: center;

    /* --- El resto de tus estilos se mentienen --- */
    padding: 0.5rem 1rem;
    min-width: 40px;
    /* Ancho mínimo para los números */
    box-sizing: border-box;
    text-decoration: none;
    border: 1px solid var(--border-color);
    border-radius: 4px;
    color: var(--primary-text-color);
    font-weight: bold;
    transition: background-color 0.2s, color 0.2s;
}

.pagination-nav a:hover {
    background-color: var(--accent-color);
    border-color: var(--accent-color);
    color: #000;
}

.pagination-nav span.active {
    background-color: var(--accent-color);
    border-color: var(--accent-color);
    color: #000;
}

/* ======================================================= */
/* === AJUSTE PARA CENTRADO PERFECTO DE LA NAVEGACIÓN === */
/* ======================================================= */



/* ======================================================= */
/* === ESTILOS PARA EL NUEVO BANNER CARRUSEL DE LA HOME === */
/* ======================================================= */

.hero-carousel-container {
    position: relative;
    width: 100%;
    /* CAMBIO: Reducimos la altura del 85% al 65% de la pantalla */
    height: 65vh;
    overflow: hidden;
    background-color: #000;
}

.hero-slides {
    display: flex;
    width: 100%;
    height: 100%;
    transition: transform 0.7s ease-in-out;
}

.hero-slide {
    flex: 0 0 100%;
    width: 100%;
    height: 100%;
    background-size: cover;
    background-position: center;
    display: flex;
    justify-content: center;
    align-items: center;
    text-align: center;
    color: white;
    position: relative;
}

.hero-slide::before {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background: rgba(0, 0, 0, 0.5);
    /* Opacidad ajustada */

    /* LA OTRA CLAVE: La capa está en el nivel inferior (detrás del texto) */
    z-index: 1;
}

.slide-content {
    /* ESTA LÍNEA ES CRUCIAL: Le da su propia capa */
    position: relative;

    /* LA OTRA CLAVE: Se posiciona por encima de la capa oscura (::before) */
    z-index: 2;

    padding: 20px;
    display: flex;
    flex-direction: column;
    align-items: center;
}

.slide-content h1 {
    font-size: 4.5rem;
    font-weight: 700;
    margin: 0 0 1rem 0;
    text-transform: uppercase;
    letter-spacing: 2px;
}

.slide-content p {
    font-size: 1.2rem;
    margin-bottom: 2rem;
    /* CAMBIO: Limitamos el ancho del párrafo para que no se extienda demasiado */
    max-width: 600px;
}

.shop-now-btn {
    background-color: white;
    color: black;
    padding: 12px 35px;
    border-radius: 30px;
    text-decoration: none;
    font-weight: bold;
    transition: transform 0.2s ease, background-color 0.2s ease;
}

.shop-now-btn:hover {
    transform: scale(1.05);
}

/* El resto de los estilos para las flechas y los puntos se mentienen igual */
.hero-arrow {
    position: absolute;
    top: 50%;
    transform: translateY(-50%);
    background-color: rgba(0, 0, 0, 0.5);
    border: none;
    color: white;
    font-size: 2rem;
    cursor: pointer;
    z-index: 10;
    padding: 10px;
    border-radius: 50%;
    width: 50px;
    height: 50px;
    display: flex;
    align-items: center;
    justify-content: center;
}

.hero-arrow.prev {
    left: 20px;
}

.hero-arrow.next {
    right: 20px;
}

.hero-dots {
    position: absolute;
    bottom: 20px;
    left: 50%;
    transform: translateX(-50%);
    display: flex;
    gap: 10px;
    z-index: 10;
}

.hero-dot {
    width: 12px;
    height: 12px;
    border-radius: 50%;
    background-color: rgba(255, 255, 255, 0.5);
    cursor: pointer;
    transition: background-color 0.3s;
}

.hero-dot.active {
    background-color: white;
}

/* ========================================================== */
/* === ESTILOS SIMPLIFICADOS PARA EL BOTÓN DE PAUSA/PLAY === */
/* ========================================================== */

.hero-pause-play {
    position: absolute;
    bottom: 20px;
    right: 20px;
    z-index: 10;
    background-color: transparent;
    border: none;
    color: white;
    cursor: pointer;
    width: 50px;
    height: 50px;
    border-radius: 50%;
}

.hero-pause-play:hover {
    filter: brightness(1.2);
}

.hero-pause-play .progress-ring {
    position: absolute;
    top: 0;
    left: 0;
    transform: rotate(-90deg);
}

.progress-ring__track {
    stroke: rgba(255, 255, 255, 0.3);
}

.progress-ring__indicator {
    stroke: white;
    /* La transición es para que el reinicio y la pausa se vean suaves */
    transition: stroke-dashoffset 0.2s linear;
}

.hero-pause-play i {
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    font-size: 1.2rem;
}

/* ==================================================================== */
/* === ESTILOS CORREGIDOS PARA CATEGORÍAS (TEXTO SUPERPUESTO FINAL) === */
/* ==================================================================== */

.featured-categories-grid {
    display: grid;
    grid-template-columns: 1fr 1fr;
    margin-bottom: 2rem;
    gap: 1rem;
    padding: 1rem;
}


/* 1. La tarjeta principal es el 'contexto de posicionamiento' */
.featured-category-card {
    position: relative;
    display: block;
    overflow: hidden;
    aspect-ratio: 10 / 9;
    /* mentenemos la proporción panorámica */
    color: white;
    /*border-radius: 8px; /* Opcional: añade esquinas redondeadas */
}

.card-background-image {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background-size: cover;
    background-position: center;
    transition: transform 0.4s ease-out;
}

.featured-category-card:hover .card-background-image {
    transform: scale(1.05);
}

/* 2. El contenido se posiciona en la parte inferior con la sombra */
.category-card-content {
    position: absolute;
    bottom: 0;
    left: 0;
    width: 100%;
    padding: 2.5rem;
    z-index: 2;
    /* Importante: por encima del enlace fantasma */
    background: linear-gradient(to top, rgba(0, 0, 0, 0.8) 0%, rgba(0, 0, 0, 0) 100%);
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    justify-content: flex-end;
}

.category-card-subtitle {
    display: block;
    margin-bottom: 0.5rem;
    font-size: 1rem;
}

.category-card-title {
    font-size: 2.2rem;
    font-weight: 700;
    margin: 0;
    line-height: 1.2;
}

.category-shop-btn {
    display: inline-block;
    margin-top: 1.5rem;
    background-color: white;
    color: black;
    padding: 10px 30px;
    border-radius: 50px;
    font-weight: bold;
    font-size: 0.9rem;
    text-transform: uppercase;
    letter-spacing: 1px;
    text-decoration: none;
    transition: transform 0.2s ease-out;
    position: relative;
    /* Necesario para que esté por encima del enlace fantasma */
    z-index: 3;
    /* Z-index aún más alto para asegurar que sea clicable */
}

.category-shop-btn:hover {
    transform: scale(1.1);
}

/* 3. El enlace "fantasma" se estira para cubrir toda la tarjeta */
.card-main-link {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    z-index: 1;
    /* Está por debajo del contenido */
    outline: none;
    font-size: 0;
    color: transparent;
}



/* ======================================================= */
/* === ESTILOS PARA LOS BOTONES DE CATEGORÍAS DESTACADAS === */
/* ======================================================= */

/* Ajustamos el contenedor del texto para que posicione bien el botón */
.category-card-content {
    /* ... (tus estilos existentes se mentienen) ... */

    /* AÑADIMOS ESTO para usar Flexbox */
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    /* Alinea todo a la izquierda */
    justify-content: flex-end;
    /* Empuja todo hacia abajo */
}

/* Estilos para el nuevo botón "Shop" */
.category-shop-btn {
    display: inline-block;
    margin-top: 1.5rem;

    background-color: white;
    color: black;

    padding: 10px 30px;
    border-radius: 50px;

    font-weight: bold;
    font-size: 0.9rem;
    text-transform: uppercase;
    letter-spacing: 1px;

    text-decoration: none;
    /* Aseguramos que no tenga subrayado de enlace */

    transition: transform 0.2s ease-out;
}

/* === AÑADE ESTA NUEVA REGLA PARA EL HOVER === */
/* Ahora el efecto de agrandar se aplica solo al pasar el cursor sobre el botón */
.category-shop-btn:hover {
    transform: scale(1.1);
    /* Lo hacemos un poco más grande para que se note */
}

/* El hover del botón se hereda del hover de la tarjeta, pero podemos añadir un extra */
.featured-category-card:hover .category-shop-btn {
    transform: scale(1.05);
}

/* ==================================================================== */
/* === ESTILOS FINALES Y CORRECTOS PARA LA PESTAÑA DE FEEDBACK === */
/* ==================================================================== */

#feedback-tab {
    position: fixed;
    top: 60%;
    right: 33px;
    transform: translateY(-50%) rotate(90deg);
    transform-origin: bottom right;
    background-color: var(--card-bg-color);
    color: var(--primary-text-color);
    border: 0px solid var(--border-color);
    border-bottom: none;
    padding: 0.8rem 1.5rem;
    font-weight: bold;
    letter-spacing: 1px;
    cursor: pointer;
    z-index: 1001;
    /* TRANSICIÓN para el desvanecimiento */
    transition: opacity 0.3s ease-out;
}


#feedback-tab:hover {
    background-color: var(--accent-color);
    color: #000;
}

#feedback-tab:hover {
    background-color: var(--accent-color);
    color: #000;
}



/* --- El Overlay y el Sidebar de Feedback (Sin cambios) --- */
#feedback-overlay {
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background-color: rgba(0, 0, 0, 0.6);
    z-index: 999;
    transition: opacity 0.3s ease-in-out;
}

#feedback-sidebar {
    position: fixed;
    top: 0;
    right: 0;
    width: 420px;
    max-width: 90%;
    height: 100%;
    background-color: var(--main-bg-color);
    z-index: 1000;
    transform: translateX(100%);
    transition: transform 0.4s cubic-bezier(0.25, 0.46, 0.45, 0.94);
    display: flex;
    flex-direction: column;
}

#feedback-overlay.hidden {
    opacity: 0;
    pointer-events: none;
}

#feedback-sidebar.open {
    transform: translateX(0);
}


/* --- Contenido del Formulario de Feedback --- */
.feedback-header {
    display: flex;
    align-items: center;
    /* Centra verticalmente el logo, título y botón */
    gap: 1rem;
    /* Espacio entre los elementos */
    padding: 1rem 1.5rem;
    border-bottom: 1px solid var(--border-color);
}

/* Nuevo estilo para el logo */
.feedback-logo {
    height: 50px;
    /* Tamaño del logo */
    width: auto;
}

.feedback-header h3 {
    margin: 0;
    flex-grow: 1;
    /* Empuja el botón de cierre a la derecha */
}

#close-feedback-btn {
    background: none;
    border: none;
    font-size: 2rem;
    color: var(--primary-text-color);
    cursor: pointer;
}

.feedback-content {
    overflow-y: auto;
    flex-grow: 1;
    /* Ocupa todo el espacio vertical disponible */

    /* AÑADIMOS ESTAS LÍNEAS */
    display: flex;
    flex-direction: column;
}

#feedback-form {
    padding: 1.5rem;
    /* El padding que antes estaba en el padre */
}

.feedback-content p {
    margin-top: 0;
}

.form-group-feedback {
    margin-bottom: 2rem;
}

.form-group-feedback label {
    display: block;
    margin-bottom: 0.75rem;
    font-weight: bold;
}

.required {
    color: #ff5555;
}

.rating-scale {
    text-align: center;
}

.rating-options {
    display: flex;
    justify-content: space-between;
    margin: 0.5rem 0;
}

.rating-option {
    display: flex;
    flex-direction: column;
    align-items: center;
}

.rating-option input[type="radio"] {
    opacity: 0;
    position: absolute;
}

.rating-option label {
    width: 28px;
    /* Un poco más grande para que quepa el número */
    height: 28px;
    border: 2px solid var(--primary-text-color);
    border-radius: 50%;
    cursor: pointer;
    margin-bottom: 0.5rem;
    transition: all 0.2s;
    /* Para centrar el número dentro del círculo */
    display: flex;
    align-items: center;
    justify-content: center;
}

.rating-option input[type="radio"]:checked+label {
    background-color: var(--primary-text-color);
}

/* 1. HOVER: El borde se pone verde al pasar el cursor */
.rating-option:hover label {
    border-color: var(--accent-color);
}

/* 2. CHECKED: El círculo se rellena de verde y el texto se pone negro */
.rating-option input[type="radio"]:checked+label {
    background-color: var(--accent-color);
    border-color: var(--accent-color);
    color: #000;
    /* 3. NÚMERO VISIBLE: El texto (número) se vuelve negro */
}

.rating-label {
    font-size: 0.8rem;
    color: var(--secondary-text-color);
}

#feedback-text {
    width: 100%;
    background-color: #2a2a2a;
    border: 1px solid var(--border-color);
    color: var(--primary-text-color);
    padding: 0.8rem;
    border-radius: 4px;
    font-size: 1rem;
    resize: vertical;
}

/* ======================================================= */
/* === ESTILOS PARA EL MENSAJE DE ÉXITO DEL FEEDBACK === */
/* ======================================================= */

/* Clase genérica para ocultar elementos */
.hidden {
    display: none !important;
}

#feedback-success-message {
    display: flex;
    flex-direction: column;
    align-items: center;
    text-align: center;

    /* REEMPLAZA 'height: 100%' POR ESTA LÍNEA */
    flex-grow: 1;
    /* Le dice que ocupe todo el espacio que dejó libre el formulario */
    padding: 3.5rem;
}

#feedback-success-message .feedback-logo {
    height: 50px;
    /* Tamaño del logo en el mensaje */
    margin-bottom: 1.5rem;
}

#feedback-success-message h2 {
    font-size: 1.8rem;
    margin: 0 0 1rem 0;
}

#feedback-success-message p {
    color: var(--secondary-text-color);
    line-height: 1.6;
    max-width: 300px;
    /* Ancho del párrafo */
}

#feedback-success-message p strong {
    color: var(--primary-text-color);
}

.feedback-submit-btn {
    width: 100%;
    padding: 1rem;
    background-color: var(--accent-color);
    color: #000;
    border: none;
    border-radius: 4px;
    font-size: 1.1rem;
    font-weight: bold;
    cursor: pointer;
    transition: transform 0.2s, opacity 0.2s;
}

.feedback-submit-btn:hover {
    transform: scale(1.02);
    opacity: 0.9;
}

/* ======================================================= */
/* === EFECTOS ADICIONALES PARA LA TEMÁTICA GÓTICA === */
/* ======================================================= */

/* Sutil brillo rojo para los textos con el color de acento */
.nav-links a.active,
.icon-links a:hover,
.footer-section h4,
.product-card-dark .price,
.pagination-nav span.active,
.pagination-nav a:hover,
.feedback-submit-btn,
.checkout-btn,
#feedback-tab:hover {
    /* Sombra de texto que simula un resplandor rojo */
    text-shadow: 0 0 8px rgba(255, 0, 0, 0.5);
}

/* Aseguramos que los botones principales usen el color correcto */
.feedback-submit-btn,
.checkout-btn,
.purchase-button,
.place-order-btn,
.coupon-section button {
    background-color: var(--accent-color);
    /* Fondo rojo oscuro */
    color: var(--primary-text-color);
    /* Texto blanco/grisáceo */
    border: 1px solid #ff0000;
    /* Borde rojo brillante */
    text-shadow: 0 0 8px rgba(255, 0, 0, 0.7);
}

/* Efecto hover para los botones principales */
.feedback-submit-btn:hover,
.checkout-btn:hover,
.purchase-button:hover,
.place-order-btn:hover,
.coupon-section button:hover {
    background-color: #ff0000;
    /* Rojo brillante al pasar el cursor */
    border-color: #ff4d4d;
    transform: scale(1.03);
    opacity: 1;
}

/* Ajuste para el logo del feedback para que sea visible */
#feedback-success-message .feedback-logo,
.feedback-header .feedback-logo {
    /* Si el logo es oscuro, este filtro lo hará blanco para que contraste */
    filter: brightness(0) invert(1);
}

/* ======================================================= */
/* === ESTILOS PARA LA NUEVA TARJETA DESTACADA GRANDE === */
/* ======================================================= */

.large-featured-card {
    display: flex;
    align-items: center;
    justify-content: center;
    text-align: center;
    width: 202%;

    /* 1. LA CLAVE: Usamos 'min-height' para darle una altura similar a la del banner */
    min-height: 60vh;
    /* 60% de la altura de la ventana (puedes ajustar este valor) */

    background-color: var(--card-bg-color);
    color: var(--primary-text-color);
    text-decoration: none;
    padding: 7rem;
    transition: background-color 0.3s ease;
}

.large-featured-card:hover {
    background-color: #2a2a2a;
    /* Un gris un poco más claro al pasar el cursor */
}

.large-card-content {
    max-width: 600px;
    /* Limita el ancho del texto para que sea legible */
}

.large-card-title {
    font-family: var(--font-family-headings);
    /* 2. Aumentamos el tamaño del título para que llene mejor el espacio */
    font-size: 4rem;
    margin: 0 0 1rem 0;
}


.large-card-subtitle {
    font-size: 1.1rem;
    color: var(--secondary-text-color);
    margin-bottom: 2rem;
    display: block;
}

.large-card-btn {
    display: inline-block;
    background-color: var(--accent-color);
    /* Usa tu color de acento (rojo) */
    color: var(--primary-text-color);
    /* O #000 si el contraste es mejor */

    padding: 12px 35px;
    border-radius: 50px;

    font-weight: bold;
    font-size: 0.9rem;
    text-transform: uppercase;
    letter-spacing: 1px;

    transition: transform 0.2s ease-out;
}

.large-featured-card:hover .large-card-btn {
    transform: scale(1.05);
}

.header-logo-link {
    text-decoration: none;
}

.header-logo-text {
    /* 1. Aplicamos la nueva fuente */
    font-family: 'Maytorm', sans-serif;

    /* 2. Le damos el color rojo oscuro del logo */
    color: #8B0000;
    /* DarkRed */

    /* 3. Ajustamos el tamaño y la apariencia */
    font-size: 1.7rem;
    /* Tamaño de la fuente */
    text-transform: capitalize;
    /* Asegura que la 'V' y 'C' sean mayúsculas */
    letter-spacing: 1px;

    /* 4. Sutil sombra para darle profundidad, como en la imagen */
    text-shadow: 1px 1px 3px rgba(0, 0, 0, 0.5);

    /* 5. Efecto de brillo al pasar el cursor */
    transition: color 0.3s ease, text-shadow 0.3s ease;
}

.header-logo-text:hover {
    color: #ff0000;
    /* Rojo más brillante al pasar el cursor */
    text-shadow: 0 0 8px rgba(255, 0, 0, 0.7);
}

@font-face {
    font-family: 'Maytorm';
    /* El nombre que le damos para usarla en el CSS */
    src: url('../fonts/Maytorm-Regular.ttf') format('truetype');
    /* Ruta al archivo de la fuente */
}

/* ======================================================= */
/* === ESTILOS CORREGIDOS PARA EL POPUP PROMOCIONAL === */
/* ======================================================= */

/* --- El Overlay y el Contenedor del Popup --- */
#promo-popup-overlay,
#promo-popup {
    position: fixed;
    z-index: 1050;
    opacity: 0;
    /* Por defecto están invisibles */
    visibility: hidden;
    /* Y completamente ocultos */
    transition: opacity 0.3s ease-in-out, visibility 0.3s ease-in-out;
}

#promo-popup-overlay {
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background-color: rgba(0, 0, 0, 0.85);
}

#promo-popup {
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    /* Solo para centrar, ya no animamos la escala */
    background-color: var(--main-bg-color);
    border: 2px solid var(--accent-color);
    max-width: 1200px;
    width: 90%;
    z-index: 1051;
}

/* --- Clases para MOSTRAR el popup --- */
#promo-popup-overlay.visible,
#promo-popup.visible {
    opacity: 1;
    visibility: visible;
}

/* --- Contenido del Popup (sin cambios) --- */
#promo-popup img {
    display: block;
    width: 100%;
    height: auto;
}

.close-popup-btn {
    position: absolute;
    top: -15px;
    right: -15px;
    width: 40px;
    height: 40px;
    border-radius: 50%;
    background-color: var(--accent-color);
    border: 2px solid white;
    color: white;
    font-size: 2rem;
    line-height: 36px;
    text-align: center;
    cursor: pointer;
    z-index: 1052;
    transition: transform 0.2s ease;
}

.close-popup-btn:hover {
    transform: scale(1.1) rotate(90deg);
}

/* ======================================================= */
/* === ESTILOS PARA EL FONDO DECORATIVO CON EL LOGO === */
/* ======================================================= */

body::before {
    /* 1. Contenido y Posicionamiento */
    content: '';
    /* Obligatorio para que el pseudo-elemento se muestre */
    position: fixed;
    /* Lo fijamos a la ventana para que no se mueva con el scroll */
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    z-index: -1;
    /* ¡La clave! Lo pone detrás de todo el contenido del body */

    /* 2. La Imagen de Fondo */
    background-image: url('../images/logo-voidcraft.png');
    background-repeat: no-repeat;
    /* Evita que la imagen se repita */
    background-position: center center;
    /* Centra la imagen perfectamente */

    /* 3. Tamaño y Opacidad */
    background-size: 50%;
    /* La imagen ocupará el 50% del ancho de la pantalla (ajusta a tu gusto) */
    opacity: 0.10;
    /* Opacidad muy baja (5%). Puedes probar valores como 0.03 o 0.1 */
}

/* ==================================================================== */
/* === ESTILOS RESPONSIVOS FINALES (VERSIÓN DEFINITIVA Y COMPLETA) === */
/* ==================================================================== */

/* --- 1. ESTILOS SOLO PARA ESCRITORIO (pantallas de 901px o más) --- */
@media (min-width: 901px) {
    .main-nav {
        position: relative;
    }
    .nav-center {
        position: absolute;
        left: 50%;
        transform: translateX(-50%);
    }
    .hamburger-menu {
        display: none; /* Oculta la hamburguesa en escritorio */
    }
    .nav-social-link {
        display: none; /* OCULTA EL ICONO DE DISCORD EN ESCRITORIO */
    }
}


/* --- 2. ESTILOS SOLO PARA MÓVIL (pantallas de 900px o menos) --- */
@media (max-width: 900px) {

    /* --- HEADER (MENÚ HAMBURGUESA Y STICKY) --- */
    body > header {
        position: fixed;
        top: 0;
        left: 0;
        background-color: var(--main-bg-color);
    }
    body {
        padding-top: 65px; /* Ajusta este valor a la altura de tu header móvil */
    }
    .hamburger-menu {
        display: block;
        background: none;
        border: none;
        color: var(--primary-text-color);
        font-size: 1.8rem;
        cursor: pointer;
        z-index: 1101;
    }
    .large-featured-card-container {
        display: none;
    }
    .main-nav {
        justify-content: space-between;
    }
    .nav-left {
        position: static;
        transform: none;
    }
    .nav-right {
        order: 3;
    }
    .nav-center {
        display: block;
        position: fixed;
        top: 0;
        left: 0;
        width: 300px;
        max-width: 80%;
        height: 100vh;
        background-color: #000000;
        border-right: 1px solid var(--border-color);
        z-index: 1100;
        transform: translateX(-100%);
        transition: transform 0.4s cubic-bezier(0.25, 0.46, 0.45, 0.94);
        padding: 5rem 2rem;
    }
    .nav-center.active {
        transform: translateX(0);
    }
    .hamburger-menu.active i::before {
        content: '\f00d';
    }
    
    
    /* --- ENLACES DEL MENÚ LATERAL --- */
    .nav-center .nav-links {
        flex-direction: column;
        align-items: flex-start;
        gap: 0;
        width: 100%;
    }
    .nav-center .nav-links li {
        width: 100%;
        border-top: 1px solid var(--border-color);
    }
    .main-nav .nav-links a {
        display: block;
        padding: 1rem 0;
        font-size: 1.2rem;
        font-family: var(--font-family-body);
        text-transform: uppercase;
        letter-spacing: 1px;
    }
    a.nav-exclusive {
        text-shadow: none;
    }

    /* === ESTILOS FINALES Y ESPECÍFICOS PARA ICONOS SOCIALES === */
    .nav-social-link {
        text-align: center;
        padding: 1rem 0 1rem;
    }
    .social-icons-container {
        display: inline-flex;
        align-items: center;
    }
    /* Regla específica para anular el display:block de los enlaces de texto */
    .main-nav .nav-links .nav-social-link a {
        display: inline-block;
        padding: 0;
        font-size: 1.5rem;
        transition: color 0.2s, transform 0.2s;
        margin: 0 1.5rem;
    }
    .main-nav .nav-links .nav-social-link a:hover {
        color: var(--accent-color);
        transform: scale(1.1);
    }


    /* --- CONTENIDO DE LA PÁGINA --- */
    .hero-carousel-container {
        height: 60vh;
    }
    .slide-content h1 {
        font-size: 2.5rem;
    }
    .category-product-grid {
        grid-template-columns: repeat(2, 1fr);
        gap: 1rem;
    }
    .featured-categories-grid {
        grid-template-columns: 1fr;
        padding: 1rem 0;
    }
    .category-card-title {
        word-break: break-word;
        overflow-wrap: break-word;
    }
    .large-featured-card {
        /* LA CLAVE: Usamos una proporción vertical (más alta que ancha) */
        aspect-ratio: 4 / 3; 
        
        /* Eliminamos min-height para que la proporción mande */
        min-height: auto; 

        /* Mantenemos el padding y el centrado */
        padding: 2rem;
        display: flex;
        align-items: center;
        justify-content: center;
    }

    /* Ajustamos el tamaño del título para que quepa bien */
    .large-card-title {
        font-size: 2.5rem;
    }
    
    .product-detail-page, .account-page-layout, .checkout-main-content {
        grid-template-columns: 1fr;
    }

    /* --- FOOTER --- */
    .footer-content {
        flex-direction: column;
        gap: 0rem;
    }
    .footer-logo-section {
        display: none;
    }

    /* --- POPUP PROMOCIONAL --- */
    #promo-popup {
        max-width: 500px;
    }
    .close-popup-btn {
        width: 35px;
        height: 35px;
        top: -12px;
        right: -12px;
        font-size: 1.5rem;
        line-height: 32px;
    }
}

/* ======================================================= */
/* === ESTILOS PARA EL EFECTO DE COPOS DE NIEVE === */
/* ======================================================= */

#snow-container {
    position: fixed; /* Lo fijamos a la ventana */
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    
    /* ¡La clave! Impide que podamos hacer clic en la capa de nieve */
    pointer-events: none; 
    
    /* Lo ponemos por encima del contenido pero debajo de los popups/sidebars */
    z-index: 990; 
    overflow: hidden; /* Oculta los copos que se salen de la pantalla */
}

.snowflake {
    position: absolute;
    top: -10px; /* Empiezan justo por encima de la pantalla */
    
    background-color: white;
    border-radius: 50%;
    
    /* Animación que definiremos en los keyframes */
    animation-name: snowfall;
    animation-timing-function: linear;
    animation-iteration-count: infinite;
}

/* --- La animación de la caída --- */
@keyframes snowfall {
    to {
        /* Mueve el copo hasta el final de la pantalla y un poco más allá */
        transform: translateY(105vh);
    }
}