/* ------------------------------------------------------------ fontes ---
   Auto-hospedadas (Propshaft): o app precisa funcionar sem CDN e offline.
   Só os subsets latin e latin-ext — pt-BR inteiro cabe aqui.            */
@font-face {
  font-family: 'Cormorant Garamond';
  font-style: italic;
  font-weight: 400;
  font-display: swap;
  src: url("/assets/cormorant-400-italic-latin-ext-8f41ce70.woff2") format('woff2');
  unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}
@font-face {
  font-family: 'Cormorant Garamond';
  font-style: italic;
  font-weight: 400;
  font-display: swap;
  src: url("/assets/cormorant-400-italic-latin-fd38ac68.woff2") format('woff2');
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
@font-face {
  font-family: 'Cormorant Garamond';
  font-style: italic;
  font-weight: 600;
  font-display: swap;
  src: url("/assets/cormorant-600-italic-latin-ext-8f41ce70.woff2") format('woff2');
  unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}
@font-face {
  font-family: 'Cormorant Garamond';
  font-style: italic;
  font-weight: 600;
  font-display: swap;
  src: url("/assets/cormorant-600-italic-latin-fd38ac68.woff2") format('woff2');
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
@font-face {
  font-family: 'Cormorant Garamond';
  font-style: normal;
  font-weight: 400;
  font-display: swap;
  src: url("/assets/cormorant-400-normal-latin-ext-0a79cd90.woff2") format('woff2');
  unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}
@font-face {
  font-family: 'Cormorant Garamond';
  font-style: normal;
  font-weight: 400;
  font-display: swap;
  src: url("/assets/cormorant-400-normal-latin-0b6541cf.woff2") format('woff2');
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
@font-face {
  font-family: 'Cormorant Garamond';
  font-style: normal;
  font-weight: 500;
  font-display: swap;
  src: url("/assets/cormorant-500-normal-latin-ext-0a79cd90.woff2") format('woff2');
  unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}
@font-face {
  font-family: 'Cormorant Garamond';
  font-style: normal;
  font-weight: 500;
  font-display: swap;
  src: url("/assets/cormorant-500-normal-latin-0b6541cf.woff2") format('woff2');
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
@font-face {
  font-family: 'Cormorant Garamond';
  font-style: normal;
  font-weight: 600;
  font-display: swap;
  src: url("/assets/cormorant-600-normal-latin-ext-0a79cd90.woff2") format('woff2');
  unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}
@font-face {
  font-family: 'Cormorant Garamond';
  font-style: normal;
  font-weight: 600;
  font-display: swap;
  src: url("/assets/cormorant-600-normal-latin-0b6541cf.woff2") format('woff2');
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
@font-face {
  font-family: 'Nunito Sans';
  font-style: normal;
  font-weight: 400;
  font-display: swap;
  src: url("/assets/nunito-400-normal-latin-ext-777d78ef.woff2") format('woff2');
  unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}
@font-face {
  font-family: 'Nunito Sans';
  font-style: normal;
  font-weight: 400;
  font-display: swap;
  src: url("/assets/nunito-400-normal-latin-4a6f9a47.woff2") format('woff2');
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
@font-face {
  font-family: 'Nunito Sans';
  font-style: normal;
  font-weight: 600;
  font-display: swap;
  src: url("/assets/nunito-600-normal-latin-ext-777d78ef.woff2") format('woff2');
  unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}
@font-face {
  font-family: 'Nunito Sans';
  font-style: normal;
  font-weight: 600;
  font-display: swap;
  src: url("/assets/nunito-600-normal-latin-4a6f9a47.woff2") format('woff2');
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
@font-face {
  font-family: 'Nunito Sans';
  font-style: normal;
  font-weight: 700;
  font-display: swap;
  src: url("/assets/nunito-700-normal-latin-ext-777d78ef.woff2") format('woff2');
  unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}
@font-face {
  font-family: 'Nunito Sans';
  font-style: normal;
  font-weight: 700;
  font-display: swap;
  src: url("/assets/nunito-700-normal-latin-4a6f9a47.woff2") format('woff2');
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
@font-face {
  font-family: 'Nunito Sans';
  font-style: normal;
  font-weight: 800;
  font-display: swap;
  src: url("/assets/nunito-800-normal-latin-ext-777d78ef.woff2") format('woff2');
  unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}
@font-face {
  font-family: 'Nunito Sans';
  font-style: normal;
  font-weight: 800;
  font-display: swap;
  src: url("/assets/nunito-800-normal-latin-4a6f9a47.woff2") format('woff2');
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
@font-face {
  font-family: 'Dancing Script';
  font-style: normal;
  font-weight: 400;
  font-display: swap;
  src: url("/assets/dancing-400-normal-latin-ext-231a2037.woff2") format('woff2');
  unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}
@font-face {
  font-family: 'Dancing Script';
  font-style: normal;
  font-weight: 400;
  font-display: swap;
  src: url("/assets/dancing-400-normal-latin-c6494754.woff2") format('woff2');
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
@font-face {
  font-family: 'Dancing Script';
  font-style: normal;
  font-weight: 600;
  font-display: swap;
  src: url("/assets/dancing-600-normal-latin-ext-231a2037.woff2") format('woff2');
  unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}
@font-face {
  font-family: 'Dancing Script';
  font-style: normal;
  font-weight: 600;
  font-display: swap;
  src: url("/assets/dancing-600-normal-latin-c6494754.woff2") format('woff2');
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
@font-face {
  font-family: 'Dancing Script';
  font-style: normal;
  font-weight: 700;
  font-display: swap;
  src: url("/assets/dancing-700-normal-latin-ext-231a2037.woff2") format('woff2');
  unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}
@font-face {
  font-family: 'Dancing Script';
  font-style: normal;
  font-weight: 700;
  font-display: swap;
  src: url("/assets/dancing-700-normal-latin-c6494754.woff2") format('woff2');
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}

/* ==========================================================================
   Pari & Perdi — design system
   Fonte canônica da identidade: docs/marca/brandkit-original.png + docs/MARCA.md
   Rosa/bege/marrom, serifada nos títulos, manuscrita só na frase-conceito.
   Mobile-first. Escrito à mão. Zero framework, zero build. Propshaft serve isto.

   ---------------------------------------------------------------------------
   CLASSES DISPONÍVEIS (leia antes de inventar CSS na sua fatia)
   ---------------------------------------------------------------------------
   Layout
     .container            largura máxima + padding lateral (use em quase tudo)
     .container--narrow    versão estreita (formulários, checkout, conta)
     .stack, .stack--sm, .stack--lg   coluna com espaçamento entre filhos
     .row                  linha flex com gap, quebra no mobile
     .between              row com space-between
     .section              bloco vertical com respiro
     .section--rosa        seção com fundo rosa-claro sangrando na largura
     .divider, .toolbar, .sticky-bar

   Tipografia
     .title, .subtitle, .eyebrow, .muted, .text-sm, .text-center
     .prosa                trava a linha em 66ch (60-70 caracteres). Use em
                           todo parágrafo longo; .subtitle já vem travado.
     escala: --t-xs .78 · --t-sm .9 · --t-md 1 · --t-lg 1.15 · --t-xl 1.45 ·
             --t-2xl 1.9 · --t-3xl 2.6 · --t-4xl 3.2 (rem). Não invente tamanho.
     .frase-conceito       manuscrita rosa (a frase da marca; nunca em UI funcional)
     .money                preço tabular. .money--old riscado, .money--big destaque,
                           .money--negativo vermelho
     .assinatura           wordmark textual PARI&PERDI (usa .assinatura__rosa)

   Marca
     .logo, .logo--sm, .logo--lg     img/svg da assinatura
     .logo__coracao        o coração do cabide (recebe o pulso único na entrada)
     .circulo-icone        círculo rosa-claro com ícone dentro (marca do brand kit)
       .circulo-icone--sm .circulo-icone--lg .circulo-icone--forte
     .selo-fase            badge das 3 fases (.selo-fase--gestacao
                           .selo-fase--amamentacao .selo-fase--pos-parto
                           .selo-fase--mamae-bebe)
     .ilustra              svg de ilustração herdando currentColor (.ilustra--rosa)
                           app/assets/images/ilustracoes/*.svg usam currentColor com
                           rosa como padrão: via image_tag saem rosa; inline (ou via
                           <use>) obedecem a cor do contexto (.circulo-icone, .ilustra)
     .ciclo-gira           aplica o giro lento ao entrar em tela

   Botões
     .btn + .btn--primary .btn--ghost .btn--danger .btn--block .btn--sm
     [disabled] / .is-loading tratados
     Hierarquia: UM .btn--primary por tela. O resto é .btn--ghost.
     Toque: .btn tem 48px; .btn--sm sobe pra 44px em (pointer: coarse).

   Superfícies
     .card (.card__body .card__header .card__footer), .panel, .chip

   Formulário
     .field (.field__label .field__hint .field__error), .field--inline, .field-row
     input/select/textarea já estilizados globalmente

   Estados — .badge, variações:
     .badge--rascunho .badge--publicado .badge--reservado .badge--vendido
     .badge--devolvido .badge--descartado
     .badge--recebido .badge--pre-triado .badge--em-triagem
     .badge--concluido .badge--cancelado
     .badge--comprar .badge--consignar .badge--recusar
     .badge--pendente .badge--pago .badge--credito
     .badge--neutro .badge--alerta .badge--novidade
     .badge--novidade = selo branco e discreto da vitrine ("nova com etiqueta",
     "acabou de chegar"). O desconto se lê na linha de preço (.money--old),
     não numa tarja de porcentagem em cima da foto.

   Catálogo
     .grid-pecas, .peca (.peca__info .peca__title .peca__meta)
     .photo-frame (--square --tall --thumb), .photo-frame__tag
     .photo-frame__vazio (+ __vazio-icone __vazio-texto) placeholder da peça sem foto
     .photo-grid, .photo-remove

   Diversos
     .flash / .flash--notice .flash--alert   (partial shared/_flash)
     .table (envolva em .table-wrap), .tabs / .tab / .tab.is-active
     .empty-state, .countdown, .stat-grid / .stat
     .reveal               bloco revelado ao rolar (data-controller="reveal")
     .grid-auto            grade responsiva; o mínimo vem de --min (default 240px)
     .hidden .only-desktop .only-mobile .sr-only

   Fatia LOJA (fim do arquivo)
     .fases / .fase              filtro ilustrado das 4 fases
     .chips / .chip--removivel   filtros ativos, cada um removível por link
     .galeria (__palco __miniatura __miniaturas), .photo-frame__veu
     .peca-pagina__ (grid fotos info resumo precos economia), .sacola__empurrao

   Fatia CHECKOUT/CONTA (fim do arquivo)
     .passo / .passo__num        os 4 passos numerados
     .checkout-item, .reserva-aviso
     .pix (moldura do QR, aviso "muda sozinha")
     .carteira (saldo em destaque), .erro-pagina (404/422/500)

   Fatia HOME (fim do arquivo)
     .hero__medalhao, .hero__ctas, .section--capitulo, .section__cabeca,
     .como__marca/.como__numero, .valor__titulo, .fecho (bloco de fechamento)

   COR E CONTRASTE (leia antes de pintar qualquer coisa)
     --rosa-forte  é DECORATIVO: fundo de círculo, traço de ilustração, o rosa
                   da assinatura. Branco sobre ele dá 2.54:1 — nunca ponha
                   texto em cima dele.
     --rosa-texto  (#9C4E67) é o rosa de TEXTO e de superfície-com-texto:
                   5.68:1 com branco, 4.54:1 sobre o bege, 4.82:1 sobre o
                   rosa-claro. É o que .btn--primary, .badge--desconto, o
                   contador da sacola e --cor-acento-escuro usam.
     --cor-texto-suave / --cor-texto-fraco são cores SÓLIDAS (5.11:1 e 4.69:1
                   sobre o bege). Hierarquia se faz por tamanho e peso, nunca
                   por opacidade — alfa reprovava em contraste.
     Foco: :focus-visible é anel marrom + halo rosa-medio. Não sobrescreva com
                   rosa-forte (2.03:1 sobre o bege, invisível).

   Ritmo vertical: --ritmo-apoio (48px) para seção de apoio, --ritmo-capitulo
     (80px) para seção-produto. .section já aplica o de apoio no desktop.

   Filtros: .filtros__faixa junta preço mín/máx num campo só.

   Movimento: transições 200–300ms suaves; pulso único do coração; giro lento do
   ciclo. Tudo dentro de @media (prefers-reduced-motion: no-preference), e
   hover de elevação só em @media (hover: hover).
   ========================================================================== */

:root {
  /* --------- paleta exata do brand kit --------- */
  --rosa-forte: #D98DA1;
  --rosa-medio: #F6C1C6;
  --rosa-claro: #FCE8E6;
  --bege:       #EFE4DB;
  --marrom:     #6C5B5B;

  /* altura do cabeçalho sticky — o flash se ancora nela pra não cobrir o menu */
  --altura-topo: 60px;

  /* --------- neutros derivados (não inventar outros) --------- */
  --cor-fundo:        var(--bege);
  --cor-superficie:   #FFFFFF;
  --cor-superficie-2: var(--rosa-claro);
  --cor-borda:        rgba(108, 91, 91, .14);
  --cor-borda-forte:  rgba(108, 91, 91, .28);

  /* Hierarquia de texto por TAMANHO e PESO, nunca por transparência: o marrom
     com alfa reprovava contraste (2.2:1) sobre o bege. Cores sólidas medidas:
     marrom 5.11:1 e #74605F 4.69:1 sobre o bege — ambas passam em AA. */
  --cor-texto:       var(--marrom);
  --cor-texto-suave: #6C5B5B;
  --cor-texto-fraco: #74605F;
  --cor-sobre-rosa:  #FFFFFF;

  /* O rosa-forte é DECORATIVO (fundo de círculo, traço de ilustração): branco
     sobre ele dá 2.54:1. Para texto e para superfície-com-texto existe o
     --rosa-texto, mesmo matiz, mais fundo: 5.68:1 com branco, 4.54:1 no bege. */
  --rosa-texto:       #9C4E67;
  --rosa-texto-hover: #874054;

  /* acento = rosa-forte da marca */
  --cor-acento:        var(--rosa-forte);
  --cor-acento-escuro: var(--rosa-texto);
  --cor-acento-claro:  var(--rosa-claro);
  --cor-acento-medio:  var(--rosa-medio);

  /* estados — derivados dentro da família da marca */
  --cor-oliva:        #7C8B6B;
  --cor-oliva-claro:  #E9EDE2;
  --cor-oliva-texto:  #46563A;
  --cor-ambar:        #B98A4E;
  --cor-ambar-claro:  #F7ECDC;
  --cor-perigo:       #B0554F;
  --cor-perigo-claro: #F7E3E0;

  /* --------- espaços (base 4px) --------- */
  --e-xs: 4px; --e-sm: 8px; --e-md: 16px; --e-lg: 24px;
  --e-xl: 32px; --e-2xl: 48px; --e-3xl: 72px;

  /* --------- raios --------- */
  --r-sm: 10px; --r-md: 16px; --r-lg: 24px; --r-full: 999px;

  /* --------- sombras (leves, macias) --------- */
  --s-sm: 0 1px 2px rgba(108, 91, 91, .07);
  --s-md: 0 8px 24px rgba(108, 91, 91, .09);
  --s-lg: 0 20px 48px rgba(108, 91, 91, .14);

  /* --------- tipografia --------- */
  --fonte-titulo: "Cormorant Garamond", "Playfair Display", "Iowan Old Style", Palatino, Georgia, "Times New Roman", serif;
  --fonte-corpo: "Nunito Sans", "Inter", ui-sans-serif, system-ui, -apple-system, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;
  --fonte-script: "Dancing Script", "Segoe Script", "Brush Script MT", cursive;

  /* Escala tipográfica — razão ~1.25, um degrau por papel. Nada fora daqui. */
  --t-xs: .78rem; --t-sm: .9rem; --t-md: 1rem; --t-lg: 1.15rem;
  --t-xl: 1.45rem; --t-2xl: 1.9rem; --t-3xl: 2.6rem; --t-4xl: 3.2rem;

  --transicao: 220ms cubic-bezier(.22, .61, .36, 1);
  --transicao-lenta: 300ms cubic-bezier(.22, .61, .36, 1);

  --largura: 1180px;
  --largura-estreita: 640px;
  /* linha de leitura confortável: 60–70 caracteres */
  --largura-leitura: 66ch;

  /* ritmo vertical: apoio respira 48, capítulo (seção-produto) respira 80 */
  --ritmo-apoio: var(--e-2xl);
  --ritmo-capitulo: 80px;

  --z-topo: 50;
  --z-flash: 300;
}

/* --------------------------------------------------------------- reset --- */
*, *::before, *::after { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; }
body {
  margin: 0;
  background: var(--cor-fundo);
  color: var(--cor-texto);
  font-family: var(--fonte-corpo);
  font-size: var(--t-md);
  line-height: 1.65;
  -webkit-font-smoothing: antialiased;
}
img, svg, video { max-width: 100%; height: auto; display: block; }
a { color: var(--cor-acento-escuro); text-decoration: none; transition: color var(--transicao); }
a:hover { text-decoration: underline; }
h1, h2, h3, h4 { font-family: var(--fonte-titulo); font-weight: 600; line-height: 1.18; margin: 0 0 var(--e-sm); letter-spacing: .01em; }
h1 { font-size: var(--t-2xl); }
h2 { font-size: var(--t-xl); }
h3 { font-size: var(--t-lg); }
p { margin: 0 0 var(--e-md); }
ul, ol { margin: 0 0 var(--e-md); padding-left: 1.2em; }
hr { border: 0; border-top: 1px solid var(--cor-borda); margin: var(--e-lg) 0; }
/* O anel rosa-forte dava 2.03:1 sobre o bege — invisível. Anel marrom (5.11:1)
   com halo rosa: funciona sobre bege, branco e rosa-claro, e continua da marca. */
:focus-visible {
  outline: 2px solid var(--marrom);
  outline-offset: 2px;
  box-shadow: 0 0 0 4px var(--rosa-medio);
  border-radius: var(--r-sm);
}
::selection { background: var(--rosa-medio); color: var(--marrom); }

@media (min-width: 768px) {
  h1 { font-size: var(--t-3xl); }
  h2 { font-size: var(--t-2xl); }
}

/* -------------------------------------------------------------- layout --- */
.container { width: 100%; max-width: var(--largura); margin: 0 auto; padding: 0 var(--e-md); }
.container--narrow {
  width: 100%; max-width: var(--largura-estreita);
  margin-inline: auto; padding-inline: var(--e-md);
}
.section { padding: var(--e-xl) 0; }
.section--rosa {
  background: var(--rosa-claro);
  border-radius: var(--r-lg);
  padding: var(--e-xl) var(--e-md);
}
@media (min-width: 768px) {
  .section { padding: var(--ritmo-apoio) 0; }
  .section--rosa { padding: var(--e-2xl); }
  .container { padding: 0 var(--e-lg); }
}

.stack { display: flex; flex-direction: column; gap: var(--e-md); }
.stack--sm { gap: var(--e-sm); }
.stack--lg { gap: var(--e-lg); }
.row { display: flex; flex-wrap: wrap; align-items: center; gap: var(--e-sm); }
.between { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: var(--e-sm); }
.divider { height: 1px; background: var(--cor-borda); margin: var(--e-md) 0; }
.toolbar { display: flex; flex-wrap: wrap; align-items: center; gap: var(--e-sm); padding: var(--e-sm) 0; margin-bottom: var(--e-md); }
.sticky-bar {
  position: sticky; bottom: 0; z-index: var(--z-topo);
  background: var(--cor-superficie); border-top: 1px solid var(--cor-borda);
  padding: var(--e-md); box-shadow: 0 -8px 24px rgba(108, 91, 91, .08);
}

/* ---------------------------------------------------------- tipografia --- */
.title { font-family: var(--fonte-titulo); font-size: var(--t-2xl); margin: 0 0 var(--e-xs); line-height: 1.14; }
.subtitle { color: var(--cor-texto-suave); font-size: var(--t-lg); margin: 0 0 var(--e-md); max-width: var(--largura-leitura); }
/* .prosa trava a linha em 60–70 caracteres: leitura, não parede de texto. */
.prosa { max-width: var(--largura-leitura); }
.prosa > :last-child { margin-bottom: 0; }
.eyebrow {
  text-transform: uppercase; letter-spacing: .18em;
  font-size: var(--t-xs); color: var(--cor-acento-escuro); font-weight: 700;
}
.muted { color: var(--cor-texto-suave); }
.text-sm { font-size: var(--t-sm); }
.text-center { text-align: center; }

.frase-conceito {
  font-family: var(--fonte-script);
  color: var(--rosa-forte);
  font-size: clamp(1.25rem, 4vw, 1.8rem);
  line-height: 1.45;
  font-weight: 600;
  margin: 0;
}
.frase-conceito--sm { font-size: 1.15rem; }

.assinatura {
  font-family: var(--fonte-titulo);
  text-transform: uppercase;
  letter-spacing: .06em;
  font-weight: 600;
  color: var(--marrom);
  white-space: nowrap;
}
.assinatura__rosa, .assinatura em { color: var(--rosa-forte); font-style: normal; }

.money { font-variant-numeric: tabular-nums; font-weight: 700; color: var(--cor-texto); white-space: nowrap; }
.money--old { color: var(--cor-texto-fraco); font-weight: 400; text-decoration: line-through; margin-left: var(--e-xs); }
.money--big { font-size: var(--t-2xl); font-family: var(--fonte-titulo); color: var(--cor-acento-escuro); }
.money--negativo { color: var(--cor-perigo); }

/* --------------------------------------------------------------- marca --- */
.logo { display: block; width: 190px; height: auto; }
.logo--sm { width: 132px; }
.logo--lg { width: min(280px, 70vw); }
.logo--simbolo { width: 48px; color: var(--marrom); }

.circulo-icone {
  flex: none;
  display: grid; place-items: center;
  width: 64px; height: 64px;
  border-radius: var(--r-full);
  background: var(--rosa-claro);
  color: var(--rosa-forte);
  transition: background var(--transicao), transform var(--transicao);
}
.circulo-icone > svg, .circulo-icone > img { width: 55%; height: auto; }
.circulo-icone--sm { width: 44px; height: 44px; }
.circulo-icone--lg { width: 88px; height: 88px; }
.circulo-icone--forte { background: var(--rosa-medio); color: var(--marrom); }
a:hover > .circulo-icone, .card:hover .circulo-icone { background: var(--rosa-medio); }

.ilustra { color: var(--marrom); width: 100%; height: auto; }
.ilustra--rosa { color: var(--rosa-forte); }

.selo-fase {
  display: inline-flex; align-items: center; gap: 6px;
  padding: 4px 14px; border-radius: var(--r-full);
  font-size: var(--t-xs); font-weight: 700; letter-spacing: .06em; text-transform: uppercase;
  background: var(--rosa-claro); color: var(--cor-acento-escuro);
  white-space: nowrap;
}
/* As 4 fases são pares: quem diferencia é a PALAVRA e o desenho, não o fundo.
   O bege sobre cartão branco era um selo quase invisível, e o rosa-médio fazia
   o cartão do meio pesar mais que os irmãos. */
.selo-fase--gestacao     { background: var(--rosa-claro);  color: var(--rosa-texto); }
.selo-fase--amamentacao  { background: var(--rosa-claro);  color: var(--rosa-texto); }
.selo-fase--pos-parto    { background: var(--rosa-claro);  color: var(--rosa-texto); }
.selo-fase--mamae-bebe   { background: var(--rosa-claro);  color: var(--rosa-texto); }

/* -------------------------------------------------------------- botões --- */
.btn {
  display: inline-flex; align-items: center; justify-content: center; gap: var(--e-sm);
  min-height: 48px; padding: 0 var(--e-lg);
  border: 1px solid transparent; border-radius: var(--r-full);
  font: inherit; font-size: var(--t-sm); font-weight: 700; letter-spacing: .04em;
  cursor: pointer; text-decoration: none; text-align: center;
  transition: background var(--transicao), color var(--transicao),
              border-color var(--transicao), box-shadow var(--transicao), transform var(--transicao);
}
.btn:hover { text-decoration: none; }
.btn:active { transform: translateY(1px); }
.btn[disabled], .btn.is-loading { opacity: .5; pointer-events: none; }

/* primário = rosa-texto (branco sobre ele passa em AA, o rosa-forte não passa) */
.btn--primary { background: var(--rosa-texto); color: var(--cor-sobre-rosa); box-shadow: var(--s-sm); }
.btn--primary:hover { background: var(--rosa-texto-hover); box-shadow: var(--s-md); }
.btn--ghost { background: transparent; color: var(--marrom); border-color: var(--cor-borda-forte); }
.btn--ghost:hover { background: var(--rosa-claro); border-color: var(--rosa-medio); }
.btn--danger { background: var(--cor-perigo); color: #fff; }
.btn--danger:hover { filter: brightness(.94); }
.btn--block { display: flex; width: 100%; }
.btn--sm { min-height: 38px; padding: 0 var(--e-md); font-size: var(--t-xs); }
/* dedo é maior que cursor: em tela de toque nenhum botão desce de 44px */
@media (pointer: coarse) { .btn--sm { min-height: 44px; } }

/* --------------------------------------------------------- superfícies --- */
.card {
  background: var(--cor-superficie);
  border: 1px solid var(--cor-borda);
  border-radius: var(--r-md);
  box-shadow: var(--s-sm);
  overflow: hidden;
  transition: box-shadow var(--transicao), transform var(--transicao);
}
.card__header { padding: var(--e-md); border-bottom: 1px solid var(--cor-borda); font-weight: 700; font-family: var(--fonte-titulo); font-size: var(--t-lg); }
.card__body { padding: var(--e-md); }
.card__footer { padding: var(--e-md); border-top: 1px solid var(--cor-borda); background: var(--rosa-claro); }
.panel { background: var(--cor-superficie); border-radius: var(--r-md); padding: var(--e-lg); box-shadow: var(--s-sm); border: 1px solid var(--cor-borda); }
.chip {
  display: inline-flex; align-items: center; gap: var(--e-xs);
  padding: 4px 12px; border-radius: var(--r-full);
  background: var(--rosa-claro); color: var(--cor-acento-escuro); font-size: var(--t-xs); font-weight: 600;
}

/* ---------------------------------------------------------- formulário --- */
.field { display: flex; flex-direction: column; gap: 6px; margin-bottom: var(--e-md); }
.field__label { font-size: var(--t-sm); font-weight: 700; color: var(--cor-texto); }
.field__hint { font-size: var(--t-xs); color: var(--cor-texto-fraco); }
.field__error { font-size: var(--t-xs); color: var(--cor-perigo); font-weight: 600; }
/* .field--inline aparece SEM .field em alguns lugares (os rádios de frete no
   checkout), e sem display:flex as opções corriam em texto corrido. */
.field--inline {
  display: flex; flex-direction: row; align-items: flex-start;
  gap: var(--e-sm); margin-bottom: var(--e-sm);
}
.field--inline input[type="radio"], .field--inline input[type="checkbox"] { flex: 0 0 auto; margin-top: 5px; }
.field-row { display: grid; gap: var(--e-md); }
@media (min-width: 768px) { .field-row { grid-template-columns: repeat(2, minmax(0, 1fr)); } }

input[type="text"], input[type="email"], input[type="password"], input[type="tel"],
input[type="number"], input[type="search"], input[type="url"], input[type="date"],
input[type="datetime-local"], select, textarea {
  width: 100%;
  min-height: 48px;
  padding: 11px var(--e-md);
  border: 1px solid var(--cor-borda-forte);
  border-radius: var(--r-sm);
  background: var(--cor-superficie);
  color: var(--cor-texto);
  font: inherit;
  font-size: 16px; /* evita zoom no iOS */
  transition: border-color var(--transicao), box-shadow var(--transicao);
}
textarea { min-height: 120px; resize: vertical; }
select {
  appearance: none;
  background-image: linear-gradient(45deg, transparent 50%, var(--marrom) 50%), linear-gradient(135deg, var(--marrom) 50%, transparent 50%);
  background-position: calc(100% - 18px) 21px, calc(100% - 13px) 21px;
  background-size: 5px 5px, 5px 5px; background-repeat: no-repeat; padding-right: var(--e-xl);
}
input:focus, select:focus, textarea:focus { outline: none; border-color: var(--rosa-forte); box-shadow: 0 0 0 3px var(--rosa-claro); }
input[type="checkbox"], input[type="radio"] { width: 18px; height: 18px; accent-color: var(--rosa-forte); }
.field--erro input, .field--erro select, .field--erro textarea { border-color: var(--cor-perigo); }
.field_with_errors { display: contents; }
.field_with_errors input, .field_with_errors select, .field_with_errors textarea { border-color: var(--cor-perigo); }

/* ------------------------------------------------------------- badges --- */
.badge {
  display: inline-flex; align-items: center; gap: 6px;
  padding: 3px 11px; border-radius: var(--r-full);
  font-size: var(--t-xs); font-weight: 700; line-height: 1.7;
  background: var(--rosa-claro); color: var(--cor-acento-escuro);
  white-space: nowrap;
}
.badge--neutro { background: var(--bege); color: var(--cor-texto-suave); }
.badge--alerta { background: var(--cor-ambar-claro); color: var(--cor-ambar); }

/* estados de Item */
.badge--rascunho   { background: var(--bege);             color: var(--cor-texto-fraco); }
.badge--publicado  { background: var(--cor-oliva-claro);  color: var(--cor-oliva); }
.badge--reservado  { background: var(--cor-ambar-claro);  color: var(--cor-ambar); }
.badge--vendido    { background: var(--rosa-medio);       color: var(--marrom); }
.badge--devolvido  { background: var(--bege);             color: var(--cor-texto-suave); }
.badge--descartado { background: var(--cor-perigo-claro); color: var(--cor-perigo); }

/* estados de Submission */
.badge--recebido    { background: var(--bege);             color: var(--cor-texto-suave); }
.badge--pre-triado  { background: var(--cor-ambar-claro);  color: var(--cor-ambar); }
.badge--em-triagem  { background: var(--rosa-claro);       color: var(--cor-acento-escuro); }
.badge--concluido   { background: var(--cor-oliva-claro);  color: var(--cor-oliva); }
.badge--cancelado   { background: var(--cor-perigo-claro); color: var(--cor-perigo); }

/* desconto na vitrine NÃO é estado: é mensagem de venda, e fala rosa */
.badge--desconto { background: var(--rosa-texto); color: #fff; }
/* .badge--novidade é o selo DISCRETO da vitrine ("nova com etiqueta",
   "acabou de chegar"): branco sobre a foto, nada de porcentagem gritada. */
.badge--novidade {
  background: var(--cor-superficie); color: var(--marrom);
  letter-spacing: .04em; box-shadow: var(--s-sm);
}

/* vereditos — comprar é o padrão do modelo, por isso o rosa da marca */
.badge--comprar   { background: var(--rosa-texto);       color: #fff; }
.badge--consignar { background: var(--bege);             color: var(--cor-texto-suave); }
.badge--recusar   { background: var(--cor-perigo-claro); color: var(--cor-perigo); }

/* payouts */
.badge--pendente { background: var(--cor-ambar-claro);  color: var(--cor-ambar); }
.badge--pago     { background: var(--cor-oliva-claro);  color: var(--cor-oliva); }
.badge--credito  { background: var(--rosa-claro);       color: var(--cor-acento-escuro); }

/* ------------------------------------------------------- grade de peças --- */
.grid-pecas { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: var(--e-md); }
@media (min-width: 768px)  { .grid-pecas { grid-template-columns: repeat(3, minmax(0, 1fr)); gap: var(--e-lg); } }
@media (min-width: 1100px) { .grid-pecas { grid-template-columns: repeat(4, minmax(0, 1fr)); } }

/* Cartão em coluna de altura cheia: o título ocupa SEMPRE duas linhas e o
   preço encosta na base, então os preços da fileira batem na mesma altura. */
.peca { display: flex; flex-direction: column; height: 100%; color: inherit; }
.peca:hover { text-decoration: none; }
.peca:hover .photo-frame img { transform: scale(1.04); }
.peca:hover .peca__title { color: var(--cor-acento-escuro); }
.peca__info { padding: var(--e-sm) 2px 0; display: flex; flex-direction: column; flex: 1 1 auto; }
.peca__title {
  font-family: var(--fonte-corpo); font-size: var(--t-sm); font-weight: 600;
  line-height: 1.35; margin: 0 0 2px; transition: color var(--transicao);
  display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical;
  overflow: hidden; min-height: calc(2 * 1.35em);
}
.peca__meta { font-size: .82rem; color: var(--cor-texto-fraco); margin: 0 0 var(--e-xs); min-height: 1.5em; }
.peca__info > :last-child { margin-top: auto; }

/* ------------------------------------------------------------- fotos --- */
.photo-frame {
  position: relative;
  aspect-ratio: 3 / 4;
  background: var(--rosa-claro);
  border-radius: var(--r-md);
  overflow: hidden;
}
.photo-frame img { width: 100%; height: 100%; object-fit: cover; transition: transform var(--transicao-lenta); }
.photo-frame--square { aspect-ratio: 1 / 1; }
.photo-frame--tall   { aspect-ratio: 2 / 3; }
.photo-frame--thumb  { aspect-ratio: 1 / 1; border-radius: var(--r-sm); }
.photo-frame__tag { position: absolute; top: var(--e-sm); left: var(--e-sm); }

/* peça sem foto — cabide desenhado sobre rosa, nada de emoji */
.photo-frame__vazio {
  position: absolute; inset: 0;
  display: flex; flex-direction: column; align-items: center; justify-content: center; gap: var(--e-sm);
  background: linear-gradient(160deg, var(--rosa-claro), var(--bege));
  color: var(--rosa-forte); text-align: center; padding: var(--e-md);
}
.photo-frame__vazio-icone { width: 42%; max-width: 84px; color: var(--rosa-forte); opacity: .85; }
.photo-frame__vazio-icone svg, .photo-frame__vazio-icone img { width: 100%; height: auto; }
.photo-frame__vazio-texto {
  font-size: var(--t-xs); text-transform: uppercase; letter-spacing: .16em;
  font-weight: 700; color: var(--cor-texto-fraco);
}

.photo-grid { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: var(--e-sm); }
@media (min-width: 768px) { .photo-grid { grid-template-columns: repeat(5, minmax(0, 1fr)); } }
.photo-remove {
  position: absolute; top: 4px; right: 4px;
  width: 26px; height: 26px; display: grid; place-items: center;
  border: 0; border-radius: var(--r-full);
  background: rgba(108, 91, 91, .78); color: #fff; font-size: 15px; line-height: 1; cursor: pointer;
}

/* -------------------------------------------------------------- flash --- */
@media (min-width: 768px) { :root { --altura-topo: 68px; } }

.flash-wrap {
  /* abaixo do cabeçalho: cobrindo a logo/menu/contador da sacola, o aviso de
     reserva escondia justamente a prova de que deu certo. */
  position: fixed; top: calc(var(--altura-topo) + var(--e-sm)); left: 50%; transform: translateX(-50%); z-index: var(--z-flash);
  width: min(560px, calc(100% - 2 * var(--e-md))); display: flex; flex-direction: column; gap: var(--e-sm);
}
.flash {
  display: flex; align-items: flex-start; gap: var(--e-sm);
  padding: var(--e-md); border-radius: var(--r-md);
  background: var(--cor-superficie); border: 1px solid var(--cor-borda);
  box-shadow: var(--s-md); font-size: var(--t-sm);
}
.flash--notice { border-color: var(--cor-oliva);  background: var(--cor-oliva-claro);  color: var(--cor-oliva-texto); }
.flash--alert  { border-color: var(--cor-perigo); background: var(--cor-perigo-claro); color: var(--cor-perigo); }
.flash__close { margin-left: auto; border: 0; background: transparent; cursor: pointer; font-size: var(--t-md); color: inherit; opacity: .6; }
.flash.is-leaving { opacity: 0; transform: translateY(-8px); transition: opacity var(--transicao), transform var(--transicao); }

/* ------------------------------------------------------------ tabelas --- */
.table-wrap { overflow-x: auto; -webkit-overflow-scrolling: touch; border-radius: var(--r-md); }
.table { width: 100%; border-collapse: collapse; font-size: var(--t-sm); background: var(--cor-superficie); }
.table th, .table td { padding: var(--e-sm) var(--e-md); text-align: left; border-bottom: 1px solid var(--cor-borda); vertical-align: middle; }
.table th { font-size: var(--t-xs); text-transform: uppercase; letter-spacing: .1em; color: var(--cor-texto-fraco); font-weight: 700; white-space: nowrap; }
.table tbody tr { transition: background var(--transicao); }
.table tbody tr:hover { background: var(--rosa-claro); }
.table td.num, .table th.num { text-align: right; font-variant-numeric: tabular-nums; }

/* --------------------------------------------------------------- tabs --- */
.tabs { display: flex; gap: var(--e-xs); overflow-x: auto; border-bottom: 1px solid var(--cor-borda); margin-bottom: var(--e-lg); }
.tab {
  padding: var(--e-sm) var(--e-md); white-space: nowrap;
  color: var(--cor-texto-suave); font-size: var(--t-sm); font-weight: 700;
  border-bottom: 2px solid transparent;
  transition: color var(--transicao), border-color var(--transicao);
}
.tab:hover { text-decoration: none; color: var(--marrom); }
.tab.is-active { color: var(--cor-acento-escuro); border-bottom-color: var(--rosa-forte); }

/* -------------------------------------------------------- empty state --- */
.empty-state { text-align: center; padding: var(--e-2xl) var(--e-md); color: var(--cor-texto-suave); }
.empty-state__icon { width: 76px; margin: 0 auto var(--e-md); color: var(--rosa-forte); font-size: 2.2rem; line-height: 1; }
.empty-state__icon svg, .empty-state__icon img { width: 100%; height: auto; }
.empty-state__title { font-family: var(--fonte-titulo); font-size: var(--t-xl); color: var(--marrom); margin-bottom: var(--e-xs); }
.empty-state__text { max-width: 42ch; margin: 0 auto var(--e-lg); }

/* ----------------------------------------------------------- countdown --- */
.countdown {
  display: inline-flex; align-items: center; gap: 6px;
  font-variant-numeric: tabular-nums; font-weight: 700;
  padding: 4px 12px; border-radius: var(--r-full);
  background: var(--cor-ambar-claro); color: var(--cor-ambar); font-size: var(--t-sm);
}
.countdown.is-urgent { background: var(--cor-perigo-claro); color: var(--cor-perigo); }
.countdown.is-over   { background: var(--bege); color: var(--cor-texto-fraco); }

/* ================================ LOJA: header / footer =================== */
.topo {
  position: sticky; top: 0; z-index: var(--z-topo);
  background: rgba(239, 228, 219, .92);
  backdrop-filter: blur(10px);
  border-bottom: 1px solid var(--cor-borda);
}
.topo__inner { display: flex; align-items: center; gap: var(--e-md); min-height: var(--altura-topo); }
.topo__logo { display: flex; align-items: center; flex: none; }
.topo__logo:hover { text-decoration: none; }
.topo__logo img, .topo__logo svg { width: 168px; height: auto; }
@media (max-width: 520px) { .topo__logo img, .topo__logo svg { width: 132px; } }
/* No celular o cabeçalho CABE em uma linha em vez de quebrar em duas (que
   comia 93px fixos de tela, com a logo sozinha em cima). Logo menor + gap e
   fonte menores na nav: sobra folga até em 360px. */
@media (max-width: 600px) {
  .topo__inner { flex-wrap: nowrap; gap: var(--e-sm); }
  /* A nav vira um trilho: com 4 links ela cabe e fica encostada à direita;
     logada (6 links) ela rola em vez de quebrar a linha ou espremer palavra. */
  .topo__nav {
    flex: 1 1 auto; min-width: 0; gap: 11px; flex-wrap: nowrap;
    justify-content: flex-end; font-size: 13px;
    overflow-x: auto; scrollbar-width: none;
  }
  .topo__nav::-webkit-scrollbar { display: none; }
  .topo__nav > * { flex: 0 0 auto; }
  .topo__nav a { min-height: 44px; white-space: nowrap; }
  .topo__logo img, .topo__logo svg { width: 96px; }
}
.topo__nav { display: flex; align-items: center; gap: var(--e-md); margin-left: auto; font-size: var(--t-sm); font-weight: 700; }
.topo__nav a { color: var(--marrom); display: inline-flex; align-items: center; min-height: 44px; }
/* `.topo__nav a` (0,1,1) vencia `.only-desktop` (0,1,0): os links de desktop
   apareciam no celular e estouravam o cabeçalho em 144px. */
.topo__nav a.only-desktop { display: none; }
@media (min-width: 768px) { .topo__nav a.only-desktop { display: inline-flex; } }
.topo__nav a:hover { color: var(--cor-acento-escuro); text-decoration: none; }
.topo__sacola { position: relative; display: inline-flex; align-items: center; gap: 6px; }
.topo__contador {
  min-width: 20px; height: 20px; padding: 0 6px;
  display: inline-grid; place-items: center;
  border-radius: var(--r-full); background: var(--rosa-texto); color: #fff;
  font-size: 11px; font-weight: 800;
}

.rodape {
  border-top: 1px solid var(--cor-borda);
  margin-top: var(--e-3xl);
  padding: var(--e-2xl) 0 var(--e-xl);
  color: var(--cor-texto-suave);
  font-size: var(--t-sm);
  background: var(--rosa-claro);
}
.rodape__grid { display: grid; gap: var(--e-lg); align-items: start; }
@media (min-width: 768px) { .rodape__grid { grid-template-columns: minmax(0, 1.2fr) minmax(0, 1fr) minmax(0, 1fr); gap: var(--e-2xl); } }
.rodape__logo img, .rodape__logo svg { width: 190px; height: auto; }
.rodape__titulo { font-family: var(--fonte-titulo); font-size: var(--t-lg); color: var(--marrom); margin: 0 0 var(--e-xs); }
.rodape__links { display: flex; flex-direction: column; gap: var(--e-xs); }
.rodape__links a { color: var(--marrom); display: inline-flex; align-items: center; min-height: 44px; }
.rodape__fim {
  margin-top: var(--e-xl); padding-top: var(--e-md);
  border-top: 1px solid var(--cor-borda);
  display: flex; flex-wrap: wrap; gap: var(--e-sm); justify-content: space-between;
  font-size: var(--t-xs); color: var(--cor-texto-fraco);
}

/* ================================ ADMIN ================================== */
.admin { min-height: 100vh; background: var(--bege); }
.admin__layout { display: block; }
.admin__side { display: flex; flex-wrap: wrap; gap: var(--e-xs); background: var(--marrom); padding: var(--e-sm); }
.admin__brand { display: none; }
.admin__brand .logo--simbolo { width: 34px; }
.admin__link {
  display: flex; align-items: center; gap: var(--e-sm); white-space: nowrap;
  padding: var(--e-sm) var(--e-md); border-radius: var(--r-sm);
  color: rgba(255,255,255,.88); font-size: var(--t-sm); font-weight: 700;
  transition: background var(--transicao), color var(--transicao);
}
/* Sair é um <button> (button_to): sem este reset ele vinha com o cinza,
   a borda outset e a fonte do navegador — branco sobre #EFEFEF, ilegível. */
button.admin__link {
  appearance: none; -webkit-appearance: none;
  background: transparent; border: 0; font: inherit;
  font-size: var(--t-sm); font-weight: 700; text-align: left; cursor: pointer;
  color: rgba(255,255,255,.88);
}
.admin__link:hover { text-decoration: none; background: rgba(255,255,255,.1); color: #fff; }
.admin__link.is-active { background: var(--rosa-texto); color: #fff; }
.admin__main { padding: var(--e-lg) var(--e-md); }
/* No celular a barra é uma tira: os itens do rodapé entram na mesma linha
   (display:contents) e quebram junto — nada fica escondido fora da borda. */
.admin__foot { display: contents; }

@media (min-width: 900px) {
  .admin__layout { display: grid; grid-template-columns: 232px minmax(0, 1fr); min-height: 100vh; }
  .admin__side { flex-direction: column; flex-wrap: nowrap; overflow: visible; padding: var(--e-md); position: sticky; top: 0; height: 100vh; }
  .admin__foot { display: block; margin-top: auto; padding: var(--e-md) 0 0; color: rgba(255,255,255,.5); font-size: var(--t-xs); }
  .admin__brand {
    display: flex; align-items: center; gap: var(--e-sm);
    padding: var(--e-sm) var(--e-md) var(--e-lg);
    color: #fff; font-size: var(--t-lg);
  }
  .admin__brand .assinatura { color: #fff; font-size: var(--t-lg); }
  .admin__brand .assinatura__rosa { color: var(--rosa-medio); }
  .admin__main { padding: var(--e-xl); }
}

.stat-grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: var(--e-md); }
@media (min-width: 900px) { .stat-grid { grid-template-columns: repeat(4, minmax(0, 1fr)); } }
.stat { background: var(--cor-superficie); border: 1px solid var(--cor-borda); border-radius: var(--r-md); padding: var(--e-md); box-shadow: var(--s-sm); }
.stat__label { font-size: var(--t-xs); text-transform: uppercase; letter-spacing: .12em; color: var(--cor-texto-fraco); font-weight: 700; }
.stat__value { font-family: var(--fonte-titulo); font-size: var(--t-2xl); color: var(--marrom); }

/* ================================ AUTH (devise) ========================== */
.auth {
  /* padding-top reserva a faixa do .flash-wrap (fixed): a assinatura nunca
     fica debaixo do aviso, que é justamente o que aparece no redirect. */
  min-height: 100vh; display: grid; place-items: center;
  padding: calc(var(--e-lg) + 76px) var(--e-md) var(--e-lg);
  background: radial-gradient(circle at 50% 0%, var(--rosa-claro), var(--bege) 62%);
}
.auth__box { width: 100%; max-width: 420px; }
.auth__logo { display: block; margin: 0 auto var(--e-lg); width: min(240px, 66vw); }
.auth__logo:hover { text-decoration: none; }
.auth__frase { text-align: center; margin: 0 0 var(--e-lg); }
.auth__links { margin-top: var(--e-md); text-align: center; font-size: var(--t-sm); display: flex; flex-direction: column; gap: var(--e-xs); }

/* ------------------------------------------------------------ helpers --- */
.hidden { display: none !important; }
.only-desktop { display: none; }
@media (min-width: 768px) { .only-desktop { display: initial; } .only-mobile { display: none; } }

/* ==========================================================================
   FATIA: LOJA PÚBLICA (landing, vitrine, peça, sacola)
   .hero, .como, .convite, .filtros, .paginacao, .peca-acao, .peca-pagina,
   .sacola, .vitrine__contagem
   ========================================================================== */

.hero { padding: var(--e-xl) 0 var(--e-lg); }
.hero__texto { max-width: 62ch; }
.hero__titulo { font-family: var(--fonte-titulo); font-size: clamp(2.2rem, 8vw, 4rem); line-height: 1.08; margin: 0; }
.hero__titulo em { font-style: italic; color: var(--rosa-forte); }
.hero__lead { font-size: var(--t-lg); color: var(--cor-texto-suave); max-width: 54ch; margin: 0; }
@media (min-width: 768px) { .hero { padding: var(--e-2xl) 0 var(--e-xl); } }

.como { display: grid; gap: var(--e-md); grid-template-columns: 1fr; }
@media (min-width: 700px) { .como { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: var(--e-lg); } }
@media (min-width: 1000px) { .como { grid-template-columns: repeat(4, minmax(0, 1fr)); } }
.como__bloco .card__body { display: flex; flex-direction: column; gap: var(--e-sm); height: 100%; }
.como__titulo { font-family: var(--fonte-titulo); font-size: var(--t-xl); margin: 0; }
.como__bloco .btn { align-self: flex-start; margin-top: auto; }

.convite {
  background: var(--rosa-claro);
  border-radius: var(--r-lg);
  padding: var(--e-2xl) var(--e-md);
  text-align: center;
}
.convite__titulo { font-family: var(--fonte-titulo); font-size: var(--t-2xl); margin: 0 0 var(--e-xs); }
.convite__texto { color: var(--cor-texto-suave); max-width: 46ch; margin: 0 auto var(--e-md); }

.filtros {
  background: var(--cor-superficie);
  border: 1px solid var(--cor-borda);
  border-radius: var(--r-md);
  padding: var(--e-md);
  margin-bottom: var(--e-lg);
}
.filtros__busca { margin-bottom: var(--e-md); }
.filtros__linha { display: grid; gap: var(--e-sm); grid-template-columns: repeat(2, minmax(0, 1fr)); }
@media (min-width: 768px)  { .filtros__linha { grid-template-columns: repeat(4, minmax(0, 1fr)); } }
@media (min-width: 1100px) { .filtros__linha { grid-template-columns: repeat(6, minmax(0, 1fr)); } }
.filtros .field { margin-bottom: 0; }
.filtros select, .filtros input { min-height: 44px; padding-block: 9px; font-size: var(--t-sm); }
/* faixa de preço: um campo só, dois números lado a lado */
.filtros__faixa { display: flex; align-items: center; gap: 6px; }
.filtros__faixa input { min-width: 0; }
.filtros__faixa span { flex: 0 0 auto; color: var(--cor-texto-fraco); }
.filtros__acoes { display: flex; gap: var(--e-sm); margin-top: var(--e-sm); }

.vitrine__contagem { margin: 0 0 var(--e-md); }

.paginacao { display: flex; align-items: center; justify-content: center; gap: var(--e-md); margin-top: var(--e-xl); flex-wrap: wrap; }
.paginacao__info { color: var(--cor-texto-fraco); }

.peca-pagina__grid { display: grid; gap: var(--e-lg); margin-top: var(--e-md); }
@media (min-width: 900px) { .peca-pagina__grid { grid-template-columns: minmax(0, 1.1fr) minmax(0, 1fr); gap: var(--e-2xl); } }
.peca-pagina__fotos { display: flex; flex-direction: column; gap: var(--e-sm); }
/* min-width:0 impede o texto longo de esticar a coluna e estourar a grade. */
.peca-pagina__info { min-width: 0; }

/* --------------------------------------------- grade automática, um lugar só
   A home e o convite de "vender" inventaram, cada um, a mesma
   `repeat(auto-fit, minmax(N, 1fr))` inline. Agora é uma classe com o mínimo
   por custom property: `class="grid-auto" style="--min: 240px"`. */
.grid-auto {
  display: grid;
  gap: var(--e-lg);
  grid-template-columns: repeat(auto-fit, minmax(var(--min, 240px), 1fr));
}
.grid-auto--sm { gap: var(--e-md); }
.peca-acao {
  display: flex; flex-direction: column; gap: var(--e-sm);
  background: var(--cor-superficie); border: 1px solid var(--cor-borda);
  border-radius: var(--r-md); padding: var(--e-md);
}
.peca-acao p { margin: 0; }
.peca-acao__guardada { display: flex; flex-direction: column; gap: var(--e-sm); }
.peca-acao form { margin: 0; }

.sacola { display: grid; gap: var(--e-lg); align-items: start; }
@media (min-width: 900px) { .sacola { grid-template-columns: minmax(0, 1fr) 320px; } }
.sacola__lista { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: var(--e-sm); }
.sacola__linha {
  display: grid; grid-template-columns: 72px minmax(0, 1fr); gap: var(--e-md);
  align-items: center;
  background: var(--cor-superficie); border: 1px solid var(--cor-borda);
  border-radius: var(--r-md); padding: var(--e-sm);
}
@media (min-width: 600px) { .sacola__linha { grid-template-columns: 88px minmax(0, 1fr) auto; } }
.sacola__foto { display: block; }
.sacola__foto:hover { text-decoration: none; }
.sacola__dados p { margin: 0 0 4px; }
.sacola__valor {
  grid-column: 1 / -1;
  display: flex; align-items: center; justify-content: space-between; gap: var(--e-sm);
  border-top: 1px solid var(--cor-borda); padding-top: var(--e-sm);
}
@media (min-width: 600px) {
  .sacola__valor { grid-column: auto; flex-direction: column; align-items: flex-end; border-top: 0; padding-top: 0; }
}
.sacola__valor form { margin: 0; }
.sacola__resumo { position: sticky; top: 84px; }

/* ==========================================================================
   MOVIMENTO — discreto e macio. Nada de bounce.
   Tudo aqui só existe quando o sistema NÃO pede movimento reduzido.
   ========================================================================== */
.reveal { opacity: 1; }

@media (prefers-reduced-motion: no-preference) {
  /* revelar ao rolar (Stimulus: data-controller="reveal") */
  .reveal {
    opacity: 0;
    transform: translateY(14px);
    transition: opacity 420ms ease, transform 420ms cubic-bezier(.22, .61, .36, 1);
  }
  .reveal.is-visible { opacity: 1; transform: none; }

  /* hover só onde existe cursor: no toque o :hover fica "grudado" */
  @media (hover: hover) { .card:hover { box-shadow: var(--s-md); transform: translateY(-2px); } }

  .flash { animation: flash-in 260ms cubic-bezier(.22, .61, .36, 1); }
  @keyframes flash-in { from { opacity: 0; transform: translateY(-10px); } to { opacity: 1; transform: none; } }

  /* pulso ÚNICO do coração do cabide, na entrada */
  .logo__coracao {
    transform-box: fill-box;
    transform-origin: 50% 55%;
    animation: coracao-pulso 1400ms cubic-bezier(.22, .61, .36, 1) 320ms 1 both;
  }
  @keyframes coracao-pulso {
    0%   { transform: scale(1); }
    28%  { transform: scale(1.14); }
    52%  { transform: scale(.98); }
    100% { transform: scale(1); }
  }

  /* giro lento do ciclo ao entrar em tela */
  .ciclo-gira { transform-origin: 50% 50%; }
  .ciclo-gira.is-visible { animation: ciclo-giro 2600ms cubic-bezier(.33, 0, .2, 1) 1 both; }
  @keyframes ciclo-giro { from { transform: rotate(-160deg); } to { transform: rotate(0deg); } }
}

@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { animation-duration: .01ms !important; animation-iteration-count: 1 !important; transition-duration: .01ms !important; }
}

/* ==========================================================================
   FATIA: CHECKOUT, CONTA E AUTENTICAÇÃO
   .passo (passos do checkout), .pix (tela do PIX), .carteira (saldo em
   destaque), .erro-pagina (404 e afins). Tudo em cima dos tokens da marca.
   ========================================================================== */

/* ----------------------------------------------------- passos do checkout --- */
.passo { border: 1px solid var(--cor-borda); }
.passo .card__header { display: flex; align-items: center; gap: var(--e-sm); }
.passo__num {
  flex: 0 0 auto; width: 30px; height: 30px; display: grid; place-items: center;
  border-radius: var(--r-full); background: var(--rosa-claro);
  color: var(--cor-acento-escuro); font-family: var(--fonte-titulo);
  font-size: var(--t-md); font-weight: 700; line-height: 1;
}
.passo__num--ok { background: var(--rosa-forte); color: var(--cor-sobre-rosa); }
.passo__titulo { margin: 0; }
.passo__resumo { margin-left: auto; font-size: var(--t-sm); color: var(--cor-texto-fraco); text-align: right; }

.checkout-item { display: flex; align-items: center; gap: var(--e-md); }
.checkout-item__info { min-width: 0; }
.checkout-item .photo-frame { flex: 0 0 auto; }

.reserva-aviso {
  display: flex; gap: var(--e-sm); align-items: flex-start;
  background: var(--rosa-claro); border-radius: var(--r-md);
  padding: var(--e-md); color: var(--cor-texto-suave); font-size: var(--t-sm);
}
.reserva-aviso strong { color: var(--marrom); }
/* .ilustra é width:100% e vencia o size do image_tag: dentro do flex ela comia
   metade da largura e o texto caía com uma palavra por linha. */
.reserva-aviso > .ilustra, .reserva-aviso > img.ilustra {
  flex: 0 0 32px; width: 32px; height: 32px; color: var(--rosa-forte);
}
.reserva-aviso > div { flex: 1 1 auto; min-width: 0; }

/* --------------------------------------------------------- tela do PIX --- */
.pix { text-align: center; }
.pix__qr {
  display: inline-block; background: var(--cor-superficie); padding: var(--e-md);
  border-radius: var(--r-lg); box-shadow: var(--s-sm);
  border: 1px solid var(--cor-borda);
}
.pix__qr img { display: block; width: min(300px, 72vw); height: auto; image-rendering: pixelated; }
.pix__valor { display: block; }
.pix__copia { text-align: left; }
.pix__copia input {
  font-family: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;
  font-size: var(--t-sm);
}
.pix__aviso {
  display: flex; align-items: center; justify-content: center; gap: var(--e-sm);
  background: var(--bege); border-radius: var(--r-md); padding: var(--e-sm) var(--e-md);
  color: var(--cor-texto-suave); font-size: var(--t-sm);
}
.pix__pulso {
  width: 9px; height: 9px; flex: 0 0 auto; border-radius: var(--r-full);
  background: var(--rosa-forte);
}
@media (prefers-reduced-motion: no-preference) {
  .pix__pulso { animation: pix-pulso 1800ms ease-in-out infinite; }
  @keyframes pix-pulso { 0%, 100% { opacity: .35; } 50% { opacity: 1; } }
}
.pix__passos { text-align: left; max-width: 40ch; margin: 0 auto; color: var(--cor-texto-suave); font-size: var(--t-sm); }
.pix__passos li { margin-bottom: var(--e-xs); }

/* ------------------------------------------------------------- carteira --- */
.carteira {
  background: linear-gradient(160deg, var(--rosa-claro), var(--bege));
  border: 1px solid var(--cor-borda);
  border-radius: var(--r-lg);
  padding: var(--e-lg);
  display: flex; align-items: center; gap: var(--e-md); flex-wrap: wrap;
}
.carteira__texto { flex: 1 1 200px; }
.carteira__label { font-size: var(--t-xs); text-transform: uppercase; letter-spacing: .12em; color: var(--cor-texto-fraco); font-weight: 700; }
.carteira__saldo { display: block; font-family: var(--fonte-titulo); font-size: clamp(2rem, 7vw, 2.8rem); color: var(--cor-acento-escuro); line-height: 1.1; }
.carteira__saldo .money { font-family: inherit; font-size: inherit; color: inherit; }
.carteira .circulo-icone { flex: 0 0 auto; }

/* --------------------------------------------------------- página de erro --- */
.erro-pagina { padding: var(--e-3xl) 0; }
.erro-pagina .empty-state__icon { width: 96px; }

/* ==========================================================================
   FATIA: LOJA — vitrine, peça e sacola (complemento do bloco "LOJA PÚBLICA")
   .sr-only, .fases/.fase, .chips/.chip--removivel, .peca__precos,
   .photo-frame__veu, .galeria, .peca-pagina__*, .sacola__empurrao
   Só tokens da paleta; movimento sempre dentro de prefers-reduced-motion.
   ========================================================================== */

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

/* -------------------------------------------------- seletor de fase (vitrine) */
.fases {
  border: 0; margin: 0 0 var(--e-md); padding: 0;
  display: grid; grid-template-columns: repeat(5, minmax(0, 1fr)); gap: var(--e-xs);
}
@media (max-width: 560px) {
  .fases { grid-template-columns: repeat(3, minmax(0, 1fr)); }
}
.fase {
  position: relative;
  display: flex; flex-direction: column; align-items: center; gap: 6px;
  padding: var(--e-sm) 4px; cursor: pointer; text-align: center;
  border: 1px solid transparent; border-radius: var(--r-md);
  color: var(--cor-texto-suave);
  transition: background var(--transicao), color var(--transicao), border-color var(--transicao);
}
.fase:hover { background: var(--rosa-claro); color: var(--marrom); }
.fase__radio { position: absolute; inset: 0 auto auto 0; opacity: 0; width: 1px; height: 1px; }
.fase__icone {
  width: 46px; height: 46px; display: grid; place-items: center;
  border-radius: var(--r-full); background: var(--rosa-claro);
  transition: background var(--transicao), transform var(--transicao);
}
.fase__icone img { width: 60%; height: auto; }
.fase__rotulo { font-size: var(--t-xs); font-weight: 700; line-height: 1.2; }
.fase.is-active { color: var(--rosa-texto); border-color: var(--rosa-medio); background: #fff; }
.fase.is-active .fase__icone { background: var(--rosa-medio); }
.fase__radio:focus-visible + .fase__icone { outline: 2px solid var(--marrom); outline-offset: 2px; box-shadow: 0 0 0 4px var(--rosa-medio); }

/* ------------------------------------------------------ chips de filtro ativo */
.chips { display: flex; flex-wrap: wrap; align-items: center; gap: var(--e-xs); margin: 0 0 var(--e-md); }
.chip--removivel {
  display: inline-flex; align-items: center; gap: var(--e-sm);
  min-height: 40px; padding: 6px 14px;
  background: var(--rosa-claro); color: var(--rosa-texto);
  border: 1px solid var(--rosa-medio); cursor: pointer;
  transition: background var(--transicao), color var(--transicao);
}
.chip--removivel:hover { background: var(--rosa-medio); color: var(--marrom); text-decoration: none; }
.chip__x { font-size: 1.15rem; line-height: 1; opacity: 1; width: 20px; text-align: center; }
/* "Limpar tudo" é a saída de emergência de um filtro que fechou demais:
   precisa de contraste e de área de toque, não de letrinha apagada. */
.chips__limpar {
  display: inline-flex; align-items: center; min-height: 40px; padding: 0 var(--e-sm);
  font-size: var(--t-sm); font-weight: 700; color: var(--rosa-texto); text-decoration: underline;
}

/* ------------------------------------------------------------ cartão da peça */
.peca__precos { display: flex; align-items: baseline; flex-wrap: wrap; gap: 6px; margin: 0; }
.peca__precos .money--old { margin-left: 0; }

/* véu de "já saiu" sobre a foto — elegante, sem tarja */
.photo-frame__veu {
  position: absolute; inset: 0; display: grid; place-items: center;
  background: rgba(108, 91, 91, .38);
}
.photo-frame__veu-texto {
  background: var(--cor-superficie); color: var(--marrom);
  font-family: var(--fonte-titulo); font-size: var(--t-md);
  letter-spacing: .06em; padding: 6px var(--e-md); border-radius: var(--r-full);
  box-shadow: var(--s-sm);
}

/* --------------------------------------------------------- galeria da peça */
.galeria { display: flex; flex-direction: column; gap: var(--e-sm); }
.galeria__palco img { transition: opacity 140ms ease; }
.galeria__palco img.is-trocando { opacity: 0; }
.galeria__miniatura {
  padding: 0; border: 1px solid var(--cor-borda); background: var(--rosa-claro);
  cursor: pointer; overflow: hidden;
}
.galeria__miniatura.is-ativa { border-color: var(--rosa-forte); box-shadow: 0 0 0 2px var(--rosa-medio); }
/* Miniaturas são menores que a grade de upload: cabem mais por linha. */
.galeria__miniaturas { grid-template-columns: repeat(auto-fill, minmax(64px, 1fr)); }

/* ------------------------------------------------------------ página da peça */
.peca-pagina__resumo { margin: 0; }
.peca-pagina__precos { display: flex; flex-direction: column; gap: 4px; }
.peca-pagina__precos .money--old { margin-left: 0; }
.peca-pagina__economia { display: flex; flex-wrap: wrap; align-items: center; gap: var(--e-xs); margin: 4px 0 0; }
.peca-acao__esgotada { display: flex; align-items: flex-start; gap: var(--e-sm); }
.peca-acao__esgotada-titulo { font-family: var(--fonte-titulo); font-size: var(--t-lg); color: var(--marrom); }

/* ----------------------------------------------------------------- sacola */
.sacola__empurrao {
  display: flex; align-items: center; gap: var(--e-sm);
  background: var(--rosa-claro); border-radius: var(--r-md);
  padding: var(--e-sm) var(--e-md); margin: 0;
  font-size: var(--t-sm); color: var(--cor-texto-suave);
}
.sacola__empurrao strong { color: var(--marrom); }
.sacola__empurrao .circulo-icone { flex: 0 0 auto; background: var(--cor-superficie); }
.sacola__subtotal { align-items: baseline; }

@media (prefers-reduced-motion: no-preference) {
  .fase:hover .fase__icone { transform: translateY(-2px); }
  .peca .photo-frame { transition: box-shadow var(--transicao), transform var(--transicao); }
  .peca:hover .photo-frame { box-shadow: var(--s-md); transform: translateY(-2px); }
  .galeria__miniatura { transition: box-shadow var(--transicao), border-color var(--transicao); }

  /* o contador do header nasce a cada troca do frame: pulsa uma vez */
  .topo__contador { animation: contador-pop 260ms cubic-bezier(.22, .61, .36, 1) both; }
  @keyframes contador-pop {
    from { transform: scale(.72); opacity: 0; }
    60%  { transform: scale(1.08); opacity: 1; }
    to   { transform: scale(1); opacity: 1; }
  }

  .sacola__linha { transition: box-shadow var(--transicao), border-color var(--transicao); }
  .sacola__linha:hover { border-color: var(--rosa-medio); box-shadow: var(--s-sm); }
}

/* ==========================================================================
   CORREÇÕES DA REVISÃO VISUAL — mobile e leitura
   ========================================================================== */

/* --- página da peça: no celular a foto não pode comer a tela inteira.
   Com 2/3 o preço e o "Quero essa peça" nasciam abaixo da dobra. --------- */
@media (max-width: 899px) {
  /* teto em vh: com 1/1 a foto ainda media 358px e empurrava o preço 21px
     abaixo da dobra do iPhone. Agora preço e "Quero essa peça" nascem na
     primeira tela em qualquer título de até 3 linhas. */
  .peca-pagina__fotos .photo-frame--tall { aspect-ratio: 1 / 1; max-height: 33vh; }
  .peca-pagina__fotos .galeria__palco img { object-position: top; }
  .peca-pagina__fotos { align-items: center; }
  .peca-pagina__fotos .galeria, .peca-pagina__fotos .galeria__palco { width: 100%; }
  .peca-pagina { padding-top: var(--e-md); }
  .peca-pagina__grid { margin-top: var(--e-sm); gap: var(--e-md); }
  .peca-pagina__info.stack { gap: var(--e-sm); }
}

/* --- vitrine: no celular só fase + busca ficam de pé; o resto é "Mais
   filtros". A mercadoria tem que aparecer na primeira tela. ------------- */
.filtros__mais { border-top: 1px solid var(--cor-borda); padding-top: var(--e-sm); }
.filtros__mais > summary {
  cursor: pointer; list-style: none;
  display: inline-flex; align-items: center; gap: 6px; min-height: 44px;
  font-size: var(--t-sm); font-weight: 700; color: var(--cor-acento-escuro);
}
.filtros__mais > summary::-webkit-details-marker { display: none; }
.filtros__mais > summary::after { content: "▾"; transition: transform var(--transicao); }
.filtros__mais[open] > summary::after { transform: rotate(180deg); }
.filtros__mais[open] > summary { margin-bottom: var(--e-sm); }
@media (min-width: 768px) {
  .filtros__mais { border-top: 0; padding-top: 0; }
  .filtros__mais > summary { display: none; }
}

/* --- campo de fotos: o input nativo é de 21px. Quem toca é o rótulo. --- */
.upload-foto {
  display: flex; align-items: center; justify-content: center; gap: var(--e-sm);
  min-height: 52px; width: 100%;
  border: 1px dashed var(--cor-borda-forte); border-radius: var(--r-md);
  background: var(--rosa-claro); color: var(--cor-acento-escuro);
  font-weight: 700; text-align: center; cursor: pointer; padding: var(--e-sm) var(--e-md);
  transition: background var(--transicao), border-color var(--transicao);
}
.upload-foto:hover { background: var(--rosa-medio); color: var(--marrom); }
input[type="file"]:focus-visible + .upload-foto { outline: 2px solid var(--cor-acento); outline-offset: 2px; }
/* fallback pra qualquer input de arquivo que apareça visível */
input[type="file"] { min-height: 48px; font-size: var(--t-sm); }
input[type="file"].sr-only { min-height: 0; }
input[type="file"]::file-selector-button {
  min-height: 40px; margin-right: var(--e-sm); padding: 0 var(--e-md);
  border: 0; border-radius: var(--r-full);
  background: var(--rosa-claro); color: var(--cor-acento-escuro);
  font: inherit; font-weight: 700; cursor: pointer;
}

/* --- tabelas de dinheiro viram cartões no celular: a coluna "Situação"
   ficava fora da tela, sem nenhuma pista de que a tabela rola. ---------- */
@media (max-width: 600px) {
  .table--cartoes { display: block; background: transparent; }
  .table--cartoes thead { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); }
  .table--cartoes tbody, .table--cartoes tr, .table--cartoes td { display: block; width: 100%; }
  .table--cartoes tr {
    background: var(--cor-superficie); border: 1px solid var(--cor-borda);
    border-radius: var(--r-md); padding: var(--e-sm) var(--e-md); margin-bottom: var(--e-sm);
  }
  .table--cartoes td { border: 0; padding: 4px 0; display: flex; align-items: baseline; justify-content: space-between; gap: var(--e-md); }
  .table--cartoes td::before {
    content: attr(data-rotulo);
    flex: 0 0 auto; font-size: var(--t-xs); text-transform: uppercase; letter-spacing: .1em;
    color: var(--cor-texto-fraco); font-weight: 700;
  }
  .table--cartoes td > * { text-align: right; }
}


/* --- triagem: peça já decidida encolhe (a página tinha 8.500px). ------- */
.triagem-peca.is-decidida .photo-frame--tall { aspect-ratio: 3 / 2; max-width: 220px; }
.triagem-peca.is-decidida .triagem-peca__ia { display: none; }

/* No celular as fases NÃO rolam: um trilho horizontal escondia "Pós-parto" e
   "Mamãe & Bebê" (duas das fases-título da marca) atrás de um corte que lia
   como fim de lista. Três colunas em duas linhas mostram as cinco de uma vez,
   e o rótulo ainda cabe numa linha só. */
@media (max-width: 560px) {
  .fases { min-inline-size: 0; max-width: 100%; grid-template-columns: repeat(3, minmax(0, 1fr)); }
  .fase { padding: var(--e-sm) 4px; }
  .fase__icone { width: 40px; height: 40px; }
  .fase__rotulo { font-size: var(--t-sm); white-space: nowrap; letter-spacing: 0; hyphens: none; }
  .filtros__busca .field__label { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); }
  .filtros__busca { margin-bottom: var(--e-sm); }
}

/* ==========================================================================
   FATIA: HOME (herói recomposto, ritmo vertical, fecho único)
   .hero__medalhao (-arte -ciclo), .hero__ctas
   .section--capitulo + .section__cabeca   dois níveis de seção
   .como__marca / .como__numero            um disco só por passo
   .valor__titulo
   .fecho (__citacao __frase __complemento __assinatura __divisor __convite
           __texto __pe)                   bloco único de fechamento da home
   ========================================================================== */

/* --- herói: um símbolo só (medalhão rosa + o ciclo como anel em volta), e a
   arte aparece também no celular, acima do texto. ----------------------- */
.hero__grid { display: flex; flex-direction: column; gap: var(--e-md); }
.hero__arte { display: grid; place-items: center; }
.hero__medalhao {
  position: relative; display: grid; place-items: center;
  width: 118px; height: 118px; border-radius: var(--r-full);
  background: var(--rosa-claro);
}
.hero__medalhao-arte { width: 62%; height: auto; color: var(--rosa-forte); }
/* O ciclo vira um ANEL FINO em volta do disco (era uma seta solta no canto,
   em escala desconexa da arte). É o mesmo símbolo do kit — ícone dentro de
   círculo rosa — só que como uma coisa só. */
.hero__medalhao::before {
  content: ""; position: absolute; border-radius: var(--r-full); pointer-events: none;
  /* inset em % (caixa quadrada) mantém o anel concêntrico em qualquer tamanho */
  inset: -12%; border: 1px solid var(--rosa-medio);
}
/* O selo do ciclo NÃO toca o disco: ele se assenta em cima do anel, a 45°,
   interrompendo a linha — por isso o fundo bege (a cor da página). A posição
   93.8% = 50% + cos(45°) * 62% (raio do anel), logo vale nos dois tamanhos.
   O selo é menor que o vão entre disco e anel: assim nunca morde o rosa. */
.hero__medalhao-ciclo {
  /* nada de translate(-50%): a animação .ciclo-gira usa transform e venceria.
     O recuo vem de margin negativa = metade da largura do selo. */
  position: absolute; left: 93.8%; top: 93.8%; margin: -11% 0 0 -11%;
  width: 22%; height: auto; color: var(--rosa-forte);
  background: var(--bege); border-radius: var(--r-full); padding: 5px;
  box-sizing: border-box;
}
.hero__ctas { gap: var(--e-sm); margin-top: var(--e-xs); }
@media (min-width: 900px) {
  .hero__grid {
    display: grid; grid-template-columns: minmax(0, 1.1fr) minmax(0, .9fr);
    gap: var(--e-2xl); align-items: center;
  }
  .hero__texto { grid-column: 1; grid-row: 1; }
  .hero__arte  { grid-column: 2; grid-row: 1; }
  .hero__medalhao { width: min(330px, 100%); height: auto; aspect-ratio: 1; }
  .hero__medalhao-ciclo { width: 20%; margin: -10% 0 0 -10%; padding: 10px; }
}
.hero__titulo { font-size: clamp(1.9rem, 5vw, 2.45rem); letter-spacing: -.01em; }
.hero__texto .selo-fase, .fases-linha { align-self: flex-start; }

/* --- dois níveis de seção: "capítulo" (produto) e apoio (o resto). ----- */
.section--capitulo { padding: var(--e-2xl) 0; }
@media (min-width: 768px) { .section--capitulo { padding: 80px 0; } }
.section__cabeca { margin-bottom: var(--e-lg); }
.section--capitulo .section__cabeca .title { font-size: clamp(1.9rem, 4vw, 2.6rem); }

/* --- "Como funciona": o número vira selo no canto do ícone. ------------ */
.como__marca { position: relative; display: inline-block; }
.como__numero {
  position: absolute; top: -4px; left: -6px;
  width: 26px; height: 26px; display: grid; place-items: center;
  border-radius: var(--r-full);
  background: var(--cor-acento-escuro); color: var(--cor-sobre-rosa);
  border: 2px solid var(--cor-superficie);
  font-family: var(--fonte-titulo); font-size: 14px; font-weight: 700; line-height: 1;
  margin: 0;
}

.valor__titulo { font-family: var(--fonte-titulo); font-size: var(--t-lg); margin: 0; }

/* --- fecho da home: citação assinada + convite, num bloco rosa só. ----- */
.fecho { text-align: center; }
.fecho > .circulo-icone { margin: 0 auto var(--e-md); }
.fecho__citacao { margin: 0 auto; max-width: 40ch; }
.fecho__frase {
  font-family: var(--fonte-titulo); font-size: clamp(1.5rem, 3.4vw, 2.1rem);
  line-height: 1.25; margin: 0 0 var(--e-xs);
}
.fecho__complemento { color: var(--cor-texto-suave); margin: 0; }
.fecho__assinatura { margin-top: var(--e-sm); font-size: var(--t-sm); color: var(--cor-texto-suave); font-style: italic; }
.fecho__assinatura .assinatura { font-style: normal; font-size: var(--t-sm); }
.fecho__divisor { max-width: 120px; margin: var(--e-lg) auto; background: var(--rosa-medio); }
.fecho__convite { font-family: var(--fonte-titulo); font-size: var(--t-2xl); margin: 0 0 var(--e-xs); }
.fecho__texto { color: var(--cor-texto-suave); max-width: 46ch; margin: 0 auto var(--e-md); }
.fecho__pe { margin: var(--e-lg) 0 0; }

/* ==========================================================================
   FATIA LOJA / PEÇA / SACOLA
   Só o que é desta fatia. Token de cor, foco, cartão da peça, chips e fileira
   rolável de fases já estão resolvidos acima — nada é repetido aqui.
   ========================================================================== */

/* input/select tinham `:focus` (especificidade maior que `:focus-visible`) com
   halo rosa-claro de 3px sobre bege: quase invisível. Mesmo anel do resto. */
input:focus-visible, select:focus-visible, textarea:focus-visible {
  outline: 2px solid var(--marrom);
  outline-offset: 2px;
  border-color: var(--rosa-texto);
  box-shadow: 0 0 0 4px var(--rosa-medio);
}

/* --- selo da foto na grade ---------------------------------------------
   O selo percentual saiu do cartão: numa grade inteira de "-55%" a vitrine
   lê como outlet, e como quase toda peça tem desconto ele não diferenciava
   nada. Agora o selo só marca o que é de fato escasso.                     */
.badge--novidade {
  background: var(--cor-superficie);
  color: var(--marrom);
  font-size: var(--t-xs);
  letter-spacing: .02em;
  box-shadow: var(--s-sm);
}
.badge--economia { background: var(--rosa-claro); color: var(--rosa-texto); }

/* O desenho de peça-sem-foto some numa moldura alta de 400px e fica grande
   demais numa miniatura de 88px: escala por moldura. */
.photo-frame--tall .photo-frame__vazio-icone { width: 46%; max-width: 190px; }
.photo-frame--thumb .photo-frame__vazio-icone { max-width: 46px; }

/* --- filtros -----------------------------------------------------------
   O painel fica recolhido TAMBÉM no desktop (só fase + busca de pé): eram
   1.130px antes da primeira peça numa página que existe pra mostrar peça.
   Com preço virando um campo só, são 5 controles — não 6.                  */
@media (min-width: 768px) {
  .filtros__mais { border-top: 1px solid var(--cor-borda); padding-top: var(--e-sm); }
  .filtros__mais > summary { display: flex; }
}
@media (min-width: 1100px) { .filtros__linha { grid-template-columns: repeat(5, minmax(0, 1fr)); } }

/* --- estados vazios: os botões precisavam de uma linha própria ---------- */
.empty-state__acoes { display: flex; flex-wrap: wrap; justify-content: center; gap: var(--e-sm); }

/* --- página da peça: o que acalma na hora de decidir --------------------- */
.peca-acao__aviso { margin: 0; color: var(--cor-texto-suave); }
.peca-acao__aviso strong { color: var(--marrom); }

.frete-resumo {
  border: 1px solid var(--cor-borda);
  border-radius: var(--r-md);
  padding: var(--e-md);
  background: var(--cor-superficie);
}
.frete-resumo__titulo {
  font-family: var(--fonte-titulo);
  font-size: var(--t-lg);
  color: var(--marrom);
  margin: 0 0 var(--e-sm);
}
.frete-resumo__lista { list-style: none; margin: 0 0 var(--e-sm); padding: 0; font-size: var(--t-sm); }
.frete-resumo__lista li {
  display: flex;
  flex-wrap: wrap;
  justify-content: space-between;
  gap: var(--e-xs);
  padding: 6px 0;
  border-bottom: 1px solid var(--cor-borda);
}
.frete-resumo__lista li:last-child { border-bottom: 0; }
.frete-resumo__valor { color: var(--cor-texto); font-weight: 600; }
.frete-resumo__valor .muted { font-weight: 400; }
.frete-resumo p:last-child { margin: 0; }

.tranquilidade {
  background: var(--rosa-claro);
  border-radius: var(--r-md);
  padding: var(--e-md);
}
.tranquilidade__titulo {
  font-family: var(--fonte-titulo);
  font-size: var(--t-lg);
  color: var(--marrom);
  margin: 0 0 var(--e-sm);
}
.tranquilidade__lista { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: var(--e-sm); }
.tranquilidade__lista li {
  display: flex;
  align-items: flex-start;
  gap: var(--e-sm);
  font-size: var(--t-sm);
  color: var(--cor-texto-suave);
  line-height: 1.5;
}
.tranquilidade__lista .circulo-icone { flex: 0 0 auto; background: var(--cor-superficie); }
.tranquilidade__lista strong { color: var(--marrom); }