/* ============================================================
   PLATFORMS PAGE - FINAL V3
   YA PÍDELO
============================================================ */


/* ============================================================
   HERO
============================================================ */

.platforms-hero-v3 {
    position: relative;

    min-height: 100svh;

    display: flex;

    align-items: center;

    overflow: hidden;

    padding:
        clamp(145px, 14vw, 185px)
        0
        clamp(90px, 8vw, 120px);

    background:
        radial-gradient(
            circle at 78% 18%,
            rgba(99, 102, 241, 0.13),
            transparent 30%
        ),
        radial-gradient(
            circle at 9% 75%,
            rgba(6, 182, 212, 0.07),
            transparent 27%
        ),
        linear-gradient(
            180deg,
            #ffffff 0%,
            #f8faff 100%
        );
}


.platforms-hero-grid {
    position: absolute;

    inset: 0;

    pointer-events: none;

    background-image:
        linear-gradient(
            rgba(79, 70, 229, 0.03) 1px,
            transparent 1px
        ),
        linear-gradient(
            90deg,
            rgba(79, 70, 229, 0.03) 1px,
            transparent 1px
        );

    background-size:
        50px 50px;

    -webkit-mask-image:
        linear-gradient(
            to bottom,
            black,
            transparent 88%
        );

    mask-image:
        linear-gradient(
            to bottom,
            black,
            transparent 88%
        );
}


.platforms-hero-glow {
    position: absolute;

    border-radius: 50%;

    filter:
        blur(110px);

    pointer-events: none;
}


.platforms-hero-glow-one {
    width: 540px;
    height: 540px;

    left: -280px;
    top: 100px;

    background:
        rgba(99, 102, 241, 0.14);
}


.platforms-hero-glow-two {
    width: 630px;
    height: 630px;

    right: -260px;
    top: 15px;

    background:
        rgba(124, 58, 237, 0.12);
}


.platforms-hero-v3-container {
    position: relative;

    z-index: 2;

    display: grid;

    grid-template-columns:
        minmax(0, 0.92fr)
        minmax(500px, 1.08fr);

    align-items: center;

    gap:
        clamp(45px, 6vw, 90px);
}


/* ============================================================
   HERO TEXTO
============================================================ */

.platforms-hero-v3-content {
    position: relative;

    z-index: 3;
}


.platforms-hero-v3-title {
    max-width: 800px;

    font-family:
        "Manrope",
        sans-serif;

    font-size:
        clamp(3.25rem, 5.8vw, 5.9rem);

    line-height: 0.98;

    letter-spacing: -0.063em;

    font-weight: 800;

    margin-bottom: 28px;
}


.platforms-hero-v3-description {
    max-width: 690px;

    color:
        var(--color-text-soft);

    font-size:
        clamp(1.02rem, 1.35vw, 1.17rem);

    line-height: 1.8;

    margin-bottom: 30px;
}


.platforms-hero-v3-actions {
    display: flex;

    flex-wrap: wrap;

    gap: 12px;

    margin-bottom: 34px;
}


/* ============================================================
   HERO MINI STATS
============================================================ */

.platforms-hero-mini-stats {
    display: grid;

    grid-template-columns:
        repeat(3, 1fr);

    gap: 10px;

    max-width: 700px;
}


.platforms-hero-mini-stats > div {
    min-height: 92px;

    padding:
        15px 16px;

    border-radius: 14px;

    background:
        rgba(255, 255, 255, 0.76);

    border:
        1px solid
        rgba(15, 23, 42, 0.06);

    backdrop-filter:
        blur(12px);

    box-shadow:
        0 8px 25px
        rgba(15, 23, 42, 0.04);
}


.platforms-hero-mini-stats strong {
    display: block;

    color:
        var(--color-primary);

    font-size: 0.72rem;

    margin-bottom: 5px;
}


.platforms-hero-mini-stats span {
    display: block;

    color:
        var(--color-text-soft);

    font-size: 0.63rem;

    line-height: 1.5;
}


/* ============================================================
   HERO ECOSYSTEM
============================================================ */

.platforms-ecosystem {
    position: relative;

    width:
        min(100%, 620px);

    aspect-ratio: 1;

    margin-inline: auto;

    display: grid;

    place-items: center;
}


.platforms-ecosystem-orbit {
    position: absolute;

    left: 50%;
    top: 50%;

    transform:
        translate(-50%, -50%);

    border-radius: 50%;

    border:
        1px solid
        rgba(79, 70, 229, 0.13);

    pointer-events: none;
}


.ecosystem-orbit-one {
    width: 88%;
    height: 88%;

    animation:
        platforms-orbit-spin
        30s linear
        infinite;
}


.ecosystem-orbit-two {
    width: 63%;
    height: 63%;

    border-style: dashed;

    border-color:
        rgba(124, 58, 237, 0.16);

    animation:
        platforms-orbit-spin-reverse
        23s linear
        infinite;
}


.ecosystem-orbit-one::before,
.ecosystem-orbit-two::before {
    content: "";

    position: absolute;

    width: 9px;
    height: 9px;

    border-radius: 50%;

    background:
        var(--color-primary);

    box-shadow:
        0 0 18px
        rgba(79, 70, 229, 0.45);
}


.ecosystem-orbit-one::before {
    left: 11%;
    top: 24%;
}


.ecosystem-orbit-two::before {
    right: 10%;
    bottom: 22%;

    background:
        var(--color-secondary);
}


@keyframes platforms-orbit-spin {

    from {
        transform:
            translate(-50%, -50%)
            rotate(0deg);
    }

    to {
        transform:
            translate(-50%, -50%)
            rotate(360deg);
    }

}


@keyframes platforms-orbit-spin-reverse {

    from {
        transform:
            translate(-50%, -50%)
            rotate(360deg);
    }

    to {
        transform:
            translate(-50%, -50%)
            rotate(0deg);
    }

}


/* ============================================================
   HERO CORE
============================================================ */

.platforms-ecosystem-core {
    position: relative;

    z-index: 6;

    width: 180px;
    height: 180px;

    display: flex;

    flex-direction: column;

    align-items: center;

    justify-content: center;

    text-align: center;

    border-radius: 50%;

    color: white;

    background:
        linear-gradient(
            135deg,
            var(--color-primary),
            var(--color-secondary)
        );

    box-shadow:
        0 30px 70px
        rgba(79, 70, 229, 0.26);
}


.platforms-ecosystem-core::before {
    content: "";

    position: absolute;

    inset: -17px;

    border-radius: 50%;

    border:
        1px solid
        rgba(79, 70, 229, 0.11);
}


.platforms-ecosystem-core-icon {
    width: 48px;
    height: 48px;

    display: grid;

    place-items: center;

    margin-bottom: 10px;

    border-radius: 14px;

    background:
        rgba(255, 255, 255, 0.12);

    border:
        1px solid
        rgba(255, 255, 255, 0.15);

    font-size: 1.05rem;
}


.platforms-ecosystem-core small {
    color:
        rgba(255, 255, 255, 0.58);

    font-size: 0.46rem;

    letter-spacing: 0.1em;

    margin-bottom: 3px;
}


.platforms-ecosystem-core strong {
    font-family:
        "Manrope",
        sans-serif;

    font-size: 0.85rem;
}


/* ============================================================
   HERO NODES
============================================================ */

.platforms-ecosystem-node {
    position: absolute;

    z-index: 8;

    min-width: 135px;

    display: flex;

    align-items: center;

    gap: 9px;

    padding:
        11px 13px;

    border-radius: 14px;

    border:
        1px solid
        rgba(15, 23, 42, 0.07);

    background:
        rgba(255, 255, 255, 0.94);

    backdrop-filter:
        blur(14px);

    color:
        var(--color-text);

    box-shadow:
        0 17px 42px
        rgba(15, 23, 42, 0.11);

    font-size: 0.63rem;

    font-weight: 700;

    transition:
        transform var(--transition),
        border-color var(--transition),
        box-shadow var(--transition);

    animation:
        platforms-node-float
        5s ease-in-out
        infinite;
}


.platforms-ecosystem-node:hover {
    transform:
        translateY(-5px)
        scale(1.03);

    border-color:
        rgba(79, 70, 229, 0.18);

    box-shadow:
        0 24px 50px
        rgba(15, 23, 42, 0.15);
}


.platforms-ecosystem-node i {
    width: 34px;
    height: 34px;

    flex-shrink: 0;

    display: grid;

    place-items: center;

    border-radius: 10px;

    color:
        var(--color-primary);

    background:
        rgba(79, 70, 229, 0.08);
}


.ecosystem-directory {
    left: 1%;
    top: 17%;
}


.ecosystem-catalog {
    right: 1%;
    top: 18%;

    animation-delay: -0.8s;
}


.ecosystem-restaurant {
    left: -1%;
    top: 47%;

    animation-delay: -1.6s;
}


.ecosystem-pos {
    right: -1%;
    top: 47%;

    animation-delay: -2.4s;
}


.ecosystem-tours {
    left: 8%;
    bottom: 12%;

    animation-delay: -3.2s;
}


.ecosystem-realestate {
    right: 5%;
    bottom: 10%;

    animation-delay: -4s;
}


@keyframes platforms-node-float {

    0%,
    100% {
        transform:
            translateY(0);
    }

    50% {
        transform:
            translateY(-8px);
    }

}


/* ============================================================
   EXPLORER SECTION
============================================================ */

.platform-explorer-section {
    position: relative;

    background:
        linear-gradient(
            180deg,
            #ffffff,
            #f7f9ff
        );
}


/* ============================================================
   TABS
============================================================ */

.platform-explorer-tabs {
    display: flex;

    flex-wrap: wrap;

    justify-content: center;

    gap: 8px;

    margin-bottom: 34px;
}


.platform-explorer-tab {
    min-height: 45px;

    display: inline-flex;

    align-items: center;

    justify-content: center;

    gap: 8px;

    padding:
        0 15px;

    border-radius: 12px;

    border:
        1px solid
        var(--color-border);

    background: white;

    color:
        var(--color-text-soft);

    font-size: 0.70rem;

    font-weight: 700;

    box-shadow:
        0 6px 18px
        rgba(15, 23, 42, 0.035);

    transition:
        color var(--transition),
        background var(--transition),
        border-color var(--transition),
        transform var(--transition),
        box-shadow var(--transition);
}


.platform-explorer-tab:hover {
    color:
        var(--color-primary);

    transform:
        translateY(-2px);

    border-color:
        rgba(79, 70, 229, 0.17);
}


.platform-explorer-tab.active {
    color: white;

    border-color: transparent;

    background:
        linear-gradient(
            135deg,
            var(--color-primary),
            var(--color-secondary)
        );

    box-shadow:
        0 12px 28px
        rgba(79, 70, 229, 0.22);
}


/* ============================================================
   EXPLORER CARD
============================================================ */

.platform-explorer-card {
    display: grid;

    grid-template-columns:
        minmax(0, 0.85fr)
        minmax(480px, 1.15fr);

    gap:
        clamp(40px, 6vw, 80px);

    align-items: stretch;

    min-height: 620px;

    padding:
        clamp(38px, 5vw, 60px);

    border-radius: 32px;

    overflow: hidden;

    color: white;

    background:
        radial-gradient(
            circle at 84% 15%,
            rgba(99, 102, 241, 0.27),
            transparent 30%
        ),
        radial-gradient(
            circle at 5% 95%,
            rgba(6, 182, 212, 0.09),
            transparent 26%
        ),
        linear-gradient(
            135deg,
            #0c1228,
            #151c3d
        );

    box-shadow:
        0 35px 90px
        rgba(15, 23, 42, 0.16);
}


/* ============================================================
   EXPLORER COPY
============================================================ */

.platform-explorer-copy {
    display: flex;

    flex-direction: column;

    justify-content: center;

    min-width: 0;
}


.platform-explorer-overline {
    display: block;

    color:
        rgba(255, 255, 255, 0.45);

    font-size: 0.58rem;

    font-weight: 800;

    letter-spacing: 0.11em;

    margin-bottom: 15px;
}


.platform-explorer-copy h3 {
    max-width: 680px;

    font-family:
        "Manrope",
        sans-serif;

    font-size:
        clamp(2.15rem, 3.5vw, 3.7rem);

    line-height: 1.06;

    letter-spacing: -0.047em;

    margin-bottom: 18px;
}


.platform-explorer-copy > p {
    max-width: 680px;

    color:
        rgba(255, 255, 255, 0.63);

    line-height: 1.8;

    margin-bottom: 24px;
}


/* ============================================================
   IDEAL
============================================================ */

