/* ==========================================================================
   roonim.com - landing page
   ==========================================================================

   POR QUE HTML/CSS PURO, E NAO NEXT
     Esta pagina nao tem dado, rota, sessao nem formulario. Um framework aqui
     traria node_modules, passo de build e uma versao para envelhecer, em troca
     de nada: o entregavel e UM arquivo de texto. Sem build, o deploy da Vercel
     e a copia dos arquivos - nao ha o que quebrar as vesperas de uma reuniao.

   OS TOKENS SAO OS MESMOS DO APLICATIVO
     Copiados de e:/ag/roonim/app/globals.css, que por sua vez implementa
     ROO-010 secao 5 e o roonim_brand_assets_v0.1. A landing e o aplicativo
     precisam parecer o mesmo produto: quem clicar em "Entrar" nao pode achar
     que trocou de empresa.

   A CONTA DE CONTRASTE, repetida aqui de proposito
     O Roonim Teal (#16A6A1) da 3.0:1 com branco - passa em componente, reprova
     em texto normal. Por isso o botao primario e teal com texto NAVY (5.2:1) e
     o teal como TEXTO usa --teal-strong (#0E7C78, 5.0:1). Sobre o fundo navy
     do heroi, o teal claro (--teal-on-navy) e quem carrega texto.

   O LAYOUT (sessao LP-03)
     A LP-01 e a LP-02 tinham grade uniforme: tudo centrado, tres cartoes
     iguais lado a lado, cada bloco do mesmo tamanho do anterior. Le como
     template. A LP-03 quebrou isso com quatro regras:

       1. NENHUMA LINHA DE CARTOES IGUAIS. Onde havia tres cartoes com sombra,
          agora ha tres colunas de larguras diferentes (1.2fr 1fr 1fr) sem
          caixa, separadas por um filete no topo.
       2. AS MAQUETES SAO O ASSUNTO, nao ilustracao. Cada bloco de texto do
          "o que faz" tem a tela real do aplicativo do lado, e os lados
          alternam: texto/tela, tela/texto, texto/tela.
       3. NADA CENTRADO fora do rodape. Inclusive a chamada final, que hoje e
          titulo a esquerda e botao a direita.
       4. HIERARQUIA MAIS DURA. h1 vai a 4.25rem no desktop, peso 700; o corpo
          fica em 1.05rem cinza. O contraste entre os dois e o que faz a
          pagina parecer produto e nao folheto.

     Mobile continua sendo o caso normal: toda alternancia e uma coluna so
     abaixo de 900px, e o texto vem SEMPRE antes da tela (ordem de leitura).
   ========================================================================== */

/* A Inter mora no repositorio (48 KB, subset latin, variavel 400-700). Nao ha
   requisicao a fonts.gstatic.com: uma pagina que depende de terceiro para ter
   a propria tipografia nao tem tipografia. `swap` deixa o texto aparecer na
   hora com a fonte do sistema e trocar quando a Inter chega. */
@font-face {
  font-family: "Inter";
  src: url("assets/fonts/Inter-Variable-latin.woff2") format("woff2");
  font-weight: 400 700;
  font-style: normal;
  font-display: swap;
}

:root {
  color-scheme: light;

  --navy: #17233c;
  --navy-soft: #1e2c49;
  --teal: #16a6a1;
  --teal-strong: #0e7c78;
  --teal-on-navy: #5fd6d1;
  --teal-mist: #e9f7f6;
  --ink: #202631;
  --slate: #667085;
  --canvas: #f7f8fa;
  --white: #ffffff;

  --ok: #16845b;
  --ok-soft: #e7f4ee;
  --warn: #c47a14;
  --warn-soft: #fdf3e3;
  --info-soft: #eaeef5;

  --line: #e3e6ec;
  --line-strong: #cfd4de;

  --radius: 12px;
  --radius-sm: 8px;
  --radius-lg: 18px;
  --radius-xl: 24px;

  --shadow-1: 0 1px 2px rgba(23, 35, 60, 0.06), 0 1px 3px rgba(23, 35, 60, 0.08);
  --shadow-2: 0 4px 16px rgba(23, 35, 60, 0.1);
  --shadow-3: 0 18px 50px rgba(23, 35, 60, 0.18);
  --shadow-4: 0 30px 70px rgba(23, 35, 60, 0.22);

  --font: "Inter", "Segoe UI", -apple-system, BlinkMacSystemFont, Roboto,
    "Helvetica Neue", Arial, sans-serif;

  --max: 1160px;
  --pad: 1.25rem;
}

