/* The Layover Loophole - design tokens + components */
/* One CSS file. No external requests. */

/* ------------------------------------------------------------------
   Font: Fraunces (display only, H1/H2/pull-quotes)
   ------------------------------------------------------------------ */
@font-face {
  font-family: "Fraunces";
  src: url("/assets/fonts/fraunces-subset.woff2") format("woff2");
  /* O arquivo real e o SemiBold 600. Declarar a faixa 400-700 faz o navegador usar ESTA face
     em todo peso de display do site, em vez de sintetizar negrito falso (era o que o Georgia
     fazia a 600 e deixava os titulos empastados). */
  font-weight: 400 700;
  font-style: normal;
  font-display: swap;
  size-adjust: 100%;
}

/* ------------------------------------------------------------------
   Design tokens
   ------------------------------------------------------------------ */
:root {
  /* Typography */
  --font-display: "Fraunces", Georgia, "Times New Roman", serif;
  --font-body: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;

  /* Fluid scale - Perfect Fourth (1.333), clamped */
  --text-xs: clamp(0.75rem, 0.7rem + 0.2vw, 0.875rem);      /* floor 12px */
  --text-sm: clamp(0.875rem, 0.82rem + 0.25vw, 1rem);       /* floor 14px */
  --text-base: clamp(1rem, 0.95rem + 0.3vw, 1.125rem);      /* floor 16px */
  --text-lg: clamp(1.125rem, 1rem + 0.5vw, 1.333rem);
  --text-xl: clamp(1.333rem, 1.15rem + 0.75vw, 1.777rem);
  --text-2xl: clamp(1.777rem, 1.4rem + 1.25vw, 2.369rem);
  --text-3xl: clamp(1.5rem, 0.885rem + 2.524vw, 3.157rem);  /* 24px@390 -> 50.5px@1440; teto era 2.369rem = clone do 2xl */
  --text-4xl: clamp(2rem, 1.5rem + 3vw, 3.5rem);

  /* Spacing - 8pt grid with 4pt sub-grid */
  --space-1: 0.25rem;   /* 4px */
  --space-2: 0.5rem;    /* 8px */
  --space-3: 0.75rem;   /* 12px */
  --space-4: 1rem;      /* 16px */
  --space-5: 1.5rem;    /* 24px */
  --space-6: 2rem;      /* 32px */
  --space-7: 3rem;      /* 48px */
  --space-8: 4rem;      /* 64px */
  --space-9: 5rem;      /* 80px */
  --space-10: 6rem;     /* 96px */

  /* Measure */
  --measure: 43.75rem;  /* 700px reading column */
  --container: 75rem;   /* 1200px */

  /* Radius */
  --radius-sm: 0.5rem;   /* 8px */
  --radius-md: 1rem;     /* 16px */
  --radius-lg: 1.5rem;   /* 24px */
  --radius-pill: 100vh;

  /* Colors - light theme (default) */
  --surface-0: #FDFBF7;
  --surface-1: #FFFFFF;
  --surface-2: #F3EEE6;
  --surface-3: #E8E4DC;
  --surface-invert: #0D1F1F;

  --text-1: #1A2E2E;
  --text-2: #3D5252;
  --text-3: #5F6A6A;
  --text-invert: #F5F3EE;

  --action: #0E6B6A;
  --action-hover: #0A4F4E;
  --action-text: #FFFFFF;
  --action-soft: rgba(14, 107, 106, 0.10);

  --accent-warm: #B45309;
  --amber-surface: #FEF3C7;

  --border: #D6D1C8;
  --border-strong: #8D867A;
  --shadow: rgba(26, 46, 46, 0.08);
  --shadow-strong: rgba(26, 46, 46, 0.16);

  /* Motion */
  --transition-fast: 150ms ease;
  --transition-base: 250ms ease;
}

/* Dark theme */
@media (prefers-color-scheme: dark) {
  :root {
    --surface-0: #0D1F1F;
    --surface-1: #142A2A;
    --surface-2: #1C3535;
    --surface-3: #244040;
    --surface-invert: #FDFBF7;

    --text-1: #F5F3EE;
    --text-2: #D6D2CA;
    --text-3: #9BA3A3;
    --text-invert: #1A2E2E;

    --action: #4FB3AE;
    --action-hover: #6BC9C4;
    --action-text: #0D1F1F;
    --action-soft: rgba(79, 179, 174, 0.14);

    --accent-warm: #FDBA74;
    --amber-surface: #3D2A12;

    --border: #2F4A4A;
    --border-strong: #688888;
    --shadow: rgba(0, 0, 0, 0.24);
    --shadow-strong: rgba(0, 0, 0, 0.40);
  }
}

/* Manual overrides */
[data-theme="dark"] {
  --surface-0: #0D1F1F;
  --surface-1: #142A2A;
  --surface-2: #1C3535;
  --surface-3: #244040;
  --surface-invert: #FDFBF7;

  --text-1: #F5F3EE;
  --text-2: #D6D2CA;
  --text-3: #9BA3A3;
  --text-invert: #1A2E2E;

  --action: #4FB3AE;
  --action-hover: #6BC9C4;
  --action-text: #0D1F1F;
  --action-soft: rgba(79, 179, 174, 0.14);

  --accent-warm: #FDBA74;
  --amber-surface: #3D2A12;

  --border: #2F4A4A;
  --border-strong: #688888;
  --shadow: rgba(0, 0, 0, 0.24);
  --shadow-strong: rgba(0, 0, 0, 0.40);
}

[data-theme="light"] {
  --surface-0: #FDFBF7;
  --surface-1: #FFFFFF;
  --surface-2: #F3EEE6;
  --surface-3: #E8E4DC;
  --surface-invert: #0D1F1F;

  --text-1: #1A2E2E;
  --text-2: #3D5252;
  --text-3: #5F6A6A;
  --text-invert: #F5F3EE;

  --action: #0E6B6A;
  --action-hover: #0A4F4E;
  --action-text: #FFFFFF;
  --action-soft: rgba(14, 107, 106, 0.10);

  --accent-warm: #B45309;
  --amber-surface: #FEF3C7;

  --border: #D6D1C8;
  --border-strong: #8D867A;
  --shadow: rgba(26, 46, 46, 0.08);
  --shadow-strong: rgba(26, 46, 46, 0.16);
}

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

html {
  scroll-behavior: smooth;
  scroll-padding-top: 6rem;
  scroll-padding-bottom: calc(var(--call-bar-height, 0px) + 1rem);
}

body {
  margin: 0;
  font-family: var(--font-body);
  font-size: var(--text-base);
  line-height: 1.5;
  color: var(--text-1);
  background-color: var(--surface-0);
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
}

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

a {
  color: var(--action);
  text-decoration: underline;
  text-underline-offset: 0.15em;
  text-decoration-thickness: 0.08em;
  transition: color var(--transition-fast);
}

a:hover, a:focus {
  color: var(--action-hover);
}

:where(a, button, summary, input, select, textarea, [tabindex]):focus-visible {
  outline: 0.1875rem solid var(--action);
  outline-offset: 0.125rem;
  border-radius: var(--radius-sm);
}

/* ------------------------------------------------------------------
   Typography
   ------------------------------------------------------------------ */
h1, h2, h3, h4 {
  font-family: var(--font-display);
  font-weight: 600;
  color: var(--text-1);
  margin: 0;
}

h1 {
  font-size: var(--text-4xl);
  line-height: 1.08;
  letter-spacing: -0.02em;
}

h2 {
  font-size: var(--text-3xl);
  line-height: 1.12;
  letter-spacing: -0.01em;
}

h3 {
  font-size: var(--text-2xl);
  line-height: 1.16;
}

h4 {
  font-size: var(--text-xl);
  line-height: 1.22;
}

p {
  margin: 0;
}

p + p {
  margin-top: var(--space-5);
}

/* Utility */
.font-display {
  font-family: var(--font-display);
}

.text-secondary {
  color: var(--text-2);
}

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

.pull-quote {
  font-family: var(--font-display);
  font-size: var(--text-2xl);
  line-height: 1.25;
  color: var(--text-1);
  border-left: 0.25rem solid var(--action);
  padding-left: var(--space-5);
  margin: var(--space-7) 0;
}

.kicker {
  display: inline-block;
  font-family: var(--font-body);
  font-size: var(--text-xs);
  font-weight: 700;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--action);
  margin-bottom: var(--space-3);
}

/* ------------------------------------------------------------------
   Layout helpers
   ------------------------------------------------------------------ */
.container {
  width: 100%;
  max-width: var(--container);
  margin-inline: auto;
  padding-inline: var(--space-5);
}

.flow > * + * {
  margin-top: var(--space-5);
}

.flow-lg > * + * {
  margin-top: var(--space-7);
}

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

@media (min-width: 48rem) {
  .section {
    padding-block: var(--space-9);
  }
}

.reading {
  max-width: var(--measure);
}

/* ------------------------------------------------------------------
   Header
   ------------------------------------------------------------------ */