.platform-explorer-ideal {
    display: flex;

    flex-direction: column;

    gap: 4px;

    padding:
        13px 15px;

    margin-bottom: 20px;

    border-radius: 13px;

    background:
        rgba(255, 255, 255, 0.055);

    border:
        1px solid
        rgba(255, 255, 255, 0.08);
}


.platform-explorer-ideal span {
    color:
        rgba(255, 255, 255, 0.40);

    font-size: 0.45rem;

    letter-spacing: 0.08em;

    font-weight: 800;
}


.platform-explorer-ideal strong {
    color:
        rgba(255, 255, 255, 0.84);

    font-size: 0.68rem;

    line-height: 1.45;
}


/* ============================================================
   FEATURES
============================================================ */

.platform-explorer-features {
    display: grid;

    grid-template-columns:
        repeat(2, 1fr);

    gap: 8px;

    margin-bottom: 27px;
}


.platform-explorer-features > div {
    min-height: 48px;

    display: flex;

    align-items: center;

    gap: 8px;

    padding:
        9px 11px;

    border-radius: 11px;

    background:
        rgba(255, 255, 255, 0.05);

    border:
        1px solid
        rgba(255, 255, 255, 0.075);

    color:
        rgba(255, 255, 255, 0.69);

    font-size: 0.62rem;

    font-weight: 600;
}


.platform-explorer-features i {
    width: 20px;
    height: 20px;

    display: grid;

    place-items: center;

    flex-shrink: 0;

    border-radius: 50%;

    color: #86efac;

    background:
        rgba(34, 197, 94, 0.08);

    font-size: 0.43rem;
}


/* ============================================================
   COMMERCIAL
============================================================ */

.platform-explorer-commercial {
    display: flex;

    align-items: center;

    justify-content: space-between;

    gap: 20px;

    margin-top: auto;
}


.platform-explorer-commercial small {
    display: block;

    color:
        rgba(255, 255, 255, 0.40);

    font-size: 0.45rem;

    letter-spacing: 0.08em;

    margin-bottom: 3px;
}


.platform-explorer-commercial strong {
    display: block;

    font-size: 0.9rem;

    color: white;
}


/* ============================================================
   DYNAMIC VISUAL
============================================================ */

.platform-explorer-visual {
    position: relative;

    min-height: 500px;

    display: grid;

    place-items: center;

    transition:
        opacity 0.18s ease,
        transform 0.18s ease;
}


.platform-explorer-visual.is-changing {
    opacity: 0;

    transform:
        translateY(8px);
}


.platform-demo {
    position: relative;

    width: 100%;

    min-height: 500px;

    display: grid;

    place-items: center;
}


/* ============================================================
   DIRECTORY DEMO
============================================================ */

.directory-map {
    position: relative;

    width: 90%;
    height: 420px;

    overflow: hidden;

    border-radius: 25px;

    background:
        linear-gradient(
            145deg,
            #18223e,
            #10182d
        );

    border:
        1px solid
        rgba(255, 255, 255, 0.08);

    box-shadow:
        0 25px 60px
        rgba(0, 0, 0, 0.20);
}


.directory-map::before {
    content: "";

    position: absolute;

    inset: 0;

    background-image:
        linear-gradient(
            rgba(255, 255, 255, 0.025) 1px,
            transparent 1px
        ),
        linear-gradient(
            90deg,
            rgba(255, 255, 255, 0.025) 1px,
            transparent 1px
        );

    background-size:
        32px 32px;
}


.directory-road {
    position: absolute;

    border-radius: 999px;

    background:
        rgba(255, 255, 255, 0.055);
}


.directory-road-one {
    width: 125%;
    height: 25px;

    left: -10%;
    top: 42%;

    transform:
        rotate(-12deg);
}


.directory-road-two {
    width: 23px;
    height: 130%;

    left: 54%;
    top: -15%;

    transform:
        rotate(18deg);
}


.directory-road-three {
    width: 90%;
    height: 17px;

    left: 8%;
    bottom: 15%;

    transform:
        rotate(8deg);
}


.directory-business-pin {
    position: absolute;

    z-index: 4;

    left: 50%;
    top: 44%;

    transform:
        translate(-50%, -50%);

    display: flex;

    flex-direction: column;

    align-items: center;

    gap: 8px;
}


.directory-business-pin > i {
    width: 62px;
    height: 62px;

    display: grid;

    place-items: center;

    border-radius:
        50% 50% 50% 9px;

    transform:
        rotate(-45deg);

    color: white;

    background:
        linear-gradient(
            135deg,
            var(--color-primary),
            var(--color-secondary)
        );

    box-shadow:
        0 15px 40px
        rgba(79, 70, 229, 0.35);
}


.directory-business-pin > i::before {
    transform:
        rotate(45deg);
}


.directory-business-pin > span {
    padding:
        5px 8px;

    border-radius: 7px;

    color: white;

    background:
        rgba(8, 12, 27, 0.82);

    font-size: 0.52rem;

    font-weight: 700;
}


.directory-user {
    position: absolute;

    z-index: 3;

    width: 35px;
    height: 35px;

    display: grid;

    place-items: center;

    border-radius: 50%;

    color: #c3c8ff;

    background:
        rgba(99, 102, 241, 0.15);

    border:
        1px solid
        rgba(139, 143, 255, 0.20);

    font-size: 0.58rem;
}


.directory-user-one {
    left: 18%;
    top: 24%;
}


.directory-user-two {
    right: 15%;
    bottom: 18%;
}


.directory-profile-card {
    position: absolute;

    z-index: 5;

    left: 5%;
    bottom: 26px;

    min-width: 310px;

    display: grid;

    grid-template-columns:
        auto 1fr auto;

    align-items: center;

    gap: 11px;

    padding:
        13px 15px;

    border-radius: 15px;

    color:
        var(--color-text);

    background:
        rgba(255, 255, 255, 0.96);

    box-shadow:
        0 20px 50px
        rgba(0, 0, 0, 0.23);
}


.directory-profile-icon {
    width: 40px;
    height: 40px;

    display: grid;

    place-items: center;

    border-radius: 11px;

    color: white;

    background:
        linear-gradient(
            135deg,
            var(--color-primary),
            var(--color-secondary)
        );
}


.directory-profile-card small {
    display: block;

    color: #969dad;

    font-size: 0.45rem;

    margin-bottom: 2px;
}


.directory-profile-card strong {
    display: block;

    font-size: 0.65rem;

    margin-bottom: 1px;
}


.directory-profile-card span {
    display: block;

    color:
        var(--color-text-soft);

    font-size: 0.50rem;
}


.directory-profile-card > i {
    color: #22c55e;

    font-size: 1.1rem;
}


/* ============================================================
   CATALOG DEMO
============================================================ */

.platform-demo-catalog {
    display: grid;

    place-items: center;
}


.catalog-demo-phone {
    width: 225px;
    min-height: 430px;

    padding: 17px;

    border-radius: 31px;

    background: white;

    color:
        var(--color-text);

    box-shadow:
        0 30px 70px
        rgba(0, 0, 0, 0.27);

    transform:
        rotate(-3deg);
}


.catalog-demo-notch {
    width: 56px;
    height: 6px;

    margin:
        0 auto 16px;

    border-radius: 999px;

    background:
        #d9dce7;
}


.catalog-demo-header small {
    display: block;

    color: #999faf;

    font-size: 0.43rem;

    margin-bottom: 2px;
}


.catalog-demo-header strong {
    font-size: 0.78rem;
}


.catalog-demo-grid {
    display: grid;

    grid-template-columns:
        repeat(2, 1fr);

    gap: 9px;

    margin-top: 16px;
}


.catalog-demo-grid > div {
    min-height: 130px;

    padding: 10px;

    border-radius: 12px;

    background:
        #f5f6fb;
}


.catalog-demo-grid i {
    height: 76px;

    display: grid;

    place-items: center;

    border-radius: 9px;

    color:
        var(--color-primary);

    background:
        linear-gradient(
            145deg,
            #eceeff,
            #f8f9ff
        );

    font-size: 1.25rem;
}


.catalog-demo-grid span {
    display: block;

    width: 65%;
    height: 5px;

    margin-top: 9px;

    border-radius: 999px;

    background:
        #dfe2ec;
}


.catalog-demo-grid small {
    display: block;

    margin-top: 7px;

    color:
        var(--color-text);

    font-size: 0.52rem;

    font-weight: 750;
}


.catalog-demo-floating {
    position: absolute;

    right: 7%;
    bottom: 45px;

    display: flex;

    align-items: center;

    gap: 10px;

    padding:
        13px 15px;

    border-radius: 14px;

    color:
        var(--color-text);

    background: white;

    box-shadow:
        0 20px 50px
        rgba(0, 0, 0, 0.23);
}


.catalog-demo-floating > i {
    width: 40px;
    height: 40px;

    display: grid;

    place-items: center;

    border-radius: 11px;

    color: white;

    background:
        linear-gradient(
            135deg,
            var(--color-primary),
            var(--color-secondary)
        );
}


.catalog-demo-floating small {
    display: block;

    color: #969dad;

    font-size: 0.44rem;

    margin-bottom: 2px;
}


.catalog-demo-floating strong {
    display: block;

    font-size: 0.62rem;
}


/* ============================================================
   RESTAURANT DEMO
============================================================ */

.platform-demo-restaurant {
    grid-template-columns:
        minmax(0, 1fr)
        minmax(190px, 0.65fr);

    gap: 18px;

    align-items: center;
}


.restaurant-menu-demo {
    width: 100%;

    padding: 22px;

    border-radius: 22px;

    background: white;

    color:
        var(--color-text);

    box-shadow:
        0 25px 60px
        rgba(0, 0, 0, 0.22);
}


.restaurant-menu-header {
    display: flex;

    align-items: center;

    gap: 11px;

    padding-bottom: 15px;

    margin-bottom: 13px;

    border-bottom:
        1px solid
        #eceef4;
}


.restaurant-menu-header > i {
    width: 41px;
    height: 41px;

    display: grid;

    place-items: center;

    border-radius: 11px;

    color: white;

    background:
        linear-gradient(
            135deg,
            var(--color-primary),
            var(--color-secondary)
        );
}


.restaurant-menu-header small {
    display: block;

    color: #969dad;

    font-size: 0.44rem;

    margin-bottom: 2px;
}


.restaurant-menu-header strong {
    display: block;

    font-size: 0.72rem;
}


.restaurant-item {
    display: flex;

    justify-content: space-between;

    gap: 20px;

    padding:
        11px 10px;

    margin-bottom: 7px;

    border-radius: 10px;

    background:
        #f7f8fc;

    font-size: 0.59rem;
}


.restaurant-item span {
    color: #697083;
}


.restaurant-order-demo {
    min-height: 245px;

    display: flex;

    flex-direction: column;

    justify-content: center;

    align-items: center;

    text-align: center;

    padding: 24px;

    border-radius: 22px;

    background:
        linear-gradient(
            145deg,
            rgba(99, 102, 241, 0.18),
            rgba(255, 255, 255, 0.06)
        );

    border:
        1px solid
        rgba(139, 143, 255, 0.17);
}


.restaurant-order-number {
    width: 58px;
    height: 58px;

    display: grid;

    place-items: center;

    margin-bottom: 14px;

    border-radius: 16px;

    color: white;

    background:
        linear-gradient(
            135deg,
            var(--color-primary),
            var(--color-secondary)
        );

    font-size: 0.72rem;

    font-weight: 800;
}


.restaurant-order-demo small {
    color:
        rgba(255, 255, 255, 0.45);

    font-size: 0.46rem;

    margin-bottom: 4px;
}


.restaurant-order-demo strong {
    font-size: 0.72rem;

    margin-bottom: 13px;
}


.restaurant-order-status {
    padding:
        7px 10px;

    border-radius: 999px;

    color: #86efac;

    background:
        rgba(34, 197, 94, 0.08);

    font-size: 0.52rem;
}


/* ============================================================
   POS DEMO
============================================================ */

.platform-demo-pos {
    display: grid;

    place-items: center;
}


.pos-demo-screen {
    width: 90%;

    display: grid;

    grid-template-columns:
        1fr 0.8fr;

    overflow: hidden;

    border:
        8px solid
        #080d1b;

    border-radius:
        20px 20px 10px 10px;

    background:
        #f7f8fc;

    color:
        var(--color-text);

    box-shadow:
        0 28px 65px
        rgba(0, 0, 0, 0.25);
}


.pos-demo-products {
    padding: 18px;

    border-right:
        1px solid
        #eceef4;
}


.pos-demo-title {
    color: #8f96a6;

    font-size: 0.52rem;

    font-weight: 800;

    margin-bottom: 13px;
}


