/* ==========================================================================
   FUEGO & PIEDRA — Home
   --------------------------------------------------------------------------
   Folha de estilo única da home. Escrita para ser colada em um tema Shopify
   existente sem risco de colisão:

   • Todo seletor é de CLASSE e usa o prefixo `fuego-` (ex.: .fuego-hero).
     Nenhuma tag global (body, h1, a…) é estilizada fora do escopo
     `.fuego-page`, de modo que o tema hospedeiro permanece intacto.
   • Todos os tokens de design (cor, tipografia, espaço, raio, easing) são
     Custom Properties declaradas em `.fuego-page` — também prefixadas.
   • Convenção de nomes: bloco `fuego-bloco`, elemento `fuego-bloco__parte`,
     modificador/estado `.is-*` (ex.: .is-active, .is-scrolled).

   ÍNDICE
   00. Tokens
   01. Reset com escopo e utilitários
   02. Header / navegação
   03. Hero (slider)
   04. Tarja (marquee)
   05. Categorias
   06. Carrossel de produtos (Piedra Viva)
   07. Banner Herencia
   08. One brand. Three paths.
   09. Beño Console (produto em destaque)
   10. Vídeo
   11. Footer
   12. Reveal no scroll / preferências de movimento
   ========================================================================== */


/* ==========================================================================
   00. TOKENS
   ========================================================================== */

.fuego-page {
  /* — Paleta ---------------------------------------------------------- */
  --fuego-color-bg:            #EBD3C7; /* areia — fundo base da página     */
  --fuego-color-bg-alt:        #F4E3DA; /* areia clara — seções texturizadas*/
  --fuego-color-ink:           #231916; /* marrom quase preto — títulos     */
  --fuego-color-ink-soft:      #4A3A34; /* corpo de texto                   */
  --fuego-color-ink-muted:     #7A6157; /* legendas, preços secundários     */
  --fuego-color-terracotta:    #D45535; /* cor de ação / destaque           */
  --fuego-color-terracotta-dk: #8C3F31; /* hover de botões, fundo do footer */
  --fuego-color-white:         #FFFFFF;
  --fuego-color-panel:         rgba(42, 29, 24, 0.95); /* painel do produto  */
  --fuego-color-line:          #C08D7B; /* traços e bordas sobre areia      */
  --fuego-color-line-light:    rgba(235, 211, 199, 0.35); /* sobre terracota*/
  --fuego-color-label:         #BFA79C; /* rótulos dentro do painel escuro  */

  /* — Tipografia ------------------------------------------------------ */
  --fuego-font-display: "Playfair Display", Georgia, "Times New Roman", serif;
  --fuego-font-body:    "Inter", "Helvetica Neue", Arial, sans-serif;
  --fuego-tracking-eyebrow: 0.2em;  /* subtítulos em caixa alta            */
  --fuego-tracking-button:  0.18em; /* rótulos de botão                    */

  /* — Layout ---------------------------------------------------------- */
  --fuego-page-min-width: 1440px; /* largura de desenho (layout desktop)   */
  --fuego-gutter:         96px;   /* margem lateral padrão das seções      */
  --fuego-header-height:  89px;   /* usada para o hero passar sob o header */

  /* — Formas e movimento --------------------------------------------- */
  --fuego-radius:      10px;
  --fuego-radius-sm:   4px;
  --fuego-ease-out:    cubic-bezier(0.22, 1, 0.36, 1);
  --fuego-ease-slide:  cubic-bezier(0.4, 0, 0.2, 1);
  --fuego-speed-fast:  0.35s;
  --fuego-speed:       0.5s;
  --fuego-speed-slow:  0.7s;

  /* — Sombreamentos de leitura sobre imagem -------------------------- */
  --fuego-scrim-card: linear-gradient(180deg, rgba(35,25,22,0) 42%, rgba(20,13,11,0.94) 100%);
}


/* ==========================================================================
   01. RESET COM ESCOPO E UTILITÁRIOS
   Só afeta o que está dentro de .fuego-page.
   ========================================================================== */

/* Reset mínimo de página. Só isto sai do escopo `.fuego-page`: sem ele a
   home ganha a margem padrão de 8px do <body> e as seções full-bleed
   (hero, banner, vídeo, footer) deixam de encostar na borda. No Shopify o
   reset do tema normalmente já cobre estas duas regras — mantê-las é
   inofensivo. O background evita faixa branca além do min-width. */
html,
body:has(.fuego-page) {
  margin: 0;
  background: #EBD3C7; /* = --fuego-color-bg */
}

.fuego-page {
  width: 100%;
  min-width: var(--fuego-page-min-width);
  margin: 0;
  background: var(--fuego-color-bg);
  color: var(--fuego-color-ink);
  font-family: var(--fuego-font-body);
  -webkit-font-smoothing: antialiased;
}

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

.fuego-page img,
.fuego-page svg,
.fuego-page video { display: block; max-width: none; }

