/* ==========================================================================
   SOLUCIONE ENGENHARIA — BASE E COMPONENTES
   Requer css/tokens.css carregado ANTES deste arquivo.

   Regra da casa: nenhum valor cru de cor, tamanho ou espaço aqui dentro.
   Tudo referencia um token. Se faltar um token, crie-o em tokens.css.

   Índice
     1. Reset e base          6. Cards e selos
     2. Layout                7. Depoimentos e FAQ
     3. Tipografia            8. Avisos
     4. Botões e ícones       9. Formulário
     5. Cabeçalho e hero     10. Rodapé e flutuantes
                             11. Utilitários e movimento
   ========================================================================== */

/* --------------------------------------------------------------------------
   1. RESET E BASE
   -------------------------------------------------------------------------- */

*, *::before, *::after { box-sizing: border-box; }

body, h1, h2, h3, h4, h5, h6, p, ul, ol, figure, blockquote, dl, dd { margin: 0; }

html { scroll-behavior: smooth; }

body {
    font-family: var(--fonte-base);
    font-size: var(--texto-base);
    line-height: var(--entrelinha-solta);
    font-weight: var(--peso-normal);
    color: var(--cor-texto);
    background: var(--cor-fundo);
    overflow-x: hidden;
    -webkit-font-smoothing: antialiased;
}

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

button, input, select, textarea { font: inherit; color: inherit; }

a { color: var(--cor-link); text-underline-offset: 3px; }
a:hover, a:focus { color: var(--cor-acao-hover); }

a:focus-visible,
button:focus-visible,
input:focus-visible,
select:focus-visible,
textarea:focus-visible,
summary:focus-visible,
[tabindex]:focus-visible {
    outline: 3px solid var(--cor-foco);
    outline-offset: 2px;
    border-radius: 3px;
}

::selection { background: var(--marca-sinal); color: var(--cor-texto-inverso); }

section[id], div[id] { scroll-margin-top: calc(var(--altura-cabecalho) + var(--e-4)); }

.sol-skip {
    position: absolute;
    left: -9999px;
    top: 0;
    z-index: var(--z-modal);
    background: var(--marca-petroleo);
    color: var(--cor-texto-inverso);
    padding: var(--e-3) var(--e-5);
    font-weight: var(--peso-medio);
}
.sol-skip:focus { left: 0; color: var(--cor-texto-inverso); }

/* --------------------------------------------------------------------------
   2. LAYOUT
   -------------------------------------------------------------------------- */

.container {
    width: 100%;
    max-width: var(--largura-container);
    margin-inline: auto;
    padding-inline: var(--padding-container);
}

.sol-secao { padding-block: var(--secao-y); }
.sol-secao--nevoa    { background: var(--cor-fundo-alt); }
.sol-secao--petroleo { background: var(--cor-escuro-fundo); color: var(--cor-escuro-texto); }
.sol-secao--profundo { background: var(--marca-profundo);  color: var(--cor-escuro-texto); }

.sol-secao__cabeca { max-width: var(--medida-leitura); margin: 0 0 var(--e-10); }
.sol-secao__cabeca--centro { margin-inline: auto; text-align: center; }
.sol-secao__cabeca p { font-size: var(--texto-lg); color: var(--cor-texto-suave); margin: 0; }

.sol-secao--petroleo h2,
.sol-secao--profundo h2 { color: var(--cor-escuro-titulo); }
.sol-secao--petroleo .sol-secao__cabeca p,
.sol-secao--profundo .sol-secao__cabeca p { color: var(--cor-escuro-texto); }

/* grade genérica de cartões */
.sol-grade {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(288px, 1fr));
    gap: var(--e-5);
    list-style: none;
    margin: 0;
    padding: 0;
}
.sol-grade--2 { grid-template-columns: repeat(auto-fit, minmax(340px, 1fr)); }
.sol-servicos { /* apelido histórico */
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(288px, 1fr));
    gap: var(--e-5);
    list-style: none;
    margin: 0;
    padding: 0;
}

/* --------------------------------------------------------------------------
   3. TIPOGRAFIA
   -------------------------------------------------------------------------- */

h1, h2, h3, h4 {
    color: var(--cor-texto);
    line-height: var(--entrelinha-apertada);
    letter-spacing: var(--tracking-apertado);
    text-wrap: balance;
    margin: 0 0 var(--e-3);
}

h1 { font-size: var(--texto-4xl); font-weight: var(--peso-extra); }
h2 { font-size: var(--texto-3xl); font-weight: var(--peso-extra); }
h3 { font-size: var(--texto-xl);  font-weight: var(--peso-forte); line-height: var(--entrelinha-media); }
h4 { font-size: var(--texto-lg);  font-weight: var(--peso-forte); line-height: var(--entrelinha-media); }

p { margin: 0 0 var(--e-4); text-align: left; max-width: var(--medida-leitura); }
p:last-child { margin-bottom: 0; }

.sol-olho {
    display: block;
    font-size: var(--texto-xs);
    font-weight: var(--peso-forte);
    letter-spacing: var(--tracking-largo);
    text-transform: uppercase;
    color: var(--cor-acao);          /* texto: precisa de 4,5:1, não do verde da logo */
    margin-bottom: var(--e-2);
}
.sol-secao--petroleo .sol-olho,
.sol-secao--profundo .sol-olho { color: var(--cor-escuro-realce); }

.sol-suave { color: var(--cor-texto-suave); }
.sol-mono  { font-family: var(--fonte-mono); }

/* --------------------------------------------------------------------------
   4. BOTÕES E ÍCONES
   -------------------------------------------------------------------------- */

.sol-btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: var(--e-2);
    font-family: var(--fonte-base);
    font-size: var(--texto-base);
    font-weight: var(--peso-forte);
    line-height: var(--entrelinha-media);
    text-align: center;
    text-decoration: none;
    padding: var(--e-3) var(--e-6);
    min-height: var(--alvo-toque);
    border: 2px solid transparent;
    border-radius: var(--raio-sm);
    cursor: pointer;
    max-width: 100%;
    white-space: normal;
    word-break: break-word;
    transition: background-color var(--transicao), border-color var(--transicao),
                color var(--transicao), transform var(--transicao);
}

.sol-btn--primaria {
    background: var(--cor-acao);
    border-color: var(--cor-acao);
    color: var(--cor-texto-inverso);
}
.sol-btn--primaria:hover,
.sol-btn--primaria:focus {
    background: var(--cor-acao-hover);
    border-color: var(--cor-acao-hover);
    color: var(--cor-texto-inverso);
    transform: translateY(-1px);
}

.sol-btn--escura {
    background: var(--marca-petroleo);
    border-color: var(--marca-petroleo);
    color: var(--cor-texto-inverso);
}
.sol-btn--escura:hover,
.sol-btn--escura:focus {
    background: var(--marca-petroleo-esc);
    border-color: var(--marca-petroleo-esc);
    color: var(--cor-texto-inverso);
}

