:root {
    /* ===== Paleta de marca Jalapeno's (tomada del logo) ===== */
    --logo-red: #C41517;         /* rojo del chile */
    --logo-red-soft: #E3494C;    /* rojo mas suave para acentos */
    --logo-green: #00732C;       /* verde de la palabra */
    --logo-green-bright: #BACF55;/* verde del tallo */
    --logo-amber: #E2A531;       /* amarillo mostaza del fondo del logo */
    --logo-amber-soft: #F0C463;  /* ambar mas claro */
    --logo-cream: #FFF7EC;       /* crema (contorno) */

    /* Fondo food-truck (ambar) y tarjetas crema */
    --primary-bg: var(--logo-amber);
    --secondary-bg: var(--logo-cream);  /* tarjetas crema */
    --card-radius: 1.4vw;               /* esquinas mas redondeadas (estilo poster) */

    /* Acento principal = verde del logo */
    --accent-green: #00732C;

    /* Texto */
    --text-white: #ffffff;
    --text-dark: #3a2c22;        /* texto sobre tarjeta clara */
    --text-gray: #6b5f57;        /* texto secundario calido */

    --animation-duration: 1.6s;   /* transicion mas lenta y calmada */
    --transition-timing: ease-in-out;
    /* Curva ease-in-out: arranca lento, acelera y frena al llegar */
    --transition-ease: cubic-bezier(0.65, 0, 0.35, 1);
    
    /* Unidades responsivas basadas en viewport */
    --item-width: 15vw;            /* Más ancho para llenar mejor el espacio horizontal */
    --item-height: 36vh;           /* Más bajas para dar más espacio entre filas */
    --margin: 2vw;                 /* ~40px en 1920px = 2% */
    --border-radius: 0.8vw;        /* ~15px en 1920px */
    --padding: 1vw;                /* ~20px en 1920px */
    
    /* Dimensiones para la tarjeta destacada (90% de la zona del 30%) */
    --highlight-width: 27vw;       /* 90% de 30vw = 27vw */
    --highlight-height: 90vh;      /* 80vh + 5% = 84vh */
    
    /* Tamaños de texto responsivos (reducidos ~10%) */
    --font-title: 1.26vw;          /* ~24px en 1920px */
    --font-price: 1.62vw;          /* ~31px en 1920px */
    --font-description: 0.9vw;     /* ~17px en 1920px */
    --badge-font: 0.72vw;          /* ~14px en 1920px */
}

* {
    margin: 0;
    padding: 0;
    box-sizing: border-box;
}

body {
    font-family: 'Arial', sans-serif;
    /* Fondo calido tipo food-truck mexicano: ambar del logo + blobs organicos */
    background-color: var(--logo-amber);
    background-image:
        radial-gradient(closest-side at 80% 22%, rgba(190, 132, 26, 0.55), transparent 72%),
        radial-gradient(closest-side at 12% 78%, rgba(190, 132, 26, 0.45), transparent 72%),
        radial-gradient(closest-side at 55% 55%, rgba(244, 200, 110, 0.40), transparent 70%),
        radial-gradient(closest-side at 92% 88%, rgba(244, 200, 110, 0.30), transparent 70%);
    color: var(--text-dark);
    overflow: hidden;
    height: 100vh;
    margin: 0;
    padding: 0;
}

/* ===== Bolas verdes gigantes que se asoman arriba/abajo ===== */
/* Son circulos enormes: la mayor parte queda fuera de pantalla y solo se
   asoma un pedacito (una cupula) por arriba y por abajo. Se mueven lento de
   lado a lado, generando un efecto sutil tipo "saludo". */
body::before,
body::after {
    content: "";
    position: fixed;
    left: 50%;
    width: 194vw;
    height: 194vw;
    border-radius: 50%;
    background: var(--logo-green);
    z-index: 0;
    pointer-events: none;
    will-change: transform;
}
body::before {
    top: 0;
    /* arranca asomada un poco hacia la derecha */
    transform: translate(-46%, -95%);
    animation: swayTop 50s ease-in-out infinite;
}
body::after {
    bottom: 0;
    /* arranca hacia el lado contrario (izquierda) */
    transform: translate(-54%, 95%);
    animation: swayBottom 60s ease-in-out infinite;
}

