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

html {
    scroll-behavior: smooth;
}

body {
    font-family: var(--font-main);
    background: var(--background-color);
    color: var(--text-color);
    line-height: 1.6;
}

a {
    color: inherit;
    text-decoration: none;
}

.container {
    width: min(1180px, calc(100% - 40px));
    margin: 0 auto;
}

.site-header {
    position: sticky;
    top: 0;
    z-index: 20;
    background: rgba(255,255,255,.9);
    backdrop-filter: blur(14px);
    border-bottom: 1px solid var(--border-color);
}

.header-content {
    height: 76px;
    display: flex;
    align-items: center;
    justify-content: space-between;
}

.brand {
    display: flex;
    align-items: center;
    gap: 10px;
    font-weight: 900;
    font-size: 22px;
    color: var(--title-color);
}


.brand-logo {
    display: block;
    width: 52px;
    height: auto;
    object-fit: contain;
}


.nav {
    display: flex;
    align-items: center;
    gap: 22px;
    font-weight: 700;
    color: var(--primary-color);
}

.nav a:hover {
    color: var(--excellent-color);
}

.nav-cta {
    padding: 10px 16px;
    border-radius: 999px;
    background: var(--primary-color);
    color: white !important;
}

.menu-toggle {
    display: none;
    flex-direction: column;
    gap: 5px;
    border: 0;
    background: transparent;
    cursor: pointer;
}

.menu-toggle span {
    width: 26px;
    height: 3px;
    background: var(--primary-color);
    border-radius: 999px;
}

.hero {
    padding: 90px 0 80px;
    background:
        radial-gradient(circle at top left, rgba(211,47,47,.12), transparent 32%),
        radial-gradient(circle at bottom right, rgba(46,125,50,.16), transparent 35%);
}

.hero-grid {
    display: grid;
    grid-template-columns: 1.1fr .9fr;
    gap: 60px;
    align-items: center;
}

.eyebrow {
    display: inline-block;
    margin-bottom: 14px;
    font-weight: 900;
    color: var(--excellent-color);
    text-transform: uppercase;
    letter-spacing: .08em;
    font-size: 20px;
}

h1, h2, h3 {
    color: var(--title-color);
    line-height: 1.08;
}

h1 {
    font-size: clamp(42px, 6vw, 62px);
    letter-spacing: -.06em;
    margin-bottom: 24px;
}

h2 {
    font-size: clamp(32px, 4vw, 52px);
    letter-spacing: -.04em;
    margin-bottom: 18px;
}

h3 {
    font-size: 22px;
    margin-bottom: 10px;
}

.hero-copy p,
.section-heading p,
.contact-card p {
    font-size: 19px;
    max-width: 720px;
}

.hero-actions {
    display: flex;
    flex-wrap: wrap;
    gap: 14px;
    margin-top: 32px;
}

.btn {
    min-height: 50px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    padding: 0 22px;
    border-radius: 999px;
    font-weight: 900;
    border: 0;
    cursor: pointer;
}

.btn-primary {
    color: white;
    background: linear-gradient(135deg, var(--bad-color), var(--excellent-color));
    box-shadow: var(--shadow-sm);
}

.btn-secondary {
    color: var(--primary-color);
    background: white;
    border: 1px solid var(--border-color);
}

.hero-panel {
    padding: 34px;
    border-radius: var(--radius-lg);
    background: rgba(255,255,255,.9);
    box-shadow: var(--shadow-md);
    border: 1px solid rgba(255,255,255,.9);
}

.satisfaction-scale {
    display: grid;
    grid-template-columns: repeat(5, 1fr);
    gap: 12px;
    margin-bottom: 24px;
}

.face {
    height: 66px;
    border-radius: 20px;
    display: grid;
    place-items: center;
    font-size: 30px;
    color: white;
    box-shadow: var(--shadow-sm);
}

