/** Shopify CDN: Minification failed

Line 162:0 Unexpected "<"
Line 444:2 Unexpected "<"
Line 464:24 Unterminated string token
Line 573:42 Comments in CSS use "/* ... */" instead of "//"
Line 574:42 Comments in CSS use "/* ... */" instead of "//"
Line 577:9 Expected ":"
Line 578:9 Expected ":"
Line 579:9 Expected ":"
Line 580:9 Expected ":"
Line 581:9 Expected ":"
... and 92 more hidden warnings

**/

      /* Material icon */
      @import url('https://fonts.googleapis.com/css?family=Material+Icons+Round');

      /* Fonts */
      

      /* Libraries */
      

      /* Reset */
      
                  .pe-content.boxed {
                    width: 100%;
                    max-width: 100%;
                    margin-left: auto;
                    margin-right: auto;
                  }

                  .pe-content:not(.boxed) .pe-all-blue {
                    width: 100%;
                    max-width: 100%;
                    margin-left: auto;
                    margin-right: auto;
                  }
                

      .pe-all-blue::before, .pe-content.collection::before {
        content: "";
        display: block;
        clear: both;
      }

      .pe-pirate-cloak {
        line-height: 1;
      }

      .pe-pirate-cloak[data-type="productImage"] {
        line-height: 0;
      }

      .pe-pirate-cloak h1, .pe-pirate-cloak h2, .pe-pirate-cloak h3, .pe-pirate-cloak h4, .pe-pirate-cloak h5, .pe-pirate-cloak h6, .pe-pirate-cloak p {
        margin: 0;
      }

      .pe-pirate-cloak .medium-editor-list {
        list-style: disc;
        list-style-position: inside;
      }

      .pe-pirate-cloak .pe-heading p, .pe-pirate-cloak .pe-text p {
        font-family: inherit !important;
        font-size: inherit !important;
        line-height: inherit !important;
        color: inherit !important;
      }

      .page-container {
        transform: none;
      }

      /* Utilities */

      .pe-noselect {
        -webkit-touch-callout: none; /* iOS Safari */
          -webkit-user-select: none; /* Safari */
          -khtml-user-select: none; /* Konqueror HTML */
            -moz-user-select: none; /* Old versions of Firefox */
              -ms-user-select: none; /* Internet Explorer/Edge */
                  user-select: none; /* Non-prefixed version, currently supported by Chrome, Edge, Opera and Firefox */
      }

      @media (min-width: 1201px) {
        .pe-md, .pe-sm {
          display: none;
        }

        .pe-off-lg {
          display: none;
        }
      }

      @media (min-width: 769px) and (max-width: 1200px) {
        .pe-sm {
          display: none;
        }

        .pe-hide-md {
          display: none;
        }

        .pe-off-md {
          display: none;
        }
      }

      @media (max-width: 768px) {
        .pe-hide-sm {
          display: none;
        }

        .pe-off-sm {
          display: none;
        }
      }

      

      

      

      
        .pe-all-blue.editing #pext-jw8k5 .pe-preview {
  text-align: center;
  color: #9E9E9E;
}

#pext-jw8k5 {
  opacity: 1;
  margin: 0px;
  padding: 8px 0px 8px 0px;
}

#pext-jw8k5[data-shadow-enable="true"] {
  box-shadow: 5px 5px 5px #333333;
}

#pext-jw8k5[data-border-enable="true"] {
  border-width: 1px;
  border-style: Solid;
  border-color: #333333;
  border-radius: 0px;
  overflow: hidden;
}

#pext-jw8k5[data-background-type="color"] {
  background-color: #FFFFFF;
}

#pext-jw8k5[data-background-type="image"] {
  background-image: url(https://media.pagetify.com/assets/image-default.jpg);
  background-size: cover;
  background-position: center center;
}

