/* ==========================================================================
   SAGRADA FAMILIA — camada de arte (Fídias)
   Tokens amarrados a brand.json. Interatividade fina: Lucius (script.js).
   ========================================================================== */

/* ---------- Fontes auto-hospedadas ---------- */
@font-face {
  font-family: "Cinzel";
  src: url("assets/fonts/cinzel-var-latin.woff2") format("woff2");
  font-weight: 400 900;
  font-display: swap;
  unicode-range: U+0000-00FF, U+2013-2014, U+2019, U+201C-201D;
}
@font-face {
  font-family: "Cinzel";
  src: url("assets/fonts/cinzel-var-latin-ext.woff2") format("woff2");
  font-weight: 400 900;
  font-display: swap;
  unicode-range: U+0100-02BA;
}
@font-face {
  font-family: "Oswald";
  src: url("assets/fonts/oswald-var-latin.woff2") format("woff2");
  font-weight: 200 700;
  font-display: swap;
  unicode-range: U+0000-00FF, U+2013-2014, U+2019, U+201C-201D;
}
@font-face {
  font-family: "Oswald";
  src: url("assets/fonts/oswald-var-latin-ext.woff2") format("woff2");
  font-weight: 200 700;
  font-display: swap;
  unicode-range: U+0100-02BA;
}

/* ---------- Tokens (brand.json) ---------- */
:root {
  /* cores */
  --c-black: #191919;
  --c-true-black: #0d0d0d;
  --c-white: #ffffff;
  --c-cream: #f5f2ea;
  --c-gold: #f0d186;

  /* spacing scale: 4 8 12 16 24 32 48 64 96 128 */
  --s-1: 4px;  --s-2: 8px;  --s-3: 12px; --s-4: 16px; --s-5: 24px;
  --s-6: 32px; --s-7: 48px; --s-8: 64px; --s-9: 96px; --s-10: 128px;

  /* radius */
  --r-card: 14px;
  --r-hero: 24px; /* raio maior do card-herói/PDP, lido do mockup do Diego */
  --r-pill: 999px;

  /* tipografia */
  --f-display: "Cinzel", serif;
  --f-body: "Oswald", sans-serif;

  --header-h: 72px;
}

/* ---------- Reset curto ---------- */
*, *::before, *::after { box-sizing: border-box; }
html { scroll-behavior: smooth; }
body {
  margin: 0;
  background: var(--c-white);
  color: var(--c-black);
  font-family: var(--f-body);
  font-weight: 300;
  -webkit-font-smoothing: antialiased;
}
img { display: block; max-width: 100%; }
body { overflow-x: clip; }
/* grid/flex blowout guard: itens com imagem larga não alargam a página */
.pdp__media, .pdp__thumbs, .pdp__info, .bento__tile,
.product-card, .conduct__clause, .site-footer__col, .hero__card { min-width: 0; }
figure { margin: 0; }
a { color: inherit; }
button { font: inherit; color: inherit; background: none; border: 0; cursor: pointer; }
fieldset { border: 0; padding: 0; margin: 0; }

.visually-hidden {
  position: absolute; width: 1px; height: 1px;
  clip-path: inset(50%); overflow: hidden; white-space: nowrap;
}

:focus-visible { outline: 2px solid var(--c-black); outline-offset: 3px; }
.release :focus-visible, .conduct :focus-visible, .site-footer :focus-visible, .pdp :focus-visible {
  outline-color: var(--c-gold);
}

::selection { background: var(--c-gold); color: var(--c-black); }

/* ---------- Watermark (monograma fantasma) ---------- */
.wm { position: absolute; pointer-events: none; z-index: 0; }
.wm img { width: 100%; height: auto; opacity: .16; }
.wm--hero { top: -40%; left: -14%; width: min(46vw, 640px); transform: rotate(8deg); }
.wm--products { right: -10%; bottom: -18%; width: min(44vw, 620px); transform: rotate(-6deg); }
.wm--conduct { right: -10%; top: 44%; width: min(34vw, 500px); transform: rotate(4deg); }
.wm--conduct img { opacity: .22; filter: invert(1); }

/* ==========================================================================
   HEADER
   ========================================================================== */
.site-header {
  position: sticky; top: 0; z-index: 50;
  display: flex; align-items: center; gap: var(--s-6);
  height: var(--header-h);
  padding: 0 var(--s-7);
  background: rgba(255, 255, 255, .92);
  /* Lucius: blur + sombra só quando .is-stuck (IntersectionObserver) */
}
.site-header.is-stuck {
  backdrop-filter: blur(10px);
  box-shadow: 0 1px 0 rgba(25, 25, 25, .08), 0 8px 24px rgba(25, 25, 25, .06);
}

.logo {
  display: inline-flex; flex-direction: column;
  text-decoration: none; line-height: 1.05;
  font-family: var(--f-display); font-weight: 700;
  font-size: 15px; letter-spacing: .3em; text-transform: uppercase;
}
.logo__line:last-child { letter-spacing: .34em; }

.site-nav {
  display: flex; align-items: center; gap: var(--s-3);
  margin-left: auto;
  font-size: 10px; font-weight: 400;
  letter-spacing: .28em; text-transform: uppercase;
}
.site-nav__sep { opacity: .35; font-weight: 200; }
.site-nav__link {
  text-decoration: none; padding: var(--s-2) var(--s-3);
  border-radius: var(--r-pill);
  transition: opacity .2s ease;
}
.site-nav__link:hover { opacity: .55; }
.site-nav__link.is-active { background: var(--c-black); color: var(--c-white); }

.header-icons { display: flex; align-items: center; gap: var(--s-4); }
.icon-btn { width: 34px; height: 34px; display: grid; place-items: center; border-radius: var(--r-pill); transition: opacity .2s ease; }
.icon-btn:hover { opacity: .55; }
.icon-btn svg { width: 17px; height: 17px; }

/* ==========================================================================
   HERO
   ========================================================================== */
.hero { position: relative; padding: var(--s-4) 0 var(--s-8); overflow: hidden; }

.hero__stage {
  position: relative; z-index: 1;
  display: grid; grid-template-columns: var(--s-8) 1fr var(--s-8);
  align-items: center;
  max-width: 1560px; margin: 0 auto;
}

