/* IMPORT FONTS */
:root {
    --primary-blue: #2D34E2;   /* Deep bold blue */
    --accent-lime: #C5F82A;    /* Neon lime green */
    --off-white: #F4F4F9;
    --dark-text: #1a1a1a;
    --light-gray: #e0e0e0;
    --danger: #FF4D4D;
    
    --font-heading: 'Clash Display', sans-serif;
    --font-body: 'Space Grotesk', sans-serif;
    --font-mono: 'JetBrains Mono', monospace;
    --font-retro: 'Press Start 2P', cursive;
    --font-hand: 'Architects Daughter', cursive;
    
    --container-width: 1200px;
    --border-radius: 16px;
}

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

html, body {
    cursor: none;
    background-color: var(--off-white);
    color: var(--dark-text);
    font-family: var(--font-body);
    overflow-x: hidden;
    line-height: 1.5;
}

/* CUSTOM CURSOR - Z-INDEX FIX */
.cursor {
    width: 10px;
    height: 10px;
    background: var(--primary-blue);
    border-radius: 50%;
    position: fixed;
    top: 0;
    left: 0;
    pointer-events: none;
    z-index: 999999; /* Max Z-Index for safety */
    transform: translate(-50%, -50%);
    transition: transform 0.1s;
}

.cursor-follower {
    width: 40px;
    height: 40px;
    border: 1px solid var(--primary-blue);
    border-radius: 50%;
    position: fixed;
    top: 0;
    left: 0;
    pointer-events: none;
    z-index: 999998; /* Just below dot */
    transform: translate(-50%, -50%);
    transition: transform 0.15s, width 0.3s, height 0.3s, background-color 0.3s;
}

.cursor-hover {
    transform: translate(-50%, -50%) scale(1.8);
    background-color: rgba(197, 248, 42, 0.2); /* Lime tint */
    border-color: var(--accent-lime);
}

.cursor-text-mode {
    width: 5px;
    border-radius: 0;
}

/* TYPOGRAPHY UTILS */
h1, h2, h3, h4 {
    font-family: var(--font-heading);
    font-weight: 600;
}

.highlight-text {
    color: var(--primary-blue);
}

.text-red {
    color: var(--danger);
}

.highlight-lime {
    color: var(--accent-lime);
}

.highlight-purple {
    color: #b084ff;
}

.highlight-stroke {
    -webkit-text-stroke: 1px var(--primary-blue);
    color: transparent;
}

a {
    text-decoration: none;
    color: inherit;
    cursor: none; /* Enforce custom cursor on links */
}

/* NAVIGATION */
nav {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 2rem 4rem;
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    z-index: 100;
}

.logo-wrapper {
    display: flex;
    align-items: center;
}

.logo {
    font-family: var(--font-heading);
    font-size: 2rem;
    font-weight: 700;
    color: var(--primary-blue);
    display: flex;
    align-items: center;
    cursor: none;
    position: relative;
}

.logo .initials {
    transition: opacity 0.3s;
}

/* HACKER TEXT REVEAL STYLE */
.logo .full-name {
    max-width: 0;
    opacity: 0;
    overflow: hidden;
    white-space: nowrap;
    font-size: 1.5rem;
    color: var(--dark-text);
    font-weight: 600;
    font-family: var(--font-mono);
    padding-left: 10px;
    transition: all 0.5s;
    background: var(--accent-lime);
}

.logo:hover .initials {
    display: none;
}

.logo:hover .full-name {
    max-width: 400px;
    opacity: 1;
    padding-right: 10px;
}


.nav-links {
    display: flex;
    gap: 2rem;
    flex-wrap: wrap; 
}

.nav-item {
    font-weight: 500;
    position: relative;
    transition: color 0.3s;
}

.nav-item::after {
    content: '';
    position: absolute;
    width: 0;
    height: 2px;
    bottom: -5px;
    left: 0;
    background-color: var(--primary-blue);
    transition: width 0.3s;
}

.nav-item:hover::after {
    width: 100%;
}

.mobile-menu-btn {
    display: none;
    font-size: 1.5rem;
    cursor: none;
}

/* HERO SECTION */
.hero {
    display: flex;
    min-height: 100vh;
    padding: 0 4rem;
    align-items: center;
    background-color: var(--off-white);
    position: relative;
    overflow: hidden;
    padding-top: 100px; 
}

.hero-content {
    flex: 1;
    z-index: 2;
}

.badge-status {
    display: inline-block;
    background: var(--accent-lime);
    color: var(--dark-text);
    padding: 0.5rem 1rem;
    border-radius: 4px;
    font-weight: 700;
    font-size: 0.8rem;
    margin-bottom: 2rem;
    letter-spacing: 1px;
    box-shadow: 5px 5px 0px var(--dark-text);
}

.hero-title {
    font-size: 4.5rem; 
    line-height: 1.1;
    margin-bottom: 1.5rem;
}

.hero-title .block {
    display: block;
}

.hero-subtitle {
    font-size: 1.2rem;
    max-width: 500px;
    margin-bottom: 2.5rem;
    color: #555;
}

.hero-cta {
    display: flex;
    gap: 1.5rem;
    align-items: center;
    flex-wrap: wrap;
}

.btn-primary {
    background-color: var(--primary-blue);
    color: white;
    padding: 1rem 2rem;
    border-radius: 50px;
    font-weight: 600;
    border: none;
    transition: transform 0.3s, box-shadow 0.3s;
    cursor: none;
}

.btn-primary:hover {
    transform: translateY(-5px);
    box-shadow: 0 10px 20px rgba(45, 52, 226, 0.3);
}

.btn-outline {
    border: 2px solid var(--primary-blue);
    color: var(--primary-blue);
    padding: 1rem 2rem;
    border-radius: 50px;
    font-weight: 600;
    transition: all 0.3s;
    background: transparent;
    cursor: none;
}

.btn-outline:hover {
    background-color: var(--primary-blue);
    color: white;
}

.btn-outline-dark {
    border: 2px solid var(--dark-text);
    color: var(--dark-text);
    padding: 1rem 2rem;
    border-radius: 50px;
    font-weight: 600;
    transition: all 0.3s;
    background: transparent;
    cursor: none;
}

.btn-outline-dark:hover {
    background-color: var(--dark-text);
    color: white;
}

.wisdom-box {
    margin-top: 2rem;
    padding: 1rem;
    background: white;
    border-left: 4px solid var(--accent-lime);
    font-style: italic;
    color: var(--dark-text);
    box-shadow: 0 5px 15px rgba(0,0,0,0.05);
    transition: all 0.3s;
    opacity: 1;
}

.wisdom-box.hidden {
    opacity: 0;
    pointer-events: none;
    transform: translateY(10px);
}

/* HERO VISUAL */
.hero-visual {
    flex: 1;
    position: relative;
    display: flex;
    justify-content: center;
    align-items: center;
}

.geometric-bg {
    position: absolute;
    width: 100%;
    height: 100%;
    z-index: 0;
}

.shape {
    position: absolute;
}

.shape.circle {
    width: 300px;
    height: 300px;
    border-radius: 50%;
    background-color: var(--accent-lime);
    top: 10%;
    right: 10%;
    opacity: 0.5;
    animation: float 6s infinite ease-in-out;
}

.shape.triangle {
    width: 0; 
    height: 0; 
    border-left: 50px solid transparent;
    border-right: 50px solid transparent;
    border-bottom: 100px solid var(--primary-blue);
    top: 20%;
    left: 20%;
    opacity: 0.2;
    transform: rotate(-15deg);
    animation: spin 20s linear infinite;
}

.shape.dots {
    width: 200px;
    height: 200px;
    background-image: radial-gradient(var(--primary-blue) 2px, transparent 2px);
    background-size: 20px 20px;
    bottom: 0;
    left: 10%;
}

.shape.squiggly {
    width: 100px;
    height: 100px;
    border: 5px solid var(--primary-blue);
    top: 50%;
    left: 0;
    transform: rotate(45deg);
}

.profile-card {
    width: 350px;
    height: 450px;
    background-color: var(--primary-blue);
    border-radius: var(--border-radius);
    position: relative;
    z-index: 2;
    overflow: hidden;
    transform: rotate(-5deg);
    transition: transform 0.5s;
    box-shadow: 20px 20px 0px var(--light-gray);
}

.profile-card:hover {
    transform: rotate(0deg) scale(1.02);
}

.profile-card.no-image {
    background: #000;
    display: flex;
    align-items: center;
    justify-content: center;
    color: var(--accent-lime);
    font-family: var(--font-mono);
    border: 2px solid var(--accent-lime);
}

.code-visual-wrapper {
    text-align: center;
    opacity: 0.8;
}

.matrix-lines span {
    display: block;
    font-size: 0.9rem;
    margin: 5px 0;
    opacity: 0.6;
}

.matrix-lines span:nth-child(odd) {
    color: var(--primary-blue);
}

.visual-icon {
    font-size: 4rem;
    margin-top: 2rem;
    color: white;
    animation: float 3s infinite ease-in-out;
}

.card-overlay {
    position: absolute;
    bottom: 0;
    left: 0;
    width: 100%;
    padding: 1rem;
    background: rgba(0,0,0,0.7);
    color: var(--accent-lime);
    font-weight: 700;
    text-align: center;
    transform: translateY(100%);
    transition: transform 0.3s;
    z-index: 3;
}

.profile-card:hover .card-overlay {
    transform: translateY(0);
}

/* GLITCH EFFECT */
.glitch-text {
    position: relative;
}

.glitch-text::before, .glitch-text::after {
    content: attr(data-text);
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background: inherit; /* Use inherited background to match context */
}

/* Specific fix for white text glitches */
.edu-marker.glitch-text::before, .edu-marker.glitch-text::after {
    background: #111; /* Match dark background */
    color: var(--danger);
}

.glitch-text::before {
    left: 2px;
    text-shadow: -1px 0 red;
    clip-path: polygon(0 0, 100% 0, 100% 33%, 0 33%);
    animation: glitch-anim-2 3s infinite linear alternate-reverse;
}

.glitch-text::after {
    left: -2px;
    text-shadow: -1px 0 blue;
    clip-path: polygon(0 67%, 100% 67%, 100% 100%, 0 100%);
    animation: glitch-anim 2.5s infinite linear alternate-reverse;
}

@keyframes glitch-anim {
    0% { clip-path: polygon(0 2%, 100% 2%, 100% 5%, 0 5%); }
    20% { clip-path: polygon(0 15%, 100% 15%, 100% 15%, 0 15%); }
    40% { clip-path: polygon(0 10%, 100% 10%, 100% 20%, 0 20%); }
    60% { clip-path: polygon(0 1%, 100% 1%, 100% 2%, 0 2%); }
    80% { clip-path: polygon(0 33%, 100% 33%, 100% 33%, 0 33%); }
    100% { clip-path: polygon(0 44%, 100% 44%, 100% 44%, 0 44%); }
}
@keyframes glitch-anim-2 {
    0% { clip-path: polygon(0 20%, 100% 20%, 100% 30%, 0 30%); }
    20% { clip-path: polygon(0 50%, 100% 50%, 100% 55%, 0 55%); }
    40% { clip-path: polygon(0 60%, 100% 60%, 100% 60%, 0 60%); }
    60% { clip-path: polygon(0 75%, 100% 75%, 100% 75%, 0 75%); }
    80% { clip-path: polygon(0 80%, 100% 80%, 100% 90%, 0 90%); }
    100% { clip-path: polygon(0 10%, 100% 10%, 100% 15%, 0 15%); }
}

/* MARQUEE */
.marquee-container {
    background-color: var(--primary-blue);
    color: white;
    padding: 1rem 0;
    overflow: hidden;
    white-space: nowrap;
    transform: rotate(-1deg) scale(1.05);
    border-top: 5px solid var(--accent-lime);
    border-bottom: 5px solid var(--accent-lime);
    width: 100vw;
    margin-left: -20px; 
}

.marquee-content {
    display: inline-block;
    animation: marquee 120s linear infinite; 
    font-family: var(--font-heading);
    font-weight: 700;
    font-size: 1.2rem;
    text-transform: uppercase;
    will-change: transform;
}

.marquee-content .divider {
    color: var(--accent-lime);
    margin: 0 1.5rem;
}

@keyframes marquee {
    0% { transform: translateX(0); }
    100% { transform: translateX(-50%); }
}

/* SECTIONS COMMON */
.section-padding {
    padding: 6rem 2rem;
}

.container {
    max-width: var(--container-width);
    margin: 0 auto;
}

.section-header {
    font-size: 3.5rem;
    margin-bottom: 1rem;
    position: relative;
    display: inline-block;
}

.section-header::before {
    content: '';
    position: absolute;
    width: 50px;
    height: 5px;
    background-color: var(--accent-lime);
    top: -10px;
    left: 0;
}

.section-desc {
    font-size: 1.2rem;
    margin-bottom: 3rem;
    color: #666;
    max-width: 600px;
}

/* STATS GRID */
.stats-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(300px, 1fr));
    gap: 2rem;
    margin-bottom: 4rem;
}

.stat-card {
    background: white;
    padding: 2rem;
    border-radius: var(--border-radius);
    box-shadow: 0 10px 30px rgba(0,0,0,0.05);
    transition: transform 0.3s;
    border: 1px solid transparent;
    position: relative;
    overflow: hidden;
}

.stat-card:hover {
    transform: translateY(-10px);
    border-color: var(--primary-blue);
}

.stat-card.highlight-card {
    background-color: var(--primary-blue);
    color: white;
}

.hover-reveal {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background: var(--accent-lime);
    color: var(--dark-text);
    display: flex;
    justify-content: center;
    align-items: center;
    font-weight: 800;
    font-size: 1.5rem;
    opacity: 0;
    transition: opacity 0.3s;
    z-index: 10;
}

.stat-card:hover .hover-reveal {
    opacity: 1;
}

.icon-box {
    font-size: 3rem;
    margin-bottom: 1rem;
}

.stat-card h3 {
    font-size: 1.5rem;
    margin-bottom: 0.5rem;
}

/* METRICS */
.metrics-container {
    background: white;
    padding: 2rem;
    border-radius: var(--border-radius);
    box-shadow: 0 10px 30px rgba(0,0,0,0.05);
}

.metric-item {
    margin-bottom: 1.5rem;
}

.metric-label {
    display: block;
    font-weight: 700;
    margin-bottom: 0.5rem;
}

.progress-bar {
    width: 100%;
    height: 12px;
    background-color: #eee;
    border-radius: 10px;
    overflow: hidden;
}

.fill {
    height: 100%;
    background-color: var(--primary-blue);
    border-radius: 10px;
    width: 0; /* JS animates this */
    transition: width 1.5s cubic-bezier(0.22, 1, 0.36, 1);
}

.fill.red { background-color: var(--danger); }
.fill.yellow { background-color: #FFD700; }
.fill.lime { background-color: var(--accent-lime); }

/* NEW SECTION: EDU (Pain Scale) */
.edu-grid {
    display: flex;
    flex-direction: column;
    gap: 1.5rem;
    max-width: 900px;
    margin: 0 auto;
}

.edu-row {
    background: #222;
    border-radius: 12px;
    overflow: hidden;
    display: flex;
    flex-direction: column;
    border-left: 10px solid transparent;
}

.edu-row.level-1 { border-left-color: var(--accent-lime); }
.edu-row.level-5 { border-left-color: #FFD700; }
.edu-row.level-10 { border-left-color: var(--danger); }
.edu-row.level-death { border-left-color: #fff; background: #000; border: 2px solid var(--danger); }

.edu-marker {
    background: rgba(255,255,255,0.05);
    padding: 0.5rem 1.5rem;
    font-weight: 700;
    text-transform: uppercase;
    font-size: 0.9rem;
    letter-spacing: 1px;
    color: #fff;
}

.edu-row.level-1 .edu-marker { color: var(--accent-lime); }
.edu-row.level-5 .edu-marker { color: #FFD700; }
.edu-row.level-10 .edu-marker { color: var(--danger); }
.edu-row.level-death .edu-marker { color: var(--danger); font-size: 1.2rem; }

.edu-content {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
    padding: 1.5rem;
    gap: 1.5rem;
}

.edu-content.single-col {
    grid-template-columns: 1fr;
}

.edu-item {
    display: flex;
    align-items: center;
    gap: 1rem;
    color: #ddd;
    font-size: 1rem;
}

.edu-icon {
    font-size: 1.5rem;
    width: 40px;
    text-align: center;
}

.edu-item.highlight-red {
    color: var(--danger);
    font-size: 1.1rem;
}

/* NEW SECTION: Polyglot */
.poly-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(250px, 1fr));
    gap: 2rem;
}

.poly-card {
    background: white;
    padding: 2rem;
    border-radius: 12px;
    border: 1px solid #eee;
    transition: transform 0.3s, border-color 0.3s;
    text-align: left;
}

.poly-card:hover {
    transform: translateY(-5px);
    border-color: var(--primary-blue);
    box-shadow: 0 10px 20px rgba(0,0,0,0.05);
}

.poly-card.highlight-border {
    border-color: var(--dark-text);
    background: #fdfdfd;
}

.poly-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-bottom: 1rem;
}

.poly-header i {
    font-size: 2rem;
    color: var(--primary-blue);
}

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

.poly-level {
    display: inline-block;
    background: var(--dark-text);
    color: var(--accent-lime);
    padding: 0.3rem 0.8rem;
    border-radius: 4px;
    font-size: 0.8rem;
    font-weight: 700;
    text-transform: uppercase;
    margin-bottom: 1rem;
}

.poly-card p {
    font-size: 0.95rem;
    color: #666;
}

/* NEW SECTION: Hardware Stack */
.hardware-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));
    gap: 2rem;
}

.hw-card {
    background: white;
    padding: 2rem;
    border-radius: 12px;
    border: 2px solid var(--dark-text);
    box-shadow: 6px 6px 0px rgba(0,0,0,0.1);
    transition: transform 0.2s;
}

.hw-card:hover {
    transform: translate(-3px, -3px);
    box-shadow: 9px 9px 0px rgba(0,0,0,0.1);
}

.hw-visual {
    display: flex;
    justify-content: center;
    align-items: center;
    gap: 1rem;
    margin-bottom: 1.5rem;
    background: #f4f4f9;
    padding: 1rem;
    border-radius: 8px;
}

.hw-icon {
    font-size: 2.5rem;
}

.hw-arrow {
    font-size: 1.5rem;
    color: var(--primary-blue);
}

.hw-card h3 {
    text-align: center;
    margin-bottom: 1rem;
    color: var(--dark-text);
}

.hw-spec {
    background: var(--dark-text);
    color: var(--off-white);
    padding: 0.8rem;
    border-radius: 6px;
    font-family: var(--font-mono);
    font-size: 0.9rem;
    margin-bottom: 1rem;
}

.hw-spec strong {
    color: var(--accent-lime);
}

.hw-card p {
    font-size: 0.95rem;
    line-height: 1.5;
    color: #555;
}

/* COMPARISON TABLE */
.table-responsive {
    overflow-x: auto;
    border-radius: var(--border-radius);
    box-shadow: 0 10px 30px rgba(0,0,0,0.05);
}

.comparison-table {
    width: 100%;
    border-collapse: collapse;
    background: white;
    min-width: 800px;
}

.comparison-table th {
    background: var(--dark-text);
    color: white;
    padding: 1.5rem;
    text-align: left;
    font-family: var(--font-heading);
    font-size: 1.2rem;
}

.comparison-table th small {
    font-size: 0.8rem;
    font-weight: 400;
    color: var(--accent-lime);
    font-family: var(--font-body);
}

.comparison-table td {
    padding: 1.5rem;
    border-bottom: 1px solid #eee;
    vertical-align: top;
}

.comparison-table tr:hover {
    background-color: #f9f9fc;
}

.criteria {
    font-weight: 700;
    color: var(--primary-blue);
    width: 15%;
}

.verdict-row td {
    font-weight: 700;
    text-transform: uppercase;
    font-family: var(--font-heading);
}

.fail { color: var(--danger); }
.pass { color: var(--primary-blue); }
.gold { color: #d4af37; background: rgba(255, 215, 0, 0.1); }

/* SKILLS & SERVICES */
.dark-bg-pattern {
    background-color: #f9f9fc;
    border-top: 1px solid #ddd;
    border-bottom: 1px solid #ddd;
}

.rpg-stats-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(400px, 1fr));
    gap: 2rem;
    margin-bottom: 4rem;
}

.rpg-stat {
    background: white;
    padding: 1.5rem;
    border-radius: 12px;
    border: 2px solid var(--dark-text);
    box-shadow: 5px 5px 0px var(--dark-text);
    transition: transform 0.2s;
}

.rpg-stat:hover {
    transform: translate(-2px, -2px);
    box-shadow: 7px 7px 0px var(--primary-blue);
}

.stat-header {
    display: flex;
    justify-content: space-between;
    margin-bottom: 0.5rem;
    font-weight: 700;
}

.rpg-bar {
    height: 20px;
    background: #333;
    border-radius: 4px;
    padding: 2px;
}

.rpg-fill {
    height: 100%;
    background: var(--primary-blue);
    border-radius: 2px;
    width: 0;
    transition: width 1.5s ease;
    position: relative;
    overflow: hidden;
}

.rpg-fill::after {
    content: '';
    position: absolute;
    top: 0; left: 0; bottom: 0; right: 0;
    background-image: linear-gradient(
        45deg, 
        rgba(255,255,255,.15) 25%, 
        transparent 25%, 
        transparent 50%, 
        rgba(255,255,255,.15) 50%, 
        rgba(255,255,255,.15) 75%, 
        transparent 75%, 
        transparent
    );
    background-size: 20px 20px;
    animation: moveStripes 1s linear infinite;
}

@keyframes moveStripes {
    0% { background-position: 0 0; }
    100% { background-position: 20px 20px; }
}

.rpg-fill.purple { background: #9b59b6; }
.rpg-fill.green { background: var(--accent-lime); color: #000; }
.rpg-fill.red { background: var(--danger); }
.rpg-fill.blue { background: #3498db; }
.rpg-fill.brown { background: #8d6e63; }

.services-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(250px, 1fr));
    gap: 2rem;
    margin-bottom: 4rem;
}

.service-card {
    background: white;
    padding: 2rem;
    border-radius: 16px;
    text-align: center;
    border: 1px solid #eee;
    transition: all 0.3s;
}

.service-card:hover {
    border-color: var(--accent-lime);
    transform: translateY(-10px);
    box-shadow: 0 15px 30px rgba(0,0,0,0.1);
}

.service-icon {
    font-size: 3rem;
    margin-bottom: 1rem;
}

.service-card h3 {
    margin-bottom: 0.5rem;
}

.badges-container {
    display: flex;
    flex-wrap: wrap;
    gap: 1rem;
    justify-content: center;
}

.badge-item {
    background: var(--dark-text);
    color: var(--off-white);
    padding: 0.5rem 1.5rem;
    border-radius: 50px;
    font-weight: 600;
    border: 1px solid transparent;
    transition: all 0.2s;
}

.badge-item:hover {
    background: white;
    color: var(--dark-text);
    border-color: var(--dark-text);
    transform: scale(1.1);
}

/* PROJECTS SECTION */
.projects-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));
    gap: 2rem;
}

.project-card {
    background: white;
    padding: 2rem;
    border-radius: var(--border-radius);
    border: 2px solid #eee;
    transition: all 0.3s;
    position: relative;
    overflow: hidden;
}

.project-card:hover {
    border-color: var(--primary-blue);
    transform: translateY(-10px);
    box-shadow: 0 10px 0px var(--dark-text);
}

.project-card.highlight-border {
    border-color: var(--accent-lime);
}

.project-header {
    display: flex;
    justify-content: space-between;
    align-items: flex-start;
    margin-bottom: 1rem;
}

.project-header h3 {
    font-size: 1.5rem;
    color: var(--dark-text);
}

.project-icon {
    font-size: 2rem;
}

.project-tagline {
    font-style: italic;
    color: #666;
    margin-bottom: 1rem;
}

.project-result {
    font-size: 0.9rem;
    background: #f0f0f5;
    padding: 0.5rem;
    border-radius: 4px;
    margin-bottom: 1.5rem;
}

.project-stack {
    display: flex;
    flex-wrap: wrap;
    gap: 0.5rem;
}

.project-stack span {
    font-size: 0.75rem;
    background: var(--dark-text);
    color: white;
    padding: 0.2rem 0.6rem;
    border-radius: 4px;
    text-transform: uppercase;
}

/* Hybrid Services */
.hybrid-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));
    gap: 2rem;
}

.hybrid-card {
    background: linear-gradient(135deg, #1a1a1a 0%, #2a2a2a 100%);
    color: white;
    padding: 2rem;
    border-radius: 12px;
    border: 1px solid #333;
    transition: transform 0.3s;
}

.hybrid-card:hover {
    transform: scale(1.05);
    border-color: var(--accent-lime);
}

.hybrid-icon {
    font-size: 2.5rem;
    margin-bottom: 1rem;
    text-align: right;
}

.hybrid-card h3 {
    font-size: 1.2rem;
    margin-bottom: 0.5rem;
    color: var(--accent-lime);
}

.hybrid-card p {
    font-size: 0.95rem;
    opacity: 0.8;
}

/* SLA DA ROÇA */
.paper-texture {
    background-color: #fdfbf7;
    background-image: radial-gradient(#d0d0d0 1px, transparent 1px);
    background-size: 20px 20px;
}

.sla-container {
    display: flex;
    flex-direction: column;
    gap: 1.5rem;
    max-width: 900px;
    margin: 0 auto;
}

.sla-card {
    background: white;
    border: 3px double var(--dark-text);
    padding: 2rem;
    position: relative;
    box-shadow: 8px 8px 0px rgba(0,0,0,0.1);
    transition: transform 0.3s;
}

.sla-card:hover {
    transform: translateX(10px);
}

.clause-num {
    font-family: var(--font-mono);
    background: var(--dark-text);
    color: white;
    display: inline-block;
    padding: 0.2rem 0.5rem;
    font-size: 0.8rem;
    margin-bottom: 0.5rem;
    text-transform: uppercase;
}

.sla-card h3 {
    margin-bottom: 0.5rem;
    font-family: var(--font-heading);
}

.sla-card.warning-sla {
    border-color: var(--danger);
}
.sla-card.warning-sla .clause-num {
    background: var(--danger);
}

/* AGROTECH */
.tech-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(250px, 1fr));
    gap: 2rem;
}

.tech-item {
    background: rgba(255, 255, 255, 0.05);
    border: 1px solid rgba(255, 255, 255, 0.2);
    padding: 2rem;
    border-radius: 16px;
    color: white;
    transition: all 0.3s;
}

.tech-item:hover {
    background: rgba(255, 255, 255, 0.1);
    border-color: var(--accent-lime);
    box-shadow: 0 0 15px rgba(197, 248, 42, 0.3);
}

.tech-icon {
    font-size: 3rem;
    margin-bottom: 1rem;
}

.tech-item h3 {
    color: var(--accent-lime);
    margin-bottom: 0.5rem;
}

/* GLOSSARY SECTION */
.glossary-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(450px, 1fr));
    gap: 1.5rem;
}

.glossary-item {
    background: white;
    padding: 1.5rem;
    border-radius: 8px;
    display: flex;
    flex-direction: column;
    border: 2px solid transparent;
    transition: 0.3s;
}

.glossary-item:hover {
    border-color: var(--dark-text);
    box-shadow: 5px 5px 0 rgba(0,0,0,0.2);
}

.term {
    font-family: var(--font-heading);
    font-weight: 700;
    font-size: 1.2rem;
    color: var(--primary-blue);
    margin-bottom: 0.5rem;
}

.definition {
    font-size: 1rem;
    color: #333;
}

/* TRADUTOR DE CLIENTES (NEW STYLES) */
.translator-ui {
    background: white;
    border-radius: 20px;
    box-shadow: 0 20px 40px rgba(0,0,0,0.1);
    display: flex;
    overflow: hidden;
    min-height: 500px;
    border: 1px solid #eee;
}

.translator-sidebar {
    width: 35%;
    background: #f8f8fa;
    border-right: 1px solid #eee;
    display: flex;
    flex-direction: column;
}

.translator-categories {
    padding: 1.5rem;
    border-bottom: 1px solid #eee;
    display: flex;
    flex-wrap: wrap;
    gap: 0.5rem;
}

.t-cat {
    background: white;
    border: 1px solid #ddd;
    padding: 0.5rem 1rem;
    border-radius: 50px;
    font-size: 0.8rem;
    font-weight: 600;
    cursor: none;
    transition: all 0.2s;
    color: #555;
}

