/* =====================================================================
   CAMADA EMOCIONAL — prévia de 2026-09-11
   Carregado DEPOIS do styles.css em todas as páginas. Tudo o que é novo
   mora aqui: o styles.css aprovado continua intacto, e a prévia se desfaz
   tirando uma linha do <head>.

   Duas vozes, como nos cards do Instagram:
   - Cormorant Garamond: o sentimento (títulos, versos, fechos)
   - Courier Prime: o factual (rótulos, fichas, preços)
   ===================================================================== */

:root {
  --serif: "Cormorant Garamond", Georgia, "Times New Roman", serif;
  /* dois dourados, o mesmo matiz: o claro reprova como texto sobre creme
     (2,29:1), então texto dourado em fundo claro usa o de tinta (4,61:1) */
  --gold: #c9a24d;       /* ornamento, fios e texto sobre fundo escuro */
  --gold-ink: #8f6d2f;   /* texto dourado sobre creme */
  --dark: #1d1a17;       /* o preto quente dos cards escuros */
}

/* =====================================================================
   1. DUPLA VOZ NOS TÍTULOS QUE JÁ EXISTIAM
   A Cormorant desenha ~18% menor que a Courier no mesmo font-size e fica
   fina demais em 400 sobre creme: sobe um degrau e vai a 500. Os
   seletores repetem os do bloco "harmonia" do styles.css — carregado
   depois, este arquivo vence com a mesma especificidade. A regra do
   teto continua: título comum nenhum passa das letras do logotipo.
   ===================================================================== */
.hero__title { font-size: clamp(2.1rem, 3.8vw, 2.85rem); font-weight: 500; letter-spacing: -0.005em; line-height: 1.08; }
.hero--faixa .hero__title { font-size: clamp(1.5rem, 2.8vw, 2.1rem); font-style: italic; font-weight: 400; }
.hero__lead {
  font-family: var(--serif); font-style: italic;
  font-size: clamp(1.25rem, 2.6vw, 1.6rem); line-height: 1.35;
  color: var(--gold-ink);
}
.section-head__title,
.about__title,
.contact__title { font-size: clamp(1.6rem, 2.6vw, 2.15rem); font-weight: 500; line-height: 1.1; }
.product__name { font-size: 1.55rem; font-weight: 500; letter-spacing: 0; line-height: 1.15; }
.modal__name { font-size: clamp(1.6rem, 3.4vw, 2.15rem); font-weight: 500; }
.slide__nome { font-size: clamp(1.6rem, 2.3vw, 2.15rem); font-weight: 500; }
.destbanner__content h3,
.destfoto__content h3 { font-size: clamp(1.6rem, 2.9vw, 2.15rem); font-weight: 500; }
.garantia__item h3 { font-size: 1.25rem; font-weight: 500; }
.footer__tag { font-size: 1.3rem; }
.corp-hero__title { font-size: clamp(2.1rem, 3.8vw, 2.85rem); font-weight: 500; }
.corppost__content h2 { font-size: clamp(1.6rem, 2.5vw, 2.15rem); font-weight: 500; }
.corp-ok h3 { font-size: 1.6rem; font-weight: 500; }
.mat-hero__title, .mat-h2, .mat-h3, .mat-card__n { font-weight: 600; }
.cartit__info strong { font-size: 1.15rem; font-weight: 500; }   /* nome da peça no carrinho */

@media (max-width: 760px) {
  .product__name { font-size: 1.2rem; }
  .modal__name { font-size: 1.6rem; }
  .slide__nome { font-size: 1.6rem; }
}

/* Preço é dado, não sentimento: continua na máquina de escrever, igual a
   hoje. Os algarismos da Cormorant têm contraste baixo e "R$ 2.820,00"
   perde leitura justamente onde a pessoa decide. */
.product__price, .modal__price, .destbanner__preco, .destfoto__preco,
.pix__valor, .cart-total strong, .pgto__val,
p.pg__preco {   /* p. vence o peca.css, que carrega depois deste arquivo */
  font-family: var(--sans);
}

/* Rótulos passam para o dourado de tinta. O verde é a cor de AÇÃO do
   site (botões, links); rótulo não é ação. */
.hero__eyebrow,
.section-head__eyebrow { color: var(--gold-ink); }

/* =====================================================================
   2. PEÇAS COMUNS DA CAMADA EMOCIONAL
   ===================================================================== */
.emo {
  padding: clamp(4.5rem, 11vw, 8rem) clamp(1.25rem, 6vw, 4rem);
  text-align: center;
}
.emo__olho {
  font-family: var(--sans);
  font-size: 0.75rem; letter-spacing: 0.32em; text-transform: uppercase;
  color: var(--gold-ink);
  margin: 0 0 1.2rem;
}
.emo__fio {
  width: 64px; height: 1px; border: 0;
  background: var(--gold);
  margin: 0 auto clamp(1.8rem, 4vw, 2.6rem);
}

/* =====================================================================
   3. CAPA — a arte final da publicação "pequenos sempre no coração de
   uma mãe", uma imagem só. A composição (texto atrás da joia, sombra)
   já vem pronta do Instagram; aqui só entra o quadro na proporção do
   arquivo (3375x4219) e a legenda do lançamento.
   ===================================================================== */
.poster { background: var(--cream); }

.poster__quadro {
  position: relative;
  width: 100%;
  aspect-ratio: 3375 / 4219;
  overflow: hidden;
  background: #6f5a4b;           /* tom da pele enquanto a arte carrega */
}
.poster__quadro img { display: block; width: 100%; height: 100%; object-fit: cover; }

