/* Tiendas mayoristas (página 2165, rehecha el 2026-09-24).
   Motivo del hero y escenas propias. Las piezas comunes (.esc, .ui, los
   iconos) están en paginas-servicio.css. La tienda de ejemplo es una
   distribuidora inventada: «Distribuidora Atlántica». */

/* ---------- Hero: estanterías de depósito ---------- */
.hero-mayorista::before {
    background:
        radial-gradient(36% 50% at 12% 18%, rgba(142, 117, 178, .62), transparent 68%),
        radial-gradient(30% 42% at 44% 92%, rgba(255, 205, 87, .40), transparent 70%),
        radial-gradient(32% 44% at 88% 14%, rgba(31, 184, 205, .44), transparent 70%),
        radial-gradient(34% 44% at 92% 84%, rgba(255, 22, 50, .36), transparent 72%);
    animation: my-drift 10s ease-in-out infinite alternate;
}
/* Las cajas en los estantes, que corren despacio como en una cinta */
.hero-mayorista .svc-hero-fx {
    background-image:
        linear-gradient(rgba(255, 205, 87, .38), rgba(255, 205, 87, .38)),
        linear-gradient(rgba(142, 117, 178, .45), rgba(142, 117, 178, .45)),
        linear-gradient(rgba(255, 255, 255, .16), rgba(255, 255, 255, .16));
    background-size: 30px 22px, 22px 30px, 38px 16px;
    background-position: 0 calc(33% - 22px), 60px calc(66% - 30px), 120px calc(100% - 16px);
    background-repeat: repeat-x;
    -webkit-mask: linear-gradient(90deg, transparent 0 10%, #000 30% 70%, transparent 90% 100%);
    mask: linear-gradient(90deg, transparent 0 10%, #000 30% 70%, transparent 90% 100%);
    animation: my-cinta 18s linear infinite;
}
@keyframes my-cinta { from { background-position-x: 0, 60px, 120px; } to { background-position-x: 180px, 240px, 300px; } }
/* Los estantes y los parantes */
.hero-mayorista::after {
    background-image:
        repeating-linear-gradient(0deg, rgba(255, 255, 255, .13) 0 2px, transparent 2px 33.3%),
        repeating-linear-gradient(90deg, rgba(255, 255, 255, .09) 0 3px, transparent 3px 180px);
}
@keyframes my-drift {
    from { transform: translate3d(-5%, -3%, 0) scale(1.04); }
    to   { transform: translate3d(6%, 4%, 0) scale(1.18); }
}
@media (prefers-reduced-motion: reduce) { .hero-mayorista::before, .hero-mayorista .svc-hero-fx { animation: none; } }

/* La ficha del hero: el mismo producto visto por las tres personas */
.my-demo { display: grid; gap: 10px; }
.my-tabs { display: flex; gap: 6px; }
.my-tabs span { flex: 1; text-align: center; font-size: 12px; font-weight: 700; color: #94a3b8; padding: 6px 4px; border-radius: 99px; border: 1px solid rgba(255,255,255,.16); animation: my-tab 9s infinite; animation-delay: var(--d); white-space: nowrap; }
@keyframes my-tab { 0%, 31% { background: #fff; color: #1E293B; border-color: #fff; } 34%, 100% { background: transparent; color: #94a3b8; border-color: rgba(255,255,255,.16); } }
.my-ficha { background: #fff; border-radius: 12px; padding: 14px; display: grid; grid-template-columns: 92px 1fr; gap: 14px; color: #1E293B; box-shadow: 0 24px 48px -20px rgba(0,0,0,.6); }
.my-foto { height: 92px; border-radius: 8px; background: color-mix(in srgb, #8E75B2 14%, #fff); display: grid; place-items: center; }
.my-foto svg { width: 64px; height: 64px; }
.my-dato { display: grid; gap: 4px; align-content: start; }
.my-dato small { font-size: 11px; font-weight: 700; color: #64748b; }
.my-dato b { font-size: 15px; font-weight: 800; line-height: 1.25; }
.my-estados { position: relative; height: 50px; margin-top: 4px; }
.my-estado { position: absolute; inset: 0; display: grid; align-content: center; gap: 6px; opacity: 0; animation: my-estado 9s infinite; animation-delay: var(--d); }
@keyframes my-estado { 0%, 31% { opacity: 1; } 34%, 100% { opacity: 0; } }
.my-estado .my-btn { justify-self: start; font-size: 12px; font-weight: 800; border-radius: 6px; padding: 7px 12px; }
.my-btn.es-gris { background: #F2F5F7; color: #475569; display: flex; gap: 5px; align-items: center; }
.my-btn.es-gris svg { width: 11px; height: 11px; }
.my-btn.es-color { background: #8E75B2; color: #fff; }
.my-pend { font-size: 12px; font-weight: 700; color: #92400E; background: #FEF3C7; border-radius: 6px; padding: 7px 10px; line-height: 1.35; }
.my-precio { font-size: 20px; font-weight: 800; line-height: 1; }
.my-precio small { font-size: 11px; font-weight: 700; color: #8E75B2; margin-left: 4px; }
.my-pie { font-size: 13px; color: #94a3b8; text-align: center; }

/* ---------- Tres niveles de cierre ---------- */
.nc-ficha { left: 50%; top: 12px; width: 66%; transform: translateX(-50%); padding: 7px; display: grid; grid-template-columns: 38px 1fr; gap: 7px; }
.nc-ficha .my-foto { height: 38px; border-radius: 4px; }
.nc-ficha .my-foto svg { width: 26px; height: 26px; }
.nc-ficha > div:last-child { display: grid; gap: 3px; align-content: start; }
.nc-ficha b { font-size: 7.5px; font-weight: 800; line-height: 1.2; }
.nc-ficha strong { font-size: 11px; font-weight: 800; }
.nc-borroso { filter: blur(3px); opacity: .55; }
.nc-lock { justify-self: start; display: flex; align-items: center; gap: 3px; font-size: 6.5px; font-weight: 800; color: #475569; background: #F2F5F7; border-radius: 99px; padding: 2px 6px; white-space: nowrap; }
.nc-lock svg { width: 7px; height: 7px; }
.nc-chips { position: absolute; left: 12px; right: 12px; bottom: 12px; display: grid; grid-template-columns: repeat(3, 1fr); gap: 5px; }
.nc-chips span { display: flex; align-items: center; justify-content: center; gap: 3px; font-size: 6.8px; font-weight: 800; border-radius: 5px; padding: 4px 0; white-space: nowrap; }
.nc-chips .es-si { background: #E7F6EF; color: #0B8A63; }
.nc-chips .es-no { background: color-mix(in srgb, var(--c) 12%, #fff); color: var(--c); }
.nc-chips svg { width: 8px; height: 8px; }
.nc-badge { position: absolute; top: 8px; right: 10px; font-size: 6.5px; font-weight: 800; color: #fff; background: var(--c); border-radius: 99px; padding: 2px 7px; }
/* La pantalla de acceso de la tienda cerrada, con la marca del cliente */
.nc-login { left: 50%; top: 10px; width: 60%; transform: translateX(-50%); overflow: hidden; display: grid; }
.nc-login-cab { background: #0E4C6B; color: #fff; padding: 7px 8px; display: flex; align-items: center; gap: 5px; font-size: 7.5px; font-weight: 800; white-space: nowrap; }
.nc-login-cab i { width: 12px; height: 12px; border-radius: 3px; background: #FFCD57; }
.nc-login-cuerpo { padding: 6px 8px 7px; display: grid; gap: 4px; }
.nc-login-cuerpo span { height: 12px; border-radius: 3px; border: 1px solid #E2E8EE; font-size: 6px; color: #94a3b8; padding: 0 5px; line-height: 11px; }
.nc-login-cuerpo b { font-size: 7px; font-weight: 800; color: #fff; background: #0E4C6B; border-radius: 3px; text-align: center; padding: 3px 0; }
.nc-login-cuerpo small { font-size: 6px; font-weight: 700; color: #0E4C6B; text-align: center; }

/* ---------- Qué incluye ---------- */
/* Aprobación desde el mail */
.ap-mail { inset: 10px 12px; padding: 7px 9px; display: grid; gap: 3px; align-content: start; }
.ap-de { font-size: 6.5px; color: #64748b; font-weight: 600; white-space: nowrap; }
.ap-asunto { font-size: 8px; font-weight: 800; margin-bottom: 2px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.ap-f { display: grid; grid-template-columns: 58px 1fr auto; gap: 5px; align-items: center; font-size: 6.8px; white-space: nowrap; }
.ap-f span { color: #64748b; font-weight: 700; }
.ap-f b { font-weight: 800; }
.ap-bots { display: flex; gap: 5px; margin-top: 4px; }
.ap-bots span { font-size: 7px; font-weight: 800; border-radius: 4px; padding: 4px 10px; }
.ap-si { background: #0B8A63; color: #fff; position: relative; }
.ap-si::after { content: ""; position: absolute; inset: -4px; border-radius: 7px; border: 1.5px solid #0B8A63; opacity: 0; animation: ap-clic 5s ease-out infinite; }
@keyframes ap-clic { 0%, 40% { opacity: 0; transform: scale(.85); } 46% { opacity: 1; } 62%, 100% { opacity: 0; transform: scale(1.25); } }
.ap-no { border: 1px solid #E2E8EE; color: #64748b; }
.ap-toast { position: absolute; right: 20px; bottom: 16px; display: flex; align-items: center; gap: 4px; font-size: 7px; font-weight: 800; background: #fff; border-radius: 99px; padding: 3px 9px 3px 4px; box-shadow: 0 8px 18px -6px rgba(15,23,42,.45); white-space: nowrap; animation: ap-toast 5s ease-out infinite; }
@keyframes ap-toast { 0%, 46% { opacity: 0; transform: translateY(6px); } 54%, 92% { opacity: 1; transform: none; } 100% { opacity: 0; } }

/* Formulario de registro a medida, con los datos validados */
.fr-form { inset: 10px 12px; padding: 7px 9px; display: grid; gap: 4px; align-content: start; }
.fr-c { display: grid; grid-template-columns: 8px 1fr; gap: 5px; align-items: center; }
.fr-c > i { height: 10px; background: radial-gradient(circle, #CBD5E1 .8px, transparent 1.1px) 0 0 / 4px 3.4px; }
.fr-c small { display: block; font-size: 5.8px; font-weight: 800; color: #64748b; letter-spacing: .04em; text-transform: uppercase; }
.fr-in { display: flex; align-items: center; justify-content: space-between; height: 14px; border: 1px solid #E2E8EE; border-radius: 3px; padding: 0 5px; font-size: 7px; font-weight: 700; white-space: nowrap; }
.fr-in em { font-style: normal; display: flex; align-items: center; gap: 3px; font-size: 6px; font-weight: 800; color: #0B8A63; }
.fr-in.is-ok { border-color: #0B8A63; }
.fr-in .fr-arch { display: flex; align-items: center; gap: 3px; font-size: 6.5px; font-weight: 800; color: var(--c); }
.fr-c .ok-v { animation: fr-ok 6s infinite both; animation-delay: var(--d); }
@keyframes fr-ok { 0%, 8% { transform: scale(0); } 14%, 92% { transform: none; } 100% { transform: scale(0); } }

/* Factura A en el pago */
.fa2-caja { inset: 12px 14px; padding: 8px 10px; display: grid; gap: 5px; align-content: start; }
.fa2-cab { font-size: 7.5px; font-weight: 800; white-space: nowrap; }
.fa2-dato { display: flex; justify-content: space-between; font-size: 7px; white-space: nowrap; }
.fa2-dato span { color: #64748b; font-weight: 700; }
.fa2-dato b { font-weight: 800; }
.fa2-check { display: flex; align-items: center; gap: 6px; padding: 5px 7px; border: 1.5px solid var(--c); border-radius: 5px; background: color-mix(in srgb, var(--c) 7%, #fff); font-size: 7.5px; font-weight: 800; }
.fa2-check i { width: 11px; height: 11px; border-radius: 3px; border: 1.5px solid var(--c); display: grid; place-items: center; animation: fa2-caja 5s infinite; }
.fa2-check i svg { width: 8px; height: 8px; opacity: 0; animation: fa2-tilde 5s infinite; }
@keyframes fa2-caja { 0%, 30% { background: #fff; } 36%, 94% { background: var(--c); } 100% { background: #fff; } }
@keyframes fa2-tilde { 0%, 30% { opacity: 0; } 36%, 94% { opacity: 1; } 100% { opacity: 0; } }
.fa2-pedido { display: flex; align-items: center; justify-content: space-between; margin-top: 2px; padding-top: 5px; border-top: 1px solid #EEF2F6; font-size: 7px; font-weight: 700; color: #64748b; white-space: nowrap; }
.fa2-pedido em { font-style: normal; font-size: 6.5px; font-weight: 800; color: #fff; background: var(--c); border-radius: 99px; padding: 1px 7px; animation: fa2-tilde 5s infinite; }

/* Datos comerciales: el antes y el después */
.dc-cambio { inset: 10px 12px; padding: 7px 9px; display: grid; gap: 4px; align-content: start; }
.dc-cab { font-size: 7.5px; font-weight: 800; white-space: nowrap; }
.dc-cab small { display: block; font-size: 6px; color: #64748b; font-weight: 700; }
.dc-lin { font-size: 6px; font-weight: 800; color: #64748b; letter-spacing: .05em; text-transform: uppercase; margin-top: 2px; }
.dc-v { font-size: 7px; font-weight: 700; padding: 3px 6px; border-radius: 3px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.dc-v.es-antes { background: #FEE2E2; color: #991B1B; text-decoration: line-through; }
.dc-v.es-despues { background: #DCFCE7; color: #166534; }
.dc-bots { display: flex; gap: 5px; margin-top: 3px; }
.dc-bots span { font-size: 6.8px; font-weight: 800; border-radius: 4px; padding: 3px 9px; white-space: nowrap; }
.dc-bots .es-si { background: #1E293B; color: #fff; }
.dc-bots .es-no { border: 1px solid #E2E8EE; color: #64748b; }

/* Precios protegidos: tampoco en Google ni en el código */
.pp-res { left: 12px; top: 12px; width: 54%; padding: 7px 8px; display: grid; gap: 2px; z-index: 1; }
.pp-res small { font-size: 6px; color: #4D5156; white-space: nowrap; }
.pp-res b { font-size: 8.5px; font-weight: 600; color: #1A0DAB; line-height: 1.2; }
.pp-res span { font-size: 6.5px; color: #4D5156; line-height: 1.35; }
.pp-res em { justify-self: start; font-style: normal; display: flex; align-items: center; gap: 3px; font-size: 6.5px; font-weight: 800; color: var(--c); background: color-mix(in srgb, var(--c) 10%, #fff); border-radius: 99px; padding: 1px 6px; margin-top: 2px; white-space: nowrap; }
.pp-res em svg { width: 7px; height: 7px; }
.pp-code { right: 12px; top: 26px; bottom: 12px; width: 50%; background: #0F172A; color: #cbd5e1; padding: 8px 8px 8px 16px; font-family: ui-monospace, "SFMono-Regular", Consolas, monospace; font-size: 6.2px; line-height: 1.6; white-space: pre; overflow: hidden; }
.pp-code .k { color: #7DD3FC; } .pp-code .s { color: #FDE68A; } .pp-code .c { color: #86EFAC; }

/* Tu equipo, con permisos justos */
.eq-lista { inset: 12px 14px; padding: 7px 9px; display: grid; gap: 5px; align-content: start; }
.eq-cab { font-size: 7.5px; font-weight: 800; white-space: nowrap; }
.eq-f { display: grid; grid-template-columns: 16px 1fr; gap: 6px; align-items: center; padding: 5px 6px; border: 1px solid #EEF2F6; border-radius: 5px; }
.eq-f > i { width: 16px; height: 16px; border-radius: 50%; display: grid; place-items: center; font-style: normal; font-size: 7px; font-weight: 800; color: #fff; }
.eq-f b { display: block; font-size: 7.2px; font-weight: 800; white-space: nowrap; }
.eq-f b small { font-size: 6px; font-weight: 700; color: #64748b; margin-left: 3px; }
.eq-perm { display: flex; flex-wrap: wrap; gap: 3px; margin-top: 2px; }
.eq-perm span { display: flex; align-items: center; gap: 2px; font-size: 6px; font-weight: 800; border-radius: 99px; padding: 1px 5px; white-space: nowrap; }
.eq-perm .es-si { background: #E7F6EF; color: #0B8A63; }
.eq-perm .es-no { background: #F2F5F7; color: #94a3b8; }
.eq-perm svg { width: 7px; height: 7px; }
.eq-f.is-enc { border-color: var(--c); background: color-mix(in srgb, var(--c) 6%, #fff); }

/* ---------- El cierre: el formulario debajo de los botones ---------- */
.my-form { margin-top: 34px; max-width: 760px; }