/* ============================================================
   Quiero mi regalo — identidad Antonio Martínez
   Negro / blanco / rojo señal · Chakra Petch + Inter + JetBrains Mono
   ============================================================ */
:root{
  --c-black:#000; --c-white:#fff; --c-red:#cd2a2a; --c-red-dark:#b92525;
  --ink-08:rgba(255,255,255,.08); --ink-15:rgba(255,255,255,.15);
  --ink-30:rgba(255,255,255,.30); --ink-50:rgba(255,255,255,.50); --ink-70:rgba(255,255,255,.70);
  --f-display:'Chakra Petch',system-ui,'Arial Narrow',sans-serif;
  --f-body:'Inter',system-ui,-apple-system,Segoe UI,Roboto,sans-serif;
  --f-mono:'JetBrains Mono','SFMono-Regular',Consolas,monospace;
  --ease:cubic-bezier(.2,0,0,1); --maxw:820px;
  --cut-sm:10px; --cut-md:12px; --cut-lg:16px;
}
*{box-sizing:border-box}
html,body{margin:0;padding:0}
body{
  background:var(--c-black);
  background-image:radial-gradient(ellipse 80% 45% at 50% -5%,rgba(205,42,42,.16),transparent 60%);
  color:var(--c-white); font-family:var(--f-body); line-height:1.6;
  -webkit-font-smoothing:antialiased; min-height:100vh; display:flex; flex-direction:column;
}
h1,h2{font-family:var(--f-display); font-weight:700; text-transform:uppercase; line-height:1.08; letter-spacing:.01em}
.badge,.btn,.card__title,.preview__title,.code-input{font-family:var(--f-display)}
a{color:var(--c-white); text-decoration:none}
a:hover{color:var(--c-red)}
:focus-visible{outline:2px solid var(--c-red); outline-offset:3px}
code{font-family:var(--f-mono); background:rgba(255,255,255,.06); border:1px solid var(--ink-15); padding:.08em .4em; border-radius:5px; color:#fff; font-weight:600}

/* Barra de marca */
.brandbar{display:flex; justify-content:center; padding:20px 16px; border-bottom:1px solid var(--ink-08)}
.brandbar img{height:34px; width:auto; display:block}

.wrap{width:100%; max-width:var(--maxw); margin:0 auto; padding:clamp(28px,5vw,60px) 20px 44px; flex:1}

/* ---- Hero ---- */
.hero{text-align:center}
.badge{display:inline-flex; align-items:center; gap:.4em; background:var(--c-red); border:1px solid var(--c-red); color:#fff;
  font-family:var(--f-mono); font-size:.64rem; font-weight:500; letter-spacing:.14em; text-transform:uppercase; padding:.35em .7em; margin-bottom:18px}
.badge.ok{background:transparent; color:var(--c-red); border-color:var(--c-red)}
h1{font-size:clamp(1.9rem,5.2vw,2.9rem); margin:.2em 0 .35em}
.lead{color:var(--ink-70); font-size:clamp(1rem,2.5vw,1.18rem); max-width:42ch; margin:0 auto 8px}
.lead strong{color:#fff}

/* ---- Alerts ---- */
.alert{background:rgba(205,42,42,.12); border:1px solid rgba(205,42,42,.4); color:#ffd8d8; padding:.7em 1em; margin:16px auto 0; max-width:46ch; font-size:.95rem;
  clip-path:polygon(var(--cut-sm) 0,100% 0,100% calc(100% - var(--cut-sm)),calc(100% - var(--cut-sm)) 100%,0 100%,0 var(--cut-sm))}
.alert--soft{background:rgba(255,255,255,.04); border-color:var(--ink-15); color:var(--ink-70)}
.alert a{color:var(--c-red); text-decoration:underline}

/* ---- Preview ---- */
.preview{display:inline-flex; align-items:center; gap:14px; background:rgba(255,255,255,.03); border:1px solid var(--ink-15); padding:12px 18px; margin:20px auto 0; text-align:left;
  clip-path:polygon(var(--cut-md) 0,100% 0,100% calc(100% - var(--cut-md)),calc(100% - var(--cut-md)) 100%,0 100%,0 var(--cut-md))}
.preview__icon{font-size:1.9rem}
.preview__label{display:block; font-family:var(--f-mono); font-size:.66rem; text-transform:uppercase; letter-spacing:.14em; color:var(--ink-50)}
.preview__title{display:block; font-weight:700; font-size:1.05rem}

/* ---- Form ---- */
.form{display:flex; flex-direction:column; gap:14px; max-width:420px; margin:26px auto 0; text-align:left}
.field__label{display:block; font-family:var(--f-mono); font-size:.7rem; letter-spacing:.1em; text-transform:uppercase; color:var(--ink-50); margin-bottom:6px}
.field__input{width:100%; background:rgba(255,255,255,.04); border:1px solid var(--ink-15); border-radius:9px; color:#fff; font-size:1.05rem; padding:14px 16px; transition:border-color .15s, box-shadow .15s}
.field__input::placeholder{color:var(--ink-30)}
.field__input:focus{outline:none; border-color:var(--c-red); box-shadow:0 0 0 3px rgba(205,42,42,.2)}
.code-input{text-transform:uppercase; letter-spacing:.2em; font-weight:700; text-align:center; font-size:1.35rem}
.consent{display:flex; gap:10px; align-items:flex-start; font-size:.85rem; color:var(--ink-50)}
.consent input{margin-top:3px; accent-color:var(--c-red); width:18px; height:18px; flex:none}
.known{background:rgba(255,255,255,.03); border:1px dashed var(--ink-15); border-radius:10px; padding:12px 14px; font-size:.9rem; color:var(--ink-50); margin:0}
.known strong{color:#fff}
.hp{position:absolute; left:-9999px; width:1px; height:1px; opacity:0}

/* ---- Botones ---- */
.btn{display:inline-flex; align-items:center; justify-content:center; gap:.6rem; background:var(--c-red); color:#fff; font-weight:700; text-transform:uppercase; letter-spacing:.05em;
  font-size:1.02rem; border:1px solid var(--c-red); padding:15px 24px; cursor:pointer; text-align:center; transition:background .2s var(--ease), transform .2s var(--ease);
  clip-path:polygon(var(--cut-md) 0,100% 0,100% calc(100% - var(--cut-md)),calc(100% - var(--cut-md)) 100%,0 100%,0 var(--cut-md))}
.btn:hover{background:var(--c-red-dark); color:#fff; transform:translateY(-2px)}
.btn:active{transform:translateY(0)}
.btn--lg{font-size:1.15rem; padding:17px 32px; margin-top:8px}
.btn--ghost{background:transparent; border-color:var(--ink-30); color:#fff}
.btn--ghost:hover{background:rgba(255,255,255,.05); border-color:#fff}

.hint{color:var(--ink-50); font-size:.9rem; margin-top:18px}
.hint.center{text-align:center}

/* ---- Grid / cards ---- */
.recent,.vault{margin-top:52px}
.recent__head,.vault__head{display:flex; align-items:center; justify-content:space-between; gap:16px; flex-wrap:wrap; margin-bottom:18px}
.recent__head h2,.vault__head h1{margin:0}
h2{font-size:1.35rem}
.search{background:rgba(255,255,255,.04); border:1px solid var(--ink-15); border-radius:8px; color:#fff; padding:10px 14px; font-size:.95rem; min-width:180px}
.search::placeholder{color:var(--ink-30)}
.search:focus{outline:none; border-color:var(--c-red)}
.grid{display:grid; grid-template-columns:repeat(auto-fill,minmax(240px,1fr)); gap:14px}
.card{display:flex; gap:14px; background:rgba(255,255,255,.02); border:1px solid var(--ink-08); padding:16px; transition:transform .1s var(--ease), border-color .15s, background .15s;
  clip-path:polygon(var(--cut-sm) 0,100% 0,100% calc(100% - var(--cut-sm)),calc(100% - var(--cut-sm)) 100%,0 100%,0 var(--cut-sm))}
.card:hover{transform:translateY(-2px); border-color:var(--ink-30); background:rgba(255,255,255,.05); color:#fff}
.card__icon{font-size:1.8rem; flex:none; line-height:1}
.card__body{display:flex; flex-direction:column; gap:4px; min-width:0}
.card__cat{font-family:var(--f-mono); font-size:.64rem; text-transform:uppercase; letter-spacing:.12em; color:var(--c-red)}
.card__title{font-weight:700; color:#fff; font-size:1.02rem}
.card__desc{font-size:.85rem; color:var(--ink-50)}
.card__foot{display:flex; align-items:center; justify-content:space-between; margin-top:6px}
.card__cta{font-family:var(--f-mono); font-size:.72rem; color:var(--c-red); font-weight:500; letter-spacing:.05em}
.card--hl{border-color:var(--c-red); box-shadow:0 0 0 2px rgba(205,42,42,.3)}

/* ---- Deliver ---- */
.deliver__icon{font-size:3.4rem; display:block; margin:6px 0 4px}
.crosssell{margin-top:40px; padding-top:26px; border-top:1px solid var(--ink-08)}
.crosssell p{color:var(--ink-50); margin:0 0 12px}

/* ---- Vault ---- */
.vault__cat{font-family:var(--f-mono); margin:32px 0 14px; color:var(--ink-50); font-size:.8rem; text-transform:uppercase; letter-spacing:.12em; display:flex; align-items:center; gap:.7rem}
.vault__cat::before{content:""; width:22px; height:1px; background:var(--c-red)}
.empty{text-align:center; color:var(--ink-50); margin-top:24px}

/* ---- Footer ---- */
.foot{display:flex; gap:18px; justify-content:center; align-items:center; padding:24px; color:var(--ink-30); font-family:var(--f-mono); font-size:.7rem; letter-spacing:.04em; border-top:1px solid var(--ink-08)}
.foot a{color:var(--ink-50)}
.foot a:hover{color:#fff}

@media(max-width:520px){
  .recent__head,.vault__head{flex-direction:column; align-items:stretch}
  .search{width:100%}
}