:root{

--primary:#007FFF;

--secondary:#003C96;

--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(0,127,255,.15);

background:rgba(0,127,255,.08);

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(--secondary)

);

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(0,127,255,.10),

transparent 70%

);

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;

}

}