*,
*::before,
*::after {
  box-sizing: border-box;
}

html {
  scroll-behavior: smooth;
  -webkit-text-size-adjust: 100%;
}

@media (prefers-reduced-motion: reduce) {
  html {
    scroll-behavior: auto;
  }
  * {
    animation: none !important;
    transition: none !important;
  }
}

body {
  margin: 0;
  background: var(--white);
  color: var(--ink);
  font-family: var(--font);
  font-size: 16px;
  line-height: 1.55;
  -webkit-font-smoothing: antialiased;
}

h1,
h2,
h3 {
  color: var(--navy);
  line-height: 1.1;
  margin: 0 0 0.6rem;
  letter-spacing: -0.03em;
  text-wrap: balance;
}

h1 {
  font-size: clamp(2.4rem, 8.5vw, 4.25rem);
  font-weight: 700;
  letter-spacing: -0.04em;
}
h2 {
  font-size: clamp(1.75rem, 5.5vw, 2.75rem);
  font-weight: 690;
}
h3 {
  font-size: 1.05rem;
  font-weight: 650;
  line-height: 1.25;
}

p {
  margin: 0 0 0.9rem;
}

a {
  color: var(--teal-strong);
}

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

time,
.num,
.slot-hour,
.price {
  font-variant-numeric: tabular-nums;
  font-feature-settings: "tnum" 1;
}

.sr-only {
  position: absolute;
  width: 1px;
  height: 1px;
  padding: 0;
  margin: -1px;
  overflow: hidden;
  clip: rect(0 0 0 0);
  white-space: nowrap;
  border: 0;
}

.wrap {
  width: 100%;
  max-width: var(--max);
  margin: 0 auto;
  padding: 0 var(--pad);
}

.eyebrow {
  color: var(--slate);
  font-size: 0.72rem;
  font-weight: 650;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  margin: 0 0 0.75rem;
}

/* O filete teal antes da sobrancelha e o unico ornamento da pagina. Ele marca
   onde cada bloco comeca sem precisar de uma caixa em volta. */
.eyebrow.ruled {
  display: flex;
  align-items: center;
  gap: 0.6rem;
}

.eyebrow.ruled::before {
  content: "";
  width: 26px;
  height: 2px;
  background: var(--teal);
  flex: none;
}

.lead {
  font-size: clamp(1.05rem, 2.6vw, 1.25rem);
  color: var(--slate);
  max-width: 46ch;
}

/* ---------------------------------------------------------------- botoes -- */

.btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 0.5rem;
  min-height: 52px;
  padding: 0.8rem 1.5rem;
  border-radius: var(--radius-sm);
  border: 1px solid transparent;
  font: inherit;
  font-weight: 640;
  text-decoration: none;
  cursor: pointer;
  -webkit-tap-highlight-color: transparent;
  transition: background-color 120ms ease, border-color 120ms ease,
    transform 90ms ease;
}

.btn:active {
  transform: translateY(1px);
}

.btn-primary {
  background: var(--teal);
  color: var(--navy);
}
.btn-primary:hover {
  background: #12938e;
}

/* Secundario sobre o navy do heroi. */
.btn-onnavy {
  background: transparent;
  color: var(--white);
  border-color: rgba(255, 255, 255, 0.32);
}
.btn-onnavy:hover {
  border-color: rgba(255, 255, 255, 0.75);
}

/* Botao pequeno da barra de topo. So aparece com espaco para ele. */
.btn-sm {
  min-height: 38px;
  padding: 0.4rem 0.95rem;
  font-size: 0.88rem;
  border-radius: 6px;
}

/*
 * O CTA de meio de pagina. Nao e botao: e link com seta, e existe porque a
 * pagina inteira nao pode ter um unico ponto de saida no fim. Quem se convence
 * no bloco do Balcao nao devia precisar rolar ate o rodape para agir.
 */
.link-cta {
  display: inline-flex;
  align-items: center;
  gap: 0.45rem;
  color: var(--teal-strong);
  font-weight: 650;
  text-decoration: none;
  white-space: nowrap;
}

.link-cta:hover {
  text-decoration: underline;
}

.link-cta svg {
  flex: none;
  transition: transform 120ms ease;
}

.link-cta:hover svg {
  transform: translateX(3px);
}

/* ---------------------------------------------------------------- topbar -- */

/*
 * Grudada no topo. Numa pagina de rolagem longa, a barra e o quarto ponto de
 * saida: o botao "Quero conhecer" fica no alcance em qualquer altura.
 */
