@import url('https://fonts.googleapis.com/css2?family=Raleway:ital,wght@0,100..900;1,100..900&display=swap');
@import url('https://fonts.googleapis.com/css2?family=Montserrat:ital,wght@0,100..900;1,100..900&display=swap');

html {
    scroll-behavior: smooth;
}

body {
    font-family: "Raleway", sans-serif;
    font-optical-sizing: auto;
    font-weight: 400;
    font-style: normal;
}

.FontMontserrat {
    font-family: "Montserrat", sans-serif;
    font-optical-sizing: auto;
    font-weight: 400;
}
#cardic{
    transform: scale(1.4);
}

/* ==========================================================================
   PADRAO VISUAL CODITECH  -  paleta e componentes compartilhados
   Mesma camada usada em coditech.dev.br / ClassControl.
   Nao edite manualmente: substitua o bloco inteiro ao atualizar o padrao.
   ========================================================================== */
@import url('https://fonts.googleapis.com/css2?family=Manrope:wght@400;500;600;700;800&family=Sora:wght@400;500;600;700;800&display=swap');

:root,
html[data-tema="claro"] {
    --cd-bg: #EEF3FA;
    --cd-bg-alt: #E3EBF6;
    --cd-surface: #FFFFFF;
    --cd-surface-2: #F5F8FD;
    --cd-line: #D6E0EF;
    --cd-line-strong: #BECDE3;
    --cd-txt: #0B1A2E;
    --cd-txt-2: #3D5474;
    --cd-txt-3: #6D819F;
    --cd-acc: #2563EB;
    --cd-acc-hover: #1D4ED8;
    --cd-acc-txt: #1F5FD8;
    --cd-acc-soft: rgba(37, 99, 235, 0.10);
    --cd-acc-line: rgba(37, 99, 235, 0.28);
    --cd-green: #16A34A;
    --cd-green-txt: #128040;
    --cd-green-soft: rgba(22, 163, 74, 0.12);
    --cd-red: #DC2626;
    --cd-red-txt: #C21F1F;
    --cd-red-soft: rgba(220, 38, 38, 0.12);
    --cd-amber: #F59E0B;
    --cd-nav-bg: rgba(8, 17, 32, 0.92);
    --cd-nav-bg-solid: #08111F;
    --cd-nav-txt: #DCE7F8;
    --cd-footer-bg: #131C2B;
    --cd-shadow: 0 18px 40px -22px rgba(11, 26, 46, 0.45);
    --cd-shadow-lg: 0 30px 70px -30px rgba(11, 26, 46, 0.55);
    --cd-glow: 0 0 0 1px rgba(37, 99, 235, 0.18), 0 20px 45px -25px rgba(37, 99, 235, 0.55);
    --cd-overlay: rgba(6, 12, 24, 0.62);
    --cd-font: 'Manrope', ui-sans-serif, system-ui, sans-serif;
    --cd-font-display: 'Sora', 'Manrope', ui-sans-serif, sans-serif;
    --cd-ease: cubic-bezier(0.22, 1, 0.36, 1);
}

html[data-tema="escuro"] {
    --cd-bg: #060C17;
    --cd-bg-alt: #0A1322;
    --cd-surface: #0E1B2E;
    --cd-surface-2: #142440;
    --cd-line: #1D3352;
    --cd-line-strong: #2A466C;
    --cd-txt: #E9F1FC;
    --cd-txt-2: #A9BDD9;
    --cd-txt-3: #7B90B0;
    --cd-acc: #2F76ED;
    --cd-acc-hover: #4C8DF5;
    --cd-acc-txt: #79AAFF;
    --cd-acc-soft: rgba(47, 118, 237, 0.16);
    --cd-acc-line: rgba(79, 141, 245, 0.35);
    --cd-green: #1FA85A;
    --cd-green-txt: #4ADE80;
    --cd-green-soft: rgba(34, 197, 94, 0.16);
    --cd-red: #E04444;
    --cd-red-txt: #FF8A8A;
    --cd-red-soft: rgba(224, 68, 68, 0.16);
    --cd-amber: #FBBF24;
    --cd-nav-bg: rgba(5, 11, 22, 0.92);
    --cd-nav-bg-solid: #050B16;
    --cd-nav-txt: #D5E3F7;
    --cd-footer-bg: #04090F;
    --cd-shadow: 0 18px 40px -22px rgba(0, 0, 0, 0.75);
    --cd-shadow-lg: 0 30px 70px -30px rgba(0, 0, 0, 0.85);
    --cd-glow: 0 0 0 1px rgba(79, 141, 245, 0.28), 0 22px 50px -26px rgba(47, 118, 237, 0.7);
    --cd-overlay: rgba(2, 6, 14, 0.78);
}

