:root{
  --bg:#0f172a; --card:#1e293b; --accent:#38bdf8; --accent2:#22c55e;
  --text:#e2e8f0; --muted:#94a3b8; --line:#334155;
}
*{box-sizing:border-box}
body{margin:0;font-family:system-ui,-apple-system,Segoe UI,Roboto,sans-serif;
  background:var(--bg);color:var(--text);line-height:1.6}
.container{max-width:860px;margin:0 auto;padding:0 18px}
a{color:var(--accent);text-decoration:none}
a:hover{text-decoration:underline}

.site-header{border-bottom:1px solid var(--line);background:#0b1220;position:sticky;top:0;z-index:10}
.site-header .container{display:flex;flex-wrap:wrap;align-items:center;gap:14px;padding-top:12px;padding-bottom:12px}
.logo{font-weight:800;font-size:1.2rem;color:#fff}
.site-header nav{display:flex;flex-wrap:wrap;gap:14px;font-size:.92rem}

main.container{padding-top:26px;padding-bottom:26px}

.hero{text-align:center;padding:24px 0}
.hero h1{font-size:1.7rem;margin:.2em 0}
.ip-box{display:inline-flex;align-items:center;gap:12px;background:var(--card);
  border:1px solid var(--line);border-radius:14px;padding:18px 24px;margin:10px 0;
  font-size:1.9rem;font-weight:800;letter-spacing:.5px;color:#fff;flex-wrap:wrap;justify-content:center}
.copy-btn{font-size:.85rem;font-weight:600;background:var(--accent);color:#04293a;border:0;
  border-radius:8px;padding:8px 12px;cursor:pointer}
.copy-btn:hover{filter:brightness(1.1)}
.sub{color:var(--muted)}

.tabla-datos{width:100%;border-collapse:collapse;margin:14px 0;background:var(--card);
  border-radius:12px;overflow:hidden}
.tabla-datos th,.tabla-datos td{padding:12px 14px;border-bottom:1px solid var(--line);text-align:left}
.tabla-datos th{width:42%;color:var(--muted);font-weight:600}
.tabla-datos tr:last-child td,.tabla-datos tr:last-child th{border-bottom:0}

.btn{display:inline-block;background:var(--accent2);color:#04240f;font-weight:700;
  padding:10px 16px;border-radius:10px;margin-top:8px}
.btn:hover{text-decoration:none;filter:brightness(1.08)}

.ip-form{display:flex;gap:8px;justify-content:center;flex-wrap:wrap;margin-top:12px}
.ip-form input{padding:12px 14px;border-radius:10px;border:1px solid var(--line);
  background:var(--card);color:#fff;font-size:1rem;min-width:240px}
.ip-form button{padding:12px 18px;border:0;border-radius:10px;background:var(--accent);
  color:#04293a;font-weight:700;cursor:pointer}

.contenido h2{margin-top:1.6em}
.contenido{font-size:1.02rem}
code{background:#0b1220;padding:2px 6px;border-radius:5px;font-size:.92em}

.aviso{background:#422006;border:1px solid #92400e;padding:12px 16px;border-radius:10px}
.resultado-vpn{font-weight:700;font-size:1.1rem;padding:12px;border-radius:10px;display:inline-block}
.resultado-vpn.es-vpn{background:#422006;border:1px solid #92400e}
.resultado-vpn.no-vpn{background:#052e1b;border:1px solid #166534}

.lista-posts article{background:var(--card);border:1px solid var(--line);
  border-radius:12px;padding:16px 18px;margin:12px 0}
.lista-posts h2{margin:0 0 6px}

.ad-zone{margin:24px 0;text-align:center;min-height:1px}

.site-footer{border-top:1px solid var(--line);background:#0b1220;margin-top:30px;padding:22px 0;font-size:.92rem}
.site-footer nav{margin:8px 0;color:var(--muted)}
.muted{color:var(--muted)}

@media(max-width:600px){
  .hero h1{font-size:1.35rem}
  .ip-box{font-size:1.4rem;padding:14px 16px}
  .tabla-datos th{width:50%}
}