.site-header {
  position: sticky;
  top: 0;
  left: 0;
  right: 0;
  z-index: 100;
  min-height: 4rem;
  display: flex;
  align-items: center;
  background-color: var(--surface-0);
  border-bottom: 1px solid var(--border);
  transition: transform var(--transition-base), background-color var(--transition-base), box-shadow var(--transition-base);
}

.site-header.is-scrolled {
  background-color: var(--surface-1);
  box-shadow: 0 1px 0 var(--border), 0 0.25rem 1rem var(--shadow);
}

.site-header.is-hidden {
  transform: translateY(-100%);
}

.site-header .container {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--space-4);
}

.logo {
  font-family: var(--font-display);
  font-size: var(--text-lg);
  font-weight: 600;
  color: var(--text-1);
  text-decoration: none;
  letter-spacing: -0.02em;
  white-space: nowrap;
}

.logo:hover, .logo:focus {
  color: var(--action);
}

.nav-primary {
  display: none;
}

.nav-primary ul {
  display: flex;
  gap: var(--space-5);
  list-style: none;
  margin: 0;
  padding: 0;
}

.nav-primary a {
  font-size: var(--text-sm);
  font-weight: 600;
  color: var(--text-1);
  text-decoration: none;
}

.nav-primary a:hover, .nav-primary a:focus {
  color: var(--action);
}

.site-header .nav-cta {
  display: none;
}

@media (min-width: 48rem) {
  .site-header {
    min-height: 5rem;
  }

  .nav-primary {
    display: block;
  }

  .site-header .nav-cta {
    display: inline-flex;
  }
}

/* ------------------------------------------------------------------
   Buttons
   ------------------------------------------------------------------ */
.btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-height: 3rem;
  padding: var(--space-3) var(--space-5);
  font-family: var(--font-body);
  font-size: var(--text-base);
  font-weight: 700;
  line-height: 1.25;
  text-decoration: none;
  border: 0.125rem solid transparent;
  border-radius: var(--radius-pill);
  cursor: pointer;
  transition: background-color var(--transition-fast), border-color var(--transition-fast), color var(--transition-fast), transform var(--transition-fast);
}

.btn:hover {
  transform: translateY(-0.0625rem);
}

.btn:active {
  transform: translateY(0);
}

.btn:focus-visible {
  outline: 0.1875rem solid var(--action);
  outline-offset: 0.125rem;
}

.btn-primary {
  background-color: var(--action);
  border-color: var(--action);
  color: var(--action-text);
}

.btn-primary:hover, .btn-primary:focus {
  background-color: var(--action-hover);
  border-color: var(--action-hover);
  color: var(--action-text);
}

.btn-secondary {
  background-color: transparent;
  border-color: var(--border);
  color: var(--text-1);
}

.btn-secondary:hover, .btn-secondary:focus {
  border-color: var(--action);
  color: var(--action);
  background-color: var(--action-soft);
}

.btn-small {
  min-height: 2.5rem;
  padding: var(--space-2) var(--space-4);
  font-size: var(--text-sm);
}

/* ------------------------------------------------------------------
   Hero
   ------------------------------------------------------------------ */
.hero {
  position: relative;
  background-color: var(--surface-2);
  overflow: hidden;
}

.hero__inner {
  position: relative;
  z-index: 2;
  display: grid;
  gap: var(--space-6);
  align-items: center;
  padding-block: var(--space-7);
}

.hero__copy {
  max-width: var(--measure);
}

.hero__eyebrow {
  display: inline-flex;
  align-items: center;
  gap: var(--space-2);
  font-size: var(--text-xs);
  font-weight: 700;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--action);
  margin-bottom: var(--space-4);
}

.hero__title {
  font-size: var(--text-4xl);
  line-height: 1.05;
  margin-bottom: var(--space-5);
}

.hero__title span {
  color: var(--action);
}

.hero__sub {
  font-size: var(--text-lg);
  line-height: 1.5;
  color: var(--text-2);
  margin-bottom: var(--space-6);
}

.hero__cta {
  display: flex;
  flex-direction: column;
  gap: var(--space-4);
  align-items: stretch;
}

.hero__cta .btn {
  width: 100%;
}

.hero__cta a:not(.btn) {
  font-weight: 700;
  color: var(--action);
  text-decoration: underline;
  text-align: center;
}

.hero__media {
  position: relative;
  border-radius: var(--radius-lg);
  overflow: hidden;
  background-color: var(--surface-3);
  aspect-ratio: 4 / 3;
}

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

.hero__caption {
  margin-top: var(--space-3);
  font-size: var(--text-xs);
  color: var(--text-3);
}

@media (min-width: 40rem) {
  .hero__cta {
    flex-direction: row;
    flex-wrap: wrap;
    align-items: center;
  }

  .hero__cta .btn {
    width: auto;
  }

  .hero__cta a:not(.btn) {
    text-align: left;
  }
}

@media (min-width: 64rem) {
  .hero__inner {
    grid-template-columns: 1fr 1fr;
    padding-block: var(--space-8);
  }

  .hero__media {
    aspect-ratio: 3 / 2;
  }
}

/* Hero variants for testing */
.hero__badge {
  display: inline-flex;
  align-items: center;
  gap: var(--space-2);
  padding: var(--space-2) var(--space-4);
  font-size: var(--text-xs);
  font-weight: 700;
  letter-spacing: 0.04em;
  text-transform: uppercase;
  color: var(--action);
  background-color: var(--action-soft);
  border-radius: var(--radius-pill);
  margin-bottom: var(--space-4);
}

.hero--photo .hero__badge {
  color: #0D1F1F;
  background-color: #8FD8D3;
}

.hero__stats {
  display: flex;
  flex-wrap: wrap;
  gap: var(--space-5);
  margin-top: var(--space-6);
}

.hero__stat {
  display: flex;
  flex-direction: column;
  gap: var(--space-1);
}

.hero__stat-number {
  font-family: var(--font-display);
  font-size: var(--text-2xl);
  font-weight: 600;
  line-height: 1;
  color: inherit;
}

.hero__stat-label {
  font-size: var(--text-xs);
  font-weight: 600;
  letter-spacing: 0.04em;
  text-transform: uppercase;
  opacity: 0.75;
}

.hero__route-card {
  display: none;
}

@media (min-width: 64rem) {
  .hero__route-card {
    display: flex;
    flex-direction: column;
    justify-self: end;
    align-self: center;
    width: min(100%, 26rem);
    padding: var(--space-6);
    background-color: rgba(253, 251, 247, 0.96);
    border: 1px solid var(--border);
    border-radius: var(--radius-lg);
    box-shadow: 0 1.5rem 3rem rgba(0, 0, 0, 0.25);
    color: var(--text-1);
  }

  .hero__route-card-title {
    font-family: var(--font-display);
    font-size: var(--text-xl);
    font-weight: 600;
    margin-bottom: var(--space-4);
  }

  .hero__route-card svg {
    width: 100%;
    height: auto;
    margin-bottom: var(--space-4);
  }

  .hero__route-card p {
    font-size: var(--text-sm);
    color: var(--text-2);
    margin: 0;
  }
}

/* ------------------------------------------------------------------
   Cards - bento-ish, varied weights
   ------------------------------------------------------------------ */
.card-grid {
  display: grid;
  gap: var(--space-5);
  align-items: stretch;
}

.card-grid--3 {
  grid-template-columns: repeat(auto-fit, minmax(16rem, 1fr));
}

.card-grid--featured {
  grid-template-columns: 1fr;
}

@media (min-width: 48rem) {
  .card-grid--featured {
    grid-template-columns: 1.25fr 1fr;
  }
}

.card {
  display: flex;
  flex-direction: column;
  gap: var(--space-3);
  padding: var(--space-5);
  background-color: var(--surface-1);
  border: 1px solid var(--border);
  border-radius: var(--radius-sm);
  text-decoration: none;
  color: var(--text-1);
  transition: transform var(--transition-fast), box-shadow var(--transition-fast), border-color var(--transition-fast);
}

.card:hover, .card:focus {
  background-color: var(--surface-2);
  border-color: var(--action);
  color: var(--text-1);
}

.card__title {
  font-family: var(--font-display);
  font-size: var(--text-xl);
  line-height: 1.2;
}

.card__body {
  font-size: var(--text-base);
  line-height: 1.5;
  color: var(--text-2);
}

.card__meta {
  margin-top: auto;
  padding-top: var(--space-3);
  font-size: var(--text-sm);
  font-weight: 700;
  color: var(--action);
}

.card--large {
  padding: var(--space-6);
  border-radius: var(--radius-lg);
}

.card--large .card__title {
  font-size: var(--text-2xl);
}

.card--small {
  padding: var(--space-4);
  border-radius: var(--radius-sm);
}

.card--small .card__title {
  font-size: var(--text-lg);
}

.card--accent {
  background-color: var(--action);
  border-color: var(--action);
  color: var(--action-text);
}

