:root{
  --gold:#e2a62a;
  --gold-soft:#f3c86b;
  --bg:#030708;
  --panel:rgba(5,10,11,.92);
  --line:rgba(226,166,42,.55);
  --text:#f5f0e8;
  --muted:#c5beb2;
}
*{box-sizing:border-box}
html{background:#020405}
body{
  margin:0;
  background:#020405;
  color:var(--text);
  font-family:Georgia,"Times New Roman",serif;
}
button,a{font:inherit}
button{color:inherit}
.app{
  width:min(100%,620px);
  min-height:100dvh;
  margin:auto;
  position:relative;
  overflow:hidden;
  background:
    linear-gradient(180deg,transparent 0 23%,rgba(2,6,7,.28) 35%,#030708 62%),
    url("assets/fondo-meditacion.png") top center/auto 780px no-repeat,
    #030708;
  border-left:1px solid rgba(226,166,42,.35);
  border-right:1px solid rgba(226,166,42,.35);
  box-shadow:0 0 90px #000;
  padding-bottom:122px;
}
.app::before{
  content:"";
  position:fixed;
  width:min(calc(100% - 18px),602px);
  height:calc(100dvh - 18px);
  left:50%;top:9px;transform:translateX(-50%);
  border:1px solid rgba(226,166,42,.35);
  border-radius:36px;
  pointer-events:none;
  z-index:40;
}
.hero{
  min-height:675px;
  position:relative;
  padding:30px 30px 0;
}
.hero-overlay{
  position:absolute;
  inset:0;
  background:
    linear-gradient(180deg,rgba(0,0,0,.18),rgba(0,0,0,.05) 45%,rgba(3,7,8,.94) 90%,#030708 100%),
    radial-gradient(circle at 50% 45%,transparent 0 32%,rgba(0,0,0,.22) 72%);
  z-index:0;
}
.round-button{
  position:absolute;z-index:3;
  width:62px;height:62px;border-radius:50%;
  border:2px solid var(--gold);
  background:rgba(4,9,10,.62);
  color:var(--gold-soft);
  font-size:58px;line-height:.8;
  display:grid;place-items:center;
  box-shadow:0 0 20px rgba(226,166,42,.18);
  cursor:pointer;
}
.back-button{top:33px;left:31px}
.brand{
  position:absolute;
  top:29px;left:50%;transform:translateX(-50%);
  z-index:3;text-align:center;text-shadow:0 3px 12px #000;
}
.brand-symbol{font-size:43px;color:var(--gold-soft);line-height:1}
.brand-title{font-size:28px;letter-spacing:7px;margin-top:4px}
.brand-subtitle{font-size:11px;letter-spacing:1.2px;color:var(--gold-soft);line-height:1.35}
.status-card{
  position:absolute;z-index:3;right:29px;top:33px;
  width:155px;padding:14px 16px 13px;
  border:2px solid var(--gold);
  border-radius:18px;background:rgba(3,8,9,.72);
  box-shadow:0 8px 28px #0008;
  text-align:center;
}
.time-row{display:flex;align-items:center;justify-content:center;gap:7px}
.clock-icon{font-size:27px;color:var(--gold)}
.time-row strong{font-size:30px;font-weight:400}
.date{font-size:14px;margin-top:2px}
.divider{height:1px;background:rgba(226,166,42,.65);margin:10px 0}
.weather{display:flex;justify-content:center;align-items:center;gap:13px}
.weather span{font-size:27px;color:var(--gold)}
.weather strong{font-size:25px;color:var(--gold-soft);font-weight:400}
.module-heading{
  position:absolute;z-index:3;left:68px;right:34px;bottom:16px;
  display:flex;align-items:center;gap:19px;
}
.lotus-medallion{
  width:115px;height:115px;flex:0 0 115px;border-radius:50%;
  border:2px solid var(--gold);
  display:grid;place-items:center;
  font-size:62px;color:var(--gold-soft);
  background:rgba(4,9,10,.78);
  box-shadow:0 0 22px rgba(226,166,42,.35),inset 0 0 18px #000;
}
.module-heading h1{
  margin:0;font-size:45px;letter-spacing:.5px;
  text-shadow:0 4px 12px #000;
}
.module-heading p{
  margin:3px 0 0;font-size:18px;color:#efe7dc;
  text-shadow:0 3px 9px #000;
}
.content{padding:0 48px 24px}
.section-title{
  display:flex;align-items:center;gap:12px;margin:6px 0 17px;
}
.section-title span{height:1px;flex:1;background:var(--gold)}
.section-title h2{
  margin:0;color:var(--gold-soft);
  font-size:18px;font-weight:400;letter-spacing:.7px;
  white-space:nowrap;
}
.meditation-list{
  border:1px solid rgba(226,166,42,.2);
  border-radius:15px;
  background:rgba(4,9,10,.76);
  overflow:hidden;
  backdrop-filter:blur(5px);
}
.meditation-row{
  min-height:101px;
  padding:10px 13px;
  display:grid;
  grid-template-columns:165px 1fr 66px;
  gap:15px;
  align-items:center;
  border-bottom:1px solid rgba(226,166,42,.34);
}
.meditation-row:last-child{border-bottom:0}
.thumb{
  width:165px;height:80px;border-radius:9px;
  overflow:hidden;border:1px solid rgba(226,166,42,.35);
  background:#111;
}
.thumb img{width:100%;height:100%;object-fit:cover;display:block}
.meta h3{margin:0 0 4px;font-size:20px;font-weight:400}
.meta p{margin:0;color:#c8c0b4;font-size:14px;line-height:1.45}
.youtube-label{font-size:13px;color:#aaa}
.play-button{
  width:58px;height:58px;border-radius:50%;
  border:2px solid var(--gold);background:rgba(4,9,10,.88);
  color:var(--gold-soft);font-size:25px;cursor:pointer;
}
.random-card{
  margin-top:16px;width:100%;min-height:94px;
  display:grid;grid-template-columns:70px 1fr 30px;align-items:center;
  text-align:left;padding:14px 20px;
  border:2px solid var(--gold);border-radius:16px;
  background:linear-gradient(90deg,rgba(7,13,14,.96),rgba(4,8,9,.91));
  box-shadow:0 8px 22px #0007;cursor:pointer;
}
.random-icon{font-size:38px;color:var(--gold-soft)}
.random-copy strong{display:block;color:var(--gold-soft);font-size:22px;font-weight:400}
.random-copy span{font-size:15px;color:#ddd4c8}
.random-arrow{font-size:46px;color:var(--gold-soft)}
.share-panel{
  margin-top:17px;padding:18px 17px 14px;
  border:1px solid rgba(226,166,42,.36);
  border-radius:16px;background:rgba(5,10,11,.86);
}
.share-panel h2{text-align:center;color:var(--gold-soft);font-size:20px;font-weight:400;margin:0 0 14px}
.share-grid{display:grid;grid-template-columns:1fr 1.35fr;gap:12px}
.share-card{
  min-height:80px;border:1px solid rgba(226,166,42,.4);
  border-radius:13px;background:#081011;
  display:flex;align-items:center;gap:12px;padding:12px 16px;text-align:left;cursor:pointer;
}
.share-card .share-icon{font-size:38px;color:var(--gold-soft)}
.share-card.whatsapp .share-icon{color:#28cf5b}
.share-card strong{display:block;font-size:18px;font-weight:400}
.share-card small{display:block;margin-top:4px;color:#d3cbbf;font-size:12px}
.share-panel p{text-align:center;color:#b9b1a5;font-size:13px;margin:13px 0 8px}
.ornament,.footer-ornament{
  display:flex;align-items:center;justify-content:center;gap:12px;color:var(--gold);
}
.ornament span,.footer-ornament span{height:1px;width:105px;background:var(--gold)}
.bottom-nav{
  position:fixed;z-index:30;bottom:23px;left:50%;transform:translateX(-50%);
  width:min(calc(100% - 46px),574px);
  display:grid;grid-template-columns:repeat(5,1fr);gap:9px;
  padding:9px 10px;
  border:1px solid rgba(226,166,42,.2);
  border-radius:16px;
  background:rgba(3,8,9,.96);
  backdrop-filter:blur(12px);
}
.bottom-nav a{
  min-height:65px;border:1px solid rgba(226,166,42,.28);
  border-radius:11px;color:#eee7dc;text-decoration:none;
  display:flex;align-items:center;justify-content:center;gap:7px;
  padding:8px 6px;
}
.bottom-nav a span{font-size:29px;color:var(--gold-soft)}
.bottom-nav a b{font-size:12px;font-weight:400}
.bottom-nav a.active{
  border:2px solid var(--gold);
  box-shadow:0 0 17px rgba(226,166,42,.2);
}
.footer-ornament{
  position:fixed;z-index:31;bottom:6px;left:50%;transform:translateX(-50%);
}
.footer-ornament span{width:90px}
.player-dialog{
  width:min(92vw,560px);
  padding:0;border:2px solid var(--gold);border-radius:22px;
  background:#061011;color:var(--text);box-shadow:0 30px 100px #000;
}
.player-dialog::backdrop{background:rgba(0,0,0,.87);backdrop-filter:blur(9px)}
.dialog-close{
  position:absolute;right:12px;top:10px;z-index:4;
  width:42px;height:42px;border-radius:50%;border:1px solid var(--gold);
  background:#061011;font-size:28px;cursor:pointer;
}
.video-wrap{aspect-ratio:16/9;background:#000;border-radius:20px 20px 0 0;overflow:hidden}
.video-wrap iframe{width:100%;height:100%;border:0}
.dialog-content{padding:22px}
.dialog-eyebrow{font-size:11px;color:var(--gold-soft);letter-spacing:1.8px}
.dialog-content h2{margin:7px 0;font-size:28px}
.dialog-content p{color:var(--muted);line-height:1.5}
.dialog-actions{display:grid;grid-template-columns:1fr 1fr;gap:10px}
.dialog-actions a,.dialog-actions button{
  min-height:48px;border-radius:10px;border:1px solid var(--gold);
  display:flex;align-items:center;justify-content:center;text-decoration:none;
  background:#091314;color:var(--gold-soft);cursor:pointer;
}
.dialog-actions .primary-action{grid-column:1/-1;background:var(--gold);color:#071011;font-weight:bold}
@media(max-width:520px), (min-width:900px) and (orientation:landscape){
  .hero{min-height:590px;padding:20px}
  .brand{top:24px}
  .brand-title{font-size:22px}
  .brand-subtitle{font-size:9px}
  .status-card{width:125px;right:17px;top:24px;padding:10px}
  .time-row strong{font-size:24px}
  .round-button{width:52px;height:52px;left:18px;top:24px}
  .module-heading{left:24px;right:18px}
  .lotus-medallion{width:88px;height:88px;flex-basis:88px;font-size:45px}
  .module-heading h1{font-size:34px}
  .module-heading p{font-size:14px}
  .content{padding:0 18px 20px}
  .meditation-row{grid-template-columns:115px 1fr 50px;gap:9px;min-height:90px}
  .thumb{width:115px;height:67px}
  .meta h3{font-size:16px}
  .meta p,.youtube-label{font-size:11px}
  .play-button{width:45px;height:45px}
  .share-grid{grid-template-columns:1fr}
  .bottom-nav{width:calc(100% - 24px);gap:4px;padding:7px}
  .bottom-nav a{flex-direction:column;gap:1px;min-height:59px}
  .bottom-nav a span{font-size:23px}
  .bottom-nav a b{font-size:9px}
}

/* v4.4 3D icons */
.back-button{overflow:hidden;padding:0}.back-button .r3d-icon{width:100%;height:100%}
.bottom-nav a{gap:6px}.bottom-nav .r3d-nav-icon{width:27px;height:27px}
.lotus-medallion{overflow:hidden;padding:0!important}.lotus-medallion .r3d-icon{width:100%;height:100%}.random-icon img,.share-icon img{width:42px;height:42px}