.sol-btn--contorno {
    background: transparent;
    border-color: var(--marca-petroleo);
    color: var(--marca-petroleo);
}
.sol-btn--contorno:hover,
.sol-btn--contorno:focus { background: var(--marca-petroleo); color: var(--cor-texto-inverso); }

.sol-btn--clara {
    background: var(--neutro-0);
    border-color: var(--neutro-0);
    color: var(--marca-petroleo);
}
.sol-btn--clara:hover,
.sol-btn--clara:focus { background: var(--neutro-100); color: var(--marca-petroleo-esc); }

.sol-btn--sm    { font-size: var(--texto-sm); padding: var(--e-2) var(--e-4); min-height: 38px; }
.sol-btn--lg    { font-size: var(--texto-lg); padding: var(--e-4) var(--e-8); }
.sol-btn--bloco { display: flex; width: 100%; }

.sol-btn[disabled],
.sol-btn[aria-busy="true"] { opacity: .65; cursor: progress; transform: none; }

.sol-ico {
    width: 1.25em;
    height: 1.25em;
    display: inline-block;
    vertical-align: -.22em;
    fill: none;
    stroke: currentColor;
    stroke-width: 1.7;
    stroke-linecap: round;
    stroke-linejoin: round;
    flex: none;
}
.sol-ico--grande { width: 40px; height: 40px; stroke-width: 1.5; }

/* --------------------------------------------------------------------------
   5. CABEÇALHO E HERO
   -------------------------------------------------------------------------- */

.sol-header {
    position: sticky;
    top: 0;
    z-index: var(--z-fixo);
    background: var(--cor-superficie);
    border-bottom: var(--borda);
}
.sol-header--fixo { box-shadow: 0 2px 12px rgba(16,29,25,.08); }

.sol-header__inner {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: var(--e-4);
    min-height: var(--altura-cabecalho);
    padding-block: var(--e-2);
}

.sol-brand { display: inline-flex; align-items: center; flex: none; min-height: 48px; }
.sol-brand svg, .sol-brand img { height: 42px; width: auto; display: block; }

.sol-burger {
    display: none;
    width: 48px;
    height: 48px;
    padding: 0;
    background: transparent;
    border: var(--borda);
    border-radius: var(--raio-sm);
    cursor: pointer;
    flex: none;
}
.sol-burger span {
    display: block;
    width: 22px;
    height: 2px;
    margin: 4px auto;
    background: var(--marca-petroleo);
    border-radius: 2px;
    transition: transform var(--transicao), opacity var(--transicao);
}
.sol-burger[aria-expanded="true"] span:nth-child(1) { transform: translateY(6px) rotate(45deg); }
.sol-burger[aria-expanded="true"] span:nth-child(2) { opacity: 0; }
.sol-burger[aria-expanded="true"] span:nth-child(3) { transform: translateY(-6px) rotate(-45deg); }

.sol-nav { display: flex; align-items: center; gap: var(--e-1); flex-wrap: wrap; justify-content: flex-end; }
.sol-nav a {
    display: inline-flex;
    align-items: center;
    min-height: var(--alvo-toque);
    padding: var(--e-2) var(--e-3);
    font-size: var(--texto-sm);
    font-weight: var(--peso-medio);
    color: var(--cor-texto-suave);
    text-decoration: none;
    border-radius: var(--raio-sm);
    border-bottom: 2px solid transparent;
    transition: color var(--transicao), border-color var(--transicao);
}
.sol-nav a:hover,
.sol-nav a:focus,
.sol-nav a[aria-current="true"] {
    color: var(--marca-petroleo);
    border-bottom-color: var(--marca-sinal);
}
.sol-nav a.sol-nav__cta {
    margin-left: var(--e-2);
    padding: var(--e-3) var(--e-5);
    background: var(--cor-acao);
    color: var(--cor-texto-inverso);
    border-bottom-color: transparent;
}
.sol-nav a.sol-nav__cta:hover,
.sol-nav a.sol-nav__cta:focus { background: var(--cor-acao-hover); color: var(--cor-texto-inverso); }

@media (max-width: 991px) {
    .sol-header__inner { min-height: var(--altura-cabecalho-sm); }
    .sol-brand svg, .sol-brand img { height: 34px; }
    .sol-burger { display: block; }

    .sol-nav {
        position: absolute;
        left: 0; right: 0; top: 100%;
        display: none;
        flex-direction: column;
        align-items: stretch;
        gap: 0;
        background: var(--cor-superficie);
        border-block: var(--borda);
        box-shadow: var(--sombra-1);
        padding: var(--e-2) var(--e-4) var(--e-4);
    }
    .sol-nav.is-aberto { display: flex; }
    .sol-nav a {
        border-bottom: var(--borda);
        border-radius: 0;
        padding: var(--e-3) var(--e-1);
        font-size: var(--texto-base);
    }
    .sol-nav a.sol-nav__cta {
        margin: var(--e-4) 0 0;
        border-radius: var(--raio-sm);
        justify-content: center;
        border-bottom: 0;
    }
}

/* --------------------------------------------------------------------------
   HERO — painel da marca + foto, com corte diagonal

   Duas decisões que sustentam o resto:

   1. O quadro é contido no container, não sangra na tela toda. As fotos têm
      960px de largura útil; num hero full-bleed de 1440px+ elas apareceriam
      borradas. Contido, o maior tamanho de exibição fica em ~620px.
   2. O texto vive no painel de cor chapada, nunca sobre a foto. Contraste AA
      garantido por construção, sem depender de véu escuro nem de qual foto
      está no slide.
   -------------------------------------------------------------------------- */

.sol-hero {
    --corte: 68px;   /* quanto o painel invade a foto — a diagonal */
    position: relative;
    padding-block: var(--e-8) 0;
    background: var(--cor-fundo);
}

/* O hero é mais largo que o resto do site, mas não sangra na tela toda.
   O limite é a resolução da foto, não o gosto:

     quadro 1170px -> foto exibida a 620px  (fonte 960px = 1,55x) nítida
     quadro 1440px -> foto exibida a 763px  (fonte 960px = 1,26x) nítida
     tela cheia    -> foto exibida a 1018px (fonte 960px = 0,94x) AMPLIA, borra

   1440px é o maior valor que ainda não amplia a imagem. Quando chegarem os
   originais em alta resolução, este é o número a revisitar — com 2000px de
   fonte dá para ir a full-bleed sem perder nitidez. */
.sol-hero > .container { max-width: 1440px; }

.sol-hero__quadro {
    position: relative;
    border-radius: var(--raio-lg);
    overflow: hidden;
    box-shadow: var(--sombra-2);
    isolation: isolate;
}

