:root {
    --bg-color: #050505;
    --primary-color: #00d4ff;
    --secondary-color: #ffaa00;
    --text-color: #ffffff;
    --glass-bg: rgba(255, 255, 255, 0.05);
    --glass-border: rgba(255, 255, 255, 0.1);
    --font-main: 'Outfit', sans-serif;
}

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

body {
    background-color: var(--bg-color);
    color: var(--text-color);
    font-family: var(--font-main);
    overflow-x: hidden;
}

/* Header */
/* Header New Layout */
#main-header {
    position: fixed;
    /* Fixed to stay on top while scrolling */
    top: 0;
    left: 0;
    width: 100%;
    z-index: 1000;
    background: transparent;
    transition: all 0.3s ease-in-out;
}

#main-header.scrolled .header-top {
    padding: 5px 5%;
    min-height: 60px;
    box-shadow: 0 5px 20px rgba(0, 0, 0, 0.1);
}

.header-top {
    background: #ffffff;
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 15px 5%;
    /* Increased padding */
    height: auto;
    /* Allow content to dictate height */
    min-height: 90px;
    position: relative;
    /* Needed for absolute centering of children */
    transition: all 0.3s ease-in-out;
}

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

.main-logo {
    height: auto;
    max-height: 75px;
    /* Slightly larger max size, now fitting due to auto header height */
    width: auto;
    display: block;
    object-fit: contain;
    /* Ensure no internal cropping */
    transition: all 0.3s ease-in-out;
}

#main-header.scrolled .main-logo {
    max-height: 50px;
}

.header-center-panel {
    /* Absolute centering to ignore side widths */
    position: absolute;
    left: 50%;
    transform: translateX(-50%);
    display: flex;
    justify-content: center;
    align-items: center;
    gap: 30px;
}

.flags {
    display: flex;
    gap: 10px;
}

.flag-icon {
    width: 30px;
    height: 30px;
    border-radius: 50%;
    object-fit: cover;
    cursor: pointer;
    border: 1px solid #ddd;
    transition: transform 0.2s;
}

.flag-icon.hidden-flag {
    display: none;
}

/* Default Hidden State for Mobile Trigger */
.mobile-menu-trigger {
    display: none;
    flex-direction: column;
    justify-content: space-between;
    width: 30px;
    height: 21px;
    background: transparent;
    border: none;
    cursor: pointer;
    z-index: 1005;
}

.mobile-menu-trigger span {
    display: block;
    width: 100%;
    height: 3px;
    background: #333;
    border-radius: 3px;
    transition: all 0.3s ease;
}

/* Mobile Menu Overlay Styles */
.mobile-menu-overlay {
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background: rgba(0, 0, 0, 0.95);
    z-index: 2000;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: flex-start;
    padding-top: 100px;
    opacity: 0;
    visibility: hidden;
    transition: all 0.3s ease-in-out;
}

.mobile-menu-overlay.active {
    opacity: 1;
    visibility: visible;
}

.mobile-menu-close {
    position: absolute;
    top: 25px;
    right: 25px;
    background: transparent;
    border: none;
    color: white;
    font-size: 2.5rem;
    cursor: pointer;
    line-height: 1;
}

.mobile-menu-content {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 30px;
    width: 100%;
    padding: 0 20px;
}

.mobile-search {
    display: flex;
    width: 100%;
    max-width: 300px;
    background: white;
    border-radius: 20px;
    padding: 2px 2px 2px 15px;
}

.mobile-search input {
    border: none;
    flex: 1;
    outline: none;
    font-size: 1rem;
    padding: 10px 0;
    color: #333;
}

.mobile-search button {
    background: var(--primary-color);
    color: white;
    border: none;
    border-radius: 15px;
    padding: 0 20px;
    font-weight: bold;
    cursor: pointer;
}

.mobile-flags {
    display: flex;
    gap: 20px;
}

.mobile-nav {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 20px;
}

.mobile-nav a {
    color: white;
    text-decoration: none;
    font-size: 1.2rem;
    font-weight: 600;
    text-transform: uppercase;
    transition: color 0.3s;
}

.mobile-nav a:hover {
    color: var(--primary-color);
}

.partner-link-mobile {
    display: flex;
    align-items: center;
    gap: 10px;
    color: var(--secondary-color) !important;
    /* Destaque */
    margin-top: 20px;
}

.search-bar {
    display: flex;
    align-items: center;
    background: #e0e0e0;
    border-radius: 20px;
    padding: 2px 2px 2px 15px;
}

.search-bar input {
    border: none;
    background: transparent;
    outline: none;
    font-size: 0.8rem;
    color: #333;
    width: 150px;
}

.search-bar button {
    background: #0056b3;
    /* Dark blue like mockup */
    color: white;
    border: none;
    border-radius: 15px;
    padding: 5px 15px;
    font-size: 0.8rem;
    cursor: pointer;
}

.partner-link {
    font-size: 0.75rem;
    color: #555;
    text-decoration: none;
    text-transform: uppercase;
    font-weight: 600;
    display: flex;
    align-items: center;
    gap: 8px;
}

/* Curved Nav Area */
.header-nav-curve {
    position: relative;
    width: 100%;
    height: 60px;
    /* Height of the curve hanging down */
    margin-top: -1px;
    /* Avoid gap */
}

.header-nav-curve svg {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    z-index: 1001;
    filter: drop-shadow(0 5px 5px rgba(0, 0, 0, 0.1));
}

.main-nav {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    z-index: 1002;
    display: flex;
    justify-content: center;
    align-items: center;
    /* Adjust to align with the thickest part of curve */
    gap: 15px;
    padding-bottom: 10px;
    /* Fine tune text position */
}

.main-nav a {
    color: #333;
    text-decoration: none;
    font-size: 0.9rem;
    font-weight: 600;
    text-transform: uppercase;
    transition: color 0.3s;
}

.main-nav a:hover {
    color: var(--primary-color);
}

.main-nav span {
    color: #ccc;
}

/* Hero Section */
#hero {
    position: relative;
    height: 100vh;
    width: 100%;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    overflow: visible;
    /* Modified to allow cards to hang out */
    padding-top: 150px;
    /* More padding because header is bigger now */
    margin-bottom: 340px;
    /* Space for the hanging cards */
}

.video-background {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    z-index: -1;
}

#bg-video {
    width: 100%;
    height: 100%;
    object-fit: cover;
    opacity: 1;
    /* Full visibility for real colors */
}

.video-overlay {
    display: none;
}

.hero-content {
    text-align: center;
    margin-bottom: 2rem;
    z-index: 2;
    padding: 0 20px;
    flex-basis: 100%;
    /* Force line break in flex container */
    width: 100%;
    width: 100%;
    margin-top: 80px;
    /* Added for animation control */
    opacity: 0;
    visibility: hidden;
}

.hero-content h1 {
    font-size: 2.1rem;
    font-weight: 300;
    line-height: 1.2;
    text-transform: uppercase;
    letter-spacing: 1px;
    text-shadow: 0 2px 4px rgba(0, 0, 0, 0.8), 0 0 20px rgba(0, 0, 0, 0.6);
    /* Removed background/box for cleaner look */
    background: transparent;
    padding: 0;
    border-radius: 0;
    display: inline-block;
}

/* Antigravity Container */
#idn-antigravity-container {
    display: flex;
    justify-content: center;
    align-items: center;
    gap: 30px;
    perspective: 1000px;
    width: 100%;
    max-width: 1200px;
    flex-wrap: wrap;
    z-index: 10;
    position: absolute;
    bottom: -290px;
    /* Pushes half of the cards out of the hero section */
}

.product-card {
    width: 280px;
    padding: 30px 20px;
    background: rgba(255, 255, 255, 0.08);
    /* Slightly more transparent for tech feel */
    backdrop-filter: blur(15px);
    -webkit-backdrop-filter: blur(15px);
    border: 1px solid rgba(0, 212, 255, 0.1);
    /* Subtle blue tint */
    border-radius: 24px;
    box-shadow: 0 15px 35px rgba(0, 0, 0, 0.5);
    text-align: center;
    position: relative;
    transform-style: preserve-3d;
    transition: border-color 0.3s ease, box-shadow 0.3s ease, background 0.3s;
    overflow: hidden;
    /* For scan line */
    animation: tech-pulse 6s infinite ease-in-out, float-y 6s ease-in-out infinite;
}

