Pages Hard
AI Ads — Neo-Brutalist Sales Landing (Spanish)
Variante neo-brutalista de una sales page de curso de anuncios con IA, en español. Sobre la anatomía clásica (urgencia, hero, price math, formatos, FAQ y 3 packs) añade lo que la versión original no tiene: franja de partners/logos, banda de stats con contadores animados, grid de testimonios con ratings, badges de confianza y una tabla comparativa suscripción vs precio de fábrica con toggle interactivo de moneda. Estética brutal: bordes negros gruesos, sombras duras desplazadas, tipografía display enorme y colores planos sin gradientes. Vanilla JS sin dependencias.
Open in Lab
MCP
html css vanilla-js
Targets: JS HTML
Code
:root {
--paper: #f4f0e6;
--ink: #111111;
--yellow: #ffd338;
--cyan: #7de3e8;
--pink: #ff9ecb;
--card: #ffffff;
--muted: #55503f;
--border: 3px solid var(--ink);
--shadow: 7px 7px 0 var(--ink);
--shadow-lg: 11px 11px 0 var(--ink);
--r: 0px;
--maxw: 1140px;
--font: "Space Grotesk", system-ui, sans-serif;
--display: "Archivo Black", var(--font);
--mono: "Space Mono", ui-monospace, 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.5;
overflow-x: hidden;
background-image: radial-gradient(rgba(17, 17, 17, 0.07) 1.2px, transparent 1.2px);
background-size: 22px 22px;
}
.wrap { width: min(var(--maxw), 100% - 2.5rem); margin-inline: auto; }
.wrap--narrow { width: min(820px, 100% - 2.5rem); }
.sr-only {
position: absolute; width: 1px; height: 1px; overflow: hidden;
clip: rect(0 0 0 0); white-space: nowrap;
}
.mono { font-family: var(--mono); }
.skip-link {
position: absolute; left: -9999px; z-index: 300;
background: var(--yellow); border: var(--border); padding: 0.6rem 1rem; font-weight: 700;
}
.skip-link:focus { left: 0; top: 0; }
/* ---------- Ticket / urgency ---------- */
.ticket {
background: var(--ink); color: var(--paper);
display: flex; align-items: center; justify-content: center; gap: 0.9rem; flex-wrap: wrap;
padding: 0.5rem 1rem; font-family: var(--mono); font-size: 0.74rem; letter-spacing: 0.04em;
text-align: center;
}
.ticket__stamp {
background: var(--yellow); color: var(--ink); font-weight: 700;
padding: 0.15rem 0.55rem; transform: rotate(-2deg); display: inline-block;
}
.ticket__txt strong { color: var(--yellow); }
.ticket__link { color: var(--cyan); font-weight: 700; text-decoration: none; border-bottom: 2px solid var(--cyan); }
/* ---------- Nav ---------- */
.nav {
position: sticky; top: 0; z-index: 100;
background: var(--paper); border-bottom: var(--border);
}
.nav__row { display: flex; align-items: center; gap: 1.6rem; padding: 0.8rem 0; }
.logo { font-family: var(--display); font-size: 1.25rem; text-decoration: none; color: var(--ink); letter-spacing: 0.02em; }
.logo span { background: var(--yellow); padding: 0 0.3rem; border: var(--border); display: inline-block; transform: rotate(1.5deg); }
.nav__links { display: flex; gap: 1.3rem; margin-left: auto; }
.nav__links a { color: var(--ink); text-decoration: none; font-weight: 700; font-size: 0.9rem; text-transform: uppercase; }
.nav__links a:hover { background: var(--cyan); }
.burger { display: none; margin-left: auto; width: 42px; height: 42px; background: var(--card); border: var(--border); cursor: pointer; position: relative; }
.burger span { position: absolute; left: 9px; right: 9px; height: 3px; background: var(--ink); }
.burger span:nth-child(1) { top: 12px; }
.burger span:nth-child(2) { top: 19px; }
.burger span:nth-child(3) { top: 26px; }
/* ---------- Buttons ---------- */
.btn {
display: inline-flex; align-items: center; justify-content: center;
font-family: var(--font); font-weight: 700; text-transform: uppercase; letter-spacing: 0.03em;
text-decoration: none; cursor: pointer; border: var(--border);
box-shadow: var(--shadow); transition: transform 0.15s ease, box-shadow 0.15s ease;
}
.btn:hover { transform: translate(-3px, -3px); box-shadow: 10px 10px 0 var(--ink); }
.btn:active { transform: translate(2px, 2px); box-shadow: 3px 3px 0 var(--ink); }
.btn--ink { background: var(--ink); color: var(--paper); }
.btn--ghost { background: var(--card); color: var(--ink); }
.btn--sm { padding: 0.55rem 1rem; font-size: 0.8rem; }
.btn--lg { padding: 1rem 1.8rem; font-size: 1rem; }
/* ---------- Hero ---------- */
.hero { padding: 4.5rem 0 0; }
.hero__badges { display: flex; gap: 0.7rem; flex-wrap: wrap; margin-bottom: 1.8rem; }
.chip {
font-family: var(--mono); font-weight: 700; font-size: 0.7rem; letter-spacing: 0.08em;
border: var(--border); padding: 0.3rem 0.75rem; box-shadow: 4px 4px 0 var(--ink);
}
.chip--yellow { background: var(--yellow); }
.chip--cyan { background: var(--cyan); }
.chip--pink { background: var(--pink); }
.hero__title {
font-family: var(--display); font-size: clamp(2.6rem, 7.5vw, 5.4rem);
line-height: 0.98; letter-spacing: -0.01em; margin-bottom: 1.6rem;
}
.hl { background: var(--yellow); padding: 0 0.4rem; border: var(--border); box-shadow: var(--shadow-lg); display: inline-block; transform: rotate(-1deg); }
.hero__sub { max-width: 40rem; font-size: 1.06rem; color: var(--muted); margin-bottom: 2rem; }
.hero__cta { display: flex; gap: 1rem; flex-wrap: wrap; margin-bottom: 2.6rem; }
.hero__pricecard {
display: inline-block; background: var(--card); border: var(--border); box-shadow: var(--shadow-lg);
padding: 1.4rem 2rem; transform: rotate(1deg); margin-bottom: 2rem;
}
.pricecard__label { font-family: var(--mono); font-size: 0.7rem; letter-spacing: 0.14em; color: var(--muted); }
.pricecard__val { font-family: var(--display); font-size: 2.8rem; line-height: 1.1; }
.pricecard__val s { color: #c0392b; font-size: 1.3rem; margin-right: 0.6rem; }
.pricecard__note { font-family: var(--mono); font-size: 0.72rem; color: var(--muted); }
.hero__trust { display: flex; gap: 0.8rem; flex-wrap: wrap; list-style: none; margin-bottom: 3.5rem; }
.tbadge {
font-family: var(--mono); font-size: 0.68rem; font-weight: 700; letter-spacing: 0.05em;
border: 2px solid var(--ink); background: var(--paper); padding: 0.4rem 0.7rem;
}
.hero__stripe {
background: var(--ink); color: var(--paper); overflow: hidden; padding: 0.7rem 0;
font-family: var(--mono); font-weight: 700; font-size: 0.82rem; letter-spacing: 0.12em;
white-space: nowrap;
}
.hero__stripe > span { display: inline-block; animation: marquee 22s linear infinite; padding-right: 1.4rem; }
@keyframes marquee { to { transform: translateX(-50%); } }
/* ---------- Partners marquee ---------- */
.partners { border-block: var(--border); background: var(--card); padding: 1.6rem 0; }
.partners__label {
text-align: center; font-family: var(--mono); font-size: 0.68rem; letter-spacing: 0.12em;
color: var(--muted); margin-bottom: 1.1rem;
}
.marquee { overflow: hidden; -webkit-mask-image: linear-gradient(90deg, transparent, #000 10%, #000 90%, transparent); mask-image: linear-gradient(90deg, transparent, #000 10%, #000 90%, transparent); }
.marquee__track { display: flex; gap: 1rem; width: max-content; animation: marquee 30s linear infinite; }
.marquee:hover .marquee__track, .marquee:focus-within .marquee__track { animation-play-state: paused; }
.ptool {
font-family: var(--display); font-size: 1.05rem; border: 2px solid var(--ink);
padding: 0.5rem 1.1rem; background: var(--paper); white-space: nowrap;
}
.ptool:nth-child(3n) { background: var(--yellow); }
.ptool:nth-child(3n+1) { background: var(--cyan); }
.ptool:nth-child(4n) { background: var(--pink); }
/* ---------- Stats band ---------- */
.stats { border-bottom: var(--border); }
.stats__grid { display: grid; grid-template-columns: repeat(4, 1fr); }
.stat { padding: 1.9rem 1rem; text-align: center; border-right: var(--border); }
.stat:last-child { border-right: 0; }
.stat--yellow { background: var(--yellow); }
.stat--cyan { background: var(--cyan); }
.stat__num { font-family: var(--display); font-size: clamp(2rem, 4.5vw, 3.2rem); display: block; line-height: 1; }
.stat__star { font-size: 0.55em; }
.stat__lab { display: block; font-family: var(--mono); font-size: 0.66rem; font-weight: 700; letter-spacing: 0.14em; margin-top: 0.6rem; }
/* ---------- Sections ---------- */
.section { padding: 4.2rem 0; }
.sec-tag {
display: inline-block; font-family: var(--mono); font-size: 0.7rem; font-weight: 700;
letter-spacing: 0.14em; background: var(--ink); color: var(--paper);
padding: 0.3rem 0.7rem; margin-bottom: 1.1rem;
}
.sec-title { font-family: var(--display); font-size: clamp(1.8rem, 4.2vw, 3rem); line-height: 1.02; margin-bottom: 0.9rem; }
.sec-sub { color: var(--muted); max-width: 44rem; margin-bottom: 2.4rem; }
/* ---------- Comparison table ---------- */
.cur-toggle { display: inline-flex; border: var(--border); box-shadow: var(--shadow); margin-bottom: 1.6rem; }
.cur-btn {
font-family: var(--mono); font-weight: 700; font-size: 0.82rem; padding: 0.55rem 1.2rem;
background: var(--card); color: var(--ink); border: 0; cursor: pointer;
}
.cur-btn + .cur-btn { border-left: var(--border); }
.cur-btn.is-active { background: var(--ink); color: var(--yellow); }
.table-wrap { overflow-x: auto; border: var(--border); box-shadow: var(--shadow-lg); background: var(--card); }
.cmp-table { width: 100%; border-collapse: collapse; min-width: 640px; }
.cmp-table th, .cmp-table td { padding: 0.95rem 1.1rem; text-align: left; font-size: 0.9rem; border-bottom: 2px solid var(--ink); }
.cmp-table thead th {
font-family: var(--mono); font-size: 0.68rem; font-weight: 700; letter-spacing: 0.1em;
background: var(--ink); color: var(--paper);
}
.cmp-table thead .th--win { background: var(--yellow); color: var(--ink); }
.cmp-table tbody th[scope="row"] { font-weight: 700; }
.cmp-table tbody tr:last-child th, .cmp-table tbody tr:last-child td { border-bottom: 0; }
.cell--lose { color: #8a4b3b; }
.cell--win { background: rgba(255, 211, 56, 0.28); font-weight: 600; }
.compare__note {
margin-top: 1.4rem; font-family: var(--mono); font-size: 0.8rem; font-weight: 700;
background: var(--pink); border: var(--border); box-shadow: var(--shadow);
display: inline-block; padding: 0.6rem 1rem; transform: rotate(-0.6deg);
}
/* ---------- Formats ---------- */
.fmt-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 1.4rem; }
.fmt { background: var(--card); border: var(--border); box-shadow: var(--shadow); padding: 1.5rem; transition: transform 0.15s ease, box-shadow 0.15s ease; }
.fmt:hover { transform: translate(-3px, -3px); box-shadow: var(--shadow-lg); }
.fmt--yellow { background: var(--yellow); }
.fmt--pink { background: var(--pink); }
.fmt--cyan { background: var(--cyan); }
.fmt__no { font-family: var(--mono); font-weight: 700; font-size: 0.8rem; opacity: 0.6; }
.fmt h3 { font-family: var(--display); font-size: 1.35rem; margin: 0.5rem 0 0.6rem; }
.fmt p { font-size: 0.88rem; color: var(--muted); margin-bottom: 0.9rem; }
.fmt__meta { font-family: var(--mono); font-size: 0.64rem; font-weight: 700; letter-spacing: 0.1em; border: 2px solid var(--ink); padding: 0.25rem 0.55rem; display: inline-block; background: var(--paper); }
.fmt__meta--new { background: var(--ink); color: var(--yellow); }
/* ---------- Testimonials grid ---------- */
.tgrid { display: grid; grid-template-columns: repeat(4, 1fr); gap: 1.3rem; }
.tcard { background: var(--card); border: var(--border); box-shadow: var(--shadow); padding: 1.4rem; display: flex; flex-direction: column; gap: 0.7rem; }
.tcard--big { grid-column: span 2; background: var(--yellow); }
.tcard__stars { font-size: 0.9rem; letter-spacing: 0.18em; }
.tcard blockquote { font-size: 0.95rem; line-height: 1.55; font-weight: 500; }
.tcard figcaption { margin-top: auto; font-family: var(--mono); font-size: 0.7rem; display: flex; align-items: center; gap: 0.6rem; flex-wrap: wrap; }
.tcard__src { font-size: 0.6rem; font-weight: 700; letter-spacing: 0.08em; padding: 0.2rem 0.5rem; border: 2px solid var(--ink); }
.src--ig { background: var(--pink); }
.src--fb { background: var(--cyan); }
.src--dm { background: var(--card); }
.src--panel { background: var(--ink); color: var(--paper); }
/* ---------- Pricing ---------- */
.plans { display: grid; grid-template-columns: repeat(3, 1fr); gap: 1.5rem; align-items: stretch; }
.plan { background: var(--card); border: var(--border); box-shadow: var(--shadow); padding: 1.6rem; display: flex; flex-direction: column; }
.plan--win { background: var(--yellow); box-shadow: var(--shadow-lg); transform: rotate(-0.5deg); position: relative; z-index: 1; }
.plan__flag {
position: absolute; top: -1rem; right: 1rem; background: var(--ink); color: var(--yellow);
font-family: var(--mono); font-size: 0.66rem; font-weight: 700; letter-spacing: 0.06em;
padding: 0.35rem 0.7rem; border: 2px solid var(--ink); transform: rotate(2deg);
}
.plan__lab { font-family: var(--mono); font-size: 0.66rem; font-weight: 700; letter-spacing: 0.16em; color: var(--muted); }
.plan h3 { font-family: var(--display); font-size: 1.6rem; margin: 0.3rem 0 0.7rem; }
.plan__price { display: flex; align-items: baseline; gap: 0.6rem; flex-wrap: wrap; margin-bottom: 1.2rem; }
.plan__price s { font-size: 1.05rem; color: #8a4b3b; }
.plan__price strong { font-family: var(--display); font-size: 2.6rem; line-height: 1; }
.plan__price span { flex-basis: 100%; font-family: var(--mono); font-size: 0.62rem; font-weight: 700; letter-spacing: 0.08em; 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; padding-left: 1.3rem; position: relative; }
.plan li::before { content: "→"; position: absolute; left: 0; font-weight: 700; }
.plan li.minus { color: #8a4b3b; }
.plan li.minus::before { content: "×"; }
.plan__btn { width: 100%; padding: 0.9rem 1rem; }
/* ---------- FAQ ---------- */
.faq-list { display: grid; gap: 0.9rem; }
.fitem { background: var(--card); border: var(--border); box-shadow: var(--shadow); }
.fitem summary {
list-style: none; cursor: pointer; display: flex; justify-content: space-between; align-items: center;
gap: 1rem; padding: 1rem 1.2rem; font-weight: 700; font-size: 0.98rem;
}
.fitem summary::-webkit-details-marker { display: none; }
.fitem summary > span { font-family: var(--mono); font-size: 1.4rem; transition: transform 0.2s ease; }
.fitem[open] summary > span { transform: rotate(45deg); }
.fitem[open] summary { background: var(--cyan); }
.fitem p { padding: 1rem 1.2rem 1.2rem; font-size: 0.9rem; color: var(--muted); border-top: 2px solid var(--ink); }
.fitem summary:focus-visible { outline: 3px solid var(--ink); outline-offset: -3px; }
/* ---------- Final ---------- */
.final { border-top: var(--border); padding: 4.5rem 0; text-align: center; background: var(--card); }
.final h2 { font-family: var(--display); font-size: clamp(1.7rem, 4vw, 2.8rem); line-height: 1.05; margin-bottom: 1rem; }
.final p { font-family: var(--mono); font-size: 0.86rem; font-weight: 700; margin-bottom: 2rem; }
/* ---------- Footer ---------- */
.footer { background: var(--ink); color: var(--paper); padding: 1.8rem 0; }
.footer__row { display: flex; align-items: center; gap: 1.4rem; flex-wrap: wrap; }
.footer__logo { color: var(--paper); font-size: 1rem; }
.footer__logo span { background: var(--yellow); color: var(--ink); border-color: var(--paper); }
.footer p { font-family: var(--mono); font-size: 0.7rem; opacity: 0.75; }
.footer nav { margin-left: auto; display: flex; gap: 1rem; }
.footer nav a { color: var(--paper); font-family: var(--mono); font-size: 0.7rem; opacity: 0.75; text-decoration: none; }
.footer nav a:hover { opacity: 1; }
/* ---------- Toast ---------- */
.toast {
position: fixed; bottom: 1.6rem; left: 50%; transform: translate(-50%, 20px);
background: var(--ink); color: var(--paper); border: var(--border); box-shadow: var(--shadow);
font-family: var(--mono); font-size: 0.82rem; font-weight: 700;
padding: 0.8rem 1.3rem; opacity: 0; pointer-events: none;
transition: opacity 0.22s ease, transform 0.22s ease; z-index: 300; max-width: min(90vw, 420px); text-align: center;
}
.toast.is-visible { opacity: 1; transform: translate(-50%, 0); }
/* ---------- Responsive ---------- */
@media (max-width: 960px) {
.stats__grid { grid-template-columns: repeat(2, 1fr); }
.stat:nth-child(2) { border-right: 0; }
.stat:nth-child(-n+2) { border-bottom: var(--border); }
.fmt-grid { grid-template-columns: repeat(2, 1fr); }
.tgrid { grid-template-columns: repeat(2, 1fr); }
.tcard--big { grid-column: span 2; }
.plans { grid-template-columns: 1fr; max-width: 470px; margin-inline: auto; }
.plan--win { transform: none; order: -1; }
}
@media (max-width: 640px) {
.nav__links {
display: none; position: absolute; top: 100%; left: 0; right: 0;
background: var(--paper); border-bottom: var(--border); flex-direction: column; gap: 0; padding: 0.4rem 1.2rem 0.8rem;
}
.nav__links.is-open { display: flex; }
.nav__links a { padding: 0.75rem 0; border-bottom: 2px solid var(--ink); }
.burger { display: block; }
.nav .btn { display: none; }
.fmt-grid { grid-template-columns: 1fr; }
.tgrid { grid-template-columns: 1fr; }
.tcard--big { grid-column: auto; }
.stat { border-right: 0; }
.stat:nth-child(-n+3) { border-bottom: var(--border); }
.footer 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; }
.hero__stripe > span, .marquee__track { animation: 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");
navToggle.addEventListener("click", function () {
var open = navLinks.classList.toggle("is-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.setAttribute("aria-expanded", "false");
}
});
/* ---------- Urgency countdown ---------- */
var ticketEl = document.getElementById("ticketCount");
if (ticketEl) {
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);
ticketEl.textContent = pad(d) + "d " + pad(h) + ":" + pad(m) + ":" + pad(s);
}
tick();
setInterval(tick, 1000);
}
/* ---------- Count-up ---------- */
function fmt(value, decimals, sep, suffix) {
var fixed = value.toFixed(decimals);
if (decimals > 0) fixed = fixed.replace(".", ",");
if (sep) fixed = Math.round(value).toLocaleString("es-ES");
return fixed + (suffix || "");
}
function animateCount(el) {
var target = parseFloat(el.getAttribute("data-count") || "0");
var decimals = parseInt(el.getAttribute("data-decimals") || "0", 10);
var sep = el.getAttribute("data-sep") === "true";
var suffix = el.getAttribute("data-suffix") || "";
if (reduceMotion) {
el.textContent = fmt(target, decimals, sep, suffix);
return;
}
var duration = 1300;
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, sep, suffix);
if (p < 1) requestAnimationFrame(step);
else el.textContent = fmt(target, decimals, sep, 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);
}
/* ---------- Currency toggle ---------- */
var RATE = 1.06; // EUR -> USD, demo rate
var curButtons = Array.prototype.slice.call(document.querySelectorAll(".cur-btn"));
var priceEls = Array.prototype.slice.call(document.querySelectorAll("[data-eur]"));
function applyCurrency(cur) {
priceEls.forEach(function (el) {
var base = parseFloat(el.getAttribute(cur === "USD" ? "data-usd" : "data-eur"));
if (isNaN(base)) return;
el.textContent = cur === "USD" ? "$" + base.toFixed(0) : base.toFixed(0) + "€";
});
// Update comparison-table cells that carry a data-year value
var yearCell = document.querySelector("[data-year]");
if (yearCell) {
var eur = parseFloat(yearCell.getAttribute("data-year"));
var val = cur === "USD" ? "$" + Math.round(eur * RATE) : eur.toFixed(0) + "€";
yearCell.textContent = "≈ " + val + "/año · solo una herramienta";
}
// Update buttons' demo labels
curButtons.forEach(function (b) {
var active = b.getAttribute("data-cur") === cur;
b.classList.toggle("is-active", active);
b.setAttribute("aria-pressed", String(active));
});
}
curButtons.forEach(function (btn) {
btn.addEventListener("click", function () {
applyCurrency(btn.getAttribute("data-cur"));
});
});
/* ---------- FAQ single-open ---------- */
var faqItems = Array.prototype.slice.call(document.querySelectorAll(".fitem"));
faqItems.forEach(function (item) {
item.addEventListener("toggle", function () {
if (item.open) {
faqItems.forEach(function (other) {
if (other !== item) other.open = false;
});
}
});
});
})();<!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 a precio de fábrica</title>
<meta name="description" content="Curso de anuncios con IA: céntimos por clip, cero suscripciones. Pago único, de por vida. Comparativa incluida." />
<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=Archivo+Black&family=Space+Grotesk:wght@400;500;600;700&family=Space+Mono:wght@400;700&display=swap" rel="stylesheet" />
<link rel="stylesheet" href="style.css" />
</head>
<body>
<a class="skip-link" href="#main">Saltar al contenido</a>
<!-- URGENCY TICKET -->
<div class="ticket" role="region" aria-label="Oferta temporal">
<span class="ticket__stamp">TRUCO TEMPORAL</span>
<span class="ticket__txt">CLIPS DESDE $0,02 — TERMINA EN <strong id="ticketCount" aria-live="polite">09d 00:00:00</strong></span>
<a class="ticket__link" href="#pricing">APROVÉCHALO →</a>
</div>
<!-- NAV -->
<header class="nav">
<div class="wrap nav__row">
<a class="logo" href="#top">CLIP<span>FORGE</span></a>
<nav class="nav__links" id="navLinks" aria-label="Principal">
<a href="#compare">Comparativa</a>
<a href="#formats">Formatos</a>
<a href="#testimonials">Testimonios</a>
<a href="#pricing">Precios</a>
</nav>
<a class="btn btn--ink btn--sm" href="#pricing">ENTRAR AHORA</a>
<button class="burger" 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="wrap">
<div class="hero__badges">
<span class="chip chip--yellow">CURSO EN VIDEO</span>
<span class="chip chip--cyan">SIEMPRE AL DÍA</span>
<span class="chip chip--pink">ESPAÑOL</span>
</div>
<h1 class="hero__title">UN ANUNCIO<br />COMPLETO POR<br /><span class="hl">MENOS DE 1€</span></h1>
<p class="hero__sub">Sin suscripciones. Vas directo a los modelos de IA y pagas solo lo que generas: céntimos por clip. Cancelé mis tres suscripciones hace un año y sigo creando todos mis anuncios.</p>
<div class="hero__cta">
<a class="btn btn--ink btn--lg" href="#pricing">QUIERO ANUNCIOS BARATOS</a>
<a class="btn btn--ghost btn--lg" href="#compare">VER LA COMPARATIVA ↓</a>
</div>
<div class="hero__pricecard" role="figure" aria-label="Precio de un video">
<div class="pricecard__label">ESTE VIDEO CUESTA:</div>
<div class="pricecard__val"><s>47€</s> 0,85€</div>
<div class="pricecard__note">3 clips de 12 s · hecho con el método</div>
</div>
<ul class="hero__trust" aria-label="Confianza">
<li class="tbadge">✔ PAGO SEGURO</li>
<li class="tbadge">✔ GARANTÍA 14 DÍAS</li>
<li class="tbadge">✔ SOPORTE EN ESPAÑOL</li>
<li class="tbadge">✔ SIN LETRA PEQUEÑA</li>
</ul>
</div>
<div class="hero__stripe" aria-hidden="true">
<span>PAGO ÚNICO</span><span>◆</span><span>SIN MENSUALIDADES</span><span>◆</span><span>DE POR VIDA</span><span>◆</span><span>0€/MES</span><span>◆</span>
<span>PAGO ÚNICO</span><span>◆</span><span>SIN MENSUALIDADES</span><span>◆</span><span>DE POR VIDA</span><span>◆</span><span>0€/MES</span><span>◆</span>
</div>
</section>
<!-- PARTNERS / TOOLS STRIP -->
<section class="partners" aria-label="Herramientas del ecosistema">
<p class="partners__label">EL MÉTODO TRABAJA CON LOS MOTORES DEL MOMENTO — VAS DIRECTO A LA FUENTE:</p>
<div class="marquee" id="partnersMarquee">
<div class="marquee__track">
<span class="ptool">Higgsfield</span><span class="ptool">HeyGen</span><span class="ptool">Freepik</span><span class="ptool">Weavy</span><span class="ptool">Runway</span><span class="ptool">Kling</span><span class="ptool">Veo</span><span class="ptool">Midjourney</span>
<span class="ptool">Higgsfield</span><span class="ptool">HeyGen</span><span class="ptool">Freepik</span><span class="ptool">Weavy</span><span class="ptool">Runway</span><span class="ptool">Kling</span><span class="ptool">Veo</span><span class="ptool">Midjourney</span>
</div>
</div>
</section>
<!-- STATS BAND -->
<section class="stats" aria-label="Cifras clave">
<div class="wrap stats__grid">
<div class="stat">
<span class="stat__num"><span class="count" data-count="6186" data-sep="true">0</span></span>
<span class="stat__lab">ALUMNOS DENTRO</span>
</div>
<div class="stat stat--yellow">
<span class="stat__num">4,9<span class="stat__star">★</span></span>
<span class="stat__lab">VALORACIÓN MEDIA</span>
</div>
<div class="stat">
<span class="stat__num"><span class="count" data-count="7">0</span></span>
<span class="stat__lab">FORMATOS DE ANUNCIO</span>
</div>
<div class="stat stat--cyan">
<span class="stat__num"><span class="count" data-count="2.5" data-decimals="1" data-suffix="h">0</span></span>
<span class="stat__lab">DE VIDEO AL GRANO</span>
</div>
</div>
</section>
<!-- COMPARISON TABLE -->
<section class="section compare" id="compare">
<div class="wrap">
<span class="sec-tag">01 · LA COMPARATIVA</span>
<h2 class="sec-title">SUSCRIPCIÓN VS PRECIO DE FÁBRICA.</h2>
<p class="sec-sub">Los mismos modelos, sin el intermediario. Cambia la moneda y haz números tú mismo.</p>
<div class="cur-toggle" role="group" aria-label="Moneda">
<button class="cur-btn is-active" data-cur="EUR" aria-pressed="true">€ EUR</button>
<button class="cur-btn" data-cur="USD" aria-pressed="false">$ USD</button>
</div>
<div class="table-wrap">
<table class="cmp-table">
<caption class="sr-only">Comparativa de coste: suscripciones intermediarias frente al método de precio de fábrica</caption>
<thead>
<tr>
<th scope="col">CONCEPTO</th>
<th scope="col">SUSCRIPCIÓN (INTERMEDIARIO)</th>
<th scope="col" class="th--win">MÉTODO CLIPFORGE (FÁBRICA)</th>
</tr>
</thead>
<tbody>
<tr>
<th scope="row">Coste mensual fijo</th>
<td class="cell--lose">47–90€/mes aunque no generes nada</td>
<td class="cell--win">0 — recargas desde 1</td>
</tr>
<tr>
<th scope="row">Un clip de 10–15 s</th>
<td class="cell--lose">Incluido hasta el límite del plan</td>
<td class="cell--win">~0,30 · hoy 0,02 con el truco</td>
</tr>
<tr>
<th scope="row">Un anuncio (3 clips)</th>
<td class="cell--lose">Tu mensualidad entera</td>
<td class="cell--win">~0,90 · hoy ~0,06</td>
</tr>
<tr>
<th scope="row">80 imágenes para campañas</th>
<td class="cell--lose">Consumen tus créditos del mes</td>
<td class="cell--win">0,85 en total</td>
</tr>
<tr>
<th scope="row">12 meses de uso</th>
<td class="cell--lose" data-year="197">≈ 197€/año · solo una herramienta</td>
<td class="cell--win">Lo que generes — sin suelo</td>
</tr>
<tr>
<th scope="row">Si dejas de pagar</th>
<td class="cell--lose">Lo pierdes todo</td>
<td class="cell--win">El método es tuyo de por vida</td>
</tr>
</tbody>
</table>
</div>
<p class="compare__note">Dos meses de UNA sola suscripción (94€) cuestan más que el Pack Completo entero.</p>
</div>
</section>
<!-- FORMATS -->
<section class="section formats" id="formats">
<div class="wrap">
<span class="sec-tag">02 · LAS FICHAS</span>
<h2 class="sec-title">UN ANUNCIO PARA CADA MOMENTO.</h2>
<div class="fmt-grid">
<article class="fmt fmt--yellow">
<span class="fmt__no">01</span>
<h3>UGC</h3>
<p>Una persona recomendando tu producto como un cliente más. 9 de cada 10 no distinguen que no está grabado.</p>
<span class="fmt__meta">14 EJEMPLOS</span>
</article>
<article class="fmt">
<span class="fmt__no">02</span>
<h3>UGC + voz en off</h3>
<p>Clips del día a día con narración encima. La venta llega como consecuencia de la historia.</p>
<span class="fmt__meta">4 EJEMPLOS</span>
</article>
<article class="fmt fmt--pink">
<span class="fmt__no">03</span>
<h3>Ads Animados</h3>
<p>Desde una foto del producto: problema, solución y antes/después que paran el scroll.</p>
<span class="fmt__meta">6 EJEMPLOS</span>
</article>
<article class="fmt">
<span class="fmt__no">04</span>
<h3>Podcast</h3>
<p>Dos personas hablando como en un podcast real. Autoridad antes de vender.</p>
<span class="fmt__meta">5 EJEMPLOS</span>
</article>
<article class="fmt fmt--cyan">
<span class="fmt__no">05</span>
<h3>DualCast</h3>
<p>Dos personas a la vez delante de cámara, interactuando entre ellas y con quien mira.</p>
<span class="fmt__meta fmt__meta--new">NUEVO · 5 EJEMPLOS</span>
</article>
<article class="fmt fmt--yellow">
<span class="fmt__no">06</span>
<h3>Imágenes para Ads</h3>
<p>7 formatos estáticos desde una foto: testimonio, antes/después, foro, comparativas.</p>
<span class="fmt__meta">24 EJEMPLOS</span>
</article>
</div>
</div>
</section>
<!-- TESTIMONIALS GRID -->
<section class="section testimonials" id="testimonials">
<div class="wrap">
<span class="sec-tag">03 · PRUEBAS REALES</span>
<h2 class="sec-title">+6.186 PERSONAS YA NO PAGAN MENSUALIDADES.</h2>
<div class="tgrid">
<figure class="tcard tcard--big">
<div class="tcard__stars" aria-label="5 de 5">★★★★★</div>
<blockquote>«Mirad ese CTR: de 3–4% a 8–9%. El ROAS, de 2 a 4. Panel de Meta: 0,11$ de CPC y 37 pagos iniciados.»</blockquote>
<figcaption><span class="tcard__src src--ig">INSTAGRAM</span> Álvaro R. · ecommerce</figcaption>
</figure>
<figure class="tcard">
<div class="tcard__stars" aria-label="5 de 5">★★★★★</div>
<blockquote>«Pagué 10$ por 100 créditos y he generado un montón de vídeos. Yo usaba HeyGen: sale carísimo.»</blockquote>
<figcaption><span class="tcard__src src--fb">FACEBOOK</span> Hilo de la comunidad</figcaption>
</figure>
<figure class="tcard">
<div class="tcard__stars" aria-label="5 de 5">★★★★★</div>
<blockquote>«El primer anuncio lo hice el mismo día de entrar. Lecciones sin paja.»</blockquote>
<figcaption><span class="tcard__src src--dm">DM</span> Marta G. · dropshipping</figcaption>
</figure>
<figure class="tcard">
<div class="tcard__stars" aria-label="5 de 5">★★★★★</div>
<blockquote>«Ya tengo clientes a los que les genero vídeos: me habrían costado más que el curso.»</blockquote>
<figcaption><span class="tcard__src src--ig">INSTAGRAM</span> Comprador verificado</figcaption>
</figure>
<figure class="tcard tcard--big">
<div class="tcard__stars" aria-label="5 de 5">★★★★★</div>
<blockquote>«Dudaba porque la publicidad daba mucho. Entré, y es exactamente lo que prometen: 4,94★ sobre 69 reseñas lo dicen todo.»</blockquote>
<figcaption><span class="tcard__src src--panel">PANEL</span> Sebastián C. · agencia</figcaption>
</figure>
</div>
</div>
</section>
<!-- PRICING -->
<section class="section pricing" id="pricing">
<div class="wrap">
<span class="sec-tag">04 · HOJA DE PEDIDO</span>
<h2 class="sec-title">PAGO ÚNICO. ELIGE TU PACK.</h2>
<p class="sec-sub">Un solo cobro. Tu tarjeta no queda suscrita a nada. Hoy entraron <b>29 personas</b>.</p>
<div class="plans">
<article class="plan">
<header><span class="plan__lab">REALISTA</span><h3>Avatar Real</h3>
<div class="plan__price"><strong data-eur="60" data-usd="63">60€</strong><span>PAGO ÚNICO · DE POR VIDA</span></div>
</header>
<ul>
<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</li>
<li>Quitamarcas + 86 prompts + 392 pistas</li>
<li class="minus">No incluye Animados ni DualCast</li>
</ul>
<a href="#" class="btn btn--ghost plan__btn js-toast" data-msg="Demo: checkout Avatar Real.">LO QUIERO, 60€</a>
</article>
<article class="plan plan--win">
<span class="plan__flag">★ EL 98% ELIGE ESTE</span>
<header><span class="plan__lab">TODO</span><h3>Pack Completo</h3>
<div class="plan__price"><s data-eur="105" data-usd="110">105€</s> <strong data-eur="75" data-usd="79">75€</strong><span>AHORRAS 30€ · PAGO ÚNICO · DE POR VIDA</span></div>
</header>
<ul>
<li>Los 6 formatos + DualCast + todo lo que venga</li>
<li>2 h 23 de video al grano, creciendo</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 14 días</li>
</ul>
<a href="#" class="btn btn--ink plan__btn js-toast" data-msg="Demo: checkout Pack Completo.">LO QUIERO TODO →</a>
</article>
<article class="plan">
<header><span class="plan__lab">DISRUPTIVO</span><h3>Animados</h3>
<div class="plan__price"><strong data-eur="45" data-usd="47">45€</strong><span>PAGO ÚNICO · DE POR VIDA</span></div>
</header>
<ul>
<li>Formato Animados completo, paso a paso</li>
<li>Sistema de 8 prompts + hooks visuales</li>
<li>Estructura problema-solución</li>
<li>Música y SFX sin copyright</li>
<li class="minus">No incluye los formatos realistas</li>
</ul>
<a href="#" class="btn btn--ghost plan__btn js-toast" data-msg="Demo: checkout Animados.">LO QUIERO, 45€</a>
</article>
</div>
</div>
</section>
<!-- FAQ -->
<section class="section faq" id="faq">
<div class="wrap wrap--narrow">
<span class="sec-tag">05 · DUDAS</span>
<h2 class="sec-title">LO QUE TODOS PREGUNTAN.</h2>
<div class="faq-list">
<details class="fitem"><summary>¿Es una herramienta o una suscripción?<span aria-hidden="true">+</span></summary><p>Ninguna: es un curso en video dentro de nuestra academia. Pagas una vez y es tuyo de por vida. La IA la usas tú, a céntimos por clip.</p></details>
<details class="fitem"><summary>¿Cuánto cuesta cada video después?<span aria-hidden="true">+</span></summary><p>Cada clip de 10–15 s, unos 0,30. Con el truco temporal, 0,02. Recargas desde 1 y se gasta solo al generar.</p></details>
<details class="fitem"><summary>¿Necesito saber de tecnología?<span aria-hidden="true">+</span></summary><p>Cero nodos, cero código. Si sabes usar una app del teléfono, puedes seguir el método paso a paso.</p></details>
<details class="fitem"><summary>¿Funciona para lo que yo vendo?<span aria-hidden="true">+</span></summary><p>El método va por formatos, no por nichos: físico, digital, servicios, comida, apps. El agente Estratega lo adapta a tu producto.</p></details>
<details class="fitem"><summary>¿Qué pasa si una herramienta cierra?<span aria-hidden="true">+</span></summary><p>Lo apuntamos en el registro, probamos alternativas y actualizamos el método. Cada actualización te llega gratis, con fecha.</p></details>
<details class="fitem"><summary>¿Puedo pagar desde mi país?<span aria-hidden="true">+</span></summary><p>Tarjeta en todos los países, PSE en Colombia, OXXO y SPEI en México. El precio del checkout es el que ves.</p></details>
</div>
</div>
</section>
<!-- FINAL CTA -->
<section class="final">
<div class="wrap">
<h2>MIENTRAS LO PIENSAS,<br />LA MENSUALIDAD SIGUE CORRIENDO.</h2>
<p>47€ este mes. Otros 47€ el que viene. El curso se paga una vez.</p>
<a class="btn btn--ink btn--lg" href="#pricing">ENTRAR A CLIPFORGE →</a>
</div>
</section>
</main>
<footer class="footer">
<div class="wrap footer__row">
<span class="logo footer__logo">CLIP<span>FORGE</span></span>
<p>© 2026 ClipForge · Anuncios con IA · pago único, sin mensualidades</p>
<nav aria-label="Legal"><a href="#">Privacidad</a> <a href="#">Términos</a></nav>
</div>
</footer>
<div class="toast" id="toast" role="status" aria-live="polite"></div>
<script src="script.js"></script>
</body>
</html>AI Ads — Neo-Brutalist Sales Landing
Segunda lectura del mismo producto ficticio (ClipForge, curso de anuncios con IA “a precio de fábrica”), esta vez en clave neo-brutalista: fondo crema, bordes negros de 3px, sombras duras desplazadas, chips de color plano (amarillo, cyan, rosa) y titulares display enormes. Nada de gradientes ni glows — el contraste lo hace la tipografía.
Además de la anatomía de siempre (barra de urgencia, hero, price math, seis fichas de formato, FAQ acordeón y hoja de pedido con tres packs), esta versión añade los elementos que la tarea pedía explorar:
- Partners strip: marquesina de logos de herramientas “compatibles” con el método.
- Stats band: cuatro cifras clave con count-up animado al entrar en viewport.
- Testimonials grid: grid asimétrico de tarjetas con rating, resultado medible y badge de fuente (DM, Instagram, Facebook).
- Tabla comparativa: suscripción intermediaria vs precio de fábrica, con toggle EUR/USD que recalcula los importes en vivo.
- Badges de confianza: pago seguro, garantía 14 días, soporte en español, sin letra pequeña.
Interacciones en vanilla JS: toggle de moneda con recálculo, FAQ de una-abierta, count-up con easing, reveal escalonado, marquee CSS pausable y toasts para los CTAs de demo. Accesible por teclado y con fallback prefers-reduced-motion.
Illustrative UI only — fictional brand, not a real product.