/* ============================================================
   Loja, conta e painel.
   Reaproveita as variaveis e os componentes de style.css
   (--creme, --vinho, .botao, .link-seta, .titulo-grande).
   ============================================================ */

.loja-corpo {
  min-height: 100vh;
  display: flex;
  flex-direction: column;
  background: var(--creme);
}

/* ---------- cabecalho ---------- */

.loja-topo {
  position: sticky;
  top: 0;
  z-index: 50;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 1.5rem;
  padding: 1.1rem clamp(1.2rem, 5vw, 4rem);
  background: rgba(250, 243, 236, .93);
  backdrop-filter: blur(10px);
  border-bottom: 1px solid var(--linha);
}

/* Mesmo selo circular do site, em tamanho de cabeçalho fixo.
   O object-fit é necessário porque o style.css estica toda <img>. */
.loja-topo__marca {
  display: block;
  flex-shrink: 0;
  width: clamp(46px, 5vw, 58px);
  height: clamp(46px, 5vw, 58px);
  border-radius: 50%;
  overflow: hidden;
}
.loja-topo__marca img { width: 100%; height: 100%; object-fit: contain; }

.loja-topo__links {
  display: flex;
  align-items: center;
  gap: clamp(.9rem, 2.4vw, 1.9rem);
  font-size: .82rem;
  letter-spacing: .09em;
  text-transform: uppercase;
}
.loja-topo__links a { border-bottom: 1px solid transparent; padding-bottom: 2px; transition: border-color .3s; }
.loja-topo__links a:hover,
.loja-topo__links a[aria-current="page"] { border-color: var(--vinho); }

.loja-topo__carrinho { position: relative; }
.loja-topo__contador {
  position: absolute;
  top: -.6rem;
  right: -.9rem;
  min-width: 1.25rem;
  height: 1.25rem;
  padding: 0 .3rem;
  border-radius: 999px;
  background: var(--vinho);
  color: var(--creme);
  font-size: .68rem;
  line-height: 1.25rem;
  text-align: center;
  letter-spacing: 0;
}
.loja-topo__contador[hidden] { display: none; }

/* ---------- estrutura ---------- */

.loja-main {
  flex: 1;
  width: 100%;
  max-width: 1080px;
  margin: 0 auto;
  padding: clamp(2.4rem, 6vw, 4.5rem) clamp(1.2rem, 5vw, 2rem) 5rem;
}

/* O style.css dá um respiro grande a toda <section> (certo para a
   landing page, errado aqui dentro). Na loja quem controla o
   espaçamento é .loja-secao. */
.loja-main section { padding: 0; }

.loja-cabecalho { margin-bottom: clamp(2rem, 5vw, 3.2rem); }
.loja-cabecalho p {
  margin-top: .9rem;
  max-width: 46ch;
  color: rgba(51, 35, 29, .72);
}

.loja-secao { margin-top: clamp(2.6rem, 6vw, 4rem); }
.loja-secao__titulo {
  font-family: var(--serif);
  font-size: 1.55rem;
  font-weight: 420;
  margin-bottom: 1.2rem;
}

/* ---------- catalogo ---------- */

.catalogo {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(266px, 1fr));
  gap: clamp(1.2rem, 3vw, 2rem);
}

.cartao {
  display: flex;
  flex-direction: column;
  background: #fff;
  border: 1px solid var(--linha);
}

.cartao__foto { aspect-ratio: 4 / 3; background: var(--creme-escuro); }
.cartao__foto img { width: 100%; height: 100%; object-fit: cover; }

.cartao__corpo { display: flex; flex-direction: column; flex: 1; padding: 1.4rem 1.5rem 1.5rem; }

.cartao__selo {
  align-self: flex-start;
  margin-bottom: .7rem;
  padding: .22rem .6rem;
  background: var(--rosa-palido);
  color: var(--vinho);
  font-size: .66rem;
  letter-spacing: .14em;
  text-transform: uppercase;
}

.cartao__nome { font-family: var(--serif); font-size: 1.3rem; font-weight: 420; line-height: 1.2; }
.cartao__desc { margin-top: .6rem; font-size: .92rem; color: rgba(51, 35, 29, .7); }
.cartao__preco { margin-top: 1.1rem; font-family: var(--serif); font-size: 1.6rem; color: var(--vinho); }
.cartao__nota { font-size: .78rem; color: rgba(51, 35, 29, .55); }
.cartao__acao { margin-top: 1.3rem; }
.cartao__acao .botao { width: 100%; text-align: center; cursor: pointer; }

/* ---------- carrinho ---------- */

.carrinho-grade {
  display: grid;
  grid-template-columns: minmax(0, 1.6fr) minmax(280px, 1fr);
  gap: clamp(1.6rem, 4vw, 3rem);
  align-items: start;
}
@media (max-width: 820px) { .carrinho-grade { grid-template-columns: 1fr; } }

.linha-item {
  display: grid;
  grid-template-columns: 84px minmax(0, 1fr) auto;
  gap: 1.1rem;
  align-items: center;
  padding: 1.2rem 0;
  border-bottom: 1px solid var(--linha);
}
.linha-item__foto { width: 84px; height: 68px; background: var(--creme-escuro); }
.linha-item__foto img { width: 100%; height: 100%; object-fit: cover; }
.linha-item__nome { font-family: var(--serif); font-size: 1.12rem; }
.linha-item__meta { font-size: .82rem; color: rgba(51, 35, 29, .6); }
.linha-item__direita { text-align: right; }
.linha-item__valor { font-family: var(--serif); font-size: 1.12rem; color: var(--vinho); }

.qtd { display: inline-flex; align-items: center; border: 1px solid var(--linha); margin-top: .5rem; }
.qtd button {
  width: 2rem;
  height: 2rem;
  border: 0;
  background: none;
  color: var(--ink);
  font-size: 1rem;
  cursor: pointer;
  font-family: inherit;
}
.qtd button:hover { background: var(--creme-escuro); }
.qtd button:disabled { opacity: .3; cursor: default; }
.qtd span { min-width: 2rem; text-align: center; font-size: .92rem; }

.resumo {
  position: sticky;
  top: 6rem;
  padding: 1.7rem;
  background: #fff;
  border: 1px solid var(--linha);
}
.resumo__linha {
  display: flex;
  justify-content: space-between;
  gap: 1rem;
  padding: .5rem 0;
  font-size: .95rem;
}
.resumo__linha--desconto { color: var(--vinho); }
.resumo__total {
  display: flex;
  justify-content: space-between;
  align-items: baseline;
  gap: 1rem;
  margin-top: .9rem;
  padding-top: 1rem;
  border-top: 1px solid var(--linha);
  font-family: var(--serif);
  font-size: 1.45rem;
}
.resumo .botao { width: 100%; margin-top: 1.4rem; text-align: center; cursor: pointer; }

/* ---------- formularios ---------- */

.campo { display: block; margin-bottom: 1.1rem; }
.campo > span {
  display: block;
  margin-bottom: .4rem;
  font-size: .74rem;
  letter-spacing: .12em;
  text-transform: uppercase;
  color: rgba(51, 35, 29, .62);
}
.campo input, .campo select, .campo textarea {
  width: 100%;
  padding: .82rem .95rem;
  border: 1px solid var(--linha);
  background: #fff;
  font-family: var(--sans);
  font-size: 1rem;
  font-weight: 300;
  color: var(--ink);
}
.campo input:focus, .campo select:focus, .campo textarea:focus {
  outline: 2px solid var(--rosa);
  outline-offset: 1px;
  border-color: transparent;
}
.campo--codigo input {
  font-size: 1.7rem;
  letter-spacing: .5em;
  text-align: center;
  padding-left: .5em;
}

.linha-campos { display: flex; gap: .6rem; align-items: flex-end; }
.linha-campos .campo { flex: 1; margin-bottom: 0; }
.linha-campos .botao { padding: .82rem 1.2rem; cursor: pointer; white-space: nowrap; }

.caixa-central {
  max-width: 420px;
  margin: 0 auto;
  padding: clamp(1.8rem, 5vw, 2.6rem);
  background: #fff;
  border: 1px solid var(--linha);
}

/* ---------- avisos ---------- */

