/*
 * Design tokens deste site — docs/guia_de_Estilo_Design_Tokens.md §2 +
 * correções da investigação ao vivo de 2026-08-10/11 (ver docs/plano-de-
 * desenvolvimento.md §2.2/§2.6). Teal como cor de destaque principal
 * (diferente do amarelo do institucional e do sejaumfranqueado), radius de
 * botão quase reto (3px, não pílula). Breakpoint do hambúrguer confirmado
 * igual ao institucional (≥1025px) — navbar-expand-lg do Bootstrap, sem CSS
 * customizado de breakpoint.
 */
:root {
    --fr-navy: #1A3560;
    --fr-teal: #006A75;
    --fr-texto-secundario: #333752;
    --fr-texto: #333333;
    --fr-rosa: #CC3366;
    --fr-container-max: 1216px;
    --fr-secao-y: 64px;
    --fr-divider-color: #D7DBEC;
}

/* Real: `.elementor-widget-text-editor` (regra global do Elementor, aplica
   a TODO parágrafo do site) usa font-family:var(--e-global-typography-text-
   font-family) = "Poppins" — ou seja, o site inteiro é Poppins, não só
   títulos/botões/alguns textos específicos. Rodadas anteriores (2026-08-14)
   foram adicionando Poppins classe por classe conforme cada bug aparecia
   (nav-link, hero-subtitulo, texto de card de benefício...) — a causa raiz
   sempre foi essa, corrigida aqui de uma vez no elemento-base em vez de
   continuar caçando classe por classe. */
body {
    font-family: "Poppins", sans-serif;
    color: var(--fr-texto);
    font-size: 16px;
    line-height: 24px;
}

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

/* Real (widget "divider" do Elementor, 7 ocorrências no HTML de origem —
   confirmado por offset de byte real em 2026-08-15). 6 são visíveis e estão
   replicadas aqui, entre cada seção principal: Sobre→Números, Números→
   Depoimentos, Depoimentos→Benefícios, Benefícios→Galeria, Galeria→Modelos
   (elemento e966973) e CTA final→FAQ. A 7ª ocorrência (offset ~57290 no HTML
   de origem) fica dentro da seção órfã `elementor-hidden-desktop/tablet/
   mobile` (mesmo bloco "DEPOIMENTOS"/"Confira o que dizem sobre nós" já
   identificado como lixo em §2.5 do plano) — não renderiza pra nenhum
   visitante no site real, por isso não foi replicada aqui. 1px sólida, cor
   #D7DBEC — mesmo valor de --e-global-color-1534e72 no CSS de origem. O
   original usa um <span>, sem o reset do Bootstrap; aqui é um <hr>, que
   herda `opacity:.25` do reboot do Bootstrap 5 — sem essa linha a cor certa
   renderizava quase invisível (25% do já claro #D7DBEC). */
.fr-divider {
    max-width: var(--fr-container-max);
    margin: 0 auto;
    border: none;
    border-top: 1px solid var(--fr-divider-color);
    opacity: 1;
}

/* ── Ritmo vertical padrão de seção ────────────────────────────
   64px topo/base, 16px lateral — confirmado via CSS computado ao vivo em
   2026-08-10/11 (plano §2.6), sem variação por breakpoint (diferente do
   sejaumfranqueado, que comprime no mobile). */
.fr-secao {
    padding-top: var(--fr-secao-y);
    padding-bottom: var(--fr-secao-y);
}

.fr-secao-cinza {
    background-color: #F4F6FB;
}

.fr-secao-navy {
    background-color: var(--fr-navy);
    color: #fff;
}

.fr-eyebrow {
    font-size: 14px;
    line-height: 22px;
    font-weight: 500;
    letter-spacing: .04em;
    text-transform: uppercase;
    color: var(--fr-teal);
}

.fr-eyebrow-claro {
    color: #fff;
}

/* Real (checado no CSS compilado, elementos 0e6ed64 "Diferenciais
   competitivos de verdade!" e ec5221c "Somos uma franquia pautada..." —
   mesmo padrão nos dois, confirma que é o valor padrão de título de seção):
   32px/40px no desktop, 28px/36px em telas ≤1024px. O projeto tinha só o
   valor da tela menor aplicado sempre — títulos ficavam menores que o
   real em qualquer largura de tela. */
.fr-section-title {
    font-size: 32px;
    line-height: 40px;
    font-weight: 600;
    color: var(--fr-navy);
}