/* Vaiven horizontal muy lento y sigiloso (velocidad ~40% de la anterior),
   con las dos bolas en lados opuestos y moviendose en sentidos contrarios */
@keyframes swayTop {
    0%, 100% { transform: translate(-46%, -95%); }  /* derecha */
    50%      { transform: translate(-54%, -95%); }  /* izquierda */
}
@keyframes swayBottom {
    0%, 100% { transform: translate(-54%, 95%); }   /* izquierda */
    50%      { transform: translate(-46%, 95%); }   /* derecha */
}

/* Quitamos el efecto "nieve" (starfield): ahora flotan los elementos verdes */
#stars, #stars2, #stars3 { display: none !important; }

/* ===== Hojas / estrellas decorativas verdes (SVG, seguras en Fire TV) ===== */
.deco {
    position: fixed;
    z-index: 0;
    pointer-events: none;
    background-repeat: no-repeat;
    background-size: contain;
    opacity: 0.9;
    will-change: transform;
}

/* Flotan suavemente en el aire, movimiento lento y sigiloso.
   Cada variante incluye su rotacion base para no perderla al animar. */
@keyframes floatLeafA {
    0%, 100% { transform: translateY(0) rotate(-18deg); }
    50%      { transform: translateY(-2.4vh) rotate(-11deg); }
}
@keyframes floatLeafB {
    0%, 100% { transform: translateY(0) rotate(22deg); }
    50%      { transform: translateY(-2vh) rotate(15deg); }
}
@keyframes floatLeafC {
    0%, 100% { transform: translateY(0) rotate(200deg); }
    50%      { transform: translateY(2.2vh) rotate(206deg); }
}
@keyframes floatStarA {
    0%, 100% { transform: translateY(0) rotate(0deg); }
    50%      { transform: translateY(-1.8vh) rotate(8deg); }
}
@keyframes floatStarB {
    0%, 100% { transform: translateY(0) rotate(0deg); }
    50%      { transform: translateY(2vh) rotate(-8deg); }
}
.deco-1 { animation: floatLeafA 9s ease-in-out infinite; }
.deco-2 { animation: floatStarA 11s ease-in-out infinite; }
.deco-3 { animation: floatLeafB 10s ease-in-out infinite 0.6s; }
.deco-4 { animation: floatStarB 12s ease-in-out infinite 0.3s; }
.deco-5 { animation: floatLeafC 8.5s ease-in-out infinite 0.9s; }
.deco-leaf {
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 100 100'%3E%3Cg fill='%2300732C'%3E%3Cpath d='M50 4 C61 30 61 56 50 82 C39 56 39 30 50 4 Z'/%3E%3Cpath d='M18 16 C34 39 37 62 31 86 C16 63 10 39 18 16 Z'/%3E%3Cpath d='M82 16 C66 39 63 62 69 86 C84 63 90 39 82 16 Z'/%3E%3C/g%3E%3C/svg%3E");
}
.deco-star {
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 100 100'%3E%3Cpath d='M50 6 L61 38 L96 38 L68 60 L79 94 L50 73 L21 94 L32 60 L4 38 L39 38 Z' fill='none' stroke='%2300732C' stroke-width='9' stroke-linejoin='round'/%3E%3C/svg%3E");
}

/* Logo de la marca, abajo a la izquierda con margen del borde */
.brand-logo {
    position: fixed;
    bottom: 2vh;
    left: 2vw;
    height: 100px;
    width: auto;
    z-index: 45;
    pointer-events: none;
    filter: drop-shadow(0 3px 6px rgba(0, 0, 0, 0.35));
}

.tv-menu-container {
    width: 100vw;
    height: 100vh;
    position: relative;
    background: transparent;
    overflow: hidden;
}

.menu-grid {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    pointer-events: none;
    z-index: 1;
}

.menu-items-container {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    z-index: 10;
}

