/* ════════════════════════════════════════════════════════════
   softclock.css · TIGRE NINJA
   Página de presentación del proyecto SoftClock.
   Depende de base.css (paleta, fuentes, reset) y main.css
   (header, footer, reveal, kj-watermark, rain) + main.js.
   Todas las clases van prefijadas con .sc- para no chocar con
   las del propio componente (que usa .sck-).

   Firma de la página: "la vitrina" — una tarjeta cálida y clara
   (la propia paleta 'porcelana' del componente) incrustada en
   el envoltorio oscuro de Tigre Ninja, como una pieza de reloj
   expuesta bajo un foco. Tipografía propia dentro de la vitrina
   (Bricolage Grotesque + Manrope) que cita la identidad del
   propio producto; fuera de la vitrina, la tipografía de marca.
   ════════════════════════════════════════════════════════════ */

:root{
  --porcelain:#F7F4EF; --porcelain-ink:#2B2A27; --porcelain-dim:#84817A;
  --porcelain-line:#DEDCD4; --clay:#C2603F;
}

/* ── Contenedor común ── */
.sc-wrap{max-width:1080px;margin:0 auto;padding:0 1.6rem;position:relative;z-index:1}
.sc-sec{padding:4.5rem 0}
.sc-sec + .sc-sec{border-top:1px solid var(--border)}

/* ════ HERO ════ */
.sc-hero{position:relative;padding:8.5rem 1.6rem 3rem;text-align:center;overflow:hidden}
.sc-hero .kj-watermark{font-size:clamp(240px,34vw,480px);top:50%;left:50%;transform:translate(-50%,-50%);color:rgba(194,96,63,.05)}
.sc-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}
.sc-crumb a{color:var(--cyan);transition:color .2s}
.sc-crumb a:hover{color:var(--gold)}
.sc-eyebrow{position:relative;z-index:2;font-family:var(--fm);font-size:.62rem;letter-spacing:.3em;text-transform:uppercase;color:var(--clay);margin-bottom:1.2rem}
.sc-title{position:relative;z-index:2;font-family:var(--fd);font-weight:900;font-size:clamp(2.6rem,9vw,5.6rem);letter-spacing:.04em;line-height:1.02;text-transform:uppercase;color:var(--parchment)}
.sc-title .accent{color:var(--clay);text-shadow:0 0 30px rgba(194,96,63,.35)}
.sc-vers{display:inline-flex;gap:.5rem;justify-content:center;flex-wrap:wrap;position:relative;z-index:2;margin-top:1.4rem}
.sc-lead{position:relative;z-index:2;font-family:var(--fb);font-weight:300;font-size:clamp(1.05rem,2.4vw,1.4rem);color:rgba(237,230,214,.78);max-width:600px;margin:1.5rem auto 0;line-height:1.55}
.sc-lead b{color:var(--clay);font-weight:500}
.sc-cta-row{position:relative;z-index:2;display:flex;flex-wrap:wrap;gap:.9rem;justify-content:center;margin-top:2.2rem}

/* Botones (envoltorio oscuro) */
.sc-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);transition:background .2s,color .2s,transform .2s,box-shadow .25s;background:transparent}
.sc-btn:hover{background:var(--gold);color:var(--ink);transform:translateY(-2px)}
.sc-btn.solid{background:var(--clay);border-color:var(--clay);color:#fff;box-shadow:0 0 34px rgba(194,96,63,.28)}
.sc-btn.solid:hover{background:#d67650;border-color:#d67650;box-shadow:0 0 52px rgba(194,96,63,.4);color:#fff}
.sc-btn.ghost{border-color:var(--border-g);color:var(--pdim)}
.sc-btn.ghost:hover{background:transparent;border-color:var(--cyan);color:var(--cyan)}
.sc-btn svg{width:16px;height:16px;fill:currentColor}

/* Chips */
.sc-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);white-space:nowrap}
.sc-chip.clay{color:var(--clay);border-color:rgba(194,96,63,.4);background:rgba(194,96,63,.1)}
.sc-chip.cyan{color:var(--cyan);border-color:rgba(0,207,224,.35);background:rgba(0,207,224,.07)}
.sc-chip.gold{color:var(--gold);border-color:rgba(200,162,39,.4);background:var(--goldd)}
.sc-chip.plain{color:var(--parchment);border-color:rgba(237,230,214,.22);background:rgba(237,230,214,.04)}

/* ════ LA VITRINA (elemento estrella) ════ */
.sc-vitrine-intro{max-width:640px;margin:0 auto;text-align:center;position:relative;z-index:2}
.sc-vitrine-intro p{font-family:var(--fb);font-weight:300;color:var(--pdim);font-size:.98rem;margin-top:.6rem}