.pos-demo-products button {
    width: calc(50% - 6px);

    min-height: 62px;

    margin:
        3px 2px;

    border-radius: 10px;

    background: white;

    border:
        1px solid
        #e9ebf2;

    color:
        var(--color-text-soft);

    font-size: 0.54rem;
}


.pos-demo-sale {
    padding: 18px;

    background: white;
}


.pos-demo-sale > small {
    display: block;

    color: #969dad;

    font-size: 0.45rem;

    margin-bottom: 12px;
}


.pos-demo-sale > div {
    display: flex;

    justify-content: space-between;

    gap: 15px;

    padding:
        9px 0;

    border-bottom:
        1px solid
        #edf0f4;

    font-size: 0.56rem;
}


.pos-demo-sale > div span {
    color: #70778a;
}


.pos-demo-total {
    margin-top: 10px;

    border-bottom: 0 !important;

    font-size: 0.65rem !important;
}


.pos-demo-sale > button {
    width: 100%;

    min-height: 42px;

    margin-top: 12px;

    border-radius: 10px;

    color: white;

    background:
        linear-gradient(
            135deg,
            var(--color-primary),
            var(--color-secondary)
        );

    font-size: 0.58rem;

    font-weight: 750;
}


.pos-demo-inventory {
    position: absolute;

    right: 6%;
    bottom: 37px;

    display: flex;

    align-items: center;

    gap: 10px;

    padding:
        12px 14px;

    border-radius: 14px;

    color:
        var(--color-text);

    background: white;

    box-shadow:
        0 20px 50px
        rgba(0, 0, 0, 0.23);
}


.pos-demo-inventory > i {
    width: 38px;
    height: 38px;

    display: grid;

    place-items: center;

    border-radius: 10px;

    color:
        var(--color-primary);

    background:
        rgba(79, 70, 229, 0.08);
}


.pos-demo-inventory small {
    display: block;

    color: #969dad;

    font-size: 0.44rem;

    margin-bottom: 2px;
}


.pos-demo-inventory strong {
    display: block;

    font-size: 0.61rem;
}


/* ============================================================
   TOURS DEMO
============================================================ */

.platform-demo-tours {
    display: grid;

    place-items: center;
}


.tours-demo-card {
    width:
        min(78%, 390px);

    overflow: hidden;

    border-radius: 23px;

    background: white;

    color:
        var(--color-text);

    box-shadow:
        0 28px 65px
        rgba(0, 0, 0, 0.25);
}


.tours-demo-cover {
    height: 185px;

    display: flex;

    flex-direction: column;

    align-items: center;

    justify-content: center;

    gap: 10px;

    color: white;

    background:
        linear-gradient(
            145deg,
            #5b5be7,
            #0ea5e9
        );
}


.tours-demo-cover i {
    font-size: 2.4rem;
}


.tours-demo-cover span {
    font-size: 0.48rem;

    font-weight: 800;

    letter-spacing: 0.1em;
}


.tours-demo-content {
    padding: 21px;
}


.tours-demo-content > small {
    display: block;

    color: #969dad;

    font-size: 0.43rem;

    margin-bottom: 3px;
}


.tours-demo-content > strong {
    display: block;

    font-size: 0.75rem;

    margin-bottom: 16px;
}


.tours-itinerary {
    display: flex;

    align-items: center;

    margin-bottom: 15px;
}


.tours-itinerary span {
    width: 27px;
    height: 27px;

    display: grid;

    place-items: center;

    border-radius: 50%;

    background:
        #eceef5;

    color: #7a8192;

    font-size: 0.48rem;

    font-weight: 750;
}


.tours-itinerary span.active {
    color: white;

    background:
        var(--color-primary);
}


.tours-itinerary i {
    flex: 1;

    height: 2px;

    background:
        #e3e6ef;
}


.tours-demo-content p {
    color:
        var(--color-text-soft);

    font-size: 0.57rem;

    line-height: 1.65;
}


.tours-demo-floating {
    position: absolute;

    right: 7%;
    top: 70px;

    display: flex;

    align-items: center;

    gap: 10px;

    padding:
        12px 14px;

    border-radius: 14px;

    color:
        var(--color-text);

    background: white;

    box-shadow:
        0 20px 50px
        rgba(0, 0, 0, 0.22);
}


.tours-demo-floating > i {
    width: 39px;
    height: 39px;

    display: grid;

    place-items: center;

    border-radius: 11px;

    color: white;

    background:
        linear-gradient(
            135deg,
            var(--color-primary),
            var(--color-secondary)
        );
}


.tours-demo-floating small {
    display: block;

    color: #969dad;

    font-size: 0.44rem;

    margin-bottom: 2px;
}


.tours-demo-floating strong {
    font-size: 0.62rem;
}


/* ============================================================
   REAL ESTATE DEMO
============================================================ */

.platform-demo-realestate {
    display: grid;

    place-items: center;
}


.realestate-property {
    width:
        min(82%, 430px);

    overflow: hidden;

    border-radius: 23px;

    background: white;

    color:
        var(--color-text);

    box-shadow:
        0 28px 65px
        rgba(0, 0, 0, 0.25);
}


.realestate-house {
    height: 220px;

    display: grid;

    place-items: center;

    color: white;

    background:
        linear-gradient(
            145deg,
            #4f46e5,
            #7c3aed
        );

    font-size: 3rem;
}


.realestate-property-info {
    padding: 21px;
}


.realestate-property-info > small {
    display: block;

    color: #969dad;

    font-size: 0.43rem;

    margin-bottom: 3px;
}


.realestate-property-info > strong {
    display: block;

    font-size: 0.72rem;

    margin-bottom: 8px;
}


.realestate-property-info h4 {
    font-family:
        "Manrope",
        sans-serif;

    font-size: 1.2rem;

    color:
        var(--color-primary);

    margin-bottom: 14px;
}


.realestate-property-info > div {
    display: flex;

    flex-wrap: wrap;

    gap: 6px;
}


.realestate-property-info > div span {
    padding:
        5px 8px;

    border-radius: 999px;

    color: #697083;

    background:
        #f2f4f8;

    font-size: 0.49rem;
}


.realestate-lead-card {
    position: absolute;

    right: 5%;
    bottom: 36px;

    display: grid;

    grid-template-columns:
        auto 1fr auto;

    align-items: center;

    gap: 10px;

    padding:
        12px 14px;

    border-radius: 14px;

    color:
        var(--color-text);

    background: white;

    box-shadow:
        0 20px 50px
        rgba(0, 0, 0, 0.23);
}


.realestate-lead-card > i {
    width: 39px;
    height: 39px;

    display: grid;

    place-items: center;

    border-radius: 11px;

    color: white;

    background:
        linear-gradient(
            135deg,
            var(--color-primary),
            var(--color-secondary)
        );
}


.realestate-lead-card small {
    display: block;

    color: #969dad;

    font-size: 0.44rem;

    margin-bottom: 2px;
}


.realestate-lead-card strong {
    font-size: 0.61rem;
}


.realestate-lead-card > span {
    padding:
        5px 8px;

    border-radius: 999px;

    color: #16a34a;

    background:
        rgba(34, 197, 94, 0.09);

    font-size: 0.53rem;

    font-weight: 800;
}


/* ============================================================
   COMPARISON
============================================================ */

.platform-comparison-section {
    background: white;
}


.platform-comparison-wrapper {
    overflow-x: auto;

    padding-bottom: 6px;
}


.platform-comparison-table {
    min-width: 820px;

    overflow: hidden;

    border-radius: 24px;

    border:
        1px solid
        var(--color-border);

    background: white;

    box-shadow:
        0 20px 60px
        rgba(15, 23, 42, 0.06);
}


.comparison-row {
    display: grid;

    grid-template-columns:
        1.6fr
        repeat(5, 1fr);

    min-height: 62px;

    align-items: center;

    border-bottom:
        1px solid
        rgba(15, 23, 42, 0.055);
}


.comparison-row:last-child {
    border-bottom: 0;
}


.comparison-row > div {
    padding:
        0 16px;

    text-align: center;

    color:
        var(--color-text-soft);

    font-size: 0.67rem;
}


.comparison-row > div:first-child {
    display: flex;

    align-items: center;

    gap: 9px;

    text-align: left;

    color:
        var(--color-text);

    font-weight: 700;
}


.comparison-row > div:first-child i {
    width: 30px;
    height: 30px;

    display: grid;

    place-items: center;

    flex-shrink: 0;

    border-radius: 9px;

    color:
        var(--color-primary);

    background:
        rgba(79, 70, 229, 0.08);
}


.comparison-row:not(.comparison-header)
> div:not(:first-child)
i {
    color: #16a34a;
}


.comparison-header {
    min-height: 48px;

    background:
        #f8f9fc;
}


.comparison-header > div {
    color: #8d94a4;

    font-size: 0.55rem;

    font-weight: 750;
}


/* ============================================================
   COMMON SECTION
============================================================ */

.platform-common-section {
    background:
        linear-gradient(
            180deg,
            #ffffff,
            #f8faff
        );
}


.platform-common-card {
    display: grid;

    grid-template-columns:
        minmax(280px, 0.8fr)
        minmax(0, 1.2fr);

    gap:
        clamp(40px, 6vw, 75px);

    align-items: center;

    padding:
        clamp(38px, 5vw, 62px);

    border-radius: 31px;

    border:
        1px solid
        rgba(79, 70, 229, 0.10);

    background:
        radial-gradient(
            circle at 88% 12%,
            rgba(99, 102, 241, 0.08),
            transparent 28%
        ),
        linear-gradient(
            145deg,
            #ffffff,
            #f7f8ff
        );

    box-shadow:
        0 25px 70px
        rgba(15, 23, 42, 0.07);
}


.platform-common-heading h2 {
    font-family:
        "Manrope",
        sans-serif;

    font-size:
        clamp(2.2rem, 3.7vw, 3.9rem);

    line-height: 1.05;

    letter-spacing: -0.047em;

    margin-bottom: 17px;
}


.platform-common-heading > p {
    color:
        var(--color-text-soft);

    line-height: 1.76;
}


.platform-common-grid {
    display: grid;

    grid-template-columns:
        repeat(2, 1fr);

    gap: 10px;
}


.platform-common-item {
    min-height: 105px;

    display: flex;

    align-items: center;

    gap: 12px;

    padding:
        15px;

    border-radius: 15px;

    background: white;

    border:
        1px solid
        rgba(15, 23, 42, 0.06);

    box-shadow:
        0 8px 24px
        rgba(15, 23, 42, 0.04);
}


.platform-common-item > i {
    width: 45px;
    height: 45px;

    flex-shrink: 0;

    display: grid;

    place-items: center;

    border-radius: 12px;

    color:
        var(--color-primary);

    background:
        rgba(79, 70, 229, 0.08);
}


.platform-common-item strong {
    display: block;

    font-size: 0.72rem;

    margin-bottom: 4px;
}


.platform-common-item small {
    display: block;

    color:
        var(--color-text-soft);

    font-size: 0.57rem;

    line-height: 1.45;
}


/* ============================================================
   CUSTOM PROJECT
============================================================ */

.platform-custom-section {
    background: white;
}


.platform-custom-card {
    display: grid;

    grid-template-columns:
        auto 1fr auto;

    align-items: center;

    gap: 28px;

    padding:
        clamp(30px, 4vw, 45px);

    border-radius: 25px;

    color: white;

    background:
        radial-gradient(
            circle at 88% 15%,
            rgba(99, 102, 241, 0.24),
            transparent 28%
        ),
        linear-gradient(
            135deg,
            #0c1228,
            #151c3d
        );

    box-shadow:
        0 25px 70px
        rgba(15, 23, 42, 0.14);
}


.platform-custom-icon {
    width: 68px;
    height: 68px;

    display: grid;

    place-items: center;

    border-radius: 19px;

    color: #c3c8ff;

    background:
        rgba(255, 255, 255, 0.07);

    border:
        1px solid
        rgba(255, 255, 255, 0.09);

    font-size: 1.25rem;
}


.platform-custom-copy > span {
    display: block;

    color:
        rgba(255, 255, 255, 0.44);

    font-size: 0.48rem;

    font-weight: 800;

    letter-spacing: 0.10em;

    margin-bottom: 7px;
}


.platform-custom-copy h2 {
    font-family:
        "Manrope",
        sans-serif;

    font-size:
        clamp(1.7rem, 2.8vw, 2.8rem);

    line-height: 1.08;

    letter-spacing: -0.04em;

    margin-bottom: 10px;
}


.platform-custom-copy h2 strong {
    display: inline;
}


