@layer reset, tokens, base, layout, components, motion;

@layer reset {
  *, *::before, *::after { box-sizing: border-box; }
  html { -webkit-text-size-adjust: 100%; }
  body { margin: 0; }
  img { max-width: 100%; display: block; }
  ul, ol { margin: 0; padding: 0; list-style: none; }
  h1, h2, h3, p, figure, blockquote { margin: 0; }
  button { font: inherit; color: inherit; background: none; border: 0; cursor: pointer; }
  a { color: inherit; text-decoration: none; }
}

@layer tokens {
  :root {
    color-scheme: dark;

    /* Tier 1 — palette */
    --black: #16130F;
    --bone: #F3EEE4;
    --terracotta: #A9673F;
    --rose: #8B5D56;
    --brass: #9C7B48;
    --graphite: #6B6259;
    --bone-dim: #E4DCCD;
    --black-soft: #221D17;

    /* Tier 2 — semantic */
    --surface-dark: var(--black);
    --surface-light: var(--bone);
    --ink-on-dark: var(--bone);
    --ink-on-light: var(--black);
    --ink-muted-on-dark: color-mix(in oklab, var(--bone) 62%, var(--black));
    --ink-muted-on-light: var(--graphite);
    --accent: var(--terracotta);
    --accent-soft: var(--rose);
    --line-on-dark: color-mix(in oklab, var(--bone) 22%, var(--black));
    --line-on-light: color-mix(in oklab, var(--black) 16%, var(--bone));

    /* Type */
    --font-serif: 'Fraunces', 'Iowan Old Style', serif;
    --font-sans: 'Switzer', 'Helvetica Neue', Arial, sans-serif;

    --size-hero: clamp(2.05rem, 1rem + 3.64vw, 4.1rem);
    --size-h2: clamp(2.25rem, 1.5rem + 3vw, 4rem);
    --size-lead: clamp(1.0625rem, 0.95rem + 0.5vw, 1.3125rem);
    --size-body: clamp(1rem, 0.95rem + 0.2vw, 1.0625rem);
    --size-small: 0.8125rem;
    --size-nav: 0.9375rem;

    /* Spacing scale */
    --space-1: 0.5rem;
    --space-2: 1rem;
    --space-3: 1.75rem;
    --space-4: 2.75rem;
    --space-5: 4.5rem;
    --space-6: 7rem;
    --space-7: 10rem;

    /* Layout */
    --margin-inline: clamp(1.25rem, 1rem + 2vw, 6rem);
  }
}

@layer base {
  html {
    font-family: var(--font-sans);
    font-size: 16px;
    overflow-x: clip;
  }
  @media (prefers-reduced-motion: no-preference) {
    html { scroll-behavior: smooth; }
  }
  body {
    background: var(--surface-dark);
    color: var(--ink-on-dark);
    font-size: var(--size-body);
    line-height: 1.6;
    overflow-x: clip;
  }
  h1, h2, h3 {
    font-family: var(--font-serif);
    font-weight: 500;
    line-height: 1.02;
  }
  h2 { text-wrap: balance; }
  p { text-wrap: pretty; max-width: 62ch; }

  a, button {
    -webkit-tap-highlight-color: transparent;
  }
  :focus-visible {
    outline: 2px solid var(--brass);
    outline-offset: 4px;
  }

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

  .skip-link {
    position: absolute;
    inset-block-start: -4rem;
    inset-inline-start: var(--space-2);
    z-index: 100;
    background: var(--bone);
    color: var(--black);
    padding: var(--space-1) var(--space-2);
    font-family: var(--font-sans);
    font-size: var(--size-small);
  }
  .skip-link:focus-visible {
    inset-block-start: var(--space-2);
  }
}

@layer layout {
  .container {
    max-inline-size: 1560px;
    margin-inline: auto;
    padding-inline: var(--margin-inline);
  }
  .container--narrow { max-inline-size: 900px; }
  .container--index { max-inline-size: 1400px; }
  .container--offset { max-inline-size: 1200px; }
  .container--tight { max-inline-size: 760px; }
}

