/* Motion graphics en SVG: piezas reutilizables + las secciones que las usan */

.mg { display: block; width: 100%; height: auto; color: var(--accent); overflow: visible; }
.mg .st { fill: none; stroke: currentColor; stroke-width: 3; stroke-linecap: round; stroke-linejoin: round; }
.mg .thin { stroke-width: 1.5; }
.mg .dim { stroke: rgba(255, 255, 255, .22); }
.mg .soft { fill: currentColor; opacity: .14; }
.mg .solid { fill: currentColor; }
.mg .white { color: var(--text); }
.mg text { fill: var(--text); font: 500 15px Outfit, system-ui, sans-serif; letter-spacing: .02em; }
.mg text.sub { fill: var(--muted); font-size: 12px; font-weight: 400; }
.mg .box { transform-box: fill-box; transform-origin: center; }

.mg .draw { stroke-dasharray: 1; animation: mg-draw 5s cubic-bezier(.16, 1, .3, 1) infinite; }
.mg .spin { animation: mg-spin 26s linear infinite; }
.mg .spin-r { animation: mg-spin 26s linear infinite reverse; }
.mg .spin-fast { animation-duration: 12s; }
.mg .pop { animation: mg-pop 5s cubic-bezier(.16, 1, .3, 1) infinite; }
.mg .rise { animation: mg-rise 3s ease-in infinite; }
.mg .pulse { animation: mg-pulse 3.2s ease-out infinite; }
.mg .blink { animation: mg-blink 4.5s ease-in-out infinite; }
.mg .flip { animation: mg-flip 7s ease-in-out infinite; }
.mg .dash { stroke-dasharray: 5 9; animation: mg-dash 1.1s linear infinite; }
.mg .sway { animation: mg-sway 5s ease-in-out infinite; transform-origin: 50% 100%; }
.mg .d1 { animation-delay: .5s; } .mg .d2 { animation-delay: 1s; } .mg .d3 { animation-delay: 1.5s; }
.mg .d4 { animation-delay: 2s; } .mg .d5 { animation-delay: 2.5s; } .mg .d6 { animation-delay: 3s; }

@keyframes mg-draw { 0% { stroke-dashoffset: 1; opacity: 1; } 38%, 86% { stroke-dashoffset: 0; opacity: 1; } 100% { stroke-dashoffset: 0; opacity: 0; } }
@keyframes mg-spin { to { transform: rotate(360deg); } }
@keyframes mg-pop { 0% { transform: scale(0); opacity: 0; } 26%, 86% { transform: scale(1); opacity: 1; } 100% { transform: scale(1); opacity: 0; } }
@keyframes mg-rise { 0% { transform: translateY(8px); opacity: 0; } 30% { opacity: 1; } 100% { transform: translateY(-34px); opacity: 0; } }
@keyframes mg-pulse { 0% { transform: scale(.25); opacity: .9; } 100% { transform: scale(1); opacity: 0; } }
@keyframes mg-blink { 0%, 100% { opacity: .2; } 50% { opacity: 1; } }
@keyframes mg-flip { 0%, 100% { transform: scaleX(1); } 50% { transform: scaleX(.08); } }
@keyframes mg-dash { to { stroke-dashoffset: -14; } }
@keyframes mg-sway { 0%, 100% { transform: rotate(-4deg); } 50% { transform: rotate(4deg); } }

/* Proceso: cuatro graficos unidos por una linea que fluye */
.flow h2 { font-size: clamp(2rem, 6.4vw, 3.6rem); max-width: 16ch; margin-bottom: 2.2rem; }
.flow__row { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: 1fr 1fr; gap: .8rem; position: relative; }
.flow__step { position: relative; background: var(--surface); border: 1px solid var(--line); border-radius: var(--r); padding: 1.2rem 1rem 1.1rem; text-align: center; transition: border-color .4s; }
.flow__step:hover { border-color: color-mix(in srgb, var(--accent) 55%, transparent); }
.flow__step .mg { max-width: 190px; margin-inline: auto; }
.flow__step h3 { font-size: 1.15rem; font-weight: 500; margin-top: .6rem; }

/* Historia: ruta animada del origen a Florida */
.route { margin-top: 1.6rem; border: 1px solid var(--line); border-radius: var(--r); background: rgba(11, 12, 9, .55); padding: .6rem; }
.route__dots { fill: rgba(255, 255, 255, .13); }
.route .mg text { font-size: 24px; }
@media (min-width: 900px) { .route .mg text { font-size: 17px; } }
.story__lead { color: var(--muted); font-size: 1.05rem; max-width: 46ch; }

