/* /integraciones: la lista completa. Reusa el esqueleto de las páginas de
   funcionalidades (feature-*) y las cards de la sección de la home (int-*). */
.integ-hero { display: block; padding-bottom: 8px; }
.integ-hero .feature-lead { max-width: 640px; margin-top: 20px; }
.integ-group { padding-top: 40px; }
.integ-group-hd { display: flex; align-items: flex-end; justify-content: space-between; gap: 48px; }
.integ-group-hd h2 { font-size: clamp(24px, 2.6vw, 30px); }
.integ-group-hd p { max-width: 520px; color: #5f5d70; font-size: 16px; line-height: 1.55; }
.integ-grid.int-grid { margin-top: 26px; }
.feature-page .int-card { display: flex; flex-direction: column; margin: 0; background: #fff; }
.feature-page .int-card p { margin: 12px 0 0; }
.feature-page .int-card .int-freq { margin-top: auto; padding-top: 14px; }
/* Mismo tratamiento que la home: logos en blanco y negro. */
.feature-page .int-logo { filter: grayscale(1); }
.int-how { margin: 12px 0 0; padding-top: 12px; border-top: 1px solid #ecebf4; font: 400 13px/1.5 'Hanken Grotesk', sans-serif; color: #5f5d70; }
.int-how dt { display: inline; font-weight: 600; color: #0e0e16; }
.int-how dd { display: inline; margin: 0; }
.int-logo img.lg-taptap { height: 22px; }
.int-logo img.lg-ayres { height: 22px; }
.int-logo img.lg-hiopos { height: 15px; width: auto; }
/* Los originales oficiales de Payway y Maxirest son blancos; se adaptan al fondo claro
   igual que en la home (refinamiento.css lo hace sólo dentro de #integraciones). */
.feature-page .int-logo img.lg-payway { width: 100px; height: auto; filter: brightness(0); opacity: .65; }
.int-logo img.lg-maxirest { height: 24px; width: auto; filter: brightness(0); opacity: .8; }
.int-logo img.lg-glyph { height: 20px; }
.integ-otro { margin-top: 56px; padding: 28px 32px; display: flex; align-items: center; justify-content: space-between; gap: 24px; background: #fff; border: 1px solid #e5e3ee; border-radius: 12px; }
.integ-otro h2 { font-size: 22px; }
.integ-otro p { margin-top: 8px; color: #5f5d70; font-size: 15px; line-height: 1.55; max-width: 560px; }
.feature-page .integ-otro .feature-text-link { margin: 0 -12px 0 0; white-space: nowrap; }
.feature-page .feature-closing { margin-top: 56px; }
@media (max-width: 980px) {
  .integ-grid.int-grid { grid-template-columns: repeat(2, 1fr); }
}
@media (max-width: 700px) {
  .integ-hero { padding-bottom: 0; }
  .integ-group { padding-top: 32px; }
  .integ-group-hd { display: block; }
  .integ-group-hd p { margin-top: 10px; font-size: 15px; }
  .integ-grid.int-grid { grid-template-columns: 1fr; margin-top: 20px; }
  .integ-otro { flex-direction: column; align-items: flex-start; margin-top: 40px; padding: 22px; }
  .feature-page .integ-otro .feature-text-link { margin-left: -12px; white-space: normal; }
  .feature-page .feature-closing { margin-top: 40px; }
}