.t-cat:hover, .t-cat.active {
    background: var(--primary-blue);
    color: white;
    border-color: var(--primary-blue);
}

.t-cat.active[data-cat="absurd"] {
    background: var(--danger);
    border-color: var(--danger);
}

.translator-quotes-list {
    flex: 1;
    overflow-y: auto;
    padding: 1rem;
}

.t-quote-item {
    padding: 1rem;
    background: white;
    border: 1px solid #eee;
    border-radius: 8px;
    margin-bottom: 0.8rem;
    cursor: none;
    font-size: 0.9rem;
    transition: all 0.2s;
    position: relative;
    padding-left: 2.5rem;
}

.t-quote-item::before {
    content: '💬';
    position: absolute;
    left: 0.8rem;
    top: 1rem;
    font-size: 1rem;
    opacity: 0.5;
}

.t-quote-item:hover {
    transform: translateX(5px);
    border-color: var(--primary-blue);
    box-shadow: 0 5px 15px rgba(0,0,0,0.05);
}

.translator-main {
    flex: 1;
    background: #111;
    padding: 2rem;
    display: flex;
    align-items: center;
    justify-content: center;
    position: relative;
}

/* CRT Screen Effect */
.t-screen-wrapper {
    width: 100%;
    max-width: 600px;
}

.t-screen {
    background: #000;
    border: 4px solid #333;
    border-radius: 12px;
    padding: 2rem;
    font-family: var(--font-mono);
    color: var(--accent-lime);
    position: relative;
    overflow: hidden;
    min-height: 300px;
    box-shadow: 0 0 20px rgba(0,0,0,0.5);
    display: flex;
    flex-direction: column;
}

.t-screen::before {
    content: " ";
    display: block;
    position: absolute;
    top: 0;
    left: 0;
    bottom: 0;
    right: 0;
    background: linear-gradient(rgba(18, 16, 16, 0) 50%, rgba(0, 0, 0, 0.25) 50%), linear-gradient(90deg, rgba(255, 0, 0, 0.06), rgba(0, 255, 0, 0.02), rgba(0, 0, 255, 0.06));
    z-index: 2;
    background-size: 100% 2px, 3px 100%;
    pointer-events: none;
}

.scanline {
    width: 100%;
    height: 100px;
    z-index: 10;
    background: linear-gradient(0deg, rgba(0,0,0,0) 0%, rgba(197, 248, 42, 0.1) 50%, rgba(0,0,0,0) 100%);
    opacity: 0.1;
    position: absolute;
    bottom: 100%;
    animation: scanline 10s linear infinite;
    pointer-events: none;
}

@keyframes scanline {
    0% { bottom: 100%; }
    100% { bottom: -100px; }
}

.t-label {
    font-size: 0.8rem;
    opacity: 0.6;
    margin-bottom: 0.5rem;
}

.t-input-text {
    font-size: 1.1rem;
    color: white;
    margin-bottom: 2rem;
    font-style: italic;
    opacity: 0.9;
}

.t-divider {
    height: 1px;
    background: var(--accent-lime);
    opacity: 0.3;
    margin-bottom: 2rem;
    width: 100%;
}

.t-output-text {
    font-size: 1.3rem;
    font-weight: 700;
    line-height: 1.4;
    text-shadow: 0 0 5px var(--accent-lime);
    min-height: 60px;
}

.t-indicators {
    display: flex;
    gap: 10px;
    margin-top: 15px;
    align-items: center;
}

.led {
    width: 10px;
    height: 10px;
    border-radius: 50%;
    background: #333;
    border: 1px solid #555;
}

.led.red { background: #500; }
.led.yellow { background: #550; }
.led.green { background: #050; }

.t-screen.processing .led.red { animation: blink 0.2s infinite; background: var(--danger); }
.t-screen.success .led.green { background: var(--accent-lime); box-shadow: 0 0 10px var(--accent-lime); }

.model-text {
    margin-left: auto;
    color: #666;
    font-family: var(--font-mono);
    font-size: 0.7rem;
}

/* CONVERSION TABLE */
.conversion-table {
    width: 100%;
    border-collapse: collapse;
    background: white;
    font-family: var(--font-mono);
    min-width: 600px;
}

.conversion-table th {
    background: var(--dark-text);
    color: var(--accent-lime);
    padding: 1rem;
    text-align: left;
    border-bottom: 2px solid var(--accent-lime);
}

.conversion-table td {
    padding: 1rem;
    border-bottom: 1px solid #ddd;
}

.tech-val {
    font-weight: bold;
    color: var(--primary-blue);
}

.conversion-table tr:hover {
    background: #f0f0f0;
}

/* HTTP RAFAEL SECTION */
.http-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(300px, 1fr));
    gap: 2rem;
}

.http-card {
    background: white;
    padding: 2rem;
    border-radius: 8px;
    border: 2px solid #000;
    box-shadow: 8px 8px 0px #000;
    font-family: var(--font-mono);
    position: relative;
    transition: transform 0.2s;
}

.http-card:hover {
    transform: translate(-4px, -4px);
    box-shadow: 12px 12px 0px #000;
}

.code-number {
    font-size: 3rem;
    font-weight: 700;
    margin-bottom: 1rem;
    display: block;
}

.http-card h3 {
    font-family: var(--font-mono);
    margin-bottom: 0.5rem;
}

/* 2. 1914 (PALMEIRAS) */
body.mode-1914 {
    filter: saturate(130%) contrast(110%);
    background-image: url('data:image/svg+xml;utf8,<svg width="100" height="100" viewBox="0 0 100 100" xmlns="http://www.w3.org/2000/svg"><rect width="100" height="100" fill="%230b3d2e"/><path d="M0 0L100 100M100 0L0 100" stroke="%231fa64a" stroke-width="1"/></svg>') !important;
}

body.mode-1914 .highlight-lime {
    color: #b6ffcf !important;
    background-color: #1fa64a !important;
}

body.mode-1914 .green {
    color: #1fa64a !important;
}

body.mode-1914 a,
body.mode-1914 button {
    cursor: url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24"><circle cx="12" cy="12" r="10" fill="%231fa64a"/><path d="M6 12L12 6L18 12L12 18Z" fill="%230b3d2e"/></svg>'), auto !important;
}


/* LIVE METRICS */
.dark-bg {
    background-color: #111;
    color: var(--off-white);
}

.text-white { color: white; }
.text-dark { color: #111; }
.lime-bg { background-color: var(--accent-lime); }
.lime-bg .text-dark { color: #1a1a1a; }
.lime-bg .section-desc { color: #333; }

.metrics-grid-live {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));
    gap: 2rem;
}

.live-card {
    background: #1a1a1a;
    border: 1px solid #333;
    padding: 2rem;
    border-radius: 12px;
    position: relative;
    overflow: hidden;
    transition: all 0.3s;
}

.live-card:hover {
    border-color: var(--accent-lime);
    box-shadow: 0 0 20px rgba(197, 248, 42, 0.1);
}

.live-label {
    font-size: 0.9rem;
    text-transform: uppercase;
    letter-spacing: 1px;
    margin-bottom: 1rem;
    opacity: 0.7;
}

.live-number {
    font-size: 3rem;
    font-weight: 700;
    font-family: var(--font-heading);
    margin-bottom: 0.5rem;
}

.live-number .small-text {
    font-size: 1.5rem;
    opacity: 0.6;
}

.live-status {
    font-size: 0.8rem;
    font-weight: 600;
    display: inline-block;
    padding: 4px 8px;
    background: rgba(255, 255, 255, 0.1);
    border-radius: 4px;
}

.live-status.warning {
    color: #FFD700;
    background: rgba(255, 215, 0, 0.1);
}

.live-status.blinking {
    animation: blink 1s infinite;
    color: var(--danger);
}

@keyframes blink {
    0% { opacity: 1; }
    50% { opacity: 0.3; }
    100% { opacity: 1; }
}

.live-sub {
    font-size: 0.9rem;
    opacity: 0.7;
    margin-top: 5px;
}

/* TIMELINE SECTION */
.timeline-container {
    position: relative;
    max-width: 1000px;
    margin: 0 auto;
    padding: 2rem 0;
}

.timeline-container::after {
    content: '';
    position: absolute;
    width: 4px;
    background-color: var(--accent-lime);
    top: 0;
    bottom: 0;
    left: 50%;
    margin-left: -2px;
}

.timeline-item {
    padding: 10px 40px;
    position: relative;
    width: 50%;
    box-sizing: border-box;
}

.timeline-item:nth-child(odd) {
    left: 0;
    text-align: right;
}

.timeline-item:nth-child(even) {
    left: 50%;
}

.timeline-item::after {
    content: '';
    position: absolute;
    width: 20px;
    height: 20px;
    right: -10px;
    background-color: var(--off-white);
    border: 4px solid var(--primary-blue);
    top: 25px;
    border-radius: 50%;
    z-index: 1;
}

.timeline-item:nth-child(even)::after {
    left: -10px;
}

.timeline-content {
    padding: 20px 30px;
    background-color: #1a1a1a;
    position: relative;
    border-radius: 6px;
    border: 1px solid #333;
    transition: transform 0.3s, border-color 0.3s;
}

.timeline-content:hover {
    transform: scale(1.03);
    border-color: var(--accent-lime);
}

.timeline-year {
    color: var(--accent-lime);
    font-weight: 700;
    display: block;
    margin-bottom: 5px;
}

.timeline-content h3 {
    color: white;
    margin-bottom: 10px;
}

.timeline-content p {
    color: #ccc;
    font-size: 0.95rem;
}

/* CERTIFICATIONS SECTION */
.certs-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(250px, 1fr));
    gap: 2rem;
}

.cert-card {
    border: 4px double var(--light-gray);
    padding: 2rem;
    text-align: center;
    border-radius: 8px;
    background: white;
    transition: 0.3s;
}

.cert-card:hover {
    border-color: var(--primary-blue);
    transform: translateY(-5px);
}

.cert-card.gold {
    border-color: #FFD700;
    background: linear-gradient(to bottom right, #fff, #fffdf0);
}

.cert-badge {
    font-size: 3rem;
    margin-bottom: 1rem;
}

.cert-card h3 {
    font-size: 1.2rem;
    margin-bottom: 0.5rem;
}

.cert-card p {
    font-size: 0.9rem;
    color: #666;
}

/* RIVALS TESTIMONIALS */
.rivals-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(300px, 1fr));
    gap: 2rem;
}

.rival-card {
    background: #2a0000; 
    border: 1px solid #500;
    padding: 2rem;
    border-radius: 8px;
    color: #ffd1d1;
    transition: transform 0.3s;
}

.rival-card:hover {
    border-color: var(--danger);
    transform: rotate(1deg);
}

.rival-quote {
    font-style: italic;
    margin-bottom: 1rem;
    line-height: 1.4;
    font-size: 1.1rem;
}

.rival-name {
    text-align: right;
    font-size: 0.9rem;
    color: var(--danger);
    font-weight: 700;
}


/* NEWS SECTION (New Slider Styles) */
.news-slider-wrapper {
    width: 100%;
    overflow-x: auto;
    padding-bottom: 2rem;
    scrollbar-width: thin;
    scrollbar-color: var(--primary-blue) #e0e0e0;
}

.news-slider-wrapper::-webkit-scrollbar {
    height: 8px;
}

.news-slider-wrapper::-webkit-scrollbar-track {
    background: #e0e0e0;
    border-radius: 4px;
}

.news-slider-wrapper::-webkit-scrollbar-thumb {
    background-color: var(--primary-blue);
    border-radius: 4px;
}

.news-track {
    display: flex;
    gap: 1.5rem;
    width: max-content;
}

.news-slider-item {
    background: #fff;
    padding: 2rem;
    border-radius: var(--border-radius);
    border: 1px solid #e0e0e0;
    color: var(--dark-text);
    transition: all 0.3s;
    width: 350px; 
    white-space: normal; 
    display: flex;
    flex-direction: column;
    justify-content: space-between;
}

.news-slider-item:hover {
    border-color: var(--primary-blue);
    transform: translateY(-5px);
    box-shadow: 0 10px 20px rgba(0,0,0,0.05);
}

.news-tag {
    font-size: 0.8rem;
    text-transform: uppercase;
    letter-spacing: 1px;
    color: var(--primary-blue);
    margin-bottom: 1rem;
    font-weight: 700;
    background: rgba(45, 52, 226, 0.1);
    display: inline-block;
    padding: 0.2rem 0.6rem;
    border-radius: 4px;
    width: fit-content;
}

.news-slider-item h3 {
    font-size: 1.2rem;
    margin-bottom: 1rem;
    line-height: 1.3;
}

.news-footer {
    font-size: 0.8rem;
    color: #888;
    margin-top: auto;
    padding-top: 1rem;
    border-top: 1px solid #f0f0f0;
}

/* HORÓSCOPO SECTION STYLES */
.mystical-bg {
    background: linear-gradient(180deg, #0f0c29, #302b63, #24243e);
    position: relative;
    border-top: 1px solid rgba(255,255,255,0.1);
    border-bottom: 1px solid rgba(255,255,255,0.1);
    overflow: hidden;
}

.mystical-bg::before {
    content: '';
    position: absolute;
    top: 0; left: 0; width: 100%; height: 100%;
    background-image: radial-gradient(white 1px, transparent 1px);
    background-size: 50px 50px;
    opacity: 0.1;
    pointer-events: none;
}

.zodiac-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(150px, 1fr));
    gap: 1.5rem;
    position: relative;
    z-index: 2;
}

.zodiac-card {
    background: rgba(255, 255, 255, 0.05);
    border: 1px solid rgba(255, 255, 255, 0.1);
    border-radius: 16px;
    padding: 2rem;
    text-align: center;
    color: white;
    cursor: pointer;
    transition: all 0.3s;
    backdrop-filter: blur(5px);
}

.zodiac-card:hover {
    transform: translateY(-10px) scale(1.05);
    background: rgba(176, 132, 255, 0.2);
    border-color: #b084ff;
    box-shadow: 0 0 20px rgba(176, 132, 255, 0.3);
}

.zodiac-icon {
    font-size: 3rem;
    margin-bottom: 1rem;
    filter: drop-shadow(0 0 5px rgba(255,255,255,0.5));
}

.zodiac-card h3 {
    font-size: 1rem;
    letter-spacing: 1px;
    text-transform: uppercase;
    font-weight: 700;
}

/* Horoscope Modal/Result */
.horoscope-result {
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background: rgba(15, 12, 41, 0.95);
    z-index: 10002;
    display: flex;
    justify-content: center;
    align-items: center;
    padding: 2rem;
    opacity: 1;
    transition: opacity 0.3s;
}

.horoscope-result.hidden {
    opacity: 0;
    pointer-events: none;
}

.result-content {
    background: #24243e;
    border: 2px solid #b084ff;
    border-radius: 20px;
    padding: 3rem;
    max-width: 600px;
    width: 100%;
    position: relative;
    box-shadow: 0 0 50px rgba(176, 132, 255, 0.2);
    transform: scale(1);
    transition: transform 0.3s cubic-bezier(0.175, 0.885, 0.32, 1.275);
}

.horoscope-result.hidden .result-content {
    transform: scale(0.8);
}

#close-horoscope {
    position: absolute;
    top: 1rem;
    right: 1rem;
    background: transparent;
    border: none;
    color: #b084ff;
    font-size: 1.5rem;
    cursor: pointer;
    font-weight: bold;
    transition: transform 0.2s;
}

#close-horoscope:hover {
    transform: scale(1.2);
    color: white;
}

.horoscope-header {
    text-align: center;
    margin-bottom: 2rem;
    border-bottom: 1px solid rgba(255,255,255,0.1);
    padding-bottom: 1rem;
}

.large-icon {
    font-size: 4rem;
    display: block;
    margin-bottom: 1rem;
    animation: float 4s infinite ease-in-out;
}

.horoscope-header h3 {
    font-size: 2rem;
    color: #b084ff;
    text-transform: uppercase;
    letter-spacing: 2px;
}

.prediction-text {
    font-size: 1.2rem;
    color: white;
    text-align: center;
    margin-bottom: 2rem;
    font-style: italic;
    line-height: 1.6;
}

.lucky-stats {
    display: flex;
    justify-content: space-around;
    flex-wrap: wrap;
    gap: 1rem;
    background: rgba(0,0,0,0.3);
    padding: 1rem;
    border-radius: 10px;
}

.stat-box {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 5px;
}

.stat-label {
    font-size: 0.8rem;
    color: #aaa;
    text-transform: uppercase;
}

.stat-value {
    font-weight: 700;
    color: var(--accent-lime);
    font-size: 1rem;
    text-align: center;
}

/* PRICING PLANS */
.pricing-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(300px, 1fr));
    gap: 2rem;
    align-items: center; 
}

.pricing-card {
    background: white; 
    color: var(--dark-text); 
    padding: 2.5rem;
    border-radius: var(--border-radius);
    border: 1px solid #eee;
    text-align: center;
    transition: transform 0.3s;
    position: relative;
}

.pricing-card.white-theme {
    background: white !important;
    color: #1a1a1a !important;
}

.pricing-card:hover {
    transform: translateY(-10px);
    box-shadow: 0 20px 40px rgba(0,0,0,0.1);
}

.pricing-card.popular {
    border: 2px solid var(--primary-blue);
    transform: scale(1.05);
    z-index: 2;
}

.pricing-card.popular:hover {
    transform: scale(1.08);
}

.pricing-card.enterprise {
    border: 2px solid #000; 
}

.pricing-card.enterprise:hover {
    border-color: var(--accent-lime);
}

.pricing-card h3 {
    font-size: 1.5rem;
    margin-bottom: 1rem;
}

.price {
    font-size: 2.5rem;
    font-weight: 700;
    color: var(--primary-blue);
    margin-bottom: 2rem;
    line-height: 1;
}

.pricing-card.enterprise .price {
    color: #000;
}

.price .small {
    display: block;
    font-size: 0.9rem;
    color: #777;
    margin-top: 5px;
    font-weight: 400;
}

.tag-popular {
    position: absolute;
    top: -15px;
    left: 50%;
    transform: translateX(-50%);
    background: var(--primary-blue);
    color: white;
    padding: 0.3rem 1rem;
    border-radius: 20px;
    font-weight: 700;
    font-size: 0.8rem;
    text-transform: uppercase;
}

.features-list {
    list-style: none;
    margin-bottom: 2rem;
    text-align: left;
}

.features-list li {
    margin-bottom: 0.8rem;
    padding-left: 1.5rem;
    position: relative;
    color: #555;
}

.features-list li i {
    position: absolute;
    left: 0;
    top: 4px;
    color: var(--primary-blue);
}

/* PHILOSOPHY */
.split-layout {
    display: grid;
    grid-template-columns: 1fr 2fr;
    gap: 4rem;
}

.sticky {
    position: sticky;
    top: 100px;
    height: fit-content;
}

.big-text {
    font-size: 1.5rem;
    color: #555;
    margin-bottom: 2rem;
}

.floating-sticker {
    background: white;
    padding: 1rem;
    border-radius: 50px;
    box-shadow: 0 10px 20px rgba(0,0,0,0.1);
    display: inline-flex;
    align-items: center;
    gap: 10px;
    font-weight: 700;
    color: var(--primary-blue);
    animation: float 4s infinite ease-in-out;
}

.commandment-list {
    list-style: none;
}

.commandment-list li {
    font-size: 1.5rem;
    padding: 2rem 0;
    border-bottom: 1px solid #ddd;
    display: flex;
    align-items: baseline;
    transition: padding-left 0.3s;
}

.commandment-list li:hover {
    padding-left: 1rem;
    color: var(--primary-blue);
}

.num {
    font-family: var(--font-heading);
    font-weight: 700;
    color: var(--primary-blue);
    font-size: 1.2rem;
    margin-right: 2rem;
    min-width: 40px;
}

/* FAQ SECTION */
.faq-container {
    max-width: 800px;
    margin: 0 auto;
}

.faq-item {
    background: white;
    margin-bottom: 1rem;
    border-radius: 12px;
    border: 2px solid #000;
    overflow: hidden;
    box-shadow: 5px 5px 0px rgba(0,0,0,0.8);
    transition: transform 0.2s;
}

.faq-item:hover {
    transform: translate(-2px, -2px);
    box-shadow: 7px 7px 0px rgba(0,0,0,0.8);
}

.faq-question {
    width: 100%;
    padding: 1.5rem;
    display: flex;
    justify-content: space-between;
    align-items: center;
    background: none;
    border: none;
    text-align: left;
    font-size: 1.1rem;
    font-weight: 700;
    font-family: var(--font-body);
    color: var(--dark-text);
    cursor: none;
}

.faq-answer {
    max-height: 0;
    overflow: hidden;
    transition: max-height 0.3s ease-out;
    background-color: #f9f9f9;
}

.faq-answer p {
    padding: 1.5rem;
    padding-top: 0;
    line-height: 1.6;
}

.faq-item.active .faq-answer {
    max-height: 200px;
}

.faq-item.active .faq-question i {
    transform: rotate(180deg);
}

.faq-question i {
    transition: transform 0.3s;
}

/* TESTIMONIALS (INFINITE SCROLL) */
.overflow-hidden {
    overflow: hidden;
    width: 100%;
}

.testimonial-slider-container {
    width: 100%;
    position: relative;
    padding-bottom: 2rem;
}

.testimonial-track {
    display: flex;
    gap: 2rem;
    width: max-content;
    animation: scroll-left 60s linear infinite; 
}

/* Pause on hover functionality */
.testimonial-track:hover {
    animation-play-state: paused;
}

.testimonial-card {
    width: 400px; 
    flex-shrink: 0;
    background: white;
    padding: 3rem;
    border-radius: var(--border-radius);
    box-shadow: 10px 10px 0px rgba(0,0,0,0.1);
    display: flex;
    flex-direction: column;
    justify-content: space-between;
    transition: transform 0.3s;
}

.testimonial-card:hover {
    transform: translateY(-5px);
}

.quote {
    font-size: 1.2rem;
    font-family: var(--font-heading);
    margin-bottom: 2rem;
    line-height: 1.4;
}

.author strong {
    display: block;
    font-size: 1.1rem;
}

.author span {
    font-size: 0.9rem;
    color: #666;
}

@keyframes scroll-left {
    0% { transform: translateX(0); }
    100% { transform: translateX(-50%); } 
}

/* RÁDIO DEV CAIPIRA SECTION */
.retro-bg-pattern {
    background-color: #000;
    background-image: 
        linear-gradient(rgba(0, 255, 0, 0.1) 1px, transparent 1px),
        linear-gradient(90deg, rgba(0, 255, 0, 0.1) 1px, transparent 1px);
    background-size: 20px 20px;
    border-top: 5px solid var(--accent-lime);
}

.small-retro {
    font-family: var(--font-retro);
    font-size: 0.8rem;
    vertical-align: middle;
    color: #555;
}

.radio-container {
    max-width: 800px;
    margin: 0 auto;
    background: #333;
    border-radius: 20px;
    padding: 10px;
    box-shadow: 0 20px 50px rgba(0,0,0,0.5);
    border: 4px solid #555;
}

.radio-body {
    background: #222;
    border-radius: 16px;
    padding: 2rem;
    position: relative;
    border: 2px solid #111;
    box-shadow: inset 0 0 30px rgba(0,0,0,0.8);
}

/* Handle */
.radio-handle-area {
    position: absolute;
    top: -50px;
    left: 0;
    width: 100%;
    height: 50px;
    display: flex;
    justify-content: center;
    pointer-events: none;
}

.radio-handle {
    width: 50%;
    height: 30px;
    background: #444;
    border-radius: 10px 10px 0 0;
    border: 4px solid #555;
    border-bottom: none;
}

.radio-antenna {
    position: absolute;
    right: 50px;
    bottom: 0;
    width: 4px;
    height: 150px;
    background: #888;
    transform: rotate(15deg);
    transform-origin: bottom;
    z-index: -1;
}

.radio-antenna::after {
    content: '';
    position: absolute;
    top: -5px;
    left: -3px;
    width: 10px;
    height: 10px;
    background: red;
    border-radius: 50%;
}

/* Interface Layout */
.radio-interface {
    display: flex;
    gap: 2rem;
    margin-bottom: 2rem;
}

.radio-speaker {
    flex: 1;
    background: #151515;
    border-radius: 10px;
    position: relative;
    overflow: hidden;
    border: 2px solid #000;
}

