/* Omnicanalidad: texto nativo y escena logística independiente. */
#integraciones { position: relative; isolation: isolate; overflow: hidden; padding: 70px 0 55px; background: radial-gradient(ellipse at 82% 55%, #ff005815, transparent 60%), #08090d; }
#integraciones .container { width: min(1560px, calc(100% - 96px)); margin-inline: auto; }
#integraciones .omni-layout { display: grid; grid-template-columns: minmax(0, .98fr) minmax(0, 1.5fr); grid-template-areas: 'copy art'; gap: clamp(24px, 2.5vw, 44px); align-items: center; position: relative; }
#integraciones .section-heading { grid-area: copy; order: 0; position: relative; z-index: 2; min-width: 0; padding-block: 24px; margin: 0; }
#integraciones .omni-visual { grid-area: art; order: 0; width: 100%; margin: 0; }
#integraciones .omni-visual figcaption { padding-right: 0; }
#integraciones .eyebrow { color: #c5c2cb; font-size: 11px; letter-spacing: 2.4px; }
#integraciones h2 { font-size: clamp(38px, 3.5vw, 62px); line-height: 1.06; font-weight: 800; letter-spacing: -.055em; }
#integraciones .section-heading > p:not(.eyebrow) { font-size: clamp(15px, 1.25vw, 20px); line-height: 1.65; margin-top: 24px; max-width: 570px; color: #b9b6c1; }
.omni-neon { position: absolute; inset: 0; width: 100%; height: 100%; pointer-events: none; z-index: -1; stroke: #ff005860; stroke-width: 1; filter: drop-shadow(0 0 7px #ff005870); }
.omni-neon path:nth-child(2) { stroke-width: 2; stroke: #ff36779a; }
.omni-neon path:nth-child(3) { stroke: #ff00582b; }
.omni-brands { display: grid; grid-template-columns: max-content max-content; gap: 12px; margin-top: 28px; width: max-content; max-width: 100%; }
.omni-brands > span { display: flex; align-items: center; gap: 12px; padding: 11px 16px; min-height: 56px; border: 1px solid #ffffff17; border-radius: 15px; background: linear-gradient(130deg, #21121d50, #111217); box-shadow: inset 0 1px #ffffff02; }
.omni-brands strong { font-size: clamp(13px, 1.05vw, 17px); letter-spacing: -.5px; white-space: nowrap; }
.omni-brands .omni-shopify-name { font-style: italic; font-size: 22px; }
.omni-logo { display: grid; place-items: center; width: 40px; height: 32px; flex-shrink: 0; color: var(--apliton-primary); font-size: 29px; }
.omni-mercado { background: url('../../images/integraciones.png') no-repeat -1px -1px / 365px 73px; }
.omni-nube { color: #0867df; font-size: 34px; }
.omni-shopify { width: 30px; margin-inline: 5px; background: url('../../images/integraciones.png') no-repeat -203px -56px / 460px 92px; }
.omni-woo { width: 61px; height: 35px; background: url('../../images/integraciones.png') no-repeat -366px -68px / 526px 106px; }
.omni-flow { display: flex; align-items: start; justify-content: space-between; gap: 8px; border-top: 1px solid #ffffff50; padding-top: 20px; margin-top: 20px; max-width: 525px; }
.omni-flow > div { display: grid; justify-items: center; gap: 10px; text-align: center; min-width: 0; }
.omni-flow > div > span { display: grid; place-items: center; width: 60px; height: 51px; border-radius: 14px; border: 1px solid #ff005829; background: linear-gradient(140deg, #28172599, #131218); color: var(--apliton-primary); font-size: 23px; }
.omni-flow b { font-size: 12px; font-weight: 600; }
.omni-flow > i { color: var(--apliton-primary); font-size: 13px; margin-top: 18px; }
.omni-flow .brand-symbol { width: 30px; height: 32px; }
#integraciones .text-link { display: inline-flex; align-items: center; gap: 22px; color: #fff; font-size: 15px; font-weight: 600; margin-top: 37px; }
#integraciones .text-link i { color: var(--apliton-primary); }
.omni-visual { position: relative; z-index: 1; min-width: 0; margin: 0 -60px 0 -70px; }
.omni-visual img { display: block; width: 100%; height: auto; aspect-ratio: 3 / 2; object-fit: contain; -webkit-mask-image: linear-gradient(90deg, transparent, #000 8%, #000 96%, transparent), linear-gradient(0deg, transparent, #000 6%, #000 97%, transparent); -webkit-mask-composite: source-in; mask-image: linear-gradient(90deg, transparent, #000 8%, #000 96%, transparent), linear-gradient(0deg, transparent, #000 6%, #000 97%, transparent); mask-composite: intersect; }
.omni-visual figcaption { position: relative; margin-top: 3px; text-align: right; font-size: 8px; color: #8a8190; padding-right: 60px; }
@media (max-width: 1280px) {
    #integraciones .omni-layout { grid-template-columns: minmax(0, 1fr) minmax(0, 1.35fr); }
    #integraciones .eyebrow { font-size: 9px; letter-spacing: 1.8px; }
    .omni-brands { gap: 10px; }
    .omni-brands > span { padding: 10px 12px; gap: 9px; }
    .omni-brands strong { font-size: 12px; }
    .omni-brands .omni-shopify-name { font-size: 18px; }
    .omni-visual { margin-left: -40px; }
}
@media (max-width: 900px) {
    #integraciones { padding-block: 60px 35px; }
    #integraciones .omni-layout { grid-template-columns: minmax(0, 1fr); grid-template-areas: 'copy' 'art'; gap: 32px; }
    #integraciones .section-heading { max-width: 710px; padding: 0; margin-left: 0; }
    #integraciones h2 { font-size: clamp(38px, 5.5vw, 60px); }
    #integraciones .section-heading > p:not(.eyebrow) { font-size: 17px; }
    .omni-brands strong { font-size: 16px; }
    .omni-visual { margin: 0 -32px; }
    .omni-visual figcaption { padding-right: 32px; }
}
@media (max-width: 600px) {
    #integraciones .container { width: calc(100% - 40px); }
    #integraciones .eyebrow { letter-spacing: 1.6px; font-size: 8px; }
    #integraciones h2 { font-size: clamp(32px, 8.1vw, 44px); }
    #integraciones .section-heading > p:not(.eyebrow) { font-size: 14px; margin-top: 20px; }
    .omni-brands { grid-template-columns: repeat(2, minmax(0, 1fr)); width: 100%; gap: 9px; margin-top: 23px; }
    .omni-brands > span { padding: 10px 8px; gap: 6px; border-radius: 12px; min-height: 48px; }
    .omni-brands strong { font-size: 11px; letter-spacing: -.4px; }
    .omni-brands .omni-shopify-name { font-size: 17px; }
    .omni-logo { transform: scale(.8); margin-inline: -3px; }
    .omni-woo { width: 45px; background-size: 400px 81px; background-position: -278px -51px; }
    .omni-flow { gap: 5px; }
    .omni-flow > div > span { width: 46px; height: 44px; font-size: 19px; border-radius: 11px; }
    .omni-flow b { font-size: 9px; }
    .omni-flow > i { font-size: 10px; }
    #integraciones .text-link { font-size: 12px; gap: 15px; margin-top: 27px; }
    .omni-visual { margin: 0 -20px; }
    .omni-visual figcaption { padding-inline: 20px; font-size: 7px; }
}