:root {
color-scheme: light dark;

--bg: #FAFAF7;
--surface: #FFFFFF;
--surface2: #EEF0F2;
--border: #C9CDD3;
--ink: #121417;
--ink2: #3A3F47;
--ink3: #5F6673;
--primary: #FFD43B;
--primaryTint: #FFF5C2;
--onPrimary: #121417;
--band: #1F56D9;
--bandTint: #E4ECFF;
--onBand: #FFFFFF;
--ok: #15803D;
--okTint: #DCFCE7;
--warn: #B45309;
--warnTint: #FEF3C7;
--err: #C2352B;
--errTint: #FDE2E0;
--e1: 0 1px 2px rgba(18, 20, 23, .06);

--heroBg: #121417;
--heroInk: #F3F4F6;
--heroInk2: #B8BEC7;
--heroBorder: #343941;
--heroTape: #FFDF5C;

--sans: ui-sans-serif, -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto,
"Helvetica Neue", Arial, "Noto Sans", sans-serif;
}

@media (prefers-color-scheme: dark) {
:root {
--bg: #0F1114;
--surface: #1A1D22;
--surface2: #24282E;
--border: #343941;
--ink: #F3F4F6;
--ink2: #B8BEC7;
--ink3: #8B929D;
--primary: #FFDF5C;
--primaryTint: #3A3212;
--onPrimary: #121417;
--band: #7FA6FF;
--bandTint: #1B2742;
--onBand: #0F1114;
--ok: #4ADE80;
--okTint: #10331E;
--warn: #FBBF24;
--warnTint: #3A2A0A;
--err: #F87171;
--errTint: #3B1512;
--e1: none;
}
}

* { box-sizing: border-box; }

html { -webkit-text-size-adjust: 100%; }

body {
margin: 0;
background: var(--bg);
color: var(--ink);
font-family: var(--sans);
font-size: 1.0625rem;
line-height: 1.53;
text-wrap: pretty;
}

.skip {
position: absolute;
left: -9999px;
top: 0;
background: var(--surface);
color: var(--ink);
padding: 12px 16px;
border: 1px solid var(--border);
border-radius: 12px;
z-index: 2;
}
.skip:focus { left: 8px; top: 8px; }

.wrap {
max-width: 680px;
margin: 0 auto;
padding: 0 20px;
}
.wrap.wide,
header.site .wrap,
footer.site .wrap { max-width: 1080px; }

header.site {
border-bottom: 1px solid var(--border);
}
header.site .wrap {
min-height: 56px;
display: flex;
align-items: center;
justify-content: space-between;
gap: 16px;
flex-wrap: wrap;
padding-top: 8px;
padding-bottom: 8px;
}
.wordmark {
display: flex;
align-items: center;
min-height: 44px;
}
.wordmark img {
height: 24px;
width: auto;
display: block;
}
header.site nav {
display: flex;
align-items: center;
gap: 20px;
flex-wrap: wrap;
}
header.site nav a {
font-weight: 600;
font-size: 0.9375rem;
line-height: 1.34;
min-height: 44px;
display: flex;
align-items: center;
text-decoration: none;
}
header.site nav a.cta {
background: var(--primary);
color: var(--onPrimary);
border-radius: 10px;
padding: 0 14px;
}
@media (max-width: 47.99rem) {
header.site nav a.nav-wide { display: none; }
}
@media (max-width: 26rem) {
.wordmark img { height: 20px; }
header.site .wrap { gap: 12px; }
header.site nav { gap: 14px; }
header.site nav a { font-size: 0.875rem; }
header.site nav a.cta { padding: 0 12px; }
}

main { padding: 24px 0 40px; }

footer.site {
border-top: 1px solid var(--border);
}
footer.site .wrap {
padding-top: 20px;
padding-bottom: 40px;
display: flex;
flex-wrap: wrap;
gap: 8px 16px;
font-size: 0.8125rem;
line-height: 1.39;
font-weight: 500;
color: var(--ink3);
}
footer.site a { color: var(--ink3); }

h1, h2, h3 {
color: var(--ink);
letter-spacing: -0.01em;
margin: 0;
overflow-wrap: break-word;
hyphens: auto;
}
article.post { overflow-wrap: break-word; }
h1 { font-size: 1.75rem; line-height: 1.22; font-weight: 700; }
h2 { font-size: 1.375rem; line-height: 1.28; font-weight: 600; margin-top: 32px; }
h3 { font-size: 1.0625rem; line-height: 1.42; font-weight: 600; margin-top: 24px; }

