:root{
  --green:#007a4d;
  --green-dark:#005b3a;
  --green-mid:#14935d;
  --ink:#0b3b2c;
  --muted:#5f645f;
  --line:#e3e7e4;
  --card:#f5f7f6;
  font-family:Arial,Helvetica,sans-serif;
}
*{box-sizing:border-box}
html,body{margin:0;min-height:100%;background:#e9efeb;color:var(--ink)}
button{font:inherit}
.app{max-width:520px;margin:auto;background:#fff}
.screen{height:100dvh;min-height:640px;position:relative;overflow:hidden;background:#fff}
.hidden{display:none!important}

/* Marca */
.brand{display:flex;align-items:center;gap:10px;color:var(--green-dark)}
.crest{width:62px;height:62px;overflow:hidden;position:relative;flex:0 0 62px}
.crop-crest img{position:absolute;width:78px;height:auto;left:-8px;top:-3px}
.brand-text b,.brand-text small{display:block;white-space:nowrap}
.brand-text b{font-size:14px;letter-spacing:.01em}
.brand-text small{font-size:10px;margin-top:3px;letter-spacing:.025em}
.brand-on-video{color:#fff}
.brand-on-video .crest{background:transparent;width:62px;height:62px;flex-basis:62px}.brand-on-video .crest img{filter:none;width:78px;left:-8px;top:-3px}
.brand-on-video .brand-text{filter:drop-shadow(0 1px 2px #0008)}

/* Abertura */
.intro{background:#0c3d2f}
.intro-video{position:absolute;inset:0;width:100%;height:100%;object-fit:cover}
.intro-shade{position:absolute;inset:0;background:linear-gradient(180deg,#072a2058 0%,transparent 31%,transparent 48%,#031812e5 100%)}
.intro-header{position:absolute;left:0;right:0;top:0;display:flex;justify-content:space-between;align-items:center;padding:calc(16px + env(safe-area-inset-top)) 24px 0}
.text-btn{border:0;background:transparent;color:#fff;font-size:16px;text-shadow:0 1px 2px #0008;padding:12px}
.intro-copy{position:absolute;left:30px;right:24px;bottom:145px;color:#fff;text-shadow:0 1px 2px #0009}
.intro-copy h1{font-size:35px;line-height:1;margin:0 0 13px}
.intro-copy h2{font-size:17px;line-height:1.45;margin:0 0 15px}
.intro-copy p{font-size:16px;line-height:1.45;margin:0}
.intro-controls{position:absolute;left:30px;right:30px;bottom:calc(27px + env(safe-area-inset-bottom));color:#fff}
.progress{height:5px;border-radius:4px;background:#ffffff6e;overflow:hidden}
.progress span{display:block;height:100%;width:0;background:#1de678}
.time{display:flex;align-items:center;justify-content:space-between;margin-top:8px;font-size:14px}
.time button{border:0;background:transparent;color:#fff;font-size:24px;font-weight:700}
.sound{position:absolute;right:0;bottom:38px;padding:8px 14px;border:1px solid #ffffffa0;border-radius:22px;background:#07533fd6;color:#fff}

/* Cabeçalho */
.header{height:108px;display:flex;align-items:center;justify-content:space-between;padding:calc(10px + env(safe-area-inset-top)) 27px 10px;background:#fff}
.menu{width:40px;height:40px;border:0;background:transparent;color:var(--green-dark);display:grid;place-items:center}
.menu svg{width:28px;height:28px;fill:none;stroke:currentColor;stroke-width:1.8;stroke-linecap:round}

/* Home */
.home-main{text-align:center;padding:32px 25px 100px}
.home-main h1{text-align:left;font-size:39px;line-height:1.08;margin:0 0 40px;font-weight:700;color:#073b2b}
.cards{display:grid;grid-template-columns:repeat(3,1fr);gap:12px;margin-bottom:55px}
.cards button{height:138px;border:0;border-radius:16px;background:var(--card);color:#102f25;padding:20px 4px 10px;display:flex;flex-direction:column;align-items:center;justify-content:flex-start;gap:14px}
.cards svg{width:42px;height:42px;fill:none;stroke:var(--green);stroke-width:1.7;stroke-linecap:round;stroke-linejoin:round}
.cards span{font-size:14px;line-height:1.22}
.mic{width:132px;height:132px;border:0;border-radius:50%;background:linear-gradient(145deg,#15a05f,#008149);display:grid;place-items:center;box-shadow:0 0 0 18px #dff4e8,0 0 0 31px #eff9f3}
.mic svg{width:67px;height:67px;fill:none;stroke:#fff;stroke-width:5;stroke-linecap:round;stroke-linejoin:round}
.home-main h2{font-size:24px;color:var(--green);margin:42px 0 6px}
.home-main p{font-size:17px;color:#666;margin:0}

/* Navegação */
.bottom-nav{height:84px;position:absolute;left:0;right:0;bottom:0;display:grid;grid-template-columns:repeat(3,1fr);border-top:1px solid var(--line);background:#fff;padding-bottom:env(safe-area-inset-bottom)}
.bottom-nav button{border:0;background:transparent;color:#525752;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:4px;font-size:12px}
.bottom-nav svg{width:27px;height:27px;fill:none;stroke:currentColor;stroke-width:1.7;stroke-linecap:round;stroke-linejoin:round}
.bottom-nav .active{color:var(--green)}

/* Ouvindo */
.listen-main{text-align:center;padding:68px 30px 100px}
.listen-main h1{font-size:25px;color:var(--green);margin:0 0 78px}
.listening-mic{width:154px;height:154px;box-shadow:0 0 0 25px #d8f1e3,0 0 0 48px #ecf8f1,0 0 0 65px #f6fbf8}
.listen-main>p{font-size:17px;line-height:1.5;color:#666;margin:88px 0 44px}
.cancel{min-width:185px;border:2px solid #d4e5dc;background:#fff;border-radius:28px;padding:13px 28px;color:var(--green);font-size:17px}
.error{margin:18px auto 0;max-width:350px;padding:12px;border-radius:10px;background:#fff3f1;color:#9d2d22;font-size:13px}
.pulse{animation:pulse 1.1s infinite}
@keyframes pulse{50%{box-shadow:0 0 0 33px #d8f1e3,0 0 0 58px #ecf8f1,0 0 0 73px #f6fbf8}}

@media(max-width:390px){
  .brand-text b{font-size:12px}.brand-text small{font-size:9px}.crest{width:55px;height:55px;flex-basis:55px}.crop-crest img{width:70px}
  .home-main h1{font-size:34px}.cards{gap:9px}.cards button{height:128px}
}
@media(min-width:700px){
  body{padding:20px}.screen{height:calc(100dvh - 40px);border-radius:28px}.app{box-shadow:0 20px 60px #0002;border-radius:28px;overflow:hidden}
}


/* v7 — correções baseadas diretamente na referência aprovada */
.start-welcome{
  position:absolute;
  z-index:5;
  left:50%;
  top:46%;
  transform:translate(-50%,-50%);
  display:flex;
  align-items:center;
  gap:10px;
  border:1px solid rgba(255,255,255,.8);
  border-radius:28px;
  padding:12px 18px;
  background:rgba(0,75,53,.78);
  color:#fff;
  font-size:16px;
  box-shadow:0 4px 18px rgba(0,0,0,.18);
}
.start-play{font-size:14px}
.intro.started .start-welcome{display:none}
.intro:not(.started) .intro-copy,
.intro:not(.started) .intro-controls{opacity:.92}

.mic-wrap{
  width:100%;
  display:flex;
  justify-content:center;
  align-items:center;
  margin:0 auto;
}
.home-main .mic{margin:0;flex:0 0 auto}

/* peso e acabamento dos ícones da referência */
.cards svg{
  width:42px;
  height:42px;
  fill:none;
  stroke:var(--green);
  stroke-width:2.05;
  stroke-linecap:round;
  stroke-linejoin:round;
}
.cards .icon-dot{stroke-width:2.8}
.cards button{gap:13px}

.bottom-nav svg{
  width:27px;
  height:27px;
  fill:none;
  stroke:currentColor;
  stroke-width:1.8;
  stroke-linecap:round;
  stroke-linejoin:round;
}
.bottom-nav .active .home-icon{
  fill:currentColor;
  stroke:currentColor;
  stroke-width:1.5;
}
.mic svg{stroke-width:5.4}
.intro-brand .brand-text{color:#fff}

/* v8 — asset oficial local transparente e ícones restaurados */
.crest{
  width:64px;
  height:64px;
  flex:0 0 64px;
  overflow:visible;
  display:flex;
  align-items:center;
  justify-content:center;
}
.crop-crest img,
.brand-on-video .crest img{
  position:static;
  width:60px;
  height:60px;
  object-fit:contain;
  filter:none;
}
.brand-on-video .crest{
  width:64px;
  height:64px;
  flex-basis:64px;
  background:transparent;
}

/* ícones superiores: desenho forte e arredondado da referência */
.cards .feature-icon{
  width:44px;
  height:44px;
  fill:none;
  stroke:var(--green);
  stroke-width:3.2;
  stroke-linecap:round;
  stroke-linejoin:round;
}
.cards .feature-icon .detail{
  stroke-width:3.4;
}
.cards .feature-icon .calendar-dots{
  stroke-width:4.2;
}

/* v9 — os três ícones são pixels extraídos do mockup aprovado.
   NÃO redesenhar, NÃO alterar geometria. */
.cards .approved-feature-icon{
  display:block;
  width:42px;
  height:42px;
  object-fit:contain;
}

/* v10 — ÚNICA correção: centralização do conjunto do microfone na tela "Estou ouvindo". */
.listening-mic-wrap{
  width:100%;
  display:flex;
  justify-content:center;
  align-items:center;
  margin:0 auto;
}
.listening-mic-wrap .listening-mic{
  margin:0;
  flex:0 0 auto;
}