/* =====================================================================
   STYLES.CSS — portfólio "conto de fadas desenhado à mão"
   Paleta e fontes no topo; troque aqui para mudar o site todo.
   Ilustrações (PNG transparente): assets/ilustracoes · estampas: assets/estampas
   ===================================================================== */
/* Poppins hospedada aqui mesmo (assets/fontes) — só é baixada se --f-texto voltar a usá-la */
@font-face { font-family: "Poppins"; font-style: italic; font-weight: 400; font-display: swap; src: url("../assets/fontes/poppins-400-italic.woff2") format("woff2"); }
@font-face { font-family: "Poppins"; font-style: italic; font-weight: 700; font-display: swap; src: url("../assets/fontes/poppins-700-italic.woff2") format("woff2"); }
@font-face { font-family: "Poppins"; font-style: normal; font-weight: 400; font-display: swap; src: url("../assets/fontes/poppins-400.woff2") format("woff2"); }
@font-face { font-family: "Poppins"; font-style: normal; font-weight: 500; font-display: swap; src: url("../assets/fontes/poppins-500.woff2") format("woff2"); }
@font-face { font-family: "Poppins"; font-style: normal; font-weight: 600; font-display: swap; src: url("../assets/fontes/poppins-600.woff2") format("woff2"); }
@font-face { font-family: "Poppins"; font-style: normal; font-weight: 700; font-display: swap; src: url("../assets/fontes/poppins-700.woff2") format("woff2"); }
@font-face { font-family: "Poppins"; font-style: normal; font-weight: 800; font-display: swap; src: url("../assets/fontes/poppins-800.woff2") format("woff2"); }
@font-face { font-family: "Poppins"; font-style: normal; font-weight: 900; font-display: swap; src: url("../assets/fontes/poppins-900.woff2") format("woff2"); }

:root {
  --ceu-noite: #2B3150;
  --ceu-profundo: #1D2140;
  --creme: #F6EFDC;
  --rosa-algodao: #F3C6D6;
  --rosa-chiclete: #E58BC8;
  --rosa-pink: #D93A82;
  --amarelo-sol: #F6DD5A;
  --mostarda: #E3A62F;
  --tomate: #D8432B;
  --coral: #EE7B45;
  --teal-circo: #2F6B78;
  --salvia: #A9BD98;
  --azul-nevoa: #E4E9EE;
  --tinta: #2A1F2D;

  --fundo: #F3C6D6;                  /* FUNDO de todas as páginas: rosa-algodão da paleta (troque só aqui; versão mais clara = #FBE4EC) */
  --ceu-claro: var(--fundo);         /* fundo da capa = o mesmo de todas as páginas */
  --rosa-pink-texto: #B8205F;        /* variante escura só para TEXTO pequeno (contraste AA) */
  --vinho: #7B2147;
  --papel: #FFF9EA;

  /* UMA fonte só no site todo: Trebuchet MS (fonte do sistema, Mac e Windows; Tahoma/Verdana como reserva). Para voltar à Poppins: --f-texto: "Poppins", sans-serif (os arquivos continuam em assets/fontes) */
  --f-texto: "Trebuchet MS", "Lucida Grande", Tahoma, Verdana, sans-serif;
  --f-titulo: var(--f-texto);
  --f-mao: var(--f-texto);

  --h-cab: 64px;

  /* CURSOR: varinha mágica = assets/varinha.png (32×32). Hotspot "20 9" = ponta da varinha 🪄. */
  --cursor-varinha: url("../assets/varinha.png") 20 9, auto;
}

*, *::before, *::after { box-sizing: border-box; }
html { scroll-behavior: smooth; -webkit-text-size-adjust: 100%; }
body {
  margin: 0;
  font-family: var(--f-texto);
  font-size: 1.125rem;
  line-height: 1.6;
  color: var(--tinta);
  background: var(--fundo);
  overflow-x: hidden;
}
button, input, textarea, select { font-family: inherit; }
img, svg, video { display: block; max-width: 100%; }
a { color: inherit; }
h1, h2, h3 { font-family: var(--f-titulo); font-variation-settings: "SOFT" 100; margin: 0; line-height: 1.05; }
ul { margin: 0; padding: 0; list-style: none; }
h1, h2, h3, .mao, em, .sec-cab, .t-resumo, .proximo { font-style: normal; }
h1, h2, h3 { font-weight: 700; letter-spacing: .04em; text-transform: uppercase; }
.mao { font-weight: 700; }
.mao { font-family: var(--f-mao); font-weight: 700; }
.sr-only { position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; border: 0; }
.wrap { width: min(1200px, 100% - clamp(32px, 7vw, 96px)); margin-inline: auto; }

/* ---------- CURSOR varinha (só em dispositivos com mouse) ---------- */
@media (hover: hover) and (pointer: fine) {
  *, *::before, *::after { cursor: var(--cursor-varinha) !important; }
  input, textarea, select, [contenteditable="true"] { cursor: text !important; }
}

/* nas camadas de estrelas (capa, laterais da grade, fundo do Sobre) nada é selecionável: o clique só cria estrelas e o cursor de texto ("I") nunca aparece */
.hero, .sobre-ceu, .lados, .estrelas, .fundo-estrelas { -webkit-user-select: none; user-select: none; }
body.home { -webkit-user-select: none; user-select: none; }   /* capa inteira: sem seleção de texto */
html { caret-color: transparent; }                            /* esconde a barra de digitação (cursor de texto piscando) em qualquer lugar da página */

