/* ==========================================================================
   Tema M.AFFONSO — Pisos & Carpetes
   Grid editorial, tipografia Montserrat/Inter, linhas de 1px e acento laranja.
   ========================================================================== */

:root {
    --ink: #231F20;
    --ink-soft: #3a3536;
    --muted: #706D6E;
    --muted-2: #A9A6A7;
    --muted-3: #C9C6C7;
    --line: #E3E3E3;
    --line-dark: #3a3536;
    --soft: #F6F6F6;
    --paper: #ffffff;
    --accent: #F47216;
    --accent-2: #F46F36;
    --font-display: "Montserrat", ui-sans-serif, system-ui, sans-serif;
    --font-body: "Inter", ui-sans-serif, system-ui, sans-serif;
    --gutter: clamp(20px, 4vw, 48px);
    --tex-a: #E8E8E8;
    --tex-b: #F3F3F3;
    --wa: #25D366;
    /* Detalhe de marca: colchete grafite + moldura laranja aberta. */
    --brk-bar: 3px;
    --brk-line: 2px;
    --ease: cubic-bezier(.22, .61, .36, 1);
    /* Largura da coluna de leitura, usada por .prose e pela capa do artigo. */
    --read: 720px;
}

@media (prefers-reduced-motion: reduce) {
    *, *::before, *::after {
        animation-duration: .001ms !important;
        animation-iteration-count: 1 !important;
        transition-duration: .001ms !important;
    }
}

/* Foco visível consistente em todo o tema. */
:where(a, button, input, select, textarea, [tabindex]):focus-visible {
    outline: 2px solid var(--accent);
    outline-offset: 3px;
}

*, *::before, *::after { box-sizing: border-box; }

html { -webkit-text-size-adjust: 100%; }

body {
    margin: 0;
    background: var(--paper);
    color: var(--ink);
    font-family: var(--font-body);
    font-size: 15px;
    line-height: 1.6;
    -webkit-font-smoothing: antialiased;
}

img { max-width: 100%; display: block; }
a { color: inherit; text-decoration: none; }
button { font: inherit; color: inherit; }

h1, h2, h3, h4 {
    font-family: var(--font-display);
    letter-spacing: -0.02em;
    margin: 0;
    text-wrap: balance;
}

p { text-wrap: pretty; }

/* Placeholder de textura usado onde não há imagem cadastrada no CMS. */
.tex {
    background: repeating-linear-gradient(135deg, var(--tex-a) 0 7px, var(--tex-b) 7px 14px);
}

.eyebrow {
    font-family: var(--font-body);
    font-size: 11px;
    letter-spacing: 0.22em;
    color: var(--muted);
    text-transform: uppercase;
}

.eyebrow--accent { color: var(--accent-2); letter-spacing: 0.18em; font-size: 10px; }

.rule { width: 34px; height: 1px; background: var(--accent-2); display: block; flex: none; }

.dot { color: var(--accent); }

/* --------------------------------------------------- Detalhe de moldura --
   Reproduz o grafismo da marca: uma barra grafite à esquerda e uma moldura
   laranja aberta (topo + direita). Usado como acento em blocos-chave. */
.brk { position: relative; }

.brk::before,
.brk::after {
    content: "";
    position: absolute;
    pointer-events: none;
}

.brk::before {
    left: 0;
    top: 12%;
    height: 34%;
    width: var(--brk-bar);
    background: var(--ink);
}

.brk::after {
    left: calc(var(--brk-bar) + 10px);
    right: 0;
    top: 0;
    height: 46%;
    border-top: var(--brk-line) solid var(--accent);
    border-right: var(--brk-line) solid var(--accent);
}

