@import url('https://fonts.googleapis.com/css2?family=Inter:ital,opsz,wght@0,14..32,100..900;1,14..32,100..900&family=Poppins:ital,wght@0,100;0,200;0,300;0,400;0,500;0,600;0,700;0,800;0,900;1,100;1,200;1,300;1,400;1,500;1,600;1,700;1,800;1,900&display=swap');

*{
    margin: 0;
    padding: 0;
    box-sizing: border-box;
}

.office-bank-box {
    display: grid;
    gap: .35rem;
    margin: 1rem 0;
    padding: 1rem;
    border: 1px solid rgba(0, 78, 190, .16);
    border-radius: 14px;
    background: rgba(0, 183, 149, .08);
    color: #071d49;
}

.office-bank-box span {
    color: #e6007e;
    font-weight: 800;
    font-size: .86rem;
    text-transform: uppercase;
}

/* Oficina virtual: navegacion horizontal y paleta Manik estandarizada */
body.office-body {
    --office-blue: #0758B7;
    --office-blue-dark: #062A66;
    --office-green: #00A86B;
    --office-pink: #E8006E;
    --office-bg: #F5F8FC;
    --office-border: #DCE7F5;
    --office-text: #152B4D;
    --office-muted: #6B778C;
    display: grid;
    grid-template-columns: 1fr;
    grid-template-rows: auto minmax(0, 1fr);
    height: 100vh;
    min-height: 100vh;
    overflow: hidden;
    background: var(--office-bg);
    color: var(--office-text);
}

.office-body .office-sidebar {
    position: sticky;
    top: 0;
    z-index: 1000;
    width: 100%;
    height: auto;
    min-height: 0;
    display: grid;
    grid-template-columns: 164px minmax(0, 1fr);
    align-items: end;
    gap: 1.25rem;
    overflow: visible;
    padding: 0.75rem 1.55rem 0;
    border-right: 0;
    border-bottom: 1px solid var(--office-border);
    background: rgba(255, 255, 255, 0.96);
    box-shadow: 0 10px 28px rgba(6, 42, 102, 0.08);
    backdrop-filter: blur(16px);
}

.office-body .office-sidebar::before {
    display: none;
}

.office-body .office-sidebar img {
    width: 136px;
    max-height: 68px;
    object-fit: contain;
    margin: 0 0 0.55rem;
    filter: none;
}

.office-body .office-sidebar nav {
    min-width: 0;
    display: flex;
    align-items: end;
    gap: 0.35rem;
    overflow-x: auto;
    overflow-y: hidden;
    padding: 0 0 0.05rem;
    scrollbar-width: thin;
    scrollbar-color: rgba(7, 88, 183, 0.25) transparent;
}

.office-body .office-sidebar nav::-webkit-scrollbar {
    height: 4px;
}

.office-body .office-sidebar nav::-webkit-scrollbar-thumb {
    border-radius: 999px;
    background: rgba(7, 88, 183, 0.25);
}

.office-body .office-sidebar button {
    position: relative;
    min-width: max-content;
    min-height: 48px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 0.4rem;
    flex: 0 0 auto;
    border: 0;
    border-radius: 0;
    background: transparent;
    color: var(--office-muted);
    cursor: pointer;
    font-size: 0.88rem;
    font-weight: 850;
    line-height: 1;
    padding: 0.75rem 0.75rem 0.9rem;
    text-align: center;
    white-space: nowrap;
    transition: color 160ms ease, background 160ms ease;
}

.office-body .office-sidebar button i {
    color: inherit;
    font-size: 1.05rem;
}

.office-body .office-sidebar button:hover,
.office-body .office-sidebar button.is-active {
    transform: none;
    border-color: transparent;
    background: transparent;
    color: var(--office-blue);
}

.office-body .office-sidebar button.is-active::after {
    content: '';
    position: absolute;
    left: 0.75rem;
    right: 0.75rem;
    bottom: 0;
    width: auto;
    height: 3px;
    border-radius: 999px 999px 0 0;
    background: linear-gradient(90deg, var(--office-blue), var(--office-green));
    box-shadow: none;
}

.office-body .office-sidebar button:disabled {
    color: #A6B1C2;
    cursor: not-allowed;
    opacity: 0.62;
}

.office-body .office-main {
    width: 100%;
    height: auto;
    min-height: 0;
    overflow-x: hidden;
    overflow-y: auto;
    padding: 1.25rem;
}

.office-body .office-header,
.office-body .dashboard-hero {
    border: 1px solid var(--office-border);
    border-radius: 12px;
    background: linear-gradient(135deg, #FFFFFF 0%, #F8FBFF 100%);
    box-shadow: 0 16px 38px rgba(6, 42, 102, 0.08);
}

.office-body .dashboard-hero {
    background: linear-gradient(135deg, var(--office-blue-dark), var(--office-blue));
}

.office-body .office-header::after {
    display: none;
}

.office-body .office-header span,
.office-body .office-panel-header span {
    color: var(--office-pink);
}

.office-body .office-header h1,
.office-body .office-panel-header h2,
.office-body .finance-panel h3,
.office-body .office-panel h2 {
    color: var(--office-blue);
}

.office-body .office-header-actions button,
.office-body .office-header button,
.office-body .office-panel button,
.office-body .shop-checkout,
.office-body .shop-product-info button {
    border-radius: 10px;
}

.office-body .office-header-actions button,
.office-body #btnLogoutOffice {
    border: 1px solid var(--office-border);
    background: #FFFFFF;
    color: var(--office-blue);
}

.office-body #btnVerificarCuenta,
.office-body .office-header-actions button.is-verified {
    border-color: transparent;
    background: linear-gradient(135deg, var(--office-green), #19C993);
    color: #FFFFFF;
}

.office-body #btnLogoutOffice {
    color: var(--office-pink);
}

.office-body .finance-kpi,
.office-body .finance-panel,
.office-body .office-panel,
.office-body .shop-cart,
.office-body .shop-product,
.office-body .member-upgrade-panel {
    border-color: var(--office-border);
    background: #FFFFFF;
    box-shadow: 0 14px 34px rgba(6, 42, 102, 0.07);
}

@media screen and (width < 920px) {
    .office-body .office-sidebar {
        grid-template-columns: 66px minmax(0, 1fr);
        gap: 0.65rem;
        padding: 0.6rem 0.75rem 0;
    }

    .office-body .office-sidebar img {
        width: 54px;
        max-height: 48px;
        margin-bottom: 0.45rem;
    }

    .office-body .office-sidebar button {
        min-height: 44px;
        padding-inline: 0.62rem;
        font-size: 0.82rem;
    }

    .office-body .office-main {
        padding: 0.85rem;
    }
}

/* Manik public website redesign */
body.landing-redesign {
    background: #F5FAFF;
    color: #092756;
}

.landing-redesign .header,
.landing-redesign .header_desktop {
    background: var(--color-detalles);
}

.landing-redesign .nav_logo img,
.landing-redesign .nav_logo_desktop img {
    max-height: 70px;
    object-fit: contain;
}

.site-redesign {
    overflow: hidden;
}

.web-shell {
    width: min(1180px, calc(100% - 2rem));
    margin-inline: auto;
}

.web-section {
    position: relative;
    display: grid;
    align-items: center;
    min-height: 760px;
    padding: 7.5rem 0 4rem;
    background-position: center;
    background-repeat: no-repeat;
    background-size: cover;
}

.web-section::before {
    content: "";
    position: absolute;
    inset: 0;
    pointer-events: none;
    background: linear-gradient(90deg, rgba(255,255,255,0.96) 0%, rgba(255,255,255,0.78) 42%, rgba(255,255,255,0.18) 100%);
}

.web-section > * {
    position: relative;
    z-index: 1;
}

.web-hero {
    background-image: url("../img/Fondo pagina web 4.jpeg");
    min-height: 940px;
    padding-top: 8.5rem;
    padding-bottom: 2rem;
    align-content: end;
    overflow: hidden;
}

.web-hero::before {
    background:
        linear-gradient(90deg, rgba(255,255,255,0.98) 0%, rgba(255,255,255,0.88) 34%, rgba(255,255,255,0.24) 69%, rgba(255,255,255,0.02) 100%),
        linear-gradient(180deg, rgba(255,255,255,0) 0%, rgba(255,255,255,0) 78%, rgba(255,255,255,0.84) 100%);
}

.web-hero::after {
    content: "";
    position: absolute;
    left: 0;
    right: 0;
    bottom: 0;
    height: 42px;
    background: #0758B7;
    z-index: 1;
}

.web-gencell {
    background-image: url("../img/Fondo pagina web 3.jpeg");
    min-height: 930px;
    padding-top: 4.4rem;
    padding-bottom: 3rem;
    align-content: end;
    overflow: hidden;
}

.web-gencell .web-shell {
    width: min(1760px, calc(100% - 3rem));
}

.web-gencell::before {
    background:
        linear-gradient(90deg, rgba(255,255,255,0.98) 0%, rgba(255,255,255,0.88) 33%, rgba(255,255,255,0.18) 63%, rgba(255,255,255,0.92) 100%),
        linear-gradient(180deg, rgba(255,255,255,0) 0%, rgba(255,255,255,0.04) 72%, rgba(255,255,255,0.94) 100%);
}

.web-gencell::after {
    content: "";
    position: absolute;
    left: 0;
    right: 0;
    bottom: 0;
    height: 42px;
    background: #0758B7;
    z-index: 1;
}

.web-products {
    background-image: url("../img/Fondo pagina web 2.jpeg");
    min-height: 920px;
    padding-top: 3rem;
    padding-bottom: 3rem;
    align-content: end;
    overflow: hidden;
}

.web-products::before {
    background:
        radial-gradient(circle at 4% 2%, rgba(43, 142, 230, 0.18), transparent 22%),
        radial-gradient(circle at 97% 2%, rgba(43, 142, 230, 0.16), transparent 18%),
        linear-gradient(180deg, rgba(255,255,255,0.96) 0%, rgba(255,255,255,0.82) 56%, rgba(255,255,255,0.95) 100%);
}

.web-products::after {
    content: "";
    position: absolute;
    left: 0;
    right: 0;
    bottom: 0;
    height: 42px;
    background: #0758B7;
    z-index: 1;
}

.web-products .web-shell {
    width: min(1760px, calc(100% - 3rem));
}

.web-business {
    background-image: url("../img/Fondo pagina web 1.jpeg");
    min-height: 940px;
    padding-top: 4.5rem;
    padding-bottom: 3rem;
    align-content: end;
    overflow: hidden;
}

.web-business::before {
    background:
        linear-gradient(90deg, rgba(255,255,255,0.98) 0%, rgba(255,255,255,0.88) 35%, rgba(255,255,255,0.28) 70%, rgba(255,255,255,0.10) 100%),
        linear-gradient(180deg, rgba(255,255,255,0) 0%, rgba(255,255,255,0.08) 72%, rgba(255,255,255,0.82) 100%);
}

.web-business::after {
    content: "";
    position: absolute;
    left: 0;
    right: 0;
    bottom: 0;
    height: 42px;
    background: #0758B7;
    z-index: 1;
}

.web-business .web-shell {
    width: min(1640px, calc(100% - 3rem));
}

.web-testimonials {
    background-image: url("../img/Fondo pagina web 6.jpeg");
    min-height: 900px;
    padding-top: 4rem;
    padding-bottom: 3rem;
    align-content: end;
    overflow: hidden;
}

.web-testimonials::before {
    background:
        linear-gradient(90deg, rgba(255,255,255,0.98) 0%, rgba(255,255,255,0.88) 36%, rgba(255,255,255,0.24) 78%, rgba(255,255,255,0.12) 100%),
        linear-gradient(180deg, rgba(255,255,255,0) 0%, rgba(255,255,255,0.04) 72%, rgba(255,255,255,0.88) 100%);
}

.web-testimonials::after {
    content: "";
    position: absolute;
    left: 0;
    right: 0;
    bottom: 0;
    height: 42px;
    background: #0758B7;
    z-index: 1;
}

.web-testimonials .web-shell {
    width: min(1640px, calc(100% - 3rem));
}

.web-faq {
    background-image: url("../img/Fondo pagina web 2.jpeg");
    min-height: 900px;
    padding-top: 4rem;
    padding-bottom: 3rem;
    align-content: end;
    overflow: hidden;
}

.web-faq::before {
    background:
        radial-gradient(circle at 0% 70%, rgba(74, 197, 46, 0.18), transparent 20%),
        radial-gradient(circle at 90% 12%, rgba(43, 142, 230, 0.18), transparent 24%),
        linear-gradient(180deg, rgba(255,255,255,0.94) 0%, rgba(255,255,255,0.76) 54%, rgba(255,255,255,0.90) 100%);
}

.web-faq::after {
    content: "";
    position: absolute;
    left: 0;
    right: 0;
    bottom: 0;
    height: 42px;
    background: #0758B7;
    z-index: 1;
}

.web-faq .web-shell {
    width: min(1420px, calc(100% - 3rem));
}

.web-final {
    min-height: 620px;
    background-image: url("../img/Fondo pagina web 7.jpeg");
    padding-top: 4rem;
    padding-bottom: 2.6rem;
    align-content: end;
    overflow: hidden;
}

.web-final::before {
    background:
        linear-gradient(90deg, rgba(255,255,255,0.04) 0%, rgba(255,255,255,0.18) 36%, rgba(255,255,255,0.94) 53%, rgba(255,255,255,0.98) 100%),
        linear-gradient(180deg, rgba(255,255,255,0) 0%, rgba(255,255,255,0.06) 70%, rgba(255,255,255,0.86) 100%);
}

.web-final::after {
    content: "";
    position: absolute;
    left: 0;
    right: 0;
    bottom: 0;
    height: 42px;
    background: #0758B7;
    z-index: 1;
}

.web-final .web-shell {
    width: min(1540px, calc(100% - 3rem));
}

.web-testimonials::before {
    background: linear-gradient(90deg, rgba(255,255,255,0.90) 0%, rgba(255,255,255,0.70) 54%, rgba(255,255,255,0.20) 100%);
}

.web-hero__grid,
.web-two-col {
    display: grid;
    grid-template-columns: minmax(0, 0.95fr) minmax(360px, 1.05fr);
    gap: clamp(2rem, 5vw, 5rem);
    align-items: center;
}

.web-hero__grid {
    grid-template-columns: minmax(580px, 0.92fr) minmax(520px, 1.08fr);
    align-items: end;
    min-height: 585px;
}

.web-copy {
    max-width: 620px;
}

.web-kicker {
    display: inline-flex;
    align-items: center;
    gap: 0.45rem;
    margin-bottom: 1rem;
    border-radius: 999px;
    background: rgba(255, 255, 255, 0.82);
    color: #05866F;
    font-weight: 950;
    font-size: 0.78rem;
    letter-spacing: 0;
    padding: 0.55rem 0.8rem;
    text-transform: uppercase;
    box-shadow: 0 12px 28px rgba(7, 44, 92, 0.08);
}

.web-copy h1,
.web-copy h2,
.web-heading h2,
.web-final h2 {
    color: #003B8F;
    font-family: var(--font-titulo);
    font-weight: 950;
    letter-spacing: 0;
    line-height: 0.96;
    margin: 0;
    text-transform: uppercase;
}

.web-copy h1 {
    max-width: 620px;
    font-size: clamp(3.4rem, 8vw, 6.7rem);
}

.web-hero .web-copy {
    align-self: center;
    max-width: 700px;
    padding-bottom: 1rem;
}

.web-hero .web-copy h1 {
    max-width: 720px;
    color: #061B45;
    font-size: clamp(2.6rem, 4.35vw, 4.85rem);
    font-style: italic;
    line-height: 0.92;
}

.web-hero .web-copy h1 span,
.web-hero .web-copy h1 strong {
    display: block;
    white-space: nowrap;
}

.web-hero .web-copy h1 span {
    color: #061B45;
}

