.why-mesa { padding-block: 96px 48px; color: #0B2D5B; background: #f4f6f8; }
.why-label { margin: 0 0 24px; font-size: .875rem; font-weight: 600; letter-spacing: .1em; }
.why-mesa h2 { font-size: clamp(2rem, 3.89vw, 3.5rem); line-height: 1.12; letter-spacing: -.02em; max-width: 1050px; margin: 0 0 64px; }
.why-grid { display: grid; grid-template-columns: repeat(3,minmax(0,1fr)); gap: 48px 40px; list-style: none; padding: 0; margin: 0; }
.why-attribute { min-width: 0; border-top: 1px solid #c6ced8; padding-top: 24px; }
.why-attribute-heading { display: flex; align-items: baseline; gap: 16px; }
.why-number { flex-shrink: 0; font-size: .75rem; font-weight: 500; letter-spacing: .04em; color: #627387; }
.why-attribute h3 { font-size: 1rem; line-height: 1.5; font-weight: 600; margin: 0; }
.why-attribute p { font-size: .9375rem; font-weight: 400; color: #46556a; line-height: 1.8; margin: 20px 0 0; }
.why-next { display: flex; justify-content: space-between; gap: 16px; max-width: none; border-top: 1px solid #c6ced8; padding-top: 24px; margin: 64px 0 0; font-size: .75rem; font-weight: 600; }
@keyframes why-reveal { from { opacity: 0; transform: translateY(6px); } to { opacity: 1; transform: none; } }
.why-ready:not(.why-entered) h2, .why-ready:not(.why-entered) .why-attribute { opacity: 0; }
.why-entered h2 { animation: why-reveal 400ms both; }
.why-entered .why-attribute { animation: why-reveal 350ms calc(200ms + var(--attribute) * 110ms) both; }
@media (min-width: 75rem) { .why-grid { padding-right: 88px; } .section-rail[data-active='por-que-mesa'] ol::after { height: 194px; } }
@media (min-width: 48rem) and (max-width: 74.999rem) { .why-mesa { padding-top: 64px; } .why-grid { grid-template-columns: repeat(2,minmax(0,1fr)); gap: 40px 32px; } .why-mesa h2 { font-size: 2.5rem; margin-bottom: 48px; } }
@media (max-width: 47.999rem) { .why-mesa { padding-block: 64px 32px; } .why-grid { grid-template-columns: minmax(0,1fr); gap: 32px; } .why-mesa h2 { font-size: 2rem; margin-bottom: 40px; } .why-attribute { padding-top: 20px; } .why-attribute p { margin-top: 16px; } .why-next { margin-top: 40px; } }
@media (prefers-reduced-motion: reduce) { .why-ready h2, .why-ready .why-attribute { opacity: 1 !important; } }