.platform-custom-copy p {
    max-width: 760px;

    color:
        rgba(255, 255, 255, 0.60);

    font-size: 0.78rem;

    line-height: 1.7;
}


/* ============================================================
   ESPACIADOS
============================================================ */

.platform-explorer-section,
.platform-comparison-section,
.platform-common-section,
.platform-custom-section {
    padding-top:
        clamp(65px, 7vw, 100px);

    padding-bottom:
        clamp(65px, 7vw, 100px);
}


/* ============================================================
   RESPONSIVE 1200
============================================================ */

@media (max-width: 1200px) {

    .platforms-hero-v3-container {
        grid-template-columns:
            minmax(0, 0.95fr)
            minmax(440px, 1.05fr);

        gap: 45px;
    }


    .platform-explorer-card {
        grid-template-columns:
            minmax(0, 0.9fr)
            minmax(430px, 1.1fr);

        gap: 40px;
    }

}


/* ============================================================
   RESPONSIVE 1050
============================================================ */

@media (max-width: 1050px) {

    .platforms-hero-v3 {
        min-height: auto;
    }


    .platforms-hero-v3-container {
        grid-template-columns:
            1fr;

        gap: 65px;
    }


    .platforms-hero-v3-content {
        max-width: 820px;
    }


    .platforms-ecosystem {
        width:
            min(100%, 680px);
    }


    .platform-explorer-card {
        grid-template-columns:
            1fr;

        gap: 35px;

        min-height: auto;
    }


    .platform-explorer-copy {
        max-width: 760px;
    }


    .platform-explorer-visual {
        min-height: 500px;
    }


    .platform-common-card {
        grid-template-columns:
            1fr;

        gap: 35px;
    }


    .platform-custom-card {
        grid-template-columns:
            auto 1fr;

        align-items: start;
    }


    .platform-custom-action {
        grid-column:
            1 / -1;

        margin-left: 96px;
    }

}


/* ============================================================
   TABLET
============================================================ */

@media (max-width: 800px) {

    .platforms-hero-v3 {
        padding:
            135px 0 85px;
    }


    .platforms-hero-mini-stats {
        grid-template-columns:
            1fr;
    }


    .platforms-hero-mini-stats > div {
        min-height: auto;
    }


    .platforms-ecosystem {
        min-height: 540px;
    }


    .platform-explorer-tabs {
        justify-content: flex-start;

        overflow-x: auto;

        flex-wrap: nowrap;

        padding-bottom: 6px;

        scrollbar-width: none;
    }


    .platform-explorer-tabs::-webkit-scrollbar {
        display: none;
    }


    .platform-explorer-tab {
        flex-shrink: 0;
    }


    .platform-explorer-commercial {
        align-items: flex-start;

        flex-direction: column;
    }


    .platform-explorer-commercial
    .button {
        width: 100%;
    }


    .platform-common-grid {
        grid-template-columns:
            1fr;
    }

}


/* ============================================================
   MOBILE
============================================================ */

@media (max-width: 650px) {

    .platforms-hero-v3-title {
        font-size:
            clamp(2.65rem, 12vw, 4rem);
    }


    .platforms-hero-v3-actions {
        flex-direction: column;
    }


    .platforms-hero-v3-actions
    .button {
        width: 100%;
    }


    .platforms-ecosystem {
        min-height: 470px;
    }


    .platforms-ecosystem-core {
        width: 145px;
        height: 145px;
    }


    .platforms-ecosystem-node {
        min-width: 110px;

        padding:
            9px 10px;

        font-size: 0.54rem;
    }


    .platforms-ecosystem-node i {
        width: 29px;
        height: 29px;
    }


    .ecosystem-directory {
        left: 0;
        top: 12%;
    }


    .ecosystem-catalog {
        right: 0;
        top: 13%;
    }


    .ecosystem-restaurant {
        left: 0;
        top: 46%;
    }


    .ecosystem-pos {
        right: 0;
        top: 46%;
    }


    .ecosystem-tours {
        left: 4%;
        bottom: 8%;
    }


    .ecosystem-realestate {
        right: 2%;
        bottom: 7%;
    }


    .platform-explorer-card {
        padding:
            28px 21px;

        border-radius: 24px;
    }


    .platform-explorer-copy h3 {
        font-size:
            clamp(1.9rem, 8.5vw, 3rem);
    }


    .platform-explorer-features {
        grid-template-columns:
            1fr;
    }


    .platform-explorer-visual {
        min-height: 440px;
    }


    .platform-demo {
        min-height: 440px;
    }


    .directory-map {
        width: 100%;

        height: 360px;
    }


    .directory-profile-card {
        left: 10px;
        right: 10px;

        min-width: 0;
    }


    .catalog-demo-phone {
        width: 190px;

        min-height: 370px;
    }


    .catalog-demo-grid > div {
        min-height: 105px;
    }


    .catalog-demo-grid i {
        height: 58px;
    }


    .catalog-demo-floating {
        right: 0;
        bottom: 18px;
    }


    .platform-demo-restaurant {
        grid-template-columns:
            1fr;

        align-content: center;
    }


    .restaurant-menu-demo {
        width: 100%;
    }


    .restaurant-order-demo {
        width: 80%;

        min-height: 150px;
    }


    .pos-demo-screen {
        width: 100%;

        grid-template-columns:
            1fr;
    }


    .pos-demo-products {
        border-right: 0;

        border-bottom:
            1px solid
            #eceef4;
    }


    .pos-demo-inventory {
        right: 0;
        bottom: 5px;
    }


    .tours-demo-card {
        width: 92%;
    }


    .tours-demo-floating {
        right: 0;
        top: 45px;
    }


    .realestate-property {
        width: 92%;
    }


    .realestate-lead-card {
        right: 0;
        bottom: 15px;
    }


    .platform-custom-card {
        grid-template-columns:
            1fr;

        gap: 20px;

        text-align: left;
    }


    .platform-custom-action {
        grid-column: auto;

        margin-left: 0;
    }


    .platform-custom-action
    .button {
        width: 100%;
    }

}


/* ============================================================
   MOBILE PEQUEÑO
============================================================ */

@media (max-width: 575px) {

    .platforms-hero-v3 {
        padding:
            110px 0 70px;
    }


    .platforms-hero-v3-description {
        font-size: 0.95rem;
    }


    .platforms-ecosystem {
        min-height: 420px;
    }


    .platforms-ecosystem-core {
        width: 125px;
        height: 125px;
    }


    .platforms-ecosystem-core-icon {
        width: 40px;
        height: 40px;
    }


    .platforms-ecosystem-node {
        min-width: 96px;

        gap: 6px;

        font-size: 0.49rem;
    }


    .platforms-ecosystem-node i {
        width: 27px;
        height: 27px;
    }


    .platform-explorer-section,
    .platform-comparison-section,
    .platform-common-section,
    .platform-custom-section {
        padding-top: 50px;

        padding-bottom: 55px;
    }


    .platform-explorer-card {
        padding:
            26px 18px;
    }


    .platform-explorer-visual {
        min-height: 390px;
    }


    .platform-demo {
        min-height: 390px;
    }


    .directory-map {
        height: 320px;
    }


    .restaurant-order-demo {
        width: 100%;
    }


    .platform-common-card {
        padding:
            28px 20px;

        border-radius: 24px;
    }


    .platform-custom-card {
        padding:
            28px 21px;

        border-radius: 22px;
    }

}


/* ============================================================
   MUY PEQUEÑOS
============================================================ */

@media (max-width: 390px) {

    .platforms-ecosystem {
        min-height: 370px;
    }


    .platforms-ecosystem-node span {
        display: none;
    }


    .platforms-ecosystem-node {
        min-width: auto;

        padding: 8px;
    }


    .platforms-ecosystem-node i {
        width: 34px;
        height: 34px;
    }


    .platform-explorer-visual {
        min-height: 360px;
    }


    .platform-demo {
        min-height: 360px;
    }


    .catalog-demo-floating,
    .tours-demo-floating,
    .pos-demo-inventory,
    .realestate-lead-card {
        transform:
            scale(0.90);

        transform-origin:
            right bottom;
    }

}


/* ============================================================
   DESKTOP GRANDE
============================================================ */

@media (min-width: 1600px) {

    .platforms-hero-v3-container {
        gap: 105px;
    }


    .platforms-ecosystem {
        max-width: 660px;
    }


    .platform-explorer-card {
        min-height: 660px;
    }


    .platform-explorer-visual,
    .platform-demo {
        min-height: 530px;
    }

}


/* ============================================================
   MOVIMIENTO REDUCIDO
============================================================ */

/* @media (prefers-reduced-motion: reduce) {

    .ecosystem-orbit-one,
    .ecosystem-orbit-two,
    .platforms-ecosystem-node {
        animation: none !important;
    }


    .platform-explorer-visual,
    .platforms-ecosystem-node,
    .platform-explorer-tab {
        transition: none !important;
    }

} */

/* ============================================================
   E-COMMERCE / TIENDA EN LÍNEA
   Diseño exclusivo de Platforms
============================================================ */

.platform-ecommerce-section {
    position: relative;
    overflow: hidden;
    background:
        linear-gradient(
            180deg,
            #f8faff 0%,
            #ffffff 52%,
            #f7f9ff 100%
        );
}

.platform-ecommerce-background {
    position: absolute;
    inset: 0;
    pointer-events: none;
    overflow: hidden;
}

.platform-ecommerce-grid {
    position: absolute;
    inset: 0;
    opacity: 0.55;
    background-image:
        linear-gradient(rgba(79, 70, 229, 0.035) 1px, transparent 1px),
        linear-gradient(90deg, rgba(79, 70, 229, 0.035) 1px, transparent 1px);
    background-size: 52px 52px;
}

.platform-ecommerce-glow {
    position: absolute;
    border-radius: 50%;
    filter: blur(110px);
}

.ecommerce-glow-one {
    width: 480px;
    height: 480px;
    top: 10%;
    left: -240px;
    background: rgba(79, 70, 229, 0.10);
}

.ecommerce-glow-two {
    width: 540px;
    height: 540px;
    right: -260px;
    bottom: 5%;
    background: rgba(6, 182, 212, 0.09);
}

.platform-ecommerce-heading {
    position: relative;
    z-index: 2;
    display: grid;
    grid-template-columns: minmax(0, 1fr) minmax(320px, 0.72fr);
    gap: clamp(42px, 7vw, 90px);
    align-items: end;
    margin-bottom: clamp(50px, 7vw, 82px);
}

.platform-ecommerce-heading h2 {
    max-width: 760px;
    margin-top: 18px;
    font-family: "Manrope", sans-serif;
    font-size: clamp(2.6rem, 5vw, 5rem);
    line-height: 1.02;
    letter-spacing: -0.055em;
}

.platform-ecommerce-heading-copy {
    display: grid;
    gap: 15px;
}

.platform-ecommerce-heading-copy p {
    margin: 0;
    color: var(--color-text-soft);
    line-height: 1.8;
}

.platform-ecommerce-showcase {
    position: relative;
    z-index: 2;
    display: grid;
    grid-template-columns: minmax(0, 1.12fr) minmax(360px, 0.88fr);
    gap: clamp(45px, 7vw, 90px);
    align-items: center;
}

.ecommerce-browser-wrapper {
    position: relative;
    min-width: 0;
    padding: 24px 22px 30px 6px;
}

.ecommerce-browser {
    overflow: hidden;
    border-radius: 26px;
    border: 1px solid rgba(79, 70, 229, 0.11);
    background: #fff;
    box-shadow:
        0 34px 85px rgba(15, 23, 42, 0.14),
        0 8px 24px rgba(79, 70, 229, 0.06);
}

.ecommerce-browser-top {
    min-height: 48px;
    display: grid;
    grid-template-columns: auto 1fr auto;
    gap: 14px;
    align-items: center;
    padding: 0 17px;
    background: #f5f7fc;
    border-bottom: 1px solid rgba(15, 23, 42, 0.07);
}

.ecommerce-browser-dots {
    display: flex;
    gap: 5px;
}

.ecommerce-browser-dots span {
    width: 7px;
    height: 7px;
    border-radius: 50%;
    background: #cbd5e1;
}

