/* ============================================================
   AMO Embarque — sistema de design tokenizado (v1)
   Um sistema, duas leituras: data-arm="turismo" | "corporativo"
   Base: docs/arquitetura-ui-geo-v1.md, secao 2
   ============================================================ */

:root {
  /* Cor — primitivas (logo oficial + build v73) */
  --amo-ink: #0F130F;
  --amo-paper: #F7F8F3;
  --amo-green: #8BC53F;
  --amo-green-deep: #5A8020;
  --amo-green-light: #A8D85F;
  --amo-gold: #C9A84C;
  --amo-gold-deep: #8A6D24;
  --amo-blue: #5B9BD5;
  --amo-blue-deep: #2F6395;
  --amo-red: #E84A37;
  --amo-neutral-100: #EEF0E9;
  --amo-neutral-300: #D3D6CC;
  --amo-neutral-500: #878B80;
  --amo-neutral-700: #45483F;
  --amo-neutral-900: #1A1D18;

  /* Cor — semanticas (default institucional, tema claro) */
  --color-bg: var(--amo-paper);
  --color-surface: #FFFFFF;
  --color-text: var(--amo-ink);
  --color-text-muted: var(--amo-neutral-700);
  --color-cta-bg: var(--amo-green);
  --color-cta-text: var(--amo-ink);
  --color-accent: var(--amo-green-deep);
  --color-arm: var(--amo-green-deep);
  --color-border: var(--amo-neutral-300);

  /* Tipografia */
  --font-display: "Fraunces", Georgia, serif;
  --font-text: "Plus Jakarta Sans", system-ui, sans-serif;
  --text-xs: clamp(0.79rem, 0.75rem + 0.2vw, 0.84rem);
  --text-sm: 0.9rem;
  --text-base: clamp(1rem, 0.95rem + 0.25vw, 1.125rem);
  --text-lg: clamp(1.25rem, 1.15rem + 0.5vw, 1.5rem);
  --text-xl: clamp(1.56rem, 1.4rem + 0.8vw, 2rem);
  --text-2xl: clamp(1.95rem, 1.7rem + 1.25vw, 2.66rem);
  --text-hero: clamp(2.44rem, 2rem + 2.2vw, 4rem);

  /* Espacamento — base 4px */
  --space-1: 0.25rem; --space-2: 0.5rem; --space-3: 0.75rem;
  --space-4: 1rem; --space-6: 1.5rem; --space-8: 2rem;
  --space-12: 3rem; --space-16: 4rem; --space-24: 6rem;

  /* Raio */
  --radius-sm: 4px;
  --radius-md: 10px;
  --radius-lg: 20px;

  /* Motion */
  --motion-fast: 120ms;
  --motion-base: 200ms;
  --motion-slow: 240ms;
  --ease-standard: cubic-bezier(0.23, 1, 0.32, 1);
}

[data-arm="turismo"]     { --color-arm: var(--amo-gold-deep); --color-arm-soft: var(--amo-gold); }
[data-arm="corporativo"] { --color-arm: var(--amo-blue-deep); --color-arm-soft: var(--amo-blue); }

@media (prefers-reduced-motion: reduce) {
  :root { --motion-fast: 0ms; --motion-base: 0ms; --motion-slow: 0ms; }
  *, *::before, *::after { animation: none !important; transition: none !important; }
}

/* ---------- reset e base ---------- */
*, *::before, *::after { box-sizing: border-box; }
html { scroll-behavior: smooth; }
body {
  margin: 0;
  background: var(--color-bg);
  color: var(--color-text);
  font-family: var(--font-text);
  font-size: var(--text-base);
  line-height: 1.65;
  -webkit-font-smoothing: antialiased;
}
img { max-width: 100%; height: auto; display: block; }
a { color: var(--color-accent); text-decoration-thickness: 1px; text-underline-offset: 3px; }
a:focus-visible, button:focus-visible, summary:focus-visible {
  outline: 2px solid var(--amo-green-deep);
  outline-offset: 3px;
  border-radius: var(--radius-sm);
}
h1, h2, h3 {
  font-family: var(--font-display);
  font-weight: 600;
  line-height: 1.15;
  margin: 0 0 var(--space-4);
  text-wrap: balance;
}
h1 { font-size: var(--text-hero); font-weight: 700; }
h2 { font-size: var(--text-2xl); }
h3 { font-size: var(--text-lg); }
p { margin: 0 0 var(--space-4); max-width: 68ch; }
ul { padding-left: 1.2rem; }
li { margin-bottom: var(--space-2); }

