/* =========================================================================
   Avermont Engenharia Acústica — folha de estilo única
   Mobile-first. Media queries só em min-width. Sem framework.

   Sumário
   01 Fontes
   02 Tokens
   03 Reset e base
   04 Utilitários e layout
   05 Tipografia de seção
   06 Botões
   07 Cabeçalho e navegação
   08 Menu mobile
   09 Cards, chips e listas
   10 Figuras
   11 Acordeão
   12 Formulários
   13 CTA final
   14 Rodapé e newsletter
   15 WhatsApp flutuante e consentimento
   16 Animação de entrada
   17 Home — hero, soluções, parceiros, eventos, sobre
   18 Página de erro
   19 Páginas de produto — SoundPLAN e Bedrock
   20 Página de indústrias
   21 Blog
   22 Contato e páginas transacionais
   23 Páginas legais
   24 Tarja de ambiente de teste
   25 Carrossel e cards de setor
   26 Visuais das páginas de produto
   ========================================================================= */

/* == 01 Fontes ========================================================== */
@font-face {
    font-family: 'Inter';
    src: url('../fonts/inter-400.woff2') format('woff2');
    font-weight: 400; font-style: normal; font-display: swap;
}
@font-face {
    font-family: 'Inter';
    src: url('../fonts/inter-500.woff2') format('woff2');
    font-weight: 500; font-style: normal; font-display: swap;
}
@font-face {
    font-family: 'Inter';
    src: url('../fonts/inter-600.woff2') format('woff2');
    font-weight: 600; font-style: normal; font-display: swap;
}
@font-face {
    font-family: 'Inter';
    src: url('../fonts/inter-700.woff2') format('woff2');
    font-weight: 700; font-style: normal; font-display: swap;
}

/* == 02 Tokens ========================================================== */
:root {
    /* Marca — #2b5672 é a cor extraída do site atual. 7.4:1 sobre branco. */
    --azul-900: #122936;
    --azul-800: #1c3d51;
    --azul-700: #2b5672;
    --azul-600: #366a8c;
    --azul-500: #4b86ab;
    --azul-300: #93b8cd;
    --azul-100: #dbeaf3;
    --azul-50:  #f1f7fa;

    /* Neutros */
    --tinta:      #0e1a22;
    --tinta-70:   #3d4c57;
    --suave:      #5d6d79;   /* 5.4:1 sobre branco */
    --linha:      #e2e8ed;
    --linha-forte:#cbd6de;
    --fundo:      #ffffff;
    --fundo-alt:  #f6f9fb;
    --fundo-esc:  var(--azul-900);

    /* Semânticos */
    --ok:    #15734f;
    --ok-bg: #e7f5ef;
    --erro:    #a32b2b;
    --erro-bg: #fbeceb;

    /* Tipografia fluida */
    --fonte: 'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif;
    --t-xs:  0.8125rem;
    --t-sm:  0.9063rem;
    --t-base: 1rem;
    --t-md:  clamp(1.0625rem, 0.3vw + 1rem, 1.1875rem);
    --t-lg:  clamp(1.25rem, 0.6vw + 1.1rem, 1.5rem);
    --t-xl:  clamp(1.5rem, 1.3vw + 1.2rem, 2rem);
    --t-2xl: clamp(1.875rem, 2.4vw + 1.3rem, 2.875rem);
    --t-3xl: clamp(2.25rem, 4.2vw + 1.3rem, 4rem);

    /* Espaçamento */
    --e-1: 0.25rem;  --e-2: 0.5rem;   --e-3: 0.75rem;
    --e-4: 1rem;     --e-5: 1.5rem;   --e-6: 2rem;
    --e-7: 2.5rem;   --e-8: 3rem;     --e-9: 4rem;
    --secao-y: clamp(3.5rem, 7vw, 6.5rem);

    /* Raios — o "arredondado tipo Apple" pedido pelo cliente */
    --r-sm:  10px;
    --r-md:  16px;
    --r-lg:  24px;
    --r-xl:  32px;
    --r-2xl: 44px;
    --r-pill: 999px;

    /* Sombras — discretas, nunca pretas puras */
    --s-1: 0 1px 2px rgba(14, 26, 34, .05);
    --s-2: 0 2px 8px rgba(14, 26, 34, .06), 0 1px 2px rgba(14, 26, 34, .04);
    --s-3: 0 12px 32px -8px rgba(14, 26, 34, .12), 0 2px 6px rgba(14, 26, 34, .04);
    --s-4: 0 28px 64px -16px rgba(14, 26, 34, .18), 0 4px 12px rgba(14, 26, 34, .05);

    --largura: 1200px;
    --gutter: clamp(1.125rem, 4vw, 2.5rem);
    --header-h: 4.25rem;

    --transicao: 180ms cubic-bezier(.4, 0, .2, 1);
    --transicao-lenta: 420ms cubic-bezier(.22, 1, .36, 1);
}

/* == 03 Reset e base ==================================================== */
*, *::before, *::after { box-sizing: border-box; }

* { margin: 0; }

html {
    -webkit-text-size-adjust: 100%;
    scroll-behavior: smooth;
    scroll-padding-top: calc(var(--header-h) + var(--e-4));
}

body {
    font-family: var(--fonte);
    font-size: var(--t-base);
    line-height: 1.65;
    color: var(--tinta);
    background: var(--fundo);
    -webkit-font-smoothing: antialiased;
    text-rendering: optimizeLegibility;
    overflow-x: hidden;
}

body.sem-scroll { overflow: hidden; }

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

h1, h2, h3, h4 {
    line-height: 1.15;
    letter-spacing: -0.022em;
    font-weight: 600;
    text-wrap: balance;
}

p { text-wrap: pretty; }

a { color: var(--azul-700); text-decoration-thickness: 1px; text-underline-offset: 3px; }
a:hover { color: var(--azul-600); }

ul, ol { padding: 0; list-style: none; }

button, input, textarea, select { font: inherit; color: inherit; }
button { cursor: pointer; background: none; border: 0; }

:focus-visible {
    outline: 3px solid var(--azul-500);
    outline-offset: 2px;
    border-radius: 4px;
}

::selection { background: var(--azul-100); color: var(--azul-900); }

