/* Geemil — páginas de categoria e de modelo. */

.trilha { display: flex; flex-wrap: wrap; align-items: center; gap: 10px; font-size: 13.5px; color: var(--suave); }
.trilha a { text-decoration: none; }
.trilha a:hover { color: var(--caramelo); text-decoration: underline; }
.trilha [aria-current] { color: var(--tinta); }
.trilha i { width: 5px; height: 5px; border-top: 1px solid; border-right: 1px solid; rotate: 45deg; opacity: .7; }

/* ───────── Capa da categoria (animada) ───────── */
.capa { padding: clamp(28px, 4vw, 56px) var(--margem) clamp(48px, 6vw, 88px); overflow: clip; }
.capa__grade { max-width: var(--largura); margin: 0 auto; display: grid; grid-template-columns: minmax(0, 7fr) minmax(0, 5fr); gap: clamp(28px, 5vw, 88px); align-items: center; }
.capa--paisagem .capa__grade { grid-template-columns: minmax(0, 6fr) minmax(0, 6fr); }
.capa__texto { padding-bottom: clamp(4px, 2vw, 30px); }
.capa__trilha { max-width: var(--largura); margin: 0 auto clamp(16px, 3vw, 36px); }
.capa__titulo { margin-top: 18px; font-size: clamp(60px, 11vw, 176px); line-height: .92; letter-spacing: -.035em; font-weight: 320; }
.capa__descricao { margin-top: clamp(20px, 2.6vw, 36px); max-width: 24em; font-size: clamp(18px, 1.5vw, 22px); line-height: 1.5; }
.capa__n { margin-top: 22px; display: inline-flex; align-items: center; gap: 14px; font: 500 11.5px/1 var(--sans); letter-spacing: .2em; text-transform: uppercase; color: var(--caramelo); }
.capa__n::before { content: ""; width: 44px; border-top: 1.5px dashed var(--caramelo-vivo); }
.capa__foto { position: relative; aspect-ratio: 3 / 3.9; border-radius: 4px; overflow: hidden; background: var(--areia); box-shadow: 0 34px 60px -36px rgba(31, 22, 18, .55); }
.capa--paisagem .capa__foto { aspect-ratio: 4 / 3.2; }
.capa__foto img { position: absolute; left: 0; top: -6%; width: 100%; height: 112%; object-fit: cover; }

html.mov .capa .capa__foto { transition: clip-path 1.35s cubic-bezier(.19, 1, .22, 1) .15s; clip-path: inset(0); }
html.mov .capa:not(.entrou) .capa__foto { clip-path: inset(100% 0 0 0); }
html.mov .capa .capa__foto img { transform: translate3d(0, calc((var(--p, .5) - .5) * -10%), 0); will-change: transform; }
html.mov .capa .capa__descricao, html.mov .capa .capa__n, html.mov .capa .rotulo { transition: opacity .9s ease .45s; }
html.mov .capa:not(.entrou) .capa__descricao, html.mov .capa:not(.entrou) .capa__n, html.mov .capa:not(.entrou) .rotulo { opacity: 0; }
@media (max-width: 820px) {
  .capa__grade, .capa--paisagem .capa__grade { grid-template-columns: 1fr; align-items: start; }
  .capa__foto { aspect-ratio: 4 / 3.4; }
}

