/* ==========================================================================
   Tapeçaria Esporte — estilos globais + Home
   Tokens extraídos do Design System (Figma). Escala fluida entre os
   frames Mobile (390px) e Desktop (1440px).
   ========================================================================== */

/* ---------- Fontes (Design System: Helony + Gallery Italic) ---------- */
@font-face {
  font-family: "Helony";
  src: url("../fonts/helony-regular.woff2") format("woff2");
  font-weight: 400;
  font-style: normal;
  font-display: swap;
}

@font-face {
  font-family: "Gallery";
  src: url("../fonts/gallery-italic.woff2") format("woff2");
  font-weight: 400;
  font-style: italic;
  font-display: swap;
}

/* ---------- Tokens ---------- */
:root {
  /* Linho natural — 60% */
  --linho-100: #f7f2eb;
  --linho-300: #f3ece1;
  --linho-500: #efe5d7;
  --linho-700: #e8d8c2;
  --linho-900: #e0cbac;
  /* Rubi terroso — 30% */
  --rubi-100: #99545f;
  --rubi-300: #7a343f;
  --rubi-500: #5a131e;
  --rubi-700: #480a14;
  --rubi-900: #360009;
  /* Cobre solar — 10% */
  --cobre-100: #e3b194;
  --cobre-300: #cc865e;
  --cobre-500: #b55a28;
  --cobre-700: #994414;
  --cobre-900: #7d2d00;

  --font-sans: "Helony", "Helvetica Neue", Arial, sans-serif;
  --font-italic: "Gallery", "Didot", "Bodoni 72", Georgia, serif;

  /* Tipografia fluida: valor mobile (390px) → desktop (1440px) */
  --fs-display: clamp(2.5rem, 1.943rem + 2.286vw, 4rem);      /* H1 40 → 64 */
  --fs-title: clamp(1.75rem, 1.286rem + 1.905vw, 3rem);       /* H2 28 → 48 */
  --fs-body: clamp(1rem, 0.814rem + 0.762vw, 1.5rem);         /* corpo/botão/overline 16 → 24 */

  /* Espaçamentos (Design System: mobile 20/30/40 · desktop 20/40/80/120) */
  --gutter: 20px;
  --space-section: clamp(40px, 25.14px + 3.81vw, 80px);
  --pad-panel: clamp(40px, 25.14px + 3.81vw, 80px);
  --radius-panel: clamp(30px, 26.29px + 0.952vw, 40px);
  --radius-card: clamp(16px, 14.51px + 0.381vw, 20px);
  --radius-btn: clamp(16px, 14.51px + 0.381vw, 20px);
  --btn-height: clamp(46px, 38.2px + 2vw, 67px);
  --btn-pad-x: clamp(30px, 26.29px + 0.952vw, 40px);

  --container: 1200px;
  --shadow-bar: 0 16px 32px -8px rgba(72, 10, 20, 0.55);
  --shadow-header: 0 12px 32px rgba(72, 10, 20, 0.14);
}

@media (min-width: 768px) {
  :root { --gutter: 40px; }
}

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

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

@media (prefers-reduced-motion: no-preference) {
  html { scroll-behavior: smooth; }
}

body {
  margin: 0;
  background: var(--linho-500);
  color: var(--rubi-500);
  font-family: var(--font-sans);
  font-size: var(--fs-body);
  line-height: 1.3;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
}

h1, h2, h3, h4, p, ul, dl, dd, figure { margin: 0; }
h1, h2, h3, h4 { font-weight: 400; }
ul { padding: 0; list-style: none; }
img, svg { display: block; max-width: 100%; }
img { height: auto; }
a { color: inherit; text-decoration: none; }
button { font: inherit; color: inherit; background: none; border: 0; padding: 0; cursor: pointer; }
address { font-style: normal; }

/* Trecho em Gallery Italic (Design System: "Destaque"). */
em {
  font-family: var(--font-italic);
  font-style: italic;
  font-weight: 400;
}

:focus-visible {
  outline: 2px solid var(--cobre-500);
  outline-offset: 3px;
}

.svg-sprite {
  position: absolute;
  width: 0;
  height: 0;
  overflow: hidden;
}

.icon {
  width: 1em;
  height: 1em;
  fill: currentColor;
  flex: none;
}

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

.skip-link {
  position: absolute;
  top: 12px;
  left: 12px;
  z-index: 200;
  padding: 12px 20px;
  border-radius: 12px;
  background: var(--rubi-500);
  color: var(--linho-100);
  transform: translateY(-200%);
}

.skip-link:focus { transform: none; }

.container {
  width: min(100% - 2 * var(--gutter), var(--container));
  margin-inline: auto;
}

/* Variações de texto do Figma entre Mobile e Desktop (mesmo link, rótulo diferente). */
.u-desktop { display: none; }

@media (min-width: 768px) {
  .u-desktop { display: inline; }
  .u-mobile { display: none; }
}

/* ---------- Tipografia compartilhada ---------- */
.display {
  font-size: var(--fs-display);
  line-height: clamp(36px, 25.6px + 2.667vw, 64px); /* 90% no mobile → 100% no desktop */
}

.overline {
  color: var(--cobre-500);
  font-size: var(--fs-body);
  line-height: 1.2;
}

.section-title {
  font-size: var(--fs-title);
  line-height: 1;
}

.section-lead {
  margin-top: clamp(2px, -6.4px + 2.15vw, 24px);
  line-height: 1.2;
}

/* ---------- Botões ---------- */
.btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 12px;
  min-height: var(--btn-height);
  padding: 0 var(--btn-pad-x);
  border: 1px solid transparent;
  border-radius: var(--radius-btn);
  font-size: var(--fs-body);
  line-height: 1.125;
  text-align: center;
  white-space: nowrap;
  transition: background-color .2s ease, color .2s ease, border-color .2s ease;
}

.btn--primary {
  background: var(--cobre-500);
  color: var(--linho-100);
}