.fuego-page a { color: var(--fuego-color-terracotta-dk); text-decoration: none; }
.fuego-page a:hover { color: var(--fuego-color-terracotta); }

/* `:where()` zera a especificidade do reset, de modo que qualquer classe
   `fuego-*` sobrescreva estas margens sem precisar de !important. */
.fuego-page :where(p, h1, h2, h3, h4, figure, ul, ol) { margin: 0; text-wrap: pretty; }
.fuego-page :where(ul, ol) { padding: 0; list-style: none; }

.fuego-page button { font: inherit; }

/* Fundo texturizado reaproveitado em várias seções -------------------- */
.fuego-texture-sand {
  background: var(--fuego-color-bg) url("sustain-bg.webp") no-repeat top left;
  background-size: 100% 100%;
}
.fuego-texture-light {
  background: var(--fuego-color-bg-alt) url("ecosystem-bg.webp") repeat top left;
}

/* Subtítulo em caixa alta. O deslocamento de 5px alinha opticamente o
   rótulo (Inter) com os títulos em Playfair Display. -------------------- */
.fuego-eyebrow {
  margin: 0 0 20px 5px;
  font-size: 14px;
  font-weight: 500;
  letter-spacing: var(--fuego-tracking-eyebrow);
  color: var(--fuego-color-terracotta);
}

/* Filete decorativo sob títulos -------------------------------------- */
.fuego-rule { width: 150px; height: auto; }

/* Botão sólido de ação ----------------------------------------------- */
.fuego-btn {
  display: inline-flex;
  align-items: center;
  justify-content: space-between;
  gap: 34px;
  width: fit-content;
  height: 44px;
  padding: 0 22px;
  border: none;
  border-radius: var(--fuego-radius-sm);
  background: var(--fuego-color-terracotta);
  color: var(--fuego-color-white);
  font-size: 13px;
  font-weight: 500;
  letter-spacing: var(--fuego-tracking-button);
  cursor: pointer;
  transition: background-color var(--fuego-speed-fast) ease;
}
.fuego-btn:hover { background: var(--fuego-color-terracotta-dk); color: var(--fuego-color-white); }

/* Variante contornada, usada sobre imagem ---------------------------- */
.fuego-btn--ghost {
  background: transparent;
  border: 1px solid rgba(255, 255, 255, 0.75);
}
.fuego-btn--ghost:hover { background: rgba(255, 255, 255, 0.14); }

/* Link com seta e sublinhado ----------------------------------------- */
.fuego-link-arrow {
  display: inline-flex;
  align-items: center;
  gap: 16px;
  padding-bottom: 8px;
  border-bottom: 1px solid var(--fuego-color-terracotta);
  color: var(--fuego-color-terracotta);
  font-size: 14px;
  font-weight: 500;
  letter-spacing: 0.16em;
  transition: gap var(--fuego-speed-fast) ease, color var(--fuego-speed-fast) ease;
}
.fuego-link-arrow:hover { gap: 24px; color: var(--fuego-color-terracotta-dk); }

/* Botão circular de navegação (setas de carrossel) -------------------- */
.fuego-nav-btn {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 50px;
  height: 50px;
  border: 1px solid var(--fuego-color-line);
  border-radius: 100%;
  background: transparent;
  color: var(--fuego-color-terracotta-dk);
  font-size: 20px;
  cursor: pointer;
  transition: background-color var(--fuego-speed-fast) ease,
              border-color var(--fuego-speed-fast) ease,
              color var(--fuego-speed-fast) ease;
}
.fuego-nav-btn:hover {
  background: var(--fuego-color-terracotta-dk);
  border-color: var(--fuego-color-terracotta-dk);
  color: var(--fuego-color-white);
}


/* ==========================================================================
   02. HEADER / NAVEGAÇÃO
   Transparente sobre o hero; ganha textura e tinta escura ao rolar
   (classe .is-scrolled aplicada pelo JS).
   ========================================================================== */

.fuego-header {
  position: sticky;
  top: 0;
  left: 0;
  right: 0;
  z-index: 60;
  background: transparent;
  transition: background-color 0.4s ease;
}
.fuego-header.is-scrolled {
  background: var(--fuego-color-bg) url("bg-texture.webp") repeat top left;
}
/* Modificador para desligar o comportamento fixo, se o tema preferir. */
.fuego-header--static { position: relative; }

.fuego-header__inner {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 26px var(--fuego-gutter);
}

/* Os dois logos ficam sobrepostos e alternam por opacidade — evita
   qualquer salto de layout na troca de estado. ------------------------ */
.fuego-header__logo { position: relative; display: block; height: 34px; line-height: 0; }
.fuego-header__logo img { height: 34px; width: auto; transition: opacity 0.4s ease; }
.fuego-header__logo-dark { position: absolute; left: 0; top: 0; opacity: 0; }
.fuego-header.is-scrolled .fuego-header__logo-light { opacity: 0; }
.fuego-header.is-scrolled .fuego-header__logo-dark { opacity: 1; }