/* Floating Animation */
@keyframes float-y {

    0%,
    100% {
        transform: translateY(0);
    }

    50% {
        transform: translateY(-20px);
    }
}

/* Stagger floating for natural feel */
.gravity-item:nth-child(1) {
    animation-delay: 0s;
}

.gravity-item:nth-child(2) {
    animation-delay: 2s;
}

/* Different delay than pulse */
.gravity-item:nth-child(3) {
    animation-delay: 4s;
}

/* AES Arrow Interaction */
.product-card::after {
    content: '➔';
    /* Or use an SVG/Icon font if available, arrow for now */
    position: absolute;
    bottom: 20px;
    right: 20px;
    font-size: 1.5rem;
    color: var(--primary-color);
    opacity: 0;
    transform: translateX(-20px);
    transition: all 0.3s ease;
    pointer-events: none;
}

.product-card:hover::after {
    opacity: 1;
    transform: translateX(0);
}


.product-card:hover {
    border-color: var(--primary-color);
    box-shadow: 0 0 30px rgba(0, 212, 255, 0.4), inset 0 0 20px rgba(0, 212, 255, 0.1);
    background: rgba(255, 255, 255, 0.12);
}

/* Technological Animation Keyframes */
@keyframes tech-pulse {

    0%,
    100% {
        border-color: rgba(0, 212, 255, 0.1);
        box-shadow: 0 15px 35px rgba(0, 0, 0, 0.5);
    }

    50% {
        border-color: rgba(0, 212, 255, 0.4);
        box-shadow: 0 15px 35px rgba(0, 0, 0, 0.5), 0 0 15px rgba(0, 212, 255, 0.2);
    }
}

@keyframes scan-line {
    0% {
        top: -50%;
        opacity: 0;
    }

    10% {
        opacity: 1;
    }

    100% {
        top: 150%;
        opacity: 0;
    }
}

.card-glow {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    /* Adjust based on scanning preference */
    background: linear-gradient(to bottom, transparent 0%, rgba(0, 212, 255, 0.4) 50%, transparent 100%);
    opacity: 0;
    pointer-events: none;
    /* Let clicks pass through */
    z-index: 1;
    animation: scan-line 5s cubic-bezier(0.4, 0, 0.2, 1) infinite;
    transform: skewY(-5deg);
    /* Tech-y angle */
}

/* Stagger animations for each card if possible (requires nth-child or JS, simpler here is just one animation) */
.gravity-item:nth-child(1) .card-glow {
    animation-delay: 0s;
}

.gravity-item:nth-child(2) .card-glow {
    animation-delay: 1.5s;
}

.gravity-item:nth-child(3) .card-glow {
    animation-delay: 3s;
}



.product-card img {
    width: 100%;
    height: auto;
    max-height: 250px;
    object-fit: contain;
    filter: drop-shadow(0 15px 25px rgba(0, 0, 0, 0.6));
    margin-bottom: 15px;
    transition: transform 0.5s ease;
}

.product-card:hover img {
    transform: scale(1.05) translateY(-10px);
}

.tag {
    display: inline-block;
    padding: 5px 12px;
    border-radius: 12px;
    font-size: 0.7rem;
    font-weight: 700;
    margin-bottom: 10px;
    letter-spacing: 1px;
}

.tag.new {
    background: rgba(0, 212, 255, 0.2);
    color: #00d4ff;
    border: 1px solid rgba(0, 212, 255, 0.3);
}

.tag.promo {
    background: rgba(255, 170, 0, 0.2);
    color: #ffaa00;
    border: 1px solid rgba(255, 170, 0, 0.3);
}

.tag.private {
    background: rgba(255, 255, 255, 0.1);
    color: #fff;
    border: 1px solid rgba(255, 255, 255, 0.3);
}

.product-card h3 {
    font-size: 1.2rem;
    margin-bottom: 5px;
    color: white;
}

.product-card p {
    font-size: 0.9rem;
    color: rgba(255, 255, 255, 0.6);
}

.gravity-item {
    /* Added for animation control */
    opacity: 0;
    visibility: hidden;
}

/* Footer */
footer {
    background: #020202;
    padding: 60px 5% 20px 5%;
    border-top: 1px solid rgba(255, 255, 255, 0.05);
}

.footer-container {
    /* Width controlled by .largura1 */
    /* Width controlled by .largura1 */
    display: flex;
    justify-content: space-between;
    /* Spread columns to fill width */
    align-items: start;
    /* Align to top */
    flex-wrap: wrap;
    /* Allow wrapping on smaller screens if media queries fail */
    gap: 20px;
    /* Minimum gap */
}

.footer-col {
    display: flex;
    flex-direction: column;
    align-items: center;
    text-align: center;
}

/* Cert Icons */
.certs-icons {
    display: flex;
    gap: 15px;
    justify-content: center;
}

.cert-icon {
    display: flex;
    flex-direction: column;
    align-items: center;
    color: rgba(255, 255, 255, 0.6);
    font-size: 0.7rem;
    gap: 5px;
}

.cert-icon img {
    height: 35px;
    width: auto;
    object-fit: contain;
    margin-bottom: 2px;
    filter: brightness(0) invert(1);
    /* Make them white to match theme if they are colored, or remove if user wants color. Let's assume white for consistency first or check?
    Wait, "icone-FDA.png" might be colored. The design is dark mode. Detailed PNGs usually look best in their original color or white.
    Let's NOT apply filter first, unless they are black.
    Actually, let's just control size.
    */
    opacity: 0.8;
    transition: opacity 0.3s;
}

.cert-icon:hover img {
    opacity: 1;
}

.footer-col {
    display: flex;
    flex-direction: column;
    align-items: center;
    text-align: center;
}

.footer-logo {
    height: 50px;
    width: auto;
    margin-bottom: 10px;
    /* Reduced from 20px to lift the text */
    filter: brightness(0) invert(1);
    /* Ensure white logo */
    opacity: 0.8;
}

.footer-links {
    list-style: none;
    padding: 0;
}

.footer-links li {
    margin-bottom: 12px;
}

.footer-links a {
    color: rgba(255, 255, 255, 0.6);
    text-decoration: none;
    transition: color 0.3s;
    font-size: 0.9rem;
    text-transform: uppercase;
}

.footer-links a:hover {
    color: var(--primary-color);
}

.footer-certs-grouper {
    margin-top: 30px;
    width: 100%;
}

.footer-col h4 {
    color: white;
    margin-bottom: 20px;
    font-size: 1.1rem;
}

.footer-col p,
.footer-company-info {
    color: rgba(255, 255, 255, 0.5);
    font-size: 0.85rem;
    /* Slightly smaller for address */
    line-height: 1.5;
    margin-bottom: 20px;
}

.footer-company-info strong {
    color: white;
    font-weight: 700;
    display: block;
    /* Force new line for the name */
    margin-bottom: 0px;
}



.social-icons-row {
    display: grid;
    grid-template-columns: repeat(2, auto);
    gap: 10px;
    /* Tighter gap for 2x2 */
    margin-top: 25px;
    justify-content: center;
}

.social-icon {
    color: rgba(255, 255, 255, 0.8);
    width: 40px;
    /* Larger hit area */
    height: 40px;
    display: flex;
    align-items: center;
    justify-content: center;
    background: rgba(255, 255, 255, 0.05);
    border-radius: 50%;
    transition: all 0.3s cubic-bezier(0.175, 0.885, 0.32, 1.275);
}

.social-icon svg {
    width: 20px;
    height: 20px;
}