@layer components {

  /* ---------- Header ---------- */
  .site-header {
    position: absolute;
    inset-inline: 0;
    inset-block-start: 0;
    z-index: 20;
  }
  .header-inner {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: var(--space-3);
    padding: var(--space-3) var(--margin-inline);
  }
  .brand { display: flex; flex-direction: column; gap: 0.5rem; }
  .wordmark {
    display: inline-flex;
    align-items: center;
    gap: 0.5rem;
    font-family: var(--font-serif);
    font-size: 1.25rem;
    letter-spacing: 0.01em;
    color: var(--bone);
  }
  .wordmark-mark {
    display: block;
    flex-shrink: 0;
    inline-size: 34px;
    block-size: auto;
    aspect-ratio: 1774 / 887;
  }
  .brand-tagline {
    font-size: 0.6875rem;
    letter-spacing: 0.06em;
    color: var(--ink-muted-on-dark);
  }
  .nav-toggle {
    display: none;
    font-family: var(--font-sans);
    font-size: var(--size-nav);
    color: var(--bone);
    padding: var(--space-1) 0;
    min-block-size: 44px;
  }
  .nav-close { display: none; }
  .nav-overlay { display: none; }
  .site-nav {
    display: flex;
    align-items: center;
    gap: var(--space-4);
  }
  .nav-links {
    display: flex;
    align-items: center;
    gap: var(--space-3);
  }
  .nav-links a {
    font-size: var(--size-nav);
    color: var(--ink-muted-on-dark);
    text-shadow: 0 1px 10px rgb(0 0 0 / 0.4);
    transition: color 0.2s ease;
  }
  .nav-links a:hover,
  .nav-links a:focus-visible {
    color: var(--bone);
  }

  /* ---------- Buttons ---------- */
  .button {
    display: inline-flex;
    align-items: center;
    gap: 0.5em;
    font-family: var(--font-sans);
    font-size: var(--size-nav);
    font-weight: 500;
    padding-block: 0.9rem;
    padding-inline: 1.6rem;
    min-block-size: 44px;
    border: 1px solid currentColor;
    white-space: nowrap;
  }
  .button-fill {
    background: var(--accent);
    border-color: var(--accent);
    color: var(--bone);
    transition: background 0.2s ease, border-color 0.2s ease;
  }
  .button-fill:hover,
  .button-fill:focus-visible {
    background: color-mix(in oklab, var(--accent) 82%, black);
    border-color: color-mix(in oklab, var(--accent) 82%, black);
  }
  .hero .button-fill {
    border-radius: 8px;
  }
  .site-header .button-fill {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    block-size: 42px;
    min-block-size: 0;
    inline-size: auto;
    min-inline-size: 0;
    padding-inline: 20px;
    padding-block: 0;
    border-radius: 7px;
  }
  .button-text {
    border-color: transparent;
    border-block-end: 1px solid color-mix(in oklab, var(--brass) 55%, transparent);
    padding-inline: 0.25rem;
    padding-block-end: 0.3rem;
    color: var(--ink-muted-on-dark);
    transition: color 0.2s ease, border-color 0.2s ease;
  }
  .button-text:hover,
  .button-text:focus-visible {
    color: var(--bone);
    border-color: var(--bone);
  }
  .button-text .chevron {
    display: inline-block;
    inline-size: 0.5em;
    block-size: 0.5em;
    border-inline-end: 1.5px solid currentColor;
    border-block-end: 1.5px solid currentColor;
    transform: rotate(45deg) translateY(-2px);
  }
  .button-large {
    padding-block: 1.15rem;
    padding-inline: 2.5rem;
    font-size: 1rem;
  }

  /* ---------- Hero ---------- */
  .hero {
    position: relative;
    min-block-size: 100dvh;
    display: flex;
    align-items: center;
    background:
      linear-gradient(to bottom, transparent 0%, transparent 65%, color-mix(in oklab, var(--black-soft) 85%, var(--terracotta) 15%) 100%),
      var(--black) url("assets/images/hero-bg.png") no-repeat center center;
    background-size: auto, cover;
    overflow: clip;
  }
  .hero::before {
    content: "";
    position: absolute;
    inset: 0;
    z-index: 4;
    background: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='140' height='140'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.85' numOctaves='2' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)' opacity='0.05'/%3E%3C/svg%3E");
    pointer-events: none;
  }
  .hero::after {
    content: "";
    position: absolute;
    inset: 0;
    z-index: 1;
    background: linear-gradient(to bottom, color-mix(in oklab, var(--black) 55%, transparent) 0%, transparent 14%);
    pointer-events: none;
  }
  .hero-figure {
    position: absolute;
    inset-block-start: 5.5rem;
    inset-block-end: 0;
    inset-inline-end: 0;
    inline-size: min(55%, 56rem);
    z-index: 2;
    -webkit-mask-image: linear-gradient(to right, transparent 0%, black 26%);
    mask-image: linear-gradient(to right, transparent 0%, black 26%);
  }
  .hero-figure::after {
    content: "";
    position: absolute;
    inset: 0;
    background: linear-gradient(to bottom, transparent 0%, transparent 65%, color-mix(in oklab, var(--black-soft) 85%, var(--terracotta) 15%) 100%);
    pointer-events: none;
  }
  .hero-figure img {
    inline-size: 100%;
    block-size: 100%;
    object-fit: cover;
    object-position: 38% 12%;
  }
  .hero-content {
    position: relative;
    z-index: 3;
    margin-inline-start: 80px;
    padding-inline-start: var(--margin-inline);
    padding-inline-end: var(--space-3);
    max-inline-size: 34rem;
  }
  .hero-title {
    font-size: var(--size-hero);
    line-height: 1.08;
    color: var(--bone);
  }
  .hero-line { display: block; white-space: nowrap; }
  .hero-line--accent { font-style: italic; font-weight: 400; }
  .hero-lead {
    margin-block-start: var(--space-2);
    font-size: var(--size-lead);
    color: var(--ink-muted-on-dark);
    max-inline-size: 30ch;
  }
  .hero-actions {
    margin-block-start: var(--space-3);
    display: flex;
    align-items: center;
    gap: var(--space-3);
    flex-wrap: wrap;
  }
  .hero-sidelabel {
    position: absolute;
    z-index: 3;
    inset-block: calc(50% - 206px);
    inset-inline-start: clamp(0.75rem, 1.2vw, 1.75rem);
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: var(--space-2);
  }
  .hero-sidelabel-line {
    inline-size: 1px;
    background: color-mix(in oklab, var(--brass) 60%, transparent);
  }
  .hero-sidelabel-line--top {
    block-size: 1.5rem;
    flex-shrink: 0;
  }
  .hero-sidelabel-line--bottom {
    flex: 1 1 auto;
    min-block-size: 1.5rem;
  }
  .hero-sidelabel-text {
    writing-mode: vertical-rl;
    transform: rotate(180deg);
    text-transform: uppercase;
    font-family: var(--font-sans);
    font-size: 0.6875rem;
    letter-spacing: 0.28em;
    color: color-mix(in oklab, var(--terracotta) 82%, var(--bone));
    white-space: nowrap;
    flex-shrink: 0;
  }
  .hero-sidelabel-chevron {
    display: block;
    inline-size: 0.4rem;
    block-size: 0.4rem;
    flex-shrink: 0;
    margin-block-end: 0.3rem;
    border-inline-end: 1px solid color-mix(in oklab, var(--brass) 70%, transparent);
    border-block-end: 1px solid color-mix(in oklab, var(--brass) 70%, transparent);
    transform: rotate(45deg);
  }
  @media (prefers-reduced-motion: no-preference) {
    .hero-sidelabel-chevron {
      animation: hero-chevron-drift 2.6s ease-in-out infinite;
    }
  }
  @keyframes hero-chevron-drift {
    0%, 100% { transform: rotate(45deg) translateY(0); }
    50% { transform: rotate(45deg) translateY(3px); }
  }
  .hero-credential {
    position: absolute;
    z-index: 3;
    inset-inline-start: var(--margin-inline);
    inset-block-end: var(--space-4);
    font-family: var(--font-sans);
    font-size: var(--size-small);
    letter-spacing: 0.18em;
    text-transform: uppercase;
    color: var(--ink-muted-on-dark);
    opacity: 0.85;
    white-space: nowrap;
  }

  /* ---------- Assinatura / Conceito ---------- */
  /* ---------- Section title (shared) ---------- */
  .section-title {
    font-size: var(--size-h2);
    color: var(--ink-on-light);
  }

  /* ---------- Chapter number (shared) ---------- */
  .chapter-number {
    display: block;
    font-family: var(--font-serif);
    font-size: 1.25rem;
    color: var(--brass);
    margin-block-end: var(--space-2);
  }

  /* ---------- Especialidades ---------- */
  .especialidades {
    background: linear-gradient(
      to bottom,
      color-mix(in oklab, var(--black-soft) 85%, var(--terracotta) 15%) 0%,
      var(--black-soft) 340px,
      var(--black-soft) calc(100% - 140px),
      var(--black) 100%
    );
    color: var(--ink-on-dark);
    padding-block: var(--space-4) var(--space-3);
  }
  .especialidades .section-title {
    color: var(--bone);
  }
  .especialidades-inner {
    max-inline-size: 1400px;
    margin-inline: auto;
    padding-inline: var(--margin-inline);
  }
  .specialty-index {
    margin-block-start: var(--space-3);
    border-block-start: 1px solid var(--line-on-dark);
  }
  .specialty-item {
    position: relative;
    display: flex;
    align-items: center;
    min-block-size: clamp(170px, 14vw, 210px);
    border-block-end: 1px solid var(--line-on-dark);
    background-repeat: no-repeat, no-repeat;
    background-size: cover, cover;
  }
  .specialty-item--sobrancelhas {
    background-image:
      linear-gradient(
        to right,
        var(--black-soft) 0%,
        var(--black-soft) 30%,
        color-mix(in oklab, var(--black-soft) 90%, transparent) 42%,
        color-mix(in oklab, var(--black-soft) 75%, transparent) 52%,
        color-mix(in oklab, var(--black-soft) 58%, transparent) 62%,
        color-mix(in oklab, var(--black-soft) 40%, transparent) 72%,
        color-mix(in oklab, var(--black-soft) 22%, transparent) 83%,
        color-mix(in oklab, var(--black-soft) 8%, transparent) 93%,
        transparent 100%
      ),
      url("assets/images/sobrancelhasssss.png");
    background-size: cover, 78% auto;
    background-position: left, 140% 73%;
  }
  .specialty-item--micropigmentacao {
    background-image:
      linear-gradient(
        to right,
        var(--black-soft) 0%,
        var(--black-soft) 30%,
        color-mix(in oklab, var(--black-soft) 90%, transparent) 42%,
        color-mix(in oklab, var(--black-soft) 75%, transparent) 52%,
        color-mix(in oklab, var(--black-soft) 58%, transparent) 62%,
        color-mix(in oklab, var(--black-soft) 40%, transparent) 72%,
        color-mix(in oklab, var(--black-soft) 22%, transparent) 83%,
        color-mix(in oklab, var(--black-soft) 8%, transparent) 93%,
        transparent 100%
      );
  }
  .specialty-item--micropigmentacao::before {
    content: "";
    position: absolute;
    inset: 0;
    z-index: 0;
    background: url("assets/images/micro.png") no-repeat 115% 48% / 95% auto;
    -webkit-mask-image: linear-gradient(to right, transparent 0%, transparent 36%, black 70%);
    mask-image: linear-gradient(to right, transparent 0%, transparent 36%, black 70%);
  }
  .specialty-item--cilios {
    background-image:
      linear-gradient(
        to right,
        var(--black-soft) 0%,
        var(--black-soft) 30%,
        color-mix(in oklab, var(--black-soft) 90%, transparent) 42%,
        color-mix(in oklab, var(--black-soft) 75%, transparent) 52%,
        color-mix(in oklab, var(--black-soft) 58%, transparent) 62%,
        color-mix(in oklab, var(--black-soft) 40%, transparent) 72%,
        color-mix(in oklab, var(--black-soft) 22%, transparent) 83%,
        color-mix(in oklab, var(--black-soft) 8%, transparent) 93%,
        transparent 100%
      );
  }
  .specialty-item--cilios::before {
    content: "";
    position: absolute;
    inset: 0;
    z-index: 0;
    /* dissolve suavemente na base da faixa, em vez de terminar na borda dura,
       preparando a transição para Resultados. */
    background-image:
      linear-gradient(to bottom, transparent 0%, transparent 72%, var(--black-soft) 100%),
      url("assets/images/ciliosssssss.png");
    background-repeat: no-repeat, no-repeat;
    background-position: center, 132% 50%;
    background-size: 100% 100%, 92% auto;
    -webkit-mask-image: linear-gradient(to right, transparent 0%, transparent 16%, black 48%);
    mask-image: linear-gradient(to right, transparent 0%, transparent 16%, black 48%);
  }
  .specialty-copy {
    position: relative;
    z-index: 1;
    padding-inline-start: 8%;
    max-inline-size: 40%;
  }
  .specialty-number {
    display: inline-flex;
    align-items: center;
    gap: var(--space-2);
    font-family: var(--font-serif);
    font-size: 1.25rem;
    color: var(--accent);
  }
  .specialty-number::after {
    content: "";
    display: inline-block;
    inline-size: 2.5rem;
    block-size: 1px;
    background: color-mix(in oklab, var(--brass) 60%, transparent);
  }
  .specialty-name {
    margin-block-start: var(--space-1);
    font-size: clamp(1.375rem, 1.1rem + 1.2vw, 2rem);
    color: var(--ink-on-dark);
  }
  .specialty-desc {
    margin-block-start: var(--space-1);
    color: var(--ink-muted-on-dark);
    font-size: var(--size-lead);
  }
  .specialty-row {
    display: contents;
  }
  .specialty-microtext {
    display: none;
  }

  /* ---------- Resultados ---------- */
  .resultados {
    background: linear-gradient(to bottom, var(--black) 0%, var(--black) calc(100% - 240px), color-mix(in oklab, var(--black-soft) 82%, var(--terracotta) 18%) 100%);
    padding-block: var(--space-5) var(--space-4);
  }
  .resultados-grid {
    display: grid;
    grid-template-columns: minmax(260px, 20%) minmax(0, 1fr);
    align-items: start;
    gap: var(--space-2);
    max-inline-size: 1560px;
    margin-inline: auto;
    padding-inline: var(--margin-inline);
  }
  .resultados-intro {
    position: relative;
    z-index: 0;
    padding-inline-end: var(--margin-inline);
  }
  .resultados-intro::before {
    content: "";
    position: absolute;
    z-index: -1;
    inset-block-start: -55%;
    inset-inline-end: 20%;
    inline-size: 260%;
    aspect-ratio: 1;
    border-radius: 50%;
    border: 1px solid color-mix(in oklab, var(--brass) 55%, transparent);
    opacity: 0.14;
    pointer-events: none;
  }
  .resultados-intro .chapter-number {
    display: inline-flex;
    align-items: center;
    gap: var(--space-2);
    margin-block-end: 0;
  }
  .resultados-intro .chapter-number::after {
    content: "";
    display: inline-block;
    inline-size: 3rem;
    block-size: 1px;
    background: color-mix(in oklab, var(--brass) 60%, transparent);
  }
  .resultados-intro .section-title {
    color: var(--bone);
  }
  .resultados-caption {
    margin-block-start: var(--space-2);
    color: var(--ink-muted-on-dark);
    font-size: var(--size-lead);
    max-inline-size: 26ch;
  }
  .resultados-divider {
    display: block;
    margin-block-start: var(--space-4);
    inline-size: 3rem;
    block-size: 1px;
    background: color-mix(in oklab, var(--brass) 55%, transparent);
  }
  .resultados-editorial {
    margin: 0;
    margin-block-start: var(--space-3);
    font-family: var(--font-serif);
    font-style: italic;
    font-weight: 400;
    font-size: var(--size-lead);
    line-height: 1.4;
    color: var(--ink-muted-on-dark);
    max-inline-size: 22ch;
  }
  .resultados-values {
    margin: 0;
    margin-block-start: var(--space-4);
    padding: 0;
    list-style: none;
    display: flex;
    flex-direction: column;
    gap: var(--space-2);
    font-family: var(--font-sans);
    font-size: var(--size-small);
    letter-spacing: 0.22em;
    text-transform: uppercase;
    color: var(--ink-muted-on-dark);
    opacity: 0.55;
  }
  .resultados-plates {
    display: grid;
    grid-template-columns: 3fr 2fr;
    align-items: start;
    column-gap: var(--space-3);
    inline-size: min(100%, 920px);
    min-inline-size: 0;
    justify-self: end;
  }
  .resultados-col {
    display: flex;
    flex-direction: column;
    gap: var(--space-3);
    min-inline-size: 0;
  }
  .resultados-plate {
    min-inline-size: 0;
    margin: 0;
    overflow: hidden;
    border: 1px solid var(--line-on-dark);
    background: var(--black);
  }
  .resultados-plate img {
    display: block;
    inline-size: 100%;
    block-size: 100%;
    object-fit: cover;
  }

  /* 01 — protagonista: antes/depois, rosto completo. Proporção nativa preservada (sem corte). */
  .resultados-plate--01 { aspect-ratio: 3 / 2; }
  .resultados-plate--01 img { object-position: 50% 50%; }

  /* 02 — antes/depois, detalhe. Proporção nativa preservada (sem corte). */
  .resultados-plate--02 { aspect-ratio: 3 / 2; }
  .resultados-plate--02 img { object-position: 50% 50%; }

  /* 03 — retrato editorial, sem antes/depois: recorte permitido (faixa curta, sob 01). */
  .resultados-plate--03 { aspect-ratio: 3 / 1; }
  .resultados-plate--03 img { object-position: 50% 20%; }

  /* 04 — macro de cílios, sem antes/depois: recorte permitido. */
  .resultados-plate-group {
    min-inline-size: 0;
  }
  .resultados-plate--04 {
    aspect-ratio: 5 / 4;
    position: relative;
  }
  .resultados-plate--04 img { object-position: 50% 75%; }

  .resultados-plate-tag {
    margin-block-start: var(--space-2);
    display: inline-flex;
    align-items: center;
    gap: var(--space-2);
    font-size: var(--size-small);
    letter-spacing: 0.18em;
    text-transform: uppercase;
    color: var(--ink-muted-on-dark);
  }
  .resultados-plate-tag::before {
    content: "";
    display: inline-block;
    inline-size: 2rem;
    block-size: 1px;
    background: color-mix(in oklab, var(--brass) 60%, transparent);
  }

  /* ---------- Processo ---------- */
  .processo {
    position: relative;
    z-index: 0;
    overflow: hidden;
    display: flex;
    align-items: center;
    aspect-ratio: 1793 / 877;
    background: color-mix(in oklab, var(--black) 82%, var(--terracotta) 10%);
  }
  /* imagesprocessobg.png já é a composição final (espaço negativo + ambiente +
     Ana Paula inteira). aspect-ratio casa exatamente com o asset, então
     background-size: cover não corta nada — é apenas um encaixe 1:1. */
  .processo-photo {
    position: absolute;
    z-index: 0;
    inset: 0;
    /* Ponte de cor: continua o tom quente com que Resultados termina,
       dissolvendo gradualmente na própria foto — evita a linha dura na costura. */
    background-image:
      linear-gradient(to bottom, color-mix(in oklab, var(--black-soft) 82%, var(--terracotta) 18%) 0%, transparent 160px),
      url("assets/images/imagesprocessobg.png");
    background-repeat: no-repeat, no-repeat;
    background-size: auto, cover;
    background-position: center, center;
  }
  .processo-arc {
    position: absolute;
    z-index: 1;
    pointer-events: none;
    inset-block-start: -10%;
    inset-inline-start: -20%;
    inline-size: 55%;
    aspect-ratio: 1;
    border-radius: 50%;
    border: 1px solid color-mix(in oklab, var(--brass) 55%, transparent);
    opacity: 0.22;
  }
  .processo-inner {
    position: relative;
    z-index: 2;
    inline-size: 100%;
    max-inline-size: 1560px;
    margin-inline: auto;
    padding-inline: var(--margin-inline);
  }
  .processo-intro {
    max-inline-size: 28rem;
  }
  .processo-hairline {
    display: block;
    transform-origin: left;
    inline-size: 4rem;
    block-size: 1px;
    background: color-mix(in oklab, var(--brass) 60%, transparent);
    margin-block-end: var(--space-3);
  }
  .processo-intro .chapter-number {
    margin-block-end: var(--space-2);
  }
  .processo-intro .section-title {
    color: var(--bone);
  }
  .processo-text {
    margin-block-start: var(--space-2);
    font-size: var(--size-lead);
    color: var(--ink-muted-on-dark);
  }
  .processo-editorial {
    margin: 0;
    margin-block-start: var(--space-3);
    font-family: var(--font-serif);
    font-style: italic;
    font-weight: 400;
    font-size: var(--size-lead);
    line-height: 1.4;
    color: var(--bone);
    max-inline-size: 22ch;
  }
  .processo-values {
    margin: 0;
    margin-block-start: var(--space-4);
    font-family: var(--font-sans);
    font-size: var(--size-small);
    letter-spacing: 0.18em;
    text-transform: uppercase;
    color: var(--ink-muted-on-dark);
  }
  .processo-values span {
    margin-inline: 0.6em;
    color: color-mix(in oklab, var(--brass) 70%, transparent);
  }
  .processo-footer {
    display: flex;
    align-items: stretch;
    gap: var(--space-3);
    margin-block-start: var(--space-5);
  }
  .processo-footer-line {
    inline-size: 1px;
    background: color-mix(in oklab, var(--brass) 60%, transparent);
  }
  .processo-footer-text {
    margin: 0;
    font-family: var(--font-sans);
    font-size: var(--size-small);
    letter-spacing: 0.18em;
    text-transform: uppercase;
    line-height: 1.8;
    color: var(--ink-muted-on-dark);
    opacity: 0.75;
  }

  /* ---------- Ana Paula + CTA (seção 04, fechamento) ---------- */
  .ana-paula-cta {
    position: relative;
    background: var(--black);
    padding-block: var(--space-6);
  }
  .ana-paula-cta-card {
    position: relative;
    display: grid;
    grid-template-columns: minmax(260px, 36%) 1fr auto;
    align-items: center;
    column-gap: var(--space-5);
    max-inline-size: 1560px;
    min-block-size: 600px;
    margin-inline: auto;
    padding-block: var(--space-6);
    padding-inline: var(--space-5);
    border-radius: 28px;
    border: 1px solid color-mix(in oklab, var(--brass) 50%, transparent);
    background: linear-gradient(160deg, var(--black-soft) 0%, var(--black) 100%);
    overflow: visible;
  }
  .ana-paula-cta-photo {
    position: absolute;
    z-index: 1;
    margin: 0;
    inset-inline-start: var(--space-5);
    inset-block-start: var(--space-2);
    inline-size: min(38%, 440px);
    aspect-ratio: 1090 / 1443;
  }
  .ana-paula-cta-photo img {
    display: block;
    inline-size: 100%;
    block-size: 100%;
    object-fit: contain;
    object-position: bottom;
  }
  .ana-paula-cta-kicker {
    position: absolute;
    z-index: 1;
    inset-block-start: var(--space-4);
    inset-inline-start: var(--space-5);
    margin: 0;
    font-family: var(--font-serif);
    font-style: italic;
    font-size: var(--size-small);
    line-height: 1.5;
    color: var(--ink-muted-on-dark);
    opacity: 0.85;
  }
  .ana-paula-cta-content {
    grid-column: 2;
  }
  .ana-paula-cta-content .chapter-number {
    display: inline-flex;
    align-items: center;
    gap: var(--space-2);
    margin-block-end: var(--space-3);
  }
  .ana-paula-cta-content .chapter-number::after {
    content: "";
    display: inline-block;
    inline-size: 3rem;
    block-size: 1px;
    background: color-mix(in oklab, var(--brass) 60%, transparent);
  }
  .ana-paula-cta-title {
    color: var(--bone);
  }
  .ana-paula-cta-title em {
    font-style: italic;
    color: var(--ink-muted-on-dark);
  }
  .ana-paula-cta-text {
    margin-block-start: var(--space-2);
    color: var(--ink-muted-on-dark);
    font-size: var(--size-lead);
    max-inline-size: 38ch;
  }
  .ana-paula-cta-button {
    display: inline-flex;
    align-items: center;
    justify-content: space-between;
    gap: var(--space-4);
    margin-block-start: var(--space-4);
    inline-size: min(100%, 480px);
    padding-block: 1.1rem;
    padding-inline: 1.75rem;
    border-radius: 14px;
    border: 1px solid var(--accent);
    background: var(--accent);
    color: var(--bone);
    font-family: var(--font-serif);
    font-size: 1.15rem;
    cursor: pointer;
    transition: background 0.2s ease, border-color 0.2s ease, transform 0.2s ease;
  }
  .ana-paula-cta-button:hover,
  .ana-paula-cta-button:focus-visible {
    background: color-mix(in oklab, var(--accent) 82%, black);
    border-color: color-mix(in oklab, var(--accent) 82%, black);
    transform: translateY(-2px);
  }
  .ana-paula-cta-arrow {
    font-family: var(--font-sans);
    font-size: 1.1rem;
    transition: transform 0.2s ease;
  }
  .ana-paula-cta-button:hover .ana-paula-cta-arrow,
  .ana-paula-cta-button:focus-visible .ana-paula-cta-arrow {
    transform: translate(3px, -3px);
  }
  .ana-paula-cta-values {
    position: absolute;
    z-index: 1;
    inset-block-start: var(--space-4);
    inset-inline-end: var(--space-5);
    margin: 0;
    font-family: var(--font-sans);
    font-size: var(--size-small);
    letter-spacing: 0.14em;
    text-transform: uppercase;
    line-height: 1.9;
    text-align: end;
    color: var(--ink-muted-on-dark);
    opacity: 0.75;
  }
  .ana-paula-cta-seal {
    grid-column: 3;
    justify-self: end;
    inline-size: 6.5rem;
    aspect-ratio: 1;
    border-radius: 50%;
    border: 1px solid color-mix(in oklab, var(--brass) 55%, transparent);
    display: flex;
    align-items: center;
    justify-content: center;
    padding: var(--space-2);
  }
  .ana-paula-cta-seal img {
    inline-size: 100%;
    block-size: auto;
    opacity: 0.9;
  }
  .ana-paula-cta-footer {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: var(--space-4);
    max-inline-size: 1560px;
    margin-inline: auto;
    margin-block-start: var(--space-5);
    padding-inline: calc(var(--space-5) + var(--margin-inline));
  }
  .ana-paula-cta-signature,
  .ana-paula-cta-tagline {
    margin: 0;
    font-family: var(--font-sans);
    font-size: var(--size-small);
    letter-spacing: 0.14em;
    text-transform: uppercase;
    color: var(--ink-muted-on-dark);
    opacity: 0.7;
  }

  /* ---------- Footer ---------- */
  .site-footer {
    background: var(--surface-dark);
    border-block-start: 1px solid var(--line-on-dark);
  }
  .footer-inner {
    max-inline-size: 1560px;
    margin-inline: auto;
    padding: var(--space-4) var(--margin-inline);
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    justify-content: space-between;
    gap: var(--space-3);
  }
  .footer-wordmark {
    font-family: var(--font-serif);
    font-size: 1.0625rem;
    color: var(--bone);
  }
  .footer-inner nav ul {
    display: flex;
    gap: var(--space-3);
  }
  .footer-inner nav a {
    font-size: var(--size-small);
    color: var(--ink-muted-on-dark);
  }
  .footer-inner nav a:hover,
  .footer-inner nav a:focus-visible {
    color: var(--bone);
  }
  .footer-meta {
    font-size: var(--size-small);
    color: var(--ink-muted-on-dark);
  }

  /* ---------- Intro ---------- */
  html.intro-lock { overflow: hidden; }

  .intro {
    position: fixed;
    inset: 0;
    z-index: 9999;
    display: flex;
    align-items: center;
    justify-content: center;
    background: #000000;
    clip-path: polygon(0% 0%, 100% 0%, 100% 100%, 0% 100%);
  }
  .intro.is-done { display: none; }

  .intro-identity {
    display: flex;
    flex-direction: column;
    align-items: center;
  }
  .intro-mark {
    position: relative;
    inline-size: min(46vw, 260px);
    aspect-ratio: 1774 / 887;
  }
  .intro-monogram {
    display: block;
    inline-size: 100%;
    block-size: auto;
    opacity: 0;
  }
  .intro-sheen {
    position: absolute;
    inset: 0;
    background: linear-gradient(102deg, transparent 42%, rgb(255 255 255 / 0.5) 50%, transparent 58%);
    background-size: 260% 100%;
    background-position: 160% 0;
    background-repeat: no-repeat;
    mix-blend-mode: screen;
    -webkit-mask-image: url("assets/images/monograma-apr.png");
    mask-image: url("assets/images/monograma-apr.png");
    -webkit-mask-size: 100% auto;
    mask-size: 100% auto;
    -webkit-mask-repeat: no-repeat;
    mask-repeat: no-repeat;
    -webkit-mask-position: center;
    mask-position: center;
    opacity: 0;
    pointer-events: none;
  }
  .intro-name-mask {
    overflow: hidden;
    margin-block-start: var(--space-2);
  }
  .intro-name {
    margin: 0;
    font-family: var(--font-serif);
    font-style: italic;
    font-weight: 400;
    font-size: clamp(1.375rem, 1.1rem + 1.4vw, 1.875rem);
    letter-spacing: 0.02em;
    background-image: linear-gradient(
      120deg,
      #d9a06a 0%,
      #f6e3c4 12%,
      #eab98a 26%,
      #c97f4e 38%,
      #f2ddb8 52%,
      #8a4f2e 60%,
      #e0a878 72%,
      #f6e6c8 88%,
      #cf9163 100%
    );
    background-clip: text;
    -webkit-background-clip: text;
    color: transparent;
    -webkit-text-fill-color: transparent;
    transform: translateY(110%);
  }
  .intro-subtitle {
    margin: 0;
    margin-block-start: 0.6rem;
    font-family: var(--font-sans);
    font-size: 0.6875rem;
    letter-spacing: 0.28em;
    text-transform: uppercase;
    color: color-mix(in oklab, var(--terracotta) 75%, var(--bone));
    opacity: 0;
    transform: translateY(4px);
  }

  @media (prefers-reduced-motion: no-preference) {
    .intro {
      transition: clip-path 1.2s cubic-bezier(0.83, 0, 0.17, 1);
    }
    .intro.is-revealing {
      clip-path: polygon(0% -130%, 100% -170%, 100% -10%, 0% -50%);
    }
    .intro-monogram {
      transition: opacity 0.55s cubic-bezier(0.16, 1, 0.3, 1), transform 0.55s cubic-bezier(0.16, 1, 0.3, 1);
      transform: translateY(6px);
    }
    .intro.show-monogram .intro-monogram {
      opacity: 1;
      transform: translateY(0);
    }
    .intro.show-monogram .intro-sheen {
      animation: intro-sheen-sweep 0.9s ease-out 0.15s 1 both;
    }
    @keyframes intro-sheen-sweep {
      0% { opacity: 0; background-position: 160% 0; }
      18% { opacity: 1; }
      65% { opacity: 1; }
      100% { opacity: 0; background-position: -40% 0; }
    }
    .intro-name {
      transition: transform 0.55s cubic-bezier(0.16, 1, 0.3, 1);
    }
    .intro.show-name .intro-name {
      transform: translateY(0%);
    }
    .intro-subtitle {
      transition: opacity 0.5s ease, transform 0.5s cubic-bezier(0.16, 1, 0.3, 1);
    }
    .intro.show-subtitle .intro-subtitle {
      opacity: 1;
      transform: translateY(0);
    }
  }

  @media (prefers-reduced-motion: reduce) {
    .intro {
      transition: opacity 0.3s ease;
    }
    .intro.is-revealing {
      opacity: 0;
    }
  }
}

