/* CRASIS · mapa «Founded in Barcelona — expanded worldwide» */
[data-mapa] { --mm-acc: #EED202; --mm-tierra: rgba(244, 244, 242, .22); display: flex; flex-direction: column; gap: 28px; }
.mm-ruta { overflow: hidden; mask-image: linear-gradient(90deg, transparent, #000 8%, #000 92%, transparent); -webkit-mask-image: linear-gradient(90deg, transparent, #000 8%, #000 92%, transparent); }
.mm-ruta div { display: flex; gap: 14px; width: max-content; font: 700 13px/1 ui-monospace, Consolas, monospace; letter-spacing: .08em; text-transform: uppercase; color: rgba(244, 244, 242, .5); animation: mm-ruta 90s linear infinite; }
.mm-ruta span:nth-child(odd) { color: var(--mm-acc); }
.mm-ruta .mm-bcn { color: #111; background: var(--mm-acc); padding: 3px 7px; border-radius: 4px; }
@keyframes mm-ruta { to { transform: translateX(-50%); } }

.mm-mapa { position: relative; margin: 0; }
.mm-mapa svg { display: block; width: 100%; height: auto; overflow: visible; }
.mm-tierra { fill: none; stroke: var(--mm-tierra); stroke-width: 2.7; stroke-linecap: round; }
.mm-arco { fill: none; stroke: #fff; stroke-width: .9; stroke-opacity: .28; stroke-dasharray: 1; stroke-dashoffset: 1; }
/* Vuelos: un destello que recorre la ruta (cola con degradado gracias al trazo redondeado) */
.mm-vuelo { fill: none; stroke: var(--mm-acc); stroke-width: 2.2; stroke-linecap: round; stroke-dasharray: .045 2; stroke-dashoffset: .045; opacity: 0; filter: drop-shadow(0 0 3px rgba(238, 210, 2, .9)); }
[data-mapa].mm-on .mm-vuelo { animation: mm-volar var(--dur) linear var(--del) infinite; }
[data-mapa].mm-on .mm-vuelo.mm-rev { animation-name: mm-volar-rev; }
@keyframes mm-volar { 0% { stroke-dashoffset: .045; opacity: 0; } 8% { opacity: 1; } 92% { opacity: 1; } 100% { stroke-dashoffset: -1; opacity: 0; } }
@keyframes mm-volar-rev { 0% { stroke-dashoffset: -1; opacity: 0; } 8% { opacity: 1; } 92% { opacity: 1; } 100% { stroke-dashoffset: .045; opacity: 0; } }
.mm-avion { fill: #fff; stroke: var(--mm-acc); stroke-width: .6; opacity: 0; transition: opacity .6s 1.6s; filter: drop-shadow(0 0 2px rgba(0, 0, 0, .8)); }
[data-mapa].mm-on .mm-avion { opacity: .95; }
.mm-paises .mm-mas { background: var(--mm-acc); color: #111; border-color: var(--mm-acc); font-weight: 800; padding: 6px 12px; }
[data-mapa].mm-on .mm-arco { animation: mm-dibujar 1.4s cubic-bezier(.3, .7, .2, 1) forwards; animation-delay: calc(var(--i) * 45ms); }
@keyframes mm-dibujar { to { stroke-dashoffset: 0; } }
.mm-punto circle { fill: var(--mm-acc); stroke: #0e0e0e; stroke-width: 1.5; transform-box: fill-box; transform-origin: center; transform: scale(0); transition: transform .5s cubic-bezier(.2, 1.4, .4, 1); }
[data-mapa].mm-on .mm-punto circle { transform: scale(1); transition-delay: calc(400ms + var(--i) * 45ms); }
.mm-punto, .mm-base { cursor: pointer; outline: none; }
.mm-punto:hover circle, .mm-punto:focus-visible circle { fill: #fff; }
.mm-base circle:not(.mm-onda) { fill: #fff; stroke: var(--mm-acc); stroke-width: 3; }
.mm-onda { fill: none; stroke: var(--mm-acc); stroke-width: 2; transform-box: fill-box; transform-origin: center; animation: mm-onda 2.2s ease-out infinite; }
@keyframes mm-onda { from { transform: scale(1); opacity: .9; } to { transform: scale(4.5); opacity: 0; } }
.mm-base text { fill: #fff; font: 900 15px "Arial Black", Arial, sans-serif; paint-order: stroke; stroke: #0e0e0e; stroke-width: 4px; }
.mm-tip { position: absolute; transform: translate(-50%, calc(-100% - 12px)); background: var(--mm-acc); color: #111; padding: 7px 11px; border-radius: 8px; font-size: 13px; line-height: 1.3; white-space: nowrap; pointer-events: none; display: flex; flex-direction: column; box-shadow: 0 8px 24px rgba(0, 0, 0, .4); z-index: 2; }
.mm-tip[hidden] { display: none; }
.mm-tip span { font-size: 11.5px; opacity: .75; }

.mm-stats { display: grid; grid-template-columns: repeat(auto-fit, minmax(140px, 1fr)); gap: 12px; }
.mm-stat { border: 1px solid rgba(244, 244, 242, .12); border-radius: 12px; padding: 16px 18px; background: rgba(255, 255, 255, .02); }
.mm-stat b { display: block; font: 900 clamp(26px, 4vw, 40px)/1 "Arial Black", Arial, sans-serif; color: var(--mm-acc); letter-spacing: -.02em; font-variant-numeric: tabular-nums; }
.mm-stat span { display: block; margin-top: 8px; font-size: 12px; letter-spacing: .12em; text-transform: uppercase; color: rgba(244, 244, 242, .6); }
.mm-paises { list-style: none; margin: 0; padding: 0; display: flex; flex-wrap: wrap; gap: 8px; }
.mm-paises li { display: inline-flex; align-items: center; gap: 7px; padding: 6px 12px 6px 8px; border: 1px solid rgba(244, 244, 242, .14); border-radius: 999px; font-size: 13px; color: rgba(244, 244, 242, .85); }
.mm-flag { font-size: 16px; line-height: 1; }
@media (max-width: 640px) { .mm-base text { font-size: 22px; } .mm-tierra { stroke-width: 3.2; } }
@media (prefers-reduced-motion: reduce) {
  .mm-ruta div, .mm-onda { animation: none; }
  .mm-arco { stroke-dashoffset: 0; animation: none !important; }
  .mm-vuelo, .mm-avion { display: none; }
  .mm-punto circle { transform: scale(1); transition: none; }
}