.very-bad { background: var(--very-bad-color); }
.bad { background: var(--bad-color); }
.neutral { background: var(--neutral-color); color: #3f3f46; }
.good { background: var(--good-color); }
.excellent { background: var(--excellent-color); }

.metric-card {
    padding: 24px;
    border-radius: var(--radius-md);
    background: var(--primary-color);
    color: white;
    margin-bottom: 22px;
}

.metric-card span {
    display: block;
    opacity: .8;
}

.metric-card strong {
    display: block;
    font-size: 58px;
    line-height: 1;
    margin: 12px 0;
}

.metric-card small {
    color: #bbf7d0;
}

.mini-chart {
    height: 150px;
    display: flex;
    align-items: end;
    gap: 12px;
}

.mini-chart span {
    flex: 1;
    border-radius: 14px 14px 4px 4px;
    background: var(--gradient-main);
}

.section {
    padding: 90px 0;
}

.section-alt {
    background: var(--surface-alt-color);
}

.section-heading {
    max-width: 760px;
    margin-bottom: 42px;
}

.cards-grid,
.plans-grid {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: 22px;
}

.card,
.plan,
.step,
.contact-card {
    background: var(--surface-color);
    border: 1px solid var(--border-color);
    border-radius: var(--radius-md);
    padding: 28px;
    box-shadow: var(--shadow-sm);
}

.card {
    border-top: 5px solid var(--good-color);
}

.sector-grid {
    display: grid;
    grid-template-columns: repeat(6, 1fr);
    gap: 16px;
}

.sector-grid div {
    padding: 22px;
    border-radius: var(--radius-md);
    background: white;
    font-weight: 900;
    text-align: center;
    box-shadow: var(--shadow-sm);
}

.steps {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 24px;
}

.step span {
    width: 44px;
    height: 44px;
    display: grid;
    place-items: center;
    border-radius: 50%;
    background: var(--gradient-main);
    color: white;
    font-weight: 900;
    margin-bottom: 18px;
}

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

.plan ul {
    margin: 22px 0;
    padding-left: 18px;
}

.plan li {
    margin-bottom: 8px;
}

.featured {
    border: 2px solid var(--excellent-color);
    transform: translateY(-10px);
}

.contact-section {
    background: var(--gradient-soft);
}

.contact-card {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 34px;
    align-items: start;
}

.contact-form {
    display: grid;
    gap: 14px;
}

.contact-form input,
.contact-form textarea {
    width: 100%;
    padding: 15px 16px;
    border-radius: var(--radius-sm);
    border: 1px solid var(--border-color);
    font: inherit;
}

.contact-form textarea {
    min-height: 120px;
    resize: vertical;
}

.footer {
    padding: 28px 0;
    background: var(--primary-color);
    color: white;
}

.footer-content {
    display: flex;
    justify-content: space-between;
    gap: 20px;
}

body {
    overflow-x: hidden;
}

img,
svg,
video {
    max-width: 100%;
    height: auto;
}

main {
    width: 100%;
    overflow: hidden;
}

section {
    width: 100%;
}

.hero-grid,
.cards-grid,
.sector-grid,
.steps,
.plans-grid,
.contact-card {
    min-width: 0;
}

@media (max-width: 760px) {
    .container {
        width: min(100% - 28px, 1180px);
    }

    h1 {
        font-size: 42px;
    }

    h2 {
        font-size: 32px;
    }

    .hero-panel {
        padding: 22px;
    }

    .satisfaction-scale {
        grid-template-columns: repeat(5, minmax(0, 1fr));
        gap: 8px;
    }

    .face {
        height: 52px;
        font-size: 24px;
        border-radius: 14px;
    }
}

/* ==================================================
   HERO CON IMAGEN DEL DISPOSITIVO
================================================== */

.hero-visual {
    min-width: 0;
}

.hero-image-frame {
    position: relative;
    overflow: hidden;
    border-radius: var(--radius-lg);
    background: var(--surface-color);
    border: 1px solid rgba(255, 255, 255, 0.9);
    box-shadow: var(--shadow-md);
}

.hero-device-image {
    display: block;
    width: 100%;
    min-height: 520px;
    object-fit: cover;
    object-position: center;
    transition: transform 0.7s ease;
}

.hero-image-frame:hover .hero-device-image {
    transform: scale(1.025);
}

.hero-image-frame::after {
    content: "";
    position: absolute;
    inset: 0;
    pointer-events: none;
    background:
        linear-gradient(
            180deg,
            transparent 55%,
            rgba(15, 23, 42, 0.28) 100%
        );
}

.hero-image-badge {
    position: absolute;
    left: 22px;
    bottom: 22px;
    z-index: 2;
    display: inline-flex;
    align-items: center;
    gap: 10px;
    max-width: calc(100% - 44px);
    padding: 12px 16px;
    border-radius: 999px;
    background: rgba(255, 255, 255, 0.94);
    color: var(--primary-color);
    font-size: 14px;
    font-weight: 900;
    box-shadow: var(--shadow-sm);
    backdrop-filter: blur(10px);
}

.badge-dot {
    width: 11px;
    height: 11px;
    flex: 0 0 auto;
    border-radius: 50%;
    background: var(--excellent-color);
    box-shadow: 0 0 0 5px rgba(46, 125, 50, 0.16);
}

.hero-image-caption {
    margin-top: 16px;
    padding: 0 8px;
    color: var(--muted-text-color);
    font-size: 15px;
    line-height: 1.6;
}

/* ==================================================
   SECCIÓN DEL DISPOSITIVO
================================================== */

.product-section {
    position: relative;
    overflow: hidden;
    background:
        radial-gradient(
            circle at 15% 50%,
            rgba(251, 192, 45, 0.16),
            transparent 34%
        ),
        radial-gradient(
            circle at 88% 20%,
            rgba(46, 125, 50, 0.12),
            transparent 32%
        ),
        var(--surface-color);
}

.product-grid {
    display: grid;
    grid-template-columns: minmax(0, 0.95fr) minmax(0, 1.05fr);
    align-items: center;
    gap: 70px;
}

.product-visual,
.product-copy {
    min-width: 0;
}

.product-image-card {
    position: relative;
    display: grid;
    place-items: center;
    min-height: 560px;
    padding: 28px;
    overflow: hidden;
    border-radius: var(--radius-lg);
    background:
        linear-gradient(
            145deg,
            rgba(255, 255, 255, 0.98),
            rgba(248, 250, 247, 0.94)
        );
    border: 1px solid var(--border-color);
    box-shadow: var(--shadow-md);
}

.product-image-card::before {
    content: "";
    position: absolute;
    width: 78%;
    height: 78%;
    border-radius: 50%;
    background: var(--gradient-soft);
    filter: blur(20px);
}

.product-device-image {
    position: relative;
    z-index: 1;
    display: block;
    width: 100%;
    max-width: 650px;
    max-height: 620px;
    object-fit: contain;
    filter: drop-shadow(0 28px 28px rgba(15, 23, 42, 0.22));
    transition:
        transform 0.55s ease,
        filter 0.55s ease;
}

.product-image-card:hover .product-device-image {
    transform: translateY(-8px) scale(1.015);
    filter: drop-shadow(0 36px 34px rgba(15, 23, 42, 0.28));
}

.product-copy > p {
    max-width: 660px;
    margin-bottom: 30px;
    font-size: 18px;
}

.product-features {
    display: grid;
    gap: 16px;
}

.product-features article {
    display: grid;
    grid-template-columns: auto 1fr;
    gap: 16px;
    padding: 18px;
    border: 1px solid var(--border-color);
    border-radius: var(--radius-md);
    background: rgba(255, 255, 255, 0.82);
}

.product-features article h3 {
    margin-bottom: 6px;
    font-size: 19px;
}

.product-features article p {
    font-size: 15px;
    color: var(--muted-text-color);
}

.feature-number {
    width: 42px;
    height: 42px;
    display: grid;
    place-items: center;
    border-radius: 50%;
    background: var(--primary-color);
    color: white;
    font-size: 13px;
    font-weight: 900;
}

.product-scale {
    display: grid;
    grid-template-columns: repeat(5, 1fr);
    margin-top: 28px;
    overflow: hidden;
    border-radius: 14px;
    box-shadow: var(--shadow-sm);
}

.product-scale span {
    min-height: 50px;
    display: grid;
    place-items: center;
    padding: 8px;
    color: white;
    font-size: 12px;
    font-weight: 900;
    text-align: center;
}

.scale-red {
    background: var(--very-bad-color);
}

.scale-orange {
    background: var(--bad-color);
}

.scale-yellow {
    background: var(--neutral-color);
    color: #3f3f46 !important;
}

.scale-light-green {
    background: var(--good-color);
}

.scale-green {
    background: var(--excellent-color);
}


/* ============================================================
   FLUJO OPERACIONAL VISUAL
============================================================ */

.operational-example {
    position: relative;
    overflow: hidden;

    background:
        linear-gradient(
            180deg,
            #ffffff 0%,
            #f8fafc 100%
        );
}


.operational-flow {
    display: grid;
    grid-template-columns:
        minmax(0, 1fr)
        auto
        minmax(0, 1fr)
        auto
        minmax(0, 1fr)
        auto
        minmax(0, 1fr);

    align-items: stretch;

    gap: 14px;

    margin-top: 56px;
}


.flow-stage {
    position: relative;

    min-width: 0;
    min-height: 330px;

    display: flex;
    flex-direction: column;

    padding: 26px;

    border-radius: 24px;

    border: 1px solid #e5e7eb;

    background: #ffffff;

    box-shadow:
        0 18px 45px rgba(15, 23, 42, .08);

    transition:
        transform .35s ease,
        box-shadow .35s ease;
}


.flow-stage:hover {
    transform: translateY(-7px);

    box-shadow:
        0 28px 60px rgba(15, 23, 42, .14);
}


.flow-index {
    position: absolute;

    top: 18px;
    right: 20px;

    color: rgba(15, 23, 42, .12);

    font-size: 32px;
    font-weight: 900;
}


.flow-icon {
    width: 54px;
    height: 54px;

    display: grid;
    place-items: center;

    margin-bottom: 22px;

    border-radius: 18px;

    font-size: 25px;
    font-weight: 900;
}


.flow-label {
    margin-bottom: 9px;

    font-size: 11px;
    font-weight: 900;

    letter-spacing: .12em;
}


.flow-stage h3 {
    margin: 0 0 12px;

    font-size: 20px;
    line-height: 1.25;

    color: #111827;
}


.flow-stage p {
    margin: 0;

    color: #6b7280;

    font-size: 14px;
    line-height: 1.65;
}


.flow-data {
    margin-top: auto;
    padding-top: 20px;

    font-size: 13px;
    font-weight: 800;
}


/* ------------------------------------------------------------
   COLORES POR ETAPA
------------------------------------------------------------ */

.flow-stage-sensor {
    border-top: 4px solid #64748b;
}


.flow-stage-sensor .flow-icon {
    color: #334155;
    background: #f1f5f9;
}


.flow-stage-sensor .flow-label,
.flow-stage-sensor .flow-data {
    color: #475569;
}


.flow-stage-event {
    border-top: 4px solid #f59e0b;
}


.flow-stage-event .flow-icon {
    color: #b45309;
    background: #fef3c7;
}


.flow-stage-event .flow-label,
.flow-stage-event .flow-data {
    color: #b45309;
}


.flow-stage-rule {
    border-top: 4px solid #eab308;
}


.flow-stage-rule .flow-icon {
    color: #854d0e;
    background: #fef9c3;
}


.flow-stage-rule .flow-label {
    color: #a16207;
}


.flow-stage-action {
    border-top: 4px solid #dc2626;
}


.flow-stage-action .flow-icon {
    color: #ffffff;
    background: #dc2626;
}


.flow-stage-action .flow-label {
    color: #b91c1c;
}


/* ------------------------------------------------------------
   FLECHAS
------------------------------------------------------------ */

.flow-arrow {
    display: grid;
    place-items: center;

    padding: 0 3px;

    color: #cbd5e1;

    font-size: 30px;
    font-weight: 300;
}


/* ------------------------------------------------------------
   REGLA
------------------------------------------------------------ */

.flow-rule-values {
    display: grid;
    grid-template-columns: repeat(2, 1fr);

    gap: 8px;

    margin-top: auto;
    padding-top: 20px;
}


.flow-rule-values span {
    display: grid;
    gap: 3px;

    padding: 10px;

    border-radius: 12px;

    background: #fefce8;

    color: #78716c;

    font-size: 11px;
}


.flow-rule-values strong {
    color: #713f12;
    font-size: 15px;
}


/* ------------------------------------------------------------
   ALERTA
------------------------------------------------------------ */

.flow-alert {
    margin-top: auto;

    padding: 12px 14px;

    border-radius: 12px;

    background: #fee2e2;

    color: #b91c1c;

    font-size: 13px;
    font-weight: 900;
}


/* ============================================================
   ANALISIS
============================================================ */

.flow-analysis {
    position: relative;

    display: grid;
    grid-template-columns:
        minmax(0, 1.25fr)
        minmax(320px, .75fr);

    gap: 55px;

    align-items: center;

    margin-top: 32px;

    padding: 45px;

    overflow: hidden;

    border-radius: 30px;

    background:
        radial-gradient(
            circle at 90% 10%,
            rgba(34, 197, 94, .15),
            transparent 35%
        ),
        linear-gradient(
            145deg,
            #0f172a,
            #1e293b
        );

    color: #f8fafc;

    box-shadow:
        0 32px 80px rgba(15, 23, 42, .22);
}


.flow-analysis::before {
    content: "";

    position: absolute;

    width: 300px;
    height: 300px;

    right: -140px;
    bottom: -160px;

    border-radius: 50%;

    background: rgba(34, 197, 94, .08);
}


.analysis-copy {
    position: relative;
    z-index: 2;
}


.analysis-kicker {
    display: inline-block;

    margin-bottom: 14px;

    color: #86efac;

    font-size: 12px;
    font-weight: 900;

    letter-spacing: .12em;
}


.analysis-copy h3 {
    max-width: 720px;

    margin: 0 0 18px;

    font-size: clamp(28px, 3vw, 42px);
    line-height: 1.12;

    color: #ffffff;
}


.analysis-copy p {
    max-width: 720px;

    margin: 0 0 14px;

    color: #cbd5e1;

    font-size: 16px;
    line-height: 1.7;
}


.analysis-insight {
    margin-top: 26px;
    padding: 18px 20px;

    border-left: 4px solid #22c55e;

    background: rgba(255, 255, 255, .05);

    border-radius: 0 14px 14px 0;
}


.analysis-insight span {
    display: block;

    margin-bottom: 6px;

    color: #86efac;

    font-size: 11px;
    font-weight: 900;

    text-transform: uppercase;
    letter-spacing: .1em;
}


.analysis-insight strong {
    font-size: 15px;
    line-height: 1.55;
}


/* ------------------------------------------------------------
   GRAFICO
------------------------------------------------------------ */

.analysis-visual {
    position: relative;
    z-index: 2;

    padding: 24px;

    border-radius: 22px;

    background: rgba(255, 255, 255, .07);

    border: 1px solid rgba(255, 255, 255, .08);

    backdrop-filter: blur(10px);
}


.analysis-header {
    display: grid;
    gap: 4px;

    margin-bottom: 24px;
}


.analysis-header span {
    color: #94a3b8;
    font-size: 12px;
}


.analysis-header strong {
    font-size: 17px;
}


.analysis-bars {
    height: 180px;

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

    align-items: end;
    gap: 14px;

    padding-top: 20px;

    border-bottom: 1px solid rgba(255, 255, 255, .12);
}


.analysis-bars div {
    height: 100%;

    display: grid;
    grid-template-rows: 1fr auto;

    align-items: end;
}


.analysis-bars span {
    display: block;

    align-self: end;

    width: 100%;

    min-height: 25px;

    border-radius: 9px 9px 0 0;

    background:
        linear-gradient(
            180deg,
            #4ade80,
            #15803d
        );
}


.analysis-bars small {
    padding: 8px 0;

    color: #94a3b8;

    text-align: center;
    font-size: 11px;
}


.analysis-stat {
    display: flex;
    justify-content: space-between;
    align-items: end;

    gap: 20px;

    margin-top: 22px;
}


.analysis-stat span {
    color: #94a3b8;
    font-size: 12px;
}


.analysis-stat strong {
    color: #86efac;

    font-size: 30px;
    line-height: 1;
}


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

@media (max-width: 1150px) {

    .operational-flow {
        grid-template-columns:
            repeat(2, minmax(0, 1fr));

        gap: 20px;
    }


    .flow-arrow {
        display: none;
    }


    .flow-stage {
        min-height: 300px;
    }

}


@media (max-width: 850px) {

    .flow-analysis {
        grid-template-columns: 1fr;

        padding: 32px;
    }


    .analysis-visual {
        max-width: 520px;
    }

}


@media (max-width: 600px) {

    .operational-flow {
        grid-template-columns: 1fr;
    }


    .flow-stage {
        min-height: auto;
    }


    .flow-analysis {
        padding: 25px;
        border-radius: 22px;
    }


    .analysis-copy h3 {
        font-size: 28px;
    }


    .analysis-bars {
        height: 150px;
    }

}



/* ============================================================
   SOLUCIONES INTERACTIVAS
============================================================ */

.solutions-section {
    position: relative;

    background:
        linear-gradient(
            180deg,
            #f8fafc 0%,
            #ffffff 100%
        );
}


.solutions-interactive-grid {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));

    gap: 24px;

    margin-top: 52px;
}


