/* ===================== TimeKube — Demo page (on-brand) ===================== */
body.demo {
  background:
    radial-gradient(1200px 600px at 50% -8%, #ffffff 0%, rgba(255,255,255,0) 60%),
    linear-gradient(180deg, #faf9f7 0%, var(--w-bg) 30%);
  color: var(--w-ink);
}
#demoRoot { display: block; padding-top: var(--nav-h); }

.eyebrow {
  display: inline-block; font-size: 12.5px; font-weight: 600; letter-spacing: .16em;
  text-transform: uppercase; color: var(--w-blue); margin-bottom: 18px;
}
.d-head { max-width: 820px; margin: 0 auto; text-align: center; }
.d-head h2, .d-problem h2, .d-close h2 {
  font-family: 'Geist', sans-serif; font-weight: 400; letter-spacing: -0.03em; line-height: 1.06;
  font-size: clamp(30px, 4vw, 58px); color: var(--w-ink); text-wrap: balance;
}
.d-intro { margin: 22px auto 0; max-width: 720px; font-size: clamp(16px,1.3vw,19px); line-height: 1.55; color: var(--w-body); }

/* reveal */
.reveal { opacity: 0; transform: translateY(24px); transition: opacity .7s cubic-bezier(.2,.7,.2,1), transform .7s cubic-bezier(.2,.7,.2,1); }
.reveal.in { opacity: 1; transform: none; }

/* ===================== HERO ===================== */
.d-hero { min-height: calc(94vh - var(--nav-h)); display: flex; flex-direction: column; align-items: center; justify-content: center; text-align: center; padding: 40px clamp(24px,5vw,64px) 60px; }
.d-hero-logo { height: clamp(52px, 8vw, 92px); width: auto; margin-bottom: clamp(26px,4vw,44px); }
.d-hero-h { font-family: 'Geist', sans-serif; font-weight: 400; letter-spacing: -0.04em; line-height: 1.02; font-size: clamp(34px, 6vw, 82px); max-width: 15ch; text-wrap: balance; }
.d-hero-p { margin: clamp(22px,3vw,34px) auto 0; max-width: 640px; font-size: clamp(17px,1.5vw,22px); line-height: 1.5; color: var(--w-body); }
.d-scroll { margin-top: clamp(34px,5vw,60px); width: 26px; height: 40px; border: 2px solid rgba(8,8,48,.22); border-radius: 14px; position: relative; }
.d-scroll::after { content: ''; position: absolute; left: 50%; top: 8px; width: 4px; height: 8px; border-radius: 3px; background: var(--w-blue); transform: translateX(-50%); animation: scrolldot 1.6s ease-in-out infinite; }
@keyframes scrolldot { 0%,100% { opacity: 0; transform: translate(-50%,0); } 40% { opacity: 1; } 70% { opacity: 0; transform: translate(-50%,10px); } }

/* ===================== PROBLEM ===================== */
.d-problem { text-align: center; padding: clamp(52px,7.6vw,100px) clamp(24px,5vw,88px) clamp(60px,9vw,120px); }
.d-problem .stat-row { display: grid; grid-template-columns: repeat(3,1fr); gap: clamp(24px,4vw,56px); max-width: 1000px; margin: clamp(40px,5vw,64px) auto 0; }
.d-problem .stat { display: flex; flex-direction: column; align-items: center; gap: 10px; }
.d-problem .stat .big { font-family: 'Geist', sans-serif; font-weight: 500; font-size: clamp(44px,6vw,84px); line-height: 1; letter-spacing: -0.04em; color: var(--w-blue); }
.d-problem .stat .lbl { font-size: clamp(14px,1.1vw,16px); line-height: 1.45; color: var(--w-body); max-width: 240px; }
.d-problem-tail { margin: clamp(40px,5vw,64px) auto 0; max-width: 640px; font-size: clamp(18px,1.8vw,25px); line-height: 1.35; letter-spacing: -0.02em; color: var(--w-ink); text-wrap: balance; }

/* ===================== CAST ===================== */
.d-cast { padding: clamp(56px,8vw,110px) clamp(24px,5vw,88px); scroll-margin-top: var(--nav-h); }
.d-hint { margin-top: 20px; font-size: 14.5px; color: #6a6a86; display: inline-flex; align-items: center; gap: 8px; }
.d-hint-ico { display: inline-grid; place-items: center; width: 24px; height: 24px; border-radius: 50%; background: rgba(74,168,232,.14); color: var(--w-blue); font-size: 13px; }
.cast-block { max-width: 1200px; margin: clamp(44px,6vw,80px) auto 0; }
.cast-group-h { font-family: 'Geist', sans-serif; font-weight: 500; font-size: clamp(13px,1.1vw,15px); letter-spacing: .12em; text-transform: uppercase; color: #8a8aa2; text-align: center; margin-bottom: clamp(22px,3vw,36px); }
.pc-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(200px, 1fr)); gap: clamp(18px,2.2vw,30px); }
.pc-grid--big { grid-template-columns: repeat(auto-fit, minmax(min(360px,100%), 1fr)); gap: clamp(24px,3vw,44px); max-width: 900px; margin: 0 auto; }

.pc { background: #fff; border: 1px solid var(--w-line); border-radius: 20px; overflow: hidden; box-shadow: 0 18px 44px -30px rgba(8,8,48,.32); display: flex; flex-direction: column; }
.pc-photo { position: relative; aspect-ratio: 1/1; background: #ece9e4; overflow: hidden; }
.pc-photo img { width: 100%; height: 100%; object-fit: cover; display: block; }
.pc-age { position: absolute; left: 12px; bottom: 12px; background: rgba(8,8,48,.72); color: #fff; font-size: 12.5px; font-weight: 600; letter-spacing: .01em; padding: 5px 11px; border-radius: 999px; backdrop-filter: blur(4px); }
.pc-slider { -webkit-appearance: none; appearance: none; width: calc(100% - 32px); margin: 16px 16px 4px; height: 4px; border-radius: 4px; background: linear-gradient(90deg, var(--w-blue) 0%, #cfe4f6 0%); background: #e6eef6; outline: none; cursor: pointer; }
.pc-slider::-webkit-slider-thumb { -webkit-appearance: none; appearance: none; width: 20px; height: 20px; border-radius: 50%; background: #fff; border: 4px solid var(--w-blue); box-shadow: 0 2px 6px rgba(8,8,48,.25); cursor: pointer; }
.pc-slider::-moz-range-thumb { width: 20px; height: 20px; border-radius: 50%; background: #fff; border: 4px solid var(--w-blue); box-shadow: 0 2px 6px rgba(8,8,48,.25); cursor: pointer; }
.pc-body { padding: 12px 18px 20px; }
.pc-name { font-family: 'Geist', sans-serif; font-weight: 600; font-size: 18px; color: var(--w-ink); display: flex; align-items: baseline; gap: 8px; flex-wrap: wrap; }
.pc-tag { font-weight: 500; font-size: 12.5px; color: var(--w-blue); letter-spacing: .01em; }
.pc-desc { margin-top: 8px; font-size: 14px; line-height: 1.5; color: var(--w-body); }
.pc--big .pc-name { font-size: 21px; }
.pc--big .pc-desc { font-size: 15px; }

.d-tally { text-align: center; margin: clamp(50px,7vw,84px) auto 0; max-width: 760px; font-family: 'Geist', sans-serif; font-weight: 400; font-size: clamp(18px,2vw,26px); line-height: 1.4; letter-spacing: -0.02em; color: var(--w-ink); text-wrap: balance; }

/* ===================== LOCATIONS ===================== */
.d-loc { padding: clamp(56px,8vw,110px) clamp(24px,5vw,88px); scroll-margin-top: var(--nav-h); }
.loc-grid { max-width: 1280px; margin: clamp(40px,5vw,64px) auto 0; display: grid; grid-template-columns: repeat(auto-fill, minmax(220px, 1fr)); gap: 14px; }
.loc { position: relative; border-radius: 16px; overflow: hidden; aspect-ratio: 4/3; margin: 0; background: #ece9e4; }
.loc img { width: 100%; height: 100%; object-fit: cover; display: block; transition: transform .5s ease; }
.loc:hover img { transform: scale(1.05); }
.loc figcaption { position: absolute; left: 0; right: 0; bottom: 0; padding: 26px 14px 12px; color: #fff; font-size: 14px; font-weight: 600; letter-spacing: .01em; background: linear-gradient(180deg, rgba(8,8,48,0) 0%, rgba(8,8,48,.72) 100%); }

/* ===================== CAPTURE ===================== */
.d-capture { padding: clamp(56px,8vw,110px) clamp(24px,5vw,88px); }
.cap-row { max-width: 1160px; margin: clamp(40px,5vw,60px) auto 0; display: grid; grid-template-columns: repeat(auto-fit, minmax(180px,1fr)); gap: 16px; }
.cap { background: #fff; border: 1px solid var(--w-line); border-radius: 18px; padding: 26px 22px; box-shadow: 0 14px 36px -28px rgba(8,8,48,.3); }
.cap-i { font-family: 'Geist', sans-serif; font-weight: 600; font-size: 13px; color: var(--w-blue); letter-spacing: .04em; }
.cap h4 { font-family: 'Geist', sans-serif; font-weight: 600; font-size: 20px; color: var(--w-ink); margin: 10px 0 8px; }
.cap p { font-size: 14.5px; line-height: 1.5; color: var(--w-body); }

/* ===================== WHAT'S BUILT ===================== */
.d-built { padding: clamp(60px,9vw,120px) clamp(24px,5vw,88px); background: var(--w-ink); color: #fff; scroll-margin-top: var(--nav-h); }
.d-built .eyebrow { color: #7fc0ef; }
.d-built .d-head h2 { color: #fff; }
.d-built .d-intro { color: rgba(255,255,255,.72); }
.bf-list { max-width: 1160px; margin: clamp(50px,6vw,80px) auto 0; display: flex; flex-direction: column; gap: clamp(48px,7vw,104px); }
.bf { display: grid; grid-template-columns: 1fr 1fr; align-items: center; gap: clamp(32px,5vw,80px); }
.bf--alt .bf-copy { order: 2; }
.bf--alt .bf-media { order: 1; }
.bf-n { font-family: 'Geist', sans-serif; font-weight: 500; font-size: 15px; color: #7fc0ef; letter-spacing: .06em; }
.bf-copy h3 { font-family: 'Geist', sans-serif; font-weight: 400; font-size: clamp(24px,2.6vw,38px); line-height: 1.1; letter-spacing: -0.025em; margin: 12px 0 16px; color: #fff; text-wrap: balance; }
.bf-copy p { font-size: clamp(15px,1.15vw,17px); line-height: 1.6; color: rgba(255,255,255,.74); }
.bf-media { display: flex; justify-content: center; }
.bf-media img { width: auto; max-width: 100%; max-height: 620px; border-radius: 26px; box-shadow: 0 40px 80px -30px rgba(0,0,0,.6); }
.also { max-width: 1000px; margin: clamp(56px,7vw,90px) auto 0; text-align: center; }
.also-h { font-family: 'Geist', sans-serif; font-weight: 600; font-size: 13px; letter-spacing: .14em; text-transform: uppercase; color: #7fc0ef; margin-bottom: 24px; }
.also-list { list-style: none; display: flex; flex-wrap: wrap; justify-content: center; gap: 10px; padding: 0; }
.also-list li { border: 1px solid rgba(255,255,255,.16); background: rgba(255,255,255,.04); border-radius: 999px; padding: 9px 17px; font-size: 14px; color: rgba(255,255,255,.86); }

/* ===================== ARC ===================== */
.d-arc { padding: clamp(60px,9vw,120px) clamp(24px,5vw,88px); }
.arc-line { max-width: 780px; margin: clamp(46px,6vw,76px) auto 0; position: relative; }
.arc-line::before { content: ''; position: absolute; left: 15px; top: 6px; bottom: 6px; width: 2px; background: linear-gradient(180deg, var(--w-blue), #cfe4f6); }
.arc-step { position: relative; padding: 0 0 clamp(34px,4vw,52px) 52px; }
.arc-step::before { content: ''; position: absolute; left: 8px; top: 4px; width: 16px; height: 16px; border-radius: 50%; background: #fff; border: 3px solid var(--w-blue); box-shadow: 0 0 0 5px rgba(74,168,232,.12); }
.arc-step:last-child { padding-bottom: 0; }
.arc-k { font-family: 'Geist', sans-serif; font-weight: 600; font-size: 12.5px; letter-spacing: .14em; text-transform: uppercase; color: var(--w-blue); }
.arc-step h4 { font-family: 'Geist', sans-serif; font-weight: 500; font-size: clamp(20px,2vw,27px); letter-spacing: -0.02em; color: var(--w-ink); margin: 8px 0 10px; }
.arc-step p { font-size: clamp(15px,1.1vw,17px); line-height: 1.6; color: var(--w-body); }

/* ===================== CLOSE ===================== */
.d-close { text-align: center; padding: clamp(70px,10vw,140px) clamp(24px,5vw,88px) clamp(80px,10vw,140px); }
.d-close-tag { margin-top: 26px; font-size: clamp(18px,2vw,26px); letter-spacing: -0.01em; color: var(--w-body); }
.d-close-tag strong { color: var(--w-blue); font-weight: 600; }
.d-close-foot { margin-top: 30px; font-size: 15px; color: #8a8aa2; }

/* ===================== CAST CTA BUTTONS ===================== */
.d-cta-row { display: flex; flex-wrap: wrap; justify-content: center; gap: 14px; max-width: 820px; margin: clamp(30px,4vw,44px) auto 0; }
.d-cta {
  font-family: 'Geist', sans-serif; font-size: 15px; font-weight: 500; letter-spacing: -0.01em;
  color: var(--w-ink); background: #fff; border: 1.5px solid rgba(8,8,48,.16);
  padding: 12px 22px; border-radius: 999px; cursor: pointer; transition: all .18s ease;
}
.d-cta:hover { border-color: var(--w-ink); transform: translateY(-1px); box-shadow: 0 10px 24px -14px rgba(8,8,48,.4); }

/* ===================== GATE MODAL ===================== */
.gate-modal { max-width: 420px; }
.gate-badge { width: 56px; height: 56px; margin: 0 auto 20px; border-radius: 50%; background: #e7f1fb; display: grid; place-items: center; color: var(--w-blue); }
.gate-badge svg { width: 26px; height: 26px; }
.gate-form { display: flex; align-items: center; gap: 8px; width: 100%; margin-top: 22px; background: #fff; border: 1px solid var(--w-line); border-radius: 999px; padding: 6px 6px 6px 20px; }
.gate-form input { flex: 1; min-width: 0; border: none; outline: none; background: transparent; font-family: 'Geist', sans-serif; font-size: 16px; color: var(--w-ink); padding: 11px 0; }
.gate-form input::placeholder { color: #9a978f; }
.gate-form button { flex: none; border: none; cursor: pointer; background: var(--w-ink); color: #fff; font-family: 'Geist', sans-serif; font-size: 15px; font-weight: 500; padding: 13px 24px; border-radius: 999px; white-space: nowrap; transition: background .18s ease; }
.gate-form button:hover { background: #1c1c5e; }
.gate-modal .err { text-align: center; }

/* ===================== RESPONSIVE ===================== */
@media (max-width: 900px) {
  .bf { grid-template-columns: 1fr; gap: clamp(24px,5vw,36px); }
  .bf--alt .bf-copy { order: 1; } .bf--alt .bf-media { order: 2; }
  .bf-media img { max-height: 460px; }
}
@media (max-width: 620px) {
  .d-problem .stat-row { grid-template-columns: 1fr; gap: 30px; }
  .pc-grid { grid-template-columns: repeat(2, 1fr); gap: 14px; }
  .pc-name { font-size: 16px; } .pc-desc { font-size: 13px; }
  .loc-grid { grid-template-columns: repeat(2, 1fr); }
}

/* COMPLETE: hidden behind-the-scenes CTA */
.d-cta-bts{border-style:dashed;color:var(--w-blue);}
.d-cta-bts:hover{border-color:var(--w-blue);}

/* count-up pop for the "0" punchline */
.big-pop{display:inline-block;animation:bigpop .55s cubic-bezier(.2,.8,.3,1);}
@keyframes bigpop{0%{transform:scale(.55);opacity:.25;}60%{transform:scale(1.14);opacity:1;}100%{transform:scale(1);opacity:1;}}


/* ===== BRAND REFRESH (aplicado) — hero sin badge + acento ===== */
.d-hero-brand{display:inline-flex;align-items:center;gap:clamp(12px,1.5vw,18px);margin-bottom:clamp(26px,4vw,44px);}
.d-hero-burst{width:clamp(56px,7.6vw,90px);height:auto;display:block;}
.d-hero-word{font-family:'Geist',sans-serif;font-weight:600;font-size:clamp(40px,6.4vw,74px);letter-spacing:-0.02em;color:#4AB5EE;line-height:1;}
.d-hero-h .hl{color:var(--w-blue);}


/* ---- Cierre como la home (tkc), pedido del cliente 24-ago ---- */
.brkd{display:none;}
@media(min-width:861px){.brkd{display:inline;}}
.tkc .tkc-center h2{font-size:clamp(15px,2vw,30px);}
.d-final-tag{margin:12px 0 4px;font-size:clamp(14px,1.6vw,23px);color:#0b1030;line-height:1.3;}
.d-final-tag strong{font-weight:600;}
.d-final-foot{margin:4px 0 0;font-size:clamp(13px,1.35vw,17px);color:rgba(255,255,255,.8);line-height:1.35;}
@media(max-width:860px){
  .tkc .tkc-center h2{font-size:clamp(20px,5.5vw,28px);}
  .tkc .tkc-ph{-webkit-mask-image:linear-gradient(to bottom,#000 0%,#000 10%,rgba(0,0,0,0) 72%);mask-image:linear-gradient(to bottom,#000 0%,#000 10%,rgba(0,0,0,0) 72%);box-shadow:none!important;margin-bottom:-24vh;pointer-events:none;}
  .tkc .tkc-center{position:relative;left:auto;top:auto;transform:none;z-index:2;}
}