.hero__card {
  position: relative; grid-column: 2;
  height: clamp(420px, 64vh, 720px);
  border-radius: var(--r-hero);
  overflow: hidden;
  background: var(--c-true-black);
  box-shadow: 0 32px 64px rgba(13, 13, 13, .28);
}
.hero__track { position: absolute; inset: 0; }
.hero__slide { position: absolute; inset: 0; opacity: 0; transition: opacity .8s ease; }
.hero__slide.is-active { opacity: 1; }
.hero__slide img { width: 100%; height: 100%; object-fit: cover; object-position: center 30%; }
.hero__slide[data-slide="2"] img { object-position: center 12%; }

.hero__caption {
  position: absolute; z-index: 2;
  left: 54%; bottom: var(--s-7);
  color: var(--c-white);
  text-shadow: 0 2px 24px rgba(13, 13, 13, .65);
}
.hero__title {
  margin: 0;
  font-family: var(--f-display); font-weight: 600;
  font-size: clamp(28px, 3.4vw, 46px);
  letter-spacing: .42em; text-transform: uppercase;
}
.hero__lorem {
  margin: var(--s-3) 0 0;
  font-family: var(--f-display); font-weight: 400;
  font-size: 11px; line-height: 1.7;
  letter-spacing: .08em; text-transform: uppercase;
  opacity: .92;
}

.hero__arrow {
  grid-row: 1; z-index: 2;
  width: var(--s-8); height: var(--s-8);
  display: grid; place-items: center;
  color: var(--c-black); opacity: .6;
  transition: opacity .2s ease, transform .2s ease;
}
.hero__arrow:hover { opacity: 1; transform: scale(1.12); }
.hero__arrow svg { width: 22px; height: 22px; }
.hero__arrow--prev { grid-column: 1; }
.hero__arrow--next { grid-column: 3; }

/* ==========================================================================
   PRODUTOS
   ========================================================================== */
.section-title {
  margin: 0 0 var(--s-8);
  font-family: var(--f-display); font-weight: 600;
  font-size: clamp(22px, 2.4vw, 32px);
  letter-spacing: .5em; text-transform: uppercase;
  text-align: center;
}
.section-title--light { color: var(--c-white); }

.products {
  position: relative; overflow: hidden;
  padding: var(--s-8) var(--s-7) var(--s-10);
}
.products__grid {
  position: relative; z-index: 1;
  display: grid; grid-template-columns: repeat(3, 1fr);
  gap: var(--s-8);
  max-width: 1180px; margin: 0 auto;
}

.product-card { display: flex; flex-direction: column; }
.product-card__media {
  display: block; overflow: hidden;
  aspect-ratio: 4 / 5;
  border: 1px solid rgba(25, 25, 25, .18);
  border-radius: var(--r-card);
  background: var(--c-white);
}
.product-card__media img {
  width: 100%; height: 100%; object-fit: cover; object-position: center top;
  transition: transform .5s ease;
  /* Lucius: hover scale 1.03 + troca sutil de imagem */
}
.product-card:hover .product-card__media img { transform: scale(1.03); }
[data-product="capsula-01-cargo"] .product-card__media img { object-position: center 72%; }
.product-card:hover .product-card__media { box-shadow: 0 16px 40px rgba(25, 25, 25, .14); }

.product-card__name {
  margin: var(--s-5) 0 var(--s-3);
  font-family: var(--f-display); font-weight: 600;
  font-size: 15px; letter-spacing: .38em; text-transform: uppercase;
}
.product-card__lorem {
  margin: 0 0 var(--s-4);
  font-family: var(--f-display); font-weight: 400;
  font-size: 10.5px; line-height: 1.75;
  letter-spacing: .06em; text-transform: uppercase;
  opacity: .85;
  max-width: 30ch;
}
.product-card__row { margin-top: auto; }

.btn {
  display: inline-flex; align-items: center; gap: var(--s-2);
  text-decoration: none;
  font-family: var(--f-body); font-weight: 400;
  font-size: 9px; letter-spacing: .3em; text-transform: uppercase;
}
.btn--pill {
  background: var(--c-black); color: var(--c-white);
  padding: var(--s-2) var(--s-4);
  border-radius: var(--r-pill);
  transition: background .2s ease, transform .2s ease;
}
.btn--pill:hover { background: var(--c-true-black); transform: translateY(-1px); }
.btn--lg { font-size: 11px; padding: var(--s-3) var(--s-6); letter-spacing: .34em; }

.product-card__price {
  margin: var(--s-4) 0 0;
  font-family: var(--f-display); font-weight: 700;
  font-size: 26px; letter-spacing: .04em;
}
.product-card__price sup { font-size: 10px; letter-spacing: .1em; margin-right: 2px; }
.product-card__price small { font-size: 13px; font-weight: 600; }

/* ==========================================================================
   PDP
   ========================================================================== */
.pdp {
  background: var(--c-true-black);
  padding: var(--s-9) var(--s-7);
}
.pdp__card {
  position: relative;
  display: grid;
  grid-template-columns: 96px minmax(280px, 1fr) minmax(320px, 420px);
  gap: var(--s-6);
  align-items: center;
  max-width: 1180px; margin: 0 auto;
  background: var(--c-white);
  border-radius: var(--r-hero);
  padding: var(--s-7) var(--s-8) var(--s-7) var(--s-6);
  box-shadow: 0 40px 80px rgba(13, 13, 13, .5);
}

.pdp__thumbs { display: flex; flex-direction: column; gap: var(--s-4); align-self: start; padding-top: var(--s-4); }
.pdp__thumb {
  padding: 0; overflow: hidden;
  border: 1px solid rgba(25, 25, 25, .25);
  border-radius: var(--s-2);
  opacity: .7;
  transition: opacity .2s ease, border-color .2s ease;
}
.pdp__thumb:hover { opacity: 1; }
.pdp__thumb.is-active { opacity: 1; border-color: var(--c-black); }
.pdp__thumb img { width: 88px; height: 116px; object-fit: cover; object-position: center top; }

.pdp__media { align-self: end; }
.pdp__media img {
  width: 100%; max-height: 560px;
  object-fit: contain; object-position: center bottom;
}

.pdp__title {
  margin: 0 0 var(--s-5);
  font-family: var(--f-display); font-weight: 600;
  font-size: clamp(26px, 2.6vw, 38px);
  letter-spacing: .34em; text-transform: uppercase;
}
.pdp__subtitle {
  margin: 0 0 var(--s-4);
  font-size: 13px; font-weight: 400;
  letter-spacing: .5em; text-transform: uppercase;
}
.pdp__lorem {
  margin: 0 0 var(--s-6);
  font-family: var(--f-display); font-weight: 400;
  font-size: 10px; line-height: 1.9;
  letter-spacing: .05em; text-transform: uppercase;
  opacity: .8; max-width: 46ch;
}

