/* Premiere Tomadas e Interruptores
   Ideia: cada bloco é uma "placa" de parede — branca, cantos bem arredondados,
   com os dois furos de parafuso. Fundo em tom de gesso, cor de ação em oliva. */

:root {
  --gesso: #F3F1EB;
  --placa: #FFFFFF;
  --grafite: #26282B;
  --cinza: #6A6E73;
  --risco: #E1DED6;
  --oliva: #5E6B2A;
  --oliva-esc: #46511C;
  --oliva-clara: #DDE3C4;
  --parede-esc: #2E3220;
  --piloto: #FF8A3D;
  --raio-placa: 28px;
  --fonte-titulo: 'Epilogue', 'Trebuchet MS', sans-serif;
  --fonte-texto: 'Work Sans', 'Segoe UI', sans-serif;
}

[hidden], [hidden].aviso-ck { display: none !important; }

html { box-sizing: border-box; scroll-behavior: smooth; }
*, *:before, *:after { box-sizing: inherit; }

body { margin: 0; background: var(--gesso); color: var(--grafite); font: 400 1.0625rem/1.65 var(--fonte-texto); }

img { display: block; height: auto; max-width: 100%; }
a { color: var(--oliva); text-underline-offset: 3px; }
a:hover { color: var(--oliva-esc); }

h1, h2, h3 { font-family: var(--fonte-titulo); line-height: 1.1; margin: 0 0 .5em; letter-spacing: -.02em; }
h1 { font-size: clamp(2.1rem, 4.4vw, 3.4rem); font-weight: 800; }
h2 { font-size: clamp(1.7rem, 3.1vw, 2.5rem); font-weight: 800; }
h3 { font-size: 1.15rem; font-weight: 700; }

.moldura { width: min(1180px, 100% - 32px); margin-inline: auto; }
.moldura--estreita { width: min(780px, 100% - 32px); }
.rompe { overflow-wrap: anywhere; }

