/* ============================================================
   MOOLD LAB — ESTILOS GLOBAIS
   style.css
   ============================================================

   ÍNDICE
   ──────────────────────────────────────────────────────────
   01. Fonte & Variáveis
   02. Reset
   03. Utilitários
   04. Grid & Containers
   05. Animações Globais (@keyframes)
   06. Máscara de Palavras
   07. Animações de Scroll
   08. Botões (.btn-outline · .btn-demo · .btn-icon)
   09. Header & Navegação
   10. Seção 1 — Hero
   11. Seção 2 — Sobre a Agência
   12. Seção 3 — Como Fazemos
   13. Seção 4 — Promessas
   14. Seção 5 — Nossos Serviços
   15. Seção 6 — Entregamos Resultados
   16. Seção 7 — Macbook / App
   17. Seção 8 — CTA Final
   18. Rodapé
   19. Mobile — Header & Drawer      (≤ 768px)
   20. Mobile — Seção 1 Hero         (≤ 768px)
   21. Mobile — Seção 2 Sobre        (≤ 768px)
   22. Mobile — Seção 3 Como Fazemos (≤ 768px)
   23. Mobile — Seção 4 Promessas    (≤ 768px)
   24. Mobile — Seção 5 Serviços     (≤ 768px)
   25. Mobile — Seção 6 Resultados   (≤ 768px)
   26. Mobile — Seção 7 Macbook      (≤ 768px)
   27. Mobile — Seção 8 CTA Final    (≤ 768px)
   28. Mobile — Rodapé               (≤ 768px)
   29. Mobile — Botões               (≤ 768px)
   30. Mobile — Ajustes finos        (≤ 480px)
   ──────────────────────────────────────────────────────────
*/


/* ============================================================
   01. FONTE & VARIÁVEIS
   ============================================================ */

/* Fonte Regular (Peso 400) */
@font-face {
    font-family: 'Creato Display';
    src: url('assets/creato_display/CreatoDisplay-Regular.otf') format('opentype');
    font-weight: 400;
    font-style: normal;
}

/* Fonte Medium (Peso 500) - Usada nos seus títulos */
@font-face {
    font-family: 'Creato Display';
    src: url('assets/creato_display/CreatoDisplay-Medium.otf') format('opentype');
    font-weight: 500;
    font-style: normal;
}

/* Fonte Medium (Peso 600) */
@font-face {
    font-family: 'Creato Display';
    src: url('assets/creato_display/CreatoDisplay-Bold.otf') format('opentype');
    font-weight: 600;
    font-style: normal;
}

:root {
    --bg-dark:    #0c0c0c;
    --text-white: #F2F2F2;
    --text-gray:  #6b6b6b;
    --font-main:  'Creato Display', sans-serif;
}


/* ============================================================
   02. RESET
   ============================================================ */

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

body {
    background-color: var(--bg-dark);
    padding-top: 110px;
    color: var(--text-white);
    font-family: var(--font-main);
    overflow-x: hidden;
}


/* ============================================================
   03. UTILITÁRIOS
   ============================================================ */