.solution-tile {
    position: relative;

    min-height: 390px;

    overflow: hidden;

    border-radius: 28px;

    cursor: pointer;

    background: #111827;

    box-shadow:
        0 22px 55px rgba(15, 23, 42, .14);

    outline: none;

    isolation: isolate;
}


.solution-tile img {
    position: absolute;
    inset: 0;

    width: 100%;
    height: 100%;

    object-fit: cover;

    transition:
        transform .55s ease,
        filter .55s ease;
}


.solution-tile::after {
    content: "";

    position: absolute;
    inset: 0;

    background:
        linear-gradient(
            180deg,
            rgba(15, 23, 42, .08) 20%,
            rgba(15, 23, 42, .50) 65%,
            rgba(15, 23, 42, .92) 100%
        );

    z-index: 1;

    transition:
        background .4s ease;
}


.solution-overlay {
    position: absolute;
    inset: auto 0 0 0;

    z-index: 2;

    padding: 30px;

    color: #ffffff;

    transform: translateY(74px);

    transition:
        transform .45s ease;
}


.solution-tag {
    display: inline-block;

    margin-bottom: 10px;

    color: #d1fae5;

    font-size: 11px;
    font-weight: 900;

    letter-spacing: .13em;
}


.solution-overlay h3 {
    margin: 0;

    max-width: 520px;

    font-size: 28px;
    line-height: 1.15;

    color: #ffffff;
}


