/* ===========================================================
   Dispute Letter Studio — Landing (kit selector)
   Hereda la identidad de la app: Fraunces / Newsreader / Archivo
   Paleta papel/tinta/rojo legal. Independiente del index.html.
   =========================================================== */
:root{
  --paper:#f4efe4; --paper2:#ece4d4; --ink:#1c2230; --ink2:#3a4254;
  --muted:#8a8170; --line:#cdc2ab; --accent:#9e2b25; --accent2:#7c1f1b;
  --gold:#b08a3e; --ok:#2f6b46; --shadow:0 22px 60px -26px rgba(28,34,48,.5);
}
*{box-sizing:border-box}
html,body{margin:0;padding:0}
body{
  font-family:'Archivo',system-ui,sans-serif; color:var(--ink); min-height:100vh;
  background:
    radial-gradient(1200px 600px at 82% -12%, #fbf7ee 0%, transparent 60%),
    radial-gradient(900px 520px at -12% 112%, #efe7d6 0%, transparent 55%),
    var(--paper);
}
/* grano de papel, igual que la app */
body::before{content:"";position:fixed;inset:0;pointer-events:none;opacity:.05;mix-blend-mode:multiply;
  background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='160' height='160'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.9' numOctaves='2'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E");}

.wrap{max-width:1100px;margin:0 auto;padding:40px 24px 70px;position:relative}

/* ---------- Header ---------- */
header.top{display:flex;align-items:flex-start;justify-content:space-between;gap:20px;
  padding-bottom:20px;border-bottom:2px solid var(--ink);flex-wrap:wrap}
.brand{display:flex;flex-direction:column;line-height:1}
.brand .k{font:600 11px/1 'Archivo';letter-spacing:.34em;text-transform:uppercase;color:var(--accent)}
.brand h1{font-family:'Fraunces';font-weight:900;font-size:clamp(30px,5.4vw,52px);margin:8px 0 0;letter-spacing:-.015em}
.brand .sub{font-family:'Newsreader';font-style:italic;color:var(--ink2);font-size:16px;margin-top:8px;max-width:52ch}
.lang{display:inline-flex;border:1px solid var(--line);border-radius:30px;overflow:hidden;background:rgba(255,255,255,.45)}
.lang button{border:none;background:none;font:600 12px 'Archivo';letter-spacing:.06em;padding:7px 15px;cursor:pointer;color:var(--muted)}
.lang button.on{background:var(--ink);color:#fff}

/* ---------- Grid de kits ---------- */
.tiers{display:grid;grid-template-columns:repeat(3,1fr);gap:20px;margin-top:38px}
@media(max-width:860px){.tiers{grid-template-columns:1fr}}

.tier{position:relative;display:flex;flex-direction:column;background:#fffdf8;border:1px solid var(--line);
  border-radius:16px;padding:26px 24px 24px;box-shadow:var(--shadow);overflow:hidden;
  animation:rise .5s cubic-bezier(.2,.7,.2,1) both}
.tier:nth-child(2){animation-delay:.07s}
.tier:nth-child(3){animation-delay:.14s}
@keyframes rise{from{opacity:0;transform:translateY(14px)}to{opacity:1;transform:none}}

/* franja superior de color por nivel */
.tier::before{content:"";position:absolute;left:0;right:0;top:0;height:5px;background:var(--line)}
.tier.available::before{background:var(--accent)}
.tier.locked::before{background:repeating-linear-gradient(90deg,var(--line) 0 10px,transparent 10px 20px)}

.roman{font-family:'Fraunces';font-weight:900;font-size:34px;line-height:1;color:var(--paper2);
  -webkit-text-stroke:1px var(--line);letter-spacing:-.02em}
.tier.available .roman{color:var(--accent);-webkit-text-stroke:0}

.badge{position:absolute;top:22px;right:22px;font:700 10px 'Archivo';letter-spacing:.14em;text-transform:uppercase;
  padding:5px 11px;border-radius:40px;border:1px solid var(--line);color:var(--muted);background:rgba(255,255,255,.6)}
.tier.available .badge{color:#fff;background:var(--ok);border-color:var(--ok)}

.tier h2{font-family:'Fraunces';font-weight:600;font-size:24px;margin:16px 0 2px}
.tier .kit-sub{font:600 11.5px 'Archivo';letter-spacing:.06em;text-transform:uppercase;color:var(--accent2);margin-bottom:12px}
.tier.locked .kit-sub{color:var(--muted)}
.tier p{font-family:'Newsreader';font-size:15px;line-height:1.6;color:var(--ink2);margin:0 0 22px;flex:1}

/* Botón / acción */
.cta{display:inline-flex;align-items:center;justify-content:center;gap:8px;width:100%;
  font:700 15px 'Archivo';border:none;border-radius:11px;padding:14px 20px;cursor:pointer;
  text-decoration:none;transition:transform .16s ease,background .16s ease}
.cta.go{background:var(--ink);color:#fff}
.cta.go:hover{background:#000;transform:translateY(-1px)}
.cta.soon{background:transparent;color:var(--muted);border:1px dashed var(--line);cursor:not-allowed}

/* atenuar los bloqueados */
.tier.locked{filter:saturate(.72)}
.tier.locked h2{color:var(--ink2)}

/* sello diagonal "Próximamente" */
.stamp{position:absolute;bottom:78px;right:-42px;transform:rotate(-14deg);
  font:800 12px 'Archivo';letter-spacing:.18em;text-transform:uppercase;color:var(--accent2);
  border:2px solid var(--accent2);border-radius:6px;padding:6px 46px;opacity:.16;pointer-events:none}

/* ---------- Toast ---------- */
.toast{position:fixed;left:50%;bottom:26px;transform:translateX(-50%) translateY(20px);
  background:var(--ink);color:#fff;font:600 13.5px 'Archivo';padding:12px 18px;border-radius:10px;
  box-shadow:var(--shadow);opacity:0;pointer-events:none;transition:opacity .2s,transform .2s;z-index:50}
.toast.show{opacity:1;transform:translateX(-50%) translateY(0)}

/* ---------- Footer ---------- */
.foot{font-size:11.5px;color:var(--muted);text-align:center;margin-top:46px;font-family:'Newsreader';
  font-style:italic;max-width:74ch;margin-left:auto;margin-right:auto;line-height:1.55}

/* Accesibilidad */
.cta:focus-visible,.lang button:focus-visible{outline:2px solid var(--accent);outline-offset:2px}
@media(prefers-reduced-motion:reduce){.tier{animation:none}.cta.go:hover{transform:none}}

/* ---------- Lista de procesos dentro de un kit (Pro Kit) ---------- */
.steps-list{list-style:none;margin:0 0 20px;padding:0;display:flex;flex-direction:column;gap:7px}
.steps-list li{margin:0}
.steplink{display:flex;align-items:center;gap:11px;text-decoration:none;color:var(--ink);
  border:1px solid var(--line);border-radius:10px;padding:10px 13px;background:#fffefb;
  transition:border-color .15s ease,transform .15s ease}
.steplink:hover{border-color:var(--accent);transform:translateX(2px)}
.steplink .n{display:inline-flex;align-items:center;justify-content:center;min-width:24px;height:24px;
  border-radius:50%;background:var(--paper2);color:var(--accent2);font:700 11px 'Archivo';flex:none}
.steplink .tx{display:flex;flex-direction:column;line-height:1.25}
.steplink .tx b{font:600 13.5px 'Archivo'}
.steplink .tx small{font-family:'Newsreader';font-size:12px;color:var(--muted)}
.steplink .go{margin-left:auto;color:var(--muted);font-size:15px}
.tier.available .steplink .n{background:var(--accent);color:#fff}
.flow-note{font-family:'Newsreader';font-style:italic;font-size:12.5px;color:var(--muted);
  border-left:2px solid var(--line);padding-left:10px;margin:0 0 18px;line-height:1.5}