
<style>
  @import url('https://fonts.googleapis.com/css2?family=Libre+Baskerville:ital,wght@0,400;0,700;1,400&family=DM+Sans:wght@300;400;500&display=swap');
  .w{background:#F0EDE4;padding:2.5rem 2rem 3rem;font-family:'DM Sans',sans-serif;color:#1a1a18;border-radius:16px}
  .tag{display:inline-block;font-size:11px;font-weight:500;letter-spacing:.12em;text-transform:uppercase;color:#fff;background:#1D9E75;border-radius:20px;padding:.25rem .75rem;margin-bottom:1rem}
  .title{font-family:'Libre Baskerville',serif;font-size:32px;font-weight:700;line-height:1.15;margin:0 0 .15rem;color:#1a1a18}
  .title-em{font-style:italic;color:#1D9E75}
  .intro{font-size:13px;color:#5F5E5A;line-height:1.7;margin:.75rem 0 1.25rem;max-width:420px}
  .task-box{background:#fff;border:0.5px solid #D3D1C7;border-left:3px solid #1D9E75;border-radius:0 10px 10px 0;padding:1rem 1.2rem;margin-bottom:1.75rem}
  .task-lbl{font-size:12px;font-weight:500;letter-spacing:.06em;text-transform:uppercase;color:#1D9E75;margin-bottom:.5rem;display:block}
  .task-txt{font-size:13px;line-height:1.7;color:#2C2C2A;margin:0 0 .5rem}
  .task-link{font-size:12px;color:#1D9E75;text-decoration:underline;text-underline-offset:3px}
  .divider{border:none;border-top:0.5px solid #C5C3BA;margin:1.75rem 0}
  .sec-lbl{font-size:10px;font-weight:500;letter-spacing:.14em;text-transform:uppercase;color:#888780;display:flex;align-items:center;gap:10px;margin-bottom:1.75rem}
  .sec-lbl::after{content:'';flex:1;height:.5px;background:#C5C3BA}
  .qb{margin-bottom:1.75rem}
  .qn{font-size:11px;color:#888780;margin-bottom:.3rem}
  .ql{font-family:'Libre Baskerville',serif;font-size:15px;font-weight:400;color:#1a1a18;margin:0 0 .6rem;line-height:1.4}
  .ta{width:100%;min-height:72px;background:#FAF9F5;border:0.5px solid #C5C3BA;border-radius:8px;padding:.65rem .85rem;font-family:'DM Sans',sans-serif;font-size:13px;color:#1a1a18;resize:vertical;box-sizing:border-box;line-height:1.6;outline:none}
  .ta:focus{border-color:#1D9E75;background:#fff}
  .scale-row{display:flex;gap:7px;flex-wrap:wrap}
  .sbtn{width:38px;height:38px;border:0.5px solid #C5C3BA;border-radius:8px;background:#FAF9F5;font-size:13px;color:#5F5E5A;cursor:pointer;display:flex;align-items:center;justify-content:center;font-family:'DM Sans',sans-serif}
  .sbtn:hover{border-color:#1D9E75;color:#1D9E75}
  .scale-lbls{display:flex;justify-content:space-between;margin-top:5px;font-size:10px;color:#888780}
  .cbtn{padding:0 1rem;height:38px;border:0.5px solid #C5C3BA;border-radius:8px;background:#FAF9F5;font-size:13px;color:#5F5E5A;cursor:pointer;font-family:'DM Sans',sans-serif;white-space:nowrap}
  .cbtn:hover{border-color:#1D9E75;color:#1D9E75}
  .footer-title{font-family:'Libre Baskerville',serif;font-size:18px;font-weight:700;color:#1a1a18;margin-bottom:.75rem;display:block;line-height:1.3}
  .inp{width:100%;background:#FAF9F5;border:0.5px solid #C5C3BA;border-radius:8px;padding:.65rem .85rem;font-family:'DM Sans',sans-serif;font-size:13px;color:#1a1a18;box-sizing:border-box;margin-bottom:.5rem;outline:none}
  .inp:focus{border-color:#1D9E75;background:#fff}
  .fhint{font-size:11px;color:#888780;margin-bottom:1rem}
  .submit{width:100%;background:transparent;border:0.5px solid #1a1a18;border-radius:24px;padding:.8rem 1.5rem;font-family:'Libre Baskerville',serif;font-style:italic;font-size:14px;color:#1a1a18;cursor:pointer;letter-spacing:.01em}
  .submit:hover{background:#1a1a18;color:#F0EDE4}
  .row{display:flex;gap:7px;flex-wrap:wrap}
</style>

<div class="w">
  <span class="tag">Seed Hypermedia</span>
  <h1 class="title">Ayúdanos a mejorar<br><span class="title-em">compartiendo tu feedback</span></h1>
  <p class="intro">Estamos construyendo un lugar para crear conocimiento, leer, comentar y conectar — sin un servidor central que lo controle.<br><br>Este test dura unos 8–10 minutos, muchas gracias por tu tiempo.</p>

  <div class="task-box">
    <span class="task-lbl">Tu tarea</span>
    <p class="task-txt">Abre el enlace, echa un vistazo a lo que ves durante un par de minutos y lee lo que te llame la atención. A continuación responde a las preguntas.</p>
    <a href="https://nodos.hyper.media/" class="task-link" target="_blank">↗ Abrir nodos.hyper.media</a>
  </div>

  <hr class="divider">
  <div class="sec-lbl">Tu feedback</div>

  <div class="qb">
    <p class="qn">1 de 8</p>
    <p class="ql">¿Cuál ha sido tu primera impresión? ¿Qué has pensado que era esto?</p>
    <textarea class="ta" placeholder="Lo primero que pensé fue…"></textarea>
  </div>

  <div class="qb">
    <p class="qn">2 de 8</p>
    <p class="ql">¿Qué has pensado que puedes hacer aquí y cómo crees que puedes participar?</p>
    <textarea class="ta" placeholder="Pensé que podía… / No entendí cómo…"></textarea>
  </div>

  <div class="qb">
    <p class="qn">3 de 8</p>
    <p class="ql">Si quisieras empezar o participar en una conversación sobre algo que has leído, ¿cómo lo harías?</p>
    <textarea class="ta" placeholder="Intentaría… / No sé cómo…"></textarea>
  </div>

  <div class="qb">
    <p class="qn">4 de 8</p>
    <p class="ql">Imagina que lees un párrafo de interés y quieres compartirlo con alguien. ¿Cómo lo harías?</p>
    <textarea class="ta" placeholder="Creo que haría… / Buscaría…"></textarea>
  </div>

  <div class="qb">
    <p class="qn">5 de 8</p>
    <p class="ql">¿Qué tan claro te quedó para qué sirve esta herramienta?</p>
    <p style="font-size:11px;color:#888780;margin-bottom:.5rem">1 = nada claro, 5 = completamente obvio</p>
    <div class="scale-row">
      <button class="sbtn">1</button>
      <button class="sbtn">2</button>
      <button class="sbtn">3</button>
      <button class="sbtn">4</button>
      <button class="sbtn">5</button>
    </div>
    <div class="scale-lbls"><span>Nada claro</span><span>Completamente obvio</span></div>
  </div>

  <div class="qb">
    <p class="qn">6 de 8</p>
    <p class="ql">¿Encontraste cómo participar en una conversación?</p>
    <div class="row">
      <button class="cbtn">Sí</button>
      <button class="cbtn">No</button>
      <button class="cbtn">No lo busqué</button>
    </div>
  </div>

  <div class="qb">
    <p class="qn">7 de 8</p>
    <p class="ql">¿Qué cambiarías para que todo tenga más sentido desde el primer momento y te den ganas de explorar e interactuar?</p>
    <textarea class="ta" placeholder="Añadiría… / Quitaría… / Lo primero que mostraría es…"></textarea>
  </div>

  <div class="qb">
    <p class="qn">8 de 8</p>
    <p class="ql">¿Cómo preferirías leer o explorar el contenido?</p>
    <textarea class="ta" placeholder="Me resultaría más fácil si… (p.ej. más visual, más texto, otra forma de navegar…)"></textarea>
  </div>

  <hr class="divider">

  <span class="footer-title">Ya estamos, muchísimas gracias por tu ayuda</span>
  <input class="inp" type="text" placeholder="Tu nombre" />
  <input class="inp" type="text" placeholder="Tu email — si quieres que te contactemos (opcional)" />
  <p class="fhint">Ambos campos son opcionales. Lo importante son tus respuestas.</p>
  <button class="submit">Enviar mi feedback →</button>
</div>