.pdp__sizes { display: flex; gap: var(--s-3); margin-bottom: var(--s-6); }
.size { position: relative; }
.size input { position: absolute; inset: 0; opacity: 0; cursor: pointer; }
.size span {
  display: grid; place-items: center;
  width: 34px; height: 34px;
  border: 1px solid var(--c-black);
  border-radius: var(--s-1);
  font-size: 12px; font-weight: 400; letter-spacing: .06em;
  transition: background .15s ease, color .15s ease;
}
.size input:checked + span { background: var(--c-black); color: var(--c-white); }
.size input:focus-visible + span { outline: 2px solid var(--c-black); outline-offset: 3px; }

.pdp__pager {
  position: absolute; right: var(--s-5); top: 50%;
  translate: 0 -50%;
  display: flex; flex-direction: column; gap: var(--s-2);
}
.pdp__pager-dot {
  width: 4px; height: 18px;
  border-radius: var(--r-pill);
  background: rgba(25, 25, 25, .2);
}
.pdp__pager-dot.is-active { background: var(--c-black); height: 30px; }

/* ==========================================================================
   RELEASE — BENTO
   ========================================================================== */
.release {
  background: var(--c-black);
  padding: var(--s-9) var(--s-7) var(--s-10);
}
.release .section-title { margin-bottom: var(--s-8); }

.bento {
  display: grid;
  grid-template-columns: 5fr 4fr 3fr;
  grid-template-rows: 260px 300px 300px;
  gap: var(--s-5);
  max-width: 1100px; margin: 0 auto;
}
.bento__tile {
  overflow: hidden;
  border-radius: var(--r-card);
  background: var(--c-true-black);
  transition: transform .35s ease, box-shadow .35s ease, outline-color .35s ease;
  outline: 1px solid transparent; outline-offset: -1px;
  /* Lucius: tilt sutil no hover (transform rotate ~1deg) */
}
.bento__tile:hover {
  transform: translateY(-4px) rotate(.6deg);
  outline-color: var(--c-gold);
  box-shadow: 0 24px 48px rgba(13, 13, 13, .55);
}
.bento__tile img { width: 100%; height: 100%; object-fit: cover; }

.bento__tile--tall        { grid-column: 1; grid-row: 1 / 3; }
.bento__tile--wide-top    { grid-column: 2 / 4; grid-row: 1; }
.bento__tile--wide-mid    { grid-column: 2 / 4; grid-row: 2; border-radius: var(--r-hero); }
.bento__tile--wide-bottom { grid-column: 1 / 3; grid-row: 3; }
.bento__tile--small       { grid-column: 3; grid-row: 3; border-radius: var(--r-hero); }

/* ==========================================================================
   CÓDIGO DE CONDUTA
   ========================================================================== */
.conduct {
  position: relative; overflow: hidden;
  background: var(--c-true-black);
  color: var(--c-white);
  padding: var(--s-10) var(--s-7);
  text-align: center;
  border-top: 1px solid rgba(240, 209, 134, .22);
}

.conduct__eyebrow {
  position: relative; z-index: 1;
  margin: 0 0 var(--s-5);
  color: var(--c-gold);
  font-size: 10px; font-weight: 400;
  letter-spacing: .6em; text-transform: uppercase;
}
.conduct__title {
  position: relative; z-index: 1;
  margin: 0 0 var(--s-5);
  display: flex; flex-direction: column; gap: var(--s-2);
  font-family: var(--f-display); font-weight: 700;
  font-size: clamp(34px, 5.4vw, 76px);
  line-height: 1.08;
  letter-spacing: .22em; text-transform: uppercase;
}

/* gold foil: só gold + branco/preto da paleta, em alfas */
.foil {
  background: linear-gradient(
    105deg,
    var(--c-gold) 0%,
    #ffffff 20%,
    var(--c-gold) 38%,
    rgba(240, 209, 134, .58) 54%,
    var(--c-gold) 70%,
    #ffffff 88%,
    var(--c-gold) 100%
  );
  background-size: 220% 100%;
  background-position: 0% 0;
  -webkit-background-clip: text;
  background-clip: text;
  color: transparent;
  animation: foil-sheen 7s ease-in-out infinite alternate;
}
@keyframes foil-sheen {
  from { background-position: 0% 0; }
  to   { background-position: 100% 0; }
}

.conduct__lead {
  position: relative; z-index: 1;
  margin: 0 auto var(--s-8);
  max-width: 52ch;
  font-family: var(--f-display); font-weight: 400;
  font-size: 11px; line-height: 2;
  letter-spacing: .08em; text-transform: uppercase;
  opacity: .75;
}

.conduct__grid {
  position: relative; z-index: 1;
  display: grid; grid-template-columns: repeat(3, 1fr);
  gap: var(--s-8);
  max-width: 1100px; margin: 0 auto var(--s-9);
  text-align: left;
}
.conduct__clause {
  border-top: 1px solid rgba(240, 209, 134, .35);
  padding-top: var(--s-5);
}
.conduct__numeral {
  display: block;
  font-family: var(--f-display); font-weight: 700;
  font-size: 30px; color: var(--c-gold);
  margin-bottom: var(--s-3);
}
.conduct__clause-title {
  margin: 0 0 var(--s-3);
  font-family: var(--f-display); font-weight: 600;
  font-size: 13px; letter-spacing: .34em; text-transform: uppercase;
}
.conduct__clause p {
  margin: 0;
  font-family: var(--f-display); font-weight: 400;
  font-size: 10px; line-height: 2;
  letter-spacing: .06em; text-transform: uppercase;
  opacity: .7;
}

.conduct__figure {
  position: relative; z-index: 1;
  max-width: 420px; margin: 0 auto;
}
.conduct__figure img {
  width: 100%; max-height: 520px; object-fit: cover; object-position: center 18%;
  border-radius: var(--r-card);
  outline: 1px solid rgba(240, 209, 134, .3); outline-offset: -1px;
}
.conduct__figcaption {
  margin-top: var(--s-4);
  font-size: 9px; letter-spacing: .5em; text-transform: uppercase;
  color: var(--c-gold); opacity: .8;
}