/* ---------- GRÃO de papel/risografia em todo o site ---------- */
body::after {
  content: ""; position: fixed; inset: 0; z-index: 9000; pointer-events: none; opacity: .5; mix-blend-mode: multiply;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='220' height='220'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.85' numOctaves='2' stitchTiles='stitch'/%3E%3CfeColorMatrix values='0 0 0 0 .16 0 0 0 0 .12 0 0 0 0 .18 0 0 0 .9 -.32'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E");
}

/* ---------- FOCO de teclado: contorno amarelo-sol (com anel escuro p/ contraste no creme) ---------- */
:focus { outline: none; }
:focus-visible { outline: 3px solid var(--amarelo-sol); outline-offset: 2px; box-shadow: 0 0 0 6px var(--tinta); border-radius: 6px; }

/* =====================================================================
   CABEÇALHO (3 zonas: links · cargo/agência · nome)
   ===================================================================== */
.cab {
  position: fixed; inset: 0 0 auto 0; z-index: 500; color: var(--tinta);
  background: rgba(243, 198, 214, .62); -webkit-backdrop-filter: blur(12px) saturate(1.2); backdrop-filter: blur(12px) saturate(1.2);   /* mais transparente */
  border-radius: 0 0 22px 22px;                                                                                                            /* cantos de baixo levemente arredondados */
  transition: opacity .6s ease, transform .7s cubic-bezier(.2,.8,.2,1), visibility 0s linear 0s;
}
.cab.escondido { opacity: 0; transform: translateY(-110%); visibility: hidden; pointer-events: none; transition: opacity .6s ease, transform .7s cubic-bezier(.2,.8,.2,1), visibility 0s linear .7s; }
.cab-in { max-width: 1440px; margin: 0 auto; min-height: var(--h-cab); padding: 0 clamp(16px, 3vw, 40px); display: grid; grid-template-columns: 1fr auto 1fr; align-items: center; gap: 16px; }
.cab-nav { display: flex; gap: clamp(16px, 3vw, 36px); }
.cab-nav a, .cab-nome { text-decoration: none; }
.cab-nav a { font-family: var(--f-texto); font-style: normal; font-weight: 700; font-size: .8rem; line-height: 1.2; letter-spacing: .2em; text-transform: uppercase; color: var(--teal-circo); padding: 4px 2px; transition: color .2s; }
.cab-nav a:hover { color: var(--rosa-pink-texto); text-decoration: underline wavy var(--rosa-pink); text-underline-offset: 6px; }
.cab-nav a[aria-current="page"] { text-decoration: underline wavy var(--rosa-pink); text-underline-offset: 6px; text-decoration-thickness: 2px; }
.cab-nav a[aria-current="page"]::after { content: ""; display: inline-block; width: .9em; height: .9em; margin-left: .35em; vertical-align: -.1em; background: url("../assets/ilustracoes/cor-mostarda.png") center / contain no-repeat; }
.cab-cargo { margin: 0; text-align: center; font-family: var(--f-texto); font-weight: 700; font-size: .78rem; line-height: 1.25; letter-spacing: .2em; text-transform: uppercase; color: var(--teal-circo); }
.cab-nome { justify-self: end; font-family: var(--f-texto); font-weight: 700; font-size: .8rem; line-height: 1.2; letter-spacing: .2em; text-transform: uppercase; color: var(--teal-circo); transition: color .2s; }
.cab-nome:hover { color: var(--rosa-pink-texto); }
.cab-burger { display: none; width: 44px; height: 44px; padding: 0; border: 0; background: none; align-items: center; justify-content: center; flex-direction: column; gap: 5px; }
.cab-burger span { display: block; width: 24px; height: 3px; border-radius: 3px; background: var(--tinta); transition: transform .25s, opacity .25s, background .2s; }
.cab-burger:hover span { background: var(--rosa-pink); }
.cab-burger[aria-expanded="true"] span:nth-child(1) { transform: translateY(8px) rotate(45deg); }
.cab-burger[aria-expanded="true"] span:nth-child(2) { opacity: 0; }
.cab-burger[aria-expanded="true"] span:nth-child(3) { transform: translateY(-8px) rotate(-45deg); }
@media (max-width: 760px) {
  :root { --h-cab: 62px; }
  .cab-in { grid-template-columns: 44px 1fr 44px; gap: 8px; }   /* celular: menu · cargo centralizado · (espaço igual ao menu) */
  .cab-burger { display: flex; }
  .cab-cargo { font-size: .66rem; letter-spacing: .14em; }
  .cab-nome { display: none; }                                   /* o nome já aparece na capa; no celular o cabeçalho fica só com o cargo */
  .cab-nav { position: absolute; left: 0; right: 0; top: 100%; margin-top: 0; flex-direction: column; gap: 0; padding: 8px 20px 14px; background: rgba(243, 198, 214, .86); -webkit-backdrop-filter: blur(12px); backdrop-filter: blur(12px); border-radius: 0 0 22px 22px; display: none; }
  .cab-nav.aberto { display: flex; }
  .cab-nav a { font-size: 1.05rem; padding: 10px 2px; }
}
body.home .cab { opacity: var(--p, 0); transform: translateY(calc((1 - var(--p, 0)) * -100%)); transition: none; }
body.home .cab.escondido { visibility: hidden; pointer-events: none; }
body.interna { padding-top: var(--h-cab); position: relative; }