p, ul, ol, dl { margin: 12px 0 0; }
ul, ol { padding-left: 22px; }
li { margin-top: 8px; }
li > ul, li > ol { margin-top: 8px; }

a { color: var(--band); }
a:focus-visible,
button:focus-visible,
input:focus-visible {
outline: 2px solid var(--band);
outline-offset: 2px;
}

.lead { color: var(--ink2); }
.meta {
color: var(--ink3);
font-size: 0.8125rem;
line-height: 1.39;
font-weight: 500;
}

.banner {
display: flex;
gap: 10px;
align-items: flex-start;
padding: 12px;
border-radius: 12px;
margin-top: 16px;
font-size: 0.9375rem;
line-height: 1.47;
}
.banner p { margin: 0; }
.banner p + p { margin-top: 8px; }
.banner svg { flex-shrink: 0; margin-top: 2px; }
.banner.info { background: var(--bandTint); color: var(--band); }
.banner.info a { color: inherit; }
.banner.warn { background: var(--warnTint); color: var(--warn); }
.banner.warn a { color: inherit; }

.card {
background: var(--surface);
border: 1px solid var(--border);
border-radius: 16px;
box-shadow: var(--e1);
padding: 20px;
margin-top: 24px;
}
.card > :first-child { margin-top: 0; }

.tablewrap { overflow-x: auto; margin-top: 16px; }
table {
border-collapse: collapse;
width: 100%;
min-width: 34ch;
font-size: 0.9375rem;
line-height: 1.47;
}
th, td {
text-align: left;
vertical-align: top;
padding: 10px 12px;
border-bottom: 1px solid var(--border);
}
th { font-weight: 600; color: var(--ink2); }
tbody tr:nth-child(even) { background: var(--surface2); }

.pendiente {
display: inline;
background: var(--warnTint);
color: var(--warn);
border-radius: 8px;
padding: 1px 6px;
font-weight: 600;
font-size: 0.9375rem;
}

.fsline {
font-size: min(2.5rem, 14vw);
line-height: 1.1;
font-weight: 800;
letter-spacing: -0.02em;
font-variant-numeric: tabular-nums;
color: var(--ink);
margin-top: 12px;
}
.fsest, .fsrange { white-space: nowrap; }
.fsdot { color: var(--ink3); }
.fsrange { color: var(--band); }

form { margin-top: 24px; }
fieldset {
border: none;
padding: 0;
margin: 0 0 20px;
}
legend {
padding: 0;
font-weight: 600;
font-size: 1.0625rem;
line-height: 1.42;
}
label {
display: block;
margin-top: 16px;
font-weight: 500;
font-size: 0.8125rem;
line-height: 1.39;
color: var(--ink2);
}
input[type="email"],
input[type="text"] {
display: block;
width: 100%;
margin-top: 8px;
min-height: 56px;
border-radius: 8px;
border: 1px solid var(--border);
background: var(--surface2);
color: var(--ink);
font-family: inherit;
font-size: 1.0625rem;
line-height: 1.42;
padding: 14px 16px;
}
input::placeholder { color: var(--ink3); }
.helper {
margin-top: 8px;
color: var(--ink3);
font-size: 0.8125rem;
line-height: 1.39;
font-weight: 500;
}
.choice {
display: flex;
gap: 12px;
align-items: flex-start;
margin-top: 16px;
font-weight: 400;
font-size: 1.0625rem;
line-height: 1.53;
color: var(--ink);
}
.choice input { margin-top: 6px; width: 20px; height: 20px; flex-shrink: 0; }
.choice label {
margin: 0;
font: inherit;
color: inherit;
}

button.primary {
margin-top: 24px;
width: 100%;
min-height: 52px;
border-radius: 12px;
border: none;
background: var(--primary);
color: var(--onPrimary);
font-family: inherit;
font-weight: 600;
font-size: 0.9375rem;
line-height: 1.34;
padding: 12px 16px;
cursor: pointer;
}

main > .band:first-child,
main > .hero:first-child { margin-top: -24px; }