/* ───────── Modelos (estática) ───────── */
.modelos { padding: 0 var(--margem) clamp(72px, 9vw, 130px); }
.modelos__dentro { max-width: var(--largura); margin: 0 auto; }
.abas { display: flex; flex-wrap: wrap; gap: 8px; padding: 18px 0; border-top: 1px solid rgba(42, 29, 24, .14); border-bottom: 1px solid rgba(42, 29, 24, .14); }
.abas a { display: inline-flex; align-items: center; gap: 10px; min-height: 44px; padding: 0 16px; border: 1px solid transparent; border-radius: 3px; text-decoration: none; font: 500 12px/1 var(--sans); letter-spacing: .16em; text-transform: uppercase; }
.abas a span { font-size: 11px; letter-spacing: .04em; color: var(--suave); }
.abas a:hover { border-color: rgba(42, 29, 24, .4); }
.abas a[aria-current="page"] { background: var(--tinta); color: var(--papel); }
.abas a[aria-current="page"] span { color: var(--champanhe); }
.modelos__barra { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 14px; margin: clamp(24px, 3vw, 40px) 0; }
.busca { position: relative; flex: 1 1 260px; max-width: 420px; }
.busca svg { position: absolute; left: 16px; top: 50%; translate: 0 -50%; width: 17px; height: 17px; color: var(--suave); pointer-events: none; }
.busca input { width: 100%; height: 50px; padding: 0 16px 0 46px; border: 1px solid var(--borda-campo); border-radius: 3px; background: var(--papel); font-size: 16px; }
.busca input:focus { border-color: var(--tinta); outline: none; }
.ordem { display: flex; gap: 6px; }
.ordem button { min-width: 62px; height: 44px; padding: 0 14px; border: 1px solid rgba(42, 29, 24, .3); border-radius: 3px; background: transparent; font: 500 12px/1 var(--sans); letter-spacing: .14em; }
.ordem button[aria-pressed="true"] { background: var(--tinta); border-color: var(--tinta); color: var(--papel); }
.modelos__grade { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: clamp(30px, 3.4vw, 52px) clamp(18px, 2.2vw, 32px); }
.modelo { position: relative; display: flex; flex-direction: column; }
.modelo__foto { position: relative; display: block; aspect-ratio: 4 / 3; border-radius: 4px; overflow: hidden; background: var(--areia); text-decoration: none; }
.modelo__foto img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; }
.modelo__foto--sem { display: grid; place-items: center; background: var(--areia) var(--trama); font: 320 clamp(64px, 8vw, 120px)/1 var(--serifa); font-variation-settings: "SOFT" 100; color: var(--caramelo); }
.modelo__marcador { position: absolute; right: 10px; top: 10px; width: 44px; height: 44px; display: grid; place-items: center; border: 0; border-radius: 3px; background: rgba(250, 247, 241, .94); color: var(--tinta); box-shadow: 0 6px 14px -8px rgba(31, 22, 18, .5); }
.modelo__marcador svg { width: 14px; height: 16px; }
.modelo__marcador:hover { background: var(--tinta); color: var(--papel); }
.modelo__marcador[aria-pressed="true"] { background: var(--caramelo); color: #fff; }
.modelo__marcador[aria-pressed="true"] svg { fill: currentColor; }
.modelo h3 { margin-top: 16px; font-size: clamp(25px, 2.3vw, 33px); }
.modelo h3 a { text-decoration: none; }
.modelo h3 a:hover { color: var(--caramelo); }
.modelo__texto { margin-top: 8px; font-size: 15px; line-height: 1.5; color: var(--suave); text-wrap: pretty; }
.modelo .link-seta { align-self: flex-start; margin-top: 14px; }
.modelos__vazio { padding: 40px 0; font: 360 26px/1.2 var(--serifa); font-variation-settings: "SOFT" 100; }
@media (max-width: 1023px) { .modelos__grade { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (max-width: 600px) {
  .abas { gap: 6px; }
  .abas a { padding: 0 12px; font-size: 11px; letter-spacing: .12em; }
  .ordem { margin-left: auto; }
  .modelos__grade { grid-template-columns: minmax(0, 1fr); gap: 0; }
  .modelo { display: grid; grid-template-columns: 42% minmax(0, 1fr); column-gap: 16px; padding: 18px 0; border-bottom: 1px solid rgba(42, 29, 24, .12); align-content: start; }
  .modelo__foto { grid-row: 1 / span 3; align-self: start; }
  .modelo__marcador { right: auto; left: calc(42% - 50px); top: 24px; width: 40px; height: 40px; }
  .modelo h3 { margin-top: 0; font-size: 25px; }
  .modelo__texto { font-size: 14px; margin-top: 6px; }
  .modelo .link-seta { margin-top: 8px; justify-self: start; }
}

/* ───────── Por que escolher os sofás Geemil (animada) ───────── */
.porque { position: relative; overflow: clip; padding: clamp(80px, 10vw, 150px) var(--margem); }
.porque::before { content: ""; position: absolute; inset: 0; background: radial-gradient(50% 36% at 82% 12%, rgba(176, 106, 62, .22), transparent 70%); pointer-events: none; }
.porque__dentro { position: relative; max-width: var(--largura); margin: 0 auto; }
.porque h2 { font-size: clamp(40px, 6vw, 92px); }
.porque__dentro > .texto { margin-top: 24px; max-width: 30em; font-size: clamp(17px, 1.4vw, 20px); }
.porque__lista { margin-top: clamp(48px, 6vw, 96px); display: grid; gap: clamp(48px, 6vw, 96px); }
.motivo { display: grid; grid-template-columns: minmax(0, 6fr) minmax(0, 5fr); gap: clamp(28px, 5vw, 88px); align-items: center; }
.motivo:nth-child(even) .motivo__desenho { order: 2; }
.motivo__desenho { border: 1px solid rgba(236, 220, 194, .16); border-radius: 4px; background: rgba(46, 33, 27, .6); padding: clamp(14px, 2vw, 28px); }
.motivo__desenho svg { width: 100%; height: auto; overflow: visible; }
.motivo h3 { font-size: clamp(28px, 3.1vw, 46px); max-width: 13em; text-wrap: balance; }
.motivo p { margin-top: 18px; max-width: 32em; font-size: clamp(16px, 1.2vw, 18px); line-height: 1.62; color: #d9c9b3; text-wrap: pretty; }
/* traços dos desenhos */
.t { fill: none; stroke: var(--champanhe); stroke-width: 1.4; stroke-linecap: round; stroke-linejoin: round; vector-effect: non-scaling-stroke; }
.t--c { stroke: var(--caramelo-claro); }
.t--f { stroke: rgba(236, 220, 194, .45); stroke-width: 1; }
.t--p { stroke-dasharray: 3 5; }
.m { fill: var(--caramelo-claro); fill-opacity: .16; stroke: none; }
.m--2 { fill: var(--champanhe); fill-opacity: .1; }
.m--3 { fill: var(--caramelo-claro); fill-opacity: .3; }
html.mov .motivo .t:not(.t--p) { stroke-dasharray: 1; stroke-dashoffset: 0; transition: stroke-dashoffset 1.5s cubic-bezier(.6, 0, .2, 1); transition-delay: calc(var(--i, 0) * 70ms); }
html.mov .motivo:not(.entrou) .t:not(.t--p) { stroke-dashoffset: 1; }
html.mov .motivo .t--p, html.mov .motivo .m { transition: opacity .9s ease; transition-delay: calc(.5s + var(--i, 0) * 60ms); }
html.mov .motivo:not(.entrou) .t--p, html.mov .motivo:not(.entrou) .m { opacity: 0; }
html.mov .motivo h3, html.mov .motivo p { transition: opacity .9s ease .2s, transform 1.1s cubic-bezier(.19, 1, .22, 1) .2s; }
html.mov .motivo:not(.entrou) h3, html.mov .motivo:not(.entrou) p { opacity: 0; transform: translateY(22px); }
@media (max-width: 860px) {
  .motivo { grid-template-columns: 1fr; }
  .motivo:nth-child(even) .motivo__desenho { order: 0; }
}

/* ───────── Abertura do modelo (animada) ───────── */
.peca { padding: clamp(22px, 3vw, 40px) var(--margem) clamp(40px, 5vw, 72px); overflow: clip; }
.peca__dentro { max-width: var(--largura); margin: 0 auto; }
.peca__grade { margin-top: clamp(24px, 4vw, 56px); display: grid; grid-template-columns: minmax(0, 6fr) minmax(0, 6fr); gap: clamp(20px, 4vw, 72px); align-items: end; }
.peca h1 { margin-top: 14px; font-size: clamp(60px, 11.5vw, 184px); line-height: .9; letter-spacing: -.035em; font-weight: 320; overflow-wrap: anywhere; }
.peca h1.longo { font-size: clamp(48px, 7.6vw, 118px); }
.peca__descricao { font: 340 clamp(21px, 2vw, 29px)/1.3 var(--serifa); font-variation-settings: "SOFT" 100; letter-spacing: -.01em; text-wrap: balance; max-width: 20em; }
.peca__qualidades { margin-top: 22px; display: flex; flex-wrap: wrap; gap: 8px 22px; font-size: 14.5px; color: var(--suave); }
.peca__qualidades li { display: inline-flex; align-items: center; gap: 9px; }
.peca__qualidades svg { width: 17px; height: 17px; color: var(--caramelo-vivo); }
.peca__acoes { margin-top: 26px; display: flex; flex-wrap: wrap; gap: 10px; }
.peca__acoes + .link-seta { margin-top: 22px; }
.peca__foto { position: relative; margin-top: clamp(28px, 4vw, 60px); aspect-ratio: var(--r, 1.333); max-height: 86vh; width: 100%; border-radius: 4px; overflow: hidden; background: var(--areia); }
.peca__foto img { position: absolute; left: 0; top: -5%; width: 100%; height: 110%; object-fit: cover; }
.peca--retrato .peca__dentro { display: grid; grid-template-columns: minmax(0, 6fr) minmax(0, 5fr); column-gap: clamp(28px, 5vw, 88px); align-items: start; }
.peca--retrato .trilha { grid-column: 1 / -1; }
.peca--retrato .peca__grade { grid-template-columns: 1fr; align-items: start; }
.peca--retrato .peca__foto { max-height: 80vh; }
.peca--retrato h1 { font-size: clamp(56px, 8vw, 128px); }
.peca--sem .peca__grade { padding-bottom: clamp(28px, 5vw, 72px); border-bottom: 1px dashed var(--fio); }

html.mov .peca .peca__foto { transition: clip-path 1.4s cubic-bezier(.19, 1, .22, 1) .25s; clip-path: inset(0); }
html.mov .peca:not(.entrou) .peca__foto { clip-path: inset(100% 0 0 0); }
html.mov .peca .peca__foto img { transform: translate3d(0, calc((var(--p, .5) - .5) * -9%), 0); will-change: transform; }
html.mov .peca .peca__grade > div:last-child > * { transition: opacity .8s ease, transform 1s cubic-bezier(.19, 1, .22, 1); transition-delay: calc(.35s + var(--i, 0) * .09s); }
html.mov .peca:not(.entrou) .peca__grade > div:last-child > * { opacity: 0; transform: translateY(16px); }
@media (max-width: 860px) {
  .peca__grade { grid-template-columns: 1fr; align-items: start; }
  .peca--retrato .peca__dentro { display: block; }
  .peca__acoes .botao { flex: 1 1 100%; }
}

/* ───────── Galeria (estática) ───────── */
.galeria { padding: clamp(10px, 2vw, 24px) var(--margem) clamp(72px, 9vw, 120px); }
.galeria__dentro { max-width: var(--largura); margin: 0 auto; }
.galeria__fileiras { display: flex; flex-wrap: wrap; gap: clamp(8px, 1vw, 14px); }
.galeria__fileiras::after { content: ""; flex-grow: 100000; }
.galeria__foto { position: relative; display: block; flex-grow: calc(var(--r) * 100); flex-basis: calc(var(--r) * var(--base, 250px)); aspect-ratio: var(--r); border-radius: 4px; overflow: hidden; background: var(--areia); cursor: zoom-in; }
.galeria__foto img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; }
.galeria__pe { margin-top: clamp(32px, 4vw, 56px); text-align: center; }
@media (max-width: 700px) { .galeria__fileiras { --base: 150px; } }

/* ───────── Gostou do modelo? (animada) ───────── */
.gostou { position: relative; overflow: clip; padding: clamp(40px, 5vw, 72px) var(--margem); }
.gostou::before { content: ""; position: absolute; inset: 0; background: radial-gradient(46% 60% at 50% 100%, rgba(176, 106, 62, .26), transparent 70%); pointer-events: none; }
.gostou__moldura { position: relative; max-width: var(--largura); margin: 0 auto; padding: clamp(56px, 8vw, 120px) clamp(22px, 5vw, 80px); text-align: center; }
.gostou h2 { font-size: clamp(42px, 6.6vw, 104px); }
.gostou .texto { margin: 24px auto 0; max-width: 30em; font-size: clamp(17px, 1.35vw, 20px); }
.gostou__acoes { margin-top: clamp(28px, 3.4vw, 44px); display: flex; flex-wrap: wrap; justify-content: center; gap: 10px; }
.ponto { position: absolute; background-repeat: repeat; pointer-events: none; }
.ponto--t, .ponto--b { left: 0; right: 0; height: 1.5px; background-image: linear-gradient(90deg, rgba(236, 220, 194, .7) 0 9px, transparent 9px 16px); background-size: 16px 100%; }
.ponto--l, .ponto--r { top: 0; bottom: 0; width: 1.5px; background-image: linear-gradient(180deg, rgba(236, 220, 194, .7) 0 9px, transparent 9px 16px); background-size: 100% 16px; }
.ponto--t { top: 0; transform-origin: 0 50%; }
.ponto--r { right: 0; transform-origin: 50% 0; }
.ponto--b { bottom: 0; transform-origin: 100% 50%; }
.ponto--l { left: 0; transform-origin: 50% 100%; }
html.mov .gostou[data-movimento="animada"] .ponto { transition: transform .8s cubic-bezier(.6, 0, .2, 1); transition-delay: calc(var(--i, 0) * .62s); }
html.mov .gostou[data-movimento="animada"]:not(.entrou) .ponto--t, html.mov .gostou[data-movimento="animada"]:not(.entrou) .ponto--b { transform: scaleX(0); }
html.mov .gostou[data-movimento="animada"]:not(.entrou) .ponto--l, html.mov .gostou[data-movimento="animada"]:not(.entrou) .ponto--r { transform: scaleY(0); }
html.mov .gostou[data-movimento="animada"] .texto, html.mov .gostou[data-movimento="animada"] .gostou__acoes { transition: opacity .9s ease .7s; }
html.mov .gostou[data-movimento="animada"]:not(.entrou) .texto, html.mov .gostou[data-movimento="animada"]:not(.entrou) .gostou__acoes { opacity: 0; }
@media (max-width: 600px) { .gostou__acoes .botao { flex: 1 1 100%; } }

/* ───────── Veja também (estática) ───────── */
.tambem { padding: clamp(72px, 9vw, 130px) var(--margem); }
.tambem__dentro { max-width: var(--largura); margin: 0 auto; }
.tambem h2 { font-size: clamp(38px, 5vw, 72px); }
.tambem__dentro > .texto { margin-top: 16px; }
.tambem__grade { margin-top: clamp(30px, 4vw, 52px); display: grid; grid-template-columns: repeat(5, minmax(0, 1fr)); gap: clamp(12px, 1.6vw, 24px); }
.outra { display: block; text-decoration: none; }
.outra__foto { position: relative; aspect-ratio: 4 / 5; border-radius: 4px; overflow: hidden; background: var(--areia); }
.outra__foto img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; }
.outra h3 { margin-top: 14px; font-size: clamp(22px, 2vw, 29px); }
.outra .link-seta { margin-top: 10px; }
.outra:hover h3, .outra:hover .link-seta { color: var(--caramelo); }
@media (max-width: 1023px) { .tambem__grade { grid-template-columns: repeat(3, minmax(0, 1fr)); } }
@media (max-width: 600px) { .tambem__grade { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 24px 12px; } }