/* ══════════════════════════════════════════════════════════
   BRAZIL CONNECT — Paleta inspirada Sicoob
══════════════════════════════════════════════════════════ */

:root {
  /* ── Teal (cor principal) ──────────────────────────────── */
  --teal-50:  #effefb;
  --teal-100: #ccfaf4;
  --teal-200: #99f2e8;
  --teal-300: #04c8b0;
  --teal-400: #00ae9d;   /* ← brand principal */
  --teal-500: #058075;
  --teal-600: #0a655e;
  --teal-700: #003641;   /* ← navy escuro */
  --teal-800: #002a33;
  --teal-900: #001e24;

  /* ── Navy (escuro) ─────────────────────────────────────── */
  --navy:      #003641;
  --navy-dark: #002a33;
  --navy-black:#001e24;

  /* ── Navbar / footer ───────────────────────────────────── */
  --charcoal:  #003641;   /* dark teal — igual Sicoob */
  --charcoal-2:#002a33;

  /* ── Lime (acento complementar) ────────────────────────── */
  --lime:      #7db61c;
  --lime-dark: #679c14;

  /* ── Neutrals ──────────────────────────────────────────── */
  --text:    #002a33;
  --text-2:  #515151;
  --muted:   #818181;
  --border:  #e3e3e3;
  --bg:      #f5f6f8;
  --surface: #ffffff;

  /* ── Legacy aliases (mantidos para HTML inline existente) ── */
  --br-green:       var(--teal-400);
  --br-green-soft:  var(--teal-50);
  --br-green-dark:  var(--teal-600);
  --br-yellow:      var(--lime);
  --br-yellow-soft: #f5f8e8;
  --br-blue:        var(--teal-400);
  --br-blue-soft:   var(--teal-50);

  /* ── Shadows ───────────────────────────────────────────── */
  --shadow-xs:      0 1px 2px rgba(0,0,0,.05);
  --shadow-sm:      0 1px 3px rgba(0,0,0,.08), 0 1px 2px rgba(0,0,0,.04);
  --shadow:         0 4px 6px -1px rgba(0,0,0,.07), 0 2px 4px -1px rgba(0,0,0,.04);
  --shadow-md:      0 8px 20px -4px rgba(0,0,0,.09), 0 4px 8px -2px rgba(0,0,0,.04);
  --shadow-lg:      0 20px 40px -8px rgba(0,0,0,.11), 0 8px 16px -4px rgba(0,0,0,.05);
  --shadow-teal:    0 6px 24px rgba(0,174,157,.22);
  --shadow-teal-lg: 0 16px 48px rgba(0,174,157,.30);

  /* ── Radius ────────────────────────────────────────────── */
  --r-xs:   4px;
  --r-sm:   8px;
  --r:      12px;
  --r-md:   16px;
  --r-lg:   22px;
  --r-xl:   30px;
  --r-pill: 9999px;

  /* ── Motion ────────────────────────────────────────────── */
  --ease:   cubic-bezier(.4,0,.2,1);
  --t:      220ms var(--ease);
  --t-slow: 380ms var(--ease);

  /* ── Layout ─────────────────────────────────────────────── */
  --topbar-h: 32px;
}

/* ── Base ─────────────────────────────────────────────── */
*, *::before, *::after { box-sizing: border-box; }
html { scroll-behavior: smooth; }

body {
  font-family: 'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;
  background: var(--bg);
  color: var(--text);
  line-height: 1.65;
  font-size: .9375rem;   /* 15px base */
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  overflow-x: hidden;
}

/* Remove o padding-top do main para o hero encostar no navbar */
main.container {
  padding-top: 0 !important;
}

/* ══════════════════════════════════════════════════════════
   TIPOGRAFIA — sistema global unificado
══════════════════════════════════════════════════════════ */
h1, h2, h3, h4, h5, h6 {
  font-family: 'Inter', -apple-system, sans-serif;
  color: var(--text);
  margin-top: 0;
  line-height: 1.2;
}

h1 {
  font-size: clamp(1.75rem, 3.5vw, 2.5rem);
  font-weight: 800;
  letter-spacing: -.045em;
  line-height: 1.1;
}

