/* ==========================================================================
   NERETTO — CHOCOLATE ARTESANAL
   Stylesheet · design tokens, layout, components, motion, responsividade
   ========================================================================== */

@import url('https://fonts.googleapis.com/css2?family=Fraunces:ital,wght@0,300;0,400;0,600;0,700;1,400;1,500&family=Manrope:wght@400;500;600;700;800&display=swap');

/* ---------------------------------------------------------------------------
   01. DESIGN TOKENS
--------------------------------------------------------------------------- */
:root{
  /* cores da identidade */
  --color-cacao:      #0B0A08;
  --color-ivory:       #F3E8D3;
  --color-terracotta:  #A15C34;
  --color-green:       #3E4630;
  --color-wine:        #431C18;

  --color-ivory-dim:   #C9BBA0;
  --color-cacao-dim:   #6B5F4C;
  --surface-1:         #17140F;
  --surface-2:         #1F1B14;
  --hairline-dark:     rgba(243,232,211,0.14);
  --hairline-light:    rgba(11,10,8,0.12);

  /* papéis semânticos (tema escuro = padrão do site) */
  --bg:      var(--color-cacao);
  --fg:      var(--color-ivory);
  --fg-dim:  var(--color-ivory-dim);
  --surface: var(--surface-1);
  --hairline: var(--hairline-dark);
  --accent:  var(--color-terracotta);
  --accent-2: var(--color-green);
  --deep:     var(--color-wine);

  /* tipografia */
  --font-display: 'Fraunces', serif;
  --font-body: 'Manrope', sans-serif;

  --fs-eyebrow: 12px;
  --fs-body: 16px;
  --fs-small: 13.5px;
  --fs-caption: 12.5px;

  /* espaçamento / grid */
  --page-padding: clamp(24px, 6vw, 90px);
  --container-max: 1440px;
  --section-padding-y: clamp(70px, 9vw, 130px);
  --section-padding-y-lg: clamp(90px, 12vw, 160px);
  --gap-lg: clamp(40px, 6vw, 100px);
  --gap-md: clamp(24px, 3vw, 48px);

  /* motion */
  --ease-editorial: cubic-bezier(.16,.8,.3,1);
  --ease-soft: cubic-bezier(.22,.61,.36,1);
  --dur-fast: .3s;
  --dur-med: .6s;
  --dur-slow: 1.1s;

  /* bordas / raio — deliberadamente quase reto, sem estética SaaS */
  --radius-sm: 2px;
  --radius-md: 3px;

  /* z-index */
  --z-menu: 600;
  --z-header: 620;
  --z-modal: 700;
  --z-cursor: 900;
  --z-preloader: 1000;
}

[data-theme="light"]{
  --bg: var(--color-ivory);
  --fg: var(--color-cacao);
  --fg-dim: var(--color-cacao-dim);
  --surface: #EAE0C9;
  --hairline: var(--hairline-light);
}