.solution-overlay p {
    max-width: 620px;

    margin: 15px 0 0;

    color: #e5e7eb;

    font-size: 15px;
    line-height: 1.65;

    opacity: 0;

    transform: translateY(16px);

    transition:
        opacity .35s ease .08s,
        transform .35s ease .08s;
}


.solution-tile:hover img,
.solution-tile:focus img,
.solution-tile:focus-within img {
    transform: scale(1.06);

    filter:
        saturate(.9)
        brightness(.78);
}


.solution-tile:hover::after,
.solution-tile:focus::after,
.solution-tile:focus-within::after {
    background:
        linear-gradient(
            180deg,
            rgba(15, 23, 42, .18) 10%,
            rgba(15, 23, 42, .62) 55%,
            rgba(15, 23, 42, .96) 100%
        );
}


.solution-tile:hover .solution-overlay,
.solution-tile:focus .solution-overlay,
.solution-tile:focus-within .solution-overlay {
    transform: translateY(0);
}


.solution-tile:hover .solution-overlay p,
.solution-tile:focus .solution-overlay p,
.solution-tile:focus-within .solution-overlay p {
    opacity: 1;
    transform: translateY(0);
}


/* ------------------------------------------------------------
   MOBILE / TABLET
------------------------------------------------------------ */