h2 {
  font-size: clamp(1.2rem, 2.2vw, 1.55rem);
  font-weight: 700;
  letter-spacing: -.03em;
  line-height: 1.18;
}

h3 {
  font-size: 1.1rem;
  font-weight: 700;
  letter-spacing: -.02em;
  line-height: 1.25;
}

h4 {
  font-size: .9375rem;
  font-weight: 700;
  letter-spacing: -.01em;
  line-height: 1.3;
}

h5 { font-size: .875rem; font-weight: 600; }
h6 { font-size: .8125rem; font-weight: 600; }

p {
  font-size: .9375rem;
  line-height: 1.65;
  color: var(--text-2);
  margin-bottom: .85rem;
}

.lead {
  font-size: 1.0rem;
  font-weight: 400;
  line-height: 1.7;
  color: var(--text-2);
}

small, .small {
  font-size: .8125rem;
  line-height: 1.5;
}

/* Subtítulo de seção em páginas de detalhe */
.plan-detail-section-title {
  font-size: clamp(1.1rem, 2vw, 1.35rem);
  font-weight: 700;
  letter-spacing: -.025em;
  color: var(--text);
  line-height: 1.2;
}

/* ══════════════════════════════════════════════════════════
   TOPBAR — faixa teal acima do navbar
══════════════════════════════════════════════════════════ */
.topbar {
  background: var(--teal-400);
  padding: .3rem 0;
  font-size: .75rem;
}

.topbar-link {
  color: rgba(255,255,255,.88);
  text-decoration: none;
  font-weight: 500;
  padding: .2rem .45rem;
  border-radius: var(--r-xs);
  transition: var(--t);
  white-space: nowrap;
}
.topbar-link:hover {
  color: #fff;
  background: rgba(255,255,255,.14);
}

.topbar-lang {
  color: rgba(255,255,255,.72);
  text-decoration: none;
  font-weight: 600;
  font-size: .72rem;
  letter-spacing: .04em;
  padding: .18rem .38rem;
  border-radius: var(--r-xs);
  transition: var(--t);
}
.topbar-lang:hover,
.topbar-lang.active {
  color: #fff;
  background: rgba(255,255,255,.18);
}

.topbar-divider {
  width: 1px;
  height: 14px;
  background: rgba(255,255,255,.25);
  flex-shrink: 0;
}

/* ══════════════════════════════════════════════════════════
   NAVBAR — dark teal (estilo Sicoob)
══════════════════════════════════════════════════════════ */
header {
  position: sticky;
  top: 0;
  z-index: 1000;
}

.topbar {
  /* herda o sticky do header */
}

.navbar {
  background: var(--charcoal) !important;
  border-bottom: 1px solid rgba(255,255,255,.06) !important;
  box-shadow: 0 2px 16px rgba(0,0,0,.28);
  padding-top: .65rem;
  padding-bottom: .65rem;
}

.nav-link {
  color: rgba(255,255,255,.75) !important;
  font-weight: 500;
  font-size: .82rem;
  padding: .35rem .55rem !important;
  border-radius: var(--r-sm);
  transition: var(--t);
  white-space: nowrap;
  letter-spacing: -.01em;
}
.nav-link:hover {
  color: var(--teal-300) !important;
  background: rgba(255,255,255,.05);
}

.top-logo { height: 52px; width: auto; display: block; }

.navbar-toggler {
  border-color: rgba(255,255,255,.2);
  padding: .28rem .5rem;
}
.navbar-toggler-icon {
  background-image: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 30 30'%3e%3cpath stroke='rgba(255,255,255,.75)' stroke-linecap='round' stroke-miterlimit='10' stroke-width='2' d='M4 7h22M4 15h22M4 23h22'/%3e%3c/svg%3e");
}

/* ── Botões do navbar — todos translúcidos, mesmo estilo ── */
.navbar .btn-sm {
  font-size: .72rem;
  padding: .24rem .52rem;
  font-weight: 600;
  white-space: nowrap;
  border-radius: var(--r-sm);
  transition: var(--t);
}

/* Reduz o gap entre botões do navbar */
.navbar .d-flex.gap-2 {
  gap: .35rem !important;
}

