/* ===== TOKENS ===== */
:root{
  --brand:#7c3aed;
  --brand-2:#ec4899;

  --bg:#ffffff;
  --bg-grad-1:#ffffff;   /* blanco */
  --bg-grad-2:#faf5ff;   /* lila muy suave */
  --bg-grad-3:#fff8e6;   /* dorado muy suave */

  --card:#ffffff; 
  --text:#0f172a; 
  --muted:#5b6473; 
  --border:#ead9ef;

  --btn:#111827; 
  --btn-fg:#ffffff; 
  --btn-ghost:#ffffff; 
  --btn-ghost-fg:#111827;

  --s-2:8px; --s-3:12px; --s-4:16px; --s-5:20px;
  --s-6:24px; --s-7:28px; --s-8:32px; --s-10:40px; --s-12:48px;

  --ring: 0 0 0 3px color-mix(in oklab, var(--brand-2) 35%, transparent);

  /* parallax */
  --parallax-strong: 0px;
  --parallax-soft: 0px;
}

/* Tema oscuro */
:root[data-theme="dark"]{
  --bg:#0f1115; --bg-grad-1:#0f1115; --bg-grad-2:#141725; --bg-grad-3:#1a1420;
  --card:#151823; --text:#e8ecf1; --muted:#9aa4b2; --border:#2a2f3d;
  --btn:#1f2433; --btn-fg:#e8ecf1; --btn-ghost:#121622; --btn-ghost-fg:#e8ecf1;
  --ring: 0 0 0 3px color-mix(in oklab, var(--brand) 35%, transparent);
}

/* ===== BASE ===== */
*{box-sizing:border-box}
html,body{
  margin:0; padding:0; color:var(--text);
  font-family:Inter,system-ui,Segoe UI,Roboto,Arial,sans-serif;
  -webkit-font-smoothing:antialiased; text-rendering:optimizeLegibility;
  background: var(--bg);
}

/* Capa de gradientes reactiva al scroll (parallax) */
body::before{
  content:""; position:fixed; inset:-12% -12% -12% -12%; z-index:-2; pointer-events:none;
  background:
    radial-gradient(1200px 420px at 12% 0%, color-mix(in oklab, var(--brand-2) 12%, transparent), transparent),
    radial-gradient(1200px 420px at 88% 8%, color-mix(in oklab, var(--brand) 12%, transparent), transparent),
    linear-gradient(180deg, var(--bg-grad-1), var(--bg-grad-2), var(--bg-grad-3));
  background-repeat:no-repeat;
  filter: saturate(1.02);
  transform: translateY(var(--parallax-strong));
  will-change: transform;
}

/* Tipografía */
p{line-height:1.55; margin:0}
h1,h2,h3{margin:0; line-height:1.25}
.center{text-align:center}

