/* Colegios: the platform fee is added to one of the processing options.
   Figma NllteECe8sxq0smoF1R5I3 / 10736:366 supplies the grouped option surface. */
#precio {
  container: school-pricing / inline-size;
  --processing-divider: #EAE7E0;
}
#precio .pricing-intro > p { max-width: 900px; }
#precio .pricing-intro > p > strong { color: var(--design-ink); font-weight: 600; }
#precio .pricing-layout {
  grid-template-columns: minmax(240px, 1.1fr) 32px minmax(0, 3fr);
  align-items: stretch;
  gap: 16px;
}
#precio .pricing-layout > .price-card {
  align-self: start;
  min-height: 0;
  padding: 24px;
  gap: 24px;
}
#precio .price-card > .price,
#precio .price-card > ul,
#precio .price-card > a { margin: 0; }
#precio .pricing-plus {
  align-self: center;
  text-align: center;
  color: var(--design-ink);
  font-size: 40px;
  font-weight: 400;
  line-height: 1;
}
#precio .processing-options {
  display: flex;
  min-width: 0;
  flex-direction: column;
  padding: 2px;
  border-radius: 26px;
  background: var(--processing-divider);
}
#precio .processing-options-title {
  margin: 0;
  padding: 16px 20px;
  color: var(--design-ink);
  text-align: center;
  font-size: 14px;
  font-weight: 600;
  line-height: 1.35;
  text-transform: uppercase;
}
#precio .processing-options-note {
  margin: 0;
  padding: 12px 20px 14px;
  color: var(--muted);
  text-align: center;
  font-size: 12px;
  line-height: 1.45;
}
#precio .processing-options-grid {
  display: grid;
  flex: 1;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 2px;
}
#precio .processing-options .processor-card {
  min-width: 0;
  min-height: 0;
  padding: 28px 24px;
  border: 0;
  border-radius: 2px;
  background: var(--design-soft);
  box-shadow: none;
}
#precio .processing-options .processor-card:first-child { border-radius: 24px 2px 2px 24px; }
#precio .processing-options .processor-card:last-child { border-radius: 2px 24px 24px 2px; }
#precio .processor-head { padding-bottom: 20px; border: 0; }
#precio .processor-head h3 { font-size: 24px; line-height: 1.1; }
#precio .rate-table { margin-top: 0; }
#precio .rate-table-detailed .rate-row {
  min-height: 50px;
  grid-template-columns: minmax(0, 1fr) 50px 32px;
  gap: 8px;
  padding-block: 10px;
}
#precio .rate-table .rate-header { min-height: 38px; }
#precio .processor-card-reconciliation > p {
  margin: 0 0 8px;
  color: var(--muted);
  font-size: 14px;
  line-height: 1.55;
}
#precio .processor-card-reconciliation > .reconciliation-lead {
  margin-bottom: 20px;
  color: var(--design-ink);
  font-size: 18px;
  line-height: 1.3;
  letter-spacing: -.025em;
}

/* Stack the fee above the group when four readable columns no longer fit.
   These limits use the section's content width, including its existing inset. */
@container school-pricing (max-width: 1120px) {
  #precio .pricing-layout { grid-template-columns: minmax(0, 1fr); gap: 20px; }
  #precio .pricing-layout > .price-card {
    display: grid;
    grid-template-columns: minmax(220px, .8fr) minmax(0, 1.2fr);
    grid-template-rows: max-content max-content 1fr;
  }
  #precio .price-card-title { grid-column: 1; }
  #precio .price { grid-column: 1; }
  #precio .price-card > ul { grid-column: 2; grid-row: 1 / 4; align-content: start; }
  #precio .price-card > a { grid-column: 1; align-self: start; justify-self: start; }
  #precio .pricing-plus { font-size: 32px; }
}
@container school-pricing (max-width: 780px) {
  #precio .processing-options-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  #precio .processing-options .processor-card:first-child { border-radius: 24px 2px 2px 2px; }
  #precio .processing-options .processor-card:nth-child(2) { border-radius: 2px 24px 2px 2px; }
  #precio .processing-options .processor-card:last-child { grid-column: 1 / -1; border-radius: 2px 2px 24px 24px; }
}
@container school-pricing (max-width: 580px) {
  #precio .pricing-layout > .price-card { display: flex; padding: 24px; }
  #precio .price-card > a { align-self: stretch; }
  #precio .processing-options-grid { grid-template-columns: minmax(0, 1fr); }
  #precio .processing-options .processor-card { padding: 28px 24px; }
  #precio .processing-options .processor-card:first-child { border-radius: 24px 24px 2px 2px; }
  #precio .processing-options .processor-card:nth-child(2) { border-radius: 2px; }
  #precio .processing-options-title { padding-inline: 24px; }
}