/* site.css — site público (Fase 2, bloco 7: F2-15).
   Carregar depois de sgi-pele.css, de /api/marca/tema.css e de /css/app.css. A cor é a da marca da empresa
   (--sgi-azul*, que o cadastro da marca já confere no contraste com o branco); o resto é a pele do portal: Inter,
   cartão branco sem borda, raio 12, sombra quase invisível. Nada passa da largura em 375 px (a faixa do menu e a das
   tabelas rolam dentro delas, nunca a página). Dos sites de referência só a estrutura (Lei 9). */

:root {
  --site-miolo: 1080px;
  --site-r: 16px;
  --site-sombra-alta: 0 10px 30px -12px rgba(17, 28, 45, .28);
  --site-whats: #15763a;
  --site-whats-escuro: #0f5e2d;
}

body.site { background: var(--sgi-chao); color: var(--sgi-texto); }
body.site main.site-main { max-width: none; margin: 0; padding: 0; }
body.site h1, body.site h2, body.site h3 { color: var(--sgi-tinta); letter-spacing: -0.015em; }

.site-pular {
  position: absolute; left: 8px; top: -60px; z-index: 100;
  padding: 10px 16px; border-radius: 999px; background: var(--sgi-tinta); color: #fff; font-weight: 600; text-decoration: none;
}
.site-pular:focus { top: 8px; }

