@font-face {
  font-family: "Archivo";
  src: url("/fonts/archivo-var.woff2") format("woff2");
  font-weight: 100 900;
  font-stretch: 62% 125%;
  font-display: swap;
}
:root {
  color-scheme: light;
  --black: #0b0a10;
  --black-2: #17131f;
  --purple: #4b1d8f;
  --purple-deep: #2a1257;
  --purple-tint: #f1ecfa;
  --gold: #c9a24a;
  --gold-deep: #8a6508;
  --ivory: #faf8f4;
  --ivory-2: #f1eee7;
  --ink: #15121c;
  --muted: #5b566a;
  --line: #ddd8cc;
  --on-dark: #c4bfd2;
  --on-purple: #d9d0ee;
  --shadow: 0 1px 2px rgba(11, 10, 16, .3), 0 28px 60px rgba(0, 0, 0, .45);
  --r: 18px;
  --glass: rgba(255, 255, 255, .06);
  --glass-line: rgba(255, 255, 255, .14);
}
* { box-sizing: border-box; }
html { scroll-behavior: smooth; scroll-padding-top: 76px; scrollbar-color: var(--purple) var(--ivory-2); }
body { margin: 0; font: 400 17px/1.65 "Archivo", system-ui, -apple-system, "Segoe UI", Roboto, sans-serif; color: var(--ink); background: var(--ivory); }
::selection { background: var(--gold); color: var(--black); }
a { color: var(--purple); text-underline-offset: 3px; }
:focus-visible { outline: 2px solid var(--gold); outline-offset: 3px; box-shadow: 0 0 0 5px var(--black); }
.wrap { width: min(100% - 48px, 1120px); margin-inline: auto; }
h1, h2, h3 { margin: 0; text-wrap: balance; }
h1, h2 { font-weight: 500; line-height: 1.06; letter-spacing: -0.03em; }

header.top { position: sticky; top: 0; z-index: 10; background: rgba(250, 248, 244, .78); -webkit-backdrop-filter: saturate(1.4) blur(14px); backdrop-filter: saturate(1.4) blur(14px); border-bottom: 1px solid rgba(21, 18, 28, .08); padding: 14px 0; }
header.top .wrap { display: flex; align-items: center; justify-content: space-between; gap: 16px; }
.brand { display: flex; align-items: center; gap: 10px; font-weight: 600; font-size: 1.1rem; letter-spacing: -0.01em; color: var(--ink); text-decoration: none; }
.brand img { width: 32px; height: 32px; border-radius: 8px; }
.nav { display: flex; gap: 32px; }
.nav a { color: var(--muted); font-size: .94rem; text-decoration: none; padding: 8px 0; }
.nav a:hover { color: var(--ink); }
@media (max-width: 760px) { .nav { display: none; } }

.btn { display: inline-flex; align-items: center; justify-content: center; padding: 12px 28px; min-height: 50px; background: var(--black); color: var(--ivory); font-weight: 500; letter-spacing: .01em; text-decoration: none; border: 1px solid var(--black); border-radius: 999px; transition: background .2s, color .2s, border-color .2s; }
.btn:hover { background: var(--purple); border-color: var(--purple); }
.btn.alt { background: transparent; color: var(--ink); border-color: var(--ink); }
.btn.alt:hover { background: var(--ink); color: var(--ivory); }
.btn.small { min-height: 40px; padding: 6px 20px; font-size: .94rem; }
.cta { display: flex; flex-wrap: wrap; gap: 14px; }
.cta.center { justify-content: center; }

