/* ============================================
   UMMA · Dashboard "Lo que deberías saber"
   Estilos específicos de esta página.
   Reutiliza variables de color/tipografía de umma.css
   ============================================ */

/* Enlaces dentro del dashboard (no afecta nav/footer del sitio) */
.dash a{color:var(--azul)}
.dash a:hover{color:var(--turquesa)}

.dash{max-width:1440px;margin:0 auto;padding:28px 32px 48px}
.dash-grid{display:grid;gap:20px}

/* --- Barra superior --- */
.dash-top{
  display:grid;grid-template-columns:1fr auto;gap:32px;align-items:start;
  background:var(--blanco);border:1px solid rgba(27,63,110,.08);
  border-radius:var(--r-xl);padding:36px 40px;
}
.dash-top .eyebrow{display:flex;align-items:center;gap:10px;margin-bottom:14px}
.dash-top .eyebrow .k{font-family:'Manrope';font-weight:600;font-size:12px;letter-spacing:.16em;text-transform:uppercase;color:var(--turquesa)}
.live-dot{width:9px;height:9px;border-radius:50%;background:var(--turquesa);position:relative;flex-shrink:0}
.live-dot::after{content:"";position:absolute;inset:-5px;border-radius:50%;border:2px solid rgba(62,155,143,.4);animation:livepulse 2s ease infinite}
@keyframes livepulse{0%,100%{transform:scale(1);opacity:1}50%{transform:scale(1.7);opacity:0}}
.dash-title{font-family:'Outfit';font-weight:200;font-size:clamp(44px,5.5vw,72px);line-height:.98;letter-spacing:-.03em;color:var(--azul);margin:0;display:flex;align-items:center;gap:18px;flex-wrap:wrap}
.dash-title .beat{width:14px;height:14px;border-radius:50%;background:var(--turquesa);position:relative;flex-shrink:0;align-self:center}
.dash-title .beat::after{content:"";position:absolute;inset:-6px;border-radius:50%;border:2px solid rgba(62,155,143,.45);animation:livepulse 2s ease infinite}
.dash-sub{font-family:'Manrope';font-size:16px;line-height:1.5;color:var(--tinta-2);max-width:560px;margin:16px 0 0}
.week-chip{
  display:inline-flex;align-items:center;gap:10px;white-space:nowrap;
  background:var(--lino);border:1px solid rgba(27,63,110,.1);
  border-radius:999px;padding:12px 20px;
  font-family:'Manrope';font-weight:600;font-size:14px;color:var(--azul);
}
.week-chip svg{color:var(--turquesa);flex-shrink:0}

/* --- Datos frik --- */
.stats-row{display:grid;grid-template-columns:repeat(3,1fr);gap:20px}
.stat-card{
  background:var(--blanco);border:1px solid rgba(27,63,110,.08);
  border-radius:var(--r-lg);border-top-width:3px;
  padding:28px 28px 26px;display:flex;flex-direction:column;gap:6px;
  transition:transform .2s ease, box-shadow .2s ease;
}
.stat-card:hover{transform:translateY(-2px);box-shadow:var(--shadow-md)}
.stat-card.a-pedia{border-top-color:var(--turquesa)}
.stat-card.a-nutri{border-top-color:var(--amarillo)}
.stat-card.a-psico{border-top-color:var(--azul)}
.stat-card.a-neuro{border-top-color:var(--amarillo)}
.stat-label{display:inline-flex;align-items:center;gap:7px;font-family:'Manrope';font-weight:600;font-size:11px;letter-spacing:.14em;text-transform:uppercase;color:var(--tinta-3);margin-bottom:6px}
.stat-label svg{color:var(--amarillo);flex-shrink:0}
.stat-num{font-family:'Outfit';font-weight:200;font-size:clamp(38px,4vw,52px);line-height:1;letter-spacing:-.03em;color:var(--azul);margin:0}
.stat-ctx{font-family:'Manrope';font-size:14px;line-height:1.5;color:var(--tinta-2);margin:8px 0 0}

/* --- Cuerpo: artículos + CTA --- */
.dash-body{display:grid;grid-template-columns:1.95fr 1fr;gap:20px;align-items:stretch}

