:root {
  --whatsapp: #25D366;
  --whatsapp-deep: #1EBE5D;
  --bordeaux: #B10000;
  --wine: #270202;
  --paper: #F8F2F1;
  --blush: #F5E5E5;
  --rose: #E9B9B9;
  --graphite: #171316;
  --copper: #E14747;
  --display: "Cormorant Garamond", Didot, Georgia, serif;
  --body: "Manrope", "Avenir Next", sans-serif;
  --mono: "IBM Plex Mono", Menlo, monospace;
  --page: clamp(1.25rem, 4vw, 4.5rem);
  --ease: cubic-bezier(0.22, 1, 0.36, 1);
}

* { box-sizing: border-box; }
html { scroll-behavior: smooth; }
[id] { scroll-margin-top: 5rem; }
body { margin: 0; color: var(--graphite); background: var(--paper); font-family: var(--body); -webkit-font-smoothing: antialiased; overflow-x: hidden; }
body.is-locked { overflow: hidden; }
button, a { -webkit-tap-highlight-color: transparent; }
button { color: inherit; font: inherit; }
a { color: inherit; text-decoration: none; }
img { display: block; max-width: 100%; }
svg { fill: none; stroke: currentColor; stroke-width: 1.7; stroke-linecap: round; stroke-linejoin: round; }
.skip-link { position: fixed; top: 0; left: 1rem; z-index: 200; padding: .8rem 1rem; background: var(--paper); transform: translateY(-110%); }
.skip-link:focus { transform: translateY(0); }
.page-grid { padding-inline: var(--page); }
.section { padding-block: clamp(5rem, 10vw, 10rem); }
.eyebrow { margin: 0 0 1.1rem; color: var(--bordeaux); font: 500 .7rem/1.3 var(--mono); letter-spacing: .14em; text-transform: uppercase; }
.eyebrow.light { color: var(--rose); }
h1, h2, h3, p { margin-top: 0; }
h1, h2, h3 { font-family: var(--display); font-weight: 500; letter-spacing: -.045em; }
h1 em, h2 em { font-weight: 500; }
h2 { margin-bottom: 0; font-size: clamp(3rem, 8vw, 7rem); line-height: .84; }
p { line-height: 1.75; }

.site-header { position: fixed; inset: 0 0 auto; z-index: 100; display: grid; grid-template-columns: 1fr auto; align-items: center; height: 5.6rem; padding: .6rem var(--page); color: var(--paper); transition: background .45s ease, height .45s var(--ease), color .3s ease; }
.site-header.is-scrolled { height: 4.6rem; color: var(--wine); background: color-mix(in srgb, var(--paper) 94%, transparent); border-bottom: 1px solid rgba(36,17,24,.11); backdrop-filter: blur(16px); }
.brand { position: relative; z-index: 2; width: 12.5rem; align-self: stretch;
  display: flex; align-items: center; overflow: hidden; }
.brand img { width: 100%; height: 100%; object-fit: contain; object-position: left center; }
.brand-escuro { display: none; }
.site-header.is-scrolled .brand-claro { display: none; }
.site-header.is-scrolled .brand-escuro { display: block; }
.desktop-nav, .header-contact { display: none; }
.menu-toggle { position: relative; z-index: 2; width: 2.75rem; height: 2.75rem; padding: 0; border: 0; background: transparent; cursor: pointer; }
.menu-toggle span { position: absolute; left: .55rem; width: 1.65rem; height: 1px; background: currentColor; transition: transform .35s var(--ease), top .35s var(--ease); }
.menu-toggle span:first-child { top: 1.08rem; }
.menu-toggle span:last-child { top: 1.62rem; }
.menu-toggle[aria-expanded="true"] span:first-child { top: 1.35rem; transform: rotate(45deg); }
.menu-toggle[aria-expanded="true"] span:last-child { top: 1.35rem; transform: rotate(-45deg); }
.mobile-menu { position: fixed; inset: 0; display: flex; flex-direction: column; justify-content: center; gap: 3rem; padding: 7rem var(--page) 3rem; color: var(--paper); background: var(--wine); opacity: 0; visibility: hidden; transform: translateY(-1rem); transition: opacity .35s ease, transform .45s var(--ease), visibility .35s; }
.mobile-menu.is-open { opacity: 1; visibility: visible; transform: none; }
.mobile-menu nav { display: flex; flex-direction: column; }
.mobile-menu nav a { padding: .28rem 0; font: 500 clamp(2.8rem, 14vw, 4.4rem)/1 var(--display); }
.mobile-menu p { color: var(--rose); font: 400 .72rem/1.7 var(--mono); letter-spacing: .1em; text-transform: uppercase; }

