.app {
  position: relative; z-index: 2;
  min-height: 100svh;
  max-width: 34rem; margin: 0 auto;
  padding: max(2.25rem, env(safe-area-inset-top)) 1.5rem max(2rem, env(safe-area-inset-bottom));
  display: grid; grid-template-rows: auto 1fr auto auto; gap: 1.5rem;
}

.topo { text-align: center; }
.topo .marca { font-size: clamp(2rem, 1.6rem + 2vw, 2.75rem); }
.data {
  margin-top: .65rem;
  font-size: var(--miudo); letter-spacing: .28em; text-transform: uppercase; color: var(--tinta-suave);
}

.centro { align-self: center; display: grid; gap: 2.4rem; }

.titulo-ensinamento {
  text-align: center;
  font-family: var(--serifa); font-style: italic; font-weight: 500;
  font-size: clamp(1.2rem, 1.05rem + .7vw, 1.45rem); color: var(--rose-gold-escuro);
}

/* Cartao branco da frase */
.folha {
  position: relative;
  padding: 3rem 1.75rem 1.75rem;
  border-radius: 28px;
  background: linear-gradient(160deg, rgba(255,255,255,.94), rgba(255,255,255,.86));
  backdrop-filter: blur(20px) saturate(110%);
  -webkit-backdrop-filter: blur(20px) saturate(110%);
  border: 1px solid rgba(255,255,255,.95);
  box-shadow: inset 0 1px 0 rgba(255,255,255,.9), 0 30px 60px -30px rgba(58,42,51,.28), 0 2px 6px -2px rgba(58,42,51,.06);
  text-align: center;
}
.aspas {
  position: absolute; top: -.35em; left: 50%; transform: translateX(-50%);
  font-family: var(--serifa); font-style: italic; font-size: 5.5rem; line-height: 1;
  color: var(--rose-gold); opacity: .55;
}
.frase {
  font-family: var(--serifa); font-style: italic; font-weight: 400;
  font-size: clamp(1.75rem, 1.3rem + 2.2vw, 2.6rem); line-height: 1.22; letter-spacing: -.005em;
  text-wrap: balance; overflow-wrap: anywhere;
}
.autora { margin-top: 1.1rem; font-size: var(--miudo); letter-spacing: .3em; text-transform: uppercase; color: var(--tinta-suave); }
.autora b { font-weight: 400; color: var(--tinta); }

.ornamento { display: flex; align-items: center; justify-content: center; gap: .75rem; margin: 2rem auto 1.5rem; width: 9rem; color: var(--rose-gold); }
.ornamento i { flex: 1; height: 1px; background: linear-gradient(90deg, transparent, currentColor, transparent); opacity: .7; }
.ornamento svg { width: 9px; height: 9px; }

.rotulo { font-size: var(--miudo); letter-spacing: .32em; text-transform: uppercase; color: var(--rose-gold); margin-bottom: .85rem; }
.ensinamento { font-size: var(--texto); line-height: 1.75; max-width: 26rem; margin: 0 auto; text-wrap: pretty; white-space: pre-line; overflow-wrap: anywhere; }

/* Curtir */
.curtir {
  margin: 1.75rem auto 0;
  display: inline-flex; align-items: center; gap: .45rem;
  padding: .55rem 1.1rem; border-radius: 999px;
  background: transparent; border: 1px solid rgba(185,139,122,.28);
  font: inherit; font-size: .9rem; color: var(--tinta-suave); cursor: pointer;
  transition: border-color var(--medio) var(--ease), color var(--medio) var(--ease), background-color var(--medio) var(--ease);
  -webkit-tap-highlight-color: transparent;
}
.curtir svg { width: 20px; height: 20px; fill: transparent; stroke: var(--rose-gold); stroke-width: 1.4; transition: fill var(--medio) var(--ease); }
.curtir:hover { border-color: rgba(185,139,122,.55); }
.curtir:focus-visible { outline: 1.5px solid var(--rose-gold); outline-offset: 3px; }
.curtir[aria-pressed="true"] { color: var(--rose-gold-escuro); background-color: rgba(235,211,202,.35); border-color: rgba(185,139,122,.5); }
.curtir[aria-pressed="true"] svg { fill: var(--rose-gold); }
.curtir.pulsa svg { animation: pulsa 520ms var(--ease); }
@keyframes pulsa { 0% { transform: scale(1); } 35% { transform: scale(1.28); } 100% { transform: scale(1); } }

/* Troca de frase: esmaecer suave */
.anima { transition: opacity var(--medio) var(--ease), transform var(--medio) var(--ease), filter var(--medio) var(--ease); }
.saindo .anima { opacity: 0; transform: translateY(-6px); filter: blur(6px); }
.entrando .anima { opacity: 0; transform: translateY(10px); filter: blur(6px); transition: none; }
.folha .autora { transition-delay: 40ms; }
.folha .rotulo { transition-delay: 80ms; }
.folha .ensinamento { transition-delay: 120ms; }
.folha .curtir { transition-delay: 160ms; }

.controles { display: flex; align-items: center; justify-content: center; gap: .9rem; }
.contador { text-align: center; font-family: var(--serifa); font-style: italic; font-size: .95rem; color: var(--tinta-suave); }

/* Estados da pagina */
.aviso-estado { display: none; text-align: center; color: var(--tinta-suave); line-height: 1.7; }
.aviso-titulo { font-family: var(--serifa); font-style: italic; font-size: 1.6rem; color: var(--tinta); margin-bottom: .5rem; }
.aviso-estado .vidro { margin-top: 1rem; }

[data-estado="carregando"] .folha { opacity: 0; }
.folha { transition: opacity var(--lento) var(--ease); }
[data-estado="vazio"] .folha, [data-estado="erro"] .folha,
[data-estado="vazio"] .titulo-ensinamento, [data-estado="erro"] .titulo-ensinamento { display: none; }
[data-estado="vazio"] #aviso-vazio, [data-estado="erro"] #aviso-erro { display: block; }
body:not([data-estado="pronto"]) .controles, body:not([data-estado="pronto"]) .contador { visibility: hidden; }
.uma-so .controles, .uma-so .contador { visibility: hidden; }

@media (prefers-reduced-motion: reduce) {
  .anima, .folha { transition: opacity 200ms linear; }
  .saindo .anima, .entrando .anima { transform: none; filter: none; }
  .curtir.pulsa svg { animation: none; }
}