.sc-vitrine{
  max-width:900px;margin:2.4rem auto 0;position:relative;z-index:2;
  background:var(--porcelain);color:var(--porcelain-ink);
  border-radius:22px;overflow:hidden;
  box-shadow:0 40px 100px rgba(0,0,0,.55),0 0 0 1px rgba(194,96,63,.14);
  font-family:'Manrope',var(--fb);
}
.sc-vitrine-top{display:flex;align-items:center;justify-content:space-between;gap:1rem;padding:1rem 1.6rem;border-bottom:1px solid var(--porcelain-line)}
.sc-vitrine-brand{font-family:'Bricolage Grotesque',var(--fd);font-weight:700;font-size:.85rem;letter-spacing:-.01em}
.sc-vitrine-brand em{color:var(--clay);font-style:normal}
.sc-vitrine-badge{font-family:ui-monospace,'Share Tech Mono',monospace;font-size:.62rem;letter-spacing:.06em;color:var(--porcelain-dim);padding:.3rem .7rem;border:1px solid var(--porcelain-line);border-radius:20px}

.sc-vitrine-body{padding:2.2rem 1.8rem 2.6rem}
.sc-stage{display:flex;flex-wrap:wrap;align-items:center;justify-content:center;gap:2.6rem;padding-bottom:2rem}
.sc-clock-mount{width:220px;height:220px;flex:none}
.sc-stage-info{display:flex;flex-direction:column;gap:.9rem;min-width:220px}
.sc-time-now{font-family:'Bricolage Grotesque',var(--fd);font-weight:700;font-size:2.2rem;letter-spacing:-.02em}
.sc-time-label{font-family:ui-monospace,'Share Tech Mono',monospace;font-size:.64rem;letter-spacing:.14em;text-transform:uppercase;color:var(--porcelain-dim)}

.sc-controls{display:flex;flex-direction:column;gap:1.5rem;padding-top:1.8rem;border-top:1px dashed var(--porcelain-line)}
.sc-control-row{display:flex;flex-wrap:wrap;align-items:center;gap:.7rem}
.sc-control-lbl{font-family:ui-monospace,'Share Tech Mono',monospace;font-size:.62rem;letter-spacing:.12em;text-transform:uppercase;color:var(--porcelain-dim);min-width:92px}
.sc-theme-btn{font:600 .82rem 'Manrope',sans-serif;letter-spacing:.01em;padding:.5rem 1.05rem;border-radius:999px;border:1.5px solid var(--porcelain-ink);background:transparent;color:var(--porcelain-ink);cursor:pointer;transition:background .2s,color .2s,transform .15s}
.sc-theme-btn:hover{transform:translateY(-2px)}
.sc-theme-btn[aria-pressed="true"]{background:var(--porcelain-ink);color:var(--porcelain)}
.sc-theme-btn.rnd{border-color:var(--clay);color:var(--clay)}
.sc-theme-btn.rnd[aria-pressed="true"]{background:var(--clay);border-color:var(--clay);color:#fff}

.sc-toggle{display:inline-flex;align-items:center;gap:.5rem;font:500 .82rem 'Manrope',sans-serif;color:var(--porcelain-ink);cursor:pointer;user-select:none}
.sc-toggle input{width:34px;height:19px;appearance:none;background:var(--porcelain-line);border-radius:20px;position:relative;cursor:pointer;transition:background .2s;flex:none}
.sc-toggle input::before{content:'';position:absolute;top:2px;left:2px;width:15px;height:15px;border-radius:50%;background:#fff;transition:transform .2s;box-shadow:0 1px 3px rgba(0,0,0,.25)}
.sc-toggle input:checked{background:var(--clay)}
.sc-toggle input:checked::before{transform:translateX(15px)}

.sc-tokens{margin-top:.4rem;display:flex;flex-wrap:wrap;gap:.5rem}
.sc-token{display:inline-flex;align-items:center;gap:.45rem;font-family:ui-monospace,'Share Tech Mono',monospace;font-size:.68rem;color:var(--porcelain-dim);background:#fff;border:1px solid var(--porcelain-line);border-radius:8px;padding:.32rem .6rem .32rem .4rem}
.sc-token i{width:13px;height:13px;border-radius:4px;flex:none;border:1px solid rgba(0,0,0,.08)}
.sc-token b{color:var(--porcelain-ink);font-weight:600}

.sc-vitrine-note{margin-top:1.8rem;padding-top:1.4rem;border-top:1px solid var(--porcelain-line);font-family:'Manrope',sans-serif;font-weight:400;font-size:.82rem;color:var(--porcelain-dim);display:flex;gap:.5rem;align-items:flex-start}
.sc-vitrine-note b{color:var(--porcelain-ink);font-weight:600}

/* ════ TÍTULOS DE SECCIÓN (envoltorio oscuro) ════ */
.sc-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}
.sc-tag::before{content:'';width:28px;height:1px;background:var(--cyan)}
.sc-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)}
.sc-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}
.sc-p code,.sc-license code,.sc-flags code{font-family:var(--fm);font-size:.92em;color:var(--clay);background:rgba(194,96,63,.1);border:1px solid var(--border);border-radius:4px;padding:.06em .34em}