.topbar {
  position: sticky;
  top: 0;
  z-index: 30;
  background: var(--navy);
  color: var(--white);
  border-bottom: 1px solid rgba(255, 255, 255, 0.08);
}

.topbar .wrap {
  display: flex;
  align-items: center;
  gap: 1rem;
  min-height: 62px;
}

.brand {
  display: inline-flex;
  align-items: center;
  gap: 0.5rem;
  color: var(--white);
  text-decoration: none;
  font-weight: 660;
  font-size: 1.1rem;
  letter-spacing: -0.03em;
}

.topbar nav {
  margin-left: auto;
  display: flex;
  align-items: center;
  /* Apertado no celular para o botao caber ao lado de "Entrar" em 390px, e
     folgado a partir de 860px, quando entram os dois links de secao. */
  gap: 0.9rem;
  font-size: 0.92rem;
}

.topbar nav a {
  color: rgba(255, 255, 255, 0.86);
  text-decoration: none;
}
.topbar nav a:hover {
  color: var(--white);
  text-decoration: underline;
}

.topbar nav .btn-primary {
  color: var(--navy);
}
.topbar nav .btn-primary:hover {
  text-decoration: none;
}

/* Em telas pequenas so sobram "Entrar" e o botao. */
.nav-desk {
  display: none;
}
@media (min-width: 860px) {
  .nav-desk {
    display: inline;
  }
  .topbar nav {
    gap: 1.35rem;
  }
}

/*
 * A conta do botao na barra, em 390px e com a Inter: marca 94px, "Entrar"
 * 45px, o botao 135px, mais 0.9rem de folga e 40px de padding do .wrap dao
 * ~336px. Sobra. O corte em 370px existe para o caso em que a Inter ainda
 * nao chegou e a pilha cai na Segoe UI, que e mais larga.
 */
.nav-cta {
  display: none;
}
@media (min-width: 370px) {
  .nav-cta {
    display: inline-flex;
  }
}

/* ----------------------------------------------------------------- heroi -- */

.hero {
  background: var(--navy);
  color: var(--white);
  padding: 3.25rem 0 0;
  position: relative;
}

/*
 * O halo mora num elemento proprio, com overflow escondido, e NAO no .hero.
 * Motivo: o telefone precisa vazar para fora do navy por baixo, e um
 * `overflow: hidden` no .hero cortaria o telefone junto com o halo.
 */
.hero-glow {
  position: absolute;
  inset: 0;
  overflow: hidden;
  pointer-events: none;
}

.hero-glow::after {
  content: "";
  position: absolute;
  width: 700px;
  height: 700px;
  right: -240px;
  top: -260px;
  border-radius: 50%;
  background: radial-gradient(
    circle,
    rgba(22, 166, 161, 0.32),
    rgba(22, 166, 161, 0) 68%
  );
}

.hero .wrap {
  position: relative;
  z-index: 1;
}

.hero h1 {
  color: var(--white);
  max-width: 13ch;
}

.hero .lead {
  color: rgba(255, 255, 255, 0.8);
  max-width: 42ch;
}

.hero .eyebrow {
  color: var(--teal-on-navy);
}

.hero .eyebrow.ruled::before {
  background: var(--teal-on-navy);
}

.hero-actions {
  display: flex;
  flex-wrap: wrap;
  gap: 0.75rem;
  margin-top: 1.9rem;
}

.hero-actions .btn {
  flex: 1 1 auto;
  min-width: 200px;
}

.hero-note {
  margin: 1.35rem 0 0;
  font-size: 0.86rem;
  color: rgba(255, 255, 255, 0.55);
}

.hero-grid {
  display: grid;
  gap: 2.5rem;
  padding-bottom: 3rem;
}

.hero-copy {
  padding-bottom: 0.5rem;
}

@media (min-width: 900px) {
  .hero {
    padding-top: 5rem;
  }
  .hero-grid {
    /* Assimetrico de proposito: o texto e mais estreito que a tela. Quem
       manda no bloco e o produto, nao o paragrafo.

       `align-items: end` e escolha, nao descuido: com `center`, o quanto o
       telefone vaza para fora do navy passa a depender da altura do texto,
       que muda com a largura da janela. Alinhado embaixo, a conta e fixa:
       vazamento = 7.5rem de margem negativa menos 4rem de padding. */
    grid-template-columns: 0.95fr 1.05fr;
    align-items: end;
    gap: 3.5rem;
    padding-bottom: 4rem;
  }
  .hero-copy {
    padding-bottom: 2.5rem;
  }
  .hero-actions .btn {
    flex: 0 0 auto;
  }
}

/* --------------------------------------------------------------- secoes --- */