.menu-item {
    position: absolute;
    width: var(--item-width);
    height: var(--item-height);
    background: var(--secondary-bg);
    border-radius: var(--card-radius);
    padding: 0;  /* la imagen va a sangre (full-bleed); el texto lleva su propio padding */
    box-shadow: 0 0.5vw 1.4vw rgba(120, 78, 12, 0.28);
    /* Optimizado: solo transform y opacity (GPU-accelerated) */
    transition: transform var(--animation-duration) var(--transition-ease),
                opacity var(--animation-duration) var(--transition-ease);
    display: flex;
    flex-direction: column;
    overflow: visible;
    border: none;  /* sin borde: solo card con sombra */
    transform-origin: center center;
    /* Hint al navegador para optimización GPU */
    will-change: transform, opacity;
}

.menu-item:hover {
    transform: scale(1.02);
}

.menu-item-image {
    display: block;
    width: 100%;
    height: 55%;
    /* Esquinas superiores redondeadas como el card, inferiores rectas */
    border-radius: var(--card-radius) var(--card-radius) 0 0;
    object-fit: cover;
    margin-bottom: 0;
    background: #efe0c7;  /* placeholder calido mientras carga/sin imagen */
}

/* Seccion de texto con su propio padding (la imagen va a sangre arriba) */
.menu-item-content {
    flex: 1;
    min-height: 0;
    display: flex;
    flex-direction: column;
    /* padding-top holgado: deja que el badge de precio se monte en el borde */
    padding: 2.6vh 1vw 1vw;
    overflow: hidden;
}

.menu-item-title {
    font-size: var(--font-title);
    font-weight: 800;
    color: var(--logo-green);
    margin-bottom: 0.5vh;
    line-height: 1.2;
}

/* Precio como badge montado sobre la linea donde termina la foto (55%) */
.menu-item-price {
    position: absolute;
    top: 55%;
    right: 0.9vw;
    transform: translateY(-50%);
    z-index: 15;
    font-size: var(--font-price);
    font-weight: 800;
    font-style: italic;
    color: var(--logo-red);
    background: var(--logo-cream);
    padding: 0.3vh 0.9vw;
    border-radius: 0.7vw;
    box-shadow: 0 0.2vw 0.7vw rgba(20, 15, 12, 0.3);
    display: inline-block;
    width: fit-content;
}

.menu-item-description {
    font-size: var(--font-description);
    color: var(--text-gray);
    line-height: 1.4;
    overflow: hidden;
    text-overflow: ellipsis;
    display: -webkit-box;
    -webkit-line-clamp: 3;   /* hasta 3 lineas; termina limpio con "..." */
    -webkit-box-orient: vertical;
}

/* Badge/Sticker Styles */
.menu-item-badge {
    position: absolute;
    top: -0.5vw;
    right: -0.5vw;
    background: linear-gradient(135deg, var(--logo-amber) 0%, var(--logo-amber-soft) 100%);
    color: var(--text-dark);
    padding: 0.3vw 0.6vw;
    border-radius: 1vw;
    font-size: var(--badge-font);
    font-weight: bold;
    text-transform: uppercase;
    letter-spacing: 0.05em;
    box-shadow: 0 0.2vw 0.6vw rgba(20, 15, 12, 0.25);
    z-index: 20;
    transform: rotate(-5deg);
    animation: badgePulse 2s ease-in-out infinite;
    border: 0.1vw solid rgba(255, 255, 255, 0.6);
}

.menu-item-badge.discount {
    background: linear-gradient(135deg, var(--logo-red) 0%, var(--logo-red-soft) 100%);
    color: #fff;
    box-shadow: 0 0.2vw 0.6vw rgba(20, 15, 12, 0.25);
}

.menu-item-badge.new {
    background: linear-gradient(135deg, var(--logo-green) 0%, var(--logo-green-bright) 100%);
    color: #fff;
    box-shadow: 0 0.2vw 0.6vw rgba(20, 15, 12, 0.25);
}

.menu-item-badge.promo {
    background: linear-gradient(135deg, var(--logo-red) 0%, var(--logo-red-soft) 100%);
    color: #fff;
    box-shadow: 0 0.2vw 0.6vw rgba(20, 15, 12, 0.25);
}

@keyframes badgePulse {
    0%, 100% { transform: rotate(-5deg) scale(1); }
    50% { transform: rotate(-5deg) scale(1.05); }
}