.sol-hero__slides { display: grid; }

.sol-slide {
    grid-area: 1 / 1;
    display: grid;
    grid-template-columns: 47% 53%;
    min-height: clamp(400px, 56vh, 500px);
    opacity: 0;
    visibility: hidden;
    /* Saída rápida. A entrada (abaixo) espera essa saída terminar: num
       crossfade simétrico os dois títulos ficam legíveis ao mesmo tempo e a
       troca vira imagem dupla. */
    transition: opacity 220ms ease, visibility 220ms ease;
}
.sol-slide.is-ativo {
    opacity: 1;
    visibility: visible;
    z-index: var(--z-base);
    transition: opacity 320ms ease 170ms, visibility 0s;
}

/* Entrada com deslocamento curto: dá direção à troca sem virar animação
   chamativa. Quem pediu menos movimento não recebe nenhum. */
.sol-slide.is-ativo .sol-slide__conteudo { animation: sol-entra-painel 460ms ease 170ms both; }
.sol-slide.is-ativo .sol-slide__midia img { animation: sol-entra-foto 700ms ease 170ms both; }

@keyframes sol-entra-painel {
    from { opacity: 0; transform: translateY(14px); }
    to   { opacity: 1; transform: none; }
}
@keyframes sol-entra-foto {
    from { transform: scale(1.05); }
    to   { transform: none; }
}

@media (prefers-reduced-motion: reduce) {
    .sol-slide.is-ativo .sol-slide__conteudo,
    .sol-slide.is-ativo .sol-slide__midia img { animation: none; }
}

/* ---- foto ----
   grid-row explícito nos dois filhos: sem isso o auto-placement joga o painel
   (que pede a coluna 1, "para trás") para uma segunda linha. */
.sol-slide__midia { position: relative; grid-column: 2; grid-row: 1; overflow: hidden; }
.sol-slide__midia img {
    width: 100%; height: 100%;
    object-fit: cover;
    object-position: center;
    display: block;
}
/* Véu da marca: harmoniza as três fotos, que têm temperaturas de cor bem
   diferentes (entardecer dourado, interior quente, sol aberto), e acalma o
   laranja do EPI no slide 3 sem apagar a leitura de "segurança". */
.sol-slide__midia::after {
    content: "";
    position: absolute; inset: 0;
    background:
        linear-gradient(100deg, rgba(21,84,76,.55) 0%, rgba(21,84,76,.10) 42%, transparent 70%),
        rgba(12,60,48,.12);
}

/* ---- painel ---- */
.sol-slide__painel {
    position: relative;
    grid-column: 1;
    grid-row: 1;
    z-index: 2;
    display: flex;
    align-items: center;
    /* invade a foto: é o que cria a diagonal */
    margin-right: calc(var(--corte) * -1);
    /* o respiro embaixo reserva a faixa do índice numerado, que é absoluto */
    padding: var(--e-10) calc(var(--e-8) + var(--corte)) var(--e-20) var(--e-10);
}

/* A faixa verde é o mesmo recorte, 5px mais à direita, aparecendo por baixo. */
.sol-slide__painel::before,
.sol-slide__painel::after {
    content: "";
    position: absolute;
    inset: 0;
    clip-path: polygon(0 0, 100% 0, calc(100% - var(--corte)) 100%, 0 100%);
}
.sol-slide__painel::before { background: var(--marca-sinal); }
.sol-slide__painel::after {
    inset: 0 5px 0 0;
    background-image:
        repeating-linear-gradient(0deg,  rgba(255,255,255,.045) 0 1px, transparent 1px 44px),
        repeating-linear-gradient(90deg, rgba(255,255,255,.045) 0 1px, transparent 1px 44px),
        var(--painel-fundo);
}