.section {
  padding: 4rem 0;
}

.section-tinted {
  background: var(--canvas);
  border-top: 1px solid var(--line);
  border-bottom: 1px solid var(--line);
}

/* Compensa a barra grudada quando o link de ancora rola ate a secao. */
.section[id] {
  scroll-margin-top: 70px;
}

/*
 * A cabeca de secao e assimetrica: titulo a esquerda, com largura de leitura,
 * e o CTA de meio de pagina empurrado para a direita na mesma linha de base.
 */
.section-head {
  max-width: 34ch;
  margin-bottom: 2.5rem;
}

.head-row {
  display: flex;
  flex-wrap: wrap;
  align-items: flex-end;
  justify-content: space-between;
  gap: 1.25rem 2rem;
  margin-bottom: 2.75rem;
  padding-bottom: 1.5rem;
  border-bottom: 1px solid var(--line);
}

.head-row .section-head {
  margin-bottom: 0;
  max-width: 40ch;
}

.head-row .lead {
  margin-bottom: 0;
}

@media (min-width: 900px) {
  .section {
    padding: 6rem 0;
  }
  .section-head {
    margin-bottom: 3.25rem;
  }
}

/* ------------------------------------------------------------- 3 passos --- */

/*
 * Nao sao cartoes. Sao tres colunas de LARGURAS DIFERENTES, separadas do
 * titulo por um filete no topo. O primeiro passo e o mais largo e o unico com
 * filete teal: e onde entra o dinheiro.
 */
.steps {
  display: grid;
  gap: 2.25rem;
}

@media (min-width: 880px) {
  .steps {
    grid-template-columns: 1.2fr 1fr 1fr;
    gap: 3rem;
  }
}

.step {
  border-top: 2px solid var(--line-strong);
  padding-top: 1.35rem;
  position: relative;
}

.step:first-child {
  border-top-color: var(--teal);
}

.step .n {
  display: block;
  font-size: 2.6rem;
  font-weight: 700;
  line-height: 1;
  letter-spacing: -0.05em;
  color: var(--line-strong);
  margin-bottom: 0.65rem;
}

.step:first-child .n {
  color: var(--teal);
}

.step h3 {
  font-size: 1.25rem;
  margin-bottom: 0.5rem;
}

.step p {
  color: var(--slate);
  margin: 0;
  font-size: 0.97rem;
}

/* ------------------------------------------------- blocos texto + tela --- */

/*
 * O padrao central da pagina. Cada bloco e UMA afirmacao sobre o produto com
 * a tela que a prova do lado. Os lados alternam via `.flip`.
 *
 * No celular a ordem e sempre TEXTO e depois TELA, inclusive nos invertidos:
 * o `grid-row` que troca a ordem so entra a partir de 900px.
 */
.showcase {
  display: grid;
  gap: 2rem;
}

.showcase + .showcase {
  margin-top: 4rem;
}

.show-copy h3 {
  font-size: clamp(1.35rem, 4.2vw, 1.9rem);
  font-weight: 690;
  letter-spacing: -0.03em;
  margin-bottom: 0.7rem;
}

.show-copy p {
  color: var(--slate);
  font-size: 1.03rem;
  max-width: 44ch;
  margin: 0;
}

.show-copy .eyebrow {
  margin-bottom: 0.9rem;
}

/*
 * A tela nao flutua no branco: senta num painel. O painel e o que da a
 * sensacao de captura de produto sem existir captura nenhuma.
 *
 * Sem `overflow: hidden` de proposito: a maquete tem sombra de 50px de
 * desfoque, e cortar a sombra na borda do painel troca o degrade por uma
 * linha reta, que e exatamente o defeito que o painel existe para evitar.
 *
 * O painel e BRANCO e nao `--canvas`: a secao "o que faz" ja e canvas, e
 * painel canvas sobre secao canvas some, sobrando so a borda de 1px. A pilha
 * que funciona tem tres degraus: secao canvas, painel branco, maquete com
 * barra navy e corpo canvas dentro.
 */
.show-visual {
  background: var(--white);
  border: 1px solid var(--line);
  border-radius: var(--radius-xl);
  padding: 1.5rem 1.25rem;
}

.show-visual.on-navy {
  background: linear-gradient(155deg, var(--navy-soft), var(--navy));
  border-color: rgba(255, 255, 255, 0.1);
}

.showcase .mock {
  max-width: 460px;
  margin: 0 auto;
}

