:root {
    --navy: #0b1d3a;
    --navy-soft: #12366b;
    --petrol: #0fa3a3;
    --petrol-soft: #0bb8b8;
    --slate: #5a687f;
    --soft: #f4f7fa;
    --muted: #d9e2ea;
    --white: #ffffff;
    --shadow-brand: 0 24px 60px rgba(11, 29, 58, 0.12);
}

body {
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
    background:
        radial-gradient(circle at top left, rgba(15, 163, 163, 0.08), transparent 22%),
        linear-gradient(180deg, #edf3f8 0%, #f8fafc 32%, #eef3f6 100%);
}

.gradient-bg {
    background:
        radial-gradient(circle at 82% 18%, rgba(15, 163, 163, 0.18), transparent 18%),
        linear-gradient(135deg, var(--navy) 0%, var(--navy-soft) 62%, var(--petrol) 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: 18px 24px;
    border-radius: 22px;
    background: linear-gradient(180deg, rgba(255, 255, 255, 0.98), rgba(244, 247, 250, 0.94));
    border: 1px solid rgba(217, 226, 234, 0.9);
    box-shadow:
        0 18px 34px rgba(6, 17, 31, 0.16),
        0 0 0 1px rgba(255, 255, 255, 0.28) inset;
    filter: none;
}

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

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

.brand-divider {
    background: linear-gradient(90deg, rgba(11, 29, 58, 0.06), rgba(15, 163, 163, 0.18), rgba(11, 29, 58, 0.06));
}

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

.brand-note {
    background: linear-gradient(180deg, rgba(11, 29, 58, 0.05), rgba(15, 163, 163, 0.08));
    border-left-color: var(--petrol) !important;
}

.brand-badge {
    background: rgba(15, 163, 163, 0.12) !important;
    color: var(--petrol) !important;
}

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

.brand-cta-outline:hover {
    background: rgba(15, 163, 163, 0.08) !important;
}

.brand-pill {
    background: rgba(15, 163, 163, 0.12) !important;
    color: var(--petrol) !important;
}

.brand-card-icon {
    background: rgba(15, 163, 163, 0.12) !important;
    color: var(--petrol) !important;
}

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

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

.bg-purple-50,
.bg-purple-100 {
    background: rgba(15, 163, 163, 0.1) !important;
}

.border-purple-200,
.border-purple-600 {
    border-color: rgba(15, 163, 163, 0.3) !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: var(--petrol) var(--tw-gradient-to-position) !important;
}

.hover\:bg-purple-50:hover,
.hover\:bg-purple-200:hover {
    background: rgba(15, 163, 163, 0.16) !important;
}

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

.focus\:ring-purple-500:focus {
    --tw-ring-color: rgba(15, 163, 163, 0.32) !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(11, 29, 58, 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(15, 163, 163, 0.4);
    background: linear-gradient(135deg, rgba(11, 29, 58, 0.06) 0%, rgba(15, 163, 163, 0.14) 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(15, 163, 163, 0.32);
    border-color: transparent;
}

/* 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);
    }
}