/* =========================================================
   LP REPOSITOR COMPARTILHADO — TOP PEOPLE
   Mobile-first | Vanilla CSS | sem pre-processador
   ========================================================= */

/* ---------- FONTES (Rubik self-hosted; Verdana = system font) ----------
 * Body usa Verdana (decisao validada com o designer: PSD original e Verdana).
 * Verdana eh font do sistema (instalada em Windows/macOS) — nao precisa de
 * @font-face nem preload, e o body ja renderiza instant.
 * Rubik continua self-hosted como variable font pros titulos.
 */
@font-face {
    font-family: 'Rubik';
    src: url('../fonts/Rubik-VariableFont_wght.ttf') format('truetype-variations');
    font-weight: 300 900;
    font-style: normal;
    font-display: swap;
}

/* ---------- TOKENS (custom properties) ---------- */
:root {
    /* Cores — confirmadas com o PSD (parcial) */
    --c-azul:          #0a3a8c;
    --c-azul-escuro:   #071d49;  /* PSD confirmado */
    --c-azul-medio:    #0072ce;  /* PSD confirmado */
    --c-azul-claro:    #c6dae7;  /* PSD confirmado */
    --c-amarelo:       #ffd200;
    --c-laranja:       #f99f21;  /* PSD confirmado */
    --c-verde-cta:     #30ba45;  /* verde do PSD (validado com designer) */
    --c-cinza-claro:   #f4f6fa;
    --c-cinza:         #6b7280;
    --c-texto:         #1a1a1a;
    --c-branco:        #ffffff;

    /* Tipografia */
    --font-heading:    'Rubik', system-ui, -apple-system, 'Segoe UI', sans-serif;
    --font-body:       Verdana, Geneva, Tahoma, sans-serif;  /* match com PSD (validado com designer) */

    /* Escala fluida — evita media queries para tamanho de fonte */
    --fs-h1:           clamp(1.75rem, 4vw + 1rem, 3rem);
    --fs-h2:           clamp(1.5rem, 2.5vw + 1rem, 2.25rem);
    --fs-h3:           clamp(1.125rem, 1vw + 1rem, 1.5rem);
    --fs-body:         clamp(0.95rem, 0.4vw + 0.85rem, 1.0625rem);

    /* Espaco */
    --space-section:   clamp(2.5rem, 6vw, 5rem);
    --container-max:   1200px;
    --container-pad:   clamp(1rem, 4vw, 2rem);

    /* Outros */
    --radius:          0.5rem;
    --transition:      200ms ease;
}

/* ---------- RESET LEVE ---------- */
*, *::before, *::after { box-sizing: border-box; }
* { margin: 0; }

html, body {
    /* scroll-behavior: smooth removido — agora eh handcrafted em main.js
       (scrollIntoView e CSS smooth nao tavam aplicando consistentemente). */
    scroll-padding-top: 80px;  /* ancoras nao ficam por baixo do header sticky */
}
html {
    -webkit-text-size-adjust: 100%;
    background: var(--c-branco);  /* área fora dos 1920px em telas largas */
}

body {
    font-family: var(--font-body);
    font-size: var(--fs-body);
    line-height: 1.5;
    color: var(--c-texto);
    background: var(--c-branco);
    -webkit-font-smoothing: antialiased;
    text-rendering: optimizeLegibility;
    max-width: 1920px;            /* limita o site em telas ultra-wide */
    margin-inline: auto;          /* centraliza, deixando branco nas laterais */
    overflow-x: hidden;           /* evita scroll horizontal de formas decorativas */
}

img, picture, svg, video {
    display: block;
    max-width: 100%;
    height: auto;
}

button, input, select, textarea { font: inherit; color: inherit; }
a { color: inherit; text-decoration: none; }
ul, ol { list-style: none; padding: 0; }

h1, h2, h3, h4, h5, h6 {
    font-family: var(--font-heading);
    font-weight: 700;
    line-height: 1.2;
}
h1 { font-size: var(--fs-h1); }
h2 { font-size: var(--fs-h2); }
h3 { font-size: var(--fs-h3); }

/* Respeita motion reduzido (acessibilidade) */
@media (prefers-reduced-motion: reduce) {
    *, *::before, *::after {
        animation-duration: 0.01ms !important;
        transition-duration: 0.01ms !important;
        scroll-behavior: auto !important;
    }
}

/* Focus visivel para teclado */
:focus-visible {
    outline: 2px solid var(--c-amarelo);
    outline-offset: 3px;
}

/* ---------- UTILS ---------- */
.container {
    width: 100%;
    max-width: var(--container-max);
    margin-inline: auto;
    padding-inline: var(--container-pad);
}

.sr-only {
    position: absolute;
    width: 1px; height: 1px;
    padding: 0; margin: -1px;
    overflow: hidden;
    clip: rect(0, 0, 0, 0);
    white-space: nowrap;
    border: 0;
}

/* ---------- BOTAO BASE ---------- */
.btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 0.5rem;
    padding: 0.875rem 1.5rem;
    border-radius: 0.5rem;  /* PSD: cantos sutis, nao pill */
    font-weight: 700;
    font-family: var(--font-heading);
    font-size: 1.0625rem;  /* padrao consistente em toda a LP (17px) */
    cursor: pointer;
    border: 0;
    transition: transform var(--transition), background var(--transition);
}
.btn--primary {
    background: var(--c-verde-cta);
    color: var(--c-branco);
    /* Padronizacao dos botoes WhatsApp em TODA a LP (hero, solucao, tecnologia,
       cta-final, formulario, rotina). Mobile: full-width capped em 350.
       Desktop: largura fixa 350px (no @media abaixo). */
    width: 100%;
    max-width: 350px;
    padding-block: 1rem;
    font-size: clamp(1.0625rem, 0.5vw + 0.875rem, 1.3125rem);  /* 17 -> 21px desktop */
    box-shadow: 0 4px 12px rgba(48, 186, 69, 0.3);  /* rgb do --c-verde-cta */
}
.btn--primary svg {
    /* Icone WhatsApp maior (era 20px inline no HTML) — visualmente proeminente */
    width: 28px;
    height: 28px;
    flex: 0 0 auto;
}
.btn--primary:hover { transform: translateY(-1px); }

@media (min-width: 992px) {
    .btn--primary {
        width: 350px;  /* desktop: largura fixa (todos os WhatsApp iguais) */
    }
}

/* ---------- SKIP LINK (acessibilidade) ---------- */
.skip-link {
    position: absolute;
    top: -100px;
    left: 0;
    padding: 0.5rem 1rem;
    background: var(--c-azul);
    color: var(--c-branco);
    font-weight: 700;
    z-index: 100;
    transition: top var(--transition);
}
.skip-link:focus { top: 0; }

/* =========================================================
   ESTILOS DAS SECOES (baseline para teste no servidor)
   Vao sendo refinados conforme cada partial for implementado.
   ========================================================= */

