Pages Hard
AI Ads — Dark Sales Landing (Spanish)
Una sales page oscura y premium en español para ClipForge, un curso ficticio de anuncios con IA. Reproduce la anatomía clásica de las páginas de venta de info-products: barra de urgencia con cuenta atrás, hero display con sello de pago único, franja de suscripciones rivales tachadas, bloque de price math con contadores animados, seis fichas de formatos de anuncio, registro/changelog con fechas, proof social con carrusel de testimonios, tres packs de pricing con garantía de reembolso, FAQ acordeón de 15 preguntas y barra inferior sticky con el pack estrella. HTML semántico, CSS con custom properties y vanilla JS sin dependencias.
Open in Lab
MCP
html css vanilla-js
Targets: JS HTML
Code
:root {
--bg: #0a0d14;
--bg-2: #0e1219;
--bg-3: #131926;
--surface: rgba(255, 255, 255, 0.035);
--surface-2: rgba(255, 255, 255, 0.06);
--border: rgba(255, 255, 255, 0.09);
--border-strong: rgba(255, 255, 255, 0.18);
--text: #f2f5fb;
--muted: #a3adc4;
--muted-2: #6d7893;
--lime: #c8f542;
--amber: #ffb224;
--red: #ff6b6b;
--grad-lime: linear-gradient(120deg, #c8f542, #7dd956);
--shadow: 0 24px 60px -20px rgba(5, 8, 16, 0.85);
--shadow-glow: 0 0 0 1px rgba(200, 245, 66, 0.28), 0 30px 90px -28px rgba(200, 245, 66, 0.35);
--r: 14px;
--r-lg: 22px;
--maxw: 1140px;
--font: "Inter", system-ui, -apple-system, "Segoe UI", Roboto, sans-serif;
--display: "Sora", var(--font);
--mono: "JetBrains Mono", ui-monospace, "SF Mono", Menlo, monospace;
}
* { box-sizing: border-box; margin: 0; padding: 0; }
html { scroll-behavior: smooth; }
body {
font-family: var(--font);
background: var(--bg);
color: var(--text);
line-height: 1.55;
-webkit-font-smoothing: antialiased;
-moz-osx-font-smoothing: grayscale;
overflow-x: hidden;
background-image:
radial-gradient(1000px 520px at 85% -6%, rgba(200, 245, 66, 0.07), transparent 60%),
radial-gradient(800px 500px at 0% 10%, rgba(255, 178, 36, 0.05), transparent 60%);
}
.container { width: min(var(--maxw), 100% - 2.5rem); margin-inline: auto; }
.container--narrow { width: min(820px, 100% - 2.5rem); }
.mono { font-family: var(--mono); }
.skip-link {
position: absolute; left: -9999px; top: 0;
background: var(--lime); color: #101400; padding: 0.6rem 1rem;
border-radius: 0 0 8px 0; z-index: 200; font-weight: 600;
}
.skip-link:focus { left: 0; }
/* ---------- Urgency bar ---------- */
.urgency {
background: linear-gradient(90deg, #1a2105, #232b0a 50%, #1a2105);
border-bottom: 1px solid rgba(200, 245, 66, 0.25);
font-size: 0.78rem;
}
.urgency__inner {
max-width: var(--maxw); margin-inline: auto;
display: flex; align-items: center; justify-content: center; gap: 0.65rem;
padding: 0.45rem 1rem; flex-wrap: wrap; text-align: center;
}
.urgency__flag {
font-family: var(--mono); font-weight: 700; font-size: 0.66rem; letter-spacing: 0.08em;
background: var(--lime); color: #101400; padding: 0.18rem 0.5rem; border-radius: 4px;
}
.urgency__text { color: var(--muted); }
.urgency__count { font-family: var(--mono); color: var(--lime); font-weight: 700; }
.urgency__cta {
color: var(--lime); font-weight: 700; text-decoration: none; border-bottom: 1px dashed rgba(200, 245, 66, 0.5);
}
/* ---------- Nav ---------- */
.nav {
position: sticky; top: 0; z-index: 100;
background: rgba(10, 13, 20, 0.82);
backdrop-filter: blur(14px); -webkit-backdrop-filter: blur(14px);
border-bottom: 1px solid transparent;
transition: border-color 0.25s ease, background 0.25s ease;
}
.nav.is-scrolled { border-bottom-color: var(--border); background: rgba(10, 13, 20, 0.94); }
.nav__inner { display: flex; align-items: center; gap: 1.4rem; padding: 0.85rem 0; }
.brand { display: inline-flex; align-items: center; gap: 0.55rem; text-decoration: none; color: var(--text); }
.brand__mark { color: var(--lime); display: grid; place-items: center; }
.brand__name { font-family: var(--display); font-weight: 700; font-size: 1.12rem; letter-spacing: -0.02em; }
.brand__name em { font-style: normal; color: var(--lime); }
.nav__links { display: flex; gap: 1.3rem; margin-left: auto; }
.nav__links a { color: var(--muted); text-decoration: none; font-size: 0.92rem; font-weight: 500; transition: color 0.2s; }
.nav__links a:hover { color: var(--text); }
.nav__actions { display: flex; align-items: center; gap: 1rem; }
.nav__proof { font-size: 0.75rem; color: var(--muted-2); white-space: nowrap; }
.nav__toggle {
display: none; margin-left: auto; background: none; border: 0; cursor: pointer;
width: 40px; height: 40px; position: relative;
}
.nav__toggle span {
position: absolute; left: 9px; right: 9px; height: 2px; background: var(--text);
border-radius: 2px; transition: transform 0.25s ease, opacity 0.2s ease, top 0.25s ease;
}
.nav__toggle span:nth-child(1) { top: 13px; }
.nav__toggle span:nth-child(2) { top: 19px; }
.nav__toggle span:nth-child(3) { top: 25px; }
.nav__toggle.is-open span:nth-child(1) { top: 19px; transform: rotate(45deg); }
.nav__toggle.is-open span:nth-child(2) { opacity: 0; }
.nav__toggle.is-open span:nth-child(3) { top: 19px; transform: rotate(-45deg); }
/* ---------- Buttons ---------- */
.btn {
display: inline-flex; align-items: center; justify-content: center; gap: 0.5rem;
font-family: var(--font); font-weight: 700; text-decoration: none; cursor: pointer;
border-radius: 10px; border: 1px solid transparent;
transition: transform 0.18s ease, box-shadow 0.25s ease, background 0.2s ease, border-color 0.2s ease;
}
.btn--primary { background: var(--grad-lime); color: #0c1000; box-shadow: 0 12px 32px -12px rgba(200, 245, 66, 0.55); }
.btn--primary:hover { transform: translateY(-2px); box-shadow: 0 18px 42px -14px rgba(200, 245, 66, 0.7); }
.btn--ghost { background: transparent; color: var(--text); border-color: var(--border-strong); }
.btn--ghost:hover { border-color: var(--lime); color: var(--lime); }
.btn--sm { padding: 0.55rem 1rem; font-size: 0.85rem; }
.btn--lg { padding: 0.95rem 1.7rem; font-size: 1rem; }
/* ---------- Hero ---------- */
.hero { position: relative; padding: 5.5rem 0 4.5rem; overflow: hidden; }
.hero__glow {
position: absolute; inset: -30% -10% auto; height: 130%;
background: radial-gradient(700px 420px at 75% 20%, rgba(200, 245, 66, 0.1), transparent 65%),
radial-gradient(600px 400px at 15% 80%, rgba(255, 178, 36, 0.06), transparent 60%);
pointer-events: none;
}
.hero__grid {
display: grid; grid-template-columns: 1.15fr 0.85fr; gap: 3.5rem; align-items: center;
position: relative;
}
.kicker {
display: inline-block; font-size: 0.7rem; letter-spacing: 0.14em; color: var(--lime);
border: 1px solid rgba(200, 245, 66, 0.3); border-radius: 999px; padding: 0.35rem 0.85rem;
margin-bottom: 1.4rem;
}
.hero h1 {
font-family: var(--display); font-size: clamp(2.4rem, 5.4vw, 4.1rem);
line-height: 1.04; letter-spacing: -0.03em; font-weight: 800; margin-bottom: 1.3rem;
}
.accent { color: var(--lime); }
.hero__sub { color: var(--muted); font-size: 1.08rem; max-width: 33rem; margin-bottom: 2rem; }
.hero__cta { display: flex; gap: 0.9rem; flex-wrap: wrap; margin-bottom: 1.6rem; }
.hero__meta { display: flex; gap: 1.2rem; flex-wrap: wrap; list-style: none; }
.hero__meta li { font-size: 0.8rem; color: var(--muted-2); }
.hero__meta li + li::before { content: "·"; margin-right: 1.2rem; color: var(--muted-2); }
.hero__panel {
background: var(--surface); border: 1px solid var(--border); border-radius: var(--r-lg);
padding: 1.6rem; box-shadow: var(--shadow); position: relative; overflow: hidden;
}
.hero__panel-head { font-size: 0.72rem; letter-spacing: 0.12em; color: var(--muted-2); }
.hero__price { display: flex; align-items: baseline; gap: 0.8rem; margin: 0.6rem 0 0.2rem; }
.hero__price s { color: var(--red); font-size: 1.5rem; font-weight: 600; }
.hero__price strong { font-family: var(--display); font-size: 3.2rem; font-weight: 800; color: var(--lime); letter-spacing: -0.02em; }
.hero__panel-note { font-size: 0.82rem; color: var(--muted); margin-bottom: 1.2rem; }
.hero__ticker { overflow: hidden; border-block: 1px solid var(--border); padding: 0.55rem 0; margin-bottom: 1.1rem; -webkit-mask-image: linear-gradient(90deg, transparent, #000 12%, #000 88%, transparent); mask-image: linear-gradient(90deg, transparent, #000 12%, #000 88%, transparent); }
.hero__ticker-track { display: flex; gap: 2.2rem; width: max-content; animation: ticker 26s linear infinite; }
.hero__ticker-track span { font-family: var(--mono); font-size: 0.72rem; color: var(--muted-2); white-space: nowrap; }
.hero__ticker-track b { color: var(--lime); font-weight: 500; }
@keyframes ticker { to { transform: translateX(-50%); } }
.hero__badges { display: flex; flex-wrap: wrap; gap: 0.5rem; list-style: none; }
.hero__badges li {
font-family: var(--mono); font-size: 0.64rem; letter-spacing: 0.06em; color: var(--muted);
border: 1px solid var(--border); border-radius: 6px; padding: 0.25rem 0.55rem;
}
.hero__scroll { text-align: center; color: var(--muted-2); font-size: 0.7rem; letter-spacing: 0.2em; margin-top: 3rem; }
/* ---------- Sections ---------- */
.section { padding: 4.5rem 0; }
.section + .section { border-top: 1px solid var(--border); }
.section__tag {
display: inline-block; font-size: 0.7rem; letter-spacing: 0.16em; color: var(--lime);
margin-bottom: 0.9rem;
}
.section__title {
font-family: var(--display); font-size: clamp(1.7rem, 3.4vw, 2.5rem);
letter-spacing: -0.02em; line-height: 1.12; font-weight: 800; margin-bottom: 0.8rem; max-width: 24ch;
}
.section__sub { color: var(--muted); max-width: 46rem; margin-bottom: 2.6rem; }
/* ---------- Price math ---------- */
.math__grid { display: grid; grid-template-columns: repeat(4, 1fr); gap: 1rem; margin-bottom: 2.2rem; }
.math__card {
background: var(--surface); border: 1px solid var(--border); border-radius: var(--r);
padding: 1.5rem 1.3rem;
}
.math__card--hot { border-color: rgba(200, 245, 66, 0.45); background: rgba(200, 245, 66, 0.05); }
.math__value { font-family: var(--display); font-size: 2.1rem; font-weight: 800; letter-spacing: -0.02em; display: block; }
.math__card--hot .math__value { color: var(--lime); }
.math__value small { color: var(--muted-2); font-weight: 400; }
.math__card h3 { font-size: 0.95rem; margin: 0.5rem 0 0.4rem; }
.math__card p { font-size: 0.82rem; color: var(--muted); }
.math__ledger { border: 1px dashed var(--border-strong); border-radius: var(--r); padding: 1.4rem 1.5rem; }
.ledger__row { display: grid; grid-template-columns: 200px 1fr; gap: 1rem; padding: 0.7rem 0; align-items: baseline; }
.ledger__row + .ledger__row { border-top: 1px solid var(--border); }
.ledger__when { font-size: 0.7rem; letter-spacing: 0.1em; color: var(--amber); }
.ledger__row p { font-size: 0.95rem; color: var(--text); }
.ledger__note { margin-top: 0.9rem; font-size: 0.82rem; color: var(--muted-2); }
/* ---------- Formats ---------- */
.formats__grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 1rem; }
.fmt {
position: relative; background: var(--surface); border: 1px solid var(--border);
border-radius: var(--r); padding: 1.5rem 1.4rem; transition: border-color 0.25s ease, transform 0.25s ease;
}
.fmt:hover { border-color: rgba(200, 245, 66, 0.4); transform: translateY(-3px); }
.fmt__no { font-size: 0.72rem; color: var(--muted-2); }
.fmt__count { font-size: 0.66rem; color: var(--muted-2); letter-spacing: 0.08em; display: block; margin-top: 0.2rem; }
.fmt__tag {
position: absolute; top: 1rem; right: 1rem; font-family: var(--mono); font-size: 0.6rem;
letter-spacing: 0.1em; background: var(--amber); color: #231500; padding: 0.2rem 0.5rem; border-radius: 4px; font-weight: 700;
}
.fmt h3 { font-family: var(--display); font-size: 1.25rem; margin: 0.7rem 0 0.5rem; letter-spacing: -0.01em; }
.fmt p { font-size: 0.86rem; color: var(--muted); }
.fmt--new { border-color: rgba(255, 178, 36, 0.35); }
/* ---------- Changelog ---------- */
.changelog__list { list-style: none; border-left: 2px solid var(--border); margin-left: 0.4rem; }
.changelog__list li { position: relative; padding: 0 0 1.8rem 1.8rem; }
.changelog__list li::before {
content: ""; position: absolute; left: -7px; top: 0.35rem; width: 12px; height: 12px;
border-radius: 50%; background: var(--bg); border: 2px solid var(--lime);
}
.log--next::before { border-color: var(--amber); background: var(--amber); box-shadow: 0 0 14px rgba(255, 178, 36, 0.6); }
.log__date { font-size: 0.68rem; letter-spacing: 0.12em; color: var(--muted-2); }
.log--next .log__date { color: var(--amber); }
.changelog__list h3 { font-family: var(--display); font-size: 1.1rem; margin: 0.4rem 0 0.3rem; }
.changelog__list p { font-size: 0.88rem; color: var(--muted); max-width: 44rem; }
/* ---------- Proof ---------- */
.proof__slider { position: relative; }
.proof__track { display: grid; grid-auto-flow: column; grid-auto-columns: min(360px, 82vw); gap: 1rem; overflow-x: auto; scroll-snap-type: x mandatory; padding-bottom: 1rem; scrollbar-width: thin; scrollbar-color: var(--border-strong) transparent; }
.quote {
scroll-snap-align: start; background: var(--surface); border: 1px solid var(--border);
border-radius: var(--r); padding: 1.5rem; display: flex; flex-direction: column; gap: 0.8rem;
}
.quote__stars { color: var(--amber); font-size: 0.9rem; letter-spacing: 0.15em; }
.quote blockquote { font-size: 0.98rem; line-height: 1.6; }
.quote figcaption { font-family: var(--mono); font-size: 0.72rem; color: var(--muted-2); margin-top: auto; }
.proof__nav { display: flex; gap: 0.5rem; }
.proof__btn {
width: 38px; height: 38px; border-radius: 10px; border: 1px solid var(--border-strong);
background: transparent; color: var(--text); font-size: 1rem; cursor: pointer; transition: border-color 0.2s, color 0.2s;
}
.proof__btn:hover { border-color: var(--lime); color: var(--lime); }
/* ---------- Syllabus ---------- */
.syllabus__rows { display: grid; gap: 0; border: 1px solid var(--border); border-radius: var(--r); overflow: hidden; }
.syl { display: grid; grid-template-columns: 130px 1fr; gap: 1.2rem; padding: 1.15rem 1.4rem; align-items: start; }
.syl + .syl { border-top: 1px solid var(--border); }
.syl__dur { font-size: 0.7rem; letter-spacing: 0.08em; color: var(--lime); padding-top: 0.25rem; }
.syl h3 { font-size: 1.02rem; font-weight: 700; margin-bottom: 0.25rem; }
.syl p { font-size: 0.86rem; color: var(--muted); }
/* ---------- Pricing ---------- */
.pricing__grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 1.1rem; align-items: stretch; }
.plan {
position: relative; background: var(--surface); border: 1px solid var(--border);
border-radius: var(--r-lg); padding: 1.7rem 1.5rem; display: flex; flex-direction: column;
}
.plan--hot {
border-color: rgba(200, 245, 66, 0.55); background: linear-gradient(180deg, rgba(200, 245, 66, 0.07), rgba(200, 245, 66, 0.02));
box-shadow: var(--shadow-glow); transform: scale(1.02); z-index: 1;
}
.plan__flag {
position: absolute; top: -0.85rem; left: 50%; transform: translateX(-50%);
background: var(--grad-lime); color: #0c1000; font-size: 0.68rem; font-weight: 700;
padding: 0.3rem 0.8rem; border-radius: 999px; white-space: nowrap;
}
.plan__label { font-size: 0.66rem; letter-spacing: 0.14em; color: var(--muted-2); }
.plan h3 { font-family: var(--display); font-size: 1.45rem; margin: 0.35rem 0 0.7rem; letter-spacing: -0.01em; }
.plan__price { display: flex; align-items: baseline; gap: 0.6rem; flex-wrap: wrap; margin-bottom: 1.2rem; }
.plan__price s { color: var(--red); font-size: 1.1rem; }
.plan__price strong { font-family: var(--display); font-size: 2.5rem; font-weight: 800; letter-spacing: -0.02em; }
.plan__price span { flex-basis: 100%; font-size: 0.74rem; color: var(--muted-2); }
.plan__list { list-style: none; display: grid; gap: 0.55rem; margin-bottom: 1.5rem; flex: 1; }
.plan__list li { font-size: 0.87rem; color: var(--muted); padding-left: 1.35rem; position: relative; }
.plan__list li::before {
content: "✓"; position: absolute; left: 0; top: 0; color: var(--lime); font-weight: 700; font-size: 0.8rem;
}
.plan__list .plan__minus { color: var(--muted-2); }
.plan__list .plan__minus::before { content: "–"; color: var(--red); }
.plan__btn { width: 100%; padding: 0.85rem 1rem; }
.pricing__guarantee {
margin-top: 2rem; display: flex; gap: 1.1rem; align-items: center;
border: 1px dashed rgba(200, 245, 66, 0.4); border-radius: var(--r); padding: 1.4rem 1.6rem;
color: var(--lime);
}
.pricing__guarantee h3 { font-size: 1.02rem; color: var(--text); margin-bottom: 0.25rem; }
.pricing__guarantee p { font-size: 0.87rem; color: var(--muted); }
/* ---------- FAQ ---------- */
.faq__list { display: grid; gap: 0.6rem; }
.faq__item {
background: var(--surface); border: 1px solid var(--border); border-radius: 12px;
overflow: hidden; transition: border-color 0.2s ease;
}
.faq__item[open] { border-color: rgba(200, 245, 66, 0.35); }
.faq__item summary {
list-style: none; cursor: pointer; display: flex; align-items: center; justify-content: space-between;
gap: 1rem; padding: 1rem 1.25rem; font-weight: 600; font-size: 0.95rem;
}
.faq__item summary::-webkit-details-marker { display: none; }
.faq__icon { color: var(--lime); font-size: 1.3rem; font-weight: 400; transition: transform 0.25s ease; }
.faq__item[open] .faq__icon { transform: rotate(45deg); }
.faq__item p { padding: 0 1.25rem 1.1rem; font-size: 0.88rem; color: var(--muted); max-width: 60rem; }
.faq__item summary:focus-visible { outline: 2px solid var(--lime); outline-offset: -2px; border-radius: 12px; }
/* ---------- Final CTA ---------- */
.final { padding: 5.5rem 0; }
.final__inner { text-align: center; max-width: 46rem; }
.final__inner h2 { font-family: var(--display); font-size: clamp(1.9rem, 4vw, 2.9rem); letter-spacing: -0.02em; line-height: 1.1; margin-bottom: 1.1rem; }
.final__inner p { color: var(--muted); margin-bottom: 2rem; }
.final__meta { display: flex; justify-content: center; gap: 1.4rem; list-style: none; margin-top: 1.6rem; flex-wrap: wrap; }
.final__meta li { font-size: 0.7rem; letter-spacing: 0.12em; color: var(--muted-2); }
.final__meta li + li::before { content: "·"; margin-right: 1.4rem; color: var(--muted-2); }
/* ---------- Sticky bar ---------- */
.stickybar {
position: fixed; left: 0; right: 0; bottom: 0; z-index: 90;
background: rgba(14, 18, 25, 0.92); backdrop-filter: blur(14px); -webkit-backdrop-filter: blur(14px);
border-top: 1px solid var(--border-strong);
transform: translateY(110%); transition: transform 0.35s ease;
padding-bottom: env(safe-area-inset-bottom, 0);
}
.stickybar.is-visible { transform: translateY(0); }
.stickybar__inner {
max-width: var(--maxw); margin-inline: auto; padding: 0.7rem 1rem;
display: flex; align-items: center; justify-content: space-between; gap: 1rem;
}
.stickybar__copy strong { display: block; font-size: 0.92rem; }
.stickybar__copy .mono { font-size: 0.66rem; color: var(--muted-2); letter-spacing: 0.06em; }
/* ---------- Footer ---------- */
.footer { border-top: 1px solid var(--border); padding: 2.4rem 0 7rem; }
.footer__inner { display: flex; align-items: center; gap: 1.4rem; flex-wrap: wrap; }
.footer__brand { font-size: 1rem; }
.footer p { font-size: 0.76rem; color: var(--muted-2); }
.footer__legal { margin-left: auto; display: flex; gap: 1rem; }
.footer__legal a { font-size: 0.76rem; color: var(--muted-2); text-decoration: none; }
.footer__legal a:hover { color: var(--text); }
/* ---------- Toast ---------- */
.toast {
position: fixed; bottom: 5.5rem; left: 50%; transform: translate(-50%, 20px);
background: #1c2433; border: 1px solid var(--border-strong); color: var(--text);
padding: 0.75rem 1.3rem; border-radius: 10px; font-size: 0.86rem;
opacity: 0; pointer-events: none; transition: opacity 0.25s ease, transform 0.25s ease; z-index: 300;
box-shadow: var(--shadow); max-width: min(90vw, 420px); text-align: center;
}
.toast.is-visible { opacity: 1; transform: translate(-50%, 0); }
/* ---------- Reveal ---------- */
.reveal { opacity: 0; transform: translateY(22px); transition: opacity 0.6s ease, transform 0.6s ease; }
.reveal.is-in { opacity: 1; transform: none; }
/* ---------- Responsive ---------- */
@media (max-width: 960px) {
.hero__grid { grid-template-columns: 1fr; gap: 2.5rem; }
.math__grid { grid-template-columns: repeat(2, 1fr); }
.formats__grid { grid-template-columns: repeat(2, 1fr); }
.pricing__grid { grid-template-columns: 1fr; max-width: 460px; margin-inline: auto; }
.plan--hot { transform: none; order: -1; }
.nav__proof { display: none; }
}
@media (max-width: 640px) {
.nav__links {
position: absolute; top: 100%; left: 0; right: 0;
background: var(--bg-2); border-bottom: 1px solid var(--border);
flex-direction: column; gap: 0; padding: 0.4rem 1.2rem 0.9rem; display: none;
}
.nav__links.is-open { display: flex; }
.nav__links a { padding: 0.7rem 0; border-bottom: 1px solid var(--border); }
.nav__toggle { display: block; }
.nav__actions .btn { display: none; }
.math__grid { grid-template-columns: 1fr; }
.formats__grid { grid-template-columns: 1fr; }
.ledger__row { grid-template-columns: 1fr; gap: 0.2rem; }
.syl { grid-template-columns: 1fr; gap: 0.3rem; }
.stickybar__copy .mono { display: none; }
.footer__legal { margin-left: 0; }
}
@media (prefers-reduced-motion: reduce) {
html { scroll-behavior: auto; }
*, *::before, *::after { animation-duration: 0.01ms !important; transition-duration: 0.01ms !important; }
.reveal { opacity: 1; transform: none; }
.hero__ticker-track { animation: none; }
}(function () {
"use strict";
var reduceMotion = window.matchMedia("(prefers-reduced-motion: reduce)").matches;
/* ---------- Toast helper ---------- */
var toastEl = document.getElementById("toast");
var toastTimer;
function toast(msg) {
if (!toastEl) return;
toastEl.textContent = msg;
toastEl.classList.add("is-visible");
clearTimeout(toastTimer);
toastTimer = setTimeout(function () {
toastEl.classList.remove("is-visible");
}, 2600);
}
document.addEventListener("click", function (e) {
var t = e.target.closest(".js-toast");
if (t) {
e.preventDefault();
toast(t.getAttribute("data-msg") || "Acción de demostración.");
}
});
/* ---------- Nav: scroll state + mobile toggle ---------- */
var nav = document.getElementById("nav");
window.addEventListener(
"scroll",
function () {
if (window.scrollY > 12) nav.classList.add("is-scrolled");
else nav.classList.remove("is-scrolled");
},
{ passive: true }
);
var navToggle = document.getElementById("navToggle");
var navLinks = document.getElementById("navLinks");
navToggle.addEventListener("click", function () {
var open = navLinks.classList.toggle("is-open");
navToggle.classList.toggle("is-open", open);
navToggle.setAttribute("aria-expanded", String(open));
navToggle.setAttribute("aria-label", open ? "Cerrar menú" : "Abrir menú");
});
navLinks.addEventListener("click", function (e) {
if (e.target.tagName === "A") {
navLinks.classList.remove("is-open");
navToggle.classList.remove("is-open");
navToggle.setAttribute("aria-expanded", "false");
}
});
/* ---------- Urgency countdown (9 days, loops for demo) ---------- */
var urgencyEl = document.getElementById("urgencyCount");
if (urgencyEl) {
var end = Date.now() + 9 * 24 * 60 * 60 * 1000;
function pad(n) {
return String(n).padStart(2, "0");
}
function tick() {
var ms = Math.max(0, end - Date.now());
var d = Math.floor(ms / 86400000);
var h = Math.floor((ms % 86400000) / 3600000);
var m = Math.floor((ms % 3600000) / 60000);
var s = Math.floor((ms % 60000) / 1000);
urgencyEl.textContent = pad(d) + "d " + pad(h) + ":" + pad(m) + ":" + pad(s);
}
tick();
setInterval(tick, 1000);
}
/* ---------- Reveal on scroll ---------- */
var revealEls = Array.prototype.slice.call(document.querySelectorAll(".reveal"));
if ("IntersectionObserver" in window && !reduceMotion) {
var io = new IntersectionObserver(
function (entries) {
entries.forEach(function (entry) {
if (entry.isIntersecting) {
entry.target.classList.add("is-in");
io.unobserve(entry.target);
}
});
},
{ threshold: 0.12 }
);
revealEls.forEach(function (el) {
io.observe(el);
});
} else {
revealEls.forEach(function (el) {
el.classList.add("is-in");
});
}
/* ---------- Count-up stats ---------- */
function formatDecimal(value, decimals, prefix, suffix) {
var fixed = value.toFixed(decimals);
var withComma = decimals > 0 ? fixed.replace(".", ",") : fixed;
return (prefix || "") + withComma + (suffix || "");
}
function animateCount(el) {
var target = parseFloat(el.getAttribute("data-count") || "0");
var decimals = parseInt(el.getAttribute("data-decimals") || "0", 10);
var prefix = el.getAttribute("data-prefix") || "";
var suffix = el.getAttribute("data-suffix") || "";
if (reduceMotion || target === 0) {
el.textContent = formatDecimal(target, decimals, prefix, suffix);
return;
}
var duration = 1400;
var start = null;
function step(ts) {
if (!start) start = ts;
var p = Math.min(1, (ts - start) / duration);
var eased = 1 - Math.pow(1 - p, 3);
el.textContent = formatDecimal(target * eased, decimals, prefix, suffix);
if (p < 1) requestAnimationFrame(step);
else el.textContent = formatDecimal(target, decimals, prefix, suffix);
}
requestAnimationFrame(step);
}
var countEls = Array.prototype.slice.call(document.querySelectorAll(".count"));
if ("IntersectionObserver" in window) {
var cio = new IntersectionObserver(
function (entries) {
entries.forEach(function (entry) {
if (entry.isIntersecting) {
animateCount(entry.target);
cio.unobserve(entry.target);
}
});
},
{ threshold: 0.4 }
);
countEls.forEach(function (el) {
cio.observe(el);
});
} else {
countEls.forEach(animateCount);
}
/* ---------- Testimonial slider ---------- */
var track = document.getElementById("proofTrack");
if (track) {
var prev = document.getElementById("proofPrev");
var next = document.getElementById("proofNext");
var pauseBtn = document.getElementById("proofPause");
var autoTimer = null;
var paused = false;
function slideBy(dir) {
var card = track.querySelector(".quote");
var step = card ? card.getBoundingClientRect().width + 16 : 340;
track.scrollBy({ left: step * dir, behavior: reduceMotion ? "auto" : "smooth" });
}
prev.addEventListener("click", function () {
slideBy(-1);
});
next.addEventListener("click", function () {
slideBy(1);
});
function startAuto() {
if (autoTimer || reduceMotion) return;
autoTimer = setInterval(function () {
var max = track.scrollWidth - track.clientWidth - 4;
if (track.scrollLeft >= max) track.scrollTo({ left: 0, behavior: "auto" });
else slideBy(1);
}, 4200);
}
function stopAuto() {
clearInterval(autoTimer);
autoTimer = null;
}
track.addEventListener("pointerenter", stopAuto);
track.addEventListener("pointerleave", function () {
if (!paused) startAuto();
});
pauseBtn.addEventListener("click", function () {
paused = !paused;
pauseBtn.textContent = paused ? "▶" : "⏸";
pauseBtn.setAttribute("aria-pressed", String(paused));
if (paused) stopAuto();
else startAuto();
});
startAuto();
}
/* ---------- FAQ: only one open at a time ---------- */
var faqItems = Array.prototype.slice.call(document.querySelectorAll(".faq__item"));
faqItems.forEach(function (item) {
item.addEventListener("toggle", function () {
if (item.open) {
faqItems.forEach(function (other) {
if (other !== item) other.open = false;
});
}
});
});
/* ---------- Sticky bar appears after hero ---------- */
var stickybar = document.getElementById("stickybar");
if (stickybar) {
var hero = document.querySelector(".hero");
var sio = new IntersectionObserver(
function (entries) {
entries.forEach(function (entry) {
stickybar.classList.toggle("is-visible", !entry.isIntersecting && entry.boundingClientRect.top < 0);
});
},
{ threshold: 0 }
);
if (hero) sio.observe(hero);
}
})();<!doctype html>
<html lang="es">
<head>
<meta charset="utf-8" />
<meta name="viewport" content="width=device-width, initial-scale=1" />
<title>ClipForge — Anuncios con IA por menos de 1€, sin suscripciones</title>
<meta name="description" content="Curso en video para crear anuncios con IA pagando precio de fábrica: céntimos por clip, cero mensualidades. Pago único, de por vida." />
<link rel="preconnect" href="https://fonts.googleapis.com" />
<link rel="preconnect" href="https://fonts.gstatic.com" crossorigin />
<link href="https://fonts.googleapis.com/css2?family=Sora:wght@400;600;700;800&family=Inter:wght@400;500;600;700&family=JetBrains+Mono:wght@400;500;700&display=swap" rel="stylesheet" />
<link rel="stylesheet" href="style.css" />
</head>
<body>
<a class="skip-link" href="#main">Saltar al contenido</a>
<!-- URGENCY BAR -->
<div class="urgency" role="region" aria-label="Oferta temporal">
<div class="urgency__inner">
<span class="urgency__flag">TRUCO TEMPORAL</span>
<span class="urgency__text">clips desde $0,02 · termina en</span>
<span class="urgency__count" id="urgencyCount" aria-live="polite">09d 00:00:00</span>
<a class="urgency__cta" href="#pricing">aprovéchalo</a>
</div>
</div>
<!-- NAV -->
<header class="nav" id="nav">
<div class="container nav__inner">
<a href="#top" class="brand" aria-label="ClipForge inicio">
<span class="brand__mark" aria-hidden="true">
<svg width="24" height="24" viewBox="0 0 24 24" fill="none"><path d="M4 6.5A2.5 2.5 0 0 1 6.5 4h7A2.5 2.5 0 0 1 16 6.5v11A2.5 2.5 0 0 1 13.5 20h-7A2.5 2.5 0 0 1 4 17.5v-11Z" stroke="currentColor" stroke-width="1.6"/><path d="M16 10.2 21 7.4v9.2l-5-2.8" stroke="currentColor" stroke-width="1.6" stroke-linejoin="round"/><path d="M12.8 9.4l-4 2.6 4 2.6" stroke="currentColor" stroke-width="1.6" stroke-linecap="round" stroke-linejoin="round"/></svg>
</span>
<span class="brand__name">clip<em>forge</em></span>
</a>
<nav class="nav__links" id="navLinks" aria-label="Principal">
<a href="#formats">Formatos</a>
<a href="#proof">Resultados</a>
<a href="#syllabus">Temario</a>
<a href="#pricing">Precios</a>
</nav>
<div class="nav__actions">
<span class="nav__proof" aria-hidden="true">+6.186 alumnos · ★ 4,9/5</span>
<a href="#pricing" class="btn btn--primary btn--sm">Quiero entrar</a>
</div>
<button class="nav__toggle" id="navToggle" aria-label="Abrir menú" aria-expanded="false" aria-controls="navLinks">
<span></span><span></span><span></span>
</button>
</div>
</header>
<main id="main">
<span id="top"></span>
<!-- HERO -->
<section class="hero">
<div class="hero__glow" aria-hidden="true"></div>
<div class="container hero__grid">
<div class="hero__copy reveal">
<span class="kicker mono">CURSO EN VIDEO · SIEMPRE AL DÍA · ANUNCIOS CON IA PARA LO QUE VENDAS</span>
<h1>Un anuncio completo<br /><span class="accent">por menos de 1€</span><br />sin suscripciones</h1>
<p class="hero__sub">Cancelé mis tres suscripciones de IA hace un año y sigo creando todos mis anuncios. Voy directo a los modelos y pago solo lo que genero: céntimos por clip.</p>
<div class="hero__cta">
<a href="#pricing" class="btn btn--primary btn--lg">Quiero anuncios por menos de 1€</a>
<a href="#math" class="btn btn--ghost btn--lg">Ver números ↓</a>
</div>
<ul class="hero__meta">
<li>Curso en video + academia propia</li>
<li>Pago único · sin suscripción</li>
<li>Tuyo de por vida</li>
</ul>
</div>
<div class="hero__panel reveal" aria-label="Comparativa de precios">
<div class="hero__panel-head mono">este video:</div>
<div class="hero__price"><s>$47</s> <strong id="heroPrice">$0,85</strong></div>
<p class="hero__panel-note">hecho con el método · 3 clips de 12 s</p>
<div class="hero__ticker" aria-hidden="true">
<div class="hero__ticker-track">
<span>Higgsfield · <b>PAGO ÚNICO</b></span><span>Heygen · <b>SIN MENSUALIDADES</b></span><span>Freepik · <b>DE POR VIDA</b></span><span>Weavy · <b>$0/AL MES</b></span>
<span>Higgsfield · <b>PAGO ÚNICO</b></span><span>Heygen · <b>SIN MENSUALIDADES</b></span><span>Freepik · <b>DE POR VIDA</b></span><span>Weavy · <b>$0/AL MES</b></span>
</div>
</div>
<ul class="hero__badges">
<li>Pago seguro</li><li>VISA</li><li>MC</li><li>PayPal</li><li>Apple Pay</li><li>G Pay</li>
</ul>
</div>
</div>
<div class="hero__scroll mono" aria-hidden="true">desliza ↓</div>
</section>
<!-- PRICE MATH -->
<section class="section math" id="math">
<div class="container">
<span class="section__tag mono">01 · LOS NÚMEROS</span>
<h2 class="section__title">Las cifras que no te vas a creer.</h2>
<p class="section__sub">Precio de fábrica frente a suscripción: el mismo modelo, sin el intermediario.</p>
<div class="math__grid">
<article class="math__card reveal">
<span class="math__value"><span class="count" data-count="0.89" data-decimals="2" data-prefix="$">$0,00</span></span>
<h3>un anuncio</h3>
<p>de 45 segundos: 3 clips × $0,30. Ese es el coste real de generación.</p>
</article>
<article class="math__card reveal">
<span class="math__value"><span class="count" data-count="80">0</span> <small>/</small> <span class="count" data-count="0.85" data-decimals="2" data-prefix="$">$0,00</span></span>
<h3>imágenes para campañas</h3>
<p>80 imágenes listas para feeds y carruseles por $0,85: $0,01 cada una.</p>
</article>
<article class="math__card reveal">
<span class="math__value"><span class="count" data-count="0" data-decimals="0" data-prefix="0€" data-suffix="/mes">0€/mes</span></span>
<h3>en suscripciones</h3>
<p>para siempre. Cero mensualidades: pagas solo lo que generas.</p>
</article>
<article class="math__card math__card--hot reveal">
<span class="math__value"><span class="count" data-count="0.02" data-decimals="2" data-prefix="$">$0,00</span></span>
<h3>el truco temporal</h3>
<p>un clip a $0,02 mientras dure: un anuncio entero por ~$0,06.</p>
</article>
</div>
<div class="math__ledger reveal" role="figure" aria-label="Cuentas claras">
<div class="ledger__row">
<span class="ledger__when mono">HOY · una sola vez</span>
<p>el curso — pago único, el precio está en la hoja de pedido</p>
</div>
<div class="ledger__row">
<span class="ledger__when mono">DESPUÉS · cada video</span>
<p>tu propio gasto: cada clip de 10–15 s por unos $0,30 · 80 imágenes por $0,85</p>
</div>
<p class="ledger__note">Funciona como echar gasolina: recargas desde $1 y se gasta solo al generar. Sin créditos, sin comisión.</p>
</div>
</div>
</section>
<!-- FORMATS -->
<section class="section formats" id="formats">
<div class="container">
<span class="section__tag mono">02 · LAS FICHAS</span>
<h2 class="section__title">Un anuncio para cada momento. Todos con IA.</h2>
<p class="section__sub">El método va por formatos, no por nichos: eliges el que encaja con lo que vendes y lo adaptas en minutos.</p>
<div class="formats__grid">
<article class="fmt reveal">
<span class="fmt__no mono">01</span><span class="fmt__count mono">14 ejemplos</span>
<h3>UGC</h3>
<p>Una persona recomendando tu producto como si fuera un cliente más — sin pagar actores ni influencers.</p>
</article>
<article class="fmt reveal">
<span class="fmt__no mono">02</span><span class="fmt__count mono">4 ejemplos</span>
<h3>UGC con voz en off</h3>
<p>Clips del día a día con narración encima, sin poner a nadie frente a cámara.</p>
</article>
<article class="fmt reveal">
<span class="fmt__no mono">03</span><span class="fmt__count mono">6 ejemplos</span>
<h3>Ads Animados</h3>
<p>Desde una sola foto del producto: problema, solución y antes/después imposibles de ignorar.</p>
</article>
<article class="fmt reveal">
<span class="fmt__no mono">04</span><span class="fmt__count mono">5 ejemplos</span>
<h3>Podcast</h3>
<p>Dos personas hablando como en un podcast real. El formato que crea autoridad antes de vender.</p>
</article>
<article class="fmt fmt--new reveal">
<span class="fmt__no mono">05</span><span class="fmt__tag">NUEVO</span><span class="fmt__count mono">5 ejemplos</span>
<h3>DualCast</h3>
<p>Dos personas a la vez delante de cámara, interactuando entre ellas y con quien mira.</p>
</article>
<article class="fmt reveal">
<span class="fmt__no mono">06</span><span class="fmt__count mono">24 ejemplos</span>
<h3>Imágenes para Ads</h3>
<p>Testimonio, antes/después, estilo foro, comparativas: 7 formatos estáticos desde una foto.</p>
</article>
</div>
</div>
</section>
<!-- CHANGELOG -->
<section class="section changelog" id="changelog">
<div class="container">
<span class="section__tag mono">03 · EL REGISTRO</span>
<h2 class="section__title">Una formación que se mantiene viva.</h2>
<p class="section__sub">Cada vez que el mundo IA cambia, hay una entrada nueva aquí. Con fecha.</p>
<ol class="changelog__list">
<li class="reveal">
<span class="log__date mono">12 · ENE 2026</span>
<h3>Vol 1 — donde empezó todo</h3>
<p>Los primeros formatos: UGC, anuncios en imagen y trends, documentados paso a paso.</p>
</li>
<li class="reveal">
<span class="log__date mono">07 · JUN 2026</span>
<h3>Vol 2 — Podcast, UGC y voz en off</h3>
<p>Tres formatos realistas nuevos, siempre al menor coste posible.</p>
</li>
<li class="reveal">
<span class="log__date mono">23 · JUL 2026</span>
<h3>Vol 3 — DualCast y motor nuevo</h3>
<p>Dos personas delante de cámara y un motor nuevo aplicado a Podcast y UGC.</p>
</li>
<li class="reveal">
<span class="log__date mono">01 · AGO 2026</span>
<h3>Herramienta quitamarcas + academia propia</h3>
<p>Área de alumno por niveles, en español, con la herramienta quitamarcas incluida.</p>
</li>
<li class="reveal log--next">
<span class="log__date mono">PRÓXIMA ENTREGA</span>
<h3>Ads Animados, rehecho desde cero</h3>
<p>Dirección creativa con IA, nuevos workflows y más ejemplos reales. Incluida gratis para alumnos.</p>
</li>
</ol>
</div>
</section>
<!-- PROOF -->
<section class="section proof" id="proof">
<div class="container">
<span class="section__tag mono">04 · PRUEBAS REALES</span>
<h2 class="section__title">+6.186 personas ya no dependen de suscripciones.</h2>
<p class="section__sub">★★★★★ 4,9/5 · valoración media. Lo que más se repite: el primer anuncio el mismo día.</p>
<div class="proof__slider" id="proofSlider" aria-roledescription="carrusel" aria-label="Testimonios">
<div class="proof__track" id="proofTrack">
<figure class="quote"><div class="quote__stars" aria-label="5 de 5">★★★★★</div>
<blockquote>«Mirad ese CTR: de 3–4% a 8–9%. El ROAS, de 2 a 4. Y el anuncio lo hice el mismo día de entrar.»</blockquote>
<figcaption>Álvaro R. · ecommerce</figcaption></figure>
<figure class="quote"><div class="quote__stars" aria-label="5 de 5">★★★★★</div>
<blockquote>«Al ver la publicidad parecía estafa. Me arriesgué y no me arrepiento: lecciones sin paja y se actualiza permanentemente.»</blockquote>
<figcaption>Sebastián C. · agencia</figcaption></figure>
<figure class="quote"><div class="quote__stars" aria-label="5 de 5">★★★★★</div>
<blockquote>«Con el programa que recomiendan pagué 10$ por 100 créditos y he generado un montón de vídeos. Yo usaba HeyGen y sale carísimo.»</blockquote>
<figcaption>Hilo de Facebook</figcaption></figure>
<figure class="quote"><div class="quote__stars" aria-label="5 de 5">★★★★★</div>
<blockquote>«Ya tengo clientes a los que les generé vídeos que me habrían costado más que el curso.»</blockquote>
<figcaption>Comentario de Instagram</figcaption></figure>
<figure class="quote"><div class="quote__stars" aria-label="5 de 5">★★★★★</div>
<blockquote>«El curso está de maravilla. Al grano y paso a paso, sin tantos pasos interminables.»</blockquote>
<figcaption>DM de alumno</figcaption></figure>
</div>
<div class="proof__nav">
<button class="proof__btn" id="proofPrev" aria-label="Anterior">←</button>
<button class="proof__btn" id="proofPause" aria-label="Pausar auto-play" aria-pressed="false">⏸</button>
<button class="proof__btn" id="proofNext" aria-label="Siguiente">→</button>
</div>
</div>
</div>
</section>
<!-- SYLLABUS -->
<section class="section syllabus" id="syllabus">
<div class="container">
<span class="section__tag mono">05 · TEMARIO</span>
<h2 class="section__title">Sin promesas de cartón: aquí está todo.</h2>
<div class="syllabus__rows">
<div class="syl reveal"><span class="syl__dur mono">20 min</span><h3>Empieza aquí — tour, herramientas y biblioteca</h3><p>La academia por dentro, tus cuentas de saldo y tu biblioteca de prompts.</p></div>
<div class="syl reveal"><span class="syl__dur mono">3 min</span><h3>Catálogo de modelos IA</h3><p>Qué modelo usar en cada caso — lección viva que se actualiza con el mercado.</p></div>
<div class="syl reveal"><span class="syl__dur mono">28 min</span><h3>Fundamentos del método</h3><p>Realismo, el agente 6C y las 3 palancas de un anuncio que vende.</p></div>
<div class="syl reveal"><span class="syl__dur mono">1 h 11</span><h3>Formatos, uno a uno</h3><p>Podcast, UGC, DualCast, voz en off, trends e imágenes: producción + montaje.</p></div>
<div class="syl reveal"><span class="syl__dur mono">22 min</span><h3>Anuncios Animados</h3><p>El sistema completo: guion, storyboard, generación y montaje.</p></div>
<div class="syl reveal"><span class="syl__dur mono">incluidos</span><h3>Agentes, biblioteca y comunidad</h3><p>3 agentes de IA · 86 prompts · 392 pistas · propuestas que votas.</p></div>
</div>
</div>
</section>
<!-- PRICING -->
<section class="section pricing" id="pricing">
<div class="container">
<span class="section__tag mono">06 · HOJA DE PEDIDO</span>
<h2 class="section__title">Elige cómo quieres empezar. Pago único.</h2>
<p class="section__sub">Un solo cobro. Tu tarjeta no queda suscrita a nada. Hoy entraron <b>29 personas</b> · compras verificadas.</p>
<div class="pricing__grid">
<article class="plan reveal">
<header class="plan__head">
<span class="plan__label mono">REALISTA</span>
<h3>Pack Avatar Real</h3>
<div class="plan__price"><strong>60€</strong><span>pago único · de por vida</span></div>
</header>
<ul class="plan__list">
<li>5 formatos: Podcast · UGC · Voz en off · Trends · Imágenes</li>
<li>3 agentes de IA privados (ChatGPT y Claude)</li>
<li>Academia propia en español, por niveles</li>
<li>Herramienta quitamarcas incluida</li>
<li>86 prompts copiables + 392 pistas</li>
<li>Actualizaciones de por vida</li>
<li class="plan__minus">No incluye Animados ni DualCast</li>
</ul>
<a href="#" class="btn btn--ghost plan__btn js-toast" data-msg="Demo: checkout del pack Avatar Real.">Lo quiero, 60€</a>
</article>
<article class="plan plan--hot reveal">
<span class="plan__flag">★ El 98% elige el Pack Completo</span>
<header class="plan__head">
<span class="plan__label mono">ACADEMIA · SIEMPRE AL DÍA</span>
<h3>Pack Completo</h3>
<div class="plan__price"><s>105€</s> <strong>75€</strong><span>ahorras 30€ · pago único · de por vida</span></div>
</header>
<ul class="plan__list">
<li><b>TODO.</b> Los otros dos packs + DualCast + todo lo que venga</li>
<li>Los 6 formatos, el método completo y al día (2 h 23 de video)</li>
<li>3 agentes de IA privados — ChatGPT y Claude</li>
<li>Academia propia + herramienta quitamarcas</li>
<li>86 prompts copiables + 392 pistas de música y SFX</li>
<li>Montaje multi-escena paso a paso + alternativas low-cost</li>
<li>Volúmenes futuros de por vida, gratis</li>
</ul>
<a href="#" class="btn btn--primary plan__btn js-toast" data-msg="Demo: checkout del Pack Completo.">Lo quiero todo, 75€ →</a>
</article>
<article class="plan reveal">
<header class="plan__head">
<span class="plan__label mono">DISRUPTIVO</span>
<h3>Pack Animados</h3>
<div class="plan__price"><strong>45€</strong><span>pago único · de por vida</span></div>
</header>
<ul class="plan__list">
<li>Formato Animados completo, paso a paso</li>
<li>Sistema de 8 prompts + hooks visuales</li>
<li>Estructura problema-solución con contraste</li>
<li>Música y efectos sin copyright</li>
<li>Alternativas low-cost documentadas</li>
<li class="plan__minus">No incluye los formatos realistas</li>
</ul>
<a href="#" class="btn btn--ghost plan__btn js-toast" data-msg="Demo: checkout del pack Animados.">Lo quiero, 45€</a>
</article>
</div>
<div class="pricing__guarantee reveal">
<svg width="34" height="34" viewBox="0 0 24 24" fill="none" aria-hidden="true"><path d="M12 2l7 3v6c0 4.4-3 8.4-7 11-4-2.6-7-6.6-7-11V5l7-3Z" stroke="currentColor" stroke-width="1.5"/><path d="m8.7 12 2.3 2.3 4.3-4.6" stroke="currentColor" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round"/></svg>
<div>
<h3>Garantía de reembolso de 14 días</h3>
<p>Entras, ves la academia entera y haces tu primer anuncio. Si no es para ti, te devolvemos el 100% — sin preguntas.</p>
</div>
</div>
</div>
</section>
<!-- FAQ -->
<section class="section faq" id="faq">
<div class="container container--narrow">
<span class="section__tag mono">07 · PREGUNTAS FRECUENTES</span>
<h2 class="section__title">Lo que todo el mundo pregunta antes de entrar.</h2>
<div class="faq__list" id="faqList">
<details class="faq__item"><summary>¿Esto es una herramienta o una suscripción?<span class="faq__icon" aria-hidden="true">+</span></summary><p>Ninguna de las dos. Es un curso en video dentro de nuestra academia. Pagas una vez y es tuyo de por vida. La IA la usas tú, pagando céntimos por video.</p></details>
<details class="faq__item"><summary>¿Qué recibo exactamente al pagar?<span class="faq__icon" aria-hidden="true">+</span></summary><p>Acceso inmediato a la academia: el método en video, tu área de alumno con 86 prompts, 3 agentes, 392 pistas y la herramienta quitamarcas.</p></details>
<details class="faq__item"><summary>¿Por qué entrar hoy?<span class="faq__icon" aria-hidden="true">+</span></summary><p>El truco temporal deja el clip a $0,02 (un anuncio por ~$0,06) y la ventana de actualizaciones gratis de por vida se cierra este mes.</p></details>
<details class="faq__item"><summary>¿Qué herramientas exactas se usan?<span class="faq__icon" aria-hidden="true">+</span></summary><p>Vas directo a la fuente, al menor coste. El modelo exacto de cada paso se comparte dentro; el catálogo se actualiza cuando cambia el mercado.</p></details>
<details class="faq__item"><summary>¿Cuánto me cuesta generar cada video después?<span class="faq__icon" aria-hidden="true">+</span></summary><p>Lo controlas tú: recargas desde $1 y cada clip de 10–15 s sale por unos $0,30. ¿Sale mal? Regeneras solo ese clip y pagas solo esa generación.</p></details>
<details class="faq__item"><summary>¿Necesito saber de tecnología o de IA?<span class="faq__icon" aria-hidden="true">+</span></summary><p>No. Cero nodos, cero código. Si sabes usar una app en tu teléfono, puedes seguir el método paso a paso.</p></details>
<details class="faq__item"><summary>¿Me van a dar un botón mágico que hace el anuncio solo?<span class="faq__icon" aria-hidden="true">+</span></summary><p>No, y desconfía de quien te lo prometa. La IA genera los clips; tú diriges: ángulo, guion y montaje.</p></details>
<details class="faq__item"><summary>¿Funciona para lo que yo vendo?<span class="faq__icon" aria-hidden="true">+</span></summary><p>El método va por formatos, no por nichos. Eliges el formato que encaja y el agente Estratega lo adapta a tu producto.</p></details>
<details class="faq__item"><summary>¿En qué idioma está el curso? ¿Y mis videos?<span class="faq__icon" aria-hidden="true">+</span></summary><p>El curso está en español. Tus videos salen con 5 acentos listos (España, latino neutro, México, Colombia, Argentina) y la voz la eliges tú.</p></details>
<details class="faq__item"><summary>¿Cuánto dura y en qué formato es?<span class="faq__icon" aria-hidden="true">+</span></summary><p>2 h 23 de video al grano — y creciendo. On-demand, a tu ritmo, sin clases en vivo. Soporte dentro de la academia.</p></details>
<details class="faq__item"><summary>¿Qué diferencia hay entre los packs?<span class="faq__icon" aria-hidden="true">+</span></summary><p>Avatar Real = 5 formatos realistas. Animados = el formato animado. El Completo incluye los dos packs enteros + DualCast + todo lo que venga.</p></details>
<details class="faq__item"><summary>¿Puedo salir yo en los anuncios o usar mi propia cara?<span class="faq__icon" aria-hidden="true">+</span></summary><p>No necesitas grabarte: creas personajes con IA con consistencia para repetirlos en todos tus anuncios.</p></details>
<details class="faq__item"><summary>¿Tendré que pagar algo más después?<span class="faq__icon" aria-hidden="true">+</span></summary><p>Para el método, no. Lo único que pagas después es tu propio gasto de generación — céntimos por video.</p></details>
<details class="faq__item"><summary>¿Qué pasa si una herramienta sube precios o cierra?<span class="faq__icon" aria-hidden="true">+</span></summary><p>Ya nos pasó: lo apuntamos en el registro, probamos alternativas y actualizamos el método. Cada actualización te llega gratis, con fecha.</p></details>
<details class="faq__item"><summary>¿Puedo pagar desde mi país?<span class="faq__icon" aria-hidden="true">+</span></summary><p>Sí: tarjeta en todos los países (y PSE en Colombia; OXXO y SPEI en México). El precio que ves es el del checkout.</p></details>
</div>
</div>
</section>
<!-- FINAL CTA -->
<section class="section final">
<div class="container final__inner reveal">
<h2>Deja de depender de suscripciones innecesarias.</h2>
<p>El método está entero ahí arriba: temario, capturas, números y precios. Mientras lo piensas, la mensualidad sigue corriendo: 47€ este mes, otros 47€ el que viene. El curso se paga una vez.</p>
<a href="#pricing" class="btn btn--primary btn--lg">Entrar a ClipForge →</a>
<ul class="final__meta mono"><li>pago único</li><li>acceso de por vida</li><li>academia propia</li></ul>
</div>
</section>
</main>
<!-- STICKY BOTTOM BAR -->
<aside class="stickybar" id="stickybar" aria-label="Oferta destacada">
<div class="stickybar__inner">
<div class="stickybar__copy">
<strong>Pack Completo · 75€</strong>
<span class="mono">día 9 del truco $0,02/clip — puede ser el último</span>
</div>
<a href="#pricing" class="btn btn--primary btn--sm">Entro hoy</a>
</div>
</aside>
<footer class="footer">
<div class="container footer__inner">
<span class="brand__name footer__brand">clip<em>forge</em></span>
<p>© 2026 ClipForge · Anuncios con IA para lo que vendas · pago único, sin mensualidades</p>
<nav class="footer__legal" aria-label="Legal"><a href="#">Privacidad</a><a href="#">Términos</a><a href="#">Cookies</a></nav>
</div>
</footer>
<div class="toast" id="toast" role="status" aria-live="polite"></div>
<script src="script.js"></script>
</body>
</html>AI Ads — Dark Sales Landing
Sales page completa en español para ClipForge, una marca ficticia que vende un curso de anuncios con IA “a precio de fábrica”. Es un ejercicio de la anatomía de una página de venta moderna: cada sección existe para retirar una objeción distinta.
El tono es oscuro y editorial-nocturno: fondo grafito azulado, tipografía display grande, acentos lima y detalles mono tipo “cuaderno de laboratorio”. Una barra superior de urgencia con contador desciende de 9 días; el hero enfrenta el precio del curso contra las suscripciones rivales; el bloque de price math anima sus cifras con count-up al entrar en viewport; seis fichas recorren los formatos de anuncio (UGC, voz en off, animados, podcast, DualCast, imágenes); un registro tipo changelog documenta la formación “viva” con fechas; el proof social desfila testimonios con rating; y la hoja de pedido presenta tres packs con el Completo destacado, garantía de reembolso de 14 días y FAQ acordeón de 15 entradas con navegación por teclado.
Todo corre con vanilla JS: nav sticky con estado de scroll, menú móvil, reveal progresivo con IntersectionObserver, count-up de estadísticas, acordeón accesible (aria-expanded), slider de testimonios con auto-play pausable, toasts para las acciones demo y una barra sticky inferior que aparece tras el hero. Respeta prefers-reduced-motion y escala hasta ~360px.
Illustrative UI only — fictional brand, not a real product.