/* ── Addins Hingenia — landing pública + account ── */

/* ============================================================
   LANDING /hingenia-addins/  (scope: .vektor-landing)
   ============================================================ */

.vektor-landing{
    --bg:#fff; --bg-soft:#f6f7f9; --canvas:#eef0f4; --ink:#0b0b12; --muted:#6b7280;
    --border:#e6e7eb; --border-soft:#eef0f3; --blue:#2563eb; --blue-dark:#1d4ed8; --blue-soft:#eff4ff;
    --green:#16a34a; --green-soft:#e9f9ef; --amber:#f59e0b; --amber-soft:#fef3c7; --amber-d:#92400e;
    --cyan:#0891b2; --cyan-soft:#ecfeff; --violet:#7c3aed; --violet-soft:#f3edff;
    --radius:16px; --maxw:1240px;
    font-family:'Inter',-apple-system,BlinkMacSystemFont,'Segoe UI',sans-serif;
    background:var(--canvas);
    color:var(--ink);
    -webkit-font-smoothing:antialiased;
    line-height:1.55;
    position:relative;
}
.vektor-landing *{ box-sizing:border-box; }
.vektor-landing::after{ content:''; position:absolute; inset:0; z-index:-1; background-image:radial-gradient(rgba(11,11,18,.045) 1px, transparent 1px); background-size:26px 26px; mask-image:linear-gradient(to bottom,#000 0%,transparent 78%); -webkit-mask-image:linear-gradient(to bottom,#000 0%,transparent 78%); pointer-events:none; }
.vektor-landing a{ color:inherit; text-decoration:none; }
.vektor-landing button{ font-family:inherit; cursor:pointer; }
.vektor-landing .wrap{ max-width:var(--maxw); margin:0 auto; padding:0 28px; }

/* HERO */
.vektor-landing .hero{ padding:54px 0 22px; text-align:center; }
.vektor-landing .hero-in{ max-width:880px; margin:0 auto; }
.vektor-landing .badge{ display:inline-flex; align-items:center; gap:8px; border:1px solid var(--border); background:var(--bg); border-radius:999px; padding:6px 14px; font-size:11px; font-weight:600; letter-spacing:.12em; text-transform:uppercase; color:var(--muted); font-family:ui-monospace,'SF Mono',Menlo,monospace; }
.vektor-landing .badge .dot{ width:6px; height:6px; border-radius:50%; background:var(--blue); box-shadow:0 0 8px var(--blue); }
.vektor-landing h1.title{ margin:20px auto 0; font-size:clamp(36px,5.2vw,66px); font-weight:900; letter-spacing:-.035em; line-height:1.0; max-width:18ch; }
.vektor-landing h1.title .accent{ color:var(--blue); }
.vektor-landing .subtitle{ margin:18px auto 0; font-size:17.5px; color:var(--muted); max-width:62ch; line-height:1.55; }
.vektor-landing .subtitle b{ color:var(--ink); font-weight:700; }
.vektor-landing .hero-cta{ margin-top:28px; display:inline-flex; gap:10px; flex-wrap:wrap; justify-content:center; }
.vektor-landing .btn{ display:inline-flex; align-items:center; gap:8px; font-family:inherit; font-weight:700; cursor:pointer; border:1px solid transparent; font-size:14px; padding:10px 16px; border-radius:11px; transition:.13s; }
.vektor-landing .btn-primary{ background:var(--blue); color:#fff; box-shadow:0 10px 22px -12px rgba(37,99,235,.6); }
.vektor-landing .btn-primary:hover{ background:var(--blue-dark); }
.vektor-landing .btn-ghost{ background:var(--bg); border-color:var(--border); color:var(--ink); }
.vektor-landing .btn-ghost:hover{ background:var(--bg-soft); }
.vektor-landing .btn-dark{ background:var(--ink); color:#fff; }
.vektor-landing .btn-dark:hover{ background:#1d1d28; }
.vektor-landing .hero-cta .btn{ padding:13px 22px; font-size:14.5px; border-radius:13px; }
.vektor-landing .hero-cta .btn-primary{ box-shadow:0 18px 36px -16px rgba(37,99,235,.65); }
.vektor-landing .trust{ display:flex; flex-wrap:wrap; justify-content:center; gap:10px 22px; margin-top:22px; font-size:12.5px; color:#334155; font-weight:600; }
.vektor-landing .trust span{ display:inline-flex; align-items:center; gap:7px; }
.vektor-landing .trust .ic{ width:20px; height:20px; border-radius:6px; background:var(--blue-soft); color:var(--blue); display:grid; place-items:center; }

/* RIBBON MOCKUP */
.vektor-landing .ribbon-wrap{ max-width:1040px; margin:46px auto 0; padding:0 28px; }
.vektor-landing .ribbon{ background:var(--bg); border:1px solid var(--border); border-radius:18px; box-shadow:0 40px 80px -40px rgba(13,20,45,.34); overflow:hidden; }
.vektor-landing .ribbon-tabs{ display:flex; gap:0; padding:0 14px; border-bottom:1px solid var(--border); background:linear-gradient(180deg,#f9fafb,#fff); }
.vektor-landing .ribbon-tab{ font-size:12px; font-weight:700; color:var(--muted); padding:11px 14px; border-bottom:2px solid transparent; }
.vektor-landing .ribbon-tab.on{ color:var(--blue); border-bottom-color:var(--blue); background:#fff; }
.vektor-landing .ribbon-body{ display:grid; grid-template-columns:repeat(5,1fr); }
.vektor-landing .rib-panel{ padding:14px 18px 11px; border-right:1px solid var(--border-soft); display:flex; flex-direction:column; align-items:stretch; gap:9px; }
.vektor-landing .rib-panel:last-child{ border-right:0; }
.vektor-landing .rib-tools{ display:grid; grid-template-columns:repeat(auto-fit,minmax(56px,1fr)); gap:8px; }
.vektor-landing .rib-btn{ display:flex; flex-direction:column; align-items:center; gap:5px; padding:8px 4px; border-radius:10px; border:1px solid transparent; font-size:9.5px; font-weight:700; color:#334155; text-align:center; line-height:1.15; transition:.13s; background:transparent; }
.vektor-landing .rib-btn:hover{ background:var(--bg-soft); border-color:var(--border); }
.vektor-landing .rib-btn .ico{ width:30px; height:30px; border-radius:8px; display:grid; place-items:center; color:#fff; }
.vektor-landing .rib-name{ font-size:10.5px; font-weight:800; letter-spacing:.04em; text-transform:uppercase; color:var(--muted); text-align:center; padding-top:6px; border-top:1px solid var(--border-soft); margin-top:auto; }
.vektor-landing .rib-name b{ color:var(--ink); font-weight:800; }
.vektor-landing .rib-btn.soon{ position:relative; }
.vektor-landing .rib-btn.soon .ico{ opacity:.55; filter:saturate(.55); }
.vektor-landing .rib-btn.soon::after{ content:'Pronto'; position:absolute; top:2px; right:2px; font-size:8px; font-weight:800; letter-spacing:.04em; text-transform:uppercase; color:var(--amber-d); background:var(--amber-soft); border:1px solid #f6d989; padding:1px 5px; border-radius:999px; line-height:1.2; }
.vektor-landing .soon-tag{ display:inline-flex; align-items:center; gap:4px; font-size:9.5px; font-weight:800; letter-spacing:.05em; text-transform:uppercase; color:var(--amber-d); background:var(--amber-soft); border:1px solid #f6d989; padding:2px 8px; border-radius:999px; vertical-align:middle; margin-left:7px; }
.vektor-landing .soon-tag::before{ content:''; width:5px; height:5px; border-radius:50%; background:var(--amber); }

/* SECTIONS */
.vektor-landing section{ padding:70px 0 30px; }
.vektor-landing .sec-h{ text-align:center; max-width:780px; margin:0 auto 40px; }
.vektor-landing .sec-h .eyebrow{ font-size:11px; font-weight:700; letter-spacing:.16em; text-transform:uppercase; color:var(--blue); font-family:ui-monospace,'SF Mono',Menlo,monospace; }
.vektor-landing .sec-h h2{ margin-top:8px; font-size:clamp(28px,3.5vw,42px); font-weight:900; letter-spacing:-.03em; line-height:1.1; }
.vektor-landing .sec-h h2 b{ color:var(--blue); font-weight:900; }
.vektor-landing .sec-h p{ margin-top:14px; font-size:16px; color:var(--muted); line-height:1.55; }

/* features */
.vektor-landing .feats{ display:grid; grid-template-columns:repeat(5,1fr); gap:14px; }
.vektor-landing .feat{ background:var(--bg); border:1px solid var(--border); border-left:3px solid var(--blue); border-radius:16px; padding:22px 20px; display:flex; flex-direction:column; gap:11px; transition:.14s; }
.vektor-landing .feat:hover{ transform:translateY(-3px); box-shadow:0 22px 44px -28px rgba(13,20,45,.28); }
.vektor-landing .feat .ic{ width:42px; height:42px; border-radius:12px; background:var(--blue-soft); color:var(--blue); display:grid; place-items:center; }
.vektor-landing .feat.c2{ border-left-color:var(--cyan); }
.vektor-landing .feat.c2 .ic{ background:var(--cyan-soft); color:var(--cyan); }
.vektor-landing .feat.c3{ border-left-color:var(--green); }
.vektor-landing .feat.c3 .ic{ background:var(--green-soft); color:var(--green); }
.vektor-landing .feat.c4{ border-left-color:var(--amber); }
.vektor-landing .feat.c4 .ic{ background:var(--amber-soft); color:var(--amber-d); }
.vektor-landing .feat.c5{ border-left-color:var(--violet); }
.vektor-landing .feat.c5 .ic{ background:var(--violet-soft); color:var(--violet); }
.vektor-landing .feat h3{ font-size:15.5px; font-weight:800; letter-spacing:-.01em; }
.vektor-landing .feat p{ font-size:13.5px; color:#475068; line-height:1.55; }

/* paneles */
.vektor-landing .panels-grid{ display:grid; grid-template-columns:1fr 1fr; gap:18px; }
.vektor-landing .panel-c{ background:var(--bg); border:1px solid var(--border); border-radius:18px; overflow:hidden; display:flex; flex-direction:column; }
.vektor-landing .panel-c-h{ display:flex; align-items:center; gap:12px; padding:18px 20px; border-bottom:1px solid var(--border); }
.vektor-landing .panel-c-h .pi{ width:42px; height:42px; border-radius:12px; display:grid; place-items:center; color:#fff; flex-shrink:0; }
.vektor-landing .panel-c-h .pt{ flex:1; min-width:0; }
.vektor-landing .panel-c-h .pt b{ font-size:16px; font-weight:900; letter-spacing:-.01em; display:flex; align-items:center; gap:9px; }
.vektor-landing .panel-c-h .pt b .cnt{ font-size:10.5px; font-weight:800; padding:2px 9px; border-radius:999px; background:var(--blue-soft); color:var(--blue); }
.vektor-landing .panel-c-h .pt span{ display:block; font-size:12.5px; color:var(--muted); margin-top:3px; }
.vektor-landing .panel-c.c2 .panel-c-h .pi{ background:var(--cyan); }
.vektor-landing .panel-c.c2 .pt b .cnt{ background:var(--cyan-soft); color:var(--cyan); }
.vektor-landing .panel-c.c3 .panel-c-h .pi{ background:var(--green); }
.vektor-landing .panel-c.c3 .pt b .cnt{ background:var(--green-soft); color:var(--green); }
.vektor-landing .panel-c.c4 .panel-c-h .pi{ background:var(--amber); }
.vektor-landing .panel-c.c4 .pt b .cnt{ background:var(--amber-soft); color:var(--amber-d); }
.vektor-landing .panel-c.c5 .panel-c-h .pi{ background:var(--violet); }
.vektor-landing .panel-c.c5 .pt b .cnt{ background:var(--violet-soft); color:var(--violet); }
.vektor-landing .panel-c.c1 .panel-c-h .pi{ background:var(--blue); }
.vektor-landing .tool{ display:flex; gap:13px; padding:14px 20px; border-top:1px solid var(--border-soft); }
.vektor-landing .tool:first-of-type{ border-top:0; }
.vektor-landing .tool .tic{ width:34px; height:34px; border-radius:10px; background:var(--bg-soft); color:var(--blue); display:grid; place-items:center; flex-shrink:0; }
.vektor-landing .panel-c.c2 .tool .tic{ color:var(--cyan); }
.vektor-landing .panel-c.c3 .tool .tic{ color:var(--green); }
.vektor-landing .panel-c.c4 .tool .tic{ color:var(--amber-d); }
.vektor-landing .panel-c.c5 .tool .tic{ color:var(--violet); }
.vektor-landing .tool .ti{ flex:1; min-width:0; }
.vektor-landing .tool .ti b{ font-size:13.5px; font-weight:800; display:block; letter-spacing:-.005em; }
.vektor-landing .tool .ti p{ font-size:12.5px; color:#475068; margin-top:3px; line-height:1.5; }

/* planes */
.vektor-landing .plans{ display:grid; grid-template-columns:repeat(3,1fr); gap:18px; align-items:start; }
.vektor-landing .plan{ background:var(--bg); border:1px solid var(--border); border-radius:20px; padding:26px 24px; position:relative; display:flex; flex-direction:column; transition:.16s; }
.vektor-landing .plan:hover{ transform:translateY(-3px); box-shadow:0 28px 56px -34px rgba(13,20,45,.36); }
.vektor-landing .plan.pop{ border:2px solid var(--blue); background:linear-gradient(180deg,#f6f9ff 0%,#fff 30%); }
.vektor-landing .plan.pop::before{ content:'Más popular'; position:absolute; top:-12px; left:50%; transform:translateX(-50%); background:var(--blue); color:#fff; font-size:11px; font-weight:800; letter-spacing:.05em; text-transform:uppercase; padding:5px 12px; border-radius:999px; box-shadow:0 14px 24px -12px rgba(37,99,235,.7); }
.vektor-landing .plan-h{ display:flex; align-items:center; justify-content:space-between; gap:10px; }
.vektor-landing .plan-h b{ font-size:18px; font-weight:900; letter-spacing:-.02em; }
.vektor-landing .plan-h .ct{ font-size:11px; font-weight:800; background:var(--blue-soft); color:var(--blue); padding:4px 10px; border-radius:999px; }
.vektor-landing .plan-d{ font-size:13.5px; color:var(--muted); margin-top:8px; }
.vektor-landing .plan ul{ list-style:none; margin:20px 0 22px; padding:0; display:flex; flex-direction:column; gap:9px; }
.vektor-landing .plan li{ font-size:13.5px; display:flex; gap:9px; align-items:flex-start; color:#1f2430; }
.vektor-landing .plan li .ck{ width:18px; height:18px; border-radius:6px; background:var(--blue-soft); color:var(--blue); display:grid; place-items:center; flex-shrink:0; margin-top:1px; }
.vektor-landing .plan li.x{ color:#9ca3af; }
.vektor-landing .plan li.x .ck{ background:#f1f3f7; color:#9ca3af; }
.vektor-landing .plan li b{ color:var(--ink); font-weight:700; }
.vektor-landing .plan-cta{ margin-top:auto; width:100%; justify-content:center; padding:13px; font-size:14px; }
.vektor-landing .plan.pop .plan-cta{ background:var(--blue); color:#fff; box-shadow:0 16px 30px -14px rgba(37,99,235,.65); }

/* FAQ */
.vektor-landing .faq{ max-width:820px; margin:0 auto; display:flex; flex-direction:column; gap:10px; }
.vektor-landing .fq{ background:var(--bg); border:1px solid var(--border); border-radius:14px; overflow:hidden; transition:.14s; }
.vektor-landing .fq:hover{ border-color:#d8def0; }
.vektor-landing .fq button{ width:100%; display:flex; align-items:center; gap:12px; padding:16px 20px; border:0; background:transparent; font-family:inherit; font-size:15px; font-weight:700; color:var(--ink); text-align:left; }
.vektor-landing .fq button .chev{ margin-left:auto; color:var(--muted); transition:transform .2s; flex-shrink:0; }
.vektor-landing .fq.open button .chev{ transform:rotate(90deg); color:var(--blue); }
.vektor-landing .fq.open{ border-color:var(--blue); box-shadow:0 14px 30px -22px rgba(37,99,235,.4); }
.vektor-landing .fq-body{ display:none; padding:0 20px 18px 52px; font-size:14px; color:#475068; line-height:1.6; }
.vektor-landing .fq.open .fq-body{ display:block; }

/* CTA final */
.vektor-landing .final{ max-width:var(--maxw); margin:24px auto 0; padding:0 28px; }
.vektor-landing .final-band{ position:relative; overflow:hidden; border-radius:24px; background:var(--blue); color:#fff; padding:50px 44px; text-align:center; }
.vektor-landing .final-band::after{ content:''; position:absolute; right:-90px; bottom:-110px; width:320px; height:320px; border-radius:50%; background:rgba(255,255,255,.08); }
.vektor-landing .final-band::before{ content:''; position:absolute; left:-70px; top:-90px; width:240px; height:240px; border-radius:50%; background:rgba(255,255,255,.06); }
.vektor-landing .final h2{ position:relative; font-size:clamp(26px,3.4vw,38px); font-weight:900; letter-spacing:-.03em; }
.vektor-landing .final p{ position:relative; color:rgba(255,255,255,.92); margin:14px auto 0; max-width:560px; font-size:15.5px; }
.vektor-landing .final .ctas{ position:relative; margin-top:26px; display:inline-flex; gap:10px; flex-wrap:wrap; justify-content:center; }
.vektor-landing .final .btn-w{ background:#fff; color:var(--blue-dark); font-weight:800; padding:13px 22px; border-radius:13px; font-size:14.5px; display:inline-flex; align-items:center; gap:7px; border:0; cursor:pointer; font-family:inherit; }
.vektor-landing .final .btn-w:hover{ filter:brightness(.96); }
.vektor-landing .final .btn-o{ background:transparent; color:#fff; border:1px solid rgba(255,255,255,.5); padding:13px 22px; border-radius:13px; font-size:14.5px; font-weight:700; display:inline-flex; align-items:center; gap:7px; cursor:pointer; font-family:inherit; }
.vektor-landing .final .btn-o:hover{ background:rgba(255,255,255,.1); }

@media (max-width:1240px){
    .vektor-landing .feats{ grid-template-columns:repeat(3,1fr); }
}
@media (max-width:1080px){
    .vektor-landing .feats{ grid-template-columns:1fr 1fr; }
    .vektor-landing .panels-grid{ grid-template-columns:1fr; }
    .vektor-landing .plans{ grid-template-columns:1fr; }
    .vektor-landing .ribbon-body{ grid-template-columns:1fr 1fr; }
    .vektor-landing .rib-panel{ border-right:0; border-bottom:1px solid var(--border-soft); }
}
@media (max-width:640px){
    .vektor-landing .feats{ grid-template-columns:1fr; }
    .vektor-landing .ribbon-body{ grid-template-columns:1fr; }
}

/* ============================================================
   DARK MODE (html.dark) — el campus/tema alterna con html.dark.
   La landing usa tokens (--bg/--canvas/--ink...) + algunos colores
   fijos; aquí se redefinen los tokens y se corrigen los fijos.
   ============================================================ */
html.dark .vektor-landing{
    --bg:#15171d; --bg-soft:#1b1e26; --canvas:#0c0d11; --ink:#e9ebf1; --muted:#9aa3b4;
    --border:#272b34; --border-soft:#21242c; --blue-soft:#172339;
    --green-soft:#11251b; --amber-soft:#2a2113; --cyan-soft:#0e2329; --violet-soft:#1d1630;
}
/* Patrón de puntos del fondo: claro en dark */
html.dark .vektor-landing::after{ background-image:radial-gradient(rgba(255,255,255,.05) 1px, transparent 1px); }
/* Sombra del ribbon más sutil sobre fondo oscuro */
html.dark .vektor-landing .ribbon{ box-shadow:0 40px 80px -40px rgba(0,0,0,.6); }
/* Textos secundarios con color fijo */
html.dark .vektor-landing .trust,
html.dark .vektor-landing .rib-btn{ color:#aeb6c4; }
html.dark .vektor-landing .feat p,
html.dark .vektor-landing .tool .ti p,
html.dark .vektor-landing .fq-body{ color:#9aa3b4; }
html.dark .vektor-landing .plan li{ color:#cdd3df; }
/* Tabs del ribbon: gradiente claro → oscuro */
html.dark .vektor-landing .ribbon-tabs{ background:linear-gradient(180deg,#15171d,#1b1e26); }
html.dark .vektor-landing .ribbon-tab.on{ background:#1b1e26; }
/* Plan "popular": gradiente claro → oscuro */
html.dark .vektor-landing .plan.pop{ background:linear-gradient(180deg,#16203a 0%,#15171d 32%); }
/* Item deshabilitado del plan */
html.dark .vektor-landing .plan li.x{ color:#6b7280; }
html.dark .vektor-landing .plan li.x .ck{ background:#22262f; color:#6b7280; }
/* Hover FAQ + borde de soon-tag */
html.dark .vektor-landing .fq:hover{ border-color:#3a4252; }
html.dark .vektor-landing .soon-tag,
html.dark .vektor-landing .rib-btn.soon::after{ border-color:#5a4a1e; }
/* Botón "Descargar trial" (.btn-dark usa --ink, claro en dark): botón
   claro con texto oscuro, CTA que resalta sobre el fondo oscuro. */
html.dark .vektor-landing .btn-dark{ background:#e9ebf1; color:#0b0b12; }
html.dark .vektor-landing .btn-dark:hover{ background:#ffffff; }

/* ============================================================
   ACCOUNT — /mis-licencias/
   ============================================================ */
.vektor-account-page { padding: 40px 0; min-height: 60vh; }