html {
    scroll-behavior: smooth;
    scroll-padding-top: 7rem;
    background: var(--cd-bg);
}

body {
    background: var(--cd-bg) !important;
    color: var(--cd-txt) !important;
    font-family: var(--cd-font) !important;
    transition: background-color 0.45s var(--cd-ease), color 0.45s var(--cd-ease);
}

h1, h2, h3, h4, h5,
.font-serif, .font-display {
    font-family: var(--cd-font-display) !important;
    letter-spacing: -0.015em;
}

.font-sans { font-family: var(--cd-font) !important; }
.font-mono { font-family: 'JetBrains Mono', ui-monospace, monospace !important; }

::selection {
    background: var(--cd-acc);
    color: #fff;
}

::-webkit-scrollbar { width: 11px; height: 11px; }
::-webkit-scrollbar-track { background: var(--cd-bg-alt); }
::-webkit-scrollbar-thumb {
    background: var(--cd-line-strong);
    border-radius: 999px;
    border: 3px solid var(--cd-bg-alt);
}
::-webkit-scrollbar-thumb:hover { background: var(--cd-acc); }

.bg-white, .bg-slate-50, .bg-gray-50, .bg-neutral-50, .bg-ink-50, .bg-paper,
.bg-paper\/90, .bg-slate-100\/60 {
    background-color: var(--cd-surface) !important;
}

.bg-slate-100, .bg-gray-100, .bg-zinc-100, .bg-zinc-200, .bg-gray-200,
.bg-neutral-100, .bg-ink-100, .bg-ink-200, .bg-slate-200 {
    background-color: var(--cd-bg-alt) !important;
}

.bg-slate-700, .bg-slate-800, .bg-slate-900, .bg-slate-950, .bg-neutral-800,
.bg-neutral-900, .bg-neutral-900\/95, .bg-zinc-800, .bg-zinc-900, .bg-ink-800,
.bg-ink-900, .bg-ink-950, .bg-ink-900\/50, .bg-blue-950\/85, .bg-\[\#0b1220\] {
    background-color: var(--cd-footer-bg) !important;
}

.bg-black\/50, .bg-black\/60, .bg-black\/70, .bg-black\/80 {
    background-color: var(--cd-overlay) !important;
    backdrop-filter: blur(6px);
}

.bg-indigo-600, .bg-indigo-500, .bg-indigo-700, .bg-blue-500, .bg-blue-600,
.bg-blue-700, .bg-blue-800, .bg-stamp, .bg-cyan-300, .bg-cyan-400, .bg-blue-400 {
    background-color: var(--cd-acc) !important;
}

.bg-indigo-50, .bg-indigo-100, .bg-blue-50, .bg-blue-100, .bg-blue-600\/10,
.bg-stamp\/10, .bg-cyan-400\/20, .bg-sky-100 {
    background-color: var(--cd-acc-soft) !important;
}

.bg-green-500, .bg-green-600, .bg-emerald-500, .bg-emerald-600 { background-color: var(--cd-green) !important; }
.bg-green-50, .bg-green-100, .bg-emerald-100 { background-color: var(--cd-green-soft) !important; }
.bg-red-500, .bg-red-600, .bg-rose-500 { background-color: var(--cd-red) !important; }
.bg-red-50, .bg-red-100, .bg-rose-100 { background-color: var(--cd-red-soft) !important; }
.bg-yellow-400, .bg-amber-400, .bg-yellow-500 { background-color: var(--cd-amber) !important; }

