/* ================================================ */
/* ============== TEMA ESCURO (BASE) ============== */
/* ================================================ */

/* Regra para esconder a barra de rolagem */
html { 
    scrollbar-width: none; 
    -ms-overflow-style: none; 
}
html::-webkit-scrollbar { 
    display: none; 
}

/* Estilos principais */
body { 
    font-family: 'Roboto Mono', monospace; 
    background-color: #01020a; 
    color: #e0e0e0; 
    overflow-x: hidden;
    --body-bg: #01020a; /* Variavel para o gradiente da nav */
    transition: background-color 0.5s ease, color 0.5s ease;
}

/* Melhorias de acessibilidade */
a:focus-visible, button:focus-visible, input:focus-visible, textarea:focus-visible, label[tabindex="0"]:focus-visible {
    outline: 2px solid #00ffff; 
    outline-offset: 3px; 
    border-radius: 4px;
}

#scene-container { 
    position: fixed; 
    top: 0; 
    left: 0; 
    width: 100%; 
    height: 100vh; 
    z-index: 0; 
    cursor: crosshair; 
}
.content-section { 
    position: relative; 
    z-index: 1; 
    min-height: 100vh; 
    display: flex; 
    flex-direction: column; 
    align-items: center; 
    justify-content: center; 
    padding: 2rem; 
}
.font-tech { 
    font-family: 'Oxanium', cursive; 
}
.title-shadow { 
    text-shadow: 1px 1px 2px rgba(0, 0, 0, 0.8), 0 0 15px rgba(0, 0, 0, 0.9), 0 0 25px rgba(100, 255, 255, 0.3); 
    transition: text-shadow 0.5s ease;
}
nav {
    background: linear-gradient(to bottom, var(--body-bg) 0%, transparent 100%);
}
.nav-link {
    font-family: 'Oxanium', cursive;
    color: #cbd5e1;
    transition: color 0.3s ease;
    text-decoration: none;
    padding: 0.25rem 0.5rem;
    letter-spacing: 0.1em;
}
.nav-link:hover {
    color: #00ffff;
}
.theme-toggle-button {
    color: #cbd5e1;
    transition: color 0.3s ease;
    padding: 0.25rem;
    border-radius: 0.375rem; /* rounded-md */
}
.theme-toggle-button:hover {
    color: #00ffff;
}
.theme-toggle-button:focus-visible {
    outline: 2px solid #00ffff;
    outline-offset: 2px;
}

/* --- SERVIÇOS --- */
.service-panel { 
    background: rgba(10, 15, 30, 0.6); 
    backdrop-filter: blur(10px); 
    -webkit-backdrop-filter: blur(10px); 
    border: 1px solid rgba(180, 180, 200, 0.15); 
    transition: all 0.3s cubic-bezier(0.25, 0.8, 0.25, 1); 
    position: relative; 
    overflow: hidden; 
}
.service-panel:hover { 
    transform: translateY(-15px) scale(1.03); 
    box-shadow: 0 25px 50px -12px rgba(0, 0, 0, 0.5); 
    border-color: rgba(0, 255, 255, 0.4); 
    background: rgba(15, 25, 50, 0.7); 
}
.service-panel p { 
    transition: text-shadow 0.3s ease; 
    color: #94a3b8;
}
.service-panel:hover p { 
    text-shadow: 0 0 4px rgba(200, 220, 255, 0.5); 
}
.highlight-text { 
    color: #00ffff; 
    text-shadow: 0 0 5px rgba(0, 255, 255, 0.5); 
    transition: all 0.3s ease;
}
.service-title { 
    text-shadow: -1px -1px 1px #01020a, 1px -1px 1px #01020a, -1px 1px 1px #01020a, 1px 1px 1px #01020a; 
    position: relative; 
    overflow: hidden; 
    transition: color 0.4s ease;
    color: #e2e8f0;
}
.service-title::after { 
    content: ''; 
    position: absolute; 
    top: 0; 
    left: 0; 
    width: 100%; 
    height: 100%; 
    background: linear-gradient(90deg, transparent, rgba(0, 255, 255, 0.8), transparent); 
    transform: translateX(-101%); 
    transition: transform 0.6s cubic-bezier(0.2, 1, 0.3, 1); 
}
.service-panel:hover .service-title { 
    color: #00ffff; 
    text-shadow: none; 
}
.service-panel:hover .service-title::after { 
    transform: translateX(101%); 
}
.service-icon { 
    transition: all 0.3s ease; 
    filter: drop-shadow(0 0 5px rgba(0, 255, 255, 0)); 
    color: #94a3b8;
}
.service-panel:hover .service-icon { 
    filter: drop-shadow(0 0 15px rgba(0, 255, 255, 0.8)); 
    transform: scale(1.1);
    color: #00ffff;
}