@layer motion {
  @media (prefers-reduced-motion: no-preference) {
    .hero-content > * {
      animation: rise 0.9s cubic-bezier(0.2, 0.7, 0.2, 1) both;
    }
    .hero-title { animation-delay: 0.15s; }
    .hero-lead { animation-delay: 0.35s; }
    .hero-actions { animation-delay: 0.5s; }
    .hero-caption {
      animation: fade-in 1s ease both;
      animation-delay: 0.6s;
    }
    .hero-figure img {
      animation: reveal-mask 1.1s cubic-bezier(0.2, 0.7, 0.2, 1) both;
    }
    .wordmark, .site-nav {
      animation: fade-in 0.8s ease both;
      animation-delay: 0.05s;
    }

    @keyframes rise {
      from { opacity: 0; translate: 0 1.25rem; }
      to { opacity: 1; translate: 0 0; }
    }
    @keyframes fade-in {
      from { opacity: 0; }
      to { opacity: 1; }
    }
    @keyframes reveal-mask {
      from { clip-path: inset(0 0 100% 0); }
      to { clip-path: inset(0 0 0 0); }
    }

    @supports ((animation-timeline: view()) and (animation-range: entry)) {
      .hero-figure {
        animation: hero-parallax linear both;
        animation-timeline: scroll(root block);
        animation-range: 0 60vh;
      }
      @keyframes hero-parallax {
        to { translate: 0 4%; }
      }

      .resultados-plates {
        animation: diptych-reveal linear both;
        animation-timeline: view();
        animation-range: entry 0% entry 55%;
      }
      @keyframes diptych-reveal {
        from { opacity: 0; scale: 0.97; }
        to { opacity: 1; scale: 1; }
      }

      .processo-hairline:first-of-type {
        animation: line-reveal-x 0.9s cubic-bezier(0.2, 0.7, 0.2, 1) both;
        animation-timeline: view();
        animation-range: entry 0% entry 35%;
      }
      .processo-intro .chapter-number {
        animation: fade-in 0.8s ease both;
        animation-timeline: view();
        animation-range: entry 5% entry 40%;
      }
      .processo-intro .section-title {
        animation: rise 0.9s cubic-bezier(0.2, 0.7, 0.2, 1) both;
        animation-timeline: view();
        animation-range: entry 8% entry 45%;
      }
      .processo-text {
        animation: fade-in 0.8s ease both;
        animation-timeline: view();
        animation-range: entry 12% entry 48%;
      }
      .processo-hairline:last-of-type {
        animation: line-reveal-x 0.9s cubic-bezier(0.2, 0.7, 0.2, 1) both;
        animation-timeline: view();
        animation-range: entry 16% entry 52%;
      }
      .processo-editorial {
        animation: fade-in 0.9s ease both;
        animation-timeline: view();
        animation-range: entry 20% entry 56%;
      }
      .processo-values, .processo-footer {
        animation: fade-in 0.9s ease both;
        animation-timeline: view();
        animation-range: entry 24% entry 60%;
      }
      .processo-photo {
        animation: fade-in 1.2s ease both;
        animation-timeline: view();
        animation-range: entry 0% entry 55%;
      }
      .processo-arc {
        animation: processo-arc-reveal 1.3s ease both;
        animation-timeline: view();
        animation-range: entry 5% entry 60%;
      }
      @keyframes line-reveal-x {
        from { transform: scaleX(0); }
        to { transform: scaleX(1); }
      }
      @keyframes processo-arc-reveal {
        from { opacity: 0; }
        to { opacity: 0.22; }
      }

      .ana-paula-cta-card {
        animation: diptych-reveal 1s cubic-bezier(0.2, 0.7, 0.2, 1) both;
        animation-timeline: view();
        animation-range: entry 0% entry 45%;
      }
      .ana-paula-cta-photo {
        animation: fade-in 1s ease both;
        animation-timeline: view();
        animation-range: entry 5% entry 45%;
      }
      .ana-paula-cta-kicker {
        animation: fade-in 0.9s ease both;
        animation-timeline: view();
        animation-range: entry 10% entry 45%;
      }
      .ana-paula-cta-content .chapter-number {
        animation: fade-in 0.8s ease both;
        animation-timeline: view();
        animation-range: entry 12% entry 45%;
      }
      .ana-paula-cta-title {
        animation: rise 0.9s cubic-bezier(0.2, 0.7, 0.2, 1) both;
        animation-timeline: view();
        animation-range: entry 15% entry 48%;
      }
      .ana-paula-cta-text {
        animation: fade-in 0.9s ease both;
        animation-timeline: view();
        animation-range: entry 18% entry 50%;
      }
      .ana-paula-cta-button {
        animation: fade-in 0.9s ease both;
        animation-timeline: view();
        animation-range: entry 20% entry 52%;
      }
      .ana-paula-cta-values {
        animation: fade-in 1s ease both;
        animation-timeline: view();
        animation-range: entry 15% entry 50%;
      }
      .ana-paula-cta-seal {
        animation: diptych-reveal 1.1s cubic-bezier(0.2, 0.7, 0.2, 1) both;
        animation-timeline: view();
        animation-range: entry 20% entry 55%;
      }
    }

    @supports not ((animation-timeline: view()) and (animation-range: entry)) {
      [data-reveal] {
        opacity: 0;
        scale: 0.97;
        transition: opacity 0.8s ease, scale 0.8s ease;
      }
      [data-reveal].is-revealed {
        opacity: 1;
        scale: 1;
      }
    }
  }

  @media (prefers-reduced-motion: reduce) {
    .hero-content > *, .hero-figure img, .hero-caption, .wordmark, .site-nav {
      animation: none;
    }
    .processo-hairline, .processo-intro .chapter-number, .processo-intro .section-title,
    .processo-text, .processo-editorial, .processo-values, .processo-footer,
    .processo-photo, .processo-arc {
      animation: none;
    }
    .ana-paula-cta-card, .ana-paula-cta-photo, .ana-paula-cta-kicker,
    .ana-paula-cta-content .chapter-number, .ana-paula-cta-title, .ana-paula-cta-text,
    .ana-paula-cta-button, .ana-paula-cta-values, .ana-paula-cta-seal {
      animation: none;
    }
  }
}

