/*
 * Design tokens deste site — docs/guia_de_Estilo_Design_Tokens.md §3.
 * Navy mais escuro que os outros 2 sites da marca, raio de botão quase reto
 * (2px), H1 peso 400. Valores de espaçamento e estrutura confirmados via
 * mapeamento completo do HTML/CSS ao vivo em 2026-08-07/2026-08-10 (ver
 * docs/plano-de-desenvolvimento.md §3.5/§3.6/§5 Fase 3).
 */
:root {
    --sf-navy: #082A50;
    --sf-navy-medio: #082D57;
    --sf-navy-claro: #083568;
    --sf-amarelo: #FEBC01;
    --sf-cyan: #038FD6;
    --sf-lavanda: #CDD4FF;
    --sf-azul-claro: #6EC1E4;
    --sf-rosa: #CC3366;
    --sf-cinza-azulado: #6F7699;
    --sf-container-max: 1216px;
    --sf-secao-y: 88px;
    --sf-secao-y-mobile: 64px;
}

/* Poppins é usada em 100% do texto renderizado da página real (73 ocorrências
   de "Poppins" e zero de "Roboto" em post-14.css, confirmado na auditoria do
   dump SQL original em 2026-08-14) — inclusive parágrafos de corpo, não só
   headings/botão. O guia de estilo geral da marca (§ que descreve a pilha de
   fonte do sistema pro corpo de texto) vale para os outros 2 sites da
   Oficina das Tintas, não para este, que sobrescreve tudo com Poppins no
   próprio Elementor. */
body {
    font-family: "Poppins", -apple-system, "Segoe UI", Roboto, Arial, sans-serif;
    color: #333333;
    font-size: 16px;
    line-height: 24px;
    background-color: #FBFBFB;
}

.container {
    max-width: var(--sf-container-max);
}

/* ── Ritmo vertical padrão de seção ────────────────────────
   88px topo/base no desktop, comprime pra 64px no mobile — mais alto que
   os 16px genéricos dos outros 2 sites da marca (ver plano §3.5, ponto 3). */
.sf-secao {
    padding-top: var(--sf-secao-y);
    padding-bottom: var(--sf-secao-y);
}

@media (max-width: 767px) {
    .sf-secao {
        padding-top: var(--sf-secao-y-mobile);
        padding-bottom: var(--sf-secao-y-mobile);
    }
}

/* Valores reais confirmados no post-14.css (auditoria do dump SQL original,
   2026-08-14): 16px/24px peso 500, sem letter-spacing e sem text-transform —
   os textos já vêm em caixa alta direto do conteúdo, não via CSS. */
.sf-eyebrow {
    font-size: 16px;
    line-height: 24px;
    font-weight: 500;
    color: var(--sf-cyan);
}

/* ── Destaque nos títulos ───────────────────────────────────
   Trecho marcado com *asteriscos* no Nexus vira <span class="titulo-destaque">
   (helper tituloDestaque()). A cor é decidida aqui por seção — as mesmas
   cores reais que antes vinham como style inline no conteúdo (2 tons de
   amarelo e 2 de azul, conforme o site original). */
.titulo-destaque {
    font-weight: 700;
    color: #0691D0; /* A Franqueadora, Centro Coral */
}

.sf-hero .titulo-destaque {
    color: var(--sf-amarelo);
}

.sf-h2-diferenciais .titulo-destaque {
    color: var(--sf-cyan); /* Diferenciais, Depoimentos */
}

.sf-video-institucional .titulo-destaque,
.sf-secao-modelos .titulo-destaque,
.sf-cta-final-wrap .titulo-destaque {
    color: #F7BC07;
}

/* ── Hero ───────────────────────────────────────────────────
   Sem camada de overlay — o site original não tem uma, é só a imagem +
   background-color de fallback (achado em 2026-08-10: a versão anterior
   deste CSS somava um gradiente navy 85% por cima da imagem, escurecendo
   demais e fazendo o fundo parecer liso). Padding-bottom bem maior que o
   topo de propósito: abre espaço pro card de estatísticas flutuar por
   cima via margem negativa (ver .sf-stats-wrap). Sem border-radius — o
   hero real (elemento 2050940f) não tem raio nenhum, confirmado no CSS
   computado; o `32px` usado antes aqui era de outro elemento, aplicado
   por engano (achado em 2026-08-10 comparando capturas de tela lado a
   lado, que mostrou o canto arredondado comprimindo visualmente a
   transição para a seção seguinte). */
/* Padding real confirmado por medição ao vivo (getComputedStyle direto no
   elemento 2050940f, 2026-08-15): 72px/16px/248px desktop, 64px/24px/600px
   mobile — restaurado ao valor pixel-perfect do site original (revertendo
   a compressão de UX aplicada em 2026-08-14, decisão revista pelo cliente
   em 2026-08-15: fidelidade ao original tem prioridade sobre caber acima
   da dobra em janelas baixas). */