/* --- Animações Gerais --- */
.animate-on-scroll { 
    opacity: 0; 
    transform: translateY(30px); 
    transition: opacity 0.6s ease-out, transform 0.6s ease-out; 
}
.animate-on-scroll.is-visible { 
    opacity: 1; 
    transform: translateY(0); 
}
.glitch-hover { 
    position: relative; 
}
.glitch-hover:hover::before, .glitch-hover:hover::after { 
    content: attr(data-text); 
    position: absolute; 
    top: 0; 
    left: 0; 
    width: 100%; 
    height: 100%; 
    background: var(--body-bg);
    overflow: hidden; 
}
.glitch-hover:hover::before { 
    left: 2px; 
    text-shadow: -1px 0 red; 
    animation: glitch-anim 1s infinite linear alternate-reverse; 
}
.glitch-hover:hover::after { 
    left: -2px; 
    text-shadow: -1px 0 blue; 
    animation: glitch-anim-2 1s infinite linear alternate-reverse; 
}
@keyframes glitch-anim { 0% { clip-path: inset(15% 0 86% 0); } 20% { clip-path: inset(51% 0 49% 0); } 40% { clip-path: inset(9% 0 16% 0); } 60% { clip-path: inset(74% 0 10% 0); } 80% { clip-path: inset(43% 0 35% 0); } 100% { clip-path: inset(62% 0 32% 0); } }
@keyframes glitch-anim-2 { 0% { clip-path: inset(75% 0 6% 0); } 20% { clip-path: inset(28% 0 69% 0); } 40% { clip-path: inset(88% 0 6% 0); } 60% { clip-path: inset(45% 0 45% 0); } 80% { clip-path: inset(93% 0 3% 0); } 100% { clip-path: inset(16% 0 80% 0); } }

/* --- Tela de Entrada --- */
#entry-overlay { 
    position: fixed; top: 0; left: 0; width: 100%; height: 100%; 
    background-color: rgba(1, 2, 10, 0.9); 
    backdrop-filter: blur(10px); 
    -webkit-backdrop-filter: blur(10px); 
    z-index: 200; 
    display: flex; justify-content: center; align-items: center; 
    transition: opacity 0.5s ease; 
    padding: 1rem;
}
.entry-container {
    display: flex;
    justify-content: space-around;
    align-items: flex-start;
    gap: 2rem;
    width: 100%;
    max-width: 900px;
}
.entry-column {
    display: flex;
    flex-direction: column;
    align-items: center;
    text-align: center;
    flex-basis: 50%;
}
.entry-btn {
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 1rem 2rem;
    height: 60px;
    border-radius: 0.5rem;
    width: 100%;
    max-width: 320px;
    font-size: 1.25rem; /* text-xl */
}
#entry-button { 
    border: 1px solid #00ffff; color: #00ffff; text-shadow: 0 0 10px #00ffff; animation: pulse-glow 2s infinite; 
    background: transparent;
}
#static-button {
    color: #94a3b8;
    background-color: transparent;
    border: 1px solid rgba(148, 163, 184, 0.2);
    transition: all 0.3s ease;
    font-size: 1rem; /* text-base */
}
#static-button:hover {
    background-color: rgba(148, 163, 184, 0.1);
    border-color: rgba(148, 163, 184, 0.4);
    color: #e2e8f0;
}

