/* =============================================================================
   By AteliAnas, folha de estilo única
   -----------------------------------------------------------------------------
   Conceito: "o fio que costura a página". Um fio de lã atravessa o site em três
   estados, desenhado (hero), costurando (divisor entre seções) e virado ponto
   (bordas tracejadas nos hovers). Esse é o momento de ousadia; o resto é contido.

   Escrita mobile-first: o layout base é para ~380px (a maioria do tráfego vem
   do Instagram, no celular) e cresce a partir daí com min-width.

   Sumário
     01. Tokens (cores, tipografia, tempos de animação)
     02. Reset e base
     03. Utilitários e acessibilidade
     04. Botões
     05. Cabeçalho
     06. Hero
     07. O fio (hero) e a costura (divisor entre seções)
     08. Categorias
     09. Vitrine (peças)
     10. Sobre nós
     11. Encomendas
     12. Rodapé
     13. WhatsApp flutuante
     14. Coreografia do hero (entrada na carga da página)
     15. Reveals por scroll (classe .visivel vinda do IntersectionObserver)
     16. Movimento reduzido e impressão
     17. Páginas internas (listagem por seção e página da peça). Etapa 2
     18. Blocos por seção na vitrine da home. Etapa 2.1

   ⚙ PARA CALIBRAR AS ANIMAÇÕES: mexa só nas variáveis --anim-* do bloco 01.
   ========================================================================== */

/* -----------------------------------------------------------------------------
   01. TOKENS
-------------------------------------------------------------------------- */
:root {
  /* Paleta oficial: as duas cores que a logo usa (public/img/logo/).
     O rosa é o FUNDO da marca, e por isso todo fundo de marca do site usa
     exatamente este valor: assim a logo (que é um quadrado rosa com as letras
     vermelhas) pousa sobre ele sem emenda nenhuma, sem moldura, sem recorte. */
  --marca-fundo: #ffaef0;      /* o rosa do quadrado da logo */
  --marca-tinta: #fd322e;      /* o vermelho das letras: vive DENTRO da logo */
  --rosa-forte: #f45c7f;
  --rosa-claro: #f8a8d8;
  --branco: #ffffff;
  --vinho: #7c2d3e;

  /* Sinal, não marca. O vermelho que avisa (prazo acabando, divergência de
     valor) continua existindo, escuro e sozinho, justamente para não se
     confundir com a marca agora que a marca é rosa. */
  --alerta: #b3261e;

  /* Derivados de apoio */
  --vinho-suave: #9c5266;      /* texto secundário sobre branco (contraste 5.5:1) */
  --fundo: #fffbfa;            /* quase branco, levemente quente */
  --fundo-morno: #fdf4f1;      /* seções alternadas */
  --papel: #fff6f2;            /* etiqueta de preço */
  --borda: rgba(124, 45, 62, 0.12);

  /* Sombras coloridas (nunca cinza): uma camada de contato e uma de ar */
  --sombra-suave: 0 1px 2px rgba(124, 45, 62, 0.06), 0 6px 16px rgba(124, 45, 62, 0.07);
  --sombra-card: 0 2px 6px rgba(124, 45, 62, 0.08), 0 18px 38px rgba(196, 74, 110, 0.18);

  /* O degradê da marca: sai do rosa da logo e clareia. Ele COMEÇA no valor
     exato de --marca-fundo, então o topo de qualquer seção com degradê é a
     mesma cor do fundo da logo. */
  --degrade: linear-gradient(
    168deg,
    var(--marca-fundo) 0%,
    #ffbdf3 48%,
    #ffd4f7 100%
  );
  /* O véu era escuro porque o texto por cima era branco. Sobre o rosa da marca
     o texto é vinho (5,4:1), então o véu virou só um clareado no pé da seção,
     para a onda branca não entrar de supetão. */
  --veu: linear-gradient(
    180deg,
    rgba(255, 255, 255, 0) 0%,
    rgba(255, 255, 255, 0) 58%,
    rgba(255, 255, 255, 0.14) 84%,
    rgba(255, 255, 255, 0.34) 100%
  );

  /* Textura de pontos de crochê: SVG embutido, ~7% de opacidade.
     Tira a cara de "fundo chapado" sem pesar um byte de imagem. */
  --textura: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='26' height='24' viewBox='0 0 26 24'%3E%3Cg fill='none' stroke='%237C2D3E' stroke-opacity='0.045' stroke-width='1'%3E%3Cellipse cx='6.5' cy='6' rx='6' ry='3.6'/%3E%3Cellipse cx='19.5' cy='6' rx='6' ry='3.6'/%3E%3Cellipse cx='0' cy='18' rx='6' ry='3.6'/%3E%3Cellipse cx='13' cy='18' rx='6' ry='3.6'/%3E%3Cellipse cx='26' cy='18' rx='6' ry='3.6'/%3E%3C/g%3E%3C/svg%3E");

  /* Tipografia */
  --serif: "Playfair Display", Georgia, "Times New Roman", serif;
  --script: "Parisienne", "Brush Script MT", cursive;
  --sans: "Jost", "Segoe UI", system-ui, -apple-system, sans-serif;

  /* Formas, cantos suaves e levemente irregulares, como etiquetas costuradas */
  --r-pequeno: 12px;
  --r-medio: 18px;
  --r-pilula: 999px;
  --r-etiqueta: 30px 22px 28px 20px;

  --largura: 1120px;
  --respiro: 20px;

  /* ⚙ TEMPOS E CURVAS, os pontos de calibragem do movimento */
  --anim-rapida: 0.2s;    /* hovers e micro-interações */
  --anim-media: 0.55s;    /* entradas de bloco */
  --anim-lenta: 0.85s;    /* revelação das linhas do título */
  --anim-fio: 1.1s;       /* o fio do hero se desenhando */
  --anim-costura: 1.9s;   /* o fio divisor entre seções */
  --anim-cascata: 80ms;   /* intervalo entre cards da vitrine */
  --anim-degrade: 24s;    /* respiração do degradê do hero */
  --anim-novelo: 5.5s;    /* balanço do novelo pendurado */
  --anim-aceno: 8s;       /* intervalo do "oi" do botão de WhatsApp */

  --macio: cubic-bezier(0.22, 0.68, 0.35, 1);
  --pop: cubic-bezier(0.34, 1.4, 0.5, 1);
}