/* Navbar não tem mais botões — estilos de botão removidos para o topbar */

/* ══════════════════════════════════════════════════════════
   BOTÕES GLOBAIS — sistema de 2 estilos
══════════════════════════════════════════════════════════ */
.btn {
  font-weight: 600;
  border-radius: var(--r-sm);
  transition: all var(--t);
  letter-spacing: .01em;
}
.btn:not(:disabled):hover  { transform: translateY(-1px); }
.btn:not(:disabled):active { transform: translateY(0); }

/* Filled principal → teal */
.btn-success {
  background: var(--teal-400);
  border-color: var(--teal-400);
  color: #fff;
  box-shadow: var(--shadow-teal);
}
.btn-success:hover {
  background: var(--teal-500);
  border-color: var(--teal-500);
  color: #fff;
  box-shadow: var(--shadow-teal-lg);
}
.btn-success:focus-visible {
  outline: 3px solid var(--teal-300);
  outline-offset: 2px;
}

/* btn-primary → mesmo teal (unificado com btn-success) */
.btn-primary {
  background: var(--teal-400);
  border-color: var(--teal-400);
  color: #fff;
  box-shadow: var(--shadow-teal);
}
.btn-primary:hover {
  background: var(--teal-500);
  border-color: var(--teal-500);
  color: #fff;
  box-shadow: var(--shadow-teal-lg);
}
.btn-primary:focus-visible {
  outline: 3px solid var(--teal-300);
  outline-offset: 2px;
}

/* btn-warning → mesmo teal (mantém consistência) */
.btn-warning {
  background: var(--teal-400);
  border-color: var(--teal-400);
  color: #fff;
  font-weight: 700;
  box-shadow: var(--shadow-teal);
}
.btn-warning:hover {
  background: var(--teal-500);
  border-color: var(--teal-500);
  color: #fff;
  box-shadow: var(--shadow-teal-lg);
}

/* Todos os outline-* globais → um único estilo neutro */
.btn-outline-success,
.btn-outline-primary,
.btn-outline-info,
.btn-outline-warning,
.btn-outline-secondary,
.btn-outline-dark {
  color: var(--text-2);
  border: 1.5px solid var(--border);
  background: transparent;
  box-shadow: none;
}
.btn-outline-success:hover,
.btn-outline-primary:hover,
.btn-outline-info:hover,
.btn-outline-warning:hover,
.btn-outline-secondary:hover,
.btn-outline-dark:hover {
  color: var(--teal-600);
  border-color: var(--teal-400);
  background: var(--teal-50);
  box-shadow: none;
}

/* ══════════════════════════════════════════════════════════
   HERO — teal brilhante, estilo Sicoob
══════════════════════════════════════════════════════════ */
.hero {
  position: relative;
  background: var(--teal-400);  /* #00ae9d — teal principal Sicoob */
  color: #fff;

  /* Quebra o container e vai de borda a borda */
  width: 100vw;
  margin-left: calc(50% - 50vw);
  margin-top: 0;
  border-radius: 0;
  padding: 0;
  overflow: hidden;
  box-shadow: none;
}

/* Container centrado dentro do hero full-width */
.hero-inner {
  max-width: 1140px;
  width: 100%;
  margin: 0 auto;
  padding-top: 5rem;
  padding-bottom: 3.75rem;
  padding-left: 1.5rem;
  padding-right: 1.5rem;

  display: grid;
  grid-template-columns: 1.1fr 1fr;
  gap: 2.5rem;
  align-items: center;
  position: relative;
  z-index: 1;
}

/* Padrão de pontos brancos — canto direito (igual Sicoob) */
.hero::after {
  content: '';
  position: absolute;
  inset: 0;
  background-image: radial-gradient(circle, rgba(255,255,255,.22) 1.5px, transparent 1.5px);
  background-size: 22px 22px;
  background-position: right top;
  mask-image: linear-gradient(to left, rgba(0,0,0,.5) 0%, transparent 55%);
  -webkit-mask-image: linear-gradient(to left, rgba(0,0,0,.5) 0%, transparent 55%);
  pointer-events: none;
}

