/* ==========================================================
   MODELOS (Alianças) — lista + detalhe
   Reusa os tokens do tema (Alta Joalheria): --c-burgundy (ônix),
   --c-cream (marfim), --c-gold (ouro velho), Cormorant + Jost.
   Os cards reaproveitam .product-card / .product-card__view do
   components.css (vitrine), então aqui só vai o que é específico.
   ========================================================== */

/* ── Hero da página ── */
.models-hero {
  text-align: center;
  padding: var(--sp-10, 64px) var(--sp-4, 16px) var(--sp-6, 32px);
}
.models-hero__eyebrow {
  font-family: var(--font-body);
  font-size: var(--text-2xs, 11px);
  letter-spacing: var(--ls-wider, .18em);
  text-transform: uppercase;
  color: var(--c-gold);
}
.models-hero__title {
  font-family: var(--font-display);
  font-weight: 600;
  font-size: clamp(28px, 5vw, 44px);
  color: var(--c-text, #1A150F);
  margin: var(--sp-2, 8px) 0;
}
.models-hero__desc {
  max-width: 560px;
  margin: 0 auto;
  color: var(--c-text-muted, #6E6557);
  font-size: var(--text-sm, 14px);
  line-height: 1.7;
}
.models-hero__actions {
  margin-top: var(--sp-5, 24px);
  display: flex;
  justify-content: center;
}
.models-pdf-btn {
  display: inline-flex;
  align-items: center;
  gap: 9px;
  font-family: var(--font-body);
  font-size: var(--text-xs, 12px);
  font-weight: var(--fw-semibold, 600);
  letter-spacing: var(--ls-wider, .14em);
  text-transform: uppercase;
  color: var(--c-text, #1A150F);
  background: transparent;
  border: 1px solid var(--c-border, #E4DACB);
  border-radius: 999px;
  padding: 11px 22px;
  text-decoration: none;
  transition: all var(--t-base, .18s);
}
.models-pdf-btn svg { color: var(--c-gold, #B68A4C); }
.models-pdf-btn:hover {
  border-color: var(--c-gold, #B68A4C);
  color: var(--c-gold, #B68A4C);
}
.models-pdf-btn:hover svg { color: var(--c-gold, #B68A4C); }

/* ── Filtro de categorias (chips) ── */
.models-filters {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: var(--sp-2, 8px);
  margin: var(--sp-6, 32px) auto var(--sp-2, 8px);
  padding: 0 var(--sp-4, 16px);
}
.models-chip {
  font-family: var(--font-body);
  font-size: var(--text-xs, 12px);
  letter-spacing: .04em;
  padding: 8px 16px;
  border-radius: 999px;
  border: 1px solid var(--c-border, #E4DACB);
  background: transparent;
  color: var(--c-text-muted, #6E6557);
  cursor: pointer;
  transition: all var(--t-base, .18s);
}
.models-chip:hover { border-color: var(--c-gold); color: var(--c-gold); }
.models-chip.is-active {
  background: var(--c-burgundy, #1C140E);
  border-color: var(--c-burgundy, #1C140E);
  color: var(--c-cream, #F7F1E7);
}

/* ── Grid ── */
.models-grid {
  display: grid;
  grid-template-columns: 1fr;          /* mobile: 1 coluna, imagem largura total */
  gap: var(--sp-4, 16px);
  max-width: 1200px;
  margin: var(--sp-6, 32px) auto;
  padding: 0 var(--sp-4, 16px);
}
@media (min-width: 640px)  { .models-grid { grid-template-columns: repeat(2, 1fr); } }
@media (min-width: 1024px) { .models-grid { grid-template-columns: repeat(3, 1fr); } }
@media (min-width: 1280px) { .models-grid { grid-template-columns: repeat(4, 1fr); } }

/* ── Card do modelo (texto + seta DENTRO da imagem) ── */
.model-card {
  position: relative;
  display: block;
  border-radius: var(--radius-lg, 12px);
  overflow: hidden;
  background: var(--c-cream-2, #FBF8F2);
  text-decoration: none;
  isolation: isolate;
}
.model-card__media { width: 100%; aspect-ratio: 4 / 5; }
@media (min-width: 640px) { .model-card__media { aspect-ratio: 1 / 1; } }
.model-card__media img {
  width: 100%; height: 100%; object-fit: cover; display: block;
  transition: transform .6s cubic-bezier(.2,.6,.2,1);
}
.model-card:hover .model-card__media img { transform: scale(1.04); }
.model-card__media-ph {
  width: 100%; height: 100%;
  display: flex; align-items: center; justify-content: center;
  color: var(--c-gold, #D8BD67);
}

.model-card__overlay {
  position: absolute; inset: 0;
  display: flex; flex-direction: column; justify-content: flex-end;
  padding: var(--sp-6, 32px) var(--sp-4, 18px) var(--sp-4, 18px);
  background: linear-gradient(to top,
    rgba(20,14,8,.74) 0%,
    rgba(20,14,8,.34) 36%,
    rgba(20,14,8,0)   66%);
  z-index: 1;
}
.model-card__category {
  font-family: var(--font-body);
  font-size: var(--text-2xs, 11px);
  letter-spacing: var(--ls-wider, .18em);
  text-transform: uppercase;
  color: var(--c-gold, #D8BD67);
  margin-bottom: 6px;
}
.model-card__name {
  font-family: var(--font-display);
  font-weight: 600;
  font-size: clamp(19px, 4.6vw, 23px);
  line-height: 1.12;
  letter-spacing: .015em;
  text-transform: uppercase;
  color: var(--c-cream, #F7F1E7);
  margin: 0 0 var(--sp-3, 12px);
  text-shadow: 0 1px 12px rgba(0,0,0,.35);
}
.model-card__view {
  display: inline-flex; align-items: center; gap: 9px;
  font-family: var(--font-body);
  font-size: var(--text-2xs, 11px);
  font-weight: 600;
  letter-spacing: var(--ls-wider, .18em);
  text-transform: uppercase;
  color: var(--c-gold, #D8BD67);
}
.model-card__view-arrow {
  width: 26px; height: 14px;
  transition: transform .25s ease;
}
.model-card:hover .model-card__view-arrow { transform: translateX(5px); }

.models-state {
  text-align: center;
  color: var(--c-text-muted, #6E6557);
  padding: var(--sp-10, 64px) var(--sp-4, 16px);
  font-size: var(--text-sm, 14px);
}
.models-loadmore {
  display: flex;
  justify-content: center;
  margin: var(--sp-6, 32px) 0 var(--sp-10, 64px);
}

/* ══════════════════════════════════════════════════════════
   DETALHE — vermodelo
   ══════════════════════════════════════════════════════════ */
.model-view { max-width: 1160px; margin: 0 auto; padding: var(--sp-6, 32px) var(--sp-4, 16px) var(--sp-10, 64px); }
.model-view__breadcrumb {
  font-family: var(--font-body);
  font-size: var(--text-xs, 12px);
  color: var(--c-text-muted, #6E6557);
  margin-bottom: var(--sp-4, 16px);
}
.model-view__breadcrumb a { color: inherit; text-decoration: none; }
.model-view__breadcrumb a:hover { color: var(--c-gold); }

.model-view__layout {
  display: grid;
  grid-template-columns: 1fr;
  gap: var(--sp-8, 48px);
}
@media (min-width: 900px) { .model-view__layout { grid-template-columns: 1.05fr 1fr; align-items: start; } }

/* Galeria */
.model-gallery__main {
  aspect-ratio: 1 / 1;
  border-radius: var(--radius-lg, 10px);
  overflow: hidden;
  background: var(--c-cream-2, #FBF8F2);
  display: flex; align-items: center; justify-content: center;
}
.model-gallery__main img { width: 100%; height: 100%; object-fit: cover; }
.model-gallery__main .material-symbols-rounded { font-size: 48px; color: var(--c-gold); }
.model-gallery__thumbs {
  display: flex; gap: var(--sp-2, 8px); margin-top: var(--sp-3, 12px);
  flex-wrap: wrap;
}
.model-gallery__thumb {
  width: 72px; height: 72px; border-radius: var(--radius-md, 8px);
  overflow: hidden; cursor: pointer; border: 2px solid transparent;
  background: var(--c-cream-2, #FBF8F2); transition: border-color var(--t-base, .18s);
}
.model-gallery__thumb img { width: 100%; height: 100%; object-fit: cover; }
.model-gallery__thumb.is-active { border-color: var(--c-gold); }

/* Info */
.model-view__category {
  font-family: var(--font-body);
  font-size: var(--text-2xs, 11px);
  letter-spacing: var(--ls-wider, .18em);
  text-transform: uppercase;
  color: var(--c-gold);
}
.model-view__title {
  font-family: var(--font-display);
  font-weight: 600;
  font-size: clamp(26px, 4vw, 38px);
  color: var(--c-text, #1A150F);
  margin: var(--sp-2, 8px) 0 var(--sp-4, 16px);
  line-height: 1.1;
}
.model-view__desc {
  color: var(--c-text, #3A332A);
  font-size: var(--text-base, 15px);
  line-height: 1.8;
  white-space: pre-line;
}

/* Specs */
.model-specs {
  margin: var(--sp-6, 32px) 0;
  border-top: 1px solid var(--c-border, #E4DACB);
}
.model-specs__row {
  display: flex; justify-content: space-between; gap: var(--sp-4, 16px);
  padding: var(--sp-3, 12px) 0;
  border-bottom: 1px solid var(--c-border, #E4DACB);
  font-size: var(--text-sm, 14px);
}
.model-specs__label { color: var(--c-text-muted, #6E6557); }
.model-specs__value { color: var(--c-text, #1A150F); font-weight: 500; text-align: right; }

.model-notes {
  background: var(--c-cream-2, #FBF8F2);
  border-left: 3px solid var(--c-gold);
  padding: var(--sp-4, 16px);
  border-radius: 0 var(--radius-md, 8px) var(--radius-md, 8px) 0;
  font-size: var(--text-sm, 14px);
  color: var(--c-text-muted, #6E6557);
  line-height: 1.7;
  white-space: pre-line;
  margin: var(--sp-5, 24px) 0;
}
.model-notes__title {
  font-family: var(--font-body);
  font-size: var(--text-2xs, 11px);
  letter-spacing: var(--ls-wider, .18em);
  text-transform: uppercase;
  color: var(--c-gold);
  margin-bottom: var(--sp-1, 4px);
}

/* CTA WhatsApp (vitrine → conversa) */
.model-cta {
  display: inline-flex; align-items: center; gap: 10px;
  background: var(--c-burgundy, #1C140E);
  color: var(--c-cream, #F7F1E7);
  font-family: var(--font-body);
  font-weight: 600;
  letter-spacing: .04em;
  padding: 14px 26px;
  border-radius: 999px;
  text-decoration: none;
  transition: transform var(--t-base, .18s), opacity var(--t-base, .18s);
  margin-top: var(--sp-2, 8px);
}
.model-cta:hover { transform: translateY(-1px); opacity: .94; }
.model-cta svg { width: 20px; height: 20px; fill: var(--c-gold); }

/* ── Alianças prontas (review style) ── */
.model-ready { margin-top: var(--sp-10, 64px); }
.model-ready__head { text-align: center; margin-bottom: var(--sp-5, 24px); }
.model-ready__title {
  font-family: var(--font-display);
  font-weight: 600;
  font-size: clamp(22px, 3.5vw, 30px);
  color: var(--c-text, #1A150F);
}
.model-ready__sub {
  font-family: var(--font-body);
  font-size: var(--text-2xs, 11px);
  letter-spacing: var(--ls-wider, .18em);
  text-transform: uppercase;
  color: var(--c-gold);
}
.model-ready__grid {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: var(--sp-3, 12px);
}
@media (min-width: 640px)  { .model-ready__grid { grid-template-columns: repeat(3, 1fr); } }
@media (min-width: 1024px) { .model-ready__grid { grid-template-columns: repeat(4, 1fr); } }
.model-ready__item {
  border-radius: var(--radius-md, 8px);
  overflow: hidden;
  background: var(--c-cream-2, #FBF8F2);
  border: 1px solid var(--c-border, #E4DACB);
}
.model-ready__item img { width: 100%; aspect-ratio: 1/1; object-fit: cover; display: block; }
.model-ready__cap {
  padding: 10px 12px;
  font-size: var(--text-xs, 12px);
  color: var(--c-text-muted, #6E6557);
  line-height: 1.5;
}

/* ── Alianças prontas: zoom ao clicar (lightbox) ── */
.model-ready__item--zoom { cursor: zoom-in; }
.model-ready__item--zoom img { transition: transform .4s ease; }
.model-ready__item--zoom:hover img { transform: scale(1.05); }

.model-lightbox {
  position: fixed; inset: 0; z-index: 9999;
  background: rgba(18,12,7,.93);
  display: none; align-items: center; justify-content: center;
  padding: 5vh 4vw;
}
.model-lightbox.is-open { display: flex; }
.model-lightbox__img {
  max-width: 92vw; max-height: 84vh; object-fit: contain;
  border-radius: 6px; box-shadow: 0 12px 50px rgba(0,0,0,.5);
}
.model-lightbox__cap {
  position: absolute; bottom: 3vh; left: 0; right: 0;
  text-align: center; color: var(--c-cream, #F7F1E7);
  font-family: var(--font-body); font-size: 13px; letter-spacing: .02em;
  padding: 0 24px;
}
.model-lightbox__close {
  position: absolute; top: 18px; right: 22px;
  width: 46px; height: 46px; border: none; background: transparent;
  color: var(--c-cream, #F7F1E7); font-size: 30px; line-height: 1;
  cursor: pointer; border-radius: 50%;
  transition: color .15s, background .15s;
}
.model-lightbox__close:hover { color: var(--c-gold, #D8BD67); background: rgba(255,255,255,.06); }
.model-lightbox__nav {
  position: absolute; top: 50%; transform: translateY(-50%);
  width: 52px; height: 52px; border: none; background: rgba(255,255,255,.06);
  color: var(--c-cream, #F7F1E7); font-size: 30px; line-height: 1;
  cursor: pointer; border-radius: 50%; transition: color .15s, background .15s;
}
.model-lightbox__nav:hover { color: var(--c-gold, #D8BD67); background: rgba(255,255,255,.12); }
.model-lightbox__nav--prev { left: 16px; }
.model-lightbox__nav--next { right: 16px; }
@media (max-width: 600px) {
  .model-lightbox__nav { width: 42px; height: 42px; font-size: 24px; }
}