.menu-item.center-highlight {
    width: var(--highlight-width);
    height: var(--highlight-height);
    transform-origin: top center;  /* Crece/encoge desde la parte superior */
    z-index: 20;
    border: none;
    box-shadow: 0 1.2vw 3.5vw rgba(120, 40, 10, 0.45);
}

/* Margenes internos mas generosos y jerarquia mayor en la tarjeta destacada.
   Se aplican TAMBIEN durante la entrada (entering-highlight) para que crezcan
   junto con la caja y no salten de golpe al terminar la transicion. */
.menu-item.center-highlight .menu-item-content,
.menu-item.entering-highlight .menu-item-content {
    padding: 3.6vh 1.6vw 1.6vw;
}
.menu-item.center-highlight .menu-item-image,
.menu-item.entering-highlight .menu-item-image {
    height: 68%;
    border-radius: var(--card-radius) var(--card-radius) 0 0;
    margin-bottom: 0;
}
.menu-item.center-highlight .menu-item-title,
.menu-item.entering-highlight .menu-item-title {
    font-size: 1.8vw;
    margin-bottom: 1.2vh;
}
.menu-item.center-highlight .menu-item-price,
.menu-item.entering-highlight .menu-item-price {
    top: 68%;
    font-size: 2.34vw;
    padding: 0.4vh 1.1vw;
}
.menu-item.center-highlight .menu-item-description,
.menu-item.entering-highlight .menu-item-description {
    font-size: 1.125vw;
    -webkit-line-clamp: 6;   /* mas lineas: aprovecha el espacio disponible abajo */
    /* Reserva el espacio del QR (abajo-derecha) para que el texto no pase por detras */
    padding-right: 9vw;
}

/* Anima los margenes/tamaños internos al entrar y salir del destacado,
   con la misma duracion y curva que el crecimiento de la caja. */
.menu-item.entering-highlight .menu-item-content,
.menu-item.exiting-highlight .menu-item-content,
.menu-item.entering-highlight .menu-item-image,
.menu-item.exiting-highlight .menu-item-image,
.menu-item.entering-highlight .menu-item-title,
.menu-item.exiting-highlight .menu-item-title,
.menu-item.entering-highlight .menu-item-price,
.menu-item.exiting-highlight .menu-item-price,
.menu-item.entering-highlight .menu-item-description,
.menu-item.exiting-highlight .menu-item-description {
    transition: height var(--animation-duration) var(--transition-ease),
                font-size var(--animation-duration) var(--transition-ease),
                margin var(--animation-duration) var(--transition-ease),
                padding var(--animation-duration) var(--transition-ease),
                border-radius var(--animation-duration) var(--transition-ease);
}

/* Estados para las transiciones animadas - Optimizado para GPU */
.menu-item.entering-highlight {
    /* Animar dimensiones + padding para que los margenes internos crezcan suave */
    transition: transform var(--animation-duration) var(--transition-ease),
                width var(--animation-duration) var(--transition-ease),
                height var(--animation-duration) var(--transition-ease),
                padding var(--animation-duration) var(--transition-ease),
                opacity var(--animation-duration) var(--transition-ease);
    width: var(--highlight-width);
    height: var(--highlight-height);
    transform-origin: top center;  /* Crece hacia abajo */
    z-index: 20;  /* Debajo del que sale */
    border: none;
    box-shadow: 0 1.2vw 3.5vw rgba(120, 40, 10, 0.45);
}

.menu-item.exiting-highlight {
    /* Mismo timing para efecto de empuje sincronizado */
    transition: transform var(--animation-duration) var(--transition-ease),
                width var(--animation-duration) var(--transition-ease),
                height var(--animation-duration) var(--transition-ease),
                padding var(--animation-duration) var(--transition-ease),
                opacity 0.3s ease-out 1.3s; /* Se desvanece al final */

    /* Empieza con tamaño grande, se comprimirá hacia abajo */
    width: var(--highlight-width);
    height: var(--highlight-height);
    transform-origin: bottom center;  /* Compresión hacia abajo */
    z-index: 21; /* Encima del que entra para crear efecto de empuje */

    /* Transiciona hacia los valores normales */
    border: none;
    box-shadow: 0 0.5vw 1.4vw rgba(120, 78, 12, 0.28);
    opacity: 1; /* Mantiene visibilidad durante la compresión */
}