.sf-hero {
    background-color: var(--sf-navy);
    background-image: url("../img/hero-section.png");
    background-size: cover;
    background-position: center;
    padding: 72px 16px 248px 16px;
}

@media (max-width: 767px) {
    .sf-hero {
        padding: 64px 24px 600px 24px;
    }
}

/* Logo dentro do próprio hero (não é uma barra de topo separada — o site
   original não tem header, a logo é só o primeiro item da coluna esquerda).
   Sem altura fixa no desktop — o CSS real não restringe, a logo usa o
   tamanho natural (253×85). Só no mobile o site original fixa 64px de
   altura (achado em 2026-08-10, corrigindo o 48px fixo usado antes). */
.sf-hero-logo {
    width: 253px;
    max-width: 100%;
    height: auto;
    margin-bottom: 18px;
    display: block;
}

@media (max-width: 767px) {
    .sf-hero-logo {
        width: auto;
        height: 64px;
    }
}

/* Faixa colorida decorativa — era a imagem real do site (PNG); trocada a
   pedido do usuário pelo mesmo gradiente único (sem repetição) usado no
   site institucional (oficinadastintas.com.br), divergência proposital da
   referência original. Divisor fino entre seções, encostado no final do
   fundo navy do hero (não flutua nem tem espaço próprio). Padding real
   confirmado no CSS computado (8px topo/base) — antes usava altura fixa
   de 6px sem padding, resultado mais fino que o original. */
.sf-barra-cores {
    padding: 8px 0;
    background: linear-gradient(
        to right,
        #0691d0 0 20%,
        #e0121b 20% 40%,
        #e55f0d 40% 60%,
        #f7bc07 60% 80%,
        #048439 80% 100%
    );
}

/* Tamanho real confirmado por medição ao vivo em 2026-08-15 (getComputedStyle
   do <h1>): 56px/64px desktop, 40px/48px mobile — maior do que o valor usado
   antes aqui (44px/52px e 32px/40px), que vinha do guia de estilo genérico
   da marca (pensado pros outros 2 sites, não este). */
.sf-hero h1 {
    color: #fff;
    font-weight: 400;
    font-size: 56px;
    line-height: 64px;
    margin-bottom: 14px;
}

@media (max-width: 767px) {
    .sf-hero h1 {
        font-size: 40px;
        line-height: 48px;
    }
}

.sf-hero-subtitulo {
    color: var(--sf-lavanda);
    font-size: 16px;
    line-height: 24px;
    font-weight: 400;
    max-width: 34rem;
}

/* Card do formulário — fundo #083568 (navy-claro), radius quase reto (2px).
   Correção 2026-08-14: estava usando --sf-navy-medio (#082D57) por engano —
   a diferença pra cor dos inputs (#082A50) ficava quase imperceptível,
   fazendo as caixas dos campos "sumirem" visualmente. O valor real
   confirmado na auditoria do dump SQL original é #083568. */
.sf-form-card {
    background-color: var(--sf-navy-claro);
    border-radius: 2px;
    padding: 40px;
}

@media (max-width: 767px) {
    .sf-form-card {
        padding: 24px;
    }
}

/* Espaçamento entre campos do formulário — classe própria (não mb-3 do
   Bootstrap, que vem com !important e não dava pra apertar sem duplicar
   a regra). Ver home.php. */
.sf-form-card .sf-field {
    margin-bottom: 10px;
}

/* Campo-armadilha anti-bot do formulário (ver Home::enviar) — fora da tela
   em vez de display:none, que alguns robôs detectam e pulam. */
.sf-hp {
    position: absolute;
    left: -10000px;
    width: 1px;
    height: 1px;
    overflow: hidden;
}

/* Título e texto de introdução são centralizados no site real (achado em
   2026-08-10) — só os campos do formulário em si ficam alinhados à esquerda. */
.sf-form-card h2 {
    color: #fff;
    font-size: 19px;
    font-weight: 500;
    margin-bottom: 4px;
    text-align: center;
}

.sf-form-card p {
    color: var(--sf-lavanda);
    font-size: 13px;
    text-align: center;
    padding: 0 16px;
    margin-bottom: 14px;
}

/* O formulário original não tem <label> visível — só placeholder dentro
   do próprio campo (achado em 2026-08-10). */
.sf-form-card .form-control,
.sf-form-card .form-select {
    background-color: var(--sf-navy);
    border: 1px solid rgba(255, 255, 255, .12);
    color: var(--sf-lavanda);
    border-radius: 2px;
    padding: 7px 14px;
    font-size: 15px;
}

.sf-form-card .form-control::placeholder {
    color: var(--sf-lavanda);
    opacity: .7;
}

.sf-form-card .form-control:focus,
.sf-form-card .form-select:focus {
    background-color: var(--sf-navy);
    color: #fff;
    border-color: var(--sf-amarelo);
    box-shadow: 0 0 0 .15rem rgba(254, 188, 1, .25);
}

/* Botão CTA principal — amarelo, quase quadrado, terceira variação de
   raio entre os 3 sites da marca (2px). */
