/* ==========================================================================
   Setfree — camada de aprimoramento (sf-enhance.css)
   --------------------------------------------------------------------------
   O site é exportado de um construtor visual e usa ESTILOS INLINE em quase
   todos os elementos. Por isso muitas regras aqui precisam de !important:
   não é desleixo, é o único jeito de sobrepor `style=""` sem reescrever as
   19 páginas. As classes .sf-* são aplicadas em runtime por sf-enhance.js.

   Ordem: 1) tokens  2) acessibilidade  3) responsivo  4) movimento  5) print
   ========================================================================== */

:root {
  --sf-accent: #13BE9F;
  /* CONTRASTE EM DOIS NÍVEIS.
     O acento da marca #13BE9F sobre #F4F3F0 dá ~1.9:1 — reprova até o mínimo
     de 3:1 de texto grande. Mas a WCAG exige 4.5:1 só para texto normal;
     texto grande (>=24px, ou >=18.7px bold) precisa apenas de 3:1. Usar um
     único tom escuro em tudo apagaria o brilho da marca nas manchetes à toa.
     O site tem DUAS superfícies claras (#F4F3F0 e #E7E6E2). Os tons abaixo
     foram calibrados para passar na MAIS ESCURA das duas — que é o caso
     mais difícil — e portanto passam nas duas:
       --sf-accent-text    #086B59 -> 5.07:1 em #E7E6E2 / 5.78:1 em #F4F3F0
       --sf-accent-display #0E9077 -> 3.17:1 em #E7E6E2 / 3.62:1 em #F4F3F0
     Nenhum dos dois substitui o acento como cor de FUNDO, que permanece
     #13BE9F com texto escuro por cima. */
  --sf-accent-text: #086B59;
  --sf-accent-display: #0E9077;
  --sf-ink: #0D0D0D;
  --sf-muted: #5D5D5D;
  --sf-focus: #0A7A66;
  --sf-bg: #F4F3F0;
  --sf-surface: #E7E6E2;
  --sf-radius: 20px;
  --sf-tap: 44px;
}

/* ==========================================================================
   1. ACESSIBILIDADE
   ========================================================================== */

/* --- Skip link: primeiro elemento focável da página ---------------------- */
.sf-skip {
  position: absolute;
  left: 12px;
  top: -100px;
  z-index: 999;
  background: var(--sf-ink);
  color: #fff !important;
  font: 600 15px/1 'Archivo', system-ui, sans-serif;
  padding: 14px 20px;
  border-radius: 10px;
  text-decoration: none;
  transition: top .18s ease;
}
.sf-skip:focus {
  top: 12px;
  outline: 3px solid var(--sf-accent);
  outline-offset: 2px;
}

/* --- Foco visível: o export não define NENHUM estilo de foco ------------- */
:focus-visible {
  outline: 3px solid var(--sf-focus) !important;
  outline-offset: 3px !important;
  border-radius: 6px;
}
/* Sobre superfícies escuras o outline escuro some — inverte para o acento. */
.sf-on-dark :focus-visible,
footer :focus-visible {
  outline-color: var(--sf-accent) !important;
}
/* Alvo do skip link não deve mostrar anel ao receber foco programático. */
[tabindex="-1"]:focus {
  outline: none !important;
}

/* --- Contraste de texto: corrige o acento usado como cor de texto -------- */
/* Aplicado por JS somente onde o acento é COR DE TEXTO sobre fundo claro.  */
.sf-accent-text {
  color: var(--sf-accent-text) !important;
}
.sf-accent-display {
  color: var(--sf-accent-display) !important;
}
/* Os pseudo-estados do runtime (style-hover="color: #13BE9F") voltavam ao
   acento puro no hover, caindo para ~2.1:1 justamente quando o usuário está
   mirando o elemento. Estas regras seguram o tom acessível também no hover. */
.sf-accent-text:hover,
.sf-accent-text:focus-visible,
.sf-hover-accent:hover,
.sf-hover-accent:focus-visible {
  color: var(--sf-accent-text) !important;
}
.sf-accent-display:hover,
.sf-accent-display:focus-visible {
  color: var(--sf-accent-display) !important;
}

/* --- Alvos de toque ----------------------------------------------------- */
@media (pointer: coarse) {
  .sf-nav-links a,
  footer a,
  .sf-tap {
    min-height: var(--sf-tap);
    display: inline-flex !important;
    align-items: center;
  }
}

/* ==========================================================================
   2. RESPONSIVO
   O export não tem NENHUM @media max-width. Tudo abaixo é novo.
   ========================================================================== */

/* Trava o estouro horizontal na raiz, não só no wrapper interno. */
html,
body {
  max-width: 100%;
  overflow-x: hidden;
}