/* Estado final para el que sale - se desvanece gradualmente */
.menu-item.exiting-highlight.fade-out {
    opacity: 0;
}

.menu-item.entering {
    transform: translateX(-100vw);
    transition: none; /* Sin transición para la entrada inmediata */
}

.menu-item.exiting {
    transform: translateX(-100vw);
    transition: transform 1.2s ease-in, opacity 1.2s ease-in;
    opacity: 0;
}

/* Estado inicial para la salida - visible y en posición */
.menu-item.exiting-start {
    transform: translateX(0);
    opacity: 1;
    transition: transform 1.2s ease-in, opacity 1.2s ease-in;
}

@media (max-width: 1024px) {
    .menu-grid {
        padding: 20px;
        gap: 15px;
    }
    
    .menu-item {
        padding: 15px;
    }
    
    .menu-item-title {
        font-size: 1.1rem;
    }
    
    .menu-item-price {
        font-size: 1.3rem;
    }
    
    .menu-item-description {
        font-size: 0.8rem;
    }
}

@keyframes slideInFromLeft {
    from {
        transform: translateX(-100vw);
        opacity: 0;
    }
    to {
        transform: translateX(0);
        opacity: 1;
    }
}

@keyframes slideOutToLeft {
    from {
        transform: translateX(0);
        opacity: 1;
    }
    to {
        transform: translateX(-100vw);
        opacity: 0;
    }
}

/* ===== STARFIELD BACKGROUND EFFECT (Optimizado - 30 estrellas por capa) ===== */

#stars {
    width: 1px;
    height: 1px;
    background: transparent;
    position: fixed;
    top: 0;
    left: 0;
    z-index: 0;
    box-shadow: 1364px 562px rgba(255,255,255,0.4), 1999px 278px rgba(255,255,255,0.4), 261px 1347px rgba(255,255,255,0.4), 383px 156px rgba(255,255,255,0.4), 1074px 1169px rgba(255,255,255,0.4), 927px 1410px rgba(255,255,255,0.4), 610px 184px rgba(255,255,255,0.4), 1089px 1084px rgba(255,255,255,0.4), 895px 1874px rgba(255,255,255,0.4), 1600px 652px rgba(255,255,255,0.4), 225px 431px rgba(255,255,255,0.4), 1951px 1726px rgba(255,255,255,0.4), 1547px 885px rgba(255,255,255,0.4), 1385px 552px rgba(255,255,255,0.4), 476px 507px rgba(255,255,255,0.4), 1922px 1146px rgba(255,255,255,0.4), 309px 384px rgba(255,255,255,0.4), 214px 1840px rgba(255,255,255,0.4), 920px 626px rgba(255,255,255,0.4), 633px 279px rgba(255,255,255,0.4), 1628px 839px rgba(255,255,255,0.4), 947px 1700px rgba(255,255,255,0.4), 1367px 280px rgba(255,255,255,0.4), 13px 1076px rgba(255,255,255,0.4), 774px 468px rgba(255,255,255,0.4), 1697px 1907px rgba(255,255,255,0.4), 372px 1744px rgba(255,255,255,0.4), 1724px 1789px rgba(255,255,255,0.4), 746px 982px rgba(255,255,255,0.4), 1851px 476px rgba(255,255,255,0.4);
    animation: animStar 50s linear infinite;
}

