/* Páginas de índice (/help/guias/ y /help/servicios/): contenido sobre los mismos tokens de la portada
   (que aportan dsc-portada-v1.css: pt-wrap, pt-top, pt-brand, pt-pill, pt-foot, pt-acred). */
/* Tokens propios (antes venían de portada/guias según la página): la ficha y los índices ya no dependen de qué CSS cargue cada página. Valores claros idénticos a portada/guías y su variante oscura. */
:root{
  --ink:#0f172a; --muted:#4D5A70; --line:rgba(15,23,42,.12);
  --surf:#FFFFFF; --surf2:#EDF1F7; --ring:rgba(15,23,42,.12);
  --acc:#007a76; --r:18px;
}
html.dark, html.th-dark{
  --ink:#E8EDF5; --muted:#A5B1C4; --line:rgba(255,255,255,.12);
  --surf:#161F33; --surf2:#1F2A42; --ring:rgba(255,255,255,.12);
  --acc:#00a19c;
}
main.ip-wrap{ max-width:1100px; margin:0 auto; padding:34px 24px 56px; }
.ip-wrap h1{ margin:2px 0 4px; font-size:clamp(26px,4vw,36px); letter-spacing:-.02em; line-height:1.1; }
.ip-count{ margin:0 0 18px; color:var(--muted); font-size:14px; }
.ip-sec{ margin:0 0 26px; }
.ip-sec h2{ margin:0 0 12px; font-size:19px; letter-spacing:-.01em; }
.ip-cards{ display:grid; grid-template-columns:repeat(auto-fill, minmax(250px, 1fr)); gap:12px; }
.ip-card{ display:flex; flex-direction:column; gap:6px; background:var(--surf); border:1px solid var(--ring); border-radius:16px; padding:14px 16px; text-decoration:none; color:var(--ink); }
.ip-card strong{ font-size:15.5px; }
.ip-card span{ color:var(--muted); font-size:13.5px; line-height:1.45; }
.ip-card em{ margin-top:auto; font-style:normal; font-weight:700; font-size:13px; color:var(--acc); }
.ip-card:hover{ border-color:var(--acc); box-shadow:0 10px 24px rgba(16,24,40,.08); }
.ip-err{ color:var(--muted); font-size:15px; }
@media (max-width:560px){
  main.ip-wrap{ padding:24px 16px 44px; }
}

