/* Portada — escena del bloque diseccionado y secciones de la home */

/* La escena dura 260vh; el contenido queda fijo mientras --p avanza de 0 a 1.
   Primera pantalla tranquila: texto a la izquierda y el bloque cerrado a la derecha.
   Al bajar, el texto de bienvenida cede su sitio a la leyenda y el bloque se abre. */
.dissect { position: relative; height: 260vh; --p: 0; }
.dissect-sticky {
  position: sticky; top: 0; height: 100vh; overflow: hidden;
  display: grid; place-items: center;
  --intro: clamp(0, calc((var(--p) - .04) / .2), 1);
  --open: clamp(0, calc((var(--p) - .16) / .58), 1);
  --outro: clamp(0, calc((var(--p) - .8) / .14), 1);
}
.dissect-sticky::before {
  content: ''; position: absolute; inset: -10%; pointer-events: none;
  background:
    radial-gradient(42% 46% at 72% 52%, rgba(247,147,26,calc(.14 + var(--open) * .10)), transparent 70%),
    radial-gradient(30% 30% at 18% 30%, rgba(232,89,12,.06), transparent 70%);
}
.dissect-grid {
  position: relative; z-index: 2; width: min(1160px, 100% - 48px);
  display: grid; grid-template-columns: 1fr 1fr; gap: 56px; align-items: center;
  padding-top: 40px;
}
.dissect-copy { position: relative; min-height: 440px; display: grid; align-items: center; }
.dissect-intro, .dissect-parts { grid-area: 1 / 1; }