/* ---------- Responsive ---------- */

/* Entre ~781px e ~1130px (colunas lado a lado) a galeria fica mais baixa
   que o bloco de texto novo; comprime para não aumentar a altura da seção.
   Abaixo de 781px o layout empilha (ver breakpoint de 780px) e a altura
   extra deixa de ser um problema, então o intervalo fica limitado aqui. */
@media (max-width: 1130px) and (min-width: 781px) {
  .resultados-divider { margin-block-start: var(--space-2); }
  .resultados-editorial { margin-block-start: var(--space-1); }
  .resultados-values { display: none; }
}

@media (max-width: 1024px) {
  .hero-content { max-inline-size: 32rem; }
  /* .processo mantém aspect-ratio travado no asset (sem corte na foto), então
     sua altura encolhe mais rápido que o texto — comprime o texto para caber. */
  .processo-hairline { margin-block-end: var(--space-2); }
  .processo-editorial { margin-block-start: var(--space-2); }
  .processo-values { margin-block-start: var(--space-3); }
  .processo-footer { margin-block-start: var(--space-3); }
}

@media (max-width: 780px) {
  .hero-title { font-size: 2.25rem; }
  .nav-toggle {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    inline-size: 44px;
    block-size: 44px;
    min-block-size: 0;
    padding: 0;
    border-radius: 50%;
    background: var(--accent);
    flex-shrink: 0;
  }
  .nav-toggle-bars {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 4px;
  }
  .nav-toggle-bars span {
    display: block;
    inline-size: 17px;
    block-size: 1.5px;
    border-radius: 1px;
    background: var(--bone);
  }

  .nav-overlay {
    display: block;
    position: fixed;
    inset: 0;
    z-index: 14;
    background: rgb(0 0 0 / 0.55);
    opacity: 0;
    pointer-events: none;
    transition: opacity 0.35s ease;
  }
  .nav-overlay.is-open {
    opacity: 1;
    pointer-events: auto;
  }

  .nav-close {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    align-self: flex-end;
    inline-size: 40px;
    block-size: 40px;
    flex-shrink: 0;
    margin-block-end: var(--space-3);
    border-radius: 50%;
    border: 1px solid var(--line-on-dark);
    background: none;
    color: var(--bone);
    font-family: var(--font-sans);
    font-size: 1.5rem;
    line-height: 1;
  }

  .site-nav {
    position: fixed;
    inset-block: 0;
    inset-inline-end: 0;
    z-index: 15;
    inline-size: min(86vw, 380px);
    max-inline-size: 100vw;
    flex-direction: column;
    align-items: stretch;
    justify-content: flex-start;
    gap: 0;
    padding: var(--space-4) var(--margin-inline) var(--space-5);
    background: var(--black);
    border-inline-start: 1px solid var(--line-on-dark);
    box-shadow: -24px 0 60px rgb(0 0 0 / 0.35);
    transform: translateX(100%);
    transition: transform 0.4s cubic-bezier(0.22, 1, 0.36, 1);
    overflow-y: auto;
  }
  .site-nav.is-open { transform: translateX(0); }

  .nav-links {
    flex-direction: column;
    align-items: flex-start;
    gap: var(--space-3);
    margin-block-start: var(--space-4);
  }
  .nav-links a { font-size: 1.5rem; font-family: var(--font-serif); }
  .nav-links-marcacao { display: none; }

  .site-nav .button-fill {
    margin-block-start: var(--space-4);
    padding-block: var(--space-3) 0;
    padding-inline: 0;
    border: none;
    border-block-start: 1px solid color-mix(in oklab, var(--brass) 45%, transparent);
    border-radius: 0;
    background: none;
    color: var(--accent);
    font-family: var(--font-serif);
    font-style: italic;
    font-size: 1.5rem;
    block-size: auto;
    min-block-size: 0;
    inline-size: 100%;
    justify-content: flex-start;
  }
  .site-nav .button-fill:hover,
  .site-nav .button-fill:focus-visible {
    background: none;
    color: color-mix(in oklab, var(--accent) 82%, var(--bone));
  }

  @media (prefers-reduced-motion: no-preference) {
    .nav-links li,
    .site-nav .button-fill {
      opacity: 0;
      translate: 16px 0;
      transition: opacity 0.3s ease, translate 0.3s ease;
    }
    .site-nav.is-open .nav-links li,
    .site-nav.is-open .button-fill {
      opacity: 1;
      translate: 0 0;
    }
    .nav-links li:nth-child(1) { transition-delay: 0.1s; }
    .nav-links li:nth-child(2) { transition-delay: 0.16s; }
    .nav-links li:nth-child(3) { transition-delay: 0.22s; }
    .site-nav.is-open .button-fill { transition-delay: 0.28s; }
  }

  .hero {
    flex-direction: column;
    align-items: stretch;
    min-block-size: 100dvh;
  }
  .hero-sidelabel { display: none; }
  .hero-credential {
    position: static;
    order: 1;
    inset: auto;
    margin-block-start: var(--space-3);
    padding-inline-start: var(--margin-inline);
    padding-inline-end: var(--margin-inline);
    white-space: normal;
  }
  .hero-figure {
    position: relative;
    inset: auto;
    inline-size: 100%;
    block-size: 60vh;
    flex-shrink: 0;
    order: 2;
    -webkit-mask-image: none;
    mask-image: none;
  }
  .hero-figure img { object-position: 50% 15%; }
  .hero-content {
    order: 1;
    margin-inline-start: 0;
    max-inline-size: none;
    padding-inline-end: var(--margin-inline);
    padding-block: var(--space-6) var(--space-3);
  }
  .hero {
    background-position: 96% 46%;
  }
  .hero::after {
    background: linear-gradient(
      to bottom,
      rgb(0 0 0 / 0.7) 0%,
      rgb(0 0 0 / 0.5) 40%,
      transparent 62%
    );
  }

  .especialidades {
    padding-block: var(--space-5) var(--space-2);
  }
  .especialidades .section-title {
    font-size: clamp(1.75rem, 1.4rem + 2vw, 2.25rem);
  }
  .especialidades-inner {
    padding-block-end: 0;
  }
  .specialty-index {
    margin-block-start: var(--space-2);
  }
  .specialty-item {
    display: flex;
    flex-direction: column;
    align-items: stretch;
    min-block-size: auto;
    background-image: none;
    padding-block: 0;
  }
  .specialty-row {
    display: flex;
    align-items: flex-start;
    justify-content: space-between;
    gap: var(--space-2);
    padding-inline: var(--margin-inline);
    padding-block-start: var(--space-2);
  }
  .specialty-copy {
    padding-inline-start: 0;
    max-inline-size: none;
    flex: 1 1 auto;
    min-inline-size: 0;
  }
  .specialty-name {
    font-size: 1.25rem;
    overflow-wrap: break-word;
    hyphens: auto;
  }
  .specialty-desc {
    font-size: 0.8125rem;
  }
  .specialty-microtext {
    display: block;
    flex: 0 0 auto;
    inline-size: 6.5rem;
    margin-block-start: 0.3rem;
    padding-inline-start: var(--space-2);
    border-inline-start: 1px solid color-mix(in oklab, var(--brass) 55%, transparent);
    font-family: var(--font-sans);
    font-size: 0.625rem;
    line-height: 1.6;
    letter-spacing: 0.14em;
    text-transform: uppercase;
    color: var(--ink-muted-on-dark);
    opacity: 0.62;
  }
  .specialty-item::after {
    content: "";
    display: block;
    inline-size: 100%;
    block-size: clamp(70px, 20vw, 100px);
    margin-block-start: var(--space-2);
    background-repeat: no-repeat;
    background-size: cover;
    -webkit-mask-image: linear-gradient(to bottom, transparent 0%, black 14%, black 86%, transparent 100%);
    mask-image: linear-gradient(to bottom, transparent 0%, black 14%, black 86%, transparent 100%);
  }
  .specialty-item--sobrancelhas::after {
    background-image: url("assets/images/sobrancelhasssss.png");
    background-position: center 50%;
  }
  .specialty-item--micropigmentacao::before {
    content: none;
  }
  .specialty-item--micropigmentacao::after {
    background-image: url("assets/images/micro.png");
    background-position: center 28%;
  }
  .specialty-item--cilios::before {
    content: none;
  }
  .specialty-item--cilios::after {
    background-image: url("assets/images/ciliosssssss.png");
    background-position: center 42%;
  }

  .resultados-grid { display: block; }
  .resultados-intro { padding-inline-end: 0; }
  .resultados-divider,
  .resultados-editorial,
  .resultados-values {
    display: none;
  }
  .resultados-plates {
    inline-size: 100%;
    justify-self: auto;
    margin-block-start: var(--space-3);
  }

  .processo {
    display: block;
    aspect-ratio: auto;
  }
  .processo-arc {
    inset-block-start: -8%;
    inset-inline-start: -18%;
    inline-size: 62%;
  }
  .processo-inner { padding-inline: var(--margin-inline); }
  .processo-intro {
    max-inline-size: none;
    padding-block: var(--space-6) var(--space-7);
  }
  .processo-photo {
    background-image:
      linear-gradient(
        to bottom,
        var(--black-soft) 0%,
        color-mix(in oklab, var(--black-soft) 94%, transparent) 28%,
        color-mix(in oklab, var(--black-soft) 85%, transparent) 46%,
        color-mix(in oklab, var(--black-soft) 74%, transparent) 62%,
        color-mix(in oklab, var(--black-soft) 60%, transparent) 76%,
        color-mix(in oklab, var(--black-soft) 20%, transparent) 90%,
        transparent 100%
      ),
      url("assets/images/imagesprocessobg.png");
    background-repeat: no-repeat, no-repeat;
    background-size: auto, auto 100%;
    background-position: center, 85% 0%;
  }

  .ana-paula-cta-card {
    grid-template-columns: 1fr;
    row-gap: var(--space-4);
    margin-inline: var(--margin-inline);
    padding-inline: var(--space-4);
    padding-block: var(--space-5);
    border-radius: 20px;
  }
  .ana-paula-cta-photo {
    position: relative;
    inset: auto;
    grid-column: 1;
    grid-row: 1;
    justify-self: center;
    inline-size: auto;
    block-size: 340px;
  }
  .ana-paula-cta-kicker {
    position: static;
    margin-block-start: var(--space-3);
    text-align: center;
  }
  .ana-paula-cta-content {
    grid-column: 1;
    grid-row: 2;
    text-align: center;
  }
  .ana-paula-cta-content .chapter-number { justify-content: center; }
  .ana-paula-cta-title {
    font-size: clamp(1.375rem, 1rem + 3vw, 1.875rem);
  }
  .ana-paula-cta-text { margin-inline: auto; }
  .ana-paula-cta-button {
    margin-inline: auto;
    justify-content: center;
  }
  .ana-paula-cta-arrow {
    display: none;
  }
  .ana-paula-cta-values {
    position: static;
    grid-column: 1;
    grid-row: 3;
    text-align: center;
    margin-block-start: var(--space-2);
  }
  .ana-paula-cta-seal {
    grid-column: 1;
    grid-row: 4;
    justify-self: center;
    margin-block-start: var(--space-2);
  }
  .ana-paula-cta-footer {
    flex-direction: column;
    align-items: center;
    text-align: center;
    gap: var(--space-2);
    padding-inline: var(--margin-inline);
  }

  .footer-inner { flex-direction: column; align-items: flex-start; }

  @media (prefers-reduced-motion: no-preference) {
    @supports ((animation-timeline: view()) and (animation-range: entry)) {
      .processo-photo {
        animation: processo-photo-reveal-mobile 1.3s ease both;
        animation-timeline: view();
        animation-range: entry 0% entry 65%;
      }
      .processo-arc {
        animation: processo-arc-reveal 1.3s ease both;
        animation-timeline: view();
        animation-range: entry 5% entry 55%;
      }
      @keyframes processo-photo-reveal-mobile {
        from { opacity: 0; scale: 1.06; }
        to { opacity: 1; scale: 1; }
      }
    }
  }
  @media (prefers-reduced-motion: reduce) {
    .processo-photo, .processo-arc { animation: none; }
  }
}

/* Abaixo de ~560px, duas colunas deixam ANTES/DEPOIS ilegível — empilha em 1 coluna. */
@media (max-width: 560px) {
  .resultados-plates {
    display: flex;
    flex-direction: column;
    gap: var(--space-3);
  }
  .resultados-col { inline-size: 100%; }
}