/* =========================================================================
   catalogo.css — a página /modelos/ (vitrine de modelos para o casal).
   Segue a landing: papel claro, Bodoni + Archivo, magenta só em ação.
   ========================================================================= */

.catalogo{ font-family: var(--texto); }

.catalogo__topo{
  display: flex; align-items: center; justify-content: space-between;
  padding: 1rem var(--margem);
  border-bottom: 1px solid var(--linha);
}
.catalogo__marca{
  font-family: var(--display); font-weight: 700; font-size: 1.35rem;
  text-decoration: none; letter-spacing: -.01em;
}
.catalogo__marca span{ color: var(--magenta); font-style: italic; font-weight: 400; }
.catalogo__voltar{
  font-size: .9rem; font-weight: 600; text-decoration: none;
  padding: .6rem 1.1rem; border-radius: 999px;
  background: var(--magenta); color: #fff;
}

.catalogo__abre, .formatos{
  max-width: 72rem; margin: 0 auto;
  padding: clamp(2.5rem, 7vw, 5rem) var(--margem) clamp(1.5rem, 4vw, 2.5rem);
}
.catalogo__eyebrow{
  font-size: .72rem; text-transform: uppercase; letter-spacing: .3em;
  font-weight: 600; color: var(--magenta); margin-bottom: .9rem;
}
.catalogo h1, .catalogo h2{
  font-family: var(--display);
  font-size: clamp(2.2rem, 6vw, 4.2rem);
  line-height: 1; letter-spacing: -.02em;
  max-width: 16ch;
}
.catalogo h2{ font-size: clamp(1.8rem, 4.4vw, 3rem); }
.catalogo__lead{ margin-top: 1.2rem; max-width: 58ch; color: var(--tinta-2); }
.catalogo__lead b{ color: var(--tinta); font-weight: 600; }

.catalogo__pecas{
  list-style: none; margin: 2rem 0 0; padding: 0;
  display: grid; gap: 1px;
  grid-template-columns: repeat(auto-fit, minmax(14rem, 1fr));
  background: var(--linha); border: 1px solid var(--linha);
}
.catalogo__pecas li{ background: var(--papel); padding: 1rem 1.2rem; font-size: .92rem; color: var(--tinta-2); }
.catalogo__pecas b{ display: block; font-family: var(--display); font-size: 1.3rem; font-weight: 400; color: var(--tinta); }

/* ------------------------------------------------------------------ grade */

.grade{
  max-width: 72rem; margin: 0 auto;
  padding: 1rem var(--margem) clamp(2rem, 6vw, 4rem);
  display: grid; gap: clamp(2rem, 4vw, 3rem) clamp(1.2rem, 3vw, 2rem);
  grid-template-columns: repeat(auto-fill, minmax(min(15rem, 100%), 1fr));
}
.modelo{ display: grid; gap: 1rem; align-content: start; }
.modelo__vitrine{
  display: block; padding: 1.4rem;
  background: var(--papel-fundo);
  transition: background .25s;
}
.modelo__vitrine:hover{ background: color-mix(in srgb, var(--papel-fundo) 80%, var(--tinta)); }
.modelo__vitrine .cartao{ transition: transform .35s var(--curva); }
.modelo__vitrine:hover .cartao{ transform: translateY(-4px) rotate(-.6deg); }

.modelo__num{ font-family: var(--display); font-size: .85rem; color: var(--magenta); }
.modelo h3{ font-family: var(--display); font-size: 1.55rem; line-height: 1.1; }
.modelo__linha{ font-size: .9rem; color: var(--tinta-2); margin-top: .2rem; }
.modelo__acoes{ display: flex; flex-wrap: wrap; gap: .4rem; margin-top: .8rem; }
.modelo__acoes a{
  font-size: .82rem; font-weight: 500; text-decoration: none;
  padding: .45rem .85rem; border: 1px solid var(--linha); border-radius: 999px;
  transition: background .2s, color .2s, border-color .2s;
}
.modelo__acoes a:hover{ background: var(--tinta); color: var(--papel); border-color: var(--tinta); }

/* ---------------------------------------------------------- formatos de site */

.formatos{ border-top: 1px solid var(--linha); }
.formatos__lista{
  margin-top: 2rem;
  display: grid; gap: 1.2rem;
  grid-template-columns: repeat(auto-fit, minmax(min(16rem, 100%), 1fr));
}
.formato{
  display: grid; gap: .3rem; text-decoration: none;
  padding: 1.2rem; border: 1px solid var(--linha); background: var(--papel-alto);
  transition: border-color .2s, transform .25s var(--curva);
}
.formato:hover{ border-color: var(--tinta); transform: translateY(-3px); }
.formato b{ font-family: var(--display); font-size: 1.4rem; font-weight: 400; margin-top: .6rem; }
.formato > span:last-child{ font-size: .9rem; color: var(--tinta-2); }

/* miniatura esquemática de cada formato */
.formato__desenho{
  display: grid; gap: 6px; height: 9rem; padding: 10px;
  background: var(--papel-fundo);
}
.formato__desenho i{ background: color-mix(in srgb, var(--tinta) 14%, transparent); }
.formato__desenho--classico{ grid-template-rows: 1fr 2.2fr 1fr; justify-items: center; }
.formato__desenho--classico i:nth-child(1){ width: 50%; }
.formato__desenho--classico i:nth-child(2){ width: 40%; background: color-mix(in srgb, var(--magenta) 30%, transparent); }
.formato__desenho--classico i:nth-child(3){ width: 70%; }
.formato__desenho--cheio{ grid-template-rows: 3fr 1fr; }
.formato__desenho--cheio i:nth-child(1){ background: color-mix(in srgb, var(--magenta) 30%, transparent); }
.formato__desenho--cheio i:nth-child(3){ display: none; }
.formato__desenho--editorial{ grid-template-columns: 1fr 1fr; grid-template-rows: 1fr 1fr; }
.formato__desenho--editorial i:nth-child(1){ grid-row: span 2; background: color-mix(in srgb, var(--magenta) 30%, transparent); }

.catalogo__pe{
  display: flex; justify-content: space-between; gap: 1rem; flex-wrap: wrap;
  padding: 1.5rem var(--margem);
  border-top: 1px solid var(--linha);
  font-size: .85rem; color: var(--tinta-2);
}