/* =========================================================
   Uniformes Uniforte - estilos da landing page
   AIR Midia Digital
   ========================================================= */

/* ---------- 1. Tokens ---------- */
:root{
  --largura-site: 1240px;
  --respiro-lateral: 24px;
  --espaco-secao: 100px;
  --espaco-colunas: 80px;

  --vermelho: #ED1C23;
  --vermelho-escuro: #C4141B;
  --preto: #1A1819;
  --preto-suave: #2A2729;
  --grafite: #4A4750;
  --texto: #34313A;
  --texto-suave: #6B6873;
  --branco: #FFFFFF;
  --gelo: #F5F5F7;
  --borda: #E3E2E8;
  --borda-escura: rgba(255,255,255,.14);

  --raio: 14px;
  --raio-p: 10px;
  --sombra: 0 18px 45px -22px rgba(26,24,25,.38);
  --sombra-forte: 0 28px 70px -28px rgba(26,24,25,.55);
  --transicao: .28s cubic-bezier(.4,0,.2,1);

  --fonte-titulo: 'Poppins', -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;
  --fonte-texto: 'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;

  --altura-header: 88px;
  --altura-faixa-topo: 36px;
  /* altura total do bloco fixo do topo (faixa + cabecalho) */
  --altura-topo: calc(var(--altura-header) + var(--altura-faixa-topo));
}

/* ---------- 2. Reset ---------- */
*,*::before,*::after{ box-sizing:border-box; margin:0; padding:0 }
html{ scroll-behavior:smooth; -webkit-text-size-adjust:100% }
body{
  font-family:var(--fonte-texto);
  font-size:16px; line-height:1.7; color:var(--texto);
  background:var(--branco);
  -webkit-font-smoothing:antialiased; overflow-x:hidden;
}
/* o atributo hidden tem que valer mesmo quando a classe define display
   (ex.: .botao usa inline-flex, que sozinho sobrepoe o hidden do navegador) */
[hidden]{ display:none !important }
img,picture,svg{ display:block; max-width:100% }
img{ height:auto }
a{ color:inherit; text-decoration:none }
button,input,select,textarea{ font:inherit; color:inherit }
button{ background:none; border:0; cursor:pointer }
ul,ol{ list-style:none }
table{ border-collapse:collapse; width:100% }
:focus-visible{ outline:3px solid var(--vermelho); outline-offset:3px; border-radius:4px }

/* ---------- 3. Tipografia ---------- */
h1,h2,h3,h4{ font-family:var(--fonte-titulo); font-weight:700; line-height:1.16; letter-spacing:-.02em; color:var(--preto) }
h1{ font-size:clamp(2.1rem, 1.35rem + 2.4vw, 3.4rem) }
h2{ font-size:clamp(1.75rem, 1.25rem + 1.7vw, 2.6rem) }
h3{ font-size:clamp(1.15rem, 1.05rem + .35vw, 1.4rem) }
h4{ font-size:1.0625rem }
p{ color:var(--texto-suave) }
h1+p,h2+p{ margin-top:18px; font-size:1.0625rem }
strong{ color:var(--texto); font-weight:600 }

