/* Mabi Moveis Planejados - cores medidas na foto de perfil do Instagram (13/10/2026) */
:root {
  --carvao: #262221;
  --carvao-2: #302b29;
  --creme: #F3F0CF;
  --papel: #F8F6E4;
  --tinta: #262221;
  --suave-escuro: #bdb9a2;   /* texto secundario sobre carvao */
  --suave-claro: #5a5348;    /* texto secundario sobre creme */
  --linha-escuro: #453f3b;
  --linha-claro: #d9d5b4;
  /* pecas do simbolo */
  --amarelo: #FEDE28;
  --verde: #09DB88;
  --coral: #F84856;
  --roxo: #472373;
  --serifa: "Young Serif", Georgia, serif;
  --sans: "Hanken Grotesk", "Segoe UI", sans-serif;
  --borda: clamp(1.1rem, 4vw, 4rem);
}

* { box-sizing: border-box; }
html { scroll-behavior: smooth; }
body { margin: 0; background: var(--carvao); color: var(--creme); font-family: var(--sans); font-weight: 300; font-size: 1.05rem; line-height: 1.6; -webkit-font-smoothing: antialiased; }
img { display: block; max-width: 100%; height: auto; }
a { color: inherit; }
h1, h2, h3 { font-family: var(--serifa); font-weight: 400; line-height: 1.08; margin: 0; letter-spacing: -.01em; text-wrap: balance; }
p { margin: 0; }

.rotulo { font-size: .74rem; font-weight: 800; letter-spacing: .2em; text-transform: uppercase; color: var(--suave-escuro); }

/* Topo */
.topo { position: sticky; top: 0; z-index: 20; display: flex; align-items: center; gap: 1.5rem; padding: .7rem var(--borda); background: rgba(38, 34, 33, .94); border-bottom: 1px solid var(--linha-escuro); backdrop-filter: blur(8px); }
.marca { display: flex; align-items: center; gap: .7rem; text-decoration: none; }
.marca-simbolo { width: 44px; height: 44px; border-radius: 10px; }
.marca-texto { display: flex; flex-direction: column; line-height: 1; }
.marca-nome { font-family: var(--serifa); font-size: 1.7rem; letter-spacing: -.02em; }
.marca-desc { font-size: .56rem; font-weight: 800; letter-spacing: .26em; text-transform: uppercase; margin-top: .2rem; color: var(--suave-escuro); }
.menu { display: flex; gap: 1.6rem; margin-left: auto; font-size: .9rem; font-weight: 400; }
.menu a { text-decoration: none; color: var(--suave-escuro); }
.menu a:hover { color: var(--creme); }

