:root {
  /* --- Tipografia do catalogo: Engenharia sobria ---
     O Espaco Premium redefine estes mesmos tokens em premium.css. */
  --font-display: 'Archivo', system-ui, sans-serif;
  --font-text: 'Source Sans 3', system-ui, sans-serif;
  --font-mono: 'Space Mono', ui-monospace, monospace;
  --display-weight: 800;
  --display-tracking: -0.022em;

  --navy: #28324B;
  --navy-light: #364365;
  --yellow: #FFC40E;
  --white: #FFFFFF;
  --off-white: #F7F7F5;
  --gray: #6B7280;
  --border: #E5E5E0;
  --shadow: 0 8px 22px rgba(40, 50, 75, 0.08);
  --radius: 14px;
}

* { box-sizing: border-box; margin: 0; padding: 0; }

html { scroll-behavior: smooth; }

body {
  font-family: var(--font-text);
  color: var(--navy);
  background: var(--white);
  line-height: 1.5;
}

h1, h2, h3, .display {
  font-family: var(--font-display);
  font-weight: var(--display-weight);
  letter-spacing: var(--display-tracking);
  line-height: 1.08;
}

a { text-decoration: none; color: inherit; }
img { max-width: 100%; display: block; }
ul { list-style: none; }

.container {
  max-width: 1200px;
  margin: 0 auto;
  padding: 0 24px;
}

/* ---------- Coupon strip ---------- */
.coupon-strip {
  background: var(--navy);
  color: var(--white);
  text-align: center;
  font-size: 0.85rem;
  font-weight: 600;
  padding: 9px 16px;
}

.coupon-strip strong { color: var(--yellow); font-weight: 900; }

.coupon-strip a { text-decoration: underline; text-underline-offset: 2px; }
.coupon-strip a:hover { color: var(--yellow); }

/* ---------- Header ---------- */
.site-header {
  position: sticky;
  top: 0;
  z-index: 100;
  background: var(--white);
  border-bottom: 1px solid var(--border);
}

.site-header .container {
  display: flex;
  align-items: center;
  justify-content: space-between;
  height: 76px;
}

.brand {
  display: flex;
  align-items: center;
  gap: 12px;
}

.brand img {
  height: 34px;
  width: auto;
}

.brand-name {
  font-family: var(--font-text);
  font-weight: 800;
  font-size: 1.05rem;
  letter-spacing: -0.01em;
  color: var(--navy);
  line-height: 1.1;
}

.brand-name span {
  display: block;
  font-family: var(--font-text);
  font-weight: 400;
  font-size: 0.7rem;
  color: var(--gray);
  letter-spacing: 0.08em;
  text-transform: uppercase;
}

.main-nav > ul {
  display: flex;
  gap: 28px;
}

.main-nav > ul > li > a {
  font-weight: 600;
  font-size: 0.95rem;
  color: var(--navy);
  transition: color 0.15s;
}

.main-nav a:hover, .main-nav a.active { color: var(--yellow); }

.nav-premium-link {
  color: #B8860B !important;
  transition: transform 0.15s, color 0.15s;
}

.nav-premium-link:hover {
  color: #0B0B0C !important;
  transform: translateY(-1px);
}

/* ---------- Dropdown: Produtos ---------- */
.has-dropdown { position: relative; }

.dropdown-trigger {
  display: inline-flex;
  align-items: center;
  gap: 7px;
  cursor: default;
}

.dropdown-trigger::after {
  content: "";
  width: 7px;
  height: 7px;
  border-right: 2px solid currentColor;
  border-bottom: 2px solid currentColor;
  transform: rotate(45deg) translateY(-2px);
  opacity: 0.55;
  transition: transform 0.15s;
}

.has-dropdown:hover .dropdown-trigger::after { transform: rotate(225deg) translateY(1px); }

.mega-dropdown {
  display: none;
  position: absolute;
  top: calc(100% + 18px);
  left: -14px;
  background: var(--white);
  border: 1px solid var(--border);
  border-radius: 12px;
  box-shadow: var(--shadow);
  min-width: 270px;
  padding: 8px;
  z-index: 150;
}

.has-dropdown:hover .mega-dropdown,
.has-dropdown:focus-within .mega-dropdown { display: block; }

/* invisible bridge so the mouse can travel from the trigger down to the panel */
.has-dropdown::after {
  content: "";
  position: absolute;
  left: 0; right: 0; top: 100%;
  height: 18px;
}

.mega-dropdown > ul > li { position: relative; }

.mega-dropdown > ul > li > a {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 10px;
  padding: 12px 14px;
  border-radius: 8px;
  font-weight: 600;
  font-size: 0.92rem;
  color: var(--navy);
}

.mega-dropdown > ul > li > a::after {
  content: "";
  width: 6px;
  height: 6px;
  border-right: 2px solid currentColor;
  border-bottom: 2px solid currentColor;
  transform: rotate(-45deg);
  opacity: 0.4;
  flex-shrink: 0;
}

.mega-dropdown > ul > li:hover > a { background: var(--off-white); }

.submenu {
  display: none;
  position: absolute;
  top: -8px;
  left: calc(100% - 4px);
  background: var(--white);
  border: 1px solid var(--border);
  border-radius: 12px;
  box-shadow: var(--shadow);
  min-width: 240px;
  padding: 8px;
}

.has-submenu:hover .submenu,
.has-submenu:focus-within .submenu { display: block; }

.submenu a {
  display: block;
  padding: 10px 14px;
  border-radius: 8px;
  font-size: 0.87rem;
  font-weight: 500;
  color: var(--navy);
}