.fuego-header__nav {
  display: flex;
  align-items: center;
  gap: 48px;
  color: var(--fuego-color-white);
  transition: color 0.4s ease;
}
.fuego-header__nav a {
  padding-bottom: 3px;
  border-bottom: 1px solid transparent;
  color: inherit;
  font-size: 16px;
}
.fuego-header__nav a:hover { color: inherit; border-bottom-color: currentColor; }

.fuego-header__actions {
  display: flex;
  align-items: center;
  gap: 22px;
  color: var(--fuego-color-white);
  transition: color 0.4s ease;
}
.fuego-header.is-scrolled .fuego-header__nav,
.fuego-header.is-scrolled .fuego-header__actions { color: var(--fuego-color-ink-soft); }

.fuego-header__action { color: inherit; opacity: 0.85; }
.fuego-header__action:hover { color: inherit; opacity: 1; }
.fuego-header__divider { width: 1px; height: 26px; background: currentColor; opacity: 0.4; }

/* Ícones desenhados em CSS para herdar a cor do header ---------------- */
.fuego-icon-search { display: flex; align-items: flex-end; width: 24px; height: 24px; margin-bottom: 8px; }
.fuego-icon-search__lens {
  width: 16px; height: 16px;
  border: 1.5px solid currentColor; border-radius: 50%;
}
.fuego-icon-search__handle {
  width: 8px; height: 1.5px; margin-left: -2px;
  background: currentColor;
  transform: rotate(45deg);
  transform-origin: left center;
}
.fuego-icon-cart { display: flex; flex-direction: column; align-items: center; }
.fuego-icon-cart__handle {
  width: 11px; height: 6px;
  border: 1.5px solid currentColor; border-bottom: none; border-radius: 6px 6px 0 0;
}
.fuego-icon-cart__body { width: 22px; height: 19px; border: 1.5px solid currentColor; border-radius: 2px; }


/* ==========================================================================
   03. HERO (SLIDER)
   Três slides em crossfade. O texto de cada slide tem tratamento próprio
   (alinhado à esquerda ou centralizado), por isso cada um é um bloco.
   ========================================================================== */

.fuego-hero {
  position: relative;
  height: 100vh;
  min-height: 780px;
  margin-top: calc(var(--fuego-header-height) * -1); /* passa sob o header */
  background: var(--fuego-color-ink);
  overflow: hidden;
}

.fuego-hero__media { position: absolute; inset: 0; }
.fuego-hero__slide {
  position: absolute;
  inset: 0;
  opacity: 0;
  transition: opacity 1.1s ease;
}
.fuego-hero__slide.is-active { opacity: 1; }
.fuego-hero__slide img { width: 100%; height: 100%; object-fit: cover; object-position: center; }

/* Camadas de leitura: véu diagonal fixo + véu radial só no slide 1
   (texto centralizado) + degradê superior para o header transparente. -- */
.fuego-hero__scrim {
  position: absolute;
  inset: 0;
  background: linear-gradient(100deg,
    rgba(35,25,22,0.72) 0%,
    rgba(35,25,22,0.45) 42%,
    rgba(35,25,22,0.12) 70%,
    rgba(35,25,22,0.28) 100%);
}
.fuego-hero__scrim--center {
  background: radial-gradient(120% 85% at 50% 52%,
    rgba(35,25,22,0.62) 0%,
    rgba(35,25,22,0.5) 45%,
    rgba(35,25,22,0.24) 100%);
  opacity: 0;
  transition: opacity 0.9s ease;
  pointer-events: none;
}
.fuego-hero__scrim--center.is-active { opacity: 1; }
.fuego-hero__scrim--top {
  position: absolute;
  left: 0; right: 0; top: 0;
  height: 200px;
  background: linear-gradient(180deg, rgba(35,25,22,0.55) 0%, rgba(35,25,22,0) 100%);
}

.fuego-hero__content {
  position: absolute;
  inset: 0;
  z-index: 2;
  display: flex;
  flex-direction: column;
  justify-content: center;
  max-width: 720px;
  padding: var(--fuego-header-height) 0 0 156px;
  opacity: 0;
  pointer-events: none; /* só o slide ativo recebe cliques */
  transition: opacity 0.9s ease;
}
.fuego-hero__content.is-active { opacity: 1; pointer-events: auto; }

/* Slide com texto centralizado ---------------------------------------- */
.fuego-hero__content--center {
  align-items: center;
  max-width: none;
  padding: var(--fuego-header-height) var(--fuego-gutter) 0;
  text-align: center;
}

.fuego-hero__eyebrow {
  margin: 0 0 22px 5px;
  font-size: 14px;
  font-weight: 500;
  letter-spacing: 0.24em;
  color: var(--fuego-color-bg);
}
.fuego-hero__content--center .fuego-hero__eyebrow { margin-left: 0; color: var(--fuego-color-white); }