/* ---------- HEADER ---------- */
.site-header {
    background: var(--c-branco);
    padding-block: 1rem;
    position: sticky;
    top: 0;
    z-index: 50;
}
.site-header__inner {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 1rem;
}
.site-header__logo {
    display: inline-flex;
    align-items: center;
    text-decoration: none;
}
.site-header__logo img {
    display: block;
    height: 36px;
    width: auto;
}

/* ---------- MENU ----------
 * Mobile (<992px): drawer overlay full-screen quando body.menu-aberto.
 * Desktop (>=992px): nav horizontal sempre visivel.
 */
.site-header__nav { display: none; }

.menu-aberto .site-header__nav {
    display: block;
    position: fixed;
    inset: 0;
    background: rgba(7, 29, 73, 0.5);  /* azul-escuro com alpha */
    z-index: 100;
}
.menu-aberto .site-header__menu {
    background: var(--c-branco);
    width: min(85vw, 320px);
    margin-left: auto;
    height: 100%;
    padding: 4.5rem 1.5rem 2rem;
    display: flex;
    flex-direction: column;
    gap: 0;
    box-shadow: -8px 0 24px rgba(0, 0, 0, 0.15);
}
.menu-aberto .site-header__menu a {
    display: block;
    padding: 1rem 0.5rem;
    border-bottom: 1px solid #eef2f6;
    color: var(--c-azul-escuro);
    font-family: var(--font-body);
    font-weight: 500;
    font-size: 1.0625rem;
}
.menu-aberto .site-header__menu li:last-child a {
    border-bottom: none;
}
body.menu-aberto {
    overflow: hidden;  /* trava scroll atras do drawer */
}

/* Hamburguer vira X quando aberto */
.site-header__menu-toggle {
    position: relative;
    z-index: 101;  /* acima do drawer pra continuar clicavel */
}
.site-header__menu-toggle[aria-expanded="true"] span:nth-child(1) {
    transform: rotate(45deg) translate(5px, 5px);
}
.site-header__menu-toggle[aria-expanded="true"] span:nth-child(2) {
    opacity: 0;
}
.site-header__menu-toggle[aria-expanded="true"] span:nth-child(3) {
    transform: rotate(-45deg) translate(5px, -5px);
}

/* Estilos do menu DESKTOP — sobrescritos no media query abaixo */
.site-header__menu {
    display: flex;
    align-items: center;
    gap: clamp(1rem, 1.5vw, 2rem);
}
.site-header__menu a {
    color: var(--c-azul-escuro);
    font-family: var(--font-body);
    font-weight: 500;
    font-size: 0.9375rem;
    padding: 0.5rem 0;
    transition: color var(--transition);
    white-space: nowrap;
}
.site-header__menu a:hover { color: var(--c-azul-medio); }

.site-header__menu-toggle {
    display: inline-flex;
    flex-direction: column;
    justify-content: center;
    gap: 5px;
    width: 44px;
    height: 44px;
    padding: 10px 8px;
    background: transparent;
    border: 0;
    cursor: pointer;
    border-radius: 6px;
}
.site-header__menu-toggle:hover { background: var(--c-cinza-claro); }
.site-header__menu-toggle span {
    display: block;
    height: 3px;
    background: var(--c-azul-escuro);
    border-radius: 2px;
    transition: transform var(--transition), opacity var(--transition);
}

/* ---------- HERO ---------- */
.hero {
    padding-block: clamp(1.5rem, 4vw, 2.5rem) 0;  /* zero embaixo: imagem encosta na faixa */
    background: var(--c-branco);
}
.hero__inner {
    display: flex;
    flex-direction: column;
    gap: clamp(1.5rem, 4vw, 2.5rem);
}
.hero__texto { max-width: 56ch; }

.hero__titulo {
    color: var(--c-azul-escuro);
    font-size: clamp(1.625rem, 5vw + 0.25rem, 3rem);
    line-height: 1.1;
    margin-bottom: 1.25rem;
    font-weight: 600;  /* Rubik SemiBold, confirmado no PSD */
    text-wrap: balance;  /* distribui linhas de forma equilibrada */
}
.hero__titulo em {
    font-style: normal;
    color: var(--c-azul-medio);
}

.hero__subtitulo {
    color: var(--c-azul-escuro);
    font-size: clamp(1rem, 0.5vw + 0.875rem, 1.1875rem);  /* mais legivel: cresce ate ~19px desktop */
    line-height: 1.45;
    margin-bottom: 1.75rem;
}
.hero__subtitulo strong {
    color: var(--c-azul-medio);
    font-weight: 700;
}

/* .hero__cta: padronizado via .btn--primary — sem overrides especificos */

.hero__imagem img {
    width: 100%;
    height: auto;
    max-width: 540px;
    margin-inline: auto;
}

/* ---------- DESKTOP (>= 992px) ---------- */
@media (min-width: 992px) {
    /* Header: hamburger sai, menu desktop entra */
    .site-header__menu-toggle { display: none; }
    .site-header__nav        { display: block; }
    .site-header             { padding-block: 1.25rem; }
    .site-header__logo img   { height: 48px; }

    /* Desktop: drawer NAO se aplica — anula tudo do estado aberto */
    .menu-aberto .site-header__nav {
        position: static;
        background: none;
        z-index: auto;
    }
    .menu-aberto .site-header__menu {
        background: none;
        width: auto;
        margin: 0;
        height: auto;
        padding: 0;
        flex-direction: row;
        box-shadow: none;
    }
    .menu-aberto .site-header__menu a {
        padding: 0.5rem 0;
        border: none;
        font-size: 0.9375rem;
    }
    body.menu-aberto { overflow: auto; }

    /* Faixa e problemas: PSD desktop = 34pt (~20px), menor que mobile (40pt) */
    .faixa__texto,
    .problemas__eyebrow,
    .problemas__titulo,
    .problemas__rodape {
        font-size: 1.25rem;  /* 20px */
    }


    /* Hero: layout lado a lado, texto a esquerda, imagem a direita */
    .hero { padding-block: clamp(1rem, 2vw, 2rem) 0; }

    .hero__inner {
        flex-direction: row;
        align-items: center;
        gap: clamp(2rem, 4vw, 4rem);
    }
    .hero__texto {
        flex: 1.2 1 0;     /* texto mais largo: cabe "controle e execucao" na mesma linha */
        max-width: none;
    }
    .hero__imagem {
        flex: 1 1 0;
        min-width: 0;
    }
    .hero__imagem img {
        max-width: none;
        width: 100%;
        margin: 0;
    }

    .hero__titulo {
        font-size: clamp(2rem, 2.5vw + 0.5rem, 3rem);
        max-width: 22ch;   /* permite quebra balanceada com "controle e execucao" juntos */
    }

    /* .hero__cta desktop: padronizado via .btn--primary */
}

