:root{
  --bg:#050508; --panel:#0c0c12; --panel2:#111119; --text:#f6f3ef;
  --muted:#aaa6a0; --gold:#e1ad49; --pink:#f20b67; --line:#2a2523;
  --radius:24px; --shadow:0 30px 90px rgba(0,0,0,.45);
}
*{box-sizing:border-box}
html{background:var(--bg);scroll-behavior:smooth}
body{margin:0;background:
radial-gradient(circle at 50% -10%,rgba(225,173,73,.12),transparent 35%),
radial-gradient(circle at 90% 20%,rgba(242,11,103,.08),transparent 28%),var(--bg);
color:var(--text);font-family:Inter,ui-sans-serif,system-ui,-apple-system,BlinkMacSystemFont,"Segoe UI",sans-serif}
button,textarea{font:inherit}
button{cursor:pointer}
.app-shell{max-width:680px;margin:0 auto;min-height:100dvh;padding-bottom:92px}
.topbar{position:sticky;top:0;z-index:20;display:flex;align-items:center;justify-content:space-between;padding:18px 18px;background:linear-gradient(180deg,rgba(5,5,8,.96),rgba(5,5,8,.78),transparent);backdrop-filter:blur(12px)}
.brand{display:flex;gap:10px;align-items:center;letter-spacing:.18em}
.brand-mark{width:38px;height:38px;border:1px solid rgba(225,173,73,.55);border-radius:14px;display:grid;place-items:center;color:var(--gold)}
.brand strong{display:block;font-size:.78rem;color:var(--gold)}
.brand small{display:block;font-size:.55rem;color:#d7d4cf;margin-top:2px}
.ghost-btn,.secondary-btn{border:1px solid #3a3130;background:rgba(255,255,255,.02);color:#eee;border-radius:16px;padding:13px 16px}
.app-main{padding:8px 18px 28px}
.screen{display:none;animation:fade .32s ease}
.screen.active{display:block}
@keyframes fade{from{opacity:.2;transform:translateY(8px)}to{opacity:1;transform:none}}
.eyebrow{display:block;color:var(--gold);font-size:.73rem;letter-spacing:.22em;font-weight:800;margin:12px 0 18px}
.progress-wrap{margin-bottom:18px}.progress-wrap.large{margin:24px 0}
.progress-meta{display:flex;justify-content:space-between;color:#bcb6af;font-size:.78rem;margin-bottom:8px}
.progress{height:5px;background:#1f1b1b;border-radius:99px;overflow:hidden}
.progress span{display:block;height:100%;background:linear-gradient(90deg,var(--gold),var(--pink));box-shadow:0 0 20px rgba(242,11,103,.5)}
.hero-card,.challenge-card,.today-card,.summary-grid>div,.locked-card,.midday-prompt{border:1px solid rgba(225,173,73,.16);background:linear-gradient(180deg,rgba(18,18,25,.96),rgba(8,8,12,.95));border-radius:var(--radius);box-shadow:var(--shadow)}
.hero-card{padding:28px 22px 24px;min-height:56dvh;display:flex;flex-direction:column;justify-content:center;text-align:center}
.pill{align-self:center;border:1px solid rgba(242,11,103,.7);border-radius:99px;padding:9px 16px;font-size:.66rem;letter-spacing:.22em;margin-bottom:26px}
h1{font-size:clamp(2rem,8vw,3.5rem);line-height:1.02;margin:0 0 18px}
h1 em{font-style:normal;color:var(--gold)}
.hero-card p,.lead{color:#c4c0ba;line-height:1.65}
.mystery-orb{height:135px;width:135px;border-radius:50%;margin:26px auto;border:1px solid rgba(225,173,73,.45);display:grid;place-items:center;padding:18px;background:radial-gradient(circle,rgba(242,11,103,.13),transparent 65%);box-shadow:inset 0 0 55px rgba(225,173,73,.06),0 0 60px rgba(242,11,103,.08)}
.mystery-orb span{font-size:.72rem;line-height:1.4;color:#ddd;letter-spacing:.05em}
.primary-btn{width:100%;border:0;border-radius:17px;padding:16px 18px;margin-top:20px;background:linear-gradient(100deg,#c98e2e,#f20b67);color:white;font-weight:800;letter-spacing:.04em;box-shadow:0 15px 40px rgba(242,11,103,.16)}
.back-link{border:0;background:transparent;color:#aaa;padding:8px 0 18px}
.reveal-head{text-align:center;padding:8px 4px 20px}
.reveal-head h2{font-family:Georgia,serif;font-size:clamp(4rem,18vw,7rem);line-height:.9;margin:14px 0;color:#ef185f;text-shadow:0 0 22px rgba(242,11,103,.28)}
.reveal-head p{color:#d1ccc6;line-height:1.55}
.image-card{border-radius:28px;overflow:hidden;border:1px solid rgba(225,173,73,.2);box-shadow:var(--shadow);background:#000}
.image-card img{display:block;width:100%;height:auto}
blockquote{margin:24px 0;padding:22px;border-left:2px solid var(--pink);background:#0d0d12;border-radius:0 16px 16px 0;line-height:1.6;color:#c9c4be}
.section-title{font-size:clamp(2rem,9vw,3.2rem);line-height:1.06;margin:8px 0 22px}
.steps{display:grid;gap:12px}
.steps article{display:flex;gap:14px;padding:18px;border:1px solid #221f20;border-radius:20px;background:#0b0b10}
.steps b{color:var(--pink);font-size:.75rem;letter-spacing:.12em}
.steps h3{margin:0 0 6px;color:var(--gold);font-size:1rem;letter-spacing:.07em}
.steps p{margin:0;color:#aaa;line-height:1.45}
.lens-list{display:grid;gap:10px}
.lens{border:1px solid #292326;border-radius:18px;background:#0b0b10;overflow:hidden}
.lens summary{list-style:none;padding:18px;display:flex;align-items:center;gap:14px;cursor:pointer}
.lens summary::-webkit-details-marker{display:none}
.lens summary span{color:var(--pink);font-size:.72rem}.lens summary b{letter-spacing:.08em}
.lens div{padding:0 18px 18px 50px;color:#c7c1bb}
.lens div p{margin:0 0 12px}.lens div small{color:var(--gold);line-height:1.5}
.secondary-btn{width:100%;margin-top:14px}
.challenge-card{padding:24px;margin:8px 0 22px}
.challenge-card h2{font-size:2rem;line-height:1.05;margin:0 0 12px;color:#fff}
.challenge-card p{color:#c9c3bd;line-height:1.6}
label{display:block;color:#ddd;margin:18px 0 9px;line-height:1.4}
textarea{width:100%;resize:vertical;background:#0a0a0f;color:#fff;border:1px solid #30272a;border-radius:18px;padding:16px;outline:none}
textarea:focus{border-color:rgba(242,11,103,.65);box-shadow:0 0 0 3px rgba(242,11,103,.08)}
.today-card{padding:22px}.today-card small,.summary-grid small,.locked-card small{color:var(--gold);letter-spacing:.16em}
.today-card p{font-size:1.22rem;line-height:1.55;margin-bottom:0}
.quick-actions{display:grid;grid-template-columns:1fr 1fr;gap:10px}.quick-actions .secondary-btn{font-size:.8rem}
.midday-prompt{padding:22px;margin-top:18px;border-color:rgba(242,11,103,.22)}
.midday-prompt span{color:var(--pink);font-size:.7rem;letter-spacing:.18em}
.midday-prompt p{font-size:1.3rem;line-height:1.4;margin-bottom:0}
.question-block{margin-top:22px}
.chips{display:flex;flex-wrap:wrap;gap:8px}
.chips button{border:1px solid #34292d;background:#0b0b10;color:#ddd;border-radius:99px;padding:10px 13px}
.chips button.selected{background:rgba(242,11,103,.15);border-color:var(--pink);color:#fff}
.accent{color:var(--pink)}
.summary-grid{display:grid;gap:12px}
.summary-grid>div{padding:18px}.summary-grid p{line-height:1.55;color:#d0cbc4}
.completion-orb{width:104px;height:104px;border-radius:50%;display:grid;place-items:center;margin:24px auto 20px;border:1px solid var(--gold);color:var(--gold);font-size:2.5rem;box-shadow:0 0 70px rgba(225,173,73,.13)}
[data-screen="completed"]{text-align:center}
.locked-card{padding:20px;display:grid;gap:7px;margin:28px 0}
.locked-card strong{font-size:1.5rem}.locked-card span{color:#aaa}
.bottom-nav{position:fixed;left:50%;bottom:0;transform:translateX(-50%);z-index:30;width:min(680px,100%);display:grid;grid-template-columns:repeat(3,1fr);padding:10px 14px calc(10px + env(safe-area-inset-bottom));background:rgba(7,7,10,.92);backdrop-filter:blur(18px);border-top:1px solid #1c1a1b}
.bottom-nav button{border:0;background:transparent;color:#757177;padding:7px;font-size:.68rem;display:grid;gap:4px}
.bottom-nav button span{font-size:1.1rem}.bottom-nav button.active{color:var(--gold)}
dialog{width:min(620px,94vw);max-height:90dvh;padding:0;border:1px solid #3a2a2f;border-radius:24px;background:#09090d;color:white;box-shadow:var(--shadow)}
dialog::backdrop{background:rgba(0,0,0,.82);backdrop-filter:blur(6px)}
dialog img{display:block;width:100%;height:auto}
.modal-close{position:sticky;top:12px;float:right;margin:12px;z-index:2;width:42px;height:42px;border-radius:50%;border:1px solid #4a3b40;background:#111;color:white;font-size:1.5rem}
#simpleModalContent{padding:52px 22px 26px}
#simpleModalContent h2{margin-top:0}.note-item{padding:14px 0;border-bottom:1px solid #222;color:#ccc}
@media (min-width:700px){.app-main{padding-left:26px;padding-right:26px}.hero-card{padding:44px}}

/* Voz a texto */
.voice-row{
  display:flex;align-items:center;gap:10px;margin-top:10px;flex-wrap:wrap
}
.voice-btn{
  border:1px solid rgba(225,173,73,.35);
  background:linear-gradient(180deg,#121218,#0b0b10);
  color:#f6f3ef;border-radius:999px;padding:10px 15px;
  display:inline-flex;align-items:center;gap:8px;font-weight:800;
  box-shadow:0 8px 24px rgba(0,0,0,.18)
}
.voice-btn.listening{
  border-color:var(--pink);
  background:rgba(242,11,103,.12);
  box-shadow:0 0 0 4px rgba(242,11,103,.07),0 0 24px rgba(242,11,103,.18)
}
.voice-btn.unsupported{opacity:.55;cursor:not-allowed}
.voice-icon{font-size:1rem}
.voice-status{color:#8f8984;line-height:1.35}
.voice-status.live{color:var(--pink);font-weight:700}
.voice-status.done{color:var(--gold)}
@media(max-width:420px){
  .voice-row{align-items:flex-start}
  .voice-status{width:100%;padding-left:4px}
}

/* Mejora de scroll en bienvenida */
.scroll-hint{
  display:flex;
  flex-direction:column;
  align-items:center;
  gap:6px;
  margin:12px auto 2px;
  color:#d5b477;
  opacity:.95;
  cursor:pointer;
  user-select:none;
}
.scroll-hint small{
  letter-spacing:.08em;
  text-transform:uppercase;
  font-size:.68rem;
}
.scroll-arrow{
  display:grid;
  place-items:center;
  width:34px;
  height:34px;
  border:1px solid rgba(225,173,73,.45);
  border-radius:50%;
  background:rgba(255,255,255,.02);
  animation:bounceArrow 1.7s infinite;
  font-size:1.25rem;
  line-height:1;
}
@keyframes bounceArrow{
  0%,20%,50%,80%,100%{transform:translateY(0)}
  40%{transform:translateY(6px)}
  60%{transform:translateY(3px)}
}
@media (max-height:760px){
  .hero-card{
    min-height:auto !important;
    padding-top:24px;
    padding-bottom:18px;
  }
  .mystery-orb{
    height:112px;
    width:112px;
    margin:18px auto;
  }
  h1{
    font-size:clamp(1.85rem,7vw,3rem);
  }
}

.primary-btn.pulse-once{
  animation:pulseBtn .9s ease 1;
}
@keyframes pulseBtn{
  0%{transform:scale(1)}
  35%{transform:scale(1.03)}
  100%{transform:scale(1)}
}

/* =============================
   V4 · Más movimiento e inspiración
   ============================= */

body{overflow-x:hidden}
.app-shell{position:relative;overflow:hidden}
.app-main,.topbar,.bottom-nav{position:relative;z-index:2}

/* Fondo vivo, muy sutil */
.ambient{
  position:fixed;z-index:0;pointer-events:none;border-radius:50%;
  filter:blur(20px);opacity:.24;mix-blend-mode:screen;
}
.ambient-a{
  width:180px;height:180px;left:-90px;top:18vh;
  background:radial-gradient(circle,rgba(242,11,103,.45),transparent 68%);
  animation:floatA 8s ease-in-out infinite;
}
.ambient-b{
  width:220px;height:220px;right:-110px;top:44vh;
  background:radial-gradient(circle,rgba(225,173,73,.35),transparent 70%);
  animation:floatB 10s ease-in-out infinite;
}
.ambient-c{
  width:150px;height:150px;left:38%;top:72vh;
  background:radial-gradient(circle,rgba(129,82,255,.20),transparent 70%);
  animation:floatC 12s ease-in-out infinite;
}
@keyframes floatA{0%,100%{transform:translateY(0) scale(1)}50%{transform:translateY(30px) scale(1.08)}}
@keyframes floatB{0%,100%{transform:translateY(0) translateX(0)}50%{transform:translateY(-34px) translateX(-12px)}}
@keyframes floatC{0%,100%{transform:translateY(0)}50%{transform:translateY(-25px)}}

/* Bienvenida más compacta en pantallas pequeñas */
.hero-card{
  min-height:auto !important;
  padding-top:24px;
  padding-bottom:18px;
}
.hero-title{
  animation:heroRise .75s ease both;
}
@keyframes heroRise{
  from{opacity:0;transform:translateY(18px)}
  to{opacity:1;transform:translateY(0)}
}
.hero-card>p{animation:heroRise .85s .08s ease both}

.shimmer-pill{
  position:relative;overflow:hidden;
}
.shimmer-pill::after{
  content:"";position:absolute;inset:-2px auto -2px -45%;
  width:38%;transform:skewX(-22deg);
  background:linear-gradient(90deg,transparent,rgba(255,255,255,.28),transparent);
  animation:pillShimmer 3.2s infinite;
}
@keyframes pillShimmer{
  0%{left:-45%}
  55%,100%{left:120%}
}

.mantra-strip{
  margin:14px auto 2px;display:flex;gap:8px;justify-content:center;
  flex-wrap:wrap;font-size:.62rem;letter-spacing:.10em;font-weight:800;
  color:#d9c59a
}
.mantra-strip span{animation:mantraGlow 3s ease-in-out infinite}
.mantra-strip span:nth-child(3){animation-delay:.35s}
.mantra-strip span:nth-child(5){animation-delay:.7s}
.mantra-strip i{font-style:normal;color:#6d6254}
@keyframes mantraGlow{
  0%,100%{opacity:.46}
  50%{opacity:1;text-shadow:0 0 18px rgba(225,173,73,.35)}
}

.mystery-orb{
  position:relative;
  animation:orbBreath 3.2s ease-in-out infinite;
}
.mystery-orb::before,
.mystery-orb::after{
  content:"";position:absolute;border-radius:50%;inset:-10px;
  border:1px solid rgba(225,173,73,.10);
  animation:ringPulse 3.2s ease-out infinite;
}
.mystery-orb::after{inset:-22px;animation-delay:1.4s}
@keyframes orbBreath{
  0%,100%{transform:scale(1);box-shadow:inset 0 0 55px rgba(225,173,73,.06),0 0 35px rgba(242,11,103,.08)}
  50%{transform:scale(1.025);box-shadow:inset 0 0 60px rgba(225,173,73,.10),0 0 65px rgba(242,11,103,.14)}
}
@keyframes ringPulse{
  0%{opacity:.45;transform:scale(.94)}
  70%,100%{opacity:0;transform:scale(1.12)}
}

/* Indicador fijo SIEMPRE visible en la bienvenida, incluso en pantallas bajitas */
.scroll-dock{
  position:fixed;
  left:50%;bottom:82px;transform:translateX(-50%);
  z-index:40;
  display:flex;align-items:center;gap:8px;
  padding:8px 13px;
  border:1px solid rgba(225,173,73,.38);
  background:rgba(7,7,10,.88);
  backdrop-filter:blur(14px);
  border-radius:999px;
  color:#e4c989;
  box-shadow:0 8px 28px rgba(0,0,0,.34);
  font-size:.70rem;letter-spacing:.10em;text-transform:uppercase;
  transition:opacity .2s ease,transform .2s ease;
}
.scroll-dock b{
  font-size:1.05rem;
  animation:dockBounce 1.25s infinite;
}
@keyframes dockBounce{
  0%,100%{transform:translateY(-1px)}
  50%{transform:translateY(4px)}
}
.scroll-dock.hidden{
  opacity:0;pointer-events:none;
  transform:translateX(-50%) translateY(12px);
}
.scroll-hint-inline{margin-bottom:4px}

/* CTA con sensación viva */
.primary-btn{
  position:relative;overflow:hidden;
  transition:transform .18s ease,filter .18s ease;
}
.primary-btn:active{transform:scale(.985)}
.primary-btn::after{
  content:"";position:absolute;top:-40%;left:-35%;
  width:28%;height:180%;transform:rotate(18deg);
  background:linear-gradient(90deg,transparent,rgba(255,255,255,.22),transparent);
  animation:ctaSweep 4s infinite;
}
@keyframes ctaSweep{
  0%,58%{left:-35%}
  85%,100%{left:125%}
}

/* Revelación más emocional */
.reveal-word{
  animation:leaderReveal .95s cubic-bezier(.2,.8,.2,1) both;
}
@keyframes leaderReveal{
  0%{opacity:0;letter-spacing:.35em;transform:scale(.92);filter:blur(4px)}
  100%{opacity:1;letter-spacing:normal;transform:scale(1);filter:none}
}

/* Tarjetas con interacción */
.steps article,.lens,.today-card,.challenge-card,.summary-grid>div{
  transition:transform .2s ease,border-color .2s ease,box-shadow .2s ease;
}
.steps article:hover,.lens:hover{
  transform:translateY(-2px);
  border-color:rgba(225,173,73,.28);
}
.lens[open]{
  border-color:rgba(242,11,103,.38);
  box-shadow:0 12px 35px rgba(0,0,0,.20);
}
.lens[open] summary{
  color:#fff;
}
.lens[open] summary span{
  animation:lensTick .35s ease both;
}
@keyframes lensTick{
  0%{transform:scale(.6);opacity:.3}
  100%{transform:scale(1);opacity:1}
}
.section-kicker{
  color:#bdb5ad;line-height:1.55;margin:-10px 0 20px;
}

/* Cierre celebratorio */
[data-screen="completed"]{position:relative;overflow:hidden}
.celebration{
  position:absolute;inset:0;pointer-events:none;z-index:-1;
  background:
    radial-gradient(circle at 20% 20%,rgba(225,173,73,.18) 0 2px,transparent 3px),
    radial-gradient(circle at 80% 16%,rgba(242,11,103,.15) 0 2px,transparent 3px),
    radial-gradient(circle at 72% 58%,rgba(225,173,73,.15) 0 2px,transparent 3px),
    radial-gradient(circle at 30% 72%,rgba(242,11,103,.13) 0 2px,transparent 3px);
  background-size:70px 70px,90px 90px,110px 110px,85px 85px;
  animation:celebrationMove 10s linear infinite;
}
@keyframes celebrationMove{
  from{background-position:0 0,0 0,0 0,0 0}
  to{background-position:0 120px,0 160px,0 200px,0 150px}
}
.completion-orb{
  animation:completePop .65s cubic-bezier(.2,.9,.25,1.35) both, orbBreath 3.2s .65s ease-in-out infinite;
}
@keyframes completePop{
  from{opacity:0;transform:scale(.4) rotate(-12deg)}
  to{opacity:1;transform:scale(1) rotate(0)}
}

/* En pantallas especialmente pequeñas */
@media(max-height:700px){
  .topbar{padding-top:10px;padding-bottom:10px}
  .hero-card{padding:18px 18px 14px}
  .pill{margin-bottom:14px;padding:7px 12px}
  h1{font-size:clamp(1.55rem,6.2vw,2.35rem);margin-bottom:10px}
  .hero-card p{font-size:.88rem;line-height:1.45}
  .mantra-strip{font-size:.56rem;margin-top:8px}
  .mystery-orb{height:84px;width:84px;margin:12px auto;padding:10px}
  .mystery-orb span{font-size:.60rem}
  .primary-btn{margin-top:12px;padding:14px 16px}
  .scroll-hint-inline{display:none}
  .scroll-dock{bottom:78px}
}
@media(max-height:610px){
  .brand small{display:none}
  .hero-card{padding-top:12px}
  .hero-card p{font-size:.82rem}
  .mystery-orb{height:74px;width:74px;margin:9px auto}
  .scroll-dock{bottom:74px;padding:7px 11px}
}

/* =============================
   V5 · Lentes guiados
   ============================= */
.lens-intro{
  display:flex;
  align-items:center;
  gap:10px;
  margin:0 0 14px;
  color:#bdb5ad;
  padding:12px 14px;
  border:1px solid rgba(225,173,73,.14);
  border-radius:16px;
  background:rgba(255,255,255,.02);
}
.tap-dot{
  width:12px;height:12px;border-radius:50%;
  background:var(--gold);
  box-shadow:0 0 0 0 rgba(225,173,73,.4);
  animation:tapPulse 1.8s infinite;
}
@keyframes tapPulse{
  0%{box-shadow:0 0 0 0 rgba(225,173,73,.35)}
  70%{box-shadow:0 0 0 12px rgba(225,173,73,0)}
  100%{box-shadow:0 0 0 0 rgba(225,173,73,0)}
}
.guided-lenses .lens{
  position:relative;
}
.guided-lenses .lens summary{
  display:grid;
  grid-template-columns:auto 1fr auto auto;
  align-items:center;
  gap:12px;
}
.summary-hint{
  justify-self:end;
  font-style:normal;
  font-size:.68rem;
  color:#9f9589;
  letter-spacing:.04em;
}
.chev{
  font-style:normal;
  color:var(--gold);
  font-size:1.15rem;
  transition:transform .25s ease, color .2s ease;
}
.guided-lenses .lens[open] .chev{
  transform:rotate(180deg);
  color:var(--pink);
}
.guided-lenses .lens[open] .summary-hint{
  color:#d7b476;
}
.guided-lenses .lens.active-pulse summary{
  animation:activeLensPulse 1.7s ease-in-out infinite;
}
@keyframes activeLensPulse{
  0%,100%{box-shadow:0 0 0 0 rgba(242,11,103,0)}
  50%{box-shadow:0 0 0 6px rgba(242,11,103,.05)}
}
.lens-next{
  margin-top:14px;
  border:1px solid rgba(225,173,73,.25);
  background:rgba(242,11,103,.08);
  color:#fff;
  border-radius:999px;
  padding:10px 14px;
  font-weight:800;
  letter-spacing:.03em;
}
.lens-next:active{transform:scale(.985)}
.lens-end{
  margin-top:14px;
  padding:12px 14px;
  border:1px solid rgba(225,173,73,.2);
  border-radius:14px;
  background:rgba(225,173,73,.06);
  color:#e8d19c;
  font-weight:700;
}
@media(max-width:420px){
  .guided-lenses .lens summary{
    grid-template-columns:auto 1fr auto;
  }
  .summary-hint{
    grid-column:2 / span 1;
    justify-self:start;
    margin-top:3px;
    font-size:.62rem;
  }
  .chev{
    grid-column:3 / span 1;
    grid-row:1 / span 2;
    align-self:center;
  }
}

/* =============================
   V6 · Voz móvil y permisos
   ============================= */
.voice-btn.permission-needed{
  border-color:rgba(225,173,73,.55);
  box-shadow:0 0 0 3px rgba(225,173,73,.05);
}
.voice-btn.fallback{
  border-color:#3c3942;
  background:#101017;
}
.voice-help{
  padding:54px 22px 26px;
}
.voice-help h2{
  margin:0 0 12px;
  font-size:1.9rem;
  line-height:1.08;
}
.voice-help>p{
  color:#bdb7b1;
  line-height:1.55;
}
.keyboard-mic-demo{
  display:grid;
  grid-template-columns:36px 1fr;
  gap:10px 12px;
  margin:20px 0 8px;
}
.keyboard-mic-demo span{
  width:30px;height:30px;border-radius:50%;
  display:grid;place-items:center;
  background:rgba(242,11,103,.12);
  color:var(--pink);
  border:1px solid rgba(242,11,103,.3);
  font-weight:800;
}
.keyboard-mic-demo p{
  margin:4px 0 10px;
  color:#d5d0ca;
  line-height:1.45;
}

/* =============================
   V7 · Cierre del día más visible
   ============================= */
.question-highlight{
  margin-top:26px;
  padding:18px;
  border:1px solid rgba(225,173,73,.24);
  border-radius:22px;
  background:
    linear-gradient(180deg,rgba(225,173,73,.055),rgba(242,11,103,.035)),
    #0b0b10;
  box-shadow:0 18px 45px rgba(0,0,0,.20);
}
.question-badge{
  display:inline-block;
  margin-bottom:10px;
  padding:6px 10px;
  border-radius:999px;
  background:rgba(242,11,103,.12);
  border:1px solid rgba(242,11,103,.28);
  color:var(--pink);
  font-size:.66rem;
  font-weight:900;
  letter-spacing:.14em;
}
.question-title{
  margin:0 0 6px;
  font-size:1.15rem;
  font-weight:850;
  color:#fff;
}
.question-help{
  margin:0 0 14px;
  color:#9f9993;
  font-size:.85rem;
  line-height:1.45;
}
.completion-chips{
  display:grid !important;
  grid-template-columns:1fr;
  gap:10px;
}
.completion-chips button{
  width:100%;
  min-height:58px;
  display:grid;
  grid-template-columns:34px 1fr;
  align-items:center;
  text-align:left;
  gap:10px;
  border-radius:16px;
  border:1px solid #3a3236;
  background:linear-gradient(180deg,#111118,#0b0b10);
  color:#e8e4df;
  padding:12px 14px;
  transition:transform .18s ease,border-color .18s ease,background .18s ease,box-shadow .18s ease;
}
.completion-chips button span{
  width:30px;height:30px;border-radius:50%;
  display:grid;place-items:center;
  border:1px solid rgba(225,173,73,.28);
  color:var(--gold);
  font-size:.95rem;
}
.completion-chips button strong{
  font-size:.98rem;
}
.completion-chips button:active{
  transform:scale(.985);
}
.completion-chips button.selected{
  border-color:var(--pink);
  background:linear-gradient(180deg,rgba(242,11,103,.18),rgba(225,173,73,.08));
  color:#fff;
  box-shadow:0 0 0 3px rgba(242,11,103,.07),0 10px 30px rgba(242,11,103,.08);
}
.completion-chips button.selected span{
  background:var(--pink);
  border-color:var(--pink);
  color:#fff;
}
@media(min-width:520px){
  .completion-chips{
    grid-template-columns:repeat(3,1fr);
  }
  .completion-chips button{
    grid-template-columns:1fr;
    text-align:center;
    justify-items:center;
    min-height:98px;
  }
}