/* =============================================================
   editorial.css — Product Designer layer
   Inspirado na hierarquia tipográfica de alcantara.design
   (sans-serif moderna, pesos contrastantes, generoso espaço)
   Paleta: champagne sobre azul-marinho profundo.
   Mantém singularidade: marca pessoal da Vanessa.
   ============================================================= */

:root {
    /* TIPOGRAFIA — apenas sans, igual ao alcantara */
    --font-display: 'Geist', 'Inter', -apple-system, BlinkMacSystemFont, 'Helvetica Neue', sans-serif;
    --font-body:    'Geist', 'Inter', -apple-system, BlinkMacSystemFont, 'Helvetica Neue', sans-serif;
    --font-mono:    'Geist Mono', ui-monospace, 'SF Mono', Menlo, monospace;

    /* PALETA — champagne / sand sobre night blue */
    --bg-deep:       #0A0E14;
    --bg-paper:      #11161E;
    --bg-elevated:   #161C25;

    --line-soft:     rgba(232, 184, 136, 0.10);
    --line-strong:   rgba(232, 184, 136, 0.22);

    --ink-strong:    #EFEAE0;   /* títulos: branco quente */
    --ink-medium:    #BFB7A8;   /* texto secundário */
    --ink-soft:      #8A8378;   /* meta / mono */

    --accent:        #E8B888;   /* champagne / warm sand */
    --accent-soft:   #C9A78A;
    --accent-glow:   rgba(232, 184, 136, 0.18);

    --signal:        #87C99A;   /* status verde discreto */

    --ease-out-soft: cubic-bezier(0.22, 1, 0.36, 1);
    --ease-out-long: cubic-bezier(0.16, 1, 0.3, 1);

    /* Sobrescreve as variáveis legadas para manter o resto do site coerente */
    --primary: #E8B888;
    --secondary: #C9A78A;
    --accent: #E8B888;
    --cyan: #87C99A;
    --purple: #BFB7A8;
    --bg-dark: #0A0E14;
    --bg-darker: #06090E;
    --bg-card: #11161E;
    --bg-hover: #161C25;
    --border: rgba(232, 184, 136, 0.12);
    --text-primary: #EFEAE0;
    --text-secondary: #BFB7A8;
    --text-muted: #8A8378;
    --gradient-1: linear-gradient(135deg, #E8B888 0%, #C9A78A 100%);
    --gradient-2: linear-gradient(135deg, #C9A78A 0%, #E8B888 100%);
    --gradient-3: linear-gradient(135deg, #87C99A 0%, #E8B888 100%);
    --shadow-glow: 0 0 60px rgba(232, 184, 136, 0.18);
}

[data-theme="light"] {
    --bg-deep:       #FAF8F4;
    --bg-paper:      #F1EDE6;
    --bg-elevated:   #FFFFFF;

    --line-soft:     rgba(20, 22, 28, 0.08);
    --line-strong:   rgba(20, 22, 28, 0.18);

    --ink-strong:    #14161C;
    --ink-medium:    #4A4842;
    --ink-soft:      #807A6E;

    --accent:        #B07A3F;
    --accent-soft:   #8A5E2E;

    --bg-dark: #FAF8F4;
    --bg-darker: #F1EDE6;
    --bg-card: #FFFFFF;
    --border: rgba(20, 22, 28, 0.10);
    --text-primary: #14161C;
    --text-secondary: #4A4842;
    --text-muted: #807A6E;
    --primary: #B07A3F;
}

/* ============== TRANSIÇÃO GRADUAL DE TEMA (claro ↔ escuro) ==============
   Usa a View Transitions API (suporte nativo: Chrome, Edge, Safari 18+).
   Em navegadores sem suporte, o JS faz a troca direta — sem flash. */
::view-transition-old(root),
::view-transition-new(root) {
    animation-duration: 0.7s;
    animation-timing-function: cubic-bezier(0.65, 0, 0.35, 1);
    mix-blend-mode: normal;
}

/* O navegador faz crossfade entre os dois estados automaticamente.
   Reforçamos com fade explícito para garantir suavidade total. */
::view-transition-old(root) {
    animation-name: themeFadeOut;
}
::view-transition-new(root) {
    animation-name: themeFadeIn;
}

@keyframes themeFadeOut {
    from { opacity: 1; }
    to   { opacity: 0; }
}
@keyframes themeFadeIn {
    from { opacity: 0; }
    to   { opacity: 1; }
}

/* Fallback elegante: mesmo sem View Transitions API, todos os elementos
   coloridos animam suavemente entre paletas. */
body,
.main-header,
.main-footer,
.section,
.career-section,
.skill-category,
.skill-chip,
.project-card,
.btn,
.contact-fab,
.lang-segment,
.hero-eyebrow,
.code-block,
.logo-card {
    transition:
        background-color 0.6s cubic-bezier(0.65, 0, 0.35, 1),
        color 0.4s cubic-bezier(0.65, 0, 0.35, 1),
        border-color 0.4s cubic-bezier(0.65, 0, 0.35, 1),
        fill 0.4s cubic-bezier(0.65, 0, 0.35, 1);
}

@media (prefers-reduced-motion: reduce) {
    ::view-transition-old(root),
    ::view-transition-new(root) { animation: none; }
    body, .main-header, .main-footer, .section, .career-section,
    .skill-category, .skill-chip, .project-card, .btn, .contact-fab,
    .lang-segment, .hero-eyebrow, .code-block, .logo-card {
        transition: none;
    }
}

/* ============== RESET TIPOGRÁFICO ============== */
body {
    font-family: var(--font-body) !important;
    font-weight: 400;
    color: var(--ink-medium);
    background: var(--bg-deep);
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
    text-rendering: optimizeLegibility;
    font-feature-settings: 'ss01', 'ss02', 'cv01', 'cv11';
    letter-spacing: -0.005em;
    line-height: 1.55;
}

h1, h2, h3, h4, h5, h6 {
    font-family: var(--font-display);
    color: var(--ink-strong);
    font-weight: 500;
    letter-spacing: -0.025em;
    line-height: 1.05;
}

/* ============== HEADER ============== */
.main-header {
    background: rgba(10, 14, 20, 0.72) !important;
    backdrop-filter: blur(18px) saturate(140%);
    -webkit-backdrop-filter: blur(18px) saturate(140%);
    border-bottom: 1px solid var(--line-soft);
}

[data-theme="light"] .main-header {
    background: rgba(250, 248, 244, 0.78) !important;
}

.brand-logo {
    font-family: var(--font-display);
    font-weight: 600;
    font-size: 1.05rem;
    letter-spacing: -0.02em;
    color: var(--ink-strong);
    display: inline-flex;
    align-items: center;
    gap: 0.5rem;
}
.brand-logo .logo-bracket { display: none; }
.brand-logo .logo-text {
    background: none !important;
    -webkit-text-fill-color: currentColor !important;
    color: var(--ink-strong) !important;
}
.brand-logo::before {
    content: '';
    display: inline-block;
    width: 8px; height: 8px;
    border-radius: 50%;
    background: var(--accent);
    box-shadow: 0 0 0 3px var(--accent-glow);
}

.nav-link {
    font-family: var(--font-body);
    font-weight: 500;
    font-size: 0.9rem;
    color: var(--ink-medium);
    letter-spacing: -0.005em;
}
.nav-link i { display: none; }
.nav-link:hover, .nav-link.active { color: var(--ink-strong); }
.nav-link.active::before { background: var(--accent); }

.lang-segment-btn {
    font-family: var(--font-mono);
    font-weight: 500;
    font-size: 0.7rem;
    letter-spacing: 0.04em;
}
.lang-segment-btn.active {
    background: var(--accent);
    color: var(--bg-deep);
}

/* ============== HERO — HIERARQUIA ALCANTARA ============== */
.hero-section { padding-top: clamp(5rem, 8vh, 6.5rem); padding-bottom: 3rem; }

.hero-eyebrow {
    display: inline-flex;
    align-items: center;
    gap: 0.6rem;
    padding: 0.4rem 0.85rem;
    border: 1px solid var(--line-strong);
    border-radius: 999px;
    font-family: var(--font-mono);
    font-size: 0.7rem;
    letter-spacing: 0.02em;
    text-transform: none;
    color: var(--ink-medium);
    margin-bottom: 1.4rem;
    background: rgba(232, 184, 136, 0.04);
}

.eyebrow-dot {
    width: 7px; height: 7px;
    border-radius: 50%;
    background: var(--signal);
    box-shadow: 0 0 0 4px rgba(135, 201, 154, 0.16);
    animation: heroDotPulse 2.6s ease-in-out infinite;
}
@keyframes heroDotPulse {
    0%, 100% { opacity: 1; transform: scale(1); }
    50%      { opacity: 0.55; transform: scale(0.8); }
}

/* H1 — compacto e impactante (alcantara: 2 linhas que cabem no viewport) */
.hero-name {
    display: flex;
    flex-direction: column;
    gap: 0.6rem;
    margin: 0 0 1.4rem;
}

.hero-display {
    display: block;
    font-family: var(--font-display);
    font-weight: 500;
    font-size: clamp(2.6rem, 6vw, 5.4rem);
    line-height: 0.96;
    letter-spacing: -0.04em;
    color: var(--ink-strong);
    max-width: 14ch;
}

.hero-display-sub {
    display: block;
    font-family: var(--font-display);
    font-weight: 400;
    font-size: clamp(1.15rem, 1.8vw, 1.55rem);
    line-height: 1.15;
    letter-spacing: -0.015em;
    color: var(--accent);
    margin-top: 0.1rem;
}

/* Lede principal — compacto, 2-3 linhas */
.hero-title { margin-bottom: 1.6rem; }
.hero-title .title-prefix { display: none; }
.hero-title .title-text {
    font-family: var(--font-body);
    font-weight: 300;
    font-size: clamp(0.98rem, 1.15vw, 1.1rem);
    line-height: 1.5;
    letter-spacing: -0.005em;
    color: var(--ink-medium);
    max-width: 50ch;
    display: block;
}

.hero-description { display: none; }

/* esconde o resto do "código antigo" no hero que conflita */
.hero-greeting { display: none; }

/* GRADE DO HERO — agora suave, quase imperceptível */
.code-grid-bg {
    opacity: 0.06 !important;
    background-image:
        linear-gradient(rgba(232, 184, 136, 0.18) 1px, transparent 1px),
        linear-gradient(90deg, rgba(232, 184, 136, 0.18) 1px, transparent 1px) !important;
    background-size: 80px 80px !important;
    mask-image: radial-gradient(ellipse 70% 60% at 50% 40%, #000 30%, transparent 100%);
    -webkit-mask-image: radial-gradient(ellipse 70% 60% at 50% 40%, #000 30%, transparent 100%);
}

/* Caracteres de programação caindo — mantém comportamento original,
   só ajusta cor para a paleta nova (champagne discreto) */
.floating-particles { opacity: 1 !important; }
.floating-particles .particle {
    background: none !important;
    color: var(--accent) !important;
    font-family: var(--font-mono) !important;
    font-size: 1.4rem !important;
    opacity: 0.18 !important;
}
.floating-particles .particle { animation-name: floatChar; }
@keyframes floatChar {
    0%, 100% { transform: translateY(100vh) rotate(0deg); opacity: 0; }
    10%, 90% { opacity: 0.16; }
    50%      { transform: translateY(-100px) rotate(180deg); opacity: 0.24; }
}

/* ============== BOTÕES ============== */
.hero-buttons { gap: 0.8rem; margin-top: 1.6rem; margin-bottom: 1.4rem; }

.btn {
    font-family: var(--font-body);
    font-weight: 500;
    font-size: 0.95rem;
    letter-spacing: -0.005em;
    padding: 0.95rem 1.6rem;
    border-radius: 999px;
    transition: all 0.4s var(--ease-out-soft);
}

.btn-primary {
    background: var(--accent) !important;
    color: var(--bg-deep) !important;
    border: 1px solid var(--accent) !important;
    box-shadow: 0 12px 40px -16px var(--accent-glow);
}
.btn-primary:hover {
    background: var(--ink-strong) !important;
    border-color: var(--ink-strong) !important;
    transform: translateY(-2px);
}

.btn-secondary {
    background: transparent !important;
    color: var(--ink-strong) !important;
    border: 1px solid var(--line-strong) !important;
}
.btn-secondary:hover {
    border-color: var(--accent) !important;
    color: var(--accent) !important;
    transform: translateY(-2px);
}

.hero-social .social-icon {
    color: var(--ink-medium);
    border: 1px solid var(--line-soft);
    background: transparent;
    transition: all 0.3s var(--ease-out-soft);
}
.hero-social .social-icon:hover {
    color: var(--accent);
    border-color: var(--accent);
    transform: translateY(-2px);
}

/* ============== FOTO — full bleed, grande, integrada ao hero ============== */

/* Hero-section fica como referência de posicionamento.
   hero-container deixa de ser referência (era position: relative em style.css) */
.hero-section {
    position: relative;
    min-height: 100svh;
    /* Pouco padding: foto encosta no topo útil (logo abaixo do header fixo) */
    padding-top: 0;
    padding-bottom: clamp(2rem, 4vh, 3.5rem);
}
.hero-section .hero-container { position: static !important; }

/* Coluna ~50% da largura da tela, altura quase viewport — como o print de referência */
.hero-image-wrapper {
    position: absolute !important;
    top: 0;
    right: 0;
    bottom: auto;
    width: min(50vw, 760px);
    max-width: min(50vw, 760px);
    height: calc(100svh - 4.5rem);
    min-height: calc(100svh - 4.5rem);
    z-index: 1;
    overflow: visible;
    margin: 0;
    padding: 0;
    pointer-events: auto;
}

/* Sem isolation: o mix-blend-mode da foto compõe com o fundo #0A0E14 da página */
.hero-image-container--free {
    position: relative;
    width: 100%;
    height: 100%;
    min-height: 100%;
    display: block;
    overflow: visible;
    background: transparent;
}

/* Champagne bem sutil atrás da cabeça — profundidade, sem competir com o lighten */
.hero-photo-glow {
    display: block;
    position: absolute;
    inset: -8% -10% -12% -10%;
    z-index: 0;
    pointer-events: none;
    mix-blend-mode: normal;
    background: radial-gradient(
        ellipse 42% 36% at 50% 26%,
        rgba(232, 184, 136, 0.14) 0%,
        rgba(232, 184, 136, 0.04) 45%,
        transparent 70%
    );
    filter: blur(48px);
    opacity: 0.55;
}

.hero-photo-stage {
    position: absolute;
    inset: 0;
    z-index: 1;
    width: 100%;
    height: 100%;
    display: block;
}

/* cover preenche a coluna (tamanho do print); eixo alto preserva cabeça; lighten + #0A0E14 */
.hero-photo {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    display: block;
    object-fit: cover;
    object-position: center 16%;
    border: none;
    border-radius: 0;
    background: transparent;
    box-shadow: none;
    mix-blend-mode: lighten;
    filter: grayscale(1) contrast(1.05) brightness(0.97);
    -webkit-mask-image: radial-gradient(
        ellipse 108% 96% at 50% 38%,
        #000 0%,
        #000 44%,
        rgba(0, 0, 0, 0.82) 58%,
        rgba(0, 0, 0, 0.38) 76%,
        transparent 100%
    );
    mask-image: radial-gradient(
        ellipse 108% 96% at 50% 38%,
        #000 0%,
        #000 44%,
        rgba(0, 0, 0, 0.82) 58%,
        rgba(0, 0, 0, 0.38) 76%,
        transparent 100%
    );
    -webkit-mask-size: 100% 100%;
    mask-size: 100% 100%;
    -webkit-mask-repeat: no-repeat;
    mask-repeat: no-repeat;
    -webkit-mask-position: center;
    mask-position: center;
}

/* Sem overlay retangular duro sobre a foto — integração vem do blend + máscara */
.hero-image-container--free::before {
    display: none;
}

.hero-image-container--free::after {
    display: none;
}

/* Tema claro: multiply + P&B */
[data-theme="light"] .hero-photo {
    mix-blend-mode: multiply;
    filter: grayscale(1) contrast(1.04) brightness(0.99);
}

[data-theme="light"] .hero-photo-glow {
    background: radial-gradient(
        ellipse 40% 34% at 50% 28%,
        rgba(176, 122, 63, 0.1) 0%,
        transparent 68%
    );
    opacity: 0.45;
}

/* Mobile / tablet */
@media (max-width: 992px) {
    .hero-image-wrapper {
        position: relative !important;
        width: 100%;
        max-width: 100%;
        height: auto;
        min-height: min(68vh, 580px);
        aspect-ratio: unset;
        margin: 0 auto 1.25rem;
        right: auto;
        top: auto;
        bottom: auto;
    }
    .hero-photo {
        object-fit: cover;
        object-position: center 18%;
        -webkit-mask-image: radial-gradient(
            ellipse 100% 94% at 50% 36%,
            #000 0%,
            #000 42%,
            rgba(0, 0, 0, 0.8) 56%,
            rgba(0, 0, 0, 0.32) 74%,
            transparent 100%
        );
        mask-image: radial-gradient(
            ellipse 100% 94% at 50% 36%,
            #000 0%,
            #000 42%,
            rgba(0, 0, 0, 0.8) 56%,
            rgba(0, 0, 0, 0.32) 74%,
            transparent 100%
        );
        -webkit-mask-position: center;
        mask-position: center;
    }
}

/* Fallback elegante quando a imagem não existir ainda */
.hero-photo-fallback {
    width: 60%;
    aspect-ratio: 4 / 5;
    margin: auto;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 0.6rem;
    border: 1px dashed var(--line-strong);
    border-radius: 6px;
    background: rgba(232, 184, 136, 0.03);
    color: var(--ink-soft);
    mix-blend-mode: normal;
}
.hero-photo-fallback-mono {
    font-family: var(--font-mono);
    font-size: 0.8rem;
    letter-spacing: 0.04em;
    color: var(--accent);
}
.hero-photo-fallback-hint {
    font-family: var(--font-body);
    font-size: 0.95rem;
    color: var(--ink-medium);
    text-align: center;
    max-width: 22ch;
    padding: 0 1.5rem;
    line-height: 1.4;
}

/* desliga o glow legado e os badges */
.profile-image-glow { display: none !important; }
.floating-badge { display: none !important; }
.profile-image-frame, .editorial-frame, .editorial-frame-corner, .editorial-frame-tag { display: none !important; }

@media (max-width: 768px) {
    .hero-image-wrapper {
        min-height: min(68vh, 560px);
        max-width: 100%;
    }
    .hero-photo-meta { font-size: 0.6rem; right: -4px; }
}

/* ============== TÍTULOS DE SEÇÃO ============== */
.section { padding: clamp(5rem, 10vw, 9rem) 0; }

.section-header {
    display: flex;
    align-items: baseline;
    gap: 1.2rem;
    margin-bottom: 4rem;
    flex-wrap: wrap;
}

.section-number {
    font-family: var(--font-mono);
    font-size: 0.78rem;
    color: var(--accent);
    letter-spacing: 0.06em;
    font-weight: 500;
    opacity: 0.85;
}

.section-title {
    font-family: var(--font-display);
    font-weight: 500;
    font-size: clamp(2rem, 4vw, 3.6rem);
    letter-spacing: -0.035em;
    line-height: 1;
    color: var(--ink-strong);
    margin: 0;
}
.section-title .title-bracket { display: none; }
.section-title .title-text { font-style: normal; }

.section-line {
    flex: 1;
    height: 1px;
    background: var(--line-soft);
    min-width: 80px;
    margin-left: 0.5rem;
}

/* ============== SEÇÃO ABOUT — refino ============== */
.about-text {
    font-family: var(--font-body);
    font-weight: 300;
    font-size: clamp(1.05rem, 1.25vw, 1.2rem);
    line-height: 1.65;
    color: var(--ink-medium);
    max-width: 60ch;
    margin-bottom: 1.4rem;
}

.code-block {
    background: var(--bg-paper);
    border: 1px solid var(--line-soft);
    border-radius: 8px;
    padding: 1.5rem;
    font-family: var(--font-mono);
    font-size: 0.85rem;
}
.code-keyword, .code-property, .code-variable { color: var(--ink-medium); }
.code-string { color: var(--accent); }
.code-operator, .code-brace, .code-bracket, .code-comma, .code-semicolon { color: var(--ink-soft); }

/* ============== CARREIRA — marquee ============== */
.career-section {
    background: var(--bg-paper);
    position: relative;
    overflow: hidden;
    border-top: 1px solid var(--line-soft);
    border-bottom: 1px solid var(--line-soft);
}

.career-lede {
    font-family: var(--font-body);
    font-weight: 300;
    font-style: normal;
    font-size: clamp(1.15rem, 1.6vw, 1.5rem);
    line-height: 1.5;
    color: var(--ink-medium);
    max-width: 62ch;
    margin: 0 auto 4rem;
    text-align: center;
    letter-spacing: -0.01em;
}

.logo-marquee {
    position: relative;
    width: 100%;
    overflow: hidden;
    padding: 1.5rem 0;
    mask-image: linear-gradient(90deg, transparent 0%, #000 10%, #000 90%, transparent 100%);
    -webkit-mask-image: linear-gradient(90deg, transparent 0%, #000 10%, #000 90%, transparent 100%);
}

.logo-marquee-fade { display: none; } /* mask já cuida disso */

.logo-marquee-track {
    display: flex;
    gap: 1rem;
    width: max-content;
    animation: marqueeScroll 48s linear infinite;
    will-change: transform;
}

.logo-marquee:hover .logo-marquee-track { animation-play-state: paused; }

@keyframes marqueeScroll {
    from { transform: translateX(0); }
    to   { transform: translateX(-50%); }
}

@media (prefers-reduced-motion: reduce) {
    .logo-marquee-track { animation: none; }
}

/* Logos no carrossel — sem cards, sem fundo, monocromáticas (estilo alcantara) */
.logo-card {
    flex: 0 0 auto;
    width: auto;
    min-width: 140px;
    max-width: 220px;
    height: 80px;
    padding: 0 2.5rem;
    border: none;
    border-radius: 0;
    background: transparent;
    box-shadow: none;
    display: flex;
    align-items: center;
    justify-content: center;
    text-align: center;
    text-decoration: none;
    color: inherit;
    position: relative;
}

.logo-card:hover { transform: none; box-shadow: none; }

/* Pontinho separador entre cada logo (igual à referência) */
.logo-card::after {
    content: '';
    position: absolute;
    right: -3px;
    top: 50%;
    transform: translateY(-50%);
    width: 5px;
    height: 5px;
    border-radius: 50%;
    background: var(--accent);
    opacity: 0.45;
}

.logo-card:last-child::after { display: none; }

/* Nome embaixo da logo — escondido (estilo Renato é só logo) */
.logo-card-name { display: none; }

/* Wrapper das imagens */
.logo-img-wrap {
    width: 100%;
    height: 100%;
    display: flex;
    align-items: center;
    justify-content: center;
    overflow: visible;
}

/* A logo em si: transparente original, convertida para branco quente.
   brightness(0) -> tudo preto; invert(1) -> tudo branco;
   opacity ajusta o tom para um cream sutil que casa com a paleta. */
.logo-img {
    max-width: 100%;
    max-height: 56px;
    width: auto;
    height: auto;
    object-fit: contain;
    display: block;
    filter: brightness(0) invert(1);
    opacity: 0.78;
    transition: opacity 0.35s var(--ease-out-soft);
}

.logo-card:hover .logo-img { opacity: 1; }

/* Fallback tipográfico — só aparece se a imagem não carregar */
.logo-fallback {
    display: none;
    font-family: var(--font-body);
    font-weight: 500;
    font-size: 1.1rem;
    letter-spacing: -0.01em;
    color: var(--ink-strong);
    opacity: 0.78;
    text-align: center;
    align-items: center;
    justify-content: center;
}

/* Compatibilidade caso ainda existam .logo-svg inline */
.logo-svg { width: auto; height: 56px; object-fit: contain; display: block; filter: brightness(0) invert(1); opacity: 0.78; }

/* duplicado para manter especificidade */
.logo-card { text-decoration: none; color: inherit; }

/* Stats sob o marquee */
.career-stats {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 2rem;
    max-width: 760px;
    margin: 4rem auto 0;
    padding-top: 3rem;
    border-top: 1px solid var(--line-soft);
}

.career-stat {
    text-align: center;
    display: flex;
    flex-direction: column;
    gap: 0.5rem;
}

.career-stat-num-row {
    display: inline-flex;
    align-items: baseline;
    justify-content: center;
    gap: 0.3em;
    line-height: 1;
}

.career-stat-num {
    font-family: var(--font-display);
    font-weight: 500;
    font-size: clamp(2.2rem, 3.6vw, 3rem);
    color: var(--accent);
    line-height: 1;
    letter-spacing: -0.03em;
}

.career-stat-num-unit {
    font-family: var(--font-display);
    font-weight: 500;
    font-size: clamp(0.95rem, 1.65vw, 1.2rem);
    color: var(--accent);
    letter-spacing: 0.02em;
    opacity: 0.88;
    transform: translateY(0.06em);
}

.career-stat-label {
    font-family: var(--font-mono);
    font-size: 0.7rem;
    text-transform: uppercase;
    letter-spacing: 0.10em;
    color: var(--ink-soft);
    font-weight: 400;
}

/* (regras antigas conflitantes do carrossel removidas — substituídas
   pelo bloco responsivo unificado no fim do arquivo) */

/* ============== SKILLS — calmar a paleta ============== */
.skill-chip { background: var(--bg-elevated) !important; border: 1px solid var(--line-soft) !important; color: var(--ink-medium) !important; font-family: var(--font-body); font-weight: 500; }
.skill-chip-name { color: var(--ink-strong) !important; }
.skill-chip--advanced .skill-chip-dot { background: var(--accent) !important; box-shadow: 0 0 0 3px var(--accent-glow); }
.skill-chip--proficient .skill-chip-dot { background: var(--accent-soft) !important; }
.skill-chip--familiar .skill-chip-dot { background: var(--ink-soft) !important; }

.skills-legend-dot--advanced  { background: var(--accent) !important; }
.skills-legend-dot--proficient{ background: var(--accent-soft) !important; }
.skills-legend-dot--familiar  { background: var(--ink-soft) !important; }

.category-title { font-family: var(--font-display); font-weight: 500; color: var(--ink-strong); letter-spacing: -0.02em; font-size: 1.4rem; }
.skill-category-tagline { font-family: var(--font-body); font-weight: 400; color: var(--ink-medium); font-size: 0.92rem; }
.skill-category-icon { color: var(--accent) !important; background: var(--accent-glow) !important; }
.skill-category { background: var(--bg-paper) !important; border: 1px solid var(--line-soft) !important; }

.skills-intro { font-family: var(--font-body); font-weight: 300; color: var(--ink-medium); font-size: 1.05rem; }

/* ============== PROJETOS ============== */
.project-card {
    background: var(--bg-paper) !important;
    border: 1px solid var(--line-soft) !important;
    border-radius: 10px;
    transition: all 0.5s var(--ease-out-soft);
}
.project-card:hover {
    border-color: var(--line-strong) !important;
    transform: translateY(-4px);
}
.project-title { font-family: var(--font-display); font-weight: 500; color: var(--ink-strong); letter-spacing: -0.02em; }
.project-description { font-family: var(--font-body); font-weight: 400; color: var(--ink-medium); }
.tag {
    font-family: var(--font-mono) !important;
    font-size: 0.7rem !important;
    color: var(--accent) !important;
    background: var(--accent-glow) !important;
    border: 1px solid transparent !important;
    text-transform: lowercase;
    letter-spacing: 0.02em;
}

/* ============== FOOTER ============== */
.main-footer { background: var(--bg-paper) !important; border-top: 1px solid var(--line-soft); }
.footer-text, .footer-email-link, .footer-built {
    font-family: var(--font-body);
    font-style: normal;
    font-weight: 400;
}
.footer-email-link { color: var(--accent) !important; }
.footer-email-link:hover { color: var(--ink-strong) !important; }
.footer-social-link { color: var(--ink-medium); transition: color 0.3s; }
.footer-social-link:hover { color: var(--accent); }

/* ============== SCROLL INDICATOR ============== */
.scroll-text { font-family: var(--font-mono); letter-spacing: 0.10em; text-transform: uppercase; font-size: 0.68rem; color: var(--ink-soft); }
.scroll-mouse { border-color: var(--ink-soft); }
.scroll-wheel { background: var(--accent); }

/* ============== CONTACT FAB ============== */
.contact-fab {
    background: var(--accent) !important;
    color: var(--bg-deep) !important;
    box-shadow: 0 16px 50px -16px var(--accent-glow);
}
.contact-fab:hover { background: var(--ink-strong) !important; }

.contact-header-btn {
    background: var(--accent) !important;
    color: var(--bg-deep) !important;
    font-family: var(--font-body);
    font-weight: 500;
    border-radius: 999px;
}
.contact-header-btn:hover { background: var(--ink-strong) !important; }

/* ============== LOADER ============== */
.loader-screen { background: var(--bg-deep); }
.loader-code-text { font-family: var(--font-mono); color: var(--accent); }
.loader-progress-bar { background: var(--accent); box-shadow: 0 0 20px var(--accent-glow); }
.loader-percentage { font-family: var(--font-mono); color: var(--accent); }
.loader-spinner { border-top-color: var(--accent); border-right-color: var(--accent-soft); }


/* =============================================================
   ============== RESPONSIVO UNIFICADO (final) ===============
   Consolida todas as regras mobile, sobrescrevendo conflitos
   anteriores. Hierarquia: tablet → mobile → phone → tiny.
   ============================================================= */

/* ---------- Prevenções globais ---------- */
html, body { overflow-x: hidden; max-width: 100%; }
*, *::before, *::after { max-width: 100%; }
img, svg, video { max-width: 100%; height: auto; }

/* =====================================================
   TABLET (≤1024px) — coluna única, hero foto + texto
   ===================================================== */
@media (max-width: 1024px) {
    /* Hero deixa de ter foto absoluta no canto direito */
    .hero-section {
        min-height: auto !important;
        padding: 5rem 0 3rem !important;
    }
    .hero-section .hero-container {
        position: static !important;
        grid-template-columns: 1fr !important;
        gap: 2.5rem !important;
        text-align: left !important;
        padding: 0 1.5rem !important;
    }
    .hero-content { order: 2; }
    .hero-image-wrapper {
        position: relative !important;
        order: 1;
        top: auto !important;
        right: auto !important;
        bottom: auto !important;
        width: 100% !important;
        max-width: 420px !important;
        aspect-ratio: 4 / 5 !important;        /* container retrato — busto inteiro cabe */
        height: auto !important;
        min-height: 0 !important;
        margin: 0 auto !important;
        z-index: 1;
    }
    .hero-image-container--free {
        position: relative !important;
        width: 100% !important;
        height: 100% !important;
        min-height: inherit !important;
    }
    .hero-image-container--free::before { display: none !important; }
    .hero-image-container--free::after { display: none !important; }
    .hero-photo-glow { display: none !important; }
    .hero-photo {
        position: absolute !important;
        inset: 0 !important;
        width: 100% !important;
        height: 100% !important;
        object-fit: cover !important;
        object-position: center top !important;  /* topo da foto alinhado — cabeça inteira */
        /* máscara mais generosa: revela busto + mãos, dissolve só nas pontas */
        -webkit-mask-image: radial-gradient(
            ellipse 110% 105% at 50% 45%,
            #000 0%, #000 60%, rgba(0,0,0,0.55) 82%, transparent 100%
        ) !important;
        mask-image: radial-gradient(
            ellipse 110% 105% at 50% 45%,
            #000 0%, #000 60%, rgba(0,0,0,0.55) 82%, transparent 100%
        ) !important;
    }

    /* Esconde o scroll indicator no mobile — sobreposição com os botões e
       redundante em telas touch onde o scroll é gesto natural */
    .scroll-indicator { display: none !important; }

    /* Título maior que cabe na largura mas não estoura */
    .hero-display {
        font-size: clamp(2.4rem, 8vw, 4.2rem) !important;
        max-width: 100% !important;
    }
    .hero-display-sub {
        font-size: clamp(1.05rem, 3.5vw, 1.4rem) !important;
    }
    .hero-title .title-text {
        font-size: clamp(0.95rem, 2.5vw, 1.05rem) !important;
        max-width: 100% !important;
    }

    /* Texto antigo (caso reapareça) */
    .hero-name { font-size: inherit !important; }

    /* Sections: padding menor */
    .section { padding: 4rem 0 !important; }
    .section-container { padding: 0 1.5rem !important; }
    .section-header {
        gap: 0.8rem !important;
        margin-bottom: 2.5rem !important;
        flex-wrap: wrap !important;
    }
    .section-title {
        font-size: clamp(1.8rem, 5vw, 2.6rem) !important;
    }
    .section-line { display: none !important; }

    /* About: texto + code stack */
    .about-content { gap: 2rem !important; }
    .about-text { font-size: 1rem !important; }

    /* Skills bento empilha */
    .skills-bento {
        grid-template-columns: 1fr !important;
        gap: 1rem !important;
    }

    /* Projetos: container menor */
    .projects-carousel { padding: 0 !important; }
}

/* =====================================================
   MOBILE (≤768px) — phone padrão
   ===================================================== */
@media (max-width: 768px) {
    /* Hero respira menos */
    .hero-section { padding: 4.5rem 0 2.5rem !important; }
    .hero-section .hero-container { gap: 2rem !important; padding: 0 1.25rem !important; }
    .hero-image-wrapper {
        max-width: 360px !important;
        min-height: 0 !important;
    }

    /* Eyebrow pode quebrar em 2 linhas se preciso */
    .hero-eyebrow {
        white-space: normal !important;
        line-height: 1.3 !important;
        margin-bottom: 1rem !important;
        padding: 0.5rem 0.85rem !important;
        font-size: 0.65rem !important;
    }

    /* H1 mais compacto */
    .hero-display {
        font-size: clamp(2.2rem, 9.5vw, 3.2rem) !important;
        line-height: 1.05 !important;
    }
    .hero-display-sub { font-size: 1.05rem !important; }
    .hero-name { gap: 0.4rem !important; margin-bottom: 1rem !important; }

    .hero-title { margin-bottom: 1.2rem !important; }
    .hero-title .title-text { font-size: 0.95rem !important; line-height: 1.45 !important; }

    /* Botões full-width empilhados */
    .hero-buttons {
        flex-direction: column !important;
        gap: 0.7rem !important;
        margin-top: 1.2rem !important;
        margin-bottom: 1.2rem !important;
        width: 100% !important;
    }
    .btn {
        width: 100% !important;
        justify-content: center !important;
        padding: 0.85rem 1.4rem !important;
        font-size: 0.95rem !important;
    }

    .hero-social {
        gap: 0.8rem !important;
        flex-wrap: wrap !important;
    }
    .hero-social .social-icon {
        width: 42px !important;
        height: 42px !important;
        font-size: 1rem !important;
    }

    /* Sections menores */
    .section { padding: 3.5rem 0 !important; }
    .section-container { padding: 0 1.25rem !important; }
    .section-header { margin-bottom: 2rem !important; }
    .section-title { font-size: clamp(1.6rem, 7vw, 2.2rem) !important; }
    .section-number { font-size: 0.7rem !important; }

    /* Career */
    .career-lede {
        font-size: clamp(1rem, 3.2vw, 1.15rem) !important;
        line-height: 1.4 !important;
        margin-bottom: 2.5rem !important;
        padding: 0 !important;
    }

    /* Carrossel de logos: cards menores, monocromáticos */
    .logo-marquee { padding: 1rem 0 !important; }
    .logo-marquee-track { gap: 0.5rem !important; }
    .logo-card {
        min-width: 100px !important;
        max-width: 160px !important;
        height: 60px !important;
        padding: 0 1.5rem !important;
    }
    .logo-img { max-height: 38px !important; }
    .logo-card::after {
        width: 4px !important;
        height: 4px !important;
        right: -2px !important;
    }
    .logo-fallback { font-size: 0.85rem !important; }

    /* Stats: já vira 1fr no breakpoint maior, mas reforço */
    .career-stats {
        margin-top: 2.5rem !important;
        padding-top: 2rem !important;
        gap: 1.4rem !important;
    }

    /* Skills */
    .skill-category-icon { width: 36px !important; height: 36px !important; }
    .category-title { font-size: 1.15rem !important; }
    .skill-category-tagline { font-size: 0.85rem !important; }
    .skills-intro { font-size: 0.95rem !important; }

    /* Projetos card */
    .project-card { min-height: auto !important; }
    .project-title { font-size: 1.1rem !important; }
    .project-description { font-size: 0.9rem !important; }

    /* Footer empilha */
    .footer-content {
        flex-direction: column !important;
        gap: 1.2rem !important;
        text-align: center !important;
        padding: 1.5rem 0 !important;
    }
    .footer-text { flex-wrap: wrap; justify-content: center; }
    .footer-social { justify-content: center !important; }

    /* FAB do WhatsApp menor */
    .contact-fab {
        width: 48px !important;
        height: 48px !important;
        right: 1rem !important;
        bottom: 1rem !important;
    }

    /* Header */
    .nav-container { padding: 0.7rem 1rem !important; }
    .brand-logo { font-size: 1rem !important; }
    .lang-segment-btn { padding: 0.35rem 0.55rem !important; font-size: 0.65rem !important; }
    .theme-toggle { width: 38px !important; height: 38px !important; }

    /* Hero background grid mais sutil ainda */
    .code-grid-bg { opacity: 0.04 !important; background-size: 50px 50px !important; }
    .floating-particles .particle { font-size: 1rem !important; }
}

/* =====================================================
   PHONE PEQUENO (≤480px)
   ===================================================== */
@media (max-width: 480px) {
    .hero-section { padding: 4rem 0 2rem !important; }
    .hero-section .hero-container { padding: 0 1rem !important; gap: 1.6rem !important; }
    .hero-image-wrapper {
        max-width: 320px !important;
        min-height: clamp(220px, 32vh, 300px) !important;
    }

    .hero-eyebrow {
        font-size: 0.62rem !important;
        padding: 0.45rem 0.75rem !important;
    }

    .hero-display { font-size: clamp(2rem, 11vw, 2.8rem) !important; }
    .hero-display-sub { font-size: 0.98rem !important; }
    .hero-title .title-text { font-size: 0.9rem !important; }

    .section { padding: 3rem 0 !important; }
    .section-container { padding: 0 1rem !important; }
    .section-header { margin-bottom: 1.6rem !important; gap: 0.6rem !important; }
    .section-title { font-size: clamp(1.4rem, 8vw, 1.9rem) !important; }

    .career-lede { font-size: 0.95rem !important; margin-bottom: 2rem !important; }

    .logo-card {
        min-width: 88px !important;
        max-width: 140px !important;
        height: 54px !important;
        padding: 0 1.1rem !important;
    }
    .logo-img { max-height: 32px !important; }

    .career-stat-num { font-size: 2rem !important; }
    .career-stat-label { font-size: 0.62rem !important; }

    .footer-text { font-size: 0.85rem !important; }
}

/* =====================================================
   TINY (≤360px) — phones bem pequenos
   ===================================================== */
@media (max-width: 360px) {
    .hero-section .hero-container { padding: 0 0.85rem !important; }
    .hero-image-wrapper { max-width: 280px !important; min-height: 220px !important; }
    .hero-display { font-size: 1.85rem !important; }
    .hero-eyebrow { font-size: 0.58rem !important; }

    .logo-card { min-width: 80px !important; padding: 0 0.9rem !important; }
    .logo-img { max-height: 28px !important; }

    .btn { font-size: 0.88rem !important; padding: 0.75rem 1.1rem !important; }
}


/* =============================================================
   SETAS DO CARROSSEL DE PROJETOS — visíveis só no mobile
   ============================================================= */
.projects-carousel { position: relative; }

.projects-carousel-arrow {
    display: none;                /* desktop esconde — uso é touch/swipe */
    position: absolute;
    top: 38%;
    transform: translateY(-50%);
    width: 44px;
    height: 44px;
    border-radius: 999px;
    background: rgba(232, 184, 136, 0.92);
    color: var(--bg-deep);
    border: none;
    cursor: pointer;
    z-index: 5;
    align-items: center;
    justify-content: center;
    font-size: 0.95rem;
    box-shadow: 0 8px 22px -8px rgba(0, 0, 0, 0.55);
    transition: opacity 0.3s var(--ease-out-soft), transform 0.3s var(--ease-out-soft), background 0.3s;
    -webkit-tap-highlight-color: transparent;
}

.projects-carousel-arrow:active {
    transform: translateY(-50%) scale(0.94);
    background: var(--ink-strong);
}

.projects-carousel-arrow:disabled {
    opacity: 0.35;
    pointer-events: none;
}

.projects-carousel-arrow--prev { left: 0.6rem; }
.projects-carousel-arrow--next { right: 0.6rem; }

@media (max-width: 768px) {
    .projects-carousel-arrow {
        display: flex;
    }
}

@media (max-width: 480px) {
    .projects-carousel-arrow {
        width: 40px;
        height: 40px;
        font-size: 0.85rem;
    }
    .projects-carousel-arrow--prev { left: 0.4rem; }
    .projects-carousel-arrow--next { right: 0.4rem; }
}


/* =============================================================
   CARROSSEL DE PROJETOS — modo mobile (scroll horizontal por seta)
   ============================================================= */
@media (max-width: 768px) {
    /* Viewport vira scrollável horizontalmente */
    .projects-carousel-viewport {
        overflow-x: auto !important;
        overflow-y: hidden !important;
        -webkit-overflow-scrolling: touch;
        scroll-snap-type: x mandatory;
        scroll-behavior: smooth;
        /* esconde a barra de scroll mas mantém funcional */
        scrollbar-width: none;
    }
    .projects-carousel-viewport::-webkit-scrollbar { display: none; }

    /* Track para de animar e fica como flex normal */
    .projects-carousel-track {
        animation: none !important;
        gap: 1rem !important;
        width: max-content !important;
        padding: 0.25rem 1rem 0.5rem !important;
    }

    /* Cards do carrossel snapam um por um */
    .projects-carousel-track > a.project-card,
    .projects-carousel-track > a.project-card--carousel-clone {
        scroll-snap-align: center;
        flex: 0 0 min(82vw, 340px) !important;
        max-width: min(82vw, 340px) !important;
    }

    /* Esconde os clones no mobile (não fazem sentido sem auto-scroll) */
    .projects-carousel-track > a.project-card--carousel-clone {
        display: none !important;
    }
}