#stars:after {
    content: " ";
    position: absolute;
    top: 2000px;
    width: 1px;
    height: 1px;
    background: transparent;
    box-shadow: 1364px 562px rgba(255,255,255,0.4), 1999px 278px rgba(255,255,255,0.4), 261px 1347px rgba(255,255,255,0.4), 383px 156px rgba(255,255,255,0.4), 1074px 1169px rgba(255,255,255,0.4), 927px 1410px rgba(255,255,255,0.4), 610px 184px rgba(255,255,255,0.4), 1089px 1084px rgba(255,255,255,0.4), 895px 1874px rgba(255,255,255,0.4), 1600px 652px rgba(255,255,255,0.4), 225px 431px rgba(255,255,255,0.4), 1951px 1726px rgba(255,255,255,0.4), 1547px 885px rgba(255,255,255,0.4), 1385px 552px rgba(255,255,255,0.4), 476px 507px rgba(255,255,255,0.4), 1922px 1146px rgba(255,255,255,0.4), 309px 384px rgba(255,255,255,0.4), 214px 1840px rgba(255,255,255,0.4), 920px 626px rgba(255,255,255,0.4), 633px 279px rgba(255,255,255,0.4), 1628px 839px rgba(255,255,255,0.4), 947px 1700px rgba(255,255,255,0.4), 1367px 280px rgba(255,255,255,0.4), 13px 1076px rgba(255,255,255,0.4), 774px 468px rgba(255,255,255,0.4), 1697px 1907px rgba(255,255,255,0.4), 372px 1744px rgba(255,255,255,0.4), 1724px 1789px rgba(255,255,255,0.4), 746px 982px rgba(255,255,255,0.4), 1851px 476px rgba(255,255,255,0.4);
}

#stars2 {
    width: 2px;
    height: 2px;
    background: transparent;
    position: fixed;
    top: 0;
    left: 0;
    z-index: 0;
    box-shadow: 985px 142px rgba(255,255,255,0.4), 171px 617px rgba(255,255,255,0.4), 414px 1781px rgba(255,255,255,0.4), 1848px 592px rgba(255,255,255,0.4), 1113px 1008px rgba(255,255,255,0.4), 17px 379px rgba(255,255,255,0.4), 1615px 1299px rgba(255,255,255,0.4), 1016px 316px rgba(255,255,255,0.4), 365px 748px rgba(255,255,255,0.4), 492px 745px rgba(255,255,255,0.4), 1032px 1423px rgba(255,255,255,0.4), 1704px 833px rgba(255,255,255,0.4), 1139px 183px rgba(255,255,255,0.4), 1535px 1798px rgba(255,255,255,0.4), 1699px 649px rgba(255,255,255,0.4), 1514px 537px rgba(255,255,255,0.4), 73px 1026px rgba(255,255,255,0.4), 338px 485px rgba(255,255,255,0.4), 263px 1518px rgba(255,255,255,0.4), 1927px 1272px rgba(255,255,255,0.4), 973px 1407px rgba(255,255,255,0.4), 332px 75px rgba(255,255,255,0.4), 920px 1578px rgba(255,255,255,0.4), 878px 1886px rgba(255,255,255,0.4), 1275px 1105px rgba(255,255,255,0.4), 927px 589px rgba(255,255,255,0.4), 572px 338px rgba(255,255,255,0.4), 1087px 1102px rgba(255,255,255,0.4), 256px 824px rgba(255,255,255,0.4), 607px 1586px rgba(255,255,255,0.4);
    animation: animStar 100s linear infinite;
}

#stars2:after {
    content: " ";
    position: absolute;
    top: 2000px;
    width: 2px;
    height: 2px;
    background: transparent;
    box-shadow: 985px 142px rgba(255,255,255,0.4), 171px 617px rgba(255,255,255,0.4), 414px 1781px rgba(255,255,255,0.4), 1848px 592px rgba(255,255,255,0.4), 1113px 1008px rgba(255,255,255,0.4), 17px 379px rgba(255,255,255,0.4), 1615px 1299px rgba(255,255,255,0.4), 1016px 316px rgba(255,255,255,0.4), 365px 748px rgba(255,255,255,0.4), 492px 745px rgba(255,255,255,0.4), 1032px 1423px rgba(255,255,255,0.4), 1704px 833px rgba(255,255,255,0.4), 1139px 183px rgba(255,255,255,0.4), 1535px 1798px rgba(255,255,255,0.4), 1699px 649px rgba(255,255,255,0.4), 1514px 537px rgba(255,255,255,0.4), 73px 1026px rgba(255,255,255,0.4), 338px 485px rgba(255,255,255,0.4), 263px 1518px rgba(255,255,255,0.4), 1927px 1272px rgba(255,255,255,0.4), 973px 1407px rgba(255,255,255,0.4), 332px 75px rgba(255,255,255,0.4), 920px 1578px rgba(255,255,255,0.4), 878px 1886px rgba(255,255,255,0.4), 1275px 1105px rgba(255,255,255,0.4), 927px 589px rgba(255,255,255,0.4), 572px 338px rgba(255,255,255,0.4), 1087px 1102px rgba(255,255,255,0.4), 256px 824px rgba(255,255,255,0.4), 607px 1586px rgba(255,255,255,0.4);
}