@media (max-width: 1024px) {
    .fr-section-title { font-size: 28px; line-height: 36px; }
}

.fr-section-title-claro {
    color: #fff;
}

.fr-texto {
    color: var(--fr-texto-secundario);
    line-height: 1.7;
}

/* ── Navbar ─────────────────────────────────────────────────── */
.navbar-franquia {
    background-color: var(--fr-navy);
    padding-top: 1rem;
    padding-bottom: 1rem;
    border-bottom: 1px solid rgba(255, 255, 255, .12);
}

/* Só na home: sem fundo próprio, flutua por cima da imagem do hero — real
   no site de origem (a foto de fundo aparece por baixo do cabeçalho,
   confirmado comparando print em 2026-08-14). A linha fina embaixo do menu
   é real também (confirmado no mesmo print) — só o fundo sólido some,
   a borda continua. */
.navbar-franquia-transparente {
    background-color: transparent;
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    z-index: 20;
}

.logo-franquia {
    height: 56px;
    width: auto;
}

.logo-fallback {
    color: #fff;
    font-weight: 700;
    font-size: 1.2rem;
}

/* Valores reais extraídos do CSS compilado do Elementor (elemento
   7e27bf7, widget nav-menu do cabeçalho) em 2026-08-14: font-size 16px
   (não 15px, correção do palpite da rodada anterior sem essa evidência),
   e o espaçamento entre itens vem inteiro de margin/padding do link (o
   `<li>` do Elementor não tem padding próprio) — `--e-nav-menu-horizontal-
   menu-item-margin: calc(48px / 2)`, ou seja, 24px de cada lado por item,
   48px de vão total entre dois links adjacentes. */
.navbar-dark.navbar-franquia .navbar-nav .nav-link {
    color: #fff;
    font-weight: 400;
    font-size: 16px;
    line-height: 24px;
    padding-left: 24px;
    padding-right: 24px;
}

/* Real: hover não muda a cor do texto do link (2026-08-14). */
.navbar-dark.navbar-franquia .navbar-nav .nav-link:hover {
    color: #fff;
}

/* ── Botões ─────────────────────────────────────────────────────
   Radius quase reto (3px), padding fixo em vez de dimensão absoluta — o
   site original tem botão com tamanho fixo (221x40px, herança do Elementor);
   replicar isso literalmente quebraria com rótulos maiores editados pelo
   painel (ver plano §2.3). */
.btn-franquia-cta {
    background-color: var(--fr-teal);
    color: #fff;
    border: none;
    border-radius: 3px;
    padding: 14px 32px;
    font-weight: 600;
    font-size: 16px;
    display: inline-block;
    text-decoration: none;
    transition: transform .15s ease, box-shadow .15s ease;
}

.btn-franquia-cta:hover {
    color: #fff;
    transform: translateY(-1px);
    box-shadow: 0 6px 16px rgba(0, 0, 0, .15);
}

/* ── Hero ───────────────────────────────────────────────────────
   Valores extraídos direto do CSS compilado do Elementor real (baixado de
   wp-content/litespeed/css/...css em 2026-08-14, seletores dos elementos
   d453745/db22109/9efe846) — não é mais aproximação visual. Sem
   min-height/flex — a altura da seção real vem só do padding fixo, sem
   media query própria pra ele (mesmo valor em qualquer largura). No site
   real o cabeçalho fica em fluxo normal e a seção usa `margin-top`
   negativo pra "subir" por baixo dele; aqui o cabeçalho já é
   `position:absolute` (fora do fluxo, ver .navbar-franquia-transparente),
   então o mesmo resultado visual sai só do padding-top, sem precisar do
   margin-top negativo (que aqui cortaria os primeiros ~106px da seção
   pra fora da tela). */
.hero-franquia {
    background-color: var(--fr-navy);
    background-image: url("../img/hero-bg.png");
    background-size: cover;
    background-position: center;
    color: #fff;
    padding: 233px 16px 120px;
    position: relative;
}

.hero-franquia h1 {
    font-size: 48px;
    line-height: 56px;
    font-weight: 600;
    margin-bottom: 1rem;
    max-width: 736px;
    margin-left: auto;
    margin-right: auto;
}

.hero-franquia-subtitulo {
    font-size: 18px;
    line-height: 26px;
    font-weight: 400;
    margin-bottom: 1.5rem;
    max-width: 716px;
    margin-left: auto;
    margin-right: auto;
    color: rgba(255, 255, 255, .75);
}