/* =====================================================================
   HOME — fundo azul mais claro, hero de 70vh só com as estrelas de rosto
   ===================================================================== */
body.home {
  color: var(--tinta);
  background-color: var(--ceu-claro);
}
.hero { position: relative; height: 100vh; height: 100svh; overflow: hidden; }   /* a tela inicial ocupa a tela toda */
.hero.com-imagem { background-size: cover; background-position: center; }
.hero-titulo { position: absolute; inset: 0; z-index: 1; display: flex; flex-direction: column; align-items: center; justify-content: center; text-align: center; padding: 0 5vw; pointer-events: none; }
.hero-titulo h1, .hero-titulo p { font-family: var(--f-texto); font-size: clamp(.7rem, 1.2vw, 1rem); font-style: normal; font-weight: 700; line-height: 1.2; letter-spacing: .16em; text-transform: uppercase; color: var(--teal-circo); text-wrap: balance; }
.hero-titulo h1, .hero-titulo p { width: max-content; max-width: 100%; }
.hero-titulo h1 { margin: 0; font-size: clamp(1.9rem, 5.8vw, 5rem); line-height: 1.1; }   /* nome maior; o cargo mantém o tamanho pequeno */
.hero-titulo p { margin: clamp(10px, 1.4vw, 20px) 0 0; }
/* DESKTOP (≥ 1100 px): nome e cargo maiores na capa — celular e tablet não mudam */
@media (min-width: 1100px) {
  .hero-titulo h1 { font-size: clamp(5rem, 6.8vw, 7.5rem); }
  .hero-titulo p { font-size: clamp(1.15rem, 1.7vw, 1.7rem); margin-top: clamp(16px, 1.8vw, 28px); }
}
.estrelas { position: absolute; inset: 0; }
.fundo-estrelas { position: absolute; inset: 0; z-index: 0; pointer-events: none; }
.fe { position: absolute; translate: -50% -50%; rotate: var(--rot, 0deg); opacity: .95; }
.fe img { width: 100%; height: auto; }
@media (prefers-reduced-motion: no-preference) { .fe { animation: flutuar var(--dur, 6s) ease-in-out var(--atraso, 0s) infinite alternate; } .fe img { animation: cintilar calc(var(--dur, 6s) * .7) ease-in-out infinite alternate; } }
@keyframes cintilar { from { opacity: .55; transform: scale(.9); } to { opacity: 1; transform: scale(1.08); } }

/* seta única, centralizada embaixo */
.hero-seta { position: absolute; z-index: 5; left: 50%; bottom: 20px; translate: -50% 0; width: 56px; height: 56px; display: grid; place-items: center; border-radius: 50%; color: var(--tomate); text-decoration: none; }
.hero-seta svg { width: 40px; height: 40px; filter: drop-shadow(0 2px 0 var(--rosa-algodao)); }
.hero-seta:hover { color: var(--rosa-pink); }

