/* ==========================================================================
   base.css
   Reset moderno + tipografia + utilitários globais.
   ========================================================================== */

/* ---------------------------------------------------------------------- */
/* Fonts                                                                  */
/* ---------------------------------------------------------------------- */

/* Avant Garde: institucional. Hospedado localmente em site/assets/fonts/. */
@font-face {
  font-family: "AvantGarde";
  src: url("../assets/fonts/AVGARDN.TTF") format("truetype");
  font-weight: 400;
  font-style: normal;
  font-display: swap;
}
@font-face {
  font-family: "AvantGarde";
  src: url("../assets/fonts/AVGARDD.TTF") format("truetype");
  font-weight: 700;
  font-style: normal;
  font-display: swap;
}
@font-face {
  font-family: "AvantGarde";
  src: url("../assets/fonts/AVGARDDO.TTF") format("truetype");
  font-weight: 700;
  font-style: italic;
  font-display: swap;
}

/* Montserrat: 4 pesos (400/500/600/700). Italic via fallback sintético. */
@font-face {
  font-family: "Montserrat";
  src: url("../assets/fonts/Montserrat-Regular.otf") format("opentype");
  font-weight: 400;
  font-style: normal;
  font-display: swap;
}
@font-face {
  font-family: "Montserrat";
  src: url("../assets/fonts/Montserrat-Medium.otf") format("opentype");
  font-weight: 500;
  font-style: normal;
  font-display: swap;
}
@font-face {
  font-family: "Montserrat";
  src: url("../assets/fonts/Montserrat-SemiBold.otf") format("opentype");
  font-weight: 600;
  font-style: normal;
  font-display: swap;
}
@font-face {
  font-family: "Montserrat";
  src: url("../assets/fonts/Montserrat-Bold.otf") format("opentype");
  font-weight: 700;
  font-style: normal;
  font-display: swap;
}

/* ---------------------------------------------------------------------- */
/* Reset                                                                  */
/* ---------------------------------------------------------------------- */

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

html {
  -webkit-text-size-adjust: 100%;
  scroll-behavior: smooth;
  text-rendering: optimizeLegibility;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  /* Precisa estar AQUI, não só no body: com o html em `visible`, o navegador
     propaga o overflow do body para o viewport — o body para de clipar e a
     página continua arrastável de lado no mobile. `clip` não cria container
     de scroll, então não quebra sticky nem o scroll suave das âncoras. */
  overflow-x: clip;
}

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

body {
  min-height: 100dvh;
  background: var(--bg);
  color: var(--fg);
  font-family: var(--font-body);
  font-size: var(--step-0);
  font-weight: var(--w-regular);
  line-height: var(--lh-body);
  overflow-x: clip;
}

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

a {
  color: inherit;
  text-decoration: none;
}

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

button {
  background: none;
  border: 0;
  cursor: pointer;
}

ul,
ol {
  list-style: none;
}

/* Focus visible padronizado */
:where(a, button, input, select, textarea, [tabindex]):focus-visible {
  outline: 2px solid var(--brand);
  outline-offset: 3px;
  border-radius: var(--radius-xs);
}

::selection {
  background: var(--brand);
  color: var(--paper);
}

/* ---------------------------------------------------------------------- */
/* Tipografia base                                                        */
/* ---------------------------------------------------------------------- */

h1, h2, h3, h4, h5, h6 {
  font-family: var(--font-display);
  font-weight: var(--w-bold);
  letter-spacing: var(--track-tight);
  line-height: var(--lh-display);
  text-wrap: balance;
}

p {
  text-wrap: pretty;
  max-width: var(--measure);
}

strong { font-weight: var(--w-semi); }
em     { font-style: italic; }

/* ---------------------------------------------------------------------- */
/* Utilitários                                                            */
/* ---------------------------------------------------------------------- */

.visually-hidden {
  position: absolute;
  width: 1px;
  height: 1px;
  padding: 0;
  margin: -1px;
  overflow: hidden;
  clip: rect(0 0 0 0);
  clip-path: inset(50%);
  white-space: nowrap;
  border: 0;
}

.skip-link {
  position: absolute;
  top: 0;
  left: 50%;
  transform: translateX(-50%) translateY(-150%);
  z-index: var(--z-skip);
  padding: var(--space-xs) var(--space-m);
  background: var(--ink);
  color: var(--paper);
  font-weight: var(--w-semi);
  border-radius: 0 0 var(--radius-md) var(--radius-md);
  transition: transform var(--duration) var(--ease-out);
}
.skip-link:focus-visible {
  transform: translateX(-50%) translateY(0);
  outline-offset: 2px;
}

.shell {
  width: 100%;
  max-width: var(--container);
  margin-inline: auto;
  padding-inline: var(--gutter);
}

.shell--wide   { max-width: var(--container-wide); }
.shell--narrow { max-width: var(--container-narrow); }