/* ---------- topo ---------- */
header.site-topo {
  position: sticky; top: 0; z-index: 50;
  background: rgba(255, 255, 255, .96); border-bottom: 1px solid var(--sgi-linha);
}
@supports (backdrop-filter: blur(8px)) {
  header.site-topo { background: rgba(255, 255, 255, .85); backdrop-filter: saturate(1.4) blur(8px); }
}
.site-topo-miolo {
  display: flex; flex-wrap: wrap; align-items: center; gap: 0 12px;
  max-width: var(--site-miolo); margin: 0 auto; padding: 8px 16px 0;
}
.site-marca { display: flex; align-items: center; min-height: 44px; flex: none; border-radius: var(--sgi-r-campo); }
.site-marca img { display: block; height: 36px; width: auto; max-width: 150px; object-fit: contain; }
.site-entrar {
  margin-left: auto; display: inline-flex; align-items: center; gap: 6px; min-height: 40px; padding: 0 16px;
  border-radius: 999px; background: var(--sgi-azul-claro); color: var(--sgi-azul-texto);
  font-size: 14px; font-weight: 600; text-decoration: none; transition: background-color .15s;
}
.site-entrar:hover { background: #dbe9fb; }
/* no celular o menu vai para a 2ª linha e rola de lado dentro dele */
nav.site-menu {
  order: 3; flex: 1 0 100%; display: flex; gap: 4px;
  overflow-x: auto; scrollbar-width: none; -webkit-overflow-scrolling: touch; margin: 4px -16px 0; padding: 0 12px;
}
nav.site-menu::-webkit-scrollbar { display: none; }
nav.site-menu a {
  flex: none; display: inline-flex; align-items: center; min-height: 44px; padding: 0 12px;
  border-bottom: 2px solid transparent; color: var(--sgi-fraco); font-size: 14px; font-weight: 600;
  text-decoration: none; white-space: nowrap; transition: color .15s, border-color .15s;
}
nav.site-menu a:hover { color: var(--sgi-tinta); }
nav.site-menu a[aria-current="page"] { color: var(--sgi-azul-texto); border-bottom-color: var(--sgi-azul); }
@media (min-width: 861px) {
  .site-topo-miolo { flex-wrap: nowrap; padding: 0 24px; min-height: 68px; }
  nav.site-menu { order: 0; flex: 1 1 auto; justify-content: center; margin: 0; padding: 0; overflow: visible; }
  nav.site-menu a { min-height: 68px; }
  .site-entrar { margin-left: 0; }
}

/* ---------- herói ---------- */
.site-heroi {
  position: relative; overflow: hidden; color: #fff;
  background:
    radial-gradient(1200px 420px at 85% -10%, rgba(255, 255, 255, .18), transparent 60%),
    linear-gradient(135deg, var(--sgi-azul-fundo) 0%, var(--sgi-azul) 100%);
}
.site-heroi-miolo { position: relative; z-index: 1; max-width: var(--site-miolo); margin: 0 auto; padding: 48px 16px 56px; }
.site-heroi .site-selo-topo {
  display: inline-flex; align-items: center; gap: 6px; margin: 0 0 14px; padding: 4px 12px; border-radius: 999px;
  background: rgba(255, 255, 255, .16); color: #fff; font-size: 13px; font-weight: 600;
}
html:not(.pele-compacta) body.site .site-heroi h1 {
  margin: 0 0 12px; max-width: 760px; color: #fff;
  font-size: clamp(30px, 6.4vw, 50px); font-weight: 700; line-height: 1.1; letter-spacing: -0.025em;
}
.site-heroi .site-lead { margin: 0 0 24px; max-width: 640px; font-size: clamp(16px, 2.4vw, 19px); line-height: 1.55; color: rgba(255, 255, 255, .92); }
.site-heroi.compacto .site-heroi-miolo { padding: 36px 16px 40px; }
html:not(.pele-compacta) body.site .site-heroi.compacto h1 { font-size: clamp(28px, 5vw, 40px); }
.site-acoes { display: flex; flex-wrap: wrap; gap: 10px; }
a.site-botao, button.site-botao {
  display: inline-flex; align-items: center; justify-content: center; gap: 8px; min-height: 48px; padding: 0 22px;
  border: 0; border-radius: 999px; font: inherit; font-size: 15px; font-weight: 600; text-decoration: none; cursor: pointer;
  transition: transform .12s, box-shadow .15s, background-color .15s; touch-action: manipulation;
  text-align: center; line-height: 1.25;
}
.site-recebido .site-acoes { margin-top: 14px; }
a.site-botao:active, button.site-botao:active { transform: scale(.97); }
.site-botao.claro { background: #fff; color: var(--sgi-azul-texto); box-shadow: var(--site-sombra-alta); }
.site-botao.claro:hover { box-shadow: 0 14px 34px -12px rgba(17, 28, 45, .4); }
.site-botao.vazado { background: rgba(255, 255, 255, .14); color: #fff; box-shadow: inset 0 0 0 1px rgba(255, 255, 255, .5); }
.site-botao.vazado:hover { background: rgba(255, 255, 255, .22); }
.site-botao.cheio { background: var(--sgi-azul); color: #fff; }
.site-botao.cheio:hover { background: var(--sgi-azul-fundo); }
.site-botao.whats { background: var(--site-whats); color: #fff; }
.site-botao.whats:hover { background: var(--site-whats-escuro); }
html button.site-botao:disabled { opacity: .55; cursor: not-allowed; transform: none; }
/* ondas de som do herói: só enfeite, feito de traços (nenhuma imagem de fora) */
.site-ondas {
  position: absolute; right: -10px; bottom: 0; z-index: 0; display: flex; align-items: flex-end; gap: 6px;
  height: 140px; padding: 0 16px; opacity: .22; pointer-events: none;
}
.site-ondas span { display: block; width: 8px; border-radius: 8px 8px 0 0; background: #fff; transform-origin: bottom; }
.site-ondas span:nth-child(5n + 1) { height: 40%; }
.site-ondas span:nth-child(5n + 2) { height: 85%; }
.site-ondas span:nth-child(5n + 3) { height: 60%; }
.site-ondas span:nth-child(5n + 4) { height: 100%; }
.site-ondas span:nth-child(5n) { height: 30%; }
@media (prefers-reduced-motion: no-preference) {
  .site-ondas span { animation: siteOnda 1.6s ease-in-out infinite alternate; }
  .site-ondas span:nth-child(2n) { animation-duration: 1.2s; }
  .site-ondas span:nth-child(3n) { animation-duration: 2s; animation-delay: -.6s; }
  @keyframes siteOnda { from { transform: scaleY(.45); } to { transform: scaleY(1); } }
}
@media (min-width: 861px) {
  .site-heroi-miolo { padding: 80px 24px 88px; }
  .site-heroi.compacto .site-heroi-miolo { padding: 56px 24px 60px; }
  .site-ondas { height: 220px; gap: 9px; right: 24px; opacity: .2; }
  .site-ondas span { width: 10px; }
}

/* ---------- seções ---------- */
.site-secao { padding: 48px 16px; }
.site-secao.branca { background: #fff; }
.site-secao-miolo { max-width: var(--site-miolo); margin: 0 auto; min-width: 0; }
.site-sobretitulo { margin: 0 0 6px; font-size: 13px; font-weight: 700; letter-spacing: .6px; text-transform: uppercase; color: var(--sgi-azul-texto); }
html:not(.pele-compacta) body.site .site-secao h2 { margin: 0 0 10px; font-size: clamp(22px, 3.6vw, 30px); line-height: 1.2; font-weight: 700; }
html:not(.pele-compacta) body.site .site-secao h3 { margin: 0 0 6px; font-size: 17px; line-height: 1.3; }
html:not(.pele-compacta) body.site .site-secao h3.site-subtitulo { margin: 32px 0 12px; font-size: 16px; }
.site-intro { margin: 0 0 24px; max-width: 720px; font-size: 16px; line-height: 1.6; color: var(--sgi-texto); }
.site-centro { text-align: center; }
.site-centro .site-intro { margin-left: auto; margin-right: auto; }
.site-centro .site-acoes { justify-content: center; }
.site-secao-miolo > .site-acoes, .site-bonus + .site-acoes { margin-top: 24px; }
@media (min-width: 861px) { .site-secao { padding: 72px 24px; } }

.site-cartoes { display: grid; gap: 16px; grid-template-columns: repeat(auto-fit, minmax(min(100%, 240px), 1fr)); }
.site-cartoes.tres { grid-template-columns: repeat(auto-fit, minmax(min(100%, 280px), 1fr)); }
.site-cartao {
  display: flex; flex-direction: column; gap: 8px; min-width: 0; padding: 22px;
  background: #fff; border-radius: var(--site-r); box-shadow: var(--sgi-sombra);
}
.site-secao.branca .site-cartao { background: var(--sgi-chao); box-shadow: none; }
.site-cartao p { margin: 0; line-height: 1.55; }
.site-cartao .site-ico, .site-ico {
  display: inline-flex; align-items: center; justify-content: center; flex: none;
  width: 44px; height: 44px; border-radius: 12px; background: var(--sgi-azul-claro); color: var(--sgi-azul-texto);
}
.site-cartao.pergunta { border-top: 4px solid var(--sgi-azul); }
.site-cartao.pergunta h3 { font-size: 18px; }

.site-chips { display: flex; flex-wrap: wrap; gap: 8px; margin: 0; padding: 0; list-style: none; }
.site-chips li {
  display: inline-flex; align-items: center; gap: 6px; min-height: 36px; padding: 0 14px; border-radius: 999px;
  background: #fff; box-shadow: var(--sgi-sombra); color: var(--sgi-tinta); font-size: 14px; font-weight: 600;
}
.site-secao.branca .site-chips li { background: var(--sgi-chao); box-shadow: none; }

/* passos numerados (como funciona, etapas da produção) */
.site-passos { display: grid; gap: 16px; grid-template-columns: repeat(auto-fit, minmax(min(100%, 230px), 1fr)); margin: 0; padding: 0; list-style: none; counter-reset: passo; }
.site-passos li { position: relative; min-width: 0; padding: 22px 22px 22px 70px; background: #fff; border-radius: var(--site-r); box-shadow: var(--sgi-sombra); counter-increment: passo; }
.site-secao.branca .site-passos li { background: var(--sgi-chao); box-shadow: none; }
.site-passos li::before {
  content: counter(passo); position: absolute; left: 20px; top: 20px;
  display: flex; align-items: center; justify-content: center; width: 36px; height: 36px; border-radius: 50%;
  background: var(--sgi-azul); color: #fff; font-weight: 700; font-size: 16px;
}
.site-passos h3 { margin: 0 0 4px; }
.site-passos p { margin: 0; line-height: 1.55; }

/* comparativo streaming × rádio personalizada */
.site-compara { display: grid; gap: 16px; grid-template-columns: repeat(auto-fit, minmax(min(100%, 300px), 1fr)); }
.site-compara ul { margin: 0; padding: 0; list-style: none; display: grid; gap: 10px; }
.site-compara li { display: flex; align-items: flex-start; gap: 10px; line-height: 1.45; }
.site-compara li .ico { margin-top: 2px; }
.site-compara .contra .ico { color: var(--sgi-vermelho); }
.site-compara .pro { box-shadow: inset 0 0 0 2px var(--sgi-azul), var(--sgi-sombra); }
.site-compara .pro .ico { color: var(--sgi-verde); }

/* ---------- preços ---------- */
.site-precos-grupo + .site-precos-grupo { margin-top: 32px; }
.site-precos-grupo > h3 { display: flex; flex-wrap: wrap; align-items: baseline; gap: 4px 10px; }
.site-precos-grupo > h3 small { font-size: 14px; font-weight: 500; color: var(--sgi-fraco); }
/* duas colunas já no celular de 375 px (o valor encolhe junto, sem passar da borda do cartão) */
.site-precos { display: grid; gap: 12px; grid-template-columns: repeat(auto-fill, minmax(150px, 1fr)); margin-top: 12px; }
.site-preco {
  position: relative; display: flex; flex-direction: column; gap: 2px; min-width: 0; padding: 18px;
  background: #fff; border-radius: var(--site-r); box-shadow: var(--sgi-sombra);
}
.site-secao.branca .site-preco { background: var(--sgi-chao); box-shadow: none; }
.site-preco .qtd { font-size: 14px; font-weight: 600; color: var(--sgi-fraco); }
.site-preco .valor { font-size: clamp(19px, 5.2vw, 26px); white-space: nowrap; font-weight: 700; color: var(--sgi-tinta); letter-spacing: -0.02em; font-variant-numeric: tabular-nums; }
.site-preco .cada { font-size: 13px; color: var(--sgi-texto); }
.site-preco .economia {
  align-self: flex-start; margin-top: 6px; padding: 2px 10px; border-radius: 999px;
  background: var(--cor-verde-claro, #e7f5ec); color: var(--sgi-verde); font-size: 12px; font-weight: 700;
}
.site-preco.destaque, .site-secao.branca .site-preco.destaque { box-shadow: inset 0 0 0 2px var(--sgi-azul); }
.site-nota { margin: 16px 0 0; font-size: 14px; color: var(--sgi-fraco); line-height: 1.55; }
.site-carregando { color: var(--sgi-fraco); }

/* planos da rádio indoor */
.site-planos { display: grid; gap: 16px; grid-template-columns: repeat(auto-fit, minmax(min(100%, 280px), 1fr)); max-width: 760px; margin: 0 auto; }
.site-plano { display: flex; flex-direction: column; gap: 6px; padding: 26px; background: #fff; border-radius: 20px; box-shadow: var(--sgi-sombra); text-align: left; }
.site-plano.anual { box-shadow: inset 0 0 0 2px var(--sgi-azul), var(--site-sombra-alta); }
.site-plano .nome { font-size: 15px; font-weight: 700; color: var(--sgi-azul-texto); text-transform: uppercase; letter-spacing: .5px; }
.site-plano .valor { font-size: 38px; font-weight: 700; line-height: 1.1; color: var(--sgi-tinta); letter-spacing: -0.03em; font-variant-numeric: tabular-nums; }
.site-plano .valor small { font-size: 16px; font-weight: 600; color: var(--sgi-fraco); letter-spacing: 0; }
.site-plano .pe { margin: 0; color: var(--sgi-texto); }
.site-bonus { display: flex; align-items: flex-start; gap: 12px; max-width: 760px; margin: 16px auto 0; padding: 16px 18px; border-radius: var(--site-r); background: var(--sgi-azul-claro); color: var(--sgi-tinta); text-align: left; }

/* ---------- perguntas frequentes ---------- */
.site-faq { display: grid; gap: 10px; max-width: 820px; }
.site-faq details { background: #fff; border-radius: 14px; box-shadow: var(--sgi-sombra); }
.site-secao.branca .site-faq details { background: var(--sgi-chao); box-shadow: none; }
.site-faq summary {
  position: relative; display: flex; align-items: center; min-height: 56px; padding: 12px 48px 12px 18px;
  font-size: 16px; font-weight: 600; color: var(--sgi-tinta); cursor: pointer; list-style: none;
}
.site-faq summary::-webkit-details-marker { display: none; }
.site-faq summary::after {
  content: ''; position: absolute; right: 20px; top: 50%; width: 9px; height: 9px; margin-top: -6px;
  border-right: 2px solid var(--sgi-fraco); border-bottom: 2px solid var(--sgi-fraco); transform: rotate(45deg);
  transition: transform .15s;
}
.site-faq details[open] summary::after { transform: rotate(225deg); margin-top: -2px; }
.site-faq details p { margin: 0; padding: 0 18px 16px; line-height: 1.6; }

/* chamada final */
.site-chamada { text-align: center; color: #fff; background: linear-gradient(135deg, var(--sgi-azul-fundo), var(--sgi-azul)); }
html:not(.pele-compacta) body.site .site-chamada h2 { color: #fff; }
.site-chamada p { margin: 0 auto 20px; max-width: 620px; color: rgba(255, 255, 255, .92); font-size: 16px; }
.site-chamada .site-acoes { justify-content: center; }

/* ---------- rodapé e WhatsApp flutuante ---------- */
footer.site-rodape { background: var(--sgi-tinta); color: rgba(255, 255, 255, .78); }
.site-rodape-miolo {
  display: grid; gap: 24px; grid-template-columns: repeat(auto-fit, minmax(min(100%, 240px), 1fr));
  max-width: var(--site-miolo); margin: 0 auto; padding: 40px 16px 24px;
}
.site-rodape-nome { margin: 0 0 4px; font-size: 18px; font-weight: 700; color: #fff; }
.site-rodape p { margin: 0 0 6px; line-height: 1.5; }
.site-rodape nav, .site-rodape .site-redes { display: flex; flex-direction: column; gap: 2px; }
.site-rodape a { display: inline-flex; align-items: center; gap: 8px; min-height: 36px; color: #fff; text-decoration: none; }
.site-rodape a:hover { text-decoration: underline; text-underline-offset: 3px; }
.site-rodape a:focus-visible { outline-color: #fff; }
.site-rodape-fim { max-width: var(--site-miolo); margin: 0 auto; padding: 16px 16px 24px; border-top: 1px solid rgba(255, 255, 255, .12); font-size: 13px; }
@media (min-width: 861px) { .site-rodape-miolo { padding: 48px 24px 28px; } .site-rodape-fim { padding: 16px 24px 28px; } }
a.site-whats-flutuante {
  position: fixed; right: 16px; bottom: calc(16px + env(safe-area-inset-bottom, 0px)); z-index: 60;
  display: flex; align-items: center; justify-content: center; width: 58px; height: 58px; border-radius: 50%;
  background: var(--site-whats); color: #fff; box-shadow: 0 10px 24px -6px rgba(15, 94, 45, .55); transition: transform .15s, background-color .15s;
}
a.site-whats-flutuante:hover { background: var(--site-whats-escuro); transform: translateY(-2px); }
body.site.tem-whats footer.site-rodape { padding-bottom: 72px; }

/* ---------- home de links em banners ilustrados (D-126; estrutura de página de links, nada copiado) ----------
   Fundo escuro da marca; cada link é um banner com título forte, frase, botão em pílula e a ilustração à direita
   (public/img/ilustra, desenhos do portal). Um por linha no celular, dois por linha a partir de 760 px. */
body.site-home {
  min-height: 100vh; min-height: 100dvh;
  --home-noite: #061733;
  background:
    radial-gradient(700px 420px at 15% -5%, rgba(22, 144, 230, .35), transparent 65%),
    radial-gradient(600px 380px at 100% 30%, rgba(8, 114, 196, .28), transparent 65%),
    linear-gradient(170deg, #0a2550 0%, var(--home-noite) 55%, #040f24 100%);
  background-attachment: fixed;
}
main.home {
  display: flex; flex-direction: column; align-items: center; max-width: 1040px; margin: 0 auto;
  padding: 28px max(16px, env(safe-area-inset-right, 0px)) 32px max(16px, env(safe-area-inset-left, 0px));
}
.home-topo { display: flex; flex-direction: column; align-items: center; gap: 10px; margin-bottom: 22px; text-align: center; }
.home-logo-caixa {
  padding: 14px 26px; border-radius: 24px; background: #fff;
  box-shadow: 0 18px 40px -16px rgba(0, 0, 0, .6), inset 0 -3px 0 rgba(8, 114, 196, .12);
}
.home-logo { display: block; width: min(56vw, 240px); height: auto; aspect-ratio: 2000 / 1105; object-fit: contain; }
html:not(.pele-compacta) body.site-home h1.home-nome {
  margin: 4px 0 0; color: #fff; font-size: clamp(20px, 5vw, 26px); font-weight: 800; letter-spacing: -0.02em;
}
.home-selo {
  margin: 0; padding: 6px 16px; border-radius: 999px;
  background: linear-gradient(135deg, #1690e6, #0756a8); color: #fff;
  font-size: 13px; font-weight: 700; letter-spacing: .3px; box-shadow: 0 8px 20px -10px rgba(22, 144, 230, .8);
}
.home-links { display: grid; gap: 14px; width: 100%; max-width: 520px; margin: 0; padding: 0; list-style: none; }
@media (min-width: 760px) { .home-links { max-width: none; grid-template-columns: 1fr 1fr; gap: 18px; } }
.home-links > li { min-width: 0; }
.home-links > li[hidden] { display: none; }
a.home-banner {
  position: relative; isolation: isolate; overflow: hidden;
  display: grid; grid-template-columns: minmax(0, 1fr) clamp(120px, 34%, 190px); align-items: center;
  min-height: 150px; padding: 18px 0 18px 20px; border-radius: 22px; text-decoration: none;
  box-shadow: 0 14px 30px -14px rgba(0, 0, 0, .65); transition: transform .18s, box-shadow .18s;
}
a.home-banner::before {
  content: ''; position: absolute; inset: 0; z-index: -1;
  background: radial-gradient(220px 160px at 88% 50%, rgba(255, 255, 255, .22), transparent 70%);
}
a.home-banner::after {
  content: ''; position: absolute; right: 38%; top: -18px; z-index: -1; width: 46px; height: 46px; border-radius: 50%;
  background: radial-gradient(circle at 35% 30%, rgba(255, 255, 255, .55), rgba(255, 255, 255, 0) 60%); opacity: .7;
}
a.home-banner:hover { transform: translateY(-3px); box-shadow: 0 20px 38px -16px rgba(0, 0, 0, .75); }
a.home-banner:active { transform: scale(.985); }
a.home-banner:focus-visible { outline: 3px solid #fff; outline-offset: 3px; }
.home-banner-txt { display: flex; flex-direction: column; align-items: flex-start; gap: 6px; min-width: 0; }
.home-banner-txt strong { font-size: clamp(19px, 5.2vw, 24px); font-weight: 800; line-height: 1.12; letter-spacing: -0.02em; text-wrap: balance; }
.home-banner-txt small { font-size: 14px; line-height: 1.4; max-width: 30ch; }
.home-pilula {
  display: inline-flex; align-items: center; gap: 4px; margin-top: 6px; min-height: 34px; padding: 0 14px;
  border-radius: 999px; font-size: 13px; font-weight: 700; white-space: nowrap;
  box-shadow: 0 6px 14px -8px rgba(0, 0, 0, .55);
}
.home-arte { display: block; width: 100%; height: auto; margin-right: -6px; filter: drop-shadow(0 10px 14px rgba(0, 0, 0, .25)); }
/* variações de cor do banner: todas com o texto em 4,5:1 sobre o fundo */
a.home-banner.azul { background: linear-gradient(120deg, #0a63b8 0%, #0872c4 45%, #0a3f86 100%); color: #fff; }
a.home-banner.azul small { color: rgba(255, 255, 255, .92); }
a.home-banner.azul .home-pilula, a.home-banner.escuro .home-pilula { background: #fff; color: #06539e; }
a.home-banner.claro { background: linear-gradient(120deg, #ffffff 0%, #e3f1fc 55%, #c6e2fa 100%); color: #072a57; }
a.home-banner.claro small { color: #24456e; }
a.home-banner.claro .home-pilula, a.home-banner.prata .home-pilula { background: #0872c4; color: #fff; }
a.home-banner.prata { background: linear-gradient(120deg, #f7f9fc 0%, #dfe6ef 55%, #c3cedb 100%); color: #10223d; }
a.home-banner.prata small { color: #34465f; }
a.home-banner.escuro { background: linear-gradient(120deg, #0d2a52 0%, #0a1d3a 60%, #071530 100%); color: #fff; box-shadow: 0 14px 30px -14px rgba(0, 0, 0, .7), inset 0 0 0 1px rgba(127, 208, 255, .22); }
a.home-banner.escuro small { color: rgba(255, 255, 255, .85); }
a.home-banner.verde { background: linear-gradient(120deg, #128a45 0%, #0f7a3c 50%, #0b5a2c 100%); color: #fff; }
a.home-banner.verde small { color: rgba(255, 255, 255, .92); }
a.home-banner.verde .home-pilula { background: #fff; color: #0b5a2c; }
a.home-banner.rosa { background: linear-gradient(120deg, #c2265f 0%, #a32a8f 50%, #5b2fb0 100%); color: #fff; }
a.home-banner.rosa small { color: rgba(255, 255, 255, .92); }
a.home-banner.rosa .home-pilula { background: #fff; color: #8a1f6e; }
/* rede ainda sem endereço na config (D-128): o banner fica à vista, sem link, com a pílula "Em breve" */
a.home-banner.sem-link { cursor: default; }
a.home-banner.sem-link:hover { transform: none; }
a.home-banner.sem-link .home-pilula { background: rgba(255, 255, 255, .22); color: inherit; box-shadow: inset 0 0 0 1px rgba(255, 255, 255, .45); }
a.home-banner.prata.sem-link .home-pilula { background: rgba(16, 34, 61, .08); box-shadow: inset 0 0 0 1px rgba(16, 34, 61, .3); }
.home-redes { display: flex; flex-wrap: wrap; justify-content: center; gap: 10px; margin: 22px 0 0; padding: 0; list-style: none; }
.home-redes li[hidden] { display: none; }
.home-redes a {
  display: inline-flex; align-items: center; gap: 8px; min-height: 44px; padding: 0 18px; border-radius: 999px;
  background: rgba(255, 255, 255, .1); color: #fff; font-weight: 600; text-decoration: none;
  box-shadow: inset 0 0 0 1px rgba(255, 255, 255, .25); transition: background-color .15s;
}
.home-redes a:hover { background: rgba(255, 255, 255, .18); }
.home-rodape { margin: 24px 0 0; color: rgba(255, 255, 255, .78); font-size: 13px; text-align: center; }
@media (max-width: 380px) {
  a.home-banner { grid-template-columns: minmax(0, 1fr) 112px; min-height: 140px; padding-left: 16px; }
  .home-banner-txt small { font-size: 13px; }
}
@media (prefers-reduced-motion: no-preference) {
  .home-links li { animation: homeEntra .4s ease-out both; }
  .home-links li:nth-child(2) { animation-delay: .05s; }
  .home-links li:nth-child(3) { animation-delay: .1s; }
  .home-links li:nth-child(4) { animation-delay: .15s; }
  .home-links li:nth-child(5) { animation-delay: .2s; }
  .home-links li:nth-child(n + 6) { animation-delay: .25s; }
  @keyframes homeEntra { from { opacity: 0; transform: translateY(10px); } }
}

/* ---------- mostruário de vozes ---------- */
.site-filtro { display: flex; gap: 8px; overflow-x: auto; scrollbar-width: thin; margin: 0 0 20px; padding: 2px 2px 8px; }
html .site-filtro button {
  flex: none; min-height: 40px; padding: 0 16px; border: 1px solid var(--cor-borda-campo, #7d8aa0); border-radius: 999px;
  background: #fff; color: var(--sgi-texto); font: inherit; font-size: 14px; font-weight: 600; cursor: pointer; white-space: nowrap;
}
html .site-filtro button[aria-pressed="true"] { background: var(--sgi-tinta); border-color: var(--sgi-tinta); color: #fff; }
.site-vozes { display: grid; gap: 16px; grid-template-columns: repeat(auto-fill, minmax(min(100%, 320px), 1fr)); }
.site-voz { display: flex; flex-direction: column; gap: 10px; min-width: 0; padding: 20px; background: #fff; border-radius: var(--site-r); box-shadow: var(--sgi-sombra); }
.site-voz-topo { display: flex; align-items: center; gap: 12px; }
.site-voz-inicial {
  display: flex; align-items: center; justify-content: center; flex: none; width: 48px; height: 48px; border-radius: 50%;
  background: var(--sgi-azul-claro); color: var(--sgi-azul-texto); font-size: 20px; font-weight: 700;
}
html:not(.pele-compacta) body.site .site-voz h3 { margin: 0; font-size: 18px; overflow-wrap: anywhere; }
.site-selo-ia {
  display: inline-flex; align-items: center; gap: 4px; padding: 2px 10px; border-radius: 999px;
  background: var(--etapa-aguardando-aprovacao-fundo, #fce7f3); color: var(--etapa-aguardando-aprovacao-texto, #9b1550); font-size: 12px; font-weight: 700;
}
.site-voz p { margin: 0; line-height: 1.5; }
.site-voz .estilos { font-size: 13px; color: var(--sgi-fraco); }
.site-amostras { display: grid; gap: 10px; margin: 0; padding: 0; list-style: none; }
.site-amostras li { display: flex; flex-direction: column; gap: 4px; min-width: 0; }
.site-amostras .estilo { font-size: 13px; font-weight: 600; color: var(--sgi-texto); }
.site-amostras audio { width: 100%; max-width: 100%; height: 40px; }
.site-voz .site-botao { align-self: flex-start; min-height: 44px; font-size: 14px; }
.site-vazio { padding: 32px 16px; border-radius: var(--site-r); background: #fff; box-shadow: var(--sgi-sombra); text-align: center; color: var(--sgi-fraco); }
.site-vazio strong { display: block; margin-bottom: 4px; color: var(--sgi-tinta); font-size: 16px; }

/* ---------- formulários do site (pedido avulso, calculadora) ---------- */
.site-form { display: grid; gap: 16px; max-width: 760px; }
.site-bloco { margin: 0; padding: 20px; border: 0; border-radius: var(--site-r); background: #fff; box-shadow: var(--sgi-sombra); min-width: 0; }
.site-bloco > legend {
  float: left; width: 100%; margin: 0 0 12px; padding: 0;
  font-size: 18px; font-weight: 700; color: var(--sgi-tinta); letter-spacing: -0.01em;
}
.site-bloco > legend + * { clear: both; }
.site-bloco .campo:last-child { margin-bottom: 0; }
.site-bloco .campo textarea { min-height: 170px; line-height: 1.6; }
.site-opcoes { display: grid; gap: 10px; grid-template-columns: repeat(auto-fit, minmax(min(100%, 240px), 1fr)); margin: 0 0 12px; }
.site-opcao {
  display: flex; align-items: flex-start; gap: 12px; min-height: 64px; padding: 14px; border-radius: 14px;
  border: 1px solid var(--sgi-linha); background: var(--sgi-chao); cursor: pointer; transition: border-color .15s, box-shadow .15s;
}
.site-opcao:has(input:checked) { border-color: var(--sgi-azul); box-shadow: inset 0 0 0 1px var(--sgi-azul); background: #fff; }
.site-opcao input { margin-top: 2px; }
.site-opcao span { display: flex; flex-direction: column; min-width: 0; }
.site-opcao strong { color: var(--sgi-tinta); }
.site-opcao small { color: var(--sgi-fraco); font-size: 13px; }
.site-marcas { display: flex; flex-wrap: wrap; gap: 4px 18px; margin: 0; padding: 0; border: 0; min-width: 0; }
.site-marcas legend { margin: 0 0 4px; padding: 0; }
.site-marcas label { display: inline-flex; align-items: center; gap: 8px; min-height: 44px; font-size: 14px; color: var(--sgi-texto); cursor: pointer; }
.site-valor {
  display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 8px 16px; padding: 18px 20px;
  border-radius: var(--site-r); background: var(--sgi-tinta); color: #fff;
}
.site-valor .quanto { font-size: 30px; font-weight: 700; letter-spacing: -0.02em; font-variant-numeric: tabular-nums; }
.site-valor .como { margin: 0; color: rgba(255, 255, 255, .85); font-size: 14px; line-height: 1.45; }
.site-valor .aviso-valor { flex-basis: 100%; margin: 0; color: #ffd98a; font-size: 13px; }
.site-termos ol { margin: 0 0 12px; padding-left: 20px; display: grid; gap: 6px; line-height: 1.5; }
.site-termos .minuta { display: inline-block; margin: 0 0 10px; padding: 2px 10px; border-radius: 999px; background: var(--cor-ambar-claro, #fff4dc); color: var(--cor-ambar, #9a5b00); font-size: 12px; font-weight: 700; }
.site-termos details { margin: 8px 0 0; }
.site-termos summary { display: flex; align-items: center; min-height: 44px; cursor: pointer; font-weight: 600; color: var(--sgi-azul-texto); }
.site-termos details ul { margin: 0; padding-left: 20px; line-height: 1.5; }
.site-aceite { display: flex; align-items: flex-start; gap: 10px; min-height: 44px; padding: 12px 14px; border-radius: 12px; background: var(--sgi-azul-claro); color: var(--sgi-tinta); font-weight: 600; cursor: pointer; }
.site-aceite input { margin-top: 2px; }
/* campo isca: fora da tela para quem enxerga e fora do leitor de tela; robô que preenche tudo cai nele */
.site-isca { position: absolute !important; left: -10000px; top: auto; width: 1px; height: 1px; overflow: hidden; }
.site-enviar { display: flex; flex-wrap: wrap; align-items: center; gap: 12px; }
.site-enviar .site-botao { min-height: 52px; padding: 0 28px; font-size: 16px; }
.site-recebido { max-width: 760px; display: grid; gap: 16px; }
.site-recebido .site-bloco h2 { margin: 0 0 6px; }
.site-protocolo { display: inline-block; padding: 4px 12px; border-radius: 999px; background: var(--sgi-azul-claro); color: var(--sgi-azul-texto); font-weight: 700; letter-spacing: .3px; }
.site-instrucoes { margin: 8px 0 0; padding: 14px 16px; border-radius: 12px; background: var(--sgi-chao); color: var(--sgi-tinta); white-space: pre-wrap; overflow-wrap: anywhere; line-height: 1.55; }
.site-calc { max-width: 760px; }
.site-calc .site-bloco { display: grid; gap: 12px; }
@media (max-width: 640px) {
  .site-preco { padding: 14px; }
  .site-bloco { padding: 16px; }
  .site-valor .quanto { font-size: 26px; }
}

/* =====================================================================================================================
   Pele no padrão do Vozes Comerciais (D-126; Lei 9: só a estrutura, estudo em re-vozes-comerciais\, nas cores da marca):
   cabeçalho fixo escuro com a logo e o menu em caixa alta, herói escuro com a frase em duas cores, título de seção em
   caixa com borda, cartões com ícone redondo, preços sobre faixa escura, vozes em painel da cor da marca, perguntas em
   sanfona em duas colunas e o WhatsApp flutuante com rótulo. Vem depois do resto: só sobrescreve.
   ===================================================================================================================== */
:root { --site-noite: #061733; --site-noite-2: #0a2550; --site-brilho: #4fb4ff; }

/* cabeçalho fixo escuro: a logo cromada (azul e prata) aparece bem sobre o escuro */
header.site-topo {
  background: linear-gradient(180deg, var(--site-noite-2), var(--site-noite)); border-bottom: 0;
  box-shadow: 0 6px 20px -10px rgba(0, 0, 0, .6);
}
@supports (backdrop-filter: blur(8px)) {
  header.site-topo { background: linear-gradient(180deg, var(--site-noite-2), var(--site-noite)); backdrop-filter: none; }
}
.site-marca img { height: 40px; max-width: 170px; }
nav.site-menu a {
  color: rgba(255, 255, 255, .82); font-size: 13px; font-weight: 700; letter-spacing: .06em; text-transform: uppercase;
}
nav.site-menu a:hover { color: #fff; }
nav.site-menu a[aria-current="page"] { color: var(--site-brilho); border-bottom-color: var(--site-brilho); }
.site-entrar {
  background: transparent; color: #fff; box-shadow: inset 0 0 0 1.5px rgba(255, 255, 255, .55);
  text-transform: uppercase; font-size: 13px; letter-spacing: .05em;
}
.site-entrar:hover { background: rgba(255, 255, 255, .12); }
@media (min-width: 861px) { .site-marca img { height: 46px; } }

/* herói escuro de tela cheia, frase em caixa alta com a parte de destaque na cor de brilho */
.site-heroi {
  background:
    radial-gradient(700px 360px at 80% 20%, rgba(22, 144, 230, .38), transparent 65%),
    radial-gradient(500px 300px at 10% 110%, rgba(8, 114, 196, .35), transparent 65%),
    linear-gradient(160deg, var(--site-noite-2) 0%, var(--site-noite) 70%, #040f24 100%);
}
html:not(.pele-compacta) body.site .site-heroi h1 {
  font-size: clamp(30px, 7vw, 58px); font-weight: 800; line-height: 1.05; letter-spacing: -0.01em;
  text-transform: uppercase; text-wrap: balance;
}
html:not(.pele-compacta) body.site .site-heroi.compacto h1 { font-size: clamp(28px, 5.6vw, 44px); }
.site-heroi h1 .tom { color: var(--site-brilho); }
.site-heroi .site-selo-topo { background: rgba(79, 180, 255, .16); box-shadow: inset 0 0 0 1px rgba(79, 180, 255, .4); }
.site-ondas { opacity: .28; }
.site-ondas span { background: linear-gradient(180deg, var(--site-brilho), rgba(79, 180, 255, .2)); }
.site-botao.claro { color: var(--sgi-azul-fundo); }

/* título de seção em caixa com borda (centralizado, como no padrão) */
.site-secao-miolo > .site-sobretitulo, .site-secao-miolo > .site-intro { text-align: center; margin-left: auto; margin-right: auto; }
.site-secao-miolo > .site-sobretitulo { color: var(--sgi-azul-texto); letter-spacing: .12em; }
html:not(.pele-compacta) body.site .site-secao h2:not(.sr-only) {
  display: table; max-width: min(100%, 820px); margin: 6px auto 22px; padding: 10px 24px;
  background: var(--sgi-azul); color: #fff; text-align: center; text-transform: uppercase; text-wrap: balance;
  font-size: clamp(20px, 3.4vw, 30px); font-weight: 800; line-height: 1.15; letter-spacing: .01em;
  box-shadow: 0 0 0 4px #fff, 0 0 0 7px var(--sgi-azul);
}
.site-secao:not(.branca):not(.faixa-escura):not(.site-chamada) { background: #f4f7fb; }
html:not(.pele-compacta) body.site .site-secao h3.site-subtitulo { text-align: center; text-transform: uppercase; letter-spacing: .06em; font-size: 15px; }
.site-secao-miolo > .site-chips { justify-content: center; }

/* cartões com ícone redondo grande (serviços, benefícios) */
.site-cartao {
  align-items: center; text-align: center; padding: 28px 22px 26px; border: 1px solid #eef1f5;
  box-shadow: 0 0 30px rgba(6, 23, 51, .08); border-radius: 12px; transition: transform .2s ease, box-shadow .2s ease;
}
.site-cartao:hover { transform: translateY(-3px); box-shadow: 0 10px 34px rgba(6, 23, 51, .14); }
.site-secao.branca .site-cartao { background: #fff; box-shadow: 0 0 30px rgba(6, 23, 51, .08); }
.site-cartao .site-ico {
  width: 84px; height: 84px; margin-bottom: 6px; border-radius: 50%;
  background: radial-gradient(circle at 35% 30%, #4fb4ff, var(--sgi-azul) 55%, var(--sgi-azul-fundo));
  color: #fff; box-shadow: 0 0 0 5px #fff, 0 0 0 8px var(--sgi-azul), 0 12px 24px -10px rgba(8, 114, 196, .7);
}
.site-cartao .site-ico svg { width: 36px; height: 36px; }
html:not(.pele-compacta) body.site .site-cartao h3 { text-transform: uppercase; letter-spacing: .04em; font-size: 16px; font-weight: 800; }
.site-passos li::before {
  background: radial-gradient(circle at 35% 30%, #4fb4ff, var(--sgi-azul) 60%, var(--sgi-azul-fundo));
  box-shadow: 0 0 0 3px #fff, 0 0 0 5px var(--sgi-azul);
}

/* faixa escura (preços e planos): fundo noite com textura de ondas feita em CSS; título em caixa com a borda de brilho */
.site-secao.faixa-escura {
  background:
    repeating-radial-gradient(circle at 0 100%, rgba(79, 180, 255, .07) 0 2px, transparent 2px 26px),
    repeating-radial-gradient(circle at 100% 0, rgba(255, 255, 255, .04) 0 2px, transparent 2px 30px),
    linear-gradient(160deg, var(--site-noite-2), var(--site-noite));
  color: rgba(255, 255, 255, .9);
}
html:not(.pele-compacta) body.site .site-secao.faixa-escura h2:not(.sr-only) { box-shadow: 0 0 0 4px var(--site-noite), 0 0 0 7px var(--site-brilho); }
.site-secao.faixa-escura .site-secao-miolo > .site-sobretitulo { color: var(--site-brilho); }
.site-secao.faixa-escura .site-intro, .site-secao.faixa-escura .site-nota { color: rgba(255, 255, 255, .85); }
html:not(.pele-compacta) body.site .site-secao.faixa-escura .site-precos-grupo > h3 { color: #fff; }
.site-secao.faixa-escura .site-precos-grupo > h3 small { color: rgba(255, 255, 255, .78); }
.site-secao.faixa-escura .site-preco, .site-secao.faixa-escura .site-plano { background: #fff; box-shadow: 0 0 30px rgba(0, 0, 0, .35); }
.site-secao.faixa-escura .site-nota a, .site-secao.faixa-escura .site-intro a { color: var(--site-brilho); }
.site-preco { padding-top: 0; overflow: hidden; border-radius: 10px; text-align: center; align-items: center; }
.site-preco .qtd {
  align-self: stretch; margin: 0 -18px 10px; padding: 10px 8px; background: var(--sgi-azul); color: #fff;
  text-transform: uppercase; letter-spacing: .05em; font-weight: 800;
}
.site-preco.destaque .qtd { background: var(--sgi-azul-fundo); }
.site-preco .economia { align-self: center; }
.site-plano { text-align: center; border-radius: 12px; overflow: hidden; }
.site-plano .nome { margin: -26px -26px 14px; padding: 14px; background: var(--sgi-azul); color: #fff; }
.site-plano.anual .nome { background: var(--sgi-azul-fundo); }
.site-secao.faixa-escura .site-bonus { background: rgba(255, 255, 255, .1); color: #fff; box-shadow: inset 0 0 0 1px rgba(255, 255, 255, .25); }
@media (max-width: 640px) { .site-preco .qtd { margin: 0 -14px 10px; } }

/* perguntas frequentes: sanfona com a barra clara e o marcador da cor da marca, em duas colunas no computador */
.site-faq { max-width: none; align-items: start; }
@media (min-width: 861px) { .site-faq { grid-template-columns: 1fr 1fr; } }
.site-faq details, .site-secao.branca .site-faq details { background: #fff; border: 1px solid #e3e8ef; border-radius: 8px; box-shadow: none; overflow: hidden; }
.site-faq summary { background: #f7f9fc; border-left: 4px solid var(--sgi-azul); font-size: 15px; }
.site-faq details[open] summary { background: var(--sgi-azul); color: #fff; }
.site-faq details[open] summary::after { border-color: #fff; }
.site-faq details p { padding-top: 14px; }

/* vozes: cada locutor num painel da cor da marca, as amostras em linhas brancas */
.site-voz { background: linear-gradient(160deg, var(--sgi-azul), var(--sgi-azul-fundo)); color: #fff; border-radius: 10px; box-shadow: 0 0 30px rgba(6, 23, 51, .18); }
html:not(.pele-compacta) body.site .site-voz h3 { color: #fff; }
.site-voz p, .site-voz .estilos { color: rgba(255, 255, 255, .9); }
.site-voz-inicial { background: #fff; color: var(--sgi-azul-fundo); box-shadow: 0 0 0 3px rgba(255, 255, 255, .35); }
.site-amostras li { padding: 8px 10px; border-radius: 8px; background: #fff; box-shadow: 0 4px 12px -8px rgba(0, 0, 0, .5); }
.site-amostras .estilo { color: var(--sgi-tinta); }
.site-voz .site-botao.cheio { background: #fff; color: var(--sgi-azul-fundo); }
html .site-filtro button[aria-pressed="true"] { background: var(--sgi-azul); border-color: var(--sgi-azul); }

/* chamada final e rodapé no escuro da marca */
.site-chamada { background: linear-gradient(160deg, var(--site-noite-2), var(--site-noite)); }
html:not(.pele-compacta) body.site .site-chamada h2:not(.sr-only) { box-shadow: 0 0 0 4px var(--site-noite), 0 0 0 7px var(--site-brilho); }
footer.site-rodape { background: #040f24; }
.site-rodape-nome { text-transform: uppercase; letter-spacing: .05em; }

/* WhatsApp flutuante com rótulo e pulso (no celular estreito fica só o ícone) */
a.site-whats-flutuante { width: auto; min-width: 58px; padding: 0 18px; gap: 8px; border-radius: 999px; font-weight: 700; font-size: 14px; text-decoration: none; }
a.site-whats-flutuante .rotulo { white-space: nowrap; }
@media (max-width: 520px) { a.site-whats-flutuante { padding: 0; width: 58px; } a.site-whats-flutuante .rotulo { display: none; } }
@media (prefers-reduced-motion: no-preference) {
  a.site-whats-flutuante { animation: siteWhatsPulso 2s ease-in-out infinite; }
  @keyframes siteWhatsPulso {
    0%, 100% { box-shadow: 0 10px 24px -6px rgba(15, 94, 45, .55), 0 0 0 0 rgba(21, 118, 58, .45); }
    50% { box-shadow: 0 10px 24px -6px rgba(15, 94, 45, .55), 0 0 0 10px rgba(21, 118, 58, 0); }
  }
  .site-secao .site-cartao, .site-secao .site-preco, .site-secao .site-plano { animation: siteSobe .6s ease-out both; }
  @keyframes siteSobe { from { opacity: 0; transform: translateY(14px); } }
}

/* ================= D-175: o layout escolhido no protótipo (A, D, G, J, M) ================= */
:root { --site-marinho: #0b1f4d; --site-marinho-2: #13286b; --site-ciano: #5fd3f3; }

/* mais espaço entre as seções e os cartões */
.site-secao { padding: 44px 16px; }
@media (min-width: 861px) { .site-secao { padding: 60px 24px; } }
.site-cartoes, .site-cartoes.tres { gap: 24px; }
.site-cartao { padding: 32px 24px 30px; }

/* Topo com foto (D-175, ajustado na D-180): a mesma estrutura nas 3 páginas (Rádio Indoor: mercado; Produção de Áudio:
   microfone; Vozes: estúdio). A foto ocupa a esquerda e some em azul-marinho; o texto fica à direita, sobre o marinho escuro */
.site-heroi.com-foto { display: flex; flex-direction: column; justify-content: center; min-height: 540px; background: linear-gradient(90deg, #0b1f4d 0%, #081738 60%, #050f29 100%); }
.site-heroi.foto-mercado { --foto: url('/img/site/mercado-corredor.jpg'); --foto-largura: 64%; } /* D-183: Unsplash Y3OTP6FwocA, licença gratuita */
.site-heroi.foto-microfone { --foto: url('/img/site/estudio-microfone.jpg'); }
.site-heroi.foto-estudio { --foto: url('/img/site/estudio-microfone-vermelho.jpg'); --foto-largura: 64%; } /* D-183: Unsplash O6B3_2ylHLo, licença gratuita */
.site-heroi.foto-estudio .site-heroi-foto { background-position: center 45%; }
.site-heroi-foto {
  position: absolute; left: 0; top: 0; bottom: 0; width: var(--foto-largura, 60%);
  background: var(--foto) center / cover no-repeat;
  -webkit-mask-image: linear-gradient(90deg, #000 58%, transparent 100%); mask-image: linear-gradient(90deg, #000 58%, transparent 100%);
}
/* a foto em pé (microfone) não estica: fica na altura do topo, com um fundo leve dela mesma atrás (desfoque fraco) */
.site-heroi.foto-microfone .site-heroi-foto { width: auto; aspect-ratio: 370 / 525; background-position: left center; }
.site-heroi.foto-microfone::before { content: ""; position: absolute; inset: -20px; background: var(--foto) left center / cover no-repeat; filter: blur(10px) brightness(.8); opacity: .55; }
/* o véu: transparente sobre a foto e azul-marinho cada vez mais escuro para a direita (sem o ciano) */
.site-heroi.com-foto::after {
  content: ""; position: absolute; inset: 0;
  background: linear-gradient(90deg, rgba(8, 23, 56, 0) 0%, rgba(8, 23, 56, .12) 30%, rgba(9, 25, 64, .78) 52%, rgba(8, 21, 54, .95) 68%, #050f29 100%);
}
.site-heroi.com-foto .site-heroi-miolo { width: 100%; display: flex; flex-direction: column; align-items: flex-end; text-align: right; }
html:not(.pele-compacta) body.site .site-heroi.com-foto h1 { max-width: 660px; }
.site-heroi.com-foto .site-lead { margin-left: auto; }
.site-heroi.com-foto .site-acoes { justify-content: flex-end; }
.site-heroi.com-foto .site-selo-topo { background: var(--site-ciano); color: var(--site-marinho); box-shadow: none; border-radius: 0 999px 999px 0; font-style: italic; font-weight: 800; }
/* tela média: a foto um pouco mais estreita, o texto não passa por cima do rosto */
@media (min-width: 761px) and (max-width: 1100px) { .site-heroi.foto-mercado, .site-heroi.foto-estudio { --foto-largura: 52%; } }
@media (max-width: 760px) {
  .site-heroi.com-foto { min-height: 520px; }
  .site-heroi-foto, .site-heroi.foto-microfone .site-heroi-foto { width: 100%; aspect-ratio: auto; background-position: center 30%;
    -webkit-mask-image: linear-gradient(180deg, #000 35%, transparent 80%); mask-image: linear-gradient(180deg, #000 35%, transparent 80%); }
  .site-heroi.com-foto::after { background: linear-gradient(180deg, rgba(8, 23, 56, .3) 0%, rgba(9, 25, 64, .88) 45%, #050f29 100%); }
  .site-heroi.com-foto .site-heroi-miolo { align-items: flex-start; text-align: left; padding-top: 150px; }
  .site-heroi.com-foto .site-lead { margin-left: 0; }
  .site-heroi.com-foto .site-acoes { justify-content: flex-start; }
}

/* E (D-177, troca do D): o sobretítulo numa pílula ciano; o título marinho com a 2ª parte (<em>) numa 2ª linha em itálico leve;
   alinhado à esquerda; a chamada final e as seções .site-centro ficam centralizadas */
.site-secao-miolo > .site-sobretitulo {
  display: table; margin: 0 0 12px; padding: 5px 16px; border-radius: 0 999px 999px 0;
  background: var(--site-ciano); color: var(--site-marinho); text-align: left; text-transform: none;
  font-style: italic; font-weight: 800; font-size: 15px; letter-spacing: .02em;
}
.site-secao.faixa-escura .site-secao-miolo > .site-sobretitulo { color: var(--site-marinho); }
.site-secao-miolo > .site-intro { text-align: left; margin-left: 0; margin-right: 0; }
html:not(.pele-compacta) body.site .site-secao h2:not(.sr-only) {
  display: block; max-width: 860px; margin: 0 0 32px; padding: 0; background: none; box-shadow: none;
  color: var(--site-marinho); text-align: left; text-transform: none; text-wrap: balance;
  font-size: clamp(26px, 4vw, 38px); font-weight: 800; line-height: 1.12; letter-spacing: -0.01em;
}
html:not(.pele-compacta) body.site .site-secao h2:not(.sr-only) em { display: block; font-style: italic; font-weight: 300; color: var(--site-marinho-2); letter-spacing: 0; }
html:not(.pele-compacta) body.site .site-secao.faixa-escura h2:not(.sr-only), html:not(.pele-compacta) body.site .site-chamada h2:not(.sr-only) { color: #fff; box-shadow: none; }
html:not(.pele-compacta) body.site .site-secao.faixa-escura h2:not(.sr-only) em, html:not(.pele-compacta) body.site .site-chamada h2:not(.sr-only) em { color: var(--site-ciano); }
.site-centro .site-secao-miolo > .site-sobretitulo, .site-secao-miolo.site-centro > .site-sobretitulo, .site-chamada .site-sobretitulo { margin-left: auto; margin-right: auto; }
html:not(.pele-compacta) body.site .site-secao-miolo.site-centro > h2:not(.sr-only), html:not(.pele-compacta) body.site .site-chamada h2:not(.sr-only) { text-align: center; margin-left: auto; margin-right: auto; }
.site-secao-miolo.site-centro > .site-intro { text-align: center; margin-left: auto; margin-right: auto; }

/* G: os ícones dos cartões em marinho sólido, com o anel */
.site-cartao .site-ico {
  background: var(--site-marinho);
  box-shadow: 0 0 0 5px #fff, 0 0 0 8px var(--site-marinho), 0 12px 24px -10px rgba(11, 31, 77, .6);
}
.site-passos li::before { background: var(--site-marinho); box-shadow: 0 0 0 3px #fff, 0 0 0 5px var(--site-marinho); }

/* J: os cartões de preço iguais (mesmo cabeçalho marinho e mesma altura); o maior pacote ganha só o selo */
.site-precos { padding-top: 14px; gap: 16px; align-items: stretch; }
.site-precos > .site-preco { margin: 0; border-radius: 14px; }
/* o cabeçalho tem sempre a altura de duas linhas ("1 áudio" e "Pacote com 30 áudios" alinham o preço na mesma altura) */
.site-preco .qtd, .site-preco.destaque .qtd { display: flex; align-items: center; justify-content: center; min-height: 3.4em; background: var(--site-marinho-2); }
.site-preco .economia { margin-top: auto; }
.site-preco.destaque, .site-secao.branca .site-preco.destaque, .site-secao.faixa-escura .site-preco.destaque {
  overflow: visible; box-shadow: 0 0 0 3px var(--site-ciano), 0 0 30px rgba(0, 0, 0, .35);
}
.site-preco.destaque .qtd { border-radius: 14px 14px 0 0; }
.site-preco.destaque::before {
  content: "Mais econômico"; position: absolute; top: -13px; left: 50%; transform: translateX(-50%); z-index: 1;
  padding: 4px 12px; border-radius: 999px; background: var(--site-ciano); color: var(--site-marinho);
  font-size: 11px; font-weight: 800; letter-spacing: .03em; text-transform: uppercase; white-space: nowrap;
}

/* M: a logo da página inicial solta, com brilho azul (sem a caixa branca e sem o nome embaixo); o resto fica */
.home-logo-caixa { padding: 8px; background: none; box-shadow: none; filter: drop-shadow(0 0 26px rgba(79, 180, 255, .55)); }

/* D-180: cartões das vozes em azul-marinho liso (sem o degradê), mais largos e com mais espaço; o player ocupa a largura */
.site-vozes { gap: 28px; grid-template-columns: repeat(auto-fill, minmax(min(100%, 340px), 1fr)); }
.site-voz { gap: 14px; padding: 24px; background: var(--site-marinho); border-radius: 14px; box-shadow: 0 14px 30px -16px rgba(5, 15, 41, .55); }
.site-voz-inicial { color: var(--site-marinho); }
.site-voz .site-botao.cheio { color: var(--site-marinho); }
.site-voz .site-amostras audio { width: 100%; }

/* D-182: a página inicial com o degradê invertido (o mais escuro em cima, onde fica a logo) e sem a faixa dos serviços */
body.site-home {
  background:
    radial-gradient(800px 460px at 85% 105%, rgba(22, 144, 230, .30), transparent 65%),
    radial-gradient(600px 380px at 0% 75%, rgba(8, 114, 196, .22), transparent 65%),
    linear-gradient(190deg, #030b1d 0%, var(--home-noite) 45%, #0a2550 100%);
  background-attachment: fixed;
}

/* os cartões de preço ocupam a largura toda (as colunas vazias somem) */
.site-precos { grid-template-columns: repeat(auto-fit, minmax(150px, 1fr)); }

/* D-191: etapas em onda (modelo C): a linha sobe e desce em curvas entre os números 01–04 e o texto fica entre elas.
   A lista passa da largura do miolo (até 1.320 px) para o texto usar a lateral e ficar mais baixo; até 900 px vira lista vertical */
.site-onda {
  --linha: #c3d0e4; --c1: #4f86d4; --c2: #2f63b5; --c3: var(--site-marinho-2); --c4: var(--site-marinho);
  --largura: min(1320px, calc(100vw - 48px));
  display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); width: var(--largura);
  margin: 0 calc((100% - var(--largura)) / 2); padding: 0; list-style: none;
}
.site-onda > li { --cor: var(--c4); position: relative; display: flex; flex-direction: column; padding: 86px 28px; text-align: center; }
.site-onda > li:nth-child(1) { --cor: var(--c1); }
.site-onda > li:nth-child(2) { --cor: var(--c2); }
.site-onda > li:nth-child(3) { --cor: var(--c3); }
.site-onda > li:nth-child(odd) { justify-content: flex-start; }
.site-onda > li:nth-child(even) { justify-content: flex-end; }
.onda-linha { position: absolute; left: 17px; right: 20px; height: 3px; background: var(--linha); }
.site-onda > li:first-child .onda-linha { left: 0; }
.site-onda > li:last-child .onda-linha { right: 0; }
.site-onda > li:nth-child(odd) .onda-linha { top: 40px; }
.site-onda > li:nth-child(even) .onda-linha { bottom: 40px; }
/* as curvas entre uma etapa e a seguinte: meia volta de cada lado da divisa */
.site-onda > li:not(:first-child)::before, .site-onda > li:not(:first-child)::after {
  content: ""; position: absolute; box-sizing: border-box; width: 20px; border: 0 solid var(--linha);
}
.site-onda > li:nth-child(even)::before { left: -20px; top: 40px; height: calc(50% - 40px); border-top-width: 3px; border-right-width: 3px; border-top-right-radius: 20px; }
.site-onda > li:nth-child(even)::after { left: -3px; top: 50%; bottom: 40px; border-left-width: 3px; border-bottom-width: 3px; border-bottom-left-radius: 20px; }
.site-onda > li:nth-child(odd)::before { left: -20px; bottom: 40px; height: calc(50% - 40px); border-bottom-width: 3px; border-right-width: 3px; border-bottom-right-radius: 20px; }
.site-onda > li:nth-child(odd)::after { left: -3px; top: 40px; height: calc(50% - 40px); border-top-width: 3px; border-left-width: 3px; border-top-left-radius: 20px; }
.onda-num {
  position: absolute; left: 50%; z-index: 1; display: grid; place-items: center; width: 52px; height: 52px; transform: translateX(-50%);
  border-radius: 50%; background: #fff; color: var(--cor); font-weight: 800; font-size: 16px;
  box-shadow: inset 0 0 0 4px var(--cor), 0 0 0 6px #f3f6fb, 0 10px 20px -10px rgba(11, 31, 77, .6);
}
.site-onda > li:nth-child(odd) .onda-num { top: 15px; }
.site-onda > li:nth-child(even) .onda-num { bottom: 15px; }
.onda-txt small {
  display: inline-flex; align-items: center; gap: 6px; font-size: 12px; font-weight: 700; letter-spacing: .08em;
  text-transform: uppercase; color: var(--sgi-fraco);
}
.onda-txt small .ico, .onda-txt small svg { color: var(--cor); }
.onda-txt h3 { margin: 2px 0 6px; }
.onda-txt p { margin: 0; font-size: 15px; line-height: 1.6; color: var(--sgi-texto); }
@media (max-width: 900px) {
  .site-onda { grid-template-columns: 1fr; gap: 26px; width: auto; margin: 0; }
  .site-onda > li:nth-child(n) { padding: 0 0 0 70px; text-align: left; justify-content: flex-start; }
  .site-onda > li::before, .site-onda > li::after, .onda-linha { display: none; }
  .site-onda > li:nth-child(n) .onda-num { left: 0; top: 0; bottom: auto; transform: none; }
}

/* D-186: a página inicial clara (opção 3): fundo azul bem claro, tudo numa moldura branca arredondada, a logo sem o brilho
   e os 6 cartões no mesmo azul-marinho, com o botão branco */
body.site-home { display: flow-root; background: linear-gradient(180deg, #eaf0fa 0%, #dfe7f5 100%); background-attachment: scroll; }
/* a margem da moldura fica dentro do body (flow-root); o html, que tem o fundo do sistema, pega a cor do topo */
html:has(> body.site-home) { background: #eaf0fa; }
main.home { margin: 28px auto; background: #fff; border-radius: 32px; box-shadow: 0 24px 60px -28px rgba(11, 31, 77, .45); padding-top: 34px; }
.home-logo-caixa { filter: drop-shadow(0 8px 18px rgba(11, 31, 77, .18)); }
body.site-home a.home-banner {
  background: linear-gradient(120deg, var(--site-marinho-2) 0%, var(--site-marinho) 60%, #081638 100%); color: #fff;
  box-shadow: 0 14px 28px -16px rgba(11, 31, 77, .7);
}
body.site-home a.home-banner small { color: rgba(255, 255, 255, .88); }
body.site-home a.home-banner .home-pilula { background: #fff; color: var(--site-marinho); box-shadow: none; }
body.site-home a.home-banner.sem-link .home-pilula { background: rgba(255, 255, 255, .2); color: #fff; box-shadow: inset 0 0 0 1px rgba(255, 255, 255, .45); }
.home-rodape { color: #4a5872; }
@media (max-width: 640px) {
  main.home { margin: 12px; border-radius: 24px; padding-top: 24px; }
}

/* D-190: botão cheio no padrão azul-marinho; nas faixas escuras (fundo marinho) segue o azul, para não sumir */
.site-botao.cheio { background: var(--site-marinho); }
.site-botao.cheio:hover { background: var(--site-marinho-2); }
.faixa-escura .site-botao.cheio { background: var(--sgi-azul); }
.faixa-escura .site-botao.cheio:hover { background: var(--sgi-azul-fundo); }

/* D-193: o rodapé numa faixa só (sem os links das páginas, que o menu de cima já tem): a marca e a frase à esquerda,
   o contato (WhatsApp e redes, quando houver) e o © à direita; no celular um embaixo do outro */
.site-rodape-fim {
  display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 10px 32px;
  padding: 22px 24px; border-top: 0;
}
.site-rodape-marca { display: flex; flex-wrap: wrap; align-items: baseline; gap: 2px 14px; }
.site-rodape .site-rodape-marca p, .site-rodape p.site-rodape-copia { margin: 0; }
.site-rodape-marca .site-rodape-nome { font-size: 15px; }
.site-rodape-marca p + p { font-size: 13.5px; }
.site-rodape .site-rodape-contato, .site-rodape .site-rodape-contato .site-redes { flex-direction: row; flex-wrap: wrap; gap: 4px 18px; }
.site-rodape-copia { margin-left: auto; font-size: 13px; color: rgba(255, 255, 255, .62); }
@media (max-width: 760px) {
  .site-rodape-fim { flex-direction: column; align-items: flex-start; padding: 20px 16px 24px; }
  .site-rodape-copia { margin-left: 0; }
}

/* D-194: topo com foto também no Pedir Áudio (a mesma estrutura das outras 3 páginas) */
.site-heroi.foto-pedir { --foto: url('/img/site/pedir-celular-estudio.jpg'); --foto-largura: 64%; } /* Unsplash kMw7VdjCzC8 (Flipsnack), licença gratuita */
@media (min-width: 761px) and (max-width: 1100px) { .site-heroi.foto-pedir { --foto-largura: 52%; } }

/* D-196: o cartão do site na página inicial, largo (as duas colunas), com as 4 funções em pílulas brancas e as duas
   ilustrações (rádio e microfone) à direita; no celular as pílulas quebram em duas por linha */
.home-links > li.home-site { grid-column: 1 / -1; }
.home-banner.home-site-cartao {
  position: relative; isolation: isolate; overflow: hidden;
  display: grid; grid-template-columns: minmax(0, 1fr) clamp(150px, 34%, 340px); align-items: center;
  min-height: 170px; padding: 24px 0 24px 24px; border-radius: 22px; color: #fff;
  background: linear-gradient(120deg, var(--site-marinho-2) 0%, var(--site-marinho) 60%, #081638 100%);
  box-shadow: 0 14px 28px -16px rgba(11, 31, 77, .7);
}
.home-banner.home-site-cartao::before {
  content: ''; position: absolute; inset: 0; z-index: -1;
  background: radial-gradient(320px 180px at 86% 50%, rgba(255, 255, 255, .2), transparent 70%);
}
.home-site-cartao small { color: rgba(255, 255, 255, .88); max-width: 52ch; }
.home-site-links { display: flex; flex-wrap: wrap; gap: 8px 10px; margin: 8px 0 0; padding: 0; list-style: none; }
.home-site-links a {
  display: inline-flex; align-items: center; gap: 7px; min-height: 38px; padding: 0 16px; border-radius: 999px;
  background: #fff; color: var(--site-marinho); font-size: 13.5px; font-weight: 700; text-decoration: none; white-space: nowrap;
  box-shadow: 0 6px 14px -8px rgba(0, 0, 0, .55); transition: transform .15s, box-shadow .15s;
}
.home-site-links a:hover { transform: translateY(-2px); box-shadow: 0 10px 18px -10px rgba(0, 0, 0, .6); }
.home-site-links a:focus-visible { outline: 3px solid #fff; outline-offset: 3px; }
.home-site-artes { display: flex; align-items: center; justify-content: flex-end; padding-right: 8px; }
.home-site-artes .home-arte { width: 50%; margin: 0 -4%; }
@media (max-width: 759px) {
  .home-banner.home-site-cartao { grid-template-columns: minmax(0, 1fr); padding: 22px 18px; }
  .home-site-artes { position: absolute; right: 0; top: 6px; width: 132px; opacity: .9; z-index: -1; }
  .home-site-cartao strong { max-width: 62%; }
  .home-site-links li { flex: 1 1 calc(50% - 10px); }
  .home-site-links a { width: 100%; justify-content: center; padding: 0 10px; font-size: 13px; }
}

/* D-240: depoimentos da página Rádio Indoor */
.site-depoimentos { display: grid; gap: 16px; grid-template-columns: repeat(auto-fit, minmax(min(100%, 280px), 1fr)); }
.site-depoimento { position: relative; margin: 0; padding: 22px 22px 18px; border-radius: 16px; background: #fff; border: 1px solid var(--sgi-linha); display: grid; gap: 14px; align-content: space-between; }
.site-depoimento blockquote { margin: 0; font-size: 16px; line-height: 1.55; color: var(--sgi-texto); }
.site-depoimento blockquote::before { content: "\201C"; display: block; font-size: 40px; line-height: .8; color: var(--sgi-azul); }
.site-depoimento figcaption { display: grid; gap: 2px; font-size: 14px; color: var(--sgi-fraco); }
.site-depoimento figcaption strong { color: var(--sgi-tinta); font-size: 15px; }
.site-depoimento-exemplo { position: absolute; top: 12px; right: 12px; font-size: 11px; font-weight: 700; letter-spacing: .04em; text-transform: uppercase; padding: 2px 8px; border-radius: 999px; background: #fdecc8; color: #7a4b00; }