.aviso {
  margin: 1rem 0;
  padding: .85rem 1.05rem;
  font-size: .92rem;
  border-left: 3px solid var(--nude);
  background: var(--creme-escuro);
}
.aviso--erro { border-color: #9d2c2c; background: #f8e6e4; color: #6d1f1f; }
.aviso--ok { border-color: var(--vinho); background: var(--rosa-palido); color: var(--vinho-escuro); }
.aviso[hidden] { display: none; }

.vazio {
  padding: 3.5rem 1rem;
  text-align: center;
  color: rgba(51, 35, 29, .6);
}
.vazio p { margin-bottom: 1.4rem; }

/* ---------- cartoes de voucher / credito ---------- */

.lista-cartoes { display: grid; grid-template-columns: repeat(auto-fill, minmax(258px, 1fr)); gap: 1.1rem; }

.voucher {
  padding: 1.4rem;
  background: var(--rosa-palido);
  border: 1px solid rgba(94, 31, 40, .18);
}
.voucher--inativo { background: var(--creme-escuro); border-color: var(--linha); opacity: .72; }
.voucher__codigo {
  font-size: 1.32rem;
  letter-spacing: .16em;
  color: var(--vinho);
  word-break: break-all;
}
.voucher--inativo .voucher__codigo { text-decoration: line-through; color: rgba(51, 35, 29, .5); }
.voucher__meta { margin-top: .5rem; font-size: .82rem; color: rgba(51, 35, 29, .68); }

.barra-credito { height: 5px; margin: .8rem 0 .5rem; background: var(--creme-escuro); }
.barra-credito i { display: block; height: 100%; background: var(--vinho); }

/* ---------- pedidos ---------- */

.pedido { padding: 1.3rem 0; border-bottom: 1px solid var(--linha); }
.pedido__topo { display: flex; flex-wrap: wrap; justify-content: space-between; gap: .6rem; align-items: baseline; }
.pedido__codigo { font-family: var(--serif); font-size: 1.15rem; }
.pedido__itens { margin-top: .6rem; font-size: .9rem; color: rgba(51, 35, 29, .68); }

.etiqueta {
  padding: .2rem .6rem;
  font-size: .68rem;
  letter-spacing: .12em;
  text-transform: uppercase;
}
.etiqueta--pago { background: var(--rosa-palido); color: var(--vinho); }
.etiqueta--aguardando { background: var(--creme-escuro); color: rgba(51, 35, 29, .7); }
.etiqueta--cancelado, .etiqueta--reembolsado { background: #f0e2e0; color: #7d2b2b; }

/* ---------- painel ---------- */

.metricas { display: grid; grid-template-columns: repeat(auto-fit, minmax(190px, 1fr)); gap: 1rem; }
.metrica { padding: 1.3rem 1.4rem; background: #fff; border: 1px solid var(--linha); }
.metrica__rotulo { font-size: .7rem; letter-spacing: .13em; text-transform: uppercase; color: rgba(51, 35, 29, .6); }
.metrica__valor { margin-top: .45rem; font-family: var(--serif); font-size: 1.85rem; color: var(--vinho); }

.abas { display: flex; flex-wrap: wrap; gap: .4rem; margin-bottom: 1.8rem; border-bottom: 1px solid var(--linha); }
.abas button {
  padding: .7rem 1.1rem;
  border: 0;
  border-bottom: 2px solid transparent;
  background: none;
  font-family: inherit;
  font-size: .8rem;
  letter-spacing: .1em;
  text-transform: uppercase;
  color: rgba(51, 35, 29, .6);
  cursor: pointer;
}
.abas button[aria-selected="true"] { color: var(--vinho); border-color: var(--vinho); }

.tabela { width: 100%; border-collapse: collapse; font-size: .9rem; }
.tabela th, .tabela td { padding: .75rem .6rem; text-align: left; border-bottom: 1px solid var(--linha); vertical-align: top; }
.tabela th {
  font-size: .68rem;
  letter-spacing: .12em;
  text-transform: uppercase;
  color: rgba(51, 35, 29, .58);
  font-weight: 400;
}
.tabela td.num, .tabela th.num { text-align: right; white-space: nowrap; }
.rolagem { overflow-x: auto; }

.botao-mini {
  padding: .35rem .7rem;
  border: 1px solid var(--linha);
  background: none;
  font-family: inherit;
  font-size: .76rem;
  color: var(--vinho);
  cursor: pointer;
}
.botao-mini:hover { background: var(--creme-escuro); }

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

.loja-rodape {
  padding: 2.2rem clamp(1.2rem, 5vw, 4rem);
  border-top: 1px solid var(--linha);
  font-size: .82rem;
  color: rgba(51, 35, 29, .6);
  display: flex;
  flex-wrap: wrap;
  gap: 1rem;
  justify-content: space-between;
}

.carregando { padding: 3rem 1rem; text-align: center; color: rgba(51, 35, 29, .5); }

/* Respeita quem pediu menos animacao no sistema. */
@media (prefers-reduced-motion: reduce) {
  * { animation: none !important; transition: none !important; }
}

/* ---------- tela de entrar / criar conta ---------- */

.entrar__ajuda { margin-bottom: 1.4rem; color: rgba(51, 35, 29, .7); }
.entrar__voltar { margin-top: 1.1rem; text-align: center; }

.botao--bloco { width: 100%; text-align: center; cursor: pointer; }

.escolha { margin-bottom: 1.2rem; padding: 0; border: 0; }
.escolha legend {
  padding: 0;
  margin-bottom: .5rem;
  font-size: .74rem;
  letter-spacing: .12em;
  text-transform: uppercase;
  color: rgba(51, 35, 29, .62);
}
.escolha label {
  display: inline-flex;
  align-items: center;
  gap: .42rem;
  margin-right: 1.3rem;
  font-size: .95rem;
  cursor: pointer;
}
.escolha input { accent-color: var(--vinho); }
.escolha[hidden] { display: none; }

/* As abas da caixa de login ficam mais discretas que as do painel. */
.caixa-central .abas { margin-bottom: 1.6rem; }

/* display:flex venceria o atributo hidden, então precisa ser explícito. */
.abas[hidden] { display: none; }

/* ============================================================
   Página de entrar: formulário à esquerda, sala da clínica à
   direita. Sem cabeçalho da loja aqui de propósito: quem chegou
   nesta tela veio fazer uma coisa só, e o menu só dava saída.
   ============================================================ */

/* Só o eixo horizontal: travar o vertical cortaria o topo do
   formulário em tela baixa com o teclado aberto. */
.entrada-corpo { overflow-x: hidden; }

.entrada {
  /* Altura exata do .loja-topo, montada com as mesmas medidas que ele:
     o selo (clamp lá em cima), o padding de 1.1rem em cima e embaixo e
     a linha de 1px da borda. Um número redondo aqui erraria por alguns
     pixels conforme a largura da tela, e a foto passaria por baixo do
     cabeçalho ou deixaria uma fresta. */
  --topo: calc(clamp(46px, 5vw, 58px) + 2.2rem + 1px);
  display: grid;
  grid-template-columns: 1fr;
  /* O .loja-corpo é uma coluna flex, então flex:1 já entrega toda a
     altura que sobra abaixo do cabeçalho. O min-height é só a garantia
     para quando o conteúdo for mais curto que a tela. */
  flex: 1;
  min-height: calc(100svh - var(--topo));
}

/* No HTML a foto vem depois do formulário, o que é a ordem certa para
   leitor de tela e para o teclado. No celular ela sobe visualmente. */
@media (max-width: 899px) {
  .entrada__cena { order: -1; }
}

@media (min-width: 900px) {
  .entrada { grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); }
}

/* ---------- coluna do formulário ---------- */

.entrada__forma {
  display: flex;
  align-items: center;
  justify-content: center;
  padding: clamp(2rem, 5vw, 4rem) clamp(1.4rem, 5vw, 3.4rem);
  background: var(--creme);
}

.entrada__caixa { width: 100%; max-width: 27rem; }

/* O logo é um selo redondo (331x331), então a caixa é quadrada:
   numa caixa deitada ele encolheria até virar um carimbo. */
.entrada__marca { display: block; width: 68px; height: 68px; margin-bottom: clamp(1.8rem, 5vw, 3rem); }
.entrada__marca img { width: 100%; height: 100%; object-fit: contain; }

.entrada__titulo {
  font-family: var(--serif);
  font-weight: 340;
  font-size: clamp(2.1rem, 4.4vw, 3rem);
  line-height: 1.08;
  letter-spacing: -.015em;
  margin-bottom: .7rem;
}

.entrada__titulo em { font-style: italic; color: var(--vinho); }

.entrada__linha {
  color: rgba(51, 35, 29, .68);
  margin-bottom: clamp(1.8rem, 4vw, 2.4rem);
  max-width: 24rem;
}

/* Nesta página as abas ficam soltas na coluna, sem a moldura da
   .caixa-central que as outras telas usam. */
.entrada__caixa .abas { margin-bottom: 1.6rem; }

.entrada__pe {
  display: flex;
  flex-wrap: wrap;
  gap: 1.4rem;
  margin-top: 2.2rem;
  padding-top: 1.4rem;
  border-top: 1px solid var(--linha);
  font-size: .84rem;
  color: rgba(51, 35, 29, .6);
}

/* ---------- coluna da foto ---------- */

/* No celular a foto vira uma faixa curta no topo: some a legenda,
   fica só o ambiente. Alta demais e o botão cairia abaixo da dobra. */
.entrada__cena { position: relative; display: block; height: 168px; }

/* Grudada no topo: a aba "criar conta" é mais alta que a viewport,
   e sem isto a foto subiria junto e a legenda sairia da tela. */
@media (min-width: 900px) {
  .entrada__cena {
    display: block;
    position: sticky;
    /* Abaixo do cabeçalho, não atrás dele: o .loja-topo também é sticky
       e tem fundo translúcido, então a foto passaria borrada por trás. */
    top: var(--topo);
    height: calc(100svh - var(--topo));
    padding: 1rem 1rem 1rem 0;
  }
}

.entrada__foto {
  position: absolute;
  inset: 1rem 1rem 1rem 0;
  border-radius: 26px;
  overflow: hidden;
  background: var(--creme-escuro);
}

.entrada__foto img { width: 100%; height: 100%; object-fit: cover; }

/* Véu quente por cima: a foto tem luz fria no teto e a legenda
   precisa de contraste sem escurecer o ambiente todo. */
.entrada__foto::after {
  content: "";
  position: absolute;
  inset: 0;
  background: linear-gradient(180deg, rgba(94, 31, 40, .10) 0%, rgba(74, 23, 31, .06) 42%, rgba(51, 35, 29, .62) 100%);
}

.entrada__prova {
  position: absolute;
  left: 2.4rem;
  right: 3.4rem;
  bottom: 3rem;
  color: #fff;
}

.entrada__prova p {
  font-family: var(--serif);
  font-weight: 340;
  font-style: italic;
  font-size: clamp(1.05rem, 1.5vw, 1.32rem);
  line-height: 1.42;
  text-wrap: balance;
}

.entrada__prova cite {
  display: block;
  margin-top: .85rem;
  font-family: var(--sans);
  font-style: normal;
  font-size: .78rem;
  letter-spacing: .1em;
  text-transform: uppercase;
  color: rgba(255, 255, 255, .74);
}

/* ---------- entrada em cascata ---------- */

.surge {
  opacity: 0;
  transform: translateY(14px);
  filter: blur(5px);
  animation: surgir .72s cubic-bezier(.22, .61, .36, 1) forwards;
}

.surge--1 { animation-delay: .05s; }
.surge--2 { animation-delay: .13s; }
.surge--3 { animation-delay: .21s; }
.surge--4 { animation-delay: .29s; }
.surge--5 { animation-delay: .37s; }
.surge--6 { animation-delay: .45s; }

@keyframes surgir {
  to { opacity: 1; transform: none; filter: blur(0); }
}

/* A foto entra pelo lado, um pouco depois do formulário. */
.entrada__foto { animation: surgirLado .9s cubic-bezier(.22, .61, .36, 1) .18s backwards; }
.entrada__prova { animation: surgir .8s cubic-bezier(.22, .61, .36, 1) .78s backwards; }

@keyframes surgirLado {
  from { opacity: 0; transform: translateX(26px); filter: blur(7px); }
}

/* Um painel escondido não pode continuar animando: o [hidden] some
   com o elemento, mas o delay ainda rodaria e a aba trocada piscaria. */
.surge[hidden] { display: none; }

@media (prefers-reduced-motion: reduce) {
  .surge,
  .entrada__foto,
  .entrada__prova { animation: none; opacity: 1; transform: none; filter: none; }
}

/* Ajustes do celular vêm no fim de propósito: as regras de .entrada__foto
   acima definem o raio e o recuo da coluna, e aqui elas são desfeitas
   para a faixa colar nas bordas da tela. */
@media (max-width: 899px) {
  .entrada__prova { display: none; }
  .entrada__foto { inset: 0; border-radius: 0; animation-name: surgir; }
  .entrada__foto img { object-position: center 28%; }
  .entrada__forma { padding-top: clamp(1.6rem, 6vw, 2.4rem); }
}

/* ---------- entrar com o Google ---------- */

/* Separador com a palavra no meio da linha. O truque é a própria palavra
   ter o fundo da página, cobrindo o pedaço de régua que passa atrás. */
.ou {
  position: relative;
  margin: 1.6rem 0 1.2rem;
  text-align: center;
  border-top: 1px solid var(--linha);
}

.ou span {
  position: relative;
  top: -.72em;
  padding: 0 .9rem;
  background: var(--creme);
  font-size: .82rem;
  letter-spacing: .08em;
  text-transform: uppercase;
  color: rgba(51, 35, 29, .5);
}

.botao-google {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: .7rem;
  width: 100%;
  padding: .95rem 1.2rem;
  border: 1px solid var(--linha);
  border-radius: 2px;
  background: #fff;
  font-family: var(--sans);
  font-size: .84rem;
  font-weight: 400;
  letter-spacing: .08em;
  text-transform: uppercase;
  color: var(--ink);
  transition: border-color .3s, background .3s;
}

.botao-google:hover { border-color: var(--vinho); background: var(--creme-escuro); }
.botao-google:focus-visible { outline: 2px solid var(--vinho); outline-offset: 2px; }

/* O style.css estica toda <img>; o <svg> aqui precisa manter o tamanho. */
.botao-google__marca { flex-shrink: 0; width: 19px; height: 19px; }

.ou[hidden], .botao-google[hidden] { display: none; }

.surge--7 { animation-delay: .53s; }

/* ============================================================
   Entrada — jardim circular.
   Direção visual inspirada no conceito 05: a interface permanece
   funcional e editorial, enquanto a clínica aparece como um portal.
   Tudo fica sob .entrada--jardim para não alterar outras páginas.
   ============================================================ */

.entrada--jardim {
  position: relative;
  isolation: isolate;
  overflow: hidden;
  background:
    radial-gradient(circle at 82% 35%, rgba(232, 167, 164, .15), transparent 23rem),
    linear-gradient(125deg, #fbf6f0 0%, var(--creme) 52%, #f5ebe1 100%);
}

.entrada--jardim::before {
  content: "";
  position: absolute;
  z-index: -1;
  width: clamp(23rem, 43vw, 48rem);
  aspect-ratio: 1;
  right: clamp(-14rem, -8vw, -5rem);
  top: 50%;
  transform: translateY(-50%);
  border: 1px solid rgba(94, 31, 40, .1);
  border-radius: 50%;
  box-shadow: 0 0 0 clamp(2.5rem, 5vw, 5.5rem) rgba(255, 255, 255, .2);
}

.entrada--jardim .entrada__forma {
  position: relative;
  z-index: 5;
  background: transparent;
}

.entrada--jardim .entrada__caixa {
  max-width: 29rem;
}

.entrada--jardim .entrada__titulo {
  max-width: 8.5em;
  margin-bottom: 1rem;
  font-size: clamp(2.55rem, 4.2vw, 4.4rem);
  letter-spacing: -.035em;
}

.entrada--jardim .entrada__caixa .abas {
  max-width: 26rem;
  margin-bottom: 1.85rem;
}

.entrada--jardim .abas button {
  padding-inline: 0;
  margin-right: 2rem;
}

.entrada--jardim .entrar__ajuda {
  max-width: 39ch;
  font-size: .94rem;
}

.entrada--jardim .campo input,
.entrada--jardim .campo select,
.entrada--jardim .campo textarea {
  border-color: rgba(94, 31, 40, .18);
  border-radius: 999px;
  background: rgba(255, 255, 255, .75);
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, .8);
  padding: .92rem 1.2rem;
  transition: border-color .25s, box-shadow .25s, background .25s;
}

.entrada--jardim .campo input:focus,
.entrada--jardim .campo select:focus,
.entrada--jardim .campo textarea:focus {
  outline: 0;
  border-color: var(--vinho);
  background: #fff;
  box-shadow: 0 0 0 3px rgba(232, 167, 164, .22);
}

.entrada--jardim .botao--bloco {
  border-radius: 999px;
  background: var(--vinho);
  color: var(--creme);
  box-shadow: 0 12px 28px rgba(74, 23, 31, .14);
  transition: transform .35s cubic-bezier(.22, 1, .36, 1),
              box-shadow .35s,
              letter-spacing .4s cubic-bezier(.22, 1, .36, 1);
}

.entrada--jardim .botao--bloco:hover {
  transform: translateY(-2px);
  box-shadow: 0 17px 34px rgba(74, 23, 31, .2);
}

.entrada--jardim .ou span { background: #faf3ec; }

.entrada--jardim .botao-google {
  border-radius: 999px;
  background: rgba(255, 255, 255, .7);
}

.entrada--jardim .entrada__pe {
  border-top-color: rgba(94, 31, 40, .12);
}

/* O portal circular usa a fotografia original da recepção. */
.entrada--jardim .entrada__cena {
  position: relative;
  z-index: 1;
  display: grid;
  place-items: center;
  min-width: 0;
  overflow: visible;
}

.entrada--jardim .entrada__foto {
  position: relative;
  inset: auto;
  z-index: 2;
  width: min(42vw, 42rem);
  aspect-ratio: 1;
  border: clamp(.65rem, 1.2vw, 1.1rem) solid rgba(255, 255, 255, .78);
  border-radius: 50%;
  background: var(--creme-escuro);
  box-shadow:
    0 0 0 1px rgba(94, 31, 40, .1),
    0 2rem 5rem rgba(74, 23, 31, .16),
    inset 0 0 0 1px rgba(255, 255, 255, .55);
}

.entrada--jardim .entrada__foto img {
  border-radius: inherit;
  object-position: center 64%;
  transform: scale(1.015);
  transition: transform 1.2s cubic-bezier(.22, 1, .36, 1);
}

.entrada--jardim .entrada__foto:hover img { transform: scale(1.055); }

.entrada--jardim .entrada__foto::after {
  border-radius: inherit;
  background:
    linear-gradient(145deg, rgba(250, 243, 236, .12), transparent 38%),
    linear-gradient(0deg, rgba(51, 35, 29, .28), transparent 48%);
}

.entrada__halo {
  position: absolute;
  z-index: 0;
  display: block;
  border: 1px solid rgba(94, 31, 40, .14);
  border-radius: 50%;
  pointer-events: none;
}

.entrada__halo--um {
  width: min(46vw, 46rem);
  aspect-ratio: 1;
}

.entrada__halo--dois {
  width: min(36vw, 36rem);
  aspect-ratio: 1;
  border-color: rgba(255, 255, 255, .65);
  transform: translate(19%, -12%);
}

.entrada__flor {
  position: absolute;
  z-index: 3;
  width: clamp(12rem, 20vw, 22rem);
  height: auto;
  object-fit: contain;
  pointer-events: none;
  user-select: none;
  filter: saturate(.72) sepia(.08);
}

.entrada__flor--esq {
  left: -4%;
  bottom: -4%;
  transform: rotate(7deg);
}

.entrada__flor--dir {
  right: -6%;
  top: 6%;
  transform: rotate(-12deg);
}

.entrada--jardim .entrada__prova {
  z-index: 4;
  left: auto;
  right: clamp(1.5rem, 4vw, 4rem);
  bottom: clamp(1.4rem, 4vw, 3.5rem);
  width: min(24rem, 56%);
  padding: 1rem 1.15rem;
  border-left: 1px solid rgba(255, 255, 255, .62);
  background: rgba(51, 35, 29, .22);
  backdrop-filter: blur(12px);
}

.entrada--jardim .entrada__prova p {
  font-size: clamp(.92rem, 1.2vw, 1.08rem);
}

@media (min-width: 900px) {
  .entrada--jardim {
    grid-template-columns: minmax(25rem, .86fr) minmax(35rem, 1.14fr);
  }

  .entrada--jardim .entrada__forma {
    padding-left: clamp(2.5rem, 7vw, 8rem);
    padding-right: clamp(1.5rem, 3vw, 3rem);
  }

  .entrada--jardim .entrada__cena {
    position: sticky;
    top: var(--topo);
    height: calc(100svh - var(--topo));
    padding: clamp(1.5rem, 3vw, 3rem);
  }
}

@media (max-width: 899px) {
  .entrada--jardim::before { top: 11rem; right: -10rem; transform: none; }

  .entrada--jardim .entrada__cena {
    height: clamp(16rem, 73vw, 26rem);
    padding: 1.5rem;
    overflow: hidden;
  }

  .entrada--jardim .entrada__foto {
    width: clamp(13.5rem, 61vw, 22rem);
  }

  .entrada__halo--um { width: clamp(15rem, 69vw, 24rem); }
  .entrada__halo--dois { width: clamp(11rem, 52vw, 18rem); }

  .entrada__flor { width: clamp(8rem, 30vw, 13rem); }
  .entrada__flor--esq { left: 2%; bottom: -8%; }
  .entrada__flor--dir { right: -3%; top: -7%; }

  .entrada--jardim .entrada__forma {
    padding: 2.1rem clamp(1.25rem, 6vw, 2.5rem) 3.5rem;
  }

  .entrada--jardim .entrada__titulo {
    font-size: clamp(2.45rem, 12vw, 3.75rem);
  }

  .entrada--jardim .entrada__prova { display: none; }
}

@media (max-width: 520px) {
  .entrada--jardim .entrada__cena { height: 15rem; }
  .entrada--jardim .entrada__foto { width: 12.5rem; }
  .entrada--jardim .entrada__caixa .abas { margin-bottom: 1.45rem; }
  .entrada--jardim .entrada__pe { gap: .8rem 1.2rem; }
}

@media (prefers-reduced-motion: reduce) {
  .entrada--jardim .entrada__foto img,
  .entrada--jardim .botao--bloco { transition: none; }
}

/* ---------- paisagismo do conceito 05 ---------- */

/* A fotografia sobe um pouco para o canteiro atravessar a base do portal,
   criando a sensação de uma abertura arquitetônica no jardim. */
.entrada--jardim .entrada__foto {
  transform: translateY(-3%);
}

.entrada--jardim .entrada__prova,
.entrada--jardim .entrada__flor {
  display: none;
}

.entrada__jardim {
  position: absolute;
  z-index: 4;
  right: -8%;
  bottom: -2.5%;
  width: min(61vw, 76rem);
  max-width: none;
  height: auto;
  object-fit: contain;
  pointer-events: none;
  user-select: none;
  filter:
    saturate(.74)
    sepia(.06)
    drop-shadow(0 1.3rem 1.2rem rgba(51, 35, 29, .13));
  animation: jardimEntrar 1.05s cubic-bezier(.22, 1, .36, 1) .38s backwards;
}

@keyframes jardimEntrar {
  from {
    opacity: 0;
    transform: translateY(1.8rem);
    filter: saturate(.74) sepia(.06) blur(5px);
  }
}

@media (min-width: 900px) and (max-height: 760px) {
  .entrada__jardim {
    width: min(54vw, 67rem);
    bottom: -7%;
  }
}

@media (max-width: 899px) {
  .entrada--jardim .entrada__foto {
    transform: translateY(-5%);
  }

  .entrada__jardim {
    right: 50%;
    bottom: -7%;
    width: min(122vw, 46rem);
    transform: translateX(50%);
  }

  @keyframes jardimEntrar {
    from {
      opacity: 0;
      transform: translate(50%, 1.2rem);
      filter: saturate(.74) sepia(.06) blur(4px);
    }
  }
}

@media (max-width: 520px) {
  .entrada__jardim {
    bottom: -5%;
    width: 130vw;
  }
}

@media (prefers-reduced-motion: reduce) {
  .entrada__jardim { animation: none; }
}

/* ============================================================
   Tela de entrar: escrita em preto, acento no rosa da clinica.
   Tudo preso a body.entrada-corpo para nao mexer na loja, no
   carrinho, na conta nem no painel.
   ============================================================ */

body.entrada-corpo {
  /* Escrita em preto no lugar do marrom do site. */
  --ink: #000;

  /* O rosa do logo, tirado do proprio arquivo: rgb(237,138,165).
     Nao e o --rosa da paleta (#E8A7A4), que puxa para salmao.
     Ele e claro demais para virar texto sobre o creme (2,2:1, quando o
     minimo legivel e 4,5:1), entao aparece de dois jeitos. O claro
     preenche botao e mancha, sempre com escrita preta por cima. O
     fechado e o mesmo tom com a luz baixada, mesma matiz de 344 graus:
     e o que vira texto, traco e borda, com 5,6:1 sobre o creme. Assim a
     tela fica rosa de verdade e continua legivel no celular, na rua. */
  --rosa-logo: #ED8AA5;
  --vinho: #A33E59;
  --vinho-escuro: #8A3049;
}

/* Os cinzas do site sao marrom translucido (rgba do --ink antigo).
   Aqui viram preto translucido, mantendo a mesma hierarquia. */
body.entrada-corpo .entrar__ajuda,
body.entrada-corpo .escolha legend { color: rgba(0, 0, 0, .66); }
body.entrada-corpo .campo > span { color: rgba(0, 0, 0, .58); }
/* :not() de proposito: sem ele esta regra tem a mesma forca da que
   pinta a aba escolhida e, por vir depois, apagaria o destaque dela. */
body.entrada-corpo .abas button:not([aria-selected="true"]) { color: rgba(0, 0, 0, .54); }
body.entrada-corpo .entrada__pe { color: rgba(0, 0, 0, .6); }
body.entrada-corpo .ou span { color: rgba(0, 0, 0, .48); }

/* Botao principal: o rosa claro preenchendo, escrita preta por cima.
   Preto sobre #E8A7A4 da 11:1, o par mais legivel da paleta. */
.entrada--jardim .botao--bloco {
  background: var(--rosa-logo);
  color: #000;
  box-shadow: 0 12px 28px rgba(163, 62, 89, .22);
}

.entrada--jardim .botao--bloco:hover {
  background: #E6779A;
  box-shadow: 0 17px 34px rgba(163, 62, 89, .3);
}

/* Os traços e circulos decorativos eram vinho translucido. Passam a ser
   o mesmo rosa fechado do texto, para a tela ter uma cor so. */
.entrada--jardim::before,
.entrada--jardim .entrada__halo--um,
.entrada__halo { border-color: rgba(163, 62, 89, .16); }

.entrada--jardim .campo input,
.entrada--jardim .campo select,
.entrada--jardim .campo textarea { border-color: rgba(163, 62, 89, .24); }

.entrada--jardim .campo input:focus,
.entrada--jardim .campo select:focus,
.entrada--jardim .campo textarea:focus {
  box-shadow: 0 0 0 3px rgba(237, 138, 165, .34);
}

.entrada--jardim .entrada__pe { border-top-color: rgba(163, 62, 89, .18); }

.entrada--jardim .entrada__foto {
  box-shadow:
    0 0 0 1px rgba(163, 62, 89, .12),
    0 2rem 5rem rgba(163, 62, 89, .18),
    inset 0 0 0 1px rgba(255, 255, 255, .55);
}

/* ---------- painel: lista de clientes ---------- */

.barra-busca {
  display: flex;
  flex-wrap: wrap;
  align-items: flex-end;
  justify-content: space-between;
  gap: 1rem;
  margin-bottom: 1.4rem;
}

.campo--busca { margin-bottom: 0; width: min(24rem, 100%); }

.barra-busca__contagem {
  font-size: .84rem;
  color: rgba(51, 35, 29, .6);
}

.paginacao {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 1.4rem;
  margin-top: 1.4rem;
  font-size: .84rem;
  color: rgba(51, 35, 29, .6);
}

.paginacao[hidden] { display: none; }

.paginacao button[disabled] {
  opacity: .35;
  cursor: default;
  pointer-events: none;
}

/* A etiqueta "equipe" fica na mesma linha do nome, sem empurrar nada. */
.tabela .etiqueta { margin-left: .5rem; vertical-align: middle; }

/* ---------- cabecalho em tela estreita ---------- */

/* Com cinco links (o caso de quem e admin: Inicio, Pacotes, Minha conta,
   Painel, Carrinho) a navegacao passava de 390px e empurrava a pagina
   inteira para o lado. Aqui ela rola sozinha, dentro do cabecalho, sem
   arrastar o resto junto.
   O padding-right e o espaco do contador do carrinho, que fica
   posicionado fora do link e seria cortado na borda da rolagem. */
@media (max-width: 620px) {
  .loja-topo {
    gap: .9rem;
    padding-inline: clamp(.9rem, 4vw, 1.4rem);
  }

  .loja-topo__links {
    min-width: 0;
    overflow-x: auto;
    padding-right: 1.1rem;
    scrollbar-width: none;
    -webkit-overflow-scrolling: touch;
  }

  .loja-topo__links::-webkit-scrollbar { display: none; }
  .loja-topo__links a { white-space: nowrap; }
}

/* ============================================================
   Painel administrativo — central de comando.
   A cor principal vem do rosa do logo: #ED8AA5.
   Tudo e isolado por body.admin-corpo para nao alterar a loja.
   ============================================================ */

body.admin-corpo {
  --admin-rosa: #ED8AA5;
  --admin-rosa-forte: #A33E59;
  --admin-rosa-escuro: #7E2941;
  --admin-rosa-claro: #FBE8EE;
  --admin-fundo: #F7F3F0;
  --admin-superficie: rgba(255, 253, 251, .94);
  --admin-borda: rgba(126, 41, 65, .13);
  --admin-ink: #271B1E;
  height: 100vh;
  overflow: hidden;
  background: var(--admin-fundo);
  color: var(--admin-ink);
}

body.admin-corpo > .loja-topo { display: none; }

.admin-layout {
  display: grid;
  grid-template-columns: 16.5rem minmax(0, 1fr);
  min-height: 100vh;
}

/* ---------- navegacao lateral ---------- */

.admin-lateral {
  position: relative;
  z-index: 10;
  display: flex;
  flex-direction: column;
  height: 100vh;
  padding: 1.35rem 1rem 1rem;
  overflow: hidden;
  color: #fff;
  background:
    radial-gradient(circle at 18% 8%, rgba(255, 255, 255, .2), transparent 13rem),
    linear-gradient(155deg, var(--admin-rosa-escuro) 0%, var(--admin-rosa-forte) 62%, #C85F7C 100%);
  box-shadow: .8rem 0 2.5rem rgba(90, 30, 48, .1);
}

.admin-lateral::after {
  content: "";
  position: absolute;
  z-index: -1;
  right: -6rem;
  bottom: 6rem;
  width: 14rem;
  aspect-ratio: 1;
  border: 1px solid rgba(255, 255, 255, .13);
  border-radius: 50%;
  box-shadow: 0 0 0 2.5rem rgba(255, 255, 255, .025);
}

.admin-marca {
  display: flex;
  align-items: center;
  gap: .8rem;
  padding: .3rem .45rem 1.4rem;
  border-bottom: 1px solid rgba(255, 255, 255, .14);
}

.admin-marca__selo {
  flex: 0 0 auto;
  width: 3.35rem;
  height: 3.35rem;
  padding: .18rem;
  overflow: hidden;
  border-radius: 50%;
  background: #fff;
  box-shadow: 0 .5rem 1.2rem rgba(70, 15, 33, .2);
}

.admin-marca__selo img { width: 100%; height: 100%; object-fit: contain; }

.admin-marca strong {
  display: block;
  font-family: var(--serif);
  font-size: 1.14rem;
  font-weight: 420;
  letter-spacing: -.01em;
}

.admin-marca small {
  display: block;
  margin-top: -.1rem;
  color: rgba(255, 255, 255, .68);
  font-size: .62rem;
  letter-spacing: .14em;
  text-transform: uppercase;
}

.admin-nav {
  display: grid;
  gap: .35rem;
  margin-top: 1.6rem;
}

.admin-nav button {
  /* Uma coluna so. Era grid de duas (indice + rotulo); sem o indice, a
     primeira coluna continuava reservando 2.1rem e o rotulo quebrava em
     varias linhas dentro do que sobrava. */
  display: block;
  width: 100%;
  padding: .78rem .8rem;
  border: 1px solid transparent;
  border-radius: .65rem;
  background: transparent;
  color: rgba(255, 255, 255, .73);
  font: inherit;
  font-size: .86rem;
  text-align: left;
  cursor: pointer;
  transition: background .25s, color .25s, transform .25s;
}

.admin-nav button:hover { color: #fff; transform: translateX(2px); }

.admin-nav button[aria-selected="true"] {
  color: var(--admin-rosa-escuro);
  background: rgba(255, 255, 255, .94);
  box-shadow: 0 .5rem 1.4rem rgba(67, 13, 31, .13);
}

.admin-lateral__rodape {
  display: grid;
  gap: .25rem;
  margin-top: auto;
  padding-top: 1rem;
  border-top: 1px solid rgba(255, 255, 255, .14);
}

.admin-lateral__rodape a {
  display: flex;
  justify-content: space-between;
  padding: .48rem .5rem;
  color: rgba(255, 255, 255, .7);
  font-size: .74rem;
  transition: color .2s;
}

.admin-lateral__rodape a:hover { color: #fff; }

/* ---------- superficie de trabalho ---------- */

.admin-principal {
  height: 100vh;
  overflow: auto;
  padding: clamp(1.35rem, 3vw, 2.8rem) clamp(1.1rem, 3.6vw, 3.8rem) 4rem;
  background:
    radial-gradient(circle at 96% 0%, rgba(237, 138, 165, .15), transparent 24rem),
    var(--admin-fundo);
}

.admin-cabecalho {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 2rem;
  margin-bottom: clamp(1.6rem, 3vw, 2.4rem);
}

.admin-cabecalho__rotulo,
.admin-card__rotulo,
.admin-secao-cabecalho > div > span {
  display: block;
  margin-bottom: .25rem;
  color: var(--admin-rosa-forte);
  font-size: .65rem;
  font-weight: 500;
  letter-spacing: .16em;
  text-transform: uppercase;
}

.admin-cabecalho h1 {
  font-family: var(--serif);
  font-size: clamp(2rem, 3.7vw, 3.45rem);
  font-weight: 340;
  line-height: 1.04;
  letter-spacing: -.035em;
}

.admin-cabecalho__descricao {
  margin-top: .45rem;
  color: rgba(39, 27, 30, .58);
  font-size: .9rem;
}

.admin-cabecalho__meta {
  display: flex;
  align-items: center;
  gap: 1rem;
  padding-top: .35rem;
  color: rgba(39, 27, 30, .58);
  font-size: .73rem;
  text-transform: capitalize;
}

.admin-status {
  display: inline-flex;
  align-items: center;
  gap: .45rem;
  padding: .45rem .7rem;
  border: 1px solid var(--admin-borda);
  border-radius: 999px;
  background: rgba(255, 255, 255, .68);
}

.admin-status i {
  width: .42rem;
  height: .42rem;
  border-radius: 50%;
  background: #5B9A75;
  box-shadow: 0 0 0 3px rgba(91, 154, 117, .13);
}

.admin-paineis[hidden] { display: none; }
.admin-paineis > section { padding: 0; animation: adminPainelEntrar .45s cubic-bezier(.22, 1, .36, 1); }
.admin-paineis > section[hidden] { display: none; }

@keyframes adminPainelEntrar {
  from { opacity: 0; transform: translateY(.5rem); }
}

.admin-card {
  padding: clamp(1.05rem, 2vw, 1.45rem);
  border: 1px solid var(--admin-borda);
  border-radius: .9rem;
  background: var(--admin-superficie);
  box-shadow: 0 .7rem 2.2rem rgba(84, 41, 52, .045);
}

.admin-card__topo {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 1rem;
  margin-bottom: 1.15rem;
}

.admin-card h2,
.admin-secao-cabecalho h2 {
  font-family: var(--serif);
  font-size: 1.45rem;
  font-weight: 420;
  line-height: 1.15;
}

/* ---------- indicadores ---------- */

.admin-corpo .admin-metricas {
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: .8rem;
}

.admin-corpo .metrica {
  min-height: 9rem;
  padding: 1rem 1.05rem;
  border: 1px solid var(--admin-borda);
  border-radius: .85rem;
  background: var(--admin-superficie);
  box-shadow: 0 .7rem 2rem rgba(84, 41, 52, .04);
}

.metrica__topo {
  display: flex;
  align-items: center;
  justify-content: space-between;
  margin-bottom: 1.4rem;
  color: rgba(163, 62, 89, .48);
  font-size: .59rem;
  letter-spacing: .12em;
}

.metrica__ponto {
  width: .48rem;
  height: .48rem;
  border-radius: 50%;
  background: var(--admin-rosa);
  box-shadow: 0 0 0 4px rgba(237, 138, 165, .16);
}

.admin-corpo .metrica__rotulo {
  color: rgba(39, 27, 30, .52);
  font-size: .62rem;
  line-height: 1.4;
}

.admin-corpo .metrica__valor {
  margin-top: .55rem;
  color: var(--admin-rosa-escuro);
  font-size: clamp(1.5rem, 2.2vw, 2.1rem);
  white-space: nowrap;
}

/* ---------- resumo operacional ---------- */

.admin-resumo-grid {
  display: grid;
  grid-template-columns: minmax(0, 1.15fr) minmax(19rem, .85fr);
  gap: .8rem;
  margin-top: .8rem;
}

.admin-card--acoes,
.admin-card--voucher { min-height: 19rem; }

.admin-acoes-hoje { display: grid; }

.admin-prioridade {
  display: grid;
  grid-template-columns: 2.3rem 1fr auto;
  align-items: center;
  gap: .75rem;
  width: 100%;
  padding: .72rem 0;
  border: 0;
  border-bottom: 1px solid var(--admin-borda);
  background: transparent;
  color: inherit;
  font: inherit;
  text-align: left;
  cursor: pointer;
}

.admin-prioridade > span {
  display: grid;
  place-items: center;
  width: 2rem;
  height: 2rem;
  border-radius: .55rem;
  background: var(--admin-rosa-claro);
  color: var(--admin-rosa-forte);
  font-family: var(--serif);
  font-size: 1rem;
}

.admin-prioridade strong { font-size: .82rem; font-weight: 400; }
.admin-prioridade i { color: var(--admin-rosa-forte); font-style: normal; transition: transform .2s; }
.admin-prioridade:hover i { transform: translateX(3px); }

.admin-atalhos {
  display: flex;
  flex-wrap: wrap;
  gap: .45rem;
  margin-top: 1rem;
}

.admin-atalhos button,
.admin-acao-principal {
  padding: .58rem .75rem;
  border: 1px solid var(--admin-borda);
  border-radius: .5rem;
  background: #fff;
  color: var(--admin-rosa-escuro);
  font: inherit;
  font-size: .72rem;
  cursor: pointer;
  transition: border-color .2s, background .2s;
}

.admin-atalhos button:hover { border-color: var(--admin-rosa); background: var(--admin-rosa-claro); }
.admin-atalhos button span { margin-left: .4rem; }

.admin-card--voucher > p {
  max-width: 39ch;
  color: rgba(39, 27, 30, .58);
  font-size: .84rem;
}

.admin-voucher-rapido {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  align-items: end;
  gap: .55rem;
  margin-top: 1.2rem;
}

.admin-voucher-rapido .campo { margin: 0; }

.admin-card--tabela.loja-secao { margin-top: .8rem; }

/* ---------- secoes e formularios ---------- */

.admin-secao-cabecalho {
  display: flex;
  align-items: flex-end;
  justify-content: space-between;
  gap: 1rem;
  margin-bottom: 1rem;
}

.admin-acao-principal {
  padding: .75rem 1rem;
  border-color: var(--admin-rosa-forte);
  background: var(--admin-rosa-forte);
  color: #fff;
}

.admin-acao-principal:hover { background: var(--admin-rosa-escuro); }

.admin-duas-colunas {
  display: grid;
  grid-template-columns: minmax(0, 1.55fr) minmax(20rem, .72fr);
  align-items: start;
  gap: .85rem;
}

.admin-card--formulario {
  position: sticky;
  top: 0;
}

.admin-corpo .loja-secao__titulo {
  margin-bottom: 1.2rem;
  color: var(--admin-ink);
}

.admin-corpo .campo { margin-bottom: .9rem; }
.admin-corpo .campo > span { color: rgba(39, 27, 30, .56); font-size: .65rem; }

.admin-corpo .campo input,
.admin-corpo .campo select,
.admin-corpo .campo textarea {
  border-color: var(--admin-borda);
  border-radius: .55rem;
  background: #fff;
  font-size: .9rem;
  transition: border-color .2s, box-shadow .2s;
}

.admin-corpo .campo input:focus,
.admin-corpo .campo select:focus,
.admin-corpo .campo textarea:focus {
  outline: 0;
  border-color: var(--admin-rosa);
  box-shadow: 0 0 0 3px rgba(237, 138, 165, .2);
}

.admin-corpo .botao {
  border-radius: .55rem;
  font-size: .72rem;
}

.admin-corpo .botao--vinho {
  border-color: var(--admin-rosa-forte);
  background: var(--admin-rosa-forte);
  color: #fff;
}

.admin-corpo .botao--vinho:hover { background: var(--admin-rosa-escuro); }

.admin-corpo .botao-mini {
  border-color: var(--admin-borda);
  border-radius: .45rem;
  color: var(--admin-rosa-escuro);
}

.admin-corpo .botao-mini:hover { border-color: var(--admin-rosa); background: var(--admin-rosa-claro); }

/* ---------- tabelas ---------- */

.admin-corpo .rolagem {
  border-radius: .65rem;
  scrollbar-color: rgba(163, 62, 89, .25) transparent;
}

.admin-corpo .tabela { font-size: .78rem; }

.admin-corpo .tabela th {
  padding: .72rem .68rem;
  color: rgba(39, 27, 30, .46);
  background: #FCF8F7;
  font-size: .58rem;
  white-space: nowrap;
}

.admin-corpo .tabela td {
  padding: .86rem .68rem;
  border-color: rgba(126, 41, 65, .09);
}

.admin-corpo .tabela tbody tr { transition: background .18s; }
.admin-corpo .tabela tbody tr:hover { background: rgba(251, 232, 238, .42); }
.admin-corpo .cartao__nota { color: rgba(39, 27, 30, .47); font-size: .69rem; }

.admin-corpo .etiqueta {
  display: inline-block;
  margin: 0;
  border-radius: 999px;
  font-size: .55rem;
  letter-spacing: .08em;
}

.admin-corpo .etiqueta--aguardando { background: #FFF2DB; color: #8B5D17; }
.admin-corpo .etiqueta--pago { background: #E5F3EA; color: #397052; }
.admin-corpo .etiqueta--cancelado,
.admin-corpo .etiqueta--reembolsado { background: #F8E4E7; color: #8A3049; }

/* ---------- clientes e voucher ---------- */

.admin-card--clientes { min-height: 28rem; }

.admin-corpo .barra-busca {
  align-items: center;
  margin-bottom: 1rem;
  padding-bottom: 1rem;
  border-bottom: 1px solid var(--admin-borda);
}

.admin-corpo .campo--busca { width: min(30rem, 100%); }

.admin-card--voucher-completo { max-width: 48rem; }

.admin-voucher-intro {
  display: grid;
  grid-template-columns: 3.5rem 1fr;
  gap: 1rem;
  margin-bottom: 1.5rem;
  padding-bottom: 1.3rem;
  border-bottom: 1px solid var(--admin-borda);
}

.admin-voucher-intro > span {
  display: grid;
  place-items: center;
  width: 3.2rem;
  height: 3.2rem;
  border-radius: .8rem;
  background: var(--admin-rosa-claro);
  color: var(--admin-rosa-forte);
  font-family: var(--serif);
}

.admin-voucher-intro h3 { font-family: var(--serif); font-size: 1.25rem; font-weight: 420; }
.admin-voucher-intro p { max-width: 55ch; margin-top: .25rem; color: rgba(39, 27, 30, .58); font-size: .82rem; }

.admin-corpo .voucher {
  border: 1px solid rgba(163, 62, 89, .2);
  border-radius: .7rem;
  background: var(--admin-rosa-claro);
}

.admin-corpo .voucher__codigo { color: var(--admin-rosa-escuro); }

.admin-aviso { position: relative; z-index: 20; border-radius: .55rem; }

.admin-carregando {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: .8rem;
  min-height: 50vh;
}

.admin-carregando[hidden] { display: none; }

.admin-carregando span {
  width: 1rem;
  height: 1rem;
  border: 2px solid rgba(237, 138, 165, .3);
  border-top-color: var(--admin-rosa-forte);
  border-radius: 50%;
  animation: adminGirar .75s linear infinite;
}

@keyframes adminGirar { to { transform: rotate(360deg); } }

.admin-corpo :focus-visible { outline: 2px solid var(--admin-rosa-forte); outline-offset: 3px; }

/* ---------- responsivo ---------- */

@media (max-width: 1180px) {
  .admin-layout { grid-template-columns: 14rem minmax(0, 1fr); }
  .admin-corpo .admin-metricas { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .admin-duas-colunas { grid-template-columns: 1fr; }
  .admin-card--formulario { position: static; }
}

@media (max-width: 880px) {
  body.admin-corpo { height: auto; overflow: auto; }
  .admin-layout { display: block; }

  .admin-lateral {
    position: sticky;
    top: 0;
    z-index: 70;
    display: grid;
    grid-template-columns: auto minmax(0, 1fr);
    align-items: center;
    height: auto;
    padding: .65rem .75rem;
    overflow: visible;
  }

  .admin-lateral::after,
  .admin-lateral__rodape,
  .admin-marca > span:last-child { display: none; }

  .admin-marca { padding: 0; border: 0; }
  .admin-marca__selo { width: 2.7rem; height: 2.7rem; }

  .admin-nav {
    display: flex;
    gap: .25rem;
    margin: 0 0 0 .65rem;
    overflow-x: auto;
    scrollbar-width: none;
  }

  .admin-nav::-webkit-scrollbar { display: none; }
  .admin-nav button { display: block; width: auto; padding: .68rem .8rem; white-space: nowrap; }

  .admin-principal { height: auto; min-height: calc(100vh - 4rem); overflow: visible; }
}

@media (max-width: 700px) {
  .admin-cabecalho { display: block; }
  .admin-cabecalho__meta { margin-top: 1rem; }
  .admin-resumo-grid { grid-template-columns: 1fr; }
  .admin-card--acoes,
  .admin-card--voucher { min-height: 0; }
  .admin-voucher-rapido { grid-template-columns: 1fr; }
  .admin-voucher-rapido .botao { width: 100%; }
}

@media (max-width: 500px) {
  .admin-principal { padding-inline: .8rem; }
  .admin-corpo .admin-metricas { grid-template-columns: 1fr 1fr; gap: .5rem; }
  .admin-corpo .metrica { min-height: 7.7rem; padding: .85rem; }
  .metrica__topo { margin-bottom: .95rem; }
  .admin-secao-cabecalho { align-items: center; }
  .admin-secao-cabecalho h2 { font-size: 1.25rem; }
  .admin-voucher-intro { grid-template-columns: 1fr; }
  .admin-corpo .linha-campos { display: grid; }
  .admin-corpo .linha-campos .campo { margin-bottom: .3rem; }
}

@media (prefers-reduced-motion: reduce) {
  .admin-paineis > section { animation: none; }
  .admin-carregando span { animation-duration: 1.6s; }
}

/* ============================================================
   Espaço pessoal — proposta 05.
   Área da cliente com vouchers individuais por sessão.
   ============================================================ */

body.conta-corpo {
  --conta-rosa: #ED8AA5;
  --conta-rosa-forte: #A33E59;
  --conta-rosa-escuro: #7E2941;
  --conta-rosa-claro: #FBE8EE;
  --conta-ink: #281C1F;
  --conta-borda: rgba(126, 41, 65, .13);
  --conta-superficie: rgba(255, 253, 251, .94);
  background:
    radial-gradient(circle at 92% 16%, rgba(237, 138, 165, .12), transparent 27rem),
    #F9F5F1;
  color: var(--conta-ink);
}

.conta-app {
  flex: 1;
  width: 100%;
  max-width: 1280px;
  margin: 0 auto;
  padding: clamp(2rem, 4vw, 3.8rem) clamp(1rem, 3.5vw, 2.5rem) 4rem;
}

.conta-cabecalho {
  display: flex;
  align-items: flex-end;
  justify-content: space-between;
  gap: 2rem;
  margin-bottom: clamp(1.7rem, 3vw, 2.5rem);
}

.conta-cabecalho__rotulo,
.conta-secao-titulo > div > span,
.conta-bloco__topo > div > span {
  display: block;
  margin-bottom: .3rem;
  color: var(--conta-rosa-forte);
  font-size: .64rem;
  font-weight: 500;
  letter-spacing: .17em;
  text-transform: uppercase;
}

.conta-cabecalho h1 {
  font-family: var(--serif);
  font-size: clamp(2.4rem, 4.7vw, 4.2rem);
  font-weight: 340;
  line-height: 1;
  letter-spacing: -.04em;
}

.conta-cabecalho h1 em { color: var(--conta-rosa-forte); font-weight: 340; }
.conta-cabecalho > div > p:last-child { margin-top: .65rem; color: rgba(40, 28, 31, .56); }

.conta-ajuda-topo {
  display: grid;
  gap: .12rem;
  padding: .8rem 1rem;
  border: 1px solid var(--conta-borda);
  border-radius: .65rem;
  background: rgba(255, 255, 255, .63);
  color: rgba(40, 28, 31, .58);
  font-size: .7rem;
}

.conta-ajuda-topo strong { color: var(--conta-rosa-escuro); font-weight: 500; }

.conta-shell {
  display: grid;
  grid-template-columns: 14rem minmax(0, 1fr);
  gap: .9rem;
  align-items: start;
}

.conta-shell[hidden] { display: none; }

/* ---------- menu da cliente ---------- */

.conta-lateral {
  position: sticky;
  top: 6.5rem;
  padding: .85rem;
  border: 1px solid var(--conta-borda);
  border-radius: 1rem;
  background: var(--conta-superficie);
  box-shadow: 0 .8rem 2.4rem rgba(84, 41, 52, .045);
}

.conta-perfil {
  display: flex;
  align-items: center;
  gap: .7rem;
  padding: .55rem .45rem 1rem;
  border-bottom: 1px solid var(--conta-borda);
}

.conta-perfil__inicial {
  display: grid;
  place-items: center;
  flex: 0 0 auto;
  width: 2.75rem;
  height: 2.75rem;
  border-radius: 50%;
  background: var(--conta-rosa-claro);
  color: var(--conta-rosa-forte);
  font-family: var(--serif);
  font-size: .9rem;
  box-shadow: inset 0 0 0 1px rgba(163, 62, 89, .08);
}

.conta-perfil strong { display: block; font-size: .82rem; font-weight: 500; }
.conta-perfil small { display: block; overflow: hidden; max-width: 8.5rem; color: rgba(40, 28, 31, .46); font-size: .63rem; text-overflow: ellipsis; white-space: nowrap; }

.conta-nav { display: grid; gap: .22rem; margin-top: .8rem; }

.conta-nav button {
  /* Uma coluna so. Era grid de duas (indice + rotulo); sem o indice, a
     primeira coluna continuaria reservando 1.8rem para nada e o rotulo
     quebraria em varias linhas dentro do que sobrava. */
  display: block;
  width: 100%;
  padding: .7rem .6rem;
  border: 0;
  border-radius: .55rem;
  background: transparent;
  color: rgba(40, 28, 31, .58);
  font: inherit;
  font-size: .75rem;
  text-align: left;
  cursor: pointer;
  transition: background .2s, color .2s, transform .2s;
}

.conta-nav button:hover { color: var(--conta-rosa-escuro); transform: translateX(2px); }
.conta-nav button[aria-selected="true"] { background: var(--conta-rosa-claro); color: var(--conta-rosa-escuro); }
.conta-nav button span { font-size: .56rem; letter-spacing: .1em; opacity: .62; }

.conta-sair {
  display: flex;
  justify-content: space-between;
  width: 100%;
  margin-top: .8rem;
  padding: .8rem .6rem .35rem;
  border: 0;
  border-top: 1px solid var(--conta-borda);
  background: transparent;
  color: rgba(40, 28, 31, .48);
  font: inherit;
  font-size: .68rem;
  cursor: pointer;
}

.conta-sair:hover { color: var(--conta-rosa-escuro); }

/* ---------- paineis ---------- */

.conta-paineis {
  min-width: 0;
  padding: clamp(1.05rem, 2.3vw, 1.75rem);
  border: 1px solid var(--conta-borda);
  border-radius: 1rem;
  background: var(--conta-superficie);
  box-shadow: 0 .8rem 2.4rem rgba(84, 41, 52, .045);
}

.conta-paineis > section { padding: 0; animation: contaPainelEntrar .42s cubic-bezier(.22, 1, .36, 1); }
.conta-paineis > section[hidden] { display: none; }

@keyframes contaPainelEntrar { from { opacity: 0; transform: translateY(.4rem); } }

.conta-secao-titulo {
  display: flex;
  align-items: flex-end;
  justify-content: space-between;
  gap: 1rem;
  margin-bottom: 1.2rem;
}

.conta-secao-titulo h2 {
  font-family: var(--serif);
  font-size: clamp(1.55rem, 2.5vw, 2.15rem);
  font-weight: 340;
  line-height: 1.1;
}

.conta-secao-titulo > a,
.conta-secao-titulo > p {
  color: rgba(40, 28, 31, .52);
  font-size: .7rem;
}

.conta-secao-titulo > a { color: var(--conta-rosa-escuro); }

.conta-pagamento {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 1rem;
  margin-bottom: .75rem;
  padding: 1rem 1.1rem;
  border: 1px solid rgba(163, 62, 89, .16);
  border-radius: .75rem;
  background: linear-gradient(110deg, var(--conta-rosa-claro), #FFF7F9);
}

.conta-pagamento[hidden] { display: none; }
.conta-pagamento span { display: block; color: var(--conta-rosa-forte); font-size: .59rem; font-weight: 500; letter-spacing: .15em; text-transform: uppercase; }
.conta-pagamento strong { display: block; margin-top: .1rem; font-family: var(--serif); font-size: 1.05rem; font-weight: 420; }
.conta-pagamento p { color: rgba(40, 28, 31, .56); font-size: .7rem; }
.conta-pagamento button { padding: .75rem .9rem; border: 0; border-radius: .5rem; background: var(--conta-rosa-forte); color: #fff; font: inherit; font-size: .69rem; cursor: pointer; white-space: nowrap; }

.conta-resumo-grid {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: .7rem;
}

.conta-resumo-card {
  display: flex;
  flex-direction: column;
  min-height: 11.5rem;
  padding: 1rem;
  border: 1px solid var(--conta-borda);
  border-radius: .8rem;
  background: #FBF8F5;
  color: inherit;
  font: inherit;
  text-align: left;
  cursor: pointer;
  transition: transform .25s, box-shadow .25s;
}

.conta-resumo-card:hover { transform: translateY(-2px); box-shadow: 0 .8rem 1.8rem rgba(84, 41, 52, .07); }
.conta-resumo-card--rosa { background: linear-gradient(145deg, #FCEBF0, #FFF7F9); }
.conta-resumo-card--ajuda { background: var(--conta-rosa-forte); color: #fff; }
.conta-resumo-card__rotulo { color: rgba(40, 28, 31, .52); font-size: .62rem; letter-spacing: .1em; text-transform: uppercase; }
.conta-resumo-card--ajuda .conta-resumo-card__rotulo { color: rgba(255, 255, 255, .68); }
.conta-resumo-card > strong { margin-top: .85rem; font-family: var(--serif); font-size: clamp(2.2rem, 4vw, 3.4rem); font-weight: 340; line-height: .95; }
.conta-resumo-card--ajuda > strong { font-size: 1.65rem; line-height: 1.05; }
.conta-resumo-card > small { display: flex; justify-content: space-between; gap: .5rem; margin-top: auto; color: var(--conta-rosa-escuro); font-size: .67rem; }
.conta-resumo-card--ajuda > small { color: rgba(255, 255, 255, .78); }
.conta-resumo-card i { font-style: normal; }

.conta-bloco {
  margin-top: .75rem;
  padding: 1rem;
  border: 1px solid var(--conta-borda);
  border-radius: .8rem;
  background: #fff;
}

.conta-bloco__topo { display: flex; align-items: flex-start; justify-content: space-between; gap: 1rem; margin-bottom: .8rem; }
.conta-bloco__topo h3 { font-family: var(--serif); font-size: 1.2rem; font-weight: 420; }
.conta-bloco__topo button { border: 0; background: none; color: var(--conta-rosa-escuro); font: inherit; font-size: .67rem; cursor: pointer; }

/* ---------- vouchers e pacotes ---------- */

.conta-vouchers,
.conta-creditos,
.conta-pedidos { display: grid; gap: .75rem; }

.conta-pacote {
  overflow: hidden;
  border: 1px solid var(--conta-borda);
  border-radius: .9rem;
  background: linear-gradient(145deg, #FFF9FB, var(--conta-rosa-claro));
}

.conta-pacote__cabecalho {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 1rem;
  padding: 1.25rem 1.3rem .9rem;
}

.conta-pacote__rotulo,
.conta-presente__rotulo,
.conta-credito > span {
  display: block;
  color: var(--conta-rosa-forte);
  font-size: .59rem;
  font-weight: 500;
  letter-spacing: .14em;
  text-transform: uppercase;
}

.conta-pacote h3,
.conta-presente h3,
.conta-credito h3 { margin-top: .25rem; font-family: var(--serif); font-size: 1.35rem; font-weight: 420; }
.conta-pacote__cabecalho p { margin-top: .25rem; color: rgba(40, 28, 31, .5); font-size: .68rem; }

.conta-pacote__saldo { display: flex; align-items: center; gap: .5rem; color: var(--conta-rosa-escuro); }
.conta-pacote__saldo strong { font-family: var(--serif); font-size: 2.7rem; font-weight: 340; line-height: 1; }
.conta-pacote__saldo span { font-size: .62rem; line-height: 1.3; }

.conta-pacote__progresso { height: 4px; margin: 0 1.3rem; overflow: hidden; border-radius: 99px; background: rgba(163, 62, 89, .12); }
.conta-pacote__progresso i { display: block; height: 100%; border-radius: inherit; background: var(--conta-rosa-forte); }
.conta-pacote__legenda { display: flex; justify-content: space-between; gap: 1rem; padding: .55rem 1.3rem 1rem; color: rgba(40, 28, 31, .48); font-size: .61rem; }

.conta-pacote__detalhes { border-top: 1px solid var(--conta-borda); background: rgba(255, 255, 255, .68); }
.conta-pacote__detalhes summary { display: flex; justify-content: space-between; padding: .85rem 1.3rem; color: var(--conta-rosa-escuro); font-size: .72rem; cursor: pointer; list-style: none; }
.conta-pacote__detalhes summary::-webkit-details-marker { display: none; }
.conta-pacote__detalhes[open] summary span { transform: rotate(45deg); }
.conta-pacote__detalhes ul { padding: 0 .85rem .85rem; }

.conta-voucher-linha {
  display: grid;
  grid-template-columns: 2.2rem minmax(8rem, 1fr) auto auto;
  align-items: center;
  gap: .7rem;
  padding: .7rem .45rem;
  border-top: 1px solid rgba(126, 41, 65, .08);
}

.conta-voucher-linha__numero { display: grid; place-items: center; width: 2rem; height: 2rem; border-radius: .5rem; background: var(--conta-rosa-claro); color: var(--conta-rosa-forte); font-family: var(--serif); font-size: .72rem; }
.conta-voucher-linha strong { display: block; font-size: .76rem; letter-spacing: .08em; }
.conta-voucher-linha small { display: block; color: rgba(40, 28, 31, .48); font-size: .6rem; }
.conta-voucher-status { color: #47765B; font-size: .62rem; }
.conta-voucher-linha button,
.conta-presente button { padding: .5rem .65rem; border: 1px solid var(--conta-borda); border-radius: .45rem; background: #fff; color: var(--conta-rosa-escuro); font: inherit; font-size: .61rem; cursor: pointer; }
.conta-voucher-linha--inativo { opacity: .55; }
.conta-voucher-linha--inativo .conta-voucher-status { color: rgba(40, 28, 31, .55); }

.conta-presente,
.conta-credito {
  padding: 1.2rem;
  border: 1px solid var(--conta-borda);
  border-radius: .85rem;
  background: #fff;
}

.conta-presente > strong,
.conta-credito > strong { display: block; margin: .8rem 0 .2rem; color: var(--conta-rosa-escuro); font-family: var(--serif); font-size: 1.65rem; font-weight: 340; letter-spacing: .05em; }
.conta-presente p,
.conta-credito p { color: rgba(40, 28, 31, .52); font-size: .68rem; }
.conta-presente button { margin-top: .8rem; }
.conta-presente--inativo,
.conta-credito--inativo { opacity: .6; }
.conta-credito .barra-credito { height: 4px; margin: .8rem 0 .55rem; border-radius: 99px; background: var(--conta-rosa-claro); }
.conta-credito .barra-credito i { border-radius: inherit; background: var(--conta-rosa-forte); }

/* ---------- pedidos, dados e suporte ---------- */

.conta-pedido {
  position: relative;
  padding: 1rem;
  border: 1px solid var(--conta-borda);
  border-radius: .75rem;
  background: #fff;
}

.conta-pedido__topo { display: flex; align-items: center; justify-content: space-between; gap: 1rem; }
.conta-pedido__topo > div > span { display: block; color: rgba(40, 28, 31, .43); font-size: .56rem; letter-spacing: .12em; text-transform: uppercase; }
.conta-pedido__topo strong { font-family: var(--serif); font-size: 1.05rem; font-weight: 420; }
.conta-pedido > p { margin-top: .7rem; font-size: .77rem; }
.conta-pedido > small { display: block; margin-top: .16rem; color: rgba(40, 28, 31, .47); font-size: .64rem; }
.conta-pedido__pagar { margin-top: .8rem; padding: .58rem .75rem; border: 0; border-radius: .45rem; background: var(--conta-rosa-forte); color: #fff; font: inherit; font-size: .65rem; cursor: pointer; }
.conta-pedido--compacto { border: 0; padding: .2rem 0 0; }

.conta-dados {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: .65rem;
}

.conta-dados article,
.conta-dados__ajuda { padding: 1rem; border: 1px solid var(--conta-borda); border-radius: .7rem; background: #fff; }
.conta-dados article span { display: block; color: rgba(40, 28, 31, .45); font-size: .61rem; letter-spacing: .11em; text-transform: uppercase; }
.conta-dados article strong { display: block; margin-top: .35rem; font-size: .82rem; font-weight: 400; word-break: break-word; }
.conta-dados__ajuda { display: flex; align-items: center; justify-content: space-between; gap: 1rem; grid-column: 1 / -1; background: var(--conta-rosa-claro); font-size: .72rem; }
.conta-dados__ajuda a { color: var(--conta-rosa-escuro); font-weight: 500; }

.conta-suporte { max-width: 38rem; padding: clamp(1.4rem, 4vw, 2.5rem); border: 1px solid var(--conta-borda); border-radius: 1rem; background: linear-gradient(140deg, var(--conta-rosa-claro), #FFF9FB); }
.conta-suporte h3 { font-family: var(--serif); font-size: 1.7rem; font-weight: 340; }
.conta-suporte p { max-width: 48ch; margin: .5rem 0 1.2rem; color: rgba(40, 28, 31, .58); font-size: .82rem; }

.conta-vazio { padding: 2rem 1rem; border: 1px dashed var(--conta-borda); border-radius: .7rem; text-align: center; color: rgba(40, 28, 31, .52); }
.conta-vazio p { margin-bottom: .5rem; }
.conta-vazio a,
.conta-vazio button { border: 0; background: none; color: var(--conta-rosa-escuro); font: inherit; font-size: .72rem; cursor: pointer; }

.conta-aviso { border-radius: .65rem; }
.conta-carregando { display: flex; align-items: center; justify-content: center; gap: .7rem; min-height: 38vh; }
.conta-carregando[hidden] { display: none; }
.conta-carregando span { width: 1rem; height: 1rem; border: 2px solid rgba(237, 138, 165, .28); border-top-color: var(--conta-rosa-forte); border-radius: 50%; animation: contaGirar .75s linear infinite; }
@keyframes contaGirar { to { transform: rotate(360deg); } }

.conta-rodape { background: rgba(249, 245, 241, .8); }
.conta-corpo :focus-visible { outline: 2px solid var(--conta-rosa-forte); outline-offset: 3px; }

@media (max-width: 880px) {
  .conta-shell { grid-template-columns: 1fr; }
  .conta-lateral { position: static; padding: .7rem; }
  .conta-perfil { padding-bottom: .7rem; }
  .conta-nav { display: flex; overflow-x: auto; scrollbar-width: none; }
  .conta-nav::-webkit-scrollbar { display: none; }
  .conta-nav button { display: block; width: auto; white-space: nowrap; padding-inline: .8rem; }
  .conta-sair { display: none; }
}

@media (max-width: 680px) {
  .conta-cabecalho { display: block; }
  .conta-ajuda-topo { margin-top: 1rem; }
  .conta-secao-titulo { display: block; }
  .conta-secao-titulo > a,
  .conta-secao-titulo > p { display: block; margin-top: .5rem; }
  .conta-pagamento { display: block; }
  .conta-pagamento button { width: 100%; margin-top: .8rem; }
  .conta-resumo-grid { grid-template-columns: 1fr 1fr; }
  .conta-resumo-card--ajuda { grid-column: 1 / -1; min-height: 9rem; }
  .conta-voucher-linha { grid-template-columns: 2rem 1fr auto; }
  .conta-voucher-linha button { grid-column: 2 / -1; justify-self: start; }
  .conta-dados { grid-template-columns: 1fr; }
  .conta-dados__ajuda { grid-column: auto; display: block; }
  .conta-dados__ajuda a { display: block; margin-top: .45rem; }
}

@media (max-width: 440px) {
  .conta-app { padding-inline: .75rem; }
  .conta-paineis { padding: .85rem; }
  .conta-resumo-grid { grid-template-columns: 1fr; }
  .conta-resumo-card--ajuda { grid-column: auto; }
  .conta-pacote__cabecalho { display: block; }
  .conta-pacote__saldo { margin-top: .9rem; }
  .conta-voucher-linha { grid-template-columns: 2rem 1fr; }
  .conta-voucher-status { grid-column: 2; }
  .conta-voucher-linha button { grid-column: 2; }
}

@media (prefers-reduced-motion: reduce) {
  .conta-paineis > section { animation: none; }
  .conta-carregando span { animation-duration: 1.5s; }
}

/* ---------- retomar o pagamento de um pedido aguardando ---------- */

.pedido__acoes {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: .75rem 1rem;
  margin-top: 1rem;
}

/* O .botao do site e feito para chamada principal de secao, com respiro
   de 1.9rem nas laterais. Dentro da lista de pedidos ele competiria com
   o proprio pedido, entao aqui vai uma versao menor. */
.botao--curto {
  padding: .6rem 1.15rem;
  font-size: .78rem;
}

.botao[disabled] {
  opacity: .5;
  cursor: default;
  pointer-events: none;
}

/* Enquanto abre a cobranca o rotulo vira "Abrindo…", e a seta do
   .botao::after ficaria sobrando no meio da frase. */
.botao[disabled]::after { content: ""; }

.pedido__acoes .cartao__nota { flex: 1 1 14rem; }

/* ============================================================
   Cabecalho da loja no mesmo rosa do resto.
   O .loja-topo nasceu com o vinho do site (#5E1F28) e ficou sendo a
   unica peca dessas telas fora da paleta: a conta e o painel ja usam o
   rosa do logo, e o cabecalho continuava vermelho escuro em cima deles.
   Ele so existe em /loja/, /carrinho/, /conta/, /entrar/ e /admin/ —
   a pagina inicial tem cabecalho proprio e nao e tocada aqui.
   ============================================================ */

.loja-corpo {
  --rosa-logo: #ED8AA5;        /* tirado do proprio logo.svg */
  --rosa-forte: #A33E59;       /* mesma matiz, escura o bastante para ler */
  --rosa-escuro: #7E2941;

  /* O --vinho e o acento de tudo que veio do style.css: botao, preco,
     link-seta, etiqueta. Trocado aqui, a loja, o carrinho, a conta, o
     login e o painel passam a falar uma cor so, junto com o cabecalho.
     A pagina inicial nao usa .loja-corpo e continua no vinho original.
     #A33E59 sobre o creme da 5,6:1, acima do minimo de 4,5:1 para
     texto; o #ED8AA5 puro daria 2,2:1 e nao serve para escrever. */
  --vinho: #A33E59;
  --vinho-escuro: #7E2941;
}

.loja-topo {
  background: rgba(252, 248, 247, .94);
  border-bottom-color: rgba(126, 41, 65, .13);
}

.loja-topo__links a:hover,
.loja-topo__links a[aria-current="page"] { border-color: var(--rosa-forte); }
.loja-topo__links a[aria-current="page"] { color: var(--rosa-forte); }

/* Preto sobre o rosa do logo da 8,8:1. O creme sobre o mesmo rosa daria
   1,5:1 e o numero do carrinho sumiria. */
.loja-topo__contador {
  background: var(--rosa-logo);
  color: #000;
}

/* ---------- dados pessoais editaveis ---------- */

.conta-dados__form {
  display: grid;
  gap: 1rem;
  max-width: 30rem;
}

.conta-dados__form .campo { margin-bottom: 0; }

/* O e-mail aparece para conferencia, mas nao e editavel aqui: trocar a
   chave de entrada da conta sem confirmar o endereco novo trancaria a
   pessoa do lado de fora. O visual precisa dizer isso antes do clique. */
.campo--travado input {
  background: rgba(126, 41, 65, .05);
  color: rgba(40, 28, 31, .55);
  cursor: default;
}

.conta-dados__acoes {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: .8rem 1rem;
  margin-top: .3rem;
}

.conta-dados__estado {
  font-size: .8rem;
  color: rgba(40, 28, 31, .55);
}

.conta-dados__estado--ok { color: var(--conta-rosa-forte); }

.conta-dados__ajuda {
  margin-top: .2rem;
  font-size: .8rem;
  color: rgba(40, 28, 31, .55);
}

.conta-dados__ajuda a {
  color: var(--conta-rosa-forte);
  border-bottom: 1px solid currentColor;
}