@media (min-width: 900px) {
  .showcase {
    grid-template-columns: 0.9fr 1.1fr;
    align-items: center;
    gap: 4rem;
  }

  .showcase + .showcase {
    margin-top: 6rem;
  }

  .showcase.flip {
    grid-template-columns: 1.1fr 0.9fr;
  }

  .showcase.flip .show-copy {
    grid-column: 2;
    grid-row: 1;
  }

  .showcase.flip .show-visual {
    grid-column: 1;
    grid-row: 1;
  }

  .show-visual {
    padding: 2.25rem 2rem;
  }

  /* O Balcao e a unica tela larga: ele ocupa o painel inteiro em vez de ficar
     limitado aos 460px das outras duas. */
  .show-visual.full .mock {
    max-width: none;
  }
}

/* --------------------------------------------------- os dois que sobram --- */

/*
 * Peso deliberadamente menor que o dos blocos com tela. Sao verdadeiros e
 * importam, mas nao sao o argumento que vende. Filete no topo, sem caixa.
 */
.pair {
  display: grid;
  gap: 2rem;
  /* `margin` e `padding` explicitos: e um <ul>, e o padrao do navegador
     traz 40px de recuo a esquerda e 1em de margem embaixo. */
  margin: 4rem 0 0;
  padding: 0.5rem 0 0;
}

@media (min-width: 760px) {
  .pair {
    grid-template-columns: repeat(2, 1fr);
    gap: 3rem;
    margin-top: 6rem;
  }
}

.pair > li {
  list-style: none;
  border-top: 1px solid var(--line-strong);
  padding-top: 1.25rem;
}

.pair h3 {
  font-size: 1.12rem;
  margin-bottom: 0.4rem;
}

.pair p {
  color: var(--slate);
  margin: 0;
  font-size: 0.97rem;
}

/* ------------------------------------------------------------ para quem --- */

/*
 * Assimetria com significado: "Hoje" ocupa quase dois tercos e tem cor;
 * "Em seguida" e estreito e cinza. O tamanho conta a mesma coisa que o texto.
 */
.audience {
  display: grid;
  gap: 1.25rem;
}

@media (min-width: 820px) {
  .audience {
    grid-template-columns: 1.45fr 0.85fr;
    gap: 2rem;
    align-items: start;
  }
}

.aud {
  border-radius: var(--radius-lg);
  padding: 1.75rem 1.5rem;
}

.aud.now {
  background: var(--teal-mist);
  border: 1px solid var(--teal);
}

.aud.next {
  background: var(--canvas);
  border: 1px solid var(--line);
}

.aud .tag {
  display: inline-block;
  font-size: 0.72rem;
  font-weight: 700;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--teal-strong);
  margin-bottom: 0.6rem;
}

.aud.next .tag {
  color: var(--slate);
}

.aud h3 {
  font-size: 1.3rem;
  margin-bottom: 0.55rem;
}

.aud.next h3 {
  font-size: 1.12rem;
}

.aud p {
  margin: 0;
  color: var(--slate);
  font-size: 0.99rem;
}

.aud.now p {
  color: var(--ink);
  font-size: 1.05rem;
  max-width: 48ch;
}

@media (min-width: 820px) {
  .aud.now {
    padding: 2.5rem 2.25rem;
  }
}

/* ------------------------------------------------------------------ cta --- */

/*
 * A chamada final NAO e centrada. Titulo e paragrafo a esquerda, botao a
 * direita, na mesma altura. Uma pagina inteira alinhada a esquerda que termina
 * num bloco centrado denuncia o template.
 */
.cta {
  background: var(--navy);
  color: var(--white);
  padding: 4.5rem 0;
  position: relative;
  overflow: hidden;
}

.cta::after {
  content: "";
  position: absolute;
  width: 560px;
  height: 560px;
  left: -200px;
  bottom: -300px;
  border-radius: 50%;
  background: radial-gradient(
    circle,
    rgba(22, 166, 161, 0.26),
    rgba(22, 166, 161, 0) 68%
  );
  pointer-events: none;
}

.cta .wrap {
  position: relative;
  z-index: 1;
  display: grid;
  gap: 1.75rem;
}

.cta h2 {
  color: var(--white);
  max-width: 14ch;
}

.cta p {
  color: rgba(255, 255, 255, 0.75);
  max-width: 40ch;
  margin: 0;
}

.cta-side {
  display: flex;
  flex-direction: column;
  align-items: stretch;
  gap: 1rem;
}

/* No celular o botao da chamada final ocupa a linha inteira: e o ultimo alvo
   de toque da pagina e nao ha nada disputando espaco com ele. */
.cta-side .btn {
  width: 100%;
}

