/* HMK Studio: editorial de showroom. Ladrilho como amostra de material, molduras finas, ficha de visita com canhoto. */

:root {
  --ink: #1F1B16;
  --terra: #B4532A;
  --terra-deep: #8E3F1E;
  --olive: #5E6B4E;
  --sand: #E9DFCF;
  --paper: #FAF6EF;
  --clay: #D9A38A;
  --muted: #5C5249;
  --rule: rgba(31, 27, 22, .16);
  --field: #8A7E72;
  --serif: 'Instrument Serif', Georgia, 'Times New Roman', serif;
  --sans: 'Instrument Sans', system-ui, -apple-system, 'Segoe UI', sans-serif;
  --wrap: 1200px;
  --gut: clamp(16px, 4vw, 40px);
}

*, *::before, *::after { box-sizing: border-box; }
html { scroll-padding-top: 84px; -webkit-text-size-adjust: 100%; }
body { margin: 0; background: var(--paper); color: var(--ink); font: 400 1.0625rem/1.6 var(--sans); overflow-x: hidden; }
img { max-width: 100%; height: auto; display: block; }
a { color: inherit; }
h1, h2, h3 { font-family: var(--serif); font-weight: 400; margin: 0; letter-spacing: -.01em; }
p { margin: 0 0 1em; }
ul, ol { margin: 0; padding: 0; }
:focus-visible { outline: 2px solid var(--terra); outline-offset: 3px; }

.wrap { width: 100%; max-width: var(--wrap); margin: 0 auto; padding: 0 var(--gut); }
.vh { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }
.skip { position: absolute; left: -999px; top: 8px; z-index: 60; background: var(--ink); color: var(--paper); padding: 10px 16px; }
.skip:focus { left: 8px; }

.page { display: none; }
.page.active { display: block; }
html:not(.js) .page:target { display: block; }

.obs { font-size: .875rem; color: var(--muted); margin: 1.5em 0 0; }

/* ---------- botões ---------- */
.btn { display: inline-flex; align-items: center; justify-content: center; gap: 8px; font: 600 1rem/1.2 var(--sans); text-decoration: none; padding: 15px 24px; border: 1px solid transparent; border-radius: 2px; cursor: pointer; transition: background-color .2s, color .2s, border-color .2s; }
.btn-terra { background: var(--terra); color: var(--paper); }
.btn-terra:hover { background: var(--terra-deep); }
.btn-linha { border-color: var(--ink); color: var(--ink); background: transparent; }
.btn-linha:hover { background: var(--ink); color: var(--paper); }
.btn-papel { background: var(--paper); color: var(--ink); }
.btn-papel:hover { background: var(--sand); }
.btn:disabled, .btn:disabled:hover { background: transparent; color: var(--muted); border: 1px dashed var(--field); cursor: not-allowed; }

/* ---------- ladrilho (amostra de material) ---------- */
.lad { --c: var(--terra); display: inline-block; width: 48px; height: 48px; flex: none; border-radius: 2px; background: var(--c);
  box-shadow: inset 0 0 0 4px var(--c), inset 0 0 0 5px rgba(250, 246, 239, .5); }
.lad-casa-mesa { --c: var(--sand); box-shadow: inset 0 0 0 1px rgba(31, 27, 22, .3), inset 0 0 0 4px var(--c), inset 0 0 0 5px rgba(31, 27, 22, .18); }
.lad-decoracao { --c: var(--terra); }
.lad-utilidades { --c: var(--olive); }
.lad-presentes { --c: var(--clay); }
.lad-papelaria { --c: var(--ink); }

