/* ═══════════════════════════════════════════════════════════════
   DSIRE — SISTEMA VISUAL DAS SEÇÕES ABAIXO DA HERO
   A Hero (iframe isolado) permanece intocada. Tudo aqui é #root.
   ═══════════════════════════════════════════════════════════════ */

html, body { background: #000; }
body{ overflow-x:clip; }

#root{
  /* — cor — */
  --ink:#000;
  --ink-2:#060608;
  --ink-3:#0B0B0F;
  --text:#F3F2ED;
  --text-soft:#A2A6B0;
  --text-faint:#6A6E78;
  --accent:#F0B429;
  --accent-ink:#161206;
  --blue:#6A9ACA;
  --blue-ink:#22406B;
  --line:rgba(255,255,255,.085);
  --line-2:rgba(255,255,255,.17);
  --surface:rgba(255,255,255,.026);
  --surface-2:rgba(255,255,255,.045);

  /* — ritmo vertical (impacto → respiro → conteúdo) — */
  /* Espacamento unico: TODAS as secoes usam o mesmo respiro vertical,
     entao o vao entre quaisquer duas secoes e sempre identico. */
  --pad:clamp(78px,8.6vw,126px);
  --pad-impact:var(--pad);
  --pad-normal:var(--pad);
  --pad-tight:var(--pad);
  --gutter:clamp(20px,4.2vw,56px);
  --maxw:1280px;

  /* — movimento — */
  --ease:cubic-bezier(.22,.68,.24,1);
  --out:cubic-bezier(.16,1,.3,1);

  background:var(--ink);
  color:var(--text);
  font-family:'Inter',sans-serif;
  -webkit-font-smoothing:antialiased;
  position:relative;
}

#root section, #root footer{ background:var(--ink); position:relative; }
#root *,#root *::before,#root *::after{ box-sizing:border-box; }
#root img{ max-width:100%; }

/* ── contêiner ── */
.d-sec{ padding-left:var(--gutter); padding-right:var(--gutter); }
.d-wrap{ max-width:var(--maxw); margin:0 auto; width:100%; }

.pad-impact{ padding-top:var(--pad-impact);    padding-bottom:var(--pad-impact); }
.pad-normal{ padding-top:var(--pad-normal);    padding-bottom:var(--pad-normal); }
.pad-tight { padding-top:var(--pad-tight);     padding-bottom:var(--pad-tight); }
.pt-impact { padding-top:var(--pad-impact); }
.pt-normal { padding-top:var(--pad-normal); }
.pt-tight  { padding-top:var(--pad-tight); }
.pb-impact { padding-bottom:var(--pad-impact); }
.pb-normal { padding-bottom:var(--pad-normal); }
.pb-tight  { padding-bottom:var(--pad-tight); }

/* ── ponte visual vinda da Hero (aparece UMA vez, não em toda seção) ── */
.d-bridge::before{
  content:"";position:absolute;left:50%;top:0;transform:translateX(-50%);
  width:min(880px,110vw);height:340px;pointer-events:none;
  background:radial-gradient(ellipse 50% 100% at 50% 0%,rgba(240,180,41,.075),transparent 70%);
}
.d-bridge::after{
  content:"";position:absolute;left:50%;top:0;width:1px;height:clamp(56px,7vw,92px);
  background:linear-gradient(to bottom,var(--accent),rgba(240,180,41,0));
  opacity:.55;
}

/* ── índice de seção (mesma linguagem em toda a Home) ── */
.d-index{
  display:flex;align-items:center;gap:16px;
  padding-bottom:clamp(28px,3.4vw,44px);
  font-family:'IBM Plex Mono',monospace;font-size:10.5px;
  letter-spacing:.2em;text-transform:uppercase;color:var(--text-faint);
}
.d-index b{ color:var(--accent);font-weight:500; }
.d-index i{ flex:1;height:1px;background:var(--line);font-style:normal; }

/* ── tipografia ── */
.d-h2{
  font-family:'Oswald',sans-serif;font-weight:700;
  font-size:clamp(36px,5.4vw,57px);
  line-height:1.03;letter-spacing:-.016em;text-transform:uppercase;
  color:var(--text);margin:0;text-wrap:balance;
}
.d-h3{
  font-family:'Oswald',sans-serif;font-weight:700;
  font-size:clamp(24px,3.4vw,30px);
  line-height:1.08;letter-spacing:-.008em;text-transform:uppercase;
  color:var(--text);margin:0;
}
.d-h4{
  font-family:'Oswald',sans-serif;font-weight:600;
  font-size:clamp(15px,1.25vw,19px);
  line-height:1.15;letter-spacing:.03em;text-transform:uppercase;
  color:var(--text);margin:0;
}
.d-eyebrow{
  font-family:'IBM Plex Mono',monospace;font-size:11px;
  letter-spacing:.19em;text-transform:uppercase;color:var(--accent);
  display:block;margin:0 0 clamp(14px,1.6vw,20px);
}
.d-body{
  font-family:'Inter',sans-serif;font-weight:300;
  font-size:clamp(15px,1.1vw,17px);line-height:1.72;
  color:var(--text-soft);margin:0;max-width:46ch;
}
.d-meta{
  font-family:'IBM Plex Mono',monospace;font-size:10.5px;
  letter-spacing:.15em;text-transform:uppercase;color:var(--text-faint);
}
/* ── secao que sobe e cobre a anterior durante a entrada ──
   No repouso ela volta a posicao natural, entao o espacamento
   final continua igual ao de todas as outras secoes. */
.d-cover{
  position:relative;z-index:3;background:var(--ink);
  will-change:transform;
}
.d-cover::before{
  content:"";position:absolute;left:0;right:0;top:0;height:1px;
  background:linear-gradient(90deg,transparent,rgba(240,180,41,.5),transparent);
  opacity:var(--edge,0);transition:opacity .5s var(--ease);
}
.d-cover::after{
  content:"";position:absolute;left:0;right:0;top:-90px;height:90px;
  pointer-events:none;background:linear-gradient(to top,rgba(0,0,0,.96),transparent);
  opacity:var(--edge,0);
}
/* fade extra no titulo dessas duas secoes */
.d-cover .d-line > span{ opacity:0;transition:transform 1.05s var(--out) var(--d,0s),opacity .9s var(--ease) var(--d,0s); }
.d-cover.is-in .d-line > span{ opacity:1; }