.fuego-hero__title {
  font-family: var(--fuego-font-display);
  font-size: 76px;
  line-height: 1.02;
  font-weight: 400;
  letter-spacing: 0.01em;
  color: var(--fuego-color-white);
  margin-bottom: 26px;
}
/* O primeiro slide usa título em caixa alta, mais largo e sem margem. */
.fuego-hero__title--caps { font-size: 64px; line-height: 1.06; margin-bottom: 0; }

.fuego-hero__text {
  margin-bottom: 40px;
  max-width: 460px;
  font-size: 18px;
  line-height: 1.75;
  color: var(--fuego-color-bg);
}
.fuego-hero__text--wide { max-width: 520px; }
.fuego-hero__content--center .fuego-hero__text { max-width: 900px; color: var(--fuego-color-white); }

.fuego-hero__actions { display: flex; align-items: center; gap: 26px; }

/* Setas e bullets ----------------------------------------------------- */
.fuego-hero__arrow {
  position: absolute;
  top: 50%;
  z-index: 3;
  transform: translateY(-50%);
  display: flex;
  align-items: center;
  justify-content: center;
  width: 50px;
  height: 50px;
  border: none;
  border-radius: 100%;
  background: rgba(255, 255, 255, 0.2);
  color: var(--fuego-color-white);
  font-size: 20px;
  cursor: pointer;
  transition: background-color var(--fuego-speed-fast) ease;
}
.fuego-hero__arrow:hover { background: rgba(255, 255, 255, 0.32); }
.fuego-hero__arrow--prev { left: 34px; }
.fuego-hero__arrow--next { right: 34px; }

.fuego-hero__dots {
  position: absolute;
  left: 0; right: 0; bottom: 38px;
  z-index: 3;
  display: flex;
  justify-content: center;
  gap: 14px;
}
.fuego-hero__dot {
  width: 9px; height: 9px; padding: 0;
  border: none; border-radius: 50%;
  background: var(--fuego-color-white);
  opacity: 0.45;
  cursor: pointer;
  transition: opacity var(--fuego-speed-fast) ease;
}
.fuego-hero__dot.is-active { opacity: 1; }


/* ==========================================================================
   04. TARJA (MARQUEE)
   Duas cópias idênticas da lista rolam -50%: no fim do ciclo a segunda
   cópia está exatamente onde a primeira começou, então o loop é invisível.
   ========================================================================== */

.fuego-marquee {
  display: flex;
  padding: 22px 0;
  overflow: hidden;
  white-space: nowrap;
  line-height: 0;
}
.fuego-marquee__track {
  display: flex;
  width: max-content;
  line-height: 1;
  animation: fuego-marquee 38s linear infinite;
}
.fuego-marquee__group {
  display: flex;
  align-items: center;
  gap: 64px;
  padding-right: 64px;
  font-size: 13px;
  font-weight: 500;
  letter-spacing: 0.22em;
  color: var(--fuego-color-ink);
}
@keyframes fuego-marquee {
  from { transform: translateX(0); }
  to   { transform: translateX(-50%); }
}


/* ==========================================================================
   05. CATEGORIAS
   Cinco cards de altura fixa com scrim inferior para o texto.
   ========================================================================== */

.fuego-categories { position: relative; padding: 30px 0 60px; overflow: hidden; }
.fuego-categories__grid {
  display: grid;
  grid-template-columns: repeat(5, minmax(0, 1fr));
  gap: 20px;
  padding: 0 20px;
}

.fuego-category {
  position: relative;
  display: block;
  height: 480px;
  border-radius: var(--fuego-radius);
  overflow: hidden;
}
.fuego-category__img {
  position: absolute;
  inset: 0;
  width: 100%; height: 100%;
  object-fit: cover; object-position: center;
  transition: transform var(--fuego-speed) ease;
}
.fuego-category:hover .fuego-category__img { transform: scale(1.04); }
.fuego-category__scrim { position: absolute; inset: 0; background: var(--fuego-scrim-card); pointer-events: none; }
.fuego-category__body { position: absolute; left: 28px; right: 20px; bottom: 32px; pointer-events: none; }
.fuego-category__num { display: block; margin-bottom: 6px; font-size: 16px; font-weight: 500; color: var(--fuego-color-terracotta); }
.fuego-category__title {
  display: block;
  margin-bottom: 18px;
  font-family: var(--fuego-font-display);
  font-size: 26px;
  line-height: 1.08;
  font-weight: 400;
  color: var(--fuego-color-white);
  white-space: nowrap;
}
.fuego-category__cta {
  display: inline-flex;
  align-items: center;
  gap: 12px;
  font-size: 13px;
  font-weight: 500;
  letter-spacing: var(--fuego-tracking-button);
  color: var(--fuego-color-terracotta);
}
.fuego-category__cta span { font-size: 15px; }


