/* ==========================================================
   BASE — tokens, fontes, reset e componentes compartilhados
   ========================================================== */

@font-face {
  font-family: "Satoshi";
  src: url("../assets/fonts/Satoshi-Variable.woff2") format("woff2");
  font-weight: 300 900;
  font-style: normal;
  font-display: swap;
}

@font-face {
  font-family: "Gotham";
  src: url("../assets/fonts/Gotham-Light.woff2") format("woff2");
  font-weight: 300;
  font-display: swap;
}
@font-face {
  font-family: "Gotham";
  src: url("../assets/fonts/Gotham-Book.woff2") format("woff2");
  font-weight: 400;
  font-display: swap;
}
@font-face {
  font-family: "Gotham";
  src: url("../assets/fonts/Gotham-Medium.woff2") format("woff2");
  font-weight: 500;
  font-display: swap;
}
@font-face {
  font-family: "Gotham";
  src: url("../assets/fonts/Gotham-Bold.woff2") format("woff2");
  font-weight: 700;
  font-display: swap;
}

:root {
  /* Cores (IDV / Figma) */
  --cor-vinho: #420c0c;
  --cor-areia: #ccbfb2;
  --cor-clara: #f2f0ed;

  /* Tipografia */
  --fonte-base: "Satoshi", system-ui, -apple-system, "Segoe UI", sans-serif;
  --fonte-gotham: "Gotham", "Montserrat", system-ui, sans-serif;

  /* Layout */
  --container: 1155px;
  --gutter: 24px;
  --raio-pill: 100px;

  /* Ícone de check — SVG original do Figma (IconCheck-secao4.svg).
     Usado como máscara: a cor vem do background-color de quem usa. */
  --icone-check: url("data:image/svg+xml,%3Csvg viewBox='0 0 22 22' fill='none' xmlns='http://www.w3.org/2000/svg'%3E %3Cpath d='M11 0C4.925 0 0 4.925 0 11C0 17.075 4.925 22 11 22C17.075 22 22 17.075 22 11C22 4.925 17.075 0 11 0ZM15.768 9.14C15.8558 9.03964 15.9226 8.92274 15.9646 8.79617C16.0065 8.6696 16.0227 8.53591 16.0123 8.40298C16.0018 8.27005 15.9648 8.14056 15.9036 8.02213C15.8423 7.90369 15.758 7.79871 15.6555 7.71334C15.5531 7.62798 15.4346 7.56396 15.3071 7.52506C15.1796 7.48616 15.0455 7.47316 14.9129 7.48683C14.7802 7.50049 14.6517 7.54055 14.5347 7.60463C14.4178 7.66872 14.3149 7.75554 14.232 7.86L9.932 13.019L7.707 10.793C7.5184 10.6108 7.2658 10.51 7.0036 10.5123C6.7414 10.5146 6.49059 10.6198 6.30518 10.8052C6.11977 10.9906 6.0146 11.2414 6.01233 11.5036C6.01005 11.7658 6.11084 12.0184 6.293 12.207L9.293 15.207C9.39126 15.3052 9.50889 15.3818 9.63842 15.4321C9.76794 15.4823 9.9065 15.505 10.0453 15.4986C10.184 15.4923 10.32 15.4572 10.4444 15.3954C10.5688 15.3337 10.6791 15.2467 10.768 15.14L15.768 9.14Z' fill-rule='evenodd' clip-rule='evenodd' fill='%23420B0C'/%3E %3C/svg%3E");
}

*,
*::before,
*::after {
  box-sizing: border-box;
}

html {
  -webkit-text-size-adjust: 100%;
  scroll-behavior: smooth;
}

body {
  margin: 0;
  font-family: var(--fonte-base);
  color: var(--cor-vinho);
  background: var(--cor-areia);
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
}

img {
  display: block;
  max-width: 100%;
  height: auto;
}

a {
  color: inherit;
}

/* Referência de largura para seções que escalam com a tela (unidade cqw) */
main {
  container-type: inline-size;
}

.container {
  width: 100%;
  max-width: calc(var(--container) + var(--gutter) * 2);
  margin-inline: auto;
  padding-inline: var(--gutter);
}

.sem-quebra {
  white-space: nowrap; /* mantém junto (ex.: "R$ 361,58"). Não usar  : na Gotham ele fica largo demais */
}

.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;
}

/* ---------- Botão contorno (pill) ---------- */
.btn-outline {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  border: 2px solid var(--cor-vinho);
  border-radius: var(--raio-pill);
  color: var(--cor-vinho);
  background: transparent;
  font-family: var(--fonte-base);
  font-weight: 700;
  text-transform: uppercase;
  text-decoration: none;
  line-height: 1;
  white-space: nowrap;
  transition: background-color 0.25s ease, color 0.25s ease;
}

.btn-outline:hover,
.btn-outline:focus-visible {
  background: var(--cor-vinho);
  color: var(--cor-areia);
}

.btn-outline:focus-visible {
  outline: 2px solid currentColor;
  outline-offset: 3px;
}

/* Variante clara (sobre fundos escuros) */
.btn-outline--claro {
  border-color: var(--cor-clara);
  color: var(--cor-clara);
}

.btn-outline--claro:hover,
.btn-outline--claro:focus-visible {
  background: var(--cor-clara);
  color: var(--cor-vinho);
}