@keyframes pulse-glow { 0% { box-shadow: 0 0 5px #00ffff; } 50% { box-shadow: 0 0 20px #00ffff; } 100% { box-shadow: 0 0 5px #00ffff; } }
.animated-gradient { 
    background: linear-gradient(90deg, #00BFFF, #8A2BE2, #FF00FF, #00BFFF); background-size: 200% 200%; -webkit-background-clip: text; background-clip: text; -webkit-text-fill-color: transparent; animation: gradient-flow 5s ease infinite; 
}
@keyframes gradient-flow { 0% { background-position: 0% 50%; } 50% { background-position: 100% 50%; } 100% { background-position: 0% 50%; } }

/* Trava de tema para modo estático */
.static-mode .theme-toggle-button {
    display: none !important;
}

/* --- ESTILOS DO FORMULÁRIO (NOVO DESIGN) --- */
.form-container { 
    position: relative; background: rgba(5, 10, 25, 0.5); backdrop-filter: blur(15px); -webkit-backdrop-filter: blur(15px); border: 1px solid rgba(0, 255, 255, 0.2); transition: background 0.5s ease, border 0.5s ease; 
}
.form-container::before { 
    content: ''; position: absolute; top: 0; left: 0; right: 0; bottom: 0; z-index: -1; background-image: linear-gradient(rgba(0, 255, 255, 0.07) 1px, transparent 1px), linear-gradient(90deg, rgba(0, 255, 255, 0.07) 1px, transparent 1px); background-size: 30px 30px; animation: move-grid 20s linear infinite; 
    transition: background-image 0.5s ease;
}
@keyframes move-grid { from { background-position: 0 0; } to { background-position: 300px 300px; } }

.form-section-title { 
    display: flex; align-items: center; color: #00ffff; margin-bottom: 1rem; text-shadow: 0 0 8px rgba(0,255,255,0.5); transition: color 0.5s ease;
}
.form-section-title::before, .form-section-title::after { 
    content: ''; flex-grow: 1; height: 1px; background: rgba(0, 255, 255, 0.2); transition: background 0.5s ease;
}
.form-section-title span { padding: 0 1rem; text-align: center; }

.form-input, .form-textarea { 
    background-color: rgba(10, 20, 50, 0.7); border: 1px solid rgba(0, 255, 255, 0.3); transition: all 0.3s ease;
}
.form-textarea::placeholder { 
    color: #5a6482; transition: color 0.3s ease; 
}
.form-textarea:focus::placeholder { 
    color: rgba(90, 100, 130, 0.5); 
}
.form-input:focus, .form-textarea:focus { 
    border-color: #00ffff; box-shadow: 0 0 15px rgba(0, 255, 255, 0.5), inset 0 0 5px rgba(0, 255, 255, 0.3); 
}
.input-wrapper { position: relative; }
.input-wrapper label { position: absolute; left: 1rem; top: 50%; transform: translateY(-50%); color: #94a3b8; transition: all 0.2s ease; pointer-events: none; }
.form-input:not(:placeholder-shown) + label, .form-input:focus + label { 
    top: -0.6rem; 
    left: 0.75rem; 
    font-size: 0.75rem; 
    color: #00ffff; 
    background: #01020a; 
    padding: 0 0.25rem; 
}


/* Novo design tecnológico para os botões de escolha */
.form-choice-label {
    display: flex;
    align-items: center;
    justify-content: center;
    text-align: center;
    height: 100%;
    background-color: rgba(10, 20, 50, 0.4);
    border: 1px solid rgba(0, 255, 255, 0.2);
    color: #94a3b8;
    transition: all 0.3s ease;
    clip-path: polygon(8px 0, 100% 0, 100% calc(100% - 8px), calc(100% - 8px) 100%, 0 100%, 0 8px);
}
.form-choice-label:hover {
    background-color: rgba(10, 20, 50, 0.7);
    border-color: rgba(0, 255, 255, 0.6);
    color: #e0e0e0;
}
input[type="radio"]:checked + .form-choice-label, 
input[type="checkbox"]:checked + .form-choice-label {
    background-color: rgba(0, 255, 255, 0.1);
    border-color: #00ffff;
    color: #00ffff;
    text-shadow: 0 0 8px rgba(0, 255, 255, 0.7);
    box-shadow: 0 0 15px rgba(0, 255, 255, 0.3);
}
input[type="radio"]:focus-visible,
input[type="checkbox"]:focus-visible {
    outline: none !important;
}
input[type="radio"]:focus-visible + .form-choice-label,
input[type="checkbox"]:focus-visible + .form-choice-label {
    background-color: rgba(0, 255, 255, 0.1);
    border-color: #00ffff;
    color: #00ffff;
    text-shadow: 0 0 8px rgba(0, 255, 255, 0.7);
    box-shadow: 0 0 15px rgba(0, 255, 255, 0.3);
}

.form-file-label { 
    background-color: rgba(10, 20, 50, 0.7); border: 1px dashed rgba(0, 255, 255, 0.3); display: flex; align-items: center; justify-content: center; gap: 0.75rem; cursor: pointer; transition: all 0.3s ease; 
}
.form-file-label:hover { 
    border-color: #00ffff; background-color: rgba(10, 20, 50, 0.9); 
}
#file-name { 
    font-style: italic; color: #00ffff; 
}
.form-options-wrapper { 
    max-height: 0; overflow: hidden; transition: max-height 0.7s cubic-bezier(0.4, 0, 0.2, 1); 
}
.form-options-wrapper.is-visible { 
    max-height: 1000px; 
}

#success-modal, #error-modal, #privacy-policy-modal { 
    background-color: rgba(2, 4, 10, 0.8); backdrop-filter: blur(10px); transition: background-color 0.5s ease;
}
/* Posição do ícone de áudio */
#sound-toggle { 
    position: fixed; top: 30px; right: 30px; z-index: 100; cursor: pointer; background: rgba(255, 255, 255, 0.1); border: 1px solid rgba(255, 255, 255, 0.2); border-radius: 50%; padding: 8px; transition: all 0.2s ease; 
}
#sound-toggle:hover { 
    background: rgba(255, 255, 255, 0.2); 
}
@media (max-width: 767px) { #sound-toggle { top: auto; bottom: 20px; right: 20px; } }

/* --- ESTILOS DA SEÇÃO SOBRE --- */
.hologram-avatar-container { 
    width: 250px; height: 250px; position: relative; display: flex; flex-direction: column; justify-content: center; align-items: center; text-align: center; font-size: 1.75rem; letter-spacing: 0.2em; 
    color: #67e8f9;
    text-shadow: 0 0 8px rgba(103, 232, 249, 0.6), 0 0 18px rgba(103, 232, 249, 0.4);
    animation: text-flicker 3s infinite alternate; 
    transition: color 0.5s ease, text-shadow 0.5s ease;
}
.hologram-avatar-container::before, .hologram-avatar-container::after { 
    content: ''; position: absolute; top: 50%; left: 50%; border-radius: 50%; border-style: solid; border-color: #00ffff transparent; transition: all 0.5s ease; 
}
.hologram-avatar-container::before { 
    width: 100%; height: 100%; border-width: 2px; animation: rotate-holo 8s linear infinite; 
}
.hologram-avatar-container::after { 
    width: calc(100% + 20px); height: calc(100% + 20px); border-width: 1px; animation: rotate-holo-reverse 12s linear infinite; opacity: 0.6; 
}
.hologram-avatar-container .block::after { 
    content: ''; position: absolute; top: 0; left: 0; width: 100%; height: 3px; background: rgba(0, 255, 255, 0.8); box-shadow: 0 0 10px rgba(0, 255, 255, 1); animation: scan-line 4s cubic-bezier(0.23, 1, 0.32, 1) infinite; transition: all 0.5s ease;
}
@keyframes rotate-holo { from { transform: translate(-50%, -50%) rotate(0deg); } to { transform: translate(-50%, -50%) rotate(360deg); } }
@keyframes rotate-holo-reverse { from { transform: translate(-50%, -50%) rotate(0deg); } to { transform: translate(-50%, -50%) rotate(-360deg); } }
@keyframes text-flicker { 0% { opacity: 0.8; } 5% { opacity: 1; } 10% { opacity: 0.85; } 25% { opacity: 0.95; } 40% { opacity: 1; } 50% { opacity: 0.9; } 60% { opacity: 0.95; } 80% { opacity: 1; } 100% { opacity: 0.8; } }
@keyframes scan-line { 0% { top: 0%; } 50% { top: 100%; } 100% { top: 0%; } }

#manifesto-trigger { 
    color: #a7f3d0; border: 1px solid rgba(167, 243, 208, 0.3); padding: 0.75rem 1.25rem; border-radius: 0.5rem; cursor: pointer; transition: all 0.3s ease; text-align: center; 
}
#manifesto-trigger:hover { 
    background-color: rgba(167, 243, 208, 0.1); border-color: rgba(167, 243, 208, 0.7); text-shadow: 0 0 8px rgba(167, 243, 208, 0.5); 
}
.skill-card { 
    background: rgba(10, 15, 30, 0.7); border: 1px solid rgba(180, 180, 200, 0.15); padding: 1rem; border-radius: 0.5rem; transition: all 0.3s ease; cursor: pointer; 
}
.skill-card:hover { 
    transform: translateY(-5px); background: rgba(15, 20, 40, 0.9); border-color: rgba(0, 255, 255, 0.4); 
}
.skill-progress-bar { 
    width: 100%; height: 8px; background-color: rgba(0, 0, 0, 0.3); border-radius: 4px; margin-top: 0.75rem; overflow: hidden; 
}
.skill-progress { 
    width: 0%; height: 100%; background: linear-gradient(90deg, #00BFFF, #8A2BE2); border-radius: 4px; transition: width 1.5s cubic-bezier(0.25, 1, 0.5, 1); 
}

#data-terminal-panel { 
    background: rgba(5, 10, 25, 0.7); backdrop-filter: blur(8px); -webkit-backdrop-filter: blur(8px); border: 1px solid rgba(0, 255, 255, 0.2); border-radius: 0.5rem; padding: 1.25rem; margin-bottom: 1.5rem; min-height: 150px; transition: all 0.3s ease-out; display: flex; flex-direction: column; 
}
#terminal-title { 
    color: #ff00c1; text-shadow: 0 0 8px rgba(255, 0, 193, 0.7); margin-bottom: 0.75rem; flex-shrink: 0; transition: color 0.5s ease, text-shadow 0.5s ease;
}
#terminal-text { 
    flex-grow: 1; transition: color 0.5s ease; color: #cbd5e1;
}
#terminal-text .closing-statement { 
    margin-top: 1rem; color: #a7f3d0; font-style: italic; text-shadow: 0 0 8px rgba(167, 243, 208, 0.5); 
}
#terminal-text::after { 
    content: '█'; display: inline-block; animation: blink-caret 1s step-end infinite; 
}
@keyframes blink-caret { from, to { opacity: 1 } 50% { opacity: 0 } }

