/* =========================================================
   SEJOP
   SOLUCIONES INFORMÁTICAS
   DISEÑO CORPORATIVO PREMIUM
========================================================= */

:root{

    /* MARCA */
    --verde:#0b4b46;
    --verde-2:#0f5c55;
    --verde-3:#176d63;
    --verde-profundo:#063c38;
    --verde-oscuro:#04312e;

    --beige:#c8ad91;
    --beige-2:#dbc8b5;
    --beige-claro:#eee4da;

    --crema:#faf7f2;
    --crema-2:#f4efe9;

    --blanco:#ffffff;

    /* TEXTOS */
    --texto:#17312f;
    --texto-fuerte:#073f3a;
    --texto-suave:#667875;
    --texto-claro:#899793;

    /* INTERFAZ */
    --border:#e4ded7;
    --border-verde:rgba(11,75,70,.14);

    --success:#17816e;

    --shadow:
        0 15px 45px rgba(28,52,48,.08);

    --shadow-hover:
        0 25px 60px rgba(28,52,48,.14);

    --radius:18px;
    --radius-lg:28px;
}


/* =========================================================
   RESET
========================================================= */

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


html{
    scroll-behavior:smooth;
}


body{
    font-family:
        Inter,
        "Segoe UI",
        Arial,
        Helvetica,
        sans-serif;

    background:var(--crema);
    color:var(--texto);
    line-height:1.6;
    overflow-x:hidden;
}


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


button,
input,
textarea,
select{
    font:inherit;
}


button{
    cursor:pointer;
}


img{
    max-width:100%;
    display:block;
}


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


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

