/* B20 internal pages (como-funciona / para-*) – make headings prettier on mobile */

.hero__grid {
  display: grid;
  grid-template-columns: 1.15fr 0.85fr;
  gap: var(--spacing-3xl);
  align-items: center;
  padding: var(--spacing-3xl) 0;
}

/* Give the headline a bit more room on wide layouts */
@media (min-width: 1100px) {
  .hero__grid { grid-template-columns: 1.3fr 0.7fr; }
}

@media (max-width: 1024px) {
  .hero__grid { grid-template-columns: 1fr; }
}

/* Softer title sizing for long PT headlines */
.page .hero__title {
  /* Keep the title in a single line (responsive: font scales down instead of wrapping) */
  white-space: nowrap;
  font-size: clamp(1.7rem, 4.2vw, 3.1rem);
  line-height: 1.08;
}

.page .hero__logo {
  max-width: 320px;
}

/* Match cards/typography from company-site */
.h2 {
  font-family: var(--font-display);
  font-size: clamp(1.6rem, 3.2vw, 2.2rem);
  font-weight: 800;
  line-height: 1.2;
  margin-bottom: var(--spacing-md);
}

.h3 {
  font-family: var(--font-display);
  font-size: 1.2rem;
  font-weight: 800;
  margin-bottom: var(--spacing-sm);
}

.p { color: var(--color-gray-600); }

.cards {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));
  gap: var(--spacing-xl);
  margin-top: var(--spacing-lg);
}

.card {
  padding: var(--spacing-xl);
  background: var(--color-white);
  border: 2px solid var(--color-gray-100);
  border-radius: var(--radius-2xl);
  transition: all var(--transition-base);
  box-shadow: var(--shadow-sm);
}

.card:hover {
  border-color: var(--color-primary);
  box-shadow: var(--shadow-2xl);
  transform: translateY(-6px);
}

.note {
  margin-top: 12px;
  color: var(--color-gray-500);
  font-size: 0.95rem;
  line-height: 1.55;
}

.ctaRow{
  display:flex;
  gap: 12px;
  flex-wrap: wrap;
  margin-top: var(--spacing-xl);
}