/* Escenas de MDPD Logística (lg-). Salieron de los bocetos el 2026-09-29. */
/* ---------- Hero: el mapa y la calle (2026-09-29) ----------
   Dos ilustraciones que genera herramientas/hero-logistica.mjs. El mapa (hero-logistica-mapa.svg)
   cubre todo el fondo: la ciudad desde arriba, con las zonas, el local y los recorridos hasta los
   pines de los clientes; se apaga hacia el texto. La calle (hero-logistica-calle.svg) va abajo: la
   moto, la camioneta y el camión que pasan. */
.hero-logistica { padding-bottom: clamp(110px, 12vw, 190px); }
.hero-logistica::before {
    background:
        radial-gradient(36% 50% at 12% 18%, rgba(31, 184, 205, .40), transparent 68%),
        radial-gradient(32% 44% at 88% 14%, rgba(255, 22, 50, .30), transparent 70%),
        radial-gradient(34% 44% at 70% 80%, rgba(142, 117, 178, .34), transparent 72%);
    animation: lg-drift 10s ease-in-out infinite alternate;
}
.hero-logistica .svc-hero-fx { display: none; }
.mdpd-svc .lg-fondo-mapa {
    position: absolute; inset: 0; z-index: -2;
    width: 100%; height: 100%; max-width: none;
    object-fit: cover; object-position: 60% 50%;
    pointer-events: none; opacity: .62;
    -webkit-mask-image: linear-gradient(90deg, rgba(0, 0, 0, .28) 0 34%, #000 72%);
    mask-image: linear-gradient(90deg, rgba(0, 0, 0, .28) 0 34%, #000 72%);
}
.mdpd-svc .lg-fondo-calle {
    position: absolute; left: 0; right: 0; bottom: 0; z-index: -1;
    width: 100%; max-width: none; height: clamp(150px, 13.75vw, 220px);
    object-fit: cover; object-position: 50% 100%;
    pointer-events: none;
    -webkit-mask-image: linear-gradient(to top, #000 70%, transparent);
    mask-image: linear-gradient(to top, #000 70%, transparent);
}
@media (max-width: 880px) { .mdpd-svc .lg-fondo-mapa { opacity: .3; -webkit-mask-image: none; mask-image: none; } .hero-logistica { padding-bottom: 150px; } }
@keyframes lg-drift {
    from { transform: translate3d(-5%, -3%, 0) scale(1.04); }
    to   { transform: translate3d(6%, 4%, 0) scale(1.16); }
}

/* ---------- Escenas (rehechas el 2026-09-29) ----------
   Dibujadas directo para la caja de 305 × 190,6 (16:10): sus piezas no llevan el margen de 16 px de
   las escenas viejas (.es-libre). Los mapas usan los símbolos lg-calles (la ciudad) y lg-region (la
   costa de Mar del Plata a Miramar), definidos una vez al principio de la página. */
.esc.es-libre > * { margin: 0; }
.mdpd-svc .tq-rot { font-size: 6.5px; font-weight: 800; letter-spacing: .06em; text-transform: uppercase; color: #94A3B8; }
.lg-base { position: absolute; inset: 0; display: block; width: 100%; height: 100%; }
.lg-local { position: absolute; width: 18px; height: 18px; margin: -9px 0 0 -9px; display: grid; place-items: center; border-radius: 50%; background: #fff; color: #FF1632; box-shadow: 0 0 0 2px #FF1632, 0 4px 10px -2px rgba(15, 23, 42, .4); }
.lg-local svg { width: 10px; height: 10px; }
.lg-pin { position: absolute; width: 14px; height: 14px; margin: -16px 0 0 -7px; border-radius: 50% 50% 50% 0; transform: rotate(-45deg); box-shadow: 0 3px 6px rgba(15, 23, 42, .35); }
.lg-pin::after { content: ""; position: absolute; inset: 4px; border-radius: 50%; background: #fff; }
.lg-pin.es-cae { animation: lg-cae 6s ease-out infinite; }
@keyframes lg-cae { 0%, 14% { translate: 0 -34px; opacity: 0; } 26% { translate: 0 0; opacity: 1; } 31% { translate: 0 -5px; } 36%, 100% { translate: 0 0; opacity: 1; } }
.lg-ping { position: absolute; width: 10px; height: 10px; margin: -5px 0 0 -5px; border-radius: 50%; border: 2px solid var(--c); animation: lg-ping 2s ease-out infinite; }
@keyframes lg-ping { from { transform: scale(.4); opacity: 1; } to { transform: scale(5); opacity: 0; } }
.lg-campo { display: flex; align-items: center; gap: 4px; height: 16px; padding: 0 6px; border-radius: 5px; border: 1px solid #E2E8EE; font-size: 7.5px; font-weight: 700; white-space: nowrap; }
.lg-campo svg { width: 8px; height: 8px; flex: none; }
.lg-campo.es-foco { border-color: var(--c); box-shadow: 0 0 0 2px color-mix(in srgb, var(--c) 22%, transparent); }
.lg-campo u { display: inline-block; width: 1px; height: 9px; margin-left: 1px; background: #1E293B; animation: lg-cursor 1s steps(1) infinite; }
@keyframes lg-cursor { 50% { opacity: 0; } }

/* El cliente ve si llegan: el buscador, la zona y el carrito */
.lg-buscar { left: 10px; top: 10px; width: 136px; padding: 5px; display: grid; gap: 2px; }
.lg-sug { display: flex; align-items: center; gap: 4px; padding: 3px 5px; border-radius: 4px; font-size: 6.5px; color: #475569; white-space: nowrap; }
.lg-sug i { width: 5px; height: 5px; flex: none; border-radius: 50% 50% 50% 0; transform: rotate(-45deg); background: #94A3B8; }
.lg-sug b { font-weight: 800; color: #1E293B; }
.lg-sug.es-sel { background: #F2F5F7; }
.lg-sug.es-sel i { background: var(--c); }
.lg-tarjeta { left: 10px; bottom: 10px; width: 162px; white-space: nowrap; padding: 6px 8px; display: grid; grid-template-columns: auto 1fr auto; gap: 6px; align-items: center; animation: lg-sube 6s ease-out infinite; }
@keyframes lg-sube { 0%, 30% { opacity: 0; translate: 0 8px; } 40%, 100% { opacity: 1; translate: 0 0; } }
.lg-tarjeta b { display: block; font-size: 7.5px; font-weight: 800; }
.lg-tarjeta small { display: block; font-size: 6px; font-weight: 600; color: #64748B; }
.lg-tarjeta strong { font-size: 11px; font-weight: 800; color: var(--c); }
.lg-carrito { right: 10px; bottom: 10px; width: 88px; padding: 6px 7px; display: grid; gap: 2px; font-size: 6.5px; }
.lg-carrito span { display: flex; justify-content: space-between; color: #64748B; font-weight: 600; }
.lg-carrito b { color: #1E293B; font-weight: 800; }
.lg-carrito .es-envio b { color: var(--c); animation: lg-sube 6s ease-out infinite; }
.lg-carrito .es-total { margin-top: 1px; padding-top: 3px; border-top: 1px solid #EEF2F6; color: #1E293B; font-weight: 800; }

/* Zonas por barrio: los barrios se pintan de a uno */
.lg-barrio { fill: var(--z); fill-opacity: 0; animation: lg-pinta 7s infinite both; animation-delay: var(--d); }
@keyframes lg-pinta { 0% { fill-opacity: 0; } 6%, 70% { fill-opacity: .42; } 78%, 100% { fill-opacity: 0; } }
.lg-cursor { position: absolute; left: 0; top: 0; width: 11px; height: 14px; animation: lg-recorre 7s infinite; }
@keyframes lg-recorre {
    0% { translate: 45px 38px; } 7% { translate: 118px 34px; } 14% { translate: 190px 36px; }
    21% { translate: 44px 98px; } 29% { translate: 118px 92px; } 36% { translate: 192px 90px; }
    43% { translate: 48px 156px; } 50% { translate: 124px 154px; } 57%, 90% { translate: 198px 152px; } 100% { translate: 45px 38px; }
}
.lg-leyenda { right: 10px; top: 10px; width: 86px; padding: 6px 7px; display: grid; gap: 3px; }
.lg-leyenda > span:not(.tq-rot), .lg-zonas > span:not(.tq-rot) { display: grid; grid-template-columns: 7px 1fr auto; gap: 4px; align-items: center; font-size: 6.8px; font-weight: 700; }
.lg-leyenda i, .lg-zonas i { width: 7px; height: 7px; border-radius: 2px; }
.lg-leyenda b { font-weight: 800; }

/* Dibujadas a mano: el polígono que se traza, las herramientas y la etiqueta */
.lg-trazo { stroke-dasharray: 6 4; animation: lg-dibuja 3s linear infinite; }
@keyframes lg-dibuja { to { stroke-dashoffset: -20; } }
.lg-lapiz { position: absolute; left: 58px; top: 96px; width: 16px; height: 16px; animation: lg-lapiz 3s ease-in-out infinite alternate; }
@keyframes lg-lapiz { from { translate: 0 0; } to { translate: 14px -30px; } }
.lg-herr { left: 10px; top: 10px; padding: 3px; display: grid; gap: 2px; }
.lg-herr span { width: 16px; height: 16px; display: grid; place-items: center; border-radius: 4px; color: #64748B; }
.lg-herr span.es-on { background: var(--c); color: #fff; }
.lg-herr svg { width: 10px; height: 10px; }
.lg-etiqueta { left: 112px; top: 50px; display: flex; align-items: center; gap: 4px; padding: 3px 8px; border-radius: 99px; font-size: 7px; font-weight: 700; white-space: nowrap; }
.lg-etiqueta i { width: 7px; height: 7px; border-radius: 2px; }
.lg-etiqueta b { margin-left: 2px; font-weight: 800; color: var(--c); }

/* Pausar una zona */
.lg-pausa { position: absolute; width: 26px; height: 26px; margin: -13px 0 0 -13px; display: flex; gap: 3px; align-items: center; justify-content: center; border-radius: 50%; background: #fff; box-shadow: 0 6px 14px -4px rgba(15, 23, 42, .4); }
.lg-pausa i { width: 4px; height: 10px; border-radius: 1px; background: #64748B; }
.lg-zonas { right: 10px; top: 10px; width: 92px; padding: 6px 7px; display: grid; gap: 4px; }
.lg-switch { position: relative; width: 16px; height: 9px; border-radius: 99px; background: #CBD5E1; }
.lg-switch::after { content: ""; position: absolute; left: 1px; top: 1px; width: 7px; height: 7px; border-radius: 50%; background: #fff; transition: left .2s; }
.lg-switch.es-on { background: #0B8A63; }
.lg-switch.es-on::after { left: 8px; }
.lg-aviso { left: 10px; bottom: 10px; width: 172px; padding: 6px 8px; display: grid; gap: 2px; font-size: 6.5px; color: #475569; box-shadow: inset 2px 0 0 #F59E0B, 0 14px 28px -10px rgba(15, 23, 42, .35); }
.lg-aviso b { font-size: 7.5px; font-weight: 800; color: #B45309; }

/* Horarios: la grilla de la semana y el estado en la web */
.lg-horario { left: 12px; top: 14px; width: 176px; padding: 7px 8px 8px; display: grid; gap: 4px; }
.lg-horario-cab { display: flex; justify-content: space-between; align-items: center; font-size: 8px; }
.lg-horario-cab b { font-weight: 800; }
.lg-horario-cab span { padding: 2px 6px; border-radius: 99px; border: 1px solid color-mix(in srgb, var(--c) 40%, transparent); color: var(--c); font-size: 6px; font-weight: 800; }
.lg-escala { display: grid; grid-template-columns: repeat(5, 1fr); margin-left: 26px; font-size: 5.5px; font-weight: 700; color: #94A3B8; }
.lg-escala i { font-style: normal; }
.lg-dia { display: grid; grid-template-columns: 22px 1fr; gap: 4px; align-items: center; }
.lg-dia b { font-size: 6.5px; font-weight: 800; }
.lg-dia > span { position: relative; height: 8px; border-radius: 3px; background: #F2F5F7; }
.lg-dia u { position: absolute; top: 0; bottom: 0; left: var(--a); right: calc(100% - var(--b)); border-radius: 3px; background: var(--c); opacity: .8; }
.lg-dia.es-hoy b { color: var(--c); }
.lg-dia.es-hoy > span { box-shadow: 0 0 0 1px var(--c); }
.lg-web { right: 10px; bottom: 16px; width: 104px; padding: 0 0 7px; display: grid; gap: 6px; justify-items: center; overflow: hidden; }
.lg-web-cab { width: 100%; padding: 5px 6px; background: #1E293B; color: #fff; font-size: 6.5px; font-weight: 800; text-align: center; white-space: nowrap; }
.lg-estado { display: grid; }
.lg-estado > span { grid-area: 1 / 1; padding: 3px 8px; border-radius: 99px; color: #fff; font-size: 6.3px; font-weight: 800; white-space: nowrap; text-align: center; }
.lg-estado .es-a { background: #0B8A63; animation: lg-a 8s infinite; }
.lg-estado .es-b { background: #D97706; opacity: 0; animation: lg-b 8s infinite; }
@keyframes lg-a { 0%, 45% { opacity: 1; } 50%, 95% { opacity: 0; } 100% { opacity: 1; } }
@keyframes lg-b { 0%, 45% { opacity: 0; } 50%, 95% { opacity: 1; } 100% { opacity: 0; } }

/* Avisar la demora: la web del local y el selector del escritorio */
.lg-sitio { left: 12px; top: 12px; width: 200px; overflow: hidden; display: grid; }
.lg-sitio-cab { display: flex; align-items: center; gap: 4px; padding: 6px 8px; border-bottom: 1px solid #EEF2F6; }
.lg-logo { display: flex; align-items: center; gap: 3px; margin-right: auto; font-size: 7.5px; font-weight: 800; white-space: nowrap; }
.lg-logo::before { content: ""; width: 8px; height: 8px; border-radius: 50%; background: radial-gradient(circle at 50% 65%, #FF7A8A 0 40%, #FF1632 42%); }
.lg-sitio-cab i { width: 10px; height: 2.5px; border-radius: 1px; background: #CBD5E1; }
.lg-cartel { display: flex; align-items: center; gap: 5px; padding: 5px 8px; background: #FEF3C7; color: #92400E; font-size: 6.8px; font-weight: 700; white-space: nowrap; }
.lg-cartel svg { width: 14px; height: 10px; flex: none; color: #D97706; animation: lg-moto 1.2s ease-in-out infinite alternate; }
@keyframes lg-moto { to { translate: 2px 0; } }
.lg-cartel b { font-weight: 800; }
.lg-prods { display: grid; grid-template-columns: repeat(3, 1fr); gap: 5px; padding: 7px 8px 8px; }
.lg-prods span { display: grid; justify-items: center; gap: 2px; padding: 6px 3px 5px; border-radius: 6px; border: 1px solid #EEF2F6; background: #F8FAFC; }
.lg-prods svg { width: 26px; height: 26px; }
.lg-prods b { font-size: 6.5px; font-weight: 800; }
.lg-prods em { font-style: normal; font-size: 6.3px; font-weight: 800; color: var(--c); }
.lg-demora { right: 10px; top: 44px; width: 92px; padding: 6px 7px; display: grid; gap: 4px; }
.lg-demora div { display: grid; gap: 3px; }
.lg-demora div span { padding: 3px 6px; border-radius: 5px; border: 1px solid #E2E8EE; font-size: 6.5px; font-weight: 700; }
.lg-demora div span.es-on { border-color: #D97706; background: #FEF3C7; color: #92400E; font-weight: 800; box-shadow: 0 0 0 2px rgba(217, 119, 6, .18); }

/* Localidades: la región, el selector y el envío */
.lg-camion-mini { position: absolute; inset: 0; width: 100%; height: 100%; }
.lg-select { right: 12px; top: 40px; width: 118px; padding: 6px; display: grid; gap: 2px; }
.lg-select .tq-rot { margin-bottom: 1px; }
.lg-op { display: flex; justify-content: space-between; padding: 3px 5px; border-radius: 4px; font-size: 7px; font-weight: 700; white-space: nowrap; }
.lg-op b { font-weight: 800; color: #475569; }
.lg-op.es-sel { background: color-mix(in srgb, var(--c) 14%, #fff); color: #0E7490; }
.lg-op.es-sel b { color: #0E7490; }
.lg-envio { right: 12px; bottom: 12px; width: 152px; padding: 6px 8px; display: grid; grid-template-columns: auto 1fr auto; gap: 6px; align-items: center; }
.lg-envio svg { width: 22px; height: 15px; color: var(--c); }
.lg-envio b { display: block; font-size: 7px; font-weight: 800; white-space: nowrap; }
.lg-envio small { display: block; font-size: 6px; font-weight: 600; color: #64748B; }
.lg-envio strong { white-space: nowrap;  font-size: 10.5px; font-weight: 800; color: #0E7490; }

/* Reglas por producto */
.lg-reglas { left: 12px; top: 14px; width: 200px; padding: 7px 8px; display: grid; gap: 5px; }
.lg-regla { display: grid; grid-template-columns: 64px 18px 1fr; align-items: center; border-radius: 5px; }
.lg-regla:nth-child(2) { animation: lg-regla 6s ease-in-out infinite; }
@keyframes lg-regla { 0%, 30%, 100% { box-shadow: none; } 40%, 85% { box-shadow: 0 0 0 2px color-mix(in srgb, var(--c) 40%, transparent); } }
.lg-clase { padding: 3px 6px; border-radius: 4px; background: #F2F5F7; font-size: 6.8px; font-weight: 800; white-space: nowrap; }
.lg-regla i { position: relative; height: 1.5px; margin: 0 3px; background: #CBD5E1; }
.lg-regla i::after { content: ""; position: absolute; right: -1px; top: -2.5px; border: 3.2px solid transparent; border-left: 4px solid #CBD5E1; border-right: 0; }
.lg-metodo { display: flex; align-items: center; gap: 4px; padding: 3px 6px; border-radius: 4px; border: 1px solid #E2E8EE; font-size: 6.8px; font-weight: 700; white-space: nowrap; }
.lg-metodo svg { width: 14px; height: 10px; flex: none; color: var(--c); }
.lg-metodo.es-otro svg { color: #F59E0B; }
.lg-metodo.es-retiro svg { width: 9px; height: 9px; color: #FF1632; }
.lg-resultado { right: 12px; bottom: 14px; width: 112px; padding: 6px 8px; display: grid; gap: 3px; animation: lg-sube 6s ease-out infinite; }
.lg-prod { font-size: 6.8px; font-weight: 700; white-space: nowrap; }
.lg-ok { display: flex; align-items: center; gap: 4px; font-size: 7px; font-weight: 800; color: #0B8A63; }

/* La planilla de localidades */
.lg-hoja { left: 12px; top: 14px; width: 176px; overflow: hidden; }
.lg-hoja-cab { display: flex; align-items: center; gap: 4px; padding: 5px 7px; background: #107C41; color: #fff; font-size: 7px; font-weight: 800; }
.lg-hoja-cab svg { width: 9px; height: 9px; }
.lg-tabla { display: grid; grid-template-columns: 1fr auto; }
.lg-tabla span { padding: 3px 7px; border-bottom: 1px solid #EEF2F6; font-size: 6.8px; font-weight: 600; white-space: nowrap; }
.lg-tabla .es-h { background: #F8FAFC; color: #64748B; font-size: 5.8px; font-weight: 800; letter-spacing: .05em; text-transform: uppercase; }
.lg-tabla .es-p { text-align: right; font-weight: 800; }
.lg-import { right: 12px; bottom: 16px; width: 120px; padding: 6px 8px; display: grid; grid-template-columns: auto 1fr; gap: 3px 6px; align-items: center; }
.lg-import b { display: block; font-size: 7.5px; font-weight: 800; }
.lg-import small { display: block; font-size: 6px; font-weight: 600; color: #64748B; }
.lg-import u { grid-column: 1 / -1; position: relative; display: block; height: 4px; border-radius: 2px; background: #E2E8EE; overflow: hidden; }
.lg-import u::after { content: ""; position: absolute; inset: 0; border-radius: 2px; background: #0B8A63; transform-origin: left; animation: lg-carga 5s ease-in-out infinite; }
@keyframes lg-carga { 0% { transform: scaleX(0); } 55%, 100% { transform: none; } }

/* Las ciudades con barrios cargados */
.lg-ciudades { display: flex; flex-wrap: wrap; gap: 8px; }
.lg-ciudades span { padding: 7px 14px; border-radius: 99px; border: 1px solid #E2E8EE; background: #fff; font-weight: 700; font-size: 15px; }

/* Los rubros que ya lo usan (Emir, 2026-09-29): cada uno con su urgencia, su producto, su vehículo y
   su distancia. Sin nombres de clientes. */
.lg-rubros-wrap { margin-top: 48px; }
.mdpd-svc .lg-rubros-tit { margin: 0 0 18px; font-size: 20px; font-weight: 300; }
.lg-rubros-tit strong { font-weight: 800; }
.lg-rubros { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 16px; }
.lg-rubro { position: relative; display: grid; gap: 6px; align-content: start; padding: 18px 18px 16px; border: 1px solid #E2E8EE; border-radius: 12px; background: #fff; box-shadow: inset 0 3px 0 var(--c); }
.lg-rubro-ico { width: 40px; height: 40px; display: grid; place-items: center; margin-bottom: 4px; border-radius: 50%; background: color-mix(in srgb, var(--c) 12%, #fff); color: var(--c); }
.mdpd-svc .lg-rubro-ico svg { width: 26px; height: 26px; }
.mdpd-svc .lg-rubro h3 { margin: 0 0 4px; font-size: 18px; font-weight: 800; }
.lg-rubro > span { display: grid; gap: 1px; font-size: 15px; font-weight: 700; }
.lg-rubro > span i { font-style: normal; font-size: 11px; font-weight: 800; letter-spacing: .06em; text-transform: uppercase; color: #94A3B8; }
@media (max-width: 980px) { .lg-rubros { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (max-width: 560px) { .lg-rubros { grid-template-columns: minmax(0, 1fr); } }