:root{
  --sitcope-green:#0f6b3a;
  --sitcope-green-2:#0b5a31;
  --sitcope-red:#c2181b;

  --ink:#101828;
  --muted:rgba(16,24,40,.62);
  --border:rgba(16,24,40,.10);
  --soft:rgba(16,24,40,.03);
}

body{
  color:var(--ink);
  background:
    radial-gradient(900px 460px at 12% -10%, rgba(15,107,58,.16), transparent 60%),
    radial-gradient(820px 420px at 90% 0%, rgba(194,24,27,.12), transparent 55%),
    #f7f8fa;
}

/* Header */
.site-header{ background:#fff; border-bottom:1px solid var(--border); }
.brand-logo{ height:34px;width:auto;display:block; }
.brand-name{ font-weight:900; letter-spacing:.2px; color:var(--ink); }
.top-link{ text-decoration:none; color:var(--ink); opacity:.85; font-weight:700; }
.top-link:hover{ opacity:1; }

.kicker{
  font-size:.75rem;
  letter-spacing:.10em;
  text-transform:uppercase;
  color:rgba(16,24,40,.55);
  font-weight:900;
}

.hero{
  background:#fff;
  border:1px solid var(--border);
  border-radius:18px;
  position:relative;
  overflow:hidden;
}
.hero:before{
  content:"";
  position:absolute;
  inset:0 0 auto 0;
  height:5px;
  background:linear-gradient(90deg,var(--sitcope-green),var(--sitcope-red));
}
.hero-title{
  font-size:clamp(26px,4vw,44px);
  font-weight:900;
  letter-spacing:-.02em;
}
.hero-subtitle{ color:var(--muted); max-width:60ch; }

/* Status chips */
.status-chip{
  border:1px solid var(--border);
  border-radius:16px;
  padding:14px 16px;
  background:rgba(16,24,40,.02);
}
.status-chip.chip-ok{
  background:linear-gradient(180deg, rgba(15,107,58,.06), rgba(16,24,40,.01));
  border-color: rgba(15,107,58,.18);
}
.status-chip.chip-warn{
  background:linear-gradient(180deg, rgba(194,24,27,.06), rgba(16,24,40,.01));
  border-color: rgba(194,24,27,.16);
}

/* Panels */
.panel{
  border:1px solid var(--border);
  border-radius:18px;
  background:#fff;
}
.title{
  font-size:clamp(24px,3.4vw,42px);
  font-weight:900;
  letter-spacing:-.02em;
}

/* Avatar */
.avatar-wrap{
  width: 220px;
  max-width: 100%;
  margin: 0 auto;
}
.avatar-img{
  width:100%;
  aspect-ratio: 1 / 1;
  border-radius: 22px;
  object-fit: cover;
  border:1px solid rgba(16,24,40,.10);
  background: var(--soft);
}
.avatar-ph{
  width:100%;
  aspect-ratio: 1 / 1;
  border-radius: 22px;
  border:1px solid rgba(16,24,40,.10);
  background: var(--soft);
  display:flex;
  align-items:center;
  justify-content:center;
}
.avatar-ph span{
  font-weight:900;
  font-size: 54px;
  color: rgba(16,24,40,.45);
}

/* Mini grid */
.grid-mini{
  display:grid;
  grid-template-columns: repeat(3, minmax(0,1fr));
  gap:12px;
}
@media (max-width: 767.98px){
  .grid-mini{ grid-template-columns:1fr; }
}
.mini{
  border:1px solid var(--border);
  border-radius:16px;
  background:rgba(16,24,40,.02);
  padding:12px 14px;
}
.mini-label{
  font-size:.78rem;
  letter-spacing:.10em;
  text-transform:uppercase;
  color:rgba(16,24,40,.55);
  font-weight:900;
  margin-bottom:4px;
}
.mini-value{
  font-weight:900;
}

/* Note */
.note{
  border-left:4px solid rgba(15,107,58,.35);
  background:rgba(16,24,40,.02);
  border-radius:14px;
  padding:12px 14px;
}

/* Buttons (si luego agregas) */
.btn-sitcope{
  background:var(--sitcope-green);
  border:1px solid var(--sitcope-green);
  color:#fff;
  font-weight:900;
}
.btn-sitcope:hover{
  background:var(--sitcope-green-2);
  border-color:var(--sitcope-green-2);
  color:#fff;
}

.muted{ color:var(--muted); }
.site-footer{ border-top:1px solid var(--border); background:#fff; }