/* Ficha de servicio (modal local en /help/servicios/) */
.ip-ficha{ width:min(760px, calc(100vw - 32px)); max-height:min(760px, calc(100vh - 32px)); padding:0; border:1px solid var(--ring); border-radius:var(--r); background:var(--surf); color:var(--ink); overflow:auto; }
.ip-ficha::backdrop{ background:rgba(16,24,40,.45); }
.ip-ficha__bar{ display:flex; align-items:center; justify-content:space-between; padding:14px 18px 0; }
.ip-ficha__bar small{ color:var(--acc); font-weight:700; font-size:12px; letter-spacing:.06em; text-transform:uppercase; }
.ip-ficha__bar button{ border:1px solid var(--ring); background:var(--surf2); color:var(--ink); width:34px; height:34px; border-radius:999px; font-size:15px; cursor:pointer; }
.ip-ficha h2{ margin:2px 18px 0; font-size:24px; letter-spacing:-.02em; }
.ip-ficha [data-s]{ margin:6px 18px 0; color:var(--muted); font-size:14.5px; }
.ip-ficha [data-b]{ padding:6px 18px 18px; }
.ip-ficha__txt p{ margin:10px 0; font-size:15px; }
.ip-ficha h3{ margin:16px 0 2px; font-size:16.5px; }
.ip-ficha__embed{ margin:10px 0; }
.ip-ficha__pdf{ display:inline-flex; margin:8px 0; padding:9px 14px; border-radius:999px; background:var(--acc); color:#fff; font-weight:700; font-size:13.5px; text-decoration:none; }
.ip-ficha__guide{ display:inline-flex; margin:0 18px 18px; padding:10px 16px; border-radius:999px; border:1px solid var(--acc); color:var(--acc); font-weight:700; font-size:13.5px; text-decoration:none; }
.ip-ficha__guide:hover{ background:var(--acc); color:#fff; }
html.dark .ip-ficha{ background:var(--surf); }
.ip-ficha:not([open]){ display:none; }

/* Ficha de servicio como página (mismo aspecto que las guías) */
.sv-doc{ background:var(--surf); border:1px solid var(--ring); border-radius:16px; padding:22px 24px; }
.sv-doc h1{ margin:0 0 6px; font-size:26px; letter-spacing:-.02em; color:var(--ink); }
.sv-doc .sv-sum{ margin:0 0 14px; color:var(--muted); font-size:15.5px; }
.sv-doc h2{ margin:18px 0 4px; font-size:18px; color:var(--ink); }
.sv-doc .sv-body{ font-size:15px; }
.sv-doc .sv-body p{ margin:8px 0; }
.sv-doc .sv-body img{ max-width:100%; height:auto; border-radius:10px; }
.sv-doc .sv-body table{ border-collapse:collapse; width:100%; font-size:14px; }
.sv-doc .sv-body td,.sv-doc .sv-body th{ border:1px solid var(--ring); padding:6px 9px; text-align:left; }
.sv-doc .sv-body a{ color:var(--acc); }
.sv-pdf{ display:inline-flex; margin:8px 0 2px; padding:9px 14px; border-radius:999px; background:var(--acc); color:#fff; font-weight:700; font-size:13.5px; text-decoration:none; }
.sv-img{ display:block; max-width:100%; height:auto; border-radius:10px; margin:10px 0; }
.sv-doc .g-help{ margin-top:16px; }
.sv-loading{ color:var(--muted); }
.sv-doc .g-help{ display:flex; flex-wrap:wrap; align-items:center; justify-content:space-between; gap:10px 18px; }
.sv-doc .sv-sub{ margin:0 0 2px; color:var(--acc); font-weight:700; font-size:15px; }
.g-help .g-btn{ margin:0; }
.g-help span{ color:var(--muted); font-size:14px; }

/* La ficha hereda la caja g-card (radio/borde de las guías): ajustes finos del contenido del catálogo */
.sv-body > :first-child{ margin-top:0; }
.sv-body > :last-child{ margin-bottom:0; }
.sv-body h3{ margin:16px 0 6px; font-size:16.5px; color:var(--ink); }
.sv-body strong{ color:var(--ink); }
.sv-body figure{ margin:12px 0; text-align:center; }
.sv-body figcaption{ font-size:13px; color:var(--muted); margin-top:4px; }
.sv-body ul{ margin:6px 0; padding-left:20px; }
.sv-body li{ margin:4px 0; }
.sv-hero-sub{ font-weight:600; color:var(--acc); font-size:14px; }
.g-hero .sv-sub{ margin:2px 0 0; }
.g-toc a{ scroll-behavior:smooth; }
.g-sec{ scroll-margin-top:16px; }
.sv-actions{ display:flex; flex-wrap:wrap; align-items:center; justify-content:space-between; gap:10px 18px; margin-top:16px; }

/* ============ Ficha de servicio: modelo Reuna/Antivirus ============ */
.sv-doc{ background:none; border:none; border-radius:0; padding:0; }
body.sv-ficha{ overflow-x:hidden; }
body.sv-ficha .g-crumb{ display:none; }
.g-page.sv-wide{ max-width:1120px; }

/* Hero azul de ancho completo */
.sv-hero{ margin:-20px calc(50% - 50vw) 20px; background:linear-gradient(135deg,#003366,#002244); color:#fff; }
.sv-hero__in{ max-width:1080px; margin:0 auto; padding:34px 22px 30px; display:flex; flex-wrap:wrap; align-items:center; justify-content:space-between; gap:16px 28px; }
.sv-hero__txt{ flex:1 1 380px; }
.sv-badge{ display:inline-block; padding:5px 12px; border-radius:999px; border:1px solid rgba(255,255,255,.4); font:700 11px/1 var(--g-font); letter-spacing:.12em; text-transform:uppercase; color:rgba(255,255,255,.92); }
.sv-hero h1{ margin:12px 0 8px; font-size:clamp(28px,4.4vw,38px); letter-spacing:-.02em; color:#fff; }
.sv-hero p{ margin:4px 0 0; color:rgba(255,255,255,.86); font-size:15px; max-width:620px; }
.sv-hero .sv-sub{ color:#9fd8cf; font-weight:700; font-size:14px; }
.sv-hero__img{ flex:0 1 300px; max-width:300px; max-height:170px; width:auto; border-radius:14px; box-shadow:0 14px 34px rgba(4,20,38,.45); background:#fff; padding:6px; }

/* Cuerpo a dos columnas: menú lateral + contenido */
.sv-layout{ display:grid; grid-template-columns:216px minmax(0,1fr); gap:24px; align-items:start; }
.sv-side{ position:sticky; top:18px; background:var(--surf); border:1px solid var(--ring); border-radius:14px; padding:14px 14px 10px; }
.sv-side__cap{ margin:0 0 8px; font:700 11px var(--g-font); letter-spacing:.12em; text-transform:uppercase; color:var(--muted); }
.sv-side nav{ display:flex; flex-direction:column; gap:2px; }
.sv-side a{ display:block; padding:7px 10px; border-radius:9px; color:var(--ink); font:600 13.5px var(--g-font); text-decoration:none; }
.sv-side a:hover{ background:var(--surf2); }
.sv-side a.is-on{ background:var(--acc); color:#fff; }
.sv-main{ min-width:0; }

/* Secciones y mini-tarjetas */
.g-sec{ scroll-margin-top:16px; }
.sv-body h4{ margin:16px 0 8px; font-size:16px; color:var(--ink); }
.sv-minis{ display:grid; grid-template-columns:repeat(auto-fit,minmax(200px,1fr)); gap:10px; margin:10px 0; }
.sv-mini{ background:var(--surf2); border:1px solid var(--ring); border-top:3px solid var(--acc); border-radius:12px; padding:10px 12px; font-size:13.5px; }
.sv-mini strong{ color:var(--ink); }
.sv-tabhint{ margin:0 0 10px; color:var(--muted); font-size:13.5px; }

/* Pestañas interactivas: una a la vez */
.sv-tabs{ display:flex; flex-wrap:wrap; gap:8px; margin-bottom:14px; }
.sv-tab{ padding:8px 14px; border-radius:999px; border:1px solid var(--ring); background:var(--surf2); color:var(--ink); font:600 13.5px var(--g-font); cursor:pointer; }
.sv-tab:hover{ border-color:var(--acc); color:var(--acc); }
.sv-tab.is-on{ background:var(--acc); border-color:var(--acc); color:#fff; }
.sv-panel[hidden]{ display:none; }
.sv-panel iframe{ max-width:100%; }
.sv-body img{ max-width:100%; height:auto; }

/* Volver a Servicios */
.sv-back{ display:inline-flex; margin-top:18px; padding:10px 18px; border-radius:999px; background:#003366; color:#fff; font:700 13.5px var(--g-font); text-decoration:none; }
.sv-back:hover{ background:#002244; }

@media (max-width:980px){
  .sv-layout{ display:block; }
  .sv-side{ display:none; }
  .sv-hero{ margin:-16px -12px 16px; }
  .sv-hero__img{ max-width:220px; }
}

/* Índices de Servicios y Guías con la misma franja azul de las fichas y las guías (23 oct 2026). */
html, body{ overflow-x:clip; }
.ip-wrap > .ip-hero{ margin:-34px calc(50% - 50vw) 24px; }
.ip-hero .sv-hero__in{ max-width:1100px; padding:34px 24px 30px; }
.ip-hero h1{ margin:12px 0 8px; }
.ip-hero__row{ display:flex; flex-wrap:wrap; align-items:center; gap:10px; margin-top:14px !important; }
.ip-hero .ip-count{ margin:0; color:rgba(255,255,255,.86); font-size:14px; }
.ip-hero .ip-count:empty{ display:none; }
.ip-hero .g-crumb__copy{ margin:0; background:rgba(255,255,255,.1); border-color:rgba(255,255,255,.3); color:#fff; }
.ip-hero .g-crumb__copy:hover{ background:rgba(255,255,255,.18); border-color:rgba(255,255,255,.4); }
.ip-hero .g-crumb__copy.is-copied{ background:#0A7A45; border-color:#0A7A45; }
@media (max-width:640px){
  .ip-wrap > .ip-hero{ margin:-24px calc(50% - 50vw) 16px; }
  .ip-hero .sv-hero__in{ padding:26px 16px 24px; }
}

/* Paleta 3 (27 oct 2026): azul clásico UBB #003366 en cabeceras y bandas; verde azulado #007a76 como acento (contraste AA);
   fondo #FAFAFA, texto #0F172A. Restauración: ops/restore/20261027-paleta/. */
/* Verde Petronas decorativo (27 oct 2026): barras, bordes, halos y foco; el texto usa #007A76 (contraste AA). */
.sv-side a.is-on,.sv-side a:hover{border-color:#00A19C}