.btn-sf-cta {
    background-color: var(--sf-amarelo);
    color: var(--sf-navy-medio);
    border: none;
    border-radius: 2px;
    padding: 14px 16px;
    font-weight: 600;
    font-size: 16px;
    display: inline-block;
    text-decoration: none;
    text-align: center;
}

.btn-sf-cta:hover {
    background-color: #e5aa01;
    color: var(--sf-navy-medio);
}

.sf-form-card .btn-sf-cta {
    width: 100%;
    min-width: 322px;
    padding: 11px 16px;
}

/* ── Números da rede — sobrepõe o hero via margem negativa ─────
   Reproduz o comportamento real do site: card flutuante, não seção
   empilhada comum (ver plano §3.5, ponto 4 / §5 Fase 2). Ícone à esquerda
   do texto (posição "inline-start" no site original), não empilhado.
   O padding (14px topo / 99px base no desktop) é o que faz a margem
   negativa encaixar exatamente no fim do hero — sem ele (bug corrigido em
   2026-08-10), sobra navy visível antes E depois da faixa colorida, e a
   seção seguinte fica "colada" sem respiro. Confirmado no CSS real.

   .sf-stats-overlay tem altura zero de propósito (bug corrigido em
   2026-08-14): sem isso, a margem negativa do card também "puxava" a
   barra-de-cores/seção seguinte pra cima proporcionalmente à altura do
   próprio card, fazendo a faixa colorida cortar o meio dos números em vez
   de fechar a seção por baixo. Com altura zero, o próximo elemento no fluxo
   normal (.sf-barra-cores) sempre encosta exatamente no fim do hero,
   independente da altura do conteúdo do card.

   Correção 2026-08-14 (2ª parte): `overflow: visible` sozinho NÃO evita o
   colapso de margem — a margem negativa de `.sf-stats-wrap` "vazava" pra
   fora deste wrapper (que não tem padding/borda) e empurrava o próprio
   wrapper (e tudo depois dele: barra-de-cores, seção seguinte) 181px pra
   cima, sobrepondo o texto da seção seguinte sobre o navy do hero. Medido
   ao vivo com Playwright: `.sf-stats-overlay.top` estava saindo igual ao
   `.sf-stats-wrap.top` (ambos 181px acima do fim real do hero) em vez de
   coincidir com `.sf-hero.bottom`. `display: flow-root` cria um novo
   contexto de formatação de bloco — impede o colapso de margem sem cortar
   o conteúdo que transborda (diferente de `overflow: hidden`, que evitaria
   o colapso mas cortaria o card flutuante). */
.sf-stats-overlay {
    position: relative;
    height: 0;
    display: flow-root;
}

/* Valores reais restaurados em 2026-08-15 (getComputedStyle direto no
   elemento 4935efc do site ao vivo): margin-top -181px/padding 14px 16px
   99px 16px no desktop, margin-top -529px/padding 0 24px 56px 24px no
   mobile — revertendo a compressão proporcional de 2026-08-14 (ver
   .sf-hero acima; mesma decisão revista em 2026-08-15). */
.sf-stats-wrap {
    margin-top: -181px;
    padding: 14px 16px 99px 16px;
    position: relative;
    z-index: 1;
}

@media (max-width: 767px) {
    .sf-stats-wrap {
        margin-top: -529px;
        padding: 0 24px 56px 24px;
    }
}

.sf-stat-item {
    display: flex;
    align-items: center;
    gap: 16px;
}

/* Empilhado e centralizado no mobile (flex-direction:column, real confirmado
   por medição ao vivo em 2026-08-15) — no desktop ícone fica ao lado do
   texto, no mobile fica acima e centralizado. */
@media (max-width: 767px) {
    .sf-stat-item {
        flex-direction: column;
        align-items: center;
        text-align: center;
    }
}

.sf-stat-icone {
    width: 56px;
    height: 56px;
    flex-shrink: 0;
}

.sf-stats-numero {
    color: #fff;
    font-weight: 800;
    font-size: 28px;
    margin-bottom: 4px;
}

.sf-stats-label {
    color: var(--sf-lavanda);
    font-size: 16px;
}

/* ── Seções de 2 colunas com foto real (A Franqueadora / Centro Coral) ──
   O site original usa isso duas vezes: imagem numa coluna, texto na
   outra — nunca imagem de fundo atrás de um bloco de texto (correção de
   2026-08-10; a versão anterior deste CSS usava seção navy com imagem de
   fundo + overlay, que não existe no site real). */
/* :not(.sf-selo) — achado em 2026-08-14: sem essa exclusão, esta regra
   genérica (especificidade 0,1,1) vencia a de `.sf-selo` (0,1,0) pro mesmo
   elemento, já que o selo de certificação também é um <img> dentro de
   `.sf-secao-foto`, esticando o selo pra 100% da largura da coluna e
   distorcendo a proporção real da imagem. */
.sf-secao-foto img:not(.sf-selo) {
    width: 100%;
    height: auto;
    border-radius: 8px;
}