/* ==========================================================================
   FOOTER
   ========================================================================== */
.site-footer {
  display: grid;
  grid-template-columns: 1fr auto 1fr;
  align-items: center;
  gap: var(--s-8);
  background: var(--c-black);
  color: var(--c-white);
  padding: var(--s-9) var(--s-8);
}

.site-footer__title {
  margin: 0 0 var(--s-4);
  font-family: var(--f-display); font-weight: 600;
  font-size: 15px; letter-spacing: .34em; text-transform: uppercase;
}
.site-footer__lorem {
  margin: 0 0 var(--s-5);
  font-family: var(--f-display); font-weight: 400;
  font-size: 9.5px; line-height: 1.9;
  letter-spacing: .06em; text-transform: uppercase;
  opacity: .7; max-width: 34ch;
}
.site-footer__phone {
  font-size: 11px; letter-spacing: .3em; text-decoration: none; opacity: .9;
}
.site-footer__phone:hover { color: var(--c-gold); }

.logo--footer { margin: 0; font-size: 20px; text-align: center; }

.site-footer__icons { display: flex; justify-content: flex-end; gap: var(--s-4); }
.site-footer__icons .icon-btn:hover { color: var(--c-gold); opacity: 1; }

/* ==========================================================================
   REVEALS (base; Lucius liga via IntersectionObserver)
   ========================================================================== */
html.js [data-js="reveal"] {
  opacity: 0; transform: translateY(24px);
  transition: opacity .7s ease, transform .7s ease;
}
html.js [data-js="reveal"].is-visible { opacity: 1; transform: none; }

/* ==========================================================================
   REDUCED MOTION
   ========================================================================== */
@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  *, *::before, *::after {
    animation-duration: .01ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: .01ms !important;
  }
  .foil { animation: none; }
}

/* ==========================================================================
   RESPONSIVO
   ========================================================================== */
@media (max-width: 1080px) {
  .pdp__card { grid-template-columns: 80px 1fr; }
  .pdp__info { grid-column: 1 / 3; }
  .pdp__pager { display: none; }
  .products__grid { gap: var(--s-6); }
}

@media (max-width: 820px) {
  :root { --header-h: 64px; }
  .site-header { padding: 0 var(--s-5); gap: var(--s-4); }
  .site-nav { display: none; /* Lucius: menu mobile */ }

  .hero { padding-top: var(--s-3); }
  .hero__stage { grid-template-columns: var(--s-5) 1fr var(--s-5); }
  .hero__card { height: clamp(420px, 72vh, 640px); }
  .hero__arrow { width: var(--s-5); }
  .hero__caption { left: var(--s-5); right: var(--s-5); bottom: var(--s-6); }

  .products { padding: var(--s-7) var(--s-5) var(--s-8); }
  .products__grid { grid-template-columns: 1fr; max-width: 420px; }

  .pdp { padding: var(--s-7) var(--s-5); }
  .pdp__card {
    grid-template-columns: 1fr;
    padding: var(--s-5);
  }
  .pdp__thumbs { flex-direction: row; order: 2; padding-top: 0; }
  .pdp__media { order: 1; }
  .pdp__info { grid-column: auto; order: 3; }

  .release { padding: var(--s-7) var(--s-5) var(--s-8); }
  .bento {
    grid-template-columns: 1fr 1fr;
    grid-template-rows: auto;
  }
  .bento__tile--tall        { grid-column: 1; grid-row: 1 / 3; min-height: 340px; }
  .bento__tile--wide-top    { grid-column: 2; grid-row: 1; min-height: 160px; }
  .bento__tile--wide-mid    { grid-column: 2; grid-row: 2; min-height: 160px; }
  .bento__tile--wide-bottom { grid-column: 1 / 3; grid-row: 3; min-height: 180px; }
  .bento__tile--small       { grid-column: 1 / 3; grid-row: 4; min-height: 220px; }

  .conduct { padding: var(--s-8) var(--s-5); }
  .conduct__title { font-size: clamp(24px, 7.4vw, 40px); letter-spacing: .12em; }
  .conduct__eyebrow { letter-spacing: .4em; }
  .section-title { letter-spacing: .34em; }
  .conduct__grid { grid-template-columns: 1fr; gap: var(--s-6); }

  .site-footer {
    grid-template-columns: 1fr;
    text-align: center;
    gap: var(--s-6);
    padding: var(--s-7) var(--s-5);
  }
  .site-footer__lorem { margin-inline: auto; }
  .site-footer__icons { justify-content: center; }

  .wm--hero { width: 70vw; top: -10%; }
  .wm--products { width: 66vw; }
}

/* ==========================================================================
   CAMADA LUCIUS — interatividade (aditiva; não altera o design do Fídias)
   Tokens: só brand.json. Tudo escopado em html.js ou componente novo.
   ========================================================================== */

/* ---------- Transição de load (fade de opacity) ---------- */
html.js body { opacity: 0; }
html.js.is-ready body { opacity: 1; transition: opacity .45s ease; }

/* ---------- Hero: parallax + swipe ---------- */
html.js .hero__track { will-change: transform; }
.hero__card { touch-action: pan-y; } /* swipe horizontal é nosso; scroll vertical segue nativo */

/* ---------- PDP: fade da imagem principal ---------- */
html.js [data-js="pdp-main"] { transition: opacity .18s ease; }
html.js [data-js="pdp-main"].is-fading { opacity: 0; }

/* ---------- Reveals: stagger dos filhos (sem tocar no transform do bento) ---------- */
html.js [data-js="reveal"] .product-card,
html.js [data-js="reveal"] .conduct__clause {
  opacity: 0; transform: translateY(18px);
  transition: opacity .6s ease, transform .6s ease;
}
html.js [data-js="reveal"].is-visible .product-card,
html.js [data-js="reveal"].is-visible .conduct__clause { opacity: 1; transform: none; }
html.js [data-js="reveal"].is-visible .product-card:nth-child(2),
html.js [data-js="reveal"].is-visible .conduct__clause:nth-child(2) { transition-delay: .1s; }
html.js [data-js="reveal"].is-visible .product-card:nth-child(3),
html.js [data-js="reveal"].is-visible .conduct__clause:nth-child(3) { transition-delay: .2s; }