@media (max-width: 900px) {

    .solutions-interactive-grid {
        grid-template-columns: 1fr;
    }

}


@media (max-width: 700px) {

    .solution-tile {
        min-height: 360px;
    }


    .solution-overlay {
        transform: translateY(0);

        padding: 24px;
    }


    .solution-overlay p {
        opacity: 1;
        transform: none;
    }


    .solution-overlay h3 {
        font-size: 24px;
    }

}



/* ============================================================
   HERO - POSICIONAMIENTO OPERACION + CLIENTE + REPUTACION
============================================================ */

.hero-lead-secondary {
    margin-top: 12px;
}


.hero-value-chain {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 10px;

    margin-top: 26px;

    color: #374151;

    font-size: 14px;
    font-weight: 900;
}


.hero-value-chain span {
    display: inline-flex;
    align-items: center;

    padding: 9px 13px;

    border-radius: 999px;

    background: #ffffff;

    border: 1px solid #e5e7eb;

    box-shadow:
        0 8px 22px rgba(15, 23, 42, .06);
}


.hero-value-chain i {
    color: #9ca3af;

    font-style: normal;
    font-weight: 700;
}


@media (max-width: 650px) {

    .hero-value-chain {
        gap: 8px;
    }

    .hero-value-chain i {
        display: none;
    }

    .hero-value-chain span {
        width: 100%;
        justify-content: center;
    }

}



/* ============================================================
   ENFOQUE CONSULTIVO
============================================================ */

.consulting-highlight {
    display: flex;
    align-items: center;
    gap: 18px;

    margin: 34px 0 10px;
    padding: 22px 26px;

    border-radius: 18px;

    background:
        linear-gradient(
            135deg,
            #f8fafc,
            #eef2f7
        );

    border: 1px solid #e2e8f0;

    color: #334155;
}


.consulting-highlight strong {
    flex: 0 0 auto;

    color: #0f172a;

    font-size: 16px;
}


.consulting-highlight span {
    line-height: 1.6;
}


.flow-stage-understand {
    border-top: 4px solid #2563eb;
}


.flow-stage-understand .flow-icon {
    color: #1d4ed8;
    background: #dbeafe;
}


.flow-stage-understand .flow-label,
.flow-stage-understand .flow-data {
    color: #1d4ed8;
}


@media (max-width: 700px) {

    .consulting-highlight {
        display: grid;
        gap: 8px;
    }

}



/* ============================================================
   HERO - CICLO DE MEJORA CONTINUA
============================================================ */

.hero-value-cycle {
    position: relative;

    width: min(100%, 430px);
    aspect-ratio: 1 / 1;

    margin: 30px auto 8px;
}


.value-cycle-arrows {
    position: absolute;
    inset: 0;

    width: 100%;
    height: 100%;

    overflow: visible;
}


.value-cycle-arrows path {
    fill: none;
    stroke: #16a34a;
    stroke-width: 2.5;
    stroke-linecap: round;

    opacity: .65;
}


.value-cycle-node {
    position: absolute;
    z-index: 2;

    width: 142px;
    min-height: 72px;

    display: flex;
    flex-direction: column;
    justify-content: center;

    padding: 12px 15px;

    border: 1px solid #e2e8f0;
    border-radius: 17px;

    background: rgba(255, 255, 255, .96);

    box-shadow:
        0 12px 30px rgba(15, 23, 42, .09);

    text-align: center;
}


.value-cycle-node span {
    display: block;

    margin-bottom: 3px;

    color: #16a34a;

    font-size: 10px;
    font-weight: 900;
    letter-spacing: .12em;
}


.value-cycle-node strong {
    color: #0f172a;

    font-size: 13px;
    line-height: 1.3;
}


.value-cycle-top {
    top: 0;
    left: 50%;

    transform: translateX(-50%);
}


.value-cycle-right {
    top: 50%;
    right: -4px;

    transform: translateY(-50%);
}


.value-cycle-bottom {
    bottom: 0;
    left: 50%;

    transform: translateX(-50%);
}


.value-cycle-left {
    top: 50%;
    left: -4px;

    transform: translateY(-50%);
}


.value-cycle-center {
    position: absolute;
    top: 50%;
    left: 50%;

    width: 130px;
    height: 130px;

    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;

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

    border-radius: 50%;

    background:
        linear-gradient(
            145deg,
            #0f172a,
            #1e293b
        );

    box-shadow:
        0 18px 40px rgba(15, 23, 42, .20);

    text-align: center;
}


.value-cycle-center span {
    margin-bottom: 6px;

    color: #86efac;

    font-size: 9px;
    font-weight: 900;
    letter-spacing: .12em;
}


.value-cycle-center strong {
    color: #ffffff;

    font-size: 18px;
    line-height: 1.12;
}


/* ------------------------------------------------------------
   MOBILE
------------------------------------------------------------ */

@media (max-width: 520px) {

    .hero-value-cycle {
        width: 340px;
        max-width: 100%;

        margin-top: 28px;
    }


    .value-cycle-node {
        width: 112px;
        min-height: 64px;

        padding: 9px 10px;
    }


    .value-cycle-node strong {
        font-size: 11px;
    }


    .value-cycle-center {
        width: 105px;
        height: 105px;
    }


    .value-cycle-center strong {
        font-size: 15px;
    }

}



