/* ═════════ Secciones de marca (2026-10-08) ═════════
   Tres piezas con el orden y la limpieza de una página de marca, pero con los colores de
   Mercado Industrial (azul oscuro #0B1424, naranja #EB5B28, verde #3BAB36). Se usan solo en
   Inicio, Planes y Vender; el resto del sitio (listados, fichas, paneles) no las toca.
   Reglas: borde fino O fondo; una sola acción naranja por bloque; imágenes propias. */

/* ── 1 · Cómo funciona: línea de tiempo que se ilumina al bajar ── */
.como{display:grid;grid-template-columns:minmax(0,.9fr) minmax(0,1.1fr);gap:64px;align-items:start}
.como .como-cab{position:sticky;top:160px}
.como .como-cab .eyebrow{display:inline-block;font-size:12px;font-weight:600;letter-spacing:.08em;text-transform:uppercase;color:var(--naranja-osc);margin-bottom:14px}
.como .como-cab h2{font-size:38px;line-height:1.1;letter-spacing:-.03em;margin:0 0 14px}
.como .como-cab p{font-size:16.5px;color:var(--gris);max-width:440px;margin:0}
.como .pasos{position:relative;padding-left:76px}
.como .pasos::before{content:"";position:absolute;left:27px;top:28px;bottom:28px;width:2px;background:var(--linea)}
.como .pasos .linea-on{position:absolute;left:27px;top:28px;width:2px;background:var(--naranja);height:0;transition:height .4s ease}
.como .paso{position:relative;border:1px solid var(--linea);border-radius:16px;padding:28px 30px;margin-bottom:18px;background:#fff;transition:border-color .3s,box-shadow .3s,transform .3s}
.como .paso .num{position:absolute;left:-76px;top:22px;width:56px;height:56px;border-radius:50%;background:#fff;border:1px solid var(--linea);display:flex;align-items:center;justify-content:center;color:#9AA1AC;transition:all .3s}
.como .paso .num .i{width:22px;height:22px}
.como .paso h3{font-size:19px;margin:0 0 8px;font-weight:600}
.como .paso p{margin:0;color:var(--gris);font-size:15px;line-height:1.6;max-width:520px}
.como .paso .img-paso{margin-top:18px;border-radius:12px;overflow:hidden;aspect-ratio:16/6;max-height:220px;background:var(--suave)}
.como .paso .img-paso img{width:100%;height:100%;object-fit:cover;display:block}
.como .paso.on{border-color:var(--naranja);box-shadow:0 20px 40px -24px rgba(255,90,0,.35)}
.como .paso.on .num{background:var(--naranja);border-color:var(--naranja);color:#fff;box-shadow:0 0 0 8px rgba(255,90,0,.12)}
.como .paso.hecho .num{background:var(--verde);border-color:var(--verde);color:#fff}

/* Las escenas explican el resultado de cada paso con datos de la plataforma. */
.como .paso .escena-paso{position:relative;box-sizing:border-box;max-height:none;aspect-ratio:auto;min-height:214px;padding:18px;background:linear-gradient(145deg,#f8fafc,#eef3f8);border:1px solid #e5eaf0;color:#152033}
.escena-paso .i{width:15px;height:15px}.escena-barra{height:42px;border:1px solid #dce3eb;border-radius:11px;background:#fff;display:flex;align-items:center;gap:9px;padding:0 5px 0 12px;box-shadow:0 8px 22px -18px #0b1424;color:#7b8492;font-size:13px}
.escena-barra span{flex:1;color:#28364b}.escena-barra b{height:32px;padding:0 15px;border-radius:8px;background:var(--naranja);color:#fff;display:flex;align-items:center;font-size:12px}
.escena-resultados{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:9px;margin-top:12px}.resultado-mini{min-width:0;background:#fff;border:1px solid #e2e7ed;border-radius:10px;padding:7px;display:grid;grid-template-columns:42px 1fr;column-gap:7px;align-items:center;opacity:.55;transform:translateY(10px);transition:opacity .35s,transform .35s,box-shadow .35s}
.resultado-mini img{grid-row:1/3!important;width:42px!important;height:42px!important;object-fit:contain!important}.resultado-mini span{font-size:10px;font-weight:600;line-height:1.2;overflow:hidden}.resultado-mini span small{display:block;color:#7b8492;text-transform:uppercase;font-size:8px;letter-spacing:.04em}.resultado-mini em{font-size:8px;font-style:normal;color:#188542}.paso.on .resultado-mini{opacity:1;transform:none;box-shadow:0 10px 22px -20px #0b1424}.paso.on .resultado-mini:nth-child(2){transition-delay:.12s}.paso.on .resultado-mini:nth-child(3){transition-delay:.24s}

.escena-envio{display:grid;grid-template-columns:minmax(0,.9fr) 46px minmax(0,1fr);align-items:center;gap:6px}.solicitud-mini{background:#fff;border:1px solid #e1e7ee;border-radius:12px;padding:12px;box-shadow:0 14px 28px -24px #0b1424}.escena-etiqueta{font-size:10px;font-weight:700;color:#48566a;display:flex;gap:5px;align-items:center}.solicitud-productos{display:grid;gap:5px;margin:9px 0}.solicitud-productos span{display:flex;gap:6px;align-items:center;font-size:9px;color:#4d596a}.solicitud-productos img{width:25px!important;height:25px!important;object-fit:contain!important;background:#f7f8fa;border-radius:5px}.solicitud-mini strong{height:27px;border-radius:7px;background:var(--naranja);color:#fff;font-size:9px;display:flex;align-items:center;justify-content:center;gap:5px}.envio-rutas{position:relative;height:122px}.envio-rutas::before{content:"";position:absolute;left:0;right:0;top:50%;height:2px;background:linear-gradient(90deg,var(--naranja),#fdad88)}.envio-rutas i{position:absolute;right:-2px;width:7px;height:7px;border-top:2px solid var(--naranja);border-right:2px solid var(--naranja);transform:rotate(45deg);opacity:0}.envio-rutas i:nth-child(1){top:15%}.envio-rutas i:nth-child(2){top:48%}.envio-rutas i:nth-child(3){top:81%}.paso.on .envio-rutas i{animation:envia 1.8s ease-in-out infinite}.paso.on .envio-rutas i:nth-child(2){animation-delay:.3s}.paso.on .envio-rutas i:nth-child(3){animation-delay:.6s}@keyframes envia{0%{right:32px;opacity:0}30%,70%{opacity:1}100%{right:-2px;opacity:0}}
.proveedores-mini{display:grid;gap:6px}.proveedores-mini>div{display:flex;align-items:center;gap:8px;background:#fff;border:1px solid #e1e7ee;border-radius:10px;padding:7px;transform:translateX(8px);opacity:.6;transition:transform .35s,opacity .35s,border-color .35s}.proveedores-mini>div>b{width:27px;height:27px;border-radius:8px;background:#14233b;color:#fff;display:grid;place-items:center;font-size:9px}.proveedores-mini span{font-size:9px;font-weight:700;line-height:1.2}.proveedores-mini small{display:flex;align-items:center;gap:3px;color:#188542;font-size:8px;font-weight:500}.proveedores-mini small .i{width:10px;height:10px}.paso.on .proveedores-mini>div{transform:none;opacity:1;border-color:#cfe8d7}.paso.on .proveedores-mini>div:nth-child(2){transition-delay:.16s}.paso.on .proveedores-mini>div:nth-child(3){transition-delay:.32s}

.escena-propuestas{display:grid;gap:6px}.propuestas-titulo{display:flex;align-items:center;justify-content:space-between;margin-bottom:2px}.propuestas-titulo span{font-size:11px;font-weight:700}.propuestas-titulo small{font-size:9px;color:#6c7787}.propuesta-mini{position:relative;display:grid;grid-template-columns:31px minmax(0,1fr) auto auto;align-items:center;gap:8px;padding:8px 9px;background:#fff;border:1px solid #e1e7ee;border-radius:10px;opacity:.58;transform:translateY(7px);transition:opacity .3s,transform .3s,border-color .3s}.avatar-prov{width:29px;height:29px;border-radius:8px;background:#ef5b2a;color:#fff;display:grid;place-items:center;font-size:9px;font-weight:700}.avatar-prov.verde{background:#2d9148}.avatar-prov.azul{background:#2d5f9d}.propuesta-mini>b{font-size:10px}.propuesta-mini>b small,.propuesta-mini>strong small{display:block;color:#7b8492;font-size:8px;font-weight:400}.propuesta-mini>strong{font-size:11px;text-align:right;white-space:nowrap}.propuesta-mini em,.propuesta-mini button{border:0;border-radius:999px;background:#e9f7ed;color:#18723a;font-size:8px;font-style:normal;font-weight:700;padding:5px 7px;white-space:nowrap}.propuesta-mini button{background:#f1f4f8;color:#526074}.paso.on .propuesta-mini{opacity:1;transform:none}.paso.on .propuesta-mini:first-of-type{border-color:#7ac48d;box-shadow:0 9px 20px -18px #188542}.paso.on .propuesta-mini:nth-of-type(3){transition-delay:.12s}.paso.on .propuesta-mini:nth-of-type(4){transition-delay:.24s}

@media(max-width:1000px){.como{grid-template-columns:1fr;gap:28px}.como .como-cab{position:static}.como .como-cab h2{font-size:30px}.como .pasos{padding-left:60px}.como .pasos::before,.como .pasos .linea-on{left:19px}.como .paso .num{left:-60px;width:40px;height:40px}.como .paso{padding:22px}}
@media(max-width:600px){.como .pasos{padding-left:0}.como .pasos::before,.como .pasos .linea-on{display:none}.como .paso .num{position:static;width:40px;height:40px;margin-bottom:14px}.como .paso .escena-paso{padding:12px;min-height:200px}.escena-resultados{gap:5px}.resultado-mini{grid-template-columns:1fr;padding:6px}.resultado-mini img{grid-row:auto!important;width:100%!important;height:45px!important}.resultado-mini em{display:none}.escena-envio{grid-template-columns:1fr 28px 1fr}.envio-rutas{height:112px}.solicitud-mini{padding:8px}.solicitud-productos span{font-size:8px}.proveedores-mini>div{padding:5px;gap:5px}.proveedores-mini>div>b{display:none}.proveedores-mini span{font-size:8px}.propuesta-mini{grid-template-columns:27px minmax(0,1fr) auto;padding:7px 6px;gap:5px}.propuesta-mini em,.propuesta-mini button{display:none}.propuesta-mini>strong{font-size:10px}}
@media(prefers-reduced-motion:reduce){.resultado-mini,.proveedores-mini>div,.propuesta-mini{opacity:1;transform:none;transition:none}.paso.on .envio-rutas i{animation:none;opacity:1;right:-2px}}

/* ── 2 · Bloque oscuro de contraste (Vender / Por qué) ── */
.marca-oscuro{position:relative;overflow:hidden;background:radial-gradient(ellipse 70% 80% at 30% 20%,#162844 0%,#0B1424 60%);color:#fff;border-radius:22px;padding:72px 64px;isolation:isolate}
.marca-oscuro::before{content:"";position:absolute;inset:0;z-index:0;opacity:.35;background-image:radial-gradient(rgba(255,255,255,.12) 1px,transparent 1px);background-size:22px 22px}
.marca-oscuro>*{position:relative;z-index:1}
.marca-oscuro .eyebrow{display:inline-block;font-size:12px;font-weight:600;letter-spacing:.08em;text-transform:uppercase;color:#FF9A5C;margin-bottom:14px}
.marca-oscuro h2{font-size:40px;line-height:1.08;letter-spacing:-.03em;margin:0 0 14px;color:#fff;max-width:560px}
.marca-oscuro p.sub{font-size:17px;color:rgba(255,255,255,.72);max-width:520px;margin:0 0 28px}
.marca-oscuro .acc{display:flex;gap:12px;flex-wrap:wrap}
.marca-oscuro .btn.vid{background:transparent!important;border-color:rgba(255,255,255,.3);color:#fff}
.marca-oscuro .btn.vid:hover{border-color:#fff}
/* contador grande con logos flotando alrededor (como "Un solo grupo, cero cálculos") */
.flotantes{position:relative;min-height:380px;display:flex;flex-direction:column;align-items:center;justify-content:center;text-align:center}
.flotantes .cifra{font-size:84px;font-weight:700;letter-spacing:-.04em;line-height:1}
.flotantes .cifra-t{font-size:14px;color:rgba(255,255,255,.62);margin-top:6px}
.flotantes .cifra-e{font-size:13px;color:rgba(255,255,255,.5);text-transform:uppercase;letter-spacing:.08em;margin-bottom:14px}
.flotantes .logo-f{position:absolute;display:flex;align-items:center;gap:8px;background:#fff;border-radius:999px;padding:6px 12px 6px 6px;color:var(--tinta);font-size:13px;font-weight:600;box-shadow:0 14px 30px -12px rgba(0,0,0,.5);animation:flota 6s ease-in-out infinite}
.flotantes .logo-f img{width:28px;height:28px;object-fit:contain;border-radius:50%;background:#fff}
.flotantes .logo-f::before{content:"";position:absolute;width:10px;height:10px;border-left:2px solid currentColor;border-top:2px solid currentColor;transform:rotate(-45deg);left:-16px;top:-10px;color:var(--naranja)}
.flotantes .logo-f.ve::before{color:var(--verde)}
.flotantes .logo-f:nth-child(odd){animation-duration:7.5s;animation-delay:-2s}
@keyframes flota{0%,100%{transform:translateY(0)}50%{transform:translateY(-10px)}}
@media(prefers-reduced-motion:reduce){.flotantes .logo-f{animation:none}}
.marca-oscuro.dos{display:grid;grid-template-columns:1fr 1fr;gap:48px;align-items:center}
@media(max-width:1000px){.marca-oscuro{padding:44px 28px;border-radius:16px}.marca-oscuro h2{font-size:30px}.marca-oscuro.dos{grid-template-columns:1fr}.flotantes{min-height:300px}.flotantes .cifra{font-size:60px}.flotantes .logo-f{display:none}.flotantes .logo-f:nth-child(-n+4){display:flex}}

/* ── 3 · Resultados: 4 tarjetas, una oscura de contraste ── */
.resultados{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:16px}
.resultados>div{border:1px solid var(--linea);border-radius:18px;padding:32px 28px;min-height:300px;display:flex;flex-direction:column}
.resultados>div b{font-size:30px;line-height:1.1;letter-spacing:-.03em;font-weight:700;margin-bottom:14px;display:block}
.resultados>div p{margin:0;color:var(--gris);font-size:14.5px;line-height:1.6}
.resultados>div.osc{background:#0B1424;border-color:#0B1424;color:#fff}
.resultados>div.osc b{color:#fff}.resultados>div.osc p{color:rgba(255,255,255,.7)}
.resultados>div.osc b em{font-style:normal;color:#FF8A4C}
@media(max-width:1000px){.resultados{grid-template-columns:1fr 1fr}}
@media(max-width:600px){.resultados{grid-template-columns:1fr}.resultados>div{min-height:0}}

/* ── 4 · Planes: tarjetas de precio y preguntas en dos columnas ── */
.pl-marca{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:18px;align-items:stretch}
.pl-marca .pl-c{border:1px solid var(--linea);border-radius:18px;padding:30px 28px;display:flex;flex-direction:column;background:#fff;position:relative}
.pl-marca .pl-c.dest{border:2px solid var(--naranja)}
.pl-marca .pl-c .tag{position:absolute;top:22px;right:22px;font-size:12px;font-weight:600;padding:5px 11px;border-radius:999px;background:var(--naranja-suave);color:var(--naranja-osc)}
.pl-marca .pl-c .tag.ve{background:var(--verde-suave);color:var(--verde-osc)}
.pl-marca .pl-c h2{font-size:26px;margin:0 0 4px;letter-spacing:-.02em}
.pl-marca .pl-c .pl-sub{color:var(--gris);font-size:14px;margin:0 0 20px;min-height:40px}
.pl-marca .pl-c .pl-pre{font-size:40px;font-weight:700;letter-spacing:-.03em;line-height:1}
.pl-marca .pl-c .pl-pre small{font-size:14px;font-weight:400;color:var(--gris);margin-left:6px}
.pl-marca .pl-c .caja{background:var(--suave);border-radius:12px;padding:16px 18px;margin:22px 0;font-size:14px}
.pl-marca .pl-c .caja b{display:block;margin-bottom:6px}
.pl-marca .pl-c .caja span{display:flex;align-items:center;gap:8px;color:var(--tinta-2)}
.pl-marca .pl-c ul{list-style:none;padding:0;margin:0 0 24px;display:grid;gap:10px;font-size:14.5px}
.pl-marca .pl-c li{display:flex;gap:10px;align-items:flex-start;color:var(--tinta-2)}
.pl-marca .pl-c li .i{width:18px;height:18px;color:var(--verde);flex:none;margin-top:2px}
.pl-marca .pl-c .btn{margin-top:auto;width:100%;height:46px;min-height:46px}
.pl-marca .pl-c .btn.osc{background:#0B1424;border-color:#0B1424;color:#fff}
.faq-2{display:grid;grid-template-columns:minmax(0,.8fr) minmax(0,1.6fr);gap:48px;align-items:start}
.faq-2 h2{font-size:34px;line-height:1.1;letter-spacing:-.03em;margin:0;position:sticky;top:160px}
.faq-2 .eyebrow{display:inline-block;font-size:12px;font-weight:600;letter-spacing:.08em;text-transform:uppercase;color:var(--naranja-osc);margin-bottom:12px}
.faq-2 details{border-bottom:1px solid var(--linea);padding:4px 0}
.faq-2 summary{list-style:none;cursor:pointer;display:flex;justify-content:space-between;align-items:center;gap:16px;padding:22px 0;font-weight:500;font-size:17px}
.faq-2 summary::-webkit-details-marker{display:none}
.faq-2 summary .mas{width:22px;height:22px;flex:none;color:var(--naranja);position:relative}
.faq-2 summary .mas::before,.faq-2 summary .mas::after{content:"";position:absolute;background:currentColor;left:50%;top:50%;transform:translate(-50%,-50%);transition:transform .2s}
.faq-2 summary .mas::before{width:16px;height:2px}.faq-2 summary .mas::after{width:2px;height:16px}
.faq-2 details[open] summary .mas::after{transform:translate(-50%,-50%) rotate(90deg)}
.faq-2 details p{margin:0 0 22px;color:var(--gris);font-size:15px;line-height:1.65;max-width:640px}
@media(max-width:1000px){.pl-marca{grid-template-columns:1fr}.faq-2{grid-template-columns:1fr;gap:16px}.faq-2 h2{position:static;font-size:28px}}

/* ── aparición suave al bajar (solo en estas secciones) ── */
.aparece{opacity:0;transform:translateY(22px);transition:opacity .55s ease,transform .55s ease}
.aparece.visto{opacity:1;transform:none}
@media(prefers-reduced-motion:reduce){.aparece{opacity:1;transform:none;transition:none}}