.card--accent .card__title,
.card--accent .card__body,
.card--accent .card__meta {
  color: var(--action-text);
}

.card--accent:hover, .card--accent:focus {
  background-color: var(--action-hover);
  border-color: var(--action-hover);
  color: var(--action-text);
}

/* ------------------------------------------------------------------
   Tables
   ------------------------------------------------------------------ */
.table-wrap {
  width: 100%;
  margin-inline: 0;
  overscroll-behavior-inline: contain;
  overflow-x: auto;
  border-radius: var(--radius-md);
  border: 1px solid var(--border);
  background-color: var(--surface-1);
}

.table-wrap table {
  width: 100%;
  min-width: 40rem;
  border-collapse: collapse;
  font-size: var(--text-sm);
  font-variant-numeric: tabular-nums;
}

.table-wrap caption {
  text-align: left;
  padding: var(--space-4);
  font-family: var(--font-display);
  font-size: var(--text-lg);
  font-weight: 600;
  color: var(--text-1);
}

.table-wrap th,
.table-wrap td {
  padding: var(--space-3) var(--space-4);
  text-align: left;
  vertical-align: top;
  border-bottom: 1px solid var(--border);
}

.table-wrap thead th {
  font-weight: 700;
  color: var(--text-1);
  background-color: var(--surface-2);
  white-space: nowrap;
}

.table-wrap tbody th {
  font-weight: 600;
  color: var(--text-1);
  background-color: var(--surface-1);
}

.table-wrap tbody tr:last-child th,
.table-wrap tbody tr:last-child td {
  border-bottom: 0;
}

.table-wrap th:first-child,
.table-wrap td:first-child {
  position: sticky;
  left: 0;
  z-index: 2;
  min-width: 8rem;
  max-width: 10rem;
  background-color: var(--surface-1);
  border-right: 1px solid var(--border);
}

.table-wrap thead th:first-child {
  z-index: 3;
}

@media (min-width: 48rem) {
  .table-wrap {
    width: 100%;
    margin-inline: 0;
  }
}

/* ------------------------------------------------------------------
   Article
   ------------------------------------------------------------------ */
.article-header {
  padding-block: var(--space-5);
  background-color: var(--surface-2);
}
@media (min-width: 48rem) {
  .article-header { padding-block: var(--space-7); }
}

.breadcrumb {
  display: flex;
  flex-wrap: wrap;
  gap: var(--space-2);
  list-style: none;
  margin: 0 0 var(--space-5) 0;
  padding: 0;
  font-size: var(--text-sm);
  color: var(--text-3);
}

.breadcrumb li:not(:last-child)::after {
  content: "/";
  margin-left: var(--space-2);
  color: var(--border);
}

.breadcrumb a {
  color: var(--text-3);
  text-decoration: none;
}

.breadcrumb a:hover, .breadcrumb a:focus {
  color: var(--action);
}

.article-title {
  max-width: var(--measure);
  margin-bottom: var(--space-5);
}

.byline {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: var(--space-3);
  font-size: var(--text-sm);
  color: var(--text-2);
}

.verified-badge {
  display: inline-flex;
  align-items: center;
  gap: var(--space-2);
  padding: var(--space-1) var(--space-3);
  font-size: var(--text-xs);
  font-weight: 700;
  letter-spacing: 0.04em;
  text-transform: uppercase;
  color: var(--action);
  background-color: var(--action-soft);
  border-radius: var(--radius-pill);
}

.article-body {
  padding-block: var(--space-7);
}

.article-body .reading {
  margin-inline: auto;
}

.article-body h2 {
  margin-top: var(--space-8);
  margin-bottom: var(--space-4);
}

.article-body h3 {
  margin-top: var(--space-7);
  margin-bottom: var(--space-3);
}

.article-body ul,
.article-body ol {
  padding-left: var(--space-5);
  margin: var(--space-4) 0;
}

.article-body li + li {
  margin-top: var(--space-2);
}

/* ------------------------------------------------------------------
   TOC disclosure
   ------------------------------------------------------------------ */
.toc {
  margin-block: var(--space-6);
  padding: var(--space-4);
  background-color: var(--surface-1);
  border: 1px solid var(--border);
  border-radius: var(--radius-md);
}

.toc summary {
  font-family: var(--font-display);
  font-size: var(--text-lg);
  font-weight: 600;
  color: var(--text-1);
  cursor: pointer;
  list-style: none;
  display: flex;
  align-items: center;
  justify-content: space-between;
}

.toc summary::-webkit-details-marker {
  display: none;
}

.toc summary::after {
  content: "+";
  font-family: var(--font-body);
  font-size: var(--text-xl);
  font-weight: 400;
  color: var(--action);
}

.toc[open] summary::after {
  content: "−";
}

.toc ol {
  margin: var(--space-4) 0 0 0;
  padding-left: var(--space-5);
  color: var(--text-2);
}

.toc li + li {
  margin-top: var(--space-2);
}

.toc a {
  color: var(--text-2);
  text-decoration: none;
}

.toc a:hover, .toc a:focus {
  color: var(--action);
  text-decoration: underline;
}

/* ------------------------------------------------------------------
   FAQ
   ------------------------------------------------------------------ */
.faq {
  margin-block: var(--space-8);
}

.faq-item summary {
  font-family: var(--font-display);
  font-size: var(--text-lg);
  font-weight: 600;
  line-height: 1.25;
  color: var(--text-1);
  cursor: pointer;
  list-style: none;
  padding: var(--space-4) 0;
  border-bottom: 1px solid var(--border);
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--space-4);
}

.faq-item summary::-webkit-details-marker {
  display: none;
}

.faq-item summary::after {
  content: "+";
  font-family: var(--font-body);
  font-size: var(--text-xl);
  font-weight: 400;
  color: var(--action);
  flex-shrink: 0;
}

.faq-item[open] summary::after {
  content: "−";
}

.faq-item[open] summary {
  border-bottom-color: transparent;
}

.faq__answer {
  padding: var(--space-4) 0 var(--space-5) 0;
  color: var(--text-2);
}

/* ------------------------------------------------------------------
   Inline opt-in
   ------------------------------------------------------------------ */
.optin-inline {
  padding: var(--space-5);
  margin-block: var(--space-7);
  background-color: var(--surface-2);
  border: 1px solid var(--border);
  border-radius: var(--radius-md);
}

.optin-inline__kicker {
  font-size: var(--text-xs);
  font-weight: 700;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--action);
  margin-bottom: var(--space-2);
}

.optin-inline__title {
  font-family: var(--font-display);
  font-size: var(--text-xl);
  line-height: 1.25;
  color: var(--text-1);
  margin-bottom: var(--space-3);
}

.optin-inline__form {
  display: flex;
  flex-wrap: wrap;
  gap: var(--space-3);
  align-items: stretch;
}

.optin-inline__form input[type="email"] {
  flex: 1 1 12rem;
  min-height: 3rem;
  padding: var(--space-3) var(--space-4);
  font-family: var(--font-body);
  font-size: var(--text-base);
  color: var(--text-1);
  background-color: var(--surface-1);
  border: 1px solid var(--border);
  border-radius: var(--radius-pill);
}

.optin-inline__form input[type="email"]:focus {
  outline: 0.1875rem solid var(--accent-warm);
  outline-offset: 0.125rem;
}

/* ------------------------------------------------------------------
   Opt-in band
   ------------------------------------------------------------------ */
.optin-band {
  padding-block: var(--space-8);
  background-color: var(--surface-2);
}

.optin-band__inner {
  display: grid;
  gap: var(--space-5);
  align-items: center;
}

@media (min-width: 48rem) {
  .optin-band__inner {
    grid-template-columns: 1fr auto;
  }
}

.optin-band__title {
  font-family: var(--font-display);
  font-size: var(--text-2xl);
  line-height: 1.2;
  margin-bottom: var(--space-2);
}

.optin-band__text {
  font-size: var(--text-lg);
  color: var(--text-2);
}

/* ------------------------------------------------------------------
   Section index
   ------------------------------------------------------------------ */
.section-intro {
  padding-block: var(--space-7);
  background-color: var(--surface-2);
}

.section-intro__title {
  margin-bottom: var(--space-4);
}

.section-intro__lead {
  max-width: var(--measure);
  font-size: var(--text-lg);
  color: var(--text-2);
}

/* ------------------------------------------------------------------
   Footer
   ------------------------------------------------------------------ */
.site-footer {
  padding-block: var(--space-8);
  background-color: var(--surface-2);
  color: var(--text-1);
}

.site-footer a {
  color: var(--text-1);
  text-decoration: none;
}

.site-footer a:hover, .site-footer a:focus {
  text-decoration: underline;
  color: var(--action);
}

.footer__grid {
  display: grid;
  gap: var(--space-6);
}

@media (min-width: 48rem) {
  .footer__grid {
    /* Quatro colunas desde que entrou "This site" (about/verify/contato). */
    grid-template-columns: 1.6fr 1fr 1fr 1fr;
  }
}