/* portada */
.hero { position: relative; overflow: hidden; background: var(--black); color: var(--on-dark); padding: 104px 0 112px; }
.hero::before { content: ""; position: absolute; width: 620px; height: 620px; right: -140px; top: -120px; border-radius: 50%; pointer-events: none; background: radial-gradient(closest-side, rgba(110, 56, 200, .5), rgba(110, 56, 200, 0)); }
.hero::after { content: ""; position: absolute; width: 420px; height: 420px; left: -160px; bottom: -220px; border-radius: 50%; pointer-events: none; background: radial-gradient(closest-side, rgba(201, 162, 74, .22), rgba(201, 162, 74, 0)); }
.hero-grid { position: relative; z-index: 1; }
.hero-grid { display: grid; gap: 72px; align-items: center; grid-template-columns: 1.2fr 1fr; }
.hero h1 { font-size: clamp(2.6rem, 6.6vw, 5.4rem); color: #fff; margin-bottom: 28px; }
.hero .lead { font-size: 1.12rem; max-width: 33rem; margin: 0 0 40px; }
.hero .btn { background: var(--gold); border-color: var(--gold); color: var(--black); font-weight: 600; }
.hero .btn:hover { background: #fff; border-color: #fff; }
.hero .btn.alt { background: transparent; color: #fff; border-color: rgba(255, 255, 255, .45); font-weight: 500; }
.hero .btn.alt:hover { background: transparent; border-color: var(--gold); color: var(--gold); }

.stampcard { margin: 0; background: linear-gradient(160deg, rgba(255, 255, 255, .11), rgba(255, 255, 255, .03)); -webkit-backdrop-filter: blur(18px); backdrop-filter: blur(18px); border: 1px solid var(--glass-line); padding: 32px 30px 26px; box-shadow: var(--shadow); border-radius: 26px; }
.stampcard figcaption { display: flex; flex-direction: column; margin-bottom: 26px; }
.stampcard figcaption strong { font-weight: 500; font-size: 1.35rem; letter-spacing: -0.02em; color: #fff; }
.stampcard figcaption span { color: var(--gold); font-size: .95rem; }
.tiles { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: repeat(4, 1fr); gap: 14px; }
.tiles li { position: relative; aspect-ratio: 1; display: grid; place-items: center; border-radius: 50%; border: 1px dashed rgba(255, 255, 255, .28); background: rgba(255, 255, 255, .03); }
.tiles li.on, .tiles li.next { border: 0; background: var(--gold); }
.tiles li.on::after, .tiles li.next::after { content: ""; width: 17%; height: 34%; border: solid var(--black); border-width: 0 3px 3px 0; transform: translateY(-8%) rotate(45deg); }
.tiles li.next { animation: stamp 4s cubic-bezier(.16, 1, .3, 1) infinite; }
@keyframes stamp { 0%, 12% { opacity: 0; scale: .6; } 26%, 84% { opacity: 1; scale: 1; } 100% { opacity: 0; scale: 1; } }
.tiles li.prize { border: 1px solid var(--gold); color: var(--gold); text-align: center; padding: 4px; }
.tiles li.prize span { font-weight: 600; font-size: .72rem; line-height: 1.1; letter-spacing: .04em; text-transform: uppercase; }
.sample { margin: 22px 0 0; font-size: .82rem; color: #8c85a0; }

.benefits { background: var(--ivory); border-bottom: 1px solid var(--line); padding: 30px 0; }
.benefits-grid { display: grid; gap: 12px 40px; grid-template-columns: repeat(auto-fit, minmax(210px, 1fr)); }
.benefits p { margin: 0; font-size: .95rem; color: var(--muted); }
.benefits strong { color: var(--ink); font-weight: 600; display: block; }

section { padding: 112px 0; }
section h2 { font-size: clamp(1.9rem, 4.2vw, 3rem); margin-bottom: 18px; }
.sub { margin: 0 0 56px; max-width: 42rem; color: var(--muted); font-size: 1.08rem; }

/* pasos */
.steps { list-style: none; padding: 0; margin: 56px 0 0; display: grid; grid-template-columns: repeat(3, 1fr); gap: 0 48px; }
.steps { gap: 20px; }
.step { background: rgba(75, 29, 143, .05); border: 1px solid rgba(75, 29, 143, .14); border-radius: 22px; padding: 32px 30px 36px; }
.step .num { display: block; font-weight: 300; font-size: 3.6rem; line-height: 1; letter-spacing: -0.04em; color: var(--purple); margin-bottom: 36px; }
.step h3 { font-weight: 600; font-size: 1.3rem; letter-spacing: -0.015em; margin-bottom: 10px; }
.step p { margin: 0; color: var(--muted); }
@media (max-width: 860px) { .steps { grid-template-columns: 1fr; gap: 40px; } .step .num { margin-bottom: 20px; } }

/* panel */
.panel { background: var(--purple-deep); color: var(--on-purple); }
.panel h2 { color: #fff; }
.panel .sub { color: var(--on-purple); }
.feats { display: grid; grid-template-columns: repeat(3, 1fr); gap: 0 48px; }
.feats { gap: 20px; }
.feats > div { padding: 28px 26px 32px; background: var(--glass); border: 1px solid var(--glass-line); border-radius: var(--r); }
.feats h3 { font-weight: 600; font-size: 1.1rem; color: #fff; margin-bottom: 8px; }
.feats p { margin: 0; }
@media (max-width: 900px) { .feats { grid-template-columns: 1fr 1fr; } }
@media (max-width: 560px) { .feats { grid-template-columns: 1fr; } }

/* planes */
.plans { display: grid; grid-template-columns: repeat(auto-fit, minmax(240px, 1fr)); border: 1px solid rgba(21, 18, 28, .12); background: rgba(255, 255, 255, .7); border-radius: 24px; overflow: hidden; box-shadow: 0 20px 50px rgba(42, 18, 87, .08); margin-bottom: 72px; }
.plan { padding: 36px 28px; display: flex; flex-direction: column; border-right: 1px solid rgba(21, 18, 28, .1); }
.plan:last-child { border-right: 0; }
.plan.featured { background: var(--black); color: var(--on-dark); }
.plan.soon { background: rgba(75, 29, 143, .05); }
.plan .level { margin: 0 0 10px; font-size: .85rem; color: var(--muted); }
.plan.featured .level { color: var(--gold); }
.plan h3 { font-weight: 500; font-size: 2rem; letter-spacing: -0.03em; line-height: 1.05; }
.plan.featured h3 { color: #fff; }
.plan .who { margin: 6px 0 26px; color: var(--muted); }
.plan.featured .who { color: var(--on-dark); }
.ticks { list-style: none; padding: 0; margin: 0 0 26px; display: grid; gap: 11px; }
.ticks li { padding-left: 28px; position: relative; font-size: .96rem; }
.ticks li::before { content: ""; position: absolute; left: 4px; top: .3em; width: 6px; height: 12px; border: solid var(--purple); border-width: 0 2px 2px 0; transform: rotate(45deg); }
.plan.featured .ticks li::before { border-color: var(--gold); }
.best { margin: auto 0 0; padding-top: 18px; border-top: 1px solid var(--line); font-size: .9rem; color: var(--muted); }
.plan.featured .best { border-top-color: #3a3248; color: var(--on-dark); }
@media (max-width: 760px) { .plan { border-right: 0; border-bottom: 1px solid var(--line); } .plan:last-child { border-bottom: 0; } }

.perks { display: grid; grid-template-columns: repeat(3, 1fr); gap: 0 48px; margin-bottom: 80px; }
.perks { gap: 20px; }
.perks > div { background: rgba(201, 162, 74, .1); border: 1px solid rgba(201, 162, 74, .35); border-radius: var(--r); padding: 24px 26px; }
.perks h3 { font-weight: 600; font-size: 1.1rem; margin-bottom: 6px; }
.perks p { margin: 0; color: var(--muted); }
@media (max-width: 800px) { .perks { grid-template-columns: 1fr; } }

.mini { font-weight: 500; font-size: 1.5rem; letter-spacing: -0.02em; margin-bottom: 20px; }
.table-wrap { overflow-x: auto; border: 1px solid rgba(21, 18, 28, .12); background: rgba(255, 255, 255, .7); border-radius: var(--r); box-shadow: 0 20px 50px rgba(42, 18, 87, .08); }
table { border-collapse: collapse; width: 100%; min-width: 600px; text-align: center; font-variant-numeric: tabular-nums; }
th, td { padding: 16px 18px; border-bottom: 1px solid var(--line); }
thead th { background: var(--black); color: #fff; font-weight: 500; }
tbody th { text-align: left; font-weight: 500; }
tbody tr:last-child > * { border-bottom: 0; }
tbody td:nth-child(3) { background: var(--purple-tint); font-weight: 600; }
.ok { display: inline-block; width: 7px; height: 14px; border: solid var(--purple); border-width: 0 2px 2px 0; transform: rotate(45deg) translateY(-2px); }
.note { margin: 28px 0 0; color: var(--muted); font-size: .93rem; max-width: 52rem; }
.doc .note { border-radius: 12px; }
.final .btn, .hero .btn { box-shadow: 0 8px 24px rgba(201, 162, 74, .25); }
.final .btn.alt, .hero .btn.alt { box-shadow: none; }

/* preguntas */
.faq-sec { background: var(--ivory-2); }
.faq { display: grid; gap: 12px; max-width: 50rem; }
.faq details { background: rgba(255, 255, 255, .65); border: 1px solid rgba(21, 18, 28, .1); border-radius: 16px; padding: 0 24px; transition: background .2s; }
.faq details[open] { background: rgba(255, 255, 255, .9); }
.faq summary { cursor: pointer; font-weight: 500; padding: 20px 36px 20px 0; min-height: 60px; position: relative; list-style: none; }
.faq summary::-webkit-details-marker { display: none; }
.faq summary::after { content: ""; position: absolute; right: 6px; top: 50%; width: 9px; height: 9px; border: solid var(--ink); border-width: 0 2px 2px 0; transform: translateY(-70%) rotate(45deg); transition: transform .2s; }
.faq details[open] summary::after { transform: translateY(-30%) rotate(-135deg); border-color: var(--gold-deep); }
.faq details[open] summary { color: var(--purple); }
.faq p { margin: 0 0 24px; max-width: 42rem; color: var(--muted); }

/* cierre */
.final { background: var(--black); color: #fff; text-align: center; padding: 128px 0; }
.final h2 { max-width: 44rem; margin: 0 auto 44px; font-size: clamp(2rem, 5vw, 3.6rem); }
.final .btn { background: var(--gold); border-color: var(--gold); color: var(--black); font-weight: 600; }
.final .btn:hover { background: #fff; border-color: #fff; }
.final .btn.alt { background: transparent; color: #fff; border-color: rgba(255, 255, 255, .45); font-weight: 500; }
.final .btn.alt:hover { background: transparent; border-color: var(--gold); color: var(--gold); }

footer { padding: 32px 0 44px; font-size: .93rem; color: var(--muted); border-top: 1px solid var(--line); }
footer .wrap { display: flex; flex-wrap: wrap; gap: 8px 24px; justify-content: space-between; }

/* documentos (privacidad) */
.doc { padding-block: 40px 64px; }
.doc h1 { font-size: clamp(1.8rem, 4vw, 2.6rem); margin-bottom: 16px; }
.doc h2 { font-size: 1.25rem; font-weight: 600; letter-spacing: -0.01em; margin-top: 36px; margin-bottom: 8px; }
.doc .note { background: var(--ivory-2); padding: 14px 18px; }

@media (max-width: 860px) {
  .hero-grid { grid-template-columns: 1fr; gap: 48px; }
  .hero { padding: 64px 0 72px; }
  section { padding: 72px 0; }
  .final { padding: 88px 0; }
}
@media (prefers-reduced-motion: reduce) { * { animation: none !important; transition: none !important; scroll-behavior: auto !important; } .tiles li.next { opacity: 1; } }

/* móvil: información más compacta (no afecta escritorio ni tablet) */
@media (max-width: 640px) {
  body { font-size: 15.5px; line-height: 1.55; }
  .wrap { width: min(100% - 32px, 1120px); }
  header.top { padding: 10px 0; }
  .brand { font-size: 1rem; }
  .brand img { width: 28px; height: 28px; }
  .btn { min-height: 46px; padding: 10px 22px; font-size: .95rem; }
  .btn.small { min-height: 36px; padding: 4px 16px; }
  .cta { gap: 10px; }
  .hero { padding: 40px 0 48px; }
  .hero-grid { gap: 32px; }
  .hero h1 { font-size: 2.3rem; margin-bottom: 16px; }
  .hero .lead { font-size: 1rem; margin-bottom: 24px; }
  .stampcard { padding: 22px 20px 18px; border-radius: 20px; }
  .stampcard figcaption { margin-bottom: 16px; }
  .stampcard figcaption strong { font-size: 1.15rem; }
  .tiles { gap: 10px; }
  .tiles li.prize span { font-size: .6rem; }
  .sample { margin-top: 14px; }
  .benefits { padding: 18px 0; }
  .benefits-grid { grid-template-columns: 1fr 1fr; gap: 10px 16px; }
  .benefits p { font-size: .85rem; }
  section { padding: 48px 0; }
  section h2 { font-size: 1.7rem; margin-bottom: 10px; }
  .sub { margin-bottom: 28px; font-size: .98rem; }
  .steps { margin-top: 28px; gap: 12px; }
  .step { padding: 20px 20px 22px; border-radius: 16px; }
  .step .num { font-size: 2.2rem; margin-bottom: 10px; }
  .step h3 { font-size: 1.1rem; margin-bottom: 6px; }
  .feats { grid-template-columns: 1fr 1fr; gap: 10px; }
  .feats > div { padding: 16px 16px 18px; border-radius: 14px; }
  .feats h3 { font-size: .95rem; margin-bottom: 4px; }
  .feats p { font-size: .85rem; line-height: 1.45; }
  .plans { margin-bottom: 36px; border-radius: 18px; }
  .plan { padding: 22px 20px; }
  .plan h3 { font-size: 1.6rem; }
  .plan .who { margin-bottom: 14px; }
  .ticks { gap: 7px; margin-bottom: 16px; }
  .ticks li { font-size: .92rem; }
  .best { padding-top: 12px; font-size: .85rem; }
  .perks { gap: 10px; margin-bottom: 44px; }
  .perks > div { padding: 16px 18px; border-radius: 14px; }
  .perks h3 { font-size: 1rem; }
  .mini { font-size: 1.25rem; margin-bottom: 12px; }
  th, td { padding: 11px 12px; font-size: .9rem; }
  .note { margin-top: 18px; font-size: .86rem; }
  .faq { gap: 8px; }
  .faq details { padding: 0 18px; border-radius: 14px; }
  .faq summary { padding: 15px 30px 15px 0; min-height: 48px; font-size: .97rem; }
  .faq p { margin-bottom: 16px; font-size: .93rem; }
  .final { padding: 56px 0; }
  .final h2 { font-size: 1.75rem; margin-bottom: 26px; }
  footer { padding: 22px 0 30px; font-size: .88rem; }
}