.panel{
  background:var(--blanco);border:1px solid rgba(27,63,110,.08);
  border-radius:var(--r-xl);padding:32px 36px 36px;
}
.panel-head{display:flex;align-items:center;justify-content:space-between;gap:24px;flex-wrap:wrap;margin-bottom:24px}
.panel-head h2{font-family:'Outfit';font-weight:300;font-size:30px;letter-spacing:-.02em;color:var(--azul);margin:0}
.filters{display:flex;flex-wrap:wrap;gap:8px}
.filter{
  font-family:'Manrope';font-weight:600;font-size:13px;color:var(--tinta-2);
  background:var(--lino);border:1px solid rgba(27,63,110,.08);
  border-radius:999px;padding:8px 16px;cursor:pointer;
  transition:background .15s ease,color .15s ease,border-color .15s ease;
}
.filter:hover{border-color:rgba(27,63,110,.2)}
.filter.active{background:var(--azul);color:#fff;border-color:var(--azul)}

.art-grid{display:grid;grid-template-columns:1fr 1fr;gap:18px}
.art-card{
  position:relative;background:var(--lino);border:1px solid rgba(27,63,110,.08);
  border-radius:var(--r-lg);padding:26px 26px 24px;overflow:hidden;
  display:flex;flex-direction:column;gap:12px;
  transition:transform .2s ease, box-shadow .2s ease;
}
.art-card:hover{transform:translateY(-4px);box-shadow:var(--shadow-md)}
.art-card .accent-bar{position:absolute;top:0;left:0;right:0;height:3px}
.a-psico .accent-bar{background:var(--azul)}
.a-pedia .accent-bar{background:var(--turquesa)}
.a-neuro .accent-bar{background:var(--amarillo)}
.a-nutri .accent-bar{background:linear-gradient(90deg,var(--turquesa),var(--amarillo))}
.art-card h3{font-family:'Outfit';font-weight:400;font-size:20px;line-height:1.22;letter-spacing:-.01em;color:var(--azul);margin:2px 0 0}
.art-card .summary{font-family:'Manrope';font-size:14px;line-height:1.55;color:var(--tinta-2);margin:0}
.art-card .source{font-family:'Manrope';font-size:12px;color:var(--tinta-3);margin:auto 0 0;line-height:1.45}
.art-card .read{display:inline-flex;align-items:center;gap:7px;font-family:'Manrope';font-weight:600;font-size:13px;color:var(--azul);text-decoration:none;margin-top:4px}
.art-card .read .arr{transition:transform .15s ease}
.art-card .read:hover{color:var(--turquesa)}
.art-card .read:hover .arr{transform:translateX(4px)}
.art-card.hidden{display:none}

/* stickman caminante */
.walker{position:absolute;top:-19px;left:0;width:22px;height:22px;color:var(--turquesa);z-index:3;animation:walk-path 9s linear infinite;pointer-events:none}
.walker svg{display:block;width:100%;height:100%}
.walker .leg-b{transform-origin:12px 15px;animation:legswing .6s ease-in-out infinite alternate}
.walker .leg-a{transform-origin:12px 15px;animation:legswing .6s ease-in-out infinite alternate-reverse}
@keyframes legswing{from{transform:rotate(-18deg)}to{transform:rotate(18deg)}}
@keyframes walk-path{
  0%{left:6px;transform:scaleX(1)}
  46%{left:calc(100% - 28px);transform:scaleX(1)}
  50%{left:calc(100% - 28px);transform:scaleX(-1)}
  96%{left:6px;transform:scaleX(-1)}
  100%{left:6px;transform:scaleX(1)}
}
@media (prefers-reduced-motion:reduce){
  .walker{animation:none;left:12px}
  .walker .leg-a,.walker .leg-b{animation:none}
  .live-dot::after,.dash-title .beat::after{animation:none}
}

/* --- CTA panel --- */
.cta-panel{
  background:var(--azul);color:#fff;border-radius:var(--r-xl);
  padding:44px 40px;display:flex;flex-direction:column;
  position:relative;overflow:hidden;
}
.cta-panel::before{content:"";position:absolute;right:-20%;top:-30%;width:70%;height:160%;background:radial-gradient(ellipse at center,rgba(62,155,143,.28),transparent 60%);pointer-events:none}
.cta-panel::after{content:"";position:absolute;left:-20%;bottom:-40%;width:60%;height:150%;background:radial-gradient(ellipse at center,rgba(245,200,66,.14),transparent 60%);pointer-events:none}
.cta-panel > *{position:relative;z-index:1}
.cta-panel .eye{font-family:'Manrope';font-weight:600;font-size:11px;letter-spacing:.16em;text-transform:uppercase;color:var(--amarillo);margin-bottom:20px}
.cta-panel h2{font-family:'Outfit';font-weight:200;font-size:clamp(30px,3.4vw,40px);line-height:1.03;letter-spacing:-.02em;color:#fff;margin:0 0 18px;text-wrap:balance}
.cta-panel h2 .serif{color:var(--amarillo)}
.cta-panel p{font-family:'Manrope';font-size:15px;line-height:1.6;color:rgba(255,255,255,.8);margin:0 0 auto}
.cta-panel .ctas{display:flex;flex-direction:column;gap:12px;margin-top:32px}
.cta-panel .btn{justify-content:center}

/* --- Pie del dashboard (disclaimer) --- */
.dash-foot{
  margin-top:8px;display:flex;align-items:flex-start;gap:12px;
  font-family:'Manrope';font-size:13px;line-height:1.55;color:var(--tinta-3);
  padding:0 8px;
}
.dash-foot svg{color:var(--turquesa);flex-shrink:0;margin-top:2px}

@media (max-width:1080px){
  .dash-body{grid-template-columns:1fr}
  .stats-row{grid-template-columns:1fr}
  .art-grid{grid-template-columns:1fr 1fr}
}
@media (max-width:760px){
  .dash{padding:20px}
  .dash-top{grid-template-columns:1fr;padding:28px 24px}
  .art-grid{grid-template-columns:1fr}
  .panel{padding:24px 22px 28px}
}