/* Valor real confirmado por medição ao vivo em 2026-08-15 (444px de 608px
   de coluna = 73%, elemento bc886f1) — restaurado, revertendo a redução de
   2026-08-14 (62%). Especificidade igual à regra
   `.sf-secao-foto img:not(.sf-selo)` acima (0,2,1) de propósito — como
   seletor de classe única (0,1,0) perde a disputa e o width:100% genérico
   continua vencendo (mesmo bug de especificidade já visto em `.sf-selo`,
   ver comentário logo acima). */
.sf-secao-foto img.sf-foto-coral {
    width: 73%;
}

/* Cor/peso/tamanho reais confirmados por medição ao vivo em 2026-08-15
   (getComputedStyle do heading "Somos uma franquia pautada em..."):
   #082D57 (navy-medio), peso 400, 32px/40px — restaurado, revertendo a
   redução de 2026-08-14 (26px/32px). */
.sf-secao-foto h2 {
    color: var(--sf-navy-medio);
    font-weight: 400;
    font-size: 32px;
    line-height: 40px;
}

.sf-secao-foto .sf-eyebrow {
    font-size: 13px;
}

/* :not(.sf-eyebrow) — mesmo bug de especificidade já visto em `.sf-selo` e
   `.sf-foto-coral`: o kicker (ex. "Centro Especialista Coral") também é uma
   tag <p>, então sem essa exclusão esta regra ((0,1,1), por causa do `p`)
   vencia a de `.sf-eyebrow` sozinha ((0,1,0)) e pintava o kicker de cinza
   em vez do ciano (--sf-cyan) correto. */
.sf-secao-foto p:not(.sf-eyebrow) {
    color: var(--sf-cinza-azulado);
    font-size: 15px;
}

/* H2 de "Diferenciais competitivos" e "Resultados que falam por si só" —
   cor sólida própria (#242C5E), diferente do navy usado nas outras seções
   (achado na auditoria 2026-08-14). */
.sf-h2-diferenciais {
    color: #242C5E;
    font-weight: 400;
    font-size: 32px;
    line-height: 40px;
}

/* Tamanho real medido AO VIVO no site original: 207×145px (viewport 1920px,
   arquivo Certificacoes-1.png, proporção 772:540) — restaurado em
   2026-08-15, revertendo a redução de 2026-08-14 (168px).
   `aspect-ratio` + `object-fit:contain` seguem como proteção contra o bug
   de distorção original (conflito de especificidade com `.sf-secao-foto
   img`, ver regra abaixo). */
.sf-selo {
    width: 100%;
    max-width: 207px;
    height: auto;
    aspect-ratio: 772 / 540;
    object-fit: contain;
    flex-shrink: 0;
}

/* ── Vídeo institucional ──
   Fundo é a imagem real (Palavras-do-CEO.png), não cor sólida — achado na
   auditoria do dump SQL original (2026-08-14). O eyebrow usa o mesmo ciano
   padrão (#038FD6) das outras seções, não o azul-claro usado antes aqui. */
.sf-video-institucional {
    background-color: var(--sf-navy-claro);
    background-image: url("../../uploads/conteudo/video-institucional-fundo.png");
    background-size: cover;
    background-position: top center;
}

/* font-size/weight/line-height confirmados no post-14.css (auditoria
   2026-08-14, elemento b77dd5e): 32px/400/40px — sem esta regra o h2 caía
   no default do Bootstrap (peso 500, line-height 1.2), deixando o texto
   visivelmente mais "pesado"/maior que o site real. */
.sf-video-institucional h2 {
    color: #fff;
    font-weight: 400;
    font-size: 32px;
    line-height: 40px;
}

.sf-video-institucional-wrap {
    position: relative;
    width: 100%;
    aspect-ratio: 16 / 9;
    border-radius: 8px;
    overflow: hidden;
    background-color: var(--sf-navy);
}

/* Poster clicável — imagem já tem o botão de play desenhado nela (mesmo
   arquivo do overlay real, Group-7531-3.png); trocado pelo iframe no clique
   via franqueado.js. */
.sf-video-poster {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    border: 0;
    padding: 0;
    margin: 0;
    background-size: cover;
    background-position: center;
    cursor: pointer;
}

.sf-video-institucional-wrap iframe {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    border: 0;
}

/* ── Diferenciais competitivos ──
   Divisor real (elemento 6b8dce2, post-14.css) — 1px sólido #E7E8EF, sem a
   opacidade de .25 que o Bootstrap aplica por padrão ao <hr>. */
.sf-divisor {
    opacity: 1;
    border: 0;
    border-top: 1px solid #E7E8EF;
    margin: 8px 0;
}

/* Card real (elemento 31a9fb6, post-14.css): fundo branco, radius 4px,
   sombra 2px 4px 14px -4px rgba(0,0,0,.12), padding 32px — mesmo tratamento
   visual usado em .sf-card-modelo, mas em classe própria porque a seção é
   conceitualmente diferente. */