/* Sombra sutil para dar profundidade */
.hero::before {
  content: '';
  position: absolute;
  inset: 0;
  background: linear-gradient(135deg, rgba(0,0,0,.06) 0%, transparent 50%);
  pointer-events: none;
  border-radius: inherit;
}

.hero h1 {
  font-size: clamp(2rem, 4.5vw, 3rem);
  font-weight: 800;
  letter-spacing: -.05em;
  line-height: 1.1;
  color: #fff;
  margin-bottom: .75rem;
  position: relative;
  z-index: 1;
  text-shadow: 0 2px 12px rgba(0,0,0,.12);
}

.hero .lead {
  color: rgba(255,255,255,.92);
  font-size: 1rem;
  font-weight: 500;
  line-height: 1.6;
  position: relative;
  z-index: 1;
}

.hero p:not(.lead) {
  color: rgba(255,255,255,.78);
  font-size: .9rem;
  line-height: 1.7;
  position: relative;
  z-index: 1;
}

.hero .d-flex {
  position: relative;
  z-index: 1;
}

/* ── Botões no hero ────────────────────────────────────── */
/* CTA principal: branco com texto teal — estilo "Abra sua conta" Sicoob */
.hero .btn-success {
  background: #fff;
  border-color: #fff;
  color: var(--teal-600);
  font-weight: 700;
  box-shadow: 0 4px 16px rgba(0,0,0,.15);
  border-radius: var(--r-pill);
}
.hero .btn-success:hover {
  background: var(--teal-50);
  border-color: var(--teal-50);
  color: var(--teal-700);
  box-shadow: 0 6px 24px rgba(0,0,0,.20);
}

/* Filled secundário no hero */
.hero .btn-primary {
  background: rgba(255,255,255,.15);
  border: 1.5px solid rgba(255,255,255,.35);
  color: #fff;
  box-shadow: none;
}
.hero .btn-primary:hover {
  background: rgba(255,255,255,.25);
  border-color: rgba(255,255,255,.55);
  color: #fff;
  box-shadow: none;
}

/* Todos os outline-* no hero → translúcido branco uniforme */
.hero .btn-outline-success,
.hero .btn-outline-primary,
.hero .btn-outline-info,
.hero .btn-outline-warning,
.hero .btn-outline-secondary,
.hero .btn-outline-dark {
  color: rgba(255,255,255,.88);
  border: 1.5px solid rgba(255,255,255,.30);
  background: transparent;
  box-shadow: none;
}
.hero .btn-outline-success:hover,
.hero .btn-outline-primary:hover,
.hero .btn-outline-info:hover,
.hero .btn-outline-warning:hover,
.hero .btn-outline-secondary:hover,
.hero .btn-outline-dark:hover {
  background: rgba(255,255,255,.14);
  border-color: rgba(255,255,255,.55);
  color: #fff;
  box-shadow: none;
  transform: none;
}

/* Eyebrow — label acima do h1 */
.hero-eyebrow {
  font-size: .78rem;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: .12em;
  color: rgba(255,255,255,.65);
  margin-bottom: .5rem;
}

/* Imagem do hero — ancora na borda inferior do hero */
.hero-img-wrap {
  position: relative;
  z-index: 1;
  align-self: end;                    /* cola na base da célula do grid */
  margin-bottom: -3.75rem;            /* cancela o padding-bottom do hero */
  display: flex;
  align-items: flex-end;
  justify-content: center;
}

.hero-img-wrap img {
  width: 192%;
  max-height: 1392px;
  object-fit: contain;
  object-position: bottom center;
  display: block;
  filter: drop-shadow(0 6px 20px rgba(0,0,0,.20));
  margin-left: -46%;
}

@media (max-width: 768px) {
  .hero-img-wrap { margin-bottom: -2.5rem; }
}

/* ══════════════════════════════════════════════════════════
   SECTION BLOCKS
══════════════════════════════════════════════════════════ */
.block {
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: var(--r-lg);
  padding: 2.25rem 2rem;
  margin-top: 1.25rem;
  box-shadow: var(--shadow-sm);
  position: relative;
  overflow: hidden;
}