.footer__brand {
  font-family: var(--font-display);
  font-size: var(--text-xl);
  margin-bottom: var(--space-3);
}

.footer__tagline {
  font-size: var(--text-sm);
  color: var(--text-3);
  max-width: 18rem;
}

.footer__heading {
  font-family: var(--font-body);
  font-size: var(--text-xs);
  font-weight: 700;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  margin-bottom: var(--space-4);
  color: var(--text-3);
}

.footer__links {
  list-style: none;
  margin: 0;
  padding: 0;
  display: flex;
  flex-direction: column;
  gap: var(--space-3);
  font-size: var(--text-sm);
}

.footer__legal {
  margin-top: var(--space-8);
  padding-top: var(--space-5);
  border-top: 1px solid var(--border);
  font-size: var(--text-xs);
  color: var(--text-3);
  display: flex;
  flex-wrap: wrap;
  gap: var(--space-3);
  justify-content: space-between;
}

/* ------------------------------------------------------------------
   Back to top
   ------------------------------------------------------------------ */
.back-to-top {
  display: inline-flex;
  align-items: center;
  gap: var(--space-2);
  font-size: var(--text-sm);
  font-weight: 700;
  color: var(--action);
  text-decoration: none;
  margin-top: var(--space-6);
}

.back-to-top:hover, .back-to-top:focus {
  color: var(--action-hover);
}

/* ------------------------------------------------------------------
   Sources footer
   ------------------------------------------------------------------ */
.sources {
  margin-top: var(--space-8);
  padding-top: var(--space-6);
  border-top: 1px solid var(--border);
}

.sources__title {
  font-family: var(--font-body);
  font-size: var(--text-xs);
  font-weight: 700;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--text-3);
  margin-bottom: var(--space-3);
}

.sources ol {
  margin: 0;
  padding-left: var(--space-5);
  font-size: var(--text-sm);
  color: var(--text-2);
}

.sources li + li {
  margin-top: var(--space-2);
}

/* ------------------------------------------------------------------
   Skip link / accessibility
   ------------------------------------------------------------------ */
.skip-link {
  position: fixed;
  top: -100%;
  left: var(--space-4);
  z-index: 101;
  padding: var(--space-3) var(--space-4);
  background-color: var(--action);
  color: var(--action-text);
  font-weight: 700;
  border-radius: var(--radius-sm);
  text-decoration: none;
}

.skip-link:focus {
  top: var(--space-4);
}

/* ------------------------------------------------------------------
   Print
   ------------------------------------------------------------------ */
@media print {
  .site-header,
  .optin-inline,
  .optin-band,
  .back-to-top {
    display: none;
  }

  body {
    background: #fff;
    color: #000;
  }
}

/* ---- Claude pass: componentes adicionais ---- */
/* Key-facts card (substitui tabela 2-colunas "short version" — CEO 2026-07-10) */
.keyfacts { display: grid; grid-template-columns: repeat(auto-fit, minmax(min(100%, 15rem), 1fr)); gap: var(--space-3); margin: var(--space-5) 0; padding: 0; }
.keyfacts > div { background: var(--surface-1); border: 1px solid var(--border); border-radius: var(--radius-sm); padding: var(--space-4) var(--space-4); }
.keyfacts dt { font-family: var(--font-body); font-size: var(--text-xs); letter-spacing: .08em; text-transform: uppercase; color: var(--text-3); margin: 0 0 var(--space-1); }
.keyfacts dd { margin: 0; font-size: var(--text-base); color: var(--text-1); font-variant-numeric: tabular-nums; }
/* Hero SVG (ilustração própria da marca: a rota com desvio) */
.hero-art { width: 100%; height: auto; display: block; }
.hero-art .route-boring { stroke: var(--text-3); opacity: .35; }
.hero-art .route-loophole { stroke: var(--action); }
.hero-art .stamp { stroke: var(--accent-warm); fill: none; }
.hero-art .dot { fill: var(--text-2); }
.hero-art text { font-family: var(--font-body); font-size: 11px; letter-spacing: .1em; fill: var(--text-3); }
/* Sources visíveis */
.sources { border-top: 1px solid var(--border); margin-top: var(--space-7); padding-top: var(--space-4); font-size: var(--text-sm); color: var(--text-3); }
.sources ol { padding-left: 1.2em; } .sources li { word-break: break-all; margin: .3em 0; }
.sources__title { font-weight: 600; color: var(--text-2); margin-bottom: var(--space-2); }

/* Verified date: an actual readable stamp, without entrance animation. */
.stamp-seal {
  display: inline-flex;
  flex-wrap: wrap;
  gap: var(--space-1);
  border: 1px solid var(--action);
  color: var(--action);
  border-radius: var(--space-1);
  padding: var(--space-2) var(--space-3);
  font-size: var(--text-sm);
  font-weight: 600;
}
.article-header { position: relative; }
.article-header .container { position: relative; }
.article-code {
  display: block;
  max-width: var(--measure);
  margin: 0 auto var(--space-4);
  padding-inline: var(--space-5);
  font: 600 var(--text-sm) var(--font-body);
  letter-spacing: .16em;
  color: var(--action);
}
.keyfacts > div { border-left: .1875rem solid var(--action); }
.photo-credits li { margin: .4em 0; font-size: var(--text-sm); color: var(--text-3); }

/* ---- Ticket illustration (novo hero, 2026-07-14) ---- */
.ticket-illustration {
  width: 100%;
  height: auto;
  display: block;
}

.ticket-illustration .ticket-bg {
  fill: var(--surface-1);
  stroke: var(--border);
  stroke-width: 2;
}

.ticket-illustration .ticket-cutout {
  fill: var(--surface-2);
}

.ticket-illustration .ticket-route {
  fill: none;
  stroke: var(--border);
  stroke-width: 3;
  stroke-dasharray: 6 4;
}

.ticket-illustration .ticket-dot {
  fill: var(--text-3);
}

.ticket-illustration .ticket-stop {
  fill: var(--action-soft);
  stroke: var(--action);
  stroke-width: 3;
}

.ticket-illustration .ticket-plus {
  font-family: var(--font-display);
  font-size: 16px;
  font-weight: 700;
  fill: var(--action);
}

.ticket-illustration .ticket-code {
  font-family: var(--font-display);
  font-size: 18px;
  font-weight: 600;
  fill: var(--text-1);
}

.ticket-illustration .ticket-code--stop {
  fill: var(--action);
}

.ticket-illustration .ticket-label {
  font-family: var(--font-body);
  font-size: 10px;
  font-weight: 700;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  fill: var(--text-3);
}

.ticket-illustration .ticket-label--stop {
  fill: var(--action);
}

.ticket-illustration .ticket-plane {
  fill: var(--action);
}

.hero__media {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  padding: var(--space-5);
}

.hero__caption {
  margin-top: var(--space-3);
  font-size: var(--text-xs);
  color: var(--text-3);
  text-align: center;
}

@media (min-width: 64rem) {
  .hero__caption {
    text-align: left;
  }
}

/* ------------------------------------------------------------------
   Bloco de ligacao (pay-per-call). Modificador de .optin-inline:
   o disclosure legal precisa ser legivel, nao escondido.
   ------------------------------------------------------------------ */
.call-cta__fine {
  margin-top: var(--space-3);
  font-size: var(--text-sm);
  line-height: 1.5;
  color: var(--text-2);
}

/* ------------------------------------------------------------------
   CTA de ligacao — variante compacta (ponto "intro", logo depois da
   abertura). Mesma caixa, menos peso: o bloco completo na primeira
   tela lê como site de call center.
   ------------------------------------------------------------------ */
.call-cta--compacto {
  padding: var(--space-4);
  margin-block: var(--space-6);
}

.call-cta--compacto .optin-inline__title {
  font-size: var(--text-lg);
  margin-bottom: var(--space-3);
}

.call-cta .btn {
  min-height: 3rem;
}

@media (max-width: 480px) {
  /* Alvo de toque cheio no celular: o botao ocupa a largura da caixa. */
  .call-cta .btn {
    display: block;
    width: 100%;
    text-align: center;
  }
}

/* ------------------------------------------------------------------
   Barra fixa de ligacao. SO no mobile, revelada por JS depois do
   primeiro bloco inline (nasce com [hidden]). A divulgacao vive DENTRO
   da barra: a FTC exige que ela seja inevitavel e vizinha do CTA, entao
   barra com "Call now" pelado e disclaimer no corpo da pagina nao vale.
   ------------------------------------------------------------------ */
.call-sticky {
  position: fixed;
  left: 0;
  right: 0;
  bottom: 0;
  z-index: 60;
  padding: var(--space-3) var(--space-4);
  padding-bottom: calc(var(--space-3) + env(safe-area-inset-bottom, 0px));
  background-color: var(--surface-1);
  border-top: 1px solid var(--border);
  box-shadow: 0 -6px 24px rgba(0, 0, 0, 0.12);
}

.call-sticky[hidden] {
  display: none;
}