/* estrela de rosto: ilustração sem olhos (PNG) + olhos HTML por cima */
.estrela { position: absolute; translate: calc(-50% + var(--ox, 0px)) calc(-50% + var(--oy, 0px)); z-index: 2; rotate: var(--rot, 0deg); }
@media (max-width: 700px) { .estrela:nth-child(n+10) { display: none; } }
.estrela::before { content: ""; position: absolute; inset: -28%; border-radius: 50%; background: radial-gradient(circle, rgba(255,240,170,.28) 0%, transparent 62%); pointer-events: none; }
.estrela-forma { position: absolute; inset: 0; width: 100%; height: 100%; user-select: none; }
.rosto { position: absolute; inset: 0; }
.olho { position: absolute; left: var(--x); top: var(--y); width: var(--w); aspect-ratio: 1; translate: -50% -50%; border-radius: 50%; background: #FFFDF6; border: 1.5px solid #1B1420; overflow: hidden; box-shadow: inset 0 -3px 0 rgba(27,20,32,.10); }
.pupila { position: absolute; left: 50%; top: 50%; height: 60%; aspect-ratio: 1; border-radius: 50%; background: #1B1420; transform: translate(-50%, -50%); will-change: transform; }
.pupila::after { content: ""; position: absolute; left: 22%; top: 16%; width: 30%; height: 30%; border-radius: 50%; background: #FFFDF6; }
.palpebra { position: absolute; inset: -2px; background: var(--cor-estrela, #EFB84A); border-bottom: 2px solid var(--tinta); transform: scaleY(0); transform-origin: top; z-index: 2; }
.palpebra.piscando { animation: piscar .3s ease-in-out; }
/* estrela voando (depois do toque): olhinhos fechados, se divertindo */
.estrela-voo .olho { background: transparent; border-color: transparent; box-shadow: none; overflow: visible; }
.estrela-voo .pupila { display: none; }
.estrela-voo .palpebra { animation: none; inset: auto; left: 6%; right: 6%; top: 24%; height: 52%; transform: none; background: transparent; border: 0; border-top: 3.5px solid #1B1420; border-radius: 50% 50% 0 0 / 100% 100% 0 0; }   /* olhinhos fechados em “^ ^” */
@keyframes piscar { 0% { transform: scaleY(0); } 45%, 55% { transform: scaleY(1); } 100% { transform: scaleY(0); } }
@media (prefers-reduced-motion: no-preference) {
  .estrela { animation: flutuar var(--dur, 7s) ease-in-out var(--atraso, 0s) infinite alternate; }
  .estrela::before { animation: pulsar var(--dur, 7s) ease-in-out var(--atraso, 0s) infinite alternate; }
  .hero-seta svg { animation: quica 1.6s ease-in-out infinite; }
}

@keyframes flutuar { from { transform: translate(calc(var(--fx, 8px) * -1), calc(var(--fy, 8px) * -1)) rotate(calc(var(--fr, 3deg) * -1)); } to { transform: translate(var(--fx, 8px), var(--fy, 8px)) rotate(var(--fr, 3deg)); } }
@keyframes pulsar { from { opacity: .45; transform: scale(.92); } to { opacity: 1; transform: scale(1.06); } }
@keyframes quica { 0%, 100% { transform: translateY(0); } 50% { transform: translateY(7px); } }

/* ---------- Seção de trabalhos (home) ---------- */
.trabalhos { position: relative; min-height: 100vh; padding: calc(var(--h-cab) + 10px) 0 130px;
}   /* cada COLUNA surge acompanhando a rolagem, da mais alta para a mais baixa (--p vem de js/main.js; --ini é o ponto em que a coluna começa) */
.trabalhos.oculto { pointer-events: none; }
.trabalhos .wrap { position: relative; z-index: 1; }
.sec-cab { text-align: center; margin-bottom: clamp(32px, 5vw, 60px); }
.sec-cab .mao { margin: 0; font-size: 1.6rem; color: var(--teal-circo); }
.sec-cab h2 { font-size: clamp(3rem, 8vw, 6rem); font-weight: 900; font-style: italic; color: var(--tomate); text-shadow: 3px 3px 0 var(--rosa-algodao); letter-spacing: -.01em; }
/* linhas montadas por organizarLista() em js/main.js: altura e largura de cada card vêm da proporção da capa */
.lista { display: flex; align-items: flex-start; gap: clamp(10px, 1.4vw, 18px); }   /* colunas montadas por organizarLista(): 3 no desktop, 2 no celular */
.lista:not(.pronta) { visibility: hidden; }   /* só aparece depois de montada na ordem certa */
.coluna { display: flex; flex-direction: column; gap: clamp(10px, 1.4vw, 18px); flex: none; }
.coluna { --q: clamp(0, calc((var(--p, 0) - var(--ini, 0)) / .42), 1); opacity: var(--q); transform: translateY(calc((1 - var(--q)) * 80px)); will-change: opacity, transform; }
@media (prefers-reduced-motion: reduce) { .coluna { opacity: 1; transform: none; } }   /* cards se encaixam em linhas de 2–3, pela proporção de cada imagem */

/* CARD horizontal: só a imagem, estourada, com moldura ilustrada (faixas da referência) por cima */
.card {
  --k: 1;
  position: relative; display: block; flex: none; width: 300px; height: 200px; container-type: size; text-decoration: none; border-radius: 28px; overflow: hidden; isolation: isolate;
  transition: transform .35s cubic-bezier(.2,.8,.2,1), filter .35s;
}
/* imagem ocupa o card todo, sem moldura, com cantos bem arredondados */
/* cards depois da 1ª fileira: surgem acompanhando a rolagem (--qc vai de 0 a 1, calculado em js/main.js) */
.card.surge { opacity: var(--qc, 0); translate: 0 calc((1 - var(--qc, 0)) * 80px); }
@media (prefers-reduced-motion: reduce) { .card.surge { opacity: 1; translate: none; } }
.card-img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; border-radius: 28px; }
.card.f1 .card.f2 .card.f3 .card:hover, .card:focus-visible { transform: translateY(-9px) rotate(-.3deg); filter: drop-shadow(0 18px 22px rgba(29,33,64,.45)); }
.card:hover .card-img { transform: scale(1.04); }
/* esconde o botão de "tocar/carregar" que o celular desenha quando bloqueia a reprodução automática: sem o botão, o vídeo parado aparece como a imagem de capa */
video.card-img::-webkit-media-controls, video.card-img::-webkit-media-controls-start-playback-button, video.card-img::-webkit-media-controls-overlay-play-button, video.card-img::-webkit-media-controls-panel { display: none !important; -webkit-appearance: none; opacity: 0; }
video.card-img { pointer-events: none; }   /* o clique vai para o card (abre o case), nunca para o player do vídeo */
.card-img { filter: brightness(1); transition: transform .6s ease, filter .45s ease; }
.card:hover .card-img, .card:focus-visible .card-img { filter: brightness(.55) saturate(.95); }          /* fundo levemente escuro ao passar o mouse */
.card-titulo { position: absolute; inset: 0; z-index: 2; border-radius: 28px; display: grid; place-items: center; padding: 8%; text-align: center; pointer-events: none;
  opacity: 0; transform: translateY(8px); transition: opacity .4s ease, transform .5s cubic-bezier(.2,.8,.2,1); }
.card-titulo { align-content: center; justify-items: center; gap: .5em; }
.card-titulo span { max-width: 100%; overflow-wrap: anywhere; text-wrap: balance; font-family: var(--f-texto); font-weight: 700; text-transform: uppercase; color: var(--creme); text-shadow: 0 2px 12px rgba(29,33,64,.6); }
.ct-nome { letter-spacing: .08em; line-height: 1.2; font-size: clamp(.7rem, 7.5cqw, 1.5rem); }       /* título: escala com a largura do card */
.ct-cliente { letter-spacing: .2em; line-height: 1.2; font-size: clamp(.5rem, 3.6cqw, .8rem); opacity: .9; }   /* nome do cliente, menor, abaixo do título */
.card:hover .card-titulo, .card:focus-visible .card-titulo { opacity: 1; transform: none; }
@media (hover: none) { .card-titulo { display: none; } }

/* chuva curta de brilhos no hover (estrelinhas ilustradas) */
.brilho-chuva { position: absolute; top: -4px; z-index: 4; pointer-events: none; background: center / contain no-repeat; animation: chuva var(--t, 1s) ease-in var(--d, 0s) both; }
@keyframes chuva { 0% { opacity: 0; transform: translateY(0) scale(.4) rotate(0); } 15% { opacity: 1; } 100% { opacity: 0; transform: translateY(var(--queda, 260px)) scale(1.1) rotate(200deg); } }

/* =====================================================================
   MOLDURA ornamental do texto — assets/ilustracoes/moldura-retangulo-azul-vazada.png (border-image)
   ===================================================================== */
.moldura {
  position: relative; isolation: isolate;
  padding: clamp(18px, 2.6vw, 34px);
  border: 50px solid var(--teal-circo);                                   /* reserva, se a imagem faltar */
  border-image: var(--moldura-img, url("../assets/ilustracoes/moldura-retangulo-azul-vazada.png")) 63 50 45 47 round;
  border-width: 57px 45px 41px 42px;
  background: var(--papel) padding-box;
}

/* =====================================================================
   SOBRE — fundo azul-névoa, estrelas coloridas de um só estilo voando ao fundo
   ===================================================================== */
/* Camada de estrelas voando (usada na home) */
.voando { position: fixed; inset: 0; overflow: hidden; pointer-events: none; z-index: 0; }
.trabalhos .voando { position: absolute; }
.lados { position: absolute; inset: 0; z-index: 0; pointer-events: none; overflow: hidden; }   /* estrelas com rosto nas laterais da grade */
.lados .estrela { pointer-events: auto; }
.voa { position: absolute; left: var(--x); top: 100%; width: var(--s); animation: voar var(--d) linear var(--atraso) infinite; will-change: transform; }
.voa img { width: 100%; height: auto; animation: balanca var(--b, 5s) ease-in-out infinite alternate; }
@keyframes voar { from { transform: translate3d(0, 0, 0); } to { transform: translate3d(var(--dx), -135vh, 0); } }
@keyframes balanca { from { transform: translateX(-22px) rotate(-18deg); opacity: .65; } to { transform: translateX(22px) rotate(18deg); opacity: 1; } }

/* ---------- SOBRE (versão anterior) — molduras onduladas assets/sobre/moldura.png ---------- */
.sobre .moldura, .moldura.t-moldura {
  --borda: 54px;
  border: var(--borda) solid var(--rosa-chiclete);
  border-image: url("../assets/sobre/moldura.png") 130 round;
  border-image-width: var(--borda);
  border-width: var(--borda);
  padding: clamp(18px, 2.4vw, 30px);
}
.m-est { position: absolute; z-index: 2; width: 64px; height: 64px; pointer-events: none; }
.m-est img { width: 100%; height: 100%; }
.m-est.t { left: 50%; top: calc(var(--borda) / -2 - 8px); margin-left: -32px; }
.m-est.b { left: 50%; bottom: calc(var(--borda) / -2 - 8px); margin-left: -32px; }
.m-est.l { top: 50%; left: calc(var(--borda) / -2 - 8px); margin-top: -32px; }
.m-est.r { top: 50%; right: calc(var(--borda) / -2 - 8px); margin-top: -32px; }

.sobre { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 2fr); gap: clamp(36px, 6vw, 84px); align-items: start; max-width: 1240px; margin: 0 auto; padding: clamp(92px, 8vw, 118px) clamp(36px, 5vw, 64px) 110px; }
.col-foto, .col-texto { position: relative; z-index: 1; }
.col-foto { text-align: center; transform: rotate(-3deg); transform-origin: 50% 40%; }   /* moldura levemente inclinada para a esquerda */
.foto-aro { position: relative; }
.foto { aspect-ratio: 4 / 5; overflow: hidden; border-radius: 120px 120px 14px 14px / 90px 90px 14px 14px; border: 2px solid var(--tinta); background: var(--salvia); }
.foto img { width: 100%; height: 100%; object-fit: cover; }
.foto-placeholder { width: 100%; height: 100%; display: grid; place-items: center; text-align: center; padding: 16px; background: var(--salvia); }
.foto-placeholder img { width: 66%; margin: 0 auto 6px; }
.foto-placeholder p { margin: 0; font-family: var(--f-mao); font-size: 1.3rem; color: var(--tinta); line-height: 1.15; }
.foto-legenda { margin: 12px 0 4px; text-align: center; font-size: 1.35rem; line-height: 1.15; color: var(--vinho); }
.empresas { margin-top: 14px; text-align: center; }
.empresas h2 { font-size: 1.5rem; font-family: var(--f-mao); font-weight: 700; color: var(--teal-circo); margin-bottom: 8px; }
.empresas ul { display: flex; flex-direction: column; align-items: center; gap: 8px; font-weight: 700; font-size: 1rem; text-align: center; }
.empresas li { display: inline-flex; align-items: center; justify-content: center; text-align: center; }
.empresas img { max-height: 30px; width: auto; }
.empresas li.atual { position: relative; padding: 4px 26px; margin: 2px 0; }
.empresas li.atual span { font-weight: 700; color: var(--rosa-pink-texto); text-shadow: 0 0 14px rgba(246,221,90,.9), 0 0 4px rgba(246,221,90,.9); }
.empresas li.atual::after { display: none; }
.bri { position: absolute; display: block; width: 18px; pointer-events: none; }
.bri img { width: 100%; height: auto; }
.bri.b1 { left: 0; top: -4px; width: 20px; } .bri.b2 { left: 10px; bottom: -6px; width: 12px; }
.bri.b3 { right: 0; top: -6px; width: 14px; } .bri.b4 { right: 12px; bottom: -4px; width: 20px; }
@media (prefers-reduced-motion: no-preference) {
  .bri img { animation: cintilar 1.8s ease-in-out infinite alternate; }
  .bri.b2 img { animation-delay: -.6s; } .bri.b3 img { animation-delay: -1.1s; } .bri.b4 img { animation-delay: -1.5s; }
}
.col-texto h1 { font-size: clamp(2.6rem, 6vw, 4.8rem); font-weight: 900; font-style: italic; color: var(--teal-circo); margin-bottom: 22px; }
.col-texto { align-self: center; }   /* texto desce para o meio da altura da foto */
.texto-livre { padding: 0 clamp(0px, 2vw, 24px); }
.sobre-texto p { margin: 0 0 1.2em; font-size: clamp(1.1rem, 1.5vw, 1.28rem); line-height: 1.75; max-width: 62ch; }
.sobre-texto p:last-child { margin-bottom: 0; }
.marcas { --u: 36px; display: flex; flex-wrap: nowrap; align-items: center; gap: 16px 22px; margin: 36px 0 0; padding: 0; list-style: none; }   /* desktop: todos os logos numa linha só (encolhem juntos se a coluna for estreita) */
.marcas li { display: flex; align-items: center; flex: 0 1 calc(var(--k, 1) * var(--u)); min-width: 0; }
.marcas img { display: block; width: 100%; height: auto; }
@media (max-width: 1000px) { .marcas { --u: 44px; flex-wrap: wrap; gap: 18px 26px; } }   /* celular/tablet: quebra em linhas */
/* destaques (palavras entre **asteriscos** nos textos) em NEGRITO; mesma fonte e cor do texto */
.destaque, strong, b { font: inherit; font-weight: 700; color: inherit; background: none; padding: 0; }
.deco-camada { position: absolute; inset: 0; pointer-events: none; z-index: 0; overflow: hidden; }
.deco { position: absolute; }
.sobre-ceu { position: absolute; inset: 0; overflow: hidden; pointer-events: none; z-index: 0; }
.sobre-ceu .estrela { pointer-events: auto; }
.estrela-clique { position: absolute; translate: -50% -50%; rotate: var(--rot, 0deg); pointer-events: none; }
.estrela-clique img { width: 100%; height: auto; }
@media (prefers-reduced-motion: no-preference) { .estrela-clique { animation: flutuar var(--dur, 6s) ease-in-out infinite alternate; } .estrela-clique img { animation: cintilar 2s ease-in-out infinite alternate; } }
.deco img { width: 100%; height: auto; }
.rosto-deco { position: relative; width: 100%; }
.deco .rosto-deco .estrela-forma { height: 100%; }
@media (prefers-reduced-motion: no-preference) { .deco { animation: flutuar var(--dur, 6s) ease-in-out var(--atraso, 0s) infinite alternate; } }
@media (max-width: 820px) { .sobre { grid-template-columns: 1fr; padding-bottom: 210px; } .deco.some-mobile { display: none; } }

/* =====================================================================
   PÁGINA DE TRABALHO
   ===================================================================== */
.trabalho { padding: clamp(88px, 7vw, 104px) clamp(16px, 3.5vw, 48px) 0; max-width: 1600px; margin: 0 auto; }
.t-centro { max-width: 1400px; margin: 0 auto; }               /* textos centralizados na página, alinhados à esquerda */
.t-titulo { font-size: clamp(2rem, 5.5vw, 4.6rem); font-style: normal; font-weight: 700; line-height: 1.1; letter-spacing: .16em; text-transform: uppercase; color: var(--teal-circo); text-wrap: balance; margin-bottom: clamp(10px, 1.4vw, 20px); }
.t-meta { display: flex; flex-wrap: wrap; align-items: center; gap: 8px 18px; margin: 0 0 clamp(26px, 4vw, 48px); padding: 0; font-size: .95rem; font-weight: 700; letter-spacing: .16em; text-transform: uppercase; color: var(--teal-circo); }
.t-meta li:not(:last-child)::after { content: ""; display: inline-block; width: .9em; height: .9em; margin-left: 18px; background: url("../assets/ilustracoes/cor-mostarda.png") center / contain no-repeat; vertical-align: -.1em; }

/* texto vertical (moldura inclinada, como no Sobre) à esquerda · mídias à direita */
.t-layout { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 2fr); gap: clamp(36px, 5vw, 72px); align-items: start; max-width: 1400px; margin: 0 auto; }
.t-lado { transform: rotate(-3deg); transform-origin: 50% 30%; }
@media (max-width: 900px) { .t-layout { grid-template-columns: 1fr; } .t-lado { transform: rotate(-1.5deg); } }
.galeria { --alt: min(clamp(380px, 62vw, 860px), 88vh); display: flex; flex-wrap: wrap; justify-content: center; align-items: flex-start; gap: 14px; margin-bottom: clamp(48px, 7vw, 90px); }
.gal-item { position: relative; flex: none; width: min(100%, var(--max, 100%), calc(var(--r) * var(--alt))); aspect-ratio: var(--r); margin: 0; overflow: hidden; border-radius: 14px; }   /* bloco = proporção exata da mídia, sem fundo */
.gal-btn { display: block; width: 100%; height: 100%; padding: 0; border: 0; background: none; }
.gal-item img, .gal-item video, .gal-item iframe { width: 100%; height: 100%; object-fit: contain; border: 0; transition: transform .5s ease; }
.gal-item:hover img, .gal-item:hover video { transform: scale(1.04); }
.gal-item iframe { border: 0; }
.gal-item iframe ~ button { display: none; }   /* vídeo do Vimeo já tem os próprios controles */
.gal-som, .gal-expande { position: absolute; z-index: 3; bottom: 10px; width: 42px; height: 42px; padding: 0; border-radius: 50%; border: 2px solid var(--tinta); background: var(--amarelo-sol); color: var(--tinta); font-size: 1.15rem; display: grid; place-items: center; transition: background .2s, transform .2s; }
.gal-som { right: 10px; } .gal-expande { right: 60px; }
.gal-som:hover, .gal-expande:hover { background: var(--rosa-pink); color: var(--creme); transform: scale(1.08); }
@media (max-width: 700px) { .galeria { --alt: 130vw; } }
.galeria.compacta { display: block; columns: 2; column-gap: 12px; max-width: 900px; margin-inline: auto; }   /* prints de tweets: mosaico em 2 colunas, sem buracos */
.galeria.compacta .gal-item { display: block; width: 100%; margin: 0 0 12px; break-inside: avoid; }
@media (max-width: 700px) { .galeria.compacta { columns: 1; } }
/* vídeo à esquerda + coluna de tweets à direita (mesma altura do vídeo) */
.galeria.lado { display: grid; grid-template-columns: minmax(240px, 44%) minmax(0, 1fr); justify-content: center; gap: 24px; align-items: start; margin-inline: auto; }
.galeria.lado .gal-col-video { display: flex; flex-direction: column; gap: 12px; }
.galeria.lado .gal-col-tweets { columns: 1; }
.galeria.lado .gal-item { display: block; width: 100%; margin: 0 0 12px; break-inside: avoid; }
.galeria.lado .gal-col-video .gal-item { margin: 0; }
/* vídeos na coluna da direita + imagens pequenas numa fileira própria embaixo de tudo (texto incluso), alinhada às bordas do bloco de cima */
.galeria.fotos { display: flex; flex-direction: column; gap: 12px; }
.galeria.destaque { display: flex; align-items: flex-start; gap: 12px; }
.galeria.destaque .gal-esq, .galeria.destaque .gal-dir { flex: none; }
.galeria.destaque .gal-dir { display: flex; flex-direction: column; gap: 12px; }
.galeria.destaque .gal-item { width: 100%; }
.galeria.destaque .gal-linha .gal-item { flex: var(--r) 1 0%; width: auto; min-width: 0; }
@media (max-width: 700px) { .galeria.destaque { flex-direction: column; } .galeria.destaque .gal-esq, .galeria.destaque .gal-dir { width: 100%; } }
.gal-linha { display: flex; gap: 12px; width: 100%; }
.galeria.fotos .gal-linha .gal-item { flex: var(--r) 1 0%; width: auto; min-width: 0; }   /* largura ∝ proporção → todos com a mesma altura */
.galeria.fotos .gal-linha:has(> :only-child) .gal-item { flex: none; width: calc(50% - 6px); }   /* item sozinho na fileira: metade da largura, à esquerda */
@media (max-width: 700px) { .gal-linha { flex-wrap: wrap; } .galeria.fotos .gal-linha .gal-item { flex: none; width: calc(50% - 6px); } }

@media (max-width: 900px) { .galeria.lado { grid-template-columns: 1fr; } .galeria.lado .gal-col-tweets { columns: 1; } }

.t-texto { display: grid; grid-template-columns: 1fr; gap: 26px; }
.t-moldura { margin: 20px 16px 0; }
.t-texto h2 { font-size: clamp(1.15rem, 1.6vw, 1.45rem); font-style: italic; font-weight: 800; margin-bottom: 14px; color: var(--teal-circo); }
.t-texto p { margin: 0 0 .8em; font-size: .85rem; line-height: 1.5; }
.t-texto strong { font-weight: 700; color: var(--rosa-pink-texto); }
.t-resumo { font-family: var(--f-mao); font-size: 1.6rem; line-height: 1.15; color: var(--vinho); margin-bottom: 14px !important; }
.t-fiz li { position: relative; font-size: .82rem; padding: 6px 0 6px 28px; border-bottom: 1.5px dotted var(--vinho); font-weight: 700; }
.t-fiz li::before { content: ""; position: absolute; left: 2px; top: .75em; width: 20px; height: 20px; background: url("../assets/ilustracoes/cor-pink.png") center / contain no-repeat; }

/* só uma seta para o próximo trabalho */
.proximo { display: block; width: 150px; margin: clamp(40px, 5vw, 70px) auto clamp(60px, 8vw, 110px); padding: 8px; color: var(--tomate); text-decoration: none; }   /* seta desenhada à mão, na cor das molduras */
.proximo svg { display: block; width: 100%; height: auto; overflow: visible; transition: translate .35s cubic-bezier(.2, .7, .2, 1), rotate .35s ease; }
.proximo:hover svg, .proximo:focus-visible svg { translate: 14px 0; rotate: -3deg; }
.proximo:hover { color: var(--rosa-pink-texto); }
@media (prefers-reduced-motion: reduce) { .proximo svg { transition: none; } }
.t-imprensa { max-width: 1400px; margin: clamp(48px, 6vw, 80px) auto 0; }
.t-imprensa[hidden] { display: none; }
.t-imprensa-tit { font-size: .85rem; letter-spacing: .2em; text-transform: uppercase; font-weight: 700; color: var(--teal-circo); margin: 0 0 16px; }
.t-imprensa-lista { columns: 3 260px; column-gap: 14px; }
.im-item { break-inside: avoid; margin: 0 0 14px; }
.im-item a { display: block; color: inherit; text-decoration: none; }
.im-item img { display: block; width: 100%; height: auto; border-radius: 14px; transition: transform .35s ease; }
.im-item a:hover img { transform: scale(1.02); }
.im-item figcaption { display: flex; flex-direction: column; gap: 2px; padding: 8px 4px 0; }
.im-veiculo { font-size: .72rem; letter-spacing: .18em; text-transform: uppercase; font-weight: 700; color: var(--teal-circo); }
.im-titulo { font-size: .95rem; line-height: 1.35; }
.im-item a:hover .im-titulo { text-decoration: underline; }
.im-item.so-texto figcaption { padding: 14px 16px; border-radius: 14px; background: var(--azul-nevoa); }
.nao-achou { text-align: center; padding: 80px 0; font-size: 1.4rem; }

/* ---------- LIGHTBOX ---------- */
.lb { position: fixed; inset: 0; z-index: 9500; display: none; align-items: center; justify-content: center; background: rgba(29,33,64,.94); padding: 56px 64px; overflow: auto; }
.lb.aberto { display: flex; }
.lb-conteudo { margin: auto; flex: none; display: flex; flex-direction: column; align-items: center; gap: 12px; }
.lb-conteudo img, .lb-conteudo video { width: auto; height: auto; max-width: none; max-height: none;   /* tamanho original (rola se for maior que a tela) */ border-radius: 12px; background: var(--ceu-noite); }
.lb-conteudo iframe { width: min(1100px, 90vw); aspect-ratio: 16 / 9; border: 0; border-radius: 12px; }
.lb-legenda { margin: 0; color: var(--creme); font-family: var(--f-mao); font-size: 1.4rem; text-align: center; }
.lb button { position: absolute; width: 48px; height: 48px; border-radius: 50%; border: 2px solid var(--tinta); background: var(--amarelo-sol); color: var(--tinta); font-size: 1.4rem; line-height: 1; padding: 0; transition: background .2s, color .2s; }
.lb button:hover { background: var(--rosa-pink); color: var(--creme); }
.lb-fechar { top: 14px; right: 14px; }
.lb-ant { left: 10px; top: 50%; translate: 0 -50%; } .lb-prox { right: 10px; top: 50%; translate: 0 -50%; }
@media (max-width: 700px) { .lb { padding: 64px 12px; } .lb-ant, .lb-prox { top: auto; bottom: 10px; translate: none; } }

/* ---------- RASTRO da varinha e FADA ---------- */
.rastro-camada { position: fixed; inset: 0; z-index: 10003; pointer-events: none; overflow: hidden; }
.rastro { position: absolute; width: var(--s, 12px); height: var(--s, 12px); margin: calc(var(--s, 12px) / -2) 0 0 calc(var(--s, 12px) / -2); background: center / contain no-repeat; animation: some-rastro .75s ease-out forwards; }
@keyframes some-rastro { from { opacity: 1; transform: scale(1) rotate(0); } to { opacity: 0; transform: translate(var(--dx, 0), 16px) scale(.2) rotate(140deg); } }

.fada { position: fixed; left: 0; top: 0; z-index: 10000; pointer-events: auto; will-change: transform; touch-action: manipulation; }
.fada-in { position: relative; width: 100%; height: 100%; }
.fada.inverte .fada-in { transform: scaleX(-1); }
.fada img { display: block; width: 100%; height: 100%; user-select: none; -webkit-user-drag: none; }
.fada .asa { position: absolute; inset: 0; }                       /* asas ficam atrás do corpo */
.fada .corpo { position: relative; }
@media (prefers-reduced-motion: no-preference) { .fada .asa { animation: bater .5s ease-in-out infinite alternate; } }
@keyframes bater { from { transform: rotate(-3deg) scale(1, 1); } to { transform: rotate(5.5deg) scale(1, .93); } }
.po-canvas { position: fixed; left: 0; top: 0; width: 100vw; height: 100vh; z-index: 10001; pointer-events: none; }   /* tamanho em CSS = tela, mesmo com tela retina */

/* ---------- Movimento reduzido: sem rastro, piscadas, fada, brilhos ---------- */
@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  .rastro-camada, .fada, .po-canvas, .brilho-chuva { display: none !important; }
  .voa { animation: none; top: var(--y, 50%); }
  .voa img { animation: none; }
  .cab, .trabalhos, .card, .card *, .gal-item * { transition-duration: .01s !important; }
}