/* Trava de rolagem aplicada ao ELEMENTO RAIZ, não ao body.
   Motivo: o navegador só propaga o overflow do <body> para a viewport quando
   o <html> é `visible` nos dois eixos. Como declaramos overflow-x:hidden no
   html acima, essa propagação fica desligada — e `body{overflow:hidden}`
   simplesmente não trava nada. Com a gaveta ou a paleta abertas, o fundo
   continuava rolando por baixo do painel. */
html.sf-travado {
  overflow: hidden !important;
}

/* Impede que qualquer mídia estoure o container. */
img,
svg,
video,
canvas {
  max-width: 100%;
}

/* --- Navegação móvel ---------------------------------------------------- */
/* O botão só existe em runtime; fica oculto no desktop. */
.sf-burger {
  display: none;
  align-items: center;
  justify-content: center;
  width: 44px;
  height: 44px;
  margin-left: auto;
  background: transparent;
  border: 1px solid rgba(13, 13, 13, .16);
  border-radius: 12px;
  cursor: pointer;
  color: var(--sf-ink);
  flex: 0 0 auto;
}
.sf-burger svg {
  width: 20px;
  height: 20px;
  display: block;
}
.sf-burger .sf-burger-x {
  display: none;
}
.sf-burger[aria-expanded="true"] .sf-burger-x {
  display: block;
}
.sf-burger[aria-expanded="true"] .sf-burger-bars {
  display: none;
}

/* Gaveta: fora do fluxo, some sem animação se o usuário pedir menos movimento */
.sf-drawer {
  position: fixed;
  inset: 68px 0 auto 0;
  background: rgba(244, 243, 240, .98);
  backdrop-filter: blur(16px);
  border-bottom: 1px solid rgba(13, 13, 13, .1);
  padding: 10px 20px 22px;
  display: none;
  flex-direction: column;
  gap: 2px;
  z-index: 49;
  max-height: calc(100dvh - 68px);
  overflow-y: auto;
  overscroll-behavior: contain;
}
.sf-drawer[data-open="true"] {
  display: flex;
}
.sf-drawer a {
  font-family: 'Archivo', system-ui, sans-serif !important;
  font-size: 16px !important;
  letter-spacing: 0 !important;
  color: var(--sf-ink) !important;
  padding: 14px 4px;
  min-height: var(--sf-tap);
  display: flex;
  align-items: center;
  border-bottom: 1px solid rgba(13, 13, 13, .07);
}
.sf-drawer a:last-of-type {
  border-bottom: 0;
}
.sf-drawer .sf-drawer-lang {
  display: flex;
  gap: 8px;
  padding-top: 16px;
}
/* Fechar dentro da própria gaveta: o hambúrguer fica inert enquanto ela
   está aberta, então este é o único controle de fechar acessível ao teclado. */
.sf-drawer-fechar {
  align-self: flex-end;
  width: 44px;
  height: 44px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  background: transparent;
  border: 1px solid rgba(13, 13, 13, .16);
  border-radius: 12px;
  color: var(--sf-ink);
  cursor: pointer;
  margin-bottom: 4px;
}
.sf-drawer-fechar svg {
  width: 20px;
  height: 20px;
  display: block;
}

@media (max-width: 1080px) {
  .sf-nav-links {
    display: none !important;
  }
  .sf-burger {
    display: inline-flex;
  }
  /* As ações (PT/EN + WhatsApp) migram para a gaveta abaixo de 1080. */
  .sf-nav-actions {
    margin-left: 8px;
  }
}

@media (max-width: 560px) {
  /* Abaixo de 560 o botão WhatsApp do topo compete com o hambúrguer:
     mantemos o WhatsApp (é o CTA principal) e encolhemos o toggle de idioma. */
  .sf-nav-actions .sf-lang-toggle {
    display: none !important;
  }
}

/* --- Containers --------------------------------------------------------- */
/* Grades de duas colunas com piso fixo em minmax() (há 23 delas, com pisos
   entre 600px e 710px) NÃO encolhem sozinhas: minmax() impede a trilha de
   descer do piso, então elas estouram a viewport muito antes dos 768px.
   Colapsam num breakpoint próprio, mais alto. */
@media (max-width: 1024px) {
  .sf-grid-collapse {
    grid-template-columns: 1fr !important;
  }
}

@media (max-width: 768px) {
  .sf-container {
    padding-left: 20px !important;
    padding-right: 20px !important;
  }
  /* Faixas horizontais que dependiam de espaço lateral. */
  .sf-row-wrap {
    flex-wrap: wrap !important;
  }
  /* Cabeçalho herói: reduz o respiro vertical exagerado no celular. */
  .sf-hero {
    min-height: auto !important;
    padding-top: 96px !important;
    padding-bottom: 56px !important;
  }
}

@media (max-width: 480px) {
  .sf-container {
    padding-left: 16px !important;
    padding-right: 16px !important;
  }
  /* Nada com nowrap deve forçar scroll lateral no celular. */
  .sf-nowrap-release {
    white-space: normal !important;
  }
  /* Botões de largura total: mais fáceis de acertar com o polegar. */
  .sf-cta-stack {
    width: 100%;
    justify-content: center;
  }
}