/* ---------- topo ---------- */
.topo { position: sticky; top: 0; z-index: 40; background: rgba(250, 246, 239, .96); border-bottom: 1px solid var(--rule); }
.topo-in { display: flex; align-items: center; justify-content: space-between; gap: 24px; min-height: 72px; }
.marca { display: inline-flex; align-items: center; gap: 12px; text-decoration: none; }
.marca span { font: 400 1.45rem/1 var(--serif); letter-spacing: .14em; text-transform: uppercase; }
.nav-links { list-style: none; display: flex; align-items: center; gap: 28px; }
.nav-links a { text-decoration: none; font-size: .975rem; padding: 6px 0; }
.nav-links a:hover { color: var(--terra-deep); text-decoration: underline; text-underline-offset: 6px; text-decoration-thickness: 1px; }
.nav-cta a { background: var(--terra); color: var(--paper); padding: 10px 18px; border-radius: 2px; font-weight: 600; }
.nav-cta a:hover { background: var(--terra-deep); color: var(--paper); text-decoration: none; }
.nav-toggle { display: none; width: 44px; height: 44px; border: 1px solid var(--ink); background: transparent; border-radius: 2px; cursor: pointer; padding: 0; position: relative; }
.nav-toggle span { position: absolute; left: 11px; right: 11px; height: 1.5px; background: var(--ink); transition: transform .2s; }
.nav-toggle span:first-child { top: 17px; }
.nav-toggle span:last-child { top: 25px; }
.nav-toggle[aria-expanded="true"] span:first-child { transform: translateY(4px) rotate(45deg); }
.nav-toggle[aria-expanded="true"] span:last-child { transform: translateY(-4px) rotate(-45deg); }

/* ---------- hero ---------- */
.hero { padding: clamp(48px, 8vw, 104px) 0 clamp(72px, 9vw, 120px); }
.hero-grid { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1.08fr); gap: clamp(32px, 6vw, 80px); align-items: center; }
.hero h1 { font-size: clamp(3rem, 7.2vw, 6.4rem); line-height: .96; max-width: 9.5em; margin-bottom: .42em; }
.lead { font-size: clamp(1.06rem, 1.4vw, 1.2rem); color: var(--muted); max-width: 34em; }
.hero-acoes { display: flex; flex-wrap: wrap; gap: 12px; margin-top: 32px; }

.vitrine { margin: 0; }
.moldura { background: var(--sand); padding: clamp(10px, 1.4vw, 18px); border: 1px solid var(--ink); }
.moldura img { width: 100%; outline: 1px solid rgba(31, 27, 22, .25); }
.vitrine figcaption { display: flex; align-items: flex-start; justify-content: space-between; gap: 20px; }
.vitrine figcaption > span { font: italic 400 1.15rem/1.35 var(--serif); color: var(--muted); padding-top: 14px; max-width: 18em; }
.amostras { list-style: none; display: flex; gap: 6px; margin-top: -26px; padding-right: 18px; }
.amostras a { display: block; transition: transform .25s ease; }
.amostras a:hover { transform: translateY(-6px); }
.js .amostras li { animation: assenta .7s cubic-bezier(.2, .8, .2, 1) both; }
.js .amostras li:nth-child(2) { animation-delay: .08s; }
.js .amostras li:nth-child(3) { animation-delay: .16s; }
.js .amostras li:nth-child(4) { animation-delay: .24s; }
.js .amostras li:nth-child(5) { animation-delay: .32s; }
@keyframes assenta { from { opacity: 0; transform: translateY(-18px); } to { opacity: 1; transform: none; } }

/* ---------- seções ---------- */
.secao { padding: clamp(72px, 10vw, 128px) 0; }
.sec-head { max-width: 40rem; margin-bottom: clamp(36px, 5vw, 56px); }
.sec-head h2, .depo h2, .contato h2 { font-size: clamp(2.3rem, 4.6vw, 3.8rem); line-height: 1.02; margin-bottom: .4em; }
.sec-head p { color: var(--muted); font-size: 1.08rem; }
.sec-head a { color: var(--terra-deep); }

