/* ============================================================
   suite-theme.css — Tema unificado calcado del sitio real
   digitalcorplatam.com (cuerpo claro + hero en banda oscura,
   azul apagado, Montserrat + JetBrains Mono, sin gradientes).
   Mantiene el sidebar. Mobile-first. No toca los motores.
   ============================================================ */
@import url('https://fonts.googleapis.com/css2?family=JetBrains+Mono:wght@400;500&family=Montserrat:wght@300;400;500;600;700;800&display=swap');

:root{
  --paper:#F5F7FB; --paper2:#ECF0F7; --ink:#12182A; --ink2:#3A4256;
  --soft:#697388; --mute:#9AA3B5; --line:#E2E7F0; --lineS:#EDF0F6;
  --blue:#3B6FB0; --blue2:#5A8AC8; --dark:#080D18; --dark2:#0d1220;
  --dInk:#EEF1F7; --dSoft:#98A2B8; --dLine:#262E44;
  --d:'Montserrat',sans-serif; --m:'JetBrains Mono',monospace;
}

/* ---------- Cuerpo CLARO (como el sitio) ---------- */
html body, html body.light, html body.dark{
  background:var(--paper)!important; color:var(--ink)!important;
  font-family:var(--d)!important;
}
html body::before{ content:none!important; }

/* ---------- Contenedor ---------- */
html body .wrap, html body main.wrap, html body .main{
  max-width:1120px!important; margin:0 auto!important;
  padding:clamp(28px,4vw,48px) clamp(18px,4vw,32px) 64px!important;
}

/* ============================================================
   HERO — banda oscura como el sitio
   ============================================================ */