.eyebrow {
  display: inline-flex;
  align-items: center;
  gap: var(--space-2xs);
  font-family: var(--font-body);
  font-size: var(--step--1);
  font-weight: var(--w-semi);
  letter-spacing: var(--track-eyebrow);
  text-transform: uppercase;
  color: var(--brand);
}
.eyebrow::before {
  content: "";
  width: 1.75rem;
  height: 1px;
  background: currentColor;
}
.eyebrow--on-deep   { color: oklch(85.0% 0.060 27.5); }
.eyebrow--on-red    { color: oklch(98% 0.005 27.5); }
.eyebrow--on-green  { color: var(--brand); }
.eyebrow--neutral   { color: var(--ink-soft); }
.eyebrow--no-rule::before { display: none; }

/* ---------------------------------------------------------------------- */
/* CTAs (botões e links de ação)                                          */
/* ---------------------------------------------------------------------- */

.cta {
  position: relative;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 0.65rem;
  padding: 1.05rem 1.6rem;
  min-height: 2.75rem;
  font-family: var(--font-body);
  font-size: var(--step-0);
  font-weight: var(--w-semi);
  letter-spacing: 0.01em;
  line-height: 1;
  border-radius: var(--radius-pill);
  cursor: pointer;
  white-space: nowrap;
  isolation: isolate;
  transition:
    background 220ms cubic-bezier(0.22, 1, 0.36, 1),
    color 220ms cubic-bezier(0.22, 1, 0.36, 1),
    transform 160ms cubic-bezier(0.22, 1, 0.36, 1),
    box-shadow 220ms cubic-bezier(0.22, 1, 0.36, 1),
    border-color 220ms cubic-bezier(0.22, 1, 0.36, 1);
}
.cta:active {
  transform: translateY(1px) scale(0.99);
  transition-duration: 60ms;
}
.cta:focus-visible {
  /* outline persiste em High Contrast Mode (Windows) onde box-shadow é apagado. */
  outline: 2px solid var(--brand);
  outline-offset: 3px;
  box-shadow:
    0 0 0 1.5px var(--paper),
    0 0 0 3.5px var(--brand);
}

.cta__icon {
  width: 1.05em;
  height: 1.05em;
  flex-shrink: 0;
}

/* ---- Primary (vermelho) ---------------------------------------------- */
.cta--primary {
  background: var(--brand);
  color: var(--paper);
  box-shadow:
    inset 0 0 0 1px oklch(99% 0.005 27.5 / 0.18),
    var(--shadow-press),
    0 4px 14px -6px oklch(56% 0.215 27.5 / 0.45);
}
.cta--primary:hover {
  background: var(--brand-press);
  transform: translateY(-1px);
  box-shadow:
    inset 0 0 0 1px oklch(99% 0.005 27.5 / 0.22),
    0 10px 24px -8px oklch(56% 0.215 27.5 / 0.55);
}
.cta--primary:active {
  box-shadow:
    inset 0 0 0 1px oklch(99% 0.005 27.5 / 0.18),
    0 2px 6px -2px oklch(56% 0.215 27.5 / 0.40);
}

/* ---- Joy (verde vibrante) — text accent-deep p/ contraste WCAG AA ----- */
.cta--joy {
  background: var(--joy);
  color: var(--accent-deep);
  box-shadow:
    inset 0 0 0 1px oklch(28% 0.06 152 / 0.45),
    var(--shadow-press),
    0 4px 14px -6px oklch(72% 0.215 145 / 0.50);
}
.cta--joy:hover {
  background: var(--joy-press);
  color: var(--accent-deep);
  transform: translateY(-1px);
  box-shadow:
    inset 0 0 0 1px oklch(28% 0.06 152 / 0.55),
    0 10px 24px -8px oklch(72% 0.215 145 / 0.60);
}
.cta--joy:focus-visible {
  outline: 2px solid var(--accent-deep);
  outline-offset: 3px;
  box-shadow:
    0 0 0 1.5px var(--paper),
    0 0 0 3.5px var(--accent-deep);
}

/* ---- Paper (sobre fundo colorido) ------------------------------------ */
.cta--paper {
  background: var(--paper);
  color: var(--brand);
  box-shadow:
    inset 0 0 0 1px oklch(56% 0.215 27.5 / 0.18),
    0 1px 0 oklch(22% 0.105 22 / 0.04),
    0 4px 14px -6px oklch(22% 0.105 22 / 0.20);
}
.cta--paper:hover {
  background: var(--paper-2);
  color: var(--brand-press);
  transform: translateY(-1px);
  box-shadow:
    inset 0 0 0 1px var(--brand),
    0 10px 24px -8px oklch(22% 0.105 22 / 0.30);
}

/* ---- Ghost (outline vermelho sobre paper) ---------------------------- */
.cta--ghost {
  background: transparent;
  color: var(--brand);
  border: 1.5px solid var(--brand);
  overflow: hidden;
}
.cta--ghost::before {
  content: "";
  position: absolute;
  inset: 0;
  background: var(--brand);
  clip-path: inset(0 100% 0 0);
  transition: clip-path 280ms cubic-bezier(0.22, 1, 0.36, 1);
  z-index: -1;
}
.cta--ghost:hover { color: var(--paper); transform: translateY(-1px); }
.cta--ghost:hover::before { clip-path: inset(0 0 0 0); }

