/* Prueba del ritmo (viene del pitch, sección «BREATHE TO THE BEAT»).
   Tal cual, con las variables del sistema de marca de la portada y los
   assets en assets/ritmo/. El comportamiento vive en js/ritmo.js. */

.section {position:relative;isolation:isolate;padding:clamp(98px,12vw,190px) max(27px,8.2vw);overflow:hidden}
.section-inner {max-width:1400px;margin:auto;position:relative;z-index:2}
.section-title {font-family:var(--display);font-weight:900;font-size:clamp(46px,7.2vw,112px);line-height:.93;letter-spacing:-.075em;text-transform:uppercase;margin:0;max-width:1150px}
.section-title em {font-style:normal;color:var(--rosa)}
.section-title .outline {-webkit-text-stroke:1px rgba(235,241,247,.72);color:transparent}
.lede {font-size:clamp(18px,2vw,25px);line-height:1.55;color:#b5c4d0;max-width:590px;margin:28px 0 0}
.copy {font-size:clamp(15px,1.16vw,18px);line-height:1.73;color:#abb9c6;max-width:520px}
.mechanic {background:radial-gradient(ellipse at 77% 45%,#102736 0%,#09121c 48%,#090d16 100%)}
.mechanic::before {content:"";position:absolute;inset:0;opacity:.12;background-image:linear-gradient(90deg,#87d1d5 1px,transparent 1px),linear-gradient(0deg,#87d1d5 1px,transparent 1px);background-size:68px 68px;mask-image:linear-gradient(90deg,transparent,black)}
.mechanic-grid {display:grid;grid-template-columns:1fr 1fr;gap:8vw;align-items:center}
.mechanic .lede strong {color:var(--crema);font-weight:700}
.stage {min-height:490px;position:relative;border:1px solid rgba(77,215,221,.3);background:radial-gradient(circle at center,rgba(14,78,94,.35),rgba(4,12,21,.92) 68%);display:flex;align-items:center;flex-direction:column;justify-content:center;padding:31px;overflow:hidden;box-shadow:inset 0 0 100px rgba(7,30,44,.55)}
.stage::before {content:"";position:absolute;inset:14px;border:1px solid rgba(88,223,221,.12);pointer-events:none}
.stage-head {position:absolute;top:31px;left:30px;right:30px;display:flex;justify-content:space-between;font:10px var(--mono);letter-spacing:.15em;color:var(--cian)}
.stage-head span:last-child {color:#92a2b2}
.stage.detected {box-shadow:inset 0 0 80px rgba(234,26,97,.15)}
.status {min-height:22px;color:var(--cian);font:700 11px var(--mono);letter-spacing:.13em;text-transform:uppercase;margin:0 0 16px}
.stage.detected .status {color:var(--rosa)}
.breathe-btn {padding:15px 26px;border:1px solid var(--cian);background:rgba(65,212,225,.1);font:11px var(--mono);letter-spacing:.17em;min-height:48px;text-transform:uppercase;touch-action:manipulation}
.breathe-btn:hover,.breathe-btn:focus-visible {background:rgba(65,212,225,.23)}
.stage-foot {font:10px/1.6 var(--mono);color:#8297a6;text-align:center;max-width:270px;margin:16px 0 0}
@media (max-width:1170px) {
  .section {padding-inline:5.6vw}
}

@media (max-width:820px) {
  .section {padding:95px 5vw}
  .world-grid,.mechanic-grid,.market-top,.proof-top,.partner-head,.end-grid,.production-lead {grid-template-columns:1fr;gap:36px}
  .mechanic .stage {max-width:570px;width:100%;justify-self:center}
}

@media (max-width:560px) {
  .section {padding:88px 23px}
  .section-title {font-size:clamp(43px,12vw,72px)}
  .lede {font-size:18px;line-height:1.55}
  .stage {min-height:410px;padding:20px}
  .stage-head {left:21px;right:21px;top:21px;font-size:9px}
}

@media (max-width:360px) {
  .section-title {font-size:40px}
}

.lede {color:#eff7fc;max-width:660px;line-height:1.57;font-weight:450}
.copy {color:#e1ebf3;line-height:1.75;max-width:650px;font-size:clamp(16px,1.24vw,19px)}
.section-title {letter-spacing:-.047em;line-height:1.01;font-size:clamp(47px,6.5vw,100px)}
.section-title .outline {color:#e3f1f9;-webkit-text-stroke:0;opacity:.85}
.overline,.zone-legend-item span,.stage-foot,.market-note,.proof-caption,.ask p {color:#c4d3de}
.section-title em {filter:drop-shadow(0 0 18px rgba(244,61,161,.13))}
.mechanic .stage {padding:70px 25px 25px;min-height:640px;background:radial-gradient(ellipse at 50% 40%,rgba(37,86,100,.30),#050b12 77%);border:1px solid #46697c}
.mechanic .stage::before {inset:12px;border-color:rgba(149,218,234,.14)}
.rhythm-playfield {position:relative;width:min(100%,440px);height:240px;display:flex;align-items:center;justify-content:center;overflow:hidden;margin-top:2px}
.breath-hud {height:160px;width:320px;max-width:100%;position:relative;color:#e0f5fc;filter:drop-shadow(0 0 12px rgba(91,218,227,.45))}
.stage.hit .breath-hud {color:#6effb7;filter:drop-shadow(0 0 18px rgba(34,244,135,.7))}
.stage.detected .breath-hud {color:#ff5275;filter:drop-shadow(0 0 18px rgba(250,58,93,.67))}
.stage.detected {box-shadow:inset 0 0 80px rgba(250,30,75,.09)}
.score-panel {width:min(100%,400px);border-top:1px solid #48616e;border-bottom:1px solid #48616e;padding:15px 0 13px;margin-bottom:14px;display:flex;align-items:flex-end;justify-content:space-between;gap:10px}
.score-main {display:flex;flex-direction:column;gap:5px}
.score-label {font:10px var(--mono);letter-spacing:.15em;color:#d0e1e9}
.score-detail {text-align:right;display:grid;gap:11px;font:11px var(--mono);letter-spacing:.06em;color:#d5ecf4}
.status {color:#d8f6fa;font-size:12px;min-height:15px}
.stage.hit .status {color:#6effb7}
.stage.detected .status {color:#ff5275}
.rhythm-buttons {display:flex;flex-wrap:wrap;justify-content:center;gap:8px;width:100%}
.breathe-btn {flex:1;min-width:150px;max-width:225px;font-size:11px;min-height:52px;color:#edfaff;border-color:#6ccbd6}
.hit-btn {background:var(--cian);color:#041014;border-color:var(--cian);font-weight:800}
.hit-btn:disabled {opacity:.34}
.stage-foot {font:11px/1.65 var(--texto);max-width:380px;color:#e1edf3;margin-top:20px}
@media(max-width:820px) {
  .mechanic .stage {min-height:615px}
}

@media(max-width:560px) {
  .lede {font-size:18px}
  .copy {font-size:16px;line-height:1.7}
  .section-title {font-size:clamp(43px,11vw,68px)}
  .mechanic .stage {min-height:590px;padding:62px 17px 24px}
  .rhythm-playfield {height:195px}
  .breath-hud {transform:scale(.78)}
  .stage-head {top:21px}
  .score-panel {width:100%}
  .rhythm-buttons {gap:7px}
  .breathe-btn {min-width:120px;flex:1;padding:11px 10px}
  .stage-foot {font-size:11px}
}

.rhythm-playfield {flex-direction:column;gap:0}
.breath-hud {flex-shrink:0}
.rhythm-playfield {background:linear-gradient(90deg,rgba(2,8,14,.80),rgba(3,13,18,.47)),url('../assets/ritmo/mechanic-bg.webp') center/cover;border:1px solid rgba(164,228,232,.16);margin-bottom:20px}
@media(max-width:560px) {
  .rhythm-playfield {height:210px}
  .breath-hud {transform:scale(.83)}
}

.section {padding:clamp(90px,10vh,132px) max(23px,7.6vw)}
.section-inner {max-width:1240px}
.section-title {font-size:clamp(43px,6.5vw,88px);line-height:1.02;letter-spacing:-.038em;max-width:1020px}
.section-title .outline {color:#f1f6f7;-webkit-text-stroke:0}
.section-title em {color:#f666b0}
.lede {font-size:clamp(19px,2vw,24px);line-height:1.48;color:#e5edf0;max-width:690px}
.copy {font-size:clamp(16px,1.4vw,19px);line-height:1.65;color:#c4d5de;max-width:625px}
.mechanic .stage {background:#07131b;box-shadow:none;border:1px solid rgba(116,206,218,.29);min-height:560px;padding:63px 26px 30px}
.stage::before {display:none}
.stage-head {color:#d9f7fa;font:11px var(--mono);letter-spacing:.07em;top:23px;left:23px;right:23px}
.stage-head span:last-child {color:#9db7c1}
.rhythm-playfield {background:linear-gradient(rgba(7,13,19,.68),rgba(7,13,19,.63)),url('../assets/ritmo/mechanic-bg.webp') center/cover;border:1px solid rgba(171,219,228,.25);width:min(100%,520px);height:250px;margin:6px auto 13px;cursor:pointer;touch-action:pan-y;user-select:none;-webkit-user-select:none;position:relative}
.rhythm-playfield::before {content:'';position:absolute;inset:0;pointer-events:none;box-shadow:inset 0 0 55px rgba(3,9,15,.75)}
.rhythm-playfield.touch-feedback {border-color:#a0ffe5}
.breath-hud {z-index:1;pointer-events:none}
#touch-hint {position:absolute;z-index:4;bottom:10px;left:10px;right:10px;min-height:31px;display:flex;align-items:center;justify-content:center;padding:8px 10px;background:rgba(4,11,17,.93);border:1px solid rgba(125,220,226,.36);color:#e9fdff;text-align:center;font:600 11px/1.35 var(--texto);letter-spacing:.025em;pointer-events:none}
.rhythm-playfield.playing #touch-hint {background:rgba(4,11,17,.8);border-color:rgba(125,220,226,.16);color:#daecf2}
.score-panel {width:min(100%,520px);border-bottom:1px solid rgba(183,222,235,.2);border-top:0;padding:8px 0 17px;margin:6px 0 17px}
.score-label {font:12px var(--texto);color:#d4e2e7;letter-spacing:.03em}
.score-detail {color:#f0f7fa;font-size:13px}
.rhythm-buttons {width:min(100%,520px);gap:8px}
.breathe-btn {min-height:54px;font:700 12px var(--texto);letter-spacing:.04em;touch-action:manipulation}
.hit-btn {opacity:1!important}
.hit-btn:disabled {opacity:.5!important}
.stage-foot {max-width:530px;font:14px/1.5 var(--texto);color:#d8e7ed;margin-top:18px}
.status {font:700 12px var(--texto);letter-spacing:.03em;color:#e2f7f9;min-height:17px}
@media(max-width:760px) {
  .section {padding:85px 22px 88px}
  .section-title {font-size:clamp(41px,9.7vw,59px);letter-spacing:-.04em}
  .section-title .outline {color:#edf6f9}
  .lede {font-size:19px;line-height:1.47}
  .copy {font-size:16px;line-height:1.65;color:#d5e3e9}
  .mechanic .stage {padding:53px 16px 23px;min-height:590px}
  .stage-head {top:18px;left:18px;right:18px;font-size:10px}
  .rhythm-playfield {height:230px;margin-bottom:8px}
  .breath-hud {transform:scale(.84)}
  #touch-hint {font-size:10px}
  .score-panel {padding:4px 0 16px}
  .score-detail {gap:7px;font-size:12px}
  .rhythm-buttons {display:flex;flex-wrap:nowrap}
  .breathe-btn {min-width:0;padding:10px 7px;flex:1}
}

@media(max-width:390px) {
  .section {padding-left:19px;padding-right:19px}
  .mechanic .stage {padding-left:12px;padding-right:12px}
  .rhythm-buttons {flex-wrap:wrap}
  .breathe-btn {min-width:100%;min-height:49px}
  .rhythm-playfield {height:220px}
  .breath-hud {transform:scale(.76)}
}

#mechanic {padding:0;background:#06090d;scroll-margin-top:0}
#mechanic::before {display:none}
#mechanic .mechanic-grid {display:block;max-width:none;width:100%;margin:0}
#beat-stage {position:relative;display:grid;grid-template-rows:auto minmax(300px,1fr) auto auto auto;align-items:stretch;justify-content:stretch;gap:16px;height:calc(100svh - 64px);min-height:780px;width:100%;margin:0;padding:68px max(26px,5vw) 28px;border:0;box-shadow:none;overflow:hidden;background:linear-gradient(180deg,rgba(4,8,14,.92),rgba(4,8,14,.3) 43%,rgba(4,8,14,.93) 90%),url('../assets/ritmo/mechanic-bg.webp') center/cover}
#beat-stage::before {display:none}
#beat-stage .stage-head {top:24px;left:max(26px,5vw);right:max(26px,5vw);letter-spacing:.06em;font:11px var(--mono);color:#c6e2e9;gap:15px}
#beat-stage .stage-head span:last-child {color:#91ffed}
#beat-stage .rhythm-intro {position:relative;z-index:1}
#beat-stage .section-title {font-size:clamp(42px,5.8vw,86px);max-width:none;line-height:1;margin:0;letter-spacing:-.045em}
#beat-stage .section-title span,#beat-stage .section-title em {display:inline}
#beat-stage .lede {font-size:clamp(16px,1.5vw,21px);line-height:1.45;max-width:750px;margin:15px 0 0;color:#dbe7ed}
#beat-stage .rhythm-playfield {position:relative;width:100%;height:100%;min-height:300px;margin:0;display:block;overflow:hidden;background:none;border:0;cursor:default;touch-action:pan-y;user-select:none;-webkit-user-select:none;-webkit-tap-highlight-color:transparent}
#beat-stage .rhythm-playfield::before {display:none}
#beat-stage .rhythm-playfield.playing {cursor:pointer}
#beat-stage .rhythm-playfield:focus-visible {outline:1px solid rgba(145,255,237,.55);outline-offset:-2px}
#beat-stage .breath-hud {position:absolute;inset:0;width:100%;height:100%;max-width:none;transform:none;filter:drop-shadow(0 0 9px rgba(92,255,227,.15));pointer-events:none}
#beat-stage .hud-target {opacity:1}
#beat-stage.onbeat .hud-target {filter:drop-shadow(0 0 10px #81ffe8)}
#beat-stage.hit .breath-hud {filter:drop-shadow(0 0 12px rgba(88,246,132,.45))}
#beat-stage.detected .breath-hud {filter:drop-shadow(0 0 12px rgba(255,65,92,.4))}
#beat-stage .rhythm-count {position:absolute;bottom:4px;left:0;right:0;display:flex;justify-content:center;gap:22px;font:16px var(--mono);color:#b0c5ce}
#beat-stage .rhythm-count span {width:36px;height:36px;display:grid;place-items:center;border:1px solid rgba(145,255,237,.25);border-radius:50%;background:rgba(3,12,20,.65)}
#beat-stage .rhythm-count span.active {color:#041119;border-color:#94ffed;background:#94ffed}
#beat-stage #touch-hint {position:static;min-height:0;border:0;background:none;padding:0;margin:0;color:#d8e9ec;text-align:center;font:14px/1.4 var(--texto)}
#beat-stage .score-panel {width:100%;padding:0;margin:0;border:0;display:flex;align-items:center;justify-content:space-between;gap:20px}
#beat-stage .score-main {display:flex;flex-direction:row;align-items:center;gap:25px}
#beat-stage .score-label {max-width:140px;font:12px/1.5 var(--texto);letter-spacing:.05em;color:#b9d1db}
#beat-stage #beat-accuracy {font:800 clamp(38px,4.8vw,68px)/1 var(--texto);letter-spacing:-.045em;white-space:nowrap}
#beat-stage .score-detail {font:14px/1.5 var(--texto);display:grid;grid-template-columns:auto auto;column-gap:30px;row-gap:2px;letter-spacing:0}
#beat-stage #beat-offset {grid-column:1 / -1;color:#91ffed}
#beat-stage .status {min-height:20px;font:700 13px/1.5 var(--texto);margin:0;text-align:center;letter-spacing:.035em}
#beat-stage .rhythm-controls {display:grid;grid-template-columns:minmax(220px,1fr) minmax(270px,1.2fr) minmax(260px,1fr);align-items:center;gap:30px;padding-top:20px;border-top:1px solid rgba(197,229,240,.22)}
#beat-stage .rhythm-buttons {display:flex;width:100%;gap:8px;justify-content:flex-start;flex-wrap:nowrap}
#beat-stage .breathe-btn {font:700 12px var(--texto);letter-spacing:.02em;width:auto;flex:1;max-width:none;min-width:0;min-height:50px;padding:10px 13px;background:rgba(3,12,20,.78);color:#f3fbff;border:1px solid rgba(160,217,229,.65);touch-action:manipulation}
#beat-stage .breathe-btn:disabled {cursor:default;opacity:.5}
#beat-stage .hit-btn {width:100%;min-height:74px;font-size:15px;flex:none;grid-column:auto;border-color:#91ffed;background:rgba(38,102,111,.17);color:#eafffa}
#beat-stage .hit-btn:disabled {opacity:.55!important}
#beat-stage .keyboard-input {display:flex;justify-content:center;align-items:center;gap:16px}
#beat-stage kbd,#beat-stage .tecla {display:inline-block;border:1px solid #c5ebe7;border-bottom:3px solid #c5ebe7;padding:8px 17px;font:700 13px var(--texto);letter-spacing:.04em;background:rgba(1,13,19,.7)}
#beat-stage .touch-input {display:none}
#beat-stage .rhythm-audio {display:flex;align-items:center;gap:10px;width:100%;margin:0;padding:0;border:0;font:12px var(--texto)}
#beat-stage .rhythm-audio button {min-height:44px;padding:6px 10px;border:1px solid #6c8b96;color:#effdff;background:rgba(3,12,20,.72);font:600 11px var(--texto);white-space:nowrap}
#beat-stage .rhythm-audio label {flex:1;display:flex;align-items:center;gap:8px;min-width:0}
#beat-stage .rhythm-audio input {width:100%;min-width:40px;accent-color:#91ffed;height:32px}
#beat-stage .rhythm-audio output {min-width:30px;text-align:right}
#beat-stage .stage-foot {font:13px/1.5 var(--texto);margin:0;color:#f3bac5}
#mechanic .rhythm-explainer {display:flex;align-items:flex-start;justify-content:space-between;gap:50px;padding:35px max(26px,5vw);background:#071019}
#mechanic .rhythm-explainer .copy {font:16px/1.6 var(--texto);max-width:730px;margin:0;color:#c4d5de}
#mechanic .rhythm-explainer .stage-foot {max-width:430px;font:13px/1.6 var(--texto);color:#9eb9c7;margin:0}
@media(pointer:coarse) {
  #beat-stage .keyboard-input {display:none}
  #beat-stage .touch-input {display:block}
  #beat-stage .hit-btn {min-height:80px;font-size:17px}
}

@media(max-width:1000px) {
  #beat-stage .rhythm-controls {grid-template-columns:1fr 1.2fr;gap:15px}
  #beat-stage .rhythm-audio {grid-column:1 / -1;max-width:360px;justify-self:center}
  #beat-stage {min-height:820px}
  #beat-stage .section-title {font-size:clamp(38px,6.2vw,65px)}
}

@media(max-width:600px) {
  #beat-stage {height:auto;min-height:calc(100svh - 64px);padding:54px 19px 22px;gap:10px;grid-template-rows:auto 240px auto auto auto;background-position:56% center}
  #beat-stage .stage-head {top:22px;left:19px;right:19px;font-size:9px;letter-spacing:.03em}
  #beat-stage .section-title {font-size:clamp(29px,8.7vw,47px);white-space:normal}
  #beat-stage .lede {font-size:15px;margin-top:12px;max-width:none}
  #beat-stage .rhythm-playfield {min-height:0}
  #beat-stage .rhythm-count {gap:18px;bottom:0;font-size:14px}
  #beat-stage .rhythm-count span {width:31px;height:31px}
  #beat-stage #touch-hint {font-size:12px}
  #beat-stage .score-panel {gap:12px}
  #beat-stage .score-main {display:block}
  #beat-stage .score-label {max-width:none;font-size:9px;letter-spacing:.02em}
  #beat-stage #beat-accuracy {display:block;font-size:43px;margin-top:7px}
  #beat-stage .score-detail {display:grid;grid-template-columns:1fr;font-size:12px;line-height:1.65;gap:0}
  #beat-stage .score-detail span {display:block}
  #beat-stage .status {font-size:11px;min-height:18px;letter-spacing:0}
  #beat-stage .rhythm-controls {grid-template-columns:1fr;gap:11px;padding-top:15px}
  #beat-stage .hit-btn {grid-row:1;min-height:72px}
  #beat-stage .rhythm-buttons {grid-row:2}
  #beat-stage .breathe-btn {min-height:45px;font-size:11px}
  #beat-stage .breathe-btn.hit-btn {min-height:72px;font-size:16px}
  #beat-stage .rhythm-audio {grid-row:3;max-width:none;font-size:11px;gap:8px}
  #beat-stage .rhythm-audio button {font-size:10px}
  #beat-stage .keyboard-input {gap:10px}
  #mechanic .rhythm-explainer {display:block;padding:25px 19px}
  #mechanic .rhythm-explainer .copy {font-size:15px}
  #mechanic .rhythm-explainer .stage-foot {margin-top:15px}
}

@media(prefers-reduced-motion:reduce) {
  #beat-stage .breath-hud,#beat-stage.onbeat .hud-target {filter:none}
}