/*
Theme Name: 7TEC
Theme URI: https://7tec.com.br
Author: 7TEC Automação
Description: Tema do site da 7TEC. Blocos nativos do WordPress, sem construtor de páginas.
Version: 1.9.46
Requires at least: 6.5
Tested up to: 7.1
License: GPLv2 or later
License URI: https://www.gnu.org/licenses/gpl-2.0.html
Text Domain: setetec
*/

/* ---------- base ---------- */
:root{
  --marinho:#1A4066; --carvao:#111C27; --texto:#333; --apagado:#5B6572;
  --borda:#E1E7EF; --claro:#F1F5FA; --escuro:#172636; --noite:#0D1A26;
  --ceu:#6EC1E4; --verde:#0B8A3E; --verde-claro:#25D366; --cinza-card:#627084;
}
body{ font-family:Inter,-apple-system,BlinkMacSystemFont,"Segoe UI",sans-serif; font-size:16px; line-height:1.7; color:var(--texto); background:#fff; }
h1,h2,h3,h4{ color:var(--carvao); margin:0; }
a{ color:var(--marinho); }
img{ max-width:100%; height:auto; }

/* ---------- seções ---------- */
.setetec-secao{ padding:5rem 0; }
.setetec-secao--claro{ background:var(--claro); }
.setetec-secao--curta{ padding:2.5rem 0 2rem; }

/* ---------- hero ---------- */
.setetec-hero{
  background-color:var(--noite);
  background-position:center; background-size:cover; background-repeat:no-repeat;
  padding:5.5rem 0; text-align:center; color:#fff;
}
.setetec-hero h1{ color:#fff; font-size:clamp(2rem,4.4vw,3rem); font-weight:700; line-height:1.14; letter-spacing:-.5px; margin:0 auto; max-width:25ch; }
.setetec-hero .setetec-sub{ color:#C7D6E4; font-size:1.0625rem; line-height:1.7; max-width:70ch; margin:1.15rem auto 0; }
.setetec-hero .setetec-nota{ color:#93A9BF; font-size:.9375rem; line-height:1.6; max-width:82ch; margin:1.5rem auto 0; }
.setetec-hero .setetec-sobrancelha{ color:#9FC0DC; text-align:center; }

/* ---------- sobrancelha ---------- */
.setetec-sobrancelha{
  font-size:.75rem; font-weight:600; text-transform:uppercase; letter-spacing:1.4px;
  color:var(--apagado); margin:0 0 .5rem;
}

/* ---------- títulos de seção ---------- */
.setetec-h2{ font-size:clamp(1.5rem,2.6vw,1.875rem); font-weight:700; line-height:1.25; letter-spacing:-.3px; margin:0 0 .35rem; }
.setetec-h3{ font-family:Sora,Inter,sans-serif; font-size:1.375rem; font-weight:700; line-height:1.15; color:#1D2530; margin:0 0 .4rem; }

/* ---------- colunas com divisor (padrão da home) ---------- */
.setetec-colunas{ display:grid; gap:0; grid-template-columns:repeat(3,1fr); }
.setetec-colunas > *{ padding:0 2rem; border-left:1px solid var(--borda); }
.setetec-colunas > *:first-child{ padding-left:0; border-left:0; }
.setetec-colunas p{ color:var(--cinza-card); font-size:.9375rem; line-height:1.55; margin:0; }
.setetec-icone{
  width:52px; height:52px; border-radius:50%; background:var(--marinho);
  display:flex; align-items:center; justify-content:center; margin:0 0 1.15rem;
}
.setetec-icone svg{ width:22px; height:22px; fill:#fff; }
.setetec-icone--verde{ background:var(--verde); }

/* ---------- cartão ---------- */
.setetec-card{ background:#fff; border:1px solid var(--borda); border-radius:12px; padding:1.5rem; }
.setetec-canal .setetec-card + .setetec-card{ margin-top:1.25rem; }
.setetec-card p{ color:var(--cinza-card); font-size:.9375rem; line-height:1.55; margin:0; }
.setetec-card .setetec-linha{ display:flex; gap:1rem; align-items:flex-start; }

/* ---------- botão ---------- */
.setetec-botao{
  display:inline-flex; align-items:center; gap:.5rem;
  background:var(--marinho); color:#fff; text-decoration:none;
  font-size:.9375rem; font-weight:700; padding:.8rem 1.5rem; border-radius:150px;
  border:0; cursor:pointer; transition:background .15s;
}
.setetec-botao:hover{ background:#153454; color:#fff; }
.setetec-botao--verde{ background:var(--verde); }
.setetec-botao--verde:hover{ background:var(--verde-claro); color:#fff; }
.setetec-botao--largo{ width:100%; justify-content:center; }
.setetec-botao svg{ width:18px; height:18px; fill:currentColor; }

/* ---------- destaque com foto ---------- */
.setetec-destaque{
  position:relative; overflow:hidden; border-radius:14px;
  background-position:center; background-size:cover; padding:3.5rem 2.4rem; color:#fff;
}
.setetec-destaque::before{ content:""; position:absolute; inset:0; background:#0C1722; opacity:.55; }
.setetec-destaque > *{ position:relative; }
.setetec-destaque .setetec-sobrancelha{ color:var(--ceu); font-size:.75rem; font-weight:600; line-height:1.6; }
.setetec-destaque p{ font-family:Sora,Inter,sans-serif; font-size:1.375rem; font-weight:600; line-height:1.45; color:#fff; margin:0; }

/* ---------- dica ---------- */
.setetec-dica{
  background:var(--claro); border-left:4px solid var(--ceu); border-radius:0 10px 10px 0;
  padding:1.25rem 1.5rem; color:#28374A; font-size:1rem; line-height:1.65; margin:1.75rem 0 0;
}

/* ---------- selo do SGA ---------- */
.setetec-selo{ display:flex; align-items:center; gap:1.15rem; flex-wrap:wrap; margin-top:1.15rem; }
.setetec-selo a{ display:inline-block; background:#fff; border:1px solid #D8E3F0; border-radius:10px; padding:.75rem 1.15rem; line-height:0; }
.setetec-selo img{ width:132px; }
.setetec-selo p{ color:var(--apagado); font-size:.875rem; line-height:1.6; margin:0; max-width:52ch; }

/* ---------- assinatura ---------- */
.setetec-assinatura{ font-size:1.25rem; font-weight:700; color:var(--carvao); text-align:center; margin:1.25rem 0 0; }
.setetec-procedencia{ font-size:.84rem; line-height:1.65; color:#8A94A3; text-align:center; max-width:100ch; margin:0 auto; }

/* ---------- formulário ---------- */
.setetec-form{ display:grid; gap:.85rem; }
.setetec-form .setetec-par{ display:grid; grid-template-columns:1fr 1fr; gap:.85rem; }
.setetec-form input, .setetec-form select, .setetec-form textarea{
  width:100%; max-width:100%; box-sizing:border-box;
  font-family:inherit; font-size:.9375rem; color:var(--texto);
  padding:.8rem .95rem; border:1px solid var(--borda); border-radius:8px; background:#fff;
}
/* no celular os dois campos lado a lado viram um embaixo do outro */
@media (max-width:640px){
  .setetec-form .setetec-par{ grid-template-columns:1fr; }
}
.setetec-form textarea{ min-height:118px; resize:vertical; }
.setetec-form input:focus, .setetec-form select:focus, .setetec-form textarea:focus{
  outline:2px solid var(--ceu); outline-offset:1px; border-color:var(--ceu);
}
.setetec-form .setetec-lgpd{ display:flex; gap:.6rem; align-items:flex-start; font-size:.84rem; line-height:1.5; color:var(--apagado); }
.setetec-form .setetec-lgpd input{ width:auto; margin-top:.2rem; }
.setetec-aviso{ font-size:.9rem; padding:.8rem 1rem; border-radius:8px; display:none; }
.setetec-aviso--erro{ background:#FDECEC; color:#9B1C1C; }
.setetec-aviso--visivel{ display:block; }

/* ---------- cabeçalho ----------
 * O menu acompanha a rolagem. Quem está no meio de uma página de segmento
 * não precisa voltar ao topo só para ir para a próxima. */
.setetec-topo{
  background:var(--noite);
  box-shadow:0 6px 18px rgba(9,17,26,.28);
}
/* O grude fica no invólucro que o WordPress cria para a parte de tema, e não
 * no <header>: um elemento sticky só gruda dentro da caixa do pai, e o pai do
 * header tem exatamente a altura dele — ali o menu sairia de vista na hora. */
.setetec-topo-fixo{ position:sticky; top:0; z-index:90; }
/* Com a barra do WordPress aberta (só quem está logado vê), o cabeçalho
 * encosta embaixo dela em vez de ficar escondido atrás. Abaixo de 783px a
 * barra rola junto com a página, então ali o topo volta a ser zero. */
@media (min-width:783px){ .admin-bar .setetec-topo-fixo{ top:32px; } }
.setetec-topo .wp-block-group{ align-items:center; }
.setetec-topo a{ color:#E6EEF6; text-decoration:none; font-size:.9375rem; }
.setetec-topo a:hover{ color:#fff; }
.setetec-topo .wp-block-site-title a{ font-size:1.25rem; font-weight:700; color:#fff; }

/* ---------- rodapé ----------
 * Medidas tiradas do rodapé atual do site, uma a uma: tamanho de fonte,
 * cor, espaço entre os itens e as linhas finas entre os contatos. */
.setetec-rodape{
  background-color:var(--noite);
  background-image:linear-gradient(rgba(138,150,168,.15),rgba(138,150,168,.15)), url(/wp-content/uploads/2026/01/slice_68-2-scaled-1.webp);
  background-size:cover; background-position:50% 50%;
  color:#8A96A8; padding:4.5rem 0 2.5rem;
}
.setetec-rodape a{ color:#8A96A8; text-decoration:none; }
.setetec-rodape a:hover{ color:#fff; }

.setetec-rodape-grid{ display:grid; grid-template-columns:1.55fr 1fr 1fr 1fr; gap:2.5rem; align-items:start; }

.setetec-rodape .wp-block-site-logo img{ max-height:62px; width:auto; }
.setetec-rodape-desc{ font-size:1rem; line-height:24px; color:#9BABBC; max-width:400px; margin:1.4rem 0 2rem; }

.setetec-rodape-contato{ list-style:none; margin:0; padding:0; max-width:230px; }
.setetec-rodape-contato li{ display:flex; align-items:center; gap:.65rem; padding-bottom:7px; margin-bottom:7px; }
.setetec-rodape-contato li + li{ border-top:1px solid rgba(221,221,221,.27); padding-top:7px; }
.setetec-rodape-contato svg{ width:18px; height:18px; flex:0 0 18px; fill:currentColor; }
.setetec-rodape-contato a{ font-size:1rem; }

.setetec-rodape-col h2{ font-size:1.125rem; font-weight:700; color:#F8FAFC; line-height:1.1; margin:0 0 19px; }
.setetec-rodape-col ul{ list-style:none; margin:0; padding:0; }
.setetec-rodape-col li{ padding:9px 0; }
.setetec-rodape-col a{ font-size:1rem; line-height:20px; }

.setetec-rodape-fim{ display:flex; justify-content:space-between; align-items:center; gap:1.5rem; flex-wrap:wrap; margin-top:2.5rem; }
.setetec-rodape-fim p{ font-size:.875rem; line-height:1.5; margin:0; color:#8A96A8; }
.setetec-rodape-fim-links{ display:flex; align-items:center; gap:1.75rem; }
.setetec-rodape-fim-links a{ display:inline-flex; align-items:center; gap:.45rem; font-size:.875rem; }
.setetec-rodape-fim-links svg{ width:15px; height:15px; fill:currentColor; }

/* ---------- duas colunas da página ---------- */
.setetec-duas{ display:grid; grid-template-columns:58% 1fr; gap:2.5rem; align-items:start; }

/* ---------- celular ---------- */
@media (max-width:880px){
  .setetec-duas{ grid-template-columns:1fr; gap:2rem; }
  .setetec-colunas{ grid-template-columns:1fr; gap:1.75rem; }
  .setetec-rodape-grid{ grid-template-columns:1fr 1fr; gap:2rem; }
  .setetec-rodape-marca{ grid-column:1 / -1; }
  .setetec-rodape-fim{ flex-direction:column; align-items:flex-start; gap:1rem; }
  .setetec-colunas > *{ padding:0; border-left:0; }
  .setetec-form .setetec-par{ grid-template-columns:1fr; }
  .setetec-secao{ padding:3.25rem 0; }
  .setetec-hero{ padding:3.5rem 0; }
  .setetec-destaque{ padding:2.25rem 1.4rem; }
  .setetec-destaque p{ font-size:1.125rem; }
}

/* ajustes finos */
.setetec-hero p.setetec-sobrancelha{ font-size:.75rem; }
.setetec-selo img{ display:block; }
.setetec-card .setetec-sobrancelha{ margin-bottom:.9rem; }

/* --- Página obrigado ------------------------------------------ */
.setetec-hero--curto{ padding:4rem 0; }
.setetec-codigo-caixa{ background:var(--claro); border:1px solid var(--borda); border-radius:12px; padding:2rem; text-align:center; }
.setetec-codigo{ font-family:Sora,Inter,sans-serif; font-size:2.25rem; font-weight:700; letter-spacing:2px; color:var(--marinho); margin:.6rem 0 .9rem; }

/* --- Correções depois de ver no site real ---------------------- */

/* O bloco de navegação do WordPress traz cor própria e ganhava do tema. */
.setetec-topo .wp-block-navigation,
.setetec-topo .wp-block-navigation a,
.setetec-topo .wp-block-navigation a:visited,
.setetec-topo .wp-block-navigation .wp-block-navigation-item__content{ color:#E6EEF6; }
.setetec-topo .wp-block-navigation a:hover,
.setetec-topo .wp-block-navigation .wp-block-navigation-item__content:hover{ color:#fff; }

/* Botão do topo: pílula clara sobre a barra escura. */
.setetec-topo .wp-block-button__link{ background:#fff; color:var(--marinho); font-weight:700; border-radius:150px; padding:.7rem 1.4rem; font-size:.9375rem; }
.setetec-topo .wp-block-button__link:hover{ background:var(--ceu); color:var(--carvao); }
.setetec-topo .wp-block-site-logo img{ display:block; }

/* Duas faixas brancas seguidas somavam 10rem de vazio no meio da página.
 * A regra só vale entre seções de MESMO fundo branco. Faixa de foto e
 * seção escura têm fundo próprio: se elas perdem o padding de cima, o
 * texto encosta na borda da tarja. (16/09) */
.setetec-secao{ padding:4rem 0; }
.setetec-secao:not(.setetec-secao--claro):not(.setetec-faixa-foto):not(.setetec-secao--escura)
 + .setetec-secao:not(.setetec-secao--claro):not(.setetec-faixa-foto):not(.setetec-secao--escura){ padding-top:0; }
.setetec-topo .wp-block-site-logo img{ max-height:46px; width:auto; }

/* ---------- os três canais da Contato ----------
 * A ordem no HTML é a ordem aprovada na curadoria: WhatsApp, Formulário,
 * E-mail. No computador o grid recoloca o formulário à esquerda sem
 * mexer nessa ordem; no celular ela aparece como está escrita. */
.setetec-canais{ display:grid; grid-template-columns:58% 1fr; grid-template-rows:min-content 1fr; gap:2rem 2.5rem; align-items:start; margin-top:2.25rem; }
.setetec-canal--form { grid-column:1; grid-row:1 / span 2; }
.setetec-canal--wpp  { grid-column:2; grid-row:1; }
.setetec-canal--email{ grid-column:2; grid-row:2; align-self:start; }

/* ---------- campos com rótulo visível (como na curadoria) ---------- */
.setetec-campo{ margin-bottom:.85rem; }
.setetec-campo label{ display:block; font-size:.72rem; font-weight:600; letter-spacing:.06em; text-transform:uppercase; color:var(--apagado); margin-bottom:.3rem; }
.setetec-form .setetec-par{ display:grid; grid-template-columns:1fr 1fr; gap:1rem; }
.setetec-form .setetec-par .setetec-campo{ margin-bottom:.85rem; }

/* ---------- assinatura no rodapé ---------- */
.setetec-rodape-lockup{ font-family:Sora,Inter,sans-serif; font-weight:700; font-size:1.0625rem; color:#fff; margin:2.5rem 0 0; }
.setetec-rodape-lockup + .setetec-rodape-fim{ margin-top:1.25rem; }

@media (max-width:880px){
  .setetec-canais{ grid-template-columns:1fr; }
  .setetec-canal--wpp,
  .setetec-canal--form,
  .setetec-canal--email{ grid-column:1; grid-row:auto; }
}

/* ================================================================
 * HOME — componentes
 * Cada bloco abaixo existe porque a curadoria pediu uma forma
 * específica na página. Nada aqui é enfeite.
 * ================================================================ */

/* ---------- hero em duas colunas: fala + registro ---------- */
.setetec-hero--home{ text-align:left; }
.setetec-hero--home .setetec-hero-grid{ display:grid; grid-template-columns:1.15fr 1fr; gap:3rem; align-items:center; max-width:1280px; margin:0 auto; }
.setetec-hero--home h1{ text-align:left; max-width:26ch; margin-left:0; font-size:clamp(2rem,4vw,2.9rem); }
.setetec-hero--home .setetec-sub{ text-align:left; margin-left:0; max-width:54ch; }
.setetec-hero--home .setetec-sobrancelha{ color:var(--ceu); }
.setetec-cta-linha{ display:flex; align-items:center; gap:1.5rem; flex-wrap:wrap; margin:1.75rem 0 1rem; }
.setetec-cta-linha .setetec-zap-link{ color:#fff; font-weight:600; text-decoration:underline; text-underline-offset:4px; }

/* ---------- o registro conciliado (figura do hero) ---------- */
.setetec-ledger{ background:#fff; color:var(--texto); border-radius:14px; padding:1.4rem 1.5rem; box-shadow:0 24px 60px rgba(0,0,0,.35); margin:0; }
.setetec-ledger-topo{ display:flex; justify-content:space-between; font-size:.7rem; font-weight:700; letter-spacing:.08em; color:var(--apagado); padding-bottom:.9rem; border-bottom:1px solid var(--borda); }
.setetec-ledger-linha{ display:flex; justify-content:space-between; align-items:baseline; gap:1rem; padding:.85rem 0; border-bottom:1px solid var(--borda); font-size:.95rem; }
.setetec-ledger-linha b{ font-family:Sora,Inter,sans-serif; font-size:1.15rem; font-weight:700; color:var(--marinho); white-space:nowrap; }
.setetec-ledger-pe{ display:flex; justify-content:space-between; align-items:center; gap:1rem; flex-wrap:wrap; padding-top:.9rem; font-size:.78rem; color:var(--apagado); }
.setetec-ledger-ok{ background:#E7F6ED; color:var(--verde); font-weight:700; border-radius:100px; padding:.25rem .7rem; white-space:nowrap; }

/* ---------- faixa de citação ---------- */
.setetec-faixa{ background:var(--claro); border-top:1px solid var(--borda); border-bottom:1px solid var(--borda); padding:2.5rem 0; }
.setetec-faixa blockquote{ margin:0 auto; max-width:60ch; text-align:center; font-family:Sora,Inter,sans-serif; font-size:clamp(1.05rem,2vw,1.35rem); font-weight:600; color:var(--carvao); line-height:1.5; }
.setetec-faixa cite{ display:block; margin-top:1rem; font-family:Inter,sans-serif; font-size:.8rem; font-weight:400; font-style:normal; color:var(--apagado); }

/* ---------- citação dentro do texto ---------- */
.setetec-citacao{ border-left:3px solid var(--ceu); padding-left:1.25rem; margin:1.75rem 0; font-family:Sora,Inter,sans-serif; font-size:1.0625rem; font-weight:600; color:#1D2530; }
.setetec-citacao cite,.setetec-atrib{ display:block; margin-top:.6rem; font-family:Inter,sans-serif; font-size:.8rem; font-weight:400; font-style:normal; color:var(--apagado); }

/* ---------- a hora, o custo ---------- */
.setetec-hora{ display:block; font-size:.95rem; color:var(--apagado); margin:.4rem 0 1.25rem; }
.setetec-custo{ font-family:Sora,Inter,sans-serif; font-size:clamp(1.15rem,2.2vw,1.5rem); font-weight:700; color:var(--marinho); margin-top:1rem; }

/* ---------- seção escura ---------- */
.setetec-secao--escura{ background:var(--escuro); color:#C7D5E4; }
.setetec-secao--escura .setetec-h2,
.setetec-secao--escura .setetec-h3{ color:#fff; }
.setetec-secao--escura .setetec-sobrancelha{ color:var(--ceu); }
.setetec-secao--escura .setetec-citacao{ border-left-color:var(--ceu); color:#E6EEF6; }
.setetec-secao--escura .setetec-citacao cite,
.setetec-secao--escura .setetec-atrib{ color:#8FA3BA; }
.setetec-tese{ font-family:Sora,Inter,sans-serif; font-size:clamp(1.25rem,2.6vw,1.75rem); font-weight:700; color:#fff; margin:2.5rem 0 1rem; max-width:34ch; }
.setetec-tese mark{ background:none; color:var(--ceu); }
.setetec-apos{ max-width:62ch; color:#A8BACD; }

/* ---------- três colunas com citação ---------- */
.setetec-tres{ display:grid; grid-template-columns:repeat(3,1fr); gap:2rem; margin-top:2.25rem; }

/* ---------- cards do mecanismo ---------- */
.setetec-cards2{ display:grid; grid-template-columns:1fr 1fr; gap:1.5rem; margin-top:2.25rem; }
.setetec-cards2 .setetec-card{ display:flex; flex-direction:column; gap:.35rem; }
.setetec-cards2 blockquote{ margin:0; font-family:Sora,Inter,sans-serif; font-size:1.0625rem; font-weight:600; color:#1D2530; line-height:1.45; }
.setetec-produto{ display:inline-block; align-self:flex-start; margin-top:auto; padding-top:1rem; font-size:.72rem; font-weight:700; letter-spacing:.06em; text-transform:uppercase; color:var(--marinho); }
.setetec-fecho{ font-family:Sora,Inter,sans-serif; font-size:clamp(1.1rem,2.2vw,1.4rem); font-weight:700; color:var(--carvao); margin-top:2.25rem; max-width:44ch; }
.setetec-fecho u{ text-decoration-color:var(--ceu); text-decoration-thickness:3px; text-underline-offset:4px; }

/* ---------- antes e depois ---------- */
.setetec-ab{ display:grid; grid-template-columns:1fr 1fr; gap:1px; background:var(--borda); border:1px solid var(--borda); border-radius:12px; overflow:hidden; margin-top:2rem; max-width:640px; }
.setetec-ab > div{ background:#fff; padding:.9rem 1.25rem; font-size:1rem; }
.setetec-ab .cab{ background:var(--claro); font-size:.72rem; font-weight:700; letter-spacing:.06em; text-transform:uppercase; color:var(--apagado); }
.setetec-ab .antes{ color:var(--apagado); text-decoration:line-through; }
.setetec-ab .depois{ color:var(--marinho); font-weight:600; }

/* ---------- a mensagem que chegou ---------- */
.setetec-zap{ background:#E7F6ED; border-left:4px solid var(--verde); border-radius:0 12px 12px 0; padding:1.25rem 1.5rem; margin-top:1rem; max-width:52ch; }
.setetec-zap p{ font-family:Sora,Inter,sans-serif; font-weight:600; color:#0B3D22; margin:0; }

/* ---------- números ---------- */
.setetec-nums{ display:grid; grid-template-columns:repeat(auto-fit,minmax(240px,1fr)); gap:2rem; margin-top:2.25rem; }
.setetec-nums b{ display:block; font-family:Sora,Inter,sans-serif; font-size:clamp(1.6rem,3.2vw,2.25rem); font-weight:700; color:var(--marinho); line-height:1.1; }
.setetec-nums span{ display:block; margin-top:.5rem; font-size:.95rem; color:var(--apagado); }

/* ---------- casos ---------- */
.setetec-casos{ display:grid; grid-template-columns:1fr 1fr; gap:1.5rem; margin-top:2.25rem; }
.setetec-casos .setetec-card h3{ font-family:Sora,Inter,sans-serif; font-size:1.05rem; font-weight:700; color:#1D2530; margin:0 0 .75rem; }
.setetec-card .setetec-grande,
.setetec-grande{ font-family:Sora,Inter,sans-serif; font-size:clamp(1.6rem,3vw,2.1rem); font-weight:700; color:var(--marinho); margin:0 0 .6rem; }
.setetec-grande small{ font-size:.875rem; font-weight:400; color:var(--apagado); }

/* ---------- o R$ 0,64 ---------- */
.setetec-064{ display:grid; grid-template-columns:auto 1fr; gap:2.5rem; align-items:center; background:var(--claro); border:1px solid var(--borda); border-radius:14px; padding:2rem; margin:2.25rem 0 0; }
.setetec-064-num{ font-family:Sora,Inter,sans-serif; font-size:clamp(2rem,4vw,2.75rem); font-weight:700; color:var(--marinho); line-height:1; white-space:nowrap; }
.setetec-064-num span{ display:block; font-family:Inter,sans-serif; font-size:.85rem; font-weight:400; color:var(--apagado); margin-top:.4rem; }
.setetec-064 .setetec-linha-forte{ font-family:Sora,Inter,sans-serif; font-weight:600; color:#1D2530; margin-top:1rem; }

/* ---------- depoimentos ---------- */
.setetec-depo{ display:grid; grid-template-columns:repeat(auto-fit,minmax(280px,1fr)); gap:1.5rem; margin-top:2.25rem; }
.setetec-depo .setetec-card{ display:flex; flex-direction:column; }
.setetec-depo .setetec-card .setetec-quem{ margin-top:auto; padding-top:1rem; }
.setetec-depo .setetec-card p:first-child{ font-family:Sora,Inter,sans-serif; font-size:1rem; font-weight:600; color:#1D2530; line-height:1.5; }
.setetec-card .setetec-quem,
.setetec-quem{ margin-top:1rem; font-weight:700; color:var(--marinho); font-size:.95rem; }
.setetec-card .setetec-quem span,
.setetec-quem span{ display:block; font-weight:400; font-size:.82rem; color:var(--apagado); margin-top:.15rem; }

/* ---------- segmentos ---------- */
.setetec-segmentos{ display:grid; grid-template-columns:repeat(4,1fr); gap:1.25rem; margin-top:2.25rem; }
.setetec-segmentos .setetec-card{ display:flex; flex-direction:column; }
.setetec-segmentos h3{ font-family:Sora,Inter,sans-serif; font-size:1.05rem; font-weight:700; color:#1D2530; margin:0 0 .75rem; }
.setetec-segmentos blockquote{ margin:0 0 .9rem; font-size:.95rem; font-weight:600; color:#33414F; }
.setetec-segmentos > .setetec-card > a:last-child{ margin-top:auto; padding-top:1rem; font-weight:700; color:var(--marinho); text-decoration:none; }
.setetec-segmentos > .setetec-card > a:last-child:hover{ text-decoration:underline; }

/* ---------- trilha aguda e CTA final ---------- */
.setetec-duplo{ display:grid; grid-template-columns:1.3fr 1fr; gap:3rem; align-items:start; }
.setetec-triade{ font-family:Sora,Inter,sans-serif; font-size:clamp(1.05rem,2.2vw,1.35rem); font-weight:700; color:var(--marinho); margin-top:1.5rem; }
.setetec-cadencia .menor{ color:var(--apagado); margin-bottom:.4rem; }
.setetec-cadencia .maior{ font-family:Sora,Inter,sans-serif; font-size:clamp(1.25rem,2.6vw,1.75rem); font-weight:700; color:var(--carvao); }
.setetec-logos{ display:flex; align-items:center; gap:2.5rem; flex-wrap:wrap; margin-top:2.5rem; padding-top:2rem; border-top:1px solid var(--borda); }
/* Dois destes logos vieram com fundo cinza chapado em vez de transparente;
 * o multiply apaga esse fundo contra o branco da seção. */
.setetec-logos img{ height:34px; width:auto; opacity:.8; mix-blend-mode:multiply; }
.setetec-logos img:hover{ opacity:1; }
.setetec-preq{ font-family:Sora,Inter,sans-serif; font-size:1.0625rem; font-weight:600; color:#E6EEF6; margin-bottom:1.5rem; }

/* ---------- celular ---------- */
@media (max-width:880px){
  .setetec-hero--home .setetec-hero-grid{ grid-template-columns:1fr; gap:2rem; }
  .setetec-tres,
  .setetec-cards2,
  .setetec-casos,
  .setetec-depo,
  .setetec-segmentos,
  .setetec-duplo{ grid-template-columns:1fr; }
  .setetec-064{ grid-template-columns:1fr; gap:1.25rem; }
  .setetec-tres{ gap:1.75rem; }
}

/* ================================================================
 * FAIXAS FOTOGRÁFICAS — a gramática visual do site
 * O site atual alterna faixas de foto em largura total com seções
 * brancas de cards com imagem. Isso não é enfeite: é o que dá
 * respiro entre blocos de texto denso. Reproduzido aqui.
 * ================================================================ */

.setetec-faixa-foto{
  position:relative; overflow:hidden;
  background-color:var(--noite);
  background-position:center; background-size:cover; background-repeat:no-repeat;
  color:#fff;
}
.setetec-faixa-foto::before{
  content:""; position:absolute; inset:0;
  background:linear-gradient(180deg, rgba(9,18,28,.82) 0%, rgba(9,18,28,.72) 55%, rgba(9,18,28,.88) 100%);
}
.setetec-faixa-foto > *{ position:relative; z-index:1; }
.setetec-faixa-foto .setetec-h2,
.setetec-faixa-foto h2,
.setetec-faixa-foto h3{ color:#fff; }
.setetec-faixa-foto p{ color:#C7D5E4; }
.setetec-faixa-foto .setetec-sobrancelha{ color:var(--ceu); }
.setetec-faixa-foto .setetec-citacao{ border-left-color:var(--ceu); color:#E6EEF6; }
.setetec-faixa-foto .setetec-citacao cite,
.setetec-faixa-foto .setetec-atrib{ color:#93A9BF; }
.setetec-faixa-foto--clara::before{ background:linear-gradient(180deg, rgba(9,18,28,.62), rgba(9,18,28,.78)); }

/* ---------- hero da Home: foto de largura total, texto centrado ---------- */
.setetec-hero--foto{ padding:7rem 0 6.5rem; text-align:center; }
.setetec-hero--foto h1{
  color:#fff; font-size:clamp(2.1rem,4.6vw,3.4rem); font-weight:700;
  line-height:1.12; letter-spacing:-.6px; max-width:22ch; margin:0 auto;
  text-shadow:0 2px 24px rgba(0,0,0,.35);
}
.setetec-hero--foto h1 em{ font-style:italic; }
.setetec-hero--foto .setetec-sub{ color:#DCE7F2; font-size:1.125rem; max-width:62ch; margin:1.3rem auto 0; text-shadow:0 1px 14px rgba(0,0,0,.35); }
.setetec-hero--foto .setetec-nota{ color:#AFC3D6; font-size:.9375rem; max-width:70ch; margin:1.6rem auto 0; }
.setetec-hero--foto .setetec-sobrancelha{ color:#9FC0DC; }
.setetec-hero--foto .setetec-cta-linha{ justify-content:center; margin:2rem 0 0; }
.setetec-botao--vidro{
  background:rgba(255,255,255,.12); color:#fff; border:1px solid rgba(255,255,255,.55);
  backdrop-filter:blur(6px);
}
.setetec-botao--vidro:hover{ background:rgba(255,255,255,.22); color:#fff; }

/* ---------- o registro, flutuando sobre a borda do hero ---------- */
.setetec-pos-hero{ padding:0; }
.setetec-pos-hero .setetec-ledger{ max-width:620px; margin:-4.5rem auto 0; }

/* ---------- card com foto no topo ---------- */
.setetec-card--foto{ padding:0; overflow:hidden; display:flex; flex-direction:column; }
.setetec-card--foto .setetec-card-foto{
  display:block; height:170px; background-position:center; background-size:cover; background-color:var(--escuro);
}
.setetec-card--foto .setetec-card-corpo{ padding:1.5rem; display:flex; flex-direction:column; flex:1; gap:.35rem; }

/* ---------- segmentos com foto ---------- */
.setetec-segmentos .setetec-card--foto .setetec-card-foto{ height:150px; }
.setetec-segmentos .setetec-card--foto h3{ margin-top:0; }

/* ---------- logos de parceiro no tamanho do site atual ---------- */
.setetec-logos--grande{ display:grid; grid-template-columns:repeat(4,1fr); gap:2.5rem; align-items:center; justify-items:center; }
.setetec-logos--grande img{ width:100%; max-width:210px; height:auto; mix-blend-mode:multiply; }

/* ---------- estrelas dos depoimentos ---------- */
.setetec-estrelas{ height:20px; width:auto; margin-bottom:.9rem; }

@media (max-width:880px){
  .setetec-hero--foto{ padding:4.5rem 0 4rem; }
  .setetec-pos-hero .setetec-ledger{ margin-top:-2.5rem; }
  .setetec-logos--grande{ grid-template-columns:1fr 1fr; gap:1.75rem; }
}

/* ---------- a cena: foto grande à esquerda, texto à direita ---------- */
.setetec-cena{ display:grid; grid-template-columns:42% 1fr; gap:3rem; align-items:stretch; }
.setetec-cena-foto{ border-radius:14px; background-position:center; background-size:cover; background-color:var(--escuro); min-height:460px; }
.setetec-cena-texto{ align-self:center; }
@media (max-width:880px){
  .setetec-cena{ grid-template-columns:1fr; gap:1.75rem; }
  .setetec-cena-foto{ min-height:240px; }
}

/* ================================================================
 * ESCALA E RITMO — a correção que faltava
 * O site atual respira: títulos de seção grandes e centrados nas
 * faixas, muito espaço vertical, hierarquia clara entre sobrancelha,
 * título e corpo. O que eu tinha feito era denso e chapado.
 * ================================================================ */

/* Títulos de seção com a presença que o site tem hoje. */
.setetec-h2{ font-size:clamp(1.75rem,3.4vw,2.6rem); line-height:1.15; letter-spacing:-.8px; margin:0 0 .5rem; }
.setetec-h3{ font-size:1.25rem; }

/* Sobrancelha um pouco mais respirada. */
.setetec-sobrancelha{ font-size:.78rem; letter-spacing:1.6px; margin:0 0 .7rem; }

/* Mais ar entre as seções. */
.setetec-secao{ padding:5.5rem 0; }
.setetec-faixa-foto.setetec-secao{ padding:6.5rem 0; }

/* Nas faixas de largura total o cabeçalho da seção vem centrado,
 * como em "Como funciona" e "Parcerias" no site de hoje. */
.setetec-faixa-foto > .setetec-sobrancelha,
.setetec-faixa-foto > .setetec-h2{ text-align:center; }
.setetec-faixa-foto > .setetec-h2{ max-width:22ch; margin-left:auto; margin-right:auto; }
.setetec-faixa-foto .setetec-tres{ margin-top:3.5rem; }
.setetec-faixa-foto .setetec-tese{ margin-left:auto; margin-right:auto; text-align:center; max-width:26ch; }
.setetec-faixa-foto .setetec-apos{ margin-left:auto; margin-right:auto; text-align:center; }

/* O bloco de duas colunas das faixas escuras alinha ao centro vertical. */
.setetec-faixa-foto .setetec-duplo{ align-items:center; }

/* Corpo de texto um ponto maior nas seções de leitura. */
.setetec-cena-texto p{ font-size:1.0625rem; }
.setetec-cena-texto p + p{ margin-top:1rem; }

/* Cards do mecanismo: foto maior, respiro interno. */
.setetec-cards2{ gap:1.75rem; margin-top:3rem; }
.setetec-card--foto .setetec-card-foto{ height:200px; }
.setetec-card--foto .setetec-card-corpo{ padding:1.75rem; gap:.5rem; }
.setetec-cards2 blockquote{ font-size:1.125rem; line-height:1.4; }

/* Segmentos: quatro cards com foto, sombra suave para dar profundidade. */
.setetec-segmentos{ gap:1.5rem; margin-top:3rem; }
.setetec-card{ box-shadow:0 1px 2px rgba(17,28,39,.04), 0 8px 24px rgba(17,28,39,.06); }
.setetec-card--foto{ transition:transform .18s ease, box-shadow .18s ease; }
.setetec-card--foto:hover{ transform:translateY(-3px); box-shadow:0 2px 4px rgba(17,28,39,.06), 0 16px 40px rgba(17,28,39,.12); }

/* Números e casos com mais escala. */
.setetec-nums{ margin-top:3rem; gap:3rem; }
.setetec-nums b{ font-size:clamp(2rem,4vw,3rem); }
.setetec-casos{ margin-top:2.5rem; gap:1.75rem; }

/* Depoimentos com mais ar. */
.setetec-depo{ gap:1.5rem; margin-top:3rem; }

/* A faixa de citação, maior. */
.setetec-faixa{ padding:3.5rem 0; }
.setetec-faixa blockquote{ font-size:clamp(1.15rem,2.3vw,1.6rem); }

/* Logos: linha própria, bem espaçada. */
.setetec-logos{ margin-top:3.5rem; padding-top:2.5rem; }

/* ---------- ajustes finais de composição ----------
 * O layout "constrained" do WordPress centraliza todo filho mais
 * estreito que a coluna. Isso jogava parágrafos e fechos para o meio
 * da página, sem alinhamento com o título. Aqui eles voltam à esquerda;
 * nas faixas fotográficas, onde o cabeçalho é centrado, continua centrado. */
.setetec-procedencia{ margin-left:auto !important; margin-right:auto !important; }

/* Hero: deixar a foto viver. O escurecimento anterior matava a imagem. */
.setetec-hero--foto::before{
  background:linear-gradient(180deg, rgba(8,16,26,.42) 0%, rgba(8,16,26,.30) 40%, rgba(8,16,26,.68) 100%);
}
.setetec-hero--foto{ padding:8rem 0 7rem; }
.setetec-hero--foto h1{ max-width:30ch; text-shadow:0 2px 18px rgba(0,0,0,.55), 0 1px 3px rgba(0,0,0,.4); }
.setetec-hero--foto .setetec-sub{ text-shadow:0 1px 12px rgba(0,0,0,.6); }
.setetec-hero--foto .setetec-sobrancelha{ text-shadow:0 1px 8px rgba(0,0,0,.6); }

/* O registro flutuante não precisa de tanto ar embaixo. */
.setetec-pos-hero{ padding:0 0 3rem; }

/* ================================================================
 * HERO — igual ao do site atual
 * Medido no site em produção: Sora peso 100, 64px, sem escurecimento
 * nenhum sobre a foto, sem sombra no texto. O peso 700 que eu tinha
 * usado é o que deixava o título grosso e cansativo de ler.
 * ================================================================ */
.setetec-hero--foto::before{ background:none; }
.setetec-hero--foto h1{
  font-family:Sora,Inter,sans-serif;
  font-weight:100;
  font-size:clamp(2.25rem,4.8vw,4rem);
  line-height:1.1;
  letter-spacing:normal;
  text-shadow:none;
  max-width:26ch;
}
.setetec-hero--foto h1 em{ font-style:italic; font-weight:400; }
.setetec-hero--foto .setetec-sub{ text-shadow:none; font-weight:400; }
.setetec-hero--foto .setetec-sobrancelha{ text-shadow:none; }

/* Depoimentos: as estrelas saem. Ver nota no protocolo. */
.setetec-estrelas{ display:none; }

/* O layout "constrained" do WordPress centraliza com !important;
 * sem isto os parágrafos estreitos flutuam no meio da coluna. */
/* Um bloco sem largura própria ocupa a coluna inteira; a medida de
 * leitura vai no parágrafo de dentro, que então alinha à esquerda
 * naturalmente — sem brigar com o !important do WordPress. */
.setetec-bloco{ display:flow-root; }
.setetec-bloco > p{ margin-left:0; margin-right:0; }

/* Título do hero: nunca partir "três vezes" no meio, e distribuir
 * as linhas em vez de deixar uma órfã. */
.setetec-hero--foto h1{ text-wrap:balance; }
.setetec-hero--foto h1 em{ white-space:nowrap; }

/* As fotos novas do sistema são retrato (celular na mão); o corte
 * precisa pegar a tela, não a mesa. */
.setetec-cards2 .setetec-card--foto .setetec-card-foto{ height:230px; background-position:center 42%; }

/* ================================================================
 * PÁGINAS DE SEGMENTO — acréscimos da Agronegócio (10/09)
 * Mesmo sistema da Home. Só o que a Home não precisou.
 * ================================================================ */

/* Quatro colunas na faixa escura — a Home usa três; o agro tem quatro
   lugares onde o dado mente. */
.setetec-quatro{ display:grid; grid-template-columns:repeat(4,1fr); gap:2rem; margin-top:2.25rem; }
@media (max-width:1080px){ .setetec-quatro{ grid-template-columns:1fr 1fr; gap:2rem 2.5rem; } }
@media (max-width:640px){ .setetec-quatro{ grid-template-columns:1fr; } }

/* Título dentro dos cards do mecanismo. Na Home o card abre pela fala;
   nas páginas de segmento ele abre por um rótulo. */
.setetec-cards2 .setetec-card-corpo h3{
  font-family:Sora,Inter,sans-serif; font-size:.78rem; font-weight:700;
  letter-spacing:.08em; text-transform:uppercase; color:var(--ceu);
  margin:0 0 .35rem;
}

/* Atribuição logo abaixo do H1 do herói, quando o próprio H1 é uma fala. */
.setetec-hero--foto .setetec-atrib--hero{
  display:block; color:#AFC3D6; font-size:.95rem; margin:.9rem auto 0; text-align:center;
}

/* A fala de fecho do herói, centrada como o resto do bloco. */
.setetec-hero--foto .setetec-preq--centro{
  max-width:56ch; margin:2.25rem auto 0; text-align:center;
  padding-top:1.5rem; border-top:1px solid rgba(255,255,255,.18);
}
.setetec-hero--foto .setetec-preq--centro .setetec-atrib{
  display:block; margin-top:.5rem; color:#AFC3D6; font-weight:400; font-size:.9rem;
}

/* Fala de destaque das seções de prova. */
.setetec-qbig{
  font-family:Sora,Inter,sans-serif; font-size:clamp(1.15rem,2.4vw,1.5rem);
  font-weight:600; color:var(--marinho); line-height:1.4;
  border-left:4px solid var(--ceu); padding-left:1.4rem; margin:2.25rem 0 0; max-width:44ch;
}
.setetec-qbig cite{ display:block; margin-top:.7rem; font-style:normal; font-size:.9rem; font-weight:400; color:var(--apagado); }

/* Título dentro do bloco foto+texto, quando não é título de seção. */
.setetec-cena-texto h3.setetec-h3{ margin-top:0; }

/* ---------- submenu do topo (Segmentos) ----------
   'Segmentos' abre a lista ali mesmo; não existe mais página no meio. */
.setetec-topo .wp-block-navigation .wp-block-navigation-submenu__toggle{
  color:#E6EEF6; font-size:1rem; font-weight:500; background:none; border:0;
  padding:0; cursor:pointer; display:flex; align-items:center; gap:.3rem;
}
.setetec-topo .wp-block-navigation .wp-block-navigation-submenu__toggle:hover{ color:#fff; }
.setetec-topo .wp-block-navigation .wp-block-navigation__submenu-container{
  background:#fff; border:1px solid var(--borda); border-radius:12px;
  box-shadow:0 18px 40px rgba(17,28,39,.18); padding:.5rem 0; min-width:250px;
  top:calc(100% + 12px); left:-1rem;
  opacity:0; visibility:hidden; transition:opacity .14s ease;
}
.setetec-topo .wp-block-navigation .wp-block-navigation__submenu-container li{ width:100%; }
/* Abre no passar do mouse e também no clique/teclado — sem depender do
   JavaScript do bloco de navegação do WordPress, que nem sempre carrega. */
.setetec-topo .wp-block-navigation .wp-block-navigation-item.has-child:hover > .wp-block-navigation__submenu-container,
.setetec-topo .wp-block-navigation .wp-block-navigation-item.has-child:focus-within > .wp-block-navigation__submenu-container,
.setetec-topo .wp-block-navigation .wp-block-navigation-item.has-child.is-open > .wp-block-navigation__submenu-container{
  opacity:1; visibility:visible;
}
/* O CSS do próprio WordPress fecha o submenu com height:0 e overflow:hidden.
   Sem desfazer isso, a lista abre com 18px de altura e some. */
.setetec-topo .wp-block-navigation .wp-block-navigation-item.has-child:hover > .wp-block-navigation__submenu-container,
.setetec-topo .wp-block-navigation .wp-block-navigation-item.has-child:focus-within > .wp-block-navigation__submenu-container,
.setetec-topo .wp-block-navigation .wp-block-navigation-item.has-child.is-open > .wp-block-navigation__submenu-container{
  height:auto; width:auto; overflow:visible;
}
/* Uma ponte invisível entre o item e a lista, para o mouse não "cair" no vão. */
.setetec-topo .wp-block-navigation .wp-block-navigation-item.has-child::after{
  content:""; position:absolute; left:0; right:0; top:100%; height:14px;
}
.setetec-topo .wp-block-navigation .wp-block-navigation-item.has-child{ position:relative; }
.setetec-topo .wp-block-navigation .wp-block-navigation__submenu-container li a,
.setetec-topo .wp-block-navigation .wp-block-navigation__submenu-container li a .wp-block-navigation-item__label{
  color:var(--carvao);
}
.setetec-topo .wp-block-navigation .wp-block-navigation__submenu-container li a{
  display:block; padding:.6rem 1.25rem; font-size:.95rem; line-height:1.4; text-decoration:none;
}
.setetec-topo .wp-block-navigation .wp-block-navigation__submenu-container li a:hover,
.setetec-topo .wp-block-navigation .wp-block-navigation__submenu-container li a:hover .wp-block-navigation-item__label{
  background:var(--claro); color:var(--marinho);
}
@media (max-width:900px){
  .setetec-topo .wp-block-navigation .wp-block-navigation__submenu-container{
    position:static; background:none; border:0; box-shadow:none; min-width:0; padding:.25rem 0 .25rem 1rem;
    opacity:1; visibility:visible;
  }
  .setetec-topo .wp-block-navigation__submenu-container li a{ color:#E6EEF6; padding:.45rem 0; }
}

/* ---------- herói de segmento em que o H1 é pergunta, não fala ----------
   A fala do cliente entra logo abaixo do título, sem a linha divisória
   que o herói do agro usa no fecho. */
.setetec-hero--foto .setetec-preq--alto{
  max-width:62ch; margin:1.7rem auto 0; text-align:center;
  border-top:0; padding-top:0;
}
.setetec-hero--foto .setetec-preq--alto .setetec-atrib{
  display:block; margin-top:.5rem; color:#AFC3D6; font-weight:400; font-size:.9rem;
}
/* O remate curto que fecha a fala do herói. */
.setetec-hero--foto .setetec-remate{
  font-family:Sora,Inter,sans-serif; font-size:clamp(1.05rem,2.1vw,1.3rem);
  font-weight:700; color:#fff; max-width:40ch; margin:1.2rem auto 0; text-align:center;
}
.setetec-hero--foto .setetec-remate .setetec-atrib{
  display:block; margin-top:.5rem; color:#AFC3D6; font-weight:400; font-size:.9rem;
}
/* Linha isolada logo depois de uma fala de prova. */
.setetec-linha-isolada{
  font-family:Sora,Inter,sans-serif; font-size:clamp(1rem,1.9vw,1.18rem);
  font-weight:600; color:var(--marinho); margin:1.6rem 0 0; max-width:44ch;
}
/* As falas do herói precisam de sombra: a foto de pátio tem áreas claras. */
.setetec-hero--foto .setetec-preq,
.setetec-hero--foto .setetec-remate,
.setetec-hero--foto .setetec-atrib{ text-shadow:0 1px 12px rgba(0,0,0,.65), 0 1px 3px rgba(0,0,0,.45); }

/* Dentro do .setetec-bloco o layout "constrained" do WordPress não alcança:
   parágrafos e citações voltam a se alinhar pela esquerda, com o título. */
.setetec-bloco > blockquote{ margin-left:0; margin-right:0; }

/* ---------- faixa de foto larga dentro do texto ----------
   Sem legenda de propósito: legenda seria texto novo, e nesta obra
   só entra na página o texto que a curadoria aprovou. */
.setetec-figura{ display:block; margin:2.75rem 0 0; }
.setetec-figura .setetec-figura-img{
  display:block; border-radius:16px; background-size:cover; background-position:center;
  background-color:var(--escuro); height:clamp(200px,24vw,340px);
}
/* Variante --inteira: a foto é de um aparelho, não de uma cena. Cortar o
   equipamento pela metade seria mostrar meio produto, então a caixa segue a
   proporção do próprio arquivo (12:5) e o display aparece inteiro em qualquer
   largura de tela, sem corte de cima nem dos lados. */
.setetec-figura--inteira .setetec-figura-img{ height:auto; aspect-ratio:var(--proporcao,12/5); }

/* Página de produto: a captura de tela sobe e encosta no herói, do mesmo
   jeito que o registro conciliado faz na home. */
.setetec-pos-hero .setetec-figura{ margin:-5rem 0 0; }
.setetec-pos-hero .setetec-figura-img{ box-shadow:0 24px 60px rgba(9,17,26,.35); }
@media (max-width:980px){ .setetec-pos-hero .setetec-figura{ margin-top:-2.5rem; } }

/* ---------- página formal de missão, visão e valores ----------
   É documento, não peça de venda: lista de definições, sem foto, para
   quem precisa dela em compliance, licitação ou homologação. */
.setetec-volta{ display:inline-block; font-size:.9375rem; font-weight:600; color:var(--ceu); text-decoration:none; margin:0 0 1.25rem; }
.setetec-volta:hover{ color:#fff; }
.setetec-valores{ margin:1.1rem 0 0; }
.setetec-valores dt{ font-family:Sora,Inter,sans-serif; font-size:1.0625rem; font-weight:700; color:var(--marinho); margin:1.6rem 0 .3rem; }
.setetec-valores dt:first-child{ margin-top:0; }
.setetec-valores dd{ margin:0; color:var(--texto); max-width:70ch; }
.setetec-doc h2{ font-family:Sora,Inter,sans-serif; font-size:1.25rem; font-weight:700; color:var(--carvao); margin:2.75rem 0 .5rem; }
.setetec-doc h2:first-child{ margin-top:0; }
.setetec-doc p{ max-width:70ch; }

/* Nas paradas do "caminho do litro" o card é apertado de propósito; a
   citação que aparece numa delas precisa do seu próprio respiro. */
.setetec-cards2 .setetec-card > blockquote.setetec-citacao{ margin:.9rem 0 .4rem; }

/* Duas falas na mesma faixa de citação precisam de respiro entre elas. */
.setetec-faixa blockquote + blockquote{ margin-top:2rem; padding-top:2rem; border-top:1px solid var(--borda); }

/* ---------- variante de card: título afirmativo depois do rótulo ----------
   A curadoria da Mineração usa uma frase-tese logo abaixo do rótulo do card,
   antes do corpo. Aqui ela ganha peso sem virar outro H. */
.setetec-cards2 .setetec-card-corpo .setetec-card-titulo{
  font-family:Sora,Inter,sans-serif; font-size:1.0625rem; font-weight:700;
  color:var(--carvao); line-height:1.35; margin:0 0 .5rem;
}
.setetec-cards2 .setetec-card-corpo .setetec-card-fecho{
  font-family:Sora,Inter,sans-serif; font-weight:700; color:var(--marinho); margin:.4rem 0 0;
}
/* A citação dentro do card é menor que a do corpo do texto. */
.setetec-cards2 .setetec-card-corpo .setetec-citacao{ font-size:.98rem; margin:1rem 0 0; }

/* ---------- variante de três colunas ----------
   A curadoria de Passageiros lista três origens do erro, não quatro. */
.setetec-tres{ display:grid; grid-template-columns:repeat(3,1fr); gap:2.5rem; margin-top:2.5rem; }
@media (max-width:980px){ .setetec-tres{ grid-template-columns:1fr; gap:2rem; } }

/* ---------- Como funciona: as paradas ganham foto (12/09) ----------
 * Nas páginas de segmento o card abre por um rótulo, e por isso o H3
 * dentro do corpo é estilizado como rótulo. No "caminho do litro" o
 * rótulo é a sobrancelha (PARADA 01) e o H3 continua sendo a tese —
 * sem esta regra ele herdaria o estilo de rótulo e a frase sumiria. */
.setetec-cards2 .setetec-card-corpo h3.setetec-h3{
  font-family:Sora,Inter,sans-serif; font-size:1.0625rem; font-weight:700;
  letter-spacing:normal; text-transform:none; color:var(--carvao);
  line-height:1.35; margin:0 0 .5rem;
}
.setetec-cards2 .setetec-card-corpo .setetec-sobrancelha{ margin-bottom:.6rem; }

/* Figura estreita que precisa ficar no meio da coluna, e não encostada
 * na margem esquerda — o fluxo do WordPress não centraliza sozinho. */
.setetec-figura--centro{ margin-left:auto; margin-right:auto; }

/* Nas paradas da Como funciona a foto é o argumento: a conversa do ÈPTÁ One
 * só cabe inteira — logo, pergunta e resposta — num recorte mais alto. */
.setetec-cards2--alto .setetec-card--foto .setetec-card-foto{ height:320px; }
@media (max-width:980px){ .setetec-cards2--alto .setetec-card--foto .setetec-card-foto{ height:260px; } }

/* A nota do herói do ÈPTÁ MOB anda ao lado do botão, não abaixo: é a
 * procedência do aplicativo, e ali ela não empurra o conteúdo para baixo. */
.setetec-hero .setetec-cta-linha .setetec-nota--lado{
  margin:0; max-width:38ch; text-align:left; font-size:.875rem; line-height:1.5;
}
@media (max-width:640px){
  .setetec-hero .setetec-cta-linha .setetec-nota--lado{ max-width:100%; }
}

/* ---------- chips de integração (Parcerias) ---------- */
.setetec-chips{ display:flex; flex-wrap:wrap; gap:.6rem; list-style:none; margin:2rem 0 0; padding:0; }
.setetec-chips li{ font-size:.9375rem; font-weight:600; color:#1D2530; background:#fff; border:1px solid var(--borda); border-radius:999px; padding:.5rem 1.05rem; }
.setetec-secao--escura .setetec-chips li{ background:rgba(255,255,255,.06); border-color:rgba(255,255,255,.18); color:#E6EEF6; }

/* ---------- destaque e citação no hero sem foto ---------- */
.setetec-hero h1 mark{ background:none; color:var(--ceu); }
.setetec-hero .setetec-contraste{ color:#E6EEF6; font-family:Sora,Inter,sans-serif; font-size:1.0625rem; font-weight:600; line-height:1.55; max-width:58ch; margin:1.4rem auto 0; }
.setetec-hero .setetec-citacao{ border-left-color:var(--ceu); color:#E6EEF6; text-align:left; max-width:56ch; margin:2.4rem auto 0; }
.setetec-hero .setetec-citacao cite{ color:#93A9BF; }

/* ---------- marca do parceiro dentro do card ---------- */
.setetec-marca{ display:flex; align-items:center; justify-content:flex-start; height:46px; margin-bottom:1.1rem; }
.setetec-marca img{ max-height:46px; max-width:160px; width:auto; height:auto; object-fit:contain; }

/* ---------- carrossel de marcas parceiras ---------- */
.setetec-parceiros{
  background:#fff; border:1px solid var(--borda); border-radius:14px;
  padding:2.1rem 0; margin-top:2.5rem; overflow:hidden;
  box-shadow:0 1px 3px rgba(17,28,39,.05);
}
.setetec-parceiros-trilho{ display:flex; width:max-content; animation:setetec-desfile 38s linear infinite; }
/* as pontas somem em vez de cortar a marca no meio */
.setetec-parceiros{
  -webkit-mask-image:linear-gradient(90deg,transparent,#000 5%,#000 95%,transparent);
          mask-image:linear-gradient(90deg,transparent,#000 5%,#000 95%,transparent);
}
.setetec-parceiros:hover .setetec-parceiros-trilho,
.setetec-parceiros:focus-within .setetec-parceiros-trilho{ animation-play-state:paused; }
.setetec-parceiros-fila{
  display:flex; align-items:center; gap:3.75rem;
  list-style:none; margin:0; padding:0 1.875rem;
}
.setetec-parceiros-fila li{ margin:0; display:flex; align-items:center; justify-content:center; }
.setetec-parceiros-fila img{ height:90px; width:auto; max-width:210px; object-fit:contain; display:block; }
@keyframes setetec-desfile{ from{ transform:translateX(0); } to{ transform:translateX(-50%); } }
@media (max-width:640px){
  .setetec-parceiros-fila{ gap:2.5rem; padding:0 1.25rem; }
  .setetec-parceiros-fila img{ height:64px; max-width:150px; }
}
@media (prefers-reduced-motion:reduce){
  .setetec-parceiros-trilho{ animation:none; width:100%; }
  .setetec-parceiros-fila{ flex-wrap:wrap; justify-content:center; row-gap:2rem; width:100%; }
  .setetec-parceiros-fila[aria-hidden="true"]{ display:none; }
}

/* ---------- mapa do Brasil (página da 7TEC) ---------- */
.setetec-mapa{ position:relative; margin:2.6rem auto 0; max-width:760px; }
.setetec-mapa svg{ display:block; width:100%; height:auto; overflow:visible; }
.setetec-mapa-ufs path{
  fill:#1C3550; stroke:#2C4E6E; stroke-width:1.2; stroke-linejoin:round;
  transition:fill .15s ease;
}
.setetec-mapa-ufs path.tem{ fill:#27527A; stroke:#43769F; }
.setetec-mapa-ufs path:hover,
.setetec-mapa-ufs path.ativo{ fill:#35688F; cursor:default; }
.setetec-mapa-ufs path.tem:hover,
.setetec-mapa-ufs path.tem.ativo{ fill:#3E7BA6; }
.setetec-mapa-pontos circle{
  fill:var(--ceu); stroke:#0D1A26; stroke-width:1; cursor:pointer;
  transition:r .12s ease, fill .12s ease;
}
.setetec-mapa-pontos circle:hover,
.setetec-mapa-pontos circle.ativo{ r:8; fill:#A9DCF2; }
.setetec-mapa-casas circle{
  fill:#0D1A26; stroke:#fff; stroke-width:4.5; cursor:pointer;
  transition:r .12s ease;
}
.setetec-mapa-casas circle:hover,
.setetec-mapa-casas circle.ativo{ r:11; }

.setetec-mapa-dica{
  position:absolute; z-index:3; transform:translate(-50%,calc(-100% - 14px));
  background:#fff; color:#1D2530; border-radius:9px; padding:.55rem .8rem;
  font-size:.875rem; line-height:1.35; white-space:nowrap; pointer-events:none;
  box-shadow:0 8px 24px rgba(0,0,0,.28);
}
.setetec-mapa-dica strong{ font-weight:700; }
.setetec-mapa-dica em{ display:block; font-style:normal; font-size:.6875rem; font-weight:700;
  text-transform:uppercase; letter-spacing:1.1px; color:#4E86AD; margin-bottom:.1rem; }
.setetec-mapa-dica span{ color:var(--apagado); font-size:.8125rem; }
.setetec-mapa-dica::after{
  content:""; position:absolute; left:50%; top:100%; transform:translateX(-50%);
  border:6px solid transparent; border-top-color:#fff;
}

.setetec-mapa-legenda{
  display:flex; flex-wrap:wrap; justify-content:center; gap:1.4rem;
  list-style:none; margin:1.6rem 0 0; padding:0;
}
.setetec-mapa-legenda li{
  position:relative; padding-left:1.5rem; font-size:.875rem; color:#C7D6E4;
}
.setetec-mapa-legenda li::before{
  content:""; position:absolute; left:0; top:50%; transform:translateY(-50%);
  width:12px; height:12px; border-radius:50%;
}
.setetec-mapa-legenda .l-casa::before{ background:#0D1A26; border:3px solid #fff; width:14px; height:14px; }
.setetec-mapa-legenda .l-ponto::before{ background:var(--ceu); }
.setetec-mapa-legenda .l-uf::before{ background:#27527A; border:1px solid #43769F; border-radius:3px; }
.setetec-mapa-ajuda{ text-align:center; color:#93A9BF; font-size:.8125rem; margin:.9rem 0 0; }

.setetec-mapa-lista{ max-width:760px; margin:1.8rem auto 0; }
.setetec-mapa-lista summary{
  cursor:pointer; color:#C7D6E4; font-size:.9375rem; font-weight:600;
  padding:.7rem .95rem; border:1px solid rgba(255,255,255,.18); border-radius:9px;
  background:rgba(255,255,255,.05); list-style:none;
}
.setetec-mapa-lista summary::-webkit-details-marker{ display:none; }
.setetec-mapa-lista summary::before{ content:"▸ "; color:var(--ceu); }
.setetec-mapa-lista[open] summary::before{ content:"▾ "; }
.setetec-mapa-lista summary:hover{ background:rgba(255,255,255,.09); }
.setetec-mapa-grade{
  display:grid; grid-template-columns:repeat(auto-fill,minmax(230px,1fr)); gap:1.3rem 1.8rem;
  margin-top:1.4rem;
}
.setetec-mapa-grade h4{
  font-family:Sora,Inter,sans-serif; font-size:.9375rem; font-weight:700; color:#fff; margin:0 0 .25rem;
}
.setetec-mapa-grade h4 span{
  font-size:.75rem; font-weight:700; color:#0D1A26; background:var(--ceu);
  border-radius:999px; padding:.05rem .45rem; margin-left:.3rem;
}
.setetec-mapa-grade p{ font-size:.8125rem; line-height:1.55; color:#A9BED2; margin:0; }

@media (max-width:640px){
  .setetec-mapa-dica{ font-size:.8125rem; padding:.45rem .65rem; }
  .setetec-mapa-legenda{ gap:.9rem 1.2rem; }
  .setetec-mapa-legenda li{ font-size:.8125rem; }
}

/* ================================================================
 * CARROSSEL DOS DEPOIMENTOS (16/09/2026)
 * O site antigo mostrava os depoimentos em carrossel. Na primeira
 * montagem eles viraram grade — e com 5 cartões a grade deixava um
 * cartão órfão na segunda linha, encostado à esquerda. Pior: o ponto
 * em que a grade quebra muda de navegador para navegador, então a
 * página não tinha a mesma cara em todo lugar.
 * Voltou a ser carrossel, sem biblioteca de terceiros: rolagem
 * nativa com encaixe, setas e pontos montados pelo js/carrossel.js.
 * Sem JavaScript, continua sendo uma fila que rola com o dedo.
 * ================================================================ */

.setetec-depo{
  display:block; position:relative;
  grid-template-columns:none;
  margin-top:3rem;
}

.setetec-depo-trilho{
  display:flex; gap:1.5rem;
  overflow-x:auto; overflow-y:hidden;
  scroll-snap-type:x mandatory;
  /* a rolagem suave dos botões é animada pelo js/carrossel.js —
   * o encaixe obrigatório cancela a rolagem suave do navegador */
  scroll-behavior:auto;
  scrollbar-width:none; -ms-overflow-style:none;
  padding:.25rem .25rem 1rem;
  margin:-.25rem -.25rem 0;
  overscroll-behavior-x:contain;
}
.setetec-depo-trilho::-webkit-scrollbar{ display:none; }

/* box-sizing: os cartões do tema são content-box; dentro do carrossel
 * a largura precisa incluir o respiro interno, senão três cartões
 * somam mais que a faixa e o terceiro fica cortado. */
.setetec-depo .setetec-card{
  box-sizing:border-box;
  flex:0 0 calc((100% - 3rem) / 3);
  min-width:0;
  scroll-snap-align:start;
  display:flex; flex-direction:column;
}

/* Quando os cartões cabem todos, o carrossel some e a fila fica
 * centrada — é o que evita o bloco encostado à esquerda nas páginas
 * de segmento, que têm dois depoimentos. */
.setetec-depo--cabe .setetec-depo-trilho{ justify-content:center; flex-wrap:wrap; overflow:visible; }
.setetec-depo--cabe .setetec-card{ flex:0 1 min(380px, calc((100% - 3rem) / 3)); }

/* setas */
.setetec-depo-seta{
  position:absolute; top:calc(50% - 1.5rem); z-index:2;
  width:44px; height:44px; border-radius:50%;
  border:1px solid var(--borda); background:#fff; color:var(--marinho);
  display:flex; align-items:center; justify-content:center;
  cursor:pointer; padding:0;
  box-shadow:0 6px 20px rgba(9,17,26,.16);
  transition:background .15s ease, color .15s ease, opacity .15s ease;
}
.setetec-depo-seta:hover{ background:var(--marinho); color:#fff; }
.setetec-depo-seta:focus-visible{ outline:2px solid var(--ceu); outline-offset:2px; }
.setetec-depo-seta[disabled]{ opacity:.35; cursor:default; }
.setetec-depo-seta[disabled]:hover{ background:#fff; color:var(--marinho); }
.setetec-depo-seta svg{ width:18px; height:18px; display:block; }
.setetec-depo-seta--ant{ left:-22px; }
.setetec-depo-seta--prox{ right:-22px; }

/* pontos */
.setetec-depo-pontos{
  display:flex; justify-content:center; gap:.5rem;
  margin-top:1.25rem; padding:0; list-style:none;
}
.setetec-depo-pontos button{
  width:9px; height:9px; padding:0; border:0; border-radius:50%;
  background:#C3CEDA; cursor:pointer;
  transition:background .15s ease, width .15s ease;
}
.setetec-depo-pontos button[aria-current="true"]{ background:var(--marinho); width:24px; border-radius:6px; }
.setetec-depo-pontos button:focus-visible{ outline:2px solid var(--ceu); outline-offset:3px; }

@media (max-width:1100px){
  .setetec-depo .setetec-card{ flex-basis:calc((100% - 1.5rem) / 2); }
  .setetec-depo-seta--ant{ left:-12px; }
  .setetec-depo-seta--prox{ right:-12px; }
}
@media (max-width:880px){
  .setetec-depo{ grid-template-columns:none; }
  .setetec-depo .setetec-card{ flex-basis:88%; }
  .setetec-depo--cabe .setetec-card{ flex-basis:100%; }
  .setetec-depo-seta{ display:none; }
}

/* Faixa de foto com o mesmo respiro em cima e embaixo. */
.setetec-secao.setetec-faixa-foto{ padding-top:5rem; padding-bottom:5rem; }
@media (max-width:880px){
  .setetec-secao.setetec-faixa-foto{ padding-top:3.5rem; padding-bottom:3.5rem; }
}