.block h2 {
  font-size: clamp(1.1rem, 2vw, 1.4rem);
  font-weight: 800;
  color: var(--text);
  letter-spacing: -.035em;
  line-height: 1.18;
  position: relative;
  padding-left: 15px;
  margin-bottom: 1.1rem;
}

.block h2::before {
  content: '';
  position: absolute;
  left: 0; top: .2em; bottom: .2em;
  width: 4px;
  border-radius: 4px;
  background: linear-gradient(180deg, var(--teal-400), var(--lime));
}

.grid-2 {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 1.5rem;
  align-items: start;
}

.section-img {
  width: 100%;
  border: 1px solid var(--border);
  border-radius: var(--r-md);
  background: var(--surface);
}

/* ── Formulários — focus ring teal ────────────────────── */
.form-control:focus,
.form-select:focus {
  border-color: var(--teal-400);
  box-shadow: 0 0 0 3px rgba(0,174,157,.16);
  outline: none;
}
.form-control,
.form-select {
  border-color: var(--border);
  border-radius: var(--r-sm);
  font-size: .9rem;
  transition: border-color var(--t), box-shadow var(--t);
}

/* ══════════════════════════════════════════════════════════
   PRICING
══════════════════════════════════════════════════════════ */
.pricing-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 1.25rem;
  margin-top: 1.25rem;
}

.pricing-card {
  border-radius: var(--r-lg);
  padding: 1.75rem 1.5rem 1.5rem;
  border: 1.5px solid var(--border);
  background: var(--surface);
  position: relative;
  display: flex;
  flex-direction: column;
  box-shadow: var(--shadow-sm);
  transition: box-shadow var(--t-slow), transform var(--t-slow), border-color var(--t-slow);
}
.pricing-card:hover {
  box-shadow: var(--shadow-lg);
  transform: translateY(-5px);
  border-color: var(--teal-300);
}