<!DOCTYPE html>
<html lang="es">
<head>
  <meta charset="UTF-8" />
  <meta name="viewport" content="width=device-width, initial-scale=1.0" />
  <title>Carpeta de Recursos – Inner Shift</title>
  <style>
    /* ─── TOKENS ─────────────────────────────────────────────── */
    :root {
      --bg:        #0d0d0d;
      --surface:   #141414;
      --border:    #222222;
      --amber:     #f5a623;
      --amber-dim: #c4831a;
      --white:     #f0ede8;
      --muted:     #888888;
      --danger:    #c0392b;
      --success:   #27ae60;
      --radius:    6px;
    }

    /* ─── RESET ──────────────────────────────────────────────── */
    *, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; }
    html { scroll-behavior: smooth; }
    body {
      background: var(--bg);
      color: var(--white);
      font-family: -apple-system, BlinkMacSystemFont, 'Helvetica Neue', Arial, sans-serif;
      font-size: 16px;
      line-height: 1.6;
      min-height: 100vh;
    }
    img { display: block; max-width: 100%; }
    a { color: var(--amber); text-decoration: none; }

    /* ─── LAYOUT ─────────────────────────────────────────────── */
    .page {
      max-width: 680px;
      margin: 0 auto;
      padding: 0 20px 80px;
    }

    /* ─── HEADER ─────────────────────────────────────────────── */
    .site-header {
      padding: 28px 0 0;
      text-align: center;
    }
    .logo {
      font-size: 13px;
      letter-spacing: 0.18em;
      text-transform: uppercase;
      color: var(--muted);
      font-weight: 500;
    }
    .logo span {
      color: var(--white);
    }

    /* ─── HERO ───────────────────────────────────────────────── */
    .hero {
      padding: 56px 0 40px;
      text-align: center;
    }
    .eyebrow {
      display: inline-block;
      font-size: 11px;
      letter-spacing: 0.16em;
      text-transform: uppercase;
      color: var(--amber);
      background: rgba(245,166,35,0.1);
      border: 1px solid rgba(245,166,35,0.25);
      border-radius: 100px;
      padding: 5px 14px;
      margin-bottom: 28px;
    }
    .hero h1 {
      font-size: clamp(28px, 6vw, 44px);
      font-weight: 700;
      line-height: 1.15;
      letter-spacing: -0.02em;
      margin-bottom: 20px;
    }
    .hero h1 em {
      font-style: normal;
      color: var(--amber);
    }
    .hero p.subtitle {
      font-size: 17px;
      color: rgba(240,237,232,0.7);
      max-width: 520px;
      margin: 0 auto 0;
      line-height: 1.65;
    }

    /* ─── WHAT'S INSIDE ──────────────────────────────────────── */
    .inside {
      border: 1px solid var(--border);
      border-radius: var(--radius);
      background: var(--surface);
      padding: 32px 28px;
      margin: 40px 0;
    }
    .inside h2 {
      font-size: 13px;
      letter-spacing: 0.12em;
      text-transform: uppercase;
      color: var(--muted);
      margin-bottom: 20px;
    }
    .items {
      display: flex;
      flex-direction: column;
      gap: 14px;
    }
    .item {
      display: flex;
      align-items: flex-start;
      gap: 14px;
    }
    .item-icon {
      width: 36px;
      height: 36px;
      border-radius: 8px;
      background: rgba(245,166,35,0.12);
      border: 1px solid rgba(245,166,35,0.2);
      display: flex;
      align-items: center;
      justify-content: center;
      flex-shrink: 0;
      font-size: 16px;
    }
    .item-text strong {
      display: block;
      font-size: 14px;
      font-weight: 600;
      color: var(--white);
      margin-bottom: 2px;
    }
    .item-text span {
      font-size: 13px;
      color: var(--muted);
      line-height: 1.4;
    }

    /* ─── DIVIDER ─────────────────────────────────────────────── */
    .divider {
      border: none;
      border-top: 1px solid var(--border);
      margin: 40px 0;
    }

    /* ─── FORM ───────────────────────────────────────────────── */
    .form-section h2 {
      font-size: 22px;
      font-weight: 700;
      margin-bottom: 8px;
      letter-spacing: -0.01em;
    }
    .form-section p.form-sub {
      font-size: 14px;
      color: var(--muted);
      margin-bottom: 28px;
    }

    .field {
      margin-bottom: 16px;
    }
    .field label {
      display: block;
      font-size: 12px;
      font-weight: 600;
      letter-spacing: 0.08em;
      text-transform: uppercase;
      color: var(--muted);
      margin-bottom: 8px;
    }
    .field input {
      width: 100%;
      background: var(--surface);
      border: 1px solid var(--border);
      border-radius: var(--radius);
      padding: 14px 16px;
      font-size: 15px;
      color: var(--white);
      outline: none;
      transition: border-color 0.2s;
      -webkit-appearance: none;
    }
    .field input::placeholder { color: var(--muted); }
    .field input:focus { border-color: var(--amber); }

    .consent {
      display: flex;
      align-items: flex-start;
      gap: 12px;
      margin-bottom: 24px;
      padding: 16px;
      background: rgba(255,255,255,0.03);
      border: 1px solid var(--border);
      border-radius: var(--radius);
    }
    .consent input[type="checkbox"] {
      width: 18px;
      height: 18px;
      flex-shrink: 0;
      accent-color: var(--amber);
      margin-top: 2px;
      cursor: pointer;
    }
    .consent label {
      font-size: 12px;
      color: var(--muted);
      line-height: 1.5;
      cursor: pointer;
    }
    .consent label a { font-size: 12px; }

    .btn-submit {
      width: 100%;
      background: var(--amber);
      color: #0d0d0d;
      font-size: 15px;
      font-weight: 700;
      letter-spacing: 0.04em;
      padding: 16px;
      border: none;
      border-radius: var(--radius);
      cursor: pointer;
      transition: background 0.2s, opacity 0.2s;
    }
    .btn-submit:hover:not(:disabled) { background: var(--amber-dim); }
    .btn-submit:disabled { opacity: 0.5; cursor: not-allowed; }

    /* ─── MESSAGES ───────────────────────────────────────────── */
    .msg {
      display: none;
      padding: 14px 16px;
      border-radius: var(--radius);
      font-size: 14px;
      margin-top: 16px;
      line-height: 1.5;
    }
    .msg.error  { background: rgba(192,57,43,0.15); border: 1px solid rgba(192,57,43,0.35); color: #e74c3c; }
    .msg.success { background: rgba(39,174,96,0.12); border: 1px solid rgba(39,174,96,0.3); color: #2ecc71; }

    /* ─── SUCCESS STATE ──────────────────────────────────────── */
    .success-screen {
      display: none;
      text-align: center;
      padding: 60px 0;
    }
    .success-screen .check {
      font-size: 48px;
      margin-bottom: 20px;
    }
    .success-screen h2 {
      font-size: 26px;
      font-weight: 700;
      margin-bottom: 12px;
    }
    .success-screen p {
      color: var(--muted);
      font-size: 15px;
      max-width: 440px;
      margin: 0 auto;
      line-height: 1.65;
    }

    /* ─── FOOTER ─────────────────────────────────────────────── */
    .footer {
      text-align: center;
      padding-top: 48px;
      font-size: 12px;
      color: rgba(136,136,136,0.5);
    }
    .footer a { color: rgba(136,136,136,0.7); }

    /* ─── RESPONSIVE ─────────────────────────────────────────── */
    @media (max-width: 480px) {
      .inside { padding: 24px 18px; }
      .hero { padding: 44px 0 32px; }
    }
  </style>
</head>
<body>

<div class="page">

  <!-- HEADER -->
  <header class="site-header">
    <div class="logo"><span>Inner</span>Shift</div>
  </header>

  <!-- HERO -->
  <section class="hero">
    <div class="eyebrow">Recurso gratuito</div>
    <h1>Todo lo que necesitas saber<br>para <em>descansar mejor</em>,<br>en un solo lugar.</h1>
    <p class="subtitle">
      Una carpeta con guías, artículos y herramientas sobre ritmo circadiano, luz y entorno nocturno. Sin suscripciones de pago. Solo lo que funciona.
    </p>
  </section>

  <!-- WHAT'S INSIDE -->
  <div class="inside">
    <h2>Qué hay dentro</h2>
    <div class="items">
      <div class="item">
        <div class="item-icon">🕐</div>
        <div class="item-text">
          <strong>Tu reloj interno explicado</strong>
          <span>Qué es el ritmo circadiano y por qué lo que haces por la noche lo altera más de lo que crees.</span>
        </div>
      </div>
      <div class="item">
        <div class="item-icon">💡</div>
        <div class="item-text">
          <strong>Luz azul y melatonina</strong>
          <span>Cómo la luz de tus pantallas bloquea la señal de sueño, con referencias científicas reales.</span>
        </div>
      </div>
      <div class="item">
        <div class="item-icon">🌙</div>
        <div class="item-text">
          <strong>Entorno nocturno</strong>
          <span>Lo que puedes cambiar en tu casa esta noche mismo para que tu cuerpo entienda que es hora de dormir.</span>
        </div>
      </div>
      <div class="item">
        <div class="item-icon">🔧</div>
        <div class="item-text">
          <strong>Herramientas que ayudan</strong>
          <span>Qué funciona, qué no, y en qué momento del día tiene sentido usar cada cosa.</span>
        </div>
      </div>
      <div class="item">
        <div class="item-icon">📚</div>
        <div class="item-text">
          <strong>Lecturas y referencias</strong>
          <span>Los libros, podcasts y estudios en los que nos basamos. Para que lo compruebes tú mismo.</span>
        </div>
      </div>
    </div>
  </div>

  <hr class="divider" />

  <!-- FORM -->
  <div id="form-wrapper">
    <section class="form-section">
      <h2>Consigue acceso gratis</h2>
      <p class="form-sub">Te la enviamos al correo. Sin spam, sin trucos.</p>

      <div class="field">
        <label for="name">Nombre</label>
        <input type="text" id="name" name="name" placeholder="Tu nombre" autocomplete="given-name" />
      </div>

      <div class="field">
        <label for="email">Correo electrónico</label>
        <input type="email" id="email" name="email" placeholder="tu@email.com" autocomplete="email" />
      </div>

      <div class="consent">
        <input type="checkbox" id="consent" name="consent" />
        <label for="consent">
          Acepto recibir la carpeta de recursos y comunicaciones de Inner Shift sobre sueño y salud circadiana.
          Puedo darme de baja cuando quiera. Consulta nuestra
          <a href="https://innershift.es/policies/privacy-policy" target="_blank">política de privacidad</a>.
        </label>
      </div>

      <button class="btn-submit" id="btn-submit" onclick="handleSubmit()">
        Quiero la carpeta →
      </button>

      <div class="msg error" id="msg-error"></div>
      <div class="msg success" id="msg-success"></div>
    </section>
  </div>

  <!-- SUCCESS STATE -->
  <div class="success-screen" id="success-screen">
    <div class="check">✦</div>
    <h2>¡Ya está en camino!</h2>
    <p>
      Revisa tu bandeja de entrada. En unos minutos recibirás la carpeta de recursos con todo lo que necesitas para empezar.
    </p>
  </div>

  <!-- FOOTER -->
  <footer class="footer">
    <p>© Inner Shift 2026 &nbsp;·&nbsp; <a href="https://innershift.es/policies/privacy-policy" target="_blank">Privacidad</a></p>
  </footer>

</div>

<script>
  /* ─────────────────────────────────────────────────────────────
   * CONFIGURACIÓN KLAVIYO
   * ─ Rellena estos dos valores con tu consultor antes de publicar
   * ─────────────────────────────────────────────────────────────
   *
   * KLAVIYO_COMPANY_ID  →  Tu "Public API Key" (también llamada Company ID)
   *                         Se encuentra en: Klaviyo > Settings > API Keys
   *                         Formato: 6 caracteres, ej. "AbCd12"
   *
   * KLAVIYO_LIST_ID     →  El ID de la lista donde quieres suscribir los leads
   *                         Se encuentra en: Klaviyo > Lists & Segments > [tu lista] > Settings
   *                         Formato: 6 caracteres, ej. "XyZ123"
   * ─────────────────────────────────────────────────────────────
   */
  const KLAVIYO_COMPANY_ID = 'XXXXXXXX';  // ← REEMPLAZAR
  const KLAVIYO_LIST_ID    = 'XXXXXX';    // ← REEMPLAZAR

  async function handleSubmit() {
    const nameEl    = document.getElementById('name');
    const emailEl   = document.getElementById('email');
    const consentEl = document.getElementById('consent');
    const btn       = document.getElementById('btn-submit');
    const msgError  = document.getElementById('msg-error');
    const msgOk     = document.getElementById('msg-success');

    // Reset mensajes
    msgError.style.display  = 'none';
    msgOk.style.display     = 'none';

    const name    = nameEl.value.trim();
    const email   = emailEl.value.trim();
    const consent = consentEl.checked;

    // Validaciones
    if (!name) {
      showError('Por favor, escribe tu nombre.'); nameEl.focus(); return;
    }
    if (!email || !/^[^\s@]+@[^\s@]+\.[^\s@]+$/.test(email)) {
      showError('Introduce un correo electrónico válido.'); emailEl.focus(); return;
    }
    if (!consent) {
      showError('Acepta las condiciones para continuar.'); return;
    }

    // Envío
    btn.disabled     = true;
    btn.textContent  = 'Enviando…';

    try {
      const payload = {
        data: {
          type: 'profile-subscription-bulk-create-job',
          attributes: {
            profiles: {
              data: [
                {
                  type: 'profile',
                  attributes: {
                    email: email,
                    first_name: name,
                    properties: {
                      fuente: 'landing-carpeta-recursos',
                      consentimiento_marketing: true
                    }
                  }
                }
              ]
            },
            historical_import: false
          },
          relationships: {
            list: {
              data: {
                type: 'list',
                id: KLAVIYO_LIST_ID
              }
            }
          }
        }
      };

      const res = await fetch(
        `https://a.klaviyo.com/api/profile-subscription-bulk-create-jobs/`,
        {
          method: 'POST',
          headers: {
            'Content-Type': 'application/json',
            'revision': '2024-02-15',
            'Authorization': `Klaviyo-API-Key ${KLAVIYO_COMPANY_ID}`
          },
          body: JSON.stringify(payload)
        }
      );

      if (res.ok || res.status === 202) {
        // ✅ Éxito → mostrar pantalla de confirmación
        document.getElementById('form-wrapper').style.display   = 'none';
        document.getElementById('success-screen').style.display = 'block';
      } else {
        const err = await res.json().catch(() => ({}));
        console.error('Klaviyo error:', err);
        showError('Algo ha fallado. Inténtalo de nuevo o escríbenos a hola@innershift.es');
        btn.disabled    = false;
        btn.textContent = 'Quiero la carpeta →';
      }
    } catch (e) {
      console.error(e);
      showError('Error de red. Comprueba tu conexión e inténtalo de nuevo.');
      btn.disabled    = false;
      btn.textContent = 'Quiero la carpeta →';
    }
  }

  function showError(msg) {
    const el = document.getElementById('msg-error');
    el.textContent     = msg;
    el.style.display   = 'block';
  }

  // Enter en inputs → enviar
  ['name','email'].forEach(id => {
    document.getElementById(id).addEventListener('keydown', e => {
      if (e.key === 'Enter') handleSubmit();
    });
  });
</script>

</body>
</html>
        
                @media (min-width: 769px) and (max-width: 1200px) {
                  /* ─── RESPONSIVE ─────────────────────────────────────────── */
    
  </style>
</head>
<body>

<div class="page">

  <!-- HEADER -->
  <header class="site-header">
    <div class="logo"><span>Inner</span>Shift</div>
  </header>

  <!-- HERO -->
  <section class="hero">
    <div class="eyebrow">Recurso gratuito</div>
    <h1>Todo lo que necesitas saber<br>para <em>descansar mejor</em>,<br>en un solo lugar.</h1>
    <p class="subtitle">
      Una carpeta con guías, artículos y herramientas sobre ritmo circadiano, luz y entorno nocturno. Sin suscripciones de pago. Solo lo que funciona.
    </p>
  </section>

  <!-- WHAT'S INSIDE -->
  <div class="inside">
    <h2>Qué hay dentro</h2>
    <div class="items">
      <div class="item">
        <div class="item-icon">🕐</div>
        <div class="item-text">
          <strong>Tu reloj interno explicado</strong>
          <span>Qué es el ritmo circadiano y por qué lo que haces por la noche lo altera más de lo que crees.</span>
        </div>
      </div>
      <div class="item">
        <div class="item-icon">💡</div>
        <div class="item-text">
          <strong>Luz azul y melatonina</strong>
          <span>Cómo la luz de tus pantallas bloquea la señal de sueño, con referencias científicas reales.</span>
        </div>
      </div>
      <div class="item">
        <div class="item-icon">🌙</div>
        <div class="item-text">
          <strong>Entorno nocturno</strong>
          <span>Lo que puedes cambiar en tu casa esta noche mismo para que tu cuerpo entienda que es hora de dormir.</span>
        </div>
      </div>
      <div class="item">
        <div class="item-icon">🔧</div>
        <div class="item-text">
          <strong>Herramientas que ayudan</strong>
          <span>Qué funciona, qué no, y en qué momento del día tiene sentido usar cada cosa.</span>
        </div>
      </div>
      <div class="item">
        <div class="item-icon">📚</div>
        <div class="item-text">
          <strong>Lecturas y referencias</strong>
          <span>Los libros, podcasts y estudios en los que nos basamos. Para que lo compruebes tú mismo.</span>
        </div>
      </div>
    </div>
  </div>

  <hr class="divider" />

  <!-- FORM -->
  <div id="form-wrapper">
    <section class="form-section">
      <h2>Consigue acceso gratis</h2>
      <p class="form-sub">Te la enviamos al correo. Sin spam, sin trucos.</p>

      <div class="field">
        <label for="name">Nombre</label>
        <input type="text" id="name" name="name" placeholder="Tu nombre" autocomplete="given-name" />
      </div>

      <div class="field">
        <label for="email">Correo electrónico</label>
        <input type="email" id="email" name="email" placeholder="tu@email.com" autocomplete="email" />
      </div>

      <div class="consent">
        <input type="checkbox" id="consent" name="consent" />
        <label for="consent">
          Acepto recibir la carpeta de recursos y comunicaciones de Inner Shift sobre sueño y salud circadiana.
          Puedo darme de baja cuando quiera. Consulta nuestra
          <a href="https://innershift.es/policies/privacy-policy" target="_blank">política de privacidad</a>.
        </label>
      </div>

      <button class="btn-submit" id="btn-submit" onclick="handleSubmit()">
        Quiero la carpeta →
      </button>

      <div class="msg error" id="msg-error"></div>
      <div class="msg success" id="msg-success"></div>
    </section>
  </div>

  <!-- SUCCESS STATE -->
  <div class="success-screen" id="success-screen">
    <div class="check">✦</div>
    <h2>¡Ya está en camino!</h2>
    <p>
      Revisa tu bandeja de entrada. En unos minutos recibirás la carpeta de recursos con todo lo que necesitas para empezar.
    </p>
  </div>

  <!-- FOOTER -->
  <footer class="footer">
    <p>© Inner Shift 2026 &nbsp;·&nbsp; <a href="https://innershift.es/policies/privacy-policy" target="_blank">Privacidad</a></p>
  </footer>

</div>

<script>
  /* ─────────────────────────────────────────────────────────────
   * CONFIGURACIÓN KLAVIYO
   * ─ Rellena estos dos valores con tu consultor antes de publicar
   * ─────────────────────────────────────────────────────────────
   *
   * KLAVIYO_COMPANY_ID  →  Tu "Public API Key" (también llamada Company ID)
   *                         Se encuentra en: Klaviyo > Settings > API Keys
   *                         Formato: 6 caracteres, ej. "AbCd12"
   *
   * KLAVIYO_LIST_ID     →  El ID de la lista donde quieres suscribir los leads
   *                         Se encuentra en: Klaviyo > Lists & Segments > [tu lista] > Settings
   *                         Formato: 6 caracteres, ej. "XyZ123"
   * ─────────────────────────────────────────────────────────────
   */
  const KLAVIYO_COMPANY_ID = 'XXXXXXXX';  // ← REEMPLAZAR
  const KLAVIYO_LIST_ID    = 'XXXXXX';    // ← REEMPLAZAR

  async function handleSubmit() {
    const nameEl    = document.getElementById('name');
    const emailEl   = document.getElementById('email');
    const consentEl = document.getElementById('consent');
    const btn       = document.getElementById('btn-submit');
    const msgError  = document.getElementById('msg-error');
    const msgOk     = document.getElementById('msg-success');

    // Reset mensajes
    msgError.style.display  = 'none';
    msgOk.style.display     = 'none';

    const name    = nameEl.value.trim();
    const email   = emailEl.value.trim();
    const consent = consentEl.checked;

    // Validaciones
    if (!name) {
      showError('Por favor, escribe tu nombre.'); nameEl.focus(); return;
    }
                  }
                }
            }
          }
        }
      }
    }
  });