.btn--primary:hover { background: var(--cobre-700); }

.btn--outline {
  border-color: var(--cobre-500);
  color: var(--cobre-500);
}

.btn--outline:hover {
  background: var(--cobre-500);
  color: var(--linho-100);
}

.btn-icon {
  display: inline-grid;
  place-items: center;
  width: var(--btn-height);
  height: var(--btn-height);
  border-radius: var(--radius-btn);
  background: var(--cobre-500);
  color: var(--linho-100);
  font-size: clamp(24px, 20.29px + 0.952vw, 34px);
  transition: background-color .2s ease;
}

.btn-icon:hover { background: var(--cobre-700); }

.btn--arrow { justify-content: flex-start; padding-right: 28px; }
.icon--arrow-long { width: 56px; height: 12px; }

/* Painel rubi (hero, ofício, contato) */
.panel {
  position: relative;
  border-radius: var(--radius-panel);
  background: var(--rubi-500);
  color: var(--linho-100);
}

.panel :focus-visible { outline-color: var(--linho-100); }

/* ==========================================================================
   Cabeçalho
   ========================================================================== */

.logo { width: 100%; height: auto; }
.logo__mark { fill: var(--cobre-500); }
.logo__text { fill: currentColor; }

.main-nav__link {
  font-size: var(--fs-body);
  line-height: 1.2;
}

.main-nav__link--italic {
  font-family: var(--font-italic);
  font-style: italic;
}

/* ----- Desktop: menu flutuante fixo ----- */
@media (min-width: 1200px) {
  html { scroll-padding-top: 140px; }

  .site-header {
    position: fixed;
    inset: 20px 0 auto;
    z-index: 50;
    pointer-events: none;
  }

  .main-nav__panel {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 24px;
    width: min(100% - 2 * var(--gutter), var(--container));
    height: 100px;
    margin-inline: auto;
    padding-inline: clamp(40px, -64px + 10vw, 80px);
    border-radius: 30px;
    background: var(--linho-500);
    box-shadow: var(--shadow-header);
    pointer-events: auto;
  }

  .main-nav__logo {
    width: 173px;
    color: var(--rubi-500);
  }

  .main-nav__list {
    display: flex;
    align-items: center;
    gap: clamp(20px, -33px + 5vw, 36px);
  }

  .main-nav__link {
    display: inline-block;
    padding-block: 6px;
    white-space: nowrap;
    text-decoration: underline;
    text-decoration-color: transparent;
    text-decoration-thickness: 1px;
    text-underline-offset: 6px;
    transition: text-decoration-color .2s ease;
  }

  .main-nav__link:hover,
  .main-nav__link[aria-current="page"] { text-decoration-color: currentColor; }

  .main-nav__close,
  .social--menu,
  .tab-bar { display: none !important; }
}

/* ----- Mobile/tablet: barra de atalhos + menu em sobreposição ----- */
@media (max-width: 1199.98px) {
  .main-nav__logo { display: block; width: 210px; color: var(--linho-100); }

  /* Sem JavaScript o menu permanece visível no topo (progressive enhancement). */
  .no-js .main-nav { background: var(--rubi-500); color: var(--linho-100); }
  .no-js .main-nav__panel { padding: 24px var(--gutter); }
  .no-js .main-nav__list { display: flex; flex-wrap: wrap; gap: 8px 20px; margin-top: 20px; }
  .no-js .social--menu,
  .no-js .tab-bar__item[data-menu-open] { display: none; }

  .js .main-nav {
    position: fixed;
    inset: 0;
    z-index: 100;
    display: none;
    overflow-y: auto;
    background: rgba(72, 10, 20, 0.9);
    -webkit-backdrop-filter: blur(12px);
    backdrop-filter: blur(12px);
    color: var(--linho-100);
  }

  .js .main-nav.is-open {
    display: block;
    animation: menu-fade .25s ease both;
  }

  .main-nav__panel {
    display: grid;
    grid-template-columns: 1fr auto;
    align-content: center;
    align-items: center;
    min-height: 100%;
    padding: 100px 40px 60px;
  }

  .js .main-nav__panel { min-height: 100dvh; }

  .main-nav__list,
  .social--menu { grid-column: 1 / -1; }

  .main-nav__close {
    display: grid;
    place-items: center;
    width: 48px;
    height: 48px;
    margin-right: -8px;
    font-size: 44px;
  }

  .main-nav__close[hidden] { display: none; }

  .js .main-nav__list {
    margin-top: 55px;
    border-top: 1px solid rgba(239, 229, 215, 0.6);
  }

  .js .main-nav__list li { border-bottom: 1px solid rgba(239, 229, 215, 0.6); }

  .js .main-nav__link {
    display: flex;
    align-items: center;
    min-height: 80px;
    font-size: 28px;
  }

  .social--menu {
    margin-top: 48px;
    color: var(--linho-100);
  }

  .tab-bar {
    position: fixed;
    left: 50%;
    bottom: calc(20px + env(safe-area-inset-bottom));
    z-index: 60;
    width: min(100% - 40px, 350px);
    transform: translateX(-50%);
    border-radius: 999px;
    background: var(--linho-500);
    box-shadow: var(--shadow-bar);
  }

  .tab-bar__list {
    display: flex;
    align-items: center;
    justify-content: space-between;
    height: 77px;
    padding-inline: 26px;
  }

  .tab-bar__item {
    display: grid;
    place-items: center;
    width: 48px;
    height: 48px;
    color: var(--rubi-500);
    font-size: 36px;
  }

  .tab-bar__item--brand {
    color: var(--cobre-500);
    font-size: 44px;
  }

  .tab-bar__item--brand .icon { width: 0.9em; }
}

@keyframes menu-fade {
  from { opacity: 0; }
  to { opacity: 1; }
}

/* ==========================================================================
   Hero
   ========================================================================== */

.site-main { padding-top: 20px; }

