/* ════════════════════════════════════════════════════════════
   kakebo.css · TIGRE NINJA
   Landing del proyecto Kakebo Online.
   Depende de base.css + main.css (header, footer, reveal,
   kj-watermark, rain) y de scripts/main.js.
   Prefijo .kb- para no colisionar con nada del sitio.

   Firma de la página: "el cuaderno". El artículo se lee sobre
   una columna de papel washi cálido incrustada en el envoltorio
   oscuro de Tigre Ninja — el mismo gesto de la vitrina de
   SoftClock, pero aquí el papel es el soporte del texto, no un
   escaparate. Las capturas cuelgan alternas en los márgenes,
   como láminas prendidas al borde de la página.
   ════════════════════════════════════════════════════════════ */

:root{
  --washi:#FBF8F2; --washi-warm:#F4EFE5; --washi-line:#E3DED1;
  --sumi:#1A1A1A; --sumi-soft:#3A3A3A; --sumi-mute:#8A857B; --sumi-pale:#C9C3B6;
  --vermillion:#E53935; --vermillion-deep:#B71C1C;
  --kb-gold:#B58A2F; --kb-green:#5C8A4A;
}

/* ── Contenedores ── */
.kb-wrap{max-width:1100px;margin:0 auto;padding:0 1.6rem;position:relative;z-index:1}
.kb-sec{padding:4.5rem 0}

/* ════ HERO ════ */
.kb-hero{position:relative;padding:8.5rem 1.6rem 3.5rem;text-align:center;overflow:hidden}
.kb-hero .kj-watermark{font-size:clamp(240px,34vw,470px);top:50%;left:50%;transform:translate(-50%,-50%);color:rgba(229,57,53,.045)}
.kb-crumb{position:relative;z-index:2;font-family:var(--fm);font-size:.62rem;letter-spacing:.22em;text-transform:uppercase;color:var(--pdim);margin-bottom:1.4rem}
.kb-crumb a{color:var(--cyan);transition:color .2s}
.kb-crumb a:hover{color:var(--gold)}

/* Sello hanko: motivo de identidad del propio producto */
.kb-hanko{position:relative;z-index:2;display:inline-grid;place-items:center;width:74px;height:74px;margin-bottom:1.3rem;border:4px solid var(--vermillion);border-radius:10px;transform:rotate(-3deg);box-shadow:0 0 28px rgba(229,57,53,.25)}
.kb-hanko span{font-family:var(--fj);font-weight:700;font-size:2.1rem;line-height:1;color:var(--vermillion)}

.kb-eyebrow{position:relative;z-index:2;font-family:var(--fm);font-size:.62rem;letter-spacing:.3em;text-transform:uppercase;color:var(--vermillion);margin-bottom:1rem}
.kb-title{position:relative;z-index:2;font-family:var(--fd);font-weight:900;font-size:clamp(2.4rem,8vw,5rem);letter-spacing:.04em;line-height:1.04;text-transform:uppercase;color:var(--parchment)}
.kb-title .jp{display:block;font-family:var(--fj);font-weight:400;font-size:clamp(.9rem,2.4vw,1.35rem);letter-spacing:.4em;text-transform:none;color:var(--pdim);margin-top:.9rem}
.kb-lead{position:relative;z-index:2;font-family:var(--fb);font-weight:300;font-size:clamp(1.05rem,2.4vw,1.35rem);color:rgba(237,230,214,.78);max-width:620px;margin:1.6rem auto 0;line-height:1.55}
.kb-lead b{color:var(--vermillion);font-weight:500}

.kb-chips{display:flex;gap:.5rem;justify-content:center;flex-wrap:wrap;position:relative;z-index:2;margin-top:1.5rem}
.kb-chip{font-family:var(--fm);font-size:.58rem;letter-spacing:.16em;text-transform:uppercase;padding:.32rem .8rem;border-radius:20px;border:1px solid var(--border);color:var(--pdim)}
.kb-chip.verm{color:var(--vermillion);border-color:rgba(229,57,53,.4);background:rgba(229,57,53,.09)}
.kb-chip.gold{color:var(--gold);border-color:rgba(200,162,39,.4);background:var(--goldd)}
.kb-chip.plain{color:var(--parchment);border-color:rgba(237,230,214,.22);background:rgba(237,230,214,.05)}