.container { max-width: 1200px; margin-inline: auto; padding-inline: var(--space-6); }
.section { padding-block: var(--space-16); }
.section--tight { padding-block: var(--space-12); }
.muted { color: var(--color-text-muted); }
.kicker {
  display: block;
  font-size: var(--text-xs);
  font-weight: 700;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--color-arm, var(--color-accent));
  margin-bottom: var(--space-3);
}

/* ---------- icones ---------- */
.icon {
  width: 24px; height: 24px;
  stroke: currentColor; fill: none;
  stroke-width: 1.75; stroke-linecap: round; stroke-linejoin: round;
  flex: none;
}
.icon--lg { width: 32px; height: 32px; }

/* ---------- header ---------- */
.site-header {
  background: var(--amo-ink);
  border-bottom: 1px solid rgba(244, 247, 238, 0.12);
  position: sticky; top: 0; z-index: 50;
}
.site-header .container {
  display: flex; align-items: center; gap: var(--space-6);
  min-height: 68px;
}
.brand {
  display: flex; align-items: center; text-decoration: none;
}
.brand img { width: 92px; height: auto; filter: invert(1) brightness(1.05); }
.brand .brand-mark {
  width: 34px; height: 34px; border-radius: 8px;
  background: var(--amo-green);
  display: inline-flex; align-items: center; justify-content: center;
  font-size: 1.15rem; font-style: italic; font-weight: 900;
  color: var(--amo-ink);
}
.site-nav { margin-left: auto; }
.site-nav ul { list-style: none; display: flex; gap: var(--space-6); margin: 0; padding: 0; }
.site-nav a {
  color: #F4F7EE; text-decoration: none; font-weight: 600; font-size: var(--text-sm);
  position: relative; padding-block: var(--space-2);
}
.site-nav a::after {
  content: ""; position: absolute; left: 0; bottom: 0;
  width: 0; height: 2px; background: var(--color-arm, var(--amo-green-deep));
  transition: width 160ms var(--ease-standard);
}
.site-nav a:hover::after, .site-nav a[aria-current="page"]::after { width: 100%; }
.header-cta { margin-left: var(--space-4); }
@media (max-width: 860px) {
  .site-header .container { flex-wrap: wrap; padding-block: var(--space-3); }
  .site-nav { margin-left: 0; width: 100%; overflow-x: auto; }
  .site-nav ul { gap: var(--space-4); }
  .header-cta { display: none; }
}

/* ---------- botoes ---------- */
.btn {
  display: inline-flex; align-items: center; gap: var(--space-2);
  padding: 0.8rem 1.4rem;
  border-radius: var(--radius-md);
  font-family: var(--font-text); font-weight: 700; font-size: var(--text-sm);
  text-decoration: none; border: 2px solid transparent;
  transition: background var(--motion-fast) var(--ease-standard),
              transform var(--motion-fast) var(--ease-standard);
}
.btn--primary { background: var(--amo-green); color: var(--amo-ink); }
.btn--primary:hover { background: var(--amo-green-light); transform: translateY(-1px); }
.btn--secondary { background: transparent; color: var(--amo-ink); border-color: var(--amo-ink); }
.btn--secondary:hover { background: var(--amo-neutral-100); transform: translateY(-1px); }

/* ---------- hero ---------- */
.hero { padding-block: var(--space-16) var(--space-12); }
.hero p.lead { font-size: var(--text-lg); max-width: 62ch; }
.hero-actions { display: flex; gap: var(--space-4); flex-wrap: wrap; margin-top: var(--space-8); }

/* ---------- grid dos dois bracos (paridade estrutural) ---------- */
.arms-grid {
  display: grid; grid-template-columns: 1fr 1fr; gap: var(--space-6);
  align-items: stretch;
}
@media (max-width: 780px) { .arms-grid { grid-template-columns: 1fr; } }
.arm-card {
  background: var(--color-surface);
  border: 1px solid var(--color-border);
  border-top: 4px solid var(--color-arm-soft, var(--amo-green));
  border-radius: var(--radius-lg);
  padding: var(--space-8);
  display: flex; flex-direction: column;
}
.arm-card h2, .arm-card h3 { margin-top: var(--space-3); min-height: 2.5em; }
.arm-card .arm-badge { min-height: 24px; }
.arm-card ul { margin-block: var(--space-4); }
.arm-card .btn { margin-top: auto; align-self: flex-start; }
.arm-badge {
  display: inline-flex; align-items: center; gap: var(--space-2);
  color: var(--color-arm); font-weight: 700; font-size: var(--text-xs);
  letter-spacing: 0.12em; text-transform: uppercase;
}

