/* ═══════════════════════════════════════════════════════════════════════════
   Yo · «Tu espacio» en el lenguaje de la portada v4 («Noche plata»).
   Sin cuenta: la promo #cuenta con la esfera mini y 3 razones numeradas.
   Con cuenta: perfil, seguir escuchando, mi espacio, versículo del día y
   más opciones como filas de lectura (sin cajas de colores).
   Prefijos: .account-promo y .yo-section. Solo aspecto.
   ═══════════════════════════════════════════════════════════════════════════ */

body[data-tab-active="yo"]{ background:var(--v4-bg) !important; }
body .account-promo, body .yo-section{ background:var(--v4-bg) !important; color:var(--v4-ink); font-family:var(--v4-ui); overflow-x:clip; }
body .account-promo::before, body .account-promo::after, body .yo-section::before, body .yo-section::after{ display:none !important; }

/* ── Sin cuenta: promo ── */
body .account-promo{ padding:calc(var(--mv-nav-h, 68px) + 40px) clamp(20px,5vw,72px) 40px !important; text-align:left !important; }
.account-promo .account-promo-inner{ max-width:1100px; margin:0 auto; background:none !important; border:0 !important; box-shadow:none !important; padding:0 !important; text-align:left !important; }
.account-promo .ap-head{ display:grid; grid-template-columns:minmax(0,1fr); gap:40px; align-items:center; margin-bottom:48px; }
.account-promo .hero-badge{
  display:flex !important; align-items:center; gap:12px; margin:0 0 26px !important; padding:0 !important; background:none !important; border:0 !important; box-shadow:none !important;
  font:500 10.5px/1.4 var(--v4-mono) !important; letter-spacing:.16em !important; text-transform:uppercase; color:var(--v4-muted) !important;
}
.account-promo .hero-badge::before{ content:''; width:28px; height:1px; background:var(--v4-gold); }
.account-promo h2{
  font:400 clamp(46px,7vw,92px)/.95 var(--v4-serif) !important; letter-spacing:-.02em !important; margin:0 0 22px !important; text-align:left !important;
  color:var(--v4-ink) !important; background:none !important; -webkit-text-fill-color:currentColor !important; text-transform:none !important;
}
.account-promo h2 em{ font-style:italic; color:var(--v4-gold); }
.account-promo .account-promo-lead{ max-width:520px; margin:0 !important; font:400 16px/1.6 var(--v4-ui) !important; color:var(--v4-muted) !important; text-align:left !important; }
.account-promo .cielo-mini{ width:300px; height:300px; display:block; justify-self:end; }

.account-promo .account-benefits{ display:grid !important; grid-template-columns:repeat(3,minmax(0,1fr)) !important; gap:0 40px !important; counter-reset:ben; margin:0 0 44px !important; }
.account-promo .acc-benefit{
  counter-increment:ben; background:none !important; border:0 !important; border-top:1px solid var(--v4-line) !important; border-radius:0 !important;
  box-shadow:none !important; padding:22px 0 0 !important; text-align:left !important; transform:none !important;
}
.account-promo .acc-benefit::before{ content:counter(ben, decimal-leading-zero); display:block; font:500 11px/1 var(--v4-mono); letter-spacing:.1em; color:var(--v4-gold); margin-bottom:16px; }
.account-promo .acc-ico{ display:none !important; }
.account-promo .acc-benefit h4{ font:400 26px/1.1 var(--v4-serif) !important; color:var(--v4-ink) !important; margin:0 0 10px !important; letter-spacing:0 !important; text-transform:none !important; }
.account-promo .acc-benefit p{ font:400 14.5px/1.55 var(--v4-ui) !important; color:var(--v4-muted) !important; margin:0 !important; }
.account-promo .ap-acts{ display:flex; flex-wrap:wrap; align-items:center; gap:12px 22px; }
.account-promo .btn-primary{
  height:50px; padding:0 26px !important; border-radius:40px !important; border:0 !important; box-shadow:none !important;
  background:var(--v4-ink) !important; color:var(--v4-bg) !important; font:500 15px/1 var(--v4-ui) !important; letter-spacing:0 !important; text-transform:none !important;
  display:inline-flex; align-items:center; transition:background .18s; animation:none !important;
}
.account-promo .btn-primary:hover{ background:var(--v4-gold) !important; transform:none !important; }
.account-promo .ap-entrar{ background:none; border:0; padding:6px 0; color:var(--v4-muted); font:400 14.5px/1 var(--v4-ui); border-bottom:1px solid var(--v4-line-2); cursor:pointer; transition:color .18s; }
.account-promo .ap-entrar:hover{ color:var(--v4-ink); }
.account-promo .account-promo-foot{ margin:30px 0 0 !important; font:italic 400 19px/1.4 var(--v4-serif) !important; color:var(--v4-gold-soft) !important; text-align:left !important; }

