/* Portfólio em formato de apresentação.
   No computador, cada seção é um slide 16:9 que cabe na tela.
   No celular, os slides viram blocos empilhados. */

:root{--verde:#203e30;--verde-2:#16301f;--noite:#0e1b14;--lima:#d6e6a1;--creme:#f5ebe1;--laranja:#f28146;--tinta:#1b2a21;--suave:#4a5a4e}
*{box-sizing:border-box}
html{scroll-behavior:smooth}
body{margin:0;background:var(--noite);color:var(--tinta);font:16px/1.55 'DM Sans',Arial,sans-serif;-webkit-font-smoothing:antialiased}
img,video,svg{display:block;max-width:100%}
button{font:inherit;color:inherit;cursor:pointer}
a{color:inherit}
h1,h2,h3,p,ul,ol,dl,dd,figure{margin:0}
ul,ol{padding:0;list-style:none}
.serif{font-family:'Instrument Serif',Georgia,serif;font-style:italic;font-weight:400}
.meta{font:500 12px/1.4 'DM Mono',monospace;letter-spacing:.06em;text-transform:uppercase;color:var(--suave)}
.nota-mao{position:absolute;z-index:6;font:600 26px/1 Caveat,cursive;color:var(--verde);background:var(--creme);border:2px solid var(--verde);padding:6px 12px 8px;border-radius:4px;box-shadow:3px 3px 0 var(--verde)}

.pular{position:fixed;left:12px;top:-60px;z-index:100;background:var(--lima);color:var(--verde);font-weight:700;padding:10px 16px;border-radius:10px;border:2px solid var(--verde)}
.pular:focus{top:12px}
:focus-visible{outline:3px solid var(--laranja);outline-offset:3px}

/* ---------- Estrutura dos slides ---------- */
.deck{display:flex;flex-direction:column;align-items:center;gap:10px;padding:8px 0 0}
.slide{position:relative;width:calc(100vw - 16px);overflow:hidden;border-radius:14px;container-type:inline-size;padding:76px 20px 44px}
.escuro{background-color:var(--verde-2);color:var(--creme);background-image:linear-gradient(rgba(214,230,161,.06) 1px,transparent 1px),linear-gradient(90deg,rgba(214,230,161,.06) 1px,transparent 1px);background-size:36px 36px}
.papel{background-color:var(--creme);background-image:linear-gradient(rgba(32,62,48,.075) 1px,transparent 1px),linear-gradient(90deg,rgba(32,62,48,.075) 1px,transparent 1px);background-size:36px 36px}
.lima-fundo{background-color:var(--lima);background-image:linear-gradient(rgba(32,62,48,.09) 1px,transparent 1px),linear-gradient(90deg,rgba(32,62,48,.09) 1px,transparent 1px);background-size:36px 36px}
.pagina{position:absolute;top:22px;right:20px;z-index:8;font:500 12px 'DM Mono',monospace;letter-spacing:.08em;opacity:.75}
.escuro .meta{color:#c9d3c4}

/* Papel rasgado de fundo */
.rasgo{position:absolute;z-index:0;overflow:visible;filter:drop-shadow(4px 5px 0 rgba(14,27,20,.18))}
.rasgo polygon{fill:var(--lima)}
.lima-fundo .rasgo polygon{fill:var(--creme)}

/* Celulares com vídeo */
.tela{position:relative;z-index:3;display:block;padding:0;border:clamp(5px,.5cqw,9px) solid #0b130f;background:#0b130f;overflow:hidden;box-shadow:0 14px 30px rgba(8,16,12,.35);transition:scale .3s,box-shadow .3s}
.celular{aspect-ratio:9/16;border-radius:clamp(16px,1.7cqw,30px)}
.tela-wide{aspect-ratio:16/9;border-radius:clamp(10px,1cqw,18px)}
.tela video{width:100%;height:100%;object-fit:cover;border-radius:inherit}
.tela:hover,.tela:focus-visible{scale:1.035;box-shadow:0 20px 40px rgba(8,16,12,.45)}
.tela-play{position:absolute;left:50%;top:50%;translate:-50% -50%;display:grid;place-items:center;width:clamp(44px,3.6cqw,64px);aspect-ratio:1;border-radius:50%;background:var(--lima);color:var(--verde);border:2px solid var(--verde);font-size:clamp(15px,1.2cqw,22px);padding-left:3px;transition:scale .25s,opacity .3s}
.tela.tocando .tela-play{opacity:.0}
.tela:hover .tela-play,.tela:focus-visible .tela-play{opacity:1;scale:1.12}
.tela-tempo{position:absolute;left:8px;bottom:8px;font:500 12px 'DM Mono',monospace;background:rgba(14,27,20,.75);color:var(--creme);padding:2px 7px;border-radius:99px}

/* Polaroids com fita */
.polaroid{position:absolute;z-index:2;background:#fffdf8;padding:clamp(7px,.7cqw,12px) clamp(7px,.7cqw,12px) 0;box-shadow:0 8px 20px rgba(14,27,20,.2)}
.polaroid img{width:100%;aspect-ratio:4/5;object-fit:cover}
.polaroid figcaption{font:600 clamp(18px,1.5cqw,26px)/1 Caveat,cursive;color:var(--verde);text-align:center;padding:9px 0 11px}
.fita{position:absolute;top:-10px;left:50%;width:42%;height:20px;translate:-50% 0;rotate:-4deg;background:rgba(214,230,161,.82);box-shadow:0 1px 2px rgba(0,0,0,.1)}

/* Botões e etiquetas */
.botao{display:inline-flex;align-items:center;gap:.5em;padding:12px 20px;border-radius:99px;border:2px solid var(--verde);background:var(--verde);color:var(--creme);font-weight:700;font-size:15px;text-decoration:none;box-shadow:4px 4px 0 var(--lima);transition:translate .2s,box-shadow .2s}
.botao:hover{translate:-2px -2px;box-shadow:6px 6px 0 var(--lima)}
.botao.claro{background:transparent;color:var(--verde);box-shadow:none;padding:8px 14px}
.botao.claro:hover{background:var(--lima)}
.botao.lima{background:var(--lima);color:var(--verde);border-color:var(--lima);box-shadow:4px 4px 0 var(--laranja)}
.chips{display:flex;flex-wrap:wrap;gap:6px}
.chips li{border:1.5px solid var(--verde);border-radius:99px;padding:4px 12px;font-size:13px;font-weight:500}
.chips .chip-formato{background:var(--lima)}
.pilula-tipo{display:inline-block;font:500 12px 'DM Mono',monospace;letter-spacing:.06em;text-transform:uppercase;border:1.5px solid var(--verde);border-radius:99px;padding:4px 12px;margin-bottom:18px}
.cap-num{font:500 13px 'DM Mono',monospace;color:var(--laranja);letter-spacing:.08em}
.lima-fundo .cap-num{color:#7a3d14}

/* ---------- Oi, eu sou a Emily ---------- */
.sobre-foto{position:relative;height:118cqw;margin:0 -8px 24px}
.sobre-foto .rasgo{left:8%;top:8%;width:84%;height:84%;rotate:-3deg}
.recorte{position:absolute;z-index:2;bottom:0;left:50%;translate:-50% 0;height:100%;width:auto;max-width:none;filter:drop-shadow(4px 0 0 var(--creme)) drop-shadow(-4px 0 0 var(--creme)) drop-shadow(0 4px 0 var(--creme)) drop-shadow(0 -4px 0 var(--creme)) drop-shadow(8px 10px 0 rgba(32,62,48,.22))}
.n1{left:56%;top:50%;rotate:-6deg}
.sobre h2,.proj-nome,.cap-titulo h2,.indice h2,.fb-titulo h2,.fotos-cab h2,.fim-texto h2{font-family:'Barlow Condensed',Impact,sans-serif;font-weight:800;text-transform:uppercase;line-height:.9;letter-spacing:-.005em}
.sobre h2{font-size:15cqw;color:var(--verde);margin:10px 0 16px}
.sobre h2 em{font-style:normal;background:linear-gradient(transparent 58%,var(--lima) 58%,var(--lima) 92%,transparent 92%)}
.sobre h2 em:after{content:'✳';color:var(--laranja);font-size:.45em;vertical-align:top;margin-left:.1em}
.sobre-texto>p:not(.meta){margin-bottom:12px;max-width:60ch}
.polaroids{position:relative;height:52cqw;margin:22px 0 10px}
.polaroids .polaroid{width:28cqw}
.polaroids .p1{left:0;top:6%;rotate:-6deg}
.polaroids .p2{left:33%;top:0;rotate:3deg;z-index:3}
.polaroids .p3{right:0;top:10%;rotate:-2deg}
.sobre-lado h3{font:700 22px/1 'Barlow Condensed',sans-serif;text-transform:uppercase;color:var(--verde);margin:22px 0 10px;letter-spacing:.02em}
.numeros{display:grid;grid-template-columns:repeat(3,1fr);gap:8px}
.numeros div{border-top:2px solid var(--verde);padding-top:6px}
.numeros dd{font:800 44px/1 'Barlow Condensed',sans-serif;color:var(--verde)}
.numeros dt{font:500 12px 'DM Mono',monospace;text-transform:uppercase;letter-spacing:.06em}
.contatos{display:flex;flex-wrap:wrap;gap:6px 18px}
.contatos a{font-weight:700;text-decoration:none;border-bottom:2px solid var(--laranja);padding:6px 0}

/* ---------- Índice ---------- */
.indice-cab .serif{font-size:24px;color:var(--lima)}
.indice h2{font-size:28cqw;color:var(--lima);margin:4px 0 12px}
.indice-cab p{color:#d9dfd2;max-width:42ch;margin-bottom:22px}
.indice-lista li{border-top:1px solid rgba(245,235,225,.22)}
.indice-lista li:last-child{border-bottom:1px solid rgba(245,235,225,.22)}
.indice-lista a{display:grid;grid-template-columns:42px 1fr auto;align-items:center;gap:10px;padding:14px 0;text-decoration:none;transition:padding .25s,color .25s}
.i-n{font:500 13px 'DM Mono',monospace;color:var(--laranja)}
.i-t{font:700 26px/1 'Barlow Condensed',sans-serif;text-transform:uppercase}
.i-q{font:500 12px 'DM Mono',monospace;text-transform:uppercase;opacity:.8;text-align:right}
.i-capas{display:none}
.i-q{grid-column:3}
.indice-lista a:hover,.indice-lista a:focus-visible{color:var(--lima);padding-left:10px}

/* ---------- Capítulos ---------- */
.capitulo{padding-bottom:20px}
.cap-titulo .serif{display:block;font-size:30px;color:var(--creme);margin-top:8px}
.cap-titulo h2{font-size:calc(var(--t) * 1.6);color:var(--lima);margin:2px 0 14px}
.etiqueta{display:inline-block;background:var(--creme);color:var(--verde);font-weight:700;font-size:14px;padding:6px 12px;rotate:-2.5deg;border-radius:3px;box-shadow:3px 3px 0 var(--laranja);margin-bottom:16px}
.cap-titulo p{color:#d9dfd2;max-width:40ch}
.cap-titulo .cap-conta{font:500 12px 'DM Mono',monospace;text-transform:uppercase;letter-spacing:.06em;color:var(--lima);margin-top:12px}
.cap-visual{position:relative;height:118cqw;margin:20px 0}
.cap-visual .rasgo{left:12%;top:4%;width:76%;height:92%;rotate:4deg}
.cap-cel{position:absolute;width:46cqw;left:50%;top:50%;translate:-50% -50%;rotate:-5deg}
.n2{left:0;bottom:6%;rotate:-8deg;background:var(--verde-2);color:var(--lima);border-color:var(--lima);box-shadow:3px 3px 0 var(--lima)}
.abas{display:flex;flex-wrap:wrap;gap:6px}
.abas a{background:var(--creme);color:var(--verde);text-decoration:none;font:700 15px/1 'Barlow Condensed',sans-serif;text-transform:uppercase;letter-spacing:.03em;padding:10px 14px;border-radius:10px;transition:background .2s,translate .2s}
.abas a:hover,.abas a:focus-visible{background:var(--lima)}

/* ---------- Projetos ---------- */
.proj-visual{position:relative;height:120cqw;margin:0 0 22px}
.proj-visual .rasgo{left:6%;top:6%;width:88%;height:88%;rotate:-2.5deg}
.principal{position:absolute;left:50%;top:50%;translate:-50% -50%;rotate:-4deg;width:48cqw}
.tela-wide.principal{width:90cqw;rotate:-2deg}
.layout-wide .proj-visual{height:84cqw}
.q1,.q2{width:30cqw}
.q1{left:0;top:4%;rotate:-8deg}
.q2{right:0;bottom:4%;rotate:7deg;z-index:4}
.layout-wide .q1,.layout-wide .q2{width:24cqw}
.layout-wide .q1{top:0}.layout-wide .q2{bottom:0}
.layout-varios .celular{position:absolute;width:40cqw}
.c1{left:3%;top:4%;rotate:-7deg}
.c2{left:31%;top:16%;rotate:3deg;z-index:4!important}
.c3{right:3%;top:3%;rotate:8deg}
.layout-varios .proj-visual:has(.c2):not(:has(.c3)) .c1{left:8%}
.layout-varios .proj-visual:has(.c2):not(:has(.c3)) .c2{left:auto;right:8%}
.layout-fila .proj-visual{height:auto;display:flex;gap:12px;overflow-x:auto;scroll-snap-type:x mandatory;padding:10px 4px 18px;margin:0 -20px 18px;padding-left:20px}
.layout-fila .celular{flex:none;width:44cqw;scroll-snap-align:start}
.proj-nome{font-size:calc(var(--n) * 2.3);color:var(--verde);margin:8px 0 6px}
.proj-sub{font-weight:700;font-size:18px;color:var(--verde);margin-bottom:14px}
.faixas{margin:18px 0 0;border-bottom:1px solid rgba(32,62,48,.25)}
.faixas button{display:grid;grid-template-columns:34px 1fr auto 30px;align-items:center;gap:8px;width:100%;text-align:left;background:none;border:0;border-top:1px solid rgba(32,62,48,.25);padding:10px 4px;transition:background .2s}
.faixas button:hover,.faixas button:focus-visible{background:rgba(214,230,161,.7)}
.f-n,.f-t{font:500 12px 'DM Mono',monospace}
.f-p{display:grid;place-items:center;width:28px;height:28px;border-radius:50%;background:var(--verde);color:var(--lima);font-size:11px;padding-left:2px}
.paleta{margin-top:16px}
.paleta span{font:500 12px 'DM Mono',monospace;text-transform:uppercase;letter-spacing:.06em;color:var(--suave)}
.paleta div{display:flex;gap:6px;margin-top:6px}
.paleta i{width:30px;height:30px;border-radius:6px;background:var(--c);border:1.5px solid rgba(32,62,48,.35)}
.opiniao{display:flex;align-items:center;justify-content:space-between;gap:12px;flex-wrap:wrap;margin-top:18px;border:2px solid var(--verde);border-radius:14px;padding:12px 14px}
.opiniao p{font:700 19px 'Barlow Condensed',sans-serif;text-transform:uppercase;color:var(--verde);display:flex;align-items:center;gap:6px}
.aspas{font:800 52px/0 Georgia,serif;color:var(--laranja);translate:0 .2em}

/* ---------- Feedbacks ---------- */
.fb-titulo .serif{display:block;font-size:26px;color:var(--verde);margin-top:8px}
.fb-titulo h2{font-size:17cqw;color:var(--verde);margin:4px 0 12px}
.fb-titulo p{max-width:40ch}
.fb-videos{position:relative;display:grid;grid-template-columns:1fr 1fr;gap:16px;margin-top:34px}
.fb{position:relative}
.fb .aspas{position:absolute;z-index:5;left:-6px;top:6px;font-size:90px}
.f1{rotate:-4deg}.f2{rotate:4deg;margin-top:30px}
.fb figcaption{font:600 22px/1 Caveat,cursive;color:var(--verde);text-align:center;margin-top:10px}

/* ---------- Fotos ---------- */
.fotos-cab .serif{display:block;font-size:26px;color:var(--lima);margin-top:8px}
.fotos-cab h2{font-size:22cqw;color:var(--lima);margin:4px 0 18px}
.fotos-grade{display:grid;grid-template-columns:1fr 1fr;gap:10px;margin-top:26px}
.fotos-grade a{position:relative;display:block;overflow:hidden;border-radius:12px;aspect-ratio:4/5}
.fotos-grade img{width:100%;height:100%;object-fit:cover;transition:scale .5s}
.fotos-grade a:hover img{scale:1.05}
.fotos-grade span{position:absolute;left:8px;bottom:8px;background:var(--creme);color:var(--verde);font:500 12px 'DM Mono',monospace;text-transform:uppercase;padding:3px 8px;border-radius:99px}

/* ---------- Encerramento ---------- */
.fim-texto h2{font-size:14cqw;color:var(--verde);margin:10px 0 14px}
.fim-texto h2 em{font:italic 400 1.05em 'Instrument Serif',Georgia,serif;text-transform:none;letter-spacing:0}
.fim-acoes{display:flex;flex-wrap:wrap;align-items:center;gap:18px;margin-top:20px}
.link-insta{font-weight:700;text-decoration:none;border-bottom:2px solid var(--laranja);padding:6px 0}
.fim-foto{position:relative;height:92cqw;margin-top:26px}
.fim-foto .rasgo{left:4%;top:10%;width:92%;height:86%;rotate:2deg}
.fim-foto .recorte{height:auto;width:100%;max-width:100%}
.n3{left:0;top:2%;rotate:-7deg}

/* ---------- Rodapé, controle e player ---------- */
.rodape{width:calc(100vw - 16px);margin:10px auto 0;display:flex;flex-wrap:wrap;justify-content:space-between;gap:10px;padding:22px 20px 90px;color:#d9dfd2;font:500 13px 'DM Mono',monospace;text-transform:uppercase;letter-spacing:.06em}
.rodape a{text-decoration:none;padding:6px 0}
.controle{position:fixed;z-index:50;right:12px;bottom:12px;display:flex;align-items:center;gap:4px;padding:5px;background:rgba(14,27,20,.9);backdrop-filter:blur(8px);color:var(--creme);border:1px solid rgba(214,230,161,.35);border-radius:99px;font:500 13px 'DM Mono',monospace}
.controle button{width:38px;height:38px;border-radius:50%;border:0;background:transparent;color:var(--creme);font-size:16px}
.controle button:hover{background:var(--lima);color:var(--verde)}
.controle-n{padding:0 6px}.controle-n b{color:var(--lima);font-weight:500}
.controle a{background:var(--lima);color:var(--verde);text-decoration:none;font-weight:500;padding:9px 14px;border-radius:99px;margin-left:4px}
.player{width:min(94vw,980px);max-height:94vh;border:0;border-radius:18px;padding:16px;background:var(--verde-2);color:var(--creme)}
.player::backdrop{background:rgba(8,16,12,.86);backdrop-filter:blur(4px)}
.player-topo,.player-base{display:flex;justify-content:space-between;align-items:center;gap:12px}
.player-topo span{font:500 12px 'DM Mono',monospace;text-transform:uppercase;letter-spacing:.06em;color:#c9d3c4}
.player-topo h2{font:800 28px/1 'Barlow Condensed',sans-serif;text-transform:uppercase;color:var(--lima)}
.player-fechar{background:var(--creme);color:var(--verde);border:0;border-radius:99px;padding:9px 16px;font-weight:700}
.player video{width:100%;max-height:72vh;background:#000;border-radius:12px;margin:12px 0}
.player-base p{color:#d9dfd2;font-size:14px}
.player-base div{display:flex;align-items:center;gap:8px;font:500 13px 'DM Mono',monospace}
.player-base button{width:40px;height:40px;border-radius:50%;border:1.5px solid var(--lima);background:transparent;color:var(--lima)}
.player-base button:disabled{opacity:.3;cursor:default}
body.modal-aberto{overflow:hidden}

/* ================= Computador: slides 16:9 ================= */
@media (min-width:900px) and (min-aspect-ratio:5/4){
  html{scroll-snap-type:y proximity}
  .deck{gap:14px;padding-top:12px}
  .slide{width:min(100vw - 28px,(100svh - 24px) * 16 / 9);aspect-ratio:16/9;min-height:0;padding:0;border-radius:16px;scroll-snap-align:center}
  .slide>*{position:absolute}
  .slide>.rasgo{position:absolute}
  .pagina{top:2.4cqw;right:2.6cqw;font-size:max(12px,.8cqw)}
  .meta{font-size:max(12px,.8cqw)}
  .nota-mao{font-size:max(18px,1.9cqw);padding:.4cqw 1cqw .6cqw}
  .botao{font-size:max(14px,1cqw);padding:max(10px,.8cqw) max(16px,1.4cqw)}
  .chips li{font-size:max(12px,.85cqw);padding:.3cqw .9cqw}
  .rodape{width:min(100vw - 28px,(100svh - 24px) * 16 / 9);padding:22px 4px 90px}

  /* Oi, eu sou a Emily */
  .sobre-foto{left:0;bottom:0;width:34%;height:100%;margin:0}
  .sobre-foto .rasgo{left:10%;top:9%;width:80%;height:82%}
  .recorte{height:93%;filter:drop-shadow(.3cqw 0 0 var(--creme)) drop-shadow(-.3cqw 0 0 var(--creme)) drop-shadow(0 .3cqw 0 var(--creme)) drop-shadow(0 -.3cqw 0 var(--creme)) drop-shadow(.6cqw .7cqw 0 rgba(32,62,48,.22))}
  .n1{left:60%;top:56%}
  .sobre-texto{left:36%;top:7%;bottom:3%;width:33%;display:flex;flex-direction:column}
  .sobre h2{font-size:5.4cqw;margin:.8cqw 0 1.4cqw}
  .sobre-texto>p:not(.meta){font-size:max(14px,1.08cqw);margin-bottom:.9cqw}
  .polaroids{position:absolute;left:1cqw;right:0;bottom:2.2cqw;height:10cqw;margin:0}
  .polaroids .polaroid{width:6.6cqw}
  .polaroids .polaroid figcaption{font-size:max(13px,1.1cqw);padding:.4cqw 0 .5cqw}
  .polaroids .p1{left:0;top:0}
  .polaroids .p2{left:7.4cqw;top:-.8cqw}
  .polaroids .p3{left:14.8cqw;right:auto;top:.4cqw}
  .sobre-lado{right:3.5%;top:9%;width:24%}
  .sobre-lado h3{font-size:max(17px,1.6cqw);margin:1.6cqw 0 .7cqw}
  .sobre-lado h3:first-child{margin-top:0}
  .sobre-lado p{font-size:max(14px,1cqw)}
  .numeros dd{font-size:3.6cqw}
  .numeros dt{font-size:max(12px,.75cqw)}
  .contatos a{font-size:max(14px,1cqw);padding:.3cqw 0}

  /* Índice */
  .indice-cab{left:4.5%;top:50%;translate:0 -50%;width:30%}
  .indice-cab .serif{font-size:2.4cqw}
  .indice h2{font-size:11cqw;margin:.2cqw 0 1cqw}
  .indice-cab p{font-size:max(14px,1.05cqw);margin:0}
  .indice-lista{left:39%;right:4.5%;top:50%;translate:0 -50%}
  .indice-lista a{grid-template-columns:4cqw 1fr auto auto;gap:1.2cqw;padding:1.05cqw 0}
  .i-n{font-size:max(12px,.9cqw)}
  .i-t{font-size:3cqw}
  .i-q{font-size:max(12px,.8cqw);min-width:7cqw;grid-column:4}
  .i-capas{display:flex;opacity:0;translate:-1cqw 0;transition:opacity .25s,translate .25s}
  .i-capas img{width:2.6cqw;aspect-ratio:9/16;object-fit:cover;border-radius:.35cqw;border:2px solid var(--lima);margin-left:-.8cqw;rotate:-6deg}
  .i-capas img:nth-child(2){rotate:3deg}.i-capas img:nth-child(3){rotate:8deg}
  .indice-lista a:hover .i-capas,.indice-lista a:focus-visible .i-capas{opacity:1;translate:0 0}
  .indice-lista a:hover,.indice-lista a:focus-visible{padding-left:1cqw}

  /* Capítulos */
  .cap-num{left:4.5%;top:7%;font-size:max(13px,1.1cqw)}
  .cap-titulo{left:4.5%;top:14%;width:50%}
  .cap-titulo .serif{font-size:3cqw;margin:0}
  .cap-titulo h2{font-size:var(--t);margin:.2cqw 0 1.4cqw}
  .etiqueta{font-size:max(14px,1.1cqw);padding:.45cqw 1cqw;margin-bottom:1.4cqw}
  .cap-titulo p{font-size:max(14px,1.1cqw)}
  .cap-titulo .cap-conta{font-size:max(12px,.8cqw);margin-top:1cqw}
  .cap-visual{right:6%;top:5%;width:36%;height:78%;margin:0}
  .cap-visual .rasgo{left:6%;top:4%;width:88%;height:92%}
  .cap-cel{width:15cqw}
  .n2{left:-12%;bottom:12%}
  .abas{left:1.5%;right:1.5%;bottom:0;flex-wrap:nowrap;gap:.35cqw}
  .abas a{flex:1 1 auto;min-width:0;text-align:center;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;font-size:max(13px,1.05cqw);padding:1cqw .6cqw 1.5cqw;border-radius:1cqw 1cqw 0 0;translate:0 .6cqw}
  .abas a:hover,.abas a:focus-visible{translate:0 0}

  /* Projetos */
  .pilula-tipo{left:3cqw;top:2.4cqw;font-size:max(12px,.8cqw);padding:.3cqw .9cqw;margin:0;z-index:8}
  .proj-visual{left:0;top:0;width:52%;height:100%;margin:0}
  .proj-info{left:56%;width:39%;top:50%;translate:0 -50%}
  .invertido .proj-visual{left:48%}
  .invertido .proj-info{left:5%}
  .proj-visual .rasgo{left:9%;top:10%;width:80%;height:80%}
  .principal{width:16.5cqw}
  .q1,.q2{width:11.5cqw}
  .q1{left:7%;top:12%}
  .q2{right:6%;bottom:9%;left:auto}
  .layout-wide .proj-visual{height:100%}
  .layout-wide .proj-visual .rasgo{left:4%;top:16%;width:92%;height:68%}
  .layout-wide .principal,.tela-wide.principal{width:40cqw}
  .layout-wide .q1,.layout-wide .q2{width:9.5cqw}
  .layout-wide .q1{top:14%;left:3%}.layout-wide .q2{bottom:5%;right:4%}
  .layout-varios .celular{width:13cqw}
  .c1{left:7%;top:19%}
  .c2{left:36%;top:29%}
  .c3{right:8%;top:15%}
  .layout-varios .proj-visual:has(.c2):not(:has(.c3)) .c1{left:14%}
  .layout-varios .proj-visual:has(.c2):not(:has(.c3)) .c2{left:auto;right:14%;top:28%}
  .layout-fila .proj-info{left:4.5%;width:33%}
  .layout-fila .proj-visual{left:38%;width:60%;top:0;height:100%;display:block;overflow:visible;padding:0;margin:0}
  .layout-fila .celular{position:absolute;width:11cqw}
  .layout-fila .c1{left:0;top:9%;rotate:-6deg}
  .layout-fila .c2{left:19%;top:33%;rotate:4deg;z-index:3!important}
  .layout-fila .c3{left:38%;right:auto;top:6%;rotate:-3deg}
  .layout-fila .c4{left:57%;top:30%;rotate:6deg}
  .layout-fila .c5{left:76%;top:8%;rotate:-5deg}
  .proj-nome{font-size:var(--n);margin:.6cqw 0 .4cqw}
  .proj-sub{font-size:max(15px,1.45cqw);margin-bottom:1cqw}
  .faixas{margin-top:1.4cqw}
  .faixas button{grid-template-columns:2.6cqw 1fr auto 2.2cqw;gap:.8cqw;padding:.65cqw .3cqw;font-size:max(14px,1.05cqw)}
  .f-n,.f-t{font-size:max(12px,.8cqw)}
  .f-p{width:max(24px,2cqw);height:max(24px,2cqw);font-size:max(10px,.7cqw)}
  .paleta{margin-top:1.3cqw}
  .paleta span{font-size:max(12px,.75cqw)}
  .paleta div{gap:.4cqw;margin-top:.5cqw}
  .paleta i{width:2.3cqw;height:2.3cqw;border-radius:.45cqw}
  .opiniao{margin-top:1.3cqw;padding:.8cqw 1.1cqw;border-radius:1cqw}
  .opiniao p{font-size:max(15px,1.35cqw)}
  .aspas{font-size:3.4cqw}

  /* Feedbacks */
  .fb-titulo{left:5%;top:50%;translate:0 -50%;width:40%}
  .fb-titulo .serif{font-size:2.6cqw;margin:.4cqw 0 0}
  .fb-titulo h2{font-size:7.4cqw;margin:.2cqw 0 1.2cqw}
  .fb-titulo p{font-size:max(14px,1.1cqw)}
  .fb-videos{right:7%;top:0;bottom:0;width:44%;display:block;margin:0}
  .fb{position:absolute;width:15cqw}
  .f1{left:4%;top:9%}
  .f2{right:4%;top:20%;margin:0}
  .fb .aspas{font-size:9cqw;left:-2.2cqw;top:1.4cqw}
  .fb figcaption{font-size:max(18px,1.8cqw);margin-top:.8cqw}

  /* Fotos */
  .fotos-cab{left:4.5%;top:50%;translate:0 -50%;width:25%}
  .fotos-cab .serif{font-size:2.4cqw;margin:.4cqw 0 0}
  .fotos-cab h2{font-size:7cqw;margin:.2cqw 0 1.6cqw}
  .fotos-grade{left:33%;right:3%;top:10%;bottom:6%;grid-template-columns:repeat(3,1fr);grid-template-rows:1fr 1fr;gap:1cqw;margin:0}
  .fotos-grade a{aspect-ratio:auto;border-radius:1cqw}
  .fotos-grade span{font-size:max(12px,.75cqw);left:.8cqw;bottom:.8cqw}

  /* Encerramento */
  .fim-texto{left:5%;top:50%;translate:0 -50%;width:50%}
  .fim-texto h2{font-size:6.6cqw;margin:.8cqw 0 1.2cqw}
  .fim-texto>p:not(.meta){font-size:max(15px,1.2cqw);max-width:40ch}
  .fim-acoes{gap:1.6cqw;margin-top:1.8cqw}
  .link-insta{font-size:max(14px,1cqw)}
  .fim-foto{right:3%;bottom:0;width:44%;height:94%;margin:0}
  .fim-foto .recorte{position:absolute;bottom:0;width:100%;filter:drop-shadow(.3cqw 0 0 var(--creme)) drop-shadow(-.3cqw 0 0 var(--creme)) drop-shadow(0 .3cqw 0 var(--creme)) drop-shadow(0 -.3cqw 0 var(--creme)) drop-shadow(.6cqw .7cqw 0 rgba(32,62,48,.22))}
  .fim-foto .rasgo{left:6%;top:14%;width:88%;height:80%}
  .n3{left:-4%;top:12%}
}

@media (prefers-reduced-motion:reduce){
  html{scroll-behavior:auto}
  .tela,.botao,.fotos-grade img,.abas a,.indice-lista a,.i-capas{transition:none}
}

/* O controle de slides aparece depois da capa. */
.controle{transition:opacity .3s,translate .3s}
.controle.escondido{opacity:0;pointer-events:none;translate:0 16px}
.deck{padding-top:14px}

/* ---------- Um nicho por slide ---------- */
.nicho .proj-nome{font-size:calc(var(--n) * 2.3);color:var(--verde);margin:8px 0 10px}
.nicho-desc{max-width:44ch;margin-bottom:6px}
.rotulo-lista{font:500 12px 'DM Mono',monospace;text-transform:uppercase;letter-spacing:.06em;color:var(--suave);margin:14px 0 6px}
.chips.marcas li{background:var(--verde);color:var(--creme);border-color:var(--verde)}
.nicho-conta{font:500 12px 'DM Mono',monospace;text-transform:uppercase;letter-spacing:.05em;margin-top:16px;color:var(--suave)}
.fb-mini{margin-top:14px;gap:6px}
.fb-mini .aspas{font-size:34px}
.nicho-area{position:relative;margin:22px -8px 0}
.nicho-area .rasgo{left:0;top:2%;width:100%;height:96%;rotate:-1.5deg}
.nicho-telas{position:relative;z-index:2;display:grid;grid-template-columns:1fr 1fr;gap:22px 14px;padding:26px 14px}
.item{margin:0;rotate:var(--r)}
.item-wide{grid-column:span 2}
.item .tela{width:100%}
.item .tela-wide{border-radius:clamp(16px,1.7cqw,30px)}
.item figcaption{display:flex;flex-direction:column;gap:2px;margin-top:8px;text-align:center}
.item figcaption strong{font:700 15px/1.1 'Barlow Condensed',sans-serif;text-transform:uppercase;letter-spacing:.03em;color:var(--verde)}
.item figcaption span{font:500 12px/1.3 'DM Mono',monospace;color:var(--suave)}

@media (min-width:900px) and (min-aspect-ratio:5/4){
  .nicho-info{left:4.5%;top:50%;translate:0 -50%;width:29%}
  .nicho .proj-nome{font-size:var(--n);margin:.6cqw 0 .9cqw}
  .nicho-desc{font-size:max(14px,1.1cqw)}
  .rotulo-lista{font-size:max(12px,.75cqw);margin:1.2cqw 0 .5cqw}
  .nicho-conta{font-size:max(12px,.75cqw);margin-top:1.4cqw}
  .fb-mini{margin-top:1cqw;font-size:max(13px,.9cqw)!important;padding:.45cqw 1.1cqw!important}
  .fb-mini .aspas{font-size:2.4cqw}
  .nicho-area{position:absolute;left:35.5%;right:2.5%;top:7%;bottom:5%;margin:0}
  .nicho-area .rasgo{top:3%;height:94%}
  .nicho-telas{position:absolute;inset:0;grid-template-columns:repeat(var(--cols),var(--w));justify-content:center;align-content:center;gap:1.6cqw 1.4cqw;padding:0}
  .item figcaption{margin-top:.6cqw}
  .item figcaption strong{font-size:max(12px,1cqw)}
  .item figcaption span{font-size:max(12px,.72cqw)}
}

/* ---------- Vídeo com som dentro do celular ---------- */
.tela-som,.tela-ampliar,.tela-barra{position:absolute;z-index:4;pointer-events:none}
.tela-som{left:8px;top:8px;font:500 12px 'DM Mono',monospace;background:var(--laranja);color:var(--verde);padding:2px 8px;border-radius:99px;opacity:0;transition:opacity .25s}
.tela-ampliar{right:8px;top:8px;display:grid;place-items:center;width:32px;height:32px;border-radius:50%;background:rgba(14,27,20,.75);color:var(--creme);font-size:16px;pointer-events:auto;opacity:0;transition:opacity .25s,background .2s}
.tela-ampliar:hover{background:var(--lima);color:var(--verde)}
.tela-barra{left:0;right:0;bottom:0;height:4px;background:rgba(14,27,20,.5)}
.tela-barra:after{content:'';position:absolute;inset:0 auto 0 0;width:var(--p,0%);background:var(--lima);transition:width .25s linear}
.tela:hover .tela-ampliar,.tela:focus-visible .tela-ampliar,.tela.com-som .tela-ampliar{opacity:1}
.tela.com-som .tela-som{opacity:1}
.tela.com-som .tela-tempo{opacity:0}
.tela.com-som{box-shadow:0 0 0 3px var(--laranja),0 20px 40px rgba(8,16,12,.45)}
.tela.com-som .tela-play{opacity:0}
.tela.com-som:hover .tela-play,.tela.com-som.pausado .tela-play{opacity:1}
.tela.com-som:not(.pausado):hover .tela-play{font-size:0}
.tela.com-som:not(.pausado):hover .tela-play:before{content:'❚❚';font-size:clamp(12px,1cqw,18px);letter-spacing:-2px}
.tela video[controls]{object-fit:contain;background:#000}
@media (hover:none){.tela-ampliar{opacity:1}}
