Pages Hard
AI Ads — Light Editorial Sales Landing (Spanish)
Tercera lectura de la misma sales page de curso de anuncios con IA, ahora en clave editorial clara: fondo papel, serif de titulares, columnas de texto y reglas horizontales tipo periódico. A la anatomía base (urgencia, hero, price math, formatos, FAQ, 3 packs) le suma los elementos de confianza que la tarea pedía explorar: contador de alumnos que incrementa en vivo desde una cifra base, changelog público con fechas y entradas desplegables, badges de confianza (pago seguro, garantía, soporte), barra de lectura con progreso y una sección de preguntas con anclas. Vanilla JS sin dependencias, accesible y responsive.
Open in Lab
MCP
html css vanilla-js
Targets: JS HTML
Code
:root {
--paper: #faf7f0;
--paper-2: #f2ecdf;
--ink: #1c1917;
--ink-soft: #44403c;
--muted: #7a7166;
--accent: #8a2f2f;
--gold: #b98a2f;
--line: #d8d0bf;
--line-strong: #1c1917;
--card: #fffdf8;
--shadow-soft: 0 10px 30px -18px rgba(28, 25, 23, 0.35);
--maxw: 1080px;
--font: "Inter", system-ui, -apple-system, "Segoe UI", sans-serif;
--serif: "Fraunces", Georgia, "Times New Roman", serif;
--mono: "IBM Plex Mono", ui-monospace, "SF Mono", monospace;
}
* { box-sizing: border-box; margin: 0; padding: 0; }
html { scroll-behavior: smooth; }
body {
font-family: var(--font);
background: var(--paper);
color: var(--ink);
line-height: 1.6;
overflow-x: hidden;
-webkit-font-smoothing: antialiased;
}
.wrap { width: min(var(--maxw), 100% - 2.5rem); margin-inline: auto; }
.wrap--narrow { width: min(780px, 100% - 2.5rem); }
.mono { font-family: var(--mono); }
.skip-link {
position: absolute; left: -9999px; z-index: 300; background: var(--ink); color: var(--paper);
padding: 0.6rem 1rem; font-weight: 600;
}
.skip-link:focus { left: 0; top: 0; }
/* ---------- Progress ---------- */
.progress { position: fixed; top: 0; left: 0; right: 0; height: 3px; background: var(--line); z-index: 200; }
.progress__bar { display: block; height: 100%; width: 0; background: var(--accent); transition: width 0.1s linear; }
/* ---------- Masthead ---------- */
.masthead {
position: sticky; top: 0; z-index: 100;
background: rgba(250, 247, 240, 0.94); backdrop-filter: blur(10px); -webkit-backdrop-filter: blur(10px);
border-bottom: 1px solid var(--line-strong);
}
.masthead__row { display: flex; align-items: center; gap: 1.4rem; padding: 0.7rem 0; }
.wordmark { font-family: var(--serif); font-weight: 900; font-size: 1.45rem; letter-spacing: -0.02em; color: var(--ink); text-decoration: none; }
.wordmark--sm { font-size: 1.05rem; }
.masthead__tag { display: none; font-size: 0.62rem; letter-spacing: 0.14em; color: var(--muted); }
.masthead__links { display: flex; gap: 1.2rem; margin-left: auto; }
.masthead__links a {
font-family: var(--mono); font-size: 0.74rem; letter-spacing: 0.06em;
color: var(--ink-soft); text-decoration: none; text-transform: uppercase;
border-bottom: 2px solid transparent; padding-bottom: 2px;
}
.masthead__links a:hover { color: var(--accent); border-bottom-color: var(--accent); }
.masthead__toggle {
display: none; margin-left: auto; font-family: var(--mono); font-size: 0.74rem;
background: none; border: 1px solid var(--line-strong); padding: 0.35rem 0.8rem; cursor: pointer;
}
/* ---------- Buttons ---------- */
.btn {
display: inline-flex; align-items: center; justify-content: center;
font-family: var(--font); font-weight: 600; text-decoration: none; cursor: pointer;
border-radius: 3px; transition: transform 0.15s ease, box-shadow 0.2s ease, background 0.2s ease;
}
.btn--solid { background: var(--ink); color: var(--paper); padding: 0.8rem 1.5rem; box-shadow: 4px 4px 0 rgba(185, 138, 47, 0.55); }
.btn--solid:hover { transform: translate(-2px, -2px); box-shadow: 7px 7px 0 rgba(185, 138, 47, 0.65); }
.btn--line { background: transparent; color: var(--ink); border: 1.5px solid var(--line-strong); padding: 0.8rem 1.5rem; }
.btn--line:hover { background: var(--paper-2); }
.btn--lg { padding: 1rem 1.9rem; font-size: 1.02rem; }
/* ---------- Lead ---------- */
.lead { padding: 4.2rem 0 3.4rem; border-bottom: 1px solid var(--line-strong); }
.lead__kicker { font-size: 0.68rem; letter-spacing: 0.18em; color: var(--accent); margin-bottom: 1.2rem; }
.lead__title {
font-family: var(--serif); font-weight: 900; font-size: clamp(2.3rem, 6vw, 4.3rem);
line-height: 1.03; letter-spacing: -0.015em; max-width: 20ch; margin-bottom: 1.4rem;
}
.lead__title em { font-style: italic; color: var(--accent); }
.lead__dek { font-size: 1.12rem; color: var(--ink-soft); max-width: 42rem; margin-bottom: 2rem; }
.lead__actions { display: flex; gap: 0.9rem; flex-wrap: wrap; margin-bottom: 2.8rem; }
.ledger {
display: grid; grid-template-columns: repeat(4, 1fr);
border-top: 3px double var(--line-strong); border-bottom: 3px double var(--line-strong);
}
.ledger__cell { padding: 1.4rem 1rem 1.2rem; text-align: center; }
.ledger__cell + .ledger__cell { border-left: 1px solid var(--line); }
.ledger__num { font-family: var(--serif); font-weight: 700; font-size: clamp(1.7rem, 3.6vw, 2.6rem); display: block; line-height: 1.05; }
.ledger__star { color: var(--gold); font-size: 0.6em; }
.ledger__lab { display: block; font-family: var(--mono); font-size: 0.62rem; letter-spacing: 0.08em; color: var(--muted); margin-top: 0.5rem; text-transform: uppercase; }
/* ---------- Badges ---------- */
.badges { background: var(--ink); color: var(--paper); padding: 0.85rem 0; }
.badges__row { display: flex; gap: 1.6rem; flex-wrap: wrap; justify-content: center; }
.badge { font-family: var(--mono); font-size: 0.68rem; letter-spacing: 0.05em; opacity: 0.92; }
.badge b { color: var(--gold); font-weight: 700; }
/* ---------- Chapters ---------- */
.chapter { padding: 4rem 0; border-bottom: 1px solid var(--line-strong); }
.chapter--tinted { background: var(--paper-2); }
.chapter__head { max-width: 46rem; margin-bottom: 2.4rem; }
.chapter__no {
display: inline-block; font-size: 0.66rem; letter-spacing: 0.2em; color: var(--paper);
background: var(--accent); padding: 0.25rem 0.7rem; margin-bottom: 1rem;
}
.chapter__head h2 { font-family: var(--serif); font-weight: 900; font-size: clamp(1.75rem, 3.8vw, 2.7rem); line-height: 1.08; letter-spacing: -0.01em; margin-bottom: 0.7rem; }
.chapter__standfirst { color: var(--ink-soft); font-size: 1.02rem; }
/* ---------- Figures ---------- */
.figures { display: grid; grid-template-columns: repeat(3, 1fr); gap: 1.4rem; margin-bottom: 2.4rem; }
.fig { background: var(--card); border: 1px solid var(--line); border-top: 3px solid var(--accent); padding: 1.5rem 1.3rem; box-shadow: var(--shadow-soft); }
.fig__num { font-family: var(--serif); font-weight: 700; font-size: 2.3rem; letter-spacing: -0.02em; display: block; margin-bottom: 0.6rem; }
.fig figcaption { font-size: 0.88rem; color: var(--ink-soft); }
.prose { max-width: 44rem; font-size: 1.02rem; color: var(--ink-soft); }
.prose p + p { margin-top: 1rem; }
.dropcap {
float: left; font-family: var(--serif); font-weight: 900; font-size: 3.4rem;
line-height: 0.82; padding: 0.18rem 0.55rem 0 0; color: var(--accent);
}
/* ---------- Register / changelog ---------- */
.register { max-width: 46rem; }
.entry { border-bottom: 1px solid var(--line-strong); background: transparent; }
.entry:first-child { border-top: 3px double var(--line-strong); }
.entry summary {
list-style: none; cursor: pointer; display: grid;
grid-template-columns: 150px 1fr 30px; gap: 1rem; align-items: baseline;
padding: 1.1rem 0.3rem; transition: background 0.2s ease;
}
.entry summary::-webkit-details-marker { display: none; }
.entry summary:hover { background: rgba(138, 47, 47, 0.05); }
.entry__date { font-size: 0.66rem; letter-spacing: 0.1em; color: var(--accent); font-weight: 500; }
.entry__title { font-family: var(--serif); font-weight: 700; font-size: 1.12rem; }
.entry__chev { font-family: var(--mono); font-size: 1.3rem; text-align: right; transition: transform 0.2s ease; }
.entry[open] .entry__chev { transform: rotate(45deg); }
.entry__body { padding: 0 0.3rem 1.3rem 150px; }
.entry__body p { font-size: 0.92rem; color: var(--ink-soft); max-width: 38rem; }
.entry--next { background: var(--card); border-left: 4px solid var(--gold); padding-inline: 0.8rem; }
.entry--next .entry__date { color: var(--gold); }
/* ---------- Formats ---------- */
.fmtlist { list-style: none; max-width: 52rem; }
.fmtrow {
display: grid; grid-template-columns: 90px 1fr 130px; gap: 1.2rem;
padding: 1.3rem 0.3rem; border-bottom: 1px solid var(--line); align-items: start;
}
.fmtrow:first-child { border-top: 3px double var(--line-strong); }
.fmtrow__no { font-size: 0.72rem; color: var(--muted); letter-spacing: 0.08em; padding-top: 0.3rem; }
.fmtrow h3 { font-family: var(--serif); font-weight: 700; font-size: 1.28rem; margin-bottom: 0.3rem; }
.fmtrow p { font-size: 0.9rem; color: var(--ink-soft); }
.fmtrow__meta { font-size: 0.62rem; letter-spacing: 0.12em; color: var(--muted); text-align: right; padding-top: 0.4rem; }
.newtag {
font-family: var(--mono); font-size: 0.56rem; letter-spacing: 0.12em; vertical-align: middle;
background: var(--accent); color: var(--paper); padding: 0.18rem 0.45rem; margin-left: 0.5rem; position: relative; top: -0.25rem;
}
.fmtrow--new { background: rgba(185, 138, 47, 0.08); }
/* ---------- Plans ---------- */
.plans { display: grid; grid-template-columns: repeat(3, 1fr); gap: 1.3rem; align-items: stretch; margin-bottom: 1.8rem; }
.plan { background: var(--card); border: 1px solid var(--line); padding: 1.7rem 1.5rem; display: flex; flex-direction: column; }
.plan--featured { border: 2px solid var(--ink); box-shadow: 6px 6px 0 rgba(28, 25, 23, 0.12); position: relative; }
.plan__flag {
position: absolute; top: -0.8rem; left: 50%; transform: translateX(-50%);
background: var(--gold); color: var(--ink); font-size: 0.6rem; letter-spacing: 0.12em;
padding: 0.3rem 0.7rem; white-space: nowrap;
}
.plan h3 { font-family: var(--serif); font-weight: 900; font-size: 1.5rem; margin-bottom: 0.3rem; }
.plan__tag { font-size: 0.6rem; letter-spacing: 0.14em; color: var(--muted); margin-bottom: 1rem; }
.plan__price { display: flex; align-items: baseline; gap: 0.55rem; flex-wrap: wrap; border-block: 1px solid var(--line); padding: 0.8rem 0; margin-bottom: 1.1rem; }
.plan__price s { color: var(--muted); font-size: 1rem; }
.plan__price strong { font-family: var(--serif); font-weight: 900; font-size: 2.5rem; line-height: 1; letter-spacing: -0.02em; }
.plan__price span { flex-basis: 100%; font-family: var(--mono); font-size: 0.62rem; color: var(--muted); }
.plan ul { list-style: none; display: grid; gap: 0.55rem; margin-bottom: 1.5rem; flex: 1; }
.plan li { font-size: 0.88rem; color: var(--ink-soft); padding-left: 1.2rem; position: relative; }
.plan li::before { content: "—"; position: absolute; left: 0; color: var(--accent); }
.plan__btn { width: 100%; padding: 0.8rem 1rem; }
.footnote { font-size: 0.68rem; color: var(--muted); max-width: 46rem; line-height: 1.7; }
/* ---------- FAQ ---------- */
.faqindex { display: flex; gap: 0.6rem; flex-wrap: wrap; margin-bottom: 2rem; }
.faqindex a {
font-size: 0.64rem; letter-spacing: 0.06em; color: var(--accent);
text-decoration: none; border: 1px solid var(--line); padding: 0.35rem 0.7rem; border-radius: 999px;
}
.faqindex a:hover { border-color: var(--accent); }
.qa { border-bottom: 1px solid var(--line); padding: 1.3rem 0; scroll-margin-top: 5rem; }
.qa:first-of-type { border-top: 3px double var(--line-strong); }
.qa h3 { font-family: var(--serif); font-weight: 700; font-size: 1.18rem; margin-bottom: 0.5rem; }
.qa p { font-size: 0.95rem; color: var(--ink-soft); }
/* ---------- Colophon ---------- */
.colophon { text-align: center; padding: 4.5rem 0; }
.colophon h2 { font-family: var(--serif); font-weight: 900; font-size: clamp(1.9rem, 4vw, 2.9rem); line-height: 1.06; margin-bottom: 1rem; }
.colophon p { color: var(--ink-soft); max-width: 34rem; margin: 0 auto 2rem; }
.colophon__meta { margin-top: 1.6rem; font-size: 0.62rem; letter-spacing: 0.14em; color: var(--muted); }
/* ---------- Footer ---------- */
.foot { border-top: 3px double var(--line-strong); padding: 1.8rem 0; }
.foot__row { display: flex; align-items: center; gap: 1.4rem; flex-wrap: wrap; }
.foot p { font-size: 0.66rem; color: var(--muted); letter-spacing: 0.03em; }
.foot nav { margin-left: auto; display: flex; gap: 1rem; }
.foot nav a { font-family: var(--mono); font-size: 0.66rem; color: var(--muted); text-decoration: none; }
.foot nav a:hover { color: var(--accent); }
/* ---------- Toast ---------- */
.toast {
position: fixed; bottom: 1.6rem; left: 50%; transform: translate(-50%, 20px);
background: var(--ink); color: var(--paper); padding: 0.75rem 1.3rem;
font-family: var(--mono); font-size: 0.78rem; border-radius: 3px;
opacity: 0; pointer-events: none; transition: opacity 0.25s ease, transform 0.25s ease; z-index: 300;
max-width: min(90vw, 420px); text-align: center;
}
.toast.is-visible { opacity: 1; transform: translate(-50%, 0); }
/* ---------- Reveal ---------- */
.reveal { opacity: 0; transform: translateY(18px); transition: opacity 0.55s ease, transform 0.55s ease; }
.reveal.is-in { opacity: 1; transform: none; }
/* ---------- Responsive ---------- */
@media (max-width: 900px) {
.figures { grid-template-columns: 1fr 1fr; }
.ledger { grid-template-columns: repeat(2, 1fr); }
.ledger__cell:nth-child(odd) { border-left: 0; }
.ledger__cell:nth-child(-n+2) { border-bottom: 1px solid var(--line); }
.plans { grid-template-columns: 1fr; max-width: 460px; margin-inline: auto; }
.plan--featured { order: -1; }
.entry summary { grid-template-columns: 1fr 30px; }
.entry__date { grid-column: 1; }
.entry__title { grid-column: 1; }
.entry__chev { grid-row: 1; }
.entry__body { padding-left: 0.3rem; }
.fmtrow { grid-template-columns: 1fr; gap: 0.3rem; }
.fmtrow__meta { text-align: left; padding-top: 0; }
.masthead__tag { display: none; }
}
@media (max-width: 640px) {
.masthead__links {
display: none; position: absolute; top: 100%; left: 0; right: 0;
background: var(--paper); border-bottom: 1px solid var(--line-strong);
flex-direction: column; gap: 0; padding: 0.4rem 1.2rem 0.8rem;
}
.masthead__links.is-open { display: flex; }
.masthead__links a { padding: 0.7rem 0; border-bottom: 1px solid var(--line); }
.masthead__toggle { display: block; }
.figures { grid-template-columns: 1fr; }
.ledger { grid-template-columns: 1fr; }
.ledger__cell { border-left: 0; border-bottom: 1px solid var(--line); }
.ledger__cell:last-child { border-bottom: 0; }
.foot nav { 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; }
}(function () {
"use strict";
var reduceMotion = window.matchMedia("(prefers-reduced-motion: reduce)").matches;
/* ---------- Toast ---------- */
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.");
}
});
/* ---------- Mobile nav ---------- */
var navToggle = document.getElementById("navToggle");
var navLinks = document.getElementById("navLinks");
if (navToggle && navLinks) {
navToggle.addEventListener("click", function () {
var open = navLinks.classList.toggle("is-open");
navToggle.setAttribute("aria-expanded", String(open));
});
navLinks.addEventListener("click", function (e) {
if (e.target.tagName === "A") {
navLinks.classList.remove("is-open");
navToggle.setAttribute("aria-expanded", "false");
}
});
}
/* ---------- Reading progress ---------- */
var progressBar = document.getElementById("progressBar");
if (progressBar) {
window.addEventListener(
"scroll",
function () {
var doc = document.documentElement;
var max = doc.scrollHeight - doc.clientHeight;
var pct = max > 0 ? (window.scrollY / max) * 100 : 0;
progressBar.style.width = pct.toFixed(2) + "%";
},
{ passive: true }
);
}
/* ---------- Live student counter ----------
Starts at 6.186 (the published figure) and creeps up occasionally,
mimicking a "verified purchases" ticker. */
var counterEl = document.getElementById("studentCount");
if (counterEl) {
var students = 6186;
function render() {
counterEl.textContent = students.toLocaleString("es-ES");
}
render();
if (!reduceMotion) {
setInterval(function () {
if (Math.random() < 0.18) {
students += 1;
render();
}
}, 9000);
}
}
/* ---------- Figure count-up ---------- */
function fmt(value, decimals, prefix) {
var fixed = value.toFixed(decimals);
if (decimals > 0) fixed = fixed.replace(".", ",");
return (prefix || "") + fixed;
}
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") || "";
if (reduceMotion) {
el.textContent = fmt(target, decimals, prefix);
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 = fmt(target * eased, decimals, prefix);
if (p < 1) requestAnimationFrame(step);
else el.textContent = fmt(target, decimals, prefix);
}
requestAnimationFrame(step);
}
var countEls = Array.prototype.slice.call(document.querySelectorAll("[data-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.5 }
);
countEls.forEach(function (el) {
cio.observe(el);
});
} else {
countEls.forEach(animateCount);
}
/* ---------- Register: single-open ---------- */
var entries = Array.prototype.slice.call(document.querySelectorAll(".entry"));
entries.forEach(function (entry) {
entry.addEventListener("toggle", function () {
if (entry.open) {
entries.forEach(function (other) {
if (other !== entry) other.open = false;
});
}
});
});
/* ---------- Reveal ---------- */
var revealEls = Array.prototype.slice.call(document.querySelectorAll(".chapter, .plan, .fig"));
revealEls.forEach(function (el) {
el.classList.add("reveal");
});
if ("IntersectionObserver" in window && !reduceMotion) {
var rio = new IntersectionObserver(
function (items) {
items.forEach(function (item) {
if (item.isIntersecting) {
item.target.classList.add("is-in");
rio.unobserve(item.target);
}
});
},
{ threshold: 0.08 }
);
revealEls.forEach(function (el) {
rio.observe(el);
});
} else {
revealEls.forEach(function (el) {
el.classList.add("is-in");
});
}
})();<!doctype html>
<html lang="es">
<head>
<meta charset="utf-8" />
<meta name="viewport" content="width=device-width, initial-scale=1" />
<title>ClipForge — El reportaje: anuncios con IA por menos de 1€</title>
<meta name="description" content="Curso en video de anuncios con IA a precio de fábrica. Contador de alumnos, registro público con fechas y garantía de 14 días." />
<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=Fraunces:opsz,[email protected],400;9..144,600;9..144,700;9..144,900&family=Inter:wght@400;500;600;700&family=IBM+Plex+Mono:wght@400;500&display=swap" rel="stylesheet" />
<link rel="stylesheet" href="style.css" />
</head>
<body>
<a class="skip-link" href="#main">Saltar al contenido</a>
<!-- READING PROGRESS -->
<div class="progress" aria-hidden="true"><span class="progress__bar" id="progressBar"></span></div>
<!-- MASTHEAD -->
<header class="masthead">
<div class="wrap masthead__row">
<a class="wordmark" href="#top">ClipForge</a>
<p class="masthead__tag mono">UN REPORTAJE SOBRE EL PRECIO DE LA IA · N.º 09 · AGO 2026</p>
<nav class="masthead__links" id="navLinks" aria-label="Principal">
<a href="#numbers">Números</a>
<a href="#register">Registro</a>
<a href="#formats">Formatos</a>
<a href="#plans">Precios</a>
<a href="#faq">FAQ</a>
</nav>
<button class="masthead__toggle" id="navToggle" aria-label="Abrir índice" aria-expanded="false" aria-controls="navLinks">índice</button>
</div>
</header>
<main id="main">
<span id="top"></span>
<!-- LEAD / HERO -->
<section class="lead">
<div class="wrap">
<p class="lead__kicker mono">CURSO EN VIDEO · SIEMPRE AL DÍA · ANUNCIOS CON IA PARA LO QUE VENDAS</p>
<h1 class="lead__title">Un anuncio completo por <em>menos de 1€</em>, sin suscripciones</h1>
<p class="lead__dek">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. Esta página es el método entero: números, registro, temario y precios.</p>
<div class="lead__actions">
<a class="btn btn--solid" href="#plans">Quiero entrar · desde 45€</a>
<a class="btn btn--line" href="#numbers">Leer los números ↓</a>
</div>
<div class="ledger" role="figure" aria-label="Resumen de oferta">
<div class="ledger__cell">
<span class="ledger__num" id="studentCount" aria-live="polite">6.186</span>
<span class="ledger__lab">alumnos dentro<br />· compras verificadas</span>
</div>
<div class="ledger__cell">
<span class="ledger__num">4,9<span class="ledger__star">★</span></span>
<span class="ledger__lab">valoración media<br />· sobre 69 reseñas</span>
</div>
<div class="ledger__cell">
<span class="ledger__num">2h 23</span>
<span class="ledger__lab">de video al grano<br />· y creciendo</span>
</div>
<div class="ledger__cell">
<span class="ledger__num">0€/mes</span>
<span class="ledger__lab">en suscripciones<br />· para siempre</span>
</div>
</div>
</div>
</section>
<!-- TRUST BADGES -->
<section class="badges" aria-label="Confianza">
<div class="wrap badges__row">
<span class="badge"><b>✔</b> Pago seguro — VISA · MC · PayPal · Apple Pay · G Pay</span>
<span class="badge"><b>✔</b> Garantía de reembolso 14 días</span>
<span class="badge"><b>✔</b> Soporte real en español</span>
<span class="badge"><b>✔</b> Acceso inmediato, para siempre</span>
</div>
</section>
<!-- NUMBERS / PRICE MATH -->
<section class="chapter" id="numbers">
<div class="wrap">
<header class="chapter__head">
<span class="chapter__no mono">CAP. 01</span>
<h2>Las cifras que no te vas a creer.</h2>
<p class="chapter__standfirst">Precio de fábrica frente a suscripción: el mismo modelo, sin el intermediario. Cifras comprobadas tres veces.</p>
</header>
<div class="figures">
<figure class="fig">
<span class="fig__num" data-count="0.89" data-decimals="2" data-prefix="$">$0,89</span>
<figcaption><b>Un anuncio</b> de 45 segundos: 3 clips × $0,30. Ese es el coste real de generación.</figcaption>
</figure>
<figure class="fig">
<span class="fig__num"><span data-count="80">80</span> / <span data-count="0.85" data-decimals="2" data-prefix="$">$0,85</span></span>
<figcaption><b>Imágenes para campañas</b>: 80 listas para feeds y carruseles por $0,85. $0,01 cada una.</figcaption>
</figure>
<figure class="fig">
<span class="fig__num" data-count="0.02" data-decimals="2" data-prefix="$">$0,02</span>
<figcaption><b>El truco temporal</b>: un clip a $0,02 mientras dure — un anuncio entero por ~$0,06.</figcaption>
</figure>
</div>
<div class="prose">
<p><span class="dropcap">F</span>unciona como echar gasolina: añades saldo desde $1, o llenas el tanque con $20, y se gasta solo al generar. Tu recarga es tuya: no vendemos créditos ni nos llevamos comisión. ¿Y si un video sale mal? Regeneras ese clip y pagas solo esa generación.</p>
<p>Casi todo el método es planificar <em>antes</em> de generar: el que planifica, regenera poco. Higgsfield cobra 47€ al mes. HeyGen, 60€. Freepik, 90€. No pagas la IA: pagas a quien se pone en medio. Aquí vas directo a la fábrica.</p>
</div>
</div>
</section>
<!-- PUBLIC REGISTER / CHANGELOG -->
<section class="chapter chapter--tinted" id="register">
<div class="wrap">
<header class="chapter__head">
<span class="chapter__no mono">CAP. 02</span>
<h2>El registro público: una formación viva.</h2>
<p class="chapter__standfirst">Cada vez que el mundo IA cambia, hay una entrada nueva aquí. Con fecha. Despliega cada una.</p>
</header>
<div class="register">
<details class="entry">
<summary><span class="entry__date mono">12 ENE 2026</span><span class="entry__title">Vol 1 — donde empezó todo</span><span class="entry__chev" aria-hidden="true">+</span></summary>
<div class="entry__body"><p>Los primeros formatos: UGC, anuncios en imagen y trends, documentados paso a paso. El método evolucionó mucho desde aquí — cada salto quedó en este registro.</p></div>
</details>
<details class="entry">
<summary><span class="entry__date mono">07 JUN 2026</span><span class="entry__title">Vol 2 — Podcast, UGC clásico y voz en off</span><span class="entry__chev" aria-hidden="true">+</span></summary>
<div class="entry__body"><p>Tres formatos realistas nuevos — siempre al menor coste posible, que es el enfoque de todo el método.</p></div>
</details>
<details class="entry">
<summary><span class="entry__date mono">23 JUL 2026</span><span class="entry__title">Vol 3 — DualCast y motor nuevo</span><span class="entry__chev" aria-hidden="true">+</span></summary>
<div class="entry__body"><p>DualCast (dos personas delante de cámara) y un motor de generación nuevo, aplicado también a Podcast y UGC clásico.</p></div>
</details>
<details class="entry">
<summary><span class="entry__date mono">01 AGO 2026</span><span class="entry__title">Academia propia + herramienta quitamarcas</span><span class="entry__chev" aria-hidden="true">+</span></summary>
<div class="entry__body"><p>Todo el método vive ahora en nuestra propia academia, en español y por niveles. Estrenamos la herramienta quitamarcas: subes tu clip con marca de agua y sale limpio.</p></div>
</details>
<details class="entry">
<summary><span class="entry__date mono">04 AGO 2026</span><span class="entry__title">Propuestas de la comunidad</span><span class="entry__chev" aria-hidden="true">+</span></summary>
<div class="entry__body"><p>Página de propuestas: los alumnos votan las novedades y producimos lo más votado. Y avisamos del truco temporal que deja el clip en $0,02.</p></div>
</details>
<details class="entry entry--next">
<summary><span class="entry__date mono">PRÓXIMA ENTREGA · INCLUIDA GRATIS</span><span class="entry__title">Ads Animados, rehecho desde cero</span><span class="entry__chev" aria-hidden="true">+</span></summary>
<div class="entry__body"><p>Dirección creativa con IA, nuevos formatos de anuncio animado, guía paso a paso para dirigir cada pieza, nuevos workflows y muchos más ejemplos reales. Gratis para alumnos actuales.</p></div>
</details>
</div>
</div>
</section>
<!-- FORMATS -->
<section class="chapter" id="formats">
<div class="wrap">
<header class="chapter__head">
<span class="chapter__no mono">CAP. 03</span>
<h2>Un anuncio para cada momento.</h2>
<p class="chapter__standfirst">El método va por formatos, no por nichos: eliges el que encaja con lo que vendes — producto físico, digital, servicios, comida, apps.</p>
</header>
<ol class="fmtlist">
<li class="fmtrow">
<span class="fmtrow__no mono">F.01</span>
<div class="fmtrow__body"><h3>UGC</h3><p>Una persona recomendando tu producto como un cliente más — sin actores ni influencers. 9 de cada 10 no distinguen que no está grabado.</p></div>
<span class="fmtrow__meta mono">14 EJEMPLOS</span>
</li>
<li class="fmtrow">
<span class="fmtrow__no mono">F.02</span>
<div class="fmtrow__body"><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. La venta llega como consecuencia de la historia.</p></div>
<span class="fmtrow__meta mono">4 EJEMPLOS</span>
</li>
<li class="fmtrow">
<span class="fmtrow__no mono">F.03</span>
<div class="fmtrow__body"><h3>Ads Animados</h3><p>Desde una sola foto del producto: problema, solución y antes/después imposibles de ignorar.</p></div>
<span class="fmtrow__meta mono">6 EJEMPLOS</span>
</li>
<li class="fmtrow">
<span class="fmtrow__no mono">F.04</span>
<div class="fmtrow__body"><h3>Podcast</h3><p>Dos personas hablando como en un podcast real. El formato que crea autoridad y confianza antes de vender.</p></div>
<span class="fmtrow__meta mono">5 EJEMPLOS</span>
</li>
<li class="fmtrow fmtrow--new">
<span class="fmtrow__no mono">F.05</span>
<div class="fmtrow__body"><h3>DualCast <span class="newtag">NUEVO</span></h3><p>Dos personas a la vez delante de cámara, interactuando entre ellas y con quien mira. Incluido en el Pack Completo.</p></div>
<span class="fmtrow__meta mono">5 EJEMPLOS</span>
</li>
<li class="fmtrow">
<span class="fmtrow__no mono">F.06</span>
<div class="fmtrow__body"><h3>Imágenes para Ads</h3><p>Testimonio, antes/después, estilo foro, comparativas: 7 formatos estáticos desde una foto. A 80 por $0,85.</p></div>
<span class="fmtrow__meta mono">24 EJEMPLOS</span>
</li>
</ol>
</div>
</section>
<!-- PLANS -->
<section class="chapter chapter--tinted" id="plans">
<div class="wrap">
<header class="chapter__head">
<span class="chapter__no mono">CAP. 04</span>
<h2>La hoja de pedido.</h2>
<p class="chapter__standfirst">Pago único. Un solo cobro — tu tarjeta no queda suscrita a nada. Hoy entraron <b>29 personas</b>.</p>
</header>
<div class="plans">
<article class="plan">
<h3>Avatar Real</h3>
<p class="plan__tag mono">LOS 5 FORMATOS REALISTAS</p>
<p class="plan__price"><strong>60€</strong><span>pago único · de por vida</span></p>
<ul>
<li>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>Quitamarcas + 86 prompts + 392 pistas</li>
<li>Actualizaciones de por vida</li>
</ul>
<a href="#" class="btn btn--line plan__btn js-toast" data-msg="Demo: checkout Avatar Real.">Lo quiero, 60€</a>
</article>
<article class="plan plan--featured">
<p class="plan__flag mono">EL 98% ELIGE ESTE</p>
<h3>Pack Completo</h3>
<p class="plan__tag mono">TODO · INCLUIDO LO QUE VENGA</p>
<p class="plan__price"><s>105€</s> <strong>75€</strong><span>ahorras 30€ · pago único · de por vida</span></p>
<ul>
<li>Los dos packs enteros + DualCast + todo lo que venga</li>
<li>Los 6 formatos y 2 h 23 de video al grano</li>
<li>3 agentes privados + quitamarcas</li>
<li>86 prompts + 392 pistas de música y SFX</li>
<li>Volúmenes futuros gratis, de por vida</li>
<li>Garantía de reembolso de 14 días</li>
</ul>
<a href="#" class="btn btn--solid plan__btn js-toast" data-msg="Demo: checkout Pack Completo.">Lo quiero todo →</a>
</article>
<article class="plan">
<h3>Animados</h3>
<p class="plan__tag mono">SOLO EL FORMATO DISRUPTIVO</p>
<p class="plan__price"><strong>45€</strong><span>pago único · de por vida</span></p>
<ul>
<li>Formato Animados completo: guion, storyboard, montaje</li>
<li>Sistema de 8 prompts + hooks visuales</li>
<li>Estructura problema-solución con contraste</li>
<li>Música y SFX sin copyright</li>
</ul>
<a href="#" class="btn btn--line plan__btn js-toast" data-msg="Demo: checkout Animados.">Lo quiero, 45€</a>
</article>
</div>
<p class="footnote mono">* Si compras Avatar Real (60€) + Animados (45€) por separado: 105€. El Completo cuesta 75€ — por 15€ más te llevas literalmente todo. Dos meses de una sola suscripción (94€) cuestan más que el Pack Completo entero.</p>
</div>
</section>
<!-- FAQ -->
<section class="chapter" id="faq">
<div class="wrap wrap--narrow">
<header class="chapter__head">
<span class="chapter__no mono">CAP. 05</span>
<h2>Preguntas frecuentes.</h2>
</header>
<nav class="faqindex mono" aria-label="Índice de preguntas">
<a href="#q1">¿Suscripción?</a><a href="#q2">¿Qué recibo?</a><a href="#q3">¿Coste por video?</a><a href="#q4">¿Necesito saber de IA?</a><a href="#q5">¿Para lo que vendo?</a>
</nav>
<div class="qa" id="q1">
<h3>¿Esto es una herramienta o una suscripción?</h3>
<p>Ninguna de las dos. Es un curso en video dentro de nuestra academia. Pagas una vez y es tuyo de por vida; cada actualización te llega sin pagar más. La IA la usas tú, pagando céntimos por video.</p>
</div>
<div class="qa" id="q2">
<h3>¿Qué recibo exactamente al pagar?</h3>
<p>Acceso inmediato a la academia: el método al día en video, tu área de alumno con 86 prompts, 3 agentes, 392 pistas de audio y la herramienta quitamarcas. Soporte real en español.</p>
</div>
<div class="qa" id="q3">
<h3>¿Cuánto me cuesta generar cada video después?</h3>
<p>Lo controlas tú. Recargas desde $1 y cada clip de 10–15 s sale por unos $0,30 — hoy, $0,02 con el truco temporal. ¿Sale mal? Regeneras solo ese clip y pagas solo esa generación.</p>
</div>
<div class="qa" id="q4">
<h3>¿Necesito saber de tecnología o de IA?</h3>
<p>No. Cero nodos, cero código. Si sabes usar una app en tu teléfono, puedes seguir el método: está grabado paso a paso, pensado para empezar de cero.</p>
</div>
<div class="qa" id="q5">
<h3>¿Funciona para lo que yo vendo?</h3>
<p>El método va por formatos, no por nichos: producto físico, digital, servicios, comida, apps. Eliges el formato que encaja y el agente Estratega lo adapta a tu producto.</p>
</div>
</div>
</section>
<!-- COLOPHON / FINAL CTA -->
<section class="colophon">
<div class="wrap">
<h2>Deja de depender de suscripciones innecesarias.</h2>
<p>Mientras lo piensas, la mensualidad sigue corriendo: 47€ este mes, otros 47€ el que viene. El curso se paga una vez.</p>
<a class="btn btn--solid btn--lg" href="#plans">Entrar a ClipForge →</a>
<p class="colophon__meta mono">PAGO ÚNICO · ACCESO DE POR VIDA · ACADEMIA PROPIA · GARANTÍA 14 DÍAS</p>
</div>
</section>
</main>
<footer class="foot">
<div class="wrap foot__row">
<span class="wordmark wordmark--sm">ClipForge</span>
<p class="mono">© 2026 ClipForge · Anuncios con IA para lo que vendas · pago único, sin mensualidades</p>
<nav 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 — Light Editorial Sales Landing
Tercera y última variante: el mismo producto ficticio (ClipForge) contado como una revista. Fondo papel cálido, titulares en serif de gran cuerpo, iniciales capitulares, filetes horizontales dobles, columnas de texto y numeración de secciones al estilo de un índice de publicación. La venta se lee como un reportaje.
Elementos añadidos frente a la anatomía base:
- Contador de alumnos: cifra base con incremento simulado en vivo (ODP realista, “compras verificadas”).
- Changelog público: registro de la formación con fechas, entradas
<details>desplegables y una entrega futura destacada. - Badges de confianza: franja con pago seguro, garantía 14 días, soporte en español y acceso inmediato.
- Barra de progreso de lectura en la parte superior.
- Anclas de preguntas: mini-índice que salta a cada FAQ.
- Price math en tablas tipográficas con cifras destacadas y notas al pie.
Interacciones vanilla JS: contador en vivo, progreso de lectura, FAQ de una-abierta, changelog desplegable, reveal suave y toasts de demo. Tipografía responsiva con clamp(), prefers-reduced-motion respetado y layout estable hasta ~360px.
Illustrative UI only — fictional brand, not a real product.