@media (min-width: 1200px) {
  .site-main { padding-top: 140px; }
}

/* O cartão é a "janela" do slider; os banners correm lado a lado no trilho. */
.hero__card {
  --slider-interval: 6s;
  --ring-size: clamp(29px, 21.2px + 2vw, 50px);
  overflow: hidden;
  isolation: isolate;
}

.hero__track {
  display: flex;
  transition: transform .7s cubic-bezier(.65, 0, .35, 1);
}

.hero__slide {
  position: relative;
  display: flex;
  flex: 0 0 100%;
  flex-direction: column;
  justify-content: space-between;
  gap: 34px;
  min-height: 350px;
  padding: var(--pad-panel);
  padding-bottom: clamp(40px, 32.57px + 1.905vw, 60px);
}

/* Banner com imagem de fundo (opcional). */
.hero__media {
  position: absolute;
  inset: 0;
  z-index: -2; /* abaixo do degradê (::before), que garante a leitura do texto */
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.hero__slide--image::before {
  content: "";
  position: absolute;
  inset: 0;
  z-index: -1;
  background: linear-gradient(90deg, rgba(54, 0, 9, 0.9) 0%, rgba(54, 0, 9, 0.72) 45%, rgba(54, 0, 9, 0.25) 100%);
}

/* No mobile o texto ocupa a largura toda: degradê mais uniforme. */
@media (max-width: 767.98px) {
  .hero__slide--image::before { background: linear-gradient(180deg, rgba(54, 0, 9, 0.85) 0%, rgba(54, 0, 9, 0.7) 100%); }
}

/* Anel de progresso (componente compartilhado): indica o tempo até o próximo slide
   e também pausa/retoma a troca automática. Usado no hero e na galeria do produto.
   O container do slider recebe .is-running / .is-paused via JS. */
@property --slider-progress {
  syntax: "<percentage>";
  inherits: false;
  initial-value: 0%;
}

.slider-ring {
  position: absolute;
  z-index: 2;
  width: var(--ring-size);
  aspect-ratio: 1;
  border-radius: 50%;
}

.slider-ring::before {
  content: "";
  position: absolute;
  inset: 0;
  border-radius: 50%;
  background: conic-gradient(var(--ring-arc, rgba(239, 229, 215, 0.62)) 0 var(--slider-progress), var(--ring-track, rgba(239, 229, 215, 0.16)) 0 100%);
  -webkit-mask: radial-gradient(farthest-side, transparent calc(100% - var(--ring-w)), #000 calc(100% - var(--ring-w) + 0.5px));
  mask: radial-gradient(farthest-side, transparent calc(100% - var(--ring-w)), #000 calc(100% - var(--ring-w) + 0.5px));
  --ring-w: clamp(4px, 2.9px + 0.29vw, 7px);
  --slider-progress: 28%;
}

/* Área de toque mínima de 44px no mobile. */
.slider-ring::after {
  content: "";
  position: absolute;
  inset: min(0px, calc((var(--ring-size) - 44px) / 2));
}

.is-running .slider-ring::before {
  animation: slider-progress var(--slider-interval, 6s) linear forwards;
}

.is-paused .slider-ring::before,
[data-slider-pause-hover]:hover .slider-ring::before,
[data-slider-pause-hover]:has(:focus-visible) .slider-ring::before { animation-play-state: paused; }

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

.js .slider-ring[hidden] { display: none; }

.hero__ring {
  top: var(--pad-panel);
  right: var(--pad-panel);
}

.hero__next {
  position: absolute;
  right: var(--pad-panel);
  bottom: clamp(40px, 32.57px + 1.905vw, 60px);
  z-index: 2;
}

.js .hero__next[hidden] { display: none; }

.hero__title { color: var(--linho-100); }
.hero__line { display: block; }

.hero__subtitle {
  max-width: 18.5em;
  margin-top: clamp(20px, 14.43px + 1.429vw, 35px);
  font-size: var(--fs-body);
  line-height: 1.3;
}

.hero__actions {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 20px;
  margin-top: 20px;
}

/* ==========================================================================
   Catálogos (Fabricação / Reformas)
   ========================================================================== */

.catalog { margin-top: var(--space-section); }

.section-head { margin-bottom: clamp(20px, 12.57px + 1.905vw, 40px); }

.cards {
  display: grid;
  gap: 20px;
}

.card {
  position: relative;
  display: flex;
  flex-direction: column;
  overflow: hidden;
  border: 1px solid var(--rubi-500);
  border-radius: var(--radius-card);
  background: var(--linho-500);
}

.card__img {
  width: 100%;
  object-fit: cover;
  background: var(--linho-700);
}

.card__img--bottom { object-position: 50% 100%; }

/* Fotos dos serviços (vindas do painel) têm miniaturas na lateral direita: prioriza o lado esquerdo. */
.cards--reformas .card__img { object-position: 0 50%; }

.card__title {
  display: flex;
  align-items: center;
  justify-content: center;
  flex: none;
  min-height: var(--card-label);
  padding: 0 8px;
  font-size: var(--fs-body);
  line-height: 1.2;
  text-align: center;
}

/* Card inteiro clicável, mantendo o link somente no título (âncora descritiva). */
.card__link::after {
  content: "";
  position: absolute;
  inset: 0;
  z-index: 1;
}

.card__link:focus-visible { outline: none; }
.card:has(.card__link:focus-visible) { outline: 2px solid var(--cobre-500); outline-offset: 3px; }
.card:hover .card__title { text-decoration: underline; text-underline-offset: 5px; text-decoration-thickness: 1px; }

.card--all { align-items: center; }
.card--all .card__cta {
  position: relative;
  z-index: 2;
  margin-top: var(--cta-overlap);
  padding-inline: clamp(20px, 5.71px + 2.381vw, 40px);
  white-space: nowrap;
}
.card--all .card__cta::after { content: none; }

.catalog__more { margin-top: 20px; }

/* ----- Mobile: carrossel horizontal com rolagem nativa ----- */
@media (max-width: 767.98px) {
  .cards {
    --card-unit: 135px;
    --card-label: 43px;
    --cta-overlap: -12px;
    grid-template-rows: auto;
    grid-auto-flow: row dense;
    margin-inline: calc(-1 * var(--gutter));
    padding-inline: var(--gutter);
    overflow-x: auto;
    overscroll-behavior-x: contain;
    scroll-snap-type: x proximity;
    scroll-padding-inline: var(--gutter);
    scrollbar-width: none;
  }

  .cards::-webkit-scrollbar { display: none; }

  .cards--fabricacao { grid-template-columns: repeat(7, var(--card-unit)); }
  /* número de colunas vem do HTML (--cols), pois a quantidade de serviços vem do banco */
  .cards--reformas { grid-template-columns: repeat(var(--cols, 5), var(--card-unit)); }

  .card { scroll-snap-align: start; }
  .card--wide,
  .card--wide-mobile { grid-column: span 2; }

  .card__img { height: 130px; }
}

/* ----- Tablet e desktop: grade de 4 colunas ----- */
@media (min-width: 768px) {
  .cards {
    --card-label: clamp(56px, 25.1px + 4.02vw, 85px);
    --cta-overlap: clamp(-22px, -2.6px - 1.35vw, -12px);
    grid-template-columns: repeat(4, minmax(0, 1fr));
  }

  .card--wide { grid-column: span 2; }

  .card__img { aspect-ratio: 285 / 247; }

  /* Cards largos acompanham a altura da linha definida pelos cards simples. */
  .card--wide .card__img {
    flex: 1 1 0;
    min-height: 0;
    aspect-ratio: auto;
  }

  .catalog__more { display: none; }
}

/* ==========================================================================
   Ofício
   ========================================================================== */

.story { margin-top: var(--space-section); }

.story__card {
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  min-height: 350px;
  padding: var(--pad-panel);
  padding-bottom: clamp(38px, 26.86px + 2.857vw, 70px);
}

.story__title {
  margin-top: clamp(28px, 24.29px + 0.952vw, 36px);
  color: var(--linho-100);
}

.story__line { display: block; }

/* No Figma Mobile o título ocupa parte do respiro lateral para manter 2 linhas. */
@media (max-width: 767.98px) {
  .story__title { margin-right: calc(8px - var(--pad-panel)); letter-spacing: -0.015em; }
  .section-lead__line { display: block; }
}

.story__footer {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 20px;
  margin-top: clamp(14px, 4.34px + 2.476vw, 40px);
}

.story__text {
  max-width: 24.2em;
  line-height: 1.25;
}

@media (min-width: 1200px) {
  .story__footer {
    flex-direction: row;
    align-items: center;
    justify-content: space-between;
  }

  .story__text { line-height: 1.33; }
}

/* ==========================================================================
   Rodapé / Contato
   ========================================================================== */

.site-footer {
  margin-top: var(--space-section);
  padding-bottom: calc(137px + env(safe-area-inset-bottom));
}

.site-footer__inner { position: relative; }

.contact {
  display: grid;
  gap: 20px;
  padding: var(--pad-panel);
}

.contact__head {
  display: flex;
  align-items: center;
  gap: clamp(20px, 12.57px + 1.905vw, 40px);
  margin-bottom: 20px;
}

.contact__badge {
  display: grid;
  place-items: center;
  width: clamp(66px, 61.54px + 1.143vw, 78px);
  aspect-ratio: 1;
  border-radius: clamp(14px, 13.26px + 0.19vw, 16px);
  background: var(--cobre-500);
  color: var(--rubi-500);
  font-size: clamp(40px, 37.8px + 0.57vw, 46px);
  flex: none;
}

.contact__title { color: var(--linho-100); }
.contact__title > * { display: block; }

.contact__whatsapp {
  display: grid;
  gap: 20px;
}

.btn--whatsapp {
  justify-content: flex-start;
  width: 100%;
  gap: clamp(10px, 7.8px + 0.57vw, 16px);
  padding-inline: clamp(24px, 21.03px + 0.762vw, 40px);
}

.btn--whatsapp .icon { font-size: clamp(34px, 31.77px + 0.571vw, 40px); }

.contact__info {
  display: grid;
  gap: 20px;
  margin-top: 8px;
}

.contact__info dt { color: var(--cobre-500); line-height: 1.2; }
.contact__info dd { line-height: 1.2; }

.social {
  display: flex;
  align-items: center;
  justify-content: space-between;
}

/* Os ícones têm respiro interno de ~16% no viewBox: margens negativas ampliam o
   SVG para que a área visível tenha o tamanho do Figma (42px mobile / 48px desktop). */
.social__link {
  --size: 42px;
  display: flex;
  align-items: center;
  justify-content: center;
  width: var(--size);
  height: var(--size);
  transition: opacity .2s ease;
}

.social__link .icon {
  max-width: none;
  width: calc(var(--size) * 1.185);
  height: calc(var(--size) * 1.185);
  margin: calc(var(--size) * -0.0925);
}

.social__link--wide { width: calc(var(--size) * 1.27); }

.social__link--wide .icon {
  width: calc(var(--size) * 1.455);
  height: calc(var(--size) * 1.455);
  margin: calc(var(--size) * -0.2275) calc(var(--size) * -0.0925);
}

.social__link:hover { opacity: .75; }

.social--footer {
  margin-top: 40px;
  padding-inline: 20px;
  color: var(--rubi-500);
}

@media (min-width: 768px) and (max-width: 1199.98px) {
  .contact__whatsapp { display: flex; flex-wrap: wrap; }
  .btn--whatsapp { width: auto; }
  .social--footer { justify-content: flex-start; gap: 40px; padding-inline: 0; }
}

@media (min-width: 1200px) {
  .site-footer { padding-bottom: 120px; }

  /* Os botões de WhatsApp ocupam o canto superior direito da mesma linha das
     informações, permitindo que o endereço corra em uma linha (como no Figma). */
  .contact {
    grid-template-columns: 1fr auto;
    column-gap: 40px;
    row-gap: 32px;
    padding-top: 64px;
  }

  .contact__head { grid-column: 1 / -1; margin-bottom: 0; }
  .contact__title > * { display: inline; }

  .contact__whatsapp {
    grid-column: 2;
    grid-row: 2;
    display: flex;
    align-self: start;
    gap: 20px;
  }

  .btn--whatsapp { width: auto; }

  .contact__info {
    grid-column: 1 / -1;
    grid-row: 2;
    gap: 36px;
    margin-top: 6px;
  }

  /* No desktop os ícones sociais ficam dentro do painel (canto inferior direito). */
  .social--footer {
    position: absolute;
    right: var(--pad-panel);
    bottom: var(--pad-panel);
    gap: 40px;
    margin: 0;
    padding: 0;
    color: var(--linho-100);
  }

  .social--footer .social__link { --size: 48px; }
}

/* ==========================================================================
   Componentes compartilhados — Fabricação / Produto
   ========================================================================== */

/* Seta longa desenhada em CSS: o comprimento acompanha o botão sem distorcer a ponta. */
.arrow-line {
  position: relative;
  display: block;
  width: var(--arrow-w, 56px);
  height: 12px;
}

.arrow-line::before {
  content: "";
  position: absolute;
  top: 50%;
  left: 0;
  right: 1px;
  height: 1.2px;
  background: currentColor;
  transform: translateY(-50%);
}

.arrow-line::after {
  content: "";
  position: absolute;
  top: 50%;
  right: 1px;
  width: 8px;
  height: 8px;
  border-top: 1.2px solid currentColor;
  border-right: 1.2px solid currentColor;
  transform: translateY(-50%) rotate(45deg);
}

/* Filtros de categoria (Design System: "Filtro") */
.chips-nav { margin-top: var(--space-section); }

.chips {
  display: flex;
  flex-wrap: wrap;
  gap: clamp(10px, 6.29px + 0.952vw, 20px);
  font-size: clamp(16px, 14.51px + 0.381vw, 20px);
}

.chip {
  display: inline-flex;
  align-items: center;
  min-height: clamp(31px, 29.14px + 0.476vw, 36px);
  padding: 0 20px;
  border: 1px solid var(--rubi-500);
  border-radius: 16px;
  line-height: 1.1;
  white-space: nowrap;
  transition: background-color .2s ease, color .2s ease, border-color .2s ease;
}

.chip:hover {
  border-color: var(--cobre-500);
  color: var(--cobre-500);
}

.chip[aria-current="page"] {
  border-color: var(--cobre-500);
  background: var(--cobre-500);
  color: var(--linho-100);
}

/* No mobile os filtros viram uma faixa rolável de duas linhas. */
@media (max-width: 767.98px) {
  .chips-scroller {
    margin-inline: calc(-1 * var(--gutter));
    padding-inline: var(--gutter);
    overflow-x: auto;
    overscroll-behavior-x: contain;
    scrollbar-width: none;
  }

  .chips-scroller::-webkit-scrollbar { display: none; }
  .chips { width: 48em; } /* 2 linhas: 6 + 5 chips, como no Figma Mobile */
}

/* Tags (Design System: "Tags") */
.tags { margin-top: var(--space-section); }

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

.tag {
  display: inline-block;
  padding: 3px 10px;
  border: 1px solid var(--rubi-500);
  border-radius: 16px;
  font-size: clamp(10px, 7.77px + 0.571vw, 16px);
  line-height: 1.1;
  transition: background-color .2s ease, color .2s ease;
}

.tag:hover {
  background: var(--rubi-500);
  color: var(--linho-100);
}

.btn--block { width: 100%; }

/* ==========================================================================
   Página Fabricação (catálogo)
   ========================================================================== */

.page-hero__card {
  padding: var(--pad-panel);
  padding-bottom: clamp(38px, 28.86px + 2.286vw, 72px);
}

.page-hero__title {
  margin-top: clamp(16px, 15.26px + 0.19vw, 18px);
  color: var(--linho-100);
}

.page-hero__line { display: block; }

.page-hero__lead {
  font-size: var(--fs-body); /* é um H2: sem isso herdaria o tamanho padrão de h2 do navegador */
  margin-top: clamp(0px, 21.94px - 1.524vw, 16px);
  line-height: 1.2;
}

@media (min-width: 1024px) {
  .page-hero__line { display: inline; }
}

.products {
  --card-label: 43px;
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 20px;
  margin-top: clamp(20px, 12.57px + 1.905vw, 40px);
}

.products .card__img { height: 130px; }

.card__body {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  min-height: var(--card-label);
  padding: 4px 8px;
  text-align: center;
}

.card__name {
  font-size: var(--fs-body);
  line-height: 1;
}

.card__meta {
  font-size: clamp(10px, 7.77px + 0.571vw, 16px);
  line-height: 1.1;
}

.card:hover .card__name { text-decoration: underline; text-underline-offset: 4px; text-decoration-thickness: 1px; }

@media (min-width: 768px) {
  .products {
    --card-label: clamp(56px, 25.1px + 4.02vw, 85px);
    grid-template-columns: repeat(4, minmax(0, 1fr));
  }

  .products .card__img {
    height: auto;
    aspect-ratio: 285 / 247;
  }
}

.pagination { margin-top: clamp(20px, -2.29px + 5.714vw, 80px); }

.pagination__list {
  display: flex;
  justify-content: center;
  gap: 20px;
}

.pagination__page,
.pagination__next {
  display: grid;
  place-items: center;
  height: var(--btn-height);
  border-radius: var(--radius-btn);
  font-size: var(--fs-body);
  transition: background-color .2s ease, color .2s ease;
}

.pagination__page {
  width: var(--btn-height);
  border: 1px solid var(--rubi-500);
}

.pagination__page:hover { background: var(--linho-700); }

.pagination__page[aria-current="page"] {
  background: var(--rubi-500);
  color: var(--linho-100);
}

.pagination__next {
  --arrow-w: clamp(56px, -12.8px + 17.64vw, 248px);
  width: clamp(153px, 89.4px + 16.3vw, 324px);
  background: var(--cobre-500);
  color: var(--linho-100);
}

.pagination__next:hover { background: var(--cobre-700); }

@media (max-width: 767.98px) {
  .pagination__next-item { flex: 1; }
  .pagination__next { width: 100%; }
}

/* ==========================================================================
   Página de produto (single)
   ========================================================================== */

.product {
  display: flex;
  flex-direction: column;
  gap: 20px;
}

/* Galeria com rolagem nativa (funciona sem JS); pontos adicionados pelo script. */
.gallery {
  position: relative;
  overflow: hidden;
  border-radius: var(--radius-panel);
  background: var(--linho-700);
}

.gallery__track {
  display: flex;
  aspect-ratio: 1;
  overflow-x: auto;
  scroll-snap-type: x mandatory;
  scrollbar-width: none;
}

.gallery__track::-webkit-scrollbar { display: none; }

.gallery__slide {
  flex: 0 0 100%;
  scroll-snap-align: start;
}

.gallery__slide img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.gallery__dots:not([hidden]) {
  position: absolute;
  bottom: calc(var(--g-offset) + var(--btn-height) / 2);
  left: 50%;
  display: flex;
  align-items: center;
  gap: clamp(5px, 3.51px + 0.381vw, 9px);
  transform: translate(-50%, 50%);
}

.gallery__dot {
  position: relative;
  width: clamp(6px, 4.51px + 0.381vw, 10px);
  height: clamp(6px, 4.51px + 0.381vw, 10px);
  border-radius: 999px;
  background: rgba(239, 229, 215, 0.6);
  transition: width .25s ease, background-color .25s ease;
}

.gallery__dot::before {
  content: "";
  position: absolute;
  inset: -9px -4px;
}

/* Controles da galeria (mesmo padrão do slider da Home). */
.gallery {
  --g-offset: clamp(20px, 12.57px + 1.905vw, 40px);
  --ring-size: clamp(29px, 21.2px + 2vw, 50px);
  --slider-interval: 5s;
}

/* Sobre fotos claras, uma sombra sutil garante o contraste do anel. */
.gallery__ring {
  top: var(--g-offset);
  right: var(--g-offset);
  filter: drop-shadow(0 0 1.5px rgba(54, 0, 9, 0.55)) drop-shadow(0 1px 6px rgba(54, 0, 9, 0.25));
  --ring-arc: var(--linho-100);
  --ring-track: rgba(239, 229, 215, 0.45);
}

.gallery__next {
  position: absolute;
  right: var(--g-offset);
  bottom: var(--g-offset);
  z-index: 2;
}

.js .gallery__next[hidden] { display: none; }

.gallery__dot[aria-current="true"] {
  width: clamp(15px, 11.66px + 0.857vw, 24px);
  background: var(--linho-100);
}

.product__intro {
  padding: 40px;
}

.product__title {
  margin-top: clamp(12px, 5.86px + 1.57vw, 28px);
  color: var(--linho-100);
}

.product__line { display: block; }

.product__ref {
  width: fit-content;
  padding: 4px 10px;
  border-radius: 16px;
  background: var(--rubi-100);
  color: var(--linho-100);
  font-size: 10px;
  line-height: 1.2;
}

.product__category {
  margin-top: 20px;
  font-size: var(--fs-title);
  line-height: 0.95;
}

.quote { margin-top: 20px; }

.quote__group {
  min-width: 0;
  margin: 0;
  padding: 0;
  border: 0;
}

.quote__legend {
  padding: 0;
  font-size: var(--fs-body);
  line-height: 1.2;
}

.swatches {
  display: grid;
  grid-template-columns: repeat(6, minmax(0, clamp(46px, 45.26px + 0.19vw, 48px)));
  gap: 10px;
  margin-top: clamp(16px, 21.49px - 0.381vw, 20px);
}

.swatch {
  position: relative;
  display: grid;
  place-items: center;
  width: 100%;
  aspect-ratio: 1;
  border-radius: 16px;
  background: var(--swatch);
  cursor: pointer;
}

.swatch__input {
  position: absolute;
  inset: 0;
  margin: 0;
  opacity: 0;
  cursor: pointer;
}

.swatch:has(:checked) { outline: 2px solid var(--rubi-500); outline-offset: 3px; }
.swatch:has(:focus-visible) { outline: 2px solid var(--cobre-500); outline-offset: 3px; }

.swatch--more {
  background: var(--linho-900);
  color: var(--rubi-500);
  font-size: 16px;
}

.quote__note {
  margin-top: 40px;
  font-size: 16px;
  line-height: 1.1;
}

.quote__note em { display: block; }

.quote__note + .quote__group { margin-top: 20px; }

.measures {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: clamp(10px, 8.51px + 0.381vw, 14px);
  margin-top: 16px;
}

.measure {
  display: flex;
  flex-direction: column;
  align-items: center;
}

.measure__input {
  width: 100%;
  height: clamp(46px, 45.63px + 0.095vw, 47px);
  border: 1px solid var(--rubi-300);
  border-radius: clamp(14px, 13.26px + 0.19vw, 16px);
  background: var(--linho-100);
  color: var(--rubi-500);
  font: inherit;
  font-size: 16px;
  text-align: center;
  -moz-appearance: textfield;
  appearance: textfield;
}

.measure__input::-webkit-outer-spin-button,
.measure__input::-webkit-inner-spin-button { -webkit-appearance: none; margin: 0; }

.measure__label {
  margin-top: clamp(10px, 6.29px + 0.952vw, 20px);
  color: var(--rubi-100);
  font-size: clamp(10px, 7.77px + 0.571vw, 16px);
  line-height: 1;
}

.quote__submit { margin-top: 20px; }
.quote__submit .icon { font-size: 1.45em; }

.faq {
  display: grid;
  gap: clamp(10px, 6.29px + 0.952vw, 20px);
  margin-top: 20px;
}

.faq__item {
  border: 1px solid var(--rubi-300);
  border-radius: 16px;
  background: var(--linho-300);
}

.faq__question {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  min-height: clamp(38px, 30.57px + 1.905vw, 58px);
  padding: 6px 20px;
  font-size: var(--fs-body);
  line-height: 1.2;
  list-style: none;
  cursor: pointer;
}

.faq__question::-webkit-details-marker { display: none; }

.faq__icon {
  font-size: clamp(16px, 14.51px + 0.381vw, 20px);
  transition: transform .2s ease;
}

.faq__item[open] .faq__icon { transform: rotate(180deg); }

.faq__answer {
  padding: 0 20px 20px;
  font-size: clamp(14px, 12.51px + 0.381vw, 18px);
  line-height: 1.4;
}

.faq__answer > * + * { margin-top: 12px; }

.faq__question:hover { color: var(--cobre-700); }

@supports (interpolate-size: allow-keywords) {
  .faq { interpolate-size: allow-keywords; }

  .faq__item::details-content {
    block-size: 0;
    overflow: hidden;
    transition: block-size .3s ease, content-visibility .3s allow-discrete;
  }

  .faq__item[open]::details-content { block-size: auto; }
}

.related { margin-top: var(--space-section); }
.related .chips-nav { margin-top: 20px; }

/* Mobile: o "Ref" acompanha a linha do nome, como no Figma. */
@media (max-width: 767.98px) {
  .product__intro { position: relative; }

  .product__ref {
    position: absolute;
    right: 40px;
    bottom: 40px;
  }

  .product__category { margin-top: 40px; }
  .faq { margin-top: 20px; }

  /* Mantém as perguntas em 1 linha em 390px, como no Figma Mobile. */
  .faq__question {
    gap: 4px;
    padding-inline: 14px 10px;
    letter-spacing: -0.01em;
  }

  .faq__icon { font-size: 14px; }
}

@media (min-width: 768px) {
  .product {
    display: grid;
    grid-template-columns: minmax(0, 1.7fr) minmax(300px, 1fr);
    grid-template-areas:
      "gallery panel"
      "faq panel";
    align-items: start;
    gap: 20px;
  }

  .gallery { grid-area: gallery; }
  .faq { grid-area: faq; margin-top: 4px; }

  .product__panel {
    grid-area: panel;
    padding: 20px 20px 34px;
    border-radius: 30px;
    background: var(--linho-300);
    box-shadow: 0 16px 40px rgba(72, 10, 20, 0.12);
  }

  .product__intro { border-radius: 30px; }
  .product__ref { margin-top: 20px; }
  .product__category { margin-top: 40px; }
  .quote { margin-top: 24px; }
  .quote__note { margin-top: 40px; }
  .quote__note + .quote__group { margin-top: 12px; }
  .swatch { border-radius: 50%; }
}

/* ==========================================================================
   Páginas institucionais (Personalizados / Quem somos)
   ========================================================================== */

.intro__card { padding: var(--pad-panel); }

/* Quando o painel termina em texto, compensa a altura de linha (como no Figma). */
.intro__card:not(:has(.intro__cta)) { padding-bottom: clamp(38px, 28.86px + 2.286vw, 72px); }

.intro__title {
  margin-top: clamp(16px, 13.03px + 0.762vw, 24px);
  color: var(--linho-100);
}

.intro__line--break { display: block; }

.intro__text {
  max-width: 40.5em;
  margin-top: clamp(16px, 12.29px + 0.952vw, 26px);
  line-height: 1.15;
}

.intro__text p + p { margin-top: 1.15em; }

.intro__cta {
  width: min(100%, 398px);
  justify-content: center;
  margin-top: 40px;
}

@media (min-width: 768px) {
  .intro__text { line-height: 1.33; }
  .intro__text p + p { margin-top: 1.33em; }
}

@media (min-width: 1024px) {
  .intro__line--break { display: inline; }
}

.about { margin-top: 40px; }

.about__lead {
  margin-top: 12px;
  line-height: 1.15;
}

.values {
  display: grid;
  gap: 20px;
  align-items: start;
  margin-top: 36px;
}

.value {
  border: 1px solid var(--rubi-100);
  border-radius: clamp(16px, 15.26px + 0.19vw, 18px);
  background: var(--linho-300);
}

.value__head {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 4px;
  padding: clamp(12px, 11.26px + 0.19vw, 14px) 16px 0 20px;
  list-style: none;
  cursor: pointer;
}

.value__head::-webkit-details-marker { display: none; }

.value__title {
  font-size: var(--fs-body);
  line-height: 1.1;
}

.value__icon {
  flex: none;
  margin-top: 0.1em;
  font-size: clamp(14px, 13.26px + 0.19vw, 16px);
  transform: rotate(180deg);
  transition: transform .2s ease;
}

.value:not([open]) .value__icon { transform: none; }
.value:not([open]) .value__head { padding-bottom: clamp(12px, 11.26px + 0.19vw, 14px); }

.value__text {
  padding: 6px 20px clamp(16px, 14.51px + 0.381vw, 20px);
  color: var(--rubi-100);
  font-size: var(--fs-body);
  line-height: 1.05;
}

@media (min-width: 768px) {
  .about__lead { line-height: 1.33; }

  .values {
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: clamp(20px, 5.71px + 2.381vw, 40px);
  }
}

/* ---------- Movimento reduzido ---------- */
@media (prefers-reduced-motion: reduce) {
  *,
  *::before,
  *::after {
    animation-duration: .01ms !important;
    transition-duration: .01ms !important;
  }
}

/* ==========================================================================
   Rodapé — linha final (direitos, crédito e mapa do site)
   Fica fora do painel "Fale com a gente", como pedido na integração.
   ========================================================================== */

.site-footer__bottom {
  margin-top: 32px;
  padding-top: 20px;
  border-top: 1px solid var(--linho-900);
  color: var(--rubi-500);
  font-size: 0.875rem;
  line-height: 1.6;
  text-align: center;
}

.site-footer__bottom a {
  color: inherit;
  text-decoration: underline;
  text-underline-offset: 3px;
  text-decoration-thickness: 1px;
}

.site-footer__bottom a:hover { color: var(--cobre-500); }

.site-footer__sep { margin-inline: .35em; }

@media (min-width: 1200px) {
  .site-footer__bottom { margin-top: 40px; }
}

/* ==========================================================================
   Catálogo — integração PHP
   ========================================================================== */

/* .card usa display:flex, que anularia o atributo hidden usado pela paginação. */
.products > [hidden] { display: none; }

/* Menu: seção atual (subcategoria dentro da categoria) com o mesmo destaque da página atual. */
.main-nav__link[aria-current="true"] { text-decoration-color: currentColor; }

/* rolagem até o topo da lista ao trocar de página não fica escondida atrás do menu fixo */
.products { scroll-margin-top: 140px; }

/* ==========================================================================
   Produto (single) — integração PHP
   ========================================================================== */

/* "Escolha do tecido: Consulte" (provisório, até o cadastro de tecidos/cores no painel). */
.quote__fabric strong { font-weight: 400; color: var(--cobre-700); }

/* Dicas do painel: sempre abertas (sem acordeão). */
.faq--open .faq__question {
  padding-top: 14px;
  padding-bottom: 10px;
  cursor: auto;
}

.faq--open .faq__question:hover { color: inherit; }
.faq--open .faq__answer ul { padding-left: 1.2em; list-style: disc; }
.faq--open .faq__answer a { text-decoration: underline; text-underline-offset: 3px; }
.faq--open .faq__answer hr { border: 0; border-top: 1px solid var(--rubi-300); }

@media (max-width: 767.98px) {
  .faq--open .faq__question { letter-spacing: normal; }
}

.related--products .products { margin-top: 20px; }


/* H1 do produto: nome em destaque; subtítulo + cidade em linha menor (mesmo texto do H1 antigo). */
.product__sub {
  display: block;
  margin-top: .35em;
  font-size: .42em;
  line-height: 1.1;
}

.site-footer .tags { margin-top: 40px; }

/* Mobile: com o subtítulo no H1, o "Ref" vai para baixo do título (não sobrepõe a última linha). */
@media (max-width: 767.98px) {
  .product__ref { position: static; margin-top: 16px; }
}

/* Serviço (single): "Leva e traz" logo abaixo do H2 e descrição do serviço sem título. */
.quote__note--first { margin-top: 0; }
.quote__note strong { font-weight: 400; color: var(--cobre-700); }
.quote__note--first + .quote__submit { margin-top: 24px; }
.faq__item--text .faq__answer { padding-top: 20px; }

/* Personalizados: H2 dentro do painel, no tamanho do texto; link do texto sublinhado. */
.intro__subtitle {
  margin-bottom: 1.15em;
  color: var(--cobre-300, inherit);
  font-size: inherit;
  line-height: inherit;
}

.intro__text a {
  text-decoration: underline;
  text-underline-offset: 3px;
  text-decoration-thickness: 1px;
}

.intro__text a:hover { color: var(--cobre-300, inherit); }

@media (min-width: 768px) {
  .intro__subtitle { margin-bottom: 1.33em; }
}

/* ==========================================================================
   Mapa do site (sem tela no Figma: usa os mesmos tokens e componentes)
   ========================================================================== */

.sitemap__group { margin-top: clamp(40px, 28.86px + 2.857vw, 70px); }
.sitemap__group:first-child { margin-top: 40px; }

.sitemap__title a:hover { color: var(--cobre-700); }

.sitemap__subs {
  display: grid;
  gap: 20px;
  margin-top: 20px;
}

.sitemap__sub {
  padding: 16px 20px 20px;
  border: 1px solid var(--rubi-300);
  border-radius: 16px;
  background: var(--linho-300);
}

.sitemap__subtitle {
  font-size: var(--fs-body);
  line-height: 1.2;
}

.sitemap__subtitle a { text-decoration: underline; text-underline-offset: 3px; text-decoration-thickness: 1px; }

.sitemap__list {
  display: grid;
  gap: 6px;
  margin-top: 12px;
  font-size: clamp(14px, 12.51px + 0.381vw, 18px);
  line-height: 1.3;
}

.sitemap__sub .sitemap__list { margin-top: 10px; }

.sitemap__list a,
.sitemap__subtitle a { transition: color .2s ease; }

.sitemap__list a:hover,
.sitemap__subtitle a:hover { color: var(--cobre-700); }

.sitemap__list--columns { column-gap: 24px; }
.sitemap__list--columns { display: block; columns: 2; }
.sitemap__list--columns li { break-inside: avoid; margin-bottom: 6px; }

.sitemap__cities { margin-top: 20px; }
.tag[aria-current="page"] { background: var(--rubi-500); color: var(--linho-100); }

@media (min-width: 768px) {
  .sitemap__subs { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .sitemap__list--columns { columns: 3; }
}

@media (min-width: 1200px) {
  .sitemap__subs { grid-template-columns: repeat(3, minmax(0, 1fr)); }
  .sitemap__list--columns { columns: 4; }
}

.sitemap__subs { align-items: start; }

/* Celular: itens das subcategorias em 2 colunas (página bem mais curta). */
@media (max-width: 767.98px) {
  .sitemap__sub .sitemap__list { grid-template-columns: repeat(2, minmax(0, 1fr)); column-gap: 16px; }
}