html body .hero, html body .header{
  position:relative; text-align:center!important;
  max-width:100%!important; margin:0 auto!important;
  padding:clamp(48px,7vw,92px) clamp(20px,5vw,56px) clamp(56px,7vw,96px)!important;
  background:
    radial-gradient(120% 90% at 50% 128%, rgba(56,104,190,.60) 0%, rgba(30,64,130,.30) 34%, rgba(13,31,66,0) 62%),
    radial-gradient(90% 60% at 50% 118%, rgba(120,170,240,.35) 0%, rgba(60,110,180,0) 55%),
    linear-gradient(180deg,#070C19 0%,#091027 42%,#0B1730 72%,#0d1f42 100%)!important;
  border:1px solid #16213c!important; border-radius:22px!important; overflow:hidden;
}
html body .hero .kicker, html body .header .kicker, html body .hero .dc-eyebrow{
  display:block!important; text-transform:none!important;
  font-family:var(--d)!important; font-weight:600!important;
  font-size:13px!important; letter-spacing:.01em!important;
  color:var(--blue2)!important; background:none!important; border:none!important;
  padding:0!important; margin:0 auto 20px!important;
}
html body .hero .kicker .dot, html body .header .kicker .dot{ display:none!important; }
html body .hero h1, html body .header h1{
  font-family:var(--d)!important; font-weight:300!important;
  font-size:clamp(34px,4.4vw,60px)!important; line-height:1.02!important;
  letter-spacing:-.035em!important; color:#fff!important;
  background:none!important; background-image:none!important;
  -webkit-background-clip:border-box!important; background-clip:border-box!important;
  -webkit-text-fill-color:#fff!important;
  text-align:center!important; margin:0 auto!important; max-width:16ch;
}
html body .hero h1 b, html body .header h1 b{ color:#fff!important; -webkit-text-fill-color:#fff!important; font-weight:700!important; }
html body .hero h1 .g, html body .header h1 .g{
  background:none!important; -webkit-background-clip:initial!important; background-clip:initial!important;
  -webkit-text-fill-color:#fff!important; color:#fff!important; font-weight:700!important;
}
html body .hero .subtitle, html body .hero>p, html body .header .subtitle{
  text-align:center!important; margin:18px auto 0!important; max-width:56ch!important;
  font-size:clamp(14.5px,1.5vw,16px)!important; line-height:1.6!important;
  color:var(--dSoft)!important; font-weight:400!important;
}
html body .hero .subtitle b, html body .hero>p b{ color:#cfd8ea!important; font-weight:600!important; }

/* ---------- Caja de búsqueda: MISMA forma en todos los validadores ---------- */
html body .search, html body .search-wrap{
  display:flex!important; align-items:center!important; gap:10px!important;
  max-width:640px!important; width:100%!important; margin:24px auto 0!important;
  background:#fff!important; border:1px solid var(--line)!important;
  border-radius:12px!important; box-shadow:0 10px 30px -18px rgba(8,13,24,.5)!important;
  padding:7px 7px 7px 8px!important;
}
/* quitar el emoji de globo del buscador */
html body .search-wrap > span:first-child, html body .search > span:first-child{ display:none!important; }
/* el campo de dominio SIEMPRE ocupa el ancho disponible */
html body .search input, html body .search-wrap input, html body .search input[type=text]{
  flex:1 1 auto!important; width:auto!important; min-width:0!important;
  border:none!important; outline:none!important; box-shadow:none!important;
  color:var(--ink)!important; background:transparent!important;
  font-family:var(--d)!important; font-size:15px!important; padding:12px 12px!important;
}
html body .search input::placeholder, html body .search-wrap input::placeholder{ color:#AEB6C6!important; opacity:1!important; }
/* centrado del buscador — por encima de reglas propias de cada tool (body.light .search-wrap, etc.) */
html body.light .search, html body.light .search-wrap,
html body .hero .search, html body .hero .search-wrap,
html body .header .search, html body .header .search-wrap{
  margin-left:auto!important; margin-right:auto!important;
}
/* botón a la derecha, tamaño consistente */
html body .btn-primary, html body #checkBtn, html body .btn-check,
html body .search button, html body .search-wrap button,
html body .search .btn, html body .search-wrap .btn{
  flex:0 0 auto!important; background:var(--blue)!important; color:#fff!important; border:none!important;
  border-radius:8px!important; font-weight:600!important; font-family:var(--d)!important; font-size:13.5px!important;
  padding:0 20px!important; min-height:46px!important; box-shadow:none!important; cursor:pointer!important; white-space:nowrap!important;
}
html body .search button:hover, html body .search-wrap button:hover,
html body .search .btn:hover, html body .search-wrap .btn:hover,
html body #checkBtn:hover, html body .btn-check:hover{ background:var(--blue2)!important; }

/* textarea claro sobre paper */
html body .paste, html body textarea.paste{
  max-width:820px!important; margin:26px auto 0!important;
  background:#fff!important; color:var(--ink)!important; border:1px solid var(--line)!important;
}
html body .paste-actions{ justify-content:center!important; }
html body .paste-hint{ text-align:center!important; color:var(--soft)!important; }

/* ---------- Sidebar (se mantiene oscuro) ---------- */
/* Sidebar OSCURO (resto claro) */
html body .sb{ background:linear-gradient(180deg,#080D18,#0D1422)!important; border-right:1px solid #1B2438!important; }
html body .sb-nav a{ color:#98A2B8!important; }
html body .sb-nav a svg{ stroke:currentColor!important; }
html body .sb-nav a:hover{ background:rgba(255,255,255,.05)!important; color:#eaf1ff!important; }
html body .sb-nav a.active{ background:var(--blue)!important; color:#fff!important; box-shadow:none!important; }
html body .sb-group{ color:#5E6880!important; }
html body .sb-div{ background:#262E44!important; }
html body .sb-toggle{ background:rgba(255,255,255,.06)!important; color:#98A2B8!important; }
html body .sb-foot{ border-top:1px solid #262E44!important; }
html body .sb-foot a{ color:#98A2B8!important; }
html body .sb-foot a:hover{ color:#eaf1ff!important; background:rgba(255,255,255,.05)!important; }
html body .sb-foot a svg{ stroke:currentColor!important; }

/* ---------- HOME ---------- */
html body .thero{
  position:relative; text-align:center; margin:0 auto; border-radius:22px; overflow:hidden;
  padding:clamp(48px,6vw,88px) clamp(20px,5vw,56px)!important;
  background:
    radial-gradient(120% 90% at 50% 128%, rgba(56,104,190,.60) 0%, rgba(30,64,130,.30) 34%, rgba(13,31,66,0) 62%),
    radial-gradient(90% 60% at 50% 118%, rgba(120,170,240,.35) 0%, rgba(60,110,180,0) 55%),
    linear-gradient(180deg,#070C19 0%,#091027 42%,#0B1730 72%,#0d1f42 100%);
  border:1px solid #16213c;
}
/* destello de luz subiendo desde abajo-centro (como el inicio del sitio original) */
html body .thero::after{
  content:""; position:absolute; left:50%; bottom:-6%; transform:translateX(-50%);
  width:150%; height:70%; z-index:0; pointer-events:none;
  background:
    radial-gradient(ellipse 46% 46% at 50% 100%, rgba(255,255,255,.50) 0%, rgba(190,222,255,.30) 26%, rgba(110,170,250,.12) 48%, transparent 72%),
    radial-gradient(ellipse 54% 60% at 50% 96%, rgba(246,251,255,.78) 0%, rgba(186,219,255,.42) 12%, rgba(112,172,248,.28) 27%, rgba(56,116,215,.14) 44%, transparent 78%);
  filter:blur(16px);
  animation:dcBloom 15s ease-in-out infinite;
}
html body .thero .h1, html body .thero .tsub{ position:relative; z-index:1; }
html body .thero .h1{
  font-family:var(--d); font-weight:300; font-size:clamp(32px,4vw,54px);
  line-height:1.03; letter-spacing:-.03em; color:#fff; max-width:18ch; margin:0 auto;
}
html body .thero .h1 b, html body .thero .h1 .g{ color:#fff!important; -webkit-text-fill-color:#fff!important; font-weight:700!important; background:none!important; }
html body .thero .tsub{ margin:16px auto 0; max-width:56ch; font-size:clamp(14.5px,1.5vw,16px); line-height:1.6; color:var(--dSoft); }
html body .group-title{ color:var(--ink2)!important; font-weight:600!important; }
html body .group-title .g{ background:none!important; -webkit-text-fill-color:var(--blue)!important; color:var(--blue)!important; }

html body .tool-card, html body .card{
  background:#fff!important; border:1px solid var(--line)!important; border-radius:14px!important;
  color:var(--ink)!important; box-shadow:0 10px 24px rgba(20,45,100,.08)!important;
}
html body .tool-card:hover{ border-color:rgba(59,111,176,.35)!important; transform:translateY(-4px)!important; box-shadow:0 16px 36px rgba(20,45,100,.10)!important; }
html body .tool-card h3, html body .card h3{ color:var(--ink)!important; font-weight:600!important; }
html body .tool-card p, html body .card p{ color:var(--soft)!important; font-weight:300!important; }
html body .tool-card .tag{ color:var(--blue)!important; font-family:var(--d)!important; text-transform:none!important; letter-spacing:0!important; }
html body .tool-card .open{ color:var(--blue)!important; }
html body .tool-card .cicon{ color:var(--blue)!important; background:var(--paper2)!important; }
html body .tool-card.soon{ opacity:.7; }
html body .soon-badge{ background:var(--paper2)!important; color:var(--soft)!important; }
html body .top{ background:#fff!important; border-bottom:1px solid var(--line)!important; }
html body .top .crumb{ color:var(--soft)!important; }
html body .top .theme{ background:#fff!important; border:1px solid var(--line)!important; color:var(--ink2)!important; }

/* ============================================================
   FOOTER (JS) — oscuro como el sitio
   ============================================================ */
.dc-foot{ margin-top:56px; background:var(--dark2); color:var(--dSoft); }
.dc-foot-in{ max-width:1120px; margin:0 auto; padding:48px clamp(18px,4vw,32px) 40px;
  display:grid; grid-template-columns:1.6fr 1fr 1fr; gap:40px; }
.dc-foot-brand img{ height:26px; width:auto; display:block; opacity:.95; }
.dc-foot-brand p{ margin:14px 0 0; font-size:13px; line-height:1.65; color:var(--dSoft); max-width:300px; }
.dc-foot h4{ font-family:var(--d); font-size:12px; font-weight:600; letter-spacing:0; text-transform:none; color:#c3ccdd; margin:0 0 15px; }
.dc-foot ul{ list-style:none; margin:0; padding:0; display:flex; flex-direction:column; gap:11px; }
.dc-foot a{ color:var(--dSoft); text-decoration:none; font-size:13.5px; transition:color .15s; }
.dc-foot a:hover{ color:var(--blue2); }
.dc-foot .dc-contact{ font-size:13.5px; color:var(--dSoft); line-height:1.7; }
.dc-foot-bottom{ border-top:1px solid var(--dLine); padding:18px clamp(18px,4vw,32px); max-width:1120px; margin:0 auto;
  display:flex; justify-content:space-between; align-items:center; gap:14px; flex-wrap:wrap; font-size:12px; color:#5E6880; }
.dc-foot-bottom a{ color:var(--dSoft); text-decoration:none; } .dc-foot-bottom a:hover{ color:var(--blue2); }

/* ============================================================
   INICIO — módulo redondeado que sube y se mete tras el hero
   (efecto "frentes" del sitio) + menos azul  ·  solo escritorio
   ============================================================ */
@media (min-width:861px){
  /* el toggle de tema del menú es sólo para móvil; en escritorio no va en el sidebar */
  .dc-mtheme{ display:none!important; }
  /* full-bleed: el inicio ocupa todo el ancho del área de contenido */
  html body.home .main{ max-width:none!important; margin:0!important; padding:0!important; }

  /* SECCIÓN 1 (hero): banda OSCURA a todo el ancho, pineada detrás (como el sitio original) */
  html body.home .thero{
    position:sticky!important; top:0; z-index:1;
    margin:0!important; border:none!important; border-radius:0!important; box-shadow:none!important;
    min-height:52vh; display:flex; flex-direction:column; justify-content:center; align-items:center;
    padding:44px 24px 88px!important;
    background:
      radial-gradient(1100px 640px at 50% -6%, #16264a 0%, rgba(8,13,24,0) 60%),
      linear-gradient(180deg,#070C19 0%,#0a1330 44%,#0b1832 74%,#0d1f42 100%)!important;
  }
  html body.home .thero{ overflow:hidden!important; }
  /* destellos/resplandor subiendo desde abajo-centro (como el sitio) */
  html body.home .thero::before{
    content:""; position:absolute; left:50%; bottom:0; transform:translateX(-50%);
    width:190%; height:40%; z-index:0; pointer-events:none;
    background:radial-gradient(ellipse 58% 54% at 50% 100%, rgba(140,190,255,.40) 0%, rgba(66,128,222,.18) 42%, transparent 74%);
    filter:blur(46px);
  }
  html body.home .thero::after{
    content:""; position:absolute; left:50%; bottom:-4%; transform:translateX(-50%);
    width:150%; height:72%; z-index:0; pointer-events:none;
    background:
      radial-gradient(ellipse 46% 46% at 50% 100%, rgba(255,255,255,.55) 0%, rgba(190,222,255,.34) 26%, rgba(110,170,250,.14) 48%, transparent 72%),
      radial-gradient(ellipse 54% 60% at 50% 96%, rgba(246,251,255,.85) 0%, rgba(186,219,255,.48) 12%, rgba(112,172,248,.32) 27%, rgba(56,116,215,.16) 44%, transparent 78%);
    filter:blur(16px);
    animation:dcBloom 15s ease-in-out infinite;
  }
  html body.home .thero .h1, html body.home .thero .tsub{ position:relative; z-index:1; max-width:760px; margin-left:auto; margin-right:auto; }
  /* sin barra ni botón de tema en el home (claro por defecto, sin modo oscuro) */
  html body.home .top{ display:none!important; }

  /* SECCIÓN 2 (hoja blanca): a todo el ancho, sube por encima del hero oscuro */
  html body.home .home-sheet{
    position:relative; z-index:2;
    background:#fff!important;
    border-radius:34px 34px 0 0;
    margin-top:-48px;
    padding:44px max(24px, calc((100% - 1120px)/2)) 80px;
    min-height:100vh;
    box-shadow:0 -24px 60px rgba(4,10,26,.4);
  }
  html body.home .home-sheet .group:first-child{ margin-top:0; }
  /* tarjetas blancas con un degradé muy sutil */
  html body.home .home-sheet .tool-card{
    background:linear-gradient(180deg,#ffffff 0%,#f5f8ff 100%)!important;
  }
  html body.home .home-sheet .tool-card:hover{
    background:linear-gradient(180deg,#ffffff 0%,#eef4ff 100%)!important;
  }
  /* ---- MODO OSCURO escritorio (toggle del topbar → data-theme=dark) ---- */
  html[data-theme="dark"] body.home .top .crumb{ color:rgba(210,222,244,.72)!important; }
  html[data-theme="dark"] body.home .top .crumb b{ color:#fff!important; }
  html[data-theme="dark"] body.home .home-sheet{ background:#0b1220!important; box-shadow:0 -24px 60px rgba(0,0,0,.5)!important; }
  html[data-theme="dark"] body.home .home-sheet .group-title{ color:#fff!important; }
  html[data-theme="dark"] body.home .home-sheet .group-title .g{ -webkit-text-fill-color:var(--blue2)!important; color:var(--blue2)!important; }
  html[data-theme="dark"] body.home .home-sheet .tool-card{ background:#0F1626!important; border-color:#212B42!important; }
  html[data-theme="dark"] body.home .home-sheet .tool-card h3{ color:#fff!important; }
  html[data-theme="dark"] body.home .home-sheet .tool-card p{ color:var(--dSoft)!important; }
  html[data-theme="dark"] body.home .home-sheet .tool-card .tag{ color:var(--blue2)!important; }
  html[data-theme="dark"] body.home .home-sheet .tool-card .cicon{ background:rgba(90,138,200,.15)!important; color:var(--blue2)!important; }
  html[data-theme="dark"] body.home .home-sheet .tool-card .cicon svg{ stroke:var(--blue2)!important; }
  html[data-theme="dark"] body.home .home-sheet .tool-card .open{ color:var(--blue2)!important; }
  html[data-theme="dark"] body.home .home-sheet .tool-card .open svg{ stroke:var(--blue2)!important; }

  @keyframes dcBloom{
    0%,100%{ opacity:.9; transform:translateX(-50%) scale(1); }
    50%{ opacity:1; transform:translateX(-50%) scale(1.06); }
  }
  @media (prefers-reduced-motion:reduce){ html body.home .thero::after{ animation:none!important; } }
}

/* ============================================================
   BARRA MÓVIL + DRAWER
   ============================================================ */
.dc-bbar{ display:none; } .dc-backdrop{ display:none; }
/* sin modo oscuro: se oculta el botón de tema en toda la suite (claro por defecto) */
html body .theme{ display:none!important; }
/* sin barra "Herramientas · …" en ninguna página */
html body .top{ display:none!important; }
@media (max-width:860px){
  html body{ padding-left:0!important; padding-bottom:88px!important; }

  /* ---- Barra flotante inferior ---- */
  .dc-bbar{ display:flex; align-items:stretch; gap:2px; position:fixed; left:50%; bottom:14px; transform:translateX(-50%); z-index:96;
    background:#0F1626; border:1px solid #26304a; border-radius:100px; padding:7px; width:calc(100% - 32px); max-width:420px;
    box-shadow:0 14px 34px -8px rgba(0,0,0,.5); justify-content:space-between; }
  .dc-bb{ flex:1; display:flex; flex-direction:column; align-items:center; justify-content:center; gap:3px;
    background:none; border:none; cursor:pointer; text-decoration:none; padding:8px 4px; border-radius:100px;
    color:#8b97b0; font-family:var(--d); font-size:9.5px; font-weight:600; letter-spacing:.01em; transition:.18s; }
  .dc-bb svg{ width:20px; height:20px; stroke:currentColor; fill:none; stroke-width:1.9; stroke-linecap:round; stroke-linejoin:round; }
  .dc-bb:active{ transform:scale(.94); }
  .dc-bb.active{ color:#fff; }
  .dc-bb.active svg{ stroke:var(--blue2); }
  body.nav-open .dc-bb-menu{ background:var(--blue); color:#fff; }
  body.nav-open .dc-bb-menu svg{ stroke:#fff; }

  /* Toggle de tema dentro de la hoja de menú */
  .dc-mtheme{ display:inline-flex!important; align-items:center; gap:8px; align-self:flex-start; width:auto; padding:9px 16px 9px 13px; margin-bottom:6px; border-radius:100px;
    background:rgba(255,255,255,.06); border:1px solid rgba(120,160,230,.2); color:#c3cee0; cursor:pointer;
    font-family:var(--d); font-size:12.5px; font-weight:600; letter-spacing:-.01em; white-space:nowrap; }
  .dc-mtheme svg{ width:16px!important; height:16px!important; flex:0 0 auto!important; stroke:currentColor; fill:none!important; }
  .dc-mtheme:active{ transform:scale(.97); }

  /* ---- Hoja de menú (sube desde abajo) ---- */
  html body .sb{ position:fixed!important; left:0; right:0; bottom:0; top:auto!important; width:auto!important;
    max-height:82vh; transform:translateY(105%); transition:transform .28s cubic-bezier(.4,0,.2,1); overflow-y:auto;
    z-index:98; border-radius:22px 22px 0 0!important; box-shadow:0 -16px 50px rgba(0,0,0,.5);
    flex-direction:column!important; flex-wrap:nowrap!important; align-items:stretch!important; padding:14px 18px 26px!important; gap:0!important; }
  html body .sb::before{ content:""; display:block; width:42px; height:4px; border-radius:4px; background:rgba(255,255,255,.22); margin:0 auto 14px; flex:0 0 auto; }
  html body.nav-open .sb{ transform:translateY(0); }
  html body .sb .sb-top{ flex-direction:row!important; width:100%; margin:0 0 16px!important; }
  html body .sb .sb-toggle{ display:none!important; }
  html body .sb .sb-sp{ display:none!important; }
  html body .sb .sb-nav{ flex-direction:column!important; flex-wrap:nowrap!important; gap:4px!important; }
  html body .sb .sb-nav a{ justify-content:flex-start!important; width:100%; }
  html body .sb .sb-group, html body .sb .sb-div, html body .sb .sb-foot{ display:block!important; }
  html body .sb .lbl{ opacity:1!important; display:inline!important; }
  html body .sb .sb-group{ opacity:1!important; height:auto!important; overflow:visible!important; }
  .dc-backdrop{ display:block; position:fixed; inset:0; z-index:97; background:rgba(4,8,16,.6); opacity:0; visibility:hidden; transition:.25s; }
  html body.nav-open .dc-backdrop{ opacity:1; visibility:visible; }

  /* ---- Contenido ---- */
  html body .hero h1, html body .header h1{ font-size:clamp(28px,7.5vw,38px)!important; }
  html body .thero .h1{ font-size:clamp(26px,7vw,36px)!important; }

  /* ============================================================
     HOME MÓVIL OSCURO — tarjetas estilo sitio original
     ============================================================ */
  html body.home{ background:linear-gradient(180deg,#FFFFFF 0%,#F4F7FC 42%,#EBF0F8 100%)!important; background-attachment:fixed!important; color:var(--ink)!important; padding-top:72px!important; }
  html body.home .group-title{ color:var(--ink2)!important; }
  html body.home .group-title .g{ -webkit-text-fill-color:var(--blue)!important; color:var(--blue)!important; }

  html body .home-cards{ grid-template-columns:1fr 1fr!important; gap:12px!important; }
  html body .home-cards > *{ border-radius:18px!important; }

  /* Tarjetas BLANCAS con degradé sutil (mismos colores del PC) */
  html body .home-cards .tool-card{ min-height:150px!important; padding:16px!important; display:flex!important; flex-direction:column!important; position:relative;
    background:linear-gradient(180deg,#ffffff 0%,#f5f8ff 100%)!important; border:1px solid var(--line)!important; box-shadow:0 6px 18px rgba(20,45,100,.05)!important; color:var(--ink)!important; }
  html body .home-cards .tool-card:hover{ transform:none!important; box-shadow:0 6px 18px rgba(20,45,100,.05)!important; }
  html body .home-cards .tool-card .ch{ margin-bottom:0!important; }
  html body .home-cards .tool-card .cicon{ width:40px!important; height:40px!important; background:var(--paper2)!important; color:var(--blue)!important; }
  html body .home-cards .tool-card .cicon svg{ stroke:var(--blue)!important; color:var(--blue)!important; }
  /* icono + etiqueta + título agrupados (consistente en todas las tarjetas) */
  html body .home-cards .tool-card .tag{ margin-top:12px!important; display:inline-flex!important; align-self:flex-start!important;
    background:rgba(59,111,176,.10)!important; color:var(--blue)!important; border:1px solid rgba(59,111,176,.20)!important;
    padding:4px 9px!important; border-radius:100px!important; font-size:9px!important; letter-spacing:.02em!important; text-transform:none!important; }
  html body .home-cards .tool-card h3{ color:var(--ink)!important; font-size:15px!important; margin:7px 0 0!important; line-height:1.22!important; }
  html body .home-cards .tool-card p{ display:none!important; }
  /* footer "Abrir herramienta →" al pie */
  html body .home-cards .tool-card .open{ display:inline-flex!important; margin-top:auto!important; padding-top:12px!important; color:var(--blue)!important; font-size:11.5px!important; font-weight:700!important; }
  html body .home-cards .tool-card .open svg{ stroke:var(--blue)!important; }
  html body .home-cards .tool-card .soon-badge{ top:12px!important; right:12px!important; font-size:8.5px!important; padding:3px 7px!important; }

  /* Tarjeta destacada (primera de cada grupo): ancho completo, tinte azul sutil, flecha en círculo azul */
  html body .home-cards > .tool-card:first-child{ grid-column:1 / -1!important; min-height:150px!important;
    background:radial-gradient(120% 140% at 100% 0%, rgba(59,111,176,.12) 0%, rgba(255,255,255,0) 55%), #ffffff!important;
    border:1px solid rgba(59,111,176,.26)!important; }
  html body .home-cards > .tool-card:first-child h3{ font-size:23px!important; letter-spacing:-.01em!important; max-width:72%; }
  html body .home-cards > .tool-card:first-child .open{ position:absolute; top:14px; right:14px; margin:0!important; width:40px; height:40px; border-radius:50%;
    background:var(--blue)!important; align-items:center; justify-content:center; font-size:0!important; padding-top:0!important; }
  html body .home-cards > .tool-card:first-child .open svg{ width:18px!important; height:18px!important; stroke:#fff!important; }

  /* cada 4ª tarjeta ocupa el ancho (ritmo bento) */
  html body .home-cards > .tool-card:nth-child(4){ grid-column:1 / -1!important; min-height:120px!important; }
  html body .home-cards > .tool-card:nth-child(4) h3{ font-size:18px!important; }

  /* resto de grids (resultados de herramientas) siguen en 1 columna */
  html body .cards:not(.home-cards){ grid-template-columns:1fr!important; }

  /* ---- MODO OSCURO opcional en móvil (body.mdark): fondo y tarjetas oscuras ---- */
  html body.home.mdark{ background:#080D18!important; color:var(--dInk)!important; }
  html body.home.mdark .group-title{ color:#fff!important; }
  html body.home.mdark .group-title .g{ -webkit-text-fill-color:var(--blue2)!important; color:var(--blue2)!important; }
  html body.home.mdark .home-cards .tool-card{ background:#0F1626!important; border-color:#212B42!important; box-shadow:none!important; }
  html body.home.mdark .home-cards .tool-card h3{ color:#fff!important; }
  html body.home.mdark .home-cards .tool-card .cicon{ background:rgba(90,138,200,.15)!important; color:var(--blue2)!important; }
  html body.home.mdark .home-cards .tool-card .cicon svg{ stroke:var(--blue2)!important; }
  html body.home.mdark .home-cards .tool-card .tag{ background:rgba(90,138,200,.14)!important; color:var(--blue2)!important; border-color:rgba(90,138,200,.22)!important; }
  html body.home.mdark .home-cards .tool-card .open{ color:var(--dSoft)!important; }
  html body.home.mdark .home-cards .tool-card .open svg{ stroke:var(--dSoft)!important; }
  html body.home.mdark .home-cards > .tool-card:first-child{ background:radial-gradient(120% 140% at 100% 0%, rgba(59,111,176,.22) 0%, rgba(15,22,38,0) 55%), #0F1626!important; border-color:#263455!important; }

  html body .top{ display:none!important; }
  .dc-foot-in{ grid-template-columns:1fr; gap:30px; padding:40px 20px 30px; }
  .dc-foot-bottom{ flex-direction:column; align-items:flex-start; }
}
@media (min-width:861px){ html body.sbc{ padding-left:74px!important; } }

/* pantallas chicas: search apilado (input arriba full-width, botón abajo) */
@media (max-width:640px){
  html body .search, html body .search-wrap{ flex-direction:column!important; align-items:stretch!important; gap:10px!important; padding:12px!important; }
  html body .search input:not([type=checkbox]):not([type=radio]),
  html body .search-wrap input:not([type=checkbox]):not([type=radio]){ width:100%!important; flex:none!important; padding:13px 14px!important; }
  html body .search button, html body .search-wrap button,
  html body .search .btn, html body .search-wrap .btn,
  html body #checkBtn, html body .btn-check{ width:100%!important; justify-content:center!important; text-align:center!important; }
}

/* Tarjetas de resultado del analizador: más planas/limpias (como el sitio) */
html body .card.fail::before, html body .card.warn::before, html body .card.pass::before{ opacity:.35!important; }
html body .card.pass, html body .card.warn, html body .card.fail{ background:#fff!important; }

/* ============================================================
   SIN GRADIENTES — todo plano como el sitio (azul #3B6FB0)
   ============================================================ */
/* sidebar: pill activo plano (sin degradé ni glow) */
html body .sb-nav a.active{ background:var(--blue)!important; box-shadow:none!important; color:#fff!important; }
html body .sb-mini{ background:var(--blue)!important; }
/* palabra destacada en títulos: azul apagado SÓLIDO en toda la suite */
html body .g, html body h1 .g, html body h2 .g, html body h3 .g{
  background:none!important; background-image:none!important;
  -webkit-background-clip:initial!important; background-clip:initial!important;
  -webkit-text-fill-color:var(--blue)!important; color:var(--blue)!important;
}
html body .hero h1 .g, html body .header h1 .g{ -webkit-text-fill-color:#fff!important; color:#fff!important; font-weight:700!important; }
/* botones, barras, tabs, avatar: color plano */
html body .btn{ background:var(--blue)!important; box-shadow:none!important; }
html body .btn:hover{ background:var(--blue2)!important; }
html body .progress .fill{ background:var(--blue)!important; }
html body .tabs span.on::after, html body .card-tabs .on::after, html body .tabs .on::after{ background:var(--blue)!important; }
html body .bavatar{ background:var(--blue)!important; box-shadow:none!important; }
/* íconos de tarjeta: chip plano azul apagado (sin degradés de colores) */
html body .card-icon,
html body .card-icon.blue, html body .card-icon.cyan, html body .card-icon.green,
html body .card-icon.orange, html body .card-icon.pink, html body .card-icon.purple,
html body .tool-card .cicon{
  background:var(--paper2)!important; background-image:none!important; color:var(--blue)!important; box-shadow:none!important;
}
html body .card-icon svg, html body .tool-card .cicon svg{ stroke:var(--blue)!important; color:var(--blue)!important; }
/* pestañas activas del hero/tool en azul plano */
html body .card-tabs .active, html body .card-tabs [aria-selected="true"]{ color:var(--blue)!important; }

/* ============================================================
   TARJETA DESTACADA DEL INICIO — oscura con degradé (solo esa),
   como las tarjetas del sitio principal digitalcorplatam.com.
   El resto de tarjetas siguen claras.
   ============================================================ */
html body.home .group .home-cards > .tool-card:first-child{
  background:
    radial-gradient(135% 130% at 100% 0%, rgba(96,146,214,.30) 0%, rgba(13,27,52,0) 56%),
    linear-gradient(158deg,#0E1D38 0%,#0A1428 62%,#0B1730 100%)!important;
  border:1px solid #223458!important;
  box-shadow:0 18px 40px -18px rgba(6,14,32,.55)!important;
  color:#EEF1F7!important;
}
html body.home .group .home-cards > .tool-card:first-child:hover{
  border-color:#2E4470!important; transform:translateY(-4px)!important;
  box-shadow:0 24px 50px -20px rgba(6,14,32,.6)!important;
}
html body.home .group .home-cards > .tool-card:first-child h3{ color:#fff!important; }
html body.home .group .home-cards > .tool-card:first-child p{ color:#9FB0CC!important; }
html body.home .group .home-cards > .tool-card:first-child .tag{
  color:#8FB4E0!important; background:rgba(120,170,240,.14)!important;
  border:1px solid rgba(120,170,240,.24)!important; border-radius:100px!important; padding:4px 11px!important;
  display:inline-block!important; width:auto!important; align-self:flex-start!important;
}
html body.home .group .home-cards > .tool-card:first-child .cicon{
  background:rgba(120,170,240,.16)!important; color:#8FB4E0!important;
}
html body.home .group .home-cards > .tool-card:first-child .cicon svg{ stroke:#8FB4E0!important; color:#8FB4E0!important; }
html body.home .group .home-cards > .tool-card:first-child .open{ color:#8FB4E0!important; }
html body.home .group .home-cards > .tool-card:first-child .open svg{ stroke:#fff!important; }

/* Ícono grande y tenue en la esquina de las tarjetas destacadas (como .cviz del sitio) */
html body.home .group .home-cards > .tool-card:first-child{ isolation:isolate; }
html body.home .group .home-cards > .tool-card:first-child::after{
  content:""; position:absolute; z-index:0; right:-30px; top:-28px; width:176px; height:176px;
  pointer-events:none; opacity:.26; background-repeat:no-repeat; background-position:center; background-size: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%);
  transition:transform .5s ease, opacity .3s ease;
}
html body.home .group .home-cards > .tool-card:first-child:hover::after{ opacity:.34; transform:translate(-4px,3px); }
/* DMARC (grupo Correo) → sobre */
html body.home .group:first-child .home-cards > .tool-card:first-child::after{
  background-image:url("data:image/svg+xml,%3Csvg%20xmlns='http://www.w3.org/2000/svg'%20viewBox='0%200%2024%2024'%20fill='none'%20stroke='%238FB4E0'%20stroke-width='1.3'%20stroke-linecap='round'%20stroke-linejoin='round'%3E%3Crect%20x='3'%20y='5'%20width='18'%20height='14'%20rx='2'/%3E%3Cpath%20d='m3%208%209%206%209-6'/%3E%3C/svg%3E");
}
/* SSL (grupo SSL·Certificados) → candado */
html body.home .group:last-child .home-cards > .tool-card:first-child::after{
  background-image:url("data:image/svg+xml,%3Csvg%20xmlns='http://www.w3.org/2000/svg'%20viewBox='0%200%2024%2024'%20fill='none'%20stroke='%238FB4E0'%20stroke-width='1.3'%20stroke-linecap='round'%20stroke-linejoin='round'%3E%3Crect%20x='4'%20y='11'%20width='16'%20height='9'%20rx='2'/%3E%3Cpath%20d='M8%2011V8a4%204%200%200%201%208%200v3M12%2015v2'/%3E%3C/svg%3E");
}

/* ============================================================
   VISTAS DE RESULTADOS — alineadas al diseño nuevo
   (sin etiquetas en mayúscula monoespaciada, registros que
   se ajustan, sin desborde horizontal en móvil)
   ============================================================ */
/* etiquetas/eyebrows de resultados → Montserrat normal, sin mayúscula ni tracking amplio */
html body [class*="eyebrow"], html body [class*="panel-title"], html body [class*="hl-label"],
html body [class*="metric-name"], html body [class*="rec-label"], html body [class*="rec-via"],
html body [class*="progress-label"], html body [class*="score-domain"], html body [class*="sublabel"],
html body [class*="chip-cat"], html body [class*="section-lbl"], html body [class*="sec-lbl"],
html body [class*="card-lbl"], html body [class*="col-title"], html body [class*="platform-panel-title"]{
  font-family:var(--d)!important; text-transform:none!important; letter-spacing:0!important;
}
/* registros / valores técnicos: monospace pero SIEMPRE se ajustan (no desbordan) */
html body [class*="rec-val"], html body [class*="rec-block"], html body pre, html body code,
html body .mono, html body [class*="raw"]{
  white-space:normal!important; word-break:break-word!important; overflow-wrap:anywhere!important; max-width:100%!important;
}
/* botones de acción de resultados: azul plano, sin degradé */
html body .btn-check, html body .export-btn.primary{
  background:var(--blue)!important; background-image:none!important;
}
html body .btn-check:hover{ background:var(--blue2)!important; }

/* red de seguridad: nada desborda a los lados en móvil */
@media (max-width:860px){
  html, html body{ overflow-x:hidden!important; max-width:100%!important; }
  html body .results-layout, html body .main, html body .wrap, html body .grid{ max-width:100%!important; }
}

/* ============================================================
   VALIDADORES STANDALONE — misma tarjeta del diseño aprobado
   (SPF, DKIM, SSL, CSR, Encabezados comparten estas clases)
   Solo visual: no toca la lógica/motores.
   ============================================================ */
/* tarjeta blanca con degradé en la esquina (como DMARC) */
html body:not(.home) .card{ background:#fff!important; border:1px solid #E2E7F0!important; border-radius:16px!important;
  box-shadow:0 10px 24px rgba(20,45,100,.06)!important; position:relative!important; overflow:hidden!important; isolation:isolate!important; }
html body:not(.home) .card > *{ position:relative; z-index:1; }
html body:not(.home) .card::after{ content:""; position:absolute; z-index:0; inset:0; pointer-events:none; border-radius:inherit;
  background:radial-gradient(150% 90% at 100% 0%, rgba(59,111,176,.07) 0%, rgba(90,138,200,.015) 34%, transparent 58%); }
/* cabecera + ícono de tarjeta como chip azul */
html body .card-head{ align-items:center!important; }
html body .card-ic{ width:38px!important; height:38px!important; min-width:38px!important; border-radius:10px!important;
  background:#EEF3FB!important; display:grid!important; place-items:center!important; color:#3B6FB0!important; }
html body .card-ic svg{ width:19px!important; height:19px!important; stroke:#3B6FB0!important; margin:0!important; }
html body .card-name{ color:#12182A!important; font-weight:700!important; font-family:var(--d)!important; }
html body .card-desc{ color:#697388!important; font-family:var(--d)!important; }
/* tarjetas de número grande (highlight) */
html body .hl-card{ background:#fff!important; border:1px solid #E2E7F0!important; border-radius:14px!important;
  box-shadow:0 8px 20px rgba(20,45,100,.05)!important; }
html body .hl-big{ font-family:var(--d)!important; letter-spacing:-.02em!important; }
html body .hl-meta,html body .hl-meta.big{ font-family:var(--d)!important; color:#697388!important; }
/* pills / verdict → forma limpia, Montserrat, sin mayúscula (conserva su color semántico) */
html body .pill,html body .score-head .pill,html body #scorePills .pill{ font-family:var(--d)!important; font-weight:600!important;
  text-transform:none!important; letter-spacing:0!important; border-radius:100px!important; }
/* hallazgos: fila limpia */
html body .finding{ font-family:var(--d)!important; border-radius:10px!important; }
html body .finding code,html body .finding .code{ font-family:var(--mono)!important; }
/* si el ícono de tarjeta viene vacío, no mostrar el chip azul */
html body:not(.home) .card-ic:empty{ display:none!important; }

/* ============================================================
   Herramientas de PEGAR (CSR, Encabezados): el bloque de input
   como UNA tarjeta blanca cohesiva dentro del hero (no textarea
   suelto + botones sobre lo oscuro)
   ============================================================ */
html body .paste{ background:#fff!important; border:1px solid var(--line)!important; border-radius:16px!important;
  padding:14px 14px 16px!important; box-shadow:0 16px 40px -20px rgba(8,13,24,.55)!important;
  max-width:760px!important; margin:24px auto 0!important; display:block!important; }
html body .paste textarea{ background:transparent!important; border:none!important; outline:none!important; box-shadow:none!important;
  width:100%!important; min-height:150px!important; color:var(--ink)!important; resize:vertical!important; padding:6px 6px 0!important; }
html body .paste textarea::placeholder{ color:#AEB6C6!important; opacity:1!important; }
html body .paste .paste-actions{ justify-content:center!important; margin-top:12px!important; gap:10px!important; }
html body .paste .paste-hint{ text-align:center!important; color:var(--soft)!important; margin-top:10px!important; font-family:var(--d)!important; }
/* el hero de estas tools no deja banda oscura de sobra abajo */
html body .hero:has(.paste){ padding-bottom:44px!important; }
/* botón secundario "Limpiar" (.btn-line): claro con texto azul, nunca negro */
html body .btn-line{ background:#fff!important; color:var(--blue)!important; border:1px solid var(--line)!important; box-shadow:none!important; font-family:var(--d)!important; font-weight:600!important; }
html body .btn-line:hover{ background:#F3F7FD!important; border-color:var(--blue)!important; color:var(--blue2)!important; }

/* ============================================================
   TARJETA DE RESULTADO OFICIAL (idéntica a DMARC) — reutilizable
   en los validadores standalone. Namespace .ofc-* + filas .rc-*
   ============================================================ */
.ofc{position:relative;background:#fff;border:1px solid #E2E7F0;border-radius:16px;box-shadow:0 10px 24px rgba(20,45,100,.06);overflow:hidden;isolation:isolate;margin:0 0 18px}
.ofc>*{position:relative;z-index:1}
.ofc::after{content:"";position:absolute;z-index:0;inset:0;pointer-events:none;border-radius:inherit;background:radial-gradient(150% 90% at 100% 0%, rgba(59,111,176,.08) 0%, rgba(90,138,200,.02) 34%, transparent 58%)}
.ofc.bad::after,.ofc.warn::after{background:radial-gradient(150% 90% at 100% 0%, rgba(219,63,85,.10) 0%, transparent 60%)}
.ofc-head{display:flex;align-items:center;gap:13px;padding:18px 20px 15px}
.ofc-ic{width:40px;height:40px;border-radius:11px;background:#EEF3FB;display:grid;place-items:center;flex-shrink:0}
.ofc-ic svg{width:20px;height:20px;stroke:#3B6FB0;fill:none;stroke-width:2;stroke-linecap:round;stroke-linejoin:round}
.ofc-tt{flex:1;min-width:0}
.ofc-name{font-size:16px;font-weight:700;letter-spacing:-.01em;color:#12182A;font-family:var(--d)}
.ofc-desc{font-size:12px;color:#697388;margin-top:1px;font-family:var(--d)}
.ofc-st{display:inline-flex;align-items:center;gap:7px;font-size:13px;font-weight:700;flex-shrink:0;font-family:var(--d);letter-spacing:-.01em}
.ofc-st .ic{width:22px;height:22px;border-radius:50%;display:grid;place-items:center;flex-shrink:0;color:#fff;font-weight:900;font-size:12px;line-height:1}
.ofc-st.ok{color:#0B8A56} .ofc-st.ok .ic{background:#0B8A56}
.ofc-st.bad{color:#DB3F55} .ofc-st.bad .ic{background:#DB3F55;font-size:11px}
.ofc-st.warn{color:#C67E10} .ofc-st.warn .ic{background:#C67E10}
.ofc-seg{display:inline-flex;gap:3px;margin:0 20px 4px;padding:3px;background:#EEF2F8;border-radius:100px}
.ofc-seg button{font-family:var(--d);font-size:12.5px;font-weight:600;color:#697388;background:none;border:none;cursor:pointer;padding:7px 18px;border-radius:100px;transition:.15s;letter-spacing:-.01em}
.ofc-seg button.on{background:#3B6FB0;color:#fff;box-shadow:0 3px 8px -3px rgba(59,111,176,.6)}
.ofc-body{padding:6px 20px 20px}
.ofc-raw-head{display:flex;align-items:center;justify-content:space-between;gap:12px;margin-bottom:7px}
.ofc-raw-lbl{font-size:12px;color:#697388;font-weight:500;font-family:var(--d)}
.ofc-raw{font-family:var(--mono);font-size:12px;line-height:1.7;color:#3A4256;background:#F5F7FB;border:1px solid #E2E7F0;border-radius:10px;padding:13px 15px;word-break:break-word;overflow-wrap:anywhere;white-space:normal}

/* ===== Filas de datos de la tarjeta oficial (globales, iguales a DMARC) ===== */
.rc-rows{display:grid;grid-template-columns:1fr 1fr;border:1px solid var(--border,#E2E7F0);border-radius:12px;overflow:hidden;margin-top:2px}
.rc-row{display:flex;align-items:center;justify-content:space-between;gap:16px;padding:13px 15px;background:#fff;border-top:1px solid #EEF2F8;border-left:1px solid #EEF2F8}
.rc-row:nth-child(1),.rc-row:nth-child(2){border-top:none}
.rc-row:nth-child(odd){border-left:none}
.rc-row.hl{grid-column:1 / -1}
.rc-row:last-child:nth-child(odd){grid-column:1 / -1}
@media(max-width:720px){.rc-rows{grid-template-columns:1fr}.rc-row{border-left:none!important}.rc-row:nth-child(2){border-top:1px solid #EEF2F8}}
/* columna única (valores largos: cabeceras, etc.) */
.rc-rows.col1{grid-template-columns:1fr}
.rc-rows.col1 .rc-row{border-left:none;flex-direction:column;align-items:flex-start;gap:3px}
.rc-rows.col1 .rc-row:nth-child(2){border-top:1px solid #EEF2F8}
.rc-rows.col1 .rc-v{text-align:left;word-break:break-word;overflow-wrap:anywhere;max-width:100%}
.rc-k{font-size:13px;color:#697388;font-weight:500;font-family:var(--d)}
.rc-k small{display:block;font-weight:500;font-size:11px;color:#9AA3B5;margin-top:1px}
.rc-v{font-size:14.5px;font-weight:700;text-align:right;letter-spacing:-.01em;font-family:var(--d)}
.rc-v small{display:block;font-weight:500;font-size:11px;color:#9AA3B5;margin-top:2px;font-family:var(--d)}
.rc-v.ok{color:#0B8A56} .rc-v.warn{color:#C67E10} .rc-v.bad{color:#DB3F55} .rc-v.blue{color:#3B6FB0} .rc-v.ink{color:#12182A}
.rc-row.hl{background:rgba(59,111,176,.07)}
.rc-row.hl .rc-k{color:#3B6FB0;font-weight:600}
.rc-row.hl .rc-v{color:#3B6FB0;font-size:15px}
.rc-row.hl.none{background:rgba(198,126,16,.09)}
.rc-row.hl.none .rc-k{color:#C67E10}
.rc-row.hl.none .rc-v{color:#C67E10;font-size:13.5px}
.rc-chips{display:flex;flex-wrap:wrap;gap:7px}
.rc-chip{font-size:12px;font-weight:600;color:#3B6FB0;background:rgba(59,111,176,.08);border:1px solid rgba(59,111,176,.18);border-radius:8px;padding:5px 11px;font-family:var(--d)}
.rc-note{font-size:12px;color:#697388;margin-top:10px;line-height:1.6;padding:11px 13px;border-radius:9px}
.rc-note.warn{background:rgba(198,126,16,.09);color:#8a5a0c}
.rc-note.bad{background:rgba(219,63,85,.08);color:#a52a3a}
.rc-note.ok{background:rgba(11,138,86,.08);color:#0a6b45}
.rec-copy{display:inline-flex;align-items:center;gap:6px;font-family:var(--d);font-size:12px;font-weight:600;color:#3B6FB0;background:rgba(59,111,176,.08);border:1px solid rgba(59,111,176,.2);border-radius:8px;padding:6px 12px;cursor:pointer;transition:.15s;white-space:nowrap;margin-left:auto}
.rec-copy:hover{background:rgba(59,111,176,.14)}
.rec-copy.done{color:#0B8A56;background:rgba(11,138,86,.1);border-color:rgba(11,138,86,.25)}
.rec-copy svg{width:14px;height:14px;stroke:currentColor;fill:none;stroke-width:2;stroke-linecap:round;stroke-linejoin:round}
.rec-blockhead{display:flex;align-items:center;justify-content:space-between;gap:12px;margin-bottom:7px}