* {
margin: 0;
padding: 0;
box-sizing: border-box;
}

body {
font-family: 'Inter', sans-serif;
overflow-x: hidden;
margin: 0;
padding: 0;
background: #001028;
}

/* Scrollbar Personalizada */
/* WebKit (Chrome, Edge, Safari) */
::-webkit-scrollbar {
width: 8px;
}

::-webkit-scrollbar-track {
background: #001028;
}

::-webkit-scrollbar-thumb {
background: #2587c7;
border-radius: 4px;
}

::-webkit-scrollbar-thumb:hover {
background: #1a6ba3;
}

/* Firefox */
* {
scrollbar-width: thin;
scrollbar-color: #2587c7 #001028;
}

/* Para elementos com scroll */
*::-webkit-scrollbar {
width: 8px;
}

*::-webkit-scrollbar-track {
background: #001028;
}

*::-webkit-scrollbar-thumb {
background: #2587c7;
border-radius: 4px;
}

*::-webkit-scrollbar-thumb:hover {
background: #1a6ba3;
}

/* Animação da borda do header */
@keyframes borderGrow {
0% {
width: 0%;
left: 0;
}
100% {
width: 100%;
left: 0;
}
}

/* Animação de zoom-out da imagem de fundo */
@keyframes zoomOut {
0% {
transform: scale(1.15);
}
100% {
transform: scale(1.0);
}
}

/* Header Styles */
.header {
background: rgba(0, 16, 40, 0.35);
-webkit-backdrop-filter: blur(14px);
backdrop-filter: blur(14px);
padding: 12px 40px;
display: flex;
align-items: center;
justify-content: space-between;
position: fixed;
top: 0;
left: 0;
right: 0;
z-index: 1002;
gap: 20px;
min-height: 3.5rem;
border-bottom: 1px solid rgba(255, 255, 255, 0.1);
transition: all 0.3s ease;
}

.header.scrolled {
background: rgba(0, 16, 40, 0.8);
backdrop-filter: blur(10px);
-webkit-backdrop-filter: blur(10px);
box-shadow: 0 4px 20px rgba(0, 0, 0, 0.3);
border-bottom: none;
}

.header.sidebar-open {
background: #001028;
border-bottom: none;
}

.header .nav {
display: flex;
gap: 24px;
align-items: center;
position: absolute;
left: 45%;
transform: translateX(-50%);
z-index: 5;
}

.header .nav a {
color: #f5f1ed;
text-decoration: none;
font-size: 14px;
font-weight: 500;
transition: color 0.3s ease;
}

.header .nav a:hover {
color: #2587c7;
}

.header:not(.scrolled):not(.sidebar-open)::after {
content: '';
position: absolute;
bottom: 0;
left: 0;
height: 1px;
background: #9ca3af;
animation: borderGrow 1.5s ease-out forwards;
z-index: 1;
}

.header.scrolled::after,
.header.sidebar-open::after {
display: none;
}

.logo {
display: flex;
align-items: center;
text-decoration: none;
transition: transform 0.3s ease;
position: relative;
z-index: 10;
}

.logo img {
height: 50px;
width: auto;
object-fit: contain;
transition: transform 0.3s ease;
}

.logo:hover {
transform: scale(1.1);
}

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

.nav a {
color: #f5f1ed;
text-decoration: none;
font-size: 14px;
font-weight: 500;
transition: color 0.3s ease;
}

.nav a:hover {
color: #2587c7;
}

.btn-contact {
background: #2587c7;
color: #ffffff;
padding: 12px 28px;
border: 2px solid #2587c7;
border-radius: 20px;
font-family: 'Inter', sans-serif;
font-weight: 600;
font-size: 14px;
cursor: pointer;
transition: all 0.3s ease;
text-decoration: none;
display: inline-block;
}

.btn-contact:hover {
background: #f5f1ed;
border-color: #f5f1ed;
color: #2587c7;
}

/* Header Auth Buttons */
.auth-buttons {
display: flex;
gap: 10px;
align-items: center;
}

.header .auth-buttons .btn-primary,
.header .auth-buttons .btn-secondary {
padding: 10px 28px;
border-radius: 20px;
border-width: 1.5px;
font-size: 13px;
font-weight: 500;
line-height: 1;
display: inline-flex;
align-items: center;
justify-content: center;
white-space: nowrap;
}

.btn-language {
background: rgba(0, 16, 40, 0.6);
backdrop-filter: blur(8px);
border: 1px solid rgba(37, 135, 199, 0.2);
border-radius: 50%;
color: #f5f1ed;
padding: 10px;
cursor: pointer;
transition: all 0.3s ease;
display: flex;
align-items: center;
justify-content: center;
margin-right: 30px;
position: relative;
overflow: visible;
width: 44px;
height: 44px;
z-index: 20;
}

.btn-language:hover {
color: #2587c7;
background: rgba(0, 16, 40, 0.8);
border-color: rgba(37, 135, 199, 0.4);
}

.btn-language svg {
width: 24px;
height: 24px;
}

.language-dropdown {
position: absolute;
top: calc(100% + 8px);
left: 50%;
right: auto;
background: #001028;
border: 1px solid rgba(37, 135, 199, 0.3);
border-radius: 8px;
min-width: 180px;
box-shadow: 0 4px 12px rgba(0, 0, 0, 0.3);
opacity: 0;
visibility: hidden;
white-space: nowrap;
transform: translate(-50%, -10px);
transition: all 0.3s ease;
z-index: 9999;
}

.language-dropdown.active {
opacity: 1;
visibility: visible;
transform: translate(-50%, 0);
}

.language-dropdown a {
display: flex;
align-items: center;
gap: 10px;
padding: 12px 20px;
color: #f5f1ed;
text-decoration: none;
font-size: 14px;
font-weight: 500;
white-space: nowrap;
transition: all 0.3s ease;
border-bottom: 1px solid rgba(37, 135, 199, 0.1);
}

.language-flag {
font-size: 16px;
line-height: 1;
}

.language-dropdown a:last-child {
border-bottom: none;
}

.language-dropdown a:hover {
background: rgba(37, 135, 199, 0.2);
color: #2587c7;
}

.header-right {
display: flex;
align-items: center;
gap: 14px;
position: relative;
overflow: visible;
margin-left: auto;
z-index: 10;
}

.header-right .btn-language {
margin-right: 24px;
}