/* ---------- 4. Layout ---------- */
.container{
  width:100%;
  max-width:calc(var(--largura-site) + var(--respiro-lateral) * 2);
  margin-inline:auto;
  padding-inline:var(--respiro-lateral);
}
.secao{ padding-block:var(--espaco-secao); position:relative }
.secao--escura{ background:var(--preto); color:rgba(255,255,255,.78) }
.secao--escura h1,.secao--escura h2,.secao--escura h3,.secao--escura h4{ color:#fff }
.secao--escura p{ color:rgba(255,255,255,.72) }
.secao--gelo{ background:var(--gelo) }

.duas-colunas{
  display:grid;
  grid-template-columns:1fr 1fr;
  gap:var(--espaco-colunas);
  align-items:center;
}
.duas-colunas--topo{ align-items:start }

.etiqueta{
  display:inline-flex; align-items:center; gap:10px;
  font-family:var(--fonte-titulo); font-size:.8125rem; font-weight:600;
  letter-spacing:.16em; text-transform:uppercase; color:var(--vermelho);
  margin-bottom:18px;
}
.etiqueta::before{ content:''; width:26px; height:2px; background:var(--vermelho); flex:none }
.secao--escura .etiqueta{ color:#FF6B70 }
.secao--escura .etiqueta::before{ background:#FF6B70 }

.cabecalho-secao{ max-width:660px }
.cabecalho-secao--centro{ margin-inline:auto; text-align:center }
.cabecalho-secao--centro .etiqueta{ justify-content:center }
.cabecalho-secao p{ margin-top:18px; font-size:1.0625rem }

/* ---------- 5. Botoes ---------- */
.botao{
  display:inline-flex; align-items:center; justify-content:center; gap:10px;
  padding:17px 32px; border-radius:var(--raio-p);
  font-family:var(--fonte-titulo); font-size:.9375rem; font-weight:600; line-height:1;
  text-align:center; cursor:pointer; transition:var(--transicao);
  border:2px solid transparent;
}
.botao svg{ flex:none }
.botao--principal{ background:var(--vermelho); color:#fff; box-shadow:0 12px 28px -14px rgba(237,28,35,.85) }
.botao--principal:hover{ background:var(--vermelho-escuro); transform:translateY(-2px); box-shadow:0 18px 34px -14px rgba(237,28,35,.9) }
.botao--escuro{ background:var(--preto); color:#fff }
.botao--escuro:hover{ background:var(--preto-suave); transform:translateY(-2px) }
.botao--contorno{ border-color:var(--borda); color:var(--preto); background:#fff }
.botao--contorno:hover{ border-color:var(--preto); transform:translateY(-2px) }
.botao--claro{ background:#fff; color:var(--preto) }
.botao--claro:hover{ background:var(--gelo); transform:translateY(-2px) }
.botao--bloco{ width:100% }

/* ---------- 6. Cabecalho ---------- */
.topo{
  position:fixed; inset:0 0 auto 0; z-index:100;
  background:rgba(255,255,255,.94); backdrop-filter:blur(12px);
  border-bottom:1px solid transparent; transition:var(--transicao);
}
.topo.rolando{ border-bottom-color:var(--borda); box-shadow:0 6px 24px -18px rgba(26,24,25,.6) }

/* faixa vermelha fixa acima do cabecalho */
.faixa-topo{ background:var(--vermelho); height:var(--altura-faixa-topo); display:grid; place-items:center }
.faixa-topo p{
  margin:0; padding-inline:var(--respiro-lateral); text-align:center; color:#fff;
  font-family:var(--fonte-titulo); font-size:.75rem; font-weight:600; line-height:1.2;
  letter-spacing:.12em; text-transform:uppercase;
}
.topo__interno{ display:flex; align-items:center; justify-content:space-between; gap:32px; height:var(--altura-header) }
.topo__logo img{ height:58px; width:auto; transition:var(--transicao) }
.topo.rolando .topo__logo img{ height:48px }

.menu{ display:flex; align-items:center; gap:34px }
/* o CTA dentro do menu existe so para a versao mobile */
.menu .botao{ display:none }
.menu a{
  font-size:.9375rem; font-weight:500; color:var(--texto); position:relative;
  padding-block:6px; transition:color .2s;
}
.menu a::after{
  content:''; position:absolute; left:0; bottom:0; width:0; height:2px;
  background:var(--vermelho); transition:width .25s;
}
.menu a:hover{ color:var(--preto) }
.menu a:hover::after,.menu a.ativo::after{ width:100% }

.topo__acoes{ display:flex; align-items:center; gap:14px }
.topo__acoes .botao{ padding:14px 24px; font-size:.875rem }

.botao-menu{
  display:none; width:46px; height:46px; border-radius:var(--raio-p);
  border:1px solid var(--borda); align-items:center; justify-content:center; flex-direction:column; gap:5px;
}
.botao-menu span{ display:block; width:20px; height:2px; background:var(--preto); border-radius:2px; transition:var(--transicao) }
.botao-menu[aria-expanded="true"] span:nth-child(1){ transform:translateY(7px) rotate(45deg) }
.botao-menu[aria-expanded="true"] span:nth-child(2){ opacity:0 }
.botao-menu[aria-expanded="true"] span:nth-child(3){ transform:translateY(-7px) rotate(-45deg) }

/* ---------- 7. Hero ---------- */
.hero{ padding-top:calc(var(--altura-topo) + 76px); padding-bottom:0; overflow:hidden }
.hero__grade{
  display:grid; grid-template-columns:1.02fr .98fr;
  gap:var(--espaco-colunas); align-items:center;
}
.hero h1{ margin-bottom:22px }
.hero h1 em{ font-style:normal; color:var(--vermelho) }
.hero__texto{ font-size:1.0625rem; max-width:560px; margin-bottom:34px }
.hero__acoes{ display:flex; flex-wrap:wrap; gap:14px; align-items:center }
.hero__aviso{
  display:flex; align-items:center; gap:10px; margin-top:26px;
  font-size:.9375rem; color:var(--texto-suave);
}
.hero__aviso svg{ color:var(--vermelho); flex:none }

.hero__visual{ position:relative; padding-bottom:20px }
.hero__visual::before{
  content:''; position:absolute; right:-8%; top:-6%; width:78%; height:86%;
  background:var(--gelo); border-radius:var(--raio); z-index:0;
}
.hero__foto{
  position:relative; z-index:1; border-radius:var(--raio); overflow:hidden;
  box-shadow:var(--sombra-forte); width:86%; margin-left:auto;
}
.hero__foto img{ width:100%; aspect-ratio:4/5; object-fit:cover }
.hero__cartao{
  position:absolute; z-index:2; width:170px; border-radius:12px; overflow:hidden;
  box-shadow:var(--sombra-forte); border:5px solid #fff; background:#fff;
}
.hero__cartao img{ width:100%; aspect-ratio:1; object-fit:cover; border-radius:7px }
.hero__cartao--a{ left:0; top:16% }
.hero__cartao--b{ left:6%; bottom:8% }
.hero__selo{
  position:absolute; z-index:3; right:-10px; bottom:14%;
  background:var(--vermelho); color:#fff; padding:16px 22px; border-radius:12px;
  font-family:var(--fonte-titulo); line-height:1.15; box-shadow:var(--sombra-forte);
}
.hero__selo strong{ display:block; font-size:1.5rem; font-weight:700; color:#fff }
.hero__selo span{ font-size:.8125rem; opacity:.9 }

/* numeros do hero */
.indicadores{
  display:grid; grid-template-columns:repeat(4,1fr); gap:0;
  margin-top:76px; border-top:1px solid var(--borda);
}
.indicadores li{ padding:34px 30px; border-right:1px solid var(--borda) }
.indicadores li:first-child{ padding-left:0 }
.indicadores li:last-child{ border-right:0; padding-right:0 }
.indicadores strong{
  display:block; font-family:var(--fonte-titulo); font-size:1.5rem; font-weight:700;
  color:var(--preto); line-height:1.2; margin-bottom:4px;
}
.indicadores span{ font-size:.9375rem; color:var(--texto-suave) }

/* faixa de pedido minimo */
.faixa{ background:var(--vermelho); color:#fff; overflow:hidden; padding-block:15px }
.faixa__pista{ display:flex; width:max-content; animation:desliza 34s linear infinite }
.faixa__grupo{ display:flex; align-items:center; gap:18px; padding-right:18px }
.faixa__grupo span{
  font-family:var(--fonte-titulo); font-size:.875rem; font-weight:600;
  letter-spacing:.1em; text-transform:uppercase; white-space:nowrap;
}
.faixa__grupo i{ width:6px; height:6px; border-radius:50%; background:rgba(255,255,255,.6); flex:none }
@keyframes desliza{ from{ transform:translateX(0) } to{ transform:translateX(-50%) } }
@media (prefers-reduced-motion:reduce){ .faixa__pista{ animation:none } }

/* ---------- 8. Solucao ---------- */
.solucao__foto{ border-radius:var(--raio); overflow:hidden; box-shadow:var(--sombra) }
.solucao__foto img{ width:100%; aspect-ratio:14/13; object-fit:cover }
.beneficios{ margin:32px 0 34px; display:grid; gap:0 }
.beneficios li{ display:flex; gap:18px; padding:22px 0; border-top:1px solid var(--borda) }
.beneficios li:last-child{ border-bottom:1px solid var(--borda) }
.beneficios__icone{
  flex:none; width:46px; height:46px; border-radius:50%;
  background:var(--preto); color:#fff; display:grid; place-items:center;
}
.beneficios h3{ font-size:1.0625rem; margin-bottom:4px }
.beneficios p{ font-size:.9375rem; margin:0 }

/* ---------- 9. Produtos ---------- */
.produtos__cabecalho{
  display:grid; grid-template-columns:1fr 1fr; gap:var(--espaco-colunas);
  align-items:end; margin-bottom:52px;
}
.produtos__aside{ display:flex; flex-direction:column; align-items:flex-end; gap:26px; text-align:right }
.produtos__aside p{ max-width:340px }
.setas{ display:flex; gap:12px }
.seta{
  width:52px; height:52px; border-radius:50%; display:grid; place-items:center;
  background:rgba(255,255,255,.1); color:#fff; transition:var(--transicao);
}
.seta:hover:not(:disabled){ background:#fff; color:var(--preto) }
.seta:disabled{ opacity:.3; cursor:not-allowed }

.carrossel{
  display:grid; grid-auto-flow:column; grid-auto-columns:292px; gap:24px;
  /* overflow-y explicito: sem ele o navegador transforma a faixa em area
     de rolagem vertical e o scroll da pagina fica preso aqui dentro */
  overflow-x:auto; overflow-y:hidden;
  scroll-snap-type:x mandatory; scroll-behavior:smooth;
  padding-bottom:6px; scrollbar-width:none; overscroll-behavior-x:contain;
}
.carrossel::-webkit-scrollbar{ display:none }
.carrossel.arrastando{ scroll-behavior:auto; cursor:grabbing }
.produto{ scroll-snap-align:start }
.produto__foto{ border-radius:var(--raio); overflow:hidden; margin-bottom:22px; background:var(--preto-suave) }
.produto__foto img{
  width:100%; aspect-ratio:4/5; object-fit:cover;
  transition:transform .5s cubic-bezier(.4,0,.2,1);
}
.produto:hover .produto__foto img{ transform:scale(1.05) }
.produto h3{ margin-bottom:8px }
.produto p{ font-size:.9375rem }
.produtos__rodape{ margin-top:52px; display:flex; flex-wrap:wrap; align-items:center; gap:20px }
.produtos__dica{ font-size:.875rem; color:rgba(255,255,255,.5) }

/* ---------- 10. Tabela de medidas ---------- */
.abas{ display:flex; flex-wrap:wrap; gap:10px; margin:36px 0 48px }
.aba{
  padding:13px 24px; border-radius:100px; border:1px solid var(--borda);
  font-family:var(--fonte-titulo); font-size:.9375rem; font-weight:500;
  color:var(--texto-suave); background:#fff; transition:var(--transicao);
}
.aba:hover{ border-color:var(--preto); color:var(--preto) }
.aba[aria-selected="true"]{ background:var(--preto); border-color:var(--preto); color:#fff; font-weight:600 }

.medidas__painel[hidden]{ display:none }
.medidas__foto{ border-radius:var(--raio); overflow:hidden; box-shadow:var(--sombra); background:var(--gelo) }
.medidas__foto img{ width:100%; aspect-ratio:31/35; object-fit:cover }
.medidas__conteudo h3{ margin-bottom:6px }
.medidas__legenda{ font-size:.9375rem; margin-bottom:24px }
.tabela-wrap{ overflow-x:auto; border:1px solid var(--borda); border-radius:var(--raio) }
.tabela-medidas th,.tabela-medidas td{ padding:15px 20px; text-align:left; font-size:.9375rem; white-space:nowrap }
.tabela-medidas thead th{
  background:var(--preto); color:#fff; font-family:var(--fonte-titulo); font-weight:600;
  font-size:.75rem; letter-spacing:.1em; text-transform:uppercase;
}
.tabela-medidas tbody tr+tr{ border-top:1px solid var(--borda) }
.tabela-medidas tbody tr:nth-child(even){ background:var(--gelo) }
.tabela-medidas tbody th{ font-family:var(--fonte-titulo); font-weight:700; color:var(--preto) }
.medidas__nota{ margin-top:20px; font-size:.8125rem; color:var(--texto-suave) }

/* ---------- 11. Segmentos ---------- */
.segmentos{ display:grid; grid-template-columns:repeat(3,1fr); gap:24px; margin-top:52px }
.segmento{
  padding:34px 30px; border:1px solid var(--borda); border-radius:var(--raio);
  background:#fff; transition:var(--transicao);
}
.segmento:hover{ border-color:var(--preto); transform:translateY(-4px); box-shadow:var(--sombra) }
.segmento__icone{
  width:52px; height:52px; border-radius:12px; background:var(--gelo);
  display:grid; place-items:center; color:var(--vermelho); margin-bottom:22px;
}
.segmento h3{ font-size:1.0625rem; margin-bottom:8px }
.segmento p{ font-size:.9375rem; margin:0 }
.segmentos-cta{ margin-top:52px; text-align:center }

/* ---------- 12. Como funciona ---------- */
.passos{ display:grid; grid-template-columns:repeat(4,1fr); gap:24px; margin-top:56px }
.passo{ position:relative; padding-top:30px; border-top:2px solid var(--borda) }
.passo::before{
  content:''; position:absolute; top:-2px; left:0; width:44px; height:2px; background:var(--vermelho);
}
.passo__numero{
  display:block; font-family:var(--fonte-titulo); font-size:2.5rem; font-weight:700;
  color:var(--borda); line-height:1; margin-bottom:16px;
}
.passo h3{ font-size:1.0625rem; margin-bottom:8px }
.passo p{ font-size:.9375rem; margin:0 }
.passos-cta{ margin-top:56px }

/* ---------- 13. Diferenciais ---------- */
.diferenciais__foto{ border-radius:var(--raio); overflow:hidden; box-shadow:var(--sombra-forte) }
.diferenciais__foto img{ width:100%; aspect-ratio:28/29; object-fit:cover }
.lista-diferenciais{ margin:34px 0 36px; display:grid; gap:26px }
.lista-diferenciais li{ display:flex; gap:18px }
.lista-diferenciais__icone{
  flex:none; width:44px; height:44px; border-radius:12px;
  background:rgba(255,255,255,.1); color:#fff; display:grid; place-items:center;
}
.lista-diferenciais h3{ font-size:1.0625rem; margin-bottom:4px }
.lista-diferenciais p{ font-size:.9375rem; margin:0 }

/* ---------- 14. Quem somos ---------- */
.sobre__textos p+p{ margin-top:20px }
.sobre__foto{ border-radius:var(--raio); overflow:hidden; box-shadow:var(--sombra); margin-top:56px }
.sobre__foto img{ width:100%; aspect-ratio:28/13; object-fit:cover }
@media (max-width:720px){ .sobre__foto img{ aspect-ratio:16/11 } }

/* ---------- 15. Clientes / Depoimentos (ocultos ate haver material real) ---------- */
.logos-clientes{
  display:grid; grid-template-columns:repeat(5,1fr); gap:24px; align-items:center;
  margin-top:52px; padding:44px 40px; background:var(--gelo); border-radius:var(--raio);
}
.logos-clientes img{ margin-inline:auto; max-height:52px; width:auto; filter:grayscale(1); opacity:.65 }
.depoimentos{ display:grid; grid-template-columns:repeat(4,1fr); gap:24px; margin-top:52px }
.depoimento{ padding:34px 30px; border:1px solid var(--borda); border-radius:var(--raio) }
.depoimento__aspas{ font-family:var(--fonte-titulo); font-size:2.5rem; color:var(--vermelho); line-height:1; margin-bottom:14px }
.depoimento p{ font-size:.9375rem; margin-bottom:20px }
.depoimento cite{ font-style:normal; font-weight:600; font-size:.875rem; color:var(--preto) }

/* ---------- 16. Formulario ---------- */
.orcamento__aside h2{ margin-bottom:20px }
.orcamento__caixa{
  margin:34px 0; padding:28px 30px; border-radius:var(--raio);
  background:var(--gelo); border-left:4px solid var(--vermelho);
}
.orcamento__caixa h3{ font-size:1rem; margin-bottom:8px }
.orcamento__caixa p{ font-size:.9375rem; margin:0 }
.orcamento__contatos{ display:grid; gap:16px; margin-top:32px }
.orcamento__contatos li{ display:flex; align-items:center; gap:14px; font-size:.9375rem }
.orcamento__contatos svg{ color:var(--vermelho); flex:none }
.orcamento__contatos a:hover{ color:var(--vermelho) }
.orcamento__foto{ border-radius:var(--raio); overflow:hidden; margin-top:36px; box-shadow:var(--sombra) }
.orcamento__foto img{ width:100%; aspect-ratio:10/9; object-fit:cover }

.formulario{
  padding:44px 40px; border-radius:var(--raio); background:#fff;
  border:1px solid var(--borda); box-shadow:var(--sombra);
}
.formulario h3{ margin-bottom:6px }
.formulario__intro{ font-size:.9375rem; margin-bottom:30px }
.campos{ display:grid; grid-template-columns:1fr 1fr; gap:20px }
.campo{ display:flex; flex-direction:column; gap:8px }
.campo--largo{ grid-column:1 / -1 }
.campo label{ font-family:var(--fonte-titulo); font-size:.8125rem; font-weight:600; color:var(--preto) }
.campo label span{ color:var(--vermelho) }
.campo input,.campo select{
  width:100%; padding:15px 16px; border:1px solid var(--borda); border-radius:var(--raio-p);
  background:#fff; font-size:.9375rem; transition:var(--transicao);
}
.campo select{
  appearance:none; cursor:pointer; padding-right:42px;
  background-image:url("data:image/svg+xml;charset=UTF-8,%3Csvg xmlns='http://www.w3.org/2000/svg' width='14' height='14' viewBox='0 0 24 24' fill='none' stroke='%236B6873' stroke-width='2.5' stroke-linecap='round'%3E%3Cpath d='M6 9l6 6 6-6'/%3E%3C/svg%3E");
  background-repeat:no-repeat; background-position:right 16px center;
}
.campo input:hover,.campo select:hover{ border-color:var(--grafite) }
.campo input:focus,.campo select:focus{ outline:0; border-color:var(--vermelho); box-shadow:0 0 0 3px rgba(237,28,35,.12) }
.campo input::placeholder{ color:#A6A4AE }
.campo.invalido input,.campo.invalido select{ border-color:var(--vermelho); background:#FEF5F5 }
.campo__erro{ font-size:.75rem; color:var(--vermelho); display:none }
.campo.invalido .campo__erro{ display:block }
.formulario .botao{ margin-top:28px }
.formulario__aviso{ margin-top:16px; font-size:.75rem; text-align:center; color:var(--texto-suave) }
.formulario__retorno{
  margin-top:18px; padding:14px 18px; border-radius:var(--raio-p);
  background:#EDF9F0; color:#1A6E37; font-size:.875rem; display:none;
}
.formulario__retorno.visivel{ display:block }
/* armadilha anti-robo: some da tela sem usar display:none (robos ignoram esse) */
.armadilha{
  position:absolute !important; left:-9999px !important;
  width:1px; height:1px; overflow:hidden;
}
#form-enviar[aria-busy="true"]{ opacity:.65; pointer-events:none }

/* ---------- 17. FAQ ---------- */
.faq__lista{ margin-top:16px }
.faq__item{ border-bottom:1px solid var(--borda) }
.faq__item:first-child{ border-top:1px solid var(--borda) }
.faq__botao{
  width:100%; display:flex; align-items:center; gap:22px; padding:26px 0; text-align:left;
}
.faq__numero{ font-family:var(--fonte-titulo); font-size:.875rem; font-weight:600; color:var(--texto-suave); flex:none }
.faq__pergunta{ flex:1; font-family:var(--fonte-titulo); font-size:1.0625rem; font-weight:600; color:var(--preto); line-height:1.4 }
.faq__mais{ flex:none; width:26px; height:26px; position:relative; transition:var(--transicao) }
.faq__mais::before,.faq__mais::after{
  content:''; position:absolute; top:50%; left:50%; transform:translate(-50%,-50%);
  background:var(--preto); border-radius:2px; transition:var(--transicao);
}
.faq__mais::before{ width:16px; height:2px }
.faq__mais::after{ width:2px; height:16px }
.faq__botao[aria-expanded="true"] .faq__mais{ background:var(--vermelho); border-radius:50% }
.faq__botao[aria-expanded="true"] .faq__mais::before,
.faq__botao[aria-expanded="true"] .faq__mais::after{ background:#fff }
.faq__botao[aria-expanded="true"] .faq__mais::after{ height:0 }
.faq__resposta{ display:grid; grid-template-rows:0fr; transition:grid-template-rows .32s cubic-bezier(.4,0,.2,1) }
.faq__botao[aria-expanded="true"]+.faq__resposta{ grid-template-rows:1fr }
.faq__resposta>div{ overflow:hidden }
.faq__resposta p{ padding:0 48px 28px; font-size:.9375rem; margin:0 }
.faq__foto{ border-radius:var(--raio); overflow:hidden; box-shadow:var(--sombra); position:sticky; top:calc(var(--altura-topo) + 32px) }
.faq__foto img{ width:100%; aspect-ratio:23/26; object-fit:cover }

/* ---------- 18. CTA final ---------- */
.chamada-final{ position:relative; background:var(--preto); overflow:hidden; text-align:center }
.chamada-final__fundo{ position:absolute; inset:0; opacity:.2 }
.chamada-final__fundo img{ width:100%; height:100%; object-fit:cover }
.chamada-final::after{
  content:''; position:absolute; inset:0;
  background:linear-gradient(180deg,rgba(26,24,25,.72) 0%,rgba(26,24,25,.94) 100%);
}
.chamada-final .container{ position:relative; z-index:2 }
.chamada-final h2{ max-width:760px; margin:0 auto 20px; color:#fff }
.chamada-final p{ max-width:620px; margin:0 auto 36px; font-size:1.0625rem; color:rgba(255,255,255,.78) }
.chamada-final p.chamada-final__tags{
  display:flex; flex-wrap:wrap; justify-content:center; gap:10px 26px;
  max-width:900px; margin:48px auto 0;
  font-size:.8125rem; letter-spacing:.06em; text-transform:uppercase; color:rgba(255,255,255,.5);
}

/* ---------- 19. Rodape ---------- */
.rodape{ background:var(--preto); color:rgba(255,255,255,.62); padding-block:72px 34px; border-top:1px solid var(--borda-escura) }
.rodape__topo{ display:grid; grid-template-columns:1.4fr 1fr 1.2fr; gap:var(--espaco-colunas); padding-bottom:52px }
.rodape__logo img{ height:64px; width:auto; margin-bottom:22px }
.rodape p{ font-size:.9375rem; color:rgba(255,255,255,.62) }
.rodape h4{ font-size:.8125rem; letter-spacing:.14em; text-transform:uppercase; color:#fff; margin-bottom:22px }
.rodape__links{ display:grid; gap:12px; font-size:.9375rem }
.rodape__links a:hover{ color:#fff }
.rodape__contato{ display:grid; gap:14px; font-size:.9375rem }
.rodape__contato li{ display:flex; gap:12px; align-items:flex-start }
.rodape__contato svg{ color:var(--vermelho); flex:none; margin-top:4px }
.rodape__contato a:hover{ color:#fff }
.rodape__social{ display:flex; gap:12px; margin-top:24px }
.rodape__social a{
  width:44px; height:44px; border-radius:50%; border:1px solid var(--borda-escura);
  display:grid; place-items:center; transition:var(--transicao);
}
.rodape__social a:hover{ background:#fff; color:var(--preto); border-color:#fff }
.rodape__base{
  display:flex; flex-wrap:wrap; align-items:center; justify-content:space-between; gap:18px;
  padding-top:30px; border-top:1px solid var(--borda-escura); font-size:.8125rem;
}
.rodape__base a:hover{ color:#fff }
.assinatura{ display:inline-flex; align-items:center; gap:12px }
.assinatura img{ height:26px; width:auto; opacity:.85; transition:opacity .25s }
.assinatura a:hover img{ opacity:1 }

/* ---------- 20. Botao flutuante do WhatsApp ---------- */
.zap{
  position:fixed; right:22px; bottom:22px; z-index:90;
  width:60px; height:60px; border-radius:50%; background:#25D366; color:#fff;
  display:grid; place-items:center; box-shadow:0 14px 30px -10px rgba(37,211,102,.7);
  transition:var(--transicao);
}
.zap:hover{ transform:scale(1.08) }
.zap::after{
  content:''; position:absolute; inset:0; border-radius:50%;
  border:2px solid #25D366; animation:pulso 2.4s ease-out infinite;
}
@keyframes pulso{ 0%{ transform:scale(1); opacity:.7 } 100%{ transform:scale(1.5); opacity:0 } }
@media (prefers-reduced-motion:reduce){ .zap::after{ animation:none } }

/* ---------- 20b. Voltar ao topo (logo acima do WhatsApp) ---------- */
.ao-topo{
  position:fixed; right:22px; bottom:94px; z-index:90;
  width:48px; height:48px; border-radius:50%;
  background:var(--preto); color:#fff; border:1px solid rgba(255,255,255,.16);
  display:grid; place-items:center;
  box-shadow:0 12px 26px -12px rgba(26,24,25,.8);
  opacity:0; visibility:hidden; transform:translateY(10px);
  transition:opacity .28s ease, transform .28s ease, visibility .28s, background .28s;
}
.ao-topo.visivel{ opacity:1; visibility:visible; transform:none }
.ao-topo:hover{ background:var(--vermelho); border-color:var(--vermelho); transform:translateY(-2px) }

/* ---------- 21. Pagina 404 ---------- */
.erro{ min-height:100vh; display:grid; place-items:center; text-align:center; padding:120px 0 80px }
.erro h1{ margin:14px 0 16px }
.erro p{ max-width:520px; margin:0 auto 34px; font-size:1.0625rem }
.erro .erro__codigo{
  font-family:var(--fonte-titulo); font-size:clamp(5rem,14vw,10rem); font-weight:700;
  line-height:1; color:var(--vermelho); letter-spacing:-.04em;
  max-width:none; margin:0;
}
.erro__marca{ color:#1A9E4B; display:grid; place-items:center; margin-bottom:18px }
.erro__acoes{ display:flex; flex-wrap:wrap; gap:14px; justify-content:center }
.erro__atalhos{ margin-top:52px; padding-top:34px; border-top:1px solid var(--borda) }
.erro__atalhos ul{ display:flex; flex-wrap:wrap; gap:10px 28px; justify-content:center; margin-top:16px; font-size:.9375rem }
.erro__atalhos a:hover{ color:var(--vermelho) }

/* ---------- 22. Animacao de entrada ---------- */
.revelar{ opacity:0; transform:translateY(26px); transition:opacity .7s ease, transform .7s cubic-bezier(.4,0,.2,1) }
.revelar.visivel{ opacity:1; transform:none }
@media (prefers-reduced-motion:reduce){
  html{ scroll-behavior:auto }
  .revelar{ opacity:1; transform:none; transition:none }
}

/* ---------- 23. Utilitarios ---------- */
.pular-para-conteudo{
  position:absolute; left:-9999px; top:0; z-index:200;
  background:var(--vermelho); color:#fff; padding:14px 22px; border-radius:0 0 var(--raio-p) 0;
}
.pular-para-conteudo:focus{ left:0 }
.so-leitor{ position:absolute; width:1px; height:1px; overflow:hidden; clip:rect(0 0 0 0); white-space:nowrap }
.oculto-ate-ter-conteudo{ display:none }
body.menu-aberto{ overflow:hidden }

/* =========================================================
   Responsivo
   ========================================================= */
@media (max-width:1180px){
  :root{ --espaco-colunas:56px; --espaco-secao:88px }
  .carrossel{ grid-auto-columns:270px }
  .rodape__topo{ grid-template-columns:1fr 1fr; gap:48px }
  .rodape__marca{ grid-column:1 / -1 }
}

@media (max-width:1024px){
  .menu,.topo__acoes .botao{ display:none }
  .botao-menu{ display:flex }
  .menu{
    position:fixed; inset:var(--altura-topo) 0 auto 0;
    flex-direction:column; align-items:stretch; gap:0;
    background:#fff; padding:20px var(--respiro-lateral) 34px;
    border-bottom:1px solid var(--borda); box-shadow:var(--sombra);
    max-height:calc(100vh - var(--altura-topo)); overflow-y:auto;
    transform:translateY(-12px); opacity:0; pointer-events:none; transition:var(--transicao);
  }
  .menu.aberto{ display:flex; transform:none; opacity:1; pointer-events:auto }
  .menu a{ padding:16px 0; border-bottom:1px solid var(--borda); font-size:1rem }
  .menu a::after{ display:none }
  .menu .botao{ display:inline-flex; margin-top:22px; width:100%; border-bottom:0 }

  .hero__grade,.duas-colunas,.produtos__cabecalho{ grid-template-columns:1fr; gap:48px }
  .hero{ padding-top:calc(var(--altura-topo) + 48px) }
  .hero__texto{ max-width:none }
  .hero__visual{ max-width:520px; margin-inline:auto; width:100% }
  .produtos__aside{ align-items:flex-start; text-align:left }
  .produtos__aside p{ max-width:none }
  .indicadores{ grid-template-columns:repeat(2,1fr); margin-top:56px }
  .indicadores li{ padding:26px 24px }
  .indicadores li:nth-child(odd){ padding-left:0 }
  .indicadores li:nth-child(even){ border-right:0; padding-right:0 }
  .indicadores li:nth-child(n+3){ border-top:1px solid var(--borda) }
  .segmentos,.passos,.depoimentos{ grid-template-columns:repeat(2,1fr) }
  .logos-clientes{ grid-template-columns:repeat(3,1fr); row-gap:34px }
  .faq__foto{ position:static }
  /* no mobile a imagem vem depois do texto */
  .duas-colunas--inverte-mobile>*:first-child{ order:2 }
}

@media (max-width:720px){
  :root{ --espaco-secao:72px; --espaco-colunas:40px; --respiro-lateral:20px; --altura-faixa-topo:34px }
  .hero__cartao{ width:118px; border-width:4px }
  .hero__selo{ right:0; padding:13px 17px }
  .hero__selo strong{ font-size:1.25rem }
  .hero__acoes .botao,.passos-cta .botao,.produtos__rodape .botao{ width:100% }
  .campos{ grid-template-columns:1fr }
  .formulario{ padding:32px 24px }
  .segmentos,.passos,.depoimentos,.rodape__topo{ grid-template-columns:1fr }
  .logos-clientes{ grid-template-columns:repeat(2,1fr); padding:32px 24px }
  .carrossel{ grid-auto-columns:82%; gap:16px }
  .setas{ display:none }
  .faq__resposta p{ padding:0 0 26px }
  .faq__botao{ gap:14px }
  .indicadores{ grid-template-columns:1fr }
  .indicadores li{ padding:22px 0 !important; border-right:0; border-top:1px solid var(--borda) }
  .indicadores li:first-child{ border-top:0 }
  .rodape__base{ flex-direction:column; align-items:flex-start; text-align:left }
  .zap{ width:54px; height:54px; right:16px; bottom:16px }
  .ao-topo{ width:44px; height:44px; right:21px; bottom:80px }
}

@media print{
  .topo,.zap,.faixa,.setas,.botao{ display:none !important }
  body{ color:#000 }
}