/* -----------------------------------------------------------------------------
   02. RESET E BASE
-------------------------------------------------------------------------- */
*,
*::before,
*::after { box-sizing: border-box; }

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

body {
  margin: 0;
  background-color: var(--fundo);
  background-image: var(--textura);
  color: var(--vinho);
  font-family: var(--sans);
  font-size: 16px;
  font-weight: 300;
  line-height: 1.65;
  overflow-x: hidden;         /* as ondas e o fio sangram de propósito */
  -webkit-font-smoothing: antialiased;
}

img { max-width: 100%; display: block; height: auto; }

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

ul { list-style: none; margin: 0; padding: 0; }

h1, h2, h3 {
  font-family: var(--serif);
  font-weight: 500;
  line-height: 1.18;
  margin: 0;
  letter-spacing: -0.01em;
}

p { margin: 0 0 1em; }

/* -----------------------------------------------------------------------------
   03. UTILITÁRIOS E ACESSIBILIDADE
-------------------------------------------------------------------------- */
.container {
  width: 100%;
  max-width: var(--largura);
  margin-inline: auto;
  padding-inline: var(--respiro);
}

/* Palavra-assinatura em manuscrita, usada com muita parcimônia:
   uma vez no hero, uma no "sobre" e uma nas encomendas. */
.assinatura {
  font-family: var(--script);
  font-weight: 400;
  font-size: 1.28em;
  line-height: 0.9;
  letter-spacing: 0.01em;
}
.assinatura--vinho { color: var(--vinho); }

.seccao__titulo {
  font-size: clamp(1.75rem, 6.2vw, 2.5rem);
  color: var(--vinho);
}

.seccao__linha-fina {
  max-width: 46ch;
  margin: 0.75rem 0 2rem;
  color: var(--vinho-suave);
  font-size: 1rem;
}

/* Pular navegação: aparece só no foco do teclado */
.pular-para-conteudo {
  position: absolute;
  left: -9999px;
  top: 0;
  z-index: 200;
  background: var(--vinho);
  color: var(--branco);
  padding: 12px 18px;
  border-radius: 0 0 var(--r-pequeno) 0;
}
.pular-para-conteudo:focus { left: 0; }

/* Foco sempre visível e com contraste em qualquer fundo */
:where(a, button, [tabindex]):focus-visible {
  outline: 3px solid var(--vinho);
  outline-offset: 3px;
  border-radius: 4px;
}
.hero :where(a):focus-visible,
.encomendas :where(a):focus-visible,
.zap-flutuante:focus-visible {
  outline-color: var(--branco);
}

/* Âncoras não podem ficar escondidas atrás do cabeçalho fixo */
[id] { scroll-margin-top: 84px; }

/* -----------------------------------------------------------------------------
   04. BOTÕES
-------------------------------------------------------------------------- */
.botao {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 0.4em;
  min-height: 48px;              /* alvo de toque confortável */
  padding: 0.85em 1.5em;
  border: 2px solid transparent;
  border-radius: var(--r-pilula);
  font-family: var(--sans);
  font-size: 1rem;
  font-weight: 500;
  letter-spacing: 0.01em;
  text-align: center;
  cursor: pointer;
  transition: transform var(--anim-rapida) var(--macio),
    background-color var(--anim-rapida) ease,
    color var(--anim-rapida) ease,
    box-shadow var(--anim-rapida) ease;
}
.botao:hover { transform: translateY(-2px); }
.botao:active { transform: translateY(0); }

.botao--claro {
  background: var(--branco);
  color: var(--vinho);
  box-shadow: 0 6px 18px rgba(90, 12, 28, 0.2);
}
.botao--claro:hover {
  background: #fff4f7;
  box-shadow: 0 10px 26px rgba(90, 12, 28, 0.26);
}

/* Sobre o rosa da marca o vinho dá 5,4:1 sozinho, sem precisar de véu escuro
   por baixo. No hover o botão preenche e inverte. */
.botao--contorno {
  background: transparent;
  color: var(--vinho);
  border-color: var(--vinho);
}
.botao--contorno:hover {
  background: var(--vinho);
  color: var(--branco);
  border-color: var(--vinho);
}