/* Sin cuenta, la pestaña Yo no repite la invitación ni muestra cifras vacías */
.yo-section #yoLoggedOut{ display:none !important; }
.yo-section:has(#yoLoggedIn[style*="none"]) .yo-stats-row,
.yo-section:has(#yoLoggedIn[style*="none"]) .yo-top-bar{ display:none !important; }

/* ── Con cuenta ── */
body .yo-section{ padding:calc(var(--mv-nav-h, 68px) + 40px) clamp(20px,5vw,72px) 120px !important; }
body .yo-section:has(#yoLoggedIn[style*="none"]){ padding-top:10px !important; }
.yo-section .yo-inner{ max-width:820px; margin:0 auto; }
.yo-section .yo-top-bar{ display:flex !important; align-items:flex-end; justify-content:space-between; margin:0 0 30px !important; padding:0 !important; border:0 !important; background:none !important; }
.yo-section .yo-top-bar > div:first-child{ display:none; }
.yo-section .yo-top-title{
  font:400 clamp(44px,6vw,72px)/.95 var(--v4-serif) !important; letter-spacing:-.02em; color:var(--v4-ink) !important; margin:0 !important;
  text-transform:none !important; background:none !important; -webkit-text-fill-color:currentColor !important;
}
.yo-section .yo-top-gear{ width:44px; height:44px; border-radius:50% !important; border:1px solid var(--v4-line-2) !important; background:none !important; color:var(--v4-ink) !important; display:grid; place-items:center; box-shadow:none !important; }
.yo-section .yo-top-gear:hover{ border-color:var(--v4-gold) !important; color:var(--v4-gold) !important; }
.yo-section .yo-top-gear svg{ width:18px; height:18px; }

.yo-section .yo-stats-row{ display:grid !important; grid-template-columns:repeat(3,1fr); gap:0 !important; margin:0 0 34px !important; padding:0 !important; background:none !important; border:0 !important; border-radius:0 !important; box-shadow:none !important; border-top:1px solid var(--v4-line) !important; border-bottom:1px solid var(--v4-line) !important; }
.yo-section .yo-sbox{ background:none !important; border:0 !important; border-radius:0 !important; box-shadow:none !important; padding:20px 0 !important; text-align:left !important; }
.yo-section .yo-sbox + .yo-sbox{ border-left:1px solid var(--v4-line) !important; padding-left:20px !important; }
.yo-section .yo-stat-num{ display:block; font:400 40px/1 var(--v4-serif) !important; color:var(--v4-ink) !important; background:none !important; -webkit-text-fill-color:currentColor !important; }
.yo-section .yo-stat-lbl{ display:block; margin-top:8px; font:500 10px/1 var(--v4-mono) !important; letter-spacing:.16em !important; color:var(--v4-muted) !important; }

.yo-section .yo-profile-row{ display:flex; align-items:center; gap:18px; margin:0 0 22px !important; background:none !important; border:0 !important; padding:0 !important; }
.yo-section .yo-avatar{
  width:64px !important; height:64px !important; border-radius:50% !important; flex:none; display:grid; place-items:center;
  background:none !important; border:1px solid var(--v4-gold) !important; box-shadow:0 0 30px -8px rgba(201,168,76,.6) !important;
  color:var(--v4-gold) !important; font:400 26px/1 var(--v4-serif) !important;
}
.yo-section .yo-account-name{ font:400 28px/1.1 var(--v4-serif) !important; color:var(--v4-ink) !important; }
.yo-section .yo-account-mail{ font:400 13px/1.4 var(--v4-ui) !important; color:var(--v4-muted) !important; margin-top:4px; }
.yo-section .yo-plan-badge{
  display:inline-block; margin-top:10px; background:none !important; border:1px solid color-mix(in srgb, var(--v4-gold) 45%, transparent) !important;
  border-radius:40px !important; padding:5px 10px !important; color:var(--v4-gold) !important; font:500 9.5px/1 var(--v4-mono) !important; letter-spacing:.14em; text-transform:uppercase;
}
.yo-section .yo-premium-btn{
  width:100%; display:flex; align-items:center; gap:14px; text-align:left; margin:0 0 22px !important;
  background:none !important; border:0 !important; border-top:1px solid var(--v4-line) !important; border-bottom:1px solid var(--v4-line) !important; border-radius:0 !important;
  padding:18px 0 !important; box-shadow:none !important; color:var(--v4-ink) !important;
}
.yo-section .yopb-icon{ display:none !important; }
.yo-section .yopb-title{ display:block; font:400 21px/1.2 var(--v4-serif) !important; color:var(--v4-ink) !important; }
.yo-section .yopb-sub{ display:block; font:500 10px/1.4 var(--v4-mono) !important; letter-spacing:.14em; text-transform:uppercase; color:var(--v4-gold) !important; margin-top:6px; }
.yo-section .yopb-chev{ margin-left:auto; width:16px; height:16px; color:var(--v4-muted); }
.yo-section .yo-cta{
  height:48px; padding:0 24px !important; border-radius:40px !important; border:0 !important; box-shadow:0 0 40px -10px rgba(201,168,76,.6) !important;
  background:var(--v4-gold) !important; color:var(--v4-bg) !important; font:500 14.5px/1 var(--v4-ui) !important; display:inline-flex; align-items:center; gap:10px;
  width:auto !important; margin:0 0 30px !important;
}
.yo-section .yo-cta .ic{ width:15px; height:15px; }

/* Etiquetas de sección y filas de lectura */
.yo-section .yo-sec-hd{ display:flex; align-items:baseline; justify-content:space-between; margin:34px 0 0 !important; padding:0 0 12px !important; border-bottom:1px solid var(--v4-line); }
.yo-section .yo-sec-label{ font:500 10.5px/1.4 var(--v4-mono) !important; letter-spacing:.16em !important; color:var(--v4-muted) !important; }
.yo-section .yo-sec-ver{ background:none !important; border:0 !important; padding:0 !important; color:var(--v4-ink) !important; font:500 10.5px/1 var(--v4-mono) !important; letter-spacing:.14em; text-transform:uppercase; }
.yo-section .yo-sec-ver:hover{ color:var(--v4-gold) !important; }
.yo-section .yo-listen-wrap{ background:none !important; border:0 !important; padding:0 !important; }
.yo-section .yo-li{
  display:flex !important; align-items:center; gap:16px; background:none !important; border:0 !important; border-bottom:1px solid var(--v4-line) !important;
  border-radius:0 !important; padding:18px 0 !important; box-shadow:none !important; cursor:pointer;
}
.yo-section .yo-li-art{ width:46px !important; height:46px !important; border-radius:50% !important; background:var(--v4-ink) !important; color:var(--v4-bg) !important; display:grid; place-items:center; flex:none; border:0 !important; }
.yo-section .yo-li-art .ic{ width:16px; height:16px; }
.yo-section .yo-li-ttl{ font:400 22px/1.15 var(--v4-serif) !important; color:var(--v4-ink) !important; }
.yo-section .yo-li-sub{ font:400 13px/1.4 var(--v4-ui) !important; color:var(--v4-muted) !important; margin-top:3px; }
.yo-section .yo-li-bar{ height:1px !important; background:var(--v4-line-2) !important; border-radius:0 !important; margin-top:10px; }
.yo-section .yo-li-fill{ background:var(--v4-gold) !important; border-radius:0 !important; height:100%; }
.yo-section .yo-li-body{ flex:1; min-width:0; }

.yo-section .yo-menu2{ list-style:none; margin:0 !important; padding:0 !important; background:none !important; border:0 !important; border-radius:0 !important; }
.yo-section .yo-menu2 li{
  display:flex !important; align-items:center; gap:16px; background:none !important; border:0 !important; border-bottom:1px solid var(--v4-line) !important;
  border-radius:0 !important; padding:16px 0 !important; cursor:pointer; transition:padding .2s var(--mv-ease, ease);
}
.yo-section .yo-menu2 li:hover{ padding-left:6px !important; }
.yo-section .yo-mi{ width:36px !important; height:36px !important; border-radius:50% !important; background:none !important; border:1px solid var(--v4-line-2) !important; display:grid !important; place-items:center; flex:none; }
.yo-section .yo-mi svg{ width:16px !important; height:16px !important; stroke:var(--v4-ink) !important; }
.yo-section .yo-mt{ display:block; font:400 21px/1.2 var(--v4-serif) !important; color:var(--v4-ink) !important; }
.yo-section .yo-ms{ display:block; font:400 13px/1.4 var(--v4-ui) !important; color:var(--v4-muted) !important; margin-top:3px; }
.yo-section .yo-mb{ flex:1; min-width:0; }
.yo-section .yo-chev{ width:16px !important; height:16px !important; color:var(--v4-muted) !important; flex:none; }
.yo-section .yo-menu2 li:hover .yo-mt{ color:var(--v4-gold) !important; font-style:italic; }

/* Versículo del día */
.yo-section .yo-verse-card{
  background:none !important; border:0 !important; border-left:1px solid var(--v4-gold) !important; border-radius:0 !important; box-shadow:none !important;
  padding:6px 0 6px 24px !important; margin:44px 0 30px !important; text-align:left !important; width:auto !important; max-width:none !important; transform:none !important;
}
.yo-section .yo-verse-eyebrow{ font:500 10.5px/1.4 var(--v4-mono) !important; letter-spacing:.16em !important; color:var(--v4-muted) !important; margin-bottom:14px; display:flex; align-items:center; gap:8px; }
.yo-section .yo-verse-eyebrow .ic{ display:none; }
.yo-section .yo-verse-text{ font:italic 400 clamp(24px,3vw,32px)/1.3 var(--v4-serif) !important; color:var(--v4-ink) !important; margin:0 0 12px !important; }
.yo-section .yo-verse-ref{ font:500 11px/1 var(--v4-mono) !important; letter-spacing:.14em; text-transform:uppercase; color:var(--v4-gold) !important; margin:0 0 18px !important; }
.yo-section .yo-vacts{ display:flex; gap:20px; flex-wrap:wrap; }
.yo-section .yo-vact{ background:none !important; border:0 !important; padding:0 !important; display:inline-flex; align-items:center; gap:7px; color:var(--v4-muted) !important; font:500 10px/1 var(--v4-mono) !important; letter-spacing:.14em; text-transform:uppercase; box-shadow:none !important; }
.yo-section .yo-vact svg{ width:14px; height:14px; }
.yo-section .yo-vact:hover{ color:var(--v4-ink) !important; }

/* Descargas y listas */
.yo-section .yo-card, .yo-section .offline-panel, .yo-section .yo-listas{ background:none !important; border:0 !important; border-radius:0 !important; box-shadow:none !important; padding:0 !important; }
.yo-section .offline-head{ display:flex; justify-content:space-between; padding:18px 0 12px; border-bottom:1px solid var(--v4-line); font:500 10.5px/1.4 var(--v4-mono); letter-spacing:.16em; text-transform:uppercase; color:var(--v4-muted); }
.yo-section .offline-head .ic{ display:none; }
.yo-section .offline-note{ font:400 13px/1.5 var(--v4-ui) !important; color:var(--v4-muted) !important; }

/* ── Móvil ── */
@media (max-width:820px){
  body .account-promo{ padding-top:calc(var(--mv-nav-h, 58px) + 18px) !important; }
  .account-promo .ap-head{ grid-template-columns:1fr; position:relative; margin-bottom:34px; }
  .account-promo .ap-head > div{ position:relative; z-index:1; }
  .account-promo .cielo-mini{ position:absolute; top:-30px; right:-50px; width:210px; height:210px; opacity:.75; pointer-events:none; z-index:0; }
  .account-promo .hero-badge{ margin-bottom:18px !important; }
  .account-promo h2{ font-size:clamp(44px,13vw,60px) !important; padding-right:20px; }
  .account-promo .account-promo-lead{ font-size:15px !important; }
  .account-promo .account-benefits{ grid-template-columns:1fr !important; }
  .account-promo .acc-benefit{ padding:18px 0 20px !important; display:grid; grid-template-columns:34px 1fr; column-gap:10px; }
  .account-promo .acc-benefit::before{ grid-row:1 / 3; margin:6px 0 0; }
  .account-promo .acc-benefit h4{ font-size:23px !important; margin-bottom:6px !important; }
  .account-promo .btn-primary{ width:100%; justify-content:center; }
  .account-promo .ap-acts{ flex-direction:column; align-items:stretch; text-align:center; }
  .account-promo .ap-entrar{ align-self:center; }
  body .yo-section{ padding-top:calc(var(--mv-nav-h, 58px) + 18px) !important; padding-bottom:150px !important; }
  body .yo-section:has(#yoLoggedIn[style*="none"]){ padding-top:0 !important; }
  .yo-section .yo-stat-num{ font-size:32px !important; }
  .yo-section .yo-sbox + .yo-sbox{ padding-left:14px !important; }
}

/* Sin sesión la sección del perfil queda vacía (todo vive en el área de miembro): fuera */
body .yo-section:has(#yoLoggedIn[style*="none"]){ display:none !important; }
body .account-promo{ padding-bottom:120px !important; }
.yo-section .yo-verse-card::before, .yo-section .yo-verse-card::after{ display:none !important; }