/* ---------- Notice ("em breve") — pill preto, keyline gold ---------- */
.notice {
  position: fixed; z-index: 90;
  top: calc(var(--header-h) + var(--s-4));
  right: var(--s-5);
  margin: 0;
  padding: var(--s-3) var(--s-5);
  background: var(--c-true-black); color: var(--c-cream);
  border: 1px solid rgba(240, 209, 134, .5);
  border-radius: var(--r-pill);
  font-size: 10px; font-weight: 400;
  letter-spacing: .28em; text-transform: uppercase;
  box-shadow: 0 16px 40px rgba(13, 13, 13, .35);
  opacity: 0; transform: translateY(-8px);
  transition: opacity .25s ease, transform .25s ease;
  pointer-events: none;
}
.notice.is-visible { opacity: 1; transform: none; }

/* ---------- Hamburger (só < 820px com JS) ---------- */
.nav-toggle {
  display: none;
  position: relative;
  width: 34px; height: 34px;
  border-radius: var(--r-pill);
}
.nav-toggle__bar {
  position: absolute; left: 50%; top: 50%;
  width: 18px; height: 2px;
  margin: -1px 0 0 -9px;
  background: currentColor;
  transition: transform .25s ease, opacity .2s ease;
}
.nav-toggle__bar:nth-child(1) { transform: translateY(-6px); }
.nav-toggle__bar:nth-child(3) { transform: translateY(6px); }
.nav-toggle.is-open .nav-toggle__bar:nth-child(1) { transform: rotate(45deg); }
.nav-toggle.is-open .nav-toggle__bar:nth-child(2) { opacity: 0; }
.nav-toggle.is-open .nav-toggle__bar:nth-child(3) { transform: rotate(-45deg); }

@media (max-width: 820px) {
  html.js .nav-toggle { display: block; }
  .header-icons { margin-left: auto; }

  /* Painel mobile (JS ligado): dropdown sob o header, mesma linguagem da nav */
  html.js .site-nav {
    display: none;
    position: absolute; top: 100%; left: 0; right: 0;
    flex-direction: column; align-items: stretch; gap: 0;
    margin-left: 0;
    padding: var(--s-4) var(--s-5) var(--s-5);
    background: rgba(255, 255, 255, .97);
    backdrop-filter: blur(10px);
    border-top: 1px solid rgba(25, 25, 25, .08);
    box-shadow: 0 24px 48px rgba(25, 25, 25, .14);
    font-size: 12px;
  }
  html.js .site-nav.is-open { display: flex; }
  html.js .site-nav .site-nav__sep { display: none; }
  html.js .site-nav .site-nav__link { padding: var(--s-4) var(--s-3); }

  /* Fallback SEM JS: nav completa visível no header (empilha) */
  html:not(.js) .site-header {
    flex-wrap: wrap; height: auto;
    padding-top: var(--s-3); padding-bottom: var(--s-3);
    row-gap: var(--s-2);
  }
  html:not(.js) .site-nav {
    display: flex; flex-wrap: wrap;
    order: 3; width: 100%; margin-left: 0;
  }
}

/* ---------- Reduced motion: zera delays de stagger e o fade de load ---------- */
@media (prefers-reduced-motion: reduce) {
  html.js body { opacity: 1; transition: none; }
  html.js [data-js="reveal"] .product-card,
  html.js [data-js="reveal"] .conduct__clause { transition-delay: 0s !important; }
}

/* ==========================================================================
   V2 — MULTI-PÁGINA (Fídias, 03/jul)
   Tudo aditivo: nada acima foi alterado. Tokens: só brand.json.
   ========================================================================== */

/* ---------- Hero v2: slides = capsulas (link + caption dinâmica) ---------- */
.hero__slide { pointer-events: none; }
.hero__slide.is-active { pointer-events: auto; }
.hero__slide-link { display: block; width: 100%; height: 100%; }
.hero__cap-link {
  display: inline-block; margin-top: var(--s-3);
  color: var(--c-white); text-decoration: none;
  font-family: var(--f-body); font-weight: 400;
  font-size: 10px; letter-spacing: .32em; text-transform: uppercase;
  border-bottom: 1px solid rgba(240, 209, 134, .65);
  padding-bottom: var(--s-1);
  transition: color .2s ease, border-color .2s ease;
}
.hero__cap-link:hover { color: var(--c-gold); border-color: var(--c-gold); }

/* ---------- Editorial (home, institucional) ---------- */
.editorial {
  position: relative; overflow: hidden;
  background: var(--c-true-black); color: var(--c-white);
  padding: var(--s-9) var(--s-7);
  border-top: 1px solid rgba(240, 209, 134, .22);
}
.editorial__inner {
  position: relative; z-index: 1;
  display: grid; grid-template-columns: minmax(300px, 500px) 1fr;
  gap: var(--s-9); align-items: center;
  max-width: 1180px; margin: 0 auto;
}
.editorial__text { min-width: 0; }
.editorial__eyebrow {
  margin: 0 0 var(--s-5);
  color: var(--c-gold);
  font-size: 10px; font-weight: 400;
  letter-spacing: .6em; text-transform: uppercase;
}
.editorial__title {
  margin: 0 0 var(--s-5);
  display: flex; flex-direction: column; gap: var(--s-2);
  font-family: var(--f-display); font-weight: 700;
  font-size: clamp(28px, 3.6vw, 52px);
  line-height: 1.1; letter-spacing: .2em; text-transform: uppercase;
}
.editorial__lorem {
  margin: 0 0 var(--s-5);
  font-family: var(--f-display); font-weight: 400;
  font-size: 10.5px; line-height: 2;
  letter-spacing: .07em; text-transform: uppercase;
  opacity: .78; max-width: 52ch;
}
.editorial__media { min-width: 0; }
.editorial__media img {
  width: 100%; max-height: 560px; object-fit: cover;
  border-radius: var(--r-card);
  outline: 1px solid rgba(240, 209, 134, .3); outline-offset: -1px;
  filter: grayscale(1) contrast(1.06);
}
.editorial__figcaption {
  margin-top: var(--s-4);
  font-size: 9px; letter-spacing: .5em; text-transform: uppercase;
  color: var(--c-gold); opacity: .8;
}
.btn--gold-line {
  background: transparent; color: var(--c-cream);
  border: 1px solid rgba(240, 209, 134, .55);
  padding: var(--s-2) var(--s-4);
  border-radius: var(--r-pill);
  transition: background .2s ease, color .2s ease, transform .2s ease;
}
.btn--gold-line:hover { background: var(--c-gold); color: var(--c-black); transform: translateY(-1px); }
.wm--editorial { left: -12%; bottom: -22%; width: min(38vw, 540px); transform: rotate(-5deg); }
.wm--editorial img { opacity: .2; filter: invert(1); }