/* linhas: índice de catálogo */
.linhas { padding-top: 0; }
.indice { list-style: none; border-bottom: 1px solid var(--ink); }
.item { display: grid; grid-template-columns: 48px minmax(0, 1fr) minmax(0, 1.25fr) 232px; gap: clamp(20px, 3vw, 40px); align-items: center; padding: 28px 0; border-top: 1px solid var(--ink); }
.item + .item { border-top-color: var(--rule); }
.item h3 { font-size: clamp(1.9rem, 3vw, 2.5rem); line-height: 1.05; }
.fab { margin: 6px 0 0; font-size: .95rem; color: var(--muted); }
.fab::before { content: "fabricante "; }
.item-txt p { margin: 0; }
.item-foto { margin: 0; padding: 6px; border: 1px solid var(--ink); background: var(--paper); }

/* duas portas */
.portas { display: grid; grid-template-columns: 1fr 1fr; }
.porta { padding: clamp(64px, 9vw, 112px) var(--gut); display: flex; }
.porta-loja { background: var(--sand); padding-left: max(var(--gut), calc(50vw - var(--wrap) / 2 + var(--gut))); }
.porta-fab { background: var(--olive); color: var(--paper); }
.porta-in { max-width: 32rem; }
.porta-fab .porta-in { margin-left: clamp(0px, 3vw, 48px); }
.porta h2 { font-size: clamp(2.3rem, 4.4vw, 3.6rem); line-height: 1; margin-bottom: .45em; }
.porta p { font-size: 1.08rem; }
.porta ul { list-style: none; margin: 28px 0 36px; border-top: 1px solid currentColor; }
.porta li { padding: 12px 0 12px 26px; border-bottom: 1px solid var(--rule); position: relative; }
.porta-fab li { border-bottom-color: rgba(250, 246, 239, .3); }
.porta li::before { content: ""; position: absolute; left: 0; top: 19px; width: 11px; height: 11px; border-radius: 1px; background: var(--terra); }
.porta-fab li::before { background: var(--sand); }