.call-sticky__inner {
  display: flex;
  align-items: center;
  gap: var(--space-3);
}

.call-sticky__micro {
  flex: 1 1 7rem;
  margin: 0;
  font-size: var(--text-sm);
  line-height: 1.5;
  color: var(--text-1);
  font-weight: 600;
}

.call-sticky__btn {
  flex: 0 1 auto;
  min-height: 3rem;
  padding-inline: var(--space-4);
  white-space: nowrap;
}

.call-sticky__fine {
  margin: var(--space-2) 0 0;
  font-size: var(--text-sm);
  line-height: 1.5;
  color: var(--text-2);
}

@media (min-width: 768px) {
  /* Desktop nao disca tel:, e barra fixa no desktop e assinatura de site predatorio. */
  .call-sticky {
    display: none !important;
  }
}

/* Editorial redesign: navigation works before and without JavaScript. */
.nav-mobile { position: static; }
.nav-mobile summary {
  cursor: pointer;
  list-style: none;
  display: flex;
  align-items: center;
  gap: var(--space-2);
  min-height: 2.75rem;
  padding-inline: var(--space-2);
  color: var(--text-1);
  font-size: var(--text-sm);
  font-weight: 600;
}
.nav-mobile summary::-webkit-details-marker { display: none; }
.nav-mobile summary::after { content: "+"; font-size: 1.25rem; }
.nav-mobile[open] summary::after { content: "−"; }
.nav-mobile nav {
  position: absolute;
  top: 100%;
  inset-inline: 0;
  max-height: calc(100svh - 4rem);
  overflow-y: auto;
  background: var(--surface-1);
  border-bottom: 1px solid var(--border);
  padding: var(--space-3) var(--space-5) var(--space-5);
}
.nav-mobile ul { list-style: none; padding: 0; margin: 0; }
.nav-mobile a { display: block; padding-block: var(--space-3); }
.site-header:focus-within, .site-header:has(.nav-mobile[open]) { transform: none; }
.nav-primary a { display: inline-flex; align-items: center; min-height: 2.75rem; }
@media (min-width: 48rem) { .nav-mobile { display: none; } }
@media (min-width: 48rem) and (max-width: 63.99rem) {
  .nav-primary ul { gap: var(--space-3); }
  .nav-primary a { font-size: .875rem; }
  .logo { font-size: 1.125rem; }
}

/* A custom route drawing explains the extra stop without a stock landmark. */
.hero--editorial { border-bottom: 1px solid var(--border); }
.hero--editorial .hero__inner { grid-template-columns: 1fr; gap: var(--space-5); }
.hero--editorial .hero__title { line-height: 1.1; text-wrap: balance; }
.hero--editorial .hero__sub { max-width: 39rem; }
.route-illustration { width: 100%; max-width: 27.5rem; color: var(--action); }
.route-direct { fill: none; stroke: var(--text-3); stroke-width: 1; stroke-dasharray: 4 6; }
.route-detour { fill: none; stroke: currentColor; stroke-width: 3; }
.route-end { fill: var(--surface-2); stroke: var(--text-1); stroke-width: 2; }
.route-stop { fill: var(--surface-0); stroke: currentColor; stroke-width: 2; }
.route-plus { stroke: currentColor; stroke-width: 2; }
.route-tick { stroke: var(--text-3); stroke-width: 1; }
@media (min-width: 64rem) {
  .hero--editorial .hero__inner { grid-template-columns: 1.65fr 1fr; gap: var(--space-7); }
}
@media (max-width: 63.99rem) { .route-illustration { display: none; } }

.section > .container > h2 { margin-bottom: var(--space-6); }
.section--alt { background: var(--surface-2); }
.card-grid > *, .hero__inner > * { min-width: 0; }
.card__title { font-weight: 500; }
.card-grid--situations { grid-template-columns: 1fr; }
.card-grid--situations .card--large { background: var(--surface-2); border-radius: var(--radius-sm); }
.card-grid--situations .card--small { border: 0; border-top: 1px solid var(--border); border-radius: 0; background: transparent; }
.card-grid--featured .card { padding: var(--space-6); }
@media (min-width: 48rem) {
  .card-grid--situations { grid-template-columns: 1.2fr 1fr; }
  .card-grid--situations .card--large { grid-row: span 2; justify-content: center; padding: var(--space-7); }
  .card-grid--situations .card--large .card__meta { margin-top: var(--space-6); }
}
/* Listings have equal typographic rank, laid out as an editorial index. */
.card-grid--index { grid-template-columns: 1fr; column-gap: var(--space-7); row-gap: 0; }
.card--index {
  position: relative;
  padding: var(--space-6) 0;
  border: 0;
  border-top: 1px solid var(--border);
  border-radius: 0;
  background: transparent;
}
.card--index:hover, .card--index:focus { background: transparent; }
.card--index:hover .card__title { text-decoration: underline; text-decoration-thickness: .0625rem; text-underline-offset: .15em; }
.card--index .card__title { font-size: var(--text-xl); }
.card__code { color: var(--action); font-size: var(--text-sm); font-weight: 700; letter-spacing: .12em; }
@media (min-width: 48rem) { .card-grid--index { grid-template-columns: repeat(2, minmax(0, 1fr)); } }

.article-title { text-wrap: balance; overflow-wrap: break-word; }
.article-body h2 { scroll-margin-top: var(--space-5); }
.article-body h3 { font-size: var(--text-xl); }
.article-body .toc { margin-top: 0; }
.toc { padding: 0; border-radius: var(--radius-sm); }
.toc summary { min-height: 3.5rem; padding: var(--space-4); }
.toc ol { padding: 0 var(--space-5) var(--space-4) var(--space-7); }
.toc a { display: inline-block; padding-block: var(--space-2); }
.faq-item summary { min-height: 3.5rem; }
.faq-item[open] { border-bottom: 1px solid var(--border); }
.back-to-top { min-height: 2.75rem; }
.table-wrap { margin-block: var(--space-5); border-radius: var(--radius-sm); }
.table-wrap thead th:first-child { background: var(--surface-2); }
.table-wrap th, .table-wrap td { line-height: 1.5; }
.table-wrap td { min-width: 11rem; }
.keyfacts dt { font-size: var(--text-sm); letter-spacing: 0; text-transform: none; font-weight: 600; }
.sources li { overflow-wrap: anywhere; word-break: normal; }
.footer__links a { display: inline-flex; align-items: center; min-height: 2.75rem; }
.footer__links { gap: var(--space-1); }
.footer__legal { font-size: var(--text-sm); }
.call-cta .optin-inline__kicker { font-size: var(--text-sm); letter-spacing: .04em; }
.call-sticky__btn { white-space: normal; text-align: center; }
@media (max-width: 30rem) {
  .container { padding-inline: var(--space-4); }
  .logo { font-size: 1.0625rem; }
  .section { padding-block: var(--space-7); }
  .card--large, .card-grid--featured .card { padding: var(--space-5); }
  .card--large .card__title { font-size: var(--text-xl); }  /* era 2xl: empatava com o H2 no mobile */
  .article-code { padding-inline: var(--space-4); }
}
@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  *, *::before, *::after { animation: none !important; transition: none !important; }
}
@media print { .call-sticky { display: none !important; } }

/* ==================================================================
   Adversarial de design 2026-09-21, rodada 1 (Claude). Cada bloco cita
   o achado que resolve. Fica no fim do arquivo de proposito: vence o
   que veio antes sem reescrever o passe do Codex.
   ================================================================== */

/* Sticky mobile: cap de altura, uma linha de micro, fechar, sem pisca (usabilidade F2/F7, moderador F2/F8) */
.call-sticky { padding: var(--space-2) var(--space-4); padding-bottom: calc(var(--space-2) + env(safe-area-inset-bottom, 0px)); transform: translateY(100%); transition: transform .25s ease; }
.call-sticky.is-on { transform: none; }
/* A micro-divulgacao ocupa a linha inteira e o botao desce. Antes ela dividia a
   linha com o botao (nowrap) e sobravam 99px: "Independent travel agency, not the
   airline." precisava de 47px de altura, tinha 31px de line-clamp, e o leitor lia
   "Independent travel agency,..." — divulgacao cortada nao e divulgacao, e e
   exatamente o que o moderador de pay-per-call procura. Medido 2026-09-22. */
.call-sticky__inner { display: grid; grid-template-columns: 1fr 2.75rem; grid-template-areas: "micro micro" "botao fechar"; align-items: center; gap: var(--space-2); }
.call-sticky__micro { grid-area: micro; font-size: var(--text-xs); line-height: 1.3; font-weight: 600; }
.call-sticky__btn { grid-area: botao; min-height: 2.75rem; padding-inline: var(--space-4); font-size: var(--text-sm); white-space: nowrap; }
.call-sticky__close { grid-area: fechar; width: 2.75rem; height: 2.75rem; border: 0; background: transparent; color: var(--text-2); font-size: 1.5rem; line-height: 1; border-radius: var(--radius-pill); cursor: pointer; }
.call-sticky__close:hover, .call-sticky__close:focus-visible { background: var(--surface-2); color: var(--text-1); }
.call-sticky__fine { margin-top: var(--space-1); font-size: var(--text-xs); line-height: 1.3; color: var(--text-2); }

