/* =========================================================================
   AKROS — Depoimentos (08/10)

   Pedido do dono, com a foto da seção do site da 345: «coloque a seção de
   depoimento dos clientes […] em carrossel. Coloque a opção pro cliente
   deixar o depoimento dele, sem precisar fazer login».

   O cartão é o da 345 (estrelas, citação em itálico, fio, nome e «cargo ·
   empresa») no branco do Falcão sobre o papel #F4F8FA, com a foto do
   cliente (ou as iniciais) ao lado do nome. O carrossel é a fôrma única de
   css/carrossel.css; aqui só a cor das setas e da barra, para o papel.

   Papel claro entre o Radar (azul-noite) e o fecho (grafite). Sem o Radar
   no ar, as dúvidas (também claras) encostariam aqui: o fio de cima devolve
   a divisa entre as duas.

   O formulário é um <dialog> nativo (prende o foco, fecha no Esc): no
   computador, os campos à esquerda e o cartão AO VIVO à direita («assim vai
   aparecer»); no celular, uma folha que sobe do pé da tela.
   Carrega depois de carrossel.css e radar.css.
   ========================================================================= */

/* o vão entre faixas (organico.css, «RITMO ENTRE AS FAIXAS») */
#top #depoimentos{padding-top:var(--sec-t);padding-bottom:var(--sec-b)}
@media (min-width:1181px){ #top #depoimentos{height:auto;min-height:0} }
/* papel depois de papel: só sem os Bastidores e sem o Radar entre o piloto e aqui */
#top #piloto + #radar[hidden] + #depoimentos{box-shadow:inset 0 1px 0 #DCE5EC}

#depoimentos{
  --estrela:#D97706;          /* 3,2:1 no branco: gráfico pede 3:1 */
  --estrela-off:#D5DEE7;
  --depo-azul:#0A56C8;        /* 6,9:1 no branco */
  --seta-fundo:#FFFFFF;
  --seta-borda:#DCE5EC;
  --seta-tinta:#0A1F45;
  --seta-tinta-forte:#0A56C8;
  --seta-sombra:0 10px 24px -16px rgba(16,40,70,.45);
  --barra-fundo:rgba(10,31,69,.10);
  --barra-luz:#0A80E2;
  --ponto:rgba(10,31,69,.24);
  --ponto-forte:rgba(10,31,69,.42);
}
.depo__pilha{display:flex;flex-direction:column;gap:clamp(26px,4vh,46px)}

/* ---------------- o cabeçalho: o texto à esquerda, a nota e o botão à direita ---------------- */
#depoimentos .depo__cab{
  max-width:none;margin:0;
  display:flex;align-items:flex-end;justify-content:space-between;gap:clamp(20px,4vw,64px);
}
.depo__cab-txt{max-width:760px}
#depoimentos .sechead__title{font-size:min(clamp(2rem,4vw,3.6rem),6vh);margin-bottom:clamp(10px,1.6vh,18px)}
#depoimentos .sechead__title em{color:#0A56C8}
#depoimentos .sechead__sub{max-width:58ch}
#depoimentos .sechead__sub[hidden]{display:none}

.depo__resumo{display:flex;flex-direction:column;align-items:flex-end;gap:12px;flex:none}
.depo__media{display:flex;align-items:center;gap:12px}
.depo__media[hidden]{display:none}
.depo__num{
  font-size:clamp(2.1rem,3vw,2.8rem);line-height:1;font-weight:700;letter-spacing:-.04em;color:var(--ink);
}
.depo__media-l{display:flex;flex-direction:column;gap:4px}
.depo__media-l small{font-size:12.5px;color:var(--muted)}