/* ---------- passos numerados ---------- */
.steps { list-style: none; padding: 0; display: grid; gap: var(--space-4); grid-template-columns: repeat(auto-fit, minmax(210px, 1fr)); counter-reset: step; }
.steps li {
  background: var(--color-surface); border: 1px solid var(--color-border);
  border-radius: var(--radius-md); padding: var(--space-6); counter-increment: step;
}
.steps li::before {
  content: counter(step, decimal-leading-zero);
  font-family: var(--font-display); font-weight: 700; font-size: var(--text-lg);
  color: var(--color-arm, var(--amo-green-deep)); display: block; margin-bottom: var(--space-2);
}
.steps h3 { font-size: var(--text-base); font-family: var(--font-text); font-weight: 700; }
.steps p { font-size: var(--text-sm); margin: 0; }

/* ---------- fatos / numeros ---------- */
.facts {
  display: grid; grid-template-columns: repeat(auto-fit, minmax(160px, 1fr));
  gap: var(--space-6); list-style: none; padding: 0;
}
.facts li { border-left: 3px solid var(--amo-green); padding-left: var(--space-4); }
.facts strong {
  display: block; font-family: var(--font-display); font-weight: 700;
  font-size: var(--text-xl); font-variant-numeric: tabular-nums;
}
.facts span { font-size: var(--text-sm); color: var(--color-text-muted); }

/* ---------- depoimentos pareados ---------- */
.quote-pair { display: grid; grid-template-columns: 1fr 1fr; gap: var(--space-6); }
@media (max-width: 780px) { .quote-pair { grid-template-columns: 1fr; } }
.quote {
  background: var(--color-surface); border: 1px solid var(--color-border);
  border-radius: var(--radius-lg); padding: var(--space-8); margin: 0;
}
.quote p { font-family: var(--font-display); font-size: var(--text-lg); font-weight: 400; }
.quote footer { font-size: var(--text-sm); color: var(--color-text-muted); }
.quote .arm-badge { margin-bottom: var(--space-3); }

/* ---------- cards de servico ---------- */
.svc-grid { display: grid; gap: var(--space-4); grid-template-columns: repeat(auto-fill, minmax(250px, 1fr)); }
.svc-card {
  background: var(--color-surface); border: 1px solid var(--color-border);
  border-radius: var(--radius-md); padding: var(--space-6);
}
.svc-card .icon { color: var(--color-arm, var(--amo-green-deep)); margin-bottom: var(--space-3); }
.svc-card h3 { font-family: var(--font-text); font-size: var(--text-base); font-weight: 700; }
.svc-card p { font-size: var(--text-sm); margin: 0; }
.svc-card--link { position: relative; border-top: 4px solid var(--color-arm-soft, var(--amo-green)); }
.svc-card--link > a { color: inherit; text-decoration: none; }
.svc-card--link > a::after { content: ""; position: absolute; inset: 0; }
.svc-card--link:hover { border-color: var(--color-arm); }