/* --- Uso com uma mão: o WhatsApp flutuante vai para o alcance do polegar - */
@media (max-width: 768px) {
  #sf-float-wa {
    bottom: max(16px, env(safe-area-inset-bottom)) !important;
    right: 16px !important;
  }
}

/* ==========================================================================
   2b. PALETA DE COMANDOS (Ctrl/Cmd + K, ou "/")
   ========================================================================== */

#sf-paleta[hidden] { display: none !important; }
#sf-paleta {
  position: fixed;
  inset: 0;
  z-index: 200;
  display: flex;
  align-items: flex-start;
  justify-content: center;
  padding: 12vh 16px 16px;
}
.sf-paleta-fundo {
  position: absolute;
  inset: 0;
  background: rgba(13, 13, 13, .45);
  backdrop-filter: blur(3px);
}
.sf-paleta-caixa {
  /* A fonte do site é declarada num style inline da div raiz, não no body.
     Como a paleta é filha do body, sem isto ela cairia na serifada padrão. */
  font-family: 'Archivo', system-ui, sans-serif;
  color: #0D0D0D;
  position: relative;
  width: 100%;
  max-width: 560px;
  background: #F4F3F0;
  border: 1px solid rgba(13, 13, 13, .12);
  border-radius: 18px;
  box-shadow: 0 24px 60px rgba(0, 0, 0, .26);
  overflow: hidden;
  display: flex;
  flex-direction: column;
  max-height: 70vh;
}
#sf-paleta-input {
  font: 400 17px/1.4 'Archivo', system-ui, sans-serif;
  border: 0;
  border-bottom: 1px solid rgba(13, 13, 13, .1);
  background: transparent;
  color: #0D0D0D;
  padding: 18px 20px;
  outline: none;
  width: 100%;
}
#sf-paleta-lista {
  list-style: none;
  margin: 0;
  padding: 6px;
  overflow-y: auto;
  flex: 1;
}
#sf-paleta-lista li {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  padding: 12px 14px;
  border-radius: 11px;
  cursor: pointer;
  font-size: 15px;
  min-height: 44px;
}
#sf-paleta-lista li.sf-sel {
  background: #E7E6E2;
}
#sf-paleta-lista li.sf-sel span {
  font-weight: 600;
}
#sf-paleta-lista li em {
  font-style: normal;
  font-family: 'IBM Plex Mono', monospace;
  font-size: 10px;
  letter-spacing: .12em;
  text-transform: uppercase;
  color: #5D5D5D;
  white-space: nowrap;
}
.sf-paleta-vazio {
  padding: 18px 14px !important;
  color: #5D5D5D;
  font-size: 14.5px;
  cursor: default !important;
}
.sf-paleta-rodape {
  display: flex;
  gap: 16px;
  padding: 10px 18px;
  border-top: 1px solid rgba(13, 13, 13, .08);
  font-family: 'IBM Plex Mono', monospace;
  font-size: 10.5px;
  letter-spacing: .08em;
  color: #5D5D5D;
}
/* Num toque não há teclado físico: a dica de atalho vira ruído. */
@media (pointer: coarse) {
  .sf-paleta-rodape { display: none; }
  #sf-paleta { padding-top: 6vh; }
}

/* ==========================================================================
   3. MOVIMENTO
   ========================================================================== */

/* Revelação mais curta: 0.8s deixava blocos inteiros em branco ao rolar. */
[data-reveal] {
  transition-duration: .45s !important;
}

/* Rede de segurança: se o JS de revelação falhar, o conteúdo aparece. */
.sf-revealed {
  opacity: 1 !important;
  transform: none !important;
}

@media (prefers-reduced-motion: reduce) {
  *,
  *::before,
  *::after {
    animation-duration: .001ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: .001ms !important;
    scroll-behavior: auto !important;
  }
  /* Sem movimento, o conteúdo precisa nascer visível — nunca em opacity 0. */
  [data-reveal] {
    opacity: 1 !important;
    transform: none !important;
  }
  html {
    scroll-behavior: auto !important;
  }
}

/* ==========================================================================
   4. IMPRESSÃO
   Compradores públicos imprimem/salvam páginas de produto para anexar ao
   processo. Sem isto a página sai com nav fixo por cima e links sem destino.
   ========================================================================== */

@media print {
  .sf-nav,
  .sf-drawer,
  .sf-burger,
  .sf-skip,
  #sf-float-wa,
  .sf-noprint {
    display: none !important;
  }
  [data-reveal] {
    opacity: 1 !important;
    transform: none !important;
  }
  body {
    background: #fff !important;
  }
  /* Revela o destino dos links no papel. */
  a[href^="http"]::after {
    content: " (" attr(href) ")";
    font-size: 10px;
    color: #555;
    word-break: break-all;
  }
  section,
  .sf-card {
    break-inside: avoid;
  }
}