/* Estilos para o Terminal Dinâmico */
#dynamic-services-link {
    font-family: 'Roboto Mono', monospace;
    color: #a0aec0;
    text-decoration: none;
    transition: color 0.3s ease, text-shadow 0.3s ease;
}

#dynamic-services-link:hover {
    color: #fff;
    text-shadow: 0 0 8px rgba(255, 255, 255, 0.5);
}

.cursor {
    display: inline-block;
    animation: blink-caret 1s step-end infinite;
    color: #00ffff;
}

/* Estilos para o Menu Mobile */
#hamburger-btn {
    background: rgba(10, 15, 30, 0.6); 
    backdrop-filter: blur(10px);
    -webkit-backdrop-filter: blur(10px);
    border: 1px solid rgba(180, 180, 200, 0.15);
    color: #cbd5e1;
}

.mobile-menu-container {
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background: rgba(5, 10, 25, 0.9);
    backdrop-filter: blur(15px);
    -webkit-backdrop-filter: blur(15px);
    z-index: 40;
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    gap: 2rem;
    opacity: 0;
    transform: translateY(-20px);
    transition: opacity 0.3s ease, transform 0.3s ease;
    pointer-events: none;
}

.mobile-menu-container.is-open {
    opacity: 1;
    transform: translateY(0);
    pointer-events: auto;
}

