/* ============================================================
   Napki Web — estilos compartidos del sitio
   (Los minijuegos son autocontenidos y NO usan este archivo.)
   Paleta y lenguaje de diseño según CLAUDE.md §6.
   ============================================================ */
:root{
  /* Paleta tomada del logo oficial de Napki:
     durazno/crema, azul periwinkle y rosa. */
  --bg:#fef1e8;
  --bg2:#fbe1d2;
  --ink:#3b343f;
  --teal:#7184bd;     /* primario: azul periwinkle del anillo */
  --teal-d:#586aa3;
  --coral:#cd7b79;    /* rosa de las orejas */
  --coral-d:#a85d5b;
  --green:#5fa97e;    /* verde suave para “dato real” */
  --green-d:#46835f;
  --card:#ffffff;
  --soft:#a08f93;
}
*{box-sizing:border-box;}
html,body{margin:0;padding:0;}
body{
  font-family:'Segoe UI',system-ui,-apple-system,sans-serif;
  background:radial-gradient(1200px 700px at 50% -10%, var(--bg2), var(--bg));
  background-attachment:fixed;
  color:var(--ink);
  min-height:100vh;
  line-height:1.55;
}
a{color:var(--teal-d);}

/* ---------- Layout ---------- */
.container{width:100%;max-width:760px;margin:0 auto;padding:0 20px;}

/* ---------- Header / nav ---------- */
.site-header{
  background:var(--teal);
  color:#fff;
  box-shadow:0 4px 18px rgba(113,132,189,.22);
  position:sticky;top:0;z-index:10;
}
.site-header .container{
  display:flex;align-items:center;justify-content:space-between;
  gap:12px;padding-top:12px;padding-bottom:12px;flex-wrap:wrap;
}
.brand{
  display:flex;align-items:center;gap:10px;
  font-weight:700;font-size:16px;letter-spacing:.3px;
  color:#fff;text-decoration:none;
}
.brand .napki-mini{width:38px;height:38px;flex:0 0 auto;border-radius:50%;object-fit:cover;background:#fef1e8;box-shadow:0 0 0 2px rgba(255,255,255,.6);}
.nav{display:flex;gap:6px;flex-wrap:wrap;}
.nav a{
  color:#eaecf8;text-decoration:none;font-size:14px;font-weight:600;
  padding:7px 13px;border-radius:999px;transition:background .15s;
}
.nav a:hover{background:rgba(255,255,255,.15);}
.nav a.active{background:rgba(255,255,255,.22);color:#fff;}

/* ---------- Hero ---------- */
.hero{text-align:center;padding:34px 0 8px;}
.hero .napki-stage{width:160px;height:160px;margin:0 auto 6px;}
.napki-stage img{width:100%;height:100%;border-radius:50%;object-fit:cover;display:block;background:#fef1e8;box-shadow:0 12px 30px rgba(113,132,189,.22);}
.hero h1{font-size:30px;margin:6px 0 8px;}
.hero p{color:var(--soft);font-size:16px;max-width:520px;margin:0 auto;}

/* ---------- Cards / grid ---------- */
.section{padding:26px 0;}
.section-title{font-size:21px;margin:0 0 4px;}
.section-sub{color:var(--soft);font-size:14.5px;margin:0 0 18px;}
.grid{display:grid;gap:16px;grid-template-columns:repeat(auto-fit,minmax(220px,1fr));}
.card{
  background:var(--card);border-radius:20px;padding:22px 20px;
  box-shadow:0 12px 34px rgba(113,132,189,.12), 0 2px 6px rgba(0,0,0,.04);
  text-decoration:none;color:var(--ink);display:block;
  border:1px solid #f0e4db;transition:transform .15s, box-shadow .15s;
}
a.card:hover{transform:translateY(-3px);box-shadow:0 18px 40px rgba(113,132,189,.18);}
.card .ico{font-size:30px;display:block;margin-bottom:8px;}
.card h3{margin:0 0 6px;font-size:18px;}
.card p{margin:0;color:var(--soft);font-size:14px;}
.card .tag{
  display:inline-block;margin-top:12px;font-size:12px;font-weight:700;
  color:var(--teal-d);
}

/* ---------- Botones ---------- */
.btn{
  display:inline-block;font-family:inherit;cursor:pointer;border:none;
  border-radius:16px;padding:15px 26px;font-size:16px;font-weight:700;
  color:#fff;text-decoration:none;background:var(--teal);
  box-shadow:0 6px 0 var(--teal-d);transition:transform .12s,filter .12s;
}
.btn:active{transform:translateY(3px);box-shadow:0 3px 0 var(--teal-d);}
.btn.coral{background:var(--coral);box-shadow:0 6px 0 var(--coral-d);}

/* ---------- Contenido / prosa ---------- */
.prose{
  background:var(--card);border-radius:20px;padding:28px 26px;
  box-shadow:0 12px 34px rgba(113,132,189,.10);border:1px solid #f0e4db;
}
.prose h2{font-size:20px;margin:24px 0 8px;}
.prose h2:first-child{margin-top:0;}
.prose p{margin:0 0 14px;}
.prose ul{margin:0 0 14px;padding-left:22px;}
.prose li{margin-bottom:6px;}

/* ---------- Caja de ayuda SENDA ---------- */
.help{
  background:#fff6f0;border:1px solid #ffe0cf;border-radius:18px;
  padding:20px;margin:24px 0;text-align:center;font-size:14.5px;
}
.help .num{font-size:32px;font-weight:800;color:var(--coral-d);letter-spacing:1px;display:block;margin:6px 0;}
.help small{color:var(--soft);}

/* ---------- Listado de noticias ---------- */
.post-item{
  background:var(--card);border-radius:18px;padding:20px 22px;margin-bottom:14px;
  box-shadow:0 10px 28px rgba(113,132,189,.10);border:1px solid #f0e4db;
  text-decoration:none;color:var(--ink);display:block;transition:transform .15s;
}
.post-item:hover{transform:translateY(-2px);}
.post-item .date{font-size:12.5px;color:var(--soft);font-weight:600;}
.post-item h3{margin:4px 0 6px;font-size:18px;}
.post-item p{margin:0;color:var(--soft);font-size:14px;}

/* ---------- Footer ---------- */
.site-footer{
  text-align:center;color:#b3a6aa;font-size:12.5px;line-height:1.6;
  padding:30px 20px 36px;
}
.site-footer a{color:#9b8e92;}

.back-link{display:inline-block;margin:22px 0 4px;font-size:14px;font-weight:600;text-decoration:none;}