.btn{

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

    gap:10px;

    min-height:48px;

    padding:0 22px;

    border-radius:13px;

    border:1px solid transparent;

    font-weight:700;
    font-size:14px;

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


.btn:hover{
    transform:translateY(-2px);
}


.btn-primary{

    background:
        linear-gradient(
            135deg,
            var(--verde),
            var(--verde-2)
        );

    color:white;

    box-shadow:
        0 12px 28px rgba(11,75,70,.18);
}


.btn-primary:hover{

    background:
        linear-gradient(
            135deg,
            var(--verde-profundo),
            var(--verde)
        );

    box-shadow:
        0 16px 35px rgba(11,75,70,.25);
}


.btn-outline{

    color:var(--verde);

    background:white;

    border-color:#ded5cc;
}


.btn-outline:hover{

    border-color:var(--beige);

    box-shadow:
        0 10px 25px rgba(40,55,50,.08);
}


.btn-secondary{

    background:#f1e9e0;

    border-color:#e3d6ca;

    color:#314441;
}


.btn-secondary:hover{
    background:white;
}


.btn-large{
    min-height:54px;
    padding:0 26px;
}


/* =========================================================
   HEADER
========================================================= */

.header{

    position:sticky;
    top:0;
    z-index:1000;

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

    backdrop-filter:blur(18px);

    border-bottom:
        1px solid rgba(32,62,57,.08);

    box-shadow:
        0 3px 18px rgba(32,52,48,.035);
}


.header-content{

    min-height:78px;

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

    gap:30px;
}


/* LOGO */

.logo{

    display:flex;
    align-items:center;

    gap:12px;

    flex-shrink:0;
}


.logo-icon{

    width:44px;
    height:44px;

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

    border-radius:12px;

    background:
        linear-gradient(
            135deg,
            var(--verde),
            var(--verde-3)
        );

    color:white;

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

    box-shadow:
        0 8px 22px rgba(11,75,70,.16);
}


/* PARA TU LOGO REAL */

.logo-img{

    width:48px;
    height:48px;

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


.logo-img img{

    width:100%;
    height:100%;

    object-fit:contain;
}


.logo-text{

    display:flex;
    flex-direction:column;

    line-height:1.1;
}


.logo-text strong{

    color:var(--verde);

    font-size:19px;

    letter-spacing:.4px;
}


.logo-text span{

    color:var(--beige);

    font-size:11px;

    margin-top:4px;

    font-weight:600;
}


/* NAVEGACIÓN */

.nav{

    display:flex;
    align-items:center;

    gap:30px;

    margin-left:auto;
}


.nav a{

    position:relative;

    color:#344845;

    font-size:14px;
    font-weight:650;

    transition:.2s;
}


.nav a::after{

    content:"";

    position:absolute;

    left:0;
    right:0;
    bottom:-28px;

    height:3px;

    background:var(--verde);

    border-radius:10px;

    transform:scaleX(0);

    transition:.25s ease;
}


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


.nav a:hover::after{
    transform:scaleX(1);
}


.header-actions{

    display:flex;
    align-items:center;

    gap:10px;
}


.menu-toggle{

    width:44px;
    height:44px;

    border:1px solid #e4ddd5;

    border-radius:12px;

    background:white;

    color:var(--verde);

    display:none;
}


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

.hero{

    position:relative;

    min-height:690px;

    display:flex;
    align-items:center;

    padding:
        90px 0
        80px;

    overflow:hidden;

    background:

        radial-gradient(
            circle at 85% 30%,
            rgba(200,173,145,.18),
            transparent 25%
        ),

        radial-gradient(
            circle at 8% 80%,
            rgba(11,75,70,.05),
            transparent 22%
        ),

        linear-gradient(
            120deg,
            #ffffff 0%,
            #fbf8f4 52%,
            #f5ede5 100%
        );
}


/* LÍNEAS DECORATIVAS */

.hero::before{

    content:"";

    position:absolute;

    width:500px;
    height:500px;

    right:-220px;
    top:100px;

    border:

        1px solid
        rgba(200,173,145,.18);

    border-radius:50%;

    box-shadow:

        0 0 0 35px rgba(200,173,145,.035),
        0 0 0 70px rgba(200,173,145,.025),
        0 0 0 105px rgba(200,173,145,.018);

    pointer-events:none;
}


.hero-glow{

    position:absolute;

    border-radius:50%;

    filter:blur(100px);

    pointer-events:none;
}


.hero-glow-one{

    width:380px;
    height:380px;

    right:80px;
    top:100px;

    background:
        rgba(11,75,70,.08);
}


.hero-glow-two{

    width:300px;
    height:300px;

    left:-120px;
    bottom:-100px;

    background:
        rgba(200,173,145,.16);
}


.hero-grid{

    position:relative;
    z-index:2;

    display:grid;

    grid-template-columns:
        .95fr
        1.05fr;

    gap:70px;

    align-items:center;
}


/* BADGE */

.hero-badge{

    display:inline-flex;

    align-items:center;

    gap:9px;

    padding:
        8px
        14px;

    margin-bottom:22px;

    border-radius:999px;

    background:
        rgba(11,75,70,.055);

    border:
        1px solid
        rgba(11,75,70,.13);

    color:var(--verde);

    font-size:13px;

    font-weight:700;
}


.hero-badge-dot{

    width:8px;
    height:8px;

    border-radius:50%;

    background:var(--verde-2);

    box-shadow:
        0 0 0 5px rgba(11,75,70,.08);
}


/* TITULO */

.hero h1{

    max-width:650px;

    color:var(--verde);

    font-size:
        clamp(44px,5vw,67px);

    line-height:1.05;

    letter-spacing:-2.4px;

    font-weight:800;
}


.hero h1 span{

    display:block;

    background:
        linear-gradient(
            90deg,
            var(--verde),
            var(--beige)
        );

    -webkit-background-clip:text;

    background-clip:text;

    color:transparent;
}


.hero-description{

    max-width:610px;

    margin:
        25px 0
        30px;

    color:#526461;

    font-size:17px;
}


/* BOTONES HERO */

.hero-buttons{

    display:flex;

    flex-wrap:wrap;

    gap:12px;
}


/* BENEFICIOS */

.hero-features{

    display:flex;

    flex-wrap:wrap;

    gap:25px;

    margin-top:31px;

    color:#465b57;

    font-size:13px;
}


.hero-features div{

    display:flex;

    align-items:center;

    gap:8px;
}


.check{

    width:22px;
    height:22px;

    display:inline-flex;

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

    border-radius:50%;

    background:
        rgba(11,75,70,.07);

    border:
        1px solid
        rgba(11,75,70,.13);

    color:var(--verde);

    font-size:12px;

    font-weight:bold;
}


/* =========================================================
   MOCKUP DASHBOARD
========================================================= */

.hero-visual{
    position:relative;
}


.dashboard-window{

    position:relative;

    overflow:hidden;

    border-radius:24px;

    background:white;

    border:
        1px solid
        #e8e0d8;

    box-shadow:
        0 30px 70px
        rgba(38,55,50,.15);

    transform:
        perspective(1300px)
        rotateY(-2deg)
        rotateX(1deg);
}


/* PANEL VERDE DETRÁS */

.dashboard-window::before{

    content:"";

    position:absolute;

    z-index:-1;

    right:-25px;
    bottom:-25px;

    width:70%;
    height:80%;

    background:var(--verde);

    border-radius:30px;
}


.dashboard-topbar{

    height:60px;

    display:flex;

    justify-content:space-between;

    align-items:center;

    padding:0 18px;

    background:white;

    border-bottom:
        1px solid #eee8e2;
}


.dashboard-brand{

    display:flex;

    align-items:center;

    gap:9px;

    color:var(--verde);

    font-weight:800;
}


.mini-logo{

    width:29px;
    height:29px;

    display:flex;

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

    border-radius:8px;

    background:
        linear-gradient(
            135deg,
            var(--verde),
            var(--verde-2)
        );

    color:white;

    font-size:12px;
}


.dashboard-user{

    display:flex;

    align-items:center;

    gap:8px;

    color:#5f706d;

    font-size:11px;
}


.user-dot{

    width:8px;
    height:8px;

    background:#3aa88c;

    border-radius:50%;
}


.dashboard-body{

    display:grid;

    grid-template-columns:
        145px
        1fr;

    min-height:430px;
}


.dashboard-sidebar{

    padding:
        18px
        11px;

    background:#faf9f7;

    border-right:
        1px solid #eee9e4;
}


.sidebar-item{

    display:flex;

    align-items:center;

    gap:8px;

    padding:
        10px
        11px;

    margin-bottom:5px;

    border-radius:10px;

    color:#71807d;

    font-size:11px;
}


.sidebar-item.active{

    color:white;

    background:
        linear-gradient(
            135deg,
            var(--verde),
            var(--verde-2)
        );

    box-shadow:
        0 8px 20px
        rgba(11,75,70,.15);
}


.dashboard-main{

    padding:20px;

    background:white;
}


.dashboard-title{

    display:flex;

    justify-content:space-between;

    align-items:center;

    margin-bottom:16px;
}


.dashboard-title div{

    display:flex;

    flex-direction:column;
}


.dashboard-title span{

    color:#899692;

    font-size:10px;
}


.dashboard-title strong{

    color:var(--texto-fuerte);

    font-size:16px;
}


.dashboard-title button{

    border:none;

    padding:
        8px
        12px;

    border-radius:9px;

    background:var(--verde);

    color:white;

    font-size:10px;
}


.dashboard-cards{

    display:grid;

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

    gap:10px;
}


.stat-card{

    padding:14px;

    background:#fdfcfb;

    border:
        1px solid #ebe5df;

    border-radius:12px;

    box-shadow:
        0 5px 16px
        rgba(25,50,45,.035);
}


.stat-card span{

    color:#84918e;

    font-size:9px;
}


.stat-card strong{

    display:block;

    color:#183b37;

    font-size:17px;

    margin:
        4px 0
        2px;
}


.stat-card small{

    color:#22806c;

    font-size:8px;

    font-weight:700;
}


/* GRAFICO */

.dashboard-chart{

    min-height:220px;

    margin-top:14px;

    padding:16px;

    border-radius:14px;

    background:#fdfcfb;

    border:
        1px solid #ebe5df;
}


.chart-header span{

    display:block;

    color:#879490;

    font-size:9px;
}


.chart-header strong{

    color:#183b37;

    font-size:12px;
}


.chart-bars{

    height:140px;

    display:flex;

    align-items:flex-end;

    gap:9px;

    margin-top:18px;

    padding-bottom:4px;

    border-bottom:
        1px solid #e6e0da;
}


.chart-bars span{

    flex:1;

    min-width:8px;

    border-radius:
        6px
        6px
        2px
        2px;

    background:
        linear-gradient(
            180deg,
            var(--verde-2),
            var(--verde)
        );

    box-shadow:
        0 5px 15px
        rgba(11,75,70,.08);
}


/* TARJETAS FLOTANTES */

.floating-card{

    position:absolute;

    z-index:5;

    min-width:180px;

    display:flex;

    align-items:center;

    gap:12px;

    padding:
        13px
        15px;

    border-radius:15px;

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

    border:
        1px solid
        #e9e2dc;

    backdrop-filter:
        blur(16px);

    box-shadow:
        0 18px 40px
        rgba(39,55,50,.12);
}


.floating-card-one{

    left:-35px;

    bottom:55px;
}


.floating-card-two{

    right:-35px;

    top:60px;
}


.floating-icon{

    width:34px;
    height:34px;

    display:flex;

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

    border-radius:10px;

    background:
        rgba(11,75,70,.07);

    color:var(--verde);
}


.floating-card div{

    display:flex;

    flex-direction:column;
}


.floating-card small{

    color:#899691;

    font-size:9px;
}


.floating-card strong{

    color:#213d39;

    font-size:11px;
}


/* =========================================================
   CONFIGURACIÓN GENERAL SECCIONES
========================================================= */

section{
    position:relative;
}


.solutions,
.company,
.custom-development,
.metrics,
.contact{

    padding:
        95px
        0;
}


.section-heading{

    max-width:700px;

    margin:
        0 auto
        50px;

    text-align:center;
}


.section-label{

    display:inline-block;

    margin-bottom:12px;

    color:var(--verde);

    font-size:12px;

    font-weight:800;

    text-transform:uppercase;

    letter-spacing:1.6px;
}


.section-heading h2,
.company h2,
.custom-card h2,
.contact h2{

    color:var(--verde);

    font-size:
        clamp(34px,4vw,50px);

    line-height:1.1;

    letter-spacing:-1.6px;
}


.section-heading h2 span,
.company h2 span{

    color:var(--beige);
}


.section-heading p{

    margin-top:17px;

    color:var(--texto-suave);

    font-size:15px;
}


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

.solutions{

    background:
        linear-gradient(
            180deg,
            #f7faf9,
            #f3f7f6
        );

    border-top:
        1px solid #e3ebe8;

    border-bottom:
        1px solid #e3ebe8;
}


.solutions-grid{

    display:grid;

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

    gap:18px;
}


.solution-card{

    position:relative;

    overflow:hidden;

    padding:25px;

    border-radius:18px;

    background:white;

    border:
        1px solid
        #dde6e3;

    box-shadow:
        0 10px 28px
        rgba(33,55,50,.045);

    transition:
        .3s ease;
}


.solution-card::before{

    content:"";

    position:absolute;

    width:150px;
    height:150px;

    right:-80px;
    top:-80px;

    border-radius:50%;

    background:
        rgba(200,173,145,.08);
}


.solution-card:hover{

    transform:
        translateY(-7px);

    border-color:
        rgba(11,75,70,.25);

    box-shadow:
        var(--shadow-hover);
}


.solution-card.featured{

    border-color:
        rgba(200,173,145,.55);

    box-shadow:
        0 14px 35px
        rgba(57,65,55,.07);
}


.solution-top{

    min-height:50px;

    display:flex;

    align-items:center;

    justify-content:
        space-between;

    gap:10px;
}


.solution-icon{

    width:47px;
    height:47px;

    display:flex;

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

    border-radius:12px;

    background:
        linear-gradient(
            135deg,
            var(--verde),
            var(--verde-2)
        );

    color:white;

    font-weight:900;

    font-size:13px;

    box-shadow:
        0 8px 20px
        rgba(11,75,70,.15);
}


.solution-status{

    padding:
        6px
        9px;

    border-radius:999px;

    background:
        #f2e8dd;

    color:#a47750;

    border:
        1px solid
        #ead8c6;

    font-size:8px;

    font-weight:800;
}


.solution-card h3{

    color:var(--verde);

    font-size:21px;

    margin-top:21px;
}


.solution-subtitle{

    color:#b38b68;

    font-size:12px;

    font-weight:700;

    margin-top:2px;
}


.solution-description{

    min-height:80px;

    margin:
        15px 0;

    color:#61716e;

    font-size:13px;
}


.solution-card ul{

    list-style:none;

    display:flex;

    flex-direction:column;

    gap:8px;

    margin-bottom:20px;

    color:#40524f;

    font-size:12px;
}


.solution-card li::before{

    content:"✓";

    display:inline-flex;

    align-items:center;

    justify-content:center;

    width:17px;
    height:17px;

    margin-right:8px;

    border-radius:50%;

    background:#f1e7dc;

    color:#a47a57;

    font-size:10px;

    font-weight:bold;
}


.solution-link{

    color:var(--verde);

    font-size:12px;

    font-weight:800;
}


.solution-link:hover{
    color:var(--beige);
}


/* =========================================================
   EMPRESA
========================================================= */

.company{

    background:
        linear-gradient(
            120deg,
            #fbf8f3,
            #f6f3ed
        );
}


.company-grid{

    display:grid;

    grid-template-columns:
        1fr
        .85fr;

    gap:70px;

    align-items:center;
}


.company-content > p{

    max-width:680px;

    margin-top:22px;

    color:var(--texto-suave);
}


.company-benefits{

    display:grid;

    grid-template-columns:
        1fr
        1fr;

    gap:17px;

    margin-top:35px;
}


.benefit{

    display:flex;

    gap:13px;

    padding:17px;

    background:white;

    border:
        1px solid
        #e7e1db;

    border-radius:14px;

    box-shadow:
        0 8px 20px
        rgba(40,55,50,.035);
}


.benefit-icon{

    width:42px;
    height:42px;

    flex:
        0 0
        42px;

    display:flex;

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

    border-radius:12px;

    background:
        rgba(11,75,70,.06);

    border:
        1px solid
        rgba(11,75,70,.1);

    color:var(--verde);
}


.benefit strong{

    color:var(--verde);

    font-size:14px;
}


.benefit p{

    margin-top:3px;

    color:#75827f;

    font-size:12px;
}


/* ECOSISTEMA */

.company-panel{

    padding:18px;

    border-radius:22px;

    background:white;

    border:
        1px solid
        #e2ddd6;

    box-shadow:
        0 22px 55px
        rgba(40,55,50,.09);
}


.company-panel-top{

    display:flex;

    justify-content:
        space-between;

    align-items:center;

    padding:
        8px
        5px
        18px;

    color:var(--verde);

    font-size:13px;

    font-weight:700;
}


.online{

    color:#29957e;

    font-size:10px;
}


.company-system{

    display:flex;

    justify-content:
        space-between;

    align-items:center;

    padding:17px;

    margin-bottom:9px;

    border-radius:13px;

    background:#fdfbf9;

    border:
        1px solid
        #ebe4dd;

    transition:.2s;
}


.company-system:hover{

    background:
        #f6f1eb;

    transform:
        translateX(3px);
}


.company-system span{

    color:#7c8986;

    font-size:11px;
}


.company-system strong{

    color:var(--verde);

    font-size:13px;
}


/* =========================================================
   DESARROLLO PERSONALIZADO
========================================================= */

.custom-development{

    background:#f7f4ef;
}


.custom-card{

    position:relative;

    overflow:hidden;

    display:grid;

    grid-template-columns:
        1fr
        .9fr;

    align-items:center;

    gap:60px;

    padding:58px;

    border-radius:28px;

    background:

        radial-gradient(
            circle at 90% 20%,
            rgba(200,173,145,.16),
            transparent 25%
        ),

        linear-gradient(
            135deg,
            #073f3a,
            #0b4b46
        );

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

    box-shadow:
        0 25px 55px
        rgba(7,63,58,.15);
}


.custom-card::after{

    content:"";

    position:absolute;

    width:380px;
    height:380px;

    right:-180px;
    bottom:-200px;

    border-radius:50%;

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

    box-shadow:

        0 0 0 30px rgba(255,255,255,.025),
        0 0 0 60px rgba(255,255,255,.018);
}


.custom-card .section-label{
    color:#ddc4aa;
}


.custom-card h2{
    color:white;
}


.custom-content{

    position:relative;
    z-index:2;
}


.custom-content p{

    max-width:620px;

    margin:
        18px 0
        28px;

    color:#d1ddda;
}


.custom-card .btn-primary{

    background:
        linear-gradient(
            135deg,
            var(--beige),
            #dcc5ae
        );

    color:#183f3a;
}


.custom-card .btn-primary:hover{
    background:white;
}


/* CODE */

.custom-code{

    position:relative;

    z-index:2;
}


.code-window{

    overflow:hidden;

    border-radius:17px;

    background:#172323;

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

    box-shadow:
        0 20px 45px
        rgba(0,0,0,.25);
}


.code-top{

    height:44px;

    display:flex;

    align-items:center;

    gap:7px;

    padding:
        0
        14px;

    background:#223130;

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


.code-top span{

    width:9px;
    height:9px;

    border-radius:50%;

    background:#c8ad91;
}


.code-body{

    padding:25px;

    color:#d4dedc;

    font-family:
        Consolas,
        monospace;

    font-size:13px;
}


.code-blue{
    color:#8fcfc2;
}


.code-green{
    color:#d9bd9f;
}


.code-purple{
    color:#c7a9c8;
}


/* =========================================================
   MÉTRICAS
========================================================= */

.metrics{

    padding-top:25px;

    padding-bottom:70px;

    background:#f7f4ef;
}


.metrics-grid{

    display:grid;

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

    gap:14px;
}


.metric{

    text-align:center;

    padding:
        25px
        18px;

    border-radius:17px;

    background:white;

    border:
        1px solid
        #e4ded7;
}


.metric strong{

    display:block;

    color:var(--verde);

    font-size:30px;
}


.metric span{

    color:#788783;

    font-size:11px;
}


/* =========================================================
   CONTACTO
========================================================= */

.contact{

    padding-top:60px;

    background:
        linear-gradient(
            120deg,
            #faf7f2,
            #f3ebe2
        );
}


.contact-card{

    display:flex;

    justify-content:
        space-between;

    align-items:center;

    gap:50px;

    padding:
        45px;

    border-radius:22px;

    background:white;

    border:
        1px solid
        #e3ddd5;

    box-shadow:
        0 18px 40px
        rgba(40,55,50,.06);
}


.contact-card p{

    max-width:700px;

    margin-top:12px;

    color:var(--texto-suave);
}


/* =========================================================
   FOOTER
========================================================= */

.footer{

    margin-top:0;

    background:
        linear-gradient(
            135deg,
            #063d39,
            #042f2c
        );

    color:white;

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


.footer-grid{

    display:grid;

    grid-template-columns:
        2fr
        1fr
        1fr
        1fr;

    gap:50px;

    padding:
        58px
        0;
}


.footer .logo-text strong{
    color:white;
}


.footer .logo-text span{
    color:#d0b59b;
}


.footer-brand p{

    max-width:440px;

    margin-top:18px;

    color:#b8cac6;

    font-size:13px;
}


.footer-column{

    display:flex;

    flex-direction:column;

    gap:10px;
}


.footer-column strong{

    margin-bottom:6px;

    color:white;

    font-size:13px;
}


.footer-column a,
.footer-column span{

    color:#b9c9c6;

    font-size:12px;
}


.footer-column a:hover{
    color:#e2c9ae;
}


.footer-bottom{

    min-height:70px;

    display:flex;

    align-items:center;

    justify-content:
        space-between;

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

    color:#a6bab6;

    font-size:11px;
}


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

@media(max-width:1100px){

    .nav{
        gap:18px;
    }


    .nav a{
        font-size:12px;
    }


    .header-actions .btn-outline{
        display:none;
    }


    .hero-grid{

        grid-template-columns:
            1fr;

        gap:60px;
    }


    .hero-content{

        max-width:760px;

        margin:auto;

        text-align:center;
    }


    .hero-description{

        margin-left:auto;

        margin-right:auto;
    }


    .hero-buttons,
    .hero-features{

        justify-content:center;
    }


    .hero-visual{

        width:100%;

        max-width:820px;

        margin:auto;
    }


    .solutions-grid{

        grid-template-columns:
            1fr
            1fr;
    }

}


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

@media(max-width:850px){

    .nav{

        position:absolute;

        top:78px;

        left:20px;
        right:20px;

        display:none;

        flex-direction:column;

        align-items:stretch;

        gap:0;

        padding:14px;

        border-radius:16px;

        background:white;

        border:
            1px solid
            #e5ded7;

        box-shadow:
            0 18px 45px
            rgba(40,55,50,.12);
    }


    .nav.active{
        display:flex;
    }


    .nav a{

        padding:
            12px
            10px;

        border-radius:10px;
    }


    .nav a::after{
        display:none;
    }


    .nav a:hover{
        background:#f5f1ec;
    }


    .menu-toggle{
        display:block;
    }


    .header-actions .btn{
        display:none;
    }


    .company-grid{

        grid-template-columns:
            1fr;
    }


    .custom-card{

        grid-template-columns:
            1fr;
    }


    .metrics-grid{

        grid-template-columns:
            1fr
            1fr;
    }


    .footer-grid{

        grid-template-columns:
            1fr
            1fr;
    }

}


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

@media(max-width:650px){

    .container{

        width:
            min(
                100% - 24px,
                1180px
            );
    }


    .header-content{
        min-height:70px;
    }


    .hero{

        min-height:auto;

        padding:
            70px
            0;
    }


    .hero h1{

        font-size:41px;

        letter-spacing:-1.5px;
    }


    .hero-description{
        font-size:15px;
    }


    .hero-buttons{

        flex-direction:column;
    }


    .hero-buttons .btn{
        width:100%;
    }


    .hero-features{

        flex-direction:column;

        align-items:center;
    }


    .dashboard-window{
        transform:none;
    }


    .dashboard-body{

        grid-template-columns:
            80px
            1fr;
    }


    .dashboard-sidebar{

        padding:
            12px
            7px;
    }


    .sidebar-item{

        justify-content:center;

        padding:
            10px
            4px;

        font-size:0;
    }


    .sidebar-item span{
        font-size:15px;
    }


    .dashboard-main{
        padding:12px;
    }


    .dashboard-cards{

        grid-template-columns:
            1fr;
    }


    .stat-card:nth-child(2),
    .stat-card:nth-child(3){

        display:none;
    }


    .floating-card{
        display:none;
    }


    .solutions,
    .company,
    .custom-development,
    .contact{

        padding:
            70px
            0;
    }


    .solutions-grid{

        grid-template-columns:
            1fr;
    }


    .company-benefits{

        grid-template-columns:
            1fr;
    }


    .custom-card{

        padding:
            30px
            22px;

        border-radius:22px;
    }


    .metrics-grid{

        grid-template-columns:
            1fr
            1fr;
    }


    .contact-card{

        flex-direction:column;

        align-items:flex-start;

        padding:
            30px
            24px;
    }


    .footer-grid{

        grid-template-columns:
            1fr;
    }


    .footer-bottom{

        flex-direction:column;

        justify-content:center;

        gap:5px;

        text-align:center;
    }

}


/* =========================================================
   CELULARES PEQUEÑOS
========================================================= */

@media(max-width:420px){

    .hero h1{
        font-size:35px;
    }


    .logo-text span{
        display:none;
    }


    .metrics-grid{

        grid-template-columns:
            1fr;
    }

}

/* =========================================================
   PLANES FACTUPRIME
========================================================= */

.plans{
    padding:110px 0;
    background:var(--crema-2);
}


.plans-grid{

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

    margin-top:60px;

}


.plan-card{

    position:relative;

    background:var(--blanco);

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

    padding:34px 26px;

    display:flex;
    flex-direction:column;

    box-shadow:var(--shadow);

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

}


.plan-card:hover{

    transform:translateY(-6px);

    box-shadow:var(--shadow-hover);

}


.plan-card.featured{

    border-color:var(--verde);

    box-shadow:
        0 25px 60px rgba(11,75,70,.18);

}


.plan-badge{

    position:absolute;
    top:-14px;
    left:50%;
    transform:translateX(-50%);

    background:
        linear-gradient(
            135deg,
            var(--verde),
            var(--verde-2)
        );

    color:white;

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

    padding:6px 16px;

    border-radius:20px;

    white-space:nowrap;

}


.plan-top h3{

    font-size:22px;
    color:var(--texto-fuerte);

    margin-bottom:4px;

}


.plan-audience{

    font-size:13px;
    color:var(--texto-suave);

}


.plan-price{

    display:flex;
    align-items:baseline;
    gap:6px;

    margin:22px 0 12px;

}


.plan-amount{

    font-size:42px;
    font-weight:800;

    color:var(--verde);

}


.plan-period{

    font-size:14px;
    color:var(--texto-suave);

}


.plan-desc{

    font-size:14px;
    color:var(--texto-suave);

    margin-bottom:22px;

    min-height:42px;

}


.plan-features{

    list-style:none;

    display:flex;
    flex-direction:column;
    gap:12px;

    margin-bottom:28px;

    flex:1;

}


.plan-features li{

    font-size:14px;
    color:var(--texto);

    padding-left:24px;
    position:relative;

}


.plan-features li::before{

    content:"✓";

    position:absolute;
    left:0;

    color:var(--verde);
    font-weight:800;

}


.plan-btn{
    width:100%;
}


.plan-contador{

    margin-top:50px;

    background:
        linear-gradient(
            135deg,
            var(--verde-profundo),
            var(--verde)
        );

    border-radius:var(--radius-lg);

    padding:48px 50px;

    display:flex;
    align-items:center;
    justify-content:space-between;
    gap:40px;

    color:white;

}


.plan-contador-info .section-label{

    color:var(--beige-claro);

}


.plan-contador-info h3{

    font-size:28px;
    margin:10px 0 14px;

}


.plan-contador-info p{

    color:rgba(255,255,255,.85);

    max-width:560px;

    margin-bottom:18px;

}


.plan-features-inline{

    flex-direction:row;
    flex-wrap:wrap;
    gap:20px;

    margin-bottom:0;

}


.plan-features-inline li{

    color:white;

}


.plan-features-inline li::before{

    color:var(--beige);

}


.plan-contador .btn-primary{

    background:white;
    color:var(--verde-profundo);

    box-shadow:none;

    white-space:nowrap;

}


.plan-contador .btn-primary:hover{

    background:var(--crema);

}


@media(max-width:1024px){

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

    .plan-contador{
        flex-direction:column;
        align-items:flex-start;
    }

}


@media(max-width:640px){

    .plans-grid{
        grid-template-columns:1fr;
    }

}