</script>

</body>
</html>
                }
              
        
                @media (max-width: 768px) {
                  /* ─── RESPONSIVE ─────────────────────────────────────────── */
    
  </style>
</head>
<body>

<div class="page">

  <!-- HEADER -->
  <header class="site-header">
    <div class="logo"><span>Inner</span>Shift</div>
  </header>

  <!-- HERO -->
  <section class="hero">
    <div class="eyebrow">Recurso gratuito</div>
    <h1>Todo lo que necesitas saber<br>para <em>descansar mejor</em>,<br>en un solo lugar.</h1>
    <p class="subtitle">
      Una carpeta con guías, artículos y herramientas sobre ritmo circadiano, luz y entorno nocturno. Sin suscripciones de pago. Solo lo que funciona.
    </p>
  </section>

  <!-- WHAT'S INSIDE -->
  <div class="inside">
    <h2>Qué hay dentro</h2>
    <div class="items">
      <div class="item">
        <div class="item-icon">🕐</div>
        <div class="item-text">
          <strong>Tu reloj interno explicado</strong>
          <span>Qué es el ritmo circadiano y por qué lo que haces por la noche lo altera más de lo que crees.</span>
        </div>
      </div>
      <div class="item">
        <div class="item-icon">💡</div>
        <div class="item-text">
          <strong>Luz azul y melatonina</strong>
          <span>Cómo la luz de tus pantallas bloquea la señal de sueño, con referencias científicas reales.</span>
        </div>
      </div>
      <div class="item">
        <div class="item-icon">🌙</div>
        <div class="item-text">
          <strong>Entorno nocturno</strong>
          <span>Lo que puedes cambiar en tu casa esta noche mismo para que tu cuerpo entienda que es hora de dormir.</span>
        </div>
      </div>
      <div class="item">
        <div class="item-icon">🔧</div>
        <div class="item-text">
          <strong>Herramientas que ayudan</strong>
          <span>Qué funciona, qué no, y en qué momento del día tiene sentido usar cada cosa.</span>
        </div>
      </div>
      <div class="item">
        <div class="item-icon">📚</div>
        <div class="item-text">
          <strong>Lecturas y referencias</strong>
          <span>Los libros, podcasts y estudios en los que nos basamos. Para que lo compruebes tú mismo.</span>
        </div>
      </div>
    </div>
  </div>

  <hr class="divider" />

  <!-- FORM -->
  <div id="form-wrapper">
    <section class="form-section">
      <h2>Consigue acceso gratis</h2>
      <p class="form-sub">Te la enviamos al correo. Sin spam, sin trucos.</p>

      <div class="field">
        <label for="name">Nombre</label>
        <input type="text" id="name" name="name" placeholder="Tu nombre" autocomplete="given-name" />
      </div>

      <div class="field">
        <label for="email">Correo electrónico</label>
        <input type="email" id="email" name="email" placeholder="tu@email.com" autocomplete="email" />
      </div>

      <div class="consent">
        <input type="checkbox" id="consent" name="consent" />
        <label for="consent">
          Acepto recibir la carpeta de recursos y comunicaciones de Inner Shift sobre sueño y salud circadiana.
          Puedo darme de baja cuando quiera. Consulta nuestra
          <a href="https://innershift.es/policies/privacy-policy" target="_blank">política de privacidad</a>.
        </label>
      </div>

      <button class="btn-submit" id="btn-submit" onclick="handleSubmit()">
        Quiero la carpeta →
      </button>

      <div class="msg error" id="msg-error"></div>
      <div class="msg success" id="msg-success"></div>
    </section>
  </div>

  <!-- SUCCESS STATE -->
  <div class="success-screen" id="success-screen">
    <div class="check">✦</div>
    <h2>¡Ya está en camino!</h2>
    <p>
      Revisa tu bandeja de entrada. En unos minutos recibirás la carpeta de recursos con todo lo que necesitas para empezar.
    </p>
  </div>

  <!-- FOOTER -->
  <footer class="footer">
    <p>© Inner Shift 2026 &nbsp;·&nbsp; <a href="https://innershift.es/policies/privacy-policy" target="_blank">Privacidad</a></p>
  </footer>

</div>

<script>
  /* ─────────────────────────────────────────────────────────────
   * CONFIGURACIÓN KLAVIYO
   * ─ Rellena estos dos valores con tu consultor antes de publicar
   * ─────────────────────────────────────────────────────────────
   *
   * KLAVIYO_COMPANY_ID  →  Tu "Public API Key" (también llamada Company ID)
   *                         Se encuentra en: Klaviyo > Settings > API Keys
   *                         Formato: 6 caracteres, ej. "AbCd12"
   *
   * KLAVIYO_LIST_ID     →  El ID de la lista donde quieres suscribir los leads
   *                         Se encuentra en: Klaviyo > Lists & Segments > [tu lista] > Settings
   *                         Formato: 6 caracteres, ej. "XyZ123"
   * ─────────────────────────────────────────────────────────────
   */
  const KLAVIYO_COMPANY_ID = 'XXXXXXXX';  // ← REEMPLAZAR
  const KLAVIYO_LIST_ID    = 'XXXXXX';    // ← REEMPLAZAR

  async function handleSubmit() {
    const nameEl    = document.getElementById('name');
    const emailEl   = document.getElementById('email');
    const consentEl = document.getElementById('consent');
    const btn       = document.getElementById('btn-submit');
    const msgError  = document.getElementById('msg-error');
    const msgOk     = document.getElementById('msg-success');

    // Reset mensajes
    msgError.style.display  = 'none';
    msgOk.style.display     = 'none';

    const name    = nameEl.value.trim();
    const email   = emailEl.value.trim();
    const consent = consentEl.checked;

    // Validaciones
    if (!name) {
      showError('Por favor, escribe tu nombre.'); nameEl.focus(); return;
    }
                  }
                }
            }
          }
        }
      }
    }
  });