.sf-card-diferencial {
    background-color: #fff;
    border-radius: 4px;
    box-shadow: 2px 4px 14px -4px rgba(0, 0, 0, .12);
    padding: 32px;
    height: 100%;
}

/* Ícone real 48px (elemento dc695d4, post-14.css), não 56px. Margem embaixo
   substitui o gap:15px do flex wrapper original, já que aqui o ícone empilha
   acima do título em vez de ficar num container flex ao lado do texto. */
.sf-diferencial-icone {
    width: 48px;
    height: 48px;
    margin-bottom: 15px;
}

/* Título real: Poppins 600 20px/26px, cor #082D57 (navy-medio, não o navy
   mais escuro usado antes via style inline) — confirmado no post-14.css. */
.sf-diferencial-titulo {
    font-weight: 600;
    font-size: 20px;
    line-height: 26px;
    color: var(--sf-navy-medio);
}

/* Cor real #6F7699 (post-14.css) — antes usava --sf-lavanda (#CDD4FF),
   uma cor clara pensada pra fundo navy, ilegível sobre o fundo branco
   desta seção (achado na auditoria 2026-08-14). */
.sf-diferencial-texto {
    color: #6F7699;
    font-size: 16px;
    line-height: 24px;
}

/* ── Modelos de negócio ──
   Fundo navy sólido com cantos arredondados só na base — não é fundo claro
   (achado na auditoria do dump SQL original, 2026-08-14: a versão anterior
   usava #F4F6FB; o site real usa a mesma cor navy #082D57 das outras seções
   escuras, com heading branco). */
.sf-secao-modelos {
    background-color: var(--sf-navy-medio);
    border-radius: 0 0 40px 40px;
}

.sf-secao-modelos h2 {
    color: #fff;
}

@media (max-width: 767px) {
    .sf-secao-modelos {
        border-radius: 0 0 32px 32px;
    }
}

/* Fundo navy (#083568, mais claro que o #082D57 da seção), sem radius nem
   sombra própria — achado na auditoria 2026-08-14 (elemento f54648f,
   post-14.css): o card real não se destaca por sombra/branco, só pelo
   padding e pelos divisores internos. Padding real 24px, não 32px. Texto
   centralizado (real: text-align:center em cada elemento interno). */
.sf-card-modelo {
    background-color: #083568;
    padding: 24px;
    height: 100%;
    text-align: center;
}

/* Foto do modelo — presente nos 3 cards no site real, achado na mesma
   auditoria (a versão anterior não usava foto nos cards). */
.sf-card-modelo-foto {
    width: 100%;
    height: auto;
    border-radius: 4px;
    margin-bottom: 16px;
}

/* Nome real: Poppins 600 24px/32px branco (não navy) — post-14.css. */
.sf-modelo-nome {
    color: #fff;
    font-weight: 600;
    font-size: 24px;
    line-height: 32px;
    margin-bottom: 16px;
}

/* Divisor entre nome/estatísticas real: 1px #CDD4FF38 (lavanda ~22%
   opacidade), bem mais sutil que os divisores brancos usados em outras
   seções — post-14.css (elementos 34e0683/5c667ee/3d7d4c3). Espaçamento
   vertical aproximado (o site real intercala com spacers próprios cujo
   valor exato não foi medido), calibrado visualmente contra o screenshot
   do site original. */
.sf-modelo-divisor {
    opacity: 1;
    border: 0;
    border-top: 1px solid #CDD4FF38;
    margin: 16px 0;
}

/* Rótulo ("Investimento a partir de:" etc.) real: Poppins 400 18px/26px,
   branco — post-14.css. */
.sf-modelo-label {
    color: #fff;
    font-weight: 400;
    font-size: 18px;
    line-height: 26px;
    margin-bottom: 4px;
}

/* Valor ("R$ 125 mil" etc.) real: Poppins 700 32px/40px, dourado #FEBC01
   — post-14.css. Cor e peso bem diferentes do navy 800 usado antes aqui. */
.sf-modelo-valor {
    color: #FEBC01;
    font-weight: 700;
    font-size: 32px;
    line-height: 40px;
    margin-bottom: 0;
}

/* ── Depoimentos (YouTube) ──
   Tamanho real confirmado por medição ao vivo em 2026-08-15 (getBoundingClientRect
   do .swiper-slide dentro do carrossel real): 952×580px no desktop, 297×450px
   (retrato) no mobile — restaurado, revertendo a sequência de reduções de
   2026-08-14 (952→809→728→801px). O limite de 952px fica no carrossel
   inteiro (#carouselDepoimentos), não só no .sf-video-wrap — achado em
   2026-08-14: só no wrap o max-width não estava sendo respeitado (o vídeo
   saía renderizando quase na largura cheia do container, ~1216px), possivelmente
   por causa do `.carousel-item` do Bootstrap ser `float:left`. Botar o limite
   no carrossel inteiro elimina essa dependência. */
#carouselDepoimentos {
    max-width: 952px;
    margin: 0 auto;
}

