﻿@import url('https://fonts.googleapis.com/css2?family=Inter:wght@400;500;600;700;800;900&display=swap');
:root {
    --brand: #2563eb;
    --brand-2: #14b8a6;
    --brand-dark: #0f172a;
    --accent: #f59e0b;
    --bg-soft: #f5f8fc;
    --surface: rgba(255, 255, 255, 0.94);
    --surface-strong: #ffffff;
    --line: rgba(148, 163, 184, 0.22);
    --ink: #0f172a;
    --muted: #64748b;
    --shadow: 0 20px 55px rgba(15, 23, 42, 0.10);
    --shadow-soft: 0 12px 28px rgba(15, 23, 42, 0.08);
    --radius-xl: 28px;
    --radius-lg: 22px;
    --radius-md: 16px;
}

html {
    scroll-behavior: smooth;
}

body {
    color: var(--ink);
    background:
        radial-gradient(circle at top left, rgba(37, 99, 235, 0.08), transparent 28%),
        radial-gradient(circle at top right, rgba(20, 184, 166, 0.08), transparent 26%),
        linear-gradient(180deg, #fbfcff 0%, var(--bg-soft) 100%);
    font-family: 'Inter', 'Segoe UI', 'Muli', sans-serif;
    -webkit-font-smoothing: antialiased;
    text-rendering: optimizeLegibility;
}

h1, h2, h3, h4, h5, h6 {
    color: var(--brand-dark);
    font-weight: 800;
    letter-spacing: -0.02em;
}

p {
    color: #475569;
    line-height: 1.7;
}

a {
    color: inherit;
    text-decoration-thickness: 2px;
    text-underline-offset: 3px;
}

a:hover {
    color: var(--brand);
}

.topbar,
.header-area .headder-top {
    background: rgba(255, 255, 255, 0.84) !important;
    backdrop-filter: blur(16px);
    border-bottom: 1px solid rgba(148, 163, 184, 0.18);
    box-shadow: 0 10px 30px rgba(15, 23, 42, 0.05);
}

.topbar {
    height: auto;
    min-height: 78px;
    padding: 14px 6vw;
}

.brand,
.logo a {
    display: inline-flex;
    align-items: flex-start;
    flex-direction: column;
    gap: 2px;
    text-decoration: none;
    color: var(--brand-dark) !important;
}

.brand-name,
.logo h2 {
    margin: 0 !important;
    font-size: 24px;
    line-height: 1;
    font-weight: 900 !important;
    letter-spacing: -0.04em;
    color: var(--brand-dark) !important;
}

.brand-slogan {
    display: block;
    font-size: 11px;
    font-weight: 800;
    letter-spacing: 0.14em;
    text-transform: uppercase;
    color: var(--brand);
}

.nav {
    display: flex;
    align-items: center;
    gap: 14px;
    flex-wrap: wrap;
}

.nav a,
.main-menu ul li a,
.header-btn a {
    font-weight: 700;
    color: var(--brand-dark);
}

.nav a:hover,
.main-menu ul li a:hover {
    color: var(--brand);
}

.nav-cta,
.btn,
.head-btn1,
.head-btn2,
.btn.primary,
.btn.secondary,
.button,
.border-btn,
.boxed-btn {
    min-height: 44px;
    padding: 0 18px;
    border-radius: 999px !important;
    border: 1px solid transparent;
    font-weight: 800 !important;
    letter-spacing: 0.01em;
    transition: transform .18s ease, box-shadow .18s ease, background-color .18s ease, border-color .18s ease;
}

.nav-cta,
.btn.primary,
.head-btn1 {
    background: linear-gradient(135deg, var(--brand) 0%, var(--brand-2) 100%) !important;
    color: #fff !important;
    border-color: transparent !important;
    box-shadow: 0 12px 28px rgba(37, 99, 235, 0.18);
}

.nav-cta:hover,
.btn.primary:hover,
.head-btn1:hover {
    box-shadow: 0 18px 30px rgba(37, 99, 235, 0.22);
    transform: translateY(-1px);
}

.head-btn2,
.btn.secondary {
    background: rgba(255, 255, 255, 0.85) !important;
    color: var(--brand-dark) !important;
    border: 1px solid rgba(148, 163, 184, 0.28) !important;
}

.head-btn2:hover,
.btn.secondary:hover {
    background: #fff !important;
    border-color: rgba(37, 99, 235, 0.22) !important;
}

.btn:hover,
.head-btn1:hover,
.head-btn2:hover,
.nav-cta:hover,
.button:hover,
.boxed-btn:hover {
    transform: translateY(-1px);
}

.page,
.featured-job-area .container,
.our-services .container,
.auth-card,
.single-job-items,
.panel,
.price-card,
.action-card,
.resume,
.resume-preview,
.single-services,
.hero-actions,
.auth-card,
.single-job-items,
.auth-card form,
.single-job-items form,
.panel,
.price-card {
    position: relative;
}

.single-job-items,
.single-services,
.auth-card,
.panel,
.price-card,
.action-card,
.resume,
.resume-preview,
.hero-card,
.hero-panel,
.boxed-section,
.auth-card {
    background: var(--surface) !important;
    border: 1px solid var(--line) !important;
    border-radius: var(--radius-xl) !important;
    box-shadow: var(--shadow) !important;
    backdrop-filter: blur(12px);
}

.single-job-items,
.single-services,
.panel,
.price-card,
.action-card,
.auth-card {
    padding: 24px !important;
}

.featured-job-area,
.our-services,
.section-pad-t30,
.section-padding,
.section-padding2,
.section-padding30,
.section-padding3 {
    position: relative;
}

.featured-job-area.feature-padding {
    padding-top: 36px !important;
    padding-bottom: 52px !important;
}

.section-tittle h2,
.section-head h2,
.hero__caption h1,
.hero-caption h2,
.hero-copy h1,
.single-slider h1 {
    color: var(--brand-dark) !important;
    font-weight: 900 !important;
    letter-spacing: -0.04em;
}

.section-tittle span,
.eyebrow,
.hero-caption span,
.text-accent {
    color: var(--brand) !important;
    font-weight: 800;
    letter-spacing: 0.12em;
    text-transform: uppercase;
}

.hero__caption p,
.hero-copy p,
.hero-caption p,
.section-tittle p,
.single-job-items p,
.single-services p,
.auth-card p,
.price-card p {
    color: var(--muted) !important;
}

.slider-area,
.single-slider {
    border-radius: 0 0 34px 34px;
    overflow: hidden;
}

.single-slider::before {
    content: '';
    position: absolute;
    inset: 0;
    background: linear-gradient(90deg, rgba(255,255,255,0.92) 0%, rgba(255,255,255,0.55) 44%, rgba(255,255,255,0.08) 100%);
}

.single-slider > * {
    position: relative;
    z-index: 1;
}

.hero__caption h1,
.hero-copy h1,
.hero-caption h2 {
    font-size: clamp(2.4rem, 4vw, 4.4rem) !important;
    line-height: 1.02;
}

.hero__caption p,
.hero-copy p {
    font-size: 18px !important;
    max-width: 620px;
}

.single-job-items {
    transition: transform .2s ease, box-shadow .2s ease, border-color .2s ease;
}

.single-job-items:hover,
.single-services:hover,
.action-card:hover,
.price-card:hover,
.auth-card:hover {
    transform: translateY(-4px);
    box-shadow: 0 22px 55px rgba(15, 23, 42, 0.12) !important;
    border-color: rgba(37, 99, 235, 0.18) !important;
}

.form-control,
textarea.form-control,
select.form-control,
input.form-control,
.nice-select {
    min-height: 48px;
    border-radius: 14px !important;
    border: 1px solid rgba(148, 163, 184, 0.30) !important;
    background: rgba(255, 255, 255, 0.92) !important;
    box-shadow: none !important;
}

.form-control:focus,
textarea.form-control:focus,
select.form-control:focus,
input.form-control:focus {
    border-color: rgba(37, 99, 235, 0.55) !important;
    box-shadow: 0 0 0 4px rgba(37, 99, 235, 0.10) !important;
}

.alert {
    border-radius: 16px;
    border: 1px solid rgba(148, 163, 184, 0.18);
    box-shadow: var(--shadow-soft);
}

.footer,
.footer-area {
    background: linear-gradient(135deg, #0b1220 0%, #111c35 100%) !important;
    color: #e2e8f0 !important;
}

.footer a,
.footer-area a,
.footer .brand-slogan {
    color: rgba(226, 232, 240, 0.84) !important;
}

.footer span,
.footer p,
.footer-area p,
.footer-area li,
.footer-bottom-area p {
    color: rgba(226, 232, 240, 0.72) !important;
}

.footer a:hover,
.footer-area a:hover {
    color: #ffffff !important;
}

.resume-preview {
    background:
        linear-gradient(180deg, rgba(255,255,255,0.98), rgba(245,249,255,0.98)),
        linear-gradient(135deg, rgba(37, 99, 235, 0.08), rgba(20, 184, 166, 0.08)) !important;
}

.preview-badge {
    background: linear-gradient(135deg, var(--brand) 0%, var(--brand-2) 100%) !important;
    box-shadow: 0 10px 18px rgba(37, 99, 235, 0.18);
}

.value-strip article,
.steps-grid article,
.features article,
.panel,
.price-card,
.action-card,
.resume,
.auth-card {
    border-radius: var(--radius-lg) !important;
}

.eyebrow,
.section-tittle span,
.hero-caption span {
    margin-bottom: 10px;
}

.head-btn1,
.head-btn2,
.btn,
.nav-cta {
    box-shadow: none;
}

.head-btn1:hover,
.head-btn2:hover,
.btn:hover,
.nav-cta:hover {
    box-shadow: 0 16px 30px rgba(15, 23, 42, 0.10);
}

@media (max-width: 991px) {
    .topbar,
    .header-area .headder-top {
        padding-left: 18px;
        padding-right: 18px;
    }

    .brand-name,
    .logo h2 {
        font-size: 22px !important;
    }

    .hero__caption h1,
    .hero-copy h1,
    .hero-caption h2 {
        font-size: clamp(2rem, 8vw, 3rem) !important;
    }

    .single-job-items,
    .single-services,
    .panel,
    .price-card,
    .auth-card,
    .action-card,
    .resume,
    .resume-preview {
        border-radius: 20px !important;
    }
}

@media (max-width: 767px) {
    .topbar,
    .header-area .headder-top {
        min-height: 72px;
    }

    .brand-slogan {
        letter-spacing: 0.10em;
        font-size: 10px;
    }

    .hero__caption p,
    .hero-copy p {
        font-size: 16px !important;
    }

    .single-job-items,
    .single-services,
    .panel,
    .price-card,
    .auth-card,
    .action-card,
    .resume,
    .resume-preview {
        padding: 18px !important;
    }
}


/* Brand polish overrides */
.logo a {
    align-items: flex-start !important;
    gap: 4px !important;
}

.logo a::after {
    content: 'Seu currículo com Excelência.';
    display: block;
    font-size: 12px;
    font-weight: 800;
    letter-spacing: 0.14em;
    text-transform: uppercase;
    color: var(--brand-2);
    margin-top: 2px;
}

.brand-name,
.logo h2 {
    font-size: 32px !important;
    line-height: 1 !important;
    font-weight: 900 !important;
    color: var(--brand-dark) !important;
}

.brand-slogan {
    font-size: 12px !important;
    color: var(--brand-2) !important;
    margin-top: 2px;
}

.nav-cta,
.btn,
.head-btn1,
.head-btn2,
.btn.primary,
.btn.secondary,
.button,
.border-btn,
.boxed-btn {
    display: inline-flex !important;
    align-items: center !important;
    justify-content: center !important;
    text-align: center !important;
    line-height: 1.15 !important;
    white-space: nowrap !important;
    padding-top: 0 !important;
    padding-bottom: 0 !important;
}

.single-slider::before {
    content: none !important;
}

.single-slider,
.single-slider[data-background] {
    filter: none !important;
    background-blend-mode: normal !important;
}

.hero__caption,
.hero-copy,
.hero-caption {
    position: relative;
    z-index: 2;
}

@media (max-width: 767px) {
    .brand-name,
    .logo h2 {
        font-size: 26px !important;
    }

    .logo a::after,
    .brand-slogan {
        font-size: 10px !important;
        letter-spacing: 0.10em;
    }
}

/* Client UI: simple phone layout. Desktop and print remain unchanged. */
@media screen and (max-width: 767px) {
 html,body{width:100%;max-width:100%;overflow-x:hidden;background:#f4f7fb} body{font-size:15px}
 .topbar,.header-area .headder-top{min-height:0!important;padding:12px 16px!important;background:#fff!important;backdrop-filter:none}
 .topbar{display:flex;flex-direction:column;align-items:flex-start;gap:12px}
 .brand-name,.logo h2{font-size:23px!important}.logo a::after,.brand-slogan{font-size:9px!important;letter-spacing:.08em!important}
 .nav{width:100%;display:flex;flex-wrap:nowrap;gap:8px;overflow-x:auto;padding-bottom:2px;scrollbar-width:none}.nav::-webkit-scrollbar{display:none}
 .nav a{flex:0 0 auto;min-height:38px;display:inline-flex;align-items:center;padding:0 12px;border-radius:10px;background:#f1f5f9;font-size:13px;text-decoration:none}
 .page,main,.section-padding,.section-padding30,.featured-job-area,.our-services{padding-top:18px!important;padding-bottom:24px!important}
 .container,.container-fluid{width:100%!important;max-width:100%!important;padding-left:14px!important;padding-right:14px!important}
 h1,.hero__caption h1,.hero-copy h1,.hero-caption h2{font-size:28px!important;line-height:1.12!important} h2{font-size:23px!important} h3,h4{font-size:18px!important}
 .single-job-items,.single-services,.panel,.price-card,.auth-card,.action-card,.resume,.resume-preview,.hero-card,.hero-panel,.boxed-section{width:100%;padding:16px!important;border-radius:14px!important;box-shadow:0 6px 18px rgba(15,23,42,.07)!important;backdrop-filter:none}
 input:not([type=checkbox]):not([type=radio]),select,textarea,.form-control{width:100%!important;min-height:46px;font-size:16px!important;border-radius:10px!important} textarea,textarea.form-control{min-height:130px}
 .btn,.head-btn1,.head-btn2,.button,.boxed-btn,.border-btn,button[type=submit]{width:100%!important;min-height:46px;white-space:normal!important;border-radius:10px!important;margin:4px 0}
 .table-responsive,table{display:block;width:100%;overflow-x:auto;-webkit-overflow-scrolling:touch}
 .preview-actions,.hero-actions,.dashboard-actions,.form-actions{width:100%;display:flex!important;flex-direction:column!important;align-items:stretch!important;gap:8px!important}
 .model-test-switch{width:100%;display:grid!important;grid-template-columns:repeat(2,minmax(0,1fr));gap:7px}.model-test-switch span{grid-column:1/-1}.model-test-switch a{min-height:40px;display:flex;align-items:center;justify-content:center;text-align:center}
 .preview-stage,.preview-frame{width:100%!important;padding:0!important;overflow:visible!important}.cv-page{width:100%!important;min-height:0!important;font-size:13px!important;line-height:1.45!important;box-shadow:none!important}
 .cv-model-2,.cv-model-4{display:block!important}.cv-sidebar{padding:22px 18px!important}
 .cv-content,.cv-model-1 .cv-content,.cv-model-2 .cv-content,.cv-model-3 .cv-content,.cv-model-4 .cv-content,.cv-model-5 .cv-content{padding:22px 18px!important}
 .cv-header,.cv-model-5 .cv-header{min-height:0!important;padding:16px!important;display:block!important}
 .cv-photo,.cv-model-5 .cv-photo{width:84px!important;height:96px!important;margin:14px 0 0!important;position:static!important;border-radius:8px!important}
    .footer{padding:22px 14px!important;text-align:center}

    .preview-actions {
        display: grid !important;
        grid-template-columns: repeat(3, minmax(0, 1fr)) !important;
        gap: 6px !important;
    }
    .preview-actions .model-test-switch {
        grid-column: 1 / -1;
        grid-row: 1;
        display: grid !important;
        grid-template-columns: repeat(5, minmax(0, 1fr));
        gap: 4px;
    }
    .preview-actions .model-test-switch span {
        grid-column: 1 / -1;
        margin-bottom: 2px;
        font-size: 12px;
    }
    .preview-actions .model-test-switch a {
        min-width: 0;
        min-height: 32px;
        padding: 4px 2px;
        border-radius: 7px;
        font-size: 11px;
        line-height: 1.1;
    }
    .preview-actions > .btn {
        width: 100% !important;
        min-width: 0 !important;
        min-height: 36px !important;
        margin: 0 !important;
        padding: 5px 4px !important;
        border-radius: 8px !important;
        font-size: 11px !important;
        line-height: 1.1 !important;
    }
    .preview-actions > .secondary { grid-column: 1; grid-row: 2; }
    .preview-actions > .primary { grid-row: 2; }
}

@media screen and (max-width: 767px) {
    body.mobile-full-preview .preview-stage { overflow: hidden !important; }
    body.mobile-full-preview .preview-frame {
        position: relative;
        width: 100% !important;
        height: var(--mobile-preview-height, auto);
        overflow: hidden !important;
    }
    body.mobile-full-preview .cv-page {
        position: absolute;
        top: 0;
        left: 0;
        width: 794px !important;
        min-height: 1123px !important;
        font-size: 13px !important;
        line-height: 1.42 !important;
        transform: scale(var(--mobile-preview-scale, 1));
        transform-origin: top left;
    }
    body.mobile-full-preview .cv-content { padding: 42px 48px !important; }
    body.mobile-full-preview .cv-header {
        min-height: 0 !important;
        margin-bottom: 22px !important;
        padding: 0 !important;
        display: flex !important;
    }
    body.mobile-full-preview .cv-photo {
        width: 96px !important;
        height: 118px !important;
        margin: 0 !important;
        position: static !important;
        border-radius: 8px !important;
    }
    body.mobile-full-preview .cv-model-1 .cv-content { padding: 32px 45px 40px !important; }
    body.mobile-full-preview .cv-model-1 .cv-header { min-height: 90px !important; padding-bottom: 14px !important; }
    body.mobile-full-preview .cv-model-2,
    body.mobile-full-preview .cv-model-4 {
        display: grid !important;
        grid-template-columns: 245px 1fr !important;
    }
    body.mobile-full-preview .cv-sidebar { padding: 34px 22px !important; }
    body.mobile-full-preview .cv-sidebar .cv-photo {
        width: 132px !important;
        height: 132px !important;
        margin: 0 auto 26px !important;
        border-radius: 50% !important;
    }
    body.mobile-full-preview .cv-model-2 .cv-content,
    body.mobile-full-preview .cv-model-4 .cv-content { padding: 38px 42px !important; }
    body.mobile-full-preview .cv-model-3 .cv-content { padding: 34px 48px 42px !important; }
    body.mobile-full-preview .cv-model-3 .cv-header {
        margin-top: -98px !important;
        padding: 24px 28px !important;
    }
    body.mobile-full-preview .cv-model-4 .cv-header { padding: 18px 20px !important; }
    body.mobile-full-preview .cv-model-5 .cv-content { padding: 32px 44px 44px 58px !important; }
    body.mobile-full-preview .cv-model-5 .cv-header {
        min-height: 108px !important;
        padding: 22px 112px 20px 24px !important;
        display: block !important;
    }
    body.mobile-full-preview .cv-model-5 .cv-photo {
        width: 88px !important;
        height: 108px !important;
        margin: 0 !important;
        position: absolute !important;
        top: 14px !important;
        right: 14px !important;
        border-radius: 6px !important;
    }
}

@media print {
    body.mobile-full-preview .cv-page { position: static; transform: none !important; }
    body.mobile-full-preview .preview-frame { height: auto !important; overflow: visible !important; }
}

@media screen and (max-width: 767px) {
    body > header,
    body > .topbar {
        position: fixed !important;
        top: 0;
        right: 0;
        left: 0;
        width: 100%;
        z-index: 1500;
    }

    body > header + main {
        margin-top: 78px;
    }

    body > .topbar + .page {
        margin-top: 118px;
    }

    body > header .headder-top,
    body > .topbar {
        background: #fff !important;
        box-shadow: 0 4px 14px rgba(15, 23, 42, .09) !important;
    }
}