#stars3 {
    width: 3px;
    height: 3px;
    background: transparent;
    position: fixed;
    top: 0;
    left: 0;
    z-index: 0;
    box-shadow: 441px 1518px rgba(255,255,255,0.4), 1834px 685px rgba(255,255,255,0.4), 208px 92px rgba(255,255,255,0.4), 1543px 573px rgba(255,255,255,0.4), 930px 1603px rgba(255,255,255,0.4), 43px 109px rgba(255,255,255,0.4), 251px 1747px rgba(255,255,255,0.4), 1434px 756px rgba(255,255,255,0.4), 662px 866px rgba(255,255,255,0.4), 674px 851px rgba(255,255,255,0.4), 1932px 705px rgba(255,255,255,0.4), 1232px 233px rgba(255,255,255,0.4), 398px 1569px rgba(255,255,255,0.4), 486px 1807px rgba(255,255,255,0.4), 867px 1241px rgba(255,255,255,0.4), 656px 348px rgba(255,255,255,0.4), 1130px 887px rgba(255,255,255,0.4), 961px 1901px rgba(255,255,255,0.4), 18px 374px rgba(255,255,255,0.4), 1584px 249px rgba(255,255,255,0.4), 408px 519px rgba(255,255,255,0.4), 1423px 1693px rgba(255,255,255,0.4), 25px 356px rgba(255,255,255,0.4), 326px 1381px rgba(255,255,255,0.4), 238px 1671px rgba(255,255,255,0.4), 1197px 1053px rgba(255,255,255,0.4), 417px 32px rgba(255,255,255,0.4), 327px 133px rgba(255,255,255,0.4), 910px 1613px rgba(255,255,255,0.4), 842px 1615px rgba(255,255,255,0.4);
    animation: animStar 150s linear infinite;
}

#stars3:after {
    content: " ";
    position: absolute;
    top: 2000px;
    width: 3px;
    height: 3px;
    background: transparent;
    box-shadow: 441px 1518px rgba(255,255,255,0.4), 1834px 685px rgba(255,255,255,0.4), 208px 92px rgba(255,255,255,0.4), 1543px 573px rgba(255,255,255,0.4), 930px 1603px rgba(255,255,255,0.4), 43px 109px rgba(255,255,255,0.4), 251px 1747px rgba(255,255,255,0.4), 1434px 756px rgba(255,255,255,0.4), 662px 866px rgba(255,255,255,0.4), 674px 851px rgba(255,255,255,0.4), 1932px 705px rgba(255,255,255,0.4), 1232px 233px rgba(255,255,255,0.4), 398px 1569px rgba(255,255,255,0.4), 486px 1807px rgba(255,255,255,0.4), 867px 1241px rgba(255,255,255,0.4), 656px 348px rgba(255,255,255,0.4), 1130px 887px rgba(255,255,255,0.4), 961px 1901px rgba(255,255,255,0.4), 18px 374px rgba(255,255,255,0.4), 1584px 249px rgba(255,255,255,0.4), 408px 519px rgba(255,255,255,0.4), 1423px 1693px rgba(255,255,255,0.4), 25px 356px rgba(255,255,255,0.4), 326px 1381px rgba(255,255,255,0.4), 238px 1671px rgba(255,255,255,0.4), 1197px 1053px rgba(255,255,255,0.4), 417px 32px rgba(255,255,255,0.4), 327px 133px rgba(255,255,255,0.4), 910px 1613px rgba(255,255,255,0.4), 842px 1615px rgba(255,255,255,0.4);
}

@keyframes animStar {
    from {
        transform: translateY(0px);
    }
    to {
        transform: translateY(-2000px);
    }
}

/* ===== LOADING SCREEN (PRELOADER) ===== */