/* ============================================================
   AJUSTES HERO - IMAGEN + CICLO
============================================================ */

/* Subir visualmente la imagen derecha */
.hero-visual {
    align-self: start;
    transform: translateY(-24px);
}


/* Dar más espacio y presencia al ciclo */
.hero-value-cycle {
    width: min(100%, 520px);
    margin: 38px auto 18px;
}


/* Hacer más grande el centro */
.value-cycle-center {
    width: 150px;
    height: 150px;
}


/* Agrandar nodos */
.value-cycle-node {
    width: 160px;
    min-height: 78px;
    padding: 14px 16px;
}


/* Mejorar tamaño de textos */
.value-cycle-node strong {
    font-size: 14px;
}

.value-cycle-center strong {
    font-size: 20px;
}


/* Ajustar posiciones para el nuevo tamaño */
.value-cycle-top {
    top: -4px;
}

.value-cycle-right {
    right: -10px;
}

.value-cycle-bottom {
    bottom: -4px;
}

.value-cycle-left {
    left: -10px;
}


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

@media (max-width: 1050px) {

    .hero-visual {
        transform: none;
    }

    .hero-value-cycle {
        width: min(100%, 480px);
        margin-left: auto;
        margin-right: auto;
    }

}


@media (max-width: 520px) {

    .hero-value-cycle {
        width: 360px;
        max-width: 100%;
    }

    .value-cycle-node {
        width: 118px;
        min-height: 66px;
    }

    .value-cycle-center {
        width: 110px;
        height: 110px;
    }

}


/* ============================================================
   CENTRADO REAL DEL CICLO
============================================================ */

.hero-value-cycle-wrap {
    width: 100%;

    display: flex;
    justify-content: center;
    align-items: center;

    margin: 40px 0 24px;
}

.hero-value-cycle {
    width: 520px;
    max-width: 100%;
    margin: 0;
}


/* En desktop, mantenerlo centrado respecto del bloque de texto */
.hero-copy .hero-value-cycle-wrap {
    align-self: stretch;
}


/* Mobile */
@media (max-width: 520px) {

    .hero-value-cycle-wrap {
        margin-top: 30px;
    }

    .hero-value-cycle {
        width: 360px;
        max-width: 100%;
    }

}


/* ============================================================
   ENFOQUE CONSULTIVO
============================================================ */

.consulting-highlight {
    display: flex;
    align-items: center;
    gap: 18px;

    margin: 34px 0 10px;
    padding: 22px 26px;

    border-radius: 18px;

    background:
        linear-gradient(
            135deg,
            #f8fafc,
            #eef2f7
        );

    border: 1px solid #e2e8f0;

    color: #334155;
}


.consulting-highlight strong {
    flex: 0 0 auto;

    color: #0f172a;

    font-size: 16px;
}


.consulting-highlight span {
    line-height: 1.6;
}


.flow-stage-understand {
    border-top: 4px solid #2563eb;
}


.flow-stage-understand .flow-icon {
    color: #1d4ed8;
    background: #dbeafe;
}


.flow-stage-understand .flow-label,
.flow-stage-understand .flow-data {
    color: #1d4ed8;
}


@media (max-width: 700px) {

    .consulting-highlight {
        display: grid;
        gap: 8px;
    }

}



/* ============================================================
   HERO 2.6 - CICLO CENTRADO EN ANCHO TOTAL
============================================================ */

/*
 * La parte superior continúa siendo:
 *
 * texto | imagen
 *
 * El ciclo queda en una segunda fila independiente
 * y se centra respecto del ancho TOTAL del container.
 */

.hero-cycle-full {
    width: 100%;

    display: flex;
    justify-content: center;
    align-items: center;

    clear: both;

    margin: 40px auto 10px;

    padding: 10px 0 20px;
}


/* ============================================================
   CICLO
============================================================ */

.hero-cycle-full .hero-value-cycle {
    position: relative;

    width: 560px;
    height: 560px;

    max-width: 100%;

    margin: 0 auto;

    flex: 0 0 auto;
}


/* ============================================================
   FLECHAS
============================================================ */

.hero-cycle-full .value-cycle-arrows {
    position: absolute;

    inset: 0;

    width: 100%;
    height: 100%;

    overflow: visible;

    pointer-events: none;
}


.hero-cycle-full .value-cycle-arrows path {
    fill: none;

    stroke: #49b978;
    stroke-width: 3;

    stroke-linecap: round;

    opacity: .88;
}


/* ============================================================
   NODOS
============================================================ */

.hero-cycle-full .value-cycle-node {
    width: 158px;
    min-height: 78px;

    padding: 13px 15px;
}


.hero-cycle-full .value-cycle-top {
    top: 0;

    left: 50%;

    transform: translateX(-50%);
}


.hero-cycle-full .value-cycle-right {
    top: 50%;

    right: -2px;

    transform: translateY(-50%);
}


.hero-cycle-full .value-cycle-bottom {
    bottom: 0;

    left: 50%;

    transform: translateX(-50%);
}


.hero-cycle-full .value-cycle-left {
    top: 50%;

    left: -2px;

    transform: translateY(-50%);
}


/* ============================================================
   CENTRO
============================================================ */

.hero-cycle-full .value-cycle-center {
    width: 150px;
    height: 150px;
}


.hero-cycle-full .value-cycle-center strong {
    font-size: 20px;
}


/* ============================================================
   SUBIR IMAGEN DEL HERO
============================================================ */

.hero-operational .hero-visual {
    align-self: start;

    transform: translateY(-22px);
}


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

@media (max-width: 1050px) {

    .hero-operational .hero-visual {
        transform: none;
    }

}