.mobile-nav-link {
    font-family: 'Oxanium', cursive;
    font-size: 1.75rem;
    color: #e2e8f0;
    text-decoration: none;
    transition: color 0.3s ease;
}

.mobile-nav-link:hover {
    color: #00ffff;
}

/* ===== NOVOS ESTILOS PARA LGPD ===== */

/* Estilo do Banner de Privacidade */
.privacy-banner-content {
    background: rgba(10, 15, 30, 0.8);
    backdrop-filter: blur(10px);
    -webkit-backdrop-filter: blur(10px);
    border: 1px solid rgba(180, 180, 200, 0.15);
}

.privacy-link {
    text-decoration: underline;
    color: #00ffff;
    cursor: pointer;
}
.privacy-link:hover {
    text-shadow: 0 0 5px #00ffff;
}

/* Estilo do Modal de Privacidade */
#privacy-policy-modal .policy-text p, 
#privacy-policy-modal .policy-text li {
    line-height: 1.6;
}

/* Estilo do Checkbox de Consentimento */
.form-checkbox {
    -webkit-appearance: none;
    appearance: none;
    background-color: transparent;
    width: 1.25em;
    height: 1.25em;
    border: 1px solid rgba(0, 255, 255, 0.4);
    border-radius: 0.25em;
    display: grid;
    place-content: center;
    cursor: pointer;
    transition: all 0.2s ease-in-out;
}

.form-checkbox::before {
    content: "";
    width: 0.75em;
    height: 0.75em;
    transform: scale(0);
    transition: 120ms transform ease-in-out;
    box-shadow: inset 1em 1em #00ffff;
    clip-path: polygon(14% 44%, 0 65%, 50% 100%, 100% 16%, 80% 0%, 43% 62%);
}

.form-checkbox:checked {
    background-color: rgba(0, 255, 255, 0.1);
    border-color: #00ffff;
}

.form-checkbox:checked::before {
    transform: scale(1);
}

/* ================================================ */
/* =============== AJUSTES PARA MOBILE ============== */
/* ================================================ */

@media (max-width: 767px) {
    /* AJUSTE FINAL: Centraliza o conteúdo principal */
    .content-section {
        padding: 2rem 1rem; /* Reduz o padding lateral para centralizar melhor o conteúdo */
    }

    /* Ajuste no container do avatar "Arquiteto Digital" */
    .hologram-avatar-container {
        width: 200px; 
        height: 200px;
        font-size: 1.3rem; 
        line-height: 1.2; 
    }

    /* Ajuste para os botões da tela de entrada */
    .entry-btn {
        padding: 0.8rem 1rem; 
        font-size: 1.125rem; 
    }
    
    .entry-container {
        flex-direction: column; 
        align-items: center; 
        gap: 1.5rem;
    }

    .entry-column {
        flex-basis: auto; 
        width: 100%;
        max-width: 320px; 
    }

    /* Ajuste na grade de habilidades (Skills) */
    #skills-grid {
        grid-template-columns: repeat(2, minmax(0, 1fr)); /* Altera para 2 colunas */
        gap: 0.75rem; 
    }
}

/* ================================================ */
/* =================== RODAPÉ ===================== */
/* ================================================ */

#main-footer {
    position: relative;
    z-index: 10;
    padding: 4rem 1rem 2rem 1rem; /* Espaçamento para não colar no conteúdo */
    opacity: 0.4; /* Começa bem sutil */
    transition: opacity 0.3s ease;
}

#main-footer:hover {
    opacity: 0.8; /* Fica mais visível ao passar o mouse */
}