/* ══════════════════════════════════════════════════════════════
   TRANSICAO 02 → 03 (e SO entre essas duas)
   A secao 02 trava no topo e fica absolutamente parada; a secao 03
   sobe de baixo e desliza POR CIMA dela, como uma camada fisica,
   ate cobri-la por inteiro. Dai em diante a rolagem segue normal.

   Feito com position:sticky nativo: o movimento e a propria rolagem,
   entao acompanha exatamente a velocidade do dedo/scroll, reverte
   sozinho ao subir, e nao precisa de recalculo quando a barra do
   navegador mobile aparece ou some. Nao muda o fluxo do documento —
   nenhum espaco extra, salto ou reposicionamento de elemento.
   ══════════════════════════════════════════════════════════════ */
/* especificidade de ID: precisa vencer `#root section{position:relative}` */

/* Seção CURTA, com o conteúdo no alto: prende pelo TOPO. O espaço extra
   (d-pin-hold) é a distância de rolagem da fase congelada — é preto puro,
   então não aparece como "buraco": a seção seguinte cobre tudo. */
#root section.d-pin-under{ position:sticky;top:0;z-index:1; }
#root section.d-pin-hold{ padding-bottom:calc(var(--pad) + var(--hold,60svh)); }

/* Seção ALTA (conteúdo maior que uma tela): prender por top:0 deixaria
   o final dela — onde fica o REC — inalcançável, e bottom:0 a puxaria
   para cima desde o início. Usa-se `top` NEGATIVO, calculado no JS a
   partir da altura real: a seção rola normal e congela exatamente
   quando o fim do conteúdo encosta na base da tela. */
#root section.d-pin-tail{ position:sticky;z-index:1; }
/* distância de rolagem da fase congelada (preto puro, nada visível) */
.d-pin-spacer{ height:var(--hold,60svh);pointer-events:none; }

/* coberta 100%: solta o pin e devolve a ordem natural de pintura */
#root section.d-pin-under.is-unpinned,
#root section.d-pin-tail.is-unpinned{ position:relative;top:auto;bottom:auto;z-index:auto; }

#root section.d-pin-over { position:relative;z-index:2;background:var(--ink); }

/* ── Indicador de continuidade da rolagem ──────────────────────
   So aparece durante a fase congelada (hold) do pin e some assim que
   a proxima secao comeca a cobrir. Consome o estado que o usePinPhase
   ja calcula — nenhum listener de scroll novo.
   position:fixed e seguro aqui: nenhum ancestral (#root/.d-sec) tem
   transform/filter/perspective, entao nao ha containing block. */
.d-scrollcue{
  position:fixed;left:50%;bottom:clamp(20px,3.2vh,36px);
  transform:translateX(-50%);
  display:flex;flex-direction:column;align-items:center;gap:7px;
  z-index:3;pointer-events:none;user-select:none;
  font-family:'IBM Plex Mono',monospace;font-size:10px;
  letter-spacing:.34em;text-transform:uppercase;text-indent:.34em;
  color:var(--text-faint);
  opacity:0;transition:opacity .5s ease;
}
.d-scrollcue.is-on{ opacity:.6; }
.d-scrollcue svg{ display:block;animation:d-cue-float 2.2s ease-in-out infinite; }
@keyframes d-cue-float{
  0%,100%{ transform:translateY(0);opacity:.5 }
  50%    { transform:translateY(4px);opacity:.95 }
}
@media (prefers-reduced-motion:reduce){
  .d-scrollcue svg{ animation:none }
  .d-scrollcue{ transition:none }
}

.d-accent{ color:var(--accent); }
/* limite de medida so no desktop: no mobile o titulo usa a largura toda.
   ATENCAO: 'ch' resolve contra a fonte do container (~16px), o que espremia
   o headline de 55px numa coluna de ~200px. A medida e em 'em' no proprio
   titulo, entao acompanha o tamanho real dele. */
.sec-title{ max-width:none; }
.sec-title .d-h2{ max-width:14em; }
.d-num{
  font-family:'Oswald',sans-serif;font-weight:700;
  font-size:clamp(11px,.85vw,12px);letter-spacing:.14em;color:var(--accent);
}

