:root{
  --ground:#E4E6E1;
  --paper:#F3F4F0;
  --paper-2:#ECEEE9;
  --ink:#15181C;
  --ink-soft:#4C545E;
  --indigo:#24365E;
  --indigo-ink:#16223C;
  --thread:#B95C1C;
  --edge:#C7CBC4;
  --shadow:rgba(21,24,28,.10);
}
@media (prefers-color-scheme: dark){
  :root:not([data-theme="light"]){
    --ground:#12161F;
    --paper:#19202C;
    --paper-2:#1F2733;
    --ink:#E8E9E4;
    --ink-soft:#9BA5B3;
    --indigo:#8FA9DA;
    --indigo-ink:#C3D2EE;
    --thread:#E8963F;
    --edge:#2E3948;
    --shadow:rgba(0,0,0,.45);
  }
}
:root[data-theme="dark"]{
  --ground:#12161F;
  --paper:#19202C;
  --paper-2:#1F2733;
  --ink:#E8E9E4;
  --ink-soft:#9BA5B3;
  --indigo:#8FA9DA;
  --indigo-ink:#C3D2EE;
  --thread:#E8963F;
  --edge:#2E3948;
  --shadow:rgba(0,0,0,.45);
}

*{box-sizing:border-box}
body{
  margin:0;
  background:var(--ground);
  color:var(--ink);
  font-family:"Newsreader",Georgia,"Times New Roman",serif;
  font-size:18px;
  line-height:1.6;
  -webkit-font-smoothing:antialiased;
}
h1,h2,h3{font-family:"Archivo","Helvetica Neue",Arial,sans-serif;text-wrap:balance;margin:0}
p{margin:0}
a{color:inherit}
:focus-visible{outline:2px solid var(--thread);outline-offset:3px;border-radius:2px}

.wrap{width:min(1120px,100% - 2.5rem);margin-inline:auto}
.mono{
  font-family:"DM Mono",ui-monospace,"SFMono-Regular",Menlo,monospace;
  font-size:.72rem;letter-spacing:.16em;text-transform:uppercase;
}
.stitch{
  height:2px;border:0;margin:0;
  background-image:repeating-linear-gradient(90deg,var(--thread) 0 11px,transparent 11px 20px);
  opacity:.55;
}

/* ── barra superior ─────────────────────────────── */
.top{display:flex;align-items:baseline;justify-content:space-between;gap:1rem;padding:1.6rem 0 1.4rem;flex-wrap:wrap}
.brand{
  font-family:"Archivo","Helvetica Neue",Arial,sans-serif;
  font-weight:800;font-size:1.05rem;letter-spacing:.32em;text-transform:uppercase;
}
.top .mono{color:var(--ink-soft)}

/* ── hero ───────────────────────────────────────── */
.hero{display:grid;grid-template-columns:1.1fr .9fr;gap:clamp(2rem,5vw,4.5rem);align-items:start;padding:clamp(2.5rem,7vw,5rem) 0 clamp(3rem,7vw,5.5rem)}
.eyebrow{color:var(--thread);display:block;margin-bottom:1.6rem}
.hero h1{
  font-weight:800;font-size:clamp(2.5rem,6.4vw,4.3rem);line-height:.98;letter-spacing:-.025em;
}
.hero h1 em{
  font-family:"Newsreader",Georgia,serif;font-style:italic;font-weight:400;
  color:var(--thread);letter-spacing:-.01em;
}
.lede{margin-top:1.6rem;max-width:34ch;font-size:1.18rem;color:var(--ink-soft)}
.lede strong{color:var(--ink);font-weight:500}