.skip-link {
    position: absolute;
    left: var(--e-4);
    top: -100%;
    z-index: 200;
    padding: var(--e-3) var(--e-5);
    background: var(--azul-700);
    color: #fff;
    border-radius: var(--r-sm);
    font-weight: 600;
    text-decoration: none;
    transition: top var(--transicao);
}
.skip-link:focus { top: var(--e-3); color: #fff; }

/* == 04 Utilitários e layout ============================================ */
.container {
    width: 100%;
    max-width: var(--largura);
    margin-inline: auto;
    padding-inline: var(--gutter);
}

.secao { padding-block: var(--secao-y); }
.secao--alt { background: var(--fundo-alt); }
.secao--escura { background: var(--fundo-esc); color: #fff; }
.secao--escura .section-sub,
.secao--escura .card__texto { color: rgba(255, 255, 255, .74); }
.secao--compacta { padding-block: clamp(2.5rem, 5vw, 4rem); }

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

.grade { display: grid; gap: var(--e-4); }
@media (min-width: 40em) { .grade--2 { grid-template-columns: repeat(2, 1fr); } }
@media (min-width: 40em) { .grade--3 { grid-template-columns: repeat(2, 1fr); } }
@media (min-width: 64em) { .grade--3 { grid-template-columns: repeat(3, 1fr); } }
@media (min-width: 40em) { .grade--4 { grid-template-columns: repeat(2, 1fr); } }
@media (min-width: 64em) { .grade--4 { grid-template-columns: repeat(4, 1fr); } }
@media (min-width: 48em) { .grade { gap: var(--e-5); } }

.icon { width: 1.5rem; height: 1.5rem; flex: none; }
.icon--xs { width: 1rem;    height: 1rem; }
.icon--sm { width: 1.25rem; height: 1.25rem; }
.icon--lg { width: 2rem;    height: 2rem; }

/* == 05 Tipografia de seção ============================================= */
.section-header {
    display: flex;
    flex-direction: column;
    gap: var(--e-3);
    max-width: 46rem;
    margin-bottom: var(--e-7);
}
.section-header--center { align-items: center; text-align: center; margin-inline: auto; }
.section-header--left   { align-items: flex-start; text-align: left; }

.eyebrow {
    display: inline-flex;
    align-items: center;
    gap: var(--e-2);
    padding: 0.375rem 0.875rem;
    border-radius: var(--r-pill);
    background: var(--azul-50);
    border: 1px solid var(--azul-100);
    color: var(--azul-700);
    font-size: var(--t-xs);
    font-weight: 600;
    letter-spacing: .04em;
    text-transform: uppercase;
}
.secao--escura .eyebrow {
    background: rgba(255, 255, 255, .08);
    border-color: rgba(255, 255, 255, .16);
    color: var(--azul-300);
}

.section-title { font-size: var(--t-2xl); }
.section-title em { font-style: normal; color: var(--azul-600); }

.section-sub {
    font-size: var(--t-md);
    color: var(--suave);
    max-width: 42rem;
}

/* == 06 Botões ========================================================== */
.btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: var(--e-2);
    min-height: 2.875rem;
    padding: 0.6875rem 1.375rem;
    border: 1px solid transparent;
    border-radius: var(--r-pill);
    font-size: var(--t-sm);
    font-weight: 600;
    line-height: 1.2;
    text-decoration: none;
    white-space: nowrap;
    transition: background-color var(--transicao), border-color var(--transicao),
                color var(--transicao), transform var(--transicao), box-shadow var(--transicao);
}
.btn:active { transform: translateY(1px); }
.btn__icone { width: 1.125rem; height: 1.125rem; transition: transform var(--transicao); }
.btn:hover .btn__icone { transform: translateX(2px); }

.btn--primary {
    background: var(--azul-700);
    color: #fff;
    box-shadow: var(--s-2);
}
.btn--primary:hover { background: var(--azul-800); color: #fff; box-shadow: var(--s-3); }

.btn--secondary {
    background: var(--fundo);
    color: var(--azul-800);
    border-color: var(--linha-forte);
}
.btn--secondary:hover { background: var(--azul-50); border-color: var(--azul-300); color: var(--azul-800); }

.btn--ghost { background: transparent; color: var(--tinta-70); border-color: transparent; }
.btn--ghost:hover { background: var(--fundo-alt); color: var(--tinta); }

.btn--link {
    padding: 0; min-height: 0; border-radius: 4px;
    background: none; color: var(--azul-700); text-decoration: underline;
}

.btn--sm { min-height: 2.375rem; padding: 0.4375rem 1rem; font-size: var(--t-xs); }
.btn--lg { min-height: 3.25rem; padding: 0.875rem 1.875rem; font-size: var(--t-base); }
.btn--bloco { display: flex; width: 100%; }

.secao--escura .btn--secondary,
.cta-final .btn--secondary {
    background: transparent;
    color: #fff;
    border-color: rgba(255, 255, 255, .32);
}
.secao--escura .btn--secondary:hover,
.cta-final .btn--secondary:hover {
    background: rgba(255, 255, 255, .1);
    border-color: rgba(255, 255, 255, .5);
    color: #fff;
}

/* == 07 Cabeçalho e navegação =========================================== */
.site-header {
    position: sticky;
    top: 0;
    z-index: 100;
    background: rgba(255, 255, 255, .82);
    border-bottom: 1px solid transparent;
    transition: background-color var(--transicao), border-color var(--transicao), box-shadow var(--transicao);
}
@supports (backdrop-filter: blur(1px)) {
    .site-header { backdrop-filter: saturate(180%) blur(18px); -webkit-backdrop-filter: saturate(180%) blur(18px); }
}
.site-header[data-fixo] {
    background: rgba(255, 255, 255, .92);
    border-bottom-color: var(--linha);
    box-shadow: var(--s-1);
}

.site-header__inner {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: var(--e-4);
    min-height: var(--header-h);
}

.marca {
    display: inline-flex;
    align-items: center;
    gap: var(--e-3);
    text-decoration: none;
    color: var(--tinta);
    flex: none;
}
.marca__logo { display: block; }
.marca__texto { display: flex; flex-direction: column; line-height: 1.1; }
.marca__nome {
    font-size: 1.0625rem; font-weight: 700;
    letter-spacing: .11em; text-transform: uppercase;
}
.marca__sub {
    font-size: 0.625rem; font-weight: 500;
    letter-spacing: .16em; text-transform: uppercase;
    color: var(--suave);
}

.nav { display: none; }
@media (min-width: 62em) {
    .nav { display: block; }
    .nav__lista { display: flex; align-items: center; gap: var(--e-1); }
    .nav__item { position: relative; }

    .nav__link {
        display: inline-flex;
        align-items: center;
        gap: var(--e-1);
        padding: 0.5rem 0.875rem;
        border-radius: var(--r-pill);
        color: var(--tinta-70);
        font-size: var(--t-sm);
        font-weight: 500;
        text-decoration: none;
        transition: background-color var(--transicao), color var(--transicao);
    }
    .nav__link:hover { background: var(--fundo-alt); color: var(--tinta); }
    .nav__link[aria-current="page"] { color: var(--azul-700); font-weight: 600; }
    .nav__seta { width: 1rem; height: 1rem; transition: transform var(--transicao); }
    .nav__link[aria-expanded="true"] { background: var(--fundo-alt); color: var(--tinta); }
    .nav__link[aria-expanded="true"] .nav__seta { transform: rotate(180deg); }

    .submenu {
        position: absolute;
        top: calc(100% + 0.625rem);
        left: 50%;
        translate: -50% 0;
        min-width: 20rem;
        padding: var(--e-2);
        background: var(--fundo);
        border: 1px solid var(--linha);
        border-radius: var(--r-lg);
        box-shadow: var(--s-4);
        animation: submenu-entra 160ms cubic-bezier(.22, 1, .36, 1);
    }
    .submenu[hidden] { display: none; }
    .submenu__lista { display: grid; gap: 2px; }
    .submenu__link {
        display: flex;
        flex-direction: column;
        gap: 2px;
        padding: 0.6875rem 0.875rem;
        border-radius: var(--r-sm);
        text-decoration: none;
        color: var(--tinta);
        transition: background-color var(--transicao);
    }
    .submenu__link:hover { background: var(--azul-50); color: var(--tinta); }
    .submenu__link[aria-current="page"] { background: var(--azul-50); }
    .submenu__label { font-weight: 600; font-size: var(--t-sm); }
    .submenu__desc { font-size: var(--t-xs); color: var(--suave); line-height: 1.4; }
}

@keyframes submenu-entra {
    from { opacity: 0; transform: translateY(-6px); }
    to   { opacity: 1; transform: none; }
}

.site-header__acoes { display: flex; align-items: center; gap: var(--e-3); }
.site-header__cta { display: none; }
@media (min-width: 62em) { .site-header__cta { display: inline-flex; } }

.hamburger {
    display: grid;
    place-items: center;
    width: 2.75rem;
    height: 2.75rem;
    border-radius: var(--r-sm);
    color: var(--tinta);
    transition: background-color var(--transicao);
}
.hamburger:hover { background: var(--fundo-alt); }
@media (min-width: 62em) { .hamburger { display: none; } }

.hamburger__linhas { display: grid; gap: 5px; width: 1.375rem; }
.hamburger__linhas i {
    display: block; height: 2px; border-radius: 2px;
    background: currentColor;
    transition: transform var(--transicao), opacity var(--transicao);
}
.hamburger[aria-expanded="true"] .hamburger__linhas i:nth-child(1) { transform: translateY(7px) rotate(45deg); }
.hamburger[aria-expanded="true"] .hamburger__linhas i:nth-child(2) { opacity: 0; }
.hamburger[aria-expanded="true"] .hamburger__linhas i:nth-child(3) { transform: translateY(-7px) rotate(-45deg); }

/* == 08 Menu mobile ===================================================== */
.menu-mobile {
    position: fixed;
    inset: var(--header-h) 0 0;
    z-index: 99;
    display: flex;
    flex-direction: column;
    background: var(--fundo);
    overflow-y: auto;
    overscroll-behavior: contain;
    animation: menu-entra var(--transicao-lenta);
}
.menu-mobile[hidden] { display: none; }
@media (min-width: 62em) { .menu-mobile { display: none !important; } }

@keyframes menu-entra {
    from { opacity: 0; transform: translateY(-10px); }
    to   { opacity: 1; transform: none; }
}

.menu-mobile__nav {
    display: flex;
    flex-direction: column;
    justify-content: space-between;
    gap: var(--e-6);
    min-height: 100%;
    padding: var(--e-5) var(--gutter) var(--e-8);
}
.menu-mobile__lista { display: grid; gap: var(--e-1); }

.menu-mobile__link {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: var(--e-3);
    min-height: 3.25rem;
    padding: var(--e-3) var(--e-4);
    border-radius: var(--r-md);
    color: var(--tinta);
    font-size: var(--t-md);
    font-weight: 600;
    text-decoration: none;
    transition: background-color var(--transicao);
}
.menu-mobile__link:hover, .menu-mobile__link:active { background: var(--fundo-alt); color: var(--tinta); }
.menu-mobile__link[aria-current="page"] { background: var(--azul-50); color: var(--azul-700); }
.menu-mobile__link .icon { color: var(--linha-forte); }
.menu-mobile__link small {
    display: block; font-size: var(--t-xs); font-weight: 400;
    color: var(--suave); letter-spacing: 0;
}

.menu-mobile__grupo { margin-top: var(--e-4); }
.menu-mobile__titulo {
    padding: 0 var(--e-4) var(--e-2);
    font-size: var(--t-xs); font-weight: 600;
    letter-spacing: .1em; text-transform: uppercase;
    color: var(--suave);
}

.menu-mobile__rodape { display: grid; gap: var(--e-4); }
.menu-mobile__contato {
    display: inline-flex; align-items: center; gap: var(--e-2);
    justify-content: center;
    font-size: var(--t-sm); color: var(--suave); text-decoration: none;
}

/* == 09 Cards, chips e listas =========================================== */
.card {
    display: flex;
    flex-direction: column;
    gap: var(--e-3);
    padding: var(--e-5);
    background: var(--fundo);
    border: 1px solid var(--linha);
    border-radius: var(--r-lg);
    text-decoration: none;
    color: inherit;
    transition: transform var(--transicao), box-shadow var(--transicao), border-color var(--transicao);
}
a.card:hover {
    transform: translateY(-3px);
    border-color: var(--azul-300);
    box-shadow: var(--s-3);
    color: inherit;
}
.secao--alt .card { background: var(--fundo); }
.secao--escura .card {
    background: rgba(255, 255, 255, .05);
    border-color: rgba(255, 255, 255, .12);
    color: #fff;
}

.card__icone {
    display: grid; place-items: center;
    width: 3rem; height: 3rem;
    border-radius: var(--r-md);
    background: var(--azul-50);
    color: var(--azul-700);
}
.secao--escura .card__icone { background: rgba(255, 255, 255, .1); color: var(--azul-300); }

.card__eyebrow {
    font-size: var(--t-xs); font-weight: 600;
    letter-spacing: .08em; text-transform: uppercase;
    color: var(--azul-600);
}
.card__titulo { font-size: var(--t-lg); }
.card__texto { color: var(--suave); font-size: var(--t-sm); }
.card__lista { display: grid; gap: var(--e-2); margin-top: auto; padding-top: var(--e-2); }
.card__lista li {
    display: flex; gap: var(--e-2); align-items: flex-start;
    font-size: var(--t-sm); color: var(--tinta-70);
}
.card__lista .icon { margin-top: .3rem; color: var(--azul-600); }
.card__seta { margin-top: auto; color: var(--azul-600); transition: transform var(--transicao); }
a.card:hover .card__seta { transform: translateX(4px); }

.chip {
    display: inline-flex; align-items: center; gap: var(--e-2);
    padding: 0.3125rem 0.75rem;
    border-radius: var(--r-pill);
    background: var(--azul-50);
    border: 1px solid var(--azul-100);
    color: var(--azul-800);
    font-size: var(--t-xs); font-weight: 500;
}

.lista-check { display: grid; gap: var(--e-3); }
.lista-check li {
    display: flex; gap: var(--e-3); align-items: flex-start;
    font-size: var(--t-sm); color: var(--tinta-70);
}
.lista-check .icon { margin-top: .15rem; color: var(--azul-600); }
.secao--escura .lista-check li { color: rgba(255, 255, 255, .82); }
.secao--escura .lista-check .icon { color: var(--azul-300); }

/* == 10 Figuras ========================================================= */
.figura { border-radius: var(--r-lg); }

.figura--pendente {
    display: grid;
    place-content: center;
    gap: var(--e-2);
    justify-items: center;
    min-height: 8rem;
    padding: var(--e-5);
    background: repeating-linear-gradient(
        -45deg, var(--fundo-alt), var(--fundo-alt) 12px,
        #eef3f7 12px, #eef3f7 24px
    );
    border: 1px dashed var(--linha-forte);
    color: var(--suave);
    text-align: center;
}
.figura__marca {
    display: inline-flex; align-items: center; gap: var(--e-2);
    font-size: var(--t-xs); font-weight: 600;
    letter-spacing: .06em; text-transform: uppercase;
}
.figura__rotulo { font-size: var(--t-xs); max-width: 22rem; }

/* A versão web é um recorte sem redimensionamento do PNG oficial. O disco
   preto fica atrás apenas do símbolo: o A branco e o nome preto permanecem
   legíveis simultaneamente. */
.marca--logo {
    position: relative;
    isolation: isolate;
}
.marca--logo::before {
    content: '';
    position: absolute;
    z-index: 0;
    inset: 0 auto 0 0;
    width: 2.5rem;
    border-radius: 50%;
    background: #000;
}
.marca--logo .marca__logo {
    position: relative;
    z-index: 1;
    width: auto;
    height: 2.5rem;
    max-width: none;
}
.marca--footer.marca--logo .marca__logo { height: 2.5rem; }

/* == 11 Acordeão ======================================================== */
.acordeao { display: grid; gap: var(--e-2); max-width: 48rem; margin-inline: auto; }

.acordeao__item {
    background: var(--fundo);
    border: 1px solid var(--linha);
    border-radius: var(--r-md);
    overflow: hidden;
    transition: border-color var(--transicao), box-shadow var(--transicao);
}
.acordeao__item[open] { border-color: var(--azul-300); box-shadow: var(--s-2); }

.acordeao__pergunta {
    display: flex; align-items: center; justify-content: space-between;
    gap: var(--e-4);
    padding: var(--e-4) var(--e-5);
    font-weight: 600;
    cursor: pointer;
    list-style: none;
}
.acordeao__pergunta::-webkit-details-marker { display: none; }
.acordeao__pergunta:hover { background: var(--fundo-alt); }
.acordeao__seta { color: var(--azul-600); transition: transform var(--transicao); }
.acordeao__item[open] .acordeao__seta { transform: rotate(180deg); }
.acordeao__resposta { padding: 0 var(--e-5) var(--e-5); color: var(--suave); font-size: var(--t-sm); }

/* == 12 Formulários ===================================================== */
.campo { display: grid; gap: var(--e-2); }
.campo__label { font-size: var(--t-sm); font-weight: 600; }
/* "(opcional)" no próprio rótulo em vez de numa dica abaixo do campo: mantém a
   informação sem criar uma linha extra que desalinha o par de colunas. */
.campo__opcional { font-weight: 400; color: var(--suave); }
.campo__dica { font-size: var(--t-xs); color: var(--suave); }

.campo__input, .campo__textarea, .campo__select {
    width: 100%;
    min-height: 3rem;
    padding: 0.75rem 1rem;
    background: var(--fundo);
    border: 1px solid var(--linha-forte);
    border-radius: var(--r-md);
    font-size: var(--t-base);
    transition: border-color var(--transicao), box-shadow var(--transicao);
}
.campo__textarea { min-height: 8.5rem; resize: vertical; line-height: 1.6; }
.campo__input::placeholder, .campo__textarea::placeholder { color: #94a3ad; }
.campo__input:focus, .campo__textarea:focus, .campo__select:focus {
    outline: none;
    border-color: var(--azul-500);
    box-shadow: 0 0 0 3px var(--azul-100);
}
.campo__input[aria-invalid="true"], .campo__textarea[aria-invalid="true"] { border-color: var(--erro); }

/* Grupo de caixas de seleção (campo Assunto do contato). O <fieldset> zera a
   moldura nativa do navegador e volta a se comportar como um .campo comum. */
.campo--grupo { min-width: 0; margin: 0; padding: 0; border: 0; }
.campo--grupo > .campo__label { padding: 0; }

.opcoes { display: grid; gap: var(--e-2); }
@media (min-width: 34em) { .opcoes { grid-template-columns: repeat(2, 1fr); } }

.opcao {
    display: flex; align-items: center; gap: var(--e-2);
    min-height: 3rem;
    padding: 0.6rem 1rem;
    border: 1px solid var(--linha-forte);
    border-radius: var(--r-md);
    background: var(--fundo);
    font-size: var(--t-sm);
    cursor: pointer;
    transition: border-color .16s, background-color .16s;
}
.opcao:hover { border-color: var(--azul-300); }
.opcao input { flex: none; width: 1.05rem; height: 1.05rem; accent-color: var(--azul-600); cursor: pointer; }
.opcao:has(input:checked) { border-color: var(--azul-500); background: var(--azul-50); }
.opcao:has(input:focus-visible) { outline: 3px solid var(--azul-500); outline-offset: 2px; }

.campo__grupo { display: grid; gap: var(--e-2); }
@media (min-width: 30em) {
    .campo--inline .campo__grupo { grid-template-columns: 1fr auto; }
}

.honeypot {
    position: absolute; left: -9999px;
    width: 1px; height: 1px; overflow: hidden;
}

.feedback {
    display: flex; align-items: flex-start; gap: var(--e-2);
    padding: var(--e-3) var(--e-4);
    border-radius: var(--r-md);
    font-size: var(--t-sm);
}
.feedback .icon { margin-top: .15rem; }
.feedback--sucesso { background: var(--ok-bg);   color: var(--ok); }
.feedback--erro    { background: var(--erro-bg); color: var(--erro); }
.feedback ul { display: grid; gap: var(--e-1); margin-top: var(--e-1); }

/* == 13 CTA final ======================================================= */
.cta-final { padding-block: var(--secao-y); }

.cta-final__box {
    display: grid;
    gap: var(--e-5);
    justify-items: center;
    padding: clamp(2.5rem, 6vw, 4.5rem) var(--gutter);
    text-align: center;
    background:
        radial-gradient(120% 120% at 50% 0%, var(--azul-800) 0%, var(--azul-900) 60%);
    border-radius: var(--r-2xl);
    color: #fff;
    box-shadow: var(--s-4);
}
.cta-final__titulo { font-size: var(--t-2xl); max-width: 22ch; }
.cta-final__texto { color: rgba(255, 255, 255, .76); max-width: 46ch; font-size: var(--t-md); }
.cta-final__acoes { display: flex; flex-wrap: wrap; gap: var(--e-3); justify-content: center; }
.cta-final .btn--primary { background: #fff; color: var(--azul-900); }
.cta-final .btn--primary:hover { background: var(--azul-50); color: var(--azul-900); }

/* == 14 Rodapé e newsletter ============================================= */
.site-footer { background: var(--fundo-alt); border-top: 1px solid var(--linha); }

.newsletter { padding-block: var(--secao-y) var(--e-8); }
.newsletter__box {
    display: grid;
    gap: var(--e-5);
    padding: clamp(1.75rem, 4vw, 3rem);
    background: var(--fundo);
    border: 1px solid var(--linha);
    border-radius: var(--r-xl);
    box-shadow: var(--s-2);
}
@media (min-width: 56em) {
    .newsletter__box { grid-template-columns: 1.1fr 1fr; gap: var(--e-8); align-items: center; }
}
.newsletter__titulo { font-size: var(--t-xl); }
.newsletter__sub { margin-top: var(--e-3); color: var(--suave); font-size: var(--t-sm); }
.newsletter__form { display: grid; gap: var(--e-3); }
.newsletter__form .campo__label { position: absolute; width: 1px; height: 1px; overflow: hidden; clip-path: inset(50%); }
.newsletter__submit { min-height: 3rem; }
.newsletter__aviso { font-size: var(--t-xs); color: var(--suave); }

.site-footer__grade {
    display: grid;
    gap: var(--e-7);
    padding-block: var(--e-8);
    border-top: 1px solid var(--linha);
}
/* Sem o bloco de newsletter (provedor não configurado), a grade vira o primeiro
   filho do rodapé: a borda dela encostaria na borda do próprio <footer> e o
   resultado seria uma linha dupla logo abaixo do conteúdo da página. */
.site-footer > .site-footer__grade:first-child { border-top: 0; padding-top: var(--secao-y); }
@media (min-width: 40em) { .site-footer__grade { grid-template-columns: repeat(2, 1fr); } }
@media (min-width: 64em) { .site-footer__grade { grid-template-columns: 1.6fr repeat(3, 1fr) 1.4fr; gap: var(--e-6); } }

.site-footer__marca { display: grid; gap: var(--e-4); align-content: start; }
.marca--footer .marca__nome { font-size: 1.125rem; }
.site-footer__tagline { color: var(--suave); font-size: var(--t-sm); max-width: 26ch; }

.redes { display: flex; gap: var(--e-2); }
.redes__link {
    display: grid; place-items: center;
    width: 2.5rem; height: 2.5rem;
    border-radius: var(--r-pill);
    background: var(--fundo);
    border: 1px solid var(--linha);
    color: var(--tinta-70);
    transition: background-color var(--transicao), color var(--transicao), border-color var(--transicao);
}
.redes__link:hover { background: var(--azul-700); border-color: var(--azul-700); color: #fff; }

.site-footer__col { display: grid; gap: var(--e-3); align-content: start; }
.site-footer__titulo {
    font-size: var(--t-xs); font-weight: 600;
    letter-spacing: .1em; text-transform: uppercase;
    color: var(--tinta);
}
.site-footer__col ul { display: grid; gap: var(--e-2); }
.site-footer__col a {
    color: var(--suave); font-size: var(--t-sm); text-decoration: none;
    display: inline-flex; align-items: flex-start; gap: var(--e-2);
}
.site-footer__col a:hover { color: var(--azul-700); text-decoration: underline; }

.site-footer__contato { font-style: normal; }
.site-footer__contato .icon { margin-top: .2rem; color: var(--azul-600); flex: none; }
.site-footer__endereco {
    display: inline-flex; align-items: flex-start; gap: var(--e-2);
    color: var(--suave); font-size: var(--t-sm); line-height: 1.5;
}

.site-footer__base {
    display: flex; flex-wrap: wrap; gap: var(--e-2) var(--e-5);
    justify-content: space-between;
    padding-block: var(--e-5);
    border-top: 1px solid var(--linha);
    color: var(--suave);
    font-size: var(--t-xs);
}

/* == 15 WhatsApp flutuante e consentimento ============================== */
.whatsapp-flutuante {
    position: fixed;
    right: clamp(1rem, 3vw, 1.75rem);
    bottom: clamp(1rem, 3vw, 1.75rem);
    z-index: 90;
    display: grid; place-items: center;
    width: 3.5rem; height: 3.5rem;
    border-radius: var(--r-pill);
    background: #25d366;
    color: #fff;
    box-shadow: var(--s-3);
    transition: transform var(--transicao), box-shadow var(--transicao);
}
.whatsapp-flutuante:hover { transform: scale(1.06); box-shadow: var(--s-4); color: #fff; }
.whatsapp-flutuante .icon { width: 1.75rem; height: 1.75rem; }

.consent {
    position: fixed;
    inset: auto 0 0;
    z-index: 120;
    padding: var(--gutter);
    animation: consent-entra var(--transicao-lenta);
}
.consent[hidden] { display: none; }

@keyframes consent-entra {
    from { opacity: 0; transform: translateY(16px); }
    to   { opacity: 1; transform: none; }
}

.consent__box {
    display: grid;
    gap: var(--e-4);
    max-width: var(--largura);
    margin-inline: auto;
    padding: var(--e-5);
    background: var(--fundo);
    border: 1px solid var(--linha);
    border-radius: var(--r-lg);
    box-shadow: var(--s-4);
}
@media (min-width: 48em) {
    .consent__box { grid-template-columns: 1fr auto; align-items: center; gap: var(--e-6); }
}
.consent__titulo { font-weight: 600; margin-bottom: var(--e-1); }
.consent__texto { font-size: var(--t-sm); color: var(--suave); }
.consent__acoes { display: flex; gap: var(--e-2); justify-content: flex-end; }

/* == 16 Animação de entrada ============================================= */
/* Escopo em .js de propósito: a classe é posta por um script inline no <head>.
   Sem JS o seletor nunca casa e o conteúdo nasce visível — nada de página em
   branco se o arquivo falhar em carregar. */
.js [data-reveal] {
    opacity: 0;
    transform: translateY(18px);
    transition: opacity var(--transicao-lenta), transform var(--transicao-lenta);
}
.js [data-reveal].visivel { opacity: 1; transform: none; }

@media (prefers-reduced-motion: reduce) {
    html { scroll-behavior: auto; }
    *, *::before, *::after {
        animation-duration: .01ms !important;
        animation-iteration-count: 1 !important;
        transition-duration: .01ms !important;
        scroll-behavior: auto !important;
    }
    .js [data-reveal] { opacity: 1; transform: none; }
}

@media print {
    .site-header, .menu-mobile, .whatsapp-flutuante, .consent,
    .newsletter, .cta-final, .skip-link { display: none !important; }
    body { color: #000; }
    a[href^="http"]::after { content: " (" attr(href) ")"; font-size: .8em; }
}

/* == 17 Home ============================================================ */

/* --- Hero --------------------------------------------------------------- */
.hero {
    position: relative;
    isolation: isolate;
    overflow: hidden;
    padding-block: clamp(3.5rem, 10vw, 7.5rem) clamp(3rem, 8vw, 6rem);
    background:
        radial-gradient(90% 110% at 15% 0%, var(--azul-800) 0%, var(--azul-900) 55%, #0b1c26 100%);
    color: #fff;
}

.hero__fundo { position: absolute; inset: 0; z-index: -1; opacity: .55; }
.hero__fundo .figura--pendente { display: none; }
.hero__imagem { width: 100%; height: 100%; object-fit: cover; border-radius: 0; }

/* Véu que garante o contraste do texto sobre qualquer foto que venha. */
.hero::after {
    content: '';
    position: absolute; inset: 0; z-index: -1;
    /* Véu mais forte do lado do texto e mais leve do lado da imagem: o
       contraste do título fica garantido sem apagar a foto. */
    background: linear-gradient(102deg,
        rgba(11, 28, 38, .93) 0%,
        rgba(11, 28, 38, .86) 34%,
        rgba(11, 28, 38, .58) 68%,
        rgba(11, 28, 38, .38) 100%);
}

.hero__inner { display: grid; gap: var(--e-5); max-width: 58rem; }

.hero__eyebrow { display: flex; flex-direction: column; gap: 2px; }
.hero__marca {
    font-size: clamp(1.25rem, 3vw, 1.75rem);
    font-weight: 700; letter-spacing: .22em; text-transform: uppercase;
}
.hero__marca-sub {
    font-size: var(--t-xs); font-weight: 500;
    letter-spacing: .3em; text-transform: uppercase;
    color: var(--azul-300);
}

.hero__titulo { font-size: var(--t-3xl); max-width: 16ch; }
.hero__sub {
    font-size: var(--t-md);
    color: rgba(255, 255, 255, .8);
    max-width: 46ch;
}

.hero__acoes { display: flex; flex-wrap: wrap; gap: var(--e-3); margin-top: var(--e-2); }
.hero .btn--primary { background: #fff; color: var(--azul-900); }
.hero .btn--primary:hover { background: var(--azul-50); color: var(--azul-900); }
.hero .btn--secondary { background: transparent; color: #fff; border-color: rgba(255, 255, 255, .32); }
.hero .btn--secondary:hover { background: rgba(255, 255, 255, .1); border-color: rgba(255, 255, 255, .55); color: #fff; }

.hero__selos {
    display: grid; gap: var(--e-2);
    margin-top: var(--e-4);
    padding-top: var(--e-5);
    border-top: 1px solid rgba(255, 255, 255, .16);
}
@media (min-width: 52em) { .hero__selos { grid-template-columns: repeat(3, 1fr); gap: var(--e-4); } }
.hero__selos li {
    display: flex; align-items: flex-start; gap: var(--e-2);
    font-size: var(--t-sm); color: rgba(255, 255, 255, .78);
}
.hero__selos .icon { margin-top: .15rem; color: var(--azul-300); flex: none; }

/* Nos heros de produto a coluna de texto divide o espaço com a imagem, e os três
   selos quebravam em três linhas. Corpo e espaçamentos menores devolvem largura
   suficiente para que cada selo caiba em duas linhas. */
@media (min-width: 52em) {
    .hero--produto .hero__selos { gap: var(--e-3); }
    .hero--produto .hero__selos li { gap: var(--e-1); font-size: var(--t-xs); line-height: 1.45; }
}

/* --- Soluções ----------------------------------------------------------- */
.solucoes { display: grid; gap: clamp(2.5rem, 6vw, 5rem); }

.solucao { display: grid; gap: var(--e-5); align-items: center; }
@media (min-width: 60em) {
    .solucao { grid-template-columns: 1fr 1fr; gap: clamp(2.5rem, 5vw, 4.5rem); }
    .solucao--invertida .solucao__texto  { order: 2; }
    .solucao--invertida .solucao__visual { order: 1; }
}

.solucao__texto { display: grid; gap: var(--e-4); align-content: start; }
.solucao__titulo { font-size: var(--t-xl); }
.solucao__descricao { color: var(--suave); font-size: var(--t-sm); }
.solucao__acoes { margin-top: var(--e-1); }

.solucao__visual { position: relative; }
.solucao__figura {
    width: 100%;
    aspect-ratio: 4 / 3;
    object-fit: cover;
    border: 1px solid var(--linha);
    box-shadow: var(--s-3);
}
.solucao__visual .figura--pendente { aspect-ratio: 4 / 3; }

.solucao__icone {
    position: absolute;
    top: calc(-1 * var(--e-4));
    left: var(--e-4);
    z-index: 2;
    display: grid; place-items: center;
    width: 3.5rem; height: 3.5rem;
    border-radius: var(--r-md);
    background: var(--azul-700);
    color: #fff;
    box-shadow: var(--s-3);
}

/* --- Parceiros ---------------------------------------------------------- */
.parceiros__titulo {
    margin-bottom: var(--e-5);
    text-align: center;
    font-size: var(--t-xs); font-weight: 600;
    letter-spacing: .16em; text-transform: uppercase;
    color: var(--suave);
}

.parceiros__lista {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: var(--e-3);
}
@media (min-width: 40em) { .parceiros__lista { grid-template-columns: repeat(4, 1fr); } }
@media (min-width: 72em) { .parceiros__lista { grid-template-columns: repeat(8, 1fr); } }

.parceiro {
    display: grid; place-items: center;
    min-height: 6.5rem;
    padding: var(--e-4);
    border: 1px solid var(--linha);
    border-radius: var(--r-md);
    background: var(--fundo);
    text-decoration: none;
    transition: border-color var(--transicao), box-shadow var(--transicao), transform var(--transicao);
}
.parceiro:hover { border-color: var(--azul-300); box-shadow: var(--s-2); transform: translateY(-2px); }
.parceiro__nome {
    font-size: var(--t-xs); font-weight: 600;
    color: var(--tinta-70); text-align: center; line-height: 1.3;
}
.parceiro__logo {
    display: block;
    width: 100%;
    height: 4rem;
    max-width: 8.5rem;
    object-fit: contain;
    object-position: center;
    filter: grayscale(1);
    opacity: .72;
    transition: filter var(--transicao), opacity var(--transicao);
}
.parceiro:hover .parceiro__logo { filter: none; opacity: 1; }

/* --- Eventos ------------------------------------------------------------ */
.eventos { display: grid; gap: var(--e-4); }

.evento {
    display: grid;
    gap: var(--e-4);
    padding: var(--e-5);
    background: var(--fundo);
    border: 1px solid var(--linha);
    border-radius: var(--r-lg);
    box-shadow: var(--s-1);
}
@media (min-width: 40em) { .evento { grid-template-columns: auto 1fr; gap: var(--e-6); } }

.evento__data {
    display: grid;
    place-content: center;
    justify-items: center;
    width: 5.5rem; height: 5.5rem;
    border-radius: var(--r-md);
    background: var(--azul-50);
    border: 1px solid var(--azul-100);
    color: var(--azul-800);
    line-height: 1.1;
}
.evento__dia { font-size: 1.75rem; font-weight: 700; letter-spacing: -.02em; }
.evento__mes { font-size: var(--t-xs); font-weight: 700; letter-spacing: .12em; }
.evento__ano { font-size: 0.6875rem; color: var(--azul-600); }

.evento__corpo { display: grid; gap: var(--e-3); align-content: start; }

.evento__contagem {
    display: inline-flex; align-items: center; gap: var(--e-2);
    justify-self: start;
    padding: 0.25rem 0.75rem;
    border-radius: var(--r-pill);
    background: var(--azul-50);
    color: var(--azul-700);
    font-size: var(--t-xs); font-weight: 600;
}
.evento__contagem--agora { background: var(--ok-bg); color: var(--ok); }

.evento__titulo { font-size: var(--t-lg); }

.evento__meta { display: grid; gap: var(--e-2); }
.evento__meta li {
    display: flex; align-items: flex-start; gap: var(--e-2);
    font-size: var(--t-sm); color: var(--suave);
}
.evento__meta .icon { margin-top: .15rem; color: var(--azul-600); flex: none; }

.evento__descricao { font-size: var(--t-sm); color: var(--tinta-70); }

/* --- Sobre -------------------------------------------------------------- */
.sobre__grade { display: grid; gap: var(--e-7); }
@media (min-width: 60em) { .sobre__grade { grid-template-columns: 1.35fr 1fr; gap: clamp(3rem, 6vw, 5rem); align-items: start; } }

.sobre__texto .section-header { margin-bottom: var(--e-4); }
.sobre__paragrafo { color: var(--suave); font-size: var(--t-sm); }
.sobre__paragrafo + .sobre__paragrafo { margin-top: var(--e-3); }
.sobre__acoes { margin-top: var(--e-5); }

/* Mapa do Brasil (substituiu os boxes ISO/BR a pedido do cliente).
   Geometria e projeção documentadas em partials/home/mapa-brasil.php. */
.sobre__mapa {
    display: grid;
    justify-items: center;
    gap: var(--e-5);
    padding: clamp(1.5rem, 4vw, 2.5rem);
    border: 1px solid var(--linha);
    border-radius: var(--r-lg);
    background: var(--fundo-alt);
}

.mapa-br { display: block; width: 100%; max-width: 21rem; height: auto; }

/* As divisas são "vazadas" com a cor do painel em vez de desenhadas com uma
   linha própria: dá a separação entre estados sem sujar o contorno externo,
   que continua sendo uma silhueta limpa. */
.mapa-br__estados path {
    fill: var(--azul-100);
    stroke: var(--fundo-alt);
    stroke-width: 1.6;
    stroke-linejoin: round;
}
/* Santa Catarina destacada: a sede se lê antes mesmo de notar o marcador. */
.mapa-br__estados path[data-uf="SC"] { fill: var(--azul-500); }

.mapa-br__ponto { fill: var(--azul-700); stroke: var(--fundo-alt); stroke-width: 2; }
.mapa-br__pulso { fill: var(--azul-600); opacity: .22; }
@media (prefers-reduced-motion: no-preference) {
    .mapa-br__pulso { transform-origin: center; animation: mapaBrPulso 2.8s ease-out infinite; }
}
@keyframes mapaBrPulso {
    0%   { transform: scale(.35); opacity: .5; }
    70%  { transform: scale(1);   opacity: 0; }
    100% { transform: scale(1);   opacity: 0; }
}

.sobre__mapa-legenda { display: grid; gap: var(--e-1); text-align: center; }
.sobre__mapa-legenda strong { font-size: var(--t-base); color: var(--azul-700); }
.sobre__mapa-legenda span {
    display: inline-flex; align-items: center; justify-content: center; gap: var(--e-1);
    font-size: var(--t-sm); color: var(--suave);
}

/* == 18 Página de erro ================================================== */
.erro__box { display: grid; gap: var(--e-5); justify-items: center; text-align: center; max-width: 56rem; }
.erro__box .eyebrow { color: var(--erro); background: var(--erro-bg); border-color: transparent; }
.erro__atalhos { width: 100%; margin-top: var(--e-3); text-align: left; }
.erro__acoes { display: flex; flex-wrap: wrap; gap: var(--e-3); justify-content: center; margin-top: var(--e-3); }

/* == 19 Páginas de produto ============================================== */

/* Hero das páginas internas: mesma linguagem do da home, mais contido. */
.hero--produto { padding-block: clamp(3rem, 8vw, 5.5rem) clamp(2.5rem, 6vw, 4.5rem); }
.hero--curto   { padding-block: clamp(3rem, 8vw, 5rem) clamp(2rem, 5vw, 3.5rem); }
.hero--produto .hero__titulo { max-width: 20ch; }
.hero--produto .hero__sub strong { color: #fff; font-weight: 600; }

/* O hero é grid: quem controla o eixo inline é justify-self. Com align-self a
   pill esticava a largura toda. */
.eyebrow--claro {
    justify-self: start;
    background: rgba(255, 255, 255, .1);
    border-color: rgba(255, 255, 255, .18);
    color: var(--azul-300);
}

.hero__atalhos { display: flex; flex-wrap: wrap; gap: var(--e-2); margin-top: var(--e-2); }
.chip--link {
    background: rgba(255, 255, 255, .08);
    border-color: rgba(255, 255, 255, .16);
    color: #fff;
    text-decoration: none;
    transition: background-color var(--transicao), border-color var(--transicao);
}
.chip--link:hover { background: rgba(255, 255, 255, .16); border-color: rgba(255, 255, 255, .34); color: #fff; }

/* --- Versões (SoundPLAN) ------------------------------------------------ */
.versao { position: relative; }
.versao--destaque { border-color: var(--azul-300); box-shadow: var(--s-3); }

.versao__selo {
    position: absolute;
    top: calc(-1 * var(--e-3));
    right: var(--e-5);
    padding: 0.25rem 0.75rem;
    border-radius: var(--r-pill);
    background: var(--azul-700);
    color: #fff;
    font-size: var(--t-xs);
    font-weight: 600;
}
.versao__chamada { color: var(--azul-700); font-weight: 600; font-size: var(--t-sm); }
.versao__acoes { display: flex; flex-wrap: wrap; gap: var(--e-2); margin-top: auto; padding-top: var(--e-2); }

.lista-check--compacta li { font-size: var(--t-xs); }

/* --- Módulos ------------------------------------------------------------ */
.modulos { display: grid; gap: var(--e-6); }

.modulo-grupo {
    padding: clamp(1.25rem, 3vw, 2rem);
    background: var(--fundo);
    border: 1px solid var(--linha);
    border-radius: var(--r-lg);
}

.modulo-grupo__cabecalho {
    display: grid;
    grid-template-columns: auto 1fr;
    gap: var(--e-3) var(--e-4);
    align-items: center;
    padding-bottom: var(--e-4);
    margin-bottom: var(--e-4);
    border-bottom: 1px solid var(--linha);
}
@media (min-width: 48em) { .modulo-grupo__cabecalho { grid-template-columns: auto 1fr auto; } }

.modulo-grupo__icone {
    display: grid; place-items: center;
    width: 2.75rem; height: 2.75rem;
    border-radius: var(--r-sm);
    background: var(--azul-50);
    color: var(--azul-700);
}
.modulo-grupo__titulo { font-size: var(--t-lg); }
.modulo-grupo__resumo { font-size: var(--t-sm); color: var(--suave); margin-top: 2px; }
.modulo-grupo__contagem {
    grid-column: 1 / -1;
    justify-self: start;
    padding: 0.25rem 0.75rem;
    border-radius: var(--r-pill);
    background: var(--fundo-alt);
    color: var(--suave);
    font-size: var(--t-xs);
    font-weight: 600;
    white-space: nowrap;
}
@media (min-width: 48em) { .modulo-grupo__contagem { grid-column: auto; justify-self: end; } }

.modulo-lista { display: grid; gap: var(--e-4); }
@media (min-width: 44em) { .modulo-lista { grid-template-columns: repeat(2, 1fr); gap: var(--e-4) var(--e-5); } }
@media (min-width: 70em) { .modulo-lista { grid-template-columns: repeat(3, 1fr); } }

.modulo-grupo__nota { margin-top: var(--e-4); font-size: var(--t-xs); color: var(--suave); }

.modulo { padding-left: var(--e-4); border-left: 2px solid var(--azul-100); }
.modulo__nome { font-size: var(--t-sm); font-weight: 600; }
.modulo__texto { margin-top: 2px; font-size: var(--t-xs); color: var(--suave); line-height: 1.55; }

/* --- Auralização -------------------------------------------------------- */
.auralizacao__grade { display: grid; gap: var(--e-7); }
@media (min-width: 60em) { .auralizacao__grade { grid-template-columns: 1.15fr 1fr; gap: clamp(3rem, 6vw, 5rem); align-items: center; } }

.auralizacao .section-header { margin-bottom: var(--e-4); }
.auralizacao__descricao { color: rgba(255, 255, 255, .78); font-size: var(--t-sm); margin-bottom: var(--e-5); }

.auralizacao__demo {
    padding: var(--e-5);
    background: rgba(255, 255, 255, .05);
    border: 1px solid rgba(255, 255, 255, .12);
    border-radius: var(--r-lg);
}
.auralizacao__rotulo {
    font-size: var(--t-xs); font-weight: 600;
    letter-spacing: .12em; text-transform: uppercase;
    color: var(--azul-300);
    margin-bottom: var(--e-4);
}
.auralizacao__faixas { display: grid; gap: var(--e-4); }

.faixa { display: grid; gap: var(--e-2); }
.faixa__rotulo {
    display: flex; align-items: center; gap: var(--e-2);
    font-size: var(--t-sm); font-weight: 500; color: #fff;
}
.faixa__rotulo .icon { color: var(--azul-300); }
.faixa audio { width: 100%; }
.faixa__pendente {
    display: flex; align-items: center; gap: var(--e-2);
    padding: var(--e-3);
    border: 1px dashed rgba(255, 255, 255, .24);
    border-radius: var(--r-sm);
    font-size: var(--t-xs);
    color: rgba(255, 255, 255, .6);
}

/* --- Aviso de catálogo (Bedrock, enquanto não há produtos) --------------- */
.aviso-catalogo {
    display: grid;
    gap: var(--e-4);
    padding: clamp(1.5rem, 4vw, 2.5rem);
    background: var(--fundo);
    border: 1px solid var(--linha);
    border-radius: var(--r-xl);
    box-shadow: var(--s-2);
}
@media (min-width: 44em) { .aviso-catalogo { grid-template-columns: auto 1fr; gap: var(--e-5); align-items: start; } }

.aviso-catalogo__icone {
    display: grid; place-items: center;
    width: 3.25rem; height: 3.25rem;
    border-radius: var(--r-md);
    background: var(--azul-50);
    color: var(--azul-700);
}
.aviso-catalogo__titulo { font-size: var(--t-lg); }
.aviso-catalogo__texto { margin-top: var(--e-2); color: var(--suave); font-size: var(--t-sm); max-width: 60ch; }
.aviso-catalogo__acoes { display: flex; flex-wrap: wrap; gap: var(--e-3); margin-top: var(--e-4); }

.produto__figura { width: 100%; aspect-ratio: 4 / 3; object-fit: cover; border-radius: var(--r-md); }

/* == 20 Página de indústrias ============================================ */
.setor__grade { display: grid; gap: var(--e-6); align-items: center; }
@media (min-width: 64em) {
    .setor__grade { grid-template-columns: minmax(0, .9fr) minmax(0, 1.1fr); gap: clamp(3rem, 6vw, 6rem); }
    .setor__grade--invertida .setor__visual { order: 2; }
}

.setor__visual {
    position: relative;
    min-width: 0;
    border-radius: var(--r-xl);
    overflow: hidden;
    background: var(--azul-900);
    box-shadow: var(--s-4);
}
.setor__imagem {
    width: 100%;
    min-height: 24rem;
    aspect-ratio: 4 / 5;
    object-fit: cover;
    border-radius: 0;
}
.setor__visual .figura--pendente { min-height: 24rem; border: 0; border-radius: 0; }
.setor__visual::after {
    content: '';
    position: absolute;
    inset: 0;
    pointer-events: none;
    background: linear-gradient(to top, rgba(8, 21, 30, .72), transparent 46%);
}
.setor__visual-badge {
    position: absolute;
    z-index: 1;
    left: var(--e-4);
    bottom: var(--e-4);
    display: inline-flex;
    align-items: center;
    gap: var(--e-2);
    padding: .6rem .9rem;
    border: 1px solid rgba(255, 255, 255, .24);
    border-radius: var(--r-pill);
    background: rgba(8, 21, 30, .72);
    color: #fff;
    font-size: var(--t-xs);
    font-weight: 600;
    backdrop-filter: blur(10px);
}

.setor__conteudo { min-width: 0; }
.setor__eyebrow {
    margin-bottom: var(--e-2);
    color: var(--ok);
    font-size: var(--t-xs);
    font-weight: 700;
    letter-spacing: .12em;
    text-transform: uppercase;
}

.setor__titulo { font-size: var(--t-xl); }
.setor__resumo { margin-top: var(--e-3); color: var(--tinta-70); font-size: var(--t-md); }

.setor__rotulo {
    margin-bottom: var(--e-2);
    font-size: var(--t-xs); font-weight: 600;
    letter-spacing: .1em; text-transform: uppercase;
    color: var(--tinta);
}
.setor__desafio { color: var(--suave); font-size: var(--t-sm); }

.setor__painel {
    display: grid;
    grid-template-columns: auto 1fr;
    gap: var(--e-3);
    margin-top: var(--e-5);
    padding: var(--e-4);
    background: var(--fundo);
    border: 1px solid var(--linha);
    border-radius: var(--r-lg);
    box-shadow: var(--s-1);
}
.secao--alt .setor__painel { background: rgba(255, 255, 255, .76); }
.setor__painel-icone {
    display: grid;
    place-items: center;
    width: 2.5rem;
    height: 2.5rem;
    border-radius: var(--r-sm);
    background: var(--ok-bg);
    color: var(--ok);
}
.setor__entregas { margin-top: var(--e-5); }
.setor__chips { display: grid; gap: var(--e-2); }
@media (min-width: 38em) { .setor__chips { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
.setor__chips li {
    display: flex;
    align-items: flex-start;
    gap: var(--e-2);
    padding: .75rem .85rem;
    border: 1px solid var(--linha);
    border-radius: var(--r-md);
    background: var(--fundo);
    color: var(--tinta-70);
    font-size: var(--t-xs);
    line-height: 1.5;
}
.setor__chips .icon { flex: none; margin-top: .08rem; color: var(--ok); }
.setor__acoes { margin-top: var(--e-5); }

/* == 21 Blog ============================================================ */
.filtros { display: flex; flex-wrap: wrap; gap: var(--e-2); margin-bottom: var(--e-6); }
.chip--ativo { background: var(--azul-700); border-color: var(--azul-700); color: #fff; }
.chip--ativo:hover { color: #fff; }
a.chip { text-decoration: none; transition: background-color var(--transicao), border-color var(--transicao), color var(--transicao); }
a.chip:hover { border-color: var(--azul-300); color: var(--azul-800); }
a.chip--ativo:hover { background: var(--azul-800); border-color: var(--azul-800); }
.chip__contagem {
    padding-left: var(--e-2);
    margin-left: var(--e-1);
    border-left: 1px solid currentColor;
    opacity: .6;
    font-variant-numeric: tabular-nums;
}

.post-card {
    background: var(--fundo);
    border: 1px solid var(--linha);
    border-radius: var(--r-lg);
    overflow: hidden;
    transition: transform var(--transicao), box-shadow var(--transicao), border-color var(--transicao);
}
.post-card:hover { transform: translateY(-3px); border-color: var(--azul-300); box-shadow: var(--s-3); }
.post-card__link { display: grid; height: 100%; color: inherit; text-decoration: none; }
.post-card__link:hover { color: inherit; }

.post-card__capa { overflow: hidden; background: var(--fundo-alt); }
.post-card__imagem {
    width: 100%; aspect-ratio: 16 / 10; object-fit: cover;
    border-radius: 0;
    transition: transform var(--transicao-lenta);
}
.post-card:hover .post-card__imagem { transform: scale(1.03); }
.post-card__capa .figura--pendente { aspect-ratio: 16 / 10; border: 0; border-radius: 0; }

.post-card__corpo { display: grid; gap: var(--e-2); align-content: start; padding: var(--e-5); }
.post-card__categorias {
    font-size: var(--t-xs); font-weight: 600;
    letter-spacing: .06em; text-transform: uppercase;
    color: var(--azul-600);
}
.post-card__titulo { font-size: var(--t-lg); }
.post-card__resumo {
    color: var(--suave); font-size: var(--t-sm);
    display: -webkit-box; -webkit-line-clamp: 4; -webkit-box-orient: vertical; overflow: hidden;
}
.post-card__meta {
    display: flex; flex-wrap: wrap; gap: var(--e-2);
    margin-top: auto; padding-top: var(--e-2);
    font-size: var(--t-xs); color: var(--suave);
}

/* --- Post individual ---------------------------------------------------- */
.post__cabecalho { padding-block: clamp(2rem, 5vw, 3.5rem) var(--e-6); background: var(--fundo-alt); }
.post__cabecalho-inner { display: grid; gap: var(--e-4); max-width: 52rem; }

.migalhas ol { display: flex; flex-wrap: wrap; gap: var(--e-2); font-size: var(--t-xs); color: var(--suave); }
.migalhas li + li::before { content: '/'; margin-right: var(--e-2); color: var(--linha-forte); }
.migalhas a { color: var(--suave); text-decoration: none; }
.migalhas a:hover { color: var(--azul-700); text-decoration: underline; }
.migalhas [aria-current="page"] {
    color: var(--tinta-70);
    max-width: 28ch; overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
}

.post__categorias { display: flex; flex-wrap: wrap; gap: var(--e-2); }
.post__titulo { font-size: var(--t-2xl); max-width: 22ch; }
.post__resumo { font-size: var(--t-md); color: var(--suave); max-width: 60ch; }
.post__meta {
    display: flex; flex-wrap: wrap; align-items: center; gap: var(--e-2);
    font-size: var(--t-sm); color: var(--suave);
}
.post__autor { display: inline-flex; align-items: center; gap: var(--e-1); font-weight: 500; color: var(--tinta-70); }

.post__capa { margin-block: 0 clamp(2rem, 5vw, 3rem); background: linear-gradient(var(--fundo-alt) 50%, var(--fundo) 50%); }
.post__capa-imagem {
    width: 100%; max-height: 30rem; object-fit: cover;
    border-radius: var(--r-xl);
    box-shadow: var(--s-3);
}
.post__capa .figura--pendente { aspect-ratio: 16 / 7; border-radius: var(--r-xl); }

.post__grade { display: grid; gap: var(--e-7); padding-bottom: var(--secao-y); }
@media (min-width: 64em) { .post__grade { grid-template-columns: minmax(0, 1fr) 19rem; gap: clamp(3rem, 5vw, 4.5rem); align-items: start; } }

.post__lateral { display: grid; gap: var(--e-4); align-content: start; }
@media (min-width: 64em) { .post__lateral { position: sticky; top: calc(var(--header-h) + var(--e-5)); } }

.post__caixa {
    display: grid; gap: var(--e-3);
    padding: var(--e-5);
    background: var(--fundo-alt);
    border: 1px solid var(--linha);
    border-radius: var(--r-lg);
}
.post__caixa-titulo { font-weight: 600; font-size: var(--t-sm); }
.post__caixa-texto { font-size: var(--t-sm); color: var(--suave); }
.post__caixa--links ul { display: grid; gap: var(--e-1); }
.post__caixa--links a {
    display: flex; align-items: center; gap: var(--e-2);
    padding: var(--e-2) var(--e-3);
    margin-inline: calc(-1 * var(--e-3));
    border-radius: var(--r-sm);
    font-size: var(--t-sm);
    color: var(--tinta-70);
    text-decoration: none;
    transition: background-color var(--transicao), color var(--transicao);
}
.post__caixa--links a:hover { background: var(--fundo); color: var(--azul-700); }
.post__caixa--links .icon { color: var(--azul-600); }

/* --- Prosa: o corpo do post em Markdown --------------------------------- */
.prosa { max-width: 46rem; font-size: var(--t-md); color: var(--tinta-70); }
.prosa > * + * { margin-top: 1.15em; }

.prosa h2 {
    margin-top: 2em; margin-bottom: .6em;
    font-size: var(--t-xl); color: var(--tinta);
    scroll-margin-top: calc(var(--header-h) + var(--e-5));
}
.prosa h3 { margin-top: 1.75em; margin-bottom: .5em; font-size: var(--t-lg); color: var(--tinta); }
.prosa h4 { margin-top: 1.5em; font-size: var(--t-md); color: var(--tinta); }

.prosa p { line-height: 1.75; }
.prosa strong { color: var(--tinta); font-weight: 600; }
.prosa a { color: var(--azul-700); text-decoration: underline; }
.prosa a:hover { color: var(--azul-600); }

.prosa ul, .prosa ol { display: grid; gap: .55em; padding-left: 1.5em; }
.prosa ul { list-style: none; padding-left: 0; }
.prosa ul li { position: relative; padding-left: 1.6em; line-height: 1.7; }
.prosa ul li::before {
    content: ''; position: absolute; left: .45em; top: .72em;
    width: .4em; height: .4em; border-radius: 50%;
    background: var(--azul-500);
}
.prosa ol { list-style: decimal; }
.prosa ol li { padding-left: .35em; line-height: 1.7; }
.prosa li::marker { color: var(--azul-600); font-weight: 600; }

.prosa blockquote {
    padding: var(--e-4) var(--e-5);
    border-left: 3px solid var(--azul-500);
    border-radius: 0 var(--r-md) var(--r-md) 0;
    background: var(--azul-50);
    color: var(--tinta-70);
    font-size: var(--t-base);
}
.prosa blockquote p + p { margin-top: .8em; }

.prosa img { width: 100%; border-radius: var(--r-lg); box-shadow: var(--s-2); }
.prosa hr { border: 0; border-top: 1px solid var(--linha); margin-block: 2.5em; }

.prosa code {
    padding: .15em .4em;
    border-radius: 6px;
    background: var(--fundo-alt);
    border: 1px solid var(--linha);
    font-family: ui-monospace, SFMono-Regular, Menlo, monospace;
    font-size: .875em;
}
.prosa pre {
    overflow-x: auto;
    padding: var(--e-4);
    border-radius: var(--r-md);
    background: var(--azul-900);
    color: #e6eef4;
}
.prosa pre code { padding: 0; background: none; border: 0; color: inherit; }

.prosa table { width: 100%; border-collapse: collapse; font-size: var(--t-sm); }
.prosa :is(th, td) { padding: .65em .85em; border: 1px solid var(--linha); text-align: left; }
.prosa th { background: var(--fundo-alt); font-weight: 600; color: var(--tinta); }

/* == 22 Contato e páginas transacionais ================================= */
.contato__grade { display: grid; gap: var(--e-7); }
@media (min-width: 62em) { .contato__grade { grid-template-columns: minmax(0, 1.5fr) 21rem; gap: clamp(3rem, 5vw, 4.5rem); align-items: start; } }

.contato__titulo { font-size: var(--t-xl); margin-bottom: var(--e-5); }

.contato__form { display: grid; gap: var(--e-4); }
/* align-items: start é o que impede o campo da coluna mais curta de esticar até
   a altura da outra. Sem isso, uma dica ou uma mensagem de erro embaixo de um
   dos dois campos deixa o <input> vizinho mais alto que o seu par. */
.contato__linha { display: grid; gap: var(--e-4); align-items: start; }
@media (min-width: 34em) { .contato__linha { grid-template-columns: repeat(2, 1fr); } }

.contato__form .btn { justify-self: start; }
.contato__aviso { font-size: var(--t-xs); color: var(--suave); }

.contato__form + .feedback,
.contato__form-col > .feedback { margin-bottom: var(--e-5); }
.feedback:focus-visible { outline-offset: 4px; }

/* Select com a seta desenhada, para não herdar o widget do sistema. */
.campo__select {
    appearance: none;
    padding-right: 2.75rem;
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%235d6d79' stroke-width='1.5' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M6 9l6 6 6-6'/%3E%3C/svg%3E");
    background-repeat: no-repeat;
    background-position: right 1rem center;
    background-size: 1.25rem;
}

.contato__lateral { display: grid; gap: var(--e-3); align-content: start; }

.canal {
    display: grid;
    grid-template-columns: auto 1fr auto;
    gap: var(--e-3);
    align-items: center;
    padding: var(--e-4);
    background: var(--fundo);
    border: 1px solid var(--linha);
    border-radius: var(--r-lg);
    color: inherit;
    text-decoration: none;
    transition: border-color var(--transicao), box-shadow var(--transicao), transform var(--transicao);
}
a.canal:hover { border-color: var(--azul-300); box-shadow: var(--s-2); transform: translateY(-2px); color: inherit; }
.canal--estatico { font-style: normal; align-items: start; grid-template-columns: auto 1fr; }

.canal__icone {
    display: grid; place-items: center;
    width: 2.75rem; height: 2.75rem;
    border-radius: var(--r-sm);
    background: var(--azul-50);
    color: var(--azul-700);
}
.canal__icone--zap { background: #e8faef; color: #128c4a; }
.canal__texto { display: grid; gap: 2px; min-width: 0; }
.canal__texto strong { font-size: var(--t-sm); }
.canal__texto span { font-size: var(--t-xs); color: var(--suave); line-height: 1.45; overflow-wrap: anywhere; }
.canal__seta { color: var(--linha-forte); }
a.canal:hover .canal__seta { color: var(--azul-600); }

.contato__nota {
    display: flex; align-items: flex-start; gap: var(--e-2);
    margin-top: var(--e-2);
    font-size: var(--t-xs); color: var(--suave);
}
.contato__nota .icon { color: var(--azul-600); margin-top: .1rem; }

/* --- Páginas transacionais (confirmação da newsletter) ------------------ */
.transacional__box {
    display: grid; gap: var(--e-4); justify-items: center;
    max-width: 40rem; margin-inline: auto;
    text-align: center;
}
.transacional__icone {
    display: grid; place-items: center;
    width: 4.5rem; height: 4.5rem;
    border-radius: var(--r-pill);
}
.transacional__icone--ok   { background: var(--ok-bg);   color: var(--ok); }
.transacional__icone--erro { background: var(--erro-bg); color: var(--erro); }
.transacional__nota { font-size: var(--t-sm); color: var(--suave); max-width: 44ch; }
.transacional__acoes { display: flex; flex-wrap: wrap; gap: var(--e-3); justify-content: center; margin-top: var(--e-3); }

/* == 23 Páginas legais ================================================== */
.legal__box {
    display: grid;
    grid-template-columns: minmax(0, 1fr);
    max-width: 50rem;
    min-width: 0;
    margin-inline: auto;
    gap: var(--e-4);
}
.legal__box > *,
.legal__box .prosa { min-width: 0; max-width: 100%; }
.legal__box :is(a, code, strong) { overflow-wrap: anywhere; }
.legal__box .section-title { font-size: var(--t-2xl); }
.legal__data { font-size: var(--t-sm); color: var(--suave); }
.legal__box .prosa { margin-top: var(--e-4); max-width: none; }
.legal__acoes {
    display: flex; flex-wrap: wrap; gap: var(--e-3);
    margin-top: var(--e-6); padding-top: var(--e-5);
    border-top: 1px solid var(--linha);
}

/* Tabelas largas precisam rolar dentro do próprio bloco — nunca fazer a
   página inteira rolar na horizontal no celular. */
.tabela-rolagem {
    overflow-x: auto;
    -webkit-overflow-scrolling: touch;
    border: 1px solid var(--linha);
    border-radius: var(--r-md);
}
.tabela-rolagem table { min-width: 38rem; border: 0; }
.tabela-rolagem :is(th, td) { border-left: 0; border-right: 0; }
.tabela-rolagem tr:last-child td { border-bottom: 0; }

/* == 24 Tarja de ambiente de teste ====================================== */
/* Só aparece com AMBIENTE = 'teste' no config.php. Fica acima do header
   fixo — deliberadamente impossível de ignorar. */
.tarja-teste {
    position: relative;
    z-index: 101;
    display: flex;
    align-items: center;
    justify-content: center;
    gap: var(--e-2);
    padding: .5rem var(--gutter);
    background: #8a5a10;
    color: #fff;
    font-size: var(--t-xs);
    text-align: center;
}
.tarja-teste a { color: #fff; text-decoration: underline; }
.tarja-teste .icon { flex: none; }

/* Com a tarja presente, o header gruda logo abaixo dela em vez do topo. */
body:has(.tarja-teste) .site-header { top: 0; }

@media print { .tarja-teste { display: none; } }

/* == 25 Carrossel e cards de setor ====================================== */
.setores-topo {
    display: flex;
    flex-wrap: wrap;
    align-items: flex-end;
    justify-content: space-between;
    gap: var(--e-4);
}
.setores-topo .section-header { margin-bottom: var(--e-5); flex: 1 1 32rem; }

.carrossel__controles { display: flex; gap: var(--e-2); margin-bottom: var(--e-5); }
.carrossel__controles[hidden] { display: none; }

.carrossel__botao {
    display: grid; place-items: center;
    width: 2.75rem; height: 2.75rem;
    border: 1px solid var(--linha-forte);
    border-radius: var(--r-pill);
    background: var(--fundo);
    color: var(--azul-800);
    transition: background-color var(--transicao), border-color var(--transicao),
                color var(--transicao), opacity var(--transicao);
}
.carrossel__botao:hover:not(:disabled) { background: var(--azul-700); border-color: var(--azul-700); color: #fff; }
.carrossel__botao:disabled { opacity: .35; cursor: default; }
[data-carrossel-anterior] .icon { transform: rotate(180deg); }

/* Trilho: rolagem horizontal com encaixe. Sem JS continua arrastável. */
.carrossel__trilho {
    display: flex;
    gap: var(--e-4);
    overflow-x: auto;
    overscroll-behavior-x: contain;
    scroll-snap-type: x mandatory;
    scroll-padding-inline: var(--gutter);
    padding-inline: var(--gutter);
    padding-block: var(--e-1) var(--e-4);
    -webkit-overflow-scrolling: touch;
    /* Barra de rolagem escondida a pedido do cliente: os botões do topo já são o
       controle visível, e o gesto de arrastar continua funcionando normalmente.
       O trilho segue focável e navegável por teclado (tabindex no HTML). */
    scrollbar-width: none;
}
.carrossel__trilho::-webkit-scrollbar { display: none; }
.carrossel__trilho:focus-visible { outline: 3px solid var(--azul-500); outline-offset: -3px; }

/* Centraliza o trilho quando a tela é maior que o container. */
@media (min-width: 1264px) {
    .carrossel__trilho {
        padding-inline: max(var(--gutter), calc((100vw - var(--largura)) / 2 + var(--gutter)));
        scroll-padding-inline: max(var(--gutter), calc((100vw - var(--largura)) / 2 + var(--gutter)));
    }
}

.carrossel__item {
    flex: 0 0 auto;
    width: min(78vw, 20rem);
    scroll-snap-align: start;
}
@media (min-width: 48em) { .carrossel__item { width: 18.5rem; } }

.setor-card {
    position: relative;
    isolation: isolate;
    display: flex;
    flex-direction: column;
    justify-content: flex-end;
    height: 25rem;
    padding: var(--e-5);
    border-radius: var(--r-xl);
    overflow: hidden;
    background: var(--azul-900);
    color: #fff;
    text-decoration: none;
    transition: transform var(--transicao), box-shadow var(--transicao);
}
.setor-card:hover { transform: translateY(-4px); box-shadow: var(--s-4); color: #fff; }

.setor-card__foto {
    position: absolute; inset: 0; z-index: -2;
    width: 100%; height: 100%;
    object-fit: cover;
    border-radius: 0;
    transition: transform var(--transicao-lenta);
}
.setor-card:hover .setor-card__foto { transform: scale(1.05); }

/* Véu escuro: garante o contraste do texto sobre qualquer foto. */
.setor-card::after {
    content: '';
    position: absolute; inset: 0; z-index: -1;
    background: linear-gradient(to top,
        rgba(9, 22, 30, .94) 0%,
        rgba(9, 22, 30, .78) 34%,
        rgba(9, 22, 30, .34) 62%,
        rgba(9, 22, 30, .18) 100%);
}

/* Sem foto: gradiente da marca em vez de um buraco. */
.setor-card--sem-foto {
    background:
        radial-gradient(120% 100% at 20% 0%, var(--azul-600) 0%, var(--azul-800) 55%, var(--azul-900) 100%);
}
.setor-card--sem-foto::after { background: linear-gradient(to top, rgba(9,22,30,.55), transparent 70%); }

.setor-card__conteudo { display: grid; gap: var(--e-2); }

.setor-card__badge {
    justify-self: start;
    padding: .35rem .7rem;
    border: 1px solid rgba(255, 255, 255, .22);
    border-radius: var(--r-pill);
    background: rgba(255, 255, 255, .12);
    color: rgba(255, 255, 255, .9);
    font-size: .6875rem;
    font-weight: 700;
    letter-spacing: .08em;
    text-transform: uppercase;
    backdrop-filter: blur(6px);
}

.setor-card__icone {
    display: grid; place-items: center;
    width: 2.75rem; height: 2.75rem;
    margin-bottom: var(--e-2);
    border-radius: var(--r-sm);
    background: rgba(255, 255, 255, .16);
    color: #fff;
    backdrop-filter: blur(6px);
}
.setor-card__titulo { font-size: var(--t-lg); font-weight: 600; line-height: 1.2; }

.setor-card__texto {
    font-size: var(--t-xs);
    line-height: 1.55;
    color: rgba(255, 255, 255, .82);
    display: -webkit-box; -webkit-line-clamp: 4; -webkit-box-orient: vertical; overflow: hidden;
}

.setor-card__link {
    display: inline-flex; align-items: center; gap: var(--e-1);
    margin-top: var(--e-2);
    font-size: var(--t-xs); font-weight: 600;
    color: var(--azul-300);
}
.setor-card:hover .setor-card__link { color: #fff; }
.setor-card__link .icon { transition: transform var(--transicao); }
.setor-card:hover .setor-card__link .icon { transform: translateX(3px); }

.setores-rodape { margin-top: var(--e-5); }

/* == 26 Visuais das páginas de produto ================================== */

/* --- Hero em duas colunas ----------------------------------------------- */
.hero__grade { display: grid; gap: var(--e-6); align-items: center; }
@media (min-width: 62em) {
    .hero__grade { grid-template-columns: 1.05fr .95fr; gap: clamp(2.5rem, 5vw, 4.5rem); }
}
.hero--com-visual .hero__inner { max-width: none; }
.hero--com-visual .hero__titulo { max-width: 14ch; }

.hero__visual { display: grid; gap: var(--e-3); }
.hero__visual-img {
    width: 100%;
    border-radius: var(--r-lg);
    border: 1px solid rgba(255, 255, 255, .16);
    box-shadow: var(--s-4);
}
.hero__visual .figura--pendente { aspect-ratio: 16 / 10; }

/* Produto recortado (PNG/WebP com transparência) sobre o fundo escuro: sem
   moldura nem sombra de cartão — a sombra acompanha o contorno do objeto. */
.hero__visual--produto .hero__visual-img {
    border: 0;
    box-shadow: none;
    background: none;
    max-width: 32rem;
    margin-inline: auto;
    filter: drop-shadow(0 28px 44px rgba(0, 0, 0, .5));
}

.hero__visual-legenda {
    display: flex; align-items: center; gap: var(--e-2);
    font-size: var(--t-xs);
    color: rgba(255, 255, 255, .6);
}
.hero__visual-legenda .icon { color: var(--azul-300); flex: none; }

/* --- Insígnia da versão (SoundPLAN) ------------------------------------- */
.versao__insignia {
    width: 3rem; height: 3rem;
    border-radius: var(--r-sm);
    object-fit: contain;
}
.versao .figura--pendente { display: none; }

/* --- Galeria de resultados ---------------------------------------------- */
.galeria__item {
    display: grid;
    background: var(--fundo);
    border: 1px solid var(--linha);
    border-radius: var(--r-lg);
    overflow: hidden;
    transition: border-color var(--transicao), box-shadow var(--transicao);
}
.galeria__item:hover { border-color: var(--azul-300); box-shadow: var(--s-3); }

.galeria__img {
    width: 100%;
    aspect-ratio: 16 / 10;
    object-fit: cover;
    object-position: center;
    border-radius: 0;
    background: var(--fundo-alt);
}
.galeria__item .figura--pendente { aspect-ratio: 16 / 10; border: 0; border-radius: 0; }

.galeria__legenda { display: grid; gap: var(--e-1); padding: var(--e-4) var(--e-5) var(--e-5); }
.galeria__legenda strong { font-size: var(--t-base); }
.galeria__legenda span { font-size: var(--t-sm); color: var(--suave); }

/* --- Card com foto (ecossistema Bedrock) -------------------------------- */
.card--com-foto { padding: 0; overflow: hidden; }
.card--com-foto > :not(.card__foto) { margin-inline: var(--e-5); }
.card--com-foto > :last-child { margin-bottom: var(--e-5); }

.card__foto {
    display: grid; place-items: center;
    padding: var(--e-5);
    background: linear-gradient(160deg, var(--fundo-alt), #eef3f7);
    border-bottom: 1px solid var(--linha);
}
.card__foto-img {
    max-height: 11rem;
    width: auto;
    object-fit: contain;
    border-radius: 0;
}
.card__foto .figura--pendente { width: 100%; aspect-ratio: 4 / 3; }
.card--com-foto .card__icone { margin-top: var(--e-5); }

/* --- Produto (linha Bedrock) -------------------------------------------- */
.produto { overflow: hidden; }
.produto__figura {
    width: 100%;
    aspect-ratio: 4 / 3;
    object-fit: contain;
    padding: var(--e-4);
    background: linear-gradient(160deg, var(--fundo-alt), #eef3f7);
    border: 1px solid var(--linha);
    border-radius: var(--r-md);
}

/* --- Evento com imagem de divulgação ------------------------------------ */
@media (min-width: 52em) {
    .evento--com-imagem { grid-template-columns: 16rem auto 1fr; }
}
.evento__imagem { border-radius: var(--r-md); overflow: hidden; background: var(--fundo-alt); }
.evento__imagem-img {
    width: 100%;
    aspect-ratio: 16 / 9;
    object-fit: cover;
    border-radius: 0;
}
@media (min-width: 52em) {
    .evento__imagem-img { height: 100%; aspect-ratio: auto; }
}
.evento__imagem .figura--pendente { display: none; }

/* --- Parceiros: logos reais --------------------------------------------- */
.parceiro__logo[src*="soundplan"] { height: 4.75rem; max-width: 4.25rem; }

/* == 27 Produtos em destaque na home ==================================== */
.produtos-home { background: var(--fundo-esc); color: #fff; overflow: hidden; }
.produtos-home .section-title { color: #fff; }
.produtos-home .section-sub { color: rgba(255, 255, 255, .68); }
.produtos-home .eyebrow { color: var(--azul-300); background: rgba(255, 255, 255, .08); }
.produtos-home__grade { display: grid; gap: var(--e-5); }
@media (min-width: 64em) { .produtos-home__grade { grid-template-columns: repeat(2, minmax(0, 1fr)); } }

.produto-home {
    position: relative;
    isolation: isolate;
    display: grid;
    min-height: 34rem;
    overflow: hidden;
    border: 1px solid rgba(255, 255, 255, .12);
    border-radius: var(--r-xl);
    background: #102738;
}
.produto-home--soundplan {
    background: radial-gradient(110% 90% at 100% 0%, rgba(99, 184, 55, .34), transparent 55%), #07558d;
}
.produto-home--bedrock {
    background: radial-gradient(110% 90% at 100% 0%, rgba(173, 36, 65, .34), transparent 55%), #161a24;
}
.produto-home__conteudo {
    position: relative;
    z-index: 2;
    display: grid;
    align-content: end;
    justify-items: start;
    gap: var(--e-3);
    padding: clamp(1.5rem, 4vw, 2.5rem);
    background: linear-gradient(to top, rgba(5, 14, 21, .98) 0%, rgba(5, 14, 21, .82) 58%, transparent 100%);
}
/* Os dois logos têm proporções opostas (SoundPLAN 270x482 em pé, Bedrock 320x108
   deitado). Sem regra própria, o Bedrock encolhia até sobrar quase só caixa branca.
   O min-height iguala a altura das duas caixas; cada marca ganha a sua medida. */
.produto-home__logo-wrap {
    display: grid;
    place-items: center;
    min-width: 7rem;
    min-height: 5.15rem;
    padding: .45rem .7rem;
    border-radius: var(--r-sm);
    background: rgba(255, 255, 255, .94);
}
.produto-home__logo { display: block; width: auto; height: 3rem; max-width: 7rem; object-fit: contain; border-radius: 0; }
.produto-home--soundplan .produto-home__logo { height: 4.25rem; max-width: 3.8rem; }
.produto-home--bedrock   .produto-home__logo { height: 2.9rem; max-width: 9rem; }
.produto-home__eyebrow { color: rgba(255, 255, 255, .62); font-size: var(--t-xs); font-weight: 600; letter-spacing: .08em; text-transform: uppercase; }
.produto-home__titulo { max-width: 16ch; font-size: var(--t-xl); }
.produto-home__texto { max-width: 54ch; color: rgba(255, 255, 255, .74); font-size: var(--t-sm); }
.produto-home__destaques { display: flex; flex-wrap: wrap; gap: var(--e-2); margin-block: var(--e-1); }
.produto-home__destaques li {
    display: inline-flex;
    align-items: center;
    gap: var(--e-1);
    padding: .4rem .65rem;
    border-radius: var(--r-pill);
    background: rgba(255, 255, 255, .09);
    color: rgba(255, 255, 255, .84);
    font-size: .72rem;
}
.produto-home--soundplan .produto-home__destaques .icon { color: #8ed15f; }
.produto-home--bedrock .produto-home__destaques .icon { color: #df7189; }
.produto-home .btn--secondary { box-shadow: 0 10px 24px rgba(0, 0, 0, .18); }
.produto-home--soundplan .btn--secondary {
    background: #63b32e;
    border-color: #63b32e;
    color: #092d47;
}
.produto-home--soundplan .btn--secondary:hover {
    background: #76c641;
    border-color: #76c641;
    color: #092d47;
}
.produto-home--bedrock .btn--secondary {
    background: #9b3453;
    border-color: #9b3453;
    color: #fff;
}
.produto-home--bedrock .btn--secondary:hover {
    background: #b44465;
    border-color: #b44465;
    color: #fff;
}
.produto-home__visual { position: absolute; inset: 0; z-index: -1; display: grid; place-items: start end; }
.produto-home__imagem { width: 100%; height: 68%; object-fit: cover; object-position: center; border-radius: 0; opacity: .88; }
.produto-home--bedrock .produto-home__imagem { object-fit: contain; padding: 2rem; filter: drop-shadow(0 24px 28px rgba(0, 0, 0, .45)); }

/* == 28 Experiências de produto ========================================= */

/* Identidade SoundPLAN: azul institucional + verde de destaque. */
.pagina-soundplan {
    --sp-azul: #0967b1;
    --sp-azul-escuro: #064b82;
    --sp-verde: #63b32e;
    --azul-50: #eef7fd;
    --azul-100: #d8ecf9;
    --azul-200: #afd9f1;
    --azul-300: #75b9e2;
    --azul-500: #1681c5;
    --azul-600: #0967b1;
    --azul-700: #075895;
    --azul-800: #064b82;
    --azul-900: #043452;
    --fundo-alt: #f3f8fb;
}
.pagina-soundplan .hero {
    background: radial-gradient(95% 120% at 10% 0%, #0d78c6 0%, var(--sp-azul-escuro) 48%, #062b49 100%);
}
.pagina-soundplan .hero::after { background: linear-gradient(102deg, rgba(3, 35, 60, .9), rgba(4, 65, 108, .7) 60%, rgba(5, 72, 119, .36)); }
.pagina-soundplan .section-title em { color: var(--sp-verde); }
.pagina-soundplan .eyebrow:not(.eyebrow--claro) { color: #397e17; background: #eef8e8; border-color: #d3ecc4; }
.pagina-soundplan .lista-check .icon { color: var(--sp-verde); }
.pagina-soundplan .hero .btn--primary {
    background: var(--sp-verde);
    color: #0b3210;
}
.pagina-soundplan .hero .btn--primary:hover { background: #75c541; color: #0b3210; }
.pagina-soundplan .versao__selo { background: var(--sp-verde); color: #102f0a; }
.pagina-soundplan .versao--destaque { border-color: var(--sp-verde); }
.pagina-soundplan .modulo { border-left-color: #a9d88d; }
.pagina-soundplan .modulo-grupo__icone { background: #eef8e8; color: #397e17; }
.pagina-soundplan .cta-final__box {
    background: radial-gradient(120% 120% at 50% 0%, var(--sp-azul) 0%, #043452 68%);
}
.pagina-soundplan .cta-final .btn--primary { background: var(--sp-verde); color: #0b3210; }
.pagina-soundplan .cta-final .btn--primary:hover { background: #75c541; color: #0b3210; }

.sp-demo { overflow: hidden; background: linear-gradient(180deg, #f8fbfd, #fff); }
.sp-demo__grade { display: grid; gap: clamp(3rem, 7vw, 6rem); align-items: center; }
/* minmax(min(32rem, 100%), ...) e não minmax(32rem, ...): o mínimo fixo é um
   piso de 512px que ignora o espaço disponível e empurra a coluna para fora do
   container quando ele é menor que isso. Todas as outras grades do arquivo já
   usam minmax(0, ...); esta era a única exceção. */
@media (min-width: 64em) { .sp-demo__grade { grid-template-columns: minmax(0, .82fr) minmax(min(32rem, 100%), 1.18fr); } }
.sp-demo__texto { display: grid; justify-items: start; gap: var(--e-4); }
.sp-demo__texto .section-sub { margin: 0; }
.sp-demo__lista { margin-block: var(--e-1); }

/* A tampa fechada gira 82° com a aresta de cima vindo na direção do observador.
   A projeção em perspectiva amplia o que está em +z: a aresta de cima é
   desenhada ~27% mais larga que o elemento, ou seja ~13% para fora de cada
   lado. Os 2.5% de folga que havia aqui não cobriam isso, e o excedente era
   cortado pelo overflow: hidden do .sp-demo — a tampa aparecia fatiada até a
   animação terminar. 12% cobre o transbordo com folga em toda a faixa de
   desktop (coluna de 515px a 604px), sem comer vídeo à toa. */
.notebook {
    position: relative;
    perspective: 1400px;
    padding: 0 12% 5%;
    filter: drop-shadow(0 30px 30px rgba(6, 43, 73, .22));
}
.notebook__tela {
    position: relative;
    z-index: 2;
    padding: 1.8% 1.8% 2.6%;
    border: 2px solid #26313a;
    border-radius: 1.15rem 1.15rem .45rem .45rem;
    background: linear-gradient(150deg, #222c34, #080b0e);
    transform: rotateX(-82deg);
    transform-origin: center bottom;
    opacity: .2;
    transition: transform 1.25s cubic-bezier(.2, .8, .2, 1), opacity .45s ease;
    backface-visibility: hidden;
}
.notebook.aberto .notebook__tela { transform: rotateX(0deg); opacity: 1; }
.notebook__tela::before {
    content: '';
    position: absolute;
    top: .6%; left: 50%;
    width: 5px; height: 5px;
    border-radius: 50%;
    background: #52616c;
    transform: translateX(-50%);
}
.notebook__moldura { position: relative; aspect-ratio: 16 / 9; overflow: hidden; border-radius: .5rem; background: #02070a; }
.notebook__moldura iframe { position: absolute; inset: 0; width: 100%; height: 100%; border: 0; }
.notebook__base {
    position: absolute;
    z-index: 1;
    left: 0; right: 0; bottom: 0;
    height: 8%;
    min-height: 1.15rem;
    border-radius: .2rem .2rem 1.35rem 1.35rem;
    background: linear-gradient(180deg, #d7dde1, #8f9aa1 70%, #eef1f3);
    transform: perspective(500px) rotateX(58deg);
    transform-origin: center top;
}
.notebook__base span {
    position: absolute;
    top: 0; left: 50%;
    width: 16%; height: 35%;
    border-radius: 0 0 .45rem .45rem;
    background: #aeb8be;
    transform: translateX(-50%);
}

/* Numa coluna só não há largura sobrando para o transbordo da perspectiva, e
   12% de folga lateral comeriam o vídeo. Como a abertura é decorativa, aqui o
   notebook entra já aberto e ocupa a largura inteira — mesma saída que a regra
   de prefers-reduced-motion mais abaixo, e independente do IntersectionObserver
   ter disparado ou não. */
@media (max-width: 63.999em) {
    .notebook { padding: 0 0 5%; }
    .notebook__tela { transform: none; opacity: 1; transition: none; }
}

.sp-instituicoes { overflow: hidden; padding-block: clamp(2.5rem, 5vw, 4rem); background: #062f51; color: #fff; }
.sp-instituicoes__titulo {
    margin-bottom: var(--e-5);
    color: rgba(255, 255, 255, .68);
    font-size: var(--t-xs);
    font-weight: 700;
    letter-spacing: .14em;
    text-align: center;
    text-transform: uppercase;
}
.sp-marquee {
    overflow: hidden;
    -webkit-mask-image: linear-gradient(90deg, transparent, #000 7%, #000 93%, transparent);
    mask-image: linear-gradient(90deg, transparent, #000 7%, #000 93%, transparent);
}
.sp-marquee__trilha { display: flex; width: max-content; animation: spMarquee 96s linear infinite; }
.sp-marquee:hover .sp-marquee__trilha,
.sp-marquee:focus-within .sp-marquee__trilha { animation-play-state: paused; }
.sp-marquee__grupo { display: flex; align-items: center; gap: var(--e-4); padding-right: var(--e-4); }
/* Cinza claro em vez de branco: o cliente achou que os cartões brancos brigavam
   com o fundo azul-escuro da faixa. Os logos são impressos em preto ou colorido
   sobre fundo claro, então continuam legíveis. */
.sp-instituicao {
    display: grid;
    place-items: center;
    width: 11rem;
    height: 6.5rem;
    padding: var(--e-4);
    border: 1px solid rgba(255, 255, 255, .14);
    border-radius: var(--r-md);
    background: #e7ecf1;
}
.sp-instituicao img { display: block; width: 100%; height: 4rem; object-fit: contain; }
.sp-instituicao span { color: var(--sp-azul-escuro); font-weight: 700; text-align: center; }
@keyframes spMarquee { to { transform: translateX(-50%); } }

.sp-videos__grade { display: grid; gap: var(--e-4); }
@media (min-width: 60em) { .sp-videos__grade { grid-template-columns: repeat(3, minmax(0, 1fr)); } }
.sp-video { overflow: hidden; border: 1px solid var(--linha); border-radius: var(--r-lg); background: var(--fundo); box-shadow: var(--s-1); }
.sp-video__player { position: relative; aspect-ratio: 16 / 9; background: #061a29; }
.sp-video__player iframe { position: absolute; inset: 0; width: 100%; height: 100%; border: 0; }
.sp-video__texto { display: grid; gap: var(--e-2); padding: var(--e-4) var(--e-5) var(--e-5); }
.sp-video__texto h3 { font-size: var(--t-base); }
.sp-video__texto p { color: var(--suave); font-size: var(--t-xs); }

/* Identidade Bedrock: azul-noite, vinho e reflexos metálicos. */
.pagina-bedrock {
    --bedrock-vinho: #872945;
    --bedrock-vinho-claro: #c75675;
    --bedrock-noite: #111827;
    --azul-50: #f9eef2;
    --azul-100: #f0dae2;
    --azul-200: #e2b8c6;
    --azul-300: #cf839a;
    --azul-500: #aa4564;
    --azul-600: #872945;
    --azul-700: #702239;
    --azul-800: #551b2d;
    --azul-900: #32131f;
    --fundo-alt: #faf5f7;
}
.pagina-bedrock .hero { background: radial-gradient(80% 100% at 85% 10%, rgba(135, 41, 69, .48), transparent 56%), var(--bedrock-noite); }
.pagina-bedrock .hero::after { background: linear-gradient(100deg, rgba(9, 14, 24, .94), rgba(17, 24, 39, .7) 58%, rgba(50, 19, 31, .36)); }
.pagina-bedrock .eyebrow--claro,
.pagina-bedrock .hero__selos .icon { color: #ee9ab1; }
.pagina-bedrock .section-title em { color: var(--bedrock-vinho); }
.pagina-bedrock .card__icone,
.pagina-bedrock .modulo-grupo__icone { background: #f9edf1; color: var(--bedrock-vinho); }
.pagina-bedrock .hero .btn--primary {
    background: var(--bedrock-vinho-claro);
    color: #fff;
}
.pagina-bedrock .hero .btn--primary:hover { background: #db6c8b; color: #fff; }
.pagina-bedrock .card__eyebrow { color: var(--bedrock-vinho); }
.pagina-bedrock .produto__figura,
.pagina-bedrock .card__foto { background: linear-gradient(155deg, #fff, #f6e9ee); }
.pagina-bedrock .aviso-catalogo { border-color: #e2b8c6; }
.pagina-bedrock .aviso-catalogo__icone { background: #f0dae2; color: var(--bedrock-vinho); }
.pagina-bedrock .cta-final__box {
    background: radial-gradient(120% 120% at 50% 0%, #872945 0%, #32131f 68%);
}
.pagina-bedrock .cta-final .btn--primary { background: var(--bedrock-vinho-claro); color: #fff; }
.pagina-bedrock .cta-final .btn--primary:hover { background: #db6c8b; color: #fff; }

.bedrock-3d { isolation: isolate; min-height: 25rem; place-items: center; perspective: 900px; }
.bedrock-3d .hero__visual-img {
    position: relative;
    z-index: 2;
    transform: rotateY(-18deg) rotateX(7deg) translateY(1.5rem) scale(.9);
    opacity: .35;
    transition: transform 1.2s cubic-bezier(.2, .8, .2, 1), opacity .6s ease;
}
.bedrock-3d.ativo .hero__visual-img { transform: rotateY(-4deg) rotateX(1deg) translateY(0) scale(1); opacity: 1; }
.bedrock-3d__orb {
    position: absolute;
    z-index: 0;
    border-radius: 50%;
    filter: blur(2px);
    opacity: .5;
    animation: bedrockOrb 6s ease-in-out infinite alternate;
}
.bedrock-3d__orb--um { width: 17rem; height: 17rem; right: 8%; top: 3%; background: radial-gradient(circle at 35% 30%, #d46d8a, #6f1e38 60%, transparent 72%); }
.bedrock-3d__orb--dois { width: 9rem; height: 9rem; left: 8%; bottom: 7%; background: radial-gradient(circle at 35% 30%, #687897, #1e2a42 65%, transparent 72%); animation-delay: -2s; }
@keyframes bedrockOrb { to { transform: translate3d(0, 1.2rem, 0) scale(1.05); } }

@media (prefers-reduced-motion: reduce) {
    .notebook__tela, .bedrock-3d .hero__visual-img { transition: none; transform: none; opacity: 1; }
    .sp-marquee__trilha, .bedrock-3d__orb { animation: none; }
}