/* MatrimonIA — sistema de design (do protótipo do handoff).
   cream #FAF6F0 · bordô #6B1F2A · dourado #B8915A · tinta #211B18 · rosé #E7CFC8
   Cormorant Garamond (display) + Inter (texto). Responsivo. */

:root {
  --cream: #FAF6F0;
  --bordo: #6B1F2A;
  --bordo-soft: #5a2730;
  --gold: #B8915A;
  --ink: #211B18;
  --rose: #E7CFC8;
  --ink-70: rgba(33, 27, 24, .70);
  --ink-60: rgba(33, 27, 24, .62);
  --ink-45: rgba(33, 27, 24, .45);
  --ink-12: rgba(33, 27, 24, .12);
  --serif: 'Cormorant Garamond', Georgia, 'Times New Roman', serif;
  --sans: 'Inter', system-ui, -apple-system, sans-serif;
  --shadow-soft: 0 2px 10px rgba(33, 27, 24, .07);
  --radius: 18px;
}

* { box-sizing: border-box; }

html, body { margin: 0; padding: 0; min-height: 100%; }

body {
  background: var(--cream);
  color: var(--ink);
  font-family: var(--sans);
  font-size: 16px;
  line-height: 1.5;
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
}

h1, h2, h3 { font-family: var(--serif); font-weight: 500; margin: 0; letter-spacing: -.01em; }

a { color: inherit; text-decoration: none; }

:focus-visible { outline: 2px solid var(--gold); outline-offset: 3px; border-radius: 4px; }

.marca { font-family: var(--serif); font-weight: 600; font-size: 1.45rem; letter-spacing: .01em; }
.marca em { font-style: normal; color: var(--bordo); }

.eyebrow {
  font-size: .75rem; font-weight: 600; letter-spacing: .13em;
  text-transform: uppercase; color: var(--gold);
}

