/* Reset e configurações básicas */
* {
    margin: 0;
    padding: 0;
    box-sizing: border-box;
}

html {
    scroll-behavior: smooth;
}

body {
    font-family: 'Inter', sans-serif;
    line-height: 1.6;
    color: #333;
    overflow-x: hidden;
}

/* Variáveis CSS */
:root {
    --primary-color: #2563eb;
    --primary-dark: #1d4ed8;
    --secondary-color: #64748b;
    --accent-color: #f59e0b;
    --text-dark: #1e293b;
    --text-light: #64748b;
    --bg-light: #f8fafc;
    --bg-white: #ffffff;
    --border-color: #e2e8f0;
    --shadow-sm: 0 1px 2px 0 rgb(0 0 0 / 0.05);
    --shadow-md: 0 4px 6px -1px rgb(0 0 0 / 0.1);
    --shadow-lg: 0 10px 15px -3px rgb(0 0 0 / 0.1);
    --shadow-xl: 0 20px 25px -5px rgb(0 0 0 / 0.1);
    --gradient-primary: linear-gradient(135deg, #667eea 0%, #00bfff 100%);
    --gradient-secondary: linear-gradient(135deg, #f093fb 0%, #f5576c 100%);
}


.marquee-container {
    width: 100%;
    overflow: hidden;
    white-space: nowrap;
    box-sizing: border-box;
    background: var(--gradient-primary);
    padding: 15px 0;
}

.marquee {
    display: inline-block;
    padding-left: 100%;
    animation: marquee 12s linear infinite;
    font-size: 24px;
    font-weight: bold;
    background: linear-gradient(135deg, #ffffff, #e0f7ff);
    background-size: 200% auto;
    color: transparent;
    background-clip: text;
    -webkit-background-clip: text;
    text-shadow: 1px 1px 3px rgba(0, 162, 255, 0.3);
}

@keyframes marquee {
    0% {
        transform: translateX(0);
    }

    100% {
        transform: translateX(-100%);
    }
}


/* Utilitários */
.container {
    max-width: 1200px;
    margin: 0 auto;
    padding: 0 20px;
}

.section-title {
    font-size: 2.5rem;
    font-weight: 700;
    text-align: center;
    margin-bottom: 1rem;
    color: var(--text-dark);
}

.section-subtitle {
    font-size: 1.125rem;
    text-align: center;
    color: var(--text-light);
    margin-bottom: 3rem;
    max-width: 600px;
    margin-left: auto;
    margin-right: auto;
}

/* Botões */
.btn {
    display: inline-block;
    padding: 12px 24px;
    border-radius: 8px;
    text-decoration: none;
    font-weight: 600;
    transition: all 0.3s ease;
    border: none;
    cursor: pointer;
    font-size: 1rem;
}

/* ------------Efeito Pulsante --------- */
@keyframes pulse {
    0% {
        transform: scale(1);
        box-shadow: 0 0 0 0 rgba(0, 123, 255, 0.7);
    }

    70% {
        transform: scale(1.05);
        box-shadow: 0 0 0 10px rgba(0, 123, 255, 0);
    }

    100% {
        transform: scale(1);
        box-shadow: 0 0 0 0 rgba(0, 123, 255, 0);
    }
}

.btn-primary {
    background: var(--gradient-primary);
    color: white;
    box-shadow: var(--shadow-md);
}

.btn-primary:hover {
    transform: translateY(-2px) scale(1.05);
    box-shadow: var(--shadow-lg);
}

.btn-secondary {
    background: transparent;
    color: var(--primary-color);
    border: 2px solid var(--primary-color);
}

.btn-secondary:hover {
    background: var(--primary-color);
    color: white;
    transform: translateY(-2px) scale(1.05);
}

/* Specific Override for Hero Section Buttons to ensure contrast */
.hero .btn-secondary {
    color: white;
    border-color: white;
}

.hero .btn-secondary:hover {
    background: white;
    color: #1e293b;
    /* Matches dark hero background */
    border-color: white;
}

.btn-personalizado {
    background: var(--gradient-primary);
    color: white;
    box-shadow: var(--shadow-md);
    animation: pulse 2s infinite;

}

.btn-personalizado i.fa-whatsapp {
    font-size: 1.4rem;
    margin-right: 8px;
}

.btn-personalizado .mobile-text {
    display: none;
}

/* ------------------------------------ */
/* Header */
.header {
    position: fixed;
    top: 0;
    width: 100%;
    background: rgba(255, 255, 255, 0.9);
    backdrop-filter: blur(20px);
    -webkit-backdrop-filter: blur(20px);
    z-index: 1000;
    box-shadow: 0 4px 30px rgba(0, 0, 0, 0.05);
    height: 80px;
    /* Reduced specific height for sleekness */
    transition: all 0.3s ease;
}

/* Navbar */
.navbar {
    padding: 0;
    height: 100%;
    display: flex;
    align-items: center;
}

.nav-container {
    display: flex;
    justify-content: space-between;
    align-items: center;
    max-width: 1400px;
    /* Wider container for better spacing */
    margin: 0 auto;
    padding: 0 40px;
    /* More breathing room on sides */
    width: 100%;
}

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

.nav-logo img {
    height: 40px;
    /* Constrain by height instead of width */
    width: auto;
}

/* Logo Text - Removed negative margins and enhanced style */
.nav-logo h1 {
    font-size: 1.3rem;
    font-weight: 800;
    background: linear-gradient(135deg, #2563eb, #7c3aed);
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
    background-clip: text;
    color: transparent;
    margin: 0;
    letter-spacing: -0.5px;
}

.nav-logo h1 .text {
    background: linear-gradient(135deg, #3b82f6, #06b6d4);
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
    background-clip: text;
    color: transparent;
}

.nav-menu {
    display: flex;
    list-style: none;
    gap: 1.5rem;
    /* Reduced space between items */
    padding-left: 0;
    /* Removed unnecessary padding */
    align-items: center;
}

/* Login Button Specific Style */
#login {
    text-decoration: none;
    color: #2563eb;
    font-weight: 600;
    font-size: 1rem;
    transition: all 0.3s ease;
    padding: 10px 32px;
    white-space: nowrap;
    display: flex;
    align-items: center;
    border: 2px solid #2563eb;
    border-radius: 50px;
    background: transparent;
    box-shadow: none;
    margin-left: 3rem;
}

#login:hover {
    color: white;
    background: #2563eb;
    transform: translateY(-2px);
    box-shadow: 0 4px 12px rgba(37, 99, 235, 0.3);
}

/* Links de Navegação - Modernizado */
.nav-link {
    text-decoration: none;
    color: var(--text-dark);
    font-weight: 500;
    font-size: 1.1rem;
    transition: color 0.3s ease, transform 0.3s ease;
    position: relative;
    padding: 5px 0;
    white-space: nowrap;
    display: flex;
    align-items: center;
}

.nav-link:hover {
    color: var(--primary-color, #667eea);
    /* Mude a cor do texto no hover */
    transform: translateY(-2px);
    /* Leve elevação */
}

.nav-link::before {
    content: '';
    position: absolute;
    width: 0;
    height: 3px;
    /* Aumente a espessura da linha */
    bottom: -5px;
    left: 50%;
    /* Começa no centro */
    background: linear-gradient(90deg, #667eea, #764ba2);
    /* Adicione um gradiente para o sublinhado */
    transition: width 0.3s ease, left 0.3s ease;
    /* Transição para largura e posição */
    transform: translateX(-50%);
    /* Centraliza o sublinhado */
    border-radius: 2px;
    /* Bordas arredondadas para o sublinhado */
}

.nav-link:hover::before {
    width: 100%;
    /* Estende a largura total */
    left: 0;
    /* Move para a esquerda */
    transform: translateX(0);
    /* Remove a centralização */
}

/* Hamburguer (Mobile) */
.hamburger {
    display: none;
    flex-direction: column;
    cursor: pointer;
}

.bar {
    width: 25px;
    height: 3px;
    background: var(--text-dark);
    margin: 3px 0;
    transition: 0.3s;
}

/* Hero Section */
.hero {
    padding: 160px 0 100px;
    /* Increased padding for more breathing room */
    background: linear-gradient(135deg, #1e293b 0%, #0f172a 100%);
    /* Deep dark blue for premium feel */
    color: white;
    overflow: hidden;
    position: relative;
    clip-path: polygon(0 0, 100% 0, 100% 90%, 0 100%);
    /* Modern angled bottom */
}

/* Abstract background shapes for dynamic feel */
.hero::before {
    content: '';
    position: absolute;
    top: -50px;
    right: -50px;
    width: 400px;
    height: 400px;
    background: radial-gradient(circle, rgba(37, 99, 235, 0.2) 0%, rgba(37, 99, 235, 0) 70%);
    border-radius: 50%;
    z-index: 0;
}

.hero::after {
    content: '';
    position: absolute;
    bottom: -50px;
    left: -50px;
    width: 300px;
    height: 300px;
    background: radial-gradient(circle, rgba(245, 158, 11, 0.15) 0%, rgba(245, 158, 11, 0) 70%);
    border-radius: 50%;
    z-index: 0;
}

.hero-container {
    display: grid;
    grid-template-columns: 1.2fr 1fr;
    /* Give text slightly more space */
    gap: 4rem;
    align-items: center;
    max-width: 1200px;
    margin: 0 auto;
    padding: 0 20px;
    position: relative;
    z-index: 1;
}

.hero-content {
    animation: fadeInUp 1s ease-out;
}

.hero-title {
    font-size: 3.5rem;
    font-weight: 800;
    margin-bottom: 1.5rem;
    line-height: 1.1;
    /* Silver Gradient */
    background: linear-gradient(to right, #A0A0A0 0%, #F0F0F0 50%, #A0A0A0 100%);
    background-size: 200% auto;
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
    background-clip: text;
    letter-spacing: -0.02em;
    animation: shine 5s linear infinite;
}

@keyframes shine {
    to {
        background-position: 200% center;
    }
}

.hero-subtitle {
    font-size: 1.25rem;
    margin-bottom: 2.5rem;
    color: #cbd5e1;
    /* Softer white for subtitle */
    max-width: 90%;
    line-height: 1.6;
}

.hero-buttons {
    display: flex;
    gap: 1.5rem;
    flex-wrap: wrap;
}

.hero-image {
    position: relative;
    animation: fadeInRight 1s ease-out 0.3s backwards;
    /* Delayed animation */
    display: flex;
    justify-content: center;
}

.hero-image img {
    width: 100%;
    max-width: 500px;
    /* Constraint max width */
    height: auto;
}

.hero-image img:hover {
    transform: translateY(-10px);
}

/* Animations */
@keyframes fadeInUp {
    from {
        opacity: 0;
        transform: translateY(30px);
    }

    to {
        opacity: 1;
        transform: translateY(0);
    }
}

@keyframes fadeInRight {
    from {
        opacity: 0;
        transform: translateX(30px);
    }

    to {
        opacity: 1;
        transform: translateX(0);
    }
}

/* Mobile Responsiveness */
@media (max-width: 992px) {
    .hero {
        height: auto;
        min-height: auto;
        padding-top: 80px;
        /* Header space */
    }

    .hero-container {
        grid-template-columns: 1fr;
        grid-template-rows: auto auto;
    }

    .hero-content {
        padding: 60px 20px;
        text-align: center;
        align-items: center;
    }

    .hero-image {
        height: 400px;
        /* Fixed height for image on mobile */
        order: -1;
        /* Image on top? Or bottom. Let's keep it bottom for flow, or top for visual impact */
        order: 1;
        /* Keep bottom as per typical flow, or let's put it top? User "preencha" might imply background. Let's stick to bottom for now or top if it's main visual. Let's do Standard order: text then image on mobile usually better for SEO/UX, or Image top for impact. Let's do Order 1 (bottom) so text is first. */
    }

    .hero-image::after {
        background: linear-gradient(to top, #0f172a 0%, rgba(0, 0, 0, 0) 20%);
    }

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

@keyframes zoomIn {
    from {
        transform: scale(1.1);
        opacity: 0;
    }

    to {
        transform: scale(1);
        opacity: 1;
    }
}

/* Services Section */


#card_destaque {
    box-shadow: 0 0 8px rgba(154, 154, 154, 0.6);
    transition: all 0.3s ease-in-out;
    padding: 20px;
    background-color: #fff;
    border-radius: 8px;
    text-align: center;
    color: #333;
}



.services {
    padding: 80px 0;
    background: var(--bg-light);
}

.services-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(300px, 1fr));
    gap: 2rem;
}

.service-card {
    background: white;
    padding: 2rem;
    border-radius: 16px;
    box-shadow: var(--shadow-md);
    transition: all 0.3s ease;
    text-align: center;
}

.service-card:hover {
    transform: translateY(-8px);
    box-shadow: var(--shadow-xl);
}

.service-icon {
    width: 80px;
    height: 80px;
    margin: 0 auto 1.5rem;
    display: flex;
    align-items: center;
    justify-content: center;
    background: var(--gradient-primary);
    border-radius: 50%;
}

.service-icon img {
    width: 40px;
    height: 40px;
    filter: brightness(0) invert(1);
}

.service-icon i {
    font-size: 2rem;
    color: white;
}

.service-card h3 {
    font-size: 1.5rem;
    font-weight: 600;
    margin-bottom: 1rem;
    color: var(--text-dark);
}

.service-card p {
    color: var(--text-light);
    line-height: 1.6;
}

/*---------- PLANOS DOS SERVIÇOS ----------- */

.pricing-section {
    padding: 80px 20px;
    background-color: #fff;
}

.section-header {
    text-align: center;
    margin-bottom: 50px;
}

.section-title {
    font-size: 2.5rem;
    color: var(text-dark);
    margin-bottom: 0.5rem;
    text-align: center;
}

.section-description {
    color: #718096;
    font-size: 1.2rem;
}

.pricing-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(300px, 1fr));
    gap: 2rem;
}

.pricing-carousel .owl-stage {
    display: flex;
}

.pricing-carousel .owl-item {
    display: flex;
    flex: 1 0 auto;
}

.pricing-card {
    height: 100%;
    min-height: 500px;
    background: white;
    border: 1px solid #e2e8f0;
    border-radius: 1rem;
    padding: 2rem;
    box-shadow: 0 4px 20px rgba(0, 0, 0, 0.05);
    display: flex;
    flex-direction: column;
    justify-content: flex-start;
    gap: 1rem;
    transition: transform 0.3s ease, box-shadow 0.3s ease;
}

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

.pricing-card h3 {
    font-size: 1.5rem;
    text-align: center;
    color: #2d3748;
    margin-bottom: 0.5rem;
}

.pricing-price {
    font-size: 2rem;
    text-align: center;
    font-weight: 700;
    color: #792bf6;
    margin-bottom: 0.5rem;
}

.pricing-card p {
    color: #718096;
    margin-bottom: 1rem;
    text-align: center;
}

.pricing-features {
    list-style: none;
    padding: 0;
    margin-bottom: 1.5rem;
    flex-grow: 1;
    /* Push button to bottom if desired, or remove if compact is preferred. Let's keep it compact for now as requested. */
}

.pricing-features li {
    margin-bottom: 0.75rem;
    color: #2d3748;
    display: flex;
    align-items: center;
    gap: 0.5rem;
}

.pricing-features li i {
    color: #38a169;
}

.pricing-card .btn {
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 0.75rem 1.5rem;
    border-radius: 2rem;
    text-decoration: none;
    font-weight: 600;
    transition: background-color 0.3s;
}

.btn-primary {
    /* background: linear-gradient(135deg, #792bf6, #9b4cff); */
    color: white;
    border: none;
    transition: background 0.3s ease;
}

/* .btn-primary:hover {
    background: linear-gradient(135deg, #5d21b5, #7038d2);
} */

.btn-outline {
    border: 2px solid #792bf6;
    color: #792bf6;
    background-color: transparent;
    transition: background 0.3s ease, color 0.3s ease;
}

.btn-outline:hover {
    /* background: linear-gradient(135deg, #792bf6, #9b4cff); */
    color: white;
}

.btn-secondary {
    background-color: transparent;
    color: white;
    transition: background 0.3s ease, color 0.3s ease;
}

.btn-secondary:hover {
    /* background: linear-gradient(135deg, #792bf6, #9b4cff); */
    color: white;
}

.btn-large {
    padding: 1rem 2rem;
    font-size: 1rem;
    border-radius: 2rem;
}

.featured {
    border: 2px solid #667eea;
}

.featured .pricing-price {
    color: #5d21b5;
}

.featured h3 {
    color: #2d3748;
}

@media (max-width: 768px) {
    .section-title {
        font-size: 2rem;
    }

    .pricing-price {
        font-size: 1.8rem;
    }

    .pricing-card {
        width: 100%;
        height: auto;
    }
}

/* ----------------------------------------- */

/* About Section */
.about {
    padding: 80px 0;
    background: white;
}

.about-content {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 4rem;
    align-items: center;
}

.about-text h2 {
    text-align: left;
    margin-bottom: 2rem;
}

.about-text p {
    margin-bottom: 1.5rem;
    color: var(--text-light);
    font-size: 1.1rem;
    line-height: 1.7;
}

.skills {
    margin-top: 2rem;
}

.skill-item {
    margin-bottom: 1.5rem;
}

.skill-name {
    display: block;
    font-weight: 600;
    margin-bottom: 0.5rem;
    color: var(--text-dark);
}

.skill-bar {
    height: 8px;
    background: var(--border-color);
    border-radius: 4px;
    overflow: hidden;
}

.skill-progress {
    height: 100%;
    background: var(--gradient-primary);
    border-radius: 4px;
    transition: width 2s ease;
    width: 0;
}

.about-image img {
    width: 100%;
    max-width: 500px;
    height: auto;
    background-color: transparent;
    border-radius: 20px;
    box-shadow: -20px 20px 0px rgba(0, 0, 0, 0.171);
    /* Stylized shadow box instead of simple border */
    transition: transform 0.3s ease;
}

.mobile-about-hero-img {
    display: none;
}

.about-image img:hover {
    transform: scale(1.02);
}

/* Projects Section */
.projects {
    padding: 80px 0;
    background: var(--bg-light);
}

.projects-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(350px, 1fr));
    gap: 2rem;
}

.project-card {
    background: white;
    border-radius: 16px;
    overflow: hidden;
    box-shadow: var(--shadow-md);
    transition: all 0.3s ease;
}

.project-card:hover {
    transform: translateY(-8px);
    box-shadow: var(--shadow-xl);
}

.project-image {
    position: relative;
    overflow: hidden;
}

.project-image img {
    width: 100%;
    height: 250px;
    object-fit: cover;
    transition: transform 0.3s ease;
}

.project-card:hover .project-image img {
    transform: scale(1.1);
}

.project-overlay {
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    background: rgba(37, 99, 235, 0.9);
    display: flex;
    align-items: center;
    justify-content: center;
    opacity: 0;
    transition: opacity 0.3s ease;
}

.project-card:hover .project-overlay {
    opacity: 1;
}

.project-link {
    color: white;
    font-size: 1.5rem;
    text-decoration: none;
    padding: 12px;
    border: 2px solid white;
    border-radius: 50%;
    transition: all 0.3s ease;
}

.project-link:hover {
    background: white;
    color: var(--primary-color);
}

.project-info {
    padding: 1.5rem;
    flex-grow: 1;
    display: flex;
    flex-direction: column;
}

.project-info h3 {
    font-size: 1.25rem;
    font-weight: 600;
    margin-bottom: 0.5rem;
    color: var(--text-dark);
}

.project-info p {
    color: var(--text-light);
    margin-bottom: 1rem;
    line-height: 1.6;
    flex-grow: 1;
}

.project-tech {
    display: flex;
    gap: 0.5rem;
    flex-wrap: wrap;
    justify-content: center;
    margin-top: auto;
}

.project-tech span {
    background: var(--bg-light);
    color: var(--primary-color);
    padding: 0.25rem 0.75rem;
    border-radius: 20px;
    font-size: 0.875rem;
    font-weight: 500;
}

/*-------------- Projetos Carrossel------------- */

.projects-carousel .owl-stage {
    display: flex;
}

.projects-carousel .owl-item {
    display: flex;
    flex: 1 0 auto;
}

.projects-carousel .item {
    padding: 10px;
    height: 100%;
    width: 100%;
}

.project-card-link {
    text-decoration: none;
    color: inherit;
    display: block;
    height: 100%;
}

.project-card {
    background: #fff;
    border-radius: 30px;
    /* More rounded like the image */
    overflow: hidden;
    box-shadow: 0 10px 30px rgba(0, 0, 0, 0.05);
    /* Softer shadow */
    display: flex;
    flex-direction: column;
    height: 100%;
    transition: transform 0.3s;
    border-top: 8px solid #57d0ff;
    /* Top border bar */
    position: relative;
}

.project-card:hover {
    transform: translateY(-5px);
}

.project-image {
    position: relative;
}

.project-image img {
    width: 100%;
    height: 250px;
    object-fit: fill;
    object-position: center;
    display: block;
}

.project-overlay {
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    background: rgba(0, 0, 0, 0.5);
    opacity: 0;
    display: flex;
    justify-content: center;
    align-items: center;
    transition: opacity 0.3s ease;
    pointer-events: none;
    /* Permite que o clique passe para o link pai */
}

.project-image:hover .project-overlay {
    opacity: 1;
}

.view-icon {
    color: #fff;
    font-size: 2.5rem;
}

.project-info {
    padding: 1.5rem 2rem 2.5rem;
    flex-grow: 1;
    display: flex;
    flex-direction: column;
    text-align: center;
    align-items: center;
    /* Centered text */
}

.project-info h3 {
    margin-bottom: 0.5rem;
    font-size: 1.25rem;
    font-weight: 600;
    color: var(--text-dark);
}

.project-info p {
    font-size: 1.1rem;
    color: #718096;
    /* Gray text */
    margin-bottom: 1.5rem;
    line-height: 1.6;
    flex-grow: 1;
}

.project-tech span {
    display: inline-block;
    background: #2563eb;
    color: #fff;
    padding: 4px 8px;
    margin: 2px;
    border-radius: 5px;
    font-size: 0.8rem;
}

/* --------------------------------------------- */

/*-------------- DEPOIMENTOS ------------ */

.testimonials {
    padding: 100px 0;
    /* Increased padding */
    background: linear-gradient(135deg, #fefefe 0%, #f0f4f8 100%);
    /* Soft gradient background */
    text-align: center;
}

.testimonials .section-title {
    font-size: 2.5rem;
    color: #2d3748;
    margin-bottom: 1rem;
}

.testimonials .section-subtitle {
    color: #718096;
    margin-bottom: 60px;
    font-size: 1.1rem;
}

/* Carousel Adjustments */
.testimonials-carousel .owl-stage {
    display: flex;
    padding-bottom: 40px;
    padding-top: 30px;
    /* Espaço para o ícone flutuante não cortar */
}

.testimonials-carousel .owl-item {
    display: flex;
    /* Removed flex: 1 0 auto to respect Owl's width */
}

.testimonials-carousel .item {
    height: 100%;
    /* Ensure items take full height */
    padding: 10px;
    width: 100%;
    /* Garante largura correta dentro do flex item */
}

/* Modern Testimonial Card */
/* Modern Testimonial Card */
/* Modern Testimonial Card - Blue Gradient Style */
.testimonial-card {
    background: white;
    border-radius: 20px;
    padding: 2.5rem;
    box-shadow: 0 4px 15px rgba(0, 0, 0, 0.05);
    display: flex;
    flex-direction: column;
    height: 100%;
    transition: transform 0.3s ease, box-shadow 0.3s ease;
    text-align: left;
    border: none;
    position: relative;
    overflow: hidden;
}

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

/* Rating at Top */
.testimonial-rating {
    margin-bottom: 2rem;
    color: #fbbf24;
    /* Gold */
    font-size: 1.25rem;
    display: flex;
    gap: 4px;
}

/* Content Text */
.testimonial-content {
    margin-bottom: 2rem;
    flex-grow: 1;
}

.testimonial-content p {
    font-size: 1.05rem;
    color: #555;
    line-height: 1.7;
    font-style: italic;
    font-weight: 400;
    margin: 0;
    font-family: 'Inter', sans-serif;
}

/* Divider Line - Bright Blue Gradient */
.testimonial-divider {
    width: 50px;
    height: 5px;
    background: linear-gradient(90deg, #3b82f6 0%, #2563eb 100%);
    /* Bright Blue */
    border-radius: 10px;
    margin-bottom: 1.5rem;
}

/* Author Row Container */
.testimonial-author-row {
    display: flex;
    align-items: center;
    gap: 15px;
}

/* User Icon Styling - Blue Gradient */
.author-avatar-icon {
    font-size: 3.5rem;
    background: linear-gradient(135deg, #3b82f6 0%, #2563eb 100%);
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
    background-clip: text;
    color: #2563eb;
    /* Fallback */
    line-height: 1;
    display: flex;
    align-items: center;
    justify-content: center;
}

/* Author Info Text */
.author-info {
    display: flex;
    flex-direction: column;
    gap: 2px;
}

.author-info h4 {
    margin: 0;
    color: #1d4ed8;
    /* Dark Blue */
    font-size: 1.15rem;
    font-weight: 700;
    line-height: 1.2;
}

.author-info .author-position {
    font-size: 0.95rem;
    color: #6b7280;
    font-weight: 400;
}

.author-info .author-date {
    font-size: 0.8rem;
    color: #9ca3af;
    /* Gray-400 */
    font-weight: 400;
    margin-top: 2px;
}

/* Dots Navigation */
.testimonials-carousel .owl-dots {
    margin-top: 20px;
}

.testimonials-carousel .owl-dot span {
    width: 12px;
    height: 12px;
    background: #cbd5e0;
    transition: all 0.3s ease;
}

.testimonials-carousel .owl-dot.active span {
    width: 30px;
    background: var(--gradient-primary);
}

/* -------------------------------------- */
.blog {
    padding: 80px 0;
    background: var(--bg-light);
}

/* Reative e ajuste o grid para garantir a altura igual */
.blog-grid {
    display: grid;
    /* Isso cria colunas flexíveis, mas a altura igual será gerenciada pelo conteúdo do item */
    grid-template-columns: repeat(auto-fit, minmax(300px, 1fr));
    gap: 2rem;
    /* Opcional: Adiciona alinhamento de itens, mas o flexbox dentro do card é mais robusto */
    align-items: stretch;
}

.blog-card {
    background: white;
    border-radius: 16px;
    overflow: hidden;
    box-shadow: var(--shadow-md);
    transition: all 0.3s ease;
    display: flex;
    flex-direction: column;
    height: 100%;
}

.blog-card:hover {
    transform: translateY(-8px);
    box-shadow: var(--shadow-xl);
}

.blog-image img {
    width: 100%;
    height: 250px;
    /* Mantenha uma altura fixa para a imagem */
    object-fit: cover;
    display: block;
    /* Remove espaços extras abaixo da imagem */
}

.blog-content {
    padding: 1.5rem;
    /* Faz o conteúdo preencher o espaço restante, empurrando o link para o final */
    display: flex;
    flex-direction: column;
    flex-grow: 1;
    /* Permite que o conteúdo cresça e ocupe todo o espaço disponível */
}

.blog-meta {
    display: flex;
    gap: 1rem;
    margin-bottom: 1rem;
}

.blog-date,
.blog-category {
    font-size: 0.875rem;
    color: var(--text-light);
}

.blog-category {
    background: var(--primary-color);
    color: white;
    padding: 0.25rem 0.75rem;
    border-radius: 20px;
}

.blog-card h3 {
    font-size: 1.25rem;
    font-weight: 600;
    margin-bottom: 1rem;
    color: var(--text-dark);
}

.blog-card p {
    color: var(--text-light);
    /* Remove o margin-bottom para o parágrafo, se o link for abaixo, ou mantenha e use margin-top no link */
    margin-bottom: 1rem;
    line-height: 1.6;
    flex-grow: 1;
    /* Permite que o parágrafo do resumo cresça para alinhar as alturas */
}

.blog-link {
    color: var(--primary-color);
    text-decoration: none;
    font-weight: 600;
    display: inline-flex;
    align-items: center;
    gap: 0.5rem;
    transition: gap 0.3s ease;
    margin-top: auto;
    /* Empurra o link para o final do .blog-content */
}

.blog-link:hover {
    gap: 1rem;
}

/* -------- Blog Carrossel------ */

.blog-carousel .owl-stage {
    display: flex;
}

.blog-carousel .owl-item {
    display: flex;
    flex: 1 0 auto;
}

.blog-carousel .item {
    padding: 10px;
    height: 100%;
}

/* Os estilos .blog-card já foram ajustados acima para funcionar com 100% de altura */

.owl-prev,
.owl-next {
    font-size: 2rem;
    color: #333;
    cursor: pointer;
}

/* ------------Blog_post-------------- */
/* Seção de Artigos Relacionados */
.related-posts {
    margin-top: 40px;
    /* Espaçamento acima da seção */
    padding: 20px 0;
    border-top: 1px solid var(--border-color, #e2e8f0);
    /* Linha divisória sutil */
}

.related-posts h3 {
    font-size: 1.8rem;
    color: var(--text-dark);
    margin-bottom: 25px;
    text-align: center;
}

/* Grid para os cards relacionados */
.related-posts-grid {
    display: grid;
    /* Define colunas responsivas: mínimo de 280px, máximo de 1 fração do espaço disponível */
    grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));
    gap: 25px;
    /* Espaçamento entre os cards */
    align-items: stretch;
    /* Essencial: faz com que os itens do grid (cards) estiquem para a altura da célula mais alta */
}

/* Estilo individual do card relacionado */
.related-post-card {
    display: flex;
    /* Transforma o card em um contêiner flexível */
    flex-direction: column;
    /* Organiza os itens (imagem e conteúdo) verticalmente */
    height: 100%;
    /* Faz o card ocupar 100% da altura disponível no item do grid */
    background: white;
    border-radius: 12px;
    box-shadow: 0 4px 15px rgba(0, 0, 0, 0.08);
    /* Sombra mais suave */
    overflow: hidden;
    /* Garante que a imagem com border-radius não "vaze" */
    text-decoration: none;
    /* Remove sublinhado do link */
    color: inherit;
    /* Herda a cor do texto padrão */
    transition: transform 0.3s ease, box-shadow 0.3s ease;
    width: 400px;
}

.related-post-card:hover {
    transform: translateY(-5px);
    /* Efeito de elevação sutil ao passar o mouse */
    box-shadow: 0 8px 25px rgba(0, 0, 0, 0.12);
    /* Sombra mais pronunciada no hover */
}

/* Imagem do card relacionado */
.related-post-image {
    width: 100%;
    height: 160px;
    /* Altura fixa para a imagem para uniformidade visual */
    object-fit: cover;
    /* Garante que a imagem cubra a área sem distorcer */
    display: block;
    /* Remove o espaço extra abaixo da imagem */
}

/* Conteúdo textual do card relacionado */
.related-post-content {
    padding: 15px;
    display: flex;
    /* Transforma o conteúdo em um contêiner flexível */
    flex-direction: column;
    /* Organiza título e resumo verticalmente */
    flex-grow: 1;
    /* Permite que o conteúdo cresça e preencha o espaço restante no card */
}

.related-post-title {
    font-size: 1.15rem;
    font-weight: 600;
    color: var(--text-dark);
    margin-bottom: 8px;
    line-height: 1.4;
}

.related-post-excerpt {
    font-size: 0.95rem;
    color: var(--text-light);
    line-height: 1.5;
    flex-grow: 1;
    /* Essencial: faz o resumo crescer e ocupar o espaço, empurrando o restante do conteúdo (se houver) */
    margin-bottom: 0;
    /* Remove margem inferior para evitar espaçamento indesejado */
}

/* Media Queries para responsividade */
@media (max-width: 768px) {
    .related-posts h3 {
        font-size: 1.5rem;
    }

    .related-posts-grid {
        grid-template-columns: repeat(auto-fit, minmax(250px, 1fr));
        /* Ajusta o min-width em telas menores */
        gap: 20px;
    }

    .related-post-card {
        display: flex;
        /* Transforma o card em um contêiner flexível */
        flex-direction: column;
        /* Organiza os itens (imagem e conteúdo) verticalmente */
        height: 100%;
        /* Faz o card ocupar 100% da altura disponível no item do grid */
        background: white;
        border-radius: 12px;
        box-shadow: 0 4px 15px rgba(0, 0, 0, 0.08);
        /* Sombra mais suave */
        overflow: hidden;
        /* Garante que a imagem com border-radius não "vaze" */
        text-decoration: none;
        /* Remove sublinhado do link */
        color: inherit;
        /* Herda a cor do texto padrão */
        transition: transform 0.3s ease, box-shadow 0.3s ease;
        width: 350px;
    }
}

@media (max-width: 480px) {
    .related-posts h3 {
        font-size: 1.3rem;
    }

    .related-posts-grid {
        grid-template-columns: 1fr;
        /* Uma coluna em telas muito pequenas */
    }
}

/* ----------------------------- */

/* FAQ Section */
.faq {
    padding: 80px 0;
    background: white;
}

.faq-container {
    max-width: 800px;
    margin: 0 auto;
}

.faq-item {
    border: 1px solid var(--border-color);
    border-radius: 8px;
    margin-bottom: 1rem;
    overflow: hidden;
}

.faq-question {
    padding: 1.5rem;
    background: var(--bg-light);
    cursor: pointer;
    display: flex;
    justify-content: space-between;
    align-items: center;
    transition: background 0.3s ease;
}

.faq-question:hover {
    background: #e2e8f0;
}

.faq-question h3 {
    font-size: 1.125rem;
    font-weight: 600;
    color: var(--text-dark);
}

.faq-question i {
    color: var(--primary-color);
    transition: transform 0.3s ease;
}

.faq-item.active .faq-question i {
    transform: rotate(45deg);
}

.faq-answer {
    padding: 0 1.5rem;
    max-height: 0;
    overflow: hidden;
    transition: all 0.3s ease;
}

.faq-item.active .faq-answer {
    padding: 1.5rem;
    max-height: 200px;
}

.faq-answer p {
    color: var(--text-light);
    line-height: 1.6;
}

/* Contact Section */
.contact {
    padding: 80px 0;
    background: var(--bg-light);
}

.contact-content {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 4rem;
}

.contact-item {
    display: flex;
    align-items: center;
    gap: 1rem;
    margin-bottom: 2rem;
}

.contact-icon {
    width: 60px;
    height: 60px;
    background: var(--gradient-primary);
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    color: white;
    font-size: 1.25rem;
}

.contact-details h3 {
    font-weight: 600;
    color: var(--text-dark);
    margin-bottom: 0.25rem;
}

.contact-details p {
    color: var(--text-light);
}

.social-links {
    margin-top: 2rem;
}

.social-links h3 {
    margin-bottom: 1rem;
    color: var(--text-dark);
}

.social-icons {
    display: flex;
    gap: 1rem;
}

.social-link {
    width: 50px;
    height: 50px;
    background: var(--gradient-primary);
    color: white;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    text-decoration: none;
    transition: all 0.3s ease;
}

.social-link:hover {
    background: var(--primary-dark);
    transform: translateY(-2px);
}

.contact-cta {
    display: flex;
    flex-direction: column;
    gap: 2rem;
}

.cta-card {
    background: white;
    padding: 2.5rem;
    border-radius: 20px;
    box-shadow: var(--shadow-md);
    text-align: center;
    transition: all 0.3s ease;
    border: 1px solid rgba(0, 0, 0, 0.05);
}

.cta-card:hover {
    transform: translateY(-5px);
    box-shadow: var(--shadow-xl);
}

.cta-icon {
    width: 70px;
    height: 70px;
    background: var(--gradient-primary);
    color: white;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 2rem;
    margin: 0 auto 1.5rem;
}

.cta-card h3 {
    font-size: 1.5rem;
    color: var(--text-dark);
    margin-bottom: 1rem;
    font-weight: 700;
}

.cta-card p {
    color: var(--text-light);
    margin-bottom: 2rem;
    line-height: 1.6;
}

.cta-card .btn {
    width: 100%;
    justify-content: center;
}

.form-group {
    margin-bottom: 1.5rem;
}

.form-group input,
.form-group select,
.form-group textarea {
    width: 100%;
    padding: 12px 16px;
    border: 1px solid var(--border-color);
    border-radius: 8px;
    font-size: 1rem;
    transition: border-color 0.3s ease;
}

.form-group input:focus,
.form-group select:focus,
.form-group textarea:focus {
    outline: none;
    border-color: var(--primary-color);
}

.form-group textarea {
    resize: vertical;
    min-height: 120px;
}

/* Footer */
.footer {
    background: var(--text-dark);
    color: white;
    padding: 60px 0 20px;
}

.footer-content {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(250px, 1fr));
    gap: 2rem;
    margin-bottom: 2rem;
}

.footer-section h3,
.footer-section h4 {
    margin-bottom: 1rem;
    color: white;
}

.footer-section p {
    color: #94a3b8;
    line-height: 1.6;
    margin-bottom: 1rem;
}

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

.footer-section ul li {
    margin-bottom: 0.5rem;
}

.footer-section ul li a {
    color: #94a3b8;
    text-decoration: none;
    transition: color 0.3s ease;
}

.footer-section ul li a:hover {
    color: white;
}

.footer-section ul li i {
    margin-right: 0.5rem;
    color: var(--primary-color);
}

.footer-social {
    display: flex;
    gap: 1rem;
    margin-top: 1rem;
}

.footer-bottom {
    border-top: 1px solid #374151;
    padding-top: 2rem;
    text-align: center;
    color: #94a3b8;
}

h2 {
    text-align: center;
    margin-bottom: 20px;
}

/* Responsive Design */
@media (max-width: 768px) {
    .nav-menu {
        position: fixed;
        left: -100%;
        top: 70px;
        flex-direction: column;
        background-color: white;
        width: 100%;
        text-align: center;
        transition: 0.3s;
        box-shadow: var(--shadow-md);
        padding: 2rem 0;
    }

    .nav-menu.active {
        left: 0;
    }

    .hamburger {
        display: flex;
    }

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

    .hamburger.active .bar:nth-child(1) {
        transform: translateY(8px) rotate(45deg);
    }

    .hamburger.active .bar:nth-child(3) {
        transform: translateY(-8px) rotate(-45deg);
    }

    .hero-container {
        grid-template-columns: 1fr;
        /* 🔥 Empilha os elementos */
        text-align: center;
        gap: 2rem;
    }

    .hero-title {
        font-size: 2.5rem;
    }

    .hero-subtitle {
        font-size: 1.1rem;
    }

    .hero-image img {
        width: 100%;
        max-width: 400px;
        height: auto;
        margin: 0 auto;
    }

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

    .section-title {
        font-size: 2rem;
    }

    .pricing-price {
        font-size: 1.8rem;
    }


    .about-content {
        grid-template-columns: 1fr;
    }

    .about-text h2 {
        text-align: center;
    }

    .about-image {
        display: none;
    }

    .mobile-about-hero-img {
        display: block;
        width: 100%;
        max-width: 280px;
        margin: 0 auto 1.5rem;
        height: auto;
        border-radius: 20px;
        box-shadow: -15px 15px 0px rgba(0, 0, 0, 0.15);
    }

    .contact-content {
        grid-template-columns: 1fr;
    }

    .testimonials .section-title {
        font-size: 2rem;
    }

    .testimonials-slider {
        gap: 1rem;
    }

    .testimonial-author {
        flex-direction: column;
        gap: 1rem;
    }

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

    .services-grid {
        grid-template-columns: 1fr;
    }

    .projects-grid {
        grid-template-columns: 1fr;
    }

    .blog-grid {
        grid-template-columns: 1fr;
    }

    .footer-bottom p {
        font-size: 0.9rem;
    }
}

@media (max-width: 480px) {
    .container {
        padding: 0 15px;
    }

    .hero {
        padding: 100px 0 60px;
    }

    .hero-title {
        font-size: 2rem;
    }

    .hero-subtitle {
        font-size: 1rem;
    }

    .section-title {
        font-size: 1.75rem;
    }

    .testimonial-card {
        padding: 2rem 1.5rem;
    }

    .contact-form {
        padding: 1.5rem;
    }

    .btn-personalizado {
        width: 100%;
        max-width: 320px;
        white-space: normal;
        display: inline-flex;
        align-items: center;
        justify-content: center;
        padding: 14px 20px;
        line-height: 1.4;
    }

    .btn-personalizado .desktop-text {
        display: none;
    }

    .btn-personalizado .mobile-text {
        display: inline;
    }

    .btn-personalizado i.fab.fa-whatsapp {
        font-size: 1.8rem;
        margin-right: 10px;
    }
}

/* Animações */
@keyframes fadeInUp {
    from {
        opacity: 0;
        transform: translateY(30px);
    }

    to {
        opacity: 1;
        transform: translateY(0);
    }
}

.fade-in-up {
    animation: fadeInUp 0.6s ease forwards;
}

/* Scroll animations */
.scroll-animate {
    opacity: 0;
    transform: translateY(30px);
    transition: all 0.6s ease;
}

.scroll-animate.animate {
    opacity: 1;
    transform: translateY(0);
}

/* Loading states */
.loading {
    opacity: 0.7;
    pointer-events: none;
}

/* Hover effects */
.hover-lift {
    transition: transform 0.3s ease;
}

.hover-lift:hover {
    transform: translateY(-5px);
}

/* Focus states */
.focus-visible {
    outline: 2px solid var(--primary-color);
    outline-offset: 2px;
}

/* Lightbox Modal */
.lightbox-modal {
    display: none;
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background: rgba(0, 0, 0, 0.9);
    z-index: 2000;
    justify-content: center;
    align-items: flex-start;
    overflow-y: auto;
    padding: 20px;
    backdrop-filter: blur(10px);
}

.lightbox-modal.active {
    display: flex;
    animation: fadeIn 0.3s ease;
}

.lightbox-content {
    position: relative;
    max-width: 1000px;
    width: 100%;
    margin-top: 40px;
    margin-bottom: 40px;
}

.lightbox-content img {
    width: 100%;
    height: auto;
    border-radius: 8px;
    box-shadow: 0 0 30px rgba(0, 0, 0, 0.5);
}

.lightbox-close {
    position: fixed;
    top: 20px;
    right: 20px;
    color: white;
    font-size: 2.5rem;
    cursor: pointer;
    z-index: 2001;
    transition: transform 0.3s ease;
}

.lightbox-close:hover {
    transform: scale(1.1) rotate(90deg);
}

@keyframes fadeIn {
    from {
        opacity: 0;
    }

    to {
        opacity: 1;
    }
}

@media (max-width: 768px) {
    .lightbox-modal {
        padding: 10px;
    }

    .lightbox-content {
        margin-top: 60px;
    }
}

/* WordPress Style Blog Grid (New) */
.blog-grid-container {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(320px, 1fr));
    gap: 2.5rem;
    padding: 2rem 0;
}

/* WP Card Design */
.wp-blog-card {
    background: #fff;
    border-radius: 12px;
    overflow: hidden;
    box-shadow: 0 4px 6px -1px rgba(0, 0, 0, 0.05), 0 2px 4px -1px rgba(0, 0, 0, 0.03);
    border: 1px solid rgba(0, 0, 0, 0.05);
    display: flex;
    flex-direction: column;
    height: 100%;
    transition: all 0.3s ease;
}

.wp-blog-card:hover {
    transform: translateY(-5px);
    box-shadow: 0 20px 25px -5px rgba(0, 0, 0, 0.05), 0 10px 10px -5px rgba(0, 0, 0, 0.01);
}

/* Image Wrapper with Zoom Effect */
.wp-card-image-wrapper {
    position: relative;
    overflow: hidden;
    height: 240px;
}

.wp-post-image {
    width: 100%;
    height: 100%;
    object-fit: cover;
    transition: transform 0.5s ease;
}

.wp-blog-card:hover .wp-post-image {
    transform: scale(1.05);
}

/* Floating Category Badge */
.wp-category-badge {
    position: absolute;
    top: 15px;
    left: 15px;
    background: linear-gradient(135deg, #3b82f6 0%, #2563eb 100%);
    color: #fff;
    font-size: 0.75rem;
    font-weight: 600;
    text-transform: uppercase;
    padding: 6px 14px;
    border-radius: 4px;
    letter-spacing: 0.5px;
    box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1);
    z-index: 2;
}

/* Content Area */
.wp-card-content {
    padding: 1.5rem 2rem;
    display: flex;
    flex-direction: column;
    flex-grow: 1;
}

/* Meta Data (Date & Time) */
.wp-meta-top {
    display: flex;
    gap: 15px;
    margin-bottom: 12px;
    font-size: 0.8rem;
    color: #6b7280;
    font-weight: 500;
}

.wp-meta-top i {
    color: #3b82f6;
    margin-right: 5px;
}

/* Title */
.wp-post-title {
    margin: 0 0 1rem;
    font-size: 1.25rem;
    line-height: 1.4;
    font-weight: 700;
}

.wp-post-title a {
    color: #111827;
    text-decoration: none;
    transition: color 0.2s;
    background-image: linear-gradient(to right, #2563eb, #2563eb);
    background-size: 0% 2px;
    background-repeat: no-repeat;
    background-position: left bottom;
    padding-bottom: 2px;
    transition: all 0.3s ease;
}

.wp-blog-card:hover .wp-post-title a {
    color: #2563eb;
    background-size: 100% 2px;
}

/* Excerpt */
.wp-post-excerpt {
    color: #4b5563;
    font-size: 0.95rem;
    line-height: 1.6;
    margin-bottom: 1.5rem;
    display: -webkit-box;
    -webkit-line-clamp: 3;
    line-clamp: 3;
    -webkit-box-orient: vertical;
    overflow: hidden;
    flex-grow: 1;
}

/* Footer (Author & Read More) */
.wp-card-footer {
    padding-top: 1rem;
    border-top: 1px solid #f3f4f6;
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-top: auto;
}

.wp-author {
    display: flex;
    align-items: center;
    gap: 8px;
    font-size: 0.85rem;
    color: #374151;
    font-weight: 600;
}

.wp-author i {
    font-size: 1.5rem;
    color: #cbd5e1;
}

/* Buttons */
.wp-pagination-wrapper {
    text-align: center;
    margin-top: 3rem;
}

.btn-wp-load-more {
    display: inline-block;
    padding: 12px 32px;
    background: transparent;
    color: #2563eb;
    border: 2px solid #2563eb;
    border-radius: 50px;
    font-weight: 600;
    text-decoration: none;
    transition: all 0.3s ease;
    text-transform: uppercase;
    font-size: 0.85rem;
    letter-spacing: 1px;
}

.btn-wp-load-more:hover {
    background: #2563eb;
    color: white;
    transform: translateY(-2px);
    box-shadow: 0 4px 12px rgba(37, 99, 235, 0.2);
}

.wp-read-more {
    font-size: 0.85rem;
    font-weight: 600;
    color: #2563eb;
    text-decoration: none;
    display: flex;
    align-items: center;
    gap: 5px;
    transition: gap 0.2s;
}

.wp-read-more:hover {
    gap: 8px;
    text-decoration: underline;
}

/* ========================================= */
/*       BLOG READING PAGE (Modern UX)       */
/* ========================================= */

.blog-reading-mode {
    background-color: #f9fafb;
    /* Off-white background for eye comfort */
    color: #374151;
    /* Gray-700 */
    font-family: 'Inter', sans-serif;
}

/* --- Navbar Simples --- */
.blog-navbar {
    background: #fff;
    border-bottom: 1px solid #e5e7eb;
    padding: 1.25rem 0;
    position: sticky;
    top: 0;
    z-index: 100;
}

.blog-navbar .container {
    display: flex;
    justify-content: space-between;
    align-items: center;
}

.blog-brand {
    font-size: 1.5rem;
    font-weight: 700;
    color: #111827;
    text-decoration: none;
}

.blog-brand .highlight {
    color: #2563eb;
}

.back-link {
    font-size: 0.9rem;
    color: #6b7280;
    text-decoration: none;
    font-weight: 500;
    display: flex;
    align-items: center;
    gap: 8px;
    transition: color 0.2s;
}

.back-link:hover {
    color: #2563eb;
}

/* --- Hero Section --- */
.article-hero {
    padding: 4rem 0 3rem;
    text-align: center;
    background: #f9fafb;
    margin-top: 80px;
    /* Compensate for fixed header */
}

.hero-content {
    max-width: 800px;
    margin: 0 auto;
}

.article-category {
    display: inline-block;
    background: rgba(37, 99, 235, 0.1);
    color: #2563eb;
    font-size: 0.85rem;
    font-weight: 600;
    padding: 6px 16px;
    border-radius: 50px;
    text-transform: uppercase;
    letter-spacing: 1px;
    margin-bottom: 1.5rem;
}

.article-title {
    font-size: 2.75rem;
    line-height: 1.2;
    font-weight: 800;
    color: #111827;
    margin-bottom: 2rem;
    letter-spacing: -0.02em;
}

/* Meta Data Row */
.article-meta {
    display: flex;
    justify-content: center;
    align-items: center;
    flex-wrap: wrap;
    gap: 2rem;
    color: #6b7280;
    font-size: 0.95rem;
    border-top: 1px solid #e5e7eb;
    padding-top: 2rem;
    border-bottom: 1px solid #e5e7eb;
    padding-bottom: 2rem;
}

.meta-item {
    display: flex;
    align-items: center;
    gap: 10px;
}

.meta-item.author .author-avatar {
    width: 40px;
    height: 40px;
    background: #e0e7ff;
    color: #2563eb;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 1.1rem;
}

.author-text {
    display: flex;
    flex-direction: column;
    text-align: left;
    line-height: 1.2;
}

.author-text .label {
    font-size: 0.75rem;
    text-transform: uppercase;
    letter-spacing: 0.5px;
}

.author-text .value {
    font-weight: 700;
    color: #111827;
}

/* --- Featured Image --- */
/* --- Featured Image --- */
.article-featured-image-container {
    max-width: 800px;
    /* Reduced from 1000px */
    margin: -1rem auto 3rem;
    padding: 0 1rem;
}

.featured-image {
    width: 100%;
    height: auto;
    max-height: 450px;
    /* Limit height */
    object-fit: cover;
    /* Cover */
    border-radius: 16px;
    box-shadow: 0 10px 40px rgba(0, 0, 0, 0.08);
}

/* --- Content Typography --- */
.article-main {
    background: #fff;
    padding-bottom: 4rem;
}

.article-container {
    max-width: 740px;
    margin: 0 auto;
    padding: 0 20px;
    /* Ensure padding on mobile */
}

/* Mobile Responsiveness for Blog Post */
@media (max-width: 768px) {
    .article-hero {
        padding: 2.5rem 0 1.5rem;
        margin-top: 70px;
        /* Adjusted context for mobile header */
    }

    .article-title {
        font-size: 1.85rem;
        padding: 0 1rem;
        line-height: 1.3;
        margin-bottom: 1.5rem;
    }

    .article-category {
        font-size: 0.75rem;
        padding: 4px 12px;
        margin-bottom: 1rem;
    }

    .article-meta {
        flex-direction: column;
        gap: 1.25rem;
        padding: 1.5rem 0;
        margin: 0 1rem;
    }

    .meta-item {
        width: 100%;
        justify-content: center;
    }

    .article-featured-image-container {
        margin: 0 auto 2rem;
        padding: 0 15px;
    }

    .featured-image {
        border-radius: 12px;
        max-height: 300px;
    }

    .article-content {
        font-size: 1.05rem;
        line-height: 1.7;
        margin-top: 1.5rem;
        text-align: left;
        /* Force left alignment for readability */
    }

    .article-content ul,
    .article-content ol {
        padding-left: 1.25rem;
        margin-bottom: 1.5rem;
        text-align: left;
    }

    .article-content li {
        margin-bottom: 0.75rem;
        padding-left: 0.5rem;
    }

    .article-content p {
        margin-bottom: 1.5rem;
    }

    .article-content h2 {
        font-size: 1.5rem;
        margin-top: 2rem;
    }

    .article-content h3 {
        font-size: 1.3rem;
        margin-top: 1.75rem;
    }

    .article-content blockquote {
        margin: 1.5rem 0;
        padding: 1.25rem;
        font-size: 1.1rem;
        border-left-width: 3px;
    }

    .article-tags {
        margin-top: 3rem;
        padding-top: 1.5rem;
    }

    .article-share {
        flex-wrap: wrap;
        justify-content: center;
        gap: 10px;
        margin-top: 1.5rem;
    }

    .share-label {
        width: 100%;
        text-align: center;
        margin-bottom: 0.5rem;
    }

    /* Related Section Mobile */
    .related-articles-section {
        padding: 3rem 0;
    }

    .section-heading {
        font-size: 1.5rem;
        margin-bottom: 2rem;
    }

    .related-grid {
        gap: 1.5rem;
        padding: 0 15px;
    }

    .related-card {
        max-width: 100%;
    }

    .related-image-wrapper {
        height: 180px;
    }

    /* Blog Footer Mobile */
    .blog-footer {
        padding: 1.5rem 0;
        text-align: center;
    }
}

.article-content {
    font-family: 'Merriweather', serif;
    /* Serif for long form reading */
    font-size: 1.125rem;
    /* 18px base size */
    line-height: 1.8;
    color: #374151;
    margin-top: 3rem;
    text-align: left;
    /* Base alignment */
}

.article-content p {
    margin-bottom: 2rem;
}

.article-content ul,
.article-content ol {
    margin-bottom: 2rem;
    padding-left: 1.5rem;
}

.article-content li {
    margin-bottom: 1rem;
}

.article-content h2 {
    font-family: 'Inter', sans-serif;
    font-size: 1.8rem;
    font-weight: 700;
    color: #111827;
    margin-top: 3rem;
    margin-bottom: 1rem;
}

.article-content h3 {
    font-family: 'Inter', sans-serif;
    font-size: 1.5rem;
    font-weight: 600;
    color: #1f2937;
    margin-top: 2.5rem;
    margin-bottom: 1rem;
}

.article-content blockquote {
    border-left: 4px solid #2563eb;
    padding-left: 1.5rem;
    margin: 2.5rem 0;
    color: #1f2937;
    font-style: italic;
    font-size: 1.25rem;
    background: #f9fafb;
    padding: 2rem;
    border-radius: 0 12px 12px 0;
}

.article-content img {
    max-width: 100%;
    border-radius: 8px;
    margin: 2rem 0;
}

/* Tags */
.article-tags {
    margin-top: 4rem;
    padding-top: 2rem;
    border-top: 1px solid #e5e7eb;
}

.article-tags h3 {
    font-size: 1rem;
    color: #111827;
    margin-bottom: 1rem;
}

.tags-list {
    display: flex;
    flex-wrap: wrap;
    gap: 10px;
}

.tag-pill {
    background: #f3f4f6;
    color: #4b5563;
    padding: 6px 14px;
    border-radius: 50px;
    text-decoration: none;
    font-size: 0.85rem;
    font-weight: 500;
    transition: all 0.2s;
}

.tag-pill:hover {
    background: #2563eb;
    color: #fff;
}

/* Share Buttons */
.article-share {
    margin-top: 2rem;
    display: flex;
    align-items: center;
    gap: 15px;
}

.share-label {
    font-weight: 600;
    color: #111827;
}

.share-btn {
    width: 40px;
    height: 40px;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    color: #fff;
    text-decoration: none;
    transition: transform 0.2s;
}

.share-btn:hover {
    transform: translateY(-3px);
}

.share-btn.twitter {
    background: #1DA1F2;
}

.share-btn.facebook {
    background: #4267B2;
}

.share-btn.linkedin {
    background: #0077b5;
}

.share-btn.whatsapp {
    background: #25D366;
}

/* --- Related Posts --- */
.related-articles-section {
    background: #f9fafb;
    padding: 5rem 0;
}

.section-heading {
    font-size: 1.75rem;
    font-weight: 700;
    color: #111827;
    margin-bottom: 2.5rem;
    text-align: center;
}

.related-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(300px, 1fr));
    gap: 2rem;
}

.related-card {
    background: #fff;
    border-radius: 12px;
    overflow: hidden;
    box-shadow: 0 4px 6px -1px rgba(0, 0, 0, 0.05);
    text-decoration: none;
    transition: transform 0.3s;
    height: 100%;
    display: flex;
    flex-direction: column;
}

.related-card:hover {
    transform: translateY(-5px);
}

.related-image-wrapper {
    height: 200px;
    overflow: hidden;
}

.related-image-wrapper img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    transition: transform 0.5s;
}