.hero {
background: var(--heroBg);
color: var(--heroInk);
padding: 40px 0 48px;
border-bottom: 1px solid var(--heroBorder);
}
.hero-grid {
display: grid;
gap: 32px;
align-items: center;
}
@media (min-width: 52rem) {
.hero-grid { grid-template-columns: minmax(0, 1.1fr) minmax(0, 0.9fr); gap: 48px; }
.hero { padding: 64px 0 72px; }
}
.eyebrow {
color: var(--heroTape);
font-weight: 600;
font-size: 0.9375rem;
line-height: 1.34;
margin: 0 0 12px;
}
.hero h1 {
color: var(--heroInk);
font-size: clamp(2.25rem, 7vw, 3.5rem);
line-height: 1.05;
font-weight: 800;
letter-spacing: -0.02em;
}
.hero-lead {
color: var(--heroInk2);
font-size: 1.1875rem;
line-height: 1.47;
max-width: 34em;
margin-top: 16px;
}
.actions {
display: flex;
flex-wrap: wrap;
gap: 12px;
margin-top: 28px;
}
.button {
min-height: 52px;
display: inline-flex;
align-items: center;
justify-content: center;
padding: 12px 20px;
border-radius: 12px;
font-weight: 600;
font-size: 0.9375rem;
line-height: 1.34;
text-decoration: none;
}
.button.primary { background: var(--primary); color: var(--onPrimary); }
.button.ghost { color: var(--heroInk); border: 1px solid var(--heroBorder); }
.hero-note {
color: var(--heroInk);
font-weight: 600;
font-size: 0.9375rem;
line-height: 1.34;
margin-top: 16px;
}
.jump { margin-top: 20px; font-weight: 600; }
.jump a { color: var(--heroInk); }

.result {
margin: 0;
background: var(--surface);
color: var(--ink);
border: 1px solid var(--border);
border-radius: 20px;
padding: 24px;
box-shadow: var(--e1);
}
.result .meta { margin: 0; }
.result-label {
margin-top: 16px;
color: var(--ink2);
font-size: 0.8125rem;
line-height: 1.39;
font-weight: 600;
}
.result-label + .fsline { margin-top: 4px; }
.result-label + .chip { margin-top: 8px; }
.rail {
position: relative;
height: 8px;
border-radius: 4px;
background: var(--surface2);
margin-top: 24px;
}
.rail-band {
position: absolute;
left: 12%;
right: 12%;
top: 0;
bottom: 0;
border-radius: 4px;
background: var(--band);
}
.rail-tick {
position: absolute;
left: 50%;
top: -6px;
width: 2px;
height: 20px;
margin-left: -1px;
background: var(--ink);
}
.rail-labels {
display: flex;
justify-content: space-between;
padding: 0 6%;
margin-top: 10px;
font-weight: 600;
font-variant-numeric: tabular-nums;
}
.rail-labels span:first-child,
.rail-labels span:last-child { color: var(--band); }
.chip {
display: inline-block;
background: var(--surface2);
color: var(--ink);
border-radius: 999px;
padding: 6px 12px;
font-size: 0.8125rem;
line-height: 1.39;
font-weight: 600;
margin-top: 16px;
}
.result figcaption { margin-top: 16px; text-align: left; }

.band { padding: 48px 0; }
.band.alt { background: var(--surface2); }
.band h2 { margin-top: 0; font-size: 1.75rem; line-height: 1.22; font-weight: 700; }
@media (min-width: 52rem) {
.band { padding: 72px 0; }
.band h2 { font-size: 2rem; }
}

.steps {
list-style: none;
padding: 0;
display: grid;
gap: 24px;
margin-top: 24px;
}
@media (min-width: 52rem) {
.steps { grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 32px; }
}
.steps li { margin: 0; padding-top: 16px; border-top: 2px solid var(--ink); }
.step-n {
display: block;
font-size: 1.75rem;
line-height: 1;
font-weight: 800;
color: var(--ink3);
font-variant-numeric: tabular-nums;
}
.steps h3 { margin-top: 10px; font-size: 1.1875rem; }
.steps p { margin-top: 6px; color: var(--ink2); }
.band .actions { margin-top: 24px; }

figure { margin: 0; }
figcaption {
margin-top: 10px;
text-align: center;
color: var(--ink3);
font-size: 0.8125rem;
line-height: 1.39;
font-weight: 500;
}
.shot {
width: 100%;
max-width: 300px;
margin: 0 auto;
justify-self: center;
}
.shot img {
display: block;
width: 100%;
height: auto;
border-radius: 24px;
border: 1px solid var(--border);
box-shadow: var(--e1);
}