[class*="bg-gradient"][class*="from-white"],
[class*="bg-gradient"][class*="from-slate-50"],
[class*="bg-gradient"][class*="from-paper"] {
    background-image: linear-gradient(180deg, var(--cd-surface) 0%, var(--cd-bg-alt) 100%) !important;
}

.text-white, .text-slate-50, .text-gray-50 { color: #F4F8FF !important; }

.text-black, .text-slate-900, .text-slate-800, .text-gray-900, .text-gray-800,
.text-neutral-900, .text-zinc-900, .text-zinc-800, .text-ink-900, .text-ink-800 {
    color: var(--cd-txt) !important;
}

.text-slate-700, .text-slate-600, .text-gray-700, .text-gray-600,
.text-neutral-700, .text-neutral-600, .text-zinc-700, .text-zinc-600,
.text-ink-700, .text-ink-600 {
    color: var(--cd-txt-2) !important;
}

.text-slate-500, .text-slate-400, .text-gray-500, .text-gray-400,
.text-neutral-500, .text-neutral-400, .text-zinc-500, .text-zinc-400,
.text-ink-500, .text-ink-400 {
    color: var(--cd-txt-3) !important;
}

.text-slate-300, .text-slate-200, .text-slate-100, .text-gray-300, .text-gray-200,
.text-neutral-300, .text-neutral-200, .text-ink-300, .text-ink-200, .text-ink-100 {
    color: var(--cd-txt-2) !important;
}

.text-indigo-400, .text-indigo-500, .text-indigo-600, .text-indigo-700,
.text-indigo-800, .text-blue-400, .text-blue-500, .text-blue-600, .text-blue-700,
.text-blue-800, .text-blue-900, .text-blue-100, .text-blue-200, .text-blue-300,
.text-stamp, .text-cyan-400, .text-sky-500, .text-purple-400, .text-pink-400,
.text-pink-500 {
    color: var(--cd-acc-txt) !important;
}

.text-green-400, .text-green-500, .text-green-600, .text-emerald-500,
.text-emerald-600 {
    color: var(--cd-green-txt) !important;
}

.text-red-400, .text-red-500, .text-red-600, .text-rose-500 { color: var(--cd-red-txt) !important; }
.text-yellow-400, .text-amber-400, .text-amber-500 { color: var(--cd-amber) !important; }

.border-slate-100, .border-slate-200, .border-slate-300, .border-gray-100,
.border-gray-200, .border-gray-300, .border-neutral-200, .border-zinc-200,
.border-ink-100, .border-ink-200, .border-ink-300, .border-blue-100,
.border-indigo-100, .border-green-200, .border-red-200 {
    border-color: var(--cd-line) !important;
}

.border-slate-600, .border-slate-700, .border-slate-800, .border-ink-800,
.border-ink-900, .border-blue-900, .border-neutral-700 {
    border-color: var(--cd-line-strong) !important;
}

.border-indigo-500, .border-indigo-600, .border-blue-600, .border-blue-700,
.border-blue-800, .border-stamp {
    border-color: var(--cd-acc) !important;
}

.border-white, .border-white\/70, .border-white\/10, .border-white\/20 {
    border-color: rgba(255, 255, 255, 0.16) !important;
}

.shadow-blue-700\/20, .shadow-green-600\/20, .shadow-stamp\/30,
.shadow-ink-900\/5, .shadow-lg, .shadow-xl, .shadow-2xl, .shadow-md, .shadow {
    box-shadow: var(--cd-shadow) !important;
}

.hover\:bg-indigo-500:hover, .hover\:bg-indigo-600:hover, .hover\:bg-indigo-700:hover,
.hover\:bg-indigo-800:hover, .hover\:bg-blue-600:hover, .hover\:bg-blue-700:hover,
.hover\:bg-blue-800:hover, .hover\:bg-stamp:hover, .group:hover .group-hover\:bg-blue-700,
.group:hover .group-hover\:bg-indigo-600 {
    background-color: var(--cd-acc-hover) !important;
}

.hover\:bg-indigo-50:hover, .hover\:bg-blue-50:hover, .hover\:bg-blue-100:hover,
.group:hover .group-hover\:bg-indigo-100 {
    background-color: var(--cd-acc-soft) !important;
}

.hover\:bg-green-600:hover, .hover\:bg-green-700:hover { background-color: var(--cd-green) !important; }

.hover\:bg-white:hover, .hover\:bg-slate-50:hover { background-color: var(--cd-surface-2) !important; }

.hover\:bg-slate-700:hover, .hover\:bg-slate-800:hover, .hover\:bg-neutral-900:hover,
.hover\:bg-ink-800:hover {
    background-color: var(--cd-surface-2) !important;
}

.hover\:text-indigo-600:hover, .hover\:text-indigo-700:hover, .hover\:text-indigo-800:hover,
.hover\:text-blue-400:hover, .hover\:text-blue-500:hover, .hover\:text-blue-600:hover,
.hover\:text-blue-700:hover, .hover\:text-blue-900:hover, .hover\:text-stamp:hover,
.hover\:text-purple-400:hover, .hover\:text-pink-400:hover, .hover\:text-pink-500:hover,
.group:hover .group-hover\:text-blue-400 {
    color: var(--cd-acc-hover) !important;
}

.hover\:text-green-400:hover, .hover\:text-green-500:hover { color: var(--cd-green-txt) !important; }
.hover\:text-red-400:hover, .hover\:text-red-500:hover { color: var(--cd-red-txt) !important; }
.hover\:text-gray-600:hover, .hover\:text-neutral-700:hover { color: var(--cd-txt-2) !important; }
.hover\:text-white:hover, .group:hover .group-hover\:text-white { color: #F4F8FF !important; }

.hover\:border-indigo-600:hover, .hover\:border-blue-700:hover,
.hover\:border-blue-800:hover, .hover\:border-ink-900:hover {
    border-color: var(--cd-acc) !important;
}

.focus\:ring-indigo-500:focus, .focus\:ring-indigo-600:focus, .focus\:ring-blue-700:focus {
    --tw-ring-color: var(--cd-acc-line) !important;
    box-shadow: 0 0 0 3px var(--cd-acc-line) !important;
}

body > header[class],
body > header[id] {
    background: var(--cd-nav-bg) !important;
    border-bottom: 1px solid rgba(255, 255, 255, 0.08) !important;
    backdrop-filter: blur(14px) saturate(140%);
    -webkit-backdrop-filter: blur(14px) saturate(140%);
    box-shadow: 0 10px 30px -20px rgba(0, 0, 0, 0.9) !important;
    transition: padding 0.4s var(--cd-ease), background 0.4s var(--cd-ease), box-shadow 0.4s var(--cd-ease);
}

body > header[class] a,
body > header[id] a,
body > header[class] li,
body > header[class] span,
body > header[class] p {
    color: var(--cd-nav-txt) !important;
}

body > header[class] a:hover,
body > header[id] a:hover {
    color: var(--cd-acc-txt) !important;
}

body > header[class] .bg-white,
body > header[id] .bg-white {
    background-color: rgba(255, 255, 255, 0.08) !important;
}

body > header[class].cd-compacta {
    box-shadow: 0 14px 40px -22px rgba(0, 0, 0, 1) !important;
}

/* Header mobile: azul escuro sólido, sem transparência/blur */
body > header.header-mobile[class] {
    background: var(--cd-nav-bg-solid) !important;
    backdrop-filter: none !important;
    -webkit-backdrop-filter: none !important;
}

body > footer[class] {
    background: var(--cd-footer-bg) !important;
    border-top: 1px solid rgba(255, 255, 255, 0.07);
}

body > header[class],
body > header[id],
body > footer[class],
#mobileMenu,
.bg-slate-700, .bg-slate-800, .bg-slate-900, .bg-slate-950, .bg-neutral-800,
.bg-neutral-900, .bg-neutral-900\/95, .bg-zinc-800, .bg-zinc-900, .bg-ink-800,
.bg-ink-900, .bg-ink-950, .bg-blue-950\/85, .bg-\[\#0b1220\] {
    --cd-surface: rgba(255, 255, 255, 0.05);
    --cd-surface-2: rgba(255, 255, 255, 0.09);
    --cd-bg-alt: rgba(255, 255, 255, 0.04);
    --cd-line: rgba(255, 255, 255, 0.12);
    --cd-line-strong: rgba(255, 255, 255, 0.2);
    --cd-txt: #EDF3FD;
    --cd-txt-2: #B4C6DF;
    --cd-txt-3: #8397B5;
    --cd-acc-txt: #7FB0FF;
    --cd-green-txt: #5BE49B;
}

#mobileMenu {
    background: var(--cd-nav-bg) !important;
    backdrop-filter: blur(18px) saturate(140%);
    -webkit-backdrop-filter: blur(18px) saturate(140%);
    border-left: 1px solid rgba(255, 255, 255, 0.1);
}

#mobileMenu a,
#mobileMenu li,
#mobileMenu span {
    color: var(--cd-nav-txt) !important;
}