/* agendar visita: ficha com canhoto */
.visita { background: var(--sand); }
.visita-grid { display: grid; grid-template-columns: minmax(0, .78fr) minmax(0, 1.6fr); gap: clamp(32px, 5vw, 64px); align-items: start; }
.visita .sec-head { margin-bottom: 0; position: sticky; top: 104px; }
.ficha { display: grid; grid-template-columns: minmax(0, 1.25fr) minmax(0, 1fr); background: var(--paper); border: 1px solid var(--ink); }
.ficha-campos { padding: clamp(22px, 3vw, 36px); }
.campo { border: 0; margin: 0 0 26px; padding: 0; min-width: 0; }
.campo:last-child { margin-bottom: 0; }
.campo > label, .campo legend { display: block; font-weight: 600; margin-bottom: 10px; padding: 0; }
select, input[type=text], input[type=email], textarea { width: 100%; font: inherit; color: var(--ink); background: var(--paper); border: 1px solid var(--field); border-radius: 2px; padding: 12px 14px; }
select { appearance: none; background: var(--paper) url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='8'%3E%3Cpath d='M1 1l5 5 5-5' fill='none' stroke='%231F1B16' stroke-width='1.5'/%3E%3C/svg%3E") no-repeat right 14px center; padding-right: 40px; }
textarea { resize: vertical; }
[aria-invalid="true"] { border-color: var(--terra-deep); box-shadow: inset 0 0 0 1px var(--terra-deep); }

.chips { display: flex; flex-wrap: wrap; gap: 8px; }
.chip, .fmt { position: relative; cursor: pointer; }
.chip input, .fmt input { position: absolute; opacity: 0; width: 1px; height: 1px; }
.chip span { display: inline-flex; align-items: center; gap: 10px; padding: 8px 14px 8px 8px; border: 1px solid var(--field); border-radius: 2px; transition: background-color .15s, border-color .15s; }
.chip .lad { width: 22px; height: 22px; box-shadow: inset 0 0 0 2px var(--c), inset 0 0 0 3px rgba(250, 246, 239, .45); }
.chip .lad-casa-mesa { box-shadow: inset 0 0 0 1px rgba(31, 27, 22, .35); }
.chip input:checked + span { border-color: var(--ink); background: var(--sand); box-shadow: inset 0 0 0 1px var(--ink); }
.chip input:focus-visible + span, .fmt input:focus-visible + span { outline: 2px solid var(--terra); outline-offset: 2px; }
.formatos { display: grid; gap: 8px; }
.fmt span { display: block; padding: 12px 14px 12px 18px; border: 1px solid var(--field); border-radius: 2px; transition: background-color .15s, border-color .15s; }
.fmt b { display: block; font-weight: 600; }
.fmt small { display: block; font-size: .92rem; color: var(--muted); }
.fmt input:checked + span { border-color: var(--ink); background: var(--sand); box-shadow: inset 4px 0 0 var(--terra); }

.canhoto { position: relative; display: flex; flex-direction: column; justify-content: space-between; gap: 24px; padding: clamp(22px, 3vw, 36px); border-left: 2px dashed rgba(31, 27, 22, .35); background: var(--paper); }
.canhoto::before, .canhoto::after { content: ""; position: absolute; left: -12px; width: 22px; height: 22px; border-radius: 50%; background: var(--sand); border: 1px solid var(--ink); }
.canhoto::before { top: -12px; clip-path: inset(50% 0 0 0); }
.canhoto::after { bottom: -12px; clip-path: inset(0 0 50% 0); }
#svc-resultado { min-height: 240px; }
#svc-resultado:not([data-duracao]) { background: repeating-linear-gradient(to bottom, transparent 0 39px, var(--rule) 39px 40px) 0 72px / 100% calc(100% - 72px) no-repeat; }
.fi-vazio { font: italic 400 1.35rem/1.35 var(--serif); color: var(--muted); margin: 0; }
.fi-k { font-size: .875rem; font-weight: 600; color: var(--muted); margin: 0 0 4px; }
.fi-t { font: 400 clamp(2.8rem, 3.8vw, 3.5rem)/1 var(--serif); margin: 0 0 14px; text-wrap: balance; }
.fi-t.cat { font-size: clamp(2rem, 3vw, 2.4rem); line-height: 1.08; }
.fi-l { margin: 0 0 22px; padding-bottom: 18px; border-bottom: 1px solid var(--rule); }
.fi-lev { list-style: none; }
.fi-lev li { position: relative; padding: 3px 0 3px 20px; }
.fi-lev li::before { content: ""; position: absolute; left: 0; top: 11px; width: 9px; height: 9px; background: var(--terra); border-radius: 1px; }
.js #svc-resultado[data-duracao] .fi-t { animation: carimbo .35s ease-out; }
@keyframes carimbo { from { opacity: .2; transform: translateY(6px); } to { opacity: 1; transform: none; } }
#svc-enviar { width: 100%; }

/* como funciona o pedido */
.passos { list-style: none; display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: clamp(20px, 3vw, 40px); position: relative; }
.passos li { padding-top: 22px; position: relative; }
.passos li::before { content: ""; position: absolute; top: 0; left: 0; right: calc(-1 * clamp(20px, 3vw, 40px)); height: 1px; background: var(--ink); }
.passos li:last-child::before { right: 0; }
.passo-n { display: block; font: 400 3.6rem/1 var(--serif); color: var(--terra); margin-bottom: 14px; }
.passos h3 { font-size: 1.7rem; line-height: 1.1; margin-bottom: 10px; }
.passos p { color: var(--muted); margin: 0; }
.js .passos[data-reveal] li::before { transform: scaleX(0); transform-origin: left; transition: transform .8s ease; }
.js .passos[data-reveal].revealed li::before { transform: none; }
.js .passos.revealed li:nth-child(2)::before { transition-delay: .2s; }
.js .passos.revealed li:nth-child(3)::before { transition-delay: .4s; }
.js .passos.revealed li:nth-child(4)::before { transition-delay: .6s; }

/* indicadores */
.numeros { background: var(--ink); color: var(--paper); padding: clamp(56px, 8vw, 96px) 0; }
.num-lista { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 24px; margin: 0; }
.num-lista div { display: flex; flex-direction: column-reverse; border-left: 1px solid rgba(250, 246, 239, .25); padding-left: 24px; }
.num-lista dd { margin: 0; font: 400 clamp(3.6rem, 8vw, 6.6rem)/1 var(--serif); color: var(--sand); }
.num-lista dt { font-size: 1.05rem; margin-top: 8px; }
.numeros .obs { color: var(--sand); }

/* depoimentos */
.depo h2 { margin-bottom: clamp(32px, 4vw, 48px); }
.depo-lista { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: clamp(24px, 4vw, 48px); }
.depo-item { margin: 0; padding-top: 22px; border-top: 1px solid var(--ink); }
.depo-item blockquote { margin: 0 0 20px; }
.depo-item blockquote p { font: 400 1.55rem/1.28 var(--serif); margin: 0; }
.depo-item figcaption { font-size: .95rem; color: var(--muted); }
.depo-item strong { display: block; color: var(--ink); font-weight: 600; }

/* faq */
.faq { padding-top: 0; }
.faq-grid { display: grid; grid-template-columns: minmax(0, .8fr) minmax(0, 1.4fr); gap: clamp(24px, 5vw, 72px); }
.faq-lista { border-top: 1px solid var(--ink); }
.faq-lista details { border-bottom: 1px solid var(--rule); }
.faq-lista summary { list-style: none; cursor: pointer; font: 400 1.4rem/1.25 var(--serif); padding: 20px 40px 20px 0; position: relative; }
.faq-lista summary::-webkit-details-marker { display: none; }
.faq-lista summary::after { content: "+"; position: absolute; right: 4px; top: 18px; font: 400 1.6rem/1 var(--sans); color: var(--terra-deep); }
.faq-lista details[open] summary::after { content: "\2212"; }
.faq-lista details p { color: var(--muted); padding-right: 40px; }

/* contato */
.contato { background: var(--sand); }
.contato-grid { display: grid; grid-template-columns: minmax(0, .9fr) minmax(0, 1.3fr); gap: clamp(32px, 6vw, 80px); align-items: start; }
.contato-info p { color: var(--muted); }
.contato-mail { font: 400 clamp(1.6rem, 3vw, 2.2rem)/1.2 var(--serif); margin-top: 24px; overflow-wrap: anywhere; }
.contato-mail a { color: var(--ink); text-decoration-color: var(--terra); text-underline-offset: 6px; text-decoration-thickness: 1px; }
.form { display: grid; grid-template-columns: 1fr 1fr; gap: 20px; background: var(--paper); border: 1px solid var(--ink); padding: clamp(22px, 3vw, 36px); }
.form .campo { margin: 0; }
.campo-wide { grid-column: 1 / -1; }
.req { font-weight: 400; color: var(--muted); font-size: .9rem; }
.form-resumo { margin: 0; padding: 12px 14px; background: var(--sand); border-left: 4px solid var(--olive); font-size: .95rem; }
.form-erro { margin: 0; color: var(--terra-deep); font-weight: 600; }
.form-pe { display: flex; justify-content: flex-end; }

/* páginas legais */
.legal { max-width: calc(46rem + 2 * var(--gut)); padding-top: 56px; padding-bottom: 96px; }
.legal h1 { font-size: clamp(2.6rem, 6vw, 4rem); line-height: 1; margin: 24px 0 8px; }
.legal-data { color: var(--muted); font-size: .95rem; margin-bottom: 40px; }
.legal h2 { font-size: 1.65rem; margin: 36px 0 10px; }
.legal p { overflow-wrap: anywhere; }
.legal a { color: var(--terra-deep); }
.voltar { color: var(--terra-deep); font-weight: 600; text-underline-offset: 4px; }

/* rodapé */
.rodape { background: var(--ink); color: var(--paper); padding: 72px 0 32px; }
.rodape-grid { display: grid; grid-template-columns: 1.6fr 1fr 1fr 1fr; gap: 32px; }
.rodape-marca img { width: 264px; margin-bottom: 18px; }
.rodape-marca p { color: var(--sand); max-width: 22rem; font-size: .95rem; }
.rodape-col h2 { font: 600 .95rem/1.4 var(--sans); letter-spacing: 0; margin-bottom: 12px; color: var(--sand); }
.rodape-col ul { list-style: none; }
.rodape-col li { margin-bottom: 8px; }
.rodape-col a { text-decoration: none; overflow-wrap: anywhere; }
.rodape-col a:hover { text-decoration: underline; text-underline-offset: 4px; }
.rodape-base { margin-top: 48px; padding-top: 22px; border-top: 1px solid rgba(250, 246, 239, .2); display: flex; flex-wrap: wrap; justify-content: space-between; gap: 8px 24px; font-size: .875rem; color: var(--sand); }
.rodape-base p { margin: 0; }

/* ---------- responsivo ---------- */
@media (max-width: 1040px) {
  .item { grid-template-columns: 48px minmax(0, 1fr) 200px; }
  .item-txt { grid-column: 2 / 3; grid-row: 2; }
  .item-foto { grid-column: 3; grid-row: 1 / span 2; }
  .visita-grid { grid-template-columns: 1fr; }
  .visita .sec-head { position: static; margin-bottom: 8px; }
  .passos { grid-template-columns: repeat(2, minmax(0, 1fr)); row-gap: 40px; }
  .passos li::before, .passos li:last-child::before { right: 0; }
  .rodape-grid { grid-template-columns: 1fr 1fr; }
}

@media (max-width: 880px) {
  .nav-toggle { display: block; }
  .nav-links { display: none; position: absolute; top: 100%; left: 0; right: 0; flex-direction: column; align-items: stretch; gap: 0; background: var(--paper); border-bottom: 1px solid var(--ink); padding: 8px var(--gut) 20px; }
  .nav-links.open { display: flex; }
  .nav-links li { border-bottom: 1px solid var(--rule); }
  .nav-links a { display: block; padding: 14px 0; font-size: 1.05rem; }
  .nav-cta { border-bottom: 0 !important; padding-top: 14px; }
  .nav-cta a { text-align: center; padding: 14px 18px; }
  .hero-grid { grid-template-columns: 1fr; }
  .portas { grid-template-columns: 1fr; }
  .porta-loja { padding-left: var(--gut); }
  .porta-in, .porta-loja .porta-in, .porta-fab .porta-in { margin: 0 auto; max-width: 40rem; width: 100%; }
  .ficha { grid-template-columns: 1fr; }
  .canhoto { border-left: 0; border-top: 2px dashed rgba(31, 27, 22, .35); }
  .canhoto::before { left: -12px; top: -12px; clip-path: inset(0 0 0 50%); }
  .canhoto::after { left: auto; right: -12px; bottom: auto; top: -12px; clip-path: inset(0 50% 0 0); }
  #svc-resultado { min-height: 150px; }
  .depo-lista { grid-template-columns: 1fr; }
  .faq-grid, .contato-grid { grid-template-columns: 1fr; }
}

@media (max-width: 640px) {
  .item { grid-template-columns: 40px minmax(0, 1fr); gap: 14px 16px; padding: 24px 0; }
  .item > .lad { width: 40px; height: 40px; }
  .item-txt { grid-column: 1 / -1; grid-row: auto; }
  .item-foto { grid-column: 1 / -1; grid-row: auto; }
  .num-lista { grid-template-columns: 1fr; gap: 28px; }
  .passos { grid-template-columns: 1fr; }
  .form { grid-template-columns: 1fr; }
  .form-pe .btn { width: 100%; }
  .vitrine figcaption { flex-direction: column-reverse; gap: 0; }
  .amostras { padding-right: 0; margin-left: 12px; }
  .amostras .lad { width: 40px; height: 40px; }
  .rodape-grid { grid-template-columns: 1fr; }
  .rodape-marca img { width: 220px; }
  .hero-acoes .btn { flex: 1 1 100%; }
}

@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { animation: none !important; transition: none !important; }
  .js .passos[data-reveal] li::before { transform: none; }
  html { scroll-behavior: auto; }
}