/* ======================================================================
   Moura Immigration — design tokens & base
   Editorial sóbrio: off-white denso, navy denso, terracota raro
   ====================================================================== */

@import url("https://fonts.googleapis.com/css2?family=Libre+Baskerville:ital,wght@0,400;0,700;1,400;1,700&family=Sora:wght@200;300;400;500;600;700&display=swap");

:root {
  /* Paleta Moura */
  --c-navy: #153156;
  --c-navy-90: #1d3c66;
  --c-navy-80: #2a4a73;
  --c-navy-12: rgba(21, 49, 86, 0.12);
  --c-navy-08: rgba(21, 49, 86, 0.08);
  --c-navy-04: rgba(21, 49, 86, 0.04);

  --c-terracota: #dd6f41;
  --c-terracota-deep: #c45f33;

  --c-offwhite: #f4f3ec;
  --c-offwhite-warm: #efece2;
  --c-sand: #e6dbd0;
  --c-sand-soft: #ede4da;
  --c-sky: #c1d5dc;
  --c-charcoal: #272727;

  /* Tipografia — fallback do Nexa: Sora (geom. sans) */
  --ff-display: "Libre Baskerville", "Times New Roman", serif;
  --ff-sans: "Sora", "Helvetica Neue", system-ui, -apple-system, sans-serif;

  /* Spacing */
  --space-1: 4px;
  --space-2: 8px;
  --space-3: 12px;
  --space-4: 16px;
  --space-6: 24px;
  --space-8: 32px;
  --space-12: 48px;
  --space-16: 64px;
  --space-20: 80px;
  --space-24: 96px;
  --space-32: 128px;

  /* Radii */
  --r-sm: 4px;
  --r-md: 8px;
  --r-lg: 16px;
  --r-xl: 28px;
  --r-pill: 999px;

  /* Shadows — bem discretas, mood editorial */
  --sh-sm: 0 1px 2px rgba(21, 49, 86, 0.06);
  --sh-md: 0 8px 24px rgba(21, 49, 86, 0.08);
  --sh-lg: 0 24px 60px rgba(21, 49, 86, 0.12);

  /* Transitions */
  --ease-out: cubic-bezier(0.22, 1, 0.36, 1);
  --ease-soft: cubic-bezier(0.4, 0, 0.2, 1);

  /* Layout */
  --max-w: 1280px;
  --gutter: clamp(20px, 4vw, 48px);
  --nav-h: 72px;
}

* { box-sizing: border-box; }

html { scroll-behavior: smooth; }

body {
  margin: 0;
  background: var(--c-offwhite);
  color: var(--c-charcoal);
  font-family: var(--ff-sans);
  font-weight: 400;
  font-size: 16px;
  line-height: 1.6;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  text-rendering: optimizeLegibility;
}

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

button { font-family: inherit; cursor: pointer; border: none; background: none; }

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

/* ============================================================
   Tipografia
   ============================================================ */

.t-overline {
  font-family: var(--ff-sans);
  font-weight: 600;
  font-size: 12px;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: var(--c-navy);
}

.t-display {
  font-family: var(--ff-display);
  font-weight: 700;
  font-size: clamp(40px, 6vw, 84px);
  line-height: 1.02;
  letter-spacing: -0.012em;
  color: var(--c-navy);
  margin: 0;
  text-wrap: balance;
}

.t-h1 {
  font-family: var(--ff-display);
  font-weight: 700;
  font-size: clamp(32px, 4vw, 52px);
  line-height: 1.08;
  letter-spacing: -0.01em;
  color: var(--c-navy);
  margin: 0;
  text-wrap: balance;
}

.t-h2 {
  font-family: var(--ff-display);
  font-weight: 700;
  font-size: clamp(26px, 3vw, 38px);
  line-height: 1.15;
  letter-spacing: -0.008em;
  color: var(--c-navy);
  margin: 0;
  text-wrap: balance;
}

.t-h3 {
  font-family: var(--ff-display);
  font-weight: 700;
  font-size: 22px;
  line-height: 1.25;
  color: var(--c-navy);
  margin: 0;
}

.t-lead {
  font-family: var(--ff-sans);
  font-weight: 300;
  font-size: clamp(17px, 1.4vw, 20px);
  line-height: 1.55;
  color: var(--c-charcoal);
  text-wrap: pretty;
}

.t-body {
  font-family: var(--ff-sans);
  font-weight: 400;
  font-size: 16px;
  line-height: 1.65;
  color: var(--c-charcoal);
  text-wrap: pretty;
}

.t-small {
  font-family: var(--ff-sans);
  font-weight: 400;
  font-size: 14px;
  line-height: 1.55;
  color: var(--c-charcoal);
}

.t-caption {
  font-family: var(--ff-sans);
  font-weight: 400;
  font-size: 12px;
  line-height: 1.4;
  letter-spacing: 0.02em;
  color: var(--c-navy);
  opacity: 0.7;
}

.t-italic {
  font-style: italic;
  font-weight: 400;
}

.t-accent { color: var(--c-terracota); }
.t-navy { color: var(--c-navy); }
.t-soft { opacity: 0.72; }

/* ============================================================
   Layout helpers
   ============================================================ */

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

.container--wide { max-width: 1480px; }

.section { padding-block: clamp(64px, 9vw, 128px); }
.section--tight { padding-block: clamp(48px, 6vw, 80px); }

.section--sand { background: var(--c-sand-soft); }
.section--navy { background: var(--c-navy); color: var(--c-offwhite); }
.section--navy .t-display,
.section--navy .t-h1,
.section--navy .t-h2,
.section--navy .t-h3 { color: var(--c-offwhite); }
.section--navy .t-overline { color: var(--c-terracota); }