@media (max-width: 1024px) {
    .hero-franquia h1 { font-size: 40px; }
    .hero-franquia-subtitulo { font-size: 16px; line-height: 24px; }
}

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

/* Real: botão do hero é branco com texto teal (inverso do CTA padrão),
   contraste sobre o fundo escuro da foto — confirmado no print de
   2026-08-14. Os outros CTAs da página continuam sólidos em teal. */
.hero-franquia .btn-franquia-cta {
    background-color: #fff;
    color: var(--fr-teal);
}

.hero-franquia .btn-franquia-cta:hover {
    color: var(--fr-teal);
    background-color: #fff;
}

/* ── Card final "Seja um Franqueado" ────────────────────────────
   Real: só esta coluna tem cor de fundo própria em toda a página (o resto
   do site é branco — confirmado em 2026-08-15, ver home.php). Teal
   (--e-global-color-primary), radius 8px (elemento 21ab7d0 no CSS de
   origem). Botão invertido (branco/texto teal), mesmo padrão do hero. */
.fr-cta-final-card {
    background-color: var(--fr-teal);
    border-radius: 8px;
    padding: 48px;
}

.fr-cta-final-card .btn-franquia-cta {
    background-color: #fff;
    color: var(--fr-teal);
}

.fr-cta-final-card .btn-franquia-cta:hover {
    color: var(--fr-teal);
    background-color: #fff;
}

@media (max-width: 767px) {
    .fr-cta-final-card {
        padding: 32px 24px;
    }
}

/* Barra decorativa de cores — era o PNG tileável "Barra-de-Cores" real do
   site de origem; 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. Absoluta na borda
   inferior do hero (não em fluxo normal) pra fechar a seção exatamente
   nela, sem sobrar fundo visível depois dela (ajuste de 2026-08-14). */
.fr-hero-barra-cores {
    position: absolute;
    bottom: 0;
    left: 0;
    right: 0;
    height: 10px;
    background: linear-gradient(
        to right,
        #0691d0 0 20%,
        #e0121b 20% 40%,
        #e55f0d 40% 60%,
        #f7bc07 60% 80%,
        #048439 80% 100%
    );
}

/* Mesma barra, mas em fluxo normal — usada como divisória autônoma entre
   seções (real: entre o FAQ e o rodapé, section 3d19fc9 no site de origem). */
.fr-barra-cores {
    height: 12px;
    background: linear-gradient(
        to right,
        #0691d0 0 20%,
        #e0121b 20% 40%,
        #e55f0d 40% 60%,
        #f7bc07 60% 80%,
        #048439 80% 100%
    );
}

@media (max-width: 767px) {
    .hero-franquia h1 { font-size: 30px; line-height: 38px; }
}

/* ── Vídeos (institucional + depoimentos) ──────────────────────
   16:9 pros dois — institucional e os 3 vídeos de depoimento em "histórias
   de sucesso" (faixa de 3 colunas). O uso de 9:16 (retrato) aqui antes era
   suposição minha sem checar a fonte, ("vídeo de depoimento pessoal =
   Reels/vertical", padrão comum mas não o real deste site) — corrigido em
   2026-08-14 checando o CSS compilado real (elemento fff6566,
   `--video-aspect-ratio:1.77777` = 16/9). */
.fr-video-wrap {
    position: relative;
    width: 100%;
    border-radius: 8px;
    overflow: hidden;
    background-color: var(--fr-navy);
}

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

.fr-video-wrap-16-9 {
    aspect-ratio: 16 / 9;
}

.fr-depoimento-foto {
    width: 100%;
    max-width: 320px;
    aspect-ratio: 2 / 3;
    object-fit: cover;
    margin: 0 auto;
    display: block;
}

.fr-depoimento-legenda {
    color: var(--fr-texto-secundario);
    font-size: 14px;
    text-align: center;
}

/* ── Números da rede ────────────────────────────────────────── */
.fr-stat-icone {
    width: 80px;
    height: 80px;
}

.fr-stat-label {
    font-size: 16px;
    font-weight: 400;
    line-height: 24px;
    color: var(--fr-teal);
    margin-bottom: 8px;
}

.fr-stat-numero {
    font-size: 40px;
    font-weight: 600;
    line-height: 48px;
    color: var(--fr-texto-secundario);
}