/* ---------- FAIXA ---------- */
.faixa {
    background: var(--c-azul-medio);
    color: var(--c-branco);
    padding-block: clamp(2.5rem, 5vw, 3.5rem);  /* mais respiro vertical */
    padding-inline: 0;
    text-align: center;
}
.faixa__texto {
    max-width: 60ch;
    margin-inline: auto;
    font-size: clamp(1.125rem, 1.5vw + 0.5rem, 1.5rem);  /* PSD 40pt -> escala ~0.57 = 24px max */
    line-height: 1.45;
    font-weight: 500;
}
.faixa__texto strong {
    color: var(--c-laranja);
    font-weight: 700;
}

/* ---------- PROBLEMAS (4 cards) ---------- */
.problemas {
    /* top mantem, bottom maior (visual estava apertado por baixo) */
    padding-block: clamp(3.5rem, 6vw, 5.5rem) clamp(5rem, 8vw, 7rem);
    background: var(--c-branco);
    position: relative;
    overflow: hidden;  /* recorta grafismos que extrapolam as bordas */
}

/* Grafismos decorativos: PNGs exportadas do PSD. width/height nao preservam aspecto
   (esticam conforme o PSD pede, com overflow:hidden cortando o "T" pra virar "L"/"C") */
.problemas__grafismo {
    position: absolute;
    pointer-events: none;
}

/* Mobile: mostra azul + cinza (laranja nao aparece no mobile do PSD) */
.problemas__grafismo--laranja { display: none; }
.problemas__grafismo--azul {
    top: 0;
    right: -200px;
    width: 230px;
    height: 300px;
}
.problemas__grafismo--cinza {
    bottom: -5px;
    left: -150px;
    width: 180px;
    height: 270px;
}

@media (min-width: 992px) {
    /* Desktop: aparece tambem o laranja, posicoes maiores */
    .problemas__grafismo--laranja {
        display: block;
        top: -140px;
        left: -285px;
        width: 540px;
        height: 420px;
    }
    .problemas__grafismo--azul {
        top: -50px;
        right: -410px;
        width: 590px;
        height: 450px;
    }
    .problemas__grafismo--cinza {
        bottom: -80px;
        left: -180px;
        width: 350px;
        height: 200px;
    }
}
.problemas__eyebrow {
    color: var(--c-laranja);
    font-family: var(--font-heading);
    font-weight: 600;
    font-size: clamp(1.125rem, 1.5vw + 0.5rem, 1.5rem);  /* mesma escala do titulo (PSD 40pt) */
    text-align: center;
    margin-bottom: 0.5rem;
    max-width: 20ch;
    margin-inline: auto;
}
.problemas__titulo {
    color: var(--c-azul-escuro);
    font-family: var(--font-heading);
    font-weight: 700;
    font-size: clamp(1.125rem, 1.5vw + 0.5rem, 1.5rem);
    text-align: center;
    margin-bottom: clamp(1.75rem, 3vw, 2.5rem);
    line-height: 1.3;
    max-width: 22ch;
    margin-inline: auto;
}
@media (min-width: 768px) {
    /* Desktop: textos podem ocupar mais largura */
    .problemas__eyebrow { max-width: none; }
    .problemas__titulo  { max-width: none; }
}
.problemas__lista {
    display: grid;
    grid-template-columns: repeat(2, auto);  /* mobile: colunas se ajustam ao card (100px) */
    justify-content: center;                 /* grid inteiro centralizado no container */
    gap: 1.75rem;                            /* mobile: ~28px entre cards */
    margin-bottom: clamp(1.75rem, 3vw, 2.5rem);
    max-width: 880px;
    margin-inline: auto;
}
@media (min-width: 768px) {
    .problemas__lista {
        grid-template-columns: repeat(4, auto);  /* desktop: 4 colunas auto */
        gap: clamp(2rem, 4vw, 4.5rem);           /* desktop: respiro moderado (cabe em notebook) */
    }
}
.card-problema {
    /* Largura BLINDADA: min/max/width iguais garantem que nada anula */
    width: 110px;
    min-width: 110px;
    max-width: 110px;
    display: flex;
    flex-direction: column;
    align-items: center;
    text-align: center;
    gap: 0.875rem;
}
.card-problema__icone {
    /* Width + height EXPLICITOS pra garantir quadrado bulletproof.
       Sem aspect-ratio (que estava interagindo mal com padding %). */
    width: 110px;
    height: 110px;
    background: var(--c-azul-medio);
    border-radius: 0.75rem;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 18%;
}
@media (min-width: 768px) {
    .card-problema {
        width: 162px;
        min-width: 162px;
        max-width: 162px;
    }
    .card-problema__icone {
        width: 162px;
        height: 162px;
    }
}
.card-problema__icone img {
    width: 100%;
    height: 100%;
    object-fit: contain;
}
.card-problema__titulo {
    font-family: var(--font-body);
    font-size: clamp(0.9375rem, 0.5vw + 0.7rem, 1.0625rem);
    font-weight: 400;
    color: var(--c-azul-escuro);
    line-height: 1.25;
}
.card-problema__titulo span {
    color: var(--c-azul-medio);
    font-weight: 400;  /* mesmo peso da primeira metade do titulo — PSD nao tem bold aqui */
    display: block;
}
@media (min-width: 768px) {
    .card-problema__titulo { font-size: 1.25rem; }  /* desktop: 20px */
}
.problemas__rodape {
    text-align: center;
    font-family: var(--font-heading);
    font-weight: 600;
    color: var(--c-azul-escuro);
    font-size: clamp(1.125rem, 1.5vw + 0.5rem, 1.5rem);  /* mesma escala do eyebrow/titulo */
    max-width: 24ch;  /* mobile: estreito pra quebrar em ~2 linhas (nao encavalar grafismo) */
    margin-inline: auto;
}
@media (min-width: 768px) {
    .problemas__rodape { max-width: 50ch; }  /* desktop: pode espalhar */
}
.problemas__rodape strong {
    color: var(--c-laranja);
    font-weight: 700;
}

/* ---------- SOLUCAO (mobile: foto em cima + texto em bloco solido; desktop: foto bg + texto overlay) ---------- */
.solucao {
    background: var(--c-azul-escuro);
    color: var(--c-branco);
}
/* Mobile (default): foto no fluxo normal, texto em bloco abaixo */
.solucao__bg img {
    display: block;
    width: 100%;
    height: auto;
}
.solucao__conteudo {
    padding: clamp(1.75rem, 4vw, 2.5rem) clamp(1.5rem, 6vw, 2.5rem);  /* mais respiro horizontal */
}

