/* ==========================================================
   Kizuna · Portada (index.html)
   Estilos que solo usa la página de inicio: hero y reloj.
   ========================================================== */

.hero{position:relative;overflow:hidden;border-bottom:1px solid var(--line)}
.hero::before{content:"";position:absolute;inset:0;background:
  repeating-linear-gradient(115deg,transparent 0 46px,rgba(214,189,140,.035) 46px 48px),
  radial-gradient(ellipse at 85% 30%,rgba(169,139,94,.25),transparent 55%);pointer-events:none}
.hero-bg-word{position:absolute;right:-2vw;bottom:-6vw;font:900 clamp(180px,30vw,420px)/.8 var(--display);color:transparent;-webkit-text-stroke:2px rgba(214,189,140,.12);letter-spacing:-.02em;pointer-events:none;user-select:none}
.hero .wrap{position:relative;display:grid;grid-template-columns:1.35fr .9fr;gap:48px;padding-block:clamp(56px,9vw,110px) clamp(48px,7vw,90px);align-items:end}
.hero h1{font-size:clamp(64px,11vw,148px);font-weight:900;margin-top:22px}
.hero h1 .gold{color:var(--gold)}
.hero h1 .outline{color:transparent;-webkit-text-stroke:2px var(--cream)}
.hero-lede{max-width:34ch;font-size:clamp(18px,1.6vw,21px);color:#d9d5ca;margin-top:26px}
.hero-cta{display:flex;flex-wrap:wrap;gap:14px;margin-top:34px}
.hero-meta{display:flex;flex-wrap:wrap;gap:28px;margin-top:40px;font:600 14px/1.3 var(--label);letter-spacing:.12em;text-transform:uppercase;color:var(--steel)}
.hero-meta b{display:block;font:800 34px/1 var(--display);color:var(--cream);letter-spacing:0}
@media (max-width:860px){.hero .wrap{grid-template-columns:1fr}}

/* Reloj de rounds */
.clock{background:var(--ink);border:1px solid var(--line);padding:26px 26px 22px;position:relative}
.clock::after{content:"";position:absolute;left:0;top:0;width:100%;height:4px;background:linear-gradient(90deg,var(--bronze),var(--gold))}
.clock-top{display:flex;justify-content:space-between;font:600 13px/1 var(--label);letter-spacing:.18em;text-transform:uppercase;color:var(--steel)}
.clock-top .live{color:var(--gold);display:flex;align-items:center;gap:8px}
.clock-top .live::before{content:"";width:8px;height:8px;border-radius:50%;background:#d9534f;animation:clock-blink 1.2s infinite}
@keyframes clock-blink{50%{opacity:.25}}
.clock-time{font:800 clamp(72px,9vw,112px)/1 var(--display);font-variant-numeric:tabular-nums;margin:18px 0 6px;letter-spacing:.02em}
.clock-phase{font:700 16px/1 var(--label);letter-spacing:.16em;text-transform:uppercase;color:var(--gold)}
.clock-phase.rest{color:var(--steel)}
.rounds{display:grid;grid-template-columns:repeat(5,1fr);gap:6px;margin-top:22px}
.rounds span{height:6px;background:var(--navy-3)}
.rounds span.done{background:var(--bronze)}
.rounds span.now{background:var(--gold)}
.clock-next{margin-top:22px;padding-top:18px;border-top:1px solid var(--line);font-size:15px;color:var(--text-soft);display:flex;justify-content:space-between;gap:12px;flex-wrap:wrap}
.clock-next strong{color:var(--cream);font-weight:600}
.clock-next a{text-decoration:none}
.clock-next a:hover strong{color:var(--gold)}

/* ---- El dojo (foto) ---- */
.dojo{background:var(--ink);border-block:1px solid var(--line);padding-block:clamp(64px,9vw,120px)}
.dojo-grid{display:grid;grid-template-columns:5fr 6fr;gap:clamp(32px,6vw,80px);align-items:center}
.dojo-photo{margin:0;position:relative}
.dojo-photo::before{content:"";position:absolute;inset:18px -18px -18px 18px;border:1px solid var(--bronze);pointer-events:none}
.dojo-photo img{display:block;width:100%;height:auto;aspect-ratio:4/5;object-fit:cover;object-position:50% 78%;position:relative}
.dojo-copy h2{font-size:clamp(46px,6vw,84px);font-weight:900;margin-top:16px}
.dojo-copy > p{max-width:44ch;color:var(--text-soft);margin-top:22px}
.dojo-facts{display:grid;grid-template-columns:auto 1fr;gap:28px;margin:30px 0 0;padding-top:24px;border-top:1px solid var(--line)}
.dojo-facts dt{font:600 13px/1 var(--label);letter-spacing:.16em;text-transform:uppercase;color:var(--steel)}
.dojo-facts dd{margin:8px 0 0;font:800 28px/1.1 var(--display);text-transform:uppercase}
.dojo-facts div:first-child dd{font-size:44px;color:var(--gold)}
@media (max-width:860px){
  .dojo-grid{grid-template-columns:1fr}
  .dojo-photo{max-width:460px;margin-right:18px}
}