/* =========================================================================
   MANGO — Site institucional (appmango.com.br)
   Paleta extraída do logotipo oficial (assets/logo-full.png).
   Estrutura e ritmo visual inspirados nas referências de landing page,
   sem cópia literal — a cor é toda da marca.
   ========================================================================= */

/* ---------------------------------------------------------------
   1. TOKENS
   --------------------------------------------------------------- */
:root {
  /* --- cores da marca, amostradas do logotipo --- */
  --cor-principal:        #0E6B43;  /* verde do wordmark "Mango" */
  --cor-principal-escura: #0A5233;
  --cor-principal-clara:  #1B8A55;
  --cor-secundaria:       #2F9C57;  /* verde médio da fruta */
  --cor-lima:             #7CB342;  /* verde-limão das folhas */
  --cor-destaque:         #F0872E;  /* laranja da polpa */
  --cor-destaque-escura:  #D96C1C;
  --cor-amarelo:          #F5C13D;  /* amarelo do gradiente */

  /* --- superfícies e texto --- */
  --cor-fundo:        #F7F6F1;
  --cor-fundo-alt:    #FFFFFF;
  --cor-superficie:   #FFFFFF;
  --cor-superficie-2: #F2F1EA;
  --cor-texto:        #12211A;
  --cor-texto-2:      #56685D;   /* ~5.2:1 sobre --cor-fundo */
  --cor-texto-3:      #7A8A80;   /* só para texto grande/decorativo */
  --cor-borda:        #E4E2D8;
  --cor-borda-forte:  #D3D1C5;

  /* --- apoio --- */
  --cor-sucesso: #1B8A55;
  --cor-alerta:  #D96C1C;
  --cor-neutro:  #8A9990;

  /* --- gradientes da fruta --- */
  --grad-marca: linear-gradient(135deg, var(--cor-lima) 0%, var(--cor-amarelo) 45%, var(--cor-destaque) 100%);
  --grad-verde: linear-gradient(140deg, var(--cor-principal) 0%, var(--cor-secundaria) 100%);

  /* --- forma --- */
  --raio-sm: 10px;
  --raio:    16px;
  --raio-lg: 24px;
  --raio-xl: 32px;
  --raio-pill: 999px;

  --sombra-sutil: 0 1px 2px rgba(18, 33, 26, .04), 0 2px 8px rgba(18, 33, 26, .04);
  --sombra:       0 2px 4px rgba(18, 33, 26, .04), 0 12px 28px -12px rgba(18, 33, 26, .12);
  --sombra-alta:  0 4px 8px rgba(18, 33, 26, .05), 0 28px 60px -24px rgba(18, 33, 26, .22);

  /* --- tipografia --- */
  --fonte-display: "Plus Jakarta Sans", "Segoe UI", system-ui, sans-serif;
  --fonte-texto:   "Inter", "Segoe UI", system-ui, sans-serif;
  --fonte-mono:    "JetBrains Mono", ui-monospace, "Cascadia Mono", monospace;

  /* --- ritmo --- */
  --largura: 1180px;
  --gutter: 24px;
  --secao-y: clamp(72px, 9vw, 128px);

  color-scheme: light;
}

/* ---------------------------------------------------------------
   2. BASE
   --------------------------------------------------------------- */
*, *::before, *::after { box-sizing: border-box; }

html { scroll-behavior: smooth; scroll-padding-top: 96px; }

body {
  margin: 0;
  background: var(--cor-fundo);
  color: var(--cor-texto);
  font-family: var(--fonte-texto);
  font-size: 16px;
  line-height: 1.6;
  -webkit-font-smoothing: antialiased;
  overflow-x: hidden;
}

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

h1, h2, h3 {
  font-family: var(--fonte-display);
  font-weight: 800;
  letter-spacing: -0.035em;
  line-height: 1.06;
  margin: 0;
  text-wrap: balance;
}
h3 { letter-spacing: -0.02em; line-height: 1.25; }
p { margin: 0; }

a { color: inherit; text-decoration: none; }
a:focus-visible, button:focus-visible, summary:focus-visible,
input:focus-visible, select:focus-visible {
  outline: 2px solid var(--cor-principal);
  outline-offset: 3px;
  border-radius: 6px;
}

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

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

.skip-link {
  position: absolute; left: -999px; top: 12px; z-index: 200;
  background: var(--cor-principal); color: #fff;
  padding: 10px 18px; border-radius: var(--raio-pill);
  font-weight: 600; font-size: 14px;
}
.skip-link:focus { left: 16px; }

/* ---------------------------------------------------------------
   3. BOTÕES
   --------------------------------------------------------------- */
.btn {
  display: inline-flex; align-items: center; justify-content: center; gap: 8px;
  font-family: var(--fonte-display);
  font-weight: 700; font-size: 14px; letter-spacing: -0.01em;
  padding: 11px 20px;
  border-radius: var(--raio-pill);
  border: 1px solid transparent;
  cursor: pointer;
  white-space: nowrap;
  transition: background-color .18s ease, color .18s ease,
              border-color .18s ease, transform .18s ease, box-shadow .18s ease;
}
.btn svg { width: 15px; height: 15px; flex: none; transition: transform .18s ease; }
.btn:hover svg { transform: translateX(2px); }

.btn-dark {
  background: var(--cor-principal);
  color: #fff;
  box-shadow: 0 1px 2px rgba(10, 82, 51, .25), 0 8px 20px -10px rgba(10, 82, 51, .55);
}
.btn-dark:hover { background: var(--cor-principal-escura); transform: translateY(-1px); }
.btn-dark:active { transform: translateY(0); }

.btn-outline {
  background: var(--cor-superficie);
  color: var(--cor-texto);
  border-color: var(--cor-borda-forte);
}
.btn-outline:hover { border-color: var(--cor-principal); color: var(--cor-principal); transform: translateY(-1px); }

.btn-ghost { background: transparent; color: var(--cor-texto-2); }
.btn-ghost:hover { color: var(--cor-principal); background: rgba(14, 107, 67, .06); }

.btn-lg { padding: 15px 28px; font-size: 15.5px; }
.btn-block { width: 100%; }

/* ---------------------------------------------------------------
   4. NAVEGAÇÃO
   --------------------------------------------------------------- */
.nav-wrap {
  position: sticky; top: 0; z-index: 100;
  padding: 16px var(--gutter);
  transition: padding .2s ease;
}
.nav-wrap.is-stuck { padding-top: 10px; }

.nav {
  max-width: var(--largura);
  margin-inline: auto;
  display: flex; align-items: center; gap: 20px;
  background: rgba(255, 255, 255, .82);
  backdrop-filter: blur(14px);
  -webkit-backdrop-filter: blur(14px);
  border: 1px solid var(--cor-borda);
  border-radius: var(--raio-pill);
  padding: 5px 6px 5px 16px;
  box-shadow: var(--sombra-sutil);
  transition: box-shadow .2s ease, border-color .2s ease;
}
.nav-wrap.is-stuck .nav { box-shadow: var(--sombra); border-color: var(--cor-borda-forte); }

.nav-logo {
  display: inline-flex; align-items: center; gap: 9px;
  font-family: var(--fonte-display);
  font-weight: 800; font-size: 19px; letter-spacing: -0.04em;
  color: var(--cor-principal);
  flex: none;
}
.nav-logo img { width: 30px; height: 30px; }

.nav-links {
  display: flex; align-items: center; gap: 4px;
  list-style: none; margin: 0 auto; padding: 0;
}
.nav-links a {
  display: block;
  padding: 8px 13px;
  font-size: 14px; font-weight: 500;
  color: var(--cor-texto-2);
  border-radius: var(--raio-pill);
  transition: color .16s ease, background-color .16s ease;
}
.nav-links a:hover { color: var(--cor-texto); background: var(--cor-superficie-2); }

.nav-actions { display: flex; align-items: center; gap: 6px; flex: none; }
/* a barra fica mais baixa: botões e links menores só aqui (pedido de Tiago, 05/10/2026) */
.nav-actions .btn { padding: 9px 18px; font-size: 13.5px; }
.nav-links a { padding: 6px 12px; }
.nav-logo { font-size: 18px; }
.nav-logo img { width: 27px; height: 27px; }

.nav-toggle {
  display: none;
  width: 42px; height: 42px;
  background: transparent; border: 0; cursor: pointer;
  flex-direction: column; align-items: center; justify-content: center; gap: 5px;
  border-radius: var(--raio-pill);
}
.nav-toggle span {
  display: block; width: 18px; height: 2px;
  background: var(--cor-texto); border-radius: 2px;
  transition: transform .2s ease, opacity .2s ease;
}
.nav-toggle[aria-expanded="true"] span:nth-child(1) { transform: translateY(7px) rotate(45deg); }
.nav-toggle[aria-expanded="true"] span:nth-child(2) { opacity: 0; }
.nav-toggle[aria-expanded="true"] span:nth-child(3) { transform: translateY(-7px) rotate(-45deg); }

.nav-mobile[hidden] { display: none; }
.nav-mobile {
  max-width: var(--largura);
  margin: 10px auto 0;
  background: var(--cor-superficie);
  border: 1px solid var(--cor-borda);
  border-radius: var(--raio-lg);
  box-shadow: var(--sombra-alta);
  padding: 12px;
  display: flex; flex-direction: column;
}
.nav-mobile a {
  padding: 13px 14px;
  font-family: var(--fonte-display);
  font-weight: 600; font-size: 15.5px;
  border-radius: var(--raio-sm);
}
.nav-mobile a:hover { background: var(--cor-superficie-2); }
.nav-mobile-actions {
  display: flex; flex-direction: column; gap: 8px;
  margin-top: 10px; padding-top: 12px;
  border-top: 1px solid var(--cor-borda);
}
.nav-mobile-actions a { padding: 13px 20px; }

/* ---------------------------------------------------------------
   5. CHIPS E TÍTULOS DE SEÇÃO
   --------------------------------------------------------------- */
