:root{
--azul-oscuro:#213e5d;
--azul-medio:#346ca3;
--azul-claro:#5a99c9;
--azul-agua:#4d99a4;
--txt:#0f172a;
--txt-muted:#64748b;
--border:#e2e8f0;
--bg:#ffffff;
--radius-card:22px;
--radius-btn:999px;
--shadow-sm: 0 8px 22px rgba(33, 62, 93, 0.10);
--shadow-md: 0 14px 32px rgba(33, 62, 93, 0.14);
--ring: 0 0 0 4px rgba(90,153,201,.28);
} body{
font-family: Inter, system-ui, -apple-system, Segoe UI, Roboto, Arial, sans-serif;
font-size:14px;
line-height:1.75;
background:var(--bg);
-webkit-font-smoothing: antialiased;
-moz-osx-font-smoothing: grayscale;
}
h1,h2,h3,h4,h5,h6{
font-family: Inter, system-ui, -apple-system, Segoe UI, Roboto, Arial, sans-serif;
letter-spacing:-0.02em;
}
h1{font-weight:800;font-size:clamp(2rem,3.2vw,3rem);line-height:1.1;}
h2{font-weight:800;font-size:clamp(1.6rem,2.4vw,2.25rem);line-height:1.2;}
h3{font-weight:700;font-size:1.5rem;line-height:1.25;}
a {text-decoration:none;} .text-azul-oscuro{color:var(--azul-oscuro);}
.text-azul-medio{color:var(--azul-medio);}
.text-azul-claro{color:var(--azul-claro);}
.text-azul-agua{color:var(--azul-agua);}
.text-muted{color:var(--txt-muted);}
.bg-azul-oscuro{background:var(--azul-oscuro);}
.bg-azul-medio{background:var(--azul-medio);}
.bg-azul-claro{background:var(--azul-claro);}
.bg-azul-agua{background:var(--azul-agua);} .link-underline{
position: relative;
text-decoration: none;
}
.link-underline::after{
content: "";
position: absolute;
left: 0;
bottom: -4px;
width: 100%;
height: 2px;
border-radius: 999px;
background: var(--azul-claro);
transform: scaleX(0);
transform-origin: left;
transition: transform .2s ease;
}
.link-underline:hover::after{
transform: scaleX(1);
} .btn{
display:inline-flex;
align-items:center;
justify-content:center;
gap:.75rem;
text-decoration:none;
font-weight:700;
line-height:1;
white-space:nowrap;
border-radius:15px;
transition:transform .15s ease, box-shadow .2s ease, background .2s ease, border-color .2s ease, color .2s ease;
will-change:transform;
}
.btn i{ font-size:1.05em; } .btn-lg{
min-height:56px;
padding:1.05rem 2.2rem;
font-size:15px;
} .btn-outline-azul{
background: rgba(255,255,255,.75);
color: var(--azul-claro);
border: 2px solid var(--azul-claro);
box-shadow: 0 16px 32px rgba(33,62,93,.10);
}
.btn-outline-azul:hover{
background: var(--azul-claro);
color:#fff;
box-shadow: 0 22px 44px rgba(33,62,93,.14);
transform: translateY(-1px);
}
.btn-outline-azul:active{
transform: translateY(1px) scale(.99);
} .btn-degradado{
display:inline-flex;
align-items:center;
justify-content:center;
padding:.95rem 2.2rem; border-radius:15px;
font-weight:700;
font-size:14px;
line-height:1;
color:#fff;
background: linear-gradient(90deg, var(--azul-claro), var(--azul-medio));
box-shadow: 0 16px 32px rgba(33,62,93,.18);
text-decoration:none;
transition:
transform .15s ease,
box-shadow .2s ease,
background .2s ease;
will-change:transform;
}
.btn-degradado:hover{
background: linear-gradient(180deg, var(--azul-medio), var(--azul-oscuro));
box-shadow: 0 22px 44px rgba(33,62,93,.22);
transform: translateY(-1px);
}
.btn-degradado:active{
transform: translateY(1px) scale(.99);
}
.badge{
display:inline-flex;
align-items:center;
gap:.75rem;
padding:.5rem 1rem;
border-radius:999px;
border:1px solid rgba(90,153,201,.25);
background:rgba(255,255,255,.85);
backdrop-filter: blur(6px);
color:var(--azul-medio);
font-size:.95rem;
font-weight:600;
box-shadow: 0 8px 22px rgba(33, 62, 93, 0.10);
} .bg-hero-gradient {
background-image: linear-gradient(
to right,
color-mix(in srgb, var(--azul-oscuro) 90%, transparent),
color-mix(in srgb, var(--azul-agua) 90%, transparent)
);
} .gpm-content{  } .gpm-content :is(h1,h2,h3,h4,h5,h6){
color: var(--azul-oscuro);
font-weight: 800;
letter-spacing: -0.02em;
scroll-margin-top: 110px; }
.gpm-content h1{ margin: 1.2em 0 .6em; line-height:1.1; }
.gpm-content h2{ margin: 1.4em 0 .6em; line-height:1.15; }
.gpm-content h3{ margin: 1.2em 0 .5em; line-height:1.2; font-weight:700; }
.gpm-content h4{ margin: 1em 0 .4em; line-height:1.25; font-weight:700; }
.gpm-content h5{ margin: .9em 0 .35em; line-height:1.3; font-weight:700; }
.gpm-content h6{ margin: .8em 0 .3em; line-height:1.35; font-weight:700; } .gpm-content p{
color: var(--txt-muted);
line-height: 1.85;
margin: 0 0 1.05em;
} .gpm-content a{
color: var(--azul-medio);
font-weight: 700;
text-decoration: none;
text-underline-offset: 3px;
}
.gpm-content a:hover{
color: var(--azul-claro);
text-decoration: underline;
} .gpm-content strong{
color: var(--azul-oscuro);
font-weight: 800;
} .gpm-content :is(ul,ol){
margin: 1.25em 0;
padding-left: 1.25em;
color: var(--txt-muted);
}
.gpm-content ul{ list-style: disc; }
.gpm-content ol{ list-style: decimal; }
.gpm-content li{ margin: .35em 0; }
.gpm-content li > :is(ul,ol){ margin: .6em 0; } .gpm-content blockquote{
margin: 1.4em 0;
padding: 1em 1.1em;
border-left: 4px solid var(--azul-claro);
background: #f8fafc;
border-radius: 0 18px 18px 0;
color: var(--azul-oscuro);
font-style: italic;
font-weight: 600;
}
.gpm-content blockquote p{ margin: 0; color: inherit; } .gpm-content img{
border-radius: 18px;
box-shadow: var(--shadow-sm);
margin: 1.6em 0;
} .gpm-content hr{
border: 0;
height: 1px;
background: var(--border);
margin: 2em 0;
} .gpm-content :not(pre) > code{
background: #f1f5f9;
padding: .15em .45em;
border-radius: 10px;
color: var(--azul-oscuro);
font-size: .95em;
font-weight: 600;
} .gpm-content pre{
background: #0f172a;
color: #e2e8f0;
padding: 1em 1.1em;
border-radius: 18px;
overflow-x: auto;
margin: 1.6em 0;
}
.gpm-content pre code{
background: transparent;
padding: 0;
color: inherit;
font-size: .95em;
} .gpm-content table{
width: 100%;
border-collapse: collapse;
margin: 1.6em 0;
overflow: hidden;
border-radius: 16px;
border: 1px solid var(--border);
}
.gpm-content th,
.gpm-content td{
padding: .75em .9em;
border-bottom: 1px solid var(--border);
text-align: left;
}
.gpm-content th{
background: #f8fafc;
color: var(--azul-oscuro);
font-weight: 800;
}
.gpm-content tr:last-child td{ border-bottom: 0; }