.social-icon:hover {
    color: white;
    transform: translateY(-5px);
    background: rgba(255, 255, 255, 0.1);
    box-shadow: 0 5px 15px rgba(0, 0, 0, 0.3);
}

.social-icon.ig:hover {
    background: radial-gradient(circle at 30% 107%, #fdf497 0%, #fdf497 5%, #fd5949 45%, #d6249f 60%, #285AEB 90%);
    color: white;
}

.social-icon.fb:hover {
    background: #1877F2;
    color: white;
}

.social-icon.yt:hover {
    background: #FF0000;
    color: white;
}

.social-icon.tt:hover {
    background: #00f2ea;
    color: black;
}

.newsletter-form {
    display: flex;
    align-items: center;
    background: #e0e0e0;
    /* Match header search bar */
    border-radius: 20px;
    padding: 2px 2px 2px 15px;
    width: 100%;
    max-width: 300px;
}

.newsletter-form input {
    border: none;
    background: transparent;
    outline: none;
    font-size: 0.8rem;
    color: #333;
    width: 100%;
    flex: 1;
}

.newsletter-form button {
    background: #0056b3;
    color: white;
    border: none;
    width: auto;
    /* Allow text width */
    height: 30px;
    border-radius: 20px;
    /* Pill shape */
    padding: 0 15px;
    /* Side padding for text */
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 0.8rem;
    font-weight: 600;
    cursor: pointer;
    margin-right: 2px;
}

.badges {
    display: flex;
    gap: 10px;
    flex-wrap: wrap;
    justify-content: center;
    /* Center badges */
}

.badge {
    padding: 8px 12px;
    border: 1px solid rgba(255, 255, 255, 0.2);
    border-radius: 6px;
    font-size: 0.7rem;
    color: rgba(255, 255, 255, 0.7);
    display: flex;
    align-items: center;
    gap: 5px;
}

.footer-bottom {
    text-align: center;
    padding-top: 20px;
    border-top: 1px solid rgba(255, 255, 255, 0.05);
    font-size: 0.8rem;
    color: rgba(255, 255, 255, 0.3);
}

/* Responsive */
@media (max-width: 768px) {


    /* RESET BASICS */

    .header-nav-curve nav,
    .header-right-panel .partner-link,
    .login-links-container {
        display: none !important;
    }

    /* HEADER TOP STACKING */
    .header-top {
        flex-direction: column;
        height: auto;
        padding: 5px 5% 20px 5%;
        /* Added padding-bottom to extend white area */
        gap: 5px;
        align-items: center;
        background: white;
    }

    /* 1. LOGO (TOP) */
    .logo-container {
        width: 100%;
        display: flex;
        flex-direction: column;
        align-items: center;
        justify-content: center;
        order: 1;
        margin-bottom: 0px;
    }

    .main-logo {
        max-height: 55px;
    }

    .logo-subtitle {
        display: none;
    }

    /* 2. CENTER PANEL (FLAGS + SEARCH) (MIDDLE) */
    .header-center-panel {
        display: flex;
        position: static;
        transform: none;
        width: 100%;
        flex-direction: row;
        justify-content: space-between;
        align-items: center;
        gap: 10px;
        order: 2;
        margin-bottom: 5px;
    }

    .flags {
        gap: 5px;
        flex-shrink: 0;
    }

    .flag-icon {
        width: 25px;
        height: 25px;
    }

    .search-bar {
        width: auto;
        flex: 1;
        max-width: none;
        padding: 2px 5px 2px 10px;
        background: #f0f0f0;
    }

    .search-bar input {
        width: 100%;
        min-width: 50px;
        font-size: 0.8rem;
    }

    .search-bar button {
        padding: 3px 10px;
        font-size: 0.7rem;
        white-space: nowrap;
    }

    /* 3. MENU TRIGGER (BOTTOM area, inside curve space) */
    .header-right-panel {
        width: 100%;
        display: flex;
        justify-content: center;
        align-items: center;
        order: 3;
        position: absolute;
        bottom: -35px;
        /* Moved down significantly */
        z-index: 1002;
    }

    .mobile-menu-trigger {
        display: flex;
        width: 50px;
        height: 35px;
        margin-top: 0;
        background: white;
        /* Solid white background */
        border-radius: 10px;
        align-items: center;
        padding: 5px;
        justify-content: space-evenly;
        box-shadow: 0 4px 10px rgba(0, 0, 0, 0.15);
    }

    .mobile-menu-trigger span {
        height: 3px;
        border-radius: 3px;
        width: 70%;
    }

    /* CURVE ADJUSTMENT */
    .header-nav-curve {
        height: 60px;
        /* Taller curve */
        margin-top: -1px;
        /* Overlap to remove line/gap */
    }

    /* SOCIAL ICONS MOBILE (1 Line, Centered) */
    .social-icons-row {
        display: flex;
        justify-content: center;
        gap: 15px;
        margin-top: 20px !important;
        /* Force override inline style if present */
        grid-template-columns: none;
        margin-left: auto;
        margin-right: auto;
    }

    /* Footer Col Modifications for Mobile */
    .footer-col {
        align-items: center;
        text-align: center;
        width: 100%;
    }

    /* Newsletter Form Centering */
    .newsletter-form {
        margin: 0 auto;
        /* Ensure form box is centered */
    }

    .newsletter-form input {
        text-align: center;
        /* Center placeholder text */
    }

    /* SCROLLED STATE ADJUSTMENTS FOR MOBILE */
    #main-header.scrolled .header-top {
        padding: 5px 5% 0 5%;
        gap: 2px;
    }

    #main-header.scrolled .main-logo {
        max-height: 35px;
        /* Even smaller on scroll */
    }

    /* Outros Ajustes Mobile */
    .header-content {
        padding: 1rem;
    }

    .footer-container {
        grid-template-columns: 1fr;
        gap: 50px;
    }

    /* HERO MOBILE REORGANIZATION */
    #hero {
        padding-top: 130px;
        /* Adjusted to fit new header size + spacing */
        height: auto;
        min-height: 100vh;
        flex-direction: column;
        justify-content: flex-start;
        padding-bottom: 50px;
    }

    /* 1. Antigravity Container Reset: Vertical Flex */
    #idn-antigravity-container {
        position: relative;
        bottom: auto;
        left: auto;
        transform: none;
        flex-direction: column;
        width: 100%;
        gap: 30px;
        padding-top: 40vh;
        /* Push content down to leave space for video view */
        z-index: 10;
        margin-bottom: 50px;
    }

    /* 2. Text (First) */
    .hero-content {
        order: 1;
        margin-bottom: 10px;
        position: relative;
        text-shadow: 0 2px 4px rgba(0, 0, 0, 0.8);
    }

    .hero-content h1 {
        font-size: 1.4rem;
    }

    /* 3. Cards (Second) */
    .gravity-item {
        order: 2;
        position: relative !important;
        /* Reset antigravity absolute positioning */
        transform: none !important;
        /* Reset rotation/translation */
        top: auto !important;
        left: auto !important;
        width: 90%;
        max-width: 300px;
        margin: 0 auto;
        opacity: 1 !important;
        /* Force visible */
    }

    /* VIDEO BACKGROUND MOBILE VISIBILITY FIX */
    .video-background {
        height: 45vh;
        min-height: 250px;
        overflow: hidden;
        border-bottom: 2px solid rgba(255, 255, 255, 0.1);

        /* Fix Visibility */
        position: absolute;
        top: 120px;
        /* Moved down to start at curve level */
        left: 0;
        z-index: 0;
    }

    #hero {
        background-color: #000;
        position: relative;
        /* Context for absolute video */
    }

    /* Ensure content is above video */
    .hero-content,
    .gravity-item {
        position: relative;
        z-index: 1;
    }

    /* Adjust content padding to START AFTER video */
    #idn-antigravity-container {
        padding-top: 45vh;
        /* 45vh + 130px (Hero Pad) > 45vh + 120px (Video End) by 10px */
    }
}

@media (min-width: 769px) and (max-width: 1024px) {
    .footer-container {
        grid-template-columns: repeat(2, 1fr);
        /* 2x2 on Tablet */
        gap: 30px;
    }
}

