/* ============ TOKENS ============ */
    :root {
      --bg: #FAFBF8;
      --surface: #EDF2E7;
      --card: #FFFFFF;
      --stage: #F4F6F1;
      --ink: #1C3A28;
      --ink-soft: #5A6B5E;
      --line: rgba(28, 58, 40, .14);
      --accent: #4F7D1F;
      --lime: #8DC63F;
      --violet: #7B2D8E;
      --violet-soft: #F3EAF6;
      --stage-violet: #F3EAF6;
      /* o palco das fotos fica claro nos dois temas */
      --grain: .04;
      --ground: rgba(20, 30, 18, .25);
      color-scheme: light dark;
      --shadow: 0 24px 60px -30px rgba(28, 58, 40, .35);
      --font-display: "Century Gothic", "CenturyGothic", "Futura", "Questrial", "Poppins", "Segoe UI", Calibri, sans-serif;
      --font-body: "Segoe UI", "Seravek", "Avenir Next", Calibri, sans-serif;
    }

    @media (prefers-color-scheme: dark) {
      :root {
        --bg: #0F1A13;
        --surface: #17251B;
        --card: #152219;
        --stage: #F1F3EE;
        --ink: #ECF2E9;
        --ink-soft: #A6B5A6;
        --line: rgba(236, 242, 233, .15);
        --accent: #9CCB55;
        --lime: #9CCB55;
        --violet: #C084D6;
        --violet-soft: #2A1D31;
        --grain: .02;
        --ground: rgba(0, 0, 0, .6);
        color-scheme: dark;
        --shadow: 0 24px 60px -30px rgba(0, 0, 0, .6);
      }
    }

    :root[data-theme="dark"] {
      --bg: #0F1A13;
      --surface: #17251B;
      --card: #152219;
      --stage: #F1F3EE;
      --ink: #ECF2E9;
      --ink-soft: #A6B5A6;
      --line: rgba(236, 242, 233, .15);
      --accent: #9CCB55;
      --lime: #9CCB55;
      --violet: #C084D6;
      --violet-soft: #2A1D31;
      --grain: .02;
      --ground: rgba(0, 0, 0, .6);
      color-scheme: dark;
      --shadow: 0 24px 60px -30px rgba(0, 0, 0, .6);
    }

    :root[data-theme="light"] {
      --bg: #FAFBF8;
      --surface: #EDF2E7;
      --card: #FFFFFF;
      --stage: #F4F6F1;
      --ink: #1C3A28;
      --ink-soft: #5A6B5E;
      --line: rgba(28, 58, 40, .14);
      --accent: #4F7D1F;
      --lime: #8DC63F;
      --violet: #7B2D8E;
      --violet-soft: #F3EAF6;
      --grain: .04;
      --ground: rgba(20, 30, 18, .25);
      color-scheme: light;
      --shadow: 0 24px 60px -30px rgba(28, 58, 40, .35);
    }

    /* ============ BASE ============ */
    *,
    *::before,
    *::after {
      box-sizing: border-box;
      margin: 0;
      padding: 0
    }

    html {
      scroll-behavior: smooth
    }

    body {
      font-family: var(--font-body);
      background: var(--bg);
      color: var(--ink);
      line-height: 1.6;
      -webkit-font-smoothing: antialiased;
      overflow-x: clip;
    }

    img,
    svg {
      max-width: 100%
    }

    a {
      color: inherit;
      text-decoration: none
    }

    button {
      font: inherit;
      color: inherit;
      background: none;
      border: none;
      cursor: pointer
    }

    ul,
    ol {
      list-style: none
    }

    ::selection {
      background: var(--accent);
      color: var(--bg)
    }

    a:focus-visible,
    button:focus-visible,
    input:focus-visible {
      outline: 2px solid var(--accent);
      outline-offset: 3px;
      border-radius: 3px
    }

    section {
      scroll-margin-top: 96px
    }

    .wrap {
      width: min(1200px, 92vw);
      margin-inline: auto
    }

    /* grão sutil */
    body::after {
      content: "";
      position: fixed;
      inset: 0;
      z-index: 90;
      pointer-events: none;
      opacity: var(--grain);
      background-image: url("img/noise.svg");
    }

    /* hexágonos da marca */
    .hexes {
      position: absolute;
      inset: 0;
      pointer-events: none;
      opacity: .5;
      background-image: url("img/hexes.svg");
      -webkit-mask-image: radial-gradient(80% 80% at 70% 30%, #000 30%, transparent 75%);
      mask-image: radial-gradient(80% 80% at 70% 30%, #000 30%, transparent 75%);
    }

    .eyebrow {
      font-family: var(--font-display);
      font-size: .72rem;
      letter-spacing: .24em;
      text-transform: uppercase;
      color: var(--ink-soft);
      display: flex;
      align-items: center;
      gap: .9rem;
    }

    .eyebrow::before {
      content: "";
      width: 2.2rem;
      height: 2px;
      background: var(--lime);
      flex: none
    }

    .sec-title {
      font-family: var(--font-display);
      font-weight: 700;
      font-size: clamp(1.9rem, 4.2vw, 3.2rem);
      line-height: 1.12;
      letter-spacing: .01em;
      text-wrap: balance;
      margin-top: 1rem;
    }

    .sec-title em {
      font-style: normal;
      color: var(--accent)
    }

    .sec-head {
      margin-bottom: clamp(2.4rem, 5vw, 4rem)
    }

    .sec {
      padding-block: clamp(4.5rem, 9vw, 8rem)
    }

    [data-reveal] {
      opacity: 0;
      transform: translateY(28px);
      transition: opacity .9s ease, transform .9s cubic-bezier(.19, 1, .22, 1)
    }

    [data-reveal].in {
      opacity: 1;
      transform: none
    }

    .progress {
      position: fixed;
      top: 0;
      left: 0;
      height: 2px;
      width: 0;
      background: var(--lime);
      z-index: 80;
      transition: opacity .3s
    }

    body.menu-open .progress {
      opacity: 0
    }

    /* ============ HEADER ============ */
    .site-head {
      position: fixed;
      top: 0;
      left: 0;
      right: 0;
      z-index: 70;
      transition: transform .45s cubic-bezier(.19, 1, .22, 1), background .3s ease, border-color .3s ease;
      border-bottom: 1px solid transparent;
    }

    .site-head.scrolled {
      background: color-mix(in srgb, var(--bg) 85%, transparent);
      -webkit-backdrop-filter: blur(14px);
      backdrop-filter: blur(14px);
      border-bottom-color: var(--line);
    }

    .site-head.hide {
      transform: translateY(-100%)
    }

    .head-in {
      display: flex;
      align-items: center;
      justify-content: space-between;
      gap: 1.2rem;
      padding-block: 1rem
    }

    .logo {
      display: inline-flex;
      align-items: center;
      gap: .7rem
    }

    .logo .rh {
      width: 42px;
      height: 42px;
      border: 1.5px solid var(--ink);
      border-radius: 50%;
      display: grid;
      place-items: center;
      font-family: Georgia, serif;
      font-style: italic;
      font-size: 1.15rem;
      line-height: 1;
    }

    .logo .name {
      font-family: var(--font-display);
      letter-spacing: .2em;
      font-size: .82rem;
      text-transform: uppercase;
      line-height: 1.3
    }

    .logo .name b {
      display: block;
      font-weight: 700;
      letter-spacing: .32em
    }

    .nav {
      display: flex;
      gap: 2rem
    }

    .nav a {
      font-family: var(--font-display);
      font-size: .76rem;
      letter-spacing: .16em;
      text-transform: uppercase;
      position: relative;
      padding-block: .3rem
    }

    .nav a::after {
      content: "";
      position: absolute;
      left: 0;
      bottom: 0;
      height: 2px;
      width: 100%;
      background: var(--lime);
      transform: scaleX(0);
      transform-origin: right;
      transition: transform .35s cubic-bezier(.19, 1, .22, 1)
    }

    .nav a:hover::after {
      transform: scaleX(1);
      transform-origin: left
    }

    .head-actions {
      display: flex;
      align-items: center;
      gap: .7rem
    }

    .bag {
      display: inline-flex;
      align-items: center;
      justify-content: center;
      gap: .5rem;
      min-height: 44px;
      min-width: 44px;
      font-family: var(--font-display);
      font-size: .74rem;
      letter-spacing: .12em;
      text-transform: uppercase;
      border: 1px solid var(--ink);
      border-radius: 99px;
      padding: .55rem 1.1rem;
      transition: background .3s, color .3s, transform .2s;
    }

    .bag:hover {
      background: var(--ink);
      color: var(--bg)
    }

    .bag.bump {
      animation: bump .5s cubic-bezier(.19, 1, .22, 1)
    }

    @keyframes bump {
      35% {
        transform: scale(1.12)
      }
    }

    .burger {
      display: none;
      width: 44px;
      height: 44px;
      flex-direction: column;
      align-items: center;
      justify-content: center;
      gap: 6px;
      z-index: 75
    }

    .burger span {
      display: block;
      width: 22px;
      height: 1.6px;
      background: var(--ink);
      transition: transform .35s, opacity .3s
    }

    body.menu-open .burger span:nth-child(1) {
      transform: translateY(7.6px) rotate(45deg)
    }

    body.menu-open .burger span:nth-child(2) {
      opacity: 0
    }

    body.menu-open .burger span:nth-child(3) {
      transform: translateY(-7.6px) rotate(-45deg)
    }

    .menu {
      position: fixed;
      inset: 0;
      z-index: 65;
      background: var(--bg);
      display: flex;
      flex-direction: column;
      padding: 5.5rem 8vw 2rem;
      gap: .4rem;
      overflow-y: auto;
      opacity: 0;
      visibility: hidden;
      transition: opacity .4s ease, visibility 0s .4s;
    }

    .menu::before,
    .menu::after {
      content: "";
      margin-block: auto
    }

    body.menu-open {
      overflow: hidden
    }

    body.menu-open .menu {
      opacity: 1;
      visibility: visible;
      transition: opacity .4s ease
    }

    .menu a {
      font-family: var(--font-display);
      font-weight: 700;
      font-size: clamp(1.8rem, 8vw, 3rem);
      line-height: 1.3;
      letter-spacing: .04em;
      text-transform: uppercase;
      transform: translateY(24px);
      opacity: 0;
      transition: transform .6s cubic-bezier(.19, 1, .22, 1), opacity .5s;
    }

    body.menu-open .menu a {
      transform: none;
      opacity: 1
    }

    body.menu-open .menu a:nth-child(2) {
      transition-delay: .06s
    }

    body.menu-open .menu a:nth-child(3) {
      transition-delay: .12s
    }

    body.menu-open .menu a:nth-child(4) {
      transition-delay: .18s
    }

    body.menu-open .menu a:nth-child(5) {
      transition-delay: .24s
    }

    body.menu-open .menu a:nth-child(6) {
      transition-delay: .3s
    }

    .menu a:hover {
      color: var(--accent)
    }

    /* ============ HERO ============ */
    .hero {
      position: relative;
      min-height: 100svh;
      display: grid;
      align-items: center;
      overflow: clip;
      padding-top: 5.5rem
    }

    .hero .hexes {
      inset: auto -10% -20% 40%;
      height: 120%
    }

    .hero-grid {
      display: grid;
      grid-template-columns: 1.05fr .95fr;
      gap: 3.5rem;
      align-items: center;
      position: relative
    }

    .hero .eyebrow {
      opacity: 0;
      animation: fade .9s ease .1s forwards
    }

    .hero h1 {
      font-family: var(--font-display);
      font-weight: 700;
      font-size: clamp(2.3rem, 4.9vw, 4.3rem);
      line-height: 1.06;
      letter-spacing: .005em;
      margin-top: 1.4rem;
      text-wrap: balance;
    }

    .hl {
      display: block;
      overflow: hidden;
      padding-bottom: .2em;
      margin-bottom: -.2em
    }

    .hl>span {
      display: inline-block;
      transform: translateY(130%);
      animation: rise 1s cubic-bezier(.19, 1, .22, 1) forwards
    }

    .hl:nth-of-type(1)>span {
      animation-delay: .18s
    }

    .hl:nth-of-type(2)>span {
      animation-delay: .3s
    }

    .hero h1 em {
      font-style: normal;
      color: var(--accent)
    }

    @keyframes rise {
      to {
        transform: translateY(0)
      }
    }

    @keyframes fade {
      to {
        opacity: 1
      }
    }

    .hero-sub {
      max-width: 46ch;
      color: var(--ink-soft);
      margin-top: 1.8rem;
      font-size: 1.05rem;
      opacity: 0;
      animation: fadeUp .9s cubic-bezier(.19, 1, .22, 1) .65s forwards;
    }

    @keyframes fadeUp {
      from {
        opacity: 0;
        transform: translateY(22px)
      }

      to {
        opacity: 1;
        transform: none
      }
    }

    .hero-cta {
      display: flex;
      align-items: center;
      gap: 1.6rem;
      margin-top: 2.4rem;
      flex-wrap: wrap;
      opacity: 0;
      animation: fadeUp .9s cubic-bezier(.19, 1, .22, 1) .8s forwards
    }

    .btn {
      display: inline-flex;
      align-items: center;
      gap: .7rem;
      background: var(--ink);
      color: var(--bg);
      border-radius: 99px;
      padding: 1.05rem 2.1rem;
      min-height: 44px;
      font-family: var(--font-display);
      font-size: .78rem;
      letter-spacing: .16em;
      text-transform: uppercase;
      transition: background .3s, transform .25s ease;
      will-change: transform;
    }

    .btn:hover {
      background: var(--accent)
    }

    .btn .arr {
      transition: transform .3s
    }

    .btn:hover .arr {
      transform: translateX(5px)
    }

    .link-under {
      font-family: var(--font-display);
      font-size: .78rem;
      letter-spacing: .16em;
      text-transform: uppercase;
      border-bottom: 2px solid var(--lime);
      padding-bottom: .35rem;
      transition: color .3s, border-color .3s;
    }

    .link-under:hover {
      color: var(--accent)
    }

    .hero-meta {
      display: flex;
      gap: .6rem;
      flex-wrap: wrap;
      margin-top: 3rem;
      font-family: var(--font-display);
      font-size: .68rem;
      letter-spacing: .18em;
      text-transform: uppercase;
      color: var(--ink-soft);
      opacity: 0;
      animation: fade 1s ease 1.05s forwards;
    }

    .hero-meta span+span::before {
      content: "·";
      margin-right: .6rem;
      color: var(--lime)
    }

    /* painel do produto no hero */
    .hero-visual {
      position: relative;
      opacity: 0;
      animation: visIn 1.3s cubic-bezier(.19, 1, .22, 1) .5s forwards
    }

    @keyframes visIn {
      from {
        opacity: 0;
        transform: scale(.94) translateY(30px)
      }

      to {
        opacity: 1;
        transform: none
      }
    }

    .hero-mosaic {
      display: grid;
      grid-template-columns: 1fr 1fr;
      gap: 1rem;
      max-width: 560px;
      margin-left: auto;
      padding-bottom: 2.6rem
    }

    .hm {
      position: relative;
      display: block;
      aspect-ratio: 1;
      border-radius: 22px;
      overflow: hidden;
      background: var(--l-stage);
      box-shadow: var(--shadow)
    }

    .hm:nth-child(even) {
      transform: translateY(2.6rem)
    }

    .hm img {
      width: 100%;
      height: 100%;
      object-fit: cover;
      display: block;
      transition: transform .8s cubic-bezier(.19, 1, .22, 1)
    }

    .hm:hover img {
      transform: scale(1.06)
    }

    .hm span {
      position: absolute;
      left: .7rem;
      bottom: .7rem;
      background: var(--l-vivo);
      color: #14261B;
      border-radius: 99px;
      padding: .35rem .8rem;
      font-family: var(--font-display);
      font-size: .6rem;
      letter-spacing: .14em;
      text-transform: uppercase;
    }

    @keyframes bob {
      from {
        transform: translateY(-6px) rotate(-.5deg)
      }

      to {
        transform: translateY(8px) rotate(.6deg)
      }
    }

    .chip-float {
      position: absolute;
      z-index: 2;
      background: var(--card);
      color: var(--ink);
      border: 1px solid var(--line);
      border-radius: 99px;
      padding: .55rem 1.05rem;
      font-family: var(--font-display);
      font-size: .66rem;
      letter-spacing: .14em;
      text-transform: uppercase;
      box-shadow: 0 10px 26px -12px rgba(28, 58, 40, .35);
      animation: bob 8s ease-in-out -3s infinite alternate;
    }

    .chip-float.c1 {
      top: 44%;
      left: -6%
    }

    .chip-float.c2 {
      top: -.4rem;
      right: 3%;
      animation-delay: -5s
    }

    .chip-float b {
      color: var(--accent)
    }

    .scroll-hint {
      position: absolute;
      bottom: 2rem;
      left: 50%;
      transform: translateX(-50%);
      font-family: var(--font-display);
      font-size: .64rem;
      letter-spacing: .3em;
      text-transform: uppercase;
      color: var(--ink-soft);
      display: flex;
      flex-direction: column;
      align-items: center;
      gap: .7rem;
      opacity: 0;
      animation: fade 1s ease 1.6s forwards;
    }

    .scroll-hint::after {
      content: "";
      width: 2px;
      height: 44px;
      background: linear-gradient(var(--lime), transparent);
      transform-origin: top;
      animation: pulse-line 2.2s ease-in-out infinite
    }

    @keyframes pulse-line {
      50% {
        transform: scaleY(.55)
      }
    }

    /* ============ MARQUEE ============ */
    .marquee {
      background: #1C3A28;
      color: #F4F7F0;
      padding-block: 1.05rem;
      position: relative
    }

    .marquee-inner {
      overflow: hidden
    }

    .marquee-track {
      display: flex;
      gap: 3rem;
      width: max-content;
      animation: scrollX 30s linear infinite
    }

    .marquee:hover .marquee-track,
    .marquee.paused .marquee-track {
      animation-play-state: paused
    }

    .marquee-track ul {
      display: flex;
      gap: 3rem;
      align-items: baseline;
      flex: none
    }

    .marquee-track li {
      font-family: var(--font-display);
      font-weight: 700;
      letter-spacing: .08em;
      text-transform: uppercase;
      font-size: 1.05rem;
      white-space: nowrap
    }

    .marquee-track li::after {
      content: "⬡";
      margin-left: 3rem;
      color: var(--lime);
      font-size: .9rem
    }

    @keyframes scrollX {
      to {
        transform: translateX(calc(-50% - 1.5rem))
      }
    }

    .marquee-toggle {
      position: absolute;
      right: max(4vw, 1rem);
      top: 50%;
      transform: translateY(-50%);
      z-index: 2;
      width: 44px;
      height: 44px;
      border-radius: 50%;
      display: grid;
      place-items: center;
      border: 1px solid rgba(244, 247, 240, .3);
      background: #1C3A28;
      color: #C9D6C4;
      font-size: .6rem;
      transition: color .3s, border-color .3s;
    }

    .marquee-toggle:hover {
      color: #9CCB55;
      border-color: #9CCB55
    }

    .marquee-track li::after {
      color: #9CCB55
    }

    /* ============ PRODUTOS ============ */
    .grid-prod {
      display: grid;
      grid-template-columns: repeat(auto-fill, minmax(280px, 1fr));
      gap: 1.4rem
    }

    .grid-prod>* {
      display: flex
    }

    .grid-prod .card {
      flex: 1
    }

    .grid-prod .card-info>p:not(.card-ativo) {
      margin-bottom: .75rem
    }

    .grid-prod .add {
      margin-top: auto
    }

    .card {
      background: var(--card);
      border: 1px solid var(--line);
      border-radius: 18px;
      padding: 1.1rem 1.1rem 1.4rem;
      position: relative;
      transition: transform .5s cubic-bezier(.19, 1, .22, 1), box-shadow .5s;
      transform-style: preserve-3d;
      display: flex;
      flex-direction: column;
    }

    .card:hover {
      box-shadow: var(--shadow)
    }

    .stage {
      height: 270px;
      border-radius: 12px;
      overflow: hidden;
      position: relative;
      background: var(--stage);
    }

    .stage img {
      width: 100%;
      height: 100%;
      object-fit: contain;
      object-position: center;
      mix-blend-mode: multiply;
      /* o fundo branco das fotos some no fundo do card */
      transition: transform .5s cubic-bezier(.19, 1, .22, 1);
    }

    .card:hover .stage img {
      transform: scale(1.05) rotate(-1deg)
    }

    .card.btx .stage,
    .card.blond .stage {
      background: linear-gradient(160deg, var(--stage), var(--stage-violet))
    }

    .card-info {
      margin-top: 1.1rem;
      display: flex;
      flex-direction: column;
      gap: .35rem;
      flex: 1;
      padding-inline: .2rem
    }

    .card-row {
      display: flex;
      justify-content: space-between;
      align-items: baseline;
      gap: 1rem
    }

    .card h3 {
      font-family: var(--font-display);
      font-weight: 700;
      font-size: 1.18rem;
      letter-spacing: .02em
    }

    .val {
      display: flex;
      flex-direction: column;
      align-items: flex-end;
      gap: .05rem;
      flex: none
    }

    .val b {
      font-family: var(--font-display);
      font-variant-numeric: tabular-nums;
      font-size: 1.02rem;
      color: var(--accent);
      white-space: nowrap
    }

    .val b small {
      display: block;
      text-align: right;
      font-size: .62em;
      font-weight: 400;
      letter-spacing: .1em;
      color: var(--ink-soft)
    }

    .prod-note {
      margin-top: 1rem;
      color: var(--ink-soft);
      font-size: .92rem
    }

    .size {
      font-variant-numeric: tabular-nums;
      color: var(--ink-soft);
      font-size: .82rem;
      white-space: nowrap
    }

    .card-ativo {
      font-family: var(--font-display);
      font-size: .66rem;
      letter-spacing: .18em;
      text-transform: uppercase;
      color: var(--accent)
    }

    .card.btx .card-ativo,
    .card.blond .card-ativo {
      color: var(--violet)
    }

    .card p {
      color: var(--ink-soft);
      font-size: .92rem;
      margin-top: .4rem
    }

    .step-tag {
      position: absolute;
      top: 1.6rem;
      left: 1.6rem;
      z-index: 2;
      background: var(--ink);
      color: var(--bg);
      border-radius: 99px;
      padding: .35rem .85rem;
      font-family: var(--font-display);
      font-size: .64rem;
      letter-spacing: .16em;
      text-transform: uppercase;
    }

    .add {
      margin-top: 1.1rem;
      align-self: flex-start;
      display: inline-flex;
      align-items: center;
      min-height: 44px;
      font-family: var(--font-display);
      font-size: .7rem;
      letter-spacing: .16em;
      text-transform: uppercase;
      border: 1px solid var(--ink);
      border-radius: 99px;
      padding: .6rem 1.3rem;
      opacity: 0;
      transform: translateY(6px);
      transition: opacity .4s, transform .4s, background .3s, color .3s, border-color .3s;
    }

    .card:hover .add,
    .card:focus-within .add {
      opacity: 1;
      transform: none
    }

    .add:hover {
      background: var(--ink);
      color: var(--bg)
    }

    .add.done {
      background: var(--accent);
      border-color: var(--accent);
      color: var(--bg);
      opacity: 1;
      transform: none
    }

    @media (hover:none) {
      .add {
        opacity: 1;
        transform: none
      }
    }

    /* ============ COLEÇÕES (loja oficial) ============ */
    .loja {
      background: var(--surface)
    }

    /* cor de cada linha = cor do rótulo; o palco da foto fica claro nos dois temas */
    [data-linha="volume"] {
      --l: light-dark(#735600, #E8C85A);
      --l-stage: #F8F0CF;
      --l-vivo: #F2D46B
    }

    [data-linha="balance"] {
      --l: light-dark(#35702A, #9CD17E);
      --l-stage: #E2F0DA;
      --l-vivo: #A8D98F
    }

    [data-linha="boucles"] {
      --l: light-dark(#136C62, #62CFC0);
      --l-stage: #DAF1ED;
      --l-vivo: #86D8CB
    }

    [data-linha="blonde"] {
      --l: light-dark(#7B2D8E, #CFA2E4);
      --l-stage: #EFE4F6;
      --l-vivo: #CDB0E8
    }

    [data-linha="renouveau"] {
      --l: light-dark(#7C4F22, #DDB184);
      --l-stage: #F2E9DD;
      --l-vivo: #E2C7A6
    }

    [data-linha="fibre"] {
      --l: light-dark(#1F5A89, #8CC0EC);
      --l-stage: #DCEBF7;
      --l-vivo: #A4CDF2
    }

    [data-linha="finition"] {
      --l: light-dark(#9B2A55, #F09ABD);
      --l-stage: #F8E2EB;
      --l-vivo: #F4AFC9
    }

    .filtros {
      display: flex;
      flex-direction: column;
      gap: .9rem;
      margin-bottom: 2rem
    }

    .filtro {
      display: flex;
      align-items: center;
      gap: 1rem;
      min-width: 0
    }

    .filtro-lbl {
      flex: none;
      width: 7.5rem;
      font-family: var(--font-display);
      font-size: .66rem;
      letter-spacing: .2em;
      text-transform: uppercase;
      color: var(--ink-soft)
    }

    .chips {
      display: flex;
      flex-wrap: wrap;
      gap: .5rem;
      min-width: 0
    }

    .chip {
      display: inline-flex;
      align-items: center;
      gap: .55rem;
      min-height: 44px;
      white-space: nowrap;
      border: 1px solid var(--line);
      border-radius: 99px;
      padding: .45rem 1rem;
      background: var(--card);
      font-family: var(--font-display);
      font-size: .72rem;
      letter-spacing: .1em;
      text-transform: uppercase;
      transition: background .3s, color .3s, border-color .3s;
    }

    .chip[data-linha]::before {
      content: "";
      width: .7rem;
      height: .7rem;
      border-radius: 50%;
      background: var(--l);
      flex: none
    }

    .chip:hover {
      border-color: var(--ink)
    }

    .chip[aria-pressed="true"] {
      background: var(--ink);
      border-color: var(--ink);
      color: var(--bg)
    }

    .chip .n {
      font-variant-numeric: tabular-nums;
      opacity: .6
    }

    .filtro-count {
      font-size: .85rem;
      color: var(--ink-soft)
    }

    .grid-prod>[hidden] {
      display: none
    }

    .sc .stage {
      display: block;
      width: 100%;
      height: auto;
      aspect-ratio: 1;
      padding: 0;
      background: var(--l-stage);
      cursor: zoom-in
    }

    .sc .stage img {
      object-fit: cover
    }

    /* palco quadrado como as fotos oficiais: nada cortado e sem borda do fundo cinza */
    .sc .card-ativo {
      color: var(--l)
    }

    .sc-tags {
      font-size: .8rem !important;
      margin-top: 0 !important
    }

    .sc-actions {
      margin-top: auto;
      padding-top: .9rem;
      display: flex;
      align-items: center;
      justify-content: space-between;
      gap: 1rem;
      flex-wrap: wrap
    }

    .sc .add {
      margin-top: 0;
      opacity: 1;
      transform: none
    }

    .sc-more {
      font-family: var(--font-display);
      font-size: .7rem;
      letter-spacing: .16em;
      text-transform: uppercase;
      border-bottom: 2px solid var(--l);
      min-height: 44px;
      display: inline-flex;
      align-items: center
    }

    .sc-more:hover {
      color: var(--l)
    }

    .step-tag.novo {
      background: var(--l);
      color: var(--bg)
    }

    .loja-mais {
      display: flex;
      justify-content: center;
      margin-top: 2.6rem
    }

    .loja-mais[hidden] {
      display: none
    }

    /* ============ BLOCOS DAS COLEÇÕES ============ */
    .tiles {
      display: grid;
      grid-template-columns: repeat(4, 1fr);
      grid-auto-rows: 320px;
      gap: 1rem
    }

    .tile {
      position: relative;
      display: grid;
      grid-template-rows: minmax(0, 1fr) auto;
      border-radius: 22px;
      overflow: hidden;
      background: var(--l-vivo);
      color: #14261B;
      isolation: isolate;
      transition: opacity .9s ease, transform .5s cubic-bezier(.19, 1, .22, 1), box-shadow .5s;
    }

    .tile:hover {
      transform: translateY(-4px);
      box-shadow: var(--shadow)
    }

    .tile img {
      width: 100%;
      height: 100%;
      object-fit: cover;
      display: block;
      min-height: 0;
      transition: transform .9s cubic-bezier(.19, 1, .22, 1)
    }

    .tile:hover img {
      transform: scale(1.06)
    }

    .tile-band {
      background: var(--l-vivo);
      padding: .9rem 1.1rem 1rem;
      display: flex;
      flex-direction: column;
      gap: .15rem;
      position: relative;
      z-index: 1
    }

    .tile-top {
      display: flex;
      justify-content: space-between;
      align-items: center;
      gap: .6rem
    }

    .tile b {
      font-family: var(--font-display);
      font-size: 1rem;
      letter-spacing: .06em;
      text-transform: uppercase;
      line-height: 1.2
    }

    .tile-sub {
      font-size: .86rem;
      line-height: 1.35
    }

    .tile-n {
      font-family: var(--font-display);
      font-size: .64rem;
      letter-spacing: .18em;
      text-transform: uppercase;
      margin-top: .4rem
    }

    .tile-n::after {
      content: " →";
      display: inline-block;
      transition: transform .3s
    }

    .tile:hover .tile-n::after {
      transform: translateX(4px)
    }

    .tile-new {
      flex: none;
      background: #14261B;
      color: #fff;
      border-radius: 99px;
      padding: .3rem .7rem;
      font-family: var(--font-display);
      font-size: .58rem;
      letter-spacing: .16em;
      text-transform: uppercase
    }

    .t-big {
      grid-column: span 2;
      grid-row: span 2
    }

    .t-big .tile-band {
      padding: 1.3rem 1.6rem 1.5rem
    }

    .t-big b {
      font-size: clamp(1.5rem, 2.8vw, 2.2rem);
      letter-spacing: .03em
    }

    .t-big .tile-sub {
      font-size: 1rem
    }

    .t-wide {
      grid-column: span 2;
      grid-template-rows: none;
      grid-template-columns: 1fr 1fr
    }

    .t-wide img {
      order: 2
    }

    .t-wide .tile-band {
      justify-content: flex-end;
      padding: 1.3rem 1.4rem
    }

    .t-wide b {
      font-size: 1.25rem
    }

    /* ============ NOVIDADE ============ */
    .novo {
      background: var(--l-vivo);
      color: #14261B;
      padding-block: clamp(4rem, 8vw, 6.5rem);
      overflow: clip
    }

    .novo-grid {
      display: grid;
      grid-template-columns: 1fr 1fr;
      gap: clamp(2rem, 5vw, 4.5rem);
      align-items: center
    }

    .novo-kicker {
      display: inline-block;
      background: #14261B;
      color: #fff;
      border-radius: 99px;
      padding: .4rem 1rem;
      font-family: var(--font-display);
      font-size: .66rem;
      letter-spacing: .2em;
      text-transform: uppercase
    }

    .novo h2 {
      font-family: var(--font-display);
      font-weight: 700;
      font-size: clamp(2.7rem, 6.4vw, 5rem);
      line-height: 1;
      margin-top: 1.1rem;
      letter-spacing: .01em
    }

    .novo-claim {
      font-family: var(--font-display);
      font-size: clamp(.78rem, 1.4vw, .95rem);
      letter-spacing: .2em;
      text-transform: uppercase;
      margin-top: 1rem
    }

    .novo-p {
      margin-top: 1rem;
      max-width: 44ch;
      font-size: 1.02rem
    }

    .novo-list {
      display: grid;
      grid-template-columns: 1fr 1fr;
      gap: .6rem;
      margin-block: 1.8rem 2rem
    }

    .novo-list button {
      display: flex;
      align-items: center;
      gap: .7rem;
      width: 100%;
      min-height: 44px;
      text-align: left;
      background: rgba(255, 255, 255, .6);
      border-radius: 14px;
      padding: .45rem .8rem .45rem .45rem;
      transition: background .3s
    }

    .novo-list button:hover {
      background: #fff
    }

    .novo-list img {
      width: 52px;
      height: 52px;
      border-radius: 10px;
      object-fit: cover;
      flex: none
    }

    .novo-list span {
      display: flex;
      flex-direction: column;
      min-width: 0;
      font-size: .82rem;
      line-height: 1.3
    }

    .novo-list b {
      font-family: var(--font-display);
      font-weight: 700
    }

    .btn-dark {
      background: #14261B;
      color: #fff
    }

    .btn-dark:hover {
      background: #000
    }

    .btn-dark:focus-visible {
      outline-color: #14261B
    }

    .novo-fotos {
      position: relative;
      aspect-ratio: 1;
      width: 100%;
      max-width: 540px;
      justify-self: end
    }

    .novo-fotos img {
      position: absolute;
      height: auto;
      border-radius: 24px;
      object-fit: cover;
      aspect-ratio: 1;
      box-shadow: 0 30px 60px -30px rgba(60, 40, 0, .55)
    }

    .nf1 {
      width: 76%;
      top: 0;
      left: 0
    }

    .nf2 {
      width: 52%;
      right: 0;
      bottom: 0;
      border: 7px solid var(--l-vivo)
    }

    /* ============ ESSENCIAIS + ESPAÇO PRO ============ */
    .duo-grid {
      display: grid;
      grid-template-columns: 1fr 1fr;
      gap: 1.2rem
    }

    .duo-card {
      display: grid;
      grid-template-columns: 1.1fr .9fr;
      min-height: 380px;
      border-radius: 24px;
      overflow: hidden;
      background: var(--l-vivo);
      color: #14261B;
      transition: opacity .9s ease, transform .5s cubic-bezier(.19, 1, .22, 1), box-shadow .5s;
    }

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

    .duo-pro {
      background: #1C3A28;
      color: #F4F7F0
    }

    .duo-txt {
      padding: clamp(1.5rem, 3vw, 2.4rem);
      display: flex;
      flex-direction: column;
      justify-content: center;
      gap: .85rem
    }

    .duo-kicker {
      font-family: var(--font-display);
      font-size: .66rem;
      letter-spacing: .22em;
      text-transform: uppercase
    }

    .duo-h {
      font-family: var(--font-display);
      font-weight: 700;
      font-size: clamp(1.45rem, 2.5vw, 2rem);
      line-height: 1.15
    }

    .duo-h em {
      font-style: normal;
      color: #8E1F4A
    }

    .duo-pro .duo-h em {
      color: #9CCB55
    }

    .duo-p {
      font-size: .94rem
    }

    .duo-cta {
      align-self: flex-start;
      margin-top: .4rem;
      padding-bottom: .3rem;
      border-bottom: 2px solid currentColor;
      font-family: var(--font-display);
      font-size: .7rem;
      letter-spacing: .16em;
      text-transform: uppercase
    }

    .duo-card img {
      width: 100%;
      height: 100%;
      object-fit: cover;
      display: block;
      min-height: 0
    }

    /* ============ MARCA ============ */
    .marca-grid {
      display: grid;
      grid-template-columns: 1.25fr .75fr;
      gap: clamp(2rem, 6vw, 5rem);
      align-items: center
    }

    .marca-foto img {
      width: 100%;
      height: auto;
      aspect-ratio: 4/5;
      object-fit: cover;
      border-radius: 24px;
      box-shadow: var(--shadow);
      display: block
    }

    #ativos {
      background: var(--surface)
    }

    /* ficha do produto */
    html:has(.sheet[open]) {
      overflow: hidden
    }

    .sheet {
      border: none;
      padding: 0;
      margin: auto;
      background: var(--card);
      color: var(--ink);
      width: min(1040px, 94vw);
      max-width: 94vw;
      max-height: 92svh;
      border-radius: 22px;
      box-shadow: 0 40px 90px -30px rgba(0, 0, 0, .55);
      overflow: auto;
      overscroll-behavior: contain;
    }

    .sheet[open] {
      animation: sheetIn .5s cubic-bezier(.19, 1, .22, 1)
    }

    @keyframes sheetIn {
      from {
        opacity: 0;
        transform: translateY(24px) scale(.98)
      }
    }

    .sheet::backdrop {
      background: rgba(8, 16, 10, .6);
      -webkit-backdrop-filter: blur(6px);
      backdrop-filter: blur(6px)
    }

    .sheet-in {
      display: grid;
      grid-template-columns: 1.05fr 1fr;
      position: relative
    }

    .sheet-x {
      position: absolute;
      top: .9rem;
      right: .9rem;
      z-index: 3;
      width: 44px;
      height: 44px;
      border-radius: 50%;
      display: grid;
      place-items: center;
      background: var(--card);
      border: 1px solid var(--line);
      font-size: 1.3rem;
      line-height: 1;
    }

    .sheet-x:hover {
      border-color: var(--ink)
    }

    .sheet-media {
      background: var(--l-stage);
      padding: clamp(1rem, 2.4vw, 1.6rem);
      display: flex;
      flex-direction: column;
      gap: .8rem
    }

    .sheet-main {
      aspect-ratio: 1;
      border-radius: 14px;
      overflow: hidden;
      background: #fff
    }

    .sheet-main img {
      width: 100%;
      height: 100%;
      object-fit: cover;
      display: block
    }

    .sheet-thumbs {
      display: flex;
      gap: .55rem;
      flex-wrap: wrap
    }

    .sheet-thumbs button {
      width: 64px;
      height: 64px;
      border-radius: 10px;
      overflow: hidden;
      border: 2px solid transparent;
      background: #fff;
      padding: 0;
      transition: border-color .25s
    }

    .sheet-thumbs button[aria-pressed="true"] {
      border-color: #1C3A28
    }

    .sheet-thumbs img {
      width: 100%;
      height: 100%;
      object-fit: cover;
      display: block
    }

    .sheet-body {
      padding: clamp(1.5rem, 3.4vw, 2.8rem);
      padding-top: clamp(2.6rem, 4vw, 3rem);
      display: flex;
      flex-direction: column;
      gap: .9rem;
      min-width: 0
    }

    .sheet-body .card-ativo {
      color: var(--l)
    }

    .sheet-body h2 {
      font-family: var(--font-display);
      font-weight: 700;
      font-size: clamp(1.5rem, 3vw, 2.1rem);
      line-height: 1.15;
      text-wrap: balance
    }

    .sheet-meta {
      display: flex;
      align-items: baseline;
      gap: 1rem;
      flex-wrap: wrap
    }

    .sheet-meta b {
      font-family: var(--font-display);
      font-size: 1.35rem;
      color: var(--accent);
      font-variant-numeric: tabular-nums
    }

    .sheet-tags {
      font-size: .85rem;
      color: var(--ink-soft);
      border-block: 1px solid var(--line);
      padding-block: .7rem
    }

    .sheet-desc {
      display: flex;
      flex-direction: column;
      gap: .75rem;
      color: var(--ink-soft);
      font-size: .95rem
    }

    .sheet-cta {
      display: flex;
      align-items: center;
      gap: 1.2rem;
      flex-wrap: wrap;
      margin-top: .6rem
    }

    .sheet-cta .btn.done {
      background: var(--accent)
    }

    /* sacola rápida */
    html:has(.cart[open]) {
      overflow: hidden
    }

    .cart {
      border: none;
      padding: 0;
      margin: auto;
      width: min(520px, 94vw);
      max-width: 94vw;
      max-height: min(720px, 90svh);
      border-radius: 22px;
      background: var(--card);
      color: var(--ink);
      box-shadow: 0 40px 90px -30px rgba(0, 0, 0, .55);
      overflow: hidden;
    }

    .cart::backdrop {
      background: rgba(8, 16, 10, .6);
      -webkit-backdrop-filter: blur(6px);
      backdrop-filter: blur(6px)
    }

    .cart-in {
      display: flex;
      flex-direction: column;
      max-height: min(720px, 90svh)
    }

    .cart-head,
    .cart-foot {
      padding: 1.3rem 1.5rem;
      border-bottom: 1px solid var(--line)
    }

    .cart-head {
      display: flex;
      align-items: center;
      justify-content: space-between;
      gap: 1rem
    }

    .cart-head h2 {
      font-family: var(--font-display);
      font-size: 1.35rem
    }

    .cart-close {
      width: 40px;
      height: 40px;
      border: 1px solid var(--line);
      border-radius: 50%;
      font-size: 1.15rem
    }

    .cart-close:hover {
      border-color: var(--ink)
    }

    .cart-items {
      display: flex;
      flex-direction: column;
      gap: .7rem;
      overflow: auto;
      padding: 1rem 1.5rem
    }

    .cart-item {
      display: grid;
      grid-template-columns: 1fr auto;
      gap: .8rem;
      align-items: center;
      padding: .8rem;
      background: var(--stage);
      border-radius: 12px
    }

    .cart-item strong {
      display: block;
      font-family: var(--font-display);
      font-size: .9rem
    }

    .cart-item small {
      color: var(--ink-soft)
    }

    .cart-remove {
      color: var(--accent);
      font-size: .74rem;
      letter-spacing: .08em;
      text-transform: uppercase
    }

    .cart-remove:hover {
      text-decoration: underline
    }

    .cart-empty {
      padding: 1.6rem .2rem;
      color: var(--ink-soft);
      text-align: center
    }

    .cart-foot {
      display: flex;
      align-items: center;
      justify-content: space-between;
      gap: 1rem;
      border-top: 1px solid var(--line);
      border-bottom: none;
      flex-wrap: wrap
    }

    .cart-foot p {
      color: var(--ink-soft);
      font-size: .86rem
    }

    .cart-foot .btn {
      padding: .9rem 1.15rem
    }

    @media (max-width:560px) {
      .cart {
        width: 100vw;
        max-width: 100vw;
        max-height: 100dvh;
        border-radius: 0
      }

      .cart-in {
        max-height: 100dvh
      }

      .cart-foot {
        align-items: stretch;
        flex-direction: column
      }

      .cart-foot .btn {
        justify-content: center
      }
    }

    @media (max-width:760px) {
      .sheet {
        width: 100vw;
        max-width: 100vw;
        height: 100dvh;
        max-height: 100dvh;
        border-radius: 0;
        margin: 0
      }

      .sheet-in {
        grid-template-columns: 1fr
      }

      .sheet-main {
        max-width: 420px;
        width: 100%;
        margin-inline: auto
      }

      .filtro {
        flex-direction: column;
        align-items: stretch;
        gap: .5rem
      }

      .filtro-lbl {
        width: auto
      }

      .chips {
        flex-wrap: nowrap;
        overflow-x: auto;
        scrollbar-width: none;
        margin-inline: -4vw;
        padding-inline: 4vw;
        scroll-padding-inline: 4vw
      }

      .chips::-webkit-scrollbar {
        display: none
      }
    }

    /* ============ FUNDADORA ============ */
    .founder {
      margin-top: 3rem;
      padding-left: 1.6rem;
      border-left: 2px solid var(--lime);
      max-width: 44ch
    }

    .founder blockquote {
      font-family: Georgia, serif;
      font-style: italic;
      font-size: clamp(1.15rem, 2.2vw, 1.45rem);
      line-height: 1.45;
      color: var(--accent)
    }

    .founder figcaption {
      margin-top: 1rem;
      display: flex;
      flex-direction: column;
      gap: .15rem
    }

    .founder figcaption b {
      font-family: var(--font-display);
      letter-spacing: .14em;
      text-transform: uppercase;
      font-size: .86rem
    }

    .founder figcaption span {
      font-size: .85rem;
      color: var(--ink-soft)
    }

    /* ============ SISTEMA ============ */
    .ritual {
      background: var(--surface);
      position: relative
    }

    .ritual .hexes {
      -webkit-mask-image: radial-gradient(60% 90% at 15% 80%, #000 20%, transparent 70%);
      mask-image: radial-gradient(60% 90% at 15% 80%, #000 20%, transparent 70%)
    }

    .steps {
      display: grid;
      grid-template-columns: repeat(3, 1fr);
      gap: 2.5rem;
      position: relative
    }

    .step {
      border-top: 2px solid var(--line);
      padding-top: 1.6rem;
      position: relative
    }

    .step-num {
      font-family: var(--font-display);
      font-weight: 700;
      font-size: clamp(2.6rem, 5vw, 4rem);
      line-height: 1;
      color: var(--accent)
    }

    .step h3 {
      font-family: var(--font-display);
      font-weight: 700;
      font-size: 1.3rem;
      margin-top: .9rem;
      letter-spacing: .03em;
      text-transform: uppercase
    }

    .step .time {
      font-family: var(--font-display);
      font-size: .66rem;
      letter-spacing: .2em;
      text-transform: uppercase;
      color: var(--ink-soft);
      margin-top: .3rem;
      display: block
    }

    .step p {
      color: var(--ink-soft);
      margin-top: .8rem;
      font-size: .95rem
    }

    /* ============ ATIVOS ============ */
    .ativos-list {
      border-top: 1px solid var(--line)
    }

    .ativo {
      display: grid;
      grid-template-columns: 64px 1.1fr .6fr 1.3fr;
      gap: 1.6rem;
      align-items: center;
      padding-block: 1.7rem;
      border-bottom: 1px solid var(--line);
      transition: background .35s, transform .35s;
    }

    .ativo:hover {
      background: color-mix(in srgb, var(--surface) 55%, transparent);
      transform: translateX(1rem)
    }

    .swatch {
      width: 56px;
      height: 56px;
      border-radius: 50%;
      background: var(--sw, var(--lime));
      transform: scale(.7);
      opacity: .55;
      transition: transform .45s cubic-bezier(.19, 1, .22, 1), opacity .4s;
      box-shadow: inset -6px -8px 14px rgba(0, 0, 0, .22), inset 5px 6px 12px rgba(255, 255, 255, .35)
    }

    .ativo:hover .swatch {
      transform: scale(1);
      opacity: 1
    }

    .ativo h3 {
      font-family: var(--font-display);
      font-weight: 700;
      font-size: clamp(1.2rem, 2.6vw, 1.7rem);
      letter-spacing: .03em;
      text-transform: uppercase
    }

    .origem {
      font-family: var(--font-display);
      font-size: .68rem;
      letter-spacing: .2em;
      text-transform: uppercase;
      color: var(--ink-soft)
    }

    .ativo p {
      color: var(--ink-soft);
      font-size: .95rem
    }

    /* ============ PRO ============ */
    .pro {
      background: var(--ink);
      color: var(--bg);
      position: relative;
      overflow: clip
    }

    .pro .eyebrow {
      color: color-mix(in srgb, var(--bg) 70%, transparent)
    }

    .pro .eyebrow::before {
      background: var(--lime)
    }

    .pro-grid {
      display: grid;
      grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
      gap: 1.4rem;
      margin-top: 2.6rem
    }

    .pro-item {
      border: 1px solid color-mix(in srgb, var(--bg) 22%, transparent);
      border-radius: 16px;
      padding: 1.5rem
    }

    .pro-item b {
      font-family: var(--font-display);
      font-size: 1rem;
      letter-spacing: .08em;
      text-transform: uppercase;
      display: block;
      margin-bottom: .4rem
    }

    .pro-item span {
      font-size: .9rem;
      color: color-mix(in srgb, var(--bg) 75%, transparent)
    }

    .pro-note {
      margin-top: 2.6rem;
      font-family: var(--font-display);
      font-size: clamp(1.15rem, 2.6vw, 1.7rem);
      font-weight: 700;
      letter-spacing: .04em;
      text-transform: uppercase;
    }

    .pro-note i {
      font-style: normal;
      color: var(--lime)
    }

    /* ============ MANIFESTO ============ */
    .manifesto-text {
      font-family: var(--font-display);
      font-weight: 700;
      font-size: clamp(1.5rem, 3.6vw, 2.7rem);
      line-height: 1.4;
      max-width: 28ch;
      text-wrap: balance;
      margin-top: 2rem;
      letter-spacing: .01em;
    }

    .manifesto-text .w {
      opacity: .16;
      transition: opacity .5s ease
    }

    .manifesto-text .w.lit {
      opacity: 1
    }

    /* ============ FOOTER ============ */
    .footer {
      padding-top: clamp(4rem, 8vw, 7rem);
      overflow: clip;
      background: var(--surface)
    }

    .news {
      display: grid;
      grid-template-columns: 1fr 1fr;
      gap: 3rem;
      align-items: end;
      padding-bottom: clamp(3rem, 6vw, 5rem);
      border-bottom: 1px solid var(--line)
    }

    .news h2 {
      font-family: var(--font-display);
      font-weight: 700;
      font-size: clamp(1.7rem, 3.4vw, 2.6rem);
      line-height: 1.15;
      text-wrap: balance
    }

    .news p {
      color: var(--ink-soft);
      margin-top: .8rem;
      max-width: 42ch
    }

    .news-form {
      display: flex;
      gap: .7rem;
      flex-wrap: wrap
    }

    .news-form input {
      flex: 1;
      min-width: 220px;
      background: transparent;
      border: none;
      border-bottom: 1px solid var(--ink-soft);
      padding: .9rem .2rem;
      font: inherit;
      color: var(--ink);
    }

    .news-form input::placeholder {
      color: var(--ink-soft);
      opacity: .7
    }

    .news-form input:focus {
      border-bottom-color: var(--accent)
    }

    .news-form input:focus:not(:focus-visible) {
      outline: none
    }

    .news-form .btn {
      padding: .95rem 1.8rem
    }

    .foot-cols {
      display: grid;
      grid-template-columns: 1.4fr repeat(3, 1fr);
      gap: 2.5rem;
      padding-block: 3rem
    }

    .foot-brand p {
      color: var(--ink-soft);
      font-size: .92rem;
      max-width: 30ch;
      margin-top: .8rem
    }

    .foot-cols h3 {
      font-family: var(--font-display);
      font-size: .7rem;
      letter-spacing: .2em;
      text-transform: uppercase;
      color: var(--accent);
      margin-bottom: 1.1rem
    }

    .foot-cols li {
      margin-bottom: .6rem
    }

    .foot-cols a {
      font-size: .92rem;
      color: var(--ink-soft);
      transition: color .3s
    }

    .foot-cols a:hover {
      color: var(--accent)
    }

    .giant {
      font-family: var(--font-display);
      font-weight: 700;
      text-align: center;
      line-height: .85;
      font-size: clamp(2rem, 10.5vw, 9.5rem);
      letter-spacing: .08em;
      user-select: none;
      text-transform: uppercase;
      color: transparent;
      -webkit-text-stroke: 1px var(--ink-soft);
      transform: translateY(.14em);
      opacity: .5;
    }

    @supports not (-webkit-text-stroke:1px black) {
      .giant {
        color: var(--bg)
      }
    }

    .legal {
      display: flex;
      justify-content: space-between;
      gap: 1rem;
      flex-wrap: wrap;
      padding-block: 1.4rem;
      border-top: 1px solid var(--line);
      font-size: .78rem;
      color: var(--ink-soft)
    }

    /* ============ WHATSAPP ============ */
    .wa {
      position: fixed;
      right: 1.4rem;
      bottom: 1.4rem;
      z-index: 60;
      width: 58px;
      height: 58px;
      border-radius: 50%;
      display: grid;
      place-items: center;
      background: #25D366;
      color: #fff;
      box-shadow: 0 12px 30px -8px rgba(18, 140, 70, .55);
      transition: transform .3s cubic-bezier(.19, 1, .22, 1), box-shadow .3s;
    }

    .wa:hover {
      transform: translateY(-4px) scale(1.06);
      box-shadow: 0 18px 38px -8px rgba(18, 140, 70, .6)
    }

    .wa:focus-visible {
      outline: 2px solid #25D366;
      outline-offset: 4px;
      border-radius: 50%
    }

    .wa svg {
      width: 30px;
      height: 30px
    }

    /* ============ TOAST ============ */
    .toast {
      position: fixed;
      left: 50%;
      bottom: 2rem;
      transform: translate(-50%, calc(100% + 2.5rem));
      z-index: 95;
      background: var(--ink);
      color: var(--bg);
      border-radius: 99px;
      padding: .95rem 1.8rem;
      font-size: .88rem;
      box-shadow: var(--shadow);
      transition: transform .55s cubic-bezier(.19, 1, .22, 1);
      max-width: 88vw;
      text-align: center;
    }

    .toast {
      visibility: hidden
    }

    .toast.show {
      transform: translate(-50%, 0);
      visibility: visible
    }

    /* ============ RESPONSIVO ============ */
    @media (max-width:980px) {
      .tiles {
        grid-template-columns: repeat(2, 1fr);
        grid-auto-rows: 280px
      }

      .duo-grid {
        grid-template-columns: 1fr
      }

      .marca-grid {
        grid-template-columns: 1fr
      }

      .marca-foto {
        max-width: 420px
      }

      .hero {
        padding-bottom: 3rem
      }

      .scroll-hint {
        display: none
      }

      .hero-grid {
        grid-template-columns: 1fr;
        gap: 2.2rem
      }

      .hero-visual {
        order: 2;
        max-width: 480px;
        width: 100%
      }

      .hero-mosaic {
        margin-inline: 0;
        gap: .75rem
      }

      .chip-float.c1 {
        left: -2%
      }

      .chip-float.c2 {
        right: 0
      }

      .steps {
        grid-template-columns: 1fr;
        gap: 2rem
      }

      .ativo {
        grid-template-columns: 48px 1fr;
        grid-template-rows: auto auto;
        row-gap: .5rem
      }

      .swatch {
        width: 44px;
        height: 44px
      }

      .ativo .origem {
        grid-column: 2
      }

      .ativo p {
        grid-column: 1/-1
      }

      .news {
        grid-template-columns: 1fr;
        gap: 2rem;
        align-items: start
      }

      .foot-cols {
        grid-template-columns: 1fr 1fr;
        gap: 2rem
      }
    }

    @media (max-width:820px) {

      .nav,
      .site-head .bag-label {
        display: none
      }

      .burger {
        display: flex
      }

      .logo .name {
        display: none
      }
    }

    @media (max-width:860px) {
      .novo-grid {
        grid-template-columns: 1fr
      }

      .novo-fotos {
        justify-self: center;
        max-width: 420px
      }
    }

    @media (max-width:600px) {

      /* celular: produtos em duas colunas, cards enxutos (a descrição completa fica na ficha) */
      .grid-prod {
        grid-template-columns: repeat(2, minmax(0, 1fr));
        gap: .7rem
      }

      .card {
        padding: .5rem .5rem .85rem;
        border-radius: 14px;
        min-width: 0
      }

      .card h3,
      .card-ativo {
        overflow-wrap: anywhere
      }

      .stage {
        height: 190px;
        border-radius: 10px
      }

      .sc .stage {
        height: auto
      }

      .card-info {
        margin-top: .75rem;
        gap: .25rem;
        padding-inline: .15rem
      }

      .card-row {
        flex-direction: column;
        align-items: flex-start;
        gap: .15rem
      }

      .val {
        flex-direction: row;
        align-items: baseline;
        flex-wrap: wrap;
        gap: .1rem .5rem
      }

      .val b small {
        text-align: left
      }

      .card h3 {
        font-size: .95rem;
        line-height: 1.25
      }

      .card-ativo {
        font-size: .56rem;
        letter-spacing: .12em
      }

      .card p {
        font-size: .8rem;
        margin-top: .15rem
      }

      .sc .card-info>p:not(.card-ativo) {
        display: none
      }

      #produtos .card-info>p:not(.card-ativo) {
        display: -webkit-box;
        -webkit-line-clamp: 3;
        -webkit-box-orient: vertical;
        overflow: hidden
      }

      #produtos .card-ativo {
        display: -webkit-box;
        -webkit-line-clamp: 2;
        -webkit-box-orient: vertical;
        overflow: hidden
      }

      .step-tag {
        top: .9rem;
        left: .9rem;
        padding: .25rem .55rem;
        font-size: .52rem;
        letter-spacing: .12em
      }

      .add {
        width: 100%;
        justify-content: center;
        padding: .5rem .6rem;
        font-size: .62rem;
        letter-spacing: .12em
      }

      .sc-actions {
        flex-direction: column;
        align-items: stretch;
        gap: .1rem;
        padding-top: .7rem
      }

      .sc-more {
        justify-content: center;
        border-bottom: none;
        font-size: .62rem;
        letter-spacing: .12em
      }

      .tiles {
        grid-auto-rows: 230px;
        gap: .7rem
      }

      .tile-band {
        padding: .65rem .8rem .75rem
      }

      .tile b {
        font-size: .78rem;
        letter-spacing: .04em
      }

      .tile-sub {
        font-size: .74rem
      }

      .tile-n {
        font-size: .56rem;
        letter-spacing: .12em
      }

      .t-big .tile-band {
        padding: 1rem 1.1rem
      }

      .t-wide b {
        font-size: .95rem
      }

      .novo-list {
        grid-template-columns: 1fr
      }

      .duo-card {
        grid-template-columns: 1fr;
        min-height: 0
      }

      .duo-card img {
        order: -1;
        aspect-ratio: 16/10;
        height: auto
      }
    }

    @media (max-width:520px) {
      .hero {
        padding-top: 6rem
      }

      .foot-cols {
        grid-template-columns: 1fr
      }

      .giant {
        letter-spacing: .03em
      }
    }

    /* ============ MOVIMENTO REDUZIDO ============ */
    @media (prefers-reduced-motion:reduce) {

      *,
      *::before,
      *::after {
        animation-duration: .01ms !important;
        animation-iteration-count: 1 !important;
        transition-duration: .01ms !important
      }

      html {
        scroll-behavior: auto
      }

      [data-reveal] {
        opacity: 1 !important;
        transform: none !important
      }

      .marquee-track {
        animation: none
      }

      .hero .eyebrow,
      .hero-sub,
      .hero-cta,
      .hero-meta,
      .hero-visual,
      .scroll-hint {
        opacity: 1;
        animation: none
      }

      .hl>span {
        transform: none;
        animation: none
      }

      .manifesto-text .w {
        opacity: 1
      }
    }

@media (scripting: none) {
[data-reveal] {
        opacity: 1;
        transform: none
      }

      .manifesto-text .w {
        opacity: 1
      }
}