/*
 * Kit base — fundação comum: reset, acessibilidade e layout fluido.
 * Não define identidade visual. Não use overflow-x: hidden global aqui:
 * o validador precisa enxergar transbordo real em 320 px.
 */
*,
*::before,
*::after {
  box-sizing: border-box;
}

html {
  -webkit-text-size-adjust: 100%;
  text-size-adjust: 100%;
  scroll-padding-top: var(--espaco-6, 64px);
}

body {
  margin: 0;
  background: var(--cor-fundo, #f7f7f5);
  color: var(--cor-texto, #1f1f1d);
  font-family: var(--fonte-texto, Arial, sans-serif);
  font-size: 1rem;
  line-height: 1.6;
  -webkit-font-smoothing: antialiased;
}

body.dialog-open {
  overflow: hidden;
}

img,
svg,
video,
canvas,
picture {
  display: block;
  max-width: 100%;
}

img,
video {
  height: auto;
}

button,
input,
select,
textarea {
  color: inherit;
  font: inherit;
}

a {
  color: inherit;
}

h1,
h2,
h3,
h4,
p,
li,
dt,
dd,
figcaption,
blockquote,
button,
a {
  overflow-wrap: anywhere;
}

:focus-visible {
  outline: var(--foco, 3px solid currentColor);
  outline-offset: 4px;
}

.skip-link {
  position: fixed;
  z-index: 1000;
  top: var(--espaco-3, 16px);
  left: var(--espaco-3, 16px);
  padding: 12px 18px;
  background: var(--cor-superficie, #fff);
  color: var(--cor-texto, #1f1f1d);
  transform: translateY(-200%);
}

.skip-link:focus {
  transform: translateY(0);
}

.sr-only {
  position: absolute;
  width: 1px;
  height: 1px;
  padding: 0;
  margin: -1px;
  overflow: hidden;
  clip: rect(0, 0, 0, 0);
  white-space: nowrap;
  border: 0;
}

.container {
  width: min(100% - 2 * var(--espaco-4, 24px), var(--largura-max, 1200px));
  margin-inline: auto;
}

@media (max-width: 400px) {
  .container {
    width: min(100% - 2 * var(--espaco-3, 16px), var(--largura-max, 1200px));
  }
}

/*
 * Faixa de passar para o lado (kit 0.6.0), para coleções que se folheiam: fotos de resultado, cartões
 * de tratamento, avaliações. O próximo item aparece pela borda (é o que mostra que dá para passar), a
 * faixa para em cada item e nada passa sozinho. Uso: class="faixa" no elemento cujos filhos diretos são
 * os itens. A classe vale em qualquer largura; para ter a faixa só no celular, o tema devolve a coleção à
 * grade num @media de computador (exemplo no tema-inicial.css). Dentro de .container, a faixa vai
 * até a borda da tela sem a página escorregar. Ajustes no tema: --faixa-item (largura) e --faixa-espaco.
 * Não use para escolhas que a pessoa precisa comparar, nem para esconder ação ou informação essencial.
 */
.faixa {
  --faixa-recuo: 0px;
  display: flex;
  gap: var(--faixa-espaco, 14px);
  margin-inline: calc(-1 * var(--faixa-recuo));
  padding: 2px var(--faixa-recuo) 10px;
  overflow-x: auto;
  overscroll-behavior-x: contain;
  scroll-snap-type: x mandatory;
  scroll-padding-inline: var(--faixa-recuo);
  scrollbar-width: thin; /* com mouse, a barra mostra que dá para passar; no toque, some */
}

@media (hover: none) {
  .faixa {
    scrollbar-width: none;
  }

  .faixa::-webkit-scrollbar {
    display: none;
  }
}

.faixa > * {
  flex: 0 0 var(--faixa-item, min(78%, 340px));
  min-width: 0;
  scroll-snap-align: start;
}

.container .faixa {
  --faixa-recuo: var(--espaco-4, 24px);
}

@media (max-width: 400px) {
  .container .faixa {
    --faixa-recuo: var(--espaco-3, 16px);
  }
}

@media (prefers-reduced-motion: reduce) {
  html {
    scroll-behavior: auto;
  }

  *,
  *::before,
  *::after {
    animation-duration: 0.01ms !important;
    animation-iteration-count: 1 !important;
    scroll-behavior: auto !important;
    transition-duration: 0.01ms !important;
  }
}