/* CTA das peças: vinho sobre o card branco (contraste 9:1) */
.botao--rosa {
  background: var(--vinho);
  color: var(--branco);
  width: 100%;
  padding-inline: 0.9em;
  font-size: 0.9rem;
  white-space: nowrap;
}
.botao--rosa:hover { background: #66222f; }

.botao--grande {
  font-size: 1.05rem;
  padding: 1em 2em;
}

/* Micro-interação: o coração bate enquanto o dedo/cursor está no botão */
.coracao {
  display: inline-block;
  transform-origin: center;
}
.botao--rosa:hover .coracao,
.botao--rosa:focus-visible .coracao {
  animation: pulsar 0.9s ease-in-out infinite;
}

/* -----------------------------------------------------------------------------
   05. CABEÇALHO (fixo)
-------------------------------------------------------------------------- */
/* A barra continua o creme translúcido de sempre. Ela NÃO virou rosa: o rosa
   da marca é fundo de bloco (hero, encomendas), e uma barra rosa colada num
   hero rosa some, além de deixar a página sem nenhum respiro claro no topo.
   A logo aqui é PNG transparente, então não precisa de fundo combinando. */
.cabecalho {
  position: fixed;
  inset: 0 0 auto 0;
  z-index: 100;
  background: rgba(255, 251, 250, 0.92);
  backdrop-filter: blur(10px);
  border-bottom: 1px solid var(--borda);
  transition: box-shadow var(--anim-rapida) ease, background-color var(--anim-rapida) ease;
}

.cabecalho--rolado {
  box-shadow: 0 4px 18px rgba(124, 45, 62, 0.08);
  background: rgba(255, 251, 250, 0.96);
}

.cabecalho__interno {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  min-height: 62px;
}

/* Antes aqui ficava "By" + "AteliAnas" escrito em duas fontes. Agora é o
   letreiro da própria logo, em PNG transparente: o vermelho da marca em cima
   do creme da barra, que é onde ele tem contraste de verdade. */
.marca {
  display: inline-flex;
  align-items: center;
}
.marca__logo {
  display: block;
  width: auto;
  height: 46px;
}

.navegacao__lista {
  display: flex;
  gap: clamp(12px, 4vw, 30px);
  font-size: 0.9rem;
  letter-spacing: 0.02em;
}
.navegacao__lista a {
  color: var(--vinho-suave);
  padding: 6px 0;
  border-bottom: 1.5px solid transparent;
  transition: color var(--anim-rapida) ease, border-color var(--anim-rapida) ease;
}
.navegacao__lista a:hover {
  color: var(--vinho);
  border-bottom-color: var(--rosa-forte);
}

.cabecalho__insta {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 40px;
  height: 40px;
  border-radius: var(--r-pilula);
  color: var(--vinho);
  transition: background-color var(--anim-rapida) ease,
    color var(--anim-rapida) ease, transform var(--anim-rapida) var(--macio);
}
.cabecalho__insta:hover {
  background: var(--fundo-morno);
  color: var(--rosa-forte);
  transform: rotate(-6deg);
}

/* Em telas bem estreitas o nome da marca já ocupa muito espaço:
   a navegação vai para uma segunda linha, centralizada. */
@media (max-width: 479px) {
  .cabecalho__interno { flex-wrap: wrap; padding-block: 8px; row-gap: 2px; }
  .marca { order: 1; }
  .marca__logo { height: 44px; }
  /* O `order` tem de cair em .cabecalho__acoes, que é o filho flex desta
     linha. Enquanto ele estava em .cabecalho__insta (um neto) não valia nada:
     as ações ficavam com o order 0 padrão e a logo ia parar à DIREITA delas. */
  .cabecalho__acoes { order: 2; }
  .navegacao { order: 3; width: 100%; }
  .navegacao__lista { justify-content: center; gap: 22px; font-size: 0.85rem; }
}

/* -----------------------------------------------------------------------------
   06. HERO, o degradê em cheio, respirando devagar, com véu para o contraste.
-------------------------------------------------------------------------- */
.hero {
  position: relative;
  isolation: isolate;
  background-image: var(--degrade);
  background-size: 100% 220%;
  background-position: 50% 42%;   /* estado estático = meio da respiração */
  color: var(--vinho);
  padding: 118px 0 clamp(58px, 9vw, 104px);
  text-align: center;
  overflow: hidden;
  animation: respirar var(--anim-degrade) ease-in-out infinite alternate;
}
.hero::before {
  content: "";
  position: absolute;
  inset: 0;
  background: var(--veu);
  z-index: -1;
}

.hero__interno {
  max-width: 760px;
  padding-bottom: 26px;
}

.hero__sobrelinha {
  margin: 0 0 18px;
  font-size: 0.78rem;
  font-weight: 400;
  letter-spacing: 0.22em;
  text-transform: uppercase;
  color: var(--vinho-suave);
}

.hero__titulo {
  font-size: clamp(2.3rem, 11vw, 4.4rem);
  font-weight: 500;
  line-height: 1.06;
  margin-bottom: 0.5em;
  text-wrap: balance;
}

/* Cada linha é revelada de baixo para cima por clip-path. O padding evita
   que o clipe final corte descendentes (ç, q, p). */
.hero__linha {
  display: block;
  padding-block: 0.06em;
}

/* A palavra manuscrita não fica numa linha obediente: ela deita sobre o
   título, como assinatura bordada por cima do tecido. */
.hero__assinatura {
  display: block;
  position: relative;
  z-index: 1;
  width: fit-content;
  margin: -0.1em auto -0.26em;
  font-size: 1.62em;
  line-height: 1;
  transform: rotate(-3deg);
  text-shadow: 0 3px 14px rgba(255, 255, 255, 0.55);
}
.hero__linha--baixo { margin-top: 0.06em; }

.hero__texto {
  max-width: 44ch;
  margin: 0 auto 1.2rem;
  font-size: 1.02rem;
  color: var(--vinho);
}

.hero__acoes {
  display: flex;
  flex-direction: column;
  gap: 12px;
}

/* Selos: pastilhas brancas soltas sobre o rosa da marca (texto vinho, 9:1) */
.selos {
  position: relative;
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: 8px 10px;
  padding: 26px var(--respiro) 0;
}
.selos li {
  background: var(--branco);
  color: var(--vinho);
  border-radius: var(--r-pilula);
  padding: 7px 16px;
  font-size: 0.82rem;
  letter-spacing: 0.03em;
  box-shadow: 0 4px 14px rgba(90, 12, 28, 0.16);
}

/* Ondas: as seções de degradê entram e saem por curvas, não por linha reta */
.onda {
  position: absolute;
  left: 0;
  width: 100%;
  height: clamp(38px, 5.5vw, 78px);
  display: block;
  pointer-events: none;
}
.onda--hero { bottom: -1px; }
.onda--hero path { fill: var(--fundo); }
.onda--topo { top: -1px; }
.onda--topo path { fill: var(--fundo-morno); }
.onda--base { bottom: -1px; }
.onda--base path { fill: var(--branco); }

@media (min-width: 560px) {
  .hero { padding-top: 152px; }
  .hero__texto { font-size: 1.12rem; }
  .hero__acoes { flex-direction: row; justify-content: center; }
  .hero__acoes .botao { min-width: 220px; }
}

/* -----------------------------------------------------------------------------
   07. O FIO
   No hero ele se desenha na carga da página; entre as seções ele reaparece
   costurando, com um novelo pendurado que balança devagar.
-------------------------------------------------------------------------- */
.fio {
  display: block;
  width: min(520px, 86%);
  height: auto;
  margin: 0 auto 6px;
  overflow: visible;
}
.fio__traco {
  fill: none;
  stroke: rgba(124, 45, 62, 0.72);
  stroke-width: 2.4;
  stroke-linecap: round;
  stroke-dasharray: 1;            /* pathLength="1" no HTML normaliza o traço */
  stroke-dashoffset: 0;           /* estado final: fio inteiro desenhado */
}
.fio__coracao {
  fill: var(--vinho);
  transform-box: fill-box;
  transform-origin: center;
}

.costura {
  display: flex;
  justify-content: center;
  overflow: hidden;
  margin: 4px 0 -14px;
}
.costura__svg {
  flex: 0 0 auto;
  width: max(100%, 900px);   /* no celular sangra para os lados e mantém escala */
  height: auto;
}
.costura__fio {
  fill: none;
  stroke: var(--rosa-forte);
  stroke-opacity: 0.55;
  stroke-width: 2;
  stroke-linecap: round;
  vector-effect: non-scaling-stroke;
  stroke-dasharray: 1;
  stroke-dashoffset: 0;
}
.novelo {
  transform-box: fill-box;
  transform-origin: 50% 0;
}
.novelo__linha {
  stroke: var(--rosa-forte);
  stroke-opacity: 0.55;
  stroke-width: 2;
  vector-effect: non-scaling-stroke;
}
.novelo__corpo circle {
  fill: var(--rosa-claro);
  stroke: var(--rosa-forte);
  stroke-opacity: 0.6;
  stroke-width: 1.4;
  vector-effect: non-scaling-stroke;
}
.novelo__ponto {
  fill: none;
  stroke: var(--vinho);
  stroke-opacity: 0.35;
  stroke-width: 1.2;
  stroke-linecap: round;
  vector-effect: non-scaling-stroke;
}

/* -----------------------------------------------------------------------------
   08. CATEGORIAS
-------------------------------------------------------------------------- */
.categorias { padding: 54px 0 10px; }

.categorias__grade {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 12px;
}

.categoria {
  display: flex;
  flex-direction: column;
  gap: 2px;
  height: 100%;
  padding: 18px 16px 20px;
  background: var(--branco);
  border: 1px solid var(--borda);
  border-radius: var(--r-etiqueta);
  box-shadow: var(--sombra-suave);
  transition: transform var(--anim-rapida) var(--macio),
    box-shadow var(--anim-rapida) ease, border-color var(--anim-rapida) ease;
}
/* pegar uma peça da mesa: levanta e gira um tiquinho */
.categoria:hover {
  transform: translateY(-5px) rotate(-1.5deg);
  box-shadow: var(--sombra-card);
  border-color: rgba(244, 92, 127, 0.45);
}
.categorias__grade li:nth-child(even) .categoria:hover { transform: translateY(-5px) rotate(1.5deg); }

.categoria__emoji {
  font-size: 1.5rem;
  line-height: 1.4;
}

.categoria__nome {
  font-family: var(--serif);
  font-size: 1.22rem;
  color: var(--vinho);
}
.categoria__desc {
  font-size: 0.85rem;
  color: var(--vinho-suave);
  line-height: 1.45;
}

/* Card "Promoções": oculto por flag no JSON. Quando ligado, ganha o degradê
   da marca. Sem véu: o texto é vinho sobre o rosa, que já dá 5,4:1. */
.categoria--destaque {
  background: var(--degrade);
  border-color: transparent;
}
.categoria--destaque .categoria__nome { color: var(--vinho); }
.categoria--destaque .categoria__desc { color: var(--vinho); }

@media (min-width: 700px) {
  .categorias { padding-top: 72px; }
  .categorias__grade { grid-template-columns: repeat(4, 1fr); gap: 18px; }
  .categorias__grade li:nth-child(5) { grid-column: span 4; }
}
@media (min-width: 980px) {
  .categorias__grade:has(li:nth-child(5)) { grid-template-columns: repeat(5, 1fr); }
  .categorias__grade li:nth-child(5) { grid-column: auto; }
}

/* -----------------------------------------------------------------------------
   09. VITRINE
   <li> = entrada em cascata · <article class="peca"> = inclinação e hover
-------------------------------------------------------------------------- */
/* A vitrine virou a moldura dos blocos de seção (bloco 18): o respiro de
   baixo agora é de cada bloco, e não da vitrine inteira. */
.vitrine { padding: 46px 0 40px; }

.vitrine__grade {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 16px;
}

.peca {
  position: relative;
  display: flex;
  flex-direction: column;
  height: 100%;
  background: var(--branco);
  border: 1px solid var(--borda);
  border-radius: var(--r-etiqueta);
  overflow: hidden;
  box-shadow: var(--sombra-suave);
  transition: transform var(--anim-media) var(--macio),
    box-shadow var(--anim-media) ease;
}

/* Peças postas à mão numa mesa: cada uma cai com uma inclinação diferente,
   e todas se alinham quando a cliente passa o dedo/cursor. */
.vitrine__grade li:nth-child(odd) .peca { transform: rotate(-0.6deg); }
.vitrine__grade li:nth-child(even) .peca { transform: rotate(0.7deg); }
.vitrine__grade li:nth-child(3n) .peca { border-radius: 22px 30px 20px 28px; }
.vitrine__grade li:nth-child(4n) .peca { border-radius: 28px 20px 30px 22px; }

.peca:hover,
.peca:focus-within {
  transform: rotate(0deg) translateY(-6px);
  box-shadow: var(--sombra-card);
}

.peca__foto {
  display: block;              /* virou <a> na Etapa 2: leva para /peca/<slug> */
  position: relative;
  overflow: hidden;
  background: var(--fundo-morno);
}

/* Ponto de costura: a moldura tracejada acende no hover. Fica dentro da foto,
   e não em volta do card inteiro: em cima do corpo branco o tracejado branco
   sumia no meio do caminho e parecia defeito. */
.peca__foto::after {
  content: "";
  position: absolute;
  inset: 9px;
  border: 1px dashed rgba(255, 255, 255, 0.75);
  border-radius: 14px;
  opacity: 0;
  pointer-events: none;
  transition: opacity var(--anim-media) ease;
}
.peca:hover .peca__foto::after,
.peca:focus-within .peca__foto::after { opacity: 1; }
.peca__foto img {
  width: 100%;
  aspect-ratio: 4 / 5;
  object-fit: cover;
  transition: transform 0.7s var(--macio);
}
.peca:hover .peca__foto img,
.peca:focus-within .peca__foto img { transform: scale(1.05); }

.peca__corpo {
  display: flex;
  flex-direction: column;
  flex: 1;
  padding: 14px 14px 16px;
}

.peca__nome {
  font-size: 1.18rem;
  color: var(--vinho);
}

.peca__cor {
  margin: 2px 0 12px;
  font-size: 0.78rem;
  letter-spacing: 0.09em;
  text-transform: uppercase;
  color: var(--vinho-suave);
}

.peca__precos {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 5px;
  margin: auto 0 14px;
}

/* Etiqueta de papel: o preço do pix pendurado na peça, como no ateliê */
.etiqueta {
  position: relative;
  display: inline-flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 0;
  padding: 5px 12px 6px 20px;
  background: var(--papel);
  border: 1px dashed rgba(124, 45, 62, 0.35);
  border-radius: 4px 12px 12px 4px;
  transform: rotate(-0.8deg);
  white-space: nowrap;
}
.etiqueta__furo {
  position: absolute;
  left: 8px;
  top: 50%;
  width: 5px;
  height: 5px;
  margin-top: -2.5px;
  border-radius: 50%;
  background: rgba(124, 45, 62, 0.28);
}
.etiqueta__valor {
  font-family: var(--serif);
  font-size: 1.28rem;
  font-weight: 600;
  color: var(--vinho);
  line-height: 1.1;
}
.etiqueta__pix {
  font-size: 0.68rem;
  font-weight: 400;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--vinho-suave);
}