.submenu a:hover { background: var(--off-white); color: #8A6600; }

.nav-cta {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  background: var(--yellow);
  color: var(--navy);
  font-family: var(--font-mono);
  font-weight: 700;
  font-size: 0.7rem;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  padding: 12px 20px;
  border-radius: 3px;
  transition: background-color 0.2s ease;
}

.nav-cta:hover { background: #E8AE00; }

.nav-toggle { display: none; }

/* ---------- Hero (carousel) ---------- */
.hero {
  position: relative;
  min-height: 78vh;
  overflow: hidden;
  color: var(--white);
}

.hero-slides { position: relative; width: 100%; min-height: 78vh; }

.hero-slide {
  position: absolute;
  inset: 0;
  display: flex;
  align-items: flex-end;
  background-size: cover;
  background-position: center;
  opacity: 0;
  z-index: 1;
  transition: opacity 1.2s cubic-bezier(0.22, 0.61, 0.36, 1);
}

.hero-slide.active { opacity: 1; z-index: 2; }

/* a foto de cada slide aproxima devagar enquanto está na tela */
.hero-slide-img {
  position: absolute; inset: 0;
  background-size: cover; background-position: center;
  transform: scale(1.07);
  transition: transform 1.2s ease;
  will-change: transform;
}
.hero-slide.active .hero-slide-img { transform: scale(1); transition: transform 8s cubic-bezier(0.2, 0.5, 0.3, 1); }
.hero-slide.saindo .hero-slide-img { transform: scale(1); transition: none; }
@media (prefers-reduced-motion: reduce) { .hero-slide-img, .hero-slide.active .hero-slide-img { transform: none; transition: none; } }

/* troca em dois tempos: o slide atual (foto e texto) some por inteiro e só
   então o próximo aparece, para nunca ter duas fotos nem dois títulos um por
   cima do outro. Tempo da saída casado com o SAI do hero-carousel.js. */
.hero { background: #1B2233; }
.hero-slide.saindo { opacity: 0; z-index: 2; transition: opacity 0.65s cubic-bezier(0.55, 0, 0.45, 1); }
.hero-slide.saindo .hero-content {
  opacity: 0;
  transform: translateY(-10px);
  transition: opacity 0.3s ease, transform 0.3s ease;
}

.hero-slide::after {
  content: "";
  position: absolute;
  inset: 0;
  background: linear-gradient(180deg, rgba(40,50,75,0.15) 0%, rgba(40,50,75,0.55) 55%, rgba(24,30,46,0.92) 100%);
}

.hero-slide .container { position: relative; z-index: 2; width: 100%; }

.hero-content {
  padding-bottom: 64px;
  max-width: 720px;
  opacity: 0;
  transform: translateY(22px);
  transition: opacity 0.7s ease 0.35s, transform 0.7s ease 0.35s;
}

.hero-slide.active .hero-content { opacity: 1; transform: translateY(0); }

.hero-arrow {
  position: absolute;
  top: 50%;
  transform: translateY(-50%);
  z-index: 5;
  width: 46px;
  height: 46px;
  border-radius: 50%;
  background: rgba(255,255,255,0.12);
  border: 1.5px solid rgba(255,255,255,0.5);
  color: var(--white);
  font-size: 1.5rem;
  line-height: 1;
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
  transition: background 0.2s, transform 0.2s, border-color 0.2s;
}

.hero-arrow:hover {
  background: rgba(255,255,255,0.22);
  border-color: rgba(255,255,255,0.8);
}

.hero-arrow:active { transform: translateY(-50%) scale(0.94); }
.hero-arrow-prev { left: 22px; }
.hero-arrow-next { right: 22px; }

.hero-dots {
  position: absolute;
  bottom: 22px;
  left: 50%;
  transform: translateX(-50%);
  z-index: 5;
  display: flex;
  gap: 10px;
}

.hero-dot {
  width: 9px;
  height: 9px;
  border-radius: 50%;
  background: rgba(255,255,255,0.4);
  border: none;
  padding: 0;
  cursor: pointer;
  transition: background 0.2s, transform 0.2s, width 0.3s;
}

.hero-dot:hover { background: rgba(255,255,255,0.7); }
.hero-dot.active { background: var(--yellow); width: 26px; border-radius: 999px; }

@media (max-width: 700px) {
  .hero-arrow { display: none; }
}

.hero-eyebrow {
  display: inline-block;
  color: var(--yellow);
  font-weight: 800;
  font-size: 0.82rem;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  margin-bottom: 20px;
}

.hero h1 {
  font-family: var(--font-display);
  font-weight: 900;
  letter-spacing: -0.02em;
  font-size: clamp(2.3rem, 5.5vw, 3.8rem);
  line-height: 1.08;
  margin-bottom: 18px;
}

.hero p {
  font-size: 1.1rem;
  color: #E7E9F0;
  max-width: 560px;
  margin-bottom: 28px;
}

.hero-actions { display: flex; gap: 14px; flex-wrap: wrap; }

.btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 9px;
  font-family: var(--font-mono);
  font-weight: 700;
  font-size: 0.76rem;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  padding: 15px 26px;
  border-radius: 3px;
  transition: background-color 0.2s ease, border-color 0.2s ease, color 0.2s ease;
}

.btn-yellow { background: var(--yellow); color: var(--navy); }
.btn-yellow:hover { background: #E8AE00; }
.btn-outline { background: transparent; color: var(--white); border: 1.5px solid rgba(255,255,255,0.55); }
.btn-outline:hover { border-color: var(--white); background: rgba(255,255,255,0.08); }

/* ---------- Social proof strip ---------- */
.proof-strip {
  background: var(--navy);
  color: var(--white);
}

.proof-strip .container {
  display: flex;
  flex-wrap: wrap;
  gap: 32px;
  justify-content: space-between;
  align-items: center;
  padding-top: 22px;
  padding-bottom: 22px;
  font-size: 0.92rem;
}

.proof-item { display: flex; align-items: center; gap: 10px; }
.proof-item strong { color: var(--yellow); font-family: var(--font-display); font-weight: var(--display-weight); }

/* ---------- Section headers ---------- */
.section {
  padding: 84px 0;
}

.section-off { background: var(--off-white); }

.section-head {
  max-width: 640px;
  margin: 0 auto 48px;
  text-align: center;
}

.section-eyebrow {
  display: inline-block;
  color: var(--navy);
  opacity: 0.5;
  font-weight: 700;
  font-size: 0.8rem;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  margin-bottom: 14px;
}

.section-head h2 {
  font-size: clamp(1.7rem, 3.2vw, 2.4rem);
  margin-bottom: 14px;
}

.section-head p { color: var(--gray); font-size: 1.05rem; }

/* ---------- Category grid (home) ---------- */
.cat-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 22px;
}

.cat-card {
  position: relative;
  border-radius: var(--radius);
  overflow: hidden;
  min-height: 300px;
  display: flex;
  align-items: flex-end;
  box-shadow: var(--shadow);
  background-size: cover;
  background-position: center;
}

.cat-card::after {
  content: "";
  position: absolute;
  inset: 0;
  z-index: 1;
  background: linear-gradient(180deg, rgba(40,50,75,0) 35%, rgba(24,30,46,0.88) 100%);
}

.cat-card-body {
  position: relative;
  z-index: 2;
  padding: 26px;
  width: 100%;
}

.cat-card h3 {
  color: var(--white);
  font-size: 1.3rem;
  margin-bottom: 6px;
}

.cat-card p {
  color: #DADFEA;
  font-size: 0.88rem;
  margin-bottom: 14px;
}

.cat-card .btn {
  padding: 9px 18px;
  font-size: 0.8rem;
}

/* ---------- Differentials ---------- */
.diff-grid {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 22px;
}

.diff-card {
  background: var(--white);
  border: 1px solid var(--border);
  border-radius: var(--radius);
  padding: 28px 22px;
  text-align: center;
}

.diff-icon {
  width: 52px; height: 52px;
  margin: 0 auto 16px;
  border-radius: 50%;
  background: var(--navy);
  color: var(--yellow);
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 1.4rem;
}

.diff-card h3 { font-size: 1rem; margin-bottom: 8px; }
.diff-card p { color: var(--gray); font-size: 0.88rem; }

/* ---------- Premium showcase (editorial carousel) ---------- */
.section-dark {
  background: var(--navy);
  color: var(--white);
}

.section-dark .section-eyebrow { color: var(--yellow); opacity: 0.9; }
.section-dark .section-head h2 { color: var(--white); }
.section-dark .section-head p { color: #B7BDD1; }

.premium-scroller {
  display: flex;
  gap: 18px;
  overflow-x: auto;
  scroll-snap-type: x mandatory;
  padding-bottom: 10px;
  margin: 0 -24px;
  padding-left: 24px;
  padding-right: 24px;
}

.premium-scroller::-webkit-scrollbar { height: 6px; }
.premium-scroller::-webkit-scrollbar-thumb { background: rgba(255,255,255,0.2); border-radius: 999px; }

.premium-card {
  position: relative;
  flex: 0 0 auto;
  width: 320px;
  aspect-ratio: 4 / 3;
  border-radius: var(--radius);
  overflow: hidden;
  scroll-snap-align: start;
  background-size: cover;
  background-position: center;
}

.premium-card::after {
  content: "";
  position: absolute;
  inset: 0;
  z-index: 1;
  background: linear-gradient(180deg, rgba(0,0,0,0) 55%, rgba(0,0,0,0.55) 100%);
}

.premium-label {
  position: absolute;
  left: 16px;
  bottom: 16px;
  z-index: 2;
  background: rgba(24,30,46,0.55);
  backdrop-filter: blur(3px);
  color: var(--white);
  font-weight: 700;
  font-size: 0.9rem;
  padding: 8px 16px;
  border-radius: 999px;
}

.premium-note {
  text-align: center;
  color: #8891A8;
  font-size: 0.85rem;
  margin-top: 22px;
}

@media (max-width: 600px) {
  .premium-card { width: 260px; }
}

/* ---------- Premium teaser (links to premium.html) ---------- */
.premium-teaser {
  display: block;
  background: linear-gradient(120deg, #0B0B0C 0%, #221C10 100%);
  color: var(--white);
  overflow: hidden;
  position: relative;
}

.premium-teaser-inner {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 24px;
  flex-wrap: wrap;
  padding: 48px 24px;
}

.premium-teaser-kicker {
  display: block;
  color: #D4AF37;
  font-weight: 700;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  font-size: 0.78rem;
  margin-bottom: 10px;
}

.premium-teaser h3 {
  font-size: clamp(1.3rem, 2.6vw, 1.7rem);
  color: var(--white);
  margin-bottom: 6px;
  max-width: 560px;
}

.premium-teaser p { color: #B8AF9A; font-size: 0.95rem; }

.premium-teaser-btn {
  background: #D4AF37;
  color: #0B0B0C;
  font-weight: 900;
  padding: 14px 26px;
  border-radius: 999px;
  white-space: nowrap;
  transition: transform 0.2s;
}

.premium-teaser:hover .premium-teaser-btn { transform: translateX(6px); }

/* ---------- Thermo section (manta térmica) ---------- */
/* ---------- Category page banner ---------- */
.cat-banner {
  position: relative;
  min-height: 340px;
  display: flex;
  align-items: center;
  background-color: var(--navy);
  background-size: cover;
  background-position: center;
  color: var(--white);
}

.cat-banner::after {
  content: "";
  position: absolute;
  inset: 0;
  background: linear-gradient(90deg, rgba(24,30,46,0.92) 20%, rgba(24,30,46,0.45) 100%);
}

.cat-banner-content { position: relative; z-index: 2; max-width: 640px; }

.breadcrumb {
  font-size: 0.85rem;
  color: #C9CEDC;
  margin-bottom: 14px;
}

.breadcrumb a { color: var(--yellow); }

.cat-banner h1 { font-size: clamp(1.8rem, 4vw, 2.6rem); margin-bottom: 12px; }
.cat-banner p { color: #E7E9F0; font-size: 1.02rem; }

/* ---------- Product grid ---------- */
.product-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 26px;
}

.product-card {
  border: 1px solid var(--border);
  border-radius: var(--radius);
  overflow: hidden;
  background: var(--white);
  transition: box-shadow 0.15s, transform 0.15s, outline-color 0.6s;
  display: flex;
  flex-direction: column;
  scroll-margin-top: 100px;
  outline: 2px solid transparent;
  outline-offset: 3px;
}

.product-card:target { outline-color: var(--yellow); }

.product-card:hover { box-shadow: var(--shadow); transform: translateY(-3px); }

.product-photo {
  background: var(--off-white);
  aspect-ratio: 4 / 3;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 18px;
  position: relative;
}

.product-photo img { max-height: 100%; object-fit: contain; }

.badge {
  position: absolute;
  top: 12px;
  left: 12px;
  background: var(--yellow);
  color: var(--navy);
  font-family: var(--font-mono);
  font-weight: 700;
  font-size: 0.62rem;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  padding: 6px 10px;
  border-radius: 2px;
}

.product-body {
  padding: 20px;
  display: flex;
  flex-direction: column;
  gap: 12px;
  flex: 1;
}

.product-body h3 { font-size: 1.02rem; line-height: 1.3; }

.spec-list {
  display: flex;
  flex-direction: column;
  gap: 5px;
  font-size: 0.83rem;
  color: var(--gray);
}

.spec-list li { display: flex; justify-content: space-between; gap: 10px; }
.spec-list b { color: var(--navy); font-weight: 600; }

.product-body .btn {
  margin-top: auto;
  justify-content: center;
  padding: 11px 18px;
  font-size: 0.85rem;
  background: var(--navy);
  color: var(--white);
}

.product-body .btn:hover { background: var(--navy-light); }

/* ---------- Brand filter ---------- */
.brand-filter {
  display: flex;
  align-items: center;
  gap: 10px;
  flex-wrap: wrap;
  margin-bottom: 36px;
}

.brand-filter-label {
  font-weight: 700;
  font-size: 0.88rem;
  color: var(--gray);
  margin-right: 4px;
}

.brand-pill {
  background: var(--white);
  border: 1.5px solid var(--border);
  color: var(--navy);
  font-family: var(--font-mono);
  font-weight: 700;
  font-size: 0.7rem;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  padding: 10px 16px;
  border-radius: 3px;
  cursor: pointer;
  transition: background 0.15s, border-color 0.15s, transform 0.15s;
}

.brand-pill:hover { border-color: var(--navy); }

.brand-pill.active {
  background: var(--navy);
  border-color: var(--navy);
  color: var(--white);
}

/* ---------- Sub-category divider ---------- */
.subcat-title {
  font-size: 1.1rem;
  color: var(--navy);
  margin: 56px 0 22px;
  padding-bottom: 10px;
  border-bottom: 2px solid var(--yellow);
  display: inline-block;
}

/* ---------- Calculator ---------- */
.container-narrow { max-width: 640px; }

.calc-card {
  border: 1px solid var(--border);
  border-radius: var(--radius);
  padding: 36px;
  box-shadow: var(--shadow);
}

.calc-step { margin-bottom: 26px; }

.calc-step > label {
  display: block;
  font-weight: 700;
  font-size: 0.95rem;
  color: var(--navy);
  margin-bottom: 12px;
}

.calc-sublabel {
  display: block;
  font-size: 0.8rem;
  color: var(--gray);
  margin-bottom: 6px;
}

.calc-step select,
.calc-step input {
  width: 100%;
  font-family: var(--font-text);
  font-size: 1rem;
  padding: 13px 14px;
  border: 1.5px solid var(--border);
  border-radius: 10px;
  color: var(--navy);
  background: var(--white);
}

.calc-step select:focus,
.calc-step input:focus {
  outline: none;
  border-color: var(--yellow);
}

.calc-inputs-row {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 14px;
}

.calc-result {
  background: var(--off-white);
  border-radius: 12px;
  padding: 20px 22px;
  display: flex;
  flex-direction: column;
  gap: 10px;
  margin-bottom: 16px;
}

.calc-result-row {
  display: flex;
  justify-content: space-between;
  font-size: 0.92rem;
  color: var(--gray);
}

.calc-result-row b { color: var(--navy); font-weight: 700; }

.calc-result-total {
  padding-top: 10px;
  border-top: 1px dashed var(--border);
  font-size: 1.05rem;
}

.calc-result-total span { color: var(--navy); font-weight: 700; }
.calc-result-total b { color: var(--navy); font-weight: 900; font-size: 1.2rem; }

.calc-note {
  font-size: 0.82rem;
  color: var(--gray);
  margin-bottom: 22px;
  line-height: 1.5;
}

#calc-whatsapp-btn {
  width: 100%;
  justify-content: center;
  background: var(--navy);
  color: var(--white);
}

#calc-whatsapp-btn.btn-disabled {
  opacity: 0.4;
  pointer-events: none;
}

/* ---------- Product detail page ---------- */
.pd-grid {
  display: grid;
  grid-template-columns: 1.1fr 1fr;
  gap: 50px;
  align-items: start;
}

.pd-gallery-main {
  position: relative;
  background: var(--off-white);
  border-radius: var(--radius);
  aspect-ratio: 4 / 3.4;
  display: flex;
  align-items: center;
  justify-content: center;
  overflow: hidden;
}

.pd-gallery-main img {
  max-width: 88%;
  max-height: 88%;
  object-fit: contain;
  transition: opacity 0.25s ease;
}

/* com as fotos de obra (até 11 miniaturas) a fileira quebra linha: sem isso ela alargava a coluna
   da foto e empurrava o "Monte seu kit" para a beira da tela (Gustavo, 16/10/2026) */
.pd-grid > * { min-width: 0; }

.pd-gallery-thumbs {
  display: flex;
  flex-wrap: wrap;
  gap: 12px;
  margin-top: 14px;
}

.pd-thumb {
  flex: 0 0 auto;
  width: 84px;
  height: 64px;
  border-radius: 8px;
  overflow: hidden;
  border: 2px solid var(--border);
  cursor: pointer;
  background: var(--off-white);
  padding: 0;
  transition: border-color 0.2s;
}

.pd-thumb img { width: 100%; height: 100%; object-fit: cover; }
.pd-thumb.active { border-color: var(--yellow); }
.pd-thumb:hover { border-color: var(--navy); }

.pd-brand {
  display: inline-block;
  color: var(--gray);
  font-weight: 700;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  font-size: 0.8rem;
  margin-bottom: 8px;
}

.pd-info h1 { font-size: clamp(1.6rem, 3vw, 2.1rem); margin-bottom: 16px; }

.pd-description { color: var(--gray); font-size: 1.02rem; margin-bottom: 26px; line-height: 1.6; }

.pd-specs {
  width: 100%;
  border-collapse: collapse;
  margin-bottom: 28px;
}

.pd-specs tr { border-bottom: 1px solid var(--border); }
.pd-specs tr:first-child { border-top: 1px solid var(--border); }

.pd-specs td {
  padding: 12px 4px;
  font-size: 0.94rem;
}

.pd-specs td:first-child { color: var(--gray); width: 40%; }
.pd-specs td:last-child { color: var(--navy); font-weight: 700; text-align: right; }

.pd-whatsapp-btn {
  width: 100%;
  justify-content: center;
  margin-bottom: 16px;
}

.pd-back-link {
  display: block;
  text-align: center;
  color: var(--gray);
  font-size: 0.9rem;
  font-weight: 600;
  transition: color 0.15s;
}

.pd-back-link:hover { color: var(--navy); }

@media (max-width: 800px) {
  .pd-grid { grid-template-columns: 1fr; }
}

/* ---------- Contact page ---------- */
.contact-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 40px;
  align-items: start;
}

.contact-info {
  display: flex;
  flex-direction: column;
  gap: 18px;
}

.contact-card {
  display: flex;
  gap: 18px;
  align-items: flex-start;
  padding: 22px;
  border: 1px solid var(--border);
  border-radius: var(--radius);
}

.contact-card-highlight {
  background: var(--navy);
  border-color: var(--navy);
  color: var(--white);
}

.contact-card-highlight h3 { color: var(--white); }
.contact-card-highlight p { color: #C9CEDC; }

.contact-icon {
  width: 44px;
  height: 44px;
  flex-shrink: 0;
  border-radius: 50%;
  background: var(--off-white);
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 1.2rem;
}

.contact-card-highlight .contact-icon { background: rgba(255,255,255,0.12); }

.contact-card h3 { font-size: 1.02rem; margin-bottom: 6px; }
.contact-card p { color: var(--gray); font-size: 0.92rem; }

.hours-list { display: flex; flex-direction: column; gap: 6px; font-size: 0.9rem; }
.hours-list li { display: flex; justify-content: space-between; gap: 14px; color: var(--gray); }
.hours-list b { color: var(--navy); font-weight: 700; }

.contact-map {
  min-height: 480px;
  border-radius: var(--radius);
  overflow: hidden;
  box-shadow: var(--shadow);
}

@media (max-width: 900px) {
  .contact-grid { grid-template-columns: 1fr; }
  .contact-map { min-height: 320px; }
}

/* ---------- Footer ---------- */
.site-footer {
  background: var(--navy);
  color: #C9CEDC;
  padding: 64px 0 0;
}

.footer-grid {
  display: grid;
  grid-template-columns: 1.4fr 1fr 1fr 1fr;
  gap: 40px;
  padding-bottom: 48px;
  border-bottom: 1px solid rgba(255,255,255,0.12);
}

.footer-brand { display: flex; align-items: center; margin-bottom: 16px; }
.footer-brand img { height: 30px; width: auto; }
.footer-brand strong { font-family: var(--font-text); font-weight: 800; letter-spacing: -0.01em; color: var(--white); }

.site-footer h4 {
  color: var(--white);
  font-family: var(--font-text);
  font-weight: 700;
  font-size: 0.9rem;
  text-transform: uppercase;
  letter-spacing: 0.05em;
  margin-bottom: 18px;
}

.site-footer ul li { margin-bottom: 10px; font-size: 0.9rem; }
.site-footer a:hover { color: var(--yellow); }

.footer-rating {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  background: rgba(255,255,255,0.08);
  padding: 8px 14px;
  border-radius: 999px;
  margin-top: 6px;
  font-size: 0.85rem;
  color: var(--white);
}

.footer-bottom {
  padding: 22px 0;
  font-size: 0.8rem;
  color: #8891A8;
  display: flex;
  justify-content: space-between;
  flex-wrap: wrap;
  gap: 10px;
}

/* ---------- WhatsApp float ---------- */
.wa-float {
  position: fixed;
  bottom: 26px;
  right: 26px;
  z-index: 200;
  background: #25D366;
  color: var(--white);
  width: 60px;
  height: 60px;
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  box-shadow: 0 8px 24px rgba(37,211,102,0.45);
  font-size: 1.7rem;
  transition: transform 0.15s;
}

.wa-float:hover { transform: scale(1.08); }

/* ---------- Responsive ---------- */
@media (max-width: 900px) {
  .main-nav { display: none; }
  /* .nav-toggle: aparência definida no bloco "Menu mobile (drawer)" */
  .cat-grid { grid-template-columns: 1fr 1fr; }
  .diff-grid { grid-template-columns: 1fr 1fr; }
  .product-grid { grid-template-columns: 1fr 1fr; }
  .footer-grid { grid-template-columns: 1fr 1fr; }
}

@media (max-width: 600px) {
  .cat-grid { grid-template-columns: 1fr; }
  .diff-grid { grid-template-columns: 1fr; }
  .product-grid { grid-template-columns: 1fr; }
  .footer-grid { grid-template-columns: 1fr; }
  .hero { min-height: 88vh; }
  .site-header .container { height: 66px; }
}

/* ---------- Micro-interactions ---------- */

/* Buttons: press feedback on click */
.btn:active,
.nav-cta:active,
.wa-float:active { transform: scale(0.98); }

.nav-cta,
.wa-float { transition: transform 0.15s, box-shadow 0.15s; }

/* Category cards: photo zoom (inner layer) + lift on hover */
.cat-card { transition: transform 0.3s ease, box-shadow 0.3s ease; }
.cat-card:hover { transform: translateY(-2px); }

.cat-card-bg {
  position: absolute;
  inset: 0;
  z-index: 0;
  background-size: cover;
  background-position: center;
  transition: transform 0.6s ease;
}

.cat-card:hover .cat-card-bg { transform: scale(1.1); }

.cat-card .btn { transition: transform 0.2s, background 0.2s; }
.cat-card:hover .btn { opacity: 0.9; }

/* Premium carousel cards: same photo-zoom treatment */
.premium-card { transition: transform 0.3s ease; }
.premium-card:hover { transform: translateY(-2px); }

.premium-card-bg {
  position: absolute;
  inset: 0;
  z-index: 0;
  background-size: cover;
  background-position: center;
  transition: transform 0.6s ease;
}

.premium-card:hover .premium-card-bg { transform: scale(1.1); }

.premium-label { transition: background 0.2s; }
.premium-card:hover .premium-label { background: var(--yellow); color: var(--navy); }

/* Product cards: photo zoom inside the fixed frame */
.product-photo { overflow: hidden; }
.product-photo img { transition: transform 0.4s ease; }
.product-card:hover .product-photo img { transform: scale(1.07); }

.product-body .btn { transition: transform 0.15s, background 0.2s; }
.product-body .btn:hover { opacity: 0.88; }
.product-body .btn:active { transform: translateY(0) scale(0.96); }

/* Differentials: icon pop */
.diff-card { transition: transform 0.25s ease, box-shadow 0.25s ease; }
.diff-card:hover { transform: translateY(-2px); }
.diff-icon { transition: transform 0.3s ease; }
.diff-card:hover .diff-icon { transform: scale(1.05); }

/* Contact cards */
.contact-card { transition: transform 0.2s ease, box-shadow 0.2s ease; }
.contact-card:hover { transform: translateY(-2px); }

/* Nav dropdown items: subtle slide-in on hover */
.mega-dropdown > ul > li > a,
.submenu a { transition: background 0.15s, padding-left 0.15s; }
.mega-dropdown > ul > li:hover > a,
.submenu a:hover { padding-left: 18px; }

/* Footer links */
.site-footer a { transition: color 0.15s, padding-left 0.15s; display: inline-block; }
.site-footer ul a:hover { padding-left: 4px; }

/* Logo: gentle response on hover */
.brand img { transition: transform 0.2s ease; }
.brand:hover img { transform: scale(1.03); }

/* WhatsApp float: idle attention pulse */
.wa-float:hover { opacity: 0.9; }

/* ---------- Menu mobile (drawer) ---------- */
.nav-toggle {
  display: none;
  flex-direction: column;
  justify-content: center;
  gap: 5px;
  width: 44px;
  height: 44px;
  padding: 0;
  border: none;
  background: none;
  cursor: pointer;
  flex-shrink: 0;
}

.nav-toggle span {
  display: block;
  width: 24px;
  height: 2px;
  margin: 0 auto;
  border-radius: 2px;
  background: var(--navy);
  transition: transform 0.25s ease, opacity 0.2s ease;
}

.nav-toggle[aria-expanded="true"] span:nth-child(1) { transform: translateY(7px) rotate(45deg); }
.nav-toggle[aria-expanded="true"] span:nth-child(2) { opacity: 0; }
.nav-toggle[aria-expanded="true"] span:nth-child(3) { transform: translateY(-7px) rotate(-45deg); }

.mnav-backdrop {
  position: fixed;
  inset: 0;
  z-index: 400;
  background: rgba(15, 20, 32, 0.55);
  opacity: 0;
  visibility: hidden;
  transition: opacity 0.25s ease, visibility 0.25s ease;
}

.mnav-backdrop.is-open { opacity: 1; visibility: visible; }

.mobile-nav {
  position: fixed;
  top: 0;
  right: 0;
  z-index: 401;
  display: flex;
  flex-direction: column;
  width: min(88vw, 360px);
  height: 100dvh;
  padding: 0 0 env(safe-area-inset-bottom);
  background: var(--white);
  box-shadow: -18px 0 48px rgba(15, 20, 32, 0.22);
  transform: translateX(100%);
  visibility: hidden;
  overflow-y: auto;
  overscroll-behavior: contain;
  transition: transform 0.3s cubic-bezier(0.22, 0.61, 0.36, 1), visibility 0.3s;
}

.mobile-nav.is-open { transform: translateX(0); visibility: visible; }

body.has-mnav-open { overflow: hidden; }

.mnav-head {
  position: sticky;
  top: 0;
  z-index: 2;
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 18px 20px 14px;
  background: var(--white);
  border-bottom: 1px solid var(--border);
}

.mnav-head-title {
  font-family: var(--font-text);
  font-weight: 800;
  font-size: 0.78rem;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: #6B7280;
}

.mnav-close {
  width: 40px;
  height: 40px;
  border: none;
  background: var(--off-white);
  border-radius: 50%;
  font-size: 1.5rem;
  line-height: 1;
  color: var(--navy);
  cursor: pointer;
}

.mnav-list { list-style: none; margin: 0; padding: 8px 12px 4px; }

.mnav-list > li { border-bottom: 1px solid var(--border); }
.mnav-list > li:last-child { border-bottom: none; }

.mnav-list > li > a,
.mnav-acc {
  display: flex;
  align-items: center;
  justify-content: space-between;
  width: 100%;
  gap: 12px;
  padding: 16px 8px;
  border: none;
  background: none;
  font-family: var(--font-text);
  font-size: 1rem;
  font-weight: 600;
  color: var(--navy);
  text-align: left;
  cursor: pointer;
}

.mnav-list > li > a.active { color: #8A6600; }

.mnav-premium {
  color: #8A6600 !important;
  font-weight: 800 !important;
}

.mnav-chev {
  width: 8px;
  height: 8px;
  flex-shrink: 0;
  border-right: 2px solid currentColor;
  border-bottom: 2px solid currentColor;
  opacity: 0.45;
  transform: rotate(45deg);
  transition: transform 0.25s ease;
}

.mnav-group.is-open .mnav-chev { transform: rotate(-135deg); }

.mnav-sub {
  max-height: 0;
  overflow: hidden;
  transition: max-height 0.3s ease;
}

.mnav-sub a {
  display: block;
  padding: 12px 8px 12px 20px;
  font-size: 0.9rem;
  font-weight: 500;
  color: #4B5563;
  border-left: 2px solid var(--border);
  margin-left: 6px;
}

.mnav-sub a:last-child { padding-bottom: 18px; }

.mnav-sub-all {
  font-weight: 700 !important;
  color: var(--navy) !important;
}

.mnav-cta {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 9px;
  margin: 18px 20px 8px;
  padding: 16px 20px;
  border-radius: 3px;
  background: var(--yellow);
  color: var(--navy);
  font-family: var(--font-mono);
  font-weight: 700;
  font-size: 0.74rem;
  letter-spacing: 0.08em;
  text-transform: uppercase;
}

.mnav-foot {
  padding: 8px 20px 28px;
  font-size: 0.8rem;
  line-height: 1.6;
  color: #6B7280;
}

@media (max-width: 900px) {
  .nav-toggle { display: flex; }
}

@media (max-width: 900px) {
  .nav-cta { white-space: nowrap; font-size: 0.66rem; padding: 11px 15px; letter-spacing: 0.06em; }
}

@media (max-width: 420px) {
  .nav-cta { font-size: 0.62rem; padding: 10px 12px; letter-spacing: 0.04em; }
}

@media (prefers-reduced-motion: reduce) {
  .mobile-nav, .mnav-backdrop, .mnav-sub, .mnav-chev, .nav-toggle span { transition: none; }
}


/* ---------- Sistema de icones (SVG inline, sem emoji) ---------- */
.ico {
  width: 1em;
  height: 1em;
  flex-shrink: 0;
  vertical-align: -0.14em;
}

.ico-lg { width: 1.5em; height: 1.5em; }

/* rotulos pequenos em mono, o terceiro tipo do sistema */
.eyebrow, .subcat-title, .breadcrumb, .spec-list span,
.thermo-label, .thermo-product-label, .site-footer h4 {
  font-family: var(--font-mono);
  font-weight: 400;
}

.footer-rating { display: inline-flex; align-items: center; gap: 7px; }
.footer-rating .ico { color: var(--yellow); }

/* faixa do cupom */
.coupon-strip { display: flex; align-items: center; justify-content: center; gap: 9px; }
.coupon-strip .ico { color: var(--yellow); width: 1.15em; height: 1.15em; }

/* marca do Espaco Premium */
.nav-premium-link { display: inline-flex; align-items: center; gap: 7px; }
.nav-premium-link .ico { color: #C9A227; width: 0.9em; height: 0.9em; }
.mnav-premium { display: inline-flex; align-items: center; gap: 8px; }
.mnav-premium .ico { color: #C9A227; width: 0.9em; height: 0.9em; }

/* botao flutuante do WhatsApp */
.wa-float .ico { width: 30px; height: 30px; }

/* icones dos diferenciais e do contato */
.diff-icon .ico, .contact-icon .ico { width: 26px; height: 26px; color: var(--navy); }


/* ---------- Calculadora: caixa de margem de perda ---------- */
.calc-step > label.calc-check,
.calc-check {
  display: flex;
  align-items: flex-start;
  gap: 14px;
  padding: 16px 18px;
  border: 1px solid var(--border);
  border-radius: 4px;
  background: var(--off-white);
  cursor: pointer;
  transition: border-color 0.2s ease, background-color 0.2s ease;
}

.calc-check:hover { border-color: #C9CBD2; }
.calc-check:has(input:checked) { border-color: var(--navy); background: #fff; }

.calc-check input {
  position: absolute;
  opacity: 0;
  width: 0;
  height: 0;
}

.calc-check-box {
  display: block;
  position: relative;
  flex-shrink: 0;
  width: 22px;
  height: 22px;
  margin-top: 1px;
  border: 1.5px solid #B6B9C2;
  border-radius: 3px;
  background: var(--white);
  transition: background-color 0.15s ease, border-color 0.15s ease;
}

.calc-check-box::after {
  content: "";
  position: absolute;
  left: 7px; top: 3px;
  width: 5px; height: 10px;
  border: solid var(--navy);
  border-width: 0 2.5px 2.5px 0;
  transform: rotate(45deg) scale(0.6);
  opacity: 0;
  transition: opacity 0.15s ease, transform 0.15s ease;
}

.calc-check input:checked + .calc-check-box {
  border-color: var(--yellow);
  background: var(--yellow);
}

.calc-check input:checked + .calc-check-box::after {
  opacity: 1;
  transform: rotate(45deg) scale(1);
}

.calc-check input:focus-visible + .calc-check-box {
  outline: 2px solid var(--navy);
  outline-offset: 2px;
}

.calc-check-text {
  display: block;
  font-weight: 400;
  font-size: 0.88rem;
  line-height: 1.55;
  color: var(--gray);
}

.calc-check-text b {
  display: block;
  font-family: var(--font-text);
  font-weight: 700;
  font-size: 0.95rem;
  color: var(--navy);
  margin-bottom: 3px;
}

/* ---------- Manta termica: o duelo quente x frio ---------- */
.manta-duel {
  position: relative;
  background: #0B0B0E;
  padding: 0 0 34px;
  overflow: hidden;
}

.manta-stage {
  position: relative;
  display: grid;
  grid-template-columns: 1fr 1fr;
  min-height: min(78vh, 640px);
  isolation: isolate;
}

.manta-side {
  position: relative;
  z-index: 1;
  display: flex;
  align-items: center;
  overflow: hidden;
}

.manta-hot { justify-content: flex-start; }
.manta-cold { justify-content: flex-end; }

/* o fundo e uma coisa so: o vermelho atravessa o meio e vira azul,
   passando por tons que sao os dois ao mesmo tempo */
.manta-stage::before {
  content: "";
  position: absolute;
  inset: 0;
  z-index: 0;
  background:
    radial-gradient(90% 120% at 8% 42%, rgba(255, 140, 78, 0.75) 0%, rgba(255, 140, 78, 0) 58%),
    radial-gradient(90% 120% at 92% 58%, rgba(180, 226, 255, 0.62) 0%, rgba(180, 226, 255, 0) 58%),
    linear-gradient(97deg,
      #C7331F 0%,
      #B93524 16%,
      #9E3A34 30%,
      #7E4051 41%,
      #64465F 47%,
      #4E4E6B 52%,
      #3D5677 58%,
      #2C5C86 70%,
      #1B4E77 84%,
      #10314C 100%);
}

/* uma respiracao lenta na zona de mistura, como se as duas cores
   estivessem se empurrando */
.manta-stage::after {
  content: "";
  position: absolute;
  top: 0; bottom: 0;
  left: 50%;
  width: 46%;
  transform: translateX(-50%);
  z-index: 0;
  pointer-events: none;
  background: radial-gradient(ellipse 52% 70% at 50% 50%,
              rgba(214, 90, 60, 0.34) 0%,
              rgba(120, 90, 140, 0.22) 42%,
              rgba(60, 120, 180, 0.16) 66%,
              rgba(0, 0, 0, 0) 82%);
  animation: mantaMistura 9s ease-in-out infinite alternate;
  animation-delay: -3.4s;
}

@keyframes mantaMistura {
  from { transform: translateX(-54%) scaleX(0.92); opacity: 0.75; }
  to   { transform: translateX(-46%) scaleX(1.1);  opacity: 1; }
}

/* linguas de calor empurrando o alumínio */
.manta-heat { position: absolute; inset: 0; z-index: 1; pointer-events: none; }

.manta-heat span {
  position: absolute;
  right: -6%;
  width: 42%;
  height: 26%;
  border-radius: 50%;
  background: radial-gradient(closest-side at 30% 50%, rgba(255,206,140,0.5), rgba(255,170,100,0.18) 55%, rgba(255,120,60,0) 100%);
  opacity: 0;
  animation: mantaHeat 7s ease-in-out infinite;
}

.manta-heat span:nth-child(1) { top:  6%; animation-delay: -0.4s; }
.manta-heat span:nth-child(2) { top: 26%; animation-delay: -2.1s; width: 34%; }
.manta-heat span:nth-child(3) { top: 45%; animation-delay: -3.6s; }
.manta-heat span:nth-child(4) { top: 63%; animation-delay: -5.0s; width: 30%; }
.manta-heat span:nth-child(5) { top: 80%; animation-delay: -6.2s; }

@keyframes mantaHeat {
  0%   { transform: translateX(-60%) scaleX(0.7); opacity: 0; }
  35%  { opacity: 0.85; }
  70%  { transform: translateX(4%) scaleX(1.1); opacity: 0.5; }
  100% { transform: translateX(12%) scaleX(1.2); opacity: 0; }
}

/* a costura no meio: onde o aluminio segura */
.manta-seam {
  position: absolute;
  top: 8%; bottom: 8%; left: 50%;
  width: 1px;
  transform: translateX(-50%);
  z-index: 2;
  background: linear-gradient(180deg,
    rgba(255,255,255,0) 0%,
    rgba(255,238,205,0.34) 22%,
    rgba(255,255,255,0.5) 50%,
    rgba(205,235,255,0.34) 78%,
    rgba(255,255,255,0) 100%);
  box-shadow: 0 0 30px 10px rgba(255, 200, 150, 0.14), 0 0 30px 10px rgba(150, 200, 255, 0.12);
  animation: mantaSeam 4.5s ease-in-out infinite alternate;
  animation-delay: -1.6s;
}

@keyframes mantaSeam {
  from { opacity: 0.35; }
  to   { opacity: 0.85; }
}

/* a manta flutuando, literalmente */
.manta-float {
  position: absolute;
  z-index: 3;
  left: 50%;
  top: 50%;
  width: min(62vw, 880px);
  max-width: 94%;
  max-height: 78%;
  margin: 0;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  transform: translate(-50%, -50%);
  text-align: center;
}

.manta-float-img {
  display: block;
  width: 100%;
  height: auto;
  max-height: calc(76vh - 50px);
  object-fit: contain;
  filter: drop-shadow(0 40px 60px rgba(0, 0, 0, 0.6));
  animation: mantaFloat 8s ease-in-out infinite alternate;
  animation-delay: -2.6s;
}

/* enquanto a foto recortada nao chegar, a antiga volta pra placa,
   pra nao ficar um retangulo com fundo solto no meio da tela */
.manta-float.sem-foto .manta-float-img {
  aspect-ratio: 4 / 3;
  object-fit: cover;
  border-radius: 6px;
  padding: 10px;
  background: rgba(12, 12, 16, 0.55);
  border: 1px solid rgba(255, 255, 255, 0.18);
}

.manta-float figcaption {
  margin-top: 10px;
  font-family: var(--font-mono);
  font-size: 0.7rem;
  font-weight: 500;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: #F0E5D2;
  text-shadow: 0 2px 10px rgba(0,0,0,0.75);
}

/* a inclinacao e a flutuacao vivem na imagem, nunca na legenda */
@keyframes mantaFloat {
  from { transform: translateY(-16px) rotate(-9.5deg) scale(1.01); }
  to   { transform: translateY(16px) rotate(-6deg) scale(0.99); }
}

/* leituras dos dois lados */
.manta-read {
  position: relative;
  z-index: 2;
  padding: 0 clamp(20px, 3.5vw, 52px);
  color: #fff;
  text-shadow: 0 2px 14px rgba(0,0,0,0.5);
}

.manta-cold .manta-read { color: #EAF4FB; text-shadow: 0 2px 16px rgba(4, 18, 30, 0.75); text-align: right; }

.manta-read-label {
  display: block;
  font-family: var(--font-mono);
  font-size: 0.68rem;
  font-weight: 500;
  letter-spacing: 0.2em;
  text-transform: uppercase;
  opacity: 0.82;
  margin-bottom: 10px;
}

.manta-read-temp {
  display: block;
  font-family: var(--font-display);
  font-weight: var(--display-weight);
  font-size: clamp(2.6rem, 5.4vw, 4.4rem);
  line-height: 1;
  letter-spacing: -0.02em;
  white-space: nowrap;
}

.manta-read-note {
  display: block;
  margin-top: 12px;
  max-width: 24ch;
  font-size: 0.82rem;
  line-height: 1.5;
  opacity: 0.85;
}

.manta-cold .manta-read-note { margin-left: auto; }

.manta-legend {
  max-width: 46ch;
  margin: 30px auto 0;
  padding: 0 24px;
  text-align: center;
  font-family: var(--font-display);
  font-size: clamp(1.05rem, 2.2vw, 1.4rem);
  line-height: 1.45;
  color: #E8E4DA;
}

/* ---------- Manta: bloco de dados ---------- */
.manta-dados-head { max-width: 62ch; margin-bottom: 44px; }
.manta-dados-head h2 { font-size: clamp(1.7rem, 3.6vw, 2.5rem); margin: 12px 0 16px; }
.manta-dados-head p { color: var(--gray); font-size: 1.02rem; line-height: 1.65; }

.manta-stats {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 1px;
  background: var(--border);
  border: 1px solid var(--border);
  border-radius: 4px;
  overflow: hidden;
  margin-bottom: 52px;
}

.manta-stat {
  position: relative;
  background: var(--white);
  padding: 34px 26px 30px;
  overflow: hidden;
}

/* uma barra de cor no topo diz de que lado da manta aquele numero vive */
.manta-stat::before {
  content: "";
  position: absolute;
  left: 0; right: 0; top: 0;
  height: 3px;
}

.manta-stat-quente::before { background: linear-gradient(90deg, #C7331F, #E2683F); }
.manta-stat-frio::before   { background: linear-gradient(90deg, #2C5C86, #6FB6DE); }

.manta-stat-lado {
  display: block;
  font-family: var(--font-mono);
  font-size: 0.64rem;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  margin-bottom: 14px;
}

.manta-stat-quente .manta-stat-lado { color: #B93524; }
.manta-stat-frio .manta-stat-lado   { color: #2C5C86; }

.manta-stat-quente b { color: #A32A1A; }
.manta-stat-frio b   { color: #1F4E74; }

.manta-stat-txt { display: block; font-size: 0.92rem; line-height: 1.55; color: var(--gray); max-width: 28ch; }

.manta-stat b {
  display: block;
  font-family: var(--font-display);
  font-weight: var(--display-weight);
  font-size: clamp(2rem, 4vw, 2.9rem);
  line-height: 1;
  color: var(--navy);
  margin-bottom: 12px;
}

.manta-stat span { display: block; font-size: 0.92rem; line-height: 1.55; color: var(--gray); max-width: 26ch; }

.manta-como { border-top: 1px solid var(--border); padding-top: 40px; }
.manta-como h3 { font-size: clamp(1.25rem, 2.4vw, 1.6rem); margin-bottom: 22px; }

.manta-passos { list-style: none; counter-reset: passo; display: grid; gap: 18px; max-width: 74ch; }

.manta-passos li {
  counter-increment: passo;
  position: relative;
  padding-left: 46px;
  font-size: 0.96rem;
  line-height: 1.6;
  color: var(--gray);
}

.manta-passos li::before {
  content: counter(passo);
  position: absolute;
  left: 0; top: -1px;
  width: 30px; height: 30px;
  display: flex; align-items: center; justify-content: center;
  border: 1px solid var(--border);
  border-radius: 3px;
  font-family: var(--font-mono);
  font-size: 0.8rem;
  color: var(--navy);
  background: var(--off-white);
}

.manta-passos li b { color: var(--navy); font-weight: 700; }

.manta-obs { margin-top: 24px; font-size: 0.9rem; color: var(--gray); max-width: 70ch; }

@media (max-width: 860px) {
  /* no celular o duelo vira vertical: telhado em cima, casa embaixo */
  .manta-stage { grid-template-columns: 1fr; grid-template-rows: 1fr 1fr; min-height: min(86vh, 680px); }
  .manta-hot { background: radial-gradient(120% 110% at 50% 0%, #FF7A3C 0%, #E23B22 38%, #8E1A14 74%, #490D0C 100%); align-items: flex-start; padding-top: 34px; }
  .manta-cold { background: radial-gradient(120% 110% at 50% 100%, #DCF1FF 0%, #6FB6DE 34%, #21618E 72%, #0D2C44 100%); align-items: flex-end; padding-bottom: 34px; }
  .manta-read, .manta-cold .manta-read { text-align: center; max-width: none; margin: 0 auto; }
  .manta-seam { top: 50%; left: 0; right: 0; bottom: auto; width: auto; height: 3px; transform: translateY(-50%);
                background: linear-gradient(90deg, rgba(255,255,255,0) 0%, rgba(255,238,205,0.9) 20%, rgba(255,255,255,0.95) 50%, rgba(205,235,255,0.9) 80%, rgba(255,255,255,0) 100%); }
  .manta-float { width: min(64vw, 300px); }
  .manta-heat span { width: 70%; right: auto; left: 15%; }
  @keyframes mantaHeat {
    0%   { transform: translateY(-50%) scaleY(0.7); opacity: 0; }
    35%  { opacity: 0.85; }
    70%  { transform: translateY(6%) scaleY(1.1); opacity: 0.5; }
    100% { transform: translateY(16%) scaleY(1.2); opacity: 0; }
  }
  .manta-stats { grid-template-columns: 1fr; }
}

@media (prefers-reduced-motion: reduce) {
  .manta-float-img, .manta-seam, .manta-heat span { animation: none; }
  .manta-float-img { transform: rotate(-7.5deg); }
  .manta-heat span { opacity: 0.45; transform: none; }
}


/* ---------- Fade entre as secoes ---------- */
:root {
  --ease-saida: cubic-bezier(0.22, 0.61, 0.36, 1);
}

.rv {
  opacity: 0;
  transform: translateY(26px);
  transition: opacity 0.85s var(--ease-saida), transform 0.85s var(--ease-saida);
}

.rv.in {
  opacity: 1;
  transform: none;
}

.rv .rv-i {
  opacity: 0;
  transform: translateY(18px);
  transition: opacity 0.7s var(--ease-saida) var(--rv-d, 0ms),
              transform 0.7s var(--ease-saida) var(--rv-d, 0ms);
}

.rv.in .rv-i {
  opacity: 1;
  transform: none;
}

/* depois da entrada, o escalonamento se aposenta para o hover nao atrasar */
.rv.in .rv-i { transition-delay: var(--rv-d, 0ms), var(--rv-d, 0ms); }
.rv.in:hover .rv-i,
.rv.in .rv-i:hover { transition-delay: 0s, 0s; }

/* a costura entre uma secao e a seguinte: as bordas se dissolvem
   em vez de bater uma na outra */
.section-off,
.site-footer,
.pf-dark {
  position: relative;
}

.section-off::before,
.site-footer::before {
  content: "";
  position: absolute;
  left: 0;
  right: 0;
  top: 0;
  height: 90px;
  pointer-events: none;
  z-index: 1;
}

.section-off::before {
  background: linear-gradient(180deg, var(--white) 0%, rgba(255, 255, 255, 0) 100%);
}

.site-footer::before {
  background: linear-gradient(180deg, rgba(255, 255, 255, 0.06) 0%, rgba(255, 255, 255, 0) 100%);
}

@media (prefers-reduced-motion: reduce) {
  .rv, .rv .rv-i {
    opacity: 1 !important;
    transform: none !important;
    transition: none !important;
    transition-delay: 0s !important;
  }
}


/* ---------- Divisorias: a bagunca que se organiza ---------- */
#organiza { --org: 0; }

.org-abertura { max-width: 62ch; margin-bottom: 46px; }

.org-titulo {
  position: relative;
  display: block;
  font-size: clamp(1.6rem, 3.4vw, 2.4rem);
  margin: 12px 0 14px;
  min-height: 2.2em;
}

.org-titulo span {
  display: block;
  transition: opacity 0.5s ease, transform 0.5s ease;
}

.org-antes {
  opacity: calc(1 - var(--org) * 2.4);
  transform: translateY(calc(-8px * var(--org)));
}

.org-depois {
  position: absolute;
  inset: 0;
  opacity: calc((var(--org) - 0.3) * 2.6);
  transform: translateY(calc(10px * (1 - var(--org))));
}

.org-lede { color: var(--gray); opacity: calc(1 - var(--org) * 1.6); }

/* o trilho e a lamina: a propria divisoria descendo pela tela */
.org-trilho {
  position: relative;
  height: 2px;
  margin-top: 30px;
  background: var(--border);
  overflow: hidden;
}

.org-lamina {
  position: absolute;
  inset: 0;
  transform-origin: left center;
  transform: scaleX(var(--org));
  background: linear-gradient(90deg, var(--navy) 0%, var(--yellow) 100%);
}

/* os cartoes: tortos no comeco, retos no fim */
.org-card {
  --k: clamp(0, (var(--org) - var(--ordem, 0) * 0.34) * 1.7, 1);
  transform:
    translate(calc(var(--dx, 0%) * (1 - var(--k))), calc(var(--dy, 0%) * (1 - var(--k))))
    rotate(calc(var(--rot, 0deg) * (1 - var(--k))))
    scale(calc(var(--esc, 1) + (1 - var(--esc, 1)) * var(--k)));
  opacity: calc(0.42 + 0.58 * var(--k));
  transition: box-shadow 0.3s ease;
  will-change: transform;
}

/* enquanto esta torto o cartao nao levanta no hover, so depois de assentado */
.org-pronto .org-card:hover { transform:
    translate(calc(var(--dx, 0%) * (1 - var(--k))), calc(var(--dy, 0%) * (1 - var(--k))))
    rotate(calc(var(--rot, 0deg) * (1 - var(--k))))
    scale(calc(var(--esc, 1) + (1 - var(--esc, 1)) * var(--k)));
}

/* a grade precisa de folga para os cartoes tortos nao serem cortados */
#organiza .product-grid { overflow: visible; padding: 10px 0; }
#organiza .container { overflow: visible; }

@media (prefers-reduced-motion: reduce) {
  #organiza { --org: 1; }
  .org-card { transform: none; opacity: 1; }
  .org-titulo span { transition: none; }
}


/* ---------- Cabecalho que se recolhe na manta ---------- */
.site-header,
.coupon-strip.cupom-recolhivel {
  transition: transform 0.55s var(--ease-saida, cubic-bezier(0.22, 0.61, 0.36, 1)),
              opacity 0.4s ease;
}

body.cena-page .coupon-strip {
  position: fixed;
  top: 0; left: 0; right: 0;
  z-index: 130;
}

body.cena-page .site-header {
  position: fixed;
  top: var(--cupom-h, 38px);
  left: 0; right: 0;
  z-index: 120;
}

body.header-recolhido .site-header {
  transform: translateY(calc(-100% - var(--cupom-h, 38px)));
  opacity: 0;
  pointer-events: none;
}

body.header-recolhido .coupon-strip.cupom-recolhivel {
  transform: translateY(-100%);
  opacity: 0;
  pointer-events: none;
}

/* o botao de menu do celular acompanha, senao fica flutuando sozinho */
body.header-recolhido .nav-toggle { pointer-events: none; }

/* uma faixa invisivel no topo: passou o mouse ali, o cabecalho volta,
   nao importa onde o scroll esteja */
.header-chamada {
  position: fixed;
  top: 0; left: 0; right: 0;
  height: 92px;
  z-index: 115;
  pointer-events: auto;
}

body:not(.cena-page) .header-chamada { display: none; }

body.header-recolhido.header-chamado .site-header,
body.header-recolhido.header-chamado .coupon-strip.cupom-recolhivel {
  transform: none;
  opacity: 1;
  pointer-events: auto;
}



/* ---------- A fita selando a emenda, em tela cheia ---------- */
.fita-cena {
  position: relative;
  height: 320vh;
  background: #0B0D10;
}

.fita-stage {
  --fita: 0;
  position: sticky;
  top: 0;
  height: 100vh;
  overflow: hidden;
  display: flex;
  align-items: center;
  justify-content: center;
}

.fita-foto {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: 46.3% center;
  transform: scale(calc(1.06 - 0.06 * var(--fita)));
  will-change: transform;
}

.fita-escurece {
  position: absolute;
  inset: 0;
  background:
    linear-gradient(270deg, rgba(8, 12, 18, 0.62) 0%, rgba(8, 12, 18, 0.1) 54%, rgba(8, 12, 18, 0.5) 100%),
    linear-gradient(180deg, rgba(8, 12, 18, 0.5) 0%, rgba(8, 12, 18, 0.06) 36%, rgba(8, 12, 18, 0.62) 100%);
}

/* a coluna onde a fita corre, em cima da emenda das duas mantas */
.fita-linha {
  position: absolute;
  top: 0;
  bottom: 0;
  left: 46.3%;
  width: clamp(56px, 7vw, 100px);
  transform: translateX(-50%);
  z-index: 2;
  pointer-events: none;
}

/* a fita ja assentada, crescendo de cima para baixo */
.fita-faixa {
  position: absolute;
  inset: 0;
  clip-path: inset(0 0 calc((1 - var(--fita)) * 100%) 0);
  background-image: url('../img/novas/fita-colada.png');
  background-size: 100% 720px;
  background-repeat: repeat-y;
  background-position: center top;
  filter: brightness(1.16) contrast(1.02) drop-shadow(0 8px 22px rgba(10, 16, 24, 0.55));
}

/* a beirada da fita, que faz ela parecer colada e nao pintada */
.fita-faixa::after {
  content: "";
  position: absolute;
  inset: 0;
  clip-path: inherit;
  background:
    linear-gradient(90deg,
      rgba(40,46,56,0.5) 0%, rgba(40,46,56,0) 8%,
      rgba(40,46,56,0) 92%, rgba(40,46,56,0.5) 100%);
}

/* a ponta virando, como uma página sendo virada.
   E o pedaço que ainda nao encostou na manta. */
.fita-curl {
  position: absolute;
  left: 2%;
  right: 2%;
  top: calc(var(--fita) * 100%);
  height: clamp(26px, 3.4vw, 44px);
  transform-origin: top center;
  transform: perspective(420px) rotateX(-52deg) translateY(-4px);
  background:
    linear-gradient(180deg,
      rgba(246,249,252,0.55) 0%,
      rgba(206,214,224,0.34) 46%,
      rgba(132,142,156,0.16) 80%,
      rgba(80,88,100,0) 100%);
  border-radius: 0 0 46% 46%;
  box-shadow: 0 10px 22px rgba(8, 14, 22, 0.4);
  opacity: calc(min(1, var(--fita) * 9) * (1 - max(0, (var(--fita) - 0.93) * 14)));
}

/* o rolo, na frente da ponta */
.fita-rolo {
  position: absolute;
  left: 50%;
  top: calc(var(--fita) * 100%);
  width: clamp(110px, 15vw, 200px);
  aspect-ratio: 0.837;
  transform: translate(-50%, -30%);
  background-image: url('../img/novas/fita-rolo.png?v=2');
  background-size: contain;
  background-position: center center;
  background-repeat: no-repeat;
  filter: drop-shadow(0 16px 30px rgba(8, 14, 22, 0.62));
  opacity: calc(min(1, var(--fita) * 7) * (1 - max(0, (var(--fita) - 0.94) * 16)));
}

/* o texto da cena */
.fita-txt {
  position: absolute;
  z-index: 3;
  right: clamp(24px, 6vw, 88px);
  top: 50%;
  transform: translateY(-50%);
  width: min(42ch, 42%);
  text-align: left;
  color: #F1F4F8;
}

/* escurece so atras do texto, deixando a pista da fita limpa */
.fita-txt::before {
  content: "";
  position: absolute;
  left: -12%;
  top: -18%;
  width: 128%;
  height: 136%;
  z-index: -1;
  pointer-events: none;
  background: radial-gradient(ellipse 54% 50% at 55% 50%,
              rgba(6, 10, 16, 0.9) 0%,
              rgba(6, 10, 16, 0.76) 44%,
              rgba(6, 10, 16, 0.3) 70%,
              rgba(6, 10, 16, 0) 84%);
}

.fita-txt .eyebrow { color: #9FD0F0; }

.fita-txt h2 {
  position: relative;
  display: block;
  min-height: 2.3em;
  font-size: clamp(1.7rem, 4.4vw, 3.1rem);
  line-height: 1.1;
  margin: 14px 0 18px;
  text-shadow: 0 2px 26px rgba(4, 10, 18, 0.9);
}

.fita-txt h2 span {
  display: block;
  transition: opacity 0.45s ease, transform 0.45s ease;
}

.fita-t1 { opacity: calc(1 - var(--fita) * 2.6); }

.fita-t2 {
  position: absolute;
  inset: 0;
  opacity: calc((var(--fita) - 0.42) * 2.4);
  transform: translateY(calc(10px * (1 - var(--fita))));
}

.fita-txt p {
  max-width: 44ch;
  margin: 0;
  color: #C3CBD6;
  font-size: clamp(0.95rem, 1.5vw, 1.05rem);
  line-height: 1.7;
  text-shadow: 0 1px 16px rgba(4, 10, 18, 0.9);
}

@media (max-width: 720px) {
  .fita-cena { height: 280vh; }
  .fita-linha { left: 46.3%; width: clamp(38px, 12vw, 62px); }
  .fita-txt {
    right: 22px;
    width: calc(100% - 44px);
    max-width: none;
  }
  .fita-txt p { max-width: none; }
}

@media (prefers-reduced-motion: reduce) {
  .fita-cena { height: 100vh; }
  .fita-stage { --fita: 1; }
  .fita-rolo, .fita-curl { opacity: 0; }
  .fita-txt h2 span { transition: none; }
}
/* ---------- O rodape dentro do rodape ---------- */
.site-footer { padding-bottom: 0; overflow: hidden; }

.rodape-remate {
  display: flex;
  align-items: flex-end;
  justify-content: space-between;
  gap: 32px;
  flex-wrap: wrap;
  padding: 44px 0 40px;
  border-top: 1px solid rgba(255, 255, 255, 0.09);
  margin-top: 30px;
}

.rodape-remate-txt { max-width: 30ch; }

.rodape-remate-txt span {
  display: block;
  font-family: var(--font-display);
  font-weight: var(--display-weight);
  letter-spacing: var(--display-tracking);
  font-size: clamp(1.25rem, 2.3vw, 1.75rem);
  line-height: 1.14;
  color: var(--white);
  margin-bottom: 9px;
}

.rodape-remate-txt em {
  display: block;
  font-style: normal;
  font-size: 0.9rem;
  line-height: 1.6;
  color: #A9B2C6;
  max-width: 32ch;
}

.rodape-remate-link {
  flex-shrink: 0;
  display: inline-flex;
  align-items: center;
  padding: 13px 22px;
  border: 1.5px solid var(--yellow);
  border-radius: 3px;
  font-family: var(--font-mono);
  font-weight: 700;
  font-size: 0.72rem;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--yellow);
  transition: background-color 0.2s ease, color 0.2s ease;
}

.site-footer .rodape-remate-link:hover,
.site-footer .rodape-remate-link:focus-visible {
  background: var(--yellow);
  border-color: var(--yellow);
  color: var(--navy);
}

/* a peca: o rodape de verdade encostado no chao do rodape azul.
   Sem bloco branco em cima: ele nasce direto do navy. */
.rodape-peca {
  height: clamp(64px, 7.5vw, 96px);
  background-image: url('../img/novas/rodape-grego.png');
  background-repeat: repeat-x;
  background-position: center bottom;
  background-size: auto 100%;
  transform: translateY(101%);
  transition: transform 1.05s var(--ease-saida, cubic-bezier(0.22, 0.61, 0.36, 1));
}

.site-footer.in .rodape-peca { transform: translateY(0); }

/* a junta entre o navy e o rodape branco, para o branco nao bater seco */
.rodape-peca::before {
  content: "";
  position: absolute;
  left: 0;
  right: 0;
  height: 26px;
  margin-top: -26px;
  background: linear-gradient(180deg, rgba(28, 35, 52, 0) 0%, rgba(28, 35, 52, 0.55) 100%);
  pointer-events: none;
}

.site-footer { position: relative; }

@media (max-width: 720px) {
  .rodape-remate { padding: 32px 0 30px; gap: 22px; }
  .rodape-peca { height: 54px; }
}

@media (prefers-reduced-motion: reduce) {
  .rodape-peca { transform: none; transition: none; }
}



/* ==========================================================================
   PAINEL RIPADO: do vazio ao ambiente
   A cena de tela cheia e a camada de interacao da luz.
   ========================================================================== */

/* ---------- a ripa, peca comum das duas cenas ---------- */
.ripa {
  position: absolute;
  top: 0;
  bottom: 0;
  left: var(--esq);
  width: var(--larg);
  background-image: var(--tex, url('../img/texturas/ripa-elegance-freijo.jpg?t=2'));
  background-size: 100% auto;
  background-repeat: repeat-y;
  background-position: center top;
  border-radius: 1px 1px 0 0;
  transform-origin: 50% 50%;
}

/* o relevo: a ripa e uma meia-cana, tem canto vivo de um lado e
   recolhe a sombra do outro. Isto fica parado, e a luz que anda. */
.ripa::before {
  content: "";
  position: absolute;
  inset: 0;
  border-radius: inherit;
  background: linear-gradient(
    90deg,
    rgba(255, 248, 232, 0.34) 0%,
    rgba(255, 248, 232, 0.1) 13%,
    rgba(0, 0, 0, 0) 42%,
    rgba(0, 0, 0, 0.34) 82%,
    rgba(0, 0, 0, 0.58) 100%
  );
}

/* ---------- 1. a cena ---------- */
.ripa-cena {
  position: relative;
  height: 360vh;
  background: #DCD6CC;
}

.ripa-stage {
  --ripa: 0;
  /* os tres tempos da cena, calculados uma vez e reusados abaixo */
  --entrada: clamp(0, calc((var(--ripa) - 0.30) / 0.38), 1);
  --fim: clamp(0, calc((var(--ripa) - 0.64) / 0.16), 1);
  --cam: clamp(0, calc((var(--ripa) - 0.68) / 0.26), 1);

  position: sticky;
  top: 0;
  height: 100vh;
  overflow: hidden;
  background: #DCD6CC;
}

/* a camera: no fim, um passo lateral pequeno que abre o ambiente */
.ripa-camera {
  position: absolute;
  inset: 0;
  transform: translate3d(calc(-2.6% * var(--cam)), 0, 0)
             scale(calc(1 + 0.055 * var(--cam)));
  will-change: transform;
}

/* a parede: reboco claro, com a luz da janela caindo de cima e da esquerda */
.ripa-parede {
  position: absolute;
  inset: 0 0 25% 0;
  background:
    radial-gradient(115% 88% at 26% 2%, rgba(255, 252, 244, 0.95) 0%, rgba(255, 252, 244, 0) 62%),
    radial-gradient(80% 70% at 88% 96%, rgba(56, 46, 36, 0.2) 0%, rgba(56, 46, 36, 0) 70%),
    linear-gradient(178deg, #EDE8DF 0%, #DFD8CC 58%, #D2CABC 100%);
}

/* o chao e o rodape: o produto deles fechando a propria cena */
.ripa-rodape {
  position: absolute;
  left: 0;
  right: 0;
  bottom: 25%;
  height: clamp(14px, 2.1vh, 22px);
  background: linear-gradient(180deg, #FBF8F2 0%, #EFEAE0 62%, #D9D2C6 100%);
  box-shadow: 0 3px 7px rgba(52, 42, 32, 0.16);
}

.ripa-chao {
  position: absolute;
  inset: auto 0 0 0;
  height: 25%;
  background:
    linear-gradient(180deg, rgba(255, 255, 255, 0.1) 0%, rgba(255, 255, 255, 0) 26%),
    linear-gradient(178deg, #6B563F 0%, #513F2C 46%, #38291A 100%);
}

/* a luz quente que sobe quando o painel fecha: o ambiente ganha vida */
.ripa-clima {
  position: absolute;
  inset: 0;
  background:
    radial-gradient(72% 58% at 50% 46%, rgba(255, 196, 14, 0.16) 0%, rgba(255, 196, 14, 0) 68%),
    radial-gradient(120% 70% at 50% 108%, rgba(126, 78, 22, 0.34) 0%, rgba(126, 78, 22, 0) 62%);
  opacity: var(--fim);
}

/* ---------- o painel ---------- */
.ripa-painel {
  position: absolute;
  left: 50%;
  top: 42%;
  transform: translate(-50%, -50%);
  width: min(76vw, 900px);
  height: min(45vh, 392px);
  background: transparent;
  box-shadow:
    0 calc(26px * var(--fim)) calc(52px * var(--fim)) rgba(44, 33, 20, calc(0.3 * var(--fim))),
    0 calc(6px * var(--fim)) calc(12px * var(--fim)) rgba(44, 33, 20, calc(0.2 * var(--fim)));
}

/* a base do painel abrindo do centro para as pontas, acompanhando o
   encaixe das ripas. Fica escura desde o primeiro pixel: cinza de meio
   caminho parece cartao, e nao base de painel. */
.ripa-painel::before {
  content: "";
  position: absolute;
  inset: 0;
  background: linear-gradient(180deg, #2C2016 0%, #150E09 100%);
  transform: scaleX(var(--entrada));
  transform-origin: 50% 50%;
  /* alem de abrir, ela ganha corpo: preto cheio no primeiro quadro
     bate duro entre ripas que ainda estao no ar */
  opacity: calc(0.24 + 0.76 * var(--entrada));
}

.ripa-painel .ripa {
  /* cada ripa tem o seu proprio percurso, escalonado pela ordem de encaixe */
  --p: clamp(0, calc((var(--ripa) - var(--atraso) * 0.24) / 0.40), 1);
  transform:
    translate3d(calc(var(--dx) * (1 - var(--p))), calc(var(--dy) * (1 - var(--p))), 0)
    rotate(calc(var(--rot) * (1 - var(--p))))
    scale(calc(1 + (var(--esc) - 1) * (1 - var(--p))));
  opacity: calc(0.58 + 0.42 * var(--p));
  will-change: transform, opacity;
}

/* enquanto flutuam, as ripas nao tem canto vivo de painel montado */
.ripa-painel .ripa::before { opacity: var(--p); }

/* ---------- o texto da cena ---------- */
.ripa-txt {
  position: absolute;
  inset: 0;
  pointer-events: none;
}

/* a cortina que sobe do chao junto com o fecho: e ela que segura o
   contraste do texto branco, medido e nao chutado */
.ripa-cortina {
  position: absolute;
  left: 0;
  right: 0;
  bottom: 0;
  height: 34%;
  background: linear-gradient(180deg,
    rgba(18, 12, 7, 0) 0%,
    rgba(18, 12, 7, 0.14) 52%,
    rgba(18, 12, 7, 0.9) 100%);
  opacity: var(--fim);
}

/* a bruma atras da manchete: garante o contraste enquanto as ripas
   ainda estao flutuando por cima da parede */
.ripa-bruma {
  position: absolute;
  left: 50%;
  top: 42%;
  width: min(150vw, 1180px);
  height: min(64vh, 520px);
  transform: translate(-50%, -50%);
  background: radial-gradient(closest-side, rgba(247, 244, 237, 0.97) 0%, rgba(247, 244, 237, 0.72) 46%, rgba(247, 244, 237, 0) 100%);
  opacity: calc(1 - var(--ripa) * 3.1);
}

.ripa-t1 {
  position: absolute;
  left: 50%;
  top: 42%;
  width: min(90vw, 17ch);
  transform: translate(-50%, calc(-50% - 26px * var(--ripa)));
  text-align: center;
  font-family: var(--font-display);
  font-weight: var(--display-weight);
  letter-spacing: var(--display-tracking);
  line-height: 1.05;
  font-size: clamp(2rem, 6vw, 4.4rem);
  color: #2A2118;
  opacity: calc(1 - var(--ripa) * 3.1);
}

.ripa-t2 {
  position: absolute;
  left: 50%;
  bottom: clamp(16px, 3.4vh, 38px);
  transform: translate(-50%, calc(22px * (1 - var(--fim))));
  width: min(92vw, 640px);
  opacity: var(--fim);
}

.ripa-t2 { text-align: center; }

.ripa-t2 h2 {
  font-size: clamp(1.35rem, 3vw, 2.15rem);
  color: #FFFFFF;
  text-shadow: 0 2px 20px rgba(26, 18, 10, 0.85), 0 1px 3px rgba(26, 18, 10, 0.7);
  margin-bottom: 12px;
}

.ripa-t2 p {
  font-size: clamp(0.92rem, 1.5vw, 1.02rem);
  line-height: 1.65;
  color: #F2ECE1;
  text-shadow: 0 1px 14px rgba(26, 18, 10, 0.95), 0 1px 3px rgba(26, 18, 10, 0.85);
  max-width: 58ch;
  margin: 0 auto;
}

/* o convite a rolar, que sai de cena assim que a pessoa rola */
.ripa-dica {
  position: absolute;
  left: 50%;
  bottom: clamp(18px, 3.4vh, 34px);
  transform: translateX(-50%);
  display: flex;
  align-items: center;
  gap: 9px;
  font-family: var(--font-mono);
  font-size: 0.68rem;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: #E4DACA;
  text-shadow: 0 1px 8px rgba(24, 16, 10, 0.9);
  opacity: calc(1 - var(--ripa) * 7);
  pointer-events: none;
}

.ripa-dica span {
  width: 1px;
  height: 26px;
  background: linear-gradient(180deg, #E4DACA 0%, rgba(228, 218, 202, 0) 100%);
  animation: ripa-desce 1.9s var(--ease-saida) infinite;
}

@keyframes ripa-desce {
  0%, 100% { transform: scaleY(0.4); transform-origin: top; opacity: 0.35; }
  50%      { transform: scaleY(1);   transform-origin: top; opacity: 1; }
}

/* ---------- 2. a luz que o visitante arrasta ---------- */
.ripa-luzes {
  background: #14171E;
  color: #FFFFFF;
  padding: clamp(56px, 8vw, 96px) 0 clamp(48px, 7vw, 84px);
}

.luz-cabeca {
  text-align: center;
  max-width: 52ch;
  margin: 0 auto clamp(28px, 4vw, 44px);
}

.luz-cabeca h2 {
  font-size: clamp(1.6rem, 3.6vw, 2.5rem);
  color: #FFFFFF;
  margin-bottom: 12px;
}

.luz-cabeca p {
  color: #C6CDD9;
  font-size: clamp(0.94rem, 1.5vw, 1.05rem);
  line-height: 1.65;
}

/* a parede do laboratorio de luz */
.luz-parede {
  --luzx: 0.5;
  position: relative;
  border-radius: var(--radius);
  overflow: hidden;
  --pad-y: clamp(30px, 5vw, 62px);
  --pad-x: clamp(22px, 4vw, 54px);
  padding: var(--pad-y) var(--pad-x);
  background:
    radial-gradient(90% 80% at calc(var(--luzx) * 100%) 8%, rgba(255, 244, 222, 0.5) 0%, rgba(255, 244, 222, 0) 64%),
    linear-gradient(178deg, #333B49 0%, #232A36 62%, #1A202A 100%);
  touch-action: pan-y;
  cursor: ew-resize;
  user-select: none;
}

.luz-parede.arrastando { cursor: grabbing; }

.luz-painel {
  position: relative;
  height: clamp(190px, 34vw, 330px);
  background: #16110C;
  box-shadow: 0 24px 48px rgba(0, 0, 0, 0.46);
}

/* as duas sombras de direcao. A da esquerda aparece quando a luz esta a
   direita da ripa, e vice-versa: e o cruzamento delas que faz o relevo
   virar de lado quando o visitante arrasta. */
.luz-painel .ripa::after {
  content: "";
  position: absolute;
  inset: 0;
  background: linear-gradient(
    90deg,
    rgba(0, 0, 0, 0.58) 0%,
    rgba(0, 0, 0, 0.34) 18%,
    rgba(0, 0, 0, 0) 58%,
    rgba(255, 248, 232, 0.1) 87%,
    rgba(255, 248, 232, 0.34) 100%
  );
  opacity: clamp(0, calc((var(--luzx) - var(--cx)) * 2.4), 1);
}

.luz-painel .ripa::before {
  opacity: clamp(0.14, calc((var(--cx) - var(--luzx)) * 2.4), 1);
}

/* o facho: onde a luz bate a madeira acende, e longe dela escurece.
   Mora fora do painel de proposito: o painel e reconstruido por JS
   quando o visitante troca a cor, e levaria as camadas junto. */
.luz-facho {
  position: absolute;
  top: var(--pad-y);
  bottom: var(--pad-y);
  left: var(--pad-x);
  right: var(--pad-x);
  pointer-events: none;
  background: radial-gradient(
    76% 165% at calc(var(--luzx) * 100%) 2%,
    #FFFFFF 0%,
    #EFE9DE 28%,
    #BDB5A6 60%,
    #948C7D 84%,
    #7C7466 100%
  );
  mix-blend-mode: multiply;
}

/* e a brasa quente logo abaixo do sol, que a multiplicacao sozinha nao da */
.luz-brilho {
  position: absolute;
  top: var(--pad-y);
  bottom: var(--pad-y);
  left: var(--pad-x);
  right: var(--pad-x);
  pointer-events: none;
  background: radial-gradient(
    34% 90% at calc(var(--luzx) * 100%) 0%,
    rgba(255, 216, 150, 0.44) 0%,
    rgba(255, 198, 116, 0.14) 44%,
    rgba(255, 190, 100, 0) 72%
  );
  mix-blend-mode: screen;
}

/* o sol: a marca de onde a luz esta, para o gesto ter um alvo visivel */
.luz-sol {
  position: absolute;
  top: clamp(10px, 1.8vw, 20px);
  left: calc(var(--luzx) * 100%);
  transform: translateX(-50%);
  width: clamp(26px, 3.4vw, 38px);
  height: clamp(26px, 3.4vw, 38px);
  border-radius: 50%;
  background: radial-gradient(circle, #FFF6DC 0%, #FFC40E 46%, rgba(255, 196, 14, 0) 72%);
  pointer-events: none;
}

.luz-controle {
  display: flex;
  align-items: center;
  gap: clamp(14px, 2.4vw, 26px);
  margin-top: clamp(20px, 3vw, 30px);
  flex-wrap: wrap;
}

.luz-faixa {
  flex: 1 1 240px;
  appearance: none;
  height: 4px;
  border-radius: 2px;
  background: linear-gradient(90deg, #5C6577 0%, #FFC40E 50%, #C4772A 100%);
  cursor: ew-resize;
}

.luz-faixa::-webkit-slider-thumb {
  appearance: none;
  width: 22px;
  height: 22px;
  border-radius: 50%;
  background: #FFFFFF;
  border: 3px solid var(--yellow);
  cursor: grab;
}

.luz-faixa::-moz-range-thumb {
  width: 22px;
  height: 22px;
  border-radius: 50%;
  background: #FFFFFF;
  border: 3px solid var(--yellow);
  cursor: grab;
}

.luz-faixa:focus-visible { outline: 2px solid var(--yellow); outline-offset: 6px; }

.luz-leitura {
  flex: 0 1 auto;
  font-family: var(--font-mono);
  font-size: 0.74rem;
  letter-spacing: 0.05em;
  color: #FFD86B;
  min-width: 30ch;
}

/* as cores que existem em textura de verdade no acervo */
.luz-cores {
  display: flex;
  align-items: center;
  gap: 10px;
  flex-wrap: wrap;
  margin-top: clamp(22px, 3.4vw, 34px);
}

.luz-cores > b {
  font-family: var(--font-mono);
  font-size: 0.68rem;
  letter-spacing: 0.11em;
  text-transform: uppercase;
  color: #8C96A8;
  margin-right: 4px;
}

.luz-cor {
  width: 42px;
  height: 42px;
  border-radius: 50%;
  border: 2px solid rgba(255, 255, 255, 0.22);
  background-size: 260% auto;
  background-position: center;
  cursor: pointer;
  padding: 0;
  transition: transform 0.2s var(--ease-saida), border-color 0.2s ease;
}

.luz-cor:hover { transform: scale(1.09); }
.luz-cor[aria-pressed="true"] { border-color: var(--yellow); transform: scale(1.09); }
.luz-cor:focus-visible { outline: 2px solid var(--yellow); outline-offset: 3px; }

.luz-rodape {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 20px;
  flex-wrap: wrap;
  margin-top: clamp(20px, 3vw, 28px);
}

.luz-nome {
  font-family: var(--font-display);
  font-weight: var(--display-weight);
  letter-spacing: var(--display-tracking);
  font-size: clamp(1.05rem, 2vw, 1.35rem);
  color: #FFFFFF;
}

.luz-link {
  display: inline-flex;
  align-items: center;
  padding: 13px 22px;
  border: 1.5px solid var(--yellow);
  border-radius: 3px;
  font-family: var(--font-mono);
  font-weight: 700;
  font-size: 0.72rem;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--yellow);
  transition: background-color 0.2s ease, color 0.2s ease;
}

.luz-link:hover, .luz-link:focus-visible { background: var(--yellow); color: #14171E; }

@media (max-width: 720px) {
  .ripa-cena { height: 300vh; }
  /* na tela estreita o chao cresce: e nele que o fecho mora inteiro,
     nunca em cima da madeira nem em cima do rodape claro */
  .ripa-painel { width: 86vw; height: min(34vh, 250px); top: 34%; }
  .ripa-bruma, .ripa-t1 { top: 34%; }
  .ripa-parede { inset: 0 0 36% 0; }
  .ripa-rodape { bottom: 36%; }
  .ripa-chao { height: 36%; }
  /* o botao flutuante do WhatsApp mora no canto de baixo a direita:
     o fecho sobe para nao ficar com a ultima linha escondida atras dele */
  .ripa-t2 { bottom: clamp(96px, 13vh, 124px); padding: 0 16px; }
  .ripa-t2 h2 { font-size: 1.28rem; margin-bottom: 9px; }
  .ripa-t2 p { font-size: 0.88rem; line-height: 1.55; }
  .ripa-cortina { height: 48%; }
  .luz-leitura { min-width: 0; flex-basis: 100%; }
  .luz-cor { width: 36px; height: 36px; }
}

@media (prefers-reduced-motion: reduce) {
  .ripa-cena { height: 100vh; }
  .ripa-stage { --ripa: 1; }
  .ripa-dica { display: none; }
  .ripa-dica span { animation: none; }
  .luz-cor { transition: none; }
}

/* rotulo que so o leitor de tela ve */
.visually-hidden {
  position: absolute;
  width: 1px; height: 1px;
  margin: -1px; padding: 0;
  overflow: hidden;
  clip: rect(0 0 0 0);
  clip-path: inset(50%);
  white-space: nowrap;
  border: 0;
}

.luz-nota {
  margin-top: clamp(20px, 3vw, 28px);
  max-width: 62ch;
  font-size: 0.88rem;
  line-height: 1.65;
  color: #9AA3B4;
}

.grade-titulo {
  font-size: clamp(1.4rem, 3vw, 2.05rem);
  margin: 6px 0 clamp(24px, 3.6vw, 38px);
}


/* ==========================================================================
   FORRO DE PVC: o acabamento comeca la em cima
   A cena olhando para cima e a camada de interacao do clima.
   ========================================================================== */

/* as cores do clima registradas: e isso que deixa a troca correr suave
   mesmo em quem usa gradiente, onde transition de background-color nao pega.
   Navegador que nao entender @property so troca seco, sem quebrar nada. */
@property --cl-fundo   { syntax: "<color>"; inherits: true; initial-value: #F4F2ED; }
@property --cl-tinta   { syntax: "<color>"; inherits: true; initial-value: #26221C; }
@property --cl-suave   { syntax: "<color>"; inherits: true; initial-value: #6C6558; }
@property --cl-parede  { syntax: "<color>"; inherits: true; initial-value: #EDE9E1; }
@property --cl-chao    { syntax: "<color>"; inherits: true; initial-value: #C9C2B5; }
@property --cl-luz     { syntax: "<color>"; inherits: true; initial-value: rgba(255,253,246,0.9); }
@property --cl-borda   { syntax: "<color>"; inherits: true; initial-value: rgba(38,34,28,0.14); }
@property --cl-rodape  { syntax: "<color>"; inherits: true; initial-value: #FBF8F2; }

/* ---------- os quatro climas, que sao o vocabulario da pagina ----------
   O branco e o Duplo Frisado 10mm da Plasbil (ref 2020.1), o modelo que o
   Gustavo escolheu: a face do render oficial endireitada e o perfil de
   frisos tirado de ponta a ponta da largura, entao cada regua e a peca
   inteira, com o friso largo no meio. Os amadeirados vem de foto real. */
body {
  /* 15/10: o tom que abre a cena é o Frisado 5mm FCP, o mais vendido (pedido do Gustavo) */
  --cl-teto: url('../img/texturas/placa-branco-5mm.png?t=2');
  --cl-fundo: #F4F2ED;
  --cl-tinta: #26221C;
  --cl-suave: #6C6558;
  --cl-parede: #EDE9E1;
  --cl-chao: #C9C2B5;
  --cl-luz: rgba(255, 253, 246, 0.9);
  --cl-borda: rgba(38, 34, 28, 0.14);
  --cl-rodape: #FBF8F2;
  transition: --cl-fundo 0.85s var(--ease-saida), --cl-tinta 0.85s var(--ease-saida),
              --cl-suave 0.85s var(--ease-saida), --cl-parede 0.85s var(--ease-saida),
              --cl-chao 0.85s var(--ease-saida), --cl-luz 0.85s var(--ease-saida),
              --cl-borda 0.85s var(--ease-saida), --cl-rodape 0.85s var(--ease-saida);
}

/* os dois brancos que abrem a lista de tons (2026-10-15): Frisado 5mm FCP, o mais vendido,
   e o Branco Liso. A paleta é a mesma do branco; muda só a régua. */
body[data-clima="frisado5"] { --cl-teto: url('../img/texturas/placa-branco-5mm.png?t=2'); }
body[data-clima="liso"] { --cl-teto: url('../img/texturas/placa-branco-liso.png?t=1'); }

body[data-clima="carvalho"] {
  --cl-teto: url('../img/texturas/placa-carvalho.jpg?t=2');
  --cl-fundo: #F3EFE6;
  --cl-tinta: #2B2419;
  --cl-suave: #6F6452;
  --cl-parede: #EDE5D6;
  --cl-chao: #C4B79E;
  --cl-luz: rgba(255, 246, 223, 0.9);
  --cl-borda: rgba(43, 36, 25, 0.16);
  --cl-rodape: #F7F1E4;
}

body[data-clima="cerejeira"] {
  --cl-teto: url('../img/texturas/placa-cerejeira.jpg?t=2');
  --cl-fundo: #F2E9D9;
  --cl-tinta: #2E2314;
  --cl-suave: #75634A;
  --cl-parede: #E9DCC4;
  --cl-chao: #BFA983;
  --cl-luz: rgba(255, 235, 187, 0.92);
  --cl-borda: rgba(46, 35, 20, 0.18);
  --cl-rodape: #F6EEDC;
}

body[data-clima="jatoba"] {
  --cl-teto: url('../img/texturas/placa-jatoba.jpg?t=2');
  --cl-fundo: #201B18;
  --cl-tinta: #F6F1E9;
  --cl-suave: #B3A899;
  --cl-parede: #2E2621;
  --cl-chao: #17120F;
  --cl-luz: rgba(255, 224, 166, 0.72);
  --cl-borda: rgba(246, 241, 233, 0.2);
  --cl-rodape: #3A302A;
}

/* ---------- a regua, peca comum das duas cenas ---------- */
.placa {
  position: absolute;
  left: 0;
  right: 0;
  top: var(--topo);
  height: var(--alt);
  background-image: var(--cl-teto);
  background-size: auto 100%;
  background-repeat: repeat-x;
  background-position: var(--desloc, 50%) center;
}

/* a emenda. No branco ela ja vem desenhada na textura (metade do friso largo
   em cada borda, que se completa com a regua vizinha), entao aqui some. Nos
   amadeirados a emenda real e so um fio fino de sombra. */
.placa::after {
  content: "";
  position: absolute;
  left: 0;
  right: 0;
  bottom: 0;
  height: 2.2%;
  background: linear-gradient(180deg, rgba(0, 0, 0, 0) 0%, rgba(0, 0, 0, 0.32) 100%);
}

body[data-clima="branco"] .placa::after,
body[data-clima="frisado5"] .placa::after,
body[data-clima="liso"] .placa::after { display: none; }

/* nivel de detalhe do branco: a regua longe fica fina pela perspectiva e os
   frisos finos virariam moire. O forro.js mede cada regua e marca a versao
   da textura com o detalhe que cabe no tamanho em que ela aparece. */
body[data-clima="branco"] .placa[data-lod="1"] { background-image: url('../img/texturas/placa-branco-duplo-1.png?t=1'); }
body[data-clima="branco"] .placa[data-lod="2"] { background-image: url('../img/texturas/placa-branco-duplo-2.png?t=1'); }
body[data-clima="branco"] .placa[data-lod="3"] { background-image: url('../img/texturas/placa-branco-duplo-3.png?t=1'); }
body[data-clima="frisado5"] .placa[data-lod="1"] { background-image: url('../img/texturas/placa-branco-5mm-1.png?t=2'); }
body[data-clima="frisado5"] .placa[data-lod="2"] { background-image: url('../img/texturas/placa-branco-5mm-2.png?t=2'); }
body[data-clima="frisado5"] .placa[data-lod="3"] { background-image: url('../img/texturas/placa-branco-5mm-3.png?t=2'); }
body[data-clima="liso"] .placa[data-lod="1"] { background-image: url('../img/texturas/placa-branco-liso-1.png?t=1'); }
body[data-clima="liso"] .placa[data-lod="2"] { background-image: url('../img/texturas/placa-branco-liso-2.png?t=1'); }
body[data-clima="liso"] .placa[data-lod="3"] { background-image: url('../img/texturas/placa-branco-liso-3.png?t=1'); }

/* ---------- 1. a cena ---------- */
.forro-cena {
  position: relative;
  height: 420vh;
  background: #0C0B0A;
}

.forro-stage {
  --forro: 0;
  /* os tempos da cena. O teto fecha em 0,70; o fim chega em 0,80 e fica
     parado ate 1, que e o tempo de escolher o tom com calma */
  --luzes: clamp(0, calc((var(--forro) - 0.62) / 0.18), 1);
  --fim: clamp(0, calc((var(--forro) - 0.66) / 0.14), 1);

  position: sticky;
  top: 0;
  height: 100vh;
  overflow: hidden;
  background: #0C0B0A;
  perspective: 1100px;
  perspective-origin: 50% 50%;
}

/* o plano do teto: deitado para tras, entao as reguas convergem para o
   fundo do ambiente e a cena vira mesmo um olhar para cima */
.forro-plano {
  position: absolute;
  /* geometria calibrada no browser. A largura enorme nao e exagero: a ponta
     longe encolhe com a perspectiva, e sem ela sobra cunha preta nos cantos
     de cima. Largura nao mexe no encurtamento vertical, so no enquadramento. */
  left: -170%;
  right: -170%;
  top: -300%;
  bottom: -4%;
  transform: rotateX(53deg);
  transform-origin: 50% 100%;
  transform-style: preserve-3d;
}

/* a estrutura de forro de verdade, foto de obra da loja endireitada para 90
   graus: perfis galvanizados paralelos, travamentos, tirantes, e o
   madeiramento com a telha por cima. Uma celula de perfil a perfil, repetida,
   entao a emenda do ladrilho cai sempre atras de um perfil. Mora DENTRO do
   plano do teto, entao ganha a mesma perspectiva das reguas e o forro encaixa
   exatamente no angulo dela. Os perfis paralelos correm para o fundo e as
   reguas cruzam por cima, como na obra. Escala: dois vaos de 0,5 m de
   largura e 1,12 m entre travamentos, sobre reguas de 0,2 m, entao a altura
   do ladrilho vale 5,59 reguas (--reguas vem do forro.js). */
.forro-estrutura {
  position: absolute;
  inset: 0;
  /* quando chegar a estrutura gerada por IA (novas/estrutura-ia.jpg: vista
     reta de baixo, 2 m por 2 m, sem emenda), trocar o arquivo abaixo por ela.
     A camada vazia saiu no lancamento: pedia um arquivo que nao existe e
     deixava erro 404 no console. */
  /* o render e nitido e ja vem com as cores certas: escurece menos que a foto
     de obra. 29/09: era filter: brightness, depois uma camada rgba(12,10,8,.46)
     por cima; as duas custavam caro num plano 3D de 4 telas de largura (o
     Firefox repintava tudo a cada quadro). Agora o escuro vem pronto na
     imagem (estrutura-render-escura.jpg, a mesma conta da camada). */
  background-image: url('../img/hero/estrutura-render-escura.jpg?t=1');
  background-repeat: repeat;
  /* o ladrilho vale 2 m, ou seja, 10 reguas de 0,2 m */
  background-size: auto calc(1000% / var(--reguas, 14));
  background-position: 50% 100%;
}

/* as reguas descendo. Só transform e opacity. */
.forro-placas { position: absolute; inset: 0; }

.forro-placas .placa {
  --p: clamp(0, calc((var(--forro) - var(--atraso) * 0.40) / 0.30), 1);
  transform: translate3d(0, calc(-62vh * (1 - var(--p))), calc(70px * (1 - var(--p))));
  opacity: clamp(0, calc(var(--p) * 3.4), 1);
  will-change: transform, opacity;
}

/* a penumbra mora em cada regua, e nao no plano inteiro: assim o forro
   recem instalado fica no escuro sem escurecer duas vezes a foto da
   estrutura que ainda aparece por tras. Ela levanta no fim da cena, e e
   isso que faz o teto "acender". */
.forro-placas .placa::before {
  content: "";
  position: absolute;
  inset: 0;
  background: rgba(10, 9, 8, 0.8);
  opacity: calc(1 - 0.92 * var(--luzes));
}

/* sem spots nem facho de luz (o Gustavo achou que surgiam do nada): o teto
   acende so pela penumbra que levanta das reguas */

/* a moldura escura das bordas, que segura o olho no centro */
.forro-vinheta {
  position: absolute;
  inset: 0;
  pointer-events: none;
  background: radial-gradient(118% 92% at 50% 42%, rgba(8, 7, 6, 0) 28%, rgba(8, 7, 6, 0.95) 100%);
}

/* ---------- o texto da cena ---------- */
.forro-txt {
  position: absolute;
  inset: 0;
  pointer-events: none;
}

/* a bruma atras da manchete de abertura: a foto da estrutura tem perfil
   galvanizado claro cruzando o meio do quadro, e sem ela o pior pixel
   atras das letras caia para 4,1:1. So escurece o centro, a grade
   continua lendo em volta. */
.forro-bruma {
  position: absolute;
  left: 50%;
  top: 52%;
  width: min(130vw, 1100px);
  height: min(58vh, 470px);
  transform: translate(-50%, -50%);
  background: radial-gradient(closest-side,
    rgba(8, 7, 6, 0.74) 0%,
    rgba(8, 7, 6, 0.46) 52%,
    rgba(8, 7, 6, 0) 100%);
  opacity: calc(1 - var(--forro) * 3.1);
}

.forro-t1 {
  position: absolute;
  left: 50%;
  top: 52%;
  width: min(90vw, 19ch);
  transform: translate(-50%, calc(-50% - 28px * var(--forro)));
  text-align: center;
  font-family: var(--font-display);
  font-weight: var(--display-weight);
  letter-spacing: var(--display-tracking);
  line-height: 1.06;
  font-size: clamp(1.9rem, 5.4vw, 4rem);
  color: #F7F2E9;
  text-shadow: 0 2px 30px rgba(0, 0, 0, 0.92), 0 1px 4px rgba(0, 0, 0, 0.8);
  opacity: calc(1 - var(--forro) * 3.1);
}

.forro-t2 {
  position: absolute;
  left: 50%;
  bottom: clamp(20px, 5vh, 56px);
  transform: translate(-50%, calc(22px * (1 - var(--fim))));
  width: min(92vw, 660px);
  text-align: center;
  opacity: var(--fim);
}

.forro-t2 h2 {
  font-size: clamp(1.35rem, 3.2vw, 2.3rem);
  color: #FFFFFF;
  text-shadow: 0 2px 22px rgba(0, 0, 0, 0.9), 0 1px 3px rgba(0, 0, 0, 0.8);
  margin-bottom: 12px;
}

.forro-t2 p {
  font-size: clamp(0.92rem, 1.5vw, 1.02rem);
  line-height: 1.65;
  color: #EFE7DA;
  text-shadow: 0 1px 16px rgba(0, 0, 0, 0.95), 0 1px 3px rgba(0, 0, 0, 0.9);
  max-width: 58ch;
  margin: 0 auto;
}

/* o escurecido atras do bloco do fecho. Com os tons embaixo o bloco ficou
   mais alto e o titulo subiu para fora da cortina. Uma elipse perdia forca
   nas pontas do titulo (no celular ele ocupa quase a largura toda e caia
   para 2,4:1), entao e uma faixa na largura inteira, so na altura do texto,
   com a borda de cima subindo suave: o teto aceso continua a mostra acima */
.forro-t2::before {
  content: "";
  position: absolute;
  z-index: -1;
  left: -60vw;
  right: -60vw;
  top: -34%;
  bottom: -40%;
  background: linear-gradient(180deg,
    rgba(6, 5, 4, 0) 0%,
    rgba(6, 5, 4, 0.72) 18%,
    rgba(6, 5, 4, 0.8) 60%,
    rgba(6, 5, 4, 0.86) 100%);
  pointer-events: none;
}

/* a cortina que segura o contraste do fecho */
.forro-cortina {
  position: absolute;
  left: 0;
  right: 0;
  bottom: 0;
  height: 46%;
  background: linear-gradient(180deg,
    rgba(6, 5, 4, 0) 0%,
    rgba(6, 5, 4, 0.5) 44%,
    rgba(6, 5, 4, 0.93) 100%);
  opacity: var(--fim);
}

.forro-dica {
  position: absolute;
  left: 50%;
  bottom: clamp(18px, 3.4vh, 34px);
  transform: translateX(-50%);
  display: flex;
  align-items: center;
  gap: 9px;
  font-family: var(--font-mono);
  font-size: 0.68rem;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: #D8CDB9;
  text-shadow: 0 1px 8px rgba(0, 0, 0, 0.9);
  opacity: calc(1 - var(--forro) * 7);
  pointer-events: none;
}

.forro-dica span {
  width: 1px;
  height: 26px;
  background: linear-gradient(180deg, #D8CDB9 0%, rgba(216, 205, 185, 0) 100%);
  animation: ripa-desce 1.9s var(--ease-saida) infinite;
}

/* ---------- 2. qual tom combina com voce ----------
   Os tons aparecem no fim da cena, com o teto aceso na tela inteira, e o
   clique troca o proprio teto (o clima mora no body). Ficam escondidos e
   fora do Tab ate o teto fechar: o forro.js liga .tons-ativos. */
.forro-tons {
  margin-top: clamp(14px, 2.6vh, 24px);
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 10px;
  visibility: hidden;
  pointer-events: none;
}

.forro-tons.tons-ativos {
  visibility: visible;
  pointer-events: auto;
}

.forro-tons-rotulo {
  font-family: var(--font-mono);
  font-size: 0.68rem;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: #D8CDB9;
  text-shadow: 0 1px 8px rgba(0, 0, 0, 0.9);
}

.forro-tons-lista {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: 8px;
}

.forro-tom {
  display: inline-flex;
  align-items: center;
  gap: 9px;
  padding: 6px 14px 6px 6px;
  border: 1.5px solid rgba(247, 242, 233, 0.3);
  border-radius: 4px;
  background: rgba(10, 9, 8, 0.62);
  color: #F7F2E9;
  font-family: var(--font-display);
  font-weight: var(--display-weight);
  letter-spacing: var(--display-tracking);
  font-size: 0.9rem;
  cursor: pointer;
  transition: border-color 0.2s ease, background-color 0.2s ease;
}

.forro-tom:hover { border-color: var(--yellow); }
.forro-tom:focus-visible { outline: 2px solid var(--yellow); outline-offset: 3px; }

.forro-tom[aria-pressed="true"] {
  border-color: var(--yellow);
  background: rgba(58, 45, 8, 0.8);
}

.forro-tom-amostra {
  flex-shrink: 0;
  width: 30px;
  height: 30px;
  border-radius: 3px;
  background-size: cover;
  background-position: center;
  box-shadow: inset 0 0 0 1px rgba(255, 255, 255, 0.18);
}

/* a amostra mora no CSS, e nao no atributo style, porque url() em custom
   property resolve contra a folha de estilo e o relativo da pagina cairia
   em assets/css/assets/img */
.forro-tom[data-clima="branco"] .forro-tom-amostra { background-image: url('../img/texturas/placa-branco-duplo.png?t=1'); }
.forro-tom[data-clima="frisado5"] .forro-tom-amostra { background-image: url('../img/texturas/placa-branco-5mm.png?t=2'); }
.forro-tom[data-clima="liso"] .forro-tom-amostra { background-image: url('../img/texturas/placa-branco-liso.png?t=1'); }
.forro-tom[data-clima="carvalho"] .forro-tom-amostra { background-image: url('../img/texturas/placa-carvalho.jpg?t=2'); }
.forro-tom[data-clima="cerejeira"] .forro-tom-amostra { background-image: url('../img/texturas/placa-cerejeira.jpg?t=2'); }
.forro-tom[data-clima="jatoba"] .forro-tom-amostra { background-image: url('../img/texturas/placa-jatoba.jpg?t=2'); }

.forro-tom-ficha {
  font-size: 0.84rem;
  line-height: 1.5;
  color: #EFE7DA;
  text-shadow: 0 1px 10px rgba(0, 0, 0, 0.95);
}

.forro-tom-link {
  margin-left: 6px;
  color: var(--yellow);
  font-weight: 700;
  text-decoration: underline;
  text-underline-offset: 3px;
}

/* a grade de produtos acompanha o clima, mas em dose baixa e sempre clara.
   O clima do Jatoba e quase preto: aplicado cheio aqui, o titulo navy e as
   fichas dos produtos ficariam ilegiveis. Misturado com branco, a pagina
   muda junto e o catalogo continua se lendo. */
body[data-clima] .forro-grade {
  background: color-mix(in srgb, var(--cl-fundo) 18%, #FFFFFF);
}

@media (max-width: 720px) {
  .forro-cena { height: 360vh; }
  /* tela estreita: a ponta longe encolhe ainda mais, entao a folga
     lateral precisa crescer, e o plano precisa continuar comprido */
  .forro-plano { left: -230%; right: -230%; top: -300%; }
  .forro-t1, .forro-bruma { top: 48%; }
  .forro-t2 { bottom: clamp(96px, 13vh, 124px); padding: 0 16px; }
  .forro-t2 h2 { font-size: 1.28rem; margin-bottom: 9px; }
  .forro-t2 p { font-size: 0.88rem; line-height: 1.55; }
  .forro-cortina { height: 48%; }
  .forro-tons-lista { display: grid; grid-template-columns: 1fr 1fr; width: 100%; max-width: 340px; }
  .forro-tom { font-size: 0.84rem; }
}

@media (prefers-reduced-motion: reduce) {
  .forro-cena { height: 100vh; }
  .forro-stage { --forro: 1; }
  .forro-dica { display: none; }
  .forro-tom { transition: none; }
}

/* ---------- a cena na abertura da forros.html (2026-10-15) ----------
   Antes ficava depois do catálogo e andava com a rolagem; agora abre a página
   numa altura de ~3/4 da tela e toca sozinha (Cena.tocar no forro.js). Sem
   rolagem presa: o catálogo vem logo abaixo. */
.forro-cena.forro-hero { height: auto; }
.forro-hero .forro-stage {
  position: relative;
  height: min(78vh, 780px);
  min-height: 540px;
}
.forro-hero .forro-t2 { bottom: clamp(18px, 4vh, 38px); }
.forro-acoes {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  align-items: center;
  gap: 6px 14px;
  margin: 2px 0 0;
}
.forro-acoes .btn { text-shadow: none; }
.forro-repetir {
  padding: 8px 4px;
  border: 0;
  background: none;
  color: #D8CDB9;
  font-family: var(--font-mono);
  font-size: 0.68rem;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  text-decoration: underline;
  text-underline-offset: 3px;
  text-shadow: 0 1px 8px rgba(0, 0, 0, 0.9);
  cursor: pointer;
}
.forro-repetir:hover { color: var(--yellow); }
.forro-repetir:focus-visible { outline: 2px solid var(--yellow); outline-offset: 3px; }

@media (max-width: 720px) {
  /* termina no pé da tela, descontando faixa do bônus e cabeçalho */
  .forro-hero .forro-stage { height: calc(100svh - 124px); min-height: 560px; }
  .forro-hero .forro-t2 { bottom: 14px; }
  .forro-hero .forro-t2 h2 { margin-bottom: 4px; }
  .forro-hero .forro-t2 > p { display: none; }
  .forro-hero .forro-tons { margin-top: 8px; gap: 7px; }
  .forro-hero .forro-tons-lista { gap: 6px; grid-template-columns: repeat(3, 1fr); max-width: 360px; }
  .forro-hero .forro-tom { padding: 4px 8px 4px 4px; gap: 6px; font-size: 0.76rem; }
  .forro-hero .forro-tom-amostra { width: 22px; height: 22px; }
  .forro-hero .forro-tom-ficha { font-size: 0.78rem; }
  .forro-hero .forro-acoes .btn { padding: 11px 18px; }
}


/* ---------- produto: escolha de cor ou padrao ----------
   Um cartao por produto no catalogo; aqui a cor escolhida troca a foto, a
   referencia e a mensagem do WhatsApp. Canto de 4px, nunca pilula. */
.pd-cores { margin: 14px 0 18px; }
.pd-cores-rotulo { display: block; margin-bottom: 10px; font-size: 0.9rem; color: var(--gray); }
.pd-cores-rotulo b { color: var(--navy); }
.pd-cores-lista { display: flex; flex-wrap: wrap; gap: 8px; }
.pd-cor {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 5px;
  width: 84px;
  padding: 6px;
  border: 1.5px solid #D9DCE3;
  border-radius: 4px;
  background: #FFFFFF;
  color: var(--navy);
  font: inherit;
  font-size: 0.74rem;
  line-height: 1.2;
  text-align: center;
  cursor: pointer;
  transition: border-color 0.2s ease, box-shadow 0.2s ease;
}
.pd-cor img { width: 100%; aspect-ratio: 1; object-fit: cover; border-radius: 3px; background: #28324B; }
.pd-cor:hover { border-color: var(--yellow); }
.pd-cor:focus-visible { outline: 2px solid var(--yellow); outline-offset: 2px; }
.pd-cor[aria-pressed="true"] { border-color: var(--yellow); box-shadow: 0 0 0 2px rgba(255, 196, 14, 0.35); }


/* ---------- catalogo por modelo ----------
   Cada pagina de categoria vem em secoes por modelo (espessura no forro, tipo
   no piso, linha no ripado, material no rodape) e, dentro de cada secao, as
   marcas em ordem alfabetica. Os atalhos levam direto a secao. Canto de 4px. */
.modelo-nav { display: flex; flex-wrap: wrap; gap: 8px; margin: 4px 0 8px; }
.modelo-nav a {
  padding: 7px 12px;
  border: 1.5px solid #D9DCE3;
  border-radius: 4px;
  background: #FFFFFF;
  color: var(--navy);
  font-family: var(--font-mono);
  font-size: 0.72rem;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  transition: border-color 0.2s ease;
}
.modelo-nav a:hover, .modelo-nav a:focus-visible { border-color: var(--yellow); }
.modelo-secao { scroll-margin-top: 130px; }
.modelo-titulo {
  margin: 48px 0 4px;
  padding-top: 22px;
  border-top: 1px solid #E4E6EB;
  font-family: var(--font-display);
  font-weight: var(--display-weight);
  letter-spacing: var(--display-tracking);
  font-size: clamp(1.3rem, 2.4vw, 1.7rem);
  color: var(--navy);
}


/* ---------- Monte seu kit ----------
   A lista que o visitante monta pelo site e manda pronta no WhatsApp.
   Botão flutuante, gaveta e aviso vêm do kit.js; a página é o kit.html; o
   bloco da página de produto é o produto-kit.js. Canto de 4px, nunca pílula. */
.kit-float[hidden],
.pd-kit-erro[hidden],
.calc-kit-link[hidden],
.kit-link[hidden],
.kit-cores[hidden] { display: none !important; }

.kit-conta {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-width: 19px;
  height: 19px;
  margin-left: 6px;
  padding: 0 5px;
  border-radius: 4px;
  background: var(--yellow);
  color: var(--navy);
  font-family: var(--font-mono);
  font-size: 0.68rem;
  font-weight: 700;
  line-height: 1;
  vertical-align: 2px;
}

.kit-float {
  position: fixed;
  right: 26px;
  bottom: 100px;
  z-index: 199;
  display: inline-flex;
  align-items: center;
  gap: 9px;
  padding: 11px 12px 11px 14px;
  border: 0;
  border-radius: 4px;
  background: var(--navy);
  color: var(--white);
  font-family: var(--font-mono);
  font-size: 0.72rem;
  font-weight: 700;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  box-shadow: 0 10px 26px rgba(24, 30, 46, 0.32);
  cursor: pointer;
  transition: transform 0.15s ease, background-color 0.2s ease;
}
.kit-float:hover { background: var(--navy-light); }
.kit-float:active { transform: scale(0.97); }
.kit-float:focus-visible { outline: 2px solid var(--yellow); outline-offset: 3px; }
.kit-float .ico { width: 18px; height: 18px; }
.kit-float-conta {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-width: 24px;
  height: 24px;
  padding: 0 6px;
  border-radius: 3px;
  background: var(--yellow);
  color: var(--navy);
}

body.kit-aberto { overflow: hidden; }

.kit-fundo {
  position: fixed;
  inset: 0;
  z-index: 900;
  background: rgba(24, 30, 46, 0.55);
  opacity: 0;
  visibility: hidden;
  transition: opacity 0.25s ease, visibility 0.25s;
}
.kit-fundo.is-open { opacity: 1; visibility: visible; }

.kit-gaveta {
  position: fixed;
  top: 0;
  right: 0;
  bottom: 0;
  z-index: 901;
  display: flex;
  flex-direction: column;
  width: min(440px, 100%);
  background: var(--white);
  color: var(--navy);
  box-shadow: -18px 0 40px rgba(24, 30, 46, 0.18);
  transform: translateX(104%);
  visibility: hidden;
  transition: transform 0.32s cubic-bezier(0.22, 0.61, 0.36, 1), visibility 0.32s;
}
.kit-gaveta.is-open { transform: none; visibility: visible; }
.kit-gaveta-topo {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 12px;
  padding: 22px 22px 16px;
  border-bottom: 1px solid var(--border);
}
.kit-gaveta-topo h2 { font-size: 1.5rem; }
.kit-sobre {
  display: block;
  margin-bottom: 4px;
  font-family: var(--font-mono);
  font-size: 0.68rem;
  font-weight: 700;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--gray);
}
.kit-fechar {
  width: 40px;
  height: 40px;
  border: 1.5px solid var(--border);
  border-radius: 4px;
  background: var(--white);
  color: var(--navy);
  font-size: 1.5rem;
  line-height: 1;
  cursor: pointer;
}
.kit-fechar:hover { border-color: var(--navy); }
.kit-gaveta-corpo { flex: 1; overflow-y: auto; overscroll-behavior: contain; padding: 6px 22px 18px; }
.kit-ambiente {
  margin: 18px 0 2px;
  font-family: var(--font-mono);
  font-size: 0.72rem;
  font-weight: 700;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--gray);
}
.kit-item {
  display: grid;
  grid-template-columns: 64px 1fr;
  gap: 14px;
  padding: 14px 0;
  border-bottom: 1px solid var(--border);
}
.kit-item-foto,
.kit-acess-foto {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 64px;
  height: 64px;
  overflow: hidden;
  border-radius: 4px;
  background: var(--navy);
  color: var(--yellow);
  flex-shrink: 0;
}
.kit-item-foto img,
.kit-acess-foto img { width: 100%; height: 100%; object-fit: cover; }
.kit-glifo { width: 58%; height: 58%; }
.kit-item-info { display: flex; flex-direction: column; gap: 2px; min-width: 0; }
.kit-item-info > b { font-size: 0.98rem; line-height: 1.25; }
.kit-item-detalhe { font-size: 0.84rem; color: var(--gray); }
.kit-item-rotulo { font-size: 0.88rem; font-weight: 600; }
.kit-item-aviso,
.kit-acess-aviso { font-size: 0.8rem; line-height: 1.35; color: #8A5A00; }
.kit-item-acoes {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: 10px;
  margin-top: 8px;
}
.kit-item-calcula { font-size: 0.84rem; color: var(--gray); }
.kit-tirar,
.kit-limpar,
.kit-link {
  padding: 6px 2px;
  border: 0;
  background: none;
  color: var(--gray);
  font: inherit;
  font-size: 0.84rem;
  text-decoration: underline;
  text-underline-offset: 3px;
  cursor: pointer;
}
.kit-tirar:hover,
.kit-limpar:hover,
.kit-link:hover { color: var(--navy); }

.kit-qtd { display: inline-flex; align-items: center; }
.kit-qtd button {
  width: 36px;
  height: 38px;
  border: 1.5px solid #D9DCE3;
  background: var(--white);
  color: var(--navy);
  font-size: 1.1rem;
  font-weight: 700;
  line-height: 1;
  cursor: pointer;
}
.kit-qtd button:first-child { border-radius: 4px 0 0 4px; }
.kit-qtd button:nth-of-type(2) { border-radius: 0 4px 4px 0; }
.kit-qtd button:hover { border-color: var(--yellow); }
.kit-qtd input {
  width: 58px;
  height: 38px;
  border: 1.5px solid #D9DCE3;
  border-left: 0;
  border-right: 0;
  border-radius: 0;
  background: var(--white);
  color: var(--navy);
  font: inherit;
  font-weight: 700;
  text-align: center;
  -moz-appearance: textfield;
  appearance: textfield;
}
.kit-qtd input::-webkit-outer-spin-button,
.kit-qtd input::-webkit-inner-spin-button { -webkit-appearance: none; margin: 0; }
.kit-qtd input:focus { outline: 2px solid var(--yellow); outline-offset: -2px; }
.kit-qtd-un { margin-left: 9px; font-size: 0.84rem; color: var(--gray); }

.kit-gaveta-pe { padding: 16px 22px 22px; border-top: 1px solid var(--border); background: var(--off-white); }
.kit-whats { width: 100%; }
.kit-nota { margin-top: 10px; font-size: 0.82rem; line-height: 1.45; color: var(--gray); }
.kit-gaveta-links {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: 10px;
  margin-top: 10px;
  font-size: 0.86rem;
}
.kit-gaveta-links a { color: var(--navy); font-weight: 600; text-decoration: underline; text-underline-offset: 3px; }
.kit-vazio { padding: 36px 4px; text-align: center; color: var(--gray); }
.kit-vazio .kit-glifo { display: block; width: 56px; height: 56px; margin: 0 auto 14px; color: var(--navy); }
.kit-vazio p { margin-bottom: 18px; line-height: 1.5; }
.kit-vazio b { display: block; color: var(--navy); }

.kit-aviso {
  position: fixed;
  left: 50%;
  bottom: 26px;
  z-index: 950;
  display: flex;
  align-items: center;
  gap: 14px;
  max-width: calc(100% - 32px);
  padding: 10px 10px 10px 16px;
  border-radius: 4px;
  background: var(--navy);
  color: var(--white);
  font-size: 0.92rem;
  box-shadow: 0 12px 30px rgba(24, 30, 46, 0.3);
  opacity: 0;
  visibility: hidden;
  transform: translate(-50%, 140%);
  transition: transform 0.3s ease, opacity 0.3s ease, visibility 0.3s;
}
.kit-aviso.is-on { opacity: 1; visibility: visible; transform: translate(-50%, 0); }
.kit-aviso button {
  flex-shrink: 0;
  padding: 9px 12px;
  border: 0;
  border-radius: 3px;
  background: var(--yellow);
  color: var(--navy);
  font-family: var(--font-mono);
  font-size: 0.7rem;
  font-weight: 700;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  cursor: pointer;
}

/* peças compartilhadas: chips, seletores, linha de acessório */
.kit-chips { display: flex; flex-wrap: wrap; align-items: center; gap: 6px; }
.kit-chip {
  padding: 9px 12px;
  border: 1.5px solid #D9DCE3;
  border-radius: 4px;
  background: var(--white);
  color: var(--navy);
  font-family: var(--font-mono);
  font-size: 0.74rem;
  font-weight: 700;
  cursor: pointer;
  transition: border-color 0.2s ease, background-color 0.2s ease;
}
.kit-chip:hover { border-color: var(--yellow); }
.kit-chip[aria-pressed="true"] { border-color: var(--navy); background: var(--navy); color: var(--white); }
.kit-chip:focus-visible,
.kit-select:focus-visible,
.kit-btn-add:focus-visible,
.kit-qtd button:focus-visible { outline: 2px solid var(--yellow); outline-offset: 2px; }
.kit-medida { display: inline-flex; align-items: center; gap: 6px; margin-left: 4px; font-size: 0.86rem; color: var(--gray); }
.kit-medida input {
  width: 78px;
  height: 38px;
  padding: 0 8px;
  border: 1.5px solid #D9DCE3;
  border-radius: 4px;
  color: var(--navy);
  font: inherit;
  font-weight: 700;
}
.kit-medida input:focus { outline: 2px solid var(--yellow); outline-offset: -2px; }
.kit-select {
  max-width: 100%;
  height: 38px;
  padding: 0 8px;
  border: 1.5px solid #D9DCE3;
  border-radius: 4px;
  background: var(--white);
  color: var(--navy);
  font: inherit;
  font-size: 0.88rem;
}
.kit-select-nome { align-self: flex-start; height: auto; padding: 6px 8px; font-weight: 700; font-size: 0.94rem; }
.kit-btn-add {
  height: 38px;
  padding: 0 14px;
  border: 0;
  border-radius: 4px;
  background: var(--navy);
  color: var(--white);
  font-family: var(--font-mono);
  font-size: 0.7rem;
  font-weight: 700;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  cursor: pointer;
}
.kit-btn-add:hover { background: var(--navy-light); }
.kit-dica { margin-bottom: 10px; font-size: 0.86rem; line-height: 1.45; color: var(--gray); }
.kit-acess-info { display: flex; flex-direction: column; min-width: 0; }
.kit-acess-nome { font-size: 0.96rem; line-height: 1.25; }
.kit-acess-nome span { font-weight: 600; color: var(--gray); }
.kit-acess-texto { margin: 2px 0 8px; font-size: 0.84rem; line-height: 1.4; color: var(--gray); }
.kit-acess-ctrl { display: flex; flex-wrap: wrap; align-items: center; gap: 8px; }
.kit-acess-fixo { font-size: 0.86rem; font-weight: 600; color: var(--navy); }
.kit-acess-aviso { margin-top: 6px; }
.kit-erro { padding: 18px 0; color: #A3341F; }
.kit-btn-navy { background: var(--navy); color: var(--white); }
.kit-btn-navy:hover { background: var(--navy-light); }
.kit-btn-linha { background: transparent; color: var(--navy); border: 1.5px solid var(--navy); }
.kit-btn-linha:hover { background: rgba(40, 50, 75, 0.06); }

/* página de produto */
.pd-kit {
  margin: 4px 0 16px;
  padding: 20px;
  border: 1.5px solid var(--navy);
  border-radius: 6px;
  background: var(--white);
}
.pd-kit-topo {
  display: flex;
  flex-wrap: wrap;
  align-items: baseline;
  justify-content: space-between;
  gap: 8px 14px;
  margin-bottom: 14px;
}
.pd-kit-titulo { font-size: 1.2rem; }
.pd-kit-calc { font-size: 0.86rem; font-weight: 600; color: var(--navy); text-decoration: underline; text-underline-offset: 3px; }
.pd-kit-calc:hover { color: #8A5A00; }
.pd-kit-bloco { margin-bottom: 14px; }
.pd-kit-rot { display: block; margin-bottom: 8px; font-size: 0.86rem; color: var(--gray); }
.pd-kit-conta { margin: 4px 0 2px; font-weight: 700; line-height: 1.35; }
.pd-kit-nota { margin-bottom: 14px; font-size: 0.82rem; color: var(--gray); }
.pd-kit-erro { display: block; margin-top: 6px; font-size: 0.82rem; color: #A3341F; }
.pd-kit .btn { width: 100%; margin-top: 6px; }
.pd-kit .btn:disabled { opacity: 0.5; cursor: not-allowed; }
.pd-junto { margin: 0 0 16px; padding: 18px 20px 6px; border-radius: 6px; background: var(--off-white); }
.pd-junto h3 { margin-bottom: 4px; font-size: 1.1rem; }
.pd-junto.is-destaque { animation: kitDestaque 1.4s ease; }
@keyframes kitDestaque {
  0% { box-shadow: 0 0 0 0 rgba(255, 196, 14, 0); }
  25% { box-shadow: 0 0 0 4px rgba(255, 196, 14, 0.75); }
  100% { box-shadow: 0 0 0 0 rgba(255, 196, 14, 0); }
}
.pd-junto-item {
  display: grid;
  grid-template-columns: 56px 1fr;
  gap: 12px;
  padding: 14px 0;
  border-top: 1px solid var(--border);
}
.pd-junto-item .kit-acess-foto { width: 56px; height: 56px; }
/* acabamentos do piso, dentro do bloco Monte seu kit, acima do botão (19/10/2026) */
.kit-campos.pd-kit-medidas { grid-template-columns: 1fr 1fr 0.7fr; gap: 10px; margin-bottom: 8px; }
.pd-kit-medidas .kit-campo input { height: 44px; }
.pd-piso { margin: 4px 0 12px; padding-top: 16px; border-top: 1px solid var(--border); }
.pd-piso h3 { margin-bottom: 4px; font-size: 1.1rem; }
.pd-piso .kit-dica { margin-bottom: 4px; }
.pd-piso-secao { margin: 16px 0 0; font-size: 0.76rem; font-weight: 700; letter-spacing: 0.06em; text-transform: uppercase; color: var(--gray); }
.pd-piso-ul { margin: 0; padding: 0; }
.pd-piso .kit-acess { grid-template-columns: 28px 52px minmax(0, 1fr); gap: 10px; padding: 12px 0; }
.pd-piso .kit-acess-foto { width: 52px; height: 52px; }
.pd-piso .kit-marca { margin-top: 12px; }
.kit-opcao { display: inline-flex; align-items: center; gap: 6px; font-size: 0.8rem; color: var(--gray); }
.kit-acess-conta { margin-top: 6px; font-size: 0.8rem; line-height: 1.4; color: var(--gray); }
.pd-info .pd-whatsapp-btn.is-secundario { background: transparent; color: var(--navy); border: 1.5px solid var(--navy); }
.pd-info .pd-whatsapp-btn.is-secundario:hover { background: rgba(40, 50, 75, 0.06); }

/* página kit.html */
.kit-pagina { background: var(--off-white); }
.kit-grid {
  display: grid;
  grid-template-columns: minmax(0, 1.3fr) minmax(0, 1fr);
  align-items: start;
  gap: 30px;
}
.kit-montador { display: flex; flex-direction: column; gap: 18px; min-width: 0; }
.kit-passo {
  display: grid;
  grid-template-columns: 40px minmax(0, 1fr);
  gap: 16px;
  padding: 26px;
  border: 1px solid var(--border);
  border-radius: var(--radius);
  background: var(--white);
  scroll-margin-top: 110px;
}
.kit-passo-n {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 40px;
  height: 40px;
  border-radius: 4px;
  background: var(--yellow);
  color: var(--navy);
  font-family: var(--font-mono);
  font-weight: 700;
}
.kit-passo h2 { margin: 7px 0 16px; font-size: 1.35rem; }
.kit-campos { display: grid; grid-template-columns: 1.4fr 1fr 1fr; gap: 12px; }
.kit-campo { display: flex; flex-direction: column; gap: 6px; min-width: 0; font-size: 0.84rem; color: var(--gray); }
.kit-campo input,
.kit-campo select {
  width: 100%;
  min-width: 0;
  height: 48px;
  padding: 0 12px;
  border: 1.5px solid var(--border);
  border-radius: 6px;
  background: var(--white);
  color: var(--navy);
  font: inherit;
  font-size: 1rem;
}
.kit-campo input:focus,
.kit-campo select:focus { outline: none; border-color: var(--yellow); box-shadow: 0 0 0 2px rgba(255, 196, 14, 0.35); }
.kit-passo .kit-dica { margin: 10px 0 0; }
.kit-cores { margin-top: 16px; }
.kit-cores .pd-cor { width: 74px; font-size: 0.7rem; }
.kit-comp { display: flex; flex-direction: column; gap: 14px; margin-top: 16px; }
.kit-comp:empty { display: none; }
.kit-comp .pd-kit-rot { margin-bottom: 8px; }
.kit-comp .kit-dica { margin: 0; }
.kit-junto { display: flex; flex-direction: column; }
.kit-acess {
  display: grid;
  grid-template-columns: 28px 64px minmax(0, 1fr);
  align-items: start;
  gap: 12px;
  padding: 14px 0;
  border-top: 1px solid var(--border);
}
.kit-acess.is-off .kit-acess-nome,
.kit-acess.is-off .kit-select-nome { color: var(--gray); }
.kit-acess.is-off .kit-acess-foto img { filter: grayscale(0.6); opacity: 0.7; }
.kit-marca { position: relative; width: 28px; height: 28px; margin-top: 18px; }
.kit-marca input { position: absolute; inset: 0; width: 100%; height: 100%; margin: 0; opacity: 0; cursor: pointer; }
.kit-caixa {
  display: block;
  width: 28px;
  height: 28px;
  border: 2px solid #B8BECA;
  border-radius: 4px;
  background: var(--white);
  pointer-events: none;
}
.kit-marca input:checked + .kit-caixa {
  border-color: var(--navy);
  background: var(--navy) url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23FFC40E' stroke-width='3.2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M5 12.5l4.5 4.5L19 7.5'/%3E%3C/svg%3E") center / 18px no-repeat;
}
.kit-marca input:focus-visible + .kit-caixa { outline: 2px solid var(--yellow); outline-offset: 2px; }
.kit-lado { position: sticky; top: 96px; display: flex; flex-direction: column; gap: 18px; min-width: 0; }
.kit-planta-caixa,
.kit-resumo { padding: 22px; border: 1px solid var(--border); border-radius: var(--radius); background: var(--white); }
#kit-planta { display: block; width: 100%; height: auto; }
.kit-legenda { display: flex; flex-wrap: wrap; gap: 8px 16px; margin-top: 8px; font-size: 0.8rem; color: var(--gray); }
.kit-legenda i { display: inline-block; width: 16px; height: 10px; margin-right: 6px; vertical-align: -1px; border-radius: 2px; }
.kit-resumo h2 { margin-bottom: 12px; font-size: 1.2rem; }
.kit-resumo ul { display: flex; flex-direction: column; gap: 8px; margin-bottom: 12px; }
.kit-resumo li {
  display: flex;
  justify-content: space-between;
  gap: 14px;
  padding-bottom: 8px;
  border-bottom: 1px dashed var(--border);
  font-size: 0.9rem;
}
.kit-resumo li span { color: var(--navy); }
.kit-resumo li b { flex-shrink: 0; max-width: 55%; text-align: right; }
.kit-resumo li.kit-resumo-medida span { color: var(--gray); }
.kit-resumo li.kit-resumo-vazio { display: block; border: 0; color: var(--gray); }
.kit-resumo .btn { width: 100%; }
.kit-resumo .btn:disabled { opacity: 0.5; cursor: not-allowed; }
.kit-feito { margin-top: 14px; padding-top: 14px; border-top: 1px solid var(--border); }
.kit-feito-botoes { display: flex; flex-wrap: wrap; gap: 8px; margin-top: 10px; }
.kit-feito-botoes .btn { flex: 1 1 170px; padding: 13px 14px; }

@media (max-width: 960px) {
  .kit-grid { grid-template-columns: 1fr; }
  .kit-lado { position: static; }
}
@media (max-width: 600px) {
  .kit-float { right: 16px; bottom: 98px; }
  .kit-aviso { bottom: 16px; }
  .kit-passo { grid-template-columns: 1fr; gap: 10px; padding: 20px 18px; }
  .kit-passo h2 { margin: 0 0 12px; }
  .kit-campos { grid-template-columns: 1fr 1fr; }
  .kit-campo-nome { grid-column: 1 / -1; }
  .kit-acess { grid-template-columns: 28px 52px minmax(0, 1fr); }
  .kit-acess .kit-acess-foto { width: 52px; height: 52px; }
  .kit-planta-caixa, .kit-resumo { padding: 18px; }
  .pd-kit { padding: 16px; }
  .pd-junto { padding: 16px 16px 4px; }
}
@media (prefers-reduced-motion: reduce) {
  .kit-gaveta, .kit-fundo, .kit-aviso, .kit-float { transition: none; }
  .pd-junto.is-destaque { animation: none; }
}

/* calculadora: atalho para o kit com as mesmas medidas */
.calc-kit-link {
  display: block;
  margin-top: 16px;
  font-size: 0.9rem;
  font-weight: 600;
  line-height: 1.45;
  text-align: center;
  color: var(--navy);
  text-decoration: underline;
  text-underline-offset: 3px;
}
.calc-kit-link:hover { color: #8A5A00; }

/* cabeçalho com o link "Monte seu kit": seis itens no menu. Abaixo de 1040px o
   menu vai para o botão de três linhas, e até 1240px os itens ficam mais juntos */
@media (max-width: 1240px) and (min-width: 1041px) {
  .main-nav > ul { gap: 20px; }
  .main-nav > ul > li > a { font-size: 0.9rem; white-space: nowrap; }
  .nav-cta { white-space: nowrap; padding: 12px 16px; }
}
/* com "Indique e ganhe" no menu, as telas logo acima do corte apertam mais um pouco */
@media (max-width: 1120px) and (min-width: 1041px) {
  .main-nav > ul { gap: 15px; }
  .main-nav > ul > li > a { font-size: 0.86rem; }
  .nav-cta { padding: 11px 13px; letter-spacing: 0.05em; }
}
@media (max-width: 1040px) {
  .main-nav { display: none; }
  .nav-toggle { display: flex; }
  .nav-cta { white-space: nowrap; font-size: 0.66rem; padding: 11px 15px; letter-spacing: 0.06em; }
}
.kit-qtd-un { white-space: nowrap; }

/* ---------- teto em L e origem ----------
   Formato do teto no kit (retangular ou em L) e a faixa do bônus, que some
   para quem chegou pelo link que a loja mandou (origem.js). */
.origem-loja .coupon-strip { display: none !important; }

.kit-formato { display: flex; flex-wrap: wrap; gap: 10px; margin: -4px 0 16px; }
.kit-forma {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  padding: 8px 16px 8px 10px;
  border: 1.5px solid #D9DCE3;
  border-radius: 4px;
  background: var(--white);
  color: var(--navy);
  font: inherit;
  font-size: 0.94rem;
  font-weight: 700;
  cursor: pointer;
  transition: border-color 0.2s ease, box-shadow 0.2s ease;
}
.kit-forma svg { width: 40px; height: 32px; fill: #ECEAE4; stroke: var(--navy); stroke-width: 2; stroke-linejoin: round; }
.kit-forma:hover { border-color: var(--yellow); }
.kit-forma[aria-pressed="true"] { border-color: var(--navy); box-shadow: inset 0 0 0 1px var(--navy); }
.kit-forma[aria-pressed="true"] svg { fill: var(--yellow); }
.kit-forma:focus-visible { outline: 2px solid var(--yellow); outline-offset: 2px; }
.kit-recorte { margin-top: 14px; padding: 16px; border-radius: 6px; background: var(--off-white); }
.kit-recorte-ajuda { display: flex; align-items: center; gap: 16px; margin-bottom: 12px; }
.kit-recorte-ajuda svg { flex: 0 0 140px; width: 140px; height: auto; font-family: var(--font-text); }
.kit-recorte-ajuda p { font-size: 0.86rem; line-height: 1.45; color: var(--gray); }
.kit-campos.kit-campos-2 { grid-template-columns: 1fr 1fr; }
#kit-medida-erro { margin-top: 10px; }
.kit-comp-partes { display: block; margin: 8px 0 0; }
@media (max-width: 600px) {
  .kit-recorte-ajuda { flex-direction: column; align-items: flex-start; }
}
/* campos lado a lado com rótulo que quebra linha: os campos alinham embaixo */
.kit-campos { align-items: end; }

/* ---------- fotos dos produtos: fundo claro de estúdio ----------
   As fotos saem do PSD do catálogo, inteiras e sem fundo (psd_produto.py).
   O fundo é um só para todo o site: claro, levemente quente, com uma luz no
   meio e uma sombra macia embaixo do produto. */
:root {
  --estudio: radial-gradient(120% 95% at 50% 36%, #FAF9F6 0%, #F0EEEA 55%, #E4E2DC 100%);
  --sombra-produto: drop-shadow(0 12px 14px rgba(30, 34, 45, 0.16)) drop-shadow(0 2px 3px rgba(30, 34, 45, 0.10));
}
.product-photo { background: var(--estudio); padding: 22px 26px; }
.product-photo img { width: 100%; height: 100%; object-fit: contain; filter: var(--sombra-produto); }
.pd-gallery-main { background: var(--estudio); }
.pd-gallery-main img { filter: var(--sombra-produto); }
.pd-cor img { object-fit: contain; padding: 4px; background: var(--estudio); }
.kit-item-foto,
.kit-acess-foto { background: var(--estudio); color: var(--navy); border: 1px solid #E4E2DC; }
.kit-item-foto img,
.kit-acess-foto img { object-fit: contain; padding: 5px; filter: drop-shadow(0 3px 4px rgba(30, 34, 45, 0.18)); }


/* ==========================================================================
   PAINEL RIPADO, rodada 2 (2026-09-15)
   Pedido do Gustavo: a ideia fica, a execução muda. As ripas agora são o
   render oficial da Macheto (um período entre dois frisos, repetido), a sala
   tem reboco, rodapé e piso de verdade, e a parte da luz saiu do fundo azul
   genérico para uma sala de reboco e madeira ao entardecer.
   ========================================================================== */
.ripa-painel,
.luz-painel { --tex: url('../img/texturas/ripas/premium-black-cedro-rosa-interno.jpg?t=3'); }
.ripa-painel .ripa,
.luz-painel .ripa { background-size: 100% auto; background-repeat: repeat-y; border-radius: 0; }
.ripa-painel .ripa::before { display: none; }

.ripa-cena,
.ripa-stage { background: #CDC2B3; }
.ripa-parede {
  inset: 0 0 23% 0;
  background:
    radial-gradient(85% 70% at 16% -4%, rgba(255, 246, 228, 0.78) 0%, rgba(255, 246, 228, 0) 62%),
    radial-gradient(110% 80% at 104% 102%, rgba(46, 34, 22, 0.32) 0%, rgba(46, 34, 22, 0) 62%),
    url('../img/texturas/cena/reboco.png') 0 0 / 420px 420px,
    linear-gradient(180deg, #E4DBCE 0%, #D8CDBF 64%, #CBBFAF 100%);
  background-blend-mode: normal, normal, soft-light, normal;
}
.ripa-rodape {
  bottom: 23%;
  z-index: 2;
  height: clamp(20px, 2.8vh, 30px);
  background: linear-gradient(180deg, #FFFDF8 0%, #F3EEE5 46%, #E2DBD0 84%, #CFC6B9 100%);
  box-shadow: 0 -1px 0 rgba(60, 46, 32, 0.12), 0 6px 12px rgba(40, 30, 20, 0.28);
}
.ripa-chao {
  height: 23%;
  overflow: hidden;
  background: #5E4631;
  perspective: 70vh;
  perspective-origin: 50% -30%;
}
.ripa-chao::before {
  content: "";
  position: absolute;
  left: -70%;
  right: -70%;
  top: 0;
  height: 320%;
  background: url('../img/texturas/cena/piso-carvalho-americano.jpg') 50% 0 / 44vh auto repeat;
  transform: rotateX(72deg);
  transform-origin: 50% 0;
}
.ripa-chao::after {
  content: "";
  position: absolute;
  inset: 0;
  background:
    linear-gradient(180deg, rgba(24, 16, 9, 0.46) 0%, rgba(24, 16, 9, 0.08) 38%, rgba(24, 16, 9, 0.3) 100%),
    radial-gradient(70% 120% at 50% 0%, rgba(255, 236, 200, 0.18) 0%, rgba(255, 236, 200, 0) 70%);
}
.ripa-painel {
  top: auto;
  bottom: calc(23% + clamp(20px, 2.8vh, 30px));
  transform: translateX(-50%);
  width: min(64vw, 820px);
  height: calc(68% - clamp(20px, 2.8vh, 30px));
}
.ripa-bruma {
  background: radial-gradient(closest-side, rgba(231, 223, 211, 0.96) 0%, rgba(231, 223, 211, 0.7) 46%, rgba(231, 223, 211, 0) 100%);
}

.ripa-luzes {
  background:
    radial-gradient(90% 60% at 50% 0%, rgba(210, 150, 80, 0.16) 0%, rgba(210, 150, 80, 0) 70%),
    linear-gradient(180deg, #221A13 0%, #17110C 100%);
}
.luz-cabeca p { color: #D6C8B6; }
.luz-parede {
  --pad-y: clamp(26px, 4vw, 48px);
  --pad-x: clamp(20px, 6vw, 84px);
  --chao: clamp(54px, 8vw, 104px);
  --rodape: clamp(12px, 1.6vw, 20px);
  padding: var(--pad-y) var(--pad-x) calc(var(--chao) + var(--rodape));
  border-radius: 6px;
  background:
    radial-gradient(90% 80% at calc(var(--luzx) * 100%) 0%, rgba(255, 238, 208, 0.6) 0%, rgba(255, 238, 208, 0) 64%),
    url('../img/texturas/cena/reboco.png') 0 0 / 420px 420px,
    linear-gradient(180deg, #D3C8B9 0%, #C2B6A6 100%);
  background-blend-mode: normal, soft-light, normal;
  box-shadow: 0 30px 60px rgba(0, 0, 0, 0.45);
}
.luz-parede::before {
  content: "";
  position: absolute;
  left: 0;
  right: 0;
  bottom: var(--chao);
  height: var(--rodape);
  z-index: 1;
  background: linear-gradient(180deg, #FFFDF8 0%, #F0EBE2 50%, #D9D1C5 100%);
  box-shadow: 0 5px 10px rgba(30, 22, 14, 0.35);
}
.luz-parede::after {
  content: "";
  position: absolute;
  left: 0;
  right: 0;
  bottom: 0;
  height: var(--chao);
  background:
    linear-gradient(180deg, rgba(20, 13, 7, 0.55) 0%, rgba(20, 13, 7, 0.15) 60%, rgba(20, 13, 7, 0.4) 100%),
    url('../img/texturas/cena/piso-carvalho-americano.jpg') center / 560px auto;
}
.luz-painel {
  height: clamp(240px, 38vw, 440px);
  background: #120D09;
  box-shadow: 0 18px 36px rgba(20, 13, 7, 0.45);
}
.luz-facho,
.luz-brilho { bottom: calc(var(--chao) + var(--rodape)); }
.luz-painel .ripa::before { opacity: calc(0.55 * clamp(0.14, calc((var(--cx) - var(--luzx)) * 2.4), 1)); }
.luz-painel .ripa::after { opacity: calc(0.55 * clamp(0, calc((var(--luzx) - var(--cx)) * 2.4), 1)); }
.luz-leitura { color: #F2CB6E; }
.luz-cores > b { color: #BBAC98; }
.luz-cor {
  width: 46px;
  height: 46px;
  border-radius: 6px;
  border-color: rgba(255, 255, 255, 0.28);
  background-size: 300% auto;
}
.luz-nota { color: #AE9F8E; }

@media (max-width: 720px) {
  .ripa-parede { inset: 0 0 34% 0; }
  .ripa-rodape { bottom: 34%; }
  .ripa-chao { height: 34%; }
  .ripa-painel { width: 84vw; bottom: calc(34% + clamp(20px, 2.8vh, 30px)); height: 46%; }
  .ripa-bruma, .ripa-t1 { top: 40%; }
  .luz-cor { width: 40px; height: 40px; }
}


/* ==========================================================================
   CARTÕES DE CATEGORIA, fotos recortadas
   A foto do produto fica inteira sobre o mesmo fundo de estúdio das páginas
   de produto; o texto do cartão continua sobre a faixa escura de baixo.
   ========================================================================== */
.cat-card-bg { background: var(--estudio); }
.cat-card { min-height: 350px; }
.cat-card-bg img {
  position: absolute;
  left: 50%;
  top: 29%;
  width: 70%;
  height: 44%;
  object-fit: contain;
  transform: translate(-50%, -50%);
  filter: var(--sombra-produto, drop-shadow(0 14px 18px rgba(40, 34, 24, 0.22)));
}
.cat-card::after { background: linear-gradient(180deg, rgba(24, 30, 46, 0) 50%, rgba(24, 30, 46, 0.78) 64%, rgba(24, 30, 46, 0.95) 100%); }
.cat-card:hover .cat-card-bg { transform: scale(1.04); }


/* Manta: a conta de luz e a fonte dos números, logo abaixo dos três cartões */
.manta-conta { max-width: 68ch; margin: 34px auto 0; text-align: center; }
.manta-conta p { color: var(--text, #3A4256); line-height: 1.7; }
.manta-conta strong { color: var(--navy); }
.manta-conta .manta-fonte { margin-top: 12px; font-size: 0.82rem; color: #6B7285; }


/* ==========================================================================
   MARCAS: faixa e página
   Logos num tom só (navy), rodando devagar na página inicial. Parado para
   quem pediu menos movimento, e parado sob o mouse para dar tempo de clicar.
   ========================================================================== */
.marcas-faixa { padding-bottom: clamp(40px, 6vw, 70px); }
.marcas-trilho {
  overflow: hidden;
  padding: 10px 0;
  -webkit-mask-image: linear-gradient(90deg, transparent 0, #000 9%, #000 91%, transparent 100%);
  mask-image: linear-gradient(90deg, transparent 0, #000 9%, #000 91%, transparent 100%);
}
.marcas-fita {
  display: flex;
  align-items: center;
  gap: clamp(36px, 6vw, 84px);
  width: max-content;
  animation: marcas-rodar 84s linear infinite;   /* 20 marcas desde 13/10 (eram 10 em 42s): mesma velocidade */
}
.marcas-trilho:hover .marcas-fita, .marcas-fita:focus-within { animation-play-state: paused; }
@keyframes marcas-rodar { to { transform: translateX(calc(-50% - clamp(36px, 6vw, 84px) / 2)); } }
.marca-logo {
  display: flex;
  align-items: center;
  justify-content: center;
  height: clamp(58px, 7vw, 76px);
  padding: 8px 6px;
  opacity: 0.72;
  transition: opacity 0.25s ease, transform 0.25s ease;
}
.marca-logo img { height: clamp(34px, 4.2vw, 48px); width: auto; max-width: 190px; object-fit: contain; }
.marca-logo:hover, .marca-logo:focus-visible { opacity: 1; transform: translateY(-2px); }
.marca-logo:focus-visible { outline: 2px solid var(--navy); outline-offset: 4px; }
.marca-escrita {
  font-family: var(--font-display);
  font-weight: 800;
  font-size: clamp(1.25rem, 2.2vw, 1.6rem);
  letter-spacing: -0.01em;
  color: var(--navy);
  white-space: nowrap;
}
.marcas-todas { margin-top: 18px; text-align: center; }
.marcas-todas a { font-family: var(--font-mono); font-size: 0.78rem; font-weight: 700; letter-spacing: 0.06em; text-transform: uppercase; color: var(--navy); }
@media (prefers-reduced-motion: reduce) {
  .marcas-trilho { -webkit-mask-image: none; mask-image: none; }
  .marcas-fita { animation: none; width: auto; flex-wrap: wrap; justify-content: center; }
  .marcas-fita [aria-hidden="true"] { display: none; }
}

.marca-topo { background: var(--estudio, #F0EEEA); padding: clamp(34px, 5vw, 60px) 0 clamp(34px, 5vw, 54px); }
.marca-topo .breadcrumb, .marca-topo .breadcrumb a { color: #6B7285; }
.marca-topo .breadcrumb a:hover { color: var(--navy); }
.marca-topo-logo.marca-escrita { display: inline-block; font-size: clamp(2.2rem, 6vw, 3.4rem); line-height: 1; }
.marca-topo h1 { font-size: clamp(1.8rem, 4vw, 2.8rem); margin: 10px 0 10px; text-wrap: balance; }
.marca-topo p { color: #4A5163; max-width: 62ch; line-height: 1.65; }
.marca-assinatura { margin-top: 18px; }
.marca-topo-logo { height: clamp(46px, 7vw, 76px); width: auto; max-width: 320px; object-fit: contain; }
.marca-topo .modelo-nav { margin-top: 22px; }
.marca-secao { margin-bottom: clamp(40px, 6vw, 64px); }
.marca-secao-cabeca { display: flex; flex-wrap: wrap; align-items: baseline; justify-content: space-between; gap: 6px 18px; margin-bottom: 18px; }
.marca-secao-cabeca h2 { font-size: clamp(1.3rem, 2.6vw, 1.8rem); }
.marca-secao-cabeca a { font-size: 0.9rem; color: var(--navy); text-decoration: underline; text-underline-offset: 3px; }
.marca-outras { border-top: 1px solid rgba(40, 50, 75, 0.12); padding-top: 28px; }
.marca-outras h2 { font-size: 1.1rem; margin-bottom: 14px; }
.marca-chips { display: flex; flex-wrap: wrap; gap: 8px; }
.marca-chips a { padding: 8px 14px; border: 1.5px solid rgba(40, 50, 75, 0.25); border-radius: 4px; color: var(--navy); font-weight: 600; font-size: 0.9rem; }
.marca-chips a:hover, .marca-chips a[aria-current="page"] { border-color: var(--navy); background: var(--navy); color: #FFFFFF; }
.marca-vitrine { display: grid; grid-template-columns: repeat(auto-fill, minmax(230px, 1fr)); gap: 18px; }
.marca-cartao {
  display: grid;
  gap: 8px;
  align-content: start;
  padding: 26px 22px;
  border: 1px solid rgba(40, 50, 75, 0.12);
  border-radius: var(--radius, 8px);
  background: #FFFFFF;
  color: var(--navy);
  transition: transform 0.25s ease, box-shadow 0.25s ease;
}
.marca-cartao:hover { transform: translateY(-3px); box-shadow: 0 16px 34px rgba(40, 50, 75, 0.12); }
.marca-cartao-logo { height: 46px; width: auto; max-width: 100%; object-fit: contain; justify-self: start; margin-bottom: 8px; }
.marca-cartao span { font-size: 0.9rem; color: #5A6275; }
.marca-cartao b { font-family: var(--font-mono); font-size: 0.78rem; letter-spacing: 0.04em; }


/* ==========================================================================
   MAIS VENDIDOS, OBRAS E NORMAS
   ========================================================================== */
.vendidos-grade { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 20px; }
.vendido .product-photo { position: relative; }
.vendido-selo {
  position: absolute; top: 12px; left: 12px; z-index: 2;
  padding: 5px 10px; border-radius: 3px;
  background: var(--yellow); color: var(--navy);
  font-family: var(--font-mono); font-size: 0.66rem; font-weight: 700; letter-spacing: 0.06em; text-transform: uppercase;
}
.vendido-txt { color: #5A6275; font-size: 0.92rem; line-height: 1.55; margin: 4px 0 14px; }
.vendido-dupla { display: flex; align-items: center; justify-content: center; gap: 6%; }
.vendido-dupla img { width: 44%; height: auto; max-height: 78%; object-fit: contain; }
@media (max-width: 1040px) { .vendidos-grade { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (max-width: 560px) { .vendidos-grade { grid-template-columns: 1fr; } }

.obras-faixa { overflow: hidden; }
.obras-trilho { overflow: hidden; padding: 8px 0 4px; }
.obras-fita { display: flex; width: max-content; animation: obras-rodar 70s linear infinite; }
.obras-trilho:hover .obras-fita, .obras-fita:focus-within { animation-play-state: paused; }
@keyframes obras-rodar { to { transform: translateX(-50%); } }
.obra {
  flex: none; width: clamp(220px, 24vw, 280px); margin: 0 18px 0 0;
  border-radius: 6px; overflow: hidden; background: #FFFFFF;
  box-shadow: 0 14px 30px rgba(40, 50, 75, 0.12);
}
.obra img { display: block; width: 100%; aspect-ratio: 4 / 5; height: auto; object-fit: cover; }
.obra figcaption { padding: 12px 14px 14px; font-size: 0.88rem; color: var(--navy); font-weight: 600; line-height: 1.4; }
.obra-depo, .obra-nota {
  display: flex; flex-direction: column; justify-content: center; gap: 14px;
  aspect-ratio: 4 / 5.9; padding: 26px 24px; background: var(--navy); color: #FFFFFF;
}
.obra-depo p { font-family: var(--font-display); font-size: 1.15rem; line-height: 1.35; }
.obra-depo footer { font-size: 0.85rem; color: #C9CEDA; }
.obra-depo footer b { color: #FFFFFF; }
.obra-estrelas { color: var(--yellow); width: 110px; }
.obra-estrelas svg { width: 100%; height: auto; }
.obra-nota { background: var(--yellow); color: var(--navy); align-items: flex-start; }
.obra-nota .obra-estrelas { color: var(--navy); }
.obra-nota b { font-family: var(--font-display); font-size: 3.4rem; line-height: 1; }
.obra-nota em { font-style: normal; font-family: var(--font-mono); font-size: 0.74rem; font-weight: 700; letter-spacing: 0.06em; text-transform: uppercase; }
@media (prefers-reduced-motion: reduce) {
  .obras-trilho { overflow-x: auto; }
  .obras-fita { animation: none; }
  .obras-fita [aria-hidden="true"] { display: none; }
}

.normas-grade { display: grid; gap: clamp(22px, 3vw, 32px); max-width: 860px; }
.norma { padding: clamp(22px, 3vw, 30px); border: 1px solid rgba(40, 50, 75, 0.12); border-radius: 6px; background: #FFFFFF; scroll-margin-top: 110px; }
.norma h2 { font-size: clamp(1.3rem, 2.4vw, 1.7rem); margin-bottom: 14px; }
.norma-lista { list-style: none; margin: 0 0 16px; padding: 0; display: grid; gap: 12px; }
.norma-lista li { display: grid; grid-template-columns: minmax(150px, 190px) 1fr; gap: 4px 18px; padding-bottom: 12px; border-bottom: 1px solid rgba(40, 50, 75, 0.08); }
.norma-lista b { font-family: var(--font-mono); font-size: 0.82rem; color: var(--navy); }
.norma-lista span { color: #4A5163; line-height: 1.6; }
.norma-pratica { padding: 12px 16px; border-left: 3px solid var(--yellow); background: #FAF8F2; color: #3A4256; line-height: 1.6; }
.norma-aviso { color: #5A6275; line-height: 1.6; }
.norma-aviso a { color: var(--navy); text-decoration: underline; }
@media (max-width: 560px) { .norma-lista li { grid-template-columns: 1fr; } }


/* LOGOS: navy parado, cor original sob o mouse. Logo oficial claro (branco, dourado)
   ganha um bloco escuro atrás, na hora da cor, para não sumir no fundo claro. */
.marca-logo.tem-cor, .marca-troca { position: relative; display: inline-grid; place-items: center; }
.marca-logo.tem-cor img, .marca-troca img { grid-area: 1 / 1; position: relative; z-index: 1; transition: opacity 0.3s ease; }
.marca-cor { opacity: 0; }
.marca-logo.tem-cor:hover .marca-mono, .marca-logo.tem-cor:focus-visible .marca-mono,
.marca-cartao:hover .marca-mono, .marca-cartao:focus-visible .marca-mono { opacity: 0; }
.marca-logo.tem-cor:hover .marca-cor, .marca-logo.tem-cor:focus-visible .marca-cor,
.marca-cartao:hover .marca-cor, .marca-cartao:focus-visible .marca-cor { opacity: 1; }
.tem-fundo::before {
  content: "";
  position: absolute;
  inset: -10px -16px;
  border-radius: 6px;
  background: var(--fundo, #1D2230);
  opacity: 0;
  transition: opacity 0.3s ease;
}
.marca-logo.tem-fundo:hover::before, .marca-logo.tem-fundo:focus-visible::before,
.marca-cartao:hover .tem-fundo::before, .marca-cartao:focus-visible .tem-fundo::before,
.tem-fundo.fundo-fixo::before { opacity: 1; }
.marca-logo.tem-cor:hover { opacity: 1; }
.marca-topo-logo-caixa { position: relative; display: inline-block; }
.marca-topo-logo-caixa.tem-fundo { margin: 10px 16px; }
.marca-topo-logo-caixa img { position: relative; z-index: 1; display: block; }
.marca-cartao .marca-troca { justify-self: start; margin-bottom: 8px; }
.marca-cartao .marca-troca .marca-cartao-logo { margin-bottom: 0; }
.marca-cartao .tem-fundo::before { inset: -8px -12px; }


/* ==========================================================================
   RODADA 3: página inicial, menus, manta
   ========================================================================== */
/* a fonte dos rótulos pequenos, botões e breadcrumb: sans técnica e legível,
   no lugar da monoespaçada, que não passava autoridade */
:root { --font-mono: 'IBM Plex Sans', 'Source Sans 3', system-ui, sans-serif; }

/* ícones dos diferenciais: estavam navy sobre a bolinha navy */
.diff-icon .ico { color: var(--yellow); }

/* menu de produtos em grupos */
.submenu.submenu-grupos { min-width: 480px; padding: 12px; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 6px 14px; }
.has-submenu:hover .submenu.submenu-grupos, .has-submenu:focus-within .submenu.submenu-grupos { display: grid; }
.submenu-grupo { display: flex; flex-direction: column; padding: 4px 0; }
.submenu-titulo {
  padding: 6px 14px 4px;
  font-family: var(--font-mono);
  font-size: 0.68rem;
  font-weight: 600;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: #8A6600;
}
.submenu.submenu-grupos a { padding: 7px 14px; }

/* categorias: a foto do cartão troca sozinha entre os produtos da linha.
   A antiga sai inteira (0,35 s) antes da nova entrar (0,55 s): são recortes
   sem fundo e não podem aparecer um por cima do outro. Tempos no home.js. */
.cat-card-bg img {
  transition: opacity 1.1s cubic-bezier(0.22, 0.61, 0.36, 1),
              transform 1.1s cubic-bezier(0.22, 0.61, 0.36, 1),
              filter 1.1s cubic-bezier(0.22, 0.61, 0.36, 1);
}
/* sai perdendo o foco e se afastando; entra ganhando foco e assentando */
.cat-card-bg img.cat-img-saindo {
  opacity: 0;
  transform: translate(-50%, -50%) scale(0.95);
  filter: var(--sombra-produto, drop-shadow(0 14px 18px rgba(40, 34, 24, 0.22))) blur(7px);
  transition: opacity 0.75s cubic-bezier(0.55, 0, 0.45, 1),
              transform 0.75s cubic-bezier(0.55, 0, 0.45, 1),
              filter 0.75s cubic-bezier(0.55, 0, 0.45, 1);
}
.cat-card-bg img.cat-img-nova {
  opacity: 0;
  transform: translate(-50%, -48%) scale(1.04);
  filter: var(--sombra-produto, drop-shadow(0 14px 18px rgba(40, 34, 24, 0.22))) blur(8px);
}
.cat-card-bg img.cat-img-nova.is-vista {
  opacity: 1;
  transform: translate(-50%, -50%);
  filter: var(--sombra-produto, drop-shadow(0 14px 18px rgba(40, 34, 24, 0.22))) blur(0);
}

/* mais vendidos rodando */
.vendidos-trilho {
  overflow: hidden;
  padding: 10px 0 18px;
  -webkit-mask-image: linear-gradient(90deg, transparent 0, #000 5%, #000 95%, transparent 100%);
  mask-image: linear-gradient(90deg, transparent 0, #000 5%, #000 95%, transparent 100%);
}
.vendidos-fita { display: flex; width: max-content; animation: vendidos-rodar 80s linear infinite; }
.vendidos-trilho:hover .vendidos-fita, .vendidos-fita:focus-within { animation-play-state: paused; }
@keyframes vendidos-rodar { to { transform: translateX(-50%); } }
.vendidos-fita .vendido { flex: none; width: clamp(230px, 22vw, 270px); margin-right: 20px; }
.vendidos-fita .vendido .product-body { display: flex; flex-direction: column; }
.vendidos-fita .vendido .btn { margin-top: auto; }
@media (prefers-reduced-motion: reduce) {
  .vendidos-trilho { overflow-x: auto; -webkit-mask-image: none; mask-image: none; }
  .vendidos-fita { animation: none; }
  .vendidos-fita [aria-hidden="true"] { display: none; }
}

/* vamos conversar */
.conversa-grade { display: grid; grid-template-columns: minmax(0, 1.05fr) minmax(0, 1fr); gap: clamp(28px, 5vw, 64px); align-items: center; }
.conversa-foto { position: relative; margin: 0; border-radius: 8px; overflow: hidden; box-shadow: 0 24px 50px rgba(40, 50, 75, 0.18); }
.conversa-foto img { display: block; width: 100%; height: auto; aspect-ratio: 16 / 10; object-fit: cover; }
.conversa-foto figcaption {
  position: absolute; left: 16px; bottom: 16px;
  padding: 10px 14px; border-radius: 4px;
  background: rgba(29, 34, 48, 0.88); color: #FFFFFF; font-size: 0.88rem; line-height: 1.4;
}
.conversa-foto figcaption b { display: block; font-family: var(--font-mono); font-size: 0.68rem; letter-spacing: 0.1em; text-transform: uppercase; color: var(--yellow); }
.conversa-txt h2 { font-size: clamp(1.7rem, 3.4vw, 2.5rem); margin: 10px 0 12px; text-wrap: balance; }
.conversa-txt > p { color: #4A5163; line-height: 1.65; max-width: 54ch; }
.conversa-caminhos { list-style: none; margin: 22px 0 0; padding: 0; display: grid; gap: 10px; }
.conversa-caminho {
  display: flex; align-items: center; gap: 14px;
  padding: 13px 16px; border: 1px solid var(--border); border-radius: 6px; background: #FFFFFF; color: var(--navy);
  transition: border-color 0.2s ease, transform 0.2s ease, box-shadow 0.2s ease;
}
.conversa-caminho:hover { border-color: var(--navy); transform: translateX(3px); box-shadow: 0 10px 24px rgba(40, 50, 75, 0.1); }
.conversa-caminho .ico { width: 26px; height: 26px; flex: none; color: var(--navy); }
.conversa-caminho b { display: block; font-size: 1rem; }
.conversa-caminho em { display: block; font-style: normal; font-size: 0.86rem; color: #5A6275; }
.conversa-caminho.is-whats { background: var(--navy); border-color: var(--navy); color: #FFFFFF; }
.conversa-caminho.is-whats .ico { color: #25D366; }
.conversa-caminho.is-whats em { color: #C9CEDA; }
.conversa-bonus { display: flex; align-items: center; gap: 10px; margin-top: 16px; font-size: 0.9rem; color: #4A5163; }
.conversa-bonus .ico { color: #C99700; width: 20px; height: 20px; flex: none; }
.origem-loja .conversa-bonus { display: none; }
@media (max-width: 900px) { .conversa-grade { grid-template-columns: 1fr; } }

/* manta: a frase embaixo do duelo vira faixa do vermelho ao azul, não um bloco preto */
.manta-legend {
  max-width: none;
  margin: 0;
  padding: clamp(18px, 3vw, 26px) 24px;
  background: linear-gradient(90deg, #6E1A0B 0%, #3A1B24 48%, #0E2D49 100%);
  color: #FFFFFF;
  font-size: clamp(1.1rem, 2.4vw, 1.5rem);
  font-weight: var(--display-weight);
  letter-spacing: var(--display-tracking);
  text-wrap: balance;
}

/* manta: onde ela entra na obra, lido em Z */
.manta-z {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(0, 1.05fr);
  grid-template-areas: "a b" "c d";
  gap: clamp(30px, 5vw, 64px) clamp(28px, 5vw, 72px);
  align-items: center;
}
.manta-z-a { grid-area: a; }
.manta-z-b { grid-area: b; margin: 0; }
.manta-z-c { grid-area: c; }
.manta-z-d { grid-area: d; }
.manta-z-a h2 { font-size: clamp(2rem, 4.8vw, 3.5rem); line-height: 1.02; margin: 12px 0 16px; text-wrap: balance; }
.manta-z-a p { font-size: clamp(1.02rem, 1.6vw, 1.2rem); line-height: 1.65; color: #4A5163; max-width: 46ch; }
.manta-z-b img { display: block; width: 100%; height: auto; border-radius: 8px; box-shadow: 0 26px 56px rgba(40, 50, 75, 0.22); }
.manta-z-b figcaption { margin-top: 10px; font-size: 0.86rem; color: #5A6275; }
.manta-z-c { list-style: none; margin: 0; padding: 0; counter-reset: passo; display: grid; gap: 18px; }
.manta-z-c li { counter-increment: passo; display: grid; grid-template-columns: auto 1fr; gap: 2px 18px; align-items: baseline; }
.manta-z-c li::before {
  content: counter(passo, decimal-leading-zero);
  grid-row: span 2;
  font-family: var(--font-display);
  font-weight: 800;
  font-size: clamp(2.2rem, 4vw, 3rem);
  line-height: 1;
  color: #C99700;
}
.manta-z-c b { font-family: var(--font-display); font-size: clamp(1.15rem, 2vw, 1.4rem); color: var(--navy); }
.manta-z-c span { color: #4A5163; line-height: 1.6; font-size: 1.02rem; }
.manta-z-d { padding: clamp(24px, 3.4vw, 36px); border-radius: 8px; background: linear-gradient(135deg, #1D2230 0%, #0E2D49 100%); color: #FFFFFF; }
.manta-z-d h3 { font-size: clamp(1.3rem, 2.4vw, 1.75rem); line-height: 1.2; margin-bottom: 10px; color: #FFFFFF; }
.manta-z-d p { color: #C9CEDA; line-height: 1.6; margin-bottom: 20px; }
.manta-z-kit { display: inline-block; margin-left: 16px; color: #FFC40E; font-weight: 600; }
@media (max-width: 900px) {
  .manta-z { grid-template-columns: 1fr; grid-template-areas: "a" "b" "c" "d"; }
  .manta-z-kit { margin: 14px 0 0; display: block; }
}

/* a fita: o rolo gira enquanto o cliente rola a página */
.fita-rolo::after {
  content: "";
  position: absolute;
  inset: 0;
  -webkit-mask: url('../img/novas/fita-rolo.png?v=2') center / contain no-repeat;
  mask: url('../img/novas/fita-rolo.png?v=2') center / contain no-repeat;
  background: linear-gradient(180deg, rgba(255, 255, 255, 0) 0%, rgba(255, 255, 255, 0.6) 46%, rgba(255, 255, 255, 0) 62%) 0 -120% / 100% 55% no-repeat;
  opacity: 0;
  transition: opacity 0.2s ease;
}
.fita-cena.rolando .fita-rolo::after { opacity: 1; animation: fita-brilho 0.7s linear infinite; }
.fita-cena.rolando .fita-rolo { animation: fita-balanco 0.35s ease-in-out infinite alternate; }
@keyframes fita-brilho { from { background-position: 0 -120%; } to { background-position: 0 240%; } }
@keyframes fita-balanco { from { transform: translate(-50%, -30%) rotate(-0.6deg); } to { transform: translate(-50%, -31%) rotate(0.6deg); } }
@media (prefers-reduced-motion: reduce) { .fita-cena.rolando .fita-rolo, .fita-cena.rolando .fita-rolo::after { animation: none; } }


/* RODADA 3b: sem a faixa preta embaixo da frase da manta, e os rótulos pequenos
   (eyebrow) em caixa alta, com peso e respiro, na fonte nova */
.manta-duel { padding-bottom: 0; }
.eyebrow {
  font-weight: 600;
  font-size: 0.74rem;
  letter-spacing: 0.14em;
  text-transform: uppercase;
}
.manta-dados .eyebrow, .manta-z-a .eyebrow { color: #9A7300; }


/* ==========================================================================
   COMO COMPRAR: pagamento, entrega, instalação, garantia e perguntas.
   Bloco comum, escrito nas páginas por ferramentas/blocos_comuns.py.
   ========================================================================== */
.compra { background: var(--off-white); }
.compra-grade {
  list-style: none;
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  background: var(--white);
  border: 1px solid var(--border);
  border-radius: var(--radius);
  overflow: hidden;
}
.compra-item { padding: 28px 24px; border-left: 1px solid var(--border); }
.compra-item:first-child { border-left: 0; }
.compra-icone {
  display: inline-flex; align-items: center; justify-content: center;
  width: 44px; height: 44px; margin-bottom: 14px;
  border-radius: 10px; background: var(--navy); color: var(--yellow);
}
.compra-icone .ico { width: 22px; height: 22px; }
.compra-item h3 { font-size: 1.05rem; margin-bottom: 6px; }
.compra-item p { color: #4A5163; font-size: 0.93rem; line-height: 1.55; }
/* calcule o frete (frete.js, 16/10/2026) */
.frete:empty { display: none; }
.frete-calc {
  margin-top: 18px; padding: 22px 24px; background: var(--white);
  border: 1px solid var(--border); border-radius: var(--radius);
}
.frete-rot { display: block; font-weight: 800; color: var(--navy); margin-bottom: 10px; }
.frete-linha { display: flex; flex-wrap: wrap; gap: 10px; }
.frete-linha input {
  flex: 1 1 240px; min-width: 0; font: inherit; padding: 11px 14px;
  border: 1px solid #C9CCD3; border-radius: 8px; background: var(--white); color: var(--navy);
}
.frete-linha input:focus { outline: 2px solid var(--yellow); outline-offset: 1px; border-color: var(--navy); }
.frete-gps {
  font: inherit; font-weight: 700; font-size: 0.9rem; padding: 11px 16px; cursor: pointer;
  border: 1px solid var(--navy); border-radius: 8px; background: transparent; color: var(--navy);
}
.frete-gps:hover { background: var(--navy); color: var(--white); }
.frete-res { margin-top: 12px; color: #2A3142; font-size: 1rem; line-height: 1.5; }
.frete-res:empty { display: none; }
.frete-obs { display: block; margin-top: 2px; color: #5A6478; font-size: 0.85rem; }
.frete-fora { margin-top: 10px; color: #5A6478; font-size: 0.88rem; }
.frete-fora a, .frete-res a { color: var(--navy); font-weight: 700; text-decoration: underline; }
.compra-faq { max-width: 820px; margin: 52px auto 0; }
.compra-faq-titulo { font-size: 1.3rem; text-align: center; margin-bottom: 16px; }
.compra-faq details {
  background: var(--white); border: 1px solid var(--border); border-radius: 10px;
  margin-bottom: 10px; transition: border-color 0.2s ease;
}
.compra-faq details[open] { border-color: #C9CCD3; }
.compra-faq summary {
  position: relative; cursor: pointer; list-style: none;
  padding: 17px 54px 17px 20px; font-weight: 700; color: var(--navy);
}
.compra-faq summary::-webkit-details-marker { display: none; }
.compra-faq summary::after {
  content: ""; position: absolute; right: 22px; top: 50%;
  width: 9px; height: 9px;
  border-right: 2px solid var(--navy); border-bottom: 2px solid var(--navy);
  transform: translateY(-70%) rotate(45deg); transition: transform 0.25s ease;
}
.compra-faq details[open] summary::after { transform: translateY(-25%) rotate(-135deg); }
.compra-faq summary:focus-visible { outline: 2px solid var(--navy); outline-offset: 2px; border-radius: 10px; }
.compra-faq details p { padding: 0 20px 18px; color: #4A5163; line-height: 1.6; }
.compra-faq details a { color: var(--navy); font-weight: 700; text-decoration: underline; text-underline-offset: 2px; }
@media (max-width: 900px) {
  .compra-grade { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .compra-item:nth-child(3) { border-left: 0; }
  .compra-item:nth-child(n+3) { border-top: 1px solid var(--border); }
}
@media (max-width: 560px) {
  .compra-grade { grid-template-columns: 1fr; }
  .compra-item { border-left: 0; padding: 22px 20px; }
  .compra-item + .compra-item { border-top: 1px solid var(--border); }
}


/* ==========================================================================
   BUSCA DO CATÁLOGO (assets/js/busca.js)
   ========================================================================== */
.busca-botao {
  display: inline-flex; align-items: center; justify-content: center;
  width: 42px; height: 42px; margin-left: 6px; flex: none;
  border: 1px solid var(--border); border-radius: 8px; background: var(--white);
  color: var(--navy); cursor: pointer; transition: border-color 0.2s ease, background 0.2s ease;
}
.busca-botao:hover { border-color: var(--navy); background: var(--off-white); }
.busca-botao .ico { width: 20px; height: 20px; }
@media (max-width: 1040px) { .busca-botao { display: none; } }

.busca-painel { position: fixed; inset: 0; z-index: 1000; }
.busca-painel[hidden] { display: none; }
.busca-fundo {
  position: absolute; inset: 0; background: rgba(20, 25, 38, 0.55);
  opacity: 0; transition: opacity 0.18s ease;
}
.busca-caixa {
  position: relative; width: min(680px, calc(100% - 32px)); margin: 9vh auto 0;
  background: var(--white); border-radius: 14px; box-shadow: 0 30px 70px rgba(15, 20, 32, 0.35);
  overflow: hidden; opacity: 0; transform: translateY(-10px);
  transition: opacity 0.18s ease, transform 0.18s ease;
}
.busca-painel.aberto .busca-fundo { opacity: 1; }
.busca-painel.aberto .busca-caixa { opacity: 1; transform: none; }
.busca-campo {
  display: flex; align-items: center; gap: 12px;
  padding: 14px 16px; border-bottom: 1px solid var(--border); color: var(--navy);
}
.busca-campo > .ico { width: 22px; height: 22px; flex: none; }
.busca-campo input {
  flex: 1; min-width: 0; border: 0; outline: 0; background: transparent;
  font: inherit; font-size: 1.1rem; color: var(--navy);
}
.busca-campo input::-webkit-search-cancel-button { display: none; }
.busca-fechar {
  flex: none; border: 1px solid var(--border); border-radius: 6px; background: var(--off-white);
  font-family: var(--font-mono); font-size: 0.72rem; padding: 5px 8px; color: var(--gray); cursor: pointer;
}
.busca-resultados { max-height: min(62vh, 560px); overflow-y: auto; padding: 8px; }
.busca-item {
  display: flex; align-items: center; gap: 14px; padding: 9px 10px;
  border-radius: 9px; color: var(--navy); text-decoration: none;
}
.busca-item:hover, .busca-item.marcado { background: var(--off-white); }
.busca-item.marcado { box-shadow: inset 0 0 0 1.5px var(--navy); }
.busca-miniatura {
  flex: none; width: 54px; height: 54px; border-radius: 8px;
  background: var(--estudio, #F1EEE8); display: flex; align-items: center; justify-content: center; overflow: hidden;
}
.busca-miniatura img { width: 88%; height: 88%; object-fit: contain; }
.busca-miniatura-pagina { background: var(--navy); color: var(--yellow); }
.busca-miniatura-pagina .ico { width: 22px; height: 22px; }
.busca-texto { display: flex; flex-direction: column; min-width: 0; }
.busca-texto b { font-size: 0.98rem; line-height: 1.3; }
.busca-texto small { color: var(--gray); font-size: 0.84rem; line-height: 1.35; }
.busca-dica, .busca-vazio { padding: 16px 12px 18px; color: #4A5163; line-height: 1.6; }
.busca-dica button {
  margin: 6px 6px 0 0; padding: 6px 12px; border: 1px solid var(--border); border-radius: 6px;
  background: var(--white); font: inherit; font-size: 0.9rem; color: var(--navy); cursor: pointer;
}
.busca-dica button:hover { border-color: var(--navy); }
.busca-vazio a { color: var(--navy); font-weight: 700; text-decoration: underline; }
html.busca-aberta { overflow: hidden; }
.busca-mnav {
  display: flex; align-items: center; gap: 10px; width: calc(100% - 32px); margin: 4px 16px 10px;
  padding: 12px 14px; border: 1px solid var(--border); border-radius: 8px; background: var(--off-white);
  font: inherit; color: #4A5163; text-align: left; cursor: pointer;
}
.busca-mnav .ico { width: 18px; height: 18px; color: var(--navy); flex: none; }
@media (max-width: 600px) { .busca-caixa { margin-top: 12px; } .busca-resultados { max-height: calc(100vh - 110px); } }
@media (prefers-reduced-motion: reduce) { .busca-fundo, .busca-caixa { transition: none; } }


/* ==========================================================================
   AVISO DE COOKIES (assets/js/medicao.js; só aparece com medição configurada)
   ========================================================================== */
.cookies-aviso {
  position: fixed; left: 16px; bottom: 16px; z-index: 900; max-width: 440px;
  padding: 16px 18px; border-radius: 12px; background: var(--navy); color: #E7EAF0;
  box-shadow: 0 18px 40px rgba(15, 20, 32, 0.3); transition: opacity 0.25s ease, transform 0.25s ease;
}
.cookies-aviso.saindo { opacity: 0; transform: translateY(10px); }
.cookies-aviso p { font-size: 0.9rem; line-height: 1.5; }
.cookies-aviso a { color: var(--yellow); text-decoration: underline; }
.cookies-botoes { display: flex; gap: 10px; margin-top: 12px; flex-wrap: wrap; }
.cookies-botoes .btn { padding: 11px 18px; }
.cookies-nao { background: transparent; color: var(--white); border: 1.5px solid rgba(255, 255, 255, 0.5); }
@media (max-width: 560px) { .cookies-aviso { left: 10px; right: 10px; bottom: 10px; max-width: none; } }

/* logo J.A Revestimentos (2026-09-28): mais comprido que o antigo. Nunca espremer;
   no celular o botão amarelo do topo sai (o verde do WhatsApp fica sempre na tela). */
.brand { flex-shrink: 0; }
.brand img { object-fit: contain; }
@media (max-width: 480px) {
  .site-header .nav-cta { display: none; }
  .brand img { height: 30px; }
}

/* selo sempre na frente da foto (a foto com filtro e zoom criava uma camada por cima dele) */
.badge { z-index: 3; }


/* ==========================================================================
   GRADE DE PRODUTOS MAIS CHEIA (2026-09-28: "as páginas parecem vazias")
   Uma grade por seção, quatro colunas no computador, duas no celular; a marca
   vai escrita no cartão em vez de um título por marca.
   ========================================================================== */
.product-grid { grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 20px; }
.modelo-secao .product-grid { margin-top: 18px; }
.modelo-titulo { margin: 40px 0 0; padding-top: 20px; }
.card-marca {
  font-family: var(--font-mono); font-size: 0.66rem; font-weight: 700;
  letter-spacing: 0.12em; text-transform: uppercase; color: #8A6600;
  margin-bottom: -6px;
}
.product-body { padding: 16px 18px 18px; gap: 10px; }
.product-body h3 { font-size: 0.98rem; }
.product-card .product-photo { aspect-ratio: 5 / 4; }
@media (max-width: 1100px) { .product-grid { grid-template-columns: repeat(3, minmax(0, 1fr)); } }
@media (max-width: 900px)  { .product-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (max-width: 600px) {
  .product-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 12px; }
  .product-body { padding: 12px 12px 14px; gap: 6px; }
  .product-body h3 { font-size: 0.9rem; }
  .product-card .spec-list { display: none; }
  .product-card .product-body > .btn { display: none; }
  .card-marca { font-size: 0.6rem; margin-bottom: -2px; }
  .product-photo { padding: 10px; }
}

/* botão do cartão numa linha só, agora que são quatro por fileira */
.product-card .product-body > .btn { font-size: 0.66rem; padding: 12px 12px; letter-spacing: 0.06em; margin-top: auto; }


/* ==========================================================================
   PÁGINA DE DÚVIDAS (duvidas.html; perguntas geradas por blocos_comuns.py)
   ========================================================================== */
.compra-mais { text-align: center; margin-top: 26px; }
.compra-mais a { color: var(--navy); font-weight: 700; text-decoration: underline; text-underline-offset: 3px; }
.duvidas-grade { display: grid; grid-template-columns: 230px minmax(0, 1fr); gap: 48px; align-items: start; }
.duvidas-atalhos { position: sticky; top: 110px; display: flex; flex-direction: column; gap: 4px; }
.duvidas-atalhos a {
  padding: 10px 14px; border-radius: 8px; border: 1px solid transparent;
  color: var(--navy); font-weight: 600; text-decoration: none;
}
.duvidas-atalhos a:hover { background: var(--off-white); border-color: var(--border); }
.duvidas-atalhos .duvidas-atalho-destaque {
  margin-top: 12px; background: var(--yellow); text-align: center;
  font-family: var(--font-mono); font-size: 0.72rem; letter-spacing: 0.08em; text-transform: uppercase;
}
.duvidas-atalhos .duvidas-atalho-destaque:hover { background: #E8AE00; border-color: transparent; }
.duvidas-lista.compra-faq { max-width: none; margin: 0; }
.duvidas-grupo { font-size: 1.25rem; margin: 36px 0 14px; scroll-margin-top: 120px; }
.duvidas-grupo:first-child { margin-top: 0; }
.pergunte { scroll-margin-top: 80px; }
.pergunte-caixa {
  max-width: 720px; margin: 0 auto; display: grid; gap: 14px;
  background: var(--white); border: 1px solid var(--border); border-radius: var(--radius);
  padding: 36px; box-shadow: var(--shadow);
}
.pergunte-caixa .section-eyebrow { margin-bottom: 0; }
.pergunte-caixa h2 { font-size: clamp(1.5rem, 3vw, 2rem); }
.pergunte-caixa > p { color: #4A5163; }
.pergunte-campo { display: grid; gap: 6px; font-weight: 600; color: var(--navy); }
.pergunte-campo small { font-weight: 400; color: var(--gray); }
.pergunte-campo input, .pergunte-campo textarea {
  font: inherit; font-weight: 400; padding: 12px 14px; color: var(--navy); background: var(--white);
  border: 1px solid #C9CCD3; border-radius: 8px; resize: vertical;
}
.pergunte-campo input:focus, .pergunte-campo textarea:focus { outline: 2px solid var(--navy); outline-offset: 1px; border-color: var(--navy); }
.pergunte-erro { color: #B42318; font-weight: 600; }
.pergunte-caixa .btn { justify-self: start; }
@media (max-width: 800px) {
  .duvidas-grade { grid-template-columns: 1fr; gap: 20px; }
  .duvidas-atalhos { position: static; flex-direction: row; flex-wrap: wrap; gap: 6px; }
  .duvidas-atalhos a { border-color: var(--border); padding: 8px 12px; font-size: 0.92rem; }
  .duvidas-atalhos .duvidas-atalho-destaque { margin-top: 0; }
  .pergunte-caixa { padding: 24px 18px; }
}

/* menu com "Dúvidas" e o logo J.A Revestimentos (2026-09-28): nenhum item quebra linha */
.main-nav > ul > li > a { white-space: nowrap; }
.main-nav > ul { gap: 22px; }
@media (min-width: 1041px) { .brand img { height: 30px; } .site-header .container { gap: 14px; } }
@media (max-width: 1240px) and (min-width: 1041px) { .main-nav > ul { gap: 16px; } .main-nav > ul > li > a { font-size: 0.86rem; } .busca-botao { width: 38px; height: 38px; margin-left: 2px; } }
@media (max-width: 1160px) and (min-width: 1041px) { .main-nav > ul { gap: 12px; } .main-nav > ul > li > a { font-size: 0.82rem; } .brand img { height: 28px; } .nav-cta { padding: 10px 11px; font-size: 0.64rem; } }
.nav-cta { white-space: nowrap; }
@media (min-width: 1241px) { .nav-cta { padding: 12px 16px; } }


/* ==========================================================================
   CALCULADORAS EM CARTÕES (calculadora.html; páginas calc-*.html)
   Gerado por ferramentas/calculadoras.py. Referência do Gustavo: trevodrywall.com.br.
   ========================================================================== */
.calc-grade {
  display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 22px;
}
.calc-cartao {
  display: flex; flex-direction: column; overflow: hidden;
  background: var(--white); border: 1px solid var(--border); border-radius: var(--radius);
  color: var(--navy); text-decoration: none;
  transition: transform 0.35s cubic-bezier(0.22, 0.61, 0.36, 1), box-shadow 0.35s ease, border-color 0.35s ease;
}
.calc-cartao:hover, .calc-cartao:focus-visible {
  transform: translateY(-4px); border-color: #C9CCD3; box-shadow: 0 22px 44px rgba(40, 50, 75, 0.14);
}
.calc-cartao:focus-visible { outline: 2px solid var(--navy); outline-offset: 3px; }
.calc-cartao-foto {
  position: relative; display: block; aspect-ratio: 4 / 3; overflow: hidden;
  background: var(--estudio, #F1EEE8);
}
.calc-cartao-foto img {
  position: absolute; inset: 9%; width: 82%; height: 82%; object-fit: contain;
  filter: var(--sombra-produto, drop-shadow(0 14px 18px rgba(40, 34, 24, 0.22)));
  transition: transform 0.6s cubic-bezier(0.22, 0.61, 0.36, 1);
}
.calc-cartao-foto-cheia img { inset: 0; width: 100%; height: 100%; object-fit: cover; filter: none; }
.calc-cartao:hover .calc-cartao-foto img { transform: scale(1.05); }
.calc-cartao-texto { display: flex; flex-direction: column; gap: 6px; padding: 18px 20px 20px; flex: 1; }
.calc-cartao-texto b {
  font-family: var(--font-display); font-weight: var(--display-weight); letter-spacing: var(--display-tracking);
  font-size: 1.2rem; line-height: 1.2;
}
.calc-cartao-texto small { color: #4A5163; font-size: 0.92rem; line-height: 1.5; }
.calc-cartao-texto em {
  margin-top: auto; padding-top: 10px; font-style: normal;
  font-family: var(--font-mono); font-size: 0.7rem; font-weight: 700; letter-spacing: 0.1em; text-transform: uppercase;
  color: #8A6600;
}
.calc-topo { background: var(--navy); color: var(--white); padding: 44px 0 40px; }
.calc-topo .breadcrumb, .calc-topo .breadcrumb a { color: #C9CEDA; }
.calc-topo .breadcrumb a:hover { color: var(--yellow); }
.calc-topo h1 {
  font-family: var(--font-display); font-weight: var(--display-weight); letter-spacing: var(--display-tracking);
  font-size: clamp(1.8rem, 4vw, 2.8rem); margin: 10px 0 8px; color: var(--white);
}
.calc-topo p { color: #DCE0E8; max-width: 60ch; }
.calc-voltar { display: inline-block; margin-top: 16px; color: var(--yellow); font-weight: 700; text-decoration: none; }
.calc-voltar:hover { text-decoration: underline; }
@media (max-width: 900px) { .calc-grade { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 14px; } }
@media (max-width: 560px) {
  .calc-grade { grid-template-columns: 1fr; }
  .calc-cartao { flex-direction: row; }
  .calc-cartao-foto { width: 38%; aspect-ratio: auto; flex: none; }
  .calc-cartao-texto { padding: 14px 16px; }
  .calc-cartao-texto b { font-size: 1.05rem; }
  .calc-cartao-texto small { font-size: 0.86rem; }
}


/* ==========================================================================
   REGRAS DE LEITURA (2026-09-30)
   Referência do Gustavo: Forros-Plano/referencias/leitura-dpamarketing.
   Ninguém lê, todo mundo passa o olho (padrão Z e F). A mente busca o grande
   + o pequeno, o claro + o escuro, o curto + o mais curto; evita texto demais
   e imagem sem contraste. Regra um: espaço em branco. Regra dois: uma fonte
   só, com a hierarquia feita pelo tamanho e pelo peso.
   ========================================================================== */

/* regra dois: Archivo em tudo (antes eram Archivo, Source Sans 3 e IBM Plex Sans) */
:root {
  --font-text: 'Archivo', system-ui, sans-serif;
  --font-mono: 'Archivo', system-ui, sans-serif;
}
/* botão e campo não herdam a fonte sozinhos (os passos da divisória saíam em Arial) */
button, input, select, textarea { font-family: inherit; }

/* ---------- o cartão: foto grande, nome e uma linha curta ---------- */
.product-grid { gap: 44px 28px; }
.product-card {
  border: 0;
  border-radius: 0;
  background: transparent;
  overflow: visible;
}
.product-card:hover { box-shadow: none; transform: none; }
.product-card .product-photo {
  aspect-ratio: 1 / 1;
  border-radius: 12px;
  overflow: hidden;
  padding: 26px;
}
/* claro + escuro: peça clara sobre fundo escuro, peça escura sobre fundo claro */
.product-card[data-tom="claro"] .product-photo {
  background: radial-gradient(120% 95% at 50% 36%, #3E4861 0%, #2B3450 58%, #1E2538 100%);
}
.product-card[data-tom="claro"] .product-photo img {
  filter: drop-shadow(0 14px 16px rgba(0, 0, 0, 0.35)) drop-shadow(0 2px 3px rgba(0, 0, 0, 0.25));
}
/* foto sem fundo transparente (amostra de piso, foto de catálogo): sobre branco, sem sombra */
.product-card[data-tom="foto"] .product-photo { background: #FFFFFF; padding: 0; }
.product-card[data-tom="foto"] .product-photo img { filter: none; object-fit: cover; }

.product-body { padding: 14px 2px 0; gap: 4px; }
.product-body h3 {
  font-size: 1.02rem;
  font-weight: 700;
  line-height: 1.25;
  letter-spacing: -0.01em;
  color: var(--navy);
}
.card-marca {
  font-family: var(--font-text);
  font-size: 0.66rem;
  font-weight: 700;
  letter-spacing: 0.12em;
  color: #8A6600;
  margin: 0;
}
.card-resumo { margin: 2px 0 0; font-size: 0.9rem; color: #5B6475; line-height: 1.35; }
.product-card .rd-tons { margin: 4px 0 0; }
/* texto demais: sem ficha técnica e sem botão no cartão (o cartão inteiro é o link) */
.product-card .spec-list,
.product-card .product-body > .btn { display: none; }
.product-card:hover h3 { text-decoration: underline; text-underline-offset: 3px; text-decoration-thickness: 2px; text-decoration-color: var(--yellow); }
.product-card:focus-visible { outline: 3px solid var(--yellow); outline-offset: 6px; border-radius: 12px; }

/* ---------- grande + pequeno: o mais vendido da seção vem grande ---------- */
@media (min-width: 900px) {
  .product-grid:has(> .product-card:nth-child(5)) > .product-card:first-child {
    grid-column: span 2;
    grid-row: span 2;
  }
  .product-grid:has(> .product-card:nth-child(5)) > .product-card:first-child .product-photo {
    aspect-ratio: auto;
    flex: 1;
    min-height: 0;
    padding: 44px;
  }
  .product-grid:has(> .product-card:nth-child(5)) > .product-card:first-child[data-tom="foto"] .product-photo { padding: 0; }
  .product-grid:has(> .product-card:nth-child(5)) > .product-card:first-child h3 { font-size: clamp(1.25rem, 1.8vw, 1.55rem); }
  .product-grid:has(> .product-card:nth-child(5)) > .product-card:first-child .card-resumo { font-size: 1rem; }
}
@media (max-width: 899px) {
  .product-grid:has(> .product-card:nth-child(3)) > .product-card:first-child { grid-column: span 2; }
  .product-grid:has(> .product-card:nth-child(3)) > .product-card:first-child .product-photo { aspect-ratio: 16 / 10; }
}
@media (max-width: 600px) {
  .product-grid { gap: 30px 14px; }
  .product-card .product-photo { padding: 14px; border-radius: 10px; }
  .product-body { padding: 10px 1px 0; }
  .product-body h3 { font-size: 0.95rem; }
  .card-resumo { font-size: 0.84rem; }
}

/* ---------- espaço em branco: seções com respiro, títulos que o olho acha ---------- */
.modelo-titulo {
  margin: 76px 0 0;
  padding-top: 0;
  border-top: 0;
  font-size: clamp(1.45rem, 2.6vw, 2rem);
}
.modelo-secao:first-of-type .modelo-titulo { margin-top: 48px; }
.modelo-secao .product-grid { margin-top: 26px; }
.modelo-nav { gap: 10px; margin: 8px 0 12px; }
.modelo-nav a { font-family: var(--font-text); font-weight: 600; font-size: 0.74rem; padding: 9px 14px; }

/* seção longa mostra as primeiras e guarda o resto num botão (grade.js) */
.product-grid:not(.aberta) > .product-card.grade-extra { display: none !important; }
.grade-mais {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  margin-top: 30px;
  padding: 13px 20px;
  border: 1.5px solid var(--navy);
  border-radius: 6px;
  background: transparent;
  color: var(--navy);
  font: 700 0.84rem/1 var(--font-text);
  letter-spacing: 0.02em;
  cursor: pointer;
}
.grade-mais:hover, .grade-mais:focus-visible { background: var(--navy); color: var(--white); }

/* página do produto: foto à esquerda acompanha a rolagem enquanto a escolha acontece à
   direita (padrão Z); produto claro sobre fundo escuro, como no cartão */
@media (min-width: 801px) {
  .pd-gallery { position: sticky; top: 100px; }
}
.pd-gallery-main[data-tom="claro"] {
  background: radial-gradient(120% 95% at 50% 36%, #3E4861 0%, #2B3450 58%, #1E2538 100%);
}

/* pisos (2026-10-13): preço "a partir de" por m² e o pedido de amostra na página do produto */
.pd-preco { margin: 6px 0 14px; }
.pd-preco p { margin: 0; color: var(--gray); font-size: 1rem; }
.pd-preco b { color: var(--navy); font-size: 1.6rem; font-weight: 800; letter-spacing: -0.01em; }
.pd-preco small { display: block; color: var(--gray); font-size: 0.82rem; margin-top: 2px; }
.pd-amostra {
  display: block; text-align: center; margin: -4px 0 16px; padding: 12px 16px;
  border: 1.5px solid var(--navy); border-radius: 8px; color: var(--navy);
  font-weight: 700; text-decoration: none;
}
.pd-amostra:hover { background: var(--navy); color: #fff; }

/* "Minha conta" no topo (pasta.js, 2026-10-15): o mesmo jeito do botão de busca */
.nav-conta {
  display: inline-flex; align-items: center; justify-content: center;
  width: 42px; height: 42px; margin-left: 6px; flex: none;
  border: 1px solid var(--border); border-radius: 8px; background: var(--white);
  color: var(--navy); transition: border-color 0.2s ease, background 0.2s ease;
}
.nav-conta:hover { border-color: var(--navy); background: var(--off-white); }
.nav-conta .ico { width: 21px; height: 21px; }
@media (max-width: 1240px) and (min-width: 1041px) { .nav-conta { width: 38px; height: 38px; margin-left: 2px; } }
@media (max-width: 1040px) { .nav-conta { display: none; } }
@media (min-width: 1241px) and (max-width: 1440px) {
  .main-nav > ul { gap: 13px; }
  .main-nav > ul > li > a { font-size: 0.9rem; }
  .site-header .container { gap: 10px; }
}
@media (max-width: 1240px) and (min-width: 1041px) {
  .main-nav > ul { gap: 10px; }
  .main-nav > ul > li > a { font-size: 0.8rem; }
  .site-header .container { gap: 8px; }
}
.mnav-conta { display: flex; align-items: center; gap: 10px; }
.mnav-conta .ico { width: 20px; height: 20px; }

/* ==========================================================================
   menus 16/10/2026: submenu no alto do menu, nunca maior que a tela, e o
   painel das linhas Quick-Step (menus_16out.py)
   ========================================================================== */
@media (min-width: 1041px) {
  /* o submenu abre no alto da lista de categorias (antes abria na altura do item e o de
     Pisos passava do pé da tela) e rola por dentro se ainda assim não couber */
  .mega-dropdown > ul { position: relative; }
  .mega-dropdown > ul > li { position: static; }
  .mega-dropdown .submenu { top: 0; min-height: 100%; }
  .mega-dropdown .submenu.submenu-grupos {
    max-height: calc(100vh - 140px);
    overflow-y: auto;
    overscroll-behavior: contain;
  }
  /* menu com muitos grupos (Pisos, Forros): 3 colunas, fica mais baixo */
  .mega-dropdown .submenu.submenu-grupos:has(> .submenu-grupo:nth-child(5)) {
    min-width: 690px;
    grid-template-columns: repeat(3, minmax(0, 1fr));
  }

  /* Quick-Step: passar o mouse abre as linhas por cima das outras colunas */
  .mega-dropdown .submenu:has(.qs-item) { overflow: visible; }
  .qs-item { position: static; }
  .qs-gatilho { display: flex !important; align-items: center; justify-content: space-between; gap: 8px; }
  .qs-gatilho::after {
    content: ""; width: 6px; height: 6px; flex-shrink: 0;
    border-right: 2px solid currentColor; border-bottom: 2px solid currentColor;
    transform: rotate(-45deg); opacity: 0.45;
  }
  .qs-painel {
    display: none;
    position: absolute;
    top: 0; bottom: 0; right: 0;
    left: calc(33.333% + 4px);
    z-index: 3;
    padding: 14px 14px 12px;
    background: var(--white);
    border-left: 1px solid var(--border);
    border-radius: 0 12px 12px 0;
    overflow-y: auto;
    box-shadow: -18px 0 28px -22px rgba(20, 26, 44, 0.35);
  }
  .qs-item:hover .qs-painel, .qs-item:focus-within .qs-painel { display: block; }
  .qs-item:hover .qs-gatilho { background: var(--off-white); color: #8A6600; }
  .qs-painel-titulo {
    display: block; padding: 2px 10px 8px;
    font-weight: 800; font-size: 1rem; color: var(--navy);
  }
  .qs-painel .submenu-titulo { padding-left: 10px; }
  .qs-painel a { display: block; padding: 7px 10px !important; }
  .qs-painel a b { display: block; font-weight: 700; font-size: 0.9rem; color: var(--navy); }
  .qs-painel a small { display: block; font-size: 0.78rem; line-height: 1.3; color: #5b6275; font-weight: 500; }
  .qs-painel a:hover b { color: #8A6600; }
  .qs-painel .qs-todas { margin-top: 6px; font-weight: 700; color: #8A6600; font-size: 0.85rem; }
}
@media (max-width: 1040px) {
  .qs-painel { display: none; }
}
@media (min-width: 1041px) {
  /* "Por marca" com muitas marcas: duas colunas, o menu fica mais baixo */
  .mega-dropdown .submenu-grupo:has(> a[href^="marca.html?m="]:nth-of-type(4)) {
    display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); align-content: start;
  }
  .mega-dropdown .submenu-grupo:has(> a[href^="marca.html?m="]:nth-of-type(4)) > .submenu-titulo { grid-column: 1 / -1; }
}

/* ==========================================================================
   cenas compactas (16/10/2026): a animação abre a página numa altura menor e toca
   sozinha (Cena.ligar / Cena.hero no cena.js); os itens vêm logo abaixo.
   A seção ganha "cena-hero" e o palco "cena-palco" (ferramentas/cenas_compactas.py).
   ========================================================================== */
.cena-hero, .cena-hero.c3-ativo { height: auto !important; min-height: 0 !important; }
.cena-hero .cena-palco {
  position: relative !important; top: auto !important;
  height: clamp(440px, 64svh, 660px) !important; min-height: 0 !important;
}
.cena-acoes {
  position: absolute; right: clamp(16px, 3vw, 40px); bottom: clamp(16px, 3vh, 28px); z-index: 8;
  display: flex; gap: 10px; align-items: center; flex-wrap: wrap; justify-content: flex-end;
}
.cena-acoes .btn { box-shadow: 0 8px 22px rgba(0, 0, 0, 0.28); }
.cena-repetir {
  appearance: none; border: 1px solid rgba(255, 255, 255, 0.5); background: rgba(14, 18, 30, 0.45);
  color: #fff; font: inherit; font-weight: 700; font-size: 0.85rem; padding: 10px 14px; border-radius: 8px;
  cursor: pointer; backdrop-filter: blur(4px);
}
.cena-repetir:hover { background: rgba(14, 18, 30, 0.7); }
@media (max-width: 720px) {
  .cena-hero .cena-palco { height: clamp(380px, 60svh, 540px) !important; }
  .cena-acoes { left: 16px; right: 16px; bottom: 12px; justify-content: space-between; }
  .cena-acoes .btn { padding: 11px 16px; font-size: 0.82rem; }
}

/* ==========================================================================
   ordenar e filtrar (filtros.js, 16/10/2026)
   ========================================================================== */
.ft-barra {
  display: flex; flex-wrap: wrap; align-items: center; gap: 10px 18px;
  margin: 0 0 30px; padding: 12px 14px; border-radius: 12px;
  background: var(--off-white, #F6F4EF); border: 1px solid rgba(30, 37, 56, 0.08);
}
.ft-ordem { display: flex; align-items: center; gap: 8px; }
.ft-ordem label, .ft-rot { font-size: 0.72rem; font-weight: 700; letter-spacing: 0.08em; text-transform: uppercase; color: #8A6600; }
.ft-ordem select {
  font: inherit; font-weight: 600; font-size: 0.9rem; color: var(--navy, #1E2538);
  padding: 7px 30px 7px 10px; border-radius: 8px; border: 1px solid rgba(30, 37, 56, 0.2); background: #fff;
}
.ft-grupos { display: flex; flex-wrap: wrap; gap: 8px 18px; }
.ft-grupo { display: flex; flex-wrap: wrap; align-items: center; gap: 6px; }
.ft-chip {
  font: inherit; font-size: 0.84rem; font-weight: 600; color: var(--navy, #1E2538);
  padding: 5px 11px; border-radius: 8px; border: 1px solid rgba(30, 37, 56, 0.18); background: #fff; cursor: pointer;
}
.ft-chip:hover { border-color: #F5C518; }
.ft-chip.ativo { background: var(--navy, #1E2538); border-color: var(--navy, #1E2538); color: #fff; }
.ft-limpar { font: inherit; font-size: 0.84rem; font-weight: 700; color: #8A6600; background: none; border: 0; cursor: pointer; text-decoration: underline; }
.ft-conta { margin-left: auto; font-size: 0.85rem; color: #5B6475; }
.ft-fora, .ft-vazio { display: none !important; }
.ft-ordenado .vt-grupo, .ft-ordenado .vt-barra, .ft-ordenado .modelo-secao, .ft-ordenado .modelo-nav { display: none !important; }
.ft-todos { margin-bottom: 48px; }
.ft-preco { display: block; margin-top: 4px; font-size: 0.86rem; color: #5B6475; }
.ft-preco b { color: var(--navy, #1E2538); font-weight: 800; }
.ft-preco-cab { display: inline; margin: 0 0 0 4px; }
@media (max-width: 720px) {
  .ft-barra { padding: 10px; gap: 10px; }
  .ft-grupos { flex-wrap: nowrap; overflow-x: auto; width: 100%; scrollbar-width: none; }
  .ft-grupo { flex-wrap: nowrap; }
  .ft-grupo .ft-chip { white-space: nowrap; }
  .ft-conta { margin-left: 0; }
}
.div-cena.c3-ativo .cena-acoes .btn, .div-cena .cena-acoes .btn { display: none; }

/* ==========================================================================
   abertura com fotos reais (hero-fotos.js, 16/10/2026): forro modular e drywall
   ========================================================================== */
.hf { position: relative; background: #11151F; overflow: hidden; }
.hf-palco { position: relative; height: clamp(440px, 64svh, 660px); }
.hf-quadro { position: absolute; inset: 0; margin: 0; opacity: 0; transition: opacity 1.1s ease; }
.hf-quadro img {
  width: 100%; height: 100%; object-fit: cover; display: block;
  transform: scale(1.02); transform-origin: var(--hf-origem, 50% 50%);
}
.hf-quadro.is-ativo { opacity: 1; }
.hf-quadro.is-ativo img { animation: hf-zoom 7s ease-out forwards; }
.hf-pausa .hf-quadro.is-ativo img { animation-play-state: paused; }
@keyframes hf-zoom { from { transform: scale(1.02); } to { transform: scale(1.12); } }
.hf::after {
  content: ""; position: absolute; inset: 0; pointer-events: none;
  background: linear-gradient(90deg, rgba(10, 13, 22, 0.78) 0%, rgba(10, 13, 22, 0.35) 46%, rgba(10, 13, 22, 0) 70%),
              linear-gradient(0deg, rgba(10, 13, 22, 0.55) 0%, rgba(10, 13, 22, 0) 36%);
}
.hf-txt { position: absolute; left: clamp(20px, 6vw, 96px); bottom: clamp(70px, 12vh, 110px); z-index: 5; max-width: 560px; color: #fff; }
.hf-k { margin: 0 0 8px; font-size: 0.78rem; font-weight: 800; letter-spacing: 0.14em; text-transform: uppercase; color: #F5C518; }
.hf-t { margin: 0; font-size: clamp(1.9rem, 4vw, 3.1rem); font-weight: 800; line-height: 1.04; letter-spacing: -0.02em; }
.hf-s { margin: 10px 0 0; font-size: clamp(1rem, 1.5vw, 1.15rem); color: rgba(255, 255, 255, 0.86); max-width: 460px; }
.hf-troca .hf-txt > * { animation: hf-texto 0.7s ease both; }
.hf-troca .hf-t { animation-delay: 0.06s; }
.hf-troca .hf-s { animation-delay: 0.12s; }
@keyframes hf-texto { from { opacity: 0; transform: translateY(10px); } to { opacity: 1; transform: none; } }
.hf-pontos { position: absolute; left: clamp(20px, 6vw, 96px); bottom: clamp(30px, 5vh, 46px); z-index: 6; display: flex; gap: 8px; }
.hf-pontos button { width: 30px; height: 4px; border: 0; padding: 0; border-radius: 2px; background: rgba(255, 255, 255, 0.35); cursor: pointer; }
.hf-pontos button.is-ativo { background: #F5C518; }
.hf .cena-acoes { z-index: 7; }
@media (prefers-reduced-motion: reduce) { .hf-quadro.is-ativo img { animation: none; } }
@media (max-width: 720px) {
  .hf-palco { height: clamp(380px, 62svh, 540px); }
  .hf-txt { left: 16px; right: 16px; bottom: 84px; }
  .hf-pontos { left: 16px; bottom: 64px; }
  .hf::after { background: linear-gradient(0deg, rgba(10, 13, 22, 0.85) 0%, rgba(10, 13, 22, 0.25) 60%, rgba(10, 13, 22, 0.1) 100%); }
}

/* ==========================================================================
   Drywall & Gesso: comparação gesso placa x drywall (drywall_pagina.py, 16/10/2026)
   ========================================================================== */
.dw-compara { padding: 72px 0; background: var(--off-white, #F6F4EF); }
.dw-compara h2 { margin: 6px 0 8px; font-size: clamp(1.8rem, 3.4vw, 2.6rem); color: var(--navy, #1E2538); letter-spacing: -0.02em; }
.dw-compara-apoio { margin: 0 0 28px; color: #5B6475; font-size: 1.08rem; }
.dw-compara-tabela { border-radius: 14px; overflow: hidden; background: #fff; box-shadow: 0 10px 30px rgba(30, 37, 56, 0.08); }
.dw-cp-linha { display: grid; grid-template-columns: 0.7fr 1fr 1fr; border-top: 1px solid rgba(30, 37, 56, 0.08); }
.dw-cp-linha > * { padding: 14px 18px; font-size: 0.98rem; line-height: 1.4; color: #2B3245; }
.dw-cp-linha > b { color: var(--navy, #1E2538); font-weight: 800; }
.dw-cp-cab { border-top: 0; background: var(--navy, #1E2538); }
.dw-cp-cab > span { color: #fff; font-weight: 800; font-size: 1.02rem; }
/* as duas colunas por igual: o Gustavo quer que o cliente escolha, sem a tabela puxar para o drywall */
.dw-cp-linha > span + span { border-left: 1px solid rgba(30, 37, 56, 0.08); }
.dw-cp-fim > * { font-weight: 700; }
.dw-compara-mais { margin: 20px 0 0; }
.dw-compara-mais a { font-weight: 800; color: var(--navy, #1E2538); border-bottom: 2px solid #F5C518; text-decoration: none; }
@media (max-width: 720px) {
  .dw-compara { padding: 52px 0; }
  .dw-cp-linha { grid-template-columns: 1fr 1fr; }
  .dw-cp-linha > b { grid-column: 1 / -1; padding-bottom: 0; }
  .dw-cp-cab > span:first-child { display: none; }
  .dw-cp-linha > * { padding: 10px 12px; font-size: 0.9rem; }
}

/* ===== Brasil Wall na home (18/10/2026): revenda exclusiva com preço de fábrica ===== */
.bw-home { background: #0f1622; color: #fff; }
.bw-home-in { display: grid; grid-template-columns: minmax(0, 1.1fr) minmax(0, 1fr); gap: clamp(24px, 4vw, 56px); align-items: center; }
.bw-home-foto { display: block; border-radius: 12px; overflow: hidden; aspect-ratio: 4 / 3; }
.bw-home-foto img { width: 100%; height: 100%; object-fit: cover; display: block; transition: transform 0.6s ease; }
.bw-home-foto:hover img { transform: scale(1.04); }
.bw-home-selos { display: flex; flex-wrap: wrap; gap: 8px; margin-bottom: 16px; }
.bw-home-selos span { padding: 6px 12px; border-radius: 999px; font: 800 0.8rem var(--font-display); }
.bw-home-selo-verde { background: #138a3e; color: #fff; }
.bw-home-selo-amarelo { background: var(--yellow); color: var(--navy); }
.bw-home-logo { display: block; width: 170px; height: auto; background: #fff; border-radius: 6px; padding: 5px 7px; margin-bottom: 16px; }
.bw-home h2 { color: #fff; font-family: var(--font-display); font-weight: 900; letter-spacing: -0.02em; font-size: clamp(1.6rem, 3.2vw, 2.4rem);
  line-height: 1.08; margin: 0 0 12px; }
.bw-home p { color: rgba(255, 255, 255, 0.82); line-height: 1.6; margin: 0 0 22px; max-width: 52ch; }
@media (max-width: 820px) { .bw-home-in { grid-template-columns: minmax(0, 1fr); } }

/* ===== Obra a seco no menu (18/10/2026, 2ª versão). O Gustavo, sobre a 1ª (pílula verde de duas linhas):
   "destoou dos outros botões ... deixando grande demais o topo". Agora é um item igual aos outros, como o
   Espaço Premium: mesma letra e tamanho, só a folha verde marca; no mouse (e na própria página) fica verde. ===== */
.nav-bw-link { display: inline-flex; align-items: center; gap: 6px; }
.nav-bw-link .ico { width: 0.95em; height: 0.95em; color: #138a3e; transition: transform 0.25s; }
.main-nav > ul > li > a.nav-bw-link:hover, .main-nav > ul > li > a.nav-bw-link.active { color: #138a3e; }
.main-nav > ul > li > a.nav-bw-link:hover .ico { transform: rotate(-14deg); }
.mnav-bw { display: inline-flex; align-items: center; gap: 8px; color: #0d6a2f !important; font-weight: 800 !important; }
.mnav-bw .ico { color: #138a3e; width: 0.9em; height: 0.9em; }
@media (prefers-reduced-motion: reduce) { .nav-bw-link .ico { transition: none; } }
/* com o item a mais, o topo não cabia (e já passava 94 px do espaço em telas acima de 1440): o cabeçalho
   usa um pouco mais da tela larga, aperta os espaços nas médias e, até 1180 px, o menu vira gaveta */
/* 21/10/2026, com o Indique e ganhe (medido no navegador): o topo passava 126 px em 1920, 110 em 1400, 44 em 1300 e
   97 em 1181; só cabia em 1366. Agora o cabeçalho largo vai até 1480 px, a letra média vale até 1500, de 1261 a 1360
   o menu aperta mais um pouco e até 1260 px vira gaveta. */
@media (min-width: 1501px) { .site-header .container { max-width: 1480px; } .main-nav > ul { gap: 14px; } .main-nav > ul > li > a { font-size: 0.9rem; } }
@media (min-width: 1261px) and (max-width: 1500px) {
  .site-header .container { max-width: calc(100% - 32px); padding-left: 16px; padding-right: 16px; gap: 10px; }
  .main-nav > ul { gap: 10px; }
  .main-nav > ul > li > a { font-size: 0.82rem; }
  .brand img { height: 27px; }
  .nav-cta { padding: 10px 12px; font-size: 0.64rem; letter-spacing: 0.05em; }
}
@media (max-width: 1260px) { .main-nav { display: none; } .nav-toggle { display: flex; } }
@media (min-width: 1261px) and (max-width: 1360px) {
  .site-header .container { gap: 8px; }
  .main-nav > ul { gap: 7px; }
  .main-nav > ul > li > a { font-size: 0.78rem; }
  .brand img { height: 24px; }
  .nav-conta, .busca-botao { width: 38px; height: 38px; }
}
/* ===== Indique e ganhe no menu (21/10/2026, menu_indique.py): como o Obra a seco, mesma letra dos outros e só o
   presente colorido marca; no mouse (e nas páginas do programa) a letra fica da cor do presente. ===== */
.nav-indique-link { display: inline-flex; align-items: center; gap: 6px; }
.nav-indique-link .ico { width: 0.95em; height: 0.95em; color: #C2410C; transition: transform 0.25s; }
.main-nav > ul > li > a.nav-indique-link:hover, .main-nav > ul > li > a.nav-indique-link.active { color: #C2410C; }
.main-nav > ul > li > a.nav-indique-link:hover .ico { transform: translateY(-2px); }
.mnav-indique { display: inline-flex; align-items: center; gap: 8px; }
.mnav-indique .ico { color: #C2410C; width: 0.9em; height: 0.9em; }
@media (prefers-reduced-motion: reduce) { .nav-indique-link .ico { transition: none; } }
/* 21/10/2026, o Gustavo: "ficou bugado o indique e ganhe". Os itens com ícone (Obra a seco, Espaço Premium,
   Indique e ganhe) ficavam 2 px acima dos outros: a linha de base do inline-flex vinha do ícone. O texto
   passa a dar a linha de base. E no menu do celular o ícone ia para a esquerda e o texto para a direita
   (o link da gaveta é flex com space-between, feito para a setinha dos submenus). */
.nav-bw-link > span, .nav-premium-link > span, .nav-indique-link > span { align-self: baseline; }
.mnav-list > li > a.mnav-bw, .mnav-list > li > a.mnav-premium, .mnav-list > li > a.mnav-indique,
.mnav-list > li > a.mnav-conta { justify-content: flex-start; gap: 10px; }
/* marca sem logo (FCP, Gyprex, Ouro Fino) no cartão da vitrine: o nome no tamanho de um logo
   (a regra ".marca-cartao span" deixava miúdo) */
.marca-cartao .marca-escrita { font-size: 1.75rem; line-height: 46px; height: 46px; color: var(--navy); letter-spacing: -0.01em; }

/* teste de 19/10/2026 no celular (375 px): Contato e Monte seu kit rolavam para o lado */
.contact-grid > * { min-width: 0; }
.contact-card { min-width: 0; }
.contact-card > div, .contact-card a, .contact-card p { min-width: 0; overflow-wrap: anywhere; }
@media (max-width: 900px) { .contact-grid { grid-template-columns: minmax(0, 1fr); } }
@media (max-width: 480px) { .kit-qtd-un { white-space: normal; } .kit-qtd { flex-wrap: wrap; row-gap: 4px; } }
/* medida que a calculadora não conseguiu usar (letra, zero, fora da faixa) */
input.campo-invalido { border-color: #C0392B !important; box-shadow: 0 0 0 3px rgba(192, 57, 43, 0.15) !important; }

/* Contato (19/10/2026, o Gustavo): ao passar o mouse no cartão, o ícone ganha a cor dele:
   WhatsApp verde, pin vermelho, relógio laranja, estrela amarela, Instagram nas cores dele, e-mail azul. */
.contact-icon { transition: background 0.25s ease, color 0.25s ease; }
.contact-icon .ico { transition: transform 0.25s ease, color 0.25s ease; }
.contact-card:hover .contact-icon .ico, .contact-card:focus-within .contact-icon .ico { transform: scale(1.08); }
.contact-card:hover .ci-whats, .contact-card:focus-within .ci-whats { background: rgba(37, 211, 102, 0.16); }
.contact-card:hover .ci-whats .ico, .contact-card:focus-within .ci-whats .ico { color: #25D366; }
.contact-card:hover .ci-local, .contact-card:focus-within .ci-local { background: #FDECEC; }
.contact-card:hover .ci-local .ico, .contact-card:focus-within .ci-local .ico { color: #E53935; }
.contact-card:hover .ci-hora, .contact-card:focus-within .ci-hora { background: #FEF1E4; }
.contact-card:hover .ci-hora .ico, .contact-card:focus-within .ci-hora .ico { color: #EF7D17; }
.contact-card:hover .ci-estrela, .contact-card:focus-within .ci-estrela { background: #FFF6D9; }
.contact-card:hover .ci-estrela .ico, .contact-card:focus-within .ci-estrela .ico { color: #F5B301; }
.contact-card:hover .ci-insta .ico, .contact-card:focus-within .ci-insta .ico { color: #fff; }
.contact-card:hover .ci-insta, .contact-card:focus-within .ci-insta {
  background: radial-gradient(circle at 30% 107%, #FDF497 0%, #FDF497 5%, #FD5949 45%, #D6249F 60%, #285AEB 90%); }
.contact-card:hover .ci-email, .contact-card:focus-within .ci-email { background: #E8F0FE; }
.contact-card:hover .ci-email .ico, .contact-card:focus-within .ci-email .ico { color: #1A73E8; }
@media (prefers-reduced-motion: reduce) { .contact-icon, .contact-icon .ico { transition: none; } }

/* Kits prontos de forro (19/10/2026, kits_prontos.py): forro e acabamento da mesma marca, já combinados.
   Na página inicial (depois de Mais vendidos) e na de forros (antes da vitrine). */
.kits-prontos { background: var(--off-white); }
.kp-grade { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 22px; }
.kp-cartao { display: flex; flex-direction: column; background: var(--white); border: 1px solid var(--border);
  border-radius: var(--radius); overflow: hidden; transition: box-shadow 0.2s ease, transform 0.2s ease; }
.kp-cartao:hover { box-shadow: 0 16px 34px rgba(40, 50, 75, 0.12); transform: translateY(-3px); }
.kp-foto { position: relative; display: block; aspect-ratio: 4 / 3; overflow: hidden; background: #E9E7E1; }
.kp-foto img { width: 100%; height: 100%; object-fit: cover; display: block; transition: transform 0.6s ease; }
.kp-cartao:hover .kp-foto img { transform: scale(1.04); }
.kp-selo { position: absolute; top: 12px; left: 12px; padding: 5px 10px; border-radius: 3px; background: var(--yellow); color: var(--navy);
  font-family: var(--font-mono); font-size: 0.66rem; font-weight: 700; letter-spacing: 0.06em; text-transform: uppercase; }
.kp-corpo { display: flex; flex-direction: column; flex: 1; padding: 20px 22px 22px; }
.kp-corpo h3 { font-size: 1.25rem; margin: 0 0 6px; }
.kp-frase { color: #5A6275; font-size: 0.95rem; line-height: 1.55; margin: 0 0 14px; }
.kp-itens { list-style: none; margin: 0 0 10px; padding: 0; display: grid; gap: 8px; }
.kp-itens li { display: flex; align-items: center; gap: 10px; font-weight: 600; font-size: 0.93rem; color: var(--navy); }
.kp-itens img { width: 44px; height: 44px; flex: none; object-fit: contain; border-radius: 8px; background: var(--off-white); border: 1px solid var(--border); }
.kp-tom { margin: 0 0 16px; font-size: 0.86rem; color: var(--gray); }
.kp-acoes { margin-top: auto; display: flex; flex-wrap: wrap; align-items: center; gap: 10px 16px; }
.kp-whats { font-weight: 700; font-size: 0.9rem; color: var(--navy); text-decoration: underline; text-underline-offset: 3px; }
.kp-whats:hover { color: #1C9E4B; }
@media (max-width: 980px) {
  .kp-grade { grid-template-columns: none; grid-auto-flow: column; grid-auto-columns: minmax(280px, 82%);
    overflow-x: auto; scroll-snap-type: x mandatory; padding-bottom: 8px; }
  .kp-cartao { scroll-snap-align: start; }
}
@media (prefers-reduced-motion: reduce) { .kp-cartao, .kp-foto img { transition: none; } }

/* Monte seu kit: começar por um kit pronto (kit-montar.js) */
.kit-prontos { margin: 0 0 16px; padding: 14px 16px; border: 1px dashed #C9CDD6; border-radius: 10px; background: var(--off-white); }
.kit-prontos-rot { display: block; font-family: var(--font-mono); font-size: 0.7rem; font-weight: 700; letter-spacing: 0.06em;
  text-transform: uppercase; color: var(--gray); margin-bottom: 8px; }
.kit-prontos .kit-chips { display: flex; flex-wrap: wrap; gap: 8px; }
.kit-prontos-txt { margin: 10px 0 0; font-size: 0.92rem; color: var(--navy); }
.kit-prontos-txt[hidden] { display: none; }