/* ==========================================================================
   Start Empresarial 2026 · base
   Tokens, reset, tipografia, botões e utilitários.
   Cores de marca: branco + laranja sobre preto.
   ========================================================================== */

:root {
  /* Superfícies */
  --bg-base: #0a0a0a;
  --bg-elevated: #141414;
  --bg-sunken: #050505;
  --bg-light: #ffffff;
  --bg-light-elevated: #f4f4f4;
  --border: #262626;
  --border-light: #e2e2e2;

  /* Texto */
  --text: #ffffff;
  --text-muted: #b0b0b0;
  /* #808080 é o cinza mais escuro que ainda passa AA (4.5:1) sobre --bg-elevated. */
  --text-faint: #808080;
  --text-on-light: #0a0a0a;
  --text-on-light-muted: #565656;

  /* Marca. #FF7F00 foi extraído do logo; #FE4D00 e o creme, da identidade do Instagram. */
  --orange: #ff7f00;
  --orange-bright: #ff9a33;
  --orange-deep: #e85d00;
  --orange-red: #fe4d00;
  --orange-soft: rgba(255, 127, 0, 0.12);
  --grad-cta: linear-gradient(135deg, #ff9a33 0%, #e85d00 100%);

  /* Bloco de marca (identidade do Instagram): creme + laranja-vermelho. */
  --cream: #edeae0;
  --cream-sunken: #e6e1d1;
  --cream-border: #d8d2bf;
  --text-on-cream: #1c1600;
  --text-on-cream-muted: #6a5c3d;

  --whatsapp: #25d366;

  /* Tipografia fluida */
  --font-display: "Anton", "Arial Narrow", sans-serif;
  --font-body: "Inter", system-ui, -apple-system, sans-serif;

  --text-xs: 0.75rem;
  --text-sm: 0.875rem;
  --text-base: clamp(1rem, 0.96rem + 0.2vw, 1.0625rem);
  --text-lg: clamp(1.0625rem, 1rem + 0.35vw, 1.25rem);
  --text-h3: clamp(1.375rem, 1.2rem + 0.8vw, 1.875rem);
  --text-h2: clamp(1.875rem, 1.35rem + 2.6vw, 3.75rem);
  --text-hero: clamp(2.25rem, 1.3rem + 4.6vw, 5.25rem);
  --text-stat: clamp(2rem, 1.4rem + 2.6vw, 3.5rem);

  /* Ritmo */
  --space-section: clamp(3.5rem, 2.2rem + 5vw, 7.5rem);
  --gutter: clamp(1.25rem, 0.8rem + 2vw, 2.5rem);
  --max-width: 1200px;
  --max-prose: 62ch;

  /* Motion */
  --duration-fast: 150ms;
  --duration-normal: 300ms;
  --duration-slow: 600ms;
  --ease-out-expo: cubic-bezier(0.16, 1, 0.3, 1);

  --radius-sm: 6px;
  --radius: 8px;
  --radius-lg: 14px;

  --shadow-orange: 0 10px 30px -12px rgba(242, 78, 0, 0.55);
}

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

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

* {
  margin: 0;
}

html {
  scroll-behavior: smooth;
  /* compensa o header fixo ao pular por âncora */
  scroll-padding-top: 88px;
  -webkit-text-size-adjust: 100%;
  /* Trava o balanço lateral no mobile: corta qualquer overflow horizontal (ex.: a faixa
     diagonal com scale) sem virar um scroll container nem quebrar o scroll suave. */
  overflow-x: clip;
}

body {
  background: var(--bg-base);
  color: var(--text);
  font-family: var(--font-body);
  font-size: var(--text-base);
  line-height: 1.6;
  -webkit-font-smoothing: antialiased;
  width: 100%;
  overflow-x: clip;
}

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

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

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

ul,
ol {
  list-style: none;
  padding: 0;
}

:focus-visible {
  outline: 2px solid var(--orange-bright);
  outline-offset: 3px;
  border-radius: 2px;
}

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

.display {
  font-family: var(--font-display);
  font-weight: 400;
  text-transform: uppercase;
  letter-spacing: -0.015em;
  line-height: 0.95;
}

h1.display {
  font-size: var(--text-hero);
}

h2.display {
  font-size: var(--text-h2);
}

h3.display {
  font-size: var(--text-h3);
  line-height: 1.05;
}

.accent {
  color: var(--orange);
}

.eyebrow {
  display: inline-flex;
  align-items: center;
  gap: 0.55em;
  font-size: var(--text-xs);
  font-weight: 600;
  letter-spacing: 0.15em;
  text-transform: uppercase;
  color: var(--orange);
  margin-bottom: 1.25rem;
}

.eyebrow::before {
  content: "";
  width: 6px;
  height: 6px;
  border-radius: 50%;
  background: var(--orange);
  flex: none;
}

.lead {
  font-size: var(--text-lg);
  color: var(--text-muted);
  max-width: var(--max-prose);
}

.muted {
  color: var(--text-muted);
}

/* --------------------------------------------------------------------------
   Layout
   -------------------------------------------------------------------------- */

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

.section {
  padding-block: var(--space-section);
  position: relative;
}

.section--light {
  background: var(--bg-light);
  color: var(--text-on-light);
}

.section--light .lead,
.section--light .muted {
  color: var(--text-on-light-muted);
}

.section--sunken {
  background: var(--bg-sunken);
}

/* --------------------------------------------------------------------------
   Bloco de marca creme (identidade do Instagram)
   Fundo creme, texto escuro, triângulos laranja nos cantos.
   -------------------------------------------------------------------------- */

.section--cream {
  background: var(--cream);
  color: var(--text-on-cream);
  overflow: hidden;
}

/* O conteúdo fica acima dos triângulos decorativos dos cantos. */
.section--cream .wrap {
  position: relative;
  z-index: 1;
}

.section--cream .lead,
.section--cream .muted {
  color: var(--text-on-cream-muted);
}

.section--cream .eyebrow,
.section--cream .accent {
  color: var(--orange-red);
}

.section--cream .eyebrow::before {
  background: var(--orange-red);
}

/* Cluster de triângulos no canto superior direito e inferior esquerdo,
   igual à moldura da arte do Instagram. Desenhado em SVG, some no mobile. */
.section--cream::before,
.section--cream::after {
  content: "";
  position: absolute;
  width: clamp(120px, 16vw, 240px);
  aspect-ratio: 1;
  background-repeat: no-repeat;
  background-size: contain;
  pointer-events: none;
  z-index: 0;
}

.section--cream::before {
  inset-block-start: 0;
  inset-inline-end: 0;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 100 100'%3E%3Cg fill='%23fe4d00'%3E%3Cpath d='M60 0h20L70 20z'/%3E%3Cpath d='M80 0h20L90 20z'/%3E%3Cpath d='M80 20h20v20z' opacity='.55'/%3E%3C/g%3E%3Cg fill='none' stroke='%23fe4d00' stroke-width='1.4' opacity='.5'%3E%3Cpath d='M60 24l10 17H50z'/%3E%3Cpath d='M74 44l10 17H64z'/%3E%3C/g%3E%3C/svg%3E");
}

.section--cream::after {
  inset-block-end: 0;
  inset-inline-start: 0;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 100 100'%3E%3Cg fill='%23fe4d00'%3E%3Cpath d='M0 80h20L10 100z'/%3E%3Cpath d='M20 80h20L30 100z'/%3E%3Cpath d='M0 60h20v20z' opacity='.55'/%3E%3C/g%3E%3Cg fill='%23ff9a33'%3E%3Cpath d='M40 80h20L50 100z' opacity='.7'/%3E%3C/g%3E%3C/svg%3E");
}

@media (max-width: 640px) {
  .section--cream::before,
  .section--cream::after {
    width: 96px;
    opacity: 0.85;
  }
}

/* --------------------------------------------------------------------------
   Acentos de triângulo laranja nos cantos das seções escuras
   Uma classe por seção, canto variado pra não ficar repetitivo.
   -------------------------------------------------------------------------- */

.section--tri-tr,
.section--tri-tl,
.section--tri-bl,
.section--tri-br {
  overflow: hidden;
}

.section--tri-tr::after,
.section--tri-tl::after,
.section--tri-bl::after,
.section--tri-br::after {
  content: "";
  position: absolute;
  width: clamp(88px, 11vw, 160px);
  aspect-ratio: 1;
  pointer-events: none;
  z-index: 0;
  opacity: 0.85;
  background-repeat: no-repeat;
  background-size: contain;
}

.section--tri-tr::after {
  inset-block-start: 0;
  inset-inline-end: 0;
  background-position: right top;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 100 100'%3E%3Cg fill='%23ff7f00'%3E%3Cpath d='M60 0h20L70 20z'/%3E%3Cpath d='M80 0h20L90 20z'/%3E%3Cpath d='M80 20h20v20z' opacity='.5'/%3E%3C/g%3E%3Cpath d='M62 24l9 16H53z' fill='none' stroke='%23ff7f00' stroke-width='1.4' opacity='.4'/%3E%3C/svg%3E");
}

.section--tri-tl::after {
  inset-block-start: 0;
  inset-inline-start: 0;
  background-position: left top;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 100 100'%3E%3Cg fill='%23ff7f00'%3E%3Cpath d='M20 0H0l10 20z'/%3E%3Cpath d='M40 0H20l10 20z'/%3E%3Cpath d='M0 20h20v20z' opacity='.5'/%3E%3C/g%3E%3Cpath d='M38 24l-9 16h18z' fill='none' stroke='%23ff7f00' stroke-width='1.4' opacity='.4'/%3E%3C/svg%3E");
}

.section--tri-bl::after {
  inset-block-end: 0;
  inset-inline-start: 0;
  background-position: left bottom;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 100 100'%3E%3Cg fill='%23ff7f00'%3E%3Cpath d='M0 80h20L10 100z'/%3E%3Cpath d='M20 80h20L30 100z'/%3E%3Cpath d='M0 60h20v20z' opacity='.5'/%3E%3C/g%3E%3Cpath d='M38 76l-9-16h18z' fill='none' stroke='%23ff7f00' stroke-width='1.4' opacity='.4'/%3E%3C/svg%3E");
}

.section--tri-br::after {
  inset-block-end: 0;
  inset-inline-end: 0;
  background-position: right bottom;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 100 100'%3E%3Cg fill='%23ff7f00'%3E%3Cpath d='M80 80h20L90 100z'/%3E%3Cpath d='M60 80h20L70 100z'/%3E%3Cpath d='M80 60h20v20z' opacity='.5'/%3E%3C/g%3E%3Cpath d='M62 76l9-16H53z' fill='none' stroke='%23ff7f00' stroke-width='1.4' opacity='.4'/%3E%3C/svg%3E");
}

/* --------------------------------------------------------------------------
   Assinatura da marca: fileira de setas/ícones acima dos títulos
   -------------------------------------------------------------------------- */

.brandmark {
  display: inline-flex;
  align-items: center;
  gap: 0.45rem;
  margin-bottom: 1rem;
  color: var(--orange);
}

/* Versão enxuta (só as setas) pra assinar os cabeçalhos sem competir com o título. */
.brandmark--sm {
  margin-bottom: 0.75rem;
}

.section__head--centro .brandmark {
  justify-content: center;
}

.section--cream .brandmark {
  color: var(--orange-red);
}

.brandmark svg {
  width: 18px;
  height: 18px;
  fill: currentColor;
}

/* As três setinhas ▶▶▶ da identidade, como divisa antes do eyebrow. */
.brandmark__arrows {
  display: inline-flex;
  gap: 3px;
}

.brandmark__arrows span {
  width: 0;
  height: 0;
  border-block: 5px solid transparent;
  border-inline-start: 8px solid currentColor;
}

.brandmark__arrows span:nth-child(2) {
  opacity: 0.7;
}

.brandmark__arrows span:nth-child(3) {
  opacity: 0.4;
}

.section__head {
  max-width: 46rem;
  margin-bottom: clamp(2.5rem, 1.5rem + 3vw, 4rem);
}

.section__head .lead {
  margin-top: 1.25rem;
}

.section__head--centro {
  margin-inline: auto;
  text-align: center;
}

.section__head--centro .eyebrow {
  justify-content: center;
}

.section__head--centro .lead {
  margin-inline: auto;
}

/* --------------------------------------------------------------------------
   Botões
   -------------------------------------------------------------------------- */

.btn {
  --btn-bg: var(--grad-cta);
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 0.6em;
  padding: 1.05rem 1.75rem;
  background: var(--btn-bg);
  color: #fff;
  font-weight: 700;
  font-size: var(--text-sm);
  letter-spacing: 0.06em;
  text-transform: uppercase;
  border: 0;
  border-radius: var(--radius);
  cursor: pointer;
  text-align: center;
  transition:
    translate var(--duration-fast) var(--ease-out-expo),
    filter var(--duration-fast) ease,
    box-shadow var(--duration-fast) ease;
}

.btn:hover {
  filter: brightness(1.08);
  translate: 0 -2px;
  box-shadow: var(--shadow-orange);
}

.btn:active {
  translate: 0 0;
  filter: brightness(0.96);
}

.btn__arrow {
  transition: translate var(--duration-fast) var(--ease-out-expo);
}

.btn:hover .btn__arrow {
  translate: 3px 0;
}

.btn--whatsapp {
  --btn-bg: var(--whatsapp);
  color: #05331a;
}

.btn--whatsapp:hover {
  box-shadow: 0 10px 30px -12px rgba(37, 211, 102, 0.5);
}

.btn--ghost {
  --btn-bg: transparent;
  border: 1px solid var(--border);
  color: var(--text);
}

.btn--ghost:hover {
  border-color: var(--orange);
  box-shadow: none;
}

.section--light .btn--ghost {
  border-color: var(--border-light);
  color: var(--text-on-light);
}

.btn--lg {
  padding: 1.25rem 2.25rem;
  font-size: var(--text-base);
}

.btn--block {
  width: 100%;
}

.btn--sm {
  padding: 0.7rem 1.15rem;
  font-size: var(--text-xs);
}

/* --------------------------------------------------------------------------
   Cards, pills, mídia
   -------------------------------------------------------------------------- */

.card {
  background: var(--bg-elevated);
  border: 1px solid var(--border);
  border-radius: var(--radius-lg);
  padding: clamp(1.5rem, 1.1rem + 1.2vw, 2.25rem);
  transition:
    border-color var(--duration-normal) ease,
    translate var(--duration-normal) var(--ease-out-expo);
}

.card:hover {
  border-color: var(--orange);
  translate: 0 -4px;
}

.section--light .card {
  background: var(--bg-light-elevated);
  border-color: var(--border-light);
}

.pill {
  display: inline-block;
  padding: 0.3rem 0.7rem;
  border-radius: 999px;
  font-size: 0.6875rem;
  font-weight: 700;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  line-height: 1.4;
}

.pill--solid {
  background: var(--orange);
  color: #fff;
}

.pill--outline {
  border: 1px solid var(--border);
  color: var(--text-muted);
}

.icon-box {
  display: grid;
  place-items: center;
  width: 44px;
  height: 44px;
  border-radius: 10px;
  background: var(--orange-soft);
  color: var(--orange);
  margin-bottom: 1.25rem;
}

.icon-box svg {
  width: 22px;
  height: 22px;
  stroke: currentColor;
  stroke-width: 1.75;
  fill: none;
  stroke-linecap: round;
  stroke-linejoin: round;
}

/* Placeholder de imagem: aplicado por JS quando o arquivo ainda não existe */
.media {
  position: relative;
  overflow: hidden;
  border-radius: var(--radius-lg);
  background: var(--bg-elevated);
}

.media img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.media.is-missing img {
  visibility: hidden;
}

.media.is-missing::after {
  content: attr(data-placeholder);
  position: absolute;
  inset: 0;
  display: grid;
  place-content: center;
  padding: 1rem;
  text-align: center;
  font-family: var(--font-display);
  text-transform: uppercase;
  font-size: clamp(0.9rem, 2vw, 1.4rem);
  line-height: 1.1;
  color: var(--text-faint);
  background:
    repeating-linear-gradient(
      135deg,
      transparent 0 12px,
      rgba(255, 255, 255, 0.02) 12px 24px
    ),
    var(--bg-elevated);
  border: 1px dashed var(--border);
  border-radius: inherit;
}

/* --------------------------------------------------------------------------
   Reveal on scroll
   -------------------------------------------------------------------------- */

.reveal {
  opacity: 0;
  translate: 0 24px;
  transition:
    opacity var(--duration-slow) var(--ease-out-expo),
    translate var(--duration-slow) var(--ease-out-expo);
}

.reveal.is-visible {
  opacity: 1;
  translate: 0 0;
}

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

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

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

  .reveal {
    opacity: 1;
    translate: none;
  }
}