:root{
 --blue:#0002FF; --blue-dark:#0000B3; --navy:#0D1B2A; --lav:#F4F7FF; --lav2:#EAF0FF;
 --fg1:#0D1B2A; --fg2:#34425A; --fg3:#5E6B82; --b1:#E6ECFA; --b2:#DCE4FF;
 --font:'Funnel Display',-apple-system,sans-serif;
}
*{box-sizing:border-box;margin:0;padding:0}
body{font-family:var(--font);background:#fff;color:var(--fg1);-webkit-font-smoothing:antialiased;line-height:1.5}
.wrap{max-width:1140px;margin:0 auto;padding:0 28px}
a{color:var(--blue);text-decoration:none}

/* login */
body.login{background:var(--navy);min-height:100vh;display:flex;align-items:center;justify-content:center;padding:24px;position:relative}
#fondo{position:fixed;inset:0;width:100%;height:100%;display:block;z-index:0}
body.login .caja{position:relative;z-index:1;box-shadow:0 30px 80px rgba(0,0,0,.45)}
.caja{background:#fff;border-radius:28px;padding:44px 40px;max-width:430px;width:100%}
.caja .logo{height:30px;width:auto;margin-bottom:28px}
.caja h1{font-size:30px;font-weight:400;letter-spacing:-.02em;line-height:1.15}
.caja h1 b{font-weight:700}
.caja .sub{color:var(--fg3);font-size:14.5px;margin-top:10px}
.caja form{margin-top:26px;display:grid;gap:16px}
.caja label{display:grid;gap:7px;font-size:13px;color:var(--fg3)}
.caja input{padding:13px 16px;border:1.5px solid var(--b2);border-radius:16px;font-family:var(--font);font-size:15px;color:var(--fg1)}
.caja input:focus{outline:none;border-color:var(--blue);box-shadow:0 0 0 3px rgba(0,2,255,.18)}
.caja button{margin-top:6px;padding:14px;border:none;border-radius:999px;background:var(--blue);color:#fff;
 font-family:var(--font);font-size:15px;font-weight:600;cursor:pointer}
.caja button:hover{background:#124EF5}
.caja .error{margin-top:18px;background:#FFF1F1;color:#B3000A;border-radius:14px;padding:11px 16px;font-size:14px}
.caja .pie{margin-top:22px;font-size:12.5px;color:var(--fg3)}

/* panel */
.hero{background:var(--blue-dark);color:#fff;padding:26px 0 34px}
.barra{display:flex;align-items:center;justify-content:space-between;gap:16px;margin-bottom:28px}
.hero .logo{height:30px;width:auto;display:block}
.quien{font-size:13.5px;color:#DCE4FF}
.quien b{color:#fff}
.quien a{color:#fff;text-decoration:underline;margin-left:6px}
.eyebrow{font-size:12px;letter-spacing:.16em;text-transform:uppercase;opacity:.75;margin-bottom:10px}
.hero h1{font-size:38px;font-weight:400;letter-spacing:-.02em;line-height:1.1}
.hero h1 b{font-weight:700}
.hero .sub{color:#DCE4FF;margin-top:12px;max-width:720px;font-size:15.5px}
.tabbar{position:sticky;top:0;z-index:20;background:rgba(255,255,255,.95);backdrop-filter:blur(10px);border-bottom:1px solid var(--b1)}
.tabs{display:flex;gap:8px;padding:14px 0;flex-wrap:wrap}
.tab{border-radius:999px;border:1.5px solid var(--blue);color:var(--blue);background:#fff;padding:7px 16px;
 font-family:var(--font);font-size:13.5px;font-weight:500;cursor:pointer}
.tab-on{background:var(--blue);color:#fff}
.search{width:100%;max-width:460px;padding:12px 18px;border:1.5px solid var(--b2);border-radius:16px;
 font-family:var(--font);font-size:14.5px;color:var(--fg1);margin:26px 0 20px}
.search:focus{outline:none;border-color:var(--blue);box-shadow:0 0 0 3px rgba(0,2,255,.18)}
.rejilla{display:grid;grid-template-columns:repeat(3,1fr);gap:16px;padding-bottom:40px}
.tarjeta{display:block;background:var(--lav);border-radius:22px;padding:22px 24px;color:var(--fg1);transition:transform .12s,background .12s}
.tarjeta:hover{background:var(--lav2);transform:translateY(-2px);text-decoration:none}
.tarjeta .meta{display:flex;gap:7px;flex-wrap:wrap;margin-bottom:12px}
.tarjeta .meta span{font-size:11px;border-radius:999px;padding:3px 10px;background:#fff;color:var(--fg2)}
.tarjeta .meta .pais{background:var(--blue);color:#fff}
.tarjeta .meta .estado{background:#FFF4E0;color:#8A5A00}
.tarjeta h2{font-size:19px;font-weight:700;letter-spacing:-.01em;line-height:1.25}
.tarjeta p{font-size:14px;color:var(--fg2);margin-top:7px}
.tarjeta .pie{display:flex;justify-content:space-between;gap:12px;margin-top:16px;font-size:12.5px;color:var(--fg3)}
.nores{font-size:15px;color:var(--fg3);padding:10px 0 50px}
footer{background:var(--navy);color:#fff;padding:24px 0;font-size:13px}
[hidden]{display:none!important}
@media(max-width:980px){.rejilla{grid-template-columns:1fr 1fr}}
@media(max-width:640px){.rejilla{grid-template-columns:1fr}.hero h1{font-size:30px}}