.cta-mail {
  color: var(--teal-on-navy);
  font-size: 0.95rem;
}

@media (min-width: 820px) {
  .cta {
    padding: 6rem 0;
  }
  .cta .wrap {
    grid-template-columns: 1.25fr 0.75fr;
    align-items: center;
    gap: 3rem;
  }
  .cta-side {
    align-items: flex-end;
    text-align: right;
  }
  .cta-side .btn {
    width: auto;
  }
}

/* --------------------------------------------------------------- rodape --- */

.footer {
  background: var(--navy);
  color: rgba(255, 255, 255, 0.62);
  font-size: 0.88rem;
  padding: 1.75rem 0 2.5rem;
  border-top: 1px solid rgba(255, 255, 255, 0.1);
}

.footer .wrap {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 0.5rem 1rem;
}

.footer a {
  color: rgba(255, 255, 255, 0.82);
}

.footer .dot {
  opacity: 0.4;
}

/*
 * Em celular a linha do rodape quebra, e o separador "·" cai no COMECO da
 * linha seguinte - fica parecendo defeito. Abaixo de 620px a linha vira
 * coluna e os pontos somem: quem separa passa a ser a quebra.
 */
@media (max-width: 619px) {
  .footer .wrap {
    flex-direction: column;
    align-items: flex-start;
    gap: 0.3rem;
  }
  .footer .dot {
    display: none;
  }
}

/* ==========================================================================
   MAQUETES DE PRODUTO
   ==========================================================================
   Sao reconstrucoes em HTML/CSS das telas reais do aplicativo, com as MESMAS
   classes de estado e as mesmas cores - nao sao capturas de tela.

   Duas razoes, nesta ordem:
     1. Captura de tela logada carrega dado de teste (nomes, telefones,
        e-mails de gente de verdade). Nao vai para uma pagina publica.
     2. Uma maquete em CSS pesa zero, fica nitida em qualquer tela e nao
        precisa ser refeita quando o aplicativo mudar de fonte.

   Sao QUATRO na LP-03, uma por afirmacao: a grade de horarios (heroi), o
   pagamento confirmado, a contagem da limpeza e o Balcao do dia.
   ========================================================================== */

.mock {
  background: var(--white);
  border-radius: var(--radius-lg);
  box-shadow: var(--shadow-3);
  overflow: hidden;
  color: var(--ink);
  border: 1px solid rgba(255, 255, 255, 0.12);
}

.mock-bar {
  background: var(--navy);
  color: var(--white);
  padding: 0.6rem 0.85rem;
  display: flex;
  align-items: center;
  gap: 0.45rem;
  font-size: 0.9rem;
  font-weight: 640;
  letter-spacing: -0.03em;
  border-bottom: 1px solid rgba(255, 255, 255, 0.08);
}

.mock-bar .mock-nav {
  margin-left: auto;
  font-weight: 500;
  font-size: 0.75rem;
  color: rgba(255, 255, 255, 0.6);
}

.mock-body {
  padding: 1rem 0.95rem 1.2rem;
  background: var(--canvas);
}

.mock-body .mock-h {
  font-size: 1.05rem;
  font-weight: 660;
  color: var(--navy);
  letter-spacing: -0.02em;
  margin: 0 0 0.15rem;
}

.mock-body .mock-sub {
  font-size: 0.8rem;
  color: var(--slate);
  margin: 0 0 0.85rem;
}

.mock-card {
  background: var(--white);
  border: 1px solid var(--line);
  border-radius: var(--radius);
  padding: 0.85rem;
  box-shadow: var(--shadow-1);
}

.mock-card + .mock-card {
  margin-top: 0.7rem;
}

/* -- grade de horarios (SlotPicker do aplicativo) -- */

.slot-grid {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 0.4rem;
}

.slot {
  min-height: 50px;
  border-radius: var(--radius-sm);
  border: 1px solid var(--line-strong);
  background: var(--white);
  color: var(--navy);
  font-weight: 650;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 0.05rem;
  padding: 0.3rem 0.15rem;
}

.slot .slot-hour {
  font-size: 0.9rem;
}

.slot .slot-note {
  font-size: 0.6rem;
  font-weight: 500;
  color: var(--slate);
}

.slot.is-on {
  background: var(--teal);
  border-color: var(--teal-strong);
}
.slot.is-on .slot-note {
  color: var(--navy);
}

.slot.is-off {
  background: var(--canvas);
  color: var(--slate);
  border-style: dashed;
}

.mock-total {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  margin-top: 0.85rem;
  padding-top: 0.7rem;
  border-top: 1px solid var(--line);
}

