Prueba
{%- comment -%}
Fiesta Encantada - Landing de producto
Sección Shopify lista para usar.
{%- endcomment -%}
<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=Fredoka:wght@400;500;600;700&family=Caveat:wght@600;700&family=Nunito:wght@400;600;700;800;900&display=swap" rel="stylesheet">
<style>
.fe-section {
--fe-pink: #ff7ab8;
--fe-pink-deep: #e6549b;
--fe-pink-soft: #ffd6ec;
--fe-cream: #fff6f9;
--fe-lilac: #c9b6ff;
--fe-mint: #b6f0d6;
--fe-yellow: #ffe27a;
--fe-text: #3a2342;
--fe-text-soft: #6b4f7a;
--fe-cta: #ff3d8a;
--fe-cta-hover: #e62875;
--fe-gold: #f5b942;
font-family: 'Nunito', system-ui, sans-serif;
color: var(--fe-text);
background:
radial-gradient(1200px 600px at 10% 0%, #ffe9f3 0%, transparent 60%),
radial-gradient(900px 500px at 90% 30%, #efe4ff 0%, transparent 60%),
radial-gradient(800px 500px at 50% 100%, #dff7ff 0%, transparent 60%),
linear-gradient(180deg, #fff6f9 0%, #fff0f7 100%);
overflow-x: hidden;
position: relative;
}
.fe-section::before {
content: "";
position: absolute;
inset: 0;
background-image:
radial-gradient(circle, rgba(255,122,184,.4) 2px, transparent 2px),
radial-gradient(circle, rgba(201,182,255,.35) 2px, transparent 2px),
radial-gradient(circle, rgba(255,226,122,.4) 2px, transparent 2px);
background-size: 80px 80px, 120px 120px, 100px 100px;
background-position: 0 0, 40px 60px, 20px 30px;
opacity: .5;
pointer-events: none;
z-index: 0;
}
.fe-section * { box-sizing: border-box; }
.fe-wrap {
max-width: 880px;
margin: 0 auto;
padding: 24px 18px 60px;
position: relative;
z-index: 1;
}
.fe-hero { text-align: center; padding: 30px 16px 20px; }
.fe-hero h1 {
font-family: 'Fredoka', sans-serif;
font-weight: 700;
font-size: clamp(30px, 6vw, 52px);
line-height: 1.05;
margin: 0 0 8px;
color: var(--fe-text);
letter-spacing: -.5px;
}
.fe-magic {
background: linear-gradient(120deg, #ff5fa2 0%, #b87bff 50%, #ff8fbf 100%);
-webkit-background-clip: text;
background-clip: text;
color: transparent;
font-family: 'Caveat', cursive;
font-size: 1.4em;
font-weight: 700;
display: inline-block;
transform: rotate(-3deg);
padding: 0 .1em;
}
.fe-underline { position: relative; display: inline-block; }
.fe-underline::after {
content: "";
position: absolute;
left: -4%;
right: -4%;
bottom: -2px;
height: 10px;
background: var(--fe-yellow);
border-radius: 50%;
z-index: -1;
opacity: .85;
}
.fe-sub {
font-size: clamp(15px, 3.6vw, 19px);
color: var(--fe-text-soft);
margin: 4px 0 18px;
font-weight: 600;
}
.fe-sub strong { color: var(--fe-pink-deep); }
.fe-hero-media {
position: relative;
border-radius: 22px;
overflow: hidden;
margin: 14px auto 18px;
box-shadow: 0 20px 60px rgba(255, 82, 154, .25), 0 6px 18px rgba(0,0,0,.06);
border: 4px solid #fff;
}
.fe-hero-media img { display: block; width: 100%; height: auto; }
.fe-buybox {
background: #fff;
border: 3px solid #ffd6ec;
border-radius: 24px;
padding: 22px 20px;
margin: 18px 0 24px;
box-shadow: 0 14px 40px rgba(255, 82, 154, .12);
}
.fe-buy-title {
font-family: 'Fredoka', sans-serif;
font-weight: 600;
font-size: 22px;
margin: 0 0 6px;
color: var(--fe-text);
}
.fe-price-row {
display: flex; align-items: baseline; gap: 10px;
flex-wrap: wrap; margin: 8px 0 4px;
}
.fe-price {
font-family: 'Fredoka', sans-serif;
font-weight: 700;
font-size: 38px;
color: var(--fe-pink-deep);
}
.fe-compare-price {
text-decoration: line-through;
color: #b18ca0;
font-size: 20px;
font-weight: 600;
}
.fe-badge {
display: inline-block;
background: var(--fe-yellow);
color: #8a5a00;
font-weight: 800;
font-size: 12px;
padding: 4px 10px;
border-radius: 999px;
letter-spacing: .5px;
text-transform: uppercase;
}
.fe-stock {
display: flex; align-items: center; gap: 8px;
color: #c0457e; font-weight: 700; font-size: 14px;
margin-top: 8px;
}
.fe-cta {
display: block;
width: 100%;
background: linear-gradient(180deg, #ff5fa2 0%, #ff3d8a 100%);
color: #fff;
border: none;
border-radius: 16px;
padding: 18px 20px;
font-family: 'Fredoka', sans-serif;
font-weight: 600;
font-size: 20px;
cursor: pointer;
box-shadow: 0 10px 24px rgba(255, 61, 138, .4), inset 0 -4px 0 rgba(0,0,0,.1);
transition: transform .12s ease, box-shadow .2s ease;
margin-top: 14px;
text-decoration: none;
text-align: center;
letter-spacing: .3px;
}
.fe-cta:hover {
transform: translateY(-2px);
box-shadow: 0 14px 30px rgba(255, 61, 138, .5);
}
.fe-trust {
display: flex; justify-content: center; gap: 14px; flex-wrap: wrap;
margin-top: 14px;
font-size: 12px; color: var(--fe-text-soft); font-weight: 600;
}
.fe-block {
background: rgba(255,255,255,.7);
border: 2px solid rgba(255, 214, 236, .8);
border-radius: 26px;
padding: 28px 22px;
margin: 22px 0;
box-shadow: 0 10px 30px rgba(255, 82, 154, .08);
}
.fe-block h2 {
font-family: 'Fredoka', sans-serif;
font-weight: 600;
font-size: clamp(24px, 5vw, 32px);
text-align: center;
margin: 0 0 6px;
color: var(--fe-text);
line-height: 1.15;
}
.fe-hl {
background: linear-gradient(120deg, transparent 50%, var(--fe-yellow) 50%);
padding: 0 .15em;
}
.fe-script {
font-family: 'Caveat', cursive;
color: var(--fe-pink-deep);
font-size: 1.3em;
display: inline-block;
transform: rotate(-2deg);
}
.fe-eyebrow {
text-align: center;
color: var(--fe-pink-deep);
font-weight: 800;
text-transform: uppercase;
letter-spacing: 2px;
font-size: 12px;
margin-bottom: 4px;
}
.fe-block p {
color: var(--fe-text-soft);
font-size: 16px;
line-height: 1.55;
margin: 10px 0;
}
.fe-list {
list-style: none;
padding: 0;
margin: 14px 0;
}
.fe-list li {
padding: 10px 0 10px 36px;
position: relative;
color: var(--fe-text);
font-weight: 600;
font-size: 16px;
line-height: 1.4;
}
.fe-list li::before {
content: "✓";
color: #fff;
background: var(--fe-pink);
width: 24px; height: 24px;
border-radius: 50%;
display: grid; place-items: center;
font-size: 14px; font-weight: 900;
position: absolute;
left: 0; top: 12px;
}
.fe-grid {
display: grid;
grid-template-columns: repeat(auto-fit, minmax(140px, 1fr));
gap: 12px;
margin-top: 18px;
}
.fe-tile {
aspect-ratio: 1/1;
border-radius: 18px;
background: linear-gradient(135deg, var(--fe-pink-soft), #fff);
display: grid;
place-items: center;
text-align: center;
padding: 14px;
font-weight: 700;
color: var(--fe-pink-deep);
border: 2px solid #fff;
box-shadow: 0 6px 18px rgba(255, 82, 154, .15);
font-size: 14px;
}
.fe-tile span { font-size: 32px; display: block; margin-bottom: 4px; }
.fe-steps {
display: grid;
gap: 16px;
margin-top: 20px;
}
.fe-step {
background: #fff;
border-radius: 20px;
padding: 20px 18px 20px 70px;
position: relative;
border: 2px solid var(--fe-pink-soft);
box-shadow: 0 6px 18px rgba(255, 82, 154, .1);
}
.fe-num {
position: absolute;
left: 14px; top: 16px;
width: 44px; height: 44px;
background: linear-gradient(135deg, #ff7ab8, #ff3d8a);
color: #fff;
font-family: 'Fredoka', sans-serif;
font-weight: 700;
font-size: 22px;
border-radius: 14px;
display: grid; place-items: center;
box-shadow: 0 6px 14px rgba(255, 61, 138, .35);
}
.fe-step h3 {
margin: 0 0 4px;
font-family: 'Fredoka', sans-serif;
font-weight: 600;
font-size: 18px;
color: var(--fe-text);
}
.fe-step p { margin: 0; font-size: 15px; }
.fe-compare-box {
display: grid;
grid-template-columns: 1fr;
gap: 14px;
margin-top: 18px;
}
.fe-col {
border-radius: 20px;
padding: 20px 18px;
}
.fe-col-bad {
background: #f3eaf0;
color: #7a5c6e;
}
.fe-col-good {
background: linear-gradient(160deg, #fff0f7, #ffe4f0);
border: 2px solid var(--fe-pink);
color: var(--fe-text);
box-shadow: 0 10px 24px rgba(255, 82, 154, .15);
}
.fe-col h4 {
margin: 0 0 10px;
font-family: 'Fredoka', sans-serif;
font-size: 18px;
text-align: center;
}
.fe-col ul { list-style: none; padding: 0; margin: 0; }
.fe-col li {
padding: 8px 0 8px 30px;
position: relative;
font-size: 14px;
font-weight: 600;
}
.fe-col-bad li::before {
content: "✕";
color: #fff;
background: #c9a3b6;
width: 22px; height: 22px;
border-radius: 50%;
display: grid; place-items: center;
font-size: 12px; font-weight: 900;
position: absolute;
left: 0; top: 10px;
}
.fe-col-good li::before {
content: "✓";
color: #fff;
background: var(--fe-pink-deep);
width: 22px; height: 22px;
border-radius: 50%;
display: grid; place-items: center;
font-size: 12px; font-weight: 900;
position: absolute;
left: 0; top: 10px;
}
.fe-testis {
display: grid;
gap: 14px;
margin-top: 18px;
}
.fe-testi {
background: #fff;
border-radius: 18px;
padding: 18px;
border: 2px solid #ffe2ee;
box-shadow: 0 6px 16px rgba(255, 82, 154, .1);
}
.fe-stars { color: var(--fe-gold); font-size: 18px; margin-bottom: 6px; }
.fe-testi blockquote {
margin: 0 0 10px;
font-style: italic;
color: var(--fe-text);
font-size: 15px;
line-height: 1.5;
}
.fe-testi cite {
font-style: normal;
color: var(--fe-pink-deep);
font-weight: 700;
font-size: 14px;
}
.fe-faq details {
background: #fff;
border: 2px solid #ffe2ee;
border-radius: 16px;
padding: 14px 18px;
margin-bottom: 10px;
cursor: pointer;
}
.fe-faq summary {
list-style: none;
font-family: 'Fredoka', sans-serif;
font-weight: 500;
font-size: 16px;
color: var(--fe-text);
display: flex;
justify-content: space-between;
align-items: center;
gap: 12px;
}
.fe-faq summary::-webkit-details-marker { display: none; }
.fe-faq summary::after {
content: "+";
color: var(--fe-pink-deep);
font-size: 24px;
font-weight: 700;
line-height: 1;
transition: transform .2s;
}
.fe-faq details[open] summary::after { transform: rotate(45deg); }
.fe-faq details p {
margin: 10px 0 4px;
color: var(--fe-text-soft);
font-size: 15px;
line-height: 1.5;
}
.fe-final-cta {
text-align: center;
padding: 30px 20px;
background: linear-gradient(135deg, #ff7ab8 0%, #b87bff 100%);
border-radius: 28px;
margin: 30px 0;
color: #fff;
box-shadow: 0 20px 50px rgba(184, 123, 255, .35);
position: relative;
overflow: hidden;
}
.fe-final-cta h2 {
font-family: 'Fredoka', sans-serif;
font-weight: 600;
color: #fff;
margin: 0 0 8px;
font-size: clamp(26px, 5vw, 34px);
}
.fe-final-cta p {
color: rgba(255,255,255,.92);
margin: 0 0 18px;
}
.fe-final-cta .fe-cta {
background: #fff;
color: var(--fe-pink-deep);
box-shadow: 0 10px 24px rgba(0,0,0,.2), inset 0 -4px 0 rgba(0,0,0,.08);
max-width: 480px;
margin: 0 auto;
}
.fe-sticky-cta {
position: fixed;
bottom: 0; left: 0; right: 0;
background: #fff;
border-top: 2px solid var(--fe-pink-soft);
padding: 10px 14px;
z-index: 99;
box-shadow: 0 -6px 20px rgba(0,0,0,.08);
display: none;
}
.fe-sticky-cta .fe-cta {
margin: 0;
padding: 14px;
font-size: 17px;
}
@media (max-width: 768px) {
.fe-sticky-cta { display: block; }
.fe-section { padding-bottom: 80px; }
}
@media (min-width: 640px) {
.fe-compare-box { grid-template-columns: 1fr 1fr; }
.fe-testis { grid-template-columns: 1fr 1fr; }
}
.fe-center { text-align: center; }
.fe-pink-text { color: var(--fe-pink-deep); font-weight: 700; }
</style>
<section class="fe-section">
<div class="fe-wrap">
<div class="fe-hero">
<h1>
Armá una fiesta <span class="fe-magic">mágica</span><br>
en <span class="fe-underline">minutos</span> ✨
</h1>
<p class="fe-sub">Sin estrés y <strong>sin gastar de más</strong></p>
<div class="fe-hero-media">
{%- if section.settings.hero_image -%}
<img src="{{ section.settings.hero_image | image_url: width: 1200 }}" alt="Kit Fiesta Encantada" loading="eager">
{%- elsif product.featured_image -%}
<img src="{{ product.featured_image | image_url: width: 1200 }}" alt="{{ product.title | escape }}" loading="eager">
{%- endif -%}
</div>
</div>
<div class="fe-buybox" id="fe-buybox">
<span class="fe-badge">⚡ Descarga inmediata</span>
<h2 class="fe-buy-title">{{ product.title }}</h2>
<div class="fe-price-row">
<span class="fe-price">{{ product.price | money }}</span>
{%- if product.compare_at_price > product.price -%}
<span class="fe-compare-price">{{ product.compare_at_price | money }}</span>
{%- endif -%}
</div>
<div class="fe-stock">🔥 ¡Promoción por tiempo limitado!</div>
<form method="post" action="/cart/add" enctype="multipart/form-data">
<input type="hidden" name="id" value="{{ product.selected_or_first_available_variant.id }}">
<button type="submit" class="fe-cta">🎁 ¡Lo quiero ahora! →</button>
</form>
<div class="fe-trust">
<span>🔒 Pago seguro</span>
<span>⚡ Acceso inmediato</span>
<span>💝 Bonos incluidos</span>
</div>
</div>
<div class="fe-block">
<div class="fe-eyebrow">El estrés de cada fiesta</div>
<h2>¿Cómo lograr que la fiesta de tu hijo sea <span class="fe-script">inolvidable</span>?</h2>
<p class="fe-center">Sabemos lo que se siente: querés sorprender a tu hijo, pero los presupuestos de cotillón son enormes, los diseñadores cobran fortunas y armar todo desde cero te roba semanas que no tenés.</p>
<p class="fe-center fe-pink-text">Por eso creamos este kit completo. Para que la magia esté lista en minutos. ✨</p>
</div>
<div class="fe-block">
<div class="fe-eyebrow">+10.000 diseños premium</div>
<h2>Kit Completo de <span class="fe-hl">Decoración</span> 🎈</h2>
<p class="fe-center">Todos los personajes que tu peque ama, clásicos y en tendencia, listos para imprimir.</p>
<div class="fe-grid">
<div class="fe-tile"><span>🎂</span>Tortas y Toppers</div>
<div class="fe-tile"><span>🎀</span>Invitaciones</div>
<div class="fe-tile"><span>🍭</span>Candy Bar</div>
<div class="fe-tile"><span>🎨</span>Stickers</div>
<div class="fe-tile"><span>🖼️</span>Fondos</div>
<div class="fe-tile"><span>🎁</span>Bolsitas</div>
<div class="fe-tile"><span>🏷️</span>Etiquetas</div>
<div class="fe-tile"><span>✨</span>¡Y más!</div>
</div>
<ul class="fe-list">
<li>Formatos PDF, PNG, SVG y DXF</li>
<li>Editable desde Canva GRATIS</li>
<li>Incluye tutoriales paso a paso</li>
<li>Compatible con celular, tablet y computadora</li>
</ul>
</div>
<div class="fe-block">
<div class="fe-eyebrow">La diferencia</div>
<h2>Cotillón tradicional <span class="fe-script">vs.</span> Fiesta Encantada</h2>
<div class="fe-compare-box">
<div class="fe-col fe-col-bad">
<h4>😩 Cotillón tradicional</h4>
<ul>
<li>Gastás una fortuna</li>
<li>Stock limitado</li>
<li>Tenés que esperar el envío</li>
<li>No podés personalizarlo</li>
<li>Pocas opciones de personajes</li>
</ul>
</div>
<div class="fe-col fe-col-good">
<h4>✨ Fiesta Encantada</h4>
<ul>
<li>+10.000 diseños por un solo pago</li>
<li>Descarga inmediata, sin envíos</li>
<li>Personalizá nombres, edades y fotos</li>
<li>Imprimís cuantas veces quieras</li>
<li>Acceso de por vida al kit</li>
</ul>
</div>
</div>
</div>
<div class="fe-block">
<div class="fe-eyebrow">Súper fácil</div>
<h2>3 pasos para tu fiesta <span class="fe-hl">soñada</span></h2>
<div class="fe-steps">
<div class="fe-step">
<div class="fe-num">1</div>
<h3>Descargá y personalizá</h3>
<p>Abrí los diseños en Canva GRATIS y editá los nombres, fotos y colores en minutos.</p>
</div>
<div class="fe-step">
<div class="fe-num">2</div>
<h3>Imprimí desde casa</h3>
<p>Usá tu impresora hogareña o llevalos a cualquier imprenta. Funciona en cualquier lado.</p>
</div>
<div class="fe-step">
<div class="fe-num">3</div>
<h3>¡Decorá y disfrutá!</h3>
<p>Sorprendé a tu hijo con una fiesta digna de Pinterest y guardá recuerdos mágicos para siempre.</p>
</div>
</div>
</div>
<div class="fe-block">
<div class="fe-eyebrow">🎁 Regalos EXCLUSIVOS incluidos</div>
<h2>¡Pero esperá... <span class="fe-script">hay más!</span></h2>
<p class="fe-center">Sumá estos <strong>BONOS GRATIS</strong> al comprar hoy:</p>
<ul class="fe-list">
<li><strong>BONO 1:</strong> Guía completa para emprender con kits imprimibles</li>
<li><strong>BONO 2:</strong> Juegos imprimibles para animar tu fiesta</li>
<li><strong>BONO 3:</strong> Mini cursos de Canva en video</li>
<li><strong>BONO 4:</strong> Acceso a futuras actualizaciones del kit</li>
</ul>
</div>
<div class="fe-block">
<div class="fe-eyebrow">Mamás felices</div>
<h2>Lo que dicen <span class="fe-script">nuestras clientas</span></h2>
<div class="fe-testis">
<div class="fe-testi">
<div class="fe-stars">★★★★★</div>
<blockquote>"Increíble! Armé la fiesta de mi nena en 2 tardes y quedó hermosa. Mis amigas no podían creer que lo hice yo."</blockquote>
<cite>— Carolina M., Buenos Aires</cite>
</div>
<div class="fe-testi">
<div class="fe-stars">★★★★★</div>
<blockquote>"Pagué un montón menos que en el cotillón y me sobró para el catering. Los diseños son hermosos y súper fáciles de editar."</blockquote>
<cite>— Lucía R., México</cite>
</div>
<div class="fe-testi">
<div class="fe-stars">★★★★★</div>
<blockquote>"Soy un desastre con la compu y aun así lo hice todo sola. Los tutoriales son clarísimos. ¡Recomendadísimo!"</blockquote>
<cite>— Daniela P., Chile</cite>
</div>
<div class="fe-testi">
<div class="fe-stars">★★★★★</div>
<blockquote>"Mi hijo lloró de emoción al ver su fiesta. No tiene precio. Vale cada centavo."</blockquote>
<cite>— Marina G., Colombia</cite>
</div>
</div>
</div>
<div class="fe-block fe-faq">
<div class="fe-eyebrow">Preguntas frecuentes</div>
<h2>¿Tenés <span class="fe-script">dudas?</span></h2>
<details>
<summary>¿Cómo recibo el kit?</summary>
<p>Una vez confirmado el pago recibís un email con el acceso inmediato a todos los archivos. Podés descargarlos las veces que quieras.</p>
</details>
<details>
<summary>¿Necesito saber diseño para usarlo?</summary>
<p>¡Para nada! Está pensado para mamás sin experiencia. Editás todo desde Canva (gratis) con tutoriales paso a paso incluidos.</p>
</details>
<details>
<summary>¿Funciona en celular?</summary>
<p>Sí, podés editar e imprimir desde el celular, tablet o computadora.</p>
</details>
<details>
<summary>¿Puedo imprimir en mi casa?</summary>
<p>Sí, está optimizado para impresoras hogareñas. También podés llevarlo a cualquier imprenta o copistería.</p>
</details>
<details>
<summary>¿Qué temáticas incluye?</summary>
<p>Más de 100 temáticas: princesas, superhéroes, animales, personajes en tendencia, clásicos y muchísimas más.</p>
</details>
<details>
<summary>¿El pago es seguro?</summary>
<p>Totalmente. Procesamos pagos con encriptación SSL y aceptamos tarjeta, MercadoPago, PayPal y transferencia.</p>
</details>
</div>
<div class="fe-final-cta">
<h2>Tu hijo merece una fiesta mágica ✨</h2>
<p>Acceso inmediato, bonos incluidos y satisfacción garantizada.</p>
<a href="#fe-buybox" class="fe-cta">🎁 ¡Lo quiero ahora! →</a>
</div>
</div>
<div class="fe-sticky-cta">
<a href="#fe-buybox" class="fe-cta">🎁 ¡Quiero mi kit ahora!</a>
</div>
</section>
{% schema %}
{
"name": "Fiesta Encantada",
"tag": "section",
"class": "fe-landing",
"settings": [
{
"type": "image_picker",
"id": "hero_image",
"label": "Imagen principal del hero"
}
],
"presets": [
{
"name": "Fiesta Encantada Landing"
}
]
}
{% endschema %}