/* ==========================================================================
   06. CARROSSEL DE PRODUTOS (PIEDRA VIVA)
   Duas trilhas sincronizadas: a coluna central mostra o produto atual e a
   coluna da direita mostra o próximo, em formato mais alto. O JS duplica
   os itens e mede a largura das trilhas — ver fuego.js (FuegoCarousel).
   ========================================================================== */

.fuego-products { position: relative; padding: 110px var(--fuego-gutter) 100px; overflow: hidden; }
.fuego-products__brush {
  position: absolute;
  right: 0; bottom: 0;
  height: 100%;
  max-height: 739px;
  width: auto;
  transform: scaleY(-1);
  pointer-events: none;
}
.fuego-products__inner {
  position: relative;
  z-index: 2;
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(0, 1.02fr) minmax(0, 0.6fr);
  gap: 70px;
  align-items: center;
}

.fuego-products__title {
  font-family: var(--fuego-font-display);
  font-size: 76px;
  line-height: 1;
  font-weight: 400;
  color: var(--fuego-color-ink);
}
.fuego-products__rule { margin: 26px 0 29px; }
.fuego-products__text {
  margin-bottom: 52px;
  max-width: 450px;
  font-size: 19px;
  line-height: 1.85;
  color: var(--fuego-color-ink-soft);
}
.fuego-products__controls { display: flex; align-items: center; gap: 16px; margin-top: 56px; }

/* Viewport + trilha --------------------------------------------------- */
.fuego-carousel { position: relative; width: 100%; overflow: hidden; }
.fuego-carousel--small { max-width: 280px; margin-top: 96px; }
.fuego-carousel__track {
  display: flex;
  transition: transform var(--fuego-speed-slow) var(--fuego-ease-slide);
}
/* Enquanto o JS reposiciona a trilha sem animação (normalização do loop). */
.fuego-carousel__track.is-jumping { transition: none; }
.fuego-carousel__item { flex: 0 0 100%; }

.fuego-product__media { width: 100%; border-radius: var(--fuego-radius); overflow: hidden; }
.fuego-product__media img { width: 100%; height: 100%; object-fit: cover; object-position: center; }
.fuego-carousel:not(.fuego-carousel--small) .fuego-product__media { aspect-ratio: 533 / 565; }
.fuego-carousel--small .fuego-product__media { aspect-ratio: 533 / 754; }

.fuego-product__body { margin-top: 20px; }
.fuego-product__name { margin-bottom: 6px; font-size: 19px; color: var(--fuego-color-ink); }
.fuego-product__price { font-family: var(--fuego-font-display); font-size: 17px; color: var(--fuego-color-ink-soft); }
.fuego-carousel--small .fuego-product__name { font-size: 16px; color: var(--fuego-color-ink-soft); }
.fuego-carousel--small .fuego-product__price { font-size: 15px; color: var(--fuego-color-ink-muted); }


/* ==========================================================================
   07. BANNER HERENCIA
   Imagem full-width; a altura acompanha a proporção do arquivo.
   ========================================================================== */

.fuego-banner { position: relative; width: 100%; }
.fuego-banner img { width: 100%; height: auto; }


/* ==========================================================================
   08. ONE BRAND. THREE PATHS.
   Cada card tem um painel de "lombada" de 58px que se expande a 100% no
   hover, revelando o conteúdo; a seta gira 90°. O card marcado com
   .is-open é o estado padrão (aberto sem interação).
   ========================================================================== */

.fuego-paths { position: relative; padding: 96px var(--fuego-gutter) 110px; overflow: hidden; }
.fuego-paths__inner {
  position: relative;
  z-index: 2;
  display: grid;
  grid-template-columns: minmax(0, 1.05fr) minmax(0, 2.5fr);
  gap: 60px;
}
.fuego-paths__title {
  margin-bottom: 30px;
  font-family: var(--fuego-font-display);
  font-size: 62px;
  line-height: 1.06;
  font-weight: 400;
  color: var(--fuego-color-ink);
}
.fuego-paths__text { max-width: 400px; font-size: 17px; line-height: 1.7; color: var(--fuego-color-ink-soft); }
.fuego-paths__brush { width: 352px; height: auto; margin-top: 50px; }

.fuego-paths__cards {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 24px;
  align-items: start;
}

.fuego-path {
  position: relative;
  height: 600px;
  border-radius: var(--fuego-radius);
  overflow: hidden;
  cursor: pointer;
}
.fuego-path__img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; }

/* Painel deslizante --------------------------------------------------- */
.fuego-path__panel {
  position: absolute;
  left: 0; top: 0; bottom: 0;
  width: 58px;
  background: var(--fuego-color-ink);
  overflow: hidden;
  transition: width var(--fuego-speed-slow) var(--fuego-ease-out),
              background-color var(--fuego-speed-slow) ease;
}
.fuego-path.is-open .fuego-path__panel { width: 100%; background: rgba(35, 25, 22, 0.93); }