/* Utility Width Class */
.largura1 {
    width: 100%;
    max-width: 1200px;
    margin: 0 auto;
    padding-left: 15px;
    padding-right: 15px;
}

/* Development Modal Styles */
.modal-overlay {
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background: rgba(0, 0, 0, 0.7);
    backdrop-filter: blur(8px);
    -webkit-backdrop-filter: blur(8px);
    display: flex;
    justify-content: center;
    align-items: center;
    z-index: 10000;
    opacity: 0;
    visibility: hidden;
    transition: all 0.3s ease;
}

.modal-overlay.active {
    opacity: 1;
    visibility: visible;
}

.modal-content {
    background: rgba(20, 20, 20, 0.95);
    border: 1px solid rgba(255, 255, 255, 0.1);
    padding: 40px 30px;
    border-radius: 20px;
    text-align: center;
    max-width: 400px;
    width: 90%;
    position: relative;
    transform: translateY(20px);
    transition: transform 0.4s cubic-bezier(0.175, 0.885, 0.32, 1.275);
    box-shadow: 0 20px 50px rgba(0, 0, 0, 0.5);
}

.modal-overlay.active .modal-content {
    transform: translateY(0);
}

.modal-close {
    position: absolute;
    top: 15px;
    right: 15px;
    background: transparent;
    border: none;
    color: rgba(255, 255, 255, 0.5);
    font-size: 1.5rem;
    cursor: pointer;
    transition: color 0.3s;
}

.modal-close:hover {
    color: white;
}

/* Atom Animation */
.atom-container {
    width: 80px;
    height: 80px;
    position: relative;
    margin: 0 auto 20px;
    display: flex;
    justify-content: center;
    align-items: center;
}

