:root{
  /* Paleta calm: teal + sky + sage + stone */
  --bg: #0f1720;           /* azul petróleo muy oscuro */
  --panel: #121a22;        /* card */
  --text: #e6f0f2;         /* texto principal */
  --muted: #98a4ab;        /* texto secundario */
  --brand: #7dd3fc;        /* sky-300 */
  --accent: #5eead4;       /* teal-300 */
  --ring: 0 0 0 .20rem rgba(125,211,252,.35);
  --shadow: 0 10px 30px rgba(0,0,0,.35);
  --border: 1px solid rgba(255,255,255,.06);
}

html[data-theme="light"]{
  --bg: #f6f8fa;
  --panel: #ffffff;
  --text: #0c141a;
  --muted: #5e6870;
  --brand: #0ea5e9;
  --accent: #14b8a6;
  --shadow: 0 10px 24px rgba(0,0,0,.08);
  --border: 1px solid rgba(0,0,0,.06);
}

*{box-sizing:border-box}
html, body{height:100%}
body{
  margin:0;
  font-family: Inter, system-ui, -apple-system, "Segoe UI", Roboto, "Helvetica Neue", Arial;
  background:
    radial-gradient(1200px 800px at 10% -10%, rgba(20,94,83,.25), transparent 60%),
    radial-gradient(1200px 800px at 90% -10%, rgba(14,165,233,.25), transparent 60%),
    var(--bg);
  color: var(--text);
  line-height: 1.6;
}

.container{width:min(1400px, 97%); margin:0 auto}

/* Topbar */
.topbar{position:sticky;top:0;z-index:10;backdrop-filter:saturate(140%) blur(8px);border-bottom:var(--border)}
.topbar-inner{display:flex;align-items:center;gap:1rem;padding:.8rem 0}
.brand{display:flex;align-items:center;gap:.6rem;text-decoration:none;color:var(--text);font-weight:700}
.brand-mark{width:28px;height:28px}
.nav{display:flex;gap:.5rem;margin-left:auto}
.nav-link{color:var(--muted);text-decoration:none;padding:.5rem .75rem;border-radius:.8rem}
.nav-link:hover{background:rgba(255,255,255,.06);color:var(--text)}
.actions{display:flex;gap:.4rem}
.icon-btn{background:transparent;border:var(--border);color:var(--text);padding:.45rem .6rem;border-radius:.7rem;cursor:pointer}
.hamburger{display:none}
@media (max-width: 760px){ .nav{display:none} .hamburger{display:inline-block} }

/* Hero */
.hero{padding:4rem 0 2rem;text-align:center}
.hero-badge{display:inline-block;background:rgba(94,234,212,.16);color:var(--accent);border:1px dashed rgba(94,234,212,.4);padding:.35rem .6rem;border-radius:999px;font-weight:700;letter-spacing:.3px}
.hero h1{font-family: Outfit, Inter, sans-serif; font-size: clamp(2rem, 4vw, 3.2rem); margin:.8rem 0 .3rem}
.hero p{color:var(--muted);max-width:720px;margin:.2rem auto 1.2rem}
.hero-cta{display:flex;gap:.6rem;justify-content:center;flex-wrap:wrap}

/* Buttons */
.btn{background:linear-gradient(135deg, var(--brand), var(--accent));color:#052318;border:0;padding:.7rem 1rem;border-radius:.9rem;font-weight:700;cursor:pointer;box-shadow:var(--shadow)}
.btn:focus{outline:none;box-shadow:var(--ring)}
.btn-ghost{background:transparent;color:var(--text);border:var(--border)}

/* KPI row */
.kpis{display:grid;grid-template-columns:repeat(4,1fr);gap:.9rem;margin:1.2rem 0 2rem}
.kpi{display:flex;gap:.8rem;align-items:center;background:linear-gradient(180deg, rgba(255,255,255,.04), rgba(255,255,255,.02));border:var(--border);padding:.9rem;border-radius:1rem;box-shadow:var(--shadow)}
.kpi-icon{font-size:1.4rem}
.kpi-body h3{margin:0 0 .1rem;font-size:.9rem;color:var(--muted)}
.kpi-body p{margin:0;font-weight:700}
@media (max-width: 960px){ .kpis{grid-template-columns:1fr 1fr} }
@media (max-width: 640px){ .kpis{grid-template-columns:1fr} }

/* --- PILLARS STRIP (3 cards horizontales) --- */
.pillars-row{
  display:grid;
  grid-template-columns:repeat(3, 1fr);
  gap:1rem;
  margin:1.2rem 0 2rem;
}
.pillar-card{
  background:var(--panel);
  border:var(--border);
  border-radius:1.1rem;
  box-shadow:var(--shadow);
  padding:1rem;
  display:flex;
  flex-direction:column;
}
.pillar-header{
  display:flex;
  gap:.8rem;
  align-items:center;
  margin-bottom:.4rem;
}
.pillar-icon{ font-size:1.6rem }
.pillar-list{ margin:.3rem 0 1rem; padding-left:1.1rem }
.pillar-cta{ margin-top:auto; display:flex; gap:.6rem; flex-wrap:wrap }

@media (max-width: 960px){
  .pillars-row{ grid-template-columns:1fr; }
}

/* Grid cards (home) */
.grid{display:grid;grid-template-columns:2fr 1fr 1fr;gap:1rem;margin:1rem 0 3rem}
.card{background:var(--panel);border:var(--border);padding:1rem;border-radius:1.1rem;box-shadow:var(--shadow)}
.card-head h3{margin:.2rem 0}
.muted{color:var(--muted)}
.card-chart{grid-column:1 / span 2}
@media (max-width: 960px){ .grid{grid-template-columns:1fr} .card-chart{grid-column:auto} }

/* Checklist & breath */
.checklist{list-style:none;padding:0;margin:.5rem 0 0}
.checklist li{padding:.35rem 0}
.checklist input{accent-color: var(--accent)}
.bullets{margin:.2rem 0 1rem;padding-left:1.1rem}
.bullets li{margin:.25rem 0}
.quote{margin:.5rem 0 0;padding:.6rem .8rem;border-left:3px solid var(--accent);background:rgba(20,94,83,.08);border-radius:.4rem}

.breath-panel{text-align:center}
.timer-display{font-size:1.9rem;font-weight:800;margin:.5rem 0}
.btn-row{display:flex;gap:.6rem;justify-content:center}

/* Generic sections & utilities (para páginas internas) */
.section{padding:2rem 0}
.two-col{display:grid;grid-template-columns:1fr 1fr;gap:1rem}
.notes{width:100%;min-height:160px;padding:.75rem;border-radius:.8rem;border:var(--border);background:var(--panel);color:var(--text)}
.footer{padding:2rem 0;color:var(--muted)}

@media (max-width: 960px){
  .two-col{grid-template-columns:1fr}
}