/* Estado fechado: título vertical + numeral --------------------------- */
.fuego-path__spine {
  position: absolute;
  left: 0; top: 0; bottom: 0;
  width: 58px;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: space-between;
  padding: 26px 0 28px;
  opacity: 1;
  transition: opacity 0.45s ease;
  pointer-events: none;
}
.fuego-path.is-open .fuego-path__spine { opacity: 0; }
.fuego-path__spine-title {
  font-family: var(--fuego-font-display);
  font-size: 30px;
  letter-spacing: 0.1em;
  color: var(--fuego-color-white);
  writing-mode: vertical-rl;
  transform: rotate(180deg);
  white-space: nowrap;
}
.fuego-path__spine-num { font-size: 14px; font-weight: 500; letter-spacing: 0.14em; color: var(--fuego-color-terracotta); }
/* Reserva de espaço no topo, para o numeral ficar alinhado à base. */
.fuego-path__spine-spacer { font-size: 19px; line-height: 1; color: transparent; }

/* Seta indicadora — gira ao abrir. Vive fora da .fuego-path__spine para
   não desaparecer junto com ela. -------------------------------------- */
.fuego-path__arrow {
  position: absolute;
  left: 0; top: 26px;
  width: 58px;
  text-align: center;
  font-size: 19px;
  line-height: 1;
  color: var(--fuego-color-terracotta);
  transform: rotate(0deg);
  transition: transform var(--fuego-speed-slow) var(--fuego-ease-out);
  pointer-events: none;
}
.fuego-path.is-open .fuego-path__arrow { transform: rotate(90deg); }

/* Estado aberto ------------------------------------------------------- */
.fuego-path__body {
  position: absolute;
  left: 0; top: 0;
  width: 100%; height: 100%;
  padding: 34px 36px 38px;
  display: flex;
  flex-direction: column;
  justify-content: center;
  opacity: 0;
  transform: translateY(14px);
  pointer-events: none;
  transition: opacity var(--fuego-speed) ease 0.12s,
              transform 0.6s var(--fuego-ease-out) 0.08s;
}
.fuego-path.is-open .fuego-path__body { opacity: 1; transform: translateY(0); pointer-events: auto; }
.fuego-path__mark { display: block; width: 46px; height: 2px; margin-bottom: 26px; background: var(--fuego-color-terracotta); }
.fuego-path__num { margin-bottom: 14px; font-size: 14px; font-weight: 500; letter-spacing: 0.14em; color: var(--fuego-color-terracotta); }
.fuego-path__title {
  margin-bottom: 18px;
  font-family: var(--fuego-font-display);
  font-size: 36px;
  font-weight: 400;
  letter-spacing: 0.04em;
  color: var(--fuego-color-white);
}
.fuego-path__text { margin-bottom: 32px; font-size: 16px; line-height: 1.6; color: var(--fuego-color-bg); }
.fuego-path__cta {
  align-self: flex-start;
  display: inline-flex;
  align-items: center;
  gap: 14px;
  padding-bottom: 10px;
  border-bottom: 1px solid var(--fuego-color-terracotta);
  color: var(--fuego-color-terracotta);
  font-size: 13px;
  font-weight: 500;
  letter-spacing: var(--fuego-tracking-button);
  transition: gap var(--fuego-speed-fast) ease, color var(--fuego-speed-fast) ease;
}
.fuego-path__cta:hover { gap: 22px; color: var(--fuego-color-bg); }


/* ==========================================================================
   09. BEÑO CONSOLE (PRODUTO EM DESTAQUE)
   Composição em três trilhas proporcionais (432 / 916 / 108). O painel
   escuro sobrepõe a imagem grande por deslocamento de -30px na imagem —
   e não pela proporção — para que o recorte não mude com a largura.
   A imagem de detalhe é ancorada proporcionalmente à direita.
   ========================================================================== */

.fuego-feature { position: relative; padding: 92px var(--fuego-gutter) 150px; overflow: hidden; }
.fuego-feature__inner {
  position: relative;
  z-index: 2;
  display: grid;
  grid-template-columns: minmax(0, 1456fr) minmax(330px, 390fr);
  gap: 48px;
  align-items: start;
}
.fuego-feature__composition {
  position: relative;
  display: grid;
  grid-template-columns: minmax(0, 432fr) minmax(0, 916fr) minmax(0, 108fr);
  align-items: end;
}