.atom-core {
    width: 12px;
    height: 12px;
    background: var(--primary-color, #00C2FF);
    border-radius: 50%;
    box-shadow: 0 0 10px var(--primary-color, #00C2FF);
    z-index: 2;
}

.atom-orbit {
    position: absolute;
    width: 100%;
    height: 100%;
    border: 1px solid rgba(0, 194, 255, 0.3);
    border-radius: 50%;
    transform-style: preserve-3d;
}

.orbit-1 {
    transform: rotate(0deg);
}

.orbit-2 {
    transform: rotate(60deg);
}

.orbit-3 {
    transform: rotate(-60deg);
}

.atom-electron {
    position: absolute;
    top: -3px;
    /* center on line */
    left: 50%;
    width: 6px;
    height: 6px;
    background: var(--primary-color, #00C2FF);
    border-radius: 50%;
    box-shadow: 0 0 5px var(--primary-color, #00C2FF);
    transform: translateX(-50%);
    animation: electronAnimation 1.5s linear infinite;
}

.orbit-1 .atom-electron {
    animation-delay: 0s;
}

.orbit-2 .atom-electron {
    animation-delay: -0.5s;
}

.orbit-3 .atom-electron {
    animation-delay: -1s;
}

@keyframes electronAnimation {
    0% {
        transform: rotate(0deg) translateX(40px) rotate(0deg);
        /* 40px is radius */
    }

    100% {
        transform: rotate(360deg) translateX(40px) rotate(-360deg);
    }
}

.modal-content h3 {
    color: white;
    font-size: 1.5rem;
    margin-bottom: 10px;
    background: linear-gradient(90deg, #fff, #aaa);
    -webkit-background-clip: text;
    background-clip: text;
    /* -webkit-text-fill-color: transparent; Optional, keeps it readable if not supported */
}

.modal-content p {
    color: rgba(255, 255, 255, 0.7);
    font-size: 0.95rem;
    line-height: 1.6;
    margin-bottom: 25px;
}

.modal-action-btn {
    background: white;
    color: black;
    border: none;
    padding: 12px 30px;
    border-radius: 30px;
    font-weight: 600;
    cursor: pointer;
    transition: transform 0.2s, box-shadow 0.2s;
}

.modal-action-btn:hover {
    transform: scale(1.05);
    box-shadow: 0 5px 15px rgba(255, 255, 255, 0.2);
}



/* Banner Empresa - Styles */
.banner-empresa {
    width: 100%;
    height: 60vh;
    min-height: 500px;
    background: url('../assets/img/banner_a_empresa.png') no-repeat center center;
    background-size: cover;
    position: relative;
    display: flex;
    align-items: center;
    padding-top: 150px;
    /* Compensation for header */
}

@media (max-width: 768px) {
    .banner-empresa {
        display: none;
    }
}

.banner-content {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    /* Technological Gradient: Solid Dark Blue/Black on left -> Transparent on right */
    background: linear-gradient(90deg,
            rgba(5, 5, 5, 1) 0%,
            rgba(5, 5, 5, 0.95) 25%,
            rgba(5, 5, 5, 0.7) 50%,
            rgba(5, 5, 5, 0) 100%);
    display: flex;
    align-items: center;
    padding-left: 5%;
}

.banner-text {
    max-width: 600px;
    padding: 40px;
    border-left: 4px solid var(--primary-color);
    background: rgba(255, 255, 255, 0.02);
    backdrop-filter: blur(5px);
    border-radius: 0 20px 20px 0;
}

.banner-text h2 {
    font-size: 3rem;
    margin-bottom: 20px;
    background: linear-gradient(90deg, #fff, var(--primary-color));
    -webkit-background-clip: text;
    background-clip: text;
    -webkit-text-fill-color: transparent;
    text-transform: uppercase;
    letter-spacing: 2px;
}

.banner-text p {
    font-size: 1.3rem;
    color: rgba(255, 255, 255, 0.9);
    line-height: 1.6;
    font-weight: 300;
}

@media(max-width: 768px) {
    .banner-empresa {
        height: auto;
        min-height: 400px;
        background-position: center right;
        padding-top: 80px;
    }

    .banner-content {
        background: linear-gradient(0deg,
                rgba(5, 5, 5, 1) 0%,
                rgba(5, 5, 5, 0.9) 40%,
                rgba(5, 5, 5, 0.4) 100%);
        align-items: flex-end;
        padding: 20px;
    }

    .banner-text {
        width: 100%;
        border-left: none;
        border-bottom: 4px solid var(--primary-color);
        border-radius: 20px 20px 0 0;
        margin-bottom: 20px;
    }

    .banner-text h2 {
        font-size: 2rem;
    }

    .banner-text p {
        font-size: 1rem;
    }
}

/* =========================================
   CHAT NUCLEUM INTEGRATION
   ========================================= */

/* --- Variables (Scoped) --- */
:root {
    --nucleum-primary: #0d0d2b;
    --nucleum-accent: #00bcd4;
    --nucleum-gradient: linear-gradient(135deg, #00bcd4 0%, #007bff 100%);
    --nucleum-bg: #ffffff;
    --nucleum-text: #333333;
    --nucleum-user-bg: #007bff;
    --nucleum-gpt-bg: #f8f9fa;
}

/* --- Floating Button --- */
.nucleum-floating-btn {
    position: fixed;
    bottom: 30px;
    right: 30px;
    width: 60px;
    height: 60px;
    background: var(--nucleum-primary);
    border-radius: 50%;
    box-shadow: 0 4px 15px rgba(0, 0, 0, 0.3);
    cursor: pointer;
    z-index: 9999;
    display: flex;
    justify-content: center;
    align-items: center;
    transition: transform 0.3s ease, box-shadow 0.3s ease;
    border: 2px solid var(--nucleum-accent);
}

.nucleum-floating-btn:hover {
    transform: scale(1.1);
    box-shadow: 0 6px 20px rgba(0, 188, 212, 0.4);
}

.nucleum-floating-btn img {
    width: 100%;
    height: 100%;
    border-radius: 50%;
    object-fit: cover;
}

.nucleum-status-dot {
    position: absolute;
    bottom: 2px;
    right: 2px;
    width: 14px;
    height: 14px;
    background-color: #00ff88;
    border: 2px solid #fff;
    border-radius: 50%;
}

/* --- Modal Overlay --- */
.nucleum-modal {
    display: none;
    /* Hidden by default */
    position: fixed;
    z-index: 10000;
    left: 0;
    top: 0;
    width: 100%;
    height: 100%;
    overflow: hidden;
    background-color: rgba(0, 0, 0, 0.5);
    /* Backdrop */
    backdrop-filter: blur(5px);
    justify-content: center;
    align-items: center;
    opacity: 0;
    transition: opacity 0.3s ease;
}

.nucleum-modal.show {
    opacity: 1;
}

/* --- Modal Content --- */
.nucleum-modal-content {
    background-color: var(--nucleum-bg);
    width: 90%;
    max-width: 450px;
    height: 85vh;
    /* Fixed height for consistency */
    max-height: 700px;
    border-radius: 20px;
    box-shadow: 0 10px 30px rgba(0, 0, 0, 0.2);
    position: relative;
    display: flex;
    flex-direction: column;
    overflow: hidden;
    animation: slideUp 0.3s ease;
}

@keyframes slideUp {
    from {
        transform: translateY(50px);
        opacity: 0;
    }

    to {
        transform: translateY(0);
        opacity: 1;
    }
}

/* Close Button */
.nucleum-close {
    position: absolute;
    top: 15px;
    right: 20px;
    color: #aaa;
    font-size: 28px;
    font-weight: bold;
    cursor: pointer;
    z-index: 10;
    transition: color 0.2s;
}

.nucleum-close:hover {
    color: var(--nucleum-primary);
}

/* --- Views (Login, Register, Chat) --- */
.nucleum-view {
    padding: 0;
    height: 100%;
    display: flex;
    flex-direction: column;
}

/* Auth Styles */
.nucleum-auth-header {
    text-align: center;
    padding: 3rem 2rem 1rem;
    background-color: #f8f9fa;
    border-bottom: 1px solid #eee;
}

.nucleum-profile-pic-lg {
    width: 100px;
    height: 100px;
    border-radius: 50%;
    border: 3px solid var(--nucleum-accent);
    margin-bottom: 1rem;
    object-fit: cover;
}

.nucleum-auth-header h2 {
    color: var(--nucleum-primary);
    font-size: 1.5rem;
    margin: 0;
}

.nucleum-form {
    padding: 2rem;
    display: flex;
    flex-direction: column;
    gap: 1.2rem;
    overflow-y: auto;
}

.form-group label {
    display: block;
    margin-bottom: 0.5rem;
    font-weight: 500;
    color: #555;
    font-size: 0.9rem;
}

.form-group input {
    width: 100%;
    padding: 12px 15px;
    border: 1px solid #ddd;
    border-radius: 8px;
    font-size: 1rem;
    transition: border-color 0.2s;
}

.form-group input:focus {
    border-color: var(--nucleum-accent);
    outline: none;
}

.nucleum-btn-primary {
    background: var(--nucleum-gradient);
    color: white;
    border: none;
    padding: 14px;
    border-radius: 8px;
    font-size: 1rem;
    font-weight: 600;
    cursor: pointer;
    transition: transform 0.2s, box-shadow 0.2s;
    margin-top: 1rem;
}

.nucleum-btn-primary:hover {
    transform: translateY(-2px);
    box-shadow: 0 4px 12px rgba(0, 188, 212, 0.3);
}

.nucleum-auth-footer {
    text-align: center;
    padding: 1rem;
    font-size: 0.9rem;
    border-top: 1px solid #eee;
    margin-top: auto;
}

.nucleum-auth-footer a {
    color: var(--nucleum-accent);
    text-decoration: none;
    font-weight: 600;
}

.nucleum-error-msg {
    color: #e74c3c;
    font-size: 0.85rem;
    text-align: center;
    margin-top: 0.5rem;
}

/* --- Chat Interface Styles --- */
.nucleum-chat-header {
    background: var(--nucleum-primary);
    color: white;
    padding: 1rem 1.5rem;
    display: flex;
    justify-content: space-between;
    align-items: center;
    box-shadow: 0 2px 5px rgba(0, 0, 0, 0.1);
    flex-shrink: 0;
}

.nucleum-header-profile {
    display: flex;
    align-items: center;
    gap: 12px;
}

.nucleum-profile-pic-sm {
    width: 40px;
    height: 40px;
    border-radius: 50%;
    border: 2px solid var(--nucleum-accent);
    object-fit: cover;
}

.nucleum-header-info h2 {
    font-size: 1rem;
    font-weight: 600;
    margin: 0;
    color: white;
}

.nucleum-status-text {
    font-size: 0.75rem;
    color: #00ff88;
    display: flex;
    align-items: center;
    gap: 4px;
}

.nucleum-status-text::before {
    content: '';
    width: 6px;
    height: 6px;
    background-color: #00ff88;
    border-radius: 50%;
    display: inline-block;
}

.nucleum-logout-btn {
    background: rgba(255, 255, 255, 0.1);
    border: none;
    color: white;
    cursor: pointer;
    padding: 8px;
    border-radius: 50%;
    transition: background 0.2s;
    display: flex;
    align-items: center;
    justify-content: center;
}

.nucleum-logout-btn:hover {
    background: rgba(255, 255, 255, 0.2);
}

.nucleum-chat-messages {
    flex: 1;
    padding: 1.5rem;
    overflow-y: auto;
    display: flex;
    flex-direction: column;
    background-color: #f8f9fa;
    gap: 12px;
}

.nucleum-message {
    max-width: 85%;
    padding: 12px 16px;
    font-size: 0.95rem;
    line-height: 1.5;
    word-wrap: break-word;
    animation: fadeIn 0.3s ease;
}

.nucleum-user-message {
    align-self: flex-end;
    background: var(--nucleum-gradient);
    color: white;
    border-radius: 16px 16px 2px 16px;
    box-shadow: 0 2px 5px rgba(0, 123, 255, 0.2);
}

.nucleum-gpt-message {
    align-self: flex-start;
    background-color: white;
    color: #333;
    border-radius: 16px 16px 16px 2px;
    border: 1px solid #e0e0e0;
    box-shadow: 0 1px 3px rgba(0, 0, 0, 0.05);
}

.nucleum-chat-button {
    display: inline-block;
    background: var(--nucleum-primary);
    color: white !important;
    padding: 8px 16px;
    border-radius: 20px;
    text-decoration: none;
    font-size: 0.85rem;
    font-weight: 600;
    margin-top: 8px;
    transition: background 0.2s, transform 0.2s;
    text-align: center;
}

.nucleum-chat-button:hover {
    background: var(--nucleum-accent);
    transform: translateY(-1px);
}

.nucleum-chat-input {
    display: flex;
    padding: 1rem;
    background-color: white;
    border-top: 1px solid #eee;
    gap: 10px;
    flex-shrink: 0;
}

.nucleum-chat-input input {
    flex: 1;
    padding: 12px 16px;
    border: 1px solid #ddd;
    border-radius: 25px;
    font-size: 0.95rem;
    outline: none;
    transition: border-color 0.2s;
}

.nucleum-chat-input input:focus {
    border-color: var(--nucleum-accent);
}

.nucleum-chat-input button {
    background: var(--nucleum-primary);
    color: white;
    border: none;
    padding: 0 24px;
    border-radius: 25px;
    font-weight: 600;
    cursor: pointer;
    transition: background 0.2s;
}

.nucleum-chat-input button:hover {
    background: #1a1a3a;
}

/* Nucleum Speech Bubble */
.nucleum-bubble {
    position: fixed;
    bottom: 90px;
    right: 20px;
    background: white;
    color: #333;
    padding: 10px 15px;
    border-radius: 15px 15px 0 15px;
    /* Bubble shape */
    box-shadow: 0 5px 15px rgba(0, 0, 0, 0.2);
    font-size: 0.9rem;
    font-weight: 600;
    z-index: 9999;
    opacity: 0;
    visibility: hidden;
    transform: translateY(20px) scale(0.9);
    transition: all 0.4s cubic-bezier(0.175, 0.885, 0.32, 1.275);
    pointer-events: none;
    /* Let clicks pass through if needed */
}

.nucleum-bubble.show {
    opacity: 1;
    visibility: visible;
    transform: translateY(0) scale(1);
}

/* Ensure button is on top */
.nucleum-floating-btn {
    z-index: 10000;
}



/* CONTACT PAGE STYLES */

/* Page Hero */
.page-hero {
    padding-top: 220px;
    padding-bottom: 50px;
    text-align: center;
    background: radial-gradient(circle at center, rgba(0, 212, 255, 0.05) 0%, transparent 70%);
}

.page-hero-content h1 {
    font-size: 3rem;
    color: white;
    margin-bottom: 20px;
}

.page-hero-content p {
    color: rgba(255, 255, 255, 0.7);
    font-size: 1.2rem;
}

/* Contact Section */
.contact-section {
    padding: 20px 5% 80px 5%;
    max-width: 1200px;
    margin: 0 auto;
}

.contact-container {
    display: flex;
    flex-wrap: wrap;
    gap: 40px;
    justify-content: space-between;
}

.contact-form-col {
    flex: 1 1 500px;
    /* Grow, shrink, base width */
    background: var(--glass-bg);
    backdrop-filter: blur(10px);
    -webkit-backdrop-filter: blur(10px);
    border: 1px solid var(--glass-border);
    padding: 40px;
    border-radius: 20px;
}

.contact-form-col h2 {
    color: var(--primary-color);
    margin-bottom: 30px;
    font-size: 2rem;
}

/* Form Styles */
.contact-form .form-group {
    margin-bottom: 20px;
}

.contact-form label {
    display: block;
    margin-bottom: 8px;
    color: rgba(255, 255, 255, 0.9);
    font-weight: 500;
}

.contact-form input,
.contact-form select,
.contact-form textarea {
    width: 100%;
    padding: 12px 15px;
    background: rgba(255, 255, 255, 0.05);
    border: 1px solid rgba(255, 255, 255, 0.1);
    border-radius: 10px;
    color: white;
    font-family: var(--font-main);
    font-size: 1rem;
    outline: none;
    transition: all 0.3s ease;
}

.contact-form input:focus,
.contact-form select:focus,
.contact-form textarea:focus {
    border-color: var(--primary-color);
    background: rgba(255, 255, 255, 0.1);
}

.contact-form option {
    background: #111;
    color: white;
}

.submit-btn {
    width: 100%;
    padding: 14px;
    background: linear-gradient(90deg, var(--primary-color), #00aaff);
    color: #000;
    font-weight: 700;
    text-transform: uppercase;
    border: none;
    border-radius: 10px;
    cursor: pointer;
    font-size: 1rem;
    transition: transform 0.2s, box-shadow 0.2s;
    margin-top: 10px;
}

.submit-btn:hover {
    transform: translateY(-2px);
    box-shadow: 0 5px 20px rgba(0, 212, 255, 0.3);
}

/* Info Column */
.contact-info-col {
    flex: 1 1 400px;
    display: flex;
    flex-direction: column;
    gap: 20px;
}

.location-card {
    background: rgba(255, 255, 255, 0.03);
    border: 1px solid rgba(255, 255, 255, 0.05);
    padding: 20px;
    border-radius: 15px;
    transition: border-color 0.3s;
}

.location-card:hover {
    border-color: var(--primary-color);
}

.location-card h3 {
    color: white;
    margin-bottom: 10px;
    font-size: 1.2rem;
    border-left: 3px solid var(--secondary-color);
    padding-left: 10px;
}

.location-card p {
    color: rgba(255, 255, 255, 0.6);
    font-size: 0.95rem;
    line-height: 1.5;
    margin-bottom: 5px;
}

.map-container {
    border-radius: 15px;
    overflow: hidden;
    border: 1px solid var(--glass-border);
    height: 300px;
    margin-bottom: 10px;
}

/* RESPONSIVE CONTACT */
@media (max-width: 768px) {
    .contact-container {
        flex-direction: column;
    }

    .contact-form-col {
        padding: 25px;
    }

    .page-hero-content h1 {
        font-size: 2.2rem;
    }
}

/* --- FIXED NEWS MODAL STYLES (Appended) --- */
.modal-news-overlay {
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background: rgba(0, 0, 0, 0.85);
    backdrop-filter: blur(8px);
    -webkit-backdrop-filter: blur(8px);
    z-index: 10001;
    display: flex;
    justify-content: center;
    align-items: center;
    opacity: 0;
    visibility: hidden;
    transition: opacity 0.4s ease, visibility 0.4s ease;
}

.modal-news-overlay.modal-news-active {
    opacity: 1;
    visibility: visible;
}

.modal-news-content {
    background: #111;
    width: 700px !important;
    /* Force 700px */
    height: 400px !important;
    /* Force 400px */
    max-width: 95%;
    display: flex;
    border-radius: 20px;
    overflow: hidden;
    box-shadow: 0 25px 50px rgba(0, 0, 0, 0.7);
    border: 1px solid rgba(255, 255, 255, 0.1);
    position: relative;
    transform: scale(0.95);
    transition: transform 0.4s cubic-bezier(0.175, 0.885, 0.32, 1.275);
}

.modal-news-overlay.modal-news-active .modal-news-content {
    transform: scale(1);
}

.modal-news-close {
    position: absolute;
    top: 15px;
    right: 20px;
    font-size: 2rem;
    color: white;
    background: transparent;
    border: none;
    cursor: pointer;
    z-index: 10;
    text-shadow: 0 2px 5px rgba(0, 0, 0, 0.5);
    transition: color 0.3s, transform 0.3s;
}

.modal-news-close:hover {
    color: var(--primary-color);
    transform: scale(1.1);
}

.modal-news-img {
    flex: 1;
    max-width: 50%;
    position: relative;
    overflow: hidden;
    height: 100%;
}

.modal-news-img img {
    width: 100%;
    height: 100%;
    object-fit: cover;
}

.modal-news-text {
    flex: 1;
    padding: 40px;
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: flex-start;
    height: 100%;
    overflow-y: auto;
}

.modal-news-text h2 {
    color: var(--primary-color);
    margin-bottom: 20px;
    font-size: 2rem;
    line-height: 1.2;
}

.modal-news-text div {
    /* Content div */
    color: #ccc;
    font-size: 1rem;
    line-height: 1.6;
    margin-bottom: 30px;
}

.btn-news-action {
    padding: 12px 30px;
    background: var(--primary-color);
    color: #000;
    font-weight: bold;
    border: none;
    border-radius: 30px;
    cursor: pointer;
    transition: transform 0.2s, box-shadow 0.2s;
}

.btn-news-action:hover {
    transform: translateY(-2px);
    box-shadow: 0 5px 15px rgba(0, 212, 255, 0.3);
}

/* RESPONSIVE NEWS MODAL - HIDE ON MOBILE */
@media (max-width: 768px) {
    .modal-news-overlay {
        display: none !important;
    }
}

/* RELIGIOUS GOLD TEXT */
.gold-text-container {
    text-align: center;
    padding: 20px;
    display: flex;
    align-items: center;
    justify-content: center;
}

.gold-text {
    font-size: 1.2rem;
    color: white;
    text-transform: uppercase;
    letter-spacing: 2px;
    font-weight: 600;
    margin: 0;
    line-height: 1.4;
}

.gold-highlight {
    color: #FFD700;
    /* Gold */
    font-weight: 800;
    text-shadow:
        0 0 10px rgba(255, 215, 0, 0.8),
        0 0 20px rgba(255, 215, 0, 0.5),
        0 0 30px rgba(255, 215, 0, 0.3);
    background: linear-gradient(to right, #bf953f, #fcf6ba, #b38728, #fbf5b7, #aa771c);
    -webkit-background-clip: text;
    background-clip: text;
    -webkit-text-fill-color: transparent;
    animation: shine 3s infinite linear;
    background-size: 200% auto;
    font-size: 1.4rem;
    /* Slightly larger for emphasis */
}

@keyframes shine {
    to {
        background-position: 200% center;
    }
}

/* --- PRODUCT MODAL STYLES (Restored & New) --- */
.prod-modal {
    display: none;
    /* Hidden by default */
    position: fixed;
    z-index: 10000;
    left: 0;
    top: 0;
    width: 100%;
    height: 100%;
    overflow: auto;
    /* Allow scrolling the overlay if modal is taller/wider */
    background-color: rgba(0, 0, 0, 0.9);
    backdrop-filter: blur(5px);
    justify-content: center;
    align-items: center;
    padding: 20px;
    /* Padding for small screens */
}

.prod-modal-body {
    background-color: #111;
    margin: auto;
    width: 95%;
    /* Wider on mobile */
    max-width: 1600px;
    /* Increased from 1400px */
    border-radius: 12px;
    position: relative;
    box-shadow: 0 25px 50px rgba(0, 0, 0, 0.5);
    border: 1px solid rgba(255, 255, 255, 0.1);
    display: flex;
    flex-direction: column;
}

.prod-modal-close {
    color: #aaa;
    position: absolute;
    top: 15px;
    right: 20px;
    font-size: 28px;
    font-weight: bold;
    background: none;
    border: none;
    cursor: pointer;
    z-index: 100;
    transition: color 0.3s;
}

.prod-modal-close:hover {
    color: var(--primary-color);
}

/* --- NEW 2-COLUMN LAYOUT --- */
.prod-modal-body.new-layout {
    flex-direction: row;
    padding: 0;
    overflow: hidden;
    /* Removed fixed height: 600px */
    height: auto;
    min-height: 600px;
    max-height: 90vh;
    /* Limit height to viewport */
}

.prod-media-col {
    flex: 1;
    /* Decreased media ratio to give info more space */
    background: #000;
    display: flex;
    flex-direction: column;
    border-right: 1px solid rgba(255, 255, 255, 0.1);
    position: relative;
    min-height: 100%;
    /* Ensure it stretches */
}

.prod-main-display {
    flex: 1;
    /* Takes remaining space */
    position: relative;
    display: flex;
    align-items: center;
    justify-content: center;
    background: #000;
    overflow: hidden;
    min-height: 400px;
    /* Minimum height for image */
}

.prod-main-display img {
    width: 100%;
    height: 100%;
    object-fit: contain;
    padding: 20px;
}

.prod-gallery-thumbs {
    height: 100px;
    /* Slightly taller */
    background: #0a0a0a;
    display: flex;
    padding: 15px;
    gap: 15px;
    overflow-x: auto;
    border-top: 1px solid rgba(255, 255, 255, 0.05);
    align-items: center;
}

.thumb {
    width: 70px;
    height: 70px;
    min-width: 70px;
    border-radius: 8px;
    overflow: hidden;
    cursor: pointer;
    border: 2px solid rgba(255, 255, 255, 0.1);
    opacity: 0.6;
    transition: 0.2s;
    background: #111;
    display: flex;
    align-items: center;
    justify-content: center;
    color: white;
}

.thumb img {
    width: 100%;
    height: 100%;
    object-fit: cover;
}

.thumb:hover,
.thumb.active-thumb {
    border-color: var(--primary-color);
    opacity: 1;
    transform: scale(1.05);
}

/* --- Search Results Dropdown --- */
.search-box {
    position: relative;
    /* Ensure dropdown is relative to box */
}

.search-results-dropdown {
    position: absolute;
    top: 100%;
    left: 0;
    width: 100%;
    min-width: 300px;
    background: #fff;
    border: 1px solid #ddd;
    border-radius: 4px;
    box-shadow: 0 4px 10px rgba(0, 0, 0, 0.1);
    z-index: 1000;
    max-height: 400px;
    overflow-y: auto;
    display: none;
    /* Hidden by default */
}

.search-result-item {
    display: flex;
    align-items: center;
    padding: 10px;
    border-bottom: 1px solid #eee;
    cursor: pointer;
    transition: background 0.2s;
    color: #333;
    text-decoration: none;
}

.search-result-item:hover {
    background: #f9f9f9;
}

.search-result-item:last-child {
    border-bottom: none;
}

.search-result-img {
    width: 50px;
    height: 50px;
    object-fit: cover;
    border-radius: 4px;
    margin-right: 10px;
}

.search-result-info {
    flex: 1;
}

.search-result-title {
    font-weight: bold;
    font-size: 14px;
    color: #000;
    margin: 0;
}

.search-result-snippet {
    font-size: 12px;
    color: #666;
    margin: 2px 0 0;
}

.search-result-type {
    font-size: 10px;
    text-transform: uppercase;
    color: #888;
    margin-bottom: 2px;
}

.video-thumb {
    font-size: 20px;
    background: #222;
    color: var(--primary-color);
}

.prod-info-col {
    flex: 1.5;
    /* Increased Info ratio significantly */
    padding: 50px;
    /* Increased padding */
    overflow-y: auto;
    /* Allow internal scrolling if content is long */
    background: #111;
    display: flex;
    flex-direction: column;
}

.prod-header-group {
    margin-bottom: 25px;
}

.modal-cat-tag {
    color: var(--primary-color);
    font-size: 1rem;
    text-transform: uppercase;
    letter-spacing: 2px;
    display: block;
    margin-bottom: 15px;
    font-weight: 600;
}

.prod-info-col h2 {
    font-size: 2rem;
    /* Reduced from 2.5rem */
    line-height: 1.1;
    color: white;
    margin: 0;
}

.prod-desc-scroll {
    max-height: 200px;
    /* Increased visible description area */
    overflow-y: auto;
    color: #ccc;
    font-size: 1.05rem;
    /* Larger font */
    line-height: 1.6;
    margin-bottom: 30px;
    padding-right: 15px;
}

/* Accordion */
.nutri-accordion {
    margin-bottom: 30px;
    border: 1px solid rgba(255, 255, 255, 0.1);
    border-radius: 8px;
    overflow: hidden;
}

.acc-btn {
    width: 100%;
    padding: 20px;
    background: rgba(255, 255, 255, 0.05);
    border: none;
    color: white;
    text-align: left;
    font-weight: 700;
    font-size: 1.1rem;
    cursor: pointer;
    display: flex;
    justify-content: space-between;
    align-items: center;
    transition: background 0.3s;
}

.acc-btn:hover {
    background: rgba(255, 255, 255, 0.1);
}

.acc-content {
    max-height: 0;
    overflow: hidden;
    transition: max-height 0.4s ease-out;
    background: rgba(0, 0, 0, 0.3);
}

.nutri-table {
    padding: 25px;
    font-size: 1rem;
    color: #ccc;
    /* Ensure table fits */
    width: 100%;
    overflow-x: auto;
}

.nutri-table table {
    width: 100%;
    border-collapse: collapse;
}

.nutri-table th,
.nutri-table td {
    padding: 8px;
    border-bottom: 1px solid rgba(255, 255, 255, 0.1);
    text-align: left;
}

.prod-specs {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 30px;
    margin-top: auto;
    /* Push to bottom if space permits */
}

.spec-item h4 {
    color: #888;
    font-size: 0.9rem;
    margin-bottom: 10px;
    text-transform: uppercase;
    letter-spacing: 1px;
}

.spec-item div {
    color: white;
    font-size: 1rem;
    line-height: 1.5;
}

/* Scrollbar for modal content */
.prod-info-col::-webkit-scrollbar,
.prod-desc-scroll::-webkit-scrollbar,
.prod-gallery-thumbs::-webkit-scrollbar {
    width: 6px;
    height: 6px;
}

.prod-info-col::-webkit-scrollbar-track,
.prod-desc-scroll::-webkit-scrollbar-track {
    background: #111;
}

.prod-info-col::-webkit-scrollbar-thumb,
.prod-desc-scroll::-webkit-scrollbar-thumb {
    background: #333;
    border-radius: 3px;
}

/* Responsive */
@media (max-width: 900px) {
    .prod-modal-body.new-layout {
        flex-direction: column;
        height: auto;
        max-height: 95vh;
        overflow-y: auto;
        width: 95%;
    }

    .prod-media-col {
        height: auto;
        min-height: auto;
        flex: none;
        border-right: none;
        border-bottom: 1px solid rgba(255, 255, 255, 0.1);
    }

    .prod-main-display {
        height: 300px;
        min-height: auto;
    }

    .prod-info-col {
        padding: 25px;
        flex: none;
        /* Let it grow naturally */
    }

    .prod-info-col h2 {}
}

/* Nucleum Dropdown Menu */
.nucleum-menu-wrapper {
    position: relative;
    display: flex;
    justify-content: flex-end;
    /* Ensure hierarchy context */
    z-index: 1005;
}

.nucleum-dropdown-menu {
    position: absolute;
    top: 100%;
    right: 0;
    width: auto;
    background: transparent;
    padding: 15px 0 0 0;
    /* Bridge space */
    display: flex;
    flex-direction: column;
    gap: 12px;
    z-index: 10001;
    /* Extremely high z-index */

    /* Animation States */
    opacity: 0;
    visibility: hidden;
    transform: translateY(10px);
    transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
    pointer-events: none;
}

/* Hover Effect */
.nucleum-menu-wrapper:hover .nucleum-dropdown-menu {
    opacity: 1;
    visibility: visible;
    transform: translateY(0);
    pointer-events: auto;
}

/* Button Links (White Cards) */
.nucleum-app-btn {
    display: block;
    background: #ffffff;
    padding: 10px;
    width: 200px;
    /* Specific width for card look */
    height: auto;
    border-radius: 8px;
    /* Clean rounded corners */
    box-shadow: 0 4px 15px rgba(0, 0, 0, 0.15);
    /* Drop shadow */
    transition: transform 0.2s ease, box-shadow 0.2s ease, border-color 0.2s ease;
    border: 1px solid rgba(0, 0, 0, 0.05);
    text-align: center;
}

.nucleum-app-btn:hover {
    transform: translateX(-5px);
    /* Slide left effect */
    box-shadow: 0 6px 20px rgba(0, 0, 0, 0.2);
    border-color: #00d4ff;
    /* Highlight color */
}

.nucleum-app-btn img {
    width: 100%;
    height: auto;
    object-fit: contain;
    display: block;
}

/* Invisible Bridge for Hover Stability */
.nucleum-dropdown-menu::before {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 15px;
    /* Covers the top padding gap */
    background: transparent;
}

/* Nucleum Toggle Icon */
.nucleum-icon-circle {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 16px;
    height: 16px;
    border: 1px solid #00d4ff;
    border-radius: 50%;
    color: #00d4ff;
    font-size: 14px;
    line-height: 1;
    font-weight: normal;
    transition: all 0.3s ease;
}

.nucleum-menu-wrapper.active .nucleum-icon-circle {
    background: #00d4ff;
    color: #fff;
    transform: rotate(180deg);
}

/* Update Menu Visibility - DEPEND ON JS CLASS ONLY for correct toggle behavior */
.nucleum-menu-wrapper.active .nucleum-dropdown-menu {
    opacity: 1;
    visibility: visible;
    transform: translateY(0);
    pointer-events: auto;
}

/* Animations */


/* Base State for Buttons (Hidden when menu inactive) */
.nucleum-dropdown-menu .nucleum-app-btn {
    position: relative;
    z-index: 10006;
    /* Bridge is lower, but has 10001, so 10006 is safe */
    opacity: 0;
    transform: translateX(50px);
    transition: opacity 0.5s cubic-bezier(0.25, 0.46, 0.45, 0.94), transform 0.5s cubic-bezier(0.25, 0.46, 0.45, 0.94);
}

/* Active State - Trigger Transition */
.nucleum-menu-wrapper.active .nucleum-dropdown-menu .nucleum-app-btn {
    opacity: 1;
    transform: translateX(0);
}

/* Staggered Delays (Entrance) */
.nucleum-menu-wrapper.active .nucleum-dropdown-menu .nucleum-app-btn:nth-child(1) {
    transition-delay: 0s;
}

.nucleum-menu-wrapper.active .nucleum-dropdown-menu .nucleum-app-btn:nth-child(2) {
    transition-delay: 0.1s;
}

.nucleum-menu-wrapper.active .nucleum-dropdown-menu .nucleum-app-btn:nth-child(3) {
    transition-delay: 0.2s;
}

.nucleum-menu-wrapper.active .nucleum-dropdown-menu .nucleum-app-btn:nth-child(4) {
    transition-delay: 0.3s;
}

/* =========================================
   MOBILE FIXES - NUCLEUM CHAT (FORCE OVERRIDE)
   ========================================= */
@media (max-width: 768px) {

    /* Floating Button - Force Position & Size */
    #nucleum-floating-btn {
        width: 55px !important;
        height: 55px !important;
        bottom: 80px !important;
        right: 20px !important;
        z-index: 2147483647 !important;
        /* Max Z-Index */
    }

    /* Modal - Force Full Screen */
    #nucleum-modal .nucleum-modal-content {
        width: 100% !important;
        height: 100% !important;
        max-width: none !important;
        max-height: none !important;
        border-radius: 0 !important;
        margin: 0 !important;
    }

    /* Close Button - Ease of Access */
    #nucleum-close-btn {
        top: 25px !important;
        right: 25px !important;
        font-size: 32px !important;
        color: #333 !important;
        /* Ensure visibility on white bg */
        z-index: 100001 !important;
    }

    /* Speech Bubble */
    #nucleum-bubble {
        bottom: 145px !important;
        right: 20px !important;
        font-size: 0.85rem !important;
        z-index: 2147483646 !important;
    }

    /* Ensure Views take full height */
    .nucleum-view {
        height: 100% !important;
        /* display: flex !important;  <-- REMOVED: Breaks JS toggling */
        /* flex-direction: column !important; <-- REMOVED: Breaks JS toggling */
    }

    .nucleum-chat-messages {
        flex: 1 !important;
    }

    /* Mobile Menu Content Scroll Fix */
    .mobile-menu-content {
        max-height: 90vh;
        overflow-y: auto;
        padding-bottom: 50px;
        /* Space for scrolling */
    }

    /* =========================================
   MOBILE NUCLEUM DROPDOWN STYLES
   ========================================= */
    .mobile-nucleum-wrapper {
        width: 100%;
        display: flex;
        flex-direction: column;
        align-items: center;
    }

    .mobile-nucleum-trigger {
        display: flex;
        align-items: center;
        justify-content: center;
        gap: 8px;
        width: 100%;
    }

    .mobile-nucleum-icon {
        font-size: 1.2rem;
        font-weight: bold;
        color: #00d4ff;
        transition: transform 0.3s ease;
    }

    .mobile-nucleum-dropdown {
        width: 100%;
        background: rgba(255, 255, 255, 0.1);
        border-radius: 15px;
        /* Rounded corners */
        margin-top: 15px;
        padding: 20px;
        display: none;
        /* Hidden by default */
        flex-direction: column;
        gap: 15px;
        animation: fadeIn 0.3s ease;
        border: 1px solid rgba(255, 255, 255, 0.05);
    }

    .mobile-nucleum-dropdown .mobile-app-btn {
        display: block;
        width: 100%;
        max-width: 200px;
        /* Limit width */
        margin: 0 auto;
        /* Center */
        transition: transform 0.2s;
        border-radius: 12px;
        overflow: hidden;
        background: white;
        /* Card background for image */
        padding: 5px;
        /* Padding inside the white card */
    }

    .mobile-nucleum-dropdown .mobile-app-btn img {
        width: 100%;
        height: auto;
        display: block;
        border-radius: 8px;
    }

    .mobile-nucleum-dropdown .mobile-app-btn:active {
        transform: scale(0.98);
    }
}