/* Dirección de la referencia: escenas integradas, producto en capas y negro profundo. */
:root { --section-space: clamp(68px, 6vw, 96px); }
.dark-section { background-color: #090a0e; }
.hero { padding-top: 150px; background: radial-gradient(ellipse at 74% 35%, #ff005819, transparent 54%), radial-gradient(ellipse at 45% 100%, #26101a, transparent 50%), #090a0e; }
.hero-layout { min-height: 540px; grid-template-columns: .9fr 1.1fr; gap: 32px; }
.hero h1 { font-size: clamp(43px, 4.1vw, 66px); line-height: 1.04; letter-spacing: -.055em; }
.hero-description { font-size: 15px; line-height: 1.65; max-width: 485px; }
.hero-copy .eyebrow { letter-spacing: 1.5px; }
.hero-product { padding-top: 50px; padding-bottom: 105px; }
.hero-product .laptop { transform: perspective(1300px) rotateY(calc(-5deg + var(--tilt-x, 0deg))) rotateX(calc(2deg + var(--tilt-y, 0deg))) rotateZ(-1deg); }
.hero-product .laptop-screen { border-color: #26272c; box-shadow: 0 0 0 1px #a3a3ac, 0 32px 65px #0008, 0 0 80px #ff005817; }
.hero .phone { box-shadow: 0 22px 30px #0009, 0 0 0 1px #9c9ba4; }
.event-sale { top: 4px; left: 1%; }
.event-stock { bottom: 67px; right: 26%; }
.event-invoice { top: 18px; right: 0; }
.hero-copy .button, .section-heading > .button { border-radius: 30px; }
.hero-benefits { margin-top: 33px; }
.hero-scroll { margin-top: 10px; }
.integrations, .pymes, .devices { background: #090a0e; position: relative; }
.integrations { padding-bottom: 80px; }
.integrations .split-layout, .pymes-layout { grid-template-columns: .9fr 1.1fr; gap: 40px; align-items: center; }
.integrations .section-heading, .pymes .section-heading { order: 1; z-index: 2; }
.integration-visual, .pymes-photo { order: 2; margin: 0; min-width: 0; height: 490px; border-radius: 0; box-shadow: none; background: transparent; }
.editorial-scene::before { display: none; }
.editorial-scene .editorial-photo { object-fit: cover; object-position: 52% center; filter: brightness(.77) saturate(.78); -webkit-mask-image: linear-gradient(90deg, transparent, #000 17%, #000 91%, transparent); mask-image: linear-gradient(90deg, transparent, #000 17%, #000 91%, transparent); }
.editorial-scene .scene-emblem { display: none; }
.integration-visual .photo-shade { background: linear-gradient(0deg, #090a0e, transparent 25%, transparent 78%, #090a0e), linear-gradient(90deg, #090a0e44, transparent 50%); }
.integration-visual::after, .pymes-photo::after { content: ''; position: absolute; inset: 0; background: radial-gradient(ellipse at 85% 20%, #ff005818, transparent 50%); pointer-events: none; }
.order-journey { left: auto; right: 3%; top: 24%; width: 225px; padding: 17px; border-color: #ffffff30; background: #14141ce8; box-shadow: 0 20px 55px #0007; z-index: 2; }
.order-journey li { min-height: 49px; font-size: 11px; }
.order-journey li > i { width: 28px; height: 28px; }
.order-journey li:not(:last-child)::after { left: 14px; top: 37px; height: 24px; }
.photo-caption { color: #d3cbd9; bottom: 24px; left: 17%; z-index: 3; font-size: 10px; }
.integrations .integration-brands { color: #fff; }
.integrations .operation-flow { border-color: #ffffff15; }
.integrations .flow-step > b { color: #ded9e3; }
.integrations .flow-icon { background: #19171e; border-color: #ffffff15; }
.integrations .text-link { color: #f3edf5; }
.reports { background: radial-gradient(ellipse at 75% 40%, #ff005810, transparent 55%), #090a0e; border-top: 1px solid #ffffff09; }
.reports-layout { grid-template-columns: .78fr 1.22fr; gap: 65px; }
.report-visual { position: relative; margin-right: 46px; margin-bottom: 38px; padding: 12px; border: 7px solid #222329; border-radius: 19px; transform: perspective(1100px) rotateY(-3deg); box-shadow: 0 1px 0 1px #8b8b93, 0 35px 60px #0009, 0 0 80px #ff00580c; background: #17171d; }
.report-visual::after { content: ''; position: absolute; left: -5%; right: -5%; bottom: -18px; height: 12px; border-radius: 2px 2px 60% 60%; background: linear-gradient(#9698a0, #42434a 50%, #101115); box-shadow: 0 13px 18px #0007; }
.report-toolbar { padding: 7px 6px 13px; }
.report-finance { display: grid; grid-template-columns: repeat(3, 1fr); background: #f8f8fb; margin-top: 7px; border-radius: 7px; gap: 1px; padding: 14px; color: #282633; }
.report-finance span { display: block; margin-bottom: 6px; font-size: 8px; color: #66616d; }
.report-finance b { font-size: clamp(9px, 1vw, 13px); }
.report-phone { position: absolute; z-index: 3; right: -47px; bottom: -34px; width: 145px; padding: 28px 12px 17px; border: 6px solid #1c1d22; border-radius: 23px; color: #25222c; background: #fcfcfe; transform: rotate(4deg); box-shadow: 0 0 0 1px #7d7c85, 0 20px 30px #0007; }
.report-phone-notch { position: absolute; left: 25%; right: 25%; height: 9px; top: 0; background: #1c1d22; border-radius: 0 0 9px 9px; }
.report-phone > small { display: block; font-size: 5px; letter-spacing: .3px; color: #716a7b; margin: 14px 0 7px; }
.report-phone h3 { font-size: 13px; margin-bottom: 12px; line-height: 1.25; letter-spacing: -.4px; }
.report-phone > div:not(.report-phone-notch) { margin: 7px 0; padding: 9px 6px; border: 1px solid #e9e6ed; border-radius: 7px; }
.report-phone > div span { display: block; font-size: 7px; color: #786e80; margin-bottom: 4px; }
.report-phone > div b { font-size: 11px; }
.report-phone > p { font-size: 6px; line-height: 1.7; color: #8a7d8e; margin-top: 9px; }
.report-phone > p i { color: var(--apliton-primary); }
.report-visual > figcaption { text-align: left; padding-top: 12px; padding-right: 110px; }
.devices { border-top: 1px solid #ffffff09; }
.devices .device-benefits h3 { color: #ded9e3; }
.devices .device-scene { isolation: isolate; }
.devices .device-scene::before { background: radial-gradient(ellipse, #ff005824, transparent 65%); }
.devices .device-laptop { filter: drop-shadow(0 25px 20px #0008); }
.devices .device-tablet, .devices .device-mobile { box-shadow: 0 0 0 1px #767580, 0 22px 35px #0008; }
.devices .device-scene > figcaption { color: #9b919f; }
.pymes { border-top: 1px solid #ffffff09; padding-block: 76px; }
.pymes-photo .editorial-photo { object-position: 55% center; filter: brightness(.8) saturate(.75); }
.pymes-photo-overlay { background: linear-gradient(0deg, #090a0e, transparent 40%, transparent 75%, #090a0e); }
.pymes-photo-text { display: none; }
.growth-panel { inset: auto 3% 30px auto; width: 220px; padding: 20px; z-index: 3; background: linear-gradient(135deg, #24202be8, #14141bea); border-color: #ffffff30; }
.growth-panel h3 { font-size: 20px; margin: 10px 0 16px; }
.growth-panel .eyebrow { letter-spacing: .8px; }
.growth-bars { height: 60px; }
.business-types { column-gap: 16px; }
.contact { background: radial-gradient(ellipse at 23% 70%, #ff005814, transparent 50%), #090a0e; }
.technology-visual { margin-top: 12px; height: 300px; }
.technology-visual img { filter: brightness(.9); }
.contact-form { background: #17171e; }
.site-footer { background: #090a0e; }
@media (min-width: 1600px) { .hero-layout { min-height: 580px; } .hero-product { margin-right: -35px; } }
@media (max-width: 1100px) {
    .hero { padding-top: 128px; }
    .hero-layout { grid-template-columns: 1fr 1fr; min-height: 460px; gap: 20px; }
    .hero h1 { font-size: 43px; }
    .hero-description { font-size: 13px; }
    .integrations .split-layout, .pymes-layout { gap: 24px; grid-template-columns: 1fr 1fr; }
    .integration-visual, .pymes-photo { height: 430px; }
    .order-journey { width: 195px; right: 0; padding: 13px; }
    .reports-layout { gap: 35px; }
    .growth-panel { width: 200px; right: 0; }
}
@media (max-width: 800px) {
    .hero-layout { grid-template-columns: 1fr; min-height: 0; gap: 24px; }
    .hero-copy { max-width: 580px; margin-inline: auto; }
    .hero h1 { font-size: clamp(40px, 7.2vw, 57px); }
    .hero-product { max-width: 620px; width: 100%; margin-inline: auto; padding-top: 35px; }
    .integrations .split-layout, .pymes-layout, .reports-layout { grid-template-columns: 1fr; gap: 28px; }
    .integration-visual, .pymes-photo { height: 430px; width: 100%; }
    .editorial-scene .editorial-photo { -webkit-mask-image: linear-gradient(0deg, transparent, #000 14%, #000 89%, transparent); mask-image: linear-gradient(0deg, transparent, #000 14%, #000 89%, transparent); }
    .order-journey { width: 225px; right: 7%; }
    .report-visual { width: calc(100% - 48px); margin-right: 48px; margin-bottom: 40px; }
    .growth-panel { right: 6%; bottom: 35px; width: 220px; }
    .integrations, .pymes { padding-bottom: 50px; }
    .hero-scroll { margin-top: 22px; }
}
@media (max-width: 540px) {
    :root { --section-space: 56px; }
    .hero { padding-top: 112px; padding-bottom: 26px; }
    .hero h1 { font-size: clamp(32px, 9.4vw, 45px); }
    .hero-description { font-size: 13px; line-height: 1.7; }
    .hero-product { padding-top: 24px; padding-bottom: 72px; }
    .hero-copy .button { padding-inline: 17px; }
    .hero .event-invoice { display: none; }
    .hero .event-sale { top: -7px; left: 0; }
    .hero .event-stock { right: 25%; bottom: 45px; }
    .hero-benefits { gap: 12px; margin-top: 24px; }
    .integration-visual, .pymes-photo { height: 350px; min-height: 350px; }
    .order-journey { top: 23%; right: 0; width: 176px; padding: 11px; }
    .order-journey li { min-height: 44px; font-size: 9px; gap: 8px; }
    .photo-caption { left: 4%; bottom: 14px; font-size: 8px; }
    .report-visual { width: calc(100% - 28px); margin-right: 28px; padding: 6px; border-width: 5px; }
    .report-phone { width: 104px; right: -31px; bottom: -36px; padding: 21px 7px 11px; border-width: 4px; border-radius: 17px; }
    .report-phone .phone-brand { font-size: 9px; }
    .report-phone h3 { font-size: 10px; }
    .report-phone > div b { font-size: 8px; }
    .report-phone > div span { font-size: 6px; }
    .report-phone > small { font-size: 4px; }
    .report-phone > div:not(.report-phone-notch) { padding: 6px 4px; }
    .report-finance { padding: 10px 6px; }
    .report-finance b { font-size: 8px; }
    .report-finance span { font-size: 6px; }
    .report-visual > figcaption { font-size: 7px; padding-right: 75px; }
    .growth-panel { right: 0; bottom: 25px; width: 185px; padding: 16px; }
    .growth-panel h3 { font-size: 17px; }
    .growth-bars { height: 48px; }
    .growth-panel p { font-size: 8px; }
    .technology-visual { height: 230px; }
}
@media (prefers-reduced-motion: reduce) { .hero-product .laptop { transform: perspective(1300px) rotateY(-5deg) rotateX(2deg) rotateZ(-1deg); } }

/* Segundo bloque: ecosistema con conexiones curvas y núcleo luminoso. */
#que-es { padding-block: 48px 60px; overflow: hidden; background: radial-gradient(ellipse at 50% 64%, rgba(var(--apliton-primary-rgb), .045), transparent 60%), #fdfcfe; }
#que-es .section-heading h2 { color: #111118; font-size: clamp(34px, 3.5vw, 60px); font-weight: 800; letter-spacing: -.045em; }
#que-es .section-heading h2 span { color: var(--apliton-primary); font-weight: 800; }
#que-es .section-heading .eyebrow { color: #777b88; font-size: 11px; font-weight: 700; letter-spacing: 3.2px; }
#que-es .section-heading > p:not(.eyebrow) { color: #82838f; font-size: clamp(14px, 1.25vw, 20px); line-height: 1.5; margin-top: 20px; }
#que-es .ecosystem { width: min(1280px, 100%); height: 560px; margin-top: 34px; }
#que-es .ecosystem::before { content: ''; position: absolute; width: 1200px; aspect-ratio: 1; left: 50%; top: 53%; transform: translate(-50%, -50%); background: repeating-radial-gradient(circle, transparent 0 94px, #ff005807 95px 96px, transparent 97px 140px); pointer-events: none; }
#que-es .ecosystem-node { z-index: 2; width: 180px; height: 132px; min-height: 132px; padding: 18px 12px; background: #ffffffed; border: 1px solid #f1e5ee; border-radius: 17px; box-shadow: 0 13px 32px #ff005807; }
#que-es .ecosystem-node > i { display: grid; place-items: center; width: 58px; height: 58px; flex-shrink: 0; border-radius: 50%; background: #fff0f6; color: var(--apliton-primary); font-size: 28px; }
#que-es .ecosystem-node h3 { color: #171720; font-size: 13px; font-weight: 700; margin-top: 9px; min-height: 26px; }
#que-es .ecosystem-node[data-node='2'] { left: 88%; top: 58%; }
#que-es .ecosystem-node[data-node='5'] { left: 12%; top: 58%; }
#que-es .node-status { width: 6px; height: 6px; top: 13px; right: 13px; opacity: .8; box-shadow: 0 0 0 3px #ff005808, 0 0 8px #ff005830; }
#que-es .ecosystem-core { z-index: 3; top: 53%; width: 204px; min-height: 188px; border-radius: 24px; background: radial-gradient(ellipse at 80% 0, #4b1839, transparent 60%), #19171f; border: 1px solid #ff85b4; box-shadow: inset 0 0 16px #ff005825, 0 0 0 7px #ff00580a, 0 12px 38px #ff005824; }
#que-es .ecosystem-core > .brand-symbol { width: 48px; height: 48px; }
#que-es .ecosystem-core > b { color: #fff; font-size: 21px; font-weight: 800; margin-top: 14px; }
#que-es .ecosystem-core > small { color: #bcb5c1; font-size: 10px; margin-top: 9px; }
#que-es .ecosystem-core::before { inset: -9px; border-radius: 31px; border-color: #ff005866; box-shadow: 0 0 18px #ff005816; }
#que-es .ecosystem-core::after { content: ''; position: absolute; inset: -48px; z-index: -1; border-radius: 50%; background: radial-gradient(circle, #ff005819, #ff005806 67%, transparent 68%); pointer-events: none; }
#que-es .ecosystem.is-visible .ecosystem-core::before { animation-iteration-count: 1; }
#que-es .ecosystem-caption { display: none; }
@media (max-width: 1100px) {
    #que-es .ecosystem { height: 500px; }
    #que-es .ecosystem-node { width: 150px; height: 116px; min-height: 116px; padding: 14px 9px; }
    #que-es .ecosystem-node > i { width: 48px; height: 48px; font-size: 25px; }
    #que-es .ecosystem-node h3 { font-size: 11px; }
    #que-es .ecosystem-core { width: 174px; min-height: 164px; }
    #que-es .ecosystem-core > b { font-size: 18px; }
    #que-es .ecosystem-core > small { font-size: 8px; }
}
@media (max-width: 800px) {
    #que-es { padding-block: 52px; }
    #que-es .ecosystem { height: 440px; }
    #que-es .ecosystem-node { width: 124px; }
    #que-es .ecosystem-node h3 { font-size: 10px; }
    #que-es .ecosystem-core { width: 144px; min-height: 148px; padding-inline: 8px; }
    #que-es .ecosystem-core > small { font-size: 7px; }
}
@media (max-width: 540px) {
    #que-es { padding-block: 46px; }
    #que-es .section-heading h2 { font-size: clamp(28px, 7.8vw, 36px); }
    #que-es .section-heading .eyebrow { font-size: 8px; letter-spacing: 1.8px; }
    #que-es .section-heading > p:not(.eyebrow) { font-size: 13px; margin-top: 16px; }
    #que-es .ecosystem { height: auto; margin-top: 30px; }
    #que-es .ecosystem-node { width: auto; height: 110px; min-height: 110px; padding: 12px 5px; }
    #que-es .ecosystem-node > i { width: 42px; height: 42px; font-size: 22px; }
    #que-es .ecosystem-node h3 { font-size: 8px; line-height: 1.4; }
    #que-es .ecosystem-core { top: auto; width: 100%; min-height: 128px; border-radius: 15px; padding: 13px 5px; }
    #que-es .ecosystem-core > .brand-symbol { width: 32px; height: 34px; }
    #que-es .ecosystem-core > b { font-size: 11px; margin-top: 9px; }
    #que-es .ecosystem-core > small { font-size: 6px; }
    #que-es .ecosystem-core::before { inset: -5px; border-radius: 20px; }
    #que-es .ecosystem-core::after { inset: -20px; }
    #que-es .node-status { top: 9px; right: 9px; width: 4px; height: 4px; }
}