/* Kicker/título desta seção: medição ao vivo em 2026-08-15 confirma que o
   heading "Resultados que falam por si só" usa 32px/40px, igual ao valor
   base de .sf-h2-diferenciais — restaurado, revertendo a redução de ~15%
   (decisão de 2026-08-14) que escopava um tamanho menor só pra esta seção. */

.sf-video-wrap {
    position: relative;
    width: 100%;
    aspect-ratio: 952 / 580;
    border-radius: 8px;
    overflow: hidden;
    background-color: var(--sf-navy-medio);
}

@media (max-width: 767px) {
    #carouselDepoimentos {
        max-width: 297px;
    }

    .sf-video-wrap {
        aspect-ratio: 297 / 450;
    }
}

.sf-video-wrap iframe {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    border: 0;
}

/* Poster real recuperado do backup do site original (Group-45/44-1/46.png,
   2026-08-14) — o tingimento navy + botão de play + texto "Aperte aqui..."
   já vêm desenhados na própria imagem pelo cliente, então aqui é só um
   botão clicável com a imagem de fundo, sem overlay/texto duplicado via
   CSS (a versão anterior recriava esse efeito em cima da thumbnail do
   YouTube porque não tínhamos esses arquivos disponíveis ainda). */
.sf-video-depoimento-poster {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    border: 0;
    padding: 0;
    margin: 0;
    background-size: cover;
    background-position: center;
    cursor: pointer;
}

/* Fade real (widget real usa effect:"fade", não slide) + tamanho de bala
   real (elemento d341b1f, post-14.css: bullet ativa #038FD6, inativa
   #038FD64D) — os indicators do Bootstrap por padrão ficam retângulos
   sobrepostos no rodapé do carrossel; aqui viram bolinhas fora da imagem,
   como no site original. */
#carouselDepoimentos .carousel-item {
    transition: opacity .5s ease;
}

#carouselDepoimentos .carousel-indicators {
    position: static;
    margin: 16px 0 0 0;
}

#carouselDepoimentos .carousel-indicators [data-bs-target] {
    width: 8px;
    height: 8px;
    border-radius: 50%;
    background-color: #038FD64D;
    opacity: 1;
    border: 0;
}

#carouselDepoimentos .carousel-indicators .active {
    background-color: #038FD6;
}

/* Setas reais são só o ícone cyan (#038FD6, sem fundo/círculo) — mesmos
   paths SVG do widget real (elementor-swiper-button, post-14.css). Com o
   max-width movido pro #carouselDepoimentos (ver acima), as setas agora
   colam na borda do vídeo sem o offset — empurra pra fora com left/right
   negativo, aproximando do respiro visto no site original. */
#carouselDepoimentos .carousel-control-prev,
#carouselDepoimentos .carousel-control-next {
    width: 40px;
    opacity: 1;
}

#carouselDepoimentos .carousel-control-prev {
    left: -80px;
}

#carouselDepoimentos .carousel-control-next {
    right: -80px;
}

@media (max-width: 1180px) {
    #carouselDepoimentos .carousel-control-prev {
        left: 0;
    }

    #carouselDepoimentos .carousel-control-next {
        right: 0;
    }
}

#carouselDepoimentos .carousel-control-prev-icon,
#carouselDepoimentos .carousel-control-next-icon {
    width: 28px;
    height: 28px;
    background-image: none;
}

#carouselDepoimentos .carousel-control-prev-icon::before,
#carouselDepoimentos .carousel-control-next-icon::before {
    content: "";
    display: block;
    width: 100%;
    height: 100%;
    background-color: #038FD6;
}

#carouselDepoimentos .carousel-control-prev-icon::before {
    -webkit-mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 1000 1000'%3E%3Cpath d='M646 125C629 125 613 133 604 142L308 442C296 454 292 471 292 487 292 504 296 521 308 533L604 854C617 867 629 875 646 875 663 875 679 871 692 858 704 846 713 829 713 812 713 796 708 779 692 767L438 487 692 225C700 217 708 204 708 187 708 171 704 154 692 142 675 129 663 125 646 125Z'/%3E%3C/svg%3E") center / contain no-repeat;
    mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 1000 1000'%3E%3Cpath d='M646 125C629 125 613 133 604 142L308 442C296 454 292 471 292 487 292 504 296 521 308 533L604 854C617 867 629 875 646 875 663 875 679 871 692 858 704 846 713 829 713 812 713 796 708 779 692 767L438 487 692 225C700 217 708 204 708 187 708 171 704 154 692 142 675 129 663 125 646 125Z'/%3E%3C/svg%3E") center / contain no-repeat;
}