/* ---------- faixa escura de destaque (tema como momento) ---------- */
.feature-dark {
  background: var(--amo-ink); color: #F4F7EE;
  border-radius: var(--radius-lg);
  padding: var(--space-12);
}
.feature-dark .kicker { color: var(--amo-green); }
.feature-dark p { color: rgba(244, 247, 238, 0.75); }
.feature-dark a.btn--secondary { color: #F4F7EE; border-color: #F4F7EE; }
.feature-dark a.btn--secondary:hover { background: rgba(244, 247, 238, 0.1); }

/* ---------- FAQ (conteudo no DOM, extraivel) ---------- */
.faq details {
  background: var(--color-surface); border: 1px solid var(--color-border);
  border-radius: var(--radius-md); margin-bottom: var(--space-3);
}
.faq summary {
  cursor: pointer; font-weight: 700; padding: var(--space-4) var(--space-6);
  list-style: none; display: flex; justify-content: space-between; gap: var(--space-4);
}
.faq summary::-webkit-details-marker { display: none; }
.faq summary::after { content: "+"; font-family: var(--font-display); font-size: var(--text-lg); color: var(--color-arm, var(--amo-green-deep)); }
.faq details[open] summary::after { content: "\2212"; }
.faq .faq-a { padding: 0 var(--space-6) var(--space-4); }
.faq .faq-a p { margin-bottom: var(--space-2); }

/* ---------- breadcrumb ---------- */
.breadcrumb { font-size: var(--text-sm); padding-block: var(--space-4); }
.breadcrumb ol { list-style: none; display: flex; flex-wrap: wrap; gap: var(--space-2); margin: 0; padding: 0; }
.breadcrumb li + li::before { content: "/"; margin-right: var(--space-2); color: var(--amo-neutral-500); }
.breadcrumb a { color: var(--color-text-muted); }
.breadcrumb [aria-current="page"] { color: var(--color-text); font-weight: 600; }

/* ---------- fotos com legenda (prova real) ---------- */
figure.photo { margin: 0; }
figure.photo img { border-radius: var(--radius-lg); width: 100%; aspect-ratio: 4 / 3; object-fit: cover; }
figure.photo figcaption { font-size: var(--text-xs); color: var(--color-text-muted); margin-top: var(--space-2); }

/* ---------- rodape (3 colunas de mesma largura) ---------- */
.site-footer {
  background: var(--amo-ink); color: #F4F7EE;
  margin-top: var(--space-24); padding-block: var(--space-16) var(--space-8);
}
.footer-cols { display: grid; grid-template-columns: 1fr 1fr 1fr; gap: var(--space-8); }
@media (max-width: 780px) { .footer-cols { grid-template-columns: 1fr; } }
.site-footer h2 { font-size: var(--text-base); font-family: var(--font-text); font-weight: 700; letter-spacing: 0.1em; text-transform: uppercase; }
.site-footer ul { list-style: none; padding: 0; }
.site-footer a { color: rgba(244, 247, 238, 0.85); text-decoration: none; }
.site-footer a:hover { color: var(--amo-green); text-decoration: underline; }
.footer-nap {
  border-top: 1px solid rgba(244, 247, 238, 0.15);
  margin-top: var(--space-12); padding-top: var(--space-6);
  font-size: var(--text-sm); color: rgba(244, 247, 238, 0.7);
  display: flex; flex-wrap: wrap; gap: var(--space-6); justify-content: space-between;
}
.footer-nap p { margin: 0; }

/* ---------- entrada suave de secoes ---------- */
@media (prefers-reduced-motion: no-preference) {
  .reveal { opacity: 0; transform: translateY(8px); animation: reveal 240ms var(--ease-standard) forwards; }
  @keyframes reveal { to { opacity: 1; transform: none; } }
}

/* ---------- data de revisao visivel ---------- */
.revised { font-size: var(--text-xs); color: var(--color-text-muted); }


/* ---------- v3: estetica escura da Canton Fair na home ---------- */
.hero-dark {
  background: #0d130d; color: #F4F7EE;
  padding-block: var(--space-16) var(--space-24);
}
.hero-dark .kicker { color: var(--amo-green); }
.hero-dark h1 { color: #F4F7EE; }
.hero-dark h1 em { color: var(--amo-green); font-style: italic; }
.hero-dark p.lead { color: rgba(244, 247, 238, 0.78); }
.hero-grid {
  display: grid; grid-template-columns: 7fr 5fr; gap: var(--space-12);
  align-items: center;
}
@media (max-width: 900px) { .hero-grid { grid-template-columns: 1fr; } }
.hero-media { position: relative; }
.hero-media .photo-main {
  border-radius: var(--radius-lg); width: 100%;
  aspect-ratio: 4 / 3; object-fit: cover;
  border: 1px solid rgba(139, 197, 63, 0.3);
}
.hero-media .photo-over {
  position: absolute; left: -12%; bottom: -14%;
  width: 46%; aspect-ratio: 3 / 4; object-fit: cover;
  border-radius: var(--radius-md);
  border: 3px solid #0d130d;
  box-shadow: 0 18px 40px rgba(0, 0, 0, 0.45);
}
@media (max-width: 900px) { .hero-media .photo-over { left: 0; } .hero-media { margin-top: var(--space-8); } }
.hero-badge {
  position: absolute; top: -14px; right: -8px;
  background: var(--amo-green); color: var(--amo-ink);
  border-radius: var(--radius-md);
  padding: var(--space-2) var(--space-4);
  font-weight: 800; font-size: var(--text-sm);
  box-shadow: 0 10px 26px rgba(0, 0, 0, 0.4);
}
.hero-badge span { display: block; font-weight: 600; font-size: var(--text-xs); }

/* faixa de avaliacoes em ticker */
.reviews-band {
  background: #0d130d; color: #F4F7EE;
  padding-block: var(--space-8) var(--space-16);
  border-top: 1px solid rgba(139, 197, 63, 0.18);
}
.reviews-band .band-head {
  display: flex; flex-wrap: wrap; gap: var(--space-4);
  align-items: baseline; justify-content: space-between;
  margin-bottom: var(--space-8);
}
.reviews-band h2 { color: #F4F7EE; margin: 0; font-size: var(--text-xl); }
.reviews-band .band-head p { margin: 0; color: rgba(244, 247, 238, 0.65); font-size: var(--text-sm); }
.ticker { overflow: hidden; position: relative; }
.ticker-track {
  display: flex; gap: var(--space-6); width: max-content;
  animation: ticker-scroll 48s linear infinite;
}
.ticker:hover .ticker-track { animation-play-state: paused; }
@keyframes ticker-scroll { from { transform: translateX(0); } to { transform: translateX(-50%); } }
@media (prefers-reduced-motion: reduce) {
  .ticker { overflow-x: auto; }
  .ticker-track { animation: none; }
}
.review-card {
  width: 380px; flex: none;
  background: rgba(244, 247, 238, 0.05);
  border: 1px solid rgba(139, 197, 63, 0.22);
  border-radius: var(--radius-lg);
  padding: var(--space-6);
}
@media (max-width: 640px) { .review-card { width: 300px; } }
.review-stars { display: flex; gap: 2px; margin-bottom: var(--space-3); }
.review-stars .icon { width: 16px; height: 16px; color: var(--amo-green); fill: var(--amo-green); stroke: none; }
.review-card p {
  font-family: var(--font-display); font-size: var(--text-base);
  color: rgba(244, 247, 238, 0.92); margin-bottom: var(--space-3);
}
.review-card footer { font-size: var(--text-xs); color: rgba(244, 247, 238, 0.6); }
.review-card footer strong { color: rgba(244, 247, 238, 0.85); display: block; font-size: var(--text-sm); }

/* cards dos bracos com foto */
.arm-card .card-photo {
  width: calc(100% + 2 * var(--space-8));
  margin: calc(-1 * var(--space-8)) calc(-1 * var(--space-8)) var(--space-6);
  aspect-ratio: 16 / 10; object-fit: cover;
  border-radius: var(--radius-lg) var(--radius-lg) 0 0;
}

/* banda escura de fatos */
.band-dark {
  background: #0d130d; color: #F4F7EE;
  padding-block: var(--space-16);
}
.band-dark h2, .band-dark .facts strong { color: #F4F7EE; }
.band-dark .kicker { color: var(--amo-green); }
.band-dark .facts span, .band-dark p { color: rgba(244, 247, 238, 0.65); }
.band-dark .facts strong { color: var(--amo-green); }

/* dupla de fotos empilhadas */
.photo-stack { display: grid; gap: var(--space-4); }
.photo-stack img {
  border-radius: var(--radius-lg); width: 100%;
  aspect-ratio: 16 / 10; object-fit: cover;
}


/* v4: trilhas de negocio e faixa de garantias (pagina de pacote) */
.chips { display: flex; flex-wrap: wrap; gap: var(--space-2); padding: 0; list-style: none; }
.chips li {
  border: 1px solid rgba(139, 197, 63, 0.35); border-radius: 999px;
  padding: var(--space-2) var(--space-4); font-size: var(--text-sm);
  color: rgba(244, 247, 238, 0.9); margin: 0;
}
.timeline { list-style: none; padding: 0; display: grid; gap: var(--space-2); }
.timeline li { display: grid; grid-template-columns: 130px 1fr; gap: var(--space-4); padding: var(--space-3) 0; border-bottom: 1px solid rgba(244,247,238,0.1); margin: 0; }
.timeline strong { color: var(--amo-green); font-variant-numeric: tabular-nums; }
.assurance { display: flex; flex-wrap: wrap; gap: var(--space-6); list-style: none; padding: 0; }
.assurance li { display: flex; align-items: center; gap: var(--space-2); font-size: var(--text-sm); color: rgba(244,247,238,0.85); margin: 0; }
.assurance .icon { color: var(--amo-green); width: 18px; height: 18px; }
.price-tiers { display: grid; grid-template-columns: repeat(auto-fit, minmax(180px, 1fr)); gap: var(--space-4); }
.price-tiers > div { background: rgba(244,247,238,0.04); border: 1px solid rgba(244,247,238,0.14); border-radius: var(--radius-md); padding: var(--space-6); }
.price-tiers strong { font-family: var(--font-display); font-size: var(--text-xl); color: var(--amo-green); display: block; }
.price-tiers span { font-size: var(--text-xs); color: rgba(244,247,238,0.6); }

/* clip permanente para fotos animaveis (independe de suporte a animacao) */
.ph { overflow: hidden; }
.photo-stack .ph { border-radius: var(--radius-lg); }
.photo-stack .ph > img { border-radius: 0; }

/* ============================================================
   v5 — animacoes scroll-driven (CSS puro, sem JS)
   So rodam se: navegador suporta animation-timeline E o usuario
   nao pediu reducao de movimento. Fora disso: pagina estatica.
   ============================================================ */
@media (prefers-reduced-motion: no-preference) {
  @supports (animation-timeline: view()) {

    /* 1. Header que condensa com o scroll (comeca e termina nos primeiros 220px) */
    .site-header .container {
      animation: hdr-condense linear both;
      animation-timeline: scroll(root);
      animation-range: 0 220px;
    }
    @keyframes hdr-condense { to { min-height: 52px; } }
    .brand img {
      animation: hdr-logo linear both;
      animation-timeline: scroll(root);
      animation-range: 0 220px;
    }
    @keyframes hdr-logo { to { width: 72px; } }

    /* 2. Barra de progresso de leitura na base do header */
    .site-header::after {
      content: ""; position: absolute; left: 0; bottom: -1px;
      width: 100%; height: 2px; background: var(--amo-green);
      transform-origin: 0 50%; transform: scaleX(0);
      animation: read-progress linear both;
      animation-timeline: scroll(root);
    }
    @keyframes read-progress { to { transform: scaleX(1); } }

    /* 3. Fotos que assentam (ken burns reverso, scrubado pela entrada no viewport) */
    .ph > img, figure.photo img {
      animation: img-settle linear both;
      animation-timeline: view();
      animation-range: entry 0% entry 100%;
    }
    @keyframes img-settle { from { transform: scale(1.08); } to { transform: scale(1); } }
    figure.photo { overflow: hidden; border-radius: var(--radius-lg); }

    /* 4. Numeros que sobem de tras da mascara, sincronizados com o scroll */
    .facts li { overflow: hidden; }
    .facts strong {
      animation: fact-rise linear both;
      animation-timeline: view();
      animation-range: entry 10% entry 60%;
    }
    @keyframes fact-rise { from { transform: translateY(110%); opacity: 0; } to { transform: none; opacity: 1; } }
    .facts li { border-left-color: transparent; animation: fact-border linear both; animation-timeline: view(); animation-range: entry 10% entry 60%; }
    @keyframes fact-border { to { border-left-color: var(--amo-green); } }

    /* 5. Passos do metodo em cascata (cada card com fim de range diferente = stagger) */
    .steps li {
      animation: step-in linear both;
      animation-timeline: view();
    }
    .steps li:nth-child(1) { animation-range: entry 0% entry 55%; }
    .steps li:nth-child(2) { animation-range: entry 0% entry 70%; }
    .steps li:nth-child(3) { animation-range: entry 0% entry 85%; }
    .steps li:nth-child(4) { animation-range: entry 0% entry 100%; }
    .steps li:nth-child(5) { animation-range: entry 0% entry 100%; }
    @keyframes step-in { from { transform: translateY(28px); opacity: 0; } to { transform: none; opacity: 1; } }

    /* 6. Sublinhado que se desenha nas palavras-chave do hero */
    .hero-dark h1 em {
      background: linear-gradient(currentColor, currentColor) 0 92% / var(--draw, 0%) 3px no-repeat;
      animation: em-draw linear both;
      animation-timeline: view();
      animation-range: entry 30% entry 90%;
    }
    @keyframes em-draw { from { background-size: 0% 3px; } to { background-size: 100% 3px; } }

    /* 7. Cards dos bracos e depoimentos deslizam de lados opostos (scrub) */
    .arms-grid > :first-child {
      animation: slide-l linear both; animation-timeline: view(); animation-range: entry 0% entry 50%;
    }
    .arms-grid > :last-child {
      animation: slide-r linear both; animation-timeline: view(); animation-range: entry 0% entry 50%;
    }
    @keyframes slide-l { from { transform: translateX(-32px); opacity: 0; } to { transform: none; opacity: 1; } }
    @keyframes slide-r { from { transform: translateX(32px); opacity: 0; } to { transform: none; opacity: 1; } }
  }
}

/* ============================================================
   v8 — PROFUNDIDADE DE IMERSAO
   Home = loja (clara, verde AMO). Quanto mais fundo no braco,
   mais o cliente entra na estetica dele:
   corporativo -> verde-profundo Canton Fair (lime sobre escuro)
   turismo     -> areia quente (dourado sobre claro)
   ============================================================ */

/* --- transicao de cor ENTRE paginas (View Transitions, MPA) --- */
@media (prefers-reduced-motion: no-preference) {
  @view-transition { navigation: auto; }
  ::view-transition-old(root) { animation: vt-out 360ms cubic-bezier(.23,1,.32,1) both; }
  ::view-transition-new(root) { animation: vt-in 420ms cubic-bezier(.23,1,.32,1) both; }
  @keyframes vt-out { to { opacity: 0; transform: translateY(-8px); } }
  @keyframes vt-in { from { opacity: 0; transform: translateY(10px); } }
  .site-header { view-transition-name: amo-header; }
  .site-footer { view-transition-name: amo-footer; }
}

/* --- temas por braco (aplicar no <body data-theme>) --- */
body[data-theme="corp"] {
  --color-bg: #0d130d;
  --color-surface: rgba(244, 247, 238, 0.05);
  --color-text: #F4F7EE;
  --color-text-muted: rgba(244, 247, 238, 0.72);
  --color-border: rgba(244, 247, 238, 0.14);
  --color-accent: var(--amo-green);
  background: var(--color-bg); color: var(--color-text);
}
body[data-theme="corp"] h1, body[data-theme="corp"] h2, body[data-theme="corp"] h3 { color: #F4F7EE; }
body[data-theme="corp"] li { color: rgba(244, 247, 238, 0.85); }
body[data-theme="corp"] .kicker { color: var(--amo-green); }
body[data-theme="corp"] .arm-card, body[data-theme="corp"] .svc-card, body[data-theme="corp"] .steps li, body[data-theme="corp"] .quote, body[data-theme="corp"] .faq details {
  background: var(--color-surface); border-color: var(--color-border);
}
body[data-theme="corp"] .svc-card h3 a, body[data-theme="corp"] .faq summary { color: #F4F7EE; }
body[data-theme="corp"] .faq summary::after { color: var(--amo-green); }
body[data-theme="corp"] .facts strong { color: var(--amo-green); }
body[data-theme="corp"] .facts span { color: rgba(244, 247, 238, 0.6); }
body[data-theme="corp"] .btn--secondary { color: #F4F7EE; border-color: rgba(244, 247, 238, 0.6); }
body[data-theme="corp"] .btn--secondary:hover { background: rgba(244, 247, 238, 0.1); }
body[data-theme="corp"] .breadcrumb a { color: rgba(244, 247, 238, 0.65); }
body[data-theme="corp"] .breadcrumb [aria-current="page"] { color: #F4F7EE; }
body[data-theme="corp"] .steps li::before { color: var(--amo-green); }
body[data-theme="corp"] figure.photo figcaption, body[data-theme="corp"] .revised { color: rgba(244, 247, 238, 0.55); }
body[data-theme="corp"] .feature-dark { border: 1px solid rgba(139, 197, 63, 0.25); }

body[data-theme="tur"] {
  --color-bg: #FBF7EC;
  --color-surface: #FFFFFF;
  --color-text: #241F14;
  --color-text-muted: #6B6252;
  --color-border: #E7DFC9;
  --color-accent: var(--amo-gold-deep);
  --color-arm: var(--amo-gold-deep); --color-arm-soft: var(--amo-gold);
  background: var(--color-bg); color: var(--color-text);
}
body[data-theme="tur"] .kicker { color: var(--amo-gold-deep); }
body[data-theme="tur"] .facts li { border-left-color: var(--amo-gold); }

/* --- topbar institucional (canais de atendimento sempre a vista) --- */
.topbar {
  background: #0a0f0a; color: rgba(244, 247, 238, 0.75);
  font-size: var(--text-xs);
}
.topbar .container {
  display: flex; align-items: center; gap: var(--space-6);
  min-height: 34px; justify-content: space-between;
}
.topbar a { color: rgba(244, 247, 238, 0.85); text-decoration: none; display: inline-flex; align-items: center; gap: 6px; }
.topbar a:hover { color: var(--amo-green); }
.topbar .icon { width: 14px; height: 14px; }
.topbar-group { display: flex; align-items: center; gap: var(--space-6); }
@media (max-width: 860px) { .topbar .topbar-hours { display: none; } }
@media (max-width: 640px) { .topbar .container { justify-content: center; } .topbar-social { display: none; } }

/* --- rodape institucional v2 --- */
.footer-v2 { background: #0a0f0a; color: #F4F7EE; margin-top: var(--space-24); }
.footer-v2 .footer-main {
  display: grid; grid-template-columns: 1.3fr 1fr 1fr 1.1fr; gap: var(--space-8);
  padding-block: var(--space-16) var(--space-12);
}
@media (max-width: 960px) { .footer-v2 .footer-main { grid-template-columns: 1fr 1fr; } }
@media (max-width: 620px) { .footer-v2 .footer-main { grid-template-columns: 1fr; } }
.footer-v2 h2 {
  font-size: var(--text-xs); font-family: var(--font-text); font-weight: 700;
  letter-spacing: 0.14em; text-transform: uppercase; color: rgba(244, 247, 238, 0.55);
  margin-bottom: var(--space-4);
}
.footer-v2 ul { list-style: none; padding: 0; margin: 0; }
.footer-v2 li { margin-bottom: var(--space-3); }
.footer-v2 a { color: rgba(244, 247, 238, 0.85); text-decoration: none; }
.footer-v2 a:hover { color: var(--amo-green); text-decoration: underline; }
.footer-brand img { width: 120px; height: auto; filter: invert(1) brightness(1.05); margin-bottom: var(--space-4); }
.footer-brand p { font-size: var(--text-sm); color: rgba(244, 247, 238, 0.65); max-width: 34ch; }
.footer-social { display: flex; gap: var(--space-3); margin-top: var(--space-4); }
.footer-social a {
  display: inline-flex; align-items: center; justify-content: center;
  width: 38px; height: 38px; border-radius: 50%;
  border: 1px solid rgba(244, 247, 238, 0.25); color: #F4F7EE;
  transition: border-color var(--motion-fast) var(--ease-standard), color var(--motion-fast) var(--ease-standard);
}
.footer-social a:hover { border-color: var(--amo-green); color: var(--amo-green); text-decoration: none; }
.footer-social .icon { width: 18px; height: 18px; }
.footer-contact li { display: flex; gap: var(--space-2); align-items: flex-start; font-size: var(--text-sm); color: rgba(244, 247, 238, 0.8); }
.footer-contact .icon { width: 16px; height: 16px; flex: none; margin-top: 3px; color: var(--amo-green); }
.footer-cred {
  border-top: 1px solid rgba(244, 247, 238, 0.12);
  padding-block: var(--space-6);
  display: flex; flex-wrap: wrap; gap: var(--space-4) var(--space-8);
  font-size: var(--text-xs); color: rgba(244, 247, 238, 0.55);
  justify-content: space-between; align-items: center;
}
.footer-cred span { display: inline-flex; align-items: center; gap: 6px; }
.footer-cred .icon { width: 14px; height: 14px; color: var(--amo-green); }
.footer-col-corp h2 { color: var(--amo-green); }
.footer-col-tur h2 { color: var(--amo-gold); }

/* --- portas coloridas na home: cada braco com a estetica do destino --- */
.arm-card--tur {
  background: linear-gradient(180deg, #FFFDF7 0%, #FBF4E4 100%);
  border-color: #E7DFC9; border-top-color: var(--amo-gold);
}
.arm-card--corp {
  background: linear-gradient(180deg, #10170f 0%, #0d130d 100%);
  border-color: rgba(139, 197, 63, 0.25); border-top-color: var(--amo-green);
  color: #F4F7EE;
}
.arm-card--corp h3, .arm-card--corp li { color: #F4F7EE; }
.arm-card--corp .arm-badge { color: var(--amo-green); }
.arm-card--tur .arm-badge { color: var(--amo-gold-deep); }