.chip {
  display: inline-flex; align-items: center; gap: 8px;
  background: var(--cor-superficie);
  border: 1px solid var(--cor-borda);
  color: var(--cor-texto-2);
  font-family: var(--fonte-display);
  font-size: 12.5px; font-weight: 600; letter-spacing: .01em;
  padding: 6px 14px;
  border-radius: var(--raio-pill);
  margin: 0 0 22px;
  box-shadow: var(--sombra-sutil);
}
.chip-hero { background: rgba(255,255,255,.7); }
.chip-onDark {
  background: rgba(255,255,255,.14);
  border-color: rgba(255,255,255,.26);
  color: rgba(255,255,255,.94);
  box-shadow: none;
}
.chip-dot {
  width: 7px; height: 7px; border-radius: 50%;
  background: var(--cor-destaque);
  box-shadow: 0 0 0 3px rgba(240, 135, 46, .22);
  animation: pulsar 2.4s ease-in-out infinite;
}
@keyframes pulsar {
  0%, 100% { box-shadow: 0 0 0 3px rgba(240,135,46,.22); }
  50%      { box-shadow: 0 0 0 6px rgba(240,135,46,.08); }
}

.section { padding-block: var(--secao-y); }
.section-alt { background: var(--cor-fundo-alt); }

.section-head { max-width: 720px; margin: 0 auto clamp(40px, 5vw, 64px); text-align: center; }
.section-title { font-size: clamp(30px, 4.4vw, 52px); }
.section-sub {
  margin-top: 18px;
  font-size: clamp(15.5px, 1.5vw, 17.5px);
  color: var(--cor-texto-2);
  line-height: 1.6;
}

/* palavra em destaque, com o verde da marca */
.hl-word { color: var(--cor-principal); }
.hl-word-light { color: var(--cor-amarelo); }

/* a fruta do logo embutida no título */
.hl-fruit {
  display: inline-flex; align-items: center; justify-content: center;
  vertical-align: -.14em;
  background: var(--cor-superficie);
  border-radius: 18px;
  padding: 4px;
  box-shadow: var(--sombra);
  rotate: -5deg;
}
.hl-fruit img { width: clamp(34px, 5vw, 52px); height: auto; }
.hl-fruit-sm { border-radius: 14px; }
.hl-fruit-sm img { width: clamp(28px, 4vw, 40px); }

/* ---------------------------------------------------------------
   6. HERO
   --------------------------------------------------------------- */
.hero {
  position: relative;
  padding: clamp(40px, 6vw, 72px) 0 clamp(60px, 8vw, 100px);
  text-align: center;
  overflow: hidden;
}
.hero-glow {
  position: absolute; inset: -30% 0 auto; height: 820px;
  background:
    radial-gradient(60% 52% at 50% 44%, rgba(245,193,61,.20) 0%, rgba(245,193,61,0) 70%),
    radial-gradient(48% 40% at 22% 38%, rgba(124,179,66,.18) 0%, rgba(124,179,66,0) 72%),
    radial-gradient(44% 38% at 80% 34%, rgba(240,135,46,.16) 0%, rgba(240,135,46,0) 72%);
  pointer-events: none;
}
.hero > .container { position: relative; }

.hero-title { font-size: clamp(36px, 6.4vw, 74px); }
.hero-sub {
  max-width: 620px; margin: 24px auto 0;
  font-size: clamp(16px, 1.6vw, 18.5px);
  color: var(--cor-texto-2);
}
.hero-cta {
  display: flex; flex-wrap: wrap; gap: 12px;
  justify-content: center;
  margin-top: 34px;
}
.hero-note {
  margin-top: 16px;
  font-size: 13px;
  color: var(--cor-texto-3);
}
/* telefone, WhatsApp e e-mail: sem o sublinhado ninguém percebe que dá para clicar */
.hero-note a { color: var(--cor-texto-2); text-decoration: underline; text-underline-offset: 2px; }
.hero-note a:hover { color: var(--cor-principal); }

/* ---------------------------------------------------------------
   7. ILUSTRAÇÃO DO FLUXO (hero)
   --------------------------------------------------------------- */
.flow {
  position: relative;
  margin-top: clamp(48px, 7vw, 84px);
  display: grid;
  grid-template-columns: 1fr auto 1fr;
  align-items: center;
  gap: clamp(16px, 4vw, 56px);
  min-height: 340px;
}
.flow-rail {
  position: absolute; left: 50%; top: 4%; bottom: 4%;
  width: 4px; translate: -50% 0;
  border-radius: 4px;
  background: var(--grad-marca);
  opacity: .9;
}
.flow-side { display: flex; flex-direction: column; gap: 12px; }
.flow-in  { align-items: flex-end; text-align: right; }
/* A saída era uma pilha de cinco pílulas. Com o diagrama mostrando onze das quinze
   entregas, empilhar dobraria a altura do hero — em linha com quebra elas ocupam
   quase o mesmo espaço de antes. */
.flow-out { flex-direction: row; flex-wrap: wrap; align-items: center; text-align: left; }
.flow-out .flow-col-label { flex: 0 0 100%; }

.flow-col-label {
  font-family: var(--fonte-mono);
  font-size: 10.5px; font-weight: 600;
  letter-spacing: .16em; text-transform: uppercase;
  color: var(--cor-texto-3);
  margin-bottom: 4px;
}