#carouselDepoimentos .carousel-control-next-icon::before {
    -webkit-mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 1000 1000'%3E%3Cpath d='M696 533C708 521 713 504 713 487 713 471 708 454 696 446L400 146C388 133 375 125 354 125 338 125 325 129 313 142 300 154 292 171 292 187 292 204 296 221 308 233L563 492 304 771C292 783 288 800 288 817 288 833 296 850 308 863 321 871 338 875 354 875 371 875 388 867 400 854L696 533Z'/%3E%3C/svg%3E") center / contain no-repeat;
    mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 1000 1000'%3E%3Cpath d='M696 533C708 521 713 504 713 487 713 471 708 454 696 446L400 146C388 133 375 125 354 125 338 125 325 129 313 142 300 154 292 171 292 187 292 204 296 221 308 233L563 492 304 771C292 783 288 800 288 817 288 833 296 850 308 863 321 871 338 875 354 875 371 875 388 867 400 854L696 533Z'/%3E%3C/svg%3E") center / contain no-repeat;
}

/* ── Lightbox de depoimentos ──
   No site real o clique no poster abre o lightbox do Elementor (slideshow),
   com frame bem maior e setas pra pular entre os 3 vídeos sem fechar o
   modal — achado em 2026-08-14. Modal próprio, full-screen, fundo escuro. */
.sf-video-lightbox {
    display: none;
    position: fixed;
    inset: 0;
    z-index: 1080;
    align-items: center;
    justify-content: center;
}

.sf-video-lightbox.sf-video-lightbox--aberto {
    display: flex;
}

.sf-video-lightbox-backdrop {
    position: absolute;
    inset: 0;
    background-color: rgba(8, 20, 40, .92);
}

.sf-video-lightbox-content {
    position: relative;
    width: min(90vw, 1280px);
    z-index: 1;
    transition: width .2s ease;
}

/* Estado do botão de zoom da barra — alterna pra um tamanho maior. */
.sf-video-lightbox-content--ampliado {
    width: min(98vw, 1800px);
}

.sf-video-lightbox-frame {
    position: relative;
    width: 100%;
    aspect-ratio: 16 / 9;
    background-color: #000;
    border-radius: 4px;
    overflow: hidden;
}

.sf-video-lightbox-frame iframe {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    border: 0;
}

/* Barra fica DENTRO do frame (overlay no topo), não acima da caixa —
   achado em 2026-08-14: posicionada acima (top negativo) ela saía da área
   visível em janelas mais baixas, já que o modal centraliza verticalmente e
   sobra pouca margem no topo. Como overlay dentro do frame, sempre visível
   independente da altura da janela. Contador + 4 ações (tela cheia, zoom,
   compartilhar, fechar) — mesmos 4 ícones da barra do lightbox real do
   Elementor. */
.sf-video-lightbox-barra {
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    z-index: 2;
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 8px 12px;
    background: linear-gradient(rgba(0, 0, 0, .6), transparent);
}

.sf-video-lightbox-contador {
    color: #fff;
    font-size: 14px;
    font-weight: 600;
}

.sf-video-lightbox-acoes {
    display: flex;
    gap: 4px;
}

.sf-video-lightbox-acao {
    width: 36px;
    height: 36px;
    border: 0;
    border-radius: 50%;
    background-color: transparent;
    color: #fff;
    font-size: 18px;
    display: flex;
    align-items: center;
    justify-content: center;
    cursor: pointer;
}

.sf-video-lightbox-acao:hover {
    background-color: rgba(255, 255, 255, .15);
}

.sf-video-lightbox-anterior,
.sf-video-lightbox-proximo {
    position: absolute;
    top: 50%;
    transform: translateY(-50%);
    width: 48px;
    height: 48px;
    border: 0;
    border-radius: 50%;
    background-color: rgba(255, 255, 255, .12);
    color: #fff;
    font-size: 32px;
    line-height: 1;
    cursor: pointer;
}

.sf-video-lightbox-anterior {
    left: -64px;
}

.sf-video-lightbox-proximo {
    right: -64px;
}

@media (max-width: 900px) {
    .sf-video-lightbox-anterior {
        left: 8px;
    }

    .sf-video-lightbox-proximo {
        right: 8px;
    }
}

/* ── CTA final — 2 colunas (texto + botão | foto) ──
   A coluna de texto usa como fundo a foto real de interior de loja com
   tingimento navy já "assado" no arquivo (Group-7526.png) — achado na
   auditoria do dump SQL original em 2026-08-14 (correção de uma correção:
   a versão de 2026-08-10 tinha ido longe demais ao presumir que não havia
   nenhuma imagem de fundo nesta seção). */
/* Fundo agora é do wrap inteiro (as 2 colunas), não só da coluna de texto —
   ver comentário no home.php. */
.sf-cta-final-wrap {
    background-image: url("../../uploads/conteudo/cta-final-fundo.png");
    background-size: cover;
    background-position: center;
    border-radius: 8px;
}

.sf-cta-final-texto {
    height: 100%;
    display: flex;
    flex-direction: column;
    justify-content: center;
}

/* 40px/48px no desktop (maior que os outros H2 da página, 32px) — confirmado
   no CSS real; comprime pra 32px/40px no mobile (auditoria 2026-08-14). */
