/**
 * Index — look Pro homologado con MASTER-SABORLAB
 * (azul #2c5aa0, oro #d4af37, naranja Insights, KPI cards, emoji boxes).
 * Cargar DESPUÉS del CSS inline de index.php.
 */

body.page-index {
    --suite-blue: #3b82f6;
    --suite-blue-dark: #2563eb;
    --suite-blue-light: #60a5fa;
    --suite-gold: #d4af37;
    --suite-gold-dark: #b8860b;
    --suite-gold-light: #f0e6d2;
    --accent-orange: #ff8c42;
    --accent-orange-deep: #e85d04;
    --accent-orange-dark: #c45a1a;
    --accent-yellow: #d4af37;
    --pro-ink: #0f172a;
    --pro-muted: #64748b;
    --pro-line: #e2e8f0;
    --pro-radius: 16px;
    --pro-shadow: 0 12px 28px -16px rgba(15, 23, 42, 0.35);
}

/* Tipografía: títulos más premium, cuerpo legible (fuera del hero) */
body.page-index h2,
body.page-index .section-title,
body.page-index .menu-management-text h2,
body.page-index .why-choose-content h2,
body.page-index .manifesto-title {
    letter-spacing: -0.02em;
    line-height: 1.22;
    color: var(--text-dark, #2c3e50);
}

/* ——— Operativa lead: stack de tarjetas Pro con acento de color ——— */
body.page-index .section-operativa-lead {
    padding: clamp(2.25rem, 5vw, 3.25rem) 0 clamp(2rem, 4.5vw, 2.75rem) !important;
}

body.page-index .operativa-pro-stack {
    display: grid;
    gap: clamp(0.85rem, 2vw, 1.15rem);
    width: 100%;
    max-width: min(100%, 58rem);
    margin: 0 auto;
}

body.page-index .operativa-pro-card {
    --op-card-tone: #60a5fa;
    --op-card-glow: rgba(96, 165, 250, 0.34);
    --op-card-soft: rgba(96, 165, 250, 0.2);
    position: relative;
    width: 100%;
    margin: 0;
    padding: clamp(1.15rem, 3vw, 1.65rem) clamp(1rem, 3vw, 1.55rem);
    border-radius: clamp(14px, 2.4vw, 18px);
    border: 1px solid color-mix(in srgb, var(--op-card-tone) 36%, #e2e8f0);
    border-top: 4px solid var(--op-card-tone);
    background:
        radial-gradient(ellipse 95% 70% at 50% -10%, var(--op-card-glow), transparent 62%),
        linear-gradient(165deg, #ffffff 0%, var(--op-card-soft) 100%);
    box-shadow: 0 14px 34px -18px rgba(15, 23, 42, 0.32);
    box-sizing: border-box;
    text-align: center;
    overflow: hidden;
}

body.page-index .operativa-pro-card[data-tone="blue"] {
    --op-card-tone: #60a5fa;
    --op-card-glow: rgba(96, 165, 250, 0.38);
    --op-card-soft: rgba(96, 165, 250, 0.22);
}
body.page-index .operativa-pro-card[data-tone="teal"] {
    --op-card-tone: #2dd4bf;
    --op-card-glow: rgba(45, 212, 191, 0.36);
    --op-card-soft: rgba(45, 212, 191, 0.22);
}
body.page-index .operativa-pro-card[data-tone="amber"] {
    --op-card-tone: #fbbf24;
    --op-card-glow: rgba(251, 191, 36, 0.4);
    --op-card-soft: rgba(251, 191, 36, 0.24);
}
body.page-index .operativa-pro-card[data-tone="violet"] {
    --op-card-tone: #a78bfa;
    --op-card-glow: rgba(167, 139, 250, 0.36);
    --op-card-soft: rgba(167, 139, 250, 0.22);
}
body.page-index .operativa-pro-card[data-tone="rose"] {
    --op-card-tone: #fb7185;
    --op-card-glow: rgba(251, 113, 133, 0.34);
    --op-card-soft: rgba(251, 113, 133, 0.2);
}
body.page-index .operativa-pro-card[data-tone="indigo"] {
    --op-card-tone: #818cf8;
    --op-card-glow: rgba(129, 140, 248, 0.36);
    --op-card-soft: rgba(129, 140, 248, 0.22);
}

body.page-index .operativa-pro-card--intro .operativa-eyebrow {
    display: inline-block;
    margin: 0 0 0.7rem;
    padding: 0.35rem 0.85rem;
    font-size: clamp(0.68rem, 1.8vw, 0.76rem);
    font-weight: 800;
    letter-spacing: 0.12em;
    text-transform: uppercase;
    color: #1e3a8a;
    background: rgba(255, 255, 255, 0.72);
    border: 1px solid color-mix(in srgb, var(--op-card-tone) 35%, #e2e8f0);
    border-radius: 999px;
}

body.page-index .operativa-pro-card--intro h2 {
    margin: 0 0 0.55rem !important;
    font-size: clamp(1.35rem, 3.8vw, 2.1rem) !important;
    line-height: 1.22 !important;
    letter-spacing: -0.02em !important;
    color: #0f172a !important;
    text-wrap: balance;
    overflow-wrap: anywhere;
}

body.page-index .operativa-lead-devices {
    margin: 0 0 0.45rem !important;
    font-size: clamp(1.15rem, 2.8vw, 1.4rem);
    line-height: 1;
}

body.page-index .operativa-pro-card--intro .operativa-lead-sub {
    margin: 0 auto !important;
    max-width: 36rem;
    font-size: clamp(0.95rem, 2.3vw, 1.08rem) !important;
    font-weight: 600 !important;
    line-height: 1.5 !important;
    color: #334155 !important;
    text-wrap: pretty;
    overflow-wrap: anywhere;
}

body.page-index .operativa-pro-card-text {
    margin: 0 auto !important;
    max-width: 40rem;
    font-size: clamp(0.94rem, 2.3vw, 1.06rem) !important;
    line-height: 1.65 !important;
    color: #334155 !important;
    text-wrap: pretty;
    overflow-wrap: anywhere;
}

body.page-index .operativa-pro-card-text strong {
    color: #0f172a;
    font-weight: 800;
}

body.page-index .operativa-pro-card--highlight {
    padding: clamp(0.95rem, 2.5vw, 1.25rem) clamp(0.9rem, 2.5vw, 1.35rem);
}

body.page-index .operativa-quote--soft,
body.page-index .operativa-pro-card--highlight .operativa-quote--soft {
    display: block;
    width: 100%;
    max-width: none;
    margin: 0 !important;
    padding: 0.35rem 0.25rem;
    text-align: center;
    color: #0f172a;
    font-size: clamp(1.02rem, 2.4vw, 1.18rem);
    font-weight: 700;
    line-height: 1.4;
    letter-spacing: -0.015em;
    background: transparent;
    border: 0;
    border-radius: 0;
    box-shadow: none;
    text-wrap: balance;
}

body.page-index .operativa-quote--soft em,
body.page-index .operativa-pro-card--highlight .operativa-quote--soft em {
    font-style: normal;
    font-weight: 800;
    color: inherit;
}

body.page-index .operativa-pro-card--steps .operativa-cta-line {
    margin: 0 0 0.95rem !important;
    font-size: clamp(0.78rem, 2vw, 0.88rem) !important;
    font-weight: 800 !important;
    letter-spacing: 0.08em !important;
    text-transform: uppercase !important;
    color: #4c1d95 !important;
}

body.page-index .operativa-pro-card--steps .operativa-cta-kpis {
    display: grid !important;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: clamp(0.55rem, 1.5vw, 0.8rem);
    width: 100%;
    margin: 0;
    padding: 0;
    list-style: none;
}

body.page-index .operativa-pro-card--steps .operativa-cta-kpis li {
    min-width: 0;
    display: flex;
}

body.page-index .operativa-pro-card--steps a.operativa-cta-kpi {
    width: 100%;
    min-width: 0;
    background:
        radial-gradient(ellipse 90% 70% at 8% 0%, var(--op-glow), transparent 58%),
        linear-gradient(165deg, rgba(255, 255, 255, 0.9) 0%, var(--op-wash, rgba(96, 165, 250, 0.14)) 100%) !important;
}

body.page-index .operativa-pro-card--steps .operativa-cta-kpi-value {
    overflow-wrap: anywhere;
}

body.page-index .operativa-pro-card--steps .operativa-cta-kpi-label {
    overflow-wrap: anywhere;
}

@media (max-width: 900px) {
    body.page-index .operativa-pro-card--steps .operativa-cta-kpis {
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }
}

@media (max-width: 560px) {
    body.page-index .operativa-pro-stack {
        max-width: 100%;
        gap: 0.75rem;
    }

    body.page-index .operativa-pro-card {
        padding: 1.05rem 0.9rem 1.15rem;
        border-radius: 14px;
    }

    body.page-index .operativa-pro-card--steps .operativa-cta-kpis {
        grid-template-columns: 1fr;
    }

    body.page-index .operativa-pro-card--intro .operativa-eyebrow {
        letter-spacing: 0.08em;
        white-space: normal;
        line-height: 1.35;
        max-width: 100%;
    }
}

/* ——— Recursos en acción (día a día) — stack Pro showcase ——— */
body.page-index .section-operativa-day {
    padding: clamp(1.75rem, 4vw, 2.5rem) 0 clamp(2rem, 4.5vw, 2.75rem) !important;
}

body.page-index .operativa-day-stack {
    max-width: min(100%, 58rem);
    margin: 0 auto;
}

body.page-index .operativa-day-card--intro .operativa-depth-title {
    margin: 0 0 0.55rem !important;
    font-size: clamp(1.35rem, 3.6vw, 2rem) !important;
    line-height: 1.22 !important;
    color: #0f172a !important;
    text-wrap: balance;
}

body.page-index .operativa-day-card--intro .operativa-eyebrow {
    color: #9f1239 !important;
    border-bottom: 0 !important;
    padding-bottom: 0 !important;
    background: rgba(255, 255, 255, 0.78) !important;
}

body.page-index .operativa-day-card--intro .operativa-day-lead {
    margin: 0 auto !important;
    max-width: 40rem;
    color: #334155 !important;
}

body.page-index .operativa-day-card--show .operativa-cta-line {
    color: #312e81 !important;
}

body.page-index .operativa-day-card--show .operativa-day-kpis {
    display: grid !important;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: clamp(0.55rem, 1.5vw, 0.8rem);
    width: 100%;
    margin: 0;
    padding: 0;
    list-style: none;
}

body.page-index .operativa-day-card--show .operativa-day-kpis li {
    min-width: 0;
    display: flex;
}

body.page-index .operativa-day-card--show .operativa-day-more-label {
    margin: 1.1rem 0 0.55rem !important;
    letter-spacing: 0.08em !important;
    color: #64748b !important;
}

body.page-index .operativa-day-card--show .operativa-day-extras {
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    gap: 0.45rem 0.5rem;
}

body.page-index .operativa-day-card--show .operativa-resource-chip--static {
    cursor: default !important;
    pointer-events: none !important;
}

@media (max-width: 900px) {
    body.page-index .operativa-day-card--show .operativa-day-kpis {
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }
}

@media (max-width: 560px) {
    body.page-index .operativa-day-card--show .operativa-day-kpis {
        grid-template-columns: 1fr;
    }
}

/* ——— Suite lead (primera sección tras el header) ——— */
body.page-index .section-suite-lead {
    padding: clamp(1.75rem, 4vw, 2.75rem) 0 clamp(1.5rem, 3.5vw, 2.25rem) !important;
    scroll-margin-top: 6rem;
    position: relative;
    z-index: 3;
    background:
        radial-gradient(ellipse 90% 55% at 50% 0%, rgba(251, 191, 36, 0.16), transparent 58%),
        linear-gradient(180deg, #ffffff 0%, #fff9f4 55%, #f8fafc 100%) !important;
}

body.page-index .section-suite-lead.master-platform--suite-lead {
    border-top: 0;
    overflow: visible;
}

/* ——— Ecosistema / Suite hero: mismo stack de tarjetas Pro ——— */
body.page-index #ecosistema .eco-hero-pro.operativa-pro-stack,
body.page-index .section-suite-lead .eco-hero-pro.operativa-pro-stack {
    margin: 0 auto;
    text-align: center;
}

/* Inventario Suite — tags Pro (portal premium) */
body.page-index :is(#ecosistema, .section-suite-lead) .eco-suite-resources{
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    gap: 0.45rem 0.5rem;
    list-style: none;
    margin: 1rem auto 0;
    padding: 0;
    max-width: 44rem;
}

body.page-index :is(#ecosistema, .section-suite-lead) .eco-suite-resource{
    --eco-res-tone: #60a5fa;
    --eco-res-wash: rgba(96, 165, 250, 0.16);
    display: inline-flex;
    align-items: center;
    margin: 0;
    padding: 0.38rem 0.72rem;
    border-radius: 999px;
    border: 1px solid color-mix(in srgb, var(--eco-res-tone) 38%, #e2e8f0);
    background:
        linear-gradient(165deg, rgba(255, 255, 255, 0.92) 0%, var(--eco-res-wash) 100%);
    box-shadow: 0 4px 12px -8px rgba(15, 23, 42, 0.28);
    font-size: clamp(0.72rem, 1.9vw, 0.8rem);
    font-weight: 700;
    letter-spacing: 0.01em;
    line-height: 1.2;
    color: #0f172a;
    white-space: nowrap;
}

body.page-index :is(#ecosistema, .section-suite-lead) .eco-suite-resource[data-tone="blue"]{ --eco-res-tone: #60a5fa; --eco-res-wash: rgba(96, 165, 250, 0.18); }
body.page-index :is(#ecosistema, .section-suite-lead) .eco-suite-resource[data-tone="teal"]{ --eco-res-tone: #2dd4bf; --eco-res-wash: rgba(45, 212, 191, 0.18); }
body.page-index :is(#ecosistema, .section-suite-lead) .eco-suite-resource[data-tone="amber"]{ --eco-res-tone: #fbbf24; --eco-res-wash: rgba(251, 191, 36, 0.2); }
body.page-index :is(#ecosistema, .section-suite-lead) .eco-suite-resource[data-tone="violet"]{ --eco-res-tone: #a78bfa; --eco-res-wash: rgba(167, 139, 250, 0.18); }
body.page-index :is(#ecosistema, .section-suite-lead) .eco-suite-resource[data-tone="rose"]{ --eco-res-tone: #fb7185; --eco-res-wash: rgba(251, 113, 133, 0.18); }
body.page-index :is(#ecosistema, .section-suite-lead) .eco-suite-resource[data-tone="indigo"]{ --eco-res-tone: #818cf8; --eco-res-wash: rgba(129, 140, 248, 0.18); }

body.page-index :is(#ecosistema, .section-suite-lead) .eco-suite-resource-label{
    display: inline-block;
}

@media (max-width: 560px) {
    body.page-index :is(#ecosistema, .section-suite-lead) .eco-suite-resources,
    body.page-index .section-suite-lead .eco-suite-resources {
        gap: 0.38rem;
        max-width: 100%;
    }

    body.page-index :is(#ecosistema, .section-suite-lead) .eco-suite-resource,
    body.page-index .section-suite-lead .eco-suite-resource {
        padding: 0.34rem 0.62rem;
        font-size: 0.7rem;
        white-space: normal;
        text-align: center;
    }
}

body.page-index :is(#ecosistema, .section-suite-lead) .eco-pro-card--intro .operativa-eyebrow,
body.page-index :is(#ecosistema, .section-suite-lead) .eco-pro-badge-line {
    color: #92400e !important;
    border-bottom: 0 !important;
    padding-bottom: 0 !important;
    background: rgba(255, 255, 255, 0.78) !important;
}

body.page-index :is(#ecosistema, .section-suite-lead) .eco-pro-card--intro .eco-title {
    margin: 0 0 0.55rem !important;
    text-align: center;
}

body.page-index :is(#ecosistema, .section-suite-lead) .eco-pro-card--pitch .eco-hero-sub {
    margin: 0 auto !important;
    max-width: 40rem;
}

body.page-index :is(#ecosistema, .section-suite-lead) .eco-pro-card--cms .eco-cms-claim {
    margin: 0 !important;
    padding: 0 !important;
    border: 0 !important;
    border-radius: 0 !important;
    background: transparent !important;
    box-shadow: none !important;
}

body.page-index :is(#ecosistema, .section-suite-lead) .eco-pro-card--cms .eco-cms-badge {
    display: inline-block;
    margin: 0 0 0.55rem;
    padding: 0.3rem 0.75rem;
    font-size: clamp(0.66rem, 1.7vw, 0.74rem);
    font-weight: 800;
    letter-spacing: 0.1em;
    text-transform: uppercase;
    color: #312e81;
    background: rgba(255, 255, 255, 0.78);
    border: 1px solid color-mix(in srgb, #818cf8 35%, #e2e8f0);
    border-radius: 999px;
}

body.page-index :is(#ecosistema, .section-suite-lead) .eco-pro-card--cms .eco-cms-title {
    margin: 0 0 0.55rem !important;
    font-size: clamp(1.1rem, 2.8vw, 1.35rem) !important;
    line-height: 1.25 !important;
    color: #0f172a !important;
    text-wrap: balance;
}

body.page-index :is(#ecosistema, .section-suite-lead) .eco-pro-card--cms .eco-cms-text {
    margin: 0 auto 1rem !important;
    max-width: 40rem;
    font-size: clamp(0.92rem, 2.2vw, 1.02rem) !important;
    line-height: 1.6 !important;
    color: #334155 !important;
}

body.page-index :is(#ecosistema, .section-suite-lead) .eco-pro-card--cms .eco-cms-kpis,
body.page-index :is(#ecosistema, .section-suite-lead) .eco-pro-card--steps .eco-stat-row {
    display: grid !important;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: clamp(0.55rem, 1.5vw, 0.8rem);
    width: 100%;
    max-width: none !important;
    margin: 0 !important;
    padding: 0 !important;
}

body.page-index :is(#ecosistema, .section-suite-lead) .eco-pro-card--cms .eco-cms-kpis li,
body.page-index :is(#ecosistema, .section-suite-lead) .eco-pro-card--steps .eco-stat-row li {
    min-width: 0;
    display: flex;
}

body.page-index :is(#ecosistema, .section-suite-lead) .eco-pro-card--cms button.eco-stat-chip,
body.page-index :is(#ecosistema, .section-suite-lead) .eco-pro-card--steps button.eco-stat-chip {
    --eco-wash: rgba(96, 165, 250, 0.14);
    width: 100%;
    min-width: 0;
    background:
        radial-gradient(ellipse 90% 70% at 8% 0%, var(--eco-glow), transparent 58%),
        linear-gradient(165deg, rgba(255, 255, 255, 0.9) 0%, var(--eco-wash) 100%) !important;
    border: 1px solid color-mix(in srgb, var(--eco-tone) 32%, #e2e8f0) !important;
}

body.page-index :is(#ecosistema, .section-suite-lead) .eco-pro-card--steps button.eco-stat-chip[data-tone="blue"],
body.page-index :is(#ecosistema, .section-suite-lead) .eco-pro-card--cms button.eco-stat-chip[data-tone="blue"] { --eco-wash: rgba(96, 165, 250, 0.16) !important; }
body.page-index :is(#ecosistema, .section-suite-lead) .eco-pro-card--steps button.eco-stat-chip[data-tone="teal"],
body.page-index :is(#ecosistema, .section-suite-lead) .eco-pro-card--cms button.eco-stat-chip[data-tone="teal"] { --eco-wash: rgba(45, 212, 191, 0.16) !important; }
body.page-index :is(#ecosistema, .section-suite-lead) .eco-pro-card--steps button.eco-stat-chip[data-tone="amber"],
body.page-index :is(#ecosistema, .section-suite-lead) .eco-pro-card--cms button.eco-stat-chip[data-tone="amber"] { --eco-wash: rgba(251, 191, 36, 0.18) !important; }
body.page-index :is(#ecosistema, .section-suite-lead) .eco-pro-card--steps button.eco-stat-chip[data-tone="violet"],
body.page-index :is(#ecosistema, .section-suite-lead) .eco-pro-card--cms button.eco-stat-chip[data-tone="violet"] { --eco-wash: rgba(167, 139, 250, 0.16) !important; }
body.page-index :is(#ecosistema, .section-suite-lead) .eco-pro-card--steps button.eco-stat-chip[data-tone="rose"],
body.page-index :is(#ecosistema, .section-suite-lead) .eco-pro-card--cms button.eco-stat-chip[data-tone="rose"] { --eco-wash: rgba(251, 113, 133, 0.15) !important; }
body.page-index :is(#ecosistema, .section-suite-lead) .eco-pro-card--steps button.eco-stat-chip[data-tone="indigo"],
body.page-index :is(#ecosistema, .section-suite-lead) .eco-pro-card--cms button.eco-stat-chip[data-tone="indigo"] { --eco-wash: rgba(129, 140, 248, 0.16) !important; }

@media (max-width: 900px) {
    body.page-index :is(#ecosistema, .section-suite-lead) .eco-pro-card--cms .eco-cms-kpis,
    body.page-index :is(#ecosistema, .section-suite-lead) .eco-pro-card--steps .eco-stat-row {
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }
}

@media (max-width: 560px) {
    body.page-index :is(#ecosistema, .section-suite-lead) .eco-pro-card--cms .eco-cms-kpis,
    body.page-index :is(#ecosistema, .section-suite-lead) .eco-pro-card--steps .eco-stat-row {
        grid-template-columns: 1fr;
    }
}

body.page-index .why-choose-feature p,
body.page-index .testimonial-quote p,
body.page-index .menu-management-text p,
body.page-index .manifesto-paragraph {
    line-height: 1.65;
    color: var(--text-secondary, #7f8c8d);
}

/* Hero top — panel Pro responsive (homologado con secciones APP / site-section-pro) */
body.page-index .hero,
body.page-index .hero .text-box,
body.page-index .hero .layout-element__component {
    color: #ffffff !important;
}

body.page-index .hero .container {
    width: 100%;
    max-width: var(--gc-content-max, 1200px);
    padding-left: var(--gc-gutter, 20px);
    padding-right: var(--gc-gutter, 20px);
    box-sizing: border-box;
}

body.page-index .hero .text-box,
body.page-index .hero .hero-copy-panel {
    width: 100%;
    max-width: min(100%, 46rem);
    margin-left: auto;
    margin-right: auto;
    padding: clamp(1.1rem, 3.2vw, 1.85rem) clamp(1rem, 3vw, 1.75rem);
    border-radius: clamp(14px, 2.5vw, 18px);
    background: linear-gradient(165deg, rgba(8, 15, 30, 0.86), rgba(15, 23, 42, 0.74)) !important;
    backdrop-filter: blur(12px);
    -webkit-backdrop-filter: blur(12px);
    border: 1px solid rgba(255, 255, 255, 0.22) !important;
    box-shadow: 0 18px 48px rgba(0, 0, 0, 0.4);
    box-sizing: border-box;
    text-align: center;
}

body.page-index .hero .hero-copy {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: clamp(0.65rem, 1.8vw, 0.95rem);
    width: 100%;
    margin: 0 0 clamp(1.1rem, 3vw, 1.45rem);
}

body.page-index .hero .hero-copy > * {
    margin: 0 !important;
    max-width: 100%;
}

/* ——— Hero ingress (entrada premium, siempre acaba visible) ——— */
@keyframes gc-hero-rise {
    from {
        opacity: 0;
        transform: translate3d(0, 32px, 0);
        filter: blur(2px);
    }
    to {
        opacity: 1;
        transform: translate3d(0, 0, 0);
        filter: blur(0);
    }
}

@keyframes gc-hero-panel {
    from {
        opacity: 0;
        transform: translate3d(0, 18px, 0) scale(0.985);
    }
    to {
        opacity: 1;
        transform: translate3d(0, 0, 0) scale(1);
    }
}

body.page-index .hero .hero-ingress h1,
body.page-index .hero .hero-ingress p,
body.page-index .hero .hero-ingress .cta-buttons .btn {
    opacity: 0;
    transform: translate3d(0, 32px, 0);
    will-change: opacity, transform, filter;
}

body.page-index .hero.is-ingress-ready .hero-ingress {
    animation: gc-hero-panel 0.7s cubic-bezier(0.22, 1, 0.36, 1) both;
}

body.page-index .hero.is-ingress-ready .hero-ingress h1 {
    animation: gc-hero-rise 0.85s cubic-bezier(0.22, 1, 0.36, 1) 0.12s both;
}

body.page-index .hero.is-ingress-ready .hero-ingress p.hero-lead,
body.page-index .hero.is-ingress-ready .hero-ingress p.body:first-of-type {
    animation: gc-hero-rise 0.8s cubic-bezier(0.22, 1, 0.36, 1) 0.28s both;
}

body.page-index .hero.is-ingress-ready .hero-ingress p.hero-subline {
    animation: gc-hero-rise 0.75s cubic-bezier(0.22, 1, 0.36, 1) 0.42s both;
}

body.page-index .hero.is-ingress-ready .hero-ingress .cta-buttons .btn:nth-child(1) {
    animation: gc-hero-rise 0.7s cubic-bezier(0.22, 1, 0.36, 1) 0.55s both;
}
body.page-index .hero.is-ingress-ready .hero-ingress .cta-buttons .btn:nth-child(2) {
    animation: gc-hero-rise 0.7s cubic-bezier(0.22, 1, 0.36, 1) 0.64s both;
}
body.page-index .hero.is-ingress-ready .hero-ingress .cta-buttons .btn:nth-child(3) {
    animation: gc-hero-rise 0.7s cubic-bezier(0.22, 1, 0.36, 1) 0.73s both;
}
body.page-index .hero.is-ingress-ready .hero-ingress .cta-buttons .btn:nth-child(4) {
    animation: gc-hero-rise 0.7s cubic-bezier(0.22, 1, 0.36, 1) 0.82s both;
}

/* Estado final garantizado (anti opacity:0) */
body.page-index .hero.is-ingress-done .hero-ingress,
body.page-index .hero.is-ingress-done .hero-ingress h1,
body.page-index .hero.is-ingress-done .hero-ingress p,
body.page-index .hero.is-ingress-done .hero-ingress .cta-buttons .btn {
    opacity: 1 !important;
    transform: none !important;
    filter: none !important;
    animation: none !important;
}

body.page-index .hero h1,
body.page-index .hero .hero-title {
    color: #ffffff !important;
    text-shadow:
        0 2px 4px rgba(0, 0, 0, 0.85),
        0 4px 18px rgba(0, 0, 0, 0.55) !important;
    font-size: clamp(1.35rem, 4.6vw, 2.35rem) !important;
    line-height: 1.22 !important;
    font-weight: 800 !important;
    letter-spacing: -0.02em !important;
    max-width: 22ch;
    margin-left: auto !important;
    margin-right: auto !important;
    text-wrap: balance;
    overflow-wrap: anywhere;
    word-break: normal;
    hyphens: auto;
}

body.page-index .hero p,
body.page-index .hero p.body,
body.page-index .hero .hero-lead,
body.page-index .hero .hero-subline,
body.page-index .hero .text-box .body {
    color: rgba(255, 255, 255, 0.96) !important;
    text-shadow:
        0 1px 3px rgba(0, 0, 0, 0.9),
        0 2px 12px rgba(0, 0, 0, 0.55) !important;
    font-size: clamp(0.92rem, 2.35vw, 1.12rem) !important;
    line-height: 1.6 !important;
    font-weight: 500 !important;
    max-width: 38rem;
    margin-left: auto !important;
    margin-right: auto !important;
    text-wrap: pretty;
    overflow-wrap: anywhere;
    word-break: normal;
    hyphens: auto;
}

body.page-index .hero .hero-subline {
    display: inline-block;
    width: fit-content;
    max-width: 100%;
    padding: 0.55rem 0.9rem;
    font-size: clamp(0.88rem, 2.1vw, 1.02rem) !important;
    font-weight: 600 !important;
    line-height: 1.45 !important;
    color: #fff7ed !important;
    background: linear-gradient(135deg, rgba(255, 140, 66, 0.22), rgba(96, 165, 250, 0.16));
    border: 1px solid rgba(255, 255, 255, 0.2);
    border-radius: 12px;
    box-sizing: border-box;
}

body.page-index .hero p strong,
body.page-index .hero .body strong {
    color: #ffd89a !important;
    font-weight: 800 !important;
    text-shadow: 0 1px 4px rgba(0, 0, 0, 0.75) !important;
}

body.page-index .hero .hero-cta,
body.page-index .hero .cta-buttons {
    display: flex;
    flex-wrap: wrap;
    gap: 0.7rem;
    justify-content: center;
    align-items: stretch;
    width: 100%;
    margin: 0;
}

body.page-index .hero .hero-cta .btn,
body.page-index .hero .cta-buttons .btn {
    flex: 1 1 auto;
    min-width: min(100%, 11rem);
    max-width: 100%;
    box-sizing: border-box;
}

/* ——— Botones Pro (MASTER + marca naranja) ——— */
body.page-index .btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 0.4rem;
    padding: 0.85rem 1.55rem;
    border-radius: 15px;
    font-weight: 700;
    font-size: clamp(0.9rem, 2.2vw, 1rem);
    line-height: 1.25;
    text-decoration: none;
    border: 2px solid transparent;
    cursor: pointer;
    transition: transform 0.25s ease, box-shadow 0.25s ease, background 0.25s ease, color 0.25s ease, border-color 0.25s ease;
    box-shadow: 0 4px 15px rgba(0, 0, 0, 0.12);
}

/* Eco CTA — misma jerarquía Pro que el resto del sitio */
body.page-index .btn-primary {
    background: linear-gradient(135deg, #ff8c42 0%, #e85d04 100%) !important;
    border-color: #e85d04 !important;
    color: #fff !important;
    box-shadow: 0 4px 16px rgba(232, 93, 4, 0.32) !important;
}

body.page-index .master-platform-cta .btn-primary {
    background: linear-gradient(135deg, #ff8c42 0%, #e85d04 100%) !important;
    border: 2px solid #e85d04 !important;
    color: #fff !important;
    box-shadow: 0 8px 22px rgba(232, 93, 4, 0.28) !important;
}

body.page-index .master-platform-cta .btn-secondary {
    background: #fff !important;
    border: 2px solid #60a5fa !important;
    color: #2563eb !important;
    box-shadow: 0 2px 10px rgba(96, 165, 250, 0.14) !important;
}

body.page-index .master-platform-cta .btn-demo,
body.page-index .master-platform-cta .btn-suite {
    background: #fff !important;
    border: 2px solid rgba(255, 140, 66, 0.55) !important;
    color: #e85d04 !important;
    box-shadow: 0 2px 10px rgba(232, 93, 4, 0.1) !important;
}

body.page-index .btn-primary:hover {
    transform: translateY(-2px);
    filter: brightness(1.05);
    box-shadow: 0 8px 26px rgba(232, 93, 4, 0.45) !important;
    color: #fff !important;
}

body.page-index .btn-secondary {
    background: #fff !important;
    border-color: #60a5fa !important;
    color: #2563eb !important;
    box-shadow: 0 2px 10px rgba(59, 130, 246, 0.14) !important;
}

body.page-index .btn-secondary:hover {
    background: linear-gradient(135deg, #eff6ff 0%, #dbeafe 100%) !important;
    border-color: #3b82f6 !important;
    color: #1e40af !important;
    transform: translateY(-2px);
}

/* Hero sobre vídeo: contraste forzado */
body.page-index .hero .btn-primary {
    background: linear-gradient(135deg, #ff8c42 0%, #e85d04 100%) !important;
    border-color: #e85d04 !important;
    color: #fff !important;
}

body.page-index .hero .btn-secondary {
    background: rgba(255, 255, 255, 0.16) !important;
    border-color: rgba(255, 255, 255, 0.95) !important;
    color: #fff !important;
    backdrop-filter: blur(8px);
}

body.page-index .hero .btn-secondary:hover {
    background: #fff !important;
    color: #2563eb !important;
    border-color: #fff !important;
}

body.page-index .cta-buttons {
    gap: 0.75rem;
}

/* ——— Emoji boxes estilo Analíticas Pro (solo fichas why-choose) ——— */
body.page-index .why-choose-feature .why-choose-icon,
body.page-index .why-choose-feature .gc-emoji-box {
    display: inline-grid !important;
    place-items: center;
    width: 2.75rem;
    height: 2.75rem;
    margin: 0 auto 0.75rem;
    font-size: 1.35rem !important;
    line-height: 1;
    border-radius: 12px;
    background: rgba(251, 146, 60, 0.18);
    border: 1px solid rgba(251, 146, 60, 0.45);
    box-shadow: 0 0 0 3px rgba(234, 88, 12, 0.12);
    font-family: "Apple Color Emoji", "Segoe UI Emoji", "Noto Color Emoji", sans-serif;
}

/* KPIs / pilares: emoji compacto en fila con el texto (sin desborde) */
body.page-index .operativa-day-kpis .eco-stat-chip-icon.gc-emoji-box,
body.page-index .eco-stat-row .eco-stat-chip-icon.gc-emoji-box,
body.page-index .eco-cms-kpis .eco-stat-chip-icon.gc-emoji-box,
body.page-index .master-pillar-icon.gc-emoji-box,
body.page-index .operativa-cta-kpi-icon {
    display: inline-grid !important;
    place-items: center;
    flex: 0 0 2.35rem !important;
    width: 2.35rem !important;
    height: 2.35rem !important;
    min-width: 2.35rem !important;
    max-width: 2.35rem !important;
    margin: 0 !important;
    font-size: 1.1rem !important;
    line-height: 1 !important;
    overflow: hidden;
    box-sizing: border-box;
}

body.page-index .why-choose-feature[data-tone="blue"] .why-choose-icon {
    background: rgba(96, 165, 250, 0.18);
    border-color: rgba(96, 165, 250, 0.45);
    box-shadow: 0 0 0 3px rgba(37, 99, 235, 0.12);
}
body.page-index .why-choose-feature[data-tone="teal"] .why-choose-icon {
    background: rgba(45, 212, 191, 0.18);
    border-color: rgba(45, 212, 191, 0.45);
    box-shadow: 0 0 0 3px rgba(13, 148, 136, 0.12);
}
body.page-index .why-choose-feature[data-tone="amber"] .why-choose-icon {
    background: rgba(251, 191, 36, 0.18);
    border-color: rgba(251, 191, 36, 0.45);
    box-shadow: 0 0 0 3px rgba(245, 158, 11, 0.12);
}
body.page-index .why-choose-feature[data-tone="violet"] .why-choose-icon {
    background: rgba(167, 139, 250, 0.18);
    border-color: rgba(167, 139, 250, 0.45);
    box-shadow: 0 0 0 3px rgba(124, 58, 237, 0.12);
}
body.page-index .why-choose-feature[data-tone="rose"] .why-choose-icon {
    background: rgba(251, 113, 133, 0.18);
    border-color: rgba(251, 113, 133, 0.45);
    box-shadow: 0 0 0 3px rgba(225, 29, 72, 0.12);
}
body.page-index .why-choose-feature[data-tone="indigo"] .why-choose-icon {
    background: rgba(129, 140, 248, 0.18);
    border-color: rgba(129, 140, 248, 0.45);
    box-shadow: 0 0 0 3px rgba(79, 70, 229, 0.12);
}

/* ——— Bridge lead / promo + audiencia Pro ——— */
body.page-index .eco-bridge-stack {
    max-width: min(100%, 58rem);
    margin: 0 auto clamp(1rem, 2.5vw, 1.5rem);
}

body.page-index .eco-bridge-card--lead .eco-bridge-kicker {
    color: #0f766e !important;
    border-bottom: 0 !important;
    padding-bottom: 0 !important;
    background: rgba(255, 255, 255, 0.78) !important;
}

body.page-index .eco-bridge-card--lead .master-lead,
body.page-index .eco-bridge-card--promo .eco-promo-line {
    margin: 0 auto !important;
    max-width: 40rem;
    padding: 0 !important;
    background: transparent !important;
    border: 0 !important;
    box-shadow: none !important;
    text-align: center;
    font-size: clamp(0.94rem, 2.3vw, 1.06rem) !important;
    line-height: 1.65 !important;
    color: #334155 !important;
}

body.page-index .eco-audience-stack {
    max-width: min(100%, 58rem);
    margin: clamp(1rem, 2.5vw, 1.75rem) auto 0;
}

body.page-index .eco-audience-stack-label {
    display: block;
    width: fit-content;
    max-width: 100%;
    margin: 0 auto 0.85rem !important;
    padding: 0.35rem 0.85rem;
    font-size: clamp(0.68rem, 1.8vw, 0.76rem) !important;
    font-weight: 800 !important;
    letter-spacing: 0.12em !important;
    text-transform: uppercase !important;
    text-align: center;
    color: #1e3a8a !important;
    background: rgba(255, 255, 255, 0.72);
    border: 1px solid color-mix(in srgb, #818cf8 35%, #e2e8f0);
    border-radius: 999px;
    box-sizing: border-box;
}

body.page-index .master-audience-grid--pro {
    display: grid !important;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: clamp(0.75rem, 2vw, 1.1rem);
    width: 100%;
    margin: 0 !important;
}

body.page-index .eco-audience-card.operativa-pro-card {
    text-align: left;
    height: 100%;
    box-sizing: border-box;
}

body.page-index .eco-audience-card[data-tone="teal"] {
    --op-card-tone: #2dd4bf;
    --op-card-glow: rgba(45, 212, 191, 0.36);
    --op-card-soft: rgba(45, 212, 191, 0.2);
}
body.page-index .eco-audience-card[data-tone="violet"] {
    --op-card-tone: #a78bfa;
    --op-card-glow: rgba(167, 139, 250, 0.36);
    --op-card-soft: rgba(167, 139, 250, 0.2);
}

body.page-index .eco-audience-card-icon {
    display: inline-grid !important;
    place-items: center;
    width: 2.75rem;
    height: 2.75rem;
    margin: 0 0 0.75rem;
    font-size: 1.35rem;
    border-radius: 12px;
    background: rgba(255, 255, 255, 0.85);
    border: 1px solid color-mix(in srgb, var(--op-card-tone, #60a5fa) 35%, #e2e8f0);
}

body.page-index .eco-audience-card h3 {
    margin: 0 0 0.4rem !important;
    font-size: clamp(1.12rem, 2.6vw, 1.28rem) !important;
    font-weight: 800 !important;
    color: #0f172a !important;
    line-height: 1.25 !important;
}

body.page-index .eco-audience-card .audience-tagline {
    margin: 0 0 1rem !important;
    font-size: clamp(0.9rem, 2.1vw, 0.98rem) !important;
    line-height: 1.5 !important;
    color: #475569 !important;
}

body.page-index .eco-audience-kpis {
    display: grid !important;
    grid-template-columns: 1fr;
    gap: 0.5rem;
    list-style: none;
    margin: 0;
    padding: 0;
}

body.page-index .eco-audience-kpi {
    --aud-tone: #60a5fa;
    --aud-wash: rgba(96, 165, 250, 0.14);
    display: flex;
    align-items: center;
    gap: 0.55rem;
    margin: 0;
    padding: 0.65rem 0.75rem;
    border-radius: 14px;
    border: 1px solid color-mix(in srgb, var(--aud-tone) 32%, #e2e8f0);
    border-top: 3px solid var(--aud-tone);
    background:
        radial-gradient(ellipse 90% 70% at 0% 0%, color-mix(in srgb, var(--aud-tone) 28%, transparent), transparent 58%),
        linear-gradient(165deg, rgba(255, 255, 255, 0.94) 0%, var(--aud-wash) 100%);
    box-shadow: 0 8px 18px -14px rgba(15, 23, 42, 0.28);
}

body.page-index .eco-audience-kpi[data-tone="blue"] { --aud-tone: #60a5fa; --aud-wash: rgba(96, 165, 250, 0.16); }
body.page-index .eco-audience-kpi[data-tone="teal"] { --aud-tone: #2dd4bf; --aud-wash: rgba(45, 212, 191, 0.16); }
body.page-index .eco-audience-kpi[data-tone="amber"] { --aud-tone: #fbbf24; --aud-wash: rgba(251, 191, 36, 0.18); }
body.page-index .eco-audience-kpi[data-tone="violet"] { --aud-tone: #a78bfa; --aud-wash: rgba(167, 139, 250, 0.16); }
body.page-index .eco-audience-kpi[data-tone="rose"] { --aud-tone: #fb7185; --aud-wash: rgba(251, 113, 133, 0.15); }
body.page-index .eco-audience-kpi[data-tone="indigo"] { --aud-tone: #818cf8; --aud-wash: rgba(129, 140, 248, 0.16); }

body.page-index .eco-audience-kpi-icon {
    flex: 0 0 1.85rem;
    width: 1.85rem;
    height: 1.85rem;
    display: inline-grid;
    place-items: center;
    border-radius: 10px;
    background: #fff;
    border: 1px solid color-mix(in srgb, var(--aud-tone) 30%, #e2e8f0);
    font-size: 0.95rem;
    line-height: 1;
}

body.page-index .eco-audience-kpi-label {
    font-size: clamp(0.84rem, 2vw, 0.92rem);
    font-weight: 700;
    color: #0f172a;
    line-height: 1.35;
}

body.page-index .eco-audience-card .master-accordion {
    margin-top: 0.35rem;
}

@media (max-width: 760px) {
    body.page-index .master-audience-grid--pro {
        grid-template-columns: 1fr;
    }
}

/* ——— Why choose: stack Pro homologado ——— */
body.page-index .section-why-choose-pro {
    padding: clamp(0.5rem, 2vw, 1rem) 0 clamp(1.5rem, 3.5vw, 2.25rem) !important;
    background: transparent !important;
    margin: 0 !important;
}

body.page-index .why-choose-pro-stack {
    max-width: min(100%, 58rem);
    margin: 0 auto;
}

body.page-index .why-choose-card--intro .why-choose-title {
    margin: 0 0 0.55rem !important;
    font-size: clamp(1.35rem, 3.6vw, 2rem) !important;
    line-height: 1.22 !important;
    color: #0f172a !important;
    text-wrap: balance;
}

body.page-index .why-choose-card--intro .operativa-eyebrow {
    color: #92400e !important;
    border-bottom: 0 !important;
    padding-bottom: 0 !important;
    background: rgba(255, 255, 255, 0.78) !important;
}

body.page-index .why-choose-card--intro .why-choose-lead {
    margin: 0 auto !important;
    max-width: 40rem;
}

body.page-index .why-choose-card--grid .operativa-cta-line {
    color: #4c1d95 !important;
}

body.page-index .why-choose-card--grid .why-choose-features {
    display: grid !important;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: clamp(0.65rem, 1.6vw, 0.9rem);
    width: 100%;
    margin: 0 !important;
}

/* ——— Cards Pro (Insights) ——— */
body.page-index .why-choose-feature {
    --card-tone: #ff8c42;
    --card-glow: rgba(255, 140, 66, 0.28);
    --card-wash: rgba(255, 140, 66, 0.14);
    background:
        radial-gradient(ellipse 90% 60% at 50% 0%, var(--card-glow), transparent 58%),
        linear-gradient(165deg, rgba(255, 255, 255, 0.94) 0%, var(--card-wash) 100%) !important;
    border: 1px solid color-mix(in srgb, var(--card-tone) 36%, #e2e8f0) !important;
    border-top: 4px solid var(--card-tone) !important;
    border-radius: clamp(14px, 2.4vw, 16px) !important;
    box-shadow: 0 12px 28px -16px rgba(15, 23, 42, 0.3) !important;
    padding: clamp(1.05rem, 2.6vw, 1.35rem) !important;
    text-align: center;
    min-width: 0;
}

body.page-index .why-choose-feature[data-tone="blue"] { --card-tone: #60a5fa; --card-glow: rgba(96, 165, 250, 0.32); --card-wash: rgba(96, 165, 250, 0.16); }
body.page-index .why-choose-feature[data-tone="teal"] { --card-tone: #2dd4bf; --card-glow: rgba(45, 212, 191, 0.32); --card-wash: rgba(45, 212, 191, 0.16); }
body.page-index .why-choose-feature[data-tone="amber"] { --card-tone: #fbbf24; --card-glow: rgba(251, 191, 36, 0.34); --card-wash: rgba(251, 191, 36, 0.18); }
body.page-index .why-choose-feature[data-tone="violet"] { --card-tone: #a78bfa; --card-glow: rgba(167, 139, 250, 0.32); --card-wash: rgba(167, 139, 250, 0.16); }
body.page-index .why-choose-feature[data-tone="rose"] { --card-tone: #fb7185; --card-glow: rgba(251, 113, 133, 0.3); --card-wash: rgba(251, 113, 133, 0.15); }
body.page-index .why-choose-feature[data-tone="indigo"] { --card-tone: #818cf8; --card-glow: rgba(129, 140, 248, 0.32); --card-wash: rgba(129, 140, 248, 0.16); }

body.page-index .why-choose-feature::before {
    content: none !important;
}

body.page-index .why-choose-feature::after {
    content: none !important;
}

body.page-index .why-choose-feature h3 {
    font-size: clamp(1rem, 2.3vw, 1.12rem) !important;
    font-weight: 800;
    color: var(--pro-ink) !important;
    margin: 0 0 0.5rem !important;
    line-height: 1.3 !important;
    text-wrap: balance;
}

body.page-index .why-choose-feature p {
    font-size: clamp(0.88rem, 2.1vw, 0.96rem) !important;
    color: #475569 !important;
    line-height: 1.55 !important;
    margin: 0 !important;
    text-wrap: pretty;
}

@media (max-width: 900px) {
    body.page-index .why-choose-card--grid .why-choose-features {
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }
}

@media (max-width: 560px) {
    body.page-index .why-choose-card--grid .why-choose-features {
        grid-template-columns: 1fr;
    }
}

body.page-index .why-choose-feature:hover {
    transform: translateY(-5px);
    box-shadow: 0 18px 40px -12px var(--card-glow) !important;
    border-color: var(--card-tone) !important;
}

/* Testimonials (legacy) */
body.page-index .testimonial-card {
    background:
        radial-gradient(ellipse 70% 50% at 0% 0%, rgba(44, 90, 160, 0.08), transparent 55%),
        linear-gradient(165deg, #fff 0%, #f8fafc 100%) !important;
    border: 1px solid var(--pro-line) !important;
    border-top: 3px solid var(--suite-blue) !important;
    border-radius: var(--pro-radius) !important;
    box-shadow: var(--pro-shadow) !important;
    padding: clamp(1.25rem, 3vw, 1.75rem) !important;
    text-align: left !important;
}

body.page-index .testimonial-card::before {
    content: none !important;
}

body.page-index .testimonial-card:hover {
    border-color: var(--suite-blue-light) !important;
    box-shadow: 0 16px 36px rgba(44, 90, 160, 0.14) !important;
}

body.page-index .testimonial-quote p {
    font-size: clamp(0.98rem, 2.3vw, 1.08rem) !important;
    color: var(--pro-ink) !important;
    text-align: left;
}

body.page-index .testimonial-caption {
    background: linear-gradient(135deg, rgba(44, 90, 160, 0.06), rgba(212, 175, 55, 0.08)) !important;
    border-top: 1px solid var(--pro-line) !important;
}

body.page-index .testimonial-media {
    border-color: var(--pro-line) !important;
}

/* Operativa — benefit cards */
body.page-index .menu-benefit-card {
    background:
        radial-gradient(ellipse 80% 50% at 50% 0%, rgba(255, 140, 66, 0.12), transparent 58%),
        linear-gradient(165deg, #fff 0%, #f8fafc 100%) !important;
    border: 1px solid var(--pro-line) !important;
    border-top: 3px solid var(--accent-orange) !important;
    border-radius: var(--pro-radius) !important;
    box-shadow: var(--pro-shadow) !important;
}

body.page-index .menu-benefit-card:nth-child(2) { border-top-color: #60a5fa !important; }
body.page-index .menu-benefit-card:nth-child(3) { border-top-color: #2dd4bf !important; }
body.page-index .menu-benefit-card:nth-child(4) { border-top-color: #a78bfa !important; }
body.page-index .menu-benefit-card:nth-child(5) { border-top-color: #fbbf24 !important; }
body.page-index .menu-benefit-card:nth-child(6) { border-top-color: #fb7185 !important; }

body.page-index .menu-benefit-card:hover {
    transform: translateY(-4px);
    box-shadow: 0 16px 36px rgba(255, 140, 66, 0.14) !important;
}

body.page-index .device-card {
    background:
        radial-gradient(ellipse 80% 50% at 50% 0%, rgba(44, 90, 160, 0.1), transparent 58%),
        #fff !important;
    border: 1px solid var(--pro-line) !important;
    border-top: 3px solid var(--suite-blue) !important;
    border-radius: var(--pro-radius) !important;
    box-shadow: var(--pro-shadow) !important;
    padding: clamp(1rem, 2.5vw, 1.25rem) !important;
}

body.page-index .device-card:nth-child(1) { border-top-color: #60a5fa !important; }
body.page-index .device-card:nth-child(2) { border-top-color: #2dd4bf !important; }
body.page-index .device-card:nth-child(3) { border-top-color: #fbbf24 !important; }
body.page-index .device-card:nth-child(4) { border-top-color: #a78bfa !important; }
body.page-index .device-card:nth-child(5) { border-top-color: #fb923c !important; }
body.page-index .device-card:nth-child(6) { border-top-color: #fb7185 !important; }

body.page-index .device-icon {
    display: inline-grid !important;
    place-items: center;
    width: 2.75rem;
    height: 2.75rem;
    margin-bottom: 0.65rem;
    font-size: 1.35rem !important;
    border-radius: 12px;
    background: rgba(96, 165, 250, 0.18);
    border: 1px solid rgba(96, 165, 250, 0.4);
    box-shadow: 0 0 0 3px rgba(37, 99, 235, 0.1);
    font-family: "Apple Color Emoji", "Segoe UI Emoji", "Noto Color Emoji", sans-serif;
}

body.page-index .device-card h4 {
    font-size: clamp(1rem, 2.4vw, 1.12rem) !important;
    color: var(--pro-ink) !important;
    line-height: 1.3;
}

body.page-index .device-card p {
    font-size: clamp(0.9rem, 2.2vw, 0.98rem) !important;
    color: var(--pro-muted) !important;
    line-height: 1.55 !important;
}

body.page-index .operativa-resource-chip {
    /* Colores por data-tone / style inline — no forzar azul suite */
    border-radius: 999px !important;
    font-weight: 700;
}

body.page-index .operativa-resource-chip:hover {
    filter: brightness(1.03);
}

/* Eyebrow clásico (día a día) — no aplica al stack Pro */
body.page-index .operativa-lead-card .operativa-eyebrow {
    color: var(--accent-orange-dark) !important;
    letter-spacing: 0.08em !important;
    padding-bottom: 0.25rem;
    border-bottom: 2px solid var(--suite-gold);
    display: inline-block;
}

body.page-index .operativa-pro-card--intro .operativa-eyebrow {
    color: #1e3a8a !important;
    border-bottom: 0 !important;
    padding-bottom: 0 !important;
}

/* ——— Cumplimiento y trazabilidad — stack Pro ——— */
body.page-index .section-eco-legal-pro {
    padding: clamp(2rem, 4.5vw, 3rem) 0 !important;
    background:
        radial-gradient(ellipse 80% 50% at 50% 0%, rgba(251, 113, 133, 0.12), transparent 55%),
        linear-gradient(180deg, #ffffff 0%, #fff7f8 48%, #f8fafc 100%) !important;
}

body.page-index .eco-legal-stack {
    max-width: min(100%, 58rem);
    margin: 0 auto;
    scroll-margin-top: 6rem;
}

body.page-index .eco-legal-card--intro .eco-legal-badge-line,
body.page-index .eco-legal-card--intro .operativa-eyebrow {
    color: #9f1239 !important;
    background: rgba(255, 255, 255, 0.78) !important;
    border-bottom: 0 !important;
    padding-bottom: 0 !important;
}

body.page-index .eco-legal-title {
    margin: 0 0 0.55rem !important;
    font-size: clamp(1.35rem, 3.6vw, 2rem) !important;
    font-weight: 800 !important;
    line-height: 1.22 !important;
    color: #0f172a !important;
    text-wrap: balance;
}

body.page-index .eco-legal-card--intro .operativa-pro-card-text {
    margin: 0 auto !important;
}

body.page-index .eco-legal-card--kpis .operativa-cta-line {
    color: #92400e !important;
}

body.page-index .eco-legal-card--refs .operativa-cta-line {
    color: #312e81 !important;
}

body.page-index .eco-legal-kpis {
    display: grid !important;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 0.55rem;
    width: 100%;
    margin: 0;
    padding: 0;
    list-style: none;
}

body.page-index .eco-legal-card--refs .eco-legal-chips {
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    gap: 0.5rem;
    list-style: none;
    margin: 0;
    padding: 0;
}

body.page-index .eco-legal-card--refs .eco-legal-chip {
    display: inline-flex;
    align-items: center;
    gap: 0.35rem;
    padding: 0.42rem 0.8rem;
    border-radius: 999px;
    font-size: clamp(0.74rem, 1.9vw, 0.82rem);
    font-weight: 700;
    text-decoration: none;
    color: #0f172a;
    background: linear-gradient(165deg, rgba(255, 255, 255, 0.94) 0%, rgba(129, 140, 248, 0.14) 100%);
    border: 1px solid color-mix(in srgb, #818cf8 35%, #e2e8f0);
    border-top: 2px solid #818cf8;
    box-shadow: 0 6px 14px -10px rgba(15, 23, 42, 0.28);
    transition: transform 0.2s ease, border-color 0.2s ease;
}

body.page-index .eco-legal-card--refs .eco-legal-chip:hover,
body.page-index .eco-legal-card--refs .eco-legal-chip:focus-visible {
    transform: translateY(-2px);
    border-color: #818cf8;
    outline: none;
}

@media (max-width: 560px) {
    body.page-index .eco-legal-kpis {
        grid-template-columns: 1fr;
    }
}

/* ——— Beneficios con demo en vídeo — stack Pro ——— */
body.page-index .section-operativa-depth {
    padding: clamp(2rem, 4.5vw, 3rem) 0 !important;
    background:
        radial-gradient(ellipse 80% 50% at 50% 0%, rgba(96, 165, 250, 0.1), transparent 55%),
        linear-gradient(180deg, #ffffff 0%, #f8fafc 100%) !important;
}

body.page-index .operativa-depth-stack {
    max-width: min(100%, 58rem);
    margin: 0 auto;
}

body.page-index .operativa-depth-card--intro .operativa-eyebrow {
    color: #1e3a8a !important;
    background: rgba(255, 255, 255, 0.78) !important;
    border-bottom: 0 !important;
    padding-bottom: 0 !important;
}

body.page-index .operativa-depth-card--intro .operativa-depth-title {
    margin: 0 0 0.55rem !important;
    font-size: clamp(1.35rem, 3.6vw, 2rem) !important;
    line-height: 1.22 !important;
    color: #0f172a !important;
    text-wrap: balance;
}

body.page-index .operativa-depth-card--intro .operativa-depth-label {
    margin: 0 auto !important;
    max-width: 40rem;
    font-size: clamp(0.95rem, 2.3vw, 1.06rem) !important;
    font-weight: 600 !important;
    color: #334155 !important;
    letter-spacing: normal !important;
    text-transform: none !important;
}

body.page-index .operativa-depth-card--videos .operativa-cta-line { color: #4c1d95 !important; }
body.page-index .operativa-depth-card--devices .operativa-cta-line { color: #312e81 !important; }

body.page-index .operativa-depth-card--videos .menu-benefits-cards {
    display: grid !important;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: clamp(0.65rem, 1.6vw, 0.9rem);
    margin: 0 !important;
    width: 100%;
}

body.page-index .operativa-depth-card--videos .menu-benefit-card {
    --bn-tone: #60a5fa;
    --bn-glow: rgba(96, 165, 250, 0.26);
    --bn-wash: rgba(96, 165, 250, 0.14);
    min-width: 0;
    background:
        radial-gradient(ellipse 90% 55% at 50% 0%, var(--bn-glow), transparent 58%),
        linear-gradient(165deg, rgba(255, 255, 255, 0.94) 0%, var(--bn-wash) 100%) !important;
    border: 1px solid color-mix(in srgb, var(--bn-tone) 34%, #e2e8f0) !important;
    border-top: 4px solid var(--bn-tone) !important;
}

body.page-index .operativa-depth-card--videos .menu-benefit-card[data-tone="blue"] { --bn-tone: #60a5fa; --bn-glow: rgba(96, 165, 250, 0.28); --bn-wash: rgba(96, 165, 250, 0.15); }
body.page-index .operativa-depth-card--videos .menu-benefit-card[data-tone="teal"] { --bn-tone: #2dd4bf; --bn-glow: rgba(45, 212, 191, 0.28); --bn-wash: rgba(45, 212, 191, 0.15); }
body.page-index .operativa-depth-card--videos .menu-benefit-card[data-tone="amber"] { --bn-tone: #fbbf24; --bn-glow: rgba(251, 191, 36, 0.3); --bn-wash: rgba(251, 191, 36, 0.17); }
body.page-index .operativa-depth-card--videos .menu-benefit-card[data-tone="violet"] { --bn-tone: #a78bfa; --bn-glow: rgba(167, 139, 250, 0.28); --bn-wash: rgba(167, 139, 250, 0.15); }
body.page-index .operativa-depth-card--videos .menu-benefit-card[data-tone="rose"] { --bn-tone: #fb7185; --bn-glow: rgba(251, 113, 133, 0.26); --bn-wash: rgba(251, 113, 133, 0.14); }
body.page-index .operativa-depth-card--videos .menu-benefit-card[data-tone="indigo"] { --bn-tone: #818cf8; --bn-glow: rgba(129, 140, 248, 0.28); --bn-wash: rgba(129, 140, 248, 0.15); }

/* Web profesional + panel en la nube — tarjeta Pro con KPIs */
body.page-index .operativa-depth-card--web {
    scroll-margin-top: 6rem;
}

body.page-index .operativa-depth-card--web .operativa-eyebrow {
    color: #92400e !important;
    background: rgba(255, 255, 255, 0.78) !important;
    border-bottom: 0 !important;
    padding-bottom: 0 !important;
}

body.page-index .operativa-depth-web-title {
    margin: 0 0 0.55rem !important;
    font-size: clamp(1.2rem, 3vw, 1.45rem) !important;
    font-weight: 800 !important;
    line-height: 1.25 !important;
    color: #0f172a !important;
    text-wrap: balance;
}

body.page-index .operativa-depth-card--web .operativa-pro-card-text {
    margin: 0 auto 1rem !important;
}

body.page-index .operativa-web-cloud-kpis {
    display: grid !important;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 0.55rem;
    width: 100%;
    max-width: 40rem;
    margin: 0 auto;
    padding: 0;
    list-style: none;
    text-align: left;
}

@media (max-width: 560px) {
    body.page-index .operativa-web-cloud-kpis {
        grid-template-columns: 1fr;
    }
}

body.page-index .operativa-depth-card--devices .device-showcase-extended {
    display: grid !important;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: clamp(0.65rem, 1.6vw, 0.9rem);
    margin: 0 !important;
    width: 100%;
}

body.page-index .operativa-depth-card--devices .device-card {
    --dv-tone: #60a5fa;
    --dv-glow: rgba(96, 165, 250, 0.28);
    --dv-wash: rgba(96, 165, 250, 0.14);
    margin: 0 !important;
    background:
        radial-gradient(ellipse 90% 55% at 50% 0%, var(--dv-glow), transparent 58%),
        linear-gradient(165deg, rgba(255, 255, 255, 0.94) 0%, var(--dv-wash) 100%) !important;
    border: 1px solid color-mix(in srgb, var(--dv-tone) 34%, #e2e8f0) !important;
    border-top: 4px solid var(--dv-tone) !important;
    border-radius: 14px !important;
    box-shadow: 0 12px 28px -16px rgba(15, 23, 42, 0.28) !important;
    padding: clamp(0.95rem, 2.4vw, 1.2rem) !important;
}

body.page-index .operativa-depth-card--devices .device-card[data-tone="blue"] { --dv-tone: #60a5fa; --dv-glow: rgba(96, 165, 250, 0.3); --dv-wash: rgba(96, 165, 250, 0.16); }
body.page-index .operativa-depth-card--devices .device-card[data-tone="teal"] { --dv-tone: #2dd4bf; --dv-glow: rgba(45, 212, 191, 0.3); --dv-wash: rgba(45, 212, 191, 0.16); }
body.page-index .operativa-depth-card--devices .device-card[data-tone="amber"] { --dv-tone: #fbbf24; --dv-glow: rgba(251, 191, 36, 0.32); --dv-wash: rgba(251, 191, 36, 0.18); }
body.page-index .operativa-depth-card--devices .device-card[data-tone="violet"] { --dv-tone: #a78bfa; --dv-glow: rgba(167, 139, 250, 0.3); --dv-wash: rgba(167, 139, 250, 0.16); }
body.page-index .operativa-depth-card--devices .device-card[data-tone="rose"] { --dv-tone: #fb7185; --dv-glow: rgba(251, 113, 133, 0.28); --dv-wash: rgba(251, 113, 133, 0.15); }
body.page-index .operativa-depth-card--devices .device-card[data-tone="indigo"] { --dv-tone: #818cf8; --dv-glow: rgba(129, 140, 248, 0.3); --dv-wash: rgba(129, 140, 248, 0.16); }

@media (max-width: 900px) {
    body.page-index .operativa-depth-card--videos .menu-benefits-cards,
    body.page-index .operativa-depth-card--devices .device-showcase-extended {
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }
}

@media (max-width: 560px) {
    body.page-index .operativa-depth-card--videos .menu-benefits-cards,
    body.page-index .operativa-depth-card--devices .device-showcase-extended {
        grid-template-columns: 1fr;
    }
}

body.page-index .web-management-card {
    border: 2px solid var(--suite-blue) !important;
    border-top: 4px solid var(--accent-orange) !important;
    border-radius: var(--pro-radius) !important;
    box-shadow: var(--pro-shadow) !important;
    background: linear-gradient(165deg, #fff 0%, #f8fafc 100%) !important;
}

body.page-index .web-card-header {
    border-bottom-color: var(--suite-gold) !important;
}

/* ——— Manifiesto + CTA final — stack Pro ——— */
body.page-index .section-manifesto-pro.manifesto {
    padding: clamp(2rem, 4.5vw, 3rem) 0 !important;
    background:
        radial-gradient(ellipse 80% 50% at 50% 0%, rgba(251, 191, 36, 0.14), transparent 55%),
        linear-gradient(180deg, #ffffff 0%, #fffbeb 45%, #f8fafc 100%) !important;
}

body.page-index .manifesto-pro-stack {
    max-width: min(100%, 58rem);
    margin: 0 auto;
}

body.page-index .manifesto-card--intro .operativa-eyebrow {
    color: #92400e !important;
    background: rgba(255, 255, 255, 0.78) !important;
    border-bottom: 0 !important;
    padding-bottom: 0 !important;
}

body.page-index .manifesto-card--intro .manifesto-title {
    margin: 0 0 0.55rem !important;
    font-size: clamp(1.35rem, 3.6vw, 2rem) !important;
    font-weight: 800 !important;
    line-height: 1.22 !important;
    color: #0f172a !important;
    text-wrap: balance;
}

body.page-index .manifesto-card--intro .manifesto-title::before {
    content: none !important;
}

body.page-index .manifesto-card--quote .manifesto-highlight,
body.page-index .manifesto-card--quote .operativa-quote--soft {
    margin: 0 !important;
    padding: 0.25rem 0.15rem !important;
    background: transparent !important;
    border: 0 !important;
    border-left: 0 !important;
    border-radius: 0 !important;
    box-shadow: none !important;
    font-size: clamp(1.02rem, 2.4vw, 1.16rem) !important;
    font-weight: 700 !important;
    color: #0f172a !important;
    text-wrap: balance;
}

body.page-index .manifesto-card--quote .manifesto-highlight em {
    font-style: normal;
    font-weight: 800;
}

body.page-index .manifesto-highlight {
    background: transparent !important;
    border-left: 0 !important;
}

body.page-index .section-final-cta-pro.index-final-cta {
    padding: clamp(2rem, 4.5vw, 3rem) 0 clamp(2.5rem, 5vw, 3.5rem) !important;
    text-align: center;
    background:
        radial-gradient(ellipse 80% 50% at 50% 0%, rgba(129, 140, 248, 0.16), transparent 55%),
        linear-gradient(180deg, #ffffff 0%, #eef2ff 48%, #f8fafc 100%) !important;
    border-top: 0 !important;
}

body.page-index .final-cta-pro-stack {
    max-width: min(100%, 58rem);
    margin: 0 auto;
}

body.page-index .final-cta-card .operativa-eyebrow {
    color: #312e81 !important;
    background: rgba(255, 255, 255, 0.78) !important;
    border-bottom: 0 !important;
    padding-bottom: 0 !important;
}

body.page-index .final-cta-title {
    margin: 0 0 0.55rem !important;
    font-size: clamp(1.35rem, 3.6vw, 2rem) !important;
    font-weight: 800 !important;
    line-height: 1.22 !important;
    color: #0f172a !important;
    text-wrap: balance;
}

body.page-index .final-cta-lead {
    margin: 0 auto 1.15rem !important;
    max-width: 36rem;
}

body.page-index .final-cta-actions,
body.page-index .index-final-cta-actions {
    display: flex !important;
    flex-wrap: wrap;
    justify-content: center;
    align-items: stretch;
    gap: 0.65rem;
    margin: 0.35rem auto 0;
    max-width: 48rem;
}

body.page-index .final-cta-actions .btn,
body.page-index .index-final-cta-actions .btn {
    flex: 1 1 auto;
    min-width: min(100%, 11.5rem);
    justify-content: center;
}

@media (max-width: 560px) {
    body.page-index .final-cta-actions .btn,
    body.page-index .index-final-cta-actions .btn {
        width: 100%;
        min-width: 0;
        flex: 1 1 100%;
    }
}

/* Section titles / kickers */
body.page-index .section-title,
body.page-index .why-choose-content h2 {
    position: relative;
}

body.page-index .menu-management-text h3 {
    color: var(--accent-orange-dark) !important;
}

/* Logo: subrayado del nombre (fino; el header usa otro grosor/tono) */
body.page-index > header.site-header .logo::after,
body.page-index header .logo::after {
    width: 100% !important;
    max-width: none !important;
    height: 2px !important;
    border-radius: 999px !important;
    background: linear-gradient(90deg, var(--accent-orange), var(--suite-gold)) !important;
    opacity: 0.85 !important;
}

body.page-index header .nav-links a:hover,
body.page-index header .nav-links a.active {
    color: var(--accent-orange) !important;
}

/* Legibilidad móvil / tablet — hero copy fluido */
@media (max-width: 900px) {
    body.page-index .hero .text-box,
    body.page-index .hero .hero-copy-panel {
        max-width: min(100%, 40rem);
        padding: clamp(1rem, 3.5vw, 1.45rem);
    }

    body.page-index .hero h1,
    body.page-index .hero .hero-title {
        max-width: 100%;
        font-size: clamp(1.28rem, 5.2vw, 1.95rem) !important;
    }
}

@media (max-width: 768px) {
    body.page-index .hero {
        min-height: auto;
        padding: clamp(5.5rem, 14vw, 6.5rem) 0 clamp(2rem, 5vw, 2.75rem) !important;
        align-items: center;
    }

    body.page-index .hero .text-box,
    body.page-index .hero .hero-copy-panel {
        max-width: 100%;
        border-radius: 16px;
    }

    body.page-index .hero h1,
    body.page-index .hero .hero-title {
        font-size: clamp(1.22rem, 6vw, 1.75rem) !important;
        line-height: 1.25 !important;
    }

    body.page-index .hero .hero-lead,
    body.page-index .hero p.body,
    body.page-index .hero .hero-subline {
        font-size: clamp(0.9rem, 3.6vw, 1.02rem) !important;
    }

    body.page-index .hero .hero-subline {
        padding: 0.5rem 0.75rem;
        width: 100%;
    }

    body.page-index .btn {
        width: 100%;
        max-width: 320px;
        padding: 0.9rem 1.25rem;
    }

    body.page-index .cta-buttons,
    body.page-index .hero .hero-cta {
        flex-direction: column;
        align-items: stretch;
    }

    body.page-index .hero .hero-cta .btn,
    body.page-index .hero .cta-buttons .btn {
        width: 100%;
        max-width: none;
        min-width: 0;
    }

    body.page-index .hero .btn-secondary {
        background: rgba(255, 255, 255, 0.18);
    }

    body.page-index .why-choose-feature,
    body.page-index .testimonial-card,
    body.page-index .menu-benefit-card {
        padding: 1.25rem !important;
    }

    body.page-index .why-choose-feature h3,
    body.page-index .testimonial-quote p {
        overflow-wrap: anywhere;
        word-break: break-word;
    }
}

@media (max-width: 480px) {
    body.page-index .hero .text-box,
    body.page-index .hero .hero-copy-panel {
        padding: 0.95rem 0.85rem 1.1rem;
        border-radius: 14px;
    }

    body.page-index .hero h1,
    body.page-index .hero .hero-title {
        font-size: clamp(1.15rem, 6.4vw, 1.45rem) !important;
    }

    body.page-index .btn {
        font-size: 0.95rem;
    }

    body.page-index .why-choose-icon {
        width: 2.85rem;
        height: 2.85rem;
        font-size: 1.35rem !important;
    }
}

/* Motion Pro — respetar preferencias de sistema */
@media (prefers-reduced-motion: reduce) {
    body.page-index .hero .hero-ingress,
    body.page-index .hero .hero-ingress h1,
    body.page-index .hero .hero-ingress p,
    body.page-index .hero .hero-ingress .cta-buttons .btn {
        opacity: 1 !important;
        transform: none !important;
        filter: none !important;
        animation: none !important;
    }

    body.page-index .why-choose-feature,
    body.page-index .device-card,
    body.page-index .testimonial-card,
    body.page-index .manifesto-content {
        transition: none !important;
        animation: none !important;
    }
}