/* Bloco completo: divulgacao curta antes do botao, texto longo em <details> (moderador F4/F7, usabilidade F6) */
.call-cta__fine--pre { margin: 0 0 var(--space-3); color: var(--text-1); font-size: var(--text-sm); }
.call-cta__more { margin-top: var(--space-3); font-size: var(--text-sm); color: var(--text-2); }
.call-cta__more summary { cursor: pointer; color: var(--action); font-weight: 600; min-height: 2.75rem; display: flex; align-items: center; list-style: none; }
.call-cta__more summary::-webkit-details-marker { display: none; }
.call-cta__more summary::before { content: "+"; margin-right: var(--space-2); font-size: 1.1em; }
.call-cta__more[open] summary::before { content: "\2212"; }
.call-cta__more p { margin: var(--space-2) 0 0; line-height: 1.5; }
.call-cta .call-cta__fine { color: var(--text-2); }

/* Tabela: legenda fora do scroll, dica de swipe, sombra na borda, header quebra (designer F5, usabilidade F1/F5, moderador F11) */
.table-title { font-family: var(--font-display); font-size: var(--text-lg); margin: 0 0 var(--space-3); }
.table-shell { position: relative; }
.table-hint { display: none; margin: 0 0 var(--space-2); font-size: var(--text-xs); color: var(--text-3); }
.table-wrap thead th { white-space: normal; }
.table-wrap td { min-width: 9rem; }
@media (max-width: 47.99rem) {
  .table-hint { display: block; }
  .table-shell::after { content: ""; position: absolute; top: 1.75rem; right: 0; bottom: 0; width: 2.5rem; pointer-events: none; border-radius: 0 var(--radius-sm) var(--radius-sm) 0; background: linear-gradient(to right, rgba(0,0,0,0), var(--surface-2)); opacity: .9; }
  .table-wrap td { min-width: 8rem; }
}

/* Teal so em acao: selo vira texto, data do card vira texto, codigo IATA vira rotulo (designer F6/F10, usabilidade F9, moderador F9/F10) */
.stamp-seal { border: 0; padding: 0; color: var(--text-2); font-weight: 500; gap: var(--space-2); }
.stamp-seal::before { content: "\2713"; color: var(--action); }
.card--index .card__meta { color: var(--text-3); font-weight: 500; }
.card__code, .article-kicker { color: var(--text-3); font: 600 var(--text-xs) var(--font-body); letter-spacing: .12em; text-transform: uppercase; }
.article-kicker { margin: 0 0 var(--space-2); }
.article-code { display: none; }

/* H1 por tamanho (designer F7, usabilidade F11) */
.article-title--long { font-size: clamp(1.75rem, 1.25rem + 2vw, 2.6rem); line-height: 1.12; }
@media (max-width: 30rem) {
  .article-title { font-size: 2rem; }
  .article-title--long { font-size: 1.75rem; }
  .hero__title { font-size: 2rem; }
}

/* Menu mobile: painel acima do conteudo, com sombra (usabilidade F3) */
.nav-mobile nav { z-index: 101; box-shadow: 0 16px 32px rgba(0, 0, 0, .14); }

/* TOC: numero alinhado a primeira linha (usabilidade F4); alvos de toque (usabilidade F8) */
.toc a { display: block; }
.breadcrumb a, .footer__legal a { display: inline-block; padding-block: .375rem; }

/* Key-facts: um cartao, linhas com divisor, nao cinco caixas (designer F8) */
.keyfacts { display: block; border: 1px solid var(--border); border-radius: var(--radius-sm); background: var(--surface-1); overflow: hidden; }
.keyfacts > div { display: grid; grid-template-columns: 9.5rem 1fr; gap: var(--space-3); border: 0; border-top: 1px solid var(--border); border-radius: 0; background: transparent; padding: var(--space-3) var(--space-4); }
.keyfacts > div:first-child { border-top: 0; }
.keyfacts dt { margin: 0; color: var(--text-3); }
@media (max-width: 30rem) { .keyfacts > div { grid-template-columns: 1fr; gap: var(--space-1); } }

/* Home: um grid so entre hero e tabela, sem faixa orfa, "Why trust" no trilho (designer F2/F3/F4) */
.card-grid--situations { grid-template-columns: 1fr; gap: var(--space-4); }
.card-grid--situations .card--large { justify-content: flex-start; }
.card__hubs { font-size: var(--text-sm); line-height: 1.6; color: var(--text-2); }
@media (min-width: 48rem) {
  .card-grid--situations {
    grid-template-columns: repeat(3, minmax(0, 1fr));
    grid-template-areas: "big big still" "big big questions" "compare compare diy";
    gap: var(--space-5);
  }
  .card--big { grid-area: big; padding: var(--space-7); }
  .card--still { grid-area: still; }
  .card--questions { grid-area: questions; }
  .card--compare { grid-area: compare; }
  .card--diy { grid-area: diy; }
  .card-grid--situations .card--large .card__meta { margin-top: var(--space-5); }
}
.trust { display: grid; gap: var(--space-5); }
.trust h2 { margin: 0; }
.trust__body p + p { margin-top: var(--space-4); }
@media (min-width: 48rem) { .trust { grid-template-columns: 1fr 2fr; gap: var(--space-8); align-items: start; } }

/* ------------------------------------------------------------------
   Rodada 2 (2026-09-21): personalidade = artefato, nao decoracao.
   O hero passa a mostrar a MECANICA do produto (um bilhete com a parada
   que a letra miuda permite) e a home fecha com o rastro da verificacao.
   ------------------------------------------------------------------ */

/* Bilhete: o artefato que o site inteiro promete ler. */
.ticket {
  margin: 0;
  background: var(--surface-1);
  border: 1px solid var(--border);
  border-radius: var(--radius-sm);
  box-shadow: 0 1px 2px var(--shadow);
  overflow: hidden;
  font-size: var(--text-sm);
}
.ticket__head {
  display: flex;
  flex-wrap: wrap;
  gap: var(--space-2) var(--space-4);
  justify-content: space-between;
  align-items: baseline;
  padding: var(--space-4) var(--space-5);
  border-bottom: 1px solid var(--border);
  background: var(--surface-2);
}
.ticket__carrier {
  font-family: var(--font-display);
  font-weight: 600;
  font-size: var(--text-base);
  color: var(--text-1);
}
.ticket__ref {
  font-size: var(--text-xs);
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: var(--text-3);
}
.ticket__legs { padding: var(--space-5); display: grid; gap: var(--space-5); }
.ticket__leg { display: grid; gap: var(--space-2); }
.ticket__tag {
  font-size: var(--text-xs);
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: var(--text-3);
}
.ticket__route {
  display: grid;
  grid-template-columns: auto 1fr auto;
  align-items: center;
  gap: var(--space-3);
}
.ticket__code {
  font-family: var(--font-display);
  font-weight: 600;
  font-size: var(--text-lg);
  letter-spacing: 0.02em;
  color: var(--text-2);
}
.ticket__link { position: relative; display: block; text-align: center; padding-block: var(--space-4) 0; }
.ticket__link::before {
  content: "";
  position: absolute;
  inset-inline: 0;
  top: 0.4rem;
  border-top: 2px solid var(--action);
}
.ticket__link--plain::before { border-top: 1px dashed var(--text-3); opacity: 0.6; }
.ticket__stop {
  display: inline-block;
  font-size: var(--text-xs);
  color: var(--text-3);
}
.ticket__leg--live .ticket__code { color: var(--text-1); }
.ticket__leg--live .ticket__stop {
  color: var(--action);
  font-weight: 600;
}
/* Picote: a borda serrilhada do bilhete, desenhada em gradiente, sem imagem. */
.ticket__foot {
  position: relative;
  display: grid;
  gap: var(--space-2);
  padding: var(--space-5);
  border-top: 1px dashed var(--border);
  background: var(--surface-2);
  color: var(--text-2);
}
.ticket__foot::before,
.ticket__foot::after {
  content: "";
  position: absolute;
  top: -0.5rem;
  width: 1rem;
  height: 1rem;
  border-radius: 50%;
  background: var(--surface-2);
  border: 1px solid var(--border);
}
.ticket__foot::before { left: -0.5rem; }
.ticket__foot::after { right: -0.5rem; }
.ticket__price { color: var(--text-1); }
.ticket__stamp {
  font-size: var(--text-xs);
  letter-spacing: 0.04em;
  color: var(--text-3);
}
.ticket__stamp::before { content: "\2713"; color: var(--action); margin-right: 0.35em; font-weight: 700; }
@media (max-width: 47.99rem) {
  .ticket__code { font-size: var(--text-base); }
}