/* ── etiqueta colgante ──────────────────────────── */
.tag{
  position:relative;background:var(--paper);border:1px solid var(--edge);border-radius:5px;
  padding:2.6rem 1.9rem 1.7rem;box-shadow:0 14px 34px -20px var(--shadow);
  transform:rotate(-1.1deg);
}
.tag::before{
  content:"";position:absolute;inset:9px;border:1.5px dashed var(--thread);opacity:.42;border-radius:3px;pointer-events:none;
}
.hole{
  position:absolute;top:14px;left:50%;transform:translateX(-50%);
  width:15px;height:15px;border-radius:50%;background:var(--ground);border:1px solid var(--edge);
}
.tag h2{font-size:1.15rem;font-weight:600;letter-spacing:-.01em}
.tag .mono{color:var(--ink-soft)}
form{display:flex;flex-direction:column;gap:.7rem;margin-top:1.15rem}
label{color:var(--ink-soft)}
input[type="email"],input[type="text"]:not(.hp){
  font-family:"DM Mono",ui-monospace,Menlo,monospace;font-size:.95rem;
  padding:.85rem .9rem;border:1px solid var(--edge);border-radius:3px;
  background:var(--paper-2);color:var(--ink);width:100%;
}
input[type="email"]::placeholder,input[type="text"]::placeholder{color:var(--ink-soft);opacity:.7}
button{
  font-family:"DM Mono",ui-monospace,Menlo,monospace;font-size:.78rem;letter-spacing:.14em;text-transform:uppercase;
  padding:.9rem 1rem;border:1px solid var(--indigo-ink);border-radius:3px;
  background:var(--indigo);color:var(--ground);cursor:pointer;
  transition:transform .16s ease,box-shadow .16s ease;
}
button:hover{transform:translate(-1px,-1px);box-shadow:3px 3px 0 var(--thread)}
button:active{transform:translate(0,0);box-shadow:none}
.hp{position:absolute;left:-9999px}
.fine{font-size:.92rem;color:var(--ink-soft);line-height:1.45}
.status{font-size:.95rem;min-height:1.2em}
.status[data-state="error"]{color:var(--thread)}
button[disabled]{opacity:.7;cursor:wait}
.done{display:none;align-items:flex-start;gap:.6rem;margin-top:1.15rem}
.done svg{flex:none;margin-top:.22rem;color:var(--thread)}
.done-text{display:grid;gap:.3rem;min-width:0}
.done-title{
  font-family:"Archivo","Helvetica Neue",Arial,sans-serif;
  font-size:1.05rem;font-weight:600;letter-spacing:-.01em;line-height:1.25;color:var(--ink);
}
.done-sub{
  font-family:"DM Mono",ui-monospace,"SFMono-Regular",Menlo,monospace;
  font-size:.82rem;line-height:1.5;color:var(--ink-soft);overflow-wrap:anywhere;
}
.tag:focus{outline:none}
.tag[data-done="1"] form,.tag[data-done="1"] .fine{display:none}
.tag[data-done="1"] .done{display:flex;animation:rise .4s ease}
@keyframes rise{from{opacity:0;transform:translateY(6px)}to{opacity:1;transform:translateY(0)}}
.specs{list-style:none;margin:1.5rem 0 0;padding:1.1rem 0 0;border-top:1px solid var(--edge);display:grid;gap:.45rem}
.specs li{display:flex;justify-content:space-between;gap:1rem;color:var(--ink-soft)}
.specs li span:last-child{color:var(--ink)}

/* ── secciones ──────────────────────────────────── */
section{padding:clamp(3rem,7vw,5rem) 0}
.head{display:grid;gap:.9rem;max-width:52ch;margin-bottom:clamp(2rem,4vw,3rem)}
.head h2{font-size:clamp(1.7rem,3.4vw,2.4rem);font-weight:800;letter-spacing:-.02em;line-height:1.05}
.head p{color:var(--ink-soft)}
.grid3{display:grid;grid-template-columns:repeat(3,1fr);gap:clamp(1.6rem,3.5vw,3rem)}
.card h3{font-size:1.12rem;font-weight:600;margin:.9rem 0 .5rem;letter-spacing:-.01em}
.card p{color:var(--ink-soft);font-size:1rem}
.card svg{display:block;color:var(--indigo)}
.step{border-top:2px solid var(--edge);padding-top:1.1rem}
.step .num{
  font-family:"DM Mono",ui-monospace,Menlo,monospace;font-variant-numeric:tabular-nums;
  color:var(--thread);font-size:.85rem;letter-spacing:.1em;
}
.step h3{margin:.5rem 0 .5rem}

/* ── cierre ─────────────────────────────────────── */
.close{text-align:center;display:grid;gap:1.4rem;justify-items:center;padding-bottom:clamp(3rem,7vw,5rem)}
.close h2{font-size:clamp(1.8rem,4vw,2.7rem);font-weight:800;letter-spacing:-.02em;max-width:16ch}
.close p{color:var(--ink-soft);max-width:44ch}
.close a.cta{
  font-family:"DM Mono",ui-monospace,Menlo,monospace;font-size:.78rem;letter-spacing:.14em;text-transform:uppercase;
  text-decoration:none;padding:.9rem 1.4rem;border:1px solid var(--indigo-ink);border-radius:3px;
  background:var(--indigo);color:var(--ground);transition:transform .16s ease,box-shadow .16s ease;
}
.close a.cta:hover{transform:translate(-1px,-1px);box-shadow:3px 3px 0 var(--thread)}
footer{display:flex;justify-content:space-between;gap:1rem;flex-wrap:wrap;padding:1.6rem 0 2.4rem;color:var(--ink-soft)}
footer a{text-decoration-color:var(--thread);text-underline-offset:3px}

/* ── movimiento ─────────────────────────────────── */
.reveal{opacity:0;transform:translateY(14px);transition:opacity .7s ease,transform .7s ease}
.reveal.seen{opacity:1;transform:none}
@media (prefers-reduced-motion:reduce){
  .reveal{opacity:1;transform:none;transition:none}
  button,.close a.cta{transition:none}
  .tag[data-done="1"] .done{animation:none}
}
@media (max-width:820px){
  .hero{grid-template-columns:1fr;padding-top:1.5rem}
  .tag{transform:none}
  .grid3{grid-template-columns:1fr;gap:2rem}
}