@media (min-width: 992px) {
    /* Desktop: foto define a altura da secao + texto sobreposto na esquerda */
    .solucao {
        position: relative;
        overflow: hidden;
        padding-block: 0;  /* sem padding — a foto define a altura */
    }
    .solucao__bg {
        position: relative;
        z-index: 0;
    }
    .solucao__bg img {
        display: block;
        width: 100%;
        height: auto;  /* aspect ratio natural da foto define a altura da secao */
    }
    /* Overlay leve gradiente: escurece lado esquerdo (texto) e libera a direita (pessoa) */
    .solucao::after {
        content: '';
        position: absolute;
        inset: 0;
        z-index: 1;
        background: linear-gradient(90deg,
            rgba(7, 29, 73, 0.55) 0%,
            rgba(7, 29, 73, 0.2) 50%,
            transparent 100%);
        pointer-events: none;
    }
    /* Texto absoluto no lado esquerdo, vertical-centralizado.
       Escapa do .container (max-width 1200 centralizado).
       Left aumentado pra texto nao ficar grudado na borda esquerda. */
    .solucao__conteudo {
        position: absolute;
        left: clamp(5rem, 14vw, 22rem);  /* texto longe da borda esquerda */
        top: 45%;                         /* sobe um pouco pra caber com os novos espacamentos */
        transform: translateY(-50%);
        max-width: 800px;                 /* desktop: area do conteudo */
        width: auto;
        padding: 0;
        margin: 0;
        z-index: 2;
    }
    /* Desktop: tamanhos fixos + mais respiro entre elementos */
    .solucao__titulo {
        font-size: 2.1875rem;     /* 35px */
        margin-bottom: 2rem;      /* mais respiro titulo -> subtitulo (era 1.25) */
    }
    .solucao__texto {
        font-size: 1.5625rem;    /* 25px */
        max-width: 580px;
        margin-bottom: 2.5rem;   /* mais respiro subtitulo -> botao (era 1.75) */
    }
}
.solucao__titulo {
    color: var(--c-branco);
    font-family: var(--font-heading);
    font-weight: 600;
    font-size: clamp(1.375rem, 2vw + 0.5rem, 2.5rem);  /* maior em ambos: 22-40px */
    line-height: 1.2;
    margin-bottom: 1.25rem;
    text-wrap: balance;
}
.solucao__texto {
    color: var(--c-branco);
    font-size: clamp(1.0625rem, 0.6vw + 0.8rem, 1.375rem);  /* maior em mobile tambem: 17-22px */
    line-height: 1.5;
    margin-bottom: 1.75rem;
    max-width: 50ch;
}
.solucao__texto em {
    font-style: normal;
    color: var(--c-branco);  /* mobile: tudo branco, so muda peso */
    font-weight: 700;
}
/* .solucao__cta: padronizado via .btn--primary */

/* ---------- ROTINA / COMO FUNCIONA (6 cards icone + titulo + descricao) ---------- */
.rotina {
    padding-block: clamp(2.5rem, 5vw, 4rem);
    background: var(--c-azul-medio);  /* PSD confirmado: #0072ce (mesmo mobile e desktop) */
    position: relative;
    overflow: hidden;  /* recorta grafismos que extrapolam as bordas */
}

/* Grafismos decorativos (PNGs do PSD). Mobile esconde, desktop posiciona. */
.rotina__grafismo {
    display: none;
    pointer-events: none;
}
@media (min-width: 992px) {
    .rotina__grafismo {
        display: block;
        position: absolute;
    }
    .rotina__grafismo--branco {
        /* lado esquerdo */
        top: -340px;
        left: -120px;
        width: 350px;
        height: 550px;
    }
    .rotina__grafismo--verde {
        /* lado direito */
        bottom: -140px;
        right: -320px;
        width: 600px;
        height: 400px;
    }
}
.rotina__titulo {
    color: var(--c-branco);
    font-family: var(--font-heading);
    font-weight: 700;
    font-size: clamp(1.25rem, 1.5vw + 0.5rem, 1.75rem);
    text-align: center;
    margin-bottom: clamp(2rem, 4vw, 3rem);
    line-height: 1.25;
    max-width: 32ch;
    margin-inline: auto;
}
@media (min-width: 992px) {
    .rotina__titulo { max-width: 64ch; }  /* desktop: titulo em uma linha */
}
.rotina__lista {
    display: grid;
    grid-template-columns: repeat(2, 1fr);  /* mobile 2x3 */
    gap: clamp(1.25rem, 3vw + 0.5rem, 2.5rem);  /* mobile ~20 -> desktop 40 */
    margin-bottom: clamp(2rem, 4vw, 3rem);
    max-width: 1000px;
    margin-inline: auto;
}
@media (min-width: 768px) {
    .rotina__lista {
        grid-template-columns: repeat(3, 1fr);  /* desktop 3x2 */
    }
}
.card-rotina {
    display: flex;
    flex-direction: column;
    align-items: center;
    text-align: center;
    gap: clamp(0.75rem, 1vw + 0.4rem, 1.25rem);  /* mobile ~12 -> desktop 20 */
}
.card-rotina__icone {
    width: 64px;
    height: 64px;
    display: flex;
    align-items: center;
    justify-content: center;
}
@media (min-width: 992px) {
    .card-rotina__icone {
        width: 96px;  /* desktop: icones maiores */
        height: 96px;
    }
}
.card-rotina__icone img {
    width: 100%;
    height: 100%;
    object-fit: contain;
}
.card-rotina__titulo {
    font-family: var(--font-heading);
    font-weight: 700;
    font-size: clamp(1.125rem, 1vw + 0.75rem, 1.5625rem);  /* mobile 18 -> desktop 25 */
    color: var(--c-azul-claro);  /* #c6dae7 */
    line-height: 1.2;
}
.card-rotina__desc {
    font-size: clamp(1rem, 0.85vw + 0.7rem, 1.375rem);  /* mobile 16 -> desktop 22 */
    font-weight: 400;             /* regular (spec) */
    color: var(--c-azul-claro);
    line-height: 1.4;
    max-width: 28ch;
}
.rotina__cta-wrap {
    text-align: center;
}

/* ---------- TECNOLOGIA (texto + 3 bullets + CTA + foto homem c/ celular) ----------
   Mobile: stacked (foto em cima, texto embaixo)
   Desktop (>=992px): side-by-side (texto esquerda, foto direita) */