/* Hubs como etiquetas: vira um indice escaneavel, nao uma frase de pontos. */
.card__hubs {
  display: flex;
  flex-wrap: wrap;
  gap: var(--space-2);
  margin-top: var(--space-1);
}
.hub {
  /* Alvo de toque: 44px de altura minima. O chip de 24px reprovava em mobile. */
  display: inline-flex;
  align-items: center;
  min-height: 44px;
  padding: 0 var(--space-3);
  border: 1px solid var(--border);
  border-radius: var(--radius-pill);
  background: var(--surface-1);
  font-size: var(--text-xs);
  color: var(--text-2);
  white-space: nowrap;
}

/* Rastro da verificacao: o fecho da home vira prova, nao declaracao de valores. */
.section--receipts { background: var(--surface-2); border-top: 1px solid var(--border); }
.receipts {
  list-style: none;
  margin: var(--space-6) 0 0;
  padding: 0;
  border-top: 1px solid var(--border);
}
.receipt {
  display: grid;
  gap: var(--space-1);
  padding-block: var(--space-4);
  border-bottom: 1px solid var(--border);
}
.receipt__who {
  font-family: var(--font-display);
  font-weight: 600;
  font-size: var(--text-base);
  color: var(--text-1);
}
.receipt__what { color: var(--text-2); font-size: var(--text-sm); }
.receipt__src {
  font-size: var(--text-sm);
  color: var(--text-3);
  overflow-wrap: anywhere;
}
.receipt__src::before { content: "\2197"; margin-right: 0.35em; color: var(--action); }
.receipt__date {
  font-size: var(--text-xs);
  letter-spacing: 0.04em;
  text-transform: uppercase;
  color: var(--text-3);
}
.receipts__note {
  margin-top: var(--space-6);
  max-width: var(--measure);
  font-size: var(--text-sm);
  color: var(--text-2);
}
@media (min-width: 48rem) {
  .receipt {
    grid-template-columns: 12rem 1fr 16rem;
    align-items: baseline;
    gap: var(--space-2) var(--space-5);
  }
  .receipt__date { grid-column: 3; text-align: right; }
  .receipt__src { grid-column: 3; grid-row: 1; text-align: right; }
  .receipt__what { grid-column: 2; grid-row: 1; }
}
.ticket__note { font-size: var(--text-xs); color: var(--text-3); }
a.receipt__src { color: var(--text-2); text-decoration: none; border-bottom: 1px solid var(--border); }
a.receipt__src:hover, a.receipt__src:focus { color: var(--action); border-bottom-color: currentColor; }

/* ------------------------------------------------------------------
   Rodada 3 (2026-09-21): marca, foto e mobilia.
   Diagnostico com referencia na mao (Going, TPG, Nomadic Matt, NerdWallet):
   faltavam tres coisas que todo site profissional tem e o nosso nao tinha.
   Logo com simbolo, uma segunda cor viva, e uma foto com gente dentro.
   ------------------------------------------------------------------ */

/* A segunda cor tem SIGNIFICADO, nao e decoracao: teal = acao (botao, link),
   proof = verificacao (kicker, carimbo, numero, fonte). Duas cores, dois papeis. */