.depo__cta{
  display:inline-flex;align-items:center;gap:10px;
  padding:14px 22px;border:0;cursor:pointer;
  font:inherit;font-size:14px;font-weight:600;letter-spacing:.02em;color:#FFFFFF;
  border-radius:calc(100px * var(--r,1));
  background:linear-gradient(103deg,var(--accent-lo),var(--accent) 48%,var(--accent-hi));
  box-shadow:var(--sh-btn);
  transition:transform .34s var(--ease-pop),box-shadow .34s var(--ease);
}
.depo__cta svg{width:18px;height:18px;fill:none;stroke:currentColor;stroke-width:2;stroke-linecap:round;stroke-linejoin:round}
.depo__cta:hover{transform:translateY(-1.5px);box-shadow:0 18px 36px -12px rgba(10,86,200,.7),inset 0 1px 0 rgba(255,255,255,.35)}
.depo__cta:focus-visible{outline:2px solid #0A56C8;outline-offset:3px}
.depo__micro{font-size:12.5px;color:var(--muted);text-align:right}

@media (max-width:860px){
  #depoimentos .depo__cab{flex-direction:column;align-items:flex-start}
  .depo__resumo{align-items:flex-start;width:100%}
  .depo__micro{text-align:left}
}

/* a faixa da prévia local do formulário (envio simulado): só em 127.0.0.1 */
.depo__previa{
  align-self:center;display:inline-flex;align-items:center;gap:8px;
  padding:7px 14px;border-radius:100px;font-size:12.5px;font-weight:600;
  color:#7A4A00;background:#FFF4DC;border:1px dashed #E2B04A;
}
.depo__previa[hidden]{display:none}

.depo__carro[hidden],.depo__vazio[hidden]{display:none}
/* poucos aprovados (menos que uma fileira): ficam no centro, não encostados
   à esquerda com o vazio do lado. Só sem rolagem: centrar o que rola corta
   a ponta da esquerda */
.depo__carro:not(.tem-setas) .carro__trilha{justify-content:center}
.sem-depo .depo__resumo{display:none}

/* ---------------- o cartão ---------------- */
.depo__c{
  display:flex;
  opacity:0;transform:translateY(14px);
  transition:opacity .6s var(--ease) var(--d,0s),transform .7s var(--ease) var(--d,0s);
}
.depo__c.is-in{opacity:1;transform:none}
.depo__fig,.depo-previa__c{
  position:relative;flex:1;min-width:0;margin:0;
  display:flex;flex-direction:column;
  padding:clamp(20px,1.7vw,28px);
  background:#FFFFFF;border:1px solid #DCE5EC;border-radius:calc(20px * var(--r,1));
  box-shadow:0 1px 2px rgba(16,40,70,.04),0 18px 40px -30px rgba(16,40,70,.22);
  transition:border-color .3s var(--ease),box-shadow .3s var(--ease),transform .3s var(--ease);
}
.depo__fig:hover{
  border-color:#BFCDD8;transform:translateY(-2px);
  box-shadow:0 1px 2px rgba(16,40,70,.05),0 26px 48px -28px rgba(16,40,70,.30);
}
/* a aspa grande, quase apagada, no canto */
.depo__aspas{
  position:absolute;top:14px;right:18px;width:46px;height:46px;
  fill:#0A80E2;opacity:.1;pointer-events:none;
}
.depo__estrelas{display:flex;gap:3px;margin:0}
.depo__estrelas svg{width:17px;height:17px;fill:var(--estrela-off)}
.depo__estrelas svg.on{fill:var(--estrela)}

.depo__q{margin:16px 0 0;flex:1 1 auto}
.depo__q p{
  margin:0;font-size:15px;line-height:1.62;font-style:italic;color:#2B3B52;
  white-space:pre-line;overflow-wrap:anywhere;
  display:-webkit-box;-webkit-box-orient:vertical;-webkit-line-clamp:7;overflow:hidden;
}
.depo__c.is-aberto .depo__q p{-webkit-line-clamp:unset;display:block}
.depo__mais{
  align-self:flex-start;margin-top:8px;padding:2px 0;border:0;background:none;cursor:pointer;
  font:inherit;font-size:13px;font-weight:600;color:var(--depo-azul);
  text-decoration:underline;text-underline-offset:3px;text-decoration-thickness:1px;
}
.depo__mais[hidden]{display:none}
.depo__mais:focus-visible{outline:2px solid #0A56C8;outline-offset:2px;border-radius:4px}

.depo__quem{
  display:flex;align-items:center;gap:12px;
  margin-top:20px;padding-top:16px;border-top:1px solid #E6EDF3;
}
.depo__av{
  position:relative;flex:none;width:48px;height:48px;border-radius:50%;overflow:hidden;
  display:grid;place-items:center;
  font-size:15px;font-weight:700;letter-spacing:.02em;color:#FFFFFF;
  background:linear-gradient(140deg,var(--av-a,#43A6FF),var(--av-b,#0A56C8));
  box-shadow:0 0 0 2px #FFFFFF,0 0 0 3px #DCE5EC;
}
.depo__av img{width:100%;height:100%;object-fit:cover;display:block}
/* o nome + duas linhas de «cargo · empresa»: com a altura fixa, o fio de
   cima fica na mesma linha em todos os cartões, quebre ou não o cargo */
.depo__quem-txt{display:flex;flex-direction:column;justify-content:center;gap:2px;min-width:0;min-height:66px}
.depo__nome{font-size:15px;font-weight:700;color:var(--ink);overflow-wrap:anywhere}
.depo__cargo{font-size:12.5px;font-weight:600;color:var(--depo-azul);overflow-wrap:anywhere}

/* ---------------- sem depoimento aprovado: o convite, nunca enfeite ---------------- */
.depo__vazio{
  display:flex;align-items:center;justify-content:space-between;gap:24px;flex-wrap:wrap;
  max-width:980px;width:100%;margin:0 auto;
  padding:clamp(22px,2.6vw,36px);
  background:#FFFFFF;border:1px dashed #BFCDD8;border-radius:calc(20px * var(--r,1));
}
.depo__vazio p{margin:0;max-width:56ch;font-size:clamp(1rem,1.1vw,1.1rem);color:var(--body)}
.depo__vazio b{display:block;margin-bottom:4px;color:var(--ink);font-size:1.15em}

/* =========================================================================
   O FORMULÁRIO
   ========================================================================= */
.depo-dlg{
  width:min(1060px,calc(100% - 32px));max-width:none;
  max-height:calc(100svh - 32px);
  margin:auto;padding:0;border:0;overflow:auto;overscroll-behavior:contain;
  color:var(--body);background:#FFFFFF;
  border-radius:calc(22px * var(--r,1));
  box-shadow:0 40px 90px -30px rgba(6,16,32,.55);
  opacity:0;transform:translateY(18px) scale(.985);
  transition:opacity .28s var(--ease),transform .38s var(--ease-pop);
}
.depo-dlg.is-aberto{opacity:1;transform:none}
.depo-dlg::backdrop{background:rgba(6,16,32,.58);-webkit-backdrop-filter:blur(6px);backdrop-filter:blur(6px)}
html.depo-trava{overflow:hidden}

.depo-dlg__caixa{display:grid;grid-template-columns:minmax(0,1.2fr) minmax(0,1fr);min-height:100%}
.depo-dlg__x{
  position:absolute;top:14px;right:14px;z-index:3;
  display:grid;place-items:center;width:40px;height:40px;padding:0;cursor:pointer;
  border:1px solid #DCE5EC;border-radius:50%;background:#FFFFFF;color:var(--ink);
}
.depo-dlg__x svg{width:18px;height:18px;fill:none;stroke:currentColor;stroke-width:2;stroke-linecap:round}
.depo-dlg__x:hover{border-color:#0A80E2;color:#0A56C8}
.depo-dlg__x:focus-visible{outline:2px solid #0A56C8;outline-offset:2px}

.depo-dlg__lado{padding:clamp(24px,3.2vw,44px)}
.depo-dlg__selo{
  display:inline-flex;align-items:center;gap:7px;margin-bottom:12px;
  padding:5px 12px;border-radius:100px;font-size:12px;font-weight:600;
  color:#0A56C8;background:rgba(10,128,226,.08);
}
.depo-dlg__selo svg{width:14px;height:14px;fill:none;stroke:currentColor;stroke-width:2.2;stroke-linecap:round;stroke-linejoin:round}
.depo-dlg__t{
  margin:0 0 8px;padding-right:44px;outline:none;
  font-size:clamp(1.45rem,2.1vw,1.9rem);line-height:1.12;letter-spacing:-.025em;font-weight:650;color:var(--ink);
}
.depo-dlg__t em{font-family:var(--serif);font-style:italic;font-weight:500;color:#0A56C8;letter-spacing:-.01em}
.depo-dlg__s{margin:0 0 22px;font-size:14.5px;line-height:1.55;color:var(--body);max-width:52ch}

/* ---- os campos ---- */
.depo-f{display:flex;flex-direction:column;gap:18px}
.depo-f fieldset{margin:0;padding:0;border:0;min-width:0}
.depo-f__rot,.depo-f legend{
  display:block;margin-bottom:7px;padding:0;
  font-size:13px;font-weight:600;color:var(--ink);
}
.depo-f__rot small,.depo-f legend small{font-weight:500;color:var(--muted)}
.depo-f__ast{color:#B42318}
.depo-f__duo{display:grid;grid-template-columns:1fr 1fr;gap:14px}

.depo-f input[type=text],.depo-f textarea{
  display:block;width:100%;margin:0;
  padding:12px 14px;font:inherit;font-size:15px;line-height:1.45;color:var(--ink);
  background:#FFFFFF;border:1px solid #C9D6E2;border-radius:calc(12px * var(--r,1));
  transition:border-color .2s var(--ease),box-shadow .2s var(--ease);
}
.depo-f textarea{min-height:128px;resize:vertical}
.depo-f input[type=text]::placeholder,.depo-f textarea::placeholder{color:#7A8799}
.depo-f input[type=text]:hover,.depo-f textarea:hover{border-color:#A9BBCC}
.depo-f input[type=text]:focus,.depo-f textarea:focus{
  outline:none;border-color:#0A80E2;box-shadow:0 0 0 4px rgba(10,128,226,.14);
}
.depo-f [aria-invalid=true]{border-color:#B42318 !important}
.depo-f [aria-invalid=true]:focus{box-shadow:0 0 0 4px rgba(180,35,24,.12) !important}

.depo-f__pe{display:flex;justify-content:space-between;gap:12px;margin-top:6px;font-size:12.5px;color:var(--muted)}
.depo-f__conta{font-variant-numeric:tabular-nums;flex:none}
.depo-f__conta.ok{color:#0F7B3F}
.depo-f__erro{margin:6px 0 0;font-size:12.5px;font-weight:600;color:#B42318}
.depo-f__erro:empty{display:none}

/* ---- as estrelas: rádios de verdade (teclado e leitor de tela de graça) ---- */
.depo-f__nota{display:flex;align-items:center;gap:14px;flex-wrap:wrap}
.depo-estrelas{display:flex;gap:4px}
.depo-estrela{position:relative;display:block;cursor:pointer;padding:2px}
.depo-estrela input{position:absolute;inset:0;width:100%;height:100%;margin:0;opacity:0;cursor:pointer}
.depo-estrela svg{
  display:block;width:34px;height:34px;fill:var(--estrela-off,#D5DEE7);
  border-radius:8px;transition:fill .15s var(--ease),transform .2s var(--ease-pop);
}
.depo-estrela:hover svg{transform:scale(1.12)}
.depo-estrela input:focus-visible + svg{outline:2px solid #0A56C8;outline-offset:2px}
.depo-estrelas[data-ver="1"] .depo-estrela:nth-child(-n+1) svg,
.depo-estrelas[data-ver="2"] .depo-estrela:nth-child(-n+2) svg,
.depo-estrelas[data-ver="3"] .depo-estrela:nth-child(-n+3) svg,
.depo-estrelas[data-ver="4"] .depo-estrela:nth-child(-n+4) svg,
.depo-estrelas[data-ver="5"] .depo-estrela:nth-child(-n+5) svg{fill:var(--estrela,#D97706)}
.depo-f__nota-txt{font-size:14px;font-weight:600;color:var(--ink);min-width:9ch}
.depo-f__nota-txt.vazio{font-weight:500;color:var(--muted)}

/* ---- a foto ---- */
.depo-f__foto{
  display:flex;align-items:center;gap:16px;
  padding:14px;border:1px dashed #C9D6E2;border-radius:calc(14px * var(--r,1));
  transition:border-color .2s var(--ease),background .2s var(--ease);
}
.depo-f__foto.arrasta{border-color:#0A80E2;background:rgba(10,128,226,.05)}
.depo-f__foto .depo__av{width:64px;height:64px;font-size:19px}
.depo-f__av-ic{width:30px;height:30px;fill:none;stroke:#FFFFFF;stroke-width:1.8;stroke-linecap:round}
.depo-f__foto-l{display:flex;flex-direction:column;gap:8px;min-width:0}
.depo-f__foto-bt{display:flex;flex-wrap:wrap;gap:8px}
.depo-f__bt{
  display:inline-flex;align-items:center;gap:7px;padding:8px 14px;cursor:pointer;
  font:inherit;font-size:13px;font-weight:600;color:var(--ink);
  background:#FFFFFF;border:1px solid #C9D6E2;border-radius:100px;
}
.depo-f__bt svg{width:16px;height:16px;fill:none;stroke:currentColor;stroke-width:2;stroke-linecap:round;stroke-linejoin:round}
.depo-f__bt:hover{border-color:#0A80E2;color:#0A56C8}
.depo-f__bt[hidden]{display:none}
.depo-f__arquivo{position:absolute;width:1px;height:1px;opacity:0;pointer-events:none}
.depo-f__arquivo:focus-visible + .depo-f__bt{outline:2px solid #0A56C8;outline-offset:2px}
.depo-f__foto small{font-size:12px;line-height:1.45;color:var(--muted)}

/* ---- a autorização ---- */
.depo-f__ok{
  display:flex;align-items:flex-start;gap:12px;cursor:pointer;
  padding:14px;border-radius:calc(14px * var(--r,1));background:#F4F8FA;border:1px solid #E3EAF0;
  font-size:13.5px;line-height:1.5;color:var(--body);
}
.depo-f__ok input{flex:none;width:20px;height:20px;margin:1px 0 0;accent-color:#0A56C8;cursor:pointer}
.depo-f__ok input:focus-visible{outline:2px solid #0A56C8;outline-offset:2px}
.depo-f__ok.erro{border-color:#B42318;background:#FEF3F2}

/* o pote de mel: fora da tela e fora do teclado */
.depo-f__mel{position:absolute;left:-9999px;width:1px;height:1px;overflow:hidden}

.depo-f__aviso{
  margin:0;padding:12px 14px;border-radius:12px;
  font-size:13.5px;line-height:1.5;font-weight:500;color:#7A271A;background:#FEF3F2;border:1px solid #FECDCA;
}
.depo-f__aviso[hidden]{display:none}

.depo-f__acoes{display:flex;align-items:center;gap:14px;flex-wrap:wrap}
.depo-f__envia{position:relative}
.depo-f__envia .gira{display:none}
.depo-f__envia[aria-busy=true]{pointer-events:none;opacity:.85}
.depo-f__envia[aria-busy=true] .seta{display:none}
.depo-f__envia[aria-busy=true] .gira{display:block;animation:depo-gira .9s linear infinite}
@keyframes depo-gira{to{transform:rotate(360deg)}}
.depo-f__cancela{
  padding:10px 4px;border:0;background:none;cursor:pointer;
  font:inherit;font-size:14px;font-weight:600;color:var(--muted);
}
.depo-f__cancela:hover{color:var(--ink)}
.depo-f__lgpd{margin:0;font-size:12px;line-height:1.5;color:var(--muted)}

/* ---- o lado da prévia: o cartão ao vivo ---- */
.depo-dlg__previa{
  position:relative;display:flex;flex-direction:column;gap:18px;
  padding:clamp(24px,3.2vw,44px);padding-top:clamp(64px,7vw,88px);
  background:
    radial-gradient(80% 60% at 100% 0%,rgba(10,128,226,.10),rgba(10,128,226,0) 70%),
    #F4F8FA;
  border-left:1px solid #E3EAF0;
}
.depo-dlg__previa-rot{
  display:inline-flex;align-items:center;gap:8px;
  font-size:11.5px;font-weight:600;letter-spacing:.16em;text-transform:uppercase;color:#956609;
}
.depo-dlg__previa-rot i{display:block;width:26px;height:1px;background:#956609}
.depo-previa__c{flex:none;box-shadow:0 1px 2px rgba(16,40,70,.05),0 30px 60px -34px rgba(16,40,70,.34)}
.depo-previa__c .depo__q p{-webkit-line-clamp:9}
.depo-previa__c.vazio .depo__q p,.depo-previa__c.vazio .depo__nome,.depo-previa__c.vazio .depo__cargo{color:#9AA6B5}
.depo-dlg__garantias{list-style:none;margin:0;padding:0;display:flex;flex-direction:column;gap:10px}
.depo-dlg__garantias li{display:flex;gap:10px;font-size:13.5px;line-height:1.45;color:var(--body)}
.depo-dlg__garantias svg{flex:none;width:18px;height:18px;margin-top:1px;fill:none;stroke:#0F7B3F;stroke-width:2.2;stroke-linecap:round;stroke-linejoin:round}

/* ---- o obrigado ---- */
.depo-dlg__fim{
  grid-column:1 / -1;
  display:flex;flex-direction:column;align-items:center;justify-content:center;text-align:center;gap:14px;
  min-height:min(520px,calc(100svh - 32px));padding:clamp(40px,6vw,80px) clamp(24px,5vw,72px);
}
.depo-dlg__fim[hidden]{display:none}
.depo-dlg__fim-ic{
  display:grid;place-items:center;width:72px;height:72px;border-radius:50%;
  background:rgba(15,123,63,.10);color:#0F7B3F;
  animation:depo-pop .5s var(--ease-pop) both;
}
.depo-dlg__fim-ic svg{width:34px;height:34px;fill:none;stroke:currentColor;stroke-width:2.4;stroke-linecap:round;stroke-linejoin:round}
@keyframes depo-pop{from{transform:scale(.6);opacity:0}to{transform:none;opacity:1}}
.depo-dlg__fim h2{margin:0;font-size:clamp(1.5rem,2.4vw,2rem);letter-spacing:-.025em;color:var(--ink)}
.depo-dlg__fim p{margin:0;max-width:48ch;font-size:15px;line-height:1.6;color:var(--body)}
.depo-dlg__fim .depo__previa{margin-top:4px}
.depo-dlg.feito .depo-dlg__lado,.depo-dlg.feito .depo-dlg__previa{display:none}

/* ---- telas menores ---- */
@media (max-width:860px){
  .depo-dlg__caixa{grid-template-columns:1fr}
  .depo-dlg__previa{display:none}
}
@media (max-width:560px){
  .depo-f__duo{grid-template-columns:1fr}
  .depo-estrela svg{width:38px;height:38px}
  /* a folha que sobe do pé da tela */
  .depo-dlg{
    width:100%;max-height:92svh;margin:auto 0 0;
    border-radius:calc(22px * var(--r,1)) calc(22px * var(--r,1)) 0 0;
    transform:translateY(40px);
  }
  .depo-dlg__lado{padding-bottom:calc(24px + env(safe-area-inset-bottom,0px))}
}

@media (prefers-reduced-motion:reduce){
  .depo__c,.depo-dlg{transition:opacity .2s linear;transform:none}
  .depo__fig:hover{transform:none}
  .depo-estrela:hover svg{transform:none}
  .depo-dlg__fim-ic{animation:none}
  .depo-f__envia[aria-busy=true] .gira{animation:none}
}