/* ── botões ── */
.d-btn{
  font-family:'Inter',sans-serif;font-weight:700;font-size:12px;
  letter-spacing:.09em;text-transform:uppercase;text-decoration:none;
  display:inline-flex;align-items:center;justify-content:center;gap:10px;
  padding:16px 30px;border-radius:14px;border:1px solid transparent;
  min-height:52px;cursor:pointer;
  transition:transform .3s var(--out),background-color .3s var(--ease),
             border-color .3s var(--ease),color .3s var(--ease),box-shadow .4s var(--ease);
}
.d-btn svg{ transition:transform .35s var(--out); }
.d-btn--solid{ background:var(--accent);color:var(--accent-ink);box-shadow:0 8px 30px rgba(240,180,41,.20); }
.d-btn--ghost{ background:transparent;color:var(--text);border-color:var(--line-2); }
.d-btn--blue { background:#22406B;color:#fff; }
@media (hover:hover) and (pointer:fine){
  .d-btn:hover{ transform:translateY(-3px); }
  .d-btn:hover svg{ transform:translateX(4px); }
  .d-btn--solid:hover{ box-shadow:0 16px 44px rgba(240,180,41,.34); }
  .d-btn--ghost:hover{ border-color:var(--accent);color:var(--accent); }
  .d-btn--blue:hover { background:#2E4F80; }
}
.d-btn:focus-visible{ outline:2px solid var(--accent);outline-offset:3px; }

/* ── reveal: text mask + rise ── */
/* a máscara precisa de folga em cima (Ã, Â, Õ) e embaixo (Ç, Ã) para não cortar acentos */
.d-line{ display:block;overflow:hidden;padding:.18em 0 .16em;margin:-.18em 0 -.16em; }
.d-line > span{
  display:block;transform:translateY(108%);
  transition:transform 1.05s var(--out) var(--d,0s);
}
.is-in .d-line > span{ transform:none; }

.d-rise{
  opacity:0;transform:translateY(26px);
  transition:opacity .95s var(--out) var(--d,0s),transform .95s var(--out) var(--d,0s);
}
.is-in .d-rise, .d-rise.is-in{ opacity:1;transform:none; }

.d-fade{ opacity:0;transition:opacity 1s var(--ease) var(--d,0s); }
.is-in .d-fade, .d-fade.is-in{ opacity:1; }

.d-wipe{ clip-path:inset(0 100% 0 0);transition:clip-path 1.15s var(--out) var(--d,0s); }
.is-in .d-wipe{ clip-path:inset(0 0 0 0); }

/* ── mídia editorial ── */
.d-media{ position:relative;overflow:hidden;background:var(--ink-3);border-radius:2px; }
.d-media img{ display:block;width:100%;height:100%;object-fit:cover; }
.d-media--reveal img{
  transform:scale(1.14);transition:transform 1.4s var(--out) var(--d,0s);
}
.is-in .d-media--reveal img{ transform:scale(1); }
.d-media::after{
  content:"";position:absolute;inset:0;pointer-events:none;
  background:linear-gradient(to top,rgba(0,0,0,.82) 0%,rgba(0,0,0,.15) 46%,transparent 72%);
}
.d-media--plain::after{ display:none; }

/* ═══════════ 02 MANIFESTO ═══════════ */
.manifesto-grid{
  display:grid;grid-template-columns:minmax(0,1.08fr) minmax(0,.92fr);
  gap:clamp(40px,5.5vw,88px);align-items:start;
}
.manifesto-lead{ position:relative; }
.processo{ position:relative;margin-top:clamp(30px,3.6vw,44px); }
.processo-track{
  position:absolute;left:0;top:10px;bottom:10px;width:1px;background:var(--line);
}
.processo-fill{
  position:absolute;left:0;top:10px;width:1px;background:var(--accent);
  height:var(--fill,0%);transition:height .28s linear;
  box-shadow:0 0 14px rgba(240,180,41,.55);
}
.processo-item{
  display:grid;grid-template-columns:auto 1fr;align-items:baseline;gap:clamp(16px,1.8vw,26px);
  padding:clamp(13px,1.5vw,17px) 0 clamp(13px,1.5vw,17px) clamp(22px,2.4vw,32px);
  border-bottom:1px solid var(--line);position:relative;
}
.processo-item:last-child{ border-bottom:0; }
.processo-item::before{
  content:"";position:absolute;left:-3px;top:50%;width:7px;height:7px;border-radius:50%;
  background:var(--ink);border:1px solid var(--line-2);transform:translateY(-50%);
  transition:background .4s var(--ease),border-color .4s var(--ease),box-shadow .4s var(--ease);
}
.processo-item.on::before{
  background:var(--accent);border-color:var(--accent);box-shadow:0 0 12px rgba(240,180,41,.7);
}
.processo-item .lbl{
  font-family:'Oswald',sans-serif;font-weight:500;font-size:clamp(18px,1.7vw,24px);
  letter-spacing:.045em;text-transform:uppercase;color:var(--text-soft);
  transition:color .4s var(--ease);
}
.processo-item.on .lbl{ color:var(--text); }

/* ═══════════ 03 PRODUÇÕES ═══════════ */
.prod-head{
  display:flex;justify-content:space-between;align-items:flex-end;
  gap:clamp(24px,3vw,48px);flex-wrap:wrap;
  padding-bottom:clamp(34px,4.2vw,58px);
}
.prod-lead{
  position:relative;overflow:hidden;
  aspect-ratio:21/9;border-radius:3px;background:var(--ink-3);
}
.prod-lead img{
  position:absolute;inset:-8% 0;width:100%;height:116%;object-fit:cover;
  will-change:transform;
}
.prod-lead-cap{
  position:absolute;left:0;right:0;bottom:0;z-index:2;
  padding:clamp(22px,3vw,44px);
  display:flex;align-items:flex-end;justify-content:space-between;gap:20px;flex-wrap:wrap;
}
.prod-cards{
  display:grid;grid-template-columns:repeat(6,minmax(0,1fr));
  gap:1px;background:var(--line);margin-top:1px;
}
.prod-card{
  grid-column:span 2; /* 3 cards preenchem a 1a linha (2+2+2=6), mesma largura de antes */
  position:relative;overflow:hidden;background:var(--ink);
  min-height:clamp(230px,24vw,300px);
  display:flex;flex-direction:column;justify-content:flex-end;
  padding:clamp(22px,2.4vw,30px);isolation:isolate;
}
.prod-card:nth-child(4), .prod-card:nth-child(5){ grid-column:span 3; } /* 2a linha: 2 cards, sem coluna vazia */
.prod-card img{
  position:absolute;inset:0;width:100%;height:100%;object-fit:cover;z-index:-2;
  opacity:.30;transform:scale(1.02);
  transition:transform 1.1s var(--out),opacity .7s var(--ease);
}
.prod-card::before{
  content:"";position:absolute;inset:0;z-index:-1;
  background:linear-gradient(to top,rgba(0,0,0,.94) 8%,rgba(0,0,0,.35) 62%,rgba(0,0,0,.1) 100%);
}
.prod-card .idx{
  position:absolute;top:clamp(20px,2.2vw,26px);left:clamp(22px,2.4vw,30px);
}
.prod-card .desc{
  font-family:'Inter',sans-serif;font-weight:300;font-size:13.5px;line-height:1.6;
  color:var(--text-soft);margin:10px 0 0;max-width:32ch;
  opacity:0;transform:translateY(10px);
  transition:opacity .55s var(--ease),transform .55s var(--out);
}
.prod-card .rule{
  height:1px;background:var(--accent);width:0;margin-top:16px;
  transition:width .7s var(--out);
}
@media (hover:hover) and (pointer:fine){
  .prod-card:hover img{ transform:scale(1.11);opacity:.46; }
  .prod-card:hover .desc{ opacity:1;transform:none; }
  .prod-card:hover .rule{ width:44px; }
}
/* ── 03 · "Além do que você viu" — CTA de fechamento das categorias ──
   Substitui a antiga lista de tags/pills. Mesma gramatica editorial
   do resto da secao (d-eyebrow, texto, d-body, d-btn). */
.prod-alem{
  margin-top:clamp(40px,4.4vw,64px);
  padding-top:clamp(32px,3.6vw,48px);
  border-top:1px solid var(--line);
  max-width:52ch;
}
.prod-alem-t{
  font-family:'Oswald',sans-serif;font-weight:700;text-transform:uppercase;
  font-size:clamp(26px,3.2vw,38px);line-height:1.12;letter-spacing:-.008em;
  color:var(--text);margin:0 0 clamp(16px,1.8vw,22px);
}
.prod-alem .d-body{ margin:0 0 clamp(26px,2.8vw,34px); }

/* ── 03 · PRODUÇÃO CONTÍNUA — fechamento editorial da secao 03 ──
   Nao e uma secao nova: e o ultimo movimento da 03. Por isso usa o
   marcador rotulo+regua (mesma gramatica do .d-index) no lugar de uma
   borda cheia, e repete a composicao do .prod-head (texto a esquerda,
   apoio + CTA a direita) para nascer da propria linguagem da secao. */
.prod-cont{ margin-top:clamp(26px,2.8vw,38px); }

.prod-cont-mark{
  display:flex;align-items:center;gap:16px;
  font-family:'IBM Plex Mono',monospace;font-size:10.5px;
  letter-spacing:.2em;text-transform:uppercase;color:var(--accent);
  padding-bottom:clamp(20px,2.2vw,30px);
}
.prod-cont-mark i{ flex:1;height:1px;background:var(--line);font-style:normal; }

.prod-cont-grid{
  display:grid;grid-template-columns:minmax(0,1.05fr) minmax(0,.95fr);
  gap:clamp(26px,3.2vw,56px);align-items:end;
}
.prod-cont-t{ margin:0;max-width:16em; }
.prod-cont-side{
  display:flex;flex-direction:column;align-items:flex-start;
  gap:clamp(18px,2vw,24px);
}
.prod-cont-side .d-body{ margin:0;color:var(--text-soft);max-width:44ch; }

/* ── transicao 03 → 04 ──
   O respiro entre o fim da 03 e o indice "04 · PORTFOLIO" era ~220px de
   preto (110 de padding em cada lado). Reduzido dos dois lados, escopado
   por ID/classe para nao mexer no espacamento das demais secoes. */
#root section#projetos{ padding-bottom:clamp(44px,4.6vw,64px); }
#root section.sec-portfolio{ padding-top:clamp(48px,5vw,70px); }

/* ── 07 · DOIS MODELOS DE CONTRATAÇÃO ──
   O caminho "empresas e marcas" passa a conter dois modelos.
   O card do Dsire App permanece intocado e com o mesmo peso. */
.conv-modos{ display:flex;flex-direction:column;margin-top:2px; }
.conv-modo{ display:flex;flex-direction:column;align-items:flex-start; }
.conv-modo + .conv-modo{
  border-top:1px solid var(--line);
  margin-top:clamp(24px,2.6vw,34px);
  padding-top:clamp(24px,2.6vw,34px);
}
.conv-modo-t{
  font-family:'Oswald',sans-serif;font-weight:700;text-transform:uppercase;
  font-size:clamp(18px,1.6vw,22px);line-height:1.1;letter-spacing:-.004em;
  color:var(--text);margin:10px 0 12px;
}
/* neutraliza o margin-top:auto herdado de .conv-path .d-btn,
   que empurraria os botoes dos modelos para o rodape do card */
.conv-path .conv-modo .d-body{ margin:0 0 clamp(18px,2vw,24px); }
.conv-path .conv-modo .d-btn{ margin-top:0;align-self:flex-start; }

/* ═══════════ 04 PORTFÓLIO ═══════════ */
.pf-list{ border-top:1px solid var(--line); }
.pf-row{
  position:relative;display:grid;
  grid-template-columns:auto minmax(0,1fr) auto;
  align-items:center;gap:clamp(18px,2.6vw,40px);
  padding:clamp(22px,2.6vw,34px) 0;
  border-bottom:1px solid var(--line);
  text-decoration:none;cursor:pointer;
  transition:padding-left .55s var(--out);
}
.pf-row::before{
  content:"";position:absolute;left:0;right:0;bottom:-1px;height:1px;
  background:var(--accent);transform:scaleX(0);transform-origin:left;
  transition:transform .7s var(--out);
}
.pf-name{
  font-family:'Oswald',sans-serif;font-weight:600;
  font-size:clamp(30px,4.2vw,44px);line-height:1.02;letter-spacing:-.005em;
  text-transform:uppercase;color:var(--text);margin:0 0 6px;
  transition:color .35s var(--ease);
}
.pf-year{ font-family:'IBM Plex Mono',monospace;font-size:11.5px;color:var(--text-faint);transition:color .35s; }
.pf-arrow{ color:var(--text-faint);transition:color .35s var(--ease),transform .45s var(--out); }
.pf-thumb-m{ display:none; }
@media (hover:hover) and (pointer:fine){
  .pf-row:hover{ padding-left:clamp(14px,1.6vw,26px); }
  .pf-row:hover::before{ transform:scaleX(1); }
  .pf-row:hover .pf-name,
  .pf-row:hover .pf-year,
  .pf-row:hover .pf-arrow{ color:var(--accent); }
  .pf-row:hover .pf-arrow{ transform:translateX(6px); }
}
/* imagem flutuante que segue o cursor (somente desktop) */
.pf-float{
  position:fixed;top:0;left:0;z-index:60;pointer-events:none;
  width:clamp(210px,17vw,272px);aspect-ratio:4/3;border-radius:4px;overflow:hidden;
  opacity:0;transform:translate3d(-50%,-50%,0) scale(.9) rotate(-3deg);
  transition:opacity .35s var(--ease),transform .55s var(--out);
  box-shadow:0 30px 80px rgba(0,0,0,.65);will-change:transform;
  display:none;
}
.pf-float img{ width:100%;height:100%;object-fit:cover;display:block; }
.pf-float.on{ opacity:1;transform:translate3d(-50%,-50%,0) scale(1) rotate(-2deg); }
@media (hover:hover) and (pointer:fine){ .pf-float{ display:block; } }

/* ═══════════ 05 DSIRE APP ═══════════ */
.app-grid{
  display:grid;grid-template-columns:minmax(0,1fr) minmax(0,.86fr);
  gap:clamp(40px,5.5vw,84px);align-items:center;
}
.app-feats{ margin-top:clamp(28px,3.2vw,40px); }
.app-feat{
  display:flex;align-items:center;gap:16px;
  padding:14px 0;border-bottom:1px solid var(--line);
}
.app-feat .dot{
  width:5px;height:5px;border-radius:50%;background:var(--accent);flex-shrink:0;
  box-shadow:0 0 10px rgba(240,180,41,.6);
}
.app-feat span{ font-family:'Inter',sans-serif;font-size:15px;color:var(--text-soft); }

/* ─ mockup do app + orbita de particulas (mesma composicao da landing /app/) ─ */
.ds-orbit{
  position:relative;display:flex;align-items:center;justify-content:center;
  min-height:clamp(420px,44vw,560px);
}
/* as telas transbordam a caixa: e o que da a sensacao de orbita ao redor */
.ds-orbit-back,.ds-orbit-front{
  position:absolute;inset:-10% -14%;width:128%;height:120%;pointer-events:none;
}
.ds-orbit-back{ z-index:0; }
.ds-orbit-front{ z-index:3; }
.ds-orbit-phone{
  position:relative;z-index:2;
  width:clamp(238px,26vw,320px);
  animation:dsFloat 7s ease-in-out infinite;transform-origin:center center;
}
.ds-orbit-phone img{
  display:block;width:100%;height:auto;
  filter:drop-shadow(0 46px 90px rgba(0,0,0,.66));
  -webkit-user-select:none;user-select:none;
}
@keyframes dsFloat{ 0%,100%{ transform:translateY(0); } 50%{ transform:translateY(-14px); } }
@media (prefers-reduced-motion:reduce){
  .ds-orbit-phone{ animation:none; }
}

/* ─ palco sticky do mockup ─ */
.stage-track{ position:relative; }
.stage{
  /* o palco tem SEMPRE a altura exata da janela: um min-height maior que a
     viewport faria o sticky soltar em telas baixas (celular deitado) */
  position:sticky;top:0;height:100svh;min-height:0;
  display:grid;grid-template-columns:minmax(0,1fr) auto minmax(0,1fr);
  align-items:center;gap:clamp(24px,3.4vw,56px);
  padding:clamp(56px,7vw,92px) 0;
}
.stage-side{ display:flex;flex-direction:column;gap:clamp(14px,1.6vw,20px); }
.stage-side--l{ text-align:right;align-items:flex-end; }
.stage-step{
  max-width:34ch;opacity:.26;
  transition:opacity .55s var(--ease),transform .55s var(--out),color .55s var(--ease);
}
.stage-step.on{ opacity:1; }
.stage-step p{
  font-family:'Inter',sans-serif;font-weight:300;font-size:13.5px;line-height:1.62;
  color:var(--text-soft);margin:7px 0 0;
  max-height:0;overflow:hidden;opacity:0;
  transition:max-height .6s var(--out),opacity .5s var(--ease);
}
.stage-step.on p{ max-height:96px;opacity:1; }

/* no desktop quem mostra os modulos sao as colunas laterais;
   a legenda sob o aparelho e exclusiva de tablet/mobile */
.m-steps{ display:none; }

.phone-wrap{ perspective:1400px;display:flex;justify-content:center; }
.phone{
  position:relative;width:clamp(230px,20vw,286px);aspect-ratio:9/19;
  border-radius:44px;padding:9px;background:linear-gradient(160deg,#31343d,#141519 42%,#2b2e37);
  box-shadow:0 60px 120px rgba(0,0,0,.72),0 0 0 1px rgba(255,255,255,.07),
             0 0 90px rgba(240,180,41,.055);
  transform-style:preserve-3d;will-change:transform;
}
.phone::after{
  content:"";position:absolute;inset:0;border-radius:44px;pointer-events:none;
  background:linear-gradient(115deg,rgba(255,255,255,.16),transparent 34%,transparent 66%,rgba(255,255,255,.07));
  mix-blend-mode:screen;
}
.phone-screen{
  position:relative;width:100%;height:100%;border-radius:36px;overflow:hidden;
  background:#000;
}
.phone-notch{
  position:absolute;top:8px;left:50%;transform:translateX(-50%);
  width:34%;height:22px;border-radius:99px;background:#0b0c0f;z-index:6;
}
.screen{
  position:absolute;inset:0;opacity:0;
  transition:opacity .6s var(--ease),transform .8s var(--out);
  transform:scale(1.03);
}
.screen.on{ opacity:1;transform:none; }
.screen img{ position:absolute;left:0;top:0;width:100%;height:auto;min-height:100%;object-fit:cover;will-change:transform; }
/* video real do app: mesmo enquadramento da imagem. object-fit:cover mantem a
   proporcao 9:16 do arquivo dentro da tela 9:19 do aparelho, sem esticar —
   o overflow:hidden + border-radius de .phone-screen fazem o recorte. */
.screen video{
  position:absolute;left:0;top:0;width:100%;height:100%;
  object-fit:cover;object-position:center top;
  border:0;outline:none;background:#000;pointer-events:none;
}
.screen video::-webkit-media-controls{ display:none !important; }
.screen video::-webkit-media-controls-enclosure{ display:none !important; }

/* placeholder honesto — nenhuma interface falsa */
.screen-slot{
  position:absolute;inset:0;display:flex;flex-direction:column;
  justify-content:space-between;padding:44px 22px 26px;
  background:radial-gradient(120% 80% at 50% 0%,rgba(240,180,41,.10),transparent 58%),#050506;
}
.screen-slot .glyph{
  flex:1;display:flex;align-items:center;justify-content:center;
}
.screen-slot .cap{ text-align:center; }
.slot-badge{
  display:inline-block;font-family:'IBM Plex Mono',monospace;font-size:8.5px;
  letter-spacing:.2em;text-transform:uppercase;color:var(--accent);
  border:1px solid rgba(240,180,41,.4);border-radius:99px;padding:5px 10px;margin-top:12px;
}
.stage-dots{
  position:absolute;left:50%;bottom:clamp(18px,3vw,34px);transform:translateX(-50%);
  display:flex;gap:8px;z-index:5;
}
.stage-dots i{
  width:22px;height:2px;background:var(--line-2);border-radius:2px;
  transition:background .4s var(--ease);
}
.stage-dots i.on{ background:var(--accent); }

/* ═══════════ 06 ECOSSISTEMA ═══════════ */
.eco-grid{
  display:grid;grid-template-columns:repeat(3,minmax(0,1fr));
  gap:1px;background:var(--line);border:1px solid var(--line);
}
.eco-cell{
  background:var(--ink);padding:clamp(28px,3.4vw,46px);
  position:relative;overflow:hidden;transition:background .45s var(--ease);
}
.eco-cell::before{
  content:"";position:absolute;left:0;top:0;height:2px;width:100%;
  background:var(--accent);transform:scaleX(0);transform-origin:left;
  transition:transform .7s var(--out);
}
@media (hover:hover) and (pointer:fine){
  .eco-cell:hover{ background:var(--surface); }
  .eco-cell:hover::before{ transform:scaleX(1); }
}
.eco-cell .n{ display:block;margin-bottom:clamp(28px,3.6vw,52px); }
.eco-pairs{ margin-top:clamp(30px,3.6vw,48px);border-top:1px solid var(--line); }
.eco-pair{
  display:grid;grid-template-columns:minmax(0,1fr) 40px minmax(0,1fr);
  align-items:center;gap:clamp(14px,2vw,28px);
  padding:clamp(18px,2.1vw,26px) 0;border-bottom:1px solid var(--line);
}
.eco-pair .from{
  font-family:'Oswald',sans-serif;font-weight:400;font-size:clamp(15px,1.55vw,22px);
  text-transform:uppercase;letter-spacing:.02em;color:var(--text-faint);margin:0;
}
.eco-pair .to{
  font-family:'Oswald',sans-serif;font-weight:600;font-size:clamp(15px,1.55vw,22px);
  text-transform:uppercase;letter-spacing:.02em;color:var(--text);margin:0;
}
.eco-pair .ar{ color:var(--accent);display:flex;justify-content:center; }

/* ═══════════ 07 CONVERSÃO ═══════════ */
.conv{ position:relative;overflow:hidden; }
.conv-bg{
  position:absolute;inset:0;width:100%;height:100%;object-fit:cover;opacity:.13;
  will-change:transform;
}
.conv-veil{
  position:absolute;inset:0;
  background:radial-gradient(ellipse 70% 60% at 50% 40%,rgba(0,0,0,.55),rgba(0,0,0,.93) 78%);
}
.conv-paths{
  display:grid;grid-template-columns:repeat(2,minmax(0,1fr));
  gap:1px;background:var(--line);border:1px solid var(--line);
  margin-top:clamp(40px,5vw,72px);
}
.conv-path{
  background:rgba(0,0,0,.62);padding:clamp(32px,4vw,58px);
  position:relative;overflow:hidden;
  display:flex;flex-direction:column;
  transition:background .45s var(--ease);
}
.conv-path::before{
  content:"";position:absolute;left:0;top:0;height:2px;width:100%;
  background:var(--accent);transform:scaleX(0);transform-origin:left;
  transition:transform .7s var(--out);
}
.conv-path--b::before{ background:var(--blue); }
.conv-path .d-btn{ margin-top:auto; align-self:flex-start; }
.conv-path .d-body{ margin:0 0 clamp(28px,3.2vw,40px); }
@media (hover:hover) and (pointer:fine){
  .conv-path:hover{ background:rgba(240,180,41,.045); }
  .conv-path--b:hover{ background:rgba(106,154,202,.055); }
  .conv-path:hover::before{ transform:scaleX(1); }
}

/* ═══════════ 08 FOOTER ═══════════ */
.ft{ border-top:1px solid var(--line);padding:var(--pad) var(--gutter) clamp(30px,3vw,40px); }
.ft-top{
  display:flex;align-items:flex-start;justify-content:space-between;
  gap:clamp(28px,4vw,56px);flex-wrap:wrap;
  padding-bottom:clamp(30px,3.4vw,44px);border-bottom:1px solid var(--line);
}
.ft-nav{ display:flex;gap:clamp(20px,2.6vw,40px);flex-wrap:wrap; }
.ft-nav a{
  font-family:'IBM Plex Mono',monospace;font-size:11px;letter-spacing:.15em;
  text-transform:uppercase;color:var(--text-faint);text-decoration:none;
  display:inline-flex;align-items:center;min-height:44px;
  transition:color .3s;
}
.ft-nav a:hover{ color:var(--accent); }
.ft-bot{
  display:flex;align-items:center;justify-content:space-between;
  gap:20px;flex-wrap:wrap;padding-top:clamp(22px,2.4vw,30px);
}
.ft-soc{ display:flex;gap:10px; }
.ft-soc a{
  width:44px;height:44px;border-radius:50%;border:1px solid var(--line-2);
  display:inline-flex;align-items:center;justify-content:center;
  color:var(--text);text-decoration:none;transition:border-color .3s,color .3s,transform .3s var(--out);
}
.ft-soc a:hover{ border-color:var(--accent);color:var(--accent);transform:translateY(-3px); }

/* ═══════════════════════════════════════════════════════
   TABLET
   ═══════════════════════════════════════════════════════ */
@media (max-width:1080px){
  .manifesto-grid{ grid-template-columns:1fr;gap:clamp(30px,4vw,44px); }
  .app-grid{ grid-template-columns:1fr;gap:clamp(38px,5vw,56px); }
  /* Em coluna unica a orbita passa a ocupar a largura inteira do wrap, entao
     o transbordo lateral das telas (128%) empurraria a pagina para o lado.
     Mantem o transbordo vertical (nao gera barra) e prende o horizontal. */
  .ds-orbit-back,.ds-orbit-front{ inset:-8% 0;width:100%;height:116%; }
  .eco-grid{ grid-template-columns:1fr; }
  /* Mesma mecanica do desktop: o palco continua preso enquanto as telas
     trocam. Muda so a composicao — em vez das duas colunas laterais, a
     legenda do modulo ativo aparece sob o aparelho. */
  .stage{
    grid-template-columns:1fr;justify-items:center;align-content:center;
    grid-auto-rows:min-content;gap:clamp(16px,2.6vw,26px);
    padding:clamp(28px,5vw,56px) 0;
  }
  .stage-side{ display:none; }
  .stage-dots{ position:relative;left:auto;bottom:auto;transform:none;justify-content:center;margin:0; }
  /* o aparelho passa a ser limitado pela ALTURA da tela, nunca pela largura,
     para caber junto com a legenda dentro de 100svh */
  .phone{ width:auto;height:min(54svh,470px);aspect-ratio:9/19; }
  .m-steps{ display:block;width:100%;max-width:520px;margin:0 auto;text-align:center;min-height:96px; }
  /* so o modulo ativo fica visivel — e o equivalente das colunas do desktop */
  .m-step{ display:none;grid-template-columns:1fr;gap:4px;justify-items:center;padding:0; }
  .m-step.on{ display:grid;animation:m-step-in .5s var(--out) both; }
  .m-step .lbl{ color:var(--accent);margin-top:2px; }
  .m-step .d-body{ max-width:34ch;margin-left:auto;margin-right:auto; }
}
@keyframes m-step-in{ from{opacity:0;transform:translateY(8px)} to{opacity:1;transform:none} }
@media (max-width:900px){
  .prod-cards{ grid-template-columns:1fr 1fr; }
  /* reseta o span:2/3 do desktop (grid de 6 colunas): aqui o grid tem
     so 2 colunas, entao cada card volta a ocupar 1, e so o ultimo
     (5o, orfao na 3a linha) preenche a linha inteira. */
  .prod-cards .prod-card{ grid-column:auto; }
  .prod-cards .prod-card:last-child{ grid-column:1 / -1; }
  .conv-paths{ grid-template-columns:1fr; }
}

/* ═══════════════════════════════════════════════════════
   MOBILE (≤768px) — recomposição, não redução
   ═══════════════════════════════════════════════════════ */
@media (max-width:768px){
  #root{
    --pad:64px;
    --gutter:20px;
  }
  .d-h2{ font-size:clamp(30px,8.4vw,42px);line-height:1.06;letter-spacing:-.012em; }
  .d-h3{ font-size:clamp(20px,5.6vw,26px); }
  .d-body{ font-size:15.5px;line-height:1.68;max-width:100%; }
  .d-index{ padding-bottom:24px;font-size:10px;letter-spacing:.16em; }
  .sec-title{ max-width:none; }
  .d-btn{ width:100%;padding:17px 24px;min-height:56px; }
  .d-btn--auto{ width:auto; }

  .d-bridge::before{ height:220px; }

  /* Manifesto: no mobile mais estreito (<=390px) o topo com padding
     cheio deixava so ~103px de folga entre "Execucao" (ultimo item do
     trilho) e a borda da tela — na barra de endereco expandida do
     Safari real essa folga some e a palavra corta. Reduz so o
     padding-top desta secao (unica com .d-pin-hold) pra subir o
     conteudo um pouco e sobrar mais folga embaixo; o padding-bottom
     (distancia de rolagem do pin) fica intocado. */
  #root section.d-pin-hold{ padding-top:32px; }

  /* Produções */
  .prod-head{ padding-bottom:28px; }
  .prod-lead{ aspect-ratio:4/3; }
  .prod-lead-cap{ padding:20px; }
  .prod-cards{ grid-template-columns:1fr; }
  .prod-cards .prod-card:last-child{ grid-column:auto; }
  /* card compacto: numero acima do titulo, sem buraco vertical */
  .prod-card{ min-height:0;padding:22px 20px 24px; }
  .prod-card img{ opacity:.32; }
  .prod-card::before{
    background:linear-gradient(to top,rgba(0,0,0,.96) 16%,rgba(0,0,0,.74) 56%,rgba(0,0,0,.42) 100%);
  }
  .prod-card .idx{ position:static;display:block;margin-bottom:12px; }
  .prod-card .desc{ opacity:1;transform:none; }
  .prod-card .rule{ width:32px;margin-top:13px; }

  /* Portfólio — a imagem NUNCA some no mobile */
  .pf-list{ border-top:0; }
  .pf-row{
    grid-template-columns:1fr;gap:0;padding:0 0 26px;
    border-bottom:1px solid var(--line);margin-bottom:26px;
  }
  .pf-row:last-child{ margin-bottom:0; }
  .pf-row::before{ display:none; }
  .pf-row > .pf-num{ display:none; }
  .pf-thumb-m{
    display:block;position:relative;width:100%;aspect-ratio:16/10;
    overflow:hidden;border-radius:3px;margin-bottom:16px;background:var(--ink-3);
  }
  .pf-thumb-m img{ width:100%;height:100%;object-fit:cover;display:block; }
  .pf-thumb-m .badge{
    position:absolute;left:12px;top:12px;z-index:2;
    font-family:'Oswald',sans-serif;font-weight:700;font-size:11px;letter-spacing:.14em;
    color:var(--accent);background:rgba(0,0,0,.62);border:1px solid rgba(240,180,41,.35);
    border-radius:99px;padding:5px 11px;
  }
  .pf-name{ font-size:clamp(23px,7vw,32px);margin-bottom:7px; }
  .pf-row > div:last-child{
    display:flex;align-items:center;justify-content:space-between;
    width:100%;margin-top:12px;gap:12px;
  }

  /* App */
  .processo{ margin-top:6px; }
  .ds-orbit{ min-height:clamp(360px,86vw,470px); }
  .ds-orbit-phone{ width:clamp(210px,54vw,270px); }
  .phone{ width:auto;height:min(52svh,440px);max-width:74vw; }
  .m-steps{ min-height:104px; }

  /* Ecossistema */
  .eco-cell{ padding:26px 22px; }
  .eco-cell .n{ margin-bottom:22px; }
  .eco-pair{ grid-template-columns:1fr;gap:8px;padding:18px 0; }
  .eco-pair .ar{ justify-content:flex-start;transform:rotate(90deg);width:20px; }

  /* Conversão */
  .prod-cont{ margin-top:26px; }
  .prod-cont-mark{ padding-bottom:18px; }
  .prod-cont-grid{ grid-template-columns:1fr;gap:20px; }
  .prod-cont-side .d-btn{ align-self:stretch; }
  #root section#projetos{ padding-bottom:38px; }
  #root section.sec-portfolio{ padding-top:42px; }
  .conv-paths{ grid-template-columns:1fr;margin-top:32px; }
  .conv-path{ padding:30px 22px; }
  .conv-path .d-btn{ align-self:stretch; }

  /* Footer */
  .ft-top{ flex-direction:column;align-items:flex-start;gap:14px; }
  .ft-nav{ flex-direction:column;gap:0;width:100%; }
  .ft-nav a{ min-height:48px;border-bottom:1px solid var(--line);width:100%; }
  .ft-nav a:last-child{ border-bottom:0; }
  .ft-bot{ flex-direction:column;align-items:flex-start;gap:18px; }
}

@media (max-width:390px){
  #root{ --gutter:16px;--pad:56px; }
  .d-h2{ font-size:clamp(27px,8.2vw,34px); }
  .phone{ width:auto;height:min(48svh,400px);max-width:76vw; }
}

/* ═══════════ acessibilidade / movimento reduzido ═══════════ */
@media (prefers-reduced-motion:reduce){
  /* sem rolagem animada o trilho alto ficaria vazio: volta a empilhar */
  .stage-track{ height:auto !important; }
  .stage{ position:relative !important;top:auto !important;height:auto !important;min-height:0 !important; }
  .m-steps{ display:block; }
  .m-step{ display:grid !important;border-bottom:1px solid var(--line);padding:14px 0 !important; }
  .m-step.on{ animation:none !important; }
  .phone{ height:auto !important;width:min(72vw,268px) !important; }
  #root *,#root *::before,#root *::after{
    transition-duration:.01ms !important;animation-duration:.01ms !important;
  }
  .d-line > span{ transform:none !important; }
  .d-rise,.d-fade{ opacity:1 !important;transform:none !important; }
  .d-wipe{ clip-path:none !important; }
  .d-media--reveal img{ transform:none !important; }
  .phone{ transform:none !important; }
}

/* ══════════════════════════════════════════════════════════════
   NOVOS ELEMENTOS DE TRANSIÇÃO
   Só adicionam camadas; nenhuma regra existente foi alterada.
   ══════════════════════════════════════════════════════════════ */

/* ── Indicador de gravação ● REC 00:00:00 ── */
.d-rec{
  display:inline-flex;align-items:center;gap:10px;
  margin-top:clamp(40px,5vw,72px);
  padding:9px 15px;
  border:1px solid var(--line);border-radius:999px;
  background:rgba(255,255,255,.02);
  font-family:'IBM Plex Mono',monospace;
  font-size:11px;letter-spacing:.18em;text-transform:uppercase;
  color:var(--text-soft);
}
.d-rec-dot{
  width:7px;height:7px;border-radius:50%;
  background:#E5322B;flex:0 0 auto;
  box-shadow:0 0 8px rgba(229,50,43,.7);
  animation:d-rec-pulse 2.4s ease-in-out infinite;
}
@keyframes d-rec-pulse{ 0%,100%{opacity:1} 50%{opacity:.42} }
.d-rec-label{ color:var(--text); }
.d-rec-time{
  color:var(--text-faint);letter-spacing:.12em;
  font-variant-numeric:tabular-nums;
}

/* ── Vazio de transição antes da seção do app ── */
.d-transicao-app{
  margin-top:clamp(56px,8vw,120px);
  display:flex;flex-direction:column;align-items:center;
  gap:clamp(28px,4vw,56px);
}

/* ── Claquete 3D: detalhe discreto, não protagonista ── */
.d-claquete{
  width:clamp(120px,16vw,190px);
  aspect-ratio:1/1;
  opacity:.62;
  pointer-events:none;
}
.d-claquete model-viewer{
  --progress-bar-color:transparent;
  background:transparent;
  pointer-events:none;
}

/* ── Frase que desliza da esquerda até o centro ── */
.d-slidephrase{
  width:100%;max-width:var(--maxw);
  padding:0 var(--gutter);
  overflow:hidden;
  pointer-events:none;user-select:none;
}
.d-slidephrase-in{
  display:block;
  font-family:'Oswald',sans-serif;font-weight:700;
  font-size:clamp(22px,4.4vw,58px);
  line-height:1.05;letter-spacing:-.01em;text-transform:uppercase;
  color:var(--text);
  opacity:var(--o,.22);
  /* começa deslocada à esquerda e assenta exatamente no centro */
  text-align:center;
  transform:translateX(calc((var(--slide,0) - 1) * 42%));
  will-change:transform,opacity;
}

@media (max-width:768px){
  .d-transicao-app{ gap:30px;margin-top:56px; }
  .d-claquete{ width:clamp(108px,32vw,150px); }
  .d-slidephrase-in{
    font-size:clamp(20px,7vw,32px);
    transform:translateX(calc((var(--slide,0) - 1) * 30%));
  }
  .d-rec{ margin-top:36px;font-size:10.5px;gap:9px;padding:8px 13px; }
}

/* movimento reduzido: tudo assentado, sem depender da rolagem */
@media (prefers-reduced-motion:reduce){
  .d-slidephrase-in{ transform:none !important;opacity:1 !important; }
  .d-rec-dot{ animation:none !important; }
}


/* ── Portfólio · player de vídeo real ──
   O MP4 só entra no DOM depois do clique no trabalho, evitando carregar
   o arquivo pesado durante a abertura da Home. */
.pf-video-modal{
  position:fixed;inset:0;z-index:9999;
  display:flex;align-items:center;justify-content:center;
  padding:clamp(18px,4vw,56px);
  background:rgba(0,0,0,.88);
  backdrop-filter:blur(12px);
  -webkit-backdrop-filter:blur(12px);
}
.pf-video-shell{
  position:relative;width:min(1180px,100%);
  max-height:calc(100svh - 36px);
  display:flex;flex-direction:column;
  background:#050505;border:1px solid rgba(255,255,255,.14);
  box-shadow:0 38px 120px rgba(0,0,0,.78);
}
.pf-video-player{
  display:block;width:100%;height:auto;max-height:min(76svh,760px);
  aspect-ratio:16/9;object-fit:contain;background:#000;
}
.pf-video-shell--vertical{
  width:min(560px,100%);
}
.pf-video-shell--vertical .pf-video-player{
  aspect-ratio:9/16;
  max-height:min(76svh,820px);
}
.pf-video-close{
  position:absolute;right:12px;top:12px;z-index:3;
  width:42px;height:42px;border-radius:999px;
  border:1px solid rgba(255,255,255,.25);
  background:rgba(0,0,0,.7);color:#fff;
  font:300 30px/1 Arial,sans-serif;
  display:flex;align-items:center;justify-content:center;
  cursor:pointer;transition:border-color .25s,color .25s,transform .25s;
}
.pf-video-close:hover{
  color:var(--accent);border-color:rgba(240,180,41,.65);transform:scale(1.04);
}
.pf-video-caption{
  display:flex;align-items:baseline;justify-content:space-between;gap:24px;
  padding:16px 18px 18px;border-top:1px solid rgba(255,255,255,.10);
}
.pf-video-title{
  margin:0;font-family:'Oswald',sans-serif;font-weight:600;
  text-transform:uppercase;font-size:clamp(18px,2vw,26px);color:var(--text);
}
@media (max-width:720px){
  .pf-video-modal{ padding:10px; }
  .pf-video-shell{ max-height:calc(100svh - 20px); }
  .pf-video-player{ max-height:70svh; }
  .pf-video-caption{ flex-direction:column;align-items:flex-start;gap:6px;padding:14px; }
  .pf-video-close{ width:38px;height:38px;right:8px;top:8px;font-size:27px; }
}

/* DSIRE — Portfólio: enquadramento das capas externas בלבד. Não altera player/modal. */
/* Card 02 — Cobertura de eventos: prioriza o rosto da modelo. */
.pf-row:nth-child(2) .pf-thumb-m img{ object-position:50% 30%; }
/* Card 03 — Pôr do sol: prioriza pôr do sol, prédios inteiros e parte do chão. */
.pf-row:nth-child(3) .pf-thumb-m img{ object-position:50% 82%; }
/* Card 04 — Marcela Holanda: prioriza o rosto da modelo. */
.pf-row:nth-child(4) .pf-thumb-m img{ object-position:50% 22%; }

/* No desktop, aplica o mesmo enquadramento à miniatura flutuante no hover. */
.pf-float img[src*="capa-02.png"]{ object-position:50% 30%; }
.pf-float img[src*="capa-03.png"]{ object-position:50% 82%; }
.pf-float img[src*="capa-04.png"]{ object-position:50% 22%; }