/* ── POR QUE COMPRAR ── */
.why-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(240px, 1fr));
  gap: 1.25rem;
  margin-top: 2.5rem;
}

.why-card {
  border-radius: var(--radius);
  padding: 1.5rem;
  border: 1px solid transparent;
}

.why-green  { background: var(--green-light);  border-color: #b2cef5; }
.why-amber  { background: var(--amber-light);  border-color: #fcd98a; }
.why-coral  { background: var(--coral-light);  border-color: #f9bdb4; }
.why-ink    { background: var(--ink);          border-color: var(--ink); color: var(--white); }

.why-icon {
  font-size: 24px;
  margin-bottom: 1rem;
  display: block;
}

.why-card h3 {
  font-family: var(--font-display);
  font-size: 16px;
  font-weight: 700;
  margin-bottom: .5rem;
}

.why-card.why-ink h3 { color: var(--white); }

.why-card p {
  font-size: 14px;
  color: var(--muted);
  line-height: 1.65;
}

.why-card.why-ink p { color: rgba(255, 255, 255, .62); }

/* ── COMPARATIVO ── */
.compare-table {
  margin-top: 2.5rem;
  border-radius: var(--radius);
  overflow: hidden;
  border: 1px solid rgba(255, 255, 255, .1);
}

.compare-row {
  display: grid;
  grid-template-columns: 1.4fr 1fr 1fr;
  background: rgba(255, 255, 255, .03);
  border-bottom: 1px solid rgba(255, 255, 255, .07);
}

.compare-row:last-child { border-bottom: none; }

.compare-header { background: rgba(255, 255, 255, .08); }

.compare-cell {
  padding: 14px 18px;
  font-size: 14px;
  display: flex;
  align-items: center;
}

.compare-header .compare-cell {
  font-size: 11px;
  font-weight: 700;
  letter-spacing: .07em;
  text-transform: uppercase;
  color: rgba(255, 255, 255, .5);
}

.compare-cell:not(:first-child) { justify-content: center; }

.compare-cell:first-child { color: rgba(255, 255, 255, .8); }

.compare-highlight         { background: rgba(37, 99, 235, .12); }
.compare-highlight-header  { background: rgba(37, 99, 235, .22); color: var(--green-mid) !important; }

.compare-good { color: var(--green-mid); font-weight: 600; }
.compare-bad  { color: #f87171; }

.icon-check { color: var(--green-mid); font-size: 18px; margin-right: 4px; }
.icon-cross { color: var(--coral);     font-size: 18px; margin-right: 4px; }

/* ── INVESTIMENTO ── */
.invest-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 1.5rem;
  margin-top: 2.5rem;
}

.invest-card {
  border-radius: var(--radius);
  overflow: hidden;
  border: 1px solid var(--border);
}

.invest-card-head {
  padding: 1rem 1.5rem;
  font-size: 14px;
  font-weight: 600;
  display: flex;
  align-items: center;
  gap: 8px;
}

.invest-head-red   { background: var(--red-light);   color: var(--red); }
.invest-head-green { background: var(--green-light);  color: var(--green-dark); }

.invest-card-body { padding: 1.25rem 1.5rem; background: var(--white); }

.cost-item {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 10px 0;
  border-bottom: 1px solid var(--border);
  font-size: 14px;
}

.cost-item:last-child { border-bottom: none; }

.cost-label { color: var(--muted); }
.cost-val   { font-weight: 600; }
.cost-red   { color: var(--red); }
.cost-green { color: var(--green); }

.cost-total {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 14px 1.5rem;
  font-weight: 700;
  font-size: 16px;
}

.cost-total-red   { background: var(--red-light);   color: var(--red); }
.cost-total-green { background: var(--green-light);  color: var(--green); }

/* Badge de economia */
.savings-badge {
  background: var(--green);
  color: var(--white);
  text-align: center;
  padding: 1.25rem 1.5rem;
  border-radius: var(--radius);
  margin-top: 1.5rem;
  font-size: 17px;
  font-weight: 600;
}

.savings-badge span {
  font-family: var(--font-display);
  font-size: 28px;
  font-weight: 800;
  display: block;
  margin-top: 4px;
}

/* ── SHOWCASE (TILES) ── */
.mockup-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(130px, 1fr));
  gap: 10px;
  margin-top: 2.5rem;
}

.mockup-tile {
  border-radius: 12px;
  aspect-ratio: 1;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 8px;
  border: 1px solid rgba(0,0,0,.06);
  overflow: hidden;
  position: relative;
}

.tile-green  { background: linear-gradient(145deg, #eff6ff, #bdd4f8); }
.tile-amber  { background: linear-gradient(145deg, #fff8eb, #fde4a2); }
.tile-coral  { background: linear-gradient(145deg, #fff1ee, #f9c5bb); }
.tile-blue   { background: linear-gradient(145deg, #eff6ff, #c0d8f7); }
.tile-purple { background: linear-gradient(145deg, #f3eeff, #ddc8f5); }
.tile-teal   { background: linear-gradient(145deg, #ecfeff, #b2e4ed); }

.tile-figure {
  width: 52px;
  height: 70px;
  border-radius: 6px;
}

.tile-green  .tile-figure { background: var(--green-mid); }
.tile-amber  .tile-figure { background: var(--amber); }
.tile-coral  .tile-figure { background: var(--coral); }
.tile-blue   .tile-figure { background: var(--blue); }
.tile-purple .tile-figure { background: var(--purple); }
.tile-teal   .tile-figure { background: var(--teal); }

.tile-figure::after {
  content: '';
  display: block;
  margin: 18px auto 0;
  width: 60%;
  height: 28%;
  background: rgba(255, 255, 255, .35);
  border-radius: 3px;
}

.tile-label {
  font-size: 11px;
  font-weight: 700;
  letter-spacing: .05em;
  text-transform: uppercase;
  color: var(--muted);
}

/* ── PÚBLICO ALVO ── */
.audience-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
  gap: 1rem;
  margin-top: 2.5rem;
}

.audience-card {
  background: rgba(255, 255, 255, .06);
  border: 1px solid rgba(255, 255, 255, .1);
  border-radius: var(--radius);
  padding: 1.25rem;
  transition: background .15s;
}

.audience-card:hover {
  background: rgba(255, 255, 255, .1);
}

.audience-icon {
  font-size: 28px;
  margin-bottom: .75rem;
  display: block;
}

.audience-card h3 {
  font-size: 15px;
  font-weight: 600;
  color: var(--white);
  margin-bottom: .4rem;
}

.audience-card p {
  font-size: 13px;
  color: rgba(255, 255, 255, .55);
  line-height: 1.6;
}


/* ── GALERIA DE EXEMPLOS ── */
.gallery-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));
  gap: 1.5rem;
  margin-top: 2.5rem;
}

.gallery-card {
  background: var(--white);
  border: 1px solid var(--border);
  border-radius: var(--radius);
  overflow: hidden;
}

.gallery-img-wrap {
  width: 100%;
  overflow: hidden;
  background: var(--surface);
  /* Reserva espaço proporcional antes de carregar — evita CLS */
  position: relative;
}

.gallery-img-wrap img {
  display: block;
  width: 100%;
  height: auto;
  object-fit: contain;   /* preserva proporção — sem esticar */
  object-position: center;
  max-height: 480px;
}

.gallery-card-info {
  padding: 1rem 1.25rem;
  display: flex;
  align-items: center;
  gap: 10px;
  flex-wrap: wrap;
}

.gallery-pack-badge {
  display: inline-block;
  font-size: 11px;
  font-weight: 700;
  padding: 4px 12px;
  border-radius: var(--radius-pill);
  letter-spacing: .04em;
}

.badge-green {
  background: var(--green-light);
  color: var(--green-dark);
}

.badge-purple {
  background: var(--purple-light);
  color: var(--purple);
}

.gallery-caption {
  font-size: 13px;
  color: var(--muted);
  line-height: 1.5;
}
.guarantee-section {
  background: var(--green);
  color: var(--white);
  padding: 3.5rem 1.5rem;
  text-align: center;
}

.guarantee-icon-wrap {
  width: 64px;
  height: 64px;
  background: rgba(255, 255, 255, .15);
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  margin: 0 auto 1.25rem;
}

.guarantee-section h2 {
  font-family: var(--font-display);
  font-size: clamp(1.8rem, 4vw, 2.6rem);
  font-weight: 900;
  letter-spacing: .03em;
  text-transform: uppercase;
  margin-bottom: .75rem;
}

.guarantee-section p {
  font-size: 16px;
  opacity: .85;
  max-width: 480px;
  margin: 0 auto;
  line-height: 1.7;
}