.tecnologia {
    /* padding-block 0 = foto cola no topo da secao.
       Espaco interno (foto -> texto) controlado pelo flex gap do .tecnologia__inner. */
    padding-block: 0;
    background-color: var(--c-branco);
}
.tecnologia__inner {
    display: flex;
    flex-direction: column-reverse;  /* mobile: foto em cima, texto embaixo */
    gap: clamp(2.5rem, 5vw, 3.5rem);  /* gap maior pra separacao visual clara */
}
.tecnologia__titulo {
    color: var(--c-azul-medio);  /* PSD: #0072ce */
    font-family: var(--font-heading);
    font-weight: 600;
    font-size: clamp(1.5rem, 2.5vw + 0.5rem, 2.25rem);  /* PSD 45pt — ratio 1.55 vs corpo */
    line-height: 1.2;
    margin-bottom: 1.25rem;
}
.tecnologia__intro {
    color: var(--c-azul-escuro);  /* #071d49 */
    font-size: clamp(1rem, 1.6vw + 0.4rem, 1.4375rem);  /* PSD 29pt — corpo */
    line-height: 1.5;
    margin-bottom: 1.5rem;
}
.tecnologia__bullets {
    display: flex;
    flex-direction: column;
    gap: 1rem;
    margin-bottom: 1.75rem;
}
.tecnologia__bullet {
    display: flex;
    align-items: center;
    gap: 0.875rem;
    font-size: clamp(1rem, 1.6vw + 0.4rem, 1.4375rem);  /* PSD 29pt — mesmo do corpo */
    font-weight: 400;  /* regular (spec nao indica bold) */
    color: var(--c-azul-escuro);
    color: var(--c-azul-escuro);
}
.tecnologia__bullet img {
    width: 40px;
    height: 40px;
    flex: 0 0 auto;
    object-fit: contain;
}
.tecnologia__fechamento {
    color: var(--c-azul-medio);  /* PSD: #0072ce */
    font-size: clamp(1rem, 1.6vw + 0.4rem, 1.4375rem);  /* PSD 29pt — mesmo do corpo */
    font-weight: 700;  /* bold (inteiro, conforme spec) */
    line-height: 1.5;
    margin-bottom: 1.75rem;
}
.tecnologia__fechamento strong {
    /* base ja eh 700 — forca herdar pra evitar 'bolder' do browser puxar pra 900 (mais grossa que o resto) */
    font-weight: inherit;
}
/* .tecnologia__cta: padronizado via .btn--primary */
.tecnologia__foto img {
    display: block;
    width: 100%;
    height: auto;
    max-width: 540px;
    margin-inline: auto;
}
/* Mobile: respiro no wrapper interno (testado no DevTools pelo user) */
.tecnologia__texto-conteudo {
    padding: 2rem;
    margin: 0 auto;
    max-width: 95vw;
    text-align: left;
}

@media (min-width: 992px) {
    /* Tecnologia desktop: foto como BACKGROUND-IMAGE da secao.
       Path relativo do CSS file: do /assets/css/ pra /assets/img/fotos/ = ../img/fotos/
       background-size: auto 100% faz a foto ocupar 100% da altura da secao,
       largura proporcional ao aspect ratio — foto INTEIRA, sem crop.
       max-height matematicamente garante que a foto NUNCA exceda metade da
       viewport (impedindo invasao da area do texto):
         - 1015px = altura fisica do arquivo (limite superior absoluto)
         - 57.3vw = 100vw / (886/1015) / 2 — altura em que foto width = 50vw exato */
    .tecnologia {
        background-image: url('../img/fotos/tecnologia-desktop.webp');
        background-repeat: no-repeat;
        background-position: right center;
        background-size: auto 100%;
        max-height: min(1015px, 57.3vw);
        padding-block: 0;  /* desktop: foto via bg toca as bordas (anula padding mobile) */
    }
    /* Esconde o <picture> no desktop — foto vem via background */
    .tecnologia__foto {
        display: none;
    }
    /* Inner vira so o texto, ocupando metade esquerda da viewport */
    .tecnologia__inner {
        display: block;
    }
    .tecnologia__texto {
        max-width: 50%;                              /* texto ocupa metade esquerda */
        padding-block: clamp(3rem, 6vw, 5rem);       /* respiro vertical generoso */
    }
    /* Wrapper interno: 80% da largura do pai, alinhado a direita.
       Como o pai escala com a viewport (50% dela), o inner tambem escala —
       em telas largas o conteudo desliza pra direita, mais perto da foto. */
    .tecnologia__texto-conteudo {
        max-width: 80%;
        margin-left: auto;
        padding-right: clamp(2rem, 3vw, 3rem);       /* respiro entre texto e foto */
        padding-left: clamp(2rem, 4vw, 4rem);        /* respiro a esquerda em telas grandes */
    }
    .tecnologia__bullet img {
        width: 48px;
        height: 48px;
    }
}

/* ---------- COBERTURA (titulo + mapa + lista 2-col + selo) ---------- */
.cobertura {
    padding-block: clamp(3rem, 6vw, 5rem);
    background: var(--c-azul-medio);  /* PSD confirmado: #0072ce */
    color: var(--c-branco);
}

/* Mobile: stack vertical centralizado */
.cobertura__inner {
    display: flex;
    flex-direction: column;
    gap: clamp(1.5rem, 3vw, 2.25rem);
    align-items: center;
    text-align: center;
}
.cobertura__titulo {
    color: var(--c-branco);
    font-family: var(--font-heading);
    font-weight: 700;
    font-size: clamp(1.5rem, 2vw + 0.5rem, 2.25rem);
    line-height: 1.2;
    max-width: 24ch;
    margin-inline: auto;
}
.cobertura__titulo em {
    font-style: normal;
    color: var(--c-laranja);
}
.cobertura__mapa {
    width: 100%;
    height: auto;
    max-width: 520px;
    display: block;
}
.cobertura__lista {
    /* Mobile: 2 cols com COLUMN-FILL — col1 = GS/Camp/Soro, col2 = RP/SJRP/BS
       (prioriza leitura top-down por coluna, mantendo a ordem PHP) */
    display: grid;
    grid-template-columns: repeat(2, auto);
    grid-template-rows: repeat(3, auto);
    grid-auto-flow: column;
    gap: 0.5rem 2rem;
    justify-content: center;
    font-size: 1.125rem;
}
.cobertura__lista li {
    color: var(--c-branco);
    text-align: left;
}
.cobertura__lista li::before {
    content: '• ';
    color: var(--c-branco);
    margin-right: 0.25rem;
}
.cobertura__selo {
    color: var(--c-laranja);
    font-weight: 600;
    font-size: 1.0625rem;
}

/* Desktop: grid-areas redistribui — texto+lista+selo na esquerda, mapa direita */
@media (min-width: 992px) {
    .cobertura {
        padding-block: clamp(4rem, 8vw, 6.5rem);  /* desktop: secao mais alta */
    }
    .cobertura__inner {
        display: grid;
        grid-template-columns: minmax(0, 1fr) minmax(0, 1.85fr);  /* texto ainda menor, mapa maior */
        grid-template-areas:
            "titulo mapa"
            "lista  mapa"
            "selo   mapa";
        align-items: center;
        column-gap: clamp(2rem, 4vw, 4rem);
        row-gap: 1.25rem;
        text-align: left;
    }
    .cobertura__titulo {
        grid-area: titulo;
        margin-inline: 0;
        max-width: none;
        font-size: clamp(1.5rem, 1.5vw + 0.5rem, 1.875rem);  /* desktop: titulo menor (cap 30px) */
    }
    .cobertura__mapa {
        grid-area: mapa;
        max-width: none;
    }
    .cobertura__lista {
        grid-area: lista;
        /* Desktop: 1 col, todas as 6 cidades empilhadas top-down em ordem PHP */
        grid-template-columns: 1fr;
        grid-template-rows: auto;       /* reset do explicit-rows do mobile */
        grid-auto-flow: row;             /* reset do column-fill do mobile */
        justify-content: start;
        font-size: 1.25rem;              /* desktop: cidades um pouco maiores */
    }
    .cobertura__selo {
        font-size: 1.25rem;
    }
    .cobertura__selo { grid-area: selo; }
}

