/* Servicios Menetan — grid.css — Contenedores y layout base */

.container {
  width: 100%;
  max-width: var(--container-max);
  margin-inline: auto;
  padding-inline: var(--container-pad);
}

.section {
  padding-block: var(--space-20);
}

.section--white  { background-color: var(--color-white); }
.section--light  { background-color: var(--color-gray-50); }
.section--navy   { background-color: var(--color-navy); }
.section--alert  { background-color: var(--color-navy-dark); }

/* Override: sección alert con fondo claro estilo Fintoc */
#por-que-aparece {
  background-color: var(--color-gray-50);
  border-top: 1px solid var(--color-gray-100);
  border-bottom: 1px solid var(--color-gray-100);
}

#por-que-aparece .section-badge--gold {
  background-color: var(--color-gold-pale);
  color: var(--color-gold);
}

#por-que-aparece .section-title--white {
  color: var(--text-primary);
}

#por-que-aparece .section-subtitle--light {
  color: var(--text-muted);
}

#por-que-aparece .alert-section__lead {
  color: var(--text-body);
}

#por-que-aparece .alert-section__lead strong {
  color: var(--text-primary);
}

#por-que-aparece .alert-section__icon {
  background-color: var(--color-gold-pale);
  border-color: rgba(200, 146, 42, 0.30);
  color: var(--color-gold);
}

#por-que-aparece .alert-point p {
  color: var(--text-body);
}

#por-que-aparece .alert-point p strong {
  color: var(--text-primary);
}

#por-que-aparece .alert-point__check {
  background-color: var(--color-gold-pale);
  border-color: rgba(200, 146, 42, 0.35);
  color: var(--color-gold);
}

#por-que-aparece .alert-section__cta {
  border-top-color: var(--color-gray-200);
}

#por-que-aparece .alert-section__cta-text {
  color: var(--text-primary);
}

@media (max-width: 768px) {
  .section { padding-block: 3.5rem; }
  .section-header { margin-bottom: 2.5rem; }
  .section-title { letter-spacing: -0.02em; }
  .section-subtitle { font-size: 0.9rem; }
}

@media (max-width: 480px) {
  .section { padding-block: 2.5rem; }
  .container { padding-inline: 1rem; }
}