/* Card em destaque — fundo navy escuro */
.pricing-card.featured {
  background: linear-gradient(160deg, var(--navy-black) 0%, var(--navy-dark) 100%);
  border-color: var(--teal-500);
  border-width: 2px;
  color: #fff;
  box-shadow: var(--shadow-teal-lg);
}
.pricing-card.featured:hover {
  box-shadow: 0 28px 70px rgba(0,174,157,.38);
  transform: translateY(-6px);
  border-color: var(--teal-400);
}
.pricing-card.featured .plan-price        { color: var(--teal-300); }
.pricing-card.featured .plan-price span   { color: var(--teal-500); }
.pricing-card.featured .pricing-section-label {
  background: rgba(0,174,157,.14);
  color: var(--teal-300);
}
.pricing-card.featured .check-list li         { color: rgba(255,255,255,.78); }
.pricing-card.featured .check-list li::before { color: var(--teal-300); }
.pricing-card.featured .small.text-muted      { color: rgba(255,255,255,.50) !important; }
.pricing-card.featured h3                     { color: #fff; }
.pricing-card.featured .pricing-divider       { border-color: rgba(255,255,255,.12); }

/* Botões do card featured → translúcido branco */
.pricing-card.featured .btn-outline-success,
.pricing-card.featured .btn-outline-primary,
.pricing-card.featured .btn-outline-info,
.pricing-card.featured .btn-outline-warning,
.pricing-card.featured .btn-outline-secondary,
.pricing-card.featured .btn-outline-dark {
  color: rgba(255,255,255,.72) !important;
  border-color: rgba(255,255,255,.22) !important;
  background: transparent !important;
}
.pricing-card.featured .btn-outline-success:hover,
.pricing-card.featured .btn-outline-primary:hover,
.pricing-card.featured .btn-outline-info:hover,
.pricing-card.featured .btn-outline-warning:hover,
.pricing-card.featured .btn-outline-secondary:hover,
.pricing-card.featured .btn-outline-dark:hover {
  background: rgba(255,255,255,.10) !important;
  border-color: rgba(255,255,255,.42) !important;
  color: #fff !important;
}

.pricing-badge {
  position: absolute;
  top: -13px; left: 50%;
  transform: translateX(-50%);
  background: var(--teal-400);
  color: #fff;
  font-size: .70rem;
  font-weight: 800;
  padding: 4px 18px;
  border-radius: var(--r-pill);
  white-space: nowrap;
  box-shadow: 0 4px 14px rgba(0,174,157,.32);
  letter-spacing: .07em;
  text-transform: uppercase;
}

.pricing-card h3 {
  font-size: 1.05rem;
  font-weight: 700;
  margin-bottom: 4px;
  letter-spacing: -.02em;
}

.pricing-section-label {
  display: inline-block;
  font-size: .67rem;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: .1em;
  color: var(--teal-600);
  background: var(--teal-50);
  padding: 2px 9px;
  border-radius: var(--r-pill);
  margin-top: 6px;
  margin-bottom: 6px;
}

.check-list { list-style: none; padding: 0; margin: 0; }
.check-list li {
  display: flex;
  align-items: flex-start;
  gap: 7px;
  padding: 4px 0;
  font-size: .875rem;
  color: var(--text-2);
  line-height: 1.45;
}
.check-list li::before {
  content: '✓';
  color: var(--teal-400);
  font-weight: 700;
  flex-shrink: 0;
  margin-top: 1px;
  font-size: .8rem;
}

.pricing-divider { border: none; border-top: 1px dashed var(--border); margin: 12px 0; }
.pricing-card .cta-btn { margin-top: auto; padding-top: 1rem; }

.plan-price {
  font-size: 1.8rem;
  font-weight: 800;
  color: var(--teal-600);
  line-height: 1.1;
  margin: 8px 0 12px;
  letter-spacing: -.05em;
}
.plan-price span {
  font-size: .84rem;
  font-weight: 500;
  color: var(--muted);
  letter-spacing: 0;
}
.plan-price span[data-price-usd],
.plan-detail-price span[data-price-usd] {
  font-size: inherit;
  font-weight: inherit;
  color: inherit;
  letter-spacing: inherit;
}

/* ══════════════════════════════════════════════════════════
   PLAN DETAIL PAGE
══════════════════════════════════════════════════════════ */
.plan-detail-wrap { max-width: 820px; margin: 0 auto; }

.plan-detail-header {
  display: flex;
  align-items: flex-start;
  gap: 20px;
  padding: 30px;
  border-radius: var(--r-lg);
  margin-bottom: 24px;
  border: 1.5px solid var(--border);
  box-shadow: var(--shadow-md);
}
.plan-detail-header.start { border-color: rgba(0,174,157,.25); background: var(--teal-50); }
.plan-detail-header.pro   { border-color: rgba(0,174,157,.35); background: #e6faf8; }
.plan-detail-header.max   { border-color: rgba(125,182,28,.30); background: #f4f8e8; }

.plan-detail-emoji  { font-size: 2.8rem; line-height: 1; flex-shrink: 0; }
.plan-detail-label  { font-size: .72rem; font-weight: 700; text-transform: uppercase; letter-spacing: .08em; color: var(--muted); margin-bottom: 2px; }
.plan-detail-name   { font-size: 1.5rem; font-weight: 800; margin: 0 0 6px; letter-spacing: -.04em; }
.plan-detail-price  { font-size: 1.8rem; font-weight: 800; color: var(--teal-600); letter-spacing: -.05em; }
.plan-detail-header.start .plan-detail-price { color: var(--teal-400); }
.plan-detail-header.max   .plan-detail-price { color: var(--lime-dark); }
.plan-price-period  { font-size: .9rem; font-weight: 500; color: var(--muted); }
.plan-detail-desc   { font-size: 1rem; color: var(--text-2); line-height: 1.7; margin-bottom: 28px; }
.plan-detail-grid   { display: grid; grid-template-columns: 1fr 1fr; gap: 20px; margin-bottom: 24px; }

.plan-detail-box {
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: var(--r-md);
  padding: 22px 20px;
  box-shadow: var(--shadow-xs);
}
.plan-detail-box h2 { font-size: .95rem; font-weight: 700; margin-bottom: 12px; }

.plan-detail-ideal {
  background: var(--teal-50);
  border: 1px solid var(--teal-100);
  border-radius: var(--r);
  padding: 16px 20px;
  font-size: .9rem;
  margin-bottom: 28px;
  color: var(--text-2);
}
.plan-detail-ideal strong {
  display: block;
  margin-bottom: 4px;
  font-size: .75rem;
  text-transform: uppercase;
  letter-spacing: .05em;
  color: var(--teal-600);
}
.plan-detail-cta { text-align: center; padding: 8px 0 16px; }

/* ══════════════════════════════════════════════════════════
   FEED MEDIA
══════════════════════════════════════════════════════════ */
.feed-media-box {
  width: 100%;
  max-width: 360px;
  aspect-ratio: 4 / 5;
  border-radius: var(--r-md);
  overflow: hidden;
  border: 1px solid var(--border);
  background: var(--teal-50);
  margin-left: auto;
  margin-right: auto;
  box-shadow: var(--shadow-md);
}
.feed-media-box img { width: 100%; height: 100%; object-fit: cover; display: block; }

.feed-media-thumb {
  width: 96px;
  aspect-ratio: 4 / 5;
  border-radius: var(--r-sm);
  overflow: hidden;
  border: 1px solid var(--border);
  background: var(--teal-50);
  display: inline-block;
}
.feed-media-thumb img { width: 100%; height: 100%; object-fit: cover; display: block; }

/* ══════════════════════════════════════════════════════════
   PARTNERS
══════════════════════════════════════════════════════════ */
.partner-strip-title {
  font-weight: 700;
  font-size: .77rem;
  text-transform: uppercase;
  letter-spacing: .09em;
  margin-bottom: 8px;
}

.partner-logo-box {
  width: 160px;
  height: 92px;
  border: 1px solid var(--border);
  border-radius: var(--r-md);
  background: var(--surface);
  display: flex;
  align-items: center;
  justify-content: center;
  box-shadow: var(--shadow-xs);
  transition: var(--t);
}
.partner-logo-box:hover {
  box-shadow: var(--shadow-md);
  border-color: var(--teal-300);
  transform: translateY(-2px);
}
.partner-logo-box img { max-width: 144px; max-height: 74px; object-fit: contain; }

#partnersCarousel .carousel-control-prev-icon,
#partnersCarousel .carousel-control-next-icon { filter: invert(40%); }

/* ══════════════════════════════════════════════════════════
   COMMUNITY FEED
══════════════════════════════════════════════════════════ */
#comunidade .border.rounded,
#community .border.rounded {
  border: 1px solid var(--border) !important;
  border-radius: var(--r-lg) !important;
  background: linear-gradient(180deg, var(--teal-50) 0%, #fff 100%);
  padding: 1.25rem !important;
}

#comunidade article,
#community article {
  background: var(--surface) !important;
  border: 1px solid var(--border) !important;
  border-radius: var(--r-md) !important;
  box-shadow: var(--shadow-sm);
  transition: var(--t-slow);
}
#comunidade article:hover,
#community article:hover {
  transform: translateY(-3px);
  box-shadow: var(--shadow-md);
  border-color: var(--teal-300) !important;
}

#comunidade article h5 a,
#community article h5 a {
  color: var(--text);
  text-decoration: none;
  font-weight: 700;
  letter-spacing: -.02em;
}
#comunidade article h5 a:hover,
#community article h5 a:hover { color: var(--teal-600); }

