/* =========================================================
   ATLAS SONORO · ESTILOS
   ========================================================= */
:root {
  --bg: #0e1130;
  --bg-2: #141842;
  --bg-3: #1b2057;
  --surface: rgba(255, 255, 255, .045);
  --surface-2: rgba(255, 255, 255, .075);
  --line: rgba(255, 255, 255, .11);
  --text: #ece9f8;
  --muted: #aeabcb;
  --gold: #f2b35e;
  --lilac: #cba8f6;
  --strong: #fff; --text-2: var(--text-2);
  --inset: var(--inset); --inset-2: rgba(0,0,0,.3);
  --line-strong: rgba(255,255,255,.35); --track: rgba(255,255,255,.14);
  --nav-bg: var(--nav-bg); --nav-bg-solid: var(--nav-bg-solid);
  --glass: var(--glass); --glass-2: var(--glass-2);
  --mint: var(--mint); --warn: var(--warn); --ring: rgba(203,168,246,.14);
  --cmix: 86%; --cmixto: #fff;
  --hero-grad: radial-gradient(120% 80% at 50% 0%, #1d2260 0%, var(--bg) 60%);
  --panel: rgba(10,13,40,.6);
  --veil: rgba(8,10,32,.35); --veil-hero: linear-gradient(180deg, rgba(8,10,32,.25), transparent 55%);
  --c1: #ff4a5e; --c2: #ff8f3a; --c3: #f7c948; --c4: #3fcf7a; --c5: #3fb0ff; --c6: #6670ff; --c7: #b66bff;
  --serif: "Noto Serif", "Iowan Old Style", Georgia, "Times New Roman", serif;
  --sans: "Lato", system-ui, -apple-system, "Segoe UI", Roboto, sans-serif;
  --radius: 18px;
  --wrap: 1120px;
  --ease: cubic-bezier(.22, .8, .3, 1);
}

*, *::before, *::after { box-sizing: border-box; }
html { scroll-behavior: smooth; scroll-padding-top: 76px; -webkit-text-size-adjust: 100%; }
body {
  margin: 0; background: var(--bg); color: var(--text); transition: background-color .5s, color .5s;
  font: 400 1.0625rem/1.7 var(--sans);
  -webkit-font-smoothing: antialiased; overflow-x: hidden;
}
[hidden] { display: none !important; }
img, svg, canvas { max-width: 100%; display: block; }
img { height: auto; }
a { color: var(--lilac); text-underline-offset: 3px; }
a:hover { color: var(--strong); }
h1, h2, h3, h4 { font-family: var(--serif); font-weight: 400; line-height: 1.2; margin: 0 0 .5em; letter-spacing: .005em; }
h2 { font-size: clamp(1.9rem, 4.2vw, 2.9rem); }
h3 { font-size: clamp(1.3rem, 2.4vw, 1.65rem); margin-top: 1.6em; }
h4 { font-size: 1.1rem; font-family: var(--sans); font-weight: 700; letter-spacing: .02em; margin-top: 1.4em; }
p { margin: 0 0 1em; }
.wrap { width: min(var(--wrap), 100% - 2.5rem); margin-inline: auto; }
.muted { color: var(--muted); }
.small { font-size: .875rem; }
kbd { font: 700 .75rem var(--sans); padding: .1em .5em; border: 1px solid var(--line); border-bottom-width: 2px; border-radius: 6px; background: var(--surface); }
:focus-visible { outline: 2px solid var(--gold); outline-offset: 3px; border-radius: 6px; }
.skip { position: absolute; left: -999px; top: 0; background: var(--gold); color: var(--bg); padding: .6rem 1rem; z-index: 100; border-radius: 0 0 8px 0; }
.skip:focus { left: 0; }

.kicker { font: 700 .72rem/1.4 var(--sans); letter-spacing: .26em; text-transform: uppercase; color: var(--muted); margin: 0 0 1rem; }
.kicker--gold { color: var(--gold); }
.lead { font-size: 1.2rem; color: var(--text-2); max-width: 62ch; }
.ref { font-size: .75em; vertical-align: super; text-decoration: none; margin-left: .1em; padding: .5em .25em; margin: -.5em -.15em -.5em .05em; }

/* ---------- Arcoíris ---------- */
.rainbow { display: flex; height: 4px; }
.rainbow i { flex: 1; }
.rainbow i:nth-child(1) { background: var(--c1); } .rainbow i:nth-child(2) { background: var(--c2); }
.rainbow i:nth-child(3) { background: var(--c3); } .rainbow i:nth-child(4) { background: var(--c4); }
.rainbow i:nth-child(5) { background: var(--c5); } .rainbow i:nth-child(6) { background: var(--c6); }
.rainbow i:nth-child(7) { background: var(--c7); }
.rainbow--thin { height: 3px; margin-bottom: 1.6rem; border-radius: 3px; overflow: hidden; }

/* ---------- Botones ---------- */
.btn {
  appearance: none; border: 1px solid transparent; cursor: pointer; font: 700 .95rem/1 var(--sans);
  letter-spacing: .03em; padding: .95rem 1.5rem; border-radius: 999px; color: var(--text);
  background: var(--surface-2); transition: transform .25s var(--ease), background .25s, border-color .25s, box-shadow .25s;
  text-decoration: none; display: inline-flex; align-items: center; justify-content: center; gap: .5em;
}
.btn:hover { transform: translateY(-1px); background: color-mix(in srgb, var(--strong) 10%, transparent); color: var(--strong); }
.btn:active { transform: translateY(0); }
.btn--primary { background: linear-gradient(135deg, #f2b35e, #e98a7a 55%, #c58af0); color: #1a1030; box-shadow: 0 8px 30px -8px rgba(242,179,94,.55); }
.btn--primary:hover { background: linear-gradient(135deg, #ffc577, #f09b8b 55%, #d29cf8); color: #1a1030; }
.btn--ghost { background: transparent; border-color: var(--line); }
.btn--ghost:hover { border-color: var(--line-strong); background: var(--surface); }
.btn--small { padding: .7rem 1.1rem; font-size: .85rem; }
.btn[aria-pressed="true"] { background: var(--gold); color: #1a1030; }
.row { display: flex; flex-wrap: wrap; gap: .75rem; align-items: center; margin-top: 1rem; }
.row--center { justify-content: center; }

.badge { display: inline-block; font: 700 .65rem/1 var(--sans); letter-spacing: .16em; text-transform: uppercase; padding: .45em .8em; border-radius: 999px; border: 1px solid; }
.badge--measure { color: var(--mint); border-color: rgba(126,226,200,.4); background: rgba(126,226,200,.08); }
.badge--symbol { color: var(--lilac); border-color: rgba(203,168,246,.4); background: rgba(203,168,246,.08); }
.badge--practice { color: var(--gold); border-color: rgba(242,179,94,.4); background: rgba(242,179,94,.08); }

/* ---------- Navegación ---------- */
.nav { position: fixed; inset: 0 0 auto 0; z-index: 50; background: var(--nav-bg); backdrop-filter: blur(14px); -webkit-backdrop-filter: blur(14px); border-bottom: 1px solid var(--line); }
.nav__in { width: min(var(--wrap), 100% - 2.5rem); margin-inline: auto; display: flex; align-items: center; justify-content: space-between; height: 64px; }
.brand { display: flex; align-items: center; gap: .7rem; text-decoration: none; color: var(--text); }
.brand__mark { width: 22px; height: 22px; border-radius: 50%; background: conic-gradient(var(--c1), var(--c2), var(--c3), var(--c4), var(--c5), var(--c6), var(--c7), var(--c1)); box-shadow: 0 0 18px rgba(203,168,246,.5); }
.brand__txt { font: 700 .78rem var(--sans); letter-spacing: .3em; text-transform: uppercase; }
.nav__menu { display: flex; gap: 1.6rem; }
.nav__menu a { color: var(--muted); text-decoration: none; font-size: .9rem; letter-spacing: .04em; padding: .3rem 0; border-bottom: 2px solid transparent; transition: color .2s, border-color .2s; }
.nav__menu a:hover, .nav__menu a.is-on { color: var(--strong); border-color: var(--gold); }
.nav__burger { display: none; background: none; border: 0; width: 44px; height: 44px; cursor: pointer; padding: 0; }
.nav__burger span { display: block; width: 22px; height: 2px; background: var(--text); margin: 5px auto; transition: transform .3s, opacity .3s; }
.nav__burger[aria-expanded="true"] span:nth-child(1) { transform: translateY(7px) rotate(45deg); }
.nav__burger[aria-expanded="true"] span:nth-child(2) { opacity: 0; }
.nav__burger[aria-expanded="true"] span:nth-child(3) { transform: translateY(-7px) rotate(-45deg); }
.nav__bar { height: 2px; }
.nav__bar i { display: block; height: 100%; width: 0; background: linear-gradient(90deg, var(--c1), var(--c2), var(--c3), var(--c4), var(--c5), var(--c6), var(--c7)); }

/* ---------- Hero ---------- */
.hero { position: relative; padding: 7.5rem 0 0; overflow: hidden; background-color: var(--bg); background-image: var(--scene-img, none), var(--hero-grad); background-size: cover; background-position: 82% 35%; }
.hero::before { content: ""; position: absolute; inset: 0; background: var(--veil-hero); pointer-events: none; }
.hero__in { position: relative; z-index: 2; text-align: center; padding-bottom: 1rem; }
.hero__title { font-size: clamp(2.8rem, 9vw, 6rem); letter-spacing: .02em; text-transform: uppercase; margin: .2rem 0 0; font-weight: 400; }
.hero__title span { display: block; font: 700 clamp(.85rem, 2vw, 1.15rem)/1.4 var(--sans); letter-spacing: .3em; color: var(--lilac); margin-top: 1.1rem; }
.hero__lead { max-width: 58ch; margin: 1.8rem auto 0; font-size: clamp(1.05rem, 2vw, 1.25rem); color: var(--text-2); font-family: var(--serif); }
.hero__cta { display: flex; gap: 1rem; justify-content: center; flex-wrap: wrap; margin-top: 2.2rem; }
.hero__bowl { position: relative; width: min(760px, 100%); margin: 1rem auto -3rem; }
.hero__bowl img { width: 100%; height: auto; animation: float 9s ease-in-out infinite; }
.hero__bowl { -webkit-mask-image: linear-gradient(to bottom, #000 58%, transparent 100%); mask-image: linear-gradient(to bottom, #000 58%, transparent 100%); }
.hero__rings { position: absolute; inset: 0; pointer-events: none; display: grid; place-items: center; }
.hero__rings i { position: absolute; bottom: -10%; width: 60vmin; aspect-ratio: 1; border: 1px solid var(--ring); border-radius: 50%; animation: ripple 12s linear infinite; }
.hero__rings i:nth-child(2) { animation-delay: -3s; } .hero__rings i:nth-child(3) { animation-delay: -6s; } .hero__rings i:nth-child(4) { animation-delay: -9s; }
.hero .rainbow { position: relative; z-index: 3; }
@keyframes float { 0%,100% { transform: translateY(0) scale(1); } 50% { transform: translateY(-10px) scale(1.015); } }
@keyframes ripple { from { transform: translateY(0) scale(.3); opacity: .9; } to { transform: translateY(0) scale(2.6); opacity: 0; } }

/* ---------- Secciones ---------- */
.section { padding: clamp(4rem, 9vw, 7rem) 0; position: relative; isolation: isolate; overflow: clip; background-image: var(--scene-grad, none); }
/* El paisaje queda fijo a la pantalla mientras la sección se desplaza (así se ve entero aunque la sección sea muy alta) */
.section::before { content: ""; display: block; position: sticky; top: 0; height: 100vh; height: 100dvh; margin-bottom: -100vh; margin-bottom: -100dvh; z-index: -1; pointer-events: none;
  background-image: linear-gradient(var(--veil), var(--veil)), var(--scene-img, none); background-size: auto, cover; background-position: center, center; background-repeat: no-repeat;
  transform: scale(var(--zoom, 1)); transform-origin: var(--zx, 50%) var(--zy, 50%); }
.section--tight { padding-top: clamp(4rem, 7vw, 5.5rem); }
.section--alt { --scene-grad: linear-gradient(180deg, var(--bg-2), var(--bg) 120%); }
.sec-head { margin-bottom: 2.4rem; }
.sec-head--sm { margin-bottom: 1.4rem; }
.sec-head--sm h3 { margin-top: 0; }

.reveal { opacity: 0; transform: translateY(22px); transition: opacity .9s var(--ease), transform .9s var(--ease); }
.reveal.is-in { opacity: 1; transform: none; }

/* niveles + notas */
.levels__grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 1rem; }
.level { padding: 1.6rem; background: var(--surface); border: 1px solid var(--line); border-radius: var(--radius); }
.level__n { font: 700 .75rem var(--sans); letter-spacing: .25em; color: var(--gold); }
.level h3 { margin: .5rem 0 .3rem; font-size: 1.5rem; }
.level p { color: var(--muted); margin-bottom: 1rem; }
.notes { display: grid; grid-template-columns: 1fr 1fr; gap: 1rem; margin-top: 1rem; }
.note { padding: 1.6rem 1.8rem; border-radius: var(--radius); border: 1px solid rgba(242,179,94,.25); background: linear-gradient(160deg, rgba(242,179,94,.08), transparent); }
.note h3 { margin-top: 0; }
.note p:last-child { margin: 0; font-size: .98rem; color: var(--text-2); }

/* tarjetas */
.card { background: var(--surface); border: 1px solid var(--line); border-radius: var(--radius); padding: 1.8rem; }
.card h3 { margin-top: 0; font-size: 1.4rem; }
.card--warn { border-color: rgba(255,143,58,.35); background: linear-gradient(160deg, rgba(255,143,58,.09), transparent); }
.two { display: grid; grid-template-columns: 1fr 1fr; gap: 1.2rem; margin-top: 1.2rem; }
.two--flat { margin-top: 1rem; }
.mini { background: var(--surface); border: 1px solid var(--line); border-radius: 14px; padding: 1.2rem 1.3rem; }
.mini h4 { margin: 0 0 .4rem; font-size: 1rem; color: var(--gold); letter-spacing: .06em; }
.mini p { margin: 0; font-size: .96rem; color: var(--text-2); }
.cards4 { display: grid; grid-template-columns: repeat(4, 1fr); gap: .9rem; margin: 1.4rem 0; }
.cards3 { display: grid; gap: .9rem; }
.callout { margin: 1.4rem 0; padding: 1.2rem 1.4rem; border-left: 3px solid var(--lilac); background: rgba(203,168,246,.07); border-radius: 0 12px 12px 0; font-size: .98rem; color: var(--text-2); }
.callout--warn { border-color: var(--c2); background: rgba(255,143,58,.08); }
.callout b { color: var(--strong); }

/* ---------- Sala de calma ---------- */
.room { background: radial-gradient(90% 120% at 50% 0%, rgba(102,112,255,.18), transparent 70%), var(--surface); border: 1px solid var(--line); border-radius: 28px; padding: clamp(1.2rem, 3vw, 2.2rem); }
.room__top { display: flex; flex-wrap: wrap; justify-content: space-between; align-items: center; gap: 1rem; }
.room__hint { margin: 0; color: var(--muted); font-size: .85rem; }
.seg { display: inline-flex; padding: 4px; background: var(--inset); border: 1px solid var(--line); border-radius: 999px; }
.seg__b { appearance: none; border: 0; background: none; color: var(--muted); font: 700 .88rem var(--sans); padding: .7rem 1.2rem; border-radius: 999px; cursor: pointer; transition: all .3s var(--ease); display: flex; flex-direction: column; align-items: center; line-height: 1.1; }
.seg__b small { font-weight: 400; font-size: .68rem; opacity: .75; margin-top: .2rem; }
.seg__b.is-on { background: var(--surface-2); color: var(--strong); box-shadow: inset 0 0 0 1px rgba(255,255,255,.14); }

.bowls { display: grid; grid-template-columns: repeat(7, minmax(0, 1fr)); gap: .2rem; margin: 2rem 0 .5rem; align-items: start; }
.bowl { --c: #fff; appearance: none; background: none; border: 0; padding: 0; cursor: pointer; color: var(--text); position: relative; text-align: center; transform: translateY(calc((3 - var(--i)) * 10px)); transition: transform .4s var(--ease); touch-action: manipulation; -webkit-tap-highlight-color: transparent; }
.bowl__img { position: relative; display: block; aspect-ratio: 560 / 458; transition: transform .45s var(--ease), filter .45s; }
.bowl__img img { width: 100%; height: auto; pointer-events: none; user-select: none; }
.bowl:hover .bowl__img { transform: scale(1.06); }
.bowl__img::before { content: ""; position: absolute; inset: -18% -12%; border-radius: 50%; background: radial-gradient(closest-side, var(--c), transparent 72%); opacity: 0; transition: opacity 1.6s ease-out; pointer-events: none; z-index: -1; }
.bowl { isolation: isolate; }
.bowl:active .bowl__img, .bowl.is-ring .bowl__img { transform: scale(1.1); filter: drop-shadow(0 0 8px #fff) drop-shadow(0 0 26px var(--c)) drop-shadow(0 0 60px var(--c)) brightness(1.3) saturate(1.25); transition-duration: .12s; }
.bowl:active .bowl__img::before, .bowl.is-ring .bowl__img::before { opacity: .55; transition-duration: .12s; }
.bowl.is-hold .bowl__img::before { opacity: .6; }
.bowl.is-hold .bowl__img { filter: drop-shadow(0 0 8px #fff) drop-shadow(0 0 28px var(--c)) drop-shadow(0 0 64px var(--c)) brightness(1.35) saturate(1.25); animation: sing 1.1s ease-in-out infinite; }
.bowl__wave { position: absolute; left: 50%; top: 48%; width: 50%; aspect-ratio: 1; border-radius: 50%; border: 2px solid var(--c); transform: translate(-50%, -50%) scale(.4); opacity: 0; pointer-events: none; }
.bowl.is-ring .bowl__wave { animation: wave 1.8s ease-out; }
.bowl__note { display: block; font: 500 1.15rem var(--serif); margin-top: .1rem; }
.bowl__hz { display: block; font-size: .72rem; color: var(--muted); letter-spacing: .05em; }
.bowl__name { display: block; font: 700 .64rem var(--sans); letter-spacing: .18em; text-transform: uppercase; color: var(--c); margin-top: .2rem; }
.room__readout { text-align: center; color: var(--lilac); margin: 1.4rem 0 0; min-height: 1.6em; font-family: var(--serif); font-style: italic; }
@keyframes wave { 0% { transform: translate(-50%, -50%) scale(.4); opacity: .9; } 100% { transform: translate(-50%, -50%) scale(2.4); opacity: 0; } }
@keyframes sing { 0%,100% { transform: scale(1.07); } 50% { transform: scale(1.12); } }

.room-cards { display: grid; grid-template-columns: 1fr 1fr; gap: 1.2rem; margin-top: 1.2rem; }
.breath { display: grid; place-items: center; height: 220px; }
.breath__orb { width: 120px; height: 120px; border-radius: 50%; display: grid; place-items: center; text-align: center; font-size: .78rem; padding: .6rem; color: var(--strong);
  background: radial-gradient(circle at 35% 30%, rgba(255,255,255,.55), rgba(63,176,255,.55) 40%, rgba(102,112,255,.5)); box-shadow: 0 0 50px rgba(102,112,255,.55);
  transition: transform var(--dur, 4s) ease-in-out, box-shadow var(--dur, 4s) ease-in-out; }
.breath__orb.in { transform: scale(var(--sc, 1.75)); box-shadow: 0 0 80px rgba(63,176,255,.8); }
.field { display: flex; flex-direction: column; gap: .4rem; font: 700 .72rem var(--sans); letter-spacing: .14em; text-transform: uppercase; color: var(--muted); }
.field--inline { flex-direction: row; align-items: center; gap: .8rem; }
.field input, .field select, .field textarea { font: 400 1rem var(--sans); letter-spacing: 0; text-transform: none; color: var(--text); background: var(--inset); border: 1px solid var(--line); border-radius: 12px; padding: .75rem .9rem; width: 100%; }
.field select { width: auto; }
.field textarea { resize: vertical; }
.field output { color: var(--gold); letter-spacing: .04em; margin-left: .5rem; }
.field input[type=range] { padding: 0; accent-color: var(--gold); height: 28px; background: none; border: 0; }
.safe { font-size: .85rem; color: var(--muted); border-left: 2px solid var(--gold); padding-left: .8rem; margin: .8rem 0 1.2rem; }
.switches { display: grid; grid-template-columns: 1fr 1fr; gap: .8rem 1.2rem; margin-bottom: 1.2rem; }
.switches .switch { align-items: flex-start; flex-wrap: wrap; row-gap: 0; }
.switches .switch small { flex-basis: 100%; padding-left: 56px; margin-top: -.3rem; }
.switch { display: flex; align-items: center; gap: .8rem; cursor: pointer; font-size: .98rem; }
.switch small { color: var(--muted); font-size: .78rem; }
.switch input { position: absolute; opacity: 0; }
.switch span { width: 44px; height: 26px; border-radius: 999px; background: var(--track); position: relative; transition: background .3s; flex: none; }
.switch span::after { content: ""; position: absolute; top: 3px; left: 3px; width: 20px; height: 20px; border-radius: 50%; background: #fff; transition: transform .3s var(--ease); }
.switch input:checked + span { background: var(--c5); }
.switch input:checked + span::after { transform: translateX(18px); }
.switch input:focus-visible + span { outline: 2px solid var(--gold); outline-offset: 3px; }
.switch--sm { font-size: .85rem; }

/* ---------- Chakras ---------- */
.legend { display: flex; flex-wrap: wrap; gap: 1.4rem; list-style: none; padding: 0; margin: 1.2rem 0 0; font-size: .85rem; color: var(--muted); }
.dot { display: inline-block; width: 9px; height: 9px; border-radius: 50%; margin-right: .5rem; }
.dot--m { background: var(--mint); box-shadow: 0 0 8px var(--mint); }
.dot--s { background: var(--lilac); box-shadow: 0 0 8px var(--lilac); }
.chips { display: flex; gap: .5rem; overflow-x: auto; padding: .3rem .1rem 1rem; margin-bottom: 1rem; scrollbar-width: thin; }
.chip { --c: #fff; flex: none; appearance: none; cursor: pointer; background: var(--surface); border: 1px solid var(--line); color: var(--text); font: 700 .85rem var(--sans); letter-spacing: .04em; padding: .7rem 1.1rem; border-radius: 999px; display: flex; align-items: center; gap: .6rem; transition: all .3s var(--ease); }
.chip i { width: 10px; height: 10px; border-radius: 50%; background: var(--c); box-shadow: 0 0 10px var(--c); }
.chip:hover { border-color: var(--c); }
.chip[aria-pressed="true"] { background: color-mix(in srgb, var(--c) 22%, transparent); border-color: var(--c); color: var(--strong); }

.explorer { display: grid; grid-template-columns: minmax(260px, 360px) 1fr; gap: 2rem; align-items: start; }
.map { margin: 0; position: sticky; top: 90px; background: radial-gradient(70% 55% at 50% 40%, rgba(102,112,255,.18), transparent 70%), var(--surface); border: 1px solid var(--line); border-radius: 24px; padding: 1rem 1rem .6rem; }
.map svg { width: 100%; height: auto; overflow: visible; }
.map figcaption { font-size: .75rem; color: var(--muted); text-align: center; padding: .4rem .6rem .4rem; }
.map .body { fill: none; stroke: url(#bodyGrad); stroke-width: 1.6; stroke-linecap: round; stroke-linejoin: round; opacity: .8; }
.map .spine { stroke: var(--line-strong); stroke-width: 1; stroke-dasharray: 2 5; }
.node { cursor: pointer; outline: none; }
.node__halo { fill: var(--c); opacity: .16; transition: opacity .4s, r .4s var(--ease); transform-box: fill-box; transform-origin: center; animation: pulse 4.5s ease-in-out infinite; }
.node__core { fill: var(--c); stroke: rgba(255,255,255,.7); stroke-width: 1.2; transition: r .3s var(--ease); }
.node__label { font: 700 9.5px var(--sans); letter-spacing: .14em; fill: var(--text-2); text-transform: uppercase; transition: fill .3s; }
.node__note { font: 400 10px var(--serif); fill: var(--muted); }
.node:hover .node__halo, .node:focus-visible .node__halo { opacity: .4; }
.node:focus-visible .node__core { stroke: #fff; stroke-width: 2.4; }
.node.is-on .node__halo { opacity: .5; animation: none; }
.node.is-on .node__label { fill: var(--strong); }
@keyframes pulse { 0%,100% { transform: scale(1); } 50% { transform: scale(1.25); } }

.detail { min-height: 520px; animation: fadeUp .6s var(--ease); }
.detail.swap { animation: fadeUp .5s var(--ease); }
@keyframes fadeUp { from { opacity: 0; transform: translateY(14px); } to { opacity: 1; transform: none; } }
.detail__head { display: grid; grid-template-columns: 1fr minmax(150px, 230px); gap: 1rem; align-items: center; }
.detail__head h3 { font-size: clamp(2.2rem, 5vw, 3.4rem); margin: 0; line-height: 1.05; }
.detail__skt { font: 700 .8rem var(--sans); letter-spacing: .3em; text-transform: uppercase; color: color-mix(in srgb, var(--c) var(--cmix, 100%), var(--cmixto, #000)); margin: .5rem 0 0; }
.detail__bowl { position: relative; }
.detail__bowl img { width: 100%; }
.detail__key { font: italic 1.25rem/1.5 var(--serif); margin: 1.2rem 0 1.4rem; padding-left: 1.1rem; border-left: 3px solid var(--c); color: var(--text); }
.detail__actions { display: flex; flex-wrap: wrap; gap: .7rem; margin-bottom: 1.6rem; }
.btn--c { background: color-mix(in srgb, var(--c) 28%, transparent); border-color: var(--c); }
.btn--c:hover { background: color-mix(in srgb, var(--c) 45%, transparent); }
.facts { display: grid; grid-template-columns: repeat(3, 1fr); gap: .7rem; margin: 0 0 1rem; }
.fact { background: var(--surface); border: 1px solid var(--line); border-radius: 14px; padding: .8rem 1rem; }
.fact dt { font: 700 .62rem var(--sans); letter-spacing: .18em; text-transform: uppercase; color: var(--muted); display: flex; align-items: center; margin-bottom: .2rem; }
.fact dd { margin: 0; font-weight: 700; font-size: .98rem; line-height: 1.3; }
.fact--m { border-color: rgba(126,226,200,.3); }
.fact--m .dot { background: var(--mint); box-shadow: 0 0 6px var(--mint); width: 7px; height: 7px; }
.fact .dot { width: 7px; height: 7px; margin-right: .45rem; }
.fact--s .dot { background: var(--lilac); }
.body-assoc { background: var(--surface-2); border-radius: 14px; padding: 1rem 1.2rem; margin-bottom: .4rem; }
.body-assoc b { display: block; font: 700 .65rem var(--sans); letter-spacing: .2em; text-transform: uppercase; margin-bottom: .3rem; }
.detail__sub { font: 700 .72rem var(--sans); letter-spacing: .26em; text-transform: uppercase; color: var(--gold); margin: 2.2rem 0 1rem; display: flex; align-items: center; gap: .8rem; }
.detail__sub::after { content: ""; flex: 1; height: 1px; background: var(--line); }
.duo { display: grid; grid-template-columns: 1fr 1fr; gap: .8rem; }
.duo .mini h4 { color: color-mix(in srgb, var(--c) var(--cmix, 100%), var(--cmixto, #000)); }
.practice { background: linear-gradient(160deg, color-mix(in srgb, var(--c) 14%, transparent), var(--surface)); border: 1px solid color-mix(in srgb, var(--c) 40%, transparent); border-radius: 18px; padding: 1.4rem 1.5rem; margin-top: .8rem; }
.practice h4 { margin-top: 0; }
.practice p { margin: 0 0 .7rem; }
.practice p b { color: color-mix(in srgb, var(--c) var(--cmix, 100%), var(--cmixto, #000)); }
.tags { display: flex; flex-wrap: wrap; gap: .4rem; margin: .5rem 0 1rem; }
.tag { font-size: .85rem; padding: .3em .85em; border: 1px solid var(--line); border-radius: 999px; background: var(--surface); }
.qa { margin-top: 1rem; display: grid; gap: .7rem; }
.qa blockquote { margin: 0; padding: 1rem 1.2rem; border-radius: 12px; background: var(--inset); font-family: var(--serif); font-style: italic; }
.qa small { display: block; font: 700 .62rem var(--sans); letter-spacing: .2em; text-transform: uppercase; font-style: normal; color: var(--muted); margin-bottom: .3rem; }

.integration { margin-top: clamp(3rem, 6vw, 5rem); }
.integration__grid { display: grid; grid-template-columns: minmax(240px, 380px) 1fr; gap: 2.5rem; align-items: center; margin: 1.5rem 0; }
.wheel { margin: 0; text-align: center; }
.wheel svg { width: 100%; height: auto; }
.wheel figcaption { color: var(--muted); font-size: .8rem; letter-spacing: .1em; }
.wheel .seg-path { cursor: pointer; transition: opacity .3s, transform .35s var(--ease); transform-origin: 160px 160px; outline: none; }
.wheel .seg-path:hover, .wheel .seg-path:focus-visible { transform: scale(1.05); }
.wheel .seg-path.is-ring { animation: wheelPulse 1.2s ease-out; }
@keyframes wheelPulse { 0% { transform: scale(1.09); filter: brightness(1.6); } 100% { transform: scale(1); filter: none; } }
.scale { list-style: none; padding: 0; margin: 0 0 1rem; display: grid; gap: .4rem; counter-reset: s; }
.scale li { display: grid; grid-template-columns: 1.5rem 1fr auto auto; gap: .9rem; align-items: center; padding: .55rem .9rem; border-radius: 10px; background: var(--surface); border-left: 3px solid var(--c); font-size: .95rem; }
.scale li b { font-family: var(--serif); font-weight: 500; }
.scale li span:nth-child(2) { font-weight: 700; }
.scale li em { color: var(--muted); font-style: normal; font-size: .85rem; }
.scale li.is-ring { background: color-mix(in srgb, var(--c) 25%, transparent); }
.steps4 { display: grid; grid-template-columns: repeat(4, 1fr); gap: .8rem; margin: 1.5rem 0; }
.steps4 div { padding: 1rem 1.1rem; border-top: 2px solid var(--gold); background: var(--surface); border-radius: 0 0 12px 12px; }
.steps4 b { display: block; font-family: var(--serif); font-weight: 500; font-size: 1.1rem; margin-bottom: .2rem; }
.steps4 span { font-size: .9rem; color: var(--muted); }

/* ---------- Sesiones ---------- */
.protos { display: grid; grid-template-columns: repeat(3, 1fr); gap: 1.2rem; }
.proto { display: flex; flex-direction: column; padding: 1.8rem; background: var(--surface); border: 1px solid var(--line); border-radius: 24px; position: relative; overflow: hidden; transition: transform .4s var(--ease), border-color .3s; }
.proto:hover { transform: translateY(-4px); border-color: rgba(255,255,255,.25); }
.proto__time { font: 400 3.6rem/1 var(--serif); background: linear-gradient(135deg, var(--gold), var(--lilac)); -webkit-background-clip: text; background-clip: text; color: transparent; }
.proto__time small { font: 700 .8rem var(--sans); letter-spacing: .2em; margin-left: .3rem; -webkit-text-fill-color: var(--muted); }
.proto h3 { margin: .8rem 0 .4rem; font-size: 1.45rem; }
.proto p { color: var(--muted); font-size: .95rem; }
.timeline { display: flex; height: 8px; gap: 3px; margin: .6rem 0 1rem; }
.timeline i { border-radius: 4px; background: linear-gradient(90deg, var(--c5), var(--c7)); opacity: .85; }
.timeline i:nth-child(odd) { opacity: .5; }
.proto ol { list-style: none; padding: 0; margin: 0 0 1.5rem; font-size: .9rem; }
.proto ol li { display: grid; grid-template-columns: 3rem 1fr; gap: .5rem; padding: .45rem 0; border-bottom: 1px solid var(--line); }
.proto ol li b { color: var(--gold); font-variant-numeric: tabular-nums; }
.proto .btn { margin-top: auto; }
.dl { margin: 0; }
.dl div { padding: .7rem 0; border-bottom: 1px solid var(--line); display: grid; grid-template-columns: 8.5rem 1fr; gap: 1rem; }
.dl dt { font: 700 .72rem var(--sans); letter-spacing: .16em; text-transform: uppercase; color: var(--gold); padding-top: .2rem; }
.dl dd { margin: 0; font-size: .96rem; }
.dl--big div { grid-template-columns: 10rem 1fr; padding: 1rem 0; }
.dl--big dt { font: 500 1.25rem var(--serif); letter-spacing: 0; text-transform: none; color: var(--text); }
.abcd { display: grid; grid-template-columns: repeat(4, 1fr); gap: .9rem; }
.abcd article { padding: 1.3rem; border-radius: 16px; background: var(--surface); border: 1px solid var(--line); }
.abcd b.l { display: grid; place-items: center; width: 34px; height: 34px; border-radius: 50%; background: var(--gold); color: var(--bg); font: 700 .9rem var(--sans); margin-bottom: .8rem; }
.abcd h4 { margin: 0 0 .4rem; font-size: .95rem; }
.abcd p { margin: 0; font-size: .92rem; color: var(--text-2); }

/* ---------- Pestañas ---------- */
.tabs__list { display: flex; gap: .4rem; overflow-x: auto; padding-bottom: .6rem; border-bottom: 1px solid var(--line); scrollbar-width: none; }
.tabs__list::-webkit-scrollbar { display: none; }
.tabs__list [role=tab] { flex: none; appearance: none; background: none; border: 0; color: var(--muted); font: 700 .9rem var(--sans); letter-spacing: .05em; padding: .8rem 1.2rem; border-radius: 999px; cursor: pointer; transition: all .25s; }
.tabs__list [role=tab]:hover { color: var(--strong); background: var(--surface); }
.tabs__list [role=tab][aria-selected="true"] { color: var(--bg); background: var(--gold); }
.tabs__panel { padding: 2rem 0 0; animation: fadeUp .5s var(--ease); }
.tabs__panel > h3:first-child { margin-top: 0; }
.tabs__panel > h3 { margin-top: 2.4rem; }

.lab { margin: 1.6rem 0; padding: 1.4rem; background: radial-gradient(90% 120% at 50% 0%, rgba(63,176,255,.12), transparent), var(--inset); border: 1px solid var(--line); border-radius: 20px; }
.lab__head { display: flex; justify-content: space-between; align-items: center; }
.lab__head h4 { margin: 0; }
#waveCanvas { width: 100%; height: 150px; margin: .8rem 0; border-radius: 12px; background: var(--inset-2); }
.lab__ctrl { display: grid; grid-template-columns: 1fr auto auto; gap: 1.2rem; align-items: end; }
.lab__note { margin: 0; font: 500 1.4rem var(--serif); color: var(--gold); white-space: nowrap; }
.lab__compare { margin-top: 1.2rem; padding-top: 1.2rem; border-top: 1px dashed var(--line); }
.lab__compare p { font-size: .95rem; color: var(--text-2); margin: 0; }

.method, .steps { list-style: none; padding: 0; margin: 1rem 0; display: grid; gap: .7rem; counter-reset: st; }
.method { grid-template-columns: repeat(3, 1fr); }
.steps { grid-template-columns: repeat(2, 1fr); }
.steps--num { grid-template-columns: 1fr; }
.method li, .steps li { counter-increment: st; padding: 1.1rem 1.3rem 1.1rem 3.6rem; position: relative; background: var(--surface); border: 1px solid var(--line); border-radius: 14px; }
.method li::before, .steps li::before { content: counter(st, decimal-leading-zero); position: absolute; left: 1.1rem; top: 1.1rem; font: 700 .85rem var(--sans); letter-spacing: .1em; color: var(--gold); }
.method b, .steps b { display: block; font-family: var(--serif); font-weight: 500; font-size: 1.1rem; margin-bottom: .2rem; }
.method span, .steps span { font-size: .93rem; color: var(--text-2); }
.rules { padding-left: 1.3rem; } .rules li { margin: .3rem 0; }

.anat { display: grid; grid-template-columns: 1.1fr 1fr; gap: 1.5rem; align-items: center; margin: 1.2rem 0; }
.anat__img { position: relative; }
.anat__img img { width: 100%; height: auto; border-radius: 16px; }
.anat__tag { position: absolute; transform: translate(-50%, -50%); font: 700 .66rem var(--sans); letter-spacing: .22em; text-transform: uppercase; padding: .35em .8em; background: var(--glass); border: 1px solid var(--gold); color: var(--gold); border-radius: 999px; backdrop-filter: blur(4px); }

.solf { list-style: none; padding: 0; margin: 1.4rem 0; display: grid; gap: .5rem; }
.solf li { display: grid; grid-template-columns: 5.5rem 1fr auto; gap: 1.2rem; align-items: center; padding: .9rem 1.2rem; background: var(--surface); border: 1px solid var(--line); border-left: 3px solid var(--c, var(--lilac)); border-radius: 12px; }
.solf__hz { font: 500 1.5rem var(--serif); }
.solf__hz small { font: 700 .65rem var(--sans); letter-spacing: .15em; color: var(--muted); margin-left: .2rem; }
.solf b { display: block; font-weight: 700; }
.solf em { display: block; font-style: normal; font-size: .88rem; color: var(--muted); }
.solf li.warn em { color: var(--warn); }
.nm { list-style: none; padding: 0; margin: 1rem 0; display: grid; grid-template-columns: repeat(7, 1fr); gap: .5rem; }
.nm li { padding: .9rem .6rem; text-align: center; border-radius: 12px; background: color-mix(in srgb, var(--c) 18%, transparent); border: 1px solid color-mix(in srgb, var(--c) 50%, transparent); }
.nm b { display: block; font-family: var(--serif); font-weight: 500; }
.nm span { font-size: .78rem; color: var(--text-2); }

.tablewrap { overflow-x: auto; border: 1px solid var(--line); border-radius: 16px; margin: 1.2rem 0; }
.matrix { border-collapse: collapse; width: 100%; min-width: 980px; font-size: .9rem; }
.matrix th, .matrix td { padding: .8rem .9rem; text-align: left; border-bottom: 1px solid var(--line); vertical-align: top; }
.matrix thead th { font: 700 .66rem var(--sans); letter-spacing: .16em; text-transform: uppercase; color: var(--muted); background: var(--inset); position: sticky; top: 0; white-space: nowrap; }
.matrix thead th.m::before, .matrix thead th.s::before { content: ""; display: inline-block; width: 7px; height: 7px; border-radius: 50%; margin-right: .4rem; }
.matrix thead th.m::before { background: var(--mint); } .matrix thead th.s::before { background: var(--lilac); }
.matrix tbody th { white-space: nowrap; font-weight: 700; border-left: 3px solid var(--c); position: sticky; left: 0; background: var(--bg-2); }
.matrix tbody tr:hover td, .matrix tbody tr:hover th { background: var(--surface-2); }
.matrix td.num { font-variant-numeric: tabular-nums; white-space: nowrap; }

.res { display: grid; grid-template-columns: repeat(auto-fill, minmax(250px, 1fr)); gap: .9rem; margin: 1.4rem 0; }
.res article { padding: 1.2rem 1.3rem; border-radius: 16px; background: var(--surface); border: 1px solid var(--line); border-top: 3px solid var(--c); }
.res h4 { margin: 0 0 .6rem; color: color-mix(in srgb, var(--c) var(--cmix, 100%), var(--cmixto, #000)); }
.res small { display: block; font: 700 .62rem var(--sans); letter-spacing: .18em; text-transform: uppercase; color: var(--muted); margin-top: .6rem; }
.res p { margin: .15rem 0 0; font-size: .95rem; }

/* ---------- Diario ---------- */
.diary { display: grid; grid-template-columns: 1fr 1fr; gap: 1.6rem; align-items: start; }
.form { display: grid; gap: 1rem; }
.form h3 { margin: 0; }
.form__row { display: grid; grid-template-columns: 1fr 1fr; gap: 1rem; }
.diary__head { display: flex; justify-content: space-between; align-items: center; margin-bottom: .6rem; }
.diary__head h3 { margin: 0; }
.entries { list-style: none; padding: 0; margin: 0; display: grid; gap: .8rem; }
.entry { background: var(--surface); border: 1px solid var(--line); border-radius: 16px; padding: 1.1rem 1.3rem; position: relative; }
.entry time { font: 700 .72rem var(--sans); letter-spacing: .16em; text-transform: uppercase; color: var(--gold); }
.entry h4 { margin: .3rem 0; font-family: var(--serif); font-weight: 500; font-size: 1.1rem; }
.entry p { margin: .2rem 0; font-size: .92rem; color: var(--text-2); }
.entry .meta { font-size: .8rem; color: var(--muted); }
.entry button { position: absolute; top: .7rem; right: .8rem; background: none; border: 0; color: var(--muted); cursor: pointer; font-size: 1rem; width: 32px; height: 32px; border-radius: 50%; }
.entry button:hover { background: var(--surface-2); color: var(--strong); }

.refs { padding-left: 1.5rem; display: grid; gap: .9rem; }
.refs li { padding-left: .4rem; scroll-margin-top: 100px; }
.refs li:target { background: rgba(242,179,94,.12); border-radius: 8px; }
.refs b { font-size: .75rem; letter-spacing: .14em; text-transform: uppercase; display: block; }
.refs a { word-break: break-all; font-size: .88rem; display: inline-block; padding: .3rem 0; }
.refs li::marker { color: var(--gold); font-weight: 700; }

.footer { padding: 3rem 0 6rem; text-align: center; border-top: 1px solid var(--line); }
.footer p { margin: 0 0 .6rem; }

/* ---------- Dock de volumen ---------- */
.dock { position: fixed; right: 1.1rem; bottom: 1.1rem; z-index: 70; display: flex; flex-direction: column; align-items: flex-end; gap: .6rem; }
.dock__btn { width: 52px; height: 52px; border-radius: 50%; border: 1px solid var(--line); background: var(--glass); backdrop-filter: blur(10px); color: var(--text); display: grid; place-items: center; cursor: pointer; box-shadow: 0 10px 30px -8px #000; transition: transform .25s var(--ease), background .25s; }
.dock__btn:hover { transform: scale(1.08); background: var(--bg-3); }
.dock__pop { width: 240px; padding: 1rem 1.1rem 1.1rem; background: var(--glass-2); backdrop-filter: blur(14px); border: 1px solid var(--line); border-radius: 16px; display: grid; gap: .8rem; box-shadow: 0 20px 50px -10px #000; }

/* ---------- Reproductor de sesión ---------- */
body.is-playing { overflow: hidden; }
.player { position: fixed; inset: 0; z-index: 60; display: flex; overflow-y: auto; padding: 4.5rem 1.2rem 2rem; background: var(--bg); animation: fadeIn .6s ease; }
@keyframes fadeIn { from { opacity: 0; } to { opacity: 1; } }
.player__bg { position: fixed; inset: 0; background: radial-gradient(80% 60% at 50% 38%, color-mix(in srgb, var(--pc, #6670ff) 32%, transparent), transparent 70%), radial-gradient(120% 80% at 50% 120%, rgba(182,107,255,.25), transparent 60%); transition: background 2.5s ease; pointer-events: none; }
.player__close { position: fixed; top: 1rem; right: 1rem; z-index: 3; width: 48px; height: 48px; border-radius: 50%; border: 1px solid var(--line); background: var(--surface); color: var(--text); font-size: 1rem; cursor: pointer; }
.player__close:hover { background: var(--surface-2); }
.player__stage { position: relative; z-index: 2; width: min(620px, 100%); text-align: center; margin: auto; }
.player__stage h2 { font-size: clamp(1.6rem, 4.5vw, 2.5rem); margin-bottom: 1rem; }
.orb { position: relative; width: min(280px, 62vw); aspect-ratio: 1; margin: 0 auto 1.2rem; display: grid; place-items: center; }
.orb svg { position: absolute; inset: 0; width: 100%; height: 100%; }
.orb__track { fill: none; stroke: rgba(255,255,255,.1); stroke-width: 2; }
.orb__prog { fill: none; stroke: var(--pc, var(--lilac)); stroke-width: 3; stroke-linecap: round; stroke-dasharray: 578.05; stroke-dashoffset: 578.05; filter: drop-shadow(0 0 6px var(--pc, var(--lilac))); transition: stroke .5s; }
.orb img { width: 92%; max-width: none; animation: breathe 10s ease-in-out infinite; transition: filter .3s; }
.orb.pulse img { animation: none; transform: scale(1.12); filter: brightness(1.5) drop-shadow(0 0 30px var(--pc)); }
.orb img { transition: transform 1.6s var(--ease), filter 1.6s; }
@keyframes breathe { 0%,100% { transform: scale(.96); } 40% { transform: scale(1.05); } }
.player__text { font: italic 1.2rem/1.6 var(--serif); min-height: 5.8em; max-width: 46ch; margin: 0 auto .6rem; color: var(--text); }
.player__time { color: var(--muted); font-variant-numeric: tabular-nums; margin-bottom: 1rem; }
.player__time i { margin: 0 .5rem; }
.player__steps { list-style: none; padding: 0; margin: 0 auto 1.4rem; display: flex; gap: 5px; justify-content: center; flex-wrap: wrap; max-width: 520px; }
.player__steps li { height: 6px; border-radius: 3px; background: rgba(255,255,255,.14); flex: var(--w, 1) 1 0; min-width: 14px; transition: background .5s; }
.player__steps li.done { background: rgba(255,255,255,.5); }
.player__steps li.now { background: var(--pc, var(--lilac)); box-shadow: 0 0 10px var(--pc, var(--lilac)); }
.player__ctrl { display: flex; gap: .7rem; justify-content: center; flex-wrap: wrap; }
.player__opts { display: flex; gap: 1.6rem; justify-content: center; align-items: center; flex-wrap: wrap; margin-top: 1.4rem; }
.player__opts .field input { width: 150px; }
.player__thanks { font: italic 1.3rem var(--serif); margin: 1.6rem 0 .4rem; }

/* ---------- Responsive ---------- */
@media (max-width: 980px) {
  .explorer, .integration__grid, .diary { grid-template-columns: 1fr; }
  .map { position: static; max-width: 380px; margin-inline: auto; }
  .protos { grid-template-columns: 1fr; }
  .cards4 { grid-template-columns: repeat(2, 1fr); }
  .abcd { grid-template-columns: repeat(2, 1fr); }
  .steps4 { grid-template-columns: repeat(2, 1fr); }
  .anat { grid-template-columns: 1fr; }
  .nm { grid-template-columns: repeat(4, 1fr); }
}
@media (max-width: 760px) {
  body { font-size: 1rem; }
  .nav__burger { display: block; }
  .nav__menu { position: fixed; top: 66px; left: 0; right: 0; flex-direction: column; gap: 0; background: var(--bg); padding: .5rem 1.5rem 1.2rem; border-bottom: 1px solid var(--line); transform: translateY(-120%); transition: transform .4s var(--ease); }
  .nav__menu.is-open { transform: none; }
  .nav__menu a { padding: .9rem 0; border-bottom: 1px solid var(--line); font-size: 1rem; }
  .levels__grid, .notes, .two, .room-cards, .duo, .method, .steps { grid-template-columns: 1fr; }
  .facts { grid-template-columns: repeat(2, 1fr); }
  .detail__head { grid-template-columns: 1fr; }
  .detail__bowl { max-width: 220px; order: -1; }
  .bowls { grid-template-columns: repeat(4, 1fr); row-gap: 1rem; }
  .bowl { transform: none; }
  .lab__ctrl { grid-template-columns: 1fr; align-items: start; }
  .solf li { grid-template-columns: 4.2rem 1fr; } .solf li .btn { grid-column: 1 / -1; }
  .dl div, .dl--big div { grid-template-columns: 1fr; gap: .2rem; }
  .form__row { grid-template-columns: 1fr; }
  .nm { grid-template-columns: repeat(2, 1fr); }
  .scale li { grid-template-columns: 1.2rem 1fr auto; } .scale li em { display: none; }
  .hero { padding-top: 6rem; }
}
@media (max-width: 440px) { .bowls { grid-template-columns: repeat(3, 1fr); } .cards4, .abcd, .steps4 { grid-template-columns: 1fr; } }

@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  *, *::before, *::after { animation-duration: .01ms !important; animation-iteration-count: 1 !important; transition-duration: .01ms !important; }
  .reveal { opacity: 1; transform: none; }
}

/* Desvanecido radial de seguridad en las ilustraciones de cuencos (evita bordes rectangulares) */
.hero__bowl img, .anat__img img {
  -webkit-mask-image: radial-gradient(ellipse 50% 50% at 50% 50%, #000 76%, transparent 100%);
          mask-image: radial-gradient(ellipse 50% 50% at 50% 50%, #000 76%, transparent 100%);
}

/* Explorador del tono grave */
.presets { display: flex; flex-wrap: wrap; gap: .5rem; margin: 0 0 1.1rem; }
.drows { display: grid; gap: .3rem; margin-bottom: .6rem; }
.drow { display: grid; grid-template-columns: 11rem 1fr 5.5rem; gap: 1rem; align-items: center; }
.drow label { font-size: .88rem; color: var(--muted); }
.drow input[type=range] { width: 100%; accent-color: var(--gold); }
.drow output { text-align: right; color: var(--gold); font-weight: 700; font-size: .9rem; font-variant-numeric: tabular-nums; }
.lab + .lab { margin-top: 1.2rem; }
@media (max-width: 760px) {
  .switches { grid-template-columns: 1fr; }
  .drow { grid-template-columns: 1fr 4.6rem; gap: .2rem .8rem; }
  .drow label { grid-column: 1 / -1; }
}

/* Palo de lluvia */
.card--wide { grid-column: 1 / -1; }
.stickbox { display: grid; grid-template-columns: 1fr 1.1fr; gap: 2rem; align-items: center; }
.stickbox h3 { margin-top: 0; }
.stick { --tilt: -14deg; appearance: none; background: none; border: 0; padding: 2.2rem 0; cursor: pointer; display: grid; place-items: center; -webkit-tap-highlight-color: transparent; }
.stick__body { position: relative; display: block; width: min(500px, 100%); aspect-ratio: 1200 / 166; border-radius: 10px; overflow: hidden;
  transform: rotate(var(--tilt)); transition: transform 1.1s var(--ease);
  filter: drop-shadow(0 18px 14px rgba(40,25,10,.38)); }
.stick__body img { display: block; width: 100%; height: 100%; user-select: none; pointer-events: none; }
.stick__flow { position: absolute; inset: 0; opacity: 0; background: linear-gradient(90deg, transparent, rgba(255,244,214,.6) 50%, transparent) no-repeat; background-size: 38% 100%; mix-blend-mode: soft-light; }
.stick:hover .stick__body { filter: brightness(1.08); }
.stick.is-pour[data-dir="r"] .stick__flow { animation: flowR var(--d, 9s) cubic-bezier(.3,.1,.6,1) forwards; }
.stick.is-pour[data-dir="l"] .stick__flow { animation: flowL var(--d, 9s) cubic-bezier(.3,.1,.6,1) forwards; }
@keyframes flowR { 0% { opacity: 0; background-position: -45% 0; } 6% { opacity: 1; } 85% { opacity: .6; } 100% { opacity: 0; background-position: 145% 0; } }
@keyframes flowL { 0% { opacity: 0; background-position: 145% 0; } 6% { opacity: 1; } 85% { opacity: .6; } 100% { opacity: 0; background-position: -45% 0; } }
@media (max-width: 760px) { .stickbox { grid-template-columns: 1fr; gap: 0; } }

.stick__eco input { width: 130px; accent-color: var(--gold); }
.stick__eco output { color: var(--gold); font-weight: 700; min-width: 3ch; letter-spacing: 0; text-transform: none; }

/* =========================================================
   TEMAS DÍA / NOCHE
   La noche es la paleta base (en :root). El día la sustituye con data-theme="day".
   Las «islas» (.island) mantienen siempre la paleta de noche: Sala de calma y reproductor.
   ========================================================= */
:root { color-scheme: dark; }
:root[data-theme="day"] {
  color-scheme: light;
  --bg: #f6f2ea; --bg-2: #efe8da; --bg-3: #e6ddca;
  --surface: rgba(255,253,248,.74); --surface-2: rgba(255,253,248,.96);
  --line: rgba(23,37,42,.13); --line-strong: rgba(23,37,42,.32); --track: rgba(23,37,42,.16);
  --text: #17252a; --text-2: #33464b; --muted: #5c6a6e; --strong: #0b1417;
  --gold: #a64a0a; --lilac: #2a7590;
  --inset: rgba(23,37,42,.05); --inset-2: rgba(23,37,42,.07);
  --nav-bg: rgba(246,242,234,.8); --nav-bg-solid: rgba(246,242,234,.98);
  --glass: rgba(255,253,248,.92); --glass-2: rgba(255,253,248,.98);
  --mint: #0f766e; --warn: #a64a0a; --ring: rgba(42,117,144,.2);
  --cmix: 45%; --cmixto: #16191c;
  --hero-grad: radial-gradient(70% 60% at 85% 0%, rgba(255,214,150,.8), transparent 60%), radial-gradient(60% 55% at 0% 25%, rgba(196,181,253,.5), transparent 65%), linear-gradient(180deg, #fdf0d8 0%, #f6f2ea 78%);
  --panel: rgba(255,253,248,.8);
  --veil: rgba(246,242,234,.3);
  --veil-hero: linear-gradient(180deg, rgba(246,242,234,.45), rgba(246,242,234,.05) 50%, var(--bg) 100%);
}
:root[data-theme="day"] .island {
  --bg: #0e1130; --bg-2: #141842; --bg-3: #1b2057;
  --surface: rgba(255,255,255,.045); --surface-2: rgba(255,255,255,.075);
  --line: rgba(255,255,255,.11); --line-strong: rgba(255,255,255,.35); --track: rgba(255,255,255,.14);
  --text: #ece9f8; --text-2: #d9d5ee; --muted: #aeabcb; --strong: #fff;
  --gold: #f2b35e; --lilac: #cba8f6;
  --inset: rgba(0,0,0,.25); --inset-2: rgba(0,0,0,.3);
  --glass: rgba(27,32,87,.85); --glass-2: rgba(20,24,66,.95);
  --mint: #7ee2c8; --warn: #ffb88a; --ring: rgba(203,168,246,.14);
  --cmix: 86%; --cmixto: #fff;
}
.island { color: var(--text); }

/* ---------- Paisajes (imágenes generadas aparte; si faltan, se ven los degradados) ---------- */
:root {
  --s-inicio: url(../assets/paisajes/inicio-noche.jpg);
  --s-centros: url(../assets/paisajes/centros-noche.jpg);
  --s-sesiones: url(../assets/paisajes/sesiones-noche.jpg);
  --s-aprender: url(../assets/paisajes/aprender-noche.jpg);
  --s-cierre: url(../assets/paisajes/cierre-noche.jpg);
  --s-sala: url(../assets/paisajes/sala.jpg);
}
:root[data-theme="day"] {
  --s-inicio: url(../assets/paisajes/inicio-dia.jpg);
  --s-centros: url(../assets/paisajes/centros-dia.jpg);
  --s-sesiones: url(../assets/paisajes/sesiones-dia.jpg);
  --s-aprender: url(../assets/paisajes/aprender-dia.jpg);
  --s-cierre: url(../assets/paisajes/cierre-dia.jpg);
}
@media (max-width: 760px) {
  :root {
    --s-inicio: url(../assets/paisajes/inicio-noche-m.jpg);
    --s-centros: url(../assets/paisajes/centros-noche-m.jpg);
    --s-sesiones: url(../assets/paisajes/sesiones-noche-m.jpg);
    --s-aprender: url(../assets/paisajes/aprender-noche-m.jpg);
    --s-cierre: url(../assets/paisajes/cierre-noche-m.jpg);
    --s-sala: url(../assets/paisajes/sala-m.jpg);
  }
  :root[data-theme="day"] {
    --s-inicio: url(../assets/paisajes/inicio-dia-m.jpg);
    --s-centros: url(../assets/paisajes/centros-dia-m.jpg);
    --s-sesiones: url(../assets/paisajes/sesiones-dia-m.jpg);
    --s-aprender: url(../assets/paisajes/aprender-dia-m.jpg);
    --s-cierre: url(../assets/paisajes/cierre-dia-m.jpg);
  }
}
.hero { --scene-img: var(--s-inicio); }
#chakras { --scene-img: var(--s-centros); }
#sesiones { --scene-img: var(--s-sesiones); }
#aprender { --scene-img: var(--s-aprender); }
#diario, #fuentes { --scene-img: var(--s-cierre); }

/* Sala de calma: siempre atardecer, para que los cuencos brillen en cualquier tema */
.room {
  background-color: #0e1130;
  background-image: var(--s-sala, none), radial-gradient(90% 120% at 50% 0%, rgba(102,112,255,.25), transparent), linear-gradient(180deg, #1a1f55, #0e1130);
  background-size: cover, auto, auto; background-position: center;
  border-color: rgba(255,255,255,.11);
}

/* Ajustes puntuales del modo día */
:root[data-theme="day"] .btn--primary { box-shadow: 0 8px 24px -10px rgba(180,82,14,.55); }
:root[data-theme="day"] .detail__bowl, :root[data-theme="day"] .anat__img { background: radial-gradient(closest-side, #232a72, #0e1130 92%); border-radius: 28px; padding: .6rem; }
:root[data-theme="day"] .hero__bowl img { filter: drop-shadow(0 24px 40px rgba(60,40,120,.35)); }
:root[data-theme="day"] .rainbow--thin { opacity: .85; }
.ctext { color: color-mix(in srgb, var(--c) var(--cmix, 100%), var(--cmixto, #000)); }

/* Interruptor día / noche */
.nav__in { justify-content: flex-start; }
.nav__menu { margin-left: auto; }
.theme-toggle { order: 2; margin-left: 1.2rem; width: 42px; height: 42px; border-radius: 50%; border: 1px solid var(--line); background: var(--surface); color: var(--text); cursor: pointer; display: grid; place-items: center; transition: background .3s, transform .4s var(--ease); }
.theme-toggle:hover { transform: rotate(20deg); background: var(--surface-2); }
.theme-toggle svg { width: 20px; height: 20px; }
.theme-toggle .i-moon { display: none; }
:root[data-theme="day"] .theme-toggle .i-sun { display: none; }
:root[data-theme="day"] .theme-toggle .i-moon { display: block; }
.nav__burger { order: 3; }
@media (max-width: 760px) { .theme-toggle { margin-left: auto; } }

@media (max-width: 760px) { .hero { background-position: center; } }

/* Paneles de cristal: mantienen legible el texto sobre los paisajes */
.sec-head:not(.sec-head--sm), .detail, .integration, .tabs, .refs, .diary > div:last-child {
  background: var(--panel); -webkit-backdrop-filter: blur(14px); backdrop-filter: blur(14px);
  border: 1px solid var(--line); border-radius: 26px; padding: clamp(1.2rem, 3vw, 2rem);
}
.sec-head:not(.sec-head--sm) { width: fit-content; max-width: 100%; }
.refs { padding-left: clamp(2.6rem, 5vw, 3.4rem); }

/* Cada sección enfoca una parte distinta del mismo valle (zoom hacia un punto: --zx / --zy) */
#sesiones { --zoom: 1.25; --zx: 40%; --zy: 80%; }       /* el lago y la pradera */
#aprender { --zoom: 1.5;  --zx: 55%; --zy: 25%; }       /* montañas y cielo */
#diario, #fuentes { --zoom: 1.4; --zx: 78%; --zy: 62%; } /* el sol y su reflejo */
@media (max-width: 760px) { #sesiones, #aprender, #diario, #fuentes { --zoom: 1; } }  /* en móvil ya se recorta cada imagen con su propio foco */

.section .note { background-color: var(--panel); -webkit-backdrop-filter: blur(14px); backdrop-filter: blur(14px); }

/* Fundido suave entre el último paisaje y el pie de página */
.footer { position: relative; }
.footer::before { content: ""; position: absolute; left: 0; right: 0; top: -90px; height: 90px; background: linear-gradient(to bottom, transparent, var(--bg)); pointer-events: none; }

/* Pantallas táctiles: zonas de pulsación cómodas (44 px) */
@media (pointer: coarse) {
  .btn, .chip, .seg__b, .tabs__list [role=tab] { min-height: 44px; }
  .refs a { padding: .55rem 0; }
}