/* PORTFÓLIO — só o que a home não tem.
   Cores, fontes, grade, cabeçalho, botões, lista de serviços, processo,
   dúvidas e rodapé vêm de /styles.css; aqui entram a abertura e as prévias. */

.mobile-nav a[aria-current="page"] { color: var(--cyan); }

/* ---------------------------------------------------------------- abertura
   Mesma estrutura do hero da home (frase na margem, rodapé com o índice),
   mas sem ocupar a tela inteira: quem chega pelo link do WhatsApp já vê a
   primeira prévia começando logo abaixo. */
.port-hero { position: relative; padding: clamp(64px, 8vw, 120px) var(--margem) 0; }
.port-foot { position: static; margin-top: clamp(72px, 8vw, 120px); padding-bottom: 34px; }
.port-title {
  font: 600 clamp(3.2rem, 7.6vw, 7.4rem) var(--display);
  line-height: .9; letter-spacing: -.09em;
  margin: 30px 0 34px;
}
.port-title em { font-style: normal; color: var(--campo-realce); }
.port-title .junto { white-space: nowrap; }

/* ----------------------------------------------------------------- prévias
   Cada prévia é uma CARTA com a paleta do próprio cliente. Ela repete a
   divisão da página: o número na coluna do índice, e na coluna do conteúdo
   o nome, as duas telas e o que o site faz — tudo começando e terminando nas
   mesmas linhas do título da seção. */
.previas { background: var(--campo-fundo); color: var(--campo-texto); --S: calc(100svh - var(--topo)); }
.previas .section-text { color: var(--campo-texto-2); }
/* aqui "o que vem no site" é preta: verde colado no verde da chamada final
   fazia um vão de 200px da mesma cor, sem borda — lia como buraco */