/* Painel de compra ---------------------------------------------------- */
.fuego-buybox {
  position: relative;
  z-index: 2;
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  background: var(--fuego-color-panel);
  border-radius: var(--fuego-radius);
}
/* Espaçador que fixa a proporção do painel sem travar altura em px. */
.fuego-buybox__ratio { grid-area: 1 / 1; width: 100%; aspect-ratio: 432 / 704; }
.fuego-buybox__layout { grid-area: 1 / 1; display: flex; align-items: stretch; min-width: 0; }
.fuego-buybox__main {
  flex: 1;
  min-width: 0;
  display: flex;
  flex-direction: column;
  justify-content: center;
  padding: 30px 24px 30px 34px;
}
.fuego-buybox__title {
  margin-bottom: 14px;
  font-family: var(--fuego-font-display);
  font-size: 34px;
  line-height: 1.05;
  font-weight: 400;
  color: var(--fuego-color-white);
}
.fuego-buybox__tagline { margin-bottom: 24px; font-size: 14px; line-height: 1.5; color: var(--fuego-color-white); }
.fuego-buybox__price {
  margin-bottom: 28px;
  font-family: var(--fuego-font-display);
  font-size: 22px;
  color: var(--fuego-color-white);
}
.fuego-buybox__divider { display: block; height: 1px; background: rgba(212, 85, 53, 0.55); }
.fuego-buybox__label {
  margin-bottom: 22px;
  font-size: 12px;
  font-weight: 600;
  letter-spacing: var(--fuego-tracking-eyebrow);
  color: var(--fuego-color-terracotta);
}
.fuego-buybox__options { display: flex; flex-direction: column; gap: 18px; }

.fuego-option {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 20px;
  padding: 11px 18px 13px;
  border: 1px solid var(--fuego-color-white);
  cursor: pointer;
  transition: border-color var(--fuego-speed-fast) ease;
}
.fuego-option:hover { border-color: var(--fuego-color-terracotta); }
.fuego-option__label { display: block; margin-bottom: 6px; font-size: 11px; font-weight: 600; letter-spacing: var(--fuego-tracking-button); color: var(--fuego-color-label); }
.fuego-option__value { font-size: 17px; color: var(--fuego-color-white); }
.fuego-option__chevron { flex: none; }

.fuego-qty {
  display: flex;
  align-items: center;
  justify-content: space-between;
  width: 140px;
  padding: 9px 16px;
  border: 1px solid var(--fuego-color-white);
}
.fuego-qty__btn {
  padding: 0;
  border: none;
  background: transparent;
  color: var(--fuego-color-bg);
  font-size: 20px;
  line-height: 1;
  cursor: pointer;
  user-select: none;
  transition: color var(--fuego-speed-fast) ease;
}
.fuego-qty__btn:hover { color: var(--fuego-color-terracotta); }
.fuego-qty__value { font-size: 17px; color: var(--fuego-color-white); }

.fuego-buybox__submit {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 16px;
  padding: 16px 22px;
  border: 1px solid var(--fuego-color-terracotta);
  color: var(--fuego-color-terracotta);
  font-size: 13px;
  font-weight: 600;
  letter-spacing: var(--fuego-tracking-eyebrow);
  white-space: nowrap;
  transition: background-color var(--fuego-speed-fast) ease, color var(--fuego-speed-fast) ease;
}
.fuego-buybox__submit:hover { background: var(--fuego-color-terracotta); color: var(--fuego-color-white); }

/* Coluna vertical com nome do produto e filete. O translateX de +20px na
   coluna e -20px nos filhos empurra a borda direita para fora do painel,
   garantindo que o texto vertical não seja cortado pelo raio. --------- */
.fuego-buybox__aside {
  position: relative;
  z-index: 3;
  flex: none;
  width: 56px;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: flex-start;
  gap: 28px;
  padding: 30px 0 60px;
  transform: translateX(20px);
  overflow: hidden;
}
.fuego-buybox__vertical {
  transform: translateX(-20px);
  font-size: 13px;
  font-weight: 500;
  letter-spacing: 0.28em;
  color: var(--fuego-color-white);
  writing-mode: vertical-rl;
  white-space: nowrap;
}
.fuego-buybox__vertical-rule {
  flex: none;
  width: 1px;
  height: 120px;
  background: rgba(235, 211, 199, 0.6);
  transform: translateX(-20px);
}

/* Imagens ------------------------------------------------------------- */
.fuego-feature__photo {
  min-width: 0;
  align-self: center;
  aspect-ratio: 916 / 653;
  border-radius: var(--fuego-radius);
  overflow: hidden;
  transform: translateX(-30px); /* sobreposição sob o painel */
}
.fuego-feature__photo img { width: 100%; height: 100%; object-fit: cover; object-position: center; }

.fuego-feature__detail {
  position: absolute;
  left: 100%;
  bottom: -40px;
  z-index: 3;
  width: 21.6%;
  aspect-ratio: 350 / 310;
  object-fit: cover;
  border: 2px solid var(--fuego-color-bg-alt);
  border-radius: var(--fuego-radius);
  transform: translateX(calc(-45% - 100px));
}

/* Coluna de texto. O recuo negativo aproxima o bloco da imagem grande,
   preservando o alinhamento do título e do filete à esquerda. --------- */