/* A linha neon surreal */
.footer-line {
    border: none;
    height: 1px;
    width: 100%;
    margin: 0 auto 1.5rem auto; /* Espaçamento abaixo da linha */
    background: linear-gradient(90deg, transparent, #00ffff, transparent);
    box-shadow: 0 0 10px rgba(0, 255, 255, 0.5);
}

/* O texto do copyright */
.footer-text {
    font-size: 0.8rem; /* Pequeno */
    color: #94a3b8; /* Cor acinzentada que combina com o tema */
    letter-spacing: 0.1em;
    text-shadow: 0 0 5px rgba(148, 163, 184, 0.3);
}

/* ================================================ */
/* ====== AJUSTES RESPONSIVOS PARA NOTEBOOKS ====== */
/* ================================================ */

/* Este bloco aplica estilos para telas entre 768px (fim do mobile) 
   e 1600px (monitores grandes), cobrindo a maioria dos notebooks. */
@media (min-width: 768px) and (max-width: 1600px) {
    
    /* --- Seção Home --- */
    #home h1 {
        /* Reduz o tamanho do título principal de 8xl para 6xl */
        font-size: 3.75rem; /* Equivalente a text-6xl do Tailwind */
        line-height: 1;
    }

    #home header p {
        /* Reduz o subtítulo */
        font-size: 1.125rem; /* text-lg */
    }

    #home header a#dynamic-services-link {
        /* Reduz o link dinâmico */
        font-size: 1.125rem; /* text-lg */
    }

    /* --- Títulos das Seções --- */
    section h2 {
        /* Reduz o tamanho de todos os títulos de seção (H2) */
        font-size: 2.25rem; /* text-4xl */
        margin-bottom: 3rem; /* Reduz a margem inferior para compactar um pouco */
    }

    /* --- Seção Sobre --- */
    .hologram-avatar-container {
        /* Reduz o tamanho do "avatar" holográfico */
        width: 220px;
        height: 220px;
        font-size: 1.5rem; /* text-2xl */
    }
    
    /* --- Seção de Serviços e Contato --- */
    /* Garante que os painéis não fiquem excessivamente grandes */
    .service-panel h3 {
        font-size: 1.25rem; /* text-xl */
    }
    .service-panel p {
        font-size: 0.9rem; /* Um pouco menor que text-base */
    }

    /* --- Seção de Orçamento (Formulário) --- */
    .form-container {
        padding: 2.5rem; /* Reduz o padding interno do formulário */
    }
}
/* ================================================ */
/* ======== ESTILOS DO PORTFÓLIO (ADICIONADO) ========= */
/* ================================================ */

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

@keyframes scanline {
    0% { transform: translateY(-10%); opacity: 0.1; }
    50% { transform: translateY(110%); opacity: 0.8; }
    100% { transform: translateY(-10%); opacity: 0.1; }
}

.portfolio-card {
    position: relative;
    cursor: pointer;
    background: #050a19;
    clip-path: polygon(0 15px, 15px 0, 100% 0, 100% calc(100% - 15px), calc(100% - 15px) 100%, 0 100%);
    transition: transform 0.4s cubic-bezier(0.2, 1, 0.3, 1), background 0.4s ease;
}

.portfolio-card .card-content {
    padding: 1.5rem;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    height: 100%;
}

.portfolio-card .portfolio-image-container {
    border: none;
    box-shadow: none;
    clip-path: polygon(0 10px, 10px 0, 100% 0, 100% calc(100% - 10px), calc(100% - 10px) 100%, 0 100%);
}

.portfolio-card::before {
    content: '';
    position: absolute;
    top: 50%;
    left: 50%;
    width: 150%;
    height: 150%;
    background: conic-gradient(from 0deg, transparent, transparent, #00ffff, transparent, transparent);
    animation: rotate-border 4s linear infinite;
    opacity: 0;
    transform: translate(-50%, -50%);
    transition: opacity 0.4s ease;
    z-index: -1;
}

.portfolio-card:hover::before {
    opacity: 1;
}

.portfolio-card .card-border {
    position: absolute;
    inset: 1px;
    background: #050a19;
    z-index: 0;
    clip-path: polygon(0 15px, 15px 0, 100% 0, 100% calc(100% - 15px), calc(100% - 15px) 100%, 0 100%);
}

.portfolio-card .card-content {
    position: relative;
    z-index: 1;
}

.portfolio-image-container {
    position: relative;
    width: 100%;
    padding-top: 56.25%;
    overflow: hidden;
    border-radius: 0.5rem;
}

.portfolio-image {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    object-fit: cover;
    transition: transform 0.4s cubic-bezier(0.2, 1, 0.3, 1);
}

.portfolio-card:hover .portfolio-image {
    transform: scale(1.1);
}

.portfolio-overlay {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background: radial-gradient(circle, rgba(1, 2, 10, 0.3) 0%, rgba(1, 2, 10, 0.8) 100%);
    display: flex;
    align-items: center;
    justify-content: center;
    opacity: 0;
    transition: opacity 0.4s ease;
    color: #00ffff;
    text-shadow: 0 0 10px #00ffff;
}

.portfolio-card:hover .portfolio-overlay {
    opacity: 1;
}

#project-modal {
    opacity: 0;
    transition: opacity 0.4s ease, backdrop-filter 0.4s ease;
    pointer-events: none;
}

#project-modal.is-visible {
    opacity: 1;
    pointer-events: auto;
}

#project-modal .modal-content-wrapper {
    transform: scale(0.95);
    transition: transform 0.4s ease;
}

#project-modal.is-visible .modal-content-wrapper {
    transform: scale(1);
}

.scanline-overlay {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background: linear-gradient(to bottom, transparent 0%, rgba(0, 255, 255, 0.5) 50%, transparent 100%);
    background-size: 100% 10px;
    animation: scanline 3s linear infinite;
    pointer-events: none;
    opacity: 0.2;
}

.modal-tab {
    padding: 0.75rem 1.5rem;
    cursor: pointer;
    font-family: 'Oxanium', cursive;
    color: #94a3b8;
    position: relative;
    transition: color 0.3s ease;
    background: none;
    border: none;
}

