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 %}