.fuego-feature__copy {
  display: flex;
  flex-direction: column;
  padding-top: 34px;
  transform: translateX(-80px);
}
.fuego-feature__eyebrow {
  margin: 0 0 22px 5px;
  font-size: 13px;
  font-weight: 600;
  letter-spacing: 0.22em;
  color: var(--fuego-color-terracotta);
}
.fuego-feature__title {
  margin-bottom: 24px;
  font-family: var(--fuego-font-display);
  font-size: 56px;
  line-height: 1.04;
  font-weight: 400;
  color: var(--fuego-color-ink);
}
.fuego-feature__text {
  margin-bottom: 20px;
  font-family: var(--fuego-font-display);
  font-size: 21px;
  line-height: 1.45;
  color: var(--fuego-color-ink-soft);
}
.fuego-feature__rule { width: 200px; height: auto; margin-bottom: 30px; }


/* ==========================================================================
   10. VÍDEO
   ========================================================================== */

.fuego-video { position: relative; width: 100%; background: var(--fuego-color-ink); line-height: 0; }
.fuego-video video { width: 100%; height: auto; }


/* ==========================================================================
   11. FOOTER
   Cinco colunas sobre a textura terracota; a primeira sem borda.
   ========================================================================== */

.fuego-footer {
  background: var(--fuego-color-terracotta-dk) url("process-bg.webp") repeat top left;
  padding: 78px var(--fuego-gutter) 40px;
  color: var(--fuego-color-bg);
}
.fuego-footer__grid {
  display: grid;
  grid-template-columns:
    minmax(0, 1.1fr) minmax(0, 0.62fr) minmax(0, 0.8fr)
    minmax(0, 0.58fr) minmax(0, 1.3fr);
  gap: 44px;
}
.fuego-footer__col { border-left: 1px solid rgba(235, 211, 199, 0.25); padding-left: 40px; }
.fuego-footer__col--brand { border-left: none; padding-left: 0; }
.fuego-footer__logo { height: 30px; width: auto; }
.fuego-footer__brand-rule { width: 210px; height: 1px; margin: 26px 0 34px; background: var(--fuego-color-line-light); }
.fuego-footer__heading {
  margin-bottom: 32px;
  font-size: 14px;
  font-weight: 500;
  letter-spacing: var(--fuego-tracking-button);
  color: var(--fuego-color-bg);
}
.fuego-footer__list { display: flex; flex-direction: column; gap: 24px; }
.fuego-footer__list a { font-size: 16px; letter-spacing: 0.06em; color: var(--fuego-color-bg); }
.fuego-footer__list a:hover { color: var(--fuego-color-white); }
.fuego-footer__contact { display: flex; flex-direction: column; gap: 22px; }
.fuego-footer__contact a { display: flex; align-items: center; gap: 16px; font-size: 16px; color: var(--fuego-color-bg); }
.fuego-footer__contact a:hover { color: var(--fuego-color-white); }
.fuego-footer__contact i { flex: none; width: 19px; font-size: 16px; color: var(--fuego-color-bg); }

.fuego-newsletter { display: flex; flex-direction: column; gap: 20px; }
.fuego-newsletter__input {
  width: 100%;
  min-width: 0;
  padding: 20px 18px;
  background: transparent;
  border: 1px solid rgba(235, 211, 199, 0.4);
  color: var(--fuego-color-white);
  font-family: var(--fuego-font-body);
  font-size: 13px;
  letter-spacing: 0.08em;
  outline: none;
}
.fuego-newsletter__input::placeholder { color: rgba(235, 211, 199, 0.75); }
.fuego-newsletter__input:focus { border-color: var(--fuego-color-terracotta); }
.fuego-newsletter__submit {
  padding: 20px 22px;
  border: none;
  background: var(--fuego-color-terracotta);
  color: var(--fuego-color-white);
  font-family: var(--fuego-font-body);
  font-size: 14px;
  font-weight: 500;
  letter-spacing: var(--fuego-tracking-eyebrow);
  cursor: pointer;
  transition: background-color var(--fuego-speed-fast) ease;
}
.fuego-newsletter__submit:hover { background: var(--fuego-color-terracotta); }

.fuego-footer__divider { height: 1px; margin: 70px 0 30px; background: rgba(235, 211, 199, 0.25); }
.fuego-footer__legal { font-size: 13px; font-weight: 500; letter-spacing: var(--fuego-tracking-button); color: var(--fuego-color-bg); }


/* ==========================================================================
   12. REVEAL NO SCROLL
   O estado inicial só é aplicado pelo JS (classe .fuego-reveal-enabled no
   elemento raiz). Sem JS — ou com movimento reduzido — nada fica oculto.
   ========================================================================== */

.fuego-reveal-enabled .fuego-reveal {
  opacity: 0;
  transform: translateY(26px);
  transition: opacity 0.8s ease, transform 0.8s ease;
}
.fuego-reveal-enabled .fuego-reveal.is-visible { opacity: 1; transform: none; }

@media (prefers-reduced-motion: reduce) {
  .fuego-page .fuego-marquee__track { animation: none; }
  .fuego-reveal-enabled .fuego-reveal { opacity: 1; transform: none; transition: none; }
  .fuego-page .fuego-carousel__track,
  .fuego-page .fuego-hero__slide,
  .fuego-page .fuego-path__panel { transition-duration: 0.01ms; }
}