.ir-conteudo { position: absolute; left: 12px; top: -80px; z-index: 99; background: var(--grafite); color: #fff; padding: 10px 14px; border-radius: 10px; }
.ir-conteudo:focus { top: 12px; }
:focus-visible { outline: 3px solid var(--piloto); outline-offset: 3px; }

.chapeu { display: inline-flex; align-items: center; gap: .5em; margin: 0 0 .9em; font: 600 .82rem/1 var(--fonte-texto); letter-spacing: .12em; text-transform: uppercase; color: var(--oliva); }
.chapeu::before { content: ""; width: 8px; height: 8px; border-radius: 50%; background: var(--piloto); box-shadow: 0 0 0 3px rgba(255, 138, 61, .22); }
.chapeu--claro { color: var(--oliva-clara); }
.nota { font-size: .93rem; color: var(--cinza); }

/* botões */
.btn { display: inline-flex; align-items: center; justify-content: center; gap: .55em; min-height: 50px; padding: .75rem 1.4rem; border-radius: 999px; border: 2px solid transparent; font: 600 1rem/1.2 var(--fonte-texto); text-decoration: none; cursor: pointer; transition: background .2s, color .2s, border-color .2s, transform .2s; }
.btn:hover { transform: translateY(-1px); }
.btn--oliva { background: var(--oliva); color: #fff; }
.btn--oliva:hover { background: var(--oliva-esc); color: #fff; }
.btn--vazado { background: var(--placa); color: var(--grafite); border-color: var(--risco); }
.btn--vazado:hover { border-color: var(--grafite); color: var(--grafite); }
.btn--claro { background: var(--oliva-clara); color: var(--parede-esc); }
.btn--claro:hover { background: #fff; color: var(--parede-esc); }
.btn--vazado-claro { background: transparent; color: #fff; border-color: rgba(255, 255, 255, .45); }
.btn--vazado-claro:hover { border-color: #fff; color: #fff; }
.btn--vazado-claro:disabled { opacity: .4; cursor: not-allowed; transform: none; }
.btn--total { width: 100%; }
.lnk { background: none; border: 0; padding: 0; font: inherit; color: inherit; text-decoration: underline; cursor: pointer; }

/* a "placa": branca, arredondada, com dois parafusos */
.placa { position: relative; background: var(--placa); border-radius: var(--raio-placa); box-shadow: 0 1px 0 rgba(255, 255, 255, .9) inset, 0 18px 40px -28px rgba(38, 40, 43, .55), 0 2px 6px rgba(38, 40, 43, .06); }
.placa--card { padding: 2.4rem 1.6rem 2.2rem; }
.placa--card::before, .placa--card::after { content: ""; position: absolute; left: 50%; width: 9px; height: 9px; margin-left: -4.5px; border-radius: 50%; background: radial-gradient(circle at 35% 35%, #fff 0 20%, #CFCAC0 21% 100%); box-shadow: inset 0 0 0 1px #BDB7AB; }
.placa--card::before { top: 14px; }
.placa--card::after { bottom: 14px; }
.placa--card p { margin: 0; color: #4A4D51; font-size: .98rem; }
.placa--foto { margin: 0; padding: 12px; }
.placa--foto img { border-radius: calc(var(--raio-placa) - 10px); width: 100%; height: 100%; object-fit: cover; }

/* cabeçalho */
.cab { position: sticky; top: 0; z-index: 40; background: rgba(243, 241, 235, .94); backdrop-filter: blur(8px); border-bottom: 1px solid var(--risco); }
.cab__linha { display: flex; align-items: center; gap: 1.8rem; min-height: 74px; }
.cab__marca { display: flex; align-items: center; gap: .7rem; color: var(--grafite); text-decoration: none; margin-right: auto; }
.cab__marca:hover { color: var(--grafite); }
.cab__marca span { display: grid; line-height: 1.1; }
.cab__marca strong { font: 800 1.45rem/1 var(--fonte-titulo); letter-spacing: -.02em; }
.cab__marca small { font-size: .74rem; color: var(--cinza); letter-spacing: .04em; }
.cab__menu { display: flex; gap: 1.5rem; }
.cab__menu a { color: var(--grafite); text-decoration: none; font-weight: 500; }
.cab__menu a:hover { color: var(--oliva); }
.cab__fone { min-height: 44px; padding: .55rem 1.1rem; font-size: .95rem; white-space: nowrap; }

/* abertura */
.abre { padding: clamp(2.5rem, 6vw, 5rem) 0; }
.abre__grade { display: grid; grid-template-columns: minmax(0, 1.05fr) minmax(0, .95fr); gap: clamp(2rem, 5vw, 4.5rem); align-items: center; }
.abre__apoio { font-size: 1.15rem; color: #44474B; max-width: 48ch; }
.abre__acoes { display: flex; flex-wrap: wrap; gap: .8rem; margin-top: 1.8rem; }
.abre__foto img { aspect-ratio: 4 / 3; }

section { padding: clamp(3.4rem, 8vw, 6.4rem) 0; }
.abre { padding-top: clamp(2.5rem, 6vw, 5rem); }
.titulo-bloco { max-width: 680px; margin-bottom: 2.4rem; }
.titulo-bloco > p:last-child { color: var(--cinza); }

/* produtos */
.produtos__grade { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 1.2rem; }
.produtos__foto img { aspect-ratio: 4 / 3; }

/* montador (parede escura) */
.monte { background: var(--parede-esc); color: #E7E8DD; }
.monte h2 { color: #fff; }
.monte p { color: #CDD0BE; }
.monte .nota a { color: var(--oliva-clara); }
.monte__grade { display: grid; grid-template-columns: minmax(0, 1.15fr) minmax(0, .85fr); gap: clamp(2rem, 5vw, 4rem); align-items: center; }
.montador { display: grid; gap: 1.1rem; margin-top: 1.4rem; }
.montador__caixas, .montador__modulos { display: flex; flex-wrap: wrap; gap: .55rem; }
.chip { border: 1.5px solid rgba(255, 255, 255, .28); background: transparent; color: #fff; border-radius: 999px; padding: .5rem .95rem; font: 500 .92rem/1.2 var(--fonte-texto); cursor: pointer; }
.chip:hover { border-color: #fff; }
.chip[aria-checked="true"] { background: var(--oliva-clara); color: var(--parede-esc); border-color: var(--oliva-clara); }
.chip--mod:disabled { opacity: .35; cursor: not-allowed; }
.montador__qtd { display: flex; align-items: center; gap: .8rem; font-size: .95rem; }
.montador__qtd input { width: 84px; }
.montador__acoes { display: flex; flex-wrap: wrap; gap: .7rem; }
.montador__lista { margin: 0; padding-left: 1.3rem; display: grid; gap: .35rem; font-size: .95rem; }
.montador__lista li::marker { color: var(--piloto); }
.montador__lista button { margin-left: .5rem; background: none; border: 0; color: var(--oliva-clara); text-decoration: underline; cursor: pointer; font: inherit; font-size: .85rem; }

.parede { display: grid; justify-items: center; gap: 1rem; padding: 2.5rem 1rem; border-radius: var(--raio-placa); background: linear-gradient(135deg, #E9E6DD, #D9D5CA); }
.espelho { width: 150px; min-height: 250px; background: var(--placa); border-radius: 22px; box-shadow: 0 16px 30px -18px rgba(0, 0, 0, .55), inset 0 -3px 0 rgba(0, 0, 0, .05); display: grid; grid-template-rows: auto 1fr auto; justify-items: center; padding: 14px 16px; transition: width .3s; }
.espelho--larga { width: 250px; }
.espelho__parafuso { width: 10px; height: 10px; border-radius: 50%; background: radial-gradient(circle at 35% 35%, #fff 0 20%, #CFCAC0 21% 100%); box-shadow: inset 0 0 0 1px #BDB7AB; }
.espelho__vao { align-self: stretch; width: 100%; margin: 10px 0; display: grid; grid-template-columns: 1fr; grid-auto-rows: 1fr; gap: 6px; min-height: 180px; }
.espelho--larga .espelho__vao { grid-template-columns: 1fr 1fr; }
.modulo { border: 1.5px solid #E2DED5; border-radius: 8px; background: linear-gradient(#FFFFFF, #F4F2EC); display: grid; place-items: center; font: 700 .72rem/1.1 var(--fonte-texto); color: var(--grafite); text-align: center; padding: 4px; cursor: pointer; position: relative; }
.modulo::after { content: ""; position: absolute; top: 6px; right: 6px; width: 5px; height: 5px; border-radius: 50%; background: var(--piloto); }
.modulo--vazio { border-style: dashed; background: transparent; color: #A9A497; cursor: default; font-weight: 500; }
.modulo--vazio::after { display: none; }
.parede__legenda { margin: 0; font-size: .9rem; color: var(--grafite) !important; font-weight: 600; }

/* guia */
.guia__grade { display: grid; grid-template-columns: minmax(0, 1.2fr) minmax(0, .8fr); gap: clamp(2rem, 5vw, 4rem); align-items: start; }
.guia__lista { margin: 1.4rem 0 0; display: grid; gap: 1rem; }
.guia__lista div { background: var(--placa); border-radius: 18px; padding: 1rem 1.2rem; border-left: 5px solid var(--oliva); }
.guia__lista dt { font: 700 1.02rem/1.3 var(--fonte-titulo); margin-bottom: .3rem; }
.guia__lista dd { margin: 0; color: #44474B; font-size: .97rem; }
.guia__fotos { display: grid; gap: 1.2rem; }
.guia__fotos img { aspect-ratio: 1; }

/* orçamento */
.orcamento { background: linear-gradient(180deg, var(--gesso), #E8E5DC); }
.orcamento__grade { display: grid; grid-template-columns: minmax(0, .8fr) minmax(0, 1.2fr); gap: clamp(2rem, 5vw, 4rem); align-items: start; }
.form-orc { padding: clamp(1.4rem, 3vw, 2.2rem); display: grid; gap: 1rem; }
.form-orc label { display: grid; gap: .35rem; font-size: .92rem; font-weight: 600; }
.form-orc__dois { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: 1rem; }
.form-orc__armadilha { position: absolute; left: -9999px; width: 1px; height: 1px; overflow: hidden; margin: 0; }
.form-orc__assuntos { border: 0; padding: 0; margin: 0; display: flex; flex-wrap: wrap; gap: .5rem; }
.form-orc__assuntos legend { font-size: .92rem; font-weight: 600; margin-bottom: .5rem; padding: 0; }
.marca-chip { display: inline-flex !important; grid-template-columns: none; align-items: center; gap: .45rem !important; border: 1.5px solid var(--risco); border-radius: 999px; padding: .45rem .85rem; font-weight: 500 !important; cursor: pointer; background: var(--gesso); }
.marca-chip input { accent-color: var(--oliva); margin: 0; }
.marca-chip:has(input:checked) { border-color: var(--oliva); background: var(--oliva-clara); }
.form-orc__aceite { display: flex !important; gap: .6rem; align-items: flex-start; font-weight: 400 !important; }
.form-orc__aceite input { width: 20px; height: 20px; flex: none; margin-top: .1rem; accent-color: var(--oliva); }
.form-orc__erro { margin: 0; padding: .8rem 1rem; border-radius: 14px; background: #FCEEE4; color: #6F3008; border: 1px solid #F6C9A6; font-size: .95rem; }
.form-orc--assuntos-erro legend { color: #B3261E; }
.campo-ruim { border-color: #B3261E !important; background: #FFF6F5 !important; }

input[type=text], input[type=tel], input[type=email], input[type=number], textarea {
  width: 100%; font: 400 1rem/1.45 var(--fonte-texto); color: var(--grafite);
  background: #FBFAF7; border: 1.5px solid var(--risco); border-radius: 14px; padding: .72rem .9rem;
}
input:focus, textarea:focus { outline: 0; border-color: var(--oliva); box-shadow: 0 0 0 4px rgba(94, 107, 42, .18); }
textarea { resize: vertical; min-height: 8.5rem; }

/* dúvidas */
.faq details { background: var(--placa); border-radius: 18px; margin-bottom: .7rem; padding: 0 1.2rem; box-shadow: 0 8px 20px -18px rgba(38, 40, 43, .6); }
.faq summary { cursor: pointer; padding: 1rem 2rem 1rem 0; font-weight: 600; position: relative; list-style: none; }
.faq summary::-webkit-details-marker, .faq summary::marker { display: none; content: none; }
.faq summary::after { content: ""; position: absolute; right: 2px; top: 50%; width: 10px; height: 10px; border-radius: 50%; background: var(--risco); transform: translateY(-50%); transition: background .2s; }
.faq details[open] summary::after { background: var(--piloto); }
.faq details p { margin: 0 0 1.1rem; color: #44474B; }

/* dados da empresa */
.empresa { padding-top: 0; padding-bottom: clamp(3rem, 7vw, 5rem); }
.placa--dados { padding: clamp(1.6rem, 3vw, 2.4rem); }
.placa--dados dl { margin: 1rem 0 0; display: grid; grid-template-columns: repeat(auto-fit, minmax(min(100%, 240px), 1fr)); gap: 1rem 2rem; }
.placa--dados dt { font-size: .76rem; letter-spacing: .1em; text-transform: uppercase; color: var(--cinza); }
.placa--dados dd { margin: .2rem 0 0; }

/* páginas de texto e aviso */
.doc { padding: clamp(3rem, 7vw, 5.5rem) 0; }
.doc h2 { font-size: 1.3rem; margin-top: 1.9rem; }
.doc li { margin-bottom: .45rem; }
.tabela { overflow-x: auto; margin-bottom: 1rem; background: var(--placa); border-radius: 18px; }
.tabela table { width: 100%; min-width: 520px; border-collapse: collapse; font-size: .94rem; }
.tabela th, .tabela td { text-align: left; vertical-align: top; padding: .7rem .9rem; border-bottom: 1px solid var(--risco); }
.tabela th { font-size: .76rem; text-transform: uppercase; letter-spacing: .08em; color: var(--cinza); }
code { font-size: .88em; background: var(--oliva-clara); padding: .05em .4em; border-radius: 6px; }
.aviso-pg { padding: clamp(3.5rem, 9vw, 7rem) 0; }
.aviso-pg__acoes { display: flex; flex-wrap: wrap; gap: .8rem; margin-top: 1.6rem; }

/* rodapé */
.rod { background: var(--grafite); color: #BFC1C4; font-size: .95rem; }
.rod a { color: #fff; }
.rod__grade { display: grid; grid-template-columns: minmax(0, 1.3fr) minmax(0, 1fr) minmax(0, 1fr); gap: 2rem; padding: 3.2rem 0 1.8rem; }
.rod__marca { font: 800 1.15rem/1.3 var(--fonte-titulo); color: #fff; }
.rod__titulo { font-size: .78rem; letter-spacing: .12em; text-transform: uppercase; color: var(--oliva-clara); font-weight: 600; }
.rod ul { list-style: none; margin: 0; padding: 0; display: grid; gap: .45rem; }
.rod__nota { margin: 0 auto; padding: 1rem 0 1.8rem; border-top: 1px solid #3A3D41; font-size: .84rem; color: #8F9296; }

/* aviso de cookies: barra presa ao rodapé da tela, sem tampar o conteúdo todo */
.aviso-ck { position: fixed; z-index: 60; left: 16px; right: 16px; bottom: 16px; margin: 0 auto; max-width: 720px; background: var(--placa); border-radius: 22px; padding: 1rem 1.2rem; box-shadow: 0 22px 50px -24px rgba(0, 0, 0, .6); display: grid; grid-template-columns: minmax(0, 1fr) auto; gap: .4rem 1.2rem; align-items: center; font-size: .92rem; }
.aviso-ck p { margin: 0; }
.aviso-ck__titulo { font: 700 1rem/1.3 var(--fonte-titulo); grid-column: 1 / -1; }
.aviso-ck__acoes { display: flex; gap: .5rem; }
.aviso-ck .btn { min-height: 42px; padding: .5rem 1rem; font-size: .92rem; }

@media (max-width: 980px) {
  .cab__menu { display: none; }
  .abre__grade, .monte__grade, .guia__grade, .orcamento__grade { grid-template-columns: minmax(0, 1fr); }
  .produtos__grade { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .guia__fotos { grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); }
  .rod__grade { grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); }
}

@media (max-width: 600px) {
  body { font-size: 1rem; }
  .cab__linha { min-height: 64px; gap: .8rem; }
  .cab__marca img { width: 38px; height: 38px; }
  .cab__marca small { display: none; }
  .cab__fone { padding: .5rem .85rem; gap: .4em; }
  .cab__fone span { font-size: .86rem; }
  .abre__acoes .btn { width: 100%; }
  .produtos__grade, .form-orc__dois, .rod__grade, .guia__fotos { grid-template-columns: minmax(0, 1fr); }
  .aviso-ck { grid-template-columns: minmax(0, 1fr); left: 8px; right: 8px; bottom: 8px; }
  .aviso-ck__acoes .btn { flex: 1; }
}

@media (prefers-reduced-motion: reduce) and (min-width: 0) {
  html { scroll-behavior: auto !important; }
  .btn, .espelho { transition: none; }
}