/* ---------------------------------------------------------------------------
   02. RESET & BASE
--------------------------------------------------------------------------- */
*, *::before, *::after{ box-sizing: border-box; }
*{ margin:0; padding:0; }
html{ scroll-behavior:smooth; background:#000000; }
body{
  background: #000000;
  color: var(--color-ivory);
  font-family: var(--font-body);
  font-size: var(--fs-body);
  line-height:1.5;
  overflow-x: hidden;
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
}
img, svg{ display:block; max-width:100%; }
a{ color:inherit; text-decoration:none; }
button{ font-family:inherit; font-size:inherit; color:inherit; background:none; border:none; cursor:pointer; }
ul, ol{ list-style:none; }
h1,h2,h3,h4{ font-family:var(--font-display); font-weight:600; letter-spacing:-0.01em; line-height:1.08; }
em{ font-style:italic; font-family:var(--font-display); font-weight:400; }
::selection{ background: var(--color-terracotta); color: var(--color-ivory); }

.skip-link{
  position:fixed; top:-60px; left:16px; z-index:1200;
  background:var(--color-ivory); color:var(--color-cacao);
  padding:12px 18px; border-radius:var(--radius-sm);
  transition:top .25s var(--ease-editorial);
  font-size:13px; font-weight:600;
}
.skip-link:focus{ top:16px; }

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

.container{
  max-width: var(--container-max);
  margin-inline:auto;
  padding-inline: var(--page-padding);
}

/* seções — narrativa cromática ao longo do scroll */
.section-dark{  background: var(--color-cacao); color: var(--color-ivory); }
.section-light{ background: var(--color-ivory); color: var(--color-cacao); }
.section-deep{  background: linear-gradient(180deg, var(--color-cacao) 0%, #1c1108 35%, #201209 65%, var(--color-cacao) 100%); color: var(--color-ivory); }

.eyebrow{
  display:flex; align-items:center; gap:10px;
  font-family:var(--font-body); font-weight:700; font-size:var(--fs-eyebrow);
  letter-spacing:0.14em; text-transform:uppercase; color:var(--color-terracotta);
  margin-bottom:18px;
}
.eyebrow::before{ content:""; width:26px; height:1px; background:currentColor; display:inline-block; }
.eyebrow-light{ color: var(--color-terracotta); }

.display-xl{ font-size:clamp(40px, 6.4vw, 96px); }
.display-lg{ font-size:clamp(32px, 4.6vw, 62px); }
.display-md{ font-size:clamp(24px, 3vw, 38px); }

.lead-text{
  font-size:clamp(15px, 1.2vw, 18px); line-height:1.7; color:var(--color-cacao-dim);
  max-width:46ch; margin-top:22px;
}
.lead-text-dark{ color: var(--color-ivory-dim); }

/* ---------------------------------------------------------------------------
   03. BOTÕES E LINKS
--------------------------------------------------------------------------- */
.btn{
  display:inline-flex; align-items:center; gap:10px;
  font-family:var(--font-body); font-weight:600; font-size:13.5px;
  letter-spacing:.02em;
  padding:15px 28px;
  border-radius:2px;
  transition: background var(--dur-fast) var(--ease-editorial),
              color var(--dur-fast) var(--ease-editorial),
              border-color var(--dur-fast) var(--ease-editorial),
              transform var(--dur-fast) var(--ease-editorial);
  white-space:nowrap;
}
.btn:hover{ transform:translateY(-1px); }
.btn:active{ transform:translateY(0); }

.btn-solid{
  background: var(--color-terracotta); color: var(--color-ivory);
  border:1px solid var(--color-terracotta);
}
.btn-solid:hover{ background:#8c4f2c; border-color:#8c4f2c; }

.btn-line{
  background:transparent; color:inherit;
  border:1px solid currentColor;
}
.btn-line:hover{ background: currentColor; color: var(--color-cacao); }

.btn-large{ padding:19px 38px; font-size:14.5px; }
.btn .btn-arrow{ transition: transform var(--dur-fast) var(--ease-editorial); }
.btn:hover .btn-arrow{ transform: translateX(4px); }

.link-arrow{
  position:relative; font-size:13.5px; font-weight:600; letter-spacing:.02em;
  padding-bottom:3px; border-bottom:1px solid currentColor;
}
.link-arrow::after{ content:"→"; margin-left:8px; transition: margin var(--dur-fast) var(--ease-editorial); }
.link-arrow:hover::after{ margin-left:12px; }

/* ---------------------------------------------------------------------------
   04. PRELOADER
--------------------------------------------------------------------------- */
.preloader{
  position:fixed; inset:0; z-index:var(--z-preloader);
  background: var(--color-cacao);
  display:flex; align-items:center; justify-content:center;
  transition: opacity .7s var(--ease-editorial), visibility .7s var(--ease-editorial);
}
.preloader-mark{
  width:min(180px, 34vw);
  opacity:0;
  animation: preloaderRise 1s var(--ease-editorial) .15s forwards;
}
.preloader-mark svg{ width:100%; height:auto; }
@keyframes preloaderRise{
  from{ opacity:0; transform:scale(.92); }
  to{ opacity:1; transform:scale(1); }
}
.preloader.is-done{ opacity:0; visibility:hidden; pointer-events:none; }
body.is-loading{ overflow:hidden; }

/* ---------------------------------------------------------------------------
   05. CURSOR CONTEXTUAL (desktop only)
--------------------------------------------------------------------------- */
.ctx-cursor{
  position:fixed; top:0; left:0; z-index:var(--z-cursor);
  width:64px; height:64px; margin-left:-32px; margin-top:-32px;
  border-radius:50%; background:var(--color-ivory); color:var(--color-cacao);
  display:flex; align-items:center; justify-content:center;
  font-size:10.5px; font-weight:700; letter-spacing:.08em; text-transform:uppercase;
  opacity:0; transform:scale(.6);
  transition: opacity .25s var(--ease-editorial), transform .25s var(--ease-editorial);
  pointer-events:none; will-change:transform, opacity;
}
.ctx-cursor.is-active{ opacity:1; transform:scale(1); }
html.has-ctx-cursor{ cursor:none; }
html.has-ctx-cursor a, html.has-ctx-cursor button{ cursor:none; }
@media (hover:none), (pointer:coarse){
  .ctx-cursor{ display:none; }
}

/* ---------------------------------------------------------------------------
   06. HEADER
--------------------------------------------------------------------------- */
.site-header{
  position:fixed; top:0; left:0; right:0; z-index:var(--z-header);
  padding: 24px 0;
  background: transparent;
  transition: background var(--dur-med) var(--ease-editorial), padding var(--dur-med) var(--ease-editorial),
              border-color var(--dur-med) var(--ease-editorial), backdrop-filter var(--dur-med) var(--ease-editorial),
              box-shadow var(--dur-med) var(--ease-editorial);
  border-bottom:1px solid transparent;
}
.site-header.is-scrolled{
  background: rgba(11, 10, 8, 0.58);
  backdrop-filter: blur(18px) saturate(115%);
  -webkit-backdrop-filter: blur(18px) saturate(115%);
  padding: 16px 0;
  border-bottom: 1px solid rgba(243, 232, 211, 0.08);
  box-shadow: 0 8px 30px rgba(0,0,0,.08);
}
/* fallback: sem suporte a backdrop-filter, garante legibilidade com fundo mais sólido */
@supports not ((backdrop-filter: blur(1px)) or (-webkit-backdrop-filter: blur(1px))){
  .site-header.is-scrolled{ background: rgba(11,10,8,.9); }
}
.header-inner{
  max-width: var(--container-max);
  margin-inline:auto;
  padding-inline: var(--page-padding);
  display:flex; align-items:center; justify-content:space-between; gap:32px;
}
.header-logo{ width:118px; flex-shrink:0; }
.header-logo svg{ width:100%; height:auto; display:block; }

.header-nav ul{ display:flex; align-items:center; gap:34px; }
.header-nav a{
  font-size:13px; font-weight:600; letter-spacing:.02em; color:var(--color-ivory-dim);
  position:relative; padding-bottom:4px;
}
.header-nav a::after{
  content:""; position:absolute; left:0; right:100%; bottom:0; height:1px;
  background:var(--color-terracotta); transition:right var(--dur-fast) var(--ease-editorial);
}
.header-nav a:hover{ color:var(--color-ivory); }
.header-nav a:hover::after{ right:0; }

.header-actions{ display:flex; align-items:center; gap:22px; }
.header-actions .btn-line{ color:var(--color-ivory); border-color: rgba(243,232,211,.4); }
.header-actions .btn-line:hover{ background:var(--color-ivory); color:var(--color-cacao); }

.menu-toggle{
  display:none; flex-direction:column; justify-content:center; gap:6px;
  width:38px; height:38px;
}
.menu-toggle-bar{
  display:block; width:100%; height:1px; background:currentColor;
  transition: transform var(--dur-fast) var(--ease-editorial), opacity var(--dur-fast) var(--ease-editorial);
}
.menu-toggle[aria-expanded="true"] .menu-toggle-bar:first-child{ transform:translateY(3.5px) rotate(45deg); }
.menu-toggle[aria-expanded="true"] .menu-toggle-bar:last-child{ transform:translateY(-3.5px) rotate(-45deg); }

/* ---------------------------------------------------------------------------
   07. MOBILE MENU — abertura como parte da experiência, não painel genérico
--------------------------------------------------------------------------- */
.mobile-menu{
  position:fixed; inset:0; z-index:var(--z-menu);
  background: rgba(11,10,8,.92);
  backdrop-filter: blur(22px) saturate(115%);
  -webkit-backdrop-filter: blur(22px) saturate(115%);
  display:flex; flex-direction:column; justify-content:space-between;
  padding: 110px var(--page-padding) 50px;
  clip-path: inset(0 0 100% 0);
  transition: clip-path .65s var(--ease-editorial);
  visibility:hidden;
}
.mobile-menu.is-open{ clip-path: inset(0 0 0% 0); visibility:visible; }

.mobile-menu-list li{
  border-top:1px solid var(--hairline-dark);
  opacity:0; transform:translateY(16px);
  transition: opacity .5s var(--ease-editorial), transform .5s var(--ease-editorial);
  transition-delay: calc(var(--i) * 60ms);
}
.mobile-menu.is-open .mobile-menu-list li{ opacity:1; transform:translateY(0); }
.mobile-menu-list li:last-child{ border-bottom:1px solid var(--hairline-dark); }
.mobile-menu-list a{
  display:flex; align-items:baseline; gap:16px; padding:22px 0;
  font-family:var(--font-display); font-size:clamp(26px,7vw,36px); font-weight:500;
}
.mm-num{ font-family:var(--font-body); font-size:12px; color:var(--color-terracotta); font-weight:700; }

.mobile-menu-footer{ display:flex; flex-direction:column; gap:26px; }
.mobile-menu-footer .btn{ align-self:flex-start; }
.mobile-menu-social{ display:flex; gap:20px; font-size:12.5px; color:var(--color-ivory-dim); }
.mobile-menu-social a:hover{ color:var(--color-ivory); }

@media (max-width: 900px){
  .header-nav{ display:none; }
  .header-actions .btn-line{ display:none; }
  .menu-toggle{ display:flex; }
}

/* ---------------------------------------------------------------------------
   08. HERO
--------------------------------------------------------------------------- */
.hero{
  position:relative; height:100svh; min-height:560px; overflow:hidden; background:var(--color-cacao);
}
.hero-media{ position:absolute; inset:0; z-index:0; }
.hero-media .media-photo{
  position:absolute; inset:0; width:100%; height:100%;
  object-fit:cover; object-position:50% 50%;
}
/* qualquer viewport com proporção mais "alta que larga" corta demais um vídeo
   16:9 em cover (chegaria a cortar a marca presente nos próprios takes).
   Em vez de tudo-ou-nada (cover corta demais / contain sobra faixas pretas
   enormes), parte-se de contain e amplia-se um valor controlado — mantém a
   marca inteira visível e ainda preenche boa parte da tela. Cobre celulares
   e tablets em retrato (a proporção é o que importa, não a largura em si). */
@media (max-aspect-ratio: 3/4){
  .hero-media .media-photo{
    object-fit:contain; background:var(--color-cacao);
    transform: scale(1.45);
  }
}
/* gradiente extremamente discreto — só o suficiente para os CTAs terem contraste,
   sem escurecer o filme inteiro nem esconder a marca presente nos próprios takes */
.hero-media-scrim{
  position:absolute; inset:0;
  background: linear-gradient(
    to bottom,
    transparent 45%,
    rgba(11,10,8,.10) 65%,
    rgba(11,10,8,.32) 100%
  );
}

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

/* CTAs abaixo do centro — deixam o filme respirar, sem competir com a marca
   já presente nos takes nem com o principal movimento do chocolate */
.hero-actions{
  position:absolute; z-index:1; left:50%; top:74%;
  transform:translate(-50%, -50%);
  display:flex; align-items:center; gap:16px; flex-wrap:wrap; justify-content:center;
  width:100%; padding-inline: var(--page-padding);
}
.hero-cta{
  font-family:var(--font-body); font-weight:600; font-size:12.5px; letter-spacing:.08em; text-transform:uppercase;
  color:#F3E8D3;
  border:1px solid rgba(243,232,211,.55);
  background: rgba(11,10,8,.14);
  backdrop-filter: blur(5px);
  -webkit-backdrop-filter: blur(5px);
  padding:15px 26px; border-radius:2px; white-space:nowrap;
  transition: background var(--dur-fast) var(--ease-editorial), color var(--dur-fast) var(--ease-editorial), border-color var(--dur-fast) var(--ease-editorial);
}
.hero-cta:hover, .hero-cta:focus-visible{
  background:#F3E8D3; color:#0B0A08; border-color:#F3E8D3;
}

.scroll-cue{
  position:absolute; z-index:1; right: var(--page-padding); bottom: 40px;
  display:flex; flex-direction:column; align-items:center; gap:14px;
  color: var(--color-ivory-dim); font-size:10.5px; letter-spacing:.12em; text-transform:uppercase;
  writing-mode: vertical-rl;
}
.scroll-cue-line{
  width:1px; height:56px; background: linear-gradient(180deg, currentColor, transparent);
  animation: scrollCuePulse 2.4s ease-in-out infinite;
}
@keyframes scrollCuePulse{
  0%, 100%{ transform:scaleY(.6); opacity:.5; }
  50%{ transform:scaleY(1); opacity:1; }
}

@media (max-width:900px){
  .hero-actions{ top:72%; gap:12px; }
  .hero-cta{ padding:14px 22px; font-size:12px; }
}
@media (max-width:640px){
  .hero{ height:100svh; min-height:600px; }
  .hero-actions{
    top:auto; bottom: max(56px, env(safe-area-inset-bottom)); transform:translateX(-50%);
    flex-direction:column; gap:12px; width:calc(100% - var(--page-padding) * 2);
  }
  .hero-cta{ width:100%; text-align:center; padding:15px 20px; }
  .scroll-cue{ display:none; }
}
@media (max-height:700px){
  .hero-actions{ top:auto; bottom: max(28px, env(safe-area-inset-bottom)); transform:translateX(-50%); }
}

/* ---------------------------------------------------------------------------
   09. MÍDIA — fotografia real e padrões oficiais (placeholder até substituição)
--------------------------------------------------------------------------- */
.media-photo{
  display:block; width:100%; height:100%; object-fit:cover; object-position:center;
}
.media-placeholder{
  position:relative; width:100%; height:100%; overflow:hidden;
  background: var(--color-cacao);
  display:flex; align-items:flex-end;
}
.media-placeholder svg{ position:absolute; inset:0; width:100%; height:100%; }
.media-placeholder.tall{ aspect-ratio: 4 / 5; height:auto; }
.media-placeholder.full{ position:absolute; inset:0; height:100%; }
.placeholder-tag{
  position:relative; z-index:2; margin:16px; padding:7px 12px;
  font-size:10.5px; letter-spacing:.06em; text-transform:uppercase;
  background: rgba(11,10,8,.55); color: var(--color-ivory-dim);
  border:1px solid rgba(243,232,211,.18); border-radius:20px;
}
.process-media-tag{
  position:absolute; z-index:4; left:0; bottom:0; margin:14px; max-width:calc(100% - 28px);
}

/* ---------------------------------------------------------------------------
   09B. PRODUZIDO EM GRAMADO — micro-storytelling de origem
--------------------------------------------------------------------------- */
.origin-strip{ padding-block: clamp(56px, 9vw, 96px); }
.origin-strip-inner{
  display:flex; flex-direction:column; align-items:center; text-align:center;
  gap: clamp(24px, 4vw, 36px);
}
.origin-strip-seal{ width:182px; flex-shrink:0; color: var(--color-terracotta); }
.origin-strip-seal svg{ width:100%; height:auto; display:block; }
.origin-strip-phrase{
  font-family:var(--font-display); font-style:italic; font-weight:400;
  font-size:clamp(19px, 2.2vw, 27px); line-height:1.4; color:var(--color-ivory);
  max-width:42ch; margin-inline:auto;
}
@media (max-width:760px){
  .origin-strip-seal{ width:154px; }
}

/* ---------------------------------------------------------------------------
   10. DIVISOR — GESTO DO GANACHE
--------------------------------------------------------------------------- */
.gesture-divider{
  position:relative; height:64px; color: var(--color-terracotta);
  background: var(--color-cacao);
  overflow:hidden;
}
.gesture-svg{ width:100%; height:100%; }
.gesture-svg path{
  stroke-dasharray: 1600;
  stroke-dashoffset: 1600;
  transition: stroke-dashoffset 1.4s var(--ease-editorial);
}
.gesture-svg.is-drawn path{ stroke-dashoffset:0; }

/* ---------------------------------------------------------------------------
   10B. CÍRCULO DESENHADO À MÃO — destaque de palavra, com giro leve
   Usa pathLength="1" no SVG para normalizar a animação de traçado
   independente do tamanho real do caminho.
--------------------------------------------------------------------------- */
.word-circle{
  position: relative;
  display: inline-block;
}
.word-circle-pos{
  position: absolute;
  left: calc(50% + var(--circle-x, 8%));
  top: calc(50% + var(--circle-y, 12%));
  width: var(--circle-w, 4.2em);
  height: var(--circle-h, 1.3em);
  transform: translate(-50%, -50%);
  pointer-events: none;
}
.word-circle-svg{
  width: 100%;
  height: 100%;
  display: block;
  overflow: visible;
  transform: rotate(var(--circle-rot, -15deg));
  color: var(--color-terracotta);
}
.word-circle-path{
  fill: none;
  stroke: currentColor;
  stroke-width: 2.2;
  stroke-linecap: round;
  stroke-dasharray: 1;
  stroke-dashoffset: 1;
  transition: stroke-dashoffset 1.2s var(--ease-editorial);
}
.word-circle.is-drawn .word-circle-path{ stroke-dashoffset: 0; }
@media (prefers-reduced-motion: reduce){
  .word-circle-path{ stroke-dashoffset: 0; transition: none; }
}

/* ---------------------------------------------------------------------------
   11. MANIFESTO
--------------------------------------------------------------------------- */
.manifesto{ padding-block: var(--section-padding-y); }
.manifesto-grid{
  display:grid; grid-template-columns: 1.1fr 0.9fr; gap: var(--gap-lg); align-items:start;
}
.manifesto-copy .display-lg{ margin-top:2px; }
.manifesto-visual{
  position:sticky; top:120px;
  aspect-ratio: 4 / 5; overflow:hidden; border:1px solid var(--hairline-light);
}

@media (max-width:980px){
  .manifesto-grid{ grid-template-columns:1fr; }
  .manifesto-visual{ position:static; aspect-ratio:5/4; }
}

/* ---------------------------------------------------------------------------
   13. CATÁLOGO DE PRODUTOS
--------------------------------------------------------------------------- */
.catalog{ padding-block: var(--section-padding-y-lg); }
.catalog-head{
  display:grid; grid-template-columns: 0.95fr 1.05fr; gap: var(--gap-lg);
  align-items:start;
  margin-bottom: clamp(48px, 7vw, 84px);
}
.catalog-head-title{ min-width:0; }
#catalog-title{ font-size: clamp(38px, 4.6vw, 68px); white-space: normal; }
.catalog-head-lead{
  text-align:justify; margin-top:8px; max-width:none;
}
@media (max-width:900px){
  .catalog-head{ grid-template-columns:1fr; }
  .catalog-head-lead{ text-align:left; margin-top:0; }
}
.catalog-stage{
  display:grid; grid-template-columns: 0.95fr 1.05fr; gap: var(--gap-lg);
  align-items:start;
}
.catalog-media{
  position:sticky; top:110px;
  aspect-ratio: 4/5;
  overflow:hidden;
  border:1px solid var(--hairline-dark);
  background: var(--surface-1);
}
.catalog-media-img{
  width:100%; height:100%; object-fit:cover; object-position: 65% 55%; display:block;
  transition: opacity .32s var(--ease-editorial);
}
.catalog-media-index{
  position:absolute; left:20px; bottom:20px; z-index:2;
  font-family:var(--font-display); font-style:italic; font-size:15px; color:var(--color-ivory);
  display:flex; gap:6px; opacity:.9;
  text-shadow: 0 1px 12px rgba(0,0,0,.6);
}

.catalog-list{ display:flex; flex-direction:column; }
.product-row{
  border-top:1px solid var(--hairline-dark);
  padding: 34px 0;
  cursor:pointer;
  display:grid; grid-template-columns: auto 1fr auto; align-items:baseline; gap:24px;
  transition: padding var(--dur-fast) var(--ease-editorial);
}
.catalog-list .product-row:last-child{ border-bottom:1px solid var(--hairline-dark); }
.product-row-num{
  font-family:var(--font-display); font-style:italic; font-size:15px; color:var(--color-terracotta);
}
.product-row-main{ min-width:0; }
.product-row-category{
  font-size:11px; letter-spacing:.1em; text-transform:uppercase; color: var(--color-ivory-dim);
  margin-bottom:8px; display:flex; align-items:center; gap:10px;
}
.origin-badge{
  border:1px solid var(--color-terracotta); color:var(--color-terracotta);
  border-radius:20px; padding:3px 11px; font-size:10.5px; letter-spacing:.08em;
  text-transform:uppercase; font-weight:600; white-space:nowrap;
}
.product-row-name{
  font-family:var(--font-display); font-size: clamp(24px, 2.6vw, 36px); font-weight:600;
  transition: color var(--dur-fast) var(--ease-editorial);
}
.product-row-meta{
  font-size:14.5px; color: var(--color-ivory-dim); margin-top:8px;
}
.product-row-cta{
  display:flex; align-items:center; gap:18px; white-space:nowrap;
}
.product-row-cta button{
  font-size:13px; font-weight:600; letter-spacing:.03em;
  border-bottom:1px solid transparent; padding-bottom:2px;
  color:var(--color-ivory-dim);
  transition: color var(--dur-fast) var(--ease-editorial), border-color var(--dur-fast) var(--ease-editorial);
}
.product-row-cta button:hover, .product-row-cta button:focus-visible{
  color:var(--color-ivory); border-color: var(--color-ivory);
}
.product-row:hover .product-row-name, .product-row.is-active .product-row-name{ color: var(--color-terracotta); }
.product-row.is-active{ padding-left:16px; }

@media (max-width:980px){
  .catalog-stage{ grid-template-columns:1fr; }
  .catalog-media{ position:static; aspect-ratio:5/4; }
  .product-row{ grid-template-columns:auto 1fr; padding:28px 0; }
  .product-row-cta{ grid-column:1 / -1; margin-top:16px; }
}

/* ---------------------------------------------------------------------------
   14. MODAL DE PRODUTO
--------------------------------------------------------------------------- */
.product-modal{
  position:fixed; inset:0; z-index:var(--z-modal);
  display:flex; align-items:stretch; justify-content:center;
}
.product-modal[hidden]{ display:none; }
.product-modal-backdrop{
  position:absolute; inset:0; background: rgba(11,10,8,.7); backdrop-filter: blur(6px);
  opacity:0; transition: opacity var(--dur-med) var(--ease-editorial);
}
.product-modal-panel{
  position:relative; z-index:1; margin:auto;
  width:min(1040px, 94vw); max-height:90vh; overflow:auto;
  background: var(--color-cacao); color:var(--color-ivory);
  display:grid; grid-template-columns: 1fr 1fr;
  transform: translateY(24px) scale(.98); opacity:0;
  transition: transform var(--dur-med) var(--ease-editorial), opacity var(--dur-med) var(--ease-editorial);
  border:1px solid var(--hairline-dark);
}
.product-modal.is-open .product-modal-backdrop{ opacity:1; }
.product-modal.is-open .product-modal-panel{ transform:translateY(0) scale(1); opacity:1; }

.product-modal-media{ aspect-ratio: 4/5; position:relative; overflow:hidden; background:var(--surface-1); }
.product-modal-media img{ width:100%; height:100%; object-fit:cover; display:block; }
.product-modal-info{ padding: clamp(30px,4vw,56px); display:flex; flex-direction:column; }
.pm-category-row{ display:flex; align-items:center; gap:12px; flex-wrap:wrap; margin-bottom:18px; }
.pm-category-row .eyebrow{ margin-bottom:0; }
.pm-desc{ font-size:15.5px; line-height:1.75; color: var(--color-ivory-dim); margin-top:16px; max-width:46ch; }
.pm-specs{
  margin-top:32px; display:grid; grid-template-columns:1fr 1fr; gap:20px 24px;
  border-top:1px solid var(--hairline-dark); padding-top:24px;
}
.pm-specs dt{ font-size:10.5px; letter-spacing:.1em; text-transform:uppercase; color: var(--color-terracotta); margin-bottom:4px; }
.pm-specs dd{ font-size:14.5px; }
.pm-actions{ margin-top:auto; padding-top:34px; }

.product-modal-close{
  position:absolute; top:20px; right:20px; z-index:3;
  width:42px; height:42px; display:flex; align-items:center; justify-content:center;
}
.product-modal-close span{
  position:absolute; width:18px; height:1px; background:currentColor;
}
.product-modal-close span:first-child{ transform:rotate(45deg); }
.product-modal-close span:last-child{ transform:rotate(-45deg); }

@media (max-width:760px){
  .product-modal-panel{ grid-template-columns:1fr; max-height:none; height:100%; width:100%; border:none; }
  .product-modal-media{ aspect-ratio:1/1; }
}

/* ---------------------------------------------------------------------------
   15. ORIGEM / PROCESSO — sticky compacto (180–220vh no total, não milhares de px)
--------------------------------------------------------------------------- */
.process{ padding-top: var(--section-padding-y); }
.process-head{ margin-bottom: clamp(40px, 6vw, 72px); max-width:620px; }

/* wrapper que define a distância de "pin": altura total ÷ nº de etapas = trecho de scroll por etapa */
.process-scroll{ position:relative; height: 130vh; }
.process-tint{
  position:absolute; inset:0; z-index:0; pointer-events:none;
  background-color: var(--process-accent, transparent);
  opacity:.05;
  transition: background-color .8s var(--ease-editorial);
}
.process-sticky{
  position:sticky; top:0; height:100vh; z-index:1;
  display:flex; align-items:center;
  overflow:hidden;
}
.process-sticky-inner{
  display:grid; grid-template-columns: 0.95fr 1.05fr auto; gap: var(--gap-lg);
  align-items:center; width:100%;
}

.process-media{
  position:relative; aspect-ratio: 4/5; max-height:64vh;
  overflow:hidden; border:1px solid var(--hairline-dark);
  background: var(--color-cacao);
}
.process-media-img{
  position:absolute; inset:0; width:100%; height:100%; object-fit:cover;
  opacity:0; transform:scale(1.035);
  transition: opacity .9s var(--ease-editorial), transform .9s var(--ease-editorial);
}
.process-media-img.is-active{ opacity:1; transform:scale(1); z-index:1; }
.process-media-wash{
  position:absolute; inset:0; z-index:2; pointer-events:none;
  background-color: var(--process-accent, transparent);
  opacity:.16; mix-blend-mode:multiply;
  transition: background-color .8s var(--ease-editorial);
}

.process-list{ display:flex; flex-direction:column; }
.process-step{
  border-top:1px solid var(--hairline-dark);
  padding: 20px 0;
  opacity:.4; transform: scale(.97); transform-origin: left center;
  transition: opacity var(--dur-med) var(--ease-editorial), transform var(--dur-med) var(--ease-editorial);
}
.process-list .process-step:last-child{ border-bottom:1px solid var(--hairline-dark); }
.process-step.is-active{ opacity:1; transform:scale(1); }
.process-step-num{
  font-family:var(--font-display); font-style:italic; color:var(--color-terracotta); font-size:13px;
  transition: color .7s var(--ease-editorial);
}
.process-step.is-active .process-step-num{ color: var(--process-accent, var(--color-terracotta)); }
.process-step h3{ font-size:clamp(20px,2.4vw,30px); margin-top:6px; }
.process-step p{
  font-size:15px; line-height:1.7; color: var(--color-ivory-dim); max-width:40ch;
  margin-top:0; max-height:0; opacity:0; overflow:hidden;
  transition: max-height var(--dur-med) var(--ease-editorial), opacity var(--dur-med) var(--ease-editorial), margin-top var(--dur-med) var(--ease-editorial);
}
.process-step.is-active p{ margin-top:10px; max-height:120px; opacity:1; }
.process-step p:empty::before{
  content:"Informação a ser confirmada pela Neretto.";
  font-style:italic; opacity:.55;
}

.process-progress{ display:flex; justify-content:center; align-self:stretch; }
.process-progress-track{
  position:relative; width:1px; height:100%; background: var(--hairline-dark); display:block;
}
.process-progress-fill{
  position:absolute; top:0; left:0; width:100%; height:0%;
  background: var(--process-accent, var(--color-terracotta));
  transition: height .1s linear, background-color .7s var(--ease-editorial);
}

/* sem JS de pin (reduced motion / fallback): mostra tudo aberto, sem sticky */
.process-scroll.is-static{ height:auto; }
.process-scroll.is-static .process-sticky{ position:static; height:auto; padding-block: 20px; }
.process-scroll.is-static .process-step{ opacity:1; transform:none; }
.process-scroll.is-static .process-step p{ max-height:none; opacity:1; margin-top:10px; }
.process-scroll.is-static .process-progress{ display:none; }

@media (max-width:980px){
  .process-sticky-inner{ grid-template-columns:1fr; }
  .process-media{ max-height:46vh; }
  .process-progress{ display:none; }
}
@media (max-width:760px){
  /* mobile: fluxo normal, sem pin — evita scroll hijacking e jank */
  .process-scroll{ height:auto; }
  .process-sticky{ position:static; height:auto; }
  .process-media{ margin-bottom:28px; max-height:none; aspect-ratio:5/4; }
  .process-step{ opacity:1; transform:none; padding:18px 0; }
  .process-step p{ max-height:none; opacity:1; margin-top:8px; }
  .process-media-img{ transition: opacity .6s var(--ease-editorial), transform .6s var(--ease-editorial); }
}
@media (prefers-reduced-motion: reduce){
  .process-scroll{ height:auto; }
  .process-sticky{ position:static; height:auto; }
  .process-step{ opacity:1; transform:none; }
  .process-step p{ max-height:none; opacity:1; margin-top:8px; }
  .process-progress{ display:none; }
  .process-media-img{ transition: opacity .3s linear; transform:none !important; }
}

/* ---------------------------------------------------------------------------
   16. EXPERIÊNCIA NERETTO
--------------------------------------------------------------------------- */
.experience{
  position:relative;
  padding-block: clamp(100px, 14vw, 180px);
  overflow:hidden;
}
.experience-bg{
  position:absolute; inset:0; width:100%; height:100%;
  opacity:.32;
}
.experience-scrim{
  position:absolute; inset:0;
  background: linear-gradient(120deg, rgba(11,10,8,.94) 0%, rgba(11,10,8,.8) 42%, rgba(11,10,8,.55) 100%);
}
.experience-inner{ position:relative; z-index:1; max-width:1400px; }
#experience-title{ max-width: 1320px; font-size: clamp(32px, 5vw, 80px); }
.experience-sub{ margin-top:34px; max-width:56ch; }

/* ---------------------------------------------------------------------------
   17. CTA COMERCIAL
--------------------------------------------------------------------------- */
.cta-comercial{ padding-block: var(--section-padding-y); }
.cta-inner{ max-width:900px; }
.cta-inner .btn{ margin-top:40px; }

/* ---------------------------------------------------------------------------
   18. FOOTER — encerrado por uma grande wordmark ancorada na base
--------------------------------------------------------------------------- */
.site-footer{ background: #000000; color: var(--color-ivory); padding-top: clamp(70px,9vw,120px); }
.footer-top{
  display:grid; grid-template-columns: 1.3fr 0.9fr 0.9fr 0.9fr; gap: var(--gap-md);
  padding-bottom: 56px; border-bottom:1px solid var(--hairline-dark);
}
.footer-brand-name{
  font-family:var(--font-display); font-size:21px; font-weight:600; margin-bottom:14px;
}
.footer-tag{ font-size:14.5px; color:var(--color-ivory-dim); max-width:30ch; line-height:1.65; }
.footer-col-title{ font-size:11px; letter-spacing:.1em; text-transform:uppercase; color:var(--color-terracotta); margin-bottom:18px; }
.footer-links{ display:flex; flex-direction:column; gap:13px; }
.footer-links a{ font-size:14.5px; color:var(--color-ivory-dim); transition:color var(--dur-fast) var(--ease-editorial); }
.footer-links a:hover{ color:var(--color-ivory); }
.footer-address{ font-size:14.5px; color:var(--color-ivory); line-height:1.7; margin-bottom:18px; }
.footer-copy{ font-size:13px; color:var(--color-ivory-dim); line-height:1.7; }

.footer-wordmark{
  width: calc(100% - var(--page-padding) * 2);
  margin-inline: auto;
  margin-top: clamp(60px, 9vw, 150px);
  margin-bottom: clamp(20px, 4vw, 40px);
  line-height: 0;
  color: #050505; /* 98% preto — uma fração mais clara que o fundo 100% preto, marca d'água quase imperceptível */
}
.footer-wordmark svg{ width:100%; height:auto; display:block; }

@media (max-width:900px){
  .footer-top{ grid-template-columns:1fr 1fr; }
  .footer-brand{ grid-column:1 / -1; margin-bottom:12px; }
}
@media (max-width:560px){
  .footer-top{ grid-template-columns:1fr; }
  .footer-wordmark{ width: calc(100% - 32px); margin-top:clamp(48px,14vw,90px); }
}

/* ---------------------------------------------------------------------------
   19. SCROLL REVEAL (stagger sutil)
--------------------------------------------------------------------------- */
[data-reveal]{
  opacity:0; transform:translateY(26px);
  transition: opacity .9s var(--ease-editorial), transform .9s var(--ease-editorial);
}
[data-reveal].is-visible{ opacity:1; transform:translateY(0); }

/* ---------------------------------------------------------------------------
   20. REDUÇÃO DE MOVIMENTO
--------------------------------------------------------------------------- */
@media (prefers-reduced-motion: reduce){
  html{ scroll-behavior:auto; }
  *, *::before, *::after{
    animation-duration: .001ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: .001ms !important;
    scroll-behavior:auto !important;
  }
  [data-reveal]{ opacity:1; transform:none; }
  .gesture-svg path{ stroke-dashoffset:0; }
}

/* ---------------------------------------------------------------------------
   21. RESPONSIVIDADE GERAL
--------------------------------------------------------------------------- */
@media (max-width:640px){
  .display-xl{ font-size:clamp(34px,10vw,54px); }
  .hero-headline{ font-size:clamp(38px,13vw,64px); }
  .catalog-media-index{ display:none; }
}

/* nota: overflow-x:hidden já está em `body` (ver base); não repetir em `html`
   com height:100% — isso quebra window.scroll/position:sticky em Chromium,
   criando um contexto de rolagem isolado no body. */