/* Home. Autocontido.
   Movido de <style> inline para arquivo, sem alterar uma regra.
   O objetivo e poder tirar 'unsafe-inline' de style-src na CSP: com ele,
   qualquer estilo injetado numa pagina e aplicado pelo navegador. */

        /* A11y: foco visível para navegação por teclado */
        a:focus-visible, button:focus-visible, [role="button"]:focus-visible, [tabindex]:focus-visible {
            outline: 3px solid var(--color-cerulean);
            outline-offset: 2px;
            border-radius: 4px;
        }
        /* A11y: respeita movimento reduzido; garante conteúdo visível se o JS/observer falhar */
        @media (prefers-reduced-motion: reduce) {
            .fade-in { opacity: 1 !important; transform: none !important; transition: none !important; }
            *, *::before, *::after { animation: none !important; scroll-behavior: auto !important; }
        }
        /* ========================================
           TOKENS — edite aqui para mudar cores
        ======================================== */
body { font-family: var(--font-body); }
        h1, h2 { font-family: var(--font-display); }

        /* FADE-IN */
        .fade-in { opacity:0; transform:translateY(24px); transition:opacity .6s ease,transform .6s ease; }
        .fade-in.visible { opacity:1; transform:translateY(0); }

        /* HERO — dot grid + glow animado */
        .hero-bg {
            background: linear-gradient(160deg,#060f24 0%,#0A1B3D 50%,#0d2260 100%);
            position: relative;
            overflow: hidden;
        }
        /* grade de pontos */
        .hero-bg::before {
            content:'';
            position:absolute; inset:0;
            background-image: radial-gradient(circle, rgba(99,155,255,.18) 1px, transparent 1px);
            background-size: 36px 36px;
            pointer-events:none; z-index:0;
        }
        /* glow central que pulsa */
        .hero-bg::after {
            content:'';
            position:absolute; inset:0;
            background: radial-gradient(ellipse 75% 55% at 50% 45%,
                rgba(26,107,217,.30) 0%,
                rgba(26,107,217,.08) 50%,
                transparent 75%);
            pointer-events:none; z-index:0;
            animation: hero-glow 5s ease-in-out infinite;
        }
        @keyframes hero-glow { 0%,100%{opacity:.8} 50%{opacity:1} }
        .hero-content { position:relative; z-index:1; }

        /* CARDS hover — lift + sombra */
        .card-lift {
            transition: transform .25s ease, box-shadow .25s ease;
        }
        .card-lift:hover {
            transform: translateY(-6px);
            box-shadow: 0 16px 40px rgba(10,27,61,.12);
        }

        /* PRODUCT CARDS — borda colorida no hover */
        .product-card {
            transition: transform .25s ease, box-shadow .25s ease, border-top-color .25s ease;
            border-top: 3px solid transparent;
        }
        .product-card:hover {
            transform: translateY(-6px);
            box-shadow: 0 16px 40px rgba(10,27,61,.12);
            border-top-color: var(--color-cerulean);
        }

        /* CARD POPULAR */
        .card-popular {
            border: 2px solid var(--color-gold);
            border-top: 3px solid var(--color-gold);
            position: relative;
        }
        .card-popular.product-card:hover {
            border-top-color: var(--color-gold);
            box-shadow: 0 16px 40px rgba(245,166,35,.18);
        }

        /* BOTÕES CTA hover */
        .btn-cta {
            transition: transform .2s ease, box-shadow .2s ease, opacity .2s ease;
        }
        .btn-cta:hover {
            transform: translateY(-2px) scale(1.02);
            box-shadow: 0 8px 24px rgba(0,0,0,.2);
        }
        .btn-cta:active { transform:translateY(0) scale(1); }

        /* NAV LINKS — underline que cresce */
        .nav-link { position:relative; padding-bottom:2px; }
        .nav-link::after {
            content:''; position:absolute;
            bottom:-1px; left:0;
            width:0; height:2px;
            background: var(--color-cerulean);
            transition:width .25s ease;
            border-radius:1px;
        }
        .nav-link:hover::after { width:100%; }

        /* PERSONA TABS */
        .persona-content { transition:opacity .3s ease; }

        /* WHATSAPP FLUTUANTE */
        .whatsapp-float {
            position:fixed; bottom:24px; right:24px; z-index:100;
            box-shadow: 0 4px 20px rgba(37,211,102,.4);
            transition: transform .2s ease, box-shadow .2s ease;
        }
        .whatsapp-float:hover {
            transform:scale(1.1);
            box-shadow: 0 6px 28px rgba(37,211,102,.55);
        }

        /* HEADER scroll */
        #header { transition:box-shadow .3s ease; }
        #header.scrolled { box-shadow:0 2px 20px rgba(0,0,0,.08); }

        /* MENU MOBILE */
        #mobile-menu { display:none; }
        #mobile-menu.open { display:block; }

        /* BANNER DE COOKIES — branco com borda e sombra */
        #cookie-banner {
            display:none; position:fixed;
            bottom:0; left:0; right:0; z-index:150;
            background:#ffffff; color:#374151;
            padding:16px 24px;
            border-top:1px solid #e5e7eb;
            box-shadow:0 -8px 32px rgba(10,27,61,.10);
        }
        #cookie-banner.visible { display:block; }
        .cookie-inner {
            max-width:1100px; margin:0 auto;
            display:flex; flex-wrap:wrap;
            gap:16px; align-items:center; justify-content:space-between;
        }
        .cookie-inner p { font-size:.8rem; line-height:1.55; flex:1; min-width:240px; margin:0; color:#4b5563; }
        .cookie-inner p a { color:var(--color-cerulean); text-decoration:underline; cursor:pointer; }
        .cookie-inner p strong { color:#111827; }
        .cookie-btns { display:flex; gap:8px; flex-shrink:0; }
        .cookie-btns button { padding:8px 18px; border-radius:6px; font-size:.8rem; font-weight:600; cursor:pointer; transition:transform .15s ease,opacity .15s ease; }
        .cookie-btns button:hover { opacity:.88; transform:translateY(-1px); }
        .btn-accept { background:var(--color-green-cta); color:#fff; border:none; }
        .btn-essential { background:#fff; color:#374151; border:1px solid #d1d5db; }

        /* ----------------------------------------
           FAQ ACCORDION
        ---------------------------------------- */
        .faq-item { border-bottom: 1px solid #e5e7eb; }
        .faq-item:last-child { border-bottom: none; }
        .faq-btn {
            width: 100%; text-align: left; background: none; border: none;
            padding: 18px 0; cursor: pointer;
            display: flex; justify-content: space-between; align-items: center;
            gap: 16px; font-family: var(--font-body); color: #111827;
        }
        .faq-btn:hover { color: var(--color-cerulean); }
        .faq-question { font-size: .95rem; font-weight: 600; line-height: 1.4; flex: 1; text-align: left; }
        .faq-icon {
            width: 22px; height: 22px; border-radius: 50%; flex-shrink: 0;
            display: flex; align-items: center; justify-content: center;
            background: var(--color-bg-alt); transition: background .2s, transform .3s;
        }
        .faq-item.open .faq-icon { background: var(--color-cerulean); transform: rotate(45deg); }
        .faq-icon svg { width: 12px; height: 12px; }
        .faq-item.open .faq-icon svg { stroke: #fff; }
        .faq-answer {
            max-height: 0; overflow: hidden;
            transition: max-height .4s ease, padding .25s ease;
            font-size: .875rem; line-height: 1.75; color: #4b5563; padding: 0;
        }
        .faq-item.open .faq-answer { max-height: 1000px; padding-bottom: 18px; }


/* ----------------------------------------
   Estados de hover que eram onmouseover/onmouseout

   Os tres elementos abaixo trocavam a propria cor por JavaScript no evento de
   mouse. Isso exige `script-src 'unsafe-inline'` na CSP — e com ele ligado,
   qualquer script injetado numa pagina executa. CSS faz a mesma coisa sem
   custo nenhum, e ainda funciona com foco de teclado, que o onmouseover nao
   cobria.

   O `style=` inline desses elementos veio junto: atributo de estilo perde para
   nada, entao um `:hover` numa folha externa jamais venceria um `style=` no
   proprio elemento.
---------------------------------------- */

/* "Falar com um Especialista": branco no fundo escuro, navy quando o fundo
   fica branco no hover (o `hover:bg-white` do Tailwind). */
.btn-contorno { color: #fff; }
.btn-contorno:hover, .btn-contorno:focus-visible { color: var(--color-navy); }

/*
   Botao X do modal do mapa.

   A cor era #6b7280: medido, 4,39:1 contra o proprio fundo (#f3f4f6), abaixo dos
   4,5:1 que a WCAG AA pede para texto — e o "X" ali e um caractere de texto, nao
   um icone vetorial. #616b78 da 4,91:1 e mantem a familia de cinza-azulado.

   Este achado so apareceu porque o estilo saiu do atributo `style=` e virou CSS:
   auditor de arquivo nao le estilo inline, entao a cor estava fora do alcance de
   qualquer verificacao. Tirar o inline nao melhorou so a CSP.
*/
.btn-fechar-mapa {
    background: #f3f4f6; border: none; border-radius: 50%;
    width: 32px; height: 32px; cursor: pointer;
    font-size: 1.1rem; color: #616b78;
    display: flex; align-items: center; justify-content: center;
    flex-shrink: 0; transition: background .2s;
}
.btn-fechar-mapa:hover, .btn-fechar-mapa:focus-visible { background: #e5e7eb; }

/* "Abrir no Google Maps". */
.link-maps {
    display: inline-flex; align-items: center; gap: 6px;
    font-size: .8rem; font-weight: 600;
    color: var(--color-cerulean); text-decoration: none;
    transition: opacity .2s;
}
.link-maps:hover, .link-maps:focus-visible { opacity: .75; }

/* ---------- modal do mapa ---------- */
/*
   Isto era `style="..."` em oito elementos. Saiu do HTML pelos dois motivos de
   sempre: enquanto houvesse um `style=` na pagina a CSP precisava de
   `style-src 'unsafe-inline'`, e estilo inline e invisivel para auditor — o
   contraste do proprio botao de fechar deste modal so apareceu depois que a
   cor dele virou CSS.

   ABERTO/FECHADO VIRA CLASSE, E NAO `style.display`.

   O `display:none` estava no atributo, e js/home.js escrevia
   `overlay.style.display = 'flex'` para abrir. Passando o `display:none` para
   ca sem mexer no JS, o modal continuaria funcionando, mas as duas leituras
   que perguntam "esta aberto?" comparando `style.display` com 'none' e 'flex'
   passariam a ler string vazia antes da primeira abertura — a guarda de ESC
   deixaria de guardar, calada.

   Com `.aberto`, quem abre e quem pergunta olham a MESMA coisa, e o estado
   deixa de morar num atributo que o CSS tambem quer controlar.
*/
.maps-overlay {
    display: none; position: fixed; inset: 0; z-index: 210;
    background: rgba(10, 27, 61, .65); backdrop-filter: blur(3px);
    align-items: center; justify-content: center; padding: 16px;
}
.maps-overlay.aberto { display: flex; }

.maps-caixa {
    background: #fff; border-radius: 12px; max-width: 720px; width: 100%;
    box-shadow: 0 20px 60px rgba(0, 0, 0, .35); overflow: hidden;
    display: flex; flex-direction: column;
}
.maps-cabecalho {
    display: flex; justify-content: space-between; align-items: center;
    padding: 16px 20px; border-bottom: 1px solid #e5e7eb; flex-shrink: 0;
}
.maps-titulo {
    font-family: var(--font-display); font-weight: 700;
    color: #0A1B3D; margin: 0; font-size: 1rem;
}
.maps-endereco { font-size: .78rem; color: #6b7280; margin: 2px 0 0; }
/* Proporcao 16:9 pelo truque do padding, para a moldura reservar a altura
   antes de o mapa chegar e a pagina nao pular quando ele carregar. */
.maps-moldura { position: relative; padding-bottom: 56.25%; height: 0; flex-shrink: 0; }
.maps-moldura iframe { position: absolute; inset: 0; width: 100%; height: 100%; border: 0; }
.maps-rodape {
    padding: 14px 20px; border-top: 1px solid #e5e7eb; display: flex;
    justify-content: space-between; align-items: center; flex-shrink: 0;
    flex-wrap: wrap; gap: 8px;
}
.maps-nota { font-size: .75rem; color: #9ca3af; margin: 0; }