.alcance { padding-block: 96px 48px; color: #0B2D5B; background: #fff; }
.alcance-label { margin: 0 0 24px; font-size: .875rem; font-weight: 600; letter-spacing: .1em; }
.alcance-grid { display: grid; grid-template-columns: minmax(0, 40fr) minmax(0, 60fr); gap: 48px; align-items: start; }
.alcance-copy h2 { font-size: var(--text-h2); margin: 0 0 32px; }
.alcance-copy p { margin: 0 0 24px; font-weight: 400; line-height: 1.8; }
.alcance-visual { min-width: 0; }
.alcance-visual-title { margin: 0 0 20px; font-size: .8125rem; font-weight: 600; letter-spacing: .09em; }
.alcance-photo { position: relative; display: block; overflow: hidden; }
.alcance-photo img { display: block; width: 100%; height: 310px; object-fit: cover; object-position: 58% 55%; }
/* Photo and geographic coverage share one editorial axis at every breakpoint. */
.alcance-photo::after { content: ''; position: absolute; inset: auto 0 0; height: 24px; background: linear-gradient(to bottom, transparent, #edf1f5); pointer-events: none; }
.alcance-map-system { position: relative; margin: 0; background: linear-gradient(to bottom, #edf1f5, #f7f9fb 62%, #fff); }
.alcance-map-system::before { content: ''; position: absolute; top: 0; left: 24px; width: 72px; height: 3px; background: linear-gradient(to right, #006847 0 33.333%, #fff 33.333% 66.667%, #CE1126 66.667%); pointer-events: none; }
.alcance-map { width: 100%; height: auto; display: block; }
.mexico-outline { fill: url(#mexico-corporate-fill); stroke: #96a7ba; stroke-width: .9; stroke-linejoin: round; filter: drop-shadow(0 2px 2px rgb(11 45 91 / 5%)); }
.port-dot { fill: #0B2D5B; stroke: #fff; stroke-width: 1.5; }
.port-halo { fill: #0B2D5B; opacity: 0; }
.map-port.is-active .port-halo { opacity: .09; }
.map-port.is-active .port-dot { fill: #006847; }
.map-port[data-map-port='manzanillo'] .port-dot { fill: #006847; }
.map-port[data-map-port='manzanillo'] .port-halo { fill: #006847; opacity: .1; }
.port-base-ring { fill: none; stroke: #006847; stroke-width: .9; opacity: .5; }
/* A single editorial legend identifies the unchanged geographic nodes. */
.port-controls { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 0 20px; margin: 0 24px; padding: 0 0 20px; }
.port-button { position: relative; display: grid; grid-template-columns: 12px minmax(0, 1fr); align-items: center; gap: 0 10px; width: 100%; min-height: 48px; padding: 10px 0; border: 0; border-bottom: 1px solid #dce3eb; color: #0B2D5B; background: transparent; text-align: left; font-size: .6875rem; font-weight: 600; cursor: pointer; }
.port-button::before { content: ''; width: 6px; height: 6px; border: 1px solid #71839a; border-radius: 50%; grid-column: 1; grid-row: 1; }
.port-button[aria-pressed='true']::before { background: #0B2D5B; border-color: #0B2D5B; }
.port-button--base { grid-column: 1 / -1; font-size: .8125rem; font-weight: 800; padding-block: 16px; margin-bottom: 8px; }
.port-button--base::before { width: 8px; height: 8px; background: #006847 !important; border-color: #006847 !important; box-shadow: 0 0 0 3px rgb(0 104 71 / 10%); }
.port-legend-secondary { grid-column: 1 / -1; margin: 8px 0 4px; font-size: .6875rem; font-weight: 500; color: #46556a; }
.port-legend-name { grid-column: 2; }
.port-legend-role { grid-column: 2; font-size: .75rem; font-weight: 400; margin-top: 3px; line-height: 1.6; }
.port-button[aria-pressed='true'] .port-legend-name { text-decoration: underline; text-decoration-thickness: 1px; text-underline-offset: 5px; }
.port-button:hover .port-legend-name { text-decoration: underline; text-underline-offset: 5px; }
.port-button:focus-visible { outline: 2px solid #0B2D5B; outline-offset: 2px; box-shadow: none; }
/* Selection/focus adds presence without changing node geometry or layout. */
.port-halo, .port-dot { transition: opacity 140ms ease, stroke-width 140ms ease; }
.port-button { transition: background-color 140ms ease, box-shadow 140ms ease; }
.map-port.is-active .port-halo, .map-port.is-focused .port-halo { opacity: .16; stroke: #0B2D5B; stroke-width: .6; }
.map-port.is-active .port-dot, .map-port.is-focused .port-dot { stroke-width: 2; }
.map-port[data-map-port='manzanillo'].is-active .port-halo, .map-port[data-map-port='manzanillo'].is-focused .port-halo { opacity: .17; stroke: #006847; }
.port-button[aria-pressed='true'], .port-button:focus { background-color: rgb(11 45 91 / 3%); box-shadow: inset 0 -1px 0 rgb(11 45 91 / 25%); }

.port-context { padding: 20px 0; margin-top: 20px; border-top: 1px solid #c6ced8; min-height: 136px; }
.port-context p { margin: 0; }
.port-context-name { font-size: .875rem; font-weight: 800; }
.port-context-type { font-size: .75rem; font-weight: 600; margin-top: 6px !important; }
.port-context-description { font-size: .8125rem; font-weight: 400; line-height: 1.7; margin-top: 6px !important; }
.port-context.is-changing { animation: alcance-detail 150ms ease; }
.alcance-presence { font-weight: 400; font-size: .875rem; line-height: 1.8; margin: 12px 0 24px; }
.alcance-principle { font-size: .75rem; font-weight: 600; line-height: 1.8; letter-spacing: .035em; margin: 0; }
.alcance-closing { max-width: none; margin: 64px 0 0; font-weight: 600; font-size: .875rem; letter-spacing: .035em; }
.alcance-next { display: flex; justify-content: space-between; gap: 16px; max-width: none; margin: 32px 0 0; border-top: 1px solid #c6ced8; padding-top: 24px; font-size: .75rem; font-weight: 600; }
@keyframes alcance-detail { from { opacity: .5; } to { opacity: 1; } }
@keyframes alcance-reveal { from { opacity: 0; } to { opacity: 1; } }
.alcance-ready:not(.alcance-entered) .alcance-photo, .alcance-ready:not(.alcance-entered) .mexico-outline, .alcance-ready:not(.alcance-entered) .map-port { opacity: 0; }
.alcance-entered .alcance-photo { animation: alcance-reveal 400ms both; }
.alcance-entered .mexico-outline { animation: alcance-reveal 450ms 350ms both; }
.alcance-entered .map-port { animation: alcance-reveal 450ms 800ms both; }
@media (min-width: 75rem) { .section-rail[data-active='alcance'] ol::after { height: 150px; } }
@media (max-width: 74.999rem) {
 .alcance { padding-top: 64px; } .alcance-grid { grid-template-columns: 1fr; gap: 32px; }
 .alcance-copy { max-width: 80ch; } .alcance-copy h2 { max-width: 22ch; }
 .alcance-photo img { height: 360px; }
}
@media (max-width: 47.999rem) {
 .alcance { padding-block: 64px 32px; } .alcance-copy h2 { font-size: 1.875rem; }
 .alcance-visual-title { font-size: .6875rem; } .alcance-photo img { height: 220px; object-position: 58% 55%; }
 .alcance-map-system::before { left: 16px; } .port-controls { grid-template-columns: repeat(2,minmax(0,1fr)); margin: 0 16px; padding-bottom: 16px; gap: 0 12px; }
 .port-button { font-size: .625rem; gap: 0 6px; }
 .port-button--base { font-size: .75rem; }
 .port-legend-role { font-size: .6875rem; }
 .port-context { min-height: 144px; margin-top: 16px; } .alcance-presence { font-size: .875rem; }
 .alcance-principle { font-size: .75rem; } .alcance-closing { margin-top: 40px; line-height: 1.8; }
}
@media (prefers-reduced-motion: reduce) { .alcance-ready .alcance-photo, .alcance-ready .mexico-outline, .alcance-ready .map-port { opacity: 1 !important; } }