/* ── Bloques de código ── */
.sc-code{position:relative;margin:1.4rem 0;background:#05050b;border:1px solid var(--border);border-radius:10px;padding:1.2rem 1.3rem;overflow-x:auto}
.sc-code pre{font-family:var(--fm);font-size:.82rem;line-height:1.9;color:var(--parchment);white-space:pre}
.sc-code .c{color:var(--pdim)}
.sc-code .k{color:var(--clay)}
.sc-code-copy{position:absolute;top:.7rem;right:.7rem;font-family:var(--fm);font-size:.54rem;letter-spacing:.14em;text-transform:uppercase;padding:.35rem .7rem;border:1px solid var(--border-g);border-radius:5px;color:var(--pdim);background:rgba(7,7,14,.8);transition:color .2s,border-color .2s}
.sc-code-copy:hover{color:var(--clay);border-color:var(--clay)}

/* ── Tabla de temas / opciones ── */
.sc-flags{width:100%;border-collapse:collapse;margin-top:1.4rem;font-size:.86rem}
.sc-flags 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)}
.sc-flags td{font-family:var(--fb);font-weight:300;color:rgba(237,230,214,.72);padding:.7rem .8rem;border-bottom:1px solid var(--border)}
.sc-flags td:first-child{font-family:var(--fm);color:var(--clay);white-space:nowrap}
.sc-swatch{display:inline-block;width:11px;height:11px;border-radius:3px;margin-right:.4rem;vertical-align:-1px;border:1px solid rgba(255,255,255,.15)}

/* ── Rasgos / arquitectura ── */
.sc-feat-grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(230px,1fr));gap:1.1rem;margin-top:2rem}
.sc-feat{position:relative;padding:1.6rem 1.5rem;background:var(--ink2);border:1px solid var(--border);border-radius:12px;overflow:hidden;transition:transform .3s var(--ease),border-color .3s}
.sc-feat:hover{transform:translateY(-4px);border-color:var(--border-g)}
.sc-feat::before{content:attr(data-kj);position:absolute;right:-.3rem;bottom:-1.8rem;font-family:var(--fj);font-weight:700;font-size:6.5rem;line-height:1;color:rgba(194,96,63,.05);pointer-events:none}
.sc-feat h3{position:relative;z-index:2;font-family:var(--fd);font-weight:700;font-size:1.05rem;color:var(--parchment);margin-bottom:.5rem}
.sc-feat p{position:relative;z-index:2;font-family:var(--fb);font-weight:300;font-size:.88rem;color:var(--pdim)}

/* ── Licencia ── */
.sc-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)}
.sc-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}
.sc-license h3 .kj{font-family:var(--fj);color:var(--gold)}
.sc-license p{font-family:var(--fb);font-weight:300;font-size:.96rem;color:rgba(237,230,214,.72);margin-bottom:.9rem;max-width:72ch}
.sc-license p:last-child{margin-bottom:0}
.sc-license b{color:var(--parchment);font-weight:500}
.sc-license a{color:var(--cyan);border-bottom:1px solid rgba(0,207,224,.3);transition:color .2s}
.sc-license a:hover{color:var(--gold);border-color:var(--gold)}

/* ── Cierre ── */
.sc-final{text-align:center;padding:5rem 1.6rem 6rem;position:relative;overflow:hidden}
.sc-final .kj-watermark{font-size:clamp(180px,26vw,340px);top:50%;left:50%;transform:translate(-50%,-50%);color:rgba(0,207,224,.03)}
.sc-final h2{position:relative;z-index:2;font-family:var(--fd);font-weight:700;font-size:clamp(1.6rem,4vw,2.5rem);margin-bottom:1rem}
.sc-final p{position:relative;z-index:2;font-family:var(--fb);font-weight:300;color:var(--pdim);max-width:520px;margin:0 auto 2rem}
.sc-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,input):focus-visible{outline:2px solid var(--clay);outline-offset:3px;border-radius:4px}
@media (max-width:640px){
  .sc-hero{padding-top:7rem}
  .sc-sec{padding:3.2rem 0}
  .sc-vitrine-body{padding:1.8rem 1.2rem 2.2rem}
  .sc-stage{gap:1.6rem}
  .sc-clock-mount{width:170px;height:170px}
  .sc-btn{width:100%;justify-content:center}
  .sc-control-lbl{min-width:100%}
}
@media (prefers-reduced-motion:reduce){
  *,*::before,*::after{animation-duration:.01ms!important;animation-iteration-count:1!important;transition-duration:.01ms!important}
}