/* Variante clara para blocos sobre fundo grafite. */
.brk--light::before { background: #fff; }

/* Variante compacta, ancorada no canto superior direito. */
.brk--corner::before { left: auto; right: 74px; top: 16px; height: 30px; }
.brk--corner::after { left: auto; top: 16px; right: 16px; width: 46px; height: 46px; }

.sr-only {
    position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px;
    overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; border: 0;
}

/* --------------------------------------------------------------- Topbar -- */

.topbar {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 6px 24px;
    flex-wrap: wrap;
    min-height: 34px;
    padding: 7px var(--gutter);
    background: var(--ink);
    color: #E3E3E3;
    font-size: 11px;
    letter-spacing: 0.14em;
    text-transform: uppercase;
}

.topbar__right { display: flex; gap: 24px; align-items: center; flex-wrap: wrap; }
.topbar__accent { color: var(--accent); }

/* -------------------------------------------------------------- Cabeçalho */

.header {
    position: sticky;
    top: 0;
    z-index: 40;
    display: flex;
    align-items: stretch;
    justify-content: space-between;
    flex-wrap: wrap;
    border-bottom: 1px solid var(--line);
    background: rgba(255, 255, 255, 0.96);
    backdrop-filter: blur(6px);
}

.brand {
    display: flex;
    align-items: center;
    gap: 14px;
    flex: none;
    padding: 0 clamp(16px, 2vw, 40px) 0 var(--gutter);
    border-right: 1px solid var(--line);
}

.brand__mark {
    display: grid;
    grid-template-columns: 11px 11px;
    grid-template-rows: 11px 11px;
    gap: 2px;
    flex: none;
}

.brand__mark span { background: var(--ink); display: block; }
.brand__mark span:last-child { background: var(--muted); }

.brand__text { display: flex; flex-direction: column; gap: 3px; padding: 20px 0; }

.brand__name {
    display: flex;
    align-items: baseline;
    font-family: var(--font-display);
    font-weight: 700;
    font-size: 19px;
    letter-spacing: 0.06em;
    white-space: nowrap;
}

.brand__tagline {
    font-size: 9px;
    letter-spacing: 0.28em;
    color: var(--muted);
    text-transform: uppercase;
}

/* flex: none impede que o lockup encolha junto com a célula da marca; o respiro
   vertical vem de margin — com box-sizing: border-box, padding comeria a altura. */
.brand__logo { flex: none; height: clamp(28px, 3.2vw, 42px); width: auto; margin-block: 14px; }

.nav {
    display: flex;
    align-items: stretch;
    flex-wrap: wrap;
    flex: 1 1 360px;
    min-width: 0;
    min-height: 58px;
}

.nav__item { position: relative; display: flex; align-items: stretch; }

.nav__link {
    display: flex;
    align-items: center;
    gap: 7px;
    padding: 0 clamp(12px, 1.5vw, 26px);
    font-size: 13px;
    font-weight: 500;
    letter-spacing: 0.02em;
    white-space: nowrap;
    transition: color .18s ease;
}

.nav__link:hover, .nav__link[aria-expanded="true"] { color: var(--accent-2); }

.nav__caret { font-size: 9px; color: var(--muted); }

.nav__dropdown {
    position: absolute;
    top: 100%;
    left: 0;
    min-width: 250px;
    background: var(--paper);
    border: 1px solid var(--line);
    border-top: 2px solid var(--accent-2);
    padding: 8px 0;
    z-index: 50;
    box-shadow: 0 18px 40px rgba(35, 31, 32, 0.10);
}

.nav__dropdown a {
    display: block;
    padding: 10px 20px;
    font-size: 13px;
    color: var(--ink-soft);
    transition: background .16s ease, color .16s ease;
}

.nav__dropdown a:hover { background: var(--soft); color: var(--accent-2); }

.header__actions {
    display: flex;
    align-items: stretch;
    flex: 0 1 auto;
    min-height: 58px;
    margin-left: auto;
}

.header__search {
    display: flex;
    align-items: center;
    gap: 9px;
    padding: 18px clamp(14px, 1.6vw, 24px);
    border-left: 1px solid var(--line);
    font-size: 11px;
    letter-spacing: 0.16em;
    color: var(--muted);
    text-transform: uppercase;
    background: none;
    border-top: 0; border-right: 0; border-bottom: 0;
    cursor: pointer;
    transition: color .18s ease;
}

.header__search svg { width: 16px; height: 16px; flex: none; fill: var(--accent); transition: fill .18s ease; }
.header__search:hover { color: var(--ink); }
.header__search:hover svg { fill: var(--ink); }

.header__cta {
    display: flex;
    align-items: center;
    gap: 12px;
    white-space: nowrap;
    padding: 18px clamp(20px, 2.4vw, 44px) 18px clamp(16px, 1.8vw, 32px);
    background: var(--ink);
    color: #fff;
    font-family: var(--font-display);
    font-weight: 600;
    font-size: 12px;
    letter-spacing: 0.16em;
    text-transform: uppercase;
    transition: background .18s ease;
}

.header__cta:hover { background: var(--accent-2); }
.header__cta span { width: 6px; height: 6px; background: var(--accent); display: block; flex: none; }

.header__burger {
    display: none;
    align-items: center;
    gap: 10px;
    padding: 18px var(--gutter);
    border: 0;
    border-left: 1px solid var(--line);
    background: none;
    font-family: var(--font-display);
    font-weight: 600;
    font-size: 11px;
    letter-spacing: 0.16em;
    text-transform: uppercase;
    cursor: pointer;
}

/* Menu mobile em painel deslizante */
.mobile-nav {
    display: block;
    border-bottom: 1px solid var(--line);
    background: var(--paper);
}

.mobile-nav a, .mobile-nav button {
    display: flex;
    align-items: center;
    justify-content: space-between;
    width: 100%;
    padding: 16px var(--gutter);
    border: 0;
    border-bottom: 1px solid var(--line);
    background: none;
    font-size: 14px;
    text-align: left;
    cursor: pointer;
}

.mobile-nav__sub a { padding-left: calc(var(--gutter) + 20px); color: var(--muted); font-size: 13px; }

/* ------------------------------------------------------------------ Busca */

/* ------------------------------------------------------------- Busca ----- 
   A busca abre como camada sobre a página: não empurra o conteúdo e ganha
   destaque com scrim, sombra e campo grande. */
.search-overlay {
    position: fixed;
    inset: 0;
    z-index: 80;
    display: flex;
    flex-direction: column;
}

.search-overlay__scrim {
    position: absolute;
    inset: 0;
    background: rgba(35, 31, 32, 0.52);
    backdrop-filter: blur(3px);
    animation: fade-in .22s var(--ease) both;
}

.search-overlay__panel {
    position: relative;
    background: var(--paper);
    border-bottom: 1px solid var(--line);
    box-shadow: 0 26px 60px rgba(35, 31, 32, 0.26);
    padding: clamp(24px, 3.4vw, 40px) var(--gutter) clamp(20px, 2.6vw, 30px);
    animation: search-drop .26s var(--ease) both;
}

@keyframes fade-in { from { opacity: 0; } to { opacity: 1; } }
@keyframes search-drop {
    from { opacity: 0; transform: translateY(-14px); }
    to { opacity: 1; transform: none; }
}

.search-overlay__head {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 20px;
    margin-bottom: 14px;
}

.search-overlay__logo { height: 30px; width: auto; flex: none; }
.search-overlay__head .eyebrow { margin-right: auto; }

.search-overlay__close {
    border: 1px solid var(--line);
    background: transparent;
    padding: 10px 16px;
    font-family: var(--font-display);
    font-weight: 600;
    font-size: 11px;
    letter-spacing: 0.16em;
    text-transform: uppercase;
    cursor: pointer;
    transition: border-color .18s ease, background .18s ease;
}

.search-overlay__close:hover { border-color: var(--ink); background: var(--soft); }

.search-overlay__field {
    display: flex;
    align-items: center;
    gap: 16px;
    border-bottom: 2px solid var(--ink);
    padding-bottom: 6px;
}

.search-overlay__field svg { width: 24px; height: 24px; flex: none; fill: var(--accent); }

.search-overlay__field input {
    width: 100%;
    border: 0;
    background: transparent;
    padding: 12px 0;
    font-family: var(--font-display);
    font-weight: 600;
    font-size: clamp(20px, 3vw, 32px);
    letter-spacing: -0.02em;
    color: var(--ink);
    outline: none;
}

.search-overlay__field input::placeholder { color: var(--muted-3); font-weight: 500; }
.search-overlay__field input::-webkit-search-cancel-button { -webkit-appearance: none; appearance: none; }

.search-overlay__hint {
    margin: 12px 0 0;
    font-size: 11px;
    letter-spacing: 0.16em;
    color: var(--muted);
    text-transform: uppercase;
}

.search-overlay__results {
    margin-top: 22px;
    display: grid;
    grid-template-columns: 1fr;
    gap: 1px;
    background: var(--line);
    max-height: min(50vh, 420px);
    overflow-y: auto;
    overscroll-behavior: contain;
}

.search-overlay__result {
    display: flex;
    align-items: center;
    gap: 16px;
    padding: 14px 16px;
    background: var(--paper);
    transition: background .16s ease;
}

.search-overlay__result:hover,
.search-overlay__result:focus-visible { background: var(--soft); }

.search-overlay__result img,
.search-overlay__result .tex { width: 56px; height: 56px; flex: none; object-fit: cover; }
.search-overlay__result strong { font-family: var(--font-display); font-size: 15px; font-weight: 600; display: block; }
.search-overlay__result small { display: block; color: var(--muted); font-size: 12px; margin-top: 2px; }
.search-overlay__result span:last-child { min-width: 0; }
.search-overlay__arrow { margin-left: auto; color: var(--accent); flex: none; }

/* -------------------------------------------------------------- Utilitário */

.section { padding: clamp(56px, 8vw, 96px) var(--gutter); }
.section--flush { padding-top: 0; }
.section--tight { padding-block: clamp(40px, 6vw, 72px); }

/* Seção com conteúdo contido: o cabeçalho acompanha a largura do bloco em vez
   de ir até a borda da tela. */
.section--boxed > * { max-width: 1240px; margin-inline: auto; }

.section-head {
    display: flex;
    align-items: flex-end;
    justify-content: space-between;
    gap: 24px 40px;
    flex-wrap: wrap;
    padding-bottom: 28px;
    border-bottom: 1px solid var(--ink);
}

.section-head h2 {
    font-weight: 600;
    font-size: clamp(28px, 4vw, 42px);
    letter-spacing: -0.015em;
}

.section-head .eyebrow { margin-bottom: 18px; display: block; }

.section-head__aside { max-width: 34ch; font-size: 14px; line-height: 1.6; color: var(--muted); }

/* Cabeçalho centrado, para blocos em que o conteúdo também é centralizado. */
.section-head--center { flex-direction: column; align-items: center; text-align: center; }
.section-head--center .eyebrow { margin-bottom: 14px; }

.link-caps {
    font-family: var(--font-display);
    font-weight: 600;
    font-size: 12px;
    letter-spacing: 0.16em;
    text-transform: uppercase;
    white-space: nowrap;
    transition: color .18s ease;
}

.link-caps:hover { color: var(--accent-2); }

.link-caps--light { color: #fff; }
.link-caps--light:hover { color: var(--accent); }

/* Grade de 1px: a linha vem do contorno de cada célula, e não de um fundo
   atrás do grid — assim uma última linha incompleta não vira um bloco cinza. */
.grid-lines {
    display: grid;
    gap: 1px;
    margin-top: 1px;
}

.grid-lines > * { box-shadow: 0 0 0 1px var(--line); }

.grid-lines--3 { grid-template-columns: repeat(3, 1fr); }
.grid-lines--4 { grid-template-columns: repeat(4, 1fr); }

/* Variante arejada: os cards ganham espaço entre si e a moldura de 1px vira um
   contorno leve, deixando a navegação menos densa. */
.grid-lines--airy {
    gap: clamp(20px, 2.4vw, 34px);
    margin-top: clamp(20px, 2.4vw, 34px);
}

/* Categorias: três por linha em qualquer resolução — as células ficam largas
   de propósito, para a foto do ambiente aparecer. */
.grid-lines--cats { grid-template-columns: repeat(3, 1fr); }
.grid-lines--cats .cat-card__figure { aspect-ratio: 5 / 2; }

.grid-lines--airy > * {
    box-shadow: none;
    border: 1px solid var(--line);
    background: var(--paper);
    transition: border-color .22s var(--ease), transform .22s var(--ease), box-shadow .22s var(--ease);
}

.grid-lines--airy .prod-card__body,
.grid-lines--airy .cat-card__body { padding-inline: clamp(18px, 1.8vw, 26px); }

.grid-lines--airy > a:hover,
.grid-lines--airy > a:focus-visible {
    border-color: var(--muted-3);
    transform: translateY(-3px);
    box-shadow: 0 14px 34px rgba(35, 31, 32, .1);
}

/* ------------------------------------------------------------------ Botões */

.btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 14px;
    padding: 19px 32px;
    font-family: var(--font-display);
    font-weight: 600;
    font-size: 12px;
    letter-spacing: 0.16em;
    text-transform: uppercase;
    border: 1px solid transparent;
    cursor: pointer;
    transition: background .18s ease, color .18s ease, border-color .18s ease;
}

.btn--accent { background: var(--accent-2); color: #fff; }
.btn--accent:hover { background: var(--ink); }
.btn--ink { background: var(--ink); color: #fff; }
.btn--ink:hover { background: var(--accent-2); }
.btn--outline { border-color: var(--ink); color: var(--ink); background: transparent; }
.btn--outline:hover { background: var(--ink); color: #fff; }
.btn--outline-accent { border-color: var(--accent); color: var(--accent); background: transparent; }
.btn--outline-accent:hover { background: var(--accent-2); color: #fff; border-color: var(--accent-2); }
.btn--ghost { border-color: var(--line); color: var(--ink); }
.btn--ghost:hover { background: var(--soft); }

/* Outline claro para blocos escuros: preenche a partir da esquerda no hover. */
.btn--outline-light {
    position: relative;
    overflow: hidden;
    border-color: rgba(255, 255, 255, .45);
    color: #fff;
    background: transparent;
    isolation: isolate;
}

.btn--outline-light::before {
    content: "";
    position: absolute;
    inset: 0;
    z-index: -1;
    background: var(--accent-2);
    transform: scaleX(0);
    transform-origin: left;
    transition: transform .32s var(--ease);
}

.btn--outline-light:hover { border-color: var(--accent-2); }
.btn--outline-light:hover::before { transform: scaleX(1); }
.btn--outline-light span { transition: transform .32s var(--ease); }
.btn--outline-light:hover span { transform: translateX(5px); }

/* -------------------------------------------------------------------- Hero --
   Tela cheia: cada slide carrega imagem, texto e chamadas, e o bloco inteiro
   troca junto. Todos os slides ocupam a mesma célula do grid, então a altura
   do hero é a do slide mais alto e nada "pula" na transição. */

.hero {
    position: relative;
    overflow: hidden;
    background: var(--ink);
    border-bottom: 1px solid var(--line);
}

.hero__viewport {
    display: grid;
    min-height: 90vh;
    min-height: 90svh;
}

.hero__slide {
    grid-area: 1 / 1;
    display: grid;
    opacity: 0;
    visibility: hidden;
    transition: opacity .8s var(--ease), visibility .8s;
}

.hero__slide.is-active { opacity: 1; visibility: visible; }

/* Mídia de fundo com aproximação lenta enquanto o slide está no ar. */
.hero__media {
    grid-area: 1 / 1;
    position: relative;
    overflow: hidden;
}

.hero__media img,
.hero__media .tex {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    object-fit: cover;
    object-position: center 85%;
    transform: scale(1.07);
    transition: transform 11s linear;
}

.hero__slide.is-active .hero__media img,
.hero__slide.is-active .hero__media .tex { transform: scale(1); }

/* Dois véus: um lateral, que sustenta o texto à esquerda sobre qualquer foto,
   e um inferior, que separa a barra de controles da imagem. */
.hero__media::after {
    content: "";
    position: absolute;
    inset: 0;
    background:
        linear-gradient(96deg, rgba(18, 15, 16, .95) 0%, rgba(18, 15, 16, .88) 20%, rgba(18, 15, 16, .46) 44%, rgba(18, 15, 16, .08) 70%, rgba(18, 15, 16, 0) 100%),
        linear-gradient(to top, rgba(18, 15, 16, .74), rgba(18, 15, 16, 0) 24%);
}

.hero__body {
    grid-area: 1 / 1;
    position: relative;
    z-index: 2;
    align-self: center;
    justify-self: start;
    width: min(100%, 880px);
    padding: clamp(56px, 8vw, 96px) clamp(28px, 5vw, 64px) clamp(112px, 12vw, 148px) var(--gutter);
    color: #fff;
}

.hero__kicker {
    display: flex;
    align-items: center;
    gap: 14px;
    margin-bottom: clamp(20px, 3vw, 34px);
}

.hero__kicker .eyebrow { color: rgba(255, 255, 255, .74); }

.hero__headline {
    margin: 0;
    font-family: var(--font-display);
    font-weight: 700;
    font-size: clamp(38px, 5.6vw, 76px);
    line-height: 0.99;
    letter-spacing: -0.028em;
    text-wrap: balance;
    color: #fff;
}

.hero__lead {
    margin: clamp(20px, 2.6vw, 32px) 0 0;
    max-width: 46ch;
    font-size: clamp(15px, 1.4vw, 18px);
    line-height: 1.65;
    color: rgba(255, 255, 255, .82);
}

.hero__actions {
    display: flex;
    align-items: center;
    gap: clamp(18px, 3vw, 36px);
    margin-top: clamp(32px, 4.4vw, 52px);
    flex-wrap: wrap;
}

/* Entrada escalonada: a animação reinicia toda vez que .is-active é aplicada. */
@keyframes hero-in {
    from { opacity: 0; transform: translateY(20px); }
    to { opacity: 1; transform: none; }
}

.hero__slide.is-active .hero__kicker { animation: hero-in .7s var(--ease) both .08s; }
.hero__slide.is-active .hero__headline { animation: hero-in .7s var(--ease) both .16s; }
.hero__slide.is-active .hero__lead { animation: hero-in .7s var(--ease) both .26s; }
.hero__slide.is-active .hero__actions { animation: hero-in .7s var(--ease) both .34s; }

/* Cantoneira da marca sobre a imagem. */
.hero__frame {
    position: absolute;
    top: clamp(20px, 2.6vw, 34px);
    right: clamp(20px, 2.6vw, 34px);
    width: clamp(70px, 9vw, 124px);
    height: clamp(48px, 6vw, 84px);
    z-index: 3;
    pointer-events: none;
    border-top: var(--brk-line) solid var(--accent);
    border-right: var(--brk-line) solid var(--accent);
}

.hero__frame::before {
    content: "";
    position: absolute;
    left: -14px;
    top: 0;
    width: var(--brk-bar);
    height: 60%;
    background: #fff;
}

/* Barra de controles: contador, indicadores com progresso, play/pause, setas. */
.hero__ui {
    position: absolute;
    inset: auto 0 0;
    z-index: 4;
    display: flex;
    align-items: center;
    gap: clamp(12px, 2vw, 20px);
    padding: clamp(14px, 2vw, 22px) var(--gutter);
}

.hero__counter {
    font-family: var(--font-display);
    font-weight: 600;
    font-size: 11px;
    letter-spacing: 0.18em;
    color: #fff;
    flex: none;
    font-variant-numeric: tabular-nums;
}

.hero__counter em { font-style: normal; color: var(--accent); }

.hero__dots { display: flex; align-items: center; gap: 10px; flex: 0 1 auto; min-width: 0; margin-right: auto; }

.hero__dots button {
    flex: 1 1 auto;
    width: clamp(38px, 7vw, 92px);
    height: 34px;
    display: flex;
    align-items: center;
    border: 0;
    padding: 0;
    background: none;
    cursor: pointer;
}

.hero__dot-track {
    display: block;
    width: 100%;
    height: 3px;
    background: rgba(255, 255, 255, .38);
    overflow: hidden;
}

.hero__dot-fill {
    display: block;
    height: 100%;
    width: 0;
    background: var(--accent);
    animation-name: hero-progress;
    animation-timing-function: linear;
    animation-fill-mode: forwards;
}

.hero__dots button.is-active .hero__dot-track { background: rgba(255, 255, 255, .6); }
.hero__dots button:hover .hero__dot-track { background: rgba(255, 255, 255, .75); }

@keyframes hero-progress { from { width: 0; } to { width: 100%; } }

@media (prefers-reduced-motion: reduce) {
    .hero__dots button.is-active .hero__dot-track { background: var(--accent); }
    .hero__dot-fill { display: none; }
}

.hero__ctrl {
    flex: none;
    width: 44px;
    height: 44px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    border: 1px solid rgba(255, 255, 255, .42);
    background: rgba(18, 15, 16, .34);
    color: #fff;
    cursor: pointer;
    transition: background .18s ease, border-color .18s ease;
}

.hero__ctrl svg { width: 16px; height: 16px; fill: currentColor; }
.hero__ctrl:hover { background: var(--accent-2); border-color: var(--accent-2); }

.hero__nav { display: flex; gap: 8px; flex: none; }

/* Faixa de selos abaixo do hero */
.badges {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(min(100%, 260px), 1fr));
    gap: 1px;
    background: var(--line);
    border-bottom: 1px solid var(--line);
}

.badges__item {
    display: flex;
    align-items: flex-start;
    gap: 14px;
    padding: 26px var(--gutter);
    background: var(--paper);
    font-size: 13px;
    line-height: 1.5;
    color: var(--ink-soft);
}

.badges__item span { width: 8px; height: 8px; background: var(--accent); display: block; flex: none; margin-top: 6px; }

/* -------------------------------------------------------------- Categorias */

.cat-card {
    display: block;
    background: var(--paper);
    padding-bottom: 30px;
    transition: background .3s var(--ease);
}

.cat-card:hover { background: #FAFAFA; }

/* Proporção fixa em vez de altura fixa: em monitores largos a célula cresce e
   a foto acompanharia só na largura, achatando o enquadramento. */
.cat-card__figure { aspect-ratio: 4 / 3; position: relative; overflow: hidden; background: var(--soft); }
.cat-card__figure img { width: 100%; height: 100%; object-fit: cover; }
.cat-card__figure .tex { position: absolute; inset: 0; }

.cat-card__tag {
    position: absolute;
    bottom: 14px;
    left: 14px;
    font-size: 10px;
    letter-spacing: 0.16em;
    color: var(--muted);
    text-transform: uppercase;
    background: var(--paper);
    padding: 7px 10px;
}

.cat-card__body { padding: 26px 28px 0; }

.cat-card__head {
    display: flex;
    align-items: baseline;
    justify-content: space-between;
    gap: 16px;
}

.cat-card__head h3 { font-weight: 600; font-size: 21px; letter-spacing: -0.01em; }
.cat-card__count { font-size: 11px; color: var(--muted); white-space: nowrap; }
.cat-card__body p { margin: 12px 0 0; font-size: 14px; line-height: 1.6; color: var(--muted); }

/* --------------------------------------------------------------- Manifesto */

.manifesto {
    background: var(--ink);
    color: #fff;
    display: grid;
    grid-template-columns: 0.9fr 1.1fr;
}

.manifesto__copy { padding: clamp(56px, 8vw, 88px) clamp(28px, 4vw, 56px) clamp(56px, 8vw, 88px) var(--gutter); }

.manifesto__copy h2 {
    font-weight: 700;
    font-size: clamp(30px, 4.4vw, 46px);
    line-height: 1.06;
    letter-spacing: -0.02em;
}

.manifesto__copy p { margin: 32px 0 0; max-width: 42ch; font-size: 16px; line-height: 1.7; color: var(--muted-3); }

.manifesto__grid {
    display: grid;
    grid-template-columns: 1fr 1fr;
    /* Linhas de mesma altura: os títulos das quatro caixas ficam alinhados
       entre si mesmo quando um texto ocupa uma linha a mais. */
    grid-auto-rows: 1fr;
    border-left: 1px solid var(--line-dark);
}

.manifesto__cell {
    display: flex;
    flex-direction: column;
    padding: clamp(32px, 4vw, 46px) clamp(24px, 3vw, 40px);
    border-bottom: 1px solid var(--line-dark);
}

.manifesto__cell:nth-child(even) { border-left: 1px solid var(--line-dark); }
.manifesto__cell:nth-last-child(-n+2) { border-bottom: 0; }

.manifesto__num {
    display: block;
    margin-bottom: 16px;
    font-family: var(--font-display);
    font-weight: 700;
    font-size: 12px;
    letter-spacing: 0.18em;
    color: var(--accent);
    font-variant-numeric: tabular-nums;
}

.manifesto__cell strong { font-family: var(--font-display); font-weight: 600; font-size: 18px; display: block; }
.manifesto__cell p { margin: 12px 0 0; font-size: 14px; line-height: 1.65; color: var(--muted-2); }
.manifesto__cell--cta { justify-content: center; align-items: flex-start; }

.link-accent {
    display: inline-flex;
    align-items: center;
    gap: 14px;
    font-family: var(--font-display);
    font-weight: 600;
    font-size: 12px;
    letter-spacing: 0.16em;
    text-transform: uppercase;
    color: var(--accent);
}

/* -------------------------------------------------------------- Aplicações */

.apps-grid { display: grid; grid-template-columns: 1.4fr 1fr 1fr; gap: 1px; background: var(--line); margin-top: 1px; }

.apps-cell { background: var(--paper); display: flex; flex-direction: column; }
.apps-cell__figure { position: relative; overflow: hidden; }
.apps-cell__figure img { width: 100%; height: 100%; object-fit: cover; }
.apps-cell__figure .tex { position: absolute; inset: 0; }
.apps-cell__figure--lg { aspect-ratio: 4 / 3; max-height: 520px; width: 100%; }
.apps-cell__figure--md { aspect-ratio: 4 / 3; max-height: 400px; width: 100%; }
.apps-cell__figure--sm { aspect-ratio: 4 / 3; max-height: 280px; width: 100%; }

.apps-cell__caption {
    position: absolute;
    bottom: 14px;
    left: 14px;
    background: var(--paper);
    padding: 8px 11px;
    font-size: 10px;
    letter-spacing: 0.16em;
    color: var(--muted);
    text-transform: uppercase;
}

.apps-cell__body { padding: 22px 26px; }
.apps-cell__body--split { border-bottom: 1px solid var(--line); }
.apps-cell__body h3 { font-weight: 600; font-size: 18px; }
.apps-cell__body p { margin: 8px 0 0; font-size: 13px; color: var(--muted); }
.apps-cell__body--lead { padding: 24px 26px 26px; }
.apps-cell__body--lead h3 { font-size: 24px; margin-top: 12px; }
.apps-cell__body--lead p { font-size: 14px; margin-top: 10px; }
.apps-cell__note { padding: 28px 26px; flex: 1; display: flex; align-items: flex-end; font-size: 14px; line-height: 1.6; color: var(--ink-soft); }

/* --------------------------------------------------------------- CTA duplo */

/* Chamada final compacta: o bloco deixou de ser fluido (largura contida e
   centralizada na página) e a copy fica centralizada dentro da própria coluna,
   em vez de colada na borda esquerda com um vazio enorme até os quatro pontos. */
.split {
    max-width: 1180px;
    margin-inline: auto;
    padding: clamp(32px, 5vw, 56px) var(--gutter);
}

/* Fecha o vão entre o bloco anterior (depoimentos na home, posts no blog,
   galeria no portfólio) e a chamada de orçamento. */
.section--tight + .split {
    padding-top: clamp(8px, 2vw, 20px);
}

.section--tight:has(+ .split) {
    padding-bottom: clamp(12px, 2vw, 24px);
}

.split__inner {
    display: grid;
    grid-template-columns: 0.9fr 1.1fr;
    align-items: stretch;
    border: 1px solid var(--line);
}

.split__copy {
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    text-align: center;
    padding: clamp(32px, 4vw, 48px) clamp(24px, 3vw, 40px);
    border-right: 1px solid var(--line);
}

.split__copy .eyebrow { display: block; margin-bottom: 14px; }
.split__copy h2 { font-weight: 600; font-size: clamp(24px, 2.6vw, 30px); line-height: 1.15; letter-spacing: -0.015em; max-width: 16ch; }
.split__copy p { margin: 14px 0 0; max-width: 38ch; font-size: 15px; line-height: 1.65; color: var(--ink-soft); }
.split__copy .btn { margin-top: 24px; align-self: center; }

.split__facts {
    display: grid;
    grid-template-columns: 1fr 1fr;
    background: var(--soft);
}

.fact {
    display: flex;
    flex-direction: column;
    justify-content: center;
    padding: clamp(20px, 2.4vw, 28px) clamp(18px, 2vw, 26px);
    border-bottom: 1px solid var(--line);
}

.fact:nth-child(odd) { border-right: 1px solid var(--line); }

/* Sem borda inferior só na última linha — funciona com número par ou ímpar de
   destaques (o penúltimo só está na última linha quando é da coluna esquerda). */
.fact:last-child,
.fact:nth-last-child(2):nth-child(odd) { border-bottom: 0; }

.fact span {
    display: flex;
    align-items: center;
    gap: 10px;
    font-family: var(--font-display);
    font-weight: 600;
    font-size: 11px;
    letter-spacing: 0.18em;
    color: var(--ink);
    text-transform: uppercase;
}

/* Quadradinho laranja: o mesmo marcador da faixa de selos do topo. */
.fact span::before {
    content: "";
    width: 8px;
    height: 8px;
    flex: none;
    background: var(--accent);
}

.fact p { margin: 8px 0 0; font-size: 14px; line-height: 1.55; color: var(--ink-soft); }

/* ------------------------------------------------------------- Localização */

.locate {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(min(100%, 420px), 1fr));
    border-top: 1px solid var(--line);
    background: var(--ink);
    color: #fff;
}

.locate__copy { min-width: 0; padding: clamp(48px, 7vw, 76px) clamp(24px, 3vw, 44px) clamp(48px, 7vw, 76px) var(--gutter); }
.locate__copy h2 { margin: 22px 0 0; font-weight: 600; font-size: clamp(26px, 3.6vw, 36px); line-height: 1.1; letter-spacing: -0.02em; }
.locate__copy > p { margin: 18px 0 0; font-size: 15px; line-height: 1.7; color: var(--muted-3); }
.locate__block { margin-top: 26px; border-top: 1px solid var(--line-dark); padding-top: 22px; }
.locate__block:first-of-type { margin-top: 38px; }
.locate__block span { font-size: 10px; letter-spacing: 0.18em; color: var(--muted); text-transform: uppercase; display: block; }
.locate__block p { margin: 10px 0 0; font-size: 15px; line-height: 1.6; }
.locate__copy .btn { margin-top: 34px; }

.locate__map { position: relative; min-height: 420px; border-left: 1px solid var(--line-dark); }
.locate__map iframe { position: absolute; inset: 0; width: 100%; height: 100%; border: 0; filter: grayscale(1) contrast(1.05); }
.locate__map .tex { position: absolute; inset: 0; }

/* ------------------------------------------------------------- Catálogo/PLP */

/* Faixa própria: altura fixa, itens centralizados na vertical e respiro antes
   do conteúdo da página. */
.crumb {
    display: flex;
    align-items: center;
    flex-wrap: wrap;
    gap: 4px 10px;
    /* O respiro é da própria faixa: com margem externa o texto ficava centrado
       na caixa, mas alto demais em relação ao vão até o conteúdo. */
    min-height: clamp(76px, 8vw, 96px);
    padding: 16px var(--gutter);
    font-size: 11px;
    letter-spacing: 0.16em;
    color: var(--muted);
    text-transform: uppercase;
}

.crumb__sep { color: var(--muted-3); }

.crumb a:hover { color: var(--accent-2); }
.crumb strong { color: var(--ink); font-weight: 400; }

.plp-head {
    display: grid;
    grid-template-columns: 1.2fr 1fr;
    gap: 48px;
    padding: 34px var(--gutter) 46px;
    align-items: end;
    border-bottom: 1px solid var(--ink);
}

.plp-head h1 { font-weight: 700; font-size: clamp(34px, 5.2vw, 56px); letter-spacing: -0.025em; }
.plp-head p { margin: 20px 0 0; max-width: 58ch; font-size: 17px; line-height: 1.65; color: var(--ink-soft); }

.plp-stats { display: flex; gap: 1px; background: var(--line); }
.plp-stats__item { background: var(--paper); padding: 18px 22px; flex: 1; }
.plp-stats__item strong { font-family: var(--font-display); font-weight: 700; font-size: 24px; display: block; }
.plp-stats__item span { margin-top: 6px; display: block; font-size: 10px; letter-spacing: 0.16em; color: var(--muted); text-transform: uppercase; }

.plp-body { display: grid; grid-template-columns: minmax(0, 268px) minmax(0, 1fr); }

.plp-aside {
    min-width: 0;
    border-right: 1px solid var(--line);
    padding: 40px 32px 80px var(--gutter);
}

.filter-group { margin-top: 34px; border-top: 1px solid var(--line); padding-top: 18px; }
.filter-group__title { font-family: var(--font-display); font-weight: 600; font-size: 13px; letter-spacing: 0.04em; text-transform: uppercase; }
.filter-group__list { display: flex; flex-direction: column; gap: 11px; margin-top: 16px; }

.filter-option {
    display: flex;
    align-items: center;
    gap: 11px;
    font-size: 14px;
    color: var(--ink-soft);
    transition: color .16s ease;
}

.filter-option:hover { color: var(--accent-2); }
.filter-option span { width: 11px; height: 11px; border: 1px solid var(--muted); display: block; flex: none; }
.filter-option.is-active span { background: var(--accent-2); border-color: var(--accent-2); }
.filter-option.is-active { color: var(--ink); font-weight: 500; }

.aside-note { margin-top: 40px; padding: 24px 22px; background: var(--soft); }
.aside-note strong { font-family: var(--font-display); font-weight: 600; font-size: 14px; }
.aside-note p { margin: 10px 0 16px; font-size: 13px; line-height: 1.6; color: var(--muted); }
.aside-note a { font-size: 11px; letter-spacing: 0.14em; text-transform: uppercase; color: var(--accent-2); }

.plp-main { padding: 40px var(--gutter) 90px 40px; min-width: 0; }

.plp-toolbar {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 16px;
    flex-wrap: wrap;
    border-bottom: 1px solid var(--line);
    padding-bottom: 18px;
}

.chips { display: flex; gap: 10px; flex-wrap: wrap; }

.chip {
    display: inline-flex;
    align-items: center;
    gap: 10px;
    padding: 8px 14px;
    border: 1px solid var(--line);
    font-size: 12px;
    color: var(--ink-soft);
}

.chip span { color: var(--muted); }
.chip:hover { border-color: var(--ink); }

.plp-sort { font-size: 11px; letter-spacing: 0.14em; color: var(--muted); text-transform: uppercase; }

/* ------------------------------------------------------- Card de produto -- */

.prod-card {
    display: block;
    background: var(--paper);
    padding-bottom: 24px;
    transition: background .3s var(--ease);
}

.prod-card:hover { background: #FAFAFA; }
/* Cantoneira da marca revelada na interação com o card. */
.prod-card, .cat-card { position: relative; }

.prod-card::after, .cat-card::after {
    content: "";
    position: absolute;
    top: 14px;
    right: 14px;
    width: 34px;
    height: 34px;
    border-top: var(--brk-line) solid var(--accent);
    border-right: var(--brk-line) solid var(--accent);
    opacity: 0;
    transform: translate(10px, -10px);
    filter: drop-shadow(0 1px 4px rgba(18, 15, 16, .45));
    transition: opacity .28s var(--ease), transform .28s var(--ease);
    pointer-events: none;
    z-index: 2;
}

.prod-card:hover::after, .prod-card:focus-visible::after,
.cat-card:hover::after, .cat-card:focus-visible::after { opacity: 1; transform: none; }

.prod-card__figure { aspect-ratio: 4 / 3; position: relative; overflow: hidden; background: var(--soft); }
.prod-card__figure img { width: 100%; height: 100%; object-fit: cover; }
.prod-card__figure .tex { position: absolute; inset: 0; }

.prod-card__code {
    position: absolute;
    top: 0;
    right: 0;
    padding: 10px 12px;
    background: var(--paper);
    font-size: 10px;
    letter-spacing: 0.12em;
    color: var(--muted);
}

.prod-card__body { padding: 22px 24px 0; }
.prod-card__collection { font-size: 10px; letter-spacing: 0.18em; color: var(--accent-2); text-transform: uppercase; }
.prod-card__body h3 { margin: 11px 0 0; font-weight: 600; font-size: 19px; }
.prod-card__meta { display: flex; gap: 18px; flex-wrap: wrap; margin-top: 14px; font-size: 13px; color: var(--muted); }

.prod-card--sm { padding-bottom: 22px; }
.prod-card--sm .prod-card__figure { aspect-ratio: 4 / 3; }
.prod-card--sm .prod-card__body { padding: 20px 22px 0; }
.prod-card--sm h3 { font-size: 17px; }

.empty-state {
    grid-column: 1 / -1;
    background: var(--paper);
    padding: 64px 32px;
    text-align: center;
    color: var(--muted);
}

/* ------------------------------------------------------------- Paginação -- */

.pagination {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 8px;
    flex-wrap: wrap;
    margin-top: 48px;
}

.pagination a, .pagination span {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-width: 44px;
    padding: 12px 16px;
    border: 1px solid var(--line);
    font-family: var(--font-display);
    font-weight: 600;
    font-size: 12px;
    letter-spacing: 0.08em;
}

.pagination a:hover { border-color: var(--ink); }
.pagination .is-current { background: var(--ink); color: #fff; border-color: var(--ink); }
.pagination .is-disabled { color: var(--muted-3); }

/* ---------------------------------------------------------------- PDP ----- */

.pdp { display: grid; grid-template-columns: 1.15fr 0.85fr; border-top: 1px solid var(--line); }

.pdp__gallery { border-right: 1px solid var(--line); min-width: 0; }
/* A vitrine da PDP usa proporção + teto de altura: sem isso, em telas largas
   a moldura virava uma faixa panorâmica e a foto aparecia super recortada. */
.pdp__stage {
    width: 100%;
    aspect-ratio: 4 / 3;
    max-width: min(100%, 900px);
    margin-inline: auto;
    position: relative;
    overflow: hidden;
    background: var(--soft);
}
.pdp__stage img { width: 100%; height: 100%; object-fit: cover; }
.pdp__stage .tex { position: absolute; inset: 0; }

/* Setas sobre a foto em destaque: aparecem no hover e sempre que a vitrine
   recebe foco pelo teclado. */
.pdp__arrow {
    position: absolute;
    top: 50%;
    z-index: 3;
    width: 48px;
    height: 48px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    border: 1px solid var(--line);
    border-radius: 50%;
    background: var(--paper);
    color: var(--ink);
    cursor: pointer;
    box-shadow: 0 10px 26px rgba(18, 15, 16, .2);
    opacity: 0;
    transition: opacity .22s var(--ease), background .18s ease, border-color .18s ease, color .18s ease, transform .18s var(--ease);
}

.pdp__arrow svg { width: 18px; height: 18px; fill: currentColor; }
.pdp__arrow--prev { left: 16px; transform: translate(-6px, -50%); }
.pdp__arrow--next { right: 16px; transform: translate(6px, -50%); }

.pdp__stage:hover .pdp__arrow,
.pdp__stage:focus-within .pdp__arrow,
.pdp__stage:focus-visible .pdp__arrow { opacity: 1; transform: translate(0, -50%); }

.pdp__arrow:hover { background: var(--ink); border-color: var(--ink); color: #fff; }

.pdp__counter {
    position: absolute;
    right: 16px;
    bottom: 16px;
    z-index: 3;
    padding: 8px 12px;
    background: rgba(18, 15, 16, .62);
    color: #fff;
    font-family: var(--font-display);
    font-weight: 600;
    font-size: 11px;
    letter-spacing: 0.16em;
    font-variant-numeric: tabular-nums;
}

.pdp__counter em { font-style: normal; color: var(--accent); }

/* Sem hover (toque), as setas ficam sempre visíveis. */
@media (hover: none) {
    .pdp__arrow { opacity: 1; transform: translate(0, -50%); }
}

.pdp__caption {
    position: absolute;
    bottom: 20px;
    left: 20px;
    background: var(--paper);
    padding: 10px 14px;
    font-size: 10px;
    letter-spacing: 0.16em;
    color: var(--muted);
    text-transform: uppercase;
}

/* Faixa de miniaturas em uma linha: produtos de catalogo chegam com dezenas de
   fotos e uma grade cresceria indefinidamente. */
/* Grade em várias linhas: a faixa rolável escondia metade das fotos. */
.pdp__thumbs {
    max-width: min(100%, 900px);
    margin-inline: auto;
    display: grid;
    grid-template-columns: repeat(var(--thumb-columns, 4), 1fr);
    gap: clamp(10px, 1.2vw, 16px);
    padding: clamp(14px, 1.6vw, 22px) 2px;
}

.pdp__thumb {
    aspect-ratio: 4 / 3;
    border: 1px solid var(--line);
    padding: 0;
    background: none;
    cursor: pointer;
    overflow: hidden;
    position: relative;
    transition: border-color .2s var(--ease), transform .2s var(--ease);
}

.pdp__thumb img { width: 100%; height: 100%; object-fit: cover; }
.pdp__thumb:hover { border-color: var(--muted-3); transform: translateY(-2px); }
.pdp__thumb.is-active { border-color: var(--accent-2); outline: 1px solid var(--accent-2); outline-offset: -2px; }

.pdp__info { padding: clamp(36px, 5vw, 52px) var(--gutter) 60px clamp(28px, 3.4vw, 44px); min-width: 0; }
.pdp__collection { font-size: 11px; letter-spacing: 0.2em; color: var(--accent-2); text-transform: uppercase; }
.pdp__info h1 { margin: 18px 0 0; font-weight: 700; font-size: clamp(34px, 4.8vw, 52px); letter-spacing: -0.025em; line-height: 1.02; }
.pdp__ref { margin-top: 14px; font-size: 12px; letter-spacing: 0.1em; color: var(--muted); }
.pdp__desc { margin: 26px 0 0; font-size: 16px; line-height: 1.7; color: var(--ink-soft); }
.pdp__desc p { margin: 0 0 14px; }
.pdp__desc ul { margin: 0 0 14px; padding-left: 20px; }

.pdp__price { margin-top: 28px; font-family: var(--font-display); font-weight: 700; font-size: 28px; }
.pdp__price small { display: block; font-family: var(--font-body); font-weight: 400; font-size: 12px; letter-spacing: 0.14em; color: var(--muted); text-transform: uppercase; margin-top: 6px; }

.pdp__colors { margin-top: 36px; }
.pdp__colors > span { font-size: 10px; letter-spacing: 0.2em; color: var(--muted); text-transform: uppercase; display: block; }
.pdp__swatches { display: flex; gap: 10px; margin-top: 14px; flex-wrap: wrap; }

.swatch {
    width: 46px;
    height: 46px;
    border: 0;
    padding: 0;
    background-size: cover;
    background-position: center;
    cursor: pointer;
}

.swatch {
    transition: transform .18s var(--ease), outline-color .18s ease;
    outline: 1px solid transparent;
    outline-offset: 2px;
}

.swatch:hover { transform: scale(1.08); outline-color: var(--muted-3); }
.swatch.is-active { outline-color: var(--ink); }

.pdp__swatches-hint { margin: 14px 0 0; font-size: 12px; color: var(--muted); }

/* Ficha técnica: o resto das linhas fica atrás deste botão. */
.spec-toggle {
    display: inline-flex;
    align-items: center;
    gap: 12px;
    margin-top: 20px;
    padding: 14px 22px;
    border: 1px solid var(--line);
    background: transparent;
    font-family: var(--font-display);
    font-weight: 600;
    font-size: 11px;
    letter-spacing: 0.16em;
    text-transform: uppercase;
    cursor: pointer;
    transition: border-color .18s ease, background .18s ease;
}

.spec-toggle:hover { border-color: var(--ink); background: var(--soft); }
.spec-toggle__icon { color: var(--accent-2); transition: transform .24s var(--ease); }
.spec-toggle__icon.is-open { transform: rotate(180deg); }

/* Ampliação da textura da cor. */
.lightbox { position: fixed; inset: 0; z-index: 90; display: grid; place-items: center; padding: clamp(16px, 4vw, 48px); }

.lightbox__scrim {
    position: absolute;
    inset: 0;
    background: rgba(18, 15, 16, .78);
    backdrop-filter: blur(4px);
    animation: fade-in .2s var(--ease) both;
}

.lightbox__panel {
    position: relative;
    max-width: min(100%, 760px);
    background: var(--paper);
    box-shadow: 0 30px 70px rgba(18, 15, 16, .4);
    animation: lightbox-in .26s var(--ease) both;
}

@keyframes lightbox-in {
    from { opacity: 0; transform: scale(.96); }
    to { opacity: 1; transform: none; }
}

.lightbox__panel img { display: block; width: 100%; max-height: 72vh; object-fit: contain; background: var(--soft); }

.lightbox__caption { display: flex; align-items: baseline; gap: 14px; flex-wrap: wrap; padding: 18px 22px; }
.lightbox__caption strong { font-family: var(--font-display); font-weight: 600; font-size: 17px; }
.lightbox__caption small { font-size: 11px; letter-spacing: 0.14em; color: var(--muted); text-transform: uppercase; }

.lightbox__close {
    position: absolute;
    top: 10px;
    right: 10px;
    width: 44px;
    height: 44px;
    display: grid;
    place-items: center;
    border: 0;
    background: rgba(18, 15, 16, .62);
    color: #fff;
    font-size: 26px;
    line-height: 1;
    cursor: pointer;
    transition: background .18s ease;
}

.lightbox__close:hover { background: var(--accent-2); }

/* Ação única e larga: o orçamento é o próximo passo da página. */
.pdp__actions { margin-top: 40px; }

.pdp__cta {
    width: 100%;
    max-width: 420px;
    padding-block: 22px;
    font-size: 13px;
}

.pdp__actions-note {
    margin: 14px 0 0;
    max-width: 46ch;
    font-size: 13px;
    line-height: 1.6;
    color: var(--muted);
}

.pdp__actions-note strong { color: var(--ink); font-weight: 600; }
.pdp__actions .btn { flex: 1 1 200px; padding-block: 21px; }

.spec-table { margin-top: 44px; border-top: 1px solid var(--ink); }

.spec-row {
    display: grid;
    grid-template-columns: 0.9fr 1.1fr;
    gap: 20px;
    padding: 14px 0;
    border-bottom: 1px solid var(--line);
}

.spec-row dt { font-size: 11px; letter-spacing: 0.12em; color: var(--muted); text-transform: uppercase; margin: 0; }
.spec-row dd { font-size: 14px; color: var(--ink); margin: 0; }

.pdp-apply { display: grid; grid-template-columns: 1fr 1fr; border-top: 1px solid var(--line); }
.pdp-apply__figure { height: 440px; position: relative; border-right: 1px solid var(--line); overflow: hidden; }
.pdp-apply__figure img { width: 100%; height: 100%; object-fit: cover; }
.pdp-apply__figure .tex { position: absolute; inset: 0; }
.pdp-apply__copy { padding: clamp(44px, 6vw, 72px) var(--gutter); display: flex; flex-direction: column; justify-content: center; }
.pdp-apply__copy h2 { margin: 20px 0 0; font-weight: 600; font-size: clamp(24px, 3.2vw, 34px); letter-spacing: -0.015em; }
.pdp-apply__copy p { margin: 18px 0 0; max-width: 48ch; font-size: 16px; line-height: 1.7; color: var(--ink-soft); }

.stat-strip { display: grid; grid-template-columns: repeat(3, 1fr); gap: 1px; background: var(--line); margin-top: 36px; }
.stat-strip div { background: var(--paper); padding: 20px 18px; }
.stat-strip strong { font-family: var(--font-display); font-weight: 700; font-size: 20px; display: block; }
.stat-strip span { margin-top: 6px; display: block; font-size: 12px; color: var(--muted); }

/* ------------------------------------------------------------ Orçamento -- */

.quote { display: grid; grid-template-columns: repeat(auto-fit, minmax(min(100%, 420px), 1fr)); border-top: 1px solid var(--line); }

.quote__main {
    min-width: 0;
    padding: clamp(40px, 6vw, 56px) clamp(24px, 4vw, 64px) clamp(64px, 9vw, 96px) var(--gutter);
    border-right: 1px solid var(--line);
}

.quote__main h1 { margin: 20px 0 0; font-weight: 700; font-size: clamp(34px, 5vw, 52px); letter-spacing: -0.025em; line-height: 1.04; }
.quote__main > p { margin: 20px 0 0; max-width: 56ch; font-size: 17px; line-height: 1.65; color: var(--ink-soft); }

.steps { display: flex; gap: 1px; background: var(--line); margin-top: 46px; }
.steps div { background: var(--paper); padding: 16px 24px; flex: 1; }
.steps div:first-child { background: var(--ink); color: #fff; }
.steps div span { font-size: 10px; letter-spacing: 0.16em; color: var(--muted); display: block; }
.steps div:first-child span { color: var(--accent); }
.steps div strong { margin-top: 6px; display: block; font-family: var(--font-display); font-weight: 600; font-size: 13px; color: var(--muted); }
.steps div:first-child strong { color: #fff; }

.quote__form { margin-top: 44px; }

.quote__aside {
    min-width: 0;
    padding: clamp(40px, 6vw, 56px) clamp(24px, 3vw, 40px) clamp(64px, 9vw, 96px);
    background: var(--soft);
}

.quote__aside > span { font-size: 10px; letter-spacing: 0.2em; color: var(--muted); text-transform: uppercase; display: block; }

.aside-item { display: flex; gap: 16px; margin-top: 22px; padding-bottom: 22px; border-bottom: 1px solid var(--line); }
.aside-item__figure { width: 68px; height: 68px; flex: none; overflow: hidden; }
.aside-item__figure img { width: 100%; height: 100%; object-fit: cover; }
.aside-item strong { font-family: var(--font-display); font-weight: 600; font-size: 15px; }
.aside-item small { margin-top: 6px; display: block; font-size: 10px; color: var(--muted); letter-spacing: 0.1em; }
.aside-item p { margin: 8px 0 0; font-size: 13px; color: var(--muted); }

.aside-direct { margin-top: 48px; padding-top: 26px; border-top: 1px solid var(--ink); }
.aside-direct strong { font-family: var(--font-display); font-weight: 600; font-size: 16px; display: block; }
.aside-direct p { margin: 14px 0 0; font-size: 15px; line-height: 1.7; }
.aside-direct small { margin-top: 20px; display: block; font-size: 13px; line-height: 1.6; color: var(--muted); }

.aside-card { margin-top: 40px; padding: 24px; background: var(--ink); color: #fff; }
.aside-card__logo { height: 34px; width: auto; margin-bottom: 4px; }

/* Mapa ao lado do formulário de orçamento. */
.aside-map { margin-top: 34px; padding-top: 30px; border-top: 1px solid var(--line); }
.aside-map:first-child { margin-top: 0; padding-top: 0; border-top: 0; }

/* Na página institucional com formulário o texto herda .prose, que limita a
   largura de leitura; o formulário precisa ocupar a coluna inteira. */
.quote__main .prose { max-width: none; }
.quote__main .prose > p:first-child { margin-top: 0; }
.aside-map > span { font-size: 10px; letter-spacing: 0.2em; color: var(--muted); text-transform: uppercase; display: block; }

.aside-map__frame {
    position: relative;
    margin-top: 16px;
    aspect-ratio: 4 / 3;
    overflow: hidden;
    background: var(--line);
    border: 1px solid var(--line);
}

.aside-map__frame iframe { position: absolute; inset: 0; width: 100%; height: 100%; border: 0; filter: grayscale(1) contrast(1.05); transition: filter .3s ease; }
.aside-map__frame:hover iframe { filter: none; }

.aside-map__address { margin: 14px 0 0; font-size: 14px; line-height: 1.55; color: var(--ink-soft); }

.aside-map__link {
    display: inline-block;
    margin-top: 10px;
    font-family: var(--font-display);
    font-weight: 600;
    font-size: 11px;
    letter-spacing: 0.14em;
    text-transform: uppercase;
    color: var(--accent-2);
}

.aside-map__link:hover { color: var(--ink); }

.aside-card strong { font-family: var(--font-display); font-weight: 600; font-size: 15px; display: block; }
.aside-card p { margin: 10px 0 0; font-size: 13px; line-height: 1.6; color: var(--muted-2); }

/* Estilização do formulário renderizado pelo CMS (tenant.forms.public-form) */
:is(.quote__form, .prose) form { display: grid; grid-template-columns: repeat(auto-fit, minmax(min(100%, 220px), 1fr)); gap: 30px 34px; }
:is(.quote__form, .prose) .form-field, :is(.quote__form, .prose) > form > div { display: flex; flex-direction: column; gap: 9px; min-width: 0; }
:is(.quote__form, .prose) label { font-size: 10px; letter-spacing: 0.18em; color: var(--muted); text-transform: uppercase; }

:is(.quote__form, .prose) input[type="text"],
:is(.quote__form, .prose) input[type="email"],
:is(.quote__form, .prose) input[type="tel"],
:is(.quote__form, .prose) input[type="number"],
:is(.quote__form, .prose) input[type="date"],
:is(.quote__form, .prose) select {
    min-width: 0;
    border: 0;
    border-bottom: 1px solid var(--ink);
    border-radius: 0;
    padding: 12px 0;
    font-family: var(--font-body);
    font-size: 16px;
    color: var(--ink);
    outline: none;
    background: transparent;
}

:is(.quote__form, .prose) textarea {
    grid-column: 1 / -1;
    border: 1px solid var(--line);
    border-radius: 0;
    padding: 16px;
    min-height: 128px;
    font-family: var(--font-body);
    font-size: 15px;
    line-height: 1.6;
    outline: none;
    resize: vertical;
}

:is(.quote__form, .prose) input:focus, :is(.quote__form, .prose) textarea:focus, :is(.quote__form, .prose) select:focus { border-color: var(--accent-2); }

:is(.quote__form, .prose) button[type="submit"] {
    grid-column: 1 / -1;
    justify-self: start;
    display: inline-flex;
    align-items: center;
    gap: 14px;
    padding: 22px 40px;
    border: 0;
    background: var(--accent-2);
    color: #fff;
    font-family: var(--font-display);
    font-weight: 600;
    font-size: 13px;
    letter-spacing: 0.16em;
    text-transform: uppercase;
    cursor: pointer;
    transition: background .18s ease;
}

:is(.quote__form, .prose) button[type="submit"]:hover { background: var(--ink); }

.alert {
    padding: 18px 22px;
    border-left: 3px solid var(--accent-2);
    background: var(--soft);
    font-size: 14px;
    margin-bottom: 28px;
}

.alert--error { border-left-color: #b3261e; }
.alert ul { margin: 8px 0 0; padding-left: 18px; }

/* ------------------------------------------------------------- Conteúdo -- */

.prose { max-width: var(--read); font-size: 16px; line-height: 1.75; color: var(--ink-soft); }
.prose h2 { font-size: clamp(24px, 3vw, 32px); font-weight: 600; margin: 48px 0 16px; color: var(--ink); }
.prose h3 { font-size: clamp(19px, 2.2vw, 23px); font-weight: 600; margin: 36px 0 12px; color: var(--ink); }
.prose p { margin: 0 0 18px; }
.prose ul, .prose ol { margin: 0 0 18px; padding-left: 22px; }
.prose li { margin-bottom: 8px; }
.prose img { margin: 28px 0; }
.prose a { color: var(--accent-2); border-bottom: 1px solid var(--accent-2); }
.prose blockquote { margin: 28px 0; padding-left: 24px; border-left: 2px solid var(--accent-2); font-size: 18px; color: var(--ink); }

.page-hero { padding: clamp(40px, 6vw, 64px) var(--gutter); border-bottom: 1px solid var(--ink); }
.page-hero h1 { font-weight: 700; font-size: clamp(34px, 5.2vw, 56px); letter-spacing: -0.025em; }
.page-hero p { margin: 20px 0 0; max-width: 58ch; font-size: 17px; line-height: 1.65; color: var(--ink-soft); }

/* -------------------------------------------------------------- Artigo -- */

.article__hero {
    position: relative;
    display: grid;
    align-items: end;
    min-height: clamp(380px, 56vh, 560px);
    overflow: hidden;
    background: var(--ink);
}

.article__hero-image {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    object-fit: cover;
    object-position: center 60%;
}

.article__hero::after {
    content: "";
    position: absolute;
    inset: 0;
    background: linear-gradient(to top, rgba(18, 15, 16, .96) 0%, rgba(18, 15, 16, .9) 26%, rgba(18, 15, 16, .68) 52%, rgba(18, 15, 16, .38) 78%, rgba(18, 15, 16, .16) 100%);
}

/* Sem foto de capa o bloco vira uma faixa grafite, sem buraco na página. */
.article__hero--plain { min-height: auto; }
.article__hero--plain::after { background: none; }

.article__hero-body {
    position: relative;
    z-index: 2;
    width: 100%;
    max-width: calc(var(--read) + (var(--gutter) * 2));
    margin-inline: auto;
    padding: clamp(48px, 7vw, 84px) var(--gutter) clamp(36px, 5vw, 56px);
    color: #fff;
}

.article__cats { display: flex; flex-wrap: wrap; gap: 8px; margin-bottom: 20px; }

.article__cat {
    padding: 6px 12px;
    background: var(--accent-2);
    font-family: var(--font-display);
    font-weight: 600;
    font-size: 10px;
    letter-spacing: 0.16em;
    text-transform: uppercase;
}

.article__hero-body h1,
.article__lead { text-shadow: 0 1px 14px rgba(18, 15, 16, .4); }

.article__hero-body h1 {
    font-weight: 700;
    font-size: clamp(30px, 4.4vw, 54px);
    line-height: 1.04;
    letter-spacing: -0.025em;
    color: #fff;
}

.article__lead {
    margin: 20px 0 0;
    max-width: 54ch;
    font-size: clamp(15px, 1.4vw, 18px);
    line-height: 1.6;
    color: rgba(255, 255, 255, .84);
}

.article__meta {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 10px 18px;
    margin-top: clamp(24px, 3vw, 34px);
    font-size: 11px;
    letter-spacing: 0.16em;
    text-transform: uppercase;
    color: rgba(255, 255, 255, .72);
}

/* Separador em ponto entre os itens da linha de crédito. */
.article__meta > * + *::before { content: "·"; margin-right: 14px; color: var(--accent); }

.article__body { padding: clamp(48px, 7vw, 80px) var(--gutter); }
.article__body .prose { margin-inline: auto; }
.article__body .prose > p:first-child { font-size: 18px; color: var(--ink); }

.article__foot {
    max-width: var(--read);
    margin: clamp(40px, 6vw, 64px) auto 0;
    padding-top: 28px;
    border-top: 1px solid var(--line);
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 20px 32px;
    flex-wrap: wrap;
}

.article__tags { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; }

.article__tags span {
    font-size: 10px;
    letter-spacing: 0.2em;
    color: var(--muted);
    text-transform: uppercase;
    margin-right: 4px;
}

.article__tags em {
    font-style: normal;
    padding: 7px 12px;
    background: var(--soft);
    border: 1px solid var(--line);
    font-size: 12px;
    color: var(--ink-soft);
}

@media (max-width: 720px) {
    .article__hero { min-height: clamp(320px, 60vh, 440px); }
    .article__hero-body { padding-inline: var(--gutter); }
    .article__lead { display: none; }
}

/* ------------------------------------------------------------------ Blog -- */

.post-card { display: block; background: var(--paper); padding-bottom: 28px; transition: background .18s ease; }
.post-card:hover { background: #FAFAFA; }
.post-card__figure { aspect-ratio: 16 / 10; position: relative; overflow: hidden; background: var(--soft); }
.post-card__figure img { width: 100%; height: 100%; object-fit: cover; }
.post-card__figure .tex { position: absolute; inset: 0; }
.post-card__body { padding: 24px 26px 0; }
.post-card__body time { font-size: 10px; letter-spacing: 0.18em; color: var(--accent-2); text-transform: uppercase; }
.post-card__body h3 { margin: 12px 0 0; font-weight: 600; font-size: 20px; letter-spacing: -0.01em; }
.post-card__body p { margin: 12px 0 0; font-size: 14px; line-height: 1.6; color: var(--muted); }

.post-hero { padding: clamp(40px, 6vw, 64px) var(--gutter); border-bottom: 1px solid var(--ink); }
.post-hero h1 { font-weight: 700; font-size: clamp(32px, 4.8vw, 52px); letter-spacing: -0.025em; line-height: 1.05; max-width: 22ch; }
.post-hero__meta { margin-top: 22px; font-size: 11px; letter-spacing: 0.16em; color: var(--muted); text-transform: uppercase; }
.post-figure { height: clamp(240px, 40vw, 480px); position: relative; overflow: hidden; }
.post-figure img { width: 100%; height: 100%; object-fit: cover; }

/* Página de uma obra: mesma divisão da página de produto. */
.workpage { display: grid; grid-template-columns: 1.15fr 0.85fr; border-top: 1px solid var(--line); }

.workpage__figure {
    position: relative;
    width: 100%;
    aspect-ratio: 4 / 3;
    max-width: min(100%, 900px);
    margin-inline: auto;
    overflow: hidden;
    background: var(--soft);
    border-right: 1px solid var(--line);
}

.workpage__figure img,
.workpage__figure .tex {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    object-fit: cover;
    object-position: center 78%;
}

.workpage__info { padding: clamp(36px, 5vw, 52px) var(--gutter) 60px clamp(28px, 3.4vw, 44px); min-width: 0; }
.workpage__info h1 { margin: 18px 0 0; font-weight: 700; font-size: clamp(30px, 4vw, 46px); letter-spacing: -0.025em; line-height: 1.04; }

@media (max-width: 960px) {
    .workpage { grid-template-columns: 1fr; }
    .workpage__figure { border-right: 0; border-bottom: 1px solid var(--line); }
    .workpage__info { padding-inline: var(--gutter); }
}

/* -------------------------------------------------------- Carrossel de --
   produtos. Rolagem nativa com scroll-snap: funciona sem JS e as setas só
   aparecem quando a faixa não cabe inteira. */

.carousel { position: relative; margin-top: clamp(20px, 2.4vw, 34px); }

.carousel__track {
    display: grid;
    grid-auto-flow: column;
    grid-auto-columns: calc((100% - (clamp(20px, 2.4vw, 34px) * 3)) / 4);
    gap: clamp(20px, 2.4vw, 34px);
    overflow-x: auto;
    scroll-snap-type: x mandatory;
    scroll-padding-inline: 2px;
    overscroll-behavior-x: contain;
    padding-bottom: 6px;
    scrollbar-width: thin;
    scrollbar-color: var(--muted-3) transparent;
}

.carousel__item { scroll-snap-align: start; min-width: 0; }

/* Arraste com o mouse: durante o gesto o snap sai do caminho e o cursor muda. */
.carousel__track { cursor: grab; }
.carousel__track.is-dragging { cursor: grabbing; scroll-snap-type: none; scroll-behavior: auto; }
.carousel__track.is-dragging a { pointer-events: none; }
.carousel__track.is-dragging img { user-select: none; -webkit-user-drag: none; }

.carousel__item > .prod-card {
    height: 100%;
    border: 1px solid var(--line);
    transition: border-color .22s var(--ease), transform .22s var(--ease), box-shadow .22s var(--ease);
}

.carousel__item > .prod-card:hover,
.carousel__item > .prod-card:focus-visible {
    border-color: var(--muted-3);
    transform: translateY(-3px);
    box-shadow: 0 14px 34px rgba(35, 31, 32, .1);
}

/* As setas flutuam nas bordas da faixa: no topo elas brigavam com o link
   "ver catálogo" do cabeçalho da seção. */
.carousel__nav {
    position: absolute;
    inset: 0 clamp(-20px, -1.4vw, -6px);
    display: flex;
    align-items: center;
    justify-content: space-between;
    pointer-events: none;
    z-index: 3;
}

.carousel__btn {
    pointer-events: auto;
    width: 48px;
    height: 48px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    border: 1px solid var(--line);
    border-radius: 50%;
    background: var(--paper);
    color: var(--ink);
    cursor: pointer;
    box-shadow: 0 10px 26px rgba(35, 31, 32, .16);
    transition: background .18s ease, border-color .18s ease, color .18s ease, opacity .2s ease, transform .18s var(--ease);
}

.carousel__btn svg { width: 18px; height: 18px; fill: currentColor; }
.carousel__btn:hover:not(:disabled) { background: var(--ink); border-color: var(--ink); color: #fff; transform: scale(1.06); }

/* Na ponta o botão some de vez, em vez de ficar apagado ocupando espaço. */
.carousel__btn:disabled { opacity: 0; pointer-events: none; }

@media (max-width: 1280px) {
    .carousel__track { grid-auto-columns: calc((100% - (clamp(20px, 2.4vw, 34px) * 2)) / 3); }
}

@media (max-width: 960px) {
    .carousel__track { grid-auto-columns: calc((100% - clamp(20px, 2.4vw, 34px)) / 2); }

    /* Sem folga lateral, as setas descem para baixo da faixa. */
    .carousel__nav { position: static; margin-top: 20px; justify-content: flex-end; gap: 10px; }
    .carousel__btn { box-shadow: none; }
    .carousel__btn:disabled { opacity: .28; }
}

@media (max-width: 560px) {
    .carousel__track { grid-auto-columns: 82%; }
}

/* --------------------------------------------------------- Depoimentos -- */

.quote-card {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    margin: 0;
    padding: clamp(32px, 3.4vw, 44px) clamp(24px, 2.6vw, 34px);
    text-align: center;
}

.quote-card__mark {
    font-family: var(--font-display);
    font-weight: 700;
    font-size: 54px;
    line-height: .5;
    color: var(--accent);
    margin-bottom: 22px;
}

.quote-card blockquote {
    margin: 0;
    font-size: 15px;
    line-height: 1.75;
    color: var(--ink-soft);
    text-wrap: pretty;
}

.quote-card figcaption { margin-top: 24px; }

.quote-card figcaption strong {
    display: block;
    font-family: var(--font-display);
    font-weight: 600;
    font-size: 14px;
    color: var(--ink);
}

.quote-card__stars { display: block; margin-top: 6px; font-size: 12px; letter-spacing: 0.14em; color: var(--accent-2); }

.quotes {
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
}

.quotes > * { flex: 1 1 280px; max-width: 380px; }

/* Sem link, o card de depoimento não precisa da elevação no hover. */
.quotes > * { transition: border-color .22s var(--ease); }

/* ------------------------------------------------------------- Portfólio --
   Mosaico de obras entregues: a primeira célula de cada bloco de cinco ocupa
   duas colunas, quebrando a monotonia da grade. */

.works {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: clamp(16px, 1.8vw, 26px);
    margin-top: clamp(24px, 3vw, 38px);
}

.work {
    display: block;
    position: relative;
    overflow: hidden;
    background: var(--ink);
    color: #fff;
    isolation: isolate;
}

/* Célula clicável de galeria: é <button>, então zera o visual padrão. */
.work--zoom { border: 0; padding: 0; font: inherit; text-align: left; cursor: zoom-in; }

.work__zoom {
    position: absolute;
    top: 14px;
    right: 14px;
    z-index: 3;
    width: 40px;
    height: 40px;
    display: grid;
    place-items: center;
    border-radius: 50%;
    background: rgba(18, 15, 16, .55);
    color: #fff;
    opacity: 0;
    transform: scale(.9);
    transition: opacity .22s var(--ease), transform .22s var(--ease), background .18s ease;
}

.work__zoom svg { width: 20px; height: 20px; fill: currentColor; }

.work--zoom:hover .work__zoom,
.work--zoom:focus-visible .work__zoom { opacity: 1; transform: none; }
.work--zoom:hover .work__zoom { background: var(--accent-2); }

/* Sem texto sobreposto, o véu da foto de galeria é dispensável. */
.work--zoom .work__figure::after { display: none; }

.work__figure { position: relative; aspect-ratio: 3 / 2; overflow: hidden; }

.work__figure img,
.work__figure .tex {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    object-fit: cover;
    object-position: center 78%;
    transition: transform .6s var(--ease);
}

.work:hover .work__figure img { transform: scale(1.05); }

.work__figure::after {
    content: "";
    position: absolute;
    inset: 0;
    background: linear-gradient(to top, rgba(18, 15, 16, .95) 0%, rgba(18, 15, 16, .78) 26%, rgba(18, 15, 16, .34) 56%, rgba(18, 15, 16, 0) 84%);
}

.work__body {
    position: absolute;
    inset: auto 0 0;
    z-index: 2;
    padding: clamp(16px, 1.8vw, 22px);
}

.work__tag {
    display: inline-block;
    margin-bottom: 10px;
    padding: 5px 10px;
    background: var(--accent-2);
    font-family: var(--font-display);
    font-weight: 600;
    font-size: 10px;
    letter-spacing: 0.16em;
    text-transform: uppercase;
}

.work__body h3 {
    font-weight: 600;
    font-size: clamp(16px, 1.4vw, 19px);
    letter-spacing: -0.01em;
    color: #fff;
}

.work__body p { margin: 6px 0 0; font-size: 12px; line-height: 1.5; color: rgba(255, 255, 255, .78); }

.work__more {
    display: inline-block;
    margin-top: 12px;
    font-family: var(--font-display);
    font-weight: 600;
    font-size: 11px;
    letter-spacing: 0.16em;
    text-transform: uppercase;
    color: var(--accent);
    opacity: 0;
    transform: translateY(6px);
    transition: opacity .28s var(--ease), transform .28s var(--ease);
}

.work:hover .work__more,
.work:focus-visible .work__more { opacity: 1; transform: none; }

/* ------------------------------------------------------------- WhatsApp -- */

.wa-fab {
    position: fixed;
    right: 26px;
    bottom: 26px;
    z-index: 60;
    width: 62px;
    height: 62px;
    display: flex;
    align-items: center;
    justify-content: center;
    border-radius: 50%;
    background: var(--wa);
    color: #fff;
    box-shadow: 0 10px 30px rgba(37, 211, 102, 0.34);
    transition: background .18s ease, transform .18s var(--ease), box-shadow .18s ease;
}

/* Na home o botão sobe para não cobrir play/pause e as setas do slider. */
body:has(.hero) .wa-fab {
    bottom: 92px;
}

.wa-fab:hover {
    background: #1ebe5b;
    transform: translateY(-2px);
    box-shadow: 0 16px 38px rgba(37, 211, 102, 0.42);
}

.wa-fab svg { width: 34px; height: 34px; flex: none; fill: currentColor; }

/* ---------------------------------------------------------------- Rodapé -- */

.footer { background: var(--ink); color: var(--muted-2); padding: clamp(48px, 7vw, 72px) var(--gutter) 40px; }

.footer__grid {
    display: grid;
    grid-template-columns: 1.4fr 1fr 1fr 1fr;
    gap: 48px;
    padding-bottom: 56px;
    border-bottom: 1px solid var(--line-dark);
}

.footer__brand { display: flex; align-items: baseline; font-family: var(--font-display); font-weight: 700; font-size: 22px; letter-spacing: 0.06em; color: #fff; }
.footer__logo { width: auto; height: clamp(42px, 4.4vw, 56px); margin-bottom: 4px; }
.footer__tagline { margin-top: 8px; font-size: 9px; letter-spacing: 0.28em; text-transform: uppercase; }
.footer__about { margin: 24px 0 0; max-width: 34ch; font-size: 14px; line-height: 1.65; }
.footer__title { font-size: 10px; letter-spacing: 0.2em; color: var(--muted); text-transform: uppercase; }
.footer__list { display: flex; flex-direction: column; gap: 11px; margin-top: 18px; font-size: 14px; }
.footer__list a:hover { color: #fff; }
.footer__list .is-accent { color: var(--accent); }

.footer__bottom {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 12px 24px;
    flex-wrap: wrap;
    padding-top: 26px;
    /* Reserva espaço para o botão flutuante de WhatsApp não cobrir os links. */
    padding-bottom: 52px;
    font-size: 10px;
    letter-spacing: 0.16em;
    text-transform: uppercase;
}

/* ------------------------------------------------------------ Responsivo -- */

@media (max-width: 1080px) {
    .apps-grid { grid-template-columns: 1fr 1fr; }
    .grid-lines--4 { grid-template-columns: repeat(3, 1fr); }
    .footer__grid { grid-template-columns: 1fr 1fr; gap: 40px; }
}

@media (min-width: 1100px) {
    .search-overlay__results { grid-template-columns: repeat(2, 1fr); }
}

/* Monitores largos: mais colunas em vez de células gigantes e achatadas. */
@media (min-width: 1600px) {
    .grid-lines--3 { grid-template-columns: repeat(4, 1fr); }
    .grid-lines--4 { grid-template-columns: repeat(5, 1fr); }
}

@media (min-width: 2200px) {
    .grid-lines--3 { grid-template-columns: repeat(5, 1fr); }
    .grid-lines--4 { grid-template-columns: repeat(6, 1fr); }
}

@media (max-width: 960px) {
    /* Sem espaço lateral para o texto respirar, o véu passa a ser vertical e
       cobre a foto inteira — é o que mantém o contraste em tela estreita. */
    .hero__media::after {
        background: linear-gradient(to top, rgba(18, 15, 16, .94) 0%, rgba(18, 15, 16, .78) 46%, rgba(18, 15, 16, .58) 100%);
    }

    .nav, .header__search { display: none; }
    .header__burger { display: flex; }
    .header__cta { padding-inline: 20px; }
    .manifesto { grid-template-columns: 1fr; }
    .manifesto__grid { border-left: 0; border-top: 1px solid var(--line-dark); }
    .split__inner { grid-template-columns: 1fr; }
    .split__copy { border-right: 0; border-bottom: 1px solid var(--line); }
    .split__facts { grid-template-columns: 1fr; }
    .fact:nth-child(odd) { border-right: 0; }
    .fact:nth-last-child(-n+2) { border-bottom: 1px solid var(--line); }
    .fact:last-child { border-bottom: 0; }
    .plp-head { grid-template-columns: 1fr; gap: 32px; }
    .plp-body { grid-template-columns: 1fr; }
    .plp-aside { border-right: 0; border-bottom: 1px solid var(--line); padding: 32px var(--gutter) 40px; }
    .plp-main { padding: 32px var(--gutter) 72px; }
    .pdp { grid-template-columns: 1fr; }
    .pdp__gallery { border-right: 0; border-bottom: 1px solid var(--line); }
    .pdp__info { padding-inline: var(--gutter); }
    .pdp-apply { grid-template-columns: 1fr; }
    .pdp-apply__figure { border-right: 0; border-bottom: 1px solid var(--line); height: 320px; }
    .quote__main { border-right: 0; border-bottom: 1px solid var(--line); }
    .grid-lines--3, .grid-lines--cats { grid-template-columns: repeat(2, 1fr); }
    .grid-lines--cats .cat-card__figure { aspect-ratio: 16 / 9; }
    .works { grid-template-columns: repeat(2, 1fr); }
    .locate__map { border-left: 0; border-top: 1px solid var(--line-dark); }
}

@media (max-width: 720px) {
    .topbar { font-size: 10px; letter-spacing: 0.1em; }
    .topbar__right { gap: 14px; }
    .grid-lines--3, .grid-lines--4, .grid-lines--cats, .apps-grid, .manifesto__grid { grid-template-columns: 1fr; }
    .grid-lines--cats .cat-card__figure { aspect-ratio: 3 / 2; }
    .works { grid-template-columns: 1fr; }
    .manifesto__cell:nth-child(even) { border-left: 0; }
    .manifesto__cell:nth-last-child(-n+2) { border-bottom: 1px solid var(--line-dark); }
    .manifesto__cell:last-child { border-bottom: 0; }
    .apps-cell__figure--lg, .apps-cell__figure--md { aspect-ratio: 3 / 2; max-height: 300px; }
    .hero__viewport { min-height: 88vh; min-height: 88svh; }
    .hero__body { padding-right: var(--gutter); padding-bottom: clamp(104px, 22vw, 128px); }
    .hero__lead { font-size: 15px; }
    .hero__nav { display: none; }
    .search-overlay__result img, .search-overlay__result .tex { width: 44px; height: 44px; }
    .stat-strip { grid-template-columns: 1fr; }
    .steps { flex-direction: column; }
    .pdp__thumbs { --thumb-columns: 3; }
    .footer__grid { grid-template-columns: 1fr; gap: 32px; }
    .wa-fab { right: 16px; bottom: 16px; width: 56px; height: 56px; }
    body:has(.hero) .wa-fab { bottom: 76px; }
    .wa-fab svg { width: 30px; height: 30px; }
    .hero__ui { padding-right: 84px; }
    .header__cta { font-size: 11px; letter-spacing: 0.1em; }
}

/* Cabeçalho da busca em telas estreitas: só a marca e o fechar cabem na linha. */
@media (max-width: 640px) {
    .search-overlay__head .eyebrow { display: none; }
    .search-overlay__logo { margin-right: auto; }
    .search-overlay__close span { display: none; }
    .search-overlay__panel.brk--corner::before,
    .search-overlay__panel.brk--corner::after { display: none; }
    .search-overlay__field { gap: 10px; }
    .search-overlay__field svg { width: 20px; height: 20px; }
}

@media (max-width: 560px) {
    /* Em telas estreitas o CTA nao cabe ao lado da marca e do Menu; ele
       continua acessivel pelo menu mobile e pelo botao de WhatsApp. */
    .header__cta { display: none; }
    .brand { flex: 1 1 auto; border-right: 0; }
    .brand__text { padding: 16px 0; }
    .brand__name { font-size: 16px; }
}

/* Ajustes para o formulário dinâmico do CMS, que vem com classes utilitárias
   de outro tema; aqui só o essencial de layout é normalizado. */
:is(.quote__form, .prose) form { border: 0 !important; background: none !important; padding: 0 !important; border-radius: 0 !important; }
:is(.quote__form, .prose) form > div:has(h2),
:is(.quote__form, .prose) form > div:has(textarea),
:is(.quote__form, .prose) form > div:has([type="checkbox"]),
:is(.quote__form, .prose) form > div:has([type="radio"]) { grid-column: 1 / -1; }
/* Resumo fixo da referência dentro do formulário. */
:is(.quote__form, .prose) .form-prefill {
    display: block;
    padding: 16px 18px;
    background: var(--soft);
    border-left: var(--brk-bar) solid var(--accent);
    grid-column: 1 / -1;
}

:is(.quote__form, .prose) .form-prefill__label {
    display: block;
    font-size: 10px;
    letter-spacing: 0.2em;
    color: var(--muted);
    text-transform: uppercase;
}

:is(.quote__form, .prose) .form-prefill__value {
    display: block;
    margin-top: 6px;
    font-family: var(--font-display);
    font-weight: 600;
    font-size: 16px;
}

:is(.quote__form, .prose) .form-prefill__meta { display: block; margin-top: 2px; font-size: 12px; color: var(--muted); }

:is(.quote__form, .prose) form h2 { font-family: var(--font-display); font-weight: 600; font-size: 22px; }
:is(.quote__form, .prose) form h2 + p { margin: 10px 0 0; font-size: 14px; color: var(--muted); }
:is(.quote__form, .prose) .hidden { display: none !important; }
:is(.quote__form, .prose) form [type="checkbox"], :is(.quote__form, .prose) form [type="radio"] { accent-color: var(--accent-2); }
:is(.quote__form, .prose) form label span { color: var(--accent-2); }
:is(.quote__form, .prose) form p.text-red-500,
:is(.quote__form, .prose) form .text-red-500 { color: #b3261e; font-size: 12px; letter-spacing: 0; text-transform: none; }
/* Labels de radio/checkbox são aninhados no campo e não devem herdar o
   tratamento caixa-alta usado nos rótulos de topo. */
:is(.quote__form, .prose) form > div > div label {
    text-transform: none;
    letter-spacing: 0;
    font-size: 14px;
    color: var(--ink-soft);
    display: inline-flex;
    align-items: center;
    gap: 9px;
}
:is(.quote__form, .prose) form > div > div label span { color: var(--ink-soft); }

/* Chips de variação no card: a cor é atributo do produto, não o item da lista. */
.prod-card__colors { display: flex; align-items: center; gap: 5px; margin-top: 16px; flex-wrap: wrap; }
.prod-card__chip {
    width: 14px;
    height: 14px;
    display: block;
    flex: none;
    background-size: cover;
    background-position: center;
    box-shadow: inset 0 0 0 1px rgba(35, 31, 32, 0.14);
}
.prod-card__colors-count { margin-left: 6px; font-size: 11px; letter-spacing: 0.1em; color: var(--muted); text-transform: uppercase; }

/* Chamada do card: é um span porque o card inteiro já é o link. */
.prod-card__cta {
    position: relative;
    overflow: hidden;
    isolation: isolate;
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 10px;
    margin-top: 20px;
    padding: 13px 18px;
    border: 1px solid var(--line);
    font-family: var(--font-display);
    font-weight: 600;
    font-size: 11px;
    letter-spacing: 0.16em;
    text-transform: uppercase;
    color: var(--ink);
    transition: border-color .3s var(--ease), color .3s var(--ease);
}

.prod-card__cta::before {
    content: "";
    position: absolute;
    inset: 0;
    z-index: -1;
    background: var(--ink);
    transform: scaleX(0);
    transform-origin: left;
    transition: transform .34s var(--ease);
}

.prod-card__cta span { transition: transform .34s var(--ease); }

.prod-card:hover .prod-card__cta,
.prod-card:focus-visible .prod-card__cta { border-color: var(--ink); color: #fff; }

.prod-card:hover .prod-card__cta::before,
.prod-card:focus-visible .prod-card__cta::before { transform: scaleX(1); }

.prod-card:hover .prod-card__cta span,
.prod-card:focus-visible .prod-card__cta span { transform: translateX(5px); }

/* Na variante compacta (relacionados) o card fica sem a chamada. */
.prod-card--sm .prod-card__cta { display: none; }

/* ==========================================================================
   Hover dos cards de categoria e produto
   Referência: componente "Reveal on hover" (21st.dev, @youcefbnm/reveal-on-hover)
   — a técnica de escalar a mídia dentro de um recorte com overflow hidden.
   Aqui ela é reduzida ao essencial: o tema é editorial e claro, então o card
   ganha só dois gestos além do fundo que já mudava — o zoom contido na foto e
   uma régua laranja que se desenha sob o título. Sem véu escuro sobre a
   imagem: em catálogo de piso a cor da amostra é o produto e não pode ser
   alterada no hover.
   ========================================================================== */

.cat-card__figure img,
.cat-card__figure .tex,
.prod-card__figure img,
.prod-card__figure .tex {
    transform: scale(1);
    transition: transform .62s var(--ease);
}

.cat-card:hover .cat-card__figure img,
.cat-card:focus-visible .cat-card__figure img,
.cat-card:hover .cat-card__figure .tex,
.cat-card:focus-visible .cat-card__figure .tex,
.prod-card:hover .prod-card__figure img,
.prod-card:focus-visible .prod-card__figure img,
.prod-card:hover .prod-card__figure .tex,
.prod-card:focus-visible .prod-card__figure .tex {
    transform: scale(1.045);
}

/* A régua nasce da esquerda, no mesmo peso das linhas da marca (--brk-line).
   No card de produto o h3 é bloco: sem fit-content a régua atravessaria a
   largura inteira da célula em vez de acompanhar o título. */
.cat-card__head h3,
.prod-card__body h3 { position: relative; }
.prod-card__body h3 { width: fit-content; }

.cat-card__head h3::after,
.prod-card__body h3::after {
    content: "";
    position: absolute;
    left: 0;
    right: 0;
    bottom: -7px;
    height: var(--brk-line);
    background: var(--accent);
    transform: scaleX(0);
    transform-origin: left;
    transition: transform .42s var(--ease);
    pointer-events: none;
}

.cat-card:hover .cat-card__head h3::after,
.cat-card:focus-visible .cat-card__head h3::after,
.prod-card:hover .prod-card__body h3::after,
.prod-card:focus-visible .prod-card__body h3::after {
    transform: scaleX(1);
}

/* O bloco global de prefers-reduced-motion só zera a duração — o estado final
   continuaria valendo e a foto saltaria de escala. Aqui o gesto é cancelado. */
@media (prefers-reduced-motion: reduce) {
    .cat-card:hover .cat-card__figure img,
    .cat-card:focus-visible .cat-card__figure img,
    .cat-card:hover .cat-card__figure .tex,
    .cat-card:focus-visible .cat-card__figure .tex,
    .prod-card:hover .prod-card__figure img,
    .prod-card:focus-visible .prod-card__figure img,
    .prod-card:hover .prod-card__figure .tex,
    .prod-card:focus-visible .prod-card__figure .tex {
        transform: none;
    }
}