/* Herramentia · v4.css · 23/10/2026
   Dirección «ruptura moderada» (DESIGN.md v4). Hoja ADITIVA: se carga la última y solo actúa con <body class="hm4">.
   Quitar la clase hm4 del body devuelve la página al diseño anterior sin tocar nada más.
   Reglas: cobalto profundo solo en barra, hero, bloque de privacidad y cierre; degradado solo dentro de la familia cobalto;
   movimiento solo con transform y opacity; página completa y legible con la animación apagada. */

:root{
  --deep:#0A1640; --deep-2:#0F225F; --deep-3:#13307F; --lum:#4C7DFF; --on-dark:#F3F5FB; --on-dark-2:#B9C4E6;
}

/* ---------- barra oscura ---------- */
.hm4 .hm-nav{background:var(--deep);border-bottom:1px solid rgba(255,255,255,.1);}
.hm4 .hm-logo{color:#fff;}
.hm4 .hm-nav-links,.hm4 .hm-nav-links .hm-nav-suggest,.hm4 .hm-crumb-current{color:var(--on-dark-2);}
.hm4 .hm-crumb-sep{color:#7C89B5;}
.hm4 .hm-nav-links a{color:var(--on-dark-2);}
@media (hover: hover) and (pointer: fine){
  .hm4 .hm-nav-links a:hover,.hm4 .hm-nav-links .hm-nav-suggest:hover{color:#fff;}
}
.hm4 .hm-nav .hm-btn-ink{background:var(--on-dark);color:var(--deep);}
.hm4 .hm-nav-hamburger{color:#fff;}
.hm4 .hm-nav a:focus-visible,.hm4 .hm-nav button:focus-visible{outline:2px solid #93B4F4;outline-offset:3px;}
.hm4 .hm-server-pill{background:rgba(255,255,255,.08);border-color:rgba(255,255,255,.22);color:var(--on-dark);}
.hm4 .hm-server-pill .dot{background:#5FD08A;}

/* ---------- hero ---------- */
.hm4-hero{position:relative;overflow:hidden;background:linear-gradient(135deg,var(--deep) 0%,var(--deep-2) 55%,var(--deep-3) 100%);color:var(--on-dark);}
.hm4-bg{position:absolute;inset:0;width:100%;height:100%;pointer-events:none;}
.hm4-bg .grid{animation:hm4-drift 28s linear infinite;}
.hm4-bg .doc{animation:hm4-float 9s ease-in-out infinite;transform-box:fill-box;transform-origin:center;}
.hm4-bg .doc.d2{animation-duration:12s;animation-delay:-4s;}
.hm4-bg .doc.d3{animation-duration:10.5s;animation-delay:-7s;}
.hm4-bg .pulse{animation:hm4-pulse 4.5s ease-in-out infinite;}
.hm4-bg .pulse.p2{animation-delay:-1.5s;}.hm4-bg .pulse.p3{animation-delay:-3s;}
@keyframes hm4-drift{to{transform:translate(56px,56px);}}
@keyframes hm4-float{50%{transform:translateY(-14px);}}
@keyframes hm4-pulse{50%{opacity:.25;}}
@keyframes hm4-rise{from{opacity:0;transform:translateY(8px);}}
@keyframes hm4-scan{0%{transform:translateY(-34px);}60%,100%{transform:translateY(190px);}}
@keyframes hm4-rot{to{transform:rotate(360deg);}}
@keyframes hm4-blink{50%{opacity:0;}}

.hm4-hero .hm-hero{position:relative;padding-top:96px;padding-bottom:104px;}
.hm4-hero .hm-display{color:var(--on-dark);font-size:64px;letter-spacing:-.04em;}
.hm4-hero .hm-display em{font-style:normal;color:var(--lum);display:block;}
.hm4-hero .hm-lead{color:var(--on-dark-2);}
.hm4-hero .hm-pill{background:rgba(255,255,255,.08);border-color:rgba(255,255,255,.22);color:var(--on-dark-2);}
.hm4-hero .hm-pill .dot{background:var(--lum);}
.hm4-hero .hm-btn-primary{box-shadow:0 8px 24px -8px rgba(27,75,210,.8);}
@media (hover: hover) and (pointer: fine){.hm4-hero .hm-btn-primary:hover{background:#2A5BE6;}}
.hm4-hero .hm-btn-secondary{background:rgba(255,255,255,.08);color:var(--on-dark);border-color:rgba(255,255,255,.28);}
@media (hover: hover) and (pointer: fine){.hm4-hero .hm-btn-secondary:hover{background:rgba(255,255,255,.16);border-color:rgba(255,255,255,.5);}}
.hm4-hero .hm-hero-stamps{color:var(--on-dark-2);}
.hm4-hero .hm-check{color:var(--lum);font-weight:700;}
.hm4-hero a:focus-visible,.hm4-hero button:focus-visible{outline:2px solid #93B4F4;outline-offset:3px;}
.hm4-hero .hm-hero-mock{color:var(--ink);border:0;border-radius:20px;box-shadow:0 40px 80px -30px rgba(0,0,0,.65),0 0 0 1px rgba(255,255,255,.12);}
.hm4-hero .hm-mock-doc{position:relative;overflow:hidden;}
.hm4-hero .hm-mock-doc::after{content:"";position:absolute;left:0;right:0;top:0;height:34px;background:linear-gradient(180deg,transparent,rgba(27,75,210,.2));border-bottom:2px solid var(--lum);animation:hm4-scan 3.6s ease-in-out infinite;}
.hm4-hero .hm-mock-row{animation:hm4-rise .6s cubic-bezier(.16,1,.3,1) both;}
.hm4-hero .hm-mock-col:last-child .hm-mock-row:nth-child(2){animation-delay:.5s;}
.hm4-hero .hm-mock-col:last-child .hm-mock-row:nth-child(3){animation-delay:1.1s;}
.hm4-hero .hm-mock-col:last-child .hm-mock-row:nth-child(4){animation-delay:1.7s;}
.hm4-hero .hm-mock-col:last-child .hm-mock-row:nth-child(5){animation-delay:2.3s;}
.hm4-pause{position:absolute;right:max(16px,env(safe-area-inset-right,0px));bottom:14px;z-index:2;min-height:44px;padding:0 16px;font:500 13px/1 var(--font);color:var(--on-dark-2);background:rgba(255,255,255,.08);border:1px solid rgba(255,255,255,.22);border-radius:999px;cursor:pointer;}
.hm4-pause:hover{color:#fff;background:rgba(255,255,255,.16);}
@media (max-width:1023px){
  .hm4-hero .hm-hero{padding-top:56px;padding-bottom:84px;}
  .hm4-hero .hm-display{font-size:48px;}
}
@media (max-width:639px){
  .hm4-hero .hm-display{font-size:38px;line-height:1.1;}
}

/* ---------- bloque de privacidad (antes «Cómo funciona») ---------- */
.hm4 .hm4-priv{background:linear-gradient(135deg,var(--deep),var(--deep-2));color:var(--on-dark);border-top:0;border-bottom:0;position:relative;overflow:hidden;}
.hm4-priv .hm-kicker{color:var(--lum);}
.hm4-priv .hm-h2,.hm4-priv .hm-h3{color:var(--on-dark);}
.hm4-priv .hm-steps-head p{color:var(--on-dark-2);}
.hm4-priv .hm-step-num{color:var(--lum);}
.hm4-priv .hm-step p{color:var(--on-dark-2);}
.hm4-priv .hm-step{border-top:1px solid rgba(255,255,255,.18);padding-top:18px;}
.hm4-vault{display:grid;grid-template-columns:minmax(0,.9fr) minmax(0,1.1fr);gap:28px;align-items:center;margin:40px 0 8px;}
@media (max-width:860px){.hm4-vault{grid-template-columns:minmax(0,1fr);}}
.hm4-orb{margin:0;max-width:460px;width:100%;justify-self:center;}
.hm4-orb svg{display:block;width:100%;height:auto;font-family:var(--font);}
.hm4-orb .lab{fill:var(--lum);font-family:var(--mono);font-size:11px;letter-spacing:.18em;font-weight:600;}
.hm4-orb .spin,.hm4-orb .spin2{transform-box:view-box;transform-origin:230px 230px;animation:hm4-rot 26s linear infinite;}
.hm4-orb .spin2{animation-duration:42s;animation-direction:reverse;}
.hm4-term{background:#060E2B;border:1px solid rgba(255,255,255,.15);border-radius:18px;font-family:var(--mono);font-size:13.5px;color:var(--on-dark);overflow:hidden;box-shadow:0 30px 60px -30px rgba(0,0,0,.8);}
.hm4-th{display:flex;gap:12px;align-items:center;padding:12px 16px;border-bottom:1px solid rgba(255,255,255,.12);color:var(--on-dark-2);font-size:12.5px;letter-spacing:.04em;}
.hm4-dots{display:flex;gap:6px;}.hm4-dots i{width:9px;height:9px;border-radius:50%;background:rgba(255,255,255,.2);}
.hm4-tr{display:grid;grid-template-columns:minmax(0,1.3fr) minmax(0,1fr) auto;gap:12px;padding:12px 16px;border-bottom:1px solid rgba(255,255,255,.08);align-items:center;animation:hm4-rise .5s cubic-bezier(.16,1,.3,1) both;}
.hm4-tr:nth-of-type(2){animation-delay:.3s;}.hm4-tr:nth-of-type(3){animation-delay:.9s;}.hm4-tr:nth-of-type(4){animation-delay:1.5s;}.hm4-tr:nth-of-type(5){animation-delay:2.1s;}
.hm4-tr .c2{color:var(--on-dark-2);}
.hm4-tag{font-size:11.5px;border-radius:6px;padding:3px 8px;font-weight:600;letter-spacing:.05em;text-transform:uppercase;}
.hm4-tag.a{background:rgba(255,255,255,.12);color:var(--on-dark);}
.hm4-tag.l{background:#1B4BD2;color:#fff;}
.hm4-tag.z{background:rgba(255,138,143,.15);color:#FF8A8F;border:1px solid rgba(255,138,143,.4);}
@media (max-width:520px){.hm4-tr{grid-template-columns:minmax(0,1fr) auto;}.hm4-tr .c2{display:none;}}
.hm4-big{display:flex;align-items:baseline;gap:14px;padding:22px 16px 8px;animation:hm4-rise .6s cubic-bezier(.16,1,.3,1) 2.7s both;}
.hm4-big b{font-family:var(--font);font-size:clamp(3.4rem,8vw,5rem);line-height:1;letter-spacing:-.05em;color:var(--lum);font-weight:600;}
.hm4-big span{font-family:var(--font);font-size:16px;color:var(--on-dark);}
.hm4-cur{display:inline-block;width:8px;height:1.05em;background:var(--lum);margin-left:6px;vertical-align:-.15em;animation:hm4-blink 1.1s steps(1) infinite;}
.hm4-fine{font-family:var(--font);font-size:13px;color:var(--on-dark-2);padding:6px 16px 16px;margin:0;}

/* ---------- cierre ---------- */
.hm4 .hm-closing{background:linear-gradient(135deg,var(--deep),var(--deep-2));border:1px solid rgba(255,255,255,.12);}
.hm4 .hm-closing p{color:var(--on-dark-2);}

/* ---------- pausa y movimiento reducido ---------- */
.hm4-paused .hm4-anim,.hm4-paused .hm4-anim *,.hm4-hidden .hm4-anim,.hm4-hidden .hm4-anim *{animation-play-state:paused !important;}
@media (prefers-reduced-motion:reduce){
  .hm4-anim,.hm4-anim *,.hm4-anim *::before,.hm4-anim *::after,.hm4-hero .hm-mock-doc::after,.hm4-hero .hm-mock-row{animation:none !important;}
  .hm4-pause{display:none;}
}

/* ======================================================================
   Herramientas y blog: banda de cabecera en cobalto profundo
   ====================================================================== */
.hm4-band{position:relative;overflow:hidden;background:linear-gradient(135deg,var(--deep),var(--deep-2) 60%,var(--deep-3));color:var(--on-dark);padding-bottom:64px;}
.hm4-band::before{content:"";position:absolute;inset:-56px;background-image:linear-gradient(rgba(124,160,255,.12) 1px,transparent 1px),linear-gradient(90deg,rgba(124,160,255,.12) 1px,transparent 1px);background-size:56px 56px;-webkit-mask-image:linear-gradient(180deg,#000,transparent 85%);mask-image:linear-gradient(180deg,#000,transparent 85%);pointer-events:none;}
.hm4-band::after{content:"";position:absolute;right:-10%;top:-40%;width:60%;height:140%;background:radial-gradient(closest-side,rgba(27,75,210,.5),transparent);pointer-events:none;}
.hm4-band>*{position:relative;z-index:1;}
.hm4 .hm4-band .hm-mono,.hm4 .hm4-band .hm-crumb{color:var(--on-dark-2);}
.hm4 .hm4-band .hm-h1{color:var(--on-dark);letter-spacing:-.04em;}
.hm4 .hm4-band .hm-lead{color:var(--on-dark-2);}
.hm4 .hm4-band .hm-lead strong{color:#fff;font-weight:600;}
.hm4 .hm4-band a{color:#93B4F4;}
.hm4 .hm4-band .hm-filter-count{color:var(--on-dark-2);}
.hm4 .hm4-band .hm-blog-header{padding-bottom:8px;}
/* la tarjeta principal se monta sobre la banda */
.hm4 .hm-tool-layout{position:relative;z-index:2;margin-top:-56px;}
.hm4 #articulos .hm-blog-hero{position:relative;z-index:2;margin-top:-40px;}
/* tarjeta lateral de privacidad */
.hm4 .hm-side-card.hm4-vaultc{background:linear-gradient(160deg,var(--deep),var(--deep-2));border:1px solid rgba(255,255,255,.15);color:var(--on-dark);}
.hm4 .hm-side-card.hm4-vaultc h3{color:var(--lum);}
.hm4 .hm-side-card.hm4-vaultc p{color:var(--on-dark-2);}
.hm4-zero{display:flex;align-items:baseline;gap:12px;margin:2px 0 10px;}
.hm4-zero b{font:600 56px/1 var(--font);letter-spacing:-.05em;color:var(--lum);}
.hm4-zero span{font:500 14px/1.3 var(--font);color:var(--on-dark);}
@media (max-width:1023px){.hm4 .hm-tool-layout{margin-top:-40px;}}