@media (max-width: 620px) {

    .hero-cycle-full {
        margin-top: 30px;
    }


    .hero-cycle-full .hero-value-cycle {
        width: 350px;
        height: 350px;
    }


    .hero-cycle-full .value-cycle-node {
        width: 112px;
        min-height: 62px;

        padding: 8px 9px;
    }


    .hero-cycle-full .value-cycle-node strong {
        font-size: 11px;
    }


    .hero-cycle-full .value-cycle-center {
        width: 105px;
        height: 105px;
    }


    .hero-cycle-full .value-cycle-center strong {
        font-size: 15px;
    }


    .hero-cycle-full .value-cycle-arrows path {
        stroke-width: 3;
    }

}



/* ============================================================
   HERO - CICLO ALINEADO DEBAJO DE LA IMAGEN
============================================================ */

/*
 * El hero superior usa dos columnas:
 * izquierda  = texto
 * derecha    = imagen
 *
 * Movemos el ciclo hacia la derecha para que quede visualmente
 * alineado debajo de la columna de imagen.
 */

.hero-cycle-full {
    justify-content: flex-end;

    padding-right: 2%;
}


/*
 * Limitar el ancho del ciclo para que no invada
 * demasiado la columna izquierda.
 */
.hero-cycle-full .hero-value-cycle {
    width: 520px;
    height: 520px;

    margin-right: 0;
    margin-left: auto;
}


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

@media (max-width: 1050px) {

    /*
     * Cuando el hero pasa a una sola columna,
     * volvemos a centrar el ciclo.
     */
    .hero-cycle-full {
        justify-content: center;

        padding-right: 0;
    }

    .hero-cycle-full .hero-value-cycle {
        margin-left: auto;
        margin-right: auto;
    }

}


/* Título "La solución comienza por entender el problema" */
.operational-example .section-heading {
    max-width: 100%;
}

.operational-example .section-heading h2 {
    max-width: none;
    white-space: nowrap;
}

/* Tablet / celular: permitir saltos de línea naturales */
@media (max-width: 768px) {
    .operational-example .section-heading h2 {
        white-space: normal;
    }
}

/* ============================================================
   SOLUCIONES - ENCABEZADO A TODO EL ANCHO
============================================================ */

.solutions-section .section-heading {
    max-width: 100%;
    width: 100%;
}

/* Título en una sola línea en escritorio */
.solutions-section .section-heading h2 {
    max-width: none;
    width: 100%;
    white-space: nowrap;
}

/* Descripción aprovechando todo el ancho disponible */
.solutions-section .section-heading p {
    max-width: none;
    width: 100%;
}


/* ------------------------------------------------------------
   TABLET / CELULAR
   Permitir que el contenido se acomode naturalmente
------------------------------------------------------------ */

@media (max-width: 768px) {

    .solutions-section .section-heading h2 {
        white-space: normal;
        width: auto;
    }

    .solutions-section .section-heading p {
        width: auto;
    }

}


/* ============================================================
   SECTORES - NUBE VISUAL
============================================================ */

.sectors-cloud-section {
    position: relative;

    overflow: hidden;

    background:
        radial-gradient(
            circle at 85% 20%,
            rgba(34,197,94,.08),
            transparent 28%
        ),
        radial-gradient(
            circle at 70% 80%,
            rgba(14,165,233,.07),
            transparent 30%
        ),
        #ffffff;
}


.sectors-cloud-grid {
    display: grid;

    grid-template-columns:
        minmax(0, .9fr)
        minmax(520px, 1.1fr);

    gap: 70px;

    align-items: center;
}


/* ------------------------------------------------------------
   TEXTO
------------------------------------------------------------ */

.sectors-cloud-copy {
    max-width: 620px;
}


.sectors-cloud-copy h2 {
    margin:
        16px 0
        18px;

    color: #0f172a;

    font-size:
        clamp(
            34px,
            3.6vw,
            52px
        );

    line-height: 1.08;

    letter-spacing: -.035em;
}


.sectors-cloud-copy p {
    margin: 0;

    color: #64748b;

    font-size: 17px;

    line-height: 1.7;
}


/* ------------------------------------------------------------
   NUBE
------------------------------------------------------------ */

.sectors-cloud {
    position: relative;

    min-height: 470px;

    border-radius: 34px;

    background:
        linear-gradient(
            145deg,
            rgba(248,250,252,.95),
            rgba(241,245,249,.75)
        );

    border:
        1px solid rgba(148,163,184,.14);

    box-shadow:
        inset 0 0 80px rgba(255,255,255,.85),
        0 30px 70px rgba(15,23,42,.08);
}


/* ------------------------------------------------------------
   CHIPS
------------------------------------------------------------ */

.sector-chip {
    position: absolute;

    display: inline-flex;

    align-items: center;

    gap: 10px;

    padding:
        13px 18px;

    border-radius: 999px;

    background:
        rgba(255,255,255,.96);

    border:
        1px solid rgba(148,163,184,.18);

    box-shadow:
        0 14px 30px rgba(15,23,42,.08);

    color: #0f172a;

    transition:
        transform .3s ease,
        box-shadow .3s ease;
}


.sector-chip:hover {
    transform:
        translateY(-5px)
        scale(1.03);

    box-shadow:
        0 20px 40px rgba(15,23,42,.13);
}


.sector-chip span {
    font-size: 24px;
}


.sector-chip strong {
    font-size: 14px;
    white-space: nowrap;
}


/* ------------------------------------------------------------
   POSICIONES
------------------------------------------------------------ */

.chip-hotels {
    top: 38px;
    left: 50%;

    transform: translateX(-50%);
}


.chip-restaurants {
    top: 120px;
    left: 38px;
}


.chip-retail {
    top: 132px;
    right: 40px;
}


.chip-chains {
    top: 215px;
    left: 50%;

    transform: translateX(-50%);

    padding:
        16px 24px;
}


.chip-chains strong {
    font-size: 16px;
}


.chip-clinics {
    bottom: 115px;
    left: 45px;
}


.chip-industry {
    bottom: 115px;
    right: 44px;
}