</script>

</body>
</html>
                }
              
        
        

          .pe-all-blue {
  padding: 0px;
  font-family: inherit;
}

.pe-all-blue a {
  color: #2196F3;
  text-decoration: none;
}

.pe-all-blue a:hover {
  color: #2196F3CC;
  text-decoration: none;
}
          
          
        

          
          
          
        

          .pe-announcement-bar {
  position: relative;
  display: flex;
  padding: 5px 0px 5px 0px;
  background-color: #4CAF50;
  justify-content: center;
  align-items: center;
  z-index: 9999;
}

.pe-announcement-bar.pe-ab-sticky {
  position: relative !important;
  top: 0;
  z-index: 9999;
  transition: top 0.3s ease-in-out;
}

.pe-announcement-bar.pe-ab-sticky.pe-ab-on-scroll-up {
  top: 0px;
}

.pe-announcement-bar.pe-ab-sticky.pe-ab-on-scroll-down {
  top: 0px;
}

.pe-announcement-bar.pad-right {
  padding-right: 48px;
}

.pe-announcement-bar .pe-announcement-content {
  display: grid;
  grid-auto-flow: column;
  align-items: center;
  justify-content: center;
  margin:0px 40px 0px 40px;
  width: 100%;
}

.pe-announcement-bar .pe-announcement-message {
  font-family: inherit;
  color: #333333;
  font-size: 16px;
  line-height: 1.5;
  letter-spacing: 1px;
  word-spacing: 0px;
  text-align: left;
  font-weight: normal;
}