/* ---------- EQUIPE PRONTA (3 cards outline: uniforme, EPIs, treinamento) ----------
   Mobile + Desktop: 3 cards lado-a-lado, so muda tamanho.
   Bg azul-escuro, cards com border outline azul-medio sem fill. */
.equipe {
    position: relative;
    overflow: hidden;
    padding-block: clamp(4rem, 8vw, 6.5rem);  /* secao mais alta */
    background: var(--c-azul-escuro);
    color: var(--c-branco);
    text-align: center;
}
.equipe__titulo {
    color: var(--c-laranja);
    font-family: var(--font-heading);
    font-weight: 700;
    font-size: clamp(1.5rem, 3vw + 0.5rem, 2.25rem);
    line-height: 1.2;
    margin-bottom: 0.75rem;
}
.equipe__subtitulo {
    color: var(--c-branco);
    font-size: clamp(1rem, 1.6vw + 0.4rem, 1.4375rem);  /* PSD 29pt — ratio 1.55 vs titulo (45pt) */
    line-height: 1.5;
    margin-bottom: clamp(1.5rem, 4vw, 2.5rem);
    max-width: 50ch;
    margin-inline: auto;
}
.equipe__subtitulo-accent { color: var(--c-laranja); font-weight: 600; }

.equipe__lista {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: clamp(0.75rem, 3vw, 2.5rem);  /* gap maior entre os 3 cards */
    max-width: 720px;
    margin-inline: auto;
}
.card-equipe {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: clamp(0.5rem, 1.5vw, 1rem);
    padding: clamp(0.75rem, 2vw, 1.5rem);
    aspect-ratio: 1;
    border: 2px solid var(--c-azul-medio);
    border-radius: clamp(12px, 1.5vw, 20px);
    background: transparent;
}
.card-equipe__icone {
    display: flex;
    align-items: center;
    justify-content: center;
}
.card-equipe__icone img {
    width: clamp(40px, 8vw, 80px);
    height: auto;
    display: block;
}
.card-equipe__titulo {
    color: var(--c-branco);
    font-family: var(--font-heading);
    font-weight: 600;
    font-size: clamp(0.8125rem, 1.5vw + 0.25rem, 1.125rem);
    line-height: 1.2;
    margin: 0;
}

/* Grafismos decorativos: mobile hidden, desktop posicionados */
.equipe__grafismo {
    position: absolute;
    pointer-events: none;
    display: none;
}
@media (min-width: 992px) {
    .equipe {
        /* asymmetric: topo menor (compensa altura do titulo + line-height fantasma) */
        padding-block: clamp(2.5rem, 5vw, 4rem) clamp(4rem, 8vw, 6.5rem);
    }
    .equipe__titulo {
        margin-bottom: 2.5rem;   /* 40px — mais respiro antes do subtitulo */
    }
    .equipe__lista {
        max-width: 900px;
        gap: 5rem;               /* 80px */
    }
    .equipe__grafismo--branco {
        display: block;
        bottom: -190px;
        left: -125px;
        width: 320px;
        height: 450px;
    }
    .equipe__grafismo--laranja {
        display: block;
        top: -40px;
        right: -180px;
        width: 450px;
        height: 359px;
        rotate: 90deg;
    }
}

/* ---------- REDES DE ATUACAO (grid de 12 logos) ----------
   Mobile  = 4 cols x 3 rows
   Desktop = 6 cols x 2 rows
   Cada card: branco com border outline laranja, logo centralizado. */
