/* ══════════════════════════════════════════════════════════════════════════════
   COMPONENTES DO "SAIBA MAIS" (23/10/2026)

   O site estava corrido demais: a raiz tinha 24.000 px e a página do restaurante, 40.000 px. A regra
   nova é UMA promessa no topo, prova com tela real, poucos blocos curtos e o detalhe numa PÁGINA
   EXCLUSIVA, ligada por um botão "Saiba mais". Este arquivo tem só o que é novo e é COMPARTILHADO por
   todas as páginas de ramo e de "saiba mais" (um componente, não uma cópia por página). Depende dos
   tokens de /site/estilo.css (--acento, --borda, --papel, --tinta...). A raiz embute uma cópia destas
   regras no <style> dela (a raiz não pode ter arquivo externo: ver /site/estilo.css).
   ══════════════════════════════════════════════════════════════════════════════ */

/* foco visível para tudo o que é novo (teclado) */
.sm-card__mais:focus-visible,.sm-robo-link:focus-visible,.sm-chip:focus-visible,.sm-topo .volta:focus-visible{
  outline:3px solid var(--marinho,#2b3a80);outline-offset:3px;border-radius:.6rem}

/* ── topo das páginas exclusivas ── */
.sm-topo{padding:clamp(1.4rem,3.5vw,2.4rem) 0 clamp(1rem,2.4vw,1.6rem);background:var(--creme,#f7f6f3);border-bottom:1px solid var(--borda)}
.sm-topo .volta{display:inline-flex;align-items:center;gap:.4rem;min-height:44px;font-weight:700;font-size:.95rem;color:var(--acento-forte);text-decoration:none}
.sm-topo .volta svg{width:16px;height:16px}
.sm-topo h1{font-size:clamp(1.7rem,4.4vw,2.7rem);line-height:1.12;margin:.3rem 0 .7rem;max-width:26ch;font-weight:900;letter-spacing:-.015em}
.sm-topo__lead{max-width:64ch;color:var(--tinta-suave);font-size:1.08rem;margin:0}
.sm-topo__acoes{display:flex;flex-wrap:wrap;gap:.7rem;margin-top:1.2rem}

/* ── etiqueta de situação: Teste, Em breve, Premium ── */
.sm-etiq{display:inline-block;margin-left:.5rem;padding:.12rem .55rem;border-radius:999px;font-size:.72rem;font-weight:800;letter-spacing:.04em;text-transform:uppercase;vertical-align:middle;background:#fff3cd;color:#6b4e00;border:1px solid #e6cf7a}
.sm-etiq--breve{background:#e9ecf8;color:#2b3a80;border-color:#b9c1e6}

/* ── grade de cartões "Saiba mais" ── */
.sm-grade{display:grid;gap:1rem;grid-template-columns:1fr;margin:0;padding:0;list-style:none}
@media(min-width:620px){.sm-grade{grid-template-columns:repeat(2,1fr)}}
@media(min-width:980px){.sm-grade{grid-template-columns:repeat(3,1fr)}}
.sm-card{display:flex;flex-direction:column;gap:.45rem;padding:1.2rem 1.2rem 1rem;background:var(--papel);border:1px solid var(--borda);border-radius:1.2rem;box-shadow:var(--sombra)}
.sm-card__ic{font-size:1.6rem;line-height:1}
.sm-card h3{margin:0;font-size:1.12rem;line-height:1.25;font-weight:800}
.sm-card p{margin:0;color:var(--tinta-suave);font-size:.97rem}
.sm-card__mais{margin-top:auto;padding-top:.3rem;min-height:44px;display:inline-flex;align-items:center;gap:.35rem;font-weight:800;color:var(--acento-forte);text-decoration:none}
.sm-card__mais:hover{text-decoration:underline}
.sm-outras{margin:1.4rem 0 0;display:flex;flex-wrap:wrap;gap:.5rem .9rem;align-items:center;font-size:.95rem;color:var(--tinta-suave)}
.sm-chip{display:inline-flex;align-items:center;min-height:44px;padding:.2rem .9rem;border:1px solid var(--borda-forte);border-radius:999px;background:var(--papel);color:var(--tinta);text-decoration:none;font-weight:700;font-size:.9rem}
.sm-chip:hover{border-color:var(--acento);color:var(--acento-forte)}

/* ── três passos ── */
.sm-passos{display:grid;gap:1rem;grid-template-columns:1fr;margin:0;padding:0;list-style:none;counter-reset:smp}
@media(min-width:760px){.sm-passos{grid-template-columns:repeat(3,1fr)}}
.sm-passo{counter-increment:smp;position:relative;padding:1.1rem 1.1rem 1.1rem 3.6rem;background:var(--papel);border:1px solid var(--borda);border-radius:1.2rem}
.sm-passo::before{content:counter(smp);position:absolute;left:1rem;top:1rem;width:2rem;height:2rem;border-radius:50%;background:var(--acento);color:#fff;font-weight:900;display:grid;place-items:center}
.sm-passo b{display:block;font-size:1.05rem;margin-bottom:.15rem}
.sm-passo span{color:var(--tinta-suave);font-size:.96rem}
.sm-nota{max-width:62ch;margin:1.2rem auto 0;text-align:center;color:var(--tinta-suave);font-size:.95rem}

/* ── seções compactas ── */
.secao--compacta{padding:clamp(1.8rem,4vw,3rem) 0}
.sm-mais-detalhes{max-width:760px;margin:1.2rem auto 0}
.sm-mais-detalhes>summary{font-weight:800;cursor:pointer;min-height:44px;display:flex;align-items:center}
.sm-mais-detalhes[open]>summary{margin-bottom:.8rem}
.sm-aberto-largo{max-width:none}

/* ── a imagem do Frédi ganha o botão ── */
.sm-robo-link{display:inline-flex;align-items:center;justify-content:center;gap:.4rem;min-height:44px;margin-top:.5rem;padding:.55rem 1.1rem;border-radius:999px;background:var(--acento);color:#fff;font-weight:800;font-size:.95rem;text-decoration:none;box-shadow:0 8px 18px var(--acento-sombra)}
.sm-robo-link:hover{background:var(--acento-forte)}
.sm-fredi{display:grid;gap:1.4rem;align-items:center;grid-template-columns:1fr}
@media(min-width:760px){.sm-fredi{grid-template-columns:200px 1fr}}
.sm-fredi img{width:100%;max-width:200px;height:auto;margin-inline:auto;display:block}

/* ── tabela de dados "em uma olhada" ── */
.sm-preco{max-width:720px;margin:0 auto;text-align:center}
.sm-preco__v{margin:.4rem 0 .2rem;font-size:clamp(1.6rem,4.2vw,2.3rem);font-weight:900;line-height:1.15}
.sm-preco__v small{display:block;margin-top:.3rem;font-size:1rem;font-weight:500;color:var(--tinta-suave)}

@media (prefers-reduced-motion:reduce){.sm-card,.sm-chip{transition:none}}