.pe-announcement-bar .pe-announcement-button {
  margin-left: 12px;
  flex-shrink: 0;
}

.pe-announcement-bar .pe-announcement-button button {
  font-size: 16px;
  padding: 8px 12px;
  font-family: inherit;
  color: #333333;
  background-color: #E0E0E0;
  border: none;
  border-radius: 5px;
  cursor: pointer;
  line-height: 1.25;
  letter-spacing: 1px;
  word-spacing: 0px;
  text-align: left;
  font-weight: normal;
  
}

.pe-announcement-bar.pe-ab-btn-effect .pe-announcement-button button:hover {
  color: #333333;
  background-color: #ffffff;
  transition: color , background-color ;
}

.pe-announcement-bar .pe-annoucement-close {
  position: absolute;
  right: 16px;
  font-size: 13px;
  color: #333333;
  cursor: pointer;
}

.pe-announcement-bar .pe-annoucement-close:hover {
  opacity: 0.8;
}
          
          
        

          .pe-currency-converter {
  font-family: inherit;
  color: #333333;
  background-color: white;
  border: 1px solid #E0E0E0;
  border-radius: 5px;
  position: fixed;
  left: 24px;
  bottom: 24px;
  box-shadow: 0px 0px 5px #00000033;
  z-index: 99999999;
}