.peca__cartao {
  white-space: nowrap;
  font-size: 0.8rem;
  color: var(--vinho-suave);
}

.peca__cta { margin-top: auto; }

/* No celular a vitrine tem duas colunas e cada card fica com ~140px úteis:
   "Adicionar à sacola 💗" no tamanho normal não cabe e o texto era cortado
   nas bordas da pílula. Aqui o botão ocupa a largura do card, encolhe um
   pouco e PODE quebrar em duas linhas, cortar, nunca. */
@media (max-width: 699px) {
  .peca__cta {
    width: 100%;
    min-height: 44px;
    padding: 0.55em 0.6em;
    font-size: 0.84rem;
    line-height: 1.2;
    white-space: normal;
  }
}

.vitrine__rodape {
  margin: 34px 0 0;
  text-align: center;
  font-size: 1.02rem;
  color: var(--vinho-suave);
}

@media (min-width: 700px) {
  .vitrine { padding: 62px 0 84px; }
  .vitrine__grade { grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 24px; }
  .peca__corpo { padding: 18px 18px 20px; }
  .peca__nome { font-size: 1.35rem; }
  .etiqueta { flex-direction: row; align-items: baseline; gap: 0.4em; }
  .etiqueta__valor { font-size: 1.42rem; }
  .botao--rosa { font-size: 0.95rem; }
}
@media (min-width: 1000px) {
  .vitrine__grade { grid-template-columns: repeat(4, minmax(0, 1fr)); }
}