#mobileMenu a:hover { color: var(--cd-acc-txt) !important; }

input, textarea, select {
    background-color: var(--cd-surface-2) !important;
    border-color: var(--cd-line) !important;
    color: var(--cd-txt) !important;
    transition: border-color 0.3s var(--cd-ease), box-shadow 0.3s var(--cd-ease), background-color 0.3s var(--cd-ease);
}

input::placeholder, textarea::placeholder { color: var(--cd-txt-3) !important; }

input:focus, textarea:focus, select:focus {
    outline: none !important;
    border-color: var(--cd-acc) !important;
    box-shadow: 0 0 0 4px var(--cd-acc-soft) !important;
}

.nav-link::after { background: var(--cd-acc) !important; }
.nav-link:hover { color: var(--cd-acc-txt) !important; }

.grain-bg {
    background-image: radial-gradient(circle at 1px 1px, var(--cd-line-strong) 1px, transparent 0) !important;
    opacity: 0.5;
}

.placeholder-img { background-color: var(--cd-surface-2) !important; }
.placeholder-img::after { color: var(--cd-txt-3) !important; }
.gallery-thumb { border-color: var(--cd-line) !important; }
.zoom-hint { background: var(--cd-acc) !important; color: #fff !important; }

.cd-progresso {
    position: fixed;
    top: 0;
    left: 0;
    height: 3px;
    width: 0;
    z-index: 9999;
    background: linear-gradient(90deg, var(--cd-acc), var(--cd-green));
    box-shadow: 0 0 14px var(--cd-acc-line);
    transition: width 0.12s linear;
    pointer-events: none;
}

/* Grupo de acoes do cabecalho mobile: tema + botao de menu lado a lado.
   O botao de tema fica a esquerda; o botao de menu continua sendo o ultimo. */
.cd-acoes-mobile {
    display: flex;
    align-items: center;
    gap: 12px;
    flex: 0 0 auto;
    margin-left: auto;
}

.cd-acoes-mobile > button:not(.cd-tema-btn) {
    order: 2;
    line-height: 1;
}

.cd-acoes-mobile > .cd-tema-btn {
    order: 1;
}

@media (max-width: 400px) {
    .cd-acoes-mobile { gap: 8px; }
    .cd-acoes-mobile > .cd-tema-btn { width: 38px; height: 38px; flex: 0 0 38px; font-size: 1rem; }
}

.cd-tema-btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 42px;
    height: 42px;
    flex: 0 0 42px;
    border-radius: 999px;
    border: 1px solid rgba(255, 255, 255, 0.16);
    background: rgba(255, 255, 255, 0.07);
    color: var(--cd-nav-txt) !important;
    font-size: 1.15rem;
    cursor: pointer;
    overflow: hidden;
    position: relative;
    transition: transform 0.4s var(--cd-ease), background 0.35s var(--cd-ease), border-color 0.35s var(--cd-ease), box-shadow 0.35s var(--cd-ease);
}