.sf-cta-final-texto h2 {
    color: #fff;
    font-weight: 400;
    font-size: 40px;
    line-height: 48px;
}

@media (max-width: 767px) {
    .sf-cta-final-texto h2 {
        font-size: 32px;
        line-height: 40px;
    }
}

/* Trocado de margin-top negativo fixo pra position:absolute + bottom:0 —
   achado em 2026-08-15: com margin-top a foto inteira sobe junto (cabeça
   fura mais o topo, mas o corpo também some do fundo antes de chegar na
   base), então não dava pra acertar "cabeça na altura da orelha" e "corpo
   até o final" ao mesmo tempo com só um valor de margem. Ancorada no fundo
   da coluna, o corpo sempre encosta na base do fundo navy, e a altura da
   foto (via max-width, mantendo proporção) é que controla o quanto a
   cabeça ultrapassa o topo. */
.sf-cta-final-col-foto {
    position: relative;
}

.sf-cta-final-foto {
    position: absolute;
    left: 50%;
    bottom: 0;
    transform: translateX(-50%);
    width: 100%;
    max-width: 300px;
    height: auto;
    border-radius: 8px;
    margin: 0;
    display: block;
}

/* ── Rodapé ──
   Espaçamento real (post-14.css, 2026-08-15): 88px/72px na linha do
   logo, 24px na linha de copyright — bem mais generoso que os 32px únicos
   usados antes aqui. */
.sf-rodape {
    background-color: var(--sf-navy);
    padding: 0;
}

.sf-rodape-topo {
    padding: 88px 0 72px;
}

.sf-rodape-base {
    padding: 24px 0;
}

/* Logo real ocupa a coluna inteira (achado no elemento 8175091), bem maior
   que os 36px de altura usados antes — aproximado aqui em altura fixa pra
   manter a proporção sem esticar o SVG. */
.sf-rodape-logo {
    height: 64px;
    width: auto;
}

/* Cor/opacidade reais (elemento 71dba28, post-14.css): #E7E8EF a ~37%
   opacidade — antes usava branco a 15% via style inline, quase some. */
.sf-rodape-divisor {
    opacity: 1;
    border: 0;
    border-top: 1px solid rgba(231, 232, 239, .37);
    margin: 0;
}

.sf-rodape a {
    color: var(--sf-lavanda);
    text-decoration: none;
}

.sf-rodape a:hover {
    color: #fff;
}

.btn-sf-voltar-topo {
    color: var(--sf-lavanda);
    text-decoration: none;
    font-size: 14px;
    display: inline-flex;
    align-items: center;
    gap: 8px;
}

.btn-sf-voltar-topo:hover {
    color: #fff;
}

/* ── Página de agradecimento (/cadastro-concluido/) ─────────
   Mesmo fundo do hero da home (navy + imagem), card central com o texto da
   página "Cadastro Concluído" do site antigo (Ticket #385). */
.sf-obrigado {
    background-color: var(--sf-navy);
    background-image: url("../img/hero-section.png");
    background-size: cover;
    background-position: center;
    padding: 72px 16px 88px 16px;
    min-height: 70vh;
}

.sf-obrigado-card {
    max-width: 720px;
    margin: 24px auto 0;
    padding: 48px 40px;
    background-color: var(--sf-navy-medio);
    border-radius: 4px;
    box-shadow: 0 10px 30px rgba(0, 0, 0, .25);
    color: var(--sf-lavanda);
    text-align: center;
}

.sf-obrigado-icone {
    font-size: 56px;
    color: var(--sf-amarelo);
    display: block;
    margin-bottom: 16px;
}

.sf-obrigado h1 {
    color: #fff;
    font-weight: 400;
    font-size: 40px;
    line-height: 48px;
    margin-bottom: 24px;
}

.sf-obrigado .titulo-destaque {
    color: var(--sf-amarelo);
}

.sf-obrigado-whatsapp {
    margin: 8px 0 32px;
}

.sf-obrigado-whatsapp .bi {
    margin-right: 6px;
}

.sf-obrigado-redes-texto {
    font-size: 14px;
    line-height: 22px;
}

.sf-obrigado-redes {
    display: flex;
    justify-content: center;
    gap: 16px;
    margin-bottom: 32px;
}

.sf-obrigado-redes a {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 44px;
    height: 44px;
    border-radius: 50%;
    background-color: var(--sf-navy-claro);
    color: #fff;
    font-size: 20px;
    text-decoration: none;
    transition: background-color .2s;
}

.sf-obrigado-redes a:hover {
    background-color: var(--sf-cyan);
    color: #fff;
}

.sf-obrigado-voltar {
    color: var(--sf-azul-claro);
    font-size: 14px;
    text-decoration: none;
}

.sf-obrigado-voltar:hover {
    color: #fff;
}

@media (max-width: 767px) {
    .sf-obrigado {
        padding: 64px 16px;
    }

    .sf-obrigado-card {
        padding: 32px 20px;
    }

    .sf-obrigado h1 {
        font-size: 30px;
        line-height: 38px;
    }
}