.text-light { color: #cccccc; }
.text-dark  { color: #0C0C0C; }

/* Quebra de linha visível apenas no mobile */
.quebra-mobile { display: none; }


/* ============================================================
   04. GRID & CONTAINERS
   ============================================================ */

/*
 * 1ª coluna: 50% da tela + 70px
 * 2ª coluna começa exatamente 70px à direita do centro
 */
.grid-layout {
    display: grid;
    grid-template-columns: calc(50vw + 70px) 1fr;
    width: 100vw;
}

.container-fixo {
    width: 100%;
    max-width: 1200px;
    margin: 0 auto;
    padding: 0 40px;
}

.container-largo {
    width: 100%;
    max-width: 1500px;
    margin: 0 auto;
    padding: 0 60px;
}


/* ============================================================
   05. ANIMAÇÕES GLOBAIS (@keyframes)
   ============================================================ */

@keyframes fadeUpReveal {
    0%   { opacity: 0; transform: translateY(20px); }
    100% { opacity: 1; transform: translateY(0); }
}

@keyframes fadeInSlow {
    0%   { opacity: 0; }
    100% { opacity: 1; }
}

@keyframes maskRevealWord {
    0%   { transform: translateY(110%); }
    100% { transform: translateY(0); }
}

@keyframes bgRevealOnLoad {
    0%   { opacity: 0; transform: translateY(60px); }
    100% { opacity: 1; transform: translateY(0); }
}

@keyframes blink {
    0%, 100% { opacity: 1; }
    50%       { opacity: 0; }
}


/* ============================================================
   06. MÁSCARA DE PALAVRAS (animação de entrada — Hero)
   ============================================================ */

.mask {
    display: inline-flex;
    overflow: hidden;
    vertical-align: top;
    padding-bottom: 8px;
    margin-bottom: -8px;
}

.reveal {
    display: inline-block;
    transform: translateY(110%);
    animation: maskRevealWord 1.2s cubic-bezier(0.16, 1, 0.3, 1) forwards;
}


/* ============================================================
   07. ANIMAÇÕES DE SCROLL (ativadas por JS via .visible)
   ============================================================ */

/* Slide-up genérico */
.scroll-reveal {
    opacity: 0;
    transform: translateY(100px);
    transition: opacity 2s cubic-bezier(0.16, 1, 0.3, 1),
                transform 2s cubic-bezier(0.16, 1, 0.3, 1);
}

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

/* Texto que sobe de dentro da máscara */
.reveal-scroll {
    display: inline-block;
    transform: translateY(110%);
    transition: transform 0.8s cubic-bezier(0.16, 1, 0.3, 1);
}

.scroll-reveal.visible .reveal-scroll { transform: translateY(0); }

/* Animação de palavras individuais — Seção 6 */
.word-mask {
    display: inline-block;
    overflow: hidden;
    vertical-align: bottom;
}

.word-up {
    display: inline-block;
    transform: translateY(110%);
    transition: transform 0.6s cubic-bezier(0.16, 1, 0.3, 1);
}

.word-up.visible { transform: translateY(0); }


/* ============================================================
   08. BOTÕES
   ============================================================ */

/* --- .btn-outline (borda cinza, fundo transparente) --- */

.btn-outline {
    display: inline-flex;
    align-items: center;
    gap: 14px;
    border: 1px solid var(--text-gray);
    border-radius: 3px;
    color: var(--text-white);
    background-color: transparent;
    padding: 16px 34px;
    font-size: 16px;
    font-family: inherit;
    text-decoration: none;
    width: fit-content;
    cursor: pointer;
    position: relative;
    overflow: hidden;
    z-index: 1;
    transition: color 0.4s ease;
}

/* Fundo que preenche da esquerda para direita no hover */
.btn-outline::before {
    content: '';
    position: absolute;
    top: 0; left: 0;
    width: 0%;
    height: 100%;
    background-color: var(--text-white);
    transition: width 0.4s ease;
    z-index: -1;
}

.btn-outline:hover::before { width: 100%; }
.btn-outline:hover          { color: var(--bg-dark); }

.btn-outline img {
    width: 12px;
    height: 12px;
    transition: filter 0.4s ease;
}

.btn-outline:hover img { filter: invert(1); }

/* Variante escura — Seções 5 e 6 */
.btn-outline.dark-btn {
    border-color: #0c0c0c;
    color: #0c0c0c;
}

.btn-outline.dark-btn img          { filter: brightness(0); }
.btn-outline.dark-btn::before      { background-color: #0c0c0c; }
.btn-outline.dark-btn:hover        { color: #f2f2f2; }
.btn-outline.dark-btn:hover img    { filter: brightness(0) invert(1); }

/* --- .btn-demo (borda branca, fundo transparente — Seções 7 e 8) --- */

.btn-demo {
    display: inline-flex;
    align-items: center;
    gap: 14px;
    border: 1px solid #f2f2f2;
    border-radius: 3px;
    color: #FFFFFF;
    background-color: transparent;
    padding: 16px 34px;
    font-size: 16px;
    font-family: inherit;
    text-decoration: none;
    cursor: pointer;
    position: relative;
    overflow: hidden;
    z-index: 1;
    transition: color 0.4s ease;
    pointer-events: auto;
}

.btn-demo::before {
    content: '';
    position: absolute;
    top: 0; left: 0;
    width: 0%;
    height: 100%;
    background-color: #FFFFFF;
    transition: width 0.4s ease;
    z-index: -1;
}

.btn-demo:hover::before { width: 100%; }
.btn-demo:hover         { color: #0c0c0c; }

/* --- Ícone SVG compartilhado pelos dois botões --- */

.btn-icon {
    width: 12px;
    height: 12px;
    transition: filter 0.4s ease;
}

.btn-demo:hover .btn-icon { filter: invert(1); }


/* ============================================================
   09. HEADER & NAVEGAÇÃO
   ============================================================ */

.header {
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 90px;
    z-index: 1000;
    align-items: center;
    background: rgba(12, 12, 12, 0.2);
    backdrop-filter: blur(12px);
    -webkit-backdrop-filter: blur(12px);
    border-bottom: 1px solid rgba(255, 255, 255, 0.05);
    transition: transform 1.3s cubic-bezier(0.16, 1, 0.3, 1);
}

/* JS usa essa classe para esconder o header no scroll */
.header-hidden { transform: translateY(-100%); }

.logo-wrapper {
    grid-column: 1;
    padding-left: 50px;
    display: flex;
    align-items: center;
}

.logo-wrapper img { height: 22px; }

.nav-wrapper {
    grid-column: 2;
    display: flex;
    align-items: center;
}

.navbar { display: flex; gap: 60px; }

.navbar a {
    color: var(--text-white);
    text-decoration: none;
    font-size: 16px;
    font-weight: 400;
    position: relative;
    padding-bottom: 5px;
}

/* Underline no hover */
.navbar a::after {
    content: '';
    position: absolute;
    left: 0; bottom: 0;
    width: 0;
    height: 1px;
    background-color: var(--text-white);
    transition: width 0.3s ease;
}

.navbar a:hover::after { width: 100%; }

/* Hambúrguer — visível apenas no mobile (definido na seção 19) */
.menu-toggle {
    display: none;
    background: transparent;
    border: none;
    cursor: pointer;
    z-index: 2000;
    padding: 0;
    line-height: 1;
}

/* Drawer mobile — visível apenas no mobile (definido na seção 19) */
.mobile-drawer { display: none; }


/* ============================================================
   10. SEÇÃO 1 — HERO
   ============================================================ */

.hero {
    padding-top: 110px;
    padding-bottom: 120px;
    align-content: start;
    position: sticky;
    top: 0;
    z-index: 1;
}

/* Símbolo M — coluna esquerda */
.m-wrapper {
    grid-column: 1;
    grid-row: 3;
    margin-top: -60px;
    opacity: 0;
    animation: fadeInSlow 2s ease-out forwards;
    animation-delay: 0.8s;
}

.m-wrapper img {
    margin-left: 50px;
    max-width: 80%;
    height: auto;
    display: block;
}

/* Textos — coluna direita */
.h2-wrapper { grid-column: 2; grid-row: 1; }

.h1-wrapper {
    grid-column: 2;
    grid-row: 2;
    margin-bottom: 80px;
}

.btn-wrapper {
    grid-column: 2;
    grid-row: 3;
    opacity: 0;
    animation: fadeUpReveal 1s cubic-bezier(0.16, 1, 0.3, 1) forwards;
    animation-delay: 1.5s;
}

.subtitle {
    color: var(--text-gray);
    font-size: 2.5rem;
    font-weight: 400;
    line-height: 1.2;
    margin-bottom: 5px;
}

.title {
    color: var(--text-white);
    font-size: 2.5rem;
    font-weight: 500;
    line-height: 1.2;
}


/* ============================================================
   11. SEÇÃO 2 — SOBRE A AGÊNCIA
   ============================================================ */

.sobre-agencia {
    position: relative;
    z-index: 2;
    background-color: var(--bg-dark);
    min-height: 100vh;
    display: flex;
    align-items: center;
    justify-content: center;
    text-align: center;
}

/* Sombra que apaga a Seção 1 */
.sobre-agencia::before {
    content: '';
    position: absolute;
    bottom: 100%;
    left: 0;
    width: 100%;
    height: 250px;
    pointer-events: none;
}

/* Background animado */
.bg-animado {
    position: absolute;
    top: 0; left: 0;
    width: 100%; height: 100%;
    z-index: -1;
    background-image: url('../assets/Background.png');
    background-position: top center;
    background-repeat: no-repeat;
    background-size: 100% auto;
    opacity: 0;
    animation: bgRevealOnLoad 1.5s cubic-bezier(0.16, 1, 0.3, 1) forwards;
    animation-delay: 0.5s;
}

/* Texto de digitação */
.typing-container {
    color: #A5A5A5;
    font-size: 48px;
    line-height: 1.2;
    margin-top: 100px;
    opacity: 0;
    transform: translateY(60px);
    transition: opacity 1.5s cubic-bezier(0.16, 1, 0.3, 1),
                transform 1.5s cubic-bezier(0.16, 1, 0.3, 1);
    transition-delay: 0.2s;
}

.typing-container.visible {
    opacity: 1;
    transform: translateY(0);
}

.typing-container .italic        { font-style: italic; }
.typing-container .dynamic-text  { color: #F2F2F2; }

.typing-container .cursor {
    color: #F2F2F2;
    font-weight: 300;
    animation: blink 1s step-end infinite;
}


/* ============================================================
   12. SEÇÃO 3 — COMO FAZEMOS
   ============================================================ */

.como-fazemos {
    position: relative;
    z-index: 3;
    background-color: var(--bg-dark);
    padding: 120px 0;
    min-height: 100vh;
}

/* Cabeçalho com linhas animadas */
.section-header {
    position: relative;
    margin-bottom: 120px;
}

/* Linha fina que percorre 100% */
.section-header::after {
    content: '';
    position: absolute;
    bottom: 0; left: 0;
    width: 100%;
    height: 0.5px;
    background-color: var(--text-white);
    z-index: 1;
    transform: scaleX(0);
    transform-origin: left;
    transition: transform 3s cubic-bezier(0.16, 1, 0.3, 1);
    transition-delay: 0.2s;
}

.section-title {
    font-size: 3.4375rem;
    font-weight: 500;
    color: var(--text-white);
    display: inline-block;
    position: relative;
    padding-bottom: 55px;
    margin-bottom: 0;
}

/* Linha grossa de 3px sob o título */
.section-title::after {
    content: '';
    position: absolute;
    bottom: 0; left: 0;
    width: 100%;
    height: 3px;
    background-color: var(--text-white);
    z-index: 2;
    transform: scaleX(0);
    transform-origin: left;
    transition: transform 3s cubic-bezier(0.16, 1, 0.3, 1);
    transition-delay: 0.2s;
}

/* Ativação pelo JS */
.section-header.visible .reveal-scroll        { transform: translateY(0); }
.section-header.visible::after                { transform: scaleX(1); }
.section-header.visible .section-title::after { transform: scaleX(1); }

/* Grid duas colunas */
.content-grid-s3 {
    display: grid;
    grid-template-columns: 1fr 1.5fr;
    gap: 60px;
    align-items: start;
}

/* Menu de steps — esquerda */
.steps-menu {
    position: relative;
    padding-left: 50px;
}

.square-indicator {
    position: absolute;
    left: 0; top: 0;
    width: 14px; height: 14px;
    background-color: var(--text-white);
    transition: transform 0.3s cubic-bezier(0.16, 1, 0.3, 1);
}

.steps-list {
    list-style: none;
    display: flex;
    flex-direction: column;
    gap: 55px;
}

.step-item {
    font-size: 3.4375rem;
    font-weight: 500;
    color: #3F3F3F;
    cursor: pointer;
    transition: color 0.3s ease;
    line-height: 1;
    margin: 0; padding: 0;
}

.step-item.active { color: var(--text-white); }

/* Conteúdo — direita */
.step-content-wrapper {
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    text-align: left;
    width: 100%;
    transition: opacity 0.5s ease-out;
    opacity: 1;
}

.step-content-wrapper.fade-out { opacity: 0; }

/* Card branco do gráfico */
.step-card {
    background-color: var(--text-white);
    border-radius: 4px;
    width: 100%;
    height: 210px;
    position: relative;
    margin-bottom: 50px;
}

.step-number {
    position: absolute;
    top: 20px; left: 20px;
    font-size: 4rem;
    font-weight: 500;
    color: var(--bg-dark);
    line-height: 1;
    margin: 0;
}

.step-visual {
    position: absolute;
    right: 30px;
    top: 50%;
    transform: translateY(-50%);
}

.step-visual img {
    width: auto;
    height: 150px;
    max-height: 85%;
    display: block;
}

.step-description {
    font-size: 1.3rem;
    font-weight: 400;
    color: #f2f2f2;
    line-height: 1.3;
    margin-bottom: 70px;
    max-width: 80%;
}

/* Animação de entrada do card e botão */
#step-content .step-card,
#step-content .btn-outline {
    opacity: 0;
    transform: translateY(40px);
    transition: opacity 0.8s ease, transform 0.8s cubic-bezier(0.16, 1, 0.3, 1);
}

#step-content .btn-outline { transition-delay: 0.15s; }

#step-content.visible .step-card,
#step-content.visible .btn-outline {
    opacity: 1;
    transform: translateY(0);
}

@media (max-width: 992px) {
    .content-grid-s3 { grid-template-columns: 1fr; }
    .como-fazemos    { padding: 100px 8%; }
    .step-visual     { right: 20px; }
    .step-visual img { width: 150px; }
}


/* ============================================================
   13. SEÇÃO 4 — PROMESSAS
   ============================================================ */

.promessas {
    position: relative;
    z-index: 4;
    background-color: var(--bg-dark);
    padding: 190px 0 280px;
}

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

.promise-card {
    border-radius: 4px;
    padding: 60px;
    display: flex;
    flex-direction: column;
    justify-content: space-between;
    min-height: 550px;
    transition: all 1s cubic-bezier(0.16, 1, 0.3, 1);
    cursor: pointer;
}

.dark-card  { background-color: transparent; border: 0.2px solid #f2f2f2; }
.light-card { background-color: #F2F2F2; }

.promise-text {
    font-size: 2.5rem;
    font-weight: 500;
    line-height: 1.1;
    margin: 0;
    letter-spacing: -0.02em;
}

.dark-card  .promise-text { color: var(--text-white); }
.light-card .promise-text { color: var(--bg-dark); }

/* Máscara SVG com reveal */
.svg-mask-wrapper {
    margin-bottom: 60px;
    clip-path: inset(0 100% 0 0);
    transition: clip-path 3s cubic-bezier(0.16, 1, 0.3, 1);
    transition-delay: 0.3s;
    height: 270px;
    display: flex;
    align-items: flex-end;
}

.svg-mask-wrapper img { width: 100%; height: auto; display: block; }

.scroll-reveal.visible .svg-mask-wrapper { clip-path: inset(0 0 0 0); }

/* Efeito desfoque nos cards vizinhos */
.cards-grid:hover .promise-card {
    opacity: 0.7;
    filter: blur(8px);
    -webkit-filter: blur(3px);
}

.cards-grid .promise-card:hover {
    opacity: 1;
    filter: blur(0px);
    -webkit-filter: blur(0px);
    transform: scale(1.02);
    z-index: 10;
}

@media (max-width: 992px) {
    .cards-grid   { grid-template-columns: 1fr; }
    .promise-card { min-height: 400px; padding: 40px 30px; }
    .promise-text { font-size: 3rem; }
}


/* ============================================================
   14. SEÇÃO 5 — NOSSOS SERVIÇOS
   ============================================================ */

.nossos-servicos {
    position: relative;
    z-index: 5;
    background-color: #F2F2F2;
    padding: 200px 0;
}

.servicos-grid {
    display: grid;
    grid-template-columns: 1fr 1.8fr;
    gap: 80px;
    align-items: start;
}

.section-title-s5 {
    font-size: 4rem;
    font-weight: 500;
    line-height: 1.1;
    margin: 0;
    letter-spacing: -0.02em;
}

#header-s5.visible .reveal-scroll { transform: translateY(0); }

/* Acordeão */
.accordion-list {
    list-style: none;
    padding: 0;
    margin: 0 0 60px;
}

.accordion-item {
    border-top: 1px solid #D1D1D1;
    transition: border-color 0.4s ease;
}

.accordion-item.active { border-top-color: #0C0C0C; }

.accordion-header {
    display: flex;
    align-items: flex-start;
    justify-content: space-between;
    padding: 35px 0;
    cursor: pointer;
    user-select: none;
    transition: padding-bottom 0.5s cubic-bezier(0.16, 1, 0.3, 1);
}

.accordion-item.active .accordion-header { padding-bottom: 55px; }

.accordion-title {
    font-size: 2.7rem;
    line-height: 1;
    font-weight: 400;
    color: #D1D1D1;
    margin: 0;
    transition: color 0.4s ease;
    flex: 0 0 auto;
}

.accordion-item.active .accordion-title { color: #0C0C0C; }

/* Conteúdo expansível */
.accordion-content {
    flex: 1;
    padding: 8px 80px 0 0;
    display: grid;
    grid-template-rows: 0fr;
    transition: grid-template-rows 0.5s cubic-bezier(0.16, 1, 0.3, 1);
}

.accordion-item.active .accordion-content { grid-template-rows: 1fr; }

.accordion-content p {
    min-height: 0;
    display: block;
    margin-left: auto;
    margin-right: 0;
    font-size: 1rem;
    line-height: 1.2;
    color: #0c0c0c;
    max-width: 350px;
    text-align: left;
}

/* Texto animado dentro do acordeão */
.content-text {
    display: inline-block;
    transform: translateY(-110%);
    transition: transform 0.2s cubic-bezier(0.16, 1, 0.3, 1);
}

.accordion-item.active .content-text { transform: translateY(0); }

/* Ícone de seta */
.seta-icon {
    width: 24px; height: 24px;
    margin-top: calc((3rem - 24px) / 2);
    background-image: url('../assets/Seta%20reta.svg');
    background-size: contain;
    background-position: center;
    background-repeat: no-repeat;
    flex: 0 0 auto;
    transition: transform 0.4s cubic-bezier(0.16, 1, 0.3, 1), filter 0.4s ease;
}

.accordion-item.active .seta-icon {
    transform: rotate(180deg);
    filter: brightness(0);
}

@media (max-width: 992px) {
    .container-largo   { padding: 0 8%; }
    .servicos-grid     { grid-template-columns: 1fr; gap: 40px; }
    .accordion-header  { flex-wrap: wrap; padding: 30px 0; }
    .accordion-content { flex: 100%; padding: 20px 0 0; order: 3; }
    .accordion-title   { font-size: 2.2rem; }
}


/* ============================================================
   15. SEÇÃO 6 — ENTREGAMOS RESULTADOS
   ============================================================ */

.entregamos-resultados {
    position: relative;
    z-index: 6;
    background-color: #F2F2F2;
    padding: 250px 0;
    margin-top: -1px;
}

.section-title-s6 {
    font-size: 4rem;
    font-weight: 500;
    line-height: 1.1;
    margin: 0;
    letter-spacing: -0.02em;
    border: none;
    text-decoration: none;
}

/* Remove pseudo-elementos herdados da Seção 3 */
.section-title-s6::before,
.section-title-s6::after {
    content: none !important;
    display: none !important;
}

#header-s6.visible .reveal-scroll { transform: translateY(0); }

.resultados-grid {
    display: grid;
    grid-template-columns: 1fr 1.8fr;
    gap: 80px;
    align-items: stretch;
}

.resultados-esquerda {
    display: flex;
    flex-direction: column;
    justify-content: space-between;
    height: 100%;
}

.resultados-esquerda > div { margin: 0 !important; }

.resultados-texto p {
    font-size: 1.1rem;
    line-height: 1.3;
    color: #0c0c0c;
    max-width: 300px;
    margin: 0;
}

/* Menu de abas */
.tabs-menu {
    list-style: none;
    padding: 0;
    margin: 0 0 60px;
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    border-bottom: 1px solid #D1D1D1;
    position: relative;
}

.tab-item {
    padding: 15px 0;
    font-size: 1.1rem;
    color: #3F3F3F;
    cursor: pointer;
    transition: color 0.3s ease;
    position: relative;
    display: flex;
    justify-content: center;
    align-items: center;
    text-align: center;
}

.tab-item.active { color: #0c0c0c; }

/* Linha indicadora deslizante */
.tab-item::after {
    content: '';
    position: absolute;
    bottom: -1px; left: 0;
    width: 100%;
    height: 2px;
    background-color: #0c0c0c;
    transform-origin: right;
    transform: scaleX(0);
    transition: transform 0.4s cubic-bezier(0.16, 1, 0.3, 1);
}

.tab-item.active::after {
    transform-origin: left;
    transform: scaleX(1);
}

/* Cards de resultado */
.resultado-card {
    background-color: #E6E6E6;
    padding: 25px 30px;
    border-radius: 3px;
    display: flex;
    flex-direction: column;
    justify-content: space-between;
    min-height: 220px;
}

.resultado-card.card-largo { grid-column: 1 / -1; }

.resultado-card h3 {
    font-size: 5.5rem;
    font-weight: 400;
    color: #0c0c0c;
    margin: 0 0 40px;
    line-height: 1;
    letter-spacing: -0.05em;
}

.card-texto p {
    font-size: 1.1rem;
    line-height: 1.3;
    color: #0c0c0c;
    margin: 0;
    max-width: 300px;
}

@media (max-width: 992px) {
    .resultados-grid           { grid-template-columns: 1fr; gap: 60px; }
    .tabs-menu                 { overflow-x: auto; white-space: nowrap; gap: 30px; justify-content: flex-start; }
    .cards-grid                { grid-template-columns: 1fr; }
    .resultado-card.card-largo { grid-column: auto; }
    .resultado-card h3         { font-size: 4rem; }
}


/* ============================================================
   16. SEÇÃO 7 — MACBOOK / APP
   ============================================================ */

.macbook-scroll-track {
    height: 300vh;
    position: relative;
    z-index: 10;
}

.macbook-sticky-container {
    position: sticky;
    top: 0;
    height: 100vh;
    width: 100%;
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    overflow: hidden;
    background: linear-gradient(#191919 2%, #CCCCCC 90%);
    padding-top: 12vh;
    padding-bottom: 4vh;
    box-sizing: border-box;
}

.macbook-content {
    position: relative;
    top: 0;
    width: 100%;
    text-align: center;
    color: #FFFFFF;
    z-index: 2;
    margin-bottom: 2vh;
}

.macbook-content h2 {
    font-size: 3.5rem;
    font-weight: 500;
    line-height: 1;
    margin: 0 0 40px;
    letter-spacing: -0.03em;
}

.macbook-content p {
    font-size: 1.1rem;
    font-weight: 400;
    color: #cccccc;
    line-height: 1.2;
    margin: 0 0 45px;
}

#macbook-canvas {
    width: 100%;
    max-width: 1000px;
    max-height: 55vh;
    object-fit: contain;
    z-index: 1;
}


/* ============================================================
   17. SEÇÃO 8 — CTA FINAL
   ============================================================ */

.final-cta-section {
    background-color: #0c0c0c;
    position: relative;
    z-index: 20;
    padding: 320px 5%;
    display: flex;
    justify-content: center;
}

.final-cta-container {
    display: grid;
    grid-template-columns: 4fr 5.5fr;
    gap: 20px;
    width: 100%;
    max-width: 1200px;
    align-items: stretch;
}

/* Imagem com paralaxe */
.cta-image-wrapper {
    border-radius: 4px;
    overflow: hidden;
    width: 100%;
    height: 100%;
    position: relative;
}

.cta-image-wrapper img {
    width: 100%;
    height: 200%;
    position: absolute;
    top: -79%;
    left: 0;
    object-fit: cover;
    filter: grayscale(100%) contrast(1.1);
    will-change: transform;
}

/* Card */
.cta-card {
    background-color: #1A1A1A;
    border-radius: 5px;
    padding: 40px;
    display: flex;
    flex-direction: column;
    justify-content: space-between;
}

.cta-card h2 {
    font-size: 2.6rem;
    font-weight: 400;
    color: #FFFFFF;
    line-height: 1.1;
    letter-spacing: -0.03em;
    margin: 0;
}

.cta-card-footer {
    display: flex;
    justify-content: space-between;
    align-items: flex-end;
    margin-top: 50px;
}

.cta-card-footer p {
    color: #A0A0A0;
    font-size: 1.2rem;
    line-height: 1.2;
    margin: 0;
}

@media (max-width: 900px) {
    .final-cta-container { grid-template-columns: 1fr; }
    .cta-image-wrapper   { min-height: 300px; }

    .cta-card-footer {
        flex-direction: column;
        align-items: flex-start;
        gap: 30px;
    }
}


/* ============================================================
   18. RODAPÉ
   ============================================================ */

.site-footer {
    background-color: #0c0c0c;
    padding: 0 0 60px;
    width: 100%;
    position: relative;
    z-index: 50;
}

.footer-container {
    width: 92%;
    margin: 0 auto;
    display: flex;
    flex-direction: column;
}

.footer-line {
    width: 100%;
    height: 0.5px;
    background-color: #f2f2f2;
    margin-bottom: 80px;
}

.footer-logo {
    width: 100%;
    margin-bottom: 100px;
}

.footer-logo img { width: 100%; height: auto; display: block; }

.footer-bottom {
    display: flex;
    align-items: center;
    width: 100%;
}

.footer-links { display: flex; gap: 40px; }

.footer-links a {
    color: #f2f2f2;
    text-decoration: none;
    font-size: 0.95rem;
    transition: color 0.4s ease;
    position: relative;
    display: inline-block;
}

.footer-links a:hover { color: #f2f2f2; }

.footer-links a::after {
    content: '';
    position: absolute;
    width: 100%;
    height: 1px;
    bottom: -4px; left: 0;
    background-color: #f2f2f2;
    transform: scaleX(0);
    transform-origin: right;
    transition: transform 0.4s cubic-bezier(0.16, 1, 0.3, 1);
}

.footer-links a:hover::after {
    transform: scaleX(1);
    transform-origin: left;
}

.footer-copy {
    color: #4A4A4A;
    font-size: 0.95rem;
    margin-left: 60px;
}

.footer-btn-container {
    margin-left: auto;
    display: flex;
}

@media (max-width: 900px) {
    .footer-container { width: 90%; }

    .footer-bottom {
        flex-direction: column;
        align-items: flex-start;
        gap: 30px;
    }

    .footer-copy          { margin-left: 0; }
    .footer-btn-container { margin-left: 0; width: 100%; }
}

/* ============================================================
   29. MODAL DE CONTATO (POP-UP) - CÓDIGO COMPLETO
   ============================================================ */

/* 1. O fundo que desfoca o site inteiro */
.modal-overlay {
    position: fixed;
    top: 0;
    left: 0;
    width: 100vw;
    height: 100vh;
    background-color: rgba(0, 0, 0, 0.4);
    backdrop-filter: blur(8px); /* A mágica do desfoque */
    -webkit-backdrop-filter: blur(8px);
    z-index: 99999; /* Fica por cima de tudo no site */
    display: flex;
    justify-content: center;
    align-items: center;
    opacity: 0;
    visibility: hidden;
    transition: opacity 0.3s ease, visibility 0.3s ease;
}

/* Ativa o modal (Controlado pelo JavaScript) */
.modal-overlay.ativo {
    opacity: 1;
    visibility: visible;
}

/* 2. A caixa preta principal do pop-up */
.modal-box {
    background-color: #191919; 
    border-radius: 5px;
    padding: 48px 56px;
    width: 90%;
    max-width: 540px;
    position: relative; 
    transform: translateY(20px);
    transition: transform 0.3s ease;
    font-family: 'Creato Display', sans-serif !important; /* Fonte oficial da agência */
}

/* Faz a caixa subir suavemente quando abre */
.modal-overlay.ativo .modal-box {
    transform: translateY(0); 
}

/* 3. O botão de fechar (X) flutuante */
.fechar-btn {
    position: absolute;
    top: -48px; 
    right: 0;
    background: transparent;
    border: 1px solid #191919;
    border-radius: 50%;
    width: 40px;
    height: 40px;
    display: flex;
    justify-content: center;
    align-items: center;
    color: #191919;
    cursor: pointer;
    transition: background 0.3s, border-color 0.3s;
}

.fechar-btn:hover {
    background: rgba(255, 255, 255, 0.1);
    border-color: #f2f2f2;
    color: #f2f2f2;
}

/* 4. Título ("Vamos conversar!") */
.modal-box h2 {
    color: #f2f2f2;
    font-size: 2.2rem;
    font-weight: 500;
    text-align: center;
    margin-bottom: 32px;
}

/* 5. Botão principal do WhatsApp (Clonando o estilo .btn-demo) */
.modal-whatsapp-btn {
    display: flex;
    justify-content: space-between;
    align-items: center;
    width: 100%;
    padding: 16px 24px;
    border: 1px solid #f2f2f2;
    border-radius: 2.5px;
    color: #f2f2f2;
    background-color: transparent;
    text-decoration: none;
    font-size: 1.1rem;
    box-sizing: border-box;

    /* REGRAS DO BOTÃO ORIGINAL: Prepara a caixa para receber a animação */
    position: relative;
    overflow: hidden;
    z-index: 1;
    transition: color 0.4s ease;
}

/* A CAIXA FANTASMA: Começa com 0% de largura na esquerda */
.modal-whatsapp-btn::before {
    content: '';
    position: absolute;
    top: 0; 
    left: 0;
    width: 0%;
    height: 100%;
    background-color: #f2f2f2;
    transition: width 0.4s ease;
    z-index: -1;
}

/* O HOVER: Faz a caixa preencher 100% e o texto ficar escuro */
.modal-whatsapp-btn:hover::before { 
    width: 100%; 
}

.modal-whatsapp-btn:hover { 
    color: #0c0c0c; 
}

/* Ícone em SVG do WhatsApp */
.modal-icon-wa {
    width: 20px;
    height: 20px;
    display: block;
    transition: filter 0.4s ease;
}

/* Inverte a cor do ícone junto com a animação do fundo */
.modal-whatsapp-btn:hover .modal-icon-wa {
    filter: invert(1); 
}

/* 6. Linha divisória fina */
.modal-divider {
    border: none;
    border-top: 1px solid #3F3F3F;
    margin: 32px 0;
}

/* 7. Área de Redes Sociais */
.modal-social {
    display: flex;
    align-items: center;
    justify-content: space-between;
}

.social-label {
    color: #f2f2f2;
    font-weight: 500;
    font-size: 1.2rem;
}

.social-links-modal {
    display: flex;
    gap: 42px;
}

/* Efeito da linha sublinhada que cresce ao passar o mouse */
.social-links-modal a {
    color: #f2f2f2;
    text-decoration: none;
    font-size: 1rem;
    transition: color 0.3s ease;
    position: relative; 
    padding-bottom: 4px; 
}

.social-links-modal a:hover {
    color: #f2f2f2;
}

.social-links-modal a::after {
    content: '';
    position: absolute;
    width: 100%;
    height: 1px;
    bottom: 0;
    left: 0;
    background-color: #f2f2f2;
    transform: scaleX(0); 
    transform-origin: right; 
    transition: transform 0.3s ease;
}

.social-links-modal a:hover::after {
    transform: scaleX(1); 
    transform-origin: left; 
}

/* ============================================================
   AJUSTES PARA CELULAR (MOBILE)
   ============================================================ */
@media (max-width: 768px) {
    
    /* 1. Margens de dentro da caixa preta (Respiro geral) */
    .modal-box {
        padding: 36px 32px; /* 32px em cima/baixo e 20px nas laterais (antes era 40px e 24px) */
    }
    
    /* 2. Tamanho e margem do Título */
    .modal-box h2 {
        font-size: 1.8rem;
        margin-bottom: 24px; /* Diminui a distância entre o título e o botão do WhatsApp */
    }
    
    /* 3. Margens da linha divisória */
    .modal-divider {
        margin: 24px 0; /* Diminui o espaço vazio em cima e embaixo da linha */
    }
    
    /* 4. Organização das Redes Sociais */
    .modal-social {
        flex-direction: column;
        align-items: flex-start;
        gap: 24px; /* Espaço entre o "Nossos perfis:" e os links */
    }
    
    /* 5. Posição do X de fechar */
    .fechar-btn {
        top: -48px;
        right: 0;
    }
}

/* ============================================================
   19. MOBILE — HEADER & DRAWER (≤ 768px)
   ============================================================ */

@media (max-width: 768px) {

    body { padding-top: 70px; }

    .header,
    .header.grid-layout {
        display: flex !important;
        justify-content: space-between;
        align-items: center;
        padding: 0 24px;
        height: 70px;
    }

    .logo-wrapper {
        padding-left: 0;
        grid-column: unset;
        margin-bottom: 0;
    }

    .logo-wrapper img { height: 18px; }

    .menu-toggle { display: flex; align-items: center; }
    .nav-wrapper { display: none; }

    .mobile-drawer {
        display: flex;
        position: fixed;
        top: 0; right: -100%;
        width: 100%;
        height: 100vh;
        background-color: #0c0c0c;
        z-index: 999;
        flex-direction: column;
        justify-content: center;
        align-items: flex-start;
        padding: 0 36px;
        transition: right 0.6s cubic-bezier(0.16, 1, 0.3, 1);
    }

    .mobile-drawer.open { right: 0; }

    .mobile-drawer nav {
        display: flex;
        flex-direction: column;
        gap: 40px;
    }

    .mobile-drawer nav a {
        color: var(--text-white);
        text-decoration: none;
        font-size: 2.8rem;
        font-weight: 500;
        letter-spacing: -0.02em;
        line-height: 1;
        opacity: 0;
        transform: translateX(30px);
        transition: opacity 0.5s ease, transform 0.5s cubic-bezier(0.16, 1, 0.3, 1);
    }

    .mobile-drawer.open nav a            { opacity: 1; transform: translateX(0); }
    .mobile-drawer.open nav a:nth-child(1) { transition-delay: 0.10s; }
    .mobile-drawer.open nav a:nth-child(2) { transition-delay: 0.18s; }
    .mobile-drawer.open nav a:nth-child(3) { transition-delay: 0.26s; }
    .mobile-drawer.open nav a:nth-child(4) { transition-delay: 0.34s; }
}


/* ============================================================
   20. MOBILE — SEÇÃO 1 HERO (≤ 768px)
   ============================================================ */

@media (max-width: 768px) {

    .hero {
        display: flex !important;
        flex-direction: column;
        padding: 100px 24px 20px;
        position: static;
        align-items: flex-start;
        text-align: left;
        min-height: auto;
        height: auto;
    }

    .h2-wrapper { order: 1; }

    .h1-wrapper {
        order: 2;
        margin-bottom: 40px;
    }

    .btn-wrapper {
        order: 3;
        width: 100%;
        margin-top: 0;
        margin-bottom: 0;
    }

    /* M ocupa largura total — igual ao Figma */
    .m-wrapper {
        order: 4;
        margin-top: 45px;
        width: 100%;
        display: flex;
        justify-content: flex-start;
    }

    .m-wrapper img {
        margin-left: 0;
        max-width: 100%;
        width: 100%;
        height: auto;
        margin-bottom: 60px;
    }

    .hero .subtitle {
        font-size: 1.75rem;
        font-weight: 500;
        letter-spacing: -0.03em;
        line-height: 1.2;
        margin-bottom: 6px;
    }

    .hero .title {
        font-size: 1.75rem;
        font-weight: 500;
        letter-spacing: -0.03em;
        line-height: 1.2;
    }

    .hero .btn-outline,
    .btn-wrapper .btn-outline {
        width: fit-content;
        justify-content: center;
        gap: 18px;
        padding: 14px 30px;
        font-size: 1rem;
    }
}


/* ============================================================
   21. MOBILE — SEÇÃO 2 SOBRE (≤ 768px)
   ============================================================ */

@media (max-width: 768px) {

    .sobre-agencia {
        min-height: 60vh;
        align-items: flex-start;
        padding: 150px 16px 0 42px;
        justify-content: center;
        overflow: hidden;
    }

    .bg-animado {
        background-size: auto 100%;
        background-position: center;
    }

    .typing-container {
        font-size: 2rem;
        width: 100%;
        max-width: 500px;
        line-height: 1.2;
        font-weight: 500;
        letter-spacing: -0.03em;
        text-align: left;
        transform: none;
        margin-top: 0;
    }

    .quebra-mobile { display: block; }
}

@media (max-width: 480px) {
    .typing-container {
        font-size: 2rem;
        letter-spacing: -0.03em;
        font-weight: 500;
    }
}

/* ============================================================
   ESCONDE O CABEÇALHO MOBILE NO DESKTOP
   (Deve ficar fora e antes do @media)
   ============================================================ */
.step-mobile-header {
    display: none;
}

/* ============================================================
   22. MOBILE — SEÇÃO 3 COMO FAZEMOS (≤ 768px)
   ============================================================ */

@media (max-width: 768px) {

    .como-fazemos { padding: 80px 24px; }

    .como-fazemos .container-fixo {
        padding-left: 0;
        padding-right: 0;
        width: 100%;
        max-width: 100%;
    }

    /* 2. O NOVO BLOCO (Que vai domar o espaço fantasma do computador) */
    .section-header {
        margin-bottom: 48px !important; /* Altere este valor para afastar/aproximar o Planejar */
    }
    
    .section-title {
        font-size: 2.2rem;
        padding-bottom: 24px;
        margin-bottom: 0px;
        border-bottom: 1px solid #0c0c0c;
        position: relative;
    }

    .section-title::after {
        content: '';
        position: absolute;
        left: 0;
        bottom: -1px;
        width: 100%;
        height: 2px;
        background-color: #f2f2f2;
    }

    /* Mobile usa navegação por setas — esconde menu lateral */
    .steps-menu { display: none; }

    .step-mobile-header {
        display: flex !important;
        justify-content: space-between;
        align-items: center;
        width: 100%;
        
        /* A MÁGICA AQUI: Empurra o "Planejar" e as setas para baixo */
        margin-top: 46px; 
        
        margin-bottom: 24px;
    }

    .step-mobile-title {
        font-size: 2rem;
        font-weight: 500;
        letter-spacing: -0.5px;
        color: #f2f2f2;
        margin: 0;
    }

    .step-mobile-nav { display: flex; gap: 10px; }

    .nav-arrow {
        width: 32px;
        height: 32px;
        border-radius: 50%;
        border: 1px solid #f2f2f2;
        background-color: transparent;
        display: flex;
        align-items: center;
        justify-content: center;
        cursor: pointer;
        transition: all 0.2s ease;
        z-index: 100;
    }

    /* Estilos compartilhados (Tamanho, Cor e Transição) */
    .nav-arrow img {
        width: 9px;
        height: auto;
        position: relative;
        filter: brightness(0) invert(1);
        transition: all 0.3s ease;
    }

    /* Ajuste específico para a Seta da ESQUERDA (Anterior) */
    #prev-step img {
        top: 1px;  /* Use (-) para subir ou (+) para descer */
        left: -1px; /* Use (-) para esquerda ou (+) para direita */
    }

    /* Ajuste específico para a Seta da DIREITA (Próxima) */
    #next-step img {
        top: -0.3px;  /* Use (-) para subir ou (+) para descer */
        left: 1px; /* Use (-) para esquerda ou (+) para direita */
    }

    /* O fundo fica claro quando pressionado */
    .nav-arrow:active { 
        background-color: #f2f2f2 !important; 
    }
    
    /* A mágica aqui: brightness(0) transforma a seta em preto escuro (#000000 / #0c0c0c) */
    .nav-arrow:active img { 
        filter: brightness(0) !important; 
    }

    .step-card {
        background-color: #f2f2f2;
        height: 91px;
        margin-bottom: 42px;
        position: relative;
        border-radius: 2px;
    }

    .step-number {
        font-size: 2rem;
        color: #0c0c0c;
        position: absolute;
        top: 12px; left: 12px;
        font-weight: 500;
        line-height: 1;
        z-index: 5;
    }

    /* Força o gráfico a aparecer */
    .step-visual {
        display: block !important;
        position: absolute !important;
        right: 20px !important;
        top: 55px !important;
        transform: translateY(-50%) !important;
        
        /* O SEGREDO: Definir uma caixa rígida para o SVG não encolher para 0px */
        width: 140px !important; 
        height: 100px !important; 
        
        z-index: 10 !important;
        visibility: visible !important;
        opacity: 1 !important;
    }

    .step-visual img {
        display: block !important;
        width: 100% !important; /* Ocupa 100% da caixa rígida que criamos acima */
        height: 100% !important;
        object-fit: contain !important; /* Garante que o desenho não fique esticado ou achatado */
        visibility: visible !important;
        opacity: 1 !important;
    }

    .step-description {
        font-size: 1.05rem;
        line-height: 1.2;
        color: #f2f2f2;
        max-width: 95%;
        margin-bottom: 40px;
    }

    .step-content-wrapper .btn-outline {
        width: fit-content;
        padding: 14px 28px;
        gap: 16px;
    }
}


/* ============================================================
   23. MOBILE — SEÇÃO 4 PROMESSAS (≤ 768px)
   ============================================================ */

@media (max-width: 768px) {

    .promessas { padding: 20px 24px 100px; }

    /* 2. A MÁGICA DO ALINHAMENTO: Zeramos o container para ele não somar espaço */
    .promessas .container-fixo {
        padding-left: 0 !important;
        padding-right: 0 !important;
        width: 100% !important;
        max-width: 100% !important;
    }

    .cards-grid { grid-template-columns: 1fr; gap: 12px; }

    .promise-card { min-height: 300px; padding: 32px 32px; }

    .promise-text { font-size: 2rem; }

    .svg-mask-wrapper { height: 170px; margin-bottom: 28px; }

}


/* ============================================================
   24. MOBILE — SEÇÃO 5 SERVIÇOS (≤ 768px)
   ============================================================ */

@media (max-width: 768px) {

    .nossos-servicos { padding: 80px 0; }

    .container-largo { padding: 0 24px; }

    .servicos-grid { grid-template-columns: 1fr; gap: 48px; }

    /* DESTRAVADO: Ajuste aqui o tamanho do título principal da seção ("Nossos Serviços") */
    .section-title-s5 { 
        font-size: 2.8rem !important; 
        font-weight: 500;
    }

    /* DESTRAVADO: Ajuste aqui o tamanho do título de cada sanfona/serviço */
    .accordion-title { 
        font-size: 2.2rem !important;
        font-weight: 500; 
    }

    .accordion-header { 
        /* DISTÂNCIA EM RELAÇÃO À LINHA DE CIMA: 
           Aumente este valor para afastar o título da linha superior */
        padding-top: 22px !important;  
        
        /* DISTÂNCIA EM RELAÇÃO À LINHA DE BAIXO (Quando fechado): */
        padding-bottom: 22px !important; 
        
        gap: 12px; 
    }

    .accordion-item.active .accordion-header { 
        padding-bottom: 38px !important; 
    }

    /* ==============================================
       AJUSTE DA ANIMAÇÃO DE TEXTO DA SANFONA
       ============================================== */

    .accordion-content p { 
        font-size: 0.95rem; 
        max-width: 100%; 
        text-align: left !important;
        padding-left: 0 !important;
        margin-left: 0 !important;
        
        /* 1. MATA O VAZAMENTO: O texto é cortado instantaneamente se a caixa encolher */
        overflow: hidden; 
        
        /* 2. SOME RÁPIDO: Quando a sanfona fecha, a opacidade vai a zero rapidamente (0.2s) */
        opacity: 0;
        transition: opacity 0.2s ease; 
    }

    /* 3. APARECE SUAVE: Quando a sanfona está ABERTA (active) */
    .accordion-item.active .accordion-content p {
        opacity: 1;
        /* O segredo aqui é o tempo extra. Ele leva 0.4s para acender, mas tem um "delay" 
           de 0.1s para esperar a caixa começar a abrir antes de mostrar as letras */
        transition: opacity 0.4s ease 0.1s; 
    }

    /* AJUSTE DA SETA DA DIREITA: Controle milimétrico do tamanho do ícone */
    .seta-icon {
        width: 22px !important;  /* Altere a largura da seta/bolinha aqui */
        height: 22px !important; /* Altere a altura da seta/bolinha aqui */
        background-size: contain !important; /* Garante que o desenho não distorça */
    }
}


/* ============================================================
   25. MOBILE — SEÇÃO 6 RESULTADOS (≤ 768px)
   ============================================================ */

@media (max-width: 768px) {

    /* 1. CONTROLE DE ESPAÇAMENTO GERAL DA SEÇÃO */
    .entregamos-resultados { 
        padding-top: 80px !important;    /* Espaço no TOPO da seção */
        
        /* A MÁGICA AQUI: Controle a distância entre o botão e a Seção 7 */
        padding-bottom: 160px !important; 
        
        overflow: hidden !important; 
        width: 100%;
        max-width: 100vw;
    }

    .entregamos-resultados .container-largo {
        padding-left: 24px !important;
        padding-right: 24px !important;
        width: 100% !important;
        max-width: 100vw !important;
        box-sizing: border-box !important;
    }

    /* 1. MÁGICA DE REORDENAÇÃO: Flexbox + display: contents */
    .resultados-grid { 
        display: flex !important;
        flex-direction: column;
        gap: 32px; /* Espaçamento padrão entre os blocos */
        width: 100% !important;
        max-width: 100% !important;
        box-sizing: border-box !important;
    }

    .resultados-esquerda {
        /* Isso "dissolve" a caixa esquerda invisivelmente para podermos misturar a ordem dos itens dela com os da direita */
        display: contents; 
    }

    /* Ordenamos quem vem primeiro, segundo, etc. */
    .resultados-esquerda .section-header { order: 1; margin-bottom: 0 !important; }
    .resultados-direita                  { order: 2; width: 100% !important; overflow: hidden; }
    .resultados-texto                    { order: 3; }
    .resultados-esquerda .btn-wrapper    { order: 4; margin-top: 8px;}

    .section-title-s6 { 
        font-size: 2.8rem !important; 
        margin-bottom: 12px;
        word-wrap: break-word;
    }

    .resultados-texto p { 
        max-width: 80%; 
        margin-top: 8px;
        margin-bottom: 8px;
        font-size: 1rem;
    }

    /* ==============================================
       MENU DE ABAS: FORÇANDO 25% MILIMÉTRICO
       ============================================== */
    .tabs-menu {
        display: flex !important;
        flex-direction: row !important;
        width: 100% !important;
        margin-bottom: 24px !important; 
        border-bottom: 1px solid #D1D1D1 !important;
        padding: 0 !important;
        gap: 0 !important; /* Mata qualquer espaço invisível entre as palavras */
    }

    .tab-item { 
        /* O SEGREDO MÁXIMO: Trava a largura matematicamente em exatos 1/4 */
        width: 25% !important;        
        flex: 0 0 25% !important;     
        max-width: 25% !important;    
        
        font-size: 0.8rem !important; /* Fonte um fio menor para a palavra "Comércios" caber */
        letter-spacing: -0.02em !important; /* Aproxima as letras de leve */
        padding: 12px 0 !important;    
        margin: 0 !important;
        display: flex !important;
        justify-content: center !important; 
        align-items: center !important;
        white-space: nowrap !important;
        position: relative !important; 
    }

    /* A CAIXA DA LINHA PRETA: 100% DO BOTÃO (Que agora tem obrigatoriamente 25%) */
    .tab-item::after {
        content: '' !important;
        position: absolute !important;
        width: 100% !important;
        height: 2px !important;
        left: 0 !important;
        bottom: -1px !important; 
        background-color: #0c0c0c !important; /* Garante a cor escura */
    }

    /* GARANTE QUE A LINHA FAÇA A ANIMAÇÃO CORRETA E SÓ APAREÇA NO ITEM SELECIONADO */
    .tab-item:not(.active)::after {
        transform: scaleX(0) !important; /* Esconde dos que não estão clicados */
    }
    
    .tab-item.active::after {
        transform: scaleX(1) !important; /* Mostra a linha inteira no selecionado */
    }

    .resultados-direita .cards-grid { 
        grid-template-columns: 1fr; 
        gap: 10px; 
        width: 100% !important; 
        max-width: 100% !important;
        box-sizing: border-box !important;
    }

    .resultado-card.card-largo { grid-column: auto; }
    
    .resultado-card { 
        min-height: 140px; 
        width: 100% !important; 
        max-width: 100% !important;
        box-sizing: border-box !important; 
        
        /* === NOVO: CONTROLE O RESPIRO INTERNO DO CARD AQUI === */
        /* O primeiro valor (32px) é o espaço em Cima/Baixo. 
           O segundo valor (24px) é o espaço na Direita/Esquerda. */
        padding: 20px 22px !important; 
    }

    /* === NOVO: CONTROLE O NÚMERO GRANDE === */
    .resultado-card h3 { 
        font-size: 3rem !important; /* Tamanho do número */
        margin-bottom: 0px !important; /* Distância entre o número e o texto debaixo */
        word-wrap: break-word;
    }

    /* === NOVO: CONTROLE O TEXTO DE DESCRIÇÃO DO CARD === */
    .resultado-card .card-texto p {
        font-size: 0.95rem !important; /* Tamanho do texto descritivo */
        line-height: 1.3 !important;   /* Espaço entre as linhas do texto */
        margin: 0 !important;
    }
}


/* ============================================================
   26. MOBILE — SEÇÃO 7 MACBOOK (≤ 768px)
   ============================================================ */

@media (max-width: 768px) {

    .macbook-scroll-track { height: auto; }

    /* Ajuste para centralizar tudo dentro da seção */
    .macbook-sticky-container {
        position: relative;
        height: auto;
        min-height: unset;
        padding: 72px 24px 56px;
        background: linear-gradient(#191919 2%, #CCCCCC 90%);
        display: flex;
        flex-direction: column;
        align-items: center; /* Centraliza o conteúdo horizontalmente */
    }

    .macbook-content { 
        margin-bottom: 28px; 
        width: 100%;
        display: flex;
        flex-direction: column;
        align-items: center; /* Garante que os itens internos centralizem */
    }

    /* 1. TÍTULO MAIOR (Ajustado para 2.8rem) */
    .macbook-content h2 { 
        font-size: 2.8rem !important; 
        margin-bottom: 32px; 
        text-align: center;
        line-height: 1 !important; /* Evita que as linhas do título fiquem muito distantes */
    }

    /* 2. TEXTO COM LARGURA CONTROLADA (Mais afastado das margens) */
    .macbook-content p { 
        font-size: 0.95rem; 
        margin-bottom: 32px; 
        max-width: 93% !important; /* O segredo: Ele ocupa só 85% do espaço e cria margens virtuais */
        text-align: center;
        line-height: 1.2 !important;
    }

    /* 3. BOTÃO NO PADRÃO DO SITE (Ao invés de esticado) */
    .macbook-content .btn-wrapper,
    .macbook-content a {
        width: auto !important; /* Tira o "esticamento" de 100% */
        max-width: max-content !important; /* Abraça apenas o texto do botão */
        padding: 14px 32px !important; /* Preenchimento padrão dos outros botões */
        display: inline-flex !important;
        margin-bottom: 28px;
        justify-content: center;
        align-items: center;
    }

    /* =========================================================
       4. CONTROLE DE TAMANHO DO MACBOOK
       ========================================================= */
    #macbook-canvas { 
        width: 100% !important;      /* Ocupa todo o espaço disponível na largura */
        max-height: 50vh !important; /* Aumentamos o limite de altura (antes era 38) */
        height: auto !important;     /* Mantém a proporção da imagem intacta */
        
        /* TRUQUE PARA DEIXAR AINDA MAIOR: */
        /* O scale(1.1) aumenta o tamanho em 10%, scale(1.2) em 20%, etc. */
        /* Se achar que já ficou num tamanho bom só com as regras acima, pode apagar o transform */
        transform: scale(1.15) !important; 
        transform-origin: top center !important; /* Garante que ele cresça a partir do topo */
        margin-top: 0px; /* Dá um respiro entre o botão e o topo do Mac */
        margin-bottom: 42px;
    }
}


/* ============================================================
   27. MOBILE — SEÇÃO 8 CTA FINAL (≤ 768px)
   ============================================================ */

@media (max-width: 768px) {

    /* 1. ESPAÇAMENTO GERAL DA SEÇÃO INTEIRA */
    .final-cta-section { 
        padding: 120px 24px; 
    }

    /* 2. ESTRUTURA (Empilha a imagem em cima e o cartão preto embaixo) */
    .final-cta-container { 
        grid-template-columns: 1fr; 
        gap: 12px; /* Distância entre a imagem e o cartão */
    }

    /* 3. CAIXA DA IMAGEM ABSTRATA */
    .cta-image-wrapper { 
        min-height: 200px; /* Altura da imagem no celular */
    }

    /* 4. CAIXA DO CARTÃO PRETO (Onde ficam os textos e o botão) */
    .cta-card { 
        padding: 30px 30px; /* Respiro interno: 32px (cima/baixo) e 24px (lados) */
    }

    /* 5. TÍTULO PRINCIPAL ("Quer ter a experiência Moold Lab...") */
    .cta-card h2 { 
        font-size: 1.8rem !important; /* Tamanho da fonte ajustado */
        font-weight: 500 !important;  /* Deixa a fonte média/semi-fina */
        line-height: 1.1 !important;  /* Aproxima as linhas do título */
        margin-bottom: 8px; 
    }

    /* 6. CAIXA DE BAIXO (Agrupa o texto menor e o botão) */
    .cta-card-footer {
        display: flex;
        flex-direction: column;
        align-items: flex-start;
        gap: 52px;        /* Distância exata entre o parágrafo e o botão */
        margin-top: 32px; /* Distância exata entre o título (h2) e o parágrafo */
    }

    /* 7. TEXTO DESCRITIVO ("A conversa não compromete...") */
    .cta-card-footer p { 
        font-size: 1rem !important; 
        line-height: 1.2 !important;
        margin: 0 !important;
    }
    
    /* 8. BOTÃO "Fale conosco" (Caso precise alterar as larguras dele no futuro) */
    .cta-card-footer a, 
    .cta-card-footer .btn-wrapper {
        width: 100% !important; /* Faz o botão esticar de ponta a ponta no card */
        box-sizing: border-box;
    }
}


/* ============================================================
   28. MOBILE — RODAPÉ (≤ 768px)
   ============================================================ */

@media (max-width: 768px) {

    /* 1. MARGENS GERAIS DO RODAPÉ (Mantido os seus 6px) */
    footer, .site-footer {
        padding-left: 6px !important;
        padding-right: 6px !important;
        box-sizing: border-box !important;
        overflow: hidden;
    }

    /* 2. APROXIMA A LOGO DA LINHA DE CIMA (Mantido o seu 32px) */
    .footer-line { margin-bottom: 32px !important; } 
    .footer-logo { margin-bottom: 40px !important; }

    /* 4. ALINHAMENTO: Força o layout em linha (Lado a Lado) */
    .footer-bottom { 
        display: flex !important;
        flex-direction: row !important; /* CORREÇÃO: Mata a coluna que estava empilhando tudo */
        flex-wrap: wrap !important; 
        justify-content: space-between !important; 
        align-items: center !important; 
        gap: 24px 0 !important; 
    }

    /* Links ocupam o topo inteirinho (100%) */
    .footer-links { 
        width: 100% !important;
        justify-content: flex-start !important;
        margin-bottom: 8px !important; /* Ajuda a separar os links da linha de baixo */
        gap: 24px; 
    }

    /* O copyright colado na esquerda (Mantido o seu 0.8rem) */
    .footer-copy { 
        width: auto !important; 
        flex: 1 !important; /* Empurra o botão para longe */
        text-align: left !important; /* Crava o texto na esquerda */
        font-size: 0.8rem !important; 
        margin: 0 !important; 
        padding-right: 16px !important;
    }
    
    /* A caixa do botão cravada na direita */
    .footer-btn-container { 
        width: auto !important; 
        margin: 0 !important; 
        flex-shrink: 0 !important; /* Protege o botão de ser esmagado */
    }

    /* 3. O BOTÃO QUADRADO (Trava o Posicionamento) */
    .footer-btn-container a, 
    .footer-btn-container button {
        width: 48px !important;
        height: 48px !important;
        padding: 0 !important;
        
        /* A TRAVA: Essencial para o centralizador absoluto funcionar */
        position: relative !important; 
        
        display: block !important; /* Tira o flex, não precisamos dele aqui */
        font-size: 0 !important; /* Esconde o texto */
        color: transparent !important; 
        box-sizing: border-box !important;
    }

    /* CORREÇÃO BULLETPROOF: Centralização Absoluta da Seta */
    .footer-btn-container a svg,
    .footer-btn-container button svg,
    .footer-btn-container a img,
    .footer-btn-container button img {
        /* Aumentei um fio para 20px, para ficar mais visível no centro */
        width: 20px !important; 
        height: 20px !important;
        
        /* O MOTOR DE CENTRALIZAÇÃO PERFEITA */
        position: absolute !important;
        top: 50% !important;       /* Empurra pra 50% do topo */
        left: 50% !important;      /* Empurra pra 50% da esquerda */
        /* O MOTOR DE CENTRALIZAÇÃO + O GIRO DE VOLTA */
        transform: translate(-50%, -50%) rotate(-180deg) !important;
        
        /* Mata qualquer interferência externa */
        margin: 0 !important; 
        padding: 0 !important;
        color: #FFFFFF !important; 
    }
}


/* ============================================================
   29. MOBILE — BOTÕES (≤ 768px)
   ============================================================ */

@media (max-width: 768px) {

    .btn-outline {
        padding: 14px 24px;
        font-size: 0.95rem;
        width: 100%;
        justify-content: space-between;
    }

    .btn-demo {
        padding: 14px 24px;
        font-size: 0.95rem;
        width: 100%;
        justify-content: space-between;
    }
}


/* ============================================================
   30. MOBILE — AJUSTES FINOS (≤ 480px)
   ============================================================ */

@media (max-width: 480px) {

    .subtitle, .title { font-size: 1.5rem; }

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

    .section-title-s5,
    .section-title-s6 { font-size: 2.2rem; }

    .promise-text    { font-size: 1.7rem; }

    .accordion-title { font-size: 1.5rem; }

    .resultado-card h3  { font-size: 2.8rem; }

    .macbook-content h2 { font-size: 1.9rem; }

    .cta-card h2 { font-size: 1.6rem; }

    .mobile-drawer nav a { font-size: 2.2rem; }
}