.ecommerce-browser-dots span:first-child { background: #fda4af; }
.ecommerce-browser-dots span:nth-child(2) { background: #fde68a; }
.ecommerce-browser-dots span:nth-child(3) { background: #86efac; }

.ecommerce-browser-address {
    min-width: 0;
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 7px;
    color: #64748b;
    font-size: 0.65rem;
    font-weight: 600;
}

.ecommerce-browser-address span {
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.ecommerce-browser-address i {
    color: #16a34a;
    font-size: 0.58rem;
}

.ecommerce-demo {
    padding: 22px;
    background: linear-gradient(180deg, #fff, #fbfcff);
}

.ecommerce-demo-header {
    display: grid;
    grid-template-columns: auto 1fr auto;
    gap: 18px;
    align-items: center;
    margin-bottom: 24px;
}

.ecommerce-demo-brand {
    display: flex;
    align-items: center;
    gap: 9px;
}

.ecommerce-demo-brand > div {
    width: 36px;
    height: 36px;
    display: grid;
    place-items: center;
    border-radius: 11px;
    color: #fff;
    background: linear-gradient(135deg, var(--color-primary), var(--color-secondary));
    font-family: "Manrope", sans-serif;
    font-size: 0.72rem;
    font-weight: 800;
}

.ecommerce-demo-brand span {
    display: grid;
    line-height: 1.1;
}

.ecommerce-demo-brand strong {
    color: #111827;
    font-size: 0.65rem;
}

.ecommerce-demo-brand small {
    margin-top: 4px;
    color: #94a3b8;
    font-size: 0.48rem;
}

.ecommerce-demo-nav {
    display: flex;
    justify-content: center;
    gap: 18px;
    color: #64748b;
    font-size: 0.56rem;
    font-weight: 700;
}

.ecommerce-demo-cart {
    position: relative;
    width: 35px;
    height: 35px;
    display: grid;
    place-items: center;
    border-radius: 11px;
    color: #312e81;
    background: #eef2ff;
}

.ecommerce-demo-cart span {
    position: absolute;
    right: -4px;
    top: -5px;
    min-width: 16px;
    height: 16px;
    display: grid;
    place-items: center;
    border-radius: 999px;
    color: #fff;
    background: var(--color-primary);
    font-size: 0.43rem;
    font-weight: 800;
}

.ecommerce-demo-hero {
    display: grid;
    grid-template-columns: minmax(0, 1.15fr) minmax(160px, 0.85fr);
    gap: 22px;
    align-items: center;
    min-height: 235px;
    padding: 28px;
    margin-bottom: 23px;
    overflow: hidden;
    border-radius: 22px;
    color: #fff;
    background:
        radial-gradient(circle at 85% 20%, rgba(99, 102, 241, 0.42), transparent 38%),
        linear-gradient(135deg, #10172f, #202755);
}

.ecommerce-demo-hero small {
    display: block;
    margin-bottom: 10px;
    color: rgba(255, 255, 255, 0.48);
    font-size: 0.47rem;
    font-weight: 800;
    letter-spacing: 0.09em;
}

.ecommerce-demo-hero h3 {
    max-width: 330px;
    margin-bottom: 10px;
    font-family: "Manrope", sans-serif;
    font-size: clamp(1.55rem, 2.5vw, 2.45rem);
    line-height: 1.02;
    letter-spacing: -0.045em;
}

.ecommerce-demo-hero p {
    max-width: 300px;
    margin-bottom: 16px;
    color: rgba(255, 255, 255, 0.62);
    font-size: 0.68rem;
    line-height: 1.65;
}

.ecommerce-demo-button {
    display: inline-flex;
    min-height: 34px;
    align-items: center;
    padding: 0 14px;
    border-radius: 9px;
    color: #111827;
    background: #fff;
    font-size: 0.57rem;
    font-weight: 800;
}

.ecommerce-demo-product-featured {
    position: relative;
    min-height: 170px;
    display: grid;
    place-items: center;
}

.ecommerce-featured-circle {
    position: absolute;
    width: 155px;
    height: 155px;
    border-radius: 50%;
    background: rgba(255, 255, 255, 0.08);
}

.ecommerce-demo-product-featured > i {
    position: relative;
    z-index: 2;
    font-size: 4.3rem;
    color: #e0e7ff;
}

.ecommerce-featured-tag {
    position: absolute;
    z-index: 3;
    right: 4%;
    top: 12%;
    padding: 6px 9px;
    border-radius: 999px;
    color: #312e81;
    background: #fff;
    font-size: 0.47rem;
    font-weight: 800;
}

.ecommerce-demo-products-heading {
    display: flex;
    align-items: end;
    justify-content: space-between;
    gap: 20px;
    margin-bottom: 13px;
}

.ecommerce-demo-products-heading > div {
    display: grid;
}

.ecommerce-demo-products-heading small {
    margin-bottom: 3px;
    color: #a1a1aa;
    font-size: 0.44rem;
    font-weight: 800;
}

.ecommerce-demo-products-heading strong {
    color: #111827;
    font-size: 0.72rem;
}

.ecommerce-demo-products-heading > span {
    color: var(--color-primary);
    font-size: 0.52rem;
    font-weight: 800;
}

.ecommerce-demo-products {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 11px;
}

.ecommerce-demo-product {
    min-width: 0;
    padding: 9px;
    border-radius: 14px;
    border: 1px solid rgba(15, 23, 42, 0.07);
    background: #fff;
}

.ecommerce-product-image {
    position: relative;
    min-height: 105px;
    display: grid;
    place-items: center;
    margin-bottom: 9px;
    border-radius: 11px;
}

.product-image-one { background: linear-gradient(145deg, #eef2ff, #e0e7ff); }
.product-image-two { background: linear-gradient(145deg, #fdf2f8, #fce7f3); }
.product-image-three { background: linear-gradient(145deg, #ecfeff, #cffafe); }

.ecommerce-product-image > i {
    font-size: 2.1rem;
    color: #475569;
}

.ecommerce-product-image > span {
    position: absolute;
    left: 7px;
    top: 7px;
    padding: 4px 6px;
    border-radius: 999px;
    color: #fff;
    background: #111827;
    font-size: 0.40rem;
    font-weight: 800;
}

.ecommerce-demo-product > small {
    display: block;
    color: #a1a1aa;
    font-size: 0.43rem;
}

.ecommerce-demo-product > strong {
    display: block;
    min-height: 29px;
    margin: 3px 0 8px;
    color: #111827;
    font-size: 0.58rem;
    line-height: 1.35;
}

.ecommerce-demo-product > div:last-child {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 8px;
}

.ecommerce-demo-product > div:last-child > span {
    color: #111827;
    font-size: 0.62rem;
    font-weight: 800;
}

.ecommerce-demo-product button {
    width: 25px;
    height: 25px;
    display: grid;
    place-items: center;
    border: 0;
    border-radius: 8px;
    color: #fff;
    background: var(--color-primary);
}

.ecommerce-floating-card {
    position: absolute;
    z-index: 4;
    min-width: 185px;
    display: flex;
    align-items: center;
    gap: 10px;
    padding: 12px 13px;
    border-radius: 14px;
    border: 1px solid rgba(255, 255, 255, 0.75);
    background: rgba(255, 255, 255, 0.90);
    box-shadow: 0 15px 42px rgba(15, 23, 42, 0.14);
}

.ecommerce-floating-order {
    right: 0;
    top: 18%;
}

.ecommerce-floating-stock {
    left: -14px;
    bottom: 2%;
}

.ecommerce-floating-icon {
    width: 34px;
    height: 34px;
    display: grid;
    place-items: center;
    border-radius: 10px;
    color: #16a34a;
    background: #ecfdf5;
}

.ecommerce-floating-card small,
.ecommerce-floating-card strong {
    display: block;
}

.ecommerce-floating-card small {
    color: #94a3b8;
    font-size: 0.42rem;
    font-weight: 800;
}

.ecommerce-floating-card strong {
    margin-top: 3px;
    color: #111827;
    font-size: 0.59rem;
}

.platform-ecommerce-content h3 {
    max-width: 600px;
    margin-bottom: 18px;
    font-family: "Manrope", sans-serif;
    font-size: clamp(2rem, 3.6vw, 3.65rem);
    line-height: 1.06;
    letter-spacing: -0.047em;
}

.platform-ecommerce-content h3 span {
    color: var(--color-primary);
}

.platform-ecommerce-eyebrow {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    margin-bottom: 16px;
    color: var(--color-primary);
    font-size: 0.58rem;
    font-weight: 800;
}

.platform-ecommerce-description {
    margin-bottom: 27px;
    color: var(--color-text-soft);
    line-height: 1.8;
}

.platform-ecommerce-features {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 11px;
    margin-bottom: 30px;
}

.platform-ecommerce-feature {
    display: grid;
    grid-template-columns: auto 1fr;
    gap: 12px;
    padding: 15px;
    border-radius: 15px;
    border: 1px solid rgba(79, 70, 229, 0.10);
    background: rgba(255, 255, 255, 0.82);
}

.platform-ecommerce-feature > div {
    width: 35px;
    height: 35px;
    display: grid;
    place-items: center;
    border-radius: 11px;
    color: var(--color-primary);
    background: #eef2ff;
}

.platform-ecommerce-feature strong,
.platform-ecommerce-feature small {
    display: block;
}

.platform-ecommerce-feature strong {
    margin-bottom: 4px;
    color: var(--color-text);
    font-size: 0.72rem;
}

.platform-ecommerce-feature small {
    color: var(--color-text-soft);
    font-size: 0.58rem;
    line-height: 1.55;
}

.platform-ecommerce-actions {
    display: flex;
    flex-wrap: wrap;
    gap: 10px;
    margin-bottom: 22px;
}

.platform-ecommerce-demo-note {
    display: grid;
    grid-template-columns: auto 1fr;
    gap: 10px;
    padding: 13px 15px;
    border-radius: 13px;
    color: #64748b;
    background: #f8fafc;
    border: 1px solid #e2e8f0;
}

.platform-ecommerce-demo-note p {
    margin: 0;
    font-size: 0.58rem;
    line-height: 1.65;
}

.platform-explorer-card {
    transition: opacity 0.18s ease, transform 0.18s ease;
}

.platform-explorer-card.is-changing {
    opacity: 0.78;
    transform: translateY(3px);
}

@media (max-width: 1050px) {
    .platform-ecommerce-heading {
        grid-template-columns: 1fr;
        gap: 24px;
    }

    .platform-ecommerce-showcase {
        grid-template-columns: 1fr;
        gap: 55px;
    }

    .ecommerce-browser-wrapper,
    .platform-ecommerce-content {
        width: min(100%, 760px);
        margin-inline: auto;
    }
}

@media (max-width: 800px) {
    .platform-explorer-card {
        gap: 30px;
        padding: 32px 26px;
    }

    .platform-explorer-copy > p {
        margin-bottom: 27px;
        line-height: 1.75;
    }

    .platform-explorer-ideal {
        margin-bottom: 24px;
        padding: 15px 16px;
    }

    .platform-explorer-features {
        gap: 10px;
        margin-bottom: 30px;
    }

    .platform-explorer-features > div {
        min-height: 52px;
        padding: 11px 12px;
        font-size: 0.67rem;
        line-height: 1.45;
    }

    .platform-explorer-visual {
        min-height: 380px;
    }
}

@media (max-width: 650px) {
    .platform-ecommerce-section {
        padding-top: 62px;
        padding-bottom: 68px;
    }

    .platform-ecommerce-heading {
        gap: 20px;
        margin-bottom: 34px;
    }

    .platform-ecommerce-heading h2 {
        margin-top: 13px;
        font-size: clamp(2.15rem, 10.5vw, 3.15rem);
        line-height: 1.04;
    }

    .platform-ecommerce-heading-copy p {
        font-size: 0.89rem;
        line-height: 1.72;
    }

    .platform-ecommerce-showcase {
        gap: 42px;
    }

    .ecommerce-browser-wrapper {
        padding: 0;
    }

    .ecommerce-browser {
        border-radius: 20px;
    }

    .ecommerce-browser-top {
        min-height: 42px;
        grid-template-columns: auto minmax(0, 1fr) auto;
        gap: 8px;
        padding: 0 11px;
    }

    .ecommerce-browser-address {
        justify-content: flex-start;
        font-size: 0.53rem;
    }

    .ecommerce-demo {
        padding: 14px;
    }

    .ecommerce-demo-header {
        grid-template-columns: 1fr auto;
        gap: 9px;
        margin-bottom: 15px;
    }

    .ecommerce-demo-nav {
        display: none;
    }

    .ecommerce-demo-hero {
        grid-template-columns: minmax(0, 1fr) 105px;
        gap: 11px;
        min-height: 190px;
        padding: 20px 16px;
        border-radius: 17px;
    }

    .ecommerce-demo-hero h3 {
        font-size: clamp(1.32rem, 6.3vw, 1.8rem);
    }

    .ecommerce-demo-hero p {
        font-size: 0.58rem;
        line-height: 1.55;
    }

    .ecommerce-demo-product-featured {
        min-height: 120px;
    }

    .ecommerce-featured-circle {
        width: 105px;
        height: 105px;
    }

    .ecommerce-demo-product-featured > i {
        font-size: 2.9rem;
    }

    .ecommerce-demo-products {
        gap: 6px;
    }

    .ecommerce-demo-product {
        padding: 6px;
    }

    .ecommerce-product-image {
        min-height: 72px;
    }

    .ecommerce-demo-product > strong {
        font-size: 0.47rem;
    }

    .ecommerce-floating-card {
        display: none;
    }

    .platform-ecommerce-content h3 {
        font-size: clamp(1.95rem, 9vw, 2.75rem);
    }

    .platform-ecommerce-description {
        font-size: 0.9rem;
        line-height: 1.72;
    }

    .platform-ecommerce-features {
        grid-template-columns: 1fr;
        gap: 10px;
    }

    .platform-ecommerce-actions {
        flex-direction: column;
    }

    .platform-ecommerce-actions .button {
        width: 100%;
    }

    .platform-explorer-tabs {
        margin-bottom: 24px;
    }

    .platform-explorer-card {
        padding: 25px 19px 28px;
        gap: 25px;
    }

    .platform-explorer-copy h3 {
        margin-bottom: 15px;
        font-size: clamp(1.75rem, 8.2vw, 2.55rem);
        line-height: 1.08;
    }

    .platform-explorer-copy > p {
        margin-bottom: 21px;
        font-size: 0.88rem;
        line-height: 1.72;
    }

    .platform-explorer-ideal {
        margin-bottom: 19px;
    }

    .platform-explorer-features {
        margin-bottom: 24px;
    }

    .platform-explorer-features > div {
        min-height: 48px;
        padding: 11px;
        font-size: 0.66rem;
    }

    .platform-explorer-visual,
    .platform-demo {
        min-height: 330px;
    }
}

@media (max-width: 390px) {
    .ecommerce-demo-products {
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }

    .ecommerce-demo-product:last-child {
        display: none;
    }
}

/* ============================================================
   PLATFORMS OPERATION MOCKUPS V33
   Una plataforma distinta para cada operación
============================================================ */

.platform-rich-demo {
    width: 100%;
    min-height: 465px;
    display: grid;
    place-items: center;
}

.platform-rich-demo button {
    font-family: inherit;
}

/* ------------------------------------------------------------
   DIRECTORIO / EXPLORA LOCAL
------------------------------------------------------------ */

.directory-app {
    width: min(100%, 620px);
    overflow: hidden;
    border-radius: 24px;
    background: #fff;
    border: 1px solid rgba(15,23,42,.08);
    box-shadow: 0 28px 70px rgba(15,23,42,.14);
}

.directory-app-head {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 15px;
    padding: 16px 18px 10px;
}

.directory-app-head small,
.directory-app-head strong {
    display: block;
}

.directory-app-head small {
    color: var(--color-primary);
    font-size: .42rem;
    font-weight: 900;
    letter-spacing: .09em;
}

.directory-app-head strong {
    margin-top: 3px;
    color: #111827;
    font-size: .72rem;
}

.directory-app-head > span {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    padding: 6px 9px;
    border-radius: 999px;
    color: #475569;
    background: #f8fafc;
    font-size: .40rem;
    font-weight: 800;
}

.directory-app-head > span i {
    color: #ef4444;
}

.directory-app-search {
    display: grid;
    grid-template-columns: auto 1fr auto;
    gap: 9px;
    align-items: center;
    margin: 0 18px 14px;
    padding: 7px 7px 7px 12px;
    border-radius: 12px;
    border: 1px solid #e5e7eb;
    background: #fff;
}

.directory-app-search > i {
    color: #94a3b8;
}

.directory-app-search > span {
    color: #94a3b8;
    font-size: .45rem;
}

.directory-app-search > button {
    min-height: 30px;
    padding: 0 12px;
    border: 0;
    border-radius: 8px;
    color: #fff;
    background: var(--color-primary);
    font-size: .42rem;
    font-weight: 800;
}

.directory-app-body {
    display: grid;
    grid-template-columns: minmax(0,1.4fr) minmax(155px,.6fr);
    gap: 10px;
    padding: 0 18px;
}

.directory-map-pro {
    position: relative;
    min-height: 285px;
    overflow: hidden;
    border-radius: 18px;
    background:
        linear-gradient(rgba(59,130,246,.04) 1px, transparent 1px),
        linear-gradient(90deg, rgba(59,130,246,.04) 1px, transparent 1px),
        #eef6ff;
    background-size: 30px 30px;
}

.directory-map-pro svg {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
}

.directory-map-pro svg path {
    fill: none;
    stroke: rgba(100,116,139,.22);
    stroke-width: 11;
    stroke-linecap: round;
}

.directory-pin {
    position: absolute;
    width: 35px;
    height: 35px;
    display: grid;
    place-items: center;
    border-radius: 12px 12px 12px 3px;
    color: #fff;
    background: var(--color-primary);
    box-shadow: 0 8px 22px rgba(79,70,229,.23);
    transform: rotate(-45deg);
    animation: directory-pin-float 3s ease-in-out infinite;
}

.directory-pin i {
    transform: rotate(45deg);
}

.pin-food { left: 19%; top: 24%; }
.pin-shop { right: 18%; top: 17%; animation-delay: .4s; }
.pin-service { left: 28%; bottom: 18%; animation-delay: .8s; }
.pin-star { right: 23%; bottom: 24%; animation-delay: 1.2s; background: #f59e0b; }

.directory-you-are-here {
    position: absolute;
    left: 50%;
    top: 53%;
    display: grid;
    place-items: center;
    gap: 4px;
    transform: translate(-50%,-50%);
    color: #1e3a8a;
}

.directory-you-are-here i {
    width: 45px;
    height: 45px;
    display: grid;
    place-items: center;
    border-radius: 50%;
    color: #fff;
    background: #2563eb;
    box-shadow:
        0 0 0 10px rgba(37,99,235,.10),
        0 0 0 20px rgba(37,99,235,.05);
    animation: directory-location-pulse 2.2s ease-in-out infinite;
}

.directory-you-are-here span {
    padding: 4px 7px;
    border-radius: 999px;
    background: rgba(255,255,255,.9);
    font-size: .34rem;
    font-weight: 800;
}

.directory-results {
    display: grid;
    align-content: start;
    gap: 8px;
}

.directory-result-card {
    display: grid;
    grid-template-columns: auto 1fr auto;
    gap: 8px;
    align-items: center;
    padding: 10px;
    border-radius: 12px;
    background: #f8fafc;
    border: 1px solid #eef2f7;
    transition: transform .25s ease, box-shadow .25s ease;
}

.directory-result-card:hover {
    transform: translateX(-4px);
    box-shadow: 0 10px 24px rgba(15,23,42,.07);
}

.directory-result-icon {
    width: 30px;
    height: 30px;
    display: grid;
    place-items: center;
    border-radius: 9px;
    color: var(--color-primary);
    background: #eef2ff;
}

.directory-result-card strong,
.directory-result-card small {
    display: block;
}

.directory-result-card strong {
    color: #111827;
    font-size: .42rem;
}

.directory-result-card small {
    margin-top: 2px;
    color: #94a3b8;
    font-size: .31rem;
}

.directory-result-card > i {
    color: #cbd5e1;
    font-size: .48rem;
}

.directory-app-categories {
    display: grid;
    grid-template-columns: repeat(3,1fr);
    gap: 7px;
    padding: 12px 18px 18px;
}

.directory-app-categories span {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 6px;
    min-height: 34px;
    border-radius: 9px;
    color: #64748b;
    background: #f8fafc;
    font-size: .35rem;
    font-weight: 800;
}

.directory-app-categories span i {
    color: var(--color-primary);
}

/* ------------------------------------------------------------
   CATÁLOGO
------------------------------------------------------------ */

.catalog-showroom {
    width: min(100%, 620px);
    overflow: hidden;
    border-radius: 24px;
    background: #fff;
    border: 1px solid rgba(15,23,42,.08);
    box-shadow: 0 28px 70px rgba(15,23,42,.14);
}

.catalog-showroom-head {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 14px;
    padding: 16px 18px;
}

.catalog-showroom-head small,
.catalog-showroom-head strong {
    display: block;
}

.catalog-showroom-head small {
    color: var(--color-primary);
    font-size: .4rem;
    font-weight: 900;
    letter-spacing: .08em;
}

.catalog-showroom-head strong {
    margin-top: 3px;
    color: #111827;
    font-size: .7rem;
}

.catalog-showroom-actions {
    display: flex;
    gap: 6px;
}

.catalog-showroom-actions button {
    width: 31px;
    height: 31px;
    display: grid;
    place-items: center;
    border: 1px solid #e5e7eb;
    border-radius: 9px;
    color: #64748b;
    background: #fff;
}

.catalog-showroom-hero {
    display: grid;
    grid-template-columns: minmax(0,1.15fr) minmax(150px,.85fr);
    gap: 15px;
    align-items: center;
    margin: 0 18px;
    padding: 20px;
    overflow: hidden;
    border-radius: 18px;
    color: #fff;
    background:
        radial-gradient(circle at 85% 15%, rgba(236,72,153,.28), transparent 34%),
        linear-gradient(135deg,#111827,#312e81);
}

.catalog-showroom-copy small {
    color: #c4b5fd;
    font-size: .36rem;
    font-weight: 900;
}

.catalog-showroom-copy h4 {
    max-width: 260px;
    margin: 6px 0 8px;
    font-size: 1.35rem;
    line-height: 1.02;
    letter-spacing: -.035em;
}

.catalog-showroom-copy h4 span {
    display: block;
    color: #c4b5fd;
}

.catalog-showroom-copy p {
    max-width: 250px;
    margin: 0 0 12px;
    color: rgba(255,255,255,.58);
    font-size: .43rem;
    line-height: 1.6;
}

.catalog-showroom-copy button {
    min-height: 28px;
    padding: 0 11px;
    border: 0;
    border-radius: 8px;
    color: #111827;
    background: #fff;
    font-size: .38rem;
    font-weight: 800;
}

.catalog-feature-product {
    position: relative;
    min-height: 150px;
    display: grid;
    place-items: center;
}

.catalog-product-shape {
    width: 122px;
    height: 122px;
    display: grid;
    place-items: center;
    border-radius: 50%;
    color: #fff;
    background: rgba(255,255,255,.10);
    box-shadow: inset 0 0 0 1px rgba(255,255,255,.11);
    animation: catalog-product-float 3.4s ease-in-out infinite;
}

.catalog-product-shape i {
    font-size: 3rem;
}

.catalog-feature-product > span {
    position: absolute;
    right: 2px;
    top: 6px;
    padding: 5px 8px;
    border-radius: 999px;
    color: #312e81;
    background: #fff;
    font-size: .31rem;
    font-weight: 900;
}

.catalog-filter-row {
    display: flex;
    gap: 6px;
    padding: 13px 18px 8px;
    overflow-x: auto;
}

.catalog-filter-row span {
    flex: 0 0 auto;
    padding: 6px 9px;
    border-radius: 999px;
    color: #64748b;
    background: #f8fafc;
    font-size: .33rem;
    font-weight: 800;
}

.catalog-filter-row span.active {
    color: #fff;
    background: var(--color-primary);
}

.catalog-product-grid {
    display: grid;
    grid-template-columns: repeat(3,1fr);
    gap: 8px;
    padding: 0 18px 18px;
}

.catalog-product-card {
    padding: 8px;
    border-radius: 12px;
    border: 1px solid #e5e7eb;
    background: #fff;
}

.catalog-product-card > div {
    position: relative;
    min-height: 86px;
    display: grid;
    place-items: center;
    margin-bottom: 7px;
    border-radius: 9px;
    color: #475569;
    background: linear-gradient(145deg,#eef2ff,#f8fafc);
}

.catalog-product-card > div > i {
    font-size: 1.55rem;
}

.catalog-product-card > div > span {
    position: absolute;
    left: 5px;
    top: 5px;
    padding: 3px 5px;
    border-radius: 999px;
    color: #fff;
    background: #111827;
    font-size: .25rem;
    font-weight: 900;
}

.catalog-product-card small,
.catalog-product-card strong,
.catalog-product-card b {
    display: block;
}

.catalog-product-card small {
    color: #94a3b8;
    font-size: .28rem;
}

.catalog-product-card strong {
    min-height: 25px;
    margin-top: 2px;
    color: #111827;
    font-size: .38rem;
    line-height: 1.35;
}

.catalog-product-card b {
    margin-top: 5px;
    color: var(--color-primary);
    font-size: .42rem;
}

/* ------------------------------------------------------------
   RESTAURANTES / KDS
------------------------------------------------------------ */

.restaurant-control {
    width: min(100%, 640px);
    overflow: hidden;
    border-radius: 24px;
    color: #fff;
    background: #0b1220;
    box-shadow: 0 30px 75px rgba(15,23,42,.28);
}

.restaurant-control-head {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 15px;
    padding: 16px 18px;
    border-bottom: 1px solid rgba(255,255,255,.07);
}

.restaurant-control-head small,
.restaurant-control-head strong {
    display: block;
}

.restaurant-control-head small {
    color: #fb923c;
    font-size: .39rem;
    font-weight: 900;
    letter-spacing: .09em;
}

.restaurant-control-head strong {
    margin-top: 3px;
    font-size: .72rem;
}

.restaurant-open {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    padding: 6px 9px;
    border-radius: 999px;
    color: #86efac;
    background: rgba(34,197,94,.08);
    font-size: .38rem;
    font-weight: 800;
}

.restaurant-open i {
    width: 6px;
    height: 6px;
    border-radius: 50%;
    background: #22c55e;
    animation: platform-live-dot 1.4s ease-in-out infinite;
}

.restaurant-kpis {
    display: grid;
    grid-template-columns: repeat(3,1fr);
    gap: 7px;
    padding: 11px 14px;
}

.restaurant-kpis > div {
    padding: 10px;
    border-radius: 10px;
    background: rgba(255,255,255,.045);
}

.restaurant-kpis small,
.restaurant-kpis strong {
    display: block;
}

.restaurant-kpis small {
    color: rgba(255,255,255,.35);
    font-size: .3rem;
    font-weight: 900;
}

.restaurant-kpis strong {
    margin-top: 4px;
    font-size: .75rem;
}

.restaurant-board {
    display: grid;
    grid-template-columns: repeat(3,1fr);
    gap: 7px;
    padding: 0 14px 14px;
}

.restaurant-column {
    min-height: 285px;
    padding: 9px;
    border-radius: 13px;
    background: rgba(255,255,255,.035);
    border: 1px solid rgba(255,255,255,.055);
}

.restaurant-column.active {
    background: rgba(249,115,22,.055);
    border-color: rgba(249,115,22,.18);
}

.restaurant-column-head {
    display: flex;
    justify-content: space-between;
    gap: 7px;
    align-items: center;
    margin-bottom: 8px;
}

.restaurant-column-head span {
    color: rgba(255,255,255,.5);
    font-size: .29rem;
    font-weight: 900;
}

.restaurant-column-head b {
    min-width: 18px;
    height: 18px;
    display: grid;
    place-items: center;
    border-radius: 6px;
    color: #fff;
    background: rgba(255,255,255,.08);
    font-size: .31rem;
}

.restaurant-order-card {
    padding: 10px;
    border-radius: 10px;
    color: #111827;
    background: #fff;
    box-shadow: 0 8px 20px rgba(0,0,0,.15);
    animation: restaurant-card-in 3.5s ease-in-out infinite alternate;
}

.restaurant-order-card.ready {
    background: #f0fdf4;
}

.restaurant-order-card header,
.restaurant-order-card footer {
    display: flex;
    justify-content: space-between;
    gap: 7px;
    align-items: center;
}

.restaurant-order-card header {
    padding-bottom: 7px;
    border-bottom: 1px solid #eef2f7;
}

.restaurant-order-card header strong {
    color: #111827;
    font-size: .42rem;
}

.restaurant-order-card header span {
    color: #94a3b8;
    font-size: .3rem;
}

.restaurant-order-card.ready header span {
    color: #22c55e;
}

.restaurant-order-card p {
    margin: 7px 0 0;
    color: #64748b;
    font-size: .34rem;
}

.restaurant-order-card footer {
    margin-top: 10px;
}

.restaurant-order-card footer span {
    color: #94a3b8;
    font-size: .29rem;
}

.restaurant-order-card footer button {
    min-height: 23px;
    padding: 0 7px;
    border: 0;
    border-radius: 6px;
    color: #fff;
    background: #f97316;
    font-size: .28rem;
    font-weight: 800;
}

.restaurant-order-card.ready footer button {
    background: #16a34a;
}

.restaurant-progress {
    height: 4px;
    margin-top: 10px;
    overflow: hidden;
    border-radius: 999px;
    background: #ffedd5;
}

.restaurant-progress i {
    display: block;
    width: 65%;
    height: 100%;
    border-radius: inherit;
    background: #f97316;
    animation: restaurant-progress 3s ease-in-out infinite alternate;
}

/* ------------------------------------------------------------
   POS
------------------------------------------------------------ */

.pos-terminal {
    width: min(100%, 650px);
    overflow: hidden;
    border-radius: 24px;
    background: #f8fafc;
    border: 1px solid #e5e7eb;
    box-shadow: 0 28px 70px rgba(15,23,42,.14);
}

.pos-terminal-head {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 15px;
    padding: 14px 16px;
    background: #111827;
    color: #fff;
}

.pos-terminal-head small,
.pos-terminal-head strong {
    display: block;
}

.pos-terminal-head small {
    color: #a5b4fc;
    font-size: .37rem;
    font-weight: 900;
    letter-spacing: .08em;
}

.pos-terminal-head strong {
    margin-top: 3px;
    font-size: .67rem;
}

.pos-terminal-head > span {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    color: #cbd5e1;
    font-size: .36rem;
}

.pos-terminal-body {
    display: grid;
    grid-template-columns: minmax(0,1.2fr) minmax(180px,.8fr);
    gap: 10px;
    padding: 12px;
}

.pos-products {
    min-width: 0;
}

.pos-search {
    display: grid;
    grid-template-columns: auto 1fr;
    gap: 7px;
    align-items: center;
    padding: 9px 10px;
    border-radius: 9px;
    color: #94a3b8;
    background: #fff;
    border: 1px solid #e5e7eb;
}

.pos-search span {
    font-size: .34rem;
}

.pos-category-row {
    display: flex;
    gap: 6px;
    margin: 9px 0;
}

.pos-category-row span {
    padding: 5px 8px;
    border-radius: 999px;
    color: #64748b;
    background: #fff;
    font-size: .3rem;
    font-weight: 800;
}

.pos-category-row span.active {
    color: #fff;
    background: var(--color-primary);
}

.pos-product-grid {
    display: grid;
    grid-template-columns: repeat(2,1fr);
    gap: 7px;
}

.pos-product-grid button {
    min-height: 87px;
    display: grid;
    place-items: center;
    align-content: center;
    gap: 5px;
    border: 1px solid #e5e7eb;
    border-radius: 10px;
    color: #475569;
    background: #fff;
    transition: transform .2s ease, border-color .2s ease;
}

.pos-product-grid button:hover {
    transform: translateY(-3px);
    border-color: rgba(79,70,229,.3);
}

.pos-product-grid button i {
    color: var(--color-primary);
    font-size: 1rem;
}

.pos-product-grid button strong {
    font-size: .37rem;
}

.pos-product-grid button span {
    color: #94a3b8;
    font-size: .31rem;
}

.pos-ticket {
    display: grid;
    align-content: start;
    min-height: 315px;
    padding: 12px;
    border-radius: 13px;
    background: #fff;
    border: 1px solid #e5e7eb;
}

.pos-ticket-head {
    display: flex;
    justify-content: space-between;
    gap: 7px;
    padding-bottom: 9px;
    border-bottom: 1px dashed #e5e7eb;
}

.pos-ticket-head strong {
    color: #111827;
    font-size: .42rem;
}

.pos-ticket-head span {
    color: #94a3b8;
    font-size: .3rem;
}

.pos-ticket-items {
    display: grid;
    gap: 7px;
    padding: 12px 0;
    border-bottom: 1px dashed #e5e7eb;
}

.pos-ticket-items > div {
    display: flex;
    justify-content: space-between;
    gap: 7px;
    color: #64748b;
    font-size: .34rem;
}

.pos-ticket-items > div strong {
    color: #111827;
}

.pos-ticket-total {
    display: flex;
    justify-content: space-between;
    align-items: end;
    gap: 7px;
    padding: 12px 0;
}

.pos-ticket-total small {
    color: #94a3b8;
    font-size: .3rem;
}

.pos-ticket-total strong {
    color: #111827;
    font-size: .78rem;
}

.pos-payment-row {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 6px;
}

.pos-payment-row button {
    min-height: 43px;
    display: grid;
    place-items: center;
    gap: 3px;
    border: 1px solid #e5e7eb;
    border-radius: 8px;
    color: #64748b;
    background: #fff;
    font-size: .29rem;
}

.pos-payment-row button.active {
    color: var(--color-primary);
    border-color: rgba(79,70,229,.25);
    background: #eef2ff;
}

.pos-charge {
    min-height: 36px;
    margin-top: 8px;
    border: 0;
    border-radius: 8px;
    color: #fff;
    background: linear-gradient(135deg,var(--color-primary),var(--color-secondary));
    font-size: .35rem;
    font-weight: 900;
}

.pos-terminal-status {
    display: flex;
    justify-content: space-between;
    gap: 10px;
    padding: 9px 16px 13px;
}

.pos-terminal-status span {
    display: inline-flex;
    align-items: center;
    gap: 5px;
    color: #64748b;
    font-size: .31rem;
}

.pos-terminal-status span i {
    color: #22c55e;
}

/* ------------------------------------------------------------
   TOURS
------------------------------------------------------------ */

.tour-planner {
    width: min(100%, 620px);
    overflow: hidden;
    border-radius: 24px;
    background: #fff;
    border: 1px solid rgba(15,23,42,.08);
    box-shadow: 0 28px 70px rgba(15,23,42,.14);
}

.tour-planner-head {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 15px;
    padding: 15px 18px;
}

.tour-planner-head small,
.tour-planner-head strong {
    display: block;
}

.tour-planner-head small {
    color: #0891b2;
    font-size: .39rem;
    font-weight: 900;
    letter-spacing: .08em;
}

.tour-planner-head strong {
    margin-top: 3px;
    color: #111827;
    font-size: .69rem;
}

.tour-planner-head > span {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    padding: 6px 9px;
    border-radius: 999px;
    color: #0f766e;
    background: #ecfeff;
    font-size: .35rem;
    font-weight: 800;
}

.tour-feature {
    display: grid;
    grid-template-columns: minmax(170px,.9fr) minmax(0,1.1fr);
    gap: 14px;
    margin: 0 18px;
    padding: 13px;
    border-radius: 18px;
    background: linear-gradient(145deg,#ecfeff,#f8fafc);
    border: 1px solid #cffafe;
}

.tour-feature-scene {
    position: relative;
    min-height: 180px;
    display: grid;
    place-items: center;
    overflow: hidden;
    border-radius: 14px;
    color: #fff;
    background:
        radial-gradient(circle at 70% 20%, rgba(253,224,71,.45), transparent 20%),
        linear-gradient(145deg,#0f766e,#164e63);
}

.tour-feature-scene i {
    font-size: 3.7rem;
    animation: tour-mountain-float 4s ease-in-out infinite;
}

.tour-feature-scene span {
    position: absolute;
    left: 8px;
    top: 8px;
    padding: 5px 7px;
    border-radius: 999px;
    color: #164e63;
    background: #fff;
    font-size: .28rem;
    font-weight: 900;
}

.tour-feature-copy {
    padding: 5px 4px;
}

.tour-feature-copy > small {
    color: #0891b2;
    font-size: .31rem;
    font-weight: 900;
}

.tour-feature-copy h4 {
    margin: 5px 0 7px;
    color: #111827;
    font-size: 1rem;
}

.tour-feature-copy p {
    margin: 0;
    color: #64748b;
    font-size: .38rem;
    line-height: 1.55;
}

.tour-feature-meta {
    display: flex;
    flex-wrap: wrap;
    gap: 7px;
    margin: 10px 0;
}

.tour-feature-meta span {
    display: inline-flex;
    align-items: center;
    gap: 4px;
    color: #64748b;
    font-size: .31rem;
}

.tour-feature-meta span i {
    color: #0891b2;
}

.tour-price {
    display: block;
    color: #0f172a;
    font-size: .72rem;
}

.tour-price small {
    color: #94a3b8;
    font-size: .29rem;
    font-weight: 600;
}

.tour-itinerary {
    position: relative;
    display: grid;
    grid-template-columns: repeat(4,1fr);
    gap: 4px;
    margin: 15px 18px;
    padding-top: 8px;
}

.tour-itinerary-line {
    position: absolute;
    left: 12.5%;
    right: 12.5%;
    top: 24px;
    height: 2px;
    overflow: hidden;
    background: #e2e8f0;
}

.tour-itinerary-line i {
    display: block;
    width: 65%;
    height: 100%;
    background: linear-gradient(90deg,#06b6d4,#14b8a6);
    animation: tour-route-progress 3.2s ease-in-out infinite alternate;
}

.tour-stop {
    position: relative;
    z-index: 2;
    display: grid;
    place-items: center;
    gap: 5px;
    text-align: center;
}

.tour-stop::before {
    content: "";
    width: 10px;
    height: 10px;
    border: 3px solid #fff;
    border-radius: 50%;
    background: #cbd5e1;
    box-shadow: 0 0 0 1px #cbd5e1;
}

.tour-stop.active::before {
    background: #06b6d4;
    box-shadow: 0 0 0 1px #06b6d4, 0 0 0 5px rgba(6,182,212,.1);
}

.tour-stop span {
    color: #94a3b8;
    font-size: .28rem;
}

.tour-stop b {
    color: #475569;
    font-size: .32rem;
}

.tour-booking-bar {
    display: grid;
    grid-template-columns: .7fr .7fr 1fr;
    gap: 7px;
    margin: 0 18px 18px;
    padding: 9px;
    border-radius: 12px;
    background: #f8fafc;
}

.tour-booking-bar > div {
    padding: 5px 7px;
}

.tour-booking-bar small,
.tour-booking-bar strong {
    display: block;
}

.tour-booking-bar small {
    color: #94a3b8;
    font-size: .27rem;
    font-weight: 900;
}

.tour-booking-bar strong {
    margin-top: 2px;
    color: #111827;
    font-size: .36rem;
}

.tour-booking-bar button {
    border: 0;
    border-radius: 9px;
    color: #fff;
    background: linear-gradient(135deg,#0891b2,#0f766e);
    font-size: .33rem;
    font-weight: 900;
}

/* ------------------------------------------------------------
   REAL ESTATE
------------------------------------------------------------ */

.realestate-finder {
    width: min(100%, 650px);
    overflow: hidden;
    border-radius: 24px;
    background: #fff;
    border: 1px solid rgba(15,23,42,.08);
    box-shadow: 0 28px 70px rgba(15,23,42,.14);
}

.realestate-finder-head {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 15px;
    padding: 15px 18px;
}

.realestate-finder-head small,
.realestate-finder-head strong {
    display: block;
}

.realestate-finder-head small {
    color: #7c3aed;
    font-size: .38rem;
    font-weight: 900;
    letter-spacing: .08em;
}

.realestate-finder-head strong {
    margin-top: 3px;
    color: #111827;
    font-size: .69rem;
}

.realestate-finder-head > span {
    display: inline-flex;
    gap: 5px;
    align-items: center;
    color: #7c3aed;
    font-size: .34rem;
    font-weight: 800;
}

.realestate-search {
    display: grid;
    grid-template-columns: 1.15fr .75fr .85fr auto;
    gap: 6px;
    margin: 0 18px 12px;
    padding: 7px;
    border-radius: 12px;
    background: #f8fafc;
    border: 1px solid #e5e7eb;
}

.realestate-search > div {
    padding: 5px 7px;
    border-right: 1px solid #e5e7eb;
}

.realestate-search small,
.realestate-search strong {
    display: block;
}

.realestate-search small {
    color: #94a3b8;
    font-size: .25rem;
    font-weight: 900;
}

.realestate-search strong {
    margin-top: 2px;
    color: #111827;
    font-size: .34rem;
}

.realestate-search button {
    width: 34px;
    border: 0;
    border-radius: 9px;
    color: #fff;
    background: #7c3aed;
}

.realestate-body {
    display: grid;
    grid-template-columns: minmax(210px,.9fr) minmax(0,1.1fr);
    gap: 10px;
    padding: 0 18px 18px;
}

.realestate-list {
    display: grid;
    gap: 8px;
}

.property-card {
    display: grid;
    grid-template-columns: 88px 1fr;
    gap: 9px;
    padding: 8px;
    border-radius: 12px;
    background: #fff;
    border: 1px solid #e5e7eb;
    transition: transform .25s ease, box-shadow .25s ease;
}

.property-card.active {
    border-color: rgba(124,58,237,.25);
    box-shadow: 0 10px 25px rgba(124,58,237,.08);
}

.property-card:hover {
    transform: translateX(3px);
}

.property-visual {
    position: relative;
    min-height: 88px;
    display: grid;
    place-items: center;
    border-radius: 10px;
    color: #fff;
}

.house-a {
    background: linear-gradient(145deg,#7c3aed,#4f46e5);
}

.house-b {
    background: linear-gradient(145deg,#475569,#1e293b);
}

.property-visual i {
    font-size: 1.8rem;
}

.property-visual span {
    position: absolute;
    left: 5px;
    top: 5px;
    padding: 3px 5px;
    border-radius: 999px;
    color: #7c3aed;
    background: #fff;
    font-size: .23rem;
    font-weight: 900;
}

.property-copy {
    min-width: 0;
    align-self: center;
}

.property-copy small,
.property-copy strong,
.property-copy p,
.property-copy b {
    display: block;
}

.property-copy small {
    color: #94a3b8;
    font-size: .25rem;
    font-weight: 900;
}

.property-copy strong {
    margin-top: 3px;
    color: #111827;
    font-size: .4rem;
}

.property-copy p {
    margin: 5px 0;
    color: #64748b;
    font-size: .3rem;
}

.property-copy b {
    color: #7c3aed;
    font-size: .4rem;
}

.realestate-map {
    position: relative;
    min-height: 300px;
    overflow: hidden;
    border-radius: 15px;
    background:
        linear-gradient(rgba(124,58,237,.035) 1px, transparent 1px),
        linear-gradient(90deg, rgba(124,58,237,.035) 1px, transparent 1px),
        #f8f7ff;
    background-size: 28px 28px;
}

.realestate-map svg {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
}

.realestate-map svg path {
    fill: none;
    stroke: rgba(100,116,139,.18);
    stroke-width: 12;
    stroke-linecap: round;
}

.property-map-pin {
    position: absolute;
    display: grid;
    place-items: center;
    min-width: 46px;
    height: 25px;
    padding: 0 7px;
    border-radius: 8px 8px 8px 2px;
    color: #fff;
    background: #7c3aed;
    font-size: .31rem;
    font-weight: 900;
    box-shadow: 0 8px 20px rgba(124,58,237,.2);
    animation: property-pin-float 3s ease-in-out infinite;
}

.property-map-pin.pin-a { left: 18%; top: 22%; }
.property-map-pin.pin-b { right: 18%; top: 35%; animation-delay: .55s; }
.property-map-pin.pin-c { left: 42%; bottom: 20%; animation-delay: 1s; }

/* ------------------------------------------------------------
   ANIMACIONES
------------------------------------------------------------ */

@keyframes directory-pin-float {
    0%,100% { transform: rotate(-45deg) translateY(0); }
    50% { transform: rotate(-45deg) translateY(-7px); }
}

@keyframes directory-location-pulse {
    0%,100% {
        box-shadow:
            0 0 0 8px rgba(37,99,235,.10),
            0 0 0 16px rgba(37,99,235,.05);
    }
    50% {
        box-shadow:
            0 0 0 13px rgba(37,99,235,.10),
            0 0 0 25px rgba(37,99,235,.03);
    }
}

@keyframes catalog-product-float {
    0%,100% { transform: translateY(0) rotate(-2deg); }
    50% { transform: translateY(-8px) rotate(3deg); }
}

@keyframes platform-live-dot {
    0%,100% { opacity: .45; transform: scale(.85); }
    50% { opacity: 1; transform: scale(1.15); }
}

@keyframes restaurant-card-in {
    from { transform: translateY(0); }
    to { transform: translateY(-5px); }
}

@keyframes restaurant-progress {
    from { width: 48%; }
    to { width: 82%; }
}

@keyframes tour-mountain-float {
    0%,100% { transform: translateY(0); }
    50% { transform: translateY(-8px); }
}

@keyframes tour-route-progress {
    from { width: 42%; }
    to { width: 82%; }
}

@keyframes property-pin-float {
    0%,100% { transform: translateY(0); }
    50% { transform: translateY(-6px); }
}

/* ------------------------------------------------------------
   RESPONSIVE
------------------------------------------------------------ */

@media (max-width: 800px) {

    .platform-rich-demo {
        min-height: 430px;
    }

    .directory-app,
    .catalog-showroom,
    .restaurant-control,
    .pos-terminal,
    .tour-planner,
    .realestate-finder {
        width: 100%;
    }

    .directory-app-body {
        grid-template-columns: 1fr;
    }

    .directory-results {
        grid-template-columns: repeat(3,1fr);
    }

    .directory-result-card {
        grid-template-columns: 1fr;
        text-align: center;
    }

    .directory-result-icon {
        margin-inline: auto;
    }

    .directory-result-card > i {
        display: none;
    }

    .restaurant-board {
        grid-template-columns: repeat(3, minmax(145px,1fr));
        overflow-x: auto;
    }

    .pos-terminal-body {
        grid-template-columns: 1fr;
    }

    .pos-product-grid {
        grid-template-columns: repeat(4,1fr);
    }

    .pos-ticket {
        min-height: auto;
    }

    .realestate-body {
        grid-template-columns: 1fr;
    }

    .realestate-list {
        grid-template-columns: 1fr 1fr;
    }

    .realestate-map {
        min-height: 220px;
    }
}

@media (max-width: 650px) {

    .platform-rich-demo {
        min-height: 390px;
    }

    .directory-app-head,
    .catalog-showroom-head,
    .restaurant-control-head,
    .pos-terminal-head,
    .tour-planner-head,
    .realestate-finder-head {
        padding: 12px;
    }

    .directory-app-search {
        margin: 0 12px 10px;
    }

    .directory-app-body {
        padding: 0 12px;
    }

    .directory-map-pro {
        min-height: 220px;
    }

    .directory-results {
        grid-template-columns: 1fr;
    }

    .directory-result-card {
        grid-template-columns: auto 1fr;
        text-align: left;
    }

    .directory-result-card > i {
        display: none;
    }

    .directory-app-categories {
        padding: 10px 12px 12px;
    }

    .catalog-showroom-hero {
        grid-template-columns: 1fr 105px;
        margin: 0 12px;
        padding: 15px;
    }

    .catalog-showroom-copy h4 {
        font-size: 1rem;
    }

    .catalog-product-shape {
        width: 92px;
        height: 92px;
    }

    .catalog-product-shape i {
        font-size: 2.1rem;
    }

    .catalog-filter-row {
        padding-inline: 12px;
    }

    .catalog-product-grid {
        gap: 5px;
        padding: 0 12px 12px;
    }

    .catalog-product-card > div {
        min-height: 64px;
    }

    .restaurant-kpis {
        padding: 9px 10px;
    }

    .restaurant-board {
        padding: 0 10px 10px;
    }

    .restaurant-column {
        min-height: 250px;
    }

    .pos-terminal-body {
        padding: 9px;
    }

    .pos-product-grid {
        grid-template-columns: repeat(2,1fr);
    }

    .pos-product-grid button {
        min-height: 72px;
    }

    .tour-feature {
        grid-template-columns: 115px 1fr;
        margin: 0 12px;
        padding: 9px;
    }

    .tour-feature-scene {
        min-height: 145px;
    }

    .tour-feature-scene i {
        font-size: 2.7rem;
    }

    .tour-feature-copy h4 {
        font-size: .72rem;
    }

    .tour-itinerary {
        margin-inline: 12px;
    }

    .tour-booking-bar {
        margin: 0 12px 12px;
    }

    .realestate-search {
        grid-template-columns: 1fr 1fr auto;
        margin: 0 12px 10px;
    }

    .realestate-search > div:nth-child(3) {
        display: none;
    }

    .realestate-body {
        padding: 0 12px 12px;
    }

    .realestate-list {
        grid-template-columns: 1fr;
    }

    .property-card {
        grid-template-columns: 76px 1fr;
    }

    .property-visual {
        min-height: 76px;
    }
}

@media (max-width: 390px) {

    .directory-app-categories span {
        font-size: .29rem;
    }

    .catalog-product-grid {
        grid-template-columns: repeat(2,1fr);
    }

    .catalog-product-card:last-child {
        display: none;
    }

    .tour-feature {
        grid-template-columns: 1fr;
    }

    .tour-feature-scene {
        min-height: 115px;
    }

    .tour-feature-copy p {
        display: none;
    }

    .tour-booking-bar {
        grid-template-columns: 1fr 1fr;
    }

    .tour-booking-bar button {
        grid-column: 1 / -1;
        min-height: 32px;
    }
}