.divider { height: 1px; background: var(--c-navy-12); }

/* ============================================================
   Botões
   ============================================================ */

.btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 10px;
  height: 52px;
  padding-inline: 24px;
  border-radius: var(--r-pill);
  font-family: var(--ff-sans);
  font-weight: 500;
  font-size: 14px;
  letter-spacing: 0.02em;
  transition: all 0.25s var(--ease-out);
  white-space: nowrap;
  border: 1px solid transparent;
  cursor: pointer;
}

.btn--primary {
  background: var(--c-navy);
  color: var(--c-offwhite);
}
.btn--primary:hover {
  background: var(--c-navy-90);
  transform: translateY(-1px);
  box-shadow: var(--sh-md);
}

.btn--accent {
  background: var(--c-terracota);
  color: var(--c-offwhite);
}
.btn--accent:hover {
  background: var(--c-terracota-deep);
  transform: translateY(-1px);
  box-shadow: 0 8px 20px rgba(221, 111, 65, 0.32);
}

.btn--outline {
  background: transparent;
  color: var(--c-navy);
  border-color: var(--c-navy);
}
.btn--outline:hover {
  background: var(--c-navy);
  color: var(--c-offwhite);
}

.btn--ghost {
  background: transparent;
  color: var(--c-navy);
}
.btn--ghost:hover { background: var(--c-navy-08); }

.btn--lg { height: 60px; padding-inline: 32px; font-size: 15px; }
.btn--sm { height: 40px; padding-inline: 16px; font-size: 13px; }

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

.btn .arrow {
  width: 16px; height: 16px;
  transition: transform 0.25s var(--ease-out);
}
.btn:hover .arrow { transform: translateX(3px); }

/* ============================================================
   Chips/tags/pill
   ============================================================ */

.chip {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 6px 14px;
  border-radius: var(--r-pill);
  border: 1px solid var(--c-navy-12);
  background: transparent;
  font-family: var(--ff-sans);
  font-weight: 500;
  font-size: 12px;
  letter-spacing: 0.04em;
  color: var(--c-navy);
  text-transform: uppercase;
}

.chip--filled { background: var(--c-navy); color: var(--c-offwhite); border-color: var(--c-navy); }
.chip--sand { background: var(--c-sand); border-color: transparent; }
.chip--terracota { color: var(--c-terracota); border-color: rgba(221, 111, 65, 0.3); }

/* ============================================================
   Cards
   ============================================================ */

.card {
  background: var(--c-offwhite);
  border: 1px solid var(--c-navy-12);
  border-radius: var(--r-lg);
  padding: var(--space-8);
  transition: all 0.3s var(--ease-out);
}

.card--sand { background: var(--c-sand-soft); border-color: transparent; }
.card--navy { background: var(--c-navy); color: var(--c-offwhite); border-color: transparent; }

.card-link:hover {
  transform: translateY(-3px);
  box-shadow: var(--sh-md);
  border-color: var(--c-navy);
}

/* ============================================================
   Forms
   ============================================================ */

.field { display: flex; flex-direction: column; gap: 6px; }

.field-label {
  font-family: var(--ff-sans);
  font-weight: 500;
  font-size: 13px;
  letter-spacing: 0.02em;
  color: var(--c-navy);
}

.field-hint {
  font-family: var(--ff-sans);
  font-size: 12px;
  color: var(--c-navy);
  opacity: 0.6;
}

.field-error {
  font-family: var(--ff-sans);
  font-size: 12px;
  color: var(--c-terracota-deep);
}

.input,
.textarea,
.select {
  width: 100%;
  padding: 14px 16px;
  border: 1px solid var(--c-navy-12);
  border-radius: var(--r-md);
  background: var(--c-offwhite);
  font-family: var(--ff-sans);
  font-weight: 400;
  font-size: 15px;
  color: var(--c-charcoal);
  transition: all 0.2s var(--ease-out);
}
.input:focus,
.textarea:focus,
.select:focus {
  outline: none;
  border-color: var(--c-navy);
  background: #fff;
  box-shadow: 0 0 0 4px var(--c-navy-08);
}
.textarea { resize: vertical; min-height: 120px; line-height: 1.55; }
.input.is-error { border-color: var(--c-terracota-deep); }

