:root {
    --navy: #041c1c;
    --navy-soft: #274d4d;
    --petrol: #3f6564;
    --petrol-soft: #759c9b;
    --gold-light: #e2c997;
    --gold-dark: #94763c;
    --slate: #4a5568;
    --soft: #f9f9f7;
    --muted: #e2e2e2;
    --white: #ffffff;
    --shadow-brand: 0 24px 60px rgba(4, 28, 28, 0.12);
}

body {
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
    background:
        radial-gradient(circle at top left, rgba(63, 101, 100, 0.1), transparent 22%),
        linear-gradient(180deg, #f9f9f8 0%, #f4f4f3 32%, #eeeeed 100%);
}

.gradient-bg {
    background:
        radial-gradient(circle at 82% 18%, rgba(226, 201, 151, 0.18), transparent 18%),
        radial-gradient(circle at 18% 20%, rgba(63, 101, 100, 0.14), transparent 22%),
        linear-gradient(135deg, #001d1d 0%, var(--navy-soft) 62%, #759c9b 100%);
}

.brand-lockup {
    position: relative;
    display: inline-flex;
    flex-direction: column;
    align-items: center;
    gap: 18px;
}

.brand-logo {
    width: min(260px, 70vw);
    height: auto;
    padding: 3px 6px;
    border-radius: 10px;
    background: linear-gradient(180deg, rgba(255, 255, 255, 0.98), rgba(249, 249, 247, 0.96));
    border: 1px solid rgba(226, 226, 226, 0.92);
    box-shadow:
        0 18px 34px rgba(4, 28, 28, 0.16),
        0 0 0 1px rgba(255, 255, 255, 0.28) inset;
    filter: none;
}

.brand-logo-sm {
    width: min(190px, 42vw);
    padding: 2px 5px;
    border-radius: 10px;
}

.brand-kicker {
    display: inline-flex;
    align-items: center;
    gap: 10px;
    padding: 10px 16px;
    border-radius: 999px;
    background: rgba(226, 201, 151, 0.14);
    border: 1px solid rgba(226, 201, 151, 0.2);
    color: rgba(255, 255, 255, 0.92);
    font-size: 0.72rem;
    font-weight: 800;
    letter-spacing: 0.16em;
    text-transform: uppercase;
}

.brand-divider {
    background: linear-gradient(90deg, rgba(63, 101, 100, 0.06), rgba(226, 201, 151, 0.22), rgba(63, 101, 100, 0.06));
}

.brand-panel {
    background: linear-gradient(180deg, rgba(255, 255, 255, 0.98), rgba(249, 249, 247, 0.98));
    border: 1px solid rgba(71, 85, 105, 0.12);
    box-shadow: var(--shadow-brand);
}

.brand-note {
    background: linear-gradient(180deg, rgba(63, 101, 100, 0.08), rgba(226, 201, 151, 0.14));
    border-left-color: var(--gold-dark) !important;
}

.brand-badge {
    background: rgba(226, 201, 151, 0.18) !important;
    color: var(--gold-dark) !important;
}

.brand-cta-outline {
    border-color: var(--petrol) !important;
    color: var(--petrol) !important;
}

.brand-cta-outline:hover {
    background: rgba(63, 101, 100, 0.08) !important;
}

.brand-pill {
    background: rgba(226, 201, 151, 0.18) !important;
    color: var(--gold-dark) !important;
}

.brand-card-icon {
    background: rgba(226, 201, 151, 0.18) !important;
    color: var(--petrol) !important;
}

.brand-card-accent {
    background: linear-gradient(135deg, #001d1d, var(--navy-soft) 62%, #759c9b) !important;
}

.text-purple-600,
.text-purple-700 {
    color: var(--petrol) !important;
}

.bg-purple-50,
.bg-purple-100 {
    background: rgba(63, 101, 100, 0.08) !important;
}

.border-purple-200,
.border-purple-600 {
    border-color: rgba(63, 101, 100, 0.28) !important;
}

.from-purple-600 {
    --tw-gradient-from: var(--navy) var(--tw-gradient-from-position) !important;
    --tw-gradient-to: rgb(11 29 58 / 0) var(--tw-gradient-to-position) !important;
    --tw-gradient-stops: var(--tw-gradient-from), var(--tw-gradient-to) !important;
}

.to-purple-800 {
    --tw-gradient-to: #759c9b var(--tw-gradient-to-position) !important;
}

.hover\:bg-purple-50:hover,
.hover\:bg-purple-200:hover {
    background: rgba(63, 101, 100, 0.14) !important;
}

.hover\:text-purple-700:hover {
    color: var(--navy) !important;
}

.focus\:ring-purple-500:focus {
    --tw-ring-color: rgba(63, 101, 100, 0.28) !important;
}

.focus\:border-transparent:focus {
    border-color: transparent !important;
}

.shadow-xl,
.shadow-2xl {
    box-shadow: var(--shadow-brand) !important;
}

.card-hover:hover {
    transform: translateY(-5px);
    box-shadow: 0 22px 44px rgba(4, 28, 28, 0.12);
}

/* Animações */
@keyframes fadeIn {
    from {
        opacity: 0;
        transform: translateY(20px);
    }
    to {
        opacity: 1;
        transform: translateY(0);
    }
}

.fade-in {
    animation: fadeIn 0.5s ease-in;
}

@keyframes slideInRight {
    from {
        opacity: 0;
        transform: translateX(30px);
    }
    to {
        opacity: 1;
        transform: translateX(0);
    }
}

.slide-in-right {
    animation: slideInRight 0.6s ease-out;
}

/* Cards com hover */
.card-hover {
    transition: all 0.3s ease;
}

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

/* Opções de resposta */
.option-card {
    transition: all 0.3s ease;
    cursor: pointer;
}

.option-card:hover {
    transform: translateY(-3px);
    box-shadow: 0 10px 25px rgba(0, 0, 0, 0.1);
}

.option-card.selected {
    border-color: rgba(63, 101, 100, 0.36);
    background: linear-gradient(135deg, rgba(63, 101, 100, 0.08) 0%, rgba(226, 201, 151, 0.16) 100%);
}

/* Loading animation */
@keyframes spin {
    to {
        transform: rotate(360deg);
    }
}

.animate-spin {
    animation: spin 1s linear infinite;
}

/* Pulse animation */
@keyframes pulse {
    0%, 100% {
        opacity: 1;
    }
    50% {
        opacity: 0.5;
    }
}

.pulse {
    animation: pulse 2s cubic-bezier(0.4, 0, 0.6, 1) infinite;
}

/* Print styles */
@media print {
    .no-print {
        display: none !important;
    }
    
    body {
        background: white;
    }
    
    .gradient-bg {
        background: var(--navy) !important;
        -webkit-print-color-adjust: exact;
        print-color-adjust: exact;
    }
}

/* Responsividade adicional */
@media (max-width: 640px) {
    .text-responsive {
        font-size: 0.875rem;
    }
}

/* Smooth scroll */
html {
    scroll-behavior: smooth;
}

/* Inputs focus */
input:focus, select:focus, textarea:focus {
    outline: none;
    ring: 2px;
    ring-color: rgba(63, 101, 100, 0.28);
    border-color: transparent;
}

.brand-benefit-card {
    background: linear-gradient(180deg, rgba(255, 255, 255, 0.98), rgba(249, 249, 247, 0.98));
    border: 1px solid rgba(63, 101, 100, 0.12);
    box-shadow: 0 18px 34px rgba(4, 28, 28, 0.08);
}

.brand-benefit-card i {
    color: var(--gold-dark) !important;
}

.brand-benefit-card h3 {
    color: var(--navy) !important;
}

.brand-benefit-card p {
    color: var(--slate) !important;
}

.checklist-footer {
    background: linear-gradient(180deg, #041c1c, #274d4d) !important;
}

.checklist-footer p,
.checklist-footer .text-gray-400 {
    color: rgba(255, 255, 255, 0.78) !important;
}

/* Transições suaves */
* {
    transition-property: background-color, border-color, color, fill, stroke, opacity, box-shadow, transform;
    transition-timing-function: cubic-bezier(0.4, 0, 0.2, 1);
    transition-duration: 150ms;
}

@media (max-width: 640px) {
    .brand-logo {
        width: min(210px, 72vw);
    }
}