/* SAC Charlots: o formulário do SAC de Produto, o chamado de atacado, a tela do protocolo
   (também no "Fale conosco") e o "Pós-venda" da conta. Reaproveita os campos da conta
   (conta-form, conta-campo, conta-check, conta-alerta) e os mesmos tokens do site: o bege
   dos painéis, o escuro dos botões, a curva longa das transições. Nada aqui é fixed/sticky:
   o conteúdo mora dentro do scroll suave (West). */

.sac { --sac-curva:cubic-bezier(.38,0,.02,1); --sac-ouro:#80725e; --sac-erro:#a3402c; }
.sac h1 em,.sac-atacado h1 em { font-style:normal; color:#91846c; }
.sac-link,.story-sac-link { color:var(--color-dark); font-weight:600; text-decoration:underline; text-decoration-thickness:1px; text-underline-offset:3px; }
.sac-link:hover,.story-sac-link:hover { text-decoration-thickness:2px; }
.sac-obrigatorio { margin-left:2px; color:#a0522d; font-weight:700; }

/* Cabeçalho e etapas */
.sac-topo { display:flex; flex-direction:column; gap:22px; margin-bottom:28px; }
.sac .sac-cabecalho { margin-bottom:0; max-width:900px; }
.sac-etapas { display:grid; grid-template-columns:repeat(5,minmax(0,1fr)); gap:8px; max-width:980px; margin:0; padding:0; list-style:none; }
.sac-etapas a {
    display:flex; align-items:center; gap:10px; min-height:52px; padding:10px 14px; border:1px solid #e1dbd0; border-radius:16px;
    background:#fff; font:600 13px/1.25 var(--font-heading); color:#4f483d; transition:border-color .45s var(--sac-curva),background .45s var(--sac-curva);
}
.sac-etapas a:hover { border-color:#1f1f1f; }
.sac-etapa-num { flex-shrink:0; font:600 11px/1 var(--font-body); letter-spacing:.12em; color:var(--sac-ouro); }
.sac-faixa { max-width:980px; }
.sac-alerta { max-width:980px; margin-bottom:18px; }
.sac-alerta-conta { font-weight:600; }

/* Formulário */
.sac-form { max-width:980px; gap:30px; }
.sac-atacado .sac-form { max-width:none; }
.sac-form-topo { display:flex; flex-wrap:wrap; align-items:baseline; justify-content:space-between; gap:6px 18px; padding-bottom:18px; border-bottom:1px solid #ddd8ce; }
.sac-form-titulo { margin:0; font:600 13px/1.35 var(--font-heading); letter-spacing:.12em; color:var(--color-dark); }
.sac-legenda { margin:0; font-size:12px; color:#5f5f5f; }
.sac-form .sac-secao+.sac-secao { padding-top:28px; }
.sac-form .sac-secao>legend { margin-bottom:18px; font:600 clamp(20px,2vw,24px)/1.2 var(--font-heading); letter-spacing:-.02em; text-transform:none; color:var(--color-dark); }
.sac-secao { scroll-margin-top:120px; }
.sac-secao-texto { clear:both; margin:0 0 16px; font-size:15px; color:#4a4a4a; }
.sac-form textarea {
    width:100%; min-height:132px; padding:14px 18px; border:1px solid var(--color-border); border-radius:14px; background:#fff;
    color:#1f1f1f; font:500 16px/1.55 var(--font-body); resize:vertical; transition:border-color .3s,box-shadow .3s;
}
.sac-form textarea:hover { border-color:#1f1f1f40; }
.sac-form textarea:focus-visible { outline:3px solid #89714e; outline-offset:2px; border-color:#89714e; }
.sac-form [aria-invalid="true"]:is(input,select,textarea) { border-color:#b4533f; box-shadow:0 0 0 1px #b4533f inset; }
.sac-form .conta-campo input[type="date"] { padding-right:12px; }
.sac-erro { display:flex; align-items:flex-start; gap:6px; font-size:12.5px; font-weight:600; line-height:1.45; color:var(--sac-erro); }
.sac-erro::before { content:""; flex:0 0 6px; width:6px; height:6px; margin-top:6px; border-radius:50%; background:currentColor; }
.sac-erro[hidden] { display:none; }

/* Sim/Não, voltagem, conexão: pílulas grandes, fáceis de tocar. */
.sac-radio { min-width:0; margin:0; padding:0; border:0; }
.sac-radio>legend { float:left; width:100%; margin:0 0 10px; padding:0; font-size:13px; font-weight:600; line-height:1.45; color:#2f2f2f; }
.sac-legenda-dica { font-weight:500; color:#5f5f5f; }
.sac-opcoes { clear:both; display:flex; flex-wrap:wrap; gap:10px; }
.sac-opcao { position:relative; display:inline-flex; }
.sac-opcao input { position:absolute; opacity:0; width:1px; height:1px; }
.sac-opcao span {
    display:inline-flex; align-items:center; gap:10px; min-height:48px; padding:0 20px 0 16px; border:1px solid var(--color-border); border-radius:var(--radius-full);
    background:#fff; font:600 14px/1.2 var(--font-heading); color:#2f2f2f; cursor:pointer; transition:background .4s var(--sac-curva),color .4s var(--sac-curva),border-color .4s var(--sac-curva);
}
.sac-opcao span::before { content:""; width:16px; height:16px; flex-shrink:0; border:1.5px solid #8b8478; border-radius:50%; background:#fff; transition:box-shadow .3s,border-color .3s; }
.sac-opcao input:checked+span { background:#1f1f1f; border-color:#1f1f1f; color:#f6f5f3; }
.sac-opcao input:checked+span::before { border-color:#f6f5f3; box-shadow:inset 0 0 0 4px #1f1f1f; background:#f6f5f3; }
.sac-opcao input:focus-visible+span { outline:3px solid #89714e; outline-offset:2px; }
.sac-radio[aria-invalid="true"] .sac-opcao span { border-color:#b4533f; }

/* ── Arquivos ── grade de cartões: 2 colunas no celular, 3 no computador */
.sac-arquivos { clear:both; display:grid; grid-template-columns:repeat(3,minmax(0,1fr)); gap:18px 14px; }
.sac-grupo { display:contents; }
.sac-erro-grupo { grid-column:1/-1; margin-top:-6px; }
.sac-cartao { display:flex; flex-direction:column; gap:6px; min-width:0; }
.sac-cartao-titulo { margin:0; font-size:13px; font-weight:600; line-height:1.35; color:#2f2f2f; }
.sac-cartao-dica { margin-top:-2px; font-size:11.5px; line-height:1.45; color:#5f5f5f; }
.sac-cartao-area {
    position:relative; margin-top:auto; aspect-ratio:4/3; border:1.5px dashed #c9bfae; border-radius:18px; background:#fbfaf7; overflow:hidden;
    transition:border-color .45s var(--sac-curva),background .45s var(--sac-curva);
}
.sac-input { position:absolute; width:1px; height:1px; margin:-1px; padding:0; overflow:hidden; clip:rect(0,0,0,0); white-space:nowrap; border:0; }
.sac-cartao-escolher { position:absolute; inset:0; display:flex; flex-direction:column; align-items:center; justify-content:center; gap:6px; padding:12px; text-align:center; cursor:pointer; }
.sac-cartao-icone { width:46px; height:46px; display:grid; place-items:center; border-radius:50%; background:#fff; border:1px solid #e1dbd0; color:var(--sac-ouro); font-size:22px; transition:transform .5s var(--sac-curva),background .45s,color .45s; }
.sac-cartao-acao { font:600 14px/1.2 var(--font-heading); color:var(--color-dark); }
.sac-cartao-escolher small { font-size:11.5px; color:#6b6b6b; }
.sac-cartao-area:hover,.sac-cartao.is-arrastando .sac-cartao-area { border-color:#1f1f1f; background:#fff; }
.sac-cartao-area:hover .sac-cartao-icone,.sac-cartao.is-arrastando .sac-cartao-icone { transform:translateY(-3px); background:#1f1f1f; color:#f6f5f3; }
.sac-input:focus-visible+.sac-cartao-escolher { outline:3px solid #89714e; outline-offset:-3px; border-radius:16px; }
.sac-cartao-previa { position:absolute; inset:0; }
.sac-cartao-midia { position:absolute; inset:0; display:grid; place-items:center; background:#efebe4; color:var(--sac-ouro); font-size:38px; }
.sac-cartao-midia img,.sac-cartao-midia video { width:100%; height:100%; object-fit:cover; animation:sac-entra .4s var(--sac-curva) both; }
.sac-midia-play { position:absolute; width:44px; height:44px; display:grid; place-items:center; border-radius:50%; background:#1f1f1fb3; color:#fff; font-size:20px; }
.sac-cartao-rodape {
    position:absolute; left:0; right:0; bottom:0; display:grid; gap:4px; padding:22px 12px 10px;
    background:linear-gradient(transparent,#1f1f1fd9 45%); color:#fff; max-height:100%; overflow:auto;
}
.sac-cartao-nome { overflow:hidden; text-overflow:ellipsis; white-space:nowrap; font-size:12px; font-weight:600; }
.sac-cartao-status { font-size:11.5px; line-height:1.4; color:#ece7dd; }
.sac-cartao-status a { color:#fff; font-weight:700; text-decoration:underline; }
.sac-barra { display:block; height:4px; border-radius:4px; background:#ffffff40; overflow:hidden; }
.sac-barra>span { display:block; height:100%; background:#fff; transform:scaleX(var(--progresso,0)); transform-origin:left; transition:transform .3s linear; }
.sac-cartao-remover {
    position:absolute; top:8px; right:8px; width:44px; height:44px; display:grid; place-items:center; padding:0; border:0; border-radius:50%;
    background:#ffffffeb; color:#1f1f1f; font-size:18px; box-shadow:0 2px 8px #1f1f1f26; transition:background .3s,color .3s;
}
.sac-cartao-remover:hover { background:#1f1f1f; color:#fff; }
.sac-cartao-tentar {
    position:absolute; top:8px; left:8px; display:inline-flex; align-items:center; gap:6px; min-height:44px; padding:0 14px; border:0; border-radius:var(--radius-full);
    background:#fff; color:#1f1f1f; font:600 12.5px/1 var(--font-heading); box-shadow:0 2px 8px #1f1f1f26;
}
.sac-cartao-tentar:hover { background:#1f1f1f; color:#fff; }
.sac-cartao[data-estado="pronto"] .sac-cartao-area { border-style:solid; border-color:var(--sac-ouro); }
.sac-cartao[data-estado="pronto"] .sac-cartao-status::before { content:"✓ "; font-weight:700; }
.sac-cartao[data-estado="pronto"] .sac-barra { display:none; }
.sac-cartao[data-estado="erro"] .sac-cartao-area { border-style:solid; border-color:#b4533f; }
.sac-cartao[data-estado="erro"] .sac-cartao-rodape { top:0; align-content:end; background:#5c2419e6; padding-top:58px; }
.sac-cartao[data-estado="erro"] .sac-barra { display:none; }
.sac-cartao[data-estado="preparando"] .sac-barra>span { width:35%; transform:none; animation:sac-preparando 1.1s ease-in-out infinite; }
.sac-mais {
    align-self:end; aspect-ratio:4/3; display:flex; flex-direction:column; align-items:center; justify-content:center; gap:6px; padding:12px;
    border:1.5px dashed #c9bfae; border-radius:18px; background:transparent; color:#4f483d; font:600 13px/1.3 var(--font-heading); text-align:center;
    transition:border-color .45s var(--sac-curva),background .45s var(--sac-curva);
}
.sac-mais small { font:500 11.5px/1 var(--font-body); color:#6b6b6b; }
.sac-mais-icone { width:40px; height:40px; display:grid; place-items:center; border-radius:50%; background:#fff; font-size:18px; color:var(--sac-ouro); }
.sac-mais:hover { border-color:#1f1f1f; background:#fff; }
.sac-dica-arquivos { display:flex; align-items:flex-start; gap:10px; margin:18px 0 0; font-size:13px; line-height:1.55; color:#5f574a; }
.sac-dica-arquivos>i { flex-shrink:0; margin-top:2px; font-size:18px; color:var(--sac-ouro); }
.sac-sem-js { margin-bottom:16px; }
.sac-sem-js a { color:inherit; font-weight:700; text-decoration:underline; }

/* Autorização e envio */
.sac-declaracoes { gap:10px; }
.sac-retencao { margin:2px 0 0; font-size:12px; line-height:1.6; color:#5f5f5f; max-width:78ch; }
.sac-enviar { display:flex; flex-wrap:wrap; align-items:center; gap:12px 22px; padding-top:6px; }
.sac-enviar-nota { margin:0; font-size:13px; line-height:1.5; color:#5f5f5f; }
.sac-enviar-status { flex-basis:100%; margin:0; font-size:13px; font-weight:600; color:#4f483d; }
.sac-enviar-status:empty { display:none; }
.sac-form.is-aguardando .sac-enviar-botao { cursor:progress; }
.sac-form.is-aguardando .sac-enviar-botao i { animation:sac-gira 1.2s linear infinite; }
.sac-enviar-botao[disabled] { opacity:.75; cursor:progress; }

/* ── Chamado de atacado ── */
.sac-dados-conta { clear:both; display:grid; grid-template-columns:repeat(2,minmax(0,1fr)); gap:0 24px; margin:0 0 8px; }
.sac-dados-conta>div { min-width:0; padding:12px 0; border-top:1px solid #ddd8ce; }
.sac-dados-conta dt { font-size:11px; font-weight:600; letter-spacing:.14em; text-transform:uppercase; color:var(--color-muted); }
.sac-dados-conta dd { margin:4px 0 0; font-size:15px; color:var(--color-dark); overflow-wrap:anywhere; }
.sac-corrigir { display:inline-flex; min-height:44px; align-items:center; margin-bottom:14px; font-size:13px; }
.sac-itens { clear:both; display:flex; flex-direction:column; }
.sac-item { display:grid; grid-template-columns:minmax(0,2fr) minmax(0,1.3fr) 112px 44px; gap:12px; align-items:end; padding:14px 0; border-top:1px solid #ddd8ce; }
.sac-item:first-child { border-top:0; padding-top:0; }
.sac-item-remover { width:44px; height:52px; display:grid; place-items:center; padding:0; border:1px solid var(--color-border); border-radius:14px; background:#fff; color:#5f5f5f; font-size:16px; transition:background .3s,color .3s; }
.sac-item-remover:hover { background:#1f1f1f; color:#fff; }
.sac-item-mais { margin:6px 0 10px; }
.sac-recado .sac-link { white-space:nowrap; }

/* ── Tela do protocolo ── */
.sac-sucesso-moldura { max-width:780px; margin-inline:auto; }
.sac-sucesso { display:flex; flex-direction:column; align-items:flex-start; gap:16px; padding:clamp(28px,4vw,52px); border-radius:28px; background:#fff; box-shadow:0 2px 10px #1f1f1f0d; outline:none; }
.sac-sucesso-check { width:64px; height:64px; fill:none; stroke-linecap:round; stroke-linejoin:round; }
.sac-check-anel { stroke:#d7cdbf; stroke-width:2; }
.sac-check-traco { stroke:#1f1f1f; stroke-width:3.2; stroke-dasharray:36; animation:sac-traco .7s cubic-bezier(.38,0,.02,1) .15s both; }
.sac-sucesso-titulo { margin:-6px 0 0; font-size:clamp(30px,3.6vw,46px); line-height:1.05; letter-spacing:-.035em; }
.sac-protocolo { width:100%; display:flex; flex-wrap:wrap; align-items:center; justify-content:space-between; gap:10px 16px; padding:18px 20px; border:1px solid #e6e3de; border-radius:20px; background:#f6f5f3; }
.sac-protocolo-rotulo { flex-basis:100%; font-size:11px; font-weight:600; letter-spacing:.18em; text-transform:uppercase; color:#5f5f5f; }
.sac-protocolo-numero { font:600 clamp(32px,5vw,54px)/1.05 var(--font-heading); letter-spacing:.01em; color:var(--color-dark); overflow-wrap:anywhere; }
.sac-protocolo-numero { animation:sac-sobe .7s cubic-bezier(.38,0,.02,1) .2s both; }
.sac-copiar { min-height:48px; padding:12px 22px; }
.sac-copiar.is-copiado { background:#1f1f1f; color:#f6f5f3; border-color:#1f1f1f; }
.sac-sucesso-texto { margin:0; max-width:60ch; font-size:16px; line-height:1.65; color:#4a4a4a; }
.sac-sucesso-texto strong { color:var(--color-dark); overflow-wrap:anywhere; }
.sac-sucesso-acoes { margin-top:4px; }

/* "Fale conosco" da página Sobre: consentimento, erros e o protocolo no lugar do formulário. */
.story-form .story-consent { display:flex; align-items:flex-start; gap:12px; font-size:13px; font-weight:500; line-height:1.55; color:#4a4a4a; cursor:pointer; }
.story-form .story-consent input { flex:0 0 20px; width:20px; height:20px; margin:1px 0 0; padding:0; accent-color:#1f1f1f; }
.story-form .story-consent a { color:var(--color-dark); font-weight:600; text-decoration:underline; text-underline-offset:3px; }
.story-form [aria-invalid="true"] { border-bottom-color:#b4533f; background:#fbf1ee; }
.story-form-alerta { margin:0; }
.story-form-acoes { display:flex; flex-wrap:wrap; align-items:center; gap:14px 24px; }
.story-form-acoes .text-link { min-height:44px; }
.story-form-sucesso { align-content:start; }
.story-form-sucesso .sac-sucesso { padding:0; box-shadow:none; background:none; border-radius:0; }
.story-form-sucesso .sac-sucesso-titulo { margin:-6px 0 0; font-size:clamp(28px,3vw,38px); }
/* A seção Sobre dá margem a todo eyebrow, h2 e p (about-story.css): dentro do protocolo quem espaça é o gap. */
.about-story .story-form-sucesso .eyebrow { margin-bottom:0; }
.about-story .story-form-sucesso .sac-sucesso-texto { max-width:60ch; }

/* ── Pós-venda na conta ── */
.sac-posvenda .conta-painel-cabecalho { align-items:center; }
.sac-posvenda-botao { padding:13px 22px; font-size:14px; }
.sac-chamados-titulo { margin:18px 0 6px; font-size:12px; font-weight:600; letter-spacing:.14em; text-transform:uppercase; color:var(--color-muted); }
.sac-chamados { margin:0; padding:0; list-style:none; }
.sac-chamados li { display:grid; grid-template-columns:auto minmax(0,1fr) auto; align-items:center; gap:4px 16px; padding:12px 0; border-top:1px solid #ddd8ce; }
.sac-chamado-protocolo { font:600 14px/1.2 var(--font-heading); letter-spacing:.02em; }
.sac-chamado-assunto { min-width:0; font-size:14px; color:#3a3a3a; overflow-wrap:anywhere; }
.sac-chamado-assunto small { display:block; font-size:12px; color:var(--color-muted); }
.sac-chamado-status { white-space:nowrap; padding:6px 11px; border-radius:var(--radius-full); background:#eae6de; font:600 11.5px/1 var(--font-heading); color:#5f574a; }
.sac-chamado-status.is-em-andamento { background:#f3e9d8; color:#6e5530; }
.sac-chamado-status.is-resolvido { background:#1f1f1f; color:#f6f5f3; }
.sac-chamados-vazio { margin:0; padding:12px 0 0; border-top:1px solid #ddd8ce; font-size:14px; color:#5f5f5f; }

/* Página do produto: o atalho para o SAC. */
.detail-copy .produto-sac { color:#5f574a; }

@keyframes sac-entra { from { opacity:0; transform:scale(.96); } to { opacity:1; transform:none; } }
@keyframes sac-traco { from { stroke-dashoffset:36; } to { stroke-dashoffset:0; } }
@keyframes sac-sobe { from { opacity:0; transform:translateY(12px); } to { opacity:1; transform:none; } }
@keyframes sac-preparando { 0% { transform:translateX(-100%); } 100% { transform:translateX(300%); } }
@keyframes sac-gira { to { transform:rotate(360deg); } }

@media (max-width:899px) {
    .sac-arquivos { grid-template-columns:repeat(2,minmax(0,1fr)); gap:16px 12px; }
}
@media (max-width:767px) {
    .sac-etapas { gap:6px; }
    .sac-etapas a { flex-direction:column; align-items:flex-start; justify-content:center; gap:4px; min-height:56px; padding:8px 9px; font-size:11.5px; border-radius:12px; }
    .sac-etapas a>span:last-child { overflow:hidden; text-overflow:ellipsis; max-width:100%; }
    .sac-form { gap:24px; }
    .sac-form .sac-secao+.sac-secao { padding-top:22px; }
    .sac-opcoes { gap:8px; }
    .sac-opcao span { min-height:46px; padding:0 16px 0 14px; font-size:13.5px; }
    .sac-cartao-area,.sac-mais { border-radius:14px; }
    .sac-cartao-escolher { gap:4px; padding:8px; }
    .sac-cartao-icone { width:40px; height:40px; font-size:19px; }
    .sac-cartao-acao { font-size:13px; }
    .sac-cartao-remover { top:6px; right:6px; }
    .sac-cartao-tentar { top:6px; left:6px; padding:0 10px; font-size:11.5px; }
    .sac-cartao[data-estado="erro"] .sac-cartao-rodape { padding-top:54px; }
    .sac-enviar>.btn { width:100%; }
    .sac-dados-conta { grid-template-columns:minmax(0,1fr); }
    .sac-item { grid-template-columns:minmax(0,1fr) 96px 44px; }
    .sac-item>.conta-campo:first-child { grid-column:1/-1; }
    .sac-sucesso-acoes .btn { width:100%; }
    .sac-protocolo { padding:16px; }
    .sac-copiar { width:100%; }
    .sac-chamados li { grid-template-columns:minmax(0,1fr) auto; }
    .sac-chamado-assunto { grid-column:1/-1; grid-row:2; }
    .sac-posvenda-botao { width:100%; }
}
@media (prefers-reduced-motion:reduce) {
    .sac-etapas a,.sac-opcao span,.sac-cartao-area,.sac-cartao-icone,.sac-mais,.sac-barra>span,.sac-form textarea { transition:none; }
    .sac-cartao-midia img,.sac-cartao-midia video,.sac-protocolo-numero,.sac-form.is-aguardando .sac-enviar-botao i,.sac-check-traco { animation:none; }
    .sac-cartao[data-estado="preparando"] .sac-barra>span { animation:none; width:100%; opacity:.5; }
    .sac-cartao-area:hover .sac-cartao-icone { transform:none; }
}