/* Flávia Cavalcanti, crochê artesanal. Folha de estilos única, sem build. */

/* ===== Variáveis de design ===== */
:root {
  --cream: #FAF6EF;
  --cream-deep: #F3ECE0;
  --surface: #FFFDF8;
  --rose: #C9858B;
  --rose-deep: #A05A62;
  --gold: #B9975B;
  --gold-soft: #DCCB9F;
  --ink: #4A3F35;

  --fs-hero: clamp(2.2rem, 6vw, 3.4rem);
  --fs-h2: clamp(1.6rem, 4vw, 2.2rem);

  --s1: 4px;
  --s2: 8px;
  --s3: 12px;
  --s4: 16px;
  --s5: 24px;
  --s6: 32px;
  --s7: 48px;
  --s8: 64px;

  --radius-btn: 6px;
  --radius-card: 14px;
  --shadow-warm: 0 10px 30px rgba(74, 63, 53, .08);

  --font-display: "Cormorant Garamond", Georgia, serif;
  --font-body: "Lato", system-ui, sans-serif;
}

/* ===== Base ===== */
*, *::before, *::after { box-sizing: border-box; }

html { scroll-behavior: smooth; }

body {
  margin: 0;
  background: var(--cream);
  color: var(--ink);
  font-family: var(--font-body);
  font-size: 1rem;
  line-height: 1.65;
  -webkit-font-smoothing: antialiased;
}

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

h1, h2, h3 {
  margin: 0;
  font-family: var(--font-display);
  font-weight: 600;
  color: var(--rose-deep);
  line-height: 1.2;
  overflow-wrap: break-word;
}

h2 { font-size: var(--fs-h2); }

p { margin: 0 0 var(--s4); }

[id] { scroll-margin-top: 84px; }

.svg-defs { position: absolute; width: 0; height: 0; overflow: hidden; }

/* ===== Link de salto ===== */
.skip-link {
  position: absolute;
  top: -100px;
  left: var(--s4);
  z-index: 20;
  padding: var(--s2) var(--s4);
  background: var(--rose-deep);
  color: var(--cream);
  border-radius: var(--radius-btn);
  text-decoration: none;
  font-weight: 700;
}

.skip-link:focus { top: var(--s4); }

/* ===== Barra superior ===== */
.topbar {
  position: sticky;
  top: 0;
  z-index: 10;
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: var(--s2) var(--s4);
  padding: var(--s3) var(--s4);
  background: var(--cream);
  border-bottom: 1px solid var(--gold-soft);
}

.topbar__brand {
  font-family: var(--font-display);
  font-weight: 600;
  font-size: 1.5rem;
  letter-spacing: .08em;
  color: var(--rose-deep);
  text-decoration: none;
}

.topbar__nav { display: flex; flex-wrap: wrap; gap: var(--s2) var(--s4); }

.topbar__nav a { color: var(--ink); font-size: .95rem; text-decoration: none; }

.topbar__nav a:hover { color: var(--rose-deep); text-decoration: underline; }

/* ===== Anéis dourados (logotipo e retrato) ===== */
.ring {
  display: inline-block;
  padding: var(--s2);
  background: var(--surface);
  border: 1.5px solid var(--gold);
  border-radius: 50%;
}

.ring img { border-radius: 50%; object-fit: cover; }

.ring--double { box-shadow: 0 0 0 5px var(--cream-deep), 0 0 0 6.5px var(--gold); }

/* ===== Herói ===== */
.hero {
  max-width: 720px;
  margin: 0 auto;
  padding: var(--s7) var(--s4) var(--s5);
  text-align: center;
}

.hero h1 { margin: var(--s5) 0 var(--s2); font-size: var(--fs-hero); font-weight: 500; }

.hero__tagline { margin: 0 0 var(--s6); font-size: 1.1rem; }

/* ===== Divisor de fio com coração ===== */
.divider {
  display: block;
  width: 120px;
  height: 24px;
  margin: var(--s6) auto;
  color: var(--rose);
}

/* ===== Ornamento sob os títulos ===== */
.ornament {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: var(--s3);
  margin: var(--s3) 0 var(--s5);
}

