<!DOCTYPE html>
<html lang="es">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Pupulina - La Belleza Auténtica Está Dentro de Ti</title>
<style>
* {
margin: 0;
padding: 0;
box-sizing: border-box;
}
:root {
--color-oro: #D4AF37;
--color-verde: #8CC63E;
--color-negro: #1A1A1A;
--color-blanco: #FFFFFF;
--color-crema: #F5F5F0;
--color-purpura: #7469b6;
--color-rosa: #d5c6e8;
}
body {
font-family: 'Inter', 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif;
line-height: 1.6;
color: var(--color-negro);
background-color: var(--color-blanco);
}
/* HEADER */
header {
background-color: var(--color-negro);
padding: 20px 0;
position: fixed;
width: 100%;
top: 0;
z-index: 1000;
box-shadow: 0 2px 10px rgba(0,0,0,0.1);
}
.header-container {
max-width: 1200px;
margin: 0 auto;
padding: 0 20px;
display: flex;
justify-content: space-between;
align-items: center;
}
.logo {
color: var(--color-oro);
font-size: 26px;
font-weight: 700;
letter-spacing: 1px;
}
nav {
display: flex;
gap: 35px;
}
nav a {
color: white;
text-decoration: none;
font-size: 14px;
font-weight: 500;
transition: color 0.3s;
position: relative;
}
nav a:hover {
color: var(--color-oro);
}
nav a::after {
content: '';
position: absolute;
bottom: -5px;
left: 0;
width: 0;
height: 2px;
background-color: var(--color-verde);
transition: width 0.3s;
}
nav a:hover::after {
width: 100%;
}
.menu-toggle {
display: none;
background: none;
border: none;
color: var(--color-oro);
font-size: 24px;
cursor: pointer;
}
/* HERO */
.hero {
background: linear-gradient(135deg, var(--color-negro) 0%, #2d2d2d 100%);
color: white;
padding: 160px 20px 120px;
text-align: center;
margin-top: 70px;
position: relative;
overflow: hidden;
}
.hero::before {
content: '';
position: absolute;
top: -50%;
right: -50%;
width: 600px;
height: 600px;
background: radial-gradient(circle, var(--color-oro) 0%, transparent 70%);
opacity: 0.08;
border-radius: 50%;
}
.hero::after {
content: '';
position: absolute;
bottom: -50%;
left: -50%;
width: 500px;
height: 500px;
background: radial-gradient(circle, var(--color-verde) 0%, transparent 70%);
opacity: 0.06;
border-radius: 50%;
}
.hero-content {
max-width: 900px;
margin: 0 auto;
position: relative;
z-index: 1;
}
.hero h1 {
font-size: 56px;
margin-bottom: 20px;
font-weight: 300;
letter-spacing: 1px;
line-height: 1.2;
}
.hero-subtitle {
font-size: 18px;
margin-bottom: 50px;
color: var(--color-oro);
opacity: 0.95;
font-weight: 400;
}
.button-group {
display: flex;
gap: 20px;
justify-content: center;
flex-wrap: wrap;
}
.btn {
padding: 16px 45px;
border: 2px solid var(--color-oro);
border-radius: 50px;
font-size: 16px;
cursor: pointer;
transition: all 0.3s ease;
text-decoration: none;
display: inline-block;
font-weight: 600;
letter-spacing: 0.5px;
}
.btn-primary {
background-color: var(--color-verde);
color: white;
border-color: var(--color-verde);
}
.btn-primary:hover {
background-color: transparent;
color: var(--color-verde);
transform: translateY(-3px);
box-shadow: 0 10px 25px rgba(140, 198, 62, 0.2);
}
.btn-secondary {
background-color: transparent;
color: var(--color-oro);
border-color: var(--color-oro);
}
.btn-secondary:hover {
background-color: var(--color-oro);
color: var(--color-negro);
transform: translateY(-3px);
box-shadow: 0 10px 25px rgba(212, 175, 55, 0.2);
}
/* CONTAINER */
.container {
max-width: 1200px;
margin: 0 auto;
padding: 0 20px;
}
/* CARDS SECTION */
.cards-section {
padding: 100px 20px;
background-color: var(--color-crema);
}
.section-title {
text-align: center;
font-size: 42px;
margin-bottom: 20px;
color: var(--color-negro);
font-weight: 300;
letter-spacing: 1px;
}
.section-subtitle {
text-align: center;
font-size: 16px;
color: #666;
margin-bottom: 60px;
max-width: 700px;
margin-left: auto;
margin-right: auto;
}
.cards-grid {
display: grid;
grid-template-columns: repeat(auto-fit, minmax(300px, 1fr));
gap: 40px;
}
.card {
background: white;
padding: 50px 35px;
border-radius: 8px;
text-align: center;
box-shadow: 0 5px 20px rgba(0,0,0,0.08);
transition: transform 0.3s, box-shadow 0.3s, border-color 0.3s;
border-left: 4px solid transparent;
}
.card:nth-child(1) {
border-left-color: var(--color-oro);
}
.card:nth-child(2) {
border-left-color: var(--color-verde);
}
.card:nth-child(3) {
border-left-color: var(--color-purpura);
}
.card:hover {
transform: translateY(-15px);
box-shadow: 0 15px 40px rgba(0,0,0,0.12);
}
.card-icon {
font-size: 56px;
margin-bottom: 25px;
display: inline-block;
}
.card h3 {
font-size: 26px;
margin-bottom: 15px;
color: var(--color-negro);
font-weight: 600;
}
.card p {
color: #666;
line-height: 1.8;
font-size: 15px;
}
/* PRODUCTOS */
.productos-section {
padding: 100px 20px;
background-color: white;
}
.productos-grid {
display: grid;
grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));
gap: 35px;
}
.producto-card {
background: white;
border-radius: 8px;
overflow: hidden;
box-shadow: 0 5px 20px rgba(0,0,0,0.08);
transition: transform 0.3s, box-shadow 0.3s;
}
.producto-card:hover {
transform: translateY(-12px);
box-shadow: 0 15px 40px rgba(0,0,0,0.12);
}
.producto-img {
width: 100%;
height: 260px;
background: linear-gradient(135deg, var(--color-verde) 0%, var(--color-oro) 100%);
display: flex;
align-items: center;
justify-content: center;
font-size: 70px;
color: white;
position: relative;
overflow: hidden;
}
.producto-img::after {
content: '';
position: absolute;
top: 0;
left: 0;
right: 0;
bottom: 0;
background: rgba(26, 26, 26, 0.05);
}
.producto-info {
padding: 25px;
}
.producto-info h4 {
margin-bottom: 8px;
color: var(--color-negro);
font-size: 18px;
font-weight: 600;
min-height: 50px;
display: flex;
align-items: center;
}
.producto-info p {
color: #999;
font-size: 13px;
margin-bottom: 18px;
min-height: 40px;
}
.producto-precio {
display: flex;
justify-content: space-between;
align-items: center;
gap: 10px;
}
.precio {
font-size: 22px;
color: var(--color-verde);
font-weight: 700;
}
.btn-comprar {
background-color: var(--color-verde);
color: white;
border: none;
padding: 12px 25px;
border-radius: 25px;
cursor: pointer;
transition: all 0.3s;
font-weight: 600;
font-size: 14px;
}
.btn-comprar:hover {
background-color: var(--color-oro);
transform: translateY(-2px);
}
/* NEWSLETTER */
.newsletter-section {
background: linear-gradient(135deg, var(--color-purpura) 0%, #6B4C9A 100%);
color: white;
padding: 100px 20px;
text-align: center;
}
.newsletter-content {
max-width: 650px;
margin: 0 auto;
}
.newsletter-section h2 {
font-size: 40px;
margin-bottom: 20px;
font-weight: 300;
letter-spacing: 1px;
}
.newsletter-section p {
margin-bottom: 40px;
color: rgba(255,255,255,0.95);
font-size: 16px;
}
.newsletter-section .benefit {
font-size: 14px;
margin-top: 15px;
color: var(--color-oro);
font-weight: 600;
}
.newsletter-form {
display: flex;
gap: 12px;
flex-wrap: wrap;
}
.newsletter-form input {
flex: 1;
min-width: 250px;
padding: 16px 25px;
border: none;
border-radius: 50px;
font-size: 15px;
background-color: white;
color: var(--color-negro);
}
.newsletter-form input::placeholder {
color: #ccc;
}
.newsletter-form button {
padding: 16px 45px;
background-color: var(--color-verde);
color: white;
border: none;
border-radius: 50px;
cursor: pointer;
font-weight: 600;
transition: all 0.3s;
font-size: 15px;
}
.newsletter-form button:hover {
background-color: var(--color-oro);
color: var(--color-negro);
transform: translateY(-3px);
}
/* FOOTER */
footer {
background-color: var(--color-negro);
color: white;
padding: 80px 20px 20px;
}
.footer-content {
max-width: 1200px;
margin: 0 auto;
display: grid;
grid-template-columns: repeat(auto-fit, minmax(270px, 1fr));
gap: 50px;
margin-bottom: 50px;
}
.footer-section h4 {
color: var(--color-oro);
margin-bottom: 25px;
font-size: 16px;
font-weight: 700;
letter-spacing: 0.5px;
}
.footer-section p {
color: #ccc;
font-size: 14px;
line-height: 1.8;
margin-bottom: 20px;
}
.footer-section ul {
list-style: none;
}
.footer-section ul li {
margin-bottom: 12px;
}
.footer-section a {
color: #ccc;
text-decoration: none;
transition: color 0.3s;
font-size: 14px;
}
.footer-section a:hover {
color: var(--color-oro);
}
.social-links {
display: flex;
gap: 15px;
margin-top: 20px;
}
.social-links a {
display: inline-flex;
align-items: center;
justify-content: center;
width: 50px;
height: 50px;
background-color: var(--color-oro);
color: var(--color-negro);
border-radius: 50%;
font-size: 18px;
font-weight: bold;
transition: all 0.3s;
text-decoration: none;
}
.social-links a:hover {
background-color: var(--color-verde);
transform: translateY(-5px);
}
.whatsapp-btn {
display: inline-flex;
align-items: center;
gap: 10px;
background-color: #25D366;
color: white;
padding: 14px 30px;
border-radius: 50px;
text-decoration: none;
font-weight: 600;
margin-top: 20px;
transition: all 0.3s;
font-size: 14px;
}
.whatsapp-btn:hover {
background-color: #20ba5a;
transform: translateY(-3px);
}
.footer-bottom {
border-top: 1px solid #444;
padding-top: 25px;
text-align: center;
color: #888;
font-size: 13px;
}
/* RESPONSIVE */
@media (max-width: 768px) {
.logo {
font-size: 22px;
}
nav {
display: none;
}
.menu-toggle {
display: block;
}
.hero {
padding: 120px 20px 80px;
margin-top: 60px;
}
.hero h1 {
font-size: 38px;
}
.hero-subtitle {
font-size: 16px;
}
.button-group {
flex-direction: column;
}
.btn {
width: 100%;
}
.section-title {
font-size: 32px;
}
.cards-grid {
gap: 25px;
}
.card {
padding: 35px 25px;
}
.productos-grid {
grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
gap: 20px;
}
.newsletter-form {
flex-direction: column;
}
.newsletter-form input,
.newsletter-form button {
width: 100%;
}
.footer-content {
grid-template-columns: 1fr;
gap: 30px;
}
}
@media (max-width: 480px) {
.hero h1 {
font-size: 28px;
margin-bottom: 15px;
}
.hero-subtitle {
font-size: 14px;
margin-bottom: 30px;
}
.button-group {
gap: 10px;
}
.btn {
padding: 14px 30px;
font-size: 14px;
}
.section-title {
font-size: 26px;
margin-bottom: 15px;
}
.section-subtitle {
font-size: 14px;
margin-bottom: 40px;
}
.card {
padding: 25px 20px;
}
.card-icon {
font-size: 45px;
}
.card h3 {
font-size: 22px;
}
.card p {
font-size: 14px;
}
.producto-img {
height: 200px;
font-size: 60px;
}
.producto-info {
padding: 20px;
}
.product-info h4 {
font-size: 16px;
}
.precio {
font-size: 20px;
}
.social-links {
gap: 10px;
}
.social-links a {
width: 45px;
height: 45px;
font-size: 16px;
}
.newsletter-section h2 {
font-size: 28px;
}
.newsletter-section p {
font-size: 14px;
}
}
</style>
</head>
<body>
<!-- HEADER -->
<header>
<div class="header-container">
<div class="logo">Pupulina</div>
<nav>
<a href="#inicio">Inicio</a>
<a href="#valores">Quiénes Somos</a>
<a href="#productos">Productos</a>
<a href="#contacto">Contacto</a>
</nav>
<button class="menu-toggle">☰</button>
</div>
</header>
<!-- HERO -->
<section class="hero" id="inicio">
<div class="hero-content">
<h1>La belleza auténtica está dentro de ti</h1>
<p class="hero-subtitle">Productos naturales, contenido educativo y comunidad para tu transformación integral</p>
<div class="button-group">
<a href="#productos" class="btn btn-primary">Ver Productos</a>
<a href="#valores" class="btn btn-secondary">Conocer Más</a>
</div>
</div>
</section>
<!-- CARDS - PROPUESTA DE VALOR -->
<section class="cards-section" id="valores">
<div class="container">
<h2 class="section-title">¿Qué es Pupulina?</h2>
<p class="section-subtitle">Una marca que cree en el bienestar holístico, la belleza natural y la autenticidad</p>
<div class="cards-grid">
<div class="card">
<div class="card-icon">📚</div>
<h3>Contenido Educativo</h3>
<p>Aprende sobre bienestar, belleza natural, estilo de vida y organización financiera con guías especializadas.</p>
</div>
<div class="card">
<div class="card-icon">🌿</div>
<h3>Productos Naturales</h3>
<p>Colección premium de aceites esenciales y CBD de Aromas Colombianas, seleccionados con propósito.</p>
</div>
<div class="card">
<div class="card-icon">💝</div>
<h3>Comunidad Auténtica</h3>
<p>Únete a mujeres que comparten historias reales, transformaciones y apoyo mutuo en su camino al bienestar.</p>
</div>
</div>
</div>
</section>
<!-- PRODUCTOS DESTACADOS -->
<section class="productos-section" id="productos">
<div class="container">
<h2 class="section-title">Productos Destacados</h2>
<p class="section-subtitle">Aceites esenciales y CBD premium de Aromas Colombianas</p>
<div class="productos-grid">
<div class="producto-card">
<div class="producto-img">🧴</div>
<div class="producto-info">
<h4>Aceite CBD Full Spectrum 20ml</h4>
<p>Espectro completo para bienestar integral</p>
<div class="producto-precio">
<span class="precio">$110.000</span>
<a href="https://www.pupulina.org/productos/" class="btn-comprar">Ver</a>
</div>
</div>
</div>
<div class="producto-card">
<div class="producto-img">🌸</div>
<div class="producto-info">
<h4>Aceite Esencial Lavanda 12ml</h4>
<p>Relajación y calma natural</p>
<div class="producto-precio">
<span class="precio">$70.000</span>
<a href="https://www.pupulina.org/productos/" class="btn-comprar">Ver</a>
</div>
</div>
</div>
<div class="producto-card">
<div class="producto-img">🎁</div>
<div class="producto-info">
<h4>Kit Altualma</h4>
<p>Set de 3 aceites esenciales premium</p>
<div class="producto-precio">
<span class="precio">$160.000</span>
<a href="https://www.pupulina.org/productos/" class="btn-comprar">Ver</a>
</div>
</div>
</div>
<div class="producto-card">
<div class="producto-img">✨</div>
<div class="producto-info">
<h4>Kit Ejecutivo 2024</h4>
<p>Set de 3 roll-on para tu día</p>
<div class="producto-precio">
<span class="precio">$160.000</span>
<a href="https://www.pupulina.org/productos/" class="btn-comprar">Ver</a>
</div>
</div>
</div>
</div>
</div>
</section>
<!-- NEWSLETTER -->
<section class="newsletter-section">
<div class="newsletter-content">
<h2>Únete a Nuestra Comunidad</h2>
<p>Recibe tips exclusivos, contenido educativo y acceso a ofertas especiales</p>
<form class="newsletter-form" onsubmit="handleNewsletter(event)">
<input type="email" placeholder="Tu correo electrónico" required>
<button type="submit">Suscribirse</button>
</form>
<p class="benefit">🎁 Recibe 10% de descuento en tu primera compra</p>
</div>
</section>
<!-- FOOTER -->
<footer id="contacto">
<div class="footer-content">
<div class="footer-section">
<h4>Sobre Pupulina</h4>
<p>La belleza auténtica está dentro de ti. Productos naturales, contenido educativo y comunidad para tu transformación integral.</p>
<div class="social-links">
<a href="https://instagram.com/Pupulina_mujer" title="Instagram" target="_blank">f</a>
<a href="https://facebook.com/Pupulina.Essence" title="Facebook" target="_blank">📱</a>
</div>
</div>
<div class="footer-section">
<h4>Enlaces Rápidos</h4>
<ul>
<li><a href="#productos">Productos</a></li>
<li><a href="#valores">Quiénes Somos</a></li>
<li><a href="https://www.pupulina.org/productos/">Catálogo Completo</a></li>
<li><a href="#contacto">Contacto</a></li>
</ul>
</div>
<div class="footer-section">
<h4>Contáctanos</h4>
<ul>
<li><a href="tel:+573153357069">📞 +57 315 335 7069</a></li>
<li><a href="mailto:[email protected]">📧 Envía tu mensaje</a></li>
<li><a href="https://wa.me/573153357069?text=Hola%20Pupulina" class="whatsapp-btn" target="_blank">💬 WhatsApp</a></li>
</ul>
</div>
</div>
<div class="footer-bottom">
<p>© 2026 Pupulina. La belleza auténtica está dentro de ti. | Todos los derechos reservados.</p>
</div>
</footer>
<script>
// Smooth scroll para enlaces
document.querySelectorAll('a[href^="#"]').forEach(anchor => {
anchor.addEventListener('click', function (e) {
e.preventDefault();
const target = document.querySelector(this.getAttribute('href'));
if (target) {
target.scrollIntoView({ behavior: 'smooth' });
}
});
});
// Newsletter handler
function handleNewsletter(e) {
e.preventDefault();
const email = e.target.querySelector('input[type="email"]').value;
console.log('Email suscripción:', email);
alert('¡Gracias por suscribirte! Pronto recibirás nuestras ofertas exclusivas.');
e.target.reset();
// Aquí se conectaría a tu servicio de email (Hotmart, Brevo, etc.)
}
</script>
</body>
</html>