#comunidade article small,
#community article small {
  display: inline-block;
  background: var(--teal-50);
  border: 1px solid var(--teal-100);
  border-radius: var(--r-pill);
  padding: 3px 10px;
  font-size: .75rem;
  color: var(--teal-700);
  font-weight: 500;
}
#comunidade article p,
#community article p { color: var(--text-2); line-height: 1.55; }

#comunidade .feed-media-box,
#community .feed-media-box {
  max-width: 420px;
  border-radius: var(--r-md);
  border: 1px solid var(--border);
  box-shadow: var(--shadow-md);
}
#comunidade .btn-outline-danger,
#community .btn-outline-danger { border-radius: var(--r-pill); font-weight: 600; }

/* ══════════════════════════════════════════════════════════
   TABLES
══════════════════════════════════════════════════════════ */
.table-success-subtle > * > * { background-color: rgba(0,174,157,.06) !important; }
.table-primary-subtle  > * > * { background-color: rgba(0,54,65,.05)   !important; }

/* ══════════════════════════════════════════════════════════
   MISC
══════════════════════════════════════════════════════════ */
.btn-like-heart { border-radius: var(--r-pill); min-width: 66px; font-weight: 700; }

.card-img-package {
  width: 100%;
  height: 140px;
  object-fit: cover;
  border-radius: var(--r-md);
  margin-bottom: 1rem;
  border: 1px solid var(--border);
}

