/* =========================================================
   NOVO — sistema de diseño (piloto, solo en index.html)
   Basado en novo-design-system.css del brief de diseño.
   Único cambio respecto al original: .btn -> .novo-btn, porque
   .btn ya existe en styles.css con otro tratamiento visual.
   ========================================================= */

/* ---------- 1. TOKENS ---------- */
:root{
  /* base */
  --bg:#ffffff;
  --ink:#141318;
  --ink-soft:#63606e;

  /* escala lavanda → violeta (el corazón de la paleta) */
  --lav-50:#f7f3fd;
  --lav-100:#ece4fb;
  --lav-200:#d6c5f4;
  --lav-300:#b79bec;
  --lav-400:#8f6de0;

  /* acento */
  --purple:#8b5cf6;
  --purple-deep:#6d3fd6;

  /* neutros de apoyo */
  --dark:#131217;
  --card:#ffffff;
  --line:rgba(20,19,24,.10);
  --grey-pill:#eceaf0;

  /* forma */
  --radius-md:20px;
  --radius-card:16px;
  --radius-pill:999px;

  /* profundidad */
  --shadow:0 18px 40px -28px rgba(50,30,90,.5);
  --shadow-lift:0 26px 50px -26px rgba(70,40,140,.45);
  --shadow-purple:0 26px 44px -22px rgba(109,63,214,.95);

  /* movimiento */
  --ease:cubic-bezier(.2,.7,.2,1);
  --dur:.45s;
}

/* ---------- 2. TIPOGRAFÍA ---------- */
.novo{
  font-family:'Manrope',system-ui,-apple-system,'Segoe UI',Roboto,Helvetica,Arial,sans-serif;
  color:var(--ink);
}
/* display del hero: 800, mayúsculas, interlineado por debajo de 1 */
.t-display{font-size:clamp(34px,4vw,56px);line-height:.98;letter-spacing:-.028em;font-weight:800;text-transform:uppercase}
/* wordmark gigante de fondo */
.t-wordmark{font-size:clamp(84px,19.5vw,266px);line-height:.76;letter-spacing:-.045em;font-weight:800}
/* título de sección */
.t-section{font-size:15px;font-weight:800;letter-spacing:.04em;text-transform:uppercase}
/* cuerpo */
.t-body{font-size:15px;line-height:1.7;color:var(--ink-soft);max-width:46ch}
.t-small{font-size:12.5px;line-height:1.55;color:var(--ink-soft)}

/* ---------- 3. EFECTOS REUTILIZABLES ---------- */

/* 3.1 Bloom: resplandor radial que respira. Va detrás del sujeto del hero. */
.fx-bloom{
  position:absolute;left:50%;bottom:6%;transform:translateX(-50%);
  width:min(720px,88%);aspect-ratio:1.15/1;border-radius:50%;
  z-index:1;pointer-events:none;filter:blur(6px);
  background:radial-gradient(circle at 50% 55%,
    rgba(255,255,255,.98) 0%,
    rgba(226,211,253,.8) 26%,
    rgba(139,92,246,.42) 50%,
    rgba(139,92,246,0) 72%);
  animation:fx-breathe 18s ease-in-out infinite;
}
@keyframes fx-breathe{
  0%,100%{transform:translateX(-50%) scale(1);opacity:.92}
  50%{transform:translateX(-50%) scale(1.06);opacity:1}
}

/* 3.2 Grano: rompe el degradado y le quita el aspecto plano */
.fx-grain::after{
  content:"";position:absolute;inset:0;z-index:6;pointer-events:none;
  opacity:.22;mix-blend-mode:soft-light;
  background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='160' height='160'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.85' numOctaves='3'/%3E%3C/filter%3E%3Crect width='160' height='160' filter='url(%23n)'/%3E%3C/svg%3E");
}