/* ── Galeria de fotos (faixa rolando sozinha, sem título/setas) ───
   Real: widget Elementor "image-carousel" (Swiper) com
   autoplay:yes, infinite:yes, navigation:none, 5 fotos visíveis por vez
   (3 tablet, 2 mobile), 32px de espaço entre elas, e thumbnail_custom_
   dimension 280x421px (crop fixo por imagem, confirmado no dump do banco:
   "thumbnail_custom_dimension":{"width":"280","height":"421"}) — replicado
   aqui em CSS puro (sem vendorizar Swiper, este projeto só usa Bootstrap).
   O `track` contém a lista de fotos duplicada 2x (ver home.php) e anima
   translateX(-50%) — como as duas metades são idênticas, o loop fica
   contínuo e imperceptível. */
.fr-galeria-secao {
    padding: 64px 0;
    overflow: hidden;
    background-color: #fff;
}

.fr-galeria-marquee {
    overflow: hidden;
    width: 100%;
}

.fr-galeria-track {
    display: flex;
    align-items: center;
    gap: 32px;
    width: max-content;
    animation: fr-galeria-scroll 35s linear infinite;
}

.fr-galeria-item {
    height: 421px;
    width: 280px;
    max-width: none;
    border-radius: 4px;
    object-fit: cover;
    flex-shrink: 0;
}

@keyframes fr-galeria-scroll {
    from { transform: translateX(0); }
    to   { transform: translateX(calc(-50% - 16px)); }
}

@media (prefers-reduced-motion: reduce) {
    .fr-galeria-track { animation: none; }
}

@media (max-width: 767px) {
    .fr-galeria-item { height: 265px; width: 176px; }
}

/* ── Cards de benefício/diferencial ────────────────────────────
   Radius/sombra ainda não medidos ao vivo (plano §2.2/§7 item 8) — valor
   conservador (4px, sem sombra) por analogia ao card de produto do
   institucional, revisar quando a Fase 4 confirmar o CSS real. */
.fr-card-beneficio {
    background: #fff;
    border: 1px solid #E6E9F4;
    border-radius: 4px;
    padding: 28px 24px;
}

/* Real (elemento 8918692, widget "icon box" do Elementor): ícone 56px,
   título 24px/32px (herda Poppins do seletor h1-h6 — .fr-beneficio-titulo
   é um <h3>), texto 16px/24px — o projeto tinha os 3 visivelmente menores
   que o original. */
.fr-beneficio-icone {
    width: 56px;
    height: 56px;
}

.fr-beneficio-titulo {
    font-size: 24px;
    line-height: 32px;
    font-weight: 600;
    color: var(--fr-navy);
    margin-bottom: 16px;
}

.fr-beneficio-texto {
    color: var(--fr-texto-secundario);
    font-size: 16px;
    line-height: 24px;
}

/* Espaço entre a coluna de imagem e a de texto — maior que o gutter padrão
   do Bootstrap (`g-5` = 3rem), a pedido do usuário (2026-08-14): ficavam
   muito próximas. Sobrescreve a variável que o `g-5` já usa, em vez de
   remover a classe. `margin-bottom` (espaço vertical entre o bloco 1 —
   imagem+texto — e o bloco 2 — texto+imagem — do mesmo modelo) também
   aumentado a pedido do usuário na mesma rodada. */
.fr-modelo-bloco {
    --bs-gutter-x: 7rem;
    margin-bottom: 96px;
}

.fr-modelo-bloco:last-of-type {
    margin-bottom: 0;
}

.fr-modelo-imagem {
    width: 100%;
    display: block;
}

/* Bloco 2 de cada modelo (texto+imagem invertido) — a pedido do usuário
   (2026-08-14): a imagem estava alinhada com o topo do título ao lado,
   deve começar na altura do corpo do texto/lista, não do título. */
.fr-modelo-imagem-recuada {
    margin-top: 80px;
}

@media (max-width: 991px) {
    .fr-modelo-imagem-recuada {
        margin-top: 0;
    }
}

/* Real (elementos ee26243 "Transforme sua loja..." e 09f614b "O que
   significa a Conversão?"): 32px/40px e 24px/32px respectivamente — bem
   maiores que o que estava aqui antes (20px/17px). */
.fr-modelo-subtitulo {
    color: var(--fr-navy);
    font-weight: 600;
    font-size: 32px;
    line-height: 40px;
}

.fr-modelo-complemento-titulo {
    color: var(--fr-navy);
    font-weight: 600;
    font-size: 24px;
    line-height: 32px;
}