.plans {
display: grid;
gap: 24px;
margin-top: 24px;
align-items: start;
}
@media (min-width: 44rem) {
.plans { grid-template-columns: repeat(2, minmax(0, 1fr)); }
.plans .shot { grid-column: 1 / -1; }
}
@media (min-width: 64rem) {
.plans { grid-template-columns: repeat(2, minmax(0, 1fr)) minmax(0, 260px); }
.plans .shot { grid-column: auto; }
}
.plan-card {
background: var(--surface);
border: 1px solid var(--border);
border-radius: 16px;
padding: 24px;
box-shadow: var(--e1);
}
.plan-card.featured { border: 2px solid var(--ink); }
.plans + .helper { max-width: 46rem; margin-top: 20px; }
.plan-card h3 { margin-top: 0; font-size: 1.1875rem; }
.benefits { list-style: none; padding: 0; }
.benefits li { margin-top: 14px; color: var(--ink2); }
.benefits strong { display: block; color: var(--ink); }
.also {
margin-top: 16px;
padding-top: 16px;
border-top: 1px solid var(--border);
color: var(--ink2);
font-size: 0.9375rem;
line-height: 1.47;
}

.ticks { list-style: none; padding: 0; }
.ticks li { position: relative; padding-left: 28px; }
.ticks li::before {
content: "";
position: absolute;
left: 3px;
top: 0.45em;
width: 12px;
height: 7px;
border-left: 2px solid var(--ok);
border-bottom: 2px solid var(--ok);
transform: rotate(-45deg);
}

.split {
display: grid;
grid-template-columns: minmax(0, 1fr);
gap: 32px;
align-items: center;
}
@media (min-width: 52rem) {
.split { grid-template-columns: minmax(0, 1.2fr) minmax(0, 0.8fr); gap: 48px; }
.split.reverse { grid-template-columns: minmax(0, 0.8fr) minmax(0, 1.2fr); }
.split.reverse > .shot { order: -1; }
}
.kicker {
margin: 0 0 8px;
color: var(--ink3);
font-weight: 600;
font-size: 0.9375rem;
line-height: 1.34;
}
.free-line { margin-top: 16px; font-weight: 700; }

.trust {
list-style: none;
padding: 0;
display: grid;
gap: 20px;
margin-top: 24px;
}
@media (min-width: 52rem) {
.trust { grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 32px; }
}
.trust li { margin: 0; padding-top: 16px; border-top: 1px solid var(--border); }
.trust a { display: block; margin-top: 10px; font-weight: 600; }

details.faq { border-bottom: 1px solid var(--border); }
details.faq:first-of-type { margin-top: 16px; border-top: 1px solid var(--border); }
details.faq summary {
min-height: 56px;
padding: 12px 0;
display: flex;
align-items: center;
justify-content: space-between;
gap: 16px;
cursor: pointer;
font-weight: 600;
list-style: none;
}
details.faq summary::-webkit-details-marker { display: none; }
details.faq summary::after {
content: "";
flex-shrink: 0;
width: 9px;
height: 9px;
margin-right: 4px;
border-right: 2px solid var(--ink2);
border-bottom: 2px solid var(--ink2);
transform: rotate(45deg);
}
details.faq[open] summary::after { transform: rotate(-135deg); }
details.faq p { margin: 0 0 16px; color: var(--ink2); }
summary:focus-visible { outline: 2px solid var(--band); outline-offset: 2px; }

.closing {
background: var(--heroBg);
color: var(--heroInk2);
border-top: 1px solid var(--heroBorder);
}
.closing h2 { color: var(--heroInk); }
.closing .helper { color: var(--heroInk2); }
.closing .helper a { color: var(--heroInk); }
main > .band:last-child { margin-bottom: -40px; }

.posts { list-style: none; padding: 0; }
.posts li { margin: 0; padding: 4px 0 16px; border-bottom: 1px solid var(--border); }
.posts h2 { font-size: 1.25rem; margin-top: 16px; }
.posts h2 a { text-decoration: none; }
article.post h2 { margin-top: 36px; }
.subtitle {
margin-top: 8px;
color: var(--ink2);
font-size: 1.1875rem;
line-height: 1.42;
}
.toc {
margin-top: 28px;
padding-left: 16px;
border-left: 3px solid var(--border);
}
.toc .meta { margin: 0; }
.toc ol { margin-top: 4px; }
.toc li { margin-top: 4px; }
.product {
margin-top: 32px;
padding: 20px;
border-radius: 16px;
background: var(--surface2);
}
.product p:first-child { margin: 0; font-weight: 600; }
.product .actions { margin-top: 16px; }
.post-foot {
margin-top: 36px;
padding-top: 16px;
border-top: 1px solid var(--border);
}
blockquote {
margin: 16px 0 0;
padding-left: 16px;
border-left: 3px solid var(--primary);
color: var(--ink2);
}
code {
font-family: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;
font-size: 0.9em;
background: var(--surface2);
border-radius: 4px;
padding: 1px 4px;
}