/* Sello del certificado (portado del sitio principal) */
/* ===== sello del certificado: pastilla permanente bajo el candado ===== */
.selloc{position:fixed;top:88px;left:16px;z-index:310;font-family:inherit}
.selloc .sc-chip{display:none;align-items:center;gap:8px;cursor:pointer;font-family:inherit;
  background:rgba(12,19,34,.94);backdrop-filter:blur(8px);
  border:1px solid rgba(143,180,224,.3);border-radius:999px;
  padding:8px 15px 8px 12px;font-size:12px;font-weight:300;color:rgba(222,231,245,.8);
  box-shadow:0 10px 28px rgba(0,0,0,.5);transition:border-color .22s,background .22s,transform .22s}
.selloc.listo .sc-chip{display:inline-flex}
.selloc .sc-chip:hover{border-color:rgba(143,180,224,.55);background:rgba(16,25,42,.97);transform:translateY(-1px)}
.selloc .sc-chip b{color:#fff;font-weight:600}
.selloc .sc-up{color:#8FB4E0;font-weight:600;line-height:1;display:inline-block;
  animation:scsube 1.9s ease-in-out infinite}
.selloc .sc-lock{width:13px;height:13px;flex:none;stroke:#8FB4E0;fill:none;stroke-width:2;
  stroke-linecap:round;stroke-linejoin:round}
.selloc .sc-card{display:none;position:relative;width:322px;max-width:calc(100vw - 32px);
  background:#0C1322;border:1px solid rgba(143,180,224,.28);border-radius:14px;
  box-shadow:0 22px 54px rgba(0,0,0,.6);padding:16px 17px 15px}
.selloc.abierto .sc-chip{display:none}
.selloc.abierto .sc-card{display:block}
.selloc .sc-x{position:absolute;top:9px;right:9px;width:24px;height:24px;border:none;cursor:pointer;
  background:none;color:rgba(180,196,222,.5);border-radius:7px;display:grid;place-items:center;
  font-size:14px;line-height:1;transition:.2s}
.selloc .sc-x:hover{color:#fff;background:rgba(255,255,255,.08)}
.selloc .sc-eb{display:flex;align-items:center;gap:7px;font-size:11.5px;font-weight:600;
  color:#8FB4E0;margin-bottom:7px}
.selloc .sc-eb svg{width:13px;height:13px;stroke:currentColor;fill:none;stroke-width:2;
  stroke-linecap:round;stroke-linejoin:round}
.selloc .sc-t{color:#fff;font-weight:600;font-size:16px;line-height:1.28;margin-bottom:9px}
.selloc .sc-d{font-weight:300;font-size:13.5px;line-height:1.55;color:rgba(222,231,245,.8);margin:0 0 13px}
.selloc .sc-d b{font-weight:600;color:#fff}
.selloc .sc-dato{display:flex;align-items:baseline;gap:9px;padding:11px 13px;border-radius:10px;
  background:rgba(143,180,224,.08);border:1px solid rgba(143,180,224,.16);margin-bottom:11px}
.selloc .sc-n{font-weight:300;font-size:29px;line-height:1;color:#fff;letter-spacing:-.02em}
.selloc .sc-l{font-size:12px;font-weight:300;color:rgba(222,231,245,.7);line-height:1.35}
.selloc .sc-pie{font-size:11px;color:rgba(180,196,222,.5);margin:0 0 13px}
.selloc .sc-cta{display:inline-flex;align-items:center;gap:6px;font-size:13px;font-weight:600;
  color:#fff;text-decoration:none;border-bottom:1.5px solid rgba(255,255,255,.3);
  padding-bottom:2px;transition:.2s}
.selloc .sc-cta:hover{color:var(--acc-verde,#3FA46E);border-color:var(--acc-verde,#3FA46E)}
.selloc{top:72px;left:12px;right:12px}
.selloc .sc-card{width:auto}
.selloc .sc-chip{font-size:11.5px;padding:7px 13px 7px 11px}
.selloc .sc-up{animation:none}
/* estado maqueta: se ve el diseño, sin dato inventado */
.selloc.maqueta .sc-chip{border-style:dashed;color:rgba(222,231,245,.6)}
.selloc.maqueta .sc-n{font-size:22px;color:rgba(222,231,245,.45)}
.selloc.maqueta .sc-pie{color:rgba(232,132,60,.75)}
/* detalle del sello */
.selloc .sc-dato{flex-wrap:wrap;row-gap:7px}
.selloc .sc-veces{flex-basis:100%;font-size:11.5px;font-weight:300;line-height:1.4;
  color:rgba(143,180,224,.85)}
.selloc .sc-linea{display:none;margin-bottom:12px}
.selloc .sc-barra{height:4px;border-radius:99px;background:rgba(255,255,255,.09);overflow:hidden}
.selloc .sc-barra span{display:block;height:100%;border-radius:99px;
  background:linear-gradient(90deg,#3F79C8,#8FB4E0)}
.selloc .sc-fechas{display:flex;justify-content:space-between;gap:10px;margin-top:6px;
  font-size:10.5px;color:rgba(180,196,222,.5)}
/* pastilla: dos lineas, barra fina y llamado a abrir */
.selloc .sc-chip{align-items:flex-start;gap:9px;border-radius:13px;
  padding:10px 14px 11px 12px;text-align:left;line-height:1.3}
.selloc .sc-up{margin-top:1px}
.selloc .sc-body{display:flex;flex-direction:column;gap:5px;min-width:212px}
.selloc .sc-r1{display:flex;align-items:center;gap:6px;font-size:11px;
  color:rgba(180,196,222,.66);white-space:nowrap}
.selloc .sc-r1 .sc-lock{width:12px;height:12px}
.selloc .sc-ver{margin-left:auto;padding-left:12px;color:#8FB4E0;font-weight:600;font-size:10.5px;
  display:inline-flex;align-items:center;gap:3px;transition:color .2s}
.selloc .sc-ver i{font-style:normal;font-size:13px;line-height:1;transition:transform .2s}
.selloc .sc-chip:hover .sc-ver{color:#B9D4F0}
.selloc .sc-chip:hover .sc-ver i{transform:translateX(2px)}
.selloc .sc-r2{font-size:12.5px;color:rgba(222,231,245,.72);font-weight:300}
.selloc .sc-r2 b{color:#fff;font-weight:600}
.selloc .sc-mini{display:block;height:3px;border-radius:99px;background:rgba(255,255,255,.1);overflow:hidden;margin-top:2px}
.selloc .sc-mini i{display:block;height:100%;width:0;border-radius:99px;
  background:linear-gradient(90deg,#3F79C8,#8FB4E0);transition:width .6s ease}
.selloc.maqueta .sc-mini{display:none}
.selloc .sc-body{min-width:0;flex:1}
/* pastilla: el mensaje es la automatizacion, no el numero suelto */
.selloc .sc-body{min-width:238px}
.selloc .sc-r2{display:flex;flex-direction:column;gap:1px;font-size:12.5px;line-height:1.35}
.selloc .sc-r2 b{color:#fff;font-weight:600;font-size:13px}
.selloc .sc-con{color:rgba(180,196,222,.62);font-size:11px;font-weight:300}
.selloc .sc-barrita{display:flex;align-items:center;gap:9px;margin-top:6px}
.selloc .sc-mini{flex:1;margin-top:0}
.selloc .sc-q{font-size:10.5px;color:rgba(180,196,222,.55);white-space:nowrap}
.selloc.maqueta .sc-barrita{display:none}
/* el sello toma el mismo tratamiento que las tarjetas del inicio */
.selloc .sc-chip,.selloc .sc-card{position:relative;overflow:hidden;isolation:isolate}
.selloc .sc-chip > *,.selloc .sc-card > *:not(.sc-x){position:relative;z-index:2}
.selloc .sc-x{position:absolute;top:9px;right:9px;z-index:3}
.selloc .sc-chip::before,.selloc .sc-card::before{content:"";position:absolute;inset:0;z-index:0;
  pointer-events:none;border-radius:inherit;opacity:.8;transition:opacity .3s ease;
  background:radial-gradient(ellipse 60% 80% at 100% 0%,rgba(90,146,222,.22) 0%,transparent 64%)}
.selloc .sc-chip:hover::before{opacity:1}
.selloc .sc-card::after{content:"";position:absolute;z-index:1;right:-32px;top:-28px;
  width:168px;height:168px;pointer-events:none;opacity:.3;
  background:url("data:image/svg+xml,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20viewBox%3D%220%200%20220%20220%22%20fill%3D%22none%22%3E%3Ccircle%20cx%3D%22110%22%20cy%3D%22110%22%20r%3D%2276%22%20stroke%3D%22%238FB4E0%22%20stroke-width%3D%2210%22%20opacity%3D%22.22%22%2F%3E%3Ccircle%20cx%3D%22110%22%20cy%3D%22110%22%20r%3D%2276%22%20stroke%3D%22%238FB4E0%22%20stroke-width%3D%2210%22%20stroke-linecap%3D%22round%22%20stroke-dasharray%3D%22478%22%20stroke-dashoffset%3D%22382%22%20transform%3D%22rotate%28-90%20110%20110%29%22%2F%3E%3Ccircle%20cx%3D%22110%22%20cy%3D%22110%22%20r%3D%2252%22%20stroke%3D%22%238FB4E0%22%20stroke-width%3D%221.5%22%20opacity%3D%22.3%22%2F%3E%3C%2Fsvg%3E") no-repeat center/contain;
  -webkit-mask-image:radial-gradient(ellipse 78% 78% at 62% 32%,#000 20%,transparent 78%);
          mask-image:radial-gradient(ellipse 78% 78% at 62% 32%,#000 20%,transparent 78%)}
.selloc .sc-chip::after{content:"";position:absolute;z-index:1;right:-26px;top:-24px;
  width:96px;height:96px;pointer-events:none;opacity:.22;
  background:url("data:image/svg+xml,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20viewBox%3D%220%200%20220%20220%22%20fill%3D%22none%22%3E%3Ccircle%20cx%3D%22110%22%20cy%3D%22110%22%20r%3D%2276%22%20stroke%3D%22%238FB4E0%22%20stroke-width%3D%2210%22%20opacity%3D%22.22%22%2F%3E%3Ccircle%20cx%3D%22110%22%20cy%3D%22110%22%20r%3D%2276%22%20stroke%3D%22%238FB4E0%22%20stroke-width%3D%2210%22%20stroke-linecap%3D%22round%22%20stroke-dasharray%3D%22478%22%20stroke-dashoffset%3D%22382%22%20transform%3D%22rotate%28-90%20110%20110%29%22%2F%3E%3Ccircle%20cx%3D%22110%22%20cy%3D%22110%22%20r%3D%2252%22%20stroke%3D%22%238FB4E0%22%20stroke-width%3D%221.5%22%20opacity%3D%22.3%22%2F%3E%3C%2Fsvg%3E") no-repeat center/contain;
  -webkit-mask-image:radial-gradient(ellipse 78% 78% at 60% 34%,#000 18%,transparent 76%);
          mask-image:radial-gradient(ellipse 78% 78% at 60% 34%,#000 18%,transparent 76%)}
.selloc .sc-card{background:#0B1220}
.selloc .sc-chip{background:rgba(11,18,32,.95)}
.selloc{top:68px}
.selloc .sc-chip{padding:9px 13px 10px 11px}
.selloc .sc-r1{font-size:10.5px}
.selloc .sc-r2 b{font-size:12.5px}
.selloc .sc-con{font-size:10.5px}

/* ── El sello va como BANNER a todo el ancho, arriba (no superpuesto al título) ── */
.selloc{ position:static!important; width:100%!important; margin:0!important; left:auto!important; right:auto!important; top:auto!important; z-index:2!important; }
.selloc .sc-chip{ display:flex!important; width:100%!important; box-sizing:border-box!important;
  justify-content:space-between!important; align-items:center!important;
  border-radius:0!important; border-left:none!important; border-right:none!important; border-top:none!important;
  padding:11px clamp(16px,4vw,44px)!important; background:#0c1424!important; }
.selloc .sc-card{ position:static!important; width:100%!important; max-width:none!important; border-radius:0!important;
  box-shadow:none!important; border-left:none!important; border-right:none!important; }
.selloc .sc-up{ display:none!important; }
/* En móvil el banner queda FIJO arriba */
@media(max-width:860px){
  .selloc{ position:fixed!important; top:0!important; left:0!important; right:0!important; z-index:40!important; }
}

/* ── Banner del certificado CLARO con degradé sutil (sidebar oscuro, resto claro) ── */
.selloc .sc-chip{
  background:
    radial-gradient(120% 220% at 100% 0%, rgba(90,138,200,.10) 0%, rgba(120,170,240,.03) 42%, rgba(255,255,255,0) 70%),
    linear-gradient(180deg,#FFFFFF 0%,#F4F8FD 60%,#EEF4FC 100%)!important;
  border-bottom:1px solid #E2E7F0!important;
}
.selloc .sc-chip::before,.selloc .sc-chip::after{ display:none!important; }
.selloc .sc-r1{ color:#697388!important; }
.selloc .sc-r1 .sc-lock{ stroke:#3B6FB0!important; }
.selloc .sc-r2{ color:#3A4256!important; }
.selloc .sc-r2 b{ color:#12182A!important; }
.selloc .sc-con{ color:#697388!important; }
.selloc .sc-q{ color:#9AA3B5!important; }
.selloc .sc-ver{ color:#3B6FB0!important; }
.selloc .sc-chip:hover .sc-ver{ color:#5A8AC8!important; }
.selloc .sc-mini{ background:rgba(59,111,176,.12)!important; }
.selloc .sc-mini i{ background:linear-gradient(90deg,#3B6FB0,#5A8AC8)!important; }
/* tarjeta expandida del sello también clara */
.selloc .sc-card{ background:linear-gradient(180deg,#FFFFFF 0%,#F4F8FD 100%)!important; border-bottom:1px solid #E2E7F0!important; }
.selloc .sc-card::before,.selloc .sc-card::after{ display:none!important; }
.selloc .sc-eb{ color:#3B6FB0!important; }
.selloc .sc-t{ color:#12182A!important; }
.selloc .sc-d{ color:#3A4256!important; }
.selloc .sc-d b{ color:#12182A!important; }
.selloc .sc-dato{ background:rgba(59,111,176,.06)!important; border:1px solid rgba(59,111,176,.16)!important; }
.selloc .sc-n{ color:#12182A!important; }
.selloc .sc-l{ color:#697388!important; }
.selloc .sc-veces{ color:#3B6FB0!important; }
.selloc .sc-pie{ color:#9AA3B5!important; }
.selloc .sc-cta{ color:#3B6FB0!important; border-color:rgba(59,111,176,.4)!important; }
.selloc .sc-x{ color:rgba(60,72,95,.5)!important; }
.selloc .sc-x:hover{ color:#12182A!important; background:rgba(20,45,100,.06)!important; }
.selloc .sc-ver-detalle,.selloc a[class*="Ver detalle"]{ color:#3B6FB0!important; }

/* ── Banner FIJO también en escritorio + más delgado con titular más grande ── */
@media(min-width:861px){
  .selloc{ position:fixed!important; top:0!important; left:210px!important; right:0!important; width:auto!important; z-index:30!important; }
  body.sbc .selloc{ left:64px!important; }
  /* el banner empuja el contenido en TODAS las páginas (no solo el inicio) */
  html body{ padding-top:48px!important; }
  html body.home .thero{ top:48px!important; }
}
/* en móvil el banner (fijo) también empuja el contenido en las herramientas */
@media(max-width:860px){
  html body{ padding-top:72px!important; }
}
/* el sello nunca desborda a la derecha (Ver detalle y la X siempre visibles) */
.selloc .sc-chip, .selloc .sc-card{ max-width:100%!important; }
/* banner más delgado (2 líneas), titular más grande */
.selloc .sc-chip{ padding:6px clamp(16px,4vw,44px)!important; }
.selloc .sc-body{ gap:1px!important; }
.selloc .sc-r1{ font-size:10.5px!important; }
/* título y subtítulo en la MISMA línea → banner más bajo */
.selloc .sc-r2{ flex-direction:row!important; align-items:baseline!important; gap:8px!important; flex-wrap:wrap!important; line-height:1.15!important; }
.selloc .sc-r2 b{ font-size:16px!important; }
.selloc .sc-con{ font-size:11.5px!important; }
.selloc .sc-ver{ font-size:12px!important; }