/* Radio/Check tiles */
.option-tile {
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 16px 18px;
  border: 1px solid var(--c-navy-12);
  border-radius: var(--r-md);
  background: var(--c-offwhite);
  cursor: pointer;
  transition: all 0.2s var(--ease-out);
  font-family: var(--ff-sans);
  font-size: 15px;
  color: var(--c-charcoal);
  text-align: left;
  width: 100%;
}
.option-tile:hover { border-color: var(--c-navy); background: #fff; }
.option-tile.is-active {
  border-color: var(--c-navy);
  background: var(--c-navy);
  color: var(--c-offwhite);
  box-shadow: var(--sh-sm);
}
.option-tile .tile-dot {
  width: 18px; height: 18px;
  border-radius: 50%;
  border: 1.5px solid currentColor;
  position: relative;
  flex-shrink: 0;
}
.option-tile.is-active .tile-dot::after {
  content: "";
  position: absolute;
  inset: 3px;
  border-radius: 50%;
  background: var(--c-terracota);
}

.checkbox {
  display: flex;
  gap: 10px;
  align-items: flex-start;
  cursor: pointer;
  font-size: 13px;
  line-height: 1.5;
  color: var(--c-charcoal);
}
.checkbox input { position: absolute; opacity: 0; pointer-events: none; }
.checkbox .box {
  width: 18px; height: 18px;
  border: 1.5px solid var(--c-navy);
  border-radius: 4px;
  background: var(--c-offwhite);
  flex-shrink: 0;
  position: relative;
  margin-top: 2px;
  transition: all 0.2s var(--ease-out);
}
.checkbox input:checked + .box {
  background: var(--c-navy);
}
.checkbox input:checked + .box::after {
  content: "";
  position: absolute;
  left: 5px; top: 1px;
  width: 5px; height: 10px;
  border: solid var(--c-offwhite);
  border-width: 0 2px 2px 0;
  transform: rotate(45deg);
}

/* ============================================================
   Modal
   ============================================================ */

.modal-backdrop {
  position: fixed;
  inset: 0;
  background: rgba(21, 49, 86, 0.4);
  backdrop-filter: blur(6px);
  -webkit-backdrop-filter: blur(6px);
  display: flex;
  align-items: center;
  justify-content: center;
  z-index: 200;
  padding: 24px;
  animation: fadeIn 0.25s var(--ease-out);
}
@keyframes fadeIn { from { opacity: 0; } to { opacity: 1; } }

.modal {
  background: var(--c-offwhite);
  border-radius: var(--r-xl);
  width: 100%;
  max-width: 640px;
  max-height: 92vh;
  overflow: hidden;
  display: flex;
  flex-direction: column;
  box-shadow: var(--sh-lg);
  animation: modalIn 0.35s var(--ease-out);
}
@keyframes modalIn {
  from { opacity: 0; transform: translateY(20px) scale(0.98); }
  to { opacity: 1; transform: translateY(0) scale(1); }
}
.modal--wide { max-width: 760px; }

.modal-head {
  padding: 20px 28px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
  border-bottom: 1px solid var(--c-navy-08);
}
.modal-body { padding: 32px 36px; overflow-y: auto; flex: 1; }
.modal-foot {
  padding: 20px 28px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
  border-top: 1px solid var(--c-navy-08);
  background: var(--c-offwhite-warm);
}

.modal-close {
  width: 36px; height: 36px;
  border-radius: 50%;
  display: grid;
  place-items: center;
  color: var(--c-navy);
  transition: background 0.2s;
}
.modal-close:hover { background: var(--c-navy-08); }

.modal-stepper {
  display: flex;
  gap: 6px;
  flex: 1;
  align-items: center;
}
.modal-stepper .step {
  flex: 1;
  height: 3px;
  background: var(--c-navy-12);
  border-radius: 999px;
  transition: background 0.4s var(--ease-out);
}
.modal-stepper .step.is-done { background: var(--c-terracota); }
.modal-stepper .step.is-active { background: var(--c-navy); }

/* ============================================================
   Reveal animations (scroll-triggered)
   ============================================================ */

.reveal {
  opacity: 0;
  transform: translateY(24px);
  transition: opacity 0.8s var(--ease-out), transform 0.8s var(--ease-out);
}
.reveal.is-in {
  opacity: 1;
  transform: translateY(0);
}
.reveal.delay-1 { transition-delay: 0.08s; }
.reveal.delay-2 { transition-delay: 0.16s; }
.reveal.delay-3 { transition-delay: 0.24s; }
.reveal.delay-4 { transition-delay: 0.32s; }

@media (prefers-reduced-motion: reduce) {
  .reveal { opacity: 1; transform: none; transition: none; }
  html { scroll-behavior: auto; }
}

/* ============================================================
   NAV
   ============================================================ */

.nav {
  position: sticky;
  top: 0;
  z-index: 50;
  background: rgba(244, 243, 236, 0.84);
  backdrop-filter: blur(14px);
  -webkit-backdrop-filter: blur(14px);
  border-bottom: 1px solid var(--c-navy-08);
  height: var(--nav-h);
}
.nav-inner {
  max-width: var(--max-w);
  margin: 0 auto;
  padding-inline: var(--gutter);
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 24px;
  height: 100%;
}
.nav-links {
  display: flex;
  gap: 4px;
  align-items: center;
}
.nav-link {
  padding: 8px 14px;
  border-radius: var(--r-pill);
  font-family: var(--ff-sans);
  font-weight: 500;
  font-size: 13.5px;
  color: var(--c-navy);
  letter-spacing: 0.01em;
  transition: all 0.2s var(--ease-out);
  position: relative;
}
.nav-link:hover { background: var(--c-navy-08); }
.nav-link.is-active { color: var(--c-navy); }
.nav-link.is-active::after {
  content: "";
  position: absolute;
  left: 14px; right: 14px; bottom: 4px;
  height: 1.5px;
  background: var(--c-terracota);
  border-radius: 1px;
}

@media (max-width: 1100px) {
  .nav-links { display: none; }
}
@media (max-width: 720px) {
  .nav-cta-label { display: none; }
  .nav-cta-label-short { display: inline; }
}

/* ============================================================
   FOOTER
   ============================================================ */

.footer {
  background: var(--c-charcoal);
  color: var(--c-offwhite);
  padding-block: 80px 32px;
}
.footer a { color: inherit; opacity: 0.78; transition: opacity 0.2s; }
.footer a:hover { opacity: 1; }

/* Animated Porfilio Company link */
.porfilio-link {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  text-decoration: none;
  color: rgba(244, 243, 236, 0.65) !important;
  opacity: 1 !important;
  font-size: 12px;
  letter-spacing: 0.02em;
  position: relative;
  padding: 6px 14px 6px 12px;
  border-radius: 999px;
  background: rgba(244, 243, 236, 0.04);
  border: 1px solid rgba(244, 243, 236, 0.12);
  transition: all 0.4s cubic-bezier(0.22, 1, 0.36, 1);
  overflow: hidden;
  isolation: isolate;
}
.porfilio-link::before {
  content: "";
  position: absolute; inset: 0;
  background: linear-gradient(110deg,
    transparent 0%,
    rgba(199, 95, 56, 0.35) 35%,
    rgba(244, 243, 236, 0.18) 55%,
    transparent 80%);
  transform: translateX(-110%);
  transition: transform 0.9s cubic-bezier(0.22, 1, 0.36, 1);
  z-index: -1;
}
.porfilio-link:hover {
  color: var(--c-offwhite) !important;
  border-color: rgba(199, 95, 56, 0.55);
  background: rgba(199, 95, 56, 0.10);
  transform: translateY(-1px);
  box-shadow: 0 6px 18px rgba(0, 0, 0, 0.25);
}
.porfilio-link:hover::before { transform: translateX(110%); }
.porfilio-prefix { opacity: 0.65; }
.porfilio-mark {
  font-family: var(--ff-display);
  font-weight: 700;
  font-style: italic;
  display: inline-flex;
  align-items: center;
  gap: 6px;
  letter-spacing: 0.01em;
}
.porfilio-dot {
  width: 6px; height: 6px; border-radius: 50%;
  background: var(--c-terracota);
  display: inline-block;
  box-shadow: 0 0 0 0 rgba(199, 95, 56, 0.55);
  animation: porfilio-pulse 2.4s var(--ease-out) infinite;
}
@keyframes porfilio-pulse {
  0%, 100% { box-shadow: 0 0 0 0 rgba(199, 95, 56, 0.55); transform: scale(1); }
  50% { box-shadow: 0 0 0 6px rgba(199, 95, 56, 0); transform: scale(1.15); }
}
.porfilio-link:hover .porfilio-dot { animation-duration: 1.2s; }
@media (max-width: 520px) {
  .porfilio-link { width: 100%; justify-content: center; }
}
.footer h4 {
  font-family: var(--ff-sans);
  font-weight: 600;
  font-size: 12px;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: var(--c-terracota);
  margin: 0 0 16px;
}

/* ============================================================
   Logo placeholder ("M" stamp)
   ============================================================ */

.logo {
  display: inline-flex;
  align-items: center;
  text-decoration: none;
}
.logo img {
  height: 28px;
  width: auto;
  display: block;
}
.logo--compact img {
  height: 56px;
  width: auto;
}

/* ============================================================
   Hero passport stamp & form mock styles
   ============================================================ */

.hero-art {
  position: relative;
  aspect-ratio: 4 / 5;
  width: 100%;
  max-width: 540px;
  margin-inline: auto;
}

.passport-stamp {
  position: absolute;
  width: 140px; height: 140px;
  border: 1.5px solid var(--c-terracota);
  border-radius: 50%;
  color: var(--c-terracota);
  display: grid;
  place-items: center;
  font-family: var(--ff-display);
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.1em;
  opacity: 0.85;
  background: rgba(244, 243, 236, 0.5);
  backdrop-filter: blur(2px);
}

.uscis-form {
  position: absolute;
  background: var(--c-offwhite);
  border: 1px solid var(--c-navy-12);
  border-radius: 6px;
  padding: 12px 16px;
  font-family: "Courier New", monospace;
  font-size: 9px;
  letter-spacing: 0.04em;
  color: var(--c-navy);
  box-shadow: var(--sh-sm);
  line-height: 1.5;
}

/* ============================================================
   Photo placeholder (Raísa)
   ============================================================ */

.photo-ph {
  position: relative;
  background:
    linear-gradient(135deg, rgba(193, 213, 220, 0.5), rgba(230, 219, 208, 0.6)),
    repeating-linear-gradient(
      45deg,
      transparent 0,
      transparent 14px,
      rgba(21, 49, 86, 0.04) 14px,
      rgba(21, 49, 86, 0.04) 15px
    );
  border-radius: var(--r-md);
  overflow: hidden;
  display: grid;
  place-items: center;
}
.photo-ph::before {
  content: "";
  position: absolute;
  inset: 16px;
  border: 1px dashed var(--c-navy-12);
  border-radius: 4px;
  pointer-events: none;
}
.photo-ph .ph-label {
  position: relative;
  font-family: var(--ff-sans);
  font-weight: 500;
  font-size: 10px;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: var(--c-navy);
  opacity: 0.55;
  text-align: center;
  padding: 4px 12px;
}
.photo-ph .ph-icon {
  position: relative;
  width: 56px; height: 56px;
  margin-bottom: 12px;
  opacity: 0.4;
}
.photo-ph:has(img) {
  background: none;
}
.photo-ph:has(img)::before {
  display: none;
}

/* ============================================================
   Quote block
   ============================================================ */

.quote-block {
  position: relative;
  font-family: var(--ff-display);
  font-style: italic;
  font-weight: 400;
  font-size: clamp(22px, 2.4vw, 32px);
  line-height: 1.4;
  color: var(--c-navy);
  text-wrap: balance;
}

/* ============================================================
   Utilities
   ============================================================ */

.flex { display: flex; }
.flex-col { display: flex; flex-direction: column; }
.items-center { align-items: center; }
.items-start { align-items: flex-start; }
.justify-between { justify-content: space-between; }
.gap-2 { gap: 8px; }
.gap-3 { gap: 12px; }
.gap-4 { gap: 16px; }
.gap-6 { gap: 24px; }
.gap-8 { gap: 32px; }
.gap-12 { gap: 48px; }

.grid { display: grid; }
.grid-2 { grid-template-columns: repeat(2, 1fr); }
.grid-3 { grid-template-columns: repeat(3, 1fr); }
.grid-4 { grid-template-columns: repeat(4, 1fr); }
@media (max-width: 880px) {
  .grid-2, .grid-3, .grid-4 { grid-template-columns: 1fr; }
}

.text-center { text-align: center; }
.mw-prose { max-width: 64ch; }
.mw-narrow { max-width: 48ch; }

.mt-2 { margin-top: 8px; } .mt-3 { margin-top: 12px; } .mt-4 { margin-top: 16px; }
.mt-6 { margin-top: 24px; } .mt-8 { margin-top: 32px; } .mt-12 { margin-top: 48px; }
.mt-16 { margin-top: 64px; }

.mb-2 { margin-bottom: 8px; } .mb-3 { margin-bottom: 12px; } .mb-4 { margin-bottom: 16px; }
.mb-6 { margin-bottom: 24px; } .mb-8 { margin-bottom: 32px; } .mb-12 { margin-bottom: 48px; }

/* hide scrollbar but keep scroll */
.no-scrollbar::-webkit-scrollbar { display: none; }
.no-scrollbar { scrollbar-width: none; -ms-overflow-style: none; }

/* ======================================================================
   MOBILE — aggressive overrides for inline grids and hero composition
   ====================================================================== */
/* ============================================================
   Animacoes (badges hero rotativos + marquee trust strip)
   ============================================================ */
@keyframes hero-badge-rotate-a {
  0%, 45% { opacity: 1; }
  50%, 95% { opacity: 0; }
  100% { opacity: 1; }
}
@keyframes hero-badge-rotate-b {
  0%, 45% { opacity: 0; }
  50%, 95% { opacity: 1; }
  100% { opacity: 0; }
}
@keyframes marquee-scroll {
  0% { transform: translateX(0); }
  100% { transform: translateX(-50%); }
}
@keyframes marquee-scroll-reverse {
  0% { transform: translateX(-50%); }
  100% { transform: translateX(0); }
}

/* Marquee (oculto por padrao, so aparece no mobile) */
.trust-marquee { display: none; }

/* ============================================================
   Hero mobile-only adjustments
   ============================================================ */
.hero-br-mobile { display: none; }
.hero-line-seg { display: inline; }
.hero-line-br-desktop { display: inline; }

/* Trust strip: texto desktop por padrao, mobile escondido */
.trust-text-mobile { display: none; }
.trust-text-desktop { display: inline; }

@media (max-width: 768px) {
  .hero-br-mobile { display: inline; }
  /* Headline: cada segmento vira bloco — gera 3 linhas */
  .hero-line-seg { display: block !important; }
  .hero-line-br-desktop { display: none !important; }
  /* Hero lead: cada chunk vira sua propria linha no mobile */
  .hero-lead-line { display: block !important; }
  /* Hero lead font menor pra caber em 4 linhas */
  .hero .t-lead { font-size: 13.5px !important; line-height: 1.5 !important; }
}

/* ============================================================
   Depoimentos dots — bigger touch target on mobile
   ============================================================ */
.depo-dots { padding: 4px 0; }
.depo-dot {
  width: 8px; height: 8px;
  border-radius: 999px;
  background: var(--c-navy-12);
  border: none;
  cursor: pointer;
  padding: 0;
  position: relative;
  transition: all 0.3s var(--ease-out);
}
.depo-dot[data-active="true"] { width: 28px; background: var(--c-navy); }
.depo-dot::before {
  content: "";
  position: absolute;
  inset: -10px;
}

/* ============================================================
   MOBILE — all overrides in one place. Desktop intact above.
   Breakpoints: 880, 768, 480
   ============================================================ */

@media (max-width: 880px) {
  /* Force any 2-col grid to single col */
  .grid[style*="gridTemplateColumns"],
  .grid[style*="grid-template-columns"],
  main .grid,
  footer .grid {
    grid-template-columns: 1fr !important;
    gap: 28px !important;
    align-items: start !important;
  }

  /* Modal full-screen */
  .modal-overlay { padding: 0 !important; }
  .modal-card { border-radius: 0 !important; max-height: 100vh !important; min-height: 100vh; }

  /* FAQ sticky off */
  #faq [style*="position: sticky"] { position: static !important; }

  /* ValueProp: kill sticky and stack */
  .valueprop-grid {
    grid-template-columns: 1fr !important;
    gap: 32px !important;
  }
  .valueprop-left { position: static !important; }
}

@media (max-width: 768px) {
  /* Container & sections — espacamento +10% adicional */
  .container { padding-inline: 18px; }
  .section { padding-block: clamp(53px, 13vw, 88px) !important; }

  /* Spacing utilities +10% adicional */
  .mt-3 { margin-top: 14px; }
  .mt-4 { margin-top: 20px; }
  .mt-6 { margin-top: 29px; }
  .mt-8 { margin-top: 39px; }
  .mt-12 { margin-top: 53px; }
  .mt-16 { margin-top: 73px; }
  .mb-3 { margin-bottom: 14px; }
  .mb-4 { margin-bottom: 20px; }
  .mb-6 { margin-bottom: 29px; }
  .mb-8 { margin-bottom: 39px; }
  .mb-12 { margin-bottom: 53px; }
  .mb-16 { margin-bottom: 73px; }
  /* Grid gaps */
  .grid-2 { gap: 32px !important; }
  .grid-3 { gap: 26px !important; }

  /* ========== TYPOGRAPHY (mobile) ==========
     Reference: Maia Santos site on iPhone 16 Pro
     Body 15px, lead 16px, h3 19px, h2 22-26px, h1 26-32px, display 26-32px
  */
  .t-display { font-size: clamp(24px, 7vw, 30px) !important; line-height: 1.12 !important; letter-spacing: -0.015em; }
  /* Hero headline maior, mas tight pra caber 'Imigracao para os EUA,' em 1 linha */
  .hero .t-display {
    font-size: clamp(26px, 7.8vw, 32px) !important;
    letter-spacing: -0.025em !important;
    line-height: 1.1 !important;
  }
  .t-h1 { font-size: clamp(24px, 7vw, 30px) !important; line-height: 1.15 !important; }
  .t-h2 { font-size: clamp(20px, 5.5vw, 26px) !important; line-height: 1.2 !important; }
  .t-h3 { font-size: 19px !important; line-height: 1.3 !important; }
  .t-lead { font-size: 16px !important; line-height: 1.6 !important; }
  .t-body { font-size: 15px !important; line-height: 1.65 !important; }
  .t-overline { font-size: 10.5px !important; letter-spacing: 0.16em; }
  .t-caption { font-size: 11px !important; }
  .t-small { font-size: 12.5px !important; }

  /* ========== NAV ========== */
  .nav-inner { padding: 12px 16px !important; position: relative; transition: padding 0.25s var(--ease-out); }
  .logo img { height: 20px !important; transition: height 0.25s var(--ease-out); }
  /* Quando scrollar, encolhe um pouco mas mantem visivel */
  .nav--scrolled .nav-inner { padding: 7px 14px !important; }
  .nav--scrolled .logo img { height: 16px !important; }
  .nav--scrolled .btn--sm { height: 34px !important; padding: 6px 14px !important; font-size: 12.5px !important; transition: all 0.25s var(--ease-out); }
  /* Show short CTA label, hide long one. Override inline display:none */
  .nav-cta-label { display: none !important; }
  .nav-cta-label-short { display: inline !important; }
  .nav-links { display: none !important; }  /* hide desktop nav links on mobile */
  /* Lang toggle: centralizado, discreto, some no scroll */
  .nav .lang-toggle {
    position: absolute !important;
    left: 50% !important;
    top: 50% !important;
    transform: translate(-50%, -50%) !important;
    background: transparent !important;
    padding: 1px !important;
    gap: 0 !important;
    transition: opacity 0.4s var(--ease-out), transform 0.4s var(--ease-out) !important;
    opacity: 0.7;
  }
  .nav .lang-toggle button {
    padding: 3px 8px !important;
    font-size: 9.5px !important;
    background: transparent !important;
    color: var(--c-navy) !important;
    opacity: 0.55;
  }
  .nav .lang-toggle button[aria-pressed="true"] {
    opacity: 1;
    background: rgba(26,46,79,0.08) !important;
  }
  /* Fade out no scroll */
  .nav .lang-toggle.lang-toggle--scrolled {
    opacity: 0 !important;
    transform: translate(-50%, calc(-50% - 8px)) !important;
    pointer-events: none !important;
  }

  /* ========== HERO (+20% espacamento primeiro fold) ========== */
  .hero { padding-top: 26px !important; padding-bottom: 46px !important; }
  .hero-art-wrap { display: none !important; }  /* hide complex decorative cards on mobile */
  /* Hero text bloco: centraliza tudo no mobile */
  .hero > .container > .grid > div:first-child {
    text-align: center;
  }
  /* Hero badges: rotativos — 1 aparece de cada vez com fade */
  .hero-badges-row {
    position: relative !important;
    display: flex !important;
    justify-content: center !important;
    align-items: center !important;
    margin-bottom: 24px !important;
    background: transparent !important;
    border: none !important;
    padding: 0 !important;
    border-radius: 0 !important;
    min-height: 28px;
  }
  /* Os 2 badges sobrepostos, animacao alterna visibilidade */
  .hero-badge {
    position: absolute !important;
    left: 50% !important;
    top: 50% !important;
    transform: translate(-50%, -50%) !important;
    background: var(--c-offwhite-warm) !important;
    border: 1px solid var(--c-navy-12) !important;
    padding: 6px 14px !important;
    border-radius: 999px !important;
    font-size: 9px !important;
    letter-spacing: 0.1em !important;
    color: var(--c-navy) !important;
    gap: 6px !important;
    line-height: 1.3 !important;
    white-space: nowrap;
    opacity: 0;
  }
  .hero-badge:nth-of-type(1) { animation: hero-badge-rotate-a 6s infinite; }
  .hero-badge:nth-of-type(2) { animation: hero-badge-rotate-b 6s infinite; }
  .hero-badge-dot {
    width: 4px !important;
    height: 4px !important;
  }
  /* Hero lead paragraph centered + margin top (+20%) */
  .hero .t-lead { text-align: center; margin-left: auto; margin-right: auto; margin-top: 22px !important; }
  /* Margin pra headline (+20%) */
  .hero h1.t-display { margin-bottom: 22px !important; }
  /* Espaco entre lead e CTA (+20%) */
  .hero .flex.gap-3 { margin-top: 34px !important; }
  /* CTA principal do hero: bem largo, dominante (hierarquia visual) */
  .hero .btn--lg {
    width: 100% !important;
    max-width: 100% !important;
    justify-content: center;
    padding: 16px 24px !important;
    font-size: 15px !important;
  }
  .hero .flex.gap-3 { width: 100%; }
  .flex.gap-3 > .btn--lg { justify-content: center; }
  .hero .flex.gap-3 { justify-content: center; }

  /* ========== CARDS (generic) — padding +10% vertical ========== */
  .card { padding: 29px 24px !important; }
  .depo-card { padding: 29px 24px !important; min-height: auto !important; }
  .path-card { padding: 29px 24px !important; min-height: auto !important; }
  .service-card { padding: 26px 20px !important; }
  .process-step { padding: 29px 24px !important; min-height: auto !important; }

  /* ========== SERVICE CARDS ========== */
  .service-card__title { font-size: 17px !important; line-height: 1.3 !important; }
  .service-card__body { font-size: 14px !important; line-height: 1.6 !important; }
  .service-card__forms { font-size: 10px !important; }
  .service-card--featured .service-card__title { font-size: 19px !important; }
  .service-card--featured .service-card__body { font-size: 14.5px !important; }
  .services-group__head { padding-bottom: 14px !important; margin-bottom: 20px !important; gap: 12px !important; }
  .services-group__kicker { font-size: clamp(17px, 5.5vw, 22px) !important; line-height: 1.2 !important; }
  .services-group__num { font-size: 12px !important; }

  /* ========== WhyUs (navy section) ========== */
  .section--navy .whyus-card h3 { font-size: 17px !important; line-height: 1.25 !important; }
  .section--navy .whyus-card p { font-size: 14px !important; line-height: 1.6 !important; }

  /* ========== EmNumeros ========== */
  /* Section padding +20% pra mais respiro */
  .em-numeros-section {
    padding-top: 34px !important;
    padding-bottom: 34px !important;
  }
  /* Header com mais respiro */
  .em-numeros-header {
    margin-bottom: 20px !important;
  }
  .em-numeros-section .t-h1 {
    font-size: 24px !important;
    line-height: 1.25 !important;
  }
  /* 1 coluna no mobile — empilhado vertical (so EmNumeros usa essa classe) */
  .grid-4 {
    grid-template-columns: 1fr !important;
    gap: 24px !important;
  }
  /* Cada stat centralizado, com +20% espacamento vertical */
  .em-numeros-section .grid-4 > div {
    text-align: center !important;
    padding-top: 22px !important;
  }
  /* Barra terracota centralizada (era left: 0) */
  .em-numeros-section .grid-4 > div > div[style*="height: 1px"] {
    left: 50% !important;
    transform: translateX(-50%);
  }
  /* Icone centralizado, com mais respiro abaixo */
  .em-numeros-section .grid-4 > div > div[style*="terracota"][style*="margin"],
  .em-numeros-section .grid-4 > div > div:has(svg):first-of-type {
    display: flex !important;
    justify-content: center !important;
    margin-bottom: 10px !important;
  }
  /* Numero +10% maior */
  .em-numeros-section .grid-4 [style*="clamp(48px"] {
    font-size: 32px !important;
    margin-bottom: 10px !important;
    line-height: 1 !important;
  }
  /* Label +10% maior, line-height mais respirado */
  .em-numeros-section .grid-4 > div > div:last-child {
    font-size: 13px !important;
    line-height: 1.5 !important;
  }

  /* ========== Depoimentos ========== */
  #depoimentos .no-scrollbar {
    /* touch-action: auto deixa o browser decidir entre swipe horizontal e scroll vertical */
    touch-action: auto;
    -webkit-overflow-scrolling: touch;
    /* Centraliza visualmente o card ativo (com peek dos vizinhos) */
    padding-inline: 7vw !important;
    scroll-padding-inline: 7vw !important;
  }
  /* Cards usam touch-action default (auto): pode tanto rolar vertical quanto swipe horizontal */
  #depoimentos .depo-card { touch-action: auto !important; }
  #depoimentos .carousel-btn { display: none !important; }
  #depoimentos [style*="flex: 0 0"] {
    flex: 0 0 86vw !important;
    scroll-snap-align: center !important;
  }
  .depo-card p:nth-of-type(1) { font-size: 16px !important; line-height: 1.4 !important; }
  .depo-card p:nth-of-type(2) { font-size: 13.5px !important; line-height: 1.55 !important; }

  /* ========== Process step (Como Funciona) ========== */
  .process-step > div:first-child { font-size: 40px !important; margin-bottom: 16px !important; }
  .branch-pill { font-size: 12.5px !important; padding: 9px 14px !important; }

  /* ========== FAQ ========== */
  #faq button[style*="padding"] { padding: 14px 0 !important; }
  #faq button span:first-child[style] { font-size: 16px !important; }

  /* ========== FinalCta ========== */
  .path-card__title { font-size: 18px !important; }
  .path-card__body { font-size: 14px !important; line-height: 1.6 !important; }
  .path-card__icon { width: 44px !important; height: 44px !important; margin-bottom: 20px !important; }
  .path-card__cta { font-size: 12px !important; }

  /* ========== Modal ========== */
  .modal-body { padding: 24px 20px !important; }
  /* Modal foot: empilhar vertical no mobile (acao em cima, cancelar embaixo) */
  .modal-foot {
    padding: 14px 20px !important;
    flex-direction: column-reverse !important;
    align-items: stretch !important;
    gap: 8px !important;
  }
  .modal-foot .btn {
    width: 100% !important;
    flex: none !important;
    justify-content: center !important;
    white-space: normal !important;
  }
  /* Cancelar como texto secundario */
  .modal-foot .btn--ghost {
    background: transparent !important;
    border: none !important;
    color: var(--c-navy) !important;
    opacity: 0.6 !important;
    font-size: 13px !important;
    padding: 8px !important;
  }

  /* ========== Footer ========== */
  .footer .grid { grid-template-columns: 1fr !important; gap: 22px !important; }
  .footer h4 { font-size: 13px !important; margin-bottom: 10px !important; }
  .footer ul { font-size: 13.5px !important; gap: 8px !important; }

  /* ========== Hide decorative passport stamp on mobile ========== */
  .passport-stamp { display: none !important; }

  /* Buttons base sizing on mobile (+10% pra ter mais presenca) */
  .btn--lg { padding: 15px 24px !important; font-size: 15px !important; }

  /* ========== CTAs CENTRALIZADOS no mobile ==========
     Sobrescreve inline align-self: flex-start e similares.
     Exclui modal-foot (cancelar + acao em par) e nav buttons */
  .btn[style*="align-self: flex-start"],
  .btn[style*="alignSelf: flex-start"] {
    align-self: center !important;
  }
  .service-card .btn, .service-card--individual .btn {
    align-self: center !important;
    margin-left: auto !important;
    margin-right: auto !important;
  }
  /* Botoes dentro de containers centered text */
  .text-center .btn { margin-left: auto !important; margin-right: auto !important; }
  /* Container flex de botoes */
  section .flex.gap-3:not(.modal-foot),
  section .flex.gap-2:not(.modal-foot) {
    justify-content: center !important;
  }

  /* ========== Trust strip: esconde versao pill desktop, mostra marquee ========== */
  .trust-strip-desktop { display: none !important; }
  .trust-marquee {
    display: block !important;
    width: 100vw;
    margin-left: calc(50% - 50vw);
    margin-top: 40px;
    overflow: hidden;
    padding: 11px 0;
    background: var(--c-offwhite-warm);
    border-top: 1px solid var(--c-navy-12);
    border-bottom: 1px solid var(--c-navy-12);
  }
  .trust-marquee-row {
    overflow: hidden;
    padding: 4px 0;
  }
  .trust-marquee-track {
    display: inline-flex;
    align-items: center;
    gap: 24px;
    width: max-content;
    animation: marquee-scroll 28s linear infinite;
    font-size: 9.5px;
    font-weight: 500;
    text-transform: uppercase;
    letter-spacing: 0.12em;
    color: var(--c-navy);
    white-space: nowrap;
    line-height: 1.2;
  }
  .trust-marquee-track > span {
    flex-shrink: 0;
  }
  .trust-dot {
    color: var(--c-terracota) !important;
    font-size: 5px !important;
    letter-spacing: 0 !important;
  }
  .trust-marquee-row--reverse .trust-marquee-track {
    animation-name: marquee-scroll-reverse;
  }

  /* ========== CTAs "sozinhos" (+10% relativo ao reduzido) ========== */
  .section .btn--lg:not(.modal-foot .btn) {
    padding: 13px 20px !important;
    font-size: 14px !important;
  }
  .section--navy .btn--lg {
    padding: 13px 22px !important;
    font-size: 14.5px !important;
  }

  /* ========== Quem sou eu (ValueProp): texto justificado ========== */
  .valueprop-grid p {
    text-align: justify !important;
    text-justify: inter-word;
    hyphens: auto;
    -webkit-hyphens: auto;
  }
}