.kb-cta-row{position:relative;z-index:2;display:flex;flex-wrap:wrap;gap:.9rem;justify-content:center;margin-top:2.2rem}
.kb-btn{display:inline-flex;align-items:center;gap:.7rem;font-family:var(--fm);font-size:.74rem;letter-spacing:.2em;text-transform:uppercase;padding:.95rem 2rem;border-radius:6px;border:1px solid var(--gold);color:var(--gold);background:transparent;transition:background .2s,color .2s,transform .2s,box-shadow .25s}
.kb-btn:hover{background:var(--gold);color:var(--ink);transform:translateY(-2px)}
.kb-btn.solid{background:var(--vermillion);border-color:var(--vermillion);color:#fff;box-shadow:0 0 34px rgba(229,57,53,.28)}
.kb-btn.solid:hover{background:#f04c48;border-color:#f04c48;color:#fff;box-shadow:0 0 52px rgba(229,57,53,.4)}
.kb-btn.ghost{border-color:var(--border-g);color:var(--pdim)}
.kb-btn.ghost:hover{background:transparent;border-color:var(--cyan);color:var(--cyan)}
.kb-btn svg{width:16px;height:16px;fill:currentColor}

/* ════ ARTÍCULO SOBRE PAPEL ════
   Rejilla de tres columnas: margen izq · columna de texto · margen der.
   Las <figure> saltan a los márgenes en escritorio y se integran en el
   flujo en móvil. */
.kb-paper{
  position:relative;z-index:2;
  max-width:1180px;margin:0 auto;
  background:var(--washi);color:var(--sumi);
  border-radius:20px;
  padding:4rem 0 4.5rem;
  box-shadow:0 40px 100px rgba(0,0,0,.55),0 0 0 1px rgba(229,57,53,.12);
  overflow:hidden;
}
/* Textura de grano, como en el producto real: ruido SVG sin assets */
.kb-paper::after{
  content:'';position:absolute;inset:0;pointer-events:none;opacity:.5;
  mix-blend-mode:multiply;
  background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.9' numOctaves='3'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)' opacity='.32'/%3E%3C/svg%3E");
}

.kb-article{
  position:relative;z-index:1;
  display:grid;
  grid-template-columns:minmax(0,1fr) minmax(0,min(58ch,46%)) minmax(0,1fr);
  column-gap:2.6rem;
  padding:0 2.6rem;
}
/* Todo el texto vive en la columna central por defecto */
.kb-article > *{grid-column:2}

.kb-article h2{
  font-family:var(--fd);font-weight:700;
  font-size:clamp(1.35rem,3vw,1.95rem);letter-spacing:.01em;
  color:var(--sumi);margin:3rem 0 .5rem;
  display:flex;align-items:baseline;gap:.6rem;
}
.kb-article h2:first-of-type{margin-top:0}
.kb-article h2 .kj{font-family:var(--fj);font-size:.75em;color:var(--vermillion)}
.kb-article h3{font-family:var(--fd);font-weight:700;font-size:1.08rem;color:var(--sumi);margin:2rem 0 .4rem}
.kb-article p{font-family:var(--fb);font-weight:300;font-size:1.02rem;line-height:1.72;color:var(--sumi-soft);margin:.9rem 0}
.kb-article p b,.kb-article strong{color:var(--sumi);font-weight:600}
.kb-article a{color:var(--vermillion-deep);border-bottom:1px solid rgba(183,28,28,.3);transition:color .2s,border-color .2s}
.kb-article a:hover{color:var(--vermillion);border-color:var(--vermillion)}
.kb-article code{font-family:var(--fm);font-size:.9em;color:var(--vermillion-deep);background:rgba(229,57,53,.07);border:1px solid var(--washi-line);border-radius:4px;padding:.05em .35em}

/* Entradilla del artículo */
.kb-standfirst{font-family:var(--fb);font-weight:300;font-size:1.18rem!important;line-height:1.6!important;color:var(--sumi)!important;border-left:3px solid var(--vermillion);padding-left:1.1rem;margin-bottom:2rem!important}

/* Lista de las cuatro preguntas */
.kb-questions{list-style:none;margin:1.4rem 0;padding:0;display:grid;gap:.7rem}
.kb-questions li{display:flex;gap:.9rem;align-items:baseline;padding:.9rem 1.1rem;background:var(--washi-warm);border:1px solid var(--washi-line);border-radius:10px;font-family:var(--fb);font-weight:300;color:var(--sumi-soft)}
.kb-questions .num{font-family:var(--fj);font-weight:700;font-size:1.1rem;color:var(--vermillion);flex:none;line-height:1}

/* Macrocategorías */
.kb-macros{display:flex;flex-wrap:wrap;gap:.5rem;margin:1.2rem 0}
.kb-macro{font-family:var(--fm);font-size:.62rem;letter-spacing:.1em;text-transform:uppercase;padding:.4rem .8rem;border-radius:20px;border:1px solid var(--washi-line);color:var(--sumi-soft);background:#fff}
.kb-macro i{display:inline-block;width:9px;height:9px;border-radius:50%;margin-right:.45rem;vertical-align:0}

/* Cita / tanzaku */
.kb-tanzaku{margin:2.2rem 0;padding:1.7rem 1.9rem;background:linear-gradient(160deg,#fff,var(--washi-warm));border:1px solid var(--washi-line);border-left:3px solid var(--kb-gold);border-radius:10px}
.kb-tanzaku p{margin:0!important;font-size:1.06rem!important;color:var(--sumi)!important;font-style:italic}
.kb-tanzaku cite{display:block;margin-top:.7rem;font-family:var(--fm);font-size:.62rem;letter-spacing:.14em;text-transform:uppercase;font-style:normal;color:var(--sumi-mute)}

/* Nota de estado */
.kb-note{margin:2.2rem 0;padding:1.4rem 1.6rem;border:1px dashed var(--vermillion);border-radius:10px;background:rgba(229,57,53,.05)}
.kb-note p{margin:0!important;font-size:.95rem!important}
.kb-note b{color:var(--vermillion-deep)}

/* ── FIGURAS ALTERNAS EN LOS MÁRGENES ──
   .kb-fig--left ocupa la columna 1, .kb-fig--right la columna 3.
   Se alinean con el bloque de texto que las precede. */
.kb-figure{margin:1.6rem 0;align-self:start}
.kb-figure--left{grid-column:1;justify-self:end}
.kb-figure--right{grid-column:3;justify-self:start}
.kb-figure img{display:block;width:100%;border-radius:10px;border:1px solid var(--washi-line);background:#fff;box-shadow:0 12px 34px rgba(60,50,35,.14)}
.kb-figure figcaption{margin-top:.6rem;font-family:var(--fm);font-size:.6rem;line-height:1.6;letter-spacing:.07em;color:var(--sumi-mute)}
.kb-figure figcaption b{display:block;font-family:var(--fb);font-weight:500;font-size:.78rem;letter-spacing:0;text-transform:none;color:var(--sumi);margin-bottom:.2rem}

/* En pantallas medianas y pequeñas, el artículo pasa a una columna
   y las figuras entran en el flujo del texto. */
@media (max-width:1000px){
  .kb-article{grid-template-columns:minmax(0,1fr);padding:0 1.6rem}
  .kb-article > *{grid-column:1}
  .kb-figure{grid-column:1!important;justify-self:stretch;max-width:520px;margin:2rem auto}
}

/* ════ EL ENSŌ DE LA MONEDA (icono simbólico animado + haiku) ════
   Entre el artículo y la ficha técnica. Un ensō (círculo zen trazado
   a pincel) con ondas concéntricas, como una moneda que cae en el
   agua — el mismo motivo de "detenerse a mirar" que articula el
   proyecto. Respeta prefers-reduced-motion (regla global al final
   de este archivo detiene todas las animaciones). */
.kb-omen{padding:5rem 1.6rem;text-align:center;position:relative;overflow:hidden}
.kb-omen-icon{width:min(260px,60vw);height:auto;margin:0 auto 2.2rem;display:block}

.kb-omen-ring{fill:none;stroke:var(--parchment);opacity:.9;stroke-width:2.4;stroke-linecap:round;
  stroke-dasharray:520;stroke-dashoffset:520;
  animation:kbEnso 2.6s cubic-bezier(.65,0,.35,1) .2s forwards;
  transform-origin:center;transform:rotate(-8deg);}
@keyframes kbEnso{to{stroke-dashoffset:38}}

.kb-omen-coin{fill:var(--vermillion);opacity:0;animation:kbCoinIn .6s ease-out 2.1s forwards}
@keyframes kbCoinIn{from{opacity:0;transform:scale(.4);transform-origin:center}to{opacity:1;transform:scale(1)}}
.kb-omen-kanji{fill:var(--washi,#FBF8F2);font-family:var(--fj);font-size:15px;opacity:0;animation:kbCoinIn .5s ease-out 2.3s forwards}

.kb-omen-wave{fill:none;stroke:var(--gold);stroke-width:1;opacity:0}
.kb-omen-wave-1{animation:kbWave 3.4s ease-out 2.4s infinite}
.kb-omen-wave-2{animation:kbWave 3.4s ease-out 3.5s infinite}
.kb-omen-wave-3{animation:kbWave 3.4s ease-out 4.6s infinite}
@keyframes kbWave{
  0%{opacity:0;transform:scale(.55);transform-origin:center}
  15%{opacity:.55}
  100%{opacity:0;transform:scale(1.9);transform-origin:center}
}

.kb-omen-haiku{max-width:420px;margin:0 auto;position:relative;z-index:2}
.kb-omen-haiku p{font-family:var(--fb);font-weight:300;font-style:italic;font-size:1.15rem;line-height:1.85;color:rgba(237,230,214,.85);white-space:pre-line}
.kb-omen-haiku cite{display:block;margin-top:1rem;font-family:var(--fm);font-size:.6rem;letter-spacing:.16em;text-transform:uppercase;font-style:normal;color:var(--pdim)}
.kb-omen-tag{font-family:var(--fm);font-size:.6rem;letter-spacing:.28em;text-transform:uppercase;color:var(--vermillion, #e53935);margin-bottom:2rem;display:block}


.kb-tag{font-family:var(--fm);font-size:.62rem;letter-spacing:.3em;text-transform:uppercase;color:var(--cyan);display:flex;align-items:center;gap:.7rem;margin-bottom:1rem}
.kb-tag::before{content:'';width:28px;height:1px;background:var(--cyan)}
.kb-h2{font-family:var(--fd);font-weight:700;font-size:clamp(1.5rem,3.6vw,2.3rem);letter-spacing:.03em;margin-bottom:1.2rem;color:var(--parchment)}
.kb-p{font-family:var(--fb);font-weight:300;font-size:1.02rem;color:rgba(237,230,214,.72);max-width:70ch;margin-bottom:1.1rem}

.kb-specs{width:100%;border-collapse:collapse;margin-top:1.4rem;font-size:.88rem}
.kb-specs th{font-family:var(--fm);font-size:.56rem;letter-spacing:.2em;text-transform:uppercase;color:var(--pdim);text-align:left;padding:.7rem .8rem;border-bottom:1px solid var(--border-g)}
.kb-specs td{font-family:var(--fb);font-weight:300;color:rgba(237,230,214,.72);padding:.7rem .8rem;border-bottom:1px solid var(--border)}
.kb-specs td:first-child{font-family:var(--fm);color:var(--vermillion);white-space:nowrap}

/* Licencia */
.kb-license{margin-top:1rem;padding:1.9rem 2rem;border:1px solid rgba(200,162,39,.35);border-left:3px solid var(--gold);border-radius:10px;background:var(--goldd)}
.kb-license h3{font-family:var(--fd);font-weight:700;font-size:1.15rem;color:var(--parchment);margin-bottom:.9rem;display:flex;align-items:center;gap:.6rem}
.kb-license h3 .kj{font-family:var(--fj);color:var(--gold)}
.kb-license p{font-family:var(--fb);font-weight:300;font-size:.96rem;color:rgba(237,230,214,.72);margin-bottom:.9rem;max-width:72ch}
.kb-license p:last-child{margin-bottom:0}
.kb-license b{color:var(--parchment);font-weight:500}
.kb-license a{color:var(--cyan);border-bottom:1px solid rgba(0,207,224,.3)}
.kb-license a:hover{color:var(--gold);border-color:var(--gold)}

/* ════ SIGUE EL SENDERO (temas relacionados) ════ */
.kb-related{border-top:1px solid var(--border);padding:4.5rem 0 1rem}
.kb-related-head{text-align:center;margin-bottom:2.4rem}
.kb-related-head h2{font-family:var(--fd);font-weight:700;font-size:clamp(1.35rem,3.2vw,2rem);letter-spacing:.04em;text-transform:uppercase;color:var(--parchment)}
.kb-related-head h2 .kj{font-family:var(--fj);color:var(--gold);margin-right:.5rem}
.kb-related-head p{font-family:var(--fb);font-weight:300;color:var(--pdim);max-width:56ch;margin:.6rem auto 0}

.kb-rel-grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(230px,1fr));gap:1.1rem}
.kb-rel{position:relative;display:flex;flex-direction:column;gap:.55rem;padding:1.6rem 1.5rem 1.5rem;background:var(--ink2);border:1px solid var(--border);border-radius:12px;overflow:hidden;transition:transform .3s var(--ease),border-color .3s,box-shadow .3s}
.kb-rel:hover{transform:translateY(-5px);border-color:var(--border-g);box-shadow:0 18px 46px rgba(0,0,0,.45)}
.kb-rel::before{content:attr(data-kj);position:absolute;right:-.4rem;bottom:-1.9rem;font-family:var(--fj);font-weight:700;font-size:6.5rem;line-height:1;color:rgba(229,57,53,.055);pointer-events:none}
.kb-rel-kind{position:relative;z-index:2;align-self:flex-start;font-family:var(--fm);font-size:.54rem;letter-spacing:.18em;text-transform:uppercase;padding:.26rem .7rem;border-radius:20px;border:1px solid var(--border-g);color:var(--gold)}
.kb-rel-kind.video{color:var(--red);border-color:rgba(224,57,80,.35);background:rgba(224,57,80,.07)}
.kb-rel-kind.curso{color:var(--cyan);border-color:rgba(0,207,224,.32);background:rgba(0,207,224,.06)}
.kb-rel-kind.lectura{color:#c0a6ff;border-color:rgba(168,85,247,.32);background:rgba(168,85,247,.07)}
.kb-rel h3{position:relative;z-index:2;font-family:var(--fd);font-weight:700;font-size:1.02rem;color:var(--parchment)}
.kb-rel p{position:relative;z-index:2;font-family:var(--fb);font-weight:300;font-size:.87rem;color:var(--pdim);flex:1}
.kb-rel .go{position:relative;z-index:2;font-family:var(--fm);font-size:.6rem;letter-spacing:.18em;text-transform:uppercase;color:var(--gold);display:inline-flex;align-items:center;gap:.5rem;transition:gap .25s;margin-top:.3rem}
.kb-rel:hover .go{gap:.9rem}

/* ════ CIERRE ════ */
.kb-final{text-align:center;padding:4.5rem 1.6rem 6rem;position:relative;overflow:hidden}
.kb-final .kj-watermark{font-size:clamp(180px,26vw,330px);top:50%;left:50%;transform:translate(-50%,-50%);color:rgba(0,207,224,.03)}
.kb-final h2{position:relative;z-index:2;font-family:var(--fd);font-weight:700;font-size:clamp(1.5rem,4vw,2.3rem);margin-bottom:1rem}
.kb-final p{position:relative;z-index:2;font-family:var(--fb);font-weight:300;color:var(--pdim);max-width:520px;margin:0 auto 2rem}
.kb-sig{position:relative;z-index:2;margin-top:2.6rem;font-family:var(--fm);font-size:.58rem;letter-spacing:.28em;color:var(--dim);text-transform:uppercase}

/* ── Accesibilidad / responsive ── */
:where(a,button):focus-visible{outline:2px solid var(--vermillion);outline-offset:3px;border-radius:4px}
@media (max-width:640px){
  .kb-hero{padding-top:7rem}
  .kb-sec{padding:3.2rem 0}
  .kb-paper{border-radius:14px;padding:2.6rem 0 3rem}
  .kb-btn{width:100%;justify-content:center}
}
@media (prefers-reduced-motion:reduce){
  *,*::before,*::after{animation-duration:.01ms!important;animation-iteration-count:1!important;transition-duration:.01ms!important}
}