.services { --campo-fundo: var(--ink); --campo-texto-2: #aebbb7; --campo-fio: var(--line); }
/* Aqui cada prévia tem o próprio número: o índice da seção não acompanha. */
.previas > .section-index { position: static; }

/* a paleta de cada cliente, tirada do próprio site dele (contraste medido:
   tinta2 e realce ≥ 4,5:1 sobre o fundo de cada carta) */
.c-suud     { --c-fundo: #f5f0e6; --c-tinta: #3b2722; --c-tinta2: #6b4f45; --c-fio: rgba(59, 39, 34, .2);     --c-realce: #914b3c; }   /* marfim, café e terracota do Suud */
.c-casaviva { --c-fundo: #a8321a; --c-tinta: #f6eedf; --c-tinta2: #f3d9c6; --c-fio: rgba(246, 238, 223, .3);  --c-realce: #ffd86b; }   /* o terracota e o amarelo da Casa Viva */
.c-carvalho { --c-fundo: #141814; --c-tinta: #efe9dd; --c-tinta2: #bdb6a8; --c-fio: rgba(239, 233, 221, .16); --c-realce: #d4a869; }   /* o preto, o osso e o latão da Carvalho */
.c-cemevi   { --c-fundo: #dcefe9; --c-tinta: #103f39; --c-tinta2: #3f625d; --c-fio: rgba(16, 63, 57, .22);    --c-realce: #a8412f; }   /* o coral da marca escurecido: #d95f4d dava 3,08:1 no número */

.caso {
  grid-column: 1 / -1; margin-top: clamp(56px, 6vw, 96px);
  --vao: clamp(14px, 1.8vw, 32px);
  --pad: clamp(22px, 2.4vw, 40px);
}
/* A carta: a cor sangra além da coluna (margem negativa = padding), então o
   conteúdo continua na grade da página e a cor tem respiro em volta. */
.caso-cartao {
  color: var(--c-tinta); background: var(--c-fundo);
  border-radius: 22px; margin-inline: calc(-1 * var(--pad)); padding: var(--pad);
  display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 3fr); column-gap: var(--coluna-gap);
}
.caso-num { grid-column: 1; font: 500 .72rem var(--display); letter-spacing: .08em; color: var(--c-realce); padding-top: .9em; }
.caso-conteudo { grid-column: 2; min-width: 0; container-type: inline-size; display: grid; grid-template-columns: minmax(0, 1fr); }
/* no arranjo empilhado o bloco de texto não tem caixa: nome, telas e feitos
   são filhos diretos da coluna, em ordem */
.caso-texto { display: contents; }
.caso-cab { order: 1; display: grid; grid-template-columns: minmax(0, 1fr) auto auto; align-items: center; gap: 12px 26px; }
.caso-nome h3 { font: 600 clamp(1.9rem, 3.4vw, 3.1rem)/1 var(--display); letter-spacing: -.07em; margin: 0; }
.caso-nome p { margin: 8px 0 0; color: var(--c-tinta2); font-size: .95rem; }
.caso-selo {
  font: 500 .72rem var(--display); letter-spacing: .1em; text-transform: uppercase; white-space: nowrap;
  color: var(--c-tinta2); border: 1px solid var(--c-fio); border-radius: 999px; padding: 7px 12px;
}
.caso .text-link {
  color: var(--c-tinta); white-space: nowrap;
  /* sublinhado colado no texto (não na base da caixa de 44px): assim o texto
     fica no mesmo centro do selo ao lado, e a área de toque continua 44px */
  border-bottom: 0; padding-bottom: 0;
  text-decoration: underline; text-decoration-thickness: 1px; text-decoration-color: var(--c-fio); text-underline-offset: 6px;
}

/* As duas telas lado a lado, topo E base na mesma linha, com a altura
   --telas-h; a largura sai dela: computador = (altura − barra de 36px) × 1,6;
   celular = (altura − moldura de 14px) × 0,4621 + 14px. Então o par mede
   2,0621 × altura + vão − 50px. A altura é o MENOR de três tetos: o que sobra
   da tela depois do nome e dos feitos (a carta inteira gruda numa tela), a
   largura da coluna (o par encosta na borda direita sempre que a altura
   deixa) e 44rem. Largura do celular dentro do par (L = 100cqw − vão):
   (L × 0,2888 + 22px × 0,4621 + 14px) ÷ 1,2888. */
.caso-telas {
  order: 2; margin-top: 24px;
  /* medido: nome + feitos + respiros = 345px em 1280×720 (16px), 385px em
     1920×1080 (18px); a reserva fica 12–20px acima disso */
  --reserva: calc(15rem + 2 * var(--pad) + 44px);
  --telas-h: min(calc(var(--S) - var(--reserva)), calc((100cqw - var(--vao) + 50px) / 2.0621), 44rem);
  --caso-w: calc(var(--telas-h) * 2.0621 + var(--vao) - 50px);
  width: 100%; max-width: var(--caso-w);
  container-type: inline-size;
  display: flex; align-items: stretch; gap: var(--vao);
}
.caso-telas figure { margin: 0; }
.tela-desktop {
  flex: 1 1 0; min-width: 0; align-self: start;
  border-radius: 14px; overflow: hidden; background: #fff;
  outline: 1px solid var(--c-fio); outline-offset: 0;
  box-shadow: 0 34px 60px -34px rgba(11, 13, 14, .5);
}
.tela-janela { position: relative; aspect-ratio: 16 / 10; overflow: hidden; background: #fff; }
.tela-barra {
  height: 34px; display: flex; align-items: center; padding: 0 16px;
  background: #e3e6e0; border-bottom: 1px solid rgba(11, 13, 14, .1);
  font: 500 .72rem var(--display); letter-spacing: .02em; color: #6b7672;
}
.tela-celular {
  flex: 0 0 calc(((100cqw - var(--vao)) * .2888 + 22px * .4621 + 14px) / 1.2888);
  position: relative; overflow: hidden;
  border: 7px solid var(--ink); border-radius: 30px; background: var(--ink);
  outline: 1px solid var(--c-fio); outline-offset: 0;
  box-shadow: 0 34px 60px -26px rgba(11, 13, 14, .55);
}
.tela-rola { position: absolute; top: 0; left: 0; display: block; width: 100%; height: auto; }

.caso-feitos-bloco { order: 3; margin-top: 24px; padding-top: 18px; border-top: 1px solid var(--c-fio); }
.caso-rotulo { margin: 0; font: 500 .72rem var(--display); letter-spacing: .08em; color: var(--c-tinta2); }
.caso-feitos { list-style: none; margin: 14px 0 0; padding: 0; display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); }
.caso-feitos li { display: grid; align-content: start; gap: 6px; padding: 0 24px 0 0; }
.caso-feitos li + li { padding-left: 24px; border-left: 1px solid var(--c-fio); }
.caso-feitos b { font: 500 1.12rem var(--display); letter-spacing: -.04em; }
.caso-feitos span { color: var(--c-tinta2); font-size: .9rem; line-height: 1.45; max-width: 22rem; }

/* ------------------------------------------------------------ O BARALHO
   Desktop com animação por rolagem. Cada artigo (.caso) é um TRILHO parado,
   mais alto que a tela, que serve de linha do tempo; o palco de dentro gruda
   embaixo do cabeçalho com a carta centralizada. Os trilhos se sobrepõem em
   uma tela (margem negativa): a carta seguinte sobe por cima da anterior, que
   ainda está grudada — e recua de leve enquanto é coberta. Dentro de cada
   carta, o site rola nas molduras no trecho em que ela está sozinha.

   Com S = altura útil da tela (100svh − topo) e D = tempo sozinha:
   trilho = 2S + D (S subindo até grudar, D sozinha, S sendo coberta); a
   última não é coberta: S + D. Em "cover" do trilho: gruda em S, fica
   sozinha até S + D e é coberta até 2S + D. */
@supports (animation-timeline: view()) {
  @media (prefers-reduced-motion: no-preference) and (min-width: 801px) {
    .previas { --D: 75svh; }
    .caso { margin-top: 0; height: calc(2 * var(--S) + var(--D)); view-timeline: --caso block; }
    .caso:first-of-type { margin-top: 24px; }
    .caso + .caso { margin-top: calc(-1 * var(--S)); }
    .caso:last-of-type { height: calc(var(--S) + var(--D)); }
    .caso-palco { position: sticky; top: var(--topo); height: var(--S); display: flex; flex-direction: column; justify-content: center; }
    .caso-cartao {
      box-shadow: 0 -30px 60px -30px rgba(11, 13, 14, .5), 0 30px 60px -40px rgba(11, 13, 14, .4);
      transform-origin: 50% 30%;
      animation: recua linear both; animation-timeline: --caso;
      animation-range: cover calc(var(--S) + var(--D)) cover calc(2 * var(--S) + var(--D));
    }
    .caso:last-of-type .caso-cartao { animation: none; }
    .caso-telas .tela-rola {
      animation: rola-tela linear both; animation-timeline: --caso;
      animation-range: cover var(--S) cover calc(var(--S) + var(--D));
    }
  }
  /* celular: cartas em sequência; o site rola de leve na moldura enquanto
     ela atravessa a tela */
  @media (prefers-reduced-motion: no-preference) and (max-width: 800px) {
    /* A moldura mostra o TOPO do site até chegar no meio da tela (é ali que se
       olha) e só então o site rola junto com o dedo, devagar, até a moldura ir
       saindo pelo topo. O inset desconta o cabeçalho grudado: "meio" é o meio da área
       visível. (Antes a rolagem começava com a moldura entrando por baixo e,
       no meio da tela, a primeira dobra do site já tinha passado.) */
    .caso-telas { view-timeline: --telas block; view-timeline-inset: var(--topo) 0px; }
    .caso-telas .tela-rola { animation: rola-leve linear both; animation-timeline: --telas; animation-range: contain 50% exit 40%; }   /* termina com a moldura saindo pelo topo: o mesmo percurso em ~40% mais rolagem, mais devagar */
  }
}
@keyframes recua { to { scale: .94; opacity: .3; } }
@keyframes rola-leve { to { translate: 0 -40%; } }

/* ------------------------------------------------- tela larga E baixa
   Notebook 16:9, 1080p e ultrawide: empilhando nome, telas e feitos a altura
   acaba antes da largura, e as molduras ficavam soltas, sem encostar na borda
   direita. Aqui o texto vai para a esquerda e as molduras para a direita,
   encostadas na borda da coluna; os feitos ficam um embaixo do outro. Acima
   de 1100px de altura (2560×1440, 3440×1440) sobra altura: volta o empilhado
   com as molduras grandes. */
@media (min-width: 801px) and (min-aspect-ratio: 17 / 10) and (max-height: 1100px) {
  .caso-conteudo { display: flex; align-items: center; gap: var(--coluna-gap); }
  .caso-texto { display: flex; flex-direction: column; flex: 1 1 18rem; min-width: 0; }
  .caso-cab { grid-template-columns: auto auto; justify-content: start; }
  .caso-nome { grid-column: 1 / -1; }
  .caso-feitos-bloco { margin-top: 26px; }
  .caso-feitos { grid-template-columns: minmax(0, 1fr); margin-top: 6px; }
  .caso-feitos li, .caso-feitos li + li { padding: 12px 0 0; border-left: 0; }
  .caso-feitos li + li { margin-top: 12px; border-top: 1px solid var(--c-fio); }
  .caso-feitos span { max-width: none; }
  .caso-telas {
    flex: none; margin-top: 0; margin-left: auto;
    --telas-h: min(calc(var(--S) - 2 * var(--pad) - 48px), calc((100cqw - 18rem - var(--coluna-gap) - var(--vao) + 50px) / 2.0621), 44rem);
  }
}

/* ----------------------------------------------------------------- ultrawide
   Acima de 1800px o site inteiro passa a uma coluna (o índice sobe para cima
   do título): o número da carta faz o mesmo, senão o nome nascia 400px à
   direita do título da seção. */
@media (min-width: 1800px) {
  .caso-cartao { grid-template-columns: minmax(0, 1fr); }
  .caso-num { padding-top: 0; margin-bottom: 22px; }
  .caso-conteudo { grid-column: 1; }
}

/* ----------------------------------------------------------------- celular
   Cada carta é um bloco de cor na sequência. Tela estreita demais para as
   duas molduras lado a lado: o celular passa por cima do canto do
   computador, com um deslocamento claro (não "quase alinhado"). */
@media (max-width: 800px) {
  .port-hero { padding-top: 64px; }
  .port-foot { margin-top: 64px; padding-bottom: 24px; }
  /* "Nota 5 no Google." mede 7em: a fonte é a largura útil ÷ 7,3, então a
     primeira linha sempre cabe inteira e o título fica maior que os h2. */
  .port-title { font-size: min(4.6rem, calc((100vw - 40px) / 7.3)); margin: 22px 0 26px; }

  .caso { margin-top: 18px; --pad: 20px; }
  .caso:first-of-type { margin-top: 44px; }
  /* UMA margem só, igual dos dois lados: o número deixa de ser uma coluna (que
     empurrava o conteúdo ~30px para dentro) e vira um rótulo em cima do nome. */
  .caso-cartao { margin-inline: 0; padding: 22px var(--pad) 24px; border-radius: 18px; grid-template-columns: minmax(0, 1fr); }
  .caso-num { grid-column: 1; padding-top: 0; margin-bottom: 12px; }
  .caso-conteudo { grid-column: 1; }
  /* selo à esquerda e "Ver ao vivo" à direita, no mesmo centro */
  .caso-cab { grid-template-columns: auto auto; justify-content: space-between; align-items: center; gap: 16px 12px; }
  .caso-nome { grid-column: 1 / -1; }
  /* sem isto a pílula estica até o fim da coluna (a coluna cresce com o nome que atravessa as duas) */
  .caso-selo { justify-self: start; }
  .caso-link { justify-self: end; }

  /* as duas telas: o computador na margem da esquerda, o celular na da direita
     e CENTRADO na altura do computador — sobra o mesmo tanto em cima e embaixo
     (antes ele pendurava ~100px abaixo e deixava um buraco à esquerda) */
  .caso-telas { display: grid; grid-template-columns: repeat(100, minmax(0, 1fr)); align-items: center; gap: 0; margin-top: 22px; max-width: none; }
  .tela-desktop { grid-column: 1 / 88; grid-row: 1; align-self: center; border-radius: 10px; }
  .tela-barra { height: 24px; padding: 0 10px; font-size: .58rem; }
  .caso-telas .tela-celular { grid-column: 65 / 101; grid-row: 1; align-self: center; margin-top: 0; border-width: 5px; border-radius: 20px; box-sizing: content-box; aspect-ratio: 780 / 1688; }

  .caso-feitos-bloco { margin-top: 22px; padding-top: 16px; }
  .caso-feitos { grid-template-columns: minmax(0, 1fr); margin-top: 4px; }
  .caso-feitos li, .caso-feitos li + li { padding: 14px 0; border-left: 0; border-bottom: 1px solid var(--c-fio); }
  .caso-feitos li:last-child { border-bottom: 0; padding-bottom: 0; }
  .caso-feitos span { max-width: none; }
}