/* Smaller phones */
@media (max-width: 480px) {
  .container { padding-inline: 16px; }
  .t-display { font-size: clamp(24px, 8vw, 32px) !important; }
  .t-h1 { font-size: clamp(22px, 7vw, 28px) !important; }
  .t-h2 { font-size: clamp(19px, 5.5vw, 23px) !important; }
  .logo img { height: 18px !important; }
  .depo-card { padding: 22px 20px !important; }
  .path-card { padding: 22px 20px !important; }
  .service-card { padding: 20px !important; }
  .nav-inner { padding: 10px 14px !important; }
  .btn--sm { padding: 8px 14px !important; font-size: 13px !important; height: 38px !important; }

  /* Servicos page: featured services (Green Card + EB-3) — 1 coluna no mobile */
  .servicos-featured-grid { grid-template-columns: 1fr !important; gap: 28px !important; }
  .servicos-featured-grid .card { padding: 22px 20px !important; }
  .servicos-featured-grid .card li { font-size: 13.5px !important; padding: 12px 0 !important; gap: 12px !important; }
  .servicos-featured-grid .card li span:first-child { width: 20px !important; height: 20px !important; font-size: 10px !important; }

  /* Servicos page: other groups card grid — 1 coluna no mobile */
  .servicos-other-grid { grid-template-columns: 1fr !important; gap: 16px !important; }
  .servicos-card { padding: 22px 20px !important; }
  .servicos-card h3.t-h3 { font-size: 18px !important; }
  .servicos-card .t-body { font-size: 13.5px !important; line-height: 1.55 !important; }
  .servicos-card ul li { font-size: 13px !important; padding: 10px 0 !important; }

  /* Servicos page: individual consultation CTA section */
  .servicos-individual-grid { grid-template-columns: 1fr !important; gap: 28px !important; }
  .servicos-individual-grid .btn { width: 100% !important; justify-content: center !important; }

  /* Sobre page: numbers grid 4-col -> 2-col on mobile */
  .sobre-numbers-grid { grid-template-columns: 1fr 1fr !important; gap: 12px !important; }
  .sobre-numbers-grid > div { padding: 20px 10px !important; }
}