.speaker-mesh {
    width: 100%;
    height: 100%;
    background-image: radial-gradient(#333 20%, transparent 20%);
    background-size: 6px 6px;
    opacity: 0.8;
}

.radio-center {
    flex: 2;
    display: flex;
    flex-direction: column;
    gap: 1.5rem;
}

/* Screen */
.radio-screen {
    background: #000;
    border: 4px solid #555;
    border-radius: 8px;
    padding: 4px;
    position: relative;
    height: 140px;
    overflow: hidden;
    box-shadow: inset 0 0 20px rgba(0,0,0,1);
}

.screen-content {
    background: #0f2a0f; /* Dark green bg */
    height: 100%;
    border-radius: 4px;
    display: flex;
    flex-direction: column;
    padding: 10px;
    color: #33ff33; /* Retro green */
    font-family: var(--font-retro);
    position: relative;
    z-index: 2;
}

.screen-overlay {
    position: absolute;
    top: 0; left: 0; width: 100%; height: 100%;
    background: linear-gradient(rgba(0,0,0,0) 50%, rgba(0,0,0,0.25) 50%);
    background-size: 100% 4px;
    z-index: 5;
    pointer-events: none;
}

.screen-row-top {
    display: flex;
    justify-content: space-between;
    font-size: 0.5rem;
    margin-bottom: 10px;
    opacity: 0.8;
}

.battery-icon {
    color: var(--accent-lime);
}

.screen-main {
    flex: 1;
    display: flex;
    align-items: center;
    overflow: hidden;
    background: #0a1f0a;
    border: 1px solid #33ff33;
    padding: 0 10px;
    margin-bottom: 10px;
}

.scrolling-text {
    white-space: nowrap;
    font-size: 0.7rem;
    animation: radio-scroll 10s linear infinite;
}

@keyframes radio-scroll {
    0% { transform: translateX(100%); }
    100% { transform: translateX(-100%); }
}

.screen-visualizer {
    height: 30px;
    display: flex;
    justify-content: space-between;
    align-items: flex-end;
    gap: 2px;
}

.bar {
    width: 8px;
    background: #33ff33;
    height: 10%;
    transition: height 0.1s;
}

/* Controls */
.radio-controls-area {
    display: flex;
    justify-content: space-between;
    align-items: center;
    background: #2a2a2a;
    padding: 10px;
    border-radius: 8px;
    border: 2px solid #111;
}

/* D-PAD */
.d-pad {
    position: relative;
    width: 90px;
    height: 90px;
}

.d-up, .d-left, .d-right, .d-down, .d-center {
    position: absolute;
    background: #111;
}

.d-center {
    width: 30px;
    height: 30px;
    top: 30px;
    left: 30px;
    z-index: 2;
}

.d-up { width: 30px; height: 30px; top: 0; left: 30px; border-radius: 4px 4px 0 0; }
.d-down { width: 30px; height: 30px; bottom: 0; left: 30px; border-radius: 0 0 4px 4px; }
.d-left { width: 30px; height: 30px; top: 30px; left: 0; border-radius: 4px 0 0 4px; cursor: pointer; }
.d-right { width: 30px; height: 30px; top: 30px; right: 0; border-radius: 0 4px 4px 0; cursor: pointer; }

.d-left:active, .d-right:active {
    background: #333;
}

.d-left::after { content: '◄'; color: #555; position: absolute; top: 6px; left: 6px; font-size: 12px; }
.d-right::after { content: '►'; color: #555; position: absolute; top: 6px; right: 6px; font-size: 12px; }

/* Action Buttons */
.action-buttons {
    display: flex;
    gap: 1.5rem;
}

.btn-group {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 5px;
}

.retro-btn {
    width: 40px;
    height: 40px;
    border-radius: 50%;
    border: none;
    background: #444;
    box-shadow: 0 4px 0 #000;
    color: rgba(255,255,255,0.5);
    font-family: var(--font-retro);
    cursor: pointer;
    transition: all 0.1s;
}

.retro-btn:active {
    transform: translateY(4px);
    box-shadow: 0 0 0 #000;
}

.retro-btn.red {
    background: #cc0000;
    box-shadow: 0 4px 0 #660000;
}

.retro-btn.red:active {
    box-shadow: 0 0 0 #660000;
}

.btn-label {
    font-family: var(--font-retro);
    font-size: 0.6rem;
    color: #888;
}

/* Playlist Drawer */
.radio-playlist-drawer {
    background: #111;
    border-top: 2px solid #444;
    padding: 1rem;
    border-radius: 0 0 8px 8px;
}

.radio-playlist-drawer h3 {
    color: #888;
    font-family: var(--font-retro);
    font-size: 0.8rem;
    margin-bottom: 1rem;
    text-transform: uppercase;
}

.playlist-list {
    list-style: none;
    max-height: 150px;
    overflow-y: auto;
    padding-right: 10px;
}

/* Scrollbar for playlist */
.playlist-list::-webkit-scrollbar { width: 5px; }
.playlist-list::-webkit-scrollbar-track { background: #222; }
.playlist-list::-webkit-scrollbar-thumb { background: #555; }

.playlist-item {
    padding: 8px;
    border-bottom: 1px solid #222;
    color: #aaa;
    font-family: var(--font-mono);
    font-size: 0.9rem;
    cursor: pointer;
    transition: all 0.2s;
    display: flex;
    align-items: center;
}

.playlist-item:hover {
    background: #222;
    color: var(--accent-lime);
}

.playlist-item.active {
    color: #33ff33;
    background: #0f2a0f;
}

.playlist-item i {
    margin-right: 10px;
    font-size: 0.8rem;
}


/* FOOTER */



/* Adicionar para diminuir o modal e melhorar a visibilidade */
#attestation-modal-overlay .modal-content {
    max-width: 700px !important; /* Tamanho reduzido para melhor visualização */
    transform: scale(0.95);
    transform-origin: center center;
}

/* Novo estilo para o campo da assinatura */
.animated-signature {
    display: inline-block;
    white-space: nowrap;
    overflow: hidden;
    animation: typing 1.5s steps(30, end); /* Simula a escrita */
    border-right: 3px solid #1a1a1a; /* Simula o cursor */
    animation: none; /* Desativado inicialmente, controlado por JS */
    font-family: 'Architects Daughter', cursive;
    font-size: 1.5rem;
    color: var(--primary-blue);
}

/* Novo estilo para a área do carimbo */
.stamp-overlay {
    position: absolute;
    width: 100px;
    height: 100px;
    top: -5px; /* Ajuste para centralizar visualmente */
    left: 50%;
    transform: translateX(-50%);
    opacity: 0; /* Começa invisível */
    transition: all 0.3s cubic-bezier(0.175, 0.885, 0.32, 1.275);
}

.stamp-icon {
    font-size: 4rem;
    color: var(--danger);
    transform: rotate(-10deg);
    filter: drop-shadow(0 0 5px rgba(255, 77, 77, 0.5));
}

.footer-end {
    background-color: #000;
    color: white;
    padding: 8rem 2rem 4rem;
    text-align: center;
    border-top: 5px solid var(--danger);
    position: relative;
    z-index: 10;
}

.relative-container {
    position: relative;
}

.end-title {
    font-size: 4rem;
    margin-bottom: 1rem;
    color: var(--danger);
}

.end-subtitle {
    font-size: 1.5rem;
    margin-bottom: 4rem;
    color: #888;
}

.footer-grid {
    display: flex;
    justify-content: center;
    gap: 4rem;
    flex-wrap: wrap;
    margin-bottom: 4rem;
}

.footer-col h4 {
    font-size: 1.2rem;
    margin-bottom: 1.5rem;
    color: var(--accent-lime);
    text-transform: uppercase;
    letter-spacing: 2px;
}

.footer-col a {
    display: block;
    margin-bottom: 1rem;
    font-size: 1.1rem;
    transition: color 0.3s;
    color: #ddd;
}

.footer-col a:hover {
    color: var(--accent-lime);
    text-decoration: underline;
}

.text-fade {
    opacity: 0.6;
    margin-bottom: 0.5rem;
}

.footer-bottom {
    font-size: 0.9rem;
    opacity: 0.4;
    border-top: 1px solid #333;
    padding-top: 2rem;
}

/* MODAL GENERIC */
.modal-overlay {
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background: rgba(0,0,0,0.8);
    z-index: 10000;
    display: flex;
    justify-content: center;
    align-items: center;
    opacity: 0;
    pointer-events: none;
    transition: opacity 0.3s;
}

.modal-overlay.active {
    opacity: 1;
    pointer-events: all;
}

.modal-content {
    background: white;
    padding: 3rem;
    border-radius: var(--border-radius);
    max-width: 500px;
    text-align: center;
    transform: scale(0.8);
    transition: transform 0.3s cubic-bezier(0.175, 0.885, 0.32, 1.275);
    color: var(--dark-text);
}

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

.modal-content h2 {
    color: var(--primary-blue);
    margin-bottom: 1rem;
}

.modal-content p {
    font-size: 1.2rem;
    margin-bottom: 2rem;
}

/* WINDOWS 98 MODAL */
.win98-modal-overlay {
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background: rgba(0,0,0,0.6);
    z-index: 10001;
    display: none;
    justify-content: center;
    align-items: center;
}

.win98-modal-overlay.active {
    display: flex;
}

.win98-window {
    width: 400px;
    background: #c0c0c0;
    border: 2px solid;
    border-color: #fff #808080 #808080 #fff;
    box-shadow: 2px 2px 10px rgba(0,0,0,0.5);
    padding: 2px;
    font-family: 'Tahoma', sans-serif; /* Classic look */
    color: #000;
}

.win98-header {
    background: #000080; /* Windows Blue */
    color: white;
    padding: 4px 6px;
    display: flex;
    justify-content: space-between;
    align-items: center;
    font-weight: bold;
    font-size: 14px;
}

.win98-close-btn {
    background: #c0c0c0;
    border: 1px solid;
    border-color: #fff #808080 #808080 #fff;
    width: 16px;
    height: 14px;
    line-height: 12px;
    font-size: 10px;
    text-align: center;
    font-weight: bold;
    cursor: pointer;
}

.win98-content {
    padding: 20px;
    display: flex;
    gap: 15px;
}

.win98-text-area {
    flex-grow: 1;
}

.win98-text-area p {
    font-size: 12px;
    margin-bottom: 15px;
}

.win98-progress-container {
    height: 20px;
    background: white;
    border: 1px solid;
    border-color: #808080 #fff #fff #808080;
    margin-bottom: 10px;
    position: relative;
}

.win98-progress-bar {
    height: 100%;
    background: #000080;
    width: 0%;
    display: flex;
    align-items: center;
    justify-content: center;
}

/* Blocks inside progress bar (classic style) */
.win98-progress-bar::after {
    content: '';
    width: 100%;
    height: 100%;
    background-image: linear-gradient(90deg, #000080 2px, transparent 2px);
    background-size: 10px 100%;
    opacity: 0.3;
}

.win98-stats {
    font-size: 11px;
    display: flex;
    justify-content: space-between;
}

.win98-footer {
    display: flex;
    justify-content: flex-end;
    padding: 10px;
}

.win98-btn {
    padding: 4px 12px;
    background: #c0c0c0;
    border: 1px solid;
    border-color: #fff #808080 #808080 #fff;
    font-size: 12px;
    cursor: pointer;
}

.win98-btn:active {
    border-color: #808080 #fff #fff #808080;
}

/* NEW FOOTER FEATURES STYLES */

/* Download RAM Link */
.ram-link-glitch {
    font-weight: bold;
    color: var(--accent-lime) !important;
}

/* Excuse Generator */
.excuse-btn {
    background: transparent;
    border: 1px dashed var(--accent-lime);
    color: var(--accent-lime);
    padding: 0.5rem 1rem;
    margin-top: 1rem;
    cursor: pointer;
    font-family: var(--font-mono);
    font-size: 0.8rem;
    transition: all 0.2s;
}

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

.excuse-text {
    margin-top: 0.5rem;
    color: var(--danger);
    font-style: italic;
    font-size: 0.9rem;
    min-height: 20px;
}

/* Accepted Currencies */
.accepted-currencies {
    margin-top: 2rem;
    border-top: 1px solid #333;
    padding-top: 1rem;
}

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

.currency-label {
    display: block;
    font-size: 0.8rem;
    color: #888;
    margin-bottom: 0.5rem;
}

.currency-list {
    display: flex;
    gap: 1rem;
    justify-content: center; /* Alinhado ao centro conforme solicitado */
}

.currency-item {
    font-size: 1.5rem;
    color: white;
    cursor: pointer;
    position: relative;
    transition: color 0.3s;
}

.currency-item:hover {
    color: var(--accent-lime);
}

/* Tooltip for Currency */
.currency-item::after {
    content: attr(data-tooltip);
    position: absolute;
    bottom: 120%;
    left: 50%;
    transform: translateX(-50%);
    background: var(--primary-blue);
    color: white;
    padding: 0.5rem;
    font-size: 0.7rem;
    white-space: nowrap;
    border-radius: 4px;
    opacity: 0;
    pointer-events: none;
    transition: opacity 0.2s;
    font-family: var(--font-body);
}

.currency-item:hover::after {
    opacity: 1;
}

/* Bio-Digital Status Widget */
.status-widget {
    margin-top: 2rem;
    font-family: var(--font-mono);
    font-size: 0.75rem;
    color: #666;
    display: flex;
    flex-direction: column;
    gap: 5px;
    background: #0a0a0a;
    padding: 1rem;
    border: 1px solid #333;
    border-radius: 4px;
}

.status-item {
    cursor: help;
    transition: color 0.3s;
}

.status-item:hover {
    color: white;
}

.status-item .green { color: var(--accent-lime); }
.status-item .red { color: var(--danger); }
.status-item .white { color: white; }

/* Status Hover Logic via JS, simplified CSS transition */
.shake-hover:hover {
    animation: shake 0.5s infinite;
    display: inline-block;
}

@keyframes shake {
    0% { transform: translate(1px, 1px) rotate(0deg); }
    10% { transform: translate(-1px, -2px) rotate(-1deg); }
    20% { transform: translate(-3px, 0px) rotate(1deg); }
    30% { transform: translate(3px, 2px) rotate(0deg); }
    40% { transform: translate(1px, -1px) rotate(1deg); }
    50% { transform: translate(-1px, 2px) rotate(-1deg); }
    60% { transform: translate(-3px, 1px) rotate(0deg); }
    70% { transform: translate(3px, 1px) rotate(-1deg); }
    80% { transform: translate(-1px, -1px) rotate(1deg); }
    90% { transform: translate(1px, 2px) rotate(0deg); }
    100% { transform: translate(1px, -2px) rotate(-1deg); }
}

/* EYES IN DARK */
.eyes-container {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    pointer-events: none; /* Let clicks pass through unless on eye */
    overflow: hidden;
    z-index: 0;
}

.eye-pair {
    position: absolute;
    display: flex;
    gap: 8px;
    opacity: 0;
    transition: opacity 0.5s;
    pointer-events: auto; /* Clickable */
    cursor: pointer;
}

.eye {
    width: 15px; /* Bigger eyes */
    height: 15px; /* Bigger eyes */
    background: #fff;
    border-radius: 50%;
    box-shadow: 0 0 5px #fff;
    animation: blink-eyes 4s infinite;
}

.eye-pair.active {
    opacity: 0.8;
}

@keyframes blink-eyes {
    0%, 90%, 100% { transform: scaleY(1); }
    95% { transform: scaleY(0.1); }
}

/* MANIFESTO P.O.G STYLES */
.blueprint-bg {
    background-color: #002b36;
    background-image: 
        linear-gradient(rgba(255, 255, 255, 0.05) 1px, transparent 1px),
        linear-gradient(90deg, rgba(255, 255, 255, 0.05) 1px, transparent 1px);
    background-size: 20px 20px;
    color: #839496;
    border-top: 10px solid #FFD700; /* Yellow warning tape */
    border-bottom: 10px solid #FFD700;
}

.blueprint-frame {
    border: 2px solid rgba(255,255,255,0.2);
    padding: 2rem;
    position: relative;
    background: rgba(0,0,0,0.2);
    box-shadow: 0 0 30px rgba(0,0,0,0.5);
    transform: rotate(-0.5deg);
}

.blueprint-header {
    font-family: var(--font-mono);
    border-bottom: 2px solid rgba(255,255,255,0.2);
    padding-bottom: 1rem;
    margin-bottom: 2rem;
    display: flex;
    justify-content: space-between;
    align-items: center;
    font-size: 1.5rem;
    color: var(--accent-lime);
}

.stamp {
    border: 3px solid #FF4D4D;
    color: #FF4D4D;
    padding: 0.5rem 1rem;
    font-family: var(--font-heading);
    font-weight: bold;
    text-transform: uppercase;
    transform: rotate(-15deg);
    opacity: 0.8;
    font-size: 1.2rem;
}

.blueprint-intro {
    font-family: var(--font-hand);
    font-size: 1.2rem;
    color: #eee;
    margin-bottom: 2rem;
    text-align: center;
}

.manifesto-list {
    list-style: none;
    font-family: var(--font-mono);
    color: #a7c0cd;
    columns: 2;
    column-gap: 3rem;
}

.manifesto-list li {
    margin-bottom: 1.5rem;
    break-inside: avoid;
    font-size: 0.9rem;
    line-height: 1.4;
    transition: color 0.3s;
}

.manifesto-list li:hover {
    color: white;
}

.manifesto-list strong {
    color: #FFD700;
    margin-right: 5px;
}

@media (max-width: 900px) {
    .manifesto-list {
        columns: 1;
    }
    .blueprint-header {
        flex-direction: column;
        gap: 1rem;
        text-align: center;
        font-size: 1.2rem;
    }
}

/* PANIC BUTTON & EXCEL FAKE */
.panic-btn {
    position: fixed;
    bottom: 20px;
    right: 20px;
    z-index: 100000;
    background: #ff0000;
    color: white;
    border: 4px solid white;
    border-radius: 50px;
    padding: 1rem 1.5rem;
    font-family: var(--font-heading);
    font-weight: bold;
    font-size: 1rem;
    cursor: pointer;
    box-shadow: 0 5px 15px rgba(0,0,0,0.5);
    display: flex;
    align-items: center;
    gap: 10px;
    transition: all 0.2s;
}

.panic-btn:hover {
    transform: scale(1.1);
    background: #cc0000;
}

.panic-btn:active {
    transform: scale(0.95);
}

.excel-overlay {
    position: fixed;
    top: 0;
    left: 0;
    width: 100vw;
    height: 100vh;
    background: #fff;
    z-index: 999990; /* High but below cursor */
    display: flex;
    flex-direction: column;
    font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif;
    color: #000;
}

.excel-overlay.hidden {
    display: none;
}

.excel-header {
    background: #217346;
    color: white;
    padding: 5px 15px;
    display: flex;
    justify-content: space-between;
    font-size: 12px;
}

.excel-controls span {
    margin-left: 10px;
    cursor: pointer;
}

.excel-close:hover {
    background: red;
}

.excel-ribbon {
    background: #f3f2f1;
    border-bottom: 1px solid #e1dfdd;
    padding: 5px 15px;
    display: flex;
    gap: 20px;
    font-size: 14px;
}

.excel-ribbon span.active {
    color: #217346;
    border-bottom: 3px solid #217346;
    padding-bottom: 2px;
    font-weight: 600;
}

.excel-formula-bar {
    display: flex;
    align-items: center;
    padding: 5px;
    background: white;
    border-bottom: 1px solid #e1dfdd;
}

.fx {
    color: #666;
    font-weight: bold;
    margin: 0 10px;
    font-style: italic;
}

.excel-formula-bar input {
    flex: 1;
    border: none;
    padding: 5px;
    font-family: monospace;
}

.excel-grid-container {
    flex: 1;
    overflow: auto;
    background: #fff;
}

.excel-table {
    width: 100%;
    border-collapse: collapse;
    font-size: 14px;
}

.excel-table th, .excel-table td {
    border: 1px solid #d4d4d4;
    padding: 5px 10px;
    white-space: nowrap;
}

.excel-table th {
    background: #f3f2f1;
    font-weight: normal;
    text-align: center;
    color: #333;
}

.row-idx {
    width: 30px;
    background: #f3f2f1;
    text-align: center;
    color: #333;
    font-weight: normal;
}

/* ANIMATIONS */
@keyframes float {
    0% { transform: translateY(0px); }
    50% { transform: translateY(-10px); }
    100% { transform: translateY(0px); }
}

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

/* 3D FLIP SCROLL ANIMATION */
.scroll-reveal {
    opacity: 0;
    transform: perspective(1000px) rotateX(20deg) translateY(50px) scale(0.9);
    transition: all 0.8s cubic-bezier(0.16, 1, 0.3, 1);
    transform-style: preserve-3d;
    will-change: transform, opacity;
}

.scroll-reveal.reveal-active {
    opacity: 1;
    transform: perspective(1000px) rotateX(0deg) translateY(0) scale(1);
}

/* DELAY UTILS */
.delay-100 { transition-delay: 0.1s; }
.delay-200 { transition-delay: 0.2s; }
.delay-300 { transition-delay: 0.3s; }

/* Hidden YouTube Player */
#youtube-audio-player {
    position: absolute;
    width: 1px;
    height: 1px;
    opacity: 0;
    pointer-events: none;
    z-index: -9999;
}

/* RESPONSIVE */
@media (max-width: 900px) {
    .hero {
        flex-direction: column-reverse;
        padding: 6rem 2rem 2rem;
        text-align: center;
    }

    .hero-cta {
        justify-content: center;
        flex-direction: column;
    }
    
    .hero-title {
        font-size: 3rem;
    }

    .end-title {
        font-size: 2.5rem;
    }

    .split-layout {
        grid-template-columns: 1fr;
    }

    .sticky {
        position: static;
        margin-bottom: 2rem;
    }

    .stats-grid, .rpg-stats-grid, .services-grid, .projects-grid, .pricing-grid, .metrics-grid-live, .glossary-grid, .certs-grid, .hybrid-grid, .http-grid, .rivals-grid, .tech-grid, .edu-content, .poly-grid, .hardware-grid {
        grid-template-columns: 1fr;
    }

    .comparison-table th, .comparison-table td {
        padding: 1rem;
    }

    .nav-links {
        display: none; 
        position: fixed;
        top: 80px;
        left: 0;
        width: 100%;
        background: white;
        flex-direction: column;
        padding: 2rem;
        box-shadow: 0 10px 20px rgba(0,0,0,0.1);
    }
    
    .mobile-menu-btn {
        display: block;
    }

    nav.mobile-open .nav-links {
        display: flex;
    }
    
    .profile-card {
        width: 300px;
        height: 380px;
        margin-bottom: 2rem;
    }

    .testimonial-card {
        width: 300px;
        padding: 2rem;
    }
    
    /* Footer adjustments for mobile */
    .footer-col {
        text-align: center;
        align-items: center;
        display: flex;
        flex-direction: column;
    }

    .currency-list {
        justify-content: center;
    }
    
    .translator-ui {
        flex-direction: column;
    }
    
    .translator-sidebar {
        width: 100%;
        max-height: 200px;
        overflow-y: auto;
    }
    
    /* Radio responsive */
    .radio-interface {
        flex-direction: column;
    }
    .radio-speaker {
        height: 50px;
    }
}


/* QUIZ - VOCÊ É DIGNO DE SER MEU ESTAGIÁRIO? */

#quiz-estagiario {
  position: relative;
  background-color: #0b1020; /* azul bem escuro */
}

#quiz-estagiario .section-desc {
  max-width: 700px;
}

.quiz-layout {
  display: grid;
  grid-template-columns: minmax(260px, 320px) minmax(0, 1fr);
  gap: 2rem;
  align-items: stretch;
}

.quiz-layout .interact-card {
  background: #111;
  color: #c6c6da;
  border-radius: 16px;
  border: 2px solid rgba(255, 255, 255, 0.08);
  box-shadow: 0 18px 40px rgba(0, 0, 0, 0.7);
}

/* HUD */

.quiz-hud {
  display: flex;
  flex-direction: column;
  gap: 1.5rem;
  padding: 1.5rem;
}

.quiz-hud-header {
  display: flex;
  flex-wrap: wrap;
  gap: 0.5rem;
  justify-content: space-between;
  align-items: center;
}

.quiz-chip {
  font-family: var(--font-mono);
  font-size: 0.75rem;
  padding: 0.3rem 0.7rem;
  border-radius: 999px;
  border: 1px solid rgba(255, 255, 255, 0.2);
  text-transform: uppercase;
  letter-spacing: 1px;
  background: rgba(0, 0, 0, 0.5);
}

.quiz-chip-danger {
  border-color: var(--danger);
  color: var(--danger);
}

/* Meter */

.quiz-meter {
  margin-top: 0.5rem;
}

.quiz-meter-label {
  display: block;
  font-size: 0.75rem;
  text-transform: uppercase;
  letter-spacing: 1px;
  opacity: 0.7;
  margin-bottom: 0.4rem;
}

.quiz-meter-bar {
  width: 100%;
  height: 14px;
  border-radius: 999px;
  background: linear-gradient(90deg, #222, #333);
  overflow: hidden;
  border: 1px solid #444;
  position: relative;
}

.quiz-meter-fill {
  height: 100%;
  width: 0;
  transition: width 0.7s cubic-bezier(0.16, 1, 0.3, 1);
  background: linear-gradient(90deg, #4caf50, #c5f82a);
  box-shadow: 0 0 10px rgba(197, 248, 42, 0.6);
}

.quiz-meter-fill.low {
  background: linear-gradient(90deg, #ff4d4d, #ff9800);
}

.quiz-meter-fill.mid {
  background: linear-gradient(90deg, #ff9800, #c5f82a);
}

.quiz-meter-fill.high {
  background: linear-gradient(90deg, #00e676, #c5f82a);
}

.quiz-meter-stops {
  display: flex;
  justify-content: space-between;
  font-size: 0.65rem;
  opacity: 0.6;
  margin-top: 0.3rem;
}

/* Progress */

.quiz-progress {
  display: flex;
  justify-content: space-between;
  align-items: baseline;
  margin-top: 1rem;
}

.quiz-progress-label {
  font-size: 0.8rem;
  text-transform: uppercase;
  letter-spacing: 1px;
  opacity: 0.7;
}

.quiz-progress-value {
  font-family: var(--font-mono);
  font-size: 0.9rem;
}

/* Oracle */

.quiz-oracle {
  margin-top: 0.5rem;
  border-radius: 10px;
  background: radial-gradient(circle at top, #1a1a1a, #000);
  border: 1px solid #333;
  display: flex;
  flex-direction: column;
  height: 180px;
  overflow: hidden;
}

.quiz-oracle-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 0.5rem 0.75rem;
  border-bottom: 1px solid rgba(255, 255, 255, 0.08);
  background: linear-gradient(90deg, #111, #222);
}

.quiz-oracle-title {
  font-family: var(--font-mono);
  font-size: 0.75rem;
  text-transform: uppercase;
  letter-spacing: 1px;
  color: var(--accent-lime);
}

.quiz-oracle-leds {
  display: flex;
  gap: 6px;
}

.q-led {
  width: 8px;
  height: 8px;
  border-radius: 50%;
  border: 1px solid #222;
  box-shadow: 0 0 4px rgba(0, 0, 0, 0.9);
}

.q-led-red {
  background: #ff4d4d;
}

.q-led-yellow {
  background: #ffeb3b;
}

.q-led-green {
  background: #4caf50;
}

.quiz-oracle-screen {
  flex: 1;
  padding: 0.5rem 0.75rem;
  font-family: var(--font-mono);
  font-size: 0.8rem;
  color: #c5f82a;
  overflow-y: auto;
}

.quiz-oracle-line {
  margin-bottom: 0.25rem;
  white-space: nowrap;
  text-overflow: ellipsis;
  overflow: hidden;
}

.quiz-oracle-muted {
  opacity: 0.7;
}

.quiz-oracle-good {
  color: #c5f82a;
}

.quiz-oracle-bad {
  color: #ff4d4d;
}

/* Rage button */

.quiz-rage-btn {
  margin-top: auto;
  width: 100%;
  font-size: 0.8rem;
}

/* Card principal */

.quiz-card {
  padding: 2rem;
  display: flex;
  flex-direction: column;
  gap: 1.5rem;
  background: radial-gradient(circle at top left, #222, #050505);
}

.quiz-question-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  font-family: var(--font-mono);
  font-size: 0.8rem;
  text-transform: uppercase;
  letter-spacing: 1px;
  color: #888;
}

.quiz-question-tag {
  padding: 0.2rem 0.6rem;
  border-radius: 999px;
  border: 1px solid rgba(255, 255, 255, 0.15);
}

.quiz-question-id {
  color: var(--accent-lime);
}

.quiz-question-text {
  font-size: 1.4rem;
  color: #fff;
  margin: 0;
}

.quiz-options {
  display: flex;
  flex-direction: column;
  gap: 0.8rem;
}

.quiz-option {
  width: 100%;
  border-radius: 12px;
  border: 1px solid rgba(255, 255, 255, 0.15);
  background: rgba(0, 0, 0, 0.5);
  color: #f4f4f9;
  padding: 0.75rem 1rem;
  display: flex;
  align-items: flex-start;
  gap: 0.75rem;
  cursor: none;
  text-align: left;
  transition: all 0.2s ease;
  position: relative;
  overflow: hidden;
}

.quiz-option::after {
  content: "";
  position: absolute;
  inset: 0;
  background: linear-gradient(120deg, transparent, rgba(197, 248, 42, 0.08), transparent);
  transform: translateX(-100%);
  transition: transform 0.3s ease;
}

.quiz-option:hover::after {
  transform: translateX(0);
}

.quiz-option-label {
  font-family: var(--font-mono);
  color: var(--accent-lime);
  min-width: 2.2rem;
}

.quiz-option-text {
  font-size: 0.95rem;
}

/* estados */

.quiz-option.selected {
  border-color: var(--primary-blue);
  box-shadow: 0 0 0 1px rgba(45, 52, 226, 0.5);
}

.quiz-option.correct {
  border-color: var(--accent-lime);
  background: linear-gradient(90deg, rgba(0, 100, 0, 0.7), rgba(0, 0, 0, 0.8));
}

.quiz-option.wrong {
  border-color: var(--danger);
  background: linear-gradient(90deg, rgba(80, 0, 0, 0.7), rgba(0, 0, 0, 0.8));
}

/* Footer */

.quiz-footer {
  display: flex;
  gap: 1rem;
  justify-content: flex-end;
  align-items: center;
  margin-top: auto;
  flex-wrap: wrap;
}

.quiz-nav-btn,
.quiz-finish-btn {
  min-width: 130px;
}

.quiz-finish-btn.hidden,
#quiz-next.hidden {
  display: none;
}

/* Resultado overlay */

.quiz-result-overlay {
  position: fixed;
  inset: 0;
  background: rgba(0, 0, 0, 0.92);
  z-index: 10001;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 2rem;
  opacity: 1;
  transition: opacity 0.3s ease;
}

.quiz-result-overlay.hidden {
  opacity: 0;
  pointer-events: none;
}

.quiz-result-window {
  max-width: 480px;
  width: 100%;
  background: radial-gradient(circle at top, #1d1d1d, #000);
  border-radius: 20px;
  border: 2px solid var(--accent-lime);
  padding: 2rem;
  position: relative;
  text-align: center;
  box-shadow: 0 0 40px rgba(197, 248, 42, 0.4);
}

.quiz-result-close {
  position: absolute;
  top: 0.8rem;
  right: 0.8rem;
  border: none;
  background: transparent;
  color: var(--accent-lime);
  font-weight: bold;
  font-size: 1.2rem;
  cursor: pointer;
}

.quiz-result-title {
  font-size: 1.4rem;
  margin-bottom: 0.5rem;
  color: var(--accent-lime);
}

.quiz-result-rank {
  font-weight: 700;
  margin-bottom: 0.5rem;
  color: #fff;
}

.quiz-result-text {
  font-size: 0.95rem;
  color: #ccc;
  margin-bottom: 1.5rem;
}

.quiz-result-badges {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: 0.5rem;
  margin-bottom: 1.5rem;
}

.quiz-result-badge {
  font-family: var(--font-mono);
  font-size: 0.75rem;
  padding: 0.35rem 0.8rem;
  border-radius: 999px;
  border: 1px dashed rgba(197, 248, 42, 0.7);
  color: var(--accent-lime);
}

.quiz-retry-btn {
  width: 100%;
}

/* Responsivo */

@media (max-width: 900px) {
  .quiz-layout {
    grid-template-columns: 1fr;
  }

  .quiz-hud {
    order: 2;
  }

  .quiz-card {
    order: 1;
  }
}

/* TABELA PERIÓDICA STYLES */
:root {
    --color-agro: #C5F82A;   /* Lime */
    --color-tech: #00d2ff;   /* Cyan */
    --color-minas: #ff9d00;  /* Orange/Cheese */
    --color-chaos: #ff0055;  /* Pink/Red */
    --glass-bg: rgba(255, 255, 255, 0.05);
}

.sci-fi-bg {
    background-color: #050505;
    background-image: 
        linear-gradient(rgba(0, 210, 255, 0.03) 1px, transparent 1px),
        linear-gradient(90deg, rgba(0, 210, 255, 0.03) 1px, transparent 1px);
    background-size: 30px 30px;
    border-top: 1px solid rgba(255,255,255,0.1);
    position: relative;
}

.highlight-cyan {
    color: var(--color-tech);
    text-shadow: 0 0 10px rgba(0, 210, 255, 0.5);
}

.periodic-layout {
    display: grid;
    grid-template-columns: 2fr 1fr;
    gap: 2rem;
    align-items: start;
}

/* Grid de Elementos */
.periodic-grid {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(80px, 1fr));
    gap: 10px;
}

.element-card {
    background: var(--glass-bg);
    border: 1px solid rgba(255,255,255,0.1);
    aspect-ratio: 1/1;
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    padding: 5px;
    cursor: pointer;
    transition: all 0.2s;
    position: relative;
    overflow: hidden;
}

.element-card:hover {
    transform: scale(1.1);
    z-index: 10;
    box-shadow: 0 0 15px currentColor;
    border-color: currentColor;
    background: rgba(0,0,0,0.8);
}

/* Categorias Cores */
.cat-agro { color: var(--color-agro); border-color: rgba(197, 248, 42, 0.3); }
.cat-tech { color: var(--color-tech); border-color: rgba(0, 210, 255, 0.3); }
.cat-minas { color: var(--color-minas); border-color: rgba(255, 157, 0, 0.3); }
.cat-chaos { color: var(--color-chaos); border-color: rgba(255, 0, 85, 0.3); }

.atom-num {
    font-size: 0.6rem;
    position: absolute;
    top: 5px;
    left: 5px;
    opacity: 0.7;
}

.atom-symbol {
    font-family: var(--font-heading);
    font-size: 1.5rem;
    font-weight: 700;
}

.atom-name {
    font-size: 0.55rem;
    text-transform: uppercase;
    margin-top: 2px;
    text-align: center;
    width: 100%;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

/* Painel Inspector */
.element-inspector {
    position: sticky;
    top: 100px;
    background: #0a0a0a;
    border: 2px solid #333;
    border-radius: 12px;
    padding: 1.5rem;
    min-height: 400px;
    box-shadow: 0 0 30px rgba(0,0,0,0.5);
    display: flex;
    flex-direction: column;
}

.inspector-header {
    display: flex;
    justify-content: space-between;
    border-bottom: 1px solid #333;
    padding-bottom: 0.5rem;
    margin-bottom: 1.5rem;
    color: #666;
    font-family: var(--font-mono);
    font-size: 0.8rem;
}

.fa-spin-slow {
    animation: spin 10s linear infinite;
}

.empty-state {
    text-align: center;
    color: #444;
    margin-top: 3rem;
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 1rem;
}

.pulse-icon {
    font-size: 3rem;
    animation: pulse 2s infinite;
}

/* Dados do Inspector */
.inspector-data {
    animation: fadeIn 0.3s ease-in;
}

.inspector-data.hidden {
    display: none;
}

.insp-top {
    display: flex;
    justify-content: space-between;
    align-items: baseline;
    margin-bottom: 0.5rem;
}

.insp-number {
    font-family: var(--font-mono);
    font-size: 1.2rem;
    color: #888;
}

.insp-symbol {
    font-family: var(--font-heading);
    font-size: 4rem;
    font-weight: 700;
    line-height: 1;
}

.insp-name {
    font-size: 1.8rem;
    color: white;
    margin-bottom: 0.2rem;
}

.insp-category {
    display: inline-block;
    font-size: 0.7rem;
    text-transform: uppercase;
    letter-spacing: 2px;
    background: #222;
    padding: 2px 8px;
    border-radius: 4px;
    margin-bottom: 1.5rem;
    color: #aaa;
}

.insp-desc {
    color: #ccc;
    font-size: 1rem;
    line-height: 1.6;
    margin-bottom: 2rem;
    border-left: 3px solid #333;
    padding-left: 1rem;
}

.insp-stats {
    background: #111;
    padding: 1rem;
    border-radius: 8px;
}

.stat-row {
    margin-bottom: 0.8rem;
}

.stat-row span {
    display: block;
    font-size: 0.7rem;
    color: #666;
    margin-bottom: 4px;
    text-transform: uppercase;
}

.stat-bar {
    height: 6px;
    background: #222;
    border-radius: 3px;
    overflow: hidden;
}

.stat-fill {
    height: 100%;
    background: #fff;
    border-radius: 3px;
    animation: fillBar 1s ease-out;
}

@keyframes fillBar {
    from { width: 0; }
}

@keyframes pulse {
    0% { opacity: 0.3; transform: scale(0.95); }
    50% { opacity: 0.7; transform: scale(1.05); }
    100% { opacity: 0.3; transform: scale(0.95); }
}

@keyframes fadeIn {
    from { opacity: 0; transform: translateY(10px); }
    to { opacity: 1; transform: translateY(0); }
}

/* Responsividade Tabela */
@media (max-width: 900px) {
    .periodic-layout {
        grid-template-columns: 1fr;
    }

    .element-inspector {
        order: -1; /* Inspector em cima no mobile */
        min-height: auto;
        position: relative;
        top: 0;
        margin-bottom: 2rem;
    }
    
    .periodic-grid {
        grid-template-columns: repeat(auto-fill, minmax(60px, 1fr));
    }
    
    .atom-symbol { font-size: 1.2rem; }
}


/* GOTHIC / HOLY SECTION STYLES */
.gothic-bg {
    background-color: #0c0214; /* Deep purple/black */
    background-image: 
        linear-gradient(rgba(255, 215, 0, 0.03) 1px, transparent 1px),
        linear-gradient(90deg, rgba(255, 215, 0, 0.03) 1px, transparent 1px),
        radial-gradient(circle at 50% 0, #2d0042 0%, transparent 60%);
    background-size: 40px 40px, 40px 40px, 100% 100%;
    position: relative;
    border-top: 4px solid #FFD700;
    border-bottom: 4px solid #FFD700;
}

.text-gold {
    color: #FFD700;
    text-shadow: 0 0 10px rgba(255, 215, 0, 0.5);
}

.text-gold-dim {
    color: #c5a000;
}

.highlight-white {
    color: white;
    text-shadow: 0 0 15px white;
}

.altar-header {
    text-align: center;
    margin-bottom: 3rem;
}

.holy-icon {
    font-size: 3rem;
    margin-bottom: 1rem;
    animation: float 5s infinite ease-in-out;
}

/* CANDLES */
.candles-container {
    display: flex;
    justify-content: center;
    gap: 20px;
    margin-bottom: 3rem;
    height: 40px;
}

.candle {
    width: 12px;
    height: 30px;
    background: #eee;
    border-radius: 4px;
    position: relative;
    cursor: pointer;
    transition: height 0.3s;
}

.candle::before {
    content: '';
    position: absolute;
    top: -15px;
    left: 50%;
    transform: translateX(-50%);
    width: 10px;
    height: 10px;
    background: #ff9800;
    border-radius: 50% 50% 20% 20%;
    box-shadow: 0 0 10px #ff9800, 0 0 20px #ff4d4d;
    animation: flicker 0.1s infinite alternate;
    opacity: 0.3; /* Off state */
    transition: opacity 0.3s;
}

.candle.lit::before {
    opacity: 1;
}

.candle:hover {
    height: 35px;
}

@keyframes flicker {
    0% { transform: translateX(-50%) scale(1); opacity: 0.9; }
    100% { transform: translateX(-50%) scale(1.1); opacity: 1; }
}

/* STAINED GLASS GRID */
.stained-glass-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));
    gap: 2rem;
}

.prayer-card {
    background: rgba(20, 0, 30, 0.8);
    border: 2px solid #554400;
    border-radius: 12px 12px 0 0; /* Arch shape suggestion */
    overflow: hidden;
    position: relative;
    transition: all 0.4s;
    box-shadow: 0 0 15px rgba(0,0,0,0.8);
    display: flex;
    flex-direction: column;
}

.prayer-card.wide {
    grid-column: span 2;
}

@media (max-width: 768px) {
    .prayer-card.wide {
        grid-column: span 1;
    }
}

.prayer-card:hover {
    transform: translateY(-10px);
    border-color: #FFD700;
    box-shadow: 0 0 30px rgba(255, 215, 0, 0.2);
}

.prayer-visual {
    height: 120px;
    display: flex;
    justify-content: center;
    align-items: center;
    position: relative;
    overflow: hidden;
}

.prayer-symbol {
    font-size: 3rem;
    z-index: 2;
    text-shadow: 0 0 10px black;
}

/* Specific Backgrounds */
.glitch-bg { background: linear-gradient(45deg, #000044, #000088); }
.glitch-bg::after {
    content: '010101';
    position: absolute;
    width: 100%; height: 100%;
    background: url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" width="40" height="40" viewBox="0 0 40 40"><text x="0" y="20" fill="rgba(255,255,255,0.1)">10</text></svg>');
    opacity: 0.3;
}

.tape-bg { background: #333; }
.tape-bg::before {
    content: '';
    position: absolute;
    width: 120%;
    height: 20px;
    background: #bbb;
    transform: rotate(-10deg);
    opacity: 0.5;
    box-shadow: 0 2px 5px rgba(0,0,0,0.5);
}

.coffee-bg { background: radial-gradient(circle, #3e2723, #1a0000); }
.shield-bg { background: radial-gradient(circle, #0d47a1, #000); }
.dragon-bg { background: linear-gradient(to right, #800000, #330000); }

.prayer-content {
    padding: 1.5rem;
    flex: 1;
    display: flex;
    flex-direction: column;
    justify-content: space-between;
    background: linear-gradient(to bottom, rgba(0,0,0,0.8), rgba(0,0,0,1));
    border-top: 1px solid #554400;
}

.prayer-content h3 {
    color: #FFD700;
    font-family: var(--font-heading);
    margin-bottom: 0.5rem;
    font-size: 1.1rem;
}

.prayer-preview {
    color: #aaa;
    font-style: italic;
    font-size: 0.9rem;
    margin-bottom: 1.5rem;
    font-family: var(--font-body);
}

.btn-pray {
    width: 100%;
    background: transparent;
    border: 1px solid #FFD700;
    color: #FFD700;
    padding: 0.5rem;
    font-family: var(--font-mono);
    text-transform: uppercase;
    cursor: pointer;
    transition: all 0.3s;
}

.btn-pray:hover {
    background: #FFD700;
    color: #000;
    box-shadow: 0 0 15px #FFD700;
}

/* PRAYER MODAL */
.prayer-modal-overlay {
    position: fixed;
    top: 0; left: 0; width: 100%; height: 100%;
    background: rgba(0,0,0,0.95);
    z-index: 20000;
    display: flex;
    justify-content: center;
    align-items: center;
    opacity: 0;
    pointer-events: none;
    transition: opacity 0.5s;
    backdrop-filter: blur(5px);
}

.prayer-modal-overlay.active {
    opacity: 1;
    pointer-events: all;
}

.prayer-scroll {
    width: 90%;
    max-width: 600px;
    background: #fffdf0; /* Parchment color */
    color: #2c1a0c;
    border-radius: 4px;
    box-shadow: 0 0 50px rgba(255, 215, 0, 0.3);
    display: flex;
    flex-direction: column;
    max-height: 90vh;
    transform: translateY(50px) scale(0.9);
    transition: transform 0.5s cubic-bezier(0.34, 1.56, 0.64, 1);
    background-image: url('data:image/svg+xml;utf8,<svg width="100" height="100" viewBox="0 0 100 100" xmlns="http://www.w3.org/2000/svg"><g fill="%23d4af37" fill-opacity="0.05"><path d="M50 0 L100 50 L50 100 L0 50 Z" /></g></svg>');
}

.prayer-modal-overlay.active .prayer-scroll {
    transform: translateY(0) scale(1);
}

.prayer-scroll-header {
    padding: 1.5rem;
    background: #2c1a0c;
    color: #FFD700;
    display: flex;
    justify-content: space-between;
    align-items: center;
    border-bottom: 4px solid #FFD700;
}

.prayer-scroll-header h2 {
    font-family: var(--font-heading);
    font-size: 1.5rem;
}

#close-prayer-modal {
    background: transparent;
    border: none;
    color: #FFD700;
    font-size: 1.5rem;
    cursor: pointer;
}

.prayer-scroll-body {
    padding: 2rem;
    overflow-y: auto;
    font-family: 'Garamond', serif; /* Classic vibe */
    font-size: 1.2rem;
    line-height: 1.8;
    text-align: justify;
}

.holy-text-container {
    border-left: 3px solid #d4af37;
    padding-left: 1.5rem;
}

.prayer-scroll-footer {
    padding: 1.5rem;
    border-top: 1px solid #d4af37;
    background: #f7f2e0;
    text-align: center;
    display: flex;
    flex-direction: column;
    gap: 1rem;
}

.amen-meter {
    width: 100%;
    height: 6px;
    background: #ccc;
    border-radius: 3px;
    overflow: hidden;
}

.amen-fill {
    height: 100%;
    width: 0%;
    background: #28a745;
    transition: width 0.1s linear;
}

.btn-amen {
    background: #2c1a0c;
    color: #666;
    border: none;
    padding: 1rem 2rem;
    font-size: 1.1rem;
    font-weight: bold;
    cursor: not-allowed;
    transition: all 0.3s;
    font-family: var(--font-heading);
}

.btn-amen.ready {
    background: #28a745;
    color: white;
    cursor: pointer;
    box-shadow: 0 5px 15px rgba(40, 167, 69, 0.4);
    animation: pulse-green 1.5s infinite;
}

@keyframes pulse-green {
    0% { transform: scale(1); }
    50% { transform: scale(1.05); }
    100% { transform: scale(1); }
}


/* ANATOMIA COMPARADA STYLES */

.scanner-bg {
    background-color: #051e22; /* Dark Teal/Black */
    background-image: 
        linear-gradient(rgba(0, 255, 200, 0.05) 1px, transparent 1px),
        linear-gradient(90deg, rgba(0, 255, 200, 0.05) 1px, transparent 1px);
    background-size: 40px 40px;
    position: relative;
    overflow: hidden;
    border-top: 2px solid var(--accent-lime);
    border-bottom: 2px solid var(--color-tech);
}

.highlight-cyan {
    color: #00f2ff;
}

.anatomy-interface {
    background: rgba(0, 20, 20, 0.9);
    border: 1px solid #00f2ff;
    border-radius: 12px;
    box-shadow: 0 0 30px rgba(0, 242, 255, 0.1);
    overflow: hidden;
    display: flex;
    flex-direction: column;
    min-height: 600px;
}

/* Scanner Header */
.scanner-header {
    background: rgba(0, 242, 255, 0.1);
    padding: 10px 20px;
    display: flex;
    justify-content: space-between;
    border-bottom: 1px solid #00f2ff;
    font-family: var(--font-mono);
    font-size: 0.8rem;
    color: #00f2ff;
}

.blink-dot {
    display: inline-block;
    width: 8px;
    height: 8px;
    background: #00f2ff;
    border-radius: 50%;
    margin-right: 5px;
    animation: blink 1s infinite;
}

/* Nav Tabs */
.anatomy-nav {
    display: flex;
    flex-wrap: wrap;
    background: #021a1d;
    border-bottom: 1px solid #333;
}

.anatomy-tab {
    flex: 1;
    background: transparent;
    border: none;
    padding: 1rem;
    color: #888;
    font-family: var(--font-heading);
    font-size: 0.9rem;
    cursor: pointer;
    transition: all 0.3s;
    border-right: 1px solid #333;
    white-space: nowrap;
}

.anatomy-tab:hover {
    background: rgba(255, 255, 255, 0.05);
    color: white;
}

.anatomy-tab.active {
    background: rgba(0, 242, 255, 0.15);
    color: #00f2ff;
    border-bottom: 2px solid #00f2ff;
}

/* Main Area */
.anatomy-main {
    flex: 1;
    display: flex;
}

/* Sidebar List */
.anatomy-list {
    width: 250px;
    background: rgba(0, 0, 0, 0.3);
    border-right: 1px solid #333;
    overflow-y: auto;
    padding: 1rem 0;
}

.anatomy-item-btn {
    display: block;
    width: 100%;
    text-align: left;
    padding: 1rem 1.5rem;
    background: transparent;
    border: none;
    color: #ccc;
    font-family: var(--font-mono);
    font-size: 0.85rem;
    cursor: pointer;
    transition: all 0.2s;
    border-left: 3px solid transparent;
}

.anatomy-item-btn:hover {
    background: rgba(255, 255, 255, 0.05);
    padding-left: 2rem;
}

.anatomy-item-btn.active {
    background: linear-gradient(90deg, rgba(0, 242, 255, 0.1), transparent);
    color: #fff;
    border-left-color: #00f2ff;
}

/* Display Area */
.anatomy-display {
    flex: 1;
    position: relative;
    display: flex;
    background: radial-gradient(circle at center, #052a2e, #000);
    overflow: hidden;
}

.scan-line {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 2px;
    background: #00f2ff;
    box-shadow: 0 0 10px #00f2ff;
    z-index: 10;
    animation: scanVertical 3s linear infinite;
    opacity: 0.5;
    pointer-events: none;
}

@keyframes scanVertical {
    0% { top: 0%; opacity: 0; }
    10% { opacity: 0.8; }
    90% { opacity: 0.8; }
    100% { top: 100%; opacity: 0; }
}

.display-divider {
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    background: #000;
    border: 1px solid #555;
    color: #fff;
    width: 40px;
    height: 40px;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    font-weight: bold;
    z-index: 5;
    font-family: var(--font-retro);
}

.display-side {
    flex: 1;
    padding: 2rem;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    text-align: center;
    transition: opacity 0.3s;
}

.bio-side {
    border-right: 1px dashed #333;
    color: var(--accent-lime);
}

.tech-side {
    color: #00f2ff;
}

.side-header {
    font-family: var(--font-mono);
    font-size: 0.7rem;
    margin-bottom: 2rem;
    opacity: 0.6;
    display: flex;
    align-items: center;
    gap: 8px;
    text-transform: uppercase;
    letter-spacing: 2px;
}

.side-content {
    max-width: 300px;
    animation: fadeInScale 0.5s ease-out;
}

@keyframes fadeInScale {
    from { opacity: 0; transform: scale(0.9); }
    to { opacity: 1; transform: scale(1); }
}

.anatomy-icon-large {
    font-size: 5rem;
    margin-bottom: 1rem;
    filter: drop-shadow(0 0 15px currentColor);
    animation: float 4s infinite ease-in-out;
}

.display-side h3 {
    font-size: 1.8rem;
    margin-bottom: 1rem;
    font-family: var(--font-heading);
    text-transform: uppercase;
}

.display-side p {
    font-size: 1rem;
    line-height: 1.5;
    color: #ddd;
    font-family: var(--font-body);
}

/* Footer do Scanner */
.scanner-footer {
    background: #021a1d;
    border-top: 1px solid #00f2ff;
    padding: 5px 20px;
    display: flex;
    justify-content: space-between;
    font-family: var(--font-mono);
    font-size: 0.7rem;
    color: rgba(0, 242, 255, 0.6);
}

/* Responsividade da Seção */
@media (max-width: 900px) {
    .anatomy-nav {
        flex-direction: column;
    }
    .anatomy-nav button {
        border-right: none;
        border-bottom: 1px solid #333;
    }
    
    .anatomy-main {
        flex-direction: column;
    }
    
    .anatomy-list {
        width: 100%;
        max-height: 150px;
        border-right: none;
        border-bottom: 1px solid #333;
    }

    .anatomy-display {
        flex-direction: column;
        padding: 2rem 0;
    }

    .bio-side {
        border-right: none;
        border-bottom: 1px dashed #333;
        padding-bottom: 3rem;
    }
    
    .tech-side {
        padding-top: 3rem;
    }

    .display-divider {
        top: 50%;
        left: 50%;
    }
}



/* --- ESTILOS DO SISTEMA DE CONQUISTAS --- */

:root {
    --gold: #FFD700;
    --silver: #C0C0C0;
    --bronze: #CD7F32;
    --rare-purple: #9D00FF;
    --bg-dark-panel: #151515;
}

.trophy-bg {
    background-color: #080808;
    background-image: 
        linear-gradient(rgba(255, 215, 0, 0.05) 1px, transparent 1px),
        linear-gradient(90deg, rgba(255, 215, 0, 0.05) 1px, transparent 1px);
    background-size: 50px 50px;
    border-top: 2px solid var(--gold);
}

.highlight-gold {
    color: var(--gold);
    text-shadow: 0 0 10px rgba(255, 215, 0, 0.4);
}

/* GAMER HUD */
.gamer-hud {
    background: var(--bg-dark-panel);
    border: 2px solid #333;
    border-radius: 12px;
    padding: 1.5rem;
    margin-bottom: 3rem;
    box-shadow: 0 10px 30px rgba(0,0,0,0.5);
    position: relative;
    overflow: hidden;
}

.gamer-hud::before {
    content: '';
    position: absolute;
    top: 0; left: 0; width: 4px; height: 100%;
    background: var(--accent-lime);
}

.hud-top {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-bottom: 1rem;
    flex-wrap: wrap;
    gap: 1rem;
}

.hud-profile {
    display: flex;
    align-items: center;
    gap: 1rem;
}

.hud-avatar {
    width: 60px;
    height: 60px;
    background: #333;
    border: 2px solid var(--accent-lime);
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    font-weight: 700;
    color: var(--accent-lime);
    font-size: 1.2rem;
}

.hud-name {
    font-family: var(--font-heading);
    font-size: 1.2rem;
    color: white;
}

.hud-class {
    font-family: var(--font-mono);
    font-size: 0.8rem;
    color: #888;
}

.hud-score {
    text-align: right;
}

.score-label {
    display: block;
    font-size: 0.7rem;
    color: #888;
    letter-spacing: 2px;
}

.score-value {
    font-family: var(--font-retro);
    font-size: 1.8rem;
    color: var(--gold);
}

.hud-bar-container {
    background: #222;
    padding: 0.5rem;
    border-radius: 8px;
}

.hud-bar-label {
    display: flex;
    justify-content: space-between;
    font-size: 0.75rem;
    color: #ccc;
    margin-bottom: 5px;
    font-family: var(--font-mono);
}

.xp-track {
    width: 100%;
    height: 10px;
    background: #000;
    border-radius: 5px;
    overflow: hidden;
}

.xp-fill {
    height: 100%;
    width: 0%;
    background: linear-gradient(90deg, var(--primary-blue), var(--accent-lime));
    transition: width 2s cubic-bezier(0.22, 1, 0.36, 1);
    box-shadow: 0 0 10px var(--accent-lime);
}

/* FILTERS */
.achievement-filters {
    display: flex;
    gap: 10px;
    margin-bottom: 2rem;
    flex-wrap: wrap;
    justify-content: center;
}

.ach-filter {
    background: transparent;
    border: 1px solid #444;
    color: #888;
    padding: 0.5rem 1.2rem;
    border-radius: 50px;
    cursor: pointer;
    font-family: var(--font-mono);
    font-size: 0.9rem;
    transition: all 0.2s;
}

.ach-filter:hover {
    border-color: white;
    color: white;
}

.ach-filter.active {
    background: var(--primary-blue);
    border-color: var(--primary-blue);
    color: white;
    box-shadow: 0 0 15px rgba(45, 52, 226, 0.4);
}

.ach-filter.active[data-filter="adm"] { background: #4caf50; border-color: #4caf50; }
.ach-filter.active[data-filter="chaos"] { background: var(--danger); border-color: var(--danger); }

/* GRID */
.achievements-grid {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(140px, 1fr));
    gap: 1.5rem;
}

.ach-card {
    background: #1a1a1a;
    border: 1px solid #333;
    border-radius: 12px;
    padding: 1rem;
    display: flex;
    flex-direction: column;
    align-items: center;
    text-align: center;
    cursor: pointer;
    transition: all 0.3s cubic-bezier(0.175, 0.885, 0.32, 1.275);
    position: relative;
    overflow: hidden;
    height: 100%;
}

.ach-card:hover {
    transform: translateY(-8px) scale(1.05);
    border-color: var(--accent-lime);
    box-shadow: 0 10px 20px rgba(0,0,0,0.5);
    z-index: 2;
}

/* Rarity Styles */
.ach-card[data-rarity="comum"] { border-bottom: 3px solid var(--bronze); }
.ach-card[data-rarity="raro"] { border-bottom: 3px solid var(--silver); }
.ach-card[data-rarity="lendario"] { border-bottom: 3px solid var(--gold); background: radial-gradient(circle at top, #2a2a1a, #1a1a1a); }
.ach-card[data-rarity="gambiarra"] { border-bottom: 3px solid var(--rare-purple); }

.ach-icon {
    font-size: 2.5rem;
    margin-bottom: 0.8rem;
    transition: transform 0.3s;
}

.ach-card:hover .ach-icon {
    transform: scale(1.2) rotate(5deg);
}

.ach-title {
    font-size: 0.8rem;
    font-weight: 700;
    color: #eee;
    line-height: 1.3;
}

/* Unlock Animation */
.ach-card.locked {
    filter: grayscale(1) opacity(0.5);
}

.ach-card.unlocked {
    animation: popIn 0.5s forwards;
}

@keyframes popIn {
    0% { transform: scale(0.5); opacity: 0; }
    70% { transform: scale(1.1); }
    100% { transform: scale(1); opacity: 1; }
}

/* MODAL */
.ach-modal-overlay {
    position: fixed;
    top: 0; left: 0; width: 100%; height: 100%;
    background: rgba(0,0,0,0.9);
    z-index: 20000;
    display: flex;
    justify-content: center;
    align-items: center;
    opacity: 0;
    pointer-events: none;
    transition: opacity 0.3s;
    backdrop-filter: blur(8px);
    padding: 2rem;
}

.ach-modal-overlay.active {
    opacity: 1;
    pointer-events: all;
}

.ach-modal-card {
    background: #151515;
    width: 100%;
    max-width: 450px;
    border-radius: 16px;
    border: 2px solid #444;
    box-shadow: 0 0 50px rgba(0,0,0,0.8);
    position: relative;
    overflow: hidden;
    transform: scale(0.8);
    transition: transform 0.3s cubic-bezier(0.175, 0.885, 0.32, 1.275);
}

.ach-modal-overlay.active .ach-modal-card {
    transform: scale(1);
}

.ach-modal-close {
    position: absolute;
    top: 10px;
    right: 15px;
    background: none;
    border: none;
    color: #fff;
    font-size: 2rem;
    cursor: pointer;
    z-index: 10;
}

.ach-modal-header {
    background: radial-gradient(circle at center, #222, #111);
    padding: 2rem;
    text-align: center;
    border-bottom: 1px solid #333;
}

.ach-modal-icon {
    font-size: 5rem;
    margin-bottom: 1rem;
    animation: float 3s infinite ease-in-out;
}

.ach-modal-ribbon {
    background: var(--gold);
    color: #000;
    display: inline-block;
    padding: 0.3rem 1rem;
    border-radius: 4px;
    font-weight: 800;
    font-size: 0.8rem;
    text-transform: uppercase;
    letter-spacing: 2px;
}

.ach-modal-body {
    padding: 2rem;
    text-align: center;
}

.ach-modal-body h3 {
    font-size: 1.5rem;
    color: white;
    margin-bottom: 1rem;
}

.ach-modal-body p {
    color: #aaa;
    margin-bottom: 1.5rem;
    line-height: 1.6;
}

.ach-stat-row {
    background: #000;
    padding: 0.8rem;
    border-radius: 8px;
    display: flex;
    justify-content: space-between;
    margin-bottom: 0.5rem;
    font-family: var(--font-mono);
    font-size: 0.9rem;
    color: #ccc;
}

.ach-unlock-date {
    font-size: 0.7rem;
    color: #555;
    margin-top: 1rem;
}

.ach-modal-footer {
    padding: 1.5rem;
    border-top: 1px solid #333;
    text-align: center;
}

/* Responsividade específica da seção */
@media (max-width: 600px) {
    .achievements-grid {
        grid-template-columns: repeat(auto-fill, minmax(100px, 1fr));
    }
    .hud-top {
        flex-direction: column;
        align-items: flex-start;
    }
    .hud-score {
        width: 100%;
        text-align: left;
        margin-top: 0.5rem;
        border-top: 1px solid #333;
        padding-top: 0.5rem;
    }
}


/* CERTIFICATE GENERATOR STYLES */
.bureau-bg {
    background-color: #0f172a;
    background-image: 
        radial-gradient(circle at 10% 20%, rgba(255, 215, 0, 0.05) 0%, transparent 20%),
        radial-gradient(circle at 90% 80%, rgba(0, 210, 255, 0.05) 0%, transparent 20%);
    border-top: 4px solid var(--gold);
    border-bottom: 4px solid var(--gold);
}

.text-gold { color: var(--gold); }
.text-gold-dim { color: rgba(255, 215, 0, 0.7); }

/* Interface Input */
.cert-interface {
    max-width: 600px;
    margin: 0 auto;
    background: rgba(0,0,0,0.3);
    border: 1px solid var(--gold);
    padding: 2rem;
    border-radius: 8px;
    text-align: center;
}

.cert-input-wrapper label {
    display: block;
    color: var(--accent-lime);
    font-family: var(--font-mono);
    margin-bottom: 1rem;
    text-transform: uppercase;
    letter-spacing: 1px;
}

.input-group {
    display: flex;
    gap: 10px;
}

#user-name-input {
    flex: 1;
    background: rgba(0,0,0,0.5);
    border: 1px solid #555;
    color: white;
    padding: 1rem;
    font-family: var(--font-mono);
    font-size: 1.1rem;
    border-radius: 4px;
    outline: none;
    transition: border-color 0.3s;
}

#user-name-input:focus {
    border-color: var(--accent-lime);
}

.input-hint {
    font-size: 0.7rem;
    color: #666;
    margin-top: 0.5rem;
    font-style: italic;
}

/* Certificate Visuals */
.certificate-container {
    margin-top: 3rem;
    display: flex;
    flex-direction: column;
    align-items: center;
    transition: opacity 0.5s, transform 0.5s;
}

.certificate-container.hidden {
    display: none;
    opacity: 0;
    transform: translateY(20px);
}

.certificate-paper {
    background: #fffdf0; /* Parchment */
    width: 100%;
    max-width: 800px;
    padding: 3rem;
    color: #1a1a1a;
    position: relative;
    box-shadow: 0 0 50px rgba(0,0,0,0.5);
    border: 10px double #2c1a0c;
    font-family: 'Times New Roman', serif;
    overflow: hidden;
}

/* Watermark */
.cert-watermark {
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%) rotate(-45deg);
    font-size: 15rem;
    font-weight: bold;
    color: rgba(0,0,0,0.03);
    z-index: 0;
    pointer-events: none;
    font-family: var(--font-heading);
}

/* Corners */
.cert-border-corner {
    position: absolute;
    width: 50px;
    height: 50px;
    border: 5px solid var(--gold);
    z-index: 1;
}

.top-left { top: 10px; left: 10px; border-right: none; border-bottom: none; }
.top-right { top: 10px; right: 10px; border-left: none; border-bottom: none; }
.bottom-left { bottom: 10px; left: 10px; border-right: none; border-top: none; }
.bottom-right { bottom: 10px; right: 10px; border-left: none; border-top: none; }

/* Header */
.cert-header {
    text-align: center;
    border-bottom: 2px solid #2c1a0c;
    padding-bottom: 1.5rem;
    margin-bottom: 1.5rem;
    position: relative;
    z-index: 2;
}

.cert-logo {
    font-size: 3rem;
    margin-bottom: 0.5rem;
}

.cert-title {
    font-family: var(--font-heading);
    font-size: 1.8rem;
    color: #2c1a0c;
    line-height: 1.2;
    margin-bottom: 0.5rem;
}

.cert-subtitle {
    font-family: var(--font-mono);
    font-size: 0.8rem;
    text-transform: uppercase;
    color: #666;
}

/* Meta */
.cert-meta {
    display: flex;
    justify-content: space-between;
    flex-wrap: wrap;
    font-family: var(--font-mono);
    font-size: 0.8rem;
    margin-bottom: 2rem;
    border-bottom: 1px dashed #aaa;
    padding-bottom: 1rem;
    z-index: 2;
    position: relative;
}

.meta-row {
    margin-bottom: 0.5rem;
}

/* Body */
.cert-body {
    text-align: justify;
    font-size: 1.1rem;
    line-height: 1.6;
    margin-bottom: 2rem;
    z-index: 2;
    position: relative;
}

.cert-name-display {
    font-family: 'Great Vibes', cursive; /* Fallback to cursive if not loaded */
    font-family: var(--font-heading);
    font-size: 2.5rem;
    text-align: center;
    margin: 1.5rem 0;
    color: var(--primary-blue);
    font-weight: bold;
    border-bottom: 2px solid #ddd;
    text-transform: uppercase;
}

.cert-list {
    list-style: none;
    margin-top: 1rem;
    padding-left: 1rem;
}

.cert-list li {
    margin-bottom: 0.5rem;
    display: flex;
    align-items: center;
    gap: 10px;
}

.cert-list li i {
    color: var(--accent-lime); /* Contrast pop */
    color: #28a745; /* Ink green */
}

/* Table */
.cert-table-wrapper {
    margin-bottom: 2rem;
    border: 2px solid #2c1a0c;
    z-index: 2;
    position: relative;
}

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

.cert-table th {
    background: #2c1a0c;
    color: var(--gold);
    padding: 0.5rem;
    text-align: left;
    font-family: var(--font-mono);
    font-size: 0.8rem;
}

.cert-table td {
    padding: 0.5rem;
    border-bottom: 1px solid #ddd;
    font-size: 0.9rem;
}

/* Verdict */
.cert-verdict {
    text-align: center;
    margin-bottom: 3rem;
    z-index: 2;
    position: relative;
}

.verdict-stamp {
    font-family: var(--font-heading);
    font-size: 2.5rem;
    color: var(--danger);
    border: 4px solid var(--danger);
    display: inline-block;
    padding: 0.5rem 2rem;
    transform: rotate(-5deg);
    opacity: 0; /* Animated via JS */
    transition: all 0.5s cubic-bezier(0.175, 0.885, 0.32, 1.275);
    background: rgba(255, 77, 77, 0.1);
    margin: 1rem 0;
}

.verdict-stamp.stamped {
    opacity: 1;
    transform: rotate(-5deg) scale(1);
}

/* Footer */
.cert-footer {
    border-top: 2px solid #2c1a0c;
    padding-top: 1rem;
    font-size: 0.8rem;
    z-index: 2;
    position: relative;
}

.cert-footer-header {
    text-align: center;
    font-weight: bold;
    margin-bottom: 1rem;
    text-transform: uppercase;
    letter-spacing: 2px;
}

.cert-signatures {
    display: flex;
    justify-content: space-between;
    align-items: flex-end;
}

.sig-block {
    display: flex;
    flex-direction: column;
}

.sig-label {
    font-weight: bold;
    color: #666;
    font-size: 0.7rem;
}

.code-font {
    font-family: var(--font-mono);
    color: var(--primary-blue);
}

.stamp-area {
    align-items: center;
    position: relative;
}

.wax-seal {
    width: 60px;
    height: 60px;
    background: #8B0000;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    color: rgba(0,0,0,0.3);
    font-size: 1.5rem;
    box-shadow: inset 0 0 10px rgba(0,0,0,0.5), 0 2px 5px rgba(0,0,0,0.3);
    border: 4px dashed rgba(255,255,255,0.1);
}

.sign-hand {
    font-family: 'Architects Daughter', cursive;
    color: var(--primary-blue);
    position: absolute;
    bottom: 10px;
    right: 50px;
    transform: rotate(-10deg);
    font-size: 1.2rem;
}

.cert-disclaimer {
    text-align: center;
    margin-top: 2rem;
    font-size: 0.7rem;
    font-style: italic;
    opacity: 0.7;
}

/* Actions */
.cert-actions {
    margin-top: 2rem;
    display: flex;
    gap: 1rem;
}

/* Responsividade */
@media (max-width: 600px) {
    .input-group {
        flex-direction: column;
    }
    
    .cert-meta {
        flex-direction: column;
        gap: 0.5rem;
    }
    
    .cert-signatures {
        flex-direction: column;
        align-items: center;
        gap: 1.5rem;
    }
    
    .certificate-paper {
        padding: 1.5rem;
    }
    
    .cert-title {
        font-size: 1.2rem;
    }
}

/* Print Styles */
@media print {
    body * {
        visibility: hidden;
    }
    #certificate-display, #certificate-display * {
        visibility: visible;
    }
    #certificate-display {
        position: absolute;
        left: 0;
        top: 0;
        width: 100%;
        margin: 0;
        padding: 0;
    }
    .cert-actions {
        display: none;
    }
    .bureau-bg {
        background: none;
    }
}
    
/* TEOREMAS DA PRODUTIVIDADE STYLES */
.chalkboard-bg {
    background-color: #1a1a1a;
    background-image: 
        linear-gradient(rgba(255, 255, 255, 0.03) 1px, transparent 1px),
        linear-gradient(90deg, rgba(255, 255, 255, 0.03) 1px, transparent 1px);
    background-size: 50px 50px;
    border-top: 1px solid #333;
    border-bottom: 1px solid #333;
}

.theorem-layout {
    display: grid;
    grid-template-columns: 300px 1fr;
    gap: 2rem;
    align-items: start;
}

/* Sidebar Menu */
.theorem-menu {
    background: #111;
    border: 1px solid #333;
    border-radius: 12px;
    overflow: hidden;
    height: 600px;
    display: flex;
    flex-direction: column;
}

.menu-header {
    background: #222;
    padding: 1rem;
    font-family: var(--font-heading);
    border-bottom: 1px solid #333;
    color: var(--accent-lime);
    font-size: 0.9rem;
    letter-spacing: 1px;
}

.theorem-list-container {
    overflow-y: auto;
    padding: 1rem;
    flex: 1;
}

.theorem-list-container::-webkit-scrollbar { width: 5px; }
.theorem-list-container::-webkit-scrollbar-thumb { background: #333; border-radius: 4px; }

.category-group {
    margin-bottom: 1.5rem;
}

.category-group h4 {
    color: #666;
    font-size: 0.75rem;
    text-transform: uppercase;
    margin-bottom: 0.5rem;
    padding-left: 0.5rem;
}

.thm-btn {
    display: block;
    width: 100%;
    text-align: left;
    background: transparent;
    border: none;
    padding: 0.6rem 0.8rem;
    color: #ccc;
    font-family: var(--font-mono);
    font-size: 0.85rem;
    cursor: pointer;
    border-radius: 6px;
    transition: all 0.2s;
    margin-bottom: 2px;
}

.thm-btn:hover {
    background: rgba(255, 255, 255, 0.05);
    color: white;
    padding-left: 1.2rem;
}

.thm-btn.active {
    background: linear-gradient(90deg, rgba(0, 210, 255, 0.1), transparent);
    color: #00d2ff;
    border-left: 2px solid #00d2ff;
}

/* Blackboard Area */
.theorem-display {
    display: flex;
    flex-direction: column;
    gap: 1.5rem;
}

.board-frame {
    background: #3a2a1a; /* Wood color frame */
    padding: 10px;
    border-radius: 8px;
    box-shadow: 0 10px 30px rgba(0,0,0,0.5);
    position: relative;
}

.board-surface {
    background: #152018; /* Chalkboard Green/Black */
    min-height: 250px;
    border-radius: 4px;
    display: flex;
    align-items: center;
    justify-content: center;
    position: relative;
    overflow: hidden;
    cursor: crosshair;
    box-shadow: inset 0 0 50px rgba(0,0,0,0.8);
    background-image: url('data:image/svg+xml;base64,PHN2ZyB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHdpZHRoPSI0IiBoZWlnaHQ9IjQiPgo8cmVjdCB3aWR0aD0iNCIgaGVpZ2h0PSI0IiBmaWxsPSIjMTUyMDE4Ii8+CjxwYXRoIGQ9Ik0xIDNoMXYxSDFWM3ptMiAxaDF2MUgzVjR6IiBmaWxsPSIjMjYzMzI2IiBmaWxsLW9wYWNpdHk9IjAuMDUiLz4KPC9zdmc+');
}

/* Dust Effect */
.board-surface::before {
    content: '';
    position: absolute;
    top: 0; left: 0; width: 100%; height: 100%;
    background: radial-gradient(circle at 50% 50%, rgba(255,255,255,0.05), transparent 70%);
    pointer-events: none;
}

/* Tray */
.board-tray {
    background: #2c1e12;
    height: 20px;
    margin-top: 5px;
    border-radius: 0 0 4px 4px;
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 15px;
    padding: 0 20px;
}

.chalk {
    width: 30px;
    height: 8px;
    border-radius: 2px;
    box-shadow: 1px 1px 2px rgba(0,0,0,0.5);
}
.chalk.white { background: #eee; }
.chalk.cyan { background: #00d2ff; }
.chalk.green { background: #C5F82A; }

.eraser {
    background: #000;
    color: #eee;
    font-size: 0.5rem;
    padding: 2px 8px;
    border-top: 2px solid #555;
    font-family: var(--font-mono);
}

/* Info Panel */
.theorem-info {
    background: #111;
    border: 1px solid #333;
    padding: 1.5rem;
    border-radius: 12px;
}

#thm-title {
    color: var(--accent-lime);
    margin-bottom: 0.5rem;
    font-size: 1.5rem;
}

#thm-desc {
    color: #ccc;
    font-size: 1rem;
    margin-bottom: 1.5rem;
    line-height: 1.6;
}

.variable-legend {
    background: rgba(255,255,255,0.05);
    padding: 1rem;
    border-radius: 8px;
    font-family: var(--font-mono);
    font-size: 0.85rem;
    display: grid;
    gap: 0.5rem;
}

.var-item {
    display: flex;
    gap: 10px;
}

.var-symbol {
    color: #00d2ff;
    font-weight: bold;
    min-width: 30px;
}

.var-def {
    color: #999;
}

/* CUSTOM MATH CSS (Pseudo-LaTeX) */
.math-equation {
    font-family: 'Times New Roman', serif;
    font-size: 1.8rem;
    color: #eee;
    font-style: italic;
    display: flex;
    align-items: center;
    flex-wrap: wrap;
    justify-content: center;
    gap: 10px;
    text-shadow: 0 0 2px rgba(255,255,255,0.3);
    padding: 1rem;
    animation: drawIn 0.5s ease-out;
}

@keyframes drawIn {
    from { opacity: 0; transform: scale(0.95); filter: blur(2px); }
    to { opacity: 1; transform: scale(1); filter: blur(0); }
}

.math-frac {
    display: inline-flex;
    flex-direction: column;
    text-align: center;
    vertical-align: middle;
    margin: 0 5px;
}

.math-num {
    border-bottom: 2px solid rgba(255,255,255,0.8);
    padding: 0 5px 2px 5px;
    display: block;
}

.math-den {
    padding: 2px 5px 0 5px;
    display: block;
}

.math-op {
    font-family: var(--font-body);
    font-style: normal;
    margin: 0 5px;
    opacity: 0.8;
}

.math-var {
    color: #C5F82A; /* Neon Green for vars */
}

.math-const {
    color: #00d2ff; /* Cyan for constants */
}

.math-text {
    font-family: var(--font-mono);
    font-style: normal;
    font-size: 0.8em;
}

.math-sub {
    font-size: 0.6em;
    vertical-align: sub;
    margin-left: 1px;
    color: #aaa;
}

.math-sup {
    font-size: 0.6em;
    vertical-align: super;
    margin-left: 1px;
}

.math-int-wrap {
    display: inline-flex;
    align-items: center;
    margin-right: 5px;
}

.math-int-sym {
    font-size: 2.5em;
    font-weight: 100;
    line-height: 0.8;
    font-style: normal;
}

.math-limits {
    display: flex;
    flex-direction: column;
    font-size: 0.5em;
    margin-left: -5px;
    margin-right: 5px;
}

.math-parens {
    font-size: 1.2em;
    opacity: 0.7;
}

.math-sqrt {
    border-top: 2px solid rgba(255,255,255,0.8);
    padding-left: 5px;
    position: relative;
    margin-left: 10px;
}

.math-sqrt::before {
    content: '√';
    position: absolute;
    left: -12px;
    top: -2px;
    font-size: 1.2em;
}

/* Responsive */
@media (max-width: 900px) {
    .theorem-layout {
        grid-template-columns: 1fr;
    }
    
    .theorem-menu {
        height: 300px;
    }
    
    .math-equation {
        font-size: 1.2rem;
    }
}


/* AUDITORIA DE CAOS - STYLES */
:root {
    --paper-color: #fdfbf0;
    --line-color: #a2a2a2;
    --ink-blue: #1a237e;
    --ink-red: #b71c1c;
    --ink-green: #1b5e20;
    --audit-gold: #ffd700;
}

.audit-section-bg {
    background-color: #2c2c2c;
    background-image: url("data:image/svg+xml,%3Csvg width='40' height='40' viewBox='0 0 40 40' xmlns='http://www.w3.org/2000/svg'%3E%3Cg fill='%233a3a3a' fill-opacity='0.4' fill-rule='evenodd'%3E%3Cpath d='M0 40L40 0H20L0 20M40 40V20L20 40'/%3E%3C/g%3E%3C/svg%3E");
    position: relative;
    overflow: hidden;
    border-top: 5px solid #444;
}

.highlight-audit {
    color: var(--audit-gold);
    text-shadow: 2px 2px 0px #000;
}

/* Desk Surface */
.audit-desk {
    position: relative;
    padding: 1rem;
    perspective: 1000px;
}

/* Coffee Stain Decoration */
.coffee-stain {
    position: absolute;
    top: -20px;
    right: -20px;
    width: 150px;
    height: 150px;
    border-radius: 50%;
    border: 10px solid rgba(111, 78, 55, 0.15);
    box-shadow: inset 0 0 20px rgba(111, 78, 55, 0.1);
    pointer-events: none;
    z-index: 10;
    transform: scale(1.2) rotate(30deg);
    filter: blur(1px);
}

/* Ledger Book */
.audit-ledger {
    background-color: var(--paper-color);
    width: 100%;
    max-width: 1000px;
    margin: 0 auto;
    box-shadow: 0 20px 50px rgba(0,0,0,0.6), 5px 5px 0 rgba(0,0,0,0.2);
    position: relative;
    border-radius: 4px;
    overflow: hidden;
    transform: rotate(-1deg);
    transition: transform 0.3s;
    font-family: 'Courier New', Courier, monospace; /* Typewriter feel */
}

.audit-ledger:hover {
    transform: rotate(0deg);
}

/* Spiral Binding */
.ledger-binding {
    position: absolute;
    top: 0;
    left: 0;
    width: 40px;
    height: 100%;
    background: 
        linear-gradient(to bottom, #333 50%, #555 50%);
    background-size: 100% 20px;
    mask-image: radial-gradient(circle at 0 10px, transparent 8px, black 9px);
    mask-size: 100% 40px;
    -webkit-mask-image: radial-gradient(circle at 0 10px, transparent 8px, black 9px);
    -webkit-mask-size: 100% 40px;
    z-index: 5;
    border-right: 2px solid rgba(0,0,0,0.2);
}

.ledger-paper {
    margin-left: 40px; /* Space for binding */
    padding: 2rem;
    background-image: 
        linear-gradient(var(--line-color) 1px, transparent 1px);
    background-size: 100% 2.5rem; /* Line height */
    background-position: 0 1.5rem;
    min-height: 600px;
}

/* Header */
.ledger-header {
    display: flex;
    justify-content: space-between;
    align-items: flex-start;
    margin-bottom: 2rem;
    border-bottom: 3px double #000;
    padding-bottom: 1rem;
    background: var(--paper-color); /* Cover lines for header */
}

.lh-left h3 {
    font-family: 'Times New Roman', serif;
    font-weight: 900;
    font-size: 1.8rem;
    color: #000;
    text-transform: uppercase;
    letter-spacing: -1px;
    margin-bottom: 0;
}

.lh-left span {
    font-size: 0.8rem;
    color: #666;
    font-style: italic;
}

.stamp-box {
    border: 2px solid var(--ink-red);
    padding: 0.5rem;
    transform: rotate(5deg);
    color: var(--ink-red);
    text-align: center;
}

.audit-stamp {
    font-weight: 900;
    font-size: 1.2rem;
    border: 2px dashed var(--ink-red);
    padding: 0.2rem 0.5rem;
    margin-top: 0.2rem;
    text-transform: uppercase;
    letter-spacing: 2px;
}

.blink-stamp {
    animation: opacityPulse 2s infinite;
}

@keyframes opacityPulse {
    0%, 100% { opacity: 1; }
    50% { opacity: 0.5; }
}

/* Tabs */
.audit-tabs {
    display: flex;
    gap: 5px;
    margin-bottom: 1rem;
    background: var(--paper-color);
    padding-top: 10px;
}

.audit-tab {
    background: #e0e0e0;
    border: 1px solid #999;
    border-bottom: none;
    padding: 0.5rem 1rem;
    font-family: var(--font-mono);
    font-size: 0.8rem;
    cursor: pointer;
    border-radius: 5px 5px 0 0;
    transition: all 0.2s;
    font-weight: bold;
    color: #555;
}

.audit-tab:hover {
    background: #fff;
    transform: translateY(-2px);
}

.audit-tab.active {
    background: var(--ink-blue);
    color: #fff;
    border-color: var(--ink-blue);
}

/* Grid Headers */
.ledger-grid-header {
    display: grid;
    grid-template-columns: 2fr 1.5fr 1.5fr 1fr;
    padding: 0.5rem;
    background: #333;
    color: #fff;
    font-family: var(--font-mono);
    font-size: 0.8rem;
    text-transform: uppercase;
    font-weight: bold;
    border-radius: 4px;
    margin-bottom: 10px;
}

.ledger-lines-container {
    display: flex;
    flex-direction: column;
}

/* Row Item */
.audit-row {
    display: grid;
    grid-template-columns: 2fr 1.5fr 1.5fr 1fr;
    padding: 0.6rem 0.5rem;
    border-bottom: 1px solid rgba(0,0,0,0.1);
    align-items: center;
    font-size: 0.9rem;
    transition: background 0.2s;
    cursor: help;
    position: relative;
    background: rgba(255,255,255,0.4); /* Slightly opaque to read over lines */
    margin-bottom: 2px;
}

.audit-row:hover {
    background: rgba(255, 215, 0, 0.2); /* Highlighter yellow */
}

.ar-task {
    font-weight: bold;
    color: #000;
    padding-right: 10px;
}

.ar-task small {
    display: block;
    font-weight: normal;
    color: #666;
    font-size: 0.7rem;
    font-family: var(--font-body);
}

.ar-effort, .ar-pay {
    font-family: var(--font-hand); /* Handwritten look */
    color: var(--ink-blue);
    font-size: 0.95rem;
}

.ar-roi {
    font-weight: bold;
    text-align: right;
    font-family: var(--font-mono);
}

.roi-pos { color: var(--ink-green); }
.roi-neg { color: var(--ink-red); }
.roi-legend { color: #9c27b0; text-shadow: 0 0 2px rgba(156, 39, 176, 0.2); }

/* Category Tag */
.cat-badge {
    display: inline-block;
    font-size: 0.6rem;
    padding: 2px 4px;
    border-radius: 3px;
    color: white;
    background: #555;
    margin-right: 5px;
    vertical-align: middle;
    text-transform: uppercase;
}

.cat-adm { background: #795548; }
.cat-dev { background: #2196f3; }
.cat-agro { background: #4caf50; }
.cat-chaos { background: #ff5722; }
.cat-tech { background: #607d8b; }

/* Row Stamp Effect (JS triggered) */
.row-stamp {
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%) rotate(-15deg) scale(2);
    border: 3px solid;
    padding: 0.2rem 1rem;
    font-weight: 900;
    text-transform: uppercase;
    opacity: 0;
    pointer-events: none;
    z-index: 2;
    font-family: var(--font-heading);
    transition: all 0.3s cubic-bezier(0.175, 0.885, 0.32, 1.275);
}

.audit-row:active .row-stamp {
    transform: translate(-50%, -50%) rotate(-15deg) scale(1);
    opacity: 0.8;
}

/* Footer Total */
.ledger-footer {
    margin-top: 2rem;
    border-top: 3px double #000;
    padding-top: 1rem;
    display: flex;
    justify-content: space-between;
    align-items: center;
    background: var(--paper-color);
}

.total-label {
    font-weight: bold;
    font-size: 1rem;
    color: #333;
}

.total-value {
    font-size: 2rem;
    font-weight: 900;
    color: var(--ink-blue);
    font-family: var(--font-mono);
    border-bottom: 2px solid var(--ink-blue);
}

.handwritten-note {
    margin-top: 1.5rem;
    font-family: var(--font-hand);
    color: #555;
    font-size: 0.9rem;
    text-align: right;
    transform: rotate(-1deg);
}

/* Responsividade */
@media (max-width: 768px) {
    .ledger-grid-header {
        display: none; /* Hide table header on mobile */
    }

    .audit-row {
        grid-template-columns: 1fr;
        border: 2px solid #ddd;
        margin-bottom: 10px;
        background: white;
        padding: 1rem;
        border-radius: 4px;
        box-shadow: 2px 2px 0 rgba(0,0,0,0.05);
    }

    .ar-task {
        font-size: 1.1rem;
        margin-bottom: 0.5rem;
        border-bottom: 1px dashed #ccc;
        padding-bottom: 0.5rem;
    }

    .ar-effort, .ar-pay {
        margin-bottom: 0.3rem;
        display: flex;
        justify-content: space-between;
    }

    .ar-effort::before { content: "Custo: "; font-weight: bold; color: #999; font-family: sans-serif; font-size: 0.7rem; }
    .ar-pay::before { content: "Recebido: "; font-weight: bold; color: #999; font-family: sans-serif; font-size: 0.7rem; }

    .ar-roi {
        margin-top: 0.5rem;
        text-align: left;
        font-size: 1.2rem;
        background: #f0f0f0;
        padding: 0.5rem;
        border-radius: 4px;
        text-align: center;
    }
}


/* FEIRA DO MESTRE STYLES */


.butcher-paper-bg {
    background-color: #f4e4bc; /* Craft Paper Color */
    background-image: url("data:image/svg+xml,%3Csvg width='60' height='60' viewBox='0 0 60 60' xmlns='http://www.w3.org/2000/svg'%3E%3Cg fill='none' fill-rule='evenodd'%3E%3Cg fill='%23d6c6a0' fill-opacity='0.4'%3E%3Cpath d='M36 34v-4h-2v4h-4v2h4v4h2v-4h4v-2h-4zm0-30V0h-2v4h-4v2h4v4h2V6h4V4h-4zM6 34v-4H4v4H0v2h4v4h2v-4h4v-2H6zM6 4V0H4v4H0v2h4v4h2V6h4V4H6z'/%3E%3C/g%3E%3C/g%3E%3C/svg%3E");
    color: #3e2723; /* Ink Color */
    position: relative;
    border-top: 5px dashed #3e2723;
    border-bottom: 5px dashed #3e2723;
}

.market-header {
    text-align: center;
    margin-bottom: 3rem;
}

.market-sign {
    background: #fff;
    border: 4px solid #3e2723;
    display: inline-block;
    padding: 1rem 3rem;
    transform: rotate(-2deg);
    box-shadow: 5px 5px 0px rgba(62, 39, 35, 0.5);
    position: relative;
}

.screw {
    width: 10px;
    height: 10px;
    background: #555;
    border-radius: 50%;
    position: absolute;
    box-shadow: inset 1px 1px 2px rgba(0,0,0,0.5);
}

.screw:nth-child(1) { top: 10px; left: 10px; }
.screw:nth-child(2) { top: 10px; right: 10px; }

.market-sign h2 {
    font-family: var(--font-retro);
    font-size: 1.5rem;
    color: #d84315;
    text-transform: uppercase;
    margin-bottom: 0.5rem;
    line-height: 1.4;
}

.market-sign p {
    font-family: var(--font-hand);
    font-weight: bold;
    font-size: 1.2rem;
}

.market-status {
    margin-top: 1rem;
    font-family: var(--font-mono);
    background: #3e2723;
    color: #ffeb3b;
    display: inline-block;
    padding: 0.2rem 1rem;
    transform: rotate(1deg);
}

.blink-text {
    animation: blink 0.5s infinite alternate;
}

/* Layout */
.market-layout {
    display: grid;
    grid-template-columns: 1fr 300px;
    gap: 2rem;
    align-items: start;
}

@media (max-width: 900px) {
    .market-layout {
        grid-template-columns: 1fr;
    }
    .wheelbarrow-wrapper {
        position: fixed;
        bottom: 10px;
        right: 10px;
        z-index: 999;
        width: calc(100% - 20px);
        max-width: 350px;
    }
    .wheelbarrow-ui {
        max-height: 300px; /* Compact on mobile */
        overflow-y: auto;
    }
}

/* Aisles */
.aisle-group {
    margin-bottom: 3rem;
}

.aisle-title {
    font-family: var(--font-heading);
    background: #d84315; /* Red tape */
    color: white;
    padding: 0.5rem 1rem;
    display: inline-block;
    transform: skew(-10deg);
    margin-bottom: 1rem;
    box-shadow: 3px 3px 0 rgba(0,0,0,0.2);
}

.products-grid {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(200px, 1fr));
    gap: 1.5rem;
}

/* Product Card */
.prod-card {
    background: #fff;
    border: 2px dashed #aaa;
    padding: 1rem;
    position: relative;
    display: flex;
    flex-direction: column;
    transition: transform 0.2s;
    border-radius: 4px;
}

.prod-card:hover {
    transform: scale(1.03);
    border-color: #3e2723;
    box-shadow: 5px 5px 10px rgba(62, 39, 35, 0.1);
    z-index: 2;
}

.prod-badge {
    position: absolute;
    top: -10px;
    right: -5px;
    background: #ffeb3b;
    color: #000;
    font-family: var(--font-mono);
    font-size: 0.6rem;
    padding: 2px 6px;
    border: 1px solid #000;
    transform: rotate(5deg);
}

.prod-icon {
    font-size: 2.5rem;
    text-align: center;
    margin-bottom: 0.5rem;
}

.prod-name {
    font-family: var(--font-heading);
    font-size: 1rem;
    font-weight: 700;
    line-height: 1.2;
    margin-bottom: 0.5rem;
    color: #3e2723;
}

.prod-desc {
    font-size: 0.8rem;
    color: #666;
    flex-grow: 1;
    margin-bottom: 1rem;
    line-height: 1.3;
}

.prod-price {
    font-family: var(--font-retro);
    font-size: 0.8rem;
    color: #d84315;
    background: #eee;
    padding: 4px;
    text-align: center;
    margin-bottom: 0.5rem;
}

.btn-buy {
    background: #3e2723;
    color: white;
    border: none;
    padding: 0.5rem;
    font-family: var(--font-heading);
    font-weight: bold;
    cursor: pointer;
    transition: background 0.2s;
    width: 100%;
    text-transform: uppercase;
}

.btn-buy:hover {
    background: #5d4037;
}

.btn-buy:active {
    transform: translateY(2px);
}

/* Wheelbarrow (Cart) */
.wheelbarrow-wrapper {
    position: sticky;
    top: 100px;
}

.wheelbarrow-ui {
    background: #fff;
    border: 4px solid #3e2723;
    border-radius: 0 0 12px 12px;
    box-shadow: 10px 10px 0 rgba(0,0,0,0.2);
    display: flex;
    flex-direction: column;
    overflow: hidden;
    transition: border-color 0.3s;
}

.wheelbarrow-ui.overload {
    border-color: var(--danger);
    animation: shake 0.5s infinite;
}

.cart-header {
    background: #3e2723;
    color: white;
    padding: 1rem;
    display: flex;
    justify-content: space-between;
    align-items: center;
    font-family: var(--font-heading);
}

.cart-body {
    padding: 1rem;
    max-height: 300px;
    overflow-y: auto;
    min-height: 100px;
    background: #fffdf0;
}

.cart-item-row {
    display: flex;
    justify-content: space-between;
    font-size: 0.85rem;
    border-bottom: 1px dashed #ccc;
    padding: 5px 0;
    animation: slideInCart 0.3s ease-out;
}

@keyframes slideInCart {
    from { transform: translateX(-20px); opacity: 0; }
    to { transform: translateX(0); opacity: 1; }
}

.cart-weight-bar {
    height: 10px;
    background: #ddd;
    width: 100%;
}

.weight-fill {
    height: 100%;
    background: #4caf50;
    width: 0%;
    transition: width 0.5s, background-color 0.5s;
}

.weight-fill.warning { background: #ff9800; }
.weight-fill.danger { background: #f44336; }

.cart-alert {
    background: var(--danger);
    color: white;
    font-size: 0.7rem;
    text-align: center;
    padding: 2px;
    font-weight: bold;
    font-family: var(--font-mono);
}

.cart-alert.hidden { display: none; }

.cart-footer {
    padding: 1rem;
    background: #eee;
    border-top: 2px solid #3e2723;
}

.cart-totals {
    margin-bottom: 1rem;
    text-align: right;
}

.total-line {
    font-family: var(--font-retro);
    font-size: 0.7rem;
    color: #3e2723;
    line-height: 1.5;
}

.btn-checkout {
    width: 100%;
    padding: 1rem;
    background: #2e7d32;
    color: white;
    border: 2px solid #1b5e20;
    font-family: var(--font-heading);
    font-weight: bold;
    cursor: pointer;
    font-size: 1rem;
    box-shadow: 0 4px 0 #1b5e20;
    transition: all 0.2s;
}

.btn-checkout:hover {
    background: #388e3c;
    transform: translateY(-2px);
    box-shadow: 0 6px 0 #1b5e20;
}

.btn-checkout:active {
    transform: translateY(4px);
    box-shadow: 0 0 0 #1b5e20;
}

.wheelbarrow-icon {
    font-size: 3rem;
    position: absolute;
    bottom: -20px;
    right: -20px;
    transform: rotate(-10deg);
    z-index: -1;
    opacity: 0.2;
}

/* Flying Item Animation Class */
.flying-item {
    position: fixed;
    width: 40px;
    height: 40px;
    font-size: 24px;
    z-index: 9999;
    pointer-events: none;
    transition: transform 0.8s cubic-bezier(0.5, 0, 0.5, 1), opacity 0.8s;
    display: flex;
    align-items: center;
    justify-content: center;
}

/* Checkout Modal */
.checkout-modal {
    position: fixed;
    top: 0; left: 0; width: 100%; height: 100%;
    background: rgba(0,0,0,0.8);
    z-index: 10000;
    display: flex;
    justify-content: center;
    align-items: center;
    opacity: 1;
    transition: opacity 0.3s;
}

.checkout-modal.hidden {
    opacity: 0;
    pointer-events: none;
}

.receipt-paper {
    background: white;
    width: 350px;
    padding: 2rem;
    font-family: 'Courier New', Courier, monospace;
    box-shadow: 0 0 50px rgba(0,0,0,0.5);
    position: relative;
    transform: rotate(-1deg);
}

.receipt-rip {
    position: absolute;
    bottom: -10px;
    left: 0;
    width: 100%;
    height: 20px;
    background: 
        linear-gradient(45deg, transparent 33.333%, #fff 33.333%, #fff 66.667%, transparent 66.667%),
        linear-gradient(-45deg, transparent 33.333%, #fff 33.333%, #fff 66.667%, transparent 66.667%);
    background-size: 20px 40px;
}

.receipt-header {
    text-align: center;
    border-bottom: 2px dashed #000;
    padding-bottom: 1rem;
    margin-bottom: 1rem;
}

.receipt-header h3 {
    font-size: 1.2rem;
    color: var(--danger);
    font-weight: 900;
}

.receipt-body p {
    font-size: 0.9rem;
    margin-bottom: 0.5rem;
    line-height: 1.4;
}

.receipt-footer {
    margin-top: 2rem;
    text-align: center;
}

.btn-receipt {
    background: #000;
    color: #fff;
    border: none;
    padding: 0.5rem 1rem;
    font-family: var(--font-mono);
    cursor: pointer;
}

.btn-receipt:hover {
    background: #333;
}


/* --- ARQUIVOS PERDIDOS (WINDOWS 98 THEME) --- */

.retro-desktop-bg {
    background-color: #008080; /* Classic Teal */
    background-image: none;
    border-top: 4px solid #c0c0c0;
    border-bottom: 4px solid #c0c0c0;
    position: relative;
}

.highlight-retro {
    color: #c0c0c0;
    background: #000080;
    padding: 0 10px;
    font-family: var(--font-mono);
}

/* Window Container */
.win-explorer {
    background: #c0c0c0;
    border: 2px solid;
    border-color: #fff #808080 #808080 #fff;
    box-shadow: 10px 10px 0 rgba(0,0,0,0.5);
    font-family: 'Tahoma', sans-serif; /* Ou Sans-Serif system font */
    color: #000;
    max-width: 1000px;
    margin: 0 auto;
    display: flex;
    flex-direction: column;
    min-height: 500px;
}

/* Title Bar */
.win-title-bar {
    background: linear-gradient(90deg, #000080, #1084d0);
    padding: 3px 5px;
    display: flex;
    justify-content: space-between;
    align-items: center;
}

.win-title-text {
    color: white;
    font-weight: bold;
    font-size: 13px;
    display: flex;
    align-items: center;
    gap: 5px;
}

.win-icon {
    width: 16px;
    height: 16px;
}

.win-controls {
    display: flex;
    gap: 2px;
}

.win-controls button {
    width: 16px;
    height: 14px;
    background: #c0c0c0;
    border: 1px solid;
    border-color: #fff #808080 #808080 #fff;
    font-size: 9px;
    line-height: 10px;
    font-weight: bold;
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 0;
}

.win-controls button:active {
    border-color: #808080 #fff #fff #808080;
}

/* Menu Bar */
.win-menu-bar {
    display: flex;
    gap: 15px;
    padding: 5px 10px;
    font-size: 12px;
    border-bottom: 1px solid #808080;
}

.win-menu-bar span {
    cursor: pointer;
}

.win-menu-bar span:first-letter {
    text-decoration: underline;
}

/* Toolbar */
.win-toolbar {
    padding: 5px 10px;
    border-bottom: 1px solid #808080;
    display: flex;
    align-items: center;
    gap: 10px;
}

.win-tool-btn {
    background: #c0c0c0;
    border: 1px solid;
    border-color: #fff #808080 #808080 #fff;
    padding: 4px 8px;
    font-size: 11px;
    cursor: pointer;
    display: flex;
    align-items: center;
    gap: 5px;
}

.win-tool-btn:active {
    border-color: #808080 #fff #fff #808080;
}

.win-tool-btn:disabled {
    color: #808080;
    cursor: default;
}

.win-address-wrapper {
    flex: 1;
    display: flex;
    align-items: center;
    gap: 5px;
    font-size: 12px;
}

#fm-address-bar {
    flex: 1;
    border: 2px solid;
    border-color: #808080 #fff #fff #808080;
    padding: 2px 5px;
    font-family: var(--font-mono);
    font-size: 12px;
    background: white;
}

/* Body Layout */
.win-body {
    flex: 1;
    display: flex;
    border-top: 1px solid #fff;
}

.win-sidebar {
    width: 150px;
    background: #c0c0c0; /* Or white in some versions, sticking to gray for structure */
    border-right: 2px solid;
    border-color: #808080 #fff #fff #808080;
    padding: 10px;
    display: flex;
    flex-direction: column;
    gap: 10px;
}

.sidebar-item {
    display: flex;
    flex-direction: column;
    align-items: center;
    font-size: 11px;
    text-align: center;
    cursor: pointer;
    margin-bottom: 10px;
}

.sidebar-item img {
    width: 32px;
    height: 32px;
    margin-bottom: 2px;
}

.sidebar-info-box {
    margin-top: auto;
    background: linear-gradient(to right, #000080, #1084d0);
    color: white;
    padding: 10px;
    font-size: 11px;
    border: 1px solid #808080;
}

.win-file-view {
    flex: 1;
    background: white;
    border: 2px solid;
    border-color: #808080 #fff #fff #808080;
    overflow-y: auto;
    position: relative;
}

/* Table Styles */
.fm-table {
    width: 100%;
    border-collapse: collapse;
    font-size: 12px;
    table-layout: fixed;
}

.fm-table th {
    background: #c0c0c0;
    border: 1px solid;
    border-color: #fff #808080 #808080 #fff;
    text-align: left;
    padding: 2px 5px;
    font-weight: normal;
    color: #000;
    position: sticky;
    top: 0;
}

.fm-table td {
    padding: 4px 5px;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    cursor: pointer;
    user-select: none;
}

.fm-row {
    border: 1px solid transparent;
}

.fm-row:hover {
    background-color: #f0f0f0;
}

.fm-row.selected {
    background-color: #000080;
    color: white;
    border: 1px dotted #fff;
}

.fm-icon {
    width: 16px;
    height: 16px;
    vertical-align: text-bottom;
    margin-right: 5px;
}

/* Status Bar */
.win-status-bar {
    border-top: 1px solid #808080;
    padding: 2px 10px;
    font-size: 11px;
    display: flex;
    gap: 20px;
    background: #c0c0c0;
}

/* Retro Modal Dialog */
.retro-modal-overlay {
    position: fixed;
    top: 0; left: 0; width: 100%; height: 100%;
    background: rgba(0,0,0,0); /* Transparent but blocking */
    z-index: 20000;
    display: flex;
    justify-content: center;
    align-items: center;
}

.retro-modal-overlay.hidden {
    display: none;
}

.retro-window {
    width: 350px;
    background: #c0c0c0;
    border: 2px solid;
    border-color: #fff #808080 #808080 #fff;
    box-shadow: 5px 5px 20px rgba(0,0,0,0.5);
    padding: 2px;
    display: flex;
    flex-direction: column;
}

.retro-title-bar {
    background: #000080;
    color: white;
    padding: 3px 5px;
    font-size: 12px;
    font-weight: bold;
    display: flex;
    justify-content: space-between;
    align-items: center;
}

.retro-close-btn {
    width: 16px;
    height: 14px;
    background: #c0c0c0;
    border: 1px solid;
    border-color: #fff #808080 #808080 #fff;
    font-size: 9px;
    line-height: 10px;
    font-weight: bold;
    cursor: pointer;
}

.retro-content {
    padding: 15px;
    display: flex;
    gap: 15px;
    align-items: center;
}

.retro-text-area {
    font-size: 12px;
    color: #000;
    line-height: 1.4;
}

.retro-footer {
    display: flex;
    justify-content: center;
    padding: 10px;
}

.retro-btn {
    background: #c0c0c0;
    border: 1px solid;
    border-color: #fff #808080 #808080 #fff;
    padding: 4px 20px;
    font-size: 12px;
    cursor: pointer;
    min-width: 70px;
}

.retro-btn:active {
    border-color: #808080 #fff #fff #808080;
    transform: translateY(1px);
}

@media (max-width: 768px) {
    .win-sidebar {
        display: none; /* Hide sidebar on mobile */
    }
    .fm-table th:nth-child(3), 
    .fm-table td:nth-child(3),
    .fm-table th:nth-child(4), 
    .fm-table td:nth-child(4) {
        display: none; /* Hide size and date on small screens */
    }
}


/* Adicione esta classe ao final do seu style.css */

/* UTILITY FOR DOWNLOAD BUTTON */
#attest-download-btn {
    background-color: #28a745 !important; /* Green for download action */
    border-color: #28a745 !important;
    color: white !important;
}

#attest-download-btn:hover {
    background-color: #1a7834 !important;
    transform: translateY(-2px);
}




/* --- ESTILOS PARA O EFEITO DE CHUVA --- */
.rain {
    position: absolute;
    width: 2px;
    height: 30px; /* Tamanho da gota */
    background: linear-gradient(to bottom, rgba(173, 216, 230, 0) 0%, rgba(173, 216, 230, 0.8) 100%); /* Cor da gota */
    animation: rain-fall 1s linear infinite;
    opacity: 0;
    pointer-events: none;
    will-change: transform, opacity;
}

@keyframes rain-fall {
    0% {
        transform: translateY(-50px);
        opacity: 0;
    }
    20% {
        opacity: 0.8;
    }
    100% {
        transform: translateY(100vh);
        opacity: 0;
    }
}

/* Modal de alerta para a chuva */
.rain-alert-modal {
    position: fixed;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    background: rgba(30, 30, 30, 0.95);
    color: white;
    padding: 2.5rem;
    border-radius: 10px;
    box-shadow: 0 0 20px rgba(0,0,0,0.8);
    text-align: center;
    font-family: var(--font-mono);
    z-index: 10000; /* Acima da chuva */
    max-width: 400px;
    border: 2px solid var(--accent-lime);
    opacity: 0;
    visibility: hidden;
    transition: opacity 0.5s ease, visibility 0.5s ease;
}

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

.rain-alert-modal h3 {
    font-family: var(--font-heading);
    color: var(--accent-lime);
    margin-bottom: 1rem;
    font-size: 1.8rem;
}

.rain-alert-modal p {
    font-size: 1rem;
    line-height: 1.5;
    margin-bottom: 1.5rem;
}

.rain-alert-modal button {
    background: var(--primary-blue);
    color: white;
    border: none;
    padding: 0.8rem 1.5rem;
    border-radius: 5px;
    cursor: pointer;
    font-family: var(--font-mono);
    font-size: 0.9rem;
    transition: background 0.3s ease;
}

.rain-alert-modal button:hover {
    background: var(--accent-lime);
}


/* --- ESTILOS DO LOADER DE ENTRADA --- */
#intro-loader {
    position: fixed;
    top: 0;
    left: 0;
    width: 100vw;
    height: 100vh;
    z-index: 9999999; /* Acima de tudo, inclusive cursor */
    display: flex;
    justify-content: center;
    align-items: center;
    pointer-events: none; /* Permite clique após finalizar */
}

/* Fundo branco/off-white que vai sumir */
.loader-bg {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background-color: var(--off-white);
    transition: opacity 0.8s ease-in-out;
    z-index: 1;
}

/* O container do logo que vai se mover */
.intro-logo-wrapper {
    position: relative;
    z-index: 2;
    width: 300px; /* Tamanho inicial grande */
    height: 150px;
    display: flex;
    justify-content: center;
    align-items: center;
    transform-origin: center center; /* Importante para o scale funcionar do centro */
    will-change: transform, top, left;
}

/* O Texto SVG */
.intro-svg {
    width: 100%;
    height: 100%;
    font-family: var(--font-heading); /* Clash Display */
    font-weight: 700;
}

.intro-text {
    font-size: 50px;
    fill: transparent;
    stroke: var(--primary-blue);
    stroke-width: 1px; /* Começa fino desenhando */
    stroke-dasharray: 300;
    stroke-dashoffset: 300;
    animation: drawLogo 2.5s ease-in-out forwards, fillLogo 0.5s ease-out 2.5s forwards;
}

/* Animação de "Desenhar" o logo */
@keyframes drawLogo {
    0% {
        stroke-dashoffset: 300;
    }
    100% {
        stroke-dashoffset: 0;
    }
}

/* Animação de preencher e ficar solido */
@keyframes fillLogo {
    to {
        fill: var(--primary-blue);
        stroke-width: 0;
    }
}

/* Classes controladas via JS para a transição */
.loader-finished .loader-bg {
    opacity: 0;
}

/* Esconde o scroll durante o load */
body.loading-locked {
    overflow: hidden !important;
}

/* Esconde o logo original da navbar enquanto a animação acontece */
.logo.hidden-initially {
    opacity: 0;
}



/* --- COURSE SECTION STYLES (METODOLOGIA DO MESTRE) --- */

.wood-tech-bg {
    background-color: #2b1d0e; /* Dark Wood */
    background-image: 
        linear-gradient(rgba(0, 0, 0, 0.7), rgba(0, 0, 0, 0.7)),
        url("data:image/svg+xml,%3Csvg width='100' height='100' viewBox='0 0 100 100' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath d='M11 18c3.866 0 7-3.134 7-7s-3.134-7-7-7-7 3.134-7 7 3.134 7 7 7zm48 25c3.866 0 7-3.134 7-7s-3.134-7-7-7-7 3.134-7 7 3.134 7 7 7zm-43-7c1.657 0 3-1.343 3-3s-1.343-3-3-3-3 1.343-3 3 1.343 3 3 3zm63 31c1.657 0 3-1.343 3-3s-1.343-3-3-3-3 1.343-3 3 1.343 3 3 3zM34 90c1.657 0 3-1.343 3-3s-1.343-3-3-3-3 1.343-3 3 1.343 3 3 3zm56-76c1.657 0 3-1.343 3-3s-1.343-3-3-3-3 1.343-3 3 1.343 3 3 3zM12 86c2.21 0 4-1.79 4-4s-1.79-4-4-4-4 1.79-4 4 1.79 4 4 4zm28-65c2.21 0 4-1.79 4-4s-1.79-4-4-4-4 1.79-4 4 1.79 4 4 4zm23-11c2.76 0 5-2.24 5-5s-2.24-5-5-5-5 2.24-5 5 2.24 5 5 5zm-6 60c2.21 0 4-1.79 4-4s-1.79-4-4-4-4 1.79-4 4 1.79 4 4 4zm29 22c2.76 0 5-2.24 5-5s-2.24-5-5-5-5 2.24-5 5 2.24 5 5 5zM32 63c2.76 0 5-2.24 5-5s-2.24-5-5-5-5 2.24-5 5 2.24 5 5 5zm57-13c2.76 0 5-2.24 5-5s-2.24-5-5-5-5 2.24-5 5 2.24 5 5 5zm-9-21c1.105 0 2-.895 2-2s-.895-2-2-2-2 .895-2 2 .895 2 2 2zM60 91c1.105 0 2-.895 2-2s-.895-2-2-2-2 .895-2 2 .895 2 2 2zM35 41c1.105 0 2-.895 2-2s-.895-2-2-2-2 .895-2 2 .895 2 2 2zM12 60c1.105 0 2-.895 2-2s-.895-2-2-2-2 .895-2 2 .895 2 2 2z' fill='%235c4033' fill-opacity='0.1' fill-rule='evenodd'/%3E%3C/svg%3E");
    border-top: 5px solid #8B4513;
    border-bottom: 5px solid #8B4513;
    position: relative;
    overflow: hidden;
}

.course-header {
    text-align: center;
    margin-bottom: 4rem;
}

.course-badge {
    background: var(--danger);
    color: white;
    display: inline-block;
    padding: 0.5rem 1.5rem;
    font-weight: bold;
    transform: rotate(-2deg);
    box-shadow: 0 5px 15px rgba(0,0,0,0.5);
    margin-bottom: 1rem;
    font-family: var(--font-heading);
}

.course-subtitle {
    font-size: 1.5rem;
    color: #ccc;
    font-family: var(--font-hand);
    margin-bottom: 2rem;
}

.course-status-bar {
    background: #000;
    border: 2px solid var(--accent-lime);
    display: inline-block;
    padding: 0.8rem 2rem;
    border-radius: 50px;
    font-family: var(--font-mono);
    color: var(--accent-lime);
    box-shadow: 0 0 20px rgba(197, 248, 42, 0.2);
}

.status-label { opacity: 0.7; font-size: 0.8rem; }
.status-value { font-weight: bold; margin-left: 5px; }
.status-sep { margin: 0 1rem; color: #555; }

/* Manifesto Terminal */
.manifesto-terminal {
    background: #0c0c0c;
    border-radius: 10px;
    border: 1px solid #333;
    box-shadow: 0 20px 50px rgba(0,0,0,0.6);
    margin-bottom: 4rem;
    font-family: var(--font-mono);
    max-width: 900px;
    margin-left: auto;
    margin-right: auto;
}

.terminal-header {
    background: #1a1a1a;
    padding: 10px 15px;
    border-radius: 10px 10px 0 0;
    display: flex;
    align-items: center;
    gap: 8px;
}

.dot { width: 12px; height: 12px; border-radius: 50%; display: inline-block; }
.dot.red { background: #ff5f56; }
.dot.yellow { background: #ffbd2e; }
.dot.green { background: #27c93f; }

.terminal-title {
    margin-left: 10px;
    color: #888;
    font-size: 0.8rem;
}

.terminal-body {
    padding: 2rem;
    color: #ddd;
    line-height: 1.8;
}

.manifesto-text {
    margin-bottom: 1.5rem;
}

/* Pillars Grid */
.pillars-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(250px, 1fr));
    gap: 2rem;
    margin-bottom: 4rem;
}

.pillar-card {
    background: rgba(255, 255, 255, 0.05);
    border: 1px solid rgba(255, 255, 255, 0.1);
    padding: 2rem;
    border-radius: 12px;
    backdrop-filter: blur(5px);
    transition: all 0.3s;
    position: relative;
    overflow: hidden;
}

.pillar-card:hover {
    background: rgba(255, 255, 255, 0.1);
    border-color: var(--accent-lime);
    transform: translateY(-5px);
}

.pillar-icon {
    font-size: 2.5rem;
    margin-bottom: 1rem;
}

.pillar-card h4 {
    color: var(--accent-lime);
    margin-bottom: 1rem;
    font-size: 1.1rem;
}

.pillar-card p {
    color: #ccc;
    font-size: 0.9rem;
    margin-bottom: 1.5rem;
}

.pillar-list {
    list-style: none;
    font-size: 0.85rem;
    color: #aaa;
}

.pillar-list li {
    margin-bottom: 0.5rem;
    padding-left: 10px;
    border-left: 2px solid var(--primary-blue);
}

/* Curriculum Accordion */
.curriculum-section {
    margin-bottom: 5rem;
    max-width: 900px;
    margin-left: auto;
    margin-right: auto;
}

.subsection-title {
    text-align: center;
    color: white;
    font-size: 2rem;
    margin-bottom: 2rem;
}

.accordion-wrapper {
    display: flex;
    flex-direction: column;
    gap: 1rem;
}

.accordion-item {
    background: #1a1a1a;
    border: 1px solid #333;
    border-radius: 8px;
    overflow: hidden;
    transition: all 0.3s;
}

.accordion-item.active {
    border-color: var(--accent-lime);
    box-shadow: 0 0 15px rgba(197, 248, 42, 0.1);
}

.accordion-header {
    padding: 1.5rem;
    display: flex;
    align-items: center;
    cursor: pointer;
    background: #222;
    transition: background 0.2s;
}

.accordion-header:hover {
    background: #2a2a2a;
}

.module-tag {
    background: #444;
    color: white;
    padding: 0.3rem 0.8rem;
    border-radius: 4px;
    font-size: 0.7rem;
    font-weight: bold;
    margin-right: 1.5rem;
    min-width: 80px;
    text-align: center;
}

.module-tag.mid { background: var(--primary-blue); }
.module-tag.high { background: #ff9800; color: black; }
.module-tag.god { background: var(--gold); color: black; }

.accordion-header h4 {
    flex: 1;
    color: white;
    margin: 0;
    font-size: 1.1rem;
}

.accordion-header i {
    color: #666;
    transition: transform 0.3s;
}

.accordion-item.active .accordion-header i {
    transform: rotate(180deg);
    color: var(--accent-lime);
}

.accordion-content {
    max-height: 0;
    overflow: hidden;
    transition: max-height 0.4s ease-out;
    background: #111;
}

.lesson-list {
    padding: 1.5rem;
    list-style: none;
    color: #ccc;
    font-family: var(--font-mono);
    font-size: 0.9rem;
}

.lesson-list li {
    margin-bottom: 0.8rem;
    border-bottom: 1px solid #222;
    padding-bottom: 0.5rem;
}

.lesson-list li strong {
    color: var(--primary-blue);
}

/* Loot Box 3D */
.lootbox-section {
    text-align: center;
    margin-bottom: 5rem;
    perspective: 1000px;
}

.lootbox-container {
    width: 200px;
    height: 200px;
    margin: 0 auto;
    position: relative;
    transform-style: preserve-3d;
    cursor: pointer;
    transition: transform 0.5s;
}

.lootbox-container:hover {
    transform: rotateY(15deg) rotateX(10deg);
}

.crate {
    width: 100%;
    height: 100%;
    position: absolute;
    transform-style: preserve-3d;
    animation: float 3s infinite ease-in-out;
}

.crate-side {
    position: absolute;
    width: 200px;
    height: 200px;
    background: #5d4037;
    border: 5px solid #3e2723;
    display: flex;
    align-items: center;
    justify-content: center;
    box-shadow: inset 0 0 20px rgba(0,0,0,0.5);
}

/* Wood texture via repeating linear gradient */
.crate-side::before {
    content: '';
    position: absolute;
    width: 100%; height: 100%;
    background: repeating-linear-gradient(45deg, transparent, transparent 10px, rgba(0,0,0,0.1) 10px, rgba(0,0,0,0.1) 20px);
}

.crate-logo {
    font-family: var(--font-retro);
    font-size: 3rem;
    color: rgba(0,0,0,0.3);
    z-index: 2;
}

.crate-warn {
    position: absolute;
    bottom: 20px;
    background: var(--danger);
    color: white;
    padding: 2px 10px;
    font-size: 0.8rem;
    font-weight: bold;
    transform: rotate(-5deg);
}

.front  { transform: translateZ(100px); }
.back   { transform: rotateY(180deg) translateZ(100px); }
.right  { transform: rotateY(90deg) translateZ(100px); }
.left   { transform: rotateY(-90deg) translateZ(100px); }
.top    { transform: rotateX(90deg) translateZ(100px); background: #6d4c41; }
.bottom { transform: rotateX(-90deg) translateZ(100px); box-shadow: 0 0 50px rgba(0,0,0,0.8); }

.lootbox-container.opened .top {
    transform: rotateX(180deg) translateZ(100px) translateY(-50px);
    opacity: 0;
    transition: all 0.5s;
}

.loot-items {
    position: absolute;
    top: 50%; left: 50%;
    transform: translate(-50%, -50%);
    width: 100%; height: 100%;
    pointer-events: none;
    transform-style: preserve-3d;
}

.loot-item {
    position: absolute;
    font-size: 3rem;
    opacity: 0;
    transition: all 0.5s cubic-bezier(0.175, 0.885, 0.32, 1.275);
}

/* Posições para os novos itens da Loot Box */
.lootbox-container.opened .l6  { transform: translate(-130px, -100px) rotate(-15deg); opacity: 1; }
.lootbox-container.opened .l7  { transform: translate(130px, -100px) rotate(15deg); opacity: 1; }
.lootbox-container.opened .l10 { transform: translate(-90px, -260px) rotate(-5deg); opacity: 1; }
.lootbox-container.opened .l11 { transform: translate(90px, -260px) rotate(5deg); opacity: 1; }

.lootbox-container.opened .l1 { transform: translate(-80px, -150px) rotate(-10deg); opacity: 1; }
.lootbox-container.opened .l2 { transform: translate(80px, -150px) rotate(10deg); opacity: 1; }
.lootbox-container.opened .l3 { transform: translate(-60px, -220px) rotate(-20deg); opacity: 1; }
.lootbox-container.opened .l4 { transform: translate(60px, -220px) rotate(20deg); opacity: 1; }
.lootbox-container.opened .l5 { transform: translate(0px, -280px) scale(1.5); opacity: 1; text-shadow: 0 0 20px gold; z-index: 10; }

.loot-desc-display {
    margin-top: 100px; /* Space for flying items */
    min-height: 50px;
    color: var(--accent-lime);
    font-family: var(--font-mono);
    background: rgba(0,0,0,0.5);
    display: inline-block;
    padding: 1rem;
    border-radius: 8px;
    border: 1px dashed #555;
    opacity: 0;
    transition: opacity 0.5s;
}

.lootbox-container.opened + .loot-desc-display {
    opacity: 1;
}

/* Course Bottom Grid */
.course-bottom-grid {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 3rem;
    align-items: stretch;
}

.survivor-testimonials {
    background: #151515;
    padding: 2rem;
    border-radius: 12px;
    border: 1px solid #333;
}

.survivor-testimonials h3 {
    color: white;
    margin-bottom: 2rem;
}

.survivor-quote {
    background: #222;
    padding: 1.5rem;
    border-radius: 8px;
    margin-bottom: 1.5rem;
    border-left: 3px solid var(--primary-blue);
}

.survivor-quote p {
    color: #ccc;
    font-style: italic;
    margin-bottom: 1rem;
}

.survivor-quote span {
    color: var(--accent-lime);
    font-size: 0.85rem;
    font-weight: bold;
}

/* Course Pricing */
.course-pricing {
    background: #fff;
    color: #1a1a1a;
    padding: 2rem;
    border-radius: 12px;
    border: 4px solid var(--gold);
    text-align: center;
    display: flex;
    flex-direction: column;
    justify-content: center;
}

.course-pricing h3 {
    font-size: 1.5rem;
    margin-bottom: 0.5rem;
}

.small-disclaimer {
    font-size: 0.8rem;
    color: #666;
    margin-bottom: 2rem;
}

.pricing-tiers {
    list-style: none;
    text-align: left;
    margin-bottom: 2rem;
}

.pricing-tiers li {
    display: flex;
    justify-content: space-between;
    padding: 1rem 0;
    border-bottom: 1px dashed #ccc;
}

.tier-name {
    font-weight: bold;
    font-family: var(--font-heading);
    font-size: 1.1rem;
}

.tier-cost {
    text-align: right;
    font-family: var(--font-mono);
    font-weight: bold;
    color: #d84315;
}

.tier-cost small {
    display: block;
    color: #888;
    font-weight: normal;
    font-size: 0.7rem;
}

.btn-buy-course {
    background: #000;
    color: var(--gold);
    border: 2px solid var(--gold);
    padding: 1rem;
    font-size: 1.2rem;
    font-weight: bold;
    font-family: var(--font-heading);
    cursor: pointer;
    transition: all 0.2s;
    width: 100%;
}

.btn-buy-course:hover {
    background: var(--gold);
    color: #000;
    box-shadow: 0 5px 15px rgba(255, 215, 0, 0.4);
}

.btn-sub {
    display: block;
    font-size: 0.6rem;
    font-weight: normal;
    margin-top: 5px;
    opacity: 0.7;
    font-family: var(--font-body);
}

@media (max-width: 900px) {
    .course-bottom-grid {
        grid-template-columns: 1fr;
    }
}

/* Container de Rolagem dos Depoimentos */
.testimonials-scroll-wrapper {
    max-height: 300px; /* Altura máxima antes de criar a barra de rolagem */
    overflow-y: auto;  /* Ativa a rolagem vertical */
    padding-right: 10px; /* Espaço para não colar o texto na barra */
}

/* Estilizando a Barra de Rolagem para ficar "Tech" */
.testimonials-scroll-wrapper::-webkit-scrollbar {
    width: 8px;
}

.testimonials-scroll-wrapper::-webkit-scrollbar-track {
    background: #111; 
    border-radius: 4px;
}

.testimonials-scroll-wrapper::-webkit-scrollbar-thumb {
    background-color: #333; 
    border-radius: 4px;
    border: 1px solid #444;
}

.testimonials-scroll-wrapper::-webkit-scrollbar-thumb:hover {
    background-color: var(--accent-lime); /* Fica verde ao passar o mouse */
}

/* Cursor piscando estilo terminal */
.typing-cursor::after {
    content: '▋'; /* Bloquinho estilo terminal */
    display: inline-block;
    margin-left: 2px;
    color: var(--accent-lime); /* A cor verde neon do seu tema */
    animation: blinkCursor 0.8s infinite;
    vertical-align: baseline;
}

@keyframes blinkCursor {
    0%, 100% { opacity: 1; }
    50% { opacity: 0; }
}

/* Esconder o texto inicialmente para não aparecer antes do JS rodar */
.manifesto-text {
    visibility: hidden; 

}

/* Classe auxiliar para quando o texto estiver visível/digitando */
.manifesto-text.visible {
    visibility: visible;
}

/* MOBILE WARNING MODAL STYLES */
.mw-overlay {
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background: rgba(0, 0, 0, 0.9);
    z-index: 100000; /* Acima de quase tudo */
    display: flex;
    justify-content: center;
    align-items: center;
    padding: 2rem;
    opacity: 0;
    pointer-events: none;
    transition: opacity 0.5s ease;
    backdrop-filter: blur(10px);
}

.mw-overlay.active {
    opacity: 1;
    pointer-events: all;
}

.mw-card {
    background: #0f0f0f;
    border: 1px solid var(--accent-lime);
    box-shadow: 0 0 30px rgba(197, 248, 42, 0.2);
    border-radius: 12px;
    width: 100%;
    max-width: 450px;
    overflow: hidden;
    transform: translateY(20px) scale(0.9);
    transition: transform 0.5s cubic-bezier(0.175, 0.885, 0.32, 1.275);
}

.mw-overlay.active .mw-card {
    transform: translateY(0) scale(1);
}

.mw-header {
    background: #1a1a1a;
    padding: 10px 15px;
    border-bottom: 1px solid #333;
    display: flex;
    align-items: center;
    gap: 8px;
}

.mw-dot {
    width: 10px;
    height: 10px;
    border-radius: 50%;
    display: inline-block;
}
.mw-dot.red { background: #ff5f56; }
.mw-dot.yellow { background: #ffbd2e; }
.mw-dot.green { background: #27c93f; }

.mw-title {
    font-family: var(--font-mono);
    color: #666;
    font-size: 0.75rem;
    margin-left: auto;
}

.mw-content {
    padding: 2rem;
    text-align: center;
    color: #eee;
}

.mw-icon {
    font-size: 3rem;
    margin-bottom: 1rem;
    animation: float 3s infinite ease-in-out;
}

.mw-content h3 {
    font-family: var(--font-heading);
    color: var(--accent-lime);
    margin-bottom: 1rem;
    font-size: 1.5rem;
    text-transform: uppercase;
    line-height: 1.2;
}

.mw-content p {
    font-size: 0.95rem;
    line-height: 1.6;
    margin-bottom: 1.5rem;
    color: #ccc;
}

.mw-content strong {
    color: white;
}

.mw-stats {
    background: #1a1a1a;
    padding: 1rem;
    border-radius: 8px;
    margin-bottom: 1.5rem;
    text-align: left;
}

.mw-stat-row {
    margin-bottom: 0.8rem;
}

.mw-stat-row:last-child {
    margin-bottom: 0;
}

.mw-stat-row span {
    font-size: 0.75rem;
    color: #888;
    text-transform: uppercase;
    display: block;
    margin-bottom: 4px;
    font-family: var(--font-mono);
}

.mw-bar {
    height: 6px;
    background: #333;
    border-radius: 3px;
    overflow: hidden;
}

.mw-fill {
    height: 100%;
    background: var(--accent-lime);
    box-shadow: 0 0 10px var(--accent-lime);
    animation: fillMw 1.5s ease-out forwards;
}

.mw-fill.warning {
    background: #ff9800;
    box-shadow: none;
}

@keyframes fillMw {
    from { width: 0; }
}

.mw-note {
    font-size: 0.7rem !important;
    font-style: italic;
    color: #555 !important;
    margin-bottom: 0 !important;
}

.mw-footer {
    padding: 1rem 2rem 2rem;
}

.mw-btn {
    width: 100%;
    background: transparent;
    border: 2px solid var(--accent-lime);
    color: var(--accent-lime);
    padding: 1rem;
    font-family: var(--font-heading);
    font-weight: bold;
    font-size: 1rem;
    cursor: pointer;
    transition: all 0.2s;
    text-transform: uppercase;
}

.mw-btn:hover {
    background: var(--accent-lime);
    color: #000;
    box-shadow: 0 0 20px rgba(197, 248, 42, 0.4);
    transform: translateY(-2px);
}

/* Responsividade do próprio modal */
@media (min-width: 1024px) {
    /* Opcional: Se quiser esconder o aviso em telas grandes mesmo que o JS falhe, 
       mas vamos controlar via JS */
}


/* --- XP NAVBAR STYLES (The Highlighter) --- */

/* Wrapper para posicionamento absoluto (Fixo apenas na seção inicial) */
.xp-nav-wrapper {
    position: absolute;
    top: 40px;
    right: 40px;
    z-index: 1000;
}

/* O Botão Trigger */
.xp-trigger-btn {
    background: rgba(15, 23, 42, 0.9);
    border: 2px solid var(--primary-blue);
    padding: 0.8rem 1.5rem;
    border-radius: 12px;
    cursor: pointer; /* Cursor pointer padrão do navegador para ser clicável */
    display: flex;
    align-items: center;
    gap: 8px;
    font-family: var(--font-mono);
    font-weight: 800;
    font-size: 1.2rem;
    color: #fff;
    box-shadow: 0 10px 25px rgba(45, 52, 226, 0.3);
    transition: all 0.3s cubic-bezier(0.175, 0.885, 0.32, 1.275);
    position: relative;
    overflow: hidden;
}

.xp-trigger-btn:hover {
    transform: scale(1.05) rotate(-2deg);
    background: var(--primary-blue);
    box-shadow: 0 15px 35px rgba(45, 52, 226, 0.5);
    border-color: var(--accent-lime);
}

.xp-bracket {
    color: var(--accent-lime);
    transition: transform 0.3s;
}

.xp-trigger-btn:hover .xp-bracket:first-child { transform: translateX(-3px); }
.xp-trigger-btn:hover .xp-bracket:last-child { transform: translateX(3px); }

.xp-text {
    color: #fff;
    letter-spacing: 1px;
}

/* Ícone de mãozinha animada */
.xp-cursor-icon {
    font-size: 1.2rem;
    position: absolute;
    bottom: -20px;
    right: 10px;
    transition: bottom 0.3s cubic-bezier(0.68, -0.55, 0.27, 1.55);
    transform: rotate(-15deg);
}

.xp-trigger-btn:hover .xp-cursor-icon {
    bottom: 5px;
    animation: tap 0.5s infinite alternate;
}

@keyframes tap {
    from { transform: rotate(-15deg) scale(1); }
    to { transform: rotate(-15deg) scale(0.8); }
}

/* MENU OVERLAY (Fullscreen) */
.xp-menu-overlay {
    position: fixed;
    top: 0;
    left: 0;
    width: 100vw;
    height: 100vh;
    background: rgba(10, 10, 10, 0.98);
    z-index: 100000; /* Acima de tudo */
    display: flex;
    justify-content: center;
    align-items: center;
    clip-path: circle(0% at 95% 5%); /* Começa fechado no canto superior direito */
    transition: clip-path 0.8s cubic-bezier(0.77, 0, 0.175, 1);
    pointer-events: none;
    backdrop-filter: blur(10px);
}

.xp-menu-overlay.active {
    clip-path: circle(150% at 95% 5%);
    pointer-events: all;
}

/* Conteúdo do Menu */
.xp-menu-content {
    width: 90%;
    max-width: 1400px;
    height: 90%;
    display: flex;
    flex-direction: column;
    color: white;
    position: relative;
}

.xp-close-btn {
    position: absolute;
    top: 0;
    right: 0;
    background: transparent;
    border: 2px solid var(--danger);
    color: var(--danger);
    width: 50px;
    height: 50px;
    border-radius: 50%;
    font-size: 1.5rem;
    font-family: var(--font-heading);
    cursor: pointer;
    transition: all 0.3s;
    z-index: 10;
}

.xp-close-btn:hover {
    background: var(--danger);
    color: white;
    transform: rotate(90deg);
}

.xp-menu-header {
    margin-bottom: 2rem;
    border-bottom: 1px solid rgba(255,255,255,0.1);
    padding-bottom: 1rem;
}

.xp-menu-header h2 {
    font-size: 3rem;
    margin-bottom: 0.5rem;
    color: white;
}

.highlight-marker {
    position: relative;
    color: var(--primary-blue);
    z-index: 1;
}

/* Efeito Marca-Texto no Título */
.highlight-marker::after {
    content: '';
    position: absolute;
    bottom: 5px;
    left: -5px;
    width: 105%;
    height: 15px;
    background: var(--accent-lime);
    z-index: -1;
    transform: skew(-10deg);
}

/* Grid de Links */
.xp-links-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(180px, 1fr));
    gap: 2rem;
    overflow-y: auto;
    padding-right: 1rem;
    flex: 1;
}

/* Scrollbar do Menu */
.xp-links-grid::-webkit-scrollbar { width: 6px; }
.xp-links-grid::-webkit-scrollbar-track { background: #222; }
.xp-links-grid::-webkit-scrollbar-thumb { background: var(--primary-blue); border-radius: 3px; }

.xp-col h3 {
    font-family: var(--font-mono);
    color: var(--accent-lime);
    font-size: 0.9rem;
    margin-bottom: 1.5rem;
    opacity: 0.8;
    text-transform: uppercase;
    letter-spacing: 2px;
    border-bottom: 1px dashed #444;
    padding-bottom: 5px;
}

/* Links Estilizados */
.xp-link {
    display: block;
    font-size: 1.1rem;
    color: #ccc;
    margin-bottom: 0.8rem;
    text-decoration: none;
    position: relative;
    width: fit-content;
    transition: color 0.2s;
    font-family: var(--font-body);
}

/* THE HIGHLIGHTER EFFECT HOVER */
.xp-link::before {
    content: '';
    position: absolute;
    bottom: 2px;
    left: 0;
    width: 0%;
    height: 8px;
    background: var(--primary-blue);
    z-index: -1;
    transition: width 0.3s cubic-bezier(0.22, 1, 0.36, 1);
    opacity: 0.7;
}

.xp-link:hover {
    color: white;
    padding-left: 5px; /* Pequeno pulo */
}

.xp-link:hover::before {
    width: 100%;
}

/* Animação de entrada dos itens (Staggered) */
.xp-menu-overlay.active .xp-col {
    animation: fadeInUp 0.5s ease forwards;
    opacity: 0;
    transform: translateY(20px);
}

.xp-menu-overlay.active .xp-col:nth-child(1) { animation-delay: 0.1s; }
.xp-menu-overlay.active .xp-col:nth-child(2) { animation-delay: 0.2s; }
.xp-menu-overlay.active .xp-col:nth-child(3) { animation-delay: 0.3s; }
.xp-menu-overlay.active .xp-col:nth-child(4) { animation-delay: 0.4s; }
.xp-menu-overlay.active .xp-col:nth-child(5) { animation-delay: 0.5s; }
.xp-menu-overlay.active .xp-col:nth-child(6) { animation-delay: 0.6s; }

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

/* Mobile Adjustments */
@media (max-width: 900px) {
    .xp-nav-wrapper {
        top: 20px;
        right: 20px;
    }
    
    .xp-menu-header h2 {
        font-size: 2rem;
    }
    
    .xp-links-grid {
        grid-template-columns: 1fr 1fr;
    }
}

@media (max-width: 500px) {
    .xp-links-grid {
        grid-template-columns: 1fr;
    }
    .xp-col {
        margin-bottom: 1rem;
    }
}



/* IMPORT FONTS */
:root {
    --primary-blue: #2D34E2;   /* Deep bold blue */
    --accent-lime: #C5F82A;    /* Neon lime green */
    --off-white: #F4F4F9;
    --dark-text: #1a1a1a;
    --light-gray: #e0e0e0;
    --danger: #FF4D4D;
    
    --font-heading: 'Clash Display', sans-serif;
    --font-body: 'Space Grotesk', sans-serif;
    --font-mono: 'JetBrains Mono', monospace;
    --font-retro: 'Press Start 2P', cursive;
    --font-hand: 'Architects Daughter', cursive;
    
    --container-width: 1200px;
    --border-radius: 16px;
}

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

html, body {
    cursor: none;
    background-color: var(--off-white);
    color: var(--dark-text);
    font-family: var(--font-body);
    overflow-x: hidden;
    line-height: 1.5;
}

/* CUSTOM CURSOR - Z-INDEX FIX */
.cursor {
    width: 10px;
    height: 10px;
    background: var(--primary-blue);
    border-radius: 50%;
    position: fixed;
    top: 0;
    left: 0;
    pointer-events: none;
    z-index: 999999; /* Max Z-Index for safety */
    transform: translate(-50%, -50%);
    transition: transform 0.1s;
}

.cursor-follower {
    width: 40px;
    height: 40px;
    border: 1px solid var(--primary-blue);
    border-radius: 50%;
    position: fixed;
    top: 0;
    left: 0;
    pointer-events: none;
    z-index: 999998; /* Just below dot */
    transform: translate(-50%, -50%);
    transition: transform 0.15s, width 0.3s, height 0.3s, background-color 0.3s;
}

.cursor-hover {
    transform: translate(-50%, -50%) scale(1.8);
    background-color: rgba(197, 248, 42, 0.2); /* Lime tint */
    border-color: var(--accent-lime);
}

/* TYPOGRAPHY UTILS */
h1, h2, h3, h4 {
    font-family: var(--font-heading);
    font-weight: 600;
}

.highlight-text {
    color: var(--primary-blue);
}

.text-red {
    color: var(--danger);
}

.highlight-lime {
    color: var(--accent-lime);
}

.highlight-purple {
    color: #b084ff;
}

.highlight-stroke {
    -webkit-text-stroke: 1px var(--primary-blue);
    color: transparent;
}

a {
    text-decoration: none;
    color: inherit;
    cursor: none; /* Enforce custom cursor on links */
}

/* NAVIGATION */
nav {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 2rem 4rem;
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    z-index: 100;
}

.logo-wrapper {
    display: flex;
    align-items: center;
}

.logo {
    font-family: var(--font-heading);
    font-size: 2rem;
    font-weight: 700;
    color: var(--primary-blue);
    display: flex;
    align-items: center;
    cursor: none;
    position: relative;
}

.logo .initials {
    transition: opacity 0.3s;
}

.logo .full-name {
    max-width: 0;
    opacity: 0;
    overflow: hidden;
    white-space: nowrap;
    font-size: 1.5rem;
    color: var(--dark-text);
    font-weight: 600;
    font-family: var(--font-mono);
    padding-left: 10px;
    transition: all 0.5s;
    background: var(--accent-lime);
}

.logo:hover .initials {
    display: none;
}

.logo:hover .full-name {
    max-width: 400px;
    opacity: 1;
    padding-right: 10px;
}

/* ... [KEEPING EXISTING SECTIONS UNCHANGED UP TO ASTRONAUT/EASTER EGG STYLES] ... */
/* ... Skipping unchanged sections for brevity, jumping to new styles at the end ... */

/* --- 1. ASTRONAUTA (ZERO GRAVITY & INVASION) --- */
body.zero-gravity {
    background-color: #050505 !important;
    background-image: 
        radial-gradient(2px 2px at 20px 30px, #eee, rgba(0,0,0,0)),
        radial-gradient(2px 2px at 40px 70px, #fff, rgba(0,0,0,0)),
        radial-gradient(2px 2px at 50px 160px, #ddd, rgba(0,0,0,0)),
        radial-gradient(2px 2px at 90px 40px, #fff, rgba(0,0,0,0)),
        radial-gradient(2px 2px at 130px 80px, #fff, rgba(0,0,0,0));
    background-size: 200px 200px;
    transition: background 1s ease;
    overflow-x: hidden;
}

/* Float main elements */
body.zero-gravity .hero-title,
body.zero-gravity .stat-card,
body.zero-gravity .profile-card,
body.zero-gravity .project-card {
    transition: all 2s ease;
    animation: spaceFloat 10s ease-in-out infinite alternate;
    box-shadow: 0 0 30px rgba(197, 248, 42, 0.2); /* Lime glow */
}

body.zero-gravity .stat-card:nth-child(even) { animation-delay: 1s; animation-duration: 12s; }
body.zero-gravity .stat-card:nth-child(odd) { animation-delay: 0.5s; animation-duration: 14s; }

@keyframes spaceFloat {
    0% { transform: translateY(0) rotate(0deg); }
    25% { transform: translateY(-20px) rotate(2deg); }
    50% { transform: translateY(10px) rotate(-2deg); }
    75% { transform: translateY(-15px) rotate(1deg); }
    100% { transform: translateY(0) rotate(0deg); }
}

/* Invading Cows */
.cow-invasion {
    position: fixed;
    font-size: 3rem;
    z-index: 9998;
    pointer-events: none;
    animation: driftCow linear forwards;
    filter: drop-shadow(0 0 10px rgba(255,255,255,0.5));
}

@keyframes driftCow {
    0% { transform: translate(0, 0) rotate(0deg); opacity: 0; }
    10% { opacity: 1; }
    90% { opacity: 1; }
    100% { transform: translate(var(--tx), var(--ty)) rotate(var(--r)); opacity: 0; }
}

/* Mestre Alert Modal */
.mestre-alert-modal {
    position: fixed;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%) scale(0.5);
    background: #000;
    border: 4px solid var(--danger);
    color: var(--danger);
    padding: 2rem;
    width: 90%;
    max-width: 500px;
    text-align: center;
    font-family: var(--font-mono);
    z-index: 100000;
    box-shadow: 0 0 50px rgba(255, 77, 77, 0.5);
    opacity: 0;
    transition: all 0.5s cubic-bezier(0.175, 0.885, 0.32, 1.275);
    pointer-events: none;
}

.mestre-alert-modal.active {
    opacity: 1;
    transform: translate(-50%, -50%) scale(1);
    pointer-events: auto;
}

.mestre-alert-icon {
    font-size: 4rem;
    margin-bottom: 1rem;
    animation: pulse 1s infinite;
}

.mestre-alert-modal h3 {
    font-size: 1.5rem;
    margin-bottom: 1rem;
    text-transform: uppercase;
    border-bottom: 2px dashed var(--danger);
    padding-bottom: 0.5rem;
}

.mestre-alert-modal p {
    font-size: 1.1rem;
    color: #fff;
    margin-bottom: 1.5rem;
}

/* --- 2. RODAPÉ HACKER --- */
.hacker-tooltip {
    position: absolute;
    bottom: 120%;
    left: 50%;
    transform: translateX(-50%) scale(0.8);
    background: #000;
    color: #0f0;
    font-family: 'Courier New', monospace;
    padding: 1.5rem;
    border: 2px solid #0f0;
    border-radius: 4px;
    width: 320px;
    text-align: left;
    box-shadow: 0 0 30px rgba(0, 255, 0, 0.3);
    opacity: 0;
    visibility: hidden;
    transition: all 0.3s cubic-bezier(0.175, 0.885, 0.32, 1.275);
    z-index: 1000;
}

/* Specific class for the hover trigger container */
.footer-bottom p {
    position: relative;
    display: inline-block;
    cursor: help; /* Requested cursor */
}

.footer-bottom p:hover .hacker-tooltip {
    opacity: 1;
    visibility: visible;
    transform: translateX(-50%) scale(1);
}

.ht-title {
    background: #0f0;
    color: #000;
    font-weight: bold;
    text-align: center;
    padding: 0.2rem;
    margin-bottom: 1rem;
    font-size: 0.9rem;
}

.ht-list {
    list-style: none;
    font-size: 0.8rem;
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 0.5rem;
}

.ht-list li::before {
    content: '> ';
    color: #0f0;
}

/* --- 3. GTA TYPING & GAME --- */
.floating-char {
    position: fixed;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    font-family: 'Impact', sans-serif; /* GTA Style */
    font-size: 8rem;
    color: #fff;
    -webkit-text-stroke: 3px #000;
    text-shadow: 5px 5px 0px rgba(0,0,0,0.5);
    z-index: 100001;
    pointer-events: none;
    animation: charPop 2s forwards;
}

@keyframes charPop {
    0% { transform: translate(-50%, -50%) scale(0.5); opacity: 0; }
    10% { transform: translate(-50%, -50%) scale(1.2); opacity: 1; }
    20% { transform: translate(-50%, -50%) scale(1); }
    80% { opacity: 1; }
    100% { transform: translate(-50%, -60%) scale(1.5); opacity: 0; }
}

.cheat-feedback {
    position: fixed;
    top: 20%;
    left: 20px;
    font-family: 'Impact', sans-serif;
    font-size: 2rem;
    color: #C5F82A;
    background: rgba(0,0,0,0.8);
    padding: 1rem;
    border-left: 5px solid #C5F82A;
    z-index: 100002;
    animation: slideInLeft 0.5s ease-out, fadeOut 0.5s ease-in 3.5s forwards;
}

.cheat-feedback.error {
    color: #FF4D4D;
    border-color: #FF4D4D;
}

@keyframes slideInLeft {
    from { transform: translateX(-100%); }
    to { transform: translateX(0); }
}

@keyframes fadeOut {
    to { opacity: 0; visibility: hidden; }
}

/* Game Window (Windows 98 Style) */
.game-modal-overlay {
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background: rgba(0,0,0,0.8);
    z-index: 100005;
    display: none;
    justify-content: center;
    align-items: center;
    backdrop-filter: blur(5px);
}

.game-modal-overlay.active {
    display: flex;
}

.game-window {
    width: 360px;
    background: #c0c0c0;
    border: 2px solid;
    border-color: #fff #808080 #808080 #fff;
    box-shadow: 10px 10px 0 rgba(0,0,0,0.5);
    padding: 3px;
    font-family: 'Tahoma', sans-serif;
}

.game-header {
    background: linear-gradient(90deg, #000080, #1084d0);
    color: white;
    padding: 4px 8px;
    display: flex;
    justify-content: space-between;
    align-items: center;
    font-weight: bold;
    font-size: 14px;
    cursor: move;
}

.game-close {
    background: #c0c0c0;
    border: 1px solid;
    border-color: #fff #808080 #808080 #fff;
    width: 18px;
    height: 18px;
    font-size: 10px;
    line-height: 14px;
    font-weight: bold;
    cursor: pointer;
}

#flappy-canvas {
    display: block;
    background: #87CEEB;
    border: 2px solid #808080;
    margin: 5px auto;
    cursor: crosshair;
}

.game-instructions {
    text-align: center;
    font-size: 11px;
    padding: 5px;
    background: #fff;
    border: 1px inset #fff;
    color: #333;
}


/* ADICIONAR AO FINAL DO ARQUIVO style.css */

/* Nuclear Modal */
.nuclear-overlay {
    position: fixed;
    top: 0; left: 0; width: 100vw; height: 100vh;
    background: rgba(20, 0, 0, 0.95);
    z-index: 999999;
    display: flex;
    justify-content: center;
    align-items: center;
    font-family: 'Courier New', monospace;
}

.nuclear-overlay.hidden {
    display: none;
}

.nuclear-card {
    background: #000;
    border: 4px solid #ff0000;
    width: 90%;
    max-width: 500px;
    box-shadow: 0 0 50px #ff0000;
    animation: rattle 0.1s infinite;
}

@keyframes rattle {
    0% { transform: translate(1px, 1px) rotate(0deg); }
    10% { transform: translate(-1px, -2px) rotate(-1deg); }
    20% { transform: translate(-3px, 0px) rotate(1deg); }
    30% { transform: translate(3px, 2px) rotate(0deg); }
    40% { transform: translate(1px, -1px) rotate(1deg); }
    50% { transform: translate(-1px, 2px) rotate(-1deg); }
    60% { transform: translate(-3px, 1px) rotate(0deg); }
    70% { transform: translate(3px, 1px) rotate(-1deg); }
    80% { transform: translate(-1px, -1px) rotate(1deg); }
    90% { transform: translate(1px, 2px) rotate(0deg); }
    100% { transform: translate(1px, -2px) rotate(-1deg); }
}

.nuclear-header {
    background: #ff0000;
    color: #000;
    padding: 1rem;
    font-weight: 900;
    display: flex;
    justify-content: space-between;
    align-items: center;
    font-size: 1.2rem;
}

.nuclear-body {
    padding: 2rem;
    text-align: center;
    color: #ff0000;
}

.blink-danger {
    font-size: 2rem;
    margin-bottom: 1rem;
    animation: blink-fast 0.2s infinite;
    text-transform: uppercase;
}

@keyframes blink-fast {
    0% { opacity: 1; }
    50% { opacity: 0.2; }
    100% { opacity: 1; }
}

.countdown-box {
    border: 2px dashed #ff0000;
    padding: 1rem;
    margin: 2rem 0;
    background: rgba(255, 0, 0, 0.1);
}

#nuke-countdown {
    font-size: 5rem;
    font-weight: 900;
    display: block;
    line-height: 1;
}

.btn-nuclear {
    width: 100%;
    padding: 1.5rem;
    background: transparent;
    border: none;
    border-top: 4px solid #ff0000;
    color: #ff0000;
    font-weight: 900;
    font-size: 1.2rem;
    font-family: 'Courier New', monospace;
    cursor: pointer;
    transition: all 0.3s;
}

.btn-nuclear:hover {
    background: #ff0000;
    color: black;
}

.nuclear-note {
    font-size: 0.8rem;
    opacity: 0.7;
    margin-top: 1rem;
}

/* Void Screen (Final) */
.void-overlay {
    position: fixed;
    top: 0; left: 0; width: 100%; height: 100%;
    background: #000;
    z-index: -1; /* Fica atrás de tudo até que tudo suma */
    display: flex;
    justify-content: center;
    align-items: center;
    color: #333;
    font-family: var(--font-heading);
    text-align: center;
}

.void-overlay.visible {
    z-index: 1; /* Traz pra frente quando tudo explodir */
}

.void-content h1 {
    color: #222;
    font-size: 4rem;
    margin-bottom: 1rem;
}

.void-content p {
    color: #111;
    font-size: 1.5rem;
}

/* Canvas de Partículas */
.destruction-canvas {
    position: absolute; /* Deve ser absoluto em relação ao body/documento */
    pointer-events: none;
    z-index: 9999;
}
    

/* ... [KEEP EXISTING CSS] ... */

/* --- MULTIVERSE TRIGGER BUTTON --- */
.multiverse-trigger-wrapper {
    margin-bottom: 1rem;
    height: 40px; /* Space reservation */
    display: flex;
    align-items: center;
}

.multiverse-btn {
    background: #000;
    color: var(--accent-lime);
    border: 1px dashed var(--accent-lime);
    padding: 0.5rem 1rem;
    font-family: var(--font-mono);
    font-size: 0.8rem;
    cursor: pointer;
    opacity: 0; /* Invisible by default */
    transition: all 0.3s;
    display: flex;
    align-items: center;
    gap: 8px;
    border-radius: 4px;
}

.multiverse-btn:hover {
    opacity: 1; /* Visible on hover */
    box-shadow: 0 0 15px var(--accent-lime);
    transform: translateY(-2px);
}

/* --- MULTIVERSE MENU --- */
.multiverse-menu {
    position: fixed;
    top: 0; left: 0; width: 100%; height: 100%;
    background: rgba(0,0,0,0.95);
    z-index: 200000;
    display: flex;
    justify-content: center;
    align-items: center;
    backdrop-filter: blur(10px);
}

.multiverse-menu.hidden {
    display: none;
}

.multiverse-content {
    background: #111;
    border: 2px solid var(--primary-blue);
    border-radius: 16px;
    padding: 2rem;
    width: 90%;
    max-width: 1000px;
    max-height: 90vh;
    overflow-y: auto;
    box-shadow: 0 0 50px rgba(45, 52, 226, 0.3);
}

.multiverse-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-bottom: 2rem;
    border-bottom: 1px solid #333;
    padding-bottom: 1rem;
}

.multiverse-header h2 {
    color: white;
    font-size: 1.5rem;
    text-transform: uppercase;
    letter-spacing: 2px;
}

#close-multiverse {
    background: none;
    border: none;
    color: #666;
    font-size: 1.5rem;
    cursor: pointer;
    transition: color 0.2s;
}

#close-multiverse:hover { color: white; }

.modes-grid {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(200px, 1fr));
    gap: 1.5rem;
}

.mode-card {
    background: #1a1a1a;
    border: 1px solid #333;
    border-radius: 8px;
    padding: 1.5rem;
    text-align: center;
    cursor: pointer;
    transition: all 0.2s;
    display: flex;
    flex-direction: column;
    align-items: center;
}

.mode-card:hover {
    background: #222;
    border-color: var(--accent-lime);
    transform: translateY(-5px);
}

.mode-icon {
    font-size: 2.5rem;
    margin-bottom: 0.5rem;
}

.mode-card h3 {
    color: white;
    font-size: 1rem;
    margin-bottom: 0.2rem;
}

.mode-card p {
    color: #888;
    font-size: 0.7rem;
    font-family: var(--font-mono);
}

.reset-mode {
    border-color: var(--danger);
}
.reset-mode:hover {
    background: var(--danger);
    color: white;
}
.reset-mode:hover h3, .reset-mode:hover p { color: white; }

/* --- TOAST NOTIFICATION --- */
.multiverse-toast {
    position: fixed;
    bottom: 20px;
    left: 50%;
    transform: translateX(-50%);
    background: #fff;
    color: #000;
    padding: 1rem 2rem;
    border-radius: 50px;
    display: flex;
    align-items: center;
    gap: 10px;
    box-shadow: 0 10px 30px rgba(0,0,0,0.5);
    z-index: 200001;
    font-weight: bold;
    font-family: var(--font-mono);
    animation: slideUp 0.5s cubic-bezier(0.175, 0.885, 0.32, 1.275);
}

.multiverse-toast.hidden { display: none; }

@keyframes slideUp {
    from { transform: translate(-50%, 100px); opacity: 0; }
    to { transform: translate(-50%, 0); opacity: 1; }
}

/* --- OVERLAYS & CANVAS GENERIC --- */
.fx-overlay {
    position: fixed;
    top: 0; left: 0; width: 100%; height: 100%;
    pointer-events: none;
    z-index: 99999;
}
.fx-canvas {
    position: fixed;
    top: 0; left: 0; width: 100%; height: 100%;
    pointer-events: none;
    z-index: -1; /* Behind content but visible if bg is transparent */
}
.hidden { display: none !important; }


/* =========================================
   MODE STYLES
   ========================================= */

/* 1. PLANTÃO NOTURNO (FLASHLIGHT) */
body.mode-night {
    background-color: #000 !important;
    color: #333 !important;
    overflow-x: hidden;
}
body.mode-night section, 
body.mode-night header, 
body.mode-night footer {
    background: #000 !important; /* Force black bg on sections */
}
/* The flashlight effect */
#flashlight-overlay {
    background: radial-gradient(circle 200px at var(--x, 50%) var(--y, 50%), transparent 0%, rgba(0,0,0,0.98) 100%);
    z-index: 100000; /* Above everything */
    pointer-events: none; /* Let clicks pass through light */
    mix-blend-mode: hard-light;
}
/* Spooky Eyes Animation Class (JS added) */
.spooky-eye {
    position: fixed;
    font-size: 2rem;
    color: red;
    z-index: 99999;
    animation: blink-eyes 3s infinite;
    opacity: 0;
}
body.mode-night .spooky-eye.revealed { opacity: 1; text-shadow: 0 0 10px red; }


/* 2. 1914 (PALMEIRAS) */
body.mode-1914 {
    filter: saturate(130%) contrast(110%);
    background-image: url('data:image/svg+xml;utf8,<svg width="100" height="100" viewBox="0 0 100 100" xmlns="http://www.w3.org/2000/svg"><rect width="100" height="100" fill="%230b3d2e"/><path d="M0 0L100 100M100 0L0 100" stroke="%231fa64a" stroke-width="1"/></svg>') !important;
}

body.mode-1914 .highlight-lime {
    color: #b6ffcf !important;
    background-color: #1fa64a !important;
}

body.mode-1914 .green {
    color: #1fa64a !important;
}

body.mode-1914 a,
body.mode-1914 button {
    cursor: url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24"><circle cx="12" cy="12" r="10" fill="%231fa64a"/><path d="M6 12L12 6L18 12L12 18Z" fill="%230b3d2e"/></svg>'), auto !important;
}



/* 3. MATRIX DA ROÇA */
body.mode-matrix {
    background-color: #000 !important;
    color: #00ff00 !important;
    font-family: 'Courier New', monospace !important;
}
body.mode-matrix * {
    color: #00ff00 !important;
    border-color: #00ff00 !important;
    text-shadow: 0 0 5px #00ff00;
}
body.mode-matrix img, body.mode-matrix .profile-card {
    filter: contrast(1.5) brightness(0.8) sepia(1) hue-rotate(50deg) saturate(3) !important;
    opacity: 0.8;
}
body.mode-matrix #matrix-canvas {
    z-index: 0; /* Behind text but visible */
    background: #000;
    opacity: 0.3;
}
/* Cursor */
body.mode-matrix, body.mode-matrix * { cursor: text; }


/* 4. GAMBIARRA CRÍTICA (GLITCH) */
body.mode-glitch {
    background-color: #1a1a1a !important;
    filter: contrast(120%);
    animation: rgbShift 0.2s infinite;
}
body.mode-glitch * {
    animation: shakeElement 5s infinite;
}
@keyframes rgbShift {
    0% { text-shadow: 2px 0 red, -2px 0 blue; }
    25% { text-shadow: -2px 0 red, 2px 0 blue; }
    50% { text-shadow: 2px 2px red, -2px -2px blue; }
    100% { text-shadow: -1px 0 red, 1px 0 blue; }
}
@keyframes shakeElement {
    0% { transform: translate(0,0) rotate(0deg); }
    2% { transform: translate(2px,2px) rotate(1deg); }
    4% { transform: translate(-2px,-2px) rotate(-1deg); }
    6% { transform: translate(0,0) rotate(0deg); }
    100% { transform: translate(0,0) rotate(0deg); }
}


/* 5. VISÃO CANINA */
body.mode-dog {
    filter: grayscale(100%) sepia(100%) hue-rotate(180deg) saturate(1.5);
    /* Attempting simulates dichromacy: mostly yellows and blues */
}
body.mode-dog button, body.mode-dog a {
    filter: none !important; /* Make interactive elements pop */
    outline: 5px solid #FFFF00 !important; /* High contrast yellow */
    transform: scale(1.1);
}
body.mode-dog {
    cursor: url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" width="32" height="32" viewBox="0 0 24 24"><text y="20" font-size="20">🦴</text></svg>'), auto !important;
}


/* 6. WINDOWS 95 */
body.mode-win95 {
    background-color: #008080 !important; /* Teal */
    font-family: 'Tahoma', sans-serif !important;
}
body.mode-win95 .interact-card, body.mode-win95 button, body.mode-win95 nav {
    background: #c0c0c0 !important;
    border: 2px solid #fff !important;
    border-right-color: #000 !important;
    border-bottom-color: #000 !important;
    border-radius: 0 !important;
    box-shadow: none !important;
    color: #000 !important;
}
body.mode-win95 button:active {
    border: 2px solid #000 !important;
    border-right-color: #fff !important;
    border-bottom-color: #fff !important;
}
body.mode-win95 h1, body.mode-win95 h2, body.mode-win95 h3 {
    background: #000080;
    color: white !important;
    padding: 2px 5px;
    font-family: sans-serif;
    font-weight: bold;
}
body.mode-win95 { cursor: default; }


/* 7. CAFEÍNA TURBO */
body.mode-caffeine * {
    transition-duration: 0.1s !important; /* Ultra fast */
    animation: caffeineShake 0.1s infinite !important;
}
body.mode-caffeine {
    filter: saturate(200%) contrast(120%);
    background-color: #fff0f0 !important;
}
@keyframes caffeineShake {
    0% { transform: translate(0,0); }
    25% { transform: translate(1px, 1px); }
    50% { transform: translate(-1px, -1px); }
    75% { transform: translate(1px, -1px); }
    100% { transform: translate(0,0); }
}
body.mode-caffeine {
    cursor: url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" width="32" height="32" viewBox="0 0 24 24"><text y="20" font-size="20">☕</text></svg>'), auto !important;
}


/* 8. VISÃO TÉRMICA */
body.mode-thermal {
    background-color: #000033 !important; /* Deep Blue cold */
    filter: invert(1) hue-rotate(180deg);
}
/* Invert images back slightly so they look ghostly */
body.mode-thermal img {
    filter: invert(1);
}
body.mode-thermal button, body.mode-thermal a, body.mode-thermal .interact-card:hover {
    background-color: #ff0000 !important; /* HOT */
    color: #ffff00 !important;
    box-shadow: 0 0 20px #ff0000 !important;
}
body.mode-thermal {
    cursor: crosshair !important;
}


/* 9. ASCII ART (TEXT MODE) */
body.mode-ascii {
    background-color: #000 !important;
    color: #fff !important;
    font-family: 'Courier New', monospace !important;
}
body.mode-ascii * {
    border: none !important;
    background: none !important;
    box-shadow: none !important;
}
body.mode-ascii .interact-card {
    border: 1px dashed #fff !important;
}
body.mode-ascii img, body.mode-ascii .profile-card {
    display: none !important; /* Hide visuals */
}
body.mode-ascii .interact-card::before {
    content: '[OBJECT]';
    display: block;
    color: #0f0;
}
body.mode-ascii h2::before { content: '## '; }
body.mode-ascii button::before { content: '[ '; }
body.mode-ascii button::after { content: ' ]'; }


/* 10. RAIO-X (BLUEPRINT) */
body.mode-blueprint {
    background-color: #002b36 !important; /* Blueprint Blue */
    background-image: 
        linear-gradient(rgba(255,255,255,0.1) 1px, transparent 1px),
        linear-gradient(90deg, rgba(255,255,255,0.1) 1px, transparent 1px) !important;
    background-size: 20px 20px !important;
    color: #fff !important;
}
body.mode-blueprint * {
    background: transparent !important;
    box-shadow: none !important;
    border: 1px dashed rgba(255,255,255,0.3) !important;
}
body.mode-blueprint div::before {
    content: '<' attr(class) '>';
    font-size: 8px;
    color: #00d2ff;
    position: absolute;
    top: 0; left: 0;
    font-family: monospace;
    opacity: 0.7;
}
body.mode-blueprint *:hover {
    border-color: #00d2ff !important;
}
body.mode-blueprint {
    cursor: help !important;
}


/* 11. VHS 1998 */
body.mode-vhs {
    filter: blur(0.5px) contrast(1.2) brightness(1.1) hue-rotate(-10deg);
    background-color: #111 !important;
    overflow-x: hidden;
}
#vhs-overlay {
    pointer-events: none;
    z-index: 99999;
    background: transparent;
}
.scanlines {
    position: fixed;
    top: 0; left: 0; width: 100%; height: 100%;
    background: linear-gradient(rgba(18, 16, 16, 0) 50%, rgba(0, 0, 0, 0.25) 50%), linear-gradient(90deg, rgba(255, 0, 0, 0.06), rgba(0, 255, 0, 0.02), rgba(0, 0, 255, 0.06));
    background-size: 100% 4px, 6px 100%;
    pointer-events: none;
}
.noise {
    position: fixed;
    top: 0; left: 0; width: 100%; height: 100%;
    background-image: url('data:image/svg+xml;utf8,<svg viewBox="0 0 200 200" xmlns="http://www.w3.org/2000/svg"><filter id="noiseFilter"><feTurbulence type="fractalNoise" baseFrequency="0.65" numOctaves="3" stitchTiles="stitch"/></filter><rect width="100%25" height="100%25" filter="url(%23noiseFilter)" opacity="0.1"/></svg>');
    opacity: 0.15;
    pointer-events: none;
    animation: noise 0.5s infinite linear;
}
.vhs-text {
    position: fixed;
    top: 20px; left: 20px;
    color: white;
    font-family: monospace;
    font-size: 1.5rem;
    text-shadow: 2px 2px 0 #000;
}
@keyframes noise { 0% { background-position: 0 0; } 100% { background-position: 100px 100px; } }


/* 12. RASCUNHO (SKETCH) */
body.mode-sketch {
    background-color: #fffdf0 !important; /* Paper */
    background-image: none !important;
    color: #333 !important;
    font-family: 'Architects Daughter', cursive !important;
}
body.mode-sketch * {
    border-radius: 255px 15px 225px 15px / 15px 225px 15px 255px !important;
    box-shadow: none !important;
    /* Optional: filter: url(#sketch-filter); causing performance issues, stick to border radius hack */
    border: 2px solid #333 !important;
    background: transparent !important;
}
body.mode-sketch h1, body.mode-sketch h2 {
    color: #1a237e !important; /* Bic Pen Blue */
}
body.mode-sketch {
    cursor: url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24"><path d="M3 17.25V21h3.75L17.81 9.94l-3.75-3.75L3 17.25zM20.71 7.04c.39-.39.39-1.02 0-1.41l-2.34-2.34c-.39-.39-1.02-.39-1.41 0l-1.83 1.83 3.75 3.75 1.83-1.83z" fill="black"/></svg>'), auto !important;
}

/* --- CARROSSEL INFINITO (UPDATED) --- */

/* Wrapper que força o conteúdo a sair do container centralizado e ocupar 100% da tela */
.infinite-stack-wrapper {
    margin-top: 3rem;
    width: 100vw;
    position: relative;
    left: 50%;
    right: 50%;
    margin-left: -50vw;
    margin-right: -50vw;
    overflow: hidden;
    padding: 2rem 0;
    /* Opcional: cor de fundo se quiser destacar a faixa */
    background: transparent; 
}

/* A linha individual */
.marquee-row {
    display: flex;
    width: 100%;
    margin-bottom: 1.5rem; /* Espaço vertical entre as linhas */
    overflow: hidden;
    position: relative;
    /* Efeito de fade (desvanecer) nas bordas esquerda e direita */
    mask-image: linear-gradient(to right, transparent, black 5%, black 95%, transparent);
    -webkit-mask-image: linear-gradient(to right, transparent, black 5%, black 95%, transparent);
}

/* A trilha que se move */
.marquee-track {
    display: flex;
    gap: 1.5rem; /* Espaço horizontal entre os badges */
    width: max-content;
    /* Importante: garante que o cálculo de largura considere o gap */
    padding-right: 1.5rem; 
}

/* Garante que os badges não quebrem linha e mantenham o tamanho */
.marquee-track .badge-item {
    white-space: nowrap;
    flex-shrink: 0;
}

/* --- ANIMAÇÕES --- */

/* 1. Movimento para a ESQUERDA */
.scroll-left .marquee-track {
    animation: scrollLeft 40s linear infinite;
}

@keyframes scrollLeft {
    0% { transform: translateX(0); }
    100% { transform: translateX(-50%); } /* Move até a metade (onde começa o clone) */
}

/* 2. Movimento para a DIREITA */
.scroll-right .marquee-track {
    animation: scrollRight 40s linear infinite;
}

@keyframes scrollRight {
    0% { transform: translateX(-50%); } /* Começa "atrasado" */
    100% { transform: translateX(0); }
}

/* UX: Pausa a animação quando passa o mouse em cima da linha */
.marquee-row:hover .marquee-track {
    animation-play-state: paused;
}

/* Responsivo: Ajusta velocidade para telas menores */
@media (max-width: 768px) {
    .scroll-left .marquee-track, 
    .scroll-right .marquee-track {
        animation-duration: 25s; /* Um pouco mais rápido no mobile */
    }
}

/* --- NOVO CSS PARA FEIRA DO MESTRE (CARROSSEL) --- */

/* Layout Principal: Grid de 2 colunas no Desktop */
.market-layout {
    display: grid;
    grid-template-columns: 1fr 320px; /* Produtos ocupam o resto, carrinho fixo 320px */
    gap: 2rem;
    align-items: start;
    position: relative;
}

/* Área Esquerda (Produtos) */
.market-products-area {
    width: 100%;
    overflow: hidden; /* Esconde os corredores laterais */
    background: rgba(255,255,255,0.5);
    border-radius: 12px;
    border: 2px dashed #3e2723;
    padding: 1rem;
}

/* Navegação Superior (Abas e Setas) */
.aisle-nav {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-bottom: 1.5rem;
    background: #fff;
    padding: 0.5rem;
    border-radius: 8px;
    border: 1px solid #ccc;
}

.aisle-tabs {
    display: flex;
    gap: 5px;
    overflow-x: auto;
    padding: 2px;
}

.aisle-tab {
    background: transparent;
    border: none;
    padding: 0.5rem 1rem;
    cursor: pointer;
    font-family: var(--font-heading);
    font-size: 0.9rem;
    border-radius: 4px;
    white-space: nowrap;
    transition: all 0.3s;
    color: #555;
}

.aisle-tab:hover { background: #eee; }
.aisle-tab.active {
    background: #3e2723;
    color: white;
    font-weight: bold;
}

.aisle-btn {
    background: var(--accent-lime);
    border: 2px solid #000;
    width: 35px;
    height: 35px;
    border-radius: 50%;
    cursor: pointer;
    font-weight: bold;
    display: flex;
    align-items: center;
    justify-content: center;
    transition: transform 0.2s;
    flex-shrink: 0;
}

.aisle-btn:hover { transform: scale(1.1); }
.aisle-btn.disabled { opacity: 0.3; cursor: not-allowed; pointer-events: none; }

/* O Carrossel (Track) */
.aisle-viewport {
    width: 100%;
    overflow: hidden; /* Máscara do carrossel */
}

.aisle-track {
    display: flex; /* Coloca os corredores lado a lado */
    width: 100%;
    transition: transform 0.5s cubic-bezier(0.25, 1, 0.5, 1); /* Animação suave */
}

.aisle-slide {
    min-width: 100%; /* Cada corredor ocupa 100% da largura da área disponível */
    flex-shrink: 0;
    padding: 0.5rem;
    box-sizing: border-box;
}

/* Ajuste no Grid de Produtos dentro do Slide */
.products-grid {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(220px, 1fr)); /* Responsivo automático */
    gap: 1.5rem;
    padding-bottom: 1rem;
}

/* Responsividade Mobile */
@media (max-width: 900px) {
    .market-layout {
        grid-template-columns: 1fr; /* Coluna única */
        gap: 3rem;
    }

    .wheelbarrow-wrapper {
        position: relative; /* Não fixa no mobile para não atrapalhar */
        top: 0;
        width: 100%;
        max-width: 100%;
    }

    .aisle-nav {
        flex-wrap: wrap;
        gap: 10px;
    }
    
    .aisle-tabs {
        order: 2;
        width: 100%;
        justify-content: center;
    }
    
    .aisle-btn {
        order: 1;
    }
}
/* --- EASTER EGG: LÂMPADA INTERATIVA DO RODAPÉ --- */

/* Garante que o footer seja a referência de posicionamento */
#footer-area {
    position: relative;
    /* Ajuste isso se a lâmpada ficar muito em cima do texto "Você chegou ao fim..." */
    padding-top: 6rem; 
}

/* Container Principal (Fio + Lâmpada + Luz) */
.lamp-container {
    position: absolute;
    top: 0;
    left: 50%;
    transform: translateX(-50%);
    z-index: 20;
    display: flex;
    flex-direction: column;
    align-items: center;
    cursor: pointer;
    /* Animação suave de balanço (opcional) */
    transform-origin: top center;
    animation: swingLamp 3s infinite ease-in-out alternate;
}

@keyframes swingLamp {
    from { transform: translateX(-50%) rotate(2deg); }
    to { transform: translateX(-50%) rotate(-2deg); }
}

/* O Fio */
.lamp-wire {
    width: 2px;
    height: 50px; /* Comprimento do fio */
    background-color: #333;
}

/* A Lâmpada (Ícone) */
.lamp-icon {
    font-size: 2.5rem;
    color: #444; /* Cor apagada (cinza escuro) */
    transition: all 0.3s ease;
    position: relative;
    z-index: 5; /* Fica na frente da luz */
}

/* Hover na lâmpada (antes de clicar) */
.lamp-container:hover .lamp-icon {
    color: #666;
}

/* Wrapper da Luz e Mensagem (para animar a abertura) */
.light-beam-container {
    position: relative;
    display: flex;
    flex-direction: column;
    align-items: center;
    opacity: 0;
    visibility: hidden;
    /* Animação de "abertura" da luz */
    transform: scaleY(0); 
    transform-origin: top center;
    transition: all 0.4s cubic-bezier(0.25, 0.46, 0.45, 0.94);
}

/* O Feixe de Luz (Gradiente Radial + Clip Path) */
.light-beam {
    width: 350px;
    height: 300px;
    /* O efeito de luz amarela transparente */
    background: radial-gradient(ellipse at top, rgba(255, 215, 0, 0.7) 0%, rgba(255, 215, 0, 0.1) 60%, transparent 70%);
    /* Corta em formato de cone/triângulo */
    clip-path: polygon(50% 0%, 0% 100%, 100% 100%);
    margin-top: -10px;
    pointer-events: none; /* Deixa o clique passar pela luz */
}

/* A Mensagem Secreta */
.hidden-message {
    position: absolute;
    top: 100px; /* Posição dentro da luz */
    background-color: #fff;
    color: #1a1a1a;
    padding: 1rem;
    border-radius: 8px;
    font-weight: 700;
    font-family: var(--font-heading);
    font-size: 0.9rem;
    text-align: center;
    box-shadow: 0 10px 20px rgba(0,0,0,0.2);
    border: 2px solid #FFD700;
    max-width: 220px;
    transform: rotate(-2deg);
}

/* --- ESTADO LIGADO (Ativado via JS) --- */

.lamp-container.lamp-on .lamp-icon {
    color: #FFD700; /* Amarelo Ouro */
    /* Brilho neon intenso */
    text-shadow: 0 0 20px #FFD700, 0 0 60px #ff9800;
}

.lamp-container.lamp-on .light-beam-container {
    opacity: 1;
    visibility: visible;
    transform: scaleY(1); /* Abre a luz */
}