:root { --proof: #B23A0B; --proof-soft: rgba(178, 58, 11, 0.10); }
@media (prefers-color-scheme: dark) {
  :root { --proof: #FDBA74; --proof-soft: rgba(253, 186, 116, 0.14); }
}
:root[data-theme="dark"] { --proof: #FDBA74; --proof-soft: rgba(253, 186, 116, 0.14); }
:root[data-theme="light"] { --proof: #B23A0B; --proof-soft: rgba(178, 58, 11, 0.10); }

/* Logo: o simbolo desenha a mecanica do produto (rota com uma parada). */
.logo { display: inline-flex; align-items: center; gap: var(--space-3); }
.logo__mark { width: 2rem; height: 2rem; flex: none; }
.logo__ring { fill: none; stroke: var(--border); stroke-width: 1.5; }
.logo__route { fill: none; stroke: var(--action); stroke-width: 2.25; stroke-linecap: round; }
.logo__stop { fill: var(--proof); }
.logo__word { white-space: nowrap; }
.logo__word-em { color: var(--action); }
.logo:hover .logo__ring, .logo:focus .logo__ring { stroke: var(--action); }
.footer__brand { display: flex; align-items: center; gap: var(--space-3); }
.footer__brand .logo__mark { width: 1.75rem; height: 1.75rem; }
@media (max-width: 30rem) {
  .logo__mark { width: 1.75rem; height: 1.75rem; }
}

/* O kicker deixa de ser mais um elemento teal e passa a marcar verificacao. */
.kicker--proof { color: var(--proof); }
.stamp-seal::before { color: var(--proof); }
.ticket__stamp::before { color: var(--proof); }
.receipt__src::before, a.receipt__src::before { color: var(--proof); }

/* Hero com foto: a imagem e o LCP, entao vem com preload e nunca lazy.
   O escurecimento e funcional (contraste do texto), nao gradiente decorativo. */
.hero--shot { position: relative; background: var(--surface-invert); border-bottom: 0; }
.hero__shot {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: 12% center;
  filter: grayscale(1) contrast(1.05);
}
.hero--shot::after {
  content: "";
  position: absolute;
  inset: 0;
  background: linear-gradient(90deg, rgba(8, 20, 20, 0.93) 0%, rgba(8, 20, 20, 0.88) 38%, rgba(8, 20, 20, 0.45) 62%, rgba(8, 20, 20, 0.15) 100%);
}
.hero__over {
  position: relative;
  z-index: 2;
  padding-block: var(--space-8);
  max-width: var(--container);
}
.hero--shot .hero__title,
.hero--shot .hero__sub { color: #F5F3EE; }
.hero--shot .hero__title { max-width: 18ch; line-height: 1.06; text-wrap: balance; }
.hero--shot .hero__sub { max-width: 34rem; margin-top: var(--space-5); }
.hero--shot .kicker--proof { color: #FDBA74; }
.hero--shot .hero__cta { margin-top: var(--space-6); }
.hero--shot .hero__cta a:not(.btn) { color: #F5F3EE; }
.hero--shot .hero__cta a:not(.btn):hover { color: #FDBA74; }
@media (min-width: 64rem) {
  .hero__over { padding-block: var(--space-10); }
}
@media (max-width: 47.99rem) {
  .hero__shot { object-position: 46% center; }
  .hero--shot::after {
    background: linear-gradient(180deg, rgba(8, 20, 20, 0.80) 0%, rgba(8, 20, 20, 0.62) 55%, rgba(8, 20, 20, 0.88) 100%);
  }
}

/* Faixa de prova logo abaixo do hero: o bilhete + os numeros que dao pra abrir. */
.proof-strip { background: var(--surface-2); border-bottom: 1px solid var(--border); }
.proof-strip__inner {
  display: grid;
  gap: var(--space-6);
  padding-block: var(--space-7);
}
.counters { margin: 0; display: grid; gap: var(--space-5); align-content: start; }
.counter { display: grid; gap: var(--space-1); }
.counter dt {
  font-size: var(--text-xs);
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--text-3);
}
.counter dd {
  margin: 0;
  font-family: var(--font-display);
  font-size: var(--text-2xl);
  font-weight: 600;
}
.counter--date dd {
  font-size: var(--text-lg);
  letter-spacing: 0.01em;
  font-weight: 600;
  line-height: 1;
  color: var(--proof);
  font-variant-numeric: tabular-nums;
}
.counters__note { font-size: var(--text-sm); color: var(--text-2); max-width: 30rem; }
@media (min-width: 48rem) {
  .counters { grid-template-columns: repeat(3, minmax(0, 1fr)); gap: var(--space-5) var(--space-6); }
  .counters__note { grid-column: 1 / -1; }
}
@media (min-width: 64rem) {
  .proof-strip__inner { grid-template-columns: 1fr 1fr; gap: var(--space-8); align-items: center; }
  .counters { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}


/* Paginas institucionais: coluna de leitura, sem cromo de artigo. */
.static-page h1 { margin-bottom: var(--space-4); }
.static-page .static-lede {
  font-size: var(--text-lg);
  color: var(--text-1);
  border-left: 3px solid var(--proof);
  padding-left: var(--space-4);
  margin-bottom: var(--space-6);
}
.static-page h2 { margin-top: var(--space-8); }
.static-page p { color: var(--text-2); }
.hub--more { border-style: dashed; color: var(--text-3); }
.byline__who { color: inherit; text-decoration-color: var(--proof); }

/* ---------------------------------------------------------------------------
   Tabela larga vira cartao no mobile.
   Rolagem lateral num comparativo de 10 colunas esconde a coluna da pegadinha,
   que e a informacao mais util da pagina. Abaixo de 48rem cada linha vira um
   bloco: o nome do programa e o titulo, e cada celula mostra o proprio rotulo.
   --------------------------------------------------------------------------- */
@media (max-width: 47.99rem) {
  .table-shell--stack .table-wrap {
    overflow: visible;
    border: 0;
    background: none;
  }
  /* Sombra de "tem mais coisa pro lado" nao existe mais quando virou cartao. */
  .table-shell--stack::after,
  .table-shell--stack::before { content: none; }
  .table-shell--stack table {
    /* .table-wrap table tem min-width: 40rem, que e o que forcava a rolagem. */
    min-width: 0;
  }
  .table-shell--stack table,
  .table-shell--stack tbody,
  .table-shell--stack tr,
  .table-shell--stack td,
  .table-shell--stack tbody th {
    display: block;
    width: auto;
  }
  .table-shell--stack thead {
    position: absolute;
    width: 1px;
    height: 1px;
    overflow: hidden;
    clip: rect(0 0 0 0);
    white-space: nowrap;
  }
  .table-shell--stack tbody tr {
    border: 1px solid var(--border);
    border-radius: var(--radius-md);
    background: var(--surface-1);
    padding: var(--space-4) var(--space-5) var(--space-2);
    margin-bottom: var(--space-4);
  }
  .table-shell--stack tbody tr:last-child { margin-bottom: 0; }
  .table-shell--stack tbody th[scope="row"] {
    font-family: var(--font-display);
    font-size: var(--text-lg);
    line-height: 1.2;
    text-align: left;
    padding: 0 0 var(--space-3);
    margin-bottom: var(--space-3);
    border: 0;
    border-bottom: 1px solid var(--border);
    background: none;
  }
  .table-shell--stack tbody td {
    padding: 0 0 var(--space-3);
    border: 0;
  }
  .table-shell--stack tbody td::before {
    content: attr(data-label);
    display: block;
    font-size: var(--text-xs);
    font-weight: 600;
    letter-spacing: .08em;
    text-transform: uppercase;
    color: var(--proof);
    margin-bottom: 0.15rem;
  }
  .table-shell--stack tbody td:empty { display: none; }
}

/* No desktop a tabela larga sai da coluna de leitura em vez de rolar de lado.
   700px de medida de leitura contra 1427px de tabela: o comparativo inteiro
   ficava atras de uma barra de rolagem. Acima de 64rem ela se alarga ate 1200px
   e volta a caber. */
@media (min-width: 64rem) {
  .reading .table-shell--stack {
    width: min(calc(100vw - 3rem), 84rem);
    max-width: min(calc(100vw - 3rem), 84rem);
    margin-left: calc(50% - min(calc(100vw - 3rem), 84rem) / 2);
  }
  /* Largura fixa: a celula quebra linha em vez de a tabela estourar. Com 9 colunas
     nenhuma largura de tela cabe o conteudo em uma linha, e rolar de lado esconde a
     coluna da pegadinha. Entao a tabela nunca rola: a linha e que fica mais alta. */
  .reading .table-shell--stack table {
    min-width: 0;
    table-layout: fixed;
    width: 100%;
  }
  .reading .table-shell--stack thead th { white-space: normal; }
  .reading .table-shell--stack tbody th[scope="row"] { width: 11%; }
  .reading .table-shell--stack .table-wrap { overflow-x: visible; }
}
@media (min-width: 64rem) {
  /* Comparativo largo: celula mais apertada troca rolagem por leitura. */
  .reading .table-shell--stack .table-wrap th,
  .reading .table-shell--stack .table-wrap td {
    padding: var(--space-3) var(--space-2);
    font-size: var(--text-xs);
    line-height: 1.45;
  }
}

@media (max-width: 47.99rem) {
  /* Tabela de 2 colunas cabe no telefone; o min-width de 40rem e o cabecalho sem
     quebra de linha e que a faziam rolar. */
  .table-wrap table { min-width: 0; }
  .table-wrap thead th { white-space: normal; }
}

/* ---------------------------------------------------------------------------
   Bloco de ligacao em modo de espera.
   A linha ainda nao existe: o botao abre um aviso honesto e uma captura de
   email, em vez de discar um numero que nao atende.
   --------------------------------------------------------------------------- */
.call-espera {
  margin-top: var(--space-4);
  padding: var(--space-4);
  border: 1px solid var(--border);
  border-radius: var(--radius-md);
  background: var(--surface-2);
}
.call-espera[hidden] { display: none; }
.call-espera__titulo {
  margin: 0 0 var(--space-2);
  font-family: var(--font-display);
  font-size: var(--text-lg);
  line-height: 1.25;
  color: var(--text-1);
}
.call-espera__corpo {
  margin: 0 0 var(--space-4);
  font-size: var(--text-sm);
  color: var(--text-2);
}
.call-espera__form { display: grid; gap: var(--space-2); }
.call-espera__label {
  font-size: var(--text-xs);
  font-weight: 600;
  letter-spacing: .08em;
  text-transform: uppercase;
  color: var(--proof);
}
.call-espera__input {
  min-height: 44px;
  padding: 0 var(--space-3);
  border: 1px solid var(--border);
  border-radius: var(--radius-sm);
  background: var(--surface-1);
  color: var(--text-1);
  font: inherit;
  font-size: var(--text-sm);
}
.call-espera__input:focus-visible { outline: 2px solid var(--action); outline-offset: 2px; }
.call-espera__envia { min-height: 44px; }
.call-espera__envia[disabled] { opacity: .6; cursor: progress; }
.call-espera__status:empty { display: none; }
.call-espera__status {
  margin: var(--space-2) 0 0;
  font-size: var(--text-sm);
  color: var(--text-1);
}


/* ==================================================================
   Correcao de layout 2026-09-22 (sessao CEO). Cada bloco cita o
   defeito MEDIDO no DOM da home em producao, nao impressao.
   ================================================================== */

/* Aresta de container: --border (#D6D1C8) sobre o bege (#F3EEE6) da 1.32:1 de
   contraste — a borda some e o cartao vira mancha. --border-strong da 3.12:1.
   Vale so pra aresta que DELIMITA um objeto; divisor interno (linha de tabela,
   hairline de lista) continua no --border, senao a pagina fica encaixotada.
   .card--small e divisor disfarcado de card, entao fica de fora. */
.card:not(.card--small),
.ticket,
.table-wrap,
.keyfacts {
  border-color: var(--border-strong);
}

/* Faixa de prova: o grid era 1fr 1fr com align-items:center. O bilhete (403px)
   ficava na coluna 1 e os contadores (152px) na 2, sobrando ~250px de vazio a
   direita; os 3 contadores estavam forcados em 2 colunas, entao o terceiro
   ("Rules last read") caia orfao numa segunda linha; e a nota, que e irma dos
   contadores e nao filha, escorregava pra baixo do bilhete.
   Agora: bilhete ocupa as duas linhas da coluna 1; a coluna 2 empilha os 3
   numeros e recebe a nota embaixo. */
@media (min-width: 64rem) {
  .proof-strip__inner {
    grid-template-columns: 1fr 1fr;
    gap: var(--space-6) var(--space-8);
    align-items: start;
  }
  .proof-strip__inner > .ticket { grid-column: 1; grid-row: 1 / span 2; }
  .proof-strip__inner > .counters {
    grid-column: 2;
    grid-row: 1;
    grid-template-columns: 1fr;
    gap: var(--space-5);
  }
  .proof-strip__inner > .counters__note {
    grid-column: 2;
    grid-row: 2;
    max-width: none;
  }
}

/* Ritmo vertical: toda .section tem 80px em cima E embaixo. Duas seguidas SEM
   troca de fundo somavam 160px de ar morto (era o caso entre "Start with your
   situation" e "What airlines actually give you"). Quando o fundo muda, a faixa
   precisa do respiro de volta — senao a cor encosta no texto. */
.section + .section { padding-block-start: 0; }
.section + .section--alt,
.section + .section--receipts,
.section--alt + .section,
.section--receipts + .section { padding-block-start: var(--space-8); }
@media (min-width: 48rem) {
  .section + .section--alt,
  .section + .section--receipts,
  .section--alt + .section,
  .section--receipts + .section { padding-block-start: var(--space-9); }
}

/* Card grande das situacoes: a altura dele vem dos dois cards da direita
   (198 + 24 + 172 = 395px), mas o conteudo mede 265px. Com justify-content
   flex-start sobravam 130px de buraco embaixo. Centralizar divide a sobra e o
   bloco passa a parecer intencional. (A regra da linha 1619 ja pedia center;
   a 1744, mais tarde no arquivo, revertia pra flex-start.) */
@media (min-width: 48rem) {
  .card-grid--situations .card--large { justify-content: center; }
}

/* Escada dentro do artigo. O titulo de artigo NAO usa --text-4xl: ele tem tamanho proprio
   (.article-title--long vai a 2.6rem = 41.6px). Com o --text-3xl corrigido, um H2 herdando
   a escala global ficaria MAIOR que o H1 da propria pagina. Dentro do corpo, o H2 desce um
   degrau: 37.9px < 41.6px do titulo curto ou longo. (h3 ja esta em --text-xl na linha 1638.) */
.article-body h2 { font-size: var(--text-2xl); }