.related-card:hover img {
    transform: scale(1.05);
}

.related-content {
    padding: 1.5rem;
}

.related-cat {
    font-size: 0.75rem;
    color: #2563eb;
    text-transform: uppercase;
    font-weight: 700;
    display: block;
    margin-bottom: 0.5rem;
}

.related-content h3 {
    font-size: 1.15rem;
    color: #111827;
    font-weight: 700;
    line-height: 1.4;
    margin: 0;
}

/* Footer Article */
.blog-footer {
    background: #fff;
    border-top: 1px solid #e5e7eb;
    padding: 2rem 0;
    text-align: center;
    color: #6b7280;
    font-size: 0.9rem;
}

/* Mobile Responsiveness */
@media (max-width: 768px) {
    .article-title {
        font-size: 2rem;
    }

    .article-meta {
        gap: 1rem;
        flex-direction: column;
        align-items: center;
    }

    .article-content {
        font-size: 1.05rem;
    }
}

/* Botão Voltar Vazado (Header Blog) */
.btn-voltar-header {
    text-decoration: none;
    color: #2563eb;
    /* Blue text */
    font-weight: 600;
    font-size: 1rem;
    transition: all 0.3s ease;
    padding: 8px 28px;
    white-space: nowrap;
    display: flex;
    align-items: center;
    border: 2px solid #2563eb;
    /* Blue Border */
    border-radius: 50px;
    background-color: transparent;
    margin-left: 3rem;
}

.btn-voltar-header:hover {
    background-color: #2563eb;
    color: white;
    transform: translateY(-2px);
    box-shadow: 0 4px 12px rgba(37, 99, 235, 0.3);
}

/* Responsividade para o botão Voltar */
@media (max-width: 768px) {
    .btn-voltar-header {
        margin-left: 0;
        margin-top: 1rem;
        display: inline-block;
        text-align: center;
    }
}