.pe-currency-converter .pe-active-currency {
  display: flex;
  align-items: center;
  white-space: nowrap;
  padding: 8px 12px;
  cursor: pointer;
}

.pe-currency-converter .pe-active-currency .pe-currency-caret {
  margin-left: 8px;
  transition: all 0.2s;
}

.pe-currency-converter .pe-available-currencies {
  background-color: white;
  position: absolute;
  bottom: 48px;
  border: 1px solid #E0E0E0;
  border-radius: 5px;
  padding: 8px 0;
  box-shadow: 0px 0px 5px #00000033;
  display: none;
}

.pe-currency-converter .pe-available-currency {
  display: flex;
  align-items: center;
  white-space: nowrap;
  padding: 8px 12px;
  cursor: pointer;
}

.pe-currency-converter .pe-available-currency:hover {
  background-color: #E0E0E080;
}

.pe-currency-converter .pe-currency-flag {
  display: inline-block;
}

.pe-currency-converter .pe-currency-name {
  margin-left: 12px;
}

.pe-currency-converter .pe-active-currency.active .pe-currency-caret {
  transform: rotate(180deg);
}

.pe-currency-converter .pe-active-currency.active + .pe-available-currencies {
  display: block;
}
          
          
        

          .pe-addon-wrapper .pe-addon .pe-back-to-top {
  position: fixed;
  right: 24px;
  bottom: 80px;
  display: flex;
  justify-content: center;
  align-items: center;
  text-align: center;
  padding: 15px;
  background-color: #DCDCDC;
  color: #242424;
  font-size: 24px;
  border-radius: 3px;
  visibility: visible;
  opacity: 1;
  transition: background-color .3s, opacity .5s, visibility .5s, padding .5s;
  text-decoration: none !important;
  z-index: 9999;
}

.pe-addon-wrapper .pe-addon .pe-back-to-top .pe-back-to-top-icon{ 
  font-size: 24px;
}

.pe-addon-wrapper[data-back-to-top-position="center"] .pe-addon .pe-back-to-top {
  right: calc(100%/2);
  transform: translateX(50%);
}

.pe-addon-wrapper[data-back-to-top-position="left"] .pe-addon .pe-back-to-top {
  right: inherit;
  left: 24px;
}

.pe-addon-wrapper .pe-addon .pe-back-to-top:hover {
  cursor: pointer;
  background-color: #242424;
  color: #FFFFFF;
}
          
          
        

      