:root{

    /* Colores principales */
    --primary:#031B49;      /* Azul Marino */
    --accent:#2EAA9A;       /* Verde Esmeralda */

    /* Colores secundarios */
    --secondary:#1F4475;    /* Azul Corporativo */
    --accent-hover:#38C4B2; /* Turquesa */

    /* Neutros */
    --paper:#FAFAFB;
    --text:#1A1D24;
    --slate:#64748B;
    --line:#E2E6EB;

}

*{

margin:0;
padding:0;
box-sizing:border-box;

}

html,
body{

height:100%;

}

body{

background:var(--paper);

font-family:'IBM Plex Sans',sans-serif;

color:var(--text);

position:relative;

overflow:hidden;

}

/* =============================== */

.grid{

position:absolute;

inset:0;

background:

linear-gradient(var(--line) 1px, transparent 1px),

linear-gradient(90deg,var(--line) 1px,transparent 1px);

background-size:70px 70px;

opacity:.35;

z-index:0;

}

/* =============================== */

.watermark{

position:absolute;

right:-140px;

bottom:-180px;

width:720px;

opacity:.035;

pointer-events:none;

user-select:none;

z-index:0;

}

/* =============================== */

header{

position:relative;

z-index:2;

padding-top:55px;

display:flex;

justify-content:center;

}

.logo{

width:260px;

}

/* =============================== */

main{

position:relative;

z-index:2;

max-width:900px;

margin:auto;

padding:90px 40px;

display:flex;

flex-direction:column;

align-items:center;

text-align:center;

}

.badge{

    padding:10px 22px;
    border-radius:100px;

    border:1px solid rgba(46,170,154,.25);
    background:rgba(46,170,154,.10);

    color:var(--primary);

    font-weight:600;
    letter-spacing:.5px;
    margin-bottom:40px;

}

/* =============================== */

h1{

font-family:'Outfit',sans-serif;

font-size:clamp(4rem,9vw,7rem);

line-height:.92;

font-weight:800;

letter-spacing:-3px;

margin-bottom:35px;

}

/* línea azul */

h1::after{

    content:"";
    display:block;
    width:140px;
    height:8px;

    background:linear-gradient(
        90deg,
        var(--primary),
        var(--accent)
    );

    border-radius:100px;
    margin:45px auto 0;

}

border-radius:100px;

margin:45px auto 0;

}

/* =============================== */

p{

max-width:700px;

font-size:1.35rem;

line-height:1.9;

color:var(--slate);

margin-top:45px;

}

/* =============================== */

.button{

margin-top:60px;

display:inline-flex;

align-items:center;

justify-content:center;

padding:18px 42px;

border-radius:14px;

background:var(--primary);

color:white;

text-decoration:none;

font-weight:600;

font-family:'Outfit';

transition:.35s;

box-shadow:

0 15px 35px rgba(0,127,255,.20);

}

.button:hover{

background:var(--secondary);

transform:translateY(-4px);

}

/* =============================== */

footer{

position:absolute;

bottom:35px;

left:0;

width:100%;

text-align:center;

color:var(--slate);

font-size:.95rem;

z-index:2;

}

/* =============================== */

body::before{

    content:"";

    position:absolute;

    top:-300px;
    left:50%;

    transform:translateX(-50%);

    width:900px;
    height:900px;

    background:
        radial-gradient(
            circle,
            rgba(46,170,154,.12),
            transparent 70%
        );

    z-index:0;

}

z-index:0;

}

/* =============================== */

@media (max-width:768px){

header{

    padding-top:35px;

}

.logo{

    width:170px;

}

main{

    padding:50px 24px 70px;

}

.badge{

    font-size:.85rem;

    padding:8px 18px;

    margin-bottom:28px;

}

h1{

    font-size:clamp(3rem,11vw,4.5rem);

    letter-spacing:-2px;

    margin-bottom:25px;

}

h1::after{

    width:90px;

    height:6px;

    margin-top:28px;

}

p{

    font-size:1rem;

    line-height:1.8;

    margin-top:30px;

}

.button{

    width:100%;

    max-width:320px;

    margin-top:45px;

    padding:18px;

}

.watermark{

    width:340px;

    right:-80px;

    bottom:-30px;

    opacity:.03;

}

footer{

    position:relative;

    margin-top:60px;

    padding-bottom:25px;

    font-size:.85rem;

}

body{

    overflow:auto;

}

}