Landing
<!DOCTYPE html>
<html lang="es">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Dejalo Clean — Limpieza con actitud para hogares con mascota</title>
<link rel="preconnect" href="https://fonts.googleapis.com">
<link href="https://fonts.googleapis.com/css2?family=Baloo+2:wght@500;600;700;800&family=Inter:wght@400;500;600;700&display=swap" rel="stylesheet">
<style>
:root{
--cream:#F8F2DF;
--cream-dim:#F1E9CE;
--sky:#22B4EA;
--sky-deep:#1594C8;
--deep:#0B5E8C;
--ink:#083047;
--bubble:#CDEFFB;
--white:#FFFFFF;
--radius-lg:28px;
--radius-sm:14px;
--maxw:1180px;
}
*{box-sizing:border-box;}
html{scroll-behavior:smooth;}
body{
margin:0;
background:var(--cream);
color:var(--ink);
font-family:'Inter',sans-serif;
font-size:16px;
line-height:1.55;
}
h1,h2,h3,.display{
font-family:'Baloo 2',sans-serif;
color:var(--deep);
margin:0;
line-height:1.08;
}
a{color:inherit;text-decoration:none;}
img{max-width:100%;display:block;}
.wrap{max-width:var(--maxw);margin:0 auto;padding:0 28px;}
button{font-family:inherit;cursor:pointer;border:none;background:none;}
:focus-visible{outline:3px solid var(--sky-deep);outline-offset:2px;}
/* ---------- Header ---------- */
header{
position:sticky;top:0;z-index:40;
background:var(--cream);
border-bottom:2px solid var(--ink);
}
.header-inner{
display:flex;align-items:center;justify-content:space-between;
padding:14px 28px;max-width:var(--maxw);margin:0 auto;
gap:16px;
}
.brand{display:flex;align-items:center;gap:12px;}
.brand img{width:46px;height:46px;border-radius:50%;}
.brand span{font-family:'Baloo 2',sans-serif;font-weight:700;font-size:1.35rem;color:var(--deep);}
nav{display:flex;gap:28px;}
nav a{font-weight:600;font-size:0.98rem;color:var(--ink);position:relative;padding:4px 0;}
nav a:hover{color:var(--sky-deep);}
.header-actions{display:flex;align-items:center;gap:18px;}
.cart-btn{
position:relative;display:flex;align-items:center;gap:8px;
background:var(--deep);color:var(--white);
padding:10px 16px;border-radius:999px;font-weight:600;font-size:0.92rem;
transition:transform .15s ease;
}
.cart-btn:hover{transform:translateY(-2px);}
.cart-count{
background:var(--sky);color:var(--ink);
min-width:20px;height:20px;border-radius:50%;
display:flex;align-items:center;justify-content:center;
font-size:0.72rem;font-weight:700;padding:0 4px;
}
/* ---------- Hero ---------- */
.hero{
padding:64px 0 40px;
overflow:hidden;
}
.hero-inner{
display:grid;grid-template-columns:1.05fr 0.95fr;gap:40px;align-items:center;
}
.hero h1{font-size:clamp(2.3rem,4.6vw,3.4rem);font-weight:800;}
.hero p.lead{
margin-top:20px;font-size:1.14rem;max-width:46ch;color:var(--ink);
}
.hero-ctas{display:flex;gap:14px;margin-top:32px;flex-wrap:wrap;}
.btn{
display:inline-flex;align-items:center;gap:8px;
padding:14px 26px;border-radius:999px;font-weight:700;font-size:0.98rem;
transition:transform .15s ease, box-shadow .15s ease;
}
.btn-primary{background:var(--sky);color:var(--ink);}
.btn-primary:hover{transform:translateY(-2px);box-shadow:0 6px 0 var(--sky-deep);}
.btn-ghost{background:transparent;color:var(--deep);border:2px solid var(--deep);}
.btn-ghost:hover{background:var(--deep);color:var(--white);}
.hero-art{position:relative;display:flex;justify-content:center;align-items:center;}
.hero-blob{
width:min(400px,100%);aspect-ratio:1;border-radius:50%;
background:var(--sky);
display:flex;align-items:center;justify-content:center;
position:relative;
}
.hero-blob img{
width:82%;border-radius:50%;
}
.bubble{
position:absolute;border-radius:50%;
background:var(--bubble);
border:2px solid var(--sky-deep);
animation:float 6s ease-in-out infinite;
}
.b1{width:26px;height:26px;top:6%;left:2%;animation-delay:0s;}
.b2{width:16px;height:16px;top:20%;right:0%;animation-delay:1.2s;}
.b3{width:34px;height:34px;bottom:8%;left:-4%;animation-delay:2.1s;}
.b4{width:20px;height:20px;bottom:0%;right:10%;animation-delay:.6s;}
@keyframes float{
0%,100%{transform:translateY(0);}
50%{transform:translateY(-14px);}
}
@media (prefers-reduced-motion:reduce){
.bubble{animation:none;}
}
/* ---------- Trust strip ---------- */
.trust{
border-top:2px solid var(--ink);border-bottom:2px solid var(--ink);
background:var(--cream-dim);
}
.trust-inner{
max-width:var(--maxw);margin:0 auto;padding:22px 28px;
display:grid;grid-template-columns:repeat(3,1fr);gap:20px;
}
.trust-item{display:flex;align-items:center;gap:12px;font-weight:600;font-size:0.95rem;}
.trust-item svg{flex-shrink:0;width:28px;height:28px;}
/* ---------- Section shell ---------- */
section.block{padding:76px 0;}
.section-head{max-width:60ch;margin-bottom:44px;}
.section-head h2{font-size:clamp(1.8rem,3.2vw,2.4rem);}
.section-head p{margin-top:14px;color:var(--ink);font-size:1.04rem;}
/* ---------- Products ---------- */
.grid{
display:grid;grid-template-columns:repeat(3,1fr);gap:26px;
}
.card{
background:var(--white);
border:2px solid var(--ink);
border-radius:var(--radius-lg);
padding:26px;
display:flex;flex-direction:column;gap:14px;
position:relative;
transition:transform .15s ease;
}
.card:hover{transform:translateY(-4px);}
.card-icon{
width:64px;height:64px;border-radius:50%;
background:var(--bubble);
display:flex;align-items:center;justify-content:center;
}
.card-icon svg{width:34px;height:34px;}
.card h3{font-size:1.18rem;}
.card p.desc{color:var(--ink);font-size:0.94rem;flex-grow:1;}
.card-foot{display:flex;align-items:center;justify-content:space-between;margin-top:6px;}
.price{font-family:'Baloo 2',sans-serif;font-weight:700;color:var(--deep);font-size:1.2rem;}
.add-btn{
background:var(--deep);color:var(--white);
padding:9px 18px;border-radius:999px;font-weight:700;font-size:0.86rem;
transition:background .15s ease;
}
.add-btn:hover{background:var(--sky-deep);}
.badge{
position:absolute;top:-10px;right:20px;
background:var(--ink);color:var(--white);
font-size:0.72rem;font-weight:700;
padding:5px 12px;border-radius:999px;
}
/* ---------- About ---------- */
.about{
display:grid;grid-template-columns:0.85fr 1.15fr;gap:52px;align-items:center;
}
.about-art{
background:var(--sky);border-radius:var(--radius-lg);
aspect-ratio:1/0.85;display:flex;align-items:center;justify-content:center;
padding:30px;
}
.about-art img{width:60%;border-radius:50%;}
.about-text p{margin-top:16px;font-size:1.02rem;max-width:52ch;}
.about-text h2{font-size:clamp(1.8rem,3vw,2.3rem);}
/* ---------- CTA / Contact ---------- */
.cta{
background:var(--deep);color:var(--white);
border-radius:var(--radius-lg);
padding:56px 44px;
display:flex;align-items:center;justify-content:space-between;gap:30px;flex-wrap:wrap;
}
.cta h2{color:var(--white);font-size:clamp(1.6rem,3vw,2.1rem);}
.cta p{margin-top:10px;color:var(--bubble);max-width:44ch;}
.cta .btn-primary:hover{box-shadow:0 6px 0 var(--cream-dim);}
/* ---------- Footer ---------- */
footer{border-top:2px solid var(--ink);padding:36px 0;background:var(--cream-dim);}
.footer-inner{
display:flex;justify-content:space-between;align-items:center;flex-wrap:wrap;gap:14px;
font-size:0.88rem;color:var(--ink);
}
.footer-brand{display:flex;align-items:center;gap:10px;font-family:'Baloo 2',sans-serif;font-weight:700;color:var(--deep);}
.footer-brand img{width:30px;height:30px;border-radius:50%;}
/* ---------- Cart drawer ---------- */
.overlay{
position:fixed;inset:0;background:rgba(8,48,71,0.45);
opacity:0;pointer-events:none;transition:opacity .25s ease;z-index:60;
}
.overlay.open{opacity:1;pointer-events:auto;}
.drawer{
position:fixed;top:0;right:0;height:100%;width:min(400px,92vw);
background:var(--cream);z-index:70;
box-shadow:-6px 0 0 var(--ink);
transform:translateX(100%);transition:transform .3s ease;
display:flex;flex-direction:column;
}
.drawer.open{transform:translateX(0);}
.drawer-head{
padding:22px 24px;border-bottom:2px solid var(--ink);
display:flex;align-items:center;justify-content:space-between;
}
.drawer-head h3{font-size:1.3rem;}
.drawer-close{font-size:1.6rem;line-height:1;color:var(--deep);}
.drawer-items{flex-grow:1;overflow-y:auto;padding:18px 24px;display:flex;flex-direction:column;gap:16px;}
.drawer-empty{color:var(--ink);opacity:.7;padding-top:30px;text-align:center;}
.drawer-item{
display:flex;gap:12px;align-items:center;
border-bottom:1px solid var(--cream-dim);padding-bottom:14px;
}
.drawer-item .di-icon{
width:46px;height:46px;border-radius:50%;background:var(--bubble);
display:flex;align-items:center;justify-content:center;flex-shrink:0;
}
.drawer-item .di-icon svg{width:24px;height:24px;}
.di-info{flex-grow:1;}
.di-info .di-name{font-weight:700;font-size:0.94rem;}
.di-info .di-price{font-size:0.84rem;color:var(--ink);opacity:.75;}
.di-qty{display:flex;align-items:center;gap:8px;}
.di-qty button{
width:26px;height:26px;border-radius:50%;border:2px solid var(--ink);
display:flex;align-items:center;justify-content:center;font-weight:700;
}
.di-remove{font-size:0.78rem;color:var(--sky-deep);font-weight:600;margin-left:8px;}
.drawer-foot{
padding:22px 24px;border-top:2px solid var(--ink);
}
.drawer-sub{display:flex;justify-content:space-between;font-weight:700;font-size:1.1rem;margin-bottom:14px;}
.whatsapp-btn{
width:100%;background:var(--sky);color:var(--ink);
padding:15px;border-radius:999px;font-weight:700;font-size:1rem;
display:flex;align-items:center;justify-content:center;gap:8px;
}
.whatsapp-btn:hover{background:var(--sky-deep);color:var(--white);}
.drawer-note{font-size:0.78rem;color:var(--ink);opacity:.65;margin-top:10px;text-align:center;}
/* ---------- Toast ---------- */
.toast{
position:fixed;bottom:24px;left:50%;transform:translate(-50%,20px);
background:var(--ink);color:var(--white);padding:12px 22px;border-radius:999px;
font-size:0.9rem;font-weight:600;opacity:0;pointer-events:none;
transition:opacity .25s ease, transform .25s ease;z-index:80;
}
.toast.show{opacity:1;transform:translate(-50%,0);}
/* ---------- Responsive ---------- */
@media (max-width:880px){
nav{display:none;}
.hero-inner{grid-template-columns:1fr;text-align:center;}
.hero p.lead{margin-left:auto;margin-right:auto;}
.hero-ctas{justify-content:center;}
.hero-art{order:-1;}
.trust-inner{grid-template-columns:1fr;}
.grid{grid-template-columns:repeat(2,1fr);}
.about{grid-template-columns:1fr;}
.about-art{order:-1;max-width:320px;margin:0 auto;}
.cta{flex-direction:column;text-align:center;}
}
@media (max-width:540px){
.grid{grid-template-columns:1fr;}
.header-inner{padding:12px 18px;}
.wrap{padding:0 18px;}
.cta{padding:40px 26px;}
}
</style>
</head>
<body>
<header>
<div class="header-inner">
<div class="brand">
<img src="logo.png" alt="Dejalo Clean">
<span>Dejalo Clean</span>
</div>
<nav>
<a href="#inicio">Inicio</a>
<a href="#productos">Productos</a>
<a href="#nosotros">Nosotros</a>
<a href="#contacto">Contacto</a>
</nav>
<div class="header-actions">
<button class="cart-btn" id="openCart" aria-label="Abrir carrito">
🛒 Carrito <span class="cart-count" id="cartCount">0</span>
</button>
</div>
</div>
</header>
<main>
<!-- HERO -->
<section class="hero" id="inicio">
<div class="wrap hero-inner">
<div>
<h1>Pelos de mascota, cero drama.</h1>
<p class="lead">Productos de limpieza pensados para hogares con perro o gato: fáciles de usar, efectivos desde el primer intento y con toda la actitud Dejalo Clean.</p>
<div class="hero-ctas">
<a href="#productos" class="btn btn-primary">Ver productos</a>
<a href="#contacto" class="btn btn-ghost">Escríbenos</a>
</div>
</div>
<div class="hero-art">
<div class="hero-blob">
<img src="logo.png" alt="Mascota Dejalo Clean, un gato con lentes de sol">
<span class="bubble b1"></span>
<span class="bubble b2"></span>
<span class="bubble b3"></span>
<span class="bubble b4"></span>
</div>
</div>
</div>
</section>
<!-- TRUST STRIP -->
<div class="trust">
<div class="trust-inner">
<div class="trust-item">
<svg viewBox="0 0 24 24" fill="none" stroke="var(--deep)" stroke-width="2"><path d="M5 12l4 4 10-10"/></svg>
Fórmulas seguras para tu mascota
</div>
<div class="trust-item">
<svg viewBox="0 0 24 24" fill="none" stroke="var(--deep)" stroke-width="2"><circle cx="12" cy="12" r="9"/><path d="M12 7v5l3 3"/></svg>
Resultados desde el primer uso
</div>
<div class="trust-item">
<svg viewBox="0 0 24 24" fill="none" stroke="var(--deep)" stroke-width="2"><path d="M21 11.5a8.38 8.38 0 01-8.5 8.5 8.5 8.5 0 01-4-1L3 20l1-5.5A8.5 8.5 0 1121 11.5z"/></svg>
Atención directa por WhatsApp
</div>
</div>
</div>
<!-- PRODUCTOS -->
<section class="block" id="productos">
<div class="wrap">
<div class="section-head">
<h2>Nuestros productos</h2>
<p>Todo lo que necesitas para mantener tu casa libre de pelos y lista para recibir visitas, sin pasarte el día limpiando.</p>
</div>
<div class="grid" id="productGrid"></div>
</div>
</section>
<!-- NOSOTROS -->
<section class="block" id="nosotros">
<div class="wrap about">
<div class="about-art">
<img src="logo.png" alt="Logo Dejalo Clean">
</div>
<div class="about-text">
<h2>Nacimos por un gato terco y un sofá lleno de pelos.</h2>
<p>Dejalo Clean empezó como una búsqueda simple: encontrar algo que de verdad funcionara contra el pelo de mascota, sin químicos agresivos ni instrucciones complicadas.</p>
<p>Hoy diseñamos cada producto pensando en la rutina real de quienes viven con mascota: rápido, efectivo y sin dramas. Menos tiempo limpiando, más tiempo con tu mascota en el sofá que acabas de dejar impecable.</p>
</div>
</div>
</section>
<!-- CONTACTO -->
<section class="block" id="contacto">
<div class="wrap">
<div class="cta">
<div>
<h2>¿Dudas sobre algún producto?</h2>
<p>Escríbenos por WhatsApp y te ayudamos a elegir lo que tu casa necesita.</p>
</div>
<a href="https://wa.me/521234567890?text=Hola%2C%20tengo%20una%20pregunta%20sobre%20sus%20productos" target="_blank" rel="noopener" class="btn btn-primary">Escribir por WhatsApp</a>
</div>
</div>
</section>
</main>
<footer>
<div class="wrap footer-inner">
<div class="footer-brand">
<img src="logo.png" alt="Dejalo Clean">
Dejalo Clean
</div>
<div>© 2026 Dejalo Clean. Todos los derechos reservados.</div>
</div>
</footer>
<!-- CART DRAWER -->
<div class="overlay" id="overlay"></div>
<aside class="drawer" id="drawer" aria-label="Carrito de compras">
<div class="drawer-head">
<h3>Tu carrito</h3>
<button class="drawer-close" id="closeCart" aria-label="Cerrar carrito">×</button>
</div>
<div class="drawer-items" id="drawerItems"></div>
<div class="drawer-foot">
<div class="drawer-sub"><span>Subtotal</span><span id="drawerSubtotal">$0</span></div>
<button class="whatsapp-btn" id="checkoutBtn">Pedir por WhatsApp</button>
<p class="drawer-note">Al pedir, se abrirá WhatsApp con tu pedido listo para enviar.</p>
</div>
</aside>
<div class="toast" id="toast"></div>
<script>
const WHATSAPP_NUMBER = "521234567890"; // reemplaza por el número real del negocio
const products = [
{
id: "roller",
name: "Rodillo Quitapelos XL",
desc: "Rodillo reutilizable de alto agarre para sofás, ropa y asientos del auto.",
price: 149,
badge: "Más vendido",
icon: `<circle cx="12" cy="12" r="7" stroke="var(--deep)" stroke-width="2" fill="none"/><rect x="10.5" y="1" width="3" height="6" rx="1.5" fill="var(--deep)"/>`
},
{
id: "brush",
name: "Cepillo Antipelusa Mágico",
desc: "Cepillo de silicona que junta el pelo con un solo pase, sin cinta ni recargas.",
price: 189,
icon: `<path d="M6 3l12 12M6 15l12-12" stroke="var(--deep)" stroke-width="2" stroke-linecap="round"/><circle cx="12" cy="12" r="9" stroke="var(--deep)" stroke-width="1.6" fill="none"/>`
},
{
id: "spray",
name: "Spray Quitamanchas Pet",
desc: "Elimina manchas y olor de accidentes de mascota en telas y alfombras.",
price: 129,
icon: `<path d="M9 2h4v4l2 2v14H7V8l2-2V2z" stroke="var(--deep)" stroke-width="2" fill="none" stroke-linejoin="round"/>`
},
{
id: "glove",
name: "Guante Deshedding",
desc: "Guante de cepillado suave, ideal para mascotas sensibles al cepillo normal.",
price: 159,
icon: `<path d="M8 12V6a2 2 0 014 0v5M12 11V5a2 2 0 014 0v6M16 12V7a2 2 0 014 0v7a6 6 0 01-6 6h-2a6 6 0 01-6-6v-2a2 2 0 014 0" stroke="var(--deep)" stroke-width="1.6" fill="none" stroke-linecap="round" stroke-linejoin="round"/>`
},
{
id: "wipes",
name: "Toallitas Pet Fresh",
desc: "Paquete de 40 toallitas para limpieza rápida de patas y pelaje.",
price: 99,
icon: `<rect x="4" y="6" width="16" height="13" rx="2" stroke="var(--deep)" stroke-width="2" fill="none"/><path d="M4 10h16" stroke="var(--deep)" stroke-width="2"/>`
},
{
id: "kit",
name: "Kit Completo Dejalo Clean",
desc: "Rodillo, cepillo, spray y toallitas juntos, con descuento especial.",
price: 499,
badge: "Mejor valor",
icon: `<rect x="3" y="8" width="18" height="12" rx="2" stroke="var(--deep)" stroke-width="2" fill="none"/><path d="M3 8l9-5 9 5" stroke="var(--deep)" stroke-width="2" fill="none" stroke-linejoin="round"/>`
}
];
const cart = {}; // { id: qty }
const grid = document.getElementById("productGrid");
products.forEach(p => {
const card = document.createElement("div");
card.className = "card";
card.innerHTML = `
${p.badge ? `<span class="badge">${p.badge}</span>` : ""}
<div class="card-icon"><svg viewBox="0 0 24 24">${p.icon}</svg></div>
<h3>${p.name}</h3>
<p class="desc">${p.desc}</p>
<div class="card-foot">
<span class="price">$${p.price}</span>
<button class="add-btn" data-id="${p.id}">Agregar</button>
</div>
`;
grid.appendChild(card);
});
grid.addEventListener("click", e => {
const btn = e.target.closest(".add-btn");
if (!btn) return;
const id = btn.dataset.id;
cart[id] = (cart[id] || 0) + 1;
renderCart();
showToast("Agregado al carrito");
});
const drawer = document.getElementById("drawer");
const overlay = document.getElementById("overlay");
const drawerItems = document.getElementById("drawerItems");
const drawerSubtotal = document.getElementById("drawerSubtotal");
const cartCount = document.getElementById("cartCount");
function openDrawer(){ drawer.classList.add("open"); overlay.classList.add("open"); }
function closeDrawer(){ drawer.classList.remove("open"); overlay.classList.remove("open"); }
document.getElementById("openCart").addEventListener("click", openDrawer);
document.getElementById("closeCart").addEventListener("click", closeDrawer);
overlay.addEventListener("click", closeDrawer);
function renderCart(){
const ids = Object.keys(cart).filter(id => cart[id] > 0);
let totalCount = 0, subtotal = 0;
if (ids.length === 0){
drawerItems.innerHTML = `<p class="drawer-empty">Tu carrito está vacío. Agrega algún producto para empezar.</p>`;
} else {
drawerItems.innerHTML = ids.map(id => {
const p = products.find(pr => pr.id === id);
const qty = cart[id];
totalCount += qty;
subtotal += qty * p.price;
return `
<div class="drawer-item">
<div class="di-icon"><svg viewBox="0 0 24 24">${p.icon}</svg></div>
<div class="di-info">
<div class="di-name">${p.name}</div>
<div class="di-price">$${p.price} c/u</div>
</div>
<div class="di-qty">
<button data-action="dec" data-id="${id}" aria-label="Quitar uno">−</button>
<span>${qty}</span>
<button data-action="inc" data-id="${id}" aria-label="Agregar uno">+</button>
</div>
<span class="di-remove" data-action="remove" data-id="${id}">Quitar</span>
</div>
`;
}).join("");
}
cartCount.textContent = totalCount;
drawerSubtotal.textContent = "$" + subtotal;
}
drawerItems.addEventListener("click", e => {
const target = e.target.closest("[data-action]");
if (!target) return;
const { action, id } = target.dataset;
if (action === "inc") cart[id] = (cart[id] || 0) + 1;
if (action === "dec") cart[id] = Math.max(0, (cart[id] || 0) - 1);
if (action === "remove") cart[id] = 0;
renderCart();
});
document.getElementById("checkoutBtn").addEventListener("click", () => {
const ids = Object.keys(cart).filter(id => cart[id] > 0);
if (ids.length === 0){
showToast("Agrega productos antes de pedir");
return;
}
let message = "Hola, quiero pedir:%0A";
let subtotal = 0;
ids.forEach(id => {
const p = products.find(pr => pr.id === id);
const qty = cart[id];
subtotal += qty * p.price;
message += `- ${p.name} x${qty} ($${p.price * qty})%0A`;
});
message += `%0ATotal: $${subtotal}`;
window.open(`https://wa.me/${WHATSAPP_NUMBER}?text=${message}`, "_blank");
});
const toast = document.getElementById("toast");
let toastTimer;
function showToast(msg){
toast.textContent = msg;
toast.classList.add("show");
clearTimeout(toastTimer);
toastTimer = setTimeout(() => toast.classList.remove("show"), 1800);
}
renderCart();
</script>
</body>
</html>