@media (max-width: 1024px) {
    .fr-modelo-subtitulo { font-size: 28px; line-height: 36px; }
}

.fr-modelo-diferenciais {
    list-style: none;
    padding-left: 0;
    margin-bottom: 0;
}

.fr-modelo-diferenciais li {
    position: relative;
    padding-left: 22px;
    margin-bottom: 10px;
    color: var(--fr-texto-secundario);
    line-height: 1.6;
}

.fr-modelo-diferenciais li::before {
    content: "•";
    position: absolute;
    left: 4px;
    color: var(--fr-teal);
    font-weight: 700;
}

.fr-modelo-diferenciais strong {
    color: var(--fr-navy);
}

/* ── FAQ — acordeão Bootstrap nativo, estilo real do site (borda inferior
   fina, sem card/caixa nem radius) confirmado ao vivo em 2026-08-11
   (plano §2.6): título Poppins 600 22px/32px, resposta com padding
   12px 10px, borda #d5d8dc — sobrescreve o visual padrão "card" do
   Bootstrap. ── */
.fr-accordion .accordion-item {
    border: none;
    border-bottom: 1px solid #d5d8dc;
    border-radius: 0;
    background: transparent;
}

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

.fr-accordion .accordion-button {
    font-weight: 600;
    font-size: 18px;
    line-height: 1.4;
    color: var(--fr-navy);
    background: transparent;
    box-shadow: none;
    padding: 20px 8px;
}

.fr-accordion .accordion-button:not(.collapsed) {
    color: var(--fr-teal);
    background: transparent;
    box-shadow: none;
}

.fr-accordion .accordion-button:focus {
    box-shadow: none;
}

.fr-accordion .accordion-body {
    padding: 4px 8px 20px 8px;
    color: var(--fr-texto-secundario);
}

/* ── Formulário de lead (embutido, seção navy) ─────────────────── */
.fr-form-card {
    background: rgba(255, 255, 255, .06);
    border: 1px solid rgba(255, 255, 255, .15);
    border-radius: 8px;
    padding: 32px;
}

.fr-form-card .form-label {
    color: #fff;
    font-size: 14px;
    font-weight: 500;
}

.fr-form-card .form-control,
.fr-form-card .form-select {
    border-radius: 3px;
    padding: 10px 14px;
}

.fr-form-card .form-check-label a {
    color: #fff;
    text-decoration: underline;
}

/* ── Contato (real no site de origem — link direto de WhatsApp) ──── */
.fr-secao-contato {
    padding-top: 96px;
    padding-bottom: 96px;
}

.btn-franquia-whatsapp {
    display: inline-flex;
    align-items: center;
    gap: 10px;
}

.fr-contato-imagem {
    max-height: 420px;
    width: 100%;
    object-fit: cover;
}

/* ── Página jurídica (Política/Termos) ─────────────────────────── */
.page-header-franquia {
    background-color: var(--fr-navy);
    color: #fff;
    padding: 48px 0;
}

.page-header-franquia h1 {
    font-size: 26px;
    font-weight: 600;
    margin: 0;
}

.pagina-conteudo {
    font-size: 16px;
    line-height: 1.7;
    color: var(--fr-texto-secundario);
}

/* ── WhatsApp flutuante (real no site de origem) ───────────────── */
.fr-whatsapp-flutuante {
    position: fixed;
    right: 20px;
    bottom: 20px;
    width: 56px;
    height: 56px;
    border-radius: 50%;
    background-color: #25D366;
    color: #fff;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 28px;
    box-shadow: 0 4px 14px rgba(0, 0, 0, .25);
    z-index: 1030;
    transition: transform .15s ease;
}

.fr-whatsapp-flutuante:hover {
    color: #fff;
    transform: scale(1.08);
}

/* ── Footer ─────────────────────────────────────────────────────── */
/* Real: barra fina (padding:16px), borda superior 1px branca a 11% de
   opacidade (#FFFFFF1C), texto 14px branco cheio — não cinza 70% como o
   footer anterior usava (ver comentário em franquia.php). */
.footer-franquia {
    background-color: var(--fr-navy);
    color: #fff;
    border-top: 1px solid rgba(255, 255, 255, .11);
}

.fr-footer-texto {
    font-size: 14px;
    line-height: 24px;
}

.fr-footer-link {
    color: #fff;
    text-decoration: none;
}

.fr-footer-link:hover {
    text-decoration: underline;
}