.mock-total .label {
  font-size: 0.8rem;
  color: var(--slate);
}

.mock-total .price {
  font-size: 1.3rem;
  font-weight: 680;
  color: var(--navy);
}

.mock-btn {
  display: block;
  width: 100%;
  text-align: center;
  margin-top: 0.7rem;
  background: var(--teal);
  color: var(--navy);
  border-radius: var(--radius-sm);
  padding: 0.7rem;
  font-weight: 640;
  font-size: 0.9rem;
}

/* -- selos de estado (Badge do aplicativo) -- */

.badge {
  display: inline-flex;
  align-items: center;
  gap: 0.3rem;
  padding: 0.15rem 0.5rem;
  border-radius: 999px;
  font-size: 0.68rem;
  font-weight: 650;
  border: 1px solid;
  white-space: nowrap;
}

.badge::before {
  content: "";
  width: 0.42rem;
  height: 0.42rem;
  border-radius: 50%;
  background: currentColor;
  flex: none;
}

.badge-ok {
  background: var(--ok-soft);
  border-color: var(--ok);
  color: #0f5c3f;
}
/* -- pagamento confirmado (maquete nova da LP-03) -- */

.pay-line {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 0.75rem;
  font-size: 0.82rem;
  color: var(--slate);
}

.pay-line + .pay-line {
  margin-top: 0.55rem;
  padding-top: 0.55rem;
  border-top: 1px solid var(--line);
}

.pay-line strong {
  color: var(--navy);
  font-weight: 650;
}

.pay-line .price {
  font-size: 1.25rem;
  font-weight: 680;
  color: var(--navy);
}

.pay-method {
  display: inline-flex;
  align-items: center;
  gap: 0.35rem;
  border: 1px solid var(--navy);
  background: var(--info-soft);
  color: var(--navy);
  border-radius: 6px;
  padding: 0.2rem 0.5rem;
  font-size: 0.72rem;
  font-weight: 650;
}

/* O e-mail sai no nome da clinica. O cartao imita um envelope aberto, com
   remetente em cima e o codigo da reserva em destaque. */
.mail-card {
  border: 1px solid var(--line);
  border-left: 3px solid var(--teal);
  background: var(--white);
  border-radius: var(--radius-sm);
  padding: 0.7rem 0.75rem;
  box-shadow: var(--shadow-1);
}

.mail-from {
  font-size: 0.68rem;
  color: var(--slate);
  margin: 0 0 0.2rem;
}

.mail-subject {
  font-size: 0.86rem;
  font-weight: 650;
  color: var(--navy);
  margin: 0 0 0.45rem;
  letter-spacing: -0.01em;
}

.mail-code {
  display: inline-block;
  font-size: 0.78rem;
  font-weight: 700;
  letter-spacing: 0.08em;
  color: var(--navy);
  background: var(--canvas);
  border: 1px dashed var(--line-strong);
  border-radius: 6px;
  padding: 0.2rem 0.5rem;
}

/* -- a contagem da limpeza (maquete nova da LP-03) -- */

/*
 * A unica maquete que nao e uma tela do aplicativo: e o RELOGIO por tras da
 * grade. Tres linhas em ordem, com o trecho de limpeza hachurado, porque a
 * afirmacao ("enquanto esse tempo nao passa, a sala nao aparece") e sobre
 * tempo e nao sobre botao.
 */
.tl {
  display: grid;
  gap: 0;
}

.tl-row {
  display: grid;
  grid-template-columns: 58px 1fr;
  align-items: stretch;
  gap: 0.7rem;
}

.tl-time {
  font-size: 0.74rem;
  font-weight: 650;
  color: var(--slate);
  text-align: right;
  padding-top: 0.55rem;
}

.tl-bar {
  border-radius: var(--radius-sm);
  border: 1px solid;
  padding: 0.55rem 0.7rem;
  font-size: 0.78rem;
  line-height: 1.35;
  color: var(--ink);
}

.tl-bar strong {
  display: block;
  font-size: 0.86rem;
  font-weight: 650;
  color: var(--navy);
}

.tl-row + .tl-row {
  margin-top: 0.4rem;
}

.tl-use {
  border-color: var(--ok);
  background: var(--ok-soft);
}

.tl-clean {
  border-color: var(--warn);
  background: repeating-linear-gradient(
    45deg,
    var(--warn-soft),
    var(--warn-soft) 6px,
    #f8ead2 6px,
    #f8ead2 12px
  );
}

.tl-free {
  border-color: var(--teal-strong);
  background: var(--teal-mist);
}