/* 3.3 Aurora: degradados desenfocados en movimiento dentro de una tarjeta */
.fx-aurora{
  position:absolute;inset:-14%;
  background:
    radial-gradient(48% 70% at 18% 8%, #d6bdff 0%, transparent 62%),
    radial-gradient(52% 80% at 82% 4%, #8558f0 0%, transparent 66%),
    radial-gradient(70% 90% at 50% 100%, #2a1552 0%, transparent 70%),
    linear-gradient(165deg,#4a2a94,#8b5cf6);
  filter:blur(14px) saturate(1.15);
  transition:transform .8s var(--ease),filter .8s var(--ease);
}
.fx-aurora-host:hover .fx-aurora{transform:scale(1.12) rotate(1.5deg);filter:blur(10px) saturate(1.3)}

/* 3.4 Elevación al pasar el cursor */
.fx-lift{transition:transform var(--dur) var(--ease),box-shadow var(--dur) var(--ease)}
.fx-lift:hover{transform:translateY(-5px);box-shadow:var(--shadow-lift)}

/* 3.5 Aparición al entrar en pantalla (requiere el observer de novo-effects.js) */
.js .reveal{opacity:0;transform:translateY(16px)}
.js .reveal.in{
  opacity:1;transform:none;
  transition:opacity .7s var(--ease) var(--d,0s),transform .7s var(--ease) var(--d,0s);
}

/* 3.6 Entrada orquestada del hero */
@keyframes fx-rise{from{opacity:0;transform:translateY(18px)}to{opacity:1;transform:none}}
/* OJO: si el elemento ya está centrado con translateX(-50%), usa este otro
   keyframe, porque `transform:none` borraría el centrado. */
@keyframes fx-rise-centered{
  from{opacity:0;transform:translateX(-50%) translateY(26px)}
  to{opacity:1;transform:translateX(-50%)}
}

/* ---------- 4. COMPONENTES ---------- */

/* 4.1 Botón cápsula con disco de flecha (renombrado .btn -> .novo-btn) */
.novo-btn{
  position:relative;display:inline-flex;align-items:center;gap:14px;
  padding:10px 10px 10px 26px;border:0;border-radius:var(--radius-pill);
  background:var(--purple);color:#fff;font-weight:700;font-size:14px;cursor:pointer;
  box-shadow:0 10px 24px -14px rgba(109,63,214,.9);
  transition:transform .35s var(--ease),box-shadow .35s var(--ease);
  overflow:hidden;isolation:isolate;
}
.novo-btn::before{
  content:"";position:absolute;inset:0;z-index:-1;border-radius:inherit;
  background:linear-gradient(115deg,var(--purple-deep),var(--purple) 45%,#b794ff);
  opacity:0;transition:opacity .35s var(--ease);
}
.novo-btn:hover{transform:translateY(-3px);box-shadow:0 20px 34px -16px rgba(109,63,214,.85)}
.novo-btn:hover::before{opacity:1}
.novo-btn:active{transform:translateY(-1px)}
.novo-btn .dot{
  width:30px;height:30px;border-radius:50%;background:#fff;color:var(--purple);
  display:grid;place-items:center;flex:none;transition:transform .35s var(--ease);
}
.novo-btn:hover .dot{transform:translateX(3px) rotate(-45deg)}
.novo-btn--ghost{
  background:transparent;color:var(--ink);box-shadow:none;
  border:1.5px solid var(--line);
}
.novo-btn--ghost::before{display:none}
.novo-btn--ghost .dot{background:var(--purple);color:#fff}
.novo-btn--ghost:hover{box-shadow:var(--shadow)}
.novo-btn--sm{padding:8px 8px 8px 20px;font-size:13px}
.novo-btn--sm .dot{width:24px;height:24px}
.header-actions .novo-btn{font-weight:500}

/* 4.2 Óvalos de categoría — proporción ~2.3:1, escalonados, uno inclinado */
.pills{display:grid;grid-template-columns:repeat(4,1fr);gap:18px;align-items:start}
.pill{
  border-radius:var(--radius-pill);aspect-ratio:2.35/1;
  display:grid;place-items:center;padding:12px 18px;text-align:center;
  font-size:12.5px;font-weight:700;letter-spacing:.06em;text-transform:uppercase;
  transition:transform var(--dur) var(--ease),box-shadow var(--dur) var(--ease);
}
.pill:hover{transform:translateY(-6px);box-shadow:var(--shadow-lift)}
.pill--soft{background:var(--lav-100);aspect-ratio:2.5/1;margin-top:16px}
.pill--dark{background:var(--dark);color:#fff;aspect-ratio:2.2/1;margin-top:4px}
.pill--hero{
  background:linear-gradient(135deg,var(--purple-deep),var(--purple) 55%,#a683ff);color:#fff;
  aspect-ratio:2.05/1;margin-top:-12px;rotate:-6deg;box-shadow:var(--shadow-purple);
  transition:transform var(--dur) var(--ease),box-shadow var(--dur) var(--ease),rotate var(--dur) var(--ease);
}
.pill--hero:hover{rotate:-8deg}
.pill--grey{background:var(--grey-pill);aspect-ratio:2.55/1;margin-top:18px}

/* ---------- 5. ACCESIBILIDAD (no negociable) ---------- */
.novo :focus-visible{outline:2px solid var(--purple);outline-offset:3px;border-radius:8px}
@media (prefers-reduced-motion: reduce){
  .novo *,.novo *::before,.novo *::after{animation:none !important;transition-duration:.01ms !important}
  .js .reveal{opacity:1;transform:none}
}