/* ===== DECORACIÓN (con parallax) ===== */
.bg-decor{position:fixed; inset:0; pointer-events:none; z-index:-1;
  transform: translateY(var(--parallax-soft)); will-change: transform;
}
.sparkle,.petal{position:absolute; filter:blur(.2px); opacity:.65}
.sparkle{
  width:12px;height:12px;border-radius:50%;
  background:radial-gradient(circle, #fff 0 35%, transparent 36%);
  box-shadow:0 0 14px color-mix(in oklab, var(--brand-2) 60%, #fff);
  animation:float 7s ease-in-out infinite;
}
.s1{top:12%; left:8%} .s2{top:28%; right:10%} .s3{bottom:20%; left:22%}
.petal{
  width:16px;height:16px;border-radius:50%; opacity:.85; transform:rotate(25deg);
  background:
    radial-gradient(circle at 60% 60%, #ffd1e8 0 40%, transparent 41%),
    radial-gradient(circle at 40% 40%, #ffc0df 0 40%, transparent 41%);
  animation:float 9s ease-in-out infinite reverse;
}
.p1{top:18%; right:22%} .p2{bottom:12%; right:8%} .p3{top:62%; left:12%}
@keyframes float{0%,100%{transform:translateY(0)} 50%{transform:translateY(-5px)}}

/* ===== LAYOUT ===== */
.container{max-width:1100px; margin:0 auto; padding:0 var(--s-4)}
.narrow{max-width:900px}
.stack-xs > * + *{margin-top:var(--s-3)}
.stack-sm > * + *{margin-top:var(--s-4)}
.stack-md > * + *{margin-top:var(--s-6)}
.stack-lg > * + *{margin-top:var(--s-8)}
.stack-xl > * + *{margin-top:var(--s-10)}

.grid-2{
  display:grid; gap:var(--s-8);
  grid-template-columns: repeat(2, minmax(260px,1fr));
}
@media (max-width: 880px){
  .grid-2{ grid-template-columns: 1fr }
}

/* ===== HEADER ===== */
.site-header{
  display:flex; align-items:center; justify-content:space-between;
  padding:var(--s-6) var(--s-4); border-bottom:1px solid var(--border);
  backdrop-filter:saturate(1.05) blur(2px);
}
.brand h1{font-size:clamp(22px, 3vw, 44px)}
.subtitle{margin-top:var(--s-2); color:var(--muted); font-weight:500}
.brand-badge{
  display:inline-flex; align-items:center; gap:8px;
  padding:4px 10px; border-radius:999px; font-weight:700; font-size:12px;
  background:linear-gradient(135deg, color-mix(in oklab, var(--brand) 18%, transparent), color-mix(in oklab, var(--brand-2) 18%, transparent));
  border:1px solid var(--border); color:color-mix(in oklab, var(--text) 85%, #fff0);
}
.brand-badge .dot{width:10px; height:10px; border-radius:50%; background:linear-gradient(135deg, var(--brand), var(--brand-2))}

/* ===== CARDS ===== */
.card{
  background:var(--card); border:1px solid var(--border); border-radius:18px;
  padding:18px 20px;
  box-shadow:0 18px 50px rgba(246, 44, 125, .07);
}

/* ===== HERO SPOTLIGHT ===== */
.overline{
  display:inline-block; padding:4px 10px; border-radius:999px;
  font-size:12px; font-weight:700; letter-spacing:.04em; text-transform:uppercase;
  color:color-mix(in oklab, var(--text) 70%, #fff0);
  background:linear-gradient(135deg, color-mix(in oklab, var(--brand) 16%, #fff0), color-mix(in oklab, var(--brand-2) 16%, #fff0));
  border:1px solid var(--border);
}

.hero-spotlight{
  position:relative; isolation:isolate; overflow:hidden;
  padding:clamp(22px, 4vw, 44px) clamp(22px, 5vw, 56px);
  background:
    radial-gradient(700px 220px at 50% 12%, color-mix(in oklab, var(--brand-2) 18%, transparent), transparent),
    radial-gradient(1200px 380px at 50% 120%, color-mix(in oklab, var(--brand) 12%, transparent), transparent),
    var(--card);
  box-shadow:0 22px 60px rgba(236,72,153,.10), inset 0 0 0 1px var(--border);
  border-radius:22px;
}
.hero-spotlight::before{
  content:""; position:absolute; inset:-30% -30% -30% -30%;
  z-index:-1; pointer-events:none; mix-blend-mode:soft-light;
  background:
    radial-gradient(340px 220px at 50% 18%, color-mix(in oklab, var(--brand-2) 22%, transparent), transparent),
    conic-gradient(from 200deg at 50% 18%, color-mix(in oklab, var(--brand) 14%, transparent), transparent 20% 80%, color-mix(in oklab, var(--brand-2) 10%, transparent));
  animation:heroGlow 8s ease-in-out infinite alternate;
  filter:saturate(1.02);
}
@keyframes heroGlow{
  0%   { transform:translateY(-6px) scale(1);   opacity:.85; }
  100% { transform:translateY(6px)  scale(1.02); opacity:.95; }
}
.hero-spotlight h2{ font-size:clamp(22px, 3.2vw, 34px); margin-bottom:6px; }
.hero-spotlight p{ max-width:880px; margin-inline:auto; }

/* CTA dentro del hero */
.hero-cta{ margin-top:18px; }
.btn-hero{
  padding:12px 20px; font-size:15px; border-radius:14px;
  background:linear-gradient(90deg, var(--brand), var(--brand-2));
  color:#fff; border:none; text-decoration:none;
  box-shadow:0 10px 20px rgba(236, 72, 153, .20);
  transition:transform .18s ease, box-shadow .18s ease, background-position .18s ease;
  background-size:150% 100%; background-position:0% 0%;
}
.btn-hero:hover{
  transform:translateY(-1px);
  background-position:100% 0%;
  box-shadow:0 14px 26px rgba(236,72,153,.26);
}

/* ===== Otras tarjetas ===== */
.hero-notegood{
  background:
    radial-gradient(1200px 320px at 10% -10%, color-mix(in oklab, var(--brand-2) 15%, transparent), transparent),
    radial-gradient(1000px 280px at 110% 0%, color-mix(in oklab, var(--brand) 13%, transparent), transparent),
    var(--card);
}
.quote-card{
  background:
    radial-gradient(900px 220px at -10% 10%, color-mix(in oklab, var(--brand-2) 12%, transparent), transparent),
    var(--card);
}
.soft-pink{
  background:
    radial-gradient(640px 220px at 50% -30%, color-mix(in oklab, var(--brand-2) 10%, transparent), transparent),
    var(--card);
}
.quote{font-style:italic; color:color-mix(in oklab, var(--brand-2) 75%, var(--text))}

/* ===== BOTONES ===== */
.actions{display:flex; gap:var(--s-4); flex-wrap:wrap}
.btn{
  background:var(--btn); color:var(--btn-fg); border:1px solid var(--border);
  padding:10px 16px; border-radius:12px; cursor:pointer; font-weight:600;
  display:flex; align-items:center; justify-content:center;
}
.btn:hover{filter:brightness(1.05)}
.btn:focus-visible{outline:none; box-shadow:var(--ring)}
.btn-ghost{background:var(--btn-ghost); color:var(--btn-ghost-fg)}
.btn-malla{
  text-decoration:none; 
  background:linear-gradient(90deg, #a855f7, #ec4899);
  border:none; color:#fff;
  transition: transform .18s ease, box-shadow .18s ease, background-position .18s ease;
  background-size:150% 100%;
  background-position:0% 0%;
}
.btn-malla:hover{
  transform:translateY(-1px);
  box-shadow:0 8px 16px rgba(236, 72, 153, .25);
  background-position:100% 0%;
}

/* ===== FOOTER ===== */
.footer{max-width:900px; margin:var(--s-12) auto var(--s-10); padding:0 var(--s-4); color:var(--muted)}

/* ===== Bullets con íconos ===== */
.icon-list{ list-style:none; padding:0; margin:var(--s-4) auto 0; max-width:520px; text-align:left }
.icon-list li{
  display:grid; grid-template-columns:28px 1fr; align-items:start; gap:10px;
  padding:10px 0; border-bottom:1px dashed color-mix(in oklab, var(--brand-2) 25%, var(--border));
}
.icon-list li:last-child{ border-bottom:0 }
.icon-list .ico{ font-size:18px; line-height:1 }

/* ===== (estilos compartidos con malla; puedes dejarlos) ===== */
.legend{display:flex; gap:10px; flex-wrap:wrap; margin-bottom:14px}
.legend .chip{display:inline-flex; align-items:center; gap:8px; padding:6px 10px; border-radius:999px; background:color-mix(in oklab, var(--card) 70%, #0000); border:1px solid var(--border); font-size:13px}
.legend .swatch{width:12px; height:12px; border-radius:3px; border:1px solid var(--border)}
.toolbar{display:flex; gap:12px; align-items:center; flex-wrap:wrap; margin:10px 0 18px}
.switch{display:inline-flex; gap:8px; align-items:center; color:var(--muted); font-size:14px}
.search{flex:1; min-width:220px; padding:10px 12px; border-radius:12px; border:1px solid var(--border); background:color-mix(in oklab, var(--bg) 85%, #fff0); color:var(--text)}
.grid{display:grid; grid-template-columns:repeat(8,1fr); gap:14px}
.column{display:flex; flex-direction:column; gap:14px}
.col-title{position:sticky; top:80px; background:transparent; font-weight:700; color:color-mix(in oklab, var(--text) 85%, #fff0); margin:0 0 6px}
.card-materia{position:relative; background:var(--card); border:1px solid var(--border); border-radius:14px; padding:12px; display:flex; flex-direction:column; gap:8px}
.card-materia .header{display:flex; align-items:center; gap:8px}
.badge{font-size:12px; padding:2px 8px; border-radius:999px; border:1px solid var(--border); background:color-mix(in oklab, var(--bg) 80%, #fff0); color:color-mix(in oklab, var(--text) 85%, #fff0)}
.title{font-weight:700; line-height:1.2}
.meta{font-size:12px; color:var(--muted)}
.tags{display:flex; gap:6px; flex-wrap:wrap}
.tag{font-size:11px; padding:2px 6px; border-radius:6px; background:color-mix(in oklab, var(--bg) 80%, #fff0); border:1px solid var(--border); color:color-mix(in oklab, var(--text) 85%, #fff0)}
.statebar{display:flex; gap:8px; margin-top:4px}
.statebar button{flex:1; border-radius:10px; border:1px solid var(--border); padding:8px; cursor:pointer}
.state-ok{background:#102018; color:#b7f7c2; border-color:#1f3d2a}
.state-warn{background:#1f1b0a; color:#ffe69a; border-color:#473b13}
.state-locked{background:#1a161b; color:#ecb1b1; border-color:#3c1f26}
.locked{opacity:.6; filter:saturate(.8)}
.hidden{display:none}
.dot{width:10px; height:10px; border-radius:50%; border:1px solid var(--border); display:inline-block}
.tooltip{position:absolute; inset:auto 8px 8px auto; background:color-mix(in oklab, var(--bg) 92%, #fff0); border:1px solid var(--border); border-radius:10px; padding:8px 10px; color:color-mix(in oklab, var(--text) 85%, #fff0); font-size:12px; max-width:360px; display:none}
.card-materia:hover .tooltip{display:block}

/* ===== HEADER CENTRADO ===== */
.site-header--center{
  display: grid;
  grid-template-columns: 1fr auto 1fr; /* izq | centro | der */
  align-items: center;
  gap: 12px;
  padding: var(--s-6) var(--s-4);
  border-bottom: 1px solid var(--border);
  backdrop-filter: saturate(1.05) blur(2px);
}

.site-header--center .brand--center{
  text-align: center;
  justify-self: center; /* centro exacto */
}

.site-header--center .actions{
  justify-self: end;  /* botones a la derecha */
  display: flex;
  gap: var(--s-4);
  flex-wrap: wrap;
}

/* Badge y tipografías mantienen estilos previos */
.brand--center h1{
  font-size: clamp(24px, 3.2vw, 48px);
  line-height: 1.15;
  margin: 6px 0 2px;
}
.brand--center .subtitle{
  margin-top: var(--s-2);
  color: var(--muted);
  font-weight: 500;
}

/* Responsive: en móviles el título queda centrado y los botones arriba a la derecha */
@media (max-width: 880px){
  .site-header--center{
    grid-template-columns: 1fr auto; /* quitar columna izquierda */
    grid-template-areas:
      "actions actions"
      "brand   brand";
  }
  .site-header--center .header-spacer{ display: none; }
  .site-header--center .actions{
    grid-area: actions;
    justify-self: end;
  }
  .site-header--center .brand--center{
    grid-area: brand;
    margin-top: var(--s-4);
  }
}