@font-face{font-family:"BC";src:url(/fonts/bc-900i.woff2) format("woff2");font-weight:900;font-style:italic;font-display:swap}
@font-face{font-family:"BC";src:url(/fonts/bc-700.woff2) format("woff2");font-weight:700;font-display:swap}
@font-face{font-family:"In";src:url(/fonts/in-400.woff2) format("woff2");font-weight:400;font-display:swap}
@font-face{font-family:"In";src:url(/fonts/in-600.woff2) format("woff2");font-weight:600;font-display:swap}
:root{--bg:#0B0B0C;--bg2:#141416;--line:#26262A;--fg:#F4F4F2;--muted:#A6A6A8;--or:#FF7A1A;--or2:#FF9A4D;--ok:#3CCB7F;--bad:#FF5A5F;--r:18px}
*{box-sizing:border-box}html{-webkit-text-size-adjust:100%}
body{margin:0;background:var(--bg);color:var(--fg);font:16px/1.6 "In",system-ui,-apple-system,"Segoe UI",sans-serif;padding:env(safe-area-inset-top) env(safe-area-inset-right) env(safe-area-inset-bottom) env(safe-area-inset-left)}
a{color:var(--or2)}img,svg{max-width:100%}
.wrap{max-width:1120px;margin:0 auto;padding:0 22px}
.nav{display:flex;align-items:center;justify-content:space-between;padding:20px 0}
.brand{display:flex;align-items:center;gap:12px;color:var(--fg);text-decoration:none}
.brand b{font:900 italic 30px/1 "BC",sans-serif;letter-spacing:.04em}
.mark{width:40px;height:40px;flex:none}
.btn{display:inline-flex;align-items:center;gap:8px;border-radius:999px;padding:12px 22px;font-weight:600;text-decoration:none;border:1px solid var(--line);color:var(--fg);background:transparent}
.btn.or{background:var(--or);border-color:var(--or);color:#111}
.btn.sm{padding:8px 16px;font-size:14px}
h1,h2,h3{font-family:"BC",sans-serif;font-weight:900;font-style:italic;line-height:1;letter-spacing:.01em;margin:0}
h1{font-size:clamp(46px,8vw,96px)}h2{font-size:clamp(34px,5vw,56px)}h3{font-size:26px}
.hero{display:grid;grid-template-columns:1.15fr .85fr;gap:48px;align-items:center;padding:56px 0 80px}
.hero p.lead{font-size:20px;color:var(--muted);max-width:36ch;margin:22px 0 30px}
.hero h1 em{color:var(--or);font-style:italic}
.disc{aspect-ratio:1;border-radius:50%;background:radial-gradient(circle at 30% 25%,#fff 0,#e9eef2 18%,#c9d1d8 40%,#f2f4f6 55%,#b9c3cc 75%,#e6eaee 100%);display:flex;align-items:center;justify-content:center;box-shadow:0 30px 80px rgba(255,122,26,.18),0 0 0 1px rgba(255,255,255,.08);max-width:440px;margin-left:auto}
.disc img{width:92%;mix-blend-mode:multiply}
.sec{padding:80px 0;border-top:1px solid var(--line)}
.kicker{font:700 14px/1 "BC",sans-serif;letter-spacing:.2em;text-transform:uppercase;color:var(--or)}
.grid3{display:grid;grid-template-columns:repeat(3,1fr);gap:18px;margin-top:36px}
.card{background:var(--bg2);border:1px solid var(--line);border-radius:var(--r);padding:26px}
.card p{color:var(--muted);margin:10px 0 0}
.card .n{font:900 italic 44px/1 "BC",sans-serif;color:var(--or)}
.split{display:grid;grid-template-columns:1fr 1fr;gap:40px;align-items:center}
ul.ticks{list-style:none;padding:0;margin:22px 0 0;display:grid;gap:12px}
ul.ticks li{padding-left:30px;position:relative;color:var(--muted)}
ul.ticks li::before{content:"";position:absolute;left:0;top:6px;width:16px;height:16px;border-radius:50%;background:var(--or)}
ul.ticks b{color:var(--fg);font-weight:600}
footer{border-top:1px solid var(--line);padding:34px 0 44px;color:var(--muted);font-size:14px;display:flex;justify-content:space-between;gap:20px;flex-wrap:wrap}
.page{max-width:720px;margin:0 auto;padding:30px 22px 80px}
.page h1{font-size:clamp(40px,6vw,64px);margin:20px 0 24px}
.page p,.page li{color:#cfcfd1}
/* ficha de etiqueta */
.tag{max-width:460px;margin:0 auto;padding:28px 20px 60px;text-align:center}
.state{border-radius:var(--r);padding:28px 22px;margin-top:26px;border:1px solid var(--line);background:var(--bg2)}
.state h2{font-size:38px;margin:10px 0}
.state p{color:var(--muted);margin:8px 0 0}
.state.ok{border-color:rgba(60,203,127,.5)}.state.ok h2{color:var(--ok)}
.state.bad{border-color:rgba(255,90,95,.5)}.state.bad h2{color:var(--bad)}
.spin{width:38px;height:38px;border-radius:50%;border:3px solid var(--line);border-top-color:var(--or);animation:s 1s linear infinite;margin:0 auto}
@keyframes s{to{transform:rotate(360deg)}}
.code{font-family:ui-monospace,Menlo,monospace;color:var(--muted);font-size:13px;margin-top:18px}
@media (max-width:860px){.hero,.split{grid-template-columns:1fr}.grid3{grid-template-columns:1fr}.disc{margin:0 auto;max-width:320px}.hero{padding-top:24px}}
@media (prefers-reduced-motion:reduce){.spin{animation:none}}