/* ---------- Filmstrip (faixa de fotos, feel P&B) ---------- */
.filmstrip { background: var(--c-cream); padding: var(--s-8) var(--s-5); overflow: hidden; }
.filmstrip__rail {
  display: flex; gap: var(--s-5);
  justify-content: center; align-items: center;
  max-width: 1440px; margin: 0 auto;
}
.filmstrip__frame { flex: 1 1 0; min-width: 0; max-width: 280px; }
.filmstrip__frame img {
  width: 100%; aspect-ratio: 3 / 4; object-fit: cover;
  border-radius: var(--r-card);
  filter: grayscale(1) contrast(1.1);
  transition: filter .45s ease;
}
.filmstrip__frame:hover img { filter: grayscale(0) contrast(1); }
.filmstrip__frame:nth-child(odd) { transform: rotate(-1.1deg) translateY(var(--s-2)); }
.filmstrip__frame:nth-child(even) { transform: rotate(.9deg) translateY(calc(-1 * var(--s-2))); }

/* ---------- Carrossel de produtos (home) — SEM preço ----------
   Física real de carrossel (spec do Bruno — critério de aceite nº 1):
   sainte encolhe/esmaece SEM sumir; entrante JÁ está atrás, menor e
   embaçado, ganhando escala/nitidez; todos deslizam juntos; loop.
   O CSS abaixo dá a perspectiva via --pc-d (0 = centro nítido,
   1 = borda menor/apagada/embaçada) + máscara de fade nas pontas.
   Base minha: scroll-snap + JS que alimenta --pc-d por distância do
   centro (rAF). TODO(Lucius): loop infinito (reciclar itens), drag
   com inércia no desktop, entrante coreografado, teclado/ARIA fina.
   Hooks: data-js="pcarousel" | "pc-track" | "pc-item" | "pc-prev" | "pc-next".
   Sem JS: trilho overflow-x simples (degradação exigida no brief). */