.modal-tab::after {
    content: '';
    position: absolute;
    bottom: -1px;
    left: 0;
    width: 100%;
    height: 2px;
    background-color: #00ffff;
    transform: scaleX(0);
    transition: transform 0.3s cubic-bezier(0.2, 1, 0.3, 1);
}

.modal-tab.active,
.modal-tab:hover {
    color: #00ffff;
}

.modal-tab.active::after {
    transform: scaleX(1);
}

.modal-tab-content {
    display: none;
    padding-top: 1.5rem;
    animation: fadeInContent 0.5s ease forwards;
}

.modal-tab-content.active {
    display: block;
}

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

#modal-architecture-list li {
    color: #cbd5e1;
    display: flex;
    align-items: center;
}

#modal-architecture-list svg {
    color: #00ffff;
    flex-shrink: 0;
}

.tech-stack-grid {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(100px, 1fr));
    gap: 1rem;
}

.tech-stack-item {
    background-color: rgba(0, 255, 255, 0.05);
    border: 1px solid rgba(0, 255, 255, 0.1);
    border-radius: 0.5rem;
    padding: 0.75rem;
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 0.5rem;
    color: #94a3b8;
    font-size: 0.8rem;
    transition: all 0.2s ease;
}

.tech-stack-item:hover {
    background-color: rgba(0, 255, 255, 0.15);
    color: #e0e0e0;
    transform: scale(1.05);
}

.tech-stack-item .tech-icon {
    width: 32px;
    height: 32px;
    color: #00ffff;
}

.modal-action-button {
    background-color: transparent;
    border: 1px solid #00ffff;
    color: #00ffff;
    padding: 0.75rem 1rem;
    border-radius: 0.25rem;
    transition: all 0.3s ease;
    text-shadow: 0 0 5px rgba(0, 255, 255, 0.5);
    text-decoration: none;
}

.modal-action-button:hover {
    background-color: rgba(0, 255, 255, 0.1);
    box-shadow: 0 0 15px rgba(0, 255, 255, 0.4);
}
/* Estilo para o painel de texto sobre a imagem do portfólio */
.overlay-text-box {
    background: rgba(5, 10, 25, 0.75); /* Fundo azul escuro, um pouco mais opaco */
    backdrop-filter: blur(8px);       /* Efeito de vidro/desfoque no fundo */
    -webkit-backdrop-filter: blur(8px); /* Suporte para Safari */
    padding: 0.75rem 1.5rem;          /* Espaçamento interno (12px em cima/baixo, 24px nas laterais) */
    border: 1px solid rgba(0, 255, 255, 0.3); /* Borda ciano sutil */
    border-radius: 0.375rem;          /* Cantos levemente arredondados */
    color: #e0e0e0;                   /* Cor do texto (branco suave para melhor contraste) */
    text-shadow: 0 0 8px rgba(0, 255, 255, 0.5); /* Mantém um leve brilho */

    /* Animação suave de entrada */
    transform: translateY(10px);
    opacity: 0;
    transition: transform 0.4s ease, opacity 0.4s ease;
}

/* Faz o painel aparecer suavemente no hover do card */
.portfolio-card:hover .overlay-text-box {
    transform: translateY(0);
    opacity: 1;
}

/* AJUSTE OPCIONAL: Remove a cor e sombra do overlay pai para evitar conflitos */
.portfolio-overlay {
    /* ... (mantenha as outras propriedades como background, display, etc.) ... */
    color: inherit; /* Remove a cor ciano direta do overlay */
    text-shadow: none; /* Remove a sombra direta do overlay */
}
/* ================================================ */
/* ===== AJUSTE FINO PARA CELULARES ESTREITOS ===== */
/* ================================================ */

/* Este código só será aplicado em telas com largura máxima de 359px */
@media (max-width: 359px) {
  #home h1 {
    /* Reduz o tamanho da fonte (de 4xl para um tamanho entre 3xl e 4xl) */
    font-size: 2rem; /* Tamanho ajustado */
    line-height: 2.5rem;
    
    /* Reduz um pouco o espaçamento extra entre as letras */
    letter-spacing: 0.025em; /* Equivalente a 'tracking-wide' do Tailwind */
  }
}

/* dark-theme.css */

/* ... (todo o código existente) ... */


/* ================================================ */
/* =========== ESTILOS PARA VÍDEO MODAL =========== */
/* ================================================ */

#modal-video {
  /* Garante que o vídeo não fique maior que a imagem e tenha uma borda sutil */
  max-height: 500px; 
  border: 1px solid rgba(0, 255, 255, 0.2); /* Borda ciano sutil para combinar com o tema */
  box-shadow: 0 0 15px rgba(0, 255, 255, 0.1); /* Um leve brilho para integrar ao design */
}

/* light-theme.css */

/* ... (todo o código existente) ... */


/* ================================================ */
/* =========== ESTILOS PARA VÍDEO MODAL =========== */
/* ================================================ */