.botao { display: inline-block; background: var(--amarelo); color: var(--tinta); font-weight: 800; font-size: 1rem; text-decoration: none; padding: 1rem 1.6rem; border-radius: 999px; transition: transform .15s ease, background .15s ease; }
.botao:hover { background: #ffe95c; transform: translateY(-2px); }
.botao:focus-visible, a:focus-visible, summary:focus-visible { outline: 3px solid var(--verde); outline-offset: 3px; }
.botao-pequeno { padding: .6rem 1.1rem; font-size: .88rem; }
.link-seta { font-weight: 600; text-underline-offset: .3em; text-decoration-color: var(--linha-escuro); }
.link-seta::after { content: " \2193"; }

/* Hero */
.hero { display: grid; grid-template-columns: minmax(0, 1.1fr) minmax(0, .9fr); gap: clamp(1.5rem, 5vw, 5rem); align-items: center; padding: clamp(2rem, 6vw, 5rem) var(--borda) clamp(2.5rem, 6vw, 5rem); }
.hero h1 { font-size: clamp(2.6rem, 6.2vw, 5.4rem); margin: 1.1rem 0 1.4rem; }
.hero-sub { font-size: clamp(1.05rem, 1.5vw, 1.3rem); max-width: 34rem; color: var(--suave-escuro); }
.hero-acoes { display: flex; flex-wrap: wrap; align-items: center; gap: 1.4rem; margin-top: 2.2rem; }
.hero-foto { margin: 0; position: relative; }
.hero-foto img { width: 100%; aspect-ratio: 4 / 5; object-fit: cover; border-radius: 14rem 14rem 1rem 1rem; }
.hero-foto figcaption { font-size: .86rem; color: var(--suave-escuro); margin-top: .9rem; max-width: 26rem; }
/* as quatro pecas do simbolo, uma vez, junto da foto */
.hero-foto::before { content: ""; position: absolute; left: -1.1rem; bottom: 4.6rem; width: 2.2rem; height: 8.8rem; border-radius: 1.1rem; background: linear-gradient(var(--amarelo) 0 25%, var(--coral) 25% 50%, var(--verde) 50% 75%, var(--roxo) 75%); z-index: 1; }

/* Fatos */
.fatos { display: grid; grid-template-columns: repeat(3, 1fr); border-top: 1px solid var(--linha-escuro); border-bottom: 1px solid var(--linha-escuro); }
.fatos div { padding: 1.6rem var(--borda); border-right: 1px solid var(--linha-escuro); }
.fatos div:last-child { border-right: 0; }
.fatos strong { display: block; font-family: var(--serifa); font-weight: 400; font-size: clamp(1.2rem, 2vw, 1.6rem); }
.fatos span { font-size: .92rem; color: var(--suave-escuro); }

/* Secoes */
.secao { padding: clamp(3.5rem, 8vw, 7rem) var(--borda); }
.secao-clara { background: var(--creme); color: var(--tinta); }
.secao-clara .rotulo { color: var(--suave-claro); }
.secao-cabeca { max-width: 46rem; margin-bottom: clamp(2rem, 4vw, 3.2rem); }
.secao-cabeca h2 { font-size: clamp(2rem, 4.2vw, 3.4rem); margin: .8rem 0 1rem; }
.secao-sub { color: var(--suave-escuro); max-width: 36rem; }
.secao-clara .secao-sub { color: var(--suave-claro); }
.nota { margin-top: 2rem; font-size: .96rem; color: var(--suave-escuro); }
.secao-clara .nota { color: var(--suave-claro); }

/* Ambientes: quatro pecas que se encaixam (elemento assinatura) */
.encaixe { display: grid; grid-template-columns: repeat(4, 1fr); gap: .5rem; }
.peca { position: relative; background: var(--carvao-2); border-radius: .9rem; }
.peca img { width: 100%; aspect-ratio: 3 / 4; object-fit: cover; border-radius: .9rem .9rem 0 0; }
.peca-texto { padding: 1.3rem 1.3rem 1.6rem; border-top: 5px solid var(--cor); }
.peca h3 { font-size: 1.45rem; margin-bottom: .5rem; }
.peca p { font-size: .95rem; color: var(--suave-escuro); }
.peca::after { content: ""; position: absolute; top: 37%; right: -1.5rem; width: 2.6rem; height: 2.6rem; border-radius: 50%; background: var(--cor); z-index: 2; box-shadow: 0 0 0 .5rem var(--carvao); }
.peca:last-child::after { display: none; }
.p1 { --cor: var(--amarelo); } .p2 { --cor: var(--coral); } .p3 { --cor: var(--verde); } .p4 { --cor: #7a4fb5; }

/* Galeria */
.galeria { display: grid; grid-template-columns: repeat(4, 1fr); gap: .8rem; grid-auto-flow: dense; }
.galeria figure, .detalhes figure { margin: 0; }
.galeria img { width: 100%; aspect-ratio: 1; object-fit: cover; border-radius: .6rem; }
.g-larga { grid-column: span 2; grid-row: span 2; }
.g-larga img { height: calc(100% - 2.1rem); aspect-ratio: auto; }
.galeria figcaption, .detalhes figcaption { font-size: .84rem; font-weight: 400; padding-top: .55rem; color: var(--suave-claro); }
.secao-clara a { text-underline-offset: .25em; font-weight: 600; }

/* Detalhes */
.detalhes { display: grid; grid-template-columns: repeat(5, 1fr); gap: .8rem; }
.detalhes img { width: 100%; aspect-ratio: 3 / 4; object-fit: cover; border-radius: .6rem; }
.detalhes figcaption { color: var(--suave-escuro); }

/* Etapas */
.etapas { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: repeat(4, 1fr); gap: 2rem; }
.etapas li { border-top: 2px solid var(--tinta); padding-top: 1.2rem; }
.etapa-n { font-family: var(--serifa); font-size: 3.4rem; line-height: 1; display: block; }
.etapas h3 { font-size: 1.4rem; margin: .7rem 0 .5rem; }
.etapas p { font-size: .98rem; color: var(--suave-claro); }

/* Duvidas */
.faq { max-width: 50rem; border-top: 1px solid var(--linha-escuro); }
.faq details { border-bottom: 1px solid var(--linha-escuro); }
.faq summary { cursor: pointer; list-style: none; padding: 1.3rem 2.5rem 1.3rem 0; font-family: var(--serifa); font-size: clamp(1.15rem, 2vw, 1.45rem); position: relative; }
.faq summary::-webkit-details-marker { display: none; }
.faq summary::after { content: "+"; position: absolute; right: .2rem; top: 1.1rem; font-family: var(--sans); font-weight: 300; font-size: 1.8rem; line-height: 1; color: var(--amarelo); }
.faq details[open] summary::after { content: "\2212"; }
.faq p { padding: 0 2.5rem 1.5rem 0; color: var(--suave-escuro); }

/* Chamada */
.chamada { margin: 0 var(--borda) clamp(3rem, 6vw, 5rem); padding: clamp(2.5rem, 7vw, 5.5rem) clamp(1.4rem, 5vw, 4rem); background: var(--creme); color: var(--tinta); border-radius: 1.4rem; text-align: left; }
.chamada h2 { font-size: clamp(2.1rem, 5vw, 4rem); max-width: 18ch; }
.chamada p { margin: 1rem 0 2rem; color: var(--suave-claro); font-size: 1.1rem; }
.chamada .botao { background: var(--tinta); color: var(--creme); }
.chamada .botao:hover { background: #3a3431; }

/* Rodape */
.rodape { padding: 2.5rem var(--borda) 1.6rem; border-top: 1px solid var(--linha-escuro); }
.rodape-linha { display: flex; flex-wrap: wrap; justify-content: space-between; gap: 1.5rem; margin-bottom: 2rem; }
.rodape-contato { list-style: none; margin: 0; padding: 0; font-size: .95rem; color: var(--suave-escuro); display: grid; gap: .35rem; text-align: right; }
.rodape-contato a { text-underline-offset: .25em; text-decoration-color: var(--linha-escuro); }
.rodape-contato a:hover { color: var(--creme); }
.assinatura-studio { padding-top: 1.2rem; border-top: 1px solid var(--linha-escuro); font-family: ui-monospace, "Cascadia Mono", Consolas, monospace; font-size: .68rem; letter-spacing: .06em; color: #9a9684; }
.assinatura-studio a { color: inherit; text-decoration: underline; text-decoration-color: var(--linha-escuro); text-underline-offset: .25em; }
.assinatura-studio a:hover { color: var(--creme); }

/* Telas menores */
@media (max-width: 1100px) {
  .encaixe { grid-template-columns: repeat(2, 1fr); gap: 1rem .5rem; }
  .peca:nth-child(2)::after { display: none; }
  .detalhes { grid-template-columns: repeat(3, 1fr); }
  .etapas { grid-template-columns: repeat(2, 1fr); }
}
@media (max-width: 900px) {
  .menu { display: none; }
  .topo .botao-pequeno { margin-left: auto; }
  .hero { grid-template-columns: 1fr; }
  .hero-foto img { aspect-ratio: 1; border-radius: 9rem 9rem 1rem 1rem; }
  .hero-foto::before { left: -.5rem; }
  .galeria { grid-template-columns: repeat(2, 1fr); }
}
@media (max-width: 700px) {
  .fatos { grid-template-columns: 1fr; }
  .fatos div { border-right: 0; border-bottom: 1px solid var(--linha-escuro); padding-block: 1.1rem; }
  .fatos div:last-child { border-bottom: 0; }
  .encaixe { grid-template-columns: 1fr; gap: 1.6rem; }
  .peca img { aspect-ratio: 4 / 3; }
  .peca::after, .peca:nth-child(2)::after { display: block; top: auto; bottom: -2.1rem; right: auto; left: 2rem; }
  .peca:last-child::after { display: none; }
  .detalhes { grid-template-columns: repeat(2, 1fr); }
  .detalhes figure:last-child { display: none; }
  .etapas { grid-template-columns: 1fr; gap: 1.4rem; }
  .rodape-contato { text-align: left; }
}

/* Entrada do topo: o conteudo e visivel por padrao; a animacao so parte de um estado ja valido */
@media (prefers-reduced-motion: no-preference) {
  .entra { animation: entra .7s cubic-bezier(.2, .7, .2, 1) both; }
  .e1 { animation-delay: .05s; } .e2 { animation-delay: .12s; } .e3 { animation-delay: .24s; } .e4 { animation-delay: .36s; }
  @keyframes entra { from { opacity: 0; transform: translateY(18px); } }
}
@media (prefers-reduced-motion: reduce) { html { scroll-behavior: auto; } }