.cd-tema-btn:hover {
    transform: translateY(-2px) rotate(-12deg);
    background: var(--cd-acc-soft);
    border-color: var(--cd-acc-line);
    box-shadow: var(--cd-glow);
    color: var(--cd-acc-txt) !important;
}

.cd-tema-btn i {
    transition: transform 0.5s var(--cd-ease), opacity 0.3s var(--cd-ease);
}

.cd-tema-btn.cd-girando i {
    transform: rotate(360deg) scale(0.4);
    opacity: 0;
}

.cd-topo {
    position: fixed;
    right: 22px;
    bottom: 22px;
    width: 48px;
    height: 48px;
    border-radius: 999px;
    border: 1px solid var(--cd-acc-line);
    background: var(--cd-acc);
    color: #fff;
    font-size: 1.25rem;
    display: flex;
    align-items: center;
    justify-content: center;
    cursor: pointer;
    z-index: 9998;
    opacity: 0;
    transform: translateY(20px) scale(0.85);
    pointer-events: none;
    box-shadow: var(--cd-glow);
    transition: opacity 0.4s var(--cd-ease), transform 0.4s var(--cd-ease), background 0.3s var(--cd-ease);
}

.cd-topo.cd-visivel {
    opacity: 1;
    transform: translateY(0) scale(1);
    pointer-events: auto;
}

