/* Commercial network layout */
.commercial-page .commercial-map-frame { overflow: hidden; border: 1px solid #dce5d5; border-radius: 20px; background: #f6f8f4; box-shadow: 0 16px 48px rgba(24,60,53,.09); }
.commercial-page .commercial-map-frame iframe { display: block; width: 100%; height: clamp(480px,72vh,700px); border: 0; }
.commercial-page .commercial-map-help { margin: 18px 0 0; color: #607065; font-size: 14px; line-height: 1.6; }
.commercial-page .red-comercial-section > .grid { max-width: 1140px; width: calc(100% - 40px); margin: 0 auto; gap: 24px; }
.commercial-page .card-container { height: auto; padding: 0; perspective: none; }
.commercial-page .card-container .card { display: flex; flex-direction: column; height: 100%; background: #fff; border: 1px solid #e2e8dd; border-radius: 16px; padding: 24px; transform: none; }
.commercial-page .card-front, .commercial-page .card-back { position: static; height: auto; padding: 0; border: 0; background: transparent; transform: none; backface-visibility: visible; }
.commercial-page .card-front img { max-width: 100%; height: 90px; object-fit: contain; filter: none; margin-bottom: 20px; }
.commercial-page .card-front > p { display: none; }
.commercial-page .card-back { flex: 1; justify-content: flex-start; }
.commercial-page .card-back p { color: #607065; font-size: 14px; line-height: 1.6; }
.commercial-page .card-back strong { color: #183c35; font-size: 16px; }
.commercial-page .card-back .sitioweb-link { margin-top: auto; padding-top: 12px; }
.commercial-page .sitioweb-link a { display: inline-flex; align-items: center; min-height: 44px; color: #376b28; font-weight: 600; }
@media(max-width:575px) {
 .commercial-page .commercial-map-frame { border-radius: 14px; }
 .commercial-page .commercial-map-frame iframe { height: 520px; height: min(620px,76svh); min-height: 420px; }
 .commercial-page .red-comercial-section > .grid { grid-template-columns: 1fr; gap: 16px; }
}
.commercial-page .card-front img.distributor-logo-dark { background: #243324; border-radius: 8px; padding: 14px; }

.commercial-page .commercial-country-distributor { max-width: 440px; margin: 0 auto; }

/* Approved distributor roster */
.commercial-roster-grid { display: grid; grid-template-columns: repeat(4, minmax(0,1fr)); gap: 24px; }
.commercial-roster-grid:has(> :only-child) { grid-template-columns: minmax(0,440px); justify-content: center; }
.commercial-roster-logo { min-height: 110px; margin-bottom: 18px; }
/* Frame the original AGC artwork without its surrounding white margins. */
.commercial-page .commercial-roster-logo--agc { position: relative; width: 190px; max-width: 100%; height: 138px; min-height: 0; margin: 0 auto 18px; overflow: hidden; }
.commercial-page .commercial-roster-logo--agc img { position: absolute; top: 50%; left: 50%; width: 155%; max-width: none; height: auto; margin: 0; transform: translate(-50%, -50%); }
.commercial-page .commercial-roster-logo--petrotandil img.distributor-logo-dark { width: 100%; height: 110px; margin: 0; padding: 8px; background: #202d35; }
/* Enlarge Pelayo's mark while keeping the original artwork and proportions. */
.commercial-page .commercial-roster-logo--pelayo { position: relative; width: 100%; height: 140px; min-height: 140px; overflow: hidden; }
.commercial-page .commercial-roster-logo--pelayo img { position: absolute; top: 50%; left: 50%; width: 116%; max-width: none; height: auto; margin: 0; transform: translate(-50%, -50%); }
.commercial-roster-wordmark { display: flex; align-items: center; justify-content: center; min-height: 90px; width: 100%; padding: 12px; border-radius: 10px; background: #f4f7f1; color: #365b34; font-size: 18px; font-weight: 700; line-height: 1.4; overflow-wrap: anywhere; }
@media(max-width:1199px) { .commercial-roster-grid { grid-template-columns: repeat(3,minmax(0,1fr)); } }
@media(max-width:899px) { .commercial-roster-grid { grid-template-columns: repeat(2,minmax(0,1fr)); } }
@media(max-width:575px) { .commercial-roster-grid { grid-template-columns: 1fr; gap: 16px; } }

/* Map references and source-derived distributor counts. */
.commercial-map-legend { display: flex; flex-wrap: wrap; gap: 12px 24px; padding: 0; margin: 24px 0 0; list-style: none; }
.commercial-map-legend li { display: flex; align-items: center; gap: 8px; color: #183c35; font-size: 14px; }
.commercial-map-dot { flex: 0 0 30px; width: 30px; height: 32px; background-size: contain; background-repeat: no-repeat; }
.commercial-map-dot--cv { background-image: url('../mapa/icono-verde.png'); }
.commercial-map-dot--ts { background-image: url('../mapa/icono-azul.png'); }
.commercial-map-dot--tf { background-image: url('../mapa/icono-violeta.svg?v=2'); }
.commercial-roster-counts { margin: 16px 0; font-size: 13px; line-height: 1.5; }
.commercial-roster-counts > div { display: flex; justify-content: space-between; gap: 12px; padding: 7px 0; border-bottom: 1px solid #e2e8dd; }
.commercial-roster-counts dt { color: #607065; font-weight: 400; }
.commercial-roster-counts dd { margin: 0; color: #183c35; font-weight: 700; }