.pill {
  display: inline-flex; align-items: center; gap: 10px;
  background: var(--cor-superficie);
  border: 1px solid var(--cor-borda);
  border-radius: var(--raio-pill);
  padding: 10px 18px 10px 12px;
  font-size: 13.5px; font-weight: 500;
  box-shadow: var(--sombra);
  animation: flutuar 6s ease-in-out infinite;
  will-change: transform;
}
.pill b { display: block; font-family: var(--fonte-display); font-weight: 700; font-size: 13.5px; }
.pill small { display: block; font-size: 11.5px; color: var(--cor-texto-3); line-height: 1.3; }
.pill-lg { padding: 12px 20px 12px 12px; }
.pill-accent {
  border-color: rgba(240,135,46,.4);
  background: linear-gradient(180deg, #fff 0%, #FFF8F0 100%);
  box-shadow: 0 2px 4px rgba(240,135,46,.08), 0 18px 34px -16px rgba(217,108,28,.45);
}
.pill-accent b { color: var(--cor-destaque-escura); }
/* LGPD e compliance: mesmo peso visual do POP, no verde da marca — é risco
   sinalizado, não alerta, então não leva o laranja. */
.pill-risco {
  border-color: rgba(14,107,67,.3);
  background: linear-gradient(180deg, #fff 0%, #F1F8F4 100%);
  box-shadow: 0 2px 4px rgba(14,107,67,.06), 0 18px 34px -16px rgba(14,107,67,.34);
}
.pill-risco b { color: var(--cor-principal); }
/* "+ 4 entregas": conta o que ficou de fora do diagrama, sem competir com as outras */
.pill-mais {
  border-style: dashed;
  border-color: var(--cor-borda-forte);
  background: transparent;
  box-shadow: none;
  padding-inline: 16px;
  font-family: var(--fonte-mono);
  font-size: 12px; font-weight: 600;
  color: var(--cor-texto-2);
}

.f1 { animation-delay: 0s }    .f2 { animation-delay: .5s }
.f3 { animation-delay: 1s }    .f4 { animation-delay: .3s }
.f5 { animation-delay: .9s }   .f6 { animation-delay: 1.4s }
.f7 { animation-delay: .6s }   .f8 { animation-delay: 1.2s }
.f9 { animation-delay: .2s }   .f10 { animation-delay: 1.1s }
.f11 { animation-delay: .4s }  .f12 { animation-delay: 1.5s }

@keyframes flutuar {
  0%, 100% { transform: translateY(0); }
  50%      { transform: translateY(-7px); }
}

.pill-ico {
  width: 28px; height: 28px; flex: none;
  border-radius: 9px;
  background: var(--cor-superficie-2);
  display: inline-block;
  background-repeat: no-repeat;
  background-position: center;
  background-size: 15px 15px;
}
.ico-rec   { background-color: #FDECEA; background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='%23D9422B'%3E%3Ccircle cx='12' cy='12' r='7'/%3E%3C/svg%3E"); }
.ico-mic   { background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%2356685D' stroke-width='2' stroke-linecap='round'%3E%3Crect x='9' y='3' width='6' height='11' rx='3'/%3E%3Cpath d='M5 11a7 7 0 0 0 14 0M12 18v3'/%3E%3C/svg%3E"); }
.ico-eye   { background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%2356685D' stroke-width='2'%3E%3Cpath d='M2 12s3.6-6 10-6 10 6 10 6-3.6 6-10 6-10-6-10-6Z'/%3E%3Ccircle cx='12' cy='12' r='2.6'/%3E%3C/svg%3E"); }
.ico-doc   { background-color: #EAF4EE; background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%230E6B43' stroke-width='2' stroke-linecap='round'%3E%3Cpath d='M6 3h8l4 4v14H6z'/%3E%3Cpath d='M9 12h6M9 16h4'/%3E%3C/svg%3E"); }
.ico-click { background-color: #EAF4EE; background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%230E6B43' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M5 4l14 7-6 2-2 6z'/%3E%3C/svg%3E"); }
.ico-spec  { background-color: #FDEEDD; background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23D96C1C' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M6 3h8l4 4v14H6z'/%3E%3Cpath d='M9 11l2 2 4-4'/%3E%3C/svg%3E"); }
.ico-flow  { background-color: #EAF4EE; background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%230E6B43' stroke-width='2'%3E%3Crect x='3' y='3' width='7' height='5' rx='1.5'/%3E%3Crect x='14' y='16' width='7' height='5' rx='1.5'/%3E%3Cpath d='M6.5 8v7a3 3 0 0 0 3 3h4.5'/%3E%3C/svg%3E"); }
.ico-test  { background-color: #F1F5E8; background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%235E8A2E' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M4 12l5 5L20 6'/%3E%3C/svg%3E"); }
.ico-lock    { background-color: #E3F1E9; background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%230E6B43' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Crect x='5' y='11' width='14' height='9' rx='2'/%3E%3Cpath d='M8 11V8a4 4 0 0 1 8 0v3'/%3E%3C/svg%3E"); }
.ico-shield  { background-color: #E3F1E9; background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%230E6B43' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M12 3l7 3v5c0 4.6-3 8.4-7 10-4-1.6-7-5.4-7-10V6z'/%3E%3Cpath d='M9 12l2 2 4-4'/%3E%3C/svg%3E"); }
.ico-swap    { background-color: #EAF4EE; background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%230E6B43' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M4 8h14l-3-3M20 16H6l3 3'/%3E%3C/svg%3E"); }
.ico-chart   { background-color: #F1F5E8; background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%235E8A2E' stroke-width='2' stroke-linecap='round'%3E%3Cpath d='M5 20v-8M12 20V5M19 20v-5'/%3E%3C/svg%3E"); }
.ico-fish    { background-color: #EAF4EE; background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%230E6B43' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M3 12h18M9 12L6 6M15 12l-3-6M9 12l-3 6M15 12l-3 6'/%3E%3C/svg%3E"); }
.ico-compass { background-color: #FDEEDD; background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23D96C1C' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Ccircle cx='12' cy='12' r='9'/%3E%3Cpath d='M15.5 8.5l-2 5-5 2 2-5z'/%3E%3C/svg%3E"); }

.flow-core {
  position: relative;
  display: grid; place-items: center;
  width: clamp(88px, 13vw, 124px);
  aspect-ratio: 1;
  background: var(--cor-superficie);
  border-radius: 34px;
  box-shadow: var(--sombra-alta);
  border: 1px solid var(--cor-borda);
}
.flow-core img { width: 62%; }
.flow-core-ring {
  position: absolute; inset: -12px;
  border-radius: 44px;
  background: var(--grad-marca);
  opacity: .16;
  filter: blur(10px);
}
.flow-core-tag {
  position: absolute; bottom: -12px;
  font-family: var(--fonte-mono);
  font-size: 10.5px; font-weight: 600; letter-spacing: .1em; text-transform: uppercase;
  background: var(--cor-principal); color: #fff;
  padding: 4px 12px; border-radius: var(--raio-pill);
}

/* ---------------------------------------------------------------
   8. TIRA DE CONTEXTO
   --------------------------------------------------------------- */
.strip {
  border-block: 1px solid var(--cor-borda);
  background: var(--cor-fundo-alt);
  padding-block: 28px;
}
.strip-inner { display: flex; flex-wrap: wrap; align-items: center; justify-content: center; gap: 12px 32px; }
.strip-label {
  font-family: var(--fonte-mono);
  font-size: 10.5px; letter-spacing: .14em; text-transform: uppercase;
  color: var(--cor-texto-3);
}
/* Com oito itens a tira quebra em duas linhas. Centralizada e com largura máxima, ela
   reparte em 4 + 4 em vez de deixar um item sozinho encostado à esquerda. */
.strip-items { display: flex; flex-wrap: wrap; justify-content: center; gap: 10px 26px; max-width: 720px; list-style: none; margin: 0; padding: 0; }
.strip-items li { font-size: 14px; color: var(--cor-texto-2); }
.strip-items b { font-family: var(--fonte-display); font-weight: 700; color: var(--cor-texto); }

/* ---------------------------------------------------------------
   9. GRIDS E CARDS
   --------------------------------------------------------------- */
.grid { display: grid; gap: 20px; }
.grid-2 { grid-template-columns: repeat(2, 1fr); }
.grid-3 { grid-template-columns: repeat(3, 1fr); }
.grid-4 { grid-template-columns: repeat(4, 1fr); }

/* --- dores --- */
.pain {
  background: var(--cor-superficie);
  border: 1px solid var(--cor-borda);
  border-radius: var(--raio-lg);
  padding: 26px 24px 28px;
  transition: transform .2s ease, box-shadow .2s ease, border-color .2s ease;
}
.pain:hover { transform: translateY(-3px); box-shadow: var(--sombra); border-color: var(--cor-borda-forte); }
.pain-ico {
  display: grid; place-items: center;
  width: 42px; height: 42px;
  border-radius: 13px;
  background: var(--cor-superficie-2);
  color: var(--cor-alerta);
  margin-bottom: 18px;
}
.pain-ico svg { width: 21px; height: 21px; }
.pain h3 { font-size: 17.5px; margin-bottom: 8px; }
.pain p { font-size: 14.5px; color: var(--cor-texto-2); line-height: 1.58; }

/* --- cards de recurso --- */
.card {
  background: var(--cor-fundo);
  border: 1px solid var(--cor-borda);
  border-radius: var(--raio-xl);
  padding: 14px 14px 30px;
  transition: transform .22s ease, box-shadow .22s ease;
}
.card:hover { transform: translateY(-4px); box-shadow: var(--sombra-alta); }
.card-visual {
  background: var(--cor-superficie);
  border: 1px solid var(--cor-borda);
  border-radius: var(--raio-lg);
  height: 216px;
  margin-bottom: 24px;
  padding: 18px;
  overflow: hidden;
  display: flex; align-items: center;
}
.card h3 { font-size: 19px; padding-inline: 12px; margin-bottom: 10px; }
.card p { font-size: 14.5px; color: var(--cor-texto-2); padding-inline: 12px; line-height: 1.58; }

/* --- mockups dentro dos cards --- */
.mock { width: 100%; font-size: 12.5px; }

.mock-docs { display: flex; flex-direction: column; gap: 9px; }
.mock-row {
  display: flex; align-items: center; gap: 9px;
  background: var(--cor-fundo);
  border: 1px solid var(--cor-borda);
  border-radius: var(--raio-sm);
  padding: 8px 11px;
}
.mock-row em { margin-left: auto; font-style: normal; font-size: 11px; color: var(--cor-texto-3); }
.mock-row-live { border-color: rgba(240,135,46,.42); background: #FFF9F3; }
.mock-row-live em { color: var(--cor-destaque-escura); font-weight: 600; }
.tick {
  width: 16px; height: 16px; flex: none; border-radius: 50%;
  background: var(--cor-sucesso);
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='white' stroke-width='3.4' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M5 12l5 5L19 7'/%3E%3C/svg%3E");
  background-size: 11px; background-position: center; background-repeat: no-repeat;
}
.tick-live {
  background: var(--cor-destaque);
  background-image: none;
  animation: piscar 1.3s ease-in-out infinite;
}
@keyframes piscar { 0%,100% { opacity: 1 } 50% { opacity: .35 } }

.mock-flow { position: relative; display: flex; flex-direction: column; align-items: flex-start; gap: 0; }
.node {
  background: var(--cor-fundo);
  border: 1px solid var(--cor-borda);
  border-radius: var(--raio-pill);
  padding: 6px 14px;
  font-weight: 500;
}
.node-start { background: var(--cor-superficie-2); }
.node-bot { border-color: rgba(14,107,67,.35); background: #EAF4EE; color: var(--cor-principal); font-weight: 600; }
.node-end { background: var(--cor-principal); color: #fff; border-color: var(--cor-principal); font-weight: 600; }
.arrow { width: 2px; height: 16px; margin-left: 20px; background: var(--cor-borda-forte); }
.arrow::after {
  content: ""; display: block;
  margin: 14px 0 0 -3px;
  border: 4px solid transparent;
  border-top-color: var(--cor-borda-forte);
}
.mock-badge {
  position: absolute; top: 0; right: 0;
  font-family: var(--fonte-mono);
  font-size: 10px; letter-spacing: .08em;
  background: var(--cor-amarelo); color: #4A3708;
  padding: 3px 9px; border-radius: var(--raio-pill);
  font-weight: 600;
}

.mock-kanban { display: grid; grid-template-columns: repeat(4, 1fr); gap: 8px; align-items: start; }
.kcol { display: flex; flex-direction: column; gap: 6px; }
.klabel {
  font-size: 9.5px; font-weight: 700; letter-spacing: .04em;
  text-transform: uppercase;
  color: var(--cor-texto-3);
  padding-bottom: 4px;
}
.klabel-block { color: var(--cor-alerta); }
.klabel-dev   { color: var(--cor-destaque-escura); }
.klabel-done  { color: var(--cor-sucesso); }
.kcard {
  display: block; height: 26px;
  background: var(--cor-fundo);
  border: 1px solid var(--cor-borda);
  border-radius: 7px;
}
.kcard-done { background: #EAF4EE; border-color: rgba(14,107,67,.28); }

/* prints de cada passo: a miniatura da tela e, ao lado, o horário e a legenda */
.mock-prints { display: flex; flex-direction: column; gap: 8px; }
.prt {
  display: flex; align-items: center; gap: 11px;
  background: var(--cor-fundo);
  border: 1px solid var(--cor-borda);
  border-radius: var(--raio-sm);
  padding: 7px 11px 7px 7px;
}
/* a "tela": título, duas linhas de texto e um botão, desenhados com faixas de cor */
.prt-img {
  flex: none; width: 58px; height: 40px;
  border: 1px solid var(--cor-borda-forte);
  border-radius: 6px;
  background:
    linear-gradient(var(--cor-principal), var(--cor-principal)) 6px 7px / 20px 4px no-repeat,
    linear-gradient(var(--cor-borda-forte), var(--cor-borda-forte)) 6px 16px / 44px 3px no-repeat,
    linear-gradient(var(--cor-borda-forte), var(--cor-borda-forte)) 6px 23px / 34px 3px no-repeat,
    linear-gradient(var(--cor-destaque), var(--cor-destaque)) 36px 29px / 16px 6px no-repeat,
    var(--cor-superficie);
}
.prt-txt { font-size: 12.5px; line-height: 1.35; }
.prt-txt b {
  display: block;
  font-family: var(--fonte-mono);
  font-size: 10.5px; font-weight: 600;
  color: var(--cor-texto-3);
}
.prt-hi { border-color: rgba(240,135,46,.42); background: #FFF9F3; }
.prt-hi .prt-txt b { color: var(--cor-destaque-escura); }

/* ---------------------------------------------------------------
   10. BENTO — as 12 entregas
   --------------------------------------------------------------- */
.bento {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 16px;
}
.bento-item {
  position: relative;
  background: var(--cor-superficie);
  border: 1px solid var(--cor-borda);
  border-radius: var(--raio-lg);
  padding: 24px 22px 26px;
  transition: transform .2s ease, box-shadow .2s ease, border-color .2s ease;
}
.bento-item:hover { transform: translateY(-3px); box-shadow: var(--sombra); border-color: var(--cor-borda-forte); }
.bento-wide { grid-column: span 2; }
.bento-num {
  display: inline-block;
  font-family: var(--fonte-mono);
  font-size: 11px; font-weight: 600; letter-spacing: .1em;
  color: var(--cor-texto-3);
  margin-bottom: 14px;
}
.bento-item h3 { font-size: 17px; margin-bottom: 8px; }
.bento-item p { font-size: 14px; color: var(--cor-texto-2); line-height: 1.56; }

.bento-accent {
  background: linear-gradient(150deg, #FFF6EC 0%, #FFFDF9 100%);
  border-color: rgba(240,135,46,.32);
}
.bento-accent .bento-num { color: var(--cor-destaque-escura); }

.bento-dark {
  background: var(--grad-verde);
  border-color: transparent;
  color: #fff;
}
.bento-dark .bento-num { color: var(--cor-amarelo); }
.bento-dark p { color: rgba(255,255,255,.82); }

/* ---------------------------------------------------------------
   11. PASSOS
   --------------------------------------------------------------- */
.steps { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 16px; }
.step {
  display: grid;
  grid-template-columns: 1fr 1.15fr;
  align-items: center;
  gap: clamp(20px, 4vw, 56px);
  background: var(--cor-fundo);
  border: 1px solid var(--cor-borda);
  border-radius: var(--raio-xl);
  padding: clamp(24px, 3.2vw, 40px);
}
.step-text { position: relative; }
.step-badge {
  display: inline-block;
  font-family: var(--fonte-mono);
  font-size: 10.5px; font-weight: 600; letter-spacing: .12em; text-transform: uppercase;
  color: var(--cor-principal);
  background: rgba(14,107,67,.08);
  padding: 5px 11px; border-radius: var(--raio-pill);
  margin-bottom: 16px;
}
.step-num {
  position: absolute; top: -18px; right: 0;
  font-family: var(--fonte-display);
  font-size: clamp(56px, 8vw, 92px); font-weight: 800;
  letter-spacing: -0.05em;
  color: var(--cor-borda);
  line-height: 1;
  pointer-events: none;
}
.step-text h3 { font-size: clamp(24px, 2.8vw, 32px); margin-bottom: 12px; }
.step-text p { font-size: 15.5px; color: var(--cor-texto-2); max-width: 44ch; }

.step-visual {
  background: var(--cor-superficie);
  border: 1px solid var(--cor-borda);
  border-radius: var(--raio-lg);
  padding: 20px;
  box-shadow: var(--sombra);
  min-height: 190px;
  display: flex; align-items: center;
}

/* upload */
.mock-upload { display: flex; flex-direction: column; gap: 12px; }
.upl-file { display: flex; align-items: center; gap: 12px; }
.upl-ico {
  width: 40px; height: 40px; flex: none; border-radius: 12px;
  background: #FDECEA no-repeat center;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23D9422B' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Crect x='2' y='5' width='14' height='14' rx='3'/%3E%3Cpath d='M16 10l6-3v10l-6-3z'/%3E%3C/svg%3E");
  background-size: 20px;
}
.upl-meta b { display: block; font-family: var(--fonte-display); font-weight: 700; font-size: 14px; }
.upl-meta small { font-size: 12px; color: var(--cor-texto-3); }
.upl-bar { height: 8px; background: var(--cor-superficie-2); border-radius: 99px; overflow: hidden; }
.upl-bar i { display: block; height: 100%; background: var(--grad-marca); border-radius: 99px; }
.upl-status { font-family: var(--fonte-mono); font-size: 11.5px; color: var(--cor-texto-2); }

/* cliques */
.mock-clicks { display: flex; flex-direction: column; gap: 7px; width: 100%; }
.clk {
  display: flex; align-items: center; gap: 12px;
  font-size: 13px;
  padding: 9px 12px;
  border-radius: var(--raio-sm);
  background: var(--cor-fundo);
  border: 1px solid var(--cor-borda);
}
.clk-t { font-family: var(--fonte-mono); font-size: 11.5px; color: var(--cor-texto-3); flex: none; }
.clk-hi { border-color: rgba(240,135,46,.4); background: #FFF9F3; font-weight: 500; }
.clk-hi .clk-t { color: var(--cor-destaque-escura); }

/* código BDD */
.mock-code { width: 100%; }
.code-tab {
  display: inline-block;
  font-family: var(--fonte-mono); font-size: 11px;
  color: var(--cor-texto-3);
  background: var(--cor-superficie-2);
  padding: 4px 10px; border-radius: 7px 7px 0 0;
  border: 1px solid var(--cor-borda); border-bottom: 0;
}
.mock-code pre {
  margin: 0;
  background: var(--cor-fundo);
  border: 1px solid var(--cor-borda);
  border-radius: 0 var(--raio-sm) var(--raio-sm) var(--raio-sm);
  padding: 14px 16px;
  overflow-x: auto;
}
.mock-code code {
  font-family: var(--fonte-mono);
  font-size: 11.5px; line-height: 1.75;
  color: var(--cor-texto-2);
  white-space: pre;
}
.mock-code b { color: var(--cor-principal); font-weight: 600; }
.mock-code i { color: var(--cor-destaque-escura); font-style: normal; font-weight: 600; }

/* status */
.mock-status { display: flex; flex-direction: column; gap: 8px; width: 100%; }
.st {
  display: flex; align-items: center; justify-content: space-between; gap: 12px;
  font-size: 13px;
  padding: 10px 13px;
  border-radius: var(--raio-sm);
  background: var(--cor-fundo);
  border: 1px solid var(--cor-borda);
}
.tag {
  font-size: 10.5px; font-weight: 700; letter-spacing: .02em;
  padding: 4px 10px; border-radius: var(--raio-pill);
  white-space: nowrap; flex: none;
}
.tag-done  { background: #E4F2E9; color: #0A5233; }
.tag-dev   { background: #FDEEDD; color: #9A4A10; }
.tag-back  { background: var(--cor-superficie-2); color: var(--cor-texto-2); }
.tag-block { background: #FBE7E3; color: #9B2F1C; }

/* ---------------------------------------------------------------
   12. TABELA COMPARATIVA
   --------------------------------------------------------------- */
.table-scroll {
  overflow-x: auto;
  border: 1px solid var(--cor-borda);
  border-radius: var(--raio-lg);
  background: var(--cor-superficie);
  box-shadow: var(--sombra-sutil);
}
.matrix { width: 100%; border-collapse: collapse; min-width: 760px; font-size: 14px; }
.matrix th, .matrix td { padding: 16px 18px; text-align: left; border-bottom: 1px solid var(--cor-borda); }
.matrix thead th {
  font-family: var(--fonte-mono);
  font-size: 11px; font-weight: 600;
  letter-spacing: .07em; text-transform: uppercase;
  color: var(--cor-texto-3);
  background: var(--cor-superficie-2);
  vertical-align: bottom;
}
.matrix thead th.feat { color: var(--cor-texto); }
.matrix thead th.mango-col { background: var(--cor-principal); color: #fff; }
.mango-col-head {
  display: inline-flex; align-items: center; gap: 7px;
  font-family: var(--fonte-display); font-size: 14px;
  letter-spacing: -0.02em; text-transform: none;
}
.matrix tbody td.mango-col { background: rgba(240,135,46,.07); }
.matrix td.feat { font-weight: 500; }
.matrix tbody tr:last-child td { border-bottom: 0; }
.matrix td.price { font-family: var(--fonte-mono); font-size: 12.5px; }
.matrix td.price b { color: var(--cor-principal); font-size: 13px; }

.yes, .no {
  display: inline-block; width: 22px; height: 22px; border-radius: 50%;
  background-repeat: no-repeat; background-position: center; background-size: 13px;
}
.yes {
  background-color: var(--cor-sucesso);
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='white' stroke-width='3.4' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M5 12l5 5L19 7'/%3E%3C/svg%3E");
}
.no {
  background-color: #E8E6DC;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%237A8A80' stroke-width='3.2' stroke-linecap='round'%3E%3Cpath d='M7 7l10 10M17 7L7 17'/%3E%3C/svg%3E");
}

.footnote {
  margin-top: 16px;
  font-size: 12.5px;
  line-height: 1.6;
  color: var(--cor-texto-3);
  max-width: 820px;
}

/* ---------------------------------------------------------------
   13. CALCULADORA
   --------------------------------------------------------------- */
.calc {
  display: grid;
  grid-template-columns: 1fr 1.05fr;
  gap: 20px;
  align-items: stretch;
}
.calc-inputs {
  background: var(--cor-fundo);
  border: 1px solid var(--cor-borda);
  border-radius: var(--raio-xl);
  padding: clamp(24px, 3vw, 34px);
  display: flex; flex-direction: column; gap: 22px;
}
.field { display: flex; flex-direction: column; gap: 10px; }
.field label {
  font-family: var(--fonte-display);
  font-size: 14px; font-weight: 600;
  color: var(--cor-texto);
}
.field-hint { font-weight: 500; color: var(--cor-texto-3); }
.field-row { display: flex; align-items: center; gap: 14px; }
.field-row output {
  flex: none; min-width: 88px; text-align: right;
  font-family: var(--fonte-mono);
  font-size: 13px; font-weight: 600;
  color: var(--cor-principal);
}

input[type="range"] {
  flex: 1; -webkit-appearance: none; appearance: none;
  height: 6px; border-radius: 99px;
  background: var(--cor-borda);
  cursor: pointer;
}
input[type="range"]::-webkit-slider-thumb {
  -webkit-appearance: none; appearance: none;
  width: 20px; height: 20px; border-radius: 50%;
  background: var(--cor-principal);
  border: 3px solid #fff;
  box-shadow: 0 2px 6px rgba(10,82,51,.35);
  cursor: pointer;
}
input[type="range"]::-moz-range-thumb {
  width: 20px; height: 20px; border-radius: 50%;
  background: var(--cor-principal);
  border: 3px solid #fff;
  box-shadow: 0 2px 6px rgba(10,82,51,.35);
  cursor: pointer;
}

.calc-inputs select {
  font-family: var(--fonte-texto);
  font-size: 14px;
  padding: 12px 14px;
  border: 1px solid var(--cor-borda-forte);
  border-radius: var(--raio-sm);
  background: var(--cor-superficie);
  color: var(--cor-texto);
  cursor: pointer;
}

.calc-out {
  background: var(--grad-verde);
  border-radius: var(--raio-xl);
  padding: clamp(24px, 3vw, 34px);
  color: #fff;
  display: flex; flex-direction: column;
}
.calc-out-head { margin-bottom: 20px; }
.calc-out-label {
  font-family: var(--fonte-mono);
  font-size: 10.5px; letter-spacing: .14em; text-transform: uppercase;
  color: rgba(255,255,255,.72);
}
.calc-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 12px; }
.calc-cell {
  background: rgba(255,255,255,.1);
  border: 1px solid rgba(255,255,255,.16);
  border-radius: var(--raio);
  padding: 18px 20px;
}
.calc-cell-label {
  display: block;
  font-size: 12.5px;
  color: rgba(255,255,255,.76);
  margin-bottom: 8px;
  line-height: 1.4;
}
.calc-num {
  font-family: var(--fonte-display);
  font-size: 24px; font-weight: 800; letter-spacing: -0.03em;
  display: block;
}
.calc-cell-hero {
  grid-column: span 2;
  background: rgba(255,255,255,.96);
  border-color: transparent;
}
.calc-cell-hero .calc-cell-label { color: var(--cor-texto-2); }
.calc-num-big { font-size: clamp(34px, 4.2vw, 46px); color: var(--cor-principal); }
.calc-cell-foot {
  display: block; margin-top: 6px;
  font-size: 12.5px; color: var(--cor-texto-3);
}
/* mesma legenda, mas dentro das células verdes — o cinza claro não tem contraste ali */
.calc-cell-foot-onDark { color: rgba(255, 255, 255, .68); line-height: 1.45; }
.calc-disclaimer {
  margin-top: auto; padding-top: 20px;
  font-size: 12px; line-height: 1.55;
  color: rgba(255,255,255,.66);
}

/* ---------------------------------------------------------------
   14. PLANOS
   --------------------------------------------------------------- */
.pricing-block {
  background: var(--grad-verde);
  border-radius: var(--raio-xl);
  padding: clamp(36px, 5vw, 64px) clamp(20px, 3.4vw, 48px);
  position: relative;
  overflow: hidden;
}
.pricing-block::after {
  content: ""; position: absolute; inset: auto -10% -40% auto;
  width: 520px; height: 520px; border-radius: 50%;
  background: radial-gradient(circle, rgba(245,193,61,.22) 0%, rgba(245,193,61,0) 68%);
  pointer-events: none;
}
.pricing-head { position: relative; text-align: center; max-width: 660px; margin: 0 auto 40px; }
.title-onDark { color: #fff; font-size: clamp(28px, 4vw, 46px); }
.pricing-sub {
  margin-top: 18px;
  color: rgba(255,255,255,.8);
  font-size: 16px;
}

.toggle {
  display: inline-flex; gap: 4px;
  margin-top: 28px; padding: 5px;
  background: rgba(255,255,255,.14);
  border: 1px solid rgba(255,255,255,.2);
  border-radius: var(--raio-pill);
}
.toggle-btn {
  display: inline-flex; align-items: center; gap: 7px;
  font-family: var(--fonte-display);
  font-size: 14px; font-weight: 700;
  color: rgba(255,255,255,.82);
  background: transparent; border: 0; cursor: pointer;
  padding: 9px 20px; border-radius: var(--raio-pill);
  transition: background-color .18s ease, color .18s ease;
}
.toggle-btn.is-active { background: #fff; color: var(--cor-principal); }
.toggle-save {
  font-family: var(--fonte-mono);
  font-size: 10.5px; font-weight: 600;
  background: var(--cor-amarelo); color: #4A3708;
  padding: 2px 7px; border-radius: var(--raio-pill);
}

.plans {
  position: relative;
  display: grid; grid-template-columns: repeat(4, 1fr); gap: 16px;
  align-items: start;
}
.plan {
  position: relative;
  background: var(--cor-superficie);
  border: 1px solid transparent;
  border-radius: var(--raio-lg);
  padding: 28px 24px 26px;
  display: flex; flex-direction: column;
}
.plan-featured {
  border-color: var(--cor-amarelo);
  box-shadow: 0 18px 44px -18px rgba(0,0,0,.4);
}
/* fora do fluxo, para não empurrar o preço e desalinhar os cards */
.plan-flag {
  position: absolute; top: 18px; right: 18px;
  font-family: var(--fonte-mono);
  font-size: 10px; font-weight: 600; letter-spacing: .1em; text-transform: uppercase;
  background: var(--cor-amarelo); color: #4A3708;
  padding: 4px 10px; border-radius: var(--raio-pill);
}
.plan-name { font-size: 20px; }
.plan-featured .plan-name { padding-right: 106px; }
.plan-who { font-size: 13px; color: var(--cor-texto-3); margin-top: 4px; }
.plan-price {
  display: flex; align-items: baseline; gap: 3px;
  margin-top: 18px;
  font-family: var(--fonte-display);
  color: var(--cor-texto);
}
.plan-price .cur { font-size: 16px; font-weight: 700; }
.plan-price b { font-size: 36px; font-weight: 800; letter-spacing: -0.04em; }
.plan-price .per { font-size: 14px; color: var(--cor-texto-3); font-weight: 600; }
.plan-cycle { font-size: 12px; color: var(--cor-texto-3); margin-top: 2px; }

.plan-feats {
  list-style: none; margin: 22px 0 26px; padding: 0;
  display: flex; flex-direction: column; gap: 10px;
  border-top: 1px solid var(--cor-borda);
  padding-top: 20px;
  flex: 1;
}
.plan-feats li {
  position: relative;
  padding-left: 25px;
  font-size: 13.5px;
  color: var(--cor-texto-2);
  line-height: 1.5;
}
.plan-feats li::before {
  content: ""; position: absolute; left: 0; top: 3px;
  width: 16px; height: 16px; border-radius: 50%;
  background: #E4F2E9 no-repeat center;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%230E6B43' stroke-width='3.4' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M5 12l5 5L19 7'/%3E%3C/svg%3E");
  background-size: 10px;
}

/* --- barra de consumo da cota (ilustra a mecânica dentro do bloco de planos) --- */
.quota {
  position: relative;
  background: rgba(255, 255, 255, .1);
  border: 1px solid rgba(255, 255, 255, .18);
  border-radius: var(--raio);
  padding: 20px 22px;
  margin-top: 20px;
}
.quota-head {
  display: flex; flex-wrap: wrap;
  align-items: baseline; justify-content: space-between;
  gap: 8px 16px;
  margin-bottom: 12px;
}
.quota-label {
  font-family: var(--fonte-mono);
  font-size: 10.5px; letter-spacing: .1em; text-transform: uppercase;
  color: rgba(255, 255, 255, .68);
}
.quota-num {
  font-family: var(--fonte-display);
  font-size: 13.5px; font-weight: 600;
  color: rgba(255, 255, 255, .8);
  font-variant-numeric: tabular-nums;
}
.quota-num b { font-size: 19px; font-weight: 800; color: #fff; letter-spacing: -0.02em; }
.quota-bar {
  height: 10px;
  background: rgba(255, 255, 255, .16);
  border-radius: var(--raio-pill);
  overflow: hidden;
}
.quota-bar i {
  display: block; height: 100%;
  background: var(--grad-marca);
  border-radius: var(--raio-pill);
}
.quota-foot {
  margin-top: 12px;
  font-size: 12.5px; line-height: 1.55;
  color: rgba(255, 255, 255, .72);
  max-width: 62ch;
}

/* auto-fit para caber os 4 itens sem deixar um sozinho na segunda linha */
.pricing-extras {
  position: relative;
  display: grid; grid-template-columns: repeat(auto-fit, minmax(230px, 1fr)); gap: 12px;
  margin-top: 12px;
}
.extra {
  background: rgba(255,255,255,.1);
  border: 1px solid rgba(255,255,255,.18);
  border-radius: var(--raio);
  padding: 16px 20px;
}
.extra-k {
  display: block;
  font-family: var(--fonte-mono);
  font-size: 10.5px; letter-spacing: .1em; text-transform: uppercase;
  color: rgba(255,255,255,.68);
  margin-bottom: 6px;
}
.extra-v { font-size: 14px; font-weight: 500; color: #fff; }

/* ---------------------------------------------------------------
   15. FAQ
   --------------------------------------------------------------- */
.faq {
  display: grid; grid-template-columns: 1fr 1fr; gap: 12px;
  align-items: start;
  max-width: 980px; margin-inline: auto;
}
.faq-item {
  background: var(--cor-fundo);
  border: 1px solid var(--cor-borda);
  border-radius: var(--raio);
  transition: border-color .18s ease, box-shadow .18s ease;
}
.faq-item[open] { border-color: var(--cor-borda-forte); box-shadow: var(--sombra-sutil); }
.faq-item summary {
  display: flex; align-items: center; gap: 14px;
  list-style: none; cursor: pointer;
  padding: 18px 20px;
  font-family: var(--fonte-display);
  font-size: 15px; font-weight: 700; letter-spacing: -0.015em;
  line-height: 1.4;
}
.faq-item summary::-webkit-details-marker { display: none; }
.faq-item summary::after {
  content: ""; flex: none; margin-left: auto;
  width: 22px; height: 22px; border-radius: 50%;
  background: var(--cor-superficie-2) no-repeat center;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%2312211A' stroke-width='2.6' stroke-linecap='round'%3E%3Cpath d='M12 6v12M6 12h12'/%3E%3C/svg%3E");
  background-size: 12px;
  transition: transform .2s ease, background-color .2s ease;
}
.faq-item[open] summary::after {
  transform: rotate(135deg);
  background-color: var(--cor-principal);
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='white' stroke-width='2.6' stroke-linecap='round'%3E%3Cpath d='M12 6v12M6 12h12'/%3E%3C/svg%3E");
}
.faq-body { padding: 0 20px 20px; }
.faq-body p { font-size: 14.5px; color: var(--cor-texto-2); line-height: 1.62; }
.faq-body a { color: var(--cor-principal); font-weight: 600; text-decoration: underline; text-underline-offset: 2px; }

/* ---------------------------------------------------------------
   16. CTA FINAL
   --------------------------------------------------------------- */
.cta {
  position: relative;
  padding-block: var(--secao-y);
  text-align: center;
  background:
    radial-gradient(52% 60% at 50% 30%, rgba(245,193,61,.22) 0%, rgba(245,193,61,0) 70%),
    radial-gradient(40% 46% at 16% 70%, rgba(124,179,66,.16) 0%, rgba(124,179,66,0) 72%),
    radial-gradient(40% 46% at 86% 60%, rgba(240,135,46,.16) 0%, rgba(240,135,46,0) 72%),
    var(--cor-fundo);
  border-top: 1px solid var(--cor-borda);
}
.cta-inner { max-width: 760px; }
.cta-title { font-size: clamp(30px, 5vw, 58px); }
.cta-sub {
  max-width: 560px; margin: 22px auto 0;
  font-size: 16.5px; color: var(--cor-texto-2);
}

/* ---------------------------------------------------------------
   17. RODAPÉ
   --------------------------------------------------------------- */
.footer {
  background: var(--cor-principal-escura);
  color: rgba(255,255,255,.76);
  padding-top: clamp(48px, 6vw, 72px);
  overflow: hidden;
}
.footer-top {
  display: grid; grid-template-columns: 1.3fr 2fr; gap: 40px;
  padding-bottom: 48px;
}
.footer-brand .nav-logo { color: #fff; margin-bottom: 16px; }
.footer-brand p { font-size: 14px; line-height: 1.6; max-width: 38ch; }

.footer-cols { display: grid; grid-template-columns: repeat(3, 1fr); gap: 28px; }
.footer-col { display: flex; flex-direction: column; gap: 10px; }
.footer-col h3 {
  font-family: var(--fonte-mono);
  font-size: 10.5px; font-weight: 600;
  letter-spacing: .14em; text-transform: uppercase;
  color: rgba(255,255,255,.5);
  margin-bottom: 4px;
}
.footer-col a { font-size: 14px; transition: color .16s ease; }
.footer-col a:hover { color: var(--cor-amarelo); }

.footer-wordmark {
  font-family: var(--fonte-display);
  font-weight: 800;
  font-size: clamp(76px, 20vw, 260px);
  letter-spacing: -0.06em;
  line-height: .78;
  color: rgba(255,255,255,.07);
  text-align: center;
  user-select: none;
  margin-bottom: -.1em;
}

.footer-bottom {
  border-top: 1px solid rgba(255,255,255,.14);
  padding-block: 24px 32px;
  display: flex; flex-wrap: wrap; gap: 8px 28px;
  align-items: baseline; justify-content: space-between;
  font-size: 12.5px;
  color: rgba(255,255,255,.55);
}
.footer-legal { max-width: 62ch; line-height: 1.5; }

/* ---------------------------------------------------------------
   18. RESPONSIVO
   --------------------------------------------------------------- */
@media (min-width: 1081px) {
  /* o menu mobile nunca existe no desktop, nem se o atributo hidden sumir */
  .nav-mobile { display: none; }
}

@media (max-width: 1080px) {
  .nav-links { display: none; }
  .nav-toggle { display: flex; }
  .nav-actions { margin-left: auto; }
  .nav-entrar { display: none; }

  .grid-4 { grid-template-columns: repeat(2, 1fr); }
  .bento { grid-template-columns: repeat(2, 1fr); }
  .bento-wide { grid-column: span 2; }
  .plans { grid-template-columns: repeat(2, 1fr); }
  .pricing-extras { grid-template-columns: 1fr; }
}

/* O diagrama do hero empilha mais cedo que o resto (980 e não 860): com onze pílulas
   de saída, a coluna da direita fica estreita demais entre 860 e 980px e vira uma
   pilha de uma pílula por linha, com 700px de altura. */
@media (max-width: 980px) {
  .flow { grid-template-columns: 1fr; gap: 20px; }
  .flow-rail { display: none; }
  .flow-in, .flow-out { align-items: center; text-align: left; }
  .flow-out { justify-content: center; }
  .flow-out .flow-col-label { text-align: center; }
  .flow-core { margin-inline: auto; }
  .flow-core-tag { bottom: -10px; }
}

@media (max-width: 860px) {
  .grid-2, .grid-3 { grid-template-columns: 1fr; }
  .calc { grid-template-columns: 1fr; }
  .faq { grid-template-columns: 1fr; }
  .footer-top { grid-template-columns: 1fr; gap: 32px; }
  .footer-cols { grid-template-columns: repeat(2, 1fr); }

  .step { grid-template-columns: 1fr; }
  .step-visual { order: -1; }
  .step-num { top: auto; bottom: -6px; right: 0; opacity: .7; }

  .flow { grid-template-columns: 1fr; gap: 20px; }
  .flow-rail { display: none; }
  .flow-in, .flow-out { align-items: center; text-align: left; }
  .flow-out { justify-content: center; }
  .flow-out .flow-col-label { text-align: center; }
  .flow-core { margin-inline: auto; }
  .flow-core-tag { bottom: -10px; }
}

@media (max-width: 620px) {
  :root { --gutter: 18px; }

  .grid-4 { grid-template-columns: 1fr; }
  .bento { grid-template-columns: 1fr; }
  .bento-wide { grid-column: span 1; }
  .plans { grid-template-columns: 1fr; }
  .calc-grid { grid-template-columns: 1fr; }
  .calc-cell-hero { grid-column: span 1; }

  .hero-cta { flex-direction: column; }
  .hero-cta .btn { width: 100%; }

  .strip-inner { flex-direction: column; text-align: center; }
  .strip-items { justify-content: center; }

  .footer-cols { grid-template-columns: 1fr; }
  .footer-bottom { flex-direction: column; }

  .card-visual { height: 190px; }
  .field-row output { min-width: 74px; }

  /* tabela vira lista legível no telefone */
  .table-scroll { border: 0; background: transparent; box-shadow: none; overflow: visible; }
  .matrix { min-width: 0; display: block; }
  .matrix thead { display: none; }
  .matrix tbody, .matrix tr, .matrix td { display: block; width: 100%; }
  .matrix tr {
    background: var(--cor-superficie);
    border: 1px solid var(--cor-borda);
    border-radius: var(--raio);
    margin-bottom: 12px;
    overflow: hidden;
  }
  .matrix td { border-bottom: 1px solid var(--cor-borda); padding: 12px 16px; }
  .matrix td.feat {
    background: var(--cor-superficie-2);
    font-family: var(--fonte-display);
    font-weight: 700; font-size: 14.5px;
  }
  .matrix td:not(.feat)::before {
    content: attr(data-lbl);
    display: inline-block; min-width: 170px;
    font-size: 12.5px; color: var(--cor-texto-2);
  }
  .matrix tbody td.mango-col { background: rgba(240,135,46,.09); font-weight: 600; }
  .matrix tr:last-child td:last-child { border-bottom: 0; }
}

/* ---------------------------------------------------------------
   18a. COMPACTAÇÃO NO CELULAR
   Empilhado numa coluna só, a página passava de 19.000px em 360px —
   ~24 telas de rolagem. Aqui as duas listas mais longas (as 12 entregas
   e os planos) viram carrossel horizontal com encaixe, e os respiros
   verticais encolhem. Nenhum conteúdo é removido; acima de 620px nada muda.
   --------------------------------------------------------------- */
@media (max-width: 620px) {
  :root { --secao-y: 46px; }

  .section-head { margin-bottom: 26px; }
  .section-sub { margin-top: 12px; }
  .chip { margin-bottom: 14px; }

  /* --- carrossel: as 12 entregas --- */
  .bento {
    display: flex;
    gap: 12px;
    overflow-x: auto;
    scroll-snap-type: x mandatory;
    -webkit-overflow-scrolling: touch;
    scrollbar-width: none;
    /* sangra até a borda da tela para o próximo cartão "espiar" */
    margin-inline: calc(var(--gutter) * -1);
    padding-inline: var(--gutter);
    padding-bottom: 4px;
  }
  .bento::-webkit-scrollbar { display: none; }
  .bento-item,
  .bento-item.bento-wide {
    flex: 0 0 76vw;
    scroll-snap-align: start;
    padding: 20px 18px 22px;
  }

  /* --- carrossel: planos --- */
  .plans {
    display: flex;
    gap: 12px;
    overflow-x: auto;
    scroll-snap-type: x mandatory;
    -webkit-overflow-scrolling: touch;
    scrollbar-width: none;
    padding-bottom: 4px;
  }
  .plans::-webkit-scrollbar { display: none; }
  .plan {
    flex: 0 0 80%;
    scroll-snap-align: start;
    padding: 24px 20px 22px;
  }
  .plan-feats { margin: 18px 0 20px; padding-top: 16px; gap: 8px; }

  /* --- carrossel: os 4 passos ---
     conteúdo explicitamente sequencial e numerado, então deslizar de 01 a 04
     lê igual a rolar — e economiza ~1.700px */
  .steps {
    display: flex;
    flex-direction: row;   /* a base é column — sem isto o carrossel não acontece */
    align-items: stretch;
    overflow-x: auto;
    scroll-snap-type: x mandatory;
    -webkit-overflow-scrolling: touch;
    scrollbar-width: none;
    margin-inline: calc(var(--gutter) * -1);
    padding-inline: var(--gutter);
    padding-bottom: 4px;
  }
  .steps::-webkit-scrollbar { display: none; }
  .step {
    flex: 0 0 82vw;
    scroll-snap-align: start;
    padding: 20px;
    gap: 14px;
  }
  .step-visual { min-height: 0; padding: 14px; }
  .step-badge { margin-bottom: 10px; }
  .step-text p { font-size: 14.5px; }

  /* --- o diagrama do hero em duas colunas --- */
  .flow-side { display: grid; grid-template-columns: 1fr 1fr; gap: 10px; }
  .flow-col-label { grid-column: 1 / -1; margin-bottom: 0; }
  .pill { font-size: 12.5px; padding: 8px 12px 8px 10px; }
  .pill-ico { width: 24px; height: 24px; background-size: 13px; }

  /* --- respiros e visuais menores ---
     .card-visual tem overflow:hidden, então altura fixa CORTA o mockup.
     No celular ele passa a ter altura automática: encolhe o que sobra
     (o kanban) sem decapitar o que não cabe (o fluxograma). */
  .card-visual { height: auto; margin-bottom: 16px; padding: 16px; }
  .matrix td { padding: 10px 14px; }
  .matrix td.feat { padding: 11px 14px; }
  .field { gap: 8px; }
  .calc-inputs { gap: 16px; }
  .calc-cell { padding: 14px 16px; }
  .pain { padding: 20px 18px 22px; }
  .pain-ico { margin-bottom: 12px; }
  .grid { gap: 12px; }
  .steps { gap: 12px; }
  .faq { gap: 8px; }
  .hero { padding-bottom: 40px; }
  .flow { margin-top: 32px; gap: 14px; }
  .pricing-extras { margin-top: 14px; }
  .footer-top { padding-bottom: 32px; }
}

/* ---------------------------------------------------------------
   18b. TELEFONES ESTREITOS (360–480px)
   Os pisos de `clamp()` dos títulos foram calibrados para 485px, que é o
   viewport mínimo que o navegador headless permitia testar. Em 360px reais
   esses pisos são largos demais e quebram o título em linhas órfãs
   ("pronta" e "só" sozinhas). Aqui os pisos caem; acima de 480px nada muda.
   --------------------------------------------------------------- */
@media (max-width: 480px) {
  .hero-title { font-size: clamp(26px, 7.4vw, 40px); }
  .cta-title  { font-size: clamp(26px, 7.2vw, 40px); }

  /* o tracking largo fazia "JÁ USA" cair sozinho na segunda linha */
  .strip-label { letter-spacing: .08em; }

  /* na tabela-cartão, o rótulo empurrava o preço para a linha de baixo,
     partindo valores como "US$ 950–1.350/mês" no meio */
  /* margin-right porque o rótulo pode passar do min-width e encostar no valor
     ("UiPath Automation HubSob consulta*") */
  .matrix td:not(.feat)::before { min-width: 124px; margin-right: 10px; font-size: 12px; }
  .matrix td.price { font-size: 11.5px; }
}

/* ---------------------------------------------------------------
   19. MOVIMENTO REDUZIDO
   --------------------------------------------------------------- */
@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  *, *::before, *::after {
    animation-duration: .01ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: .01ms !important;
  }
}

/* ---------------------------------------------------------------
   19b. JURÍDICO (a frente de contratos e contencioso na capa)
   --------------------------------------------------------------- */
/* As duas frentes no topo: na tela larga, uma de cada lado da manga; no celular, uma
   embaixo da outra, em cartões compactos (chip, título, resumo e link — a lista fica para a
   seção de cada frente). O parágrafo-resumo antigo (.so-celular) saiu de cena (13/10/2026). */
.so-larga .frente { display: none; }
@media (max-width: 860px) {
  /* o resumo antigo e o título grande saem: a frase da reunião é de Processos, não da Mango inteira */
  .so-celular:not(.frentes-lead):not(.frentes-manga), .hero-title, .palco-titulo { display: none; }
  .frentes-lead { display: block; margin: 4px auto 0; font-size: 15px; font-weight: 600; color: var(--cor-texto); text-align: center; }
  .so-larga .frente { display: block; }
  /* lado a lado, como no PC: Processos à esquerda, Jurídico à direita, e a manga translúcida
     ao fundo, entre os dois (13/10/2026 — Tiago: "apresentação é a chave") */
  .frentes { position: relative; display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: 10px; align-items: stretch; margin: 14px auto 0; max-width: 560px; text-align: left; }
  .frentes-manga { position: absolute; inset: 0; display: flex; align-items: center; justify-content: center; pointer-events: none; z-index: 0; }
  .frentes-manga img { width: min(36vw, 160px); height: auto; opacity: .22; filter: saturate(.9); }
  .frentes .frente { position: relative; z-index: 1; min-width: 0; overflow-wrap: anywhere; display: flex; flex-direction: column; }
  .frentes .frente-link { margin-top: auto; }
  .frente {
    padding: 12px 12px 12px;
    border: 1px solid var(--cor-borda, rgba(14, 107, 67, .14));
    border-radius: 16px;
    background: rgba(255, 255, 255, .78);
  }
  .frente-chip { margin-bottom: 6px; font-size: 9.5px; padding: 4px 8px; letter-spacing: .03em; white-space: normal; line-height: 1.25; }
  .frente-ganhos { margin: 0 0 6px; font-size: 10.5px; min-height: 2.6em; }
  .frentes .frente-chip { min-height: 2.5em; display: inline-flex; align-items: center; }
  .frente h2 { font-size: clamp(12px, 3.2vw, 15px); line-height: 1.25; text-wrap: pretty; hyphens: manual; }
  .frente p { margin-top: 6px; font-size: 12px; line-height: 1.4; }
  .frentes .frente ul { display: none; }
  .frente-link { display: block; margin-top: 10px; padding: 8px 10px; border-radius: 12px; font-size: clamp(11px, 3vw, 12.5px); line-height: 1.25; text-align: center; text-decoration: none; background: rgba(14, 107, 67, .09); }
  .frente-juridico .frente-link { background: rgba(245, 193, 61, .22); color: var(--cor-destaque-escura); }
  .hero-manga { display: none; }
}
/* celular estreito ou de tela baixa: só chip, título e botão, para caber lado a lado e sobrar lugar para a manga */
@media (max-width: 600px), (max-width: 860px) and (max-height: 820px) {
  .frentes .frente p { display: none; }
}
.hero-sub a, .palco-sub a { color: var(--cor-principal); text-decoration: underline; text-underline-offset: 3px; }
.frente { text-align: left; min-width: 0; }
.frente-chip {
  display: inline-block; margin-bottom: 10px;
  padding: 5px 11px; border-radius: 999px;
  background: rgba(14, 107, 67, .09); color: var(--cor-principal);
  font-size: 11.5px; font-weight: 700; letter-spacing: .06em; text-transform: uppercase;
}
.frente-juridico .frente-chip { background: rgba(245, 193, 61, .22); color: var(--cor-destaque-escura); }
/* o título do cartão de Processos tem uma versão curta para o celular */
.tit-cel { display: none; }
@media (max-width: 860px) { .tit-pc { display: none; } .tit-cel { display: inline; } }
/* a conta dos ganhos: pequena, logo abaixo do chip (13/10/2026) */
.frente-ganhos { display: block; margin: -4px 0 8px; font-size: 11.5px; line-height: 1.3; color: var(--cor-texto-2); letter-spacing: .01em; }
.frente-ganhos b { color: var(--cor-principal); font-weight: 800; }
.frente-juridico .frente-ganhos b { color: var(--cor-destaque-escura); }
.frente h2 { font-size: clamp(17px, 1.4vw, 21px); line-height: 1.2; text-wrap: balance; }
.frente p { margin-top: 8px; font-size: clamp(12.5px, 1vw, 14px); line-height: 1.5; color: var(--cor-texto-2); }
.frente p b { color: var(--cor-texto); }
.frente ul { list-style: none; margin: 10px 0 0; padding: 0; display: grid; gap: 4px; }
.frente li { position: relative; padding-left: 18px; font-size: clamp(12px, .95vw, 13.5px); line-height: 1.4; color: var(--cor-texto-2); }
.frente li::before { content: ''; position: absolute; left: 0; top: 5px; width: 9px; height: 9px; border-radius: 50%; background: var(--cor-amarelo); box-shadow: inset 0 0 0 3px rgba(14, 107, 67, .25); }
.frente-link { display: inline-block; margin-top: 12px; font-weight: 700; font-size: 14px; color: var(--cor-principal); text-decoration: underline; text-underline-offset: 3px; }
@media (min-width: 861px) {
  .so-celular { display: none; }
  .so-larga .frente { display: block; }
  /* topo parado: título em cima, as duas frentes embaixo; a manga (quando há foto) fica no meio */
  .hero .frentes { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: 32px clamp(28px, 4vw, 64px); margin: 30px auto 0; max-width: 1040px; }
  .manga-parada .hero .frentes { grid-template-columns: minmax(0, 1fr) clamp(220px, 24vw, 360px) minmax(0, 1fr); max-width: none; align-items: center; }
  .manga-parada .hero .frente-juridico { grid-column: 3; }
}
/* o selo de privacidade no alto do topo: pequeno, para não mudar o visual */
.selo-privacidade {
  display: inline-flex; align-items: center; gap: 7px;
  margin: 0 auto 14px; padding: 6px 14px 6px 10px;
  border-radius: 999px;
  background: rgba(14, 107, 67, .07); border: 1px solid rgba(14, 107, 67, .18);
  color: var(--cor-principal); font-size: 12.5px; line-height: 1.3; font-weight: 500;
  text-decoration: none; white-space: nowrap; max-width: 100%;
}
.selo-privacidade svg { width: 14px; height: 14px; flex: none; }
.selo-privacidade b { font-weight: 700; text-decoration: underline; text-underline-offset: 2px; }
.selo-privacidade:hover { background: rgba(14, 107, 67, .12); }
.palco-abertura .selo-privacidade { align-self: center; }
@media (max-width: 860px) { .selo-privacidade { white-space: normal; text-align: center; font-size: 12px; margin-bottom: 12px; } .selo-privacidade b { display: none; } }
@media (min-width: 861px) {
  /* na tela larga as duas frentes já dizem tudo: o título grande sai e os botões ficam menores */
  .hero-title, .palco-titulo { display: none; }
  .hero-cta .btn-lg, .palco-cta .btn-lg { padding: 11px 20px; font-size: 14.5px; }
  .frente li b { color: var(--cor-texto); font-weight: 700; }
}
@media (max-height: 760px) and (min-width: 861px) {
  .frente p { display: none; }
}

/* ---------------------------------------------------------------
   19c. PRIVACIDADE — o cofre: nada fica gravado
   --------------------------------------------------------------- */
.cofre {
  position: relative;
  max-width: 1040px; margin: 0 auto;
  padding: 44px 36px 32px;
  background: var(--cor-fundo-alt);
  border: 1px solid var(--cor-borda);
  border-radius: 28px;
  box-shadow: var(--sombra);
}
.cofre-selo {
  position: absolute; top: -28px; left: 50%; translate: -50% 0;
  width: 56px; height: 56px; border-radius: 50%;
  display: grid; place-items: center;
  background: linear-gradient(140deg, #0E6B43 0%, #2F9C57 100%);
  color: #fff; box-shadow: 0 10px 24px rgba(14, 107, 67, .28), 0 0 0 6px var(--cor-fundo);
}
.cofre-selo svg { width: 26px; height: 26px; }
.cofre-colunas { display: grid; grid-template-columns: repeat(3, 1fr); gap: 24px 32px; }
.cofre-col { text-align: left; min-width: 0; }
.cofre-rotulo {
  display: inline-block; margin-bottom: 8px;
  font-size: 11.5px; font-weight: 700; letter-spacing: .08em; text-transform: uppercase;
  color: var(--cor-principal);
}
.cofre-col:last-child .cofre-rotulo { color: var(--cor-destaque-escura); }
.cofre-col p { margin: 0; font-size: 15px; line-height: 1.6; color: var(--cor-texto-2); }
.cofre-termo {
  margin-top: 28px; padding: 24px 28px;
  border-radius: 18px;
  background: linear-gradient(140deg, rgba(14, 107, 67, .06) 0%, rgba(245, 193, 61, .10) 100%);
  border: 1px dashed rgba(14, 107, 67, .35);
  text-align: left;
}
.cofre-termo h3 { font-size: 17px; margin-bottom: 12px; }
.cofre-termo ol { margin: 0; padding-left: 22px; display: grid; gap: 8px; }
.cofre-termo li { font-size: 14.5px; line-height: 1.6; color: var(--cor-texto-2); }
.cofre-termo li b { color: var(--cor-texto); }
.cofre-nota { margin: 14px 0 0; font-size: 13px; color: var(--cor-texto-3); }
.cofre-nota a { color: var(--cor-principal); text-decoration: underline; text-underline-offset: 3px; }
@media (max-width: 960px) {
  .cofre { padding: 40px 22px 24px; border-radius: 22px; }
  .cofre-colunas { grid-template-columns: 1fr; gap: 18px; }
  .cofre-termo { padding: 18px 18px; }
}
/* três cartões de um terço em cima; o compromisso é um bloco à parte, largo, embaixo */
.bento-juridico { grid-template-columns: repeat(6, 1fr); }
.bento-juridico .bento-item.bento-wide { grid-column: span 2; }
.bento-compromissos { margin-top: 16px; padding: 28px 30px 26px; }
.bento-compromissos h3 { margin-bottom: 14px; }
.compromissos {
  list-style: none; margin: 0; padding: 0;
  display: grid; grid-template-columns: repeat(2, 1fr); gap: 12px 28px;
}
.compromissos li {
  position: relative; padding-left: 26px;
  font-size: 15px; line-height: 1.55; color: rgba(255,255,255,.82);
}
.compromissos li::before {
  content: ''; position: absolute; left: 0; top: 7px;
  width: 14px; height: 14px; border-radius: 50%;
  background: var(--cor-amarelo);
  box-shadow: inset 0 0 0 4px rgba(0,0,0,.25);
}
.compromissos b { color: #fff; }
.compromissos-nota {
  margin: 18px 0 0; padding-top: 14px;
  border-top: 1px solid rgba(255,255,255,.18);
  font-family: var(--fonte-display); font-weight: 700; font-size: 15px; color: #fff !important;
}
@media (max-width: 960px) {
  .bento-juridico { grid-template-columns: 1fr; }
  .bento-juridico .bento-item.bento-wide { grid-column: span 1; }
  .compromissos { grid-template-columns: 1fr; }
}

/* ---------------------------------------------------------------
   20. IMPRESSÃO
   --------------------------------------------------------------- */
@media print {
  .nav-wrap, .hero-glow, .footer-wordmark, .nav-mobile { display: none !important; }
  body { background: #fff; }
  .section { padding-block: 24px; }
}

/* topo em 4 colunas (28/10/2026): Processos | Crie seu processo | Jurídico | Mango */
.m4{ position:relative; z-index:2; display:grid; grid-template-columns:repeat(4,minmax(0,1fr)); gap:16px; width:100%; max-width:1240px; margin:26px auto 0; text-align:left; }
.m4-card{ position:relative; display:flex; flex-direction:column; min-width:0; padding:22px 20px 18px; border-radius:22px; background:rgba(255,255,255,.94); border:1px solid rgba(14,107,67,.12); box-shadow:0 12px 32px rgba(20,60,40,.08); }
.m4-chip{ align-self:flex-start; padding:5px 11px; border-radius:999px; font-size:11px; font-weight:800; letter-spacing:.06em; text-transform:uppercase; background:rgba(14,107,67,.10); color:#0E6B43; }
.m4-card h2{ margin:14px 0 6px; font-size:clamp(17px,1.35vw,20px); line-height:1.22; letter-spacing:-.01em; text-wrap:balance; }
.m4-card p{ margin:0; font-size:13.5px; line-height:1.45; color:var(--cor-texto-2); }
.m4-card ul{ list-style:none; margin:14px 0 0; padding:0; display:grid; gap:7px; }
.m4-card li{ position:relative; padding-left:18px; font-size:13px; line-height:1.4; color:var(--cor-texto-2); }
.m4-card li::before{ content:''; position:absolute; left:0; top:6px; width:8px; height:8px; border-radius:50%; background:#F2B53A; }
.m4-link{ margin-top:auto; padding-top:16px; font-size:14px; font-weight:700; color:#0E6B43; text-decoration:none; }
.m4-link:hover{ text-decoration:underline; text-underline-offset:3px; }
.m4-crie{ border:2px solid #0E6B43; box-shadow:0 14px 34px rgba(14,107,67,.16); }
.m4-crie .m4-chip{ background:#F2A33A; color:#1b1b1b; }
.m4-jur .m4-chip{ background:rgba(245,193,61,.26); color:#8a5200; }
.m4-jur .m4-link{ color:#8a5200; }
.m4-persona{ background:linear-gradient(160deg,#0E6B43 0%,#16904f 100%); border:0; color:#fff; padding-top:18px; }
.m4-persona h2{ color:#fff; }
.m4-persona p, .m4-persona li{ color:rgba(255,255,255,.9); }
.m4-persona .m4-chip{ background:rgba(255,255,255,.18); color:#fff; }
.m4-persona .m4-link{ color:#FFD27A; }
.m4-avatar{ position:absolute; top:-30px; right:12px; width:104px; height:104px; border-radius:50%; filter:drop-shadow(0 8px 14px rgba(0,0,0,.25)); animation:m4-flutua 4s ease-in-out infinite; }
@keyframes m4-flutua{ 0%,100%{ transform:translateY(0) } 50%{ transform:translateY(-6px) } }
@media (prefers-reduced-motion: reduce){ .m4-avatar{ animation:none; } }
.palco-abertura .m4, .hero .m4{ margin-top:30px; }
@media (max-width:1100px){ .m4{ grid-template-columns:repeat(2,minmax(0,1fr)); max-width:760px; } }
@media (max-width:640px){
  .m4{ gap:10px; margin-top:12px; }
  .m4-card{ padding:16px 13px 13px; border-radius:16px; }
  .m4-card h2{ font-size:14.5px; margin:10px 0 4px; }
  .m4-card p{ font-size:12px; }
  .m4-card ul{ display:none; }
  .m4-chip{ font-size:9.5px; padding:4px 8px; }
  .m4-link{ font-size:12.5px; padding-top:10px; }
  .m4-avatar{ width:62px; height:62px; top:-22px; right:4px; }
}