/* =========================================================
   Nathalia Marques — zero JavaScript
   Scroll-driven animations (CSS). Sem suporte, tudo estatico.
   ========================================================= */

/* --- fontes auto-hospedadas --- */

@font-face {
  font-family: 'Fraunces';
  font-style: normal;
  font-weight: 300 700;
  font-display: swap;
  src: url(fonts/fraunces-normal-latin.woff2) format('woff2');
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
@font-face {
  font-family: 'Fraunces';
  font-style: normal;
  font-weight: 300 700;
  font-display: swap;
  src: url(fonts/fraunces-normal-latin-ext.woff2) format('woff2');
  unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}
@font-face {
  font-family: 'Fraunces';
  font-style: italic;
  font-weight: 300 600;
  font-display: swap;
  src: url(fonts/fraunces-italic-latin.woff2) format('woff2');
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
@font-face {
  font-family: 'Fraunces';
  font-style: italic;
  font-weight: 300 600;
  font-display: swap;
  src: url(fonts/fraunces-italic-latin-ext.woff2) format('woff2');
  unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}

@font-face {
  font-family: 'Fraunces Fallback';
  src: local('Georgia');
  size-adjust: 105%;
  ascent-override: 95%;
  descent-override: 22%;
  line-gap-override: 0%;
}

@font-face {
  font-family: 'Inter';
  font-style: normal;
  font-weight: 100 900;
  font-display: swap;
  src: url(fonts/inter-latin.woff2) format('woff2');
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
@font-face {
  font-family: 'Inter';
  font-style: normal;
  font-weight: 100 900;
  font-display: swap;
  src: url(fonts/inter-latin-ext.woff2) format('woff2');
  unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}

@font-face {
  font-family: 'Inter Fallback';
  src: local('Arial');
  size-adjust: 107%;
  ascent-override: 90%;
  descent-override: 22%;
  line-gap-override: 0%;
}

/* --- ordem das camadas --- */
@layer reset, base, layout, components, sections, motion;

@property --nav-i {
  syntax: "<integer>";
  inherits: true;
  initial-value: 0;
}

/* ======================== RESET ======================== */
@layer reset {
  *, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; }
  img, svg { display: block; max-width: 100%; }
  a { color: inherit; text-decoration: none; }
  ol, ul { list-style: none; }
  em { font-style: italic; }
}

/* ======================== BASE ========================= */
@layer base {
  :root {
    --ink: #1e0b2e;
    --plum: #3a1350;
    --violet: #7a3fbf;
    --lilac: #e3d7f4;
    --wisteria: #c9b2f2;
    --mist: #f6f2fb;
    --cream: #fcfbfe;

    --ease: cubic-bezier(.23, 1, .32, 1);
    --display: Fraunces, 'Fraunces Fallback', Georgia, serif;
    --sans: Inter, 'Inter Fallback', system-ui, sans-serif;

    /* tokens repetidos */
    --tracking-display: -.045em;
    --border-subtle: color-mix(in oklab, var(--ink) 10%, transparent);
    --border-lilac: color-mix(in oklab, var(--lilac) 15%, transparent);
    --text-muted: color-mix(in oklab, var(--ink) 70%, transparent);
    --section-pad: 6rem;
  }

  @media (min-width: 1024px) {
    :root { --section-pad: 9rem; }
  }

  html {
    scroll-behavior: smooth;
    scroll-snap-type: y proximity;
    -webkit-text-size-adjust: 100%;
  }

  body {
    font-family: var(--sans);
    color: var(--ink);
    background: var(--cream);
    line-height: 1.5;
    -webkit-font-smoothing: antialiased;
  }

  h1, h2, h3, blockquote, dd, .logo-name, .footer-name, .next {
    font-family: var(--display);
    font-weight: 300;
  }

  svg:not(.quote) { fill: none; stroke: currentColor; stroke-linecap: round; stroke-linejoin: round; }
  section { scroll-snap-align: start; }
}

/* ======================= LAYOUT ======================== */
@layer layout {
  .wrap { width: 100%; max-width: 84rem; margin-inline: auto; padding-inline: 1.5rem; }
  .nav-safe { padding-right: 8rem; }
  .cover { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; }

  @media (min-width: 640px)  { .nav-safe { padding-right: 9rem; } }
  @media (min-width: 1024px) { .wrap { padding-inline: 3rem; } .nav-safe { padding-right: 11rem; } }
  @media (max-width: 767px) { .nav-safe { padding-right: 1.5rem; } }

  .skip-link {
    position: absolute; left: -9999px; top: 1rem; z-index: 100;
    padding: .5rem 1rem;
    background: var(--ink); color: var(--cream);
    font-size: .875rem;
    &:focus { left: 1rem; }
  }
}

/* ===================== COMPONENTS ====================== */
@layer components {

  /* --- header (logo) --- */
  .site-header {
    position: fixed; inset: 0 0 auto; z-index: 50;
    display: flex; justify-content: center;
    padding: 1.5rem 1.25rem 0;
    pointer-events: none;
  }
  .logo { pointer-events: auto; display: flex; flex-direction: column; align-items: center; gap: .25rem; }
  .logo-name {
    font-size: 1.35rem; font-style: italic; font-weight: 400; line-height: 1;
    transition: transform .3s var(--ease);
  }
  .logo-line {
    height: 1px; width: 100%; background: currentColor; opacity: .4;
    transform: scaleX(.5); transition: transform .5s var(--ease);
  }
  .logo-role { font-size: .6rem; text-transform: uppercase; letter-spacing: .42em; opacity: .7; transition: opacity .15s; }
  .logo:hover {
    & .logo-name { transform: translateY(-1px); }
    & .logo-line { transform: scaleX(1); }
    & .logo-role { opacity: 1; }
  }
  @media (min-width: 640px) { .logo-name { font-size: 1.5rem; } }

  /* --- navegacao lateral --- */
  .side-nav {
    position: fixed; right: 1rem; top: 50%; z-index: 50;
    transform: translateY(-50%);
    pointer-events: none;
  }
  .side-nav-list { pointer-events: auto; display: flex; flex-direction: column; align-items: flex-end; gap: 1.25rem; }
  .side-nav a {
    display: flex; align-items: center; gap: .5rem;
    font-size: .6rem; line-height: 1; text-transform: uppercase; letter-spacing: .24em;
    opacity: .55;
    transition: opacity .15s var(--ease);
  }
  .side-nav a span {
    height: 1px; width: 0; background: currentColor; opacity: 0;
    transition: width .5s var(--ease), opacity .5s var(--ease);
  }
  .side-nav a:hover,
  .side-nav a:focus-visible { opacity: 1 !important; }
  .side-nav a:hover span { width: .75rem; opacity: .5; }
  @media (min-width: 640px) {
    .side-nav { right: 1.5rem; }
    .side-nav-list { gap: 1.5rem; }
    .side-nav a { font-size: .65rem; }
  }

  /* cor automatica logo/nav */
  .contrast { color: #fff; mix-blend-mode: difference; }

  /* --- botoes --- */
  .btn {
    display: inline-flex; align-items: center; justify-content: center; gap: .5rem;
    padding: .875rem 1.75rem;
    font-size: .875rem; font-weight: 500; white-space: nowrap;
    color: var(--cream);
    transition: background-color .15s;
  }
  .btn svg { width: 1rem; height: 1rem; transition: transform .15s; }
  .btn:hover svg { transform: translateX(.25rem); }
  .btn-solid { background: color-mix(in oklab, var(--cream) 15%, transparent); }
  .btn-solid:hover { background: color-mix(in oklab, var(--cream) 35%, transparent); }
  .btn-ghost:hover { background: color-mix(in oklab, var(--cream) 15%, transparent); }

  /* foco visivel */
  .btn:focus-visible, a:focus-visible { outline: 2px solid var(--violet); outline-offset: 4px; }

  /* --- navegacao inferior mobile --- */
  @media (max-width: 767px) {
    .side-nav {
      top: auto; right: 0; bottom: 0; left: 0;
      transform: none;
      pointer-events: auto;
      background-color: var(--mist);
      padding-bottom: env(safe-area-inset-bottom, 0px);
    }
    .side-nav-list {
      position: relative;
      display: grid; grid-template-columns: repeat(5, 1fr);
      align-items: stretch; gap: 0;
    }
    .side-nav a {
      flex-direction: column; align-items: center; justify-content: center;
      gap: .25rem; min-height: 2.75rem;
      padding: .5rem .125rem;
      font-size: .56rem; letter-spacing: .1em;
      position: relative;
    }
    .side-nav a span {
      position: absolute; bottom: .45rem; left: .5rem; right: .5rem;
      width: auto; height: 2px;
      transform: scaleX(0); transform-origin: center;
      transition: none;
    }
    .side-nav a:hover span { width: auto; transform: scaleX(1); opacity: .5; }
  }
}

/* ====================== SECTIONS ======================= */
@layer sections {

  /* --- HERO --- */
  .hero {
    position: relative; overflow: hidden;
    min-height: 100vh; min-height: 100svh;
    display: flex; flex-direction: column; justify-content: center;
    background: var(--ink); color: #fff;
  }
  .hero::after {
    content: '';
    position: absolute; inset: 0;
    opacity: .04; pointer-events: none;
    background: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='300' height='300'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.65' numOctaves='4' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E");
  }
  .hero-shade {
    position: absolute; inset: 0; pointer-events: none;
    background: linear-gradient(90deg,
      color-mix(in oklch, var(--ink) 87%, transparent) 0%,
      color-mix(in oklch, var(--ink) 68%, transparent) 51%,
      color-mix(in oklch, var(--ink) 41%, transparent) 100%);
  }
  .hero-inner {
    position: relative; z-index: 1; flex: 1;
    display: flex; flex-direction: column; justify-content: center;
    padding-block: var(--section-pad);
  }
  .hero h1 {
    max-width: 75rem;
    font-size: clamp(1.45rem, 4.2vw, 3.8rem);
    line-height: 1.08; letter-spacing: var(--tracking-display);
  }
  .hero .line { display: block; }
  .hero .line-2 { margin-top: .12em; color: rgb(255 255 255 / .9); }

  /* resposta da Nathália — mesma escala do h1, tom abafado */
  .hero-reply {
    margin-top: .7em;
    max-width: 75rem;
    font: 300 clamp(1.45rem, 4.2vw, 3.8rem) / 1.08 var(--display);
    letter-spacing: var(--tracking-display);
    color: color-mix(in oklab, var(--cream) 55%, transparent);
  }

  @media (max-width: 767px) {
    .hero-shade {
      background: linear-gradient(180deg,
        color-mix(in oklch, var(--ink) 72%, transparent),
        color-mix(in oklch, var(--ink) 81%, transparent));
    }
    .hero-inner { padding-bottom: calc(var(--section-pad) + 3rem); }
    .hero-ctas { flex-direction: column; align-items: stretch; }
  }
  @media (min-width: 1024px) { .hero-inner { padding-block: 8rem; } }

  /* palavras que trocam — CSS puro */
  .swap {
    --n: 11;
    --step: 4.62s;
    display: inline-grid;
    justify-items: center;
    margin-inline: .08em;
    padding: 0 .08em .06em;
    border-bottom: 2px solid color-mix(in oklab, var(--wisteria) 80%, transparent);
    vertical-align: baseline;
  }
  .word {
    grid-area: 1 / 1;
    display: flex; justify-content: center;
    white-space: nowrap;
    font-style: italic; color: var(--wisteria);
    opacity: 0; max-width: 0;
  }
  .word:first-child { opacity: 1; max-width: none; }

  .hero-ctas { margin-top: 1.75rem; display: flex; flex-wrap: wrap; align-items: center; gap: 1rem; }
  @media (min-width: 1024px) { .hero-ctas { margin-top: 2.25rem; } }

  /* --- SERVICOS --- */
  .services { position: relative; background: var(--plum); color: var(--cream); padding-block: var(--section-pad); }
  .services-grid { display: grid; grid-template-columns: 1fr; gap: 3.5rem; }
  .services h2 {
    font-size: clamp(2.2rem, 3.6vw, 3.4rem);
    line-height: 1.05; letter-spacing: var(--tracking-display);
  }
  .services h2 em { color: var(--lilac); }
  .services-intro p {
    margin-top: 1.5rem; max-width: 24rem;
    font-size: .98rem; line-height: 1.625;
    color: color-mix(in oklab, var(--lilac) 70%, transparent);
  }
  .services-list { position: relative; }
  .services-list li {
    display: grid; grid-template-columns: 1fr; gap: 1.5rem;
    padding-block: 2.5rem;
    border-bottom: 1px solid var(--border-lilac);
  }
  .services-list li:first-child { border-top: 1px solid var(--border-lilac); }
  .services h3 { font-size: clamp(1.6rem, 2.4vw, 2.2rem); line-height: 1.25; letter-spacing: -.025em; }
  .services .tags { margin-top: 1.25rem; font-size: .86rem; line-height: 1.625; color: color-mix(in oklab, var(--lilac) 80%, transparent); }
  .services .desc { display: flex; flex-direction: column; justify-content: center; }
  .services .desc .lead { font-size: 1rem; line-height: 1.625; color: color-mix(in oklab, var(--cream) 90%, transparent); }
  .services .desc p:not(.lead) { margin-top: .75rem; font-size: .92rem; line-height: 1.625; color: color-mix(in oklab, var(--lilac) 65%, transparent); }

  @media (min-width: 768px) {
    .services-list li { grid-template-columns: 1fr 1fr; gap: 2.5rem; }
  }
  @media (min-width: 1024px) {
    .services-grid { grid-template-columns: .75fr 1.25fr; gap: 6rem; }
    .services-intro { position: sticky; top: 8rem; align-self: start; }
    .services-list li { padding: 3.5rem 0 3.5rem 3rem; }
    .services-list::before {
      content: ""; position: absolute; left: 0; top: 0;
      width: 1px; height: 100%; background: var(--violet);
      transform-origin: top;
    }
  }

  .svc-track { position: relative; }
  .svc-snap { display: none; }

  /* --- SOBRE --- */
  .about {
    position: relative; overflow: hidden;
    min-height: 100vh; min-height: 100svh;
    display: flex; align-items: center;
    background: var(--cream); padding-block: var(--section-pad);
  }
  .about-grid { display: grid; grid-template-columns: 1fr; align-items: center; gap: 3.5rem; }
  .about-media { position: relative; }
  .portrait {
    position: relative; overflow: hidden;
    aspect-ratio: 4 / 5; border-radius: 2rem; background: var(--lilac);
  }
  .portrait-photo { width: 100%; height: 112%; object-fit: cover; filter: grayscale(.65); transition: filter .6s; }
  .portrait-tint { position: absolute; inset: 0; background: #d5d0d7; mix-blend-mode: color; opacity: .45; transition: opacity .6s; }
  .portrait:hover {
    & .portrait-photo { filter: none; }
    & .portrait-tint { opacity: 0; }
  }
  .detail {
    display: none;
    position: absolute; bottom: -2.5rem; right: -1rem;
    width: 14rem; height: 10rem; overflow: hidden;
    border: 4px solid var(--cream); border-radius: 1rem; background: var(--lilac);
  }
  .detail img { width: 100%; height: 100%; object-fit: cover; }

  .about h2 { font-size: clamp(2.2rem, 4vw, 3.6rem); line-height: 1.02; letter-spacing: var(--tracking-display); color: var(--plum); }
  .about p { margin-top: 1.5rem; max-width: 36rem; font-size: 1.05rem; line-height: 1.625; color: var(--text-muted); }
  .facts { margin-top: 3rem; max-width: 36rem; border-top: 1px solid var(--border-subtle); }
  .facts div {
    display: flex; align-items: baseline; justify-content: space-between; gap: 1.5rem;
    padding-block: 1rem;
    border-bottom: 1px solid var(--border-subtle);
  }
  .facts dt { font-size: .74rem; text-transform: uppercase; letter-spacing: .18em; color: color-mix(in oklab, var(--ink) 45%, transparent); }
  .facts dd { font-size: 1.125rem; font-weight: 400; text-align: right; color: var(--plum); }

  @media (min-width: 1024px) {
    .about-grid { grid-template-columns: .95fr 1.05fr; gap: 6rem; }
    .detail { display: block; }
  }
  @media (max-width: 767px) {
    .about { padding-bottom: calc(var(--section-pad) + 3rem); }
    .facts div { flex-direction: column; gap: .25rem; }
    .facts dd { text-align: left; }
  }

  /* --- DEPOIMENTOS --- */
  .testimonials { background: var(--ink); color: var(--cream); }
  .track { position: relative; }
  .snap { display: none; }
  .track-sticky { padding-block: var(--section-pad); }
  .testi-head { display: flex; flex-wrap: wrap; align-items: flex-end; justify-content: space-between; gap: 1rem; }
  .testi-head h2 { font-size: clamp(2rem, 8vw, 2.8rem); line-height: 1; letter-spacing: var(--tracking-display); }
  .testi-head h2 em { color: var(--violet); }
  .testi-head p { max-width: 20rem; padding-bottom: .5rem; font-size: .9rem; line-height: 1.625; color: color-mix(in oklab, var(--lilac) 55%, transparent); }
  .testi-pages { margin-top: 3rem; display: grid; gap: 5rem; }
  .testi-page { display: flex; justify-content: center; align-items: center; padding-inline: 1.5rem; }
  .testi-page figure {
    width: 100%; max-width: 56rem; margin-inline: auto;
    display: flex; flex-direction: column; align-items: center; text-align: center;
  }
  .quote { width: 2rem; height: 2rem; fill: none; stroke: var(--violet); stroke-width: 1.25; stroke-linecap: round; stroke-linejoin: round; }
  .testi-page blockquote {
    margin-top: 2rem;
    font-size: clamp(1.35rem, 2.3vw, 2.2rem); font-style: italic; line-height: 1.4;
    color: var(--cream);
  }
  .testi-page figcaption { margin-top: 2.5rem; display: flex; flex-direction: column; align-items: center; gap: .625rem; }
  .testi-page .rule { width: 2.5rem; height: 1px; background: var(--violet); }
  .testi-page .name { font-size: .95rem; font-weight: 500; }
  .testi-page .role { font-size: .85rem; color: color-mix(in oklab, var(--lilac) 60%, transparent); }
  .next {
    max-width: 48rem; text-align: center;
    font-size: clamp(1.8rem, 3vw, 2.9rem); font-style: italic; line-height: 1.25;
    color: color-mix(in oklab, var(--lilac) 70%, transparent);
  }

  @media (max-width: 1023px) {
    .testi-pages { padding: 0 8rem 0 1.5rem; }
    .testi-page { padding-inline: .25rem; }
  }
  @media (min-width: 640px) and (max-width: 1023px) {
    .testi-pages { padding-right: 9rem; }
    .testi-page { padding-inline: 2rem; }
  }
  @media (max-width: 767px) {
    .testi-pages { padding: 0 1.5rem; }
  }

  /* --- CONTATO --- */
  .contact {
    display: flex; flex-direction: column;
    min-height: 100vh; min-height: 100svh;
    background: var(--mist); padding-top: var(--section-pad);
  }
  .contact-grid { flex: 1; display: grid; grid-template-columns: 1fr; align-items: center; gap: 3.5rem; padding-block: 4rem; }
  .contact h2 { font-size: clamp(2.4rem, 5vw, 4.2rem); line-height: .98; letter-spacing: var(--tracking-display); color: var(--plum); }
  .contact h2 em { color: var(--violet); }
  .contact-grid p { margin-top: 1.75rem; max-width: 28rem; font-size: 1.05rem; line-height: 1.625; color: var(--text-muted); }
  .contact-links {
    display: flex; flex-direction: column; gap: 1.5rem;
    padding-left: 2rem;
    border-left: 1px solid var(--border-subtle);
  }
  .contact-links a {
    display: inline-flex; align-items: center; gap: .75rem;
    font-size: .95rem; color: var(--plum);
    transition: color .15s var(--ease);
    overflow-wrap: anywhere;
  }
  .contact-links a:hover { color: var(--violet); }
  .contact-links svg { width: 1rem; height: 1rem; flex-shrink: 0; color: var(--violet); stroke-width: 1.7; }

  .ct-cv { display: block; height: 1lh; }
  .ct-fb { display: none; }
  .contact-links a:not([data-ct]) .ct-fb,
  .contact-links a:not([data-ct]) .ct-cv { display: none; }

  .site-footer > div {
    display: flex; flex-wrap: wrap; align-items: center; gap: .5rem 2rem;
    padding-block: 1.25rem;
  }
  .footer-name { font-size: 1rem; font-style: italic; font-weight: 400; line-height: 1; letter-spacing: var(--tracking-display); color: var(--plum); }
  .copy { font-size: .7rem; color: color-mix(in oklab, var(--ink) 40%, transparent); }
  @media (min-width: 640px) { .copy { margin-left: auto; } }
  @media (min-width: 1024px) {
    .contact-grid { grid-template-columns: 1.2fr 1fr; gap: 6rem; }
    .contact-links { padding-left: 2.5rem; }
  }
  @media (max-width: 767px) {
    .contact-links a { font-size: .85rem; }
    .site-footer > div { padding-bottom: calc(3.5rem + env(safe-area-inset-bottom, 0px)); }
  }
}

/* ======================= MOTION ======================== */
@layer motion {

  /* --- keyframe: contraste do logo/nav (cor direta, sem custom prop) --- */
  @keyframes on-dark { from, to { color: var(--cream); } }

  /* --- keyframes: geral --- */
  @keyframes reveal       { from { opacity: 0; transform: translateY(28px); } to { opacity: 1; transform: none; } }
  @keyframes parallax-up  { from { transform: translateY(-6%); } to { transform: translateY(6%); } }
  @keyframes parallax-down{ from { transform: translateY(8%); }  to { transform: translateY(-8%); } }
  @keyframes line-grow    { from { transform: scaleY(0); } to { transform: scaleY(1); } }
  /* opacidade por proximidade — escala: d0=1, d1=.55, d2=.35, d3=.22, d4=.15
     9 keyframes + direction:reverse cobrem as 25 combinações link×seção.
     0%/100% = media com vizinho anterior/proximo para handoff continuo */
  @keyframes spy-1e  { 0% { opacity: 1; }   12%, 88% { opacity: 1; }   100% { opacity: .78; } }
  @keyframes spy-1m  { 0% { opacity: .78; }  12%, 88% { opacity: 1; }   100% { opacity: .78; } }
  @keyframes spy-55a { 0% { opacity: .55; }  12%, 88% { opacity: .55; } 100% { opacity: .78; } }
  @keyframes spy-55m { 0% { opacity: .78; }  12%, 88% { opacity: .55; } 100% { opacity: .45; } }
  @keyframes spy-35a { 0% { opacity: .35; }  12%, 88% { opacity: .35; } 100% { opacity: .45; } }
  @keyframes spy-35m { 0% { opacity: .45; }  12%, 88% { opacity: .35; } 100% { opacity: .29; } }
  @keyframes spy-22a { 0% { opacity: .22; }  12%, 88% { opacity: .22; } 100% { opacity: .29; } }
  @keyframes spy-22m { 0% { opacity: .29; }  12%, 88% { opacity: .22; } 100% { opacity: .19; } }
  @keyframes spy-15a { 0% { opacity: .15; }  12%, 88% { opacity: .15; } 100% { opacity: .19; } }
  @keyframes nav-dash      { 0%, 100% { width: 0; opacity: 0; } 12%, 88% { width: 1.25rem; opacity: .7; } }
  @keyframes nav-underline { from, to { transform: scaleX(1); opacity: .8; } }

  /* fundo da barra mobile — cor solida que acompanha a seção */
  @keyframes bar-ink   { from, to { background-color: var(--ink); } }
  @keyframes bar-plum  { from, to { background-color: var(--plum); } }
  @keyframes bar-cream { from, to { background-color: var(--cream); } }
  @keyframes bar-mist  { from, to { background-color: var(--mist); } }

  @keyframes nav-i0 { from, to { --nav-i: 0; } }
  @keyframes nav-i1 { from, to { --nav-i: 1; } }
  @keyframes nav-i2 { from, to { --nav-i: 2; } }
  @keyframes nav-i3 { from, to { --nav-i: 3; } }
  @keyframes nav-i4 { from, to { --nav-i: 4; } }

  /* --- keyframes: palavras (hero) --- */
  @keyframes word-cycle {
    0%     { opacity: 0; max-width: 0; }
    0.01%  { max-width: 20em; }
    1.97%  { opacity: 1; }
    9.09%  { opacity: 1; max-width: 20em; }
    9.1%   { max-width: 0; }
    11.06% { opacity: 0; }
    100%   { opacity: 0; max-width: 0; }
  }

  @media (prefers-reduced-motion: no-preference) {
    .word {
      animation: word-cycle calc(var(--n) * var(--step)) linear infinite both;
    }
    .swap-a .word { animation-delay: calc(var(--i) * var(--step) - 2.22s); }
    .swap-b .word { animation-delay: calc(var(--i) * var(--step) - 1s); }
  }

  /* --- keyframes: depoimentos (desktop scroll) --- */
  @keyframes testi-first { 0%, 72% { opacity: 1; transform: none; } 100% { opacity: 0; transform: translateY(-30px); } }
  @keyframes testi-mid   { 0% { opacity: 0; transform: translateY(30px); } 28%, 72% { opacity: 1; transform: none; } 100% { opacity: 0; transform: translateY(-30px); } }
  @keyframes testi-last  { 0% { opacity: 0; transform: translateY(30px); } 28%, 100% { opacity: 1; transform: none; } }

  /* --- keyframes: servicos (scroll-driven, same fade pattern) --- */
  @keyframes svc-first { 0%, 72% { opacity: 1; transform: none; } 100% { opacity: 0; transform: translateY(-30px); } }
  @keyframes svc-mid   { 0% { opacity: 0; transform: translateY(30px); } 28%, 72% { opacity: 1; transform: none; } 100% { opacity: 0; transform: translateY(-30px); } }
  @keyframes svc-last  { 0% { opacity: 0; transform: translateY(30px); } 28%, 100% { opacity: 1; transform: none; } }

  /* --- scroll-driven animations --- */
  @supports (animation-timeline: view()) {
    body { timeline-scope: --tl-inicio, --tl-servicos, --tl-sobre, --tl-depoimentos, --tl-contato; }
    #inicio      { view-timeline-name: --tl-inicio; }
    #servicos    { view-timeline-name: --tl-servicos; }
    #sobre       { view-timeline-name: --tl-sobre; }
    #depoimentos { view-timeline-name: --tl-depoimentos; }
    #contato     { view-timeline-name: --tl-contato; }

    .contrast {
      mix-blend-mode: normal;
      color: var(--plum);
      animation: on-dark linear none, on-dark linear none, on-dark linear none;
      animation-timeline: --tl-inicio, --tl-servicos, --tl-depoimentos;
      animation-range: entry 50% exit 50%;
    }

    .side-nav a {
      animation-timing-function: linear;
      animation-fill-mode: none;
      animation-timeline: --tl-inicio, --tl-servicos, --tl-sobre, --tl-depoimentos, --tl-contato;
      animation-range: entry 50% exit 50%;
    }
    .side-nav a:nth-child(1) {
      animation-name: spy-1e, spy-55m, spy-35m, spy-22m, spy-15a;
      animation-direction: normal, normal, normal, normal, reverse;
    }
    .side-nav a:nth-child(2) {
      animation-name: spy-55a, spy-1m, spy-55m, spy-35m, spy-22a;
      animation-direction: normal, normal, normal, normal, reverse;
    }
    .side-nav a:nth-child(3) {
      animation-name: spy-35a, spy-55m, spy-1m, spy-55m, spy-35a;
      animation-direction: normal, reverse, normal, normal, reverse;
    }
    .side-nav a:nth-child(4) {
      animation-name: spy-22a, spy-35m, spy-55m, spy-1m, spy-55a;
      animation-direction: normal, reverse, reverse, normal, reverse;
    }
    .side-nav a:nth-child(5) {
      animation-name: spy-15a, spy-22m, spy-35m, spy-55m, spy-1e;
      animation-direction: normal, reverse, reverse, reverse, reverse;
    }
    .side-nav a span {
      animation: nav-dash linear both;
      animation-timeline: var(--tl);
      animation-range: entry 50% exit 50%;
    }
    .side-nav a:hover span { width: 1.25rem; opacity: .7; }

    .reveal {
      animation: reveal linear both;
      animation-timeline: view();
      animation-range: entry 0% entry 90%;
    }
    .parallax-up   { animation: parallax-up linear both;   animation-timeline: view(); animation-range: cover; }
    .parallax-down { animation: parallax-down linear both; animation-timeline: view(); animation-range: cover; }
    .services-list::before { animation: line-grow linear both; animation-timeline: view(); animation-range: cover 12% cover 85%; }

    /* depoimentos: trilho com troca por scroll (todos os tamanhos) */
    .track { height: 400svh; view-timeline-name: --track; view-timeline-axis: block; }
    .snap {
      display: block; position: absolute; left: 0; height: 1px; width: 1px;
      top: calc(var(--k) * 100svh); scroll-snap-align: start;
    }
    .track-sticky {
      position: sticky; top: 0; height: 100svh; overflow: hidden;
      display: flex; flex-direction: column; padding-block: 0;
    }
    .testi-head { padding-top: 5.5rem; padding-bottom: 1.5rem; }
    .testi-stage { position: relative; flex: 1; }
    .testi-pages { position: absolute; inset: 0; margin: 0; padding: 0; display: block; }
    .testi-page {
      position: absolute; inset: 0; padding-inline: 1.5rem;
      opacity: 0; animation: linear both; animation-timeline: --track;
    }
    .testi-page:nth-child(1) { animation-name: testi-first; animation-range: contain 0% contain 25%; }
    .testi-page:nth-child(2) { animation-name: testi-mid;   animation-range: contain 25% contain 50%; }
    .testi-page:nth-child(3) { animation-name: testi-mid;   animation-range: contain 50% contain 75%; }
    .testi-page:nth-child(4) { animation-name: testi-last;  animation-range: contain 75% contain 100%; }
    @media (max-width: 767px) {
      .track-sticky { padding-bottom: calc(2.75rem + env(safe-area-inset-bottom, 0px)); }
      .testi-head p { display: none; }
      .testi-page blockquote { font-size: clamp(1.1rem, 4.6vw, 1.35rem); margin-top: 1.25rem; }
      .quote { width: 1.5rem; height: 1.5rem; }
      .testi-page figcaption { margin-top: 1.5rem; }
      .next { font-size: clamp(1.4rem, 5vw, 2rem); }
    }
    @media (max-width: 767px) and (max-height: 700px) {
      .testi-page blockquote { font-size: 1.05rem; }
      .testi-page figcaption { margin-top: 1rem; gap: .4rem; }
    }
    @media (min-width: 768px) and (max-width: 1023px) {
      .testi-head { padding-top: 6rem; }
      .testi-page { padding-right: 9rem; }
      .testi-page blockquote { font-size: clamp(1.25rem, 2.3vw, 2rem); }
    }
    @media (min-width: 1024px) {
      .track { height: 400vh; }
      .snap { top: calc(var(--k) * 100vh); }
      .track-sticky { height: 100vh; }
      .testi-head { flex-wrap: nowrap; padding-top: 7rem; padding-bottom: 2.5rem; }
      .testi-head h2 { font-size: clamp(2.2rem, 3.6vw, 3.4rem); }
      .testi-page { padding-inline: 3rem; }
    }

    /* servicos: trilho com troca por scroll (todos os tamanhos) */
    .services { padding-block: 0; }
    .svc-track { height: 300svh; view-timeline-name: --svc-track; view-timeline-axis: block; }
    .svc-snap {
      display: block; position: absolute; left: 0; height: 1px; width: 1px;
      top: calc(var(--k) * 100svh); scroll-snap-align: start;
    }
    .svc-track-sticky {
      position: sticky; top: 0; height: 100svh; overflow: hidden;
      display: flex; flex-direction: column; padding-top: 5.5rem;
    }
    .svc-track-sticky .services-grid { flex: 1; min-height: 0; }
    .services-intro { position: static; }
    .svc-stage { position: relative; min-height: 0; }
    .services-list { position: absolute; inset: 0; margin: 0; display: block; }
    .services-list li {
      position: absolute; inset: 0;
      opacity: 0; border: none;
      animation: linear both; animation-timeline: --svc-track;
      align-content: center;
    }
    .services-list li:nth-child(1) { animation-name: svc-first; animation-range: contain 0% contain 33.33%; }
    .services-list li:nth-child(2) { animation-name: svc-mid;   animation-range: contain 33.33% contain 66.67%; }
    .services-list li:nth-child(3) { animation-name: svc-last;  animation-range: contain 66.67% contain 100%; }
    @media (max-width: 767px) {
      .svc-track-sticky { padding-bottom: calc(2.75rem + env(safe-area-inset-bottom, 0px)); }
      .svc-track-sticky .services-grid { gap: 1.5rem; grid-template-rows: auto 1fr; }
      .services h2 { font-size: clamp(1.6rem, 6vw, 2.2rem); }
      .services-intro p { font-size: .85rem; margin-top: .75rem; }
      .services h3 { font-size: clamp(1.2rem, 4vw, 1.6rem); }
      .services .tags { font-size: .78rem; margin-top: .75rem; }
      .services .desc .lead { font-size: .88rem; }
      .services .desc p:not(.lead) { font-size: .82rem; margin-top: .5rem; }
      .services-list li { padding: 1rem 1.5rem; gap: 1rem; }
    }
    @media (max-width: 767px) and (max-height: 700px) {
      .services-intro p { display: none; }
      .services .desc p:not(.lead) { display: none; }
    }
    @media (min-width: 768px) and (max-width: 1023px) {
      .svc-track-sticky { padding-top: 6rem; }
      .svc-track-sticky .services-grid { grid-template-rows: auto 1fr; }
    }
    @media (min-width: 1024px) {
      .svc-track { height: 300vh; }
      .svc-snap { top: calc(var(--k) * 100vh); }
      .svc-track-sticky { height: 100vh; padding-top: 7rem; padding-bottom: 3rem; }
      .svc-track-sticky .services-grid { grid-template-columns: .75fr 1.25fr; gap: 4rem; grid-template-rows: 1fr; }
      .services-intro { align-self: center; }
      .services-list li { padding-left: 3rem; }
      .services-list::before {
        animation-timeline: --svc-track;
        animation-range: contain 0% contain 100%;
      }
    }

    /* --- barra mobile: fundo solido por seção + indicador deslizante --- */
    @media (max-width: 767px) {
      .side-nav {
        animation: bar-ink linear none, bar-plum linear none, bar-cream linear none, bar-ink linear none, bar-mist linear none, nav-i0 linear none, nav-i1 linear none, nav-i2 linear none, nav-i3 linear none, nav-i4 linear none;
        animation-timeline: --tl-inicio, --tl-servicos, --tl-sobre, --tl-depoimentos, --tl-contato, --tl-inicio, --tl-servicos, --tl-sobre, --tl-depoimentos, --tl-contato;
        animation-range: entry 50% exit 50%;
      }
      .side-nav a span { display: none; }
      .side-nav-list::after {
        content: '';
        position: absolute;
        bottom: .45rem;
        left: 0;
        z-index: 1;
        width: calc(100% / 5);
        height: 2px;
        pointer-events: none;
        background: linear-gradient(currentColor, currentColor) center / calc(100% - 1rem) 100% no-repeat;
        opacity: .8;
        translate: calc(var(--nav-i) * 100%) 0;
        transition: translate .55s linear(0, 0.23 7%, 0.77 18%, 1.08 29%, 1.13 35%, 1.06 45%, 0.99 57%, 1.005 70%, 1);
      }
    }
  }
}

/* fora de camadas para que !important sempre venca */
@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  *, *::before, *::after { transition-duration: .01ms !important; }
  .reveal, .parallax-up, .parallax-down { animation: none !important; }

  /* scroll-driven: remove transforms, keep opacity-only crossfade */
  @keyframes testi-first { 0%, 72% { opacity: 1; } 100% { opacity: 0; } }
  @keyframes testi-mid   { 0% { opacity: 0; } 28%, 72% { opacity: 1; } 100% { opacity: 0; } }
  @keyframes testi-last  { 0% { opacity: 0; } 28%, 100% { opacity: 1; } }
  @keyframes svc-first   { 0%, 72% { opacity: 1; } 100% { opacity: 0; } }
  @keyframes svc-mid     { 0% { opacity: 0; } 28%, 72% { opacity: 1; } 100% { opacity: 0; } }
  @keyframes svc-last    { 0% { opacity: 0; } 28%, 100% { opacity: 1; } }
}