:root{
    --azul:#0b1f3a;
    --azul-claro:#1f4d8c;
    --azul-oscuro:#071423;

    --plateado:#bfc5cc;
    --plateado-claro:#d9dde2;

    --rojo:#ed1c24;

    --gris-900:#1b1b1b;
    --gris-800:#2f343a;
    --gris-700:#5c646d;
    --gris-300:#d6d9dd;
    --gris-200:#eceef1;
    --gris-100:#f7f8fa;

    --blanco:#ffffff;
    --negro:#000000;
    --dorado: #FBBF4F;
}

body{
    background:#fafafa;
    color:var(--gris-800);
    overflow-x:hidden;
}

section{
    padding:90px 0;
}

.section-title{
    position:relative;
    font-weight:800;
    margin-bottom:20px;
}

.section-title::after{
    content:'';
    display:block;
    width:80px;
    height:4px;
    background:linear-gradient(
        90deg,
        var(--azul),
        var(--plateado),
        var(--rojo)
    );
    border-radius:50px;
}

.hero-signing{
    width:100%;
    min-height:650px;
    position:relative;
    overflow:hidden;
    display:flex;
    align-items:center;

    background:

    radial-gradient(
        circle at 15% 15%,
        rgba(217,221,226,.55),
        transparent 35%
    ),

    radial-gradient(
        circle at 85% 80%,
        rgba(191,197,204,.60),
        transparent 42%
    ),

    radial-gradient(
        circle at 50% 0%,
        rgba(255,255,255,.35),
        transparent 50%
    ),

    radial-gradient(
        circle at 92% 18%,
        rgba(237,28,36,.08),
        transparent 28%
    ),

    linear-gradient(
        135deg,
        #f6f7f9,
        #d7dce2,
        #bcc3cb
    );
}

.hero-signing::before{
    content:'';
    position:absolute;
    inset:0;
    background:
        linear-gradient(
            120deg,
            transparent 0%,
            rgba(255,255,255,.15) 48%,
            rgba(255,255,255,.30) 50%,
            rgba(255,255,255,.15) 52%,
            transparent 100%
        );
    background-size:40px 40px;
    opacity:.45;
}

.hero-signing h1{
    color:var(--azul);
    font-size:clamp(2.5rem,5vw,4.5rem);
    font-weight:900;
    line-height:1.1;
    animation:slideUp .8s ease;
}

.hero-signing .lead{
    color:var(--gris-800);
    font-size:1.2rem;
    opacity:.95;
    animation:slideUp 1.1s ease;
}

.hero-signing .btn{
    animation:slideUp 1.3s ease;
}
.codesign-sectiontoken{
    padding-right: 7rem;
    padding-left:7rem;
    margin-top:5rem
}


.cs-card{
    background:#fff;
    border-radius:18px;
    padding:35px;
    box-shadow:0 10px 25px rgba(0,0,0,.08);
    height:100%;
    border-left:6px solid;
    border-image: linear-gradient(
    to bottom,
    var(--azul-oscuro),
    var(--azul),
    var(--plateado),
    var(--rojo)
) 1;

}

.cs-card:hover{
    box-shadow:0 18px 35px rgba(0,0,0,.12);
}

.cs-card h4{
    font-weight:700;
    color:#123d4a;
    margin-bottom:18px;
}

.cs-card hr{
    border-top:2px solid #158f77;
    width:70px;
    margin:15px 0 20px;
}

.cs-card p{
    color:#666;
    line-height:1.8;
    margin:0;
}
.compat-card{
    background:linear-gradient(135deg,var(--azul),var(--azul-oscuro));
    color:var(--blanco);
    padding:2.8rem 2rem;
    border-radius:18px;
    text-align:center;
    height:100%;
    transition:.25s;
    box-shadow:0 12px 30px rgba(7,20,35,.20);
}

.compat-card:hover{
    transform:translateY(-8px);
    box-shadow:0 20px 45px rgba(7,20,35,.35);
}

.compat-card>i:first-child{
    font-size:3.8rem;
      color:var(--dorado);
    margin-bottom:1rem;
}

.compat-card h4{
    color:#fff;
    font-weight:700;
    margin-bottom:1rem;
}

.compat-card p,
.compat-card small{
    color:rgba(255,255,255,.88);
}

.compat-card hr{
    width:70px;
    height:3px;
    margin:1.2rem auto 1.5rem;
    border:0;
   background:var(--dorado);
    opacity:1;
}

.compat-card a{
    color:#fff;
    font-weight:600;
    text-decoration:underline;
}