.ornament__dot { width: 5px; height: 5px; border-radius: 50%; background: var(--gold); }

.ornament__heart { position: relative; width: 12px; height: 10px; }

.ornament__heart::before, .ornament__heart::after {
  content: "";
  position: absolute;
  top: 0;
  width: 6px;
  height: 9px;
  border-radius: 6px 6px 0 0;
  background: var(--rose);
}

.ornament__heart::before { left: 6px; transform: rotate(-45deg); transform-origin: 0 100%; }

.ornament__heart::after { left: 0; transform: rotate(45deg); transform-origin: 100% 100%; }

/* ===== Faixas de fundo alternado ===== */
.band { padding: var(--s7) var(--s4); background: var(--cream-deep); }

/* ===== Sobre ===== */
.sobre { text-align: center; }

.sobre .ring--double { margin-bottom: var(--s5); }

.sobre p { max-width: 60ch; margin: 0 auto; }

/* ===== Catálogo ===== */
.catalogo {
  max-width: 1100px;
  margin: 0 auto;
  padding: var(--s4) var(--s4) var(--s6);
  text-align: center;
}

.catalogo__intro { margin: 0 0 var(--s6); }

.product-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(min(100%, 270px), 1fr));
  gap: 24px;
  margin: 0;
  padding: 0;
  list-style: none;
  text-align: left;
}

.product-grid > li { display: flex; }

.product-card {
  display: flex;
  flex: 1;
  flex-direction: column;
  background: var(--surface);
  border: 1px solid var(--gold-soft);
  border-radius: var(--radius-card);
  box-shadow: var(--shadow-warm);
  overflow: hidden;
}

.product-card img { width: 100%; aspect-ratio: 1 / 1; object-fit: cover; }

.product-card__body {
  display: flex;
  flex: 1;
  flex-direction: column;
  gap: var(--s2);
  padding: var(--s4);
}

.product-card__name { font-size: 1.35rem; }

.product-card__desc { flex: 1; margin: 0; font-size: .95rem; }

/* ===== Botões ===== */
.btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: var(--s2);
  padding: var(--s3) var(--s5);
  background: var(--rose-deep);
  color: var(--cream);
  font-family: var(--font-body);
  font-weight: 700;
  font-size: 1rem;
  text-align: center;
  text-decoration: none;
  white-space: normal;
  border-radius: var(--radius-btn);
  box-shadow: var(--shadow-warm);
  transition: background-color .2s ease;
}

.btn:hover { background: #8E4E55; }

/* Botão de pedido via WhatsApp: mantém o tom da marca, definido explicitamente
   para que o estilo sobreviva a mudanças futuras no .btn base. */
.btn--whatsapp { background: var(--rose-deep); color: var(--cream); }

.btn--whatsapp:hover { background: #8E4E55; }

.btn__icon { width: 18px; height: 18px; flex-shrink: 0; }

.product-card .btn { width: 100%; margin-top: var(--s2); }

/* ===== Materiais ===== */
.materiais { text-align: center; }

.materiais__grid {
  display: grid;
  gap: var(--s6);
  align-items: center;
  max-width: 1040px;
  margin: 0 auto;
  text-align: left;
}

.materiais__text p:last-child { margin-bottom: 0; }

.materiais__img { width: 100%; border-radius: var(--radius-card); box-shadow: var(--shadow-warm); }

@media (min-width: 768px) {
  .materiais__grid { grid-template-columns: 3fr 2fr; }
}

/* ===== Rodapé ===== */
.footer {
  padding: var(--s7) var(--s4);
  text-align: center;
  border-top: 1px solid var(--gold-soft);
}

.footer__brand {
  margin: 0 0 var(--s1);
  font-family: var(--font-display);
  font-weight: 600;
  font-size: 1.3rem;
  color: var(--rose-deep);
}

.footer .btn { margin: var(--s4) 0; }

.footer__legal { margin: var(--s5) 0 0; font-size: .85rem; }

/* ===== Foco visível ===== */
:focus-visible { outline: 2px solid var(--gold); outline-offset: 3px; }

/* ===== Movimento reduzido ===== */
@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }

  *, *::before, *::after { transition: none !important; }
}