.poster__legenda {
  padding: clamp(2rem, 7vw, 2.8rem) clamp(1.25rem, 6vw, 3rem) clamp(2.6rem, 9vw, 3.6rem);
  text-align: center;
}
.poster__nome {
  font-family: var(--serif); font-weight: 500;
  font-size: clamp(1.3rem, 5.2vw, 2.5rem); line-height: 1.1;
  letter-spacing: 0.12em; text-transform: uppercase;
  color: var(--ink);
  margin: 0 0 1rem;
}
/* se não couber numa linha, quebra inteiro: "Picolino" / "& Picolina" */
.poster__par { white-space: nowrap; }
.poster__e { color: var(--gold); letter-spacing: 0; }
.poster__texto {
  font-family: var(--sans);
  font-size: 0.875rem; line-height: 1.7;
  color: var(--muted);
  max-width: 30rem; margin: 0 auto 1.8rem;
}

@media (min-width: 900px) {
  .poster {
    /* o 3º termo segura a foto em janela alta e estreita (900–1000px de
       largura, ~900 de altura): sem ele a foto crescia com a altura e
       espremia a legenda — "& Picolina" vazava da tela */
    --alto: min(calc(100svh - 7.5rem), 54rem, calc((100vw - 27rem) * 4219 / 3375));
    display: grid;
    grid-template-columns: auto minmax(0, 30rem);
    justify-content: center; align-items: center;
    gap: clamp(2.5rem, 6vw, 6rem);
    padding: clamp(1.5rem, 3vw, 2.5rem) clamp(2rem, 5vw, 5rem) clamp(3rem, 6vw, 5rem);
  }
  .poster__quadro { width: calc(var(--alto) * 3375 / 4219); }
  .poster__legenda { text-align: left; padding: 0; }
  .poster__texto { margin-left: 0; }
}

/* =====================================================================
   4. PARA QUEM — o espelho em três tempos (card "lembrança")
   ===================================================================== */
.pq { background: var(--cream-2); }
.pq__grade {
  max-width: 64rem; margin: 0 auto;
  display: grid; gap: clamp(2.2rem, 6vw, 4.5rem); align-items: center;
}
.pq__foto {
  margin: 0 auto;
  width: min(100%, 30rem);
  aspect-ratio: 1820 / 1066;   /* render deitada: sem corte */
  overflow: hidden;
  background: #e2e2e2;          /* o cinza da render, enquanto carrega */
}
.pq__foto img { width: 100%; height: 100%; object-fit: cover; display: block; }
.pq__texto {
  font-family: var(--serif); font-weight: 400;
  font-size: clamp(1.45rem, 3.6vw, 2rem); line-height: 1.32;
  color: var(--ink);
  max-width: 32ch; margin: 0 auto;
  text-wrap: balance;
}
.pq__fecho {
  font-family: var(--serif); font-style: italic;
  font-size: clamp(1.3rem, 3vw, 1.7rem); line-height: 1.3;
  color: var(--gold-ink);
  margin: 1.5rem 0 0;
}
@media (min-width: 900px) {
  .pq__grade { grid-template-columns: 1fr 1fr; text-align: left; }
  .pq__foto { width: 100%; }
  .pq__texto { margin: 0; }
  .pq .emo__fio { margin-left: 0; }
}

/* =====================================================================
   5. FEITO À MÃO — a marca contada pela oficina (card "feito à mão")
   No celular a frase vem primeiro, no preto, e a foto continua embaixo
   saindo do escuro — texto nunca fica em cima da chama. No PC, lado a lado.
   ===================================================================== */
.fam { background: var(--dark); color: var(--cream); overflow: hidden; }
.fam__texto { padding: clamp(3.4rem, 12vw, 5rem) clamp(1.4rem, 7vw, 3rem) clamp(1.2rem, 4vw, 2rem); }
.fam .emo__olho { color: var(--gold); }
.fam__titulo {
  font-family: var(--serif); font-weight: 500;
  font-size: clamp(2.2rem, 8.6vw, 3.6rem); line-height: 1.04;
  color: var(--cream);
  margin: 0 0 1.4rem;
  text-wrap: balance;
}
.fam__p {
  font-family: var(--sans);
  font-size: 0.875rem; line-height: 1.75;
  color: rgba(251, 250, 246, 0.86);
  max-width: 42ch; margin: 0 0 1rem;
}
.fam__foto { position: relative; margin: 0; aspect-ratio: 4 / 5; }
.fam__foto img { width: 100%; height: 100%; object-fit: cover; object-position: 50% 62%; display: block; }
.fam__foto::after {
  content: ""; position: absolute; inset: 0; pointer-events: none;
  background: linear-gradient(180deg, var(--dark) 0%, rgba(29, 26, 23, 0) 20%, rgba(29, 26, 23, 0) 86%, rgba(29, 26, 23, 0.45) 100%);
}
@media (min-width: 900px) {
  .fam { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); align-items: center; }
  .fam__texto { padding: clamp(3rem, 6vw, 6rem); max-width: 38rem; justify-self: end; }
  .fam__foto { aspect-ratio: auto; height: 100%; min-height: min(88svh, 52rem); }
  /* a foto em pé (9:16) não pode ditar a altura da faixa: ela preenche a
     altura que o texto e o min-height definem, cortada em torno da chama */
  .fam__foto img { position: absolute; inset: 0; }
  .fam__foto::after { background: linear-gradient(90deg, var(--dark) 0%, rgba(29, 26, 23, 0.25) 10%, rgba(29, 26, 23, 0) 24%); }
}