/* Estilos de pantallas (portados de los mockups) */

a.nav-item { text-decoration: none; color: inherit; }
.bottom-nav a { text-decoration: none; }

/* Meditación */
.med {
    background:
        radial-gradient(90% 60% at 50% 34%, rgba(212,168,83,0.10) 0%, transparent 60%),
        radial-gradient(120% 80% at 50% -10%, #0E1013 0%, #08090B 60%);
    padding-bottom: 0; justify-content: space-between;
}
.med-top { display: flex; align-items: center; justify-content: space-between; padding: 22px 20px 0; }
.icon-btn { width: 42px; height: 42px; border-radius: var(--r-full); display: grid; place-items: center;
    border: 1px solid var(--hairline); background: var(--surface); color: var(--text-2); cursor: pointer; }
.view { flex: 1; display: none; flex-direction: column; justify-content: space-between; }
.view.on { display: flex; }
.prep { align-items: center; justify-content: center; text-align: center; padding: 0 40px; gap: 26px; }
.prep .pulse {
    width: 120px; height: 120px; border-radius: var(--r-full);
    background: radial-gradient(circle, var(--gold-soft), transparent 70%);
    display: grid; place-items: center; color: var(--gold);
    animation: mh-breathe 3.2s ease-in-out infinite;
}
@keyframes mh-breathe { 0%,100% { transform: scale(.9); opacity:.7; } 50% { transform: scale(1.1); opacity:1; } }
.prep h2 { font-family: var(--font-display); font-size: 24px; font-weight: 700; letter-spacing: -.02em; }
.prep p { color: var(--text-2); font-size: 16px; line-height: 1.55; max-width: 300px; }
.ring-wrap { display: grid; place-items: center; position: relative; }
.ring { transform: rotate(-90deg); filter: drop-shadow(0 0 20px var(--gold-glow)); }
.ring-center { position: absolute; inset: 0; display: grid; place-items: center; text-align: center; }
.time { font-family: var(--font-display); font-size: 60px; font-weight: 700; letter-spacing: -.02em; font-variant-numeric: tabular-nums; }
.time-sub { color: var(--gold); font-size: 12px; letter-spacing: .16em; text-transform: uppercase; font-weight: 600; margin-top: 2px; }
.controls { display: flex; align-items: center; justify-content: center; gap: 30px; padding: 8px 0 46px; }
.play {
    width: 84px; height: 84px; border-radius: var(--r-full);
    background: linear-gradient(180deg, var(--gold-bright), var(--gold));
    color: var(--text-on-gold); display: grid; place-items: center;
    box-shadow: var(--shadow-gold); border: none; cursor: pointer;
}
.play .icon { width: 34px; height: 34px; fill: currentColor; stroke: none; }
.ctrl { width: 52px; height: 52px; border-radius: var(--r-full); display: grid; place-items: center;
    border: 1px solid var(--hairline); background: var(--surface); color: var(--text); cursor: pointer; }
.done-view { align-items: center; justify-content: center; text-align: center; padding: 0 40px; gap: 20px; }
.done-badge { width: 96px; height: 96px; border-radius: var(--r-full); display: grid; place-items: center;
    background: linear-gradient(180deg, var(--gold-bright), var(--gold-deep)); color: var(--text-on-gold); box-shadow: var(--shadow-gold); }
.done-view h2 { font-family: var(--font-display); font-size: 26px; font-weight: 700; }
.done-view .xp-won { color: var(--gold-bright); font-family: var(--font-display); font-weight: 600; }
.guide-cue {
    min-height: 48px; margin: 0 28px 8px; padding: 12px 16px; text-align: center;
    color: var(--text-2); font-size: 15px; line-height: 1.45; opacity: 0;
    transition: opacity .35s ease; border-radius: var(--r);
    background: rgba(212,168,83,0.08); border: 1px solid transparent;
}
.guide-cue.on {
    opacity: 1; border-color: rgba(212,168,83,0.22); color: var(--gold-bright);
}

/* Lectura */
.read { padding-bottom: 0; }
.read-top { display:flex; align-items:center; justify-content:space-between; padding: 22px 20px 14px; position: sticky; top:0;
    background: linear-gradient(180deg, var(--bg) 70%, transparent); z-index: 10; }
.cover { margin: 8px 20px 0; padding: 22px; border-radius: var(--r-lg);
    background: linear-gradient(150deg, rgba(212,168,83,0.12), var(--surface));
    border: 1px solid rgba(212,168,83,0.22); }
.cover .day { font-family: var(--font-display); color: var(--gold); font-weight:600; font-size:12px; letter-spacing:.16em; text-transform:uppercase;}
.cover h2 { font-family: var(--font-display); font-size: 24px; font-weight:700; letter-spacing:-.02em; margin-top:8px; }
.cover .book { color: var(--text-2); font-size: 14px; margin-top: 6px; display:flex; align-items:center; gap:8px;}
.cover .meta { display:flex; gap:16px; margin-top:14px; color: var(--text-3); font-size:12.5px; }
.cover .meta span { display:inline-flex; align-items:center; gap:6px; }
.audio { margin: 22px 20px 0; display:flex; align-items:center; gap:14px;
    background: var(--surface); border:1px solid var(--hairline); border-radius: var(--r-full); padding: 10px 12px; }
.audio .pbtn { width: 44px; height:44px; flex:none; border-radius: var(--r-full); display:grid; place-items:center;
    background: var(--gold); color: var(--text-on-gold); border:none; box-shadow: var(--shadow-gold); cursor:pointer; }
.audio .pbtn .icon { fill: currentColor; stroke:none; width:22px; height:22px;}
.audio .wave { flex:1; height: 26px; display:flex; align-items:center; gap:3px; }
.audio .wave i { flex:1; background: var(--surface-3); border-radius:2px; height: 40%; font-style:normal; }
.audio .wave i.a { background: var(--gold); }
.audio .t { font-size:12px; color: var(--text-3); font-variant-numeric: tabular-nums; }
.article { padding: 30px 22px 20px; }
.article p { font-family: var(--font-read); font-size: 18px; line-height: 1.62; color: var(--text); margin-bottom: 20px; }
.article p.lead::first-letter { font-family: var(--font-display); font-size: 46px; float:left; line-height:.8; padding: 4px 10px 2px 0; color: var(--gold); }
.article .quote { border-left: 2px solid var(--gold); padding-left: 16px; color: var(--gold-bright); font-style: italic; }
.cta-bar { position: sticky; bottom: 0; padding: 14px 20px 24px;
    background: linear-gradient(0deg, var(--bg) 60%, transparent); }

/* Progreso */
.rank-card { margin: 12px 20px 0; padding: 22px; border-radius: var(--r-lg); text-align:center;
    background: radial-gradient(120% 100% at 50% 0%, rgba(212,168,83,0.12), var(--surface));
    border: 1px solid rgba(212,168,83,0.20); }
.rank-badge { width: 72px; height:72px; margin: 0 auto 14px; border-radius: var(--r-full); display:grid; place-items:center;
    background: linear-gradient(180deg, var(--gold-bright), var(--gold-deep)); color: var(--text-on-gold);
    box-shadow: var(--shadow-gold); }
.rank-card .rank-title { font-family: var(--font-display); font-size: 24px; font-weight:700; }
.rank-card .rank-x { color: var(--text-2); font-size: 13px; margin-top:4px; }
.rank-next { margin-top: 16px; }
.rank-next .lbl { display:flex; justify-content:space-between; font-size:12px; color:var(--text-3); margin-bottom:7px; }
.rank-next .lbl b { color: var(--gold); }
.stats { display:grid; grid-template-columns: repeat(3,1fr); gap: 10px; padding: 14px 20px 0; }
.stat { background: var(--surface); border:1px solid var(--hairline); border-radius: var(--r); padding: 15px 12px; text-align:center;}
.stat .n { font-family: var(--font-display); font-size: 22px; font-weight:700; color: var(--gold-bright); }
.stat .l { font-size: 11.5px; color: var(--text-3); margin-top:3px; }
.cal-card { margin: 16px 20px 0; padding: 18px; background: var(--surface); border:1px solid var(--hairline); border-radius: var(--r-lg); }
.cal-head { display:flex; align-items:center; justify-content:space-between; margin-bottom:14px; }
.cal-head .m { font-family: var(--font-display); font-weight:600; font-size:15px; }
.cal-head .nav { display:flex; gap:8px; color: var(--text-3); }
.cal-head .nav button { background:none; border:none; color:inherit; cursor:pointer; padding:4px; }
.dow { display:grid; grid-template-columns: repeat(7,1fr); gap:7px; margin-bottom:7px; }
.dow span { text-align:center; font-size:10.5px; color: var(--text-3); font-weight:600; }
.cal-grid { display:grid; grid-template-columns: repeat(7,1fr); gap:7px; }
.cal-grid i { aspect-ratio:1; border-radius: 7px; background: var(--surface-3); display:grid; place-items:center;
    font-size:11px; color: var(--text-3); font-variant-numeric: tabular-nums; font-style: normal; cursor: pointer; }
.cal-grid i.empty { cursor: default; opacity:.35; }
.lv1 { background: rgba(212,168,83,0.22) !important; color: var(--gold-bright) !important; }
.lv2 { background: rgba(212,168,83,0.45) !important; color: #1a1608 !important; }
.lv3 { background: linear-gradient(180deg,var(--gold-bright),var(--gold)) !important; color: var(--text-on-gold) !important; box-shadow:0 0 12px var(--gold-glow); font-weight:700;}
.cal-legend { display:flex; align-items:center; gap:8px; margin-top:14px; font-size:11px; color:var(--text-3); }
.cal-legend i { width:13px; height:13px; border-radius:4px; display:inline-block; font-style:normal; }
.hint { text-align:center; font-size:12px; color:var(--text-3); padding: 12px 20px 0; }

/* Perfil */
.id-card { display:flex; align-items:center; gap:15px; margin: 8px 20px 0; padding: 18px; background: var(--surface); border:1px solid var(--hairline); border-radius: var(--r-lg); }
.id-card .av { width:56px; height:56px; flex:none; border-radius: var(--r-full); display:grid; place-items:center;
    background: var(--surface-3); color: var(--gold); border:1px solid var(--hairline); }
.id-card .nm { font-family: var(--font-display); font-weight:600; font-size:18px; }
.id-card .rk { font-size:13px; color: var(--text-2); margin-top:2px; display:inline-flex; align-items:center; gap:6px; }
.seg-wrap { padding: 4px 16px 0; }
.seg-wrap .seg-title { font-size:14px; font-weight:14.5px; font-weight:500; padding: 6px 4px 10px; }

/* Onboarding */
.ob { padding: 0 0 24px; }
.ob-top { display:flex; align-items:center; gap:14px; padding: 20px 20px 8px; }
.ob-back { color: var(--text-3); cursor:pointer; }
.dots { display:flex; gap:7px; flex:1; }
.dots i { height:4px; flex:1; border-radius:2px; background: var(--surface-3); transition: background .3s; font-style:normal; }
.dots i.on { background: linear-gradient(90deg,var(--gold),var(--gold-bright)); }
.ob-body { padding: 22px 24px 0; flex:1; }
.step { display:none; animation: fade .35s ease; }
.step.on { display:block; }
.step h2 { font-family: var(--font-display); font-size: 27px; font-weight:700; letter-spacing:-.02em; line-height:1.2; }
.step .sub { color: var(--text-2); font-size: 15px; margin-top: 10px; }
.opts { display:flex; flex-direction:column; gap:12px; margin-top: 26px; }
.opt { display:flex; align-items:center; gap:15px; padding: 16px 18px; border-radius: var(--r);
    background: var(--surface); border:1px solid var(--hairline); cursor:pointer; transition: all .15s; }
.opt .oi { width:46px; height:46px; border-radius:13px; flex:none; display:grid; place-items:center;
    background: var(--surface-3); color: var(--text-2); border:1px solid var(--hairline); }
.opt .ot { font-weight:600; font-size:16px; }
.opt .od { font-size:13px; color:var(--text-2); margin-top:2px; }
.opt.on { border-color: var(--gold); background: var(--gold-soft); }
.opt.on .oi { background: var(--gold); color: var(--text-on-gold); border-color: var(--gold); }
.opt .rc { margin-left:auto; width:24px; height:24px; border-radius: var(--r-full); border:2px solid var(--hairline-2); flex:none; display:grid; place-items:center; color:transparent; }
.opt.on .rc { background: var(--gold); border-color: var(--gold); color: var(--text-on-gold); }
.voices { display:grid; grid-template-columns:1fr 1fr; gap:12px; margin-top: 26px; }
.voice { padding: 20px 16px; border-radius: var(--r); background: var(--surface); border:1px solid var(--hairline); text-align:center; cursor:pointer; }
.voice.on { border-color: var(--gold); background: var(--gold-soft); }
.voice .vp { width:56px; height:56px; margin: 0 auto 12px; border-radius: var(--r-full); display:grid; place-items:center;
    background: var(--surface-3); color: var(--gold); border:1px solid var(--hairline); }
.voice.on .vp { background: var(--gold); color: var(--text-on-gold); }
.voice .vt { font-weight:600; }
.tsel { display:flex; gap:10px; margin-top:26px; }
.tsel .t { flex:1; padding: 15px 10px; border-radius: var(--r); background: var(--surface); border:1px solid var(--hairline);
    text-align:center; cursor:pointer; }
.tsel .t.on { border-color: var(--gold); background: var(--gold-soft); color: var(--gold-bright); }
.tsel .t .tl { font-size:13px; font-weight:600; }
.tsel .t .th { font-size:11px; color: var(--text-3); margin-top:2px; }
.price-card { margin-top: 22px; padding: 20px; border-radius: var(--r-lg);
    background: radial-gradient(120% 100% at 50% 0%, rgba(212,168,83,0.14), var(--surface)); border:1px solid rgba(212,168,83,0.28); }
.price-card .free { color: var(--gold-bright); font-family: var(--font-display); font-weight:700; font-size:18px; }
.price-card .p { color: var(--text-2); font-size:14px; margin-top:6px; }
.perks { margin-top:16px; display:flex; flex-direction:column; gap:10px; }
.perk { display:flex; align-items:center; gap:10px; font-size:14px; }
.perk .icon-sm { color: var(--gold); flex:none; }
.sign { display:flex; flex-direction:column; gap:10px; margin-top:18px; }
.sbtn { display:flex; align-items:center; justify-content:center; gap:10px; padding:14px; border-radius: var(--r-full);
    background: var(--surface-2); border:1px solid var(--hairline-2); color: var(--text); font-weight:600; font-size:14.5px; cursor:pointer; }
.ob-footer { padding: 16px 24px 26px; }
.ob-footer .tiny { text-align:center; margin-top:12px; }

/* Paywall */
.frozen { filter: grayscale(0.5) brightness(0.5); pointer-events: none; }
.lock-tag { position: fixed; top: 16px; left: 50%; transform: translateX(-50%); z-index: 60;
    display:inline-flex; align-items:center; gap:8px; padding: 9px 16px; border-radius: var(--r-full);
    background: rgba(20,21,25,0.9); backdrop-filter: blur(12px); border:1px solid var(--hairline-2);
    color: var(--text-2); font-size: 13px; font-weight:600; }
.pay-scrim { position: fixed; inset:0; background: linear-gradient(0deg, rgba(8,9,11,0.96) 30%, rgba(8,9,11,0.55)); z-index: 50; display:flex; align-items:flex-end; }
.pay-sheet { width:100%; max-width:440px; margin: 0 auto; background: var(--surface);
    border-top-left-radius: var(--r-xl); border-top-right-radius: var(--r-xl);
    border-top: 1px solid rgba(212,168,83,0.25); padding: 10px 22px 28px; box-shadow: var(--shadow); }
.pay-sheet .lock-badge { width:64px; height:64px; margin:0 auto 16px; border-radius: var(--r-full); display:grid; place-items:center;
    background: var(--gold-soft); border:1px solid rgba(212,168,83,0.3); color: var(--gold); }
.pay-sheet h2 { font-family: var(--font-display); font-size: 24px; font-weight:700; text-align:center; letter-spacing:-.02em; }
.pay-sheet .lead { text-align:center; color: var(--text-2); font-size:14.5px; margin-top:10px; }
.pay-sheet .lead b { color: var(--gold-bright); }
.saved { display:grid; grid-template-columns:1fr 1fr; gap:12px; margin: 20px 0; }
.saved .box { background: var(--surface-2); border:1px solid var(--hairline); border-radius: var(--r); padding: 16px; text-align:center; }
.saved .box .n { font-family: var(--font-display); font-size: 28px; font-weight:700; color: var(--gold-bright); }
.saved .box .l { font-size:12px; color: var(--text-3); margin-top:3px; }
.price-line { text-align:center; margin: 4px 0 16px; }
.price-line .big { font-family: var(--font-display); font-size: 20px; font-weight:700; }
.price-line .big b { color: var(--gold); }
.restore { text-align:center; margin-top:14px; color: var(--text-3); font-size:13px; cursor:pointer; }

/* Gratitude */
.grat-area { margin: 12px 20px; }
.grat-area textarea {
    width:100%; min-height:180px; background: var(--surface); border:1px solid var(--hairline);
    border-radius: var(--r-lg); color: var(--text); padding: 16px; font-family: var(--font); font-size:16px; resize: vertical;
}