/* Botões */
.btn {
  display: inline-flex; align-items: center; justify-content: center; gap: .7rem;
  height: 56px; padding: 0 1.4rem; border-radius: var(--radius);
  font-family: var(--sans); font-size: 1rem; font-weight: 600;
  cursor: pointer; border: 0; width: 100%; transition: transform .12s ease, box-shadow .12s ease;
}
.btn:active { transform: translateY(1px); }
.btn-primario { background: var(--bordo); color: var(--cream); }
.btn-primario:hover { box-shadow: 0 6px 18px -6px rgba(107, 31, 42, .5); }
.btn-claro { background: #fff; color: var(--ink); box-shadow: var(--shadow-soft); }
.btn-contorno { background: transparent; color: var(--ink); border: 1.5px solid var(--ink-12); }

.g-badge {
  width: 24px; height: 24px; border-radius: 50%; background: var(--ink); color: var(--cream);
  display: inline-flex; align-items: center; justify-content: center;
  font-family: var(--serif); font-weight: 600; font-size: .95rem;
}

.legal { font-size: .78rem; line-height: 1.5; color: var(--ink-45); }

/* ── Tela de boas-vindas / login (tela 01, responsiva) ────────────────── */
.entrar {
  min-height: 100vh; min-height: 100dvh;
  display: grid; grid-template-columns: 1fr; align-items: stretch;
}
.entrar__palco {
  position: relative; overflow: hidden;
  display: flex; flex-direction: column; justify-content: center;
  padding: clamp(1.5rem, 5vw, 4rem);
  max-width: 560px; width: 100%; margin: 0 auto;
}
.entrar__marca { padding-top: .5rem; }
.entrar__miolo { flex: 1; display: flex; flex-direction: column; justify-content: center; position: relative; z-index: 1; }
.entrar__curva {
  position: absolute; top: -8%; right: -12%; width: min(360px, 80%); opacity: .55;
  pointer-events: none; z-index: 0;
}
.entrar h1 {
  font-size: clamp(2.875rem, 7vw, 4.5rem); line-height: 1.02; margin: 1.1rem 0 0;
}
.entrar__sub { font-size: 1.05rem; color: var(--ink-60); margin: 1.3rem 0 0; max-width: 34ch; }
.entrar__acoes { display: flex; flex-direction: column; gap: .75rem; padding-top: 2.625rem; }
.entrar__acoes .legal { text-align: center; margin: .5rem .5rem 0; }

/* Em telas largas: painel editorial + coluna calorosa à direita */
@media (min-width: 900px) {
  .entrar { grid-template-columns: 1.05fr .95fr; }
  .entrar__palco { max-width: 620px; margin: 0; }
  .entrar__lado {
    position: relative; overflow: hidden;
    background: linear-gradient(160deg, var(--rose), #efdcd4 70%);
  }
  .entrar__lado-curva { position: absolute; inset: 0; display: flex; align-items: center; justify-content: center; opacity: .5; }
}

/* ── Shell de app (colunas de conversa/plano; responsivo, coluna central) ── */
.app {
  min-height: 100vh; min-height: 100dvh;
  display: flex; flex-direction: column;
  max-width: 560px; margin: 0 auto; background: var(--cream);
  box-shadow: 0 0 60px -20px rgba(33, 27, 24, .12);
}
.app__topo {
  display: flex; align-items: center; gap: .9rem;
  padding: 1.1rem 1.375rem; border-bottom: 1px solid rgba(33, 27, 24, .06);
}
.app__voltar {
  width: 38px; height: 38px; flex: none; border: 0; cursor: pointer;
  border-radius: 50%; background: #fff; box-shadow: var(--shadow-soft);
  display: inline-flex; align-items: center; justify-content: center; color: var(--ink);
}
.app__titulo { font-size: 1.25rem; font-weight: 600; letter-spacing: -.01em; }
.app__sub { font-size: .8rem; color: var(--ink-45); margin-top: 1px; }
.app__corpo { flex: 1; overflow-y: auto; padding: 1.1rem 1.375rem; min-height: 0; }
.app__rodape { padding: .6rem 1.375rem 1.875rem; }

.avatar {
  width: 42px; height: 42px; flex: none; border-radius: 50%; background: var(--rose);
  display: inline-flex; align-items: center; justify-content: center;
  font-family: var(--serif); font-weight: 600; color: var(--bordo);
}
.avatar--sm { width: 30px; height: 30px; font-size: .95rem; }

/* Barra de progresso do onboarding */
.progresso { display: flex; align-items: center; gap: .9rem; padding: .4rem 1.375rem 1rem; }
.progresso__trilho { flex: 1; height: 6px; border-radius: 3px; background: rgba(107, 31, 42, .12); overflow: hidden; }
.progresso__cheio { height: 100%; border-radius: 3px; background: var(--bordo); }
.progresso__label { font-size: .8rem; font-weight: 600; color: var(--ink-45); }

/* Conversa */
.conversa { display: flex; flex-direction: column; gap: .9rem; }
.msg { display: flex; gap: .6rem; align-items: flex-end; max-width: 100%; }
.msg--madrinha { justify-content: flex-start; }
.msg--casal { justify-content: flex-end; }
.balao {
  padding: .875rem 1.0625rem; font-size: .95rem; line-height: 1.5; max-width: 80%;
}
.balao--madrinha { background: #fff; border-radius: 20px 20px 20px 6px; box-shadow: 0 1px 4px rgba(33, 27, 24, .05); }
.balao--casal { background: var(--bordo); color: var(--cream); border-radius: 20px 20px 6px 20px; }

/* Chips */
.chips { display: flex; flex-wrap: wrap; gap: .55rem; padding: .3rem 0 .3rem 2.5rem; }
.chip {
  padding: .6rem 1rem; border-radius: 22px; font-size: .9rem; font-weight: 500; cursor: pointer;
  background: #fff; border: 1px solid var(--ink-12); color: var(--ink); transition: all .12s ease;
}
.chip[aria-pressed="true"] { background: var(--bordo); color: var(--cream); border-color: var(--bordo); }

/* Barra de resposta */
.responder { display: flex; align-items: center; gap: .6rem; }
.responder__mais {
  width: 42px; height: 42px; flex: none; border-radius: 50%; border: 1.5px solid var(--ink-12);
  background: transparent; cursor: pointer; display: inline-flex; align-items: center; justify-content: center; color: var(--ink);
}
.responder__campo {
  flex: 1; height: 46px; border-radius: 23px; border: 0; background: #fff;
  box-shadow: inset 0 0 0 1px rgba(33, 27, 24, .07); padding: 0 1.1rem; font: inherit; font-size: .95rem; color: var(--ink);
}
.responder__campo::placeholder { color: rgba(33, 27, 24, .4); }
.responder__enviar {
  width: 46px; height: 46px; flex: none; border-radius: 50%; border: 0; cursor: pointer;
  background: var(--bordo); color: var(--cream); display: inline-flex; align-items: center; justify-content: center;
}
.responder__mic { opacity: .3; display: inline-flex; }

/* ── Tela 03 — preparando o plano (loading) ──────────────────────────── */
@keyframes mtFloat { 0%,100% { transform: translateY(0); } 50% { transform: translateY(-7px); } }
@keyframes mtDraw { from { stroke-dashoffset: 520; } to { stroke-dashoffset: 0; } }
@keyframes mtPulse { 0%,100% { opacity: .4; } 50% { opacity: 1; } }

.preparando { min-height: 100vh; min-height: 100dvh; max-width: 560px; margin: 0 auto;
  display: flex; flex-direction: column; align-items: center; justify-content: center; text-align: center; padding: 2rem; background: var(--cream); }
.preparando__curva { width: 188px; margin-bottom: 2.4rem; animation: mtFloat 4s ease-in-out infinite; }
.preparando__curva path { animation: mtDraw 2.6s ease-in-out infinite alternate; }
.preparando h2 { font-size: 2rem; line-height: 1.12; max-width: 20ch; margin-bottom: 1.9rem; }
.passos { display: flex; flex-direction: column; gap: .95rem; width: 100%; max-width: 300px; text-align: left; }
.passo { display: flex; align-items: center; gap: .75rem; font-size: .9rem; color: var(--ink-45); }
.passo__marca { width: 22px; height: 22px; flex: none; border-radius: 50%; display: inline-flex; align-items: center; justify-content: center; }
.passo--ok .passo__marca { background: var(--bordo); color: #fff; }
.passo--ativo { font-weight: 600; color: var(--ink); animation: mtPulse 1.8s ease-in-out infinite; }
.passo--ativo .passo__marca { border: 2px solid var(--gold); }
.passo--futuro { color: rgba(33,27,24,.32); }
.passo--futuro .passo__marca { border: 2px solid rgba(33,27,24,.18); }

/* ── Cabeçalho do app (tela 04+) ─────────────────────────────────────── */
.cab { display: flex; align-items: center; justify-content: space-between; padding: 1rem 1.375rem; border-bottom: 1px solid rgba(33,27,24,.06); }
.cab__id { display: flex; align-items: center; gap: .75rem; }
.cab__nome { font-family: var(--serif); font-size: 1.3rem; font-weight: 600; line-height: 1; }
.cab__meta { font-size: .78rem; color: var(--ink-45); margin-top: 3px; }
.cab__acao { width: 40px; height: 40px; border-radius: 50%; background: #fff; box-shadow: var(--shadow-soft); border: 0; cursor: pointer; display: inline-flex; align-items: center; justify-content: center; color: var(--ink); }

.dia { text-align: center; font-size: .78rem; color: rgba(33,27,24,.4); font-weight: 500; margin: .2rem 0 .3rem; }

/* Chips inline dentro da conversa (ações) */
.acoes-inline { display: flex; gap: .6rem; padding-left: 2.35rem; flex-wrap: wrap; }
.acao-chip { padding: .7rem 1.1rem; border-radius: 22px; font-size: .9rem; font-weight: 600; cursor: pointer; border: 0; }
.acao-chip--primaria { background: var(--bordo); color: var(--cream); }
.acao-chip--clara { background: #fff; border: 1px solid var(--ink-12); color: var(--ink); font-weight: 500; }

/* Cards de progresso (scroll horizontal) */
.stats { display: flex; gap: .65rem; overflow-x: auto; padding: .2rem 0; }
.stat { min-width: 138px; background: #fff; border-radius: 16px; padding: .85rem .95rem; box-shadow: 0 1px 4px rgba(33,27,24,.05); }
.stat__rot { font-size: .68rem; font-weight: 600; letter-spacing: .06em; text-transform: uppercase; color: var(--ink-45); }
.stat__num { font-family: var(--serif); font-size: 1.625rem; font-weight: 600; line-height: 1; margin: .375rem 0 .5rem; }
.stat__num--bordo { color: var(--bordo); }
.stat__barra { height: 4px; border-radius: 2px; background: rgba(107,31,42,.12); overflow: hidden; }
.stat__barra > span { display: block; height: 100%; border-radius: 2px; background: var(--bordo); }
.stats-titulo { font-size: .68rem; font-weight: 600; letter-spacing: .06em; text-transform: uppercase; color: var(--ink-45); padding: 0 .1rem .5rem; }

/* ── Tela 05 — meu plano ─────────────────────────────────────────────── */
.btn-ajustar { display: inline-flex; align-items: center; gap: .4rem; height: 36px; padding: 0 .9rem; border-radius: 18px; font-size: .82rem; font-weight: 600; cursor: pointer; background: #fff; border: 1px solid var(--ink-12); color: var(--ink); }
.plano-card { background: var(--bordo); color: var(--cream); border-radius: 22px; padding: 1.3rem 1.4rem; margin-bottom: 1.4rem; }
.plano-card__rot { font-size: .72rem; font-weight: 600; letter-spacing: .08em; text-transform: uppercase; opacity: .7; }
.plano-card__pct { display: flex; align-items: baseline; gap: .6rem; margin: .5rem 0 .9rem; }
.plano-card__pct b { font-family: var(--serif); font-size: 2.9rem; font-weight: 600; line-height: .9; }
.plano-card__pct span { font-size: .82rem; opacity: .8; }
.plano-card__barra { height: 5px; border-radius: 3px; background: rgba(231,207,200,.25); overflow: hidden; }
.plano-card__barra > span { display: block; height: 100%; background: var(--rose); border-radius: 3px; }

.etapas { display: flex; flex-direction: column; }
.etapa-linha { display: flex; gap: .9rem; }
.etapa-col { display: flex; flex-direction: column; align-items: center; }
.etapa-marca { width: 28px; height: 28px; flex: none; border-radius: 50%; display: inline-flex; align-items: center; justify-content: center; background: var(--cream); }
.etapa-marca--ok { background: var(--gold); color: #fff; }
.etapa-marca--ativo { border: 2.5px solid var(--bordo); }
.etapa-marca--todo { border: 2px solid rgba(33,27,24,.18); }
.etapa-tubo { width: 2px; flex: 1; background: rgba(184,145,90,.4); }
.etapa-tubo--claro { background: rgba(33,27,24,.12); }
.etapa-cont { padding-bottom: 1.1rem; flex: 1; }
.etapa-topo { display: flex; align-items: center; justify-content: space-between; gap: .5rem; }
.etapa-nome { font-size: 1rem; font-weight: 600; }
.etapa-nome--ativo { color: var(--bordo); }
.etapa-nome--todo { color: rgba(33,27,24,.55); }
.etapa-meta { font-size: .8rem; color: var(--ink-45); margin-top: 2px; }
.tag-and { font-size: .72rem; font-weight: 600; color: var(--bordo); background: rgba(107,31,42,.1); padding: 3px 9px; border-radius: 10px; white-space: nowrap; }

/* ── Tela 06 — tarefas ───────────────────────────────────────────────── */
.filtros { display: flex; gap: .5rem; padding: 0 0 .9rem; flex-wrap: wrap; }
.filtro { padding: .5rem .95rem; border-radius: 18px; font-size: .82rem; font-weight: 500; cursor: pointer; background: #fff; border: 1px solid rgba(33,27,24,.1); color: var(--ink-60); }
.filtro[aria-pressed="true"] { background: var(--bordo); color: var(--cream); border-color: var(--bordo); font-weight: 600; }
.tarefas { display: flex; flex-direction: column; gap: .7rem; }
.tarefa { background: rgba(255,255,255,.65); border-radius: 18px; padding: .95rem 1rem; display: flex; align-items: center; gap: .9rem; box-shadow: 0 1px 3px rgba(33,27,24,.04); }
.tarefa__check { width: 26px; height: 26px; flex: none; border-radius: 9px; border: 2px solid rgba(33,27,24,.22); background: rgba(255,255,255,.6); cursor: pointer; display: inline-flex; align-items: center; justify-content: center; color: #fff; }
.tarefa__check[aria-pressed="true"] { background: var(--bordo); border-color: var(--bordo); }
.tarefa__nome { font-size: .95rem; font-weight: 600; display: flex; align-items: center; gap: .45rem; }
.tarefa__nome--feita { text-decoration: line-through; color: rgba(33,27,24,.38); }
.tarefa__dot { width: 7px; height: 7px; border-radius: 50%; flex: none; }
.tarefa__meta { font-size: .78rem; color: var(--ink-45); margin-top: 3px; padding-left: .875rem; }

/* ── Tela 07 — cronograma ────────────────────────────────────────────── */
.crono { display: flex; flex-direction: column; }
.crono-linha { display: flex; gap: 1rem; }
.crono-mes { width: 54px; flex: none; text-align: right; font-size: .78rem; font-weight: 600; color: rgba(33,27,24,.55); padding-top: 2px; }
.crono-mes--agora { color: var(--bordo); }
.crono-mes--dia { font-family: var(--serif); font-size: 1.05rem; color: var(--gold); }
.crono-mes small { display: block; font-weight: 400; color: var(--ink-45); font-size: .7rem; }
.crono-col { display: flex; flex-direction: column; align-items: center; }
.crono-ponto { width: 14px; height: 14px; flex: none; border-radius: 50%; background: var(--cream); border: 2px solid rgba(33,27,24,.25); }
.crono-ponto--agora { background: var(--bordo); border: 3px solid var(--cream); box-shadow: 0 0 0 2px var(--bordo); }
.crono-ponto--dia { width: 16px; height: 16px; background: var(--gold); border: 0; }
.crono-tubo { width: 2px; flex: 1; background: rgba(33,27,24,.1); }
.crono-cont { flex: 1; padding-bottom: 1.1rem; }
.crono-card { background: rgba(255,255,255,.6); border-radius: 16px; padding: .9rem 1rem; }
.crono-card--ativo { background: #fff; box-shadow: 0 1px 4px rgba(33,27,24,.05); border-left: 3px solid var(--bordo); }
.crono-card--dia { background: var(--gold); color: var(--cream); box-shadow: none; }
.crono-card__topo { display: flex; align-items: center; justify-content: space-between; gap: .5rem; }
.crono-card__nome { font-size: .95rem; font-weight: 600; color: rgba(33,27,24,.75); }
.crono-card--ativo .crono-card__nome { color: var(--ink); }
.crono-card--dia .crono-card__nome { color: var(--cream); }
.crono-card__nome--dia { font-family: var(--serif); font-size: 1.25rem; }
.crono-card__meta { font-size: .78rem; color: var(--ink-45); margin-top: 4px; }
.crono-card--dia .crono-card__meta { color: rgba(250,246,240,.85); }
.crono-venc { font-size: .68rem; font-weight: 600; color: var(--bordo); background: rgba(107,31,42,.1); padding: 3px 8px; border-radius: 10px; white-space: nowrap; }

/* Placeholder de imagem */
.ph { background: repeating-linear-gradient(135deg,#ECDAD2 0 11px,#F6EFE8 11px 22px); display:flex; align-items:center; justify-content:center; }
.ph__rot { font-family: ui-monospace, Menlo, monospace; font-size:.66rem; color: rgba(107,31,42,.5); background: rgba(250,246,240,.7); padding:4px 9px; border-radius:6px; }

/* ── Tela 08 — Top-3 recomendações ───────────────────────────────────── */
.rec-titulo { font-family: var(--serif); font-size: 1.55rem; font-weight: 600; line-height: 1.05; }
.rec-sub { font-size: .8rem; color: var(--ink-45); margin-top: 5px; line-height: 1.4; }
.recs { display: flex; flex-direction: column; gap: .85rem; padding-top: .9rem; }
.rec-card { background: #fff; border-radius: 20px; overflow: hidden; box-shadow: 0 2px 10px rgba(33,27,24,.06); }
.rec-card__img { height: 96px; position: relative; }
.rec-card__x { position: absolute; top: 9px; right: 9px; width: 28px; height: 28px; border: 0; cursor: pointer; border-radius: 50%; background: rgba(250,246,240,.92); box-shadow: 0 1px 3px rgba(33,27,24,.12); display: inline-flex; align-items: center; justify-content: center; color: var(--ink); }
.rec-card__body { padding: .85rem 1rem 1rem; }
.rec-card__topo { display: flex; align-items: center; justify-content: space-between; gap: .5rem; }
.rec-card__nome { font-size: 1rem; font-weight: 600; }
.rec-card__tags { font-size: .68rem; font-weight: 600; color: var(--gold); letter-spacing: .02em; }
.rec-card__why { font-size: .82rem; color: var(--ink-60); line-height: 1.45; margin: .45rem 0 .85rem; }
.rec-card__acoes { display: flex; align-items: center; gap: .65rem; }
.rec-card__acoes .btn { height: 42px; border-radius: 14px; }
.rec-card__ver { height: 42px; padding: 0 1rem; border-radius: 14px; border: 1.5px solid rgba(33,27,24,.14); background: transparent; cursor: pointer; font: inherit; font-size: .9rem; font-weight: 500; color: var(--ink); display: inline-flex; align-items: center; white-space: nowrap; }
.rec-vazio { flex:1; display:flex; flex-direction:column; align-items:center; justify-content:center; text-align:center; padding: 3rem 2rem; }
.rec-vazio h3 { font-size: 1.5rem; }
.rec-vazio p { font-size: .9rem; color: var(--ink-45); margin-top: .5rem; }

/* ── Tela 09 — perfil do fornecedor ──────────────────────────────────── */
.perfil-hero { height: 288px; position: relative; background: repeating-linear-gradient(135deg, #E3CFC6 0 13px, #EFE3DA 13px 26px); }
.perfil-hero__voltar { position: absolute; top: 1rem; left: 1.1rem; width: 38px; height: 38px; border-radius: 50%; background: rgba(250,246,240,.92); box-shadow: 0 1px 3px rgba(33,27,24,.12); border: 0; cursor: pointer; display: inline-flex; align-items: center; justify-content: center; color: var(--ink); }
.perfil-hero__grad { position: absolute; left:0; right:0; bottom:0; height: 120px; background: linear-gradient(to top, rgba(33,27,24,.62), transparent); }
.perfil-hero__legenda { position: absolute; left: 1.375rem; bottom: 1.1rem; color: var(--cream); }
.perfil-hero__cat { font-size: .7rem; font-weight: 600; letter-spacing: .1em; text-transform: uppercase; opacity: .85; }
.perfil-hero__nome { font-family: var(--serif); font-size: 2rem; font-weight: 600; line-height: 1; margin-top: 4px; }
.perfil-corpo { padding: 1.1rem 1.375rem; }
.perfil-tags { display: flex; gap: .5rem; flex-wrap: wrap; margin-bottom: 1rem; }
.perfil-tag { padding: .45rem .8rem; border-radius: 16px; background: #fff; border: 1px solid rgba(33,27,24,.1); font-size: .78rem; font-weight: 500; }
.why { background: var(--rose); border-radius: 18px; padding: 1rem 1.05rem; margin-bottom: 1.1rem; }
.why__cab { display: flex; align-items: center; gap: .5rem; margin-bottom: .5rem; }
.why__cab .avatar { width: 24px; height: 24px; background: var(--bordo); color: var(--cream); font-size: .8rem; }
.why__rot { font-size: .7rem; font-weight: 600; letter-spacing: .05em; text-transform: uppercase; color: var(--bordo); }
.why__txt { font-size: .9rem; line-height: 1.5; color: var(--bordo-soft); }
.galeria { display: flex; gap: .6rem; margin-bottom: 1.1rem; }
.galeria > div { flex: 1; height: 62px; border-radius: 13px; background: repeating-linear-gradient(135deg,#ECDAD2 0 9px,#F6EFE8 9px 18px); }
.perfil-desc { font-size: .9rem; line-height: 1.6; color: var(--ink-60); }
.perfil-rodape { display: flex; gap: .7rem; padding: 1rem 1.375rem 1.3rem; border-top: 1px solid rgba(33,27,24,.06); }
.perfil-rodape .btn { flex: 1; height: 54px; }
.btn-heart { width: 54px; height: 54px; flex: none; border-radius: 17px; border: 1.5px solid var(--ink-12); background: transparent; cursor: pointer; display: inline-flex; align-items: center; justify-content: center; color: var(--bordo); }

/* ── Tela 10 — conta & privacidade ───────────────────────────────────── */
.usuario-card { background: #fff; border-radius: 20px; padding: 1rem 1.1rem; display: flex; align-items: center; gap: .9rem; box-shadow: 0 1px 4px rgba(33,27,24,.05); margin-bottom: 1.4rem; }
.usuario-card .avatar { width: 50px; height: 50px; font-size: 1.2rem; }
.usuario-card__nome { font-size: 1rem; font-weight: 600; }
.usuario-card__mail { font-size: .82rem; color: var(--ink-45); margin-top: 2px; }
.secao-rot { font-size: .7rem; font-weight: 600; letter-spacing: .07em; text-transform: uppercase; color: var(--ink-45); margin: 0 .3rem .6rem; }
.lista { background: #fff; border-radius: 18px; overflow: hidden; box-shadow: 0 1px 4px rgba(33,27,24,.05); margin-bottom: 1.5rem; }
.lista__item { padding: .95rem 1.1rem; display: flex; align-items: center; gap: .9rem; border-bottom: 1px solid rgba(33,27,24,.06); }
.lista__item:last-child { border-bottom: 0; }
.lista__txt { flex: 1; }
.lista__t { font-size: .95rem; font-weight: 500; }
.lista__t--perigo { color: var(--bordo); font-weight: 600; }
.lista__s { font-size: .78rem; color: var(--ink-45); margin-top: 2px; line-height: 1.45; }
.toggle { width: 44px; height: 26px; border-radius: 13px; background: rgba(33,27,24,.18); position: relative; border: 0; cursor: pointer; flex: none; transition: background .15s; }
.toggle[aria-pressed="true"] { background: var(--bordo); }
.toggle::after { content: ""; position: absolute; top: 3px; left: 3px; width: 20px; height: 20px; border-radius: 50%; background: #fff; transition: transform .15s; }
.toggle[aria-pressed="true"]::after { transform: translateX(18px); }
.conta-frase { text-align: center; font-family: var(--serif); font-size: 1.05rem; font-weight: 500; font-style: italic; color: var(--ink-45); margin-top: 1.4rem; }

/* ── Telas 11-13 — modo voz (blob animada da madrinha) ───────────────── */
@keyframes mtBreathe { 0%,100% { transform: scale(1); } 50% { transform: scale(1.05); } }
@keyframes mtGlow { 0%,100% { opacity:.55; transform:scale(.95); } 50% { opacity:1; transform:scale(1.06); } }
.voz { min-height:100vh; min-height:100dvh; max-width:560px; margin:0 auto; background:var(--cream); display:flex; flex-direction:column; align-items:center; }
.voz__cab { padding-top:1.6rem; text-align:center; }
.voz__nome { font-family:var(--serif); font-size:1.2rem; font-weight:600; }
.voz__status { font-size:.7rem; font-weight:600; letter-spacing:.16em; text-transform:uppercase; color:var(--gold); margin-top:.3rem; }
.voz__palco { flex:1; display:flex; align-items:center; justify-content:center; position:relative; width:100%; }
.voz__glow { position:absolute; width:260px; height:260px; border-radius:50%; background:radial-gradient(circle,rgba(107,31,42,.2),transparent 68%); filter:blur(9px); animation:mtGlow 4s ease-in-out infinite; }
.voz__blob { width:270px; overflow:visible; animation:mtBreathe 4.5s ease-in-out infinite; position:relative; }
.voz__botoes { display:flex; align-items:center; justify-content:space-between; width:100%; padding:0 2.75rem 2.75rem; }
.voz__mic { width:56px; height:56px; border-radius:50%; background:#fff; border:1.5px solid rgba(107,31,42,.35); cursor:pointer; display:inline-flex; align-items:center; justify-content:center; color:var(--bordo); box-shadow:0 2px 10px rgba(33,27,24,.08); }
.voz__fim { width:56px; height:56px; border-radius:50%; background:var(--bordo); border:0; cursor:pointer; display:inline-flex; align-items:center; justify-content:center; color:var(--cream); box-shadow:0 6px 18px -4px rgba(107,31,42,.5); }

/* --- Formulários de autenticação (login / criar conta) --- */
.form-auth { display:flex; flex-direction:column; gap:1.1rem; width:100%; max-width:340px; margin-top:1.6rem; text-align:left; }
.form-auth__erro { background:rgba(107,31,42,.08); color:var(--bordo); border:1px solid rgba(107,31,42,.25); border-radius:12px; padding:.7rem .9rem; font-size:.9rem; }
.form-auth__erro ul { margin:.3rem 0 0; padding-left:1.1rem; }
.campo { display:flex; flex-direction:column; gap:.35rem; }
.campo__rot { font-size:.82rem; font-weight:600; color:rgba(33,27,24,.7); }
.campo__in { font-family:var(--sans); font-size:1rem; padding:.8rem 1rem; border:1.5px solid rgba(33,27,24,.15); border-radius:12px; background:#fff; color:var(--ink); transition:border-color .15s; }
.campo__in:focus { outline:none; border-color:var(--gold); }
.form-auth .validation-message { color:var(--bordo); font-size:.82rem; }
.form-auth .btn { margin-top:.4rem; justify-content:center; }
.btn[disabled] { opacity:.5; cursor:not-allowed; }