.redes {
    /* asymmetric: topo menor (compensa altura do titulo + seu margin-bottom),
       fundo maior (espelho visual do espaco acima das logos) */
    padding-block: clamp(2.5rem, 5vw, 4rem) clamp(4rem, 8vw, 6.5rem);
    background: var(--c-branco);
}
.redes__titulo {
    color: var(--c-azul-medio);
    font-family: var(--font-heading);
    font-weight: 700;
    font-size: clamp(1.5rem, 2.5vw + 0.5rem, 2rem);
    text-align: center;
    margin-bottom: clamp(1.5rem, 4vw, 2.5rem);
}
.redes__lista {
    display: grid;
    grid-template-columns: repeat(4, 1fr);  /* mobile: 4 colunas */
    gap: clamp(0.5rem, 1.5vw, 1rem);
    max-width: 1100px;
    margin-inline: auto;
}
.card-rede {
    display: flex;
    align-items: center;
    justify-content: center;
    aspect-ratio: 1;
    padding: clamp(0.5rem, 1.5vw, 1rem);
    background: var(--c-branco);
    border: 2px solid var(--c-laranja);
    border-radius: clamp(10px, 1.2vw, 16px);
}
.card-rede img {
    max-width: 100%;
    max-height: 100%;
    width: auto;
    height: auto;
    object-fit: contain;
    display: block;
}
.card-rede__placeholder {
    color: var(--c-cinza, #6b7280);
    font-size: 0.75rem;
    text-align: center;
    font-weight: 500;
}
@media (min-width: 992px) {
    .redes__titulo {
        font-size: 2.1875rem;  /* 35px desktop */
    }
    .redes__lista {
        grid-template-columns: repeat(6, 1fr);  /* desktop: 6 colunas */
        gap: 1.25rem;
    }
}

/* ---------- CTA FINAL (foto em area cinza + texto em area branca) ----------
   Mobile: stacked (foto cinza em cima, texto branco embaixo)
   Desktop: side-by-side (texto esquerda, foto direita) — bg uniforme cinza */

/* Mobile (default): areas separadas, cada uma com seu bg */
.cta-final__foto-area {
    background: var(--c-azul-claro);  /* #c6dae7 */
    padding: clamp(2rem, 5vw, 3rem) 1rem 0;  /* sem padding-bottom: foto cola no bottom da area cinza */
    text-align: center;
}
.cta-final__foto {
    display: block;
    width: 100%;
    height: auto;
    max-width: 300px;  /* foto compacta — nao ocupa o viewport */
    margin-inline: auto;
}
.cta-final__texto-area {
    background: var(--c-branco);
    padding-block: clamp(2rem, 5vw, 3rem);
}
.cta-final__titulo {
    color: var(--c-azul-medio);  /* "Sua execucao... muito mais" — azul-medio */
    font-family: var(--font-heading);
    font-weight: 600;
    font-size: clamp(1.375rem, 2.5vw + 0.5rem, 2.25rem);
    line-height: 1.2;
    margin-bottom: 1rem;
    /* sem text-wrap: balance — estava deixando linha 1 quebrar prematuramente
       em vez de encher antes de wrap */
}
.cta-final__titulo em {
    font-style: normal;
    color: var(--c-azul-escuro);  /* "eficiente e mensuravel" — azul-escuro */
}
.cta-final__subtitulo {
    color: var(--c-azul-escuro);
    font-size: 1.0625rem;
    line-height: 1.5;
    margin-bottom: 1.75rem;
}
.cta-final__subtitulo strong {
    color: var(--c-azul-medio);  /* "Top People" — azul-medio bold */
    font-weight: 700;
}
/* .cta-final__cta: padronizado via .btn--primary */

@media (min-width: 992px) {
    /* Desktop: bg cinza uniforme, foto colada no bottom, texto centralizado vertical */
    .cta-final {
        background: var(--c-azul-claro);
        display: flex;
        flex-direction: row-reverse;
        align-items: flex-end;  /* default: tudo alinha embaixo */
        justify-content: center;
        gap: clamp(2rem, 4vw, 4rem);
        padding: clamp(2.5rem, 4vw, 3.5rem) clamp(1rem, 4vw, 2rem) 0;  /* sem padding-bottom */
    }
    .cta-final__foto-area {
        background: transparent;
        padding: 0;
        flex: 0 1 460px;  /* foto maior */
    }
    .cta-final__foto {
        max-width: 100%;
        width: 100%;
        display: block;  /* sem o gap fantasma do inline-block */
    }
    .cta-final__texto-area {
        background: transparent;
        padding: 0;
        flex: 0 1 500px;
        align-self: center;  /* texto centralizado vertical (override do flex-end do parent) */
        padding-bottom: clamp(2.5rem, 4vw, 3.5rem);  /* compensa o padding removido do section */
    }
    .cta-final__texto-area > .container {
        max-width: none;
        padding: 0;
        margin: 0;
    }
    .cta-final__titulo {
        font-size: 2.1875rem;     /* 35px */
    }
    .cta-final__subtitulo {
        font-size: 1.375rem;       /* 22px */
    }
}

/* ---------- FORMULARIO ----------
   Espelha o estilo da /contato/ institucional:
   - Mobile: stacked (intro -> wpp -> form)
   - Desktop (>=992px): 2 colunas (intro/wpp esquerda | form direita)
   - Inputs com placeholder-as-label (sem label visivel)
   - Submit azul-medio, compacto (nao 100% width)
*/
.formulario {
    position: relative;       /* ancora dos grafismos decorativos (::before / ::after) */
    overflow: hidden;          /* corta grafismos que ultrapassam */
    padding-block: var(--space-section);
    background: var(--c-azul-medio);  /* mesmo azul da cobertura — alternancia branco/azul/branco */
    color: var(--c-branco);
}
.formulario__layout {
    display: flex;
    flex-direction: column;
    gap: clamp(2rem, 5vw, 3rem);
    position: relative;       /* cria stacking pro z-index abaixo funcionar */
    z-index: 1;               /* layout sempre acima dos grafismos */
}

/* --- Coluna intro (titulo + subtitulo + wpp) --- */
.formulario__intro {
    text-align: left;
}
.formulario__titulo {
    color: var(--c-branco);  /* sobre o bg azul */
    font-family: var(--font-heading);
    font-weight: 700;  /* alinhado com outros titulos da LP (Rubik Bold) */
    font-size: clamp(2rem, 4vw + 0.5rem, 2.5rem);
    line-height: 1.1;
    margin-bottom: 1rem;
    text-wrap: balance;
}
.formulario__titulo-accent {
    color: var(--c-laranja);  /* mantem o accent laranja sobre o azul */
}
.formulario__subtitulo {
    color: var(--c-branco);
    font-size: 1rem;
    line-height: 1.5;
    margin-bottom: 1.5rem;
    max-width: 38ch;
}
/* .formulario__wpp: UNICO botao WhatsApp da LP — overrides do padrao .btn--primary */
.formulario__wpp {
    width: 280px;
    max-width: 280px;        /* override do max-width: 350 do .btn--primary */
    min-width: 0;
    font-size: 1.375rem;     /* 22px */
}
.formulario__wpp svg {
    width: 30px;             /* override do 28px padrao */
    height: 30px;
}
@media (min-width: 992px) {
    /* anula o width: 350px que o .btn--primary aplica no desktop */
    .formulario__wpp { width: 280px; }
}

/* --- Form (coluna direita) --- */
.formulario__form {
    display: flex;
    flex-direction: column;
    gap: 1rem;
}
.formulario__campo {
    display: flex;
    flex-direction: column;
    gap: 0.375rem;
}
.formulario__campo input,
.formulario__campo textarea {
    padding: 0.9375rem 1rem;
    border: 1px solid #d0d5dd;
    border-radius: 0.375rem;
    background: var(--c-branco);
    font: inherit;
    color: var(--c-texto);
    transition: border-color var(--transition), box-shadow var(--transition);
}
.formulario__campo input::placeholder,
.formulario__campo textarea::placeholder {
    color: #8a929b;  /* cinza-medio dos placeholders na referencia */
    opacity: 1;  /* evita o lighten do Firefox */
}
.formulario__campo input:focus,
.formulario__campo textarea:focus {
    outline: none;
    border-color: var(--c-azul-medio);
    box-shadow: 0 0 0 3px rgba(0, 114, 206, 0.18);
}
.formulario__campo input[aria-invalid="true"],
.formulario__campo textarea[aria-invalid="true"] {
    border-color: #d9534f;
}
.formulario__obrigatorios {
    color: var(--c-azul-claro);  /* #c6dae7 — mesma cor das legendas da Rotina */
    font-size: 0.9375rem;
    margin-block: 0.25rem;
}

/* Checkbox LGPD mantem label visivel */
.formulario__campo--checkbox {
    flex-direction: row;
    align-items: flex-start;
    gap: 0.625rem;
    flex-wrap: wrap;
}
.formulario__campo--checkbox input { margin-top: 0.25rem; flex: 0 0 auto; }
.formulario__campo--checkbox label {
    flex: 1 1 0;
    font-weight: 400;
    color: var(--c-branco);
    font-size: 0.9375rem;
}
.formulario__campo--checkbox a { color: var(--c-branco); text-decoration: underline; font-weight: 600; }

.formulario__erro {
    color: #d9534f;
    font-size: 0.9375rem;       /* maior que antes (era 13px → 15px) */
    font-weight: 700;            /* bold pra destacar */
}
/* Erro do checkbox LGPD deve ocupar linha cheia (sem grudar do lado do label) */
.formulario__campo--checkbox .formulario__erro {
    flex-basis: 100%;
    width: 100%;
    margin-top: 0.25rem;
}
.formulario__alerta {
    padding: 1rem 1.25rem;
    border-radius: var(--radius);
    margin-bottom: 1.5rem;
    text-align: center;
    font-weight: 600;
}
.formulario__alerta--sucesso { background: #e7f6e7; color: #1f6b1f; }
.formulario__alerta--erro    { background: #fdecea; color: #9b1e1a; }

/* Submit: laranja sobre bg azul — alto contraste, alinha com accent do titulo */
.formulario__submit {
    align-self: flex-start;
    background: var(--c-laranja);
    color: var(--c-branco);
    font-family: var(--font-heading);
    font-weight: 700;
    font-size: 1rem;
    padding: 0.875rem 2.5rem;
    border: 0;
    border-radius: 0.375rem;
    cursor: pointer;
    margin-top: 0.5rem;
    transition: background var(--transition), transform var(--transition);
}
.formulario__submit:hover {
    background: #e88a0e;  /* laranja um pouco mais escuro */
    transform: translateY(-1px);
}

/* Honeypot anti-spam — invisivel pra humanos, presente pro DOM */
.formulario__hp {
    position: absolute;
    left: -9999px;
    width: 1px;
    height: 1px;
    overflow: hidden;
}

/* Grafismos decorativos (mobile: hidden; desktop: posicionados pelo @media) */
.formulario__grafismo {
    position: absolute;
    pointer-events: none;
    display: none;
    z-index: 0;               /* atras do conteudo */
}

/* Desktop: 2 colunas lado-a-lado */
@media (min-width: 992px) {
    .formulario__layout {
        display: grid;
        grid-template-columns: 1.15fr 1fr;  /* intro mais largo: cabe "Entre em Contato" em uma linha */
        gap: clamp(2rem, 5vw, 5rem);
        align-items: start;
    }
    .formulario__titulo {
        font-size: clamp(2.25rem, 2.5vw + 1rem, 3rem);
        margin-bottom: 1.75rem;  /* mais respiro abaixo do titulo */
    }
    .formulario__subtitulo {
        font-size: 1.1875rem;     /* maior no desktop */
        margin-bottom: 2.5rem;    /* mais respiro antes do botao wpp */
        max-width: 34ch;
    }

    /* Grafismos decorativos (PNG) — desktop apenas */
    .formulario__grafismo--verde {
        display: block;
        top: 75%;                  /* deslocado pra baixo */
        left: -120px;
        transform: translateY(-50%);
        width: 380px;
        height: 300px;
    }
    .formulario__grafismo--laranja {
        display: block;
        top: 25%;                  /* deslocado pra cima */
        right: -180px;
        transform: translateY(-50%);
        width: 450px;
        height: 320px;
    }
}

/* ---------- FOOTER ----------
   Mobile: stacked vertical, tudo centralizado
   Desktop (>=992px): grid 3 colunas (brand+sociais | menu | endereco)
   Faixa laranja fina no topo (era a "amarela" no PSD) */
.site-footer {
    background: var(--c-azul-escuro);
    color: var(--c-branco);
    padding-block: clamp(2.5rem, 5vw, 4rem) 0;
    border-top: 4px solid var(--c-laranja);  /* faixa amarela/laranja decorativa */
}
.site-footer__inner {
    display: flex;
    flex-direction: column;
    gap: clamp(1.75rem, 4vw, 2.5rem);
    align-items: center;
    text-align: center;
}

.site-footer__logo img {
    display: block;
    height: 72px;  /* logo maior, com mais presenca */
    width: auto;
}
.site-footer__logo-placeholder {
    font-family: var(--font-heading);
    font-weight: 800;
    font-size: 1.5rem;
    color: var(--c-branco);
}
.site-footer__sociais {
    display: flex;
    align-items: center;
    gap: 1.25rem;
}
.site-footer__social-link {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 32px;
    height: 32px;
    color: var(--c-branco);
    transition: opacity var(--transition);
}
.site-footer__social-link:hover { opacity: 0.7; }
.site-footer__social-link svg {
    width: 22px;
    height: 22px;
}

/* Menu */
.site-footer__menu {
    display: flex;
    flex-direction: column;
    gap: 1.25rem;
    font-family: var(--font-heading);
    font-weight: 700;
    font-size: 1.0625rem;
}
.site-footer__menu a {
    color: var(--c-branco);
    transition: opacity var(--transition);
}
.site-footer__menu a:hover { opacity: 0.7; }

/* Endereco */
.site-footer__endereco-titulo {
    font-family: var(--font-heading);
    font-weight: 700;
    color: var(--c-branco);
    margin-bottom: 0.625rem;
}
.site-footer__endereco address {
    font-style: normal;
    color: var(--c-branco);
    font-size: 0.9375rem;
    line-height: 1.5;
}

/* Rodape (copyright + credits) — vai abaixo do .container__inner */
.site-footer__rodape {
    border-top: 1px solid rgba(255, 255, 255, 0.15);
    margin-top: clamp(1.75rem, 4vw, 2.5rem);
    padding-block: clamp(1rem, 2vw, 1.5rem);
    display: flex;
    flex-direction: column;
    gap: 0.375rem;
    align-items: center;
    text-align: center;
}
.site-footer__copy,
.site-footer__credits {
    font-size: 0.8125rem;
    color: rgba(255, 255, 255, 0.7);
}
.site-footer__credits a {
    text-decoration: underline;
    text-underline-offset: 2px;
    transition: opacity var(--transition);
}
.site-footer__credits a:hover { opacity: 0.7; }

/* Desktop (>=992px) */
@media (min-width: 992px) {
    .site-footer__inner {
        display: grid;
        grid-template-columns: auto 1fr auto;
        /* Logo + sociais empilhados na esquerda, nav meio, endereco direita */
        grid-template-areas:
            "logo    nav  endereco"
            "sociais nav  .";
        align-items: start;
        column-gap: clamp(2rem, 5vw, 4rem);
        row-gap: 1.5rem;
        text-align: left;
    }
    /* Logo e sociais empilhados na mesma coluna do grid; centralizados entre si.
       O cell se dimensiona ao item mais largo (logo) — sociais (menor) ficam visualmente
       centralizados em relacao ao centro da logo. */
    .site-footer__logo    { grid-area: logo;   justify-self: center; }
    .site-footer__nav     { grid-area: nav; }
    .site-footer__sociais { grid-area: sociais; justify-self: center; justify-content: center; }
    .site-footer__endereco { grid-area: endereco; }

    .site-footer__logo img {
        height: 80px;  /* desktop: logo ainda maior */
    }

    /* Menu em 2 colunas (3 items x 2) no desktop */
    .site-footer__menu {
        display: grid;
        grid-template-columns: repeat(2, 1fr);
        gap: 1.25rem 2.5rem;
    }
    .site-footer__rodape {
        flex-direction: row;
        justify-content: space-between;
    }
}