.dissect-intro {
  opacity: calc(1 - var(--intro));
  transform: translateY(calc(var(--intro) * -28px));
  pointer-events: auto;
  animation: hello .9s var(--ease) both;
}
@keyframes hello { from { opacity: 0; transform: translateY(14px); } }
.dissect-kicker {
  display: inline-flex; align-items: center; gap: 10px; margin: 0 0 22px;
  padding: 7px 14px 7px 12px; border-radius: 999px;
  background: rgba(247,147,26,.08); border: 1px solid rgba(247,147,26,.25);
  color: #f9b35c; font-size: .9rem; font-weight: 600;
}
.live-dot { width: 7px; height: 7px; border-radius: 50%; background: var(--orange); box-shadow: 0 0 0 4px rgba(247,147,26,.18); }
.dissect-title {
  font-size: clamp(2.3rem, 4.1vw, 3.5rem); line-height: 1.08; margin: 0 0 20px;
  font-stretch: 108%; font-weight: 750; letter-spacing: -0.03em; max-width: 15ch; color: var(--bone);
}
.dissect-lead { margin: 0 0 32px; max-width: 34em; font-size: 1.12rem; line-height: 1.65; color: var(--ash); }
.dissect-actions { display: flex; gap: 12px; flex-wrap: wrap; }
.btn-solid, .btn-soft {
  display: inline-flex; align-items: center; padding: 13px 24px; border-radius: 999px;
  font-weight: 650; font-size: .98rem; text-decoration: none; transition: background .25s var(--ease), border-color .25s var(--ease);
}
.btn-solid { background: var(--orange); color: #000; }
.btn-solid:hover { background: #ffa53d; }
.btn-soft { color: var(--bone); border: 1px solid var(--line-strong); background: rgba(255,255,255,.03); }
.btn-soft:hover { border-color: rgba(247,147,26,.5); background: rgba(247,147,26,.06); }
.dissect-hint { margin: 40px 0 0; color: var(--ash-dim); font-size: .9rem; display: flex; gap: 10px; align-items: center; }
.dissect-hint span:first-child { display: inline-block; animation: nudge 2.4s ease-in-out infinite; color: var(--orange); }
@keyframes nudge { 50% { transform: translateY(5px); } }

.dissect-parts {
  list-style: none; margin: 0; padding: 0; display: grid; gap: 22px; align-content: center;
  opacity: clamp(0, calc((var(--intro) - .55) / .45), 1);
  pointer-events: none;
}
.part {
  display: grid; gap: 4px; padding-left: 20px; border-left: 2px solid var(--line);
  opacity: calc(.18 + clamp(0, calc((var(--open) - var(--t)) / .18), 1) * .82);
  border-left-color: color-mix(in srgb, var(--orange) calc(clamp(0, calc((var(--open) - var(--t)) / .18), 1) * 100%), rgba(255,255,255,.09));
}
.part.p1 { --t: .05; } .part.p2 { --t: .3; } .part.p3 { --t: .55; } .part.p4 { --t: .8; }
.part strong { font-size: 1.12rem; font-stretch: 108%; font-weight: 700; color: var(--bone); }
.part span { color: var(--ash); line-height: 1.55; font-size: .98rem; }
.part code { font-family: var(--mono); font-size: .8rem; color: var(--orange); background: none; padding: 0; margin-top: 2px; word-break: break-all; }

.dissect-visual { position: relative; display: grid; justify-items: center; }
.block3d { position: relative; width: 100%; height: 480px; perspective: 1600px; animation: hello 1.1s .15s var(--ease) both; }
.slab {
  position: absolute; left: 50%; top: 50%; width: 270px; height: 270px; margin: -135px 0 0 -135px;
  border-radius: 22px;
  background: linear-gradient(135deg, #1b1b1d, #0b0b0c);
  border: 1px solid rgba(255,255,255,.12);
  box-shadow: inset 0 0 0 1px rgba(255,255,255,.03), 0 30px 60px rgba(0,0,0,.6);
  transform: rotateX(58deg) rotateZ(-40deg) translateZ(calc(var(--i) * (16px + var(--open) * 78px) - 70px));
  display: grid; place-items: center;
}
.block3d { animation: hello 1.1s .15s var(--ease) both, float 7s 1.2s ease-in-out infinite; }
@keyframes float { 50% { translate: 0 -8px; } }
.slab.s1 { --i: 3; background: linear-gradient(135deg, #2a1806, #120a02); border-color: rgba(247,147,26,.55); box-shadow: 0 0 60px rgba(247,147,26,.25), inset 0 0 0 1px rgba(247,147,26,.25); }
.slab.s2 { --i: 2; } .slab.s3 { --i: 1; } .slab.s4 { --i: 0; }
.slab-hex { font-family: var(--mono); font-size: 12px; color: rgba(245,245,247,.38); letter-spacing: .04em; max-width: 200px; text-align: center; line-height: 1.6; word-break: break-all; }
.slab.s1 .slab-hex { color: rgba(247,147,26,.85); }

.dissect-block { color: var(--ash); margin: -6px 0 0; font-size: .92rem; opacity: calc(.6 + var(--open) * .4); }
.dissect-block a { color: var(--bone); text-decoration: none; }
.dissect-block a:hover { color: var(--orange); }

.dissect-outro {
  position: absolute; bottom: 6vh; left: 0; right: 0; text-align: center; z-index: 3;
  opacity: var(--outro); transform: translateY(calc((1 - var(--outro)) * 16px));
  pointer-events: none;
}
.dissect-outro a { pointer-events: auto; }

/* Manifiesto: palabras que se encienden con el scroll */
.statement { max-width: 860px; margin: 0 auto; padding: 14vh 24px 12vh; }
.statement-text {
  font-size: clamp(1.8rem, 3.6vw, 2.9rem); line-height: 1.18; font-stretch: 108%; font-weight: 700;
  letter-spacing: -0.025em; margin: 0 0 48px;
}
.statement-text [data-lit] { transition: color .2s linear; }
.statement-sub { max-width: 38em; color: var(--ash); font-size: 1.15rem; line-height: 1.7; }
.statement-sub strong { color: var(--bone); }

/* Ticker más discreto */
.ticker-strip { border-top: 1px solid var(--line) !important; border-bottom: 1px solid var(--line) !important; background: transparent !important; }
.ticker-strip * { font-family: var(--mono) !important; }

/* Accesos rápidos: rejilla Apple de 4 columnas */
.quicknav { max-width: var(--wrap); margin: 0 auto; padding: 120px 24px 40px !important; }
.quicknav-grid { display: grid !important; grid-template-columns: repeat(4, 1fr) !important; gap: 14px !important; }
.qn-card {
  padding: 28px 24px 30px !important; min-height: 210px; display: flex !important; flex-direction: column; justify-content: flex-end;
  text-align: left !important; transition: background .3s var(--ease), border-color .3s var(--ease) !important;
}
.qn-card:hover { background: var(--surface-2) !important; border-color: rgba(247,147,26,.45) !important; transform: none !important; }
.qn-icon { font-size: 1.8rem !important; margin-bottom: auto !important; }
.qn-title { font-stretch: 112%; font-weight: 700 !important; font-size: 1.2rem !important; margin: 18px 0 6px !important; }
.qn-desc { color: var(--ash) !important; font-size: .92rem !important; }
.qn-feature { background: linear-gradient(140deg, rgba(247,147,26,.16), rgba(247,147,26,.02) 60%), var(--surface) !important; border-color: rgba(247,147,26,.35) !important; }
.qn-feature .qn-title { color: var(--orange); }

/* Métricas */
.metrics-section { padding-top: 140px !important; }
.metric-hero { border-radius: 28px !important; background: var(--surface) !important; border: 1px solid var(--line) !important; }
#btc-price { font-size: clamp(3rem, 8vw, 6.5rem) !important; letter-spacing: -0.05em !important; }
.supply-bar-wrap { border-radius: 28px !important; background: var(--surface) !important; border: 1px solid var(--line) !important; }
.supply-bar { border-radius: 999px !important; overflow: visible; }
.supply-bar-fill { border-radius: 999px !important; background: linear-gradient(90deg, var(--ember), var(--orange)) !important; }
.metric-icon { display: none; }
.metric-card { padding: 30px !important; }
.metric-number { color: var(--bone) !important; font-size: clamp(1.8rem, 3vw, 2.4rem) !important; }

/* Pilares */
.pillars { padding-top: 140px !important; }
.pillar-card { padding: 40px 34px !important; }
.pillar-number { font-family: var(--font) !important; letter-spacing: 0 !important; color: var(--orange) !important; font-weight: 600; }
.pillar-title { font-stretch: 112%; font-weight: 800 !important; font-size: 1.7rem !important; letter-spacing: -0.02em; }

/* Declaración de Barlow: tipografía grande, sin caja */
.barlow-section { padding: 160px 24px !important; }
.barlow-quote { background: none !important; border: 0 !important; padding: 0 !important; }
.barlow-quote blockquote, .barlow-quote blockquote span {
  font-family: var(--font) !important; font-style: normal !important; font-stretch: 110%;
  font-size: clamp(1.5rem, 3vw, 2.3rem) !important; line-height: 1.3 !important; color: var(--bone) !important; letter-spacing: -0.02em;
}
.barlow-quote-mark { color: var(--orange) !important; }

/* Apoya el proyecto: tono cercano, importes sugeridos y QR que cambia según la elección */
.support { padding: 120px 24px 140px; }
.support-card {
  max-width: 1040px; margin: 0 auto; display: grid; grid-template-columns: 1.05fr .95fr; gap: 56px;
  padding: clamp(28px, 4vw, 56px); border-radius: 32px;
  background: radial-gradient(80% 90% at 100% 0%, rgba(247,147,26,.12), transparent 60%), var(--surface);
  border: 1px solid var(--line);
}
.support-kicker { color: var(--orange); font-weight: 600; margin: 0 0 14px; }
.support-title { font-size: clamp(1.8rem, 3.2vw, 2.5rem); line-height: 1.12; margin: 0 0 18px; max-width: 16ch; }
.support-text { color: var(--ash); font-size: 1.05rem; line-height: 1.65; margin: 0 0 24px; max-width: 34em; }
.support-uses { list-style: none; padding: 0; margin: 0 0 28px; display: grid; gap: 12px; }
.support-uses li { display: flex; gap: 12px; align-items: baseline; color: var(--bone); font-size: 1rem; }
.support-other { color: var(--ash); font-size: .95rem; line-height: 1.55; margin: 0 0 14px; max-width: 32em; }
.support-share {
  font: inherit; font-weight: 600; font-size: .92rem; color: var(--bone); cursor: pointer;
  background: transparent; border: 1px solid var(--line-strong); border-radius: 999px; padding: 10px 18px;
}
.support-share:hover { border-color: rgba(247,147,26,.5); }

.support-pay { display: grid; gap: 16px; align-content: start; }
.tip-chips { display: grid; grid-template-columns: repeat(3, 1fr); gap: 10px; }
.tip {
  font: inherit; cursor: pointer; text-align: left; color: var(--bone);
  display: grid; gap: 2px; padding: 14px 14px 12px; border-radius: 16px;
  background: rgba(255,255,255,.03); border: 1px solid var(--line-strong);
  transition: border-color .2s var(--ease), background .2s var(--ease), transform .2s var(--ease);
}
.tip:hover { border-color: rgba(247,147,26,.5); }
.tip[aria-checked="true"] { border-color: var(--orange); background: rgba(247,147,26,.1); }
.tip-emoji { font-size: 1.4rem; }
.tip-label { font-weight: 650; font-size: .95rem; }
.tip-sats { font-family: var(--mono); font-size: .78rem; color: var(--ash); }
.tip-custom { display: flex; align-items: center; gap: 10px; color: var(--ash); font-size: .92rem; }
.tip-custom input {
  flex: 1; min-width: 0; font-family: var(--mono); font-size: .95rem; color: var(--bone);
  background: #000; border: 1px solid var(--line-strong); border-radius: 12px; padding: 10px 12px;
}
.tip-custom input:focus { outline: none; border-color: var(--orange); }

.tip-qr-box, .tip-thanks {
  display: grid; justify-items: center; gap: 12px; text-align: center;
  padding: 22px; border-radius: 24px; background: #000; border: 1px solid var(--line);
}
.tip-qr { background: #fff; border-radius: 16px; padding: 10px; width: 220px; height: 220px; display: grid; place-items: center; }
.tip-qr img, .tip-qr svg { width: 100%; height: 100%; display: block; }
.tip-caption { color: var(--ash); font-size: .9rem; margin: 0; max-width: 30ch; line-height: 1.5; }
.tip-actions { display: flex; gap: 8px; flex-wrap: wrap; justify-content: center; }
.tip-btn {
  font: inherit; font-weight: 650; font-size: .88rem; text-decoration: none; cursor: pointer;
  padding: 9px 16px; border-radius: 999px; background: var(--orange); color: #000; border: 1px solid var(--orange);
}
.tip-btn.ghost { background: transparent; color: var(--bone); border-color: var(--line-strong); font-family: var(--mono); font-weight: 400; font-size: .8rem; }
.tip-qr-box[hidden], .tip-thanks[hidden] { display: none; }
.support-copy, .support-pay, .tip { min-width: 0; }
.tip-thanks-emoji { font-size: 2.6rem; }
.tip-thanks-title { font-size: 1.3rem; font-weight: 700; margin: 0; }
.tip-thanks-text { color: var(--ash); margin: 0; max-width: 30ch; line-height: 1.5; }

@media (max-width: 900px) {
  .dissect { height: 230vh; }
  .dissect-grid { grid-template-columns: 1fr; gap: 0; padding-top: 64px; align-content: center; height: 100vh; }
  .dissect-copy { min-height: 0; order: 2; }
  .dissect-visual { order: 1; }
  .block3d { height: 230px; }
  .slab { width: 150px; height: 150px; margin: -75px 0 0 -75px; transform: rotateX(58deg) rotateZ(-40deg) translateZ(calc(var(--i) * (8px + var(--open) * 36px) - 40px)); }
  .slab-hex { font-size: 9px; max-width: 110px; }
  .dissect-block { display: none; }
  .dissect-title { font-size: 2.05rem; }
  .dissect-lead { font-size: 1rem; margin-bottom: 22px; }
  .dissect-hint { margin-top: 22px; }
  .dissect-parts { gap: 12px; }
  .part span { display: none; }
  .part strong { font-size: 1rem; }
  .dissect-outro { bottom: 4vh; }
  .quicknav-grid { grid-template-columns: repeat(2, 1fr) !important; }
  .support { padding: 80px 16px 100px; }
  .support-card { grid-template-columns: 1fr; gap: 36px; }
  .support-card { padding: 24px 18px; }
  .tip-chips { gap: 8px; }
  .tip { padding: 10px 8px; }
  .tip-label { font-size: .82rem; }
  .tip-sats { font-size: .66rem; }
  .qn-card { min-height: 160px; }
}
@media (prefers-reduced-motion: reduce) {
  .dissect { height: auto; }
  .dissect-sticky { position: relative; height: auto; padding: 120px 0 80px; --intro: 0; --open: 1; --outro: 0; }
  .dissect-parts, .dissect-outro { display: none; }
  .block3d, .dissect-intro { animation: none; }
}