/* Mision y vision: grafico + una linea */
.tile--mg { grid-column: 1 / -1; display: grid; gap: 1rem; align-items: center; }
.tile--mg .mg { max-width: 260px; margin-inline: auto; }
.tile--mg h3 { font-size: clamp(1.8rem, 6vw, 2.6rem); margin-bottom: .5rem; }
.tile--mg p { color: var(--muted); max-width: 30ch; }
.tile__tags { display: flex; flex-wrap: wrap; gap: .4rem; margin-top: 1rem; padding: 0; list-style: none; }
.tile__tags li { font-size: .82rem; padding: .35rem .7rem; border: 1px solid var(--line); border-radius: 999px; color: #d6d9cb; }

@media (min-width: 900px) {
  .flow__row { grid-template-columns: repeat(4, 1fr); gap: 1.1rem; }
  .flow__row::before { content: ""; position: absolute; left: 6%; right: 6%; top: 42%; height: 2px; background: repeating-linear-gradient(90deg, var(--accent) 0 8px, transparent 8px 20px); background-size: 20px 2px; opacity: .45; animation: flow-line 1s linear infinite; }
  .flow__step { background: var(--surface); padding: 1.8rem 1.4rem 1.5rem; }
  .flow__step h3 { font-size: 1.35rem; }
  .tile--mg { grid-column: span 6; grid-template-columns: 240px 1fr; gap: 1.5rem; }
}
@keyframes flow-line { to { background-position: 20px 0; } }

/* Piezas extra */
.mg .hop { animation: mg-hop 2.6s ease-in-out infinite; }
.mg .pick { animation: mg-pick 6s cubic-bezier(.7, 0, .2, 1) infinite; }
@keyframes mg-hop { 0%, 100% { transform: translateY(0); } 50% { transform: translateY(-9px); } }
@keyframes mg-pick { 0%, 26% { transform: translateY(0); } 34%, 60% { transform: translateY(36px); } 68%, 94% { transform: translateY(72px); } 100% { transform: translateY(0); } }

/* Catalogo: abanico de bolsas en la cabecera */
.cat-head__grid { display: grid; gap: 1rem; }
.fan { position: relative; height: 210px; margin-top: .5rem; }
.fan img { position: absolute; left: 50%; bottom: 0; width: 104px; margin-left: -52px; transform-origin: 50% 135%; transform: rotate(var(--a)); filter: drop-shadow(0 18px 18px rgba(0, 0, 0, .6)); animation: fan-in 1.3s cubic-bezier(.16, 1, .3, 1) both, fan-bob 5s ease-in-out infinite; animation-delay: calc(var(--i) * 90ms), calc(1.5s + var(--i) * 200ms); }
@keyframes fan-in { from { transform: rotate(0deg) scale(.7); opacity: 0; } to { transform: rotate(var(--a)) scale(1); opacity: 1; } }
@keyframes fan-bob { 0%, 100% { transform: rotate(var(--a)) translateY(0); } 50% { transform: rotate(var(--a)) translateY(-9px); } }

/* Empleos: como postular en tres graficos */
.apply { padding: 2.5rem 0 0; }
.flow__row--3 { grid-template-columns: repeat(3, 1fr); gap: .6rem; }
.flow__row--3 .flow__step { padding: .9rem .5rem .8rem; }
.flow__row--3 .flow__step h3 { font-size: .92rem; line-height: 1.25; }

/* Contacto: pin animado */
.split__mg { max-width: 300px; margin-top: 1.6rem; border: 1px solid rgba(255, 255, 255, .14); border-radius: var(--r); background: rgba(11, 12, 9, .5); padding: .5rem; }
.split__mg .mg text { font-size: 15px; }

@media (min-width: 900px) {
  .cat-head__grid { grid-template-columns: 1fr 1fr; align-items: end; gap: 3rem; }
  .fan { height: 300px; margin: 0; }
  .fan img { width: 150px; margin-left: -75px; }
  .flow__row--3 { gap: 1.1rem; }
  .flow__row--3::before { left: 10%; right: 10%; }
  .flow__row--3 .flow__step { padding: 1.8rem 1.4rem 1.5rem; }
  .flow__row--3 .flow__step h3 { font-size: 1.25rem; }
}

@media (prefers-reduced-motion: reduce) {
  .mg *, .flow__row::before { animation: none !important; }
  .fan img { animation: none; }
  .mg .draw { stroke-dasharray: none; }
  .mg .pulse { opacity: .3; }
}