#loading-screen {
    position: fixed;
    top: 0;
    left: 0;
    width: 100vw;
    height: 100vh;
    background-color: var(--logo-green);
    background-image:
        radial-gradient(closest-side at 80% 22%, rgba(0, 90, 34, 0.55), transparent 72%),
        radial-gradient(closest-side at 15% 78%, rgba(0, 90, 34, 0.45), transparent 72%);
    display: flex;
    justify-content: center;
    align-items: center;
    z-index: 9999;
    opacity: 1;
    transition: opacity 0.6s ease-out;
}

#loading-screen.fade-out {
    opacity: 0;
    pointer-events: none;
}

.loading-content {
    text-align: center;
    color: #ffffff;
    max-width: 560px;
    padding: 40px;
}

/* Logo en la pantalla de carga */
.loading-content::before {
    content: "";
    display: block;
    width: 12vw;
    height: 12vw;
    margin: 0 auto 2vh;
    background: url("static/logo-oficial-jalapenos.png") center/contain no-repeat;
    border-radius: 1.6vw;
    box-shadow: 0 0.6vw 1.8vw rgba(120, 60, 10, 0.35);
    animation: pulse 2.4s ease-in-out infinite;
}

.loading-title {
    font-size: 3vw;
    font-weight: 800;
    margin-bottom: 15px;
    color: #ffffff;
    text-shadow: 0 2px 6px rgba(0, 60, 22, 0.45);
}

.loading-status {
    font-size: 1.5vw;
    color: rgba(255, 255, 255, 0.9);
    margin-bottom: 30px;
}

@keyframes pulse {
    0%, 100% { opacity: 1; transform: scale(1); }
    50% { opacity: 0.85; transform: scale(1.03); }
}

.loading-bar-container {
    width: 100%;
    height: 30px;
    background: rgba(255, 247, 236, 0.55);
    border-radius: 15px;
    overflow: hidden;
    margin-bottom: 20px;
    border: 3px solid rgba(255, 255, 255, 0.85);
}

.loading-bar {
    height: 100%;
    width: 0%;
    background: linear-gradient(90deg,
        var(--logo-green) 0%,
        var(--logo-green-bright) 55%,
        var(--logo-red) 100%);
    transition: width 0.3s ease-out;
}

.loading-text {
    display: flex;
    justify-content: space-between;
    font-size: 1.5vw;
    color: #ffffff;
    margin-top: 10px;
    font-weight: bold;
}

.loading-spinner {
    margin-top: 30px;
    width: 50px;
    height: 50px;
    border: 5px solid rgba(255, 255, 255, 0.3);
    border-top: 5px solid #ffffff;
    border-radius: 50%;
    animation: spin 1s linear infinite;
    margin-left: auto;
    margin-right: auto;
}

@keyframes spin {
    0% { transform: rotate(0deg); }
    100% { transform: rotate(360deg); }
}

/* ===== QR CODE ===== */

.qr-code-container {
    position: fixed;
    bottom: 7vh;
    right: 2.6vw;
    z-index: 50;
    background: #241a15;
    padding: 0.8vw;
    border-radius: 1vw;
    border: 4px solid var(--logo-green);
    box-shadow: 0 0.4vw 1.6vw rgba(80, 40, 10, 0.45);
}

.qr-code-label {
    display: block;
    text-align: center;
    font-size: 0.7vw;
    font-weight: bold;
    color: var(--logo-cream);
    /*margin-bottom: 0.5vw;*/
}

.qr-code-image {
    display: block;
    width: 6vw;
    height: 6vw;
    background: #ffffff;
    padding: 0.3vw;
    border-radius: 0.5vw;
}

/* ===== SETTINGS COG ICON ===== */

.settings-link {
    position: fixed;
    bottom: 6vh;
    right: 25vw;
    z-index: 50;
    width: 3vw;
    height: 3vw;
    display: flex;
    justify-content: center;
    align-items: center;
    background: rgba(0, 115, 44, 0.55);
    border-radius: 50%;
    border: 2px solid rgba(255, 247, 236, 0.5);
    transition: all 0.3s ease;
    opacity: 0.15;
    text-decoration: none;
    font-size: 1.8vw;
}

.settings-link:hover {
    opacity: 1;
    border-color: var(--logo-cream);
    box-shadow: 0 0 12px rgba(0, 115, 44, 0.5);
    transform: rotate(90deg);
}