.cd-topo:hover {
    background: var(--cd-acc-hover);
    transform: translateY(-4px) scale(1.06);
}

.cd-reveal {
    opacity: 0;
    transform: translateY(28px);
    transition: opacity 0.75s var(--cd-ease), transform 0.75s var(--cd-ease);
    will-change: opacity, transform;
}

.cd-reveal.cd-visto {
    opacity: 1;
    transform: none;
}

a, button, .transition, [class*="transition"] {
    transition-timing-function: var(--cd-ease);
}

section img:not([class*="rounded-full"]) {
    transition: transform 0.6s var(--cd-ease), box-shadow 0.6s var(--cd-ease), filter 0.6s var(--cd-ease);
}

section img:not([class*="rounded-full"]):hover {
    transform: scale(1.02);
    box-shadow: var(--cd-shadow-lg);
}

.cd-card {
    transition: transform 0.5s var(--cd-ease), box-shadow 0.5s var(--cd-ease), border-color 0.5s var(--cd-ease), background-color 0.5s var(--cd-ease);
}

.cd-card:hover {
    transform: translateY(-6px);
    box-shadow: var(--cd-glow) !important;
    border-color: var(--cd-acc-line) !important;
}

.cd-nav-ativo {
    color: var(--cd-acc-txt) !important;
}

@keyframes cd-flutuar {
    0%, 100% { transform: translateY(0); }
    50% { transform: translateY(-12px); }
}

@keyframes cd-pulsar {
    0%, 100% { opacity: 0.35; transform: scale(1); }
    50% { opacity: 0.6; transform: scale(1.08); }
}

.cd-flutuar { animation: cd-flutuar 6s ease-in-out infinite; }

section [class*="blur-"][class*="absolute"],
section [class*="rounded-full"][class*="absolute"][class*="blur"] {
    animation: cd-pulsar 9s ease-in-out infinite;
}

@media (prefers-reduced-motion: reduce) {
    html { scroll-behavior: auto; }
    .cd-reveal { opacity: 1 !important; transform: none !important; }
    .cd-flutuar, section [class*="blur-"][class*="absolute"] { animation: none !important; }
}