/* Hero Section Styles */
.hero {
position: relative;
width: 100%;
height: 100vh;
padding-top: 3.5rem;
display: flex;
align-items: center;
justify-content: center;
background: linear-gradient(180deg, #001028 0%, #001028 100%);
overflow: hidden;
z-index: 0;
}

/* Hero Social Media Icons - Ice/Glass Style */
.hero-social {
position: absolute;
right: 40px;
top: 71%;
transform: translateY(-50%);
display: flex;
flex-direction: column;
gap: 16px;
z-index: 10;
}

.hero-social-link {
width: 50px;
height: 50px;
border-radius: 50%;
background: rgba(255, 255, 255, 0.05);
backdrop-filter: blur(10px);
-webkit-backdrop-filter: blur(10px);
border: 1px solid rgba(255, 255, 255, 0.1);
display: flex;
align-items: center;
justify-content: center;
transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
position: relative;
overflow: hidden;
}

.hero-social-link::before {
content: '';
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 100%;
background: linear-gradient(135deg, rgba(255, 255, 255, 0.1) 0%, rgba(255, 255, 255, 0.05) 100%);
opacity: 0;
transition: opacity 0.3s ease;
}

.hero-social-link::after {
content: '';
position: absolute;
top: -50%;
left: -50%;
width: 200%;
height: 200%;
background: radial-gradient(circle, rgba(255, 255, 255, 0.1) 0%, transparent 70%);
opacity: 0;
transition: opacity 0.3s ease;
}

.hero-social-link:hover {
background: rgba(255, 255, 255, 0.1);
border-color: rgba(255, 255, 255, 0.3);
transform: scale(1.1);
box-shadow:
0 8px 32px rgba(0, 0, 0, 0.3),
0 0 0 1px rgba(255, 255, 255, 0.1),
inset 0 1px 0 rgba(255, 255, 255, 0.2);
}

.hero-social-link:hover::before {
opacity: 1;
}

.hero-social-link:hover::after {
opacity: 1;
}

.hero-social-link svg {
width: 24px;
height: 24px;
fill: #ffffff;
position: relative;
z-index: 1;
transition: all 0.3s ease;
}

.hero-social-link:hover svg {
fill: rgba(255, 255, 255, 0.9);
transform: scale(1.1);
}

.hero-bg {
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 100%;
background-image: url('/assets/imagens/img-bg.avif');
background-size: cover;
background-position: center;
background-repeat: no-repeat;
animation: zoomOut 5s ease-out forwards;
}

.hero-bg.hero-bg-assinatura {
background-image: url('/assets/imagens/assinatura.png');
animation: zoomOut 5s ease-out forwards;
opacity: 1;
visibility: visible;
display: block;
will-change: transform;
}

/* Autenticação Page - Hero Modifier */
.hero-autenticacao {
/* Esta classe permite customizações específicas para a página de autenticação
   sem afetar a página home. Herda todos os estilos da .hero */
}

/* Carta Fiança Page - Hero Background */
body[data-page="carta-fianca"] .hero-bg.hero-bg-assinatura {
background-image: url('/assets/imagens/backgroud-carta.png');
}

.hero-autenticacao .hero-title {
margin-bottom: 20px;
}

/* Como Funciona Section */
.como-funciona-section {
background: #F8F5F0;
padding: 80px 40px;
width: 100%;
}

.como-funciona-container {
max-width: 1400px;
margin: 0 auto;
}

.como-funciona-header {
text-align: center;
margin-bottom: 60px;
}

.como-funciona-title {
color: #2587c7;
font-family: 'Inter', sans-serif;
font-size: 14px;
font-weight: 600;
letter-spacing: 3px;
text-transform: uppercase;
margin-bottom: 20px;
}

.como-funciona-subtitle {
color: #001028;
font-family: 'Inter', sans-serif;
font-size: 36px;
font-weight: 700;
line-height: 1.3;
margin-bottom: 20px;
max-width: 800px;
margin-left: auto;
margin-right: auto;
}

.como-funciona-description {
color: #4b5563;
font-family: 'Inter', sans-serif;
font-size: 16px;
line-height: 1.6;
max-width: 700px;
margin: 0 auto;
}

.como-funciona-cards {
display: grid;
grid-template-columns: 1fr;
gap: 40px;
max-width: 1000px;
margin: 0 auto;
}

.como-funciona-card {
background: #ffffff;
border-radius: 16px;
padding: 40px;
display: flex;
flex-direction: row;
gap: 40px;
box-shadow: 0 4px 20px rgba(0, 0, 0, 0.08);
transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
position: relative;
overflow: hidden;
align-items: center;
}

.como-funciona-card:hover {
transform: translateY(-8px);
box-shadow: 0 12px 40px rgba(0, 0, 0, 0.12);
}

.card-number {
font-size: 48px;
font-weight: 700;
color: #2587c7;
font-family: 'Inter', sans-serif;
line-height: 1;
opacity: 0.3;
}

.card-content {
flex: 1;
display: flex;
flex-direction: column;
align-items: flex-start;
text-align: left;
}

.card-title {
color: #001028;
font-family: 'Inter', sans-serif;
font-size: 20px;
font-weight: 600;
margin-bottom: 12px;
line-height: 1.4;
}

.card-text {
color: #4b5563;
font-family: 'Inter', sans-serif;
font-size: 15px;
line-height: 1.6;
}

.card-image {
flex: 0 0 520px;
height: 300px;
background: #f3f4f6;
border-radius: 12px;
overflow: hidden;
display: flex;
align-items: center;
justify-content: center;
}

.card-image img {
width: 100%;
height: 100%;
object-fit: cover;
}

.card-btn {
display: inline-flex;
align-items: center;
justify-content: center;
background: linear-gradient(135deg, #2587c7 0%, #1a6ba3 100%);
color: #ffffff;
text-decoration: none;
padding: 12px 28px;
border-radius: 10px;
font-family: 'Inter', sans-serif;
font-size: 15px;
font-weight: 600;
text-align: center;
transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
margin-top: 16px;
border: none;
cursor: pointer;
box-shadow: 0 4px 14px rgba(37, 135, 199, 0.35);
letter-spacing: 0.3px;
}

.card-btn:hover {
background: linear-gradient(135deg, #1a6ba3 0%, #145587 100%);
transform: translateY(-3px);
box-shadow: 0 8px 20px rgba(37, 135, 199, 0.45);
}

.card-btn:active {
transform: translateY(-1px);
box-shadow: 0 4px 12px rgba(37, 135, 199, 0.35);
}

/* Card de Autenticação - Single Card Container */
.como-funciona-cards-single {
display: flex;
justify-content: center;
align-items: center;
padding: 40px 0;
}

.auth-card {
background: linear-gradient(135deg, rgba(0, 16, 40, 0.95) 0%, rgba(0, 26, 54, 0.92) 100%);
backdrop-filter: blur(20px);
-webkit-backdrop-filter: blur(20px);
border-radius: 24px;
padding: 60px 80px;
box-shadow: 0 8px 32px rgba(0, 0, 0, 0.3);
max-width: 640px;
width: 100%;
margin: 0 auto;
position: relative;
}

.auth-card-content {
position: relative;
z-index: 1;
text-align: center;
}

.auth-card-title {
color: #ffffff;
font-family: 'Inter', sans-serif;
font-size: 32px;
font-weight: 700;
margin-bottom: 16px;
line-height: 1.3;
letter-spacing: -0.5px;
}

.auth-card-description {
color: rgba(255, 255, 255, 0.8);
font-family: 'Inter', sans-serif;
font-size: 16px;
line-height: 1.6;
margin-bottom: 40px;
}

.auth-form {
display: flex;
flex-direction: column;
gap: 24px;
align-items: center;
}

.form-group {
width: 100%;
text-align: left;
}

.form-label {
display: block;
color: #ffffff;
font-family: 'Inter', sans-serif;
font-size: 14px;
font-weight: 600;
margin-bottom: 8px;
letter-spacing: 0.3px;
}

.form-input {
width: 100%;
padding: 16px 20px;
background: rgba(255, 255, 255, 0.08);
border: 2px solid rgba(255, 255, 255, 0.15);
border-radius: 12px;
color: #ffffff;
font-family: 'Inter', sans-serif;
font-size: 16px;
transition: all 0.3s ease;
outline: none;
}

.form-input::placeholder {
color: rgba(255, 255, 255, 0.5);
}

.form-input:focus {
background: rgba(255, 255, 255, 0.12);
border-color: #2587c7;
box-shadow: 0 0 0 4px rgba(37, 135, 199, 0.15);
}

.auth-submit-btn {
display: inline-flex;
align-items: center;
justify-content: center;
background: linear-gradient(135deg, #2587c7 0%, #1a6ba3 100%);
color: #ffffff;
text-decoration: none;
padding: 14px 32px;
border-radius: 8px;
font-family: 'Inter', sans-serif;
font-size: 15px;
font-weight: 500;
text-align: center;
transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
border: none;
cursor: pointer;
box-shadow: 0 2px 8px rgba(37, 135, 199, 0.25);
letter-spacing: 0.2px;
width: 80%;
}

.auth-submit-btn:hover {
background: linear-gradient(135deg, #1a6ba3 0%, #145587 100%);
transform: translateY(-1px);
box-shadow: 0 4px 12px rgba(37, 135, 199, 0.35);
}

.auth-submit-btn:active {
transform: translateY(0);
box-shadow: 0 2px 6px rgba(37, 135, 199, 0.25);
}

@media (max-width: 1024px) {
.como-funciona-card {
flex-direction: column;
gap: 20px;
padding: 30px;
}

.card-content {
align-items: center;
text-align: center;
}

.card-image {
flex: 0 0 auto;
width: 100%;
height: 200px;
}

.auth-card {
padding: 50px 60px;
}

.auth-card-title {
font-size: 28px;
}

.auth-card-description {
font-size: 15px;
}
}

@media (max-width: 768px) {
.como-funciona-section {
padding: 60px 20px;
}

.como-funciona-subtitle {
font-size: 28px;
}

.como-funciona-description {
font-size: 15px;
}

.como-funciona-cards {
grid-template-columns: 1fr;
gap: 20px;
}

.como-funciona-card {
padding: 24px;
}

.auth-card {
padding: 40px 30px;
}

.auth-card-title {
font-size: 24px;
}

.auth-card-description {
font-size: 14px;
margin-bottom: 30px;
}

.form-input {
padding: 14px 16px;
font-size: 15px;
}

.auth-submit-btn {
padding: 12px 28px;
font-size: 14px;
}
}

.hero-overlay {
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 100%;
background: linear-gradient(180deg, rgb(0 16 40 / 80%) 0%, rgb(0 16 40 / 66%) 100%);
}

.hero-content {
position: relative;
z-index: 1;
width: 100%;
padding: 40px 40px 80px;
text-align: left;
margin-top: 17rem;
}

.hero-subtitle {
color: #9ca3af;
font-family: 'Inter', sans-serif;
font-weight: 400;
font-size: 16px;
letter-spacing: 3px;
margin-bottom: 40px;
text-transform: uppercase;
}

.hero-title {
color: #ffffff;
font-family: 'Inter', sans-serif;
font-weight: 700;
font-size: 48px;
line-height: 1.3;
margin-bottom: 40px;
max-width: 800px;
min-height: 120px;
transition: opacity 0.5s ease-in-out, transform 0.5s ease-in-out;
}

.hero-title-text {
display: inline-block;
font-size: 18px;
color: #9ca3af;
letter-spacing: 1px;
font-weight: 400;
transition: opacity 0.5s ease-in-out, transform 0.5s ease-in-out;
vertical-align: middle;
}

.hero-title-text.fade-out {
opacity: 0;
transform: translateY(-10px);
}

.hero-title-text.fade-in {
opacity: 1;
transform: translateY(0);
}

.hero-title-description {
display: inline-block;
width: 30px;
height: 1px;
background: #9ca3af;
vertical-align: middle;
border-radius: 2px;
transition: opacity 0.5s ease-in-out, transform 0.5s ease-in-out;
}

.hero-title-description.fade-out {
opacity: 0;
transform: translateY(-10px);
}

.hero-title-description.fade-in {
opacity: 1;
transform: translateY(0);
}

.hero-title-dash {
display: block;
font-size: 48px;
color: #ffffff;
font-weight: 700;
line-height: 1.3;
margin-bottom: 16px;
max-width: 800px;
transition: opacity 0.5s ease-in-out, transform 0.5s ease-in-out;
}

.hero-title-dash.fade-out {
opacity: 0;
transform: translateY(-10px);
}

.hero-title-dash.fade-in {
opacity: 1;
transform: translateY(0);
}

.hero-text {
display: flex;
flex-direction: column;
gap: 24px;
}

.hero-description {
color: #d1d5db;
font-family: 'Inter', sans-serif;
font-size: 18px;
font-weight: 400;
line-height: 1.6;
max-width: 600px;
margin: 0;
}

.hero-buttons {
display: flex;
gap: 20px;
flex-wrap: wrap;
}

.btn-primary {
background: #2587c7;
color: #ffffff;
padding: 12px 32px;
border: 2px solid #2587c7;
border-radius: 20px;
font-family: 'Inter', sans-serif;
font-weight: 600;
font-size: 16px;
cursor: pointer;
transition: all 0.3s ease;
text-decoration: none;
display: inline-block;
}

.btn-primary:hover {
background: #f5f1ed;
border-color: #f5f1ed;
color: #2587c7;
}

.btn-secondary {
background: rgba(0, 16, 40, 0.6);
backdrop-filter: blur(8px);
color: #ffffff;
padding: 12px 32px;
border: 2px solid rgba(255, 255, 255, 0.3);
border-radius: 20px;
font-family: 'Inter', sans-serif;
font-weight: 600;
font-size: 16px;
cursor: pointer;
transition: all 0.3s ease;
text-decoration: none;
display: inline-block;
}

.btn-secondary:hover {
background: #f5f1ed;
border-color: #f5f1ed;
color: #2587c7;
}

/* Hambúrguer Menu */
.hamburger {
display: none;
flex-direction: column;
gap: 5px;
background: transparent;
border: none;
cursor: pointer;
padding: 8px;
z-index: 1001;
}

.hamburger span {
display: block;
width: 24px;
height: 2px;
background: #ffffff;
transition: all 0.3s ease;
border-radius: 2px;
}

.hamburger.active span:nth-child(1) {
transform: rotate(45deg) translate(5px, 5px);
}

.hamburger.active span:nth-child(2) {
opacity: 0;
}

.hamburger.active span:nth-child(3) {
transform: rotate(-45deg) translate(7px, -6px);
}

/* Sidebar - Desktop (opens from right) */
.sidebar {
position: fixed;
top: 81px;
right: 0;
width: 400px;
height: calc(100vh - 81px);
background: #001028;
box-shadow: -4px 0 20px rgba(0, 0, 0, 0.3);
transition: transform 0.6s cubic-bezier(0.65, 0, 0.35, 1), opacity 0.6s cubic-bezier(0.65, 0, 0.35, 1), visibility 0.6s cubic-bezier(0.65, 0, 0.35, 1);
z-index: 999;
transform: translateX(100%);
overflow: visible;
display: block;
opacity: 0;
visibility: hidden;
}

.sidebar.active {
transform: translateX(0);
opacity: 1;
visibility: visible;
}

.sidebar-content {
padding: 24px;
display: flex;
flex-direction: column;
gap: 16px;
overflow: visible;
}

.sidebar-nav {
display: flex;
flex-direction: column;
gap: 2px;
}

.sidebar-link {
color: #ffffff;
text-decoration: none;
padding: 12px 16px;
border-radius: 6px;
font-family: 'Inter', sans-serif;
font-size: 14px;
transition: all 0.3s ease;
display: block;
}

.sidebar-link:hover {
background: rgba(37, 135, 199, 0.1);
color: #2587c7;
transform: translateX(3px);
}

.sidebar-actions {
display: flex;
flex-direction: column;
gap: 16px;
}

.sidebar-language {
background: transparent;
border: none;
border-radius: 10px;
padding: 12px 16px;
display: flex;
justify-content: center;
align-items: center;
gap: 12px;
}

.sidebar-lang-flag {
width: 42px;
height: 42px;
border-radius: 50%;
border: 2px solid #d1d5db;
background: transparent;
padding: 0;
cursor: pointer;
transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
display: flex;
align-items: center;
justify-content: center;
position: relative;
overflow: hidden;
}

.sidebar-lang-flag:hover {
transform: scale(1.1);
box-shadow: 0 4px 12px rgba(0, 0, 0, 0.3);
}

.sidebar-lang-flag.active {
border-color: #2587c7;
box-shadow: 0 0 0 4px rgba(37, 135, 199, 0.2);
background: rgba(37, 135, 199, 0.1);
}

.lang-flag {
width: 100%;
height: 100%;
border-radius: 50%;
background-size: cover;
background-position: center;
background-repeat: no-repeat;
display: block;
}

.sidebar-lang-flag:hover {
box-shadow: 0 0 0 4px rgba(37, 135, 199, 0.2);
}

.btn-contact-sidebar {
background: #2587c7;
border: 2px solid rgba(255, 255, 255, 0.3);
border-radius: 12px;
padding: 15px 20px;
color: #ffffff;
text-align: center;
text-decoration: none;
font-family: 'Inter', sans-serif;
font-weight: 600;
font-size: 15px;
transition: all 0.3s ease;
display: block;
}

.btn-contact-sidebar:hover {
background: #1a6ba3;
transform: translateY(-2px);
box-shadow: 0 6px 16px rgba(37, 135, 199, 0.3);
}

/* Sidebar Auth Buttons - same style as header */
.sidebar-auth-buttons {
display: flex;
flex-direction: column;
gap: 10px;
margin-top: 16px;
}

.sidebar .btn-primary,
.sidebar .btn-secondary {
width: 100%;
text-align: center;
padding: 10px 20px;
font-size: 13px;
}

.sidebar .btn-primary {
background: #2587c7;
border: 2px solid #2587c7;
border-radius: 20px;
color: #ffffff;
text-decoration: none;
display: inline-flex;
align-items: center;
justify-content: center;
transition: all 0.3s ease;
}

.sidebar .btn-primary:hover {
background: #f5f1ed;
border-color: #f5f1ed;
color: #2587c7;
}

.sidebar .btn-secondary {
background: rgba(0, 16, 40, 0.6);
backdrop-filter: blur(8px);
border: 2px solid rgba(255, 255, 255, 0.3);
border-radius: 20px;
color: #ffffff;
text-decoration: none;
display: inline-flex;
align-items: center;
justify-content: center;
transition: all 0.3s ease;
}

.sidebar .btn-secondary:hover {
background: #f5f1ed;
border-color: #f5f1ed;
color: #2587c7;
}

/* Sidebar Overlay */
.sidebar-overlay {
position: fixed;
top: 81px;
left: 0;
width: 100%;
height: calc(100vh - 81px);
background: rgba(0, 0, 0, 0.6);
z-index: 998;
opacity: 0;
visibility: hidden;
transition: opacity 0.3s ease, visibility 0.3s ease;
display: block;
}

.sidebar-overlay.active {
opacity: 1;
visibility: visible;
}

@media (max-width: 768px) {
.sidebar-overlay {
top: 0;
height: 100%;
}
}

/* Animação da borda do logo no footer */
@keyframes borderGrowFooter {
0% {
width: 0%;
left: 0;
}
100% {
width: 100%;
left: 0;
}
}

/* O Que É Carta Fiança */
.o-que-e-carta-fianca {
background: #0a2540;
padding: 70px 40px;
width: 100%;
}

.o-que-e-carta-fianca-container {
margin: 0 auto;
max-width: 960px;
position: relative;
}

/* Marca d'água nas laterais */
.o-que-e-watermark {
position: absolute;
top: 50%;
transform: translateY(-50%);
opacity: 0.08;
pointer-events: none;
z-index: 1;
}

.o-que-e-watermark-left {
left: 0;
}

.o-que-e-watermark-right {
right: 0;
}

.o-que-e-watermark img {
width: 250px;
height: auto;
display: block;
}

.o-que-e-subtitulo {
font-family: 'Inter', sans-serif;
font-size: 14px;
color: #d1d5db;
text-transform: uppercase;
letter-spacing: 1px;
font-weight: 600;
margin-bottom: 40px;
position: relative;
padding-bottom: 15px;
}

.o-que-e-subtitulo::after {
content: '';
position: absolute;
bottom: 0;
left: 0;
height: 1px;
background: #9ca3af;
animation: borderGrow 1.5s ease-out forwards;
z-index: 1;
}

.o-que-e-titulo {
font-family: 'Inter', sans-serif;
font-size: 44px;
color: #ffffff;
line-height: 1.2;
font-weight: 600;
margin-bottom: 60px;
max-width: 70%;
}

.o-que-e-wrapper {
display: flex;
gap: 40px;
align-items: stretch;
}

.o-que-e-coluna-principal {
width: 70%;
flex-shrink: 0;
}

.o-que-e-coluna-lateral {
width: 30%;
flex-shrink: 0;
display: flex;
flex-direction: column;
}

.o-que-e-sticky-container {
position: sticky;
top: 0;
padding: 20px 0;
align-self: flex-start;
}

.o-que-e-titulo-secao {
font-family: 'Inter', sans-serif;
font-size: 24px;
color: #ffffff;
font-weight: 600;
margin: 0 0 20px 0;
line-height: 1.3;
}

.o-que-e-texto {
font-family: 'Inter', sans-serif;
font-size: 15px;
color: #d1d5db;
line-height: 1.8;
margin: 0 0 15px 0;
}

.o-que-e-imagem-container {
width: 100%;
margin: 30px 0;
border-radius: 12px;
overflow: hidden;
box-shadow: 0 8px 24px rgba(0, 16, 40, 0.12);
position: relative;
}

.o-que-e-imagem-container::after {
content: '';
position: absolute;
top: 0;
left: 0;
right: 0;
bottom: 0;
background: linear-gradient(to bottom, rgba(0, 16, 40, 0.3), rgba(0, 16, 40, 0.5));
pointer-events: none;
}

.o-que-e-imagem {
width: 100%;
height: auto;
display: block;
object-fit: cover;
}

/* Sidebar Box */
.o-que-e-sidebar-box {
background: rgba(255, 255, 255, 0.05);
padding: 25px;
border-radius: 8px;
border: 1px solid rgba(255, 255, 255, 0.1);
text-align: center;
}

.o-que-e-sidebar-titulo {
font-family: 'Inter', sans-serif;
font-size: 18px;
color: #ffffff;
font-weight: 600;
margin: 0 0 15px 0;
line-height: 1.3;
}

.o-que-e-sidebar-texto {
font-family: 'Inter', sans-serif;
font-size: 14px;
color: #d1d5db;
line-height: 1.6;
margin: 0 0 20px 0;
}

/* Box de Ajuda com destaque */
.o-que-e-ajuda {
background: rgba(37, 135, 199, 0.1);
border-color: rgba(37, 135, 199, 0.3);
}

.o-que-e-ajuda .o-que-e-sidebar-titulo {
color: #2587c7;
}

/* Botão */
.o-que-e-botao {
display: block;
width: 100%;
background: #2587c7;
color: #ffffff;
font-family: 'Inter', sans-serif;
font-size: 15px;
font-weight: 600;
padding: 14px 32px;
border-radius: 8px;
text-decoration: none;
transition: all 0.3s ease;
box-shadow: 0 4px 15px rgba(37, 135, 199, 0.3);
text-align: center;
white-space: nowrap;
box-sizing: border-box;
}

.o-que-e-botao:hover {
background: #1a6b9f;
transform: translateY(-2px);
box-shadow: 0 6px 20px rgba(37, 135, 199, 0.4);
}

/* Animações para O Que É Carta Fiança */
.o-que-e-animate {
opacity: 0;
transform: translateY(40px);
transition: opacity 0.8s ease, transform 0.8s ease;
}

.o-que-e-animate.animate-active {
opacity: 1;
transform: translateY(0);
}

/* Garantir que sticky funciona bem com animação */
.o-que-e-sticky-container.o-que-e-animate {
transition: opacity 0.8s ease, transform 0.8s ease;
}

.o-que-e-sticky-container.o-que-e-animate.animate-active {
opacity: 1;
transform: translateY(0);
}

/* Responsividade para O Que É Carta Fiança */
@media (max-width: 1024px) {
.o-que-e-carta-fianca {
padding: 50px 40px;
}

.o-que-e-wrapper {
flex-direction: column;
}

.o-que-e-coluna-principal {
width: 100%;
}

.o-que-e-coluna-lateral {
width: 100%;
}

.o-que-e-titulo-secao {
font-size: 22px;
}

.o-que-e-texto {
font-size: 14px;
}

/* Esconder marcas d'água em telas menores */
.o-que-e-watermark {
display: none;
}
}

@media (max-width: 768px) {
.o-que-e-carta-fianca {
padding: 60px 20px;
}

.o-que-e-wrapper {
gap: 30px;
}

.o-que-e-titulo-secao {
font-size: 20px;
}

.o-que-e-texto {
font-size: 13px;
}

.o-que-e-sticky-container {
position: static;
transform: none;
padding: 30px 0;
}

.o-que-e-sidebar-box {
padding: 20px;
}

.o-que-e-sidebar-titulo {
font-size: 16px;
}

.o-que-e-sidebar-texto {
font-size: 13px;
}

.o-que-e-botao {
font-size: 14px;
padding: 14px 28px;
}
}

/* Footer Styles */
.footer {
background: #001028;
padding: 60px 40px 30px;
width: 100%;
position: relative;
z-index: 10;
}


.footer.animate-border::before {
width: 100%;
}

.footer-logo {
display: flex;
flex-direction: column;
align-items: flex-start;
margin-bottom: 20px;
}

.footer-logo img {
height: 50px;
width: auto;
object-fit: contain;
margin-bottom: 20px;
opacity: 0;
transform: scale(0.9);
transition: opacity 0.8s cubic-bezier(0.4, 0, 0.2, 1), transform 0.8s cubic-bezier(0.34, 1.56, 0.64, 1);
}

.footer-logo img.animate-logo {
opacity: 1;
transform: scale(1);
}

.footer-logo-border {
position: relative;
width: 100%;
height: 1px;
margin-bottom: 30px;
}

.footer-logo-border::after {
content: '';
position: absolute;
top: 0;
left: 0;
height: 1px;
background: #9ca3af;
width: 0%;
}

.footer-logo-border.animate-border::after {
animation: borderGrowFooter 1.5s cubic-bezier(0.4, 0, 0.2, 1) forwards;
}

/* Quem Somos Section */
.quem-somos {
background: #f5f1ed;
padding: 90px 40px;
width: 100%;
}

.quem-somos-container {
margin: 0 auto;
}

.quem-somos-title {
font-family: 'Inter', sans-serif;
font-size: 14px;
color: #718096;
margin-bottom: 40px;
text-transform: uppercase;
letter-spacing: 1px;
position: relative;
padding-bottom: 15px;
}

.quem-somos-title::after {
content: '';
position: absolute;
bottom: 0;
left: 0;
height: 1px;
background: #9ca3af;
animation: borderGrow 1.5s ease-out forwards;
z-index: 1;
}

.quem-somos-text {
font-family: 'Inter', sans-serif;
font-size: 35px;
color: #2d3748;
line-height: 1.4;
margin-bottom: 80px;
font-weight: 500;
width: 70%;
}

.quem-somos-columns {
display: flex;
gap: 40px;
flex-wrap: wrap;
}

.quem-somos-column {
flex: 1;
min-width: 250px;
padding-right: 40px;
border-right: 1px solid #d0d0d0;
}

.quem-somos-column:nth-child(1) {
padding-right: 0;
display: flex;
flex-direction: column;
justify-content: flex-end;
}

.quem-somos-column:nth-child(2) {
border-right: none;
padding-right: 0;
display: flex;
flex-direction: column;
justify-content: flex-end;
}

.quem-somos-column:last-child {
flex: 1.5;
border-right: none;
padding-right: 0;
display: flex;
flex-direction: column;
justify-content: flex-end;
}

.quem-somos-number {
font-family: 'Inter', sans-serif;
font-size: 60px;
color: #718096;
font-weight: 700;
margin-bottom: 10px;
white-space: nowrap;
}

.quem-somos-subtitle {
font-family: 'Inter', sans-serif;
font-size: 16px;
color: #4a5568;
line-height: 1.6;
font-weight: 600;
}

.quem-somos-description {
font-family: 'Inter', sans-serif;
font-size: 16px;
color: #4a5568;
line-height: 1.6;
}

/* Animação de entrada para elementos do Quem Somos */
@keyframes slideUpFade {
from {
opacity: 0;
transform: translateY(50px);
}
to {
opacity: 1;
transform: translateY(0);
}
}

.quem-somos-animate {
opacity: 0;
transform: translateY(50px);
}

.quem-somos-animate.animate-active {
animation: slideUpFade 0.8s ease-out forwards;
}

/* Animação de entrada para elementos da Nossa Governança - mesma do Quem Somos */
.nossa-governanca-animate {
opacity: 0;
transform: translateY(50px);
}

.nossa-governanca-animate.animate-active {
animation: slideUpFade 0.8s ease-out forwards;
}

/* Delay para cada elemento da Governança */
.nossa-governanca-text.animate-active {
animation-delay: 0.1s;
}

.governanca-item:nth-child(1).animate-active {
animation-delay: 0.3s;
}

.governanca-item:nth-child(2).animate-active {
animation-delay: 0.5s;
}

.governanca-item:nth-child(3).animate-active {
animation-delay: 0.7s;
}

.governanca-item:nth-child(4).animate-active {
animation-delay: 0.9s;
}

.governanca-image-wrapper.animate-active {
animation-delay: 1.1s;
}

/* Delay para cada elemento */
animation-delay: 0.1s;
}

/* Animação de entrada para elementos da seção Como Funciona */
.como-funciona-animate {
opacity: 0;
transform: translateY(50px);
transition: opacity 0.8s ease-out, transform 0.8s ease-out;
}

.como-funciona-animate.animate-active {
opacity: 1;
transform: translateY(0);
}

.quem-somos-column:nth-child(1) .quem-somos-subtitle.animate-active {
animation-delay: 0.3s;
}

.quem-somos-column:nth-child(2) .quem-somos-number.animate-active {
animation-delay: 0.5s;
}

.quem-somos-column:nth-child(2) .quem-somos-subtitle.animate-active {
animation-delay: 0.7s;
}

.quem-somos-column:nth-child(3) .quem-somos-description.animate-active {
animation-delay: 0.9s;
}

.quem-somos-text.animate-active {
animation-delay: 0.1s;
}

/* Nossos Diferenciais Section */
.nossos-diferenciais {
background: #0a2540;
padding: 60px 0;
width: 100%;
}

.nossos-diferenciais-container {
margin: 0 auto;
width: 90%;
}
.nossos-diferenciais-title-wrapper {
display: flex;
align-items: center;
justify-content: center;
margin-bottom: 40px;
gap: 30px;
}

.nossos-diferenciais-title-line {
flex: 1;
height: 1px;
background: transparent;
position: relative;
overflow: hidden;
}

.nossos-diferenciais-title-line::before {
content: '';
position: absolute;
top: 0;
height: 100%;
width: 0%;
background: #9ca3af;
}

.nossos-diferenciais-title-line.animate-grow:first-child::before {
animation: growFromTitleLeft 1.5s ease-out forwards;
}

.nossos-diferenciais-title-line.animate-grow:last-child::before {
animation: growFromTitleRight 1.5s ease-out forwards;
}

@keyframes growFromTitleLeft {
0% {
width: 0%;
right: 0;
}
100% {
width: 100%;
right: 0;
}
}

@keyframes growFromTitleRight {
0% {
width: 0%;
left: 0;
}
100% {
width: 100%;
left: 0;
}
}

.nossos-diferenciais-title {
font-family: 'Inter', sans-serif;
font-size: 30px;
color: #ffffff;
text-transform: uppercase;
letter-spacing: 1px;
white-space: nowrap;
}

.nossos-diferenciais-title {
font-family: 'Inter', sans-serif;
font-size: 30px;
color: #ffffff;
text-transform: uppercase;
letter-spacing: 1px;
white-space: nowrap;
}

.valor-grid {
display: grid;
grid-template-columns: 1fr 1fr 1fr;
gap: 20px;
align-items: stretch;
}

.valor-column-left,
.valor-column-right {
display: flex;
flex-direction: column;
gap: 20px;
}

.valor-card {
background: rgba(37, 135, 199, 0.1);
padding: 20px;
border-radius: 12px;
transition: transform 0.3s ease, background 0.3s ease;
display: flex;
flex-direction: column;
height: 100%;
}

.valor-card:hover {
transform: translateY(-5px);
background: rgba(37, 135, 199, 0.15);
}

.valor-icon {
width: 38px;
height: 38px;
background: #2587c7;
border-radius: 50%;
display: flex;
align-items: center;
justify-content: center;
margin-bottom: 12px;
}

.valor-icon svg {
width: 18px;
height: 18px;
fill: none;
stroke: #ffffff;
stroke-width: 2;
}

.valor-card-title {
font-family: 'Inter', sans-serif;
font-size: 20px;
color: #ffffff;
font-weight: 600;
margin-bottom: 12px;
}

.valor-card-text {
font-family: 'Inter', sans-serif;
font-size: 15px;
color: #d1d5db;
line-height: 1.6;
}

.valor-center-image {
width: 100%;
border-radius: 12px;
overflow: hidden;
align-self: stretch;
height: 100%;
}

.valor-center-image img {
width: 100%;
height: 100%;
object-fit: cover;
display: block;
}

/* Animação de entrada para elementos dos Diferenciais - mesma do Quem Somos */
.diferenciais-animate {
opacity: 0;
transform: translateY(50px);
}

.diferenciais-animate.animate-active {
animation: slideUpFade 0.8s ease-out forwards;
}

/* Delay para cada card - esquerda */
.valor-column-left .valor-card:nth-child(1).animate-active {
animation-delay: 0.1s;
}

.valor-column-left .valor-card:nth-child(2).animate-active {
animation-delay: 0.3s;
}

/* Delay para cada card - direita */
.valor-column-right .valor-card:nth-child(1).animate-active {
animation-delay: 0.5s;
}

.valor-column-right .valor-card:nth-child(2).animate-active {
animation-delay: 0.7s;
}

/* Delay para imagem central */
.valor-center-image.diferenciais-animate.animate-active {
animation-delay: 0.9s;
}

@media (max-width: 1024px) {
.valor-grid {
grid-template-columns: 1fr;
gap: 30px;
}

.valor-column-left,
.valor-column-right {
gap: 20px;
}

.valor-center-image {
height: 300px;
}
}

@media (max-width: 768px) {
.nossos-diferenciais-title {
font-size: 25px !important;
letter-spacing: 0.5px !important;
}
}

.footer-contact {
margin-bottom: 30px;
}

.footer-contact-item {
display: flex;
align-items: flex-start;
margin-bottom: 15px;
gap: 12px;
}

.footer-contact-item:last-child {
margin-bottom: 0;
}

.footer-contact-icon {
width: 20px;
height: 20px;
flex-shrink: 0;
margin-top: 2px;
}

.footer-contact-icon svg {
width: 100%;
height: 100%;
fill: #2587c7;
}

.footer-contact-text {
color: #9ca3af;
font-family: 'Inter', sans-serif;
font-size: 14px;
font-weight: 400;
line-height: 1.5;
}

.footer-contact-text a {
color: #9ca3af;
text-decoration: none;
transition: color 0.3s ease;
}

.footer-contact-text a:hover {
color: #2587c7;
}

.footer-content {
display: grid;
grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
gap: 40px;
max-width: 1200px;
margin: 0 auto;
}

.footer-section {
display: flex;
flex-direction: column;
}

.footer-section h3 {
color: #ffffff;
font-family: 'Inter', sans-serif;
font-weight: 600;
font-size: 16px;
margin-bottom: 20px;
letter-spacing: 0.5px;
}

.footer-section ul {
list-style: none;
padding: 0;
margin: 0;
}

.footer-section ul li {
margin-bottom: 12px;
}

.footer-section ul a {
color: #9ca3af;
text-decoration: none;
font-family: 'Inter', sans-serif;
font-size: 14px;
font-weight: 400;
transition: color 0.3s ease;
}

.footer-section ul a:hover {
color: #2587c7;
}

.footer-bottom {
margin-top: 50px;
padding-top: 30px;
display: flex;
justify-content: space-between;
align-items: center;
max-width: 1200px;
margin-left: auto;
margin-right: auto;
width: 100%;
position: relative;
}

.footer-bottom::before {
content: '';
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 0.5px;
background: rgba(156, 163, 175, 0.2);
}

.footer-copyright {
color: #9ca3af;
font-family: 'Inter', sans-serif;
font-size: 14px;
font-weight: 400;
}

.footer-social {
display: flex;
gap: 5px;
position: relative;
z-index: 1002;
}

.footer-social a {
width: 40px;
height: 40px;
border-radius: 8px;
display: flex;
align-items: center;
justify-content: center;
transition: all 0.3s ease;
position: relative;
z-index: 1002;
}

.footer-social a:hover {
border-color: #2587c7;
background: rgba(37, 135, 199, 0.1);
}

.footer-social a svg {
width: 20px;
height: 20px;
fill: #9ca3af;
transition: fill 0.3s ease;
}

.footer-social a:hover svg {
fill: #2587c7;
}

/* Responsive Design */
@media (max-width: 1300px) {
.header {
padding: 15px 30px;
justify-content: space-between;
}

.header .nav,
.header-right .btn-language,
.header-right .auth-buttons {
display: none;
}

.hamburger {
display: flex;
}

.header-right {
display: flex;
align-items: center;
gap: 15px;
}

.sidebar {
display: block;
}
}

@media (max-width: 768px) {
.header {
padding: 2.8rem 20px 12px 20px;
background: rgba(0, 16, 40, 0.98);
backdrop-filter: blur(10px);
}

/* Sidebar mobile - opens from behind header */
.sidebar {
width: 100%;
height: auto;
max-height: calc(100vh - 81px);
top: 0;
left: 0;
right: auto;
display: block;
transform: translateY(-100%);
border-radius: 0 0 12px 12px;
overflow-y: auto;
opacity: 0;
visibility: hidden;
transition: transform 0.4s cubic-bezier(0.4, 0, 0.2, 1), opacity 0.4s cubic-bezier(0.4, 0, 0.2, 1), visibility 0.4s cubic-bezier(0.4, 0, 0.2, 1);
}

.sidebar.active {
display: block;
transform: translateY(81px);
opacity: 1;
visibility: visible;
}

.sidebar-content {
padding: 30px 20px;
}

.sidebar-language {
padding: 12px 16px;
gap: 12px;
}

.sidebar-lang-flag {
width: 40px;
height: 40px;
}

.sidebar-link {
font-size: 15px;
padding: 12px 15px;
}

.logo img {
height: 35px;
}

.hero {
flex-direction: column !important;
justify-content: center !important;
align-items: center !important;
padding-top: 3.5rem !important;
}

.hero-content {
padding: 0 20px !important;
text-align: center !important;
display: flex !important;
flex-direction: column !important;
align-items: center !important;
justify-content: center !important;
}

.hero-title {
font-size: 32px;
margin-bottom: 0 !important;
}

.hero-subtitle {
font-size: 14px;
letter-spacing: 2px;
}

.hero-buttons {
justify-content: center;
}

.hero-social {
position: relative !important;
right: auto !important;
bottom: auto !important;
top: auto !important;
transform: none !important;
flex-direction: row !important;
justify-content: center !important;
align-items: center !important;
gap: 12px !important;
order: 2 !important;
margin-top: 30px !important;
}

.hero-content {
order: 1 !important;
}

.hero-social-link {
width: 42px;
height: 42px;
}

.hero-social-link svg {
width: 20px;
height: 20px;
}

.quem-somos {
padding: 70px 20px;
}

.quem-somos-text {
font-size: 20px;
}

.quem-somos-columns {
flex-direction: column;
gap: 30px;
}

.quem-somos-column {
padding-right: 0;
border-right: none;
}

.quem-somos-number {
font-size: 36px;
}
}

@media (max-width: 480px) {
.hero-title {
font-size: 28px;
}

.btn-primary,
.btn-secondary {
padding: 14px 28px;
font-size: 14px;
}
}

/* Nossos Produtos Section */
.nossos-produtos {
padding: 100px 0;
background: #F8F5F0;
}

.nossos-produtos-container {
max-width: 1400px;
margin: 0 auto;
padding: 0 40px;
}

.nossos-produtos-header {
margin-bottom: 60px;
}

.nossos-produtos-subheading {
font-family: 'Inter', sans-serif;
font-size: 14px;
color: #718096;
text-transform: uppercase;
letter-spacing: 1px;
margin-bottom: 40px;
position: relative;
padding-bottom: 15px;
opacity: 0;
transform: translateY(30px);
}

.nossos-produtos-subheading::after {
content: '';
position: absolute;
bottom: 0;
left: 0;
height: 1px;
background: #9ca3af;
animation: borderGrow 1.5s ease-out forwards;
z-index: 1;
}

.nossos-produtos-subheading.animate-active {
animation: slideUpFade 0.8s ease-out forwards;
}

.nossos-produtos-title-row {
display: flex;
align-items: center;
justify-content: space-between;
gap: 40px;
}

.nossos-produtos-title {
font-family: 'Inter', sans-serif;
font-size: 35px;
color: #2d3748;
font-weight: 500;
line-height: 1.4;
opacity: 0;
transform: translateY(30px);
flex: 1;
}

.nossos-produtos-title.animate-active {
animation: slideUpFade 0.8s ease-out 0.2s forwards;
}

.carousel-arrows-inline {
display: flex;
gap: 12px;
opacity: 0;
transform: scale(0.8);
}

.carousel-arrows-inline.animate-active {
animation: fadeInScale 0.6s ease-out forwards;
}

.carousel-wrapper {
position: relative;
}

.carousel-container {
flex: 1;
overflow: hidden;
position: relative;
}

.carousel-track {
display: flex;
gap: 24px;
transition: transform 0.5s ease-in-out;
}

.carousel-card {
flex: 0 0 calc(25% - 18px);
min-width: 280px;
height: 400px;
position: relative;
border-radius: 12px;
overflow: hidden;
cursor: pointer;
opacity: 0;
transform: translateY(50px);
text-decoration: none;
display: block;
}

.carousel-card.animate-active {
animation: slideUpFade 0.8s ease-out forwards;
}

.carousel-card-bg {
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 100%;
background-size: cover;
background-position: center;
background-color: #001028;
transition: transform 0.5s ease;
}

.carousel-card:hover .carousel-card-bg {
transform: scale(1.1);
}

.carousel-card-overlay {
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 100%;
background: linear-gradient(to bottom, rgba(0, 16, 40, 0.3), rgba(0, 16, 40, 0.8));
display: flex;
flex-direction: column;
justify-content: flex-end;
padding: 30px;
transition: background 0.3s ease;
}

.carousel-card:hover .carousel-card-overlay {
background: linear-gradient(to bottom, rgba(0, 16, 40, 0.5), rgba(0, 16, 40, 0.9));
}

.carousel-card-category {
font-family: 'Inter', sans-serif;
font-size: 12px;
color: #2587c7;
text-transform: uppercase;
letter-spacing: 1px;
margin-bottom: 10px;
font-weight: 600;
}

.carousel-card-title {
font-family: 'Inter', sans-serif;
font-size: 24px;
color: #ffffff;
font-weight: 700;
margin-bottom: 10px;
line-height: 1.3;
}

.carousel-card-description {
font-family: 'Inter', sans-serif;
font-size: 14px;
color: #e2e8f0;
line-height: 1.6;
opacity: 0.9;
}

.carousel-arrow {
width: 40px;
height: 40px;
border-radius: 50%;
background: #ffffff;
border: 2px solid #e2e8f0;
display: flex;
align-items: center;
justify-content: center;
cursor: pointer;
transition: all 0.3s ease;
flex-shrink: 0;
z-index: 10;
}

.carousel-arrow.animate-active {
animation: fadeInScale 0.6s ease-out forwards;
}

.carousel-arrow:hover {
background: #2587c7;
border-color: #2587c7;
transform: scale(1.05);
}

.carousel-arrow:hover svg {
stroke: #ffffff;
}

.carousel-arrow:active {
transform: scale(0.95);
}

.carousel-arrow svg {
width: 18px;
height: 18px;
stroke: #9ca3af;
transition: stroke 0.3s ease;
}

@keyframes fadeInScale {
from {
opacity: 0;
transform: scale(0.8);
}
to {
opacity: 1;
transform: scale(1);
}
}

@media (max-width: 1200px) {
.carousel-card {
flex: 0 0 calc(33.333% - 16px);
}
}

@media (max-width: 768px) {
.nossos-produtos {
padding: 60px 0;
}

.nossos-produtos-container {
padding: 0 20px;
}

.nossos-produtos-title {
font-size: 32px;
width: 100%;
}

.nossos-produtos-title-row {
flex-direction: column;
align-items: flex-start;
gap: 20px;
}

.carousel-arrows-inline {
width: 100%;
justify-content: center;
}

.carousel-wrapper {
gap: 15px;
}

.carousel-card {
flex: 0 0 calc(50% - 12px);
min-width: 250px;
height: 350px;
}

.carousel-arrow {
width: 50px;
height: 50px;
}

.carousel-arrow svg {
width: 20px;
height: 20px;
}
}

@media (max-width: 480px) {
.nossos-produtos-title {
font-size: 24px;
}

.carousel-card {
flex: 0 0 calc(100% - 0px);
min-width: 100%;
}

.carousel-arrow {
width: 45px;
height: 45px;
}

.carousel-arrow svg {
width: 18px;
height: 18px;
}

.carousel-card-title {
font-size: 20px;
}

.carousel-card-description {
font-size: 13px;
}
}

/* Nossa Essência */
.nossa-essencia {
background: #0a2540;
padding: 80px;
width: 100%;
min-height: 65vh;
display: flex;
align-items: center;
position: relative;
overflow: hidden;
}

.nossa-essencia::before,
.nossa-essencia::after {
content: '';
position: absolute;
top: 0;
bottom: 0;
width: 280px;
background-image: url('/assets/imagens/bg-formas.png');
background-repeat: no-repeat;
background-position: center;
background-size: auto 100%;
opacity: 0.12;
pointer-events: none;
z-index: 10;
}

.nossa-essencia::before {
left: -40px;
transform: rotateY(180deg);
}

.nossa-essencia::after {
right: -40px;
}

.nossa-essencia-container {
margin: 0 auto;
width: 90%;
max-width: 1600px;
position: relative;
z-index: 5;
}

.nossa-essencia-wrapper {
display: flex;
align-items: flex-start;
gap: 60px;
position: relative;
z-index: 20;
background: transparent;
}

/* Coluna Esquerda */
.essencia-coluna-esquerda {
width: 50%;
display: flex;
flex-direction: column;
background: transparent;
position: relative;
z-index: 25;
}

.essencia-header {
display: flex;
align-items: center;
gap: 20px;
margin-bottom: 40px;
}

.essencia-linha {
width: 40px;
height: 1px;
background: #DDE5E6;
}

.essencia-subtitulo {
font-family: 'Inter', sans-serif;
font-size: 14px;
color: #DDE5E6;
text-transform: uppercase;
letter-spacing: 1px;
font-weight: 500;
}

.essencia-titulo-principal {
font-family: 'Inter', sans-serif;
font-size: 48px;
color: #ffffff;
line-height: 1.2;
font-weight: 600;
margin: 0;
text-align: left;
}

/* Coluna Direita */
.essencia-coluna-direita {
width: 50%;
display: flex;
flex-direction: column;
gap: 40px;
background: transparent;
position: relative;
z-index: 25;
}

.essencia-block {
display: flex;
flex-direction: column;
gap: 15px;
position: relative;
z-index: 15;
background: transparent;
}

.essencia-topo {
display: flex;
justify-content: space-between;
align-items: flex-start;
gap: 30px;
}

.essencia-titulo {
font-family: 'Inter', sans-serif;
font-size: 18px;
color: #ffffff;
font-weight: 600;
line-height: 1.4;
margin: 0;
flex: 1;
}

.essencia-ano {
font-family: 'Inter', sans-serif;
font-size: 16px;
color: #DDE5E6;
font-weight: 500;
white-space: nowrap;
}

.essencia-descricao {
font-family: 'Inter', sans-serif;
font-size: 14px;
color: rgba(221, 229, 230, 0.7);
line-height: 1.6;
margin: 0;
}

.essencia-divisor {
width: 100%;
height: 1px;
background: rgba(221, 229, 230, 0.2);
}

.essencia-lista {
list-style: none;
padding: 0;
margin: 15px 0 0 0;
}

.essencia-lista li {
font-family: 'Inter', sans-serif;
font-size: 14px;
color: rgba(221, 229, 230, 0.8);
line-height: 1.8;
padding: 8px 0;
padding-left: 20px;
position: relative;
}

.essencia-lista li::before {
content: '•';
position: absolute;
left: 0;
color: #2587c7;
font-size: 18px;
}

/* Acordeão */
.essencia-acordeao:not(.active) .essencia-conteudo {
max-height: 0;
}

.essencia-topo {
display: flex;
justify-content: space-between;
align-items: center;
cursor: pointer;
}

.essencia-toggle {
font-size: 28px;
color: #2587c7;
font-weight: 300;
transition: transform 0.5s cubic-bezier(0.4, 0, 0.2, 1);
flex-shrink: 0;
}

.essencia-acordeao.active .essencia-toggle {
transform: rotate(45deg);
}

.essencia-conteudo {
max-height: 0;
overflow: hidden;
transition: max-height 0.6s cubic-bezier(0.4, 0, 0.2, 1);
}

.essencia-acordeao.active .essencia-conteudo {
max-height: 500px;
}

.essencia-preview {
margin-bottom: 15px;
}

.essencia-detalhes {
max-height: 0;
overflow: hidden;
opacity: 0;
transform: translateY(-10px);
transition: max-height 0.6s cubic-bezier(0.4, 0, 0.2, 1), opacity 0.6s cubic-bezier(0.4, 0, 0.2, 1), transform 0.6s cubic-bezier(0.4, 0, 0.2, 1);
}

.essencia-acordeao.active .essencia-detalhes {
max-height: 500px;
opacity: 1;
transform: translateY(0);
margin-top: 15px;
}

/* Animações para Nossa Essência */
.nossa-essencia-animate {
opacity: 0;
transform: translateY(40px);
transition: opacity 0.8s ease, transform 0.8s ease;
}

.nossa-essencia-animate.animate-active {
opacity: 1;
transform: translateY(0);
}

/* Responsividade para Nossa Essência */
@media (max-width: 1024px) {
.nossa-essencia {
padding: 60px 40px;
min-height: auto;
}

.nossa-essencia::before,
.nossa-essencia::after {
width: 280px;
}

.nossa-essencia::before {
left: -40px;
}

.nossa-essencia::after {
left: auto;
right: 0;
}

.nossa-essencia-container {
width: 85%;
}

.nossa-essencia-wrapper {
flex-direction: column;
gap: 50px;
}

.essencia-coluna-esquerda {
width: 100%;
}

.essencia-coluna-direita {
width: 100%;
}

.essencia-titulo-principal {
font-size: 36px;
}

.essencia-ano {
font-size: 14px;
}

.essencia-descricao {
font-size: 13px;
}
}

@media (max-width: 768px) {
.nossa-essencia {
padding: 50px 20px;
}

.nossa-essencia::before,
.nossa-essencia::after {
display: none;
}

.nossa-essencia-container {
width: 100%;
}

.essencia-header {
margin-bottom: 30px;
}

.essencia-titulo-principal {
font-size: 28px;
}

.essencia-topo {
flex-direction: column;
gap: 10px;
}

.essencia-titulo {
font-size: 15px;
}

.essencia-descricao {
font-size: 12px;
}

.essencia-lista li {
font-size: 12px;
padding: 6px 0;
padding-left: 18px;
}

.essencia-coluna-direita {
gap: 30px;
}
}

/* Nossa Governança */
.nossa-governanca {
background: #f5f1ed;
padding: 90px 40px;
width: 100%;
}

.nossa-governanca-container {
margin: 0 auto;
max-width: 1400px;
}

.nossa-governanca-title {
font-family: 'Inter', sans-serif;
font-size: 14px;
color: #718096;
margin-bottom: 40px;
text-transform: uppercase;
letter-spacing: 1px;
position: relative;
padding-bottom: 15px;
}

.nossa-governanca-title::after {
content: '';
position: absolute;
bottom: 0;
left: 0;
height: 1px;
background: #9ca3af;
animation: borderGrow 1.5s ease-out forwards;
z-index: 1;
}

.nossa-governanca-text {
font-family: 'Inter', sans-serif;
font-size: 35px;
color: #2d3748;
line-height: 1.4;
margin-bottom: 80px;
font-weight: 500;
width: 70%;
}

.governanca-layout {
display: grid;
grid-template-columns: 1fr 1fr;
gap: 60px;
align-items: start;
}

.governanca-left {
display: flex;
flex-direction: column;
gap: 20px;
}

.governanca-item {
background: transparent;
border-bottom: 1px solid rgba(156, 163, 175, 0.2);
transition: all 0.4s ease;
cursor: pointer;
}

.governanca-item:last-child {
border-bottom: none;
}

.governanca-item.active {
background: rgba(37, 135, 199, 0.05);
}

.governanca-item-header {
display: flex;
align-items: center;
padding: 25px 30px;
gap: 20px;
}

.governanca-item-number {
font-family: 'Inter', sans-serif;
font-size: 28px;
font-weight: 700;
color: #2587c7;
min-width: 50px;
}

.governanca-item-title {
font-family: 'Inter', sans-serif;
font-size: 16px;
color: #2d3748;
font-weight: 600;
flex: 1;
margin: 0;
}

.governanca-item-icon {
font-size: 28px;
color: #2587c7;
font-weight: 300;
transition: transform 0.3s ease;
min-width: 30px;
text-align: center;
}

.governanca-item.active .governanca-item-icon {
transform: rotate(45deg);
}

.governanca-item-content {
max-height: 0;
overflow: hidden;
transition: max-height 0.4s ease, padding 0.4s ease;
}

.governanca-item.active .governanca-item-content {
max-height: 500px;
padding: 20px 30px 25px 30px;
}

.governanca-item-content p {
font-family: 'Inter', sans-serif;
font-size: 14px;
color: #718096;
line-height: 1.7;
margin: 0;
}

.governanca-right {
position: sticky;
top: 40px;
}

.governanca-image-wrapper {
width: 100%;
border-radius: 12px;
overflow: hidden;
box-shadow: 0 8px 24px rgba(0, 16, 40, 0.12);
background: #ffffff;
}

.governanca-image {
width: 100%;
height: 500px;
object-fit: cover;
display: block;
transition: opacity 0.4s ease;
}

.governanca-image.fade-out {
opacity: 0;
}

@media (max-width: 1024px) {
.governanca-layout {
grid-template-columns: 1fr;
gap: 40px;
}

.governanca-right {
position: static;
order: -1;
}

.governanca-image {
height: 350px;
}
}

@media (max-width: 768px) {
.nossa-governanca {
padding: 60px 20px;
}

.nossa-governanca-text {
width: 100%;
font-size: 24px;
margin-bottom: 50px;
}

.governanca-item-header {
padding: 20px;
gap: 15px;
}

.governanca-item-number {
font-size: 22px;
min-width: 40px;
}

.governanca-item-title {
font-size: 16px;
}

.governanca-item-icon {
font-size: 24px;
min-width: 25px;
}

.governanca-item.active .governanca-item-content {
padding: 20px 20px 20px 20px;
}

.governanca-item-content p {
font-size: 14px;
}

.governanca-image {
height: 250px;
}
}

/* Back to Top Button */
/* WhatsApp Button */
.whatsapp-button {
position: fixed;
bottom: 110px;
right: 40px;
width: 60px;
height: 60px;
border-radius: 50%;
background: #25D366;
border: none;
cursor: pointer;
display: flex;
align-items: center;
justify-content: center;
text-decoration: none;
z-index: 1000;
box-shadow: 0 4px 12px rgba(37, 211, 102, 0.4);
will-change: box-shadow;
animation: pulse 2s ease-out infinite;
transition: transform 0.3s ease, box-shadow 0.3s ease, opacity 0.15s ease, visibility 0.15s ease;
opacity: 0;
visibility: hidden;
}

.whatsapp-button.visible {
opacity: 1;
visibility: visible;
}

.whatsapp-button:hover {
transform: scale(1.1);
box-shadow: 0 6px 20px rgba(37, 211, 102, 0.6);
animation: none;
}

.whatsapp-button svg {
width: 32px;
height: 32px;
fill: #ffffff;
}

@keyframes pulse {
0% {
box-shadow: 0 0 0 0 rgba(37, 211, 102, 0.6);
}

70% {
box-shadow: 0 0 0 25px rgba(37, 211, 102, 0);
}

100% {
box-shadow: 0 0 0 0 rgba(37, 211, 102, 0);
}
}

@media (max-width: 768px) {
.whatsapp-button {
bottom: 110px;
right: 20px;
width: 50px;
height: 50px;
}

.whatsapp-button svg {
width: 26px;
height: 26px;
}
}
</style>