.hero { position: relative; min-height: max(50rem, 100svh); color: var(--paper); background: var(--wine); overflow: hidden; }
.hero-photo { position: absolute; inset: 0; background: url("./assets/images/hero-retrato.webp") center 14% / cover no-repeat; transform: scale(1.02); animation: heroBreath 12s ease-in-out infinite alternate; }
.hero-wash { position: absolute; inset: 0; background: linear-gradient(180deg, rgba(36,17,24,.06) 16%, rgba(36,17,24,.2) 48%, rgba(36,17,24,.96) 100%), linear-gradient(90deg, rgba(36,17,24,.42), transparent 70%); }
.hero-content { position: relative; z-index: 1; display: flex; flex-direction: column; justify-content: flex-end; min-height: max(50rem, 100svh); padding-top: 8rem; padding-bottom: 7rem; }
.hero-copy { max-width: 40rem; }
.hero h1 { margin-bottom: 1.5rem; font-size: clamp(4.25rem, 17vw, 7rem); line-height: .78; }
.hero h1 em { display: inline-block; color: var(--rose); }
.hero-intro { max-width: 35rem; margin-bottom: 1.75rem; color: rgba(247,241,235,.82); font-size: .94rem; }
.hero-actions { display: flex; flex-wrap: wrap; align-items: center; gap: 1.25rem; }
.button { min-height: 3.4rem; display: inline-flex; align-items: center; justify-content: center; gap: .75rem; padding: .8rem 1.25rem; border: 1px solid transparent; border-radius: 0; font: 600 .68rem/1 var(--mono); letter-spacing: .08em; text-transform: uppercase; cursor: pointer; transition: transform .3s var(--ease), color .3s, background .3s; }
.button:hover { transform: translateY(-3px); }
.button svg { width: 1.15rem; }
.button-paper { color: var(--wine); background: var(--paper); }
.button-paper:hover { color: var(--paper); background: var(--bordeaux); }
.button-bordeaux { color: var(--paper); background: var(--bordeaux); }
.button-whatsapp { color: #FFFFFF; background: var(--whatsapp); }
.button-whatsapp:hover { background: var(--whatsapp-deep); }
.button-bordeaux:hover { background: var(--wine); }
.text-link { display: inline-flex; align-items: center; gap: .7rem; padding: .6rem 0; border: 0; border-bottom: 1px solid currentColor; background: transparent; font: 600 .68rem/1 var(--mono); letter-spacing: .08em; text-transform: uppercase; cursor: pointer; }
.text-link svg { width: 1rem; transition: transform .3s var(--ease); }
.text-link:hover svg { transform: translateX(.35rem); }
.text-link.light { color: var(--paper); }
.hero-credit { display: none; }
.scroll-cue { position: absolute; z-index: 2; bottom: 1.5rem; left: var(--page); display: flex; align-items: center; gap: .65rem; color: rgba(247,241,235,.68); font: 400 .58rem/1 var(--mono); letter-spacing: .1em; text-transform: uppercase; }
.scroll-cue span { width: 2.25rem; height: 1px; background: currentColor; transform-origin: left; animation: cue 2s ease-in-out infinite; }

.role-marquee { overflow: hidden; padding: 1rem 0; color: var(--paper); background: var(--bordeaux); }
.marquee-track { width: max-content; display: flex; align-items: center; gap: 1.3rem; animation: marquee 28s linear infinite; }
.marquee-track span { font: 500 .7rem/1 var(--mono); letter-spacing: .12em; text-transform: uppercase; }
.marquee-track i { width: .35rem; height: .35rem; background: var(--rose); transform: rotate(45deg); }

.section-heading { display: grid; gap: 2.25rem; margin-bottom: 3rem; }
.section-heading h2 { max-width: 52rem; }
.section-sidecopy { align-self: end; max-width: 25rem; color: rgba(23,19,22,.66); font-size: .85rem; }
.carousel-controls { display: flex; gap: .5rem; margin-top: 1.5rem; }
.carousel-controls button { width: 3rem; height: 3rem; border: 1px solid rgba(23,19,22,.2); background: transparent; cursor: pointer; transition: color .3s, background .3s; }
.carousel-controls button:hover { color: var(--paper); background: var(--bordeaux); }
.carousel-controls svg { width: 1.25rem; }

.showreel { position: relative; min-height: 48rem; color: var(--paper); background: var(--wine); overflow: hidden; }
.showreel-image, .showreel-overlay { position: absolute; inset: 0; }
.showreel-image { background: url("./assets/images/scene.webp") center / cover no-repeat; filter: grayscale(100%); }
.showreel-overlay { background: linear-gradient(180deg, rgba(36,17,24,.2), rgba(36,17,24,.85)), linear-gradient(90deg, rgba(36,17,24,.8), transparent); }
.showreel-content { position: relative; z-index: 1; min-height: 48rem; display: flex; flex-direction: column; justify-content: center; padding-block: 6rem; }
.showreel h2 { max-width: 60rem; }
.showreel h2 em { color: var(--rose); }
.play-button { display: inline-flex; width: fit-content; align-items: center; gap: .9rem; margin-top: 2.5rem; padding: 0; border: 0; color: var(--paper); background: transparent; cursor: pointer; }
.play-button span { width: 4.25rem; height: 4.25rem; display: grid; place-items: center; border: 1px solid rgba(247,241,235,.5); border-radius: 50%; transition: color .3s, background .3s, transform .4s var(--ease); }
.play-button:hover span { color: var(--wine); background: var(--paper); transform: scale(1.08); }
.play-button svg { width: 1.5rem; }
.play-button b { font: 500 .65rem/1 var(--mono); letter-spacing: .1em; text-transform: uppercase; }
.showreel-index { display: none; }

.about-layout { display: grid; gap: 4rem; }
.about-portrait { position: relative; }
.portrait-frame { position: relative; width: min(86%, 31rem); margin-left: auto; }
.portrait-frame::before { content: ""; position: absolute; inset: -1.2rem auto auto -1.2rem; width: 45%; height: 50%; background: var(--rose); }
.portrait-frame img { position: relative; z-index: 1; width: 100%; height: auto; aspect-ratio: 4 / 5; object-fit: cover; object-position: center 16%; filter: grayscale(100%); }
.photo-caption { position: absolute; z-index: 2; bottom: 1rem; left: -2rem; padding: .65rem .8rem; color: var(--paper); background: var(--bordeaux); font: 400 .55rem/1 var(--mono); letter-spacing: .08em; text-transform: uppercase; }
.portrait-orbit { display: none; }
.about-copy { max-width: 41rem; }
.about-copy h2 { margin-bottom: 2rem; font-size: clamp(3.5rem, 10vw, 6.7rem); }
.about-copy h2 em { color: var(--bordeaux); }
.about-lead { color: var(--wine); font: 500 clamp(1.2rem, 3vw, 1.55rem)/1.55 var(--display); }
.about-copy > p:not(.eyebrow):not(.about-lead) { color: rgba(23,19,22,.68); font-size: .91rem; }

.career { padding-block: clamp(5rem, 10vw, 9rem); color: var(--paper); background: var(--wine); }
.career-intro { margin-bottom: 4rem; }
.career-intro h2 em { color: var(--rose); }
.career-list { border-top: 1px solid rgba(247,241,235,.2); }
.career-item { display: grid; grid-template-columns: 2.5rem 1fr; gap: .5rem; align-items: center; padding: 1.6rem 0; border-bottom: 1px solid rgba(247,241,235,.2); transition: color .35s, padding .35s var(--ease), background .35s; }
.career-item span { color: var(--rose); font: 400 .58rem/1 var(--mono); }
.career-item h3 { margin: 0; font-size: 2.2rem; }
.career-item p, .career-item i { grid-column: 2; margin: 0; color: rgba(247,241,235,.55); font: 400 .65rem/1.4 var(--mono); font-style: normal; }
.career-item i { display: none; text-transform: uppercase; letter-spacing: .1em; }

.gallery { background: #eee3dd; }
.gallery-rail { display: grid; grid-auto-flow: column; grid-auto-columns: min(74vw, 24rem); align-items: center; gap: 1rem; padding: 0 var(--page) 1rem; overflow-x: auto; scroll-snap-type: x proximity; scrollbar-width: none; }
.gallery-item { position: relative; height: 31rem; margin: 0; overflow: hidden; scroll-snap-align: center; }
.gallery-item.short { height: 25rem; }
.gallery-item img { width: 100%; height: 100%; object-fit: cover; filter: grayscale(100%) contrast(1.02); transition: filter .6s, transform .8s var(--ease); }
.gallery-item:hover img { filter: grayscale(0); transform: scale(1.03); }
.gallery-item figcaption { position: absolute; right: .75rem; bottom: .75rem; padding: .55rem .65rem; color: var(--paper); background: rgba(36,17,24,.85); font: 400 .55rem/1 var(--mono); letter-spacing: .08em; text-transform: uppercase; }

.press-section { position: relative; padding-block: clamp(6rem, 12vw, 11rem) 2rem; color: var(--paper); background: var(--bordeaux); overflow: hidden; }
.press-section::before { content: "PRESS"; position: absolute; top: -2vw; left: -1vw; color: rgba(247,241,235,.035); font: 600 34vw/.65 var(--display); }
.press-layout { position: relative; display: grid; gap: 5rem; align-items: center; }
.press-copy { position: relative; z-index: 2; }
.press-copy h2 { margin-bottom: 2rem; }
.press-copy h2 em { color: var(--rose); }
.press-copy p:not(.eyebrow) { max-width: 42rem; color: rgba(247,241,235,.75); font-size: .9rem; }
.press-copy .button { margin-top: 1rem; }
.press-visual { position: relative; min-height: 33rem; perspective: 1200px; }
.dossier { position: absolute; width: min(78vw, 22rem); aspect-ratio: .72; border: 1px solid rgba(247,241,235,.25); box-shadow: 0 3rem 5rem rgba(36,17,24,.24); }
.dossier-back { top: 1.5rem; left: 8%; display: grid; place-items: center; color: var(--rose); background: var(--wine); transform: rotate(-8deg); font: 500 .7rem/1 var(--mono); letter-spacing: .16em; }
.dossier-front { top: 0; right: 4%; padding: 1rem; color: var(--wine); background: var(--paper); transform: rotate(5deg); transition: transform .7s var(--ease); }
.press-visual:hover .dossier-front { transform: rotate(1deg) translateY(-.75rem); }
.dossier-top, .dossier-footer { display: flex; justify-content: space-between; font: 500 .48rem/1 var(--mono); letter-spacing: .11em; text-transform: uppercase; }
.dossier-front img { width: 100%; height: 54%; margin: 1rem 0; object-fit: cover; object-position: center 18%; filter: grayscale(100%); }
.dossier-title { font: 500 3.4rem/.73 var(--display); letter-spacing: -.05em; }
.dossier-title em { color: var(--bordeaux); }
.dossier-footer { position: absolute; right: 1rem; bottom: 1.2rem; left: 1rem; gap: .5rem; }
.press-stamp { position: absolute; z-index: 3; right: 0; bottom: 1rem; width: 6.2rem; height: 6.2rem; display: grid; place-items: center; border: 1px solid var(--rose); border-radius: 50%; color: var(--rose); text-align: center; font: 500 .52rem/1.35 var(--mono); letter-spacing: .08em; text-transform: uppercase; transform: rotate(-12deg); }
.press-features { position: relative; display: grid; margin-top: 5rem; padding-top: 1.5rem; border-top: 1px solid rgba(247,241,235,.25); }
.press-features span { padding: .85rem 0; border-bottom: 1px solid rgba(247,241,235,.14); font: 400 .6rem/1 var(--mono); letter-spacing: .08em; text-transform: uppercase; }

.contact-layout { display: grid; gap: 4rem; }
.contact h2 em { color: var(--bordeaux); }
.contact-card { align-self: end; max-width: 34rem; padding-top: 1.5rem; border-top: 1px solid rgba(23,19,22,.22); }
.contact-card > p { color: rgba(23,19,22,.62); font-size: .82rem; }
.contact-card > a { display: inline-block; margin: .4rem 0 2rem; font: 500 clamp(1.2rem, 3vw, 1.7rem)/1.3 var(--display); border-bottom: 1px solid currentColor; }
.social-row { display: flex; flex-wrap: wrap; gap: 1rem; margin-top: 2.5rem; }
.social-row a, .social-row span { font: 500 .6rem/1 var(--mono); letter-spacing: .08em; text-transform: uppercase; }
.social-row span { opacity: .42; }

.site-footer { padding-top: 5rem; color: var(--paper); background: var(--wine); }
.footer-mark { display: grid; place-items: center; padding: 0 var(--page) 4rem; }
.footer-mark img { width: min(78vw, 38rem); }
.footer-bottom { display: flex; flex-direction: column; gap: 1rem; padding-block: 1.5rem; border-top: 1px solid rgba(247,241,235,.16); color: rgba(247,241,235,.55); font: 400 .55rem/1 var(--mono); letter-spacing: .08em; text-transform: uppercase; }

.whatsapp-float { position: fixed; z-index: 90; right: 1rem; bottom: 1rem; display: flex; align-items: center; gap: .6rem; height: 3.5rem; padding: 0 1rem; border: 0; border-radius: 2rem; color: #FFFFFF; background: var(--whatsapp); box-shadow: 0 .75rem 2rem rgba(37,211,102,.34); cursor: pointer; transition: transform .3s var(--ease), background .3s; }
.whatsapp-float:hover { background: var(--whatsapp-deep); transform: translateY(-4px); }
.whatsapp-float svg { width: 1.35rem; fill: currentColor; stroke: none; }
.whatsapp-float span { display: none; font: 500 .58rem/1 var(--mono); letter-spacing: .08em; text-transform: uppercase; }

dialog { max-width: none; max-height: none; margin: 0; border: 0; padding: 0; color: inherit; }
dialog::backdrop { background: rgba(36,17,24,.8); backdrop-filter: blur(10px); }
.dialog-close { width: 3rem; height: 3rem; border: 1px solid currentColor; border-radius: 50%; color: inherit; background: transparent; font-size: 1.4rem; cursor: pointer; transition: transform .3s; }
.dialog-close:hover { transform: rotate(90deg); }
.media-dialog { inset: 0; width: 100%; height: 100%; color: var(--paper); background: var(--wine); }
.media-dialog .dialog-close { position: absolute; z-index: 2; top: 1.25rem; right: 1.25rem; }
.video-placeholder { width: 100%; height: 100%; display: flex; flex-direction: column; align-items: center; justify-content: center; padding: 2rem; text-align: center; background: radial-gradient(circle at 50% 40%, rgba(122,24,53,.52), transparent 36%), var(--wine); }
.video-placeholder > span { color: var(--rose); font: 500 .6rem/1 var(--mono); letter-spacing: .14em; }
.video-placeholder svg { width: 5rem; margin: 3rem 0; color: var(--rose); }
.video-placeholder h2 { max-width: 50rem; font-size: clamp(3rem, 8vw, 6rem); }
.video-placeholder p { max-width: 28rem; color: rgba(247,241,235,.65); font-size: .84rem; }
.press-dialog { inset: 0; width: 100%; height: 100%; color: var(--wine); background: var(--paper); }
.press-dialog-top { height: 5rem; display: flex; align-items: center; justify-content: space-between; padding: .75rem var(--page); border-bottom: 1px solid rgba(36,17,24,.16); }
.press-dialog-top > div { display: flex; flex-direction: column; gap: .3rem; font: 500 .55rem/1 var(--mono); letter-spacing: .09em; }
.press-dialog-top span { color: var(--bordeaux); }
.press-dialog-layout { min-height: calc(100% - 5rem); display: grid; }
.press-tabs { display: grid; align-content: start; border-bottom: 1px solid rgba(36,17,24,.16); }
.press-tabs button { padding: 1.1rem var(--page); border: 0; border-bottom: 1px solid rgba(36,17,24,.1); text-align: left; background: transparent; font: 500 .63rem/1 var(--mono); letter-spacing: .08em; cursor: pointer; }
.press-tabs button.is-active { color: var(--paper); background: var(--bordeaux); }
.press-panels { padding: 3rem var(--page); overflow-y: auto; }
.press-panel { display: none; animation: panelIn .45s var(--ease); }
.press-panel.is-active { display: block; }
.press-panel h2 { max-width: 48rem; margin-bottom: 3rem; font-size: clamp(2.7rem, 8vw, 5.5rem); }
.bio-options { display: grid; gap: 1rem; }
.bio-options article { padding: 1.5rem; border: 1px solid rgba(36,17,24,.15); }
.bio-options span { font: 500 .58rem/1 var(--mono); letter-spacing: .08em; text-transform: uppercase; }
.bio-options p { margin: 1.5rem 0; color: rgba(36,17,24,.7); font-size: .84rem; }
.bio-options button { padding: .65rem 0; border: 0; border-bottom: 1px solid currentColor; background: transparent; font: 500 .58rem/1 var(--mono); letter-spacing: .08em; text-transform: uppercase; cursor: pointer; }
.bio-options button:disabled { opacity: .4; cursor: default; }
.press-photo-grid { display: grid; grid-template-columns: 1fr 1fr; gap: .75rem; }
.press-photo-grid img, .press-photo-grid div { width: 100%; aspect-ratio: 4 / 5; object-fit: cover; }
.press-photo-grid div { display: grid; place-items: center; padding: 1rem; color: var(--paper); background: var(--bordeaux); text-align: center; }
.press-photo-grid div span, .press-photo-grid div strong { grid-area: 1/1; }
.press-photo-grid div span { align-self: start; justify-self: start; font: 500 .5rem/1 var(--mono); letter-spacing: .1em; text-transform: uppercase; }
.press-photo-grid div strong { font: 500 2rem/1 var(--display); }
.document-list { margin: 0; padding: 0; list-style: none; border-top: 1px solid rgba(36,17,24,.2); }
.document-list li { display: flex; flex-direction: column; gap: .5rem; padding: 1.25rem 0; border-bottom: 1px solid rgba(36,17,24,.2); }
.document-list span { font: 500 1.8rem/1 var(--display); }
.document-list i { color: rgba(36,17,24,.52); font: 400 .55rem/1 var(--mono); font-style: normal; text-transform: uppercase; }
.press-contact { display: grid; gap: .75rem; }
.press-contact span { margin-top: 1rem; color: var(--bordeaux); font: 500 .55rem/1 var(--mono); text-transform: uppercase; }
.press-contact a, .press-contact strong { font: 500 clamp(1.5rem, 5vw, 2.5rem)/1.1 var(--display); }
.toast { position: fixed; z-index: 300; right: 1rem; bottom: 5.4rem; max-width: 20rem; padding: .9rem 1rem; color: var(--paper); background: var(--wine); font: 400 .62rem/1.5 var(--mono); opacity: 0; transform: translateY(.8rem); pointer-events: none; transition: opacity .3s, transform .3s var(--ease); }
.toast.is-visible { opacity: 1; transform: none; }

.reveal { opacity: 0; transform: translateY(2rem); transition: opacity .9s var(--ease), transform .9s var(--ease); }
.reveal.is-visible { opacity: 1; transform: none; }

/* Legibilidade da hero no mobile (2026-08-25)
   O wash original só escurecia a partir de 48%, e no celular o título e o
   eyebrow caíam sobre a área clara da foto. Este reforço age só abaixo de 36%,
   preservando o rosto, e vale apenas até 47.9375rem. */
@media (max-width: 47.9375rem) {
  .hero-wash {
    background:
      linear-gradient(180deg,
        rgba(36,17,24,.10) 0%,
        rgba(36,17,24,.16) 30%,
        rgba(36,17,24,.52) 46%,
        rgba(36,17,24,.86) 72%,
        rgba(36,17,24,.97) 100%),
      linear-gradient(90deg, rgba(36,17,24,.38), transparent 78%);
  }
  .hero h1 { text-shadow: 0 .12em .5em rgba(36,17,24,.42); }
  .hero .eyebrow.light { color: #EBD3D7; text-shadow: 0 .1em .4em rgba(36,17,24,.6); }
  .hero-intro { color: rgba(247,241,235,.92); }
}

/* Área de toque no mobile (2026-08-25)
   Links de texto tinham 9 a 26px de altura, difíceis de acertar no dedo.
   O padding aumenta só a área clicável; o visual não muda. */
@media (max-width: 47.9375rem) {
  .contact-card a[href^="mailto:"],
  .social-row a,
  .footer-bottom a {
    display: inline-flex;
    align-items: center;
    min-height: 44px;
    padding-block: .55rem;
  }
  .social-row { align-items: center; }
  .text-link { min-height: 44px; padding-block: .25rem; }
}

/* Trilhos arrastáveis com o mouse (2026-08-25) */
[data-arrastavel] { cursor: grab; }
[data-arrastavel].esta-arrastando { cursor: grabbing; scroll-behavior: auto; }
[data-arrastavel].esta-arrastando img { pointer-events: none; }
.gallery .carousel-controls { margin-top: 1.25rem; }

@media (min-width: 48rem) {
  .site-header { grid-template-columns: auto 1fr auto; gap: 2rem; }
  .brand { width: 15rem; }
  .desktop-nav { display: flex; justify-content: center; gap: clamp(1.4rem, 2.4vw, 2.6rem); width: fit-content; margin-inline: auto; padding: .35rem 1.1rem; border: 1px solid rgba(247,241,235,.18); background: rgba(36,17,24,.7); backdrop-filter: blur(12px); transition: background .3s, border-color .3s; }
  .desktop-nav a, .header-contact { position: relative; display: inline-flex; padding: .6rem 0; font: 500 .58rem/1 var(--mono); letter-spacing: .08em; text-transform: uppercase; }
  .header-contact { padding-inline: 1rem; color: var(--wine); background: var(--paper); }
  .site-header.is-scrolled .desktop-nav { border-color: transparent; background: transparent; backdrop-filter: none; }
  .site-header.is-scrolled .header-contact { color: var(--paper); background: var(--bordeaux); }
  .desktop-nav a::after, .header-contact::after { content: ""; position: absolute; right: 0; bottom: .25rem; left: 0; height: 1px; background: currentColor; transform: scaleX(0); transform-origin: right; transition: transform .35s var(--ease); }
  .desktop-nav a:hover::after, .header-contact:hover::after { transform: scaleX(1); transform-origin: left; }
  .menu-toggle, .mobile-menu { display: none; }
  .hero-wash { background: linear-gradient(90deg, var(--bordeaux) 0 64%, transparent 64%), linear-gradient(90deg, rgba(36,17,24,.1), transparent 79%); }
  .hero-photo { background-image: url("./assets/images/hero.webp");
                background-position: center; }
  .hero-content { justify-content: center; padding-bottom: 4rem; }
  .hero-copy { width: 52%; padding-top: 4rem; }
  .hero h1 { font-size: clamp(5.4rem, 8vw, 8.5rem); }
  .hero-intro { max-width: 29rem; }
  .hero-credit { position: absolute; right: var(--page); bottom: 2rem; display: flex; gap: 2rem; color: rgba(247,241,235,.72); font: 500 .52rem/1 var(--mono); letter-spacing: .08em; text-transform: uppercase; text-shadow: 0 .1em .4em rgba(36,17,24,.5); }
  .scroll-cue { bottom: 2rem; }
  .section-heading { grid-template-columns: 1.4fr .6fr; align-items: end; margin-bottom: 4.5rem; }
  .showreel-index { position: absolute; right: var(--page); bottom: 2rem; display: grid; grid-template-columns: auto auto; gap: .4rem 1.5rem; color: rgba(247,241,235,.7); font: 400 .55rem/1.2 var(--mono); text-transform: uppercase; }
  .showreel-index strong { color: var(--paper); font-weight: 500; }
  .about-layout { grid-template-columns: .8fr 1.2fr; align-items: center; gap: clamp(4rem, 10vw, 10rem); }
  .portrait-frame { width: min(100%, 34rem); }
  .portrait-orbit { position: absolute; right: -5rem; bottom: -2rem; display: block; color: var(--bordeaux); font: 500 .55rem/1 var(--mono); letter-spacing: .11em; text-transform: uppercase; transform: rotate(90deg); }
  .career-item { grid-template-columns: 3rem 1fr 1fr auto; gap: 1.5rem; padding: 1.8rem 1rem; }
  .career-item p, .career-item i { grid-column: auto; }
  .career-item i { display: block; opacity: 0; transform: translateX(-1rem); transition: opacity .3s, transform .3s; }
  .career-item:hover { padding-inline: 2rem; color: var(--wine); background: var(--rose); }
  .career-item:hover p { color: rgba(36,17,24,.65); }
  .career-item:hover i { opacity: 1; transform: none; }
  .gallery-rail { grid-auto-columns: min(27vw, 25rem); gap: 1.25rem; }
  .gallery-item { height: 39rem; }
  .gallery-item.short { height: 31rem; }
  .press-layout { grid-template-columns: 1.1fr .9fr; min-height: 42rem; }
  .press-visual { min-height: 42rem; }
  .dossier { width: min(27vw, 25rem); }
  .dossier-back { left: 0; }
  .dossier-front { right: 7%; }
  .press-features { grid-template-columns: repeat(4, 1fr); }
  .press-features span { padding: 1.1rem 1.2rem; border-right: 1px solid rgba(247,241,235,.15); border-bottom: 0; }
  .contact-layout { grid-template-columns: 1.25fr .75fr; align-items: end; }
  .footer-bottom { flex-direction: row; justify-content: space-between; }
  .whatsapp-float { right: 1.5rem; bottom: 1.5rem; padding-inline: 1.15rem 1.35rem; }
  .whatsapp-float span { display: inline; }
  .press-dialog-layout { grid-template-columns: minmax(15rem, 22vw) 1fr; }
  .press-tabs { padding-top: 4rem; border-right: 1px solid rgba(36,17,24,.16); border-bottom: 0; }
  .press-tabs button { padding-inline: 2rem; }
  .press-panels { padding: 5rem clamp(3rem, 8vw, 8rem); }
  .bio-options { grid-template-columns: 1.2fr .8fr; }
  .press-photo-grid { grid-template-columns: repeat(3, minmax(0, 1fr)); }
}

@media (min-width: 75rem) {
  .hero-copy { padding-left: 2vw; }
}

@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { scroll-behavior: auto !important; animation-duration: .01ms !important; animation-iteration-count: 1 !important; transition-duration: .01ms !important; }
  .reveal { opacity: 1; transform: none; }
}

@keyframes marquee { to { transform: translateX(-50%); } }
@keyframes cue { 0%, 100% { transform: scaleX(.3); } 50% { transform: scaleX(1); } }
@keyframes heroBreath { to { transform: scale(1.055); } }
@keyframes panelIn { from { opacity: 0; transform: translateY(1rem); } }

/* ---------- Seções novas da V2 (copy vinda do brandbook) ---------- */

.diferencial { background: var(--blush); color: var(--wine); }
.diferencial-layout { display: grid; gap: clamp(1.6rem, 4vw, 3.4rem); align-items: center; }
.diferencial-foto { margin: 0; overflow: hidden; background: var(--wine); }
.diferencial-foto img { display: block; width: 100%; height: 100%; object-fit: cover; }
.diferencial-copy h2 { font-family: var(--display); font-weight: 300;
  font-size: clamp(2.4rem, 5.4vw, 4.2rem); line-height: 1.02; letter-spacing: -.02em; margin: .6rem 0 0; }
.diferencial-copy h2 em { font-style: italic; color: var(--bordeaux); }
.diferencial-texto p { max-width: 34rem; margin: 0 0 1.1rem; color: rgba(37,9,10,.82); }
.diferencial-texto p:last-child { margin-bottom: 0; }


.about-quote { margin: 1.6rem 0 0; padding-left: 1rem; border-left: 2px solid var(--bordeaux);
  font-family: var(--display); font-style: italic; font-size: clamp(1.15rem, 2.2vw, 1.5rem);
  line-height: 1.35; color: var(--bordeaux); }

.showreel-lead { margin: .9rem 0 0; max-width: 26rem; color: rgba(247,241,239,.78); font-size: .95rem; }

@media (min-width: 48rem) {
  .diferencial-layout { grid-template-columns: minmax(0,.82fr) minmax(0,1fr) minmax(0,1fr);
                        gap: clamp(2rem, 4vw, 3.6rem); }
  .diferencial-foto { align-self: stretch; min-height: 30rem; }
}
@media (min-width: 30rem) and (max-width: 47.9375rem) {
}

/* ---------- Ficha técnica: linguagem de call sheet de produção ---------- */

.ficha { background: var(--wine); color: var(--paper); padding-block: 0 clamp(4rem, 9vw, 7rem); }

.ficha-topo { display: flex; justify-content: space-between; gap: 1rem;
  padding-block: 1rem; border-bottom: 1px solid rgba(248,242,241,.16);
  font: 500 .58rem/1 var(--mono); letter-spacing: .18em; text-transform: uppercase;
  color: rgba(248,242,241,.55); }
.ficha-topo span:nth-child(2) { color: var(--copper); }

.ficha-cabecalho { padding-block: clamp(2.6rem, 6vw, 4.4rem) clamp(1.6rem, 3vw, 2.4rem); }
.ficha-cabecalho h2 { font-family: var(--display); font-weight: 300;
  font-size: clamp(2.5rem, 6vw, 4.6rem); line-height: 1.02; letter-spacing: -.02em; margin: 0; }
.ficha-cabecalho h2 em { font-style: italic; color: var(--copper); }
.ficha-cabecalho p { margin: 1.1rem 0 0; max-width: 32rem; color: rgba(248,242,241,.62); font-size: .96rem; }

.ficha-lista { display: grid; gap: 0; border-top: 1px solid rgba(248,242,241,.16); }
.ficha-item { position: relative; display: grid; grid-template-columns: 4.6rem 1fr; gap: 1.4rem;
  align-items: baseline; padding-block: clamp(1.7rem, 3.2vw, 2.5rem);
  border-bottom: 1px solid rgba(248,242,241,.12); }
/* fio que cresce no hover, em vez de fundo chapado */
.ficha-item::after { content: ""; position: absolute; left: 0; bottom: -1px; height: 1px; width: 0;
  background: var(--copper); transition: width .5s var(--ease); }
.ficha-item:hover::after { width: 100%; }
.ficha-n { font-family: var(--display); font-weight: 300; font-size: clamp(2.4rem, 4.4vw, 3.4rem);
  line-height: .9; color: var(--copper); letter-spacing: -.03em; }
.ficha-item h3 { font-family: var(--display); font-weight: 400;
  font-size: clamp(1.6rem, 3.4vw, 2.4rem); line-height: 1.1; margin: 0 0 .35rem; letter-spacing: -.01em; }
.ficha-item p { margin: 0; font-size: .93rem; line-height: 1.6; color: rgba(248,242,241,.6); max-width: 34rem; }

@media (min-width: 48rem) {
  .ficha-cabecalho { display: grid; grid-template-columns: 1fr 1fr; gap: clamp(2rem,4vw,4rem); align-items: end; }
  .ficha-cabecalho p { margin: 0 0 .5rem; }
  .ficha-lista { grid-template-columns: 1fr 1fr; column-gap: clamp(2.4rem, 5vw, 4.5rem); }
  .ficha-item { grid-template-columns: 5.2rem 1fr; }
}




/* ---------- Quatro frentes: a tela trava e as cenas trocam ----------
   Trilho alto + palco em position: sticky. O JavaScript apenas LÊ a posição
   da rolagem e troca classes. Nada de preventDefault: a roda continua do
   visitante. Em tela estreita e com prefers-reduced-motion, tudo vira pilha
   estática, sem perder conteúdo. */

.frentes { background: var(--paper); color: var(--wine);
  padding-block: clamp(4rem, 9vw, 7rem) 0; }

.palco-trilho { position: relative; }
.palco-marco { position: absolute; left: 0; width: 1px; height: 1px;
  scroll-margin-top: 6rem; pointer-events: none; }

.palco { display: grid; align-content: center; gap: 1.5rem; }

.palco-cenas { position: relative; }
.cena { display: grid; gap: clamp(1.2rem, 3vw, 2.2rem); align-items: center; }

.cena-foto { margin: 0; overflow: hidden; background: var(--wine); aspect-ratio: 4 / 5; }
.cena-foto img { display: block; width: 100%; height: 100%; object-fit: cover;
  object-position: center 28%; }

.cena-n { display: block; font: 500 .62rem/1 var(--mono); letter-spacing: .22em;
  color: var(--bordeaux); margin-bottom: .9rem; }
.cena-titulo { font-family: var(--display); font-weight: 300;
  font-size: clamp(2.4rem, 6vw, 4.4rem); line-height: .98; letter-spacing: -.03em; margin: 0; }
.cena-tags { margin: .8rem 0 1.1rem; font: 500 .6rem/1.6 var(--mono);
  letter-spacing: .14em; text-transform: uppercase; color: rgba(39,2,2,.5); }
.cena-texto { margin: 0; max-width: 30rem; color: rgba(39,2,2,.78); line-height: 1.7; }

/* os passos: orientam e evitam a sensação de página travada */
.palco-passos { display: flex; align-items: center; gap: 1.1rem;
  padding-inline: var(--page); }
.palco-passos button { position: relative; padding: .4rem 0; background: none; border: 0;
  cursor: pointer; font: 500 .6rem/1 var(--mono); letter-spacing: .16em;
  color: rgba(39,2,2,.34); transition: color .4s var(--ease); }
.palco-passos button.esta-ativa { color: var(--bordeaux); }
.palco-passos button i { display: block; height: 1px; margin-top: .45rem;
  background: currentColor; transform: scaleX(.4); transform-origin: left;
  transition: transform .5s var(--ease); }
.palco-passos button.esta-ativa i { transform: scaleX(1); }
.palco-barra { display: none; }

@media (min-width: 48rem) {
  .palco-trilho { height: 400vh; }
  .palco { position: sticky; top: 0; height: 100vh; overflow: hidden;
    align-content: center; }

  .palco-cenas { height: min(34rem, 70vh); }
  /* inset: 0 preenche a caixa de PADDING do pai, ignorando o respiro lateral
     do page-grid. Sem isto, o texto das cenas pares encosta na borda da tela. */
  .cena { position: absolute; inset: 0; padding-inline: var(--page);
    grid-template-columns: minmax(0,.7fr) minmax(0,1fr);
    gap: clamp(2.5rem, 6vw, 5rem);
    opacity: 0; visibility: hidden; pointer-events: none;
    transition: opacity .75s var(--ease), visibility .75s; }
  .cena.esta-ativa { opacity: 1; visibility: visible; pointer-events: auto; }

  .cena-foto { height: 100%; aspect-ratio: auto; }

  /* a foto troca de lado a cada cena e entra deslizando.
     Ao inverter, as COLUNAS também invertem: sem isso a foto cai na coluna
     larga (1fr) e o recorte vertical salta de 14% para 40%, cortando o rosto. */
  .cena:nth-child(even) { grid-template-columns: minmax(0,1fr) minmax(0,.7fr); }
  .cena:nth-child(even) .cena-foto { order: 2; }
  .cena-foto img { transform: translateX(var(--vem-de, -2.5rem)) scale(1.07);
    transition: transform 1.15s var(--ease); }
  .cena:nth-child(even) .cena-foto img { --vem-de: 2.5rem; }
  .cena.esta-ativa .cena-foto img { transform: translateX(0) scale(1); }

  /* o texto sobe em cascata */
  .cena-copy > * { opacity: 0; transform: translateY(1.4rem);
    transition: opacity .7s var(--ease), transform .7s var(--ease); }
  .cena.esta-ativa .cena-copy > * { opacity: 1; transform: none; }
  .cena.esta-ativa .cena-n      { transition-delay: .12s; }
  .cena.esta-ativa .cena-titulo { transition-delay: .20s; }
  .cena.esta-ativa .cena-tags   { transition-delay: .28s; }
  .cena.esta-ativa .cena-texto  { transition-delay: .36s; }

  .palco-passos { justify-content: flex-start; }
}

/* pilha estática: celular e quem pediu menos movimento */
@media (max-width: 47.9375rem), (prefers-reduced-motion: reduce) {
  .palco-trilho { height: auto !important; }
  .palco { position: static !important; height: auto !important; overflow: visible !important; }
  .palco-cenas { height: auto !important; display: grid; gap: clamp(3rem, 8vw, 5rem); }
  .cena { position: static !important; opacity: 1 !important; visibility: visible !important;
    pointer-events: auto !important; }
  .cena-foto img { transform: none !important; }
  .cena-copy > * { opacity: 1 !important; transform: none !important; }
  .palco-passos { display: none; }
}

/* ============================================================
   Instagram e Avaliações — adicionadas em 2026-08-31
   Mobile primeiro, no mesmo padrão do resto da folha.
   ============================================================ */

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

/* ---------------------------------------------- Instagram */
.insta { background: var(--paper); }
.insta-handle { display: inline-block; margin-top: .9rem; color: var(--bordeaux); font: 500 .78rem/1 var(--mono); letter-spacing: .08em; border-bottom: 1px solid currentColor; padding-bottom: .2rem; }
.insta-handle:hover { color: var(--wine); }

.insta-selo,
.aval-selo { margin: 0 0 1.4rem; padding: .6rem .85rem; border-left: 2px solid var(--bordeaux); background: rgba(177,0,0,.05); color: rgba(23,19,22,.7); font: 400 .72rem/1.5 var(--mono); }

/* Três colunas no celular, como a referência que ela gostou. */
.insta-grade { display: grid; grid-template-columns: repeat(3, 1fr); gap: .35rem; }
.insta-vazio { grid-column: 1 / -1; margin: 0; padding: 2.5rem 0; color: rgba(23,19,22,.5); font: 400 .8rem/1.5 var(--body); text-align: center; }

.insta-item { position: relative; display: block; aspect-ratio: 1; overflow: hidden; background: #e6dcd8; }
.insta-item img { width: 100%; height: 100%; object-fit: cover; transition: transform .8s var(--ease), filter .6s; }
.insta-item:hover img { transform: scale(1.05); filter: brightness(.82); }
.insta-item .insta-tipo { position: absolute; top: .4rem; right: .4rem; width: 1.1rem; height: 1.1rem; color: #fff; filter: drop-shadow(0 1px 2px rgba(0,0,0,.5)); pointer-events: none; }
.insta-item .insta-tipo svg { width: 100%; height: 100%; fill: currentColor; }
.insta-item .insta-legenda { position: absolute; inset: auto 0 0; padding: 1.6rem .5rem .5rem; color: var(--paper); background: linear-gradient(transparent, rgba(39,2,2,.85)); font: 400 .6rem/1.35 var(--body); opacity: 0; transition: opacity .4s; }
.insta-item:hover .insta-legenda { opacity: 1; }

@media (min-width: 48rem) {
  .insta-grade { grid-template-columns: repeat(6, 1fr); gap: .5rem; }
  .insta-item .insta-legenda { font-size: .68rem; }
}

/* ---------------------------------------------- Avaliações */
.aval { background: var(--blush); }
.aval .section-sidecopy { color: rgba(23,19,22,.66); }

/* Duas colunas no celular: o nome precisa continuar legível. */
.aval-grade { display: grid; grid-template-columns: repeat(2, 1fr); gap: .7rem; }

.aval-card { display: flex; flex-direction: column; margin: 0; overflow: hidden; background: var(--wine); color: var(--paper); }

.aval-midia { position: relative; display: flex; align-items: center; justify-content: center; width: 100%; aspect-ratio: 3 / 4; padding: 1.1rem; border: 0; color: inherit; background: linear-gradient(155deg, var(--wine), #4a0d0d 62%, var(--bordeaux)); font-family: inherit; text-align: left; cursor: pointer; }
.aval-midia.is-texto { cursor: default; align-items: flex-end; }
.aval-midia::after { content: ""; position: absolute; inset: .5rem; border: 1px solid rgba(233,185,185,.22); pointer-events: none; }

.aval-mono { position: absolute; top: .75rem; left: .85rem; color: rgba(233,185,185,.5); font: 500 .6rem/1 var(--mono); letter-spacing: .1em; }

.aval-play { display: grid; place-items: center; width: 3.1rem; height: 3.1rem; border: 1px solid rgba(248,242,241,.55); border-radius: 50%; transition: background .35s var(--ease), transform .35s var(--ease); }
.aval-play svg { width: 1.35rem; height: 1.35rem; fill: currentColor; }
.aval-midia:hover .aval-play { background: var(--bordeaux); transform: scale(1.08); }

.aval-frase { margin: 0; color: rgba(248,242,241,.88); font: 400 clamp(.92rem, 2.6vw, 1.08rem)/1.45 var(--display); }

.aval-pe { padding: .8rem .9rem 1rem; background: var(--graphite); }
.aval-pe b { display: block; font: 600 .82rem/1.3 var(--body); }
.aval-pe span { display: block; margin-top: .25rem; color: rgba(233,185,185,.62); font: 400 .62rem/1.35 var(--mono); letter-spacing: .04em; }

@media (min-width: 48rem) {
  .aval-grade { grid-template-columns: repeat(4, 1fr); gap: 1rem; }
  .aval-pe { padding: 1rem 1.1rem 1.2rem; }
  .aval-pe b { font-size: .92rem; }
}

@media (prefers-reduced-motion: reduce) {
  .insta-item img,
  .aval-play { transition: none; }
}

/* ============================================================
   MARCAS — esteira de logos ("Quem já trabalhou comigo")
   ============================================================
   Pedido da Fernanda em 01/09: os depoimentos ficam com o título
   "Depoimentos" e as marcas ganham seção própria, com os logos passando.

   Fundo areia entre o blush das avaliações e o papel do contato, para as
   três seções não encostarem uma na outra sem respiro. */
.marcas { background: #eee3dd; overflow: hidden; }
.marcas-selo { margin: 0 0 1.4rem; padding: .6rem .85rem; border-left: 2px solid var(--bordeaux); background: rgba(177,0,0,.05); color: rgba(23,19,22,.7); font: 400 .72rem/1.5 var(--mono); }

/* A esteira sangra até as bordas de propósito: logo cortado na margem é o
   que dá a sensação de que a fila continua além da tela. */
.marcas-esteira { position: relative; margin-top: 2.4rem; }
.marcas-esteira::before,
.marcas-esteira::after {
  content: ""; position: absolute; top: 0; bottom: 0; width: 8rem; z-index: 2; pointer-events: none;
}
.marcas-esteira::before { left: 0;  background: linear-gradient(to right, #eee3dd, transparent); }
.marcas-esteira::after  { right: 0; background: linear-gradient(to left,  #eee3dd, transparent); }

.marcas-trilho {
  display: flex; align-items: center; gap: 4rem;
  margin: 0; padding: 0; list-style: none; width: max-content;
  animation: marcas-desliza 42s linear infinite;
}
/* A lista é duplicada no JS. Andar 50% e voltar ao início não tem emenda
   visível, porque a segunda metade é igual à primeira. */
@keyframes marcas-desliza {
  from { transform: translateX(0); }
  to   { transform: translateX(-50%); }
}
.marcas-esteira:hover .marcas-trilho,
.marcas-esteira:focus-within .marcas-trilho { animation-play-state: paused; }

.marcas-item { flex: 0 0 auto; }
.marcas-item img {
  display: block; height: 3.4rem; width: auto; max-width: 11rem; object-fit: contain;
  /* Logo de marca vem em cor, formato e peso visual diferentes. Sem
     uniformizar, a fila vira colcha de retalho. Cinza na fila; passou o
     mouse, o logo cresce um pouco e volta a ser ele mesmo, colorido. */
  filter: grayscale(1) contrast(.9); opacity: .55;
  transform-origin: center;
  transition: filter .4s var(--ease), opacity .4s var(--ease), transform .4s var(--ease);
}
.marcas-item:hover img,
.marcas-item:focus-visible img { filter: none; opacity: 1; transform: scale(1.14); }

/* No celular não existe hover: o logo cresceria só no toque e ficaria preso
   grande depois. Lá ele fica quieto. */
@media (hover: none) {
  .marcas-item:hover img { transform: none; }
}

/* Espaço provisório enquanto não há logo nenhum. */
.marcas-vazio {
  flex: 0 0 auto; display: grid; place-items: center;
  width: 9rem; height: 3.4rem; border: 1px dashed rgba(23,19,22,.22);
  color: rgba(23,19,22,.4); font: 400 .68rem/1 var(--mono);
}

@media (max-width: 700px) {
  .marcas-trilho { gap: 2.6rem; animation-duration: 30s; }
  .marcas-item img { height: 2.6rem; max-width: 8rem; }
  .marcas-esteira::before, .marcas-esteira::after { width: 3rem; }
}

/* Quem pediu menos movimento no sistema não recebe esteira andando:
   a fila para e vira uma faixa que se arrasta com o dedo. */
@media (prefers-reduced-motion: reduce) {
  .marcas-trilho { animation: none; width: auto; overflow-x: auto; }
  .marcas-esteira::before, .marcas-esteira::after { display: none; }
}