.plan-detail-image {
  width: 100%;
  max-height: 320px;
  object-fit: cover;
  border-radius: var(--r-lg);
  margin-bottom: 1.5rem;
  box-shadow: var(--shadow-lg);
}

/* ══════════════════════════════════════════════════════════
   FOOTER — charcoal (mesmo do navbar)
══════════════════════════════════════════════════════════ */
footer {
  background: var(--charcoal);
  border-top: none !important;
  color: rgba(255,255,255,.55);
  margin-top: 2rem;
}

footer .partner-strip-title         { color: rgba(255,255,255,.42); }
footer .text-muted                   { color: rgba(255,255,255,.42) !important; }
footer .link-secondary,
footer a.link-secondary              { color: rgba(255,255,255,.38) !important; }
footer .link-secondary:hover,
footer a.link-secondary:hover        { color: var(--teal-300) !important; }
footer .btn-link.link-secondary      { color: rgba(255,255,255,.38) !important; }
footer .btn-link.link-secondary:hover{ color: var(--teal-300) !important; }

footer .partner-logo-box {
  background: rgba(255,255,255,.05);
  border-color: rgba(255,255,255,.08);
}
footer .partner-logo-box:hover {
  background: rgba(255,255,255,.09);
  border-color: rgba(0,174,157,.30);
}
footer #partnersCarousel .carousel-control-prev-icon,
footer #partnersCarousel .carousel-control-next-icon {
  filter: invert(100%) opacity(.42);
}

/* ══════════════════════════════════════════════════════════
   COOKIE BAR
══════════════════════════════════════════════════════════ */
#cookieConsentBar {
  background: var(--charcoal) !important;
  border-top: 1px solid rgba(0,174,157,.18);
}

/* ══════════════════════════════════════════════════════════
   SCROLL REVEAL
══════════════════════════════════════════════════════════ */
.reveal {
  opacity: 0;
  transform: translateY(20px);
  transition: opacity .52s var(--ease), transform .52s var(--ease);
}
.reveal.visible { opacity: 1; transform: none; }

/* ══════════════════════════════════════════════════════════
   RESPONSIVE
══════════════════════════════════════════════════════════ */
@media (max-width: 991px) {
  .hero-inner { grid-template-columns: 1fr; text-align: center; }
  .hero-inner .hero-img-wrap { margin: 0 auto; }
  .grid-2 { grid-template-columns: 1fr; }
}

@media (max-width: 1100px) {
  .pricing-grid { grid-template-columns: repeat(2, 1fr); }
}

@media (max-width: 768px) {
  .pricing-grid { grid-template-columns: 1fr; }
  .hero-inner { padding-top: 2.5rem; padding-bottom: 2.5rem; }
  .hero-img-wrap { margin-bottom: -2.5rem; }
  .block { padding: 1.5rem 1.25rem; }
  .topbar .container { 
    justify-content: center !important; 
    flex-wrap: wrap;
    gap: 0.25rem !important;
  }
  .topbar-divider { display: none; }
  .top-logo { height: 40px; }
}

@media (max-width: 576px) {
  .hero-img-wrap { display: flex; margin-bottom: -1rem; margin-top: 1rem; }
  .hero-img-wrap img { width: 100%; margin-left: 0; }
  .hero h1  { font-size: 1.85rem; }
  .hero-inner { padding-top: 2rem; padding-bottom: 1.5rem; }
  
  .topbar .container { 
    justify-content: center !important; 
    flex-wrap: wrap;
    gap: 0.5rem !important;
  }
}

@media (max-width: 640px) {
  .plan-detail-grid   { grid-template-columns: 1fr; }
  .plan-detail-header { flex-direction: column; gap: 10px; }
}