.pcarousel-section {
  position: relative; overflow: hidden;
  background: var(--c-white);
  padding: var(--s-9) 0 var(--s-9);
}
.pcarousel-section .section-title { margin-bottom: var(--s-7); }
.pcarousel {
  position: relative;
  display: grid; grid-template-columns: var(--s-8) 1fr var(--s-8);
  align-items: center;
  max-width: 1560px; margin: 0 auto;
}
.pcarousel__track {
  grid-column: 2;
  display: flex; gap: var(--s-6);
  margin: 0; padding: var(--s-5) var(--s-4) var(--s-6);
  list-style: none;
  overflow-x: auto;
  scroll-snap-type: x mandatory;
  scrollbar-width: none;
  -webkit-mask-image: linear-gradient(90deg, rgba(0,0,0,.3) 0, #000 14%, #000 86%, rgba(0,0,0,.3) 100%);
  mask-image: linear-gradient(90deg, rgba(0,0,0,.3) 0, #000 14%, #000 86%, rgba(0,0,0,.3) 100%);
}
.pcarousel__track::-webkit-scrollbar { display: none; }
.pcarousel__item {
  flex: 0 0 clamp(190px, 20vw, 250px);
  min-width: 0;
  scroll-snap-align: center;
  --pc-d: 0; /* 0 = centro · 1 = borda (JS alimenta; sem JS fica 0) */
  transform: scale(calc(1 - var(--pc-d) * .18));
  opacity: calc(1 - var(--pc-d) * .52);
  filter: blur(calc(var(--pc-d) * 2.5px));
  transition: transform .15s linear, opacity .15s linear, filter .15s linear;
  will-change: transform, opacity, filter;
}
.pcarousel__card { display: block; text-decoration: none; color: inherit; }
.pcarousel__media {
  display: block; overflow: hidden;
  aspect-ratio: 4 / 5;
  border: 1px solid rgba(25, 25, 25, .18);
  border-radius: var(--r-card);
  background: var(--c-white);
}
.pcarousel__media img {
  width: 100%; height: 100%; object-fit: cover; object-position: center top;
  transition: transform .5s ease;
}
.pcarousel__card:hover .pcarousel__media img { transform: scale(1.04); }
.pcarousel__card:hover .pcarousel__media { box-shadow: 0 16px 40px rgba(25, 25, 25, .14); }
.pcarousel__name {
  display: block; margin: var(--s-4) 0 var(--s-1);
  font-family: var(--f-display); font-weight: 600;
  font-size: 12px; letter-spacing: .3em; text-transform: uppercase;
}
.pcarousel__lorem {
  display: block;
  font-family: var(--f-display); font-weight: 400;
  font-size: 9.5px; letter-spacing: .06em; text-transform: uppercase;
  opacity: .7;
}
.pcarousel__arrow {
  z-index: 2;
  width: var(--s-8); height: var(--s-8);
  display: grid; place-items: center;
  color: var(--c-black); opacity: .6;
  transition: opacity .2s ease, transform .2s ease;
}
.pcarousel__arrow:hover { opacity: 1; transform: scale(1.12); }
.pcarousel__arrow svg { width: 22px; height: 22px; }
.pcarousel__arrow--prev { grid-column: 1; grid-row: 1; }
.pcarousel__arrow--next { grid-column: 3; grid-row: 1; }
html:not(.js) .pcarousel__arrow { display: none; } /* setas só fazem sentido com JS */
.pcarousel__cta { margin: var(--s-6) 0 0; text-align: center; }

/* ---------- Intro de página (capsulas / loja) ---------- */
.page-intro { padding: var(--s-8) var(--s-7) var(--s-7); text-align: center; }
.page-intro__eyebrow {
  margin: 0 0 var(--s-4);
  font-size: 10px; font-weight: 400;
  letter-spacing: .6em; text-transform: uppercase;
  opacity: .55;
}
.page-intro__title {
  margin: 0 0 var(--s-4);
  font-family: var(--f-display); font-weight: 700;
  font-size: clamp(34px, 5vw, 64px);
  letter-spacing: .32em; text-transform: uppercase;
}
.page-intro__lead {
  margin: 0 auto;
  max-width: 52ch;
  font-family: var(--f-display); font-weight: 400;
  font-size: 11px; line-height: 2;
  letter-spacing: .08em; text-transform: uppercase;
  opacity: .7;
}

/* ---------- Capsulas (coleções) ---------- */
.capsula { padding: var(--s-9) var(--s-7); }
.capsula__inner {
  display: grid; grid-template-columns: 1.12fr .88fr;
  gap: var(--s-8); align-items: center;
  max-width: 1180px; margin: 0 auto;
}
.capsula__feature, .capsula__text { min-width: 0; }
.capsula__feature img {
  width: 100%; max-height: 660px; object-fit: cover;
  border-radius: var(--r-hero);
  box-shadow: 0 32px 64px rgba(13, 13, 13, .22);
}
.capsula--flip .capsula__feature { order: 2; }
.capsula--dark {
  background: var(--c-black); color: var(--c-white);
}
.capsula--dark .capsula__feature img { box-shadow: 0 32px 64px rgba(13, 13, 13, .55); }
.capsula__numeral {
  display: block; margin-bottom: var(--s-2);
  font-family: var(--f-display); font-weight: 700;
  font-size: clamp(44px, 5.4vw, 76px);
  color: var(--c-gold); line-height: 1;
}
.capsula__title {
  margin: 0 0 var(--s-3);
  font-family: var(--f-display); font-weight: 600;
  font-size: clamp(24px, 2.8vw, 38px);
  letter-spacing: .34em; text-transform: uppercase;
}
.capsula__tag {
  margin: 0 0 var(--s-5);
  font-size: 10px; font-weight: 400;
  letter-spacing: .5em; text-transform: uppercase;
  opacity: .55;
}
.capsula__lorem {
  margin: 0 0 var(--s-4);
  font-family: var(--f-display); font-weight: 400;
  font-size: 10.5px; line-height: 1.95;
  letter-spacing: .06em; text-transform: uppercase;
  opacity: .8; max-width: 46ch;
}
.capsula__minis { display: flex; gap: var(--s-4); margin-top: var(--s-6); }
.capsula__mini { flex: 1; min-width: 0; }
.capsula__mini img {
  width: 100%; aspect-ratio: 4 / 5; object-fit: cover;
  border-radius: var(--r-card);
}
.capsula--dark .capsula__mini img { outline: 1px solid rgba(240, 209, 134, .25); outline-offset: -1px; }

/* Capsula 03 — variação bento (padrão aprovado da v1) */
.capsula--bento {
  background: var(--c-true-black); color: var(--c-white);
  border-top: 1px solid rgba(240, 209, 134, .22);
  padding-bottom: var(--s-10);
}
.capsula--bento .capsula__head { max-width: 1100px; margin: 0 auto var(--s-8); }
.capsula--bento .bento { margin-top: var(--s-6); }

/* ---------- Conduta v2 — 10 mandamentos ---------- */
.conduct--page { padding-top: var(--s-9); }
.mandamentos {
  position: relative; z-index: 1;
  display: grid; grid-template-columns: repeat(2, 1fr);
  gap: var(--s-6) var(--s-9);
  max-width: 940px; margin: 0 auto var(--s-9);
  text-align: left;
}

/* ---------- PDP v2 (páginas de produto) ---------- */
.pdp--page { padding-top: var(--s-8); }
.pdp__eyebrow {
  margin: 0 0 var(--s-3);
  font-size: 10px; font-weight: 400;
  letter-spacing: .5em; text-transform: uppercase;
  opacity: .55;
}
.pdp__price {
  margin: 0 0 var(--s-6);
  font-family: var(--f-display); font-weight: 700;
  font-size: 30px; letter-spacing: .04em;
}
.pdp__price sup { font-size: 11px; letter-spacing: .1em; margin-right: 2px; }
.pdp__price small { font-size: 14px; font-weight: 600; }
.pdp__sizes--single { margin: 0 0 var(--s-6); }
.size-single {
  display: inline-block;
  border: 1px solid var(--c-black);
  border-radius: var(--r-pill);
  padding: var(--s-2) var(--s-4);
  font-size: 10px; font-weight: 400;
  letter-spacing: .24em; text-transform: uppercase;
}
.pdp__pager--nav { align-items: center; }
.pdp__pager-btn {
  width: 34px; height: 34px;
  display: grid; place-items: center;
  border: 1px solid rgba(25, 25, 25, .25);
  border-radius: var(--r-pill);
  color: var(--c-black); text-decoration: none;
  transition: background .2s ease, color .2s ease;
}
.pdp__pager-btn:hover { background: var(--c-black); color: var(--c-white); }
.pdp__pager-btn svg { width: 14px; height: 14px; }
.pdp__pager-index {
  font-size: 9px; font-weight: 400; letter-spacing: .2em;
  opacity: .6;
}
.pdp__back {
  max-width: 1180px; margin: var(--s-5) auto 0;
}
.pdp__back a {
  color: var(--c-cream); text-decoration: none;
  font-size: 10px; letter-spacing: .32em; text-transform: uppercase;
  opacity: .7; transition: opacity .2s ease, color .2s ease;
}
.pdp__back a:hover { opacity: 1; color: var(--c-gold); }

/* ---------- Contato (página) ---------- */
.contact {
  position: relative; overflow: hidden;
  background: var(--c-true-black); color: var(--c-white);
  padding: var(--s-9) var(--s-7) var(--s-10);
  border-top: 1px solid rgba(240, 209, 134, .22);
}
.contact :focus-visible { outline-color: var(--c-gold); }
.contact__inner {
  position: relative; z-index: 2;
  display: grid; grid-template-columns: 1fr 1fr;
  gap: var(--s-9); align-items: start;
  max-width: 1100px; margin: 0 auto;
}
.contact__info, .contact__form { min-width: 0; }
.contact__eyebrow {
  margin: 0 0 var(--s-5);
  color: var(--c-gold);
  font-size: 10px; font-weight: 400;
  letter-spacing: .6em; text-transform: uppercase;
}
.contact__title {
  margin: 0 0 var(--s-5);
  display: flex; flex-direction: column; gap: var(--s-2);
  font-family: var(--f-display); font-weight: 700;
  font-size: clamp(34px, 5vw, 68px);
  line-height: 1.08; letter-spacing: .22em; text-transform: uppercase;
}
.contact__lorem {
  margin: 0 0 var(--s-5);
  font-family: var(--f-display); font-weight: 400;
  font-size: 10.5px; line-height: 2;
  letter-spacing: .07em; text-transform: uppercase;
  opacity: .75; max-width: 44ch;
}
.contact__phone {
  display: inline-block; margin-bottom: var(--s-6);
  color: var(--c-cream); text-decoration: none;
  font-size: 13px; letter-spacing: .3em;
}
.contact__phone:hover { color: var(--c-gold); }
.contact__social { display: flex; gap: var(--s-4); }
.contact__social .icon-btn:hover { color: var(--c-gold); opacity: 1; }
.contact__form { display: flex; flex-direction: column; gap: var(--s-5); }
.contact__field { margin: 0; display: flex; flex-direction: column; gap: var(--s-2); }
.contact__label {
  font-size: 10px; font-weight: 400;
  letter-spacing: .4em; text-transform: uppercase;
  color: var(--c-gold);
}
.contact__input {
  background: transparent;
  border: 0; border-bottom: 1px solid rgba(245, 242, 234, .35);
  border-radius: 0;
  color: var(--c-cream);
  font-family: var(--f-body); font-weight: 300; font-size: 14px;
  letter-spacing: .04em;
  padding: var(--s-2) 0;
  transition: border-color .2s ease;
}
.contact__input:focus { outline: none; border-bottom-color: var(--c-gold); }
.contact__input--area { resize: vertical; min-height: 120px; }
.contact__form .btn--pill {
  align-self: flex-start;
  background: var(--c-cream); color: var(--c-black);
  border: 0; cursor: pointer;
}
.contact__form .btn--pill:hover { background: var(--c-gold); }
.contact__media {
  position: absolute; z-index: 0;
  top: 0; right: 0; bottom: 0; width: 44%;
  opacity: .16; pointer-events: none;
}
.contact__media img {
  width: 100%; height: 100%; object-fit: cover;
  filter: grayscale(1);
  -webkit-mask-image: linear-gradient(90deg, transparent, #000 45%);
  mask-image: linear-gradient(90deg, transparent, #000 45%);
}

/* ---------- Loja ---------- */
.products--loja { padding-top: var(--s-6); }
.products__grid--loja { row-gap: var(--s-9); }
.product-card__media--street img { object-position: center 40%; }

/* ---------- Responsivo V2 ---------- */
@media (max-width: 1080px) {
  .pdp__pager--nav {
    display: flex; position: static; translate: none;
    flex-direction: row; justify-content: center;
    grid-column: 1 / -1; order: 4;
    margin-top: var(--s-5);
  }
}

@media (max-width: 820px) {
  .editorial { padding: var(--s-8) var(--s-5); }
  .editorial__inner { grid-template-columns: 1fr; gap: var(--s-6); }
  .editorial__media { order: -1; }

  .filmstrip { padding: var(--s-7) var(--s-4); }
  .filmstrip__rail {
    justify-content: flex-start;
    overflow-x: auto;
    scroll-snap-type: x proximity;
    padding-bottom: var(--s-4);
  }
  .filmstrip__frame { flex: 0 0 56vw; max-width: none; scroll-snap-align: center; }

  .pcarousel { grid-template-columns: 0 1fr 0; }
  .pcarousel__arrow { display: none; } /* mobile: swipe */
  .pcarousel__item { flex-basis: 62vw; }
  .pcarousel__track { gap: var(--s-5); padding-inline: var(--s-5); }

  .page-intro { padding: var(--s-7) var(--s-5) var(--s-6); }
  .page-intro__title { letter-spacing: .2em; }

  .capsula { padding: var(--s-7) var(--s-5); }
  .capsula__inner { grid-template-columns: 1fr; gap: var(--s-6); }
  .capsula--flip .capsula__feature { order: 0; }
  .capsula__minis { flex-wrap: wrap; }
  .capsula__mini { flex: 1 1 40%; }

  .mandamentos { grid-template-columns: 1fr; gap: var(--s-6); }

  .contact { padding: var(--s-8) var(--s-5); }
  .contact__inner { grid-template-columns: 1fr; gap: var(--s-7); }
  .contact__media { width: 100%; opacity: .08; }

  .products__grid--loja { max-width: 420px; }
}

/* Anchors das capsulas: não esconder o título sob o header sticky */
.capsula { scroll-margin-top: calc(var(--header-h) + var(--s-4)); }

/* ==========================================================================
   CAMADA DE COMPORTAMENTO (Lucius) — só estados de interação; tokens,
   perspectiva (--pc-d) e composição do Fídias permanecem intocados.
   ========================================================================== */

/* Carrossel de produtos — modo enhanced (JS ativo): o trilho congela o
   scroll nativo e o engine posiciona cada item via --pc-x (translateX),
   combinado com a escala/opacity/blur de --pc-d já definidos acima.
   Transições saem: o rAF entrega a continuidade quadro a quadro. */
html.js .pcarousel--enhanced .pcarousel__track {
  position: relative;             /* offsetParent dos itens = trilho */
  overflow: hidden;
  scroll-snap-type: none;
  touch-action: pan-y;            /* scroll vertical segue livre no touch */
  cursor: grab;
  -webkit-user-select: none;      /* drag de mouse não seleciona texto dos cards */
  user-select: none;
}
html.js .pcarousel--enhanced.is-dragging .pcarousel__track { cursor: grabbing; }
html.js .pcarousel--enhanced.is-dragging .pcarousel__card { pointer-events: none; }
html.js .pcarousel--enhanced .pcarousel__item {
  transform: translateX(var(--pc-x, 0px)) scale(calc(1 - var(--pc-d) * .18));
  transition: none;
}
html.js .pcarousel--enhanced .pcarousel__media img {
  -webkit-user-drag: none;
  user-select: none;
}

/* Sem JS as setas do hero são botões mortos — esconder (mesmo racional
   da regra existente das setas do pcarousel). */
html:not(.js) .hero__arrow { display: none; }

/* Form de contato — estado de erro: keyline gold (IDV) + mensagem.
   Fundo é true-black: gold #f0d186 passa AA com folga. */
.contact__field.is-error .contact__input { border-bottom-color: var(--c-gold); }
.contact__error {
  min-height: 14px;
  color: var(--c-gold);
  font-size: 10px; font-weight: 400;
  letter-spacing: .22em; text-transform: uppercase;
}