/* NinjaHosting.cl · capa "sumi-e" (rediseño oct-2026).
   Solo componentes nuevos, todo con prefijo ink-. Se carga DESPUÉS de estilos.css y style.css.
   No toca ninguna clase existente del sitio salvo donde se agrega la clase ink-* al mismo elemento. */
:root{--ink-red:#bc002d;--ink-red-d:#94001f;--ink-ink:#09090b;--ink-muted:#60697b;--ink-paper:#f5efe2;--ink-paper-d:#ebe2cf;--ink-line:#e8e4dc;--ink-pink:#fdecef;--ink-ease:cubic-bezier(.2,.8,.2,1);--ink-back:cubic-bezier(.3,1.6,.5,1)}

/* ---------- revelado al hacer scroll (solo lo que empieza bajo el pliegue) ---------- */
.ink-up{transition:opacity .8s var(--ink-ease),transform .8s var(--ink-ease)}
.ink-up.ink-wait{opacity:0;transform:translateY(26px)}

/* ---------- corte de katana en el acento del h1 (solo al cargar) ---------- */
.ink-acc{display:inline-block;position:relative;padding-right:.08em}
.ink-katana{display:inline-block;animation:ink-reveal .55s .45s var(--ink-ease) both}
.ink-acc::after{content:"";position:absolute;left:-4%;top:52%;height:3px;width:0;border-radius:3px;background:linear-gradient(90deg,transparent,var(--ink-red) 20%,#ff5c7a);transform:rotate(-6deg);opacity:0;animation:ink-streak .6s .4s var(--ink-ease) both;pointer-events:none}
@keyframes ink-reveal{from{clip-path:inset(0 100% 0 0)}to{clip-path:inset(0 -10% 0 0)}}
@keyframes ink-streak{0%{width:0;opacity:1}70%{width:108%;opacity:1}100%{width:108%;opacity:0}}

/* ---------- destello de katana en botones (hover) ---------- */
.ink-slash{position:relative;overflow:hidden;isolation:isolate}
.ink-slash::before{content:"";position:absolute;z-index:-1;top:-30%;bottom:-30%;width:3px;left:-12%;background:linear-gradient(transparent,#fff 30%,#fff 70%,transparent);transform:rotate(24deg);opacity:0;box-shadow:0 0 12px 2px rgba(255,255,255,.75);pointer-events:none}
.ink-slash:hover::before{animation:ink-slash .5s var(--ink-ease)}
@keyframes ink-slash{0%{opacity:0;left:-12%}15%{opacity:1}100%{opacity:0;left:112%}}

/* ---------- hero del home: imagen fija + video diferido, globo "en guardia" ---------- */
.ink-hero-art{position:relative;max-width:360px;margin:0 auto}
.ink-hero-frame{position:relative;border-radius:.625rem;overflow:hidden;aspect-ratio:2/3;background:var(--ink-paper);box-shadow:0 30px 60px -30px rgba(9,9,11,.45)}
.ink-hero-frame img,.ink-hero-frame video{width:100%;height:100%;object-fit:cover;display:block}
.ink-hero-frame video{position:absolute;inset:0;opacity:0;transition:opacity .8s ease}
.ink-hero-frame video.ink-on{opacity:1}
.ink-guard{position:absolute;left:-34px;bottom:34px;display:flex;align-items:center;gap:12px;background:#fff;border-radius:12px;padding:10px 16px 10px 10px;box-shadow:0 14px 34px -12px rgba(9,9,11,.35);animation:ink-bob 4.5s ease-in-out 6;max-width:calc(100% + 20px)}
.ink-guard img{width:44px;height:44px;border-radius:50%;object-fit:cover;background:var(--ink-paper);flex:none}
.ink-guard p{margin:0;line-height:1.25}
.ink-live{display:inline-block;width:7px;height:7px;border-radius:50%;background:#16a34a;margin-right:6px;vertical-align:middle;box-shadow:0 0 0 0 rgba(22,163,74,.6);animation:ink-ping 2s 6}
@keyframes ink-bob{0%,100%{transform:translateY(0)}50%{transform:translateY(-6px)}}
@keyframes ink-ping{0%{box-shadow:0 0 0 0 rgba(22,163,74,.55)}80%,100%{box-shadow:0 0 0 8px rgba(22,163,74,0)}}
@media (max-width:1199.98px){.ink-guard{left:-12px}}

/* ---------- dibujo del hero de páginas interiores: entrada en tinta + flotación ---------- */
.ink-art{animation:ink-float 6s ease-in-out 6}
.ink-art img,img.ink-art-img{animation:ink-inkin 1.1s .15s var(--ink-ease) both}
@keyframes ink-inkin{from{clip-path:circle(0% at 50% 45%)}to{clip-path:circle(75% at 50% 50%)}}
@keyframes ink-float{0%,100%{transform:translateY(0)}50%{transform:translateY(-8px)}}

/* ---------- tarjetas de planes: personaje + elevación ---------- */
.ink-plan-top{display:grid;grid-template-columns:minmax(0,1fr) 100px;gap:10px;align-items:start}
.ink-plan-top .valor-anual{font-size:1.7rem}
.ink-plan-top .valor-anual sub{white-space:nowrap;font-size:.9rem}
.ink-plan-top>div:first-child{display:flow-root;min-width:0}
.ink-char{width:100px;height:100px;border-radius:14px;overflow:hidden;background:var(--ink-paper);justify-self:end}
.ink-char img{width:100%;height:100%;object-fit:cover;display:block;clip-path:circle(75% at 50% 50%);transition:transform .6s var(--ink-ease),clip-path 1.1s .25s var(--ink-ease)}
.ink-char.ink-wait img{clip-path:circle(0% at 50% 55%)}
.card-plan.ink-lift{transition:transform .35s var(--ink-ease),box-shadow .35s,border-color .4s ease}
.card-plan.ink-lift:hover{transform:translateY(-6px);box-shadow:0 26px 50px -28px rgba(9,9,11,.35)}
.ink-lift:hover .ink-char img{transform:scale(1.08) rotate(-2deg)}
.ink-char-sm{display:flex;align-items:center;gap:10px}
.ink-char-sm img{width:44px;height:44px;border-radius:10px;object-fit:cover;background:var(--ink-paper)}

/* ---------- sección nueva: puntos de restauración (fondo papel) ---------- */
.ink-restore{background:var(--ink-paper);position:relative;overflow:hidden}
.ink-restore::before{content:"";position:absolute;inset:0;opacity:.5;pointer-events:none;background-image:radial-gradient(rgba(9,9,11,.05) 1px,transparent 1px);background-size:5px 5px}
.ink-restore .container{position:relative}
.ink-scroll{position:relative;border-radius:6px;overflow:hidden;box-shadow:0 0 0 10px #fbf7ee,0 0 0 11px var(--ink-paper-d),0 30px 60px -30px rgba(9,9,11,.5);aspect-ratio:16/9;background:#efe7d6;margin:11px}
.ink-scroll video{width:100%;height:100%;object-fit:cover;display:block}
.ink-rope{margin-top:28px;position:relative;height:96px}
.ink-rope svg{position:absolute;inset:0 0 auto;width:100%;height:34px;overflow:visible}
.ink-rope svg path{fill:none;stroke:#7a5a3a;stroke-width:2.2;stroke-linecap:round}
.ink-tags{position:absolute;inset:0;display:flex;justify-content:space-around;padding-inline:4%}
.ink-tag{width:46px;height:58px;margin-top:var(--y,12px);background:#fffdf8;border:1.5px solid var(--ink-ink);border-radius:3px;display:grid;place-items:center;font-weight:700;font-size:1.05rem;color:var(--ink-ink);transform-origin:50% -10px;box-shadow:2px 3px 0 rgba(9,9,11,.12);position:relative;transition:opacity .4s,translate .5s var(--ink-back)}
.ink-tag::before{content:"";position:absolute;top:-9px;left:50%;width:6px;height:10px;margin-left:-3px;background:#a68058;border-radius:2px}
.ink-tag.ink-tag-last{border-color:var(--ink-red);color:var(--ink-red)}
.ink-tags.ink-wait .ink-tag{opacity:0;translate:0 -24px}
.ink-tags .ink-tag:nth-child(2){transition-delay:.08s}.ink-tags .ink-tag:nth-child(3){transition-delay:.16s}.ink-tags .ink-tag:nth-child(4){transition-delay:.24s}.ink-tags .ink-tag:nth-child(5){transition-delay:.32s}.ink-tags .ink-tag:nth-child(6){transition-delay:.4s}
.ink-points{list-style:none;padding:0;margin:0 0 2rem;display:grid;gap:10px}
.ink-points li{display:flex;gap:12px;align-items:baseline;color:#3f4450}
.ink-points b{color:var(--ink-red);font-weight:700;min-width:1.6em;font-size:1.25rem}

/* ---------- separador de pincel (se dibuja al entrar) ---------- */
.ink-brush{display:block;width:min(560px,80%);height:30px;margin:34px auto -10px;overflow:visible}
.ink-brush path{fill:none;stroke:var(--ink-ink);stroke-linecap:round;stroke-dasharray:1;stroke-dashoffset:0;transition:stroke-dashoffset 1.3s var(--ink-ease)}
.ink-brush .ink-p2{stroke:var(--ink-red)}
.ink-brush.ink-wait path{stroke-dashoffset:1}

/* ---------- shuriken en las celdas del dojo ---------- */
.ink-sh-host{position:relative}
.ink-sh{position:absolute;right:22px;top:24px;width:22px;height:22px;color:var(--ink-red);opacity:.8;transition:transform .8s var(--ink-ease)}
.ink-sh-host:hover .ink-sh{transform:rotate(180deg)}

/* ---------- sitejet: ninja pintando sobre tarjeta clara (la sección es oscura) ---------- */
.ink-sj{display:flex;align-items:center;gap:22px;background:var(--ink-paper);border-radius:22px;padding:18px 24px;margin-top:8px}
.ink-sj img{width:170px;height:auto;flex:none;mix-blend-mode:multiply;animation:ink-float 6s ease-in-out 6}
@media (max-width:575.98px){.ink-sj{flex-direction:column;text-align:center}}

/* ---------- camino del ninja: sellos hanko ---------- */
.ink-steps{position:relative}
.ink-steps::before{content:"";position:absolute;left:8%;right:8%;top:calc(1.5rem + 44px);border-top:2px dashed #d8d2c6;pointer-events:none}
.ink-hanko{position:relative;width:88px;height:88px;border-radius:14px;border:3px solid var(--ink-red);color:var(--ink-red);display:grid;place-items:center;font-family:"Outfit",ui-sans-serif,system-ui,sans-serif;font-weight:700;font-size:1.9rem;background:#fefefe;margin-bottom:18px;transform:rotate(var(--r,-4deg));transition:transform .45s var(--ink-back),opacity .2s;box-shadow:inset 0 0 0 4px #fefefe,inset 0 0 0 6px rgba(188,0,45,.35)}
.ink-hanko::after{content:"";position:absolute;inset:-12px;border-radius:20px;border:2px solid var(--ink-red);opacity:0;pointer-events:none}
.ink-hanko.ink-wait{opacity:0;transform:scale(1.9) rotate(calc(var(--r,-4deg) - 14deg))}
.ink-hanko.ink-in::after{animation:ink-ring .6s .3s ease-out}
.ink-shake{animation:ink-thud .35s .3s}
@keyframes ink-ring{from{opacity:.6;transform:scale(.8)}to{opacity:0;transform:scale(1.35)}}
@keyframes ink-thud{0%,100%{transform:none}30%{transform:translateY(2px)}60%{transform:translateY(-1px)}}
@media (max-width:767.98px){.ink-steps::before{display:none}}

/* ---------- cierre del home: video en guardia sobre papel ---------- */
.ink-final{display:grid;grid-template-columns:1fr 1fr;align-items:center;background:var(--ink-paper);border-radius:22px;overflow:hidden}
.ink-final video,.ink-final img{width:100%;height:100%;object-fit:cover;aspect-ratio:16/10;mix-blend-mode:multiply;display:block}
.ink-final-txt{padding:40px 44px}
.ink-final-txt .text-link{display:inline-block;white-space:nowrap;margin-top:10px}
@media (max-width:991.98px){.ink-final{grid-template-columns:1fr}.ink-final-txt{padding:28px}}

/* ---------- páginas interiores ---------- */
.ink-chip{border:1.5px solid var(--ink-ink)!important;padding:8px 16px!important;font-size:.92rem!important;font-weight:500!important;background:#fff;color:var(--ink-ink)!important;border-radius:999px}
.ink-diag-img{width:80px;height:80px;animation:ink-inkin .8s var(--ink-ease) both}
.ink-tl-v{border-left:0!important;background:linear-gradient(var(--ink-red),#e7c3cb) left top/2px 100% no-repeat}
.ink-tl-v .timeline-ninja__dot{left:-2.3rem}
.ink-tl-v .timeline-ninja__year{font-size:2rem;line-height:1.1}
.ink-band-n{font-variant-numeric:tabular-nums}
.ink-chips{display:flex;flex-wrap:wrap;gap:10px;margin:0;padding:0;list-style:none}
.ink-chips li,.ink-chips span{border:1.5px solid var(--ink-ink);border-radius:999px;padding:8px 16px;font-size:.92rem;font-weight:500;background:#fff;color:var(--ink-ink)}
.ink-ext-star{border:2px solid var(--ink-red)!important;position:relative;overflow:hidden}
.ink-ext-star::after{content:"";position:absolute;right:-30px;top:-30px;width:90px;height:90px;border-radius:50%;background:radial-gradient(circle,rgba(188,0,45,.85),rgba(188,0,45,.25) 60%,transparent 70%);pointer-events:none}
.ink-band{background:var(--ink-ink)!important;position:relative;overflow:hidden}
.ink-band::after{content:"";position:absolute;right:-60px;bottom:-80px;width:260px;height:260px;border-radius:50%;background:radial-gradient(circle,rgba(188,0,45,.9),rgba(188,0,45,.3) 55%,transparent 70%);pointer-events:none}
.ink-band>*{position:relative;z-index:1}
.ink-tl{position:relative}
.ink-tl::before{content:"";position:absolute;left:0;right:0;top:30px;height:2px;background:linear-gradient(90deg,var(--ink-red),#e7c3cb)}
.ink-tl .ink-yr{display:inline-block;position:relative;background:#fefefe;padding-right:12px;font-family:"Newsreader",Georgia,serif;font-style:italic;font-size:2.2rem;color:var(--ink-red);line-height:1.6}
.ink-wako-col{color:var(--ink-red);background:rgba(188,0,45,.04)}
.ink-wako-tbl>tbody>tr>td:nth-child(3){--bs-table-bg:rgba(188,0,45,.04);--bs-table-accent-bg:transparent;background-color:rgba(188,0,45,.04)!important}
.ink-legal-hero{display:grid;grid-template-columns:1fr 200px;gap:40px;align-items:center;text-align:left}
.ink-legal-hero .ink-art{width:200px;justify-self:end}
.ink-legal-hero .ink-art img{width:100%;height:auto}
@media (max-width:767.98px){.ink-legal-hero{grid-template-columns:1fr;gap:16px}.ink-legal-hero .ink-art{width:150px;order:-1;justify-self:center}}
.ink-toc{position:sticky;top:96px;font-size:.86rem;display:grid;gap:6px;border-left:2px solid var(--ink-line);padding-left:16px;margin:0}
.ink-toc b{font-size:.74rem;letter-spacing:.12em;text-transform:uppercase;color:var(--ink-ink);margin-bottom:6px}
.ink-toc a{color:var(--ink-muted);text-decoration:none}
.ink-toc a:hover{color:var(--ink-red)}
@media (max-width:991.98px){.ink-toc{position:static;margin-bottom:24px}}
.ink-diag-res img{width:80px;height:80px;display:inline-block;animation:ink-inkin .8s var(--ink-ease) both}

/* ---------- selector de vista previa (solo en las copias de revisión) ---------- */
.ink-vp{position:fixed;z-index:1030;left:16px;bottom:16px;background:var(--ink-ink);color:#fff;font:500 .74rem/1.3 "Outfit",system-ui,sans-serif;padding:8px 12px;border-radius:8px;display:flex;gap:10px;align-items:center;box-shadow:0 10px 30px -10px rgba(0,0,0,.5)}
.ink-vp details{position:relative}
.ink-vp summary{list-style:none;cursor:pointer;background:#2a2a30;border-radius:5px;padding:4px 9px}
.ink-vp summary::-webkit-details-marker{display:none}
.ink-vp nav{position:absolute;left:0;bottom:calc(100% + 10px);background:var(--ink-ink);border-radius:10px;padding:8px;display:grid;min-width:240px;box-shadow:0 12px 34px -10px rgba(0,0,0,.6)}
.ink-vp nav a{padding:7px 10px;border-radius:6px;color:#e9e9ee;text-decoration:none}
.ink-vp nav a:hover,.ink-vp nav a.ink-on{background:#2a2a30;color:#fff}
.ink-vp nav hr{border:0;border-top:1px solid #333;margin:4px 0}

.ink-now,.ink-now *{transition:none!important;animation-duration:.01s!important}
.ink-sr{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap}

/* ---------- movimiento reducido: nada se mueve, todo visible ---------- */
@media (prefers-reduced-motion: reduce){
  [class*="ink-"],[class*="ink-"] *,[class*="ink-"]::before,[class*="ink-"]::after,[class*="ink-"] *::before,[class*="ink-"] *::after{animation:none!important;transition:none!important}
  .ink-wait,.ink-wait *{opacity:1!important;transform:none!important;clip-path:none!important;translate:none!important}
  .ink-brush path{stroke-dashoffset:0!important}
  .ink-hero-frame video{display:none}
}