.compat-card a:hover{
    color:var(--plateado-claro);
}
.process-steps{
    position:relative;
}

.process-steps::before{
    content:"";
    position:absolute;
    left:10%;
    right:10%;
    top:38px;
    height:3px;
    background:var(--plateado);
    z-index:0;
}

.step-circle{
    width:76px;
    height:76px;
    margin:auto;
    border-radius:50%;
    background:linear-gradient(135deg,var(--azul),var(--azul-oscuro));
    display:flex;
    align-items:center;
    justify-content:center;
    color:var(--dorado);
    font-size:2rem;
    position:relative;
    z-index:2;
    box-shadow:0 10px 25px rgba(0,0,0,.18);
}

.process-steps h3{
    margin-top:20px;
    font-weight:700;
    color:var(--azul);
}

.process-steps p{
    color:var(--gris-700);
    font-size:1.6rem;
    margin-bottom:0;
}
.support-box{
    position:relative;
    background:linear-gradient(135deg,var(--plateado),var(--plateado-claro));
    border-radius:18px;
    padding:3rem;
    box-shadow:0 20px 45px rgba(0,0,0,.15);
    margin:5rem;
    z-index:1;
}

.support-box::before{
    content:"";
    position:absolute;
    inset:0;
    padding:3px;
    border-radius:18px;
    background:linear-gradient(
        to bottom,
        var(--azul-oscuro),
        var(--azul),
        var(--plateado),
        var(--rojo)
    );
    -webkit-mask:
        linear-gradient(#fff 0 0) content-box,
        linear-gradient(#fff 0 0);
    -webkit-mask-composite:xor;
    mask-composite:exclude;
    pointer-events:none;
    z-index:-1;
}

.support-box h2{
    color:var(--azul-oscuro);
    font-weight:700;
}

.support-box p{
    color:var(--azul-oscuro);
}

.support-mini-title{
    color:var(--dorado);
    font-weight:700;
    text-transform:uppercase;
    letter-spacing:1px;
}

.support-box .btn{
    border-radius:50px;
    padding:.9rem 1.8rem;
}

.modal-custom{
    display:none;
    position:fixed;
    z-index:99999;
    left:0;
    top:0;
    width:100%;
    height:100%;
    background:rgba(7,20,35,.65);
    align-items:center;
    justify-content:center;
}

.modal-custom-box{
    background:var(--blanco);
    width:90%;
    max-width:500px;
    padding:35px 30px;
    border-radius:20px;
    box-shadow:0 25px 60px rgba(0,0,0,.35);
    position:relative;
    border-top:5px solid var(--dorado);
}


/* Botón cerrar */
.modal-custom-close{
    position:absolute;
    right:15px;
    top:10px;
    border:0;
    background:none;
    font-size:30px;
    color:var(--gris-700);
    cursor:pointer;
    transition:.2s;
}

.modal-custom-close:hover{
    color:var(--rojo);
}


/* Icono confianza */
.modal-icon{
    width:75px;
    height:75px;
    margin:0 auto;
    border-radius:50%;
    background:rgba(251,191,79,.15);
    display:flex;
    align-items:center;
    justify-content:center;
}

.modal-icon i{
    font-size:42px;
    color:var(--azul);
}


/* Título */
.modal-custom-box h5{
    color:var(--azul);
    font-weight:700;
    font-size:22px;
}


/* Texto */
.modal-custom-box p{
    color:var(--gris-700);
    font-size:16px;
    line-height:1.6;
    margin-top:15px;
}


/* Botón principal */
.modal-btn{
    background:var(--azul);
    color:var(--blanco);
    border:none;
    padding:11px 32px;
    border-radius:30px;
    font-weight:600;
    transition:.3s;
    text-decoration:none;
    display:inline-block;
}

.modal-btn:hover{
    background:var(--azul-claro);
    color:var(--blanco);
}


/* Botón secundario */
.modal-custom-box .btn-outline-secondary{
    padding:11px 28px;
    border-radius:30px;
    font-weight:500;
}


/* Animación apertura */
.modal-custom-box{
    animation:modalFade .25s ease;
}

@keyframes modalFade{
    from{
        opacity:0;
        transform:translateY(-15px);
    }
    to{
        opacity:1;
        transform:translateY(0);
    }
}


/* Responsive */
@media(max-width:576px){

    .modal-custom-box{
        padding:30px 20px;
    }

    .modal-custom-box h5{
        font-size:20px;
    }

    .modal-custom-box p{
        font-size:15px;
    }

    .modal-icon{
        width:65px;
        height:65px;
    }

    .modal-icon i{
        font-size:36px;
    }

}