#modal-video {
  /* Garante que o vídeo não fique maior que a imagem e tenha uma borda sutil */
  max-height: 500px;
  border: 1px solid rgba(44, 62, 80, 0.2); /* Borda escura sutil para combinar com o tema */
  box-shadow: 0 5px 15px rgba(0, 0, 0, 0.05);
}

/* dark-theme.css */

/* ... (todo o código existente) ... */


/* ================================================ */
/* ====== AJUSTES NOVO LAYOUT MODAL PORTFOLIO ====== */
/* ================================================ */

/* Ajusta o tamanho da coluna de texto para não esticar demais */
.modal-text-column {
    max-width: 600px; 
    margin: 0 auto;
}

/* Adiciona uma linha divisória e um espaçamento acima da seção da Stack */
.modal-stack-section {
    margin-top: 2rem;
    padding-top: 1.5rem;
    border-top: 1px solid rgba(0, 255, 255, 0.2);
}

/* Ajusta a grade da stack para usar melhor o espaço horizontal */
.tech-stack-grid {
    display: grid;
    /* Aumenta o tamanho mínimo dos itens para preencher melhor */
    grid-template-columns: repeat(auto-fill, minmax(120px, 1fr));
    gap: 1rem;
}
/* ================================================ */
/* ====== ESTILOS BOTÃO DE TELA CHEIA (SVG) ====== */
/* ================================================ */

/*
  A classe 'group' foi adicionada ao contêiner da mídia no HTML.
  Isso faz com que o botão com 'group-hover:opacity-100' apareça
  quando o mouse estiver sobre qualquer parte da área de mídia.
*/

/* Estilo base do botão de tela cheia */
#video-fullscreen-btn {
    position: absolute;
    bottom: 0.75rem; /* 12px */
    right: 0.75rem;  /* 12px */
    background-color: rgba(10, 20, 40, 0.6);
    backdrop-filter: blur(5px);
    -webkit-backdrop-filter: blur(5px);
    border: 1px solid rgba(0, 255, 255, 0.2);
    color: #e0e0e0;
    border-radius: 0.375rem; /* rounded-md */
    padding: 0.5rem; /* 8px */
    z-index: 10;
    cursor: pointer;
    
    /* Começa invisível e aparece suavemente */
    opacity: 0;
    transition: opacity 0.3s ease, background-color 0.3s ease;
}

/* Efeito hover para o botão */
#video-fullscreen-btn:hover {
    background-color: rgba(10, 20, 40, 0.9);
    border-color: rgba(0, 255, 255, 0.5);
}

/* Mostra o botão quando o mouse está sobre o contêiner (classe 'group') */
.group:hover #video-fullscreen-btn {
    opacity: 1;
}

/* Ajuste específico para o tema claro */
.light-theme #video-fullscreen-btn {
    background-color: rgba(255, 255, 255, 0.5);
    border-color: rgba(44, 62, 80, 0.2);
    color: #2c3e50;
}

.light-theme #video-fullscreen-btn:hover {
    background-color: rgba(255, 255, 255, 0.8);
}
/* Estilos para os ícones de tela cheia */
#icon-enter-fullscreen {
   display: block; /* Mostra o ícone de maximizar por padrão */
}

#icon-exit-fullscreen {
   display: none; /* Esconde o ícone de minimizar por padrão */
}

/* O JavaScript vai alternar a visibilidade dessas classes */
.fullscreen-active #icon-enter-fullscreen {
   display: none;
}

.fullscreen-active #icon-exit-fullscreen {
   display: block;
}
/* ================================================ */
/* ====== ESTILOS PARA TELA CHEIA DO VÍDEO (v2) ====== */
/* ================================================ */

/* Quando o contêiner do vídeo estiver em tela cheia... */
.group:fullscreen {
    background-color: #000;
    display: flex;
    justify-content: center;
    align-items: center;
    width: 100%;
    height: 100%;
}

/* ...o vídeo dentro dele deve ocupar todo o espaço... */
.group:fullscreen #modal-video {
    width: 100%;
    height: 100%;
    object-fit: cover; /* Preenche a tela inteira, pode cortar bordas */
    max-width: none;   /* Remove qualquer restrição de largura */
    max-height: none;  /* Remove qualquer restrição de altura */
}

/* ...e o botão de tela cheia deve ficar sempre visível. */
.group:fullscreen #video-fullscreen-btn {
    opacity: 1;
}

/* NOVO: Trava o scroll da página quando um modal está aberto */
body.modal-is-open {
    overflow: hidden;
}
/* ================================================ */
/* ===== AJUSTE FINO PARA CELULARES ESTREITOS ===== */
/* ================================================ */

/* Este código só será aplicado em telas com largura máxima de 359px */
@media (max-width: 359px) {
  #home h1 {
    /* Reduz o tamanho da fonte (de 4xl para um tamanho entre 3xl e 4xl) */
    font-size: 2rem; /* Tamanho ajustado */
    line-height: 2.5rem;
    
    /* Reduz um pouco o espaçamento extra entre as letras */
    letter-spacing: 0.025em; /* Equivalente a 'tracking-wide' do Tailwind */
  }
}