.web-hero .web-copy h1 strong {
    background: linear-gradient(100deg, #11C883 0%, #0AA7DD 58%, #3D11C9 100%);
    -webkit-background-clip: text;
    background-clip: text;
    color: transparent;
    font-weight: 950;
}

.web-hero .web-copy h3 {
    position: relative;
    margin: 1.65rem 0 0;
    color: #071C44;
    font-family: var(--font-titulo);
    font-size: clamp(1.45rem, 2vw, 2.25rem);
    font-weight: 950;
    letter-spacing: 0;
    text-transform: uppercase;
}

.web-hero .web-copy h3::before {
    content: "";
    display: block;
    width: 170px;
    height: 5px;
    margin-bottom: 1.25rem;
    border-radius: 999px;
    background: linear-gradient(90deg, #00BF84 0 38%, #12A8DF 38% 72%, #7C2AE8 72%);
}

.web-hero .web-copy p {
    max-width: 650px;
    color: #152B4D;
    font-size: clamp(1.05rem, 1.55vw, 1.42rem);
    font-weight: 700;
    line-height: 1.45;
}

.web-copy h2,
.web-heading h2,
.web-final h2 {
    font-size: clamp(2.25rem, 5vw, 4.6rem);
}

.web-copy p,
.web-heading p,
.web-faq-list p,
.web-testimonial-grid p,
.web-product-grid p,
.web-steps p {
    color: #294463;
    font-size: clamp(1rem, 1.2vw, 1.16rem);
    line-height: 1.65;
}

.web-actions,
.web-center-actions,
.web-final-actions {
    display: flex;
    flex-wrap: wrap;
    gap: 0.85rem;
    margin-top: 1.6rem;
}

.web-btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 0.45rem;
    min-height: 48px;
    border: 0;
    border-radius: 999px;
    cursor: pointer;
    font-family: var(--font-texto);
    font-size: 0.95rem;
    font-weight: 950;
    line-height: 1.1;
    padding: 0.9rem 1.25rem;
    text-decoration: none;
}

.web-btn--green {
    background: linear-gradient(135deg, #00A86B, #00D79E);
    color: #FFFFFF;
    box-shadow: 0 18px 34px rgba(0, 168, 107, 0.22);
}

.web-btn--blue {
    background: linear-gradient(135deg, #064FB6, #098CEB);
    color: #FFFFFF;
    box-shadow: 0 18px 34px rgba(6, 79, 182, 0.22);
}

.web-btn--pink {
    background: linear-gradient(135deg, #E8006E, #FF4DA3);
    color: #FFFFFF;
    box-shadow: 0 18px 34px rgba(232, 0, 110, 0.22);
}

.web-btn--ghost,
.web-btn--ghost-dark {
    border: 1px solid rgba(0, 82, 180, 0.18);
    background: rgba(255, 255, 255, 0.78);
    color: #0052B4;
}

.web-btn--whatsapp {
    border: 2px solid rgba(0, 168, 107, 0.42);
    background: rgba(255, 255, 255, 0.82);
    color: #00A86B;
    box-shadow: 0 16px 28px rgba(0, 168, 107, 0.10);
}

.web-product-stage {
    position: relative;
    min-height: 520px;
}

.web-hero .web-product-stage {
    align-self: end;
    min-height: 690px;
    margin-right: -9vw;
    margin-bottom: -1.2rem;
}

.web-product-stage::before {
    content: "";
    position: absolute;
    inset: 7% 4% 2% 18%;
    border-radius: 999px;
    background: radial-gradient(circle, rgba(0, 187, 204, 0.22), rgba(0, 82, 180, 0.04) 68%, transparent 70%);
    filter: blur(8px);
}

.web-hero .web-product-stage::before {
    inset: 0 8% 8% 28%;
    background: radial-gradient(circle, rgba(255,255,255,0.45), rgba(0, 187, 204, 0.16) 50%, transparent 72%);
}

.web-product-stage__main,
.web-product-stage__second {
    position: absolute;
    object-fit: contain;
    filter: drop-shadow(0 34px 42px rgba(0, 44, 108, 0.25));
}

.web-product-stage__main {
    right: 10%;
    bottom: 4%;
    width: min(420px, 62%);
}

.web-product-stage__second {
    right: 38%;
    bottom: 1%;
    width: min(350px, 50%);
}

.web-hero .web-product-stage__main {
    right: 22%;
    bottom: 0;
    width: min(820px, 82%);
    z-index: 2;
}

.web-hero .web-product-stage__second {
    right: -2%;
    bottom: 9%;
    width: min(690px, 68%);
    opacity: 0.88;
    z-index: 1;
}

.web-product-stage__badge {
    position: absolute;
    right: 4%;
    top: 14%;
    max-width: 210px;
    border: 1px solid rgba(255, 255, 255, 0.7);
    border-radius: 18px;
    background: rgba(255, 255, 255, 0.84);
    padding: 1rem;
    box-shadow: 0 24px 50px rgba(0, 48, 110, 0.16);
}

.web-product-stage__badge span,
.web-showcase-card span {
    display: block;
    color: #E8006E;
    font-size: 0.78rem;
    font-weight: 950;
    text-transform: uppercase;
}

.web-product-stage__badge strong {
    color: #003B8F;
    font-family: var(--font-titulo);
    font-size: 2rem;
}

.web-feature-strip {
    display: grid;
    grid-template-columns: repeat(4, minmax(0, 1fr));
    gap: 0.8rem;
    margin-top: 2.5rem;
}

.web-hero .web-feature-strip {
    grid-template-columns: repeat(4, minmax(0, 1fr));
    max-width: 875px;
    margin-top: -1.1rem;
    margin-left: max(1rem, calc((100vw - 1180px) / 2));
    margin-right: auto;
}

.web-feature-strip article,
.web-mini-grid article,
.web-product-grid article,
.web-steps article,
.web-testimonial-grid article,
.web-faq-list article,
.web-support-box,
.web-final__panel {
    border: 1px solid rgba(0, 82, 180, 0.13);
    border-radius: 18px;
    background: rgba(255, 255, 255, 0.82);
    box-shadow: 0 20px 45px rgba(5, 45, 100, 0.11);
    backdrop-filter: blur(14px);
}

.web-feature-strip article {
    display: flex;
    align-items: center;
    gap: 0.7rem;
    padding: 0.85rem 1rem;
    color: #003B8F;
    font-weight: 950;
}

.web-hero .web-feature-strip article {
    display: grid;
    align-content: start;
    justify-items: center;
    min-height: 170px;
    gap: 0.35rem;
    border: 0;
    border-right: 1px solid rgba(0, 51, 110, 0.18);
    border-radius: 0;
    background: rgba(255, 255, 255, 0.02);
    box-shadow: none;
    text-align: center;
}

.web-hero .web-feature-strip article:last-child {
    border-right: 0;
}

.web-hero .web-feature-strip i {
    display: inline-grid;
    place-items: center;
    width: 76px;
    height: 76px;
    border-radius: 50%;
    background: rgba(255, 255, 255, 0.76);
    color: #18A8D8;
    font-size: 2.7rem;
    box-shadow: 0 14px 30px rgba(0, 82, 180, 0.10);
}

.web-hero .web-feature-strip strong {
    color: #071C44;
    font-size: 1rem;
    font-weight: 950;
    line-height: 1.1;
    text-transform: uppercase;
}

.web-hero .web-feature-strip span {
    max-width: 170px;
    color: #243957;
    font-size: 0.82rem;
    font-weight: 700;
    line-height: 1.35;
}

.web-trust-strip {
    display: grid;
    grid-template-columns: 1.55fr repeat(4, 1fr);
    align-items: center;
    gap: 0;
    margin-top: 0.6rem;
    margin-bottom: 2.4rem;
    border-radius: 18px;
    background: rgba(255,255,255,0.82);
    box-shadow: 0 18px 38px rgba(0, 48, 110, 0.15);
    backdrop-filter: blur(16px);
    overflow: hidden;
}

.web-trust-strip article {
    display: flex;
    align-items: center;
    gap: 0.85rem;
    min-height: 88px;
    padding: 0.9rem 1.05rem;
    border-right: 1px solid rgba(0, 51, 110, 0.12);
}

.web-trust-strip article:last-child {
    border-right: 0;
}

.web-trust-strip i {
    color: #13A9D9;
    font-size: 2rem;
}

.web-trust-strip span,
.web-trust-strip p {
    margin: 0;
    color: #28405F;
    font-size: 0.92rem;
    font-weight: 850;
    line-height: 1.22;
}

.web-community-proof strong {
    color: #FFC300;
    letter-spacing: 0.12rem;
}

.web-face-stack {
    display: flex;
    min-width: 142px;
}

.web-face-stack span {
    display: inline-grid;
    place-items: center;
    width: 44px;
    height: 44px;
    margin-left: -10px;
    border: 3px solid #FFFFFF;
    border-radius: 50%;
    background: linear-gradient(135deg, #0AA7DD, #00BF84);
    color: #FFFFFF;
    font-size: 0.78rem;
    font-weight: 950;
}

.web-face-stack span:first-child {
    margin-left: 0;
}

.web-feature-strip i,
.web-mini-grid i {
    color: #00A86B;
    font-size: 1.35rem;
}

.web-mini-grid {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 0.8rem;
    margin-top: 1.6rem;
}

.web-gencell-layout {
    display: grid;
    grid-template-columns: minmax(620px, 1.08fr) minmax(360px, 0.78fr) minmax(320px, 0.72fr);
    gap: 1.05rem;
    align-items: center;
}

.web-gencell-copy {
    max-width: 760px;
}

.web-gencell-copy h2 {
    color: #061B45;
    font-size: clamp(2.35rem, 3.15vw, 4.15rem);
    line-height: 1.02;
    text-transform: none;
}

.web-gencell-copy h2 > span {
    display: block;
}

.web-gencell-copy h2::after {
    content: "";
    display: block;
    width: 170px;
    height: 4px;
    margin: 0.9rem auto 0 43%;
    border-radius: 999px;
    background: linear-gradient(90deg, #0AA7DD 0 38%, #7C2AE8 38% 68%, #91C840 68%);
}

.web-gencell-copy h2 strong {
    display: inline;
    color: #05866F;
    text-transform: uppercase;
}

.web-gencell-copy p {
    max-width: 690px;
    margin-top: 1.5rem;
    color: #152B4D;
    font-size: clamp(1rem, 1.25vw, 1.28rem);
    font-weight: 700;
    line-height: 1.45;
}

.gencell-benefit-cards {
    display: grid;
    grid-template-columns: repeat(4, minmax(0, 1fr));
    gap: 0.62rem;
    margin-top: 1.7rem;
}

.gencell-benefit-cards article {
    display: grid;
    align-content: start;
    justify-items: center;
    min-height: 224px;
    border: 1px solid rgba(0, 82, 180, 0.10);
    border-radius: 10px;
    background: rgba(255, 255, 255, 0.86);
    padding: 1rem 0.58rem;
    text-align: center;
    box-shadow: 0 18px 36px rgba(5, 45, 100, 0.10);
}

.gencell-benefit-cards i {
    display: inline-grid;
    place-items: center;
    width: 54px;
    height: 54px;
    margin-bottom: 0.75rem;
    border: 3px solid currentColor;
    border-radius: 50%;
    color: #178B4E;
    font-size: 1.85rem;
}

.gencell-benefit-cards article:nth-child(2) i,
.gencell-benefit-cards article:nth-child(2) strong {
    color: #0B73D9;
}

.gencell-benefit-cards article:nth-child(3) i,
.gencell-benefit-cards article:nth-child(3) strong {
    color: #6C32D9;
}

.gencell-benefit-cards article:nth-child(4) i,
.gencell-benefit-cards article:nth-child(4) strong {
    color: #195F30;
}

.gencell-benefit-cards strong {
    color: #178B4E;
    font-size: 0.78rem;
    font-weight: 950;
    line-height: 1.12;
    text-transform: uppercase;
}

.gencell-benefit-cards span {
    margin-top: 0.7rem;
    color: #263C5C;
    font-size: 0.72rem;
    font-weight: 700;
    line-height: 1.35;
}

.gencell-center-stage {
    position: relative;
    min-height: 545px;
}

.gencell-center-stage::before {
    content: "";
    position: absolute;
    left: 6%;
    right: 2%;
    bottom: 0;
    height: 88px;
    border-radius: 50%;
    background: linear-gradient(180deg, rgba(255,255,255,0.95), rgba(197,217,232,0.55));
    box-shadow: 0 18px 45px rgba(0, 35, 85, 0.20);
}

.gencell-center-stage img {
    position: absolute;
    left: 50%;
    bottom: 5%;
    width: min(560px, 118%);
    transform: translateX(-50%);
    filter: drop-shadow(0 34px 40px rgba(0, 29, 73, 0.35));
    z-index: 2;
}

.gencell-generation-badge {
    position: absolute;
    right: -6%;
    bottom: 28%;
    display: grid;
    place-items: center;
    width: 150px;
    height: 150px;
    border: 6px solid rgba(71, 211, 126, 0.92);
    border-radius: 50%;
    background: radial-gradient(circle, #103765 0%, #062A4F 72%);
    color: #FFFFFF;
    text-align: center;
    box-shadow: 0 20px 40px rgba(0, 36, 91, 0.28);
    z-index: 3;
}

.gencell-generation-badge strong {
    max-width: 110px;
    font-size: 0.88rem;
    font-weight: 950;
    line-height: 1.25;
    text-transform: uppercase;
}

.gencell-generation-badge i {
    color: #91C840;
    font-size: 1.4rem;
}

.gencell-tech-list {
    display: grid;
    gap: 1rem;
}

.gencell-tech-list article {
    display: grid;
    grid-template-columns: 78px minmax(0, 1fr);
    gap: 1rem;
    align-items: center;
    padding-bottom: 1rem;
    border-bottom: 1px solid rgba(0, 52, 120, 0.12);
}

.gencell-tech-list article:last-child {
    border-bottom: 0;
}

.gencell-tech-list i {
    display: inline-grid;
    place-items: center;
    width: 70px;
    height: 70px;
    border: 4px solid rgba(0, 82, 180, 0.18);
    border-radius: 50%;
    background: rgba(255,255,255,0.86);
    color: #178B4E;
    font-size: 2.2rem;
    box-shadow: 0 12px 26px rgba(0, 48, 110, 0.12);
}

.gencell-tech-list article:nth-child(2) i,
.gencell-tech-list article:nth-child(2) strong,
.gencell-tech-list article:nth-child(5) i,
.gencell-tech-list article:nth-child(5) strong {
    color: #0B73D9;
}

.gencell-tech-list article:nth-child(3) i,
.gencell-tech-list article:nth-child(3) strong {
    color: #7537D8;
}

.gencell-tech-list strong {
    display: block;
    color: #178B4E;
    font-size: 1rem;
    font-weight: 950;
    line-height: 1.12;
    text-transform: uppercase;
}

.gencell-tech-list span {
    display: block;
    margin-top: 0.25rem;
    color: #263C5C;
    font-size: 0.9rem;
    font-weight: 700;
    line-height: 1.35;
}

.gencell-bottom-zone {
    margin-top: -2rem;
}

.gencell-seeker-bar,
.gencell-cta-bar {
    display: grid;
    align-items: center;
    border-radius: 10px;
    background: linear-gradient(100deg, #061B45, #06345F 62%, #064F49);
    color: #FFFFFF;
    box-shadow: 0 18px 38px rgba(0, 29, 73, 0.18);
}

.gencell-seeker-bar {
    grid-template-columns: 1.65fr repeat(4, 1fr);
    gap: 0;
    padding: 0.85rem 1.15rem;
}

.gencell-seeker-bar h3,
.gencell-cta-bar h3 {
    margin: 0;
    color: #FFFFFF;
    font-family: var(--font-titulo);
    font-size: 1.15rem;
    font-weight: 950;
    line-height: 1.1;
    text-transform: uppercase;
}

.gencell-seeker-bar h3 {
    text-align: center;
}

.gencell-seeker-bar article {
    display: flex;
    align-items: center;
    gap: 0.7rem;
    min-height: 72px;
    padding-inline: 1rem;
    border-left: 1px solid rgba(255,255,255,0.22);
}

.gencell-seeker-bar i {
    color: #91C840;
    font-size: 2.2rem;
}

.gencell-seeker-bar strong {
    display: block;
    color: #91C840;
    font-weight: 950;
    text-transform: uppercase;
}

.gencell-seeker-bar span,
.gencell-cta-bar p {
    color: rgba(255,255,255,0.88);
    font-size: 0.86rem;
    line-height: 1.25;
}

.gencell-cta-bar {
    grid-template-columns: minmax(0, 1.4fr) minmax(210px, 0.7fr) minmax(210px, 0.7fr);
    gap: 1rem;
    margin-top: 0.45rem;
    padding: 0.9rem 1.15rem;
}

.gencell-cta-bar p {
    margin: 0.25rem 0 0;
}

.gencell-quality-strip {
    display: grid;
    grid-template-columns: repeat(4, 1fr) 1.35fr;
    align-items: center;
    gap: 0;
    margin-top: 0.8rem;
}

.gencell-quality-strip article {
    display: flex;
    align-items: center;
    gap: 0.75rem;
    min-height: 70px;
    padding: 0.75rem 1rem;
    border-right: 1px solid rgba(0, 52, 120, 0.13);
}

.gencell-quality-strip article:last-child {
    border-right: 0;
    border-radius: 10px;
    background: rgba(255, 255, 255, 0.72);
}

.gencell-quality-strip i {
    color: #178B4E;
    font-size: 2rem;
}

.gencell-quality-strip span,
.gencell-quality-strip strong {
    display: block;
    color: #152B4D;
    font-size: 0.92rem;
    font-weight: 950;
    line-height: 1.2;
    text-transform: uppercase;
}

.gencell-quality-strip article:last-child span {
    color: #52657E;
    font-size: 0.78rem;
    font-weight: 700;
    text-transform: none;
}

.web-mini-grid article {
    padding: 1rem;
}

.web-mini-grid strong {
    display: block;
    margin: 0.45rem 0 0.25rem;
    color: #003B8F;
}

.web-mini-grid span {
    color: #52657E;
    font-size: 0.9rem;
    line-height: 1.45;
}

.web-showcase-card {
    display: grid;
    grid-template-columns: minmax(180px, 0.82fr) minmax(0, 1fr);
    gap: 1.5rem;
    align-items: center;
    border-radius: 28px;
    background: linear-gradient(135deg, rgba(255,255,255,0.94), rgba(235,248,255,0.84));
    padding: 1.25rem;
    box-shadow: 0 28px 70px rgba(0, 48, 110, 0.16);
}

.web-showcase-card img {
    width: 100%;
    max-height: 430px;
    object-fit: contain;
    filter: drop-shadow(0 26px 30px rgba(0, 42, 97, 0.2));
}

.web-showcase-card h3,
.web-product-grid h3,
.web-steps strong,
.web-faq-list h3 {
    color: #003B8F;
    font-family: var(--font-titulo);
    font-size: clamp(1.35rem, 2vw, 2rem);
    line-height: 1.05;
    margin: 0.45rem 0;
}

.web-heading {
    max-width: 820px;
    margin: 0 auto 2rem;
    text-align: center;
}

.web-heading .web-kicker {
    margin-inline: auto;
}

.web-product-grid,
.web-testimonial-grid {
    display: grid;
    grid-template-columns: repeat(4, minmax(0, 1fr));
    gap: 1rem;
}

.products-header-row {
    display: grid;
    grid-template-columns: minmax(260px, 1fr) minmax(760px, 1.35fr) minmax(250px, 1fr);
    align-items: start;
    gap: 1rem;
    margin-bottom: 1rem;
}

.products-header-row .products-heading {
    grid-column: 2;
}

.products-top-note {
    grid-column: 3;
    display: grid;
    grid-template-columns: 54px minmax(0, 220px);
    gap: 0.75rem;
    align-items: center;
    justify-self: end;
    padding-top: 0.2rem;
}

.products-top-note i {
    display: inline-grid;
    place-items: center;
    width: 54px;
    height: 54px;
    border: 2px solid rgba(0, 150, 96, 0.22);
    border-radius: 50%;
    background: rgba(255,255,255,0.82);
    color: #078854;
    font-size: 1.7rem;
    box-shadow: 0 12px 28px rgba(0, 48, 110, 0.12);
}

.products-top-note strong,
.products-top-note span {
    display: block;
}

.products-top-note strong {
    color: #078854;
    font-size: 0.88rem;
    font-weight: 950;
    line-height: 1.16;
    text-transform: uppercase;
}

.products-top-note span {
    margin-top: 0.35rem;
    color: #263C5C;
    font-size: 0.8rem;
    font-weight: 750;
    line-height: 1.35;
}

.products-heading {
    max-width: 900px;
    margin-bottom: 0;
}

.products-heading h2 {
    color: #061B45;
    font-size: clamp(3.2rem, 4.2vw, 5.6rem);
    line-height: 0.9;
}

.products-heading h2 span,
.products-heading h2 strong {
    display: block;
}

.products-heading h2 strong {
    color: #078854;
}

.products-heading h2::after {
    content: "";
    display: block;
    width: 270px;
    height: 4px;
    margin: 0.85rem auto 0;
    border-radius: 999px;
    background: linear-gradient(90deg, #0AA7DD 0 33%, #7C2AE8 33% 66%, #91C840 66%);
}

.products-heading p {
    max-width: 780px;
    margin-inline: auto;
    color: #152B4D;
    font-size: clamp(1rem, 1.35vw, 1.35rem);
    font-weight: 800;
    line-height: 1.35;
}

.results-card-grid {
    display: grid;
    grid-template-columns: repeat(4, minmax(0, 1fr));
    gap: 1.35rem;
}

.results-card {
    overflow: hidden;
    border: 1px solid rgba(0, 82, 180, 0.12);
    border-radius: 18px;
    background: rgba(255,255,255,0.92);
    box-shadow: 0 20px 42px rgba(0, 48, 110, 0.14);
}

.results-card__image {
    position: relative;
    min-height: 150px;
    background-position: center;
    background-size: cover;
}

.results-card__image::after {
    content: "";
    position: absolute;
    inset: 0;
    background: linear-gradient(180deg, rgba(0,0,0,0.02), rgba(0,0,0,0.10));
}

.results-card__image i {
    position: absolute;
    left: 1.4rem;
    top: 1rem;
    z-index: 1;
    display: inline-grid;
    place-items: center;
    width: 62px;
    height: 62px;
    border: 3px solid rgba(255,255,255,0.82);
    border-radius: 50%;
    background: #3F8B2F;
    color: #FFFFFF;
    font-size: 2.1rem;
    box-shadow: 0 12px 28px rgba(0, 48, 110, 0.20);
}

.results-card__image--energy {
    background-image: url("../img/Fondo pagina web 4.jpeg");
}

.results-card__image--focus {
    background-image: url("../img/Fondo pagina web 5.jpeg");
}

.results-card__image--protect {
    background-image: url("../img/Fondo pagina web 7.jpeg");
}

.results-card__image--balance {
    background-image: url("../img/Fondo pagina web 6.jpeg");
}

.results-card__body {
    display: grid;
    align-content: start;
    min-height: 255px;
    padding: 1rem 1.15rem 1.25rem;
    text-align: center;
}

.results-card h3 {
    color: #078854;
    font-family: var(--font-titulo);
    font-size: clamp(1.35rem, 1.7vw, 2rem);
    font-weight: 950;
    line-height: 1.05;
    margin: 0;
    text-transform: uppercase;
}

.results-card--blue h3,
.results-card--blue .results-card__body strong {
    color: #0668D9;
}

.results-card--purple h3,
.results-card--purple .results-card__body strong {
    color: #6B35CE;
}

.results-card--blue .results-card__image i {
    background: #0668D9;
}

.results-card--purple .results-card__image i {
    background: #6B35CE;
}

.results-card p {
    margin: 0.6rem 0 1rem;
    color: #152B4D;
    font-size: 0.98rem;
    font-weight: 800;
    line-height: 1.45;
}

.results-card__body strong {
    color: #078854;
    font-size: 0.9rem;
    font-weight: 950;
}

.results-card__placeholder {
    min-height: 120px;
    margin-top: 1rem;
    border: 2px dashed rgba(0, 150, 96, 0.28);
    border-radius: 16px;
    background: rgba(255,255,255,0.48);
}

.results-card--blue .results-card__placeholder {
    border-color: rgba(6, 104, 217, 0.28);
}

.results-card--purple .results-card__placeholder {
    border-color: rgba(107, 53, 206, 0.28);
}

.product-suggestion-grid {
    display: grid;
    grid-template-columns: 1fr;
    gap: 1.05rem;
    align-items: stretch;
    padding: 1rem;
}

.product-suggestion-grid--four {
    grid-template-columns: 1fr;
}

.product-suggestion-grid article {
    position: relative;
    display: grid;
    grid-template-columns: 96px minmax(0, 1fr);
    align-items: center;
    justify-items: start;
    gap: .8rem;
    min-width: 0;
    min-height: 116px;
    padding: .75rem .9rem;
    border: 1px solid rgba(0, 82, 180, .08);
    border-radius: 16px;
    background: rgba(255,255,255,.9);
    box-shadow: 0 12px 24px rgba(0, 48, 110, .08);
}

.product-suggestion-grid article:not(:last-child)::after {
    content: "+";
    position: absolute;
    left: 50%;
    bottom: -1.05rem;
    z-index: 2;
    display: grid;
    place-items: center;
    width: 30px;
    height: 30px;
    border: 2px solid #ffffff;
    border-radius: 50%;
    background: #078854;
    color: #ffffff;
    font-family: var(--font-titulo);
    font-size: 1.15rem;
    font-weight: 950;
    line-height: 1;
    transform: translateX(-50%);
    box-shadow: 0 8px 18px rgba(0, 48, 110, .18);
}

.results-card--blue .product-suggestion-grid article:not(:last-child)::after {
    background: #0668D9;
}

.results-card--purple .product-suggestion-grid article:not(:last-child)::after {
    background: #6B35CE;
}

.product-suggestion-grid img {
    width: 100%;
    max-width: 92px;
    height: 92px;
    object-fit: contain;
    filter: drop-shadow(0 12px 14px rgba(0, 48, 110, .18));
}

.product-suggestion-grid span {
    color: #0A2A69;
    font-size: .98rem;
    font-weight: 900;
    line-height: 1.1;
    text-align: left;
}

.products-count-strip {
    display: grid;
    grid-template-columns: minmax(0, 1fr) minmax(430px, 0.42fr);
    align-items: center;
    min-height: 94px;
    margin-top: 1rem;
    border-radius: 16px;
    background: rgba(255,255,255,0.84);
    box-shadow: 0 16px 32px rgba(0, 48, 110, 0.10);
}

.products-count-strip article {
    display: grid;
    grid-template-columns: 58px minmax(78px, 0.8fr) auto minmax(120px, 1fr);
    gap: 0.55rem;
    align-items: center;
    padding: 0.9rem 1.1rem;
    border-left: 1px solid rgba(0, 52, 120, 0.15);
}

.products-count-strip i {
    display: inline-grid;
    place-items: center;
    width: 52px;
    height: 52px;
    border-radius: 50%;
    background: #EEF2F6;
    color: #8A96A7;
    font-size: 1.9rem;
}

.products-count-strip strong {
    color: #078854;
    font-family: var(--font-titulo);
    font-size: 3.05rem;
    line-height: 1;
    white-space: nowrap;
}

.products-count-strip span {
    color: #263C5C;
    font-size: 0.9rem;
    font-weight: 850;
    line-height: 1.18;
    min-width: 0;
    overflow-wrap: normal;
}

.products-action-row {
    display: grid;
    grid-template-columns: minmax(260px, 0.9fr) minmax(260px, 0.82fr) minmax(360px, 1fr);
    gap: 1.4rem;
    align-items: center;
    width: min(1320px, 100%);
    margin: 1.25rem auto 0;
}

.products-action-row .web-btn {
    min-height: 82px;
    border-radius: 12px;
    font-size: 1.35rem;
    justify-content: flex-start;
    padding-inline: 1.5rem;
    text-transform: uppercase;
}

.products-action-row .web-btn i {
    display: inline-grid;
    place-items: center;
    width: 54px;
    height: 54px;
    border: 2px solid rgba(255,255,255,0.30);
    border-radius: 50%;
    font-size: 1.8rem;
}

.products-rating {
    display: grid;
    grid-template-columns: auto minmax(0, 1fr);
    gap: 1rem;
    align-items: center;
}

.products-rating strong {
    color: #FFC300;
    font-size: 1.6rem;
    letter-spacing: 0.12rem;
}

.products-rating p {
    margin: 0;
    color: #152B4D;
    font-size: 0.95rem;
    font-weight: 850;
    line-height: 1.35;
}

.products-trust-strip {
    display: grid;
    grid-template-columns: repeat(4, minmax(0, 1fr));
    gap: 0;
    width: min(1420px, 100%);
    margin: 1.25rem auto 0;
    border-radius: 14px;
    background: rgba(255,255,255,0.82);
    box-shadow: 0 16px 32px rgba(0, 48, 110, 0.10);
}

.products-trust-strip article {
    display: flex;
    align-items: center;
    gap: 0.8rem;
    min-height: 74px;
    padding: 0.8rem 1rem;
    border-right: 1px solid rgba(0, 52, 120, 0.12);
}

.products-trust-strip article:last-child {
    border-right: 0;
}

.products-trust-strip i {
    color: #0668D9;
    font-size: 2rem;
}

.products-trust-strip strong,
.products-trust-strip span {
    display: block;
}

.products-trust-strip strong {
    color: #061B45;
    font-size: 0.9rem;
    font-weight: 950;
    text-transform: uppercase;
}

.products-trust-strip span {
    color: #52657E;
    font-size: 0.82rem;
    font-weight: 750;
    line-height: 1.2;
}

.business-opportunity {
    display: grid;
    align-content: end;
    min-height: 820px;
}

.business-hero-copy {
    max-width: 690px;
    margin-bottom: 2rem;
}

.business-label {
    display: inline-flex;
    align-items: center;
    gap: 0;
    margin-bottom: 1.6rem;
    filter: drop-shadow(0 14px 24px rgba(0, 48, 110, 0.14));
}

.business-label img {
    width: 84px;
    height: 84px;
    margin-right: -16px;
    border-radius: 50%;
    background: #FFFFFF;
    object-fit: contain;
    padding: 0.28rem;
    z-index: 1;
}

.business-label span,
.business-label strong {
    display: inline-flex;
    align-items: center;
    min-height: 48px;
    color: #FFFFFF;
    font-size: 1.18rem;
    font-weight: 950;
    text-transform: uppercase;
}

.business-label span {
    border-radius: 999px 0 0 999px;
    background: linear-gradient(135deg, #0B4FD5, #0A7BE8);
    padding: 0 1.4rem 0 2rem;
}

.business-label strong {
    border-radius: 0 999px 999px 0;
    background: linear-gradient(135deg, #049235, #42B52E);
    padding: 0 1.5rem;
}

.business-hero-copy h2 {
    margin: 0;
    color: #0A41C6;
    font-family: var(--font-titulo);
    font-size: clamp(3.3rem, 5.1vw, 6.8rem);
    font-weight: 950;
    line-height: 0.96;
    text-transform: uppercase;
}

.business-hero-copy h2 span,
.business-hero-copy h2 strong {
    display: block;
}

.business-hero-copy h2 strong {
    color: #E8006E;
}

.business-hero-copy h2::after {
    content: "";
    display: block;
    width: 220px;
    height: 5px;
    margin: 1.1rem 0 0;
    border-radius: 999px;
    background: linear-gradient(90deg, #0B4FD5 0 40%, #00A86B 40% 86%, #E8006E 86%);
}

.business-hero-copy p {
    max-width: 620px;
    margin-top: 1.35rem;
    color: #152B4D;
    font-size: clamp(1.15rem, 1.65vw, 1.65rem);
    font-weight: 700;
    line-height: 1.45;
}

.business-hero-copy p strong {
    color: #061B45;
    font-weight: 950;
}

.business-main-steps {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 1.35rem;
    margin-top: 0.5rem;
}

.business-main-steps article,
.business-benefit-grid,
.business-proof-strip {
    border: 1px solid rgba(0, 82, 180, 0.13);
    border-radius: 18px;
    background: rgba(255, 255, 255, 0.88);
    box-shadow: 0 20px 46px rgba(0, 48, 110, 0.14);
    backdrop-filter: blur(14px);
}

.business-main-steps article {
    position: relative;
    display: grid;
    grid-template-columns: 110px minmax(0, 1fr);
    gap: 1rem;
    align-items: center;
    min-height: 152px;
    padding: 1rem 1.25rem;
}

.business-main-steps article:not(:last-child)::after {
    content: "\ea6e";
    position: absolute;
    right: -1.95rem;
    top: 50%;
    color: #1599E2;
    font-family: remixicon;
    font-size: 2.3rem;
    transform: translateY(-50%);
    z-index: 2;
}

.business-main-steps i {
    display: inline-grid;
    place-items: center;
    width: 94px;
    height: 94px;
    border-radius: 50%;
    background: radial-gradient(circle, #76E000, #0B8F18);
    color: #FFFFFF;
    font-size: 3rem;
    box-shadow: inset 0 0 0 8px rgba(255,255,255,0.16);
}

.business-main-steps article:nth-child(2) i {
    background: radial-gradient(circle, #2E8CFF, #0646C4);
}

.business-main-steps article:nth-child(3) i {
    background: radial-gradient(circle, #8E3DDC, #3F147C);
}

.business-main-steps span {
    display: inline-grid;
    place-items: center;
    width: 36px;
    height: 36px;
    margin-right: 0.55rem;
    border-radius: 50%;
    background: #0B8F18;
    color: #FFFFFF;
    font-size: 1.1rem;
    font-weight: 950;
}

.business-main-steps article:nth-child(2) span {
    background: #0646C4;
}

.business-main-steps article:nth-child(3) span {
    background: #5C229D;
}

.business-main-steps h3 {
    display: inline;
    color: #0B8F18;
    font-family: var(--font-titulo);
    font-size: clamp(1.6rem, 2vw, 2.1rem);
    font-weight: 950;
    text-transform: uppercase;
}

.business-main-steps article:nth-child(2) h3 {
    color: #0646C4;
}

.business-main-steps article:nth-child(3) h3 {
    color: #5C229D;
}

.business-main-steps p {
    margin: 0.45rem 0 0;
    color: #152B4D;
    font-size: 1rem;
    font-weight: 750;
    line-height: 1.35;
}

.business-benefit-grid {
    display: grid;
    grid-template-columns: repeat(4, minmax(0, 1fr));
    gap: 0;
    margin-top: 1.25rem;
    padding: 1rem;
}

.business-benefit-grid article {
    display: grid;
    grid-template-columns: 82px minmax(0, 1fr);
    gap: 0.9rem;
    align-items: center;
    min-height: 120px;
    padding: 0.65rem 1rem;
    border-right: 1px solid rgba(0, 52, 120, 0.16);
}

.business-benefit-grid article:last-child {
    border-right: 0;
}

.business-benefit-grid i {
    display: inline-grid;
    place-items: center;
    width: 74px;
    height: 74px;
    border-radius: 50%;
    background: radial-gradient(circle, #43CC28, #0B8F18);
    color: #FFFFFF;
    font-size: 2.3rem;
}

.business-benefit-grid article:nth-child(2) i {
    background: radial-gradient(circle, #2E8CFF, #0646C4);
}

.business-benefit-grid article:nth-child(4) i {
    background: radial-gradient(circle, #FF2F91, #D00064);
}

.business-benefit-grid h3 {
    margin: 0;
    color: #0B8F18;
    font-family: var(--font-titulo);
    font-size: 1.16rem;
    font-weight: 950;
    line-height: 1.08;
    text-transform: uppercase;
}

.business-benefit-grid article:nth-child(2) h3,
.business-benefit-grid article:nth-child(3) h3 {
    color: #0646C4;
}

.business-benefit-grid article:nth-child(4) h3 {
    color: #E8006E;
}

.business-benefit-grid p {
    margin: 0.35rem 0 0;
    color: #152B4D;
    font-size: 0.86rem;
    font-weight: 750;
    line-height: 1.28;
}

.business-action-row {
    display: grid;
    grid-template-columns: minmax(280px, 0.9fr) minmax(280px, 0.9fr);
    gap: 2rem;
    width: min(1020px, 100%);
    margin: 1.1rem auto 0;
}

.business-action-row .web-btn {
    min-height: 72px;
    border-radius: 14px;
    font-size: 1.28rem;
    justify-content: center;
    text-transform: uppercase;
}

.business-action-row .web-btn i {
    display: inline-grid;
    place-items: center;
    width: 48px;
    height: 48px;
    border: 2px solid rgba(255,255,255,0.34);
    border-radius: 50%;
    font-size: 1.6rem;
}

.business-proof-strip {
    display: grid;
    grid-template-columns: 1.3fr 1fr 1.1fr;
    align-items: center;
    gap: 0;
    width: min(1320px, 100%);
    margin: 1.05rem auto 0;
    border-radius: 999px;
    padding: 0.6rem 1.2rem;
}

.business-proof-strip article {
    display: flex;
    align-items: center;
    gap: 0.85rem;
    min-height: 58px;
    padding: 0 1rem;
    border-right: 1px solid rgba(0, 52, 120, 0.13);
}

.business-proof-strip article:last-child {
    border-right: 0;
}

.business-proof-strip i {
    display: inline-grid;
    place-items: center;
    min-width: 44px;
    width: 44px;
    height: 44px;
    border-radius: 50%;
    background: #0B4FD5;
    color: #FFFFFF;
    font-size: 1.45rem;
}

.business-proof-strip strong {
    color: #FFC300;
    font-size: 1.45rem;
    letter-spacing: 0.08rem;
}

.business-proof-strip span {
    color: #152B4D;
    font-size: 0.9rem;
    font-weight: 850;
    line-height: 1.25;
}

.testimonials-real {
    display: grid;
    align-content: end;
    min-height: 790px;
}

.testimonials-copy {
    max-width: 640px;
    margin-bottom: 1.2rem;
}

.testimonials-label {
    display: inline-flex;
    align-items: center;
    margin-bottom: 1.55rem;
    filter: drop-shadow(0 14px 24px rgba(0, 48, 110, 0.14));
}

.testimonials-label span,
.testimonials-label strong {
    display: inline-flex;
    align-items: center;
    min-height: 48px;
    color: #FFFFFF;
    font-size: 1.02rem;
    font-weight: 950;
    text-transform: uppercase;
}

.testimonials-label span {
    border-radius: 999px 0 0 999px;
    background: linear-gradient(135deg, #0B4FD5, #0A7BE8);
    padding: 0 1.35rem;
}

.testimonials-label strong {
    border-radius: 0 999px 999px 0;
    background: linear-gradient(135deg, #049235, #42B52E);
    padding: 0 1.45rem;
}

.testimonials-copy h2 {
    margin: 0;
    color: #0A41C6;
    font-family: var(--font-titulo);
    font-size: clamp(2.6rem, 3.65vw, 5.05rem);
    font-weight: 950;
    line-height: 0.98;
    text-transform: uppercase;
}

.testimonials-copy h2 span,
.testimonials-copy h2 strong {
    display: block;
    white-space: nowrap;
}

.testimonials-copy h2 strong {
    color: #E8006E;
}

.testimonials-copy h2::after {
    content: "";
    display: block;
    width: 220px;
    height: 5px;
    margin: 1.05rem 0 0;
    border-radius: 999px;
    background: linear-gradient(90deg, #0B4FD5 0 40%, #00A86B 40% 86%, #E8006E 86%);
}

.testimonials-copy p {
    max-width: 560px;
    margin-top: 1.35rem;
    color: #152B4D;
    font-size: clamp(1.1rem, 1.55vw, 1.55rem);
    font-weight: 700;
    line-height: 1.45;
}

.testimonials-copy p strong {
    color: #0A41C6;
    font-weight: 950;
}

.testimonial-card-grid {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 1.35rem;
    margin-top: 1rem;
}

.testimonial-card {
    display: grid;
    grid-template-columns: minmax(145px, 0.85fr) minmax(0, 1fr);
    gap: 1.05rem;
    min-height: 230px;
    border: 1px solid rgba(0, 82, 180, 0.13);
    border-radius: 18px;
    background: rgba(255,255,255,0.92);
    padding: 1rem;
    box-shadow: 0 20px 46px rgba(0, 48, 110, 0.14);
}

.testimonial-media {
    position: relative;
    min-height: 198px;
    overflow: hidden;
    border-radius: 14px;
    background-position: center;
    background-size: cover;
}

.testimonial-media--one {
    background-image: url("../img/Fondo pagina web 6.jpeg");
    background-position: left center;
}

.testimonial-media--two {
    background-image: url("../img/Fondo pagina web 5.jpeg");
}

.testimonial-media--three {
    background-image: url("../img/Fondo pagina web 1.jpeg");
    background-position: 70% center;
}

.testimonial-media button {
    position: absolute;
    left: 50%;
    top: 50%;
    display: inline-grid;
    place-items: center;
    width: 62px;
    height: 62px;
    border: 3px solid rgba(255,255,255,0.88);
    border-radius: 50%;
    background: rgba(255,255,255,0.18);
    color: #FFFFFF;
    cursor: pointer;
    font-size: 2rem;
    transform: translate(-50%, -50%);
    backdrop-filter: blur(5px);
}

.testimonial-content {
    position: relative;
    display: grid;
    align-content: start;
    padding-top: 0.2rem;
}

.testimonial-content > i {
    color: #109D45;
    font-size: 2.6rem;
    line-height: 1;
}

.testimonial-card--blue .testimonial-content > i,
.testimonial-card--blue h3,
.testimonial-card--blue strong {
    color: #0B58D8;
}

.testimonial-card--pink .testimonial-content > i,
.testimonial-card--pink h3,
.testimonial-card--pink strong {
    color: #E8006E;
}

.testimonial-content h3 {
    margin: -0.2rem 0 0.7rem;
    color: #109D45;
    font-family: var(--font-texto);
    font-size: 1.05rem;
    font-weight: 950;
    line-height: 1.18;
}

.testimonial-content p {
    margin: 0;
    color: #1A2F4D;
    font-size: 0.95rem;
    font-weight: 750;
    line-height: 1.4;
}

.testimonial-content strong {
    margin-top: 0.8rem;
    color: #109D45;
    font-size: 0.92rem;
    font-weight: 950;
}

.testimonial-content span {
    color: #52657E;
    font-size: 0.84rem;
    font-weight: 750;
}

.testimonial-content b {
    justify-self: end;
    color: #FFC300;
    font-size: 1.25rem;
    letter-spacing: 0.08rem;
}

.testimonial-benefit-strip {
    display: grid;
    grid-template-columns: repeat(4, minmax(0, 1fr));
    gap: 0;
    margin-top: 1.25rem;
    border: 1px solid rgba(0, 82, 180, 0.13);
    border-radius: 18px;
    background: rgba(255,255,255,0.90);
    box-shadow: 0 20px 42px rgba(0, 48, 110, 0.12);
    overflow: hidden;
}

.testimonial-benefit-strip article {
    display: grid;
    grid-template-columns: 80px minmax(0, 1fr);
    gap: 0.9rem;
    align-items: center;
    min-height: 130px;
    padding: 1rem;
    border-right: 1px solid rgba(0, 52, 120, 0.14);
}

.testimonial-benefit-strip article:last-child {
    border-right: 0;
}

.testimonial-benefit-strip i {
    display: inline-grid;
    place-items: center;
    width: 72px;
    height: 72px;
    border-radius: 50%;
    background: radial-gradient(circle, #43CC28, #0B8F18);
    color: #FFFFFF;
    font-size: 2.3rem;
}

.testimonial-benefit-strip article:nth-child(2) i {
    background: radial-gradient(circle, #2E8CFF, #0646C4);
}

.testimonial-benefit-strip article:nth-child(3) i {
    background: radial-gradient(circle, #8E3DDC, #3F147C);
}

.testimonial-benefit-strip article:nth-child(4) i {
    background: radial-gradient(circle, #FF2F91, #D00064);
}

.testimonial-benefit-strip strong {
    display: block;
    color: #0B8F18;
    font-family: var(--font-titulo);
    font-size: 1.18rem;
    font-weight: 950;
    line-height: 1.08;
    text-transform: uppercase;
}

.testimonial-benefit-strip article:nth-child(2) strong {
    color: #0646C4;
}

.testimonial-benefit-strip article:nth-child(3) strong {
    color: #5C229D;
}

.testimonial-benefit-strip article:nth-child(4) strong {
    color: #E8006E;
}

.testimonial-benefit-strip span {
    display: block;
    margin-top: 0.35rem;
    color: #152B4D;
    font-size: 0.86rem;
    font-weight: 750;
    line-height: 1.28;
}

.testimonial-action-row {
    display: grid;
    grid-template-columns: minmax(280px, 0.9fr) minmax(280px, 0.9fr);
    gap: 2rem;
    width: min(1040px, 100%);
    margin: 1.1rem auto 0;
}

.testimonial-action-row .web-btn {
    min-height: 76px;
    border-radius: 14px;
    font-size: 1.25rem;
    justify-content: center;
    text-transform: uppercase;
}

.testimonial-action-row .web-btn i {
    display: inline-grid;
    place-items: center;
    width: 50px;
    height: 50px;
    border: 2px solid rgba(255,255,255,0.34);
    border-radius: 50%;
    font-size: 1.7rem;
}

.faq-redesign {
    display: grid;
    align-content: end;
    min-height: 790px;
}

.faq-heading {
    max-width: 820px;
    margin: 0 auto 2rem;
    text-align: center;
}

.faq-heading h2 {
    margin: 0;
    color: #0A41C6;
    font-family: var(--font-titulo);
    font-size: clamp(3.3rem, 4.7vw, 6.1rem);
    font-weight: 950;
    line-height: 0.92;
    text-transform: uppercase;
}

.faq-heading h2 span,
.faq-heading h2 strong {
    display: block;
}

.faq-heading h2 em {
    color: #E8006E;
    font-style: normal;
}

.faq-heading h2 strong {
    color: #078854;
}

.faq-heading h2::after {
    content: "";
    display: block;
    width: 340px;
    height: 5px;
    margin: 1rem auto 0;
    border-radius: 999px;
    background: linear-gradient(90deg, #E8006E 0 18%, #0B4FD5 18% 50%, #00A86B 50% 94%, #078854 94%);
}

.faq-heading p {
    max-width: 720px;
    margin: 1rem auto 0;
    color: #152B4D;
    font-size: clamp(1.05rem, 1.35vw, 1.35rem);
    font-weight: 800;
    line-height: 1.35;
}

.faq-columns {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 3rem;
}

.faq-group h3 {
    display: flex;
    align-items: center;
    gap: 0.85rem;
    margin: 0 0 0.9rem;
    color: #0A41C6;
    font-family: var(--font-titulo);
    font-size: clamp(1.35rem, 1.7vw, 2rem);
    font-weight: 950;
    text-transform: uppercase;
}

.faq-group h3 > i {
    display: inline-grid;
    place-items: center;
    width: 58px;
    height: 58px;
    border-radius: 50%;
    background: linear-gradient(135deg, #0B4FD5, #0AA7DD);
    color: #FFFFFF;
    font-size: 1.8rem;
}

.faq-group h3 strong {
    color: #078854;
}

.faq-group article {
    margin-bottom: 0.62rem;
}

.faq-question {
    display: grid;
    grid-template-columns: 56px minmax(0, 1fr) 34px;
    gap: 0.8rem;
    align-items: center;
    width: 100%;
    min-height: 66px;
    border: 1px solid rgba(0, 82, 180, 0.10);
    border-radius: 12px;
    background: rgba(255,255,255,0.92);
    padding: 0.55rem 0.9rem;
    box-shadow: 0 14px 30px rgba(0, 48, 110, 0.10);
    cursor: pointer;
    font-family: inherit;
    text-align: left;
}

.faq-question i {
    display: inline-grid;
    place-items: center;
    width: 46px;
    height: 46px;
    border-radius: 50%;
    background: rgba(10, 79, 213, 0.10);
    color: #0B4FD5;
    font-size: 1.45rem;
}

.faq-group article:nth-of-type(2) .faq-question i,
.faq-group article:nth-of-type(4) .faq-question i {
    background: rgba(0, 168, 107, 0.10);
    color: #078854;
}

.faq-group article:nth-of-type(3) .faq-question i {
    background: rgba(232, 0, 110, 0.10);
    color: #E8006E;
}

.faq-question span {
    color: #0A2A69;
    font-size: 1rem;
    font-weight: 950;
    line-height: 1.2;
}

.faq-question b {
    color: #0B58D8;
    font-size: 2rem;
    font-weight: 500;
    line-height: 1;
    transition: transform .2s ease;
}

.faq-item.is-open .faq-question {
    border-color: rgba(0, 168, 107, 0.24);
    border-radius: 12px 12px 0 0;
    background: #FFFFFF;
}

.faq-item.is-open .faq-question b {
    transform: rotate(45deg);
}

.faq-answer {
    display: none;
    padding: 1rem 1.15rem 1.1rem;
    border: 1px solid rgba(0, 82, 180, 0.10);
    border-top: 0;
    border-radius: 0 0 12px 12px;
    background: rgba(255,255,255,0.96);
    box-shadow: 0 16px 30px rgba(0, 48, 110, 0.08);
}

.faq-item.is-open .faq-answer {
    display: block;
}

.faq-answer p {
    margin: 0 0 .65rem;
    color: #1A2F4D;
    font-size: .94rem;
    font-weight: 650;
    line-height: 1.45;
}

.faq-answer p:last-of-type {
    margin-bottom: .8rem;
}

.faq-answer strong {
    display: block;
    color: #078854;
    font-size: .95rem;
    font-weight: 900;
    line-height: 1.35;
}

.faq-support-panel {
    display: grid;
    grid-template-columns: 330px minmax(260px, 0.9fr) minmax(250px, 0.75fr) minmax(250px, 0.75fr);
    align-items: center;
    gap: 1.3rem;
    margin-top: 1.35rem;
    border: 1px solid rgba(0, 82, 180, 0.13);
    border-radius: 22px;
    background: rgba(255,255,255,0.90);
    box-shadow: 0 22px 50px rgba(0, 48, 110, 0.14);
    overflow: hidden;
    padding: 0 1.3rem 0 0;
}

.faq-advisor-photo {
    min-height: 228px;
    background-image: url("../img/Fondo pagina web 6.jpeg");
    background-position: 82% center;
    background-size: cover;
}

.faq-support-copy h3 {
    margin: 0;
    color: #0A2A69;
    font-family: var(--font-titulo);
    font-size: clamp(1.8rem, 2.4vw, 3rem);
    font-weight: 950;
    line-height: 0.96;
    text-transform: uppercase;
}

.faq-support-copy h3::after {
    content: "";
    display: block;
    width: 145px;
    height: 4px;
    margin: 0.9rem 0;
    border-radius: 999px;
    background: linear-gradient(90deg, #0B4FD5 0 54%, #00A86B 54% 88%, #E8006E 88%);
}

.faq-support-copy p {
    margin: 0;
    color: #152B4D;
    font-size: 1.04rem;
    font-weight: 750;
    line-height: 1.45;
}

.faq-support-button {
    display: grid;
    grid-template-columns: 70px minmax(0, 1fr);
    gap: 0.8rem;
    align-items: center;
    min-height: 150px;
    border-radius: 16px;
    color: #FFFFFF;
    padding: 1.1rem;
    text-decoration: none;
    box-shadow: 0 18px 34px rgba(0, 48, 110, 0.16);
}

.faq-support-button i {
    grid-row: span 2;
    font-size: 4rem;
}

.faq-support-button span,
.faq-support-button small {
    display: block;
}

.faq-support-button span {
    font-size: 1.28rem;
    font-weight: 950;
    line-height: 1.08;
    text-transform: uppercase;
}

.faq-support-button small {
    color: rgba(255,255,255,0.88);
    font-size: 0.86rem;
    font-weight: 750;
}

.faq-support-button--whatsapp {
    background: linear-gradient(135deg, #13A538, #078A25);
}

.faq-support-button--advisor {
    background: linear-gradient(135deg, #0B75F0, #063FC4);
}

.final-redesign {
    display: grid;
    align-content: end;
    min-height: 700px;
}

.final-content {
    width: min(760px, 52%);
    margin-left: auto;
}

.final-content h2 {
    margin: 0;
    color: #0A2A69;
    font-family: var(--font-titulo);
    font-size: clamp(3rem, 4.7vw, 6rem);
    font-weight: 950;
    line-height: 0.92;
    text-transform: uppercase;
}

.final-content h2 span,
.final-content h2 strong {
    display: block;
}

.final-content h2 strong {
    display: inline-block;
    background: linear-gradient(100deg, #078854 0%, #0AA7DD 48%, #243CDE 100%);
    -webkit-background-clip: text;
    background-clip: text;
    color: transparent;
}

.final-content h2 em {
    display: inline-block;
    margin-left: 0.45rem;
    color: #E8006E;
    font-family: "Poppins", var(--font-titulo);
    font-size: 0.82em;
    font-style: italic;
    font-weight: 950;
    text-transform: none;
    transform: rotate(-3deg);
}

.final-content h2::after {
    content: "";
    display: block;
    width: 170px;
    height: 5px;
    margin: 0.9rem 0 0;
    border-radius: 999px;
    background: linear-gradient(90deg, #0B4FD5 0 50%, #00A86B 50% 90%, #E8006E 90%);
}

.final-content p {
    max-width: 760px;
    margin: 1rem 0 1.5rem;
    color: #152B4D;
    font-size: clamp(1.1rem, 1.55vw, 1.55rem);
    font-weight: 750;
    line-height: 1.35;
}

.final-content p strong {
    color: #0A41C6;
    font-weight: 950;
}

.final-actions {
    display: grid;
    gap: 1rem;
}

.final-action {
    position: relative;
    display: grid;
    grid-template-columns: 78px minmax(0, 1fr) 58px;
    grid-template-rows: auto auto;
    align-items: center;
    column-gap: 1rem;
    min-height: 104px;
    border-radius: 18px;
    color: #FFFFFF;
    padding: 1rem 1.1rem;
    text-decoration: none;
    box-shadow: 0 18px 34px rgba(0, 48, 110, 0.18);
}

.final-action > i {
    grid-row: 1 / 3;
    display: inline-grid;
    place-items: center;
    width: 70px;
    height: 70px;
    border-radius: 50%;
    background: rgba(255,255,255,0.94);
    color: #078854;
    font-size: 2.35rem;
}

.final-action span {
    align-self: end;
    font-size: clamp(1.28rem, 1.8vw, 1.9rem);
    font-weight: 950;
    line-height: 1.05;
    text-transform: uppercase;
}

.final-action small {
    align-self: start;
    color: rgba(255,255,255,0.88);
    font-size: 1rem;
    font-weight: 750;
}

.final-action b {
    grid-column: 3;
    grid-row: 1 / 3;
    display: inline-grid;
    place-items: center;
    width: 54px;
    height: 54px;
    border: 2px solid rgba(255,255,255,0.62);
    border-radius: 50%;
    font-size: 1.7rem;
    font-weight: 500;
}

.final-action--green {
    background: linear-gradient(135deg, #1FB01E, #007E31);
}

.final-action--pink {
    background: linear-gradient(135deg, #FF147C, #D00064);
}

.final-action--blue {
    background: linear-gradient(135deg, #0B75F0, #063FC4);
}

.final-action--pink > i {
    color: #E8006E;
}

.final-action--blue > i {
    color: #078854;
}

.final-benefit-strip {
    display: grid;
    grid-template-columns: repeat(4, minmax(0, 1fr));
    gap: 0;
    width: min(980px, 66%);
    margin: 2.3rem 0 0 auto;
    border-radius: 18px;
    background: rgba(255,255,255,0.80);
    box-shadow: 0 18px 38px rgba(0, 48, 110, 0.11);
    overflow: hidden;
}

.final-benefit-strip article {
    display: grid;
    grid-template-columns: 62px minmax(0, 1fr);
    gap: 0.75rem;
    align-items: center;
    min-height: 104px;
    padding: 0.85rem 0.95rem;
    border-right: 1px solid rgba(0, 52, 120, 0.13);
}

.final-benefit-strip article:last-child {
    border-right: 0;
}

.final-benefit-strip i {
    display: inline-grid;
    place-items: center;
    width: 58px;
    height: 58px;
    border-radius: 50%;
    background: radial-gradient(circle, #43CC28, #0B8F18);
    color: #FFFFFF;
    font-size: 1.85rem;
}

.final-benefit-strip article:nth-child(2) i {
    background: radial-gradient(circle, #2E8CFF, #0646C4);
}

.final-benefit-strip article:nth-child(3) i {
    background: radial-gradient(circle, #8E3DDC, #3F147C);
}

.final-benefit-strip article:nth-child(4) i {
    background: radial-gradient(circle, #FF2F91, #D00064);
}

.final-benefit-strip strong {
    display: block;
    color: #078854;
    font-family: var(--font-titulo);
    font-size: 0.95rem;
    font-weight: 950;
    line-height: 1.08;
    text-transform: uppercase;
}

.final-benefit-strip article:nth-child(2) strong {
    color: #0646C4;
}

.final-benefit-strip article:nth-child(3) strong {
    color: #5C229D;
}

.final-benefit-strip article:nth-child(4) strong {
    color: #E8006E;
}

.final-benefit-strip span {
    display: block;
    margin-top: 0.25rem;
    color: #152B4D;
    font-size: 0.78rem;
    font-weight: 750;
    line-height: 1.25;
}

@media screen and (width < 1500px) {
    .products-header-row {
        grid-template-columns: minmax(0, 1fr) minmax(250px, 0.45fr);
    }

    .products-header-row .products-heading {
        grid-column: 1;
        justify-self: center;
        margin-left: 250px;
    }

    .products-top-note {
        grid-column: 2;
    }
}

.web-product-grid article {
    display: grid;
    align-content: start;
    min-height: 330px;
    padding: 1rem;
}

.web-product-grid img {
    width: 100%;
    height: 145px;
    object-fit: contain;
    margin-bottom: 0.8rem;
}

.web-center-actions {
    justify-content: center;
}

.web-steps {
    display: grid;
    gap: 1rem;
}

.web-steps article {
    display: grid;
    grid-template-columns: auto minmax(0, 1fr);
    gap: 0.25rem 0.9rem;
    padding: 1.1rem;
}

.web-steps span {
    grid-row: span 2;
    display: inline-grid;
    place-items: center;
    width: 46px;
    height: 46px;
    border-radius: 50%;
    background: #E8006E;
    color: #FFFFFF;
    font-weight: 950;
}

.web-steps p {
    margin: 0;
}

.web-testimonial-grid {
    grid-template-columns: repeat(3, minmax(0, 1fr));
}

.web-testimonial-grid article {
    padding: 1.25rem;
}

.web-avatar {
    display: inline-grid;
    place-items: center;
    width: 52px;
    height: 52px;
    border-radius: 50%;
    background: linear-gradient(135deg, #00A86B, #098CEB);
    color: #FFFFFF;
    font-weight: 950;
}

.web-faq-list {
    display: grid;
    gap: 0.8rem;
}

.web-faq-list article {
    padding: 1rem 1.15rem;
}

.web-faq-list h3 {
    font-size: 1.08rem;
}

.web-support-box {
    display: flex;
    gap: 0.9rem;
    align-items: center;
    margin-top: 1.4rem;
    padding: 1rem;
}

.web-support-box i {
    color: #00A86B;
    font-size: 2rem;
}

.web-support-box strong,
.web-support-box span {
    display: block;
}

.web-support-box strong {
    color: #003B8F;
}

.web-support-box span {
    color: #52657E;
    font-size: 0.92rem;
}

.web-final__panel {
    display: grid;
    grid-template-columns: minmax(0, 1fr) minmax(320px, 0.7fr);
    gap: 1.5rem;
    align-items: center;
    padding: clamp(1.3rem, 3vw, 2.4rem);
}

.web-final-actions {
    display: grid;
    margin: 0;
}

@media screen and (width < 1120px) {
    .web-hero__grid,
    .web-two-col,
    .web-gencell-layout,
    .web-final__panel {
        grid-template-columns: 1fr;
    }

    .web-product-stage {
        min-height: 450px;
        order: -1;
    }

    .web-hero {
        min-height: auto;
        padding-top: 7rem;
    }

    .web-hero__grid {
        min-height: 0;
    }

    .web-hero .web-product-stage {
        min-height: 500px;
        margin-right: 0;
        order: 0;
    }

    .web-hero .web-product-stage__main {
        right: 24%;
        width: min(620px, 66%);
    }

    .web-hero .web-product-stage__second {
        right: -2%;
        width: min(520px, 54%);
    }

    .web-hero .web-feature-strip {
        max-width: none;
        margin-left: auto;
        margin-right: auto;
        margin-top: 1.5rem;
    }

    .web-trust-strip {
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }

    .web-gencell {
        min-height: auto;
        padding-top: 4rem;
    }

    .web-gencell-copy {
        max-width: none;
    }

    .gencell-center-stage {
        min-height: 460px;
    }

    .gencell-center-stage img {
        width: min(480px, 86%);
    }

    .gencell-generation-badge {
        right: 18%;
    }

    .gencell-tech-list {
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }

    .gencell-seeker-bar,
    .gencell-cta-bar,
    .gencell-quality-strip {
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }

    .gencell-seeker-bar h3,
    .gencell-cta-bar > div,
    .gencell-quality-strip article:last-child {
        grid-column: 1 / -1;
    }

    .web-community-proof {
        grid-column: 1 / -1;
    }

    .web-feature-strip,
    .gencell-benefit-cards,
    .results-card-grid,
    .products-trust-strip,
    .web-product-grid {
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }

    .products-header-row {
        grid-template-columns: 1fr;
    }

    .products-header-row .products-heading {
        grid-column: auto;
        margin-left: 0;
    }

    .products-top-note {
        grid-column: auto;
        justify-self: center;
        width: min(520px, 100%);
        margin-bottom: 0.5rem;
    }

    .products-count-strip,
    .products-action-row,
    .business-main-steps,
    .business-benefit-grid,
    .business-proof-strip,
    .testimonial-card-grid,
    .testimonial-benefit-strip,
    .testimonial-action-row,
    .faq-columns,
    .faq-support-panel,
    .final-benefit-strip {
        grid-template-columns: 1fr;
    }

    .web-business {
        min-height: auto;
        padding-top: 4rem;
    }

    .business-opportunity {
        min-height: auto;
    }

    .business-hero-copy {
        max-width: 720px;
    }

    .business-main-steps article:not(:last-child)::after {
        display: none;
    }

    .business-benefit-grid article,
    .business-proof-strip article {
        border-right: 0;
        border-bottom: 1px solid rgba(0, 52, 120, 0.13);
    }

    .business-benefit-grid article:last-child,
    .business-proof-strip article:last-child {
        border-bottom: 0;
    }

    .business-proof-strip {
        border-radius: 18px;
    }

    .web-testimonials {
        min-height: auto;
        padding-top: 4rem;
    }

    .testimonials-real {
        min-height: auto;
    }

    .web-faq {
        min-height: auto;
        padding-top: 4rem;
    }

    .faq-redesign {
        min-height: auto;
    }

    .faq-columns {
        gap: 1.2rem;
    }

    .faq-support-panel {
        padding: 0;
    }

    .faq-support-copy,
    .faq-support-button {
        margin-inline: 1rem;
    }

    .faq-support-button:last-child {
        margin-bottom: 1rem;
    }

    .web-final {
        min-height: auto;
        padding-top: 4rem;
    }

    .web-final::before {
        background: linear-gradient(180deg, rgba(255,255,255,0.72) 0%, rgba(255,255,255,0.96) 42%, rgba(255,255,255,0.98) 100%);
    }

    .final-redesign {
        min-height: auto;
    }

    .final-content,
    .final-benefit-strip {
        width: 100%;
        margin-left: 0;
    }

    .final-benefit-strip article {
        border-right: 0;
        border-bottom: 1px solid rgba(0, 52, 120, 0.13);
    }

    .final-benefit-strip article:last-child {
        border-bottom: 0;
    }

    .testimonials-copy {
        max-width: 720px;
    }

    .testimonial-benefit-strip article {
        border-right: 0;
        border-bottom: 1px solid rgba(0, 52, 120, 0.13);
    }

    .testimonial-benefit-strip article:last-child {
        border-bottom: 0;
    }

    .products-count-strip > div {
        display: none;
    }

    .products-count-strip article {
        border-left: 0;
    }
}

@media screen and (width < 760px) {
    .web-section {
        min-height: auto;
        padding: 6.5rem 0 3rem;
    }

    .web-section::before {
        background: linear-gradient(180deg, rgba(255,255,255,0.98) 0%, rgba(255,255,255,0.88) 58%, rgba(255,255,255,0.52) 100%);
    }

    .web-copy h1 {
        font-size: clamp(3rem, 15vw, 4.2rem);
    }

    .web-copy h2,
    .web-heading h2,
    .web-final h2 {
        font-size: clamp(2.15rem, 11vw, 3.3rem);
    }

    .web-actions,
    .web-center-actions {
        display: grid;
    }

    .web-btn {
        width: 100%;
    }

    .web-product-stage {
        min-height: 360px;
    }

    .web-hero .web-product-stage {
        min-height: 390px;
    }

    .web-product-stage__main {
        right: 3%;
        width: 76%;
    }

    .web-product-stage__second {
        right: 24%;
        width: 60%;
    }

    .web-product-stage__badge {
        right: auto;
        left: 0;
        top: 4%;
    }

    .web-feature-strip,
    .web-mini-grid,
    .gencell-benefit-cards,
    .gencell-tech-list,
    .gencell-seeker-bar,
    .gencell-cta-bar,
    .gencell-quality-strip,
    .results-card-grid,
    .products-trust-strip,
    .web-product-grid,
    .web-testimonial-grid {
        grid-template-columns: 1fr;
    }

    .web-gencell-copy h2 {
        font-size: clamp(2.35rem, 11vw, 3.4rem);
    }

    .web-gencell-copy h2 > span,
    .web-gencell-copy h2 strong {
        display: inline;
    }

    .web-gencell-copy h2::after {
        margin-left: 0;
    }

    .gencell-center-stage {
        min-height: 390px;
    }

    .gencell-center-stage img {
        width: min(390px, 88%);
    }

    .gencell-generation-badge {
        right: 0;
        bottom: 18%;
        width: 122px;
        height: 122px;
    }

    .gencell-generation-badge strong {
        max-width: 88px;
        font-size: 0.72rem;
    }

    .gencell-benefit-cards article {
        min-height: auto;
    }

    .gencell-tech-list article,
    .gencell-seeker-bar article,
    .gencell-quality-strip article {
        border-left: 0;
        border-right: 0;
        border-bottom: 1px solid rgba(0, 52, 120, 0.12);
    }

    .products-heading h2 {
        font-size: clamp(2.35rem, 12vw, 3.5rem);
    }

    .products-heading h2::after {
        width: 190px;
    }

    .products-header-row {
        gap: 0.65rem;
    }

    .products-top-note {
        grid-template-columns: 54px minmax(0, 1fr);
    }

    .products-top-note i {
        width: 52px;
        height: 52px;
        font-size: 1.6rem;
    }

    .products-count-strip article {
        grid-template-columns: 52px 1fr;
    }

    .products-count-strip strong {
        grid-column: 2;
        font-size: 2.4rem;
    }

    .products-action-row .web-btn {
        min-height: 64px;
        font-size: 1rem;
    }

    .business-label {
        transform-origin: left center;
        transform: scale(0.86);
    }

    .business-hero-copy h2 {
        font-size: clamp(2.55rem, 12vw, 4.1rem);
    }

    .business-main-steps article,
    .business-benefit-grid article {
        grid-template-columns: 72px minmax(0, 1fr);
    }

    .business-main-steps i,
    .business-benefit-grid i {
        width: 64px;
        height: 64px;
        font-size: 2rem;
    }

    .business-action-row {
        grid-template-columns: 1fr;
        gap: 0.85rem;
    }

    .business-action-row .web-btn {
        min-height: 64px;
        font-size: 1rem;
    }

    .testimonials-label {
        transform-origin: left center;
        transform: scale(0.9);
    }

    .testimonials-copy h2 {
        font-size: clamp(2.55rem, 12vw, 4.1rem);
    }

    .testimonials-copy h2 span,
    .testimonials-copy h2 strong {
        white-space: normal;
    }

    .testimonial-card {
        grid-template-columns: 1fr;
    }

    .testimonial-media {
        min-height: 230px;
    }

    .testimonial-benefit-strip article {
        grid-template-columns: 72px minmax(0, 1fr);
    }

    .testimonial-benefit-strip i {
        width: 64px;
        height: 64px;
        font-size: 2rem;
    }

    .testimonial-action-row {
        gap: 0.85rem;
    }

    .testimonial-action-row .web-btn {
        min-height: 64px;
        font-size: 1rem;
    }

    .faq-heading h2 {
        font-size: clamp(2.55rem, 12vw, 4.1rem);
    }

    .faq-heading h2::after {
        width: 220px;
    }

    .faq-group h3 {
        font-size: 1.18rem;
    }

    .faq-group article {
        grid-template-columns: 48px minmax(0, 1fr) 28px;
        padding-inline: 0.65rem;
    }

    .faq-group article i {
        width: 40px;
        height: 40px;
        font-size: 1.25rem;
    }

    .faq-group article span {
        font-size: 0.9rem;
    }

    .faq-advisor-photo {
        min-height: 190px;
    }

    .faq-support-button {
        min-height: 112px;
        grid-template-columns: 58px minmax(0, 1fr);
    }

    .faq-support-button i {
        font-size: 3rem;
    }

    .faq-support-button span {
        font-size: 1rem;
    }

    .final-content h2 {
        font-size: clamp(2.45rem, 11vw, 3.85rem);
    }

    .final-action {
        grid-template-columns: 58px minmax(0, 1fr) 42px;
        min-height: 88px;
        column-gap: 0.75rem;
    }

    .final-action > i {
        width: 54px;
        height: 54px;
        font-size: 1.8rem;
    }

    .final-action span {
        font-size: 1rem;
    }

    .final-action small {
        font-size: 0.82rem;
    }

    .final-action b {
        width: 40px;
        height: 40px;
        font-size: 1.25rem;
    }

    .final-benefit-strip {
        margin-top: 1.2rem;
    }

    .products-rating {
        grid-template-columns: 1fr;
        justify-items: center;
        text-align: center;
    }

    .products-trust-strip article {
        border-right: 0;
        border-bottom: 1px solid rgba(0, 52, 120, 0.12);
    }

    .products-trust-strip article:last-child {
        border-bottom: 0;
    }

    .web-hero .web-feature-strip {
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }

    .web-hero .web-feature-strip article {
        min-height: 150px;
        border-right: 0;
        border-bottom: 1px solid rgba(0, 51, 110, 0.12);
    }

    .web-trust-strip {
        grid-template-columns: 1fr;
    }

    .web-trust-strip article {
        border-right: 0;
        border-bottom: 1px solid rgba(0, 51, 110, 0.12);
    }

    .web-trust-strip article:last-child {
        border-bottom: 0;
    }

    .web-showcase-card {
        grid-template-columns: 1fr;
        text-align: center;
    }

    .web-showcase-card img {
        max-height: 320px;
    }
}
html{
    scroll-behavior: smooth;
}
:root{
    --color-azul: #0047ab;
    --color-blanco: #ffffff;
    --color-rosa: #db0482;
    --color-titulo: #E6F0FF;
    --color-titulo-alterno: #838689;
    --color-texto: #A0AEC0;
    --color-texto-alterno: #53ac59;
    --color-fondo-card: #ebf2f2;
    --color-fondo-secciones: rgb(13, 13, 41);
    --color-energia: rgb(4, 187, 204);
    --color-bienestar: rgb(61, 121, 217);
    --color-detalles: linear-gradient(90deg, rgb(4, 187, 204), rgb(61, 121, 217), rgb(124, 42, 232));;
    --header-height: 5rem;
    --normal-font-size: .938rem;
    --font-regular: 400;
    --font-bold: 600;
    --z-tooltip: 10;
    --z-fixed: 100;
    --font-titulo: "Poppins", sans-serif;
    --font-texto: "Inter", sans-serif;
}
@media screen and (width >= 1024px){
    :root{
        --normal-font-size: 1rem;
    }
}
body::-webkit-scrollbar {
    width: 3px;
    height: 3px;
}
body::-webkit-scrollbar-track {
    background: var(--color-fondo-principal);
    height: 1px;
}  
body::-webkit-scrollbar-thumb {
    background-color: var(--color-verde-secundario);
    border-radius: 20px;
    border: 1px solid var(--color-verde-secundario);
}
a{
    text-decoration: none;
    font-family: var(--font-texto);
    color: var(--color-blanco);
}
ul{
    list-style-type: none;
    font-family: var(--font-texto);
}
li{
    color: var(--color-texto-secundario);
}
h1{
    font-family: var(--font-titulo);
    font-weight: 400;
    font-size: clamp(1rem, 1rem + 2vw, 2rem);
}
h3{
    font-family: var(--font-titulo);
    font-weight: 400;
    font-size: clamp(1rem, 1rem + 2vw, 2rem);
}
p{
    font-family: var(--font-texto);
    color: var(--color-texto-secundario);
    font-size: clamp(.8rem, .8rem + 2vw, 1.5rem);
}

.desktop{
    display: none;
}
.container{
    max-width: 1128px;
    margin-inline: 1.5rem;
}
.header{
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    background: var(--color-detalles);
    /* background: linear-gradient(90deg, rgb(4, 187, 204), rgb(61, 121, 217), rgb(124, 42, 232)); */
    z-index: var(--z-fixed);
    transition: 1s;
}
.nav{
    height: var(--header-height);
}
.nav_data{
    height: 100%;
    display: flex;
    justify-content: space-between;
    align-items: center;
}
.nav_logo{
    width: 150px;
    display: inline-flex;
    align-items: center;
    column-gap: .25rem;
}
.nav_logo img{
    width: 100%;
}
.nav_toggle{
    position: relative;
    width: 32px;
    height: 32px;
}
.nav_burger,
.nav_close{
    color: var(--color-blanco);
    position: absolute;
    width: max-content;
    height: max-content;
    inset: 0;
    margin: auto;
    font-size: 1.25rem;
    cursor: pointer;
    transition: opacity .1s, transform .4s;
}
.nav_close{
    opacity: 0;
}
@media screen and (width <= 1118px){
    .nav_menu{
        position: absolute;
        left: 0;
        top: 2.5rem;
        width: 100%;
        background-color: var(--color-pantone-azul);
        backdrop-filter: blur(30px);
        height: calc(65vh - 3.5rem);
        overflow: auto;
        pointer-events: none;
        opacity: 0;
        transition: top .4s, opacity .3s;
    }
    .nav_menu::-webkit-scrollbar{
        width: 0;
    }
    .nav_list{
        /* background-color: var(--color-principal); */
        box-shadow: 0 2px 16px var(--color-verde-secundario);
        /* padding-top: 1rem; */
    }
    .inicio{
        margin-top: 5rem;
    }
}
.nav_link{
    color: var(--color-blanco);
    padding: 1.25rem 1.5rem;
    display: flex;
    justify-content: space-between;
    align-items: center;
    transition: background-color .3s;
    font-size: 1rem;
}
.nav_link:hover{
    color: var(--color-fondo-principal);
    background-color: var(--color-pantone-verde);
}
.show-menu{
    opacity: 1;
    top: 5rem;
    pointer-events: initial;
}
.show-icon .nav_burger{
    opacity: 0;
    transform: rotate(90deg);
}
.show-icon .nav_close{
    opacity: 1;
    transform: rotate(90deg);
}
@media screen and (width <= 340px){
    .container{
        margin-inline: 1rem;
    }
    .nav_link{
        padding: 1rem;
    }
}

.header_desktop{
    width: 100%;
    padding: 1.2rem 1.5rem;
    position: fixed;
    z-index: var(--z-fixed);
    transition: 1s;
    /* background: transparent; */
    background: linear-gradient(90deg, rgb(4, 187, 204), rgb(61, 121, 217), rgb(124, 42, 232));
}
.container_desktop{
    margin-inline: auto;
}
.nav_desktop{
    display: flex;
    justify-content: space-around;
    align-items: center;
}

.nav_list_desktop{
    height: 100%;
    display: flex;
    column-gap: 2rem;
}
.nav_data_desktop{
    width: 100px;
}
.nav_logo_desktop{
    width: 100%;
}
.nav_logo_desktop img{
    width: 100%;
}
.nav_link_desktop{
    color: var(--color-blanco);
    padding: .5rem;
    font-size: 1.2rem;
}
.nav_link_desktop:hover{
    border-bottom: 2px solid var(--color-pantone-verde);
}
.nav_contacto a{
    background-color: var(--color-pantone-verde);
    padding: 1rem;
    border-radius: 20px;
    color: var(--color-pantone-azul);
    transition: 1s;
    position: relative;
    overflow: hidden;
    z-index: 1;
    display: flex;
    align-items: center;
    justify-content: space-between;
    width: 130px;
}
.nav_contacto a::before{
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    width: 0;
    height: 100%;
    z-index: -1;
    background: var(--color-pantone-azul);
    transition: 1s;
}
.nav_contacto a:hover{
    background-color: var(--color-pantone-azul);
    color: var(--color-pantone-verde);
}
.nav_contacto a:hover::before{
    width: 100%;
}
.btn-login{
    background-color: var(--color-rosa);
    border: none;
    color: var(--color-blanco);
    padding: .5rem 1rem;
    border-radius: 20px;
}
@media screen and (width >= 1118px){
    .movil{
        display: none;
    }
    .desktop{
        display: block;
    }
    /* .slogan-inicio{
        left: 50%;
    } */
}

.inicio{
    /* background: radial-gradient(circle at center, #2e2e2e 0%, #161616 30%, #080808 65%, #000000 100%);
    box-shadow: inset 0 0 80px rgba(255,255,255,0.03); */
    width: 100%;
    height: 100vh;
    padding: 0;
    margin: 0;
    overflow: hidden;
}
.video-inicio{
    position: relative;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    z-index: -1;
}
.video-inicio video{
    width: 100%;
    height: 100%;
    object-fit: cover;
}
.titulo{
    display: flex;
    flex-direction: column;
    width: 100%;
    max-width: 1000px;
    height: 80vh;
    margin: auto;
    align-items: center;
    justify-content: center;
    padding: 5rem 0;
    position: absolute;
    z-index: 1;
    top: 60%;
    transform: translateY(-50%);
}
.titulo h3{
    color: var(--color-blanco);
    font-size: clamp(.2rem, .2rem + 2vw, 1.25rem);
    align-items: center;
    justify-content: center;
    display: flex;
    gap: 10px;
    background-color: #db048154;
    border: 2px solid #db0482;
    border-radius: 20px;
    padding: .5rem 1rem;
}
.titulo i{
    font-size: .5rem;
}
.titulo h1{
    font-size: clamp(2rem, 2rem + 2vw, 15rem);
    text-align: center;
    max-width: 700px;
    margin: 3rem 0;
    color: var(--color-blanco);
}
.titulo h1 span{
    color: var(--color-rosa);
}
.titulo p{
    color: var(--color-texto);
    text-align: center;
}
.btn-inicio{
    display: flex;
    flex-wrap: wrap;
    gap: 16px;
    margin-bottom: 28px;
    margin-top: 3rem;
    width: 100%;
    max-width: 800px;
    align-items: center;
    justify-content: center;
}
.btn-productos,
.btn-distribuidor{
    display: inline-flex;
    align-items: center;
    justify-content: center;
    padding: 15px 18px;
    border-radius: 999px;
    font-weight: 600;
    transition: 0.3s ease;
    width: 100%;
    max-width: 300px;
    font-size: clamp(.5rem, .5rem + 2vw, 1.2rem);
}
.btn-productos{
    background-color: var(--color-rosa);
    color: var(--color-blanco);
    box-shadow: 0 15px 40px #db048150;
}
.btn-productos:hover{
    background-color: #db048154;
    transform: translateY(-3px);
}
.btn-distribuidor{
    border: 1px solid var(--color-blanco);
    color: var(--color-blanco);
    background-color: transparent;
}
.btn-distribuidor:hover{
    border-color: var(--color-blanco);
    transform: translateY(-3px);
}

.contadores{
    background: var(--color-detalles);
    padding: 3em 2em;
    color: white;
    text-align: center;
}
.contadores > div{
    max-width: 1100px;
    margin: 0 auto;
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 4em 2em;
}
.contador{
    position: relative;
}
.contador i{
    font-size: clamp(2.5rem, 2.5rem + 2vw, 3rem);;
}
.contador h1{
    font-size: 3em;
    font-weight: 400;
}
.contador h3{
    font-size: clamp(1rem, 1rem + 2vw, 1.75rem);
}
.contador:not(:last-child)::before{
    content: '';
    background-color: var(--color-blanco);
    position: absolute;
    width: 2px;
    height: 3em;
    top: 50%;
    transform: translateY(-50%);
    right: -1em;
}

@media screen and (width < 900px) and (width > 501px){
    .contadores > div{
        grid-template-columns: 1fr 1fr;
    }
    .contador:not(:last-child)::before{
        display: none;
    }
}
@media screen and (width < 500px){
    .contadores > div{
        grid-template-columns: 1fr;
        row-gap: 5em;
    }
    .contador:not(:last-child)::before{
        width: 90%;
        height: 2px;
        top: initial;
        right: initial;
        bottom: -3em;
        left: 50%;
        transform: translateX(-50%);
    }
}

.ofrecemos{
    width: 100%;
    padding: 8rem 1.5rem;
}
.titulo-ofrecemos{
    width: 100%;
    max-width: 1000px;
    margin: auto;
    display: flex;
    flex-direction: column;
    text-align: center;
}
.titulo-ofrecemos h4{
    font-size: clamp(1rem, 1rem + 2vw, 1.25rem);
    font-family: var(--font-texto);
    font-weight: 500;
    color: var(--color-texto-alterno);
}
.titulo-ofrecemos h1{
    font-size: clamp(2rem, 2rem + 2vw, 5rem);
    text-align: center;
    max-width: 700px;
    margin: 3rem auto;
    color: var(--color-titulo-alterno);
}
.titulo-ofrecemos h1 span{
    color: var(--color-rosa);
}
.titulo-ofrecemos p{
    color: var(--color-texto);
}
.cards{
    width: 100%;
    max-width: 1000px;
    margin: 3rem auto;
    padding: 2rem 1rem;
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    align-items: center;
    gap: 15px;
}
.cards .card{
    border-radius: 10px;
    border: 2px solid var(--color-fondo-card);
    max-width: 300px;
}
.card .icono{
    width: 100%;
    padding: 2rem 0;
    text-align: center;
    background: var(--color-fondo-card);
    border-radius: 10px 10px 0 0;
}
.card .icono i{
    font-size: 3rem;
}
.energia{
    color: var(--color-energia);
}
.bienestar{
    color: var(--color-bienestar);
}
.nutricion{
    color: var(--color-texto-alterno);
}
.card .detalles{
    padding: 1rem;
}
.card .tag{
    background: var(--color-fondo-card);
    padding: .5rem 1rem;
    display: flex;
    width: 100px;
    justify-content: center;
    margin: 1rem 0;
    border-radius: 20px;
    font-family: var(--font-titulo);
}
.card h1{
    font-size: clamp(1rem, 1rem + 2vw, 1.5rem);
    margin: .5rem 0;
    color: var(--color-titulo-alterno);
    font-weight: 500;
}
.card p{
    font-size: clamp(.8rem, .8rem + 2vw, 1.1rem);
    color: var(--color-texto);
}
.btn-verMas{
    background: var(--color-detalles);
    display: flex;
    padding: .5rem 1rem;
    margin: 2rem 0 .5rem 0;
    text-align: center;
    justify-content: center;
    align-items: center;
    gap: 20px;
    border-radius: 20px;
    transition: .5s;
}
.btn-verMas:hover{
    transform: translateY(-3px);
    box-shadow: 0 10px 20px var(--color-bienestar);
}
.oportunidad{
    width: 100%;
    background: linear-gradient(45deg, rgb(35, 35, 114), rgb(13, 13, 41));
    /* background: var(--color-fondo-secciones); */
    padding: 8rem 1.5rem;
}
.cards-oportunidad{
    width: 100%;
    max-width: 1100px;
    display: flex;
    flex-wrap: wrap;
    gap: 25px;
    margin: 7rem auto;
    justify-content: center;
}
.card-oportunidad{
    width: 100%;
    max-width: 350px;
    transition: 1s;
    border-radius: 20px;
}
.card-oportunidad:hover{
    /* border: 1px solid var(--color-rosa); */
    transform: translateY(-3px);
    box-shadow: 0 15px 40px #db048150;
}
.card-oportunidad .numero{
    background-color: var(--color-rosa);
    width: 50px;
    height: 50px;
    border-radius: 50%;
    padding: 1rem;
    align-items: center;
    justify-content: center;
    display: flex;
    color: var(--color-blanco);
    margin: 2rem auto;
}
.card-oportunidad .detalles{
    text-align: center;
    padding: .5rem;
}
.card-oportunidad .detalles h1{
    color: var(--color-blanco);
    font-size: clamp(1rem, 1rem + 2vw, 1.5rem);
    margin-bottom: 1rem;
}
.card-oportunidad .detalles p{
    color: var(--color-texto);
    font-size: clamp(.8rem, .8rem + 2vw, 1.1rem);
}
.ingresos{
    width: 100%;
    padding: 1rem 1.5rem;
    display: flex;
    justify-content: space-between;
    align-items: center;
    background: var(--color-detalles);
    border-radius: 20px;
}
.ingresos .detalles-ingresos p{
    color: var(--color-blanco);
}
.ingresos .monto-ingresos{
    color: var(--color-blanco);
    text-align: center;
}
.mxn{
    color: var(--color-texto-alterno);
}

.porque{
    width: 100%;
    padding: 8rem 1.5rem;
}
.cards-porque{
    width: 100%;
    max-width: 1150px;
    display: flex;
    flex-wrap: wrap;
    margin: 5rem auto;
    gap: 25px;
}
.card-porque{
    width: 100%;
    max-width: 550px;
    display: flex;
    gap: 15px;
    border: 2px solid var(--color-fondo-card);
    padding: 1rem;
    border-radius: 20px;
}
.card-porque .icono-por{
    background: var(--color-fondo-card);
    width: 50px;
    height: 50px;
    padding: .5rem;
    align-items: center;
    justify-content: center;
    margin: auto;
    display: flex;
    font-size: 2rem;
    border-radius: 10px;
}

.card-porque .detalles-por h1{
    font-size: clamp(1rem, 1rem + 2vw, 1.5rem);
    color: var(--color-titulo-alterno);
    font-weight: 500;
}
.card-porque .detalles-por p{
    color: var(--color-texto);
    font-size: clamp(.8rem, .8rem + 2vw, 1.1rem);
}
.certificado{
    color: var(--color-texto-alterno);
}
.respaldo{
    color: var(--color-rosa);
}
.phone{
    color: var(--color-bienestar);
}
.user{
    color: var(--color-energia);
}

.testimonios{
    width: 100%;
    padding: 8rem 1.5rem;
    background: var(--color-fondo-card);
}
.cards-testimonios{
    width: 100%;
    max-width: 1200px;
    display: flex;
    flex-wrap: wrap;
    margin: 5rem auto;
    gap: 30px;
    justify-content: center;
}
.card-testimonios{
    width: 100%;
    max-width: 550px;
    padding: 1rem;
    background: var(--color-blanco);
    border-radius: 20px;
}
.card-testimonios .estrellas{
    color: var(--color-rosa);
    margin: 1rem 0;
}
.card-testimonios .detalles-testimonios p{
    color: var(--color-titulo-alterno);
    font-size: clamp(.8rem, .8rem + 2vw, 1.1rem);
    margin: 1rem;
    font-style: italic;
}
.usuario{
    display: flex;
    gap: 10px;
    align-items: center;
}
.nombre h1{
    color: var(--color-titulo-alterno);
    font-size: clamp(1rem, 1rem + 2vw, 1.5rem);
}
.nombre p{
    color: var(--color-texto);
    font-size: clamp(.8rem, .8rem + 2vw, 1.1rem);
}
.usuarioP{
    background: var(--color-rosa);
    padding: .5rem;
    color: var(--color-blanco);
    border-radius: 50%;
}
.usuarioS{
    background: var(--color-energia);
    padding: .5rem;
    color: var(--color-blanco);
    border-radius: 50%;
}
.usuarioT{
    background: var(--color-texto-alterno);
    padding: .5rem;
    color: var(--color-blanco);
    border-radius: 50%;
}
.usuarioC{
    background: var(--color-bienestar);
    padding: .5rem;
    color: var(--color-blanco);
    border-radius: 50%;
}
.preguntas{
    width: 100%;
    padding: 8rem 1.5rem;
}
.cards-preguntas{
    width: 100%;
    max-width: 1000px;
    padding: 3rem 1.5rem;
    margin: auto;
    display: flex;
    flex-wrap: wrap;
}
.card-preguntas{
    width: 100%;
    border: 2px solid var(--color-fondo-card);
    padding: 1rem;
    margin: 1rem 0;
    border-radius: 20px;
}
.card-preguntas h1{
    color: var(--color-bienestar);
    font-size: clamp(1rem, 1rem + 2vw, 1.5rem);
}
.card-preguntas span{
    color: var(--color-rosa);
}
.card-preguntas p{
    color: var(--color-texto);
    font-size: clamp(.8rem, .8rem + 2vw, 1.1rem);
}




@media screen and (width >= 997px){
    .titulo{
        transform: translateY(-50%) translateX(2%);
    }
}
@media screen and (width >= 1115px){
    .titulo{
        transform: translateY(-50%) translateX(5%);
    }
}
@media screen and (width >= 1200px){
    .titulo{
        transform: translateY(-50%) translateX(17%);
    }
}

@media screen and (width >= 1400px){
    .titulo{
        transform: translateY(-50%) translateX(38%);
    }
}
.login-modal {
    position: fixed;
    inset: 0;
    z-index: 1000;
    display: none;
    align-items: center;
    justify-content: center;
    padding: 1rem;
}

.login-modal.is-visible {
    display: flex;
}

.login-modal__backdrop {
    position: absolute;
    inset: 0;
    background: rgba(13, 13, 41, 0.74);
    backdrop-filter: blur(8px);
}

.login-modal__dialog {
    position: relative;
    width: min(420px, 100%);
    border: 1px solid rgba(255, 255, 255, 0.22);
    border-radius: 22px;
    background: linear-gradient(160deg, rgba(13, 13, 41, 0.98), rgba(35, 35, 114, 0.96));
    box-shadow: 0 30px 80px rgba(0, 0, 0, 0.35);
    padding: 2rem;
    color: var(--color-blanco);
}

.login-modal__dialog--wide {
    width: min(1180px, calc(100vw - 2rem));
    max-height: calc(100vh - 2rem);
    overflow: auto;
    border-color: rgba(0, 78, 190, .14);
    background:
        radial-gradient(circle at 98% 0%, rgba(232, 0, 110, .12), transparent 28%),
        linear-gradient(135deg, #FFFFFF, #F5FBFF);
    color: #1A2F4D;
    padding: clamp(1.2rem, 2.4vw, 2.2rem);
}

.login-modal__close {
    position: absolute;
    top: 1rem;
    right: 1rem;
    width: 38px;
    height: 38px;
    border: 0;
    border-radius: 50%;
    background: rgba(255, 255, 255, 0.12);
    color: var(--color-blanco);
    cursor: pointer;
    font-size: 1.25rem;
}

.login-modal__dialog--wide .login-modal__close {
    background: rgba(0, 78, 190, .08);
    color: #062A66;
}

.login-modal__logo {
    width: 116px;
    display: block;
    margin-bottom: 1rem;
}

.login-modal h2 {
    color: var(--color-blanco);
    font-size: 1.8rem;
    font-weight: 700;
    margin-bottom: 1rem;
}

.login-form {
    display: grid;
    gap: 1rem;
}

.login-form label {
    display: grid;
    gap: 0.45rem;
    font-family: var(--font-texto);
    color: var(--color-texto);
}

.login-form input {
    width: 100%;
    border: 1px solid rgba(255, 255, 255, 0.2);
    border-radius: 14px;
    background: rgba(255, 255, 255, 0.1);
    color: var(--color-blanco);
    outline: none;
    padding: 0.9rem 1rem;
    font-size: 1rem;
}

.login-form input:focus {
    border-color: var(--color-rosa);
    box-shadow: 0 0 0 3px rgba(219, 4, 130, 0.18);
}

.login-form button[type="submit"] {
    border: 0;
    border-radius: 999px;
    background: var(--color-rosa);
    color: var(--color-blanco);
    cursor: pointer;
    font-weight: 800;
    padding: 0.95rem 1rem;
}

.login-message {
    min-height: 1.2rem;
    font-size: 0.9rem;
}

.login-message.is-error {
    color: #ffb4d9;
}

.login-access-grid {
    display: grid;
    grid-template-columns: minmax(320px, .82fr) minmax(380px, 1.18fr);
    gap: clamp(1.2rem, 3vw, 3.5rem);
}

.login-access-card,
.login-create-card {
    min-width: 0;
}

.login-access-title {
    display: flex;
    align-items: center;
    gap: .75rem;
    margin-bottom: 1.4rem;
    color: #26364F;
}

.login-access-title i {
    color: #0758B7;
    font-size: 2.45rem;
}

.login-access-title h2 {
    margin: 0;
    color: #26364F;
    font-family: var(--font-titulo);
    font-size: clamp(2rem, 3.2vw, 3rem);
    font-weight: 900;
}

.login-modal__dialog--wide .login-form label {
    color: #475569;
    font-weight: 800;
}

.login-modal__dialog--wide .login-form input {
    border: 1px solid #C8D5E8;
    background: #FFFFFF;
    color: #071D49;
}

.login-modal__dialog--wide .login-form button[type="submit"] {
    display: inline-flex;
    justify-content: center;
    align-items: center;
    gap: .55rem;
    min-height: 54px;
    margin-top: .5rem;
    background: linear-gradient(135deg, #0758B7, #E8006E);
}

.login-modal__dialog--wide .login-message.is-error {
    color: #DC2626;
}

.login-modal__dialog--wide .login-message.is-ok {
    color: #078854;
}

.login-forgot-link,
.login-create-note a {
    color: #0758B7;
    font-weight: 900;
    text-align: center;
}

.login-create-note {
    display: grid;
    gap: .75rem;
    margin-top: 2rem;
    padding-top: 1.3rem;
    border-top: 1px solid #DCE7F5;
    color: #475569;
    text-align: center;
}

.login-register-tabs {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    border: 1px solid #DCE7F5;
    border-radius: 14px 14px 0 0;
    overflow: hidden;
}

.login-register-tabs a {
    display: grid;
    place-items: center;
    min-height: 52px;
    background: #FDF4FA;
    color: #0758B7;
    font-weight: 900;
    text-decoration: none;
}

.login-register-tabs a:first-child {
    background: #EAF7FF;
    border-right: 1px solid #DCE7F5;
}

.login-register-copy {
    display: grid;
    gap: 1rem;
    min-height: 260px;
    padding: 1.6rem;
    border: 1px solid #DCE7F5;
    border-top: 0;
    border-radius: 0 0 14px 14px;
    background: #FFFFFF;
    box-shadow: 0 20px 46px rgba(6, 42, 102, .10);
}

.login-register-copy article {
    display: grid;
    grid-template-columns: 36px minmax(0, 1fr);
    gap: .65rem;
    align-items: start;
}

.login-register-copy i {
    color: #00A86B;
    font-size: 1.45rem;
}

.login-register-copy strong {
    display: block;
    color: #25354F;
    font-size: 1.05rem;
    font-weight: 900;
}

.login-register-copy span {
    color: #5C6E83;
    font-weight: 650;
    line-height: 1.35;
}

.login-register-actions {
    display: grid;
    gap: .8rem;
    margin-top: 1.2rem;
}

.login-register-actions span {
    color: #25354F;
    font-weight: 900;
}

.login-register-actions a {
    display: inline-flex;
    justify-content: center;
    border: 1.5px solid #0758B7;
    border-radius: 999px;
    color: #0758B7;
    font-weight: 900;
    padding: .85rem 1rem;
    text-decoration: none;
}

.login-register-actions a:last-child {
    border-color: #E8006E;
    color: #E8006E;
}

.password-field {
    position: relative;
}

.password-field input {
    padding-right: 3rem !important;
}

.password-toggle {
    position: absolute;
    top: 50%;
    right: .7rem;
    display: inline-grid;
    place-items: center;
    width: 34px;
    height: 34px;
    border: 0;
    border-radius: 50%;
    background: transparent;
    color: #0758B7;
    cursor: pointer;
    font-size: 1.25rem;
    transform: translateY(-50%);
}

.login-message.is-ok {
    color: #9ff0c5;
}

.office-body {
    min-height: 100vh;
    display: grid;
    grid-template-columns: 270px 1fr;
    background: #f6f8fb;
    color: #1f2937;
}

.office-sidebar {
    min-height: 100vh;
    background: linear-gradient(180deg, rgb(13, 13, 41), rgb(35, 35, 114));
    padding: 1.4rem;
}

.office-sidebar img {
    width: 140px;
    display: block;
    margin-bottom: 2rem;
}

.office-sidebar nav {
    display: grid;
    gap: 0.65rem;
}

.office-sidebar button {
    display: flex;
    align-items: center;
    gap: 0.65rem;
    border: 0;
    border-radius: 12px;
    background: transparent;
    color: var(--color-blanco);
    cursor: pointer;
    font-weight: 700;
    padding: 0.85rem 1rem;
    text-align: left;
}

.office-sidebar button.is-active,
.office-sidebar button:hover {
    background: rgba(255, 255, 255, 0.12);
}

.office-main {
    padding: 1.5rem;
}

.office-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    gap: 1rem;
    border-radius: 18px;
    background: #ffffff;
    box-shadow: 0 10px 30px rgba(13, 13, 41, 0.08);
    padding: 1.2rem;
}

.office-header span {
    color: var(--color-rosa);
    font-family: var(--font-texto);
    font-weight: 800;
}

.office-header h1 {
    color: #1f2937;
    font-size: 1.6rem;
    font-weight: 800;
}

.office-header button {
    border: 0;
    border-radius: 999px;
    background: var(--color-rosa);
    color: #ffffff;
    cursor: pointer;
    font-weight: 800;
    padding: 0.8rem 1rem;
}

.office-panel {
    margin-top: 1.5rem;
    border-radius: 18px;
    background: #ffffff;
    box-shadow: 0 10px 30px rgba(13, 13, 41, 0.08);
    padding: 1.4rem;
}

.office-panel h2 {
    color: #1f2937;
    margin-bottom: 0.5rem;
}

.office-panel p {
    color: #6b7280;
    font-size: 1rem;
}

@media screen and (width < 820px) {
    .office-body {
        grid-template-columns: 1fr;
    }

    .office-sidebar {
        min-height: auto;
    }

    .office-header {
        align-items: flex-start;
        flex-direction: column;
    }
}

.office-panel-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 1rem;
    margin-bottom: 1rem;
}

.office-panel-header span {
    color: var(--color-rosa);
    font-family: var(--font-texto);
    font-weight: 800;
    font-size: 0.9rem;
}

.office-panel-header h2 {
    margin: 0;
}

.office-panel-header button,
.office-form button[type="submit"] {
    border: 0;
    border-radius: 999px;
    background: var(--color-rosa);
    color: #ffffff;
    cursor: pointer;
    font-weight: 800;
    padding: 0.8rem 1rem;
}

.office-table-wrap {
    overflow-x: auto;
}

.office-table {
    width: 100%;
    border-collapse: collapse;
    min-width: 760px;
    font-family: var(--font-texto);
}

.office-table th,
.office-table td {
    border-bottom: 1px solid #e5e7eb;
    padding: 0.85rem;
    text-align: left;
    font-size: 0.95rem;
}

.office-table th {
    background: #f8fafc;
    color: #475569;
    font-weight: 800;
}

.office-tag {
    display: inline-flex;
    align-items: center;
    border-radius: 999px;
    background: rgba(219, 4, 130, 0.1);
    color: var(--color-rosa);
    font-weight: 800;
    padding: 0.35rem 0.65rem;
}

.office-actions {
    display: flex;
    gap: 0.5rem;
}

.office-actions button {
    border: 0;
    border-radius: 10px;
    background: rgb(61, 121, 217);
    color: #ffffff;
    cursor: pointer;
    font-weight: 800;
    padding: 0.55rem 0.75rem;
}

.office-actions button.is-danger {
    background: #dc2626;
}

.office-actions button:disabled {
    opacity: 0.45;
    cursor: not-allowed;
}

.office-empty {
    color: #64748b;
    text-align: center !important;
    padding: 1.2rem !important;
}

.office-modal {
    position: fixed;
    inset: 0;
    z-index: 1200;
    align-items: flex-start;
    justify-content: center;
    overflow-y: auto;
    overscroll-behavior: contain;
    padding: 1rem;
}

.office-modal__backdrop {
    position: absolute;
    inset: 0;
    background: rgba(13, 13, 41, 0.72);
    backdrop-filter: blur(7px);
}

.office-modal__dialog {
    position: relative;
    width: min(520px, 100%);
    max-height: calc(100dvh - 2rem);
    margin: auto;
    overflow-y: auto;
    overscroll-behavior: contain;
    border-radius: 20px;
    background: #ffffff;
    box-shadow: 0 28px 70px rgba(15, 23, 42, 0.3);
    padding: 1.4rem;
    scrollbar-gutter: stable;
}

.office-modal__dialog h2 {
    color: #1f2937;
    font-weight: 800;
    margin-bottom: 1rem;
}

.office-modal__close {
    position: absolute;
    top: 1rem;
    right: 1rem;
    width: 38px;
    height: 38px;
    border: 0;
    border-radius: 50%;
    background: #f1f5f9;
    color: #334155;
    cursor: pointer;
    font-size: 1.25rem;
}

.office-form {
    display: grid;
    gap: 0.9rem;
}

.office-form label {
    display: grid;
    gap: 0.4rem;
    color: #475569;
    font-family: var(--font-texto);
    font-weight: 700;
}

.office-form input,
.office-form select {
    width: 100%;
    border: 1px solid #cbd5e1;
    border-radius: 12px;
    outline: none;
    padding: 0.8rem 0.9rem;
    font-size: 1rem;
}

.office-form input:focus,
.office-form select:focus {
    border-color: var(--color-rosa);
    box-shadow: 0 0 0 3px rgba(219, 4, 130, 0.12);
}

.office-form small {
    color: #64748b;
    font-weight: 500;
}

.office-message {
    min-height: 1.2rem;
    font-size: 0.92rem;
}

.office-message.is-error {
    color: #dc2626;
}

.office-message.is-ok {
    color: #16a34a;
}

@media screen and (width < 720px) {
    .office-panel-header {
        align-items: flex-start;
        flex-direction: column;
    }
}

.dashboard-module {
    display: grid;
    gap: 1.5rem;
    margin-top: 1.5rem;
}

.dashboard-hero {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 1rem;
    border-radius: 18px;
    background: #ffffff;
    box-shadow: 0 10px 30px rgba(13, 13, 41, 0.08);
    padding: 1.4rem;
}

.dashboard-hero span,
.dashboard-summary__header h3 i {
    color: var(--color-rosa);
}

.dashboard-hero h2 {
    color: #1f2937;
    font-size: clamp(1.6rem, 2vw, 2.35rem);
    font-weight: 800;
    margin: 0.35rem 0;
}

.dashboard-hero p {
    color: #64748b;
    font-size: 1rem;
}

.dashboard-hero button,
.referral-link-box button {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 0.45rem;
    border: 0;
    border-radius: 999px;
    background: var(--color-rosa);
    color: #ffffff;
    cursor: pointer;
    font-weight: 800;
    padding: 0.8rem 1rem;
    white-space: nowrap;
}

.dashboard-summary {
    border-radius: 18px;
    background: #fff7d8;
    border: 1px solid #fde68a;
    padding: 1.4rem;
}

.dashboard-summary__header h3 {
    display: flex;
    align-items: center;
    gap: 0.55rem;
    color: #1f2937;
    font-size: 1.1rem;
    font-weight: 800;
    margin-bottom: 1rem;
}

.dashboard-kpis {
    display: grid;
    grid-template-columns: repeat(4, minmax(0, 1fr));
    gap: 1rem;
}

.dashboard-kpis article {
    border-radius: 14px;
    background: #ffffff;
    box-shadow: 0 10px 24px rgba(13, 13, 41, 0.08);
    padding: 1rem;
    text-align: center;
}

.dashboard-kpis span {
    display: block;
    color: #64748b;
    font-family: var(--font-texto);
    font-size: 0.78rem;
    font-weight: 800;
    text-transform: uppercase;
}

.dashboard-kpis strong {
    display: block;
    color: #1f2937;
    font-family: var(--font-titulo);
    font-size: 1.45rem;
    font-weight: 800;
    margin-top: 0.5rem;
}

.dashboard-grid {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 1rem;
}

.dashboard-card {
    border: 1px solid #e5e7eb;
    border-radius: 18px;
    background: #ffffff;
    box-shadow: 0 10px 30px rgba(13, 13, 41, 0.08);
    padding: 1.2rem;
}

.dashboard-card__icon {
    width: 42px;
    height: 42px;
    display: flex;
    align-items: center;
    justify-content: center;
    border-radius: 12px;
    background: #fff7d8;
    color: var(--color-rosa);
    font-size: 1.3rem;
    margin-bottom: 0.85rem;
}

.dashboard-card h3 {
    color: #1f2937;
    font-size: 1.1rem;
    font-weight: 800;
    margin-bottom: 0.45rem;
}

.dashboard-card p {
    color: #64748b;
    font-size: 0.95rem;
}

.referral-card {
    grid-column: span 3;
}

.referral-link-box {
    display: grid;
    grid-template-columns: 1fr auto;
    gap: 0.75rem;
    margin-top: 1rem;
}

.referral-link-box input {
    width: 100%;
    border: 1px solid #cbd5e1;
    border-radius: 999px;
    background: #f8fafc;
    color: #334155;
    padding: 0.85rem 1rem;
    font-size: 0.95rem;
}

.referral-card small {
    display: block;
    min-height: 1.2rem;
    color: #16a34a;
    font-family: var(--font-texto);
    font-weight: 700;
    margin-top: 0.5rem;
}

.registro-body {
    min-height: 100vh;
    background: linear-gradient(135deg, rgb(13, 13, 41), rgb(35, 35, 114));
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 1rem;
}

.registro-shell {
    width: min(480px, 100%);
}

.registro-panel {
    border: 1px solid rgba(255, 255, 255, 0.18);
    border-radius: 24px;
    background: rgba(255, 255, 255, 0.96);
    box-shadow: 0 30px 80px rgba(0, 0, 0, 0.28);
    padding: 2rem;
}

.registro-panel img {
    width: 128px;
    display: block;
    margin-bottom: 1rem;
}

.registro-panel > span {
    color: var(--color-rosa);
    font-family: var(--font-texto);
    font-weight: 800;
}

.registro-panel h1 {
    color: #1f2937;
    font-size: 2rem;
    font-weight: 800;
    margin: 0.55rem 0;
}

.registro-panel p {
    color: #64748b;
    font-size: 1rem;
}

.registro-form {
    display: grid;
    gap: 0.9rem;
    margin-top: 1.3rem;
}

.registro-form label {
    display: grid;
    gap: 0.4rem;
    color: #475569;
    font-family: var(--font-texto);
    font-weight: 800;
}

.registro-form input {
    width: 100%;
    border: 1px solid #cbd5e1;
    border-radius: 14px;
    outline: none;
    padding: 0.85rem 1rem;
    font-size: 1rem;
}

.registro-form input:focus {
    border-color: var(--color-rosa);
    box-shadow: 0 0 0 3px rgba(219, 4, 130, 0.12);
}

.registro-form button {
    border: 0;
    border-radius: 999px;
    background: var(--color-rosa);
    color: #ffffff;
    cursor: pointer;
    font-weight: 800;
    padding: 0.95rem 1rem;
}

.registro-message {
    min-height: 1.2rem;
    font-size: 0.92rem !important;
}

.registro-message.is-error {
    color: #dc2626;
}

.registro-message.is-ok {
    color: #16a34a;
}

@media screen and (width < 980px) {
    .dashboard-kpis,
    .dashboard-grid {
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }

    .referral-card {
        grid-column: span 2;
    }
}

@media screen and (width < 680px) {
    .dashboard-hero,
    .office-header {
        align-items: flex-start;
        flex-direction: column;
    }

    .dashboard-kpis,
    .dashboard-grid,
    .referral-link-box {
        grid-template-columns: 1fr;
    }

    .referral-card {
        grid-column: span 1;
    }
}

.dashboard-finance {
    gap: 1.25rem;
}

.dashboard-hero-compact {
    margin-bottom: 0;
}

.finance-kpis {
    display: grid;
    grid-template-columns: repeat(4, minmax(0, 1fr));
    gap: 0.9rem;
}

.finance-kpi {
    border: 1px solid #dbe3ef;
    border-top: 4px solid #1f73d8;
    border-radius: 12px;
    background: #ffffff;
    box-shadow: 0 8px 24px rgba(15, 23, 42, 0.05);
    padding: 1rem;
}

.finance-kpi span,
.finance-panel h3,
.withdraw-form span {
    color: #556985;
    font-family: var(--font-texto);
    font-size: 0.82rem;
    font-weight: 900;
    letter-spacing: 0.03em;
}

.finance-kpi strong {
    display: block;
    color: #050b28;
    font-family: var(--font-titulo);
    font-size: 1.8rem;
    font-weight: 900;
    line-height: 1.1;
    margin-top: 0.45rem;
}

.finance-kpi small {
    color: #4fbe76;
    font-family: var(--font-texto);
    font-weight: 700;
}

.finance-kpi.kpi-pink { border-top-color: #e22b8f; }
.finance-kpi.kpi-green { border-top-color: #51b878; }
.finance-kpi.kpi-orange { border-top-color: #ff8a00; }
.finance-kpi.kpi-orange small { color: #ff7300; }
.finance-kpi .kpi-status {
    display: inline-flex;
    width: auto;
    border-radius: 999px;
    background: #fff0d9;
    color: #ff7300;
    font-size: 0.9rem;
    padding: 0.35rem 0.7rem;
}

.dashboard-two-col {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 0.9rem;
}

.dashboard-wide-left {
    grid-template-columns: minmax(0, 1.35fr) minmax(320px, 0.85fr);
}

.dashboard-bottom-grid {
    grid-template-columns: minmax(0, 1fr) minmax(340px, 1fr);
}

.finance-panel {
    border: 1px solid #dbe3ef;
    border-radius: 12px;
    background: #ffffff;
    box-shadow: 0 8px 24px rgba(15, 23, 42, 0.05);
    padding: 1.2rem;
}

.finance-panel h3 {
    display: flex;
    align-items: center;
    gap: 0.55rem;
    margin-bottom: 1rem;
}

.finance-panel h3 i {
    font-size: 0.55rem;
}

.dot-blue { color: #1f73d8; }
.dot-green { color: #51b878; }
.dot-pink { color: #e22b8f; }

.bonus-list div,
.status-list div,
.commission-list div,
.referrals-list div {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 0.75rem;
    border-bottom: 1px solid #dbe3ef;
    padding: 0.64rem 0;
    font-family: var(--font-texto);
}

.bonus-list div:last-child,
.status-list div:last-child,
.commission-list div:last-child,
.referrals-list div:last-child {
    border-bottom: 0;
}

.bonus-list span,
.status-list span {
    color: #49617c;
}

.bonus-list strong,
.level-row strong {
    color: #050b28;
    font-weight: 900;
}

.bonus-list .bonus-total strong,
.commission-list b,
.referrals-list b {
    color: #4fbe76;
}

.pill {
    border-radius: 999px;
    padding: 0.25rem 0.65rem;
    font-size: 0.8rem;
    font-weight: 900;
}

.pill-blue { background: #e7f0ff; color: #1f73d8; }
.pill-green { background: #e7f8ed; color: #249b51; }
.pill-orange { background: #fff0d9; color: #ff7300; }
.pill-pink { background: #ffe9f5; color: #e22b8f; }

.level-bonus-list {
    display: grid;
    gap: 0.75rem;
}

.level-row {
    display: grid;
    grid-template-columns: 68px minmax(120px, 1fr) 88px 58px 74px;
    align-items: center;
    gap: 0.75rem;
    font-family: var(--font-texto);
    font-size: 0.86rem;
}

.level-label {
    border-radius: 999px;
    font-size: 0.78rem;
    font-weight: 900;
    padding: 0.28rem 0.45rem;
    text-align: center;
}

.level-1 { background: #e7f0ff; color: #1f73d8; }
.level-2 { background: #e7f8ed; color: #249b51; }
.level-3 { background: #ffe9f5; color: #e22b8f; }
.level-4 { background: #fff0d9; color: #ff7300; }
.level-5 { background: #f4e7ff; color: #9c27b0; }

.level-track {
    height: 6px;
    overflow: hidden;
    border-radius: 999px;
    background: #dfe6ee;
}

.level-track i {
    display: block;
    height: 100%;
    border-radius: inherit;
}

.finance-note {
    border-top: 1px solid #dbe3ef;
    color: #49617c !important;
    font-size: 0.85rem !important;
    margin-top: 0.9rem;
    padding-top: 0.75rem;
}

.commission-list div,
.referrals-list div {
    justify-content: flex-start;
}

.commission-list i[class$='-bg'] {
    width: 9px;
    height: 9px;
    border-radius: 50%;
    flex: 0 0 auto;
}

.dot-blue-bg { background: #1f73d8; }
.dot-green-bg { background: #51b878; }
.dot-pink-bg { background: #e22b8f; }
.dot-orange-bg { background: #ff8a00; }
.dot-purple-bg { background: #9c27b0; }

.commission-list span,
.referrals-list span {
    display: grid;
    gap: 0.1rem;
    flex: 1;
}

.commission-list small,
.referrals-list small {
    color: #526987;
    font-size: 0.8rem;
}

.ghost-action {
    width: 100%;
    border: 1px solid #dbe3ef;
    border-radius: 10px;
    background: #f8fafc;
    color: #1264d8;
    cursor: pointer;
    font-weight: 800;
    margin-top: 0.9rem;
    padding: 0.75rem 1rem;
}

.referrals-list em {
    width: 36px;
    height: 36px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    border-radius: 50%;
    flex: 0 0 auto;
    font-style: normal;
    font-size: 0.8rem;
    font-weight: 900;
}

.avatar-blue { background: #e7f0ff; color: #1f73d8; }
.avatar-green { background: #e7f8ed; color: #249b51; }
.avatar-pink { background: #ffe9f5; color: #e22b8f; }
.avatar-orange { background: #fff0d9; color: #ff7300; }
.referrals-list .warning { color: #ff7300; }

.withdraw-amount {
    display: flex;
    align-items: baseline;
    gap: 0.5rem;
    margin-bottom: 0.2rem;
}

.withdraw-amount strong {
    color: #050b28;
    font-family: var(--font-titulo);
    font-size: 2.5rem;
    font-weight: 900;
    line-height: 1;
}

.withdraw-amount span {
    color: #49617c;
    font-family: var(--font-texto);
}

.withdraw-panel p {
    color: #49617c;
    font-size: 0.95rem;
    margin-bottom: 1rem;
}

.withdraw-form {
    display: grid;
    gap: 0.85rem;
}

.withdraw-form label {
    display: grid;
    gap: 0.45rem;
}

.withdraw-form select,
.withdraw-form input {
    width: 100%;
    border: 1px solid #d8e1ed;
    border-radius: 10px;
    outline: none;
    padding: 0.85rem 1rem;
    font-size: 1rem;
}

.withdraw-form button {
    border: 0;
    border-radius: 10px;
    background: #2474d8;
    color: #ffffff;
    cursor: pointer;
    font-weight: 900;
    padding: 0.95rem 1rem;
}

.withdraw-panel > small {
    display: block;
    color: #526987;
    font-family: var(--font-texto);
    font-size: 0.8rem;
    margin-top: 0.85rem;
    text-align: center;
}

@media screen and (width < 1080px) {
    .finance-kpis,
    .dashboard-two-col,
    .dashboard-wide-left,
    .dashboard-bottom-grid {
        grid-template-columns: 1fr 1fr;
    }
}

@media screen and (width < 760px) {
    .finance-kpis,
    .dashboard-two-col,
    .dashboard-wide-left,
    .dashboard-bottom-grid {
        grid-template-columns: 1fr;
    }

    .level-row {
        grid-template-columns: 70px 1fr;
        gap: 0.5rem;
    }

    .level-row > span:not(.level-label),
    .level-row strong {
        justify-self: end;
    }
}

/* Corrección de layout del dashboard financiero */
.office-body {
    grid-template-columns: 270px minmax(0, 1fr);
}

.office-main {
    min-width: 0;
    overflow-x: hidden;
}

.dashboard-module.dashboard-finance {
    display: flex;
    flex-direction: column;
    align-items: stretch;
    width: 100%;
}

.dashboard-finance > * {
    width: 100%;
    min-width: 0;
}

.dashboard-finance > .referral-card {
    grid-column: auto;
}

.dashboard-finance .finance-kpis,
.dashboard-finance .dashboard-two-col,
.dashboard-finance .dashboard-wide-left,
.dashboard-finance .dashboard-bottom-grid {
    min-width: 0;
}

.dashboard-finance .finance-panel,
.dashboard-finance .finance-kpi {
    min-width: 0;
}

/* Organigrama de Mi Red */
.network-tree-shell {
    width: 100%;
    margin-top: 1.2rem;
    overflow-x: auto;
    overflow-y: hidden;
    padding: 1.2rem 0.5rem 1.8rem;
    cursor: grab;
}

.network-tree-shell.is-drag-scrolling,
#modulo-inventario .office-table-wrap.is-drag-scrolling,
#tablaUsuariosWrap.is-drag-scrolling {
    cursor: grabbing;
    user-select: none;
}

#modulo-inventario .office-table-wrap,
.office-table-wrap[data-drag-scroll-ready="1"] {
    cursor: grab;
}

.office-table-wrap[data-drag-scroll-ready="1"].is-drag-scrolling {
    cursor: grabbing;
    user-select: none;
}

.table-search-control {
    width: min(360px, 100%);
    display: flex;
    align-items: center;
    gap: 0.55rem;
    margin: 1rem 0 0.65rem;
    border: 1px solid #CFE0F7;
    border-radius: 8px;
    background: #FFFFFF;
    color: var(--manik-primary);
    padding: 0.15rem 0.75rem;
}

.table-search-control input {
    width: 100%;
    min-width: 0;
    min-height: 42px;
    border: 0;
    outline: 0;
    background: transparent;
    color: var(--manik-dark);
    font: inherit;
}

.affiliate-purchase-row {
    cursor: pointer;
    transition: background 140ms ease, box-shadow 140ms ease;
}

.affiliate-purchase-row:hover,
.affiliate-purchase-row:focus-visible {
    background: var(--manik-soft-blue);
    outline: 2px solid rgba(0, 71, 171, 0.18);
    outline-offset: -2px;
}

.affiliate-status {
    display: inline-flex;
    align-items: center;
    border-radius: 999px;
    font-size: 0.75rem;
    font-weight: 900;
    padding: 0.35rem 0.65rem;
    white-space: nowrap;
}

.affiliate-status.status-active {
    background: var(--manik-soft-green);
    color: #287E65;
}

.affiliate-status.status-evo {
    background: var(--manik-soft-pink);
    color: var(--manik-cta);
}

.affiliate-status.status-pending,
.affiliate-status.status-warning {
    background: #FFE5E5;
    color: #B42318;
}

.network-tree {
    min-width: 880px;
    display: grid;
    gap: 2.2rem;
    font-family: var(--font-texto);
}

.network-level {
    position: relative;
    display: grid;
    gap: 0.9rem;
    justify-items: center;
}

.network-level:not(:first-child)::before {
    content: '';
    position: absolute;
    top: -1.65rem;
    left: 50%;
    width: min(78%, 980px);
    height: 1px;
    background: #1f2937;
    transform: translateX(-50%);
}

.network-level-label {
    border-radius: 999px;
    background: #eef2ff;
    color: #334155;
    font-size: 0.76rem;
    font-weight: 900;
    letter-spacing: 0.05em;
    padding: 0.32rem 0.75rem;
}

.network-level-nodes {
    width: 100%;
    display: flex;
    flex-wrap: nowrap;
    align-items: flex-start;
    justify-content: center;
    gap: 1.15rem;
}

.network-node {
    position: relative;
    width: 190px;
    height: 82px;
    display: grid;
    grid-template-columns: 38px 1fr;
    grid-template-rows: 1fr auto;
    column-gap: 0.65rem;
    align-items: center;
    border: 3px solid #111827;
    border-radius: 0;
    background: #ffffff;
    color: #111827;
    padding: 0.72rem;
    box-shadow: 0 10px 22px rgba(15, 23, 42, 0.07);
}

.network-level:not(:first-child) .network-node::before {
    content: '';
    position: absolute;
    top: -1.18rem;
    left: 50%;
    width: 2px;
    height: 1.18rem;
    background: #111827;
    transform: translateX(-50%);
}

.network-node span {
    width: 38px;
    height: 38px;
    grid-row: 1 / span 2;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    border-radius: 50%;
    background: #e7f0ff;
    color: #1f73d8;
    font-weight: 900;
}

.network-node strong {
    overflow: hidden;
    color: #0f172a;
    font-size: 0.88rem;
    font-weight: 900;
    line-height: 1.15;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.network-node small {
    overflow: hidden;
    color: #64748b;
    font-size: 0.74rem;
    font-weight: 700;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.network-node.is-root {
    width: 320px;
    border-width: 4px;
}

.network-node.is-root span {
    background: #ffe9f5;
    color: var(--color-rosa);
}

.network-empty {
    width: max-content;
    min-width: 320px;
    margin: 1rem auto 0;
    border: 1px dashed #cbd5e1;
    border-radius: 12px;
    background: #f8fafc;
    color: #64748b !important;
    font-size: 0.95rem !important;
    font-weight: 800;
    padding: 0.95rem 1.2rem;
    text-align: center;
}

@media screen and (width < 760px) {
    .network-tree {
        min-width: 720px;
    }

    .network-node {
        width: 160px;
        height: 78px;
    }

    .network-node.is-root {
        width: 260px;
    }
}

/* Paleta Manik Evolution aplicada a oficina virtual */
:root {
    --manik-primary: #0047AB;
    --manik-cta: #E8006E;
    --manik-detail: #5DB89A;
    --manik-white: #FFFFFF;
    --manik-dark: #1A1A2E;
    --manik-soft-blue: #EAF2FF;
    --manik-soft-pink: #FFE8F2;
    --manik-soft-green: #EAF8F3;
    --manik-border: #D8E4F5;
}

.office-body {
    background: #F4F7FB;
    color: var(--manik-dark);
}

.office-sidebar {
    background: linear-gradient(180deg, var(--manik-dark), #102D68 58%, var(--manik-primary));
}

.office-sidebar button.is-active,
.office-sidebar button:hover {
    background: rgba(255, 255, 255, 0.14);
    box-shadow: inset 3px 0 0 var(--manik-detail);
}

.office-header,
.dashboard-hero,
.finance-panel,
.finance-kpi,
.office-panel {
    border: 1px solid var(--manik-border);
    box-shadow: 0 16px 36px rgba(26, 26, 46, 0.08);
}

.office-header span,
.dashboard-hero span,
.office-panel-header span {
    color: var(--manik-cta);
}

.office-header h1,
.dashboard-hero h2,
.office-panel h2,
.finance-kpi strong,
.withdraw-amount strong,
.bonus-list strong,
.level-row strong {
    color: var(--manik-dark);
}

.office-header button,
.dashboard-hero button,
.referral-link-box button,
.office-panel-header button,
.office-form button[type="submit"] {
    background: var(--manik-cta);
    color: var(--manik-white);
    box-shadow: 0 10px 24px rgba(232, 0, 110, 0.18);
}

.finance-kpi {
    border-top-color: var(--manik-primary);
}

.finance-kpi.kpi-pink {
    border-top-color: var(--manik-cta);
}

.finance-kpi.kpi-green {
    border-top-color: var(--manik-detail);
}

.finance-kpi.kpi-orange {
    border-top-color: var(--manik-primary);
}

.finance-kpi span,
.finance-panel h3,
.withdraw-form span {
    color: #52657E;
}

.finance-kpi small,
.bonus-list .bonus-total strong,
.commission-list b,
.referrals-list b {
    color: var(--manik-detail);
}

.finance-kpi.kpi-orange small {
    color: var(--manik-cta);
}

.finance-kpi .kpi-status,
.pill-orange {
    background: var(--manik-soft-pink);
    color: var(--manik-cta);
}

.dot-blue,
.dot-green,
.dot-pink {
    color: var(--manik-detail);
}

.pill-blue,
.level-1 {
    background: var(--manik-soft-blue);
    color: var(--manik-primary);
}

.pill-green,
.level-2 {
    background: var(--manik-soft-green);
    color: #287E65;
}

.pill-pink,
.level-3,
.level-5 {
    background: var(--manik-soft-pink);
    color: var(--manik-cta);
}

.level-4 {
    background: var(--manik-soft-blue);
    color: var(--manik-primary);
}

.withdraw-form button,
.ghost-action {
    background: var(--manik-primary);
    color: var(--manik-white);
    border-color: var(--manik-primary);
}

.ghost-action {
    background: #F7FAFF;
    color: var(--manik-primary);
}

.withdraw-form select:focus,
.withdraw-form input:focus,
.referral-link-box input:focus,
.office-form input:focus,
.office-form select:focus {
    border-color: var(--manik-primary);
    box-shadow: 0 0 0 3px rgba(0, 71, 171, 0.12);
}

.network-tree-shell {
    border: 1px solid var(--manik-border);
    border-radius: 16px;
    background: linear-gradient(180deg, #FFFFFF, #F8FBFF);
    padding: 1.5rem 1rem 2rem;
}

.network-level-label {
    background: var(--manik-soft-blue);
    color: var(--manik-primary);
    box-shadow: 0 8px 18px rgba(0, 71, 171, 0.08);
}

.network-level:not(:first-child)::before,
.network-level:not(:first-child) .network-node::before {
    background: var(--manik-primary);
}

.network-node {
    border: 2px solid var(--manik-primary);
    border-radius: 10px;
    background: var(--manik-white);
    box-shadow: 0 14px 28px rgba(0, 71, 171, 0.10);
}

.network-node.is-root {
    border-color: var(--manik-dark);
    background: linear-gradient(90deg, #FFFFFF, #F7FAFF);
}

.network-node span {
    background: var(--manik-soft-green);
    color: #287E65;
}

.network-node.is-root span {
    background: var(--manik-soft-pink);
    color: var(--manik-cta);
}

.network-node strong {
    color: var(--manik-dark);
}

.network-node small {
    color: #52657E;
}

.network-empty {
    border-color: var(--manik-border);
    background: var(--manik-soft-blue);
    color: #52657E !important;
}

/* Uso semantico de paleta Manik Evolution */
.office-sidebar {
    background: linear-gradient(180deg, var(--manik-dark), #121B3F 62%, var(--manik-dark));
}

.office-header,
.dashboard-hero {
    background: linear-gradient(135deg, var(--manik-dark), #102D68 72%, var(--manik-primary));
    border-color: rgba(255, 255, 255, 0.12);
}

.office-header span,
.dashboard-hero span {
    color: var(--manik-detail);
}

.office-header h1,
.dashboard-hero h2,
.dashboard-hero p {
    color: var(--manik-white);
}

.office-header button,
.dashboard-hero button,
.referral-link-box button,
.withdraw-form button,
.office-form button[type="submit"] {
    background: var(--manik-cta);
    color: var(--manik-white);
    box-shadow: 0 12px 26px rgba(232, 0, 110, 0.24);
}

.office-panel-header button,
.ghost-action,
.office-actions button {
    background: var(--manik-primary);
    color: var(--manik-white);
    border-color: var(--manik-primary);
}

.office-panel h2,
.office-panel-header h2,
.finance-panel h3,
.finance-kpi span,
.withdraw-form span,
.referral-card h3 {
    color: var(--manik-primary);
}

.finance-kpi {
    border-top-color: var(--manik-primary);
}

.finance-kpi strong,
.withdraw-amount strong,
.bonus-list strong,
.level-row strong,
.bonus-list .bonus-total strong,
.commission-list b,
.referrals-list b {
    color: var(--manik-cta);
}

.finance-kpi small,
.finance-note,
.withdraw-panel p,
.network-node small {
    color: #52657E !important;
}

.finance-kpi.kpi-green {
    border-top-color: var(--manik-detail);
}

.finance-kpi.kpi-pink,
.finance-kpi.kpi-orange {
    border-top-color: var(--manik-cta);
}

.finance-kpi .kpi-status,
.office-tag,
.pill,
.level-label {
    background: var(--manik-soft-pink);
    color: var(--manik-cta);
}

.dot-blue,
.dot-green,
.dot-pink,
.dashboard-summary__header h3 i,
.finance-panel h3 i,
.dashboard-card__icon,
.office-sidebar button i {
    color: var(--manik-detail);
}

.pill-green,
.level-2 {
    background: var(--manik-soft-green);
    color: #287E65;
}

.pill-blue,
.level-1,
.level-4 {
    background: var(--manik-soft-blue);
    color: var(--manik-primary);
}

.network-tree-shell,
.finance-panel,
.finance-kpi,
.office-panel {
    background: var(--manik-white);
}

.network-level-label {
    background: var(--manik-primary);
    color: var(--manik-white);
}

.network-node {
    border-color: var(--manik-primary);
}

.network-node.is-root {
    border-color: var(--manik-dark);
}

.network-node span {
    background: var(--manik-soft-green);
    color: #287E65;
}

.network-node.is-root span {
    background: var(--manik-soft-pink);
    color: var(--manik-cta);
}

.network-empty {
    background: #F7FAFF;
    color: var(--manik-primary) !important;
}

.referral-card {
    border-top: 4px solid var(--manik-primary);
}

/* Tipografias globales de la oficina virtual */
h1, h2, h3, h4, h5, h6,
.office-header h1,
.dashboard-hero h2,
.finance-kpi strong,
.withdraw-amount strong,
.network-node strong {
    font-family: var(--font-titulo);
}

body,
button,
input,
select,
textarea,
p,
span,
small,
label,
table,
.office-sidebar,
.office-panel,
.finance-panel,
.network-tree-shell {
    font-family: var(--font-texto);
}

/* Pulido visual de Mi Red */
.network-tree-shell {
    border-color: #CFE0F7;
    background: linear-gradient(180deg, #FFFFFF 0%, #F5F9FF 100%);
}

.network-tree {
    gap: 2rem;
}

.network-level-label {
    min-width: 84px;
    text-align: center;
    background: linear-gradient(135deg, var(--manik-primary), #0B5ED7);
    color: var(--manik-white);
    box-shadow: 0 10px 20px rgba(0, 71, 171, 0.18);
}

.network-level-nodes {
    align-items: center;
}

.network-node {
    width: 210px;
    height: 96px;
    grid-template-columns: 1fr;
    grid-template-rows: auto auto auto;
    justify-items: center;
    align-content: center;
    gap: 0.28rem;
    border: 2px solid #0B5ED7;
    border-radius: 14px;
    background: linear-gradient(180deg, #FFFFFF, #F8FBFF);
    padding: 0.85rem;
    text-align: center;
    box-shadow: 0 16px 34px rgba(0, 71, 171, 0.12);
}

.network-node.is-root {
    width: 320px;
    height: 104px;
    border-color: var(--manik-primary);
    background: linear-gradient(135deg, #FFFFFF 0%, #EEF5FF 100%);
    box-shadow: 0 18px 38px rgba(0, 71, 171, 0.15);
}

.network-node span {
    width: 40px;
    height: 40px;
    grid-row: auto;
    margin: 0 auto 0.1rem;
    background: var(--manik-soft-pink);
    color: var(--manik-cta);
}

.network-node.is-root span {
    background: var(--manik-soft-pink);
    color: var(--manik-cta);
}

.network-node strong {
    width: 100%;
    color: var(--manik-dark);
    font-size: 0.95rem;
    line-height: 1.15;
    text-align: center;
}

.network-node small {
    width: 100%;
    color: #52657E !important;
    font-size: 0.76rem;
    text-align: center;
}

.network-empty {
    width: min(320px, 100%);
    min-width: 0;
    border: 1px solid #CFE0F7;
    border-radius: 14px;
    background: #FFFFFF;
    color: var(--manik-primary) !important;
    box-shadow: 0 12px 26px rgba(0, 71, 171, 0.08);
}

.registro-form input[readonly] {
    background: #F3F7FF;
    border-color: #CFE0F7;
    color: var(--manik-primary);
    cursor: not-allowed;
    font-weight: 800;
}

/* Organigrama ligado por patrocinador */
.network-tree-linked {
    display: grid;
    justify-items: center;
    gap: 1rem;
    min-width: 960px;
}

.network-org-chart,
.network-org-chart ul {
    margin: 0;
    padding: 0;
    list-style: none;
}

.network-org-chart {
    width: max-content;
    min-width: 100%;
    display: flex;
    justify-content: center;
    padding-top: 0.6rem;
}

.network-branch {
    position: relative;
    display: grid;
    justify-items: center;
    padding: 1.55rem 0.75rem 0;
}

.network-branch.is-root-branch {
    padding-top: 0;
}

.network-branch > ul {
    position: relative;
    display: flex;
    justify-content: center;
    align-items: flex-start;
    gap: 1.35rem;
    padding-top: 2.1rem;
}

.network-branch > ul::before {
    content: '';
    position: absolute;
    top: 1.05rem;
    left: 50%;
    width: 2px;
    height: 1.05rem;
    background: var(--manik-primary);
    transform: translateX(-50%);
}

.network-branch > ul > .network-branch::before {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    height: 2px;
    background: var(--manik-primary);
}

.network-branch > ul > .network-branch:first-child::before {
    left: 50%;
}

.network-branch > ul > .network-branch:last-child::before {
    right: 50%;
}

.network-branch > ul > .network-branch:only-child::before {
    display: none;
}

.network-branch > ul > .network-branch::after {
    content: '';
    position: absolute;
    top: 0;
    left: 50%;
    width: 2px;
    height: 1.55rem;
    background: var(--manik-primary);
    transform: translateX(-50%);
}

.network-branch.is-root-branch > .network-node::before,
.network-tree-linked .network-level::before,
.network-tree-linked .network-level:not(:first-child)::before,
.network-tree-linked .network-node::before {
    display: none;
}

.network-tree-linked .network-node {
    position: relative;
    z-index: 1;
}

.network-tree-linked .network-node small {
    white-space: nowrap;
}

.network-tree-linked .network-empty {
    margin-top: 1.2rem;
}

@media screen and (width < 760px) {
    .network-tree-linked {
        min-width: 760px;
    }

    .network-branch > ul {
        gap: 0.9rem;
    }
}

.registro-form select {
    width: 100%;
    border: 1px solid #cbd5e1;
    border-radius: 14px;
    outline: none;
    padding: 0.85rem 1rem;
    font-size: 1rem;
    background: #ffffff;
    color: #1f2937;
}

.registro-form select:focus {
    border-color: var(--manik-primary);
    box-shadow: 0 0 0 3px rgba(0, 71, 171, 0.12);
}

/* Activacion separada de la tienda */
.shop-activation-modal {
    display: flex;
    z-index: 1500;
}

.shop-activation-dialog {
    width: min(980px, 100%);
    border: 1px solid #CFE0F7;
    border-radius: 12px;
    padding: 1.5rem;
}

.shop-activation-heading {
    display: grid;
    gap: 0.35rem;
    margin-bottom: 1rem;
}

.shop-activation-heading > span {
    color: var(--manik-cta);
    font-size: 0.78rem;
    font-weight: 900;
    text-transform: uppercase;
}

.shop-activation-heading h2 {
    margin: 0;
    color: var(--manik-primary);
}

.shop-activation-heading p {
    max-width: 760px;
    color: #52657E;
    line-height: 1.5;
}

.activation-form {
    display: grid;
    gap: 1rem;
}

.activation-options {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 0.8rem;
}

.activation-option {
    min-height: 82px;
    display: grid;
    grid-template-columns: auto minmax(0, 1fr);
    align-items: center;
    gap: 0.65rem;
    border: 1px solid #D8E4F5;
    border-radius: 8px;
    background: #F8FBFF;
    cursor: pointer;
    padding: 0.85rem;
}

.activation-option:has(input:checked) {
    border-color: var(--manik-primary);
    background: #EEF6FF;
    box-shadow: 0 0 0 3px rgba(0, 71, 171, 0.1);
}

.activation-option input {
    accent-color: var(--manik-primary);
}

.activation-option span {
    color: var(--manik-dark);
    font-size: 0.92rem;
    font-weight: 800;
    line-height: 1.25;
}

.activation-option b {
    display: block;
    color: var(--manik-cta);
    font-size: 1.05rem;
}

.activation-products {
    display: grid;
    gap: 0.75rem;
    border: 1px solid #D8E4F5;
    border-radius: 8px;
    background: #F8FBFF;
    padding: 0.9rem;
}

.activation-products-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 1rem;
    color: var(--manik-dark);
    font-weight: 900;
}

.activation-products-header strong,
.activation-product-row b {
    color: var(--manik-cta);
}

.activation-products-list {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 0.55rem;
    max-height: 260px;
    overflow: auto;
    padding-right: 0.25rem;
}

.activation-product-row {
    display: grid;
    grid-template-columns: 44px minmax(0, 1fr) auto auto;
    align-items: center;
    gap: 0.35rem 0.7rem;
    border: 1px solid #E7EEF8;
    border-radius: 8px;
    background: #FFFFFF;
    padding: 0.65rem;
}

.activation-product-row img {
    width: 44px;
    height: 44px;
    grid-row: 1 / 3;
    object-fit: contain;
}

.activation-product-row span {
    overflow: hidden;
    color: var(--manik-dark);
    font-size: 0.88rem;
    font-weight: 900;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.activation-product-row small {
    grid-column: 2;
}

.activation-product-row .activation-product-controls {
    grid-column: 3;
    grid-row: 1 / 3;
}

.activation-product-row > b {
    grid-column: 4;
    grid-row: 1 / 3;
    min-width: 70px;
    text-align: right;
}

.activation-product-row small,
.activation-products small {
    color: #52657E;
    font-size: 0.78rem;
    font-weight: 800;
}

.activation-product-controls {
    display: grid;
    grid-template-columns: 30px 30px 30px;
    align-items: center;
    justify-items: center;
    gap: 0.25rem;
}

.activation-product-controls button {
    width: 30px;
    height: 30px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    border: 1px solid #D8E4F5;
    border-radius: 8px;
    background: #F7FAFF;
    color: var(--manik-primary);
    cursor: pointer;
}

.activation-product-controls strong {
    color: var(--manik-dark);
    font-weight: 900;
}

.activation-payment-actions button:disabled {
    opacity: 0.65;
    cursor: wait;
}

.activation-order-summary {
    display: grid;
    gap: 0.35rem;
    border: 1px solid #CFE0F7;
    border-radius: 8px;
    background: #F8FBFF;
    padding: 0.9rem 1rem;
}

.activation-order-summary > div {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 1rem;
    color: var(--manik-dark);
    font-weight: 900;
}

.activation-order-summary strong {
    color: var(--manik-cta);
    font-size: 1.35rem;
}

.activation-order-summary small {
    color: #52657E;
}

.activation-bank-box {
    margin: 0;
}

.activation-payment-actions {
    display: flex;
    flex-wrap: wrap;
    gap: 0.65rem;
}

.activation-payment-actions button {
    min-height: 46px;
}

.activation-pending-state {
    display: grid;
    grid-template-columns: auto minmax(0, 1fr) auto;
    align-items: center;
    gap: 0.9rem;
    border: 1px solid #F3D18A;
    border-radius: 8px;
    background: #FFF8E8;
    color: #7A4B00;
    padding: 1rem;
}

.activation-pending-state > i {
    font-size: 1.7rem;
}

.activation-pending-state > div {
    display: grid;
    gap: 0.2rem;
}

.activation-pending-actions {
    display: flex !important;
    flex-wrap: wrap;
    justify-content: flex-end;
    gap: 0.5rem !important;
}

.activation-pending-state span {
    font-size: 0.86rem;
}

.shop-layout.is-activation-locked,
.shop-header-actions.is-activation-locked {
    opacity: 0.35;
    pointer-events: none;
    user-select: none;
}

body.has-office-modal {
    overflow: hidden;
}

.activation-message {
    min-height: 1.1rem;
    font-size: 0.9rem !important;
    font-weight: 800;
}

.activation-message.is-ok {
    color: #287E65 !important;
}

.activation-message.is-error {
    color: #DC2626 !important;
}

.member-upgrade-panel {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 1rem;
    border: 1px solid var(--manik-border);
    border-left: 4px solid var(--manik-detail);
    border-radius: 10px;
    background: #FFFFFF;
    box-shadow: 0 12px 28px rgba(26, 26, 46, 0.06);
    padding: 1rem 1.1rem;
}

.member-upgrade-panel div {
    display: grid;
    gap: 0.2rem;
}

.member-upgrade-panel span {
    color: var(--manik-cta);
    font-size: 0.78rem;
    font-weight: 900;
    text-transform: uppercase;
}

.member-upgrade-panel strong {
    color: var(--manik-dark);
    font-family: var(--font-titulo);
}

.member-upgrade-panel button,
.primary-action {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 0.4rem;
    border: 0;
    border-radius: 999px;
    background: var(--manik-cta);
    color: var(--manik-white);
    cursor: pointer;
    font-weight: 900;
    padding: 0.82rem 1rem;
}

.modal-copy {
    color: #52657E;
    font-family: var(--font-texto);
    line-height: 1.55;
    margin-bottom: 1rem;
}

.modal-actions {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 0.7rem;
}

.modal-actions .ghost-action {
    margin-top: 0;
}

.registro-legal-box {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 0.8rem;
    border: 1px solid #CFE0F7;
    border-radius: 12px;
    background: #F7FAFF;
    color: var(--manik-primary);
    padding: 0.8rem 0.9rem;
}

.registro-legal-box strong {
    font-size: 0.9rem;
}

.registro-legal-box a,
.registro-privacy-link {
    color: var(--manik-primary);
    font-weight: 900;
    text-decoration: none;
}

.registro-privacy-link {
    display: inline-flex;
    justify-content: center;
    font-size: 0.9rem;
}

.registro-form .password-toggle,
.login-form .password-toggle {
    position: absolute;
    top: 50%;
    right: .7rem;
    display: inline-grid;
    place-items: center;
    width: 34px;
    height: 34px;
    border: 0;
    border-radius: 50%;
    background: transparent;
    color: #0758B7;
    cursor: pointer;
    font-size: 1.25rem;
    padding: 0;
    transform: translateY(-50%);
}

.registro-terms {
    grid-template-columns: 22px minmax(0, 1fr);
    align-items: start;
    gap: .65rem !important;
    color: #334155 !important;
    font-weight: 750 !important;
}

.registro-terms input {
    width: 18px;
    height: 18px;
    margin-top: .15rem;
    accent-color: var(--color-rosa);
}

.registro-terms a {
    color: var(--manik-primary);
    font-weight: 900;
    text-decoration: none;
}

@media screen and (width < 860px) {
    .login-access-grid {
        grid-template-columns: 1fr;
    }

    .login-modal__dialog--wide {
        width: min(560px, calc(100vw - 1rem));
        padding: 1.2rem;
    }
}

.commission-summary-grid {
    display: grid;
    grid-template-columns: repeat(4, minmax(0, 1fr));
    gap: 0.8rem;
    margin-bottom: 1rem;
}

.commission-summary-grid article,
.stats-global-grid article,
.stats-period-grid article,
.stats-rubros-grid article {
    border: 1px solid var(--manik-border);
    border-radius: 8px;
    background: #F7FAFF;
    padding: 0.9rem;
}

.commission-summary-grid span {
    display: block;
    color: var(--manik-primary);
    font-size: 0.8rem;
    font-weight: 900;
    text-transform: uppercase;
}

.commission-summary-grid strong {
    color: var(--manik-cta);
    font-family: var(--font-titulo);
    font-size: 1.45rem;
}

.stats-global-grid,
.stats-period-grid,
.stats-rubros-grid {
    display: grid;
    gap: 0.8rem;
    margin-bottom: 1rem;
}

.stats-global-grid {
    grid-template-columns: repeat(4, minmax(0, 1fr));
}

.stats-period-grid {
    grid-template-columns: repeat(4, minmax(0, 1fr));
}

.stats-rubros-grid {
    grid-template-columns: repeat(4, minmax(0, 1fr));
}

.stats-global-grid span,
.stats-period-grid span,
.stats-rubros-grid span {
    display: block;
    color: var(--manik-primary);
    font-size: 0.8rem;
    font-weight: 900;
    text-transform: uppercase;
}

.stats-global-grid strong,
.stats-period-grid strong,
.stats-rubros-grid strong {
    color: var(--manik-cta);
    font-family: var(--font-titulo);
    font-size: 1.55rem;
}

.stats-period-grid small,
.stats-rubros-grid small {
    display: block;
    color: #52657E;
    font-weight: 800;
    margin-top: 0.25rem;
}

.stats-rubros-grid article {
    border: 1px solid var(--manik-border);
    border-radius: 8px;
    background: #FFFFFF;
    padding: 0.9rem;
}

.stats-rubro-breakdown {
    border-top: 1px solid var(--manik-border);
    display: grid;
    gap: 0.45rem;
    margin-top: 0.75rem;
    padding-top: 0.75rem;
}

.stats-rubro-breakdown div {
    align-items: center;
    display: flex;
    justify-content: space-between;
    gap: 0.8rem;
}

.stats-rubro-breakdown span {
    color: #52657E;
    font-size: 0.72rem;
}

.stats-rubro-breakdown b {
    color: var(--manik-primary);
    font-size: 0.86rem;
}

.status-badge {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    border-radius: 999px;
    padding: 0.25rem 0.55rem;
    font-size: 0.78rem;
    font-weight: 900;
    text-transform: uppercase;
}

.status-pendiente {
    background: var(--manik-soft-pink);
    color: var(--manik-cta);
}

.status-pagada,
.status-procesado {
    background: var(--manik-soft-green);
    color: #287E65;
}

.status-rechazado {
    background: #FEE2E2;
    color: #B91C1C;
}

.status-cancelada,
.status-devuelta {
    background: #FFE4E6;
    color: #BE123C;
}

@media screen and (width < 760px) {
    .commission-summary-grid,
    .stats-global-grid,
    .stats-period-grid,
    .stats-rubros-grid {
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }
}

.network-node.is-not-qualified {
    border-color: #CBD5E1;
    background: linear-gradient(180deg, #FFFFFF, #F8FAFC);
}

.network-node.is-not-qualified span {
    background: #F1F5F9;
    color: #64748B;
}

.network-node.is-gencell,
.network-node.is-gencell-60 {
    border-color: var(--manik-primary);
}

.network-node.is-gencell span,
.network-node.is-gencell-60 span {
    background: var(--manik-soft-blue);
    color: var(--manik-primary);
}

.network-node.is-gencell-30 {
    border-color: var(--office-green, #00A86B);
}

.network-node.is-gencell-30 span {
    background: #DCFCE7;
    color: #047857;
}

.network-node.is-product {
    border-color: #7C3AED;
}

.network-node.is-product span {
    background: #F3E8FF;
    color: #6D28D9;
}

.network-node.is-client-evo {
    border-color: var(--manik-cta);
}

.network-node.is-client-evo span {
    background: var(--manik-soft-pink);
    color: var(--manik-cta);
}

@media screen and (width < 900px) {
    .activation-options {
        grid-template-columns: 1fr;
    }

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

/* Tienda en linea */
.shop-module {
    overflow: visible;
}

.shop-header {
    align-items: flex-start;
}

.shop-cart-pill {
    display: inline-flex;
    align-items: center;
    gap: 0.45rem;
    border: 1px solid #CFE0F7;
    border-radius: 999px;
    background: #F7FAFF;
    color: var(--manik-primary);
    font-size: 0.9rem;
    font-weight: 800;
    padding: 0.55rem 0.85rem;
    white-space: nowrap;
}

.shop-cart-pill i,
.shop-cart-pill strong {
    color: var(--manik-cta);
}

.shop-header-actions {
    display: flex;
    align-items: center;
    justify-content: flex-end;
    gap: 0.75rem;
    margin-left: auto;
}

.shop-history-link {
    display: inline-flex;
    align-items: center;
    gap: 0.4rem;
    color: var(--manik-primary);
    font-weight: 800;
    text-decoration: none;
    white-space: nowrap;
}

.shop-history-link:hover {
    color: var(--manik-cta);
}

.shop-history {
    margin-top: 2rem;
    scroll-margin-top: 1.5rem;
}

.shop-history-heading {
    display: flex;
    align-items: flex-end;
    justify-content: space-between;
    gap: 1rem;
    margin-bottom: 0.9rem;
}

.shop-history-heading span {
    color: var(--manik-cta);
    font-size: 0.82rem;
    font-weight: 800;
}

.shop-history-heading h3 {
    margin: 0.15rem 0 0;
    color: var(--manik-primary);
}

.shop-history-products {
    display: grid;
    gap: 0.25rem;
}

.shop-history-product {
    display: block;
}

.shop-history-product small {
    color: #52657e;
    white-space: nowrap;
}

.mini-pay-action {
    display: inline-flex;
    align-items: center;
    gap: 0.25rem;
    min-height: 30px;
    margin-left: 0.45rem;
    border: 0;
    border-radius: 999px;
    background: var(--manik-primary);
    color: #ffffff;
    cursor: pointer;
    font-size: 0.74rem;
    font-weight: 900;
    padding: 0.25rem 0.7rem;
}

.shop-history-actions {
    display: flex;
    flex-wrap: wrap;
    gap: 0.35rem;
    margin-top: 0.45rem;
}

.mini-pay-action.is-secondary {
    background: #0b63ce;
}

.mini-pay-action.is-danger {
    background: #e11d48;
}

.mini-pay-action:hover {
    background: var(--manik-cta);
}

.referral-copy-action {
    display: inline-flex;
    align-items: center;
    gap: 0.35rem;
    min-height: 34px;
    border: 0;
    border-radius: 999px;
    background: var(--manik-soft-blue);
    color: var(--manik-primary);
    cursor: pointer;
    font-size: 0.76rem;
    font-weight: 900;
    padding: 0.35rem 0.75rem;
    white-space: nowrap;
}

.referral-copy-action:hover {
    background: var(--manik-primary);
    color: #FFFFFF;
}

.muted-table-text {
    color: #64748B;
    font-size: 0.82rem;
    font-weight: 800;
    white-space: nowrap;
}

/* Inventario */
.inventory-module {
    overflow: visible;
}

.inventory-summary-grid {
    display: grid;
    grid-template-columns: repeat(6, minmax(0, 1fr));
    gap: 0.75rem;
    margin-bottom: 1.4rem;
}

.inventory-summary-grid article {
    min-width: 0;
    border: 1px solid var(--manik-border);
    border-top: 3px solid var(--manik-primary);
    border-radius: 8px;
    background: #fff;
    padding: 0.85rem;
}

.inventory-summary-grid article:nth-child(2),
.inventory-summary-grid article:nth-child(5) {
    border-top-color: var(--manik-cta);
}

.inventory-summary-grid article:nth-child(3),
.inventory-summary-grid article:nth-child(6) {
    border-top-color: var(--manik-detail);
}

.inventory-summary-grid span {
    display: block;
    color: #52657e;
    font-size: 0.72rem;
    font-weight: 800;
    text-transform: uppercase;
}

.inventory-summary-grid strong {
    display: block;
    color: var(--manik-cta);
    font-family: var(--font-titulo);
    font-size: 1.55rem;
    margin-top: 0.25rem;
}

.inventory-entry-section,
.inventory-movements-section {
    padding-top: 1rem;
}

.inventory-movements-section {
    margin-top: 1.5rem;
    border-top: 1px solid var(--manik-border);
}

.inventory-toolbar,
.inventory-entry-note {
    display: flex;
    align-items: flex-end;
    justify-content: space-between;
    gap: 1rem;
    margin-bottom: 0.9rem;
}

.inventory-toolbar span {
    color: var(--manik-cta);
    font-size: 0.8rem;
    font-weight: 800;
}

.inventory-toolbar h3 {
    margin: 0.15rem 0 0;
    color: var(--manik-primary);
}

.inventory-search {
    width: min(320px, 100%);
    display: flex;
    align-items: center;
    gap: 0.45rem;
    border: 1px solid var(--manik-border);
    border-radius: 8px;
    background: #fff;
    padding: 0 0.7rem;
}

.inventory-search input {
    width: 100%;
    min-height: 42px;
    border: 0;
    outline: 0;
    background: transparent;
}

.inventory-entry-note label {
    flex: 1;
}

.inventory-entry-note label span {
    display: block;
    color: #52657e;
    font-size: 0.78rem;
    font-weight: 800;
    margin-bottom: 0.35rem;
}

.inventory-entry-note input {
    width: 100%;
    min-height: 44px;
    border: 1px solid var(--manik-border);
    border-radius: 8px;
    padding: 0.7rem;
}

.inventory-entry-note button {
    min-height: 44px;
    display: inline-flex;
    align-items: center;
    gap: 0.4rem;
    border: 0;
    border-radius: 8px;
    background: var(--manik-primary);
    color: #fff;
    font-weight: 800;
    padding: 0.7rem 1rem;
}

.inventory-table {
    min-width: 1180px;
}

.inventory-product {
    min-width: 220px;
    display: flex;
    align-items: center;
    gap: 0.65rem;
}

.inventory-product img {
    width: 42px;
    height: 42px;
    flex: 0 0 auto;
    object-fit: contain;
}

.inventory-product span {
    display: grid;
    gap: 0.1rem;
}

.inventory-product small {
    color: #718096;
    font-size: 0.7rem;
}

.inventory-stock {
    display: inline-grid;
    min-width: 82px;
    gap: 0.1rem;
    font-weight: 900;
}

.affiliate-legacy-toggle {
    display: grid;
    grid-template-columns: 18px minmax(110px, 1fr);
    align-items: center;
    gap: 0.4rem;
    max-width: 180px;
    margin-bottom: 0.55rem;
    color: var(--manik-primary);
    font-size: 0.78rem;
    font-weight: 900;
    line-height: 1.12;
}

.affiliate-legacy-toggle input {
    width: 18px;
    height: 18px;
    accent-color: var(--manik-cta);
}

.affiliate-legacy-toggle input:disabled + span {
    opacity: 0.55;
}

.inventory-stock small {
    font-size: 0.68rem;
    white-space: nowrap;
}

.inventory-stock.is-ok {
    color: #16825d;
}

.inventory-stock.is-low {
    color: #d97706;
}

.inventory-stock.is-out {
    color: #dc2626;
}

.inventory-entry-input {
    width: 86px;
    min-height: 38px;
    border: 1px solid var(--manik-border);
    border-radius: 7px;
    text-align: center;
}

.inventory-adjust-control {
    display: inline-flex;
    align-items: center;
    gap: 0.4rem;
}

.inventory-adjust-control .icon-action {
    width: 38px;
    height: 38px;
}

.inventory-movement {
    display: inline-flex;
    border-radius: 999px;
    padding: 0.25rem 0.55rem;
    font-size: 0.72rem;
    font-weight: 900;
}

.inventory-movement.is-entry {
    background: #e6f7f0;
    color: #16825d;
}

.inventory-movement.is-exit {
    background: #ffe8f2;
    color: var(--manik-cta);
}

@media screen and (width < 1180px) {
    .inventory-summary-grid {
        grid-template-columns: repeat(3, minmax(0, 1fr));
    }
}

@media screen and (width < 720px) {
    .inventory-summary-grid {
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }

    .inventory-toolbar,
    .inventory-entry-note {
        align-items: stretch;
        flex-direction: column;
    }

    .inventory-search,
    .inventory-entry-note button {
        width: 100%;
    }
}

.shop-layout {
    display: grid;
    grid-template-columns: minmax(0, 1fr) 300px;
    align-items: start;
    gap: 1.2rem;
}

.shop-catalog {
    min-width: 0;
}

.shop-featured-grid {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 1rem;
}

.shop-product-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(190px, 1fr));
    gap: 1rem;
}

.shop-product {
    position: relative;
    min-width: 0;
    display: grid;
    gap: 0.85rem;
    border: 1px solid #D8E4F5;
    border-radius: 8px;
    background: linear-gradient(180deg, #FFFFFF 0%, #F8FBFF 100%);
    box-shadow: 0 12px 26px rgba(0, 71, 171, 0.08);
    padding: 1rem;
}

.shop-product-featured {
    grid-template-columns: minmax(150px, 44%) minmax(0, 1fr);
    align-items: center;
    min-height: 280px;
    border-color: #BFD6F5;
    background: linear-gradient(135deg, #FFFFFF 0%, #EEF5FF 100%);
}

.shop-badge {
    position: absolute;
    top: 0.85rem;
    left: 0.85rem;
    z-index: 1;
    border-radius: 999px;
    background: var(--manik-soft-pink);
    color: var(--manik-cta);
    font-size: 0.76rem;
    font-weight: 900;
    padding: 0.32rem 0.65rem;
}

.shop-product-media {
    width: 100%;
    height: 174px;
    display: flex;
    align-items: center;
    justify-content: center;
    border-radius: 8px;
    background: #FFFFFF;
    overflow: hidden;
}

.shop-product-featured .shop-product-media {
    height: 240px;
    background: rgba(255, 255, 255, 0.78);
}

.shop-product-media img {
    width: 100%;
    height: 100%;
    object-fit: contain;
    display: block;
}

.shop-product-info {
    display: grid;
    align-content: start;
    gap: 0.5rem;
    min-width: 0;
}

.shop-product-info small,
.shop-section-title span,
.shop-cart small {
    color: #52657E;
    font-size: 0.82rem;
    font-weight: 800;
}

.shop-product-info h3,
.shop-section-title h3,
.shop-cart h3 {
    color: var(--manik-primary);
    font-size: 1.05rem;
    font-weight: 900;
    line-height: 1.18;
}

.shop-product-featured .shop-product-info h3 {
    color: var(--manik-dark);
    font-size: 1.45rem;
}

.shop-product-info p {
    color: #52657E !important;
    font-size: 0.92rem !important;
    line-height: 1.45;
}

.shop-price {
    display: grid;
    gap: 0.15rem;
    border: 1px solid #E7EEF8;
    border-radius: 8px;
    background: #FFFFFF;
    padding: 0.65rem;
}

.shop-price span {
    color: #52657E;
    font-size: 0.76rem;
    font-weight: 900;
    text-transform: uppercase;
}

.shop-price strong {
    color: var(--manik-cta);
    font-size: 1.25rem;
    font-weight: 900;
}

.shop-price small {
    color: #287E65;
    font-size: 0.82rem;
    font-weight: 900;
}

.shop-product-info button,
.shop-checkout {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 0.35rem;
    width: 100%;
    border: 0;
    border-radius: 8px;
    background: var(--manik-cta);
    color: var(--manik-white);
    cursor: pointer;
    font-weight: 900;
    padding: 0.78rem 0.85rem;
}

.shop-product-info button:hover,
.shop-checkout:hover:not(:disabled) {
    filter: brightness(0.96);
}

.shop-section-title {
    display: flex;
    align-items: end;
    justify-content: space-between;
    gap: 1rem;
    margin: 1.45rem 0 0.85rem;
}

.shop-cart {
    position: sticky;
    top: 1rem;
    display: grid;
    grid-template-rows: auto minmax(0, 1fr) auto;
    gap: 0.9rem;
    max-height: calc(100dvh - 2rem);
    min-height: 0;
    border: 1px solid #D8E4F5;
    border-radius: 8px;
    background: #FFFFFF;
    box-shadow: 0 12px 26px rgba(26, 26, 46, 0.08);
    padding: 1rem;
    overflow: hidden;
}

.shop-cart h3 {
    display: flex;
    align-items: center;
    gap: 0.45rem;
}

.shop-cart h3 i {
    color: var(--manik-detail);
}

.shop-cart-items {
    display: grid;
    align-content: start;
    gap: 0.55rem;
    min-height: 0;
    overflow-y: auto;
    overscroll-behavior: contain;
    padding-right: 0.25rem;
    scrollbar-gutter: stable;
}

.shop-cart-footer {
    display: grid;
    gap: 0.65rem;
    min-height: 0;
    background: #FFFFFF;
}

.shop-cart-footer > small {
    display: block;
    line-height: 1.3;
}

.shop-empty {
    border: 1px dashed #CFE0F7;
    border-radius: 8px;
    background: #F7FAFF;
    color: #52657E !important;
    font-size: 0.9rem !important;
    padding: 0.85rem;
}

.shop-cart-row {
    display: grid;
    grid-template-columns: minmax(0, 1fr);
    align-items: start;
    gap: 0.75rem;
    border-bottom: 1px solid #E7EEF8;
    color: var(--manik-dark);
    font-size: 0.9rem;
    font-weight: 800;
    padding-bottom: 0.55rem;
}

.shop-cart-product {
    min-width: 0;
    display: grid;
    gap: 0.15rem;
}

.shop-cart-product span {
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.shop-cart-product small {
    color: #52657E;
    font-size: 0.78rem;
}

/* Scroll independiente en oficina virtual */
body.office-body {
    height: 100vh;
    min-height: 100vh;
    overflow: hidden;
}

.office-body .office-sidebar,
.office-body .office-main {
    height: 100vh;
    min-height: 0;
    overscroll-behavior: contain;
}

.office-body .office-sidebar {
    overflow-y: auto;
}

.office-body .office-main {
    overflow-x: hidden;
    overflow-y: auto;
}

.office-body .office-sidebar::-webkit-scrollbar,
.office-body .office-main::-webkit-scrollbar {
    width: 6px;
    height: 6px;
}

.office-body .office-sidebar::-webkit-scrollbar-thumb,
.office-body .office-main::-webkit-scrollbar-thumb {
    border-radius: 999px;
    background: rgba(0, 71, 171, 0.28);
}

@media screen and (width < 820px) {
    body.office-body {
        height: auto;
        min-height: 100vh;
        overflow: auto;
    }

    .office-body .office-sidebar,
    .office-body .office-main {
        height: auto;
        min-height: auto;
        overflow: visible;
    }
}

.shop-cart-controls {
    display: grid;
    grid-template-columns: 32px 32px 32px 32px;
    align-items: center;
    gap: 0.35rem;
}

.shop-cart-controls button {
    width: 32px;
    height: 32px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    border: 1px solid #D8E4F5;
    border-radius: 8px;
    background: #F7FAFF;
    color: var(--manik-primary);
    cursor: pointer;
}

.shop-cart-controls button.is-danger {
    background: #FEE2E2;
    border-color: #FECACA;
    color: #B91C1C;
}

.shop-cart-controls strong {
    color: var(--manik-dark);
    text-align: center;
}

.shop-cart-row b {
    color: var(--manik-cta);
    justify-self: end;
}

.shop-cart-row-promo {
    border-left: 3px solid var(--manik-cta);
    padding-left: 0.55rem;
    background: rgba(230, 0, 126, 0.045);
}

.shop-cart-row-promo .shop-cart-product small {
    color: var(--manik-cta);
    font-weight: 900;
}

.shop-cart-row-promo b {
    color: var(--manik-cta);
}

.shop-cart-controls-promo {
    grid-template-columns: 32px;
}

.shop-cart-total {
    display: flex;
    justify-content: space-between;
    align-items: center;
    border-top: 1px solid #E7EEF8;
    border-bottom: 1px solid #E7EEF8;
    padding: 0.75rem 0;
}

.shop-cart-total span {
    color: #52657E;
    font-weight: 900;
}

.shop-cart-total strong {
    color: var(--manik-cta);
    font-size: 1.25rem;
    font-weight: 900;
}

.shop-checkout:disabled {
    background: #B9C6D8;
    cursor: not-allowed;
    box-shadow: none;
}

@media screen and (width >= 1450px) {
    .shop-product-grid {
        grid-template-columns: repeat(4, minmax(0, 1fr));
    }
}

@media screen and (width < 1180px) {
    .shop-layout {
        grid-template-columns: 1fr;
    }

    .shop-cart {
        position: static;
        height: min(680px, calc(100dvh - 4rem));
        max-height: none;
        min-height: 480px;
    }
}

@media screen and (width < 900px) {
    .shop-featured-grid {
        grid-template-columns: 1fr;
    }

    .shop-product-featured {
        min-height: 0;
    }
}

@media screen and (width < 620px) {
    .shop-header,
    .shop-section-title {
        align-items: flex-start;
        flex-direction: column;
    }

    .shop-header-actions {
        width: 100%;
        justify-content: space-between;
        margin-left: 0;
    }

    .shop-product-featured {
        grid-template-columns: 1fr;
    }

    .shop-product-featured .shop-product-media {
        height: 220px;
    }

    .shop-product-grid {
        grid-template-columns: 1fr;
    }
}

/* Capa premium Manik Evolution */
body.office-body {
    background:
        linear-gradient(180deg, #F7FAFF 0%, #EEF4FB 46%, #F8FAFC 100%);
}

.office-body .office-sidebar {
    position: relative;
    background:
        linear-gradient(180deg, rgba(18, 27, 63, 0.96), rgba(13, 13, 41, 0.98) 54%, rgba(0, 71, 171, 0.94));
    border-right: 1px solid rgba(255, 255, 255, 0.10);
    box-shadow: 18px 0 40px rgba(18, 27, 63, 0.16);
}

.office-body .office-sidebar::before {
    content: '';
    position: absolute;
    inset: 0;
    pointer-events: none;
    background:
        linear-gradient(90deg, rgba(255, 255, 255, 0.08), transparent 18%),
        linear-gradient(180deg, rgba(91, 210, 182, 0.14), transparent 24%);
}

.office-sidebar img,
.office-sidebar nav {
    position: relative;
    z-index: 1;
}

.office-sidebar img {
    width: 150px;
    display: block;
    margin: 0 auto 2rem;
    filter: drop-shadow(0 12px 22px rgba(0, 0, 0, 0.18));
}

.office-sidebar button {
    position: relative;
    min-height: 44px;
    border: 1px solid transparent;
    border-radius: 10px;
    color: rgba(255, 255, 255, 0.88);
    transition: background 180ms ease, border-color 180ms ease, color 180ms ease, transform 180ms ease;
}

.office-sidebar button:hover,
.office-sidebar button.is-active {
    transform: translateX(2px);
    border-color: rgba(255, 255, 255, 0.14);
    background: rgba(255, 255, 255, 0.12);
    color: #FFFFFF;
}

.office-sidebar button:disabled {
    cursor: not-allowed;
    opacity: 0.42;
    transform: none;
}

.office-sidebar button.is-active::after {
    content: '';
    position: absolute;
    top: 10px;
    bottom: 10px;
    left: -1px;
    width: 3px;
    border-radius: 999px;
    background: var(--manik-detail);
    box-shadow: 0 0 18px rgba(91, 210, 182, 0.58);
}

.office-main {
    padding: 1.65rem;
}

.office-header,
.dashboard-hero {
    position: relative;
    overflow: hidden;
    border: 1px solid rgba(255, 255, 255, 0.14);
    border-radius: 12px;
    box-shadow: 0 20px 52px rgba(18, 27, 63, 0.16);
}

.office-header::after,
.dashboard-hero::after {
    content: '';
    position: absolute;
    inset: 0;
    pointer-events: none;
    background:
        linear-gradient(115deg, rgba(255, 255, 255, 0.14), transparent 32%),
        linear-gradient(270deg, rgba(91, 210, 182, 0.10), transparent 40%);
}

.office-header > *,
.dashboard-hero > * {
    position: relative;
    z-index: 1;
}

.office-header-actions {
    display: flex;
    align-items: center;
    gap: 0.75rem;
    flex-wrap: wrap;
}

.office-header-actions button {
    display: inline-flex;
    align-items: center;
    gap: 0.45rem;
}

.office-header-actions button.is-verified {
    background: #28A173;
}

.office-panel,
.finance-panel,
.finance-kpi,
.member-upgrade-panel,
.shop-cart,
.shop-product {
    border-color: rgba(207, 224, 247, 0.92);
    border-radius: 10px;
    background: rgba(255, 255, 255, 0.96);
    box-shadow:
        0 18px 42px rgba(18, 27, 63, 0.08),
        inset 0 1px 0 rgba(255, 255, 255, 0.72);
}

.finance-kpi {
    position: relative;
    overflow: hidden;
    transition: transform 180ms ease, box-shadow 180ms ease;
}

.finance-kpi::after {
    content: '';
    position: absolute;
    inset: 0;
    pointer-events: none;
    background: linear-gradient(125deg, rgba(255, 255, 255, 0.72), transparent 34%);
}

.finance-kpi:hover,
.shop-product:hover,
.finance-panel:hover {
    transform: translateY(-2px);
    box-shadow:
        0 24px 58px rgba(18, 27, 63, 0.12),
        inset 0 1px 0 rgba(255, 255, 255, 0.82);
}

.finance-kpi > *,
.shop-product > *,
.finance-panel > * {
    position: relative;
    z-index: 1;
}

.finance-kpi span,
.finance-panel h3,
.office-panel-header h2,
.shop-section-title h3 {
    letter-spacing: 0;
}

.finance-kpi strong,
.withdraw-amount strong,
.bonus-list strong,
.commission-summary-grid strong,
.stats-global-grid strong,
.stats-period-grid strong,
.stats-rubros-grid strong {
    text-shadow: 0 8px 20px rgba(232, 0, 110, 0.10);
}

.office-table-wrap {
    border: 1px solid #D8E4F5;
    border-radius: 10px;
    background: #FFFFFF;
    box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.76);
}

.office-table thead {
    background: #F3F7FF;
}

.office-table th {
    color: var(--manik-primary);
    font-size: 0.78rem;
    text-transform: uppercase;
}

.office-table tbody tr {
    transition: background 160ms ease;
}

.office-table tbody tr:hover {
    background: #F8FBFF;
}

.activation-option,
.activation-product-row,
.shop-empty,
.referral-link-box input,
.withdraw-form input,
.withdraw-form select,
.office-form input,
.office-form select {
    border-radius: 10px;
}

.activation-option,
.activation-product-row {
    box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.72);
}

.dashboard-hero button,
.office-header button,
.member-upgrade-panel button,
.primary-action,
.shop-checkout,
.withdraw-form button,
.referral-link-box button {
    transition: transform 160ms ease, box-shadow 160ms ease, filter 160ms ease;
}

.dashboard-hero button:hover,
.office-header button:hover,
.member-upgrade-panel button:hover,
.primary-action:hover,
.shop-checkout:not(:disabled):hover,
.withdraw-form button:hover,
.referral-link-box button:hover {
    transform: translateY(-1px);
    filter: saturate(1.04);
    box-shadow: 0 16px 32px rgba(232, 0, 110, 0.26);
}

.status-badge,
.pill {
    box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.52);
}

.network-node {
    border-radius: 10px;
    box-shadow: 0 18px 36px rgba(0, 71, 171, 0.12);
}

.shop-product-media {
    background:
        linear-gradient(180deg, rgba(255, 255, 255, 0.95), rgba(247, 250, 255, 0.96));
}

.shop-product-media img {
    filter: drop-shadow(0 18px 24px rgba(18, 27, 63, 0.14));
}

@media screen and (width < 820px) {
    .office-main {
        padding: 1rem;
    }

    .office-body .office-sidebar {
        box-shadow: 0 16px 34px rgba(18, 27, 63, 0.16);
    }
}

.account-module > p {
    max-width: 720px;
}

.account-form {
    margin-top: 1.2rem;
}

.account-verification-progress {
    display: grid;
    gap: 0.9rem;
    margin-top: 1rem;
    border: 1px solid #CFE0F7;
    border-radius: 10px;
    background: linear-gradient(180deg, #FFFFFF, #F7FAFF);
    padding: 1rem;
}

.account-progress-heading {
    display: grid;
    gap: 0.65rem;
}

.account-progress-heading > div:first-child {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 1rem;
}

.account-progress-heading span {
    color: #52657E;
    font-size: 0.82rem;
    font-weight: 900;
    text-transform: uppercase;
}

.account-progress-heading strong {
    color: var(--manik-cta);
    font-family: var(--font-titulo);
    font-size: 1.35rem;
}

.account-progress-track {
    height: 10px;
    overflow: hidden;
    border-radius: 999px;
    background: #DFE8F4;
}

.account-progress-track i {
    display: block;
    height: 100%;
    border-radius: inherit;
    background: linear-gradient(90deg, var(--manik-primary), var(--manik-detail), var(--manik-cta));
    transition: width 240ms ease;
}

.account-progress-sections {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 0.55rem;
}

.account-progress-sections span {
    display: flex;
    align-items: center;
    gap: 0.4rem;
    color: #52657E;
    font-size: 0.86rem;
    font-weight: 800;
}

.account-progress-sections span.is-complete {
    color: #18845F;
}

.account-progress-sections i {
    color: var(--manik-cta);
    font-size: 1rem;
}

.account-progress-sections span.is-complete i {
    color: #28A173;
}

.account-grid {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 0.9rem;
}

.account-profile-photo {
    display: grid;
    grid-template-columns: 112px minmax(0, 1fr);
    align-items: center;
    gap: 1rem;
    border: 1px solid #CFE0F7;
    border-radius: 10px;
    background: linear-gradient(180deg, #FFFFFF, #F8FBFF);
    padding: 1rem;
}

.account-beneficiaries {
    display: grid;
    gap: 0.85rem;
    border: 1px solid #CFE0F7;
    border-radius: 10px;
    background: linear-gradient(180deg, #FFFFFF, #F8FBFF);
    padding: 1rem;
}

.account-beneficiaries > div {
    display: grid;
    gap: 0.15rem;
}

.account-beneficiaries > div span {
    color: var(--manik-cta);
    font-size: 0.78rem;
    font-weight: 900;
    text-transform: uppercase;
}

.account-beneficiaries > div strong {
    color: var(--manik-primary);
    font-family: var(--font-titulo);
    font-size: 1.1rem;
}

.account-beneficiaries p {
    color: #52657E !important;
    font-size: 0.92rem !important;
    line-height: 1.45;
}

.beneficiary-grid {
    display: grid;
    grid-template-columns: minmax(0, 1fr) 110px;
    gap: 0.75rem;
}

.profile-photo-preview {
    width: 96px;
    height: 96px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    overflow: hidden;
    border: 2px solid #DDEBFF;
    border-radius: 50%;
    background: var(--manik-soft-pink);
    color: var(--manik-cta);
    font-weight: 900;
}

.profile-photo-preview img,
.profile-avatar,
.network-node .node-photo img {
    width: 100%;
    height: 100%;
    object-fit: cover;
}

.profile-avatar {
    width: 36px;
    height: 36px;
    display: inline-block;
    border-radius: 50%;
    flex: 0 0 auto;
}

.network-node .node-photo {
    overflow: hidden;
    padding: 0;
}

.account-form .primary-action {
    width: fit-content;
    min-width: 220px;
}

.office-form small.required-field-label {
    margin-left: auto;
    color: var(--manik-cta) !important;
    font-size: 0.72rem;
    font-weight: 800 !important;
}

.account-grid > label > span {
    display: flex;
    align-items: center;
    gap: 0.5rem;
}

.account-form-actions {
    display: flex;
    flex-wrap: wrap;
    gap: 0.75rem;
}

.account-form-actions .ghost-action {
    width: auto;
    min-width: 220px;
    margin: 0;
}

@media screen and (width < 760px) {
    .account-grid,
    .account-profile-photo,
    .beneficiary-grid {
        grid-template-columns: 1fr;
    }

    .account-progress-sections {
        grid-template-columns: 1fr;
    }

    .account-form .primary-action {
        width: 100%;
    }

    .account-form-actions,
    .account-form-actions .ghost-action {
        width: 100%;
    }

    .account-form-actions {
        display: grid;
        grid-template-columns: 1fr;
        padding-bottom: max(1rem, env(safe-area-inset-bottom));
    }

    .account-form-actions button {
        min-height: 52px;
        white-space: normal;
        line-height: 1.2;
    }

    .account-beneficiaries {
        padding: .85rem;
    }
}

/* Landing premium pre-login */
body.landing-premium {
    background: #F6F9FC;
    color: #111827;
}

.landing-premium .header,
.landing-premium .header_desktop {
    background: var(--color-detalles);
    backdrop-filter: blur(18px);
    border-bottom: 0;
    box-shadow: 0 14px 40px rgba(11, 26, 61, 0.12);
}

.landing-premium .nav_link_desktop,
.landing-premium .nav_link {
    font-weight: 700;
}

.landing-premium .nav_contacto .btn-login,
.landing-premium .login .btn-login,
.landing-premium .btn-login {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 0.35rem;
    border: 0;
    border-radius: 999px;
    background: #E8006E;
    color: #FFFFFF;
    cursor: pointer;
    font-family: var(--font-texto);
    font-weight: 900;
    padding: 0.8rem 1.15rem;
    box-shadow: 0 16px 32px rgba(232, 0, 110, 0.24);
}

.landing-premium .nav_logo img,
.landing-premium .nav_logo_desktop img {
    filter: drop-shadow(0 12px 18px rgba(0, 0, 0, 0.18));
}

.landing-shell {
    width: min(1180px, calc(100% - 2rem));
    margin-inline: auto;
}

.landing-hero {
    position: relative;
    min-height: 100vh;
    height: auto;
    display: flex;
    align-items: center;
    overflow: hidden;
    padding: 8rem 0 4.5rem;
    background: #0B1A3D;
}

.landing-gencell-cover {
    min-height: 760px;
    padding: 5.5rem 0;
}

.landing-hero .video-inicio {
    position: absolute;
    inset: 0;
    z-index: 0;
    opacity: 0.34;
}

.landing-hero__shade {
    position: absolute;
    inset: 0;
    z-index: 1;
    background:
        linear-gradient(90deg, rgba(5, 12, 31, 0.96) 0%, rgba(11, 26, 61, 0.84) 42%, rgba(0, 71, 171, 0.34) 100%),
        radial-gradient(circle at 74% 42%, rgba(91, 210, 182, 0.32), transparent 32%);
}

.landing-hero__grid {
    position: relative;
    z-index: 2;
    display: grid;
    grid-template-columns: minmax(0, 0.9fr) minmax(360px, 1.1fr);
    align-items: center;
    gap: 2.5rem;
}

.landing-hero__copy {
    display: grid;
    gap: 1.2rem;
}

.landing-kicker {
    width: fit-content;
    display: inline-flex;
    align-items: center;
    gap: 0.45rem;
    border: 1px solid rgba(91, 210, 182, 0.38);
    border-radius: 999px;
    background: rgba(91, 210, 182, 0.14);
    color: #5BD2B6;
    font-family: var(--font-texto);
    font-size: 0.78rem;
    font-weight: 900;
    letter-spacing: 0;
    padding: 0.48rem 0.75rem;
    text-transform: uppercase;
}

.landing-kicker::before {
    content: '';
    width: 7px;
    height: 7px;
    border-radius: 50%;
    background: #5BD2B6;
}

.landing-hero h1,
.section-copy h2,
.section-heading h2 {
    color: #FFFFFF;
    font-family: var(--font-titulo);
    font-weight: 900;
    letter-spacing: 0;
    line-height: 1.02;
}

.landing-hero h1 {
    max-width: 640px;
    font-size: clamp(3rem, 8vw, 6.8rem);
}

.landing-hero p,
.section-copy p,
.section-heading p {
    color: rgba(255, 255, 255, 0.76);
    font-size: 1.05rem;
    line-height: 1.65;
}

.landing-actions {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 0.85rem;
}

.landing-premium .btn-productos,
.landing-premium .btn-distribuidor,
.landing-primary-button {
    width: auto;
    min-width: 180px;
    max-width: none;
    border-radius: 999px;
    font-size: 0.95rem;
    padding: 0.95rem 1.2rem;
}

.landing-premium .btn-productos,
.landing-primary-button {
    background: #E8006E;
    color: #FFFFFF;
    box-shadow: 0 18px 42px rgba(232, 0, 110, 0.28);
}

.landing-premium .btn-distribuidor {
    border: 1px solid rgba(255, 255, 255, 0.38);
    background: rgba(255, 255, 255, 0.08);
    color: #FFFFFF;
}

.landing-proof {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 0.7rem;
    margin-top: 0.5rem;
}

.landing-proof article {
    border: 1px solid rgba(255, 255, 255, 0.14);
    border-radius: 10px;
    background: rgba(255, 255, 255, 0.08);
    padding: 0.9rem;
}

.landing-proof strong {
    display: block;
    color: #FFFFFF;
    font-family: var(--font-titulo);
    font-size: 1.55rem;
    font-weight: 900;
}

.landing-proof span {
    color: rgba(255, 255, 255, 0.7);
    font-family: var(--font-texto);
    font-size: 0.82rem;
    font-weight: 700;
}

.gencell-stage {
    position: relative;
    min-height: 620px;
    display: flex;
    align-items: center;
    justify-content: center;
}

.gencell-stage__halo {
    position: absolute;
    width: min(560px, 90%);
    aspect-ratio: 1;
    border-radius: 50%;
    background:
        radial-gradient(circle, rgba(255, 255, 255, 0.34), rgba(91, 210, 182, 0.18) 38%, rgba(232, 0, 110, 0.12) 62%, transparent 72%);
    filter: blur(3px);
}

.gencell-stage img {
    position: relative;
    z-index: 1;
    object-fit: contain;
    filter: drop-shadow(0 34px 36px rgba(0, 0, 0, 0.38));
}

.gencell-stage__main {
    width: min(470px, 72%);
}

.gencell-stage__support {
    position: absolute !important;
    right: 2%;
    bottom: 8%;
    width: min(280px, 42%);
}

.gencell-stage__badge {
    position: absolute;
    z-index: 3;
    left: 3%;
    bottom: 15%;
    border: 1px solid rgba(255, 255, 255, 0.18);
    border-radius: 10px;
    background: rgba(255, 255, 255, 0.94);
    box-shadow: 0 24px 54px rgba(11, 26, 61, 0.24);
    padding: 0.9rem 1rem;
}

.gencell-stage__badge span {
    display: block;
    color: #E8006E;
    font-family: var(--font-texto);
    font-size: 0.76rem;
    font-weight: 900;
    text-transform: uppercase;
}

.gencell-stage__badge strong {
    color: #0B1A3D;
    font-family: var(--font-titulo);
    font-size: 1.05rem;
}

.landing-band {
    padding: 6rem 0;
}

.gencell-spotlight {
    background: linear-gradient(180deg, #FFFFFF 0%, #F3F8FF 100%);
}

.gencell-spotlight__grid,
.business-grid,
.faq-grid {
    display: grid;
    grid-template-columns: minmax(0, 1fr) minmax(0, 0.92fr);
    align-items: center;
    gap: 2rem;
}

.spotlight-products {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 1rem;
}

.spotlight-products article,
.product-showcase__card,
.business-steps article,
.value-grid article,
.testimonial-grid article,
.faq-list article {
    border: 1px solid #D7E5F7;
    border-radius: 10px;
    background: #FFFFFF;
    box-shadow: 0 22px 54px rgba(11, 26, 61, 0.08);
}

.spotlight-products article {
    min-height: 370px;
    display: grid;
    align-content: end;
    justify-items: center;
    gap: 0.5rem;
    padding: 1.2rem;
}

.spotlight-products article.is-featured {
    transform: translateY(-1rem);
    border-color: rgba(232, 0, 110, 0.32);
    box-shadow: 0 28px 62px rgba(232, 0, 110, 0.12);
}

.spotlight-products img {
    width: 100%;
    height: 250px;
    object-fit: contain;
    filter: drop-shadow(0 22px 24px rgba(11, 26, 61, 0.16));
}

.spotlight-products span {
    color: #52657E;
    font-family: var(--font-texto);
    font-weight: 900;
}

.spotlight-products strong {
    color: #E8006E;
    font-family: var(--font-titulo);
    font-size: 1.6rem;
    font-weight: 900;
}

.gencell-spotlight .section-copy h2,
.product-line .section-heading h2,
.why-section .section-heading h2,
.faq-section .section-copy h2 {
    color: #0B1A3D;
}

.gencell-spotlight .section-copy p,
.product-line .section-heading p,
.why-section .section-heading p,
.faq-section .section-copy p {
    color: #52657E;
}

.premium-list {
    display: grid;
    gap: 0.7rem;
    margin: 1.2rem 0;
}

.premium-list li {
    display: flex;
    align-items: flex-start;
    gap: 0.55rem;
    color: #263B58;
    font-family: var(--font-texto);
    font-weight: 800;
    line-height: 1.4;
}

.premium-list i {
    color: #28A173;
    margin-top: 0.1rem;
}

.product-line,
.faq-section {
    background: #F6F9FC;
}

.section-heading {
    max-width: 760px;
    display: grid;
    gap: 1rem;
    margin: 0 auto 2rem;
    text-align: center;
}

.section-heading .landing-kicker {
    margin-inline: auto;
}

.product-showcase {
    display: grid;
    grid-template-columns: 1.15fr repeat(2, minmax(0, 0.85fr));
    gap: 1rem;
}

.product-showcase__card {
    min-height: 260px;
    display: grid;
    align-content: space-between;
    gap: 1rem;
    padding: 1rem;
}

.product-showcase__card--hero {
    grid-row: span 2;
    background: linear-gradient(145deg, #FFFFFF 0%, #EAF3FF 100%);
}

.product-showcase__card img {
    width: 100%;
    height: 170px;
    object-fit: contain;
    filter: drop-shadow(0 18px 24px rgba(11, 26, 61, 0.14));
}

.product-showcase__card--hero img {
    height: 360px;
}

.product-showcase__card span,
.business-steps span {
    color: #E8006E;
    font-family: var(--font-texto);
    font-size: 0.78rem;
    font-weight: 900;
    text-transform: uppercase;
}

.product-showcase__card h3,
.business-steps h3,
.value-grid h3,
.faq-list h3 {
    color: #0B1A3D;
    font-family: var(--font-titulo);
    font-size: 1.2rem;
    font-weight: 900;
}

.product-showcase__card p,
.business-steps p,
.value-grid p,
.testimonial-grid p,
.faq-list p {
    color: #52657E;
    font-size: 0.95rem;
    line-height: 1.55;
}

.business-section {
    background:
        linear-gradient(135deg, rgba(11, 26, 61, 0.96), rgba(0, 71, 171, 0.92)),
        url('../img/fondo productos 2.jpeg') center / cover;
}

.business-steps {
    display: grid;
    gap: 1rem;
}

.business-steps article {
    background: rgba(255, 255, 255, 0.96);
    padding: 1.1rem;
}

.why-section {
    background: #FFFFFF;
}

.value-grid,
.testimonial-grid {
    display: grid;
    grid-template-columns: repeat(4, minmax(0, 1fr));
    gap: 1rem;
}

.value-grid article {
    padding: 1.15rem;
}

.value-grid i {
    width: 46px;
    height: 46px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    border-radius: 10px;
    background: #EAF7F4;
    color: #28A173;
    font-size: 1.45rem;
    margin-bottom: 1rem;
}

.testimonials-section {
    background: linear-gradient(180deg, #0B1A3D 0%, #10285C 100%);
}

.testimonial-grid {
    grid-template-columns: repeat(3, minmax(0, 1fr));
}

.testimonial-grid article {
    background: rgba(255, 255, 255, 0.96);
    padding: 1.2rem;
}

.testimonial-grid .estrellas {
    color: #E8006E;
    margin-bottom: 0.75rem;
}

.testimonial-grid strong {
    display: block;
    color: #0B1A3D;
    font-family: var(--font-titulo);
    margin-top: 1rem;
}

.faq-list {
    display: grid;
    gap: 1rem;
}

.faq-list article {
    padding: 1rem;
}

.faq-list h3 span {
    color: #E8006E;
}

@media screen and (width < 1020px) {
    .landing-hero__grid,
    .gencell-spotlight__grid,
    .business-grid,
    .faq-grid {
        grid-template-columns: 1fr;
    }

    .landing-hero {
        padding-top: 7rem;
    }

    .gencell-stage {
        min-height: 460px;
        order: -1;
    }

    .product-showcase,
    .value-grid,
    .testimonial-grid {
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }
}

@media screen and (width < 720px) {
    .landing-hero {
        padding-top: 7rem;
    }

    .landing-hero h1 {
        font-size: clamp(2.65rem, 14vw, 4rem);
    }

    .landing-proof,
    .spotlight-products,
    .product-showcase,
    .value-grid,
    .testimonial-grid {
        grid-template-columns: 1fr;
    }

    .spotlight-products article.is-featured {
        transform: none;
    }

    .gencell-stage {
        min-height: 390px;
    }

    .gencell-stage__main {
        width: min(350px, 76%);
    }

    .gencell-stage__support {
        right: 0;
        bottom: 4%;
        width: min(190px, 42%);
    }

    .gencell-stage__badge {
        left: 0;
        bottom: 6%;
    }

    .landing-actions .btn-productos,
    .landing-actions .btn-distribuidor,
    .landing-actions .landing-primary-button {
        width: 100%;
    }

    .product-showcase__card--hero {
        grid-row: auto;
    }

    .product-showcase__card--hero img {
        height: 260px;
    }
}

.landing-premium .inicio:not(.landing-hero) .btn-productos,
.landing-premium .inicio:not(.landing-hero) .btn-distribuidor {
    width: 100%;
    max-width: 300px;
    padding: 15px 18px;
    font-size: clamp(.5rem, .5rem + 2vw, 1.2rem);
}

.landing-premium .inicio:not(.landing-hero) .btn-productos {
    background-color: var(--color-rosa);
    color: var(--color-blanco);
    box-shadow: 0 15px 40px #db048150;
}

.landing-premium .inicio:not(.landing-hero) .btn-distribuidor {
    border: 1px solid var(--color-blanco);
    background-color: transparent;
    color: var(--color-blanco);
}

.finance-kpi .kpi-status.is-active {
    background: #e9f8f1;
    color: #00845f;
}

.office-switch {
    display: inline-flex;
    align-items: center;
    gap: 0.45rem;
    color: var(--manik-primary);
    cursor: pointer;
    font-size: 0.82rem;
    font-weight: 800;
    max-width: 130px;
    white-space: normal;
}

.office-switch-group {
    display: grid;
    gap: 8px;
    min-width: 190px;
}

.office-switch input {
    width: 18px;
    height: 18px;
    flex: 0 0 auto;
    accent-color: var(--manik-cta);
    cursor: pointer;
}

.office-switch span {
    line-height: 1.15;
}

.office-switch input:disabled,
.office-switch input:disabled + span {
    cursor: not-allowed;
    opacity: 0.5;
}

.office-actions {
    align-items: center;
    display: flex;
    gap: 0.4rem;
}

.office-actions .icon-action {
    width: 38px;
    height: 38px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    border: 0;
    border-radius: 10px;
    background: var(--manik-primary);
    color: #FFFFFF;
    cursor: pointer;
    font-size: 1rem;
    padding: 0;
}

.office-actions .icon-action.is-danger {
    background: #E11D2E;
}

.office-actions .icon-action:disabled {
    cursor: not-allowed;
    opacity: 0.45;
}

.network-node.is-draggable {
    cursor: grab;
    transition: transform 160ms ease, box-shadow 160ms ease, outline-color 160ms ease;
}

.network-node.is-draggable:active,
.network-node.is-dragging {
    cursor: grabbing;
}

.network-node.is-dragging {
    opacity: 0.58;
    transform: scale(0.98);
}

.network-node.is-drop-target {
    outline: 3px solid var(--manik-cta);
    outline-offset: 7px;
    transform: translateY(-2px);
    box-shadow: 0 22px 46px rgba(232, 0, 110, 0.18);
}

.network-contact-card {
    position: absolute;
    left: 50%;
    bottom: calc(100% + 12px);
    z-index: 20;
    width: 270px;
    display: grid;
    gap: 0;
    border: 1px solid #CFE0F7;
    border-radius: 12px;
    background: #FFFFFF;
    box-shadow: 0 22px 46px rgba(18, 27, 63, 0.18);
    opacity: 0;
    padding: 0.8rem;
    pointer-events: none;
    text-align: left;
    transform: translateX(-50%) translateY(6px);
    transition: opacity 160ms ease, transform 160ms ease, visibility 160ms ease;
    visibility: hidden;
}

.network-contact-card::after {
    content: '';
    position: absolute;
    left: 50%;
    bottom: -7px;
    width: 14px;
    height: 14px;
    border-right: 1px solid #CFE0F7;
    border-bottom: 1px solid #CFE0F7;
    background: #FFFFFF;
    transform: translateX(-50%) rotate(45deg);
}

.network-node:hover .network-contact-card,
.network-node:focus-within .network-contact-card,
.network-node.is-contact-open .network-contact-card {
    opacity: 1;
    transform: translateX(-50%) translateY(0);
    visibility: visible;
}

.network-node[data-can-operate="1"] {
    cursor: pointer;
}

.operator-return {
    background: #28A173 !important;
}

body.office-body .office-sidebar button.operator-return {
    min-height: 40px;
    margin-bottom: 0.35rem;
    border-radius: 8px;
    background: #28A173 !important;
    color: #FFFFFF !important;
    padding: 0.65rem 0.9rem;
    box-shadow: 0 8px 18px rgba(40, 161, 115, 0.2);
}

body.office-body .office-sidebar button.operator-return:hover,
body.office-body .office-sidebar button.operator-return:focus-visible {
    background: #1E8B62 !important;
    color: #FFFFFF !important;
}

.user-sponsor-field {
    position: relative;
}

.searchable-options {
    position: absolute;
    top: calc(100% - 1.2rem);
    left: 0;
    right: 0;
    z-index: 60;
    max-height: 240px;
    display: none;
    overflow-y: auto;
    border: 1px solid #CFE0F7;
    border-radius: 8px;
    background: #FFFFFF;
    box-shadow: 0 18px 38px rgba(18, 27, 63, 0.18);
    padding: 0.35rem;
}

.searchable-options.is-open {
    display: grid;
}

.searchable-options button {
    width: 100%;
    display: grid;
    gap: 0.12rem;
    border: 0;
    border-radius: 6px;
    background: transparent;
    color: var(--manik-dark);
    cursor: pointer;
    padding: 0.65rem 0.75rem;
    text-align: left;
}

.searchable-options button:hover,
.searchable-options button:focus-visible {
    background: var(--manik-soft-blue);
}

.searchable-options button strong,
.searchable-options button small {
    overflow-wrap: anywhere;
}

.searchable-options button small {
    color: #52657E;
}

.searchable-options-empty {
    color: #64748B;
    padding: 0.75rem;
}

.network-contact-card div {
    display: grid;
    gap: 0.12rem;
    border-bottom: 1px solid #E5EEF9;
    padding: 0.42rem 0;
}

.network-contact-card div:first-child {
    padding-top: 0;
}

.network-contact-card div:last-child {
    border-bottom: 0;
    padding-bottom: 0;
}

.network-node .network-contact-card span {
    width: auto;
    height: auto;
    display: block;
    grid-row: auto;
    margin: 0;
    border-radius: 0;
    background: transparent;
    color: #52657E;
    font-size: 0.68rem;
    font-weight: 900;
    letter-spacing: 0;
    line-height: 1.2;
    text-transform: uppercase;
}

.network-node .network-contact-card strong {
    width: 100%;
    color: var(--manik-dark);
    font-family: var(--font-texto);
    font-size: 0.86rem;
    font-weight: 800;
    line-height: 1.25;
    overflow-wrap: anywhere;
    text-align: left;
    white-space: normal;
}

.network-search-bar {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 0.7rem;
    margin: 1rem 0 0.3rem;
}

.network-search-bar label {
    width: min(520px, 100%);
    display: flex;
    align-items: center;
    gap: 0.55rem;
    border: 1px solid #CFE0F7;
    border-radius: 10px;
    background: #FFFFFF;
    color: var(--manik-primary);
    padding: 0 0.85rem;
}

.network-search-bar input {
    width: 100%;
    min-height: 46px;
    border: 0;
    outline: 0;
    background: transparent;
    color: var(--manik-dark);
    font: inherit;
}

.network-search-bar button {
    min-height: 46px;
    border: 0;
    border-radius: 10px;
    background: var(--manik-primary);
    color: #FFFFFF;
    cursor: pointer;
    font-weight: 900;
    padding: 0 1rem;
}

.network-search-bar small {
    width: 100%;
    color: #52657E;
    font-weight: 800;
}

.network-tree-linked .network-node {
    width: 78px;
    height: 78px;
    display: flex;
    align-items: center;
    justify-content: center;
    border: 0;
    border-radius: 18px;
    background: #CBD5E1;
    padding: 0;
    text-align: center;
    box-shadow: 0 14px 30px rgba(15, 23, 42, 0.12);
}

.network-tree-linked .network-node.is-root {
    width: 86px;
    height: 86px;
}

.network-tree-linked .network-node > strong,
.network-tree-linked .network-node > small {
    position: absolute;
    width: 1px;
    height: 1px;
    overflow: hidden;
    clip: rect(0 0 0 0);
    clip-path: inset(50%);
    white-space: nowrap;
}

.network-tree-linked .network-node > span {
    width: 58px;
    height: 58px;
    margin: 0;
    border: 4px solid rgba(255, 255, 255, 0.78);
    background: rgba(255, 255, 255, 0.92);
    color: var(--manik-primary);
    box-shadow: inset 0 0 0 1px rgba(255, 255, 255, 0.4);
}

.network-tree-linked .network-node.is-root > span {
    width: 64px;
    height: 64px;
}

.network-tree-linked .network-node.is-gencell,
.network-tree-linked .network-node.is-gencell-60 {
    background: linear-gradient(135deg, var(--manik-primary), #0B77E3);
}

.network-tree-linked .network-node.is-gencell-30 {
    background: linear-gradient(135deg, var(--office-green, #00A86B), #34D399);
}

.network-tree-linked .network-node.is-product {
    background: linear-gradient(135deg, #7C3AED, #A855F7);
}

.network-tree-linked .network-node.is-client-evo {
    background: linear-gradient(135deg, var(--manik-cta), #FF4B9D);
}

.network-tree-linked .network-node.is-not-qualified {
    background: linear-gradient(135deg, #CBD5E1, #94A3B8);
}

.network-tree-linked .network-node.is-search-hit {
    outline: 4px solid var(--manik-cta);
    outline-offset: 7px;
    box-shadow: 0 0 0 10px rgba(232, 0, 110, 0.12), 0 22px 46px rgba(18, 27, 63, 0.2);
}

.network-tree-linked .network-contact-card {
    bottom: calc(100% + 16px);
}

/* Oficina virtual responsive: tablet y telefono */
@media screen and (width < 1100px) and (width >= 820px) {
    .office-body {
        grid-template-columns: 220px minmax(0, 1fr);
    }

    .office-sidebar {
        padding: 1.1rem 0.85rem;
    }

    .office-sidebar img {
        width: 120px;
        margin-bottom: 1.35rem;
    }

    .office-sidebar button {
        padding: 0.8rem;
    }

    .office-main {
        padding: 1.15rem;
    }

    .finance-kpis,
    .commission-summary-grid,
    .stats-global-grid,
    .stats-period-grid,
    .stats-rubros-grid {
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }

    .activation-options {
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }

    .activation-option:last-child {
        grid-column: 1 / -1;
    }
}

@media screen and (width < 820px) {
    body.office-body {
        display: block;
        width: 100%;
        overflow-x: hidden;
    }

    .office-body .office-sidebar {
        position: sticky;
        top: 0;
        z-index: 100;
        width: 100%;
        min-height: 0;
        display: grid;
        grid-template-columns: 56px minmax(0, 1fr);
        align-items: center;
        gap: 0.65rem;
        overflow: hidden;
        padding: 0.6rem 0.75rem;
        box-shadow: 0 10px 28px rgba(18, 27, 63, 0.2);
    }

    .office-sidebar img {
        width: 52px;
        max-height: 46px;
        object-fit: contain;
        margin: 0;
    }

    .office-sidebar nav {
        min-width: 0;
        display: flex;
        gap: 0.4rem;
        overflow-x: auto;
        overscroll-behavior-x: contain;
        scrollbar-width: none;
        padding: 0.15rem 0 0.3rem;
        scroll-snap-type: x proximity;
    }

    .office-sidebar nav::-webkit-scrollbar {
        display: none;
    }

    .office-sidebar button {
        min-width: max-content;
        min-height: 42px;
        flex: 0 0 auto;
        gap: 0.4rem;
        border-radius: 8px;
        padding: 0.65rem 0.75rem;
        font-size: 0.84rem;
        white-space: nowrap;
        scroll-snap-align: start;
    }

    .office-sidebar button:hover,
    .office-sidebar button.is-active {
        transform: none;
    }

    .office-sidebar button.is-active::after {
        inset: auto 10px 2px;
        width: auto;
        height: 3px;
        border-radius: 999px;
    }

    .office-main {
        width: 100%;
        min-width: 0;
        padding: 0.85rem;
    }

    .office-header {
        gap: 0.75rem;
        border-radius: 10px;
        padding: 0.9rem;
    }

    .office-header h1 {
        font-size: 1.3rem;
        overflow-wrap: anywhere;
    }

    .office-header-actions {
        width: 100%;
        display: grid;
        grid-template-columns: repeat(2, minmax(0, 1fr));
        gap: 0.55rem;
    }

    .office-header-actions button {
        width: 100%;
        min-width: 0;
        min-height: 44px;
        justify-content: center;
        padding: 0.7rem;
        white-space: normal;
    }

    .dashboard-module.dashboard-finance {
        gap: 0.85rem;
    }

    .dashboard-hero,
    .member-upgrade-panel {
        align-items: stretch;
        flex-direction: column;
    }

    .dashboard-hero,
    .finance-panel,
    .office-panel {
        padding: 1rem;
    }

    .dashboard-hero h2 {
        font-size: 1.55rem;
        overflow-wrap: anywhere;
    }

    .dashboard-hero button,
    .member-upgrade-panel button {
        width: 100%;
        min-height: 44px;
    }

    .activation-options {
        grid-template-columns: 1fr;
    }

    .activation-option:last-child {
        grid-column: auto;
    }

    .activation-option {
        min-height: 70px;
    }

    .activation-products-header {
        align-items: flex-start;
        flex-direction: column;
    }

    .activation-product-row {
        grid-template-columns: 44px minmax(0, 1fr) auto;
        gap: 0.45rem 0.7rem;
    }

    .activation-product-row img {
        grid-column: 1;
        grid-row: 1 / 4;
    }

    .activation-product-row > span,
    .activation-product-row > small {
        grid-column: 2;
        overflow-wrap: anywhere;
    }

    .activation-product-row .activation-product-controls {
        grid-column: 2;
        grid-row: 3;
        justify-self: start;
    }

    .activation-product-row > b {
        grid-column: 3;
        grid-row: 1 / 4;
    }

    .activation-payment-actions button,
    .activation-pending-state button {
        width: 100%;
    }

    .activation-pending-state {
        grid-template-columns: auto minmax(0, 1fr);
    }

    .activation-pending-state button {
        grid-column: 1 / -1;
    }

    .activation-product-row > small {
        grid-column: 1;
    }

    .activation-product-controls {
        grid-column: 2;
        grid-row: 1 / span 2;
    }

    .activation-product-row > b {
        grid-column: 1 / -1;
        justify-self: end;
    }

    .finance-kpis,
    .dashboard-two-col,
    .dashboard-wide-left,
    .dashboard-bottom-grid {
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }

    .finance-panel h3 {
        line-height: 1.35;
        overflow-wrap: anywhere;
    }

    .level-row {
        grid-template-columns: 72px minmax(0, 1fr) auto;
        gap: 0.45rem 0.6rem;
    }

    .level-row .level-label {
        grid-column: 1;
        grid-row: 1;
    }

    .level-row .level-track {
        grid-column: 2 / -1;
        grid-row: 1;
    }

    .level-row > span:nth-of-type(2) {
        grid-column: 1;
        grid-row: 2;
        justify-self: start;
    }

    .level-row > span:nth-of-type(3) {
        grid-column: 2;
        grid-row: 2;
        justify-self: start;
    }

    .level-row > strong {
        grid-column: 3;
        grid-row: 2;
        justify-self: end;
    }

    .commission-summary-grid,
    .stats-global-grid,
    .stats-period-grid {
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }

    .office-panel-header {
        align-items: flex-start;
        flex-wrap: wrap;
    }

    .office-panel-header button {
        min-height: 44px;
    }

    .office-table-wrap {
        width: 100%;
        max-width: 100%;
        overflow-x: auto;
        -webkit-overflow-scrolling: touch;
        overscroll-behavior-x: contain;
    }

    .office-table {
        min-width: 720px;
    }

    .network-tree-shell {
        max-width: 100%;
        -webkit-overflow-scrolling: touch;
        overscroll-behavior-x: contain;
    }

    .shop-layout {
        gap: 1rem;
    }

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

    .shop-product-info button,
    .shop-checkout {
        min-height: 44px;
    }

    .shop-cart-row {
        grid-template-columns: minmax(0, 1fr) auto;
    }

    .shop-cart-row b {
        grid-column: 2;
        grid-row: 1;
    }

    .shop-cart-controls {
        grid-column: 1 / -1;
    }

    .shop-cart-controls button,
    .activation-product-controls button {
        width: 40px;
        height: 40px;
    }

    .account-grid {
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }

    .office-modal__dialog {
        width: min(92vw, 520px);
        max-height: calc(100dvh - 2rem);
        overflow-y: auto;
    }
}

@media screen and (width < 560px) {
    .office-main {
        padding: 0.65rem;
    }

    .office-body .office-sidebar {
        grid-template-columns: 44px minmax(0, 1fr);
        padding: 0.45rem 0.55rem;
    }

    .office-sidebar img {
        width: 42px;
        max-height: 40px;
    }

    .office-sidebar button {
        min-height: 40px;
        padding: 0.55rem 0.65rem;
        font-size: 0.78rem;
    }

    .office-header-actions,
    .finance-kpis,
    .dashboard-two-col,
    .dashboard-wide-left,
    .dashboard-bottom-grid,
    .commission-summary-grid,
    .stats-global-grid,
    .stats-period-grid,
    .stats-rubros-grid,
    .shop-product-grid,
    .account-grid {
        grid-template-columns: 1fr;
    }

    .office-header-actions button {
        min-height: 42px;
    }

    .dashboard-hero,
    .finance-panel,
    .office-panel {
        padding: 0.85rem;
    }

    .finance-kpi {
        min-height: 112px;
    }

    .bonus-list div,
    .status-list div,
    .commission-list div {
        gap: 0.65rem;
    }

    .bonus-list span,
    .status-list span,
    .commission-list span {
        min-width: 0;
        overflow-wrap: anywhere;
    }

    .referral-link-box {
        grid-template-columns: 1fr;
    }

    .referral-link-box button {
        min-height: 44px;
    }

    .shop-product-featured .shop-product-media {
        height: 190px;
    }

    .shop-cart-total {
        gap: 0.75rem;
    }

    .shop-cart-total strong {
        text-align: right;
    }

    .account-profile-photo,
    .beneficiary-grid {
        grid-template-columns: 1fr;
    }

    .account-profile-photo {
        justify-items: center;
        text-align: center;
    }

    .profile-photo-preview {
        width: 88px;
        height: 88px;
    }

    .office-switch-group {
        min-width: 170px;
    }

    .network-contact-card {
        position: fixed;
        left: 0.75rem;
        right: 0.75rem;
        bottom: 0.75rem;
        width: auto;
        max-width: none;
        transform: translateY(12px);
    }

    .network-node:hover .network-contact-card,
    .network-node:focus-within .network-contact-card,
    .network-node.is-contact-open .network-contact-card {
        transform: translateY(0);
    }

    .network-contact-card::after {
        display: none;
    }

    .landing-premium .inicio:not(.landing-hero) {
        width: 100vw;
        max-width: 100vw;
        min-height: 100svh;
        height: 100svh;
        overflow: hidden;
    }

    .landing-premium .inicio:not(.landing-hero) .video-inicio {
        position: absolute;
        inset: 0;
        width: 100%;
        height: 100%;
    }

    .landing-premium .inicio:not(.landing-hero) .titulo {
        position: absolute;
        top: 0;
        right: 0.75rem;
        left: 0.75rem;
        width: auto;
        max-width: none;
        min-height: 100%;
        height: 100%;
        justify-content: center;
        margin: 0;
        padding: 5.5rem 0 2rem;
        transform: none;
    }

    .landing-premium .inicio:not(.landing-hero) .titulo h3 {
        width: calc(100% - 0.75rem);
        max-width: calc(100% - 0.75rem);
        flex-wrap: wrap;
        gap: 0.35rem 0.5rem;
        border-radius: 10px;
        padding: 0.65rem 0.75rem;
        font-size: 0.72rem;
        line-height: 1.35;
        text-align: center;
        white-space: normal;
    }

    .landing-premium .inicio:not(.landing-hero) .titulo h1 {
        width: calc(100% - 0.75rem);
        max-width: calc(100% - 0.75rem);
        margin: 2rem 0 1.35rem;
        font-size: 1.95rem;
        line-height: 1.3;
        white-space: normal;
        word-break: normal;
        overflow-wrap: anywhere;
    }

    .landing-premium .inicio:not(.landing-hero) .titulo p {
        width: calc(100% - 0.75rem);
        max-width: calc(100% - 0.75rem);
        padding-inline: 0.2rem;
        color: rgba(255, 255, 255, 0.82);
        font-size: 1rem;
        line-height: 1.5;
        white-space: normal;
        word-break: normal;
        overflow-wrap: anywhere;
    }

    .landing-premium .inicio:not(.landing-hero) .btn-inicio {
        width: calc(100% - 0.75rem);
        max-width: calc(100% - 0.75rem);
        display: grid;
        grid-template-columns: 1fr;
        justify-items: center;
        margin-top: 2rem;
    }

    .landing-premium .inicio:not(.landing-hero) .btn-productos,
    .landing-premium .inicio:not(.landing-hero) .btn-distribuidor {
        max-width: 100%;
        min-height: 50px;
    }

    .landing-premium .nav_logo {
        width: 118px;
    }

    .landing-premium .login .btn-login {
        min-height: 44px;
        padding: 0.7rem 0.9rem;
        font-size: 0.82rem;
    }
}

.landing-redesign .btn-login.web-btn {
    display: inline-flex;
    min-height: 48px;
    border: 0;
    border-radius: 999px;
    gap: 0.45rem;
    font-family: var(--font-texto);
    font-size: 0.95rem;
    font-weight: 950;
    padding: 0.9rem 1.25rem;
}

.landing-redesign .btn-login.web-btn--green {
    background: linear-gradient(135deg, #00A86B, #00D79E);
    color: #FFFFFF;
    box-shadow: 0 18px 34px rgba(0, 168, 107, 0.22);
}

.landing-redesign .btn-login.web-btn--blue {
    background: linear-gradient(135deg, #064FB6, #098CEB);
    color: #FFFFFF;
    box-shadow: 0 18px 34px rgba(6, 79, 182, 0.22);
}

/* Override final: oficina virtual con barra superior horizontal */
body.office-body {
    --office-blue: #0758B7;
    --office-blue-dark: #062A66;
    --office-green: #00A86B;
    --office-pink: #E8006E;
    --office-bg: #F5F8FC;
    --office-border: #DCE7F5;
    --office-text: #152B4D;
    --office-muted: #6B778C;
    display: grid;
    grid-template-columns: 1fr;
    grid-template-rows: auto minmax(0, 1fr);
    height: 100vh;
    min-height: 100vh;
    overflow: hidden;
    background: var(--office-bg);
    color: var(--office-text);
}

body.office-body .office-sidebar {
    position: sticky;
    top: 0;
    z-index: 1000;
    width: 100%;
    height: auto;
    min-height: 0;
    display: grid;
    grid-template-columns: 164px minmax(0, 1fr);
    align-items: end;
    gap: 1.25rem;
    overflow: visible;
    padding: 0.75rem 1.55rem 0;
    border-right: 0;
    border-bottom: 1px solid var(--office-border);
    background: rgba(255, 255, 255, 0.96);
    box-shadow: 0 10px 28px rgba(6, 42, 102, 0.08);
    backdrop-filter: blur(16px);
}

body.office-body .office-sidebar::before {
    display: none;
}

body.office-body .office-sidebar img {
    width: 136px;
    max-height: 68px;
    object-fit: contain;
    margin: 0 0 0.55rem;
    filter: none;
}

body.office-body .office-sidebar nav {
    min-width: 0;
    display: flex;
    align-items: end;
    gap: 0.35rem;
    overflow-x: auto;
    overflow-y: hidden;
    padding: 0 0 0.05rem;
    scrollbar-width: thin;
    scrollbar-color: rgba(7, 88, 183, 0.25) transparent;
    cursor: grab;
    user-select: none;
}

body.office-body .office-sidebar nav.is-drag-scrolling {
    cursor: grabbing;
}

body.office-body .office-sidebar nav::-webkit-scrollbar {
    height: 4px;
}

body.office-body .office-sidebar nav::-webkit-scrollbar-thumb {
    border-radius: 999px;
    background: rgba(7, 88, 183, 0.25);
}

body.office-body .office-sidebar button {
    position: relative;
    min-width: max-content;
    min-height: 48px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 0.4rem;
    flex: 0 0 auto;
    border: 0;
    border-radius: 0;
    background: transparent;
    color: var(--office-muted);
    cursor: pointer;
    font-size: 0.88rem;
    font-weight: 850;
    line-height: 1;
    padding: 0.75rem 0.75rem 0.9rem;
    text-align: center;
    white-space: nowrap;
    transition: color 160ms ease, background 160ms ease;
}

body.office-body .office-sidebar button i {
    color: inherit;
    font-size: 1.05rem;
}

body.office-body .office-sidebar button:hover,
body.office-body .office-sidebar button.is-active {
    transform: none;
    border-color: transparent;
    background: transparent;
    color: var(--office-blue);
}

body.office-body .office-sidebar button.is-active::after {
    content: '';
    position: absolute;
    left: 0.75rem;
    right: 0.75rem;
    bottom: 0;
    width: auto;
    height: 3px;
    border-radius: 999px 999px 0 0;
    background: linear-gradient(90deg, var(--office-blue), var(--office-green));
    box-shadow: none;
}

body.office-body .office-sidebar button:disabled {
    color: #A6B1C2;
    cursor: not-allowed;
    opacity: 0.62;
}

body.office-body .office-main {
    width: 100%;
    height: auto;
    min-height: 0;
    overflow-x: hidden;
    overflow-y: auto;
    padding: 1.25rem;
}

body.office-body .office-header,
body.office-body .dashboard-hero {
    border: 1px solid var(--office-border);
    border-radius: 12px;
    background: linear-gradient(135deg, #FFFFFF 0%, #F8FBFF 100%);
    box-shadow: 0 16px 38px rgba(6, 42, 102, 0.08);
}

body.office-body .dashboard-hero {
    background: linear-gradient(135deg, var(--office-blue-dark), var(--office-blue));
}

body.office-body .office-header::after {
    display: none;
}

body.office-body .office-header span,
body.office-body .office-panel-header span {
    color: var(--office-pink);
}

body.office-body .office-header h1,
body.office-body .office-panel-header h2,
body.office-body .finance-panel h3,
body.office-body .office-panel h2 {
    color: var(--office-blue);
}

body.office-body .office-header-actions button,
body.office-body .office-header button,
body.office-body .office-panel button,
body.office-body .shop-checkout,
body.office-body .shop-product-info button {
    border-radius: 10px;
}

body.office-body .office-header-actions button,
body.office-body #btnLogoutOffice {
    border: 1px solid var(--office-border);
    background: #FFFFFF;
    color: var(--office-blue);
}

body.office-body #btnVerificarCuenta,
body.office-body .office-header-actions button.is-verified {
    border-color: transparent;
    background: linear-gradient(135deg, var(--office-green), #19C993);
    color: #FFFFFF;
}

body.office-body #btnLogoutOffice {
    color: var(--office-pink);
}

body.office-body .finance-kpi,
body.office-body .finance-panel,
body.office-body .office-panel,
body.office-body .shop-cart,
body.office-body .shop-product,
body.office-body .member-upgrade-panel {
    border-color: var(--office-border);
    background: #FFFFFF;
    box-shadow: 0 14px 34px rgba(6, 42, 102, 0.07);
}

.shop-admin-panel {
    display: grid;
    grid-template-columns: minmax(320px, .85fr) minmax(320px, 1fr);
    gap: 1rem;
}

.shop-admin-card {
    border: 1px solid var(--office-border);
    border-radius: 14px;
    background: #FFFFFF;
    padding: 1rem;
    box-shadow: 0 14px 34px rgba(6, 42, 102, 0.07);
}

.shop-admin-card > div:first-child span {
    color: var(--office-pink);
    font-weight: 900;
    font-size: .82rem;
    text-transform: uppercase;
}

.shop-admin-card h3 {
    margin: .15rem 0 1rem;
    color: var(--office-blue-dark);
    font-family: var(--font-titulo);
    font-size: 1.35rem;
}

.shop-product-form {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: .85rem;
}

.shop-product-form label {
    display: grid;
    gap: .35rem;
    color: var(--office-text);
    font-weight: 850;
}

.shop-product-form label:nth-of-type(1),
.shop-product-form label:nth-of-type(4),
.shop-product-form button {
    grid-column: 1 / -1;
}

.shop-product-form input,
.shop-product-form select {
    width: 100%;
    border: 1px solid var(--office-border);
    border-radius: 10px;
    background: #FFFFFF;
    color: var(--office-blue-dark);
    padding: .78rem .85rem;
    font: inherit;
}

.shop-product-form input[readonly] {
    background: #F5F8FC;
    color: #52657E;
}

.shop-product-form button {
    border: 0;
    border-radius: 12px;
    background: linear-gradient(135deg, var(--office-blue), var(--office-pink));
    color: #FFFFFF;
    cursor: pointer;
    font-weight: 900;
    padding: .95rem 1rem;
}

.custom-products-list {
    display: grid;
    gap: .75rem;
    max-height: 520px;
    overflow: auto;
}

.custom-products-list article {
    display: grid;
    grid-template-columns: 72px minmax(0, 1fr) auto;
    gap: .75rem;
    align-items: center;
    border: 1px solid var(--office-border);
    border-radius: 12px;
    padding: .7rem;
    background: #F9FBFE;
}

.custom-products-list img {
    width: 72px;
    height: 72px;
    object-fit: contain;
    border-radius: 10px;
    background: #FFFFFF;
}

.custom-products-list strong,
.custom-products-list span,
.custom-products-list small {
    display: block;
}

.custom-products-list strong {
    color: var(--office-blue-dark);
    font-weight: 950;
}

.custom-products-list span {
    color: var(--office-green);
    font-weight: 900;
    font-size: .84rem;
}

.custom-products-list small {
    color: #52657E;
    font-weight: 750;
    line-height: 1.3;
}

.custom-product-actions {
    display: grid;
    gap: .45rem;
}

.custom-products-list button {
    border: 0;
    border-radius: 10px;
    background: var(--office-blue);
    color: #FFFFFF;
    cursor: pointer;
    font-weight: 900;
    padding: .62rem .8rem;
}

.custom-products-list button.is-danger {
    background: #E11D48;
}

.custom-products-list button i {
    margin-right: .25rem;
}

@media screen and (width < 860px) {
    .shop-admin-panel,
    .shop-product-form {
        grid-template-columns: 1fr;
    }

    .shop-product-form label:first-child,
    .shop-product-form label:nth-of-type(1),
    .shop-product-form label:nth-of-type(4),
    .shop-product-form button {
        grid-column: auto;
    }

    .custom-products-list article {
        grid-template-columns: 64px minmax(0, 1fr);
    }

    .custom-product-actions {
        grid-column: 1 / -1;
        grid-template-columns: 1fr 1fr;
    }

    .custom-products-list button {
        width: 100%;
    }
}

@media screen and (width < 920px) {
    body.office-body .office-sidebar {
        grid-template-columns: 66px minmax(0, 1fr);
        gap: 0.65rem;
        padding: 0.6rem 0.75rem 0;
    }

    body.office-body .office-sidebar img {
        width: 54px;
        max-height: 48px;
        margin-bottom: 0.45rem;
    }

    body.office-body .office-sidebar button {
        min-height: 44px;
        padding-inline: 0.62rem;
        font-size: 0.82rem;
    }

    body.office-body .office-main {
        padding: 0.85rem;
    }
}
/* Promociones Manik Evolution */
.promotions-admin-grid {
    display: grid;
    grid-template-columns: minmax(320px, 1.05fr) minmax(320px, .95fr);
    gap: 18px;
    align-items: start;
    margin-top: 18px;
}

.promo-admin-card {
    border: 1px solid var(--office-border, #cfe0f4);
    border-radius: 14px;
    background: #fff;
    padding: 18px;
    box-shadow: 0 18px 45px rgba(0, 82, 180, .08);
}

.promo-admin-card > div:first-child span,
.promo-form label span {
    color: var(--manik-blue, #004aad);
    font-weight: 900;
    text-transform: uppercase;
    font-size: .78rem;
}

.promo-admin-card h3 {
    margin: 4px 0 14px;
    color: var(--manik-navy, #061b49);
}

.promo-form {
    display: grid;
    gap: 12px;
}

.promo-form label {
    display: grid;
    gap: 6px;
}

.promo-form input,
.promo-form select,
.promo-form textarea {
    width: 100%;
    border: 1px solid var(--office-border, #cfe0f4);
    border-radius: 10px;
    padding: 12px 14px;
    font: inherit;
    color: var(--manik-navy, #061b49);
    background: #fdfefe;
}

.promo-form textarea {
    resize: vertical;
}

.promo-form label.is-muted-control {
    opacity: .48;
}

.promo-form label.is-muted-control input,
.promo-form label.is-muted-control select {
    cursor: not-allowed;
}

.promo-form-row {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 12px;
}

.promo-form-row:has(label:nth-child(2):last-child) {
    grid-template-columns: repeat(2, minmax(0, 1fr));
}

.promo-check {
    display: flex !important;
    align-items: center;
    gap: 10px !important;
    color: var(--manik-navy, #061b49);
    font-weight: 800;
}

.promo-check input {
    width: 18px;
    height: 18px;
    accent-color: var(--manik-pink, #e6007e);
}

.promo-rules {
    display: grid;
    gap: 8px;
    padding: 12px;
    border: 1px dashed rgba(230, 0, 126, .35);
    border-radius: 12px;
    background: rgba(230, 0, 126, .04);
}

.promotions-list {
    display: grid;
    gap: 12px;
}

.promotion-item {
    display: grid;
    grid-template-columns: 1fr auto;
    gap: 12px;
    border: 1px solid var(--office-border, #cfe0f4);
    border-left: 5px solid var(--manik-pink, #e6007e);
    border-radius: 12px;
    padding: 14px;
    background: #f8fbff;
}

.promotion-item.is-active {
    border-left-color: #00a86b;
}

.promotion-item.is-paused {
    opacity: .72;
}

.promotion-item h3 {
    margin: 8px 0 6px;
}

.promotion-item p,
.promotion-item small {
    display: block;
    margin: 4px 0;
    color: #415575;
}

.promotion-warnings {
    color: var(--manik-pink, #e6007e) !important;
    font-weight: 900;
}

.promotion-actions {
    display: flex;
    gap: 8px;
    align-items: start;
}

.shop-history-product.is-promo em {
    display: inline-flex;
    margin-left: 6px;
    padding: 2px 8px;
    border-radius: 999px;
    background: rgba(230, 0, 126, .12);
    color: var(--manik-pink, #e6007e);
    font-style: normal;
    font-weight: 900;
    font-size: .75rem;
}

@media (max-width: 980px) {
    .promotions-admin-grid,
    .promo-form-row,
    .promo-form-row:has(label:nth-child(2):last-child) {
        grid-template-columns: 1fr;
    }
}

/* Override final: login moderno de dos columnas */
.landing-premium .login-modal {
    align-items: center;
    justify-content: center;
    padding: clamp(16px, 4vw, 42px);
}

.landing-premium .login-modal__backdrop {
    background: rgba(246, 250, 255, .92);
    backdrop-filter: blur(5px);
}

.landing-premium .login-modal__dialog {
    width: min(1180px, calc(100vw - 32px)) !important;
    max-height: calc(100vh - 32px);
    overflow: auto;
    border: 0 !important;
    border-radius: 20px !important;
    background:
        radial-gradient(circle at 100% 0%, rgba(230, 0, 126, .10), transparent 30%),
        radial-gradient(circle at 80% -10%, rgba(0, 82, 180, .10), transparent 26%),
        #fff !important;
    color: #25354f !important;
    box-shadow: 0 28px 90px rgba(6, 27, 73, .18) !important;
    padding: clamp(24px, 4vw, 48px) !important;
}

.landing-premium .login-modal__logo {
    display: none !important;
}

.landing-premium .login-modal__close {
    top: 18px;
    right: 18px;
    background: rgba(0, 82, 180, .08) !important;
    color: #061b49 !important;
}

.landing-premium .login-access-grid {
    display: grid !important;
    grid-template-columns: minmax(300px, .8fr) minmax(420px, 1.2fr);
    gap: clamp(28px, 6vw, 92px);
    align-items: start;
}

.landing-premium .login-access-title {
    display: flex;
    align-items: center;
    gap: 10px;
    margin-bottom: 18px;
    color: #4a5568;
}

.landing-premium .login-access-title i {
    color: #061b49;
    font-size: clamp(28px, 3vw, 42px);
}

.landing-premium .login-modal h2,
.landing-premium .login-access-title h2 {
    margin: 0;
    color: #4a4a4a !important;
    font-family: var(--font-titulo);
    font-size: clamp(2rem, 3.1vw, 3rem);
    font-weight: 900;
}

.landing-premium .login-form {
    gap: 24px;
}

.landing-premium .login-form label {
    position: relative;
    gap: 8px;
    color: #555 !important;
    font-weight: 700;
}

.landing-premium .login-form label > span {
    display: inline-flex;
    width: fit-content;
    padding-right: 8px;
    background: #fff;
    transform: translate(14px, 17px);
    z-index: 1;
}

.landing-premium .login-form input {
    min-height: 54px;
    border: 1.5px solid #616161 !important;
    border-radius: 8px !important;
    background: #fff !important;
    color: #111827 !important;
    padding: 14px 48px 14px 16px !important;
}

.landing-premium .login-form input:focus {
    border-color: #0052b4 !important;
    box-shadow: 0 0 0 3px rgba(0, 82, 180, .14) !important;
}

.landing-premium .login-forgot-link {
    justify-self: end;
    color: #0052b4 !important;
    font-size: 1.05rem;
    text-decoration: underline;
    background: transparent !important;
    border: 0 !important;
    padding: 0 !important;
    cursor: pointer;
}

.landing-premium .login-recovery-form {
    display: grid;
    gap: 18px;
}

.landing-premium .login-recovery-form[hidden] {
    display: none !important;
}

.landing-premium .login-recovery-actions {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 12px;
}

.landing-premium .login-recovery-actions button {
    min-height: 48px;
    border-radius: 999px;
    border: 1px solid #c8d8ea;
    font-weight: 900;
    cursor: pointer;
}

.landing-premium .login-recovery-actions button[type="submit"] {
    background: linear-gradient(135deg, #0052b4, #e6007e);
    color: #fff;
    border-color: transparent;
}

.landing-premium .login-form button[type="submit"] {
    min-height: 54px;
    border-radius: 999px !important;
    background: linear-gradient(135deg, #0052b4, #e6007e) !important;
    color: #fff !important;
    font-size: 1.05rem;
}

.landing-premium .login-create-note {
    margin-top: 34px;
    padding-top: 24px;
    border-top: 1px solid #d6d6d6;
}

.landing-premium .login-create-note strong {
    color: #4a4a4a;
}

.landing-premium .login-create-note a,
.landing-premium .login-register-actions a {
    color: #0052b4 !important;
}

.landing-premium .login-create-card {
    padding-top: 0;
}

.landing-premium .login-register-tabs {
    border: 1px solid #d9e3f3;
    border-radius: 10px 10px 0 0;
}

.landing-premium .login-register-tabs a {
    min-height: 50px;
    background: rgba(0, 82, 180, .08);
    color: #0052b4 !important;
}

.landing-premium .login-register-tabs a:last-child {
    background: rgba(230, 0, 126, .05);
}

.landing-premium .login-register-copy {
    min-height: 280px;
    border-color: #d9e3f3;
    box-shadow: 0 20px 52px rgba(6, 27, 73, .12);
}

.landing-premium .login-register-actions a {
    border-color: #0052b4;
}

.landing-premium .login-register-actions a:last-child {
    border-color: #e6007e;
    color: #e6007e !important;
}

@media (max-width: 860px) {
    .landing-premium .login-access-grid {
        grid-template-columns: 1fr;
    }

    .landing-premium .login-modal__dialog {
        width: min(620px, calc(100vw - 16px)) !important;
        padding: 22px !important;
    }
}

@media screen and (width < 760px) {
    body.office-body .office-main {
        padding-bottom: calc(5rem + env(safe-area-inset-bottom));
    }

    body.office-body .office-sidebar nav {
        padding-right: 1.25rem;
    }

    body.office-body .office-sidebar button {
        flex: 0 0 auto;
        max-width: 190px;
    }
}