.tl-note {
  margin: 0.85rem 0 0;
  font-size: 0.74rem;
  color: var(--slate);
}

/* -- balcao do dia (DayBoardView do aplicativo) -- */

.board {
  display: grid;
  grid-template-columns: 46px repeat(2, minmax(0, 1fr));
  background: var(--white);
  border: 1px solid var(--line);
  border-radius: var(--radius);
  overflow: hidden;
}

/*
 * A terceira sala so existe quando ha largura para ela. Em 390px, tres
 * colunas dao ~88px cada, e "Aguardando pagamento" a 0.7rem quebra em tres
 * linhas dentro de uma celula de 46px de altura. Duas colunas cabem; a
 * terceira entra a partir de 560px e e o que faz a grade parecer software de
 * verdade no desktop.
 */
.board .col3 {
  display: none;
}

@media (min-width: 560px) {
  .board {
    grid-template-columns: 46px repeat(3, minmax(0, 1fr));
  }
  .board .col3 {
    display: block;
  }
}

.bcell {
  border-right: 1px solid var(--line);
  border-bottom: 1px solid var(--line);
  padding: 0.3rem;
  min-height: 46px;
}

.bcell.hour {
  background: var(--canvas);
  color: var(--slate);
  font-size: 0.68rem;
  font-weight: 650;
  display: flex;
  align-items: flex-start;
  justify-content: flex-end;
  padding-right: 0.35rem;
}

.bcell.head {
  background: var(--white);
  font-weight: 660;
  color: var(--navy);
  font-size: 0.78rem;
  border-bottom: 2px solid var(--line-strong);
  min-height: 40px;
}

.bcell.closed {
  background: repeating-linear-gradient(
    45deg,
    var(--canvas),
    var(--canvas) 5px,
    #eef0f4 5px,
    #eef0f4 10px
  );
}

.bitem {
  display: block;
  border-radius: 6px;
  border: 1px solid;
  padding: 0.25rem 0.35rem;
  font-size: 0.66rem;
  line-height: 1.3;
  color: var(--ink);
}

.bitem .who {
  font-weight: 650;
  color: var(--navy);
  display: block;
  font-size: 0.7rem;
}

.bitem.s-confirmed {
  border-color: var(--navy);
  background: var(--info-soft);
}
.bitem.s-in_use {
  border-color: var(--ok);
  background: var(--ok-soft);
}
.bitem.s-pending {
  border-color: var(--warn);
  background: var(--warn-soft);
}
.bitem.s-done {
  border-color: var(--line-strong);
  background: var(--canvas);
  color: var(--slate);
}

.mock-alert {
  display: flex;
  align-items: flex-start;
  gap: 0.5rem;
  background: var(--warn-soft);
  border: 1px solid var(--warn);
  border-radius: var(--radius-sm);
  padding: 0.55rem 0.65rem;
  font-size: 0.76rem;
  color: #6f4408;
  margin-bottom: 0.7rem;
}

.mock-alert strong {
  color: #5a3606;
}

/* -- o telefone que emoldura a maquete do heroi -- */

/*
 * O telefone VAZA para fora do navy: ele desce por cima da secao branca
 * seguinte. E o que impede o heroi de terminar numa linha reta de fundo, que
 * e o desenho que denuncia template. O `margin-bottom` negativo aqui e o
 * `padding-top` extra da secao seguinte sao um par: mexer em um sem o outro
 * cola o telefone no titulo de baixo.
 */
.phone {
  max-width: 300px;
  margin: 0 auto -4.5rem;
  position: relative;
  z-index: 2;
  border-radius: 30px;
  padding: 9px;
  background: linear-gradient(160deg, #2b3a5c, #16203a);
  box-shadow: var(--shadow-4);
}

.phone .mock {
  border-radius: 22px;
  box-shadow: none;
  border: 0;
}

/* A alca do telefone. Um retangulo de 4px que faz o quadro parecer aparelho. */
.phone::before {
  content: "";
  position: absolute;
  top: 17px;
  left: 50%;
  transform: translateX(-50%);
  width: 74px;
  height: 4px;
  border-radius: 99px;
  background: rgba(255, 255, 255, 0.22);
  z-index: 3;
}

@media (min-width: 900px) {
  .phone {
    max-width: 340px;
    margin: 0 0 -7.5rem auto;
  }
}

/* A secao logo abaixo do heroi abre espaco para o telefone que desce nela. */
.after-hero {
  padding-top: 7rem;
}

@media (min-width: 900px) {
  .after-hero {
    padding-top: 9rem;
  }
}