.chip-agro {
    bottom: 38px;
    left: 26%;
}


.chip-buildings {
    bottom: 34px;
    right: 13%;
}


/* ------------------------------------------------------------
   ACENTOS DE COLOR
------------------------------------------------------------ */

.chip-hotels,
.chip-clinics {
    border-color:
        rgba(14,165,233,.22);
}


.chip-restaurants,
.chip-chains {
    border-color:
        rgba(249,115,22,.24);
}


.chip-retail,
.chip-agro {
    border-color:
        rgba(34,197,94,.23);
}


.chip-industry,
.chip-buildings {
    border-color:
        rgba(100,116,139,.24);
}


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

@media (max-width: 1050px) {

    .sectors-cloud-grid {
        grid-template-columns: 1fr;

        gap: 40px;
    }


    .sectors-cloud-copy {
        max-width: 760px;
    }


    .sectors-cloud {
        min-height: 430px;
    }

}


@media (max-width: 700px) {

    .sectors-cloud {
        min-height: auto;

        display: flex;

        flex-wrap: wrap;

        justify-content: center;

        gap: 12px;

        padding: 24px;
    }


    .sector-chip {
        position: static;

        transform: none !important;

        padding:
            11px 15px;
    }


    .sector-chip strong {
        font-size: 13px;
    }


    .sector-chip span {
        font-size: 21px;
    }

}


/* ============================================================
   PLANES - ENCABEZADO A TODO EL ANCHO
============================================================ */

#planes .section-heading {
    max-width: 100%;
    width: 100%;
}

#planes .section-heading h2 {
    max-width: none;
    width: 100%;
    white-space: nowrap;
}

#planes .section-heading p {
    max-width: none;
    width: 100%;
    white-space: nowrap;
}


/* ============================================================
   PLANES - BOTONES CENTRADOS
============================================================ */

#planes .plan {
    display: flex;
    flex-direction: column;
}

#planes .plan .btn {
    align-self: center;
    margin-top: auto;
}


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

@media (max-width: 900px) {

    #planes .section-heading h2,
    #planes .section-heading p {
        white-space: normal;
    }

}


/* ============================================================
   PLANES - ESTILO EQUILIBRADO SIN PLAN DESTACADO
============================================================ */

#planes .plans-grid {
    align-items: stretch;
}


/* Base común */
#planes .plan {
    position: relative;

    display: flex;
    flex-direction: column;

    overflow: hidden;

    border-radius: 24px;

    border: 1px solid #e5e7eb;

    background: #ffffff;

    box-shadow:
        0 18px 45px rgba(15, 23, 42, .08);

    transition:
        transform .3s ease,
        box-shadow .3s ease,
        border-color .3s ease;
}


#planes .plan:hover {
    transform: translateY(-6px);

    box-shadow:
        0 28px 60px rgba(15, 23, 42, .13);
}


/* Franja superior decorativa */
#planes .plan::before {
    content: "";

    position: absolute;

    top: 0;
    left: 0;
    right: 0;

    height: 6px;

    border-radius: 24px 24px 0 0;
}


/* ============================================================
   STARTER
   Azul suave: inicio, claridad, simplicidad
============================================================ */

#planes .plan:nth-child(1) {
    background:
        linear-gradient(
            180deg,
            #f8fbff 0%,
            #ffffff 34%
        );

    border-color:
        rgba(59, 130, 246, .18);
}

#planes .plan:nth-child(1)::before {
    background:
        linear-gradient(
            90deg,
            #3b82f6,
            #60a5fa
        );
}

#planes .plan:nth-child(1) h3 {
    color: #1d4ed8;
}


/* ============================================================
   BUSINESS
   Verde: operación, crecimiento, control
============================================================ */

#planes .plan:nth-child(2) {
    background:
        linear-gradient(
            180deg,
            #f6fdf8 0%,
            #ffffff 34%
        );

    border-color:
        rgba(34, 197, 94, .18);
}

#planes .plan:nth-child(2)::before {
    background:
        linear-gradient(
            90deg,
            #22c55e,
            #4ade80
        );
}

#planes .plan:nth-child(2) h3 {
    color: #15803d;
}


/* ============================================================
   ENTERPRISE
   Violeta / índigo: escala, integración, sofisticación
============================================================ */

#planes .plan:nth-child(3) {
    background:
        linear-gradient(
            180deg,
            #faf8ff 0%,
            #ffffff 34%
        );

    border-color:
        rgba(124, 58, 237, .18);
}

#planes .plan:nth-child(3)::before {
    background:
        linear-gradient(
            90deg,
            #7c3aed,
            #8b5cf6
        );
}

#planes .plan:nth-child(3) h3 {
    color: #6d28d9;
}


/* ============================================================
   LISTAS
============================================================ */

#planes .plan ul {
    margin-bottom: 28px;
}

#planes .plan li {
    position: relative;
}


/* ============================================================
   BOTONES
============================================================ */

#planes .plan .btn {
    align-self: center;

    min-width: 150px;

    margin-top: auto;
}


/* Botones secundarios con borde según plan */
#planes .plan:nth-child(1) .btn {
    border-color: #3b82f6;
    color: #1d4ed8;
}

#planes .plan:nth-child(2) .btn {
    border-color: #22c55e;
    color: #15803d;
}

#planes .plan:nth-child(3) .btn {
    border-color: #7c3aed;
    color: #6d28d9;
}


/* Hover */
#planes .plan:nth-child(1) .btn:hover {
    background: #eff6ff;
}

#planes .plan:nth-child(2) .btn:hover {
    background: #f0fdf4;
}

#planes .plan:nth-child(3) .btn:hover {
    background: #f5f3ff;
}


/* ============================================================
   LOGO - CONSERVAR PROPORCIÓN CIRCULAR
============================================================ */

.brand-logo {
    width: 44px;
    height: 44px;
    object-fit: contain;
    aspect-ratio: 1 / 1;
    flex-shrink: 0;
}