/* ==========================================================================
   Vivid · Base de conocimiento — portal del cliente.
   Mismo lenguaje que la nota de venta y el alta de tickets: banda azul marino con los cortes
   del logo y filo dorado, tarjetas blancas que se montan sobre la banda, Montserrat en títulos.
   Todo cuelga de .vkp; lo común con el panel (texto del artículo, índice, voto) viene de vivid-kb.css.

   1. Página y banda   3. Tarjetas y categorías   5. Artículo
   2. Buscador         4. Listas y ayuda          6. Pantallas chicas
   ========================================================================== */
@import url('https://fonts.googleapis.com/css2?family=Montserrat:wght@500;600;700;800&display=swap');

/* 1. Página y banda ------------------------------------------------------- */
body:has(.vkp){background:#F3F4F8;overflow-x:hidden}
body:has(.vkp) .navbar.header{margin-bottom:0}
.vkp{--navy:#242A56;--navy2:#2C3368;--blue:#004AAD;--gold:#F2B01E;--gold-d:#B07D05;--ink:#393A56;--muted:#767991;--line:#E6E8F0;--soft:#F3F4F8;
  color:var(--ink);font-size:15px;line-height:1.55;-webkit-font-smoothing:antialiased;padding-bottom:56px}
.vkp *{box-sizing:border-box}
.vkp h1,.vkp h2,.vkp-h,.vkp-cat-head b,.vkp-btn,.vkp-search button{font-family:Montserrat,system-ui,-apple-system,"Segoe UI",sans-serif}

.vkp-band{position:relative;width:100vw;margin-left:calc(50% - 50vw);background:var(--navy);color:#fff;border-bottom:4px solid var(--gold)}
/* Los cortes van en una capa aparte para que las sugerencias del buscador puedan salir de la banda */
.vkp-band::before{content:"";position:absolute;inset:0 0 0 auto;width:42%;background:var(--navy2);clip-path:polygon(0 0,100% 0,100% 100%,30% 100%);pointer-events:none}
.vkp-band::after{content:"";position:absolute;top:0;right:0;width:13%;height:62%;background:var(--blue);clip-path:polygon(0 0,100% 0,100% 100%);pointer-events:none}
.vkp-band-in{position:relative;z-index:3;max-width:1000px;margin:0 auto;padding:18px 24px 78px;display:flex;align-items:center;justify-content:space-between;gap:14px 24px;flex-wrap:wrap}
.vkp-band.home .vkp-band-in{display:block;text-align:center;padding:46px 24px 104px}
.vkp-band small{display:block;font:600 11px Montserrat,sans-serif;letter-spacing:.32em;text-transform:uppercase;color:var(--gold);margin-bottom:10px}
.vkp-band h1{margin:0 0 8px;font-size:36px;font-weight:700;letter-spacing:-.01em;line-height:1.12;color:#fff}
.vkp-band p{margin:0 auto 24px;max-width:560px;color:#C9CEE3;font-size:15.5px}

/* Migajas sobre la banda */
.vkp-band .vkb-crumbs{margin:0;flex:1 1 300px;min-width:0}
.vkp-band .vkb-crumbs ol{font-size:13.5px}
.vkp-band .vkb-crumbs li,.vkp-band .vkb-crumbs a{color:#C9CEE3}
.vkp-band .vkb-crumbs a:hover{color:#fff}
.vkp-band .vkb-crumbs a i{color:var(--gold)}
.vkp-band .vkb-crumbs li+li::before{color:rgba(255,255,255,.4)}
.vkp-band .vkb-crumbs li[aria-current] span{color:#fff}

/* 2. Buscador ------------------------------------------------------------- */
.vkp-search{position:relative;display:flex;align-items:center;flex:0 1 340px;height:44px;background:#fff;border-radius:12px;box-shadow:0 10px 24px -14px rgba(0,0,0,.55);text-align:left}
.vkp-band.home .vkp-search{max-width:620px;height:58px;margin:0 auto;border-radius:16px}
.vkp-search>i{flex:none;width:44px;text-align:center;color:#A9ACBF;font-size:15px}
.vkp-band.home .vkp-search>i{width:54px;font-size:17px}
.vkp-search input{flex:1;min-width:0;height:100%;border:0;background:transparent;outline:0;color:var(--ink);font-size:15px;padding:0 8px 0 0}
.vkp-band.home .vkp-search input{font-size:16.5px}
.vkp-search input::placeholder{color:#A9ACBF}
.vkp-search input::-webkit-search-cancel-button{display:none}
.vkp-search:focus-within{box-shadow:0 0 0 3px rgba(242,176,30,.55),0 10px 24px -14px rgba(0,0,0,.55)}
.vkp-search button{flex:none;height:calc(100% - 10px);margin-right:5px;padding:0 16px;border:0;border-radius:9px;background:var(--gold);color:var(--navy);font-size:13px;font-weight:700;letter-spacing:.02em;cursor:pointer;transition:filter .12s}
.vkp-band.home .vkp-search button{padding:0 24px;border-radius:12px;font-size:14px;height:calc(100% - 12px);margin-right:6px}
.vkp-search button:hover{filter:brightness(1.06)}
.vkp-suggest{position:absolute;top:calc(100% + 8px);left:0;right:0;z-index:20;background:#fff;border:1px solid var(--line);border-radius:14px;box-shadow:0 18px 40px -18px rgba(36,42,86,.45);padding:6px;max-height:60vh;overflow:auto}
.vkp-suggest[hidden]{display:none}
.vkp-suggest a{display:flex;align-items:center;gap:11px;padding:9px 10px;border-radius:10px;color:var(--ink)}
.vkp-suggest a:hover,.vkp-suggest a.on{background:var(--soft)}
.vkp-suggest b{display:block;font-size:14.5px;font-weight:600;color:var(--navy);line-height:1.3}
.vkp-suggest small{display:block;margin:0;font:500 12px/1.4 inherit;font-family:inherit;letter-spacing:0;text-transform:none;color:var(--muted)}
.vkp-suggest p{margin:0;padding:10px 12px;font-size:13.5px;color:var(--muted)}
.vkp-suggest .all{justify-content:space-between;border-top:1px solid var(--line);border-radius:0 0 10px 10px;margin-top:4px;font-size:13px;font-weight:600;color:var(--blue)}
.vkp mark{background:#FFF1C7;color:inherit;border-radius:3px;padding:0 1px}

/* 3. Tarjetas y categorías ------------------------------------------------ */
.vkp-wrap{position:relative;z-index:2;max-width:1000px;margin:0 auto;padding:0 24px}
.vkp-lift{margin-top:-56px}
.vkp-card{background:#fff;border:1px solid var(--line);border-radius:14px;padding:24px 26px;margin-bottom:18px;box-shadow:0 10px 24px -20px rgba(36,42,86,.5)}
.vkp-card.flush{padding:0;overflow:hidden}
.vkp-h{display:flex;align-items:center;gap:10px;margin:30px 2px 14px;font-size:12px;font-weight:600;letter-spacing:.16em;text-transform:uppercase;color:var(--navy)}
.vkp-h i{color:var(--blue);font-size:14px}

.vkp-cats{display:grid;grid-template-columns:repeat(auto-fit,minmax(min(100%,400px),1fr));gap:16px;margin-bottom:18px}
.vkp-cat{display:flex;flex-direction:column;min-width:0;background:#fff;border:1px solid var(--line);border-radius:14px;padding:22px 22px 16px;box-shadow:0 10px 24px -20px rgba(36,42,86,.5);transition:transform .15s,box-shadow .15s,border-color .15s}
.vkp-cat:hover{transform:translateY(-2px);border-color:color-mix(in srgb,var(--vkb-c) 35%,var(--line));box-shadow:0 18px 34px -22px rgba(36,42,86,.55)}
.vkp-cat-head{display:flex;align-items:center;gap:14px;color:var(--ink);min-width:0}
.vkp-cat-head>span:last-child{display:flex;flex-direction:column;min-width:0}
.vkp-cat-head b{font-size:17px;font-weight:700;color:var(--navy);line-height:1.25;overflow-wrap:anywhere}
.vkp-cat-head small{font-size:12.5px;color:var(--muted)}
.vkp-cat>p{margin:12px 0 0;font-size:14px;color:var(--muted);line-height:1.5}
.vkp-cat ul{list-style:none;margin:14px -10px 0;padding:10px 0 0;border-top:1px solid var(--line)}
.vkp-cat li a{display:flex;align-items:center;justify-content:space-between;gap:10px;padding:8px 10px;border-radius:9px;color:var(--ink);font-size:14.5px;line-height:1.35}
.vkp-cat li a span{min-width:0;overflow-wrap:anywhere}
.vkp-cat li a i{flex:none;font-size:10px;color:#C3C7D9;transition:transform .12s,color .12s}
.vkp-cat li a:hover{background:var(--soft);color:var(--navy)}
.vkp-cat li a:hover i{color:var(--blue);transform:translateX(2px)}
.vkp-more{align-self:flex-start;margin-top:8px;display:inline-flex;align-items:center;gap:7px;font-size:13px;font-weight:600;color:var(--blue)}
.vkp-more:hover{color:var(--navy)}
.vkp-more i{font-size:11px}

.vkp-cathead{display:flex;align-items:center;gap:18px}
.vkp-cathead h1{margin:0 0 3px;font-size:26px;font-weight:700;letter-spacing:-.01em;color:var(--navy);line-height:1.2}
.vkp-cathead p{margin:0 0 3px;color:var(--muted);font-size:15px}
.vkp-cathead small{font-size:12.5px;color:var(--muted)}

.vkp-chips{display:flex;flex-wrap:wrap;gap:10px;margin-bottom:18px}
.vkp-chips a{display:inline-flex;align-items:center;gap:9px;padding:7px 14px 7px 8px;background:#fff;border:1px solid var(--line);border-radius:999px;color:var(--navy);font-size:14px;font-weight:600;transition:border-color .12s,box-shadow .12s}
.vkp-chips a:hover{border-color:#D3D7E6;box-shadow:0 8px 18px -14px rgba(36,42,86,.5)}
.vkp-chips small{font-size:12px;font-weight:600;color:var(--muted)}

/* 4. Listas y ayuda ------------------------------------------------------- */
.vkp-list{list-style:none;margin:0;padding:0}
.vkp-list li+li{border-top:1px solid var(--line)}
.vkp-row{display:flex;align-items:center;gap:15px;padding:16px 22px;color:var(--ink);transition:background .12s}
.vkp-row:hover{background:#FAFBFE}
.vkp-row-ic{display:inline-flex;align-items:center;justify-content:center;flex:none;width:34px;height:34px;border-radius:10px;background:#EAF0FB;color:var(--blue);font-size:14px}
.vkp-row-main{flex:1;min-width:0;display:flex;flex-direction:column;gap:2px}
.vkp-row-main b{font-size:15.5px;font-weight:600;color:var(--navy);line-height:1.35;overflow-wrap:anywhere}
.vkp-row-main>span{font-size:13.5px;color:var(--muted);line-height:1.5;display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;overflow:hidden;overflow-wrap:anywhere}
.vkp-row-main small{font-size:12px;font-weight:600;color:var(--muted);letter-spacing:.02em}
.vkp-row-go{flex:none;font-size:12px;color:#C3C7D9;transition:transform .12s,color .12s}
.vkp-row:hover .vkp-row-go{color:var(--blue);transform:translateX(3px)}
.vkp-found{margin:0;padding:14px 22px;border-bottom:1px solid var(--line);font-size:14px;color:var(--muted)}
.vkp-found b{color:var(--navy)}

.vkp-help{display:flex;align-items:center;gap:16px 18px;flex-wrap:wrap;margin-top:28px;padding:22px 26px;border-radius:14px;background:var(--navy);color:#fff;position:relative;overflow:hidden}
.vkp-help::after{content:"";position:absolute;top:0;right:0;bottom:0;width:34%;background:var(--navy2);clip-path:polygon(30% 0,100% 0,100% 100%,0 100%);pointer-events:none}
.vkp-help>*{position:relative;z-index:1}
.vkp-help-ic{display:inline-flex;align-items:center;justify-content:center;flex:none;width:46px;height:46px;border-radius:12px;background:rgba(242,176,30,.16);color:var(--gold);font-size:19px}
.vkp-help-text{flex:1 1 260px;min-width:0;display:flex;flex-direction:column;gap:2px}
.vkp-help-text b{font:700 17px Montserrat,sans-serif;color:#fff;line-height:1.3}
.vkp-help-text span{font-size:14px;color:#C9CEE3}
.vkp-help-act{display:flex;gap:10px;flex-wrap:wrap}
.vkp-btn{display:inline-flex;align-items:center;gap:8px;height:44px;padding:0 20px;border-radius:999px;background:var(--gold);color:var(--navy);font-size:13.5px;font-weight:700;white-space:nowrap;transition:filter .12s,transform .12s}
.vkp-btn:hover{filter:brightness(1.06);transform:translateY(-1px);color:var(--navy)}
.vkp-btn.wa{background:rgba(255,255,255,.1);color:#fff;box-shadow:inset 0 0 0 1px rgba(255,255,255,.28)}
.vkp-btn.wa i{color:#25D366;font-size:16px}
.vkp-btn.wa:hover{color:#fff;background:rgba(255,255,255,.16)}

/* 5. Artículo ------------------------------------------------------------- */
.vkp-read{display:grid;grid-template-columns:minmax(0,1fr) 270px;gap:18px;align-items:start}
.vkp-read:has(.vkb-side:empty),.vkp-read:not(:has(.vkb-side .vkp-card:not([hidden]))){grid-template-columns:minmax(0,1fr)}
.vkp-read:not(:has(.vkb-side .vkp-card:not([hidden]))) .vkp-article{max-width:780px;margin-left:auto;margin-right:auto;width:100%}
.vkp-article{padding:34px 38px 28px;margin-bottom:0}
.vkp-article h1{margin:0;font-size:31px;font-weight:700;letter-spacing:-.015em;line-height:1.18;color:var(--navy);overflow-wrap:anywhere}
.vkp-meta{display:flex;flex-wrap:wrap;align-items:center;gap:6px 18px;margin-top:14px;padding-bottom:22px;border-bottom:1px solid var(--line);font-size:13px;color:var(--muted)}
.vkp-meta i{color:#A9ACBF;margin-right:3px}
.vkp-copy{margin-left:auto;display:inline-flex;align-items:center;gap:6px;padding:5px 12px;border:1px solid var(--line);border-radius:999px;background:#fff;color:var(--navy);font-size:12.5px;font-weight:600;cursor:pointer;transition:border-color .12s,background .12s}
.vkp-copy:hover{border-color:#D3D7E6;background:var(--soft)}
.vkp-copy i{color:var(--blue);margin:0}
.vkp-copy.ok{border-color:#BFE5CD;background:#E7F8EE;color:#157347}
.vkp-copy.ok i{color:#157347}
.vkp .vkb-prose{font-size:16.5px;line-height:1.75;padding-top:26px}
.vkp .vkb-prose h1,.vkp .vkb-prose h2,.vkp .vkb-prose h3,.vkp .vkb-prose h4{font-family:Montserrat,system-ui,sans-serif;scroll-margin-top:24px}
.vkp .vkb-prose h2{font-size:21px;margin-top:34px}
.vkp .vkb-prose h3{font-size:17.5px}
.vkp .vkb-prose a{color:var(--blue)}

.vkp-vote{margin-top:26px;padding:18px 20px;border-radius:14px;background:var(--soft);justify-content:flex-start}
.vkp-vote b{font:700 15px Montserrat,sans-serif;color:var(--navy)}
.vkp-vote .vkb-vote-btns button{display:inline-flex;align-items:center;gap:7px;height:40px;padding:0 18px;border:1px solid #D3D7E6;border-radius:999px;background:#fff;color:var(--navy);font-size:14px;font-weight:600;cursor:pointer;transition:border-color .12s,background .12s,color .12s}
.vkp-vote .vkb-vote-btns button:hover:not(:disabled){border-color:var(--navy)}
.vkp-vote .vkb-vote-btns button:disabled{cursor:default;opacity:.55}
.vkp-vote .vkb-vote-btns button.on{background:var(--navy);border-color:var(--navy);color:#fff;opacity:1}
.vkp-vote-help{display:inline-flex;align-items:center;gap:6px;font-size:13.5px;font-weight:700;color:var(--blue)}
.vkp-vote-help[hidden]{display:none}
.vkp-vote-help i{font-size:11px}
.vkp .vkb-prevnext a{border-radius:12px;padding:14px 16px}
.vkp .vkb-prevnext b{font-size:14.5px}
.vkp .vkb-side{top:20px}
.vkp .vkb-side .vkp-card{margin:0;padding:18px 18px 14px}
.vkp .vkb-side h2{font-size:12px;font-weight:600;letter-spacing:.14em;text-transform:uppercase}
.vkp .vkb-side h2:has(.vkb-tile){font-size:14px;font-weight:700;letter-spacing:0;text-transform:none}
.vkp .vkb-side-list a,.vkp .vkb-toc a{font-size:13.5px}
.vkp .vkb-empty{padding:40px 20px}

/* 6. Pantallas chicas ----------------------------------------------------- */
@media(max-width:991px){
  .vkp-read{grid-template-columns:minmax(0,1fr)}
}
@media(max-width:640px){
  .vkp-wrap{padding:0}
  .vkp-band-in{padding:14px 14px 72px}
  .vkp-band.home .vkp-band-in{padding:32px 14px 92px}
  .vkp-band h1{font-size:27px}
  .vkp-band p{font-size:14.5px;margin-bottom:20px}
  .vkp-band .vkb-crumbs{flex-basis:100%}
  .vkp-search{flex-basis:100%}
  .vkp-band.home .vkp-search{height:52px}
  .vkp-band.home .vkp-search button{padding:0 16px}
  .vkp-search input{font-size:16px} /* 16 px: iOS no hace zoom */
  .vkp-cats{grid-template-columns:minmax(0,1fr)}
  .vkp-card{padding:20px 18px}
  .vkp-article{padding:24px 20px 22px}
  .vkp-article h1{font-size:25px}
  .vkp .vkb-prose{font-size:16px}
  .vkp-row{padding:14px 16px;gap:12px}
  .vkp-cathead{gap:14px}
  .vkp-cathead h1{font-size:22px}
  .vkp-cathead .vkb-tile.xl{width:48px;height:48px;border-radius:14px;font-size:20px}
  .vkp-copy{margin-left:0}
  .vkp-help{padding:20px 18px}
  .vkp-help-act{flex-basis:100%}
  .vkp-btn{flex:1;justify-content:center}
}