/* ---- Ghost light (outline branco sobre vermelho) --------------------- */
.cta--ghost-light {
  background: transparent;
  color: var(--paper);
  border: 1.5px solid oklch(99% 0.005 27.5 / 0.55);
  overflow: hidden;
}
.cta--ghost-light::before {
  content: "";
  position: absolute;
  inset: 0;
  background: var(--paper);
  clip-path: inset(0 100% 0 0);
  transition: clip-path 280ms cubic-bezier(0.22, 1, 0.36, 1);
  z-index: -1;
}
.cta--ghost-light:hover {
  color: var(--brand);
  border-color: var(--paper);
  transform: translateY(-1px);
}
.cta--ghost-light:hover::before { clip-path: inset(0 0 0 0); }
.cta--ghost-light:focus-visible {
  box-shadow:
    0 0 0 1.5px var(--brand),
    0 0 0 3.5px var(--paper);
}

/* ---- WhatsApp (verde-floresta) --------------------------------------- */
.cta--whatsapp {
  background: var(--accent-deep);
  color: var(--paper);
  box-shadow:
    inset 0 0 0 1px oklch(99% 0.005 27.5 / 0.18),
    0 4px 14px -6px oklch(36% 0.13 152 / 0.45);
}
.cta--whatsapp:hover {
  background: oklch(30.0% 0.130 152.0);
  transform: translateY(-1px);
  box-shadow: 0 10px 24px -8px oklch(36% 0.13 152 / 0.55);
}

/* ---- Inline (link sublinhado) ---------------------------------------- */
.cta--inline {
  position: relative;
  padding: 0 0 2px;
  background: transparent;
  border: 0;
  border-radius: 0;
  color: var(--brand);
  font-weight: var(--w-semi);
  isolation: auto;
  min-height: auto;
  transition: color 200ms cubic-bezier(0.22, 1, 0.36, 1);
}
.cta--inline::after {
  content: "";
  position: absolute;
  left: 0;
  right: 0;
  bottom: 0;
  height: 1.5px;
  background: currentColor;
  transform-origin: right;
  transform: scaleX(1);
  transition: transform 280ms cubic-bezier(0.22, 1, 0.36, 1);
}
.cta--inline:hover { color: var(--brand-press); }
.cta--inline:hover::after {
  transform: scaleX(0);
  transform-origin: left;
  animation: inlineUnderline 480ms cubic-bezier(0.22, 1, 0.36, 1) 80ms forwards;
}
@keyframes inlineUnderline {
  from { transform-origin: left; transform: scaleX(0); }
  to   { transform-origin: left; transform: scaleX(1); }
}
.cta--inline:focus-visible {
  outline: 2px solid var(--brand);
  outline-offset: 4px;
  box-shadow: none;
}

/* ---------------------------------------------------------------------- */
/* Tag (marcador de solução)                                              */
/* ---------------------------------------------------------------------- */

.tag {
  position: relative;
  display: inline-flex;
  align-items: center;
  padding: 0.4rem 0.85rem;
  min-height: 2rem;
  border: 1px solid var(--rule-strong);
  border-radius: var(--radius-pill);
  font-size: var(--step--1);
  font-weight: var(--w-medium);
  color: var(--ink-soft);
  background: transparent;
  isolation: isolate;
  transition:
    border-color 200ms cubic-bezier(0.22, 1, 0.36, 1),
    color 200ms cubic-bezier(0.22, 1, 0.36, 1) 80ms,
    transform 160ms cubic-bezier(0.22, 1, 0.36, 1);
}
.tag:active { transform: scale(0.97); transition-duration: 60ms; }

/* ---------------------------------------------------------------------- */
/* Section base                                                           */
/* ---------------------------------------------------------------------- */

section[aria-labelledby] {
  position: relative;
  padding-block: var(--space-2xl);
}

.section--alt    { background: var(--bg-alt); }
.section--deep   { background: var(--bg-deep); color: var(--fg-on-deep); }
.section--deep p { color: var(--fg-on-deep-soft); }

/* ---------------------------------------------------------------------- */
/* Section header (eyebrow + título + sub)                                */
/* ---------------------------------------------------------------------- */

.section-header {
  display: grid;
  gap: var(--space-2xs);
  max-width: 56rem;
  margin-bottom: var(--space-l);
}
.section-header > *:first-child {
  margin-bottom: var(--space-2xs);
}
.section-header__title {
  font-size: var(--step-5);
  letter-spacing: var(--track-tight);
  color: var(--brand);
}
.section-header__title em {
  font-style: italic;
  color: var(--accent-deep);
}
.section-header__sub {
  font-size: var(--step-1);
  color: var(--fg-soft);
  font-weight: var(--w-regular);
  max-width: 48ch;
}
.section--deep .section-header__sub { color: var(--fg-on-deep-soft); }