/* No toque não existe hover: a inclinação fica menor, já que o alinhamento
   no hover não vai acontecer. */
@media (hover: none) {
  .vitrine__grade li:nth-child(odd) .peca { transform: rotate(-0.35deg); }
  .vitrine__grade li:nth-child(even) .peca { transform: rotate(0.4deg); }
}

/* -----------------------------------------------------------------------------
   10. SOBRE NÓS
-------------------------------------------------------------------------- */
.sobre {
  background-color: var(--fundo-morno);
  background-image: var(--textura);
  padding: 60px 0 66px;
}

.sobre__interno { display: grid; gap: 34px; }

.sobre__sobrelinha {
  margin: 0 0 8px;
  font-size: 0.74rem;
  letter-spacing: 0.22em;
  text-transform: uppercase;
  color: var(--rosa-forte);
  /* rótulo decorativo; a informação está no título logo abaixo */
}

.sobre__texto p:not(.sobre__sobrelinha) {
  max-width: 58ch;
  color: var(--vinho-suave);
}
.sobre__texto .seccao__titulo { margin-bottom: 1.1rem; }

.sobre__figura { margin: 0; }

.sobre__mosaico {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 12px;
}
.amostra {
  display: block;
  aspect-ratio: 1;
  border-radius: 22px 16px 22px 16px;
  box-shadow: inset 0 0 0 1px rgba(124, 45, 62, 0.07), var(--sombra-suave);
}
.amostra--1 { background: linear-gradient(150deg, #f8a8d8, #f45c7f); }
.amostra--2 { background: linear-gradient(150deg, #ffe7e1, #f4a79a); }
.amostra--3 { background: linear-gradient(150deg, #fbf3e9, #e9cfae); }
.amostra--4 { background: linear-gradient(150deg, #f1f3ec, #c9d6c4); }
.amostra--5 { background: linear-gradient(150deg, #ffede6, #f19e7c); }
.amostra--6 { background: linear-gradient(150deg, #fde3ec, #ffaef0); }

.sobre__figura figcaption {
  margin-top: 14px;
  font-size: 0.85rem;
  color: var(--vinho-suave);
  text-align: center;
}

@media (min-width: 700px) {
  .encomendas__texto { font-size: 1.1rem; }
}

@media (min-width: 860px) {
  .sobre { padding: 92px 0 100px; }
  .sobre__interno {
    grid-template-columns: 1.15fr 0.85fr;
    align-items: center;
    gap: 60px;
  }
}

/* -----------------------------------------------------------------------------
   11. ENCOMENDAS, segunda e última aparição do degradê.
-------------------------------------------------------------------------- */
.encomendas {
  position: relative;
  isolation: isolate;
  background: var(--degrade);
  color: var(--vinho);
  padding: clamp(78px, 12vw, 130px) 0 clamp(84px, 12vw, 134px);
  text-align: center;
  overflow: hidden;
}
/* O véu escuro saiu junto com o texto branco: aqui o clareado só ajuda as
   duas ondas (a de cima e a de baixo) a encostarem na seção sem degrau. */
.encomendas::before {
  content: "";
  position: absolute;
  inset: 0;
  background: linear-gradient(
    180deg,
    rgba(255, 255, 255, 0.22) 0%,
    rgba(255, 255, 255, 0) 30%,
    rgba(255, 255, 255, 0) 72%,
    rgba(255, 255, 255, 0.26) 100%
  );
  z-index: -1;
}

.encomendas__interno { max-width: 640px; }

.encomendas__titulo {
  font-size: clamp(1.85rem, 8vw, 3rem);
  margin-bottom: 0.5em;
  text-wrap: balance;
}
.encomendas__titulo .assinatura {
  display: block;
  font-size: 1.42em;
  line-height: 0.9;
  margin-top: 0.1em;
}

.encomendas__texto {
  max-width: 42ch;
  margin: 0 auto 2rem;
  color: var(--vinho);
}

/* -----------------------------------------------------------------------------
   12. RODAPÉ
-------------------------------------------------------------------------- */
.rodape {
  background: var(--branco);
  padding: 44px 0 0;
}

.rodape__interno {
  display: grid;
  gap: 28px;
  padding-bottom: 34px;
}

.rodape__frase { margin: 0; color: var(--vinho-suave); }

.rodape__titulo {
  font-family: var(--sans);
  font-size: 0.74rem;
  font-weight: 500;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: var(--vinho);
  margin: 0 0 12px;
}
.rodape__col li { margin-bottom: 8px; }
.rodape__col a {
  color: var(--vinho-suave);
  border-bottom: 1px solid transparent;
  transition: color var(--anim-rapida) ease, border-color var(--anim-rapida) ease;
}
.rodape__col a:hover { color: var(--vinho); border-bottom-color: var(--rosa-forte); }

/* Espaço reservado para as páginas das próximas etapas */
.rodape__col--breve span {
  color: var(--vinho-suave);
  opacity: 0.62;
}
/* Sem borda tracejada aqui de propósito: o "ponto de costura" fica reservado
   para dois lugares na página (a etiqueta de preço e a moldura do card no
   hover). Espalhado, vira maneirismo. */
.rodape__col--breve li::after {
  content: "em breve";
  display: inline-block;
  margin-left: 6px;
  padding: 1px 8px;
  background: var(--fundo-morno);
  border-radius: var(--r-pilula);
  font-size: 0.66rem;
  letter-spacing: 0.06em;
  color: var(--vinho-suave);
  vertical-align: 1px;
}

.rodape__base {
  border-top: 1px solid var(--borda);
  padding-block: 18px 22px;
}
.rodape__base p {
  margin: 0;
  font-size: 0.82rem;
  color: var(--vinho-suave);
}

@media (min-width: 720px) {
  .rodape { padding-top: 64px; }
  .rodape__interno {
    grid-template-columns: 1.4fr repeat(3, 1fr);
    gap: 40px;
  }
}

/* -----------------------------------------------------------------------------
   13. WHATSAPP FLUTUANTE, discreto; acena de vez em quando.
-------------------------------------------------------------------------- */
.zap-flutuante {
  position: fixed;
  right: 16px;
  bottom: 16px;
  z-index: 90;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 52px;
  height: 52px;
  border-radius: var(--r-pilula);
  background: var(--vinho);
  color: var(--branco);
  box-shadow: 0 8px 22px rgba(124, 45, 62, 0.32);
  transition: transform var(--anim-rapida) var(--macio), background-color var(--anim-rapida) ease;
}
.zap-flutuante:hover { transform: translateY(-3px); background: #66222f; }
.zap-flutuante svg { animation: acenar var(--anim-aceno) ease-in-out infinite; }
.zap-flutuante:hover svg { animation-play-state: paused; }

@media (min-width: 700px) {
  .zap-flutuante { right: 24px; bottom: 24px; width: 56px; height: 56px; }
}

/* -----------------------------------------------------------------------------
   14. COREOGRAFIA DO HERO (carga da página, ~1,8s do começo ao coração)
   Ordem: sobrelinha → linha 1 → palavra bordada → linha 2 → texto → CTAs →
   o fio se desenhando → o coração no fim do fio.
   Só transform, opacity, clip-path e stroke são animados.
-------------------------------------------------------------------------- */
@keyframes respirar {
  from { background-position: 50% 26%; }
  to   { background-position: 50% 58%; }
}

@keyframes revelarLinha {
  from { clip-path: inset(100% 0 0 0); transform: translateY(14px); }
  to   { clip-path: inset(0 0 0 0); transform: none; }
}

@keyframes bordar {
  from { opacity: 0; transform: rotate(-9deg) scale(0.84) translateY(8px); }
  to   { opacity: 1; transform: rotate(-3deg); }
}

@keyframes surgir {
  from { opacity: 0; transform: translateY(16px); }
  to   { opacity: 1; transform: none; }
}

@keyframes desenharFio {
  from { stroke-dashoffset: 1; }
  to   { stroke-dashoffset: 0; }
}

@keyframes pipocar {
  0%   { opacity: 0; transform: scale(0.2); }
  65%  { opacity: 1; transform: scale(1.18); }
  100% { opacity: 1; transform: scale(1); }
}

@keyframes pulsar {
  0%, 100% { transform: scale(1); }
  45%      { transform: scale(1.28); }
}

@keyframes acenar {
  0%, 84%, 100% { transform: rotate(0deg); }
  86%  { transform: rotate(-13deg); }
  89%  { transform: rotate(11deg); }
  92%  { transform: rotate(-8deg); }
  95%  { transform: rotate(5deg); }
  98%  { transform: rotate(-2deg); }
}

@keyframes balancar {
  from { transform: rotate(-7deg); }
  to   { transform: rotate(7deg); }
}

.hero__sobrelinha { animation: surgir var(--anim-media) var(--macio) 0.05s backwards; }
.hero__linha      { animation: revelarLinha var(--anim-lenta) var(--macio) 0.15s backwards; }
.hero__assinatura { animation: bordar 0.75s var(--pop) 0.5s backwards; }
.hero__linha--baixo { animation-delay: 0.3s; }
.hero__texto      { animation: surgir var(--anim-media) var(--macio) 0.65s backwards; }
.hero__acoes      { animation: surgir var(--anim-media) var(--macio) 0.85s backwards; }
.selos            { animation: surgir var(--anim-media) var(--macio) 1s backwards; }
.fio__traco       { animation: desenharFio var(--anim-fio) var(--macio) 0.7s backwards; }
.fio__coracao     { animation: pipocar 0.45s var(--pop) 1.72s backwards; }

/* -----------------------------------------------------------------------------
   15. REVEALS POR SCROLL
   O estado inicial escondido só existe quando o JS liga o atributo
   data-anima no <html>, ou seja: sem JS, ou com "movimento reduzido"
   ligado no sistema, a página aparece inteira e estática.
   Cada seção entra de um jeito diferente; nada de um reveal só repetido.
-------------------------------------------------------------------------- */
@keyframes entrarSubindo {
  from { opacity: 0; transform: translateY(24px); }
  to   { opacity: 1; transform: none; }
}
@keyframes entrarCarta {
  from { opacity: 0; transform: translateY(28px) rotate(-2.5deg) scale(0.97); }
  to   { opacity: 1; transform: none; }
}
@keyframes entrarPeca {
  from { opacity: 0; transform: translateY(22px) scale(0.96); }
  to   { opacity: 1; transform: none; }
}
@keyframes entrarDeLado {
  from { opacity: 0; transform: translateX(-24px); }
  to   { opacity: 1; transform: none; }
}
@keyframes entrarPipocando {
  0%   { opacity: 0; transform: scale(0.7); }
  70%  { opacity: 1; transform: scale(1.06); }
  100% { opacity: 1; transform: none; }
}
@keyframes entrarRespirando {
  from { opacity: 0; transform: scale(1.035); }
  to   { opacity: 1; transform: none; }
}
@keyframes aparecer {
  from { opacity: 0; }
  to   { opacity: 1; }
}

[data-anima] .revela { opacity: 0; }

/* O "both" precisa vir dentro de cada shorthand: se ficasse numa regra
   separada, o shorthand seguinte zeraria o animation-fill-mode e o elemento
   voltaria a opacity 0 assim que a animação terminasse. */
[data-anima] .revela--sobe.visivel     { animation: entrarSubindo var(--anim-media) var(--macio) both; }
[data-anima] .revela--carta.visivel    { animation: entrarCarta 0.6s var(--macio) both; }
[data-anima] .revela--cascata.visivel  { animation: entrarPeca var(--anim-media) var(--macio) both; }
[data-anima] .revela--lado.visivel     { animation: entrarDeLado 0.7s var(--macio) both; }
[data-anima] .revela--pipoca.visivel   { animation: entrarPipocando 0.5s var(--pop) both; }
[data-anima] .revela--respira.visivel  { animation: entrarRespirando 0.8s var(--macio) both; }

/* Cascatas: o intervalo entre um card e o próximo */
[data-anima] .categorias__grade li:nth-child(1).visivel { animation-delay: 0ms; }
[data-anima] .categorias__grade li:nth-child(2).visivel { animation-delay: 90ms; }
[data-anima] .categorias__grade li:nth-child(3).visivel { animation-delay: 180ms; }
[data-anima] .categorias__grade li:nth-child(4).visivel { animation-delay: 270ms; }
[data-anima] .categorias__grade li:nth-child(5).visivel { animation-delay: 360ms; }

[data-anima] .vitrine__grade li:nth-child(1).visivel  { animation-delay: calc(var(--anim-cascata) * 0); }
[data-anima] .vitrine__grade li:nth-child(2).visivel  { animation-delay: calc(var(--anim-cascata) * 1); }
[data-anima] .vitrine__grade li:nth-child(3).visivel  { animation-delay: calc(var(--anim-cascata) * 2); }
[data-anima] .vitrine__grade li:nth-child(4).visivel  { animation-delay: calc(var(--anim-cascata) * 3); }
[data-anima] .vitrine__grade li:nth-child(5).visivel  { animation-delay: calc(var(--anim-cascata) * 0); }
[data-anima] .vitrine__grade li:nth-child(6).visivel  { animation-delay: calc(var(--anim-cascata) * 1); }
[data-anima] .vitrine__grade li:nth-child(7).visivel  { animation-delay: calc(var(--anim-cascata) * 2); }
[data-anima] .vitrine__grade li:nth-child(8).visivel  { animation-delay: calc(var(--anim-cascata) * 3); }
[data-anima] .vitrine__grade li:nth-child(9).visivel  { animation-delay: calc(var(--anim-cascata) * 0); }
[data-anima] .vitrine__grade li:nth-child(10).visivel { animation-delay: calc(var(--anim-cascata) * 1); }
[data-anima] .vitrine__grade li:nth-child(11).visivel { animation-delay: calc(var(--anim-cascata) * 2); }
[data-anima] .vitrine__grade li:nth-child(12).visivel { animation-delay: calc(var(--anim-cascata) * 3); }

[data-anima] .amostra:nth-child(2).visivel { animation-delay: 60ms; }
[data-anima] .amostra:nth-child(3).visivel { animation-delay: 120ms; }
[data-anima] .amostra:nth-child(4).visivel { animation-delay: 180ms; }
[data-anima] .amostra:nth-child(5).visivel { animation-delay: 240ms; }
[data-anima] .amostra:nth-child(6).visivel { animation-delay: 300ms; }

/* O fio divisor: primeiro se desenha, depois o novelo aparece e balança */
.novelo { animation: balancar var(--anim-novelo) ease-in-out infinite alternate; }

[data-anima] .costura__fio { stroke-dashoffset: 1; }
[data-anima] .costura .novelo { opacity: 0; animation: none; }
[data-anima] .costura.visivel .costura__fio {
  animation: desenharFio var(--anim-costura) var(--macio) forwards;
}
[data-anima] .costura.visivel .novelo {
  animation: aparecer 0.4s ease calc(var(--anim-costura) * 0.75) forwards,
    balancar var(--anim-novelo) ease-in-out calc(var(--anim-costura) * 0.9) infinite alternate;
}

/* -----------------------------------------------------------------------------
   16. MOVIMENTO REDUZIDO E IMPRESSÃO
   Quem pediu menos movimento no sistema recebe a página inteira, bonita e
   parada: todo estado inicial de animação é também o estado final.
-------------------------------------------------------------------------- */
@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  *,
  *::before,
  *::after {
    animation-duration: 0.001ms !important;
    animation-delay: 0ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.001ms !important;
  }
  .botao:hover,
  .peca:hover,
  .categoria:hover,
  .categorias__grade li:nth-child(even) .categoria:hover,
  .zap-flutuante:hover { transform: none; }
  .peca:hover .peca__foto img { transform: none; }
}

@media print {
  .cabecalho, .zap-flutuante, .hero__acoes, .encomendas, .costura, .onda { display: none; }
  body { background: #fff; }
  .peca { break-inside: avoid; }
}

/* -----------------------------------------------------------------------------
   18. BLOCOS POR SEÇÃO (vitrine da home)
   Cada seção ativa vira um bloco com título próprio, e o fio da marca costura
   um no outro. O título é serifado como os demais, mas um degrau menor que o
   "Nossas peças" que encabeça a vitrine, a hierarquia tem que se ver.
-------------------------------------------------------------------------- */
.bloco-secao { padding: 6px 0 18px; }

.bloco-secao__topo {
  display: flex;
  flex-wrap: wrap;
  align-items: baseline;
  justify-content: space-between;
  gap: 6px 16px;
  margin-bottom: 16px;
}

.bloco-secao__titulo {
  display: inline-flex;
  align-items: baseline;
  gap: 0.4em;
  font-size: clamp(1.35rem, 4.6vw, 1.75rem);
  color: var(--vinho);
}

.bloco-secao__emoji {
  font-size: 0.9em;
  /* o emoji é decorativo: não pode empurrar a linha de base do título */
  line-height: 1;
}

.bloco-secao__link {
  font-size: 0.92rem;
  color: var(--vinho-suave);
  border-bottom: 1.5px solid transparent;
  transition: color var(--anim-rapida) ease, border-color var(--anim-rapida) ease;
  white-space: nowrap;
}
.bloco-secao__link:hover {
  color: var(--vinho);
  border-bottom-color: var(--rosa-forte);
}

/* Um fio de lã curtinho embaixo do título, só para o bloco não começar seco. */
.bloco-secao__titulo::after {
  content: "";
  display: block;
  width: 34px;
  height: 2px;
  margin-top: 6px;
  border-radius: 2px;
  background: var(--rosa-claro);
}

@media (min-width: 700px) {
  .bloco-secao { padding: 10px 0 26px; }
  .bloco-secao__topo { margin-bottom: 20px; }
}

/* A logo no rodapé (public/img/logo/). Aqui ela POUSA NO BRANCO, não no rosa
   da marca, então o quadrado aparece mesmo: o raio de 18px o transforma numa
   plaquinha, que é o jeito honesto de mostrar a logo fora do fundo dela. */
.rodape__logo {
  width: 104px;
  height: 104px;
  margin-bottom: 10px;
  border-radius: 18px;
}