:root{--bg:#f6f4f3;--card:#fff;--ink:#1d1a1b;--muted:#6b6465;--line:#e3dedd;--accent:#d3202b;--ok:#1f8a4c;--bad:#b3261e;--warn-bg:#fdf0d8;--warn:#8a5200}
@media (prefers-color-scheme:dark){:root{--bg:#171415;--card:#231f20;--ink:#f3eeee;--muted:#a79f9f;--line:#3a3435;--accent:#ff5a63;--ok:#5fcf8a;--bad:#ff8a82;--warn-bg:#3a2c0f;--warn:#f0b24a}}
*{box-sizing:border-box}
body{margin:0;background:var(--bg);color:var(--ink);font:17px/1.5 system-ui,-apple-system,"Segoe UI",Roboto,sans-serif;padding:max(16px,env(safe-area-inset-top)) 16px max(24px,env(safe-area-inset-bottom))}
.wrap{max-width:640px;margin:0 auto;display:flex;flex-direction:column;gap:20px}
.top{display:flex;flex-direction:column;gap:6px}
.eyebrow{font-size:.75rem;letter-spacing:.08em;text-transform:uppercase;color:var(--accent);font-weight:600}
h1{margin:0;font-size:2.1rem;line-height:1.1}
h2{margin:0 0 8px;font-size:1.15rem}
.lead{margin:0;color:var(--muted)}
.hero{width:100%;height:auto;border-radius:14px;display:block;background:var(--line)}
.info{background:var(--card);border:1px solid var(--line);border-radius:14px;padding:18px}
.info ol{margin:0;padding-left:1.2em;display:flex;flex-direction:column;gap:8px}
.note{margin:12px 0 0;color:var(--muted);font-size:.9rem}
.activar{background:var(--card);border:1px solid var(--line);border-radius:14px;padding:18px;display:flex;flex-direction:column;gap:12px}
.activar h2{margin:0}
.aviso{background:var(--warn-bg);color:var(--warn);border-radius:10px;padding:14px;display:flex;flex-direction:column;gap:10px}
.aviso h3{margin:0;font-size:1rem}
.aviso p{margin:0;font-size:.95rem}
.aviso .btn.ghost{color:var(--warn);border-color:var(--warn)}
.btn{font:inherit;font-weight:600;background:var(--accent);color:#fff;border:0;border-radius:8px;padding:11px 16px;cursor:pointer}
.btn.ghost{background:transparent;color:var(--ink);border:1px solid var(--line)}
.btn:disabled{opacity:.6}
.btn:focus-visible,a:focus-visible{outline:3px solid var(--ink);outline-offset:2px}
.row{display:flex;gap:8px;flex-wrap:wrap}
#result{margin:0;font-weight:600}
#result.ok{color:var(--ok)} #result.bad{color:var(--bad)}
.foot{font-size:.8rem;color:var(--muted);display:flex;gap:8px;justify-content:center;flex-wrap:wrap}
.foot a{color:var(--muted)}
[hidden]{display:none!important}

/* ---- Responsive ---- */
/* Telefonos chicos (<= 380px): tipografia y botones a lo ancho */
@media (max-width:380px){
  body{font-size:16px;padding-left:12px;padding-right:12px}
  h1{font-size:1.75rem}
  .info{padding:14px}
  .btn,.row .btn{width:100%}
}
/* Telefono en horizontal (poca altura): la imagen no ocupa toda la pantalla */
@media (max-height:480px) and (orientation:landscape){
  .hero{max-height:60vh;object-fit:cover}
  body{padding-top:12px}
}
/* Tablet y arriba (>= 720px): mas aire y texto mas grande */
@media (min-width:720px){
  body{font-size:18px;padding-top:32px}
  .wrap{max-width:720px;gap:24px}
  h1{font-size:2.8rem}
  .info{padding:24px}
}
/* Escritorio (>= 1024px): imagen e informacion lado a lado */
@media (min-width:1024px){
  body{padding-top:48px}
  .wrap{max-width:1040px;display:grid;grid-template-columns:minmax(0,1.15fr) minmax(0,1fr);column-gap:32px;row-gap:24px;align-items:start}
  .top,.activar,.foot{grid-column:1 / -1}
  .hero{position:sticky;top:24px}
}
/* Pantallas grandes (>= 1440px) */
@media (min-width:1440px){
  .wrap{max-width:1180px}
  body{font-size:19px}
}
/* Cursor con hover real: respuesta visual en botones y enlaces */
@media (hover:hover){
  .btn:not(:disabled):hover{filter:brightness(1.08)}
  .btn.ghost:hover{border-color:var(--muted)}
  .foot a:hover{color:var(--ink)}
}
@media (prefers-reduced-motion:reduce){*{animation:none!important;transition:none!important;scroll-behavior:auto!important}}
/* Impresion: sin el bloque de activacion */
@media print{.activar{display:none!important}body{background:#fff;color:#000}}