.sol-slide:nth-child(1) { --painel-fundo: linear-gradient(150deg, #15544C 0%, #0C3C30 100%); }
.sol-slide:nth-child(2) { --painel-fundo: linear-gradient(150deg, #0F423B 0%, #124F42 100%); }
.sol-slide:nth-child(3) { --painel-fundo: linear-gradient(150deg, #0C3C30 0%, #15544C 100%); }

.sol-slide__conteudo { position: relative; z-index: 1; max-width: 34em; }

/* Régua geométrica acima do título. */
.sol-slide__conteudo::before {
    content: "";
    display: block;
    width: 52px; height: 4px;
    background: var(--marca-claro);
    margin-bottom: var(--e-5);
}

.sol-slide__olho {
    display: inline-block;
    font-size: var(--texto-xs);
    font-weight: var(--peso-forte);
    letter-spacing: var(--tracking-largo);
    text-transform: uppercase;
    color: var(--cor-texto-inverso);
    background: var(--marca-sinal-esc);   /* 5,1:1 com branco */
    padding: var(--e-1) var(--e-3);
    border-radius: 3px;
    margin-bottom: var(--e-4);
}
.sol-slide h1, .sol-slide h2 {
    color: var(--cor-escuro-titulo);
    font-size: var(--texto-4xl);
    font-weight: var(--peso-extra);
    margin: 0 0 var(--e-4);
}
.sol-slide p {
    color: #D6E3DE;
    font-size: var(--texto-lg);
    line-height: var(--entrelinha-solta);
    margin: 0 0 var(--e-8);
    max-width: 34em;
}
.sol-slide__acoes { display: flex; flex-wrap: wrap; gap: var(--e-3); }

/* ---- setas: par no canto inferior direito, sobre a foto ----
   Fundo quase opaco de propósito: o ícone branco precisa manter contraste
   independentemente do que estiver na foto atrás. */
.sol-hero__setas {
    position: absolute;
    right: var(--e-5); bottom: var(--e-5);
    z-index: 4;
    display: flex; gap: var(--e-2);
}
.sol-hero__seta {
    width: var(--alvo-toque); height: var(--alvo-toque);
    display: grid; place-items: center;
    background: rgba(12,60,48,.88);
    border: 1px solid rgba(255,255,255,.22);
    border-radius: var(--raio-sm);
    color: var(--cor-texto-inverso);
    cursor: pointer;
    transition: background-color var(--transicao);
}
.sol-hero__seta:hover, .sol-hero__seta:focus-visible { background: var(--cor-acao); }

/* ---- índice numerado, no rodapé do painel ---- */
.sol-hero__pontos {
    position: absolute;
    left: var(--e-10); bottom: var(--e-6);
    z-index: 4;
    display: flex; gap: var(--e-2);
}
.sol-hero__pontos button {
    min-width: var(--alvo-toque); height: var(--alvo-toque);
    padding: 0 var(--e-2);
    background: none;
    border: 0;
    border-top: 3px solid rgba(255,255,255,.28);
    border-radius: 0;
    color: rgba(255,255,255,.6);
    font-family: var(--fonte-mono);
    font-size: var(--texto-xs);
    font-weight: var(--peso-medio);
    letter-spacing: var(--tracking-largo);
    cursor: pointer;
    display: flex; align-items: center; justify-content: center;
    transition: color var(--transicao), border-color var(--transicao);
}
.sol-hero__pontos button:hover { color: var(--cor-texto-inverso); }
.sol-hero__pontos button[aria-current="true"] {
    color: var(--cor-texto-inverso);
    border-top-color: var(--marca-claro);
}

/* ---- empilhado: foto em faixa por cima, painel embaixo ----
   Abaixo de 992px a diagonal sai. Numa coluna estreita ela comeria altura
   útil do texto e a foto viraria uma tira fina sem leitura. */
@media (max-width: 991px) {
    .sol-hero { --corte: 0px; padding-block: 0; }
    .sol-hero__quadro { border-radius: 0; box-shadow: none; }

    .sol-slide {
        grid-template-columns: 1fr;
        min-height: 0;
    }
    .sol-slide__midia { grid-column: 1; grid-row: 1; aspect-ratio: 16 / 7; }
    .sol-slide__midia::after {
        background:
            linear-gradient(180deg, transparent 40%, rgba(21,84,76,.35) 100%),
            rgba(12,60,48,.10);
    }

    .sol-slide__painel {
        grid-column: 1; grid-row: 2;
        margin-right: 0;
        padding: var(--e-8) var(--padding-container) var(--e-16);
        border-top: 4px solid var(--marca-sinal);
    }
    .sol-slide__painel::before { display: none; }
    .sol-slide__painel::after  { inset: 0; clip-path: none; }

    .sol-slide__conteudo { max-width: none; }
    .sol-slide__conteudo::before { width: 44px; margin-bottom: var(--e-4); }

    .sol-hero__setas  { display: none; }
    .sol-hero__pontos { left: var(--padding-container); bottom: var(--e-4); }
    .sol-slide__acoes .sol-btn { width: 100%; }
}

/* --------------------------------------------------------------------------
   6. CARDS E SELOS
   -------------------------------------------------------------------------- */

.sol-card {
    display: flex;
    flex-direction: column;
    gap: var(--e-3);
    background: var(--cor-superficie);
    border: var(--borda);
    border-radius: var(--raio);
    padding: var(--e-6) var(--e-5);
    box-shadow: var(--sombra-1);
    transition: transform var(--transicao), box-shadow var(--transicao), border-color var(--transicao);
}
.sol-card:hover {
    transform: translateY(-4px);
    box-shadow: var(--sombra-2);
    border-color: var(--marca-sinal);
}
.sol-card__ico {
    width: 56px; height: 56px;
    display: grid; place-items: center;
    border-radius: var(--raio-sm);
    background: color-mix(in srgb, var(--cor-acao-grafica) 10%, transparent);
    color: var(--marca-petroleo);
    flex: none;
}
.sol-card h3 { margin: 0; color: var(--cor-titulo); }
.sol-card p  { margin: 0; font-size: var(--texto-sm); color: var(--cor-texto-suave); max-width: none; }
.sol-card__lista { margin: 0; padding-left: var(--e-5); font-size: var(--texto-sm); color: var(--cor-texto-suave); }
.sol-card__lista li { margin-bottom: var(--e-1); }
.sol-card__acao { margin-top: auto; padding-top: var(--e-2); }
.sol-card__acao a {
    display: inline-flex; align-items: center; gap: var(--e-1);
    min-height: var(--alvo-toque);
    font-weight: var(--peso-forte);
    font-size: var(--texto-sm);
    color: var(--cor-acao-hover);
    text-decoration: none;
}
.sol-card__acao a:hover { text-decoration: underline; }

/* --------------------------------------------------------------------------
   6b. OBRAS REAIS
   Prova de trabalho — responde ao ANM-15 do laudo, que apontava um site sem
   nenhuma evidência de obra feita. Recorte quadrado uniforme: as fotos vêm de
   celular, em retrato e paisagem misturados, e sem uma proporção única a
   grade fica irregular.
   -------------------------------------------------------------------------- */

.sol-obras {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(230px, 1fr));
    gap: var(--e-5);
    list-style: none;
    margin: 0;
    padding: 0;
}

/* O <li> da grade estica sozinho, mas a <figure> dentro dele só ocupa a
   altura do próprio conteúdo — por isso um card de legenda mais curta ficava
   visivelmente mais baixo que os vizinhos. Estas duas linhas repassam a
   altura da célula para o cartão. */
.sol-obras > li { display: flex; }

.sol-obra {
    flex: 1;
    display: flex;
    flex-direction: column;
    margin: 0;
    background: var(--cor-superficie);
    border: var(--borda);
    border-radius: var(--raio);
    overflow: hidden;
    box-shadow: var(--sombra-1);
    transition: transform var(--transicao), box-shadow var(--transicao);
}
.sol-obra:hover { transform: translateY(-4px); box-shadow: var(--sombra-2); }

.sol-obra img {
    width: 100%;
    aspect-ratio: 1;
    object-fit: cover;
    background: var(--cor-fundo-alt);
}

.sol-obra figcaption {
    padding: var(--e-4);
    font-size: var(--texto-sm);
    line-height: var(--entrelinha-media);
    color: var(--cor-texto-suave);
}
.sol-obra figcaption strong {
    display: block;
    color: var(--cor-titulo);
    font-weight: var(--peso-forte);
    margin-bottom: var(--e-1);
}

/* selo de certificação / credencial */
.sol-selos { display: flex; flex-wrap: wrap; gap: var(--e-2); margin: 0; padding: 0; list-style: none; }
.sol-selo {
    display: inline-flex;
    align-items: center;
    gap: var(--e-2);
    font-size: var(--texto-xs);
    font-weight: var(--peso-medio);
    color: var(--marca-petroleo);
    background: color-mix(in srgb, var(--cor-acao-grafica) 9%, transparent);
    border: 1px solid color-mix(in srgb, var(--cor-acao-grafica) 28%, transparent);
    border-radius: var(--raio-pill);
    padding: var(--e-1) var(--e-3);
    min-height: var(--alvo-toque-min);
}
.sol-selo .sol-ico { width: 15px; height: 15px; color: var(--cor-acao-grafica); }
.sol-secao--petroleo .sol-selo,
.sol-secao--profundo .sol-selo {
    color: var(--cor-texto-inverso);
    background: rgba(255,255,255,.12);
    border-color: rgba(255,255,255,.24);
}
.sol-secao--petroleo .sol-selo .sol-ico,
.sol-secao--profundo .sol-selo .sol-ico { color: var(--cor-escuro-realce); }

/* bloco de números / provas */
.sol-numeros {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(160px, 1fr));
    gap: var(--e-5);
    list-style: none; margin: 0; padding: 0;
}
.sol-numero { border-left: 3px solid var(--marca-sinal); padding-left: var(--e-4); }
.sol-numero b {
    display: block;
    font-size: var(--texto-3xl);
    font-weight: var(--peso-extra);
    line-height: 1;
    letter-spacing: var(--tracking-apertado);
    color: var(--cor-titulo);
    font-variant-numeric: tabular-nums;
}
.sol-numero span { display: block; margin-top: var(--e-2); font-size: var(--texto-sm); color: var(--cor-texto-suave); }
.sol-secao--petroleo .sol-numero b,
.sol-secao--profundo .sol-numero b { color: var(--cor-escuro-titulo); }
.sol-secao--petroleo .sol-numero span,
.sol-secao--profundo .sol-numero span { color: var(--cor-escuro-texto); }

/* --------------------------------------------------------------------------
   7. DEPOIMENTOS E FAQ
   -------------------------------------------------------------------------- */

.sol-depoimento {
    display: flex;
    flex-direction: column;
    gap: var(--e-4);
    background: var(--cor-superficie);
    border: var(--borda);
    border-top: 3px solid var(--marca-sinal);
    border-radius: var(--raio);
    padding: var(--e-6) var(--e-5);
}
.sol-depoimento blockquote {
    margin: 0;
    font-size: var(--texto-lg);
    line-height: var(--entrelinha-solta);
    color: var(--cor-texto);
}
.sol-depoimento blockquote::before { content: "\201C"; }
.sol-depoimento blockquote::after  { content: "\201D"; }
.sol-depoimento figcaption {
    display: flex; align-items: center; gap: var(--e-3);
    margin-top: auto;
    font-size: var(--texto-sm);
}
.sol-depoimento img { width: 44px; height: 44px; border-radius: 50%; object-fit: cover; flex: none; }
.sol-depoimento cite { display: block; font-style: normal; font-weight: var(--peso-forte); color: var(--cor-texto); }
.sol-depoimento figcaption span { color: var(--cor-texto-suave); }

/* FAQ em <details>: acessível e sem JavaScript */
.sol-faq { display: grid; gap: var(--e-2); }
.sol-faq details {
    background: var(--cor-superficie);
    border: var(--borda);
    border-radius: var(--raio-sm);
    overflow: hidden;
}
.sol-faq details[open] { border-color: var(--marca-sinal); }
.sol-faq summary {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: var(--e-4);
    min-height: var(--alvo-toque);
    padding: var(--e-4) var(--e-5);
    font-size: var(--texto-base);
    font-weight: var(--peso-medio);
    color: var(--cor-titulo);
    cursor: pointer;
    list-style: none;
}
.sol-faq summary::-webkit-details-marker { display: none; }
.sol-faq summary::after {
    content: "";
    width: 11px; height: 11px;
    flex: none;
    border-right: 2px solid var(--marca-sinal);
    border-bottom: 2px solid var(--marca-sinal);
    transform: rotate(45deg) translate(-2px, -2px);
    transition: transform var(--transicao);
}
.sol-faq details[open] summary::after { transform: rotate(-135deg) translate(-2px, -2px); }
.sol-faq summary:hover { background: var(--cor-superficie-alt); }
.sol-faq__corpo { padding: 0 var(--e-5) var(--e-5); }
.sol-faq__corpo p { color: var(--cor-texto-suave); font-size: var(--texto-sm); }

/* --------------------------------------------------------------------------
   8. AVISOS
   -------------------------------------------------------------------------- */

.sol-aviso {
    display: none;
    gap: var(--e-3);
    align-items: flex-start;
    padding: var(--e-4) var(--e-5);
    border-radius: var(--raio-sm);
    font-size: var(--texto-sm);
    line-height: var(--entrelinha-solta);
    margin-bottom: var(--e-5);
    border: 1px solid transparent;
}
.sol-aviso.is-visivel,
.sol-aviso--estatico { display: flex; }
.sol-aviso--ok      { background: var(--sucesso-bg); border-color: var(--sucesso-bd); color: var(--sucesso); }
.sol-aviso--falha   { background: var(--erro-bg);    border-color: var(--erro-bd);    color: var(--erro); }
.sol-aviso--atencao { background: var(--atencao-bg); border-color: var(--atencao-bd); color: var(--atencao); }
.sol-aviso--info    { background: var(--info-bg);    border-color: var(--info-bd);    color: var(--info); }
.sol-aviso .sol-ico { flex: none; margin-top: 2px; }
.sol-aviso p { margin: 0 0 var(--e-2); max-width: none; }
.sol-aviso p:last-child { margin: 0; }
.sol-aviso a { color: inherit; font-weight: var(--peso-forte); }

/* --------------------------------------------------------------------------
   9. FORMULÁRIO E CANAIS
   -------------------------------------------------------------------------- */

.sol-contato {
    display: grid;
    grid-template-columns: minmax(0, 1fr) minmax(0, 1.15fr);
    gap: var(--e-10);
    align-items: start;
}
@media (max-width: 900px) { .sol-contato { grid-template-columns: minmax(0, 1fr); } }

.sol-canais { list-style: none; margin: 0 0 var(--e-8); padding: 0; display: grid; gap: var(--e-3); }
.sol-canais a,
.sol-canais > li > span {
    display: flex;
    align-items: center;
    gap: var(--e-3);
    min-height: 56px;
    padding: var(--e-3) var(--e-4);
    background: var(--cor-superficie);
    border: var(--borda);
    border-radius: var(--raio-sm);
    text-decoration: none;
    color: var(--cor-texto);
    font-weight: var(--peso-medio);
    transition: border-color var(--transicao), box-shadow var(--transicao);
}
.sol-canais a:hover,
.sol-canais a:focus { border-color: var(--marca-sinal); box-shadow: var(--sombra-1); color: var(--cor-texto); }
.sol-canais .sol-ico { color: var(--marca-sinal); width: 24px; height: 24px; }
.sol-canais small { display: block; font-weight: var(--peso-normal); font-size: var(--texto-xs); color: var(--cor-texto-suave); }

.sol-form {
    background: var(--cor-superficie);
    border: var(--borda);
    border-radius: var(--raio);
    padding: var(--e-6) var(--e-5);
}
.sol-campo { margin-bottom: var(--e-5); }
.sol-campo label {
    display: block;
    font-size: var(--texto-sm);
    font-weight: var(--peso-medio);
    color: var(--cor-texto);
    margin-bottom: var(--e-1);
}
.sol-campo label .sol-obrig { color: var(--erro); margin-left: 2px; }

.sol-form input[type="text"],
.sol-form input[type="email"],
.sol-form input[type="tel"],
.sol-form select,
.sol-form textarea {
    display: block;
    width: 100%;
    min-height: 50px;
    padding: var(--e-3) var(--e-4);
    font-family: var(--fonte-base);
    font-size: var(--texto-base);
    font-style: normal;
    line-height: var(--entrelinha-media);
    color: var(--cor-texto);
    background: var(--cor-superficie);
    border: var(--borda);
    border-radius: var(--raio-sm);
    box-shadow: none;
    transition: border-color var(--transicao-rapida), box-shadow var(--transicao-rapida);
}
.sol-form textarea { min-height: 140px; resize: vertical; }

.sol-form input:focus,
.sol-form select:focus,
.sol-form textarea:focus {
    border-color: var(--marca-sinal);
    box-shadow: var(--sombra-foco);
    outline: none;
}
.sol-form input[aria-invalid="true"],
.sol-form select[aria-invalid="true"],
.sol-form textarea[aria-invalid="true"] { border-color: var(--erro); }

.sol-erro {
    display: none;
    font-size: var(--texto-xs);
    font-weight: var(--peso-medio);
    color: var(--erro);
    margin-top: var(--e-1);
}
.sol-erro.is-visivel { display: block; }

.sol-consent {
    display: flex;
    align-items: flex-start;
    gap: var(--e-3);
    font-size: var(--texto-sm);
    line-height: var(--entrelinha-media);
    color: var(--cor-texto-suave);
    margin-bottom: var(--e-5);
}
.sol-consent input[type="checkbox"] {
    width: var(--alvo-toque-min);
    height: var(--alvo-toque-min);
    margin: 0;
    flex: none;
    accent-color: var(--marca-sinal);
}
.sol-consent label { font-weight: var(--peso-normal); margin: 0; }

/* isca anti-spam: fora da tela, mas não display:none */
.sol-mel {
    position: absolute !important;
    left: -9999px !important;
    width: 1px; height: 1px;
    overflow: hidden;
}

/* --------------------------------------------------------------------------
   10. PARCEIROS, RODAPÉ E FLUTUANTES
   -------------------------------------------------------------------------- */

.sol-parceiros {
    display: flex; flex-wrap: wrap;
    justify-content: center; align-items: center;
    gap: var(--e-10) var(--e-16);
    list-style: none; margin: 0; padding: 0;
}
.sol-parceiros img {
    max-height: 74px; width: auto;
    filter: grayscale(100%);
    opacity: .72;
    transition: filter var(--transicao), opacity var(--transicao);
}
.sol-parceiros a:hover img,
.sol-parceiros a:focus img { filter: grayscale(0); opacity: 1; }

/* responsável técnico */
.sol-rt {
    display: grid;
    grid-template-columns: 200px minmax(0, 1fr);
    gap: var(--e-10);
    align-items: center;
    max-width: 840px;
    margin-inline: auto;
}
.sol-rt img {
    width: 200px; height: 200px;
    border-radius: 50%;
    object-fit: cover; object-position: top center;
    border: 4px solid rgba(255,255,255,.9);
}
.sol-rt h3 { color: var(--cor-escuro-titulo); font-size: var(--texto-2xl); margin: 0 0 var(--e-1); }
.sol-rt__cargo {
    display: block;
    color: var(--cor-escuro-realce);
    font-weight: var(--peso-medio);
    margin-bottom: var(--e-4);
}
.sol-rt p { color: var(--cor-escuro-texto); margin: 0 0 var(--e-5); }
@media (max-width: 767px) {
    .sol-rt { grid-template-columns: minmax(0, 1fr); gap: var(--e-6); text-align: center; }
    .sol-rt img { margin-inline: auto; }
    .sol-rt .sol-selos { justify-content: center; }
}

.sol-rodape {
    background: var(--marca-profundo);
    color: #A7BDB6;
    padding: var(--e-12) 0 var(--e-8);
    border-top: 4px solid var(--marca-sinal);
    font-size: var(--texto-sm);
}
.sol-rodape__grade {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(220px, 1fr));
    gap: var(--e-8);
    padding-bottom: var(--e-8);
    border-bottom: 1px solid rgba(255,255,255,.12);
}
.sol-rodape h3 {
    color: var(--cor-texto-inverso);
    font-size: var(--texto-xs);
    font-weight: var(--peso-forte);
    letter-spacing: var(--tracking-largo);
    text-transform: uppercase;
    margin: 0 0 var(--e-3);
}
.sol-rodape p { max-width: none; }
.sol-rodape ul { list-style: none; margin: 0; padding: 0; }
.sol-rodape li { margin-bottom: 2px; }
.sol-rodape a {
    color: #A7BDB6;
    text-decoration: none;
    display: inline-flex; align-items: center;
    /* O inline-flex engole o espaço entre "WhatsApp" e o número, que são dois
       nós irmãos. O gap devolve esse respiro. */
    gap: var(--e-1);
    min-height: 28px;
    /* O e-mail do domínio tem 44 caracteres e encosta na coluna vizinha em
       telas médias: quebrar é melhor que vazar. Mas esta regra sozinha parte
       no meio do domínio. Quem escolhe o ponto é o <wbr> que montarContatos()
       insere depois do "@" — aqui fica só a rede de segurança para largura
       menor que a do próprio domínio. */
    overflow-wrap: anywhere;
}
.sol-rodape a:hover, .sol-rodape a:focus { color: var(--cor-texto-inverso); text-decoration: underline; }
.sol-rodape svg, .sol-rodape img { height: 36px; width: auto; margin-bottom: var(--e-4); }

/* Redes sociais: a regra acima existe para a logo do rodapé e deixaria o ícone
   de rede com 36px e uma margem grande embaixo. Aqui ele volta ao tamanho de
   ícone, e o alvo de toque sobe para 44px — é um link pequeno, tocado com o
   polegar no fim da página. */
.sol-rodape__redes { margin-top: var(--e-5); }
.sol-rodape__redes a {
    gap: var(--e-2);
    min-height: var(--alvo-toque);
}
.sol-rodape__redes svg {
    height: 20px; width: 20px;
    margin: 0;
    flex: none;
}
.sol-rodape__base {
    display: flex; flex-wrap: wrap;
    justify-content: space-between; gap: var(--e-3);
    padding-top: var(--e-6);
    font-size: var(--texto-xs);
    color: #7E9791;
}

.sol-zap {
    position: fixed;
    right: var(--e-4); bottom: var(--e-4);
    z-index: var(--z-flutua);
    display: inline-flex; align-items: center; gap: var(--e-2);
    padding: var(--e-3) var(--e-5);
    background: var(--cor-acao);
    color: var(--cor-texto-inverso);
    font-weight: var(--peso-forte);
    font-size: var(--texto-sm);
    text-decoration: none;
    border-radius: var(--raio-pill);
    box-shadow: 0 6px 20px rgba(12,60,48,.3);
    transition: background-color var(--transicao), transform var(--transicao);
}
.sol-zap:hover, .sol-zap:focus {
    background: var(--cor-acao-hover);
    color: var(--cor-texto-inverso);
    transform: translateY(-2px);
}
.sol-zap .sol-ico { width: 22px; height: 22px; }
@media (max-width: 575px) {
    .sol-zap { padding: var(--e-3); }
    .sol-zap span { display: none; }
}

/* ---- voltar ao topo ----------------------------------------------------
   Discreto de propósito: superfície clara e borda fina, não o verde de ação.
   Ele não disputa atenção com o botão de WhatsApp — só aparece quando o
   cabeçalho já saiu de vista, e some sozinho perto do topo.

   Ocupa a mesma coluna do .sol-zap, logo acima dele:
   16 (base) + 48 (altura do zap) + 12 (folga) = 76px. Numa página com
   <body data-sem-zap> não há o que evitar, e o JS marca .sol-topo--baixo
   para ele descer à posição de base.

   Enquanto está oculto usa visibility:hidden, e não só opacity — assim sai
   da ordem de tabulação em vez de virar um alvo invisível para o teclado.

   Contraste: seta em --cor-acao sobre branco = 5,1:1. No hover a relação se
   inverte (branco sobre --cor-acao) e dá os mesmos 5,1:1. Bem acima do
   mínimo de 3:1 para elemento gráfico.
   ----------------------------------------------------------------------- */
.sol-topo {
    position: fixed;
    right: var(--e-4);
    bottom: calc(var(--e-4) + var(--e-12) + var(--e-3));
    z-index: var(--z-flutua);

    display: grid; place-items: center;
    width: var(--e-12); height: var(--e-12);
    padding: 0;
    background: var(--cor-superficie);
    color: var(--cor-acao);
    border: var(--borda);
    border-radius: var(--raio-pill);
    box-shadow: 0 2px 10px rgba(12, 60, 48, .14);
    cursor: pointer;

    opacity: 0;
    visibility: hidden;
    transform: translateY(var(--e-2));
    transition: opacity var(--transicao), transform var(--transicao),
                visibility var(--transicao), background-color var(--transicao),
                color var(--transicao), border-color var(--transicao);
}

.sol-topo--baixo { bottom: var(--e-4); }

.sol-topo--visivel {
    opacity: .85;
    visibility: visible;
    transform: none;
}

.sol-topo--visivel:hover,
.sol-topo--visivel:focus-visible {
    opacity: 1;
    background: var(--cor-acao);
    color: var(--cor-texto-inverso);
    border-color: var(--cor-acao);
}

/* A regra global de foco achata o raio para 3px; num botão redondo isso
   deixa a borda quadrada durante o foco. */
.sol-topo:focus-visible { border-radius: var(--raio-pill); }

.sol-topo .sol-ico { width: 20px; height: 20px; }

/* --------------------------------------------------------------------------
   11. UTILITÁRIOS E MOVIMENTO
   -------------------------------------------------------------------------- */

.sol-texto { max-width: var(--largura-texto); padding-block: var(--secao-y); }
.sol-texto h2 { margin-top: var(--e-10); font-size: var(--texto-xl); }
.sol-texto h2:first-of-type { margin-top: var(--e-6); }
.sol-texto p, .sol-texto li { color: var(--cor-texto-suave); }
.sol-texto ul { padding-left: var(--e-5); margin-bottom: var(--e-4); }
.sol-texto li { margin-bottom: var(--e-1); }
.sol-texto__data { font-size: var(--texto-sm); color: var(--cor-texto-suave); }

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

/* --------------------------------------------------------------------------
   11b. DIAGNÓSTICO RÁPIDO

   Cartão único, centrado, com uma pergunta por vez. A altura mínima existe
   para o cartão não "pular" entre perguntas de tamanhos diferentes — o salto
   desorienta e faz o botão fugir do dedo.
   -------------------------------------------------------------------------- */

.sol-diag {
    max-width: 46rem;
    margin-inline: auto;
}

.sol-diag__cabeca { text-align: center; margin-bottom: var(--e-8); }
.sol-diag__olho {
    display: inline-block;
    font-size: var(--texto-xs);
    font-weight: var(--peso-forte);
    letter-spacing: var(--tracking-largo);
    text-transform: uppercase;
    color: var(--cor-acao);
    margin-bottom: var(--e-2);
}
.sol-diag__cabeca h2 { margin: 0 0 var(--e-3); }
.sol-diag__cabeca p {
    margin: 0 auto;
    max-width: 36rem;
    color: var(--cor-texto-suave);
}

.sol-diag__palco {
    background: var(--cor-superficie);
    border: var(--borda);
    border-radius: var(--raio-lg);
    box-shadow: var(--sombra-1);
    padding: var(--e-8);
    min-height: 22rem;
}

.sol-diag__contador {
    margin: 0 0 var(--e-2);
    font-family: var(--fonte-mono);
    font-size: var(--texto-xs);
    letter-spacing: var(--tracking-largo);
    text-transform: uppercase;
    color: var(--cor-texto-suave);
}

.sol-diag__barra {
    height: 4px;
    border-radius: var(--raio-pill);
    background: var(--neutro-200);
    overflow: hidden;
    margin-bottom: var(--e-6);
}
.sol-diag__barra span {
    display: block;
    height: 100%;
    background: var(--cor-acao-grafica);
    transition: width var(--transicao-lenta);
}

.sol-diag__pergunta {
    margin: 0 0 var(--e-2);
    font-size: var(--texto-2xl);
    color: var(--cor-titulo);
}
.sol-diag__pergunta:focus { outline: none; }
.sol-diag__ajuda {
    margin: 0 0 var(--e-5);
    font-size: var(--texto-sm);
    color: var(--cor-texto-suave);
}

.sol-diag__opcoes {
    display: grid;
    gap: var(--e-3);
    margin-top: var(--e-5);
}

.sol-diag__opcao {
    display: block;
    width: 100%;
    min-height: var(--alvo-toque);
    text-align: left;
    padding: var(--e-4) var(--e-5);
    background: var(--cor-superficie);
    border: 2px solid var(--cor-borda);
    border-radius: var(--raio);
    cursor: pointer;
    transition: border-color var(--transicao), background-color var(--transicao),
                transform var(--transicao-rapida);
}
.sol-diag__opcao:hover, .sol-diag__opcao:focus-visible {
    border-color: var(--cor-acao-grafica);
    background: var(--cor-fundo-alt);
}
.sol-diag__opcao:active { transform: translateY(1px); }

.sol-diag__rotulo {
    display: block;
    font-weight: var(--peso-medio);
    color: var(--cor-texto);
}
.sol-diag__nota {
    display: block;
    margin-top: 2px;
    font-size: var(--texto-sm);
    color: var(--cor-texto-suave);
}

.sol-diag__voltar {
    margin-top: var(--e-6);
    min-height: var(--alvo-toque);
    padding: 0 var(--e-2);
    background: none;
    border: 0;
    color: var(--cor-texto-suave);
    font-size: var(--texto-sm);
    cursor: pointer;
    border-radius: var(--raio-sm);
}
.sol-diag__voltar:hover, .sol-diag__voltar:focus-visible { color: var(--cor-link); }

/* ---- resultado ---- */
.sol-diag__resultado:focus { outline: none; }

.sol-diag__servicos {
    list-style: none;
    padding: 0;
    margin: var(--e-5) 0 var(--e-8);
    display: grid;
    gap: var(--e-3);
}
.sol-diag__servicos li {
    padding: var(--e-4) var(--e-5);
    background: var(--cor-fundo-alt);
    border-left: 4px solid var(--cor-acao-grafica);
    border-radius: 0 var(--raio) var(--raio) 0;
}
.sol-diag__servicos strong {
    display: block;
    color: var(--cor-titulo);
    margin-bottom: var(--e-1);
}
.sol-diag__servicos span {
    display: block;
    font-size: var(--texto-sm);
    color: var(--cor-texto-suave);
    line-height: var(--entrelinha-solta);
}

.sol-diag__subtitulo {
    margin: 0 0 var(--e-3);
    font-size: var(--texto-lg);
    color: var(--cor-titulo);
}
.sol-diag__docs {
    margin: 0 0 var(--e-6);
    padding-left: var(--e-5);
    color: var(--cor-texto-suave);
    font-size: var(--texto-sm);
}
.sol-diag__docs li { margin-bottom: var(--e-2); }

/* A ressalva não é rodapé jurídico escondido: fica visível, no mesmo tamanho
   do resto, porque quem contrata engenharia precisa saber o que é orientação
   e o que é parecer técnico. */
.sol-diag__ressalva {
    padding: var(--e-4) var(--e-5);
    background: var(--info-bg);
    border: 1px solid var(--info-bd);
    border-radius: var(--raio);
    font-size: var(--texto-sm);
    color: var(--neutro-700);
    margin: 0 0 var(--e-6);
}

.sol-diag__acoes { display: flex; flex-wrap: wrap; gap: var(--e-3); }
.sol-diag__nota-envio {
    margin: var(--e-3) 0 0;
    font-size: var(--texto-xs);
    color: var(--cor-texto-suave);
}

@media (max-width: 575px) {
    .sol-diag__palco { padding: var(--e-5); min-height: 0; }
    .sol-diag__acoes .sol-btn { width: 100%; }
}

/* --------------------------------------------------------------------------
   12. MODAL DO WHATSAPP

   Usa o <dialog> nativo: prende o foco, fecha no ESC e escurece o fundo sem
   uma linha de JavaScript para isso. O markup é montado em js/solucione.js,
   então a modal existe em toda página do site sem markup duplicado.
   -------------------------------------------------------------------------- */

.sol-modal {
    width: min(30rem, calc(100vw - var(--e-8)));
    max-height: calc(100dvh - var(--e-8));
    padding: 0;
    border: 0;
    border-radius: var(--raio-lg);
    background: var(--cor-superficie);
    color: var(--cor-texto);
    box-shadow: var(--sombra-2);
    overflow: visible;
}
.sol-modal::backdrop {
    background: rgba(12, 29, 25, .62);
    backdrop-filter: blur(2px);
}
.sol-modal[open] { animation: sol-modal-entra 220ms ease both; }
.sol-modal[open]::backdrop { animation: sol-fade 220ms ease both; }

@keyframes sol-modal-entra {
    from { opacity: 0; transform: translateY(12px) scale(.98); }
    to   { opacity: 1; transform: none; }
}
@keyframes sol-fade { from { opacity: 0; } to { opacity: 1; } }

.sol-modal__caixa {
    max-height: calc(100dvh - var(--e-8));
    overflow-y: auto;
    padding: var(--e-6);
    border-radius: var(--raio-lg);
}

.sol-modal__topo {
    display: flex;
    align-items: flex-start;
    justify-content: space-between;
    gap: var(--e-4);
    margin-bottom: var(--e-5);
}
.sol-modal__titulo {
    margin: 0;
    font-size: var(--texto-xl);
    color: var(--cor-titulo);
}
.sol-modal__sub {
    margin: var(--e-1) 0 0;
    font-size: var(--texto-sm);
    color: var(--cor-texto-suave);
}
.sol-modal__x {
    flex: none;
    width: var(--alvo-toque); height: var(--alvo-toque);
    display: grid; place-items: center;
    background: none;
    border: 0;
    border-radius: var(--raio-sm);
    color: var(--cor-texto-suave);
    cursor: pointer;
    transition: background-color var(--transicao), color var(--transicao);
}
.sol-modal__x:hover, .sol-modal__x:focus-visible {
    background: var(--cor-fundo-alt);
    color: var(--cor-texto);
}
.sol-modal__x .sol-ico { width: 20px; height: 20px; }

.sol-modal__form .sol-campo { margin-bottom: var(--e-4); }

.sol-modal__acoes {
    display: flex;
    gap: var(--e-3);
    margin-top: var(--e-5);
}
.sol-modal__acoes .sol-btn { flex: 1; justify-content: center; }

/* ---- painel de resultado ---- */
.sol-modal__final { text-align: center; padding: var(--e-4) 0 var(--e-2); }
.sol-modal__final:focus { outline: none; }
.sol-modal__final h3 {
    margin: var(--e-3) 0 var(--e-2);
    font-size: var(--texto-xl);
    color: var(--cor-titulo);
}
.sol-modal__final p {
    margin: 0 0 var(--e-3);
    color: var(--cor-texto-suave);
    font-size: var(--texto-sm);
}
.sol-modal__icone { width: 40px; height: 40px; }
.sol-modal__final--ok .sol-modal__icone       { color: var(--sucesso); }
.sol-modal__final--atencao .sol-modal__icone  { color: var(--atencao); }
.sol-modal__nota { font-size: var(--texto-xs) !important; }

@media (max-width: 575px) {
    /* Ancorada embaixo, ao alcance do polegar.

       Sem 100vw aqui: essa unidade inclui a barra de rolagem, e a modal saía
       ~9px mais larga que a área visível. A largura vem da regra base, que já
       desconta uma margem lateral. */
    .sol-modal {
        margin: auto auto var(--e-2);
        border